/*!
 * mydc Wissensdatenbank — Screenshot-Varianten fuer Light und Dark Mode
 *
 * WHMCS filtert Artikel-HTML: <style>-Bloecke, <picture>/<source> und
 * data-*-Attribute werden entfernt. class und style ueberleben. Deshalb
 * kann die Umschaltung nicht im Artikel stehen, sondern gehoert hierher.
 *
 * Verwendung im Artikel — zwei <img> uebereinander, eines je Theme:
 *   <img class="kb-shot kb-shot--light" src="/images/kb/foo--light.png" alt="…">
 *   <img class="kb-shot kb-shot--dark"  src="/images/kb/foo--dark.png"  alt="…">
 *
 * Sichtbar ist immer genau eines. Die Umschaltung folgt der Lagom-Klasse
 * .lagom-dark-mode am <html>, also dem echten Theme-Schalter des Kunden —
 * nicht prefers-color-scheme, das bei manuell umgeschaltetem Theme abweicht.
 */

.kb-shot {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, .08);
}

.lagom-dark-mode .kb-shot {
    border-color: rgba(255, 255, 255, .12);
}

/* Standard: helle Variante zeigen, dunkle verstecken. */
.kb-shot--dark { display: none; }
.kb-shot--light { display: block; }

.lagom-dark-mode .kb-shot--light { display: none; }
.lagom-dark-mode .kb-shot--dark { display: block; }

/* Bildunterschriften der Artikel */
.article-content figure { margin: 0 0 1.5rem; }

.article-content figcaption {
    margin-top: .5rem;
    font-size: .875em;
    opacity: .75;
}

/* ---------------------------------------------------------------------------
 * Links in Hinweisboxen
 *
 * Im Dark Mode faerbt Lagom .alert-info flaechig mit der Akzentfarbe
 * rgb(39,181,196) - und Links tragen genau dieselbe Farbe. Kontrast 1:1,
 * die Verweise sind schlicht unsichtbar.
 *
 * Gemessene Hintergruende (15.08.2026):
 *   hell:   info rgb(224,235,255) · warning rgb(255,241,224) · danger rgb(252,238,239)
 *   dunkel: info rgb(39,181,196)  · warning rgb(62,52,40)    · danger rgb(68,34,36)
 *
 * Im hellen Theme sind alle drei Flaechen hell, dort genuegt ein dunkler Ton.
 * Im dunklen Theme ist ausgerechnet die Info-Box hell, waehrend Warnung und
 * Gefahr dunkel sind - die beiden Faelle brauchen deshalb entgegengesetzte
 * Linkfarben. Alle Kombinationen liegen ueber 4,5:1 (WCAG AA).
 *
 * Zusaetzlich unterstrichen: Farbe allein ist kein zulaessiges
 * Unterscheidungsmerkmal fuer Links.
 * ------------------------------------------------------------------------- */

.article-content .alert a {
    color: #123c46;                 /* auf allen hellen Boxen >= 10:1 */
    text-decoration: underline;
    text-underline-offset: .15em;
}

.lagom-dark-mode .article-content .alert-info a {
    color: #0d2427;                 /* helle Akzentflaeche -> dunkler Link, ~7:1 */
}

.lagom-dark-mode .article-content .alert-warning a {
    color: #ffd9a8;                 /* dunkle Flaeche -> heller Link, ~8:1 */
}

.lagom-dark-mode .article-content .alert-danger a {
    color: #ffc9c9;                 /* dunkle Flaeche -> heller Link, ~8:1 */
}

.article-content .alert a:hover,
.article-content .alert a:focus-visible {
    text-decoration-thickness: 2px;
}

/* Tabellen in Artikeln duerfen auf schmalen Displays scrollen, statt die
 * ganze Seite breitzuziehen. */
.article-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}
