/* pfaendler.ai v2 – strikt Schwarz-Weiß (Logo-Regel 19.10.2026). Schrift Inter (SIL OFL 1.1), lokal. Keine externen Ressourcen.
   Prinzipien (angelehnt an x.ai, nichts übernommen): große ruhige Typo, viel Weißraum, feine Linien, wenig Text, viele Schaubilder. */
@font-face{font-family:"Inter";src:url("../fonts/Inter-Variable-latin.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("Helvetica"),local("Liberation Sans");size-adjust:107%;ascent-override:90%;descent-override:22%;line-gap-override:0%}
:root{--s:#000;--w:#fff;--g:#f3f3f3;--l:#d9d9d9;--m:#555;--max:76rem;--text:40rem;--kopf:4rem;color-scheme:light}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf) + 1rem)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--w);color:var(--s);font-family:"Inter","Inter Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:1.0625rem;line-height:1.6;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
p,li,dd{text-wrap:pretty}
@media (max-width:35.99rem){p,li,dd{hyphens:auto;-webkit-hyphens:auto}}
h1,h2,h3{line-height:1.08;letter-spacing:-.03em;font-weight:600;margin:0;text-wrap:balance}
h1{font-size:clamp(2.25rem,1.4rem + 4.2vw,5rem)}
h2{font-size:clamp(1.75rem,1.2rem + 2.4vw,3.25rem)}
h3{font-size:1.25rem;letter-spacing:-.015em}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--s);color:var(--w);padding:.6rem 1rem;z-index:60}
.skip:focus{left:.5rem;top:.5rem}
.wrap{max-width:var(--max);margin:0 auto;padding:0 1.25rem}
@media (min-width:48rem){.wrap{padding:0 2rem}}
.schmal{max-width:var(--text)}
.nw{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.eyebrow{font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 1rem;font-weight:500}
.lead{font-size:clamp(1.125rem,1rem + .5vw,1.375rem);line-height:1.5;max-width:36rem;margin:1.5rem 0 0}
.klein{font-size:.875rem;color:var(--m)}
.offen{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-size:.82em;font-weight:400;border:1px dashed currentColor;padding:0 .35em;background:var(--g);color:var(--s);letter-spacing:0;text-transform:none;overflow-wrap:anywhere;border-radius:.25rem}
.entwurf-box{border:2px solid var(--s);padding:1rem 1.25rem;margin:0 0 2.5rem;border-radius:.75rem;font-size:.9375rem}
.entwurf-box strong{letter-spacing:.08em}

/* Kopf */
header.site{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--l)}
.kopf{display:flex;align-items:center;gap:1rem;min-height:var(--kopf)}
.marke{display:flex;align-items:center;gap:.7rem;text-decoration:none;min-height:44px;margin-right:auto}
.marke img{height:1.35rem;width:auto}
.marke .name{font-weight:600;letter-spacing:-.01em}
.vorschau{font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--s);border-radius:999px;padding:.15rem .55rem;white-space:nowrap}
nav.haupt ul{list-style:none;margin:0;padding:0;display:flex;gap:.25rem}
nav.haupt a{display:inline-flex;align-items:center;min-height:44px;padding:0 .7rem;border-radius:999px;text-decoration:none;font-size:.9375rem;white-space:nowrap}
nav.haupt a:hover{background:var(--g)}
nav.haupt a[aria-current=page]{background:var(--s);color:var(--w)}
.menue-knopf{display:none}
@media (max-width:63.99rem){
  .menue-knopf{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;min-width:44px;padding:0 .9rem;border:1px solid var(--s);border-radius:999px;background:var(--w);color:var(--s);font:inherit;font-size:.9375rem;cursor:pointer}
  .menue-knopf .striche{width:1rem;height:.6rem;border-top:1.5px solid;border-bottom:1.5px solid;position:relative}
  .menue-knopf .striche::after{content:"";position:absolute;left:0;right:0;top:50%;border-top:1.5px solid;transform:translateY(-50%)}
  .kopf{flex-wrap:wrap}
  nav.haupt{flex-basis:100%;padding-bottom:.5rem}
  nav.haupt ul{flex-wrap:wrap}
  nav.haupt{display:none}
  .menue-offen nav.haupt{display:block}
  nav.haupt ul{flex-direction:column;gap:0;padding:.5rem 0 .75rem}
  nav.haupt a{font-size:1.25rem;min-height:3rem;padding:0 .9rem;width:100%}
}

