/* AssistUK – Design System (assistuk.net-nah) */
/* Fonts self-hosted — DSGVO-konform, kein Google Fonts CDN */

/* DM Sans variable */
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/dmsans-var-normal-latin-ext.woff2') format('woff2');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/dmsans-var-normal-latin.woff2') format('woff2');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/dmsans-var-italic-latin-ext.woff2') format('woff2');
  font-weight: 100 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/dmsans-var-italic-latin.woff2') format('woff2');
  font-weight: 100 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Merriweather variable */
@font-face {
  font-family: 'Merriweather';
  src: url('fonts/merriweather-var-latin-ext.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Merriweather';
  src: url('fonts/merriweather-var-latin.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --c-bg:#f5f5f7;--c-bg-primary:#ffffff;--c-bg-secondary:#f0f1f4;--c-bg-tertiary:#e0e2e8;
  --c-bg-glass:rgba(255,255,255,0.72);--c-bg-glass-heavy:rgba(255,255,255,0.88);
  --c-text:#1d1d1f;--c-text-secondary:#555e6e;--c-text-tertiary:#595959;
  --c-link:#4b698c;--c-link-hover:#3a5a7c;--c-accent:#4b698c;--c-accent-2:#3a5a7c;
  --c-green:#34c759;--c-orange:#ff9500;--c-teal:#5ac8fa;--c-warm:#825d65;
  --c-border:rgba(0,0,0,0.06);--c-border-strong:rgba(0,0,0,0.12);
  --c-shadow:rgba(0,0,0,0.04);--c-shadow-md:rgba(0,0,0,0.08);--c-shadow-lg:rgba(0,0,0,0.12);
  --c-focus:#4b698c;--c-tts-word:#ffd60a;--c-tts-word-text:#1d1d1f;
  --gradient-hero:linear-gradient(135deg,#32373c 0%,#45454d 40%,#555e6e 100%);
  --gradient-accent:linear-gradient(135deg,#4b698c,#5ac8fa);
  --f-body:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,sans-serif;
  --f-display:'Merriweather',Georgia,serif;
  --f-heading:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,sans-serif;
  --f-size-base:17px;--f-scale:1;--line-height:1.65;
  --letter-tight:-0.022em;--letter-body:-0.01em;
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-8:32px;
  --s-10:40px;--s-12:48px;--s-16:64px;--s-20:80px;--s-24:96px;
  --max-w:1120px;--radius-sm:10px;--radius-md:16px;--radius-lg:22px;--radius-xl:28px;
  --blur:20px;--blur-heavy:40px;
  --ease-out:cubic-bezier(0.25,1,0.5,1);--ease-spring:cubic-bezier(0.34,1.56,0.64,1);
  --duration:0.35s;--duration-slow:0.6s;
}
[data-fontsize="large"]{--f-scale:1.2}[data-fontsize="xlarge"]{--f-scale:1.4}
[data-contrast="high"]{--c-bg:#fff;--c-bg-primary:#fff;--c-bg-secondary:#f0f0f0;--c-bg-tertiary:#e0e0e0;--c-bg-glass:rgba(255,255,255,0.95);--c-bg-glass-heavy:rgba(255,255,255,0.98);--c-text:#000;--c-text-secondary:#1a1a1a;--c-text-tertiary:#333;--c-border:rgba(0,0,0,0.3);--c-border-strong:rgba(0,0,0,0.6);--c-link:#00338a;--c-link-hover:#001f5c;--c-accent:#00338a;--c-accent-2:#001f5c;--c-focus:#cc6600;--c-tts-word:#ff8c00;--c-tts-word-text:#000;--gradient-hero:linear-gradient(135deg,#000 0%,#1a1a1a 50%,#333 100%);--gradient-accent:linear-gradient(135deg,#00338a,#0055cc);line-height:1.8;letter-spacing:0.02em}
[data-contrast="high"] html,[data-contrast="high"]{font-size:calc(var(--f-size-base)*var(--f-scale)*1.1)}
[data-contrast="dark"]{--c-bg:#000;--c-bg-primary:#1c1c1e;--c-bg-secondary:#2c2c2e;--c-bg-tertiary:#3a3a3c;--c-bg-glass:rgba(28,28,30,0.78);--c-bg-glass-heavy:rgba(28,28,30,0.92);--c-text:#f5f5f7;--c-text-secondary:#a1a1a6;--c-text-tertiary:#8e8e93;--c-link:#6ba4dc;--c-link-hover:#8fbde8;--c-accent:#6ba4dc;--c-accent-2:#8fbde8;--c-border:rgba(255,255,255,0.08);--c-border-strong:rgba(255,255,255,0.18);--c-shadow:rgba(0,0,0,0.3);--c-shadow-lg:rgba(0,0,0,0.5);--c-focus:#ffb340;--c-tts-word:#ff9f0a;--c-tts-word-text:#000;--gradient-hero:linear-gradient(135deg,#000 0%,#1c1c1e 50%,#2c2c2e 100%);--gradient-accent:linear-gradient(135deg,#6ba4dc,#5ac8fa)}
[data-contrast="sepia"]{--c-bg:#f4ecd8;--c-bg-primary:#faf5e6;--c-bg-secondary:#ede5d0;--c-bg-tertiary:#e0d5be;--c-bg-glass:rgba(244,236,216,0.85);--c-bg-glass-heavy:rgba(244,236,216,0.92);--c-text:#3e2f1c;--c-text-secondary:#5a4a36;--c-text-tertiary:#5a4a36;--c-link:#6b4226;--c-link-hover:#8b5e3c;--c-accent:#6b4226;--c-accent-2:#8b5e3c;--c-border:rgba(62,47,28,0.1);--c-border-strong:rgba(62,47,28,0.2);--c-shadow:rgba(62,47,28,0.06);--c-shadow-md:rgba(62,47,28,0.1);--c-shadow-lg:rgba(62,47,28,0.15);--c-focus:#8b5e3c;--c-tts-word:#e8c97a;--c-tts-word-text:#3e2f1c;--gradient-hero:linear-gradient(135deg,#3e2f1c 0%,#5a4a36 40%,#7a6a56 100%);--gradient-accent:linear-gradient(135deg,#6b4226,#c49a6c)}
[data-contrast="bluefilter"]{--c-bg:#1a1410;--c-bg-primary:#241e18;--c-bg-secondary:#2e2620;--c-bg-tertiary:#3a3028;--c-bg-glass:rgba(36,30,24,0.85);--c-bg-glass-heavy:rgba(36,30,24,0.92);--c-text:#e8d5b8;--c-text-secondary:#c4a882;--c-text-tertiary:#b8a080;--c-link:#d4a060;--c-link-hover:#e8b878;--c-accent:#d4a060;--c-accent-2:#e8b878;--c-border:rgba(232,213,184,0.08);--c-border-strong:rgba(232,213,184,0.18);--c-shadow:rgba(0,0,0,0.4);--c-shadow-md:rgba(0,0,0,0.5);--c-shadow-lg:rgba(0,0,0,0.6);--c-focus:#e8b878;--c-tts-word:#d4a060;--c-tts-word-text:#1a1410;--gradient-hero:linear-gradient(135deg,#1a1410 0%,#2e2620 50%,#3a3028 100%);--gradient-accent:linear-gradient(135deg,#d4a060,#e8b878)}
.easy-language-content{display:none}[data-language="easy"] .easy-language-content{display:block}[data-language="easy"] .standard-content{display:none}
/* Einfache Sprache: flaches Menue. Die Untermenues (bis zu 18 Eintraege bei
   „Produkte") sind genau die Huerde, die Einfache Sprache abbauen soll -
   ein Klick fuehrt darum direkt auf die Hub-Seite des Bereichs. Das !important
   ueberstimmt die Hover-/Fokus-Regeln, die das Dropdown sonst einblenden.
   Den Klick-Teil erledigt js/main.js. Vorbild: vorlesen-einmal-anders.de */
[data-language="easy"] .nav-dropdown{display:none !important}
[data-language="easy"] .dropdown-arrow{display:none !important}
/* Zweite Menue-Beschriftung: „Produkte" heisst in Einfacher Sprache
   „Programme zum Sprechen". Beide Varianten stehen im HTML (site-loader.js),
   hier wird nur umgeschaltet - der Wechsel braucht so keinen Neuaufbau der
   Navigation. Menuepunkte ohne easyLabel bleiben unveraendert. */
.nav-label-easy{display:none}
[data-language="easy"] .nav-link__text .nav-label-easy{display:inline}
[data-language="easy"] .nav-link__text .nav-label-std{display:none}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:calc(var(--f-size-base)*var(--f-scale));scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--f-body);color:var(--c-text);background:var(--c-bg);line-height:var(--line-height);letter-spacing:var(--letter-body);overflow-x:hidden}
:focus-visible{outline:3px solid var(--c-focus);outline-offset:3px;border-radius:4px}
.skip-link{position:absolute;top:-200%;left:var(--s-4);background:var(--c-accent);color:#fff;padding:var(--s-3) var(--s-5);border-radius:var(--radius-sm);z-index:10000;font-weight:600;text-decoration:none;font-size:0.9rem;transition:top var(--duration) var(--ease-out)}.skip-link:focus{top:var(--s-4)}
h1,h2,h3,h4{letter-spacing:var(--letter-tight);color:var(--c-text);line-height:1.15;font-weight:700}
h1{font-family:var(--f-display);font-size:clamp(2.2rem,5vw,3.8rem);font-weight:700;margin-bottom:var(--s-6)}
h2{font-family:var(--f-heading);font-size:clamp(1.5rem,3vw,2.2rem);margin-bottom:var(--s-5);font-weight:700;letter-spacing:-0.01em}
h3{font-family:var(--f-heading);font-size:clamp(1.1rem,2vw,1.35rem);margin-bottom:var(--s-3);font-weight:700}
/* Lesebreite: 55ch, nicht 68ch. Gemessen am 03.08.2026 an einem echten Absatz
   (/fuer-familien/, 17px): 68ch ergab 101 Zeichen je Zeile, 60ch -> 88, 56ch -> 82,
   55ch -> ~80, 54ch -> 77. Die ch-Einheit taeuscht hier, weil die Null dieser Schrift
   mit 11,5px deutlich breiter ist als das mittlere Zeichen (~8px) - 68ch sahen nach
   68 Zeichen aus, waren aber 101. WCAG 1.4.8 (AAA) nennt hoechstens 80 Zeichen; lange
   Zeilen kosten beim Ruecksprung den Anschluss, was Menschen mit Leseschwierigkeiten,
   eingeschraenktem Gesichtsfeld und Augensteuerung zuerst trifft.
   In ch statt px, damit die Lesebreite bei A/A+/A++ mitwaechst. */
p{margin-bottom:var(--s-4);max-width:55ch;color:var(--c-text-secondary)}
a{color:var(--c-link);text-decoration:none;transition:color var(--duration) var(--ease-out)}a:hover{color:var(--c-link-hover)}
strong{font-weight:600;color:var(--c-text)}ul,ol{padding-left:var(--s-6);margin-bottom:var(--s-4)}li{margin-bottom:var(--s-2);color:var(--c-text-secondary)}img{max-width:100%;height:auto;display:block}

.a11y-toolbar{background:var(--c-bg-glass-heavy);backdrop-filter:blur(var(--blur-heavy));-webkit-backdrop-filter:blur(var(--blur-heavy));border-bottom:0.5px solid var(--c-border);padding:var(--s-2) 0;position:sticky;top:0;z-index:1001}
.a11y-toolbar__inner{max-width:var(--max-w);margin:0 auto;padding:0 var(--s-6);display:flex;align-items:center;justify-content:center;gap:var(--s-2);row-gap:var(--s-2);flex-wrap:wrap}
.a11y-toolbar__group{display:flex;align-items:center;gap:var(--s-2);flex-shrink:0}
.a11y-toolbar__label{display:none}
.a11y-toolbar__separator{width:1px;height:18px;background:var(--c-border-strong);margin:0 var(--s-1)}
.a11y-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-1);padding:var(--s-1) var(--s-3);border:1.5px solid var(--c-border-strong);background:var(--c-bg-primary);color:var(--c-text);border-radius:var(--radius-sm);cursor:pointer;font-size:0.8rem;font-family:var(--f-body);font-weight:600;transition:all var(--duration) var(--ease-out);min-height:44px;min-width:44px;line-height:1;white-space:nowrap;flex-shrink:0}
.a11y-btn:hover{background:var(--c-accent);color:#fff;border-color:var(--c-accent);transform:scale(1.04)}
.a11y-btn[aria-pressed="true"],.a11y-btn.active{background:var(--c-accent);color:#fff;border-color:var(--c-accent)}
.a11y-btn svg{width:16px;height:16px;flex-shrink:0}
.tts-voice-select{min-height:44px;max-width:145px;padding:var(--s-1) var(--s-2);border:1.5px solid var(--c-border-strong);background:var(--c-bg-primary);color:var(--c-text);border-radius:var(--radius-sm);font-family:var(--f-body);font-weight:600;font-size:0.78rem;cursor:pointer;text-overflow:ellipsis}
/* Flaggen-Sprachpicker in der Barriere-Leiste (Design wie vorlesen-einmal-anders.de) */
.lang-picker{position:relative;flex-shrink:0}
.lang-toggle{gap:var(--s-2);max-width:175px}
.lang-toggle__flag{width:22px;height:15px;border-radius:2px;object-fit:cover;flex:0 0 auto;box-shadow:0 0 0 1px var(--c-border-strong)}
.lang-toggle__name{font-size:0.8rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:96px}
.lang-toggle:hover .lang-toggle__flag{box-shadow:0 0 0 1px #fff}
.lang-panel{position:absolute;top:calc(100% + 6px);right:0;z-index:1100;width:240px;max-width:92vw;max-height:64vh;overflow-y:auto;background:var(--c-bg-glass-heavy);backdrop-filter:blur(var(--blur-heavy));-webkit-backdrop-filter:blur(var(--blur-heavy));border:0.5px solid var(--c-border-strong);border-radius:var(--radius-md);box-shadow:0 8px 40px var(--c-shadow-lg),0 0 0 0.5px var(--c-border);padding:var(--s-3)}
.lang-panel[hidden]{display:none}
.lang-grid{display:grid;grid-template-columns:1fr;gap:var(--s-1)}
.lang-opt{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2);border:1.5px solid transparent;border-radius:var(--radius-sm);background:none;color:var(--c-text);cursor:pointer;text-align:left;min-height:44px;font-family:var(--f-body);font-size:0.82rem;font-weight:600;line-height:1.12}
.lang-opt:hover{background:var(--c-bg-secondary)}
.lang-opt.active{border-color:var(--c-accent);color:var(--c-accent)}
.lang-opt__flag{width:24px;height:16px;border-radius:2px;object-fit:cover;flex:0 0 auto;box-shadow:0 0 0 1px var(--c-border-strong)}
.lang-opt__name{overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){.lang-toggle__name{display:none}.lang-panel{width:200px}}
/* Aktivit\00E4ts-Galerie auf den App-Detailseiten */
.activity-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--s-4);margin-top:var(--s-4)}
.activity-gallery img{width:100%;height:auto;display:block;border-radius:var(--radius-lg,16px);box-shadow:0 6px 20px rgba(0,0,0,0.12);background:var(--c-bg-secondary);transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.activity-gallery img:hover{transform:translateY(-4px) scale(1.015);box-shadow:0 14px 30px rgba(0,0,0,0.18)}
.tts-active-indicator{display:none;width:8px;height:8px;border-radius:50%;background:var(--c-green);animation:pulse-dot 1.2s infinite}.tts-active-indicator.visible{display:inline-block}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.4;transform:scale(0.7)}}
.tts-word{border-radius:3px;padding:0;margin:0;display:inline;line-height:inherit;font-size:inherit;vertical-align:baseline}
.tts-word-active{background:var(--c-tts-word)!important;color:var(--c-tts-word-text)!important;border-radius:3px;padding:0;margin:0}

.site-header{background:var(--c-bg-glass);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border-bottom:0.5px solid var(--c-border);position:sticky;top:0;z-index:1000}
.a11y-toolbar+.site-header{position:relative}
/* Barriere-Toolbar standardmaessig eingeklappt (auch auf Desktop, wie vorlesen-einmal-anders.de):
   nur Vorlesen, Stopp, Einfache Sprache + Sprachwahl sichtbar;
   Schrift/Kontrast/Stimme/Tempo erst nach Klick auf "Mehr". */
.a11y-toolbar__toggle{display:inline-flex;align-items:center;gap:var(--s-1);min-height:44px;padding:var(--s-1) var(--s-3);border:1.5px solid var(--c-border-strong);background:var(--c-bg-primary);color:var(--c-text);border-radius:var(--radius-sm);font-family:var(--f-body);font-weight:600;font-size:0.85rem;cursor:pointer;transition:background var(--duration),border-color var(--duration)}
.a11y-toolbar__toggle:hover{background:var(--c-bg-secondary);border-color:var(--c-accent)}
.a11y-toolbar__chev{transition:transform var(--duration) var(--ease-out)}
.a11y-toolbar.is-open .a11y-toolbar__chev{transform:rotate(180deg)}
.a11y-toolbar:not(.is-open) .a11y-toolbar__inner>*:not(.tts-controls):not(.easy-controls):not(.lang-picker):not(.a11y-toolbar__toggle){display:none}
.a11y-toolbar:not(.is-open) .tts-controls>*:not(#btn-read-page):not(#btn-tts-stop){display:none}
@media(max-width:768px){
  .a11y-toolbar__inner{flex-wrap:wrap}
  /* Auf dem Handy wandert auch die Sprachwahl hinter "Mehr" (Platz) */
  .a11y-toolbar:not(.is-open) .a11y-toolbar__inner>.lang-picker{display:none}
  /* Eingeklappt kompakt: kleinere Knoepfe, alles in EINE Zeile (kein Umbruch) */
  .a11y-btn{min-height:40px;min-width:0;padding:var(--s-1) var(--s-2);font-size:0.76rem}
  .a11y-btn svg{width:15px;height:15px}
  .a11y-toolbar__toggle{min-height:40px;padding:var(--s-1) var(--s-2);font-size:0.76rem}
  .a11y-toolbar__toggle-label{display:none}
  /* Bei grosser Schrift umbrechen statt abschneiden -> "Mehr" bleibt immer erreichbar */
  .a11y-toolbar:not(.is-open) .a11y-toolbar__inner{flex-wrap:wrap;gap:var(--s-1);justify-content:flex-start;padding-left:var(--s-3);padding-right:var(--s-3)}
  .a11y-toolbar:not(.is-open) #btn-easy-language .btn-label{white-space:nowrap}
  /* Ausgeklappt: Gruppen umbrechen lassen, damit nichts (v. a. die Stimmen-Auswahl) über den Rand ragt */
  .a11y-toolbar__inner{max-width:100%}
  .a11y-toolbar__group,.tts-speed-group{flex-wrap:wrap;max-width:100%}
  .tts-voice-select{flex:1 1 100%;max-width:100%;min-width:0}
}
.site-header__inner{max-width:var(--max-w);margin:0 auto;padding:0 var(--s-6);display:flex;align-items:center;justify-content:space-between;height:52px}
.site-logo{text-decoration:none;display:flex;align-items:center}.site-logo__text{font-family:var(--f-body);font-size:1.25rem;font-weight:700;color:var(--c-text);letter-spacing:-0.03em}.site-logo__text span{color:var(--c-accent)}
.nav-toggle{display:none;background:transparent;border:none;color:var(--c-text);font-size:1.5rem;cursor:pointer;padding:var(--s-2);min-height:44px;min-width:44px;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:background var(--duration)}.nav-toggle:hover{background:var(--c-bg-secondary)}
.nav-list{display:flex;list-style:none;gap:0;align-items:center}.nav-item{position:relative}
.nav-link{display:flex;align-items:center;padding:var(--s-2) var(--s-3);color:var(--c-text-secondary);text-decoration:none;font-size:0.85rem;font-weight:500;transition:all var(--duration) var(--ease-out);border-radius:var(--radius-sm);min-height:36px;white-space:nowrap}
.nav-link:hover{color:var(--c-text);background:var(--c-bg-secondary)}.nav-link[aria-current="page"]{color:var(--c-accent);font-weight:600}
.dropdown-arrow{font-size:0.55em;margin-left:var(--s-1);opacity:0.5;transition:transform var(--duration) var(--ease-out)}
.nav-dropdown{position:absolute;top:100%;left:50%;transform:translateX(-50%);background:var(--c-bg-glass-heavy);backdrop-filter:blur(var(--blur-heavy));-webkit-backdrop-filter:blur(var(--blur-heavy));border:0.5px solid var(--c-border-strong);border-radius:var(--radius-md);box-shadow:0 8px 40px var(--c-shadow-lg),0 0 0 0.5px var(--c-border);min-width:220px;display:none;z-index:200;padding:var(--s-2);padding-top:var(--s-3);opacity:0;transition:opacity 0.2s ease-out,transform 0.2s ease-out}
.nav-item::after{content:'';position:absolute;top:100%;left:0;right:0;height:12px}
.nav-item:hover .nav-dropdown,.nav-item:focus-within .nav-dropdown,.nav-item.open .nav-dropdown{display:block;opacity:1}
.nav-dropdown a{display:flex;align-items:center;padding:var(--s-2) var(--s-3);color:var(--c-text);text-decoration:none;font-size:0.85rem;border-radius:var(--radius-sm);transition:background var(--duration);min-height:36px}.nav-dropdown a:hover{background:var(--c-bg-secondary)}.nav-dropdown a.lang-current{font-weight:700;color:var(--c-accent)}
.nav-dropdown__header{display:block;padding:var(--s-2) var(--s-3) 2px;font-size:0.66rem;font-weight:800;letter-spacing:0.05em;text-transform:uppercase;color:var(--c-text-tertiary);cursor:default;-webkit-user-select:none;user-select:none}
.nav-dropdown__header:not(:first-child){margin-top:var(--s-1);border-top:1px solid var(--c-border);padding-top:var(--s-3)}
.nav-badge{margin-left:auto;font-size:0.6rem;font-weight:700;letter-spacing:0.02em;line-height:1.6;padding:1px 7px;border-radius:999px;background:var(--c-accent);color:var(--c-on-accent,#fff);white-space:nowrap}
.nav-dropdown--lang{right:0;left:auto;transform:none;max-height:380px;overflow-y:auto;min-width:200px}
.nav-item:hover .nav-dropdown--lang,.nav-item:focus-within .nav-dropdown--lang,.nav-item.open .nav-dropdown--lang{transform:none}

/* Eintr\00E4ge mit Erkl\00E4rzeile: Produktnamen wie „Clavis" oder „Agismus" sagen
   nur dem etwas, der sie kennt. Der Halbsatz darunter beantwortet „f\00FCr wen?",
   ohne dass man die Seite \00F6ffnen muss. */
/* WICHTIG: `.nav-dropdown a` (Zeile ~171) setzt display:flex und ist mit
   (0,1,1) spezifischer als eine Klasse allein. Ohne das `a` im Selektor
   verliert display:block - Label und Erklaerzeile landen dann NEBENeinander
   in einer viel zu schmalen Spalte, und die Produktnamen brechen mitten im
   Wort um ("Clavi/s", "Eas/y", "EyeKeyBo/ard"). */
a.nav-dropdown__item--rich{display:block;line-height:1.35;padding-top:var(--s-2);padding-bottom:var(--s-2)}
a.nav-dropdown__item--rich .nav-dropdown__label{display:block;font-weight:600;
  /* Produktnamen nie mitten im Wort trennen - lieber umbrechen lassen. */
  word-break:normal;overflow-wrap:normal;hyphens:none}
.nav-dropdown__desc{display:block;margin-top:2px;font-size:0.78rem;font-weight:400;color:var(--c-text-secondary);white-space:normal;word-break:normal;overflow-wrap:break-word}
.nav-dropdown__item--rich:hover .nav-dropdown__desc,
.nav-dropdown__item--rich:focus-visible .nav-dropdown__desc{color:inherit}

/* Mega-Men\00FC (mehrspaltig): Apps & Tools — Header-Gruppen als zusammenh\00E4ngende Spalten
   Breiter, seit die Eintr\00E4ge eine zweite Zeile tragen. */
/* WICHTIG: Spaltensatz und H\00F6henbegrenzung liegen auf ZWEI Elementen.
   Zusammen auf einem Element legt CSS bei zu wenig H\00F6he weitere Spalten NACH
   RECHTS an - das Men\00FC scrollt dann quer und die Beschriftungen sind
   angeschnitten (passiert bei "Produkte" und "Informationen").
   Aussen: feste Breite + max-height + vertikales Scrollen.
   Innen (.nav-dropdown__cols): genau 3 Spalten, H\00F6he w\00E4chst frei.
   3 statt 2 Spalten (2026-08-05): mit 2 Spalten bestimmte die groesste Gruppe
   allein die Menuehoehe (12 Zeilen) - auf Laptops scrollte das Dropdown und die
   letzten Eintraege waren hinter einem duennen Scrollbalken versteckt. */
.nav-dropdown--mega{width:960px;max-width:94vw;padding:var(--s-3);
  max-height:calc(100vh - 140px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.nav-dropdown--mega .nav-dropdown__cols{columns:3;column-gap:var(--s-6)}
/* 2px weniger Polster je Eintrag als im schmalen Dropdown: bei 9 Eintraegen in
   einer Spalte entscheiden diese Pixel, ob das Informationen-Menue auf einem
   768er-Laptop-Viewport ohne Scrollbalken passt (~36px Gewinn). */
.nav-dropdown--mega a.nav-dropdown__item--rich{padding-top:6px;padding-bottom:6px}
.nav-dropdown--mega .nav-dropdown__col{-webkit-column-break-inside:avoid;break-inside:avoid;page-break-inside:avoid;display:block;margin:0 0 var(--s-3)}
.nav-dropdown--mega .nav-dropdown__col:last-child{margin-bottom:0}
.nav-dropdown--mega .nav-dropdown__header{margin-top:0;border-top:none;padding-top:0}
/* Weit rechts sitzende Mega-Menues haengen an ihrer RECHTEN Kante statt mittig.
   960px mittig unter einem Punkt am rechten Ende der Leiste ragen ueber den
   Bildschirmrand hinaus: „Hilfe" stand bei 1440px Fensterbreite 197px drueber
   (bei 1301px, wo das Mega-Menue gerade noch gilt, sogar 267px) - die rechte
   Spalte war abgeschnitten, und zwar OHNE Scrollbalken, der darauf hinweist.
   Rechts angeschlagen bleibt das Menue immer innerhalb des 1120px-Kopfbereichs,
   und zwar in jeder der 42 Sprachen: die Kante folgt dem Menuepunkt, egal wie
   breit seine Beschriftung uebersetzt ausfaellt. Eine feste Verschiebung in
   Pixeln koennte das nicht.
   Die letzten drei Listenplaetze sind „Hilfe", „Ueber uns" und die Lupe - die
   Regel greift also genau dort, wo mittig nicht mehr passt, und waechst mit,
   falls spaeter ein anderer Punkt ans Ende rueckt. */
.nav-list>.nav-item:nth-last-child(-n+3) .nav-dropdown--mega{left:auto;right:0;transform:none}
/* Gleiche Grenze wie die Burger-Umschaltung unten (1300): das Mega-Dropdown
   gehoert zur schmalen Darstellung. */
@media(max-width:1300px){
  .nav-dropdown--mega{width:auto;max-width:none;padding-top:var(--s-2);padding-right:var(--s-2);padding-bottom:var(--s-2)}
  .nav-dropdown--mega .nav-dropdown__cols{columns:1}
  .nav-dropdown--mega .nav-dropdown__col{margin-bottom:var(--s-2)}
}

.hero{background:url('../img/hero/teilhabe.webp') center center/cover no-repeat,var(--gradient-hero);color:#f5f5f7;padding:var(--s-24) 0 var(--s-20);text-align:center;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(18,40,75,0.88) 0%,rgba(30,52,82,0.82) 50%,rgba(20,38,62,0.88) 100%);z-index:0}
.hero::after{content:'';position:absolute;bottom:-40%;left:-10%;width:600px;height:600px;background:radial-gradient(circle,rgba(90,200,250,0.1),transparent 70%);border-radius:50%;animation:hero-glow 10s ease-in-out infinite alternate-reverse}
@keyframes hero-glow{0%{transform:scale(1) translate(0,0)}100%{transform:scale(1.15) translate(30px,-20px)}}
.hero__inner{max-width:var(--max-w);margin:0 auto;padding:0 var(--s-6);position:relative;z-index:1}
.hero h1{color:#fff;font-size:clamp(2.8rem,6vw,5rem);margin-bottom:var(--s-6);text-shadow:0 2px 16px rgba(0,0,0,0.5);animation:fade-up 0.8s var(--ease-out) both}
.hero p{font-size:clamp(1.05rem,2vw,1.25rem);max-width:600px;margin:0 auto var(--s-8);color:rgba(255,255,255,0.95);line-height:1.55;text-shadow:0 1px 8px rgba(0,0,0,0.45);animation:fade-up 0.8s var(--ease-out) 0.15s both}
@keyframes fade-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

.page-hero{background:linear-gradient(135deg,#1a3a6a,#4b698c,#5ac8fa);color:#f5f5f7;padding:var(--s-20) 0 var(--s-16);text-align:center;position:relative;overflow:hidden}
.page-hero::before{content:'';position:absolute;inset:0;background:rgba(50,55,60,0.3);z-index:0}
.page-hero__inner{position:relative;z-index:1}
.page-hero--light{color:var(--c-text)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.page-hero--light::before{opacity:0}
.page-hero--light h1{color:var(--c-text)}
.page-hero__logo{max-width:320px;height:auto;margin:0 auto var(--s-4);display:block;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.3))}
@media(max-width:600px){.page-hero__logo{max-width:220px}}
.page-hero__inner{max-width:var(--max-w);margin:0 auto;padding:0 var(--s-6)}.page-hero h1{color:#f5f5f7;animation:fade-up 0.7s var(--ease-out) both}.page-hero p{color:rgba(245,245,247,0.8);max-width:550px;margin:0 auto}
/* Dekoratives Hero-Linien-Icon: weiss statt blassem Akzentblau (sonst auf dem Verlauf kaum sichtbar) */
.page-hero__inner > svg{stroke:#fff;stroke-width:2;opacity:0.9}
.page-hero__subtitle{font-family:var(--f-display);font-size:clamp(1.1rem,2.5vw,1.5rem);font-weight:700;color:#1a3a6a;letter-spacing:-0.01em;margin:0 auto;text-align:center;max-width:600px}
.page-hero--light .page-hero__subtitle{color:#1a3a6a}
[data-contrast="dark"] .page-hero__subtitle{color:var(--c-accent)}
[data-contrast="sepia"] .page-hero__subtitle{color:var(--c-accent)}
[data-contrast="bluefilter"] .page-hero__subtitle{color:var(--c-accent)}
.breadcrumb{max-width:var(--max-w);margin:0 auto;padding:var(--s-4) var(--s-6);font-size:0.8rem;color:var(--c-text-tertiary)}.breadcrumb a{color:var(--c-text-tertiary)}.breadcrumb a:hover{color:var(--c-accent)}.breadcrumb span[aria-hidden]{margin:0 var(--s-1);opacity:0.5}

.btn{display:inline-flex;align-items:center;gap:var(--s-2);padding:var(--s-3) var(--s-6);border:none;border-radius:980px;font-family:var(--f-body);font-weight:600;font-size:0.95rem;text-decoration:none;cursor:pointer;transition:all var(--duration) var(--ease-out);min-height:44px;letter-spacing:-0.01em}
.btn--primary{background:var(--c-accent);color:#fff}.btn--primary:hover{background:var(--c-accent-2);color:#fff;transform:scale(1.04);box-shadow:0 4px 20px rgba(0,102,204,0.35)}
.btn--outline{background:rgba(255,255,255,0.12);color:#f5f5f7;border:1.5px solid rgba(255,255,255,0.25)}.btn--outline:hover{background:rgba(255,255,255,0.2);color:#fff;transform:scale(1.04)}
.btn--secondary{background:var(--c-bg-secondary);color:var(--c-accent);border:1.5px solid var(--c-border-strong)}.btn--secondary:hover{background:var(--c-bg-tertiary);color:var(--c-accent);border-color:var(--c-accent);transform:scale(1.04)}.btn--secondary:hover *{color:var(--c-text)}

.section{padding:var(--s-20) 0}.section--alt{background:var(--c-bg-secondary)}
/* Helle Schrift auf dunklem/farbigem Hintergrund: auch fett (strong) + Listen weiss,
   da die globale Regel strong{color:var(--c-text)} sonst dunkel bleibt. */
.section--on-dark,.section--on-dark p,.section--on-dark li,.section--on-dark strong,.section--on-dark h2,.section--on-dark h3{color:#fff}
.section__inner{max-width:var(--max-w);margin:0 auto;padding:0 var(--s-6)}.section__header{text-align:center;margin-bottom:var(--s-12)}.section__header h2{color:var(--c-text)}.section__header p{max-width:560px;margin:0 auto;font-size:1.05rem}

.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s-5)}
.card{background:var(--c-bg-primary);border:0.5px solid var(--c-border);border-radius:var(--radius-lg);padding:var(--s-8);transition:all var(--duration) var(--ease-out);display:flex;flex-direction:column;position:relative;overflow:hidden}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient-accent);opacity:0;transition:opacity var(--duration) var(--ease-out)}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 40px var(--c-shadow-lg);border-color:var(--c-border-strong)}.card:hover::before{opacity:1}
.card__icon{width:48px;height:48px;background:var(--c-bg-secondary);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:var(--s-5);transition:all var(--duration) var(--ease-out)}
.card:hover .card__icon{background:var(--gradient-accent);transform:scale(1.08)}
.card h3{font-size:1.1rem;color:var(--c-text)}.card p{font-size:0.9rem;flex:1}
.card__link{display:inline-flex;align-items:center;gap:var(--s-1);margin-top:var(--s-4);font-weight:600;font-size:0.9rem;color:var(--c-accent)}
.card__link:first-of-type::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;z-index:1}
.card__link+.card__link{position:relative;z-index:2}
/* Ganze Kachel klickbar, ohne den Stil des Links anzutasten: card__stretch legt
   nur ein unsichtbares Feld ueber die Karte. Fuer Karten, deren Hauptlink ein
   Knopf ist (.btn) - dort waere card__link der falsche Stil.
   Kein verschachteltes <a>: der Link bleibt der einzige Tabstopp der Karte. */
.card__stretch::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;z-index:1}
.card:has(.card__link),.card:has(.card__stretch){cursor:pointer}
/* Alles andere Anklickbare muss ueber dem Klickfeld liegen, sonst schluckt die
   Kachel den Vorlesen-Knopf und Links, die im Flie\00DFtext stehen. */
/* .card__tts ist ausgenommen: Er ist bereits absolut oben rechts positioniert und
   bringt seinen eigenen z-index mit. Diese Regel ist spezifischer (0,2,1) als seine
   eigene (0,1,0) und hat ihm site-weit position:relative aufgezwungen - der Knopf
   rutschte dadurch auf JEDER Kachel-Seite aus der Ecke in den Textfluss
   (gemessen 31.07.2026 auf 21 Seiten). Er braucht den z-index, nicht die Position. */
.card:has(.card__link) a:not(.card__link),
.card:has(.card__stretch) a:not(.card__stretch),
.card:has(.card__link) button:not(.card__tts),
.card:has(.card__stretch) button:not(.card__tts){position:relative;z-index:2}
.card__tts{position:absolute;top:var(--s-3);right:var(--s-3);background:var(--c-accent);color:#fff;border:none;border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0.7;transition:all var(--duration) var(--ease-out);font-size:0.85rem;z-index:2}
/* Vorlese-Button mittig zum Karten-Icon ausrichten (nur auf Karten mit Icon) */
.card__icon ~ .card__tts{top:calc(var(--s-8) + 2px)}
.card__tts svg{width:20px;height:20px}
.card__tts:hover,.card__tts:focus{opacity:1;transform:scale(1.1);box-shadow:0 2px 8px var(--c-shadow-lg)}
.card__tts[aria-pressed="true"]{background:var(--c-orange);opacity:1}
.card__tts.reading{animation:tts-card-pulse 1.5s ease-in-out infinite}
@keyframes tts-card-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,149,0,0.5)}50%{box-shadow:0 0 0 8px rgba(255,149,0,0)}}
@media(prefers-reduced-motion:reduce){.card__tts.reading{animation:none}}
.card__link::after{content:'→';transition:transform var(--duration) var(--ease-out);font-size:1.1em}.card:hover .card__link::after{transform:translateX(5px)}

/* Ein Rahmen fuer ALLE Inhaltsseiten (05.08.2026). Vorher liefen 63 Seiten auf
   --max-w und 75 auf 780px - beim Navigieren sprang die Seitenbreite. Die
   Aufteilung folgte keiner Regel: 25 Seiten waren breit ohne ein einziges
   breites Element, 23 waren schmal OBWOHL sie Kachelraster oder zweispaltige
   Plattform-Anleitungen enthalten (u. a. beide gefuehrten Kurse).
   Die Lesbarkeit haengt NICHT an diesem Rahmen: p{max-width:55ch} (Zeile 117)
   gilt global, der Fliesstext war also ohnehin ueberall gleich breit.
   Zurueckdrehen = hier wieder 780px eintragen. */
.content-page{max-width:var(--max-w);margin:0 auto;padding:var(--s-12) var(--s-6)}
/* Die Trennlinie ueber einer Ueberschrift folgt der Lesespalte statt dem Rahmen -
   sonst steht eine 1072px lange Haarlinie ueber halb so breitem Text. Nur die
   Ueberschrift wird begrenzt, NICHT der Abschnitt: eine Breitenbegrenzung auf
   .readable-section wuerde alles darin mitquetschen, auch die Kachelraster. */
.content-page>.readable-section>h2{max-width:55ch}
.content-page h2{margin-top:var(--s-10);padding-top:var(--s-6);border-top:0.5px solid var(--c-border)}.content-page h2:first-child{margin-top:0;padding-top:0;border-top:none}
/* Abschnitts-Rhythmus: aufeinanderfolgende readable-sections deutlich trennen (h2:first-child hebt sonst den Abstand auf) */
.content-page>.readable-section+.readable-section{margin-top:var(--s-10);padding-top:var(--s-6);border-top:0.5px solid var(--c-border)}

/* Kachel-Seiten: weiter Rahmen, damit Raster drei- statt zweispaltig stehen.
   Unbedenklich, seit sich der Fliesstext ueber max-width:55ch selbst deckelt -
   die Kacheln nutzen die Breite, die Zeilen bleiben kurz. Aufzaehlungen bekommen
   dieselbe Deckelung wie Absaetze; ohne sie liefen sie ueber die volle Breite. */
/* --wide ist seit dem einheitlichen Rahmen wirkungslos (gleicher Wert); die Klasse
   darf im HTML stehenbleiben. Die Listen-Deckelung gilt jetzt fuer ALLE Seiten -
   vorher hing sie an --wide, und die 75 vormals schmalen Seiten haetten ihre
   Listen sonst ploetzlich ueber die volle Rahmenbreite laufen lassen. */
.content-page--wide{max-width:var(--max-w)}
.content-page>.readable-section>ul,
.content-page>.readable-section>ol,
.content-page>.readable-section>.standard-content>ul,
.content-page>.readable-section>.standard-content>ol{max-width:55ch}
.content-page>.readable-section>h2:first-child,.content-page>.readable-section>*:first-child>h2:first-child{margin-top:0}
/* Geltungshinweis: sagt an Rechts- und Finanzierungsaussagen, dass deutsches
   Sozialrecht gemeint ist. Bewusst ein <div> und OHNE inneres <p>/<li>: sonst
   zieht i18n_extract.py den Text in den Inhalts-Layer und uebersetzt ihn auf
   jeder Seite einzeln (gleicher Text, 9x bezahlt, 9 verschiedene Fassungen).
   So laeuft er ueber lang/<code>.json -> genau einmal, ueberall gleich.
   Kein display hier: die Variante fuer Einfache Sprache traegt zusaetzlich
   .easy-language-content und wird von deren Regel (Zeile 85) geschaltet.
   Alle Farben aus Tokens, die die 5 Kontrastmodi neu setzen. */
.geltungshinweis{border-left:3px solid var(--c-text-secondary);color:var(--c-text-secondary);padding:var(--s-1) var(--s-4);margin:0 0 var(--s-6);font-size:0.85rem;line-height:1.55;max-width:70ch}
.geltungshinweis a{color:var(--c-accent)}
.read-section-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:1.5px solid var(--c-accent);border-radius:980px;padding:8px 16px;min-height:44px;font-size:0.85rem;color:var(--c-accent);cursor:pointer;font-family:var(--f-body);font-weight:600;transition:all var(--duration) var(--ease-out);flex-shrink:0;white-space:nowrap;line-height:1.4}
.read-section-btn svg{flex-shrink:0;width:16px;height:16px}
.read-section-btn:hover,.read-section-btn:focus-visible,.read-section-btn.reading{background:var(--c-accent);color:#fff;border-color:var(--c-accent)}
.read-section-btn.reading{animation:tts-btn-pulse 1.5s ease-in-out infinite}
@keyframes tts-btn-pulse{0%,100%{box-shadow:0 0 0 0 rgba(75,105,140,0.45)}50%{box-shadow:0 0 0 7px rgba(75,105,140,0)}}
@media(prefers-reduced-motion:reduce){.read-section-btn.reading{animation:none}}
[data-contrast="dark"] .read-section-btn,[data-contrast="bluefilter"] .read-section-btn{color:#8fb3d9;border-color:#8fb3d9}
[data-contrast="dark"] .read-section-btn:hover,[data-contrast="dark"] .read-section-btn:focus-visible,[data-contrast="dark"] .read-section-btn.reading,[data-contrast="bluefilter"] .read-section-btn:hover,[data-contrast="bluefilter"] .read-section-btn:focus-visible,[data-contrast="bluefilter"] .read-section-btn.reading{background:#8fb3d9;color:#10161d;border-color:#8fb3d9}
h2:has(.read-section-btn),h3:has(.read-section-btn){display:flex;justify-content:space-between;align-items:center;gap:var(--s-4)}
h2 .read-section-btn,h3 .read-section-btn{margin-left:auto}
.about-content{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-10);align-items:start}.about-text h2{border:none;padding-top:0;margin-top:0}

.stats-bar{background:var(--c-bg-secondary);border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border);padding:var(--s-5) 0}
.stats-bar__inner{max-width:var(--max-w);margin:0 auto;padding:0 var(--s-6);display:flex;flex-wrap:wrap;justify-content:center;gap:0;text-align:center}
.stats-bar__inner>div{padding:var(--s-3) var(--s-10);border-right:1px solid var(--c-border)}
.stats-bar__inner>div:last-child{border-right:none}
.stat__label{font-size:0.85rem;color:var(--c-text-secondary);font-weight:500;letter-spacing:0.01em}

.contact-form{max-width:480px}.form-group{margin-bottom:var(--s-5)}.form-group label{display:block;margin-bottom:var(--s-2);font-weight:600;font-size:0.85rem;color:var(--c-text)}
.form-group input,.form-group textarea{width:100%;padding:var(--s-3) var(--s-4);border:1.5px solid var(--c-border-strong);border-radius:var(--radius-sm);font-family:var(--f-body);font-size:1rem;color:var(--c-text);background:var(--c-bg-primary);transition:all var(--duration) var(--ease-out);min-height:44px}
.form-group textarea{min-height:140px;resize:vertical}.form-group input:focus,.form-group textarea:focus{border-color:var(--c-accent);box-shadow:0 0 0 3px rgba(0,102,204,0.12);outline:3px solid transparent}
.form-check{display:flex;align-items:flex-start;gap:var(--s-3)}.form-check input[type="checkbox"]{width:20px;height:20px;margin-top:2px;accent-color:var(--c-accent);flex-shrink:0}
.form-status{margin-top:var(--s-3);font-size:0.9rem;min-height:1.2em}.form-status--ok{color:#1a7a3a;font-weight:600}.form-status--error{color:#c0392b;font-weight:600}

.site-footer{background:var(--c-bg-primary);border-top:0.5px solid var(--c-border);padding:var(--s-12) 0 var(--s-8);color:var(--c-text-secondary)}
.site-footer__inner{max-width:var(--max-w);margin:0 auto;padding:0 var(--s-6)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--s-10);margin-bottom:var(--s-10)}.footer-brand p{font-size:0.85rem;max-width:320px}
.footer-links h4{font-family:var(--f-body);font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--c-text-tertiary);margin-bottom:var(--s-4)}
.footer-links ul{list-style:none;padding:0}.footer-links li{margin-bottom:var(--s-2)}.footer-links a{color:var(--c-text-secondary);font-size:0.85rem}.footer-links a:hover{color:var(--c-accent)}
.footer-bottom{border-top:0.5px solid var(--c-border);padding-top:var(--s-6);display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s-4);font-size:0.78rem;color:var(--c-text-tertiary)}

.card{opacity:0;transform:translateY(24px);transition:all var(--duration-slow) var(--ease-out)}.card.visible{opacity:1;transform:translateY(0)}
.card--zg{border-top:3px solid var(--c-border-strong)}.card--zg .card__icon{background:rgba(75,105,140,0.07);color:var(--c-accent)}.card--zg:hover{border-top-color:var(--c-accent)}.card--zg:hover .card__icon{background:var(--c-accent);color:#fff}
.card__icon svg{width:24px;height:24px}
.cards-grid .card:nth-child(1){transition-delay:0s}.cards-grid .card:nth-child(2){transition-delay:0.08s}.cards-grid .card:nth-child(3){transition-delay:0.16s}.cards-grid .card:nth-child(4){transition-delay:0.24s}.cards-grid .card:nth-child(5){transition-delay:0.32s}.cards-grid .card:nth-child(6){transition-delay:0.4s}.cards-grid .card:nth-child(7){transition-delay:0.48s}.cards-grid .card:nth-child(8){transition-delay:0.56s}

[dir="rtl"]{text-align:right}[dir="rtl"] .site-header__inner{flex-direction:row-reverse}[dir="rtl"] .nav-list{flex-direction:row-reverse}[dir="rtl"] ul,[dir="rtl"] ol{padding-left:0;padding-right:var(--s-6)}[dir="rtl"] .card__link::after{content:'←'}

/* 1300 statt 1080 (03.08.2026): Mit dem neuen Hauptpunkt "Hilfe" braucht die
   waagerechte Leiste 1210px (Logo 112 + Punkte 1050 + Polsterung 48), der Kopf ist
   aber auf --max-w = 1120px gedeckelt. Zwischen 1081 und ~1300px ragte sie deshalb
   aus dem Fenster und die SEITE scrollte quer. Acht Punkte in 960px unterzubringen
   waere nur mit deutlich engerer Leiste gegangen; der Burger ist der dafuer
   vorgesehene Rueckfall. Die uebrigen Regeln des alten Blocks (Hero, Fusszeile,
   Werkzeugleiste) bleiben bei 1080 - sie haben mit der Navigation nichts zu tun. */
@media(max-width:1300px){
  .nav-toggle{display:flex}.nav-list{display:none;position:absolute;top:52px;left:0;right:0;background:var(--c-bg-glass-heavy);backdrop-filter:blur(var(--blur-heavy));-webkit-backdrop-filter:blur(var(--blur-heavy));flex-direction:column;padding:var(--s-3);border-bottom:0.5px solid var(--c-border);box-shadow:0 8px 30px var(--c-shadow-md)}.nav-list.open{display:flex}.nav-link{padding:var(--s-3) var(--s-4)}
  .nav-dropdown{position:static;transform:none;box-shadow:none;border:none;background:transparent;backdrop-filter:none;min-width:auto;opacity:1;padding-left:var(--s-6)}.nav-item:hover .nav-dropdown{display:none}.nav-item.open .nav-dropdown{display:block}.nav-dropdown--lang{left:0;transform:none}
}
@media(max-width:1080px){
  .hero h1{font-size:clamp(2rem,5vw,3rem)}.hero{padding:var(--s-16) 0 var(--s-12)}.about-content{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.cards-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
  .a11y-toolbar__separator{display:none}
  .a11y-btn[data-action="contrast"]::after{font-size:0.55rem;display:block;line-height:1;margin-top:1px}
}
@media(max-width:600px){.hero{padding:var(--s-12) 0 var(--s-10)}.section{padding:var(--s-12) 0}.stats-bar{padding:var(--s-10) 0}}
@media print{.a11y-toolbar,.site-header,.site-footer,.nav-toggle,.read-section-btn,.tts-controls,.btn{display:none!important}body{color:#000;background:#fff;font-size:12pt}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}.card{opacity:1!important;transform:none!important}.card:hover{transform:none!important}.card:hover .card__img{transform:none!important}.card:hover .card__icon{transform:none!important}}

/* ============================================
   WCAG 2.2 AA Compliance Additions
   ============================================ */

/* 2.4.7 + 2.4.11: Focus Appearance (AA)
   - 3px solid outline = area > 2px perimeter ✅
   - 3:1 contrast between focused/unfocused ✅
   - Focus not obscured: scroll-padding ✅ */
:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: 4px;
  z-index: 10;  /* prevent obscuring (2.4.11) */
}

/* Ensure focus not obscured by sticky elements.
   120px war geschaetzt (Werkzeugleiste + Kopf im schlimmsten Fall). js/main.js
   misst beim ersten Sprung, was oben tatsaechlich klebt, und schreibt es in
   --sprung-abstand; ohne JavaScript bleibt der grosszuegige Schaetzwert. */
html { scroll-padding-top: var(--sprung-abstand, 120px); }

/* Additional focus ring on dark backgrounds */
.hero :focus-visible,
.stats-bar :focus-visible,
.page-hero :focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
}

[data-contrast="dark"] :focus-visible {
  outline-color: var(--c-focus);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.8);
}

/* 2.5.8: Target Size Minimum (24x24px) */
a, button, [role="button"], input, select, textarea,
[tabindex]:not([tabindex="-1"]) {
  min-height: 24px;
  min-width: 24px;
}

/* Ensure adequate spacing between interactive elements */
.nav-list { gap: 2px; }
.nav-dropdown a { margin: 2px 0; }
.footer-links li { margin-bottom: 4px; }

/* 1.4.3 + 1.4.6: Contrast Minimum
   All text colors now verified ≥4.5:1 */

/* 1.4.4: Resize Text - text scales with rem/em */
/* Already using calc(var(--f-size-base)*var(--f-scale)) ✅ */

/* 1.4.12: Text Spacing
   No clipping when text-spacing adjusted */
* {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

p, li, td, th, label, span, a, h1, h2, h3, h4 {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* 1.4.11: Non-text Contrast (3:1 for UI components)
   Form inputs border = #636366 on white = 5.50:1 ✅ */
.form-group input,
.form-group textarea,
.form-group select {
  border: 2px solid var(--c-text-tertiary);
}

/* 1.4.13: Content on Hover or Focus
   Dropdowns: dismissible, hoverable, persistent */
.nav-dropdown {
  pointer-events: auto;
}

/* 2.4.6: Headings and Labels - descriptive ✅ (content level) */

/* 2.4.1: Bypass Blocks - skip link ✅ */

/* 2.1.1: Keyboard accessible */
/* 2.1.2: No keyboard trap */
.nav-dropdown a:last-child:focus + .nav-dropdown,
.nav-item:not(:hover):not(:focus-within) .nav-dropdown {
  /* Allow keyboard to escape dropdown */
}

/* 3.2.6: Consistent Help (AA)
   Contact link in footer on every page ✅ */

/* 2.5.7: Dragging Movements
   No drag-based interactions on this site ✅ */

/* 3.3.7: Redundant Entry
   Single-page forms, no repeated inputs ✅ */

/* 3.3.8: Accessible Authentication
   No login/auth on this site ✅ */

/* 1.3.4: Orientation - no orientation lock */
@media screen {
  body { min-height: 100vh; }
}

/* 1.4.10: Reflow - content at 320px width without horizontal scrolling */
@media (max-width: 320px) {
  .site-header__inner { padding: 0 var(--s-3); }
  .section__inner { padding: 0 var(--s-3); }
  .hero__inner { padding: 0 var(--s-3); }
  .a11y-toolbar__inner { padding: 0 var(--s-3); }
  .stat__number { font-size: 1.8rem; }
}

/* Visible state for form errors (3.3.1) */
input:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown) {
  border-color: var(--c-red, #d32f2f);
  box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.15);
}

/* Required field indicator */
label .required {
  color: var(--c-red, #d32f2f);
  font-weight: 700;
}

/* Barrierefreiheitserklärung link styling */
.a11y-statement-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 0.8rem;
  padding: var(--s-2) var(--s-4);
  border-radius: 980px;
  background: var(--c-bg-secondary);
  color: var(--c-text-secondary);
  text-decoration: none;
  transition: all var(--duration) var(--ease-out);
}
.a11y-statement-link:hover {
  background: var(--c-accent);
  color: #fff;
}

/* --- Card Images (Original AssistUK Icons) --- */
.card__img {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-md);
  margin-bottom: var(--s-5);
  transition: transform var(--duration) var(--ease-out);
  object-fit: contain;
}

.card:hover .card__img {
  transform: scale(1.08) rotate(-2deg);
}

/* DigitalPainters area cards: real DP3 preview images shown as a banner
   (instead of the small 80px icon). Additive modifier — leaves all other
   pages that use .card__img untouched. */
.card__img--photo {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: var(--s-4);
}
.card:hover .card__img--photo {
  transform: scale(1.02);
}

/* Logo in header */
.site-logo__img {
  height: 48px;
  width: auto;
  transition: opacity var(--duration);
}
@media (min-width: 1081px) {
  .site-logo__img { height: 56px; }
  .site-header__inner { height: 64px; }
  .site-logo { margin-right: var(--s-6); flex-shrink: 0; }
}

.site-logo:hover .site-logo__img {
  opacity: 0.85;
}

/* Dark mode: slightly brighten icons */
[data-contrast="dark"] .card__img {
  filter: brightness(1.1);
}

[data-contrast="dark"] .site-logo__img {
  filter: brightness(0) invert(1);
}

/* --- Language Detection Toast --- */
.lang-toast {
  position: fixed;
  bottom: var(--s-6);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--c-bg-glass-heavy);
  backdrop-filter: blur(var(--blur-heavy));
  -webkit-backdrop-filter: blur(var(--blur-heavy));
  border: 0.5px solid var(--c-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px var(--c-shadow-lg);
  padding: var(--s-4) var(--s-6);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  font-size: 0.9rem;
  z-index: 2000;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
  max-width: 90vw;
  flex-wrap: wrap;
}
.lang-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.lang-toast-btn {
  background: var(--c-accent);
  color: #fff;
  border: none;
  border-radius: 980px;
  padding: var(--s-2) var(--s-5);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: var(--f-body);
  transition: all var(--duration) var(--ease-out);
  white-space: nowrap;
}
.lang-toast-btn:hover { transform: scale(1.05); }
.lang-toast-close {
  background: none;
  border: none;
  font-size: 1.3rem;
  color: var(--c-text-tertiary);
  cursor: pointer;
  padding: var(--s-1);
  line-height: 1;
  min-width: 24px;
  min-height: 24px;
}

/* --- TTS Active Button Animation --- */
.tts-active {
  animation: tts-pulse 1.5s ease-in-out infinite;
}
@keyframes tts-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,102,204,0.3); }
  50% { box-shadow: 0 0 0 6px rgba(0,102,204,0); }
}

/* --- TTS Pause Indicator --- */
.tts-active-indicator.paused {
  animation: none;
  opacity: 0.5;
}

/* --- TTS Speed Control --- */
.tts-speed-group {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.tts-speed-slider {
  width: 60px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--c-border-strong);
  border-radius: 2px;
  outline: 3px solid transparent;
  cursor: pointer;
}
.tts-speed-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c-accent);
  cursor: pointer;
}
.tts-speed-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c-accent);
  cursor: pointer;
  border: none;
}
#tts-speed-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--c-text-tertiary);
  min-width: 28px;
}

/* --- TTS Sentence-level Highlighting (v4) --- */
.tts-sentence-active {
  background: rgba(0, 102, 204, 0.08) !important;
  border-radius: 4px;
  padding: 0;
  margin: 0;
  transition: background-color 0.2s var(--ease-out);
}

[data-contrast="dark"] .tts-sentence-active {
  background: rgba(41, 151, 255, 0.12) !important;
}

[data-contrast="high"] .tts-sentence-active {
  background: rgba(0, 51, 138, 0.12) !important;
}

/* Word active within sentence - brighter highlight */
.tts-sentence-active.tts-word-active,
.tts-word-active {
  background: var(--c-tts-word) !important;
  color: var(--c-tts-word-text) !important;
  border-radius: 3px;
}

/* A heading is read as one unit, so the faint sentence tint is barely visible on
   its large bold text. Light the WHOLE active heading clearly (same colour as the
   word highlight) the moment it is being read — independent of word-boundary timing. */
h1 .tts-sentence-active, h2 .tts-sentence-active, h3 .tts-sentence-active,
h4 .tts-sentence-active, h5 .tts-sentence-active, h6 .tts-sentence-active {
  background: var(--c-tts-word) !important;
  color: var(--c-tts-word-text) !important;
}

/* --- Scheme-specific overrides for sepia & bluefilter --- */
[data-contrast="sepia"] .card__img { filter: sepia(0.2) brightness(0.95); }
[data-contrast="sepia"] .site-logo__img { filter: sepia(0.3); }
[data-contrast="bluefilter"] .card__img { filter: sepia(0.4) brightness(0.9); }
[data-contrast="bluefilter"] .site-logo__img { filter: brightness(0) invert(1) sepia(0.5) hue-rotate(-20deg); }
[data-contrast="sepia"] .tts-sentence-active { background: rgba(107,66,38,0.08) !important; }
[data-contrast="bluefilter"] .tts-sentence-active { background: rgba(212,160,96,0.1) !important; }
[data-contrast="sepia"] .hero::before { opacity: 0.88; }
[data-contrast="bluefilter"] .hero::before { opacity: 0.90; }
[data-contrast="sepia"] .page-hero::before { opacity: 0.90; }
[data-contrast="bluefilter"] .page-hero::before { opacity: 0.92; }
[data-contrast="sepia"] .stat__number { -webkit-text-fill-color: #c49a6c; background: none; }
[data-contrast="bluefilter"] .stat__number { -webkit-text-fill-color: #e8b878; background: none; }

/* --- TTS Buttons: More Prominent --- */
#btn-read-page {
  background: var(--c-accent);
  /* NICHT hart #fff: im Dunkelmodus und im Blaufilter wird --c-accent hell
     (#6ba4dc bzw. #d4a060). Weisse Schrift darauf ergab 2,64:1 bzw. 2,33:1 - beim
     meistgenutzten Knopf der Seite, auf JEDER Seite. --c-on-accent kippt dort auf
     fast schwarz und ist genau dafuer da (gemessen 31.07.2026). */
  color: var(--c-on-accent, #fff);
  border-color: var(--c-accent);
  padding: var(--s-2) var(--s-5);
  font-size: 0.9rem;
  min-height: 40px;
  box-shadow: 0 2px 12px rgba(75, 105, 140, 0.3);
  font-weight: 700;
}
#btn-read-page:hover {
  background: var(--c-accent-2);
  border-color: var(--c-accent-2);
  transform: scale(1.06);
  box-shadow: 0 4px 20px rgba(75, 105, 140, 0.45);
}
#btn-read-page[aria-pressed="true"],
#btn-read-page.tts-active {
  background: var(--c-orange, #ff9500);
  /* Orange ist in allen fuenf Kontrastmodi gleich hell, braucht also IMMER dunkle
     Schrift. Mit dem geerbten Weiss lag der Knopf waehrend des Vorlesens bei 2,2:1 -
     ausgerechnet in dem Moment, in dem man ihn sucht, um zu stoppen. Jetzt 8,4:1.
     Bewusst fester Wert statt --c-on-accent: der kippt mit dem Modus, die Flaeche
     hier aber nicht (gemessen 31.07.2026). */
  color: #1d1d1f;
  border-color: var(--c-orange, #ff9500);
  box-shadow: 0 2px 12px rgba(255, 149, 0, 0.4);
}
@keyframes tts-attention-pulse {
  0%, 100% { box-shadow: 0 2px 12px rgba(75,105,140,0.3); }
  50% { box-shadow: 0 2px 20px rgba(75,105,140,0.55); }
}
#btn-read-page:not(.tts-active):hover {
  animation: tts-attention-pulse 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  #btn-read-page:not(.tts-active) { animation: none; }
}


/* --- Cookie Banner --- */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--c-bg-glass-heavy);
  backdrop-filter: blur(var(--blur-heavy));
  -webkit-backdrop-filter: blur(var(--blur-heavy));
  border-top: 1px solid var(--c-border-strong);
  padding: var(--s-6);
  z-index: 3000;
  box-shadow: 0 -4px 24px var(--c-shadow-lg);
}
.cookie-banner__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
}
.cookie-banner__text {
  flex: 1 1 300px;
  font-size: 0.9rem;
  color: var(--c-text);
  margin-bottom: 0;
}
.cookie-banner__actions {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.cookie-btn { min-height: 44px; font-size: 0.9rem; }
.btn--outline-dark {
  background: transparent;
  color: var(--c-text);
  border: 1.5px solid var(--c-border-strong);
  border-radius: 980px;
  padding: var(--s-3) var(--s-5);
  font-family: var(--f-body);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration) var(--ease-out);
}
.btn--outline-dark:hover {
  background: var(--c-bg-secondary);
  border-color: var(--c-accent);
  color: var(--c-accent);
}
.cookie-banner__link {
  font-size: 0.8rem;
  color: var(--c-text-tertiary);
  flex-basis: 100%;
  margin-top: var(--s-1);
}

