:root{--bg:#f7f9fa;--surf:#fff;--fg:#141413;--fg-2:#2a2f33;--muted:#6b7268;--line:#dfe6ea;--line-2:#c9d4da;--accent:#b07d1c;--accent-ink:#a6761a;--signal:#e6a83c;--cool:#7f9aa8;--focus:#141413;--mm-fine:#dfe6ea;--mm-mid:#c9d4da;--mm-bold:#a7c0cc;--cap-fill:#fff;--cap-hatch:#2a2f33;--display:"Oswald", "Arial Narrow", sans-serif;--mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;--sans:"IBM Plex Sans", system-ui, sans-serif;--ease:cubic-bezier(.2, .7, .2, 1);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}html,body{margin:0}body{background:var(--bg);color:var(--fg);font:15px/1.6 var(--sans)}*{box-sizing:border-box}.stage{z-index:0;position:fixed;inset:0}main{z-index:1;position:relative}.kopf{z-index:3;padding-top:calc(env(safe-area-inset-top,0px) + 20px);padding-left:max(24px, env(safe-area-inset-left,0px));padding-right:max(24px, env(safe-area-inset-right,0px));pointer-events:none;justify-content:space-between;align-items:center;gap:12px;display:flex;position:fixed;top:0;left:0;right:0}.lockup{color:var(--fg-2);width:auto;display:block}.kopf-l{align-items:center;gap:18px;display:flex}.zurueck{pointer-events:auto;font:500 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-decoration:none}.zurueck:hover,.zurueck:focus-visible{color:var(--fg)}.kennung{font:500 10.5px/1.4 var(--mono);letter-spacing:.2em;color:var(--muted)}.step{min-height:100vh;padding-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,0px));align-items:center;padding-block:12vh;display:flex}.card{background:color-mix(in srgb, var(--surf) 92%, transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--line-2);opacity:.55;width:min(400px,100%);transition:opacity .3s var(--ease), border-color .3s var(--ease);border-radius:0;flex-direction:column;gap:10px;margin-left:5vw;padding:24px;display:flex}.card.on{opacity:1;border-color:var(--fg-2)}.kicker{font:500 11px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--accent-ink)}.kicker:before{content:"// "}h1,h2,.mtitle{font-family:var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2);text-wrap:balance;margin:0;font-weight:500;line-height:1.1}h1{font-size:clamp(36px,4.4vw,56px)}h2{font-size:clamp(26px,2.8vw,36px)}.card p,.mcard p{max-width:60ch;margin:0}.hint{font:500 11px/1.4 var(--mono);letter-spacing:.18em;color:var(--muted);text-transform:uppercase}.hint:before{content:"// "}.rail{right:max(24px, env(safe-area-inset-right,0px));z-index:2;flex-direction:column;gap:2px;display:flex;position:fixed;top:50%;transform:translateY(-50%)}.rail button{cursor:pointer;min-height:34px;color:var(--muted);font:500 11.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;transition:color .15s var(--ease);background:0 0;border:0;justify-content:flex-end;align-items:center;gap:10px;padding:0 8px;display:flex}.rail button .n{font-variant-numeric:tabular-nums}.rail button:after{content:"";background:var(--line-2);width:14px;height:1px;transition:width .15s var(--ease), background .15s var(--ease)}.rail button:hover,.rail button.on{color:var(--fg)}.rail button.on:after{background:var(--accent);width:28px}.rail button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.labels{pointer-events:none;position:absolute;inset:0;overflow:hidden}.tag{white-space:nowrap;font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg);background:var(--surf);border:1px solid var(--line-2);transition:color .15s var(--ease), border-color .15s var(--ease);align-items:center;gap:6px;padding:5px 8px;display:flex;position:absolute;top:0;left:0}.tag:before{content:"";background:var(--fg-2);width:10px;height:1px;position:absolute;top:50%;left:-10px}.tag .num{color:var(--accent-ink);font-weight:600}.tag.hl{border-color:var(--signal)}.dim{white-space:nowrap;font:500 13px/1 var(--mono);letter-spacing:.06em;color:var(--muted);background:var(--bg);padding:2px 5px;position:absolute;top:0;left:0}.eck{border-right:1.5px solid var(--signal);border-bottom:1.5px solid var(--signal);pointer-events:none;width:22px;height:22px;position:absolute}.eck-fix{z-index:2;right:max(20px, env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 20px);position:fixed}.cam{z-index:3;left:max(24px, env(safe-area-inset-left,0px));top:calc(env(safe-area-inset-top,0px) + 60px);flex-wrap:wrap;align-items:center;gap:4px;display:flex;position:fixed}.cam-l{font:500 11px/1.4 var(--mono);letter-spacing:.18em;color:var(--accent-ink);text-transform:uppercase;margin-right:6px}.cam button{border:1px solid var(--line-2);background:var(--surf);min-height:34px;color:var(--fg);font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:border-color .15s var(--ease), background .15s var(--ease);border-radius:2px;padding:0 12px}.cam button:hover{border-color:var(--fg-2)}.cam button.on{border-color:var(--fg-2);background:var(--fg-2);color:var(--surf)}.cam button.tour.on{background:var(--signal);border-color:var(--signal);color:var(--fg)}.cam button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.mcard{display:none}@media (width<=719px){.kopf{padding-top:calc(env(safe-area-inset-top,0px) + 14px)}.step{padding-block:0}.step .card{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:0;padding:0;position:absolute;overflow:hidden}.rail,.eck-fix,.kennung,.cam-l{display:none}.cam{left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 52px);justify-content:center;padding-inline:16px}.cam button{min-height:32px;padding:0 9px;font-size:10.5px}.mcard{z-index:2;padding-top:18px;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 22px);padding-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,0px));background:color-mix(in srgb, var(--surf) 94%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--line-2);flex-direction:column;gap:8px;min-height:200px;display:flex;position:fixed;bottom:0;left:0;right:0}.mtitle{font-size:26px}.mcard .eck{right:max(14px, env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 14px)}}@media (prefers-reduced-motion:reduce){.card,.rail button,.rail button:after,.tag{transition:none}}