/* Carbo Farm – Der Weg einer Tonne (tonne.html). Formensprache wie carbofarm.de (cf_b2b.py): Inter, Tokens hell/dunkel. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 500;font-display:swap;src:url(../fonts/inter-Regular.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600 700;font-display:swap;src:url(../fonts/inter-SemiBold.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800 900;font-display:swap;src:url(../fonts/inter-ExtraBold.woff2) format('woff2')}
:root{--bg:#ffffff;--surface:#ffffff;--band:#f2f3f6;--ink:#1d2b36;--ink2:#4c6071;--line:#dde3ea;--moss:#3f7d3a;--good:#2f7d4a;--bad:#b23a2a;--clay:#a24a26;--accent:#009fe3;--link:#006a9c;--btn:#0077ad;--btnink:#ffffff;--soft:#e5f5fc;--warn:#fff4d6;--warnink:#5c4300;--bar0:#8796a3;
  --peat:#3a2a1c;--water:#2f86d6;--ch4:#c8553a;--char:#262626;--plan:#7a6aa8;--shadow:0 1px 2px rgba(16,32,44,.06),0 8px 28px rgba(16,32,44,.08);
  --body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--hdr:58px;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0f1720;--surface:#16212c;--band:#131d27;--ink:#e8eef4;--ink2:#a9b8c6;--line:#2a3a4a;--moss:#86b876;--good:#6fc28a;--bad:#ef7a66;--clay:#e88a5f;--accent:#33b5ee;--link:#5cc4f2;--btn:#5cc4f2;--btnink:#08131c;--soft:#12324a;--warn:#3a2f12;--warnink:#f3dc9a;--bar0:#6b7c8c;--peat:#8a6a4c;--water:#5aa8ec;--ch4:#ef8a6a;--char:#cfcfcf;--plan:#a99be0;--shadow:0 1px 2px rgba(0,0,0,.3),0 8px 28px rgba(0,0,0,.35);color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0f1720;--surface:#16212c;--band:#131d27;--ink:#e8eef4;--ink2:#a9b8c6;--line:#2a3a4a;--moss:#86b876;--good:#6fc28a;--bad:#ef7a66;--clay:#e88a5f;--accent:#33b5ee;--link:#5cc4f2;--btn:#5cc4f2;--btnink:#08131c;--soft:#12324a;--warn:#3a2f12;--warnink:#f3dc9a;--bar0:#6b7c8c;--peat:#8a6a4c;--water:#5aa8ec;--ch4:#ef8a6a;--char:#cfcfcf;--plan:#a99be0;--shadow:0 1px 2px rgba(0,0,0,.3),0 8px 28px rgba(0,0,0,.35);color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + 12px)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--body);overflow-x:hidden}
a{color:var(--link)}
h1,h2,h3{line-height:1.15;margin:0 0 .4em;letter-spacing:-.01em}
p{margin:0 0 .8em}
button,input,select{font:inherit;color:inherit}
.skip{position:absolute;left:-999px;top:8px;background:var(--btn);color:var(--btnink);padding:10px 14px;border-radius:10px;z-index:99}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}
.lg-d,.brand .lg-d{display:none}
:root[data-theme="dark"] .brand .lg-l{display:none}:root[data-theme="dark"] .brand .lg-d{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand .lg-l{display:none}:root:not([data-theme="light"]) .brand .lg-d{display:block}}

/* Kopf */
.top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.top-in{max-width:1240px;margin:0 auto;height:var(--hdr);display:flex;align-items:center;gap:14px;padding:0 16px}
.brand{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.brand img{height:34px;width:auto;display:block}
.crumb{display:flex;gap:7px;align-items:center;font-size:13.5px;color:var(--ink2);min-width:0;white-space:nowrap;overflow:hidden}
.crumb a{color:var(--ink2);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;min-width:44px;justify-content:center}.crumb a:hover{color:var(--link);text-decoration:underline}
.crumb [aria-current]{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis}
.tools{margin-left:auto;display:flex;gap:8px;align-items:center}
.lang{display:flex;border:1px solid var(--line);border-radius:999px;padding:2px}
.lang button{border:0;background:none;min-width:44px;height:44px;border-radius:999px;font-weight:600;font-size:13.5px;cursor:pointer;color:var(--ink2)}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.themeb{width:44px;height:44px;border-radius:999px;border:1px solid var(--line);background:none;cursor:pointer;display:grid;place-items:center}
.themeb .ti{width:18px;height:18px;border-radius:50%;background:linear-gradient(90deg,var(--ink) 50%,transparent 50%);border:2px solid var(--ink)}
@media (max-width:640px){.crumb{display:none}.brand img{height:30px}}

/* Kopfbereich */
.hero{max-width:1240px;margin:0 auto;padding:30px 16px 8px}
.kick{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--link)}
.hero h1{font-size:clamp(30px,5.2vw,54px);font-weight:800;max-width:17ch;margin-top:6px}
.hero .lead{font-size:clamp(17px,2vw,20px);color:var(--ink2);max-width:62ch}
.honest{display:flex;gap:12px;align-items:flex-start;background:var(--warn);color:var(--warnink);border-radius:14px;padding:12px 14px;margin:16px 0 4px;font-size:14.5px;max-width:980px}
.honest b{font-weight:700}
.honest .dot{flex:0 0 12px;height:12px;border-radius:50%;background:var(--bad);margin-top:5px}
.legend-q{font-size:14px;color:var(--ink2);margin-top:10px}

