/* ══════════════════════════════════════════
   Modul 3a: gemeinsamer Stil für Beamer und Handy
   ──────────────────────────────────────────
   Der Kreide-Look der DPSG-Limburg-Website (DESIGN-SYSTEM.md): Arvo für
   Überschriften, Carlito für alles andere, Rahmen nie als border, sondern
   als ::after mit dem SVG-Filter #chalkf. Nur Hellmodus.
   Der erste Teil ist mit der Einzeldatei-Fassung identisch, darunter kommt,
   was nur die Netzwerkfassung braucht: Lobby, Rangliste, Handy.
   ══════════════════════════════════════════ */
/* ══════════════════════════════════════════
   Schriften, lokal eingebettet (DSGVO, offline)
   Arvo (Überschriften) + Carlito (UI), wie auf dpsg-limburg.de
   ══════════════════════════════════════════ */
@font-face{font-family:'Arvo';font-style:normal;font-weight:400;font-display:block;src:url(fonts/arvo-400-normal-latin.woff2) format('woff2')}
@font-face{font-family:'Arvo';font-style:normal;font-weight:700;font-display:block;src:url(fonts/arvo-700-normal-latin.woff2) format('woff2')}
@font-face{font-family:'Carlito';font-style:normal;font-weight:400;font-display:block;src:url(fonts/carlito-400-normal-latin.woff2) format('woff2')}
@font-face{font-family:'Carlito';font-style:normal;font-weight:700;font-display:block;src:url(fonts/carlito-700-normal-latin.woff2) format('woff2')}

/* ── Tokens (Hellmodus, aus DESIGN-SYSTEM.md) ── */
:root{
  --bg:#F5F5F1; --bg-mid:#ECEDE7; --bg-subtle:#DFE1D8; --bg-card:#F1F1EC;
  --text:#14222E; --text-sub:#41566A; --text-muted:#566A7D;
  --primary:#003056; --secondary:#135E96; --cta:#A8112A; --cta-hover:#C41834;
  /* Rot für Text. Im Hellmodus ist das dasselbe Rot wie für Flächen, im
     Dunkelmodus ein aufgehelltes: eine Farbe kann nicht beides sein, weißer
     Text auf der Fläche braucht sie dunkel, Text auf Navy braucht sie hell. */
  --cta-text:#A8112A;
  --highlight:#8F6400; --accent-cyan:#0087C4;
  --ak-jupfi:#2F53A7; --ak-pfadi:#007A38; --ak-woe:#B44800; --ak-rover:#C0182A;
  --richtig:#007A38; --richtig-text:#fff;
  --font-heading:'Arvo',Georgia,serif;
  --font-ui:'Carlito','Segoe UI',sans-serif;
  /* Doodle-Look */
  --dood-ink:var(--primary); --dood-stroke:1.6px; --dood-radius:14px;
  /* Hover-Werte der Website (style.css §Karten-Hover-System). Sie stehen hier
     als Token, damit jedes Bauteil dieselbe Bewegung macht: ein Knopf, der
     zwei Pixel steigt, neben einer Karte, die fünf steigt, wirkt kaputt. */
  --btn-lift:-2px; --card-lift:-3px; --card-glow:18%;
  --sh:0 2px 20px rgba(15,30,45,.10);
  --gluehbirne:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 00-3.6 10.8c.4.3.6.8.6 1.2v1h6v-1c0-.4.2-.9.6-1.2A6 6 0 0012 3z'/%3E%3C/svg%3E");
  /* Beamer-Basis: 1rem hängt an der Fensterhöhe, damit dieselbe Datei auf
     1280×720 und auf 4K gleich proportioniert erscheint. In der Bühne kommt
     --fit dazu, die Not-Bremse des Autofits bei langen Fragen. */
  --fit:1;
}
*{box-sizing:border-box;margin:0;padding:0}
/* ══════════════════════════════════════════
   DUNKELMODUS
   ──────────────────────────────────────────
   Weiße Kreide auf Navy statt dunkler Kreide auf Papier, dieselbe Handschrift.
   Die Werte sind aus dem Kreide-Look abgeleitet und nachgerechnet: Fließtext
   und Nebentext liegen über 9:1, weißer Text auf den Stufenfarben über 3.9:1.

   Die Stufenfarben sind aufgehellt. Das Jupfi-Blau des Hellmodus verschwindet
   auf Navy fast in der Fläche, und ein Marker, den man nicht sieht, hilft am
   Tisch nicht beim Zuordnen.
   ══════════════════════════════════════════ */
:root[data-theme="dunkel"]{
  --bg:#08171F; --bg-mid:#12232E; --bg-subtle:#1B2E3A; --bg-card:#12232E;
  --text:#E7EDF2; --text-sub:#A8BCCA; --text-muted:#8B9EAD;
  --card-border:rgba(231,237,242,.16);
  --primary:#8FC0E4; --secondary:#7FB3DC;
  /* Das Rot der Fläche bleibt kräftig, weißer Text darauf liegt bei 7.5:1.
     Für Text auf dunklem Grund gibt es die hellere Variante darunter. */
  /* Zwei Rottöne, weil einer beides nicht kann: die Fläche muss dunkel genug
     für weißen Text sein (7.5:1), die Textfarbe hell genug für Navy (5.6:1). */
  --cta:#A8112A; --cta-hover:#C4183A; --cta-text:#E4657A;
  --highlight:#D9A93C; --accent-cyan:#5AB7E8;
  --ak-jupfi:#4B6FC4; --ak-pfadi:#2E8F52; --ak-woe:#C4691F; --ak-rover:#C9394B;
  /* Auf dem aufgehellten Grün des Dunkelmodus ist weißer Text mit 2.3:1
     nicht lesbar. Dunkel darauf sind es 8.7:1, dieselbe Logik wie bei den
     Antwortkacheln vorne. */
  --richtig:#4FBE7B; --richtig-text:#08171F;
  /* Kreide wird weiß, wie im Doodle-Look der Website vorgesehen */
  --dood-ink:#fff;
}
/* Die Kornschicht liegt auf dunklem Grund schwerer und wird zurückgenommen */
:root[data-theme="dunkel"] body::after{opacity:.05}
/* Bilder behalten hellen Grund: Logos mit transparentem Rand sähen sonst aus
   wie Löcher, und historische Fotos mit weißem Rand schnitten hart ab. */
:root[data-theme="dunkel"] .bild,
:root[data-theme="dunkel"] .qr,
:root[data-theme="dunkel"] .ov-bild img{background:#F1F1EC}
/* Rot als Textfarbe nimmt --cta-text, das sich mit dem Thema dreht. Hier
   stand vorher eine Liste von dreizehn Selektoren, die im Dunkelmodus
   nachträglich umgefärbt wurden. Das war eine Falle: jedes neue Element mit
   rotem Text musste in die Liste, und wer sie vergaß, bekam 2:1 im
   Dunkelmodus, ohne im Hellmodus etwas zu merken. Jetzt steht --cta-text
   direkt an den Elementen, und die Liste hier ist überflüssig.

   Was bleibt: die Stellen, an denen das Rot nicht Text, sondern Fläche ist. */
:root[data-theme="dunkel"] .wechsel.runter{
  background:color-mix(in srgb,var(--cta-text) 16%,transparent)
}
:root[data-theme="dunkel"] .timer.knapp .t-fuell{background:var(--cta-text)}
/* Die Fortschrittsspur oben braucht auf dunklem Grund mehr Helligkeit */
:root[data-theme="dunkel"] .spur button{
  background:color-mix(in srgb,var(--text) 22%,transparent)
}
:root[data-theme="dunkel"] .spur button.war{
  background:color-mix(in srgb,var(--text) 45%,transparent)
}
:root[data-theme="dunkel"] .spur button.jetzt{background:var(--cta-text)}

/* hidden muss immer wirken. Der Browser setzt dafür nur display:none in seinem
   eigenen Stylesheet, und jede Autorenregel mit display schlägt das. Zweimal
   in diesem Projekt zugeschlagen: nebeneinander stehende QR-Codes und eine
   Fußzeile, die im Endstand nicht verschwand. Deshalb hier einmal für alle. */
[hidden]{display:none!important}
html{font-size:clamp(15px,2.24vh,34px)}
html,body{height:100%;overflow:hidden}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--font-ui); font-size:1rem; line-height:1.45;
  -webkit-font-smoothing:antialiased;
  hyphens:auto; overflow-wrap:break-word;
}
/* Kornschicht wie auf der Website: sehr dezent, liegt über allem */
body::after{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:900;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.03;
}
body.maus-weg{cursor:none}
#chalk-defs{position:absolute;width:0;height:0;overflow:hidden}

/* ── Trennlinien ──
   Auch ein Strich zwischen zwei Bereichen ist Kreide. Eine gerade Haarlinie
   neben handgezeichneten Rahmen ist die eine Stelle, an der der Look kippt.

   Der Strich braucht eine messbare Höhe, damit der Filter Platz zum Auslenken
   hat: mit height:0 und nur einem border ist die Filterfläche so flach, dass
   die Verschiebung abgeschnitten wird. Deshalb 5px Höhe und der Strich oben. */
.kreide-linie{position:relative}
/* Der Strich endet vor der Kante, nicht an ihr. Sonst läuft er in die
   senkrechte Linie der Nachbarspalte und in die Rahmen der Knöpfe daneben, und
   genau das sah zerfahren aus: zwei Kreidestriche, die sich kreuzen, wirken wie
   ein Fehler, nicht wie eine Zeichnung. */
