/* Szenen-Bibliothek — Abspieler und Szenen im Design „Edles Dunkel“.
   Nur Token (tokens.css, nachtglas.css), keine Farbwerte; Zustände richtig/falsch
   nur als farbige Schrift (Grün, Rot nur für Fehler), Körbe als Unterkarten ohne
   Tönung, Knöpfe aus app.css/rueckgrat-r1.css. 1280 px und 390 px, kein waagerechtes
   Scrollen. prefers-reduced-motion: alles steht, Elemente blenden nur ein. */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------ Abspieler */
.sz-abspieler { max-width: 960px; margin: 10px auto 0; min-width: 0; }
.sz-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 10px; }
.sz-kopf .sz-modul { flex: 1 0 100%; display: block; }
.sz-titel { font-size: var(--fs-page); font-weight: 700; margin: 0; flex: 1 1 auto; min-width: 0; }
.sz-stand { color: var(--m); font-weight: 700; font-size: var(--fs-body); white-space: nowrap; }
.sz-fortschritt { height: 4px; margin: 10px 0 0; border-radius: 2px; background: color-mix(in srgb, var(--m) 18%, transparent); overflow: hidden; }
.sz-fortschritt-balken { height: 100%; width: 0; background: var(--m); border-radius: 2px; transition: width 0.4s ease; }
.sz-buehne.card { margin-top: 14px; padding: 22px 24px 20px; min-height: 380px; display: flex; flex-direction: column; position: relative; overflow: hidden; }
/* P1.1c (Design M6): Während die Szenen laufen, reicht die Bühne bis zum unteren Fensterrand (abspieler.js misst),
   die Steuerleiste haftet unten — „Weiter“ steht in jeder Szene an derselben Stelle. */
.sz-mit-steuer .sz-buehne.card { min-height: var(--sz-buehne-min, 380px); }
.sz-buehne.sz-rein { animation: sz-rein 0.22s ease-out; }
@keyframes sz-rein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sz-szene { position: relative; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-width: 0; }
.sz-szene-kopf { display: flex; flex-direction: column; gap: 2px; }
.sz-art { font-size: var(--fs-small); color: var(--m); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.sz-szene-titel { font-size: var(--fs-page); font-weight: 700; margin: 0; outline: none; }
.sz-szene-titel:focus-visible { outline: none; }
html.sz-tastatur .sz-szene-titel:focus-visible { outline: 2px solid var(--m); outline-offset: 4px; border-radius: 4px; }
.sz-steuer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px;
  position: sticky; bottom: 0; z-index: 6; padding: 10px 0; border-top: 1px solid transparent;
  background: color-mix(in srgb, var(--grund-inhalt-2) 72%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); }
.sz-abbruch { display: inline-flex; align-items: center; gap: 6px; }
.sz-steuer-links, .sz-steuer-rechts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sz-weiter.sz-bereit { animation: sz-bereit 0.9s ease-out 1; }
@keyframes sz-bereit { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--m) 55%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
.sz-ohne-untertitel .sz-untertitel { visibility: hidden; }
.sz-ton[aria-pressed="true"], .sz-ut[aria-pressed="true"] { color: var(--m); border-color: var(--m); }

/* ------------------------------------------------------------ Startkarte, Endkarte */
.sz-lernziele { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-ui); }
.sz-lernziele li::marker { color: var(--m); }
.sz-startkarte .knopf-zeile, .sz-endkarte .knopf-zeile { margin-top: 18px; }
.sz-fussnote { font-size: var(--fs-body); border-top: 1px solid var(--linie-haar); padding-top: 10px; margin-top: 8px; }

/* ------------------------------------------------------------ Erklär-Bühne (HyperFrames-Muster) */
.sz-erklaeren { min-height: 320px; padding-bottom: 4px; }
.sz-hintergrund { position: absolute; inset: -40px; pointer-events: none; z-index: 0; overflow: hidden; }
.sz-blase { position: absolute; border-radius: 50%; filter: blur(26px); opacity: 0.7;
  background: radial-gradient(circle, color-mix(in srgb, var(--m) 38%, transparent), transparent 70%); }
.sz-blase-1 { width: 320px; height: 320px; left: -60px; top: 20px; animation: sz-drift-1 22s ease-in-out infinite alternate; }
.sz-blase-2 { width: 260px; height: 260px; right: -40px; top: 40%; animation: sz-drift-2 26s ease-in-out infinite alternate; }
.sz-blase-3 { width: 220px; height: 220px; left: 45%; bottom: -80px; animation: sz-drift-3 19s ease-in-out infinite alternate;
  background: radial-gradient(circle, color-mix(in srgb, var(--bernstein) 16%, transparent), transparent 70%); }
@keyframes sz-drift-1 { to { transform: translate(90px, 60px) scale(1.15); } }
@keyframes sz-drift-2 { to { transform: translate(-70px, -50px) scale(0.9); } }
@keyframes sz-drift-3 { to { transform: translate(-60px, -40px) scale(1.1); } }
.sz-erklaeren .sz-szene-kopf, .sz-stichworte, .sz-erklaeren .sz-untertitel, .sz-ohne-ton { position: relative; z-index: 1; }
.sz-titel-animiert .sz-titel-wort { display: inline-block; opacity: 0; transform: translateY(14px);
  animation: sz-wort-rein 0.5s ease-out forwards; animation-delay: calc(0.12s + var(--n, 0) * 0.09s); }
@keyframes sz-wort-rein { to { opacity: 1; transform: none; } }
.sz-stichworte { position: relative; flex: 1 1 auto; min-height: 150px; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; align-content: center; padding: 6px 0; }
.sz-stichwort { display: inline-flex; align-items: center; justify-content: center; justify-self: start; max-width: 100%; min-height: 46px; padding: 8px 18px;
  border: 1px solid color-mix(in srgb, var(--m) 55%, transparent); border-radius: var(--r-kachel);
  background: color-mix(in srgb, var(--m) 9%, transparent); color: var(--text-stark); font-size: var(--fs-card); font-weight: 700;
  text-align: center; overflow-wrap: break-word; hyphens: auto; box-shadow: 0 0 18px color-mix(in srgb, var(--m) 16%, transparent);
  animation: sz-stichwort-rein 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.sz-stichwort-1, .sz-stichwort-4 { justify-self: center; }
.sz-stichwort-2, .sz-stichwort-5 { justify-self: end; }
.sz-stichwort-3 { justify-self: end; }
.sz-stichwort-5 { justify-self: start; }
@keyframes sz-stichwort-rein { from { opacity: 0; transform: translateY(18px) scale(0.92); } to { opacity: 1; transform: none; } }
.sz-ohne-ton { margin: 0; font-size: var(--fs-body); color: var(--bernstein); }
.sz-untertitel { min-height: 3.2em; margin-top: auto; padding: 10px 14px; border-radius: var(--r-feld);
  background: color-mix(in srgb, var(--grund-inhalt-2) 70%, transparent); border: 1px solid var(--linie-haar); }
.sz-ut-satz { margin: 0; font-size: var(--fs-card); line-height: 1.5; color: var(--glas-leise); }
.sz-ut-wort { transition: color 0.15s ease; }
.sz-ut-wort.gesprochen, .sz-ut-satz.gesprochen { color: var(--text-stark); }
.sz-rueckmeldung .sz-blase { opacity: 0.3; }
.sz-pausiert .sz-blase, .sz-pausiert .sz-stichwort { animation-play-state: paused; }

/* ------------------------------------------------------------ Aufgaben (gemeinsam) */
.sz-anweisung { margin: 0; font-size: var(--fs-card); color: var(--text-stark); }
.sz-hinweis { margin: 0; font-size: var(--fs-body); }
.sz-lage { margin: 0; padding: 10px 14px; border-left: 3px solid var(--m); color: var(--glas-text); font-size: var(--fs-ui); }
.sz-aufgabe-koerper { margin-top: 6px; }
.sz-aufgabe-fuss { margin-top: 14px; }
.sz-ergebnis { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linie-haar); }
.sz-ergebnis-titel { margin: 0 0 6px; font-weight: 700; font-size: var(--fs-card); }
.sz-ergebnis.sz-ok .sz-ergebnis-titel { color: var(--status-gruen); }
.sz-ergebnis.sz-falsch .sz-ergebnis-titel { color: var(--rot-nacht); }
.sz-ergebnis.sz-loesung .sz-ergebnis-titel { color: var(--m); }
.sz-ergebnis-text { margin: 0; font-size: var(--fs-ui); color: var(--glas-text); }
.sz-unvollstaendig { margin: 10px 0 0; }
.sz-ergebnis .sz-untertitel { margin-top: 0; min-height: 0; }
.sz-ok { color: var(--status-gruen); }
.sz-falsch { color: var(--rot-nacht); }
button.sz-ok, .sz-schritt.sz-ok, select.sz-ok,
.sz-satz.sz-ok[aria-pressed="true"], .sz-weg.sz-ok[aria-checked="true"] { border-color: var(--status-gruen); color: var(--status-gruen); }
button.sz-falsch, .sz-schritt.sz-falsch, select.sz-falsch,
.sz-satz.sz-falsch[aria-pressed="true"], .sz-weg.sz-falsch[aria-checked="true"] { border-color: var(--rot-nacht); color: var(--rot-nacht); }

/* Umschalt-Knöpfe (markieren) und Wege (entscheiden, Test): Glas-Pille, aktiv Tönung in --m */
.sz-saetze, .sz-wege { display: flex; flex-direction: column; gap: 8px; }
.sz-satz, .sz-weg { justify-content: flex-start; text-align: left; font-weight: 400; padding: 10px 14px; min-height: 44px;
  font-size: var(--fs-ui); line-height: 1.4; white-space: normal; }
.sz-satz [data-icon] { color: transparent; flex: 0 0 auto; border: 1px solid var(--glas-rand); border-radius: 50%; width: 22px; height: 22px; justify-content: center; }
.sz-satz[aria-pressed="true"] { background: color-mix(in srgb, var(--m) 18%, transparent); border-color: var(--m); color: var(--text-stark); font-weight: 700; }
.sz-satz[aria-pressed="true"] [data-icon] { color: var(--m); border-color: var(--m); }
.sz-weg .sz-punkt { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--glas-rand); position: relative; }
.sz-weg[aria-checked="true"] { background: color-mix(in srgb, var(--m) 18%, transparent); border-color: var(--m); color: var(--text-stark); font-weight: 700; }
.sz-weg[aria-checked="true"] .sz-punkt { border-color: var(--m); }
.sz-weg[aria-checked="true"] .sz-punkt::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--m); }
.sz-antwort-id { color: var(--m); font-weight: 700; flex: 0 0 auto; }
.sz-satz.sz-ok [data-icon], .sz-weg.sz-ok .sz-punkt { border-color: var(--status-gruen); color: var(--status-gruen); }
.sz-weg.sz-ok .sz-punkt::after { background: var(--status-gruen); }
.sz-weg.sz-falsch .sz-punkt { border-color: var(--rot-nacht); }
.sz-weg.sz-falsch .sz-punkt::after { background: var(--rot-nacht); }

/* Lückentext */
.sz-lueckentext-text { margin: 0; font-size: var(--fs-card); line-height: 2; }
.sz-luecke { display: inline-block; width: auto; min-width: 9ch; margin: 0 4px; padding: 4px 10px; font-size: var(--fs-ui); vertical-align: baseline; }

