/* Whiteboard-Reise – Gestaltung. Farben und Schrift aus ../../DESIGN.md (Tokens wie gaido.css).
   Alles für die Bühne hängt an .wb (die Klasse setzt das Modul whiteboard-renderer.js an seinen Container), damit die Datei
   auch in index.html eingebunden werden kann, ohne die Seite zu berühren. Regeln nur für die Demo-Seite whiteboard.html
   hängen an body.wb-seite. Die Tafel bleibt immer weiß, auch im Dunkelmodus (Gegenstand der Bildwelt, kein Seitenhintergrund).
   Untertitel unten; liegt ein Fokus darunter, setzt das Modul die Klasse .oben. */
.wb{
  --wb-tinte:#1F2A2E;--wb-tinte-2:#4F5B5F;--wb-tint:#E6EFEC;--wb-fokus:#2B5FB0;--wb-touch:44px;
  --wb-font:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --tafel:#FFFFFF;
  position:fixed;inset:0;overflow:hidden;background:var(--tafel);color:var(--wb-tinte);color-scheme:light;font:400 1.0625rem/1.6 var(--wb-font)}
.wb *,.wb *::before,.wb *::after{box-sizing:border-box}
.wb p{margin:0}
.wb .wb-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.wb .wb-svg .strich{fill:none;stroke-linecap:round;stroke-linejoin:round}
.wb .wb-svg text{font-family:Caveat,"Comic Sans MS",cursive}
.wb .hand{pointer-events:none;transition:opacity .25s ease}

