/* ============================================================================
   Frauenberatung Hannover — Relaunch
   Trauma-informed, WCAG 2.2 AA (AAA text), calm & warm.
   Tokens from CMO blueprint. All colours contrast-verified.
   ========================================================================== */

/* ── Font: self-hosted Instrument Sans (variable, latin). No CDN → no visit leak. */
@font-face{
  font-family:"Instrument Sans";
  src:url("../fonts/instrument-sans.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
  /* latin + latin-1 supplement covers German ä ö ü ß */
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212;
}

/* ─────────────────────────────────────────────────────────────────────────
   1. DESIGN TOKENS
   ──────────────────────────────────────────────────────────────────────── */
:root{
  /* Colour — ratios computed WCAG 2.2 */
  --color-primary:      #026555; /* brand teal · button bg · white label 7.01:1 */
  --color-primary-dark: #02564A; /* small text + links on white · 8.63:1 (AAA) */
  --color-accent:       #00855A; /* fills/icons/large text/hover ONLY */
  --color-accent-text:  #067A54; /* accent as small text (eyebrow) · 5.36:1 */
  --color-ink:          #333333; /* body · 12.63:1 (AAA) */
  --color-muted:        #5A6663; /* meta · 5.97:1 · ≥16px only */
  --color-surface:      #ffffff;
  --color-surface-soft: #FBF7F2; /* warm cream band */
  --color-surface-teal: #F1F6F3; /* faint teal wash */
  --color-border:       #E4DDD3; /* warm hairline — non-text UI */
  --color-border-teal:  #D3E3DC;
  --color-warm-tint:    #F3D9C4; /* soft warm fill */
  --color-warm-strong:  #A8582E; /* warm as text · 5.12:1 */
  --color-success:      #067A54;
  --color-danger:       #B42318; /* errors only · 6.6:1 */

  --color-exit-bg:      #8A2B24; /* NOTAUSGANG · white 8.6:1 */
  --color-exit-bg-hover:#75211B;

  --color-focus-core:   #00352C;
  --color-focus-halo:   #ffffff;

  --color-dark-bg:      #0E1B17;
  --color-dark-bg-2:    #062C26;
  --color-dark-ink:     #E8EDE9;
  --color-dark-ink-muted:#A9B8B1;
  --color-dark-link:    #6FD0B4;

  /* Typography */
  --font-body:"Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-display: clamp(2.5rem, 1.6rem + 4.0vw, 4.25rem);
  --fs-h1:      clamp(2.0rem, 1.4rem + 2.7vw, 3.0rem);
  --fs-h2:      clamp(1.55rem, 1.2rem + 1.6vw, 2.15rem);
  --fs-h3:      clamp(1.2rem, 1.05rem + 0.7vw, 1.45rem);
  --fs-lead:    clamp(1.125rem, 1.03rem + 0.42vw, 1.3rem);
  --fs-body:    clamp(1rem, 0.97rem + 0.13vw, 1.0625rem);
  --fs-small:   clamp(0.85rem, 0.83rem + 0.08vw, 0.9rem);
  --fs-label:   0.78rem;
  --lh-body:1.65; --lh-heading:1.2;

  /* Spacing (4px rhythm) */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem;
  --s-6:2rem;  --s-7:3rem;  --s-8:4rem;   --s-9:6rem; --s-10:8rem;
  --container:72rem; --container-narrow:42rem;

  --r-card:20px; --r-btn:12px; --r-input:10px; --r-pill:999px;

  --shadow-soft:     0 1px 2px rgba(51,51,51,.04), 0 4px 16px rgba(51,51,51,.06);
  --shadow-elevated: 0 2px 6px rgba(51,51,51,.06), 0 18px 40px rgba(51,51,51,.10);
  --shadow-teal:     0 12px 32px rgba(2,101,85,.16);

  --dur-fast:140ms; --dur-base:240ms; --dur-slow:420ms;
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-soft:cubic-bezier(.4,0,.2,1);

  --header-h:64px; --safe-top:env(safe-area-inset-top, 0px);
}

/* ─────────────────────────────────────────────────────────────────────────
   2. RESET / BASE
   ──────────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}
html{font-size:100%; -webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--color-ink);
  background:var(--color-surface);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block;}
a{color:var(--color-primary-dark); text-underline-offset:.16em; text-decoration-thickness:.08em;}
a:hover{color:var(--color-accent);}
h1,h2,h3,h4{margin:0 0 var(--s-4); line-height:var(--lh-heading); font-weight:600; letter-spacing:-.015em; hyphens:none; text-wrap:balance;}
p{margin:0 0 var(--s-4); max-width:65ch; text-wrap:pretty;}
/* keine automatische Silbentrennung / keine blinden Trennstriche */
html,body,p,li,h1,h2,h3,h4,span,a,div,blockquote,summary,label{hyphens:none; -webkit-hyphens:none;}
ul,ol{margin:0 0 var(--s-4);}
:target,[id]{scroll-margin-top:calc(var(--header-h) + 16px);}
strong,b{font-weight:600;}
.tnum{font-variant-numeric:tabular-nums; letter-spacing:.01em;}

/* Focus ring — two-colour, visible on white, surface AND teal/accent */
:focus-visible{
  outline:3px solid var(--color-focus-core);
  outline-offset:2px;
  box-shadow:0 0 0 5px var(--color-focus-halo);
  border-radius:4px;
}
:focus:not(:focus-visible){outline:none;}

/* ─────────────────────────────────────────────────────────────────────────
   3. A11Y UTILITIES
   ──────────────────────────────────────────────────────────────────────── */
.sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}
.skip-links{position:absolute; top:0; left:0; z-index:10000;}
.skip-link{
  position:absolute; left:var(--s-3); top:calc(var(--safe-top) + var(--s-3));
  transform:translateY(-160%);
  background:var(--color-primary); color:#fff; font-weight:600;
  padding:.7rem 1.1rem; border-radius:var(--r-btn); min-height:48px;
  display:inline-flex; align-items:center; box-shadow:var(--shadow-elevated);
  transition:transform var(--dur-fast) var(--ease-out); text-decoration:none;
}
.skip-link:nth-of-type(2){left:16rem;}
.skip-link:focus{transform:translateY(0); color:#fff;}

/* ─────────────────────────────────────────────────────────────────────────
   4. QUICK-EXIT (NOTAUSGANG) — safety critical
   ──────────────────────────────────────────────────────────────────────── */
.quick-exit{
  position:fixed; top:var(--safe-top); right:0; z-index:9999;
  display:inline-flex; align-items:center; gap:.5rem;
  min-height:48px; padding:.7rem 1.15rem;
  background:var(--color-exit-bg); color:#fff; font-weight:700; font-size:.95rem;
  letter-spacing:.01em; text-decoration:none; white-space:nowrap;
  border-bottom-left-radius:14px;
  box-shadow:0 6px 18px rgba(138,43,36,.34);
  transition:background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.quick-exit:hover,.quick-exit:focus-visible{background:var(--color-exit-bg-hover); color:#fff; transform:translateY(1px);}
.quick-exit svg{width:20px; height:20px; flex:none;}
.quick-exit__dots{display:none; gap:4px; margin-left:.4rem;}
.quick-exit__dots span{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.45);}
.quick-exit__dots span.on{background:#fff;}
.quick-exit.arming .quick-exit__dots{display:inline-flex;}

#exit-overlay{position:fixed; inset:0; background:#fff; z-index:2147483647;}

/* thin safety hint under the exit (near it) */
.exit-hint{
  position:fixed; top:calc(var(--safe-top) + 52px); right:0; z-index:9998;
  max-width:min(320px, 82vw); margin:0; padding:.55rem .8rem;
  background:var(--color-surface); border:1px solid var(--color-border);
  border-right:0; border-top-right-radius:0; border-bottom-left-radius:14px;
  box-shadow:var(--shadow-soft); font-size:.78rem; color:var(--color-muted);
  line-height:1.45; display:none;
}
@media (min-width:1100px){ .exit-hint{display:block;} }
.exit-hint a{color:var(--color-primary-dark); font-weight:600;}

/* ─────────────────────────────────────────────────────────────────────────
   5. LAYOUT PRIMITIVES
   ──────────────────────────────────────────────────────────────────────── */
.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(1.1rem, 4vw, 2.5rem);}
.section{padding-block:clamp(3.25rem, 7vw, 6rem);}
.section--soft{background:var(--color-surface-soft);}
.section--teal{background:var(--color-surface-teal);}
.section__head{max-width:52rem; margin-bottom:clamp(2rem,4vw,3rem);}
.eyebrow{display:inline-block; font-size:var(--fs-label); font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:var(--color-accent-text); margin-bottom:var(--s-3);}
.eyebrow::before{content:""; display:inline-block; width:1.6rem; height:2px; background:currentColor; vertical-align:middle; margin-right:.6rem; border-radius:2px;}
h1{font-size:var(--fs-h1);}
.h-display{font-size:var(--fs-display); letter-spacing:-.025em; line-height:1.05;}
h2,.h2{font-size:var(--fs-h2);}
h3,.h3{font-size:var(--fs-h3);}
.lead{font-size:var(--fs-lead); line-height:1.55; color:var(--color-muted); max-width:48ch; font-weight:400;}
.muted{color:var(--color-muted);}

/* ─────────────────────────────────────────────────────────────────────────
   6. BUTTONS
   ──────────────────────────────────────────────────────────────────────── */
.btn{
  --btn-bg:var(--color-primary);
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:52px; padding:.85rem 1.5rem;
  font-family:inherit; font-size:1.02rem; font-weight:600; line-height:1.1;
  white-space:nowrap; text-decoration:none; cursor:pointer;
  border:2px solid transparent; border-radius:var(--r-btn);
  background:var(--btn-bg); color:#fff;
  transition:background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover{background:#014e42; color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-teal);}
.btn svg{width:20px; height:20px; flex:none;}
.btn--lg{min-height:58px; font-size:1.08rem; padding:1rem 1.7rem;}
.btn--ghost{background:transparent; color:var(--color-primary-dark); border-color:var(--color-border-teal);}
.btn--ghost:hover{background:var(--color-surface-teal); color:var(--color-primary-dark); border-color:var(--color-primary); transform:translateY(-2px); box-shadow:none;}
.btn--warm{--btn-bg:var(--color-warm-strong);}
.btn--warm:hover{background:#8f4a26;}
.btn--block{width:100%;}
.btn--onteal{background:#fff; color:var(--color-primary-dark);}
.btn--onteal:hover{background:#eaf3ef; color:var(--color-primary-dark);}

.btn-row{display:flex; flex-wrap:wrap; gap:var(--s-3); align-items:center;}

/* ─────────────────────────────────────────────────────────────────────────
   7. HEADER / NAV
   ──────────────────────────────────────────────────────────────────────── */
.site-header{
  position:sticky; top:0; z-index:900;
  background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--color-border);
  padding-top:var(--safe-top);
}
.site-header__inner{display:flex; align-items:center; gap:var(--s-4); min-height:var(--header-h); padding-block:.5rem;}
.brand{display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; margin-right:auto;}
.brand img{height:38px; width:auto;}
.brand__text{display:flex; flex-direction:column; line-height:1.05;}
.brand__text b{font-size:1.02rem; color:var(--color-primary-dark); font-weight:700; letter-spacing:-.01em;}
.brand__text span{font-size:.72rem; color:var(--color-muted); letter-spacing:.02em;}

.nav{display:flex; align-items:center; gap:.15rem;}
.nav a{
  display:inline-flex; align-items:center; min-height:44px; padding:.5rem .7rem;
  font-size:.94rem; font-weight:500; color:var(--color-ink); text-decoration:none;
  border-radius:8px; white-space:nowrap;
}
.nav a:hover{background:var(--color-surface-teal); color:var(--color-primary-dark);}
.nav a[aria-current="page"]{color:var(--color-primary-dark); font-weight:600;}
.header-call{
  display:inline-flex; align-items:center; gap:.45rem; min-height:44px; padding:.5rem .9rem;
  font-weight:600; color:var(--color-primary-dark); text-decoration:none; border-radius:var(--r-pill);
  border:1.5px solid var(--color-border-teal); white-space:nowrap;
}
.header-call:hover{background:var(--color-surface-teal); color:var(--color-primary-dark); border-color:var(--color-primary);}
.header-call svg{width:17px;height:17px;}

.nav-toggle{
  display:none; order:-1; /* left of everything on mobile */
  align-items:center; justify-content:center; width:48px; height:48px;
  background:transparent; border:1.5px solid var(--color-border); border-radius:10px; cursor:pointer; color:var(--color-ink);
}
.nav-toggle svg{width:24px;height:24px;}
.nav-toggle .icon-close{display:none;}
.nav-toggle[aria-expanded="true"] .icon-open{display:none;}
.nav-toggle[aria-expanded="true"] .icon-close{display:block;}

@media (max-width:960px){
  .header-call span{display:none;}
}
@media (max-width:860px){
  /* backdrop-filter würde den fixed-Mobil-Overlay im Header einsperren → auf Mobil deaktivieren */
  .site-header{backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--color-surface);}
  .nav-toggle{display:inline-flex;}
  .site-header__inner{gap:.6rem;}
  .brand__text{display:none;}
  .brand{margin-right:auto;}
  .nav{
    position:fixed; inset:0; top:0; z-index:950;
    flex-direction:column; align-items:stretch; justify-content:flex-start; gap:.1rem;
    padding:calc(var(--safe-top) + 5rem) 1.4rem 2rem;
    background:var(--color-surface);
    transform:translateX(-100%); visibility:hidden;
    transition:transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
    overflow-y:auto;
  }
  .nav.open{transform:translateX(0); visibility:visible;}
  .nav a{min-height:56px; font-size:1.1rem; padding:.6rem .8rem; border-bottom:1px solid var(--color-border);}
  .header-call{display:none;}
  .nav .nav-call{display:inline-flex; margin-top:1rem; justify-content:center;}
}
@media (min-width:861px){
  .nav .nav-call{display:none;}
  /* Platz oben rechts für den fixierten NOTAUSGANG freihalten */
  .site-header__inner{padding-right:200px;}
  .nav a{padding-inline:.5rem;}
}
@media (min-width:861px){ .header-call span{display:none;} .header-call{padding-inline:.7rem;} }

/* ─────────────────────────────────────────────────────────────────────────
   8. HERO
   ──────────────────────────────────────────────────────────────────────── */
.hero{position:relative; overflow:hidden; background:var(--color-surface-soft);}
.hero__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; padding-block:clamp(2.75rem,6vw,5rem);}
.hero__content{max-width:38rem;}
.hero h1{font-size:var(--fs-display); letter-spacing:-.025em; line-height:1.05; color:var(--color-primary-dark); max-width:18ch; margin-bottom:var(--s-5);}
.hero .lead{margin-bottom:var(--s-4);}
.hero__body{color:var(--color-ink);}
.badges{display:flex; flex-wrap:wrap; gap:.5rem; margin:var(--s-5) 0;}
.badge{
  display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .85rem;
  background:#fff; border:1px solid var(--color-border-teal); border-radius:var(--r-pill);
  font-size:.85rem; font-weight:600; color:var(--color-primary-dark);
}
.badge svg{width:15px;height:15px; color:var(--color-accent);}
.hero__cta{margin-top:var(--s-5);}
.hero__micro{margin-top:var(--s-4); font-size:.9rem; color:var(--color-muted); max-width:44ch;}
.hero__micro a{font-weight:600;}

.hero__media{
  position:relative; min-height:clamp(260px, 42vw, 460px); border-radius:24px;
  background-image:url("../img/hero.webp"), linear-gradient(115deg,#013b32 0%,#026555 42%,#00855a 70%,#cfe6dd 100%);
  background-size:cover; background-position:center; box-shadow:var(--shadow-elevated);
}
.hero__media::after{content:""; position:absolute; inset:0; border-radius:24px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);}
/* decorative door motif for warmth if no photo */
.hero__media .motif{position:absolute; right:8%; bottom:0; width:46%; max-width:220px; opacity:.9;}

@media (max-width:820px){
  .hero__grid{grid-template-columns:1fr;}
  .hero__media{min-height:200px; order:-1;}
}

/* ─────────────────────────────────────────────────────────────────────────
   9. EMERGENCY (#hilfe)
   ──────────────────────────────────────────────────────────────────────── */
.help__wrap{display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(1.5rem,3vw,2.5rem); align-items:start;}
@media (max-width:820px){ .help__wrap{grid-template-columns:1fr;} }
.help__cards{display:flex; flex-direction:column; gap:var(--s-3);}
.numcard{
  display:flex; align-items:center; gap:var(--s-4); min-height:76px;
  padding:var(--s-4) var(--s-5); border-radius:var(--r-card);
  background:var(--color-surface); border:1px solid var(--color-border);
  text-decoration:none; color:var(--color-ink);
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
}
.numcard:hover{transform:translateY(-2px); box-shadow:var(--shadow-soft); border-color:var(--color-border-teal); color:var(--color-ink);}
.numcard__icon{flex:none; width:48px; height:48px; display:grid; place-items:center; border-radius:14px; background:var(--color-surface-teal); color:var(--color-primary-dark);}
.numcard__icon svg{width:24px;height:24px;}
.numcard__body{min-width:0;}
.numcard__label{font-size:.9rem; color:var(--color-muted);}
.numcard__num{font-size:1.5rem; font-weight:700; color:var(--color-primary-dark); letter-spacing:.01em; line-height:1.1;}
.numcard__meta{font-size:.82rem; color:var(--color-muted);}
.numcard--primary{background:var(--color-primary); border-color:var(--color-primary);}
.numcard--primary .numcard__label,.numcard--primary .numcard__meta{color:rgba(255,255,255,.85);}
.numcard--primary .numcard__num{color:#fff;}
.numcard--primary .numcard__icon{background:rgba(255,255,255,.16); color:#fff;}
.numcard--primary:hover{color:#fff; box-shadow:var(--shadow-teal);}
.numcard__go{margin-left:auto; flex:none; color:var(--color-accent);}
.numcard--primary .numcard__go{color:#fff;}

.help__aside{background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--r-card); padding:var(--s-5); box-shadow:var(--shadow-soft);}
.danger-box{border:1.5px solid #E8C7C3; background:#FCF4F3; border-radius:16px; padding:var(--s-4) var(--s-5); margin-bottom:var(--s-4);}
.danger-box strong{color:var(--color-danger);}
.danger-box .btn-row{margin-top:var(--s-3);}
.danger-box .btn{--btn-bg:var(--color-danger); min-height:46px; padding:.6rem 1.1rem; font-size:.95rem;}
.danger-box .btn:hover{background:#8f1a12;}
.exit-note{font-size:.85rem; color:var(--color-muted); margin:0;}
.exit-note a{font-weight:600;}

/* ─────────────────────────────────────────────────────────────────────────
   10. KONTAKTWEGE (#kontaktwege) — access signals
   ──────────────────────────────────────────────────────────────────────── */
.cards-3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-4);}
@media (max-width:820px){ .cards-3{grid-template-columns:1fr;} }
.wcard{background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--r-card); padding:var(--s-6); box-shadow:var(--shadow-soft);}
.wcard__icon{width:52px; height:52px; display:grid; place-items:center; border-radius:16px; background:var(--color-surface-teal); color:var(--color-primary-dark); margin-bottom:var(--s-4);}
.wcard__icon svg{width:26px;height:26px;}
.wcard h3{font-size:1.2rem; margin-bottom:var(--s-2); color:var(--color-primary-dark);}
.wcard p{font-size:.98rem; margin-bottom:var(--s-3);}
.wcard .detail{font-size:.85rem; color:var(--color-muted); padding-top:var(--s-3); border-top:1px solid var(--color-border); margin:0;}

/* ─────────────────────────────────────────────────────────────────────────
   11. ANGEBOTE (#angebote) — accordion
   ──────────────────────────────────────────────────────────────────────── */
.services{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-4);}
@media (max-width:820px){ .services{grid-template-columns:1fr;} }
.service{
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--r-card); box-shadow:var(--shadow-soft); overflow:hidden;
}
.service>summary{
  display:flex; align-items:center; gap:var(--s-4); min-height:64px; padding:var(--s-4) var(--s-5);
  cursor:pointer; list-style:none; font-weight:600; font-size:1.1rem; color:var(--color-primary-dark);
}
.service>summary::-webkit-details-marker{display:none;}
.service__tile{flex:none; width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background:var(--color-surface-teal); color:var(--color-primary-dark);}
.service__tile svg{width:22px;height:22px;}
.service__title{flex:1; min-width:0;}
.service__chev{flex:none; color:var(--color-accent); transition:transform var(--dur-base) var(--ease-out);}
.service[open] .service__chev{transform:rotate(180deg);}
.service__panel{padding:0 var(--s-5) var(--s-5) calc(var(--s-5) + 44px + var(--s-4));}
.service__panel p{font-size:.98rem; margin-bottom:var(--s-3);}
.service__for{font-size:.9rem; color:var(--color-muted); margin-bottom:var(--s-3);}
.service__for b{color:var(--color-ink); font-weight:600;}
.tag{display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .7rem; border-radius:var(--r-pill); font-size:.82rem; font-weight:600;}
.tag--free{background:var(--color-surface-teal); color:var(--color-primary-dark);}
.tag--cost{background:var(--color-warm-tint); color:#7a3f1f;}
.tag--info{background:#EFEAE2; color:#5a4a37;}
.service__foot{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-top:var(--s-3);}
.service__foot .btn{min-height:44px; padding:.55rem 1rem; font-size:.92rem;}
@media (max-width:820px){ .service__panel{padding-left:var(--s-5);} }

/* ─────────────────────────────────────────────────────────────────────────
   12. ÜBER UNS (#ueber-uns)
   ──────────────────────────────────────────────────────────────────────── */
.about__grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center;}
@media (max-width:860px){ .about__grid{grid-template-columns:1fr;} }
.about blockquote{
  margin:0 0 var(--s-5); padding:var(--s-5) var(--s-6); position:relative;
  background:var(--color-surface); border-radius:var(--r-card); border-left:4px solid var(--color-primary);
  box-shadow:var(--shadow-soft); font-size:clamp(1.1rem,.9rem+.7vw,1.35rem); line-height:1.5; color:var(--color-ink);
}
.about blockquote p{max-width:none; font-style:italic;}
.values{list-style:none; padding:0; margin:0 0 var(--s-5); display:grid; gap:var(--s-3);}
.values li{display:flex; gap:var(--s-3); align-items:flex-start; font-size:1rem;}
.values svg{flex:none; width:22px; height:22px; color:var(--color-accent); margin-top:2px;}
.about__traeger{font-size:.9rem; color:var(--color-muted); padding-top:var(--s-4); border-top:1px solid var(--color-border);}
.about__media{min-height:clamp(280px,40vw,440px); border-radius:24px; box-shadow:var(--shadow-elevated);
  background-image:url("../img/mission.webp"), radial-gradient(120% 90% at 78% 30%, #f3ede1 0%, #d7e3dc 40%, #026555 100%);
  background-size:cover; background-position:center;}

/* ─────────────────────────────────────────────────────────────────────────
   13. TEAM (#team)
   ──────────────────────────────────────────────────────────────────────── */
.team__grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.5rem,3vw,2.5rem); align-items:start;}
@media (max-width:860px){ .team__grid{grid-template-columns:1fr;} }
.quals{list-style:none; padding:0; margin:var(--s-4) 0 0; display:grid; gap:var(--s-3);}
.quals li{display:flex; gap:var(--s-3); align-items:flex-start; padding:var(--s-4); background:var(--color-surface); border:1px solid var(--color-border); border-radius:14px;}
.quals svg{flex:none; width:22px;height:22px; color:var(--color-accent); margin-top:2px;}
.lang-card{background:var(--color-primary); color:#fff; border-radius:var(--r-card); padding:var(--s-6); box-shadow:var(--shadow-teal);}
.lang-card h3{color:#fff; display:flex; align-items:center; gap:.5rem;}
.lang-card p{color:rgba(255,255,255,.92); font-size:.98rem;}
.lang-scripts{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:var(--s-4);}
.lang-scripts span{unicode-bidi:isolate; background:rgba(255,255,255,.16); border-radius:10px; padding:.5rem .9rem; font-size:1.05rem;}
.lang-card .sub{font-size:.85rem; color:rgba(255,255,255,.8); margin-top:var(--s-3); margin-bottom:0;}
.confide{margin-top:var(--s-4); font-size:.92rem; color:var(--color-muted); display:flex; gap:.5rem; align-items:center;}
.confide svg{width:18px;height:18px;color:var(--color-accent);flex:none;}

/* ─────────────────────────────────────────────────────────────────────────
   14. ABLAUF (#ablauf)
   ──────────────────────────────────────────────────────────────────────── */
.steps{list-style:none; counter-reset:step; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-4);}
@media (max-width:820px){ .steps{grid-template-columns:1fr;} }
.steps li{counter-increment:step; position:relative; padding:var(--s-5) var(--s-5) var(--s-5) calc(var(--s-8) + .5rem); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--r-card); box-shadow:var(--shadow-soft);}
.steps li::before{content:counter(step); position:absolute; left:var(--s-5); top:var(--s-5); width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:var(--color-primary); color:#fff; font-weight:700; font-size:1.15rem;}
.steps li b{display:block; color:var(--color-primary-dark); margin-bottom:.25rem; font-size:1.08rem;}
.steps li p{margin:0; font-size:.97rem;}
.reassure{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:var(--s-5);}
.reassure .badge{background:var(--color-surface-teal); border-color:var(--color-border-teal);}

/* ─────────────────────────────────────────────────────────────────────────
   15. SPENDEN (#spenden)
   ──────────────────────────────────────────────────────────────────────── */
.donate{background:var(--color-warm-tint); border-radius:28px; padding:clamp(1.75rem,4vw,3rem);}
.donate__grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,3vw,2.5rem); align-items:start;}
@media (max-width:820px){ .donate__grid{grid-template-columns:1fr;} }
.donate h2{color:#6f3a1c;}
.donate .lead{color:#7a4a2c;}
.ways{display:flex; flex-wrap:wrap; gap:.5rem; margin:var(--s-4) 0;}
.ways span{background:rgba(255,255,255,.7); border-radius:var(--r-pill); padding:.45rem .9rem; font-size:.88rem; font-weight:600; color:#7a3f1f;}
.iban{background:rgba(255,255,255,.85); border-radius:16px; padding:var(--s-4) var(--s-5); margin-bottom:var(--s-3);}
.iban h3{font-size:1rem; margin-bottom:.35rem; color:#6f3a1c;}
.iban .row{display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap;}
.iban code{font-family:var(--font-body); font-variant-numeric:tabular-nums; font-weight:700; font-size:1.05rem; color:var(--color-ink); letter-spacing:.02em;}
.iban .meta{font-size:.82rem; color:var(--color-muted);}
.copy-btn{display:inline-flex; align-items:center; gap:.4rem; min-height:40px; padding:.4rem .8rem; border-radius:10px; border:1.5px solid #E0C6A8; background:#fff; color:#7a3f1f; font-weight:600; font-size:.85rem; cursor:pointer;}
.copy-btn:hover{background:#fbf3ea;}
.copy-btn svg{width:15px;height:15px;}
.donate__note{font-size:.85rem; color:#7a4a2c;}

/* ─────────────────────────────────────────────────────────────────────────
   16. KONTAKT (#kontakt) + FORM
   ──────────────────────────────────────────────────────────────────────── */
.contact__grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(1.5rem,3vw,2.75rem); align-items:start;}
@media (max-width:860px){ .contact__grid{grid-template-columns:1fr;} }
.info-list{list-style:none; padding:0; margin:var(--s-4) 0 0; display:grid; gap:var(--s-4);}
.info-list li{display:flex; gap:var(--s-3); align-items:flex-start;}
.info-list .ic{flex:none; width:44px;height:44px; display:grid; place-items:center; border-radius:12px; background:var(--color-surface-teal); color:var(--color-primary-dark);}
.info-list .ic svg{width:22px;height:22px;}
.info-list b{display:block; color:var(--color-ink);}
.info-list a{font-weight:600;}
.info-list .sub{font-size:.88rem; color:var(--color-muted);}

.form-card{background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--r-card); padding:clamp(1.4rem,3vw,2rem); box-shadow:var(--shadow-soft);}
.form-card fieldset{border:0; padding:0; margin:0 0 var(--s-4);}
.form-card legend{font-size:var(--fs-h3); font-weight:600; color:var(--color-primary-dark); margin-bottom:var(--s-2); padding:0;}
.field{margin-bottom:var(--s-4);}
.field label{display:block; font-weight:600; font-size:.95rem; margin-bottom:.4rem; color:var(--color-ink);}
.field .hint{display:block; font-weight:400; font-size:.85rem; color:var(--color-muted); margin-top:-.2rem; margin-bottom:.4rem;}
.field input,.field textarea{
  width:100%; font-family:inherit; font-size:16px; color:var(--color-ink);
  padding:.8rem 1rem; border:1.5px solid var(--color-border); border-radius:var(--r-input); background:#fff;
  transition:border-color var(--dur-fast);
}
.field input:focus,.field textarea:focus{border-color:var(--color-primary);}
.field textarea{min-height:130px; resize:vertical;}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--color-danger); background:#FDF6F5;}
.err{display:none; color:var(--color-danger); font-size:.85rem; font-weight:600; margin-top:.35rem;}
.err.show{display:block;}
.radio-row{display:flex; flex-wrap:wrap; gap:.5rem;}
.radio-pill{position:relative;}
.radio-pill input{position:absolute; opacity:0; width:1px;height:1px;}
.radio-pill span{display:inline-flex; align-items:center; min-height:48px; padding:.5rem 1rem; border:1.5px solid var(--color-border); border-radius:var(--r-pill); font-weight:600; font-size:.92rem; cursor:pointer;}
.radio-pill input:checked+span{background:var(--color-primary); color:#fff; border-color:var(--color-primary);}
.radio-pill input:focus-visible+span{outline:3px solid var(--color-focus-core); outline-offset:2px;}
.hp{position:absolute!important; left:-9999px; width:1px;height:1px; overflow:hidden;}
.privacy-box{background:var(--color-surface-teal); border-radius:14px; padding:var(--s-4); font-size:.9rem; color:var(--color-ink); margin-bottom:var(--s-4);}
.safety-inline{font-size:.85rem; color:var(--color-muted); margin-top:var(--s-3);}
.safety-inline a{font-weight:600;}
.form-status{display:none; padding:var(--s-4) var(--s-5); border-radius:14px; margin-bottom:var(--s-4); font-weight:500;}
.form-status.show{display:block;}
.form-status--ok{background:var(--color-surface-teal); border:1.5px solid var(--color-border-teal); color:var(--color-primary-dark);}
.form-status--err{background:#FCF4F3; border:1.5px solid #E8C7C3; color:var(--color-danger);}
.form-status a{font-weight:700;}

/* ─────────────────────────────────────────────────────────────────────────
   17. FOOTER
   ──────────────────────────────────────────────────────────────────────── */
.site-footer{background:var(--color-dark-bg); color:var(--color-dark-ink); padding-block:clamp(2.5rem,5vw,3.5rem) 2rem;}
.footer-emergency{display:flex; flex-wrap:wrap; gap:var(--s-4); align-items:center; padding-bottom:var(--s-5); margin-bottom:var(--s-5); border-bottom:1px solid rgba(255,255,255,.12);}
.footer-emergency strong{color:#fff;}
.footer-emergency a{display:inline-flex; align-items:center; gap:.4rem; color:var(--color-dark-link); font-weight:700; text-decoration:none; font-variant-numeric:tabular-nums;}
.footer-emergency a:hover{color:#fff; text-decoration:underline;}
.footer-grid{display:grid; grid-template-columns:2fr 1fr; gap:var(--s-6); align-items:start;}
@media (max-width:700px){ .footer-grid{grid-template-columns:1fr;} }
.site-footer p{color:var(--color-dark-ink-muted); max-width:60ch; font-size:.92rem;}
.footer-nav{display:flex; flex-wrap:wrap; gap:.3rem 1.1rem;}
.footer-nav a{color:var(--color-dark-ink); text-decoration:none; font-size:.92rem; min-height:36px; display:inline-flex; align-items:center;}
.footer-nav a:hover{color:var(--color-dark-link); text-decoration:underline;}
.footer-legal{margin-top:var(--s-5); padding-top:var(--s-4); border-top:1px solid rgba(255,255,255,.1); font-size:.82rem; color:var(--color-dark-ink-muted);}
.site-footer .brand__text b{color:#fff;} .site-footer .brand__text span{color:var(--color-dark-ink-muted);}

/* ─────────────────────────────────────────────────────────────────────────
   18. MEDIA BANDS (decorative section backgrounds via graceful fallback)
   ──────────────────────────────────────────────────────────────────────── */
.band{position:relative; border-radius:24px; overflow:hidden; min-height:200px; box-shadow:var(--shadow-elevated);}
.band--services{background-image:url("../img/services.webp"), radial-gradient(80% 120% at 32% 55%, #f5e9c9 0%, #e8d9b0 18%, #0a4d40 60%, #026555 100%); background-size:cover; background-position:center;}
.band--room{background-image:url("../img/room.webp"), linear-gradient(160deg,#f3ecdd 0%,#dfe6dc 55%,#026555 100%); background-size:cover; background-position:center;}
.band--growth{background-image:url("../img/growth.webp"), radial-gradient(90% 120% at 30% 80%, #d6a94a 0%, #6dbf8f 30%, #026555 70%, #013b32 100%); background-size:cover; background-position:center;}
.band--contact{background-image:url("../img/contact.webp"), linear-gradient(180deg,#f2e6c6 0%,#cfe0d6 35%,#026555 78%,#013b32 100%); background-size:cover; background-position:center;}

/* ─────────────────────────────────────────────────────────────────────────
   19. SUBPAGE (sicher-surfen)
   ──────────────────────────────────────────────────────────────────────── */
.prose{max-width:var(--container-narrow);}
.prose h2{margin-top:var(--s-7);}
.prose ul{padding-left:1.2rem;}
.prose li{margin-bottom:.5rem;}
.callout{background:var(--color-surface-teal); border-left:4px solid var(--color-primary); border-radius:12px; padding:var(--s-4) var(--s-5); margin:var(--s-5) 0;}

/* ─────────────────────────────────────────────────────────────────────────
   20. REDUCED MOTION
   ──────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important;}
}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth;} }

/* fade-in on scroll (enhancement; neutralised by reduced-motion + .is-visible default when no JS) */
.reveal{opacity:0; transform:translateY(16px); transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);}
.reveal.is-visible{opacity:1; transform:none;}
.no-js .reveal{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none;} }

/* ─────────────────────────────────────────────────────────────────────────
   21. ÜBERNOMMENE MARKEN-GRAFIKEN DER ALTEN SEITE
   ──────────────────────────────────────────────────────────────────────── */
/* Eigene SVG-Icons (weiß) in Teal-Kreis-Kacheln */
.oldtile{flex:none; display:inline-grid; place-items:center; width:56px; height:56px; border-radius:16px; background:var(--color-primary);}
.oldtile img{width:60%; height:60%;}
.oldtile--round{border-radius:50%;}
.oldtile--lg{width:72px; height:72px; border-radius:20px;}

/* „Für Frauen jeden Alters" — Persona-Illustrationen */
.personas{display:flex; flex-wrap:wrap; gap:clamp(1rem,3vw,2rem); justify-content:center; margin-top:clamp(1.5rem,3vw,2.5rem);}
.persona{display:flex; flex-direction:column; align-items:center; gap:.7rem; width:112px;}
.persona__img{width:104px; height:104px; border-radius:50%; background:#fff; border:4px solid #fff; box-shadow:var(--shadow-elevated); object-fit:cover; object-position:center 18%;}
.persona figcaption{font-size:.9rem; color:var(--color-primary-dark); font-weight:600; text-align:center;}
.fuersie{background:linear-gradient(180deg, var(--color-surface-teal), #fff);}

/* Hilfetelefon-116-016-Badge (offiziell) */
.hilfe-badge{display:inline-flex; align-items:center; gap:.7rem; background:#fff; border:1px solid var(--color-border); border-radius:14px; padding:.7rem 1rem; box-shadow:var(--shadow-soft); text-decoration:none; color:var(--color-muted); font-size:.82rem; max-width:100%;}
.hilfe-badge img{height:46px; width:auto; flex:none;}
.hilfe-badge b{color:var(--color-primary-dark); display:block; font-size:.88rem;}

/* Förderer-Band */
.foerderer{background:var(--color-surface); border-top:1px solid var(--color-border);}
.foerderer__inner{text-align:center; padding-block:clamp(2rem,4vw,3rem);}
.foerderer h2{font-size:1.1rem; color:var(--color-muted); font-weight:600; letter-spacing:.02em; margin-bottom:var(--s-5);}
.foerderer__logos{display:flex; flex-wrap:wrap; align-items:center; gap:clamp(1.75rem,5vw,4rem); justify-content:center;}
.foerderer__logos img{height:clamp(44px,6vw,60px); width:auto;}

/* „Einfache Sprache"-Link (Barrierefreiheit-Affordance) */
.nav-ls{border:1.5px solid var(--color-border-teal); border-radius:var(--r-pill); color:var(--color-primary-dark)!important; font-weight:600;}
.nav-ls:hover{background:var(--color-surface-teal);}
@media (max-width:860px){ .nav-ls{border:0; border-bottom:1px solid var(--color-border); border-radius:0;} }

/* ─────────────────────────────────────────────────────────────────────────
   22. EINFACHE SPRACHE — größere Schrift, mehr Abstand, klare Struktur
   ──────────────────────────────────────────────────────────────────────── */
.leicht{max-width:42rem; margin-inline:auto;}
.leicht > p, .leicht li{font-size:clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem); line-height:1.9; max-width:34rem;}
.leicht h1{font-size:clamp(2rem, 1.5rem + 2vw, 2.8rem);}
.leicht h2{font-size:clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin-top:clamp(2.5rem,5vw,3.5rem); color:var(--color-primary-dark); display:flex; align-items:center; gap:.7rem;}
.leicht h2 .oldtile{width:48px; height:48px; border-radius:14px;}
.leicht ul{list-style:none; padding:0; margin-block:1.5rem;}
.leicht li{padding-left:2rem; position:relative;}
.leicht li::before{content:""; position:absolute; left:0; top:.6em; width:12px; height:12px; border-radius:50%; background:var(--color-accent);}
.leicht-toggle{display:inline-flex; align-items:center; gap:.5rem; background:var(--color-surface-teal); border:1.5px solid var(--color-border-teal); border-radius:var(--r-pill); padding:.7rem 1.2rem; font-weight:600; color:var(--color-primary-dark); text-decoration:none; margin-bottom:2rem;}
.leicht-toggle:hover{background:#e4efe9; color:var(--color-primary-dark);}
.leicht-num{display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; background:var(--color-primary); color:#fff; border-radius:var(--r-card); padding:clamp(1.25rem,3vw,2rem); margin:1.5rem 0;}
.leicht-num__no{font-size:clamp(2rem,1.4rem+2.5vw,3rem); font-weight:700; line-height:1; font-variant-numeric:tabular-nums;}
.leicht-num__txt{font-size:1.1rem; color:rgba(255,255,255,.92);}
.leicht-num .btn{--btn-bg:#fff; color:var(--color-primary-dark); min-height:56px;}
.leicht-num .btn:hover{background:#eaf3ef;}
.leicht-card{background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--r-card); padding:clamp(1.25rem,3vw,1.75rem); margin:1.25rem 0; box-shadow:var(--shadow-soft);}
.leicht-card h3{font-size:1.35rem; color:var(--color-primary-dark); margin-bottom:.6rem;}
.leicht-card p{font-size:1.15rem; line-height:1.8; margin:0;}

/* ─────────────────────────────────────────────────────────────────────────
   23. MULTI-PAGE: Seitenkopf / Breadcrumb / Teaser
   ──────────────────────────────────────────────────────────────────────── */
.page-hero{background:var(--color-surface-soft); border-bottom:1px solid var(--color-border); padding-block:clamp(1.75rem,4vw,3rem);}
.breadcrumb{font-size:.85rem; color:var(--color-muted); margin-bottom:var(--s-3);}
.breadcrumb a{color:var(--color-primary-dark); text-decoration:none; font-weight:600;}
.breadcrumb a:hover{text-decoration:underline;}
.breadcrumb span[aria-current]{color:var(--color-muted); font-weight:400;}
.page-hero h1{font-size:var(--fs-h1); color:var(--color-primary-dark); margin-bottom:var(--s-3);}
.page-hero .lead{margin:0;}
.teasers{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-4);}
@media (max-width:820px){ .teasers{grid-template-columns:1fr;} }
.teaser{display:flex; flex-direction:column; gap:var(--s-3); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--r-card); padding:var(--s-6); box-shadow:var(--shadow-soft); text-decoration:none; color:var(--color-ink); transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast);}
.teaser:hover{transform:translateY(-4px); box-shadow:var(--shadow-elevated); color:var(--color-ink);}
.teaser .oldtile,.teaser__ic{width:52px;height:52px;flex:none;}
.teaser__ic{display:grid;place-items:center;border-radius:14px;background:var(--color-surface-teal);color:var(--color-primary-dark);}
.teaser__ic svg{width:26px;height:26px;}
.teaser h3{font-size:1.2rem;color:var(--color-primary-dark);margin:0;}
.teaser p{font-size:.95rem;margin:0;}
.teaser__go{margin-top:auto;color:var(--color-accent-text);font-weight:600;font-size:.92rem;display:inline-flex;align-items:center;gap:.35rem;}

/* ─────────────────────────────────────────────────────────────────────────
   24. COOKIE-CONSENT (DSGVO) — nie über NOTAUSGANG/Notruf
   ──────────────────────────────────────────────────────────────────────── */
.cookie{position:fixed; z-index:9996; left:16px; right:16px; bottom:16px; max-width:560px; margin-inline:auto;
  background:#fff; border:1px solid var(--color-border); border-radius:18px; box-shadow:var(--shadow-elevated);
  padding:1.15rem 1.3rem; display:none;}
.cookie.is-open{display:block;}
@media (min-width:640px){ .cookie{left:auto; right:20px; bottom:20px; margin:0;} }
.cookie h2{font-size:1.05rem; margin:0 0 .4rem; color:var(--color-primary-dark);}
.cookie p{font-size:.88rem; line-height:1.55; margin:0 0 .9rem; color:var(--color-ink);}
.cookie p a{font-weight:600;}
.cookie__row{display:flex; flex-wrap:wrap; gap:.55rem;}
.cookie__row .btn{min-height:46px; padding:.55rem 1.1rem; font-size:.92rem;}
.cookie__row .btn--ghost{flex:1;}

/* ─────────────────────────────────────────────────────────────────────────
   25. BARRIEREFREIHEITS-FLOATER + Einstellungs-Klassen
   ──────────────────────────────────────────────────────────────────────── */
.a11y-fab{position:fixed; left:16px; bottom:16px; z-index:9995; width:56px; height:56px; border-radius:50%;
  background:var(--color-primary); color:#fff; border:0; cursor:pointer; box-shadow:var(--shadow-elevated);
  display:grid; place-items:center; transition:background var(--dur-fast), transform var(--dur-fast);}
.a11y-fab:hover{background:#014e42; transform:translateY(-2px);}
.a11y-fab svg{width:30px; height:30px;}
body.cookie-open .a11y-fab{bottom:calc(16px + 140px);} /* über dem Cookie-Banner auf schmalen Screens */
@media (min-width:640px){ body.cookie-open .a11y-fab{bottom:16px;} }
.a11y-panel{position:fixed; left:16px; bottom:84px; z-index:9997; width:min(340px, calc(100vw - 32px));
  background:#fff; border:1px solid var(--color-border); border-radius:20px; box-shadow:var(--shadow-elevated);
  padding:1.25rem; display:none; max-height:calc(100vh - 120px); overflow-y:auto;}
.a11y-panel.is-open{display:block;}
.a11y-panel__head{display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem;}
.a11y-panel h2{font-size:1.15rem; margin:0; color:var(--color-primary-dark);}
.a11y-close{width:38px; height:38px; border-radius:10px; border:1px solid var(--color-border); background:#fff; cursor:pointer; display:grid; place-items:center; color:var(--color-ink);}
.a11y-close svg{width:20px;height:20px;}
.a11y-group{margin-bottom:1.1rem;}
.a11y-group > .a11y-label{display:block; font-size:.85rem; font-weight:700; color:var(--color-ink); margin-bottom:.45rem;}
.a11y-seg{display:flex; gap:.4rem;}
.a11y-seg button{flex:1; min-height:44px; border:1.5px solid var(--color-border); background:#fff; border-radius:10px; cursor:pointer; font-weight:600; font-size:.9rem; color:var(--color-ink);}
.a11y-seg button[aria-pressed="true"]{background:var(--color-primary); color:#fff; border-color:var(--color-primary);}
.a11y-toggle{width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:48px; padding:.4rem .2rem; background:none; border:0; cursor:pointer; font-family:inherit; font-size:.95rem; font-weight:600; color:var(--color-ink); text-align:left; border-top:1px solid var(--color-border);}
.a11y-toggle .track{flex:none; width:46px; height:26px; border-radius:999px; background:var(--color-border); position:relative; transition:background var(--dur-fast);}
.a11y-toggle .track::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform var(--dur-fast); box-shadow:0 1px 2px rgba(0,0,0,.3);}
.a11y-toggle[aria-pressed="true"] .track{background:var(--color-accent);}
.a11y-toggle[aria-pressed="true"] .track::after{transform:translateX(20px);}
.a11y-reset{width:100%; min-height:44px; margin-top:.6rem; border:1.5px solid var(--color-border-teal); background:var(--color-surface-teal); color:var(--color-primary-dark); border-radius:10px; font-weight:600; cursor:pointer;}

/* --- Wirkung der Einstellungen (Klassen auf <html>) --- */
html.a11y-fs1{font-size:112.5%;}
html.a11y-fs2{font-size:131.25%;}
html.a11y-contrast{
  --color-ink:#000000; --color-muted:#2b2b2b; --color-primary-dark:#00332b; --color-accent-text:#00443a;
  --color-border:#767676; --color-border-teal:#4a6b60; --color-surface-soft:#ffffff; --color-surface-teal:#eef4f1;
}
html.a11y-contrast a{text-decoration:underline;}
html.a11y-contrast .btn,html.a11y-contrast .numcard,html.a11y-contrast .service,html.a11y-contrast .wcard,html.a11y-contrast .teaser{border-width:2px;}
html.a11y-spacing body{line-height:1.9; letter-spacing:.02em; word-spacing:.12em;}
html.a11y-spacing p,html.a11y-spacing li{line-height:2;}
html.a11y-underline a{text-decoration:underline;}
html.a11y-nomotion *,html.a11y-nomotion *::before,html.a11y-nomotion *::after{animation:none!important; transition:none!important; scroll-behavior:auto!important;}
html.a11y-nomotion .reveal{opacity:1!important; transform:none!important;}