/* buehne.css — 16:9-Bühne für Geometrie-Erklärvideos im Stil der AB-Vorlage (header/head2026.tex) */
  :root{
    --pult:#161b22; --pult-hell:#232b35; --pult-linie:#333d4a; --pult-text:#dbe3ec; --pult-grau:#8b98a8;
    /* Papier wie die AB-Vorlage (header/head2026.tex: papercream, gridline, inkdark) */
    --papier:#FAF5E6; --raster:#D5D3C6; --tinte:#2B2A26; --grau:#8A8780; --braun:#8B5A2B; --akzent:#e0007a;
    --text:"Inter 18pt",Inter,sans-serif; --script:Allura,cursive; --bar:"Bebas Neue",sans-serif;
    --mathe:"Latin Modern Roman","CMU Serif",Georgia,serif;
  }
  *{box-sizing:border-box}
  html,body{margin:0;height:100%}
  /* neutrales Mittelgrau wie im PDF-Betrachter: auf Schwarz wirkt das Creme fast weiß */
  body{background:#6e6e6e;color:var(--pult-text);
       font:15px/1.5 ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif;
       display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px}

  /* ---------- Bühne: genau 16:9, alles skaliert mit (cqw) ---------- */
  .buehne{width:min(100%, calc((100vh - 110px) * 16 / 9));aspect-ratio:16/9;
          background:var(--papier);color:var(--tinte);container-type:inline-size;
          position:relative;overflow:hidden;box-shadow:0 4px 18px rgba(0,0,0,.35)}
  /* Raster im inneren Rahmen: cqw im Container selbst würde sich aufs Fenster beziehen */
  .rahmen{display:grid;grid-template-rows:9.4cqw calc(100cqw / 2.5) 1fr;height:100%;font-family:var(--text)}
  .buehne::backdrop{background:#6e6e6e}
  .buehne:fullscreen{width:min(100vw, 100vh * 16 / 9);height:auto;margin:auto}
  /* Kopf wie \headline in head2026.tex: Allura-Script über blassen Bebas-Versalien,
     gesperrter Bebas-Untertitel in softgray, Trennlinie */
  .kopf{padding:1.1cqw 3.33cqw 0;display:flex;flex-direction:column}
  /* Größen wie im AB: Allura 58 pt, Bebas 56 pt mit LetterSpace 18, Bebas 0,4 cm nach rechts,
     Script 0,3 cm höher */
  .headline{position:relative;height:5cqw;margin-right:-3.33cqw}
  .headline .titel{position:absolute;left:0;bottom:.75cqw;font-family:var(--script);font-size:4.5cqw;
        line-height:1;color:var(--tinte);white-space:nowrap}
  .headline .schatten{position:absolute;left:1cqw;bottom:-.6cqw;font-family:var(--bar);font-size:5.07cqw;
        letter-spacing:.18em;line-height:1;color:var(--tinte);opacity:.10;white-space:nowrap}
  .unterzeile{display:flex;align-items:baseline;margin:.35cqw 0 0 .35cqw;padding-bottom:.45cqw;
        border-bottom:.06cqw solid rgba(138,135,128,.6);font-family:var(--bar);font-size:1.2cqw;
        letter-spacing:.18em;color:var(--grau)}
  .unterzeile .nr{margin-left:auto;letter-spacing:.08em}
  #tafel{min-height:0;overflow:hidden;--gd-dimm:.35;--gd-schrift:var(--text);
         --gd-papier:var(--papier);--gd-raster:var(--raster);--gd-tinte:var(--tinte);--gd-stift:var(--tinte)}
  #tafel .karo{stroke:var(--raster);fill:none}
  #tafel .gd-svg{height:100%}
  .text{padding:.7cqw 3.33cqw 0;font-size:1.6cqw;line-height:1.38}
  .text b{color:var(--akzent);font-weight:700}
  .anzeige{position:absolute;right:3.33cqw;top:11cqw;font-family:var(--text);background:var(--tinte);color:#fff;
           font-size:1.7cqw;padding:.5cqw 1.1cqw;border-radius:.6cqw;font-variant-numeric:tabular-nums;
           box-shadow:0 .3cqw 1cqw rgba(0,0,0,.2)}
  .anzeige[hidden]{display:none}

  /* Zusatzfarben für Zeichnungen (Klassen statt farbe:, weil CSS die Attribute überstimmt) */
  .gd-linie.akzent{stroke:var(--gd-akzent)}
  .gd-punkt.akzent{fill:var(--gd-akzent)}
  .gd-beschriftung.akzent{fill:var(--gd-akzent)}
  .gd-beschriftung.hinweis{fill:var(--grau)}
  /* Leuchten der Hervorhebungen: die Bibliothek nutzt em-Werte, die im Geodreieck-Maßstab
     (1 Einheit = 1 cm) zu einem riesigen Schleier werden und das Papier einfärben */
  #tafel .gd-hell, #tafel .gd-ueberzug{filter:drop-shadow(0 0 .05px var(--gd-akzent))}
  .gd-beschriftung.mathe{font-family:var(--mathe);font-style:italic}
  /* beim Vorspulen keine Übergänge */
  .ohne-uebergang *{transition:none !important}

  /* ---------- Pult (nicht Teil der Aufnahme) ---------- */
  .pult{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}
  .pult[hidden]{display:none}
  button,select{background:var(--pult-hell);color:var(--pult-text);border:1px solid var(--pult-linie);
    border-radius:5px;padding:7px 12px;font:inherit;font-size:14px;cursor:pointer}
  button:hover{border-color:var(--akzent);color:#fff}
  button:disabled{opacity:.45;cursor:default;border-color:var(--pult-linie)}
  button.stark{background:var(--akzent);border-color:var(--akzent);color:#fff}
  button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
  label{font-size:13px;color:#e4e4e4;display:flex;align-items:center;gap:6px}
  input[type=range]{accent-color:var(--akzent);width:110px}
  .tasten{font-size:12px;color:#e4e4e4}