/* ==========================================================================
   Ergotherapie am Wormser Tor · Design-System (Stand 10/2026)
   Marke gemessen (brand/BRAND.md): Logo-Blau #8FABDD (Torzeichnung) · Schrift im Logo #000000.
   Hell, ruhig, gut lesbar. EINE Content-Breite, EINE Abstandsskala. Reveal gatet nie Inhalt.
   ========================================================================== */

/* ---------- Schriften (selbst gehostet, SIL OFL) ---------- */
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;src:url("../fonts/figtree-latin-var.woff2?v=2") format("woff2")}
@font-face{font-family:"Figtree";font-style:italic;font-weight:300 900;font-display:swap;src:url("../fonts/figtree-latin-italic-var.woff2?v=2") format("woff2")}
@font-face{font-family:"Literata";font-style:normal;font-weight:200 900;font-display:swap;src:url("../fonts/literata-latin-var.woff2?v=2") format("woff2")}
@font-face{font-family:"Literata";font-style:italic;font-weight:200 900;font-display:swap;src:url("../fonts/literata-latin-italic-var.woff2?v=2") format("woff2")}

/* ---------- Tokens ---------- */
:root{
  color-scheme:light;
  /* Farben: Logo + abgeleitete Töne (Kontraste in brand/BRAND.md) */
  --bg:#FAFAF8; --weiss:#FFFFFF;
  --ink:#1D2434; --ink-2:#465065; --ink-3:#596377;
  --blau:#2F4C8C; --blau-tief:#233A6E; --blau-nacht:#1B2D57;
  --tor:#8FABDD; --tor-dunkel:#5A78B5; --tor-hell:#DCE5F6; --tor-zart:#EEF2FA;
  --salbei:#EDF1EA; --salbei-linie:#D3DCCF;
  --linie:rgba(29,36,52,.11); --linie-2:rgba(29,36,52,.2); --linie-feld:#7C8496;
  --linie-hell:rgba(255,255,255,.18); --linie-hell-2:rgba(255,255,255,.34);
  --fehler:#A3302A; --fehler-zart:#FBEDEC;
  --kb:#FFE58A;
  /* Schrift */
  --f-text:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-titel:"Literata",Georgia,"Times New Roman",serif;
  --t-h1:clamp(2.5rem,1.55rem + 3.4vw,4.25rem);      /* 40 → 68 */
  --t-h2:clamp(2rem,1.45rem + 2vw,3rem);              /* 32 → 48 */
  --t-h3:clamp(1.375rem,1.25rem + .45vw,1.625rem);    /* 22 → 26 */
  --t-gross:clamp(1.375rem,1.15rem + .8vw,1.875rem);  /* 22 → 30 */
  --t-lead:clamp(1.1875rem,1.1rem + .35vw,1.375rem);  /* 19 → 22 */
  --t-text:clamp(1.125rem,1.09rem + .15vw,1.1875rem); /* 18 → 19 */
  --t-klein:1.125rem;                                 /* 18, kleinster Inhaltstext (Briefing ≥ 18 px) */
  --t-label:1rem;                                     /* 16, nur Beschriftungen (Feldnamen, Schrittzähler) */
  --t-mini:.875rem;                                   /* 14, nur Beschriftungen */
  --lh-text:1.62;
  --ico-s:1.125rem; --ico-m:1.375rem; --ico-l:1.75rem; --ico-xl:2.25rem;
  /* EINE Abstandsskala: 8 12 16 24 32 48 72 112 */
  --s-1:.5rem; --s-2:.75rem; --s-3:1rem; --s-4:1.5rem; --s-5:2rem; --s-6:3rem; --s-7:4.5rem; --s-8:7rem;
  --s-sekt:var(--s-8);
  --tor-schwelle:clamp(6.5rem,5rem + 4vw,9rem); /* Größe der Tor-Schwelle; zugleich Zusatzluft der Fläche davor */
  /* EINE Content-Breite */
  --wrap:76rem; --rand:clamp(1.25rem,5vw,3.5rem);
  /* Formen: Knöpfe Pille · Karten 16 px · Felder 12 px · Bögen (Logo-Motiv) halbrund */
  --r:1rem; --r-klein:.75rem; --r-mini:.375rem; --r-linie:3px; --r-pille:999px;
  --schatten-klein:0 1px 2px rgba(29,36,52,.06),0 6px 18px -8px rgba(29,36,52,.16);
  --schatten:0 1px 2px rgba(29,36,52,.05),0 18px 44px -18px rgba(29,36,52,.22);
  --schatten-tief:0 24px 64px -20px rgba(27,45,87,.38);
  --ring:0 0 0 4px rgba(47,76,140,.22); --ring-fehler:0 0 0 4px rgba(163,48,42,.2);
  /* Kopf */
  --h-kopf:5rem; --h-bar:3.25rem; /* Schnellkontakt unten: 52 px (Korrekturrunde 4, vorher 64) */
  /* Bewegung */
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-in:cubic-bezier(.7,0,.84,0); --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-zeichnen:cubic-bezier(.45,.05,.25,1); /* Linienzeichnung: gleichmäßig sichtbar zeichnen, nicht in 200 ms fertig */
  --d-micro:140ms; --d-exit:160ms; --d-klein:220ms; --d-mittel:420ms; --d-lang:700ms;
  /* Ebenen */
  --z-rail:40; --z-kopf:50; --z-menue:45; --z-lightbox:100; --z-opener:200; --z-skip:300;
}
@media (max-width:47.99em){:root{--s-sekt:var(--s-7);--h-kopf:4.25rem}}
@media (min-width:80em){:root{--rand:5rem}}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--h-kopf);background:var(--bg);-webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--f-text);font-size:var(--t-text);line-height:var(--lh-text);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:clip;font-variant-numeric:lining-nums}
img,picture,svg,video{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4{font-family:var(--f-titel);font-weight:560;line-height:1.12;letter-spacing:-.012em;margin:0;text-wrap:balance;hyphens:manual;color:var(--ink);font-optical-sizing:auto}
h1{font-size:var(--t-h1);line-height:1.04}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);line-height:1.22;letter-spacing:-.005em}
/* Kernbegriff jeder Überschrift */
.kern{color:var(--blau)}
.cta-bande .kern{color:var(--tor)}
p{margin:0}
p+p{margin-top:var(--s-3)}
a{color:var(--blau);text-decoration-thickness:1px;text-underline-offset:.2em}
a:not([class]):hover{color:var(--blau-tief)}
button{font:inherit;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{padding:0}
strong,b{font-weight:700}
address{font-style:normal}
figure{margin:0}
::selection{background:var(--tor-hell);color:var(--ink)}
:focus-visible{outline:3px solid var(--blau);outline-offset:3px;border-radius:var(--r-mini)}
[tabindex="-1"]:focus{outline:none}
.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}
.skip{position:fixed;left:var(--s-3);top:var(--s-3);z-index:var(--z-skip);padding:var(--s-2) var(--s-4);background:var(--blau);color:var(--weiss);border-radius:var(--r-pille);font-weight:700;text-decoration:none;transform:translateY(-200%);transition:transform var(--d-klein) var(--ease-out)}
.skip:focus{transform:none;color:var(--weiss)}
.skip:hover{color:var(--weiss)}
.lead{font-size:var(--t-lead);line-height:1.55;color:var(--ink-2)}
.copy{color:var(--ink-2)}
@media (min-width:48em){.lead,.copy{max-width:60ch}.copy p,.lead{text-wrap:pretty}}
@media (max-width:47.99em){.anfrage__lead,.fragen__hilfe p,.lead,.copy p,.fach__text p,.schritt__karte p,.faq__antwort p,.cta-bande p,.bereich span,.kontakt__liste span{text-wrap:wrap;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:12 5 5}}

