:root{--bg:#fcf9f3;--panel:#fff;--fg:#1f3d2b;--muted:#606060;--line:#e3dcc8;--accent:#1f3d2b;--accent-ink:#fcf9f3;--accent-soft:#f2e9c8;--c02:#2f8a45;--c03:#c23a6b;--c04:#d97a12;--c05:#6a52c9;--c06:#1d86a8;--scene-bg:#eceee6;--ground:#b39883;--chip:#f4efe2;--f-display:"Bricolage","Poppins",system-ui,sans-serif;--f-body:"Poppins",system-ui,sans-serif;--f-mono:"Poppins",system-ui,sans-serif}html,body{height:100%}body{background:var(--bg);color:var(--fg);font-family:var(--f-body);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));box-sizing:border-box;padding-block:12px;font-size:14px;line-height:1.45;overflow:hidden}*,:before,:after{box-sizing:border-box}.app{grid-template-columns:330px minmax(0,1fr);gap:12px;height:100%;display:grid}aside{background:var(--panel);border:1px solid var(--line);border-radius:10px;flex-direction:column;grid-area:1/1;gap:18px;min-width:0;padding:18px 16px;display:flex;overflow-y:auto}aside>*{flex-shrink:0}.stage{border:1px solid var(--line);background:var(--scene-bg);border-radius:10px;grid-area:1/2;min-width:0;position:relative;overflow:hidden}#c{touch-action:none;cursor:grab;width:100%;height:100%;display:block}#c:active{cursor:grabbing}h1{font-family:var(--f-display);text-wrap:balance;letter-spacing:-.01em;margin:0;font-size:22px;font-weight:700;line-height:1.1}.sub{color:var(--muted);margin:6px 0 0;font-size:13px}.eyebrow{font-family:var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;font-size:11px}.views{grid-template-columns:1fr 1fr;gap:6px;display:grid}button.v{font:500 13px/1.2 var(--f-body);color:var(--fg);background:var(--chip);text-align:left;cursor:pointer;border:1px solid #0000;border-radius:7px;align-items:center;gap:8px;min-width:0;padding:9px 10px;display:flex}button.v:hover{border-color:var(--line)}button.v[aria-pressed=true]{background:var(--accent);color:var(--accent-ink)}button.v .dot{width:10px;height:10px;box-shadow:0 0 0 2px var(--panel);border-radius:50%;flex:none}button.v.wide{grid-column:1/-1}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.toggles{flex-direction:column;gap:2px;display:flex}label.t{cursor:pointer;align-items:center;gap:10px;padding:6px 2px;font-size:13.5px;display:flex;position:relative}label.t input{opacity:0;width:1px;height:1px;position:absolute}label.t span.sw{background:var(--line);border-radius:9px;flex:none;width:30px;height:18px;transition:background .15s;position:relative}label.t span.sw:after{content:"";background:var(--panel);border-radius:50%;width:14px;height:14px;transition:transform .15s;position:absolute;top:2px;left:2px}label.t input:checked+span.sw{background:var(--accent)}label.t input:checked+span.sw:after{transform:translate(12px)}label.t input:focus-visible+span.sw{outline:2px solid var(--accent);outline-offset:2px}.info{border-top:1px solid var(--line);min-height:120px;padding-top:16px}.info h2{font-family:var(--f-display);text-wrap:balance;margin:0 0 2px;font-size:17px;font-weight:600}.info .kind{font-family:var(--f-mono);color:var(--accent);text-transform:uppercase;letter-spacing:.06em;font-size:11px}.info dl{grid-template-columns:auto minmax(0,1fr);gap:4px 12px;margin:10px 0 0;font-size:13px;display:grid}.info dt{color:var(--muted)}.info dd{font-variant-numeric:tabular-nums;margin:0}.info p{color:var(--muted);margin:10px 0 0;font-size:13px}.info ol{flex-direction:column;gap:3px;margin:10px 0 0;padding-left:22px;font-size:13px;display:flex}.info ol li::marker{font-family:var(--f-mono);color:var(--muted);font-size:12px}.note{color:var(--muted);border-top:1px solid var(--line);margin:0;padding-top:12px;font-size:12px}.legend{color:var(--muted);flex-wrap:wrap;gap:6px 12px;font-size:12px;display:flex}.legend i{vertical-align:-1px;border-radius:2px;width:10px;height:10px;margin-right:5px;display:inline-block}.hint{color:var(--muted);background:var(--panel);border:1px solid var(--line);pointer-events:none;border-radius:6px;max-width:calc(100% - 24px);padding:6px 9px;font-size:12px;position:absolute;bottom:12px;left:12px}.labels{pointer-events:none;position:absolute;inset:0;overflow:hidden}.labels [hidden]{display:none!important}.lbl{white-space:nowrap;background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:5px;padding:3px 7px;font-size:12px;font-weight:600;position:absolute;transform:translate(-50%,-100%);box-shadow:0 1px 3px #0000001f}.step{white-space:nowrap;align-items:center;gap:3px;font-size:12px;font-weight:600;display:flex;position:absolute;transform:translate(-50%,-50%)}.step b{background:var(--sc);color:#fff;min-width:22px;height:22px;font-family:var(--f-mono);border-radius:11px;place-items:center;padding:0 4px;font-size:12px;display:grid}.step span{background:var(--panel);color:var(--fg);border:1px solid var(--line);border-left:3px solid var(--sc);border-radius:4px;margin-left:3px;padding:1px 6px}@media (width<=760px){body{padding-block:8px}.app{grid-template-rows:56% minmax(0,1fr);grid-template-columns:minmax(0,1fr);gap:8px}.stage{grid-area:1/1}aside{grid-area:2/1;padding:14px}h1{font-size:19px}.hint{display:none}}@media (prefers-reduced-motion:reduce){label.t span.sw,label.t span.sw:after{transition:none}}body{-webkit-font-smoothing:antialiased;flex-direction:column;gap:12px;display:flex}.app{flex:1;height:auto;min-height:0}.seitenkopf{flex:none;justify-content:space-between;align-items:center;gap:16px;min-height:52px;display:flex}.seitenkopf .logo{color:#353635;width:112px;display:block}.seitenkopf .logo svg{width:100%;height:auto;display:block}.zurueck{font:600 14px/1.2 var(--f-body);color:var(--accent);border:1px solid var(--line);background:var(--panel);border-radius:10px;align-items:center;gap:8px;padding:12px 16px;text-decoration:none;transition:background .3s,border-color .3s;display:inline-flex}.zurueck:hover{background:#fede6c;border-color:#fede6c}.eyebrow{font:500 13px/1.4 var(--f-body);letter-spacing:0;text-transform:none;color:#2e5a40}.info .kind{font:500 12px/1.4 var(--f-body);letter-spacing:0;text-transform:none;color:#2e5a40}h1{font-family:var(--f-display);font-weight:700}.step b{font-family:var(--f-body)}button.v[aria-pressed=true] .dot{box-shadow:0 0 0 2px var(--accent-ink)}@media (width<=760px){.seitenkopf .logo{width:96px}.zurueck{padding:10px 12px;font-size:13px}}html.einbettung body{background:0 0;gap:0;padding:0}html.einbettung .seitenkopf,html.einbettung aside,html.einbettung .hint,html.einbettung .note,html.einbettung .legend{display:none!important}html.einbettung .app{height:100vh;display:block}html.einbettung .stage{background:0 0;border:0;border-radius:0;height:100%}