/* =========================================================================
   PRÄSENTATIONS-VORLAGE  --  style.css
   -------------------------------------------------------------------------
   Wiederkehrendes Styling für reveal.js-Stunden.
   Stundenspezifisches CSS gehört NICHT hierher, sondern in einen
   <style>-Block in der jeweiligen HTML-Datei.

   Erwartet im HTML:
     - reveal.js + theme/black.css   (vor dieser Datei eingebunden)
     - <canvas id="neural-bg"></canvas>          als erstes Body-Element
     - <div id="font-controls"> mit #btn-font-plus / #btn-font-minus
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. GRUNDFARBEN & BASIS-STYLING
   ------------------------------------------------------------------------- */
:root {
  --bg: #1a1626;
  --fg: #ffffff;
  --ui-controls: rgba(255, 255, 255, 0.2);

  /* Akzentfarben (für Merksatz, Gradient etc.) */
  --accent-cyan:   #38bdf8;
  --accent-pink:   #ff6b9d;
  --accent-purple: #c084fc;
  --accent-indigo: #818cf8;

  /* heller "Papier"-Ton – nur noch für die GeoGebra-Bühne,
     die selbst hell rendert */
  --paper: #fefcec;

  /* ---- Farben der SVG-Grafiken (svg-graph.js) ----------------------
     svg-graph.js liest diese Werte EINMAL beim Laden. Hier ändern
     ändert alle Grafiken; zur Laufzeit umgestellte Werte greifen nicht. */
  --graph-ink:       #ece9f6;                   /* Beschriftung        */
  --graph-axis:      rgba(236, 233, 246, 0.62); /* Achsen, Achsenzahlen */
  --graph-grid:      rgba(236, 233, 246, 0.16); /* Gitter              */
  --graph-grid-fein: rgba(236, 233, 246, 0.06); /* feines Gitter       */
  --graph-grau:      rgba(236, 233, 246, 0.45); /* Hilfs-, Strichellinien */
  --graph-halo:      rgba(18, 14, 30, 0.85);    /* Saum um Punkte      */

  /* Akzente – dieselben Töne wie die --accent-*-Farben oben */
  --graph-blau:   #38bdf8;
  --graph-orange: #ff9f43;
  --graph-gruen:  #4ade80;
  --graph-rot:    #ff7a85;
  --graph-pink:   #ff6b9d;
  --graph-lila:   #c084fc;

  /* Leinwand (Eis): zwei helle Schleier, das Glas färbt nicht, es streut */
  --graph-glas-hell: rgba(255, 255, 255, 0.10);
  --graph-glas:      rgba(255, 255, 255, 0.035);
}

html, body { background: var(--bg); margin: 0; padding: 0; }
.reveal, .reveal .slides { background: transparent; color: var(--fg); }
.reveal .slides section { background: transparent; }
.mjx-container { color: var(--fg) !important; }

.reveal { font-size: 40px; transition: font-size 0.2s ease; }

.reveal h1, .reveal h2, .reveal h3,
.reveal h4, .reveal h5, .reveal h6 {
  text-transform: none !important;
}

/* -------------------------------------------------------------------------
   1b. NEURO-NETZ-HINTERGRUND
   ------------------------------------------------------------------------- */
#neural-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  display: block;
  transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.reveal { position: relative; z-index: 1; }

/* -------------------------------------------------------------------------
   1c. ANIMIERTER GRADIENT FÜR ÜBERSCHRIFTEN
   ------------------------------------------------------------------------- */