.kreide-linie::before{
  content:'';position:absolute;left:var(--linie-rand,.9em);
  right:var(--linie-rand,.9em);height:7px;pointer-events:none;
  border-top:var(--ui-stroke) solid var(--linie-ink,
    color-mix(in srgb,var(--primary) 40%,transparent));
  filter:url(#chalkf-ui)
}
.kreide-linie.unten::before{bottom:-1px}
.kreide-linie.oben::before{top:0}
/* Senkrecht: dieselbe Idee gedreht, für die Spalte neben der Fragenliste. */
.kreide-linie.rechts::before{
  top:var(--linie-rand,.9em);bottom:var(--linie-rand,.9em);
  left:auto;right:0;height:auto;width:7px;
  border-top:0;
  border-left:var(--ui-stroke) solid var(--linie-ink,
    color-mix(in srgb,var(--primary) 40%,transparent))
}

/* ── Kreide-Rahmen: nie border, immer ::after mit SVG-Filter ── */
.kreide{position:relative;border:0}
.kreide::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  border:var(--dood-stroke) solid var(--dood-ink);
  border-radius:var(--dood-radius);
  filter:url(#chalkf);
}

/* ══ Bedienelemente zeichnen kräftiger ══
   Karten laufen über hunderte Pixel, dort liest sich eine Auslenkung von einem
   Pixel als Handstrich. An einem Knopf von 44 Pixeln sieht dieselbe Auslenkung
   wie eine gerade Linie aus, und dann ist der Look technisch da, aber nicht
   sichtbar. Deshalb der stärkere #chalkf-ui und eine eigene Strichstärke.

   Der Rahmen hängt hier an der Klasse selbst, nicht an einem zusätzlichen
   .kreide im Markup: ein Chip ist immer aus Kreide, und ein Bauteil, bei dem
   man eine zweite Klasse vergessen kann, sieht irgendwann an einer Stelle
   anders aus als an der nächsten. Genau das war der Fall, bevor das hier
   stand.

   NEUES BEDIENELEMENT? → in diese Liste eintragen. */
.chip, .ik-flach, .ed-zurueck, .ed-schalter, .zeit-knopf, .ed-bild-vorschau,
.ed-bild-weg, .ed-gal-weg, .qr-tab, .h-wechsel, .wk-marke{
  position:relative
}
:is(.chip, .ik-flach, .ed-zurueck, .ed-schalter, .zeit-knopf, .ed-bild-vorschau,
    .ed-bild-weg, .ed-gal-weg, .qr-tab, .h-wechsel, .wk-marke)::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  border:var(--ui-stroke) solid var(--dood-ink);
  border-radius:var(--dood-radius);
  filter:url(#chalkf-ui)
}
/* Die schon vorhandenen Kreide-Bauteile, die Bedienelemente sind, bekommen
   nur den stärkeren Strich: ihr ::after kommt aus .kreide. */
:is(.btn-outline, .opt, .ov-zu, .tisch)::after{
  border-width:var(--ui-stroke);
  filter:url(#chalkf-ui)
}
/* Runde Knöpfe brauchen einen runden Ring, sonst liegt ein Rechteck darüber. */
:is(.ov-zu, .ed-bild-weg, .ed-gal-weg)::after{border-radius:50%}
.wk-marke::after,.qr-tab::after{border-radius:999px}

/* ══ Bildschirme ══ */
.screen{position:fixed;inset:0;display:none;flex-direction:column}
.screen.aktiv{display:flex}
/* Bildschirme mit einem Block in der Mitte (Lobby, Startbild, Zwischenstand)
   skalieren ihren Inhalt, wenn die Fensterhöhe knapp wird. Vorher schnitt der
   feste Rahmen oben und unten einfach ab: auf einem 16:10-Beamer fehlten in
   der Lobby die Optionen und der Startknopf.

   Skaliert wird per transform, nicht über Schriftgrößen. So schrumpfen Bilder,
   QR-Codes und Abstände im gleichen Verhältnis mit, und es gibt keine Stelle,
   an der ein Wert in px hängen bleibt. */
.skaliert{
  /* Ohne Übergang: die Skalierung ist eine Layout-Entscheidung, keine
     Animation. Mit transition zoomte der Bildschirm bei jedem Wechsel
     sichtbar hinein, und gemessene Höhen waren einen Moment lang falsch. */
  transform-origin:center center
}

/* ── Hintergrund-Motive (Kreide, dezent) ── */
.motive{position:fixed;inset:0;pointer-events:none;z-index:0;color:var(--primary);opacity:.13}
.motive svg{position:absolute}

/* ══════════════════ START ══════════════════ */
#start{align-items:center;justify-content:center;text-align:center;padding:3vh 5vw;z-index:1;overflow:hidden}
.start-inner{position:relative;z-index:2;max-width:min(52em,88vw)}
.start-lilie{
  position:fixed; right:-6vw; bottom:-8vh; width:min(46vh,40vw); color:var(--primary);
  opacity:.11; z-index:0; pointer-events:none;
}
h1{
  font-family:var(--font-heading); font-weight:700;
  font-size:clamp(2.4rem,7.2vh,5rem); line-height:1.05; color:var(--primary);
  letter-spacing:-.01em;
}
.start-sub{
  font-size:1.35rem; color:var(--text-sub); margin-top:.7em;
  max-width:26em; margin-left:auto; margin-right:auto;
}
.start-opt{display:flex;gap:1.1em;justify-content:center;flex-wrap:wrap;margin:2.4em 0 2em}
.opt{
  display:flex;align-items:center;gap:.6em;
  padding:.62em 1.1em; background:var(--bg); cursor:pointer;
  font-size:.98rem; user-select:none; transition:transform .2s;
}
.opt:hover{transform:translateY(-2px)}
.opt-label{color:var(--text-sub)}
.opt-wert{font-weight:700;color:var(--primary);font-family:var(--font-heading)}
.box{
  width:1.35em;height:1.35em;flex:0 0 auto;display:grid;place-items:center;
  position:relative;border:0;color:var(--primary)
}
.box::after{
  content:'';position:absolute;inset:0;border:var(--dood-stroke) solid currentColor;
  border-radius:5px;filter:url(#chalkf)
}
.box svg{width:80%;height:80%;opacity:0;transition:opacity .16s}
.opt[aria-pressed="true"] .box svg{opacity:1}

.btn{
  position:relative;
  display:inline-flex;align-items:center;gap:.5em;
  padding:.72em 1.6em;border:none;cursor:pointer;
  font-family:var(--font-ui);font-weight:700;font-size:1.05rem;
  letter-spacing:.04em;text-transform:uppercase;line-height:1.5;
  border-radius:var(--dood-radius);transition:transform .2s,background .2s,box-shadow .2s;
}
/* ── Gefüllte Knöpfe ──
   Die Fläche selbst ist gezeichnet, nicht nur ihr Rand: ein glattes Rechteck
   mit runden Ecken war die letzte Stelle, an der der Kreide-Look kippte, und
   es war die auffälligste, weil der gefüllte Knopf der wichtigste ist.

   Umgesetzt über ein ::before mit der Farbe und dem Filter. Es muss hinter der
   Beschriftung liegen, und weil positionierte Pseudoelemente sonst über dem
   Text malen, braucht es z-index:-1. Damit das nicht hinter den Seitengrund
   rutscht, macht isolation:isolate aus dem Knopf einen eigenen Stapelkontext. */
.btn-fire{background:transparent;color:#fff;isolation:isolate}
.btn-fire::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:var(--cta);border-radius:var(--dood-radius);
  filter:url(#chalkf-ui);transition:background .2s
}
.btn-fire:hover{transform:translateY(var(--btn-lift));
  box-shadow:0 8px 28px color-mix(in srgb,var(--cta) 30%,transparent)}
.btn-fire:hover::before{background:var(--cta-hover)}
.btn-outline{background:transparent;color:var(--text)}
.btn-outline:hover{background:color-mix(in srgb,var(--text) 7%,transparent);
  transform:translateY(var(--btn-lift))}
.btn:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
/* Ein gesperrter Knopf muss gesperrt aussehen. Ohne diese Regel sah „Spielen"
   bei einem Quiz ohne Fragen genauso einladend aus wie bei einem fertigen und
   tat beim Klicken nichts. Beschriftung in --text-sub, nicht gedämpft: dass
   ein Knopf gerade nicht geht, erkennt man an der fehlenden Fläche, nicht
   daran, dass man ihn nicht mehr lesen kann.

   Der Rahmen ist Kreide wie überall, nur blasser. Vorher war es ein
   box-shadow, also eine gerade Linie mitten unter gezeichneten. */
.btn:disabled{
  position:relative;
  cursor:not-allowed;background:transparent;color:var(--text-sub);
  transform:none;box-shadow:none
}
.btn:disabled::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  border:var(--ui-stroke) solid color-mix(in srgb,var(--text) 24%,transparent);
  border-radius:var(--dood-radius);filter:url(#chalkf-ui)
}
/* Die gezeichnete Füllung muss beim Sperren mit weg. Ohne diese Zeile blieb
   „Spielen" bei einem Quiz ohne Fragen rot gefüllt, während die Schrift auf
   gedämpft umsprang: rot auf rot, unlesbar und trotzdem einladend. */
.btn-fire:disabled::before{background:transparent}
.btn:disabled:hover{background:transparent;transform:none;box-shadow:none}
.start-akt{display:flex;gap:1em;justify-content:center;flex-wrap:wrap}
.start-fuss{
  margin-top:3em;font-size:.86rem;color:var(--text-muted);
  display:flex;gap:1.4em;justify-content:center;flex-wrap:wrap
}
kbd{
  font-family:var(--font-ui);font-weight:700;font-size:.94em;
  padding:.1em .5em;background:var(--bg-mid);border-radius:5px;
  color:var(--text-sub);white-space:nowrap
}

/* ══════════════════ QUIZ ══════════════════ */
#quiz{padding:2.2vh 3vw 1.8vh;z-index:1}

/* ── Kopfzeile ── */
.kopf{display:flex;align-items:center;gap:1.6em;flex:0 0 auto;position:relative;z-index:2}
.zaehler{
  font-family:var(--font-heading);font-size:1.05rem;color:var(--text-sub);
  white-space:nowrap;letter-spacing:.01em
}
.zaehler b{color:var(--primary);font-size:1.25em}
.spur{display:flex;gap:.28em;flex:1;align-items:center;min-width:0}
.spur button{
  flex:1 1 0;min-width:2px;height:.62em;border:0;padding:0;cursor:pointer;
  background:color-mix(in srgb,var(--primary) 20%,transparent);
  border-radius:3px;transition:background .2s,transform .2s
}
.spur button:hover{transform:scaleY(1.6)}
.spur button.war{background:color-mix(in srgb,var(--primary) 48%,transparent)}
/* Reservefragen halb so hoch: sie gehören zum Quiz, aber nicht zum Pflichtteil,
   und die Spur soll zeigen, wo der Pflichtteil endet. */
.spur button.reserve{height:.31em}
/* Folien sind keine Fragen: ein Punkt statt eines Strichs. Die Stechfrage
   steht abgesetzt am Ende, gestrichelt, weil sie meist nicht drankommt. */
.spur button.folie{flex:0 0 .5em;height:.5em;border-radius:50%}
.spur button.stechen{flex:0 0 1.2em;background:transparent;
  border:2px dashed color-mix(in srgb,var(--primary) 45%,transparent);height:.62em;margin-left:.4em}
.spur button.stechen.jetzt{background:var(--cta);border-color:var(--cta)}
.zaehler.einzeln b,.zaehler.einzeln .von-teil{display:none}
.spur button.jetzt{background:var(--cta);transform:scaleY(1.9)}
.werkzeug{display:flex;gap:.4em;flex:0 0 auto}
.ik{
  width:2.1em;height:2.1em;display:grid;place-items:center;cursor:pointer;
  background:transparent;border:0;color:var(--text-sub);border-radius:8px;
  transition:background .18s,color .18s
}
.ik:hover{background:var(--bg-subtle);color:var(--primary)}
.ik:disabled{cursor:not-allowed;color:var(--text-muted);background:transparent}
.ik svg{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}

/* ── Bühne ── */
.stage{
  flex:1;min-height:0;display:grid;align-content:center;justify-items:center;
  gap:2vh;padding:1.6vh 0;overflow:hidden;position:relative;z-index:2;
  grid-template-rows:auto auto auto;width:100%;
  /* Alles in der Bühne rechnet in em auf diesen Wert, eine Zahl, und die
     ganze Frage samt Antworten schrumpft mit (siehe autofit()). */
  font-size:calc(1rem * var(--fit))
}
.frage{
  font-family:var(--font-heading);font-weight:700;
  font-size:2.3em;line-height:1.24;color:var(--primary);
  text-align:center;max-width:32em;text-wrap:balance
}
.hinweis{
  position:relative;
  display:none;margin:.75em auto 0;padding:.34em 1.1em;width:max-content;
  font-size:1.05em;font-weight:700;letter-spacing:.02em;
  color:var(--highlight);background:color-mix(in srgb,var(--highlight) 11%,transparent);
  border-radius:99px
}
/* Auch die Marke über der Frage ist gezeichnet: eine glatte Pille zwischen
   Kreidekacheln ist die Stelle, an der der Look kippt. */
.hinweis::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  border:var(--dood-stroke) solid color-mix(in srgb,var(--highlight) 50%,transparent);
  border-radius:99px;filter:url(#chalkf)
}
.hinweis.an{display:block}

/* Mittelteil: nur Antworten, oder Bild + Antworten */
.mitte{display:grid;gap:2.2vw;width:100%;align-items:center;justify-items:center}
.mitte.mit-bild{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}
.bild{
  display:none;place-items:center;max-width:100%;
  padding:1em;background:var(--bg);--dood-stroke:2.1px
}
.mitte.mit-bild .bild{display:grid}
.bild img{
  /* Feste Höhe plus object-fit statt max-height: damit werden auch kleine
     Vorlagen auf Beamergröße gebracht. Mit max-height allein blieb ein
     177 Pixel breites Foto 177 Pixel breit, und aus zehn Metern war nichts
     zu erkennen. Die Höhe steht in em, damit sie mit dem Autofit schrumpft. */
  /* Mit Antworten daneben etwas moderater: bei einer langen Frage plus
     Erklärung muss sonst der Text die ganze Ersparnis aufbringen und wird
     kleiner als das Bild gewinnt. Im Solo-Zug (weiter unten) darf es groß. */
  width:100%;height:min(24em,50vh);
  object-fit:contain;display:block
}
/* Erklärbild: erscheint beim Auflösen an derselben Stelle, groß klickbar */
/* Jedes Bild lässt sich groß zeigen, nicht nur das Erklärbild. Die Marke oben
   rechts sagt, mit welcher Taste. */
.bild{cursor:zoom-in}
.bild::before{
  content:'E';position:absolute;top:.5em;right:.5em;z-index:2;
  width:1.7em;height:1.7em;display:grid;place-items:center;border-radius:50%;
  background:color-mix(in srgb,var(--primary) 88%,transparent);color:#fff;
  font-family:var(--font-heading);font-weight:700;font-size:.8em;
  opacity:.75;transition:opacity .2s
}
.bild:hover::before{opacity:1}
/* Das Erklärbild hebt sich zusätzlich ab: es ist der Teil der Auflösung */
.bild.erklaerbild{--dood-ink:var(--highlight)}
.bild.erklaerbild::before{background:var(--highlight);opacity:1}

.antworten{list-style:none;display:grid;gap:1.05vh;width:100%;max-width:56em}
.antworten.zweispaltig{grid-template-columns:1fr 1fr;column-gap:1.4vw;max-width:64em}
.mitte.mit-bild .antworten{max-width:none}
.antwort{
  display:flex;align-items:center;gap:.75em;text-align:left;width:100%;
  padding:.8em 1em;background:var(--bg);cursor:pointer;
  /* Beamer: 1,6px Kreide wie auf der Website verschwindet aus zehn Metern
     Entfernung, hier darf der Strich kräftiger sein. */
  --dood-stroke:2.1px;
  font-family:var(--font-ui);font-size:1.45em;line-height:1.3;color:var(--text);
  transition:transform .18s,opacity .3s,background .3s;
}
.antwort:hover{transform:translateY(-2px)}
.antwort:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.mark{
  flex:0 0 auto;width:1.7em;height:1.7em;display:grid;place-items:center;
  border-radius:50%;background:var(--mk);color:#fff;
  font-family:var(--font-heading);font-weight:700;font-size:.92em;
  transition:background .3s
}
.antwort:nth-child(1){--mk:var(--ak-jupfi)}
.antwort:nth-child(2){--mk:var(--ak-pfadi)}
.antwort:nth-child(3){--mk:var(--ak-woe)}
.antwort:nth-child(4){--mk:var(--ak-rover)}
.a-txt{flex:1;min-width:0}

/* Auflösung */
.stage.offen .antwort{cursor:default}
.stage.offen .antwort:hover{transform:none}
/* Falsche Antworten treten zurück, bleiben aber lesbar. Über die Deckkraft
   ging das nicht: der Kontrast hängt dann an der Mischung mit dem Grund und
   fiel je Modus unterschiedlich aus (dunkel 3,2:1, hell 3,6:1, gefordert
   4,5). Deshalb bleibt die Karte deckend, und zurück tritt sie über eine
   gedämpfte Textfarbe und einen blasseren Rahmen. Beide Werte sind Tokens,
   deren Kontrast in beiden Modi geprüft ist. */
.antwort.falsch{
  opacity:1;
  --dood-ink:color-mix(in srgb,var(--text-muted) 55%,transparent)
}
.antwort.falsch .a-txt{color:var(--text-muted)}
/* Zwei Versuche, bis es saß. Ursprünglich dämpfte hier opacity:.75 den Kreis,
   und weiß darauf kam im Dunkelmodus nur auf 2.8:1 bei 24px. Der zweite
   Versuch mischte --text-muted mit --text und wurde schlechter: im
   Dunkelmodus sind beide hell, die Fläche also fast weiß.

   Was funktioniert: Fläche und Schrift aus den Seitentokens nehmen, dann
   drehen sie sich mit dem Thema mit. Ergibt 5.8:1 hell und 7.1:1 dunkel, und
   die falschen Antworten treten trotzdem hinter die grüne zurück. */
.antwort.falsch .mark{background:var(--bg-subtle);color:var(--text-sub)}
.antwort.richtig{
  background:color-mix(in srgb,var(--richtig) 12%,var(--bg));
  --dood-ink:var(--richtig);font-weight:700
}
.antwort.richtig .mark{background:var(--richtig);color:var(--richtig-text)}
.antwort.richtig .a-txt{color:color-mix(in srgb,var(--richtig) 78%,var(--text))}
.haken{width:0;opacity:0;flex:0 0 auto;transition:width .25s,opacity .25s}
.antwort.richtig .haken{width:1.3em;opacity:1}
.haken svg{width:1.3em;height:1.3em;fill:none;stroke:var(--richtig);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.antwort.getippt{--dood-stroke:3px}

/* ── Erklärung, der dritte Akt des Pub-Quiz. Erscheint beim Auflösen,
   ist für den Raum lesbar und dient vorne als Stichwortzettel. ── */
.erklaerung{
  display:none;width:100%;max-width:50em;
  /* Links Platz für die Lampe, und zwar als Einzug für ALLE Zeilen. Die Lampe
     saß vorher als inline-Element in der ersten Zeile, dadurch lief die zweite
     Zeile darunter durch und der Absatz hatte keine saubere Kante. */
  padding:.95em 1.35em .95em 3.5em;position:relative;
  background:var(--bg-mid);border-radius:var(--dood-radius);
  font-size:1.22em;line-height:1.42;color:var(--text);text-align:left
}
.stage.offen .erklaerung.hat{display:block}
.erklaerung::before{
  content:'';position:absolute;left:1.25em;top:1em;
  width:1.5em;height:1.5em;
  background:var(--highlight);
  -webkit-mask:var(--gluehbirne) center/contain no-repeat;
          mask:var(--gluehbirne) center/contain no-repeat
}
.erklaerung b{color:var(--primary)}
/* Zeilenumbrüche aus dem Editor gelten auch in der Anzeige: dort sind Frage,
   Erklärung und Tipp mehrzeilige Felder, und ein Enter lief an der Wand in
   einem Stück durch. pre-line, nicht pre-wrap: doppelte Leerzeichen bleiben
   zusammengefasst. */
:is(.frage, .erklaerung, .h-frage, .h-frage-gross, .mod-q, .mod-e){
  white-space:pre-line
}

/* ── Fußzeile mit Timer ── */
.fuss{display:flex;align-items:center;gap:1.6em;flex:0 0 auto;position:relative;z-index:2}
.timer{display:flex;align-items:center;gap:.7em;flex:0 0 auto}
.t-zahl{
  font-family:var(--font-heading);font-weight:700;font-size:1.95rem;
  color:var(--primary);min-width:2.4em;text-align:right;
  font-variant-numeric:tabular-nums;transition:color .3s
}
.t-rohr{
  width:min(26em,34vw);height:.72em;position:relative;background:var(--bg-mid);
  border-radius:99px;overflow:hidden
}
.t-fuell{
  position:absolute;inset:0;transform-origin:left center;
  background:var(--primary);border-radius:99px;
  transition:transform .25s linear,background .3s
}
.timer.knapp .t-zahl{color:var(--cta-text)}
.timer.knapp .t-fuell{background:var(--cta)}
.timer.aus .t-fuell{transform:scaleX(0)!important}
.timer.pause .t-zahl{opacity:.42}
.timer.abgelaufen .t-zahl{color:var(--cta-text);animation:puls 1.1s ease-in-out infinite}
@keyframes puls{50%{opacity:.4}}
.timer.versteckt{visibility:hidden}
.hilfe{
  flex:1;text-align:right;font-size:.82rem;color:var(--text-muted);
  display:flex;gap:1.1em;justify-content:flex-end;flex-wrap:wrap;align-items:center
}

/* ══════════════════ ENDE ══════════════════ */
#ende{align-items:center;justify-content:center;text-align:center;padding:3vh 5vw;z-index:1;overflow:hidden}
.ende-inner{position:relative;z-index:2}
.ende-zahl{
  font-family:var(--font-heading);font-weight:700;color:var(--cta-text);
  font-size:clamp(3rem,11vh,7rem);line-height:1
}

/* ══════════════════ OVERLAYS ══════════════════ */
.ov{
  position:fixed;inset:0;z-index:800;display:none;
  background:color-mix(in srgb,var(--bg) 92%,var(--primary));
  padding:4vh 5vw;overflow:auto;
  /* Der Overlay-Grund ist dunkler und blauer als die Seite. Derselbe gedämpfte
     Ton, der auf --bg noch 4.63:1 bringt, fällt hier auf 3.99:1 und damit unter
     AA. Statt jede Textstelle einzeln zu suchen, gilt gedämpft im Overlay eine
     Stufe kräftiger: das trifft alle, auch die, die später dazukommen. */
  --text-muted:var(--text-sub)
}
.ov.auf{display:flex}
.ov.auf > *:not(.ov-zu){margin:auto}
/* Vollbild heißt Vollbild: mit max-width und max-height allein bleibt ein
   kleines Bild klein, und es wird nur alles andere ausgeblendet. Feste Maße
   plus object-fit skalieren auch hoch und lassen das Seitenverhältnis intakt. */
.ov-bild img{
  width:94vw;height:88vh;object-fit:contain;
  background:var(--bg);border-radius:var(--dood-radius);padding:.8em
}
.ov-bild{cursor:zoom-out}
.ov-kopf{
  font-family:var(--font-heading);font-weight:700;font-size:1.6rem;
  color:var(--primary);margin-bottom:1.2em;text-align:center
}
.ov-box{max-width:min(60em,90vw);width:100%}
/* Der Kasten bekommt beim Öffnen den Fokus, damit Tastatur und Screenreader im
   Fenster sind. Ein Rahmen darum sähe aus wie ein Fehler. */
.ov-box:focus{outline:none}
.ov-zu{
  position:fixed;top:2.4vh;right:2.4vw;width:2.6em;height:2.6em;
  display:grid;place-items:center;background:var(--bg);border:0;cursor:pointer;
  border-radius:50%;color:var(--primary);z-index:2
}
.ov-zu svg{width:1.3em;height:1.3em;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}

/* Fragenübersicht */
.raster{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(15em,100%),1fr));
  gap:.7em
}
.r-eintrag{
  display:flex;gap:.7em;align-items:flex-start;text-align:left;
  padding:.6em .8em;background:var(--bg);cursor:pointer;border:0;
  font-family:var(--font-ui);font-size:.9rem;color:var(--text);
  transition:transform .18s
}
.r-eintrag:hover{transform:translateY(-2px)}
.r-nr{
  font-family:var(--font-heading);font-weight:700;color:var(--cta-text);
  flex:0 0 auto;min-width:1.6em
}
.r-eintrag.war .r-nr{color:var(--text-muted)}
.r-txt{flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Viele Bildfragen heißen wörtlich gleich („Welcher Verband ist hier zu
   sehen?"). Das Vorschaubild ist beim Springen das einzige Unterscheidungs-
   merkmal, das ohne Textspoiler funktioniert. */
.r-bild{flex:0 0 auto;width:2.6em;height:2em;object-fit:contain;border-radius:4px}
/* Lösungsliste zum Auswerten */
.l-buchstabe{
  flex:0 0 auto;min-width:1.7em;height:1.7em;padding:0 .45em;
  display:grid;place-items:center;
  /* Nicht #fff: im Dunkelmodus ist das Grün aufgehellt, und weiß darauf
     kommt nur auf 2.3:1. --richtig-text dreht sich mit dem Thema. */
  border-radius:99px;background:var(--richtig);color:var(--richtig-text);white-space:nowrap;
  font-family:var(--font-heading);font-weight:700;font-size:.92em
}
.l-eintrag{align-items:center;padding:.45em .65em;gap:.5em;font-size:.84rem}
#raster-loesungen{grid-template-columns:repeat(auto-fill,minmax(min(13.5em,100%),1fr));gap:.5em}
.l-eintrag .r-txt{-webkit-line-clamp:1;font-weight:700;color:var(--text)}
.l-frage{
  font-size:.78em;color:var(--text-muted);display:-webkit-box;
  -webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden
}
.l-spalte{flex:1;min-width:0}

/* Tastenhilfe */
.tasten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(17em,100%),1fr));gap:.5em 2em}
.t-zeile{display:flex;gap:.8em;align-items:baseline;padding:.35em 0;font-size:.95rem}
.t-zeile kbd{flex:0 0 auto;min-width:4.4em;text-align:center}
.t-zeile span{color:var(--text-sub)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
/* Hochformat / kleines Fenster: Bild über die Antworten statt daneben */
@media (max-aspect-ratio:1/1){
  .mitte.mit-bild{grid-template-columns:1fr}
  .bild img{max-height:26vh}
}

/* ══════════════════════════════════════════
   NUR NETZWERKFASSUNG
   ══════════════════════════════════════════ */

/* ── Lobby auf dem Beamer ── */
/* Oben mehr Platz als unten: dort sitzt der Zurück-Knopf, und der Titel soll
   nicht direkt darunter kleben. */
#lobby{align-items:center;justify-content:center;padding:8vh 4vw 2.5vh;z-index:1;overflow:hidden}
.lobby-inner{position:relative;z-index:2;width:100%;max-width:64em}
.beitritt{
  display:grid;grid-template-columns:auto 1fr;gap:2.4em;align-items:center;
  padding:1.6em 2em;background:var(--bg);margin:1.4em 0 1.2em;--dood-stroke:2.1px
}
.qr{display:grid;place-items:center;background:#fff;padding:.8em;border-radius:8px}
.qr svg{display:block;width:min(33vh,21em);height:auto}
.beitritt-text{min-width:0}
.beitritt-text h2{
  font-family:var(--font-heading);font-size:1.5rem;color:var(--primary);
  font-weight:700;margin-bottom:.3em
}
.adresse{
  font-family:var(--font-heading);font-weight:700;
  font-size:clamp(1.35rem,3.6vh,2.9rem);color:var(--cta-text);
  line-height:1.1;margin:.25em 0 .45em;
  /* Eine IP-Adresse darf nicht mitten in der Zahl brechen: „172.17.0.114:812 3"
     tippt niemand richtig ab. Lieber schrumpfen und in einer Zeile halten. */
  white-space:nowrap;overflow-wrap:normal
}
.beitritt-hinweis{font-size:1.02rem;color:var(--text-sub);line-height:1.45}
.beitritt-hinweis b{color:var(--primary)}
/* Unter 900px steht der QR-Code über dem Text. Betrifft den Beamer nie,
   aber ein halb breit gezogenes Fenster auf dem Laptop schon. */
@media (max-width:900px){
  .beitritt{grid-template-columns:1fr;gap:1.2em;justify-items:center;text-align:center}
  .qr svg{width:min(30vh,14em)}
}

/* Tische, die schon da sind */
.tische{display:flex;flex-wrap:wrap;gap:.6em;min-height:3.4em;margin-bottom:1.4em}
.tisch{
  display:flex;align-items:center;gap:.5em;padding:.5em .9em;background:var(--bg);
  font-size:1.05rem;font-weight:700;color:var(--primary)
}
@keyframes rein{from{opacity:0;transform:translateY(6px) scale(.96)}}
.tisch .weg{
  border:0;background:transparent;cursor:pointer;color:var(--text-muted);
  font-size:1.1em;line-height:1;padding:0 0 0 .1em
}
.tisch .weg:hover{color:var(--cta-text)}
.tisch.offline{opacity:.45}
.tisch .punkt{
  width:.55em;height:.55em;border-radius:50%;background:var(--ak-pfadi);flex:0 0 auto
}
.tisch.offline .punkt{background:var(--text-muted)}
.warten{color:var(--text-muted);font-size:1.05rem;align-self:center}

/* ── Statusleiste während der Frage ── */
.eingang{
  display:flex;align-items:center;gap:.55em;flex-wrap:wrap;
  font-size:1rem;color:var(--text-sub)
}
.eingang-zahl{font-family:var(--font-heading);font-weight:700;color:var(--primary)}
.ekugel{
  width:.92em;height:.92em;border-radius:50%;flex:0 0 auto;
  background:color-mix(in srgb,var(--primary) 18%,transparent);transition:background .25s
}
.ekugel.da{background:var(--ak-pfadi)}

/* ── Verteilung der Tipps in der Auflösung ── */
.tipps{
  flex:0 0 auto;min-width:2.1em;height:1.7em;padding:0 .5em;display:none;
  place-items:center;border-radius:99px;font-size:.78em;font-weight:700;
  background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--text-sub)
}
.stage.offen .tipps.hat{display:grid}
.antwort.richtig .tipps{background:color-mix(in srgb,var(--richtig) 22%,transparent);
  color:color-mix(in srgb,var(--richtig) 80%,var(--text))}

/* ── Rangliste ── */
#rangliste{padding:2.5vh 4vw;z-index:1;align-items:center;justify-content:center;overflow:hidden}
.rang-inner{width:100%;max-width:58em;position:relative;z-index:2}
.rang-kopf{
  font-family:var(--font-heading);font-weight:700;color:var(--primary);
  font-size:clamp(1.8rem,5vh,3rem);text-align:center;margin-bottom:1.2em
}
.rang-liste{display:flex;flex-direction:column;gap:.62em;list-style:none}
.rang-zeile{
  display:grid;grid-template-columns:2.4em 1fr auto auto;gap:.9em;align-items:center;
  padding:.62em 1em;background:var(--bg);font-size:1.25rem;position:relative;
  overflow:hidden
}
/* Punktebalken liegt HINTER dem Text, nicht als eigene Zeile darunter:
   so bleibt die Liste auch bei zwölf Tischen auf einem Bildschirm. */
.rang-balken{
  /* width:100% ist Pflicht: ein absolut positioniertes, leeres div ohne
     Breitenangabe ist 0 breit, und scaleX(0.8) von 0 bleibt 0. */
  position:absolute;inset:0 auto 0 0;width:100%;z-index:0;
  background:color-mix(in srgb,var(--primary) 9%,transparent);
  transform-origin:left;transition:transform .6s cubic-bezier(.22,.61,.36,1)
}
/* Der Balken MUSS ausgenommen bleiben. Sonst schlägt dieses position:relative
   sein position:absolute (gleiche Spezifität, spätere Regel gewinnt), er wird
   zum Grid-Item in Spalte 1 und schiebt die ganze Zeile auseinander. */
.rang-zeile > *:not(.rang-balken){position:relative;z-index:1}
.rang-platz{
  font-family:var(--font-heading);font-weight:700;color:var(--text-muted);
  text-align:right;font-variant-numeric:tabular-nums
}
.rang-name{font-weight:700;color:var(--text);min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.rang-runde{
  font-family:var(--font-heading);font-weight:700;color:var(--ak-pfadi);
  font-size:.92em;opacity:0;transition:opacity .4s
}
.rang-runde.zeig{opacity:1}
.rang-runde.null{color:var(--text-muted)}
.rang-punkte{
  font-family:var(--font-heading);font-weight:700;color:var(--primary);
  font-variant-numeric:tabular-nums;min-width:3.6em;text-align:right
}

/* ══════════════════════════════════════════
   HANDY
   ══════════════════════════════════════════ */
body.handy{
  overflow:hidden;height:100%;
  /* Beamerskalierung gilt hier nicht, auf dem Handy zählt die Daumenbreite */
  font-size:clamp(15px,4.1vw,21px)
}
body.handy #chalk-defs{position:absolute}
.h-app{position:fixed;inset:0;display:flex;flex-direction:column;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
.h-screen{flex:1;min-height:0;display:none;flex-direction:column}
.h-screen.aktiv{display:flex}

/* Kopf: Teamname, Platz, Punkte */
.h-kopf{
  flex:0 0 auto;display:flex;align-items:center;gap:.7em;
  padding:.7em 1em
}
.h-name{font-weight:700;color:var(--primary);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.h-punkte{font-family:var(--font-heading);font-weight:700;color:var(--cta-text);
  font-variant-numeric:tabular-nums}
.h-platz{font-size:.85em;color:var(--text-sub);white-space:nowrap}

/* Anmelden */
.h-mitte{
  flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:1.6em 1.3em;gap:1em
}
.h-mitte h1{font-size:2rem;line-height:1.1}
/* Ohne Silbentrennung: die Texte am Handy sind kurz und zentriert, da reißt
   eine Trennung mehr auf, als sie spart („gestar-tet“, „Ge-hört“). */
.h-mitte p{color:var(--text-sub);max-width:22em;hyphens:manual}
/* Fehler rot, wie .h-fehler es vorsieht. „.h-mitte p“ ist spezifischer und
   hat sie bisher grau überschrieben. */
.h-mitte .h-fehler{color:var(--cta-text)}
/* Das Namensfeld am Handy steckt wie alle anderen Felder in einer
   Kreide-Hülle. Am Handy ist die Kreide sogar wichtiger als am Rechner: dort
   ist es das einzige Bedienelement neben dem Knopf. */
/* Beide Breiten in rem, nicht em: em hängt an der eigenen Schriftgröße, und
   der Knopf hat 1.1rem. Mit je 19em war er dadurch 30 Pixel breiter als das
   Feld darüber, und die Kanten fluchteten nicht. */
.h-feld-huelle{width:100%;max-width:20rem;background:var(--bg)}
.h-feld{
  width:100%;padding:.75em .9em;font-size:1.15rem;
  font-family:var(--font-ui);background:transparent;color:var(--text);
  border:0;border-radius:var(--dood-radius);text-align:center
}
.h-feld:focus-visible{outline:0}
.h-fehler{color:var(--cta-text);font-weight:700;min-height:1.4em;font-size:.95rem}
.h-btn{
  position:relative;isolation:isolate;
  width:100%;max-width:20rem;padding:.85em 1.2em;border:0;cursor:pointer;
  background:transparent;color:#fff;border-radius:var(--dood-radius);
  font-family:var(--font-ui);font-weight:700;font-size:1.1rem;
  text-transform:uppercase;letter-spacing:.04em
}
/* Gezeichnete Fläche wie bei .btn-fire, siehe dort */
.h-btn::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:var(--cta);border-radius:var(--dood-radius);filter:url(#chalkf-ui);
  transition:background .2s
}
/* Am Handy gibt es kein Hover. Die dunklere Fläche beim Antippen ist die
   Rückmeldung, dass der Finger getroffen hat. */
.h-btn:is(:hover, :active)::before{background:var(--cta-hover)}
.h-btn:disabled{opacity:.5}

/* Die vier Antwortflächen */
.h-tasten{
  flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;gap:.6em;padding:.6em
}
.h-taste{
  position:relative;
  border:0;cursor:pointer;border-radius:var(--dood-radius);
  background:var(--mk);color:#fff;display:grid;place-items:center;
  font-family:var(--font-heading);font-weight:700;
  font-size:clamp(2.4rem,13vh,5rem);line-height:1;
  transition:transform .12s,opacity .25s,filter .25s;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation
}
.h-taste:nth-child(1){--mk:var(--ak-jupfi)}
.h-taste:nth-child(2){--mk:var(--ak-pfadi)}
.h-taste:nth-child(3){--mk:var(--ak-woe)}
.h-taste:nth-child(4){--mk:var(--ak-rover)}
.h-taste:active{transform:scale(.97)}
.h-tasten.gewaehlt .h-taste{opacity:.3;filter:grayscale(.7)}
.h-tasten.gewaehlt .h-taste.meine{opacity:1;filter:none}
/* Die eigene Wahl bekommt einen Kreidering von innen. Hier der ruhige Filter,
   nicht der für Bedienelemente: die Kachel ist ein Drittel des Bildschirms,
   und die starke Auslenkung sah darauf nach zerrissenem Papier aus statt nach
   einem Strich. Dieselbe Regel wie überall, nur umgekehrt angewandt: große
   Fläche, ruhige Kreide. */
.h-taste.meine::after{
  content:'';position:absolute;inset:.32em;pointer-events:none;
  /* Feste Strichstärke, nicht em: die Kachelschrift ist über 100px groß, und
     ein Rahmen in em wurde damit neun Pixel breit. So breit frisst die
     Turbulenz die Kante auf, statt sie zu bewegen, und der Rand sah nach
     gerissenem Papier aus. Dünn und ruhig ist Kreide. */
  border:2.6px solid rgba(255,255,255,.94);
  border-radius:calc(var(--dood-radius) * .7);filter:url(#chalkf)
}
.h-taste:disabled{cursor:default}

/* Rückmeldung nach dem Auflösen */
.h-echo{
  flex:0 0 auto;padding:1em 1.2em;text-align:center
}
.h-echo-gross{
  font-family:var(--font-heading);font-weight:700;font-size:1.5rem;line-height:1.2
}
.h-echo.gut .h-echo-gross{color:var(--ak-pfadi)}
.h-echo.schlecht .h-echo-gross{color:var(--cta-text)}
.h-echo-klein{font-size:.95rem;color:var(--text-sub);margin-top:.2em}
.h-warte{
  flex:0 0 auto;padding:.8em;text-align:center;color:var(--text-muted);
  font-size:.92rem
}
.h-verbindung{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--cta);color:#fff;text-align:center;padding:.6em;
  font-size:.9rem;font-weight:700;transform:translateY(110%);
  transition:transform .3s
}
.h-verbindung.zeig{transform:none}

/* Rangliste am Handy */
.h-rang{list-style:none;width:100%;max-width:24em;display:flex;
  flex-direction:column;gap:.4em;overflow:auto}
.h-rang li{
  display:grid;grid-template-columns:2em 1fr auto;gap:.7em;align-items:center;
  padding:.5em .8em;background:var(--bg-mid);border-radius:8px;font-size:1rem
}
.h-rang li.ich{background:color-mix(in srgb,var(--primary) 13%,transparent);font-weight:700}
/* --text-sub, nicht --text-muted: auf der grauen Zeile kam die Platzziffer im
   hellen Thema auf 4.3:1, in der eigenen, blau unterlegten Zeile sogar nur auf
   3.6:1. Ausgerechnet die Zahl, auf die ein Tisch schaut. Jetzt 6.5:1 und
   5.4:1, dunkel 8.2:1 und 7.3:1. */
.h-rang .p{font-family:var(--font-heading);font-weight:700;color:var(--text-sub);
  text-align:right}
.h-rang .z{font-family:var(--font-heading);font-weight:700;color:var(--primary)}

/* Alternative Adressen des Rechners, nur sichtbar wenn es mehrere gibt */
.adresse-alt:empty{display:none}
.adresse-alt{
  margin-top:.5em;font-size:.88rem;color:var(--text-muted);
  font-family:var(--font-heading)
}


/* Eingabefelder für den WLAN-Code */
.wlan-feld{display:block;margin-bottom:1em}
.wlan-feld span{
  display:block;font-size:.92rem;color:var(--text-sub);margin-bottom:.3em
}
/* Die Felder im WLAN-Fenster stecken in Kreide-Hüllen, deshalb hier kein
   eigener Rahmen mehr: sonst lägen zwei übereinander. */
.wlan-feld input{
  width:100%;padding:.6em .8em;font-size:1.05rem;font-family:var(--font-ui);
  background:transparent;color:var(--text);border:0;border-radius:var(--dood-radius)
}
.wlan-feld input:focus-visible{outline:0}
.wlan-fehler{color:var(--cta-text);font-weight:700;min-height:1.4em;font-size:.95rem}

/* ══════════════════════════════════════════
   QR-Codes: umgeschaltet, nicht nebeneinander
   ──────────────────────────────────────────
   Zwei Codes gleichzeitig führen dazu, dass Tische den falschen scannen.
   Also einer nach dem anderen, mit der Reihenfolge in der Beschriftung.
   ══════════════════════════════════════════ */
.qr-bereich{display:grid;justify-items:center;gap:.9em}
.qr-schalter{display:flex;gap:.4em}
.qr-tab{
  padding:.45em 1em;border:0;cursor:pointer;background:transparent;
  font-family:var(--font-ui);font-weight:700;font-size:.95rem;color:var(--text-muted);
  border-radius:99px;transition:background .18s,color .18s
}
.qr-tab:hover{color:var(--primary)}
.qr-tab.an{background:var(--primary);color:#fff}
.qr-bereich .qr svg{width:min(31vh,20em)}

/* ══════════════════════════════════════════
   STARTBILD vor der ersten Frage
   ══════════════════════════════════════════ */
#bereit{align-items:center;justify-content:center;text-align:center;padding:3vh 5vw;z-index:1;overflow:hidden}
.bereit-inner{position:relative;z-index:2;max-width:min(46em,86vw)}
.bereit-sub{font-size:1.3rem;color:var(--text-sub);margin-top:.6em}
.bereit-sub b{color:var(--primary);font-family:var(--font-heading)}
.bereit-regeln{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(11em,100%),1fr));
  gap:1em;margin:2.2em 0 1.6em;text-align:left
}
.regel{
  display:grid;gap:.25em;padding:.9em 1.1em;background:var(--bg);
  position:relative;border:0
}
.regel::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  border:var(--dood-stroke) solid var(--dood-ink);border-radius:var(--dood-radius);
  filter:url(#chalkf)
}
.regel-zahl{
  font-family:var(--font-heading);font-weight:700;font-size:1.9rem;
  color:var(--cta-text);line-height:1
}
.regel-text{font-size:.98rem;color:var(--text-sub);line-height:1.4}

/* ══════════════════════════════════════════
   ERSTER ZUG: nur die Frage
   ══════════════════════════════════════════ */
.stage.nur-frage .antworten,
.stage.nur-frage .erklaerung{display:none}
.stage.nur-frage .frage{
  font-size:2.85em;max-width:25em;
  /* Keine Silbentrennung auf der Schautafel: „Pfadfinder*in-nenbewegung"
     mitten im Wort zu trennen liest sich aus zehn Metern schlecht. Lieber
     eine Spur kleiner und dafür am Leerzeichen umbrechen. */
  hyphens:manual
}
/* Ohne Antworten ist Platz: das Bild darf größer sein */
.stage.nur-frage .bild img{height:min(34em,62vh)}
.stage.nur-frage .mitte.mit-bild{grid-template-columns:1fr;justify-items:center}

/* ══════════════════════════════════════════
   TREPPCHEN
   ══════════════════════════════════════════ */
.podium{
  /* Flexbox statt festem Dreispalter: das Podium bleibt zentriert, egal ob
     eine, zwei oder drei Stufen entstehen. Mit drei festen Spalten hing es bei
     Gleichständen schief in der Fläche, weil die leere Spalte mitzählte. */
  display:flex;justify-content:center;align-items:flex-end;
  gap:1.4vw;height:min(36vh,19em);
  /* Schmaler als die Liste darunter: über die volle Breite gezogen werden aus
     den Säulen breite Klötze, und das Treppchen verliert seine Form. */
  max-width:min(34em,72vw);margin:0 auto 1.6em
}
.stufe{
  display:flex;flex-direction:column;justify-content:flex-end;height:100%;
  flex:1 1 0;max-width:11em;min-width:0
}
.stufe.leer{visibility:hidden}
.stufe-kopf{
  display:grid;justify-items:center;gap:.12em;
  /* Frei über der Säule statt über ihr im Fluss: sonst stauchte ein hoher
     Namensblock (Gleichstand, drei Namen) die Säule, und Platz 2 konnte höher
     stehen als Platz 1. */
  position:absolute;left:-.4em;right:-.4em;bottom:calc(100% + .5em);
  opacity:0;animation:kopf-rein .45s ease-out both
}
@keyframes kopf-rein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.stufe-name{
  font-family:var(--font-heading);font-weight:700;font-size:1.25rem;color:var(--text);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.stufe-punkte{
  font-family:var(--font-heading);font-weight:700;font-size:1.6rem;color:var(--primary);
  font-variant-numeric:tabular-nums;line-height:1
}
.stufe-saeule{
  position:relative;flex-shrink:0;border-radius:var(--dood-radius) var(--dood-radius) 0 0;
  background:color-mix(in srgb,var(--primary) 16%,var(--bg));
  display:grid;place-items:center;
  transform-origin:bottom center;
  animation:saeule-wachsen .65s cubic-bezier(.18,.72,.28,1) both
}
@keyframes saeule-wachsen{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.stufe-saeule::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  border:2.1px solid var(--dood-ink);
  border-radius:var(--dood-radius) var(--dood-radius) 0 0;
  border-bottom:0;filter:url(#chalkf)
}
.stufe-platz{
  font-family:var(--font-heading);font-weight:700;
  font-size:clamp(2rem,7vh,4.2rem);color:var(--primary);opacity:.5;line-height:1
}
/* Der Sieger bekommt Gold und einen Hauch mehr Aufmerksamkeit */
.stufe.sieger .stufe-saeule{
  background:color-mix(in srgb,var(--highlight) 22%,var(--bg));
  --dood-ink:var(--highlight)
}
.stufe.sieger .stufe-platz{color:var(--highlight);opacity:.75}
.stufe.sieger .stufe-punkte{color:var(--highlight)}

/* Platzwechsel */
.wechsel{
  font-family:var(--font-heading);font-weight:700;font-size:.95rem;
  padding:.06em .5em;border-radius:99px;white-space:nowrap
}
.wechsel.rauf{
  color:#fff;background:var(--ak-pfadi);
  animation:wechsel-puls 1.5s ease-out 1.1s 2
}
.wechsel.runter{color:var(--cta-text);background:color-mix(in srgb,var(--cta) 12%,transparent)}
.wechsel.gleich{color:var(--text-muted)}
@keyframes wechsel-puls{
  0%,100%{transform:scale(1)}
  30%{transform:scale(1.18)}
}

/* Plätze 4 bis 7 unter dem Podium */
#rangliste .rang-liste{gap:.5em}
#rangliste .rang-zeile{
  grid-template-columns:2.4em 1fr auto auto auto;font-size:1.1rem;
  opacity:0;animation:zeile-rein .4s ease-out both
}
@keyframes zeile-rein{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .stufe-saeule,.stufe-kopf,#rangliste .rang-zeile,.wechsel.rauf{animation:none;opacity:1}
  .stufe-saeule{transform:none}
}

/* ── Handy: Fragetext ── */
.h-frage{
  flex:0 0 auto;padding:.7em 1em .1em;font-size:1.05rem;line-height:1.35;
  color:var(--text);text-align:center;font-weight:700
}
.h-frage:empty{display:none}
/* Der Selektor braucht die zusätzliche Klasse: „.h-mitte p" setzt eine
   graue Textfarbe und schlägt sonst dieses Blau, weil es spezifischer ist. */
.h-mitte .h-frage-gross{
  font-family:var(--font-heading);font-weight:700;
  /* Eine Spur kleiner, damit „Pfadfinder*innenbewegung" auf 375 px in eine
     Zeile passt statt getrennt zu werden. */
  font-size:1.4rem;line-height:1.3;
  color:var(--primary);text-align:center;text-wrap:balance
}
/* Ohne Unterstreichung: der Kreiderahmen aus der Liste der Bedienelemente
   sagt schon „Knopf“. Beides zusammen las sich halb als Link, halb als Knopf. */
.h-wechsel{
  margin-top:1.6em;background:transparent;border:0;cursor:pointer;
  font-family:var(--font-ui);font-size:.92rem;color:var(--text-muted);
  padding:.5em .9em
}
.h-wechsel:is(:hover, :active){color:var(--cta-text)}

/* Mehrere Tische auf einer Podiumsstufe bei Punktgleichheit */
.stufe-kopf .stufe-name{font-size:1.05rem}
.stufe-kopf .stufe-name:only-of-type{font-size:1.25rem}
.stufe-weitere{font-size:.85rem;color:var(--text-muted)}

/* Warnung, wenn zwei Geräte am selben Tisch hängen */
.geraete{
  font-size:.78em;font-weight:700;padding:.1em .5em;border-radius:99px;
  background:color-mix(in srgb,var(--highlight) 18%,transparent);
  color:var(--highlight);white-space:nowrap
}

/* Der Textblock neben dem QR-Code wechselt mit dem Tab */
.bt-teil h2{
  font-family:var(--font-heading);font-size:1.5rem;color:var(--primary);
  font-weight:700;margin-bottom:.3em
}

/* ── Handy: Zeitbalken ── */
.h-uhr{
  flex:0 0 auto;height:.4em;margin:0 1em;border-radius:99px;
  background:var(--bg-mid);overflow:hidden;opacity:0;transition:opacity .2s
}
.h-uhr.an{opacity:1}
.h-uhr-fuell{
  height:100%;transform-origin:left center;border-radius:99px;
  background:var(--primary);transition:background .3s
}
.h-uhr.knapp .h-uhr-fuell{background:var(--cta)}

/* Zeit abgelaufen: die Knöpfe müssen auch aussehen wie gesperrt */
.h-tasten.zeit-aus .h-taste{opacity:.3;filter:grayscale(.7)}

/* Übungsfrage: entwarnender Hinweis, kein Warnton wie bei Mehrfachantworten */
.hinweis.uebung{
  color:var(--text-sub);
  background:color-mix(in srgb,var(--primary) 9%,transparent)
}

/* Hinweis in der Fußzeile, wenn nur gezeigt und nicht gespielt wird */
/* Nachfrage vor dem Auflösen, wenn noch Tische fehlen: dieselbe Farbe wie die
   anderen Hinweise, die etwas Ungewöhnliches melden. */
.auto-an{color:var(--primary);font-weight:700}
.nachfrage{
  color:var(--highlight);font-weight:700;
  padding:.1em .6em;border-radius:99px;
  background:color-mix(in srgb,var(--highlight) 12%,transparent)
}
.nur-schau{
  color:var(--highlight);font-weight:700;
  padding:.1em .6em;border-radius:99px;
  background:color-mix(in srgb,var(--highlight) 12%,transparent)
}

/* Hinweis unter der Lösungsliste, wenn noch Fragen offen sind */
.l-rest{
  grid-column:1/-1;margin-top:.6em;font-size:.9rem;
  color:var(--text-muted);text-align:center
}

/* Zwei Textknöpfe untereinander im Wartebildschirm */
.h-wechsel-paar{display:grid;gap:.1em;margin-top:1.4em;justify-items:center}
.h-wechsel-paar .h-wechsel{margin-top:0}

/* Der Tisch-Code für ein zweites Handy. Leise, aber lesbar: --text-sub auf
   dem Papiergrund. Der Code selbst ist gesperrt gesetzt, damit die vier
   Zeichen beim Abtippen einzeln zu erkennen sind. */
.h-code{margin-top:1.4em;font-size:.88rem;color:var(--text-sub);max-width:22em;
  text-align:center}
.h-code:empty{display:none}
.h-code b{font-family:var(--font-heading);letter-spacing:.12em;color:var(--primary)}

/* Platzhalter für Bildfragen, die noch nicht gespielt sind */
.r-bild-zu{
  flex:0 0 auto;width:2.6em;height:2em;display:grid;place-items:center;
  border-radius:4px;background:color-mix(in srgb,var(--primary) 10%,transparent);
  color:var(--text-muted)
}
.r-bild-zu svg{
  width:1.3em;height:1.3em;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;filter:url(#chalkf)
}

/* ── Einstellungsfenster ── */
#ov-einstellungen .start-opt{
  justify-content:center;margin:0;flex-wrap:wrap
}
.einst-hinweis{
  color:var(--text-sub);font-size:.98rem;line-height:1.45;
  text-align:center;margin-bottom:1.4em;max-width:32em;margin-left:auto;margin-right:auto
}
.opt.gesperrt{opacity:.4;cursor:not-allowed}
.opt:disabled{pointer-events:none}

/* ── Lobby: Zurück und die zwei Zeichen ──
   Vor dem Start soll ein Knopf einladen, nicht drei gleich große nebeneinander.
   Einstellungen und Tastenbelegung stehen deshalb als Zeichen daneben, und der
   Weg zurück in die Werkstatt oben links, wo man ihn sucht.

   Vorher lag beides hinter drei Punkten. Das war eine Klickebene für zwei
   Dinge, die man vor jedem Abend genau einmal braucht. */
.lobby-zurueck{
  position:absolute;top:2.2vh;left:3vw;z-index:3;
  display:inline-flex;align-items:center;gap:.4em;
  padding:.5em .95em .5em .7em;border-radius:var(--dood-radius);
  font-family:var(--font-ui);font-weight:700;font-size:.95rem;
  color:var(--text-sub);text-decoration:none;
  --dood-ink:color-mix(in srgb,var(--primary) 42%,transparent);
  transition:color .2s,background .2s,transform .2s
}
.lobby-zurueck::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  border:var(--ui-stroke) solid var(--dood-ink);
  border-radius:var(--dood-radius);filter:url(#chalkf-ui)
}
.lobby-zurueck:hover{color:var(--text);--dood-ink:var(--primary);
  background:color-mix(in srgb,var(--primary) 7%,transparent);
  transform:translateY(var(--btn-lift))}
.lobby-zurueck svg{
  width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round
}

/* Die zwei Zeichen neben „Quiz starten". Sie strecken sich auf dessen Höhe:
   in einer Reihe mit einem Knopf ist eine abweichende Höhe das Erste, was
   auffällt, und der Knopf wächst am Beamer mit der Schrift. */
.lobby-ik{
  /* Quadratisch und genau so hoch wie „Quiz starten" daneben. Die Höhe steht
     hier ausgerechnet, weil aspect-ratio an einem gestreckten Flex-Element
     nicht greift: die Hauptachse wird vor dem Strecken bestimmt, und dann ist
     der Knopf zwanzig Pixel breit.
     .btn ist 1.05rem groß, Zeilenhöhe 1.5, Innenabstand .72em oben und unten:
     1.05 * 1.5 + 2 * 0.72 * 1.05 = 3.087rem. */
  position:relative;width:3.09rem;height:3.09rem;align-self:center;
  display:grid;place-items:center;
  background:transparent;border:0;border-radius:var(--dood-radius);
  color:var(--text-sub);cursor:pointer;
  --dood-ink:color-mix(in srgb,var(--primary) 45%,transparent);
  transition:color .2s,background .2s,transform .2s
}
.lobby-ik::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  border:var(--ui-stroke) solid var(--dood-ink);
  border-radius:var(--dood-radius);filter:url(#chalkf-ui)
}
.lobby-ik:hover{color:var(--text);--dood-ink:var(--primary);
  background:color-mix(in srgb,var(--primary) 7%,transparent);
  transform:translateY(var(--btn-lift))}
.lobby-ik svg{
  width:1.5em;height:1.5em;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round
}

/* ══════════════════════════════════════════
   WERKSTATT, EDITOR UND MODERATOR
   ──────────────────────────────────────────
   Drei Oberflächen, die nur am eigenen Rechner laufen, und die deshalb andere
   Grundregeln brauchen als Beamer und Handy: die Seite darf scrollen, und 1rem
   hängt nicht an der Fensterhöhe. Am Beamer ist die höhenbezogene Schrift
   richtig, weil dort alles auf einen Blick passen muss; beim Bearbeiten von
   dreißig Fragen würde ein hohes Fenster die Schrift ins Absurde treiben.

   Der Look folgt dem Design-System der Website (DESIGN-SYSTEM.md):

   * Was eine Karte ist, bekommt einen Kreide-Rahmen über .kreide, also ein
     ::after mit dem SVG-Filter. Nie ein echtes border.
   * Was ein Bedienelement ist (Eingabefeld, Chip, Icon-Knopf), bekommt die
     gemeinsame Höhe --ctl-h, einen zarten Rahmen und eine getönte Fläche.
     Kreide funktioniert dort nicht: ein Feld, dessen Rahmen bei jedem Tastendruck
     neu verzittert, liest sich als Fehler.
   * Keine Kicker-Zeilen. Kleine Versalzeilen über Überschriften sind auf der
     Website am 23.08.2026 samt Konzept entfernt worden. Überschriften sind
     Überschriften, in normaler Schreibweise.
   * Kein Versalsatz außer auf .btn, wie auf der Website.
   ══════════════════════════════════════════ */
html:is(.werkstatt, .mod-html){font-size:16px}
html:is(.werkstatt, .mod-html),
html:is(.werkstatt, .mod-html) body{height:auto;min-height:100%;overflow:visible}
body:is(.werkstatt, .mod){line-height:1.55}
/* Das Korn liegt über allem und flimmert über Eingabefeldern. Am Beamer ist es
   die Papierstruktur, hier wäre es Schmutz auf dem Arbeitsgerät. */
body:is(.werkstatt, .mod)::after{display:none}

:root{
  /* Gemeinsame Höhe jedes Bedienelements, wie auf der Website. Wer eine eigene
     Höhe setzt, bricht die Oberkanten einer Zeile. */
  --ctl-h:2.75rem;
  --ctl-radius:11px;
  /* Eigene Strichstärke für Bedienelemente. Die 1.6px der Karten wirken an
     einem 44px-Knopf dünn, und zusammen mit dem stärker ausgelenkten
     #chalkf-ui gibt 2px erst den gezeichneten Eindruck. */
  --ui-stroke:2px;
  --ctl-linie:color-mix(in srgb,var(--text) 22%,transparent);
  --ctl-flaeche:color-mix(in srgb,var(--text) 5%,transparent);
}

/* ══ Bedienelemente ══
   Alles Bedienbare trägt den Kreide-Rahmen, auch Eingabefelder. Ein input kann
   selbst kein ::after tragen (Chrome zeichnet generierten Inhalt an
   Formularelementen nicht), deshalb steckt das Feld in einer Hülle, und die
   Hülle ist die Kreide. Sichtbar bleibt dabei genau ein Rahmen: das Feld
   selbst hat keinen.

   Der Filter ist mit festem Seed deterministisch, das Gezeichnete zittert also
   beim Tippen nicht. Beim Ändern der Fenstergröße wird es neu gerastert, das
   ist derselbe Fall wie bei jeder Karte. */
.feld-huelle{
  display:block;position:relative;border:0;border-radius:var(--dood-radius);
  background:var(--ctl-flaeche);--dood-ink:color-mix(in srgb,var(--primary) 55%,transparent);
  transition:background .2s
}
.feld-huelle::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  border:var(--ui-stroke) solid var(--dood-ink);
  border-radius:var(--dood-radius);filter:url(#chalkf-ui)
}
.feld-huelle:hover{--dood-ink:var(--primary)}
/* Fokus liegt im Feld, sichtbar werden muss die Hülle: sonst zeigt der Ring an
   einer Stelle, wo kein Rahmen ist. */
.feld-huelle:focus-within{
  --dood-ink:var(--primary);background:var(--bg);
  outline:2px solid var(--primary);outline-offset:2px
}

.feld,
.wlan-feld input,
.ed-feld input[type=text],
.ed-feld input[type=number],
.ed-feld textarea,
.ed-antwort-text{
  display:block;width:100%;
  font-family:var(--font-ui);font-size:1rem;line-height:1.5;
  color:var(--text);background:transparent;
  border:0;border-radius:var(--dood-radius);
  padding:0 .9em;height:var(--ctl-h)
}
.ed-feld textarea{
  height:auto;min-height:calc(var(--ctl-h) * 1.7);padding:.7em .9em;resize:vertical
}
/* Felder ohne Hülle (WLAN-Fenster) bekommen die Kreide direkt über einen
   Rahmen: dort steckt kein Wrapper im Markup. */
/* Im WLAN-Fenster stecken die Felder inzwischen auch in Hüllen. */
.wlan-feld .feld-huelle{background:var(--bg)}
.feld:focus-visible,
.wlan-feld input:focus-visible,
.ed-antwort-text:focus-visible{
  outline:2px solid var(--primary);outline-offset:2px;background:var(--bg)
}
/* Innerhalb einer Hülle zeichnet die Hülle den Fokus, das Feld selbst nicht */
.feld-huelle :is(input,textarea):focus-visible{outline:0}
::placeholder{color:var(--text-muted);opacity:1}

/* Nur für Vorleseprogramme, für das Auge unsichtbar. Die Regel war beim Umbau
   des Werkstatt-Abschnitts verloren gegangen, und dann stand unter den drei
   Punkten in der Lobby plötzlich das Wort „Mehr". */
.sr{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px
}

/* Fokus grundsätzlich sichtbar, auf allem was klickbar ist */
:is(button,a,summary,[tabindex]):focus-visible{
  outline:2px solid var(--primary);outline-offset:3px;border-radius:6px
}

/* Chip: der kleine Nebenknopf für Kopieren, Löschen und Ähnliches. Ohne
   Versalsatz, wie die Chips auf der Website. Zwei Größen: die volle steht
   neben Eingabefeldern in einer Reihe, die kleine neben Knöpfen in einer
   Kartenzeile, wo 44px zu wuchtig für „Kopie" wären. */
.chip{
  display:inline-flex;align-items:center;gap:.45em;
  transition:color .2s,background .2s,transform .2s;
  height:var(--ctl-h);padding:0 1em;
  font-family:var(--font-ui);font-size:.95rem;font-weight:600;
  letter-spacing:0;text-transform:none;white-space:nowrap;text-decoration:none;
  color:var(--text-sub);background:transparent;cursor:pointer;
  border:0;border-radius:var(--dood-radius);
  --dood-ink:color-mix(in srgb,var(--primary) 50%,transparent);
  transition:color .2s,background .2s
}
.chip:hover{color:var(--text);--dood-ink:var(--primary);
  background:color-mix(in srgb,var(--primary) 7%,transparent);
  transform:translateY(var(--btn-lift))}
.chip.weg:hover{color:var(--cta-text);--dood-ink:var(--cta-text);
  background:color-mix(in srgb,var(--cta) 8%,transparent)}
.chip:disabled{cursor:not-allowed;color:var(--text-muted);background:transparent;
  --dood-ink:color-mix(in srgb,var(--text) 20%,transparent)}
/* Keine zweite Chip-Größe mehr. Sie war für „Kopie" und „Löschen" gedacht, und
   die sind inzwischen Zeichen. Übrig blieben Chips, die neben 44-Pixel-Knöpfen
   standen und sieben Pixel kleiner waren. */
.chip svg{
  width:1.05em;height:1.05em;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round
}

/* Icon-Knopf, quadratisch in derselben Höhe */
.ik-flach{
  width:var(--ctl-h);height:var(--ctl-h);display:grid;place-items:center;
  background:transparent;border:0;border-radius:var(--dood-radius);
  color:var(--text-sub);cursor:pointer;flex:0 0 auto;
  --dood-ink:color-mix(in srgb,var(--primary) 50%,transparent);
  transition:color .2s,background .2s,transform .2s
}
.ik-flach:hover{color:var(--text);--dood-ink:var(--primary);
  background:color-mix(in srgb,var(--primary) 7%,transparent);
  transform:translateY(var(--btn-lift))}
.ik-flach.weg:hover{color:var(--cta-text);--dood-ink:var(--cta-text);
  background:color-mix(in srgb,var(--cta) 8%,transparent)}
.ik-flach:disabled{cursor:not-allowed;color:var(--text-muted);background:transparent;
  --dood-ink:color-mix(in srgb,var(--text) 18%,transparent)}
.ik-flach svg{width:1.25em;height:1.25em;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Rollbalken der eigenen Scroll-Flächen. Kreide nimmt hier kein Filter an,
   also das Nächstbeste: schmal, Griff in der Kreidefarbe, keine Rinne.
   NEUE SCROLL-FLÄCHE? → hier eintragen. */
.ed-liste,.ed-galerie,.ov{scrollbar-color:color-mix(in srgb,var(--dood-ink) 34%,transparent) transparent}
@supports not selector(::-webkit-scrollbar){
  .ed-liste,.ed-galerie,.ov{scrollbar-width:thin}
}
:is(.ed-liste,.ed-galerie,.ov)::-webkit-scrollbar{width:10px;height:10px;background:transparent}
:is(.ed-liste,.ed-galerie,.ov)::-webkit-scrollbar-track{background:transparent}
:is(.ed-liste,.ed-galerie,.ov)::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--dood-ink) 30%,transparent);
  border-radius:99px;border:3px solid transparent;background-clip:content-box
}

/* ══════════════════ WERKSTATT ══════════════════ */
.wk-seite{max-width:62em;margin:0 auto;padding:2.6em 1.6em 6em;position:relative;z-index:1}
/* Hintergrundmotive wie auf der Website, dezent und ohne Parallaxe: die Seite
   ist eine Arbeitsfläche, sie soll nicht wandern. */
body.werkstatt .motive{position:fixed;opacity:.09}

.wk-kopf{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:1.5em;margin-bottom:2.8em;flex-wrap:wrap
}
.wk-kopf h1{
  font-family:var(--font-heading);font-weight:700;font-size:2.2rem;
  color:var(--primary);line-height:1.12;letter-spacing:-.01em
}
.wk-sub{color:var(--text-sub);max-width:36em;margin-top:.5em}
.wk-kopf-akt{display:flex;gap:.5em;align-items:center}

.wk-block{margin-bottom:3.2em}
.wk-block h2{
  font-family:var(--font-heading);font-weight:700;font-size:1.4rem;
  color:var(--primary);margin-bottom:1em
}
.wk-block-kopf{
  display:flex;justify-content:space-between;align-items:center;
  gap:1em;flex-wrap:wrap;margin-bottom:1.2em
}
.wk-block-kopf h2{margin:0}
.wk-leer{
  color:var(--text-sub);padding:2.4em 1.6em;text-align:center;
  background:var(--bg-mid);border-radius:var(--dood-radius)
}
.wk-hinweis{color:var(--text-muted);font-size:.92rem;margin-top:1.2em}
.wk-schritte{list-style:none;display:grid;gap:.9em;counter-reset:s}
.wk-schritte li{
  counter-increment:s;position:relative;padding-left:2.6em;color:var(--text-sub)
}
.wk-schritte li::before{
  content:counter(s);position:absolute;left:0;top:0;
  width:1.8em;height:1.8em;display:grid;place-items:center;
  background:var(--bg-subtle);color:var(--primary);
  font-weight:700;border-radius:50%;font-size:.86em
}
.wk-schritte b{color:var(--text)}

/* ── Quizkarten ──
   Karten, weil die Karte hier die Interaktion ist: jede trägt ihre eigenen
   Knöpfe. Kreide-Rahmen, Anheben beim Überfahren, wie auf der Website. */
.wk-liste{display:grid;gap:1.1em}
/* ── Karten-Hover wie auf der Website ──
   Ein sanfter Verlauf aus der Ecke unten links, ab der Kartenmitte ausgelaufen.
   Kein Anheben: die Website hebt nur Karten an, die selbst ein Link sind, und
   diese hier ist ein Behälter mit eigenen Knöpfen darin. Ein Kasten, der sich
   bewegt, ohne dass ein Klick darauf etwas tut, verspricht das Falsche. */
.wk-karte{
  position:relative;overflow:hidden;
  background:var(--bg-card);border-radius:var(--dood-radius);
  padding:1.35em 1.5em;display:flex;gap:1.5em;
  justify-content:space-between;align-items:center;flex-wrap:wrap;
  transition:background .3s
}
.wk-karte::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top right,
    color-mix(in srgb,var(--karten-akzent,var(--primary)) var(--card-glow),transparent) 0%,
    transparent 46%);
  opacity:0;transition:opacity .5s ease
}
.wk-karte:hover::before{opacity:1}
/* Das geladene Quiz bekommt seinen Verlauf in Rot, wie schon seinen Rahmen */
.wk-karte.aktiv{--karten-akzent:var(--cta);--dood-ink:var(--cta)}
/* Nicht lesbares Quiz: gedämpfter Rahmen, kein Verlauf beim Darüberfahren.
   Es soll auffallen, aber nicht wie ein spielbares Quiz aussehen. */
.wk-kaputt{--dood-ink:var(--text-muted)}
.wk-kaputt::before{display:none}
.wk-kaputt .wk-karte-zahlen{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.82rem;hyphens:manual}
.wk-karte h3{
  font-family:var(--font-heading);font-weight:700;font-size:1.2rem;
  color:var(--text);display:flex;align-items:baseline;gap:.6em;flex-wrap:wrap
}
.wk-karte-sub{color:var(--text-sub);margin-top:.25em}
.wk-karte-zahlen{
  /* Auf der Kartenfläche kommt --text-muted bei .9rem nur auf 4.47:1 und
     verfehlt AA um eine Kleinigkeit. Der Kartengrund ist dunkler als der
     Seitengrund, wo derselbe Ton noch reicht. */
  color:var(--text-sub);font-size:.9rem;margin-top:.55em;
  display:flex;gap:.5em;flex-wrap:wrap;align-items:center
}
.wk-karte-zahlen b{color:var(--text-sub)}
.wk-karte-zahlen .punkt{
  width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5
}
/* „geladen" ist eine Zustandsmarke, kein Kicker: normale Schreibweise, wie
   die Chips auf der Website. */
.wk-marke{
  font-family:var(--font-ui);font-size:.8rem;font-weight:700;
  letter-spacing:0;text-transform:none;
  /* --cta-text, nicht --cta: das Flächenrot kommt auf dunklem Grund nur auf
     2.1:1. Die Randfarbe darf beim Flächenrot bleiben, ein Rahmen ist kein
     Text und braucht nur 3:1. */
  color:var(--cta-text);border:0;
  background:color-mix(in srgb,var(--cta) 12%,transparent);
  padding:.12em .65em;border-radius:999px;white-space:nowrap;
  --dood-ink:color-mix(in srgb,var(--cta-text) 55%,transparent)
}
.wk-karte-akt{display:flex;gap:.5em;align-items:center;flex-wrap:wrap}
/* Eine Höhe für jedes Bedienelement, wie im Design-System (--ctl-h). Vorher
   standen in einer Kartenzeile 36, 36, 44 und 44 Pixel nebeneinander: die
   Oberkanten liefen auseinander, und man sieht es, ohne zu wissen warum. */
.btn-sm{height:var(--ctl-h);padding:0 1.15em;font-size:.88rem}
/* Auch der große Knopf, aber nur in Werkstatt und Editor: dort steht er in
   Reihen mit anderen Bedienelementen. Am Beamer bleibt er höhenlos und wächst
   mit der Schrift mit, weil dort alles an der Fensterhöhe hängt. */
html.werkstatt .btn{height:var(--ctl-h);padding:0 1.6em}

/* ── Reiter ──
   Zwei Bereiche auf einer Seite. Gezeichnet wie alles andere; der aktive trägt
   einen kräftigeren Strich und die Marke in Rot statt nur eine andere Farbe:
   ein Reiter, den man nur an einer Tönung erkennt, ist im Halbdunkel keiner. */
.wk-reiter{display:flex;gap:.5em;margin-bottom:2em;flex-wrap:wrap}
.wk-reiter-knopf{
  position:relative;
  display:inline-flex;align-items:center;gap:.5em;
  height:var(--ctl-h);padding:0 1.15em;
  background:transparent;border:0;border-radius:var(--dood-radius);cursor:pointer;
  font-family:var(--font-ui);font-size:1rem;font-weight:700;
  color:var(--text-sub);white-space:nowrap;
  --dood-ink:color-mix(in srgb,var(--primary) 38%,transparent);
  transition:color .2s,background .2s,transform .2s
}
.wk-reiter-knopf::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  border:var(--ui-stroke) solid var(--dood-ink);
  border-radius:var(--dood-radius);filter:url(#chalkf-ui)
}
.wk-reiter-knopf svg{
  width:1.15em;height:1.15em;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round
}
.wk-reiter-knopf:hover{color:var(--text);--dood-ink:var(--primary);
  background:color-mix(in srgb,var(--primary) 7%,transparent);
  transform:translateY(var(--btn-lift))}
.wk-reiter-knopf.an{
  color:var(--cta-text);--dood-ink:var(--cta-text);
  background:color-mix(in srgb,var(--cta) 9%,transparent);transform:none
}
.wk-reiter-zahl{
  font-family:var(--font-heading);font-size:.86rem;
  padding:.05em .5em;border-radius:999px;
  background:color-mix(in srgb,var(--text) 12%,transparent);color:var(--text-sub)
}
.wk-reiter-knopf.an .wk-reiter-zahl{
  background:color-mix(in srgb,var(--cta) 16%,transparent);color:var(--cta-text)
}
.wk-reiter-zahl:empty{display:none}

/* ── Sortieren ── */
.wk-sortieren{display:flex;align-items:center;gap:.45em;flex-wrap:wrap}
.wk-sortieren-titel{
  font-size:.9rem;font-weight:700;color:var(--text-sub);margin-right:.2em
}
.wk-pfeil{
  font-family:var(--font-heading);font-size:.95em;line-height:1;text-align:center
}
/* Ohne Pfeil auch ohne Platz dafür. Vorher hielt der Pfeilplatz .7em frei,
   damit der Knopf beim Aktivieren nicht wächst; dafür saß die Beschriftung des
   inaktiven Knopfes sichtbar links neben der Mitte, mit einer Leerstelle
   rechts. Ein Knopf, der bei einem Klick etwas breiter wird, ist harmloser als
   einer, der dauerhaft schief aussieht. */
.wk-pfeil:empty{display:none}
.chip.an{
  color:var(--cta-text);--dood-ink:var(--cta-text);
  background:color-mix(in srgb,var(--cta) 9%,transparent)
}
.chip.an:hover{transform:none;background:color-mix(in srgb,var(--cta) 14%,transparent)}

/* ══════════════════ EDITOR ══════════════════ */
.ed-seite{display:flex;flex-direction:column;min-height:100vh}

/* ── Kopfleiste ── */
.ed-kopf{
  display:flex;align-items:center;gap:1.2em;flex-wrap:wrap;
  padding:.8em 1.5em;background:var(--bg-mid);
  position:sticky;top:0;z-index:50;--linie-rand:0
}
.ed-zurueck{
  display:inline-flex;align-items:center;gap:.35em;
  height:var(--ctl-h);padding:0 .9em 0 .7em;
  color:var(--text-sub);text-decoration:none;font-weight:700;font-size:.92rem;
  white-space:nowrap;border:0;border-radius:var(--dood-radius);
  --dood-ink:color-mix(in srgb,var(--primary) 50%,transparent);
  transition:color .2s,background .2s,transform .2s
}
.ed-zurueck:hover{color:var(--text);--dood-ink:var(--primary);
  background:color-mix(in srgb,var(--primary) 7%,transparent);
  transform:translateY(var(--btn-lift))}
.ed-zurueck svg{
  width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round
}
.ed-titelfeld{flex:1 1 18em;min-width:12em;display:grid;gap:.1em}
/* Titel und Untertitel sind Felder, sehen aber nicht so aus, solange niemand
   hineinfasst: eine Kopfzeile mit zwei Kästen darin wirkt wie ein Formular,
   und der Titel ist eine Überschrift. */
.ed-titelfeld .feld-huelle{
  /* Unsichtbar, solange niemand hinfasst: eine Kopfzeile voller Kästen wirkt
     wie ein Formular, und der Titel ist eine Überschrift. */
  background:transparent;--dood-ink:transparent
}
.ed-titelfeld .feld-huelle:hover{
  background:var(--ctl-flaeche);
  --dood-ink:color-mix(in srgb,var(--primary) 45%,transparent)
}
.ed-titelfeld .feld-huelle:focus-within{--dood-ink:var(--primary)}
.ed-titel,.ed-sub{
  width:100%;background:transparent;border:0;
  color:var(--text);padding:.2em .5em;height:auto;
  font-family:var(--font-heading);font-weight:700;font-size:1.2rem
}
.ed-sub{font-family:var(--font-ui);font-weight:400;font-size:.9rem;color:var(--text-sub)}
.ed-kopf-akt{display:flex;gap:.5em;align-items:center;flex-wrap:wrap}
.ed-stand{
  font-size:.86rem;color:var(--text-muted);white-space:nowrap;text-align:right
}
.ed-stand.achtung{color:var(--cta-text);font-weight:700}
/* Kein eigener Stil mehr für den gesperrten Speicherknopf: .btn:disabled
   weiter oben macht das, und diese Regel stand später und war schwächer
   (--text-muted statt --text-sub, im Dunkelmodus 2.7:1). */

.ed-spalten{display:flex;flex:1;align-items:stretch;min-height:0}

/* ── Fragenliste ── */
.ed-liste-spalte{
  flex:0 0 22em;max-width:40vw;
  display:flex;flex-direction:column;
  position:sticky;top:var(--ed-kopf-h,4.4em);align-self:flex-start;
  max-height:calc(100vh - var(--ed-kopf-h,4.4em))
}
.ed-liste-kopf{
  display:flex;justify-content:space-between;align-items:center;gap:.7em;
  /* Rechts mehr als links: dort läuft die senkrechte Trennlinie, und der Knopf
     stand vorher direkt daran.
     Unten kein Strich: die Kopfzeile der Kopfleiste steht schon über einem, und
     ein zweiter zwanzig Pixel darunter teilt eine Spalte, die niemand
     aufgeteilt sehen will. Der Abstand trennt genug. */
  padding:.7em 1.15em .9em .95em;
  font-size:.9rem;font-weight:700;color:var(--text-sub)
}
.ed-liste{list-style:none;overflow-y:auto;flex:1;padding:.55em .95em .55em .5em}
.ed-liste-fuss{padding:.8em 1.15em .8em .95em;font-size:.82rem;color:var(--text-sub)}
.ed-eintrag{
  position:relative;
  display:flex;gap:.3em;align-items:flex-start;
  padding:.6em .7em;border-radius:var(--dood-radius);cursor:pointer;
  font-size:.93rem;color:var(--text-sub);line-height:1.4;
  --dood-ink:transparent
}
.ed-eintrag::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  border:var(--ui-stroke) solid var(--dood-ink);
  border-radius:var(--dood-radius);filter:url(#chalkf-ui)
}
.ed-eintrag:hover{background:color-mix(in srgb,var(--text) 6%,transparent)}
.ed-eintrag.gewaehlt{
  background:color-mix(in srgb,var(--primary) 12%,transparent);
  --dood-ink:color-mix(in srgb,var(--primary) 60%,transparent);
  color:var(--text)
}
.ed-eintrag:focus-visible{outline:2px solid var(--primary);outline-offset:-1px}
/* Die Übungsfrage trägt einen roten Rahmen. Auch wenn sie ausgewählt ist:
   ausgewählt sagt schon die Fläche und die Nummer, anders ist die Frage
   trotzdem. */
.ed-eintrag.uebung{--dood-ink:color-mix(in srgb,var(--cta-text) 62%,transparent)}
.ed-eintrag.uebung:hover,
.ed-eintrag.gewaehlt.uebung{--dood-ink:var(--cta-text)}
/* Reservefrage: gestrichelte Kreide. Wie der rote Rahmen der Übungsfrage sagt
   das „diese ist anders“, ohne gelesen werden zu müssen. */
.ed-eintrag.reserve::after{border-style:dashed}

/* ── Umsortieren mit der Maus ── */
.ed-griff{
  flex:0 0 auto;width:1.1em;display:grid;place-items:center;
  color:var(--text-muted);cursor:grab;padding-top:.1em
}
.ed-griff svg{
  width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round
}
.ed-eintrag:hover .ed-griff{color:var(--text-sub)}
.ed-eintrag.zieht{opacity:.4;cursor:grabbing}
/* Die Einfügemarke ist ein Kreidestrich, nicht eine gerade Linie: dieselbe
   Handschrift wie alles andere. */
.ed-eintrag.ziel-oben::before,
.ed-eintrag.ziel-unten::before{
  content:'';position:absolute;left:.3em;right:.3em;height:7px;
  border-top:2.6px solid var(--cta-text);filter:url(#chalkf-ui);
  pointer-events:none;z-index:2
}
.ed-eintrag.ziel-oben::before{top:-2px}
.ed-eintrag.ziel-unten::before{bottom:-2px}
.ed-eintrag-nr{
  flex:0 0 1.5em;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--text-muted);text-align:right
}
.ed-eintrag.gewaehlt .ed-eintrag-nr{color:var(--primary)}
.ed-eintrag-text{
  flex:1;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical
}
.ed-eintrag-text i{color:var(--text-muted)}
/* Rechts steht nur die Warnung bei einer unfertigen Frage. Mit Titel, damit
   man sie überfahren und lesen kann, was fehlt. */
.ed-eintrag-zeichen{
  flex:0 0 auto;display:flex;gap:.3em;align-items:center;
  /* --text-sub: die Zeichen sitzen auf einer eigenen kleinen Fläche, und
     gedämpft kommen sie darauf bei .78rem nur auf 4.1:1. */
  font-size:.78rem;color:var(--text-sub);padding-top:.15em
}
.ed-eintrag-zeichen span{
  display:grid;place-items:center;width:1.35em;height:1.35em;
  border-radius:5px;background:color-mix(in srgb,var(--text) 9%,transparent);
  font-weight:700;line-height:1
}
.ed-warn{
  color:#fff!important;background:var(--cta)!important
}

/* ── Formular ── */
.ed-form{flex:1;min-width:0;padding:2em 2.2em 7em;max-width:54em}
.ed-nichts{color:var(--text-sub);padding:3.5em 0;max-width:26em}
.ed-zeile-kopf{
  display:flex;justify-content:space-between;align-items:center;
  gap:1em;flex-wrap:wrap;margin-bottom:1.6em
}
.ed-zeile-kopf h2{
  font-family:var(--font-heading);font-weight:700;font-size:1.3rem;color:var(--primary)
}
.ed-frage-akt{display:flex;gap:.35em;align-items:center}

.ed-feld{display:block;margin-bottom:1.5em}
.ed-feld > span,.ed-feld-titel{
  display:block;font-size:.92rem;font-weight:700;color:var(--text-sub);
  margin-bottom:.4em
}
.ed-feld-zusatz{font-weight:400;color:var(--text-muted)}
.ed-zwei{display:grid;grid-template-columns:1fr 1fr;gap:1.5em}
/* ── Schalter ──
   Das Kästchen ist selbst gezeichnet, nicht das des Systems: ein blaues
   Windows-Häkchen neben Kreide sieht wie ein Fremdkörper aus. Dieselbe Bauart
   wie die Optionsknöpfe am Beamer (.box). */
.ed-schalter{
  display:inline-flex;align-items:center;gap:.7em;cursor:pointer;
  min-height:var(--ctl-h);padding:.5em 1em;border-radius:var(--dood-radius);
  background:var(--ctl-flaeche);border:0;margin-bottom:1.5em;
  --dood-ink:color-mix(in srgb,var(--primary) 45%,transparent);
  transition:background .2s
}
.ed-schalter:hover{--dood-ink:var(--primary)}
.ed-schalter input{position:absolute;opacity:0;width:0;height:0}
.ed-haken{
  position:relative;flex:0 0 auto;width:1.4em;height:1.4em;
  display:grid;place-items:center;color:var(--primary)
}
.ed-haken::after{
  content:'';position:absolute;inset:0;
  border:var(--ui-stroke) solid currentColor;border-radius:5px;
  filter:url(#chalkf-ui)
}
.ed-haken svg{
  width:85%;height:85%;fill:none;stroke:currentColor;stroke-width:3.2;
  stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .16s
}
.ed-schalter-text{font-weight:400;color:var(--text-sub);font-size:.95rem}
.ed-schalter:has(input:checked){
  background:color-mix(in srgb,var(--cta) 8%,transparent);
  --dood-ink:var(--cta-text)
}
.ed-schalter:has(input:checked) .ed-haken{color:var(--cta-text)}
.ed-schalter:has(input:checked) .ed-haken svg{opacity:1}
.ed-schalter:has(input:checked) .ed-schalter-text{color:var(--text)}
.ed-schalter:has(input:focus-visible){outline:2px solid var(--primary);outline-offset:2px}

/* ── Bedenkzeit: eine Leiter von Knöpfen ── */
.zeit-wahl{display:flex;gap:.5em;flex-wrap:wrap}
.zeit-knopf{
  min-width:3.6em;height:var(--ctl-h);padding:0 .75em;
  display:inline-flex;align-items:center;justify-content:center;gap:.15em;
  background:transparent;border:0;border-radius:var(--dood-radius);cursor:pointer;
  font-family:var(--font-heading);font-weight:700;font-size:1.05rem;
  color:var(--text-sub);
  --dood-ink:color-mix(in srgb,var(--primary) 40%,transparent);
  transition:color .2s,background .2s
}
.zeit-knopf span{
  font-family:var(--font-ui);font-size:.78rem;font-weight:400;
  align-self:center;opacity:.85
}
.zeit-knopf:hover{color:var(--text);--dood-ink:var(--primary);
  background:color-mix(in srgb,var(--primary) 7%,transparent)}
.zeit-knopf.an{
  color:var(--cta-text);--dood-ink:var(--cta-text);
  background:color-mix(in srgb,var(--cta) 10%,transparent)
}

/* ── Antworten ── */
.ed-antworten{border:0;margin-bottom:1.7em;padding:0}
.ed-antworten legend{
  font-size:.92rem;font-weight:700;color:var(--text-sub);margin-bottom:.55em;padding:0
}
.ed-antwort{display:flex;gap:.6em;align-items:center;margin-bottom:.5em}
/* Die Hülle um das Antwortfeld muss die Zeile füllen, sonst schrumpft sie auf
   die Breite des Textes. */
.ed-antwort .feld-huelle{flex:1;min-width:0}
.ed-richtig{position:relative;cursor:pointer;flex:0 0 auto}
.ed-richtig input{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer;margin:0}
/* Der Buchstabe ist der Schalter. Damit das erkennbar ist, trägt er im
   ungesetzten Zustand einen leeren Ring und beim Überfahren einen grünen:
   ein reines Farbfeld ohne Zustand sieht wie Dekoration aus. */
.ed-marke{
  position:relative;display:grid;place-items:center;
  width:var(--ctl-h);height:var(--ctl-h);
  border-radius:var(--dood-radius);
  font-family:var(--font-heading);font-weight:700;font-size:1.05rem;
  background:var(--ctl-flaeche);color:var(--text-sub);border:0;
  --dood-ink:color-mix(in srgb,var(--primary) 45%,transparent);
  transition:background .15s,color .15s
}
.ed-marke::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  border:var(--ui-stroke) solid var(--dood-ink);
  border-radius:var(--dood-radius);filter:url(#chalkf-ui)
}
.ed-richtig input:checked + .ed-marke{
  background:var(--richtig);color:var(--richtig-text);--dood-ink:var(--richtig)
}
.ed-richtig input:focus-visible + .ed-marke{outline:2px solid var(--primary);outline-offset:2px}
.ed-richtig:hover .ed-marke{--dood-ink:var(--richtig)}
.ed-mini-hinweis{font-size:.88rem;color:var(--text-muted);margin-top:.7em;max-width:38em}

.ed-maengel{
  position:relative;
  font-size:.93rem;font-weight:700;margin-top:.6em;
  display:flex;align-items:flex-start;gap:.5em;
  padding:.8em 1em;border-radius:var(--dood-radius);
  color:var(--cta-text);background:color-mix(in srgb,var(--cta) 9%,transparent);
  --dood-ink:color-mix(in srgb,var(--cta-text) 55%,transparent)
}
.ed-maengel::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  border:var(--ui-stroke) solid var(--dood-ink);
  border-radius:var(--dood-radius);filter:url(#chalkf-ui)
}
.ed-maengel.gut{
  /* Das reine Grün kommt auf der grün getönten Fläche nur auf 4.42:1. Ein
     Schuss Textfarbe dazu bringt es auf 4.95:1 und bleibt grün. */
  color:color-mix(in srgb,var(--richtig) 85%,var(--text));
  background:color-mix(in srgb,var(--richtig) 9%,transparent);
  --dood-ink:color-mix(in srgb,var(--richtig) 55%,transparent)
}

/* ── Bildfelder ──
   Die Fläche trägt alles selbst: leer ist sie ein großer Knopf, gefüllt zeigt
   sie das Bild mit einem × in der Ecke. Zwei Knöpfe darunter waren ein Formular
   für etwas, das man eigentlich nur ansieht. */
.ed-bildfeld{margin-bottom:1.5em}
.ed-musikfeld{margin-bottom:1.5em}
.ed-musik-zeile{display:flex;gap:.7em;align-items:center;margin:.55em 0}
.ed-musik-name{color:var(--text-sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#musik-vorschau{width:100%;margin:.3em 0 .6em}
.ed-musik-ab{max-width:12em}
.ed-ausschnitt{display:flex;flex-wrap:wrap;gap:0 1.2em}
.ed-bild-vorschau{
  position:relative;height:11.5em;border-radius:var(--dood-radius);overflow:hidden;
  display:grid;place-items:center;background:var(--ctl-flaeche);
  --dood-ink:color-mix(in srgb,var(--primary) 45%,transparent);
  transition:background .15s
}
/* Mit Bild bleibt die Fläche ruhig: der Grund des Bildes soll die Aufmerksamkeit
   haben, nicht eine zweite Tönung darunter. */
.ed-bild-vorschau.hat-bild{background:var(--bg)}
.ed-bild-vorschau:hover{--dood-ink:var(--primary)}
/* Beim Ziehen einer Datei darüber: deutlich, aber ohne Sprung im Layout */
.ed-bild-vorschau.ziel{
  background:color-mix(in srgb,var(--primary) 14%,transparent);
  --dood-ink:var(--cta)
}
/* Das Bild füllt die Fläche bis auf einen Rand. Ohne den Rand liegt ein
   weißes Motiv direkt an der Kreidelinie und das Feld sieht aus wie zwei
   Kästen ineinander. */
.ed-bild-vorschau img{
  max-width:calc(100% - 1.6em);max-height:9.2em;object-fit:contain;grid-area:1/1;
  border-radius:6px
}

/* Der leere Zustand IST der Knopf, über die ganze Fläche. */
.ed-bild-leer{
  grid-area:1/1;width:100%;height:100%;
  display:grid;place-content:center;justify-items:center;gap:.15em;
  background:none;border:0;cursor:pointer;padding:1em;
  color:var(--text-sub);font-family:var(--font-ui);text-align:center
}
.ed-bild-leer svg{
  width:2.1em;height:2.1em;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;filter:url(#chalkf);
  margin-bottom:.25em
}
.ed-bild-leer-titel{font-weight:700;font-size:.96rem}
.ed-bild-leer-sub{font-size:.84rem;color:var(--text-sub)}
.ed-bild-vorschau:hover .ed-bild-leer{color:var(--primary)}
.ed-bild-leer:focus-visible{outline:2px solid var(--primary);outline-offset:-4px}

/* Ein gefülltes Bild lässt sich durch Klicken tauschen: unsichtbare Fläche
   darüber, damit das Bild selbst ohne Rahmen bleibt. */
.ed-bild-tauschen{
  position:absolute;inset:0;background:none;border:0;cursor:pointer;
  border-radius:var(--dood-radius)
}
.ed-bild-tauschen:focus-visible{outline:2px solid var(--primary);outline-offset:-4px}

/* Bildunterschrift unter dem Rahmen. Die Zeile bleibt auch leer stehen, damit
   das Layout beim Bildwechsel nicht springt. */
.ed-bild-name{
  margin-top:.45em;min-height:1.35em;font-size:.8rem;
  color:var(--text-sub);text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
/* Das × oben rechts, im Kreide-Look wie alles andere */
.ed-bild-weg{
  position:absolute;top:.4em;right:.4em;z-index:3;
  width:2.1em;height:2.1em;display:grid;place-items:center;
  background:var(--bg);border:0;border-radius:50%;cursor:pointer;
  color:var(--text-sub);--dood-ink:color-mix(in srgb,var(--text) 40%,transparent);
  transition:color .2s,background .2s
}
.ed-bild-weg::after{border-radius:50%}
.ed-bild-weg:hover{color:var(--cta-text);--dood-ink:var(--cta-text)}
.ed-bild-weg svg{
  width:1.05em;height:1.05em;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round
}

/* ── Bildauswahl im Overlay ── */
.ed-upload{
  display:flex;gap:1em;align-items:center;flex-wrap:wrap;margin-bottom:1.5em
}
.ed-upload label{cursor:pointer;margin:0}
.ed-upload-info{font-size:.9rem;color:var(--text-sub);flex:1 1 14em}
.ed-galerie{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5em,1fr));gap:.9em;
  max-height:52vh;overflow-y:auto;padding:.2em
}
.ed-gal{
  position:relative;background:var(--bg-mid);border-radius:var(--dood-radius);
  padding:.55em;cursor:pointer;text-align:center;border:0;
  --dood-ink:transparent;transition:transform .15s,background .15s
}
.ed-gal::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  border:var(--ui-stroke) solid var(--dood-ink);
  border-radius:var(--dood-radius);filter:url(#chalkf-ui)
}
.ed-gal:hover{--dood-ink:var(--primary);transform:translateY(-2px)}
.ed-gal.gewaehlt{
  --dood-ink:var(--cta-text);background:color-mix(in srgb,var(--cta) 8%,transparent)
}
.ed-gal img{width:100%;height:6.2em;object-fit:contain;display:block}
.ed-gal figcaption{
  font-size:.74rem;color:var(--text-sub);margin-top:.45em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.ed-gal figcaption span{color:var(--text-sub)}
.ed-gal-weg{
  position:absolute;top:.3em;right:.3em;width:1.9em;height:1.9em;z-index:2;
  display:grid;place-items:center;
  border:0;border-radius:50%;cursor:pointer;
  background:var(--bg);color:var(--text-sub);
  --dood-ink:color-mix(in srgb,var(--text) 35%,transparent)
}
.ed-gal-weg::after{border-radius:50%}
.ed-gal-weg:hover{color:var(--cta-text);--dood-ink:var(--cta-text)}
.ed-gal-weg svg{
  width:.95em;height:.95em;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round
}

/* ── Tabellen-Import ── */
.ed-csv-text{color:var(--text-sub);margin-bottom:1.1em;font-size:.96rem}
.ed-csv-text b{color:var(--text)}
.ed-csv-tabelle{border-collapse:collapse;font-size:.92rem;margin-bottom:1.3em;width:100%}
.ed-csv-tabelle td{
  padding:.3em .9em .3em 0;vertical-align:top;color:var(--text-sub);
  border-bottom:1px solid color-mix(in srgb,var(--text) 8%,transparent)
}
.ed-csv-tabelle tr:last-child td{border-bottom:0}
.ed-csv-tabelle td:first-child{white-space:nowrap;width:1%}
code{
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.88em;
  background:color-mix(in srgb,var(--text) 8%,transparent);
  padding:.12em .4em;border-radius:5px;color:var(--text)
}
.ed-csv-ergebnis{
  background:var(--bg-mid);border-radius:var(--dood-radius);padding:1.1em 1.3em;
  font-size:.95rem;color:var(--text-sub)
}
.ed-csv-ergebnis p{margin-bottom:.4em}
.csv-gut{color:var(--richtig);font-weight:700}
.csv-warn{color:var(--highlight);font-weight:700}
.csv-liste{margin:.4em 0 .4em 1.4em;font-weight:400;color:var(--text-sub)}

/* ══════════════════ MODERATOR ══════════════════
   Läuft als zweites Fenster am Laptop oder auf dem Handy der Moderation.
   Gestaltet für den Blick im Halbdunkel: die richtige Antwort und der Text zum
   Vorlesen müssen aus einem Meter und aus dem Augenwinkel zu erfassen sein. */
.mod-seite{
  max-width:46em;margin:0 auto;padding:0 1.2em 2.5em;
  min-height:100vh;display:flex;flex-direction:column
}
.mod-kopf{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:baseline;gap:.9em;
  padding:.8em 0 .7em;background:var(--bg)
}
.mod-marke{
  font-family:var(--font-heading);font-weight:700;font-size:1.05rem;
  color:var(--cta-text);white-space:nowrap
}
.mod-zaehler{flex:1;font-size:.95rem;color:var(--text-sub);font-weight:700}
.mod-uhr{
  font-family:var(--font-heading);font-weight:700;font-size:1.25rem;
  color:var(--text-sub);font-variant-numeric:tabular-nums;white-space:nowrap
}
.mod-uhr.knapp{color:var(--cta-text)}
.mod-inhalt{flex:1;padding-top:1.5em}

/* Überschriften, keine Kicker: normale Schreibweise, Arvo, klein. */
.mod-titel{
  font-family:var(--font-heading);font-weight:700;font-size:1rem;
  color:var(--primary);margin-bottom:.5em
}
.mod-q{
  font-family:var(--font-heading);font-weight:700;
  font-size:1.4rem;line-height:1.28;color:var(--text);margin-bottom:1.6em
}
.mod-antworten{list-style:none;display:grid;gap:.45em;margin-bottom:1.8em}
.mod-antwort{
  display:flex;align-items:center;gap:.75em;
  padding:.6em .75em;border-radius:var(--ctl-radius);
  /* --text-sub, nicht gedämpft: die falschen Antworten sollen zurücktreten,
     aber lesbar bleiben. Gedämpft kam der Text auf 4.3:1. Zurücktreten macht
     hier die grüne Füllung der richtigen Antwort, nicht ein blasser Text. */
  background:var(--bg-mid);color:var(--text-sub);font-size:1rem
}
.mod-antwort.richtig{
  background:var(--richtig);color:var(--richtig-text);font-weight:700
}
.mod-marke-a{
  flex:0 0 1.8em;height:1.8em;display:grid;place-items:center;
  border-radius:7px;font-family:var(--font-heading);font-weight:700;
  font-size:.88em;
  background:color-mix(in srgb,var(--text) 12%,transparent);color:var(--text)
}
.mod-antwort.richtig .mod-marke-a{
  /* Auf der grünen Kachel wird der Buchstabe umgedreht: Fläche in der
     Textfarbe, Text im Grün. Eine halbtransparente Aufhellung darauf ergab im
     Hellmodus weiß auf hellgrün mit 3.9:1. */
  background:var(--richtig-text);color:var(--richtig)
}
.mod-antwort-text{flex:1}
.mod-stimmen{
  /* Kein opacity: das war schon zweimal die Ursache für zu wenig Kontrast. */
  flex:0 0 auto;font-size:.82em;font-weight:700;
  font-variant-numeric:tabular-nums
}
/* Der Text zum Vorlesen ist der Zweck dieser Seite, also die einzige Karte
   mit Kreide-Rahmen: sie soll aus dem Rest herausfallen. */
.mod-erklaerung{
  background:var(--bg-card);border-radius:var(--dood-radius);
  padding:1.1em 1.2em;--dood-ink:var(--highlight)
}
.mod-e{font-size:1.1rem;line-height:1.55;color:var(--text)}
.mod-hinweis{
  margin-top:1.1em;font-size:.9rem;color:var(--text-muted);min-height:1.3em
}
.mod-hinweis.achtung{color:var(--highlight);font-weight:700}
.mod-warten{padding:3.5em 0;text-align:center}
.mod-phase{
  font-family:var(--font-heading);font-weight:700;font-size:1.6rem;
  color:var(--primary);margin-bottom:.55em
}
.mod-warten-text{color:var(--text-sub);max-width:26em;margin:0 auto}
.mod-fuss{
  display:flex;justify-content:space-between;gap:1em;align-items:baseline;
  padding-top:1.4em;font-size:.85rem;color:var(--text-muted)
}
.mod-verbindung{color:var(--cta-text);font-weight:700;opacity:0;transition:opacity .2s}
.mod-verbindung.zeig{opacity:1}

/* ── Das Moderator-Fenster in den Beamer-Einstellungen ── */
.mod-erkl-text{color:var(--text-sub);margin-bottom:1.5em;font-size:.96rem}
.mod-erkl-text b{color:var(--text)}
.mod-wege{display:grid;grid-template-columns:1fr 1fr;gap:1.8em;align-items:start}
.mod-weg{display:grid;gap:.8em;justify-items:start}
.mod-weg-kopf{
  font-family:var(--font-heading);font-weight:700;font-size:1.1rem;
  color:var(--primary)
}
.mod-weg-text{font-size:.92rem;color:var(--text-sub);line-height:1.5}
.mod-weg-text b{color:var(--text)}
.mod-weg .qr{width:min(13em,40vw)}
.mod-code{
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.78rem;
  color:var(--text-muted);word-break:break-all
}
/* Ein Schalter, der vom Normalfall abweicht, wird markiert: dass die Erklärung
   nicht mehr an der Wand steht, darf man nicht aus Versehen anlassen. */
.opt.hervor{--dood-ink:var(--highlight)}
.opt.hervor .opt-wert{color:var(--highlight)}

/* ══ Enge Fenster ══ */
@media (max-width:56em){
  .ed-spalten{flex-direction:column}
  .ed-liste-spalte{
    flex:0 0 auto;max-width:none;position:static;max-height:15em
  }
  .ed-form{padding:1.5em 1.3em 5em}
  .ed-zwei{grid-template-columns:1fr;gap:0}
  .mod-wege{grid-template-columns:1fr}
  .wk-karte{flex-direction:column;align-items:stretch}
  .wk-karte-akt{justify-content:flex-start}
}

/* ── Kurze Rückmeldung ──
   Für „gespeichert" und „gelöscht": erscheint unten, verschwindet von selbst.
   Ein Dialog dafür wäre eine Tür, die man wieder zumachen muss, nur um zu
   erfahren, dass etwas geklappt hat. */
.meldung{
  position:fixed;left:50%;bottom:1.6em;transform:translateX(-50%) translateY(.6em);
  z-index:900;pointer-events:none;
  background:var(--bg-card);color:var(--text);
  padding:.7em 1.2em;border-radius:var(--dood-radius);
  font-weight:700;font-size:.95rem;box-shadow:var(--sh);
  opacity:0;transition:opacity .2s,transform .2s
}
.meldung.zeig{opacity:1;transform:translateX(-50%) translateY(0)}
.meldung.fehler{--dood-ink:var(--cta);color:var(--cta-text)}

.wk-weg-text{color:var(--text-sub);margin-bottom:1.3em}
.wk-weg-text b{color:var(--text)}

/* ── Einstellungsfenster: gruppiert ──
   Sieben Knöpfe in einer Wolke zwingen zum Lesen jedes einzelnen. Drei
   Gruppen mit Überschrift beantworten die Frage, mit der man hier landet. */
/* Die Kopfzeile des Fensters bleibt zentriert, alles darunter steht links:
   eine Liste mit Gruppenüberschriften mittig zu setzen macht die Kanten
   unruhig und die Zuordnung schwerer. */
#ov-einstellungen .einst-hinweis{text-align:left;margin-left:0;margin-right:0}
.einst-gruppe{margin-bottom:1.6em}
.einst-gruppe:last-child{margin-bottom:0}
.einst-gruppe h3{
  font-family:var(--font-heading);font-weight:700;font-size:1rem;
  color:var(--primary);margin-bottom:.6em
}
.einst-reihe{display:flex;gap:.7em;flex-wrap:wrap}
.einst-erkl{
  /* --text-sub, nicht --text-muted: bei 0.88rem kommt gedämpft nur auf 4.0:1
     und fällt damit unter AA. Nebentext ist hier ohnehin die Erklärung, die
     man wirklich lesen soll. */
  font-size:.88rem;color:var(--text-sub);margin-top:.6em;max-width:34em
}

/* ── Bedenkzeit auf dem Startbild ──
   Die Leiter steht dort, wo die Frage aufkommt: gleich geht es los, wie lange
   bekommen die Tische? Am Beamer skaliert sie mit der Schrift wie alles andere,
   deshalb hier em statt der 44 Pixel der Werkstatt. */
.bereit-zeit{margin-top:1.8em;display:grid;gap:.7em;justify-items:center}
.bereit-zeit-titel{
  font-family:var(--font-ui);font-size:.95em;font-weight:700;color:var(--text-sub)
}
#bereit .zeit-wahl{justify-content:center}
#bereit .zeit-knopf{height:2.4em;min-width:3.2em;font-size:1.05em}
.zeit-ohne{min-width:0;padding:0 1em}
.einst-unterzeile{
  font-size:.9rem;font-weight:700;color:var(--text-sub);margin-bottom:.5em
}

/* ══════════════════════════════════════════
   Bewegung
   ──────────────────────────────────────────
   Gesammelt an einer Stelle, und nur für alle, die in den Systemeinstellungen
   nicht weniger Bewegung wünschen. Die Animationen hängen an Klassen, die
   genau einmal pro Ereignis dazukommen (.auftritt je Zug, .neu je Tisch,
   .frisch je Tipp): die Ansichten bauen bei jeder Nachricht vom Server neu,
   und eine Animation am Grundelement liefe sonst jedes Mal von vorn.
   ══════════════════════════════════════════ */
/* Musikfrage: kleiner Equalizer über der Frage, der sich bewegt, solange die
   Musik läuft */
.musik-marke{display:flex;align-items:flex-end;justify-content:center;gap:.18em;
  height:1.5em;margin:0 auto .45em;color:var(--primary);font-weight:700;font-size:1.5em}
.musik-marke[hidden]{display:none}
.musik-marke i{width:.3em;height:.45em;background:currentColor;border-radius:2px}
.musik-marke span{margin-left:.55em;align-self:center;font-family:var(--font-ui)}
.h-musik{color:var(--primary);font-weight:700;margin-top:.6em}
.mod-musik{color:var(--text-sub);margin:-1em 0 1.4em;font-size:.95rem}
.krone{display:block;width:2.2em;height:1.5em;margin:0 auto .1em;fill:none;
  stroke:var(--highlight);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

@media (prefers-reduced-motion:no-preference){
  /* Lobby: ein neuer Tisch hüpft herein und wackelt kurz */
  .tisch.neu{animation:tisch-hops .7s cubic-bezier(.2,.9,.3,1.4) both}
  @keyframes tisch-hops{
    0%{opacity:0;transform:translateY(14px) scale(.6) rotate(-6deg)}
    55%{opacity:1;transform:translateY(-6px) scale(1.08) rotate(3deg)}
    75%{transform:translateY(1px) scale(.97) rotate(-2deg)}
    100%{transform:none}
  }

  /* Neue Frage: der Text springt aus der Tiefe nach vorn */
  .stage.auftritt.nur-frage .frage{animation:frage-rein .6s cubic-bezier(.2,.9,.3,1.25) both}
  @keyframes frage-rein{
    from{opacity:0;transform:translateY(24px) scale(.88)}
    to{opacity:1;transform:none}
  }

  /* Antworten: nacheinander, mit einem kleinen Überschwinger */
  .stage.auftritt:not(.nur-frage):not(.offen) .antwort{
    animation:antwort-rein .5s cubic-bezier(.2,.9,.3,1.45) both
  }
  .stage.auftritt .antwort:nth-child(2){animation-delay:.08s}
  .stage.auftritt .antwort:nth-child(3){animation-delay:.16s}
  .stage.auftritt .antwort:nth-child(4){animation-delay:.24s}
  @keyframes antwort-rein{
    from{opacity:0;transform:translateX(-26px) scale(.9)}
    to{opacity:1;transform:none}
  }

  /* Auflösung: die richtige Antwort hüpft und leuchtet, die falschen sacken ab */
  .antwort.richtig{animation:richtig-hops .8s cubic-bezier(.2,.9,.3,1.5) both}
  @keyframes richtig-hops{
    0%{transform:scale(1)}
    30%{transform:scale(1.07) rotate(-1deg);
        box-shadow:0 0 0 .4em color-mix(in srgb,var(--richtig) 25%,transparent)}
    55%{transform:scale(.98) rotate(.6deg)}
    75%{transform:scale(1.03)}
    100%{transform:none;box-shadow:0 0 0 0 transparent}
  }
  .antwort.falsch{animation:falsch-sacken .5s ease-out both}
  @keyframes falsch-sacken{
    0%{transform:none}
    40%{transform:translateX(-5px) rotate(-.6deg)}
    70%{transform:translateX(3px)}
    100%{transform:scale(.985)}
  }
  .antwort.richtig .haken{transition:width .3s .35s,opacity .3s .35s}

  /* Eingang: jeder neue Tipp ploppt auf, die Zahl springt mit */
  .ekugel.frisch{animation:kugel-plopp .45s cubic-bezier(.2,.9,.3,1.8) both}
  @keyframes kugel-plopp{from{transform:scale(0)}60%{transform:scale(1.5)}to{transform:none}}
  .eingang-zahl.frisch{display:inline-block;animation:zahl-hopp .4s ease-out}
  @keyframes zahl-hopp{40%{transform:translateY(-.35em) scale(1.25)}}

  /* Die letzten Sekunden: die Zahl pocht */
  .timer.knapp .t-zahl{animation:pochen .5s ease-in-out infinite alternate}
  @keyframes pochen{to{transform:scale(1.22)}}

  /* Endstand: die Krone schaukelt über dem Sieger */
  .krone{animation:krone-schaukeln 1.6s ease-in-out 1.4s infinite alternate;
    transform-origin:50% 100%}
  @keyframes krone-schaukeln{
    from{transform:rotate(-8deg) translateY(0)}
    to{transform:rotate(8deg) translateY(-.15em)}
  }

  .musik-marke.spielt i{animation:equalizer .8s ease-in-out infinite alternate}
  .musik-marke.spielt i:nth-child(2){animation-delay:-.3s;animation-duration:.6s}
  .musik-marke.spielt i:nth-child(3){animation-delay:-.5s;animation-duration:.9s}
  .musik-marke.spielt i:nth-child(4){animation-delay:-.2s;animation-duration:.7s}
  @keyframes equalizer{from{height:.3em}to{height:1.4em}}

  /* Handy: der gewählte Knopf ploppt, das Ergebnis jubelt oder schüttelt */
  .h-taste.meine{animation:taste-plopp .35s cubic-bezier(.2,.9,.3,1.6)}
  @keyframes taste-plopp{40%{transform:scale(1.07)}}
  .h-echo.gut .h-echo-gross{animation:jubel .8s cubic-bezier(.2,.9,.3,1.6) both}
  @keyframes jubel{
    0%{opacity:0;transform:scale(.4) rotate(-10deg)}
    55%{opacity:1;transform:scale(1.2) rotate(4deg)}
    75%{transform:scale(.95) rotate(-2deg)}
    100%{transform:none}
  }
  .h-echo.schlecht .h-echo-gross{animation:kopfschuetteln .6s ease-in-out both}
  @keyframes kopfschuetteln{
    0%,100%{transform:none}
    20%{transform:translateX(-10px) rotate(-3deg)}
    40%{transform:translateX(9px) rotate(2deg)}
    60%{transform:translateX(-6px)}
    80%{transform:translateX(3px)}
  }
}

/* ══════════════════════════════════════════
   FOLIEN: Rundentitel und Pause
   ══════════════════════════════════════════ */
#folie{align-items:center;justify-content:center;text-align:center;padding:3vh 5vw;z-index:1;overflow:hidden}
.folie-inner{position:relative;z-index:2;max-width:min(54em,88vw)}
.folie-marke{
  font-family:var(--font-heading);font-weight:700;font-size:1.35rem;
  color:var(--highlight);letter-spacing:.02em
}
.folie-titel{
  font-size:clamp(2.6rem,7.2vw,5.6rem);line-height:1.08;margin-top:.2em;
  color:var(--primary);text-wrap:balance
}
.folie-unter{font-size:1.55rem;line-height:1.4;color:var(--text-sub);margin-top:.7em;text-wrap:balance}
.folie-uhr{
  font-family:var(--font-heading);font-weight:700;line-height:1;
  font-size:clamp(4.5rem,15vw,11rem);color:var(--primary);margin-top:.25em;
  font-variant-numeric:tabular-nums
}
.folie-uhr.vorbei{font-size:clamp(2.6rem,7vw,5rem);color:var(--highlight)}
#folie.pause .folie-titel{font-size:clamp(2rem,4.6vw,3.4rem)}
@media (prefers-reduced-motion:no-preference){
  .folie-inner.auftritt .folie-marke{animation:frage-rein .5s cubic-bezier(.2,.9,.3,1.25) both}
  .folie-inner.auftritt .folie-titel{animation:folie-rein .8s .12s cubic-bezier(.2,.9,.3,1.35) both}
  .folie-inner.auftritt .folie-unter,
  .folie-inner.auftritt .folie-uhr{animation:frage-rein .6s .45s cubic-bezier(.2,.9,.3,1.25) both}
  @keyframes folie-rein{
    0%{opacity:0;transform:scale(.6) rotate(-3deg)}
    60%{opacity:1;transform:scale(1.06) rotate(1deg)}
    100%{transform:none}
  }
}
/* Handy: Folie */
.h-folie-marke{font-family:var(--font-heading);font-weight:700;color:var(--highlight);font-size:1.05rem}
.h-folie-uhr{font-family:var(--font-heading);font-weight:700;font-size:2.4rem;color:var(--primary);
  margin-top:.4em;font-variant-numeric:tabular-nums}

/* ══════════════════════════════════════════
   FRAGETYPEN am Beamer
   ══════════════════════════════════════════ */
/* Richtig/Falsch: zwei große Kacheln nebeneinander, die Zeichen statt A und B */
.antworten.janein .antwort{justify-content:center;font-size:1.8em;padding:.9em 1em}
.antworten.janein .a-txt{flex:0 1 auto}
.antworten.janein .antwort:nth-child(1){--mk:var(--ak-pfadi)}
.antworten.janein .antwort:nth-child(2){--mk:var(--ak-rover)}
/* Sortieren: in der Auflösung steht dahinter der Buchstabe, den man hätte
   tippen müssen */
.a-war{
  display:inline-block;margin-left:.4em;padding:0 .45em;border-radius:99px;
  font-size:.72em;font-weight:700;vertical-align:.12em;
  background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--text-sub)
}
.antworten.sortieren .antwort.richtig .mark{background:var(--primary);color:var(--bg)}

/* Schätzen, offene Fragen: Aufgabe vorher, Lösung und Tipps danach */
.ergebnis{width:100%;max-width:52em;display:grid;gap:.9em;justify-items:center}
.aufgabe{
  position:relative;padding:.9em 1.6em;font-size:1.6em;font-family:var(--font-heading);
  font-weight:700;color:var(--primary);background:var(--bg);text-align:center
}
.loesung-gross{
  font-family:var(--font-heading);font-weight:700;font-size:3.2em;line-height:1.1;
  color:var(--richtig);text-align:center;text-wrap:balance
}
.loesung-gross span{font-size:.55em;color:var(--text-sub)}
.e-liste{list-style:none;width:100%;display:grid;gap:.4em;font-size:1.2em}
.e-liste li{
  display:flex;align-items:baseline;gap:.8em;padding:.45em .9em;border-radius:var(--dood-radius);
  background:var(--bg-mid)
}
.e-liste li.gut{background:color-mix(in srgb,var(--richtig) 14%,var(--bg))}
.e-liste li.halb{background:color-mix(in srgb,var(--highlight) 12%,var(--bg))}
.e-liste li.aussen{color:var(--text-sub)}
.e-name{font-weight:700;flex:0 0 auto;max-width:12em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.e-wert{flex:1;min-width:0;color:var(--text)}
.e-wert .ok{color:color-mix(in srgb,var(--richtig) 80%,var(--text));font-weight:700}
.e-wert .ok::after{content:" ✓"}
/* --text-sub, nicht gedämpft: auf --bg-mid kam --text-muted hell nur auf 4.3:1 */
.e-wert .nein{color:var(--text-sub);text-decoration:line-through;text-decoration-thickness:1px}
.e-ab{color:var(--text-sub);font-size:.85em;white-space:nowrap}
.e-punkte{font-family:var(--font-heading);font-weight:700;color:var(--text-sub);white-space:nowrap}
.e-punkte.plus{color:color-mix(in srgb,var(--richtig) 80%,var(--text))}
.e-punkte b,.rang-runde b{
  font-size:.7em;padding:.05em .45em;border-radius:99px;margin-left:.2em;
  background:var(--highlight);color:var(--bg);vertical-align:.15em
}
.e-rest{color:var(--text-muted);font-size:.95em}
.e-chips{list-style:none;display:flex;flex-wrap:wrap;gap:.45em;justify-content:center;font-size:1.25em}
.e-chips li{padding:.3em .8em;border-radius:99px;background:var(--bg-mid);color:var(--text-sub)}
.e-chips li.gut{background:color-mix(in srgb,var(--richtig) 18%,var(--bg));
  color:color-mix(in srgb,var(--richtig) 80%,var(--text));font-weight:700}
.stage.nur-frage .ergebnis{display:none}

/* Video an der Stelle des Bildes */
.bild video{width:100%;height:min(24em,50vh);object-fit:contain;display:block;border-radius:4px}
.stage.nur-frage .bild video{height:min(34em,62vh)}
.bild.video{cursor:default}
.bild.video::before{display:none}
/* Aufdecken: das vergrößerte Bild darf nicht aus dem Rahmen ragen */
.bild.deckt{overflow:hidden;cursor:default}
.bild.deckt::before{display:none}
.bild.deckt img{transition:none;will-change:filter,transform}

/* Punkte von Hand */
.hand-erkl{color:var(--text-sub);line-height:1.5;margin-bottom:1.2em}
.hand-liste{list-style:none;display:grid;gap:.5em}
.hand-zeile{
  position:relative;display:flex;align-items:center;gap:.5em;padding:.5em .8em;background:var(--bg)
}
.hand-name{flex:1;min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hand-runde{color:var(--text-sub);font-size:.9em;min-width:3.4em;text-align:right}
.hand-punkte{font-family:var(--font-heading);font-weight:700;color:var(--primary);min-width:3.2em;text-align:right;margin-right:.4em}
.hand-zeile .btn{min-width:3.4em;padding-inline:.6em}

/* ══════════════════════════════════════════
   FRAGETYPEN am Handy
   ══════════════════════════════════════════ */
.h-typ{font-family:var(--font-heading);font-weight:700;color:var(--highlight);margin-bottom:.4em}
.h-stech{margin:.6em 1em 0;text-align:center;color:var(--text-sub);font-size:.92rem;line-height:1.4}
/* Richtig/Falsch: zwei Knöpfe untereinander, Wörter statt Buchstaben */
.h-tasten.h-janein{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
.h-tasten.h-janein .h-taste{font-size:clamp(1.8rem,8vh,3.2rem)}
.h-tasten.h-janein .h-taste:nth-child(1){--mk:var(--ak-pfadi)}
.h-tasten.h-janein .h-taste:nth-child(2){--mk:var(--ak-rover)}
/* Eingaben: Zahl, Reihenfolge, Text */
.h-eingabe{
  flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.8em;padding:1em;overflow-y:auto
}
.h-eingabe .h-btn{width:100%;max-width:20rem}
.h-eingabe.zu .h-feld{color:var(--text-sub)}
.h-zahl{font-size:1.8rem;text-align:center;font-family:var(--font-heading);font-weight:700}
.h-einheit{color:var(--text-sub);margin-top:-.3em}
.h-text-felder{display:grid;gap:.6em;width:100%;justify-items:center}
.h-sort-hilfe{color:var(--text-sub);text-align:center;font-size:.95rem}
.h-sort-folge{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:.5em;width:100%;max-width:20rem;counter-reset:platz}
.h-sort-folge li{
  counter-increment:platz;position:relative;height:3.4rem;border-radius:var(--dood-radius);
  border:2px dashed color-mix(in srgb,var(--primary) 35%,transparent);display:grid;place-items:center;
  font-family:var(--font-heading);font-weight:700;font-size:1.6rem;color:var(--primary)
}
.h-sort-folge li::before{
  content:counter(platz) ".";position:absolute;top:.15em;left:.35em;
  font-size:.75rem;color:var(--text-muted)
}
.h-sort-folge li.voll{border-style:solid;border-color:var(--primary);background:var(--bg)}
.h-tasten.h-sort{flex:0 0 auto;grid-template-columns:repeat(4,1fr);grid-template-rows:1fr;width:100%;max-width:20rem;padding:0}
.h-tasten.h-sort .h-taste{height:4.2rem;font-size:2rem}
.h-taste.benutzt{opacity:.25;filter:grayscale(.8)}
/* Joker: auffällig, aber kein fünfter Antwortknopf */
.h-joker{
  margin:.5em auto;padding:.7em 1.1em;border-radius:99px;cursor:pointer;
  font:700 .95rem var(--font-ui);color:var(--highlight);background:transparent;
  border:2px dashed var(--highlight);max-width:calc(100% - 2em)
}
.h-joker[aria-pressed="true"]{border-style:solid;background:var(--highlight);color:var(--bg)}
.h-joker:disabled{cursor:default}
.h-echo.halb .h-echo-gross{color:var(--highlight)}

/* ── Moderator: Tipps der Tische und Urteile ── */
.mod-tipps{margin-bottom:1.8em}
.mod-tipp-liste{list-style:none;display:grid;gap:.4em}
.mod-tipp{
  display:flex;flex-wrap:wrap;align-items:center;gap:.4em .8em;padding:.55em .75em;
  border-radius:var(--ctl-radius);background:var(--bg-mid);font-size:.95rem
}
.mod-tipp.gut{background:color-mix(in srgb,var(--richtig) 14%,var(--bg))}
.mod-tipp-name{font-weight:700;color:var(--text)}
.mod-tipp-name b,.mod-tipp b{font-size:.75em;padding:.05em .45em;border-radius:99px;background:var(--highlight);color:var(--bg)}
.mod-tipp-inhalt{flex:1;min-width:10em;display:flex;flex-wrap:wrap;gap:.4em;color:var(--text)}
.mod-tipp-ab{color:var(--text-sub);font-size:.9em}
.mod-tipp-punkte{font-family:var(--font-heading);font-weight:700;color:var(--text-sub)}
.mod-urteil{
  display:inline-flex;align-items:center;gap:.25em;padding:.15em .2em .15em .6em;border-radius:99px;
  background:var(--bg);border:1.5px solid color-mix(in srgb,var(--text) 18%,transparent)
}
.mod-urteil.ok{border-color:var(--richtig)}
.mod-urteil.ok .mod-urteil-text{color:color-mix(in srgb,var(--richtig) 80%,var(--text));font-weight:700}
.mod-urteil-knopf{
  width:2.2em;height:2.2em;border-radius:50%;border:0;cursor:pointer;font-weight:700;font-size:.95em;
  background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--text-sub)
}
.mod-urteil-knopf.ja[aria-pressed="true"]{background:var(--richtig);color:var(--richtig-text)}
.mod-urteil-knopf.nein[aria-pressed="true"]{background:var(--cta);color:#fff}
.h-zahl::placeholder{font-size:1.15rem;font-weight:400;font-family:var(--font-ui)}

/* ══════════════════════════════════════════
   EDITOR: Fragetypen, Wertung, Auswertung
   ══════════════════════════════════════════ */
.ed-typen{display:flex;flex-wrap:wrap;gap:.4em;align-items:center;margin-bottom:.4em}
.ed-typen-trenner{width:1px;height:1.6em;background:color-mix(in srgb,var(--text) 18%,transparent);margin:0 .3em}
/* Gewählt: gefüllt wie ein gedrückter Knopf, damit es sich von den anderen
   Chips abhebt, ohne dass man den Rahmen vergleichen muss */
.chip.an,.chip[aria-pressed="true"]{
  color:var(--bg);background:var(--primary);--dood-ink:var(--primary)
}
.chip.an:hover,.chip[aria-pressed="true"]:hover{color:var(--bg);background:var(--primary)}
.ed-typ-erkl{margin:0 0 1.3em}
.ed-schmal{max-width:16em}
.ed-janein-wahl,.ed-chips{display:flex;flex-wrap:wrap;gap:.4em}
.ed-janein{margin-bottom:1.5em}
.ed-wertung{display:grid;gap:.8em;margin-bottom:1.3em}
.ed-wahlreihe{display:flex;flex-wrap:wrap;align-items:center;gap:.4em 1em}
.ed-wahlreihe .ed-feld-titel{margin:0;min-width:7.5em}
.ed-auswertung{
  font-size:.9rem;line-height:1.5;color:var(--text-sub);padding:.6em .9em;
  border-radius:var(--ctl-radius);background:var(--bg-mid);max-width:42em
}
.ed-platz{
  flex:0 0 2.2em;height:2.2em;display:grid;place-items:center;border-radius:50%;
  font-family:var(--font-heading);font-weight:700;color:var(--primary);
  background:color-mix(in srgb,var(--primary) 10%,transparent)
}
#video-vorschau{width:100%;max-width:28em;max-height:14em;margin:.4em 0;border-radius:6px}
/* Liste: Kürzel für den Typ, Folien ohne Nummer und kursiv */
.ed-eintrag-typ{
  display:inline-block;padding:0 .4em;margin-right:.1em;border-radius:5px;
  font-size:.78em;font-weight:700;color:var(--text-sub);
  background:color-mix(in srgb,var(--primary) 10%,transparent)
}
.ed-eintrag.folie .ed-eintrag-text{font-style:italic}
.ed-eintrag-quote{flex:0 0 auto;font-size:.8em;font-weight:700;color:var(--text-muted);padding-top:.15em}
/* Verteilung der Schwierigkeit unter der Liste */
.ed-verteilung{padding:.8em 1.15em .2em .95em}
.ed-verteilung:empty{display:none}
.ed-vt-titel{font-size:.82rem;font-weight:700;color:var(--text-sub);margin-bottom:.35em}
.ed-vt-balken{display:flex;height:.55em;border-radius:99px;overflow:hidden;gap:2px}
.ed-vt-leicht{background:var(--ak-pfadi)}
.ed-vt-mittel{background:var(--ak-woe)}
.ed-vt-schwer{background:var(--ak-rover)}
.ed-vt-ohne{background:color-mix(in srgb,var(--text) 15%,transparent)}
.ed-vt-text{font-size:.8rem;color:var(--text-sub);margin-top:.4em;line-height:1.45}

/* ══════════════════════════════════════════
   GIMMICKS: Serien, neue Spitze, Preise, Blitz
   ══════════════════════════════════════════ */
.serie{font-size:.78em;font-weight:700;color:var(--highlight);white-space:nowrap}
.rang-meldung{
  text-align:center;font-family:var(--font-heading);font-size:1.35rem;color:var(--highlight);
  margin:-.2em 0 .6em
}
.rang-meldung b{color:var(--primary)}
.blitz{color:var(--text-sub);font-size:1.05em}
.blitz b{color:var(--primary)}
.preise{display:flex;flex-wrap:wrap;gap:.8em;justify-content:center;margin-top:1.3em}
.preis{
  position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:.6em;align-items:center;
  padding:.6em 1em;background:var(--bg);min-width:13em;max-width:19em;text-align:left
}
.preis-zeichen{grid-row:span 3;font-size:1.9em;line-height:1}
.preis-titel{font-family:var(--font-heading);font-weight:700;color:var(--highlight);font-size:.9em}
.preis-name{font-weight:700;color:var(--primary);font-size:1.1em}
.preis-text{color:var(--text-sub);font-size:.85em;line-height:1.35}
/* Handy */
.h-bewegung{font-weight:700;margin:.2em 0 .6em}
.h-bewegung.rauf{color:var(--richtig)}
.h-bewegung.runter{color:var(--cta-text)}
.h-preise{display:grid;gap:.5em;width:100%;max-width:22rem;margin:.3em 0 .9em}
.h-preis{display:grid;padding:.6em .9em;border-radius:var(--dood-radius);background:color-mix(in srgb,var(--highlight) 14%,var(--bg))}
.h-preis b{color:var(--highlight);font-family:var(--font-heading)}
.h-preis span{color:var(--text-sub);font-size:.92rem}
@media (prefers-reduced-motion:no-preference){
  .rang-meldung:not([hidden]){animation:frage-rein .6s .9s cubic-bezier(.2,.9,.3,1.4) both}
  .preis{animation:preis-rein .55s cubic-bezier(.2,.9,.3,1.5) both}
  @keyframes preis-rein{from{opacity:0;transform:translateY(18px) rotate(-2deg) scale(.85)}to{opacity:1;transform:none}}
  .serie{display:inline-block;animation:flackern 1.4s ease-in-out infinite alternate}
  @keyframes flackern{from{transform:scale(1) rotate(-3deg)}to{transform:scale(1.12) rotate(3deg)}}
}

/* ══════════════════════════════════════════
   WERKSTATT: Karten, Anleitung
   ══════════════════════════════════════════ */
.wk-medien{display:inline-flex;gap:.7em}
.wk-medium{display:inline-flex;align-items:center;gap:.25em}
.wk-medium svg{width:1.05em;height:1.05em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wk-punkte{margin:.6em 0 0 1.2em;display:grid;gap:.45em;line-height:1.5;color:var(--text)}
.wk-check{list-style:none;margin-left:0}
.wk-check li{position:relative;padding-left:1.6em}
.wk-check li::before{content:"";position:absolute;left:0;top:.2em;width:1em;height:1em;
  border:2px solid var(--primary);border-radius:4px}
.wk-typen,.wk-tasten{display:grid;grid-template-columns:repeat(auto-fill,minmax(15em,1fr));gap:.5em 1.5em;margin-top:.7em}
.wk-tasten{grid-template-columns:repeat(auto-fill,minmax(11em,1fr))}
.wk-typen p,.wk-tasten p{color:var(--text-sub);line-height:1.45}
.wk-typen b{display:block;color:var(--primary)}

/* ══════════ VORSCHAU ══════════ */
.vs-kopf{gap:1em}
.vs-marke{color:var(--highlight);font-weight:700}
.vs-art{font-size:.95rem;color:var(--text-sub);padding:.15em .7em;border-radius:99px;
  background:color-mix(in srgb,var(--primary) 9%,transparent)}
.vs-luecke{flex:1}
.vorschau .stage{overflow:auto}
.vorschau .stage .erklaerung.hat{display:block}
.vorschau .stage:not(.offen) .erklaerung{display:none}
.vs-titel{font-size:3.6em}
.vs-maengel{color:var(--cta-text);font-weight:700;text-align:center;margin-top:.5em}
.vs-medien{display:flex;align-items:center;gap:1em;flex-wrap:wrap;justify-content:center;color:var(--text-sub)}
.vs-auch{color:var(--text-sub);text-align:center}
.vs-fuss{justify-content:flex-start;gap:.8em}
.vs-fuss .hilfe{margin-left:auto}
.bild video{max-width:100%}

/* ══════════ BEITRITT UND LOBBY ══════════ */
/* Lobby: von hinten lesbar, die Zahl davor sagt, ob alle da sind */
.tische{gap:.7em}
.tische-kopf{flex:0 0 100%;font-size:1.15rem;color:var(--text-sub);margin-bottom:.1em}
.tische-kopf b{font-family:var(--font-heading);font-size:1.5em;color:var(--primary);margin-right:.1em}
.tisch{font-size:1.45rem;padding:.55em 1.1em}
/* Handy: Name mit Würfel, Anleitung, wer dabei ist */
.h-name-zeile{display:flex;gap:.5em;width:100%;max-width:20rem;align-items:stretch}
.h-name-zeile .h-feld-huelle{flex:1;min-width:0}
.h-wuerfel{position:relative;flex:0 0 3.4em;border:0;background:var(--bg);font-size:1.4rem;cursor:pointer;
  border-radius:var(--dood-radius)}
.h-sogehts{list-style:none;display:grid;gap:.55em;text-align:left;max-width:22rem;margin:1.4em auto 0;
  padding:1em 1.1em;border-radius:var(--dood-radius);background:var(--bg-mid);font-size:.95rem;line-height:1.4}
.h-sogehts b{color:var(--primary)}
.h-dabei{margin-top:1.1em;color:var(--text-sub);font-size:.92rem;line-height:1.5;max-width:22rem}
.h-dabei b{color:var(--text)}
@media (prefers-reduced-motion:no-preference){
  .h-wuerfel.rollt{animation:wuerfeln .5s cubic-bezier(.2,.9,.3,1.3)}
  @keyframes wuerfeln{0%{transform:rotate(0)}60%{transform:rotate(380deg) scale(1.15)}100%{transform:rotate(360deg)}}
}

/* ══════════ HANDY IM SPIEL ══════════ */
.h-bilanz{color:var(--text-sub);font-weight:700;margin:.1em 0 .6em}
/* Antworttexte unter dem Buchstaben, wenn vorne eingeschaltet */
.h-tasten.mit-text .h-taste{font-size:clamp(1.8rem,7vh,3rem);align-content:center;gap:.25em;padding:.4em;
  display:grid;grid-template-rows:auto auto}
.h-taste-text{font-family:var(--font-ui);font-size:clamp(.85rem,2.2vh,1.05rem);font-weight:700;line-height:1.25;
  overflow-wrap:anywhere;hyphens:auto}
.h-sort-legende{list-style:none;display:grid;gap:.3em;width:100%;max-width:20rem;font-size:.95rem}
.h-sort-legende b{display:inline-block;width:1.6em;color:var(--primary)}
/* Letzte fünf Sekunden, noch nicht getippt: der Rand pulst rot */
body.handy.knapp .h-app{box-shadow:inset 0 0 0 .35rem var(--cta)}
@media (prefers-reduced-motion:no-preference){
  body.handy.knapp .h-app{animation:knapp-puls .5s ease-in-out infinite alternate}
  @keyframes knapp-puls{from{box-shadow:inset 0 0 0 .15rem var(--cta)}to{box-shadow:inset 0 0 0 .5rem var(--cta)}}
}

/* Mit Antworttexten wachsen die Knöpfe mit dem Text, und der Bildschirm
   scrollt, statt C und D unten abzuschneiden. Lange Texte kleiner. */
#s-frage{overflow-y:auto}
.h-tasten.mit-text{flex:1 0 auto;grid-template-rows:none;grid-auto-rows:minmax(6.5rem,1fr)}
.h-tasten.mit-text.lang .h-taste{font-size:1.6rem}
.h-tasten.mit-text.lang .h-taste-text{font-size:.8rem;font-weight:600}

/* Lange Tischnamen: auf dem Treppchen zweizeilig statt mit „…“ gekürzt,
   24 Zeichen passen so immer ganz. Am Handy bricht auch ein Name ohne
   Leerzeichen um, statt die Punkte aus der Zeile zu schieben. */
.stufe-name{white-space:normal;overflow-wrap:anywhere;text-align:center;line-height:1.15;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
.h-rang li > span:nth-child(2){min-width:0;overflow-wrap:anywhere}
.hilfe span{hyphens:manual}

/* ══════════ BUZZER UND HINWEISE ══════════ */
.buzz-dran{font-family:var(--font-heading);font-size:2.6em;color:var(--primary);text-align:center}
.buzz-dran b{color:var(--cta-text)}
.buzz-dran.gut b{color:var(--richtig)}
.buzz-liste{list-style:none;display:flex;flex-wrap:wrap;gap:.5em;justify-content:center;font-size:1.2em}
.buzz-liste li{display:flex;gap:.6em;align-items:baseline;padding:.35em .9em;border-radius:99px;background:var(--bg-mid)}
.buzz-liste li.gut{background:color-mix(in srgb,var(--richtig) 18%,var(--bg))}
.buzz-liste li.raus .e-name{text-decoration:line-through;color:var(--text-sub)}
.buzz-status{font-weight:700}
.hinweis-liste{list-style:none;display:grid;gap:.5em;width:100%;max-width:46em;font-size:1.35em}
.hinweis-liste li{display:flex;gap:.7em;align-items:baseline;padding:.5em .9em;border-radius:var(--dood-radius);background:var(--bg-mid)}
.hinweis-liste li.zu{color:var(--text-sub);font-family:var(--font-heading)}
.hinweis-liste .h-nr{font-family:var(--font-heading);font-weight:700;color:var(--highlight)}
.aufgabe-klein{color:var(--text-sub);font-size:1.05em}
@media (prefers-reduced-motion:no-preference){
  .hinweis-liste li.auf{animation:frage-rein .5s cubic-bezier(.2,.9,.3,1.3) both}
  .buzz-dran{animation:frage-rein .45s cubic-bezier(.2,.9,.3,1.5) both}
}
/* Handy */
.h-buzzer{
  width:min(70vw,17rem);aspect-ratio:1;border-radius:50%;border:0;cursor:pointer;
  background:var(--cta);color:#fff;font:700 clamp(2.2rem,11vw,3.4rem) var(--font-heading);
  box-shadow:0 .5rem 0 color-mix(in srgb,var(--cta) 60%,#000);transition:transform .08s,box-shadow .08s;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation
}
.h-buzzer:active:not(:disabled){transform:translateY(.4rem);box-shadow:0 .1rem 0 color-mix(in srgb,var(--cta) 60%,#000)}
.h-buzzer.gedrueckt{transform:translateY(.4rem);box-shadow:0 .1rem 0 color-mix(in srgb,var(--cta) 60%,#000)}
.h-buzzer.dran{background:var(--richtig);color:var(--richtig-text);box-shadow:0 .1rem 0 color-mix(in srgb,var(--richtig) 60%,#000)}
.h-buzzer:disabled:not(.gedrueckt){opacity:.4}
.h-buzz-status{font-weight:700;color:var(--text);text-align:center;font-size:1.1rem;min-height:2.6em}
.h-hinweise{list-style:none;display:grid;gap:.4em;margin:.8em 1em 0;font-size:.98rem;line-height:1.4}
.h-hinweise li{padding:.45em .7em;border-radius:8px;background:var(--bg-mid)}
.h-hinweise b{color:var(--highlight)}
.h-hinweise .noch{background:transparent;color:var(--text-sub);font-size:.88rem;padding:0 .7em}

.mod-buzz-knoepfe{list-style:none;display:flex;gap:.6em;align-items:center}
.mod-buzz-knoepfe .mod-urteil-knopf{width:3.2em;height:3.2em;font-size:1.2em}
.mod-zurueck{border:0;background:transparent;color:var(--text-sub);text-decoration:underline;cursor:pointer;font:inherit}
.ed-hinweise{display:grid;gap:0}

/* ══════════ JOKER JE RUNDE ══════════ */
.folie-joker{display:block;margin-top:.6em;font-size:.85em;color:var(--highlight)}
.folie-joker b{color:var(--primary)}
.h-jokerwahl{width:100%;max-width:22rem;margin:1em auto 0;display:grid;gap:.5em}
.h-joker-titel,.h-joker-fest{font-weight:700;color:var(--highlight);text-align:center}
.h-joker-fest b{color:var(--primary)}
.h-joker-runden{display:grid;gap:.4em}
.h-joker-runde{padding:.7em 1em;border-radius:var(--dood-radius);border:2px dashed var(--highlight);
  background:transparent;color:var(--text);font:700 1rem var(--font-ui);cursor:pointer;text-align:left}
.h-joker-runde[aria-pressed="true"]{border-style:solid;background:var(--highlight);color:var(--bg)}
.h-joker-runde:disabled{opacity:.45;cursor:default}

/* ══════════ ERGEBNIS ZUM MITNEHMEN ══════════ */
body.ergebnis-seite{background:var(--bg);color:var(--text);font-family:var(--font-ui)}
.eg-seite{max-width:52rem;margin:0 auto;padding:2.5rem 1.5rem 4rem}
.eg-kopf{text-align:center;margin-bottom:1.5rem}
.eg-marke{color:var(--highlight);font-weight:700}
.eg-kopf h1{font-size:2.4rem;color:var(--primary);margin:.15em 0}
.eg-sub{color:var(--text-sub)}
.eg-akt{display:flex;flex-wrap:wrap;gap:.6em;justify-content:center;align-items:center;margin-bottom:2rem}
.eg-probe{color:var(--text-sub);font-size:.92rem;display:flex;gap:.4em;align-items:center}
.eg-hinweis{text-align:center;color:var(--cta-text);font-weight:700;margin-bottom:1rem}
.eg-seite h2{font-size:1.3rem;color:var(--primary);margin:1.8rem 0 .7rem}
.eg-rang{list-style:none;display:grid;gap:.35rem}
.eg-rang li{display:grid;grid-template-columns:2.6em 1fr auto 4.5em;gap:.8em;align-items:baseline;
  padding:.55em .9em;border-radius:8px;background:var(--bg-mid)}
.eg-rang li.p1{background:color-mix(in srgb,var(--highlight) 18%,var(--bg))}
/* Die Leermeldung ist keine Zeile mit vier Spalten. Im Raster stand sie
   sonst in der schmalen Platzspalte, ein Wort pro Zeile. */
.eg-rang li.leer{display:block;color:var(--text-sub)}
.eg-platz{font-family:var(--font-heading);font-weight:700;color:var(--text-sub)}
.eg-name{font-weight:700;overflow-wrap:anywhere}
.eg-bilanz{color:var(--text-sub);font-size:.9rem}
.eg-punkte{font-family:var(--font-heading);font-weight:700;color:var(--primary);text-align:right}
.eg-preise{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.6rem}
.eg-preis{display:flex;gap:.7em;align-items:flex-start;padding:.6em .9em;border-radius:8px;background:var(--bg-mid);line-height:1.4}
.eg-preis-zeichen{font-size:1.5rem}
.eg-preis small{color:var(--text-sub)}
.eg-fragen{width:100%;border-collapse:collapse;font-size:.92rem}
.eg-fragen th{text-align:left;color:var(--text-sub);font-weight:700;padding:.4em .5em;border-bottom:2px solid var(--bg-subtle)}
.eg-fragen td{padding:.45em .5em;border-bottom:1px solid var(--bg-subtle);vertical-align:top;line-height:1.4}
.eg-fragen td:first-child{font-family:var(--font-heading);font-weight:700;color:var(--text-sub);white-space:nowrap}
.eg-fragen td:last-child{white-space:nowrap}
@media print{
  .eg-akt,.eg-hinweis{display:none}
  .eg-seite{padding:0;max-width:none}
  body.ergebnis-seite{background:#fff}
  .eg-rang li,.eg-preis{break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .eg-fragen tr{break-inside:avoid}
}

/* ══════════ FRAGEN-SAMMLUNG ══════════ */
.ed-sammlung{list-style:none;display:grid;gap:.35em;max-height:52vh;overflow-y:auto;margin-top:.6em}
.ed-sammlung-eintrag{display:flex;gap:.6em;align-items:flex-start;padding:.55em .7em;border-radius:8px;
  background:var(--bg-mid);cursor:pointer}
.ed-sammlung-eintrag.an{background:color-mix(in srgb,var(--primary) 13%,var(--bg))}
.ed-sammlung-eintrag input{margin-top:.25em}
.ed-sammlung-text{display:grid;gap:.15em;min-width:0}
.ed-sammlung-text b{color:var(--text);font-weight:700;line-height:1.35}
.ed-sammlung-text small{color:var(--text-sub);overflow-wrap:anywhere}
.ed-eintrag-typ{white-space:nowrap}