/* ailh-a11y.css -- Kopfzeilen-Korrektur und Barrierefreiheits-Menue fuer das
 * oeffentliche Frontend von ailinkhub.de.
 *
 * ailh-feat 2026-08-31 (a11y)
 *
 * WARUM ES DIESE DATEI GIBT (bitte lesen, bevor etwas geaendert wird)
 * ------------------------------------------------------------------
 * 1. Das Tailwind-Bundle (public/build/assets/landing-page-*.css) ist VORKOMPILIERT.
 *    Neue Utility-Klassen im Markup erzeugen kein CSS. Alles Eigene muss deshalb als
 *    fertiges CSS hier stehen.
 * 2. Die Datei wird BEWUSST als letztes Stylesheet eingebunden, also nach dem
 *    Vite-Bundle UND nach ailh-darkmode.css (siehe default/layout/app.blade.php und
 *    default/blog/app.blade.php). Nur so gewinnen die Abschnitte 2 und 3 gegen die
 *    Tailwind-Varianten, ohne ueberall !important zu brauchen.
 * 3. Eigene Datei statt ailh-layout.css, weil an jener Datei parallel gearbeitet wird.
 *
 * FARBEN
 * ------
 * Durchgaengig hsl(var(--...)). Die eigenen --ailh-a11y-*-Variablen stehen in
 * Abschnitt 2 einmal fuer hell und einmal fuer :root[data-ailh-theme="dark"].
 * Feste Farbwerte kommen nur in Abschnitt 1 vor, und zwar genau die beiden Grundtoene,
 * die das Theme selbst schon fuer sein Klappmenue benutzt (max-lg:bg-[#0A0A0E] bzw.
 * max-lg:bg-[#343C57]). Das ist Absicht: das Klappmenue soll ober- und unterhalb von
 * 1024 px identisch aussehen, sonst faellt der verschobene Umbruchpunkt auf.
 *
 * ==========================================================================
 * 1. KOPFZEILE: UEBERLAUF ZWISCHEN 1024 UND 1280 PX
 * ==========================================================================
 *
 * BEFUND (gemessen am 31.08.2026, Startseite in einem iframe fester Breite)
 *   Breite | Dokumentbreite | Ueberlauf | Logobreite
 *   1024   | 1375           | 351 px    | 0 px
 *   1100   | 1375           | 275 px    | 0 px
 *   1200   | 1200           |   0       | 0 px  (Logo trotzdem plattgedrueckt)
 *   1280   | 1280           |   0       | 49 px (Logo plattgedrueckt, Sollbreite 209 px)
 *   1440   | 1440           |   0       | 209 px
 *
 * URSACHE, zwei Anteile
 *   a) Die Menue-Pille traegt max-xl:gap-10. Unterhalb des xl-Umbruchs waechst der
 *      Abstand zwischen den Menuepunkten von 10 px auf 40 px, die Pille wird dadurch
 *      von 825 px auf 1005 px breit. Das allein sind 180 px Ueberlauf.
 *   b) Auch mit 10 px Abstand passt die Zeile nicht: Logo 209 + Pille 825 +
 *      rechte Gruppe 335 + Innenabstand 72 = 1441 px. Erst ab 1441 px ist die
 *      Kopfzeile rechnerisch in Ordnung. Deshalb wurde das Logo schon vorher
 *      zusammengedrueckt, bis 1200 px auf null.
 *
 * WARUM DIE PILLE NICHT EINFACH ENGER GESETZT WIRD
 *   Bei 1024 px stehen 1024 - 72 (Innenabstand) - 335 (rechte Gruppe) = 617 px fuer
 *   Logo UND Menue zur Verfuegung. Selbst mit 12 px Schrift, 8 px Polsterung und
 *   4 px Abstand bleibt die Pille rund 563 px breit. Fuer das Logo blieben dann unter
 *   60 px. Enger geht es nur unter die Lesbarkeitsgrenze. Der Ueberlauf bei 1024 px
 *   ist mit Abstaenden allein nicht loesbar, das ist nachgerechnet und nicht geschaetzt.
 *
 * LOESUNG, zweiteilig
 *   1024 bis 1279 px: das Klappmenue des Themes uebernimmt, so wie unterhalb von
 *                     1024 px auch. Der Menue-Knopf (.mobile-nav-trigger) wird dafuer
 *                     wieder eingeblendet, deshalb bleibt alles erreichbar. Der
 *                     Hell-Dunkel-Umschalter bleibt in seiner Leisten-Variante in der
 *                     Kopfzeile stehen (ailh-darkmode.css blendet die Menue-Variante ab
 *                     1024 px aus), er wird also NICHT unerreichbar.
 *   ab 1280 px:       die Pille bleibt sichtbar, wird aber bis 1535 px enger gesetzt
 *                     (Abstand, Polsterung, Schriftgrad). Damit passt das Logo in
 *                     voller Breite wieder hinein.
 *
 * Gilt fuer beide Kopfzeilen: modern/layout/header.blade.php (Startseite) und
 * default/blog/header.blade.php (Blog, Blogbeitrag, Rechtstexte). Beide benutzen
 * dieselben Haken #frontend-local-navbar, .site-nav-container, .mobile-nav-trigger.
 */

@media (min-width: 1024px) and (max-width: 1279.98px) {

    /* Aus der Zeile heraus und unter die Kopfleiste, wie unterhalb von 1024 px. */
    .site-header .site-nav-container {
        position: absolute;
        right: 0;
        top: 100%;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        color: #fff;
        background-color: #0A0A0E; /* wie max-lg:bg-[#0A0A0E] im Markup der Startseite */
    }

    /* Blog/Rechtstexte benutzen einen anderen Grundton. Der Blog-Navigationsbalken
       traegt keine Klasse .site-header-nav, daran wird er hier unterschieden. */
    .site-header nav:not(.site-header-nav) .site-nav-container {
        background-color: #343C57; /* wie max-lg:bg-[#343C57] im Blog-Markup */
    }

    .site-header .site-nav-container.lqd-is-active {
        max-height: calc(100vh - 150px);
    }

    .site-header .site-nav-container > div {
        max-height: inherit;
        overflow-y: auto;
    }

    /* Die Pille wieder zur Liste machen: lg:rounded-full, lg:border, lg:bg-black/70,
       lg:px-3 und lg:py-1.5 greifen ab 1024 px und muessen hier zurueckgenommen werden. */
    .site-header .site-nav-container ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
        padding: 2.5rem;
        border: 0;
        border-radius: 0;
        background-color: transparent;
        backdrop-filter: none;
    }

    /* Untermenue-Pfeil traegt lg:hidden. Ohne ihn waeren Menuepunkte mit Untermenue
       in diesem Bereich nicht aufklappbar. Aktuell hat kein Punkt Kinder, die Regel
       steht trotzdem hier, damit ein spaeter ergaenztes Mega-Menue nicht still bricht. */
    .site-header .site-nav-container li.has-children > span {
        display: inline-grid;
    }

    /* Menue-Knopf traegt lg:hidden und waere ab 1024 px weg. */
    .site-header .mobile-nav-trigger {
        display: flex;
    }

    /* Die rechte Gruppe traegt basis-1/3. Ohne die Pille in der Zeile reicht ein
       Drittel nicht mehr fuer Umschalter, Sprachwahl, zwei Knoepfe und Menue-Knopf:
       der Inhalt liefe aus dem Kasten heraus. flex-basis:auto laesst sie so breit
       werden, wie ihr Inhalt es braucht. */
    .site-header #frontend-local-navbar > div:last-child {
        flex-basis: auto;
    }
}