@keyframes gradient-shift {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}
.reveal h1, .reveal h2, .reveal h3,
.reveal h4, .reveal h5, .reveal h6 {
  background: linear-gradient(
    90deg,
    var(--accent-pink)   0%,
    var(--accent-purple) 25%,
    var(--accent-indigo) 50%,
    var(--accent-cyan)   75%,
    var(--accent-pink)   100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  animation: gradient-shift 12s ease-in-out infinite;
}

/* Formeln in Überschriften sollen NICHT den Gradienten erben */
.reveal h1 .mjx-container, .reveal h2 .mjx-container, .reveal h3 .mjx-container,
.reveal h4 .mjx-container, .reveal h5 .mjx-container, .reveal h6 .mjx-container,
.reveal h1 mjx-container, .reveal h2 mjx-container, .reveal h3 mjx-container,
.reveal h4 mjx-container, .reveal h5 mjx-container, .reveal h6 mjx-container {
  color: var(--fg) !important;
  -webkit-text-fill-color: var(--fg) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
          background-clip: initial !important;
  animation: none !important;
}

/* -------------------------------------------------------------------------
   2. SCROLL-VERHALTEN (lange Folien scrollbar)
   ------------------------------------------------------------------------- */
.reveal .slides section {
  overflow-y: auto !important;
  max-height: 100vh !important;
  box-sizing: border-box;
  padding-right: 10px;
}
.reveal .slides section::-webkit-scrollbar { width: 8px; }
.reveal .slides section::-webkit-scrollbar-track { background: transparent; }
.reveal .slides section::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }
.reveal .slides section::-webkit-scrollbar-thumb:hover { background: #666; }

/* -------------------------------------------------------------------------
   3. SCHRIFTGRÖSSEN-STEUERUNG (unten links)
   ------------------------------------------------------------------------- */
#font-controls {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 1000;
  display: flex;
  gap: 15px;
  font-size: 40px;
  font-weight: bold;
  color: var(--fg);
  user-select: none;
}
#font-controls div {
  cursor: pointer;
  opacity: 0.2;
  transition: opacity 0.2s ease, transform 0.1s ease;
}
#font-controls div:hover {
  opacity: 1.0;
  transform: scale(1.2);
}

/* -------------------------------------------------------------------------
   4. INTERAKTIVER BILD-ZOOM (Klick = Vollbild)
   -------------------------------------------------------------------------
   WICHTIG: reveal.js skaliert .reveal .slides per CSS-transform. Ein
   'position: fixed'-Element INNERHALB dieses Transforms wird relativ zum
   (skalierten) Slides-Container ausgerichtet statt zum Viewport und
   zusätzlich mitskaliert -> das alte Vollbild blieb klein und die Folie
   blieb scrollbar. Lösung: script.js hängt das Vollbild in ein Overlay,
   das direkt an <body> sitzt (außerhalb von .reveal). Erst dort wirkt
   'position: fixed' wirklich am Viewport.
   ------------------------------------------------------------------------- */
.reveal img { cursor: zoom-in; }

.img-zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background-color: rgba(26, 22, 38, 0.95);
  cursor: zoom-out;
}
.img-zoom-overlay img {
  /* Box = ganzer Viewport; object-fit:contain berührt automatisch die
     einschränkende Achse: Bild "breiter" als der Bildschirm -> links/rechts,
     "höher" -> oben/unten. Auf einem 16:9-Bildschirm ist das genau die
     gewünschte 16/9-Regel. */
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;
  cursor: zoom-out;
}

/* -------------------------------------------------------------------------
   5. SPEZIAL-LAYOUTS
   ------------------------------------------------------------------------- */
.eq-steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: 0.3em;
}
.eq-steps > div { font-size: 1.2em; }

section.maximize-image {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box;
}
section.maximize-image img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  cursor: default;
}

section.full-height-slide {
  height: 100% !important;
  display: flex !important;
  flex-direction: column;
  padding: 0 !important;
  box-sizing: border-box;
}
section.full-height-slide h2,
section.full-height-slide h3 { flex-shrink: 0; margin: 20px 0; }
.embed-fill { width: 100%; flex-grow: 1; height: auto; border: 0; display: block; }

/* -------------------------------------------------------------------------
   6. MERKSATZ-, DEFINITIONS- UND BEISPIELBOX
   -------------------------------------------------------------------------
   defbox und bsp sind die Folien-Pendants zu \defbox und \bsp im
   LaTeX-Header. Ohne Rahmen: die getönte Fläche und die farbige
   Überschrift tragen die Zuordnung. Dasselbe Eis-Material wie .vk-graph,
   damit Grafik und Beschreibung nach einer Oberfläche aussehen.
   ------------------------------------------------------------------------- */
