/* ══════════════════════════════════════════
   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:#5C7184;
  --primary:#003056; --secondary:#135E96; --cta:#A8112A; --cta-hover:#C41834;
  --highlight:#8F6400; --accent-cyan:#0087C4;
  --ak-jupfi:#2F53A7; --ak-pfadi:#007A38; --ak-woe:#B44800; --ak-rover:#C0182A;
  --richtig:#007A38;
  --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;
  --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}
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}

/* ── 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);
}

/* ══ Bildschirme ══ */
.screen{position:fixed;inset:0;display:none;flex-direction:column}
.screen.aktiv{display:flex}

/* ── 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:4vh 6vw;z-index:1}
.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{
  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;
}
.btn-fire{background:var(--cta);color:#fff}
.btn-fire:hover{background:var(--cta-hover);transform:translateY(-2px);
  box-shadow:0 8px 28px color-mix(in srgb,var(--cta) 35%,transparent)}
.btn-outline{background:transparent;color:var(--text)}
.btn-outline:hover{background:color-mix(in srgb,var(--text) 7%,transparent);transform:translateY(-2px)}
.btn:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.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)}
.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 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{
  display:none;margin:.75em auto 0;padding:.32em 1.05em;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
}
.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{
  /* Höhe in em, nicht in vh: so schrumpft das Bild mit, wenn der Autofit die
     Bühne verkleinert. Mit einer vh-Grenze bleibt es stehen und der Text muss
     die ganze Ersparnis allein aufbringen, was ihn unnötig klein macht. */
  max-height:min(21em,46vh);max-width:100%;width:auto;height:auto;
  object-fit:contain;display:block
}
/* Erklärbild: erscheint beim Auflösen an derselben Stelle, groß klickbar */
.bild.erklaerbild{cursor:zoom-in;--dood-ink:var(--highlight)}
.bild.erklaerbild::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:var(--highlight);color:#fff;
  font-family:var(--font-heading);font-weight:700;font-size:.8em
}

.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}
.antwort.falsch{opacity:.38}
.antwort.falsch .mark{background:var(--text-muted)}
.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)}
.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;padding:.95em 1.35em;
  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:'';display:inline-block;vertical-align:middle;
  width:1.5em;height:1.5em;margin:-.2em .55em 0 0;
  background:currentColor;color:var(--highlight);
  -webkit-mask:var(--gluehbirne) center/contain no-repeat;
          mask:var(--gluehbirne) center/contain no-repeat
}
.erklaerung b{color:var(--primary)}

/* ── 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)}
.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);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:4vh 6vw;z-index:1}
.ende-inner{position:relative;z-index:2}
.ende-zahl{
  font-family:var(--font-heading);font-weight:700;color:var(--cta);
  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
}
.ov.auf{display:flex}
.ov.auf > *:not(.ov-zu){margin:auto}
.ov-bild img{
  max-width:92vw;max-height:84vh;width:auto;height:auto;object-fit:contain;
  background:var(--bg);border-radius:var(--dood-radius);padding:1em
}
.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%}
.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);
  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;
  border-radius:99px;background:var(--richtig);color:#fff;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 ── */
#lobby{align-items:center;justify-content:center;padding:3vh 4vw;z-index:1}
.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);
  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);animation:rein .3s ease-out
}
@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)}
.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:3vh 4vw;z-index:1;align-items:center;justify-content:center}
.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-zeile.p1 .rang-platz{color:var(--highlight);font-size:1.3em}
.rang-zeile.p1 .rang-balken{background:color-mix(in srgb,var(--highlight) 15%,transparent)}
.rang-zeile.p2 .rang-platz,.rang-zeile.p3 .rang-platz{color:var(--secondary)}
.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;border-bottom:1px solid var(--card-border)
}
.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);
  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}
.h-mitte p{color:var(--text-sub);max-width:22em}
.h-feld{
  width:100%;max-width:19em;padding:.75em .9em;font-size:1.15rem;
  font-family:var(--font-ui);background:var(--bg);color:var(--text);
  border:0;border-radius:var(--dood-radius);text-align:center;
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--primary) 30%,transparent)
}
.h-feld:focus{outline:2px solid var(--primary);outline-offset:2px}
.h-fehler{color:var(--cta);font-weight:700;min-height:1.4em;font-size:.95rem}
.h-btn{
  width:100%;max-width:19em;padding:.85em 1.2em;border:0;cursor:pointer;
  background:var(--cta);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
}
.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{
  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;
  box-shadow:inset 0 0 0 .18em rgba(255,255,255,.9)}
.h-taste:disabled{cursor:default}

/* Rückmeldung nach dem Auflösen */
.h-echo{
  flex:0 0 auto;padding:1em 1.2em;text-align:center;
  border-top:1px solid var(--card-border)
}
.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)}
.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}
.h-rang .p{font-family:var(--font-heading);font-weight:700;color:var(--text-muted);
  text-align:right}
.h-rang .z{font-family:var(--font-heading);font-weight:700;color:var(--primary)}