/* ============================================================================
   GETEILTE ENGINE — NICHT HIER BEARBEITEN.
   Kanonische Quelle: _shared_web/css/engine.css
   Aenderungen dort vornehmen und `python _shared_web/sync_web.py` laufen lassen,
   sonst gehen sie beim naechsten Sync verloren.
   ========================================================================== */
/* ============================================================================
   Engine – Struktur, Layout, Komponenten

   GETEILT von den barrierefreien Sites. Enthaelt BEWUSST KEINE Farbwerte:
   alle Farben kommen ueber var(--c-*) aus dem Theme des Projekts
   (css/theme.css mit :root + den 5 Kontrastmodi + eigenen Schriften).

   Wer hier eine Farbe hart eintraegt, bricht die Kontrastmodi.
   ========================================================================== */

/* ============================================================================
   Engine – Struktur, Layout, Komponenten

   GETEILT von den barrierefreien Sites. Enthaelt BEWUSST KEINE Farbwerte:
   alle Farben kommen ueber var(--c-*) aus dem Theme des Projekts
   (css/theme.css mit :root + den 5 Kontrastmodi + eigenen Schriften).

   Wer hier eine Farbe hart eintraegt, bricht die Kontrastmodi.
   ========================================================================== */

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

[data-fontsize="large"]{--f-scale:1.2}[data-fontsize="xlarge"]{--f-scale:1.4}
.easy-language-content{display:none}[data-language="easy"] .easy-language-content{display:block}[data-language="easy"] .standard-content{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}
p{margin-bottom:var(--s-4);max-width:68ch;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 (25 Sprachen) */
.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:300px;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-search{width:100%;padding:var(--s-2) var(--s-3);margin-bottom: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-size:0.85rem;min-height:42px}
.lang-grid{display:grid;grid-template-columns:1fr 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}
[dir="rtl"] .lang-panel{right:auto;left:0}
@media (max-width:640px){.lang-toggle__name{display:none}.lang-grid{grid-template-columns:1fr}.lang-panel{width:240px}}
/* 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-heading-words{min-width:0}
.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): 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:60px}
.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;gap:var(--s-1);align-items:center;justify-content:center;background:transparent;border:1.5px solid var(--c-border-strong);color:var(--c-text);cursor:pointer;padding:var(--s-1) var(--s-3);min-height:44px;border-radius:var(--radius-sm);transition:background var(--duration),border-color var(--duration)}.nav-toggle:hover{background:var(--c-bg-secondary);border-color:var(--c-accent)}.nav-toggle__icon{font-size:1.35rem;line-height:1}.nav-toggle__label{font-family:var(--f-body);font-weight:700;font-size:0.95rem;letter-spacing:-0.01em}
.main-nav{display:flex;align-items:center}
.nav-list{display:flex;list-style:none;gap:0;align-items:center}.nav-item{position:relative}
.nav-link{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:var(--s-1) var(--s-2);min-height:54px;color:var(--c-text);text-decoration:none;text-align:center;transition:color var(--duration) var(--ease-out),background var(--duration);border-radius:var(--radius-md)}
.nav-link svg{width:23px;height:23px;flex-shrink:0}
.nav-link__cap{display:flex;align-items:center;justify-content:center;gap:2px;white-space:nowrap;line-height:1.1}
.nav-link__text{font-size:0.72rem;font-weight:600;letter-spacing:-0.01em;white-space:nowrap}
.nav-link:hover{color:var(--c-accent);background:var(--c-bg-secondary)}.nav-link[aria-current="page"]{color:var(--c-accent);font-weight:700}
/* Vorlesen-Schnellzugriff im Kopf entfernt: die sticky Barriere-Toolbar bietet Vorlesen dauerhaft sichtbar (kein Doppel-Button, mehr Platz fuers Menue) */
.dropdown-arrow{font-size:0.5rem;opacity:0.5;flex-shrink:0;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}

/* Mega-Men\00FC (mehrspaltig): Apps & Tools — Header-Gruppen als zusammenh\00E4ngende Spalten */
.nav-dropdown--mega{width:500px;max-width:94vw;padding:var(--s-3);columns:2;column-gap:var(--s-6)}
.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}
@media(max-width:1080px){
  .nav-dropdown--mega{columns:1;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__col{margin-bottom:var(--s-2)}
}

.hero{background:var(--gradient-hero);color:#fff;padding:var(--s-24) 0 var(--s-20);text-align:center;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:var(--c-hero-overlay);z-index:0}
.hero::after{content:'';position:absolute;bottom:-40%;left:-10%;width:600px;height:600px;background:var(--c-hero-glow);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:#f5f5f7;font-size:clamp(2.8rem,6vw,5rem);margin-bottom:var(--s-6);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:#f5f5f7;line-height:1.55;animation:fade-up 0.8s var(--ease-out) 0.15s both}
/* Fettdruck im Hero hell halten (globale strong-Regel = dunkel waere auf dem Verlauf unlesbar) */
.hero strong,.page-hero:not(.page-hero--light) strong{color:#fff}
@keyframes fade-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

.page-hero{background:var(--gradient-hero);color:#fff;padding:var(--s-20) 0 var(--s-16);text-align:center;position:relative;overflow:hidden}
.page-hero::before{content:'';position:absolute;inset:0;background:var(--c-page-hero-overlay);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:#f5f5f7;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:var(--c-accent);letter-spacing:-0.01em;margin:0 auto;text-align:center;max-width:600px}
.page-hero--light .page-hero__subtitle{color:var(--c-accent)}
/* Hero mit thematischem Aquarell rechts (zweispaltig; auf Mobil gestapelt) */
.page-hero.page-hero--media{padding:var(--s-10) 0 var(--s-8)}
.page-hero--media .page-hero__inner{display:grid;grid-template-columns:1.4fr minmax(0,240px);gap:var(--s-8);align-items:center;text-align:left;max-width:var(--max-w)}
.page-hero--media .page-hero__text h1{margin:0 0 var(--s-2)}
.page-hero--media .page-hero__text p{max-width:none;margin:0}
.page-hero--media .page-hero__media{display:flex;justify-content:center}
.page-hero--media .hero-media-img{width:100%;max-width:220px;height:auto;border-radius:var(--radius-lg);box-shadow:0 12px 32px rgba(40,15,25,.32);display:block}
@media(max-width:760px){
  .page-hero.page-hero--media{padding:var(--s-8) 0 var(--s-6)}
  .page-hero--media .page-hero__inner{grid-template-columns:1fr;text-align:center;gap:var(--s-5)}
  .page-hero--media .hero-media-img{max-width:190px;margin:0 auto}
}
/* Abschnitt mit kleinerem Aquarell rechts (etwas kleiner als das Hero) */
.section--media .section__inner{display:grid;grid-template-columns:1fr minmax(0,190px);gap:var(--s-8);align-items:start}
.section--media .section__body{min-width:0}
.section--media .section__aside{display:flex;justify-content:center;align-items:flex-start}
.section--media .section-media-img{width:100%;max-width:170px;height:auto;border-radius:var(--radius-lg);box-shadow:0 10px 26px rgba(40,15,25,.18);display:block}
@media(max-width:760px){
  .section--media .section__inner{grid-template-columns:1fr}
  .section--media .section__aside{display:none}
}
.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);display:inline-block;min-height:24px;line-height:24px}.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(var(--c-accent-rgb),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)}
/* Primaerer CTA auf dunklem Hero-Verlauf: helle Pille, in allen Kontrastmodi lesbar (accent-Schrift waere in Dunkel-/Blaulicht-Modus zu hell) */
/* Farbe kommt aus dem Theme: heller Button auf dunklem Hero */
.hero .btn--primary,.page-hero .btn--primary{background:#fff;color:var(--c-on-hero-btn)}
.hero .btn--primary:hover,.page-hero .btn--primary:hover{background:#fff;color:var(--c-on-hero-btn-hover);box-shadow:0 6px 24px rgba(0,0,0,0.28)}

.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(--c-accent);color:var(--c-on-accent,#fff);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}
.card:has(.card__link){cursor:pointer}
.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)}

.content-page{max-width:780px;margin:0 auto;padding:var(--s-12) var(--s-6)}
.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}
.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(var(--c-accent-rgb),0.45)}50%{box-shadow:0 0 0 7px rgba(var(--c-accent-rgb),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:var(--c-accent);border-color:var(--c-accent)}
[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:var(--c-accent);color:var(--c-on-accent);border-color:var(--c-accent)}
/* Besuchte Text-Links stehen im THEME, nicht hier: var() greift bei :visited nicht
   (Chromium loest Custom-Properties im :visited-Kontext aus Datenschutz auf die
   :root-Werte auf). Es braucht literale Modusfarben -> css/theme.css. */

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(var(--c-accent-rgb),0.18);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 h3,.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(var(--c-accent-rgb),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:'←'}

/* Hauptnavigation: ab ~920px als einzeilige Symbol-ueber-Text-Leiste sichtbar; darunter zum "Menue"-Knopf einklappen */
@media(max-width:919px){
  .nav-toggle{display:flex}.nav-list{display:none;position:absolute;top:60px;left:0;right:0;background:var(--c-bg-primary);flex-direction:column;align-items:stretch;padding:var(--s-3);border-bottom:0.5px solid var(--c-border);box-shadow:0 12px 30px var(--c-shadow-md)}.nav-list.open{display:flex}
  .nav-list .nav-link{flex-direction:row;justify-content:flex-start;gap:var(--s-3);min-height:48px;padding:var(--s-3) var(--s-4);text-align:left}
  .nav-list .nav-link__cap{flex:1;justify-content:space-between;gap:var(--s-3)}
  .nav-list .nav-link__text{font-size:1rem;white-space:normal}
  .nav-list .dropdown-arrow{font-size:0.7rem}
  .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 */
html { scroll-padding-top: 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);
}

/* Logo in header */
.site-logo__img {
  height: 46px;
  width: auto;
  transition: opacity var(--duration);
}
@media (min-width: 920px) {
  /* Logo + Menue als zentrierte Gruppe (wie die Toolbar) statt weit auseinander */
  .site-header__inner { height: 68px; justify-content: center; gap: clamp(2.5rem, 8vw, 7rem); }
  .site-logo { 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);
}

/* Logo-Aufbereitung je Kontrastmodus. Der Filter ist Marken-Sache und kommt
   aus theme.css: eine einfarbige Wortmarke braucht invert(), ein farbiges
   Logo darf nicht angefasst werden. Default = nicht anfassen. */
[data-contrast="dark"] .site-logo__img {
  filter: var(--logo-filter-dark, none);
}
[data-contrast="high"] .site-logo__img {
  filter: var(--logo-filter-high, none);
}

/* --- Dokument-Karte (PDF mit Vorschau) -------------------------------
   Ersetzt den nackten Download-Button. Zwei getrennte Wege, weil "PDF" fuer
   verschiedene Leute Verschiedenes heisst: ansehen (ganze Karte) oder
   speichern (eigener Knopf rechts).
   Die Vorschau zeigt die erste Seite - reine Orientierung ("Brief oder
   Tabelle?"), deshalb im HTML alt="". Die Information steht als Text daneben,
   nie nur im Bild (WCAG 1.4.5).
   Vorschaubilder + Seitenzahl/Groesse erzeugt scripts/gen_pdf_previews.py. */
.doc-card {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: var(--s-4);
  background: var(--c-bg-primary);
  border: 0.5px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--s-3);
  transition: border-color var(--duration) var(--ease-out),
              box-shadow var(--duration) var(--ease-out),
              transform var(--duration) var(--ease-out);
}
.doc-card:hover {
  border-color: var(--c-accent);
  box-shadow: 0 6px 22px var(--c-shadow);
  transform: translateY(-1px);
}
/* Fokusring um die GANZE Karte, nicht nur um den Titeltext. */
.doc-card:focus-within {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
}
.doc-card__thumb {
  flex: 0 0 auto;
  width: 84px;
  height: 118px;
  object-fit: cover;
  object-position: top center;   /* Kopf des Dokuments zeigen, nicht die Mitte */
  border-radius: var(--radius-md);
  border: 0.5px solid var(--c-border);
  background: #fff;              /* Papier ist weiss - auch im Dunkelmodus */
}
.doc-card__body {
  flex: 1 1 auto;
  min-width: 0;                  /* sonst sprengen lange Titel die Karte */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-1);
}
.doc-card__link {
  font-weight: 600;
  color: var(--c-text);
  text-decoration: none;
  line-height: 1.35;
}
/* Stretch-Link: die ganze Karte oeffnet das PDF. */
.doc-card__link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.doc-card:hover .doc-card__link { color: var(--c-accent); }
.doc-card__link:focus-visible { outline: none; }   /* Ring zeichnet :focus-within */
/* Kleiner Hinweis am Titel, dass sich ein neues Tab oeffnet (WCAG 3.2.5).
   Sichtbar nur als Icon - der Satz stuende sonst auf jeder Karte und waere bei
   fuenf Dokumenten mehr Laerm als Hilfe. Fuer Screenreader steht er als
   .sr-only im Link. */
.doc-card__ext { margin-left: 0.35em; vertical-align: -1px; opacity: 0.55; }
.doc-card:hover .doc-card__ext { opacity: 1; }
.doc-card__meta {
  margin: 0;
  font-size: 0.8rem;
  color: var(--c-text-secondary);
}
/* Muss UEBER dem Stretch-Link liegen, sonst ist er nicht klickbar. */
.doc-card__dl {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;              /* WCAG 2.5.5 Zielgroesse */
  padding: 0 var(--s-4);
  border: 1.5px solid var(--c-border-strong);
  border-radius: 980px;
  color: var(--c-text);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}
.doc-card__dl:hover { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.doc-card__dl svg { flex: 0 0 auto; }

@media (max-width: 560px) {
  .doc-card { flex-wrap: wrap; }
  .doc-card__thumb { width: 60px; height: 84px; }
  .doc-card__dl { width: 100%; justify-content: center; margin-top: var(--s-2); }
  /* Der Knopf liegt jetzt unter dem Titel -> Stretch-Link darf ihn nicht ueberdecken. */
}

/* --- 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(var(--c-accent-rgb),0.3); }
  50% { box-shadow: 0 0 0 6px rgba(var(--c-accent-rgb),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(168, 52, 90, 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="bluefilter"] .card__img { filter: sepia(0.4) brightness(0.9); }

/* === Themenfarben (warm & freundlich; greifen nur im Normal-/Hell-Modus; Kontrastmodi haben Vorrang) === */

/* Farb-Swatches in der Barriere-Toolbar */
.a11y-swatch{padding:0;border-radius:50%;border:2px solid var(--c-border-strong);overflow:hidden}
.a11y-swatch:hover{transform:scale(1.1)}
.a11y-swatch[aria-pressed="true"]{border-color:var(--c-text);box-shadow:inset 0 0 0 2px var(--c-bg-primary)}

/* 2-Klick-Video-Einbettung (DSGVO) */
/* Vor dem Laden gibt der DSGVO-Kasten die Hoehe vor (waechst mit Text -> Knopf wird
   nie abgeschnitten); nach dem Laden ist die Einbettung 16:9 fuer das iframe. */
.video-embed{max-width:760px;margin:var(--s-5) auto 0;position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--c-bg-tertiary)}
.video-embed.is-loaded{aspect-ratio:16/9}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1}
.video-embed__gate{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--s-6);cursor:pointer;min-height:clamp(200px,42vw,400px)}
.video-embed__gate p{max-width:36ch;margin-left:auto;margin-right:auto}
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:var(--s-5);margin-top:var(--s-5)}
.video-grid .video-embed{margin:0}

