/* plasmind Basis: Schrift, Layout, Kopf, Fuß, Knöpfe, Karten, Raster, Typografie, Richtungswerte.
   Farben und Zeiten kommen aus tokens.css. Schrift lokal (OFL, siehe fonts/OFL.txt). */

@font-face{font-family:"Martian Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/MartianMono-400.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Martian Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/MartianMono-500.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Martian Mono";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/MartianMono-600.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Martian Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/MartianMono-ext-400.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:"Martian Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/MartianMono-ext-500.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:"Martian Mono";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/MartianMono-ext-600.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}

:root{
  --gutter:24px; --wrap:1120px; --measure:62ch;
  --r-card:var(--r-tile); --card-bg:transparent; --card-bd:var(--line); --card-bd-w:1px;
  --hl-bg:transparent; --hl-fg:var(--fg); --hl-bd:var(--fg); --hl-bd-w:1px;
  --h1:clamp(24px,3.3vw,40px); --h2:clamp(18px,2vw,24px); --sec:clamp(56px,8vw,104px);
  --ok:var(--fg);
}
@media (max-width:640px){:root{--gutter:16px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-size:14px;line-height:1.65;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
main{flex:1}
img,svg,canvas{max-width:100%}
a{color:var(--fg);text-decoration-color:var(--line-strong);text-underline-offset:.25em}
a:hover{text-decoration-color:var(--fg)}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px;border-radius:2px}
h1,h2,h3,p,ul,ol,dl,figure{margin:0}
h1,h2,h3{font-weight:500;line-height:1.25;text-wrap:balance}
h1{font-size:var(--h1);letter-spacing:-.01em}
h2{font-size:var(--h2)}
h3{font-size:15px}
p{max-width:var(--measure);text-wrap:pretty}
.mute{color:var(--fg-mute)}
.soft{color:var(--fg-soft)}
.klein{font-size:12px}
.eyebrow{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-mute);font-weight:500}
.wrap{width:100%;max-width:calc(var(--wrap) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-999px;top:8px;background:var(--fg);color:var(--bg);padding:8px 12px;z-index:200}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- Mockup-Leiste ---- */
.mockbar{background:var(--bg-sunk);border-bottom:1px solid var(--line);font-size:11px;color:var(--fg-mute)}
.mockbar__in{max-width:calc(var(--wrap) + 2*var(--gutter));margin:0 auto;padding:6px var(--gutter);display:flex;gap:6px 18px;align-items:center;flex-wrap:wrap}
.mockbar__t{letter-spacing:.08em;text-transform:uppercase}
.mockbar__n{display:flex;gap:2px}
.mockbar a{color:var(--fg-soft);text-decoration:none;padding:3px 8px;border-radius:99px}
.mockbar a:hover{background:var(--surface-2)}
.mockbar a[aria-current]{background:var(--fg);color:var(--bg)}
.mockbar__e{padding:3px 0 !important}
.mockbar__e:hover{background:none !important;text-decoration:underline}

/* ---- Kopf ---- */
.kopf{border-bottom:1px solid var(--line);background:var(--bg);position:relative;z-index:5}
.kopf__in{max-width:calc(var(--wrap) + 2*var(--gutter));margin:0 auto;padding:14px var(--gutter);display:flex;align-items:center;gap:12px 28px;flex-wrap:wrap}
.logo{display:block;line-height:0}
.logo img{height:38px;width:auto}
.logo__h{display:none}
:root[data-theme="light"] .logo__d{display:none}
:root[data-theme="light"] .logo__h{display:block}
.hauptnav{display:flex;gap:4px;margin-right:auto}
.hauptnav a{color:var(--fg-soft);text-decoration:none;padding:8px 12px;border-radius:var(--r-ctl)}
.hauptnav a:hover{color:var(--fg);background:var(--surface-2)}
.hauptnav a[aria-current]{color:var(--fg);box-shadow:inset 0 -2px 0 var(--fg);border-radius:0}
.kopf__r{display:flex;align-items:center;gap:10px}
.themen{font:inherit;font-size:12px;color:var(--fg-soft);background:transparent;border:1px solid var(--line-strong);border-radius:99px;padding:7px 14px;cursor:pointer}
.themen:hover{color:var(--fg);border-color:var(--fg-mute)}
@media (max-width:640px){
  .kopf__in{padding-block:10px}
  .logo img{height:32px}
  .hauptnav{order:3;width:100%;margin:0;justify-content:space-between;border-top:1px solid var(--line);padding-top:6px}
  .hauptnav a{padding:8px 6px}
  .kopf__r{margin-left:auto}
  .kopf__r .kopf__dl{display:none}
}

/* ---- Knöpfe ---- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-size:13px;font-weight:500;color:var(--fg);background:transparent;border:1px solid var(--line-strong);border-radius:var(--r-ctl);padding:10px 18px;text-decoration:none;cursor:pointer;transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast);min-height:40px}
.knopf:hover{background:var(--surface-2);border-color:var(--fg-mute)}
.knopf--voll{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.knopf--voll:hover{background:var(--fg-soft);border-color:var(--fg-soft)}
.knopf[disabled],.knopf[aria-disabled=true]{opacity:.45;cursor:not-allowed}
.knopf--link{border:0;padding:0;min-height:0;background:none;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:.3em;font-weight:400}
.pille{font:inherit;font-size:13px;color:var(--fg);background:transparent;border:1px solid var(--line-strong);border-radius:99px;padding:.7em 1.3em;cursor:pointer;transition:background var(--dur-fast),border-color var(--dur-fast),opacity var(--dur)}
.pille:hover{background:var(--surface-2);border-color:var(--fg-mute)}
.pille[disabled]{opacity:.35;cursor:default;pointer-events:none}
.pille.gew{opacity:1;border-color:var(--fg)}

/* ---- Fuß ---- */
.fuss{border-top:1px solid var(--line);margin-top:var(--sec);font-size:12px;color:var(--fg-mute)}
.fuss__in{max-width:calc(var(--wrap) + 2*var(--gutter));margin:0 auto;padding:28px var(--gutter) 40px;display:grid;grid-template-columns:1fr auto auto;gap:12px 40px;align-items:start}
.fuss__leit{color:var(--fg-soft)}
.fuss__n{display:flex;gap:18px}
.fuss__n a{color:var(--fg-soft)}
.fuss__hint{grid-column:1/-1}
@media (max-width:640px){.fuss__in{grid-template-columns:1fr}.fuss__hint{grid-column:auto}}

/* ---- Seitenkopf der Unterseiten ---- */
.seitenkopf{position:relative;padding:clamp(40px,7vw,88px) 0 clamp(24px,4vw,40px);overflow:hidden;isolation:isolate}
.seitenkopf h1{max-width:22ch}
.seitenkopf .lead{margin-top:16px;color:var(--fg-soft);max-width:56ch;font-size:15px}
.seitenkopf [data-pm-colony]{display:none}
.stempel{display:inline-block;margin-top:20px;font-size:12px;letter-spacing:.04em;border:1px solid var(--line-strong);border-radius:99px;padding:6px 14px;color:var(--fg-soft)}

/* ---- Karten, Raster ---- */
.raster{display:grid;gap:20px}
.raster--2{grid-template-columns:repeat(2,1fr)}
.raster--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.raster--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){.raster--2,.raster--3{grid-template-columns:1fr}}
.karte{background:var(--card-bg);border:var(--card-bd-w) solid var(--card-bd);border-radius:var(--r-card);padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;gap:16px;min-width:0}
.karte h3{font-size:16px}
.etikett{display:inline-block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-mute);border:1px solid var(--line);border-radius:99px;padding:2px 9px;white-space:nowrap;line-height:1.5}
.etikett--b{color:var(--fg-soft);border-color:var(--line-strong)}
.liste{list-style:none;padding:0;display:grid;gap:10px}
.liste li{padding-left:18px;position:relative}
.liste li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--fg-mute)}
.liste .etikett{margin-left:6px;vertical-align:1px}
.abschnitt{padding-top:var(--sec)}
.abschnitt>h2{margin-bottom:12px}
.abschnitt>.lead{color:var(--fg-soft);margin-bottom:28px}

