/* ATEM Hybrid — Website (Board 42). Reines CSS, ein Skript (site.js).
   Quelle: site/site.css → web/site.css (python3 tool/site_build.py). */

/* ---- 01 Grundlagen & Tokens ------------------------------------------- */
@font-face{font-family:Huninn;src:url(/fonts/huninn-400.woff2) format("woff2");font-display:swap}
@font-face{font-family:Poppins;src:url(/fonts/poppins-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url(/fonts/poppins-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Poppins;src:url(/fonts/poppins-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/fonts/jbmono-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/fonts/jbmono-600.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --bg:#050507;--band:#0B0B0E;--card:#14141D;--raised:#1A1A26;--line:#232334;
  --t1:#fff;--t2:#CDD3EA;--t3:#94A3B8;--act:#00F2FE;
  --hy:#AB6BF0;--tr:#04ABEE;--kp:#00FF87;--amber:#FFB020;--focus:#fff;
  --glass:rgb(20 20 29/.82);--hdr:rgb(5 5 7/.82);--screen:#0B0B0E;
  --card-sh:0 18px 40px rgb(0 0 0/.55);
  --phone-sh:0 0 0 1px #232334,0 40px 100px rgb(0 0 0/.7);
  --gB:rgb(4 171 238/.2);--gG:rgb(0 255 135/.14);
  --gline:linear-gradient(90deg,rgb(0 255 135/.6),rgb(4 171 238/.6));
  --gdot:linear-gradient(90deg,#00FF87,#04ABEE);
  --band-g:linear-gradient(100deg,rgb(0 255 135/.07) 0%,rgb(4 171 238/.11) 100%),#0B0B0E;
  --wash:radial-gradient(70% 60% at 78% 8%,rgb(122 43 219/.26) 0%,rgb(122 43 219/0) 70%),
         radial-gradient(50% 55% at 6% 100%,rgb(4 171 238/.16) 0%,rgb(4 171 238/0) 70%),
         radial-gradient(35% 40% at 42% 100%,rgb(0 255 135/.08) 0%,rgb(0 255 135/0) 70%);
  --wash-join:radial-gradient(40% 60% at 12% 100%,rgb(0 255 135/.16) 0%,rgb(0 255 135/0) 70%),
         radial-gradient(40% 60% at 88% 100%,rgb(4 171 238/.2) 0%,rgb(4 171 238/0) 70%),
         radial-gradient(55% 70% at 50% 100%,rgb(122 43 219/.24) 0%,rgb(122 43 219/0) 70%);
  --wash-fb:radial-gradient(55% 70% at 88% 0%,rgb(4 171 238/.24) 0%,rgb(4 171 238/0) 70%),
         radial-gradient(45% 60% at 8% 12%,rgb(0 255 135/.15) 0%,rgb(0 255 135/0) 70%);
  --z1:#94A3B8;--z2:#00FF87;--z3:#FFE14D;--z4:#FFB020;
  --settle:cubic-bezier(.22,1,.36,1);--enter:cubic-bezier(.33,1,.68,1);
  --pop:cubic-bezier(.34,1.56,.64,1);--exit:cubic-bezier(.4,0,1,1);
  --pad:1rem;--sec:4.5rem;--hdr-h:4rem;
  color-scheme:dark;
}
@media (min-width:22.5em){:root{--pad:1.25rem;--sec:5.5rem}}
@media (min-width:47.5em){:root{--pad:2.5rem;--sec:7.5rem;--hdr-h:4.5rem}}
@media (min-width:75em){:root{--pad:3rem;--sec:10rem;--hdr-h:4.75rem}}

/* Hell folgt nur dem System (Board 42, 01) — kein Schalter. */
@media (prefers-color-scheme:light){:root{
  --bg:#EDEFF4;--band:#F6F7FA;--card:#fff;--raised:#F0F2F7;--line:#D5D9E3;
  --t1:#0D0E16;--t2:#373C52;--t3:#585E75;--act:#00707F;
  --hy:#7B3FC4;--tr:#066FB7;--kp:#007A4D;--amber:#C63C00;--focus:#0D0E16;
  --glass:rgb(255 255 255/.9);--hdr:rgb(237 239 244/.86);--screen:#fff;
  --card-sh:0 14px 32px rgb(13 14 22/.14);
  --phone-sh:0 0 0 1px #C9CEDA,0 40px 90px rgb(13 14 22/.22);
  --gB:rgb(4 130 210/.13);--gG:rgb(0 160 95/.12);
  --gline:linear-gradient(90deg,rgb(0 122 77/.45),rgb(6 111 183/.45));
  --band-g:linear-gradient(100deg,rgb(0 160 95/.07) 0%,rgb(4 130 210/.09) 100%),#F6F7FA;
  --wash:radial-gradient(70% 60% at 78% 8%,rgb(122 43 219/.11) 0%,rgb(122 43 219/0) 70%),
         radial-gradient(50% 55% at 6% 100%,rgb(4 130 210/.12) 0%,rgb(4 130 210/0) 70%),
         radial-gradient(35% 40% at 42% 100%,rgb(0 160 95/.07) 0%,rgb(0 160 95/0) 70%);
  --wash-join:radial-gradient(40% 60% at 12% 100%,rgb(0 160 95/.12) 0%,rgb(0 160 95/0) 70%),
         radial-gradient(40% 60% at 88% 100%,rgb(4 130 210/.14) 0%,rgb(4 130 210/0) 70%),
         radial-gradient(55% 70% at 50% 100%,rgb(122 43 219/.1) 0%,rgb(122 43 219/0) 70%);
  --wash-fb:radial-gradient(55% 70% at 88% 0%,rgb(4 130 210/.15) 0%,rgb(4 130 210/0) 70%),
         radial-gradient(45% 60% at 8% 12%,rgb(0 160 95/.11) 0%,rgb(0 160 95/0) 70%);
  --z1:#585E75;--z2:#007A4D;--z3:#6B5400;--z4:#C63C00;
  color-scheme:light;
}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr-h) + 1rem)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--t1);font:400 1rem/1.6 Poppins,system-ui,sans-serif;
  hyphens:auto;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
@media (min-width:47.5em){body{font-size:1.0625rem}}
img{max-width:100%}
h1,h2,h3{font-family:Huninn,Poppins,sans-serif;font-weight:400;margin:0;text-wrap:balance}
h1{font-size:clamp(2.125rem,1.25rem + 3.6vw,4rem);line-height:1.05}
h2{font-size:clamp(1.75rem,1.125rem + 2.4vw,3rem);line-height:1.12}
.h3{font-size:clamp(1.25rem,1.1rem + .4vw,1.5rem);line-height:1.3}
p{margin:0}
a{color:var(--act);text-underline-offset:3px}
a:hover{color:var(--t1)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.wrap{max-width:75rem;margin-inline:auto;padding-inline:var(--pad)}
.kick{font:500 .75rem/1.3 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--tone,var(--t2));margin:0}
@media (min-width:47.5em){.kick{font-size:.8125rem}}
.kick--dot{display:flex;align-items:center;gap:.5rem;letter-spacing:.12em;font-size:.75rem}
.kick--dot::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--tone,var(--t2))}
.lead{font-size:clamp(1.0625rem,.95rem + .45vw,1.25rem);line-height:1.5;color:var(--t2);max-width:32em;text-wrap:pretty}
.small,.meta{font:500 .875rem/1.5 "JetBrains Mono",monospace;color:var(--t2)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tnum{font-variant-numeric:tabular-nums}

.skip{position:absolute;left:var(--pad);top:-4rem;z-index:20;min-height:48px;display:inline-flex;align-items:center;
  padding:0 1rem;border-radius:30px;background:var(--act);color:#050507;font-weight:600;text-decoration:none}
.skip:focus{top:.5rem}

/* ---- 02 Kopf ----------------------------------------------------------- */
.hd{position:sticky;top:0;z-index:10;background:var(--hdr);border-bottom:1px solid var(--line)}
@supports (backdrop-filter:blur(1px)){.hd{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}}
.hd__in{display:flex;align-items:center;gap:.25rem;min-height:var(--hdr-h)}
.logo{display:inline-flex;align-items:center;gap:.625rem;min-height:48px;color:var(--t1);text-decoration:none;
  font-weight:600;font-size:1.0625rem;letter-spacing:.3em;margin-right:auto}
.logo:hover{color:var(--t1)}
.logo__img{flex:none;width:36px;height:36px;border-radius:50%}
.logo__img--l{width:44px;height:44px}
/* Das Logo ist Licht auf Dunkel (wie das App-Symbol). Hell steht es auf
   einem dunklen Kreis — wie das Profil-Logo der App (30.09.2026). */
@media (prefers-color-scheme:light){.logo__img{background:#050507;padding:3px}}
.hd__nav{display:none;gap:.25rem}
.hd__nav a,.hd__lang a{min-height:48px;display:inline-flex;align-items:center;padding-inline:.75rem;
  color:var(--t1);text-decoration:none;font-weight:500;font-size:.9375rem}
.hd__nav a:hover{text-decoration:underline}
.hd__lang{display:none;gap:0;margin-left:.25rem;font:500 .875rem "JetBrains Mono",monospace}
.hd__lang a{font:inherit;padding-inline:.5rem;min-width:48px;justify-content:center}
.hd__lang a:not([aria-current]){color:var(--act);text-decoration:underline}
.hd__lang a[aria-current]{color:var(--t1)}
.hd .hd__cta{display:none;margin-left:.5rem}
.menu{position:static}
.menu>summary{list-style:none;min-height:48px;min-width:48px;display:inline-flex;align-items:center;gap:.5rem;
  padding-inline:.75rem;border-radius:30px;cursor:pointer;font-weight:500;color:var(--t1)}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary::after{content:"≡";font:600 1.25rem/1 "JetBrains Mono",monospace}
.menu[open]>summary::after{content:"×"}
.menu__panel{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);
  display:grid;grid-template-rows:1fr}
.menu__panel nav{padding:.5rem var(--pad) 1rem;display:flex;flex-direction:column}
.menu__panel a{min-height:48px;display:flex;align-items:center;color:var(--t1);text-decoration:none;font-weight:500;
  border-bottom:1px solid var(--line)}
.menu__panel .btn{margin-top:1rem;border-bottom:1.5px solid var(--act)}
@media (prefers-reduced-motion:no-preference){
  .menu[open] .menu__panel{animation:menu-in .32s var(--settle)}
}
@keyframes menu-in{from{opacity:0;transform:translateY(-8px)}}
@media (min-width:47.5em){
  .hd__nav,.hd__lang{display:flex}.hd .hd__cta{display:inline-flex}.menu{display:none}
  .logo{margin-right:auto}
}

/* ---- 10 Knöpfe ---------------------------------------------------------- */
.btn{min-height:3.25rem;padding:.75rem 1.75rem;display:inline-flex;align-items:center;justify-content:center;
  border-radius:30px;font:600 1rem/1.25 Poppins,sans-serif;text-align:center;text-decoration:none;
  transition:transform .2s ease-out,filter .2s ease-out;cursor:pointer;border:0}
.btn:active{transform:scale(.97)}
.btn--main{background:#00F2FE;color:#050507;box-shadow:0 10px 30px -10px rgb(0 242 254/.45)}
.btn--main:hover{color:#050507;filter:brightness(1.06)}
.btn--line{background:transparent;border:1.5px solid var(--act);color:var(--act)}
.btn--line:hover{color:var(--t1);border-color:var(--t1)}
.btn--s{min-height:3rem;padding:.5rem 1.25rem;font-size:.9375rem}
@media (prefers-reduced-motion:reduce){.btn:active{transform:none;filter:brightness(.9)}}

/* Testzustand: ein Attribut am body (open · full · soon). */
[data-test="open"] .not-open,
[data-test="full"] .only-open,[data-test="soon"] .only-open,
[data-test="open"] .only-full,[data-test="soon"] .only-full,
[data-test="open"] .only-soon,[data-test="full"] .only-soon{display:none!important}

/* ---- 03 Held ------------------------------------------------------------ */
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:var(--wash);pointer-events:none}
.hero__in{position:relative;display:grid;gap:2.25rem;padding-block:2.5rem 4rem}
.hero h1{margin-top:.875rem}
.hero .lead{margin-top:1.25rem}
.row{margin-top:2rem;display:flex;flex-wrap:wrap;align-items:center;gap:.875rem 1.25rem}
@media (min-width:22.5em){.hero__in{gap:2.5rem;padding-block:3rem 4.5rem}}
@media (min-width:47.5em){.hero__in{gap:3.5rem;padding-block:4.5rem 6rem}}
@media (min-width:75em){.hero__in{grid-template-columns:1fr 1fr;gap:3rem;align-items:center;padding-block:6rem 7.5rem}}

/* ---- 04 Telefon & schwebende Karten ------------------------------------ */
.stage{position:relative;container-type:inline-size;width:100%;max-width:35rem;margin-inline:auto}
.phone{--pw:220px;position:relative;width:min(var(--pw),100%);margin:0 auto;
  padding:calc(var(--pw) * .033);border-radius:calc(var(--pw) * .14);background:#000;box-shadow:var(--phone-sh)}
.phone picture,.phone img{display:block;width:100%;height:auto;aspect-ratio:9/20;object-fit:cover;
  border-radius:calc(var(--pw) * .107);background:var(--screen)}
.hero .phone{--pw:250px}
.feat .phone{--pw:240px}
@media (max-width:22.49em){.hero .phone,.feat .phone{--pw:220px}}
@media (min-width:47.5em){.hero .phone{--pw:300px}}
@media (min-width:75em){.hero .phone{--pw:320px}.feat .phone{--pw:290px}}

.fcard{position:absolute;z-index:1;left:var(--l,auto);right:var(--r,auto);top:var(--t,auto);bottom:var(--b,auto);
  width:min(15rem,46%);padding:1rem;border-radius:20px;background:var(--glass);
  border:1px solid var(--line);box-shadow:var(--card-sh);font-size:.8125rem;color:var(--t1)}
@supports (backdrop-filter:blur(1px)){.fcard{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}}
@supports not (backdrop-filter:blur(1px)){.fcard{background:var(--card)}}
.fcard .kick{font-size:.75rem;letter-spacing:.12em;color:var(--tone)}
.fcard__t{margin-top:.375rem;font-weight:600;font-size:.9375rem}
.fcard__v{margin-top:.25rem;font:600 clamp(1.375rem,1.2rem + .5vw,1.625rem)/1.15 "JetBrains Mono",monospace;font-variant-numeric:tabular-nums}
.fcard__w{margin-top:.375rem;font:400 clamp(1.125rem,1rem + .4vw,1.3125rem)/1.2 Huninn,Poppins,sans-serif}
.fcard__d{margin-top:.25rem;font:500 .8125rem "JetBrains Mono",monospace}
.fcard__rows{margin:.625rem 0 0;display:flex;flex-direction:column;gap:.4375rem}
.fcard__rows>div>div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 10px}
.fcard__rows dt{color:var(--t2)}
.fcard__rows dd{margin:0;font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums}
.fcard__rows dd span{color:var(--t2)}
.fcard__bar{margin-top:4px;height:6px;border-radius:3px;background:var(--line)}
.fcard__bar i{display:block;height:100%;border-radius:3px;background:var(--tone)}
.fcard__segs{margin-top:.625rem;display:flex;gap:2px;height:8px}
.fcard__segs i{min-width:3px;border-radius:2px}
.fcard__l{margin-top:.375rem;font:500 .75rem "JetBrains Mono",monospace;color:var(--t2)}
.fcard__n{margin-top:.625rem;padding-top:.5rem;border-top:1px solid var(--line);font:500 .75rem/1.4 "JetBrains Mono",monospace;color:var(--t2)}
.fcard:nth-of-type(3){display:none}
@container (min-width:30rem){.fcard:nth-of-type(3){display:block}}
@container (max-width:20.99rem){.fcard{position:static;width:auto;margin-top:.75rem}}

/* ---- 06 Band „Funktioniert mit" ---------------------------------------- */
.band{background:var(--band-g);border-block:1px solid;border-image:var(--gline) 1}
.band__in{display:grid;gap:.875rem;padding-block:2rem}
.marks{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;margin:.375rem 0 0;padding:0;list-style:none;
  font:600 clamp(1.125rem,1rem + .5vw,1.375rem) Poppins,sans-serif;color:var(--t2)}
@media (min-width:22.5em){.band__in{padding-block:2.25rem}}
@media (min-width:47.5em){.band__in{justify-items:center;text-align:center;padding-block:2.75rem}.marks{justify-content:center}}
@media (min-width:75em){.band__in{padding-block:3rem}}

/* ---- 05 Funktionsblock ------------------------------------------------- */
.feat{position:relative;display:grid;gap:1.5rem;align-items:center;padding-top:var(--sec)}
.feat__txt h2{margin-top:.875rem}
.feat__txt .lead{margin-top:1rem}
.feat .stage::before{content:"";position:absolute;inset:-12% -8%;z-index:-1;pointer-events:none;
  background:radial-gradient(90% 40% at 50% 75%,var(--glow) 0%,transparent 70%)}
@media (min-width:22.5em){.feat{gap:1.75rem}}
@media (min-width:47.5em){
  .feat{grid-template-columns:1fr 1fr;gap:2.5rem}
  .feat--flip .feat__txt{order:2}
  .feat .stage::before{background:radial-gradient(42% 62% at 76% 55%,var(--glow) 0%,transparent 70%)}
  .feat--flip .stage::before{background:radial-gradient(42% 62% at 24% 55%,var(--glow) 0%,transparent 70%)}
}
@media (min-width:75em){.feat{grid-template-columns:5fr 6fr;gap:4.5rem}.feat--flip{grid-template-columns:6fr 5fr}}

/* ---- 07 Kartenraster --------------------------------------------------- */
.sec{padding-top:var(--sec)}
.tiles{display:grid;gap:1rem;grid-template-columns:1fr;margin:2.5rem 0 0;padding:0;list-style:none}
@media (min-width:47.5em){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:75em){.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tile{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:1.375rem}
.tile h3{font:600 1.125rem/1.3 Poppins,sans-serif;margin:.875rem 0 0}
@media (min-width:47.5em){.tile h3{font-size:1.1875rem}}
.tile p:last-child{margin-top:.375rem;color:var(--t2);font-size:.9375rem;line-height:1.55}

/* Warum ATEM */
.sec .lead{margin-top:1rem}
.sec h2{margin-top:.875rem}
.sec>h2:first-child{margin-top:0}
.why{margin-top:2.5rem;display:grid;gap:1.75rem 1.5rem;grid-template-columns:1fr;padding:0;list-style:none}
@media (min-width:47.5em){.why{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:75em){.why{grid-template-columns:repeat(4,minmax(0,1fr))}}
.why li{border-top:1px solid var(--line);padding-top:1.25rem}
.why__not{font:500 .875rem "JetBrains Mono",monospace;color:var(--t3)}
.why__not s{text-decoration-thickness:1px}
.why h3{margin-top:.5rem;font-size:clamp(1.25rem,1.1rem + .4vw,1.5rem);line-height:1.25}
.why p{margin-top:.5rem;font-size:.9375rem;line-height:1.55;color:var(--t2)}

/* Privatsphäre */
.priv{margin-top:var(--sec);background:var(--band-g);border-block:1px solid var(--line)}
.priv__in{display:grid;gap:1.5rem;align-items:start;padding-block:4rem}
.priv h2{margin-top:.875rem}
.priv .lead{margin-top:1rem}
.priv__link{margin-top:.75rem;min-height:48px;display:inline-flex;align-items:center;font-weight:600}
.checks{margin:0;padding:0;list-style:none}
.checks li{display:flex;gap:.875rem;align-items:baseline;padding:1rem 0;border-bottom:1px solid var(--line)}
.checks li::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;border:2px solid var(--kp);transform:translateY(1px)}
@media (min-width:22.5em){.priv__in{gap:1.75rem;padding-block:4.5rem}}
@media (min-width:47.5em){.priv__in{grid-template-columns:1fr 1fr;gap:2.5rem;padding-block:6rem}}
@media (min-width:75em){.priv__in{grid-template-columns:5fr 6fr;gap:4.5rem;padding-block:7.5rem}}

/* Mitgestalten / Mitmachen-Karten */
.duo{margin-top:2.5rem;display:grid;gap:1rem;grid-template-columns:1fr;align-items:start}
@media (min-width:47.5em){.duo{grid-template-columns:repeat(2,minmax(0,1fr))}}
.panel{position:relative;isolation:isolate;overflow:hidden;min-width:0;background:var(--card);
  border:1px solid var(--line);border-radius:24px;padding:1.125rem}
@media (min-width:22.5em){.panel{padding:1.375rem}}
@media (min-width:47.5em){.panel{padding:1.75rem}}
@media (min-width:75em){.panel{padding:2rem}}
.panel--band{background:var(--band)}
.panel__glow{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(80% 90% at 100% 0%,var(--glow) 0%,transparent 70%)}
.teaser{display:flex;flex-direction:column;gap:.75rem;color:var(--t1);text-decoration:none}
.teaser:hover{color:var(--t1)}
.teaser .kick{display:flex;align-items:center;gap:.625rem;letter-spacing:.12em;font-size:.75rem;color:var(--tone)}
.teaser .kick::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--tone)}
.teaser h3{font-size:1.375rem;line-height:1.25}
@media (min-width:47.5em){.teaser h3{font-size:1.5rem}}
.teaser p{font-size:.9375rem;line-height:1.55;color:var(--t2);max-width:30em}
.teaser__go{margin-top:.25rem;min-height:44px;display:inline-flex;align-items:center;gap:.5rem;font-weight:600;color:var(--tone)}
.teaser:hover .teaser__go{text-decoration:underline}

/* Schluss: drei Tropfen */
.join{position:relative;overflow:hidden}
.join::before{content:"";position:absolute;inset:0;background:var(--wash-join);pointer-events:none}
.join__in{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding-block:var(--sec)}
.join__logo{width:144px;height:144px;border-radius:50%}
.join__logo img{display:block;width:100%;height:100%}
@media (prefers-color-scheme:light){.join__logo{background:#050507;padding:10px;box-shadow:var(--card-sh)}}
.join h2{margin-top:1.75rem}
.join .lead{margin-top:1rem;margin-inline:auto}
.join__msg{margin-top:1rem;max-width:32em}
.join .row{justify-content:center}
.join__ios{margin-top:1.25rem}

/* ---- Unterseiten-Kopf -------------------------------------------------- */
.phead{position:relative;overflow:hidden}
.phead::before{content:"";position:absolute;inset:0;background:var(--wash);pointer-events:none}
.phead--fb::before{background:var(--wash-fb)}
.phead__in{position:relative;padding-top:2.5rem}
.phead h1{margin-top:.875rem;font-size:clamp(2rem,1.4rem + 2.4vw,3rem);line-height:1.1}
.phead .lead{margin-top:1rem}
@media (min-width:22.5em){.phead__in{padding-top:3rem}}
@media (min-width:47.5em){.phead__in{padding-top:4.5rem}}
@media (min-width:75em){.phead__in{padding-top:6rem}}

/* Mitmachen */
.jcard{display:flex;flex-direction:column;gap:1.25rem}
.jcard__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem}
.jcard h2,.need h2{font-size:clamp(1.375rem,1.25rem + .4vw,1.625rem);line-height:1.25}
.pill{display:inline-flex;align-items:center;gap:.5rem;min-height:32px;padding:0 .75rem;border-radius:30px;
  border:1px solid var(--line);font:500 .875rem "JetBrains Mono",monospace}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--dot)}
.pill--dashed{border-style:dashed;border-color:var(--t3)}
.pill--dashed::before{background:transparent;border:1.5px solid var(--t3)}
.steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.875rem;counter-reset:s}
.steps li{display:flex;gap:.875rem;align-items:baseline;counter-increment:s}
.steps li::before{content:counter(s);flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font:500 .8125rem "JetBrains Mono",monospace;color:var(--t2)}
.need{margin-top:1rem}
.need ul{margin:.75rem 0 0;padding:0;list-style:none}
.need li{display:flex;gap:.875rem;align-items:baseline;padding:.875rem 0;border-bottom:1px solid var(--line)}
.need li::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--gdot)}
.need .small{margin-top:1rem}