/* Ab 1280 px bleibt die Pille, wird aber enger gesetzt, damit das Logo wieder in
   voller Breite hineinpasst. Obergrenze 1535 px: ab 1536 px ist genug Platz fuer die
   Originalabstaende, und bei 1440 px lag die alte Zeile exakt auf der Kante (1441 px
   Bedarf bei 1440 px Platz), was jede laengere Uebersetzung sofort gesprengt haette. */
@media (min-width: 1280px) and (max-width: 1535.98px) {

    .site-header .site-nav-container ul {
        gap: 0.25rem;
        padding: 0.375rem 0.5rem;
        font-size: 0.8125rem; /* 13 px statt 15 px (Startseite) bzw. 14 px (Blog) */
    }

    .site-header .site-nav-container ul > li > a {
        padding-left: 0.625rem;
        padding-right: 0.625rem;
    }
}

/* Nebenbefund bei der Handy-Pruefung am 31.08.2026, hier gleich mit behoben:
   Blog, Blogbeitrag und Rechtstexte liessen sich bei 390 px waagerecht um 28 px
   scrollen (Dokumentbreite 418 px bei 390 px Fenster). Ursache ist die grosse
   Fusszeilen-Ueberschrift mit max-sm:text-[18vw]. Bei 390 px sind das 70 px
   Schriftgrad, das Wort "Testversion." braucht damit 402 px, verfuegbar sind 358 px.
   15vw passt von 320 bis 639 px, der Umbruch als Notnagel greift nur, wenn ein Wort
   trotzdem nicht passt. Bewusst hier und nicht in ailh-layout.css, weil an jener
   Datei parallel gearbeitet wird. */
@media (max-width: 639.98px) {

    [class*="text-[18vw]"] {
        font-size: 15vw;
        overflow-wrap: break-word;
    }
}

/* ==========================================================================
   2. BARRIEREFREIHEITS-MENUE: PALETTE
   --------------------------------------------------------------------------
   Eigene Variablen, weil die --ailh-*-Variablen aus ailh-darkmode.css nur im
   Dunkelmodus existieren. Alle Werte sind HSL-Tripel ohne hsl(), damit sie sich
   wie im Theme mit hsl(var(--x) / <alpha>) benutzen lassen.

   Gemessene Kontraste (WCAG 2.1, gegen die jeweilige Panelflaeche)
     hell    Text #2B2B2B auf #FFFFFF        13,6:1  AAA
             gedaempft #536780 auf #FFFFFF    6,0:1  AA
             Akzent #2340C4 auf #FFFFFF       8,0:1  AAA, und Weiss auf Akzent ebenso
             Rand #7A8899 auf #FFFFFF         3,3:1  AA fuer Bedienelemente
     dunkel  Text #EFF1F6 auf #1F222E        14,0:1  AAA
             gedaempft #AEB6BF auf #1F222E    7,8:1  AAA
             Akzent #8FA9FF auf #1F222E       8,0:1  AAA
   ========================================================================== */

:root {
    --ailh-a11y-surface: 0 0% 100%;
    --ailh-a11y-surface-2: 210 20% 97%;
    --ailh-a11y-text: 0 0% 17%;
    --ailh-a11y-muted: 214 18% 40%;
    --ailh-a11y-line: 214 16% 84%;
    --ailh-a11y-line-strong: 214 14% 55%;
    --ailh-a11y-accent: 230 70% 45%;
    --ailh-a11y-accent-fg: 0 0% 100%;
    --ailh-a11y-shadow: 220 40% 20%;
    /* Fuer Flaechen, die in BEIDEN Modi dunkel sind (die Menue-Pille der Kopfzeile). */
    --ailh-a11y-on-dark: 0 0% 100%;
}

:root[data-ailh-theme="dark"] {
    --ailh-a11y-surface: 228 20% 15%;
    --ailh-a11y-surface-2: 228 18% 21%;
    --ailh-a11y-text: 220 28% 95%;
    --ailh-a11y-muted: 214 12% 72%;
    --ailh-a11y-line: 228 15% 30%;
    --ailh-a11y-line-strong: 226 13% 55%;
    --ailh-a11y-accent: 226 100% 78%;
    --ailh-a11y-accent-fg: 230 40% 10%;
    --ailh-a11y-shadow: 0 0% 0%;
}

/* ==========================================================================
   3. BARRIEREFREIHEITS-MENUE: KNOPF UND KLAPPFENSTER
   ========================================================================== */

/* z-index 9000: ueber der Kopfleiste (z-50) und ueber dem Zurueck-nach-oben-Knopf
   (z-40), aber unter dem Cookie-Fenster (99999999) und dem Chat-Fenster (9999).
   Beide sitzen links unten, ueberlappen also ohnehin nicht. */
.ailh-a11y-fab {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;  /* 44 px, Mindestgroesse fuer Tastflaechen */
    height: 3.5rem;
    padding: 0;
    border: 0;
    border-radius: 0.75rem 0 0 0.75rem;
    background-color: hsl(var(--ailh-a11y-accent));
    color: hsl(var(--ailh-a11y-accent-fg));
    cursor: pointer;
    box-shadow: 0 4px 18px hsl(var(--ailh-a11y-shadow) / 0.28);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.ailh-a11y-fab:hover {
    transform: translateY(-50%) translateX(-2px);
}

.ailh-a11y-fab svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* Der Knopf verschwindet, solange das Fenster offen ist. Sonst stuende er hinter
   dem Fenster und fuehrte den Fokus ins Leere. */
.ailh-a11y-fab[aria-expanded="true"] {
    opacity: 0;
    pointer-events: none;
}

.ailh-a11y-scrim {
    position: fixed;
    inset: 0;
    z-index: 8999;
    background-color: hsl(var(--ailh-a11y-shadow) / 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.ailh-a11y-panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9001;
    display: flex;
    flex-direction: column;
    width: min(21rem, 100vw - 3rem);
    height: 100%;
    background-color: hsl(var(--ailh-a11y-surface));
    color: hsl(var(--ailh-a11y-text));
    border-left: 1px solid hsl(var(--ailh-a11y-line));
    box-shadow: -8px 0 32px hsl(var(--ailh-a11y-shadow) / 0.25);
    transform: translateX(101%);
    visibility: hidden;
    transition: transform 0.28s ease, visibility 0s linear 0.28s;
}

.ailh-a11y-panel.is-open {
    transform: none;
    visibility: visible;
    transition: transform 0.28s ease, visibility 0s;
}

/* Verdunkelung nur auf schmalen Bildschirmen. Am grossen Bildschirm bleibt die Seite
   sichtbar, damit man die Wirkung jeder Einstellung sofort sieht. */
@media (max-width: 767.98px) {

    .ailh-a11y-scrim.is-open {
        opacity: 1;
        pointer-events: auto;
    }

    /* Unter 768 px laege der Anfasser mittig am rechten Rand ueber dem Fliesstext.
       Gemessen bei 390 px: der Textkasten reicht bis 16 px an den Rand, ein 40 px
       breiter Anfasser wuerde also mitten in die Zeile ragen. Deshalb hier ins Eck
       unten rechts. Dort ist Platz: der Nach-oben-Knopf sitzt 9,5 rem hoeher
       (gemessen y 704 bei 900 px Fensterhoehe), Cookie-Knopf und Chat-Blase sitzen
       unten LINKS (gemessen x 15 bzw. x 30). */
    .ailh-a11y-fab {
        top: auto;
        bottom: 1.5rem;
        right: 1.5rem;
        width: 2.75rem;
        height: 2.75rem;
        border-radius: 50%;
        transform: none;
    }

    .ailh-a11y-fab:hover {
        transform: none;
    }
}

.ailh-a11y-panel__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1rem 1rem 1.25rem;
    border-bottom: 1px solid hsl(var(--ailh-a11y-line));
}

.ailh-a11y-panel__title {
    margin: 0;
    flex: 1 1 auto;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: hsl(var(--ailh-a11y-text));
}

.ailh-a11y-panel__head svg {
    width: 1.375rem;
    height: 1.375rem;
    flex: 0 0 auto;
    color: hsl(var(--ailh-a11y-accent));
}

.ailh-a11y-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: hsl(var(--ailh-a11y-text));
    cursor: pointer;
}

