/* ============================================================================
   1ki-a11y — drei Darstellungsstufen
   ----------------------------------------------------------------------------
   Single Source of Truth. Quelle: Staging/_ui/a11y/a11y.css
   Lädt NACH 1ki-theme.css und allen Modulen.
   Governance: 08 Bereiche/Website & Webspace/UI-Module_Standard.md

   Der Standardauftritt bleibt unangetastet. Die beiden Zusatzstufen setzen
   ausschließlich Design-Tokens neu, weil im Theme keine rohen Farbwerte in
   den Komponenten stehen. Deshalb greifen sie auf allen Seiten und in allen
   Modulen gleichzeitig, ohne dass eine Komponente angefasst werden muss.
   Genau dafür wurde das Token-System gebaut.

     html[data-a11y="standard"]   Markenauftritt, unverändert
     html[data-a11y="komfort"]    dunkel wie gewohnt, größer und ruhiger
     html[data-a11y="strikt"]     heller Grund, umgekehrte Kontraste, maximal

   Version: 1.0 (2026-08-04)
   ========================================================================= */

/* ---------------------------------------------------------------------------
   Stufe 2: Komfort
   Markenlook bleibt. Größere Schrift, mehr Luft, größere Klickflächen,
   kein Verlauf hinter Text, keine Bewegung, kräftigere Trennlinien.
   ------------------------------------------------------------------------ */