/* Übergangs-Ebenen */
.wb .wb-nacht{position:absolute;inset:0;background:#1B2A4A;mix-blend-mode:multiply;opacity:0;pointer-events:none}
.wb .wb-blitz{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.wb .wb-schwamm{position:absolute;top:-10%;bottom:-10%;left:-20%;width:140%;display:none;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0,#fff 14%,#fff 86%,rgba(255,255,255,0) 100%)}
.wb .wb-schwamm::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(31,42,46,.05) 0 3px,transparent 3px 22px)}
.wb .wb-schwamm-bild{position:absolute;right:17%;top:50%;width:min(22vw,200px);transform:translateY(-50%) rotate(-8deg)}

/* Zähler oben links, Steuerung oben rechts */
.wb .wb-zaehler{position:absolute;top:14px;left:max(16px,2vw);padding:8px 14px;border-radius:999px;background:rgba(31,42,46,.78);color:#fff;font:700 .9375rem/1.4 var(--wb-font)}
.wb .wb-zaehler:empty{display:none}
.wb .wb-steuerung{position:absolute;top:14px;right:max(16px,2vw);display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.wb .wb-steuerung button{min-height:var(--wb-touch);padding:0 16px;border-radius:999px;border:2px solid var(--wb-tinte);background:#fff;color:var(--wb-tinte);font:700 .9375rem/1 var(--wb-font);cursor:pointer}
.wb .wb-steuerung button:hover{background:var(--wb-tint)}
.wb .wb-steuerung button[aria-pressed=true]{background:var(--wb-tinte);color:#fff}
.wb button:focus-visible{outline:3px solid var(--wb-fokus);outline-offset:2px}

/* Untertitel: unten mittig; .oben, wenn der Fokus unten liegt */
.wb .wb-untertitel{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);width:min(60rem,calc(100vw - 32px));padding:12px 22px;border-radius:12px;
  background:rgba(31,42,46,.9);color:#fff;text-align:center;font:700 clamp(1.0625rem,.95rem + .5vw,1.3125rem)/1.45 var(--wb-font);box-shadow:0 8px 30px rgba(0,0,0,.18)}
.wb .wb-untertitel.oben{bottom:auto;top:72px}
.wb .wb-untertitel[hidden]{display:none}

/* GAIDOs Auge auf der Bühne (nur in index.html eingesetzt) */
.wb .wb-auge{position:absolute;left:max(16px,2vw);bottom:24px;z-index:2;filter:drop-shadow(0 4px 12px rgba(31,42,46,.25))}

@media (max-width:640px){.wb .wb-untertitel.oben{top:120px}}
@media (prefers-reduced-motion:reduce){.wb .hand{display:none}}

/* ---------- nur Demo-Seite whiteboard.html ---------- */
body.wb-seite{
  --surface-base:#F7F5F0;--surface-raised:#FFFFFF;--surface-tint:#E6EFEC;
  --ink-primary:#1F2A2E;--ink-secondary:#4F5B5F;--border-hairline:#DDD8CE;--border-control:#7A7364;
  --action:#1D5C55;--on-action:#FFFFFF;--focus-ring:#2B5FB0;
  --s2:8px;--s3:12px;--s4:16px;--s5:24px;--touch-min:44px;--r-sm:6px;--r-full:9999px;
  --font:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  margin:0;height:100vh;background:#fff;color:var(--ink-primary);font:400 1.0625rem/1.6 var(--font);overflow:hidden;color-scheme:light}
body.wb-seite *,body.wb-seite *::before,body.wb-seite *::after{box-sizing:border-box}
body.wb-seite p{margin:0}
.wb-seite .wb-start{position:fixed;inset:0;z-index:5;display:grid;place-content:center;justify-items:center;gap:14px;padding:16px;text-align:center;background:rgba(255,255,255,.86)}
.wb-seite .wb-start[hidden]{display:none}
.wb-seite .wb-start-ueber{font:600 clamp(2rem,1.4rem + 2.6vw,3.25rem)/1.1 Caveat,cursive;color:var(--ink-primary)}
.wb-seite .wb-start-hinweis{color:var(--ink-secondary);font-size:.9375rem}
.wb-seite .magic{min-height:52px;padding:var(--s2) var(--s5);border:0;border-radius:var(--r-full);cursor:pointer;font:700 1.125rem/1.2 var(--font);color:#1F2A2E;
  background:linear-gradient(110deg,#f3d27a,#fff3c4 40%,#c9b6f5 70%,#f3d27a);background-size:250% 100%;box-shadow:0 4px 14px rgba(124,58,237,.25)}
.wb-seite .magic:disabled{opacity:.55;cursor:wait}
@media (prefers-reduced-motion:no-preference){.wb-seite .magic:not(:disabled){animation:wb-schimmer 3s linear infinite}}
@keyframes wb-schimmer{to{background-position:-250% 0}}
.wb-seite .wb-kontakt{position:fixed;z-index:6;top:72px;right:max(16px,5vw);width:min(30rem,calc(100vw - 32px));max-height:calc(100vh - 92px);overflow:auto;transition:transform .6s ease,opacity .6s ease}
.wb-seite .wb-kontakt[hidden]{display:none}
.wb-seite .wb-kontakt.klein{transform:translateY(calc(100vh - 260px)) scale(.8);transform-origin:100% 0;opacity:.96}
.wb-seite .widget{border:1px solid var(--border-hairline);border-left:4px solid #d9b44a;border-radius:10px;padding:var(--s4);background:var(--surface-raised);display:grid;gap:10px;box-shadow:0 20px 60px rgba(31,42,46,.22)}
.wb-seite .widget-kopf{font-weight:700}
.wb-seite .meta{font-size:.9375rem;line-height:1.5;color:var(--ink-secondary)}
.wb-seite .wb-karte .frage{font-weight:700;font-size:1.125rem}
.wb-seite .kontakt .wahl{display:flex;flex-wrap:wrap;gap:var(--s2)}
.wb-seite .wahl-knopf{min-height:var(--touch-min);padding:var(--s2) var(--s3);border:2px solid var(--border-control);border-radius:10px;background:var(--surface-raised);color:var(--ink-primary);font:700 .9375rem/1.25 var(--font);cursor:pointer;text-align:left;position:relative}
.wb-seite .wahl-knopf.person{flex:1 1 9rem;display:grid;gap:2px}
.wb-seite .wahl-knopf small{font-weight:400;font-size:.8125rem;color:var(--ink-secondary)}
.wb-seite .wahl-knopf em{position:absolute;top:-10px;right:8px;font:700 .6875rem/1 var(--font);font-style:normal;background:#d9b44a;color:#1F2A2E;padding:3px 6px;border-radius:999px}
.wb-seite .wahl-knopf.empfohlen{box-shadow:0 0 0 3px rgba(217,180,74,.35)}
.wb-seite .wahl-knopf[aria-pressed=true]{border-color:var(--action);background:var(--surface-tint)}
.wb-seite .kontakt .feld{display:grid;gap:4px;font-size:.875rem;font-weight:700}
.wb-seite .kontakt .feld input{min-height:var(--touch-min);padding:var(--s2) var(--s3);font:inherit;font-weight:400;color:var(--ink-primary);background:var(--surface-raised);border:1px solid var(--border-control);border-radius:var(--r-sm)}
.wb-seite .kontakt .fehler:empty{display:none}
.wb-seite .kontakt .bestaetigung{font-weight:700;font-size:1.0625rem}
.wb-seite .widget .magic{justify-self:start}
.wb-seite .chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.wb-seite .chip{min-height:var(--touch-min);padding:var(--s2) var(--s4);border:2px solid var(--action);border-radius:var(--r-full);background:var(--surface-raised);color:var(--action);font:700 .9375rem/1.2 var(--font);cursor:pointer}
@media (max-width:640px){.wb-seite .wb-kontakt{top:auto;bottom:16px;right:16px;max-height:70vh}}