/* ---- Preise ---- */
.stufen{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;align-items:stretch}
@media (max-width:760px){.stufen{grid-template-columns:1fr}}
.stufe{background:var(--card-bg);border:var(--card-bd-w) solid var(--card-bd);border-radius:var(--r-card);padding:clamp(22px,3vw,36px);display:flex;flex-direction:column;gap:18px}
.stufe--hervor{background:var(--hl-bg);color:var(--hl-fg);border:var(--hl-bd-w) solid var(--hl-bd)}
.stufe--hervor .mute,.stufe--hervor .eyebrow{color:inherit;opacity:.72}
.stufe--hervor a{color:inherit}
.stufe--hervor .etikett{color:inherit;border-color:currentColor;opacity:.8}
.stufe--hervor .liste li::before{background:currentColor}
.stufe h2{font-size:18px}
.preis{font-size:clamp(28px,4vw,40px);font-weight:500;line-height:1.1;letter-spacing:-.02em}
.preis small{font-size:13px;font-weight:400;letter-spacing:0;opacity:.75;display:block;margin-top:8px;line-height:1.5}
.stufe .knopf{margin-top:auto;align-self:flex-start}
.stufe--hervor .knopf{color:inherit;border-color:currentColor}
.stufe--hervor .knopf:hover{background:transparent;opacity:.8}
.hinweis{border-top:1px solid var(--line);padding-top:14px;font-size:13px;color:var(--fg-soft)}
.stufe--hervor .hinweis{border-color:currentColor;color:inherit;opacity:.9}
.band{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:20px}
@media (max-width:760px){.band{grid-template-columns:1fr}}
.band .karte{gap:10px}
.zahl{font-size:22px;font-weight:500}

