/* Schriften liegen lokal (SIL Open Font License 1.1, siehe assets/fonts/) */
@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/anton-400.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/poppins-400.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/poppins-600.woff2") format("woff2")}

/* ===== Beiltro 3D-Buch ===== */
/* ===== STELLSCHRAUBE: Farben (Hintergrund, UI) ===== */
:root{
  --bg-hi:#f1ede8; --bg-lo:#cfc6bd; --ink:#2a2224; --muted:#6d6163;
  --accent:#7a101c; --on-accent:#fff; --gold:#b98a24; --chip:rgba(255,255,255,.62); --chip-line:rgba(42,34,36,.14);
  --shadow:.30;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg-hi:#2a2426; --bg-lo:#0f0c0d; --ink:#f1e9dc; --muted:#a8999b;
    --accent:#c23a4c; --on-accent:#fff; --gold:#d4a437; --chip:rgba(30,25,27,.62); --chip-line:rgba(241,233,220,.16);
    --shadow:.62; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg-hi:#2a2426; --bg-lo:#0f0c0d; --ink:#f1e9dc; --muted:#a8999b;
  --accent:#c23a4c; --on-accent:#fff; --gold:#d4a437; --chip:rgba(30,25,27,.62); --chip-line:rgba(241,233,220,.16);
  --shadow:.62; color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body.viewer{overflow:hidden}
body{margin:0;color:var(--ink);font:400 14px/1.4 Poppins,system-ui,sans-serif;
  background:radial-gradient(120% 80% at 50% 38%, var(--bg-hi) 0%, var(--bg-lo) 100%) var(--bg-lo)}
#stage{position:fixed;inset:0}
#stage canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
#stage canvas:active{cursor:grabbing}
header{position:fixed;left:0;right:0;top:0;padding:calc(env(safe-area-inset-top,0px) + 18px) 20px 0;pointer-events:none}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
h1{margin:2px 0 4px;font:400 clamp(26px,7vw,40px)/1 Anton,Impact,"Arial Narrow",sans-serif;letter-spacing:.01em;text-wrap:balance}
h1 span{color:var(--gold)}
.spec{margin:0;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.bar{position:fixed;left:0;right:0;bottom:0;padding:0 16px calc(env(safe-area-inset-bottom,0px) + 16px);
  display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none}
.hint{font-size:12px;color:var(--muted);text-align:center;transition:opacity .6s}
.hint.off{opacity:0}
.controls{pointer-events:auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;padding:4px;border-radius:999px;
  background:var(--chip);border:1px solid var(--chip-line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.controls button{font:600 13px/1 Poppins,system-ui,sans-serif;color:var(--ink);background:none;border:0;border-radius:999px;
  padding:10px 14px;cursor:pointer;min-height:36px}
.controls button:hover:not(:disabled){background:var(--chip-line)}
.controls button:focus-visible,.primary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.controls button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.controls button:disabled{opacity:.35;cursor:default}
.controls .arrow{font-size:18px;padding:8px 16px}
.page-label{min-width:9.5em;text-align:center;font-weight:600;font-size:13px;font-variant-numeric:tabular-nums}
.primary{pointer-events:auto;font:600 14px/1 Poppins,system-ui,sans-serif;color:var(--on-accent);background:var(--accent);
  border:0;border-radius:999px;padding:12px 22px;cursor:pointer;box-shadow:0 6px 18px -8px rgba(0,0,0,.45)}
.primary.quiet{background:var(--chip);color:var(--ink);border:1px solid var(--chip-line);box-shadow:none;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
[hidden]{display:none!important}
.nogl{position:fixed;inset:0;display:grid;place-items:center;padding-inline:24px;text-align:center;color:var(--muted)}
@media (max-height:520px){ .eyebrow,.spec{display:none} h1{font-size:22px} .bar{gap:6px} .hint{display:none} }