/* Formelwelt (Beta-Test): Bühne mit 3D-Welt, Karte der Station, Liste. Farben nur über Variablen aus thema.css. */
:root{--fw-kopf:62px}
html,body{margin:0}
body{background:var(--seite-verlauf,var(--surface));color:var(--text);font-family:Archivo,system-ui,sans-serif}
.fw{display:block}
.fw-band{margin:0;padding:.5rem 1rem;font-size:.9rem;background:var(--blue-soft,#e8ecff);color:var(--text);text-align:center;border-bottom:1px solid var(--line)}
.fw-band b{margin-right:.4em}.fw-band a{color:inherit}
.fw-beta{display:inline-flex;align-items:center;padding:.2rem .55rem;border-radius:99px;background:var(--volt,#c4ff1a);color:#0a1540;font-weight:700;font-size:.78rem;letter-spacing:.02em;text-transform:uppercase;margin-right:.5rem;white-space:nowrap}
#fwMenueKnopf{white-space:nowrap}#fwSterne{margin-left:.35em;font-variant-numeric:tabular-nums;color:var(--akzent,#b27a00)}
.fw-buehne{position:relative;height:calc(100vh - var(--fw-kopf) - 2.4rem);height:calc(100dvh - var(--fw-kopf) - 2.4rem);min-height:420px;overflow:hidden;background:#9fcbef;touch-action:none}
#fwCanvas{width:100%;height:100%;display:block;outline:none}
#fwCanvas:focus-visible{box-shadow:inset 0 0 0 3px var(--blue)}
.fw-laden{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;background:var(--navy,#0a1540);color:#fff;z-index:5;text-align:center;padding:1rem}
.fw-laden a{color:var(--volt,#c4ff1a)}
.fw-ring{width:54px;height:54px;border-radius:50%;border:5px solid rgba(255,255,255,.18);border-top-color:var(--volt,#c4ff1a);animation:fw-dreh 1s linear infinite}
.fw-fehler .fw-ring{display:none}
@keyframes fw-dreh{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.fw-ring{animation:none}}
.fw-hilfe{position:absolute;left:12px;bottom:12px;display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-size:.8rem;color:#fff;background:rgba(10,21,64,.55);padding:.45rem .7rem;border-radius:10px;backdrop-filter:blur(6px);pointer-events:none;max-width:calc(100% - 24px)}
.fw-hilfe kbd{display:inline-block;min-width:1.3em;padding:0 .3em;margin-right:.15em;border-radius:4px;background:rgba(255,255,255,.22);font:inherit;font-weight:700;text-align:center}
.fw-nah{position:absolute;left:50%;bottom:72px;transform:translateX(-50%);z-index:3}
.fw-nah button{font:inherit;font-size:1rem;padding:.65rem 1.1rem;border-radius:99px;border:0;background:var(--navy,#0a1540);background-image:var(--glanz-knopf);color:#fff;box-shadow:var(--schatten-gross);cursor:pointer;white-space:nowrap}
.fw-taste{display:inline-block;background:var(--volt,#c4ff1a);color:#0a1540;border-radius:5px;padding:0 .4em;font-weight:800;margin-right:.3em}
.fw-stick{position:absolute;left:22px;bottom:22px;width:118px;height:118px;border-radius:50%;background:rgba(10,21,64,.28);border:2px solid rgba(255,255,255,.55);display:none;align-items:center;justify-content:center;z-index:3;touch-action:none}
.fw-stick span{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.85);box-shadow:0 2px 8px rgba(0,0,0,.25)}
@media (hover:none),(pointer:coarse){.fw-stick{display:flex}.fw-hilfe{display:none}.fw-nah{bottom:150px}}
/* Karte der Station */
.fw-karte{position:absolute;top:12px;right:12px;bottom:12px;width:min(410px,calc(100% - 24px));overflow:auto;z-index:4;background:var(--surface,#fff);background-image:var(--glanz);border:1px solid var(--kante,var(--line));border-radius:16px;box-shadow:var(--schatten-gross);padding:1rem 1.1rem 1.2rem;box-sizing:border-box;touch-action:pan-y}
.fw-karte h2{margin:.2rem 0 .3rem;font-size:1.35rem}
.fw-k-kopf{display:flex;justify-content:space-between;align-items:center}
.fw-k-ort{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.fw-zu,.fw-menue-kopf button{font:inherit;font-size:1.5rem;line-height:1;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--raised);color:var(--text);cursor:pointer}
.fw-satz{margin:.2rem 0 .8rem;color:var(--muted);line-height:1.45}
.fw-formel{font-size:1.7rem;text-align:center;padding:.6rem;border-radius:12px;background:var(--raised);margin-bottom:.8rem;font-family:"Cambria Math","STIX Two Math",Cambria,Georgia,serif}
.fw-formel sub{font-size:.6em}
.fx{display:inline-flex;align-items:center}.fx-v,.fx-ges{font-style:italic;color:var(--c,var(--text))}.fx-z{font-style:normal}.fx-o{margin:0 .22em}.fx-mal{margin:0 .12em}.fx-gleich{margin:0 .35em}
.fx-bruch{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;margin:0 .12em;font-size:.94em}.fx-zaehler{padding:0 .25em .08em}.fx-nenner{padding:.1em .25em 0;border-top:.07em solid currentColor;width:100%;text-align:center}
.fx-wurzel{display:inline-flex}.fx-radikand{border-top:.07em solid currentColor;padding:.12em .12em 0}.fx-hoch{font-size:.68em;align-self:flex-start}.fx-p{font-style:normal}
.fw-r{display:block;margin:.55rem 0}
.fw-r-k{display:flex;align-items:baseline;gap:.35rem;font-size:.92rem}
.fw-r-sym{font-family:Cambria,Georgia,serif;font-style:italic;font-weight:700;color:var(--c);font-size:1.1rem}
.fw-r output{margin-left:auto;font-weight:700;color:var(--c);font-variant-numeric:tabular-nums}
.fw-r input{width:100%;accent-color:var(--c);height:32px;margin:0}
.fw-vor{display:flex;gap:.35rem;flex-wrap:wrap}
.fw-vor button{font:inherit;font-size:.82rem;padding:.3rem .6rem;min-height:34px;border-radius:99px;border:1px solid var(--line);background:var(--raised);color:var(--text);cursor:pointer}
.fw-fest{margin:.35rem 0;font-size:.9rem;color:var(--muted)}.fw-fest small{opacity:.8}
.fw-erg{margin:.7rem 0;padding:.6rem .8rem;border-radius:12px;border-left:4px solid var(--c);background:color-mix(in srgb,var(--c) 9%,transparent);font-size:1.05rem}
.fw-erg span{font-family:Cambria,Georgia,serif;font-style:italic;color:var(--c);font-weight:700}.fw-erg b{color:var(--c);font-variant-numeric:tabular-nums}.fw-erg small{display:block;color:var(--muted);font-size:.8rem}
.fw-auf{border:1px solid var(--line);border-radius:12px;padding:.7rem .8rem;margin:.8rem 0;background:var(--raised)}
.fw-auf-kopf{display:flex;justify-content:space-between;align-items:center;font-weight:700}
.fw-sterne{display:flex;gap:.3rem}.fw-sterne button{font:inherit;font-size:.9rem;font-weight:700;border:1px solid var(--line);border-radius:99px;background:var(--raised);color:var(--muted);cursor:pointer;padding:0 .2rem;min-width:36px;min-height:36px}
.fw-sterne button.an{color:#fff;background:#2b7a3d;border-color:#2b7a3d}.fw-sterne button.an::after{content:" ✓"}.fw-sterne button.wahl{outline:2px solid var(--blue);border-radius:8px}
.fw-auf-text{margin:.4rem 0 .7rem;line-height:1.45}
.fw-los,.fw-weiter{font:inherit;font-weight:700;font-size:1rem;width:100%;min-height:46px;border:0;border-radius:12px;background-color:var(--navy,#0a1540);background-image:var(--glanz-knopf);box-shadow:var(--knopf-licht);color:#fff;cursor:pointer}
.fw-los:hover{background-color:#1a2a6a}
.fw-weiter{margin-top:.6rem;background-color:#2b7a3d}
.fw-melde:empty{display:none}.fw-melde{margin-top:.6rem;padding:.6rem .7rem;border-radius:10px;line-height:1.4;font-size:.92rem}
.fw-melde span{color:var(--muted)}.fw-melde.gut{background:color-mix(in srgb,#2b9a4a 14%,transparent)}.fw-melde.schlecht{background:color-mix(in srgb,#d0583c 13%,transparent)}.fw-melde.laeuft{background:var(--neutral-soft)}
.fw-annahme{font-size:.8rem;color:var(--muted);line-height:1.4}
.fw-mehr{font-size:.9rem}.fw-mehr a{color:var(--blau,#2855ad)}
/* Liste */
.fw-menue{border:0;border-radius:16px;padding:1rem 1.1rem;width:min(480px,calc(100% - 32px));max-height:80vh;background:var(--surface,#fff);color:var(--text);box-shadow:var(--schatten-gross)}
.fw-menue::backdrop{background:rgba(10,21,64,.45)}
.fw-menue-kopf{display:flex;justify-content:space-between;align-items:center}.fw-menue h2{margin:0}
.fw-menue p{color:var(--muted)}
.fw-liste{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.fw-liste button{display:flex;align-items:center;gap:.75rem;width:100%;text-align:left;font:inherit;color:inherit;padding:.6rem .7rem;border-radius:12px;border:1px solid var(--line);background:var(--raised);background-image:var(--glanz);cursor:pointer;min-height:54px}
.fw-liste button:hover{box-shadow:var(--schatten-hover)}
.fw-liste b,.fw-liste small{display:block}.fw-liste small{color:var(--muted)}.fw-liste em{margin-left:auto;font-style:normal;color:#e7a614;white-space:nowrap}
.fw-nr{flex:none;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;background:var(--c-neutral1,#364452)}
.fw-strom{--fw-c:var(--c-strom)}.fw-wasser{--fw-c:var(--c-volumenstrom)}.fw-gas{--fw-c:var(--c-druck)}.fw-heizung{--fw-c:var(--c-temperatur)}.fw-kfz{--fw-c:var(--c-neutral1)}
.fw-nr.fw-strom,.fw-nr.fw-wasser,.fw-nr.fw-gas,.fw-nr.fw-heizung,.fw-nr.fw-kfz{background:var(--fw-c)}
.fw-info{max-width:780px;margin:0 auto;padding:1.5rem 1rem 2rem;line-height:1.55}.fw-info a{color:var(--blau,#2855ad)}
@media (max-width:700px){
  .fw-karte{top:auto;left:8px;right:8px;bottom:8px;width:auto;max-height:52%;border-radius:16px}
  .fw-band{font-size:.8rem;padding:.4rem .7rem}
  .fw-beta{display:none}
  .fw-karte-offen .fw-stick,.fw-karte-offen .fw-nah{display:none}
}
[hidden]{display:none!important}
#fwMenueKnopf{font:inherit;white-space:nowrap;margin-left:.4rem;font-size:.9rem;font-weight:600;padding:.45rem .8rem;min-height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:#fff;cursor:pointer}
#fwMenueKnopf:hover{background:rgba(255,255,255,.16)}
#fwSterne{color:#c4ff1a}
@media (max-width:520px){.fw-wort{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}#fwMenueKnopf{padding:.4rem .5rem;margin-left:.3rem}}
/* Führung: Leiste „Als Nächstes“ und Einstieg */
.fw-fuehrung{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:.6rem;max-width:min(720px,calc(100% - 24px));padding:.5rem .55rem .5rem .8rem;border-radius:14px;background:rgba(10,21,64,.82);background-image:var(--glanz);color:#fff;box-shadow:var(--schatten-gross);backdrop-filter:blur(8px);font-size:.92rem;line-height:1.35}
.fw-fuehrung[hidden]{display:none}
.fw-f-nr{flex:none;font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#0a1540;background:#c4ff1a;border-radius:99px;padding:.18rem .55rem}
.fw-f-text{flex:1;min-width:0}.fw-f-text b{color:#e8ffb0}
.fw-fuehrung kbd{display:inline-block;min-width:1.35em;padding:0 .3em;margin:0 .08em;border-radius:5px;background:rgba(255,255,255,.18);font:inherit;font-size:.82em;text-align:center}
.fw-fuehrung button{flex:none;font:inherit;font-size:.85rem;font-weight:700;padding:.45rem .75rem;min-height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;cursor:pointer}
.fw-fuehrung button:hover{background:rgba(255,255,255,.12)}
.fw-einstieg{margin:.2rem 0 .7rem;padding:.55rem .7rem;border-radius:10px;border-left:4px solid #9bd400;background:color-mix(in srgb,#c4ff1a 18%,transparent);font-size:.92rem;line-height:1.4}
/* Hilfen in drei Stufen */
.fw-hilfen{margin-top:.7rem}
.fw-hilfen ol{list-style:none;padding:0;margin:0 0 .5rem;display:grid;gap:.45rem}
.fw-hilfen li{padding:.55rem .7rem;border-radius:10px;background:var(--neutral-soft);font-size:.92rem;line-height:1.45}
.fw-hilfen li b{color:var(--text)}
.fw-tipp{font:inherit;font-weight:700;font-size:.92rem;min-height:42px;padding:.4rem .9rem;border-radius:10px;border:1px dashed var(--line-strong,var(--line));background:transparent;color:var(--text);cursor:pointer;width:100%}
.fw-tipp::before{content:"› "}
.fw-tipp:hover{background:var(--neutral-soft)}
.fw-hilfe-angebot{background-color:#a3621c}
/* Aufgabenliste: als Nächstes */
.fw-naechster{margin:0 0 .9rem;padding:.75rem .85rem;border-radius:12px;border:2px solid #9bd400;background:color-mix(in srgb,#c4ff1a 14%,transparent);line-height:1.45}
.fw-naechster span{color:var(--muted)}.fw-naechster .fw-los{margin-top:.6rem}
.fw-liste li.fw-dran button{border-color:#9bd400;box-shadow:0 0 0 2px color-mix(in srgb,#c4ff1a 55%,transparent)}
@media (max-width:700px){.fw-fuehrung{left:8px;right:8px;transform:none;max-width:none;top:8px;font-size:.84rem;padding:.4rem .45rem .4rem .6rem;gap:.45rem}.fw-fuehrung button{padding:.35rem .55rem;min-height:36px}}
.fw-vergleich{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin:.5rem 0 .7rem;font-size:.85rem}
.fw-vergleich>span{color:var(--muted);margin-right:.15rem}
.fw-vergleich button{font:inherit;font-size:.82rem;padding:.3rem .6rem;min-height:34px;border-radius:99px;border:1px solid var(--line);background:var(--raised);color:var(--text);cursor:pointer}
.fw-vergleich button[aria-pressed="true"]{background:#2a6f8a;border-color:#2a6f8a;color:#fff}
/* Tag/Nacht der Welt: Knopf in der Welt unten rechts (unabhängig vom Hell/Dunkel der Seite) */
.fw-tag{position:absolute;right:12px;bottom:12px;z-index:3;display:inline-flex;align-items:center;gap:.3rem;font:inherit;font-size:.9rem;font-weight:600;min-height:44px;min-width:44px;justify-content:center;padding:.45rem .85rem;border-radius:99px;border:1px solid rgba(255,255,255,.4);background:rgba(10,21,64,.62);background-image:var(--glanz);color:#fff;cursor:pointer;backdrop-filter:blur(6px);box-shadow:var(--schatten)}
.fw-tag:hover{background-color:rgba(10,21,64,.8)}
.fw-tag:focus-visible{outline:none;box-shadow:var(--fokus,0 0 0 3px #c4ff1a)}
.fw-tag-sym{font-size:1.1rem;line-height:1}
.fw-karte-offen .fw-tag,body:not(.fw-bereit) .fw-tag{display:none}
@media (hover:none),(pointer:coarse){.fw-tag{right:16px;bottom:22px}}