/* Glossar */
.glossar h3{margin-top:var(--s-8);padding-top:var(--s-5);border-top:1px solid var(--c-border);color:var(--c-accent);clear:both}
.glossar h3:first-child{margin-top:0;padding-top:0;border-top:none}
.glossar-img{float:right;width:120px;height:auto;margin:0 0 var(--s-3) var(--s-5);border-radius:var(--radius-md)}
@media(max-width:520px){.glossar-img{width:88px;margin-left:var(--s-3)}}

/* Druck-Ansicht: nur Inhalt, ohne Bedienelemente */
@media print {
  .a11y-toolbar, .site-header, .site-footer, #site-cookie-banner, .skip-link, .breadcrumb, .read-section-btn, .video-embed, .btn { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .hero, .page-hero { background: none !important; color: #000 !important; padding: 0 0 0.5rem !important; }
  .hero h1, .page-hero h1, .hero p, .page-hero p { color: #000 !important; }
  .section, .section--alt { background: none !important; padding: 0.4rem 0 !important; }
  a { color: #000 !important; }
  .komm-karte { border: 2px solid #000 !important; box-shadow: none !important; }
}

/* Körper-ABC Übersicht A–Z */
.abc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--s-3);margin-top:var(--s-5)}
.abc-item{display:flex;align-items:center;gap:var(--s-3);background:var(--c-bg-primary);border:0.5px solid var(--c-border);border-radius:var(--radius-md);padding:var(--s-3) var(--s-4)}
.abc-letter{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 6px;border-radius:var(--radius-sm);background:var(--c-bg-secondary);color:var(--c-accent);font-family:var(--f-display);font-weight:700;font-size:1.2rem}
.abc-item .abc-desc{font-size:0.92rem;color:var(--c-text-secondary);line-height:1.4}
.abc-detail{border:0.5px solid var(--c-border);border-radius:var(--radius-md);background:var(--c-bg-primary);margin-bottom:var(--s-2);padding:0 var(--s-4)}
.abc-detail summary{cursor:pointer;padding:var(--s-3) 0;font-size:0.95rem;color:var(--c-text)}
.abc-detail summary strong{color:var(--c-accent);font-family:var(--f-display);font-size:1.1rem;margin-right:var(--s-2)}
.abc-detail .video-embed{margin:0 0 var(--s-4)}
.video-embed--sm{max-width:480px;margin-left:0;margin-right:0}
[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; }

/* --- TTS Buttons: More Prominent --- */
#btn-read-page {
  background: var(--c-accent);
  color: #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(168, 52, 90, 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(168, 52, 90, 0.45);
}
#btn-read-page[aria-pressed="true"],
#btn-read-page.tts-active {
  background: var(--c-orange, #ff9500);
  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(var(--c-accent-rgb),0.3); }
  50% { box-shadow: 0 2px 20px rgba(var(--c-accent-rgb),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); }