/* Merker [KUNDE BESTÄTIGEN]: unsichtbar, im Prüfmodus (/?pruefen) als gelbe Marke */
.kb,.nur-pruefen{display:none}
.pruefen .kb{display:inline-block;margin:.35em .35em 0 0;padding:.15em .55em;border-radius:var(--r-mini);background:var(--kb);color:#3A2E00;font:700 .8125rem/1.4 var(--f-text);letter-spacing:0;vertical-align:middle}
.pruefen .nur-pruefen{display:block}

/* ---------- Layout ---------- */
.wrap{width:min(100% - 2*var(--rand),var(--wrap));margin-inline:auto}
.sekt{position:relative;padding-block:var(--s-sekt)}
.sekt--tor{background:var(--tor-zart)}
.sekt--salbei{background:var(--salbei)}
.kopfblock{display:grid;gap:var(--s-3);margin-bottom:var(--s-6);max-width:46rem}
.kopfblock--mitte{margin-inline:auto;text-align:center;justify-items:center}
.kopfblock--mitte .lead{margin-inline:auto}
.schmal{max-width:46rem}

/* ---------- Knöpfe: Pille, Hub beim Hover, Druck .97 ---------- */
.knopf{--bg:var(--blau);--fg:var(--weiss);--rahmen:var(--blau);--bg-hover:var(--blau-tief);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:3.25rem;padding:.75em 1.6em;border-radius:var(--r-pille);border:2px solid var(--rahmen);background:var(--bg);color:var(--fg);font-family:var(--f-text);font-weight:700;font-size:1.0625rem;line-height:1.2;letter-spacing:.005em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform var(--d-micro) var(--ease-out),background-color var(--d-klein),border-color var(--d-klein),color var(--d-klein),box-shadow var(--d-klein)}
.knopf svg{width:1.25em;height:1.25em;flex:none;transition:transform var(--d-klein) var(--ease-out)}
.knopf:hover{color:var(--fg)}
.knopf:active{transform:scale(.97)}
.knopf--rand{--bg:transparent;--fg:var(--blau);--rahmen:var(--blau);--bg-hover:var(--tor-zart)}
.knopf--hell{--bg:var(--weiss);--fg:var(--blau-tief);--rahmen:var(--weiss);--bg-hover:var(--tor-zart)}
.knopf--rand-hell{--bg:transparent;--fg:var(--weiss);--rahmen:var(--linie-hell-2);--bg-hover:rgba(255,255,255,.1)}
.knopf--klein{min-height:2.75rem;padding:.55em 1.2em;font-size:1rem}
.knopf__nummer{font-weight:700;letter-spacing:.01em;padding-left:.6em;margin-left:.1em;border-left:1px solid currentColor;border-left-color:color-mix(in srgb,currentColor 40%,transparent)}
@media (hover:hover) and (pointer:fine){
  .knopf:hover{background:var(--bg-hover);border-color:var(--bg-hover);box-shadow:0 12px 24px -12px rgba(27,45,87,.55);transform:translateY(-1px)}
  .knopf--rand:hover{border-color:var(--blau-tief);color:var(--blau-tief);box-shadow:none}
  .knopf--rand-hell:hover{border-color:var(--weiss);box-shadow:none}
  .knopf:hover svg:last-child:not(:first-child){transform:translateX(3px)}
  .knopf:active{transform:translateY(0) scale(.97);box-shadow:none}
}
/* Mobil: jeder Knopf im Inhalt so breit wie der Inhaltsbereich (AUSSTATTUNG Nr. 21) */
@media (max-width:40em){main .knopf,.nav .knopf{width:100%}}

/* ---------- Kopf: Logo · Navigation · Telefon · Termin ---------- */
.kopf{position:sticky;top:0;z-index:var(--z-kopf);background:rgba(250,250,248,.94);transition:box-shadow var(--d-klein),background-color var(--d-klein)}
@supports (backdrop-filter:blur(1px)){.kopf{background:rgba(250,250,248,.82);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}}
.kopf.ist-gescrollt{box-shadow:0 1px 0 var(--linie),0 10px 24px -18px rgba(29,36,52,.35)}
.kopf__innen{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);height:var(--h-kopf)}
.kopf__logo{position:relative;z-index:3;display:inline-flex;align-items:center;min-height:2.75rem;flex:none;transition:opacity var(--d-mittel) var(--ease-out),transform var(--d-mittel) var(--ease-out)}
.kopf__logo img{height:4rem;width:auto} /* Logo der Kundin (Seitenverhältnis 2,15): so hoch, dass der Schriftzug lesbar bleibt */
@media (max-width:47.99em){.kopf__logo img{height:3.5rem}}
.nav{display:flex;align-items:center;gap:var(--s-4)}
.nav__liste{display:flex;align-items:center;gap:.125rem}
.nav__link{position:relative;display:inline-flex;align-items:center;min-height:2.75rem;padding:.4em .7em;border-radius:var(--r-pille);color:var(--ink);font-weight:600;font-size:1.0625rem;text-decoration:none;white-space:nowrap;transition:color var(--d-klein),background-color var(--d-klein)}
.nav__link::after{content:"";position:absolute;left:.7em;right:.7em;bottom:.3em;height:2px;border-radius:var(--r-linie);background:var(--tor);transform:scaleX(0);transform-origin:left;transition:transform var(--d-mittel) var(--ease-out)}
.nav__link[aria-current="true"]{color:var(--blau)}
.nav__link[aria-current="true"]::after{transform:scaleX(1)}
@media (hover:hover){.nav__link:hover{color:var(--blau);background:var(--tor-zart)}}
.nav__link:active{opacity:.75}
/* Unterpunkte „Ergotherapie“ → Fachbereiche (Kundenrunde 1): am Desktop Aufklappliste am Pfeil-Knopf und beim Überfahren */
.nav__punkt--unter{position:relative;display:flex;align-items:center}
.nav__auf{display:inline-grid;place-items:center;width:1.75rem;height:2.75rem;margin-left:-.45em;padding:0;border:0;border-radius:var(--r-pille);background:none;color:var(--ink-2);cursor:pointer}
.nav__auf svg{width:1rem;height:1rem;transition:transform var(--d-klein) var(--ease-out)}
.nav__auf[aria-expanded="true"] svg{transform:rotate(180deg)}
@media (hover:hover){.nav__auf:hover{color:var(--blau);background:var(--tor-zart)}}
.nav__unter{position:absolute;top:100%;left:0;z-index:4;display:grid;gap:2px;min-width:16rem;margin-top:var(--s-1);padding:var(--s-1);border:1px solid var(--linie);border-radius:var(--r);background:var(--weiss);box-shadow:var(--schatten);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity var(--d-klein) var(--ease-in),transform var(--d-klein) var(--ease-in),visibility 0s linear var(--d-klein)}
.nav__unter::before{content:"";position:absolute;left:0;right:0;top:-.6rem;height:.6rem}
.nav__punkt--unter.ist-offen .nav__unter{opacity:1;visibility:visible;transform:none;transition:opacity var(--d-klein) var(--ease-out),transform var(--d-klein) var(--ease-out),visibility 0s}
@media (hover:hover) and (min-width:80em){.nav__punkt--unter:hover .nav__unter{opacity:1;visibility:visible;transform:none;transition:opacity var(--d-klein) var(--ease-out),transform var(--d-klein) var(--ease-out),visibility 0s}}
.nav__unterlink{display:flex;align-items:center;min-height:2.75rem;padding:0 var(--s-3);border-radius:var(--r-klein);color:var(--ink);font-weight:600;font-size:1rem;text-decoration:none;white-space:nowrap}
@media (hover:hover){.nav__unterlink:hover{color:var(--blau);background:var(--tor-zart)}}
.nav__aktionen{display:flex;align-items:center;gap:var(--s-3)}
.nav__tel{display:inline-flex;align-items:center;gap:.45em;min-height:2.75rem;color:var(--ink);font-weight:700;font-size:1.0625rem;text-decoration:none;white-space:nowrap}
.nav__tel svg{width:var(--ico-m);height:var(--ico-m);color:var(--tor-dunkel)}
@media (hover:hover){.nav__tel:hover{color:var(--blau)}}
.nav__fuss{display:none}
.burger{display:none;position:relative;z-index:3;width:3rem;height:3rem;margin-right:calc(-1 * (3rem - 1.8rem) / 2);border:0;background:none;border-radius:var(--r-pille);align-items:center;justify-content:center;cursor:pointer;color:var(--ink)}
.burger span{position:relative;display:block;width:1.5rem;height:2px;border-radius:var(--r-linie);background:currentColor;transition:background-color var(--d-klein)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:100%;height:2px;border-radius:var(--r-linie);background:currentColor;transition:transform var(--d-klein) var(--ease-out)}
.burger span::before{top:-7px}.burger span::after{top:7px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}
.burger:active{transform:scale(.94)}
@media (hover:hover){.burger:hover{background:var(--tor-zart)}.feld input:hover,.feld textarea:hover{border-color:var(--ink-2)}}
/* Zwischen 80em und 90em: Navigation enger */
@media (min-width:80em) and (max-width:89.99em){.nav{gap:var(--s-3)}.nav__link{font-size:1rem;padding-inline:.55em}.nav__link::after{left:.55em;right:.55em}.nav__aktionen{gap:var(--s-2)}}

/* Mobil + Tablet: Vollbild-Menü unter dem Kopf, Logo links und Schließen an der Burger-Stelle bleiben stehen */
@media (max-width:79.99em){
  .burger{display:inline-flex}
  .nav{position:fixed;inset:0;z-index:2;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:calc(var(--h-kopf) + var(--s-3)) var(--rand) calc(var(--s-6) + env(safe-area-inset-bottom));background:var(--bg);overflow:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--d-exit) var(--ease-in),visibility 0s linear var(--d-exit)}
  .nav.ist-offen{opacity:1;visibility:visible;pointer-events:auto;transition:opacity var(--d-klein) var(--ease-out),visibility 0s}
  .nav__liste{flex-direction:column;align-items:stretch;gap:0;width:min(100%,var(--wrap));margin-inline:auto}
  .nav__liste>li{border-bottom:1px solid var(--linie);opacity:0;transform:translateY(12px);transition:opacity .35s var(--ease-out),transform .45s var(--ease-out)}
  .nav.ist-offen .nav__liste>li{opacity:1;transform:none}
  .nav.ist-offen .nav__liste>li:nth-child(1){transition-delay:50ms}.nav.ist-offen .nav__liste>li:nth-child(2){transition-delay:90ms}.nav.ist-offen .nav__liste>li:nth-child(3){transition-delay:130ms}.nav.ist-offen .nav__liste>li:nth-child(4){transition-delay:170ms}.nav.ist-offen .nav__liste>li:nth-child(5){transition-delay:210ms}
  /* Unterpunkte im Menü: immer sichtbar, eingerückt als kleine Pillen */
  .nav__punkt--unter{display:block}
  .nav__auf{display:none}
  .nav__unter{position:static;display:flex;flex-wrap:wrap;gap:var(--s-1);min-width:0;margin:0;padding:0 0 var(--s-3);border:0;background:none;box-shadow:none;opacity:1;visibility:inherit;transform:none;transition:none}
  .nav__unter::before{content:none}
  .nav__unterlink{min-height:2.75rem;padding:0 .95em;border:1px solid var(--linie-2);border-radius:var(--r-pille);background:var(--weiss);font-size:var(--t-label)}.nav.ist-offen .nav__liste>li:nth-child(6){transition-delay:250ms}
  .nav__link{display:flex;width:100%;padding:.7em 0;border-radius:0;font-family:var(--f-titel);font-weight:500;font-size:clamp(1.5rem,1.3rem + 1vw,1.875rem);line-height:1.2}
  .nav__link::after{left:0;right:auto;width:2.5rem;bottom:.45em}
  @media (hover:hover){.nav__link:hover{background:none}}
  .nav__aktionen{flex-direction:column;align-items:stretch;gap:var(--s-2);width:min(100%,var(--wrap));margin:var(--s-5) auto 0;opacity:0;transform:translateY(12px);transition:opacity .35s var(--ease-out) .29s,transform .45s var(--ease-out) .29s}
  .nav.ist-offen .nav__aktionen{opacity:1;transform:none}
  .nav__tel{justify-content:center;min-height:3.25rem;border:2px solid var(--blau);border-radius:var(--r-pille);color:var(--blau)}
  .nav__aktionen .knopf{min-height:3.25rem;font-size:1.0625rem}
  .nav__fuss{display:grid;gap:var(--s-2);width:min(100%,var(--wrap));margin:var(--s-5) auto 0;padding-top:var(--s-4);border-top:1px solid var(--linie);color:var(--ink-2);font-size:var(--t-klein)}
  .nav__fuss a,.nav__ort{display:inline-flex;align-items:center;gap:.5em;min-height:2.75rem;color:var(--blau);text-decoration:none;overflow-wrap:anywhere}
  .nav__ort{color:var(--ink-2)}
  .nav__zeile{white-space:nowrap} /* Umbruch nur nach dem Komma: Straße / PLZ Ort */
  .nav__fuss svg{width:var(--ico-m);height:var(--ico-m);flex:none;color:var(--tor-dunkel)}
  html.menue-offen{overflow:hidden}
  html.menue-offen .kopf{background:var(--bg);box-shadow:0 1px 0 var(--linie);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (max-width:79.99em) and (prefers-reduced-motion:reduce){.nav,.nav__liste>li,.nav__aktionen{transition:none}}
/* Tablet-Querformat: Menüpunkte zweispaltig, damit Aktionen im Bild bleiben */
@media (max-width:79.99em) and (min-width:48em){.nav__liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-6)}.nav__aktionen{flex-direction:row}.nav__aktionen>*{flex:1}}

