/* 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}
*,*::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;gap:var(--s-2);flex-wrap:wrap}
.a11y-toolbar__group{display:flex;align-items:center;gap:var(--s-2)}
.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}
.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}
/* 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 auf kleinen Schirmen hinter einem Auslöser einklappen (spart ~1/3 Höhe im Hochformat) */
.a11y-toolbar__toggle{display:none}
@media(max-width:768px){
  .a11y-toolbar__inner{flex-wrap:wrap}
  .a11y-toolbar__toggle{display:flex;align-items:center;gap:var(--s-1);margin-left:auto;min-height:44px;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.8rem;cursor:pointer}
  .a11y-toolbar__chev{transition:transform var(--duration) var(--ease-out)}
  .a11y-toolbar.is-open .a11y-toolbar__chev{transform:rotate(180deg)}
  /* Eingeklappt: nur Vorlesen + Stopp + Auslöser sichtbar; Schrift/Kontrast/Stimme/Einfache Sprache verborgen */
  .a11y-toolbar:not(.is-open) .a11y-toolbar__inner>*:not(.tts-controls):not(.a11y-toolbar__toggle){display:none}
  .a11y-toolbar:not(.is-open) .tts-controls>*:not(#btn-read-page):not(#btn-tts-stop){display:none}
  /* 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}

/* 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: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(26,58,106,0.75) 0%,rgba(75,105,140,0.6) 50%,rgba(45,65,90,0.7) 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:#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:rgba(245,245,247,0.8);line-height:1.55;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}
.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(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:'←'}

@media(max-width:1080px){
  .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}
  .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);
}

/* 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);
  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(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);
  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); }

/* --- 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 --- */
.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(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); }
.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}}
@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)}