/* ===== Kostenlose Werkzeuge · Gruppen einteilen (28.10.2026) – nur /tools/gruppen, nach tools.css einbinden =====
   Karten je Gruppe (feste Spaltenzahl über --gr-spalten, Handy eine bzw. zwei Spalten), Platzhalter vor dem Auslosen,
   Großansicht mit großen Namen, Druck schwarz-weiß. Farben nur aus den Variablen (hell/dunkel/Großansicht). */
.gr-buehne .wz-buehne-inhalt{justify-content:flex-start;align-items:stretch;text-align:left}
.gr-kopfzeile{text-align:center}
.gr-ergebnis{width:100%;min-width:0}
.gr-leer{margin:24px 0 6px;text-align:center;font-family:'Baloo 2',system-ui,sans-serif;font-weight:800;font-size:clamp(1.6rem,6vw,2.6rem);color:var(--text-leicht)}
.gr-karten{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(var(--gr-spalten,3),minmax(0,1fr))}
@media (max-width:719px){.gr-karten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:359px){.gr-karten{grid-template-columns:minmax(0,1fr)}}
/* Handy: Nummernkreis weglassen (steht schon im Titel), damit „Gruppe 12“ in eine Zeile passt */
@media (max-width:480px){.gr-karte .gr-nr{display:none}.gr-karte{padding:8px 10px 10px}}
.gr-karte{min-width:0;background:var(--wz-ton);border:1px solid var(--wz-ton-rand);border-radius:16px;padding:10px 12px 12px}
.gr-kopf{display:flex;align-items:center;gap:8px;margin:0 0 6px}
.gr-nr{display:grid;place-items:center;flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:#2F6A91;color:#fff;font-family:'Baloo 2',system-ui,sans-serif;font-weight:800;font-size:1rem}
.gr-buehne .gr-titel{flex:1 1 auto;min-width:0;margin:0;white-space:nowrap;font-family:'Baloo 2',system-ui,sans-serif;font-weight:700;font-size:1.08rem;line-height:1.2;color:var(--wz-ton-text)}
.gr-zahl{flex:0 0 auto;font-weight:700;font-size:.9rem;color:var(--text-leicht)}
.gr-namen{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.gr-namen li{font-family:'Baloo 2',system-ui,sans-serif;font-weight:600;font-size:1.12rem;line-height:1.3;color:var(--text);overflow-wrap:anywhere}
.gr-platzhalter .gr-karte{background:transparent;border:2px dashed var(--wz-ton-rand)}
.gr-platzhalter .gr-nr{background:var(--wz-ton);color:var(--wz-ton-text)}
.gr-plaetze{margin:0;color:var(--text-leicht);font-size:.95rem}
.gr-steuer{margin-top:6px}
.gr-steuer .wz-knopf-haupt{min-width:11em}
.gr-veraltet{margin:0}
.gr-buehne .wz-meldung,.gr-buehne .wz-tasten-hinweis{text-align:center}
@media (prefers-reduced-motion: no-preference){
  .gr-karte.gr-neu{animation:grRein .32s ease-out both;animation-delay:calc(var(--i,0) * 45ms)}
}
@keyframes grRein{0%{transform:translateY(6px) scale(.97);opacity:0}100%{transform:none;opacity:1}}

/* Einstellungen */
.gr-modus{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.gr-zahlen{display:grid;grid-template-columns:repeat(auto-fill,minmax(3.4rem,1fr));gap:8px;margin-top:10px}
.gr-zahlen .wz-knopf{padding-left:.4em;padding-right:.4em}
.gr-vorschau{margin:12px 0 0;font-weight:700;color:var(--wz-ton-text);line-height:1.45}
.gr-wuensche{margin-top:18px;padding-top:6px;border-top:1px solid var(--rand)}
.gr-wuensche summary{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;list-style:none;font-family:'Baloo 2',system-ui,sans-serif;font-weight:700;font-size:1.05rem;color:var(--text)}
.gr-wuensche summary::-webkit-details-marker{display:none}
.gr-wuensche summary::after{content:'';flex:0 0 auto;margin-left:auto;width:.55em;height:.55em;border-right:2px solid var(--wz-ton-text);border-bottom:2px solid var(--wz-ton-text);transform:rotate(45deg) translateY(-2px)}
.gr-wuensche[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.gr-regel-felder{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:6px}
@media (min-width:420px){.gr-regel-felder{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.gr-regel-felder select{width:100%}
.gr-regel-liste{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.gr-regel-liste li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 10px;border:1px solid var(--rand);border-radius:12px;padding:2px 4px 2px 12px;color:var(--text);overflow-wrap:anywhere}
.gr-wuensche .wz-meldung{margin-top:8px}

/* Großansicht (Beamer): Namen groß, Spaltenzahl wie berechnet. --gr-schrift setzt gruppen.js (einpassen), wenn sonst
   gescrollt werden müsste – Titel, Nummer und Abstände schrumpfen dann mit (Prüfung 29.10.). */
.wz-buehne.wz-gross .gr-karten{gap:min(clamp(10px,1.4vw,22px),calc(var(--gr-schrift,99rem) * .5))}
.wz-buehne.wz-gross .gr-karte{padding:min(clamp(10px,1.2vw,20px),calc(var(--gr-schrift,99rem) * .45))}
.wz-buehne.wz-gross .gr-titel{font-size:min(clamp(1.1rem,min(2vw,3.4vh),2rem),calc(var(--gr-schrift,99rem) * .8))}
.wz-buehne.wz-gross .gr-nr{width:min(clamp(30px,3vw,48px),calc(var(--gr-schrift,99rem) * 1.15));height:min(clamp(30px,3vw,48px),calc(var(--gr-schrift,99rem) * 1.15));font-size:min(clamp(1rem,1.6vw,1.5rem),calc(var(--gr-schrift,99rem) * .7))}
.wz-buehne.wz-gross .gr-namen li{font-size:var(--gr-schrift,clamp(1.1rem,min(2.6vw,4.4vh),2.6rem))}
.wz-buehne.wz-gross .gr-kopfzeile{font-size:clamp(1rem,1.8vw,1.6rem)}

/* Druck: schwarz-weiß, drei Spalten, Karten nicht trennen */
@media print{
  .gr-buehne .wz-nur-druck{font-family:'Baloo 2',system-ui,sans-serif;font-weight:800;font-size:18pt;margin:0 0 4pt;color:#000}
  .wz-kopf,.gr-steuer,.gr-veraltet,.gr-buehne .wz-meldung,.gr-platzhalter,.gr-leer{display:none!important}
  .gr-kopfzeile{color:#000!important;text-align:left;font-size:11pt;margin:0 0 8pt}
  .gr-karten{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8pt}
  .gr-karte{background:#fff!important;border:1.5pt solid #000!important;border-radius:8pt;break-inside:avoid;animation:none!important}
  .gr-nr{background:#fff!important;color:#000!important;border:1.5pt solid #000}
  .gr-buehne .gr-titel,.gr-namen li,.gr-zahl{color:#000!important}
  .gr-namen li{font-size:13pt}
}
.gr-regel-knoepfe{margin-top:8px}