/* ═══════════════════════════════════════════════════════════════════════════
   DYNORA PHYSIOPRAXIS — site.css
   Look 4 · Spatial Depth. Markenfarben aus dem Logo: Türkis #24ADB0 (Flächen, Linien,
   Links) + Signal-Lime #C0D925 (Knöpfe). Hell = heller Türkisgrau-Grund mit Petrol-Flächen,
   Dunkel = dunkles Türkis/Petrol (kein Fast-Schwarz). Palette: _berichte/2026-09-16_farbschema.md
   Signatur: der Bewegungsbogen (Gradbogen) — Bildrahmen, Nav-Strich, Aufzählung,
   Ladeauftritt, Lesefortschritt. Tailwind-Preflight ist AUS: die Basis steht hier.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Grund & Fläche */
  /* --nacht = Tinte (dunkle Schrift auf Lime/Hell) · --flaeche = Markenfläche (Sektionen, Bühnen,
     Fuß, Hero) · --tiefe = Karte auf der Markenfläche. Alle drei Flächen sind Türkis, nie Schwarz. */
  --nacht:#0B2F33; --flaeche:#13696D; --tiefe:#0F5B5F; --licht:#F3F9F8; --nebel:#D6EDEB;
  /* Marke */
  --tuerkis:#24ADB0; --tuerkis-text:#0E6A6E; --pille:#0B3E42;
  /* Signal */
  --puls:#C0D925; --reiz:#FF6B4A;
  /* Text */
  --text-hell:#F0F8F6; --text-dunkel:#0B2F33; --text-still:#D2EEEC;
  /* Modus-Tokens (hell) */
  --grund:#F3F9F8; --text:#0B2F33; --text-2:#3F5E61; --linie:#C9E2DF;
  --karte:#FFFFFF; --akzent-flaeche:#0E6A6E;
  --kopf-scroll:rgba(19,105,109,.95); --fuss:#13696D; --schatten:rgba(11,62,66,.22);
  --hero-tint:14,88,92; --platte-a:rgba(33,132,136,.96); --platte-b:rgba(14,86,90,.97);
  --wand-a:#3AA7AA; --wand-b:#1E7F83; --wand-c:#11605F;
  /* Kurven (REF-C §WERTE) */
  --ease-out:cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer:cubic-bezier(0.32, 0.72, 0, 1);
  --ease-masse:cubic-bezier(.34, 1.56, .64, 1);
  /* Radius: der Bogenschnitt */
  --r-s:4px; --r-m:14px; --r-l:26px; --r-bogen:96px;
  /* Typo */
  --text-h1:clamp(2.05rem, 1.2rem + 3.4vw, 3.60rem);
  --text-h2:clamp(1.65rem, 1.1rem + 2.2vw, 2.65rem);
  --text-h3:clamp(1.25rem, 1.0rem + 1.0vw, 1.60rem);
  --text-lead:clamp(1.08rem, 1.0rem + .45vw, 1.30rem);
  --text-body:1.0625rem; --text-klein:.9375rem; --text-label:.8125rem;
  --kopf-h:64px;
  --buehne-a:#2F7C84; --buehne-b:#23696F; --buehne-c:#1A555C; --buehne-boden:#154950;
}
.dark{
  /* 16.09.: heller und bläulicher (Rückmeldung: Dunkel-Modus zu dunkel) — Kontraste gerechnet ≥ 4,5 */
  --grund:#1A4E59; --text:#E6F4F2; --text-2:#B8DAD7; --linie:#3A7883;
  --karte:#21606B; --akzent-flaeche:#C0D925;
  --flaeche:#154650; --tiefe:#1E5A65; --text-still:#B4D9D5; --tuerkis-text:#7EDDE0; --pille:#0F3740;
  --kopf-scroll:rgba(21,70,80,.92); --fuss:#133F48; --schatten:rgba(6,30,36,.45);
  --hero-tint:18,66,76; --platte-a:rgba(36,102,112,.96); --platte-b:rgba(21,70,80,.97);
  --wand-a:#2E6E78; --wand-b:#215A64; --wand-c:#174852;
  --buehne-a:#2B6B75; --buehne-b:#205B65; --buehne-c:#184B55; --buehne-boden:#123D46;
}

/* ── Basis ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ margin:0; background:var(--grund); color:var(--text);
  font-family:"Mulish", system-ui, sans-serif; font-size:var(--text-body); line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:clip; }
body h1, body h2, body h3, body h4{ font-family:"Syne", "Mulish", sans-serif; font-weight:700;
  letter-spacing:-0.015em; line-height:1.12; margin:0; text-wrap:balance; }
body h1{ font-size:var(--text-h1); }
body h2{ font-size:var(--text-h2); }
body h3{ font-size:var(--text-h3); font-weight:600; line-height:1.2; }
body h4{ font-size:1.125rem; font-weight:600; }
body p{ margin:0; }
body img, body svg, body video{ display:block; max-width:100%; }
body img{ height:auto; }
body a{ color:inherit; }
body button, body input, body textarea, body select{ font:inherit; color:inherit; }
body button{ cursor:pointer; }
body ul, body ol{ margin:0; padding:0; }
body ul[class], body ol[class]{ list-style:none; }
body figure{ margin:0; }
:focus-visible{ outline:2px solid var(--puls); outline-offset:3px; box-shadow:0 0 0 5px var(--nacht); border-radius:var(--r-s); }
.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; }
::selection{ background:var(--puls); color:var(--nacht); }
:target,[id]{ scroll-margin-top:6.5rem; }

/* ── Raster & Sektionen ────────────────────────────────────────────────── */
main, .site-footer{ position:relative; z-index:1; }
.wrap{ width:100%; max-width:78rem; margin-inline:auto; padding-inline:clamp(1.15rem, 4vw, 2.5rem); }
.wrap-schmal{ max-width:50rem; }
.sektion{ padding-block:clamp(4.5rem, 9vw, 7.5rem); position:relative; }
.sektion-dunkel, .vitrine{ background:var(--flaeche); color:var(--text-hell); }
.sektion-dunkel .t-2, .vitrine .t-2{ color:var(--text-still); }
.t-2{ color:var(--text-2); }
.t-lead{ font-size:var(--text-lead); line-height:1.55; max-width:62ch; }
.t-body{ max-width:68ch; }
.t-klein{ font-size:var(--text-klein); }
.t-label{ font-size:var(--text-label); letter-spacing:.02em; }
.fliess > * + *{ margin-top:1.05em; }
.fliess a, a.textlink{ text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:.22em;
  text-decoration-color:color-mix(in srgb, currentColor 45%, transparent); transition:text-decoration-color .2s ease; }