.defbox {
  background: linear-gradient(150deg,
                rgba(56, 189, 248, 0.13) 0%,
                rgba(56, 189, 248, 0.05) 100%);
  backdrop-filter: blur(16px) saturate(0.7);
  -webkit-backdrop-filter: blur(16px) saturate(0.7);
  border: 0;
  border-radius: 14px;
  padding: 22px 30px;
  margin: 10px auto;
  text-align: left;
  max-width: 95%;
}
.defbox .deftitel {
  font-weight: bold;
  color: var(--accent-cyan);
  font-size: 0.78em;
  margin-bottom: 10px;
}
.defbox p { font-size: 0.6em; line-height: 1.5; margin: 8px 0; }

.bsp {
  background: linear-gradient(150deg,
                rgba(255, 159, 67, 0.14) 0%,
                rgba(255, 159, 67, 0.05) 100%);
  backdrop-filter: blur(16px) saturate(0.7);
  -webkit-backdrop-filter: blur(16px) saturate(0.7);
  border: 0;
  border-radius: 14px;
  padding: 16px 24px;
  margin: 12px auto;
  text-align: left;
  max-width: 95%;
  font-size: 0.55em;
  line-height: 1.5;
}
.bsp .bsptitel {
  font-weight: bold;
  color: var(--graph-orange);
  font-size: 0.95em;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Tipp, um 180° gedreht -- Pendant zu \tippgedreht im LaTeX-Header.
   Die SuS sollen erst selbst nachdenken; wer nicht weiterkommt, dreht das
   iPad. Nur an wirklich schwierigen Stellen einsetzen. Gleiche Eisfläche
   wie defbox und bsp, Indigo als eigene Farbe.
   Markup:  <div class="tipp-gedreht"><div class="tipptitel">Tipp</div>
              Text ...</div>                                              */
.tipp-gedreht {
  background: linear-gradient(150deg,
                rgba(129, 140, 248, 0.16) 0%,
                rgba(129, 140, 248, 0.06) 100%);
  backdrop-filter: blur(16px) saturate(0.7);
  -webkit-backdrop-filter: blur(16px) saturate(0.7);
  border: 0;
  border-radius: 14px;
  padding: 14px 24px;
  margin: 12px auto;
  text-align: left;
  max-width: 95%;
  font-size: 0.55em;
  line-height: 1.5;
  transform: rotate(180deg);
}
.tipp-gedreht .tipptitel {
  font-weight: bold;
  color: var(--accent-indigo);
  font-size: 0.95em;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ------------------------------------------------------------------------- */
.merksatz {
  background: rgba(56, 189, 248, 0.08);
  border-left: 6px solid var(--accent-cyan);
  padding: 25px 35px;
  margin: 25px auto;
  border-radius: 8px;
  text-align: left;
  max-width: 90%;
}
.merksatz .titel {
  font-weight: bold;
  color: var(--accent-cyan);
  font-size: 0.9em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* -------------------------------------------------------------------------
   7. SVG-GRAFIKEN: LEINWAND UND SPLIT-LAYOUT
   -------------------------------------------------------------------------
   Gehört zu svg-graph.js. Die Leinwand ist eine Eisfläche: ein heller,
   fast durchsichtiger Schleier über dem Neuro-Hintergrund. Kein Rahmen –
   abgesetzt wird nur über den weichen Schatten.

   Die drei Filter, falls nachjustiert werden muss:
     blur       zieht den Hintergrund zu Schlieren. ÜBER ETWA 20px wird die
                Fläche gleichmäßig grau und der Eis-Eindruck ist weg.
     saturate   nimmt dem Netz das Blauviolett, sonst färbt es die Fläche.
     brightness hält sie dunkel genug für helle Striche.
   ------------------------------------------------------------------------- */
.vk-graph {
  background: linear-gradient(150deg,
                var(--graph-glas-hell) 0%,
                var(--graph-glas)      48%,
                var(--graph-glas-hell) 100%);
  backdrop-filter: blur(12px) brightness(0.70) saturate(0.35);
  -webkit-backdrop-filter: blur(12px) brightness(0.70) saturate(0.35);
  border: 0;
  border-radius: 18px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.34);
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;             /* das <svg> füllt den Container */
}

/* Links Text, rechts Grafik (oder umgekehrt – Reihenfolge im HTML) */
.vk-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  align-items: center;
  height: 72vh;
}
/* Grafik groß, Text schmal daneben */
.vk-split-wide { grid-template-columns: 1.55fr 1fr; }
.vk-textcol { overflow-y: auto; max-height: 72vh; padding-right: 8px; }

/* Zwei-Spalten-Layout für Text + Grafik */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
}
.two-col.narrow-left {
  grid-template-columns: 0.9fr 1.1fr;
}