/* ---- FAQ ---- */
.faq{display:grid;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:0}
.faq summary{cursor:pointer;list-style:none;padding:16px 28px 16px 0;font-weight:500;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:14px;color:var(--fg-mute);font-weight:400}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 0 18px;color:var(--fg-soft)}

/* ---- Formulare, Download, Rechtliches ---- */
.tabelle{width:100%;border-collapse:collapse;font-size:13px}
.tabelle th,.tabelle td{text-align:left;padding:12px 12px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.tabelle th{font-weight:500;color:var(--fg-mute);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.wertbox{font-size:12px;word-break:break-all;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-ctl);padding:10px 12px;color:var(--fg-soft)}
.recht h2{font-size:16px;margin:36px 0 10px}
.recht p,.recht li{color:var(--fg-soft)}
.recht ul{padding-left:20px;max-width:var(--measure)}
.luecke{border:1px dashed var(--line-strong);border-radius:var(--r-ctl);padding:2px 8px;color:var(--fg);white-space:nowrap}
.platzhalter{border:1px solid var(--line-strong);border-radius:var(--r-card);padding:14px 18px;margin-top:24px;font-size:13px;color:var(--fg-soft)}
input[type=text],input[type=search],textarea{font:inherit;color:var(--fg);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-ctl);padding:11px 14px;min-height:44px;width:100%}
input::placeholder{color:var(--fg-mute)}
input[type=range]{width:100%;accent-color:var(--fg)}

/* ---- Startseite R2 ---- */
.hero{padding-top:clamp(28px,4vw,56px);text-align:center}
.hero p{margin-inline:auto}
.hero h1{max-width:34ch;margin-inline:auto;font-size:clamp(18px,2.1vw,26px);font-weight:400;color:var(--fg-soft);line-height:1.5}
.hero .pm-split{margin-top:clamp(8px,2vw,28px)}
.auftrag{max-width:640px;margin:clamp(10px,2vw,24px) auto 0;display:flex;gap:10px}
.auftrag input{flex:1;min-width:0}
.auftrag .knopf{white-space:nowrap}
@media (max-width:520px){.auftrag{flex-direction:column}}
.beispiele{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:18px}
.beispiele .pille{max-width:100%;white-space:normal;text-align:center}
.hero__note{margin:16px auto 0;font-size:12px;color:var(--fg-mute);min-height:1.7em;max-width:none}
.hero__leit{margin-top:6px;font-size:12px;color:var(--fg-mute)}

