@font-face{font-family:"Sora";font-style:normal;font-weight:100 800;font-display:block;src:url("../Fonts/sora-latin-wght-normal.woff2") format("woff2")}
@font-face{font-family:"Sora";font-style:normal;font-weight:100 800;font-display:block;src:url("../Fonts/sora-latin-ext-wght-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:block;src:url("../Fonts/poppins-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:block;src:url("../Fonts/poppins-latin-ext-600-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
:root{
  --pink:#E5007E; --plum:#821f81; --deep:#4d1761;
  --bg:#07070B; --s1:#101119; --s2:#171925; --line:rgba(246,246,248,.08); --line2:rgba(246,246,248,.14);
  --text:#F4F4F7; --text2:#A4A7B4; --muted:#6B6F7D;
  --f:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--f);-webkit-font-smoothing:antialiased;overflow:hidden}
::selection{background:var(--pink);color:#fff}
button,input{font-family:inherit}

/* ── Bühne: genau ein Bildschirm ── */
.buehne{position:relative;height:100svh;min-height:600px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;padding:clamp(18px,3vh,34px) clamp(20px,4.5vw,72px);overflow:hidden;isolation:isolate}

/* Hintergrund: Horizont-Licht + riesige Bildmarke */
.himmel{position:absolute;inset:0;z-index:-3;background:linear-gradient(180deg,#07070B 0%,#0A0810 58%,#0E0913 100%)}
/* Rahmen für die Hintergrund-Elemente: bis 1440 px Fensterbreite = Fenster,
   darüber bleibt er mittig stehen, die Elemente behalten ihre Lage zum Inhalt */
.bgrahmen{position:absolute;top:0;bottom:0;left:50%;width:min(100%,1440px);transform:translateX(-50%);z-index:-2;pointer-events:none}
.bgrahmen .licht{position:absolute;top:0;bottom:0;left:-50%;right:-50%;
  background:
    radial-gradient(30% 45% at 61% 62%, rgba(229,0,126,.16), transparent 70%),
    radial-gradient(25% 40% at 32.5% 100%, rgba(77,23,97,.35), transparent 70%)}
.horizont{position:absolute;left:46%;right:-10%;top:64%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 30%);mask-image:linear-gradient(90deg,transparent,#000 30%);height:1px;
  background:linear-gradient(90deg,transparent,rgba(229,0,126,.0) 10%,rgba(255,120,200,.75) 62%,rgba(229,0,126,.0) 95%,transparent);
  box-shadow:0 0 40px 6px rgba(229,0,126,.25);opacity:0;transition:opacity 2s 1s}
.horizont::after{content:"";position:absolute;left:58%;top:-60px;width:260px;height:120px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,140,200,.35),transparent);filter:blur(10px)}
.riesen-m{position:absolute;left:var(--mx,72%);top:var(--my,50%);width:min(78%,1200px);transform:translate(-50%,-50%);opacity:0;filter:blur(1px);transition:opacity 2.4s .6s,translate 1s cubic-bezier(.16,1,.3,1)}
.riesen-m svg{width:100%;height:auto;display:block}
.riesen-m path{opacity:.09}
.bereit .horizont{opacity:1}.bereit .riesen-m{opacity:1}
.atmen{animation:atmen 9s ease-in-out infinite}
@keyframes atmen{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-51%) scale(1.015)}}
.korn{position:absolute;inset:0;z-index:-1;opacity:.06;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ── Inhalt höchstens 1200 px, Hintergrund läuft über die volle Breite ── */
.kopf,.mitte,.fuss{width:100%;max-width:1200px;justify-self:center}

/* ── Kopf ── */
.kopf{display:flex;justify-content:space-between;align-items:center}
.kopf .logo svg{height:clamp(34px,5.6vh,54px);width:auto;display:block;filter:drop-shadow(0 12px 18px rgba(0,0,0,.55))}
[data-ton="hell"] .kopf .logo svg{filter:drop-shadow(0 12px 20px rgba(20,0,30,.55))}
.pille{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:400;color:var(--text2);border:1px solid var(--line2);border-radius:999px;padding:8px 14px 8px 12px;background:rgba(255,255,255,.02);backdrop-filter:blur(8px)}
.pille i{width:7px;height:7px;border-radius:50%;background:var(--pink);animation:puls 2.4s infinite}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(229,0,126,.55)}70%{box-shadow:0 0 0 9px rgba(229,0,126,0)}100%{box-shadow:0 0 0 0 rgba(229,0,126,0)}}