/* -------------------------------------------------------------------------
   8. GEOGEBRA-SPLIT-LAYOUT + BEFEHLSKARTEN
   ------------------------------------------------------------------------- */
/* Folie mit class="ggb-slide" -> linke Spalte GeoGebra, rechte Befehle */
.ggb-slide .ggb-split {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 20px;
  align-items: stretch;
  height: 78vh;
}

.ggb-stage {
  background: var(--paper);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}
.ggb-stage > div {
  width: 100%;
  height: 100%;
}

/* Spalte mit den anklickbaren Befehlen */
.ggb-cmds {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  height: 100%;
  box-sizing: border-box;
  padding-right: 6px;
  text-align: left;
}
.ggb-cmds h3 {
  /* Gruppen-Überschrift in der Befehlsliste */
  font-size: 0.7em !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 10px 0 2px;
  opacity: 0.85;
}

.ggb-cmd {
  background: rgba(192, 132, 252, 0.10);
  border: 1px solid rgba(192, 132, 252, 0.30);
  border-radius: 8px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}
.ggb-cmd:hover {
  background: rgba(192, 132, 252, 0.20);
  border-color: rgba(192, 132, 252, 0.55);
  transform: translateX(3px);
}
.ggb-cmd:active { transform: translateX(3px) scale(0.99); }

.ggb-cmd code {
  display: block;
  font-family: 'Courier New', monospace;
  font-size: 0.62em;
  color: var(--fg);
  font-weight: bold;
}
.ggb-cmd .erkl {
  display: block;
  font-size: 0.42em;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 5px;
  line-height: 1.35;
}

/* kurzes Aufleuchten beim Klick */
@keyframes ggb-flash {
  0%   { background: rgba(56, 189, 248, 0.55); }
  100% { background: rgba(192, 132, 252, 0.10); }
}
.ggb-cmd--flash { animation: ggb-flash 0.6s ease-out; }

/* dauerhaft als "schon benutzt" markiert */
.ggb-cmd--used {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.40);
}
.ggb-cmd--used code::after {
  content: ' \2713';
  color: var(--accent-cyan);
}
.ggb-cmd--used:hover {
  background: rgba(56, 189, 248, 0.20);
}

/* -------------------------------------------------------------------------
   9. AUSWAHL-MATRIX  (Charakter-Select à la Mortal Kombat / Street Fighter)
   -------------------------------------------------------------------------
   Lesson-Markup nur:
     <div class="auswahl-mk">
       <div class="auswahl-mk-item">
         <div class="auswahl-mk-bild"><img ...></div>
         <div class="auswahl-mk-beschreibung"> ... Steckbrief ... </div>
       </div>
       ... weitere Items ...
     </div>

   Layout (von script.js gebaut):
     +----------------------------+--------------+
     | Beschreibung (oben)        |              |
     | -------------------------- |  großes      |
     | Auswahl: festes Raster     |  Bild        |
     | (Standard 3x4 = 12 Plätze) |  (volle      |
     | leere Plätze = "?"         |  Höhe)       |
     | nicht anklickbar           |              |
     +----------------------------+--------------+

   Optional am <div class="auswahl-mk"> einstellbar:
     data-cols  = Spalten des Rasters   (Standard 4)
     data-slots = Gesamtzahl der Plätze (Standard 12)  -> Rest wird mit "?" gefüllt
     data-tile  = Kachelgröße in px     (Standard 92)

   Am besten auf eine <section class="full-height-slide"> setzen.
   ------------------------------------------------------------------------- */