/* Zuordnen */
.sz-zuordnen { display: flex; flex-direction: column; gap: 14px; }
.sz-korb { min-height: 96px; }
.sz-korb-kopf { font-size: var(--fs-body); font-weight: 700; color: var(--glas-text); margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.sz-ablage { padding: 10px 12px; border: 1px dashed color-mix(in srgb, var(--m) 45%, transparent); border-radius: var(--r-kachel); }
.sz-ablage .sz-korb-kopf { color: var(--glas-leise); }
.sz-koerbe { display: grid; gap: 12px; grid-template-columns: repeat(var(--koerbe, 2), minmax(0, 1fr)); }
.sz-korb-liste { display: flex; flex-wrap: wrap; gap: 8px; min-height: 44px; align-content: flex-start; }
.sz-korb.abschnitt .sz-korb-liste { min-height: 56px; }
.sz-korb.sz-korb-ziel { border-color: var(--m); box-shadow: 0 0 var(--karte-schein-weite, 12px) color-mix(in srgb, var(--m) 40%, transparent); }
.sz-chip { font-weight: 400; min-height: 40px; padding: 7px 12px; font-size: var(--fs-body); line-height: 1.3; white-space: normal; text-align: left;
  touch-action: none; cursor: grab; max-width: 100%; overflow-wrap: break-word; hyphens: auto; }
.sz-chip.sz-gewaehlt { border-color: var(--m); background: color-mix(in srgb, var(--m) 18%, transparent); color: var(--text-stark); font-weight: 700;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--m) 25%, transparent); }
.sz-chip-schatten { opacity: 0.35; }
.sz-chip-klon { position: fixed; z-index: 120; pointer-events: none; margin: 0; box-shadow: 0 12px 30px var(--schatten-tief); border-color: var(--m); }
.sz-chip:disabled { cursor: default; opacity: 1; }

/* Sortieren */
.sz-sortier-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sz-schritt { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 8px; min-height: 48px;
  border: 1px solid var(--glas-rand); border-radius: var(--r-kachel); background: var(--glas); color: var(--glas-text);
  touch-action: none; cursor: grab; font-size: var(--fs-ui); line-height: 1.35; }
.sz-schritt:focus-visible { outline: 2px solid var(--m); outline-offset: 2px; }
.sz-schritt.sz-zieht { border-color: var(--m); box-shadow: 0 10px 26px var(--schatten-kachel); }
.sz-schritt.sz-gesperrt { cursor: default; }
.sz-griff { color: var(--glas-leise); display: inline-flex; flex: 0 0 auto; }
.sz-schritt-nr { flex: 0 0 26px; color: var(--m); font-weight: 700; text-align: center; }
.sz-schritt-text { flex: 1 1 auto; min-width: 0; }
.sz-schritt-knoepfe { display: inline-flex; gap: 4px; flex: 0 0 auto; }
.sz-schritt-knoepfe button { min-height: 34px; min-width: 34px; padding: 4px 8px; }

/* Tour */
.sz-tour-karte p { margin: 0 0 8px; font-size: var(--fs-ui); }
.sz-tour-marke { font-size: var(--fs-body); }

/* Test */
.sz-test-koerper { display: flex; flex-direction: column; gap: 10px; }
.sz-test-stand { margin: 0; font-size: var(--fs-body); }
.sz-frage { margin: 0; font-size: var(--fs-card); font-weight: 700; outline: none; }
.sz-frage:focus-visible { outline: none; }
html.sz-tastatur .sz-frage:focus-visible { outline: 2px solid var(--m); outline-offset: 4px; border-radius: 4px; }
.sz-test-urteil { margin: 0; font-size: var(--fs-page); font-weight: 700; outline: none; }
.sz-test-zahlen { margin: 0; font-size: var(--fs-card); color: var(--text-stark); }
.sz-test-ergebnis { display: flex; flex-direction: column; gap: 8px; }
.sz-test-ergebnis .sz-untertitel { margin-top: 0; }
.sz-test-begruendungen { margin: 10px 0 0; font-size: var(--fs-ui); }
.sz-begruendungen { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 12px; }
.sz-begruendungen li::marker { color: var(--m); font-weight: 700; }
.sz-begruendungen p { margin: 0 0 2px; font-size: var(--fs-body); }
.sz-frage-klein { font-weight: 700; color: var(--glas-text); }

/* ------------------------------------------------------------ Vorschau-Seite */
.sz-vorschau-kopf { max-width: 960px; margin: 10px auto 0; }
.sz-vorschau-kopf p { color: var(--glas-leise); margin: 4px 0 0; }

/* ------------------------------------------------------------ Schmal (390 px) */
@media (max-width: 639.98px) {
  .sz-buehne.card { padding: 16px 14px 14px; min-height: 0; }
  .sz-mit-steuer .sz-buehne.card { min-height: var(--sz-buehne-min, 0px); }
  .sz-koerbe { grid-template-columns: 1fr; }
  .sz-stichworte { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 110px; }
  .sz-stichwort { font-size: var(--fs-ui); min-height: 40px; padding: 6px 10px; }
  .sz-ut-satz { font-size: var(--fs-ui); }
  /* Handy: eine Zeile, die Nebenknöpfe nur als Symbol (Name als aria-label und Tooltip), Glas über die volle Breite */
  .sz-steuer { flex-wrap: nowrap; justify-content: flex-start; gap: 6px; margin: 10px -16px 0; padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
    border-top-color: var(--linie-haar); }
  .sz-steuer-links, .sz-steuer-rechts { display: contents; }
  .sz-steuer .sz-zurueck, .sz-steuer .sz-pause, .sz-steuer .sz-ton, .sz-steuer .sz-ut, .sz-steuer .sz-abbruch {
    min-width: 44px; min-height: 44px; padding: 0 10px; justify-content: center; flex: 0 0 auto; }
  .sz-steuer .sz-zurueck > span:last-child, .sz-steuer .sz-pause > span:last-child, .sz-steuer .sz-ton > span:last-child,
  .sz-steuer .sz-ut > span:last-child, .sz-steuer .sz-abbruch > span:last-child {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .sz-steuer .sz-zurueck { order: 1; } .sz-steuer .sz-pause { order: 2; } .sz-steuer .sz-ton { order: 3; }
  .sz-steuer .sz-ut { order: 4; } .sz-steuer .sz-abbruch { order: 5; }
  .sz-steuer .sz-weiter { order: 9; margin-left: auto; min-height: 44px; }
  .sz-szene-titel { font-size: var(--fs-card); }
  .sz-titel { font-size: var(--fs-card); }
  .sz-schritt-knoepfe { flex-direction: column; }
}

/* ------------------------------------------------------------ Ruhe */
@media (prefers-reduced-motion: reduce) {
  .sz-blase, .sz-titel-animiert .sz-titel-wort, .sz-stichwort, .sz-buehne.sz-rein, .sz-weiter.sz-bereit { animation: none; }
  .sz-titel-animiert .sz-titel-wort { opacity: 1; transform: none; }
  .sz-fortschritt-balken, .sz-ut-wort { transition: none; }
}
html.nd-ruhig .sz-blase, html.nd-ruhig .sz-titel-animiert .sz-titel-wort, html.nd-ruhig .sz-stichwort,
html.nd-ruhig .sz-buehne.sz-rein, html.nd-ruhig .sz-weiter.sz-bereit { animation: none; }
html.nd-ruhig .sz-titel-animiert .sz-titel-wort { opacity: 1; transform: none; }

/* ============================================================ Grafiken je Erklär-Szene (Modul 1)
   Jede Erklär-Szene bringt ihre eigene Motion-Grafik (frontend/js/szenen/grafiken/<lektion>/<szene>.js) auf die
   Standardbühne. Gemeinsamer Baukasten: Glas statt Fläche, Token statt Farbwerte, Zustände nur als farbige Schrift
   oder Kontur (Grün richtig, Rot nur für Fehler und Erfindungen). Erscheinen über g-aus → g-an (Übergang), fortlaufende
   Bewegung über Keyframes; prefers-reduced-motion und html.nd-ruhig schalten beides ab, die Teile blenden dann nur ein.
   Schriftgrößen nur Token (kleinste --fs-small 12,5 px). */
.sz-grafik { position: relative; z-index: 1; flex: 1 1 auto; min-height: 250px; display: flex; flex-direction: column;
  justify-content: center; align-items: stretch; overflow: hidden; padding: 12px 12px; }
.sz-grafik * { box-sizing: border-box; min-width: 0; }
.sz-mit-grafik .sz-stichworte { display: none; }
.g-aus { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1); }
.g-aus.g-an { opacity: 1; transform: none; }
.g-weg { opacity: 0 !important; transition: opacity 0.4s ease, transform 0.4s ease; pointer-events: none; }
.g-buehne { position: relative; width: 100%; min-height: 230px; }
.g-zeile { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; width: 100%; }
.g-spalte { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.g-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; width: 100%; align-items: center; justify-items: center; }
.g-spalten-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-mitte { text-align: center; }
.g-text { color: var(--glas-text); font-size: var(--fs-ui); line-height: 1.45; margin: 0; }
.g-gross { font-size: var(--fs-page); font-weight: 700; line-height: 1.3; }
.g-klein { font-size: var(--fs-small); }
.g-leise { color: var(--glas-leise); }
.g-stark { color: var(--text-stark); font-weight: 700; }
.g-farbe-m { color: var(--m); }
.g-ok { color: var(--status-gruen); }
.g-nein { color: var(--rot-nacht); }
.g-warn { color: var(--bernstein); }
.g-durch { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--rot-nacht); }
.g-karte { background: var(--glas); border: 1px solid var(--glas-rand); border-radius: var(--r-kachel); padding: 10px 14px;
  color: var(--glas-text); font-size: var(--fs-ui); line-height: 1.4; max-width: 100%; overflow-wrap: break-word; hyphens: auto;
  box-shadow: 0 0 var(--karte-schein-weite, 12px) color-mix(in srgb, var(--m) 18%, transparent); }
.g-karte.g-leuchtet, .g-kachel.g-leuchtet, .g-glied.g-leuchtet { border-color: var(--m); box-shadow: 0 0 20px color-mix(in srgb, var(--m) 40%, transparent); }
.g-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid color-mix(in srgb, var(--m) 55%, transparent);
  border-radius: var(--r-kachel); background: color-mix(in srgb, var(--m) 9%, transparent); color: var(--text-stark); font-size: var(--fs-body);
  font-weight: 700; max-width: 100%; overflow-wrap: break-word; hyphens: auto; line-height: 1.3; }
.g-chip.g-ok { border-color: var(--status-gruen); background: color-mix(in srgb, var(--status-gruen) 9%, transparent); color: var(--status-gruen); }
.g-chip.g-nein { border-color: var(--rot-nacht); background: color-mix(in srgb, var(--rot-nacht) 9%, transparent); color: var(--rot-nacht); }
.g-chip.g-warn { border-color: var(--bernstein); background: color-mix(in srgb, var(--bernstein) 9%, transparent); color: var(--bernstein); }
.g-bild { width: 88px; height: 88px; object-fit: contain; flex: 0 0 auto; filter: drop-shadow(0 6px 14px var(--schatten-kachel)); }
.g-bild-gross { width: 128px; height: 128px; }
.g-bild-klein { width: 48px; height: 48px; }
.g-svg { display: inline-flex; line-height: 0; color: var(--m); width: 40px; height: 40px; flex: 0 0 auto; }
.g-svg svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.g-svg.g-gross { width: 72px; height: 72px; }
.g-svg.g-klein { width: 24px; height: 24px; }
.g-haken { color: var(--status-gruen); }
.g-kreuz { color: var(--rot-nacht); }
.g-zeichnet svg path, .g-zeichnet svg polyline, .g-zeichnet svg circle { stroke-dasharray: 80; stroke-dashoffset: 80; animation: g-zeichnen 0.7s ease-out forwards; }
@keyframes g-zeichnen { to { stroke-dashoffset: 0; } }
.g-merksatz { text-align: center; font-size: var(--fs-page); font-weight: 700; color: var(--text-stark); line-height: 1.35; padding: 12px 18px;
  border-radius: var(--r-kachel); border: 1px solid color-mix(in srgb, var(--m) 60%, transparent); background: var(--glas);
  box-shadow: 0 0 24px color-mix(in srgb, var(--m) 25%, transparent); max-width: 640px; margin: 0 auto; }