/* Feedback */
.fb{display:flex;flex-direction:column;gap:1.375rem}
.fb .kick{display:flex;align-items:center;gap:.625rem;letter-spacing:.12em;font-size:.75rem;color:var(--tone)}
.fb .kick::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--tone)}
.fb h2{margin-top:.75rem;font-size:clamp(1.375rem,1.25rem + .4vw,1.625rem);line-height:1.25}
.fb__intro p{margin-top:.5rem;color:var(--t2);text-wrap:pretty}
.field{display:flex;flex-direction:column;gap:.5rem;min-width:0;border:0;margin:0;padding:0}
.field>label,.field>legend{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-weight:600;line-height:1.35;padding:0}
.field>legend{margin-bottom:.5rem}
.tag{font:500 .875rem "JetBrains Mono",monospace;color:var(--t2)}
.field input[type=text],.field textarea{width:100%;min-height:52px;padding:0 1rem;border-radius:14px;
  border:1.5px solid var(--line);background:var(--bg);color:var(--t1);font:400 1rem/1.5 Poppins,sans-serif}
.field textarea{min-height:120px;padding:.875rem 1rem;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--t3);opacity:1}
.field [aria-invalid="true"]{border-color:var(--amber)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip span{min-height:44px;padding:0 1rem;display:inline-flex;align-items:center;border-radius:30px;
  border:1.5px solid var(--line);font-size:.875rem;font-weight:600;line-height:1.25;cursor:pointer}
.chip input:checked+span{background:var(--tone);border-color:var(--tone);color:var(--bg)}
.chip input:focus-visible+span{outline:2px solid var(--focus);outline-offset:3px}
.err{display:flex;gap:.5rem;align-items:baseline;font-size:.875rem;font-weight:600;color:var(--amber)}
.err::before{content:"!";font-family:"JetBrains Mono",monospace}
.err[hidden]{display:none}
.hint{font-size:.875rem;line-height:1.5;color:var(--t2)}
.fb__send{display:flex;flex-direction:column;align-items:flex-start;gap:.625rem}
.fb__done{display:none;gap:.75rem;align-items:flex-start;padding:1rem;border-radius:16px;background:var(--raised)}
.fb__done::before{content:"✓";font:600 1rem "JetBrains Mono",monospace;color:var(--tone)}
.fb.is-done .fb__done{display:flex}
.fb.is-done .field,.fb.is-done .fb__send,.fb.is-done .hint--shot{display:none}
.next{margin-top:1rem}
.next ul{margin:.75rem 0 0;padding:0;list-style:none}
.next li{display:flex;gap:.875rem;align-items:baseline;padding:.875rem 0;border-bottom:1px solid var(--line);color:var(--t2)}
.next li::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--gdot)}