/* Buttons */
.knoepfe{display:flex;flex-wrap:wrap;gap:.75rem;margin:2rem 0 0;padding:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;padding:.65rem 1.5rem;border-radius:999px;border:1px solid var(--s);background:var(--s);color:var(--w);font:inherit;font-size:1rem;font-weight:500;text-decoration:none;cursor:pointer;transition:background .15s,color .15s}
.btn:hover{background:var(--w);color:var(--s)}
.btn.hell{background:var(--w);color:var(--s)}
.btn.hell:hover{background:var(--s);color:var(--w)}
.btn.aus,.btn[disabled]{background:var(--g);color:#444;border:1px dashed #444;cursor:not-allowed}
.btn .tag,.tag{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;border:1px solid currentColor;border-radius:999px;padding:.05rem .5rem}
.pfeil{display:inline-block;transition:transform .15s}
a:hover .pfeil{transform:translateX(3px)}

/* Abschnitte */
section{padding:clamp(3.5rem,2rem + 6vw,7.5rem) 0}
section + section{border-top:1px solid var(--l)}
section.schwarz{background:var(--s);color:var(--w);border-top:0}
section.schwarz + section{border-top:0}
section.schwarz .klein{color:#bbb}
section.schwarz .offen{background:#222;color:var(--w)}
.kopfzeile{max-width:44rem;margin-bottom:clamp(2rem,1rem + 3vw,3.5rem)}
.kopfzeile p{margin:1rem 0 0;font-size:1.125rem}
.gag{font-style:italic;color:var(--m);font-size:.9375rem;margin-top:1.25rem}
section.schwarz .gag{color:#bbb}

/* Hero Start */
.hero{padding-top:clamp(2.5rem,1rem + 5vw,6rem);padding-bottom:0;overflow:hidden}
.hero-grid{display:grid;gap:2rem;align-items:end}
@media (min-width:56rem){.hero-grid{grid-template-columns:1.25fr .75fr;gap:3rem}}
.hero-logo{width:8.5rem;height:auto;margin-bottom:2rem}
.hero h1{font-size:clamp(2.4rem,1.2rem + 4.4vw,5.25rem);max-width:15ch}
.hero-text{padding-bottom:clamp(2.5rem,1rem + 5vw,6rem)}
.portraet{position:relative;margin:0;justify-self:center;width:min(100%,24rem)}
.portraet img{width:100%;height:auto}
.day-pille{position:absolute;left:0;bottom:1.5rem;background:var(--s);color:var(--w);border-radius:999px;padding:.5rem 1rem;font-weight:600;font-size:.9375rem;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Raster und Karten */
.raster{display:grid;gap:1px;background:var(--l);border:1px solid var(--l);border-radius:1rem;overflow:hidden;list-style:none;margin:0;padding:0}
@media (min-width:40rem){.raster.zwei,.raster.drei,.raster.vier{grid-template-columns:repeat(2,1fr)}}
@media (min-width:64rem){.raster.drei{grid-template-columns:repeat(3,1fr)}.raster.vier{grid-template-columns:repeat(4,1fr)}}
.raster > li,.raster > div{background:var(--w);padding:1.75rem;position:relative}
.raster h3{margin:.75rem 0 .5rem}
.raster p{margin:.25rem 0 0}
.karte-link{text-decoration:none}
.karte-link::after{content:"";position:absolute;inset:0}
.raster > li:has(.karte-link):hover{background:var(--g)}
.nr{font-variant-numeric:tabular-nums;font-size:.8125rem;letter-spacing:.12em;color:var(--m)}
.ikon{width:2.5rem;height:2.5rem}

/* Schaubilder */
figure.schaubild{margin:0}
figure.schaubild svg{width:100%;height:auto;color:var(--s)}
figure.schaubild figcaption{margin-top:1rem;font-size:.875rem;color:var(--m);text-align:center}
section.schwarz figure.schaubild svg{color:var(--w)}
section.schwarz figure.schaubild figcaption{color:#bbb}
.svg-text{font-family:"Inter","Inter Fallback",Arial,sans-serif}
.zwei-spalten{display:grid;gap:2.5rem;align-items:center}
@media (min-width:56rem){.zwei-spalten{grid-template-columns:1fr 1fr;gap:4rem}}

/* Fluss (Arbeitsweise) */
.fluss{list-style:none;margin:0;padding:0;display:grid;gap:1rem;counter-reset:f}
@media (min-width:56rem){.fluss{grid-template-columns:repeat(4,1fr);gap:0}}
.fluss li{border:1px solid var(--s);border-radius:1rem;padding:1.5rem;position:relative;background:var(--w)}
section.schwarz .fluss li{border-color:var(--w);background:var(--s)}
@media (min-width:56rem){.fluss li{margin-right:2rem}.fluss li:last-child{margin-right:0}
 .fluss li:not(:last-child)::after{content:"";position:absolute;right:-2rem;top:50%;width:2rem;border-top:1px solid currentColor}
 .fluss li:not(:last-child)::before{content:"";position:absolute;right:-2rem;top:calc(50% - 5px);border:5px solid transparent;border-left:7px solid currentColor;border-right:0}}
@media (max-width:55.99rem){.fluss li:not(:last-child)::after{content:"↓";position:absolute;left:50%;bottom:-1.15rem;transform:translateX(-50%);font-size:1rem;line-height:1;background:inherit;padding:0 .25rem}}
.fluss .wer{font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase}
.fluss h3{margin:.5rem 0 .25rem}
.fluss p{margin:0;font-size:.9375rem}

/* Stufen */
.stufen{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
@media (min-width:48rem){.stufen{grid-template-columns:repeat(4,1fr);align-items:end}}
.stufen li{border:1px solid var(--s);border-radius:1rem;padding:1.25rem 1.25rem 1.5rem;position:relative}
@media (min-width:48rem){.stufen li:nth-child(1){min-height:9rem}.stufen li:nth-child(2){min-height:11.5rem}.stufen li:nth-child(3){min-height:14rem}.stufen li:nth-child(4){min-height:16.5rem}}
.stufen li.jetzt{background:var(--s);color:var(--w)}
.stufen .wort{font-size:1.5rem;font-weight:600;letter-spacing:-.02em;display:block}
.stufen p{margin:.35rem 0 0;font-size:.9375rem}
.stufen .hier{display:inline-block;margin-top:.75rem;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;border:1px solid currentColor;border-radius:999px;padding:.1rem .6rem}

/* Zeitstrahl 365 */
.strahl{margin-top:1rem}
.strahl .balken{height:.75rem;border:1px solid currentColor;border-radius:999px;position:relative;overflow:hidden}
.strahl .balken span{position:absolute;left:0;top:0;bottom:0;background:currentColor;border-radius:999px;min-width:.75rem}
.strahl .enden{display:flex;justify-content:space-between;gap:1rem;margin-top:.75rem;font-size:.9375rem}
.strahl .enden b{display:block;font-size:1.25rem}
.strahl .enden div:last-child{text-align:right}

/* Scoreboard */
.score{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:#333;border:1px solid #333;border-radius:1rem;overflow:hidden;margin:2.5rem 0 0}
@media (min-width:48rem){.score{grid-template-columns:repeat(4,1fr)}}
.score div{background:var(--s);padding:1.25rem}
.score .wert{display:block;font-size:clamp(1.5rem,1rem + 1.5vw,2.25rem);font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.score .was{font-size:.875rem;color:#bbb}

/* Wer bin ich */
.ueber-kopf{display:grid;gap:2rem;align-items:end}
@media (min-width:56rem){.ueber-kopf{grid-template-columns:1.2fr .8fr;gap:4rem}}
.prosa{max-width:var(--text)}
.prosa p{margin:0 0 1.15rem;font-size:1.125rem}
.zitatblock{border-left:2px solid var(--s);padding:0 0 0 1.5rem;margin:0;max-width:44rem}
.zitatblock p{font-size:clamp(1.125rem,1rem + .5vw,1.4rem);line-height:1.5;margin:0 0 1.15rem}
.zeitachse{list-style:none;margin:0;padding:0;position:relative}
.zeitachse::before{content:"";position:absolute;left:.6rem;top:.5rem;bottom:.5rem;border-left:1px solid var(--s)}
.zeitachse li{position:relative;padding:0 0 2.25rem 2.75rem}
.zeitachse li:last-child{padding-bottom:0}
.zeitachse li::before{content:"";position:absolute;left:.1rem;top:.35rem;width:1rem;height:1rem;border-radius:50%;border:1px solid var(--s);background:var(--w)}
.zeitachse li.voll::before{background:var(--s)}
.zeitachse .wann{font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;color:var(--m)}
.zeitachse h3{margin:.25rem 0}
.zeitachse p{margin:.25rem 0 0}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:.75rem 0 0}
.chips li{border:1px solid var(--s);border-radius:999px;padding:.2rem .8rem;font-size:.875rem;padding-bottom:.2rem}
.zeitachse .chips li{padding:.2rem .8rem}
.zeitachse .chips li::before{display:none}
@media (min-width:64rem){.zeit-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem}}

/* Team */
.team-raster{list-style:none;margin:0;padding:0;display:grid;gap:1.25rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:48rem){.team-raster{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
@media (min-width:72rem){.team-raster{grid-template-columns:repeat(4,1fr)}}
.agent{position:relative;border:1px solid var(--l);border-radius:1rem;overflow:hidden;height:100%;display:flex;flex-direction:column;background:var(--w);transition:border-color .15s}
.agent:hover,.agent:focus-within{border-color:var(--s)}
.agent img{width:100%;aspect-ratio:1;object-fit:cover}
.agent .info{padding:1rem 1rem 1.25rem;display:flex;flex-direction:column;gap:.25rem;flex:1}
.agent h2{font-size:1.0625rem;letter-spacing:-.01em}
.agent h2 a{text-decoration:none}
.agent h2 a::after{content:"";position:absolute;inset:0}
.agent .rolle{font-size:.8125rem;letter-spacing:.04em;color:var(--m);margin:0}
.agent .kurz{font-size:.9375rem;margin:.5rem 0 0;line-height:1.45}
@media (max-width:30rem){.agent .kurz{font-size:.875rem}.agent .info{padding:.85rem .85rem 1rem}}
.agent .mehr{margin-top:auto;padding-top:.75rem;font-size:.875rem;font-weight:500}
.badge{position:absolute;top:.6rem;left:.6rem;background:var(--w);color:var(--s);border:1px solid var(--s);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:.1rem .5rem}
.organigramm{display:grid;justify-items:center;gap:0;text-align:center}
.organigramm .knoten{border:1px solid currentColor;border-radius:999px;padding:.55rem 1.25rem;font-weight:600;background:inherit}
.organigramm .knoten small{display:block;font-weight:400;font-size:.8125rem;opacity:.8}
.organigramm .linie{width:1px;height:1.75rem;background:currentColor}
.organigramm ul{list-style:none;margin:0;padding:1.75rem 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;border-top:1px solid currentColor;max-width:52rem}
.organigramm ul li{border:1px solid currentColor;border-radius:999px;padding:.3rem .9rem;font-size:.875rem}

/* Agent-Profil */
.agent-kopf{display:grid;gap:2rem;align-items:center;margin-top:1rem}
@media (min-width:48rem){.agent-kopf{grid-template-columns:18rem 1fr;gap:3rem}}
.agent-foto{margin:0;max-width:18rem}
.agent-foto img{border-radius:1rem;width:100%}
.agent-foto figcaption{font-size:.8125rem;color:var(--m);margin-top:.5rem}
.position{font-size:1.125rem;margin:.75rem 0 0}
.block{margin-top:clamp(2.5rem,1.5rem + 3vw,4rem);max-width:48rem}
.block h2{font-size:clamp(1.375rem,1.1rem + 1vw,1.875rem);margin-bottom:1rem}
.profil{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:1rem}
.profil li{display:grid;grid-template-columns:4.5rem 1fr 3.5rem;gap:.25rem .75rem;align-items:center}
.profil .balken{height:.5rem;border:1px solid var(--s);border-radius:999px;overflow:hidden}
.profil .balken span{display:block;height:100%;background:var(--s)}
.profil .wert{text-align:right;font-variant-numeric:tabular-nums}
.profil .was{grid-column:2/4;margin:0;font-size:.9375rem;color:var(--m)}
.zuege{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.zuege li{border:1px solid var(--s);border-radius:999px;padding:.25rem .9rem;font-size:.9375rem}
.aufgaben{display:grid;gap:0;margin:0}
.aufgaben div{border-top:1px solid var(--l);padding:1rem 0;display:grid;gap:.25rem}
@media (min-width:48rem){.aufgaben div{grid-template-columns:14rem 1fr;gap:1.5rem}}
.aufgaben dt{font-weight:600}
.aufgaben dd{margin:0}
blockquote.gross{margin:0;font-size:clamp(1.375rem,1.1rem + 1.2vw,2rem);line-height:1.3;letter-spacing:-.02em;font-weight:500}
blockquote.gross p{margin:0}
.blaettern{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:3.5rem}

/* Buch */
.buch-grid{display:grid;gap:2.5rem;align-items:center}
@media (min-width:56rem){.buch-grid{grid-template-columns:1fr 1fr;gap:4rem}}
.arbeitstitel{display:inline-block;margin-top:1rem;font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;border:1px dashed var(--s);border-radius:999px;padding:.2rem .75rem}
.fortschritt{border:1px solid var(--s);border-radius:1rem;padding:1.5rem;margin-top:2rem}
.fortschritt .kopf-f{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.fortschritt .balken{height:1rem;border:1px solid var(--s);border-radius:999px;margin-top:1rem;overflow:hidden;position:relative}
.fortschritt .balken.unbekannt{background:repeating-linear-gradient(-45deg,var(--w) 0 8px,var(--g) 8px 9px,#000 9px 10px,var(--w) 10px 16px)}
.fortschritt .balken span{display:block;height:100%;background:var(--s)}
.teile{display:grid;gap:.75rem;margin-top:1.5rem}
.teile details{border:1px solid var(--l);border-radius:1rem;background:var(--w)}
.teile details[open]{border-color:var(--s)}
.teile summary{cursor:pointer;list-style:none;padding:1rem 1.25rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;font-weight:600;min-height:44px}
.teile summary::-webkit-details-marker{display:none}
.teile summary::after{content:"+";font-weight:400;font-size:1.5rem;line-height:1}
.teile details[open] summary::after{content:"–"}
.teile ol{list-style:none;margin:0;padding:0 1.25rem 1rem}
.teile li{display:flex;justify-content:space-between;gap:1rem;padding:.65rem 0;border-top:1px solid var(--l);flex-wrap:wrap}
.termine{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--l);border:1px solid var(--l);border-radius:1rem;overflow:hidden}
@media (min-width:48rem){.termine{grid-template-columns:repeat(4,1fr)}.termine-drei{grid-template-columns:repeat(3,1fr)}}
.termine li{background:var(--w);padding:1.5rem}
.termine .wann{display:block;font-size:1.375rem;font-weight:600;letter-spacing:-.02em}
.termine .was{display:block;margin-top:.25rem}
.termine .info{display:block;margin-top:.5rem;font-size:.875rem;color:var(--m)}
.termine .fest{display:inline-block;margin-top:.75rem;font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--s);border-radius:999px;padding:.05rem .5rem}
.termine .fest.plan{border-style:dashed}

/* Newsletter (Platzhalter) */
.nl-form{border:1px solid var(--s);border-radius:1rem;padding:1.5rem;max-width:34rem;margin-top:2rem}
.nl-form fieldset{border:0;margin:0;padding:0;display:grid;gap:1rem}
.nl-form legend{font-weight:600;margin-bottom:.5rem}
.nl-form label{font-size:.9375rem}
.nl-form input[type=email],.nl-form input[type=text]{width:100%;min-height:3rem;border:1px solid #767676;border-radius:.6rem;padding:.6rem .8rem;font:inherit;background:var(--g);color:#444}
.nl-form .check{display:flex;gap:.6rem;align-items:flex-start}
.nl-form .check input{width:1.25rem;height:1.25rem;margin-top:.15rem;flex:none}
.nl-form .status{font-size:.875rem;margin:0}

/* Kanäle */
.linkliste{list-style:none;margin:0;padding:0;display:grid;gap:.75rem;max-width:40rem}
.linkliste a,.linkliste .folgt{display:flex;align-items:center;gap:1rem;min-height:4rem;padding:.75rem 1.25rem;border:1px solid var(--s);border-radius:999px;text-decoration:none;font-size:1.125rem;font-weight:500;transition:background .15s,color .15s}
.linkliste a:hover{background:var(--s);color:var(--w)}
.linkliste a:hover img{filter:invert(1)}
.linkliste img{width:1.5rem;height:1.5rem}
.linkliste .wer{margin-left:auto;display:flex;align-items:center;gap:.5rem;font-size:.8125rem;font-weight:400}
.linkliste .wer img{width:2rem;height:2rem;border-radius:50%}
.linkliste .folgt{border-style:dashed;color:#444}
@media (max-width:30rem){.linkliste .wer span{display:none}}

/* Logbuch */
.logbuch{list-style:none;margin:0;padding:0}
.eintrag{border-top:1px solid var(--l);padding:2rem 0;display:grid;gap:.5rem}
@media (min-width:48rem){.eintrag{grid-template-columns:12rem 1fr;gap:2rem}}
.eintrag h2{font-size:1.5rem}
.zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:1px;background:var(--l);border:1px solid var(--l);border-radius:1rem;overflow:hidden;margin-top:1rem}
.zahlen div{background:var(--w);padding:1rem}
.zahlen .wert{display:block;font-size:1.5rem;font-weight:600}
.zahlen .was{font-size:.875rem;color:var(--m)}

/* Rechtliches */
.recht h1{font-size:clamp(2rem,1.4rem + 2.5vw,3.25rem);margin-bottom:2rem}
.recht h2{font-size:1.25rem;margin:2.25rem 0 .5rem;letter-spacing:-.01em}
.recht p,.recht li{max-width:var(--text)}
.recht section{padding:0;border:0}

/* Fuß */
footer.site{background:var(--s);color:var(--w);padding:4rem 0 2rem}
.fuss{display:grid;gap:2.5rem}
@media (min-width:48rem){.fuss{grid-template-columns:1.5fr 1fr 1fr}}
.fuss h2{font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;margin:0 0 .75rem}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li a,.fuss li button{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--w);background:none;border:0;padding:0;font:inherit;cursor:pointer}
.fuss li a:hover,.fuss li button:hover{text-decoration:underline}
.fuss .marke img{height:1.5rem}
.fuss p{color:#bbb;max-width:24rem;margin:1rem 0 0;font-size:.9375rem}
.kanal-icons{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:1.25rem!important}
.kanal-icons a,.kanal-icons span{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid #444;border-radius:50%}
.kanal-icons a:hover{border-color:var(--w)}
.kanal-icons img{width:1.15rem;height:1.15rem;filter:invert(1)}
.kanal-icons span{opacity:.45;border-style:dashed}
.unten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;border-top:1px solid #333;margin-top:3rem;padding-top:1.5rem;font-size:.875rem;color:#bbb}

/* Cookie-Banner */
.cookie{position:fixed;z-index:50;left:1rem;right:1rem;bottom:1rem;max-width:30rem;margin-left:auto;background:var(--w);color:var(--s);border:1px solid var(--s);border-radius:1rem;padding:1.25rem 1.25rem 1rem;box-shadow:0 10px 40px rgba(0,0,0,.18)}
.cookie[hidden]{display:none}
.cookie h2{font-size:1.125rem;letter-spacing:-.01em;margin:0 0 .5rem}
.cookie p{margin:0 0 .75rem;font-size:.9375rem;line-height:1.5}
.cookie .entwurf-hinweis{font-size:.75rem;letter-spacing:.06em;border:1px dashed var(--s);border-radius:.4rem;padding:.25rem .5rem;display:inline-block;margin-bottom:.75rem}
.cookie .wahl{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.5rem}
.cookie .wahl .btn{padding:.5rem .75rem;font-size:.9375rem}
.cookie .einst-knopf{background:none;border:0;padding:0;font:inherit;font-size:.9375rem;text-decoration:underline;cursor:pointer;min-height:44px;color:var(--s)}
.cookie .zeile{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;border-top:1px solid var(--l);padding:.75rem 0}
.cookie .zeile p{margin:.15rem 0 0;font-size:.875rem;color:var(--m)}
.cookie .zeile input{width:1.25rem;height:1.25rem;margin-top:.2rem;flex:none}
.cookie .immer{font-size:.8125rem;white-space:nowrap}
.cookie .speichern{width:100%;margin-top:.5rem}
@media print{header.site,.cookie,footer.site,.menue-knopf{display:none}}
.teile .klein{color:var(--m)}
@media (max-width:30rem){.marke .name{font-size:.9375rem}.vorschau{font-size:.625rem;padding:.1rem .45rem}.kopf{gap:.5rem}}
@media (max-width:26rem){.menue-knopf .knopf-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.menue-knopf{padding:0;justify-content:center}}
.cookie .wahl .btn{white-space:nowrap;padding:.5rem .6rem}
section.schwarz .teile .klein{color:var(--m)}

/* ===== v2-nacht: lebendig (alles per CSS, reduced-motion = aus, außerhalb des Bildschirms pausiert) ===== */
.js [data-anim]:not(.laeuft) *,.js [data-anim]:not(.laeuft) *::before,.js [data-anim]:not(.laeuft) *::after,
.anim-aus [data-anim] *,.anim-aus [data-anim] *::before,.anim-aus [data-anim] *::after{animation-play-state:paused!important}
.btn.rand{background:transparent;color:var(--w);border-color:var(--w)}
.btn.rand:hover{background:var(--w);color:var(--s)}
.untertitel{font-size:clamp(1.375rem,1.1rem + 1.2vw,2.25rem);font-weight:600;letter-spacing:-.025em;line-height:1.15;margin:.75rem 0 0}

/* Start-Hero schwarz, Netz hinter dem Kopf */
.hero-start{background:var(--s);color:var(--w);position:relative;isolation:isolate}
.hero-start .lead{color:#e6e6e6}
.hero-start .hero-text,.hero-start .portraet{position:relative;z-index:1}
.hero-start .day-pille{background:var(--w);color:var(--s)}
.hero-start + section{border-top:0}
.portraet{isolation:isolate}
.portraet > img{position:relative;z-index:2}
.portraet::before{content:"";position:absolute;z-index:1;left:-15%;right:-15%;top:8%;bottom:-10%;background:radial-gradient(closest-side,rgba(255,255,255,.2),rgba(255,255,255,.06) 60%,transparent);pointer-events:none}
.hero-netz{position:absolute;z-index:0;left:-70%;width:240%;top:0;margin-top:-89%;aspect-ratio:1;pointer-events:none;color:var(--w)}
.hero-netz svg{width:100%;height:100%}
.hero-video{position:absolute;inset:0;z-index:0}
.hero-video::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.85),rgba(0,0,0,.35) 55%,rgba(0,0,0,.1))}
@media (max-width:55.99rem){.hero-video::after{background:linear-gradient(180deg,rgba(0,0,0,.85),rgba(0,0,0,.4) 50%,rgba(0,0,0,.15))}}
.netz line{stroke:currentColor;vector-effect:non-scaling-stroke}
.netz .l1{stroke-width:1;opacity:.28}
.netz .l2{stroke-width:1;opacity:.16}
.netz .puls{stroke-width:3.5;stroke-linecap:round;stroke-dasharray:3 140;stroke-dashoffset:3;opacity:.95;animation:puls 3.6s cubic-bezier(.45,0,.55,1) infinite}
.netz .puls.rein{animation-direction:reverse}
.netz .knoten{fill:currentColor}
.netz .halo{fill:none;stroke:currentColor;stroke-width:1;opacity:.35;transform-box:fill-box;transform-origin:center;animation:atmen 4.2s ease-in-out infinite}
.netz .kern{fill:currentColor}
.netz .kern-halo{fill:currentColor;opacity:.18}
.netz .welle{fill:none;stroke:currentColor;stroke-width:1;opacity:0;transform-box:fill-box;transform-origin:center;animation:welle 4s ease-out infinite}
.netz .dreh{transform-origin:0 0;animation:dreh 120s linear infinite}
@keyframes puls{from{stroke-dashoffset:3}to{stroke-dashoffset:-103}}
@keyframes atmen{0%,100%{transform:scale(.7);opacity:.15}50%{transform:scale(1.15);opacity:.5}}
@keyframes welle{0%{transform:scale(.4);opacity:.6}100%{transform:scale(2.6);opacity:0}}
@keyframes dreh{to{transform:rotate(360deg)}}

/* Bühnen (schwarze Flächen mit festem Seitenverhältnis: Video-Slot oder SVG/CSS-Fallback) */
.vslot{position:relative;overflow:hidden}
.vslot picture,.vslot video{position:absolute;inset:0;width:100%;height:100%}
.vslot picture img{width:100%;height:100%;object-fit:cover}
.vslot video{object-fit:cover;opacity:0;transition:opacity .6s}
.vslot.spielt video{opacity:1}
.buehne{background:var(--s);color:var(--w);border-radius:1.25rem;width:100%}
.buehne > svg{width:100%;height:100%}
.buehne-team{aspect-ratio:3/2}
.buehne-buch{aspect-ratio:1;display:grid;place-items:center}
.buehne-nl{aspect-ratio:4/3}
section.schwarz .buehne{background:#0b0b0b;box-shadow:inset 0 0 0 1px #222}
.team-buehne{max-width:60rem}
.team-buehne figcaption{text-align:left!important}

/* Team-Netz */
.team-netz{font-family:"Inter","Inter Fallback",Arial,sans-serif}
.team-netz .bahn{fill:none;stroke:#fff;stroke-width:1;stroke-dasharray:2 6;opacity:.45}
.team-netz .l1{stroke:#fff;stroke-width:1;opacity:.22}
.team-netz .paket{stroke:#fff;stroke-width:6;stroke-linecap:round;stroke-dasharray:2 200;stroke-dashoffset:2;opacity:0;animation:paket 6s linear infinite}
.team-netz .ag-k{fill:#000;stroke:#fff;stroke-width:1.5;animation:leuchten 6s linear infinite}
.team-netz .ag-t{fill:#fff;animation:leuchten-t 6s linear infinite}
.team-netz .ki{opacity:.75}
.team-netz .mitte{fill:#fff}
.team-netz .mitte-t{fill:#000}
.team-netz .welle{fill:none;stroke:#fff;stroke-width:1.5;opacity:0;animation:welle-t 3s ease-out infinite}
@keyframes paket{0%{stroke-dashoffset:2;opacity:1}16%{stroke-dashoffset:-100;opacity:1}17%,100%{stroke-dashoffset:-100;opacity:0}}
@keyframes leuchten{0%,9%{fill:#fff}14%,100%{fill:#000}}
@keyframes leuchten-t{0%,9%{fill:#000}14%,100%{fill:#fff}}
@keyframes welle-t{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.6);opacity:0}}

/* Newsletter: Papierflieger */
.flieger-bild{font-family:"Inter","Inter Fallback",Arial,sans-serif}
.flieger-bild .linie{fill:none;stroke:#fff;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.flieger-bild .schrift{fill:#fff;opacity:.7}
.flieger-bild .spur{fill:none;stroke:#fff;stroke-width:1.5;stroke-dasharray:3 9;opacity:.5}
.flieger-bild .tag{fill:#fff;opacity:0;animation:tag 7s steps(1,end) infinite}
.flieger-bild .tag:nth-of-type(2){opacity:1}
.flieger-bild .flieger-k{fill:#000;stroke:#fff;stroke-width:2;stroke-linejoin:round}
.flieger-bild .flieger{transform:translate(290px,260px) rotate(-50deg);animation:flug 7s ease-in-out infinite}
.flieger-bild .fahne{transform-box:fill-box;transform-origin:0 100%;transform:rotate(90deg);animation:fahne 7s ease-in-out infinite}
@keyframes tag{0%{opacity:1}14.2857%,100%{opacity:0}}
@keyframes flug{0%,70%{transform:translate(290px,260px) rotate(-50deg);opacity:1}
 76%{transform:translate(370px,160px) rotate(-25deg)}82%{transform:translate(470px,135px) rotate(5deg)}
 88%{transform:translate(560px,200px) rotate(40deg)}93%{transform:translate(610px,300px) rotate(65deg);opacity:1}94%,97%{transform:translate(615px,320px) rotate(70deg);opacity:0}100%{transform:translate(290px,260px) rotate(-50deg);opacity:0}}
@keyframes fahne{0%,92%{transform:rotate(90deg)}95%,99%{transform:rotate(0)}100%{transform:rotate(90deg)}}

/* Buch: CSS-3D-Mockup */
.buch3d{--t:clamp(1rem,.6rem + 1.2vw,1.6rem);position:relative;width:min(62%,20rem);aspect-ratio:3/4;perspective:1400px;margin:8% auto}
.buch3d .koerper{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(-22deg) rotateX(5deg);animation:schweben 7s ease-in-out infinite alternate}
.buch3d .vorne{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:2px 6px 6px 2px;transform:translateZ(calc(var(--t)/2));backface-visibility:hidden;box-shadow:inset 4px 0 8px rgba(0,0,0,.15)}
.buch3d .glanz{position:absolute;inset:0;transform:translateZ(calc(var(--t)/2 + 1px));border-radius:2px 6px 6px 2px;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 48%,transparent 60%) no-repeat;background-size:250% 100%;background-position:150% 0;mix-blend-mode:screen;animation:glanz 7s ease-in-out infinite;pointer-events:none}
.buch3d .hinten{position:absolute;inset:0;background:#e9e9e9;transform:rotateY(180deg) translateZ(calc(var(--t)/2));border-radius:6px 2px 2px 6px}
.buch3d .ruecken{position:absolute;top:0;bottom:0;left:calc(var(--t)/-2);width:var(--t);background:linear-gradient(90deg,#cfcfcf,#fff 45%,#d8d8d8);transform:rotateY(-90deg)}
.buch3d .seiten{position:absolute;top:3px;bottom:3px;left:calc(100% - var(--t)/2 - 3px);width:calc(var(--t) - 2px);background:repeating-linear-gradient(90deg,#f4f4f4 0 2px,#d6d6d6 2px 3px);transform:rotateY(90deg)}
.buch3d .schatten{position:absolute;left:8%;right:8%;bottom:-11%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.28),transparent);filter:blur(6px);animation:schatten 7s ease-in-out infinite alternate}
section:not(.schwarz) .buehne-buch .schatten,.hero .buehne-buch .schatten{background:radial-gradient(closest-side,rgba(255,255,255,.3),transparent)}
@keyframes schweben{0%{transform:translateY(0) rotateY(-30deg) rotateX(6deg)}100%{transform:translateY(-4%) rotateY(-14deg) rotateX(3deg)}}
@keyframes schatten{0%{transform:scale(1);opacity:1}100%{transform:scale(.85);opacity:.6}}
@keyframes glanz{0%,55%{background-position:150% 0}85%,100%{background-position:-60% 0}}
.buch-figur{margin:0}
.buch-figur figcaption{margin-top:.75rem;text-align:center}
.buch-teaser .zwei-spalten{align-items:center}


/* Reveal beim Scrollen (nur Elemente unterhalb des ersten Bildschirms, nur transform/opacity = kein Layout-Sprung) */
.reveal-bereit{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal-bereit.sichtbar{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal-bereit{opacity:1!important;transform:none!important}}
.anim-aus .reveal-bereit{opacity:1;transform:none}
.buch3d .vorne.leer{display:flex;flex-direction:column;justify-content:space-between;padding:12% 10%;background:#fff;color:#000;border:1px solid #d9d9d9;text-align:left}
.buch3d .leer-autor{font-size:clamp(.625rem,.5rem + .4vw,.875rem);letter-spacing:.14em;text-transform:uppercase}
.buch3d .leer-titel{font-size:clamp(1.25rem,.9rem + 1.4vw,2rem);font-weight:700;letter-spacing:-.03em;line-height:1.05;border:1.5px dashed #000;padding:.4em .5em;border-radius:.3rem;align-self:flex-start}
.buch3d .leer-linie{display:block;height:2px;width:40%;background:#000}

/* Kit-Formulare, Scoreboard, Dankeseiten */
.kit-form{background:var(--w);color:var(--s);margin-top:0;width:100%}
@media (min-width:56rem){.kit-form{justify-self:end}}
.kit-form label{display:block;margin-bottom:.35rem;font-weight:500}
.kit-form .check label{font-weight:400;margin:0}
.kit-form input[type=email],.kit-form input[type=text]{background:var(--w);color:var(--s);border-color:var(--s);font-size:max(1rem,16px)}
.kit-form input:focus-visible{outline:2px solid var(--s);outline-offset:2px}
.kit-form .check input{accent-color:#000}
.kit-form legend{font-size:1.25rem;letter-spacing:-.015em;margin-bottom:.75rem}
.kit-form .btn{justify-self:start}
.kit-form .btn[disabled]{background:var(--w);color:var(--s);border:1px dashed var(--s);cursor:default}
.kit-form .btn.broll{box-shadow:0 0 0 3px var(--w),0 0 0 5px var(--s)}
.kit-form .status{margin-top:1rem!important;color:var(--m)}
.kit-form .status strong{color:var(--s)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
section.schwarz .kit-form{border-color:var(--w)}
.score{display:grid;gap:1px;margin:2rem 0 1rem;padding:0;border:1px solid #444;border-radius:1rem;overflow:hidden;background:#444}
@media (min-width:48rem){.score{grid-template-columns:repeat(3,1fr)}}
.score div{background:var(--s);padding:1.5rem}
.score dt{font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;color:#bbb}
.score dd{margin:.4rem 0 0;font-size:clamp(1.75rem,1.2rem + 2vw,2.75rem);font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.score .offen{font-size:1rem}
.prosa-danke p{max-width:var(--text)}
.prosa-danke .lead{margin-bottom:1.5rem}
.hero-netz-video{aspect-ratio:16/9;width:280%;left:-90%;margin-top:-48%}
.hero-netz-video .vslot{position:absolute;inset:0;mix-blend-mode:screen}
@media (max-width:55.99rem){.hero-netz-video{aspect-ratio:4/5;width:210%;left:-55%;margin-top:-100%}}
.hero-video::after{content:none}
.titel-folgt{display:inline-block;border:1.5px dashed currentColor;border-radius:.4rem;padding:.05em .4em;font-size:.85em}
.hero-start .portraet{isolation:auto}
.hero-start .hero-text{z-index:3}
.hero-netz-video{mix-blend-mode:screen}
.hero-netz-video .vslot{mix-blend-mode:normal}
.hero-start .portraet > img{-webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);mask-image:linear-gradient(180deg,#000 82%,transparent)}
section.schwarz .form-karte .klein,section.schwarz .form-karte .status{color:var(--m)}section.schwarz .form-karte .status a{color:var(--s)}
.prosa-danke{padding-bottom:clamp(3rem,2rem + 4vw,6rem)}
.prosa-danke h2{font-size:clamp(1.375rem,1.1rem + 1vw,1.75rem);margin:2.5rem 0 .75rem}.prosa-danke ul{padding-left:1.25rem;max-width:var(--text)}.prosa-danke li{margin:.25rem 0}.danke-claim{margin:1.25rem 0;padding:1rem 1.25rem;border-left:3px solid var(--s);max-width:var(--text)}.danke-claim p{margin:0}