/* --- Cookie Settings Modal --- */
.cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 3001;
  align-items: center;
  justify-content: center;
}
.cookie-modal[hidden] { display: none !important; }
.cookie-modal:not([hidden]) { display: flex; }
.cookie-banner[hidden] { display: none !important; }
.cookie-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}
.cookie-modal__content {
  position: relative;
  background: var(--c-bg-primary);
  border-radius: var(--radius-lg);
  padding: var(--s-8);
  max-width: 560px;
  width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px var(--c-shadow-lg);
}
.cookie-modal__content h2 {
  font-family: var(--f-body);
  font-size: 1.3rem;
  margin-bottom: var(--s-6);
  border: none;
  padding-top: 0;
}
.cookie-category {
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--c-border);
}
.cookie-category:last-of-type { border-bottom: none; }
.cookie-category label {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  cursor: pointer;
  font-weight: 600;
  margin-bottom: var(--s-2);
}
.cookie-category input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: var(--c-accent);
  flex-shrink: 0;
}
.cookie-category p {
  font-size: 0.85rem;
  color: var(--c-text-secondary);
  margin-bottom: 0;
  padding-left: 34px;
}
.cookie-modal__actions {
  display: flex;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

/* --- YouTube 2-Click Placeholder --- */
.yt-placeholder {
  background: var(--c-bg-secondary);
  border: 2px dashed var(--c-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--s-10);
  text-align: center;
  position: relative;
  aspect-ratio: 16/9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
}
.yt-placeholder__icon { font-size: 3rem; opacity: 0.5; }
.yt-placeholder__text { font-size: 0.9rem; color: var(--c-text-secondary); max-width: 400px; }
.yt-placeholder__btn {
  background: #ff0000;
  color: #fff;
  border: none;
  border-radius: 980px;
  padding: var(--s-3) var(--s-6);
  font-weight: 600;
  font-family: var(--f-body);
  cursor: pointer;
  font-size: 0.95rem;
  min-height: 44px;
  transition: all var(--duration) var(--ease-out);
}
.yt-placeholder__btn:hover { background: #cc0000; transform: scale(1.04); }

/* --- Video-Reihe: mehrere 2-Klick-Videos nebeneinander, je mit Bildunterschrift --- */
.video-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-6); margin-top: var(--s-4); }
.video-reihe figure { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.video-reihe .yt-placeholder { padding: var(--s-4); gap: var(--s-2); }
.video-reihe .yt-placeholder__icon { font-size: 2rem; }
.video-reihe .yt-placeholder__text { font-size: 0.8rem; }
.video-reihe .yt-placeholder__btn { padding: var(--s-2) var(--s-4); font-size: 0.85rem; }
.video-reihe figcaption { font-size: 0.9rem; color: var(--c-text-secondary); line-height: 1.5; }
.video-reihe figcaption strong { display: block; color: var(--c-text-primary); font-weight: 600; }

/* --- Status Messages --- */
.msg { padding: var(--s-3) var(--s-4); border-radius: var(--radius-sm); margin-bottom: var(--s-4); font-weight: 500; }
.msg-ok { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.msg-err { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
[data-contrast="dark"] .msg-ok { background: #1a3a1a; color: #8dda8d; border-color: #2a5a2a; }
[data-contrast="dark"] .msg-err { background: #3a1a1a; color: #da8d8d; border-color: #5a2a2a; }

/* --- Scroll Navigation Buttons --- */
.scroll-nav{position:fixed;right:var(--s-4);bottom:50%;transform:translateY(50%);display:flex;flex-direction:column;gap:var(--s-2);z-index:500;opacity:0.6;transition:opacity var(--duration)}
.scroll-nav:hover{opacity:1}
.scroll-nav__btn{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--c-border-strong);background:var(--c-bg-glass-heavy);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--c-text);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.2rem;transition:all var(--duration);padding:0;line-height:1}
.scroll-nav__btn:hover{background:var(--c-accent);color:#fff;border-color:var(--c-accent);transform:scale(1.1)}
.scroll-nav__sep{height:1px;background:var(--c-border);margin:var(--s-1) 0}
@media(max-width:600px){.scroll-nav{right:var(--s-2)}.scroll-nav__btn{width:42px;height:42px;font-size:1rem}}
@media print{.scroll-nav{display:none}}

/* --- Search --- */
/* Der Suchknopf stand bis 08.08.2026 als letzter Punkt IN der Menueliste und
   trug die Klasse a11y-btn. Zwei Folgen:
   1. Beim Ueberfahren wurde die Lupe fast unsichtbar. .a11y-btn:hover setzt
      color:#fff und hat mit Klasse+Pseudoklasse (0,2,0) mehr Gewicht als die
      eigene Farbe in .nav-search-toggle (0,1,0) - der Hintergrund kam aber aus
      .nav-search-toggle:hover (hellgrau). Weiss auf hellgrau.
   2. Unter 1300px klappt .nav-list in den Burger. Die Suche verschwand also
      genau dort mit, wo die Navigation am unhandlichsten ist.
   Jetzt: eigener Knopf neben dem Burger, auf jeder Breite sichtbar, gefuellt in
   der Akzentfarbe und mit Beschriftung. */
.main-nav { display: flex; align-items: center; }
/* Burger bleibt optisch ganz rechts, obwohl er im HTML vorne steht (Tab-Reihen-
   folge, s. site-loader.js). Abstaende bewusst als margin statt als gap auf
   .main-nav: der Knopf muss in der engen Menueleiste (s. u.) auf exakt die
   Breite des alten Lupen-Knopfes schrumpfen koennen. */
.nav-toggle { order: 2; margin-inline-start: var(--s-2); }

.nav-search-toggle {
  position: relative;   /* Anker fuer die weggeblendete Beschriftung, s. u. */
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2); flex-shrink: 0;
  margin-inline-start: var(--s-3);
  padding: var(--s-2) var(--s-4);
  min-height: 40px; min-width: 44px;
  border: 1.5px solid var(--c-accent); border-radius: 980px;
  background: var(--c-accent);
  /* NICHT hart #fff - gleiche Begruendung wie bei #btn-read-page: im
     Dunkelmodus (#6ba4dc) und im Blaufilter (#d4a060) ist --c-accent hell,
     weisse Schrift laege bei 2,6:1. --c-on-accent kippt dort auf fast schwarz. */
  color: var(--c-on-accent, #fff);
  font-family: var(--f-body); font-size: 0.85rem; font-weight: 700; line-height: 1;
  white-space: nowrap; cursor: pointer;
  box-shadow: 0 2px 12px rgba(75, 105, 140, 0.3);
  transition: background var(--duration) var(--ease-out),
              border-color var(--duration) var(--ease-out),
              transform var(--duration) var(--ease-out),
              box-shadow var(--duration) var(--ease-out);
}
.nav-search-toggle:hover, .nav-search-toggle:focus-visible {
  background: var(--c-accent-2); border-color: var(--c-accent-2);
  color: var(--c-on-accent, #fff);
  transform: scale(1.06);
  box-shadow: 0 4px 20px rgba(75, 105, 140, 0.45);
}
.nav-search-toggle svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Burger-Modus: das Logo behaelt seine Breite, stattdessen darf die Beschriftung
   kuerzen. Ohne das quetschte ein 320px-Fenster in pl/sk („Wyszukiwanie",
   „Vyhľadávanie") das Logo von 96px auf 71px - die Hoehe blieb stehen, das
   Wortbild war also verzerrt (gemessen 08.08.2026). Auf Deutsch passt das Wort
   auch bei 320px; gekuerzt wird nur, wo die Sprache es noetig macht. */
@media (max-width: 1300px) {
  .site-logo { flex-shrink: 0; }
  .main-nav { min-width: 0; }
  .nav-search-toggle { flex-shrink: 1; overflow: hidden; }
  .nav-search-toggle__text { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
}

/* Ab 1301px steht die volle Menueleiste in einer Zeile - und die ist auf den
   Pixel genau ausgereizt. Rechnung: .site-header__inner ist auf 1120px begrenzt
   und zentriert, die Leiste laeuft rechts darueber hinaus; ihr rechter Rand
   liegt bei Fensterbreite/2 + 648px. Damit der im Fenster bleibt, braucht es
   1296px - genau daher der Burger-Umbruch bei 1300px (@media(max-width:1300px)
   weiter oben). Jedes Pixel Beschriftung wandert direkt in einen waagerechten
   Rollbalken (gemessen 08.08.2026: mit „Suche" schob die Leiste die Seite bei
   1440px um 16px quer).
   Darum hier nur der gefuellte Kreis, und zwar in exakt der Breite des alten
   Lupen-Knopfes (44px inkl. Abstand) - so bleibt der Umbruchpunkt bei 1300px
   unveraendert richtig.
   Keine hoehere Grenze mit Beschriftung: das Wort ist uebersetzt, und
   „Wyszukiwanie"/„Vyhľadávanie" sind 64px breiter als „Suche". Eine an Deutsch
   ausgemessene Schwelle waere in zwei der 42 Sprachen falsch.
   Weggeblendet wird wie .sr-only, NICHT mit display:none: sonst haette der Knopf
   gar keinen zugaenglichen Namen mehr (das <svg> ist aria-hidden, und ein
   aria-label gibt es absichtlich nicht, weil es die Uebersetzung ueberstimmt). */
@media (min-width: 1301px) {
  .nav-search-toggle {
    padding: var(--s-2); gap: 0; margin-inline-start: 0;
    min-width: 44px; min-height: 44px;
  }
  .nav-search-toggle__text {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .nav-search-toggle svg { width: 20px; height: 20px; }
}

.search-overlay {
  position: fixed; top: 0; left: 0; right: 0;
  background: var(--c-bg-glass-heavy); backdrop-filter: blur(var(--blur-heavy));
  -webkit-backdrop-filter: blur(var(--blur-heavy));
  border-bottom: 1px solid var(--c-border-strong);
  box-shadow: 0 8px 30px var(--c-shadow-lg);
  padding: var(--s-6); z-index: 3000;
}
.search-overlay[hidden] { display: none !important; }

.search-close {
  position: absolute; top: var(--s-3); right: var(--s-4);
  background: none; border: none; font-size: 1.5rem; color: var(--c-text-tertiary);
  cursor: pointer; padding: var(--s-2); min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
}
.search-close:hover { color: var(--c-text); }
.search-form {
  max-width: var(--max-w); margin: var(--s-6) auto 0;
  display: flex; gap: var(--s-3);
}
.search-form input[type="search"] {
  flex: 1; padding: var(--s-3) var(--s-6);
  border: 2px solid var(--c-border-strong); border-radius: 980px;
  font-family: var(--f-body); font-size: 1.1rem;
  background: var(--c-bg-primary); color: var(--c-text);
  min-height: 52px; min-width: 0;
}
.search-form input[type="search"]:focus {
  border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(75,105,140,0.15); outline: 3px solid transparent;
}
.search-form button[type="submit"] {
  padding: var(--s-3) var(--s-5); background: var(--c-accent); color: #fff;
  border: none; border-radius: 980px; font-weight: 600; font-family: var(--f-body);
  cursor: pointer; min-height: 44px; transition: all var(--duration);
}
.search-form button[type="submit"]:hover { background: var(--c-accent-2); transform: scale(1.04); }

.search-results {
  max-width: var(--max-w); margin: var(--s-4) auto 0;
  max-height: 400px; overflow-y: auto;
}
.search-result-item {
  padding: var(--s-3) var(--s-4); border-radius: var(--radius-sm);
  transition: background var(--duration); display: block; text-decoration: none; color: var(--c-text);
}
.search-result-item:hover { background: var(--c-bg-secondary); }
.search-result-item h4 { font-family: var(--f-body); font-size: 0.95rem; font-weight: 600; color: var(--c-accent); margin-bottom: 2px; text-transform: none; }
.search-result-item p { font-size: 0.8rem; color: var(--c-text-secondary); margin-bottom: 0; max-width: none; }
.search-result-item .search-url { font-size: 0.7rem; color: var(--c-text-tertiary); }

.ai-answer {
  background: var(--c-bg-secondary); border-left: 4px solid var(--c-accent);
  border-radius: var(--radius-sm); padding: var(--s-4); margin-bottom: var(--s-4);
  font-size: 0.9rem; line-height: 1.5;
}
.ai-answer strong { color: var(--c-accent); font-size: 0.8rem; display: block; margin-bottom: var(--s-2); }
.ai-answer__body { color: var(--c-text); }
.ai-answer__body a { color: var(--c-accent); text-decoration: underline; }
/* Einwilligung fuer die KI-Antwort. Bewusst ruhiger als .ai-answer (gestrichelt,
   kein Akzentbalken): Es ist ein Angebot, keine Antwort - es soll nicht so
   aussehen, als stuende hier schon etwas. */
.ki-angebot {
  border: 1px dashed var(--c-border); border-radius: var(--radius-sm);
  padding: var(--s-4); margin-bottom: var(--s-4);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
}
.ki-angebot__text {
  flex: 1 1 min(100%, 26rem); margin: 0;
  font-size: 0.85rem; line-height: 1.5; color: var(--c-text-secondary);
}
.ki-angebot .btn { flex: 0 0 auto; }
.ki-angebot__merken {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.8rem; color: var(--c-text-secondary); cursor: pointer;
}
.search-page__hinweis {
  font-size: 0.8rem; line-height: 1.5; color: var(--c-text-secondary);
  margin: calc(var(--s-2) * -1) 0 var(--s-4); max-width: 46rem;
}

.search-loading { text-align: center; padding: var(--s-6); color: var(--c-text-tertiary); font-size: 0.9rem; }
.search-no-results { text-align: center; padding: var(--s-6); color: var(--c-text-tertiary); }
/* Fundstelle in der Trefferliste. Eigene Farben statt des Browser-Gelbs: dessen
   schwarze Schrift auf Gelb bleibt im Dunkelmodus stehen und blendet. */
.search-result-item mark {
  background: var(--c-accent); color: #fff; padding: 0 2px; border-radius: 2px; font-weight: 600;
}
/* Aktuelles: datierte Meldungen untereinander (Vorbild: Neles Aktuelles-Seite).
   Die Trennlinie zwischen den Meldungen macht sichtbar, wo eine endet - bei
   gleich gestalteten Absaetzen verschwimmen sonst zwei Nachrichten zu einer. */
.news-entry + .news-entry { border-top: 1px solid var(--c-border); padding-top: var(--s-8); }
.news-kicker {
  font-size: 0.9rem; font-weight: 600; color: var(--c-accent);
  letter-spacing: 0.02em; margin: 0 0 var(--s-1);
}
.news-entry h2 { margin-top: 0; }

/* Aufklappbare Frage-Antwort-Bloecke. Bisher stand dieses Regelwerk in den
   <style>-Bloecken der sieben Fragensammlungen - siebenmal derselbe Code, und jede
   neue Seite mit .faq-item stand ohne Gestaltung da. Hier als Grundlage; die
   Seiten-eigenen Bloecke stehen im Dokument spaeter und ueberschreiben sie weiterhin. */
details.faq-item {
  margin-bottom: var(--s-3); border: 1px solid var(--c-border);
  border-radius: var(--radius-sm); overflow: hidden;
}
details.faq-item summary {
  padding: var(--s-4) var(--s-5); font-family: var(--f-heading); font-weight: 600;
  font-size: 1.05rem; cursor: pointer; list-style: none; display: flex;
  align-items: center; justify-content: space-between; gap: var(--s-3);
  background: var(--c-bg-secondary); color: var(--c-text);
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after {
  content: "\25BC"; font-size: 0.75rem; flex-shrink: 0; color: var(--c-accent);
  transition: transform 0.2s ease;
}
details.faq-item[open] summary::after { transform: rotate(180deg); }
details.faq-item summary:hover { background: var(--c-bg-tertiary); }
details.faq-item .faq-answer {
  padding: var(--s-4) var(--s-5); line-height: 1.7; border-top: 1px solid var(--c-border);
}
details.faq-item .faq-answer p { margin: 0 0 var(--s-3); }
details.faq-item .faq-answer p:last-child { margin-bottom: 0; }

.search-korrektur {
  font-size: 0.85rem; color: var(--c-text-secondary); margin-bottom: var(--s-3);
  padding: var(--s-2) var(--s-3); background: var(--c-bg-secondary);
  border-left: 3px solid var(--c-accent); border-radius: var(--radius-sm);
}

/* --- Card Slideshow --- */
.card-slideshow {
  position: relative;
  width: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: var(--s-4);
  aspect-ratio: 779/544;
  background: var(--c-bg-secondary);
}
.card-slideshow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease-in-out, transform var(--duration) var(--ease-out);
}
.card-slideshow img.slide-active {
  opacity: 1;
}
.card:hover .card-slideshow img.slide-active {
  transform: scale(1.05);
}
.card:hover .card-slideshow {
  box-shadow: 0 4px 16px var(--c-shadow-md);
}
.card-slideshow__dots {
  position: absolute;
  bottom: var(--s-2);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 2;
}
.card-slideshow__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(0,0,0,0.2);
  cursor: pointer;
  transition: all 0.3s;
  padding: 0;
  min-width: 8px;
  min-height: 8px;
}
.card-slideshow__dot.dot-active {
  background: #fff;
  transform: scale(1.3);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
@media (prefers-reduced-motion: reduce) {
  .card-slideshow img { transition: none; }
}

/* Cookie & modal in print hidden */
@media print {
  .cookie-banner, .cookie-modal, .yt-placeholder { display: none !important; }
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms \!important;animation-iteration-count:1 \!important;transition-duration:0.01ms \!important;scroll-behavior:auto \!important}}
@media(prefers-contrast:more){:root{--c-text:#000;--c-text-secondary:#1a1a1a;--c-text-tertiary:#333;--c-bg:#fff;--c-bg-primary:#fff;--c-bg-secondary:#f0f0f0;--c-border-strong:rgba(0,0,0,0.5)}}

/* ===== WCAG-Kontrast-Fixes: Dark/Bluefilter haben hellen Accent -> dunkler Text auf Accent-Flaechen ===== */
:root{--c-on-accent:#fff}
[data-contrast="dark"]{--c-on-accent:#15110c;--c-text-tertiary:#9a9aa0}
[data-contrast="bluefilter"]{--c-on-accent:#15110c}
[data-contrast="dark"] .btn--primary,[data-contrast="dark"] .btn--primary:hover,[data-contrast="dark"] .a11y-btn:hover,[data-contrast="dark"] .a11y-btn[aria-pressed="true"],[data-contrast="dark"] .a11y-btn.active,[data-contrast="dark"] .read-section-btn:hover,[data-contrast="dark"] .skip-link,[data-contrast="dark"] .card__tts,[data-contrast="dark"] .card--zg:hover .card__icon,[data-contrast="bluefilter"] .btn--primary,[data-contrast="bluefilter"] .btn--primary:hover,[data-contrast="bluefilter"] .a11y-btn:hover,[data-contrast="bluefilter"] .a11y-btn[aria-pressed="true"],[data-contrast="bluefilter"] .a11y-btn.active,[data-contrast="bluefilter"] .read-section-btn:hover,[data-contrast="bluefilter"] .skip-link,[data-contrast="bluefilter"] .card__tts,[data-contrast="bluefilter"] .card--zg:hover .card__icon{color:var(--c-on-accent)}

/* Sprach-Suche im Umschalter (ab >12 Sprachen eingeblendet, s. site-loader.js) */
.lang-search{width:100%;box-sizing:border-box;margin:0 0 var(--s-2);padding:.45em .7em;font:inherit;font-size:.9rem;color:var(--c-text);background:var(--c-bg);border:1px solid var(--c-border-strong);border-radius:var(--radius-sm,8px)}
.lang-search:focus{outline:2px solid var(--c-accent);outline-offset:1px}
.lang-opt[hidden]{display:none}
.lang-empty{margin:var(--s-2) 0 0;font-size:.85rem;color:var(--c-text-secondary);text-align:center}
.lang-empty[hidden]{display:none}

/* ============================================================
   Bereichsfarben (Wayfinding)

   Ein Farbton je Navigationsbereich. Alle Toene liegen bewusst in
   derselben Tiefe wie das Marken-Navy - es dreht sich nur der
   Farbwinkel. Dadurch bleibt der weisse Hero-Text ueberall
   kontraststark und die Seite wirkt zugeordnet statt bunt.

   Gepflegt wird an GENAU zwei Stellen: die Toene hier und die
   Zuordnung `bereich:` in js/site-config.js.
   Endung 1 = dunkler Grundton, 2 = aufgehellte Variante (zweiter
   Verlaufsstop und Marker auf dunklem Grund). Als RGB-Tripel,
   damit rgba() unten damit rechnen kann.
   ============================================================ */
:root{--bereich-1:26,58,106;--bereich-2:75,105,140}
[data-bereich="fuer"]    {--bereich-1:26,58,106; --bereich-2:75,105,140}
[data-bereich="produkte"]{--bereich-1:14,74,82;  --bereich-2:61,136,145}
[data-bereich="apps"]    {--bereich-1:61,43,107; --bereich-2:111,91,168}
[data-bereich="info"]    {--bereich-1:27,74,56;  --bereich-2:74,138,109}
[data-bereich="kplus"]   {--bereich-1:107,48,32; --bereich-2:168,108,78}
[data-bereich="ueber"]   {--bereich-1:64,56,79;  --bereich-2:119,111,134}

/* Hero: der Bereichston liegt als Verlauf ueber dem Bild. --hero-img
   kommt inline von der Seite, weil jedes Hero-Bild nur einmal
   vorkommt; die FARBE steht ausschliesslich hier.
   Ohne --hero-img faellt die zweite Ebene auf einen Vollton in der
   Bereichsfarbe zurueck - so funktioniert die Regel auch auf
   Unterseiten, die (noch) kein eigenes Bild haben.

   ACHTUNG Pfade: Das url() in --hero-img loest der Browser gegen DIESE
   Datei auf (dort steht var()), nicht gegen die HTML-Seite. Basis ist
   also immer css/ - der Pfad hat darum genau EIN "../", egal wie tief
   die Seite liegt. In den Quellseiten steht weiterhin der seitenrelative
   Pfad; umgerechnet wird beim Bauen (eleventy.config.mjs, heroBildPfad).
   Ohne diese Umrechnung fehlten am 07.08.2026 auf 87 von 115 Seiten die
   Hero-Bilder. */
.page-hero[data-bereich]{
  background-image:
    radial-gradient(ellipse 78% 72% at 50% 50%,rgba(12,18,28,0.35),rgba(12,18,28,0) 76%),
    linear-gradient(135deg,rgba(var(--bereich-1),0.82),rgba(var(--bereich-2),0.60)),
    var(--hero-img,linear-gradient(rgb(var(--bereich-1)),rgb(var(--bereich-1))));
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
/* Textschutz: Ohne die weich auslaufende Scheibe oben lag der weisse
   Hero-Text ueber hellen Bildstellen bei nur ~3.1:1 - fuer die grosse
   H1 (AA Large) gerade noch zulaessig, fuer den Absatz darunter nicht.
   Mit Scrim + voller Deckkraft sind es ueberall > 5.5:1, waehrend das
   Bild zu den Raendern hin unveraendert sichtbar bleibt. */
.page-hero[data-bereich] p{color:rgba(245,245,247,0.96)}

/* Heller Hero (Produkt- und EyePlayground-Seiten, kommunikation+): dort steht
   dunkle Schrift, deshalb deckt ein WEISSER Schleier das Bild ab. Es bleibt
   als zarter Hintergrund erkennbar, ohne den Text anzugreifen. Spezifischer
   als die dunkle Regel oben, damit sie hier nicht gewinnt. */
.page-hero.page-hero--light[data-bereich]{
  background-image:linear-gradient(rgba(255,255,255,0.88),rgba(255,255,255,0.93)),
                   var(--hero-img,none);
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
/* Die Regel .page-hero--light h1 steht weiter oben VOR .page-hero h1 und
   verliert deshalb bei gleicher Spezifitaet - auf hellen Heroes mit sichtbarem
   Titel waere die Schrift dadurch fast weiss auf fast weiss. Hier gerade
   ruecken (gilt fuer alle hellen Heroes, nicht nur die mit Bild). */
.page-hero.page-hero--light h1,
.page-hero.page-hero--light p{color:var(--c-text)}
.page-hero.page-hero--light .page-hero__subtitle{color:#1a3a6a}
[data-contrast="dark"] .page-hero.page-hero--light .page-hero__subtitle,
[data-contrast="bluefilter"] .page-hero.page-hero--light .page-hero__subtitle{color:var(--c-accent)}

/* Navigation: schmaler Marker unter dem Top-Level-Punkt plus farbige
   Oberkante am Dropdown. Farbe traegt NUR der Marker - die Schrift
   bleibt unveraendert, damit die Einfaerbung keinen Textkontrast
   beschaedigen kann. */
.nav-item[data-bereich] > .nav-link{position:relative}
.nav-item[data-bereich] > .nav-link::after{
  content:'';position:absolute;left:var(--s-3);right:var(--s-3);bottom:3px;height:3px;
  border-radius:2px;background:rgb(var(--bereich-1));
  transform:scaleX(0);transform-origin:center;
  transition:transform var(--duration) var(--ease-out)}
.nav-item[data-bereich]:hover > .nav-link::after,
.nav-item[data-bereich]:focus-within > .nav-link::after,
.nav-item[data-bereich].open > .nav-link::after{transform:scaleX(1)}
.nav-item[data-bereich] .nav-dropdown{border-top:3px solid rgb(var(--bereich-1))}

/* Der Bereichston war bisher nur beim Ueberfahren zu sehen (Unterstrich)
   und als schmale Kante oben am Ausklapper — im Ruhezustand wirkte das
   Menue farblos, obwohl jeder Bereich seinen Ton hat. Zwei Stellen machen
   ihn dauerhaft sichtbar, ohne dass es bunt wird:

   1. das Symbol im Menuepunkt (immer, auch ohne Hover)
   2. die Gruppenueberschriften im Ausklapper

   Alle --bereich-1-Toene liegen in der Tiefe des Marken-Navy, auf weissem
   Grund also weit ueber 7:1. In Dunkel und Blaufilter wird auf die
   aufgehellte Variante gewechselt (Regel weiter unten). */
.nav-item[data-bereich] > .nav-link > svg{color:rgb(var(--bereich-1))}
.nav-item[data-bereich] .nav-dropdown__header{color:rgb(var(--bereich-1))}

/* Die Erklaerzeilen bleiben bewusst im neutralen Grau: sie stehen unter
   jedem Eintrag und waeren in Bereichsfarbe eine Farbflaeche statt eines
   Hinweises. */

/* Dunkle Schemata: dort ist der dunkle Grundton unsichtbar, also
   den aufgehellten Ton nehmen (sepia ist hell und bleibt beim
   Grundton). Hoher Kontrast verzichtet ganz auf Bereichsfarbe. */
[data-contrast="dark"] .nav-item[data-bereich] > .nav-link::after,
[data-contrast="bluefilter"] .nav-item[data-bereich] > .nav-link::after{background:rgb(var(--bereich-2))}
[data-contrast="dark"] .nav-item[data-bereich] .nav-dropdown,
[data-contrast="bluefilter"] .nav-item[data-bereich] .nav-dropdown{border-top-color:rgb(var(--bereich-2))}
[data-contrast="high"] .nav-item[data-bereich] > .nav-link::after{background:var(--c-accent)}
[data-contrast="high"] .nav-item[data-bereich] .nav-dropdown{border-top-color:var(--c-accent)}

/* Symbol und Gruppenueberschriften ziehen mit: auf dunklem Grund waere der
   dunkle Grundton unlesbar. Hoher Kontrast verzichtet auch hier ganz auf
   Bereichsfarbe und nimmt die Textfarbe des Modus. */
/* Das Symbol traegt den aufgehellten Ton — es ist eine Flaeche, kein Text,
   und liegt damit ueber den 3:1, die dafuer gelten. */
[data-contrast="dark"] .nav-item[data-bereich] > .nav-link > svg,
[data-contrast="bluefilter"] .nav-item[data-bereich] > .nav-link > svg{color:rgb(var(--bereich-2))}

/* Die Gruppenueberschriften NICHT: sie sind 0,66 rem gross und versal.
   Gemessen kaeme der aufgehellte Ton auf 4,16 (Dunkel) und 4,03
   (Blaufilter) — unter den 4,5, die kleiner Text braucht. Lesbarkeit
   sticht Farbe; die Zuordnung tragen hier Symbol und Dropdown-Kante. */
[data-contrast="dark"] .nav-item[data-bereich] .nav-dropdown__header,
[data-contrast="bluefilter"] .nav-item[data-bereich] .nav-dropdown__header,
[data-contrast="high"] .nav-item[data-bereich] .nav-dropdown__header{color:var(--c-text-secondary)}
[data-contrast="high"] .nav-item[data-bereich] > .nav-link > svg{color:inherit}
@media(prefers-reduced-motion:reduce){
  .nav-item[data-bereich] > .nav-link::after{transition:none}
}

/* Einstieg in die Hilfe auf der Startseite (03.08.2026). Flaeche ueber --c-bg-primary
   wie .card - ein nicht vorhandenes Token bliebe im Dunkelmodus weiss. */
.start-hilfe{max-width:820px;margin:var(--s-10) auto 0;padding:var(--s-6) var(--s-8);background:var(--c-bg-primary);border:1px solid var(--c-border);border-left:4px solid var(--c-accent);border-radius:var(--radius-lg)}
.start-hilfe h3{font-size:1.15rem}
@media(max-width:600px){.start-hilfe{padding:var(--s-5) var(--s-5)}}

/* Knopfreihe (03.08.2026). Vorher standen solche Paare mit einem reinen
   margin-left nebeneinander - beim Umbruch auf schmalen Schirmen fiel der Abstand
   weg und die Knoepfe stiessen aneinander. gap wirkt in beide Richtungen. */
.btn-reihe{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}

/* Wortzugriff-Test: Die Knopfgruppe war display:block. Die Knoepfe sind 44px hoch,
   die Zeilenhoehe ist kleiner - beim Umbruch auf dem Handy schoben sie sich
   uebereinander (gemeldet 03.08.2026). Flex mit gap loest beides. */
.diag-test-actions{display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:center;align-items:center}

/* ===== Aktuelles auf der Startseite =====
   Bewusst schmaler als die Karten davor: Datum links, Titel und ein Satz rechts.
   Eine Meldung soll im Vorbeigehen lesbar sein, nicht um Aufmerksamkeit ringen.
   Quelle: _data/aktuelles.json (Transform) + verschickte Newsletter-Ausgaben (js/aktuelles.js). */
.news-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-2)}
.news-item a{
  display:flex;gap:var(--s-4);align-items:baseline;
  padding:var(--s-4) var(--s-5);border:1px solid var(--c-border);border-radius:var(--radius,12px);
  background:var(--c-bg-primary);color:inherit;text-decoration:none;
  transition:border-color .15s,background .15s,transform .15s;
}
.news-item a:hover{border-color:var(--c-border-strong);background:var(--c-bg-secondary)}
.news-item a:active{transform:scale(.995)}
.news-item__datum{
  flex:0 0 5.5rem;font-size:.85rem;line-height:1.3;color:var(--c-text-secondary);
  font-variant-numeric:tabular-nums;
}
.news-item__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.news-item__text strong{font-family:var(--f-heading);font-size:1.05rem;line-height:1.35;color:var(--c-text)}
.news-item__text span{font-size:.95rem;line-height:1.5;color:var(--c-text-secondary)}
/* Herkunftsmarke der Newsletter-Ausgaben - ohne sie wirken sie wie redaktionelle Meldungen. */
.news-item__quelle{
  display:inline-block;margin-top:2px;font-size:.78rem;letter-spacing:.02em;
  color:var(--c-text-secondary);border:1px solid var(--c-border-strong);
  border-radius:999px;padding:1px 8px;align-self:flex-start;
}
/* Auf schmalen Geraeten steht das Datum ueber dem Titel statt daneben:
   5,5rem Datumsspalte plus Text passen unter ~480px nicht nebeneinander. */
@media (max-width:480px){
  .news-item a{flex-direction:column;gap:var(--s-1)}
  .news-item__datum{flex:none}
}

/* ============================================
   Sprungziel aus der Suche
   ============================================
   Ein Suchtreffer fuehrt seit 07.08.2026 auf den Abschnitt oder die Karte, in
   der das Wort steht (/downloads/#karte-vor-dem-ersten-zeichen). Damit man beim
   Ankommen sieht, WELCHE der 45 Karten gemeint war, bekommt sie einen Rahmen.

   Bewusst nur ein Rahmen und keine Einfaerbung: eine Hintergrundfarbe muesste
   in allen fuenf Kontrastmodi gegen den Text geprueft werden - der Rahmen liegt
   ausserhalb und kann keinen Text unlesbar machen. Er bleibt stehen, bis das
   naechste Ziel angesprungen wird; wer die Seite ueberfliegt, findet die
   Fundstelle so auch nach dem Scrollen wieder. */
/* Einzeleigenschaften statt der Kurzschreibweise `outline: 3px solid var(…)`:
   Eine Kurzschreibweise mit var() wird erst beim Berechnen aufgeloest, und in
   der Messung blieb outline-color dabei auf dem Anfangswert (currentColor) -
   der Rahmen war dann textfarben statt in der Akzentfarbe. Einzeln gesetzt
   kann das nicht passieren. */
.ist-sprungziel {
  outline-width: 3px;
  outline-style: solid;
  outline-color: var(--c-accent);
  outline-offset: 3px;
  border-radius: var(--radius-md);
  /* .card traegt `transition: all` - die Rahmenfarbe wuerde also von der
     Textfarbe zur Akzentfarbe ueberblenden. Laeuft die Ueberblendung nicht
     (Seite im Hintergrund, gedrosselte Animationen - hier gemessen), bleibt sie
     auf dem Startwert stehen und der Treffer-Rahmen ist textfarben. Der Hinweis
     soll sofort und immer gleich aussehen, nicht sanft erscheinen. */
  transition: none;
}
/* Beim Ankommen setzt js/main.js den Fokus auf die Karte (fuer Tastatur und
   Vorlesen). NUR :focus-visible umfaerben, nicht :focus - sonst gewinnt der
   Fokusring sofort und der Rahmen ist immer die Fokusfarbe statt der
   Akzentfarbe. Wer spaeter mit der Tastatur herkommt, sieht den Fokusring. */
.ist-sprungziel:focus-visible { outline-color: var(--c-focus); }

/* Kurz aufmerksam machen - ueber den ABSTAND, nicht ueber die Farbe.
   Erster Versuch war ein Blinken von transparent nach Akzentfarbe; sobald die
   Animation nicht laeuft (im Test eingefroren, aber genauso denkbar bei
   gedrosselten Hintergrund-Tabs) bleibt der Rahmen auf dem Wert des ersten
   Bildes stehen - und der war transparent. Der Hinweis waere also genau dann
   weg, wenn er gebraucht wird. Beim Abstand ist der Anfangswert der Ruhewert:
   faellt die Animation aus, steht der Rahmen einfach da. */
@media (prefers-reduced-motion: no-preference) {
  .ist-sprungziel { animation: sprungziel-melden 1.1s ease-out 2; }
  @keyframes sprungziel-melden {
    0%, 100% { outline-offset: 3px; }
    50% { outline-offset: 10px; }
  }
}


/* --- Vorlese-Knopf der Kacheln: Platz in der Ueberschrift freihalten ---------
   js/main.js haengt an JEDE .card einen runden .card__tts (44x44, absolut,
   top/right 12px). Die Kachel hat 32px Innenabstand - der Knopf reicht damit
   24px in den Textbereich der Ueberschrift hinein. Bei kurzen Produktnamen
   faellt das nie auf (/apps/: 0 von 19 Kacheln), bei langen Aufsatztiteln lag
   der Knopf auf dem Text (/downloads/: 27 von 56, gemessen 07.08.2026 bei
   243px Kachelbreite). :has() bindet die Regel an den Knopf - der kommt erst
   zur Laufzeit dazu, :has() wertet live aus. Kosten: 17 zusaetzliche
   Titelzeilen ueber 56 Kacheln, rund 1,3% mehr Abschnittshoehe. */
.card:has(.card__tts) h3 { padding-right: var(--s-8); }


/* --- Gegenueberstellung "So nicht - so besser" -------------------------------
   Die Kaesten standen in repeat(auto-fit,minmax(280px,1fr)): auf breiten
   Schirmen ergab das DREI Spalten, damit rutschte jedes Paar auseinander
   ("So nicht" oben rechts, das zugehoerige "Besser" eine Zeile tiefer links).
   Fest zwei Spalten heisst: eine Zeile = ein Paar, links das Problem, rechts
   die Loesung - und weil Grid-Zellen sich in der Zeile auf gleiche Hoehe
   ziehen, stehen die beiden Ueberschriften immer nebeneinander.
   minmax(0,1fr) statt 1fr, damit ein langes Wort die Spalte nicht aufblaest
   (die Mindestbreite ist ansteckend, siehe .form-row). Unter 760px passen
   zwei Textspalten nicht mehr lesbar nebeneinander - dort untereinander,
   die Reihenfolge im Quelltext ist bereits nicht/besser/nicht/besser. */
.paar-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-4); }
.paar-grid > * { min-width: 0; }
@media (max-width: 760px) { .paar-grid { grid-template-columns: 1fr; } }