/* Digitaler Meisterhelfer – Vorankündigung, Fassung „Scroll-Erlebnis“ (website-scroll, 26.10.2026).
   Grundzustand = statische Fassung (ohne JS / "Bewegung reduzieren").
   html.anim schaltet die scrollgebundene Fassung ein. Keine externen Fonts, keine Tracker.
   Farben zentral in :root (offene Entscheidung S5 "Farben"). */
@font-face{font-family:"Fraunces";src:url(../fonts/fraunces-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(../fonts/fraunces-latin-wght-italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/inter-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --anthrazit:#1F2A33; --nacht:#14181C; --tief:#0E1114; --tinte:#1E2329;
  --orange:#E8792B; --orange-hell:#F6A867; --kupfer:#B4561A; --messing:#C9A15B; --holz:#8A5A3B;
  --creme:#F4F1EC; --sand:#E6DCCB; --grau:#5B6770; --grau-hell:#B9B3A8; --linie:rgba(30,35,41,.12);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --max:1240px; --rand:clamp(20px,4.5vw,64px);
  --weich:cubic-bezier(.22,.8,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);font-size:17px;line-height:1.6;color:var(--tinte);background:var(--nacht);overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%;height:auto}
a{color:var(--kupfer)}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;z-index:100}.skip:focus{left:10px;background:#fff;color:#000;padding:8px 12px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--rand)}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0 0 .5em;line-height:1.05;letter-spacing:-.015em;font-optical-sizing:auto}
h1 em,h2 em,.statement em,.fuss-claim em,.titel em{font-style:italic;font-weight:300;color:var(--kupfer)}
h3{font-family:var(--sans);font-weight:650;font-size:18.5px;letter-spacing:-.005em;line-height:1.25}
p{margin:0 0 1em}
.ober{display:inline-block;font-size:12.5px;font-weight:650;letter-spacing:.16em;text-transform:uppercase;color:var(--kupfer);margin-bottom:18px}
.titel{font-size:clamp(34px,5.2vw,68px);max-width:15em}
.titel.gross{font-size:clamp(38px,6.2vw,84px)}
.lead{font-size:clamp(17px,1.6vw,20px);line-height:1.6;color:#4B5560;max-width:40em}
.klein-text{font-size:14px;color:var(--grau)}
.ph{background:#FFE58A;color:#1E2329;padding:0 .25em;border-radius:3px}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.5em;background:var(--orange);color:#1a0f07;text-decoration:none;font-weight:650;font-size:16px;border:0;border-radius:999px;padding:15px 26px;min-height:50px;cursor:pointer;line-height:1.2;transition:transform .35s var(--weich),background .3s,box-shadow .3s;box-shadow:0 8px 30px rgba(232,121,43,.28)}
.knopf:hover{background:var(--orange-hell);transform:translateY(-2px)}
.knopf.klein{padding:10px 18px;min-height:42px;font-size:14.5px;box-shadow:none}
.knopf.zweit{background:transparent;color:var(--creme);box-shadow:inset 0 0 0 1.5px rgba(244,241,236,.5)}
.knopf.zweit:hover{background:rgba(244,241,236,.1);box-shadow:inset 0 0 0 1.5px var(--creme)}

/* Marken (Status-Kennzeichnung) */
.marke{display:inline-block;font-size:12px;font-weight:650;letter-spacing:.02em;border-radius:999px;padding:4px 11px;margin:0 8px 12px 0}
.marke.beta{background:rgba(47,125,79,.12);color:#24603D;box-shadow:inset 0 0 0 1px rgba(47,125,79,.35)}
.marke.spaeter{background:rgba(232,121,43,.12);color:#9A4A15;box-shadow:inset 0 0 0 1px rgba(232,121,43,.45)}

/* ================= KOPF / NAVIGATION ================= */
.kopf{position:fixed;top:0;left:0;right:0;z-index:50;pointer-events:none}
.hinweis{pointer-events:auto;background:rgba(10,12,14,.78);color:#E8E2D6;font-size:13px;line-height:1.4;text-align:center;padding:8px 16px;max-height:90px;overflow:hidden;transition:max-height .6s var(--weich),padding .6s var(--weich),opacity .4s}
.hinweis strong{color:var(--orange-hell);font-weight:650}
.kopf-innen{pointer-events:auto;position:relative;display:flex;align-items:center;gap:22px;margin:0 auto;max-width:100vw;padding:16px var(--rand);color:var(--creme);border-radius:0;background:rgba(14,17,20,0);box-shadow:0 0 0 0 rgba(0,0,0,0);
  transition:max-width .8s var(--weich),padding .8s var(--weich),margin .8s var(--weich),border-radius .8s var(--weich),background .5s,box-shadow .5s,backdrop-filter .5s}
.logo{display:block;flex:none;width:190px;height:38px;overflow:hidden;color:inherit;transition:width .8s var(--weich)}
.logo svg{display:block;width:190px;height:38px;max-width:none}
.logo-ober{fill:currentColor;opacity:.7;font-family:var(--sans)}
.logo-name{fill:currentColor;font-family:var(--serif)}
.pille-status{display:none}
nav.haupt{display:flex;gap:4px;margin-left:auto}
nav.haupt a{color:rgba(244,241,236,.82);text-decoration:none;font-size:14.5px;font-weight:500;padding:8px 12px;border-radius:999px;transition:color .25s,background .25s}
nav.haupt a:hover{color:#fff;background:rgba(255,255,255,.08)}
.menue-knopf{display:none}
.kopf.ist-pille .hinweis{max-height:0;padding-top:0;padding-bottom:0;opacity:0}
.kopf.ist-pille .kopf-innen{max-width:880px;margin-top:14px;padding:7px 7px 7px 14px;border-radius:999px;background:rgba(18,22,26,.74);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 14px 44px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.09)}
.kopf.ist-pille .logo{width:36px}
@media (min-width:1180px){.kopf.ist-pille .pille-status{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--grau-hell);white-space:nowrap}
  .kopf.ist-pille .pille-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(232,121,43,.18)}}
@media (max-width:899px){
  nav.haupt{display:none;position:absolute;top:calc(100% + 8px);left:12px;right:12px;flex-direction:column;gap:2px;padding:10px;background:rgba(18,22,26,.96);border-radius:22px;box-shadow:0 20px 50px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.08)}
  nav.haupt.offen{display:flex}
  nav.haupt a{font-size:17px;padding:12px 14px}
  .knopf.klein{margin-left:auto}
  .menue-knopf{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.1);cursor:pointer;padding:0 13px}
  .menue-knopf i{display:block;height:2px;background:var(--creme);border-radius:2px;transition:transform .3s}
  .menue-knopf[aria-expanded=true] i:first-of-type{transform:translateY(3.5px) rotate(45deg)}
  .menue-knopf[aria-expanded=true] i:last-of-type{transform:translateY(-3.5px) rotate(-45deg)}
  .kopf-innen{gap:10px}
  .kopf.ist-pille .kopf-innen{margin-left:12px;margin-right:12px;max-width:calc(100vw - 24px)}
  .logo{width:150px}.logo svg{width:150px;height:30px}.logo{height:30px}
  .kopf.ist-pille .logo{width:28px}
  .hinweis{font-size:12px;padding:6px 12px}
}

/* ================= NAVIGATION: von Anfang an schwebende Pille über dem Inhalt ================= */
.kopf .kopf-innen{max-width:min(980px,calc(100vw - 24px));margin-top:12px;padding:7px 7px 7px 16px;border-radius:999px;background:rgba(22,27,32,.82);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 14px 44px rgba(30,20,10,.18),inset 0 0 0 1px rgba(255,255,255,.08)}
.hinweis{background:var(--anthrazit)}
.kopf.ist-pille .kopf-innen{max-width:min(880px,calc(100vw - 24px))}

/* ================= SCROLL-ERLEBNIS – statische Grundfassung (ohne JS / Bewegung reduzieren / ?statisch) ================= */
.erlebnis{background:var(--creme);color:var(--tinte);padding:0}
.flaechen,.riesen,.mittel,.sequenz,.seq-ersatz,.vorne,.fortschritt,.scroll-hinweis{display:none}
.szene{position:relative;display:grid;gap:24px 56px;align-items:center;max-width:var(--max);margin:0 auto;padding:72px var(--rand)}
.szene-1{padding-top:150px}
.statisch-bild{margin:0;justify-self:center;width:100%;max-width:620px}
.statisch-bild img{display:block;width:100%}
.szene-4 .statisch-bild{max-width:420px}
@media (min-width:900px){.szene{grid-template-columns:1.05fr .95fr}.szene .statisch-bild{grid-column:2;grid-row:1 / span 3}.szene-4 .infokarten,.szene-4 .rechts{grid-column:1}}
.erlebnis h1{font-size:clamp(46px,5.7vw,86px);line-height:.98;letter-spacing:-.028em;font-weight:380;margin-bottom:.32em}
.erlebnis h1 em{color:var(--kupfer)}
.erlebnis h2{font-size:clamp(36px,4.4vw,64px);line-height:1;letter-spacing:-.02em}
.erlebnis .lead{color:#3F4852;font-size:clamp(16px,1.3vw,18.5px);max-width:34em}
.erlebnis .status{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px rgba(30,35,41,.12);margin-bottom:24px;color:var(--tinte)}
.erlebnis .status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(232,121,43,.2)}
.erlebnis .aktionen{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 16px}
.erlebnis .knopf.zweit{color:var(--tinte);box-shadow:inset 0 0 0 1.5px rgba(30,35,41,.35)}
.erlebnis .knopf.zweit:hover{background:rgba(30,35,41,.06);box-shadow:inset 0 0 0 1.5px var(--tinte)}
.erlebnis .nr{display:block;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:#9A4A15;font-weight:650;margin-bottom:14px}
.erlebnis .gross{font-family:var(--serif);font-size:clamp(30px,3.2vw,46px);line-height:1.05;margin:0 0 .45em;letter-spacing:-.02em}
.erlebnis p{color:#3F4852}
.erlebnis .warnung,.karte .warnung{font-size:15.5px;line-height:1.55;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1.5px rgba(232,121,43,.5);color:#3F4852;max-width:30em}
.erlebnis .warnung strong,.karte .warnung strong{color:#7A3A10}
.infokarten{list-style:none;margin:0;padding:0;display:grid;gap:14px}
@media (min-width:640px){.infokarten{grid-template-columns:repeat(3,1fr)}}
.ik{background:rgba(255,255,255,.9);border-radius:20px;padding:18px 18px 16px;box-shadow:0 22px 50px -26px rgba(60,40,20,.45),0 0 0 1px rgba(30,35,41,.08)}
.ik h3{font-size:17px;margin:0 0 6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ik h3 .marke{margin:0;font-size:11px;padding:2px 9px}
.ik p{font-size:14.5px;line-height:1.45;margin:0;color:#4B5560}
.ik-ico{display:inline-flex;width:38px;height:38px;border-radius:12px;background:rgba(232,121,43,.12);margin-bottom:10px;align-items:center;justify-content:center}
.ik-ico svg{width:24px;height:24px;fill:none;stroke:#9A4A15;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* ================= SCROLL-ERLEBNIS – animierte Fassung (html.anim) ================= */
.anim .erlebnis{height:860vh;position:relative}
.anim .buehne{position:sticky;top:0;height:100vh;overflow:hidden;isolation:isolate;background:var(--creme)}
.anim .flaechen,.anim .riesen,.anim .mittel,.anim .vorne{display:block;position:absolute;inset:0;pointer-events:none}
.anim .fl{position:absolute;border-radius:50%;background:#EDE5D8;will-change:transform}
.anim .fl-1{width:46vmax;height:46vmax;left:52%;top:8%}
.anim .fl-2{width:22vmax;height:22vmax;left:-6%;top:62%;background:#F0E8DC}
.anim .fl-3{width:30vmax;height:30vmax;left:30%;top:110%;background:#EFE4D3}
.anim .fl-4{width:18vmax;height:18vmax;left:78%;top:130%;background:rgba(232,121,43,.08)}
/* Riesen-Typo als SVG-Text (reine Deko; 1 Einheit = 0,1vw) */
.anim .riesen-wort{position:absolute;left:0;top:50%;width:200vw;height:24vw;overflow:visible;margin-top:-12vw;will-change:transform}
.riesen-wort text{font-family:var(--serif);font-weight:600;font-size:240px;letter-spacing:-10px;fill:#E8DDCA}
.anim .rw-1{left:34vw;top:47%}
.anim .rw-2{left:36vw;top:50%;opacity:0}
.anim .rw-3{left:50%;top:54%;opacity:0;margin-left:-52vw}
.anim .obj{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:auto;transform:translate(-50%,-50%) rotate(var(--r));filter:drop-shadow(0 16px 18px rgba(70,45,20,.18));will-change:transform,opacity}
.anim .obj.g2,.anim .obj.g3{opacity:0}
.anim .sequenz{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:3}
.anim .vorne{z-index:6}
.anim .vo{position:absolute;width:clamp(180px,24vw,340px);opacity:.92;transform:translateY(130vh);will-change:transform}
.anim .vo-2{left:84%}.anim .vo-3{left:4%}
.anim.ohne-canvas .sequenz{display:none}
.anim.ohne-canvas .seq-ersatz{display:block;position:absolute;inset:0;z-index:3;pointer-events:none}
.anim .se{position:absolute;opacity:0;will-change:opacity,transform}
.anim .se-1{width:min(52vw,760px);left:61%;top:50%;transform:translate(-50%,-46%);opacity:1}
.anim .se-2{width:min(46vw,640px);left:60%;top:52%;transform:translate(-50%,-50%)}
.anim .se-3{height:62vh;width:auto;left:50%;top:52%;transform:translate(-50%,-50%)}
.anim .statisch-bild{display:none}
.anim .szene{position:absolute;inset:0;display:flex;align-items:center;max-width:none;margin:0;padding:110px var(--rand) 80px;z-index:4;pointer-events:none}
.anim .szene > *{pointer-events:auto}
.anim .szene-1 .links{width:min(540px,43vw)}
.anim .szene-2 .links{width:min(470px,38vw)}
.anim .szene-3{align-items:flex-end;padding-bottom:110px}
.anim .szene-3 .links{width:min(400px,32vw)}
.anim .szene-2,.anim .szene-3,.anim .szene-4{visibility:hidden}
.anim .szene-4{display:block}
.anim .szene-4 .links{position:absolute;left:var(--rand);top:max(120px,16vh);width:min(330px,27vw)}
.anim .szene-4 .rechts{position:absolute;right:var(--rand);bottom:max(70px,10vh);width:min(300px,24vw);text-align:right}
.anim .szene-4 .rechts .klein-text{margin-top:12px}
.anim .infokarten{display:block;position:absolute;inset:0;pointer-events:none}
.anim .ik{position:absolute;width:min(250px,21vw);pointer-events:auto;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:rgba(255,255,255,.86);transform-origin:50% 100%}
.anim .ik-1{left:calc(50% - min(250px,21vw) - 228px);top:60%}
.anim .ik-2{left:calc(50% + 222px);top:20%}
.anim .ik-3{left:calc(50% + 240px);top:52%}
.anim .fortschritt{display:flex;position:absolute;left:var(--rand);bottom:26px;gap:22px;list-style:none;margin:0;padding:0;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(30,35,41,.62);z-index:5}
.anim .fortschritt li{position:relative;padding-top:11px;transition:color .4s}
.anim .fortschritt li::before{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:rgba(30,35,41,.12)}
.anim .fortschritt li::after{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--weich)}
.anim .fortschritt li.aktiv{color:var(--tinte)}
.anim .fortschritt li.aktiv::after{transform:scaleX(1)}
.anim .fortschritt span{color:#9A4A15;margin-right:6px}
.anim .fortschritt em{font-style:normal;opacity:.75;text-transform:none;letter-spacing:.02em}
.anim .scroll-hinweis{display:flex;position:absolute;right:var(--rand);bottom:26px;align-items:center;gap:12px;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(30,35,41,.6);z-index:5}
.anim .scroll-hinweis i{display:block;width:1px;height:42px;background:linear-gradient(rgba(30,35,41,.6),rgba(30,35,41,0));animation:tropfen 2.2s var(--weich) infinite}
@keyframes tropfen{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

@media (max-width:759px){
  .anim .erlebnis{height:760vh}
  .anim .szene{align-items:flex-start;padding:104px 20px 60px}
  .anim .szene-1 .links,.anim .szene-2 .links,.anim .szene-3 .links{width:100%}
  .anim .szene-3{align-items:flex-start}
  .erlebnis h1{font-size:44px}
  .anim .erlebnis h1{font-size:40px}
  .anim .erlebnis .lead{font-size:14.5px;line-height:1.48}
  .anim .erlebnis .status{margin-bottom:16px;font-size:12px;padding:6px 12px}
  .anim .erlebnis .aktionen{margin:16px 0 0;gap:10px}
  .anim .erlebnis .aktionen .knopf{padding:12px 18px;min-height:46px;font-size:15px}
  .anim .szene-1 .klein-text{display:none}
  .erlebnis h2{font-size:36px}
  .anim .erlebnis h2{font-size:34px}
  .anim .erlebnis .gross{font-size:28px}
  .anim .erlebnis .warnung,.karte .warnung{font-size:13.5px;padding:12px 14px}
  .anim .szene-2 p:not(.warnung){font-size:15px;line-height:1.5}
  .anim .szene-4 .links{top:96px;left:20px;right:20px;width:auto}
  .anim .szene-4 .links p{font-size:14.5px;line-height:1.45}
  .anim .szene-4 .rechts{left:20px;right:20px;bottom:22px;width:auto;text-align:center}
  .anim .szene-4 .rechts .klein-text{display:none}
  /* Mobil-Finale: Rechnung oben-mittig (Sequenz), Karten als Reihe darunter – nichts verdeckt die Rechnung */
  .anim .ik{width:30.5vw;padding:10px 9px 9px;border-radius:14px}
  .anim .ik p{font-size:11.5px;line-height:1.38;hyphens:auto}
  .anim .ik h3{font-size:13.5px;margin-bottom:4px}
  .anim .ik-ico{display:none}
  .anim .ik-1{left:2.5vw;top:auto;bottom:calc(22px + 64px)}
  .anim .ik-2{left:34.75vw;right:auto;top:auto;bottom:calc(22px + 64px)}
  .anim .ik-3{left:67vw;top:auto;bottom:calc(22px + 64px)}
  .anim .riesen-wort{width:316vw;height:38vw;margin-top:-19vw}
  .anim .rw-1{top:80%;left:2vw}.anim .rw-2{top:76%;left:4vw}.anim .rw-3{top:58%;margin-left:-48vw}
  .anim .fortschritt,.anim .scroll-hinweis{display:none}
  .anim .vo{width:44vw}
  .anim .obj{width:calc(var(--w) * .72);left:var(--mx,var(--x));top:var(--my,var(--y))}
  .anim .szene-1{padding-top:124px}
  .anim .se-1{width:96vw;left:50%;top:76%}
  .anim .se-2{width:92vw;left:50%;top:66%}
  .anim .se-3{height:44vh;top:60%}
}

/* ================= INHALT ================= */
section{padding:clamp(80px,12vw,150px) 0}
.ton-hell{color:var(--tinte)}
.ton-dunkel{color:#EDE6DA}
/* Hintergrund wird von Sektion zu Sektion allmählich dunkler (fließende Verläufe, keine Kanten) */
#problem{background:linear-gradient(#F4F1EC,#EFE9DF)}
#loesung{background:linear-gradient(#EFE9DF,#EAE2D5)}
#so-gehts{background:linear-gradient(#EAE2D5,#E6DCCB)}
#bereiche,#kommt-dazu{background:#E6DCCB}
#kommt-dazu{padding-top:0}
.uebergang{--ziel:#1B2127;height:70vh;display:flex;justify-content:center;background:linear-gradient(#E6DCCB 0%,var(--ziel) 100%)}
.uebergang .linie{display:block;width:1px;height:100%;background:linear-gradient(rgba(180,86,26,0),var(--orange),rgba(232,121,43,0));transform-origin:top}
#freigabe{background:linear-gradient(#1B2127,#181D22)}
#steuerberatung{background:linear-gradient(#181D22,#15191E)}
#faq{background:linear-gradient(#15191E,#121519)}
#warteliste{background:linear-gradient(#121519,#0E1114)}

.raster{display:grid;gap:18px;margin-top:48px}
@media (min-width:640px){.raster.vier{grid-template-columns:repeat(2,1fr)}.raster.drei{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.raster.vier{grid-template-columns:repeat(4,1fr)}.raster.drei{grid-template-columns:repeat(3,1fr)}}
.raster.module{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.karte{background:rgba(255,255,255,.72);border-radius:22px;padding:28px 26px 24px;box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 18px 40px -24px rgba(60,40,20,.28),0 0 0 1px var(--linie);transition:transform .5s var(--weich),box-shadow .5s}
.karte:hover{transform:translateY(-4px);box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 26px 50px -24px rgba(60,40,20,.35),0 0 0 1px rgba(180,86,26,.25)}
.karte p{color:#4B5560;font-size:15.5px;margin:0}
.ico{width:44px;height:44px;fill:none;stroke:var(--kupfer);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-bottom:20px}
.karte.modul.geplant{background:rgba(255,255,255,.28);box-shadow:inset 0 0 0 1.5px rgba(180,86,26,.28)}
.legende{margin-top:26px}
.zwei-spalten{display:grid;gap:24px 64px}
@media (min-width:980px){.zwei-spalten{grid-template-columns:1.05fr .95fr;align-items:end}.zwei-spalten.oben{align-items:start}}
.raster.linien{gap:0;margin-top:64px}
.punkt{padding:28px 28px 8px 0;border-top:1px solid rgba(30,35,41,.18)}
@media (min-width:1000px){.punkt{padding-right:40px}}
.pnr{display:block;font-family:var(--serif);font-style:italic;font-size:30px;color:var(--kupfer);margin-bottom:14px}
.punkt p{color:#4B5560;font-size:15.5px}
.schritte{display:grid;gap:18px;margin-top:56px}
@media (min-width:1000px){.schritte{grid-template-columns:repeat(3,1fr);gap:28px}}
.schritt{display:flex;gap:20px;align-items:flex-start;padding:30px 28px;border-radius:24px;background:rgba(255,255,255,.55);box-shadow:0 0 0 1px var(--linie)}
.schritt-nr{flex:none;font-family:var(--serif);font-size:72px;line-height:.8;font-weight:300;color:transparent;-webkit-text-stroke:1.5px var(--kupfer)}
.schritt p{color:#4B5560;font-size:15.5px;margin:0}
.hinweis-fahrt{margin-top:26px;display:inline-block;padding:10px 16px;border-radius:999px;background:rgba(232,121,43,.1);color:#7A3A10;font-weight:550}

/* Dunkle Sektionen */
.ton-dunkel .ober{color:var(--orange-hell)}
.ton-dunkel .titel em,.fuss-claim em,.statement em{color:var(--orange-hell)}
.ton-dunkel .lead{color:var(--grau-hell)}
.ton-dunkel a{color:var(--orange-hell)}
.statement{font-family:var(--serif);font-size:clamp(38px,5.8vw,84px);line-height:1.04;letter-spacing:-.025em;font-weight:330;max-width:13em;margin:0 0 clamp(80px,10vw,140px)}
.statement .w{display:inline-block;white-space:pre}
.freigabe-liste{list-style:none;margin:0;padding:0;counter-reset:f}
.freigabe-liste li{position:relative;padding:20px 0 20px 52px;border-top:1px solid rgba(237,230,218,.14);color:var(--grau-hell);font-size:16.5px}
.freigabe-liste li:last-child{border-bottom:1px solid rgba(237,230,218,.14)}
.freigabe-liste li strong{color:#F4EEE4;font-weight:600}
.freigabe-liste li::before{content:"";position:absolute;left:0;top:20px;width:30px;height:30px;border-radius:50%;background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%231a0f07' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.karte.dunkel{background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(237,230,218,.12)}
.karte.dunkel:hover{box-shadow:inset 0 0 0 1px rgba(246,168,103,.45)}
.karte.dunkel h3{color:#F4EEE4}.karte.dunkel p{color:var(--grau-hell)}
.faq-raster{align-items:start}
.faq details{border-top:1px solid rgba(237,230,218,.14)}
.faq details:last-child{border-bottom:1px solid rgba(237,230,218,.14)}
.faq summary{cursor:pointer;list-style:none;position:relative;padding:22px 48px 22px 0;font-size:18px;font-weight:550;color:#F4EEE4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:14px;height:14px;margin-top:-7px;background:linear-gradient(var(--orange-hell),var(--orange-hell)) center/14px 2px no-repeat,linear-gradient(var(--orange-hell),var(--orange-hell)) center/2px 14px no-repeat;transition:transform .4s var(--weich)}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq details p{color:var(--grau-hell);margin:0 0 22px;max-width:40em}

/* Warteliste */
#warteliste{position:relative;overflow:hidden}
#warteliste::before{content:"";position:absolute;left:50%;top:38%;width:120vw;height:62%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(232,121,43,.22),rgba(232,121,43,0));pointer-events:none}
.warte-kopf{max-width:820px}
form.warteliste{position:relative;display:grid;gap:18px;margin-top:44px;padding:clamp(22px,3vw,40px);border-radius:28px;background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(237,230,218,.14);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color-scheme:dark}
@media (min-width:760px){form.warteliste{grid-template-columns:1fr 1fr}.voll{grid-column:1/-1}}
label{display:block;font-weight:600;font-size:14.5px;margin-bottom:7px;color:#F4EEE4}
.opt{font-weight:400;color:var(--grau-hell)}
input[type=email],input[type=text],select,textarea{width:100%;font:inherit;font-size:16px;color:#F4EEE4;background:rgba(10,12,14,.5);border:1px solid rgba(237,230,218,.22);border-radius:14px;padding:13px 15px;min-height:50px;transition:border-color .25s,background .25s}
input:focus,select:focus,textarea:focus{border-color:var(--orange-hell);background:rgba(10,12,14,.7)}
textarea{min-height:110px;resize:vertical}
select option{background:#1B2127;color:#F4EEE4}
.check{display:flex;gap:12px;align-items:flex-start;font-weight:400;color:var(--grau-hell);font-size:14.5px;line-height:1.5}
.check input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--orange)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.absenden .klein-text{color:var(--grau-hell);margin:.8em 0 0}
.meldung{display:none;padding:14px 16px;border-radius:14px;background:rgba(232,121,43,.14);box-shadow:inset 0 0 0 1px rgba(246,168,103,.5);color:#FFD9B5;font-weight:550}
.meldung.zeigen{display:block}

/* Fuß */
.fuss{background:var(--tief);color:var(--grau-hell);padding:90px 0 50px;font-size:14.5px}
.fuss-claim{font-family:var(--serif);font-size:clamp(44px,8vw,120px);line-height:.98;letter-spacing:-.03em;color:#F4EEE4;margin:0 0 70px;font-weight:330}
.fuss .spalten{display:grid;gap:30px;border-top:1px solid rgba(237,230,218,.12);padding-top:34px}
@media (min-width:800px){.fuss .spalten{grid-template-columns:1.3fr 1fr}}
.fuss svg{color:#F4EEE4;margin-bottom:16px;width:170px;height:34px}
.fuss nav{display:flex;gap:22px;margin-bottom:14px}
.fuss nav a{color:#F4EEE4;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(246,168,103,.6)}
.fuss nav a:hover{color:var(--orange-hell)}
.fuss p{max-width:36em}

/* Reveal-Ausgangszustand nur im Animationsmodus (GSAP blendet ein) */
.anim [data-reveal]{opacity:0;transform:translateY(46px)}
.anim .statement .w{opacity:.14}

/* ================= RECHTSSEITEN ================= */
.rechtsseite{background:var(--creme)}
.rechtsseite .kopf-innen{max-width:880px;margin-top:14px;padding:7px 7px 7px 14px;border-radius:999px;background:rgba(18,22,26,.9);box-shadow:0 14px 44px rgba(0,0,0,.2)}
.rechtsseite .kopf-innen .knopf{margin-left:auto}
.rechtsseite main{padding:130px 0 90px}
.rechtstext{max-width:860px}
.rechtstext h1{font-size:clamp(34px,8.5vw,76px);letter-spacing:-.025em;font-weight:350;hyphens:auto;overflow-wrap:break-word}
.rechtstext{overflow-wrap:break-word}
.rechtstext h2{font-size:clamp(24px,2.6vw,32px);margin-top:1.8em}
.rechtstext h3{margin-top:1.4em}
.rechtstext p,.rechtstext li{color:#3D4650}
.entwurf{background:#FFF6D6;box-shadow:inset 0 0 0 1px #E9D48A;border-radius:18px;padding:18px 20px;margin:0 0 30px;font-size:15px}
dl.daten{display:grid;grid-template-columns:minmax(140px,220px) 1fr;gap:10px 22px;margin:0 0 18px;padding:20px 22px;background:rgba(255,255,255,.7);border-radius:18px;box-shadow:0 0 0 1px var(--linie)}
dl.daten dt{font-weight:650}dl.daten dd{margin:0}
@media (max-width:600px){dl.daten{grid-template-columns:1fr}dl.daten dd{margin-bottom:8px}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation:none!important}}

/* ===== Kurz erklärt (SEO/KI-Kurzdefinition, 26.10.2026) – immer sichtbar, keine Animation ===== */
#kurz-erklaert{background:#F4F1EC;padding:clamp(64px,9vw,110px) 0 clamp(24px,4vw,40px)}
#problem{padding-top:clamp(56px,8vw,100px)}
.titel.klein{font-size:clamp(30px,4.2vw,52px)}
.definition{font-size:clamp(17px,1.7vw,21px);line-height:1.6;color:#2B333B;max-width:46em;margin:6px 0 34px}
.definition strong{font-weight:650;color:var(--tinte)}
.fakten{display:grid;gap:0 40px;margin:0 0 26px;padding:0}
@media (min-width:860px){.fakten{grid-template-columns:1fr 1fr}}
.fakten div{display:grid;grid-template-columns:118px 1fr;gap:14px;padding:14px 0;border-top:1px solid rgba(30,35,41,.14)}
.fakten dt{font-size:12.5px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--kupfer);padding-top:3px}
.fakten dd{margin:0;color:#3C454E;font-size:15.5px}
.faq-hinweis{margin-top:22px;max-width:28em;color:var(--grau-hell)}
/* Kontrast WCAG AA auf hellem Grund (Kupfer #B4561A auf Creme = 4,3:1 -> #9A4A15 = 5,6:1) */
.ton-hell .ober,.fakten dt{color:#9A4A15}

/* v2: „Kommt dazu“ – gebündelte geplante Bereiche */
#kommt-dazu .lead .marke{vertical-align:middle;margin:0 10px 4px 0}
.karte .warnung{margin-top:12px;font-size:14px;line-height:1.5;padding:12px 14px;border-radius:14px}