/* ── Mitte ── */
.mitte{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);gap:clamp(30px,5vw,90px);align-items:center;min-height:0}
.links{max-width:780px}
h1 .z{white-space:nowrap}
.eyebrow{display:flex;align-items:center;gap:14px;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--text2);margin:0 0 clamp(16px,3vh,30px)}
.eyebrow::before{content:"";width:28px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--pink),var(--plum))}
h1{font-family:"Poppins",var(--f);font-weight:600;font-size:clamp(44px,min(6.6vw,10.5vh),92px);line-height:1.02;letter-spacing:-.03em;margin:0 0 0 -.06em}
h1 .z{display:block;overflow:hidden;padding-bottom:.06em}
h1 .z>span{display:inline-block;transform:translateY(105%);transition:transform 1.3s cubic-bezier(.16,1,.3,1)}
h1 .z:nth-child(1)>span{transition-delay:.35s}
h1 .z:nth-child(2)>span{transition-delay:.5s}
.bereit h1 .z>span{transform:none}
h1 .grad{background:linear-gradient(95deg,#ff5cb4 0%,var(--pink) 40%,#a3289e 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:clamp(15px,1.25vw,18px);line-height:1.65;font-weight:300;color:var(--text2);margin:clamp(18px,3.2vh,32px) 0 clamp(22px,4vh,40px);max-width:520px}
.lead b{font-weight:500;color:var(--text)}


.fade{opacity:0;transform:translateY(14px);transition:opacity 1s ease,transform 1s cubic-bezier(.16,1,.3,1)}
.bereit .fade{opacity:1;transform:none}
/* Reihenfolge nach Blickführung: Logo → Rubrik → H1 → Text → Formular → Widget → Fortschritt */
.bereit .d0{transition-delay:0s}.bereit .d1{transition-delay:.2s}.bereit .d2{transition-delay:.85s}.bereit .d3{transition-delay:1.05s}.bereit .d4{transition-delay:1.45s}.bereit .d5{transition-delay:1.85s}

/* ── Chat: echtes Widget im Shadow-DOM ── */
.chat-host{justify-self:end;width:min(100%,400px);--ph:min(66vh,600px)}
/* alte Attrappe */
.chat{justify-self:end;width:min(100%,440px);height:min(64vh,560px);display:flex;flex-direction:column;border-radius:26px;background:linear-gradient(180deg,rgba(20,21,31,.88),rgba(12,13,19,.92));border:1px solid var(--line2);backdrop-filter:blur(18px);box-shadow:0 50px 120px -30px rgba(0,0,0,.8),0 30px 90px -40px rgba(229,0,126,.45)}
.chat header{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.chat .av{width:38px;height:38px;border-radius:12px;background:#1b1c28;display:grid;place-items:center;flex:none}
.chat .av svg{width:25px;height:auto}
.chat header b{display:block;font-weight:500;font-size:15px}
.chat header small{display:flex;align-items:center;gap:6px;font-size:11.5px;color:#4fd68a;font-weight:400}
.chat header small::before{content:"";width:6px;height:6px;border-radius:50%;background:#4fd68a}
.chat .szene{margin-left:auto;font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:5px 10px;white-space:nowrap;transition:opacity .4s}
.verlauf{flex:1;overflow:hidden;padding:20px 18px;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;mask-image:linear-gradient(transparent,#000 18%)}
.msg{max-width:84%;padding:12px 15px;border-radius:18px;font-size:14px;line-height:1.55;font-weight:300;opacity:0;transform:translateY(10px) scale(.98);transform-origin:bottom left;transition:opacity .45s, transform .55s cubic-bezier(.16,1,.3,1)}
.msg.da{opacity:1;transform:none}
.msg.bot{background:#1c1e2a;border-bottom-left-radius:6px;align-self:flex-start}
.msg.ich{background:linear-gradient(135deg,#7a2179,#4d1761);border-bottom-right-radius:6px;align-self:flex-end;transform-origin:bottom right}
.msg b{font-weight:600}
.msg.geheim{border:1px solid rgba(229,0,126,.45);background:#1a1220}
.tippt{align-self:flex-start;display:inline-flex;gap:5px;padding:15px 17px;background:#1c1e2a;border-radius:18px;border-bottom-left-radius:6px}
.tippt i{width:6px;height:6px;border-radius:50%;background:var(--text2);animation:tipp 1.2s infinite}
.tippt i:nth-child(2){animation-delay:.15s}.tippt i:nth-child(3){animation-delay:.3s}
@keyframes tipp{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.chat footer{padding:12px 14px;border-top:1px solid var(--line);display:flex;gap:10px;align-items:center}
.chat footer .eingabe{flex:1;border:1px solid var(--line);border-radius:999px;padding:11px 16px;font-size:13px;color:var(--muted);font-weight:300;min-height:42px;white-space:nowrap;overflow:hidden}
.chat footer .eingabe.schreibt{color:var(--text)}
.chat footer .eingabe.schreibt::after{content:"";display:inline-block;width:1px;height:1em;background:var(--pink);vertical-align:-2px;margin-left:2px;animation:cursor 1s steps(1) infinite}
@keyframes cursor{50%{opacity:0}}
.chat footer .senden{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--pink),var(--plum));flex:none}

/* ── Fuß: Meilensteine ── */
.fuss{display:flex;justify-content:space-between;align-items:end;gap:30px}
.fortschritt{width:min(100%,640px)}
.fortschritt .oben{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.fortschritt .oben b{font-weight:500;color:var(--text);letter-spacing:.2em}
.fortschritt .oben b i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--pink);margin-right:9px;vertical-align:1px;animation:puls 2.4s infinite}
.spur{position:relative;height:2px;border-radius:2px;background:rgba(246,246,248,.1)}
.spur .voll{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;background:linear-gradient(90deg,var(--plum),var(--pink));box-shadow:0 0 18px rgba(229,0,126,.55);transition:width 2.2s cubic-bezier(.16,1,.3,1) 2.3s;overflow:hidden}
.bereit .spur .voll{width:var(--stand)}
.spur .glanz{position:absolute;top:0;bottom:0;width:90px;left:-90px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent)}
.spur .kopfpunkt{position:absolute;top:50%;left:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(229,0,126,.35),0 0 20px var(--pink);transition:left 2.2s cubic-bezier(.16,1,.3,1) 2.3s}
.bereit .spur .kopfpunkt{left:var(--stand)}
.marken{position:relative;height:30px;margin-top:12px;font-size:12px;font-weight:400;color:var(--muted)}
.marken span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.marken span:first-child{transform:none}
.marken span:last-child{transform:translateX(-100%)}
.marken span.da{color:var(--text2)}
.marken span.jetzt{color:var(--text);font-weight:500}
.marken span::before{content:"";position:absolute;top:-17px;left:50%;width:1px;height:8px;background:rgba(246,246,248,.22)}
.marken span:first-child::before{left:0}.marken span:last-child::before{left:auto;right:0}


/* Intro */
#intro{position:fixed;inset:0;z-index:30;background:#000;display:grid;place-items:center;transition:opacity .8s ease,visibility .8s}
#intro.weg{opacity:0;visibility:hidden}
#intro svg{width:min(300px,64vw);height:auto;overflow:visible;filter:drop-shadow(0 12px 18px rgba(0,0,0,.55))}
[data-ton="hell"] #intro svg{filter:drop-shadow(0 12px 20px rgba(20,0,30,.55))}
#intro .m path{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);opacity:0;animation:strich .75s cubic-bezier(.2,.8,.2,1) forwards}
#intro .m path:nth-child(1){animation-delay:.15s}#intro .m path:nth-child(2){animation-delay:.26s}#intro .m path:nth-child(3){animation-delay:.37s}
#intro .m path:nth-child(4){animation-delay:.48s}#intro .m path:nth-child(5){animation-delay:.59s}#intro .m path:nth-child(6){animation-delay:.7s}
#intro .wort{opacity:0;transform:translateX(-12px);animation:wort .8s 1s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes strich{to{transform:scaleY(1);opacity:1}}
@keyframes wort{to{opacity:1;transform:none}}


/* Akzent auf dem é: wie im Studio-Preloader (Variante G/H) */
.akz{transform-box:fill-box;transform-origin:0% 100%}
#intro .akz{opacity:0;animation:akzentFall .6s cubic-bezier(.3,1.6,.5,1) 1.5s forwards, wippen 1.6s cubic-bezier(.45,0,.3,1) 2.1s infinite}
.kopf .akz{animation:wippenRuhe 4.8s cubic-bezier(.45,0,.3,1) 3.4s infinite}
@keyframes akzentFall{from{opacity:0;transform:translateY(-26px) rotate(-20deg)}to{opacity:1;transform:none}}
@keyframes wippen{0%,100%{transform:none;filter:none}30%{transform:rotate(-18deg) translateY(-3px);filter:drop-shadow(0 0 6px #E5007E)}55%{transform:rotate(6deg)}75%{transform:rotate(-3deg)}}
@keyframes wippenRuhe{0%,33.4%,100%{transform:none;filter:none}10%{transform:rotate(-18deg) translateY(-3px);filter:drop-shadow(0 0 6px #E5007E)}18.3%{transform:rotate(6deg)}25%{transform:rotate(-3deg)}}


/* ── Helle Variante: <body data-ton="hell"> — Grund in Mentoré-Pflaume statt Schwarz ── */
[data-ton="hell"]{--bg:#3A1549;--s1:#2A0F36;--s2:#331241;--line:rgba(255,255,255,.12);--line2:rgba(255,255,255,.2);--text:#FFFFFF;--text2:#DCCDE3;--muted:#B39FBE}
[data-ton="hell"] .himmel{background:linear-gradient(180deg,#4A1A5E 0%,#3D1650 55%,#30113F 100%)}
[data-ton="hell"] .bgrahmen .licht{background:
    radial-gradient(30% 45% at 61% 62%, rgba(229,0,126,.28), transparent 70%),
    radial-gradient(25% 40% at 32.5% 100%, rgba(130,31,129,.55), transparent 70%)}
[data-ton="hell"] .riesen-m path{opacity:.14}
[data-ton="hell"] .korn{opacity:.07}
[data-ton="hell"] h1 .grad{background:linear-gradient(95deg,#ff7cc6 0%,#ff2d9c 45%,#e24fd2 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-ton="hell"] .eyebrow::before{background:linear-gradient(90deg,#ff4fae,#e24fd2)}
[data-ton="hell"] .spur{background:rgba(255,255,255,.18)}
[data-ton="hell"] .spur .voll{background:linear-gradient(90deg,#c13fb8,#ff2d9c)}
[data-ton="hell"] .marken span::before{background:rgba(255,255,255,.3)}
[data-ton="hell"] #intro{background:#3D1650}
[data-ton="hell"] .chat-host{filter:drop-shadow(0 40px 60px rgba(20,0,30,.45))}


/* ── Umschalter Dunkel / Hell ── */
.ton{position:relative;display:inline-flex;align-items:center;width:80px;height:40px;flex:none;padding:0;border-radius:999px;border:1px solid var(--line2);background:rgba(255,255,255,.04);backdrop-filter:blur(8px);cursor:pointer;color:var(--text2);transition:border-color .3s,background .3s}
.ton:hover{border-color:rgba(229,0,126,.6)}
.ton:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.ton svg{position:relative;z-index:1;width:18px;height:18px;flex:1;transition:color .35s}
.ton .knopf{position:absolute;top:3px;left:3px;width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--pink),var(--plum));transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.ton .mond{color:#fff}
[data-ton="hell"] .ton .knopf{transform:translateX(40px)}
[data-ton="hell"] .ton .mond{color:var(--text2)}
[data-ton="hell"] .ton .sonne{color:#fff}
::view-transition-old(root),::view-transition-new(root){animation-duration:.6s}

/* Responsiv */
/* Pfeil-Knopf nur auf dem Handy */
.runter{display:none}

/* ── Handy & Tablet: zwei Ansichten, die einrasten ──
   Ansicht 1: Kopf, Text, Fortschritt – E-Mail-Zeile am unteren Rand.
   Ansicht 2: dieselbe E-Mail-Zeile oben, darunter das Widget. */
@media (max-width:980px), (orientation:portrait) and (max-width:1100px){
  html{scroll-snap-type:y mandatory}
  body{overflow:auto}
  .buehne{--fz:84px;--fu:96px;height:calc(200svh - var(--fz));min-height:0;padding:18px 20px 0;
    grid-template-rows:auto minmax(0,1fr) auto auto auto minmax(0,1.3fr) auto var(--fz) calc(100svh - var(--fz));scroll-snap-align:start}
  .mitte,.links{display:contents}
  .kopf{grid-row:1}
  .eyebrow{grid-row:3}
  h1{grid-row:4;font-size:clamp(44px,10.5vw,96px)}
  .lead{grid-row:5;margin-bottom:0;max-width:600px}
  .fuss{grid-row:7;flex-direction:column;align-items:stretch;padding-bottom:4px}
  .formzeile{grid-row:8;display:flex;align-items:center;gap:10px;height:var(--fz);scroll-snap-align:start;width:100%;max-width:640px}
  .chat-host{grid-row:9;justify-self:stretch;align-self:start;width:100%;max-width:640px;--ph:calc(100svh - var(--fz) - 18px)}
  .runter{display:grid;place-items:center;flex:none;width:54px;height:54px;border-radius:50%;border:1px solid var(--line2);background:rgba(16,17,25,.7);backdrop-filter:blur(10px);color:var(--text);cursor:pointer;padding:0;transition:border-color .3s}
  .runter svg{width:22px;height:22px;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
  .runter.oben svg{transform:rotate(180deg)}
  .runter:active{border-color:var(--pink)}
  [data-ton="hell"] .runter{background:rgba(24,5,32,.62);border-color:rgba(255,255,255,.22)}
  .riesen-m{width:max(190%,820px)}
}
@media (max-width:560px){
  .marken{font-size:11px}
}
@media (max-height:720px) and (min-width:981px){.chat-host{--ph:60vh}.lead{margin:16px 0 20px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important}}


/* ════════ TYPO3-Ergänzungen ════════ */

/* Werkzeugleiste oben rechts (Sprache + Dunkel/Hell), auf Höhe des Logos im 1200-px-Rahmen */
.werkzeugleiste{position:absolute;z-index:5;top:clamp(18px,3vh,34px);left:50%;translate:-50% 0;width:calc(100% - 2*clamp(20px,4.5vw,72px));max-width:1200px;height:clamp(34px,5.6vh,54px);display:flex;justify-content:flex-end;align-items:center;gap:12px;pointer-events:none}
.werkzeugleiste > *{pointer-events:auto}
.sprachwahl,.menue{position:relative;display:flex;flex:none}
.sprachwahl summary,.menue summary{list-style:none;cursor:pointer;height:40px;min-width:40px;box-sizing:border-box;padding:0 14px;border-radius:999px;border:1px solid var(--line2);background:rgba(255,255,255,.04);backdrop-filter:blur(8px);display:grid;place-items:center;font-size:13px;font-weight:600;letter-spacing:.1em;line-height:1;text-transform:uppercase;color:var(--text2);transition:border-color .3s}
.sprachwahl summary::-webkit-details-marker,.menue summary::-webkit-details-marker{display:none}
.sprachwahl summary:hover,.sprachwahl[open] summary,.menue summary:hover,.menue[open] summary{border-color:rgba(229,0,126,.6);color:var(--text)}
.sprachwahl ul,.menue ul{position:absolute;right:0;top:calc(100% + 8px);margin:0;padding:6px;list-style:none;min-width:170px;max-height:60vh;overflow:auto;border-radius:16px;border:1px solid var(--line2);background:rgba(16,17,25,.96);backdrop-filter:blur(14px);box-shadow:0 24px 60px -20px rgba(0,0,0,.7)}
.sprachwahl a,.menue a{display:block;padding:9px 12px;border-radius:10px;color:var(--text2);text-decoration:none;font-size:14px}
.sprachwahl a:hover,.menue a:hover{background:rgba(255,255,255,.06);color:var(--text)}
.sprachwahl a.aktiv{color:var(--text);font-weight:500}
.sprachwahl a.aktiv::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-radius:50%;background:var(--pink);vertical-align:2px}
[data-ton="hell"] .sprachwahl ul,[data-ton="hell"] .menue ul{background:rgba(38,12,51,.97)}
[data-ton="hell"] .sprachwahl summary,[data-ton="hell"] .menue summary{background:rgba(24,5,32,.35)}

/* Rechtliches + DB-IP-Hinweis (Pflicht nach CC BY 4.0) */
.rechtliches{position:absolute;z-index:4;bottom:clamp(18px,3vh,34px);left:50%;translate:-50% 0;width:calc(100% - 2*clamp(20px,4.5vw,72px));max-width:1200px;display:flex;justify-content:flex-end;gap:18px;font-size:11.5px;pointer-events:none}
.rechtliches a{pointer-events:auto;color:var(--muted);text-decoration:none;transition:color .3s}
.rechtliches a:hover{color:var(--text)}

/* Formular (EXT:form) im Hero-Layout */
.anmeldung{flex:1;min-width:0;max-width:520px}
.anmeldung form{display:flex;align-items:center;gap:8px;padding:6px;border:1px solid var(--line2);border-radius:999px;background:rgba(16,17,25,.7);backdrop-filter:blur(10px);transition:border-color .4s,box-shadow .4s;position:relative}
.anmeldung form:focus-within{border-color:rgba(229,0,126,.6)}
.anmeldung.ruf form{border-color:var(--pink);box-shadow:0 0 0 6px rgba(229,0,126,.12),0 0 60px rgba(229,0,126,.25)}
.anmeldung form > div{display:contents}
.anmeldung .form-group,.anmeldung .form-element{flex:1;min-width:0;margin:0;position:relative}
.anmeldung h2,.anmeldung .required{display:none}
.anmeldung .form-group .input{display:block}
.anmeldung label,.anmeldung .form-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.anmeldung input[type=email]{width:100%;background:none;border:0;outline:0;color:var(--text);font:15px var(--f);padding:12px 18px}
.anmeldung input::placeholder{color:var(--muted)}
.anmeldung .actions,.anmeldung nav,.anmeldung .btn-toolbar,.anmeldung .btn-group{display:contents}
.anmeldung button[type=submit]{border:0;border-radius:999px;padding:14px 24px;font:500 14.5px var(--f);color:#fff;cursor:pointer;white-space:nowrap;background:linear-gradient(135deg,var(--pink),var(--plum));transition:filter .3s}
.anmeldung button[type=submit]:hover{filter:brightness(1.12)}
.anmeldung .error,.anmeldung .invalid-feedback,.anmeldung .help-block{position:absolute;left:18px;top:calc(100% + 14px);font-size:12px;color:#ff7aa8;white-space:nowrap}
.anmeldung .has-error,.anmeldung .is-invalid{border:0}
.anmeldung .danke,.anmeldung .form-confirmation{display:flex;align-items:center;gap:12px;min-height:58px;padding:0 22px;border:1px solid rgba(229,0,126,.5);border-radius:999px;background:rgba(16,17,25,.7);font-size:14.5px}
.anmeldung .danke::before,.anmeldung .form-confirmation::before{content:"";flex:none;width:20px;height:20px;background:no-repeat center/20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E5007E' stroke-width='2.2'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.anmeldung.sendet button[type=submit]{opacity:.6;pointer-events:none}
.anmeldung [aria-hidden="true"][autocomplete]{position:absolute!important;left:-9999px!important}
[data-ton="hell"] .anmeldung form{background:rgba(24,5,32,.62);border-color:rgba(255,255,255,.22)}
[data-ton="hell"] .anmeldung .danke,[data-ton="hell"] .anmeldung .form-confirmation{background:rgba(24,5,32,.62)}

/* H1 passt sich an lange Übersetzungen an (mentore.js setzt --h1-skala) */
h1{font-size:calc(clamp(44px,min(6.6vw,10.5vh),92px) * var(--h1-skala,1))}

/* Handy / Tablet hoch */
@media (max-width:980px), (orientation:portrait) and (max-width:1100px){
  .werkzeugleiste{top:18px;width:calc(100% - 40px);height:clamp(34px,5.6vh,54px)}
  h1{font-size:calc(clamp(40px,10.5vw,96px) * var(--h1-skala,1))}
  .anmeldung{max-width:none}
  .anmeldung button[type=submit]{width:44px;height:44px;padding:0;flex:none;font-size:0;color:transparent;
    background:no-repeat center/19px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M3.4 20.4l17.45-7.48a1 1 0 000-1.84L3.4 3.6a1 1 0 00-1.39 1.16L4 12l-1.99 7.24a1 1 0 001.39 1.16z'/%3E%3C/svg%3E"),linear-gradient(135deg,var(--pink),var(--plum))}
  .anmeldung input[type=email]{font-size:14px;padding:12px 14px}
  .anmeldung .danke,.anmeldung .form-confirmation{font-size:13px;min-height:56px;padding:0 16px;border-radius:22px}
  .chat-host{--ph:calc(100svh - var(--fz) - 40px) !important}
  body{position:relative}
  .rechtliches{bottom:12px;justify-content:center}
}

.lead p{margin:0}
.lead p+p{margin-top:.8em}

/* Hamburger-Menü */
.menue summary,.sprachwahl summary{width:40px;padding:0;border-radius:50%}
.menue .striche{position:relative;width:18px;height:14px}
.menue .striche i{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .2s,top .35s}
.menue .striche i:nth-child(1){top:0}.menue .striche i:nth-child(2){top:6px}.menue .striche i:nth-child(3){top:12px}
.menue[open] .striche i:nth-child(1){top:6px;transform:rotate(45deg)}
.menue[open] .striche i:nth-child(2){opacity:0}
.menue[open] .striche i:nth-child(3){top:6px;transform:rotate(-45deg)}

/* Unterseiten (Impressum, Datenschutz) */
body:has(.seite){overflow:auto;height:auto}
body:has(.seite) .seite{position:relative;min-height:100svh;padding:clamp(18px,3vh,34px) clamp(20px,4.5vw,72px) 80px;isolation:isolate}
body:has(.seite) .seite .kopf{max-width:1200px;margin:0 auto}
body:has(.seite) .inhalt{max-width:760px;margin:clamp(48px,10vh,110px) auto 0;font-size:16px;line-height:1.7;font-weight:300;color:var(--text2)}
body:has(.seite) .inhalt h1{font-family:"Poppins",var(--f);font-weight:600;color:var(--text);font-size:clamp(36px,6vw,64px);line-height:1.05;letter-spacing:-.03em;margin:0 0 .6em}
body:has(.seite) .inhalt h2,body:has(.seite) .inhalt h3{color:var(--text);font-weight:600;margin:2em 0 .5em;letter-spacing:-.01em}
body:has(.seite) .inhalt a{color:var(--pink)}
body:has(.seite) .inhalt strong,body:has(.seite) .inhalt b{color:var(--text);font-weight:500}
body:has(.seite) .rechtliches{position:static;translate:none;margin:60px auto 0;justify-content:center}