/* --- 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 svg{width:22px;height:22px;display:block}
.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}
/* Auf Touch/schmal sichtbar als schmale VERTIKALE Spalte unten rechts
   (untereinander; nur 40px breit -> kein horizontaler Ueberlauf). */
@media (pointer: coarse), (max-width: 800px){
  .scroll-nav{top:auto;bottom:calc(env(safe-area-inset-bottom, 0px) + var(--s-3));right:var(--s-2);transform:none;flex-direction:column;gap:var(--s-1);opacity:0.92}
  .scroll-nav__btn{width:40px;height:40px;font-size:1rem}
  .scroll-nav__btn svg{width:19px;height:19px}
  .scroll-nav__sep{display:none}
}
@media print{.scroll-nav{display:none}}

/* --- Search --- */
.nav-item--search { margin-left: auto; }
.nav-search-toggle {
  background: none; border: none; color: var(--c-text-secondary); cursor: pointer;
  padding: var(--s-2); min-height: 44px; min-width: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); transition: background var(--duration);
}
.nav-search-toggle:hover { background: var(--c-bg-secondary); }
.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(var(--c-accent-rgb),0.18); 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); }
.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); }

/* --- 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}}

/* ===== WCAG-Kontrast-Fixes: Dark/Bluefilter haben hellen Accent -> dunkler Text auf Accent-Flaechen ===== */
:root{--c-on-accent:#fff}

[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)}