/* ---- 08 Rechtstext ----------------------------------------------------- */
.legal{display:grid;gap:3.5rem;padding-block:3rem var(--sec)}
.legal article{max-width:44rem;min-width:0}
.legal header h1{margin-top:.875rem;font-size:clamp(2rem,1.4rem + 2.4vw,3rem);line-height:1.1}
.legal header .muted{margin-top:1rem}
.legal h2{margin-top:3rem;font-size:clamp(1.375rem,1.25rem + .5vw,1.625rem);line-height:1.25}
.legal h3{margin-top:1.75rem;font:600 1.0625rem/1.4 Poppins,sans-serif}
.legal p,.legal li,.legal td{font-size:1rem;line-height:1.7;color:var(--t2)}
.legal p{margin-top:1rem}
.legal strong{color:var(--t1);font-weight:600}
.legal ul,.legal ol{padding-left:1.25rem}
.legal .muted{color:var(--t2);font-size:.9375rem}
.legal .box{margin-top:1.25rem;padding:1rem 1.25rem;border-radius:16px;background:var(--card);border:1px solid var(--line)}
.legal .box p:first-child{margin-top:0}
.legal code{font:500 .875em "JetBrains Mono",monospace;color:var(--t1)}
.legal table{width:100%;margin-top:1.25rem;border-collapse:collapse;font-size:.9375rem}
.legal th{text-align:left;font:500 .75rem "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;
  color:var(--t2);padding:.5rem .75rem .5rem 0;border-bottom:1px solid var(--line)}