.auswahl-mk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36%;   /* links Inhalt, rechts großes Bild */
  gap: 22px;
  height: 78vh;
  box-sizing: border-box;
  text-align: left;
  --mk-cols: 4;
  --mk-tile: 92px;
}

/* linke Spalte: Beschreibung oben, Auswahl unten */
.auswahl-mk-left {
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 14px;
}

/* Beschreibung (oben, füllt den freien Platz) */
.auswahl-mk-preview-text {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  font-size: 0.62em;
  line-height: 1.5;
}
.auswahl-mk-preview-text h2,
.auswahl-mk-preview-text h3 { margin: 0 0 0.4em; }

/* Auswahl-Bereich (unten links), ohne Rahmen */
.auswahl-mk-grid {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(var(--mk-cols, 4), var(--mk-tile, 92px));
  justify-content: center;        /* kompaktes Raster mittig */
  gap: 8px;
  padding: 0;
}

/* großes Bild (rechts, volle Höhe) – ohne Rahmen, liegt auf dem
   normalen Folienhintergrund. overflow:hidden, damit das Bild von
   rechts hereinfliegen kann, ohne einen Scrollbalken zu erzeugen. */
.auswahl-mk-bild-gross {
  min-height: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.auswahl-mk-bild-gross img {
  width: 100%;
  height: 100%;
  object-fit: contain;          /* zeigt das ganze Bild, egal welches Format */
  cursor: zoom-in;              /* zoomt per Overlay weiter ins Vollbild */
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.55));
  /* fliegt bei jeder Auswahl von rechts herein (neues <img> pro Klick
     -> Animation startet jedes Mal neu) */
  animation: mk-flyin 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes mk-flyin {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* --- einzelne Kachel (klein) --- */
.auswahl-mk-item {
  position: relative;
  background: rgba(192, 132, 252, 0.10);
  border: 2px solid rgba(192, 132, 252, 0.25);
  border-radius: 8px;
  padding: 3px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),
              inset 0 -3px 6px rgba(0, 0, 0, 0.35);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.auswahl-mk-item:hover {
  border-color: var(--accent-cyan);
  transform: translateY(-2px);
}
.auswahl-mk-item .auswahl-mk-bild {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 5px;
}
.auswahl-mk-item .auswahl-mk-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;            /* Portrait formatfüllend in der Kachel */
  display: block;
  cursor: pointer;
  /* nicht gewählt: abgedunkelt und ausgegraut (Charakter-Select-Optik) */
  filter: grayscale(0.75) brightness(0.5);
  transition: filter 0.18s ease, transform 0.18s ease;
}
.auswahl-mk-item:hover .auswahl-mk-bild img {
  filter: grayscale(0.2) brightness(0.85);
  transform: scale(1.06);
}
/* Beschreibung in der Kachel ist nur Datenträger -> ausgeblendet,
   erscheint beim Klick links oben */
.auswahl-mk-item .auswahl-mk-beschreibung { display: none; }

/* aktive Kachel: voll beleuchtet, pulsierender Neon-Rahmen + Eckwinkel */
.auswahl-mk-item--active {
  border-color: var(--accent-cyan);
  background: rgba(56, 189, 248, 0.18);
  animation: mk-pulse 1.4s ease-in-out infinite;
}
.auswahl-mk-item--active .auswahl-mk-bild img {
  filter: none;                 /* gewähltes Bild voll und farbig */
  transform: scale(1.04);
}
.auswahl-mk-item--active::before,
.auswahl-mk-item--active::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border: 3px solid var(--accent-cyan);
  pointer-events: none;
}
.auswahl-mk-item--active::before {
  top: -4px; left: -4px;
  border-right: none; border-bottom: none;
}
.auswahl-mk-item--active::after {
  bottom: -4px; right: -4px;
  border-left: none; border-top: none;
}