.pm-split{position:relative}
.pm-split__cv{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.pm-split__slots{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px 16px;max-width:1020px;margin-inline:auto;position:relative}
.pm-split__slot{display:flex;flex-direction:column;align-items:center;text-align:center;font-size:12.5px;line-height:1.45;padding:0 4px}
.pm-split__sp{width:100%;max-width:150px;aspect-ratio:1/1}
.pm-split__rolle,.pm-split__auf,.pm-split__zu{opacity:0;transition:opacity .5s}
.pm-split__rolle{font-size:11px;letter-spacing:.06em;color:var(--fg-mute)}
.pm-split__auf{font-size:13px;min-height:2.9em;margin-top:2px}
.pm-split__zu{font-size:11.5px;color:var(--fg-mute);margin-top:2px}
.pm-split__slot.an .pm-split__rolle,.pm-split__slot.an .pm-split__auf,.pm-split__slot.an .pm-split__zu,.pm-split__slot.an .pm-split__ja{opacity:1}
.pm-split__slot.wartet .pm-split__zu{color:var(--fg)}
.pm-split__ja{font:inherit;font-size:12px;margin-top:8px;color:var(--bg);background:var(--fg);border:0;border-radius:var(--r-ctl);padding:8px 22px;cursor:pointer;min-height:36px;opacity:0;transition:opacity .5s}
.pm-split__slot:not(.an) .pm-split__ja{pointer-events:none}
@media (max-width:640px){.pm-split__slots{grid-template-columns:repeat(2,1fr);gap:14px 10px}.pm-split__sp{max-width:110px}}
.pm-tip{position:absolute;z-index:2;pointer-events:none;font-size:11.5px;background:var(--surface-2);border:1px solid var(--line-strong);border-radius:var(--r-ctl);padding:4px 10px;white-space:nowrap;color:var(--fg)}
.pm-colony__cv{display:block;width:100%;height:100%}

/* ---- Proben ---- */
.probe{border-top:1px solid var(--line);padding-top:16px;display:flex;flex-direction:column;gap:12px;margin-top:auto}
.probe__zeile{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:inherit;font-size:12px;color:var(--fg);background:var(--surface-2);border:1px solid var(--line-strong);border-radius:99px;padding:6px 12px;cursor:pointer;min-height:32px}
.chip[aria-pressed=false]{background:transparent;color:var(--fg-mute);border-style:dashed;text-decoration:line-through}
.status{font-size:12.5px;color:var(--fg-soft);min-height:3.3em}
.dateien{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.datei{font:inherit;font-size:11px;padding:8px 2px;border:1px solid var(--line-strong);border-radius:var(--r-ctl);background:transparent;color:var(--fg-soft);cursor:pointer;min-height:44px;line-height:1.3}
.datei b{display:block;font-weight:600;color:var(--fg)}
.datei.mein{background:var(--fg);color:var(--bg)}
.datei.mein b{color:var(--bg)}
.datei.nein{animation:wackel .4s}
@keyframes wackel{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){.datei.nein{animation:none;border-color:var(--fg)}}
.budget{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center}
.budget svg{width:96px;height:96px}
.maske{font-size:12px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-ctl);padding:10px 12px;word-break:break-all;min-height:44px}
.skizze{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.skizze svg{width:56px;height:56px}
.farm{height:300px;position:relative;border:1px solid var(--line);border-radius:var(--r-card);background:var(--bg-sunk);overflow:hidden}
.beispiel-hinweis{font-size:11px;color:var(--fg-mute);letter-spacing:.04em}

/* ---- Startbild ---- */
.pm-intro{position:fixed;inset:0;z-index:9999;background:var(--splash-grund,#020203);display:flex;align-items:center;justify-content:center;transition:opacity .22s}
.pm-intro.aus{opacity:0;pointer-events:none}
.pm-intro__box{width:min(520px,80vw);height:min(360px,50vh)}
.pm-intro__skip{position:absolute;right:20px;bottom:20px;font:inherit;font-size:12px;color:#c9ced6;background:transparent;border:1px solid #3a3f47;border-radius:99px;padding:8px 18px;cursor:pointer}
.pm-intro__skip:focus-visible{outline:2px solid #f5f7f9}

/* ================= Richtungswerte ================= */
/* r1 Kolonie: weiche Konturen, ruhige Kolonie im Seitenkopf */
[data-richtung=r1]{--r-card:26px 34px 28px 38px / 34px 26px 38px 28px;--card-bg:var(--surface);--card-bd:var(--line-strong);--hl-bd-w:2px;--hl-bd:var(--fg);--hl-bg:var(--surface-2)}
[data-richtung=r1] .seitenkopf [data-pm-colony]{display:block;position:absolute;top:0;bottom:0;right:0;left:48%;z-index:-1;opacity:.85}
[data-richtung=r1] .seitenkopf{min-height:260px}
[data-richtung=r1] .etikett,[data-richtung=r1] .stempel{border-radius:14px 20px 16px 22px / 20px 14px 22px 16px}
[data-richtung=r1] .knopf{border-radius:16px 20px 18px 22px / 20px 16px 22px 18px}
/* r2 Ein Auftrag: Haarlinien, fast leer */
[data-richtung=r2]{--r-card:6px;--card-bg:transparent;--card-bd:var(--line);--hl-bd:var(--fg);--hl-bd-w:1px;--sec:clamp(64px,9vw,120px)}
/* r3 Umkehrfläche: typografisch, helle Flächen als Hervorhebung */
[data-richtung=r3]{--r-card:0;--card-bg:transparent;--card-bd:var(--line-strong);--hl-bg:var(--inv-bg);--hl-fg:var(--inv-fg);--hl-bd:var(--inv-bg);--h1:clamp(30px,5.4vw,68px);--h2:clamp(20px,2.6vw,32px)}
[data-richtung=r3] .seitenkopf h1{max-width:18ch;letter-spacing:-.025em;font-weight:500}
[data-richtung=r3] .knopf,[data-richtung=r3] .themen,[data-richtung=r3] .pille{border-radius:0}
[data-richtung=r3] .stufe--hervor .preis{font-size:clamp(32px,5vw,52px)}
[data-richtung=r3] .stufe--hervor ::selection{background:var(--inv-fg);color:var(--inv-bg);text-shadow:none}
[hidden]{display:none !important}
.karte>.knopf{align-self:flex-start}
@media (max-width:640px){[data-richtung=r1] .seitenkopf [data-pm-colony]{left:0;opacity:.45}}

/* ================= Startseiten R1 und R3 (angehängt) ================= */
/* Umkehrfläche: Farben tauschen für alles darin. --inv-bg/--inv-fg stehen auf :root, daher kein Zirkelbezug. */
.umkehr{--fg:var(--inv-fg);--bg:var(--inv-bg);
  --fg-soft:color-mix(in oklab,var(--inv-fg) 82%,var(--inv-bg));--fg-mute:color-mix(in oklab,var(--inv-fg) 66%,var(--inv-bg));
  --line:color-mix(in oklab,var(--inv-fg) 22%,var(--inv-bg));--line-strong:color-mix(in oklab,var(--inv-fg) 40%,var(--inv-bg));
  --surface:color-mix(in oklab,var(--inv-fg) 3%,var(--inv-bg));--surface-2:color-mix(in oklab,var(--inv-fg) 8%,var(--inv-bg));
  --bg-sunk:color-mix(in oklab,var(--inv-fg) 4%,var(--inv-bg));--cell-fill:var(--inv-bg);--pm-fill:var(--inv-bg);
  background:var(--inv-bg);color:var(--inv-fg)}
.umkehr ::selection{background:var(--inv-fg);color:var(--inv-bg);text-shadow:none}

.h-logo{display:block;line-height:0;width:max-content}
.h-logo img{height:clamp(46px,5.4vw,72px);width:auto}
.h-leit{font-size:13px;color:var(--fg-mute)}
.h-by{font-size:12px;color:var(--fg-mute)}
.h-akt{display:flex;gap:12px 14px;flex-wrap:wrap;align-items:center}

/* R1: tiefschwarzer erster Bildschirm, Kolonie rechts */
.h1-hero{background:var(--bg-sunk);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.h1-hero__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,5vw,72px);align-items:stretch;min-height:min(740px,calc(100svh - 122px));padding-block:clamp(28px,4.5vw,64px)}
.h1-hero__txt{display:flex;flex-direction:column;gap:clamp(20px,3vw,36px);justify-content:center;align-items:flex-start}
.h1-hero h1{font-size:clamp(19px,2.2vw,29px);font-weight:500;line-height:1.5;max-width:26ch;letter-spacing:-.005em}
.h1-hero__bild{display:flex;flex-direction:column;gap:10px;min-height:340px}
.h1-stage{position:relative;flex:1;min-height:340px}
.h1-legende{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:11.5px;color:var(--fg-mute)}
.h1-legende span:first-child{display:inline-flex;align-items:center;gap:8px}
.h1-legende svg{width:18px;height:18px;overflow:visible}
.pm-blob{position:absolute;left:0;top:0;border-radius:50%;will-change:transform}
.pm-blob:focus-visible{outline:2px solid var(--fg);outline-offset:-6px}
.pm-blob svg{pointer-events:none}
[data-richtung=r1]{--pm-fill:var(--cell-fill);--pm-fill-a:1}
@media (max-width:860px){
  .h1-hero__in{grid-template-columns:1fr;min-height:0}
  .h1-stage{min-height:340px;height:340px;flex:none}
}
.h1-akz{display:inline-block;vertical-align:-5px;margin-right:12px;width:26px;height:26px;overflow:visible}
.h1-akz path{fill:none;stroke:var(--fg);stroke-width:1.8;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.h1-dl{position:relative;overflow:hidden;isolation:isolate}
.h1-dl__bg{position:absolute;right:clamp(8px,6vw,80px);top:50%;width:170px;height:170px;margin-top:-85px;z-index:-1;opacity:.9;pointer-events:none;overflow:visible}
.h1-dl__bg path{fill:none;stroke:var(--line-strong);stroke-width:2;vector-effect:non-scaling-stroke}
.h1-dl__bg path{transform-box:fill-box;transform-origin:center}
.h1-dl__bg path+path{stroke:var(--line);transform:scale(1.2) rotate(18deg)}

/* R3: Aussage links, Umkehrfläche rechts */
.h3-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:min(760px,calc(100svh - 122px));background:var(--bg-sunk);border-bottom:1px solid var(--line)}
.h3-hero__txt{display:flex;flex-direction:column;justify-content:space-between;gap:clamp(28px,4vw,48px);padding:clamp(28px,4.5vw,64px) clamp(24px,4vw,56px) clamp(28px,4vw,48px) max(var(--gutter),calc((100vw - var(--wrap))/2))}
.h3-hero h1{font-size:clamp(22px,2.75vw,40px);font-weight:500;line-height:1.3;letter-spacing:-.025em;max-width:20ch;margin-block:auto}
.h3-hero h1 .umk{background:var(--inv-bg);color:var(--inv-fg);padding:0 .14em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.h3-hero__fuss{display:flex;flex-direction:column;gap:6px}
.h3-flaeche{position:relative;display:flex;align-items:center;justify-content:center;padding:clamp(24px,5vw,72px);min-height:380px;overflow:hidden}
.h3-flaeche__blob{width:min(100%,520px)}
.h3-flaeche__leg{position:absolute;left:clamp(16px,2.5vw,32px);bottom:clamp(14px,2vw,26px);font-size:11.5px;color:var(--fg-mute)}
.pm-inv-an,.pm-inv-an *{cursor:none !important}
.pm-inv-cur{position:fixed;left:0;top:0;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:var(--mark-hell);mix-blend-mode:difference;pointer-events:none;z-index:2147483000;transform:translate3d(-100px,-100px,0) scale(0);will-change:transform}
@media (max-width:860px){
  .h3-hero{grid-template-columns:1fr;min-height:0}
  .h3-hero__txt{padding:28px var(--gutter) 36px;min-height:0}
  .h3-flaeche{min-height:320px}
}
.regeln{border-top:1px solid var(--line-strong)}
.regel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:14px clamp(24px,5vw,72px);padding:clamp(24px,4vw,44px) 0;border-bottom:1px solid var(--line-strong)}
.regel__l{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.regel h3{font-size:clamp(20px,2.6vw,32px);letter-spacing:-.02em;font-weight:500}
.regel__r{display:flex;flex-direction:column;gap:18px;min-width:0}
.regel.umkehr{padding-inline:clamp(20px,3vw,40px);margin-block:-1px;border-color:var(--inv-bg)}
@media (max-width:760px){.regel{grid-template-columns:1fr}}
.h3-band{padding:clamp(28px,5vw,64px) clamp(20px,4vw,56px);display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.h3-band h2{font-size:clamp(22px,3vw,40px);letter-spacing:-.02em}
.h3-preise{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:20px}
.h3-preise>div{padding:clamp(22px,3vw,36px);display:flex;flex-direction:column;gap:12px;border:1px solid var(--line-strong)}
.h3-preise>div+div{border-left:0}
.h3-preise .umkehr{border-color:var(--inv-bg)}
@media (max-width:720px){.h3-preise{grid-template-columns:1fr}.h3-preise>div+div{border-left:1px solid var(--line-strong);border-top:0}}