.fliess a:hover, a.textlink:hover{ text-decoration-color:currentColor; }
/* Türkis als zweite Markenfarbe: Links auf hellem Grund (auf Markenflächen bleibt die Schriftfarbe) */
.fliess a, a.textlink, .karte-mehr, .pfeil-link{ color:var(--tuerkis-text); }
.sektion-dunkel .fliess a, .vitrine .fliess a, .hero .fliess a, .sektion-dunkel a.textlink, .vitrine a.textlink, .hero a.textlink,
.sektion-dunkel .karte-mehr, .vitrine .karte-mehr, .sektion-dunkel .pfeil-link, .vitrine .pfeil-link, .hero .pfeil-link, .site-footer .pfeil-link{ color:inherit; }
.kopf-sektion{ max-width:46rem; }
.kopf-sektion > * + *{ margin-top:1rem; }

/* ── Knöpfe (Druck 120 ms, Rückkehr 160 ms) ─────────────────────────────── */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6rem; min-height:48px;
  padding:.8rem 1.35rem; border-radius:var(--r-m); border:1.5px solid transparent; font-weight:700;
  font-size:1rem; line-height:1.1; text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:transform .16s var(--ease-out), box-shadow .16s var(--ease-out), background-color .2s ease, color .2s ease, border-color .2s ease; }