@keyframes mk-pulse {
  0%, 100% {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10),
                0 0 0 2px var(--accent-cyan),
                0 0 14px rgba(56, 189, 248, 0.55);
  }
  50% {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10),
                0 0 0 2px var(--accent-cyan),
                0 0 26px rgba(56, 189, 248, 0.95);
  }
}

/* --- leerer Platz: nicht anklickbares Fragezeichen --- */
.auswahl-mk-item--leer {
  cursor: default;
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
  border-style: dashed;
  box-shadow: none;
  animation: none;
}
.auswahl-mk-item--leer:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.08);
}
.auswahl-mk-q {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 1.7em;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.22);
  user-select: none;
}

/* Bewegungsreduktion respektieren */
@media (prefers-reduced-motion: reduce) {
  .auswahl-mk-item--active { animation: none; }
  .auswahl-mk-bild-gross img { animation: none; }
}

/* -------------------------------------------------------------------------
   10. HILFSKLASSEN UND LIVE-BÜHNE
   .reserve   Kennzeichnung einer Reserve-Folie („kann entfallen"),
              als erstes <p> in der Folie.
   .gross     größere Zeilen in kurzen Definitions-/Beispielboxen.
   Live-Bühne für das vorgeführte Experiment (Kamerabild per iframe), dazu
   der Vollbild-Knopf; Markup und Verhalten: script.js, Abschnitt Live-Bühne.
   ------------------------------------------------------------------------- */
.reserve { font-size: 0.5em; letter-spacing: 0.1em; text-transform: uppercase;
           opacity: 0.7; margin: 0 0 6px; }
/* etwas größere Zeilen in den kurzen Boxen (bsp trägt selbst 0,55em) */
.defbox p.gross { font-size: 0.85em; }
.bsp p.gross { font-size: 1.55em; margin: 0; }
.two-col > .defbox, .two-col > .bsp { margin: 10px 0; }

/* Anders als die GeoGebra-Bühne dunkel: das Kamerabild bringt sein
   eigenes Schwarz mit, eine helle Fläche schaute darunter hervor. */
.live-buehne {
  position: relative; height: 52vh; aspect-ratio: 4 / 3;
  width: auto; max-width: 100%; margin: 0 auto;
  background: #0d1018; border-radius: 12px; overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.live-buehne iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Im Vollbild füllt das Kamerabild den Schirm: kein Seitenverhältnis,
   keine abgerundeten Ecken, kein Rand. */
.live-buehne:fullscreen {
  height: 100%; width: 100%; max-width: none; aspect-ratio: auto;
  border-radius: 0; box-shadow: none; background: #000;
}
.live-buehne:fullscreen .live-knopf { font-size: 22px; }
/* Knopf liegt über dem iframe, sonst schluckt der die Klicks. */
.live-knopf {
  position: absolute; right: 12px; bottom: 12px; z-index: 5;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border: 0; border-radius: 9px; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1;
  color: #f6f1e6; background: rgba(28, 24, 18, 0.82);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
}
.live-knopf:hover { background: rgba(28, 24, 18, 0.95); }

/* ==========================================================================
   BÜHNE – Folien im Design der Erklärvideos (seit 2026-10-27 Standard der
   Vorlage, vorher Probe `Entwicklung/buehne/buehne.css`, erprobt in
   physik/08/05-Licht_und_Farbe).
   Vorbild: ai-video-generator/projekte/mathe/mdaz/Brueche/…/index.html und
   werkzeuge/mdaz-dunkel/lib/dunkel.css: einfarbig dunkler Grund, Systemschrift,
   keine Boxen, Zuordnung nur über Farbe und einen dünnen Balken links.
   Überschreibt die Abschnitte oben (Netz-Hintergrund, Gradient-Titel, Eis-Optik).
   Dazu script.js mit `center: false` (Inhalt oben statt senkrecht mittig).
   ========================================================================== */
:root {
  --buehne-text: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --buehne-balken: rgba(148, 163, 184, 0.30);
  --k-erfolg: #10b981;
}

/* kein Netz im Hintergrund; reveals black.css setzt sonst sein Grauschwarz */
#neural-bg { display: none; }
.reveal-viewport, html, body { background: var(--bg); }

.reveal { font-family: var(--buehne-text); font-size: 46px; }
.reveal p, .reveal li { font-family: var(--buehne-text); }

/* Titel: weiß, links, mit blauem Balken – wie die Videoköpfe */
.reveal h1, .reveal h2, .reveal h3 {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--fg);
  animation: none;
  font-family: var(--buehne-text);
  font-weight: 600;
  text-align: left;
  border-left: 8px solid var(--accent-cyan);
  padding-left: 0.5em;
  font-size: 1.25em;
  line-height: 1.15;
}
.reveal h1 { font-size: 1.6em; }