/* Reiter = Urteil zuerst */
.tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:10px 0}
.tab{position:relative;text-align:left;border:1.5px solid var(--line);background:var(--surface);border-radius:14px;padding:10px 12px;cursor:pointer;min-height:44px;display:flex;flex-direction:column;gap:3px;box-shadow:var(--shadow);transition:border-color .2s,transform .2s}
.tab:hover{transform:translateY(-1px)}
.tab[aria-selected="true"]{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent),var(--shadow)}
.tab .tn{font-weight:800;font-size:16px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0}
.tab .tv{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:800;font-size:20px;font-variant-numeric:tabular-nums;line-height:1.1}
.tab .tv small{font-size:12px;font-weight:600;color:var(--ink2)}
.tab .ts{font-size:12px;color:var(--ink2);line-height:1.3}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;border-radius:999px;padding:2px 9px;white-space:nowrap;line-height:1.6}
.chip i{width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block}
.c-gelb{background:#fff1c2;color:#6b4c00}.c-grau{background:var(--band);color:var(--ink2)}.c-plan{background:color-mix(in srgb,var(--plan) 18%,transparent);color:var(--plan)}.c-rot{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad)}.c-gruen{background:color-mix(in srgb,var(--good) 16%,transparent);color:var(--good)}
:root[data-theme="dark"] .c-gelb{background:#4a3b0e;color:#f6d67a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .c-gelb{background:#4a3b0e;color:#f6d67a}}

/* Geschichte: Bühne + Schritte */
.story{max-width:1240px;margin:0 auto;padding:0 16px;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:28px;align-items:start}
.stage{position:sticky;top:calc(var(--hdr) + 8px);height:calc(100svh - var(--hdr) - 16px);display:flex;flex-direction:column;min-height:420px;z-index:5}
.stage3d{position:relative;flex:1;border-radius:20px;overflow:hidden;background:var(--band);box-shadow:var(--shadow);min-height:0}
.hud{position:absolute;left:12px;bottom:12px;display:flex;gap:8px;align-items:center;pointer-events:none;z-index:4}
.stage .hud{left:12px;bottom:14px}
.hud-n{background:var(--btn);color:var(--btnink);font-weight:800;font-size:12px;border-radius:999px;padding:3px 9px}
.hud-t{background:color-mix(in srgb,var(--surface) 88%,transparent);font-weight:700;font-size:13px;border-radius:8px;padding:3px 8px;box-shadow:var(--shadow)}
.stage{--hudb:14px}
.stage .hud{bottom:auto;top:calc(100% - 44px)}
.steps{position:relative;padding:8px 0 40vh 30px;padding-bottom:40svh}
.steps::before{content:"";position:absolute;left:11px;top:22px;bottom:40vh;bottom:40svh;width:3px;border-radius:3px;background:var(--line)}
.rail{position:absolute;left:11px;top:22px;width:3px;border-radius:3px;background:linear-gradient(var(--accent),var(--moss));height:calc((100% - 40vh - 22px) * var(--p,0));height:calc((100% - 40svh - 22px) * var(--p,0));transition:height .15s linear}
.step{position:relative;min-height:78svh;padding:18px 0 28px;display:flex;flex-direction:column;justify-content:center}
.step:first-child{min-height:62svh;justify-content:flex-start;padding-top:22px}
.node{position:absolute;left:-30px;top:30px;width:25px;height:25px;border-radius:50%;background:var(--surface);border:3px solid var(--line);display:grid;place-items:center;font-size:11px;font-weight:800;color:var(--ink2);transition:all .35s}
.step.on .node,.step.done .node{border-color:var(--accent);background:var(--accent);color:#fff}
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px 18px 16px;box-shadow:var(--shadow);opacity:.55;transform:translateY(10px);transition:opacity .45s,transform .45s}
.step.on .card,.step.done .card{opacity:1;transform:none}
.card h2{font-size:clamp(21px,2.4vw,27px);font-weight:800}
.card .lead{color:var(--ink2);font-size:16px}
.card .kick{display:block;margin-bottom:4px}
.big{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:6px 0 2px}
.big b{font-size:clamp(40px,6vw,58px);font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1}
.big span{font-size:18px;font-weight:700;color:var(--ink2)}
.say{font-size:15px;color:var(--ink);margin:4px 0 10px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:12px 0}
.fact{background:var(--band);border-radius:12px;padding:10px 12px}
.fact b{display:block;font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.2}
.fact span{font-size:12.5px;color:var(--ink2);line-height:1.3;display:block}
.ctrl{display:grid;gap:4px;margin:12px 0 4px;background:var(--band);border-radius:12px;padding:10px 12px}
.ctrl label{display:flex;justify-content:space-between;gap:10px;font-size:14px;font-weight:600}
.ctrl output{font-variant-numeric:tabular-nums;font-weight:800;color:var(--link)}
.ctrl small{color:var(--ink2);font-size:12.5px}
input[type=range]{width:100%;height:44px;accent-color:var(--btn);margin:0;cursor:pointer;touch-action:pan-y}
select{min-height:44px;border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:0 10px;width:100%}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:0;background:var(--btn);color:var(--btnink);font-weight:700;cursor:pointer;text-decoration:none}
.btn.ghost{background:none;color:var(--link);border:1.5px solid var(--line)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btns{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
details.more{margin-top:10px;border-top:1px solid var(--line);padding-top:6px}
details.more summary{cursor:pointer;font-weight:700;color:var(--link);min-height:44px;display:flex;align-items:center;list-style:none}
details.more summary::-webkit-details-marker{display:none}
details.more summary::before{content:"+";display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid currentColor;margin-right:8px;font-size:14px}
details.more[open] summary::before{content:"–"}
details.more p,details.more li{font-size:14.5px;color:var(--ink2)}
.muted{color:var(--ink2);font-size:13.5px}
.ann{font-size:12.5px;color:var(--ink2);font-style:italic}
.status{display:flex;gap:10px;align-items:flex-start;border-radius:12px;padding:10px 12px;background:var(--band);margin:10px 0;font-size:14.5px}
.status .dot{flex:0 0 12px;height:12px;border-radius:50%;margin-top:5px}
.dot.gelb{background:#e0a400}.dot.rot{background:var(--bad)}.dot.gruen{background:var(--good)}.dot.grau{background:var(--bar0)}.dot.plan{background:var(--plan)}

/* Grafiken */
.g{width:100%;display:block;overflow:visible}
.g text{font-family:var(--body);fill:var(--ink)}
.g .ax{stroke:var(--line);stroke-width:1}
.g .tk{font-size:11px;fill:var(--ink2)}
.wf .lb2{font-size:10.5px}
.g .lb{font-size:12px;font-weight:600}
.g .vl{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.wf .bar{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);transition:transform .8s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
.wf .bar.neg{transform-origin:50% 0}
.wf .lnk{stroke:var(--ink2);stroke-width:1;stroke-dasharray:3 3;opacity:0;transition:opacity .4s var(--d,0s)}
.wf .vl,.wf .lb2{opacity:0;transition:opacity .5s var(--d,0s)}
.on .wf .bar,.done .wf .bar,.wf.still .bar{transform:none}
.on .wf .lnk,.done .wf .lnk,.on .wf .vl,.done .wf .vl,.on .wf .lb2,.done .wf .lb2,.wf.still .lnk,.wf.still .vl,.wf.still .lb2{opacity:1}
.wf.still .bar,.wf.still .lnk,.wf.still .vl{transition:none}
.sent{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:6px}
.sent li{display:grid;grid-template-columns:96px 1fr;gap:10px;font-size:14px;align-items:baseline;border-bottom:1px dashed var(--line);padding-bottom:6px}
.sent li b{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.sent li.end{border-bottom:0;font-weight:700}
.draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s ease var(--d,0s)}
.on .draw,.done .draw{stroke-dashoffset:0}
.pop{opacity:0;transform:scale(.6);transform-box:fill-box;transform-origin:center;transition:opacity .35s var(--d,0s),transform .45s cubic-bezier(.2,1.4,.4,1) var(--d,0s)}
.on .pop,.done .pop{opacity:1;transform:none}
.fade{opacity:0;transition:opacity .6s var(--d,0s)}
.on .fade,.done .fade{opacity:1}

/* Regelwerk */
.rules{list-style:none;padding:0;margin:12px 0;display:grid;gap:0}
.rules li{display:grid;grid-template-columns:28px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);opacity:0;transform:translateX(-8px);transition:opacity .4s var(--d,0s),transform .4s var(--d,0s)}
.on .rules li,.done .rules li{opacity:1;transform:none}
.rules .ic{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:13px;color:#fff}
.ic.ok{background:var(--good)}.ic.halb{background:#d79b00}.ic.nein{background:var(--bad)}
.rules b{display:block;font-size:15px}
.rules span{font-size:13.5px;color:var(--ink2)}

/* Register-Eintrag */
.rec{border:1.5px solid var(--line);border-radius:14px;overflow:hidden;font-size:14px}
.rec-h{display:flex;justify-content:space-between;gap:10px;align-items:center;background:var(--band);padding:10px 12px;flex-wrap:wrap}
.rec-h code{font-size:14px;font-weight:800}
.rec dl{margin:0;display:grid;grid-template-columns:minmax(110px,34%) 1fr}
.rec dt,.rec dd{margin:0;padding:8px 12px;border-top:1px solid var(--line)}
.rec dt{color:var(--ink2);font-size:13px;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere}
.rec dd{font-weight:600;overflow-wrap:anywhere}
.hash{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;word-break:break-all}
.hash.bad{color:var(--bad)}.hash.ok{color:var(--good)}
.chain{list-style:none;padding:0;margin:10px 0;display:grid;gap:4px}
.chain li{display:grid;grid-template-columns:auto 1fr;gap:8px;font-size:12.5px;align-items:center}
.chain li .hash{color:var(--ink2)}
.grid-t{display:flex;flex-wrap:wrap;gap:3px;margin:10px 0}
.grid-t i{width:16px;height:16px;border-radius:3px;background:var(--accent);display:block;transition:transform .3s,background .3s,opacity .3s}
.grid-t i.p{background:repeating-linear-gradient(45deg,var(--bar0) 0 3px,transparent 3px 6px);outline:1px solid var(--bar0);outline-offset:-1px}
.grid-t i.r{background:var(--moss)}
.grid-t i.sel{transform:scale(1.35);box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ink)}
.lanes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.lane{background:var(--band);border-radius:12px;padding:10px;min-height:80px}
.lane h4{margin:0 0 6px;font-size:13px}
.msg{border-radius:12px;padding:10px 12px;font-size:14.5px;margin:8px 0;display:none}
.msg.ok{display:block;background:color-mix(in srgb,var(--good) 14%,transparent);color:var(--ink)}
.msg.no{display:block;background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--ink)}
.fly{position:fixed;width:16px;height:16px;border-radius:3px;background:var(--moss);z-index:60;pointer-events:none;transition:transform .7s cubic-bezier(.3,.7,.2,1)}
table.map{width:100%;border-collapse:collapse;font-size:13px}
table.map th,table.map td{border-top:1px solid var(--line);padding:6px 6px;text-align:left;vertical-align:top}
table.map th{color:var(--ink2);font-weight:600}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:2px;margin:6px 0}
.seg button{border:0;background:none;min-height:44px;padding:0 14px;border-radius:999px;font-weight:600;cursor:pointer;color:var(--ink2)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.hzbox{margin:12px -8px 0;min-height:200px}
.hzbox .hz{max-width:100%}

/* Extra: Tonne in drei Formen, Glossar, Quellen */
.extra{max-width:1240px;margin:0 auto;padding:10px 16px 40px;display:grid;gap:22px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:var(--shadow)}
.panel h2{font-size:clamp(22px,2.8vw,30px);font-weight:800}
.forms{display:grid;grid-template-columns:1.2fr 1fr;gap:18px;align-items:center}
.gl{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin:0;padding:0}
.gl div{background:var(--band);border-radius:12px;padding:12px}
.gl dt{font-weight:800}.gl dd{margin:4px 0 0;color:var(--ink2);font-size:14.5px}
.src{font-size:14px;color:var(--ink2);padding-left:20px}
.src li{margin:4px 0}
.foot{border-top:1px solid var(--line);padding:20px 16px 40px;text-align:center;font-size:13.5px;color:var(--ink2)}
.foot a{color:var(--ink2)}
.nojs{padding:20px}

/* Handy: Bühne oben fest, Schritte darunter */
@media (max-width:900px){
  .story{grid-template-columns:minmax(0,1fr);gap:0;padding:0}
  .story>*{min-width:0}
  .stage{top:var(--hdr);height:auto;min-height:0;background:var(--bg);padding:0 0 6px;box-shadow:0 8px 14px -12px rgba(0,0,0,.35)}
  .tabs{padding:8px 12px;gap:6px}
  .tab{padding:7px 8px;border-radius:12px;gap:1px}
  .tab .tn{font-size:13.5px}.tab .tv{font-size:15px}.tab .ts,.tab .chip{display:none}
  .stage3d{flex:none;height:36svh;min-height:220px;border-radius:0;box-shadow:none}
  .stage .hud{top:auto;bottom:10px}
  .stage .fl3d-badge{bottom:auto;top:8px;font-size:10px}
  .steps{padding:4px 12px 50vh 40px;padding-bottom:50svh}
  .steps::before,.rail{left:20px}
  .node{left:-32px}
  .step{min-height:64svh;padding:16px 0}
  .step:first-child{min-height:50svh}
  .card{padding:16px 14px}
  .forms{grid-template-columns:1fr}
  .sent li{grid-template-columns:84px 1fr}
}
@media (max-width:420px){.tabs{padding:6px 8px}.tab .tv small{display:none}}
/* hy 29.10.2026 – Handy-Standard (design/HANDY_STANDARD.md): hochkant klebt nur der schmale Kopf (52 px) und eine kompakte 3D-Bühne (30 svh);
   die Reiter scrollen mit. Quer: Kopf klebt nicht, 3D links klebend in voller Höhe, Schritte rechts. Safe-Area links/rechts/unten. */
.top-in{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
.foot{padding-bottom:calc(40px + env(safe-area-inset-bottom))}
@media (max-width:900px) and (orientation:portrait),(max-width:700px){
  :root{--hdr:52px;--t3h:max(150px,30vh)}
  @supports (height:100svh){:root{--t3h:max(150px,30svh)}}
  .brand img{height:28px}
  .stage{display:contents}
  .tabs{position:relative;z-index:6;background:var(--bg);padding:8px 12px 6px}
  .tab{min-height:48px;justify-content:center}
  .tab .tn{font-size:15px}.tab .tv{font-size:15px}
  .stage3d{position:sticky;top:var(--hdr);z-index:5;height:var(--t3h);min-height:0;box-shadow:0 8px 14px -12px rgba(0,0,0,.35)}
  .hud,.stage .hud{position:sticky;left:auto;bottom:auto;top:calc(var(--hdr) + var(--t3h) - 38px);z-index:6;margin:-38px 0 8px 10px;justify-self:start;height:30px}
  .stage .fl3d-badge,.stage3d .fl3d-badge{font-size:12px}
  .hud-n,.hud-t{font-size:12px}
}
@media (orientation:landscape) and (max-height:500px){
  :root{--hdr:48px}
  .top{position:relative}
  .story{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;padding:0 max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left))}
  .stage{display:flex;position:sticky;top:0;height:100vh;height:100svh;min-height:0;padding:6px 0;box-shadow:none;background:none}
  .tabs{padding:0 0 6px;gap:6px}
  .tab{padding:4px 8px;min-height:44px}
  .tab .tv,.tab .ts,.tab .chip{display:none}
  .stage3d{flex:1;height:auto;min-height:0;border-radius:14px}
  .steps{padding:4px 4px 50vh 34px;padding-bottom:50svh}
  .step{min-height:80svh}
  .step:first-child{min-height:60svh}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}.card{opacity:1;transform:none}}
@media print{.stage,.top,.tools{display:none}.story{display:block}.card{opacity:1;transform:none;box-shadow:none}}
/* rs 30.10.2026: Sorte, Preis, Aufteilung je Reiter */
.geld{border:1px solid var(--line,#d0d4da);border-radius:14px;padding:10px 12px;margin:10px 0;font-size:15px;max-width:100%}
.geld p{margin:4px 0}.geld .sorte{display:inline-block;font-weight:800;padding:1px 9px;border-radius:999px;border:1px solid var(--line,#d0d4da);white-space:nowrap}