/*
Theme Name: neustart
Theme URI: https://neustart.ai
Description: Schlankes Theme für neustart.ai mit Byte. Ohne Page-Builder, ohne jQuery.
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: neustart
*/

/* ---------- Schriften (lokal, keine Verbindung zu Google) ---------- */
@font-face{font-family:'Unbounded';font-style:normal;font-weight:700 900;font-display:swap;src:url(assets/fonts/unbounded-latin.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:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/fonts/dmsans-latin.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:'Press Start 2P';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/pressstart2p-latin.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/spacegrotesk-700-latin.woff2) format('woff2')}

/* ---------- Grundwerte ---------- */
:root{
  --k:#0B0F14;--g:#2BE38B;--bg:#F2F4F3;--bg2:#E4E8E6;--w:#FFFFFF;
  --t2:#3A4550;--t2d:#B8C1CC;--line:#D5DAD8;--lined:#2A333D;--panel:#161C24;
  --f-disp:'Unbounded',system-ui,sans-serif;--f-text:'DM Sans',system-ui,sans-serif;
  --f-px:'Press Start 2P',ui-monospace,monospace;--f-logo:'Space Grotesk',system-ui,sans-serif;
  --gx:80px;--bleed:48px;--side:32px;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--k);color:var(--k);font-family:var(--f-text);font-size:17px;line-height:1.5}
img,svg{max-width:100%}
a{color:var(--k)}a:hover{color:var(--t2)}
button,input,textarea,select{font:inherit}
:focus-visible{outline:3px solid var(--g);outline-offset:3px}
.on-light :focus-visible,.modal-hell :focus-visible{outline-color:var(--k)}
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-80px;z-index:100;background:var(--g);color:var(--k);padding:12px 18px;border-radius:999px;font-weight:700;text-decoration:none}
.skip:focus{top:16px}