.g-woerter .g-wort { display: inline-block; opacity: 0; transform: translateY(10px); transition: opacity 0.35s, transform 0.35s; margin-right: 0.28em; }
.g-woerter .g-wort.g-an { opacity: 1; transform: none; }
.g-tippt::after { content: "|"; color: var(--m); animation: g-blink 1s steps(1) infinite; }
@keyframes g-blink { 50% { opacity: 0; } }
/* Bewegungen */
@keyframes g-dreh { to { transform: rotate(360deg); } }
@keyframes g-puls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes g-flackern { 0%, 100% { opacity: 1; } 45% { opacity: 0.55; } 55% { opacity: 0.95; } 70% { opacity: 0.5; } }
@keyframes g-wackeln { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-3deg) translateY(2px); } 75% { transform: rotate(3deg) translateY(-2px); } }
@keyframes g-schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes g-fliesst { from { transform: translateX(-30px); opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } to { transform: translateX(var(--weg, 200px)); opacity: 0; } }
@keyframes g-leuchten { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--m) 45%, transparent); } 50% { box-shadow: 0 0 22px 4px color-mix(in srgb, var(--m) 35%, transparent); } }
.g-dreh { animation: g-dreh 8s linear infinite; }
.g-puls { animation: g-puls 2.4s ease-in-out infinite; }
.g-flackert { animation: g-flackern 1.8s ease-in-out infinite; }
.g-wackelt { animation: g-wackeln 1.6s ease-in-out infinite; }
.g-schwebt { animation: g-schweben 4s ease-in-out infinite; }
.g-leuchtend { animation: g-leuchten 2.2s ease-in-out infinite; }
.sz-pausiert .sz-grafik *, .sz-pausiert .sz-grafik *::before, .sz-pausiert .sz-grafik *::after { animation-play-state: paused; }
/* Handy */
.g-handy { position: relative; width: 150px; height: 230px; flex: 0 0 auto; border: 2px solid color-mix(in srgb, var(--glas-text) 35%, transparent);
  border-radius: 22px; background: var(--grund-inhalt-2); padding: 16px 10px 12px; display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 14px 30px var(--schatten-kachel); }
.g-handy::before { content: ""; position: absolute; top: 6px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px;
  background: color-mix(in srgb, var(--glas-text) 25%, transparent); }
.g-handy-schirm { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 0; }
.g-handy-nachricht { background: color-mix(in srgb, var(--m) 14%, transparent); border: 1px solid color-mix(in srgb, var(--m) 40%, transparent);
  border-radius: 12px 12px 4px 12px; padding: 6px 8px; font-size: var(--fs-small); line-height: 1.3; color: var(--glas-text); min-height: 2.6em; overflow-wrap: break-word; hyphens: auto; }
.g-handy-vorschlag { text-align: center; font-size: var(--fs-small); color: var(--glas-leise); min-height: 1.6em; padding: 3px 4px; border-radius: 4px;
  border: 1px dashed var(--glas-rand); transition: color 0.4s, border-color 0.4s; }
.g-handy-vorschlag.g-leuchtet { color: var(--m); border-color: var(--m); font-weight: 700; }
.g-handy-tasten { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.g-handy-tasten span { height: 9px; border-radius: 2px; background: color-mix(in srgb, var(--glas-text) 14%, transparent); }
.g-handy-kacheln { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
.g-handy-kacheln span { height: 26px; border-radius: 6px; border: 1px solid var(--glas-rand); background: var(--glas); }
/* Sprechblasen */
.g-blase { position: relative; border: 1px solid color-mix(in srgb, var(--m) 45%, transparent); background: color-mix(in srgb, var(--m) 8%, transparent);
  border-radius: 14px; padding: 8px 12px; font-size: var(--fs-body); line-height: 1.35; color: var(--glas-text); overflow-wrap: break-word; hyphens: auto; max-width: 100%; }
.g-blase::after { content: ""; position: absolute; left: 16px; bottom: -7px; width: 12px; height: 12px; background: var(--grund-inhalt-2);
  border-right: 1px solid color-mix(in srgb, var(--m) 45%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--m) 45%, transparent); transform: rotate(45deg); }
.g-blase-r::after { left: auto; right: 16px; }
.g-blase.g-nein { border-color: var(--rot-nacht); color: var(--rot-nacht); }
.g-blase.g-nein::after { border-color: var(--rot-nacht); }
/* Waage */
.g-waage { position: relative; width: min(100%, 420px); height: 200px; margin: 0 auto; flex: 0 0 auto; }
.g-waage-saeule { position: absolute; left: 50%; top: 34px; bottom: 0; width: 4px; margin-left: -2px; border-radius: 2px; background: color-mix(in srgb, var(--glas-text) 35%, transparent); }
.g-waage-fuss { position: absolute; left: 50%; bottom: 0; width: 120px; height: 6px; margin-left: -60px; border-radius: 3px; background: color-mix(in srgb, var(--glas-text) 35%, transparent); }
.g-waage-balken { position: absolute; left: 50%; top: 30px; width: 300px; height: 4px; margin-left: -150px; border-radius: 2px; background: var(--m);
  transform-origin: 50% 50%; transition: transform 1.6s cubic-bezier(0.3, 0.7, 0.3, 1); }
.g-waage-schale { position: absolute; top: 32px; width: 130px; display: flex; flex-direction: column; align-items: center; gap: 0; transition: transform 1.6s cubic-bezier(0.3, 0.7, 0.3, 1); }
.g-waage-schale.links { left: calc(50% - 150px - 65px); }
.g-waage-schale.rechts { right: calc(50% - 150px - 65px); }
.g-waage-schale .g-seil { width: 2px; height: 34px; background: color-mix(in srgb, var(--glas-text) 35%, transparent); }
.g-waage-schale .g-inhalt { display: flex; align-items: flex-end; justify-content: center; gap: 4px; min-height: 48px; padding-bottom: 4px; }
.g-waage-schale .g-teller { width: 120px; height: 12px; border-radius: 0 0 60px 60px / 0 0 12px 12px; background: color-mix(in srgb, var(--m) 55%, transparent); }
/* Zeitstrahl */
.g-zeitstrahl { position: relative; width: 100%; height: 130px; flex: 0 0 auto; }
.g-zeitstrahl-linie { position: absolute; left: 6%; right: 6%; top: 50%; height: 3px; margin-top: -1px; background: color-mix(in srgb, var(--glas-text) 30%, transparent); border-radius: 2px; transform-origin: left; transition: transform 1.8s ease-out; }
.g-zeitstrahl-punkt { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--m); box-shadow: 0 0 0 4px color-mix(in srgb, var(--m) 25%, transparent); }
.g-zeitstrahl-text { position: absolute; width: 160px; margin-left: -80px; text-align: center; font-size: var(--fs-small); line-height: 1.3; color: var(--glas-text); }
.g-zeitstrahl-text .g-datum { display: block; font-weight: 700; color: var(--text-stark); font-size: var(--fs-body); }
.g-zeitstrahl-text.oben { bottom: 50%; padding-bottom: 14px; }
.g-zeitstrahl-text.unten { top: 50%; padding-top: 14px; }
.g-zeitstrahl-marker { position: absolute; top: 10px; bottom: 10px; width: 2px; margin-left: -1px; transition: left 2.6s ease-in-out; }
.g-zeitstrahl-marker::before { content: ""; position: absolute; inset: 0; background: var(--bernstein); border-radius: 1px; }
.g-zeitstrahl-marker span { position: absolute; top: -2px; left: 8px; font-size: var(--fs-small); font-weight: 700; color: var(--bernstein); white-space: nowrap; }
/* Kacheln, Kette, Mail, Rechner, Würfel */
.g-kachel { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; min-height: 92px; width: 100%;
  border-radius: var(--r-kachel); border: 1px solid var(--glas-rand); background: var(--glas); color: var(--glas-text); font-size: var(--fs-body); font-weight: 700;
  text-align: center; transform-origin: top; overflow-wrap: break-word; hyphens: auto; }
.g-kachel.g-aus { transform: perspective(600px) rotateX(-70deg); }
.g-kachel.g-aus.g-an { transform: none; }
.g-kachel .g-marke { position: absolute; top: -11px; right: -9px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grund-inhalt-2); border: 1px solid var(--glas-rand); }
.g-kachel .g-marke .g-svg { width: 16px; height: 16px; }
.g-kachel .g-betrieb { position: absolute; left: -8px; bottom: -8px; width: 34px; height: 34px; filter: none; }
.g-kette { display: flex; flex-direction: column; gap: 6px; align-items: stretch; width: min(100%, 460px); margin: 0 auto; }
.g-glied { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: var(--r-kachel); border: 1px solid var(--glas-rand); background: var(--glas);
  font-size: var(--fs-body); color: var(--glas-text); min-height: 40px; }
.g-glied .g-nr { color: var(--m); font-weight: 700; flex: 0 0 24px; text-align: center; }
.g-glied .g-balken { flex: 1 1 auto; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--glas-text) 18%, transparent); }
.g-mail { width: min(100%, 440px); margin: 0 auto; display: flex; flex-direction: column; gap: 9px; padding: 12px 14px; border-radius: var(--r-kachel);
  border: 1px solid var(--glas-rand); background: var(--glas); }
.g-mail-kopf { display: flex; gap: 8px; align-items: center; padding-bottom: 8px; border-bottom: 1px solid var(--linie-haar); font-size: var(--fs-small); color: var(--glas-leise); }
.g-mail-zeile { height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--glas-text) 22%, transparent); transform-origin: left; transition: background 0.5s, transform 0.5s, width 0.5s; }
.g-mail-zeile.g-ok { background: color-mix(in srgb, var(--status-gruen) 60%, transparent); }
.g-mail-zeile.g-nein { background: color-mix(in srgb, var(--rot-nacht) 70%, transparent); }
.g-mail-satz { display: flex; align-items: center; gap: 8px; font-size: var(--fs-body); color: var(--glas-text); transition: color 0.5s, transform 0.6s; }
.g-mail-satz.g-nein { color: var(--rot-nacht); font-weight: 700; transform: translateX(10px); }
.g-mail-satz.g-ok { color: var(--status-gruen); }
.g-rechner { font-variant-numeric: tabular-nums; font-size: var(--fs-page); font-weight: 700; color: var(--text-stark); padding: 8px 14px; border-radius: var(--r-feld);
  border: 1px solid var(--glas-rand); background: var(--grund-inhalt-2); text-align: right; min-width: 160px; line-height: 1.3; }
.g-rechner .g-klein { display: block; font-weight: 400; color: var(--glas-leise); }
.g-wuerfel { width: 72px; height: 72px; flex: 0 0 auto; border-radius: 14px; border: 2px solid var(--m); background: var(--glas); display: grid; grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr); padding: 10px; gap: 4px; transition: transform 0.9s cubic-bezier(0.3, 0.7, 0.3, 1.2); }
.g-wuerfel span { border-radius: 50%; background: transparent; transition: background 0.3s; }
.g-wuerfel span.an { background: var(--text-stark); }
.g-wuerfel.schwer { border-bottom-width: 7px; }
.g-wuerfel.rollt { animation: g-rollen 0.9s cubic-bezier(0.3, 0.7, 0.3, 1) 1; }
@keyframes g-rollen { 0% { transform: translateX(-60px) rotate(-200deg); } 100% { transform: none; } }
.g-trenner { width: 2px; align-self: stretch; min-height: 160px; background: color-mix(in srgb, var(--glas-text) 30%, transparent); border-radius: 1px; transform-origin: top; transition: transform 1s ease; }
.g-trenner.g-aus { transform: scaleY(0); opacity: 1; }
.g-trenner.g-aus.g-an { transform: none; }
.g-zaehler { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.g-zaehler-zahl { font-size: var(--fs-display); font-weight: 700; color: var(--m); font-variant-numeric: tabular-nums; line-height: 1.1; }
.g-zaehler-wort { font-size: var(--fs-body); color: var(--glas-leise); }
.g-pfeil { width: 40px; height: 2px; background: color-mix(in srgb, var(--glas-text) 40%, transparent); position: relative; flex: 0 0 auto; }
.g-pfeil::after { content: ""; position: absolute; right: -1px; top: -5px; width: 10px; height: 10px; border-top: 2px solid color-mix(in srgb, var(--glas-text) 40%, transparent); border-right: 2px solid color-mix(in srgb, var(--glas-text) 40%, transparent); transform: rotate(45deg); }
.g-leitung { position: relative; flex: 1 1 auto; height: 3px; min-width: 60px; background: color-mix(in srgb, var(--glas-text) 25%, transparent); border-radius: 2px; overflow: visible; }
.g-leitung .g-paket { position: absolute; top: -20px; left: 0; width: 40px; height: 40px; }
.g-leitung.g-laeuft .g-paket { animation: g-fliesst 3s ease-in-out infinite; }
.g-stapel { display: flex; flex-direction: column-reverse; align-items: center; gap: 0; }
.g-stapel .g-bild { margin-top: -26px; filter: none; }
.g-tabelle { display: grid; grid-template-columns: 1fr auto auto auto; gap: 4px 10px; padding: 10px 12px; border-radius: var(--r-kachel); border: 1px solid var(--glas-rand); background: var(--glas); font-size: var(--fs-small); color: var(--glas-text); width: min(100%, 300px); }
.g-tabelle .g-zeile-balken { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--glas-text) 22%, transparent); align-self: center; }
.g-tabelle .g-svg { width: 14px; height: 14px; opacity: 0; transition: opacity 0.3s; }
.g-tabelle .g-svg.g-an { opacity: 1; }
.g-notiz { position: relative; width: min(100%, 260px); padding: 14px 16px; border-radius: 4px; background: color-mix(in srgb, var(--bernstein) 10%, var(--grund-inhalt-2)); border: 1px solid color-mix(in srgb, var(--bernstein) 40%, transparent);
  color: var(--glas-text); font-size: var(--fs-body); line-height: 1.4; transition: filter 1s ease; }