.ailh-a11y-close:hover {
    background-color: hsl(var(--ailh-a11y-surface-2));
}

.ailh-a11y-close svg {
    width: 1.25rem;
    height: 1.25rem;
}

.ailh-a11y-panel__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem 1.25rem 1.5rem;
}

.ailh-a11y-group {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid hsl(var(--ailh-a11y-line));
}

.ailh-a11y-group:last-of-type {
    border-bottom: 0;
}

.ailh-a11y-group__label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: hsl(var(--ailh-a11y-muted));
}

/* Schriftgrad: drei Stufen nebeneinander. */
.ailh-a11y-seg {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid hsl(var(--ailh-a11y-line-strong));
    border-radius: 0.75rem;
    background-color: hsl(var(--ailh-a11y-surface-2));
}

.ailh-a11y-seg button {
    flex: 1 1 0;
    min-height: 2.75rem;
    padding: 0.5rem 0.25rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: hsl(var(--ailh-a11y-text));
    font-family: inherit;
    font-weight: 600;
    line-height: 1.1;
    cursor: pointer;
}

.ailh-a11y-seg button:hover {
    background-color: hsl(var(--ailh-a11y-accent) / 0.14);
}

.ailh-a11y-seg button[aria-checked="true"] {
    background-color: hsl(var(--ailh-a11y-accent));
    color: hsl(var(--ailh-a11y-accent-fg));
}

.ailh-a11y-seg button .ailh-a11y-seg__a {
    display: block;
    font-size: 1.125rem;
}

.ailh-a11y-seg button .ailh-a11y-seg__t {
    display: block;
    font-size: 0.6875rem;
    font-weight: 500;
}

/* Ein Schalter je Zeile. Ganze Zeile ist der Knopf, damit die Tastflaeche gross ist. */
.ailh-a11y-switch {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.625rem 0.5rem;
    border: 0;
    border-radius: 0.625rem;
    background: transparent;
    color: hsl(var(--ailh-a11y-text));
    font-family: inherit;
    font-size: 0.875rem;
    text-align: start;
    cursor: pointer;
}

.ailh-a11y-switch + .ailh-a11y-switch {
    margin-top: 0.125rem;
}

.ailh-a11y-switch:hover {
    background-color: hsl(var(--ailh-a11y-surface-2));
}

.ailh-a11y-switch__text {
    flex: 1 1 auto;
}

.ailh-a11y-switch__text b {
    display: block;
    font-weight: 600;
    line-height: 1.35;
}

.ailh-a11y-switch__text small {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.75rem;
    line-height: 1.35;
    color: hsl(var(--ailh-a11y-muted));
}

/* Der Kippschalter selbst. Zusaetzlich zur Farbe wandert der Knubbel, Farbe allein
   waere kein zulaessiger Hinweis. */
.ailh-a11y-switch__track {
    position: relative;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 1.5rem;
    border: 1px solid hsl(var(--ailh-a11y-line-strong));
    border-radius: 999px;
    background-color: hsl(var(--ailh-a11y-surface-2));
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

.ailh-a11y-switch__track::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.1875rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: hsl(var(--ailh-a11y-line-strong));
    transform: translateY(-50%);
    transition: transform 0.18s ease, background-color 0.18s ease;
}

.ailh-a11y-switch[aria-checked="true"] .ailh-a11y-switch__track {
    background-color: hsl(var(--ailh-a11y-accent));
    border-color: hsl(var(--ailh-a11y-accent));
}

.ailh-a11y-switch[aria-checked="true"] .ailh-a11y-switch__track::after {
    transform: translateY(-50%) translateX(1.1875rem);
    background-color: hsl(var(--ailh-a11y-accent-fg));
}

.ailh-a11y-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 2.75rem;
    margin-top: 0.5rem;
    padding: 0.625rem 1rem;
    border: 1px solid hsl(var(--ailh-a11y-line-strong));
    border-radius: 0.75rem;
    background-color: hsl(var(--ailh-a11y-surface-2));
    color: hsl(var(--ailh-a11y-text));
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.ailh-a11y-reset:hover {
    background-color: hsl(var(--ailh-a11y-accent) / 0.14);
}

.ailh-a11y-reset svg {
    width: 1.125rem;
    height: 1.125rem;
}

.ailh-a11y-note {
    margin: 1rem 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: hsl(var(--ailh-a11y-muted));
}

/* Fokusring nur bei Tastaturbedienung. Bewusst kein :focus, sonst blitzt der Ring
   bei jedem Mausklick auf. */
.ailh-a11y-fab:focus-visible,
.ailh-a11y-close:focus-visible,
.ailh-a11y-seg button:focus-visible,
.ailh-a11y-switch:focus-visible,
.ailh-a11y-reset:focus-visible {
    outline: 3px solid hsl(var(--ailh-a11y-accent));
    outline-offset: 2px;
}

.ailh-a11y-fab:focus-visible {
    outline-offset: -3px; /* der Knopf klebt am Bildrand, aussen waere der Ring halb weg */
}

/* ==========================================================================
   4. DIE EINSTELLUNGEN SELBST
   ========================================================================== */

/* --- Schriftgroesse -------------------------------------------------------
   Wirkt ueber die Wurzelschriftgroesse, weil das Theme durchgehend rem benutzt.
   Damit wachsen Text UND Abstaende mit. Zwei Stufen, keine dritte: bei mehr als
   130 Prozent laeuft die Preistabelle auf 1280 px sichtbar aus dem Raster. */
:root[data-ailh-a11y-font="115"] {
    font-size: 115%;
}

:root[data-ailh-a11y-font="130"] {
    font-size: 130%;
}