.px{font-family:var(--f-px);font-weight:400}
.disp{font-family:var(--f-disp);text-transform:uppercase}
.mono{font-family:var(--f-text);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.label{font-family:var(--f-px);font-size:11px;line-height:1.6;color:var(--t2)}
.label-g{color:var(--g)}
.mint{color:var(--g)}.mint:hover{color:var(--w)}

/* ---------- Raster: gemeinsame linke Textlinie ---------- */
.wrap{max-width:1400px;margin:0 auto;padding-left:var(--side);padding-right:var(--side)}
.gx{padding-left:var(--gx);padding-right:var(--gx)}
.bleed{margin-left:calc(var(--bleed) * -1);margin-right:calc(var(--bleed) * -1)}
@media (max-width:900px){:root{--gx:32px;--bleed:0px}}
@media (max-width:560px){:root{--gx:20px;--side:20px}}
.sec{padding-top:96px;padding-bottom:96px}
.sec-head{display:flex;flex-direction:column;gap:18px;max-width:1100px}
.h2{margin:0;font-family:var(--f-disp);text-transform:uppercase;font-weight:900;font-size:clamp(26px,4.4vw,58px);line-height:1.06;letter-spacing:.005em}
.h3-box{margin:0;font-family:var(--f-disp);text-transform:uppercase;font-weight:800;font-size:clamp(22px,2.6vw,34px);line-height:1.08}
.dark{background:var(--k);color:var(--w)}
.on-light{background:var(--bg);color:var(--k)}

/* ---------- Knöpfe ---------- */
.pill{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font-weight:700;font-size:14px;line-height:1.2;border-radius:999px;padding:14px 22px;transition:background-color .25s,transform .25s,color .25s;cursor:pointer;font-family:var(--f-text);border:0}
.pill:hover{transform:translateY(-2px)}
.pill-o{background:var(--g);color:var(--k)}.pill-o:hover{color:var(--k);filter:brightness(1.06)}
.pill-k{background:var(--k);color:var(--w)}.pill-k:hover{background:#1B222B;color:var(--w)}
.pill-w{background:transparent;color:var(--w);border:1.5px solid rgba(255,255,255,.7)}.pill-w:hover{background:var(--w);color:var(--k)}
.pill-rand{border:1.5px solid var(--k)}
.pill svg{flex:none}
.textbtn{min-height:44px;padding:8px 12px;background:transparent;color:var(--t2d);border:0;cursor:pointer;text-decoration:underline}
.textbtn:hover{color:var(--w)}
.iconbtn{flex:none;width:44px;height:44px;border-radius:999px;border:1.5px solid currentColor;background:transparent;color:inherit;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none}
.check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:16px;font-weight:600}
.check li{display:flex;align-items:flex-start;gap:12px}
.check svg{flex:none;margin-top:1px}

/* ---------- Logo ---------- */
.logo{display:inline-flex;align-items:baseline;gap:8px;color:inherit;text-decoration:none}
.logo svg{flex:none;width:20px;height:22px}
.logo span{font-family:var(--f-logo);font-weight:700;font-size:26px;line-height:1;letter-spacing:-.02em}
.logo-s svg{width:17px;height:19px}.logo-s span{font-size:22px}

/* ---------- Karten ---------- */
.tile{border:2px solid var(--k);box-shadow:6px 6px 0 var(--k);transition:transform .35s}
.tile:hover{transform:translateY(-4px)}
.card{min-width:0;background:var(--w);border-radius:20px;display:flex;flex-direction:column;gap:12px}
.row{display:flex;flex-wrap:wrap;gap:16px}

/* ---------- Byte schreibt Überschriften ---------- */
.tw{position:relative;display:inline-block}
.tw-ghost{visibility:hidden}
.tw-live{position:absolute;inset:0}
.tw-old{font-family:var(--f-px);font-weight:400;font-size:.6em;letter-spacing:0}
.mark{display:inline}

/* ---------- Einstieg ---------- */
#top{background:var(--k);color:var(--w)}
.hero{min-height:min(100vh,960px);padding-top:28px;padding-bottom:28px;display:flex;flex-direction:column;gap:32px}
.hero-mitte{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px}
.hero-titel{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 20px}
#mark-home{flex:none;width:60px;height:65px}
.h1{margin:0;font-family:var(--f-disp);text-transform:uppercase;font-weight:900;font-size:clamp(24px,4.2vw,54px);line-height:1.08;letter-spacing:.01em;text-align:center}
.hero-sub{margin:0;text-align:center;color:var(--t2d);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 14px}
.hero-sub .textbtn{color:var(--g);padding:8px 4px;font:inherit;letter-spacing:inherit;text-transform:inherit}
.hero-box{width:100%;max-width:820px;display:flex;flex-direction:column;gap:16px}
.chat-log{display:flex;flex-direction:column;gap:14px}
.chat-log[hidden]{display:none}
.m-byte{align-self:flex-start;max-width:640px;display:flex;flex-direction:column;gap:12px}
.m-byte>p{margin:0;padding:14px 16px;background:var(--panel);border:1px solid var(--lined);border-radius:14px;font-size:17px;line-height:1.5}
.m-user{align-self:flex-end;max-width:520px;margin:0;padding:14px 16px;background:var(--g);color:var(--k);border-radius:14px;font-size:17px;line-height:1.5;overflow-wrap:anywhere}
.denkt span{display:inline-block;width:8px;height:8px;margin-right:6px;background:var(--g);animation:denkt 1s steps(1) infinite}
.denkt span:nth-child(2){animation-delay:.33s}.denkt span:nth-child(3){animation-delay:.66s}
@keyframes denkt{0%{opacity:1}50%{opacity:.2}100%{opacity:1}}
.mini-row{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.mini{flex:1 1 150px;min-width:0;border:1px solid var(--lined);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:4px}
.mini-hl{border-color:var(--g)}
.mini .n{font-size:14px;color:var(--t2d)}
.mini strong{font-family:var(--f-disp);font-size:22px;color:var(--g)}
.mini .k{font-size:13px;color:var(--t2d)}
.mini-l{flex:1 1 130px;padding:12px;gap:6px}
.mini-l .px{font-size:9px;color:var(--g)}.mini-l span:last-child{font-size:15px}
.m-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.m-cta>span{font-size:16px}
.m-link{align-self:flex-start;padding:10px 0;font-size:15px}
.btn-termin{align-self:flex-start;display:inline-flex;align-items:center;min-height:48px;padding:12px 20px;background:var(--g);color:var(--k);border-radius:12px;font-weight:600;font-size:16px;text-decoration:none}
.btn-termin:hover{color:var(--k);transform:translateY(-2px)}
.ergebnis{border:1px solid var(--lined);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:4px;min-width:min(420px,100%)}
.ergebnis .px{font-size:9px;line-height:1.6;color:var(--g);padding-bottom:8px}
.ergebnis dl{margin:0}
.e-zeile{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid var(--lined);font-size:15px}
.e-zeile dt{color:var(--t2d)}.e-zeile dd{margin:0;font-weight:700;color:var(--w);text-align:right}
.e-zeile dd.gut{color:var(--g)}
.e-detail{display:block;font-weight:400;font-size:13px;color:var(--t2d)}
.ergebnis .fazit{margin:12px 0 0;font-size:16px;font-weight:700}
.ergebnis .hinweis{margin:6px 0 0;font-size:13px;color:var(--t2d)}
.ask{width:100%;background:var(--w);border:2px solid var(--w);border-radius:999px;padding:8px 8px 8px 26px;display:flex;align-items:center;gap:10px}
.ask:focus-within{border-color:var(--g)}
.ask input{flex:1 1 auto;min-width:0;min-height:52px;border:0;background:transparent;color:var(--k);font-size:18px}
.ask input:focus{outline:0}
.ask input::placeholder{color:var(--t2);opacity:1}
.ask button{flex:none;width:52px;height:52px;border-radius:999px;border:0;background:var(--g);color:var(--k);display:flex;align-items:center;justify-content:center;cursor:pointer}
.ask button:disabled{opacity:.6;cursor:wait}
.hero-links{display:flex;flex-direction:column;align-items:center;gap:12px}
.hero-links>div{display:flex;flex-wrap:wrap;justify-content:center;gap:0 20px}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.chips[hidden]{display:none}
.chips .pill{padding:10px 18px;font-size:13px}
.hero-down{align-self:center;padding:12px 0;color:var(--t2d)}
.hero-down:hover{color:var(--w)}
.no-js .nur-js{display:none!important}

/* ---------- Kopfzeile ---------- */
.stickybar{position:sticky;top:-1px;z-index:10;padding-top:1px;background:var(--k);border-bottom:1px solid var(--lined)}
.stickybar .wrap{padding-top:8px;padding-bottom:8px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 24px}
.stickybar .logo{color:var(--w);min-height:44px;align-items:center}
.nav{display:flex;flex-wrap:wrap;gap:0 26px}
.nl{text-decoration:none;color:var(--w);padding:12px 0}
.nl:hover{color:var(--g);text-decoration:underline}
.stickybar .pill{padding:10px 18px;font-size:13px}
@media (max-width:700px){.nav{gap:0 16px}.stickybar .pill{display:none}}

/* ---------- Kacheln ---------- */
.kacheln{padding-top:32px;padding-bottom:96px}
.k-gross{flex:2 1 560px;min-width:0;background:var(--k);color:var(--w);border-radius:20px;padding:48px 48px 56px;min-height:300px;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.k-gross .mono{color:var(--t2d)}
.k-gross .disp{font-weight:800;font-size:clamp(28px,3.6vw,48px);line-height:1.02}
.k-klein{flex:1 1 260px;padding:28px}
.k-klein .mono{color:var(--t2)}
.k-titel{margin:0;font-family:var(--f-disp);text-transform:uppercase;font-weight:800;font-size:20px;line-height:1.15}
.k-klein p{margin:0;font-size:16px;color:var(--t2)}
@media (max-width:560px){.k-gross{padding:32px 24px 40px}}

/* ---------- Rollen ---------- */
.rollen-sec{display:flex;flex-direction:column;gap:48px}
.role{flex:1 1 200px;min-width:0;background:var(--k);color:var(--w);border:1.5px solid var(--lined)!important;border-radius:20px;padding:42px 26px 26px 48px;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden;transition:scale .25s ease-out,box-shadow .25s ease-out,border-color .25s,transform .35s}
.role.r5{border-color:var(--g)!important}
.role:hover{scale:1.05;z-index:3;border-color:var(--g)!important;box-shadow:8px 8px 0 var(--g)}
.role>*{position:relative;z-index:1}
.role h3{margin:0;font-family:var(--f-disp);text-transform:uppercase;font-weight:800;font-size:17px;line-height:1.15}
.role.r5 h3{color:var(--g)}
.role .t{font-size:15px;color:var(--t2d)}
.role .art{height:56px;display:flex;align-items:flex-end;margin-top:2px;opacity:0;transition:opacity .25s}
.role:hover .art{opacity:1}
.kz{position:relative;display:block}
.kz-live{position:absolute;inset:0;color:var(--t2d)}
.kz-live.tippt{color:var(--g)}
.kcur{font-weight:700;opacity:0}
.kz-live.tippt .kcur{opacity:1}
.r1:hover .kcur{animation:kcur .6s step-end infinite}
@keyframes kcur{50%{opacity:0}}
.r2 .pal{stroke-dasharray:1.12 1.12;stroke-dashoffset:0}
.r2 .blob{transform-box:fill-box;transform-origin:center}
.r2:hover .pal{animation:draw 1s ease-out both}
.r2:hover .blob{animation:blob .35s ease-out both}
@keyframes draw{from{stroke-dashoffset:1.12}to{stroke-dashoffset:0}}
@keyframes blob{from{transform:scale(0)}60%{transform:scale(1.25)}to{transform:scale(1)}}
.r3 .cl{stroke-dasharray:1.12 1.12;stroke-dashoffset:0}
.r3 .fl,.r3 .flash{opacity:0}
.r3 .flash{position:absolute;inset:0;z-index:2;background:var(--w);pointer-events:none}
.r3:hover .cl{animation:draw .6s ease-out both}
.r3:hover .fl{animation:fl 1.8s .6s infinite}
.r3:hover .flash{animation:flash 1.8s .6s infinite}
@keyframes fl{0%{opacity:0}5%{opacity:1}18%{opacity:0}23%{opacity:1}50%,100%{opacity:0}}
@keyframes flash{0%{opacity:0}5%{opacity:.7}18%{opacity:0}23%{opacity:.4}50%,100%{opacity:0}}
.r4 .art{position:relative}
.r4 .hop{transform-origin:50% 100%;display:block;width:46px;height:50px}
.r4 .armU{opacity:0}
.r4:hover .hop{animation:hop .62s ease-in-out infinite}
.r4:hover .armU{animation:armU 2.48s step-end infinite}
.r4:hover .armD{animation:armD 2.48s step-end infinite}
.r4 .hoi{position:absolute;left:56px;bottom:30px;white-space:nowrap;font-size:9px;line-height:1.6;color:var(--k);background:var(--g);border-radius:8px;padding:5px 7px;opacity:0;transition:opacity .2s}
.r4 .hoi.an{opacity:1}
@keyframes hop{0%,100%{transform:translateY(0) scaleY(1)}12%{transform:translateY(0) scaleY(.82)}50%{transform:translateY(-14px) scaleY(1.06)}88%{transform:translateY(0) scaleY(.9)}}
@keyframes armU{0%{opacity:0}50%{opacity:1}75%{opacity:0}}
@keyframes armD{0%{opacity:1}50%{opacity:0}75%{opacity:1}}
.r5 .art{align-items:flex-start;padding-top:6px}
.r5 .code{font-size:13px;line-height:1.4;color:var(--g);white-space:nowrap}
.r5:hover .kcur{opacity:1;animation:kcur .6s step-end infinite}

/* ---------- Haltung und «Was Byte gefressen hat» ---------- */
.haltung{display:flex;flex-wrap:wrap;gap:32px 80px;align-items:flex-start}
.haltung>div:first-child{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:16px}
.haltung .h2{font-size:clamp(26px,4vw,52px)}
.haltung-text{flex:1 1 480px;min-width:0;display:flex;flex-direction:column;gap:16px;font-size:18px;color:var(--t2);border-left:3px solid var(--g);padding-left:28px;margin-top:38px}
.haltung-text p{margin:0}.haltung-text p:last-child{color:var(--k);font-weight:700}
.box{position:relative;overflow:hidden;background:var(--k);color:var(--w);border-radius:24px;padding:56px 48px;display:flex;flex-direction:column;gap:28px}
@media (max-width:560px){.box{padding:40px 24px}}
.box-kopf{display:flex;flex-direction:column;gap:12px}
.box-kopf p{margin:0;font-size:17px;color:var(--t2d);max-width:640px}
.bisse-deko{position:absolute;border-radius:999px;background:var(--bg)}
.bites-kopf{padding-right:150px}
@media (max-width:560px){.bites-kopf{padding-right:60px}}
.bites{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:16px}
.bites li{flex:1 1 220px;min-width:0;position:relative;overflow:hidden;background:var(--w);color:var(--k);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:12px}
.bites li.b1{padding-bottom:56px}
.bites .bite{position:absolute;border-radius:999px;background:var(--k);transform:scale(1);transition:transform .28s ease-out}
.bites .bmark{position:absolute;font-size:40px;line-height:1}
.bites .tag{font-size:9px;line-height:1.6;color:var(--k);background:var(--g);align-self:flex-start;padding:5px 8px;border-radius:6px;transition:opacity .2s}
.bites .b2 .tag{align-self:flex-end}
.bites .alt{font-size:12px;line-height:1.7;text-decoration:line-through;text-decoration-thickness:2px}
.bites .txt{font-size:16px;color:var(--t2)}
.tippen .bites li:not(.gebissen) .bite{transform:scale(0)}
.tippen .bites li:not(.gebissen) .tag{opacity:0}
.box-fazit{margin:0;font-size:18px;font-weight:700;color:var(--g)}

/* ---------- Festpreise ---------- */
#pakete{background:var(--bg2)}
.pakete-sec{padding-top:96px;padding-bottom:24px;display:flex;flex-direction:column;gap:48px}
.pakete{display:flex;flex-wrap:wrap;gap:24px;align-items:stretch}
.paket{flex:1 1 320px;min-width:0;background:var(--w);color:var(--k);border-radius:24px;padding:36px 36px 36px 48px;display:flex;flex-direction:column;gap:22px}
.paket.dunkel{background:var(--k);color:var(--w)}
.paket .mono{color:var(--t2)}.paket.dunkel .mono{color:var(--t2d)}
.paket h3{margin:0;font-family:var(--f-disp);text-transform:uppercase;font-weight:800;font-size:24px;line-height:1.1}
.paket .preis{font-family:var(--f-disp);text-transform:uppercase;font-weight:800;font-size:clamp(26px,2.8vw,38px);line-height:1}
.paket.dunkel .preis{color:var(--g)}
.paket .pill{align-self:flex-start;margin-top:auto}
.paket-kopf,.paket-preis{display:flex;flex-direction:column;gap:8px}.paket-preis{gap:4px}
@media (max-width:560px){.paket{padding:28px 24px}}
.pflege{background:var(--w);border-radius:24px;padding:32px 48px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}
.pflege>div:first-child{flex:999 1 280px;min-width:0;display:flex;flex-direction:column;gap:6px}
.pflege .mono{color:var(--t2)}
.pflege h3{margin:0;font-family:var(--f-disp);text-transform:uppercase;font-weight:800;font-size:22px;line-height:1.15}
.pflege p{margin:0;font-size:16px;color:var(--t2)}
.pflege .preis{font-family:var(--f-disp);text-transform:uppercase;font-weight:800;font-size:30px;line-height:1}
@media (max-width:560px){.pflege{padding:28px 24px}}
.zusatz-sec{padding-bottom:96px}
.zusatz-kopf .sub{font-size:18px;color:var(--t2d)}
.zusatz-kopf h3{font-weight:900;font-size:clamp(22px,2.8vw,36px);line-height:1.06}
.zusatz{display:flex;flex-wrap:wrap;gap:16px;align-items:stretch}
.zk{flex:1 1 200px;min-width:0;background:var(--g);color:var(--k);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:10px}
.zk h4{margin:0;font-family:var(--f-disp);text-transform:uppercase;font-weight:800;font-size:14px;line-height:1.2}
.zk p{margin:0;font-size:15px}
.zk .mono{margin-top:auto;padding-top:6px}
.box-note{margin:0;font-size:16px;color:var(--t2d)}

/* ---------- Ablauf ---------- */
.ablauf-sec{display:flex;flex-direction:column;gap:48px}
.levels{margin-top:0;margin-bottom:0;padding:0;list-style:none}
.level{flex:1 1 200px;padding:26px 22px 26px 48px;gap:10px}
.level .px{font-size:10px;color:var(--t2)}
.level h3{margin:0;font-family:var(--f-disp);text-transform:uppercase;font-weight:800;font-size:16px;line-height:1.15;hyphens:manual}
.level p{margin:0;font-size:15px;color:var(--t2)}

/* ---------- Das ist Byte ---------- */
.byte-box{padding:48px;flex-direction:row;flex-wrap:wrap;gap:32px 64px;align-items:center}
.byte-box>div:first-child{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:14px}
.byte-box p{margin:0;font-size:17px;color:var(--t2d);max-width:560px}
.byte-box .pill{align-self:flex-start;margin-top:10px}
.byte-box .check{flex:1 1 320px;min-width:0;gap:14px}
.byte-box .check li{align-items:center}
#byte-twin{flex:none;position:relative;width:104px;height:112px;margin:0 24px}
.sprech{position:absolute;bottom:108%;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11px;color:var(--g);opacity:0;transition:opacity .2s}
.sprech.an{opacity:1}
@media (max-width:560px){.byte-box{padding:40px 24px}}

/* ---------- Spiel ---------- */
.spiel-box{background:var(--g);color:var(--k);border-radius:24px;padding:56px 48px;display:flex;flex-wrap:wrap;gap:40px 64px;align-items:center}
.spiel-box>div{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:18px}
.spiel-box .label{color:var(--k)}
.spiel-box .h2{font-size:clamp(30px,4.6vw,60px);line-height:1.04}
.spiel-box p{margin:0;font-size:19px;max-width:520px}
.spiel-box .pill{align-self:flex-start;margin-top:10px;font-size:15px;padding:24px 36px}
.spiel-vorschau{flex:1.2 1 420px;min-width:0;display:block;text-decoration:none}
.sv{position:relative;display:block;aspect-ratio:8/5;overflow:hidden;background:var(--k);border-radius:20px;border:3px solid var(--k);box-shadow:0 24px 48px rgba(11,15,20,.28)}
.sv .bits{position:absolute;width:1em;font-size:11px;line-height:1.7;word-break:break-all;color:var(--g)}
.sv .site{position:absolute;width:20%;display:flex;flex-direction:column;gap:5px;padding:7px;border-radius:6px;background:#C9CFD4;border:2px solid #8A949E}
.sv .site.neu{background:var(--g);border-color:var(--g)}
.sv .site .px{font-size:7px;line-height:1.4;color:var(--t2)}
.sv .site.neu .px{color:var(--k)}
.sv .site i{height:4px;background:var(--t2);opacity:.5}
.sv .site.neu i{background:var(--k)}
.sv .hud{position:absolute;top:5%;font-size:9px;color:var(--w)}
@media (max-width:560px){.spiel-box{padding:40px 24px}.spiel-vorschau{flex-basis:100%}}

/* ---------- Sofort beginnen ---------- */
.start{padding-bottom:96px;display:flex;flex-wrap:wrap;gap:40px 64px;align-items:stretch}
.start>div:first-child{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:18px}
.start .h2{font-size:clamp(26px,4vw,52px)}
.start p{margin:0;font-size:17px;color:var(--t2);max-width:520px}
.start-cta{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px}
.start-cta .pill{font-size:17px;padding:28px 44px;border:2px solid var(--k)}
.start-cta span{font-size:15px;color:var(--t2)}

/* ---------- Buchen ---------- */
.buchen{padding-top:104px;padding-bottom:104px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:40px 48px}
.buchen>div:first-child{flex:1 1 520px;min-width:0;display:flex;flex-direction:column;gap:18px}
.buchen .h2{font-weight:800;font-size:clamp(28px,4.8vw,64px);line-height:1.04}
.buchen .mono{color:var(--t2d)}
.mail-link{color:var(--g);text-transform:none;letter-spacing:0;font-size:15px}
.mail-link:hover{color:var(--w)}
.buchen-knoepfe{display:flex;flex-wrap:wrap;gap:12px}
.buchen-knoepfe .pill{padding:18px 28px;font-size:16px}

/* ---------- FAQ ---------- */
#faq{background:var(--bg2)}
.faq-sec{display:flex;flex-wrap:wrap;gap:48px 80px}
.faq-sec>div:first-child{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:14px}
.faq-sec h2{margin:0;font-family:var(--f-disp);font-weight:800;font-size:clamp(32px,5vw,64px);line-height:1}
.faq-sec>div:first-child p{margin:0;color:var(--t2);font-size:17px;max-width:420px}
.faq-sec .knoepfe{display:flex;flex-wrap:wrap;gap:12px;padding-top:8px}
.faq-liste{flex:2 1 560px;min-width:0;display:flex;flex-direction:column;border-bottom:1px solid #C9CFCC;margin-top:calc(clamp(32px,5vw,64px) + 14px)}
@media (max-width:900px){.faq-liste{margin-top:0}}
.faq-liste details{border-top:1px solid #C9CFCC}
.faq-liste summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 0;cursor:pointer;list-style:none;font-size:19px;font-weight:700}
.faq-liste summary::-webkit-details-marker{display:none}
.faq-liste summary svg{transition:transform .35s;flex:none}
.faq-liste details[open] summary svg{transform:rotate(45deg)}
.faq-liste details p{margin:-8px 0 26px;color:var(--t2);font-size:16px;max-width:680px}
.js .faq-liste:not(.alle) .faq-mehr{display:none}
.faq-weitere{align-self:flex-start;min-height:48px;margin:22px 0;padding:12px 22px;border-radius:999px;border:1.5px solid var(--k);background:transparent;color:var(--k);font-weight:700;font-size:15px;cursor:pointer}
.no-js .faq-weitere,.faq-liste.alle .faq-weitere{display:none}

/* ---------- Footer ---------- */
.fuss{background:var(--k);color:var(--t2d);border-top:1px solid var(--lined)}
.fuss .wrap{padding-top:56px;padding-bottom:40px;display:flex;flex-direction:column;gap:40px}
.fuss-oben{display:flex;flex-wrap:wrap;gap:32px 48px;justify-content:space-between}
.fuss-marke{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:14px;color:var(--w)}
.fuss-marke>span{color:var(--t2d);font-size:14px;max-width:300px}
.fuss-spalte{flex:1 1 150px;min-width:0;display:flex;flex-direction:column;gap:6px}
.fuss-spalte .mono{margin-bottom:4px;color:var(--w)}
.footlink{color:var(--t2d);padding:6px 0;font-size:14px;text-decoration:none}
.footlink:hover{color:var(--w)}
.fuss-unten{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 32px;border-top:1px solid var(--lined);padding-top:24px;font-size:13px}
.fuss-unten>div{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px}
.fuss-unten .footlink{padding:12px 0;font-size:13px;text-decoration:underline}
.fuss-unten .pill{padding:10px 16px;font-size:13px}

/* ---------- Byte, der Läufer ---------- */
#byte-root{position:relative;overflow-x:clip;background:var(--bg);color:var(--k)}
.site-an{animation:rise .6s ease-out both}
#byte{position:absolute;z-index:5;pointer-events:none;left:0;top:0;width:60px;height:65px;filter:drop-shadow(2px 0 0 var(--k)) drop-shadow(-2px 0 0 var(--k)) drop-shadow(0 2px 0 var(--k)) drop-shadow(0 -2px 0 var(--k))}
.no-js #byte{display:none}
#byte .say{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;color:var(--g);opacity:0}
#byte .say-mampf{bottom:106%;font-size:9px}
#byte .say-juhui{bottom:130%;font-size:10px}
#byte .say-hm{bottom:108%;font-size:11px;transition:opacity .2s}
#byte .say-hallo{bottom:106%;font-size:10px;transition:opacity .2s}
#byte-lean{display:block;width:100%;height:100%;transition:transform .25s ease-out}
#byte-face,.byte-pose{display:block;width:100%;height:100%}
#byte svg{display:block;width:100%;height:100%}
#byte .p-up,#byte .p-eat,#byte .p-walk{opacity:0}

/* ---------- Animationen ---------- */
.idle{animation:idle 7s ease-in-out infinite}
.cheer{animation:cheer 1s ease-out both}
.lid{opacity:0;animation:lid 4.3s steps(1) infinite}
.fa{animation:frameA .28s steps(1) infinite}
.fb{opacity:0;animation:frameB .28s steps(1) infinite}
@keyframes cheer{0%{transform:translateY(0)}20%{transform:translateY(-16px)}40%{transform:translateY(0)}60%{transform:translateY(-16px)}80%,100%{transform:translateY(0)}}
@keyframes idle{0%,38%{transform:translate(0,0)}42%{transform:translate(9px,0)}46%,84%{transform:translate(0,0)}87%{transform:translate(0,-9px)}90%{transform:translate(0,0)}93%{transform:translate(0,-9px)}96%,100%{transform:translate(0,0)}}
@keyframes lid{0%{opacity:0}93%{opacity:1}97%,100%{opacity:0}}
@keyframes frameA{0%{opacity:1}50%{opacity:0}100%{opacity:1}}
@keyframes frameB{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes reveal{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@supports (animation-timeline: view()){
  .reveal{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
}

/* ---------- Intro ---------- */
#intro,#gameover{position:fixed;inset:0;z-index:90;display:none;background:var(--k);color:var(--w);overflow:hidden}
.intro-an{overflow:hidden}
.intro-an #byte-root,.intro-an .dock,.intro-an .nach-oben{visibility:hidden}
.intro-an #intro{display:flex}
.intro-an.phase-go #intro{display:none}
.intro-an.phase-go #gameover{display:flex}
.intro-buehne{width:100%;height:100%;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:24px}
.intro-hud{width:100%;max-width:720px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:11px;line-height:1.6;color:var(--t2d)}
.stage{--bw:clamp(64px,16vw,104px);position:relative;width:min(700px,92vw);padding-left:calc(var(--bw) + 8px)}
.alt-seite{animation:eat 7.2s linear both;border:3px solid var(--w);background:#C0C0C0;color:#000;font-family:'Times New Roman',Times,serif;-webkit-font-smoothing:none;-moz-osx-font-smoothing:unset;font-smooth:never;text-rendering:optimizeSpeed;-webkit-text-stroke:.45px}
.alt-titel{background:#000080;color:#fff;padding:6px 10px;font-family:Arial,sans-serif;font-size:13px;font-weight:700}
.alt-inhalt{padding:20px 16px 24px;text-align:center;display:flex;flex-direction:column;gap:12px}
.alt-inhalt .a1{font-size:30px;font-weight:700;color:#B00000}
.alt-inhalt .a2{font-size:16px;color:#0000C8;text-decoration:underline}
.alt-inhalt .a3{font-size:15px}
.alt-inhalt .a4{font-size:15px;background:#FFFF00;padding:6px 8px;align-self:center}
.alt-inhalt .a5{font-size:13px}
.intro-bahn{position:absolute;top:0;bottom:0;right:0;left:calc(var(--bw) + 8px);pointer-events:none}
.intro-byte{position:absolute;top:50%;left:-150%;width:var(--bw);height:var(--bw);margin-top:calc(var(--bw) / -2);transform:translateX(-100%);animation:walk 7.2s linear both}
.intro-joy{position:relative;width:100%;height:100%;animation:joy 7.2s linear both}
.intro-say{position:absolute;bottom:104%;left:50%;transform:translateX(-50%);white-space:nowrap;color:var(--g);opacity:0}
.intro-joy svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ig-bang{font-size:20px;animation:gBang 7.2s linear both}
.ig-yay{font-size:12px;animation:gYay 7.2s linear both}
.ig-munch{font-size:12px;animation:gMunch 7.2s linear both}
.ig-down{animation:gDown 7.2s linear both}
.ig-up{opacity:0;animation:gUp 7.2s linear both}
.ig-clap{opacity:0;animation:gClap 7.2s linear both}
.ig-idle{animation:gIdle 7.2s linear both}
.ig-eat{opacity:0;animation:gEat 7.2s linear both}
.intro-skip{min-height:44px;padding:10px 18px;background:transparent;color:var(--t2d);border:1px solid #5A6672;border-radius:4px;font-size:14px;cursor:pointer}
.intro-skip:hover{transform:translateY(-2px)}
#gameover{flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:24px;text-align:center}
#gameover.crt-auto{animation:crt .75s ease-in 5.25s both}
#gameover.crt-jetzt{animation:crt2 .75s ease-in 0s both}
.go-titel{font-size:clamp(28px,7vw,72px);line-height:1.2;animation:pop .2s steps(2) both}
#gameover p{margin:0;font-size:18px;line-height:1.5;color:var(--t2d);max-width:440px}
.go-knopf{min-height:64px;padding:20px 32px;background:var(--g);color:var(--k);border:0;border-radius:4px;font-size:clamp(14px,3.4vw,20px);cursor:pointer}
.go-knopf:hover{transform:translateY(-2px)}
.go-lade{display:flex;flex-direction:column;align-items:center;gap:10px}
.go-lade>div{width:220px;height:8px;border:2px solid #5A6672}
.go-lade>div>div{height:100%;width:100%;background:var(--g);animation:fill 6s steps(12) both}
.go-lade span{font-size:13px;color:var(--t2d)}
@keyframes eat{0%,64%{clip-path:inset(0 0 0 0)}97%,100%{clip-path:inset(0 0 0 100%)}}
@keyframes walk{0%,22%{left:-150%}36%,64%{left:0%}97%,100%{left:100%}}
@keyframes joy{0%,36%{transform:translateY(0)}38%{transform:translateY(-18px)}40%{transform:translateY(0)}42%{transform:translateY(-18px)}44%{transform:translateY(0)}49%{transform:translateY(-6px)}51%{transform:translateY(0)}55%{transform:translateY(-6px)}57%{transform:translateY(0)}61%{transform:translateY(-6px)}63%,100%{transform:translateY(0)}}
@keyframes gDown{0%,43.99%{opacity:1}44%,63.99%{opacity:0}64%,100%{opacity:1}}
@keyframes gUp{0%,43.99%{opacity:0}44%,47.99%{opacity:1}48%,50.99%{opacity:0}51%,53.99%{opacity:1}54%,56.99%{opacity:0}57%,59.99%{opacity:1}60%,62.99%{opacity:0}63%,63.99%{opacity:1}64%,100%{opacity:0}}
@keyframes gClap{0%,47.99%{opacity:0}48%,50.99%{opacity:1}51%,53.99%{opacity:0}54%,56.99%{opacity:1}57%,59.99%{opacity:0}60%,62.99%{opacity:1}63%,100%{opacity:0}}
@keyframes gIdle{0%,63.99%{opacity:1}64%,100%{opacity:0}}
@keyframes gEat{0%,63.99%{opacity:0}64%,100%{opacity:1}}
@keyframes gBang{0%,35.99%{opacity:0}36%,43.99%{opacity:1}44%,100%{opacity:0}}
@keyframes gYay{0%,43.99%{opacity:0}44%,63.99%{opacity:1}64%,100%{opacity:0}}
@keyframes gMunch{0%,63.99%{opacity:0}64%,96.99%{opacity:1}97%,100%{opacity:0}}
@keyframes crt{0%{transform:scale(1,1);background:#0B0F14}40%{transform:scale(1,.006);background:#FFFFFF}62%{transform:scale(1,.006);background:#FFFFFF}92%{transform:scale(.004,.006);background:#FFFFFF}100%{transform:scale(0,0);background:#FFFFFF}}
@keyframes crt2{0%{transform:scale(1,1);background:#0B0F14}40%{transform:scale(1,.006);background:#FFFFFF}62%{transform:scale(1,.006);background:#FFFFFF}92%{transform:scale(.004,.006);background:#FFFFFF}100%{transform:scale(0,0);background:#FFFFFF}}
@keyframes fill{from{width:0%}to{width:100%}}
@keyframes pop{from{opacity:0}to{opacity:1}}

/* ---------- Immer sichtbar: Nach oben und Byte am Rand ---------- */
.nach-oben{position:fixed;right:20px;bottom:20px;z-index:40;width:58px;height:58px;border-radius:999px;border:1.5px solid var(--g);background:var(--k);color:var(--w);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;box-shadow:0 8px 20px rgba(11,15,20,.3);text-decoration:none}
.nach-oben .px{font-size:9px;line-height:1}
.js .nach-oben:not(.an){display:none}
.dock{position:fixed;right:0;top:50%;z-index:40;transform:translateY(-50%);display:flex;align-items:center;gap:14px}
.dock-b{position:relative;display:block;padding:10px 10px 10px 12px;border:0;background:transparent;cursor:pointer;transition:transform .3s ease-out}
.dock-b:hover,.dock-b:focus-visible,.dock.open .dock-b{transform:translateX(-18px)}
.dock-say,.dock-hu{position:absolute;right:100%;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:10px;line-height:1.6;color:var(--k);background:var(--g);border:2px solid var(--k);border-radius:10px;padding:8px 10px;opacity:0;pointer-events:none;transition:opacity .2s}
.dock-b:hover .dock-say,.dock-b:focus-visible .dock-say{opacity:1}
.dock-hu{animation:huhu 16s 6s infinite}
.dock-b:hover .dock-hu,.dock-b:focus-visible .dock-hu,.dock.open .dock-hu,.dock.open .dock-say{animation:none;opacity:0}
@keyframes huhu{0%,82%{opacity:0}85%,95%{opacity:1}100%{opacity:0}}
.dock-wave{display:block;width:64px;height:69px;animation:wave 16s 6s infinite;transform-origin:50% 100%;filter:drop-shadow(2px 0 0 var(--k)) drop-shadow(-2px 0 0 var(--k)) drop-shadow(0 2px 0 var(--k)) drop-shadow(0 -2px 0 var(--k))}
.dock-wave>span{display:block;width:100%;height:100%;transform:scaleX(-1)}
.dock-wave svg{display:block;width:100%;height:100%}
@keyframes wave{0%,84%{transform:none}86%{transform:translateY(-6px)}88%{transform:none}90%{transform:translateY(-6px)}92%,100%{transform:none}}
.dock-chat{width:min(370px,calc(100vw - 40px));background:var(--k);color:var(--w);border:2px solid var(--g);border-radius:20px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 18px 40px rgba(11,15,20,.35)}
.dock-chat[hidden]{display:none}
.dock-chat-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dock-chat-kopf>span{display:flex;align-items:center;gap:10px}
.dock-chat-kopf svg{flex:none;width:26px;height:30px}
.dock-chat-kopf .disp{font-weight:800;font-size:16px;line-height:1.1}
.dock-chat-kopf small{font-size:13px;color:var(--t2d)}
.dock-log{max-height:min(320px,45vh);overflow-y:auto;display:flex;flex-direction:column;gap:8px;font-size:15px;line-height:1.45}
.dock-log p{margin:0;align-self:flex-start;max-width:88%;padding:10px 12px;background:var(--panel);border:1px solid var(--lined);border-radius:14px;overflow-wrap:anywhere}
.dock-log p.du{align-self:flex-end;background:var(--g);color:var(--k);border-color:var(--g)}
.dock-form{background:var(--w);border-radius:999px;padding:5px 5px 5px 18px;display:flex;align-items:center;gap:8px}
.dock-form input{flex:1 1 auto;min-width:0;min-height:44px;border:0;background:transparent;color:var(--k);font-size:16px}
.dock-form input:focus{outline:0}
.dock-form:focus-within{outline:3px solid var(--g);outline-offset:2px}
.dock-form button{flex:none;width:44px;height:44px;border-radius:999px;border:0;background:var(--g);color:var(--k);display:flex;align-items:center;justify-content:center;cursor:pointer}
.dock-chat>a{align-self:flex-start;font-size:14px;color:var(--t2d);padding:6px 0}
.no-js .dock{display:none}
@media (max-width:560px){.dock-wave{width:48px;height:52px}}

/* ---------- Popups ---------- */
.modal{position:fixed;inset:0;z-index:50;padding:24px;background:rgba(11,15,20,.78);display:none;align-items:flex-start;justify-content:center;overflow-y:auto}
.modal:target,.modal.an{display:flex}
.js .modal:target:not(.an){display:none}
.modal-box{width:100%;max-width:620px;margin:auto 0;border-radius:24px;padding:32px 36px 36px;display:flex;flex-direction:column;gap:20px;font-size:17px;line-height:1.5}
.modal-dunkel{background:var(--k);color:var(--w);border:2px solid var(--g)}
.modal-hell{background:var(--w);color:var(--k);max-width:780px;gap:24px}
.modal-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.modal-kopf h2{margin:0;font-family:var(--f-disp);text-transform:uppercase;font-weight:900;font-size:26px;line-height:1.1}
.modal-dunkel .modal-kopf h2{font-size:28px}
.modal-kopf .label{font-size:10px}
@media (max-width:560px){.modal{padding:12px}.modal-box{padding:24px 20px 28px}}
.modal-p{margin:0;color:var(--t2d)}
.modal-knoepfe{display:flex;flex-wrap:wrap;gap:12px;padding-top:4px}
.wer-byte{flex:none;display:block;width:72px;height:78px}

/* ---------- Bestellung ---------- */
.bestellung{display:flex;flex-direction:column;gap:22px}
.schritt{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.schritt .px{font-size:10px;line-height:1.6;color:var(--t2)}
.schritt h3{margin:0;font-family:var(--f-disp);text-transform:uppercase;font-weight:800;font-size:18px;line-height:1.2}
.schritt>span:last-child:not(.px){font-size:14px;color:var(--t2)}
.wahl{border:0;margin:0;padding:0;min-width:0}
.wahl legend{padding:0}
.pk-reihe{display:flex;flex-wrap:wrap;gap:12px}
.pk{flex:1 1 190px;min-width:0;position:relative;cursor:pointer;display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:16px;border:2px solid var(--line);background:var(--w);color:var(--k);font-size:15px;line-height:1.4;transition:background-color .2s,color .2s}
.pk .n{font-family:var(--f-disp);text-transform:uppercase;font-weight:800;font-size:16px;line-height:1.2}
.pk .i{font-size:14px;color:var(--t2)}
.pk .p{margin-top:8px;font-weight:700;font-size:17px}
.pk:has(input:checked){background:var(--k);color:var(--w);border-color:var(--k)}
.pk:has(input:checked) .i{color:var(--t2d)}
.pk:has(input:focus-visible),.zl:has(input:focus-visible){outline:3px solid var(--k);outline-offset:3px}
.pk input,.zl input{position:absolute;opacity:0;width:1px;height:1px}
.zl-liste{display:flex;flex-direction:column;gap:8px}
.zl{position:relative;width:100%;min-height:56px;cursor:pointer;display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:14px;border:1.5px solid var(--line);background:var(--w);color:var(--k);font-size:16px;line-height:1.4}
.zl .haken{flex:none;width:24px;height:24px;border-radius:7px;border:2px solid var(--k);background:var(--w);display:flex;align-items:center;justify-content:center;padding:0;overflow:visible}
.zl .haken svg{opacity:0}
.zl .n{flex:1 1 auto;min-width:0;font-weight:600}
.zl .p{flex:none;font-weight:700;font-size:15px;white-space:nowrap}
.zl:has(input:checked){background:#E9FBF2;border-color:var(--k)}
.zl:has(input:checked) .haken{background:var(--g)}
.zl:has(input:checked) .haken svg{opacity:1}
.zl.inklusive{cursor:default}
.preisbox{background:var(--k);color:var(--w);border-radius:18px;padding:22px 24px;display:flex;flex-direction:column;gap:10px}
.preisbox .px{font-size:10px;line-height:1.6;color:var(--g)}
.pz{display:flex;justify-content:space-between;gap:16px;font-size:15px;color:var(--t2d)}
.pz span:last-child{white-space:nowrap}
.ptotal{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px;padding-top:12px;border-top:1px solid var(--lined)}
.ptotal span:first-child{font-weight:700;font-size:16px}
.ptotal .disp{font-weight:800;font-size:26px;line-height:1.1;color:var(--g)}
.pnote{font-size:14px;color:var(--t2d)}
.no-js .preisbox{display:none}
.felder{display:flex;flex-wrap:wrap;gap:16px}
.feld{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;gap:6px}
.feld label{font-weight:600;font-size:15px}
.feld input,.feld textarea{min-height:48px;width:100%;padding:10px 14px;border:1px solid #5A6672;border-radius:12px;background:var(--w);color:var(--k);font-size:16px}
.feld textarea{min-height:120px;resize:vertical}
.feld-voll{flex-basis:100%}
.pflicht{color:var(--t2);font-weight:400}
.uploads{display:flex;flex-wrap:wrap;gap:20px 16px}
.upload{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:8px}
.upload>span:first-child{font-weight:600;font-size:15px}
.upl{position:relative;display:inline-flex;align-items:center;gap:10px;align-self:flex-start;min-height:48px;padding:12px 20px;border-radius:999px;border:1.5px solid var(--k);background:var(--w);color:var(--k);font-weight:700;font-size:15px;cursor:pointer;transition:background-color .2s}
.upl:hover{background:var(--g)}
.upl:has(input:focus-visible){outline:3px solid var(--k);outline-offset:3px}
.upl input{position:absolute;opacity:0;width:1px;height:1px}
.upload .datei{font-size:14px;color:var(--k);overflow-wrap:anywhere}
.upload .hilfe{font-size:14px;color:var(--t2)}
.honig{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.absenden{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.absenden .pill{font-size:16px;padding:18px 30px;border:1.5px solid var(--k)}
.absenden .pill:disabled{opacity:.6;cursor:wait}
.absenden>span{font-size:14px;color:var(--t2)}
.meldung{margin:0;padding:14px 16px;border-radius:12px;font-size:15px}
.meldung[hidden]{display:none}
.meldung-ok{background:var(--k);color:var(--w)}
.meldung-fehler{background:#FDECEA;color:#7A1A12;border:1.5px solid #7A1A12}

/* ---------- Unterseiten und Blog «Mampf» ---------- */
.seite{padding-top:72px;padding-bottom:96px;min-height:60vh}
.seite-kopf{display:flex;flex-direction:column;gap:14px;margin-bottom:40px;max-width:1000px}
.seite-kopf h1{margin:0;font-family:var(--f-disp);text-transform:uppercase;font-weight:900;font-size:clamp(28px,4.4vw,56px);line-height:1.06}
.inhalt{max-width:760px;font-size:18px;color:var(--t2)}
.inhalt h2,.inhalt h3{color:var(--k);font-family:var(--f-disp);text-transform:uppercase;font-weight:800;line-height:1.15}
.inhalt h2{font-size:26px;margin:48px 0 12px}.inhalt h3{font-size:19px;margin:32px 0 8px}
.inhalt a{color:var(--k)}
.inhalt img{height:auto;border-radius:18px}
.beitraege{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:24px}
.beitrag{background:var(--w);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:12px}
.beitrag h2{margin:0;font-family:var(--f-disp);text-transform:uppercase;font-weight:800;font-size:20px;line-height:1.15}
.beitrag h2 a{text-decoration:none}.beitrag h2 a:hover{text-decoration:underline}
.beitrag p{margin:0;color:var(--t2);font-size:16px}
.beitrag img{border-radius:12px;height:auto}
.leer{background:var(--w);border-radius:20px;padding:36px;max-width:640px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.leer p{margin:0;color:var(--t2)}
.blaettern{display:flex;gap:16px;margin-top:40px}
.platzhalter{background:#FFF6D6;border:2px dashed var(--k);border-radius:14px;padding:16px 18px;color:var(--k);font-weight:600}

/* ---------- Spielseite ---------- */
.spiel-seite{background:var(--k);color:var(--w);min-height:100vh}
.spiel-seite a{color:var(--g)}.spiel-seite a:hover{color:var(--w)}
.spiel{max-width:920px;margin:0 auto;padding:40px 24px 56px;display:flex;flex-direction:column;gap:22px}
.spiel h1{margin:0;font-family:var(--f-disp);text-transform:uppercase;font-weight:900;font-size:clamp(26px,5vw,48px);line-height:1.05}
.spiel-intro p{margin:0;color:var(--t2d);max-width:620px}
.spiel-intro{display:flex;flex-direction:column;gap:10px}
.spiel-hud{display:flex;flex-wrap:wrap;gap:10px 28px;font-size:11px;line-height:1.6}
.spiel-hud b{color:var(--g);font-weight:400}
.spiel-feld{position:relative;border-radius:16px}
.spiel-feld.crt-aus{animation:crt .75s ease-in both}
.spiel-feld canvas{display:block;width:100%;height:auto;border:2px solid var(--lined);border-radius:16px;background:var(--k);touch-action:none;cursor:crosshair}
.spiel-schicht{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px;text-align:center;border-radius:16px}
.spiel-schicht[hidden]{display:none}
.spiel-schicht p{margin:0}
.s-start{background:rgba(11,15,20,.72)}.s-start p{max-width:460px;font-size:18px}
.s-over{background:rgba(11,15,20,.82);gap:18px}
.s-over .gross{font-size:clamp(20px,5vw,40px);line-height:1.2}
.s-over .resultat{font-size:19px}.s-over .resultat strong{color:var(--g)}
.s-over .grund{color:var(--t2d)}
.s-aus{background:var(--k)}
.s-aus .klein{font-size:11px;line-height:1.6;color:var(--t2d)}
.s-aus>div{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.s-zu{position:absolute;top:14px;right:14px;color:var(--w)}
.spiel-knopf{min-height:56px;padding:18px 28px;background:var(--g);color:var(--k);border:0;border-radius:999px;font-size:14px;cursor:pointer;transition:transform .15s}
.spiel-knopf:hover{transform:translateY(-2px)}
.s-aus .pill{min-height:56px;padding:16px 26px;font-size:16px}
.s-aus a.pill-o{color:var(--k)}
.legende{display:flex;flex-wrap:wrap;gap:14px 36px;color:var(--t2d);font-size:15px}
.legende>span{display:flex;align-items:center;gap:12px}
.legende i{width:30px;height:24px;flex:none}
.legende .l-alt{background:#C0C0C0;border:2px solid #FFF;border-top:7px solid #000080}
.legende .l-neu{background:#FFF;border:2px solid var(--g)}
.spiel-zurueck{align-self:flex-start;padding:12px 0;font-size:15px}

/* ---------- Wartungsseite ---------- */
.wartung{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--k);color:var(--w);text-align:center}
.wartung>div{max-width:520px;display:flex;flex-direction:column;align-items:center;gap:22px}
.wartung h1{margin:0;font-family:var(--f-disp);text-transform:uppercase;font-weight:900;font-size:clamp(24px,5vw,40px);line-height:1.1}
.wartung p{margin:0;color:var(--t2d)}
.wartung form{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.wartung input{min-height:48px;padding:10px 16px;border-radius:999px;border:0;font-size:16px;min-width:0}
.wartung .fehler{color:#FFB4A8}

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .role:hover{scale:1}
  .r5:hover .mx{opacity:0}
}