.g-notiz.g-unscharf { filter: blur(3px); }
.g-wellen { display: inline-flex; align-items: center; gap: 3px; height: 28px; }
.g-wellen span { width: 4px; border-radius: 2px; background: var(--m); height: 30%; animation: g-welle 0.9s ease-in-out infinite alternate; animation-delay: calc(var(--i) * 0.1s); }
@keyframes g-welle { from { height: 25%; } to { height: 100%; } }
.g-schloss { position: absolute; right: -6px; top: -6px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--grund-inhalt-2); border: 1px solid var(--glas-rand); }
.g-schloss .g-svg { width: 18px; height: 18px; color: var(--status-gruen); }
.g-hand { width: 36px; height: 36px; color: var(--glas-text); }
/* Szenen-Layouts */
.g-l1s1 { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; justify-items: center; gap: 12px; min-height: 250px; }
.g-l1s1 .g-handy { grid-column: 2; grid-row: 1; z-index: 1; }
.g-l1s1 .g-faecher { grid-column: 1 / -1; grid-row: 1; position: relative; width: 0; height: 0; z-index: 0; align-self: start; margin-top: 148px; }
.g-faecher-blase { position: absolute; left: -35px; top: -14px; width: 70px; height: 28px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--m) 45%, transparent);
  background: color-mix(in srgb, var(--m) 10%, transparent); opacity: 0; transform: rotate(calc((var(--i) - 3) * 24deg)) translateY(-90px);
  transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s; transition-delay: calc(var(--i) * 90ms); }
.g-faecher.g-an .g-faecher-blase { opacity: 0.9; transform: rotate(calc((var(--i) - 3) * 24deg)) translateY(-128px); }
.g-l1s1 .g-zaehler { grid-column: 3; grid-row: 1; }
.g-l1s1 .g-ki { grid-column: 1; grid-row: 1; }
.g-l1s1 .g-auftakt { grid-column: 1; grid-row: 1; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; max-width: 320px; }
.g-l1s1 .g-auftakt-symbole { display: flex; gap: 10px; align-items: center; justify-content: center; min-height: 40px; }
.g-l1s1 .g-auftakt-symbol { width: 48px; height: 48px; }
.g-l1s1 .g-auftakt-frage { min-height: 1.3em; }
.g-l1s1 .g-auftakt .g-zahnrad-weg { position: relative; }
.g-l1s1 .g-auftakt .g-zahnrad-weg .g-kreuz { position: absolute; inset: -4px; width: auto; height: auto; }
.g-l1s1 .g-handy.g-an.g-handy-leise { opacity: 0.55; transition: opacity 0.8s ease; }
.g-l1s2 { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; min-height: 250px; }
.g-l1s2 .g-handy { transition: transform 1.2s ease; }
.g-l1s2 .g-brief { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.g-l1s2 .g-seiten { position: relative; height: 24px; overflow: hidden; }
.g-l1s2 .g-seite { position: absolute; left: 0; top: 2px; width: 16px; height: 20px; border-radius: 2px; border: 1px solid color-mix(in srgb, var(--m) 50%, transparent); background: var(--glas); animation: g-fliesst 2.2s linear infinite; animation-delay: calc(var(--i) * 0.45s); }
.g-l1s2 .g-wirt { display: flex; align-items: center; gap: 10px; }
.g-l1s4 .g-wurf { display: flex; align-items: center; gap: 18px; justify-content: center; }
.g-l1s4 .g-ergebnisse { display: flex; gap: 6px; }
.g-l1s4 .g-ergebnisse span { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--glas-rand); display: grid; place-items: center; font-size: var(--fs-small); font-weight: 700; color: var(--glas-text); }
.g-l1s4 .g-ergebnisse span.g-haeufig { border-color: var(--m); color: var(--m); }
.g-l1s4 .g-wetter { display: flex; align-items: center; gap: 10px; }
.g-l1s5 .g-missverstaendnis { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 8px 12px; border-radius: var(--r-kachel); border: 1px solid var(--glas-rand); background: var(--glas); }
.g-l1s5 .g-falsch { color: var(--rot-nacht); font-weight: 700; font-size: var(--fs-ui); transition: text-decoration-color 0.4s; }
.g-l1s5 .g-richtig { color: var(--status-gruen); font-size: var(--fs-body); }
.g-l1s5 .g-zahnrad { justify-self: center; align-self: center; }
.g-l1s8 .g-koerbe { display: flex; gap: 10px; justify-content: center; align-items: flex-end; min-height: 110px; }
.g-l1s8 .g-korb { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.g-l1s8 .g-korb-mund { width: 84px; height: 44px; border: 1px solid color-mix(in srgb, var(--m) 55%, transparent); border-top: 2px solid var(--m); border-radius: 0 0 14px 14px; background: var(--glas); position: relative; overflow: hidden; }
.g-l1s8 .g-post { position: absolute; left: 50%; width: 22px; height: 14px; margin-left: -11px; border-radius: 2px; background: color-mix(in srgb, var(--glas-text) 55%, transparent); top: -30px; transition: top 0.7s cubic-bezier(0.3, 0.7, 0.3, 1); }
.g-l1s8 .g-post.g-an { top: 14px; }
.g-l1s8 .g-stift { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.g-l1s8 .g-schreibt { height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--m) 55%, transparent); width: 0; transition: width 1.4s ease; }
.g-l1s8 .g-schreibt.g-an { width: 120px; }
.g-l1s8 .g-merk { grid-column: 1 / -1; }
.g-l2s1 .g-woerter { text-align: center; font-size: var(--fs-page); font-weight: 700; color: var(--text-stark); min-height: 1.5em; }
.g-l2s2 .g-spalten-3 { gap: 16px 12px; }
.g-l2s4 .g-vergleich { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: center; justify-items: center; width: 100%; }
.g-l2s4 .g-kacheln { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; width: 100%; }
.g-l2s4 .g-kacheln .g-kachel { min-height: 70px; padding: 8px 4px; font-weight: 400; font-size: var(--fs-small); }
.g-l2s7 .g-seiten { display: grid; grid-template-columns: minmax(0, 1fr) 2px minmax(0, 1fr); gap: 14px; width: 100%; align-items: start; }
.g-l2s7 .g-karten { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.g-l2s7 .g-merk { grid-column: 1 / -1; margin-top: -16px; position: relative; z-index: 1; }
.g-l3s1 .g-buch { position: relative; width: 170px; height: 120px; border-radius: 6px 12px 12px 6px; border: 1px solid var(--glas-rand); background: var(--glas); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; flex: 0 0 auto; }
.g-l3s1 .g-buch::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: color-mix(in srgb, var(--m) 55%, transparent); }
.g-l3s1 .g-blatt { position: absolute; inset: 0; background: var(--grund-inhalt-2); border-right: 1px solid var(--glas-rand); transform-origin: left; animation: g-blaettern 0.55s ease-in forwards; animation-delay: calc(var(--i) * 0.35s); }
@keyframes g-blaettern { to { transform: perspective(500px) rotateY(-100deg); opacity: 0; } }
.g-l3s1 .g-absatz { height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--glas-text) 20%, transparent); margin-left: 8px; transition: background 0.5s, box-shadow 0.5s; }
.g-l3s1 .g-absatz.g-leuchtet { background: var(--m); box-shadow: 0 0 12px color-mix(in srgb, var(--m) 50%, transparent); }
.g-l3s1 .g-artikel { position: absolute; left: 22px; top: 44px; font-size: var(--fs-body); font-weight: 700; color: var(--m); background: var(--grund-inhalt-2); padding: 0 4px; border-radius: 3px; }
.g-l3s2 .g-pflicht { display: flex; gap: 14px; justify-content: center; align-items: center; }
.g-l3s4 .g-symbole { display: flex; gap: 18px; justify-content: center; align-items: center; }
.g-l3s4 .g-symbol { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: opacity 0.6s, filter 0.6s; }
.g-l3s4 .g-symbol.g-grau { opacity: 0.45; filter: grayscale(1); }
.g-l3s4 .g-symbol .g-strich { position: absolute; left: 10%; right: 10%; top: 50%; height: 3px; margin-top: -1px; background: var(--rot-nacht); transform: rotate(-20deg) scaleX(0); transform-origin: left; transition: transform 0.5s ease; border-radius: 2px; }
.g-l3s4 .g-symbol.g-grau .g-strich { transform: rotate(-20deg) scaleX(1); }
.g-l3s6 .g-rolle { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.g-l3s6 .g-mappe { display: flex; align-items: center; gap: 8px; transition: transform 1s ease; }
.g-l3s7 .g-waage-schale .g-inhalt .g-bild { filter: none; }
.g-l3s7 .g-waage { height: 214px; }
.g-l3s7 .g-l3s7-hinweis { margin-top: 6px; }
.g-l4s1 .g-reihe { display: flex; gap: 14px; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.g-l4s1 .g-ding { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 92px; }
.g-l4s1 .g-ding .g-ki { font-size: var(--fs-small); font-weight: 700; color: var(--m); min-height: 1.3em; }
.g-l4s2 .g-geraete { display: flex; gap: 16px; justify-content: center; align-items: flex-end; }
.g-l4s2 .g-schirm { width: 250px; height: 160px; border-radius: 10px; border: 2px solid color-mix(in srgb, var(--glas-text) 35%, transparent); background: var(--grund-inhalt-2); padding: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; align-content: start; }
.g-l4s2 .g-schirm span, .g-l4s2 .g-handy-kacheln span { display: grid; place-items: center; font-size: var(--fs-small); color: var(--glas-text); overflow: hidden; overflow-wrap: break-word; hyphens: auto; padding: 2px 4px; text-align: center; line-height: 1.15; }
.g-l4s2 .g-schirm span { height: 40px; border-radius: 6px; border: 1px solid var(--glas-rand); background: var(--glas); transition: border-color 0.4s, box-shadow 0.4s, color 0.4s; }
.g-l4s2 .g-schirm span.g-leuchtet, .g-l4s2 .g-handy-kacheln span.g-leuchtet { border-color: var(--m); color: var(--m); font-weight: 700; box-shadow: 0 0 14px color-mix(in srgb, var(--m) 40%, transparent); }
.g-l4s2 .g-vorschlag { display: flex; align-items: center; gap: 8px; }
.g-l4s4 .g-sprich { display: flex; align-items: center; gap: 12px; justify-content: center; }
.g-l4s4 .g-bericht { width: min(100%, 220px); display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: var(--r-kachel); border: 1px solid var(--glas-rand); background: var(--glas); position: relative; }
.g-l4s4 .g-karten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; }
.g-l4s4 .g-karten .g-kachel { min-height: 64px; font-weight: 400; font-size: var(--fs-small); }
.g-l4s4 .g-karten .g-hand { position: absolute; right: -8px; bottom: -10px; width: 28px; height: 28px; }
.g-l4s6 .g-begriffe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 100%; align-items: start; justify-items: center; }
.g-l4s6 .g-zwei { display: flex; gap: 10px; align-items: flex-start; }
.g-l4s6 .g-zwei .g-blase { transition: border-color 0.6s, color 0.6s, transform 0.6s; }
.g-l4s7 .g-orte { display: grid; grid-template-columns: minmax(0, 1fr) minmax(60px, 0.6fr) minmax(0, 1fr); gap: 10px; width: 100%; align-items: center; justify-items: center; }
.g-l4s7 .g-ort { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; }
.g-l4s7 .g-ordner-ruht { position: absolute; left: 50%; bottom: 36px; margin-left: -18px; }
/* Schmal (390 px) */
@media (max-width: 639.98px) {
  .sz-grafik { min-height: 210px; }
  .g-spalten, .g-spalten-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .g-bild { width: 64px; height: 64px; }
  .g-bild-gross { width: 92px; height: 92px; }
  .g-bild-klein { width: 48px; height: 48px; }
  .g-handy { width: 120px; height: 190px; padding: 14px 8px 10px; }
  .g-chip { padding: 6px 9px; }
  .g-waage { height: 180px; }
  .g-waage-balken { width: 210px; margin-left: -105px; }
  .g-waage-schale { width: 96px; }
  .g-waage-schale.links { left: calc(50% - 105px - 48px); }
  .g-waage-schale.rechts { right: calc(50% - 105px - 48px); }
  .g-waage-schale .g-teller { width: 88px; }
  .g-gross, .g-merksatz, .g-l2s1 .g-woerter { font-size: var(--fs-card); }
  .g-zeitstrahl-text { width: 120px; margin-left: -60px; }
  .g-l1s1 { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 8px; }
  .g-l1s1 .g-handy { grid-column: 1; grid-row: 2; }
  .g-l1s1 .g-faecher { grid-column: 1; grid-row: 2; margin-top: 120px; }
  .g-l1s1 .g-zaehler { grid-column: 1; grid-row: 3; }
  .g-l1s1 .g-ki { grid-column: 1; grid-row: 1; }
  .g-faecher.g-an .g-faecher-blase { transform: rotate(calc((var(--i) - 3) * 24deg)) translateY(-108px); }
  .g-l1s1 .g-auftakt { grid-column: 1; grid-row: 1; }
  .g-l1s2 { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .g-l2s4 .g-vergleich { grid-template-columns: minmax(0, 1fr); }
  .g-l2s4 .g-kacheln { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .g-l2s4 .g-kacheln .g-kachel { padding: 6px 2px; min-height: 60px; }
  .g-l2s4 .g-kacheln .g-kachel span { display: none; }
  .g-l2s7 .g-merk { margin-top: -10px; }
  .g-l4s2 .g-geraete { gap: 10px; width: 100%; }
  .g-l4s2 .g-schirm { width: auto; flex: 1 1 auto; height: auto; grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .g-l4s2 .g-schirm span { height: auto; min-height: 26px; }
  .g-l4s2 .g-schirm span:empty { display: none; }
  .g-l2s7 .g-seiten { gap: 8px; }
  .g-l2s7 .g-karten .g-chip { font-size: var(--fs-small); padding: 6px 8px; }
  .g-l4s4 .g-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-l4s6 .g-begriffe { grid-template-columns: minmax(0, 1fr); }
  .g-l4s7 .g-orte { grid-template-columns: minmax(0, 1fr) minmax(40px, 0.4fr) minmax(0, 1fr); gap: 6px; }
}
/* Ruhe: nichts bewegt sich, Teile blenden an ihrem Zeitpunkt ohne Übergang ein */
html.nd-ruhig .sz-grafik *, html.nd-ruhig .sz-grafik *::before, html.nd-ruhig .sz-grafik *::after { animation: none; transition: none; }
html.nd-ruhig .g-kachel.g-aus { transform: none; }
html.nd-ruhig .g-trenner.g-aus { transform: none; }
html.nd-ruhig .g-l1s2 .g-seite, html.nd-ruhig .g-l3s1 .g-blatt { display: none; }
html.nd-ruhig .g-wuerfel.rollt { animation: none; }

/* ============================================================ Grafiken je Erklär- und Rückmelde-Szene (Modul 2)
   23 Motion-Grafiken unter frontend/js/szenen/grafiken/m2-l1 … m2-l4 (S6.2), jede nach der Bildidee ihrer Szene.
   Derselbe Baukasten wie Modul 1 (Glas, Token, g-aus → g-an); eigene Teile tragen das Präfix g-m2-. Schriftgrößen
   nur Token, Farben nur Token, Rot nur für Fehler. Ruhe und 390 px am Ende des Blocks. */
.g-chip.g-leuchtet { border-color: var(--m); box-shadow: 0 0 16px color-mix(in srgb, var(--m) 40%, transparent); }
.g-m2-fach.g-leuchtet, .g-m2-tippkarte.g-leuchtet, .g-m2-brettfeld.g-leuchtet, .g-m2-arbeitsplatz.g-leuchtet {
  border-color: var(--m); box-shadow: 0 0 20px color-mix(in srgb, var(--m) 35%, transparent); }
.g-m2-textbalken { display: block; flex: 1 1 auto; height: 8px; min-width: 24px; border-radius: 4px; background: color-mix(in srgb, var(--glas-text) 22%, transparent); }
.g-m2-textbalken.g-m2-kurz { flex: 0 0 34%; }
.g-m2-nr { display: inline-block; color: var(--m); font-size: var(--fs-ui); font-weight: 700; line-height: 1; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.g-m2-browserleiste { display: flex; align-items: center; gap: 5px; padding: 6px 10px; border-bottom: 1px solid var(--linie-haar); background: var(--grund-inhalt-2); }
.g-m2-browserpunkt { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--glas-text) 30%, transparent); }
@keyframes g-m2-hops { 40% { transform: translateY(-6px) scale(1.06); } }
@keyframes g-m2-reinrechts { from { transform: translateX(26px); } to { transform: none; } }

/* m2-l1-s1 Eingabe, Haustür, Wolke */
.g-m2l1s1 { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.g-m2-bahn { flex-wrap: nowrap; gap: 10px; }
.g-m2-eingabe { display: flex; align-items: center; gap: 6px; width: 200px; min-height: 46px; padding: 8px 12px; border: 1px solid var(--glas-rand);
  border-radius: var(--r-feld); background: var(--grund-inhalt-2); color: var(--glas-text); font-size: var(--fs-body); transition: border-color 0.5s, box-shadow 0.5s, opacity 0.55s, transform 0.55s; }
.g-m2-eingabe.g-m2-achtung { border-color: var(--bernstein); box-shadow: 0 0 16px color-mix(in srgb, var(--bernstein) 35%, transparent); }
.g-m2-eingabe-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-stark); }
.g-m2-eingabe-text.g-tippt::after { content: none; }
.g-m2-cursor { width: 2px; height: 1.2em; background: var(--m); animation: g-blink 1s steps(1) infinite; flex: 0 0 auto; }
.g-m2-flugbahn { position: relative; flex: 1 1 auto; min-width: 120px; height: 130px; display: flex; align-items: center; justify-content: center; }
.g-m2-tuer { position: relative; }
.g-m2-tuerblatt { position: absolute; left: 30%; top: 16%; width: 40%; height: 62%; border: 2px solid var(--m); border-radius: 3px;
  background: var(--grund-inhalt-2); transform-origin: left center; transition: transform 1.2s cubic-bezier(0.3, 0.7, 0.3, 1); }
.g-m2-tuer.g-offen .g-m2-tuerblatt { transform: perspective(300px) rotateY(-70deg); }
.g-m2-flugkarte { position: absolute; left: 0; top: calc(4% + var(--hoehe, 0px)); z-index: 2; transform: translateX(-50%); padding: 3px 8px; border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--m) 55%, transparent); background: var(--grund-inhalt-2); color: var(--text-stark);
  font-size: var(--fs-small); white-space: nowrap; opacity: 0; pointer-events: none; }