/* Scroll-Fortschritt: Linie am unteren Kopfrand */
.fortschritt{position:absolute;left:0;right:0;bottom:0;height:3px;pointer-events:none}
.fortschritt i{display:block;height:100%;background:var(--tor);transform-origin:left;transform:scaleX(0)}
@supports (animation-timeline:scroll()){
  .fortschritt i{animation:fortschritt linear both;animation-timeline:scroll(root)}
  @keyframes fortschritt{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
html.menue-offen .fortschritt{opacity:0}

/* ---------- Wormser-Tor-Zeichnung (Signatur) ---------- */
.tor{width:100%;height:auto;color:var(--tor);overflow:visible}
.tor path,.tor ellipse{vector-effect:non-scaling-stroke;stroke-width:var(--tor-strich,1.6px)}
.tor .tor__detail{opacity:var(--tor-detail,.55)}
.tor .tor__detail path,.tor .tor__detail ellipse{stroke-width:var(--tor-strich-fein,1px)}

/* Tor-Schwelle: das Tor steht auf der Kante zwischen zwei Flächen (Ornament an Sektionsübergängen) */
.schwelle{position:absolute;left:50%;top:0;z-index:1;width:var(--tor-schwelle);transform:translate(-50%,calc(-100% + 1px));color:var(--tor);--tor-strich:1.4px;--tor-strich-fein:.9px;--tor-detail:.6;pointer-events:none}
.schwelle .tor{color:inherit}

/* ---------- Bilder und Bildplätze ---------- */
.bild{position:relative;overflow:hidden;border-radius:var(--r);background:var(--tor-zart);isolation:isolate}
.bild img{width:100%;height:100%;object-fit:cover;object-position:var(--fokus,50% 50%)}
.bild--platz{display:grid;place-items:center;align-content:center;gap:var(--s-2);color:var(--tor-dunkel);background:
  radial-gradient(120% 90% at 20% 0%,rgba(255,255,255,.75),transparent 60%),
  linear-gradient(160deg,var(--tor-zart),var(--tor-hell));border:1px solid rgba(90,120,181,.18)}
.bild__zeichen svg{width:var(--ico-xl);height:var(--ico-xl);opacity:.8}
.bild__platz-text{display:grid;gap:.25em;justify-items:center;text-align:center;padding-inline:var(--s-4);font-size:var(--t-mini);font-weight:700;letter-spacing:.02em;color:var(--ink-3)}
.bild__platz-text small{font-weight:400;font-size:.8125rem;max-width:28ch;color:var(--ink-3)}
.ki-marke{position:absolute;top:var(--s-2);right:var(--s-2);z-index:2;padding:.2em .6em;border-radius:var(--r-pille);background:rgba(29,36,52,.72);color:var(--weiss);font-size:.75rem;font-weight:700;letter-spacing:.03em;line-height:1.5;pointer-events:none}

/* ==========================================================================
   Opener: Tor zeichnet sich, Logo erscheint · höchstens 1,5 s · nur erster Besuch je Sitzung
   ========================================================================== */
.opener{position:fixed;inset:0;z-index:var(--z-opener);display:grid;place-items:center;background:var(--bg);animation:opener-weg .3s var(--ease-in) 1.2s both}
/* Ladebild: nur das Tor, das sich zeichnet (Mike 08.10.2026: kein Logo im Ladebild) */
.opener__innen{display:grid;justify-items:center;width:min(20rem,70vw)}
.opener__tor{width:min(11rem,44vw);--tor-strich:1.8px;--tor-strich-fein:1.1px;--tor-detail:.6}
.opener .tor path,.opener .tor ellipse{stroke-dasharray:1;stroke-dashoffset:1;animation:tor-zeichnen .8s var(--ease-zeichnen) forwards}
.opener .tor__detail path,.opener .tor__detail ellipse{animation-duration:.6s;animation-delay:.2s}
.opener.ist-fertig{animation:opener-raus .3s var(--ease-in) both}
html.opener-aktiv{overflow:hidden}
html.ohne-opener .opener{display:none}
@keyframes tor-zeichnen{to{stroke-dashoffset:0}}
@keyframes opener-weg{to{opacity:0;visibility:hidden}}
@keyframes opener-raus{from{opacity:1}to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){
  .opener{animation:opener-weg .25s linear .35s both}
  .opener .tor path,.opener .tor ellipse{animation:none;stroke-dashoffset:0}
}

/* ==========================================================================
   Hero
   ========================================================================== */
/* Füllt den sichtbaren Bereich unter der Kopfzeile, Inhalt steht mittig (Korrekturrunde 2: vorher auf 44rem gedeckelt, Polster unten größer) */
.hero{position:relative;overflow:clip;padding-block:var(--s-6)}
.hero__raster{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-6);align-items:center;align-content:center;min-height:calc(100vh - var(--h-kopf) - 2 * var(--s-6));min-height:calc(100svh - var(--h-kopf) - 2 * var(--s-6))}
.hero__text{display:grid;gap:var(--s-4);justify-items:start;position:relative;z-index:2}
.hero h1{display:grid;gap:.3em;font-size:clamp(2.25rem,1.3rem + 2.9vw,3.6rem)}
.hero__ort{font-family:var(--f-text);font-size:clamp(1.125rem,1.05rem + .3vw,1.3125rem);font-weight:700;letter-spacing:.01em;line-height:1.3;color:var(--blau)}
.hero__kern{display:block;hyphens:none}
@media (max-width:30em){.hero__kern{hyphens:manual}}
.hero__lead{font-size:var(--t-lead);line-height:1.55;color:var(--ink-2);max-width:34ch;text-wrap:pretty}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-2)}
/* Bild im Tor: Maße aus der Zeichnung (viewBox 612×584): Bild X 162–450 (26,5 % / 47 %), Unterkante = Bodenlinie Y 578 */
.hero__bild{--foto:clamp(14rem,8rem + 9vw,17.5rem);--tor-b:calc(var(--foto) / .4706);position:relative;justify-self:end;width:var(--tor-b);height:calc(var(--tor-b) * .9542)}
.hero__tor{position:absolute;inset:auto 0 0 0;--tor-strich:1.5px;--tor-strich-fein:1px;--tor-detail:.5;pointer-events:none}
.hero__bogen{position:absolute;left:26.47%;width:47.06%;bottom:1.03%;z-index:1}
.hero__bogen .bild{border-radius:50% 50% var(--r) var(--r) / 40% 40% var(--r) var(--r);box-shadow:var(--schatten-tief)}
.hero__bogen .ki-marke{top:auto;bottom:var(--s-2);right:50%;transform:translateX(50%)}
.cta-bande__bild .ki-marke{top:var(--s-3);right:var(--rand);background:rgba(255,255,255,.16);border:1px solid var(--linie-hell-2)}
.hero__bogen .bild img{transform-origin:50% 40%}

/* ==========================================================================
   2 · Was ist Ergotherapie?
   ========================================================================== */
.ergo{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s-5) var(--s-7);align-items:center}
.ergo__bild .bild{max-width:26rem}
.ergo__text{display:grid;gap:var(--s-4);align-content:center}
.ergo__text h2{margin-bottom:var(--s-1)}
.ergo__satz{margin:0}
.ergo__satz--gross{font-family:var(--f-titel);font-size:var(--t-gross);line-height:1.4;font-weight:420;color:var(--ink);letter-spacing:-.005em;text-wrap:pretty}
.ergo__satz+.ergo__satz{margin-top:0}
.bereiche{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3);margin-top:var(--s-5)}
.bereich{display:grid;gap:.35em;align-content:start;padding:var(--s-4);border-radius:var(--r);background:var(--weiss);border:1px solid var(--linie);box-shadow:var(--schatten-klein)}
.bereich__ico{display:grid;place-items:center;width:3rem;height:3rem;margin-bottom:var(--s-1);border-radius:50%;background:var(--tor-zart);color:var(--blau)}
.bereich__ico svg{width:var(--ico-l);height:var(--ico-l)}
.bereich strong{font-family:var(--f-titel);font-weight:560;font-size:1.3125rem;line-height:1.25}
.bereich span:last-child{color:var(--ink-2);font-size:var(--t-klein);line-height:1.5}