html[data-a11y="komfort"] {
  --fs-xs: 14px;
  --fs-sm: 16px;
  --fs-base: 19px;
  --fs-lg: 22px;
  --lh-base: 1.75;
  --measure: 720px;
  --line: rgba(255, 255, 255, 0.24);
  --line-strong: #2c4a6b;
  --text: #E8F1F8;
  --text-muted: #AFC3D4;
  --gradient-cta: linear-gradient(90deg, #12506F 0%, #2E09EE 50%, #8C0073 100%);
}
html[data-a11y="komfort"] body {
  background-image: none;
  background-color: var(--midnight);
}
html[data-a11y="komfort"] .btn { padding: 0.95em 1.9em; letter-spacing: 0.04em; }
html[data-a11y="komfort"] .nav-link,
html[data-a11y="komfort"] .nav-branch { padding: 14px 14px; }
html[data-a11y="komfort"] .dt-btn { padding: 11px 14px; }
html[data-a11y="komfort"] .dt tbody td { padding: 14px 14px; }
html[data-a11y="komfort"] .panel { background: rgba(0, 12, 26, 0.92); backdrop-filter: none; }
html[data-a11y="komfort"] .card { background: rgba(0, 12, 26, 0.86); }
html[data-a11y="komfort"] *,
html[data-a11y="komfort"] *::before,
html[data-a11y="komfort"] *::after {
  animation-duration: 0.01ms !important;
  transition-duration: 0.01ms !important;
}

/* ---------------------------------------------------------------------------
   Stufe 3: Strikt
   Heller Grund, umgekehrte Kontraste, kein Hintergrundbild, keine Verläufe,
   keine Transparenz. Alle Textfarben liegen bei mindestens 7:1 und damit auf
   WCAG-Stufe AAA, Bedienelemente bei mindestens 4,5:1.
   ------------------------------------------------------------------------ */
html[data-a11y="strikt"] {
  color-scheme: light;

  --fs-xs: 15px;
  --fs-sm: 17px;
  --fs-base: 20px;
  --fs-lg: 23px;
  --lh-base: 1.8;
  --measure: 700px;

  --surface-0: #FFFFFF;
  --surface-1: #FFFFFF;
  --surface-2: #FFFFFF;
  --glass: #FFFFFF;
  --glass-strong: #FFFFFF;

  --text: #10161D;          /* 18,2:1 auf Weiß */
  --text-strong: #000000;   /* 21,0:1 */
  --text-muted: #3A4652;    /*  9,6:1 */
  --line: #6B7885;
  --line-strong: #10161D;

  /* Markenfarben in abgedunkelten Fassungen, damit sie auf Weiß tragen */
  --sky: #12506F;           /*  8,7:1 */
  --pulse: #6E005C;         /* 11,6:1 */
  --voltage: #2E09EE;       /*  8,8:1 */
  --wave: #14595C;
  --danger: #9B0018;
  --warning: #6B4A00;
  --success: #0F5A2E;
  --flash: #6B5F00;

  --gradient-cta: none;
  --gradient-accent: none;

  --shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
}

html[data-a11y="strikt"] body {
  background-image: none;
  background-color: #FFFFFF;
  color: var(--text);
}

html[data-a11y="strikt"] h1,
html[data-a11y="strikt"] h2,
html[data-a11y="strikt"] h3,
html[data-a11y="strikt"] h4 { color: var(--text-strong); }

html[data-a11y="strikt"] a { color: var(--sky); text-decoration: underline; }
html[data-a11y="strikt"] a:hover { color: var(--pulse); }

/* Flächen: weiß mit sichtbarer Kante statt Transparenz */
html[data-a11y="strikt"] .panel,
html[data-a11y="strikt"] .card,
html[data-a11y="strikt"] .card-offset,
html[data-a11y="strikt"] .toc,
html[data-a11y="strikt"] .datablock,
html[data-a11y="strikt"] .site-nav,
html[data-a11y="strikt"] .dt-menu,
html[data-a11y="strikt"] .dt-scroll {
  background: #FFFFFF;
  border: 2px solid var(--line-strong);
  box-shadow: none;
  backdrop-filter: none;
}
html[data-a11y="strikt"] .card-offset::before,
html[data-a11y="strikt"] .card-offset::after { display: none; }

/* Kopfleiste im hellen Modus. Das weiße Logo verschwand auf weißem Grund
   (Christian-Befund 2026-08-04), deshalb trägt die Marke zwei Fassungen und
   die passende wird eingeblendet. Beide <img> haben leeres alt, den Namen
   liefert das aria-label des Links. */
html[data-a11y="strikt"] .topbar {
  background: #FFFFFF;
  border-bottom: 2px solid var(--line-strong);
  backdrop-filter: none;
}
html[data-a11y="strikt"] .topbar .brand img { filter: none; }
html[data-a11y="strikt"] .topbar .brand .brand-hell { display: none; }
html[data-a11y="strikt"] .topbar .brand .brand-dunkel { display: block; }

html[data-a11y="strikt"] .lang-toggle,
html[data-a11y="strikt"] .nav-toggle,
html[data-a11y="strikt"] .icon-btn {
  border-color: var(--line-strong);
  color: var(--text);
  background: #FFFFFF;
}
html[data-a11y="strikt"] .nav-toggle span { background: var(--text-strong); }
html[data-a11y="strikt"] .lang-flag { box-shadow: 0 0 0 1px var(--line); }
html[data-a11y="strikt"] .lang-menu,
html[data-a11y="strikt"] .site-nav { background: #FFFFFF; }
html[data-a11y="strikt"] .topbar .app-name { color: var(--text-muted); border-left-color: var(--line); }
html[data-a11y="strikt"] .foot { color: var(--text); border-top: 2px solid var(--line-strong); padding-top: var(--space-4); }

/* Schaltflächen: Vollton statt Verlauf */
html[data-a11y="strikt"] .btn {
  background: var(--text-strong);
  border-color: var(--text-strong);
  color: #FFFFFF;
  text-transform: none;
  letter-spacing: 0.02em;
  padding: 0.95em 1.9em;
}
html[data-a11y="strikt"] .btn:hover { background: var(--sky); border-color: var(--sky); color: #FFFFFF; }
html[data-a11y="strikt"] .btn-secondary { background: #FFFFFF; border-color: var(--text-strong); color: var(--text-strong); }
html[data-a11y="strikt"] .btn-secondary:hover { background: #EDF3F7; color: var(--sky); border-color: var(--sky); }
html[data-a11y="strikt"] .link-cta { color: var(--sky); text-decoration-color: var(--sky); }

/* Formulare */
html[data-a11y="strikt"] input,
html[data-a11y="strikt"] select,
html[data-a11y="strikt"] textarea {
  background: #FFFFFF;
  border: 2px solid var(--line-strong);
  color: var(--text);
}
html[data-a11y="strikt"] input::placeholder { color: #4A5763; }

/* Hinweisboxen: klare Fläche, kein Lichtschein */
html[data-a11y="strikt"] .note {
  background: #F4F7FA;
  border: 2px solid var(--line-strong);
  border-left: 6px solid var(--note-color);
  box-shadow: none;
  color: var(--text);
}
html[data-a11y="strikt"] .note::before { box-shadow: none; }

/* Tabelle */
html[data-a11y="strikt"] .dt {
  --dt-head: #E7EEF4;
  --dt-freeze: #FFFFFF;
  --dt-row-alt: #F2F6F9;
  --dt-hover: #D6E7F2;
}
html[data-a11y="strikt"] .dt thead th { color: var(--text-strong); border-bottom: 3px solid var(--text-strong); }
html[data-a11y="strikt"] .dt tbody td { border-bottom: 1px solid var(--line); }
html[data-a11y="strikt"] .dt tbody tr:hover td { color: var(--text-strong); }
html[data-a11y="strikt"] .dt-btn { background: #FFFFFF; border: 2px solid var(--line-strong); color: var(--text); }

/* Aufzählungszeichen und Haken in dunklen Fassungen */
html[data-a11y="strikt"] ul > li::before { background: var(--sky); }
html[data-a11y="strikt"] .list-check li::before { background: var(--pulse); }
html[data-a11y="strikt"] .quote::before { color: var(--flash); }

html[data-a11y="strikt"] .todo { background: #FFF3A8; border-color: #6B5F00; color: #000000; }
html[data-a11y="strikt"] ::selection { background: var(--sky); color: #FFFFFF; }

html[data-a11y="strikt"] *,
html[data-a11y="strikt"] *::before,
html[data-a11y="strikt"] *::after {
  animation-duration: 0.01ms !important;
  transition-duration: 0.01ms !important;
}

/* ---------------------------------------------------------------------------
   Fokus: in allen Stufen deutlich, in den Zusatzstufen noch deutlicher
   ------------------------------------------------------------------------ */
html[data-a11y="komfort"] :focus-visible,
html[data-a11y="strikt"] :focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}
html[data-a11y="strikt"] :focus-visible { outline-color: var(--voltage); }

/* ---------------------------------------------------------------------------
   Umschalter, kompaktes Klappmenü
   ----------------------------------------------------------------------------
   Fassung 2026-08-06. Vorgeschichte in zwei Schritten: erst zog der
   Umschalter aus der (jetzt sehr schmalen) Fußleiste in die Kopfleiste um,
   dann kam Christians Nachfassung "die Ansichteinstellung, die sollten wir
   auch Ähnlich den Flaggen sehr kompakt halten". Drei ausgeschriebene
   Pillen nebeneinander waren in der Fußzeile vertretbar, in der Kopfleiste
   neben Sprache, Teilen, Kontakt und Menü nicht.

   Optik und Bedienung sind bewusst deckungsgleich mit der Sprachauswahl
   (lang.css) und dem Teilen-Menü (frame.css) -- drei Regler in derselben
   Leiste sollen sich nicht unterschiedlich anfühlen.
   ------------------------------------------------------------------------ */
.a11y-switch { position: relative; display: inline-flex; }

.a11y-toggle {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-sm);
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.a11y-toggle:hover, .a11y-toggle:focus-visible {
  color: var(--paper);
  border-color: rgba(255, 255, 255, 0.5);
}

.a11y-menu {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  z-index: 65;
  min-width: 250px;
  padding: 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}
.a11y-menu[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); }

.a11y-opt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 8px 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.a11y-opt:hover, .a11y-opt:focus-visible { background: rgba(68, 168, 222, 0.14); color: var(--paper); }
.a11y-opt-label { font-size: var(--fs-sm); }
.a11y-opt-hint { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.3; }
.a11y-opt[aria-checked="true"] { background: rgba(68, 168, 222, 0.1); }
.a11y-opt[aria-checked="true"] .a11y-opt-label { color: var(--sky); font-weight: var(--fw-semibold); }

html[data-a11y="strikt"] .a11y-opt[aria-checked="true"] {
  background: var(--text-strong);
}
html[data-a11y="strikt"] .a11y-opt[aria-checked="true"] .a11y-opt-label,
html[data-a11y="strikt"] .a11y-opt[aria-checked="true"] .a11y-opt-hint { color: #FFFFFF; }

@media (max-width: 480px) {
  .a11y-toggle { width: 34px; height: 34px; }
  .a11y-menu { min-width: 210px; }
}

@media print { .a11y-switch { display: none; } }