/* Kästen ohne Fläche: nur Balken links, Überschrift farbig */
.defbox, .bsp, .merksatz {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  border-left: 5px solid var(--buehne-balken);
  border-radius: 0;
  padding: 6px 0 6px 34px;
  margin: 22px 0;
  max-width: 100%;
}
.defbox { border-left-color: var(--accent-cyan); }
.bsp { border-left-color: var(--graph-orange); font-size: 0.85em; }
.merksatz { border-left-color: var(--k-erfolg); }
.defbox .deftitel, .bsp .bsptitel, .merksatz .titel {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.85em;
  font-weight: 600;
  margin-bottom: 8px;
}
.merksatz .titel { color: var(--k-erfolg); }
.defbox p { font-size: 1em; line-height: 1.35; margin: 10px 0; }

/* Grafikfläche: ohne Eis, ohne Schatten – die Zeichnung steht auf dem Grund */
.vk-graph {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
.bsp p.gross { font-size: 1em; }

/* Seit center:false (script.js) beginnt der Inhalt oben. Der Titel
   bekommt etwas Luft nach oben, der Rest der Folie gehört der Grafik. */
.reveal .slides section { padding-top: 40px; box-sizing: border-box; }
.reveal h2 { margin: 0 0 30px; }

/* Große Grafik: Split füllt die Folie bis unten, Grafik breit, Text schmal */
/* Folie = feste 1080 px (reveal-Bühne); style.css begrenzt Folien sonst auf max-height 100vh,
   im kleinen Fenster schrumpft die Grafik dann mit */
.reveal .slides section.full-height-slide { height: 1080px !important; max-height: none !important; }
section.full-height-slide .vk-split { flex: 1; height: auto; min-height: 0; margin-bottom: 40px; }
.vk-split-wide { grid-template-columns: 2.3fr 1fr; }
.vk-textcol { max-height: none; text-align: left; }
/* Grafik über die ganze Breite (ohne Split) */
section.full-height-slide > .vk-graph { flex: 1; height: auto; min-height: 0; }
/* Stichworte unter einer breiten Grafik: Platz lassen für die Navigation unten */
section.full-height-slide > .two-col { flex-shrink: 0; margin: 10px 0 90px; gap: 10px 30px; }
section.full-height-slide > .two-col p { margin: 6px 0; }

/* ---------------------------------------------------------------------------
   AUFTRAGSFOLIE (2026-10-23): links der Auftrag in ganzen Sätzen, rechts
   der Rahmen als Symbolzeilen: Zeit, Sozialform, iPad, was am Ende vorliegt.
   Markup:
     <div class="auftrag">
       <div class="auftrag-text"><p>…</p></div>
       <ul class="auftrag-rahmen">
         <li class="zeit">12 min</li>
         <li class="sozial zu-zweit">zu zweit</li>      (einzeln | zu-zweit | gruppe)
         <li class="ipad an">Goodnotes, Seite 1</li>      (an | aus = umgedreht)
         <li class="ziel">Felder 1 bis 5 belegt</li>
       </ul>
     </div>
   gates.py zählt Text in .auftrag nicht (Aufträge sind ganzer Text).
   --------------------------------------------------------------------------- */
.auftrag {
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 70px; align-items: start;
  text-align: left; margin-top: 20px;
}
.auftrag-text { border-left: 5px solid var(--k-erfolg); padding-left: 34px; }
.auftrag-text p { margin: 0 0 24px; line-height: 1.35; }
.auftrag-rahmen { list-style: none; margin: 0; padding: 0; }
.auftrag-rahmen li {
  display: flex; align-items: center; gap: 30px;
  font-size: 0.9em; margin: 0 0 34px; line-height: 1.2;
}
.auftrag-rahmen li::before {
  content: ""; flex: 0 0 64px; height: 64px; box-sizing: border-box;
  color: var(--accent-cyan);
}
/* Uhr: Kreis mit zwei Zeigern */
.auftrag-rahmen .zeit::before {
  border: 5px solid currentColor; border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) 50% 18% / 5px 34% no-repeat,
    linear-gradient(currentColor, currentColor) 72% 50% / 34% 5px no-repeat;
}
/* Sozialform: ein, zwei oder vier Köpfe */
.auftrag-rahmen .sozial::before {
  --kopf: radial-gradient(circle, currentColor 0 11px, transparent 12px);
  background: var(--kopf) 50% 50% / 26px 26px no-repeat;
}
.auftrag-rahmen .sozial.zu-zweit::before {
  background: var(--kopf) 15% 50% / 26px 26px no-repeat, var(--kopf) 85% 50% / 26px 26px no-repeat;
}
.auftrag-rahmen .sozial.gruppe::before {
  background: var(--kopf) 15% 15% / 26px 26px no-repeat, var(--kopf) 85% 15% / 26px 26px no-repeat,
              var(--kopf) 15% 85% / 26px 26px no-repeat, var(--kopf) 85% 85% / 26px 26px no-repeat;
}
/* iPad: an = heller Bildschirm, aus = umgedreht (volle graue Rückseite) */
.auftrag-rahmen .ipad::before {
  flex-basis: 50px; height: 66px; margin: 0 7px;
  border: 5px solid currentColor; border-radius: 9px;
}
.auftrag-rahmen .ipad.an::before { background: rgba(56, 189, 248, 0.35); }
.auftrag-rahmen .ipad.aus::before {
  color: var(--graph-grau); background: currentColor;
  transform: rotate(90deg);
}
/* Ziel: Haken */
.auftrag-rahmen .ziel::before {
  flex-basis: 30px; height: 54px; margin: 0 20px 10px 14px;
  border: solid var(--k-erfolg); border-width: 0 8px 8px 0; transform: rotate(40deg);
}