.g-m2-horizont { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 140px; }
.g-m2-wolke-worte { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 4.4em; }

/* m2-l1-s2 Schließfächer */
.g-m2-faecher { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; }
.g-m2-fach { position: relative; min-height: 150px; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: 1px solid var(--glas-rand); border-radius: var(--r-kachel); background: var(--glas); transition-delay: calc(var(--i, 0) * 120ms); }
.g-m2-fach-schild { min-height: 1.4em; font-size: var(--fs-body); font-weight: 700; color: var(--text-stark); }
.g-m2-fach-innen { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.g-m2-fach-tuer { position: absolute; left: 6px; right: 6px; top: 36px; bottom: 6px; border-radius: 8px; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--m) 50%, transparent); background: color-mix(in srgb, var(--grund-inhalt-2) 88%, transparent);
  transform-origin: left center; transition: transform 0.8s cubic-bezier(0.3, 0.7, 0.3, 1); }
.g-m2-fach.g-offen .g-m2-fach-tuer { transform: perspective(500px) rotateY(-82deg); }
.g-m2-fach.g-zu .g-m2-fach-tuer { animation: g-m2-klick 0.3s ease-out; }
@keyframes g-m2-klick { 50% { transform: translateX(3px); } }

/* m2-l1-s4 Tresen */
.g-m2l1s4 { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.g-m2-raum { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; align-items: end; justify-items: center; gap: 10px; width: 100%; min-height: 160px; }
.g-m2-stapel { position: relative; width: 66px; height: 74px; transition: transform 1.4s cubic-bezier(0.3, 0.7, 0.3, 1); }
.g-m2-stapelkarte { position: absolute; left: calc(var(--i) * 2px); top: calc(var(--i) * 9px); width: 60px; height: 38px; border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--m) 50%, transparent); background: var(--glas); }
.g-m2-rechts .g-m2-stapelkarte { border-color: color-mix(in srgb, var(--status-gruen) 55%, transparent); }
.g-m2-stapel { transition: transform 1.4s cubic-bezier(0.3, 0.7, 0.3, 1), scale 1.4s ease; }
.g-m2-stapelplatz { width: 66px; height: 74px; }
.g-m2-stapel.g-m2-angekommen { scale: 0.8; margin-top: -6px; }
.g-m2-tresen, .g-m2-buero, .g-m2-cloudziel { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.g-svg.g-m2-fremd { width: 30px; height: 30px; color: var(--glas-text); }

/* m2-l1-s5 drei Arbeitsplätze */
.g-m2-arbeitsplatz { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; width: 100%;
  border-radius: var(--r-kachel); border: 1px solid transparent; transition: border-color 0.5s, box-shadow 0.5s, opacity 0.55s, transform 0.55s; }
.g-m2-arbeitsplatz.g-leuchtet { border-color: color-mix(in srgb, var(--status-gruen) 60%, transparent); box-shadow: none; }
.g-m2-arbeitsplatz.g-m2-alarm { border-color: var(--rot-nacht); box-shadow: 0 0 18px color-mix(in srgb, var(--rot-nacht) 35%, transparent); }
.g-m2-arbeitsplatz.g-m2-alarm.g-m2-ruhe { border-color: var(--glas-rand); box-shadow: none; }
.g-m2-marke { height: 28px; display: flex; align-items: center; }
.g-m2-marke .g-svg { width: 26px; height: 26px; }
.g-m2-schirm { position: relative; width: 100%; max-width: 210px; min-height: 72px; padding: 8px; display: flex; flex-direction: column; gap: 5px;
  border-radius: 8px; border: 2px solid color-mix(in srgb, var(--glas-text) 35%, transparent); background: var(--grund-inhalt-2); }
.g-m2-eingabe-zeile { font-size: var(--fs-small); color: var(--text-stark); padding: 2px 6px; border-radius: 4px; background: color-mix(in srgb, var(--m) 10%, transparent); overflow-wrap: break-word; hyphens: auto; }
.g-m2-eingabe-zeile.g-nein { color: var(--rot-nacht); background: color-mix(in srgb, var(--rot-nacht) 8%, transparent); font-weight: 700; }
.g-m2-eingabe-zeile.g-m2-schiebt.g-an { animation: g-m2-reinrechts 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.g-m2-schirm { padding-right: 44px; }
.g-m2-schirm .g-schloss { right: 4px; top: 50%; margin-top: -17px; }

/* m2-l1-s7 Schwärzen und die Grenze */
.g-m2l1s7 { width: 100%; }
.g-m2-satzkarte { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; width: min(100%, 520px); transition: opacity 0.55s, transform 0.6s, border-color 0.5s; }
.g-m2-satzkarte.g-m2-klein { transform: scale(0.94); }
.g-m2-teil { position: relative; padding: 2px 6px; font-size: var(--fs-body); color: var(--text-stark); max-width: 20em; white-space: nowrap;
  transition: max-width 0.8s ease, padding 0.8s ease, opacity 0.6s; overflow: hidden; }
.g-m2-balken { position: absolute; left: 0; top: 12%; width: 100%; height: 76%; border-radius: 2px; transform: scaleX(0); transform-origin: left;
  background: color-mix(in srgb, var(--glas-text) 88%, var(--grund-inhalt-2)); transition: transform 0.7s ease; }
.g-m2-teil.g-geschwaerzt .g-m2-balken { transform: scaleX(1); }
.g-m2-ersatz { max-width: 0; padding: 2px 0; opacity: 0; font-weight: 700; }
.g-m2-anonym .g-m2-ersatz { max-width: 20em; padding: 2px 6px; opacity: 1; }
.g-m2-anonym .g-m2-schwaerzbar { max-width: 0; padding: 2px 0; opacity: 0; }
.g-m2-grenzfall { padding-right: 80px; border-color: color-mix(in srgb, var(--bernstein) 55%, transparent); }
.g-svg.g-m2-schemen { position: absolute; right: 10px; top: 50%; width: 60px; height: 60px; margin-top: -30px; color: var(--rot-nacht); opacity: 0; filter: blur(5px);
  transition: opacity 1.6s ease, filter 1.6s ease; }
.g-m2-erkannt .g-m2-schemen { opacity: 0.8; filter: blur(1px); }

/* m2-l2-s1 Zettel für die Aushilfe */
.g-m2l2s1 { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.g-m2-uebergabe { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; justify-items: center; gap: 14px; width: 100%; }
.g-m2-person { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.g-m2-zettel { width: 120px; padding: 8px 10px; display: flex; flex-direction: column; gap: 5px; transition: width 1.2s ease, opacity 0.55s, transform 0.55s; }
.g-m2-zettel.g-m2-reicht.g-an { animation: g-m2-reichen 1.2s ease-out; }
@keyframes g-m2-reichen { from { transform: translateX(-60px) scale(0.8); } to { transform: none; } }
.g-m2-zettel .g-text { font-size: var(--fs-small); }
.g-m2-zettel .g-m2-zettelzeile { display: block; height: 7px; transform: scaleX(0); }
.g-m2-zettel.g-m2-voll { width: min(100%, 260px); }
.g-m2-fragen { display: flex; gap: 4px; height: 28px; justify-content: center; }
.g-svg.g-m2-frage { width: 24px; height: 24px; color: var(--bernstein); }
.g-m2-schreibt { display: block; width: 0; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--m) 55%, transparent); transition: width 1.4s ease, background 0.4s; }
.g-m2-schreibt.g-m2-kritzelt { width: 50px; background: color-mix(in srgb, var(--rot-nacht) 60%, transparent); animation: g-wackeln 0.6s ease-in-out infinite; }
.g-m2-schreibt.g-m2-schreibt-an { width: 80px; }
.g-m2-moeglich { display: flex; gap: 4px; justify-content: center; align-items: center; height: 26px; transition: gap 1s ease, opacity 0.55s, transform 0.55s; }
.g-m2-moeglich.g-m2-offen { gap: 18px; }
.g-m2-punkt { width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--glas-text) 35%, transparent); transition: opacity 0.8s, transform 0.8s, background 0.5s; }
.g-m2-moeglich.g-m2-eng .g-m2-punkt { opacity: 0.25; }
.g-m2-moeglich.g-m2-eng .g-m2-punkt:nth-child(5) { opacity: 1; background: var(--m); transform: scale(1.6); }