/* --- Kontrast erhoehen ----------------------------------------------------
   Kein zweiter Hell-Dunkel-Schalter. Diese Einstellung veraendert die Palette
   NICHT, sie zieht innerhalb der jeweils gewaehlten Palette nur die Textfarben
   und Raender auseinander. Welche Palette gilt, entscheidet allein
   data-ailh-theme aus ailh-theme-init.blade.php. */
:root[data-ailh-a11y-contrast="on"] {
    --foreground: 0 0% 12%;
    --heading-foreground: 0 0% 6%;
    --border: 214 14% 45%;
    --button-border: 214 14% 45%;
}

:root[data-ailh-a11y-contrast="on"][data-ailh-theme="dark"] {
    --foreground: 220 25% 97%;
    --heading-foreground: 0 0% 100%;
    --border: 226 15% 62%;
    --button-border: 226 15% 62%;
}

/* Gedaempfte Textstellen auf volle Deckkraft ziehen. */
:root[data-ailh-a11y-contrast="on"] .opacity-50,
:root[data-ailh-a11y-contrast="on"] .opacity-60,
:root[data-ailh-a11y-contrast="on"] .opacity-70,
:root[data-ailh-a11y-contrast="on"] .opacity-80 {
    opacity: 1 !important;
}

/* Die Menue-Pille ist in BEIDEN Modi dunkel (lg:bg-black/70). Ihre Schrift steht
   auf text-white/60 und darf deshalb nicht auf --foreground gezogen werden, sonst
   staende im hellen Modus dunkle Schrift auf dunklem Grund. */
/* !important ist hier noetig und kein Schlamperei-Zeichen: ailh-layout.css traegt fuer
   dieselben Links die Regel
   html:not([data-ailh-theme="dark"]):not(.theme-dark) body:not(.theme-dark) .text-white\/60
   mit Spezifitaet 0,4,2. Dieser Selektor hier kommt nur auf 0,3,4 und verlaere sonst,
   obwohl er spaeter geladen wird. Gemessen am 31.08.2026: ohne !important blieb die
   Schrift bei rgba(255,255,255,0.66) statt auf vollem Weiss. */
:root[data-ailh-a11y-contrast="on"] .site-nav-container ul > li > a {
    color: hsl(var(--ailh-a11y-on-dark)) !important;
}

/* --- Links hervorheben ----------------------------------------------------
   Unterstrichen plus leichte Flaeche. Ausgenommen: Logo, Knoepfe in Linkoptik,
   die Menue-Pille und das Barrierefreiheits-Menue selbst. */
:root[data-ailh-a11y-links="on"] a:not(.site-logo):not([role="button"]):not(.ailh-a11y-panel a) {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

:root[data-ailh-a11y-links="on"] :is(p, li, dd, td, blockquote, figcaption) a {
    background-color: hsl(var(--ailh-a11y-accent) / 0.12);
    box-shadow: 0 0 0 2px hsl(var(--ailh-a11y-accent) / 0.12);
    border-radius: 2px;
}

/* --- Animationen anhalten -------------------------------------------------
   Drei Zustaende, damit die Systemeinstellung nicht ueberfahren wird:
     "paused"  = ausdruecklich angehalten
     "allowed" = ausdruecklich erlaubt, schlaegt die Systemeinstellung
     nicht gesetzt = die Systemeinstellung entscheidet
   Bewusst nur die Dauer auf nahezu null statt animation:none. Ein hartes none
   wuerde Elemente mit Einblend-Animation im Anfangszustand stehen lassen, also
   unsichtbar. Mit Dauer 0,001 ms springen sie sofort in den Endzustand. */
:root[data-ailh-a11y-motion="paused"] *,
:root[data-ailh-a11y-motion="paused"] *::before,
:root[data-ailh-a11y-motion="paused"] *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
}