.btn:active{ transform:scale(.98); box-shadow:0 0 0 3px rgba(192,217,37,.35); transition-duration:.12s; }
.btn svg{ width:18px; height:18px; flex:none; }
.btn-puls{ background:var(--puls); color:var(--nacht); }
.btn-puls:hover{ background:#CDE34F; color:var(--nacht); }
.btn-nacht{ background:var(--tuerkis-text); color:#FFFFFF; }
.btn-nacht:hover{ background:#0B5A5E; color:#FFFFFF; }
.dark .btn-nacht{ background:var(--puls); color:var(--nacht); }
.btn-kontur{ background:transparent; color:var(--text); border-color:currentColor; }
.sektion-dunkel .btn-kontur, .vitrine .btn-kontur, .hero .btn-kontur{ color:var(--text-hell); }
.pfeil-link{ display:inline-flex; align-items:center; gap:.5rem; min-height:44px; font-weight:700; text-decoration:none; }
.pfeil-link .bogen-pfeil{ width:22px; height:22px; transition:transform .2s var(--ease-out); }
@media (hover:hover) and (pointer:fine){
  .pfeil-link:hover .bogen-pfeil{ transform:translateX(4px); }
}

/* ── Der Bogenschnitt: Viertelkreis-Ausschnitt oben rechts, unten links 4 px ── */
.bogen{ --rb:clamp(44px, 7vw, var(--r-bogen)); position:relative; isolation:isolate; }
.bogen-bild{ position:relative; overflow:hidden; border-radius:var(--r-m) 0 var(--r-m) var(--r-s);
  -webkit-mask:radial-gradient(circle var(--rb) at 100% 0, #0000 calc(var(--rb) - .6px), #000 var(--rb));
          mask:radial-gradient(circle var(--rb) at 100% 0, #0000 calc(var(--rb) - .6px), #000 var(--rb)); }
.bogen-bild img{ width:100%; height:100%; object-fit:cover; }
.bogen::after{ content:""; position:absolute; top:0; right:0; width:calc(var(--rb) + 12px); height:calc(var(--rb) + 12px);
  pointer-events:none; z-index:2;
  background:radial-gradient(circle at 100% 0, #0000 calc(var(--rb) + 5px), var(--bogen-strich, var(--tiefe)) calc(var(--rb) + 5.5px), var(--bogen-strich, var(--tiefe)) calc(var(--rb) + 7px), #0000 calc(var(--rb) + 7.5px)); }
.dark .bogen, .sektion-dunkel .bogen, .vitrine .bogen, .hero .bogen{ --bogen-strich:var(--puls); }

/* ── Karten ─────────────────────────────────────────────────────────────── */
.karte{ background:var(--karte); border:1px solid var(--linie); border-radius:var(--r-l);
  box-shadow:0 18px 40px -28px var(--schatten); display:flex; flex-direction:column; height:100%;
  transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out), border-color .2s ease; }
.dark .karte{ border-color:rgba(192,217,37,.14); box-shadow:0 28px 64px -34px var(--schatten); }
.sektion-dunkel .karte, .vitrine .karte{ background:var(--tiefe); border-color:rgba(192,217,37,.14); color:var(--text-hell);
  box-shadow:0 28px 64px -34px rgba(3,30,33,.5); }
.karte .karte-bild{ aspect-ratio:16/10; }
.karte .karte-bild img{ transition:transform .2s var(--ease-out); }
@media (hover:hover) and (pointer:fine){
  .karte-link:hover{ translate:0 -2px 10px; border-color:var(--akzent-flaeche); }
  .karte-link:hover .karte-bild img{ transform:scale(1.03); }
}
.karte-link{ text-decoration:none; color:inherit; transition:translate .2s var(--ease-out), box-shadow .2s var(--ease-out), border-color .2s ease; }
.karten-raum{ perspective:1200px; }

/* ── Zwei-Ebenen-Icons (Kontur currentColor + genau eine Akzentfläche) ──── */
.ico{ width:40px; height:40px; flex:none; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.ico .akzent{ fill:var(--akzent-flaeche); fill-opacity:.3; stroke:none; }
.ico-ph{ fill:currentColor; stroke:none; }
.dark .ico .akzent, .sektion-dunkel .ico .akzent, .vitrine .ico .akzent, .hero .ico .akzent{ fill:#C0D925; fill-opacity:.85; }

/* ── Aufzählung: 90°-Bogensegment statt Punkt ───────────────────────────── */
.bogen-liste{ list-style:none; display:grid; gap:.85rem; }
.bogen-liste > li{ position:relative; padding-left:2.1rem; --dreh:0deg; }
.bogen-liste > li::before{ content:""; position:absolute; left:0; top:.28em; width:1.1rem; height:1.1rem;
  border:2.5px solid var(--akzent-flaeche); border-color:var(--akzent-flaeche) var(--akzent-flaeche) transparent transparent;
  border-radius:50%; transform:rotate(calc(-45deg + var(--dreh))); }
.sektion-dunkel .bogen-liste > li::before, .vitrine .bogen-liste > li::before{ border-color:var(--puls) var(--puls) transparent transparent; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq{ display:grid; gap:.75rem; }
.faq details{ background:var(--karte); border:1px solid var(--linie); border-radius:var(--r-m); }
.faq summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.1rem 1.25rem; min-height:56px; font-family:"Syne", sans-serif; font-weight:600; font-size:1.08rem; line-height:1.3; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .faq-zeichen{ width:26px; height:26px; flex:none; transition:transform .22s var(--ease-out); }
.faq details[open] summary .faq-zeichen{ transform:rotate(135deg); }
.faq .faq-antwort{ padding:0 1.25rem 1.25rem; color:var(--text-2); max-width:68ch; }

/* ── Kopfleiste (Mechanik: Vorlagen/header-schwebend.html · Optik: Dynora) ── */
.lese-fortschritt{ background:var(--puls); box-shadow:0 0 12px rgba(192,217,37,.55); }
.site-header{ position:fixed; inset:0 0 auto 0; z-index:60; pointer-events:none; padding:14px clamp(.7rem, 3vw, 1.5rem) 0; }
.site-header .nav-wrap{ pointer-events:auto; max-width:78rem; height:var(--kopf-h); margin:0 auto; display:flex; align-items:center; gap:.35rem;
  padding:0 .6rem 0 1.15rem; border-radius:var(--r-l); color:var(--text-hell);
  background-color:rgba(19,105,109,0); border:1px solid rgba(192,217,37,0);
  transition:background-color .22s var(--ease-out), border-color .22s var(--ease-out), box-shadow .22s var(--ease-out); }
.site-header.scrolled .nav-wrap{ background-color:var(--kopf-scroll); border-color:rgba(192,217,37,.22);
  -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2); box-shadow:0 18px 40px -24px var(--schatten); }
.site-header .nav-logo{ display:inline-flex; align-items:center; gap:.55rem; margin-right:auto; text-decoration:none; color:inherit; min-height:44px; }
.site-header .nav-logo img{ display:block; height:44px; width:auto; }
@media (min-width:1024px){ .site-header .nav-logo img{ height:48px; } }
.site-header nav{ display:none; align-items:center; gap:.1rem; }
.site-header nav > a, .site-header .nav-item > a{ position:relative; display:inline-flex; align-items:center; gap:.35rem; min-height:44px;
  padding:.4rem .7rem; border-radius:var(--r-m); color:inherit; text-decoration:none; font-weight:600; font-size:.95rem; white-space:nowrap; }
.site-header nav > a::after, .site-header .nav-item > a::after{ content:""; position:absolute; left:.7rem; right:.7rem; bottom:5px; height:7px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M1 7 Q50 -3 99 7' fill='none' stroke='%23C0D925' stroke-width='2.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  clip-path:inset(0 100% 0 0); transition:clip-path .14s var(--ease-out); }
.site-header nav > a:hover::after, .site-header .nav-item > a:hover::after, .site-header nav > a[aria-current="page"]::after,
.site-header .nav-item > a[aria-current="page"]::after, .site-header .nav-item.offen > a::after{ clip-path:inset(0 0 0 0); }
.site-header .nav-cta{ display:none; margin-left:.35rem; min-height:44px; padding:.55rem 1.05rem; border-radius:var(--r-m);
  background:var(--puls); color:var(--nacht); font-weight:700; font-size:.95rem; text-decoration:none; white-space:nowrap; align-items:center;
  transition:transform .16s var(--ease-out), background-color .2s ease; }
.site-header .nav-cta:hover{ background:#CDE34F; color:var(--nacht); }
.site-header .nav-cta:active{ transform:scale(.98); }
.nav-burger{ background:none; border:0; color:inherit; padding:.6rem; min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--r-m); }
@media (min-width:768px){
  .site-header nav{ display:flex; }
  .nav-burger{ display:none; }
}
@media (min-width:1024px){
  .site-header .nav-cta{ display:inline-flex; }
  .site-header nav{ gap:.2rem; }
}
.site-header .nav-item{ position:relative; display:flex; align-items:center; }
.nav-chevron{ flex:none; transition:transform .2s var(--ease-out); }
.nav-item.offen .nav-chevron, .nav-gruppe[open] .nav-chevron{ transform:rotate(180deg); }
.nav-sub{ position:absolute; top:100%; left:-.5rem; min-width:18rem; z-index:80; padding:.9rem 0 0;
  opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .18s var(--ease-out), transform .18s var(--ease-out), visibility .18s; }
.nav-sub-innen{ background:var(--tiefe); color:var(--text-hell); border:1px solid rgba(192,217,37,.18); border-radius:var(--r-m);
  box-shadow:0 28px 64px -30px var(--schatten); padding:.45rem; display:grid; }
.nav-item.offen > .nav-sub{ opacity:1; visibility:visible; transform:none; }
.nav-sub a{ display:flex; align-items:center; gap:.65rem; padding:.62rem .8rem; border-radius:10px; color:var(--text-hell); text-decoration:none; font-size:.95rem; font-weight:600; }
.nav-sub a:hover{ background:var(--flaeche); color:var(--text-hell); }
.nav-sub a.nav-sub-alle{ color:#C0D925; border-bottom:1px solid rgba(192,217,37,.14); border-radius:10px 10px 0 0; margin-bottom:.25rem; }
.nav-theme{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:999px; flex:none;
  border:1px solid rgba(228,239,232,.45); background:rgba(228,239,232,.08); color:inherit; transition:background-color .2s ease, border-color .2s ease; }
.nav-theme:hover{ background:rgba(228,239,232,.2); }
.nav-theme .ic-sonne{ display:none; }
.dark .nav-theme .ic-sonne{ display:block; }
.dark .nav-theme .ic-mond{ display:none; }
.nav-overlay{ position:fixed; inset:0; z-index:70; background:var(--flaeche); color:var(--text-hell); display:flex; flex-direction:column; gap:.15rem;
  padding:5.5rem 1.6rem 2rem; overflow-y:auto; }
.nav-overlay[hidden]{ display:none; }
.nav-overlay a{ color:inherit; text-decoration:none; font-family:"Syne", sans-serif; font-weight:600; font-size:1.45rem; padding:.6rem 0; min-height:44px; display:flex; align-items:center; }
.nav-overlay .nav-gruppe summary{ display:flex; align-items:center; gap:.6rem; font-family:"Syne", sans-serif; font-weight:600; font-size:1.45rem; padding:.6rem 0; cursor:pointer; list-style:none; min-height:44px; }
.nav-overlay .nav-gruppe summary::-webkit-details-marker{ display:none; }
.nav-overlay .nav-gruppe a{ font-family:"Mulish", sans-serif; font-size:1.08rem; padding:.45rem 0 .45rem 1.2rem; color:var(--text-still); }
.nav-overlay .nav-cta-mobil{ margin-top:1.2rem; justify-content:center; background:var(--puls); color:var(--nacht); border-radius:var(--r-m); font-family:"Mulish", sans-serif; font-size:1.05rem; font-weight:700; }
.nav-overlay .nav-close{ position:absolute; top:1.35rem; right:1.2rem; background:none; border:1px solid rgba(228,239,232,.3); border-radius:999px; color:inherit; min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }

/* ── Hero (Full-Bleed-Foto, invertierte Gewichtung) ─────────────────────── */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:clip; background:var(--flaeche); color:var(--text-hell); isolation:isolate; }
.hero:has(.hero-raster){ align-items:center; }
.hero-kurz{ min-height:clamp(30rem, 78svh, 46rem); }
.hero-bild{ position:absolute; inset:0; z-index:-3; }
/* Foto 6 % höher als der Kasten und nach oben verschoben: Luft für die Parallaxe, Kasten bleibt bündig */
.hero-bild img{ width:100%; height:106%; object-fit:cover; transform:translateY(-5.7%); }
.hero-verlauf{ position:absolute; inset:0; z-index:-2;
  background:linear-gradient(0deg, rgba(var(--hero-tint),.88) 0%, rgba(var(--hero-tint),.64) 38%, rgba(var(--hero-tint),.16) 70%, rgba(var(--hero-tint),.46) 100%),
             linear-gradient(90deg, rgba(var(--hero-tint),.5) 0%, rgba(var(--hero-tint),0) 60%); }
.hero-bahnen{ position:absolute; inset:0; z-index:-1; pointer-events:none; color:var(--puls); opacity:.09; }
.hero-inhalt{ position:relative; width:100%; padding-top:calc(var(--kopf-h) + 5rem); padding-bottom:clamp(2.5rem, 7vw, 5rem); }
.hero-text{ max-width:40rem; }
.hero-text > * + *{ margin-top:1.1rem; }
.hero-text .t-lead{ color:#E3F3F1; }
.hero-aktionen{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.4rem; padding-top:.6rem; }
.hero .wort, [data-wort-einzug] .wort{ display:inline-block; }
/* Startseite: zwei Spalten — links alle Texte, rechts steht das Gelenk fest in seiner Spalte (keine Box, kein Rahmen) */
.hero-raster{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(2rem, 4vw, 4.5rem); align-items:center; }
.hero-raster .hero-text{ max-width:36rem; }
.hero-raum{ position:relative; width:100%; max-width:min(29rem, calc((100svh - var(--kopf-h) - 10rem) * 480 / 700)); justify-self:center; perspective:1000px; pointer-events:none; }
.hero-raum-z{ width:100%; transform-style:preserve-3d; }
.hero-raum-t{ width:100%; }
.hero-objekt{ width:100%; aspect-ratio:480 / 700; animation:schwebe 9s var(--ease-in-out) infinite; }
.hero-objekt-svg{ display:block; width:100%; height:100%; overflow:visible; }
@keyframes schwebe{
  0%, 100%{ transform:rotateY(-5deg); }
  50%{ transform:rotateY(5deg); }
}
@media (max-width:1023px){
  .hero-raster{ grid-template-columns:1fr; gap:1.5rem; }
  .hero-raster .hero-raum{ order:-1; max-width:15rem; justify-self:center; }
  .hero-raster .hero-text{ max-width:40rem; }
}
@media (max-width:639px){
  .hero-raster .hero-raum{ max-width:11.5rem; }
}

/* ── Hintergrund-Loop „Bewegungsbahnen" (site-weit, CSS, läuft ohne Vendor) ── */
.bahnen{ position:fixed; inset:0; z-index:0; pointer-events:none; color:var(--tuerkis); opacity:.16; }
.dark .bahnen{ color:var(--puls); opacity:.09; }
.bahnen svg, .hero-bahnen svg{ width:100%; height:100%; }
.bahnen-atem{ transform-origin:50% 50%; transform-box:view-box; animation:atem 11s var(--ease-in-out) infinite; }
.bahn{ fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; vector-effect:non-scaling-stroke;
  stroke-dasharray:190 810; animation:bahn var(--d) linear infinite; animation-delay:var(--v); }
@keyframes bahn{ to{ stroke-dashoffset:-1000; } }
@keyframes atem{ 0%, 100%{ transform:scale(1); } 50%{ transform:scale(1.022); } }
@keyframes atem-still{ 0%, 100%{ transform:scale(1); } 50%{ transform:scale(1.008); } }

/* ── Ladeauftritt: das Bildzeichen baut sich auf (Bögen zeichnen, Figur springt, Wirbel ploppen), dann die Wortmarke ──
   Ablauf: Lime-Bogen .04–.46 · Türkis-Bogen .22–.62 · Figur .18–.62 · Wirbel .30–.79 · Wortmarke .50–.86 ·
   Abflug 1.06–1.36 · Linie 1.10–1.42 · Ausblenden 1.20–1.50 (Selbstmord in head.html nach 1600 ms).
   Bögen: eine Deckbahn in Flächenfarbe fährt über der Bogenform zurück — robust ohne Maske. */
.preloader{ display:none; }
.pre-an .preloader{ display:flex; position:fixed; inset:0; z-index:200; background:var(--flaeche); color:var(--text-hell);
  flex-direction:column; align-items:center; justify-content:center; gap:1.3rem; animation:pre-weg .3s var(--ease-out) 1.2s forwards; }
.preloader .pre-signet{ width:156px; height:156px; overflow:visible; animation:pre-abflug .3s var(--ease-in-out) 1.06s forwards; }
.preloader .pre-tuerkis{ fill:#24ADB0; }
.preloader .pre-lime, .preloader .pre-figur{ fill:var(--puls); }
.preloader .pre-decke{ fill:none; stroke:var(--flaeche); stroke-dasharray:100 200; stroke-dashoffset:0; }
.preloader .pre-decke-l{ animation:pre-zeichnen .42s var(--ease-in-out) .04s forwards; }
.preloader .pre-decke-t{ animation:pre-zeichnen .4s var(--ease-in-out) .22s forwards; }
.preloader .pre-figur{ transform-box:fill-box; transform-origin:40% 100%; opacity:0; animation:pre-sprung .44s var(--ease-out) .18s forwards; }
.preloader .pre-punkte path{ transform-box:fill-box; transform-origin:50% 50%; opacity:0; transform:scale(.2);
  animation:pre-plopp .24s cubic-bezier(.34, 1.56, .64, 1) forwards; animation-delay:calc(.3s + var(--i) * 28ms); }
.preloader .pre-wort{ width:188px; height:auto; aspect-ratio:1657 / 387; opacity:0; transform:translateY(10px);
  animation:pre-auf .36s var(--ease-out) .5s forwards, pre-abgang .26s var(--ease-in-out) 1.08s forwards; }
.preloader .pre-linie{ position:fixed; top:0; left:0; height:3px; width:100%; background:var(--puls); transform-origin:0 50%; transform:scaleX(0);
  animation:pre-linie .32s var(--ease-out) 1.1s forwards; }
@keyframes pre-zeichnen{ to{ stroke-dashoffset:-101; } }
@keyframes pre-sprung{ 0%{ opacity:0; transform:translate(-6%, 14%) rotate(-10deg) scale(.82); }
  55%{ opacity:1; transform:translate(1%, -4%) rotate(2deg) scale(1.04); } 100%{ opacity:1; transform:none; } }
@keyframes pre-plopp{ to{ opacity:1; transform:none; } }
@keyframes pre-auf{ to{ opacity:1; transform:none; } }
@keyframes pre-abgang{ from{ opacity:1; transform:none; } to{ opacity:0; transform:translateY(-8px); } }
@keyframes pre-abflug{ to{ transform:translateY(-40vh) scale(.25); opacity:0; } }
@keyframes pre-linie{ 0%{ transform:scaleX(0); opacity:1; } 70%{ transform:scaleX(1); opacity:1; } 100%{ transform:scaleX(1); opacity:0; } }
@keyframes pre-weg{ to{ opacity:0; visibility:hidden; } }

/* ── Seiten-Übergang „Tiefenblende" ─────────────────────────────────────── */
.seitenblende{ position:fixed; inset:0; z-index:150; pointer-events:none; overflow:hidden; }
.seitenblende svg{ position:absolute; top:50%; left:50%; width:min(72vmin, 560px); height:min(72vmin, 560px);
  transform:translate(-50%, -50%) rotate(-140deg) scale(1.25); opacity:0; }
.seitenblende .sb-lime{ fill:var(--puls); }
.seitenblende .sb-tuerkis{ fill:#24ADB0; }
html.seite-geht main, html.seite-geht .site-footer{ transform:perspective(1200px) translateZ(-120px); filter:blur(8px); opacity:.35;
  transition:transform .26s var(--ease-drawer), filter .26s var(--ease-drawer), opacity .26s var(--ease-drawer); }
html.seite-geht .seitenblende svg{ opacity:.95; transform:translate(-50%, -50%) rotate(0deg) scale(1); transition:transform .3s var(--ease-drawer), opacity .12s linear; }
html.seite-kommt main{ animation:seite-kommt .32s var(--ease-out) both; }
@keyframes seite-kommt{ from{ transform:perspective(1200px) translateZ(70px); opacity:.35; } to{ transform:none; opacity:1; } }

/* ── Scroll-Bühnen (Vitrine) — gemeinsam für alle Seiten ───────────────── */
.vitrine{ position:relative; }
.buehne-raster{ width:100%; max-width:84rem; height:100%; margin-inline:auto; padding:calc(var(--kopf-h) + 2rem) clamp(1rem, 4vw, 2.5rem) 1.5rem;
  display:grid; grid-template-columns:minmax(18rem, 25rem) 1fr; grid-template-rows:1fr auto auto 1fr; gap:0 2.5rem; align-items:start; }
/* Desktop: Kennwert steht direkt über der Grafik; Überschrift + Schritte stehen links genau mittig zur Grafik (10.10.):
   Grafik spannt Zeile 2+3, Kopf sitzt unten in Zeile 2, Schritte oben in Zeile 3 -> der linke Block ist zur Grafik zentriert */
.buehne-kopf{ grid-column:1; grid-row:2; align-self:end; padding-bottom:.9rem; }
.buehne-kopf > * + *{ margin-top:.8rem; }
.buehne-text{ grid-column:1; grid-row:3; align-self:start; list-style:none; display:grid; gap:.9rem; align-content:start; counter-reset:none; }
.buehne-text li{ display:grid; grid-template-columns:3.6rem 1fr; gap:.8rem; align-items:baseline; font-size:var(--text-klein); line-height:1.5; color:var(--text-hell); }
.buehne-text li b{ font-family:"Syne", sans-serif; font-weight:700; color:var(--puls); font-size:1rem; }
.buehne-wert{ grid-column:2; grid-row:1; align-self:end; justify-self:end; display:flex; align-items:baseline; gap:.6rem; margin-bottom:.6rem; }
.buehne-wert .zahl{ font-family:"Syne", sans-serif; font-weight:800; font-size:clamp(2.4rem, 1.8rem + 2.2vw, 3.6rem); line-height:1; color:var(--puls); font-variant-numeric:tabular-nums; }
.buehne-wert small{ font-size:var(--text-klein); color:var(--text-still); }
.vitrine-raum{ grid-column:2; grid-row:2 / span 2; align-self:center; position:relative; width:100%; max-height:calc(100svh - var(--kopf-h) - 9rem);
  aspect-ratio:900 / 700; perspective:1200px; perspective-origin:50% 45%; }
.vitrine-obj{ position:absolute; inset:0; transform-style:preserve-3d; }
.vitrine-ebene{ position:absolute; inset:0; transform-style:preserve-3d; transform:translateZ(var(--z, 0px)) scale(var(--s, 1)); }
.vitrine-ebene > div, .vitrine-ebene > svg{ position:absolute; inset:0; width:100%; height:100%; }
.vitrine-ebene svg{ overflow:visible; }
.sp-label{ font-family:"Mulish", sans-serif; font-size:13px; font-weight:700; fill:#F0F8F6; letter-spacing:.01em; }
.sp-label-still{ font-family:"Mulish", sans-serif; font-size:13px; font-weight:600; fill:#C4E3E0; }
/* Beschriftungs-Pillen: tiefes Petrol statt Fast-Schwarz (CSS schlägt das SVG-Attribut) */
.sp-pille{ fill:var(--pille); }
.sp-fuehrung{ stroke:#C4E3E0; stroke-width:1; fill:none; }
@media (max-width:1023px){
  .buehne-raster{ grid-template-columns:1fr; grid-template-rows:auto auto 1fr auto; gap:.7rem; padding-top:calc(var(--kopf-h) + 1.6rem); }
  .buehne-kopf{ grid-column:1; grid-row:1; align-self:start; padding-bottom:0; }
  .buehne-text{ grid-column:1; grid-row:2; position:relative; min-height:4.8em; display:block; }
  .buehne-text li{ position:absolute; inset:0 0 auto 0; }
  .vitrine-raum{ grid-column:1; grid-row:3; max-height:none; align-self:center; }
  .buehne-wert{ grid-column:1; grid-row:4; align-self:start; justify-self:start; margin-bottom:0; }
  .sp-label, .sp-label-still{ font-size:24px; }
}

.buehne-text li{ transition:color .3s ease; }
.buehne-text li.war{ color:#A9CFCB; }
.buehne-text li.war b{ color:#8FC0BB; }
.dark .buehne-text li.war{ color:#7FAAA6; }
.dark .buehne-text li.war b{ color:#6C9A96; }
.buehne-text li.ist-aktiv span{ color:var(--text-hell); }
.buehne-wert small{ white-space:nowrap; }
.sp-hinweis{ font-size:var(--text-label); color:var(--text-still); }
@media (max-width:1023px){ .buehne-text li.war{ opacity:0 !important; } }

/* ── Bausteine für Inhaltsseiten ────────────────────────────────────────── */
.karte-inhalt{ padding:1.35rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:.7rem; flex:1; }
.karte-inhalt p{ color:var(--text-2); font-size:var(--text-klein); }
.sektion-dunkel .karte-inhalt p, .vitrine .karte-inhalt p{ color:var(--text-still); }
.karte-mehr{ margin-top:auto; display:inline-flex; align-items:center; gap:.45rem; font-weight:700; font-size:var(--text-klein); padding-top:.3rem; }
.karten-raum{ perspective:1200px; }
.ratgeber-kat{ font-size:var(--text-label); font-weight:700; color:var(--tuerkis-text); }
.sektion-dunkel .ratgeber-kat, .vitrine .ratgeber-kat{ color:var(--text-still); }
.schluss-box{ border-radius:var(--r-l); padding:clamp(2rem, 5vw, 3.5rem); position:relative; overflow:hidden; }
.schluss-box .schluss-bogen{ position:absolute; right:-4rem; bottom:-6rem; width:22rem; height:22rem; opacity:.5; pointer-events:none; }
.einstieg{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; min-height:56px; height:100%; padding:.8rem 1rem; border-radius:var(--r-m);
  border:1.5px solid var(--linie); background:var(--karte); text-decoration:none; font-weight:700; font-size:var(--text-klein); line-height:1.3; transition:border-color .2s ease; }
.einstieg::after{ content:""; width:18px; height:18px; flex:none; border:2.5px solid var(--akzent-flaeche); border-color:var(--akzent-flaeche) var(--akzent-flaeche) transparent transparent; border-radius:50%; transform:rotate(45deg); }
.einstieg:hover{ border-color:var(--akzent-flaeche); }
.brotkrumen{ display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; font-size:var(--text-klein); color:#E3F3F1; }
.brotkrumen a{ color:#E3F3F1; text-decoration:none; min-height:44px; display:inline-flex; align-items:center; }
.brotkrumen a:hover{ color:#FFFFFF; }
.brotkrumen .trenner{ width:14px; height:14px; opacity:.6; }
.split{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:clamp(2rem, 5vw, 4rem); align-items:center; }
.split > .split-text{ grid-column:span 7; }
.split > .split-bild{ grid-column:span 5; }
.split.split-umgekehrt > .split-text{ order:2; }
@media (max-width:1023px){ .split > .split-text, .split > .split-bild{ grid-column:1 / -1; } .split.split-umgekehrt > .split-text{ order:0; } }
.info-box{ background:var(--karte); border:1px solid var(--linie); border-radius:var(--r-l); padding:clamp(1.4rem, 3vw, 2rem); height:100%; }
.info-box > * + *{ margin-top:.7rem; }
.sektion-dunkel .info-box{ background:var(--tiefe); border-color:rgba(192,217,37,.14); }
.raster-2, .raster-3, .raster-4{ display:grid; gap:1.25rem; }
.raster-2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.raster-3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.raster-4{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
@media (max-width:1023px){ .raster-3, .raster-4{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:639px){ .raster-2, .raster-3, .raster-4{ grid-template-columns:1fr; } }
/* Ablauf in 4 Schritten: senkrechter Bewegungsbogen, keine Nummernkacheln */
.ablauf-liste{ list-style:none; position:relative; display:grid; gap:1.6rem; padding-left:2.6rem; }
.ablauf-liste::before{ content:""; position:absolute; left:.55rem; top:.5rem; bottom:.5rem; width:2px; background:var(--linie); border-radius:2px; }
.ablauf-liste > li{ position:relative; }
.ablauf-liste > li::before{ content:""; position:absolute; left:-2.6rem; top:.15rem; width:1.15rem; height:1.15rem; border-radius:50%;
  background:var(--grund); border:3px solid var(--akzent-flaeche); box-shadow:0 0 0 5px rgba(192,217,37,.28); }
.ablauf-liste > li > * + *{ margin-top:.4rem; }
.sektion-dunkel .ablauf-liste > li::before{ background:var(--flaeche); border-color:var(--puls); }
.sektion-dunkel .ablauf-liste::before{ background:rgba(228,239,232,.16); }

/* ── Formular-Grundlagen (Label hebt sich, Fokus Lime, Fehler mit Text) ── */
.feld{ position:relative; }

/* ── Fußzeile ───────────────────────────────────────────────────────────── */
.site-footer{ background:var(--fuss); color:var(--text-hell); padding:clamp(3.5rem, 7vw, 5.5rem) 0 0; border-top:1px solid rgba(192,217,37,.14); }

.fuss-raster{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:2.5rem; }
@media (max-width:1023px){ .fuss-raster{ grid-template-columns:1fr 1fr; } }
@media (max-width:599px){ .fuss-raster{ grid-template-columns:1fr; gap:2rem; } }
.fuss-titel{ font-family:"Syne", sans-serif; font-weight:600; font-size:1rem; color:var(--text-hell); margin-bottom:.9rem; }
.fuss-liste{ list-style:none; display:grid; gap:0; }
.fuss-liste a{ display:inline-flex; align-items:center; min-height:44px; color:var(--text-still); text-decoration:none; font-size:var(--text-klein); transition:color .2s ease; }
.fuss-liste a:hover{ color:#C0D925; }
.fuss-marke{ display:flex; align-items:center; gap:.9rem; }
.fuss-marke img{ display:block; width:180px; height:auto; }
.fuss-text{ color:var(--text-still); font-size:var(--text-klein); }
.fuss-text a{ color:inherit; text-decoration:none; transition:color .2s ease; }
.fuss-text a:hover{ color:#C0D925; }
.fuss-demo{ color:var(--text-still); font-size:var(--text-label); line-height:1.5; max-width:34ch; }
.fuss-schluss{ margin-top:3.5rem; padding:1.4rem 0 22px; border-top:1px solid rgba(228,239,232,.12);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; color:var(--text-still); }
.fuss-schluss nav{ display:flex; flex-wrap:wrap; gap:.2rem 1.2rem; }
.fuss-schluss nav a{ color:var(--text-still); text-decoration:none; font-size:var(--text-klein); min-height:44px; display:inline-flex; align-items:center; }
.fuss-schluss nav a:hover{ color:#FFFFFF; }

/* ── Bewegung dämpfen, nicht töten ─────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .bahn{ animation-duration:calc(var(--d) * 2.5); }
  .bahnen-atem{ animation-name:atem-still; }
  .hero-objekt{ animation-duration:18s; }
  html.seite-geht main, html.seite-geht .site-footer{ transform:none; filter:none; transition:opacity .14s linear; }
  .seitenblende svg{ transform:translate(-50%, -50%); }
  html.seite-geht .seitenblende svg{ opacity:.6; transform:translate(-50%, -50%); transition:opacity .14s linear; }
  /* Ladeauftritt gedämpft: gleiche Teile, kürzer, ohne Sprung/Plopp/Abflug — Ende nach ~1,0 s */
  .pre-an .preloader{ animation-delay:.76s; animation-duration:.24s; }
  .preloader .pre-signet{ animation:none; }
  .preloader .pre-decke-l, .preloader .pre-decke-t{ animation-duration:.3s; animation-delay:.02s; animation-timing-function:ease-out; }
  .preloader .pre-figur{ transform:none; animation:pre-auf .24s linear .12s forwards; }
  .preloader .pre-punkte path{ transform:none; animation:pre-auf .16s linear forwards; animation-delay:calc(.16s + var(--i) * 14ms); }
  .preloader .pre-wort{ transform:none; animation:pre-auf .22s linear .3s forwards; }
  .preloader .pre-linie{ animation-delay:.6s; animation-duration:.2s; }
  html.seite-kommt main{ animation:seite-kommt-still .14s linear both; }
  .site-header .nav-wrap, .nav-sub, .nav-chevron{ transition-duration:.01ms; }
}
@keyframes seite-kommt-still{ from{ opacity:.6; } to{ opacity:1; } }
@media print{ .bahnen, .site-header, .seitenblende, .preloader{ display:none !important; } }

/* Made-by-Badge: einzige erlaubte Anpassung ist --ns-accent */
.fuss-schluss .ns-badge{ --ns-accent:#C0D925; }
.dark .schluss-box.sektion-dunkel{ background:var(--tiefe); box-shadow:inset 0 0 0 1px rgba(192,217,37,.16); }

/* Bühnen-Rückwände: die SVGs haben fast-schwarze Verläufe fest eingebaut — hier je Modus auf Türkis gezogen (16.09.) */
.vitrine stop[stop-color="#1D3E39" i]{ stop-color:var(--buehne-a); }
.vitrine stop[stop-color="#122A27" i]{ stop-color:var(--buehne-b); }
.vitrine stop[stop-color="#091513" i]{ stop-color:var(--buehne-c); }
.vitrine stop[stop-color="#0E211F" i]{ stop-color:var(--buehne-c); }
.vitrine stop[stop-color="#050E0D" i]{ stop-color:var(--buehne-boden); }

/* Leistungsübersicht „Auf einen Blick" (leistungen.html) — Spalten statt Kästen, damit 7 Gruppen ohne Waise stehen */
.angebot-spalten{ columns:1; column-gap:3rem; }
@media (min-width:768px){ .angebot-spalten{ columns:2; } }
@media (min-width:1024px){ .angebot-spalten{ columns:3; } }
.angebot-gruppe{ break-inside:avoid; padding:0 0 2.25rem; }
.angebot-gruppe h3{ font-size:var(--text-h3); }