/* Laufband: Alltagstätigkeiten, langsam, pausierbar */
.laufband{position:relative;margin-top:var(--s-7);border-block:1px solid var(--linie);background:var(--weiss)}
/* Das Fenster trägt die weichen Kanten, der Knopf liegt außerhalb der Maske */
.laufband__fenster{overflow:clip;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.laufband__spur{display:flex;width:max-content;animation:laufen 70s linear infinite}
.laufband__teil{display:flex;align-items:center;flex:none}
.laufband__wort{padding:var(--s-3) 0;font-family:var(--f-titel);font-size:clamp(1.25rem,1.1rem + .6vw,1.625rem);font-weight:420;font-style:italic;color:var(--ink-2);white-space:nowrap}
.laufband__trenner{display:grid;place-items:center;margin-inline:var(--s-5);color:var(--tor)}
.laufband__trenner svg{width:1.4rem;height:1.4rem}
@keyframes laufen{to{transform:translateX(-50%)}}
/* Überfahren der Textzeile hält kurz an; der Knopf liegt außerhalb, damit „weiter“ sofort wirkt */
.laufband__fenster:hover .laufband__spur,html.bewegung-aus .laufband__spur{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.laufband__spur{animation:none}.laufband__fenster{overflow-x:auto}}
/* Anhalten (WCAG 2.2.2): kleiner runder Knopf rechts im Band, über der Ausblend-Maske */
.laufband__pause{position:absolute;right:var(--rand);inset-block:0;z-index:1;display:grid;place-items:center;width:2.75rem;height:2.75rem;margin-block:auto;padding:0;border:1px solid var(--linie-2);border-radius:50%;background:var(--weiss);color:var(--blau);box-shadow:var(--schatten-klein);cursor:pointer;transition:background-color var(--d-klein),border-color var(--d-klein),transform var(--d-micro) var(--ease-out)}
.laufband__ico{display:grid}.laufband__ico svg{width:1.125rem;height:1.125rem}
.laufband__ico--weiter,.laufband__pause[aria-pressed="true"] .laufband__ico--pause{display:none}
.laufband__pause[aria-pressed="true"] .laufband__ico--weiter{display:grid}
.laufband__pause[aria-pressed="true"]{background:var(--tor-zart);border-color:var(--tor-dunkel)}
@media (hover:hover){.laufband__pause:hover{border-color:var(--blau);background:var(--tor-zart)}}
.laufband__pause:active{transform:scale(.96)}

/* ==========================================================================
   3 · Fachbereiche (Kundenrunde 1). Das Skript setzt data-fach-modus:
   „liste“ (< 64em): Klappliste, ein Tippen öffnet Bild und Erklärung
   „tabs“ (ab 64em): Auswahl links, eine Tafel rechts (alle Tafeln in einer Rasterzelle, nichts springt)
   Ohne Skript: alle Tafeln offen, ab 64em zweispaltig
   ========================================================================== */
.fach__wahl{display:none}
.fach__tafeln{display:grid;gap:var(--s-3)}
.fach__tafel{position:relative;overflow:hidden;border-radius:calc(var(--r) + .25rem);background:var(--weiss);border:1px solid var(--linie);box-shadow:var(--schatten-klein);scroll-margin-top:var(--s-4)}
.fach__titel{margin:0;font:inherit;letter-spacing:normal}
.fach__kopf{display:grid;grid-template-columns:3rem minmax(0,1fr);align-items:center;gap:var(--s-3);width:100%;min-height:4.75rem;padding:var(--s-3) var(--s-4);border:0;background:none;color:var(--ink);font:inherit;text-align:left}
.fach__ico{display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:var(--tor-zart);color:var(--blau);transition:background-color var(--d-klein),color var(--d-klein)}
.fach__ico svg{width:var(--ico-m);height:var(--ico-m)}
.fach__name{display:block;font-family:var(--f-titel);font-size:1.375rem;font-weight:560;line-height:1.2}
.fach__unter{display:block;margin-top:.1em;font-size:var(--t-klein);font-weight:600;line-height:1.35;color:var(--blau)}
.fach__pfeil{display:none}
.fach__inhalt .bild{border-radius:0;aspect-ratio:3/2 !important}
.fach__text{display:grid;gap:var(--s-2);align-content:start;padding:var(--s-4) var(--s-4) var(--s-5)}
.fach__text>p:not([class]){color:var(--ink-2)}
.fach__zwischen{margin-top:var(--s-1);font-weight:700;font-size:var(--t-klein);color:var(--ink)}
.fach__liste{display:grid;gap:.5em}
.fach__liste li{position:relative;display:block;padding-left:var(--s-4);font-size:var(--t-klein);line-height:1.5;color:var(--ink)}
/* Aufzählungspunkte (Kundin 15.10.2026): überall Dunkelblau, Stellenanzeige mit denselben Punkten */
.fach__liste li::before,.vorteil::before{content:"";position:absolute;left:.15rem;top:.62em;width:.45rem;height:.45rem;border-radius:50%;background:var(--blau)}
.fach__methoden{margin-top:var(--s-2);padding:var(--s-3);border-radius:var(--r-klein);background:var(--tor-zart);font-size:var(--t-klein);line-height:1.5;color:var(--ink)}
.fach__methoden strong{color:var(--blau)}
/* Klappliste */
.fach[data-fach-modus="liste"] .fach__kopf{grid-template-columns:3rem minmax(0,1fr) auto;cursor:pointer}
@media (max-width:47.99em){.fach[data-fach-modus="liste"] .fach__kopf{grid-template-columns:2.5rem minmax(0,1fr) auto;gap:var(--s-2);padding-inline:var(--s-3)}.fach[data-fach-modus="liste"] .fach__ico{width:2.5rem;height:2.5rem}}
.fach[data-fach-modus="liste"] .fach__pfeil{display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:50%;border:2px solid var(--tor-dunkel);color:var(--blau);transition:transform var(--d-klein) var(--ease-out)}
.fach[data-fach-modus="liste"] .fach__pfeil svg{width:1rem;height:1rem}
.fach[data-fach-modus="liste"] .fach__kopf[aria-expanded="true"] .fach__pfeil{transform:rotate(180deg)}
.fach[data-fach-modus="liste"] .fach__kopf[aria-expanded="true"] .fach__ico{background:var(--blau);color:var(--weiss)}
.fach[data-fach-modus="liste"] .fach__kopf:active{background:var(--tor-zart)}
@media (hover:hover){.fach[data-fach-modus="liste"] .fach__kopf:hover .fach__name{color:var(--blau)}}
@media (prefers-reduced-motion:no-preference){
  .fach[data-fach-modus="liste"] .fach__inhalt:not([hidden]){animation:fach-auf .35s var(--ease-out)}
  @keyframes fach-auf{from{opacity:0;transform:translateY(-6px)}}
}
@media (hover:hover) and (pointer:fine){
  .fach__inhalt .bild img{transition:transform var(--d-lang) var(--ease-out)}
  .fach__tafel:hover .bild img{transform:scale(1.03)}
}
@media (min-width:64em){
  /* ohne Skript: zweispaltig, alles offen */
  .fach:not([data-fach-modus]) .fach__tafeln{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
  /* Auswahl + Tafel */
  .fach[data-fach-modus="tabs"]{display:grid;grid-template-columns:minmax(16rem,.36fr) minmax(0,1fr);gap:var(--s-5);align-items:start}
  .fach[data-fach-modus="tabs"] .fach__wahl{display:grid;gap:var(--s-2)}
  .fach__tab{display:grid;grid-template-columns:3rem minmax(0,1fr);align-items:center;gap:var(--s-3);width:100%;min-height:4.5rem;padding:var(--s-2) var(--s-3);border:1px solid var(--linie);border-radius:var(--r);background:var(--weiss);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:border-color var(--d-klein),box-shadow var(--d-klein),transform var(--d-micro) var(--ease-out)}
  .fach__tab-ico{display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:var(--tor-zart);color:var(--blau);transition:background-color var(--d-klein),color var(--d-klein)}
  .fach__tab-ico svg{width:var(--ico-m);height:var(--ico-m)}
  .fach__tab strong{display:block;font-family:var(--f-titel);font-size:1.25rem;font-weight:560;line-height:1.25}
  .fach__tab small{display:block;font-size:var(--t-klein);line-height:1.4;color:var(--ink-2)}
  .fach__tab[aria-selected="true"]{border-color:var(--blau);box-shadow:inset 0 0 0 1px var(--blau),var(--schatten-klein)}
  .fach__tab[aria-selected="true"] .fach__tab-ico{background:var(--blau);color:var(--weiss)}
  .fach__tab:active{transform:scale(.99)}
  .fach[data-fach-modus="tabs"] .fach__tafeln{grid-template-columns:minmax(0,1fr);gap:0}
  .fach[data-fach-modus="tabs"] .fach__tafel{grid-area:1 / 1 / 2 / 2;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);grid-template-rows:auto 1fr;transition:opacity .25s var(--ease-out)}
  .fach[data-fach-modus="tabs"] .fach__tafel[data-aus]{visibility:hidden;opacity:0;pointer-events:none}
  .fach[data-fach-modus="tabs"] .fach__titel{grid-column:1;grid-row:1}
  .fach[data-fach-modus="tabs"] .fach__kopf{padding:var(--s-5) var(--s-6) 0;min-height:0;pointer-events:none}
  .fach[data-fach-modus="tabs"] .fach__name{font-size:var(--t-h3)}
  .fach[data-fach-modus="tabs"] .fach__inhalt{display:contents}
  .fach[data-fach-modus="tabs"] .fach__inhalt .bild{grid-column:2;grid-row:1 / span 2;aspect-ratio:auto !important;height:100%;min-height:24rem}
  .fach[data-fach-modus="tabs"] .fach__text{grid-column:1;grid-row:2;padding:var(--s-3) var(--s-6) var(--s-5)}
}
@media (min-width:64em) and (hover:hover){.fach__tab:hover{border-color:var(--tor-dunkel)}}

/* ==========================================================================
   4 · Ablauf: Prozessstrahl mittig, Linie Kreis zu Kreis, wächst beim Scrollen
   ========================================================================== */
.strahl{--kreis:4rem;--strahl-gap:var(--s-5);position:relative;display:grid;gap:var(--strahl-gap)}
.strahl__linie{position:absolute;left:50%;top:var(--linie-oben,calc(var(--kreis) / 2));bottom:var(--linie-unten,calc(var(--kreis) / 2));width:3px;margin-left:-1.5px;border-radius:var(--r-linie);background:var(--tor);transform-origin:top;transform:scaleY(var(--fortschritt,1));pointer-events:none}
.strahl:not([data-strahl="an"]) .strahl__linie{display:none}
.schritt{position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--kreis) minmax(0,1fr);column-gap:var(--s-5);align-items:start}
.schritt::before{content:"";position:absolute;left:50%;top:calc(var(--kreis) / 2);bottom:calc(-1 * var(--strahl-gap) - var(--kreis) / 2);width:1px;margin-left:-.5px;background:var(--linie-2)}
.schritt:last-child::before{display:none}
.strahl:not([data-strahl="an"]) .schritt::before{width:3px;margin-left:-1.5px;background:var(--tor)}
.schritt__kreis{grid-column:2;grid-row:1;position:relative;z-index:1;display:grid;place-items:center;width:var(--kreis);height:var(--kreis);border-radius:50%;background:var(--weiss);border:2px solid var(--tor);color:var(--blau);transition:background-color var(--d-mittel),color var(--d-mittel),box-shadow var(--d-mittel),border-color var(--d-mittel)}
.schritt__kreis svg{width:var(--ico-l);height:var(--ico-l)}
.schritt.ist-da .schritt__kreis,.strahl:not([data-strahl="an"]) .schritt__kreis{background:var(--blau);border-color:var(--blau);color:var(--weiss);box-shadow:0 0 0 6px var(--tor-hell)}
.schritt__karte{grid-row:1;position:relative;padding:var(--s-4) var(--s-5);border-radius:var(--r);background:var(--weiss);border:1px solid var(--linie);box-shadow:var(--schatten-klein);transition:border-color var(--d-mittel),box-shadow var(--d-mittel)}
.schritt--links .schritt__karte{grid-column:1}
.schritt--rechts .schritt__karte{grid-column:3}
.schritt.ist-aktiv .schritt__karte{border-color:var(--tor);box-shadow:var(--schatten)}
.schritt__karte h3{font-size:1.375rem;margin-bottom:.35em}
.schritt__karte p{color:var(--ink-2);max-width:46ch}
.schritt__hinweis{display:grid;grid-template-columns:1.25rem minmax(0,1fr);gap:.55em;margin-top:var(--s-3);padding:var(--s-2) var(--s-3);border-radius:var(--r-klein);background:var(--tor-zart);font-size:var(--t-klein);line-height:1.5;color:var(--ink)}
.schritt__hinweis svg{width:1.25rem;height:1.25rem;margin-top:.15em;color:var(--blau)}
@media (prefers-reduced-motion:no-preference){
  [data-strahl="an"] .schritt .schritt__karte{opacity:.45;transform:translateY(10px);transition:opacity .6s var(--ease-out),transform .7s var(--ease-out),border-color var(--d-mittel),box-shadow var(--d-mittel)}
  [data-strahl="an"] .schritt.ist-da .schritt__karte{opacity:1;transform:none}
}