/* m2-l2-s2 Turm aus fünf Bausteinen */
.g-m2l2s2 { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; width: 100%; }
.g-m2-turmplatz { display: flex; flex-direction: column; align-items: center; }
.g-m2-turm { display: flex; flex-direction: column-reverse; align-items: center; gap: 3px; min-height: 190px; padding: 4px; border-radius: 10px; }
.g-m2-klotz { width: 160px; padding: 5px 8px; border-radius: 6px; text-align: center; font-size: var(--fs-body); font-weight: 700; color: var(--text-stark);
  border: 2px solid var(--k); background: color-mix(in srgb, var(--k) 14%, var(--grund-inhalt-2)); opacity: 0; transform: translateY(-140px);
  transition: box-shadow 0.4s; }
.g-m2-klotz.g-m2-faellt { animation: g-m2-fallen 0.7s cubic-bezier(0.5, 0, 0.75, 0) forwards; }
.g-m2-klotz.g-leuchtet { box-shadow: 0 0 16px color-mix(in srgb, var(--k) 50%, transparent); }
@keyframes g-m2-fallen { 0% { opacity: 1; transform: translateY(-140px); } 80% { opacity: 1; transform: translateY(4px); } 100% { opacity: 1; transform: none; } }
.g-m2-farbe-0 { --k: var(--m); } .g-m2-farbe-1 { --k: var(--bernstein); } .g-m2-farbe-2 { --k: var(--status-gruen); }
.g-m2-farbe-3 { --k: var(--marke-blau); } .g-m2-farbe-4 { --k: var(--rot-nacht); }
.g-m2-sockel { width: 180px; text-align: center; padding: 6px; }
.g-m2-neben { align-items: flex-start; min-height: 90px; justify-content: center; }

/* m2-l2-s4 Treppe */
.g-m2-treppe { position: relative; display: flex; align-items: flex-end; gap: 6px; width: min(100%, 520px); height: 210px; margin: 0 auto; padding-top: 44px; }
.g-m2-stufe { flex: 1 1 0; height: calc(34px + var(--i) * 26px); padding: 0 2px 6px; display: flex; align-items: flex-end; justify-content: center; text-align: center;
  border-radius: 6px 6px 0 0; border: 1px solid color-mix(in srgb, var(--m) 50%, transparent); background: var(--glas); color: var(--text-stark);
  font-size: var(--fs-small); font-weight: 700; overflow-wrap: break-word; hyphens: auto; transition: background 0.4s, border-color 0.4s, opacity 0.55s, transform 0.55s; }
.g-m2-stufe.g-leuchtet { border-color: var(--m); background: color-mix(in srgb, var(--m) 18%, var(--grund-inhalt-2)); }
.g-m2-figur { position: absolute; width: 32px; height: 32px; color: var(--text-stark);
  left: calc(var(--stufe, 0) * ((100% - 24px) / 5 + 6px) + (100% - 24px) / 10 - 16px); bottom: calc(36px + var(--stufe, 0) * 26px);
  transition: left 0.9s ease, bottom 0.9s cubic-bezier(0.3, 1.4, 0.5, 1), opacity 0.55s; }
.g-m2-figur > .g-svg { width: 32px; height: 32px; color: var(--text-stark); }
.g-m2-figur .g-m2-figur-brief { position: absolute; right: -18px; top: -6px; color: var(--m); }

/* m2-l2-s5 vorher und nachher */
.g-m2l2s5 { display: grid; grid-template-columns: minmax(0, 1fr) 2px minmax(0, 1fr); gap: 14px; width: 100%; align-items: start; }
.g-m2-seite { align-items: stretch; transition: opacity 0.6s; }
.g-m2-seite.g-m2-blass { opacity: 0.7; }
.g-notiz.g-m2-kurzzettel { width: auto; font-size: var(--fs-small); }
.g-notiz.g-m2-langzettel { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 10px 12px; }
.g-m2-zettelwort { font-size: var(--fs-small); padding-left: 8px; border-left: 3px solid var(--m); color: var(--text-stark); }
.g-mail.g-m2-minimail { width: 100%; }
.g-m2-mail-vorher.g-m2-falsch { border-color: var(--rot-nacht); }
.g-m2-ohne-name { align-self: flex-start; }

/* m2-l2-s6 Kreidetafel und Webseite */
.g-m2l2s6 { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: start; gap: 10px; width: 100%; }
.g-m2-blatt { grid-row: 1; grid-column: 1; width: min(100%, 460px); transition: transform 0.9s ease, opacity 0.6s; }
.g-m2-blatt.g-m2-krone { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; }
.g-m2-krone > .g-zeile { grid-column: 1 / -1; justify-content: flex-start; }
.g-m2-blatt.g-m2-krone.g-m2-umgeblaettert { transform: perspective(800px) rotateY(-80deg); opacity: 0; }
.g-m2-kreide { position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 96px; padding: 10px 14px; border-radius: 6px; overflow: hidden;
  border: 6px solid color-mix(in srgb, var(--bernstein) 45%, transparent); background: var(--grund-inhalt-2); }
.g-m2-kreidewort { font-size: var(--fs-ui); color: var(--text-stark); font-style: italic; }
.g-m2-kreidewort.g-nein { color: var(--rot-nacht); text-decoration: line-through; }
.g-m2-kreidewort.g-weg { display: none; }
.g-m2-schwamm { position: absolute; top: 10px; left: -40px; width: 36px; height: 22px; border-radius: 4px; background: color-mix(in srgb, var(--glas-text) 35%, transparent); opacity: 0; }
.g-m2-schwamm.g-m2-wischt { animation: g-m2-wischen 1.2s ease-in-out forwards; }
@keyframes g-m2-wischen { 0% { opacity: 1; left: -10px; top: 10px; } 50% { opacity: 1; left: 70%; top: 30px; } 100% { opacity: 0; left: 20%; top: 50px; } }
.g-m2-webseite { display: flex; flex-direction: column; gap: 8px; padding-bottom: 10px; overflow: hidden; border: 1px solid var(--glas-rand); border-radius: var(--r-kachel); background: var(--glas); }
.g-m2-fliesstext { display: flex; flex-direction: column; padding: 0 12px; }
.g-m2-fliesstext .g-m2-textbalken { flex: 0 0 auto; height: 5px; margin-bottom: 4px; width: 100%;
  transition: height 0.8s, margin 0.8s, opacity 0.8s, background 0.6s; }
.g-m2-fliesstext .g-m2-textbalken:nth-child(3n+2) { width: 88%; }
.g-m2-fliesstext .g-m2-textbalken:nth-child(3n) { width: 74%; }
.g-m2-fliesstext.g-m2-lang .g-m2-textbalken { background: color-mix(in srgb, var(--rot-nacht) 35%, transparent); }
.g-m2-fliesstext.g-m2-klar .g-m2-textbalken { height: 9px; margin-bottom: 7px; background: color-mix(in srgb, var(--m) 45%, transparent); }
.g-m2-fliesstext.g-m2-klar .g-m2-textbalken.g-m2-schmilzt { height: 0; margin-bottom: 0; opacity: 0; }
.g-m2-webseite > .g-zeile { justify-content: flex-start; padding: 0 12px; }
.g-m2l2s6.g-m2-beide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-m2l2s6.g-m2-beide .g-m2-blatt { grid-row: 1; }
.g-m2l2s6.g-m2-beide .g-m2-blatt.g-m2-krone { grid-column: 1; transform: none; opacity: 1; }
.g-m2l2s6.g-m2-beide .g-m2-webseite { grid-column: 2; }
.g-m2l2s6 .g-m2-zettelchip { grid-column: 1 / -1; grid-row: 2; }

/* m2-l2-s8 vier Tipp-Karten */
.g-m2-tippfaecher { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: 100%; transition: transform 0.8s; }
.g-m2-tippkarte { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px 10px; text-align: center;
  border-radius: var(--r-kachel); border: 1px solid var(--glas-rand); background: var(--glas); transition: opacity 0.55s, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s, box-shadow 0.4s; }
.g-m2-tippkarte.g-aus { transform: translateX(46px) rotate(5deg); }
.g-m2-tippkarte.g-aus.g-an { transform: none; }
.g-m2-tippkarte > .g-m2-nr { position: absolute; top: 8px; left: 10px; }
.g-m2-sprechpunkte { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--m); box-shadow: 10px 0 0 var(--m), -10px 0 0 var(--m); }
.g-m2-tippfaecher.g-m2-zusammen { transform: scale(0.9); }
.g-notiz.g-m2-minizettel { width: auto; padding: 8px; display: inline-flex; transition: box-shadow 0.4s; }