/* ===== Aktuelles / News ===== */
.news-featured{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:stretch;background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--radius-xl);overflow:hidden;box-shadow:0 12px 34px var(--c-shadow-lg)}
.news-featured__media{min-height:280px;position:relative}
.news-featured__media img{width:100%;height:100%;object-fit:cover;display:block}
.news-featured__body{padding:var(--s-6)}
.news-kicker{display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-display);font-weight:700;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;color:var(--c-on-accent);background:var(--c-accent);padding:.34em .85em;border-radius:999px;margin:0 0 var(--s-3)}
.news-featured__body h3{font-size:1.5rem;line-height:1.25;margin:0 0 var(--s-3);color:var(--c-text)}
.news-featured__body .btn{margin-top:var(--s-4)}
.news-list{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-5);margin-top:var(--s-6)}
.news-item{display:flex;gap:var(--s-4);align-items:flex-start;background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--radius-lg);padding:var(--s-4) var(--s-5)}
.news-item .d{font-family:var(--f-display);font-weight:700;font-size:.8rem;color:var(--c-accent);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;padding-top:.15em;line-height:1.3}
.news-item h3,.news-item h4{margin:.1em 0 .3em;font-size:1.05rem;color:var(--c-text)}
.news-item p{margin:0;font-size:.95rem;color:var(--c-text-secondary)}
.news-entry{scroll-margin-top:100px}
.news-entry + .news-entry{border-top:1px solid var(--c-border);margin-top:var(--s-8);padding-top:var(--s-8)}
@media(max-width:760px){.news-featured{grid-template-columns:1fr}.news-featured__media{min-height:220px}.news-list{grid-template-columns:1fr}}
/* Logo-Wuerfel (kommunikation plus + AssistUK) */
.logo-cube-wrap{display:flex;justify-content:center;margin:var(--s-6) 0 var(--s-5);perspective:900px}
.logo-cube{width:150px;height:150px;position:relative;transform-style:preserve-3d;animation:logo-cube-spin 9s linear infinite}
.logo-cube__face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--radius-md);box-shadow:0 6px 18px var(--c-shadow);padding:16px;backface-visibility:hidden}
.logo-cube__face img{max-width:100%;max-height:46px;width:auto;height:auto;object-fit:contain}
.logo-cube__face--front{transform:rotateY(0deg) translateZ(75px)}
.logo-cube__face--right{transform:rotateY(90deg) translateZ(75px)}
.logo-cube__face--back{transform:rotateY(180deg) translateZ(75px)}
.logo-cube__face--left{transform:rotateY(-90deg) translateZ(75px)}
.logo-cube__face--top{transform:rotateX(90deg) translateZ(75px)}
.logo-cube__face--bottom{transform:rotateX(-90deg) translateZ(75px)}
@keyframes logo-cube-spin{from{transform:rotateX(-14deg) rotateY(0)}to{transform:rotateX(-14deg) rotateY(360deg)}}
@media(prefers-reduced-motion:reduce){.logo-cube{animation:none;transform:rotateX(-14deg) rotateY(-28deg)}}
/* Suche (Pagefind) */
.site-search-btn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;margin-left:var(--s-3);border:1px solid var(--c-border);border-radius:50%;background:var(--c-bg);color:var(--c-text);cursor:pointer;transition:all var(--duration) var(--ease-out);flex:0 0 auto}
.site-search-btn:hover{background:var(--c-accent);color:var(--c-on-accent);border-color:var(--c-accent)}
.search-overlay{position:fixed;inset:0;z-index:3000;background:rgba(20,15,12,.55);display:flex;align-items:flex-start;justify-content:center;padding:8vh 16px 16px;overflow-y:auto}
.search-overlay[hidden]{display:none}
.search-overlay__panel{position:relative;width:100%;max-width:640px;background:var(--c-bg);border-radius:var(--radius-lg);box-shadow:0 20px 60px rgba(0,0,0,.35);padding:26px 22px 22px}
.search-overlay__close{position:absolute;top:8px;right:10px;border:none;background:none;font-size:1.9rem;line-height:1;color:var(--c-text-secondary);cursor:pointer;width:40px;height:40px;border-radius:50%}
.search-overlay__close:hover{background:var(--c-bg-secondary);color:var(--c-text)}
#search{--pagefind-ui-primary:var(--c-accent);--pagefind-ui-text:var(--c-text);--pagefind-ui-background:var(--c-bg);--pagefind-ui-border:var(--c-border);--pagefind-ui-tag:var(--c-bg-secondary);--pagefind-ui-font:var(--f-body);--pagefind-ui-border-radius:var(--radius-md)}