/* ==========================================================================
   5 · Über mich
   ========================================================================== */
.ueber{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s-7);align-items:center}
.ueber__portrait{position:relative}
.portrait-platz{position:relative;display:grid;place-items:center;aspect-ratio:4/5;border-radius:50% 50% var(--r) var(--r) / 40% 40% var(--r) var(--r);overflow:hidden;background:linear-gradient(170deg,var(--weiss),var(--tor-zart) 70%);border:1px solid rgba(90,120,181,.22)}
.portrait-platz__initialen{position:relative;font-family:var(--f-titel);font-size:clamp(4rem,3rem + 4vw,6.5rem);font-weight:380;letter-spacing:.04em;color:var(--blau);line-height:1;transform:translateY(-6%)}
.portrait-platz__text{position:absolute;bottom:var(--s-4);left:50%;transform:translateX(-50%);padding:.25em .9em;border-radius:var(--r-pille);background:rgba(255,255,255,.85);font-size:var(--t-mini);font-weight:700;color:var(--ink-3);white-space:nowrap}
.ueber__text{display:grid;gap:var(--s-3);justify-items:start}
.ueber__rolle{font-weight:700;color:var(--blau);font-size:1.125rem}
.ueber__text .copy{margin-top:var(--s-1)}
.ueber__gruss{display:grid;gap:.15em;margin-top:var(--s-3);padding-left:var(--s-4);border-left:2px solid var(--tor);font-family:var(--f-titel);font-style:italic;font-size:var(--t-gross);line-height:1.25;color:var(--ink)}
.ueber__gruss span{font-family:var(--f-text);font-style:normal;font-size:var(--t-klein);font-weight:700;color:var(--ink-2)}
.ueber__name{margin-top:var(--s-2);font-size:var(--t-h3)}
/* Team (Kundenrunde 1): Platzhalter im Torbogen wie das Porträt, bis Fotos da sind */
.team{display:grid;gap:var(--s-5);margin-top:var(--s-7);padding-top:var(--s-6);border-top:1px solid rgba(90,120,181,.2)}
.team__titel{font-size:var(--t-h3)}
.team__liste{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s-5) var(--s-4)}
/* sechs in einer Reihe erst ab 1280 px (darunter brechen Namen um), sonst 3 × 2 */
@media (max-width:79.99em){.team__liste{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mitglied{display:grid;justify-items:center;align-content:start;gap:.2rem;text-align:center}
.mitglied__bild{display:grid;place-items:center;width:100%;max-width:11rem;aspect-ratio:4/5;margin-bottom:var(--s-2);border-radius:50% 50% var(--r) var(--r) / 40% 40% var(--r) var(--r);background:linear-gradient(170deg,var(--weiss),var(--tor-zart) 70%);border:1px solid rgba(90,120,181,.18)}
.mitglied__bild span{font-family:var(--f-titel);font-size:clamp(1.75rem,1.4rem + 1vw,2.25rem);font-weight:380;letter-spacing:.04em;color:var(--blau);line-height:1}
.mitglied__name{font-weight:700;color:var(--ink);line-height:1.35}
.mitglied__rolle{font-size:var(--t-klein);color:var(--ink-2)}

/* ==========================================================================
   6 · Praxis-Galerie (vorbereitet)
   ========================================================================== */
.galerie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row dense;gap:var(--s-3)}
.galerie__eintrag--quer{grid-column:span 2}
.galerie__eintrag:nth-child(3){grid-column:1}
.galerie__knopf{position:relative;display:block;width:100%;height:100%;padding:0;border:0;border-radius:var(--r);overflow:hidden;cursor:zoom-in;background:var(--tor-zart)}
.galerie__eintrag--quer .galerie__knopf{aspect-ratio:16/10.5}
.galerie__eintrag--hoch .galerie__knopf{aspect-ratio:4/5}
.galerie__knopf img{width:100%;height:100%;object-fit:cover;object-position:var(--fokus,50% 50%);transition:transform var(--d-lang) var(--ease-out)}
.galerie__lupe{position:absolute;pointer-events:none;right:.75rem;bottom:.75rem;display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;background:rgba(255,255,255,.92);color:var(--blau);opacity:0;transform:scale(.9);transition:opacity var(--d-klein),transform var(--d-klein) var(--ease-out)}
.galerie__lupe svg{width:1.25rem;height:1.25rem}
@media (hover:hover){.galerie__knopf:hover img{transform:scale(1.03)}.galerie__knopf:hover .galerie__lupe{opacity:1;transform:none}}
.galerie__knopf:focus-visible{outline-offset:-4px}
.galerie__knopf:focus-visible .galerie__lupe{opacity:1;transform:none}

/* Google-Bewertung (Stimmen) */
.sekt--schmal{padding-block:var(--s-6)}
/* Karriere (Kundenrunde 1): Stellenanzeige aus dem Flyer der Praxis. Karte: links Stelle + Bewerbung, rechts das Paket */
.stellen{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"kopf paket" "aktion paket";gap:var(--s-5) var(--s-7);align-items:start;padding:var(--s-7) var(--s-6);border-radius:calc(var(--r) + .25rem);background:var(--weiss);border:1px solid var(--linie);box-shadow:var(--schatten-klein)}
.stellen__kopf{grid-area:kopf;display:grid;gap:var(--s-2);justify-items:start}
.stellen__ico{display:grid;place-items:center;width:4rem;height:4rem;margin-bottom:var(--s-1);border-radius:50%;background:var(--tor-zart);color:var(--blau)}
.stellen__ico svg{width:var(--ico-l);height:var(--ico-l)}
.stellen__stelle{font-family:var(--f-titel);font-size:var(--t-gross);font-weight:560;line-height:1.3;color:var(--ink)}
.stellen__details{display:flex;flex-wrap:wrap;gap:var(--s-1)}
.stellen__details li{padding:.3em .9em;border-radius:var(--r-pille);background:var(--tor-zart);font-size:var(--t-label);font-weight:600;color:var(--ink)}
.stellen__paket{grid-area:paket;display:grid;gap:var(--s-2);align-content:start}
.stellen__paket>p{color:var(--ink-2);max-width:60ch}
/* Vorteile kompakt (Mike 13.10.2026: „sehr überladen“): 18 px, normale Strichstärke, schlichtes Häkchen, Zusatz in derselben Zeile mit · */
.stellen__vorteile{display:grid;gap:var(--s-1);margin-top:var(--s-1)}
.vorteil{position:relative;padding-left:var(--s-4)}
.vorteil__text{font-size:var(--t-klein);line-height:1.5;color:var(--ink)}
.vorteil__zusatz{color:var(--ink-2)}
/* Bewerbung im eigenen, getönten Kasten; Aufruf in der Textschrift, damit er sich von der Stellenbezeichnung abhebt */
.stellen__aktion{grid-area:aktion;align-self:end;display:grid;gap:var(--s-3);justify-items:start;padding:var(--s-5);border-radius:var(--r);background:var(--tor-zart)}
.stellen__aufruf{font-family:var(--f-text);font-size:var(--t-lead);font-weight:700;line-height:1.35;color:var(--ink)}
@media (min-width:64em) and (max-width:79.99em){.stellen{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}} /* sonst ist die linke Spalte für „Anrufen · Nummer“ zu schmal */
.stellen__aktion{container-type:inline-size}
.stellen__knoepfe{display:grid;gap:var(--s-2)} /* zweispaltig: untereinander, gleich breit */
/* „Anrufen · Nummer“ braucht ungebrochen 303 px; in der Karte ist es am Handy enger: dann nur Symbol + Nummer (wie im Hero unter 360 px), aria-label nennt „Anrufen“ */
@container (max-width:18.95rem){.stellen__knoepfe .knopf__wort{display:none}.stellen__knoepfe .knopf__nummer{padding-left:0;margin-left:0;border-left:0}}
/* Platz für die Tor-Schwelle: Fläche davor bekommt unten so viel Luft, wie das Tor hoch ist */
.sekt:has(+ .sekt > .schwelle),main>.sekt:last-child{padding-bottom:calc(var(--s-sekt) + var(--tor-schwelle))}
.google-band{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s-3) var(--s-5);align-items:center;padding:var(--s-5);border-radius:calc(var(--r) + .25rem);background:var(--weiss);border:1px solid var(--linie);box-shadow:var(--schatten-klein)}
.google-band__wertung{display:grid;gap:var(--s-1);justify-items:start}
.google__logo{width:5.5rem;height:auto}
.sterne{display:inline-flex;gap:.1rem;color:#C98A04}
.sterne svg{width:1.375rem;height:1.375rem}
.google-band h2{font-size:clamp(1.375rem,1.2rem + .7vw,1.875rem);line-height:1.25}
.google-band__note{font-size:1.35em;color:var(--blau)}
.google-band p{color:var(--ink-2);font-size:var(--t-klein);margin-top:.25em}
.google-band__link{white-space:nowrap}
@media (max-width:63.99em){.google-band{grid-template-columns:minmax(0,1fr)}.google-band__link{justify-self:start}}

/* Lightbox (gescopt, „X von Y") */
.lightbox{position:fixed;inset:0;z-index:var(--z-lightbox);display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:rgba(18,24,38,.96);color:var(--weiss);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--d-exit) var(--ease-in),visibility 0s linear var(--d-exit)}
.lightbox.ist-offen{opacity:1;visibility:visible;pointer-events:auto;transition:opacity var(--d-klein) var(--ease-out),visibility 0s}
.lightbox__kopf{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--rand);font-weight:700}
.lightbox__buehne{position:relative;display:grid;place-items:center;padding:0 var(--rand);min-height:0}
.lightbox__buehne img{max-width:100%;max-height:calc(100vh - 12rem);max-height:calc(100svh - 12rem);width:auto;height:auto;border-radius:var(--r-klein);object-fit:contain}
.lightbox__knopf{display:inline-grid;place-items:center;width:3rem;height:3rem;border:1px solid var(--linie-hell-2);border-radius:50%;background:rgba(27,45,87,.9);color:var(--weiss);cursor:pointer;transition:background-color var(--d-klein)}
.lightbox__knopf svg{width:var(--ico-m);height:var(--ico-m)}
.lightbox__knopf:active{opacity:.8}
.lightbox__pfeil{position:absolute;top:calc(50% - 1.5rem)}
.lightbox__pfeil--zurueck{left:var(--rand)}.lightbox__pfeil--vor{right:var(--rand)}
.lightbox__fuss{display:grid;gap:var(--s-2);padding:var(--s-3) var(--rand) var(--s-4)}
.lightbox__thumbs{display:flex;gap:var(--s-1);justify-content:center;overflow-x:auto;padding:var(--s-1)}
.lightbox__thumbs button{flex:none;width:4.5rem;height:3.25rem;padding:0;border:2px solid transparent;border-radius:var(--r-mini);overflow:hidden;opacity:.6;cursor:pointer;background:none}
.lightbox__thumbs button img{width:100%;height:100%;object-fit:cover}
.lightbox__thumbs button[aria-current="true"]{opacity:1;border-color:var(--tor)}
.lightbox :focus-visible{outline-color:var(--tor)}