/* m2-l3-s1 zwei Sprechblasen und die Lupe */
.g-m2-blasenpaar { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; width: min(100%, 520px); margin: 0 auto; padding: 14px 0 6px; }
.g-m2-sprecher { display: flex; align-items: center; gap: 10px; min-height: 70px; padding: 12px 14px; }
.g-svg.g-m2-verdeckt { position: absolute; right: 8px; top: -14px; width: 30px; height: 30px; opacity: 0; transform: scale(0.4); transition: opacity 0.5s, transform 0.5s; }
.g-svg.g-m2-verdeckt.g-m2-sichtbar { opacity: 1; transform: none; }
.g-svg.g-m2-lupe { position: absolute; left: -6px; top: 26px; z-index: 2; color: var(--text-stark); transition: left 2.4s ease-in-out, opacity 0.55s, transform 0.55s; }
.g-svg.g-m2-lupe.g-m2-gleitet { left: calc(100% - 66px); }
.g-m2-vierfelder { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.g-m2-feld { width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; border: 1px solid var(--glas-rand); background: var(--glas);
  color: var(--glas-text); font-size: var(--fs-body); font-weight: 700; transition: border-color 0.4s, color 0.4s, box-shadow 0.4s; }
.g-m2-feld.g-leuchtet { border-color: var(--m); color: var(--text-stark); box-shadow: 0 0 14px color-mix(in srgb, var(--m) 40%, transparent); }

/* m2-l3-s2 vier Markierungen */
.g-m2l3s2 { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: center; width: 100%; }
.g-m2-fehlerblatt { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; transition: border-color 0.5s, opacity 0.55s, transform 0.55s; }
.g-m2-fehlerblatt.g-m2-warnrand { border-color: var(--bernstein); }
.g-m2-blattzeile { display: flex; align-items: center; gap: 8px; }
.g-m2-treffer { position: relative; padding: 1px 6px; border-radius: 4px; font-size: var(--fs-body); color: var(--text-stark); transition: background 0.4s, box-shadow 0.4s; }
.g-m2-treffer.g-m2-markiert { background: color-mix(in srgb, var(--k) 22%, transparent); box-shadow: 0 0 0 2px var(--k); animation: g-m2-hops 0.45s ease-out; }
.g-m2-ton-0 { --k: var(--rot-nacht); } .g-m2-ton-1 { --k: var(--bernstein); } .g-m2-ton-2 { --k: var(--marke-blau); } .g-m2-ton-3 { --k: var(--m); }
.g-m2-schilder { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.g-chip.g-m2-schild { border-color: var(--k); background: color-mix(in srgb, var(--k) 10%, transparent); }

/* m2-l3-s4 drei Sätze lösen sich */
.g-m2l3s4 { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.g-m2-zweispalt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: center; width: 100%; }
.g-m2-entwurf { display: flex; flex-direction: column; gap: 9px; padding: 14px; transition: gap 0.8s, opacity 0.55s, transform 0.55s; }
.g-m2-entwurf .g-m2-textbalken { height: 9px; transition: transform 0.8s, opacity 0.6s, background 0.4s, height 0.8s, margin 0.8s; }
.g-m2-entwurf .g-m2-textbalken.g-m2-rot { background: color-mix(in srgb, var(--rot-nacht) 70%, transparent); }
.g-m2-entwurf .g-m2-textbalken.g-m2-raus { transform: translateX(60px); opacity: 0; height: 0; margin: -4.5px 0; }
.g-m2-entwurf.g-m2-zusammen { gap: 6px; }
.g-m2-ablage { display: flex; flex-direction: column; gap: 10px; }
.g-m2-grund { display: flex; align-items: center; gap: 8px; }
.g-m2-grund.g-aus { transform: translateX(-30px); }
.g-m2-grund.g-aus.g-an { transform: none; }

/* m2-l3-s5 Gegenlesen */
.g-m2l3s5 { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: center; width: 100%; }
.g-m2l3s5 > .g-spalte { align-items: stretch; }
.g-m2-schritte { display: flex; gap: 8px; align-items: center; }
.g-m2-schritt { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--glas-rand); color: var(--glas-text);
  font-size: var(--fs-body); font-weight: 700; transition: border-color 0.4s, color 0.4s, box-shadow 0.4s; }
.g-m2-schritt.g-leuchtet { border-color: var(--m); color: var(--text-stark); box-shadow: 0 0 14px color-mix(in srgb, var(--m) 40%, transparent); }
.g-m2-schritt.g-m2-fertig { border-color: var(--status-gruen); color: var(--status-gruen); }
.g-m2-lesebl { position: relative; width: 100%; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; overflow: hidden; }
.g-m2-lesezeile { position: relative; display: flex; transform-origin: left; transition: opacity 0.6s, transform 0.6s; }
.g-m2-lesezeile .g-m2-textbalken { height: 9px; }
.g-m2-reizmarke { position: absolute; left: 30%; top: -3px; width: 22%; height: 15px; border-radius: 3px; background: color-mix(in srgb, var(--bernstein) 50%, transparent);
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s; }
.g-m2-lesezeile:nth-child(odd) .g-m2-reizmarke { left: 58%; width: 16%; }
.g-m2-lesezeile.g-m2-markiert .g-m2-reizmarke { transform: scaleX(1); }
.g-m2-lesezeile.g-m2-gestrichen { opacity: 0.15; transform: scaleX(0.3); }
.g-m2-scan { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--m); opacity: 0; box-shadow: 0 0 10px var(--m); }
.g-m2-scannt .g-m2-scan { opacity: 0.8; animation: g-m2-scan 2.4s linear infinite; }
@keyframes g-m2-scan { from { top: 0; } to { top: 100%; } }
.g-svg.g-m2-radierer { position: absolute; right: -60px; top: 40%; width: 44px; height: 44px; color: var(--glas-text); transition: right 1s ease; }
.g-svg.g-m2-radierer.g-m2-radiert { right: 12px; animation: g-wackeln 0.8s ease-in-out 2; }
.g-m2-stempel { position: absolute; right: 14px; bottom: 8px; opacity: 0; transform: scale(2.2) rotate(-18deg); transition: opacity 0.3s, transform 0.45s cubic-bezier(0.3, 1.6, 0.5, 1); }
.g-m2-stempel.g-m2-gestempelt { opacity: 1; transform: rotate(-12deg); }
.g-m2-reizleiste { display: flex; flex-wrap: wrap; gap: 6px; align-content: center; }

/* m2-l3-s6 vier Augen */
.g-m2l3s6 { display: flex; flex-direction: column; gap: 12px; width: 100%; align-items: center; }
.g-m2-textarten { display: flex; flex-wrap: wrap; gap: 6px; }
.g-m2-tisch { position: relative; width: min(100%, 460px); min-height: 180px; display: flex; align-items: flex-end; justify-content: center; padding-top: 58px; }
.g-svg.g-m2-augen { position: absolute; top: 4px; width: 84px; height: 42px; color: var(--glas-text); }
.g-m2-augen-1 { left: 8%; transition: left 1.6s ease-in-out, opacity 0.55s, transform 0.55s; }
.g-m2-augen-1.g-m2-wohlwollend { left: 62%; }
.g-m2-augen-2 { left: calc(50% - 42px); color: var(--m); }
.g-m2-augen-2.g-m2-haengt { animation: g-m2-stutzen 0.8s ease-in-out 2; }
@keyframes g-m2-stutzen { 50% { transform: translateY(6px) scale(1.08); } }
.g-m2-angebot { display: flex; flex-direction: column; gap: 8px; width: min(100%, 300px); padding: 14px; transition: transform 1.1s ease, opacity 1.1s; }
.g-m2-zahl { align-self: flex-start; padding: 2px 8px; border-radius: 4px; font-size: var(--fs-body); font-weight: 700; color: var(--text-stark); transition: color 0.4s, box-shadow 0.4s, opacity 0.55s, transform 0.55s; }
.g-m2-zahl.g-m2-rot { color: var(--rot-nacht); box-shadow: 0 0 0 2px var(--rot-nacht), 0 0 14px color-mix(in srgb, var(--rot-nacht) 45%, transparent); }
.g-m2-zahl.g-m2-korrigiert { color: var(--status-gruen); box-shadow: 0 0 0 2px var(--status-gruen); }
.g-m2-angebot.g-m2-ins-kuvert { transform: translate(-40px, 6px) scale(0.78); }
.g-svg.g-m2-umschlag { position: absolute; right: 12%; bottom: 0; }

/* m2-l3-s8 Entwürfe, Wahl und Unterschrift */
.g-m2-vorschlagtisch { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; }
.g-m2-entwuerfe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: center; }
.g-m2-entwurfkarte { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 10px; overflow-wrap: break-word; hyphens: auto;
  transition: transform 0.8s, opacity 0.6s, filter 0.6s, border-color 0.5s, box-shadow 0.5s; }
.g-m2-entwurfkarte.g-aus { transform: translateX(-50px); }
.g-m2-entwurfkarte.g-aus.g-an { transform: none; }
.g-m2-entwurfkarte .g-m2-textbalken { height: 7px; }
.g-m2-entwurfkarte.g-aus.g-an.g-m2-abgelegt { opacity: 0.55; filter: grayscale(1); transform: scale(0.9); }
.g-m2-entwurfkarte.g-aus.g-an.g-m2-gewaehlt { border-color: var(--m); transform: translateY(-8px) scale(1.05); box-shadow: 0 0 20px color-mix(in srgb, var(--m) 40%, transparent); }
.g-svg.g-m2-korrekturstift { position: absolute; right: -6px; top: -12px; width: 26px; height: 26px; color: var(--bernstein); }
.g-svg.g-m2-korrekturstift.g-m2-korrigiert { animation: g-wackeln 1s ease-in-out 2; }
.g-svg.g-m2-unterschrift { width: 100%; height: 24px; color: var(--m); transition: filter 0.4s; }
.g-m2-unterschrift svg path { stroke-dasharray: 260; stroke-dashoffset: 260; }
.g-m2-unterschrift.g-zeichnet svg path { stroke-dasharray: 260; stroke-dashoffset: 260; animation: g-zeichnen 1.4s ease-out forwards; }
.g-m2-unterschrift.g-m2-leuchtet { filter: drop-shadow(0 0 6px var(--m)); }
.g-svg.g-m2-menschhand { color: var(--text-stark); }