/* Inhaltsverzeichnis langer Seiten + Anker-Scrollabstand */
h2[id],h3[id],section[id],article[id]{scroll-margin-top:96px}
.page-toc{max-width:960px;margin:var(--s-6) auto 0;padding:0 var(--s-6)}
.page-toc__box{background:var(--c-bg-secondary);border:1px solid var(--c-border);border-radius:var(--radius-lg);padding:var(--s-4) var(--s-5)}
.page-toc__title{font-weight:700;margin:0 0 var(--s-2);color:var(--c-text)}
.page-toc__list{margin:0;padding-left:1.3em;columns:2;column-gap:var(--s-8)}
.page-toc__list li{margin:0 0 var(--s-1);break-inside:avoid}
@media(max-width:640px){.page-toc__list{columns:1}}

/* Einfache Sprache: flaches Menue - Dropdowns aus, Klick fuehrt direkt zur Bereichsseite */
[data-language="easy"] .nav-dropdown{display:none !important}
[data-language="easy"] .dropdown-arrow{display:none !important}
/* Easy-Menuenamen: Inline-Umschaltung (nicht die Block-Regeln der Inhaltsbloecke nutzen) */
.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}

/* ICF-Simulator (behinderung/): Umwelt schalten -> Behinderung schrumpft */
.icf-sim{margin-top:var(--s-6);background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--radius-lg);padding:var(--s-5);box-shadow:0 8px 26px var(--c-shadow-md)}
.icf-sim__controls{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-3)}
@media(max-width:640px){.icf-sim__controls{grid-template-columns:1fr}}
.icf-sim__toggle{display:flex;align-items:center;gap:var(--s-3);min-height:56px;padding:var(--s-3) var(--s-4);border:2px solid var(--c-border-strong);border-radius:var(--radius-md);background:var(--c-bg-secondary);color:var(--c-text);font-family:var(--f-body);font-size:1rem;font-weight:600;cursor:pointer;text-align:left;transition:all var(--duration) var(--ease-out)}
.icf-sim__toggle:hover{border-color:var(--c-accent)}
.icf-sim__toggle[aria-pressed="true"]{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-on-accent)}
.icf-sim__state{display:inline-flex;flex:0 0 auto}
.icf-sim__toggle .ic-ok{display:none}
.icf-sim__toggle[aria-pressed="true"] .ic-ok{display:block}
.icf-sim__toggle[aria-pressed="true"] .ic-x{display:none}
.icf-sim__meter{margin-top:var(--s-5)}
.icf-sim__meter-label{font-weight:700;margin:0 0 var(--s-2)}
.icf-sim__bar{height:26px;background:var(--c-bg-tertiary);border-radius:999px;overflow:hidden;border:1px solid var(--c-border)}
.icf-sim__bar-fill{height:100%;background:linear-gradient(90deg,var(--c-accent-2),var(--c-accent));border-radius:999px;transition:width .5s var(--ease-out)}
.icf-sim__verdict{margin-top:var(--s-4);padding:var(--s-3) var(--s-4);background:var(--c-bg-secondary);border-left:5px solid var(--c-accent);border-radius:var(--radius-md)}
.icf-sim__verdict p{margin:0}
.icf-sim h3{margin-top:var(--s-5)}
.icf-sim__list{list-style:none;padding:0;margin:var(--s-3) 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-2) var(--s-5)}
@media(max-width:760px){.icf-sim__list{grid-template-columns:1fr}}
.icf-sim__list li{position:relative;padding-left:30px;opacity:.45;transition:opacity var(--duration)}
.icf-sim__list li::before{content:"";position:absolute;left:0;top:.18em;width:20px;height:20px;background-repeat:no-repeat;background-size:20px 20px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23948a82' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}
.icf-sim__list li.icf-on{opacity:1}
.icf-sim__list li.icf-on::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e8b78' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E")}