/* ==========================================================================
   7 · Häufige Fragen
   ========================================================================== */
.fragen{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:var(--s-5) var(--s-7);align-items:start}
.fragen__kopf{display:grid;gap:var(--s-5);position:sticky;top:calc(var(--h-kopf) + var(--s-5))}
.fragen__hilfe{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.2rem var(--s-3);align-items:center;padding:var(--s-4);border-radius:var(--r);background:var(--weiss);border:1px solid var(--linie);box-shadow:var(--schatten-klein)}
.fragen__ico{grid-row:1 / span 2;display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:var(--tor-zart);color:var(--blau)}
.fragen__ico svg{width:var(--ico-m);height:var(--ico-m)}
.fragen__hilfe p{color:var(--ink-2);font-size:var(--t-klein);line-height:1.45}
.fragen__tel{display:inline-flex;align-items:center;min-height:2.75rem;font-weight:700;font-size:1.25rem;text-decoration:none}
@media (hover:hover){.fragen__tel:hover{color:var(--blau-tief);text-decoration:underline;text-underline-offset:.2em}}
.faq details{border-bottom:1px solid var(--linie-2)}
.faq details:first-child{border-top:1px solid var(--linie-2)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);min-height:3.5rem;padding:var(--s-3) 0;cursor:pointer;list-style:none;font-family:var(--f-titel);font-weight:520;font-size:clamp(1.1875rem,1.1rem + .4vw,1.4375rem);line-height:1.3;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:focus-visible{outline-offset:4px}
.faq__plus{flex:none;display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:50%;border:2px solid var(--tor-dunkel);color:var(--blau);transition:transform var(--d-klein) var(--ease-out),background-color var(--d-klein),color var(--d-klein),border-color var(--d-klein)}
.faq__plus svg{width:1.1rem;height:1.1rem}
.faq details[open] .faq__plus{transform:rotate(45deg);background:var(--blau);border-color:var(--blau);color:var(--weiss)}
@media (hover:hover){.faq summary:hover{color:var(--blau)}.faq summary:hover .faq__plus{border-color:var(--blau)}}
.faq summary:active .faq__plus{transform:scale(.94)}
.faq details[open] summary:active .faq__plus{transform:rotate(45deg) scale(.94)}
.faq__antwort{padding:0 0 var(--s-4);color:var(--ink-2);max-width:62ch}
.faq__antwort p+p{margin-top:var(--s-2)}

/* ==========================================================================
   9 · CTA-Bande (Tor als großes Linienbild)
   ========================================================================== */
.cta-bande{position:relative;isolation:isolate;overflow:clip;padding-block:var(--s-8);background:var(--blau-nacht);color:var(--weiss);text-align:center}
.cta-bande__bild{position:absolute;inset:0;z-index:-2}
.cta-bande__bild .bild{width:100%;height:100% !important;aspect-ratio:auto !important;border-radius:0;background:none}
.cta-bande__bild .bild img{opacity:.16;filter:saturate(.6)}
.bild--platz-leer{background:none !important;border:0 !important}
.cta-bande__tor{position:absolute;left:50%;bottom:-8%;z-index:-1;width:min(64rem,150%);transform:translateX(-50%);--tor-strich:1.4px;--tor-strich-fein:.9px;--tor-detail:.6;opacity:.32;pointer-events:none}
.cta-bande__tor .tor{color:var(--tor)}
.cta-bande__tor{-webkit-mask-image:radial-gradient(ellipse 34% 30% at 50% 42%,transparent 55%,#000 100%);mask-image:radial-gradient(ellipse 34% 30% at 50% 42%,transparent 55%,#000 100%)}
.cta-bande__innen{position:relative;display:grid;gap:var(--s-4);justify-items:center}
.cta-bande__innen::before{content:"";position:absolute;inset:-2.5rem -3rem;z-index:-1;background:radial-gradient(closest-side,var(--blau-nacht) 72%,rgba(27,45,87,0));pointer-events:none}
.cta-bande h2{color:var(--weiss);font-size:clamp(2.25rem,1.5rem + 2.8vw,3.75rem);max-width:18ch}
.cta-bande p{color:rgba(255,255,255,.88);font-size:var(--t-lead);max-width:44ch}
.cta-bande__knoepfe{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-2);margin-top:var(--s-2)}
.cta-bande :focus-visible{outline-color:var(--tor-hell)}

/* ==========================================================================
   10 · Kontakt + Terminanfrage (Funnel)
   ========================================================================== */
.kontakt{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-areas:'karte anfrage';gap:var(--s-4) var(--s-5);align-items:stretch}
.kontakt__karte{grid-area:karte}
.anfrage{grid-area:anfrage}
.kontakt__karte{display:grid;gap:var(--s-4);padding:var(--s-5);border-radius:calc(var(--r) + .25rem);background:var(--tor-zart);border:1px solid rgba(90,120,181,.16)}
.kontakt__liste{display:grid;gap:var(--s-4)}
.kontakt__liste li{display:grid;grid-template-columns:3rem minmax(0,1fr);gap:var(--s-3);align-items:start}
.kontakt__ico{display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:var(--weiss);color:var(--blau)}
.kontakt__ico svg{width:var(--ico-m);height:var(--ico-m)}
.kontakt__liste div{display:grid;gap:.1em;min-width:0}
.kontakt__liste strong{font-size:var(--t-label);color:var(--ink-3);font-weight:700}
.kontakt__liste a,.kontakt__liste span{overflow-wrap:anywhere}
.kontakt__liste a{display:inline-block;padding-block:.45em;margin-block:-.45em;font-weight:700;text-decoration:none}
@media (hover:hover){.kontakt__liste a:hover{text-decoration:underline}}

.anfrage{scroll-margin-top:var(--s-4);display:grid;grid-template-rows:auto auto 1fr;align-content:start;gap:var(--s-2);padding:var(--s-5);border-radius:calc(var(--r) + .25rem);background:var(--weiss);border:1px solid var(--linie);box-shadow:var(--schatten);}
.anfrage__titel{font-size:clamp(1.625rem,1.4rem + .9vw,2.125rem)}
.anfrage__lead{color:var(--ink-2)}
/* Formular füllt die volle Höhe der Anfrage-Karte; Weiter/Senden steht unten */
.funnel{display:flex;flex-direction:column;gap:var(--s-4);margin-top:var(--s-3)}
.funnel__fortschritt{display:grid;gap:var(--s-1)}
.funnel__stand{font-size:var(--t-label);font-weight:700;color:var(--ink-3)}
.funnel__balken{height:6px;border-radius:var(--r-linie);background:var(--tor-zart);overflow:hidden}
.funnel__balken i{display:block;height:100%;border-radius:var(--r-linie);background:var(--blau);transform-origin:left;transform:scaleX(.2);transition:transform var(--d-mittel) var(--ease-out)}
.funnel__meldung{padding:var(--s-3);border-radius:var(--r-klein);background:var(--fehler-zart);border:1px solid rgba(163,48,42,.4);color:var(--fehler);font-weight:700}
.stufe{display:grid;gap:var(--s-3)}
.stufe__titel{font-family:var(--f-titel);font-weight:560;font-size:var(--t-h3);line-height:1.25;margin-bottom:var(--s-2);color:var(--ink)}
.stufe__hinweis{display:grid;grid-template-columns:1.25rem minmax(0,1fr);gap:.55em;font-size:var(--t-klein);line-height:1.5;color:var(--ink-2)}
.stufe__hinweis svg{width:1.25rem;height:1.25rem;margin-top:.15em;color:var(--blau)}
/* Antworten untereinander, Symbol links (Korrekturrunde 2: vorher drei Kästchen nebeneinander) */
.optionen{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-2)}
.option{position:relative;transition:transform var(--d-micro) var(--ease-out)}
.option input{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}
.option label{display:grid;grid-auto-flow:column;justify-content:start;align-items:center;gap:.75em;min-height:3.75rem;padding:var(--s-2) var(--s-3);border:2px solid var(--linie-feld);border-radius:var(--r);background:var(--weiss);text-align:left;font-weight:700;font-size:1.0625rem;line-height:1.3;cursor:pointer;transition:border-color var(--d-klein),background-color var(--d-klein),box-shadow var(--d-klein)}
.option label svg{width:var(--ico-l);height:var(--ico-l);color:var(--tor-dunkel);transition:color var(--d-klein)}
.option input:checked+label{border-color:var(--blau);background:var(--tor-zart);box-shadow:inset 0 0 0 1px var(--blau)}
.option input:checked+label svg{color:var(--blau)}
.option input:focus-visible+label{outline:3px solid var(--blau);outline-offset:3px}
.option label span small{display:block;margin-top:.1em;font-weight:400;font-size:var(--t-label);line-height:1.35;color:var(--ink-2)}
.feld__hinweis{margin-top:.25rem;font-size:var(--t-klein);line-height:1.45;color:var(--ink-3)}
.option:has(input:active){transform:scale(.98)}
@media (hover:hover){.option:hover label{border-color:var(--blau)}}
.gesundheit{display:grid;grid-template-columns:1.5rem minmax(0,1fr);gap:.65em;padding:var(--s-3);border-radius:var(--r-klein);background:var(--salbei);border:1px solid var(--salbei-linie);font-size:var(--t-klein);line-height:1.5;color:var(--ink)}
.gesundheit svg{width:1.5rem;height:1.5rem;color:var(--blau)}
.zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
.feld{display:grid;gap:.4em}
.feld label{font-weight:700;font-size:1.0625rem}
.feld__hilfe{font-weight:400;color:var(--ink-3);font-size:var(--t-klein)}
.feld input,.feld textarea{width:100%;font:inherit;font-size:1.125rem;color:var(--ink);background:var(--weiss);border:2px solid var(--linie-feld);border-radius:var(--r-klein);padding:.75em .9em;min-height:3.375rem;transition:border-color var(--d-klein),box-shadow var(--d-klein)}
.feld textarea{min-height:6.5rem;resize:vertical;line-height:1.5}
.feld input:focus,.feld textarea:focus{outline:none;border-color:var(--blau);box-shadow:var(--ring)}
.feld--fehler input,.feld--fehler textarea{border-color:var(--fehler)}
.feld--fehler input:focus,.feld--fehler textarea:focus{box-shadow:var(--ring-fehler)}
.check{display:grid;grid-template-columns:1.5rem minmax(0,1fr);gap:.7em;align-items:start;font-size:var(--t-klein);line-height:1.5;color:var(--ink-2);cursor:pointer}
.check input{width:1.5rem;height:1.5rem;margin:.05em 0 0;accent-color:var(--blau);cursor:pointer}
.check--fehler{color:var(--fehler)}.check--fehler input{outline:2px solid var(--fehler);outline-offset:2px}
.funnel__ohne-js{padding:var(--s-3);border-radius:var(--r-klein);background:var(--tor-zart);font-size:var(--t-klein)}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.funnel__nav{display:flex;justify-content:space-between;gap:var(--s-2);flex-wrap:wrap;margin-top:auto;padding-top:var(--s-3);border-top:1px solid var(--linie)}
.funnel__nav .funnel__zurueck{margin-right:auto}
.funnel__nav .funnel__weiter,.funnel__nav .funnel__senden{margin-left:auto}