.legal td{vertical-align:top;padding:.75rem .75rem .75rem 0;border-bottom:1px solid var(--line)}
.legal td:first-child{color:var(--t1)}
.legal form{display:flex;flex-direction:column;gap:.5rem;margin-top:1.5rem}
.legal form label{font-weight:600;margin-top:.75rem}
.legal form input,.legal form textarea{width:100%;min-height:52px;padding:.75rem 1rem;border-radius:14px;
  border:1.5px solid var(--line);background:var(--bg);color:var(--t1);font:400 1rem/1.5 Poppins,sans-serif}
.legal form button{margin-top:1rem;align-self:flex-start;min-height:3.25rem;padding:.75rem 1.75rem;border:0;
  border-radius:30px;background:#00F2FE;color:#050507;font:600 1rem Poppins,sans-serif;cursor:pointer}
.legal form button:disabled{opacity:.6}
.legal .trap{position:absolute;left:-9999px}
.legal .status{min-height:1.5em;font-weight:600;color:var(--t1)}
.legal .toc h2.kick{margin:0;font:500 .8125rem/1.3 "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--t2)}
.legal .toc h2.kick+ol{margin-top:.75rem}
.toc ol,.toc-m ol{margin:.75rem 0 0;padding:0;list-style:none}
.toc a,.toc-m a{min-height:44px;display:flex;align-items:center;gap:.625rem;color:var(--t2);text-decoration:none;font-size:.9375rem}
.toc a span,.toc-m a span{font:500 .75rem "JetBrains Mono",monospace;color:var(--t3);min-width:1.5em}
.toc a:hover,.toc-m a:hover{color:var(--t1);text-decoration:underline}
.toc-m{margin-top:1.5rem;border:1px solid var(--line);border-radius:16px;padding:0 1rem;background:var(--card)}
.toc-m summary{min-height:48px;display:flex;align-items:center;cursor:pointer;font:500 .875rem "JetBrains Mono",monospace;color:var(--t2)}
.toc-m[open]{padding-bottom:.5rem}
.legal__others{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:0 1rem}
.legal__others a{min-height:44px;display:inline-flex;align-items:center}
.legal__others a[aria-current]{color:var(--t1);text-decoration:none}
.totop{margin-top:3rem;min-height:48px;display:inline-flex;align-items:center;gap:.5rem}
@media (min-width:75em){
  .legal{grid-template-columns:3fr 7fr;gap:4.5rem}
  .toc{position:sticky;top:calc(var(--hdr-h) + 2rem);align-self:start}
  .toc-m{display:none}
}
@media (max-width:74.99em){.toc{display:none}}
@media (max-width:47.49em){
  .legal table,.legal tbody,.legal tr,.legal th,.legal td{display:block}
  .legal thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .legal tr{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1rem;margin-top:.75rem}
  .legal td{border:0;padding:.375rem 0}
  .legal td::before{content:attr(data-label);display:block;font:500 .75rem "JetBrains Mono",monospace;
    letter-spacing:.12em;text-transform:uppercase;color:var(--t2)}
}

/* ---- 09 Fuss ----------------------------------------------------------- */
.ft{margin-top:0;background:var(--band);border-top:1px solid;border-image:var(--gline) 1}
.ft__in{display:grid;gap:2rem 1.5rem;padding-top:3.5rem}
.ft__claim{margin-top:.625rem;font:400 1.125rem/1.35 Huninn,Poppins,sans-serif;max-width:16em}
.ft__brand .small{margin-top:.625rem}
.ft nav h2{font:500 .75rem "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--t2)}
.ft ul{margin:.5rem 0 0;padding:0;list-style:none}
.ft nav a{min-height:48px;display:flex;align-items:center;color:var(--t1);text-decoration:none;font-size:.9375rem}
.ft nav a:hover{text-decoration:underline}
.ft__base{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1.25rem;
  padding-block:1.5rem 2rem;font:500 .875rem "JetBrains Mono",monospace;color:var(--t2)}
.ft__base a{min-height:48px;display:inline-flex;align-items:center}
@media (min-width:22.5em){.ft__in{grid-template-columns:1fr 1fr}.ft__brand{grid-column:1/-1}}
@media (min-width:47.5em){.ft__in{grid-template-columns:repeat(4,minmax(0,1fr))}.ft__brand{grid-column:auto}}
@media (min-width:75em){.ft__in{grid-template-columns:2fr repeat(3,minmax(0,1fr))}}

/* ---- 11 Bewegung — einmal eintreten, dann Ruhe ------------------------- */
.js [data-in] .rv{opacity:0;transform:translateY(var(--y,24px))}
.js [data-in] .rv-phone{opacity:0;transform:translateY(40px) scale(.96)}
.js [data-in] .rv-card{opacity:0;transform:translateY(16px) scale(.94)}
.js [data-in] .rv-drop{opacity:0;transform:scale(0)}
[data-in].is-in .rv{opacity:1;transform:none;
  transition:opacity var(--dur,.7s) var(--settle) var(--d,0ms),transform var(--dur,.7s) var(--settle) var(--d,0ms)}
[data-in].is-in .rv-phone{opacity:1;transform:none;transition:opacity .9s var(--enter) .12s,transform .9s var(--enter) .12s}
[data-in].is-in .rv-card{opacity:1;transform:none;
  transition:opacity .52s var(--pop) calc(.52s + var(--i,0)*.14s),transform .52s var(--pop) calc(.52s + var(--i,0)*.14s)}
[data-in].is-in .rv-drop{opacity:1;transform:none;transition:opacity .52s var(--pop) calc(var(--i,0)*90ms),transform .52s var(--pop) calc(var(--i,0)*90ms)}
@media (prefers-reduced-motion:reduce){
  .js [data-in] :is(.rv,.rv-phone,.rv-card,.rv-drop){opacity:1;transform:none;transition:none}
}