/* m2-l4-s1 Verbotsschild klappt zum Spielbrett */
.g-m2-klappbuehne { position: relative; width: min(100%, 360px); height: 170px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.g-m2-buerotuer { position: absolute; left: 50%; top: 6px; bottom: 6px; width: 110px; margin-left: -55px; border-radius: 6px 6px 0 0;
  border: 2px solid color-mix(in srgb, var(--glas-text) 30%, transparent); background: var(--grund-inhalt-2); }
.g-m2-heimlich { position: absolute; inset: 0; pointer-events: none; }
.g-svg.g-m2-heimlich-handy { position: absolute; top: 46%; width: 28px; height: 28px; color: var(--bernstein); }
.g-m2-heimlich-handy:nth-child(1) { left: 4%; } .g-m2-heimlich-handy:nth-child(2) { left: 18%; top: 72%; } .g-m2-heimlich-handy:nth-child(3) { right: 6%; }
.g-m2-klappe { position: relative; z-index: 1; width: 136px; height: 136px; transform-style: preserve-3d; transition: transform 1.2s cubic-bezier(0.3, 0.7, 0.3, 1), opacity 0.55s; }
.g-m2-klappe-vorn, .g-m2-klappe-hinten { position: absolute; inset: 0; display: grid; place-items: center; backface-visibility: hidden;
  border-radius: var(--r-kachel); background: var(--grund-inhalt-2); border: 1px solid var(--glas-rand); }
.g-m2-klappe-hinten { transform: rotateY(180deg); }
.g-m2-klappe.g-aus.g-an.g-m2-aufgeklappt { transform: rotateY(180deg); }
.g-svg.g-m2-verbot { width: 96px; height: 96px; color: var(--rot-nacht); }
.g-m2-figuren { display: flex; gap: 14px; justify-content: center; min-height: 40px; }
.g-svg.g-m2-tischfigur { width: 34px; height: 34px; color: var(--text-stark); }

/* m2-l4-s2 Spielbrett mit vier Feldern */
.g-m2-brett { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: min(100%, 560px); margin: 0 auto; padding: 12px; border-radius: var(--r-kachel);
  border: 2px solid color-mix(in srgb, var(--m) 40%, transparent); background: color-mix(in srgb, var(--m) 5%, transparent); }
.g-m2-brettfeld { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 2px; align-items: center; align-content: center;
  min-height: 80px; padding: 10px 52px 10px 14px; border-radius: 10px; border: 1px solid var(--glas-rand); background: var(--glas); transition: border-color 0.4s, box-shadow 0.4s; }
.g-m2-brettfeld > .g-svg { grid-row: 1 / span 2; }
.g-m2-brettfeld > .g-m2-nr { position: absolute; top: 6px; left: 8px; }
.g-m2-brettfeld .g-m2-setzfigur { position: absolute; right: 8px; bottom: 8px; width: 40px; height: 40px; }
.g-m2-brettfeld .g-m2-setzfigur.g-aus { transform: translateY(-40px); }
.g-m2-brettfeld .g-m2-setzfigur.g-aus.g-an { transform: none; }

/* m2-l4-s4 Linien von den Lücken zu den Feldern */
.g-m2-linienplan { display: flex; flex-direction: column; gap: 8px; width: min(100%, 520px); margin: 0 auto; }
.g-m2-linienreihe { display: grid; grid-template-columns: minmax(0, 170px) minmax(30px, 1fr) auto; align-items: center; gap: 8px; }
.g-m2-luecke { padding: 4px 10px; border-radius: 999px; border: 1px dashed var(--glas-rand); font-size: var(--fs-body); color: var(--glas-text); text-align: center;
  overflow-wrap: break-word; hyphens: auto; transition: border-color 0.4s, color 0.4s, box-shadow 0.4s; }
.g-m2-linie { height: 2px; background: var(--m); transform: scaleX(0); transform-origin: left; transition: transform 0.8s ease; }
.g-m2-zielfeld { min-width: 38px; height: 38px; padding: 0 8px; border-radius: 8px; display: grid; place-items: center; border: 1px solid var(--glas-rand); background: var(--glas);
  color: var(--glas-text); font-size: var(--fs-body); font-weight: 700; transition: border-color 0.4s, color 0.4s; }
.g-m2-verbunden .g-m2-luecke { border-style: solid; border-color: var(--m); color: var(--text-stark); box-shadow: 0 0 12px color-mix(in srgb, var(--m) 35%, transparent); }
.g-m2-verbunden .g-m2-linie { transform: scaleX(1); }
.g-m2-verbunden .g-m2-zielfeld { border-color: var(--m); color: var(--text-stark); }
.g-m2-zielfeld.g-m2-kalender { display: flex; gap: 4px; }
.g-m2-blattnr { font-variant-numeric: tabular-nums; }
.g-m2-kalender.g-m2-dreht .g-svg { animation: g-dreh 1s ease-in-out 1; }

/* m2-l4-s5 Werbebild, Chatfenster, eigene Mail */
.g-m2-kennzeichen { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; }
.g-m2-werbebild { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.g-m2-werbebild.g-m2-strahlt .g-bild { filter: drop-shadow(0 0 16px color-mix(in srgb, var(--bernstein) 55%, transparent)); }
.g-m2-ki-schild { position: absolute; left: 0; right: 0; bottom: 26px; width: max-content; margin: 0 auto; padding: 2px 8px; border-radius: 4px;
  background: var(--grund-inhalt-2); border: 1px solid var(--m); color: var(--text-stark); font-size: var(--fs-small); font-weight: 700; }
.g-m2-chatfenster { display: flex; flex-direction: column; gap: 6px; padding-bottom: 10px; min-width: 0; overflow: hidden; border: 1px solid var(--glas-rand); border-radius: var(--r-kachel); background: var(--glas); }
.g-m2-chatkopf { display: flex; align-items: center; gap: 6px; margin: 0 8px; padding: 4px 8px; border-radius: 6px; transition: background 0.4s, box-shadow 0.4s; }
.g-m2-chatkopf.g-leuchtet { background: color-mix(in srgb, var(--m) 10%, transparent); box-shadow: 0 0 0 1px var(--m); }
.g-m2-chatblase { display: block; height: 16px; width: 55%; margin: 0 10px; border-radius: 8px; background: color-mix(in srgb, var(--m) 25%, transparent);
  opacity: 0; transform: translateY(8px); transition: opacity 0.5s, transform 0.5s; }
.g-m2-chatblase-r { align-self: flex-end; width: 40%; background: color-mix(in srgb, var(--glas-text) 18%, transparent); }
.g-m2-chatblase.g-an { opacity: 1; transform: none; }
.g-m2-eigenmail { display: flex; flex-direction: column; align-items: center; gap: 4px; }

/* m2-l4-s7 das Blatt wandert durch fünf Stationen */
.g-m2-weg { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: min(100%, 560px); margin: 0 auto; padding-top: 46px; }
.g-m2-weg::before { content: ""; position: absolute; left: 10%; right: 10%; top: 68px; height: 2px; background: color-mix(in srgb, var(--glas-text) 25%, transparent); }
.g-m2-station { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.g-m2-station > .g-svg { width: 44px; height: 44px; padding: 8px; border-radius: 50%; border: 1px solid var(--glas-rand); background: var(--grund-inhalt-2); color: var(--glas-text);
  transition: border-color 0.4s, color 0.4s, box-shadow 0.4s; }
.g-m2-station.g-leuchtet > .g-svg { border-color: var(--m); color: var(--m); box-shadow: 0 0 14px color-mix(in srgb, var(--m) 40%, transparent); }
.g-m2-station.g-m2-fertig > .g-svg { border-color: var(--status-gruen); color: var(--status-gruen); }
.g-m2-wanderblatt { position: absolute; top: 0; width: 32px; height: 36px; display: grid; place-items: center; border-radius: 4px; z-index: 2;
  left: calc(100% / 5 * var(--pos, 0) + 100% / 10 - 16px); background: color-mix(in srgb, var(--bernstein) 12%, var(--grund-inhalt-2));
  border: 1px solid color-mix(in srgb, var(--bernstein) 45%, transparent); transition: left 0.9s cubic-bezier(0.3, 0.7, 0.3, 1), transform 0.6s, opacity 0.55s; }
.g-m2-wanderblatt.g-aus.g-an.g-m2-haengt { transform: rotate(-6deg) translateY(-4px); }
.g-m2-haekchen { display: flex; gap: 2px; min-height: 18px; }
.g-m2-haekchen .g-svg { width: 16px; height: 16px; }

/* m2-l4-s8 Kette der vier Lektionen */
.g-m2-lektionskette { display: flex; align-items: flex-start; justify-content: center; width: 100%; transition: transform 0.8s; }
.g-m2-kettenglied { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1 1 0; max-width: 140px; text-align: center; transition-delay: 0s; }
.g-m2-kettenglied + .g-m2-kettenglied::before { content: ""; position: absolute; top: 24px; right: calc(50% + 30px); width: calc(100% - 60px); height: 2px; background: var(--m); opacity: 0.6; }
.g-m2-kettenglied > .g-svg.g-gross { width: 48px; height: 48px; }
.g-m2-lektionskette.g-m2-klein { transform: scale(0.9); }
.g-m2-team { display: flex; gap: 10px; justify-content: center; }

/* Modul 2 — schmal (390 px) */
@media (max-width: 639.98px) {
  .g-m2-bahn { flex-wrap: wrap; justify-content: center; }
  .g-m2-eingabe { width: 100%; }
  .g-m2-flugbahn { min-width: 0; height: 100px; }
  .g-m2-horizont { width: 110px; }
  .g-m2-faecher { gap: 6px; }
  .g-m2-fach { min-height: 140px; padding: 6px 4px; }
  .g-m2-raum { gap: 4px; }
  .g-m2-raum .g-svg.g-gross { width: 48px; height: 48px; }
  .g-m2-raum .g-bild { width: 48px; height: 48px; }
  .g-m2-raum .g-text { width: min-content; text-align: center; }
  .g-m2-raum .g-chip { padding: 6px 8px; }
  .g-m2-stapel, .g-m2-stapelplatz { width: 46px; height: 60px; }
  .g-m2-stapelkarte { width: 40px; height: 28px; top: calc(var(--i) * 7px); }
  .g-m2l1s5.g-spalten-3 { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .g-m2-arbeitsplatz { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "marke schirm" "bild schirm" "bild fehler";
    column-gap: 12px; row-gap: 4px; align-items: center; justify-items: start; padding: 6px 8px; }
  .g-m2-arbeitsplatz > .g-m2-marke { grid-area: marke; justify-self: center; }
  .g-m2-arbeitsplatz > .g-m2-schirm { grid-area: schirm; max-width: none; }
  .g-m2-arbeitsplatz > .g-bild { grid-area: bild; width: 48px; height: 48px; justify-self: center; }
  .g-m2-arbeitsplatz > .g-text { grid-area: fehler; }
  .g-m2-entwuerfe { grid-template-columns: minmax(0, 1fr); }
  .g-m2-uebergabe { gap: 8px; }
  .g-m2l2s2 { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 10px; }
  .g-m2-klotz { width: 140px; }
  .g-m2-neben { flex-direction: row; flex-wrap: wrap; justify-content: center; min-height: 40px; }
  .g-m2-treppe { height: 190px; gap: 3px; }
  .g-m2-figur { left: calc(var(--stufe, 0) * ((100% - 12px) / 5 + 3px) + (100% - 12px) / 10 - 16px); }
  .g-m2l2s5 { grid-template-columns: minmax(0, 1fr); }
  .g-m2l2s5 > .g-trenner { display: none; }
  .g-m2l2s6.g-m2-beide { grid-template-columns: minmax(0, 1fr); }
  .g-m2l2s6.g-m2-beide .g-m2-blatt { grid-row: auto; }
  .g-m2l2s6.g-m2-beide .g-m2-blatt.g-m2-krone, .g-m2l2s6.g-m2-beide .g-m2-webseite { grid-column: 1; }
  .g-m2l2s6 .g-m2-zettelchip { grid-row: auto; }
  .g-m2-tippfaecher { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .g-m2-blasenpaar { gap: 10px; }
  .g-m2-sprecher { padding: 10px; }
  .g-m2l3s2, .g-m2-zweispalt, .g-m2l3s5 { grid-template-columns: minmax(0, 1fr); }
  .g-m2-vorschlagtisch { grid-template-columns: minmax(0, 1fr) auto; }
  .g-m2-vorschlagtisch > .g-m2-ki-hand { grid-column: 1 / -1; justify-self: start; }
  .g-m2-brett { grid-template-columns: minmax(0, 1fr); }
  .g-m2-linienreihe { grid-template-columns: minmax(0, 1fr) minmax(16px, 0.4fr) auto; gap: 6px; }
  .g-m2-kennzeichen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-m2-kennzeichen > .g-m2-eigenmail { grid-column: 1 / -1; }
  .g-m2-station > .g-svg { width: 38px; height: 38px; padding: 6px; }
  .g-m2-weg::before { top: 65px; }
  .g-m2-kettenglied + .g-m2-kettenglied::before { right: calc(50% + 26px); width: calc(100% - 52px); }
}
/* Modul 2 — Ruhe: Teile, die nur über eine Animation sichtbar werden, stehen gleich auf ihrem Schlusszustand */
html.nd-ruhig .sz-grafik .g-zeichnet svg path, html.nd-ruhig .sz-grafik .g-zeichnet svg polyline, html.nd-ruhig .sz-grafik .g-zeichnet svg circle { stroke-dashoffset: 0; }
html.nd-ruhig .g-m2-klotz.g-m2-faellt { opacity: 1; transform: none; }
html.nd-ruhig .g-m2-schwamm, html.nd-ruhig .g-m2-scan { display: none; }
html.nd-ruhig .g-m2-tippkarte.g-aus, html.nd-ruhig .g-m2-entwurfkarte.g-aus, html.nd-ruhig .g-m2-grund.g-aus,
html.nd-ruhig .g-m2-brettfeld .g-m2-setzfigur.g-aus { transform: none; }