/* ---------- Seitenköpfe (Danke, 404) und Rechtsseiten ---------- */
.seitenkopf{padding-block:var(--s-7) var(--s-8)}
.seitenkopf .wrap{display:grid;gap:var(--s-4);justify-items:start}
.seitenkopf__ico{display:grid;place-items:center;width:4rem;height:4rem;border-radius:50%;background:var(--blau);color:var(--weiss)}
.seitenkopf__ico svg{width:2rem;height:2rem}
.seitenkopf__tor{width:12rem;--tor-strich:1.5px;--tor-strich-fein:1px}
.seitenkopf__knoepfe{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-2);justify-self:stretch}
.recht{padding-block:var(--s-6) var(--s-8)}
.recht__innen{max-width:48rem}
.recht h1{margin-bottom:var(--s-5)}
.recht h1,.recht h2,.recht h3{overflow-wrap:break-word;hyphens:manual}
.recht h2{font-size:clamp(1.5rem,1.35rem + .6vw,1.875rem);margin:var(--s-6) 0 var(--s-3)}
.recht h3{font-size:1.25rem;margin:var(--s-4) 0 var(--s-2)}
.recht p,.recht li{color:var(--ink-2);overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.recht ul{display:grid;gap:.4em;margin:var(--s-2) 0;padding-left:1.25em;list-style:disc}
.recht li::marker{color:var(--blau)}
.recht a{overflow-wrap:anywhere}
.recht__stand{margin-top:var(--s-6);font-size:var(--t-klein);color:var(--ink-3)}
.recht__karte{padding:var(--s-4);margin:var(--s-3) 0;border-radius:var(--r);background:var(--tor-zart);border:1px solid rgba(90,120,181,.16)}
.recht__karte p{color:var(--ink)}

/* InGlory-Hinweis im Impressum (Stempel) */
.inglory-note{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-4);align-items:center;margin-top:var(--s-7);padding:var(--s-5);border-radius:var(--r);background:#111411;color:#F4EFE6}
.inglory-note svg{width:3.25rem;height:auto;color:#F4EFE6}
.inglory-note p{color:rgba(244,239,230,.86);font-size:var(--t-text);line-height:1.6}
.inglory-note p+p{margin-top:.25em}
.inglory-note strong{color:#F4EFE6}
.inglory-note a{color:#F4EFE6}
.inglory-note :focus-visible{outline-color:#F4EFE6}

/* ==========================================================================
   Schnellkontakt: Desktop rechts (Beschriftung fährt nach links aus), mobil unten volle Breite
   ========================================================================== */
.rail{position:fixed;right:0;top:50%;z-index:var(--z-rail);display:flex;flex-direction:column;background:var(--weiss);border:1px solid var(--linie-2);border-right:0;border-radius:var(--r) 0 0 var(--r);box-shadow:var(--schatten);transform:translateY(-50%);transition:opacity .4s var(--ease-out),transform .5s var(--ease-out)}
html.bereit .rail:not(.ist-da){opacity:0;transform:translate(14px,-50%);pointer-events:none}
.rail__knopf{position:relative;display:grid;place-items:center;width:3.5rem;height:3.5rem;color:var(--blau);text-decoration:none;transition:background-color var(--d-klein),color var(--d-klein)}
.rail__knopf+.rail__knopf{border-top:1px solid var(--linie)}
.rail__knopf:first-child{border-radius:calc(var(--r) - 1px) 0 0 0}
.rail__knopf--cta{background:var(--blau);color:var(--weiss);border-radius:0 0 0 calc(var(--r) - 1px)}
.rail__ico svg{width:var(--ico-m);height:var(--ico-m)}
.rail__label{position:absolute;right:calc(100% + .6rem);top:50%;transform:translate(10px,-50%);opacity:0;padding:.45em .95em;border-radius:var(--r-pille);background:var(--ink);color:var(--weiss);font-weight:700;font-size:var(--t-klein);line-height:1.3;white-space:nowrap;pointer-events:none;box-shadow:var(--schatten-klein);transition:transform var(--d-klein) var(--ease-out),opacity var(--d-klein)}
.rail__label small{font-size:inherit;font-weight:400;color:rgba(255,255,255,.82)}
.rail__knopf:active{background:var(--tor-zart)}
.rail__knopf--cta:active{background:var(--blau-tief)}
.rail__knopf:focus-visible{outline-offset:-5px}
.rail__knopf--cta:focus-visible{outline-color:var(--weiss)}
@media (hover:hover){.rail__knopf:hover{background:var(--tor-zart)}.rail__knopf--cta:hover{background:var(--blau-tief)}.rail__knopf:hover .rail__label{transform:translate(0,-50%);opacity:1}}
.rail__knopf:focus-visible .rail__label{transform:translate(0,-50%);opacity:1}
html.lightbox-offen .rail,html.menue-offen .rail,html.opener-aktiv .rail{opacity:0;pointer-events:none}
@media (max-width:79.99em),(hover:none) and (pointer:coarse){
  .rail{top:auto;bottom:0;left:0;right:0;flex-direction:row;border:0;border-top:1px solid var(--linie-2);border-radius:0;transform:none;padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -8px 24px -16px rgba(29,36,52,.35)}
  html.bereit .rail:not(.ist-da){transform:translateY(12px)}
  .rail__knopf{flex:1;min-width:0;width:auto;height:var(--h-bar);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;border-radius:0 !important}
  .rail__knopf+.rail__knopf{border-top:0;border-left:1px solid var(--linie)}
  .rail__label{position:static;transform:none !important;opacity:1;padding:0;background:none;color:inherit;box-shadow:none;font-size:.8125rem;line-height:1.2}
  .rail__label small,.rail__lang{display:none}
  body{padding-bottom:calc(var(--h-bar) + env(safe-area-inset-bottom))}
  html{scroll-padding-bottom:calc(var(--h-bar) + env(safe-area-inset-bottom) + .75rem)}
}

/* ==========================================================================
   Fuß (hell, damit das Logo in Originalfarben steht)
   ========================================================================== */
.fuss{position:relative;padding-block:var(--s-7) var(--s-4);background:var(--tor-zart);border-top:1px solid rgba(90,120,181,.18);color:var(--ink-2);font-size:var(--t-klein)}
.fuss .wrap{position:relative;z-index:1}
/* Spalten so breit wie ihr Inhalt, Lücken gleich verteilt: Marke an der linken, Übersicht an der rechten Inhaltskante */
.fuss__oben{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;gap:var(--s-5) var(--s-6)}
.fuss__marke{display:grid;gap:var(--s-3);align-content:start;max-width:15rem}
/* bis 1360 px reicht die Breite nicht für vier Spalten mit Luft: Marke darüber, darunter drei Spalten */
@media (max-width:84.99em){.fuss__oben{grid-template-columns:repeat(3,auto)}.fuss__marke{grid-column:1 / -1;max-width:none}}
.fuss__logo{display:block;width:15rem;max-width:100%} /* feste Breite: die Logodatei trägt 1004 px, ein Prozentwert ließe sie die Fußspalten auseinanderziehen */
.fuss__logo img{width:100%;height:auto}
.fuss__titel{font-family:var(--f-text);font-size:var(--t-label);font-weight:700;color:var(--ink);letter-spacing:.01em;margin-bottom:var(--s-2)}
.fuss address{display:grid;gap:.15em}
.fuss__zeiten{display:grid;grid-template-columns:1.25rem minmax(0,1fr);gap:.5em;margin-top:var(--s-3)}
.fuss__zeiten svg{width:1.25rem;height:1.25rem;margin-top:.2em;color:var(--tor-dunkel)}
.fuss__zeiten .kb{grid-column:1 / -1}
.fuss__liste{display:grid;gap:.25em}
.fuss__liste a,.fuss__fax{display:inline-flex;align-items:center;gap:.5em;min-height:2.75rem;color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
.fuss__liste svg{width:1.25rem;height:1.25rem;flex:none;color:var(--tor-dunkel)}
@media (hover:hover){.fuss__liste a:hover{color:var(--blau);text-decoration:underline}}
.fuss__nav a{min-height:2.75rem}
/* Übersicht: sechs Punkte in zwei Spalten zu je drei */
.fuss__nav{grid-template-rows:repeat(3,auto);grid-auto-flow:column;column-gap:var(--s-5)}
.fuss__unten{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s-3);margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid rgba(90,120,181,.22)}
.fuss__rechts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4)}
.fuss__rechts>a:not(.credit-badge){display:inline-flex;align-items:center;min-height:2.75rem;color:var(--ink);text-decoration:none}
@media (hover:hover){.fuss__rechts>a:not(.credit-badge):hover{color:var(--blau);text-decoration:underline}}
/* InGlory-Badge (Stempel, Schwarz #111411, weißes IG-Monogramm) */
.credit-badge{position:relative;display:inline-flex;align-items:center;gap:var(--s-1);min-height:2.75rem;padding:var(--s-1) var(--s-3) var(--s-1) var(--s-2);border-radius:var(--r-pille);background:#111411;color:#F4EFE6;font-size:.875rem;font-weight:700;letter-spacing:.02em;text-decoration:none;transition:transform var(--d-micro) var(--ease-out),background-color var(--d-klein)}
.credit-badge svg{width:1.35rem;height:auto;color:#F4EFE6}
.credit-badge:hover{color:#F4EFE6;background:#000}
.credit-badge:active{transform:scale(.97)}

/* ==========================================================================
   Reveal (Default sichtbar; Startzustand nur an .bereit, das setzt app.js)
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  html.bereit [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease-out),transform .8s var(--ease-out)}
  html.bereit [data-reveal].ist-da{opacity:1;transform:none}
  html.bereit [data-reveal-gruppe]>*{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease-out),transform .7s var(--ease-out)}
  html.bereit [data-reveal-gruppe]>*.ist-da{opacity:1;transform:none}
  /* Hero: sanfter Eingang, sobald der Opener geht (html.hero-los setzt app.js); ohne Skript steht alles sofort da.
     Die Torzeichnung im Hero zeichnet sich; Notaus per CSS nach 2,5 s, falls das Skript nicht läuft. */
  html.js .hero__tor .tor path,html.js .hero__tor .tor ellipse{stroke-dasharray:1;stroke-dashoffset:1;animation:tor-zeichnen 1.6s var(--ease-zeichnen) 2.5s forwards}
  html.hero-los .hero__tor .tor path,html.hero-los .hero__tor .tor ellipse{animation:tor-zeichnen-b 1.6s var(--ease-zeichnen) .15s forwards}
  html.hero-los .hero__tor .tor__detail path,html.hero-los .hero__tor .tor__detail ellipse{animation-delay:.5s}
  /* Logo und H1 stehen sofort (LCP), Unterzeile und Knöpfe kommen gestaffelt dazu */
  html.hero-los .hero__lead,html.hero-los .hero__cta{animation:hero-ein .8s var(--ease-out) both;animation-delay:calc(var(--i,0) * 90ms)}
  html.hero-los .hero__cta{--i:1}
  html.hero-los .hero__bogen{animation:hero-bild 1s var(--ease-out) .12s both}
  /* Bild im Bogen setzt sich einmal (2,4 s, endet unter 5 s: kein Anhalten nötig, WCAG 2.2.2) */
  html.hero-los .hero__bogen .bild img{animation:hero-bild-setzen 2.4s var(--ease-out) .12s both}
  @keyframes tor-zeichnen-b{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
  @keyframes hero-ein{from{opacity:0;transform:translateY(14px)}}
  @keyframes hero-bild{from{opacity:0;transform:translateY(20px) scale(.985)}}
  @keyframes hero-bild-setzen{from{transform:scale(1.06)}}
}
/* Wort-Reveal (AUSSTATTUNG Nr. 18) */
[data-woerter] .w{opacity:clamp(.6,.6 + 2 * (var(--pe,1) - var(--w,0) * .72),1)}
@media (prefers-reduced-motion:reduce){[data-woerter] .w{opacity:1}}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:63.99em){
  .stellen{grid-template-columns:minmax(0,1fr);grid-template-areas:"kopf" "paket" "aktion";gap:var(--s-5);padding:var(--s-6) var(--s-5)}
  .stellen__knoepfe{display:flex;flex-wrap:wrap}
  /* einspaltig: Polster wie bisher. Passt der Inhalt ins Fenster (Tablet hoch), steht er mittig im sichtbaren Bereich;
     Mindesthöhe = Sicht − Polster oben − Polster oben + Bildabstand unten (der Bildabstand liegt im Raster) */
  .hero{padding-block:var(--s-5) var(--s-7)}
  .hero__raster{grid-template-columns:minmax(0,1fr);gap:var(--s-5);min-height:calc(100vh - var(--h-kopf) - var(--s-5));min-height:calc(100svh - var(--h-kopf) - var(--s-5))}
  .hero__bild{margin-bottom:var(--s-5)}
  /* einspaltig: Text mittig über den Knöpfen (Korrekturrunde 3) */
  .hero__text{justify-items:center;text-align:center}
  .hero__lead{margin-inline:auto}
  .hero__cta{justify-content:center}
  .hero__bild{justify-self:center;--foto:min(15.5rem,62vw)}
  /* einspaltig wie bisher: Überschrift, Bild, Text */
  .ergo{grid-template-columns:minmax(0,1fr);align-items:start;row-gap:var(--s-4)}
  .ergo__text{display:contents}
  .ergo__text h2{order:-1;margin-bottom:0}
  .ergo__bild{margin-block:var(--s-1)}
  .ergo .bereiche{margin-top:calc(var(--s-5) + var(--s-1))}
  .ergo__bild .bild{max-width:none;aspect-ratio:3/2 !important}
  .bereiche{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ueber{grid-template-columns:minmax(0,1fr);gap:var(--s-5)}
  .ueber__portrait{width:min(100%,22rem)}
  .fragen{grid-template-columns:minmax(0,1fr)}
  .fragen__kopf{position:static}
  .kontakt{grid-template-columns:minmax(0,1fr);grid-template-areas:'karte' 'anfrage'}
  /* Tablet: Adresse | Kontakt, darunter die Übersicht als eine Zeile */
  .fuss__oben{grid-template-columns:repeat(2,auto)}
  .fuss__spalte--nav{grid-column:1 / -1}
  .fuss__nav{display:flex;flex-wrap:wrap;column-gap:var(--s-5)}
}
@media (max-width:47.99em){
  .team__liste{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4) var(--s-3)}
  .mitglied:last-child:nth-child(odd){grid-column:1 / -1;width:calc(50% - var(--s-3) / 2);justify-self:center}
  .stellen{padding:var(--s-5) var(--s-4)}
  /* schmal: Bewerbung als getönter Fuß der Karte über die volle Kartenbreite (sonst ragt der Telefonknopf bei 320 px heraus) */
  .stellen__aktion{justify-items:stretch;margin:0 calc(-1 * var(--s-4)) calc(-1 * var(--s-5));padding:var(--s-5) var(--s-4);border-radius:0 0 calc(var(--r) + .25rem - 1px) calc(var(--r) + .25rem - 1px)}
  .hero{padding-top:var(--s-6)} /* Korrekturrunde 4: mehr Luft unter der Kopfzeile (vorher --s-3) */
  .hero__raster{min-height:calc(100vh - var(--h-kopf) - 2 * var(--s-6) + var(--s-5));min-height:calc(100svh - var(--h-kopf) - 2 * var(--s-6) + var(--s-5))}
  .strahl{--kreis:3.25rem}
  .strahl__linie{left:calc(var(--kreis) / 2)}
  .schritt{grid-template-columns:var(--kreis) minmax(0,1fr);column-gap:var(--s-3)}
  .schritt::before{left:calc(var(--kreis) / 2)}
  .schritt__kreis{grid-column:1}
  .schritt--links .schritt__karte,.schritt--rechts .schritt__karte{grid-column:2;justify-self:stretch;max-width:none}
  .schritt__karte{padding:var(--s-3) var(--s-4)}
  .kontakt__karte,.anfrage{padding:var(--s-4)}
  .zwei{grid-template-columns:minmax(0,1fr)}
  .funnel__nav{flex-direction:column-reverse}
  .funnel__nav .knopf{width:100%;margin:0}
  .fuss__oben{grid-template-columns:minmax(0,1fr)}
  .fuss__nav{display:grid;justify-content:start}
  .fuss__unten{flex-direction:column;align-items:flex-start}
  .inglory-note{grid-template-columns:minmax(0,1fr)}
  .bereiche{gap:var(--s-2)}
  .bereich{padding:var(--s-3)}
  .bereich strong{font-size:1.1875rem}
  .galerie{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--s-2);margin-inline:calc(-1 * var(--rand));padding-inline:var(--rand);scroll-padding-inline:var(--rand);scrollbar-width:none}
  .galerie::-webkit-scrollbar{display:none}
  .galerie li{flex:0 0 82%;scroll-snap-align:start}
  .galerie__eintrag--quer .galerie__knopf,.galerie__eintrag--hoch .galerie__knopf{aspect-ratio:4/5}
}
@media (max-width:22.5em){.knopf{padding-inline:1.1em}.knopf__wort{display:none}.knopf__nummer{padding-left:0;margin-left:0;border-left:0}}

/* Druck: nur Inhalt */
@media print{.kopf,.rail,.opener,.laufband,.schwelle,.cta-bande__tor,.hero__tor,.laufband__pause,.funnel{display:none !important}body{padding:0;background:#fff}}