/* ─── Site Controls (Accessibility-Drawer) ──────────────────────────
   Wird auf jeder Seite über <link rel="stylesheet" href=".../_assets/site-controls.css"> eingebunden.
   Funktioniert als Layer ÜBER den seitenspezifischen Stilen.
   Trigger ist im Header integriert (Cluster mit Hamburger + A11y-Männchen).  */

/* ─── HAMBURGER-CLUSTER (Hamburger + Trenner + A11y im Header) ───── */
.hamburger-cluster{
  display:inline-flex; align-items:center;
  height:46px; padding:0;
  background:transparent;
  border:1px solid rgba(0,0,0,.85);
  border-radius:16px;
  overflow:hidden;
}
.hamburger-cluster .cluster-half{
  display:inline-flex; align-items:center; gap:12px;
  height:100%; padding:0 18px;
  font-family:'Jost', system-ui, sans-serif; font-size:13px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:#1a1a1a; background:transparent; border:0; cursor:pointer;
  transition:background .25s, color .25s;
  line-height:1;
}
.hamburger-cluster .cluster-half:hover{ background:#638889; color:#fff; }
.hamburger-cluster .cluster-half:focus-visible{ outline:2px solid #638889; outline-offset:-2px; }
.hamburger-cluster .cluster-divider{
  width:1px; align-self:stretch; background:rgba(0,0,0,.25);
  flex-shrink:0;
}
.hamburger-cluster .cluster-half.a11y-half{
  padding:0 16px;
}
.hamburger-cluster .a11y-icon{
  width:18px; height:18px; stroke:currentColor; fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.hamburger-cluster .hamburger-icon{
  display:inline-flex; flex-direction:column; justify-content:center; gap:4px;
  width:22px; height:22px;
}
.hamburger-cluster .hamburger-icon span{
  display:block; height:1.5px; background:currentColor; border-radius:1px; width:22px;
}

/* Mobile: Labels weg, Icons bleiben */
@media (max-width:600px){
  .hamburger-cluster .cluster-half{ padding:0 14px; gap:0; }
  .hamburger-cluster .hamburger-label{ display:none; }
  .hamburger-cluster .cluster-half.a11y-half{ padding:0 12px; }
}

/* ─── ACCESSIBILITY DRAWER ───────────────────────────────────────── */
.sc-drawer{
  position:fixed; top:80px; left:14px; z-index:401;
  width:300px; max-width:calc(100vw - 28px);
  background:#fff; border:1px solid rgba(0,0,0,.12);
  border-radius:12px; box-shadow:0 18px 48px rgba(0,0,0,.18);
  padding:20px 22px;
  opacity:0; transform:translateY(-8px); pointer-events:none;
  transition:opacity .25s, transform .25s;
  font-family:'Jost', system-ui, sans-serif;
}
.sc-drawer:not(.open){ visibility:hidden; }
.sc-drawer.open{ opacity:1; transform:none; pointer-events:auto; visibility:visible; }
.sc-drawer h3{
  font-size:11px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:#638889; margin-bottom:14px;
}
.sc-section{ margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid rgba(0,0,0,.08); }
.sc-section:last-child{ border-bottom:0; padding-bottom:0; margin-bottom:0; }
.sc-section .sc-label{ font-size:13px; font-weight:500; color:#1a1a1a; margin-bottom:8px; display:block; }
.sc-options{ display:flex; gap:6px; flex-wrap:wrap; }
.sc-options button{
  font-family:inherit; font-size:12px; font-weight:500;
  padding:7px 12px; border:1px solid rgba(0,0,0,.2);
  background:#fff; color:#1a1a1a; border-radius:6px; cursor:pointer;
  transition:background .2s, color .2s, border-color .2s;
}
.sc-options button:hover{ border-color:#638889; }
.sc-options button.active{ background:#638889; color:#fff; border-color:#638889; }
.sc-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:13.5px; color:#1a1a1a; cursor:pointer; user-select:none;
}
.sc-toggle .switch{
  position:relative; width:38px; height:22px; background:#d6d6d2; border-radius:22px;
  transition:background .25s; flex-shrink:0;
}
.sc-toggle .switch::after{
  content:""; position:absolute; left:2px; top:2px;
  width:18px; height:18px; background:#fff; border-radius:50%;
  transition:transform .25s; box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.sc-toggle input{ position:absolute; opacity:0; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.sc-toggle input:focus-visible + .switch{ outline:2px solid #1F2F2F; outline-offset:3px; }
.sc-toggle input:checked + .switch{ background:#638889; }
.sc-toggle input:checked + .switch::after{ transform:translateX(16px); }

.sc-reset{
  display:block; width:100%; text-align:center;
  font-size:12px; font-weight:500; letter-spacing:.06em;
  padding:10px 16px; background:transparent; border:1px solid rgba(0,0,0,.2);
  color:#666; border-radius:6px; cursor:pointer; margin-top:6px;
  transition:background .2s, color .2s;
}
.sc-reset:hover{ background:#f5f5f2; color:#1a1a1a; }

/* ─── ACCESSIBILITY MODES (am html-element gesetzt) ───────────────── */

/* ── Schriftgröße — wirkt sowohl auf rem-basierte als auch auf px-basierte Texte ──
   Die Site mischt rem und px. Daher zwei Mechanismen:
   1) html font-size (für rem)
   2) zoom auf body (skaliert alle px-basierten Texte UND Layouts proportional)   */
html[data-text-size="large"]{ font-size:18px; }
html[data-text-size="large"] body{ zoom:1.15; }

html[data-text-size="xlarge"]{ font-size:20px; }
html[data-text-size="xlarge"] body{ zoom:1.30; }

/* Fallback für Browser ohne 'zoom' (Firefox <126): explizite text-Skalierung */
@supports not (zoom:1) {
  html[data-text-size="large"] body{ zoom:unset; transform:none; }
  html[data-text-size="large"] p, html[data-text-size="large"] li,
  html[data-text-size="large"] a, html[data-text-size="large"] span,
  html[data-text-size="large"] button, html[data-text-size="large"] input,
  html[data-text-size="large"] textarea, html[data-text-size="large"] select,
  html[data-text-size="large"] .lead, html[data-text-size="large"] .desc,
  html[data-text-size="large"] h1, html[data-text-size="large"] h2,
  html[data-text-size="large"] h3, html[data-text-size="large"] h4{
    font-size:1.15em !important;
  }
  html[data-text-size="xlarge"] body{ zoom:unset; }
  html[data-text-size="xlarge"] p, html[data-text-size="xlarge"] li,
  html[data-text-size="xlarge"] a, html[data-text-size="xlarge"] span,
  html[data-text-size="xlarge"] button, html[data-text-size="xlarge"] input,
  html[data-text-size="xlarge"] textarea, html[data-text-size="xlarge"] select,
  html[data-text-size="xlarge"] .lead, html[data-text-size="xlarge"] .desc,
  html[data-text-size="xlarge"] h1, html[data-text-size="xlarge"] h2,
  html[data-text-size="xlarge"] h3, html[data-text-size="xlarge"] h4{
    font-size:1.30em !important;
  }
}

/* ── Kontrastmodus — WCAG AAA-tauglich, deckt mehr Elemente ab ── */
html[data-contrast="high"] {
  --green:#0B4040; --green-dark:#000; --green-deep:#000;
  --green-light:#1F5454; --text:#000; --mid-gray:#222;
  --warm-gray:#666; --sand:#000;
}
html[data-contrast="high"] body{ background:#fff !important; color:#000 !important; }
html[data-contrast="high"] p,
html[data-contrast="high"] li,
html[data-contrast="high"] span,
html[data-contrast="high"] em,
html[data-contrast="high"] strong,
html[data-contrast="high"] b,
html[data-contrast="high"] td,
html[data-contrast="high"] th,
html[data-contrast="high"] label,
html[data-contrast="high"] dd,
html[data-contrast="high"] dt,
html[data-contrast="high"] .lead,
html[data-contrast="high"] .desc,
html[data-contrast="high"] .footer-about,
html[data-contrast="high"] .footer-col span,
html[data-contrast="high"] .breadcrumb,
html[data-contrast="high"] h1,
html[data-contrast="high"] h2,
html[data-contrast="high"] h3,
html[data-contrast="high"] h4,
html[data-contrast="high"] h5,
html[data-contrast="high"] h6{
  color:#000 !important;
}
html[data-contrast="high"] a:not(.btn-primary):not(.btn-formular):not(.nav-cta):not(.btn-light):not(.btn-outline-dark):not(.header-cta-formulare):not(.btn-google-nav):not(.cta-btn):not(.felder-card):not(.felder-box){
  color:#000 !important;
  text-decoration:underline !important;
  text-underline-offset:3px;
}
/* Buttons im Kontrastmodus: schwarz auf weiß bzw. weiß auf schwarz */
html[data-contrast="high"] .btn-primary,
html[data-contrast="high"] .nav-cta,
html[data-contrast="high"] .btn-google-nav,
html[data-contrast="high"] .btn-light,
html[data-contrast="high"] .felder-quicklinks a,
html[data-contrast="high"] .menu-quicklinks a,
html[data-contrast="high"] .cta-btn{
  background:#000 !important;
  color:#fff !important;
  border:2px solid #000 !important;
}
html[data-contrast="high"] .btn-outline-dark,
html[data-contrast="high"] .btn-formular,
html[data-contrast="high"] .header-cta-formulare{
  background:#fff !important;
  color:#000 !important;
  border:2px solid #000 !important;
}
/* Hintergründe nicht-weißer Boxen auf #fff ziehen, Rahmen schwarz */
html[data-contrast="high"] .felder-box,
html[data-contrast="high"] .benefit-box,
html[data-contrast="high"] .sidebar-card,
html[data-contrast="high"] .sidebar-formulare,
html[data-contrast="high"] .notarkosten-box,
html[data-contrast="high"] .cta-card,
html[data-contrast="high"] .felder-card,
html[data-contrast="high"] .note-box,
html[data-contrast="high"] .karte-hinweis-box,
html[data-contrast="high"] .field-hinweis,
html[data-contrast="high"] .pdf-list a{
  background:#fff !important;
  color:#000 !important;
  border:2px solid #000 !important;
}
html[data-contrast="high"] *{ border-color:#000 !important; }
/* Eyebrow + Section-Eyebrow auch deutlich (nicht nur grün, sondern lesbar) */
html[data-contrast="high"] .eyebrow,
html[data-contrast="high"] .section-eyebrow,
html[data-contrast="high"] .page-eyebrow,
html[data-contrast="high"] .footer-col h4{
  color:#000 !important;
}
/* Dunkle Flächen bleiben dunkel — und ihre Schrift wird weiß. Sonst stünde
   nach der Schwarz-Regel oben schwarzer Text auf schwarzem Grund (Zeitenbalken,
   Off-Canvas-Menü, Karten-Kopfleiste, Abschluss-Kasten der Unterseiten). */
html[data-contrast="high"] .hours-section,
html[data-contrast="high"] .menu-overlay,
html[data-contrast="high"] .kmap-kopf-leiste,
html[data-contrast="high"] .feld-cta,
html[data-contrast="high"] .hero-credit{
  background:#000 !important;
}
html[data-contrast="high"] .hours-section *,
html[data-contrast="high"] .menu-overlay *,
html[data-contrast="high"] .kmap-kopf-leiste *,
html[data-contrast="high"] .feld-cta *,
html[data-contrast="high"] .hero-credit *{
  color:#fff !important;
  border-color:#fff !important;
}
html[data-contrast="high"] .menu-overlay a,
html[data-contrast="high"] .feld-cta a{ text-decoration:underline !important; }
html[data-contrast="high"] .menu-close svg{ stroke:#fff !important; }
html[data-contrast="high"] .menu-logo img{ filter:brightness(0) invert(1) !important; }
/* Mint-Flächen und Verläufe werden weiß mit schwarzem Rahmen */
html[data-contrast="high"] .hero-info,
html[data-contrast="high"] .team-verstaerkung,
html[data-contrast="high"] .abschluss-kasten,
html[data-contrast="high"] .faq-block,
html[data-contrast="high"] .funnel,
html[data-contrast="high"] .team-card{
  background:#fff !important; border:2px solid #000 !important;
}

/* Fokus-Indikator im Kontrastmodus stärken */
html[data-contrast="high"] *:focus-visible{
  outline:3px solid #000 !important;
  outline-offset:3px;
}

/* Animationen aus */
html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after{
  animation-duration:.001s!important; animation-delay:0s!important;
  transition-duration:.001s!important; transition-delay:0s!important;
  scroll-behavior:auto!important;
}

/* Lesefokus — der Bereich, der gerade per Maus überfahren wird, wird hervorgehoben */
html[data-focus-mode="on"] body{ background:#fafafa; }
html[data-focus-mode="on"] p:hover, html[data-focus-mode="on"] li:hover,
html[data-focus-mode="on"] h1:hover, html[data-focus-mode="on"] h2:hover,
html[data-focus-mode="on"] h3:hover, html[data-focus-mode="on"] h4:hover{
  background:#fff8d4; outline:2px solid #FFC400; outline-offset:4px;
  border-radius:4px;
}

/* Print: Drawer verstecken */
@media print{ .sc-drawer{ display:none!important; } }


/* ─── Systemeinstellung „Bewegung reduzieren" ───────────────────── */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001s !important; animation-iteration-count:1 !important;
    transition-duration:.001s !important; scroll-behavior:auto !important;
  }
}

/* ─── Sichtbarer Tastaturfokus auf allen Seiten ─────────────────── */
:focus-visible{ outline:2px solid #1F2F2F; outline-offset:3px; }
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid #638889; outline-offset:2px;
}
input[type="range"]:focus-visible{ outline:2px solid #638889; outline-offset:4px; }

/* ─── Skip-Link: erster Tab-Stopp, sichtbar nur bei Fokus ────────── */
.skip-link{
  position:absolute; left:16px; top:-60px; z-index:1000;
  padding:10px 16px; background:#1F2F2F; color:#fff; border-radius:8px;
  font-family:'Jost', system-ui, sans-serif; font-size:14px; font-weight:500;
  text-decoration:none; transition:top .2s;
}
.skip-link:focus{ top:16px; outline:2px solid #fff; outline-offset:2px; }