/* ---------------------------------------------------------------------------
   TITELFOLIE (2026-10-23, wie die Titel der GeoGebra-Tutorialvideos):
   linksbündig, senkrecht mittig, Titel orange, Untertitel hell, Einordnung grau.
   Verrät nichts: Thema und höchstens eine Frage, kein Ziel, kein Ergebnis.
   Markup:
     <section class="titelfolie">
       <h1>Licht und Farbe</h1>
       <p class="untertitel">Wie sehen wir Farben?</p>
       <p class="einordnung">Physik 8 · Optik · Einheit 5</p>
     </section>
   --------------------------------------------------------------------------- */
.reveal .slides section.titelfolie {
  height: 1080px !important; max-height: none !important;
  display: flex !important; flex-direction: column; justify-content: center;
  padding: 0 180px !important; box-sizing: border-box; text-align: left;
}
.reveal section.titelfolie h1 {
  border: 0; padding: 0; margin: 0 0 24px;
  font-size: 88px; font-weight: 700; line-height: 1.1;
  color: var(--graph-orange); -webkit-text-fill-color: currentColor;
}
.reveal section.titelfolie .untertitel { font-size: 56px; font-weight: 500; margin: 0 0 48px; }
.reveal section.titelfolie .einordnung { font-size: 40px; color: var(--graph-grau); margin: 0; }