:root[data-ailh-a11y-motion="paused"] {
    scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {

    :root:not([data-ailh-a11y-motion="allowed"]) *,
    :root:not([data-ailh-a11y-motion="allowed"]) *::before,
    :root:not([data-ailh-a11y-motion="allowed"]) *::after {
        animation-duration: 0.001ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        transition-delay: 0s !important;
    }

    :root:not([data-ailh-a11y-motion="allowed"]) {
        scroll-behavior: auto !important;
    }
}

/* --- Lesehilfe ------------------------------------------------------------
   Ein waagerechtes Band, das dem Zeiger folgt. pointer-events:none, damit es
   nichts blockiert. Liegt unter dem Menue, aber ueber der Seite. */
.ailh-a11y-guide {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 2.75rem;
    z-index: 8990;
    display: none;
    pointer-events: none;
    border-top: 3px solid hsl(var(--ailh-a11y-accent));
    border-bottom: 3px solid hsl(var(--ailh-a11y-accent));
    background-color: hsl(var(--ailh-a11y-accent) / 0.1);
}

:root[data-ailh-a11y-guide="on"] .ailh-a11y-guide {
    display: block;
}

/* ==========================================================================
   5. EINSTIEG IM FUSSBEREICH
   --------------------------------------------------------------------------
   Zweiter Einstieg neben dem schwebenden Anfasser: ein regulaerer Eintrag in der
   Fusszeilen-Spalte "Verbraucher" (siehe
   app/Extensions/LegalCenter/resources/views/partials/footer-links.blade.php).
   Auf jeder Seite per Tabulator erreichbar und ohne jede Ueberlagerung des Inhalts.

   Bewusst ein <button> und nicht <a href="#">: es wird nichts angesteuert, sondern
   etwas geoeffnet. Weil ailh-legal.css die Nachbareintraege nur ueber den Selektor
   .ailh-footer-legal__list a anspricht, muss die Optik hier eins zu eins nachgebaut
   werden. Wer dort Abstaende aendert, muss es hier mitziehen.
   ========================================================================== */

.ailh-footer-legal__list .ailh-a11y-footerlink {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 2.75rem; /* 44 px Tastflaeche, wie bei den Nachbareintraegen */
    padding: 0.125rem 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    overflow-wrap: anywhere;
    opacity: 0.8;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.ailh-footer-legal__list .ailh-a11y-footerlink:hover,
.ailh-footer-legal__list .ailh-a11y-footerlink:focus-visible {
    opacity: 1;
    text-decoration: underline;
}

.ailh-footer-legal__list .ailh-a11y-footerlink:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 2px;
    border-radius: 4px;
}

@media (min-width: 48em) {

    .ailh-footer-legal__list .ailh-a11y-footerlink {
        display: block;
        min-height: 0;
        padding: 0.28rem 0;
    }
}

/* ==========================================================================
   9. "KONTRAST ERHOEHEN" IM EINGELOGGTEN BEREICH (Panel/Dashboard)
   --------------------------------------------------------------------------
   ailh-fix 2026-09-01 (a11y-panel)

   WARUM ES DIESEN ZWEITEN BLOCK ueberhaupt gibt (nicht ableitbar, bitte lesen,
   bevor jemand die Bloecke zusammenlegt):

   1) PANEL UND OEFFENTLICHE SEITE HABEN VERSCHIEDENE DUNKELMODUS-MECHANIKEN.
      Oeffentliche Seite: data-ailh-theme="dark" am <html> (ailh-theme-init.blade.php).
      Panel:              body.theme-dark / body.theme-light, gesetzt aus localStorage
                          "lqdDarkMode" in panel/layout/partials/mode-script.blade.php.
      Die Regel weiter oben, :root[data-ailh-a11y-contrast="on"][data-ailh-theme="dark"],
      kann im Panel deshalb NIE greifen -- dort gibt es kein data-ailh-theme. Uebrig
      blieb die helle Variante mit fast schwarzer Schrift, die im dunklen Panel alles
      unlesbar gemacht haette.

   2) VARIABLEN AM <html> ERREICHEN DEN PANEL-INHALT NICHT.
      Das Dashboard-Theme (marketing-bot-dashboard, scss/base/_vars.scss) definiert
      --foreground und --border in .theme-dark, also am <body>. Eine Definition am
      :root wird davon fuer den gesamten Seiteninhalt ueberdeckt -- Vererbung schlaegt
      hier jede Spezifitaet, weil es ein anderes Element ist. Die Palette muss deshalb
      am body gesetzt werden, nicht an :root.

   3) ailh-dashcontrast.css SETZT FESTE FARBWERTE, KEINE VARIABLEN.
      Fuer .text-label, .text-input-foreground und ::placeholder steht dort ein
      literaler hsl()-Wert (z.B. body.theme-dark .text-label { color: hsl(220 12% 78%) }
      = rgb(192,197,206)). Eine Aenderung an --foreground erreicht diese Stellen
      grundsaetzlich nicht. Genau daran ist die Messung "Textfarbe mit Attribut
      identisch zu ohne" gescheitert. Sie muessen hier einzeln nachgezogen werden.
      Ausserdem haengen alle .text-foreground/NN- und .text-heading-foreground/NN-
      Stufen dort an body.theme-dark/.theme-light (Spezifitaet 0,2,1) -- die Selektoren
      unten kommen bewusst auf 0,3,2 bzw. hoeher, damit sie gewinnen.

   ABGRENZUNG: alles hier haengt an body.ailh-panel (gesetzt in
   panel/layout/app.blade.php). Auf der oeffentlichen Seite gibt es diese Klasse nicht,
   dort aendert sich durch diesen Block also nichts. Die bestehenden Regeln oben
   bleiben unangetastet.

   MASS: ailh-dashcontrast.css hat den Grundkontrast des Dashboards bereits auf rund
   8:1 fuer Nebentext gehoben. Ein Schalter, der nur bis dorthin kaeme, waere nicht
   spuerbar. Dieser Schalter geht deshalb auf das Maximum der jeweiligen Palette:
     dunkel  reines Weiss auf rgb(41,41,41)   = 14,5:1  (vorher Fliesstext 13:1,
                                                         Nebentext 7-9:1)
     hell    reines Schwarz auf rgb(~242)     = 18,7:1  (vorher Fliesstext 11,3:1,
                                                         Nebentext 5-8:1)
   Der sichtbare Sprung ist vor allem, dass die gesamte "ausgegraute" Stufe
   verschwindet: Beschriftungen, Hilfetexte und Tabellen-Nebenangaben stehen danach
   in derselben Staerke wie der Fliesstext, und Karten/Trennlinien bekommen einen
   wirklich sichtbaren Rahmen (--border von 5% auf 45% Deckkraft).
   ========================================================================== */

/* --- 9.1 Palette auf Maximalkontrast, am body statt an :root (siehe Punkt 2) --- */
:root[data-ailh-a11y-contrast="on"] body.ailh-panel.theme-dark {
    --foreground: 0 0% 100%;
    --heading-foreground: 0 0% 100%;
    --border: 0 0% 100% / 45%;
    --input-border: 0 0% 100% / 55%;
    --button-border: 0 0% 100% / 55%;
}
:root[data-ailh-a11y-contrast="on"] body.ailh-panel.theme-light {
    --foreground: 0 0% 0%;
    --heading-foreground: 0 0% 0%;
    --border: 0 0% 0% / 45%;
    --input-border: 0 0% 0% / 55%;
    --button-border: 0 0% 0% / 55%;
}

/* --- 9.2 Abgeschwaechte Textstufen auf volle Staerke ----------------------
   Das ist der sichtbarste Teil. ailh-dashcontrast.css hebt diese Stufen auf
   0,62 bis 0,93 Deckkraft an und laesst die Abstufung bewusst bestehen; im
   Kontrastmodus faellt die Abstufung weg, alles steht auf voller Farbe.
   Ohne .ailh-panel-Bindung wuerde das auch die oeffentliche Seite treffen. */
:root[data-ailh-a11y-contrast="on"] body.ailh-panel :is(
    .text-foreground\/40,
    .text-foreground\/50,
    .text-foreground\/55,
    .text-foreground\/60,
    .text-foreground\/65,
    .text-foreground\/70,
    .text-foreground\/75,
    .text-foreground\/80,
    .text-foreground\/90
) {
    color: hsl(var(--foreground));
}
:root[data-ailh-a11y-contrast="on"] body.ailh-panel :is(
    .text-heading-foreground\/40,
    .text-heading-foreground\/50,
    .text-heading-foreground\/60,
    .text-heading-foreground\/70,
    .text-heading-foreground\/75,
    .text-heading-foreground\/80
) {
    color: hsl(var(--heading-foreground));
}

/* --- 9.3 Stellen mit festen Farbwerten aus ailh-dashcontrast.css (siehe Punkt 3) --- */
:root[data-ailh-a11y-contrast="on"] body.ailh-panel.theme-dark .text-label,
:root[data-ailh-a11y-contrast="on"] body.ailh-panel.theme-dark .text-input-foreground {
    color: hsl(0 0% 100%);
}
:root[data-ailh-a11y-contrast="on"] body.ailh-panel.theme-light .text-label,
:root[data-ailh-a11y-contrast="on"] body.ailh-panel.theme-light .text-input-foreground {
    color: hsl(0 0% 0%);
}
/* Platzhalter bleiben absichtlich schwaecher als eingegebener Text -- sonst sieht
   ein leeres Feld aus wie ein ausgefuelltes. Aber deutlich staerker als bisher:
   dunkel 6,4:1 statt 4,7:1, hell 8,2:1 statt 4,7:1. */
:root[data-ailh-a11y-contrast="on"] body.ailh-panel.theme-dark .lqd-input::placeholder,
:root[data-ailh-a11y-contrast="on"] body.ailh-panel.theme-dark .form-control::placeholder {
    color: hsl(0 0% 88%);
    opacity: 1;
}
:root[data-ailh-a11y-contrast="on"] body.ailh-panel.theme-light .lqd-input::placeholder,
:root[data-ailh-a11y-contrast="on"] body.ailh-panel.theme-light .form-control::placeholder {
    color: hsl(0 0% 26%);
    opacity: 1;
}

/* --- 9.4 Deckkraft-Utilities auf Text ------------------------------------
   Die allgemeine Regel im Kontrast-Block oben zieht .opacity-50/60/70/80 auf 1.
   Hier kommt nur .opacity-40 dazu, und zwar mit derselben engen Auswahl, die
   ailh-dashcontrast.css benutzt: nur Textelemente, keine Symbole, nichts mit
   Hintergrund-, Rahmen- oder Positionierungsklasse. */
:root[data-ailh-a11y-contrast="on"] body.ailh-panel
    :is(p, span, small, label, li, dd, dt, td, th, h1, h2, h3, h4, h5, h6,
        a, figcaption, strong, em, blockquote, legend, summary, div).opacity-40:not([class*="bg-"]):not([class*="border-"]):not(.absolute):not(.fixed) {
    opacity: 1 !important;
}

/* --- 9.5 Deko zurueckholen (WICHTIG, sonst verdeckt der Kontrastmodus Inhalt) ---
   Die allgemeine Regel :root[data-ailh-a11y-contrast="on"] .opacity-50 { opacity: 1 }
   kennt keine Ausnahmen. Auf der oeffentlichen Seite ist das harmlos; im Panel sind
   .opacity-50/60/70 aber auch Modal-Schleier, Ueberlagerungen und Trennflaechen.
   Ein Schleier mit voller Deckkraft wuerde den Dialog dahinter komplett verdecken.
   Diese Regeln stellen genau fuer solche Elemente den Ausgangswert wieder her.
   Sie muessen NACH 9.4 stehen und tragen !important, weil die allgemeine Regel
   ebenfalls !important traegt. */
:root[data-ailh-a11y-contrast="on"] body.ailh-panel
    :is([class*="bg-"], [class*="border-"], svg, img, video, canvas, .absolute, .fixed).opacity-50 {
    opacity: 0.5 !important;
}
:root[data-ailh-a11y-contrast="on"] body.ailh-panel
    :is([class*="bg-"], [class*="border-"], svg, img, video, canvas, .absolute, .fixed).opacity-60 {
    opacity: 0.6 !important;
}
:root[data-ailh-a11y-contrast="on"] body.ailh-panel
    :is([class*="bg-"], [class*="border-"], svg, img, video, canvas, .absolute, .fixed).opacity-70 {
    opacity: 0.7 !important;
}
:root[data-ailh-a11y-contrast="on"] body.ailh-panel
    :is([class*="bg-"], [class*="border-"], svg, img, video, canvas, .absolute, .fixed).opacity-80 {
    opacity: 0.8 !important;
}

/* --- 9.6 Rahmen und Trennlinien -----------------------------------------
   9.1 hebt --border an, das erreicht aber nur Stellen, die auch wirklich
   border-border benutzen. Sehr haeufig steht im Dashboard stattdessen eine
   Utility mit eigenem Alpha (border-foreground/10, border-border/20 ...), die
   --border gar nicht liest. Die wird hier nachgezogen, damit Karten,
   Tabellenzeilen und Abschnitte im Kontrastmodus als Kaesten erkennbar sind.
   ACHTUNG: hier stehen ATTRIBUT-Selektoren, keine Klassenselektoren -- im
   class-Attribut steht der Schraegstrich unmaskiert ("border-foreground/10").
   Ein \/ wie in 9.2 waere hier falsch und wuerde nie treffen. */
:root[data-ailh-a11y-contrast="on"] body.ailh-panel :is(
    [class*="border-foreground/"],
    [class*="border-border/"],
    [class*="border-heading-foreground/"]
) {
    border-color: hsl(var(--foreground) / 0.45);
}

/* ==========================================================================
   10. "KONTRAST ERHOEHEN" IM PANEL: FLAECHEN STATT TEXTFARBE
   --------------------------------------------------------------------------
   ailh-fix 2026-09-01 (a11y-kontraststaerke)

   DER NICHT OFFENSICHTLICHE BEFUND (bitte lesen, bevor hier etwas gedreht wird):
   Abschnitt 9 zieht die Textfarbe auf das Maximum der Palette. Rechnerisch ist das
   korrekt, SICHTBAR ist es fast nichts. Gemessen am 01.09.2026 im Panel, Dunkelmodus:
   nur 86 von 154 Textstellen aendern ueberhaupt ihre Farbe, der Rest steht schon auf
   reinem Weiss. Fliesstext springt von 13:1 auf 14,5:1. Das ist kein wahrnehmbarer
   Unterschied. Grund: ailh-dashcontrast.css hat den GRUNDkontrast bereits auf 8 bis
   13:1 gehoben -- danach ist bei der Textfarbe schlicht keine Luft mehr.

   Der Hebel liegt deshalb NICHT beim Text, sondern bei den Flaechen. Ist-Zustand
   Dunkelmodus, ebenfalls gemessen:
     Seitengrund     rgb(41,41,41)   (--background: 0 0% 16%)
     Kartengrund     rgb(66,66,66)   (--card-background: 0 0% 26%)  -> Karte gegen
                                     Seite nur 1,45:1, Helligkeitsabstand dL* = 4
     Eingabefelder   .lqd-input traegt border-color hsl(var(--heading-foreground)/.05)
                     und background-color:transparent FEST im Theme-Bundle -- eine
                     Aenderung an --input-border/--input-background erreicht die
                     Felder deshalb nur halb. Muss hier einzeln ueberschrieben werden.
     bg-foreground/5 1012 Vorkommen. Im Dunkeln rgba(242,242,242,0.05) ueber der Karte
                     = rgb(75) gegen Karte rgb(66). Praktisch unsichtbar abgesetzt.
     Schriftstaerke  durchgehend 500, keine Abstufung.
   Karte und Hintergrund wirken dadurch wie eine einzige graue Masse. Genau das
   beschreibt die Rueckmeldung "der Kontrast macht nur den Rand heller, aber keine
   Schrift": die Raender waren das Einzige, was sich sichtbar veraendert hat.

   WAS DIESER ABSCHNITT TUT (vier Hebel, in der Reihenfolge ihrer Wirkung)
     1. Ebenen trennen. Dunkel: Seitengrund auf reines Schwarz, Karten auf 18 %,
        Flaechen 24 %, Felder 26 %. Gemessen (headless Chrome, echte Theme-Variablen):
        Karte gegen Seite vorher rgb(66) auf rgb(41), dL* = 11,4 -- nachher rgb(46)
        auf rgb(0), dL* = 18,9. Kachel gegen Karte vorher rgb(75) auf rgb(66),
        dL* = 4,1 -- nachher rgb(71) auf rgb(46), dL* = 11,4.
        Hell: Seitengrund auf reines Weiss, Karten weiss mit kraeftiger Umrandung,
        Flaechen 94 %, Innenkacheln 88 % (rgb 224).
        WICHTIG zur Bewertung: das KONTRASTVERHAELTNIS taugt am dunklen Ende NICHT
        als Mass. Karte gegen Seite geht nur von 1,45:1 auf 1,55:1, waehrend der
        sichtbare Helligkeitsabstand um zwei Drittel waechst; eine Zwischenfassung mit
        Karte auf 13 % sank sogar auf 1,30:1 und sah trotzdem deutlich besser aus.
        Der +0,05-Summand in der WCAG-Formel staucht dort alles zusammen. Bewertet
        wird hier deshalb dL* (CIE-Helligkeit), nicht das Verhaeltnis.
     2. Transparenzen aufloesen. bg-foreground/5, /10, /15, /20 werden deckende
        Grautoene mit echtem Abstand zur Karte. Das ist mengenmaessig der groesste
        Einzelposten (rund 1400 Elemente inkl. Hover-Varianten).
     3. Schriftstaerke eine Stufe hoch: 400 -> 500, 500 -> 600, 600 -> 700.
        Inter liegt lokal in 400/500/600/700/900 vor (public/fonts/ailh), 600 ist
        also eine echte Schnittstaerke und keine vom Browser gerechnete Faelschung.
        font-bold (700) bleibt unangetastet, weil 800 bei Inter fehlen wuerde.
     4. Verlaufsschrift (bg-clip-text + text-transparent, 36 Stellen) wird eine
        Flaeche in --heading-foreground. Farbverlaeufe auf Bildern und Medien
        bleiben, die traegt kein Text.

   GRENZEN, DIE HIER BEWUSST EINGEHALTEN WERDEN
     - Alles haengt an body.ailh-panel. Die oeffentliche Seite aendert sich nicht.
     - Farbige Bedeutungstraeger bleiben farbig: text-red-*, text-green-*, Badges,
       Warn- und Erfolgsmeldungen werden hier NICHT angefasst.
     - Schleier und Ueberlagerungen bleiben durchsichtig: alles mit inset-* ist von
       der Deckend-Regel ausgenommen, sonst verdeckt ein Modal-Schleier den Dialog.
       bg-background/NN (85x /80, 55x /90, 45x /50) wird gar nicht angefasst.
     - Bilder, Videos, Leinwaende und Symbole bleiben unberuehrt.
     - Deaktivierte Elemente bleiben deaktiviert (disabled:opacity-* ist ein eigener
       Klassenname und wird von keiner Regel hier getroffen).

   MESSFALLE (zwei Bearbeiter sind am 01.09.2026 hineingelaufen)
     Direkt nach dem Umschalten misst man den STARTWERT der CSS-Uebergaenge -- das
     body-Element traegt transition-bg. Vor jeder Messung mindestens 350 ms warten.
     Und der Hell-Dunkel-Wechsel laesst sich NICHT durch blosses Umhaengen der
     Klasse .theme-dark/.theme-light pruefen, dafuer braucht es einen echten
     Seitenaufbau (mode-script.blade.php liest localStorage "lqdDarkMode").
   ========================================================================== */

/* --- 10.1 Ebenen-Palette --------------------------------------------------
   Erweitert 9.1. --border wird hier von 45 % auf 55 % nachgezogen, weil die
   Raender jetzt der Haupttraeger der Trennung sind.
   Die eigenen --ailh-hc-*-Variablen existieren, damit die Fuellstufen weiter
   unten nur EINMAL pro Modus stehen und nicht je Regel doppelt. */
:root[data-ailh-a11y-contrast="on"] body.ailh-panel.theme-dark {
    --background: 0 0% 0%;          /* vorher 0 0% 16% = rgb(41) */
    --card-background: 0 0% 18%;    /* vorher 0 0% 26% = rgb(66) */
    --dropdown-background: 0 0% 18%;
    --surface-background: 0 0% 24%;
    --input-background: 0 0% 26%;
    --border: 0 0% 100% / 55%;
    --input-border: 0 0% 100% / 70%;
    --button-border: 0 0% 100% / 70%;
    --ailh-hc-line: 0 0% 100% / 55%;
    --ailh-hc-line-strong: 0 0% 100% / 75%;
    --ailh-hc-fill-1: 0 0% 28%;     /* ersetzt bg-foreground/5  */
    --ailh-hc-fill-2: 0 0% 35%;     /* ersetzt bg-foreground/10 */
    --ailh-hc-fill-3: 0 0% 39%;     /* ersetzt bg-foreground/15 */
    --ailh-hc-fill-4: 0 0% 43%;     /* ersetzt bg-foreground/20 */
    /* Bernstein, weil ein weisser Fokusring auf weissen Raendern untergeht. */
    --ailh-hc-focus: 45 100% 60%;
}
:root[data-ailh-a11y-contrast="on"] body.ailh-panel.theme-light {
    --background: 0 0% 100%;        /* vorher 90 8% 95% = rgb(242,243,240) */
    --card-background: 0 0% 100%;   /* Karte = weiss, getrennt durch den Rand */
    --dropdown-background: 0 0% 100%;
    --surface-background: 0 0% 94%;
    --input-background: 0 0% 100%;
    --border: 0 0% 0% / 55%;
    --input-border: 0 0% 0% / 70%;
    --button-border: 0 0% 0% / 70%;
    --ailh-hc-line: 0 0% 0% / 55%;
    --ailh-hc-line-strong: 0 0% 0% / 75%;
    --ailh-hc-fill-1: 0 0% 88%;
    --ailh-hc-fill-2: 0 0% 80%;
    --ailh-hc-fill-3: 0 0% 76%;
    --ailh-hc-fill-4: 0 0% 72%;
    --ailh-hc-focus: 226 100% 38%;
}

/* --- 10.2 Karten, Flaechen und Klappmenues bekommen eine sichtbare Kante ---
   outline statt border: outline liegt ausserhalb des Boxmodells, aendert also
   KEINE Groessen und verschiebt kein Raster. outline-offset:-1px zieht die Linie
   nach innen, damit sie dem border-radius folgt und nichts ueberlappt.
   Absichtlich NICHT auf bg-foreground/5: das sind ueber 1000 Elemente, darunter
   Symbolkreise und Fortschrittsbalken -- die trennt 10.4 ueber den Farbton. */
:root[data-ailh-a11y-contrast="on"] body.ailh-panel :is(
    .bg-card-background,
    .bg-surface-background,
    .bg-dropdown-background
) {
    outline: 1px solid hsl(var(--ailh-hc-line));
    outline-offset: -1px;
}
/* Die zwei halbdurchsichtigen Kartenvarianten (Chat-Seitenleiste) deckend. */
:root[data-ailh-a11y-contrast="on"] body.ailh-panel :is(
    .bg-card-background\/70,
    .bg-card-background\/80
) {
    background-color: hsl(var(--card-background));
}
@media (min-width: 768px) {

    :root[data-ailh-a11y-contrast="on"] body.ailh-panel :is(
        .md\:bg-card-background\/70,
        .md\:bg-card-background\/80
    ) {
        background-color: hsl(var(--card-background));
    }
}
/* Kopfleiste: --header-background ist im Theme voll durchsichtig, der Inhalt
   scrollt darunter durch. Bewusst wird die KLASSE gesetzt und nicht die Variable:
   --header-background dient ueber .text-header-background auch als Schriftfarbe. */
:root[data-ailh-a11y-contrast="on"] body.ailh-panel .bg-header-background {
    background-color: hsl(var(--background));
}
/* Seitenleiste steht auf --background, ist nach der Umstellung also farbgleich
   mit der Seite. inset-Schatten statt border, damit die feste Breite bleibt. */
:root[data-ailh-a11y-contrast="on"] body.ailh-panel .lqd-navbar {
    box-shadow: inset -1px 0 0 hsl(var(--ailh-hc-line));
}

/* --- 10.3 Eingabefelder ---------------------------------------------------
   .lqd-input traegt im Theme-Bundle feste Werte (background-color:transparent,
   border-color:hsl(var(--heading-foreground)/.05)) und ueberschreibt damit die
   Utilities bg-input-background/border-input-border aus input.blade.php. Die
   Variablen aus 10.1 kommen dort also NICHT an -- deshalb hier explizit.
   Schalter, Kontrollkaestchen und Auswahlknoepfe bekommen nur den Rand: ihr
   Hintergrund ist Zustandsanzeige (dark:checked:bg-label) und darf nicht
   ueberschrieben werden, sonst sieht "an" aus wie "aus". */
:root[data-ailh-a11y-contrast="on"] body.ailh-panel
    .lqd-input:not([type="checkbox"]):not([type="radio"]):not(.lqd-input-switcher) {
    background-color: hsl(var(--input-background));
    border-color: hsl(var(--ailh-hc-line-strong));
}
:root[data-ailh-a11y-contrast="on"] body.ailh-panel
    :is(.lqd-input[type="checkbox"], .lqd-input[type="radio"], .lqd-input-switcher, .form-control, .form-select) {
    border-color: hsl(var(--ailh-hc-line-strong));
}

/* --- 10.4 Halbdurchsichtige Flaechen werden deckend -----------------------
   Der mengenmaessig groesste Hebel. Ausgenommen bleibt alles mit inset-*: das
   sind Schleier, Ueberlagerungen und Verlaufsmasken ueber Bildern. Eine deckende
   Flaeche waere dort ein Vorhang vor dem Inhalt.
   Die Stufen bleiben unterscheidbar (28/35/39/43 % im Dunkeln), damit ein
   aktiver oder ausgewaehlter Zustand -- haeufig /10 gegen /5 -- weiterhin als
   Zustand lesbar ist und nicht mit der Grundflaeche verschmilzt. */
:root[data-ailh-a11y-contrast="on"] body.ailh-panel
    :is(.bg-foreground\/5, .dark\:bg-foreground\/5):not([class*="inset-"]) {
    background-color: hsl(var(--ailh-hc-fill-1));
}
:root[data-ailh-a11y-contrast="on"] body.ailh-panel
    :is(.bg-foreground\/10, .dark\:bg-foreground\/10):not([class*="inset-"]) {
    background-color: hsl(var(--ailh-hc-fill-2));
}
:root[data-ailh-a11y-contrast="on"] body.ailh-panel
    .bg-foreground\/15:not([class*="inset-"]) {
    background-color: hsl(var(--ailh-hc-fill-3));
}
:root[data-ailh-a11y-contrast="on"] body.ailh-panel
    .bg-foreground\/20:not([class*="inset-"]) {
    background-color: hsl(var(--ailh-hc-fill-4));
}
/* Hover muss sichtbar bleiben: 555x hover:bg-foreground/5, 81x /10. Ohne diese
   Regeln faellt das Element beim Ueberfahren auf die durchsichtige Theme-Variante
   zurueck und wirkt DUNKLER als im Ruhezustand -- also genau verkehrt herum. */
:root[data-ailh-a11y-contrast="on"] body.ailh-panel
    .hover\:bg-foreground\/5:hover {
    background-color: hsl(var(--ailh-hc-fill-2));
}
:root[data-ailh-a11y-contrast="on"] body.ailh-panel
    .hover\:bg-foreground\/10:hover {
    background-color: hsl(var(--ailh-hc-fill-3));
}

/* --- 10.5 Schriftstaerke eine Stufe hoeher --------------------------------
   Wirkt in der Wahrnehmung oft staerker als jede Farbaenderung, weil die
   Strichstaerke waechst statt nur der Helligkeitsabstand.
   font-bold (700) bleibt, weil Inter lokal keine 800 hat (public/fonts/ailh) und
   der Browser sie sonst rechnerisch verfetten wuerde. Die Ueberschriftenschrift
   Spline Sans liegt nur in 600/700 vor -- beide Zielwerte sind vorhanden. */
:root[data-ailh-a11y-contrast="on"] body.ailh-panel {
    font-weight: 500;
}
:root[data-ailh-a11y-contrast="on"] body.ailh-panel .font-normal {
    font-weight: 500;
}
:root[data-ailh-a11y-contrast="on"] body.ailh-panel .font-medium {
    font-weight: 600;
}
:root[data-ailh-a11y-contrast="on"] body.ailh-panel .font-semibold {
    font-weight: 700;
}

/* --- 10.6 Verlaufsschrift wird Flaeche ------------------------------------
   36 Stellen tragen "bg-gradient-to-* ... bg-clip-text text-transparent". Solche
   Schrift laeuft ueber den Verlauf hinweg durch mehrere Helligkeiten; an den
   hellen Stellen des Verlaufs ist sie im Hellmodus praktisch weg. Kontrast laesst
   sich dort gar nicht messen, deshalb im Kontrastmodus eine Flaeche.
   -webkit-text-fill-color ist noetig, weil color allein bei aktivem
   background-clip:text in WebKit nicht durchschlaegt. */
:root[data-ailh-a11y-contrast="on"] body.ailh-panel .bg-clip-text {
    background-image: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: hsl(var(--heading-foreground));
    -webkit-text-fill-color: hsl(var(--heading-foreground));
}

/* --- 10.7 Fliesstext-Bausteine (.prose) ----------------------------------
   ailh-dashcontrast.css haengt die prose-Variablen an --foreground; die folgen
   also automatisch. Nur die abgeschwaechten Nebenrollen werden hier nachgezogen,
   damit Aufzaehlungszeichen, Bildunterschriften und Tabellenlinien im
   Kontrastmodus nicht die einzigen blassen Stellen im Text bleiben. */
:root[data-ailh-a11y-contrast="on"] body.ailh-panel .prose {
    --tw-prose-lead: hsl(var(--foreground));
    --tw-prose-counters: hsl(var(--foreground));
    --tw-prose-bullets: hsl(var(--foreground) / 0.8);
    --tw-prose-captions: hsl(var(--foreground));
    --tw-prose-hr: hsl(var(--foreground) / 0.5);
    --tw-prose-quote-borders: hsl(var(--foreground) / 0.6);
    --tw-prose-th-borders: hsl(var(--foreground) / 0.6);
    --tw-prose-td-borders: hsl(var(--foreground) / 0.4);
}

/* --- 10.8 Fokus bleibt erkennbar -----------------------------------------
   Muss NACH 10.2 stehen: dort bekommen Karten und Flaechen eine outline, und ein
   anklickbarer Kartenkopf haette sonst beim Tabben keine sichtbare Aenderung.
   Farbig statt weiss/schwarz, weil ein weisser Ring auf weissen Raendern nicht
   mehr auffaellt. Der Ring liegt AUSSERHALB (offset 2px) und ueberdeckt daher
   keinen Inhalt. */
:root[data-ailh-a11y-contrast="on"] body.ailh-panel
    :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid hsl(var(--ailh-hc-focus));
    outline-offset: 2px;
}