/* verein.tlbx.cloud — EINE Designquelle aller statischen Seiten.
   Baut auf /tlbx-front.css (§58) auf; Blueprint-Eckmarken als Haus-Signatur. */
:root{--radius-gross:10px;
  --schatten:0 1px 2px rgba(29,31,32,.05),0 10px 28px -18px rgba(29,31,32,.18);
  --schatten-hoch:0 2px 4px rgba(29,31,32,.06),0 14px 34px -16px rgba(29,31,32,.22)}
body.seite{background:var(--color-bg);color:var(--color-text)}
.huelle{max-width:var(--breite,980px);margin:0 auto;padding:0 20px}

/* Kopf */
.kopf{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:blur(6px);border-bottom:1px solid var(--color-divider)}
.kopf .huelle{display:flex;align-items:center;gap:16px;min-height:58px}
.wortmarke{font-weight:800;font-size:20px;letter-spacing:-.01em;color:var(--color-text);text-decoration:none;white-space:nowrap}
.wortmarke span{color:var(--color-accent-600)}
/* Der CTA steht seit 30.08.2026 NEBEN dem <nav>, nicht darin: nur so kann er
   auf dem Handy oben neben der Wortmarke bleiben, waehrend die Menuepunkte in
   die zweite Zeile rutschen. Deshalb schiebt margin-left:auto am nav die
   rechte Gruppe nach rechts — die Ansicht am Rechner bleibt unveraendert. */
.kopf nav{display:flex;align-items:center;gap:16px;margin-left:auto}
.kopf nav a{font-size:14px;font-weight:600;text-decoration:none;color:var(--color-neutral-800);white-space:nowrap}
.kopf nav a:hover{color:var(--color-accent-700)}
.kopf nav a[aria-current="page"]{color:var(--color-accent-700)}
.kopf-cta{background:var(--color-accent-600);color:#fff !important;border-radius:8px;
  padding:8px 14px;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
.kopf-cta:hover{background:var(--color-accent-700)}

/* Handy: Wortmarke und CTA in Zeile 1, die drei Menuepunkte in Zeile 2.
   Vorher quetschten sich vier Punkte in eine Zeile und brachen MITTEN im Wort
   um ("Für / Ihre / Sparte" dreizeilig) — der Wortlaut bleibt unangetastet,
   nur die Anordnung aendert sich. */
@media (max-width:760px){
  .kopf .huelle{flex-wrap:wrap;row-gap:9px;column-gap:12px;
    padding-top:9px;padding-bottom:9px;min-height:0}
  .wortmarke{font-size:18px}
  .kopf nav{order:3;width:100%;margin-left:0;gap:16px;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .kopf nav::-webkit-scrollbar{display:none}
  .kopf nav a{font-size:13.5px}
  .kopf-cta{margin-left:auto;padding:7px 12px;font-size:13.5px}
}

/* Bänder + Held */
.band{background:linear-gradient(180deg,var(--color-accent-100) 0%,rgba(238,246,255,0) 92%);
  border-bottom:1px solid var(--color-divider);padding:34px 0 26px;margin-bottom:26px}
.band.flach{padding:18px 0 22px}
.brotkrumen{font-size:13px;color:var(--color-neutral-600);margin:0 0 10px}
.held{display:flex;gap:34px;align-items:flex-end}
.heldtext{flex:1;min-width:0;padding-bottom:6px}
.tier{flex:0 0 auto;max-width:250px;height:auto;filter:drop-shadow(0 10px 16px rgba(29,31,32,.14))}
/* Sparten-Maskottchen (Stefan, 2026-08-29): EIN Tier links, EIN Tier rechts —
   und zwar NEBEN der Spalte, nicht in ihr. Vorher standen fuenf Tiere mitten im
   Text; das war zu viel und machte die Seite eng.
   Die Buehne ist nur der Bezugspunkt und aendert am Fluss nichts. Die Tiere
   haengen absolut daneben, ausserhalb der 980px breiten Huelle: 50% minus halbe
   Huelle minus Tierbreite minus Luft.
   Unter 1360px ist neben der Spalte kein Platz — dann werden sie AUSGEBLENDET
   statt hineingequetscht. Sie sind Dekoration; wer sie nicht sieht, verliert
   nichts (alt="" und aria-hidden). */
.tier-buehne{position:relative}
.tier-flanke{position:absolute;top:96px;width:200px;height:200px;
  filter:drop-shadow(0 8px 14px rgba(29,31,32,.16));pointer-events:none}
.tier-flanke.links{left:calc(50% - 490px - 200px - 28px)}
.tier-flanke.rechts{right:calc(50% - 490px - 200px - 28px)}
.tier-flanke.gespiegelt{transform:scaleX(-1)}
@media (max-width:1360px){.tier-flanke{display:none}}
.augenbraue{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-accent-700);margin:6px 0 8px}
h1{font-size:32px;letter-spacing:-.02em;margin-top:2px}
.einleitung{font-size:16.5px;color:var(--color-neutral-800);max-width:62ch}
.vorab{font-size:13.5px;color:var(--color-neutral-600);border-top:1px dashed var(--color-divider);
  padding-top:12px;margin:8px 0 0;max-width:78ch}

/* Fakten-Pillen */
.fakten{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:16px 0 0}
.fakten li{background:#fff;border:1px solid var(--color-divider);border-radius:999px;
  padding:7px 16px;font-size:12.5px;color:var(--color-neutral-600);box-shadow:var(--schatten);
  display:flex;align-items:baseline;gap:7px}
.fakten b{color:var(--color-accent-700);font-size:17px}

/* Karten + Eckmarken */
.karte{position:relative;background:#fff;border:1px solid var(--color-divider);
  border-radius:var(--radius-gross);padding:22px 26px;margin:0 0 18px;box-shadow:var(--schatten)}
.ecke{position:absolute;width:11px;height:11px;border:2px solid var(--color-accent-200);opacity:.9}
.ecke.tl{top:7px;left:7px;border-right:0;border-bottom:0}
.ecke.tr{top:7px;right:7px;border-left:0;border-bottom:0}
.ecke.bl{bottom:7px;left:7px;border-right:0;border-top:0}
.ecke.br{bottom:7px;right:7px;border-left:0;border-top:0}
.abschnitt{margin:0 0 34px}
.abschnitt h2{margin-bottom:12px}
.breit{max-width:74ch;color:var(--color-neutral-800)}

/* Landing: Naht + Nutzen + geteilte Abschnitte */
.naht{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:16px 0 12px}
.naht-box{background:var(--color-neutral-100);border:1px solid var(--color-divider);
  border-radius:8px;padding:13px 16px;font-size:13.5px;color:var(--color-neutral-600)}
.naht-box b{display:block;color:var(--color-text);margin-bottom:3px;font-size:14px}
.naht-bruecke{position:relative;background:#fff;border:1.5px solid var(--color-accent-600);
  border-radius:var(--radius-gross);padding:16px 22px;font-size:15px;box-shadow:var(--schatten)}
.naht-bruecke b{color:var(--color-accent-700)}
.nutzen{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.nutzen .karte{margin:0}
.nutzen h3{font-size:16.5px;margin-bottom:8px}
.nutzen p{font-size:14.5px;color:var(--color-neutral-800);margin:0}
/* Der Störer (Stefan, 2026-08-27): drei Sporttiere + Turnier-Goodie. */
.stoerer{background:var(--color-accent-100);border-bottom:1px solid var(--color-accent-200)}
.stoerer-innen{display:flex;align-items:center;gap:14px;padding:10px 0}
.stoerer-tiere{display:flex;flex:0 0 auto}
.stoerer-tiere img{width:58px;height:58px;margin-right:-14px;filter:drop-shadow(0 4px 6px rgba(29,31,32,.15))}
.stoerer-tiere img:last-child{margin-right:0}
.stoerer p{margin:0;font-size:14px;line-height:1.45}
.stoerer a{font-weight:600}
@media (max-width:640px){.stoerer-tiere img{width:42px;height:42px}}

/* K-316: Kachel als Link (Funktionen-/Sparten-Übersicht) */
a.karten-link{display:block;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s}
a.karten-link:hover{border-color:var(--color-accent);box-shadow:0 6px 18px rgba(29,31,32,.10)}
a.karten-link h3{color:var(--color-accent)}
.geteilt{display:flex;gap:30px;align-items:center}
.geteilt-text{flex:1;min-width:0}
.schluss{text-align:center;padding:10px 0 26px}
.schluss h2{margin-bottom:14px}

/* Warteliste */
.warteliste{padding:28px 32px}
.wl-felder{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:14px 0}
.wl-felder label{font-size:12.5px;font-weight:700;color:var(--color-neutral-600)}
.wl-felder input,.wl-felder select{display:block;width:100%;margin-top:4px;font:inherit;
  font-size:15px;border:1px solid var(--color-divider);border-radius:8px;padding:9px 11px;background:#fff}
.wl-felder input:focus,.wl-felder select:focus{border-color:var(--color-accent);outline:none;
  box-shadow:0 0 0 3px var(--color-accent-200)}
.feldhilfe{display:block;font-weight:400;font-size:11.5px;margin-top:3px;color:var(--color-neutral-600)}
.hp{position:absolute !important;left:-9000px;top:-9000px}
.wl-danke h3{margin-bottom:6px}

/* Formulare der Werkzeuge */
.steuer{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0 4px}
.steuer label{font-size:12.5px;font-weight:700;color:var(--color-neutral-600)}
.steuer select,.steuer input{display:block;margin-top:4px;font:inherit;font-size:14px;
  border:1px solid var(--color-divider);border-radius:8px;padding:8px 10px;background:#fff;min-width:112px}
.namen{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin:10px 0 16px}
.namen label{font-size:12.5px;font-weight:700;color:var(--color-neutral-600);display:block}
.namen input{display:block;width:100%;margin-top:4px;font:inherit;font-size:14px;
  border:1px solid var(--color-divider);border-radius:8px;padding:8px 10px;background:#fff}
.namen input:focus,.steuer :focus{border-color:var(--color-accent);outline:none;
  box-shadow:0 0 0 3px var(--color-accent-200)}

/* Knöpfe */
.werkzeugleiste{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.schalter{font-size:14px;display:flex;gap:7px;align-items:center;margin-right:6px}
.knopf{display:inline-block;font:inherit;font-size:14px;font-weight:700;color:#fff;
  background:var(--color-accent-600);border:0;border-radius:8px;padding:10px 18px;
  cursor:pointer;text-decoration:none;box-shadow:var(--schatten);
  transition:transform .12s,box-shadow .12s,background .12s}
.knopf:hover{background:var(--color-accent-700);transform:translateY(-1px);box-shadow:var(--schatten-hoch)}
.knopf.gross{font-size:15.5px;padding:12px 24px}
.knopf.zweit{color:var(--color-accent-700);background:var(--color-accent-100);
  border:1px solid var(--color-accent-200)}
.knopf.zweit:hover{background:var(--color-accent-200)}
.rueckmeldung{font-size:13px;font-weight:700;color:var(--color-accent-700)}

/* Runden — jede Runde eine Mini-Karte */
.runden{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px;margin-top:6px}
.runde{background:var(--color-neutral-100);border:1px solid var(--color-divider);
  border-radius:8px;padding:12px 15px 8px}
.runde h3{font-size:12px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--color-accent-700);margin:0 0 7px;display:flex;align-items:center;gap:7px}
.runde h3::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--color-accent-600)}
.runde ul{list-style:none;padding:0;margin:0}
.runde li{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:7px 0;
  border-bottom:1px solid #fff;font-size:14.5px}
.runde li:last-child{border-bottom:0}
.runde .sp{font-weight:600}
.runde li b{font-weight:700;font-size:10.5px;color:var(--color-accent-700);
  background:var(--color-accent-100);border-radius:999px;padding:2px 8px;line-height:1.4}
.runde em{font-style:normal;font-size:11.5px;color:var(--color-neutral-600);
  background:#fff;border:1px dashed var(--color-divider);border-radius:999px;padding:2px 9px}
.runde .nr{font-size:11px;color:var(--color-neutral-600);min-width:52px}

/* Zeitrechner */
.zeitrechner{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end}
.zeitrechner label{font-size:12.5px;font-weight:700;color:var(--color-neutral-600)}
.zeitrechner input{display:block;width:112px;margin-top:4px;font:inherit;font-size:15px;
  border:1px solid var(--color-divider);border-radius:8px;padding:8px 10px}
.zr-ergebnis{font-size:16px;font-weight:700;margin:10px 0 0;flex-basis:100%}

.knopf.live{background:linear-gradient(150deg,#a83b4a,#7d2434);color:#fff;border:0}
.knopf.live:hover{background:linear-gradient(150deg,#96323f,#7d2434)}
.livekasten{border:1.5px solid #a83b4a}
.livekasten h2{color:#7d2434}
.livelink{margin:8px 0;font-size:14px;word-break:break-all}
.livelink .knopf{padding:4px 10px;font-size:12px;margin-left:6px}

/* Kleinkram */
.cta{position:relative;background:var(--color-accent-100);border:1px solid var(--color-accent-200);
  border-radius:var(--radius-gross);padding:15px 20px;margin:0 0 18px;font-size:14.5px}
.weiter{font-size:14px;color:var(--color-neutral-600);margin:24px 0 40px}
.liste{list-style:none;padding:0;margin:6px 0 0}
.liste li{padding:8px 0;border-bottom:1px dashed var(--color-divider)}
.liste li:last-child{border-bottom:0}
.liste a{font-weight:600;text-decoration:none}
.liste a:hover{text-decoration:underline}
.klein{font-size:12.5px;color:var(--color-neutral-600)}

/* Fuß */
.fuss{border-top:1px solid var(--color-divider);background:var(--color-surface);
  padding:28px 0 34px;font-size:13px;color:var(--color-neutral-600);margin-top:30px}
.fuss-spalten{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
.fuss b{color:var(--color-neutral-800)}
.fuss a{color:var(--color-neutral-600)}
.fuss-zeile{margin:18px 0 0;padding-top:14px;border-top:1px dashed var(--color-divider)}

@media (max-width:680px){
  .held,.geteilt{flex-direction:column;align-items:flex-start}
  .tier{max-width:160px;align-self:flex-end}
  .tier-links{order:2}
  h1{font-size:26px}
  .warteliste{padding:20px}
  .werkzeugleiste{flex-direction:column;align-items:stretch}
  .werkzeugleiste .knopf{width:100%;text-align:center}
  .schalter{margin:0 0 4px}
  .karte{padding:16px 16px}
}
/* Aushang-Felder (Bildschirm) */
.aushang{background:var(--color-accent-100);border:1px solid var(--color-accent-200);
  border-radius:10px;padding:12px 14px;margin:4px 0 14px}
.aushang-kopf{display:block;font-size:12.5px;font-weight:700;color:var(--color-accent-800);
  margin-bottom:8px}
.aushang-felder{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.aushang-felder label{font-size:12.5px;font-weight:700;color:var(--color-neutral-600)}
.aushang-felder input{display:block;width:100%;margin-top:4px;font:inherit;font-size:14px;
  border:1px solid var(--color-accent-200);border-radius:8px;padding:8px 10px;background:#fff}
.aushang-felder input:focus{border-color:var(--color-accent);outline:none;
  box-shadow:0 0 0 3px var(--color-accent-200)}

/* ── Profi-Druck: nur das Aushang-Dokument #druckdok kommt aufs Papier ──── */
#druckdok{display:none}
@media print{
  @page{size:A4;margin:12mm}
  body.seite header,body.seite main,body.seite footer{display:none !important}
  body{background:#fff}
  #druckdok{display:block;color:#141414;font-size:10pt;line-height:1.45}
  .dk-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:8mm;
    border-bottom:2.5pt solid var(--color-accent-800);padding-bottom:8pt;margin-bottom:12pt}
  .dk-kopf h1{font-size:21pt;letter-spacing:-.02em;margin:0}
  .dk-unter{color:#444;font-size:10pt;margin:3pt 0 0}
  .dk-marke{text-align:right;font-weight:800;font-size:13pt;white-space:nowrap}
  .dk-marke span{color:var(--color-accent-600)}
  .dk-marke small{display:block;font-weight:400;font-size:7.5pt;color:#666}
  .dk-runden{columns:2;column-gap:8mm}
  .dk-runde{break-inside:avoid;margin-bottom:9pt}
  .dk-runde h3{font-size:10.5pt;text-transform:uppercase;letter-spacing:.07em;
    color:var(--color-accent-800);border-bottom:1.2pt solid var(--color-accent-800);
    padding-bottom:2pt;margin:0 0 3pt;display:flex;justify-content:space-between;align-items:baseline}
  .dk-runde h3 small{font-weight:400;text-transform:none;letter-spacing:0;font-size:8pt;color:#555}
  .dk-runde table{width:100%;border-collapse:collapse;font-size:9.5pt}
  .dk-runde td{padding:3.2pt 2pt;border-bottom:.5pt solid #ccc;vertical-align:middle}
  .dk-z{width:11mm;font-weight:700;font-variant-numeric:tabular-nums}
  .dk-f{width:15mm;color:#555;font-size:8.5pt}
  .dk-p .dk-vs{margin:0 5pt;color:#888}
  .dk-e{width:17mm;text-align:right;white-space:nowrap;color:#444}
  .dk-e span{display:inline-block;width:6.5mm;border-bottom:.9pt solid #555;height:9pt}
  .dk-chip{display:inline-flex;width:11pt;height:11pt;border-radius:50%;
    background:var(--pf,var(--color-accent-600));color:#fff;font-size:6.5pt;font-weight:800;
    align-items:center;justify-content:center;vertical-align:-2pt;margin-right:2.5pt;
    print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .dk-chip[data-s="1"]{--pf:var(--sp1)}.dk-chip[data-s="2"]{--pf:var(--sp2)}
  .dk-chip[data-s="3"]{--pf:var(--sp3)}.dk-chip[data-s="4"]{--pf:var(--sp4)}
  .dk-chip[data-s="5"]{--pf:var(--sp5)}.dk-chip[data-s="6"]{--pf:var(--sp6)}
  .dk-chip[data-s="7"]{--pf:var(--sp7)}.dk-chip[data-s="8"]{--pf:var(--sp8)}
  .dk-block{break-inside:avoid;margin-top:12pt}
  .dk-block h2{font-size:12.5pt;margin:0 0 5pt}
  .dk-matrix{border-collapse:collapse;width:100%;font-size:9pt}
  .dk-matrix th,.dk-matrix td{border:.75pt solid #666;height:8mm;min-width:7.5mm;
    padding:1pt 3pt;text-align:center}
  .dk-matrix th{background:#f1f4f6;print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .dk-links{text-align:left !important;white-space:nowrap}
  .dk-x{background:#555 !important;print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .dk-sum{width:11mm}
  .dk-bracket{position:relative;margin-top:2mm}
  .dk-btitel{position:absolute;top:0;font-size:8pt;font-weight:800;text-transform:uppercase;
    letter-spacing:.07em;color:var(--color-accent-800)}
  .dk-match{position:absolute;border:1pt solid #444;border-radius:2.5pt;padding:0 4pt;
    display:flex;flex-direction:column;justify-content:space-around;font-size:8.5pt;
    background:#fff}
  .dk-match div{border-bottom:.6pt solid #bbb;display:flex;align-items:center;gap:2pt;height:50%}
  .dk-match div:last-child{border-bottom:none}
  .dk-match i{color:#999;font-size:7.5pt}
  .dk-lh{position:absolute;border-top:1pt solid #444}
  .dk-lv{position:absolute;border-left:1pt solid #444}
  .dk-sieger{position:absolute;font-size:8pt;font-weight:800;text-transform:uppercase;
    letter-spacing:.07em;color:var(--color-accent-800)}
  .dk-tipp{font-size:8pt;color:#555;margin:2pt 0 0}
  .dk-label{font-size:8pt;font-weight:700;color:#2c455d}
  .dk-umbruch{break-before:page}
  .dk-runde .dk-matrix{margin-top:4pt}
  .dk-runde .dk-matrix th,.dk-runde .dk-matrix td{height:6.5mm;min-width:6.5mm;font-size:8pt}
  .dk-fuss{margin-top:12pt;font-size:7.5pt;color:#666;border-top:.6pt solid #bbb;
    padding-top:4pt;word-break:break-all}
  .dk-fuss b{color:#333}
  .dk-e.dk-fix{font-weight:800;font-size:10.5pt;color:#141414}
  .dk-tor{margin-left:auto;font-weight:800;padding-left:4pt}
}

/* ── Ausbaustufe 7: Ergebnisse + Tabellen + Protokoll-Ansicht ──────────── */
.erg{margin-left:auto;display:inline-flex;align-items:center;gap:4px;flex:0 0 auto}
.erg input{width:38px;text-align:center;font:inherit;font-size:14px;font-weight:700;
  border:1px solid var(--color-divider);border-radius:7px;padding:5px 2px;background:#fff}
.erg input:focus{border-color:var(--color-accent);outline:none;
  box-shadow:0 0 0 3px var(--color-accent-200)}
.erg i{font-style:normal;color:var(--color-neutral-600);font-weight:700}
.ligatabelle{border-collapse:collapse;width:100%;font-size:13.5px;margin-top:4px}
.ligatabelle th{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--color-neutral-600);padding:4px 6px;text-align:center}
.ligatabelle td{padding:6px;text-align:center;border-top:1px solid var(--color-neutral-100)}
.ligatabelle .tl{text-align:left}
.ligatabelle .platz{font-weight:800;color:var(--color-accent-700)}
.ligatabelle .pkt{font-weight:800}
.tab-karte{border-top-color:var(--color-accent-600)}
.gr-tabelle{margin-top:10px;border-top:1px dashed var(--color-divider);padding-top:6px}
.siegerkarte{border-top-color:var(--color-accent-600);background:var(--color-accent-100)}
.siegerzeile{font-size:17px;font-weight:800;margin:4px 0}
.frei{color:var(--color-neutral-600);font-style:normal}

/* Protokoll-Ansicht (Vorbild: Live-Spielprotokoll) */
body.protokoll .band,body.protokoll .cta,body.protokoll .weiter{display:none}
body.protokoll main>.huelle>section.karte:not(#protokollkarte){display:none}
#protokollkarte{max-width:660px;margin:26px auto}
.pk-kopf{margin-bottom:16px}
.pk-kopf h2{font-size:23px;margin:2px 0 4px}
.pk-spiel{position:relative;background:#fff;border:1px solid var(--color-divider);
  border-radius:10px;padding:12px 16px;margin:0 0 10px;box-shadow:var(--schatten)}
.pk-spiel.klickbar{cursor:pointer}
.pk-spiel.klickbar:hover{border-color:var(--color-accent-200)}
.pk-meta{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;color:var(--color-neutral-600);margin-bottom:3px}
.pk-zeile{display:flex;align-items:center;gap:12px}
.pk-paar{flex:1;min-width:0;font-weight:700;font-size:15.5px;display:flex;
  align-items:center;gap:6px;flex-wrap:wrap}
.pk-paar .sp{font-weight:700}
.pk-erg{font-size:20px;font-weight:800;color:var(--color-accent-700);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.pk-erg.offen{color:var(--color-neutral-600);font-weight:600}
.pk-eingabe{display:none;margin-top:10px;padding-top:10px;
  border-top:1px dashed var(--color-divider);align-items:center;gap:12px}
.pk-spiel.auf .pk-eingabe{display:flex}
.pk-eingabe .erg{margin-left:0}
.pk-tabelle .runde,.pk-tabelle .gr-tabelle{margin:0 0 12px;border-top:3px solid var(--color-accent-200);
  background:var(--color-neutral-100);border-radius:8px;padding:12px 15px}
.pk-hinweis{max-width:60ch}
@media print{#protokollkarte{display:none}}


/* ── Ausbaustufe 4 (2026-08-26): Werkzeuge farbiger und moderner ──────────
   Spieler-Chipfarben rechnerisch geprüft (dataviz-Validator, alle Prüfungen
   bestanden; Nachbarschaften CVD-sicher, Identität trägt IMMER Initiale+Name,
   nie die Farbe allein). Spieler 9–16 wiederholen die acht Töne — die
   Initiale unterscheidet. */
:root{--sp1:#cc6b2c;--sp2:#3d6fb0;--sp3:#3e8f52;--sp4:#8a4fb5;
  --sp5:#c74f6e;--sp6:#12999b;--sp7:#a67c00;--sp8:#5b5fb5}
.sp[data-s="1"],.punkt[data-s="1"],.sp[data-s="9"],.punkt[data-s="9"]{--pf:var(--sp1)}
.sp[data-s="2"],.punkt[data-s="2"],.sp[data-s="10"],.punkt[data-s="10"]{--pf:var(--sp2)}
.sp[data-s="3"],.punkt[data-s="3"],.sp[data-s="11"],.punkt[data-s="11"]{--pf:var(--sp3)}
.sp[data-s="4"],.punkt[data-s="4"],.sp[data-s="12"],.punkt[data-s="12"]{--pf:var(--sp4)}
.sp[data-s="5"],.punkt[data-s="5"],.sp[data-s="13"],.punkt[data-s="13"]{--pf:var(--sp5)}
.sp[data-s="6"],.punkt[data-s="6"],.sp[data-s="14"],.punkt[data-s="14"]{--pf:var(--sp6)}
.sp[data-s="7"],.punkt[data-s="7"],.sp[data-s="15"],.punkt[data-s="15"]{--pf:var(--sp7)}
.sp[data-s="8"],.punkt[data-s="8"],.sp[data-s="16"],.punkt[data-s="16"]{--pf:var(--sp8)}

/* Initial-Chips im Plan */
.sp{display:inline-flex;align-items:center;gap:6px;min-width:0}
.sp[data-ini]::before{content:attr(data-ini);flex:0 0 auto;width:22px;height:22px;
  border-radius:50%;background:var(--pf,var(--color-accent-600));color:#fff;
  font-size:10.5px;font-weight:800;display:inline-flex;align-items:center;
  justify-content:center;letter-spacing:0;box-shadow:inset 0 -2px 0 rgba(0,0,0,.14)}

/* Farb-Punkte an den Eingabefeldern */
.punkt{display:inline-block;width:9px;height:9px;border-radius:50%;
  background:var(--pf,var(--color-accent-600));margin-right:6px;vertical-align:0}

/* Überschriften-Icons */
.karte h2{display:flex;align-items:center;gap:9px}
.karte h2 svg{width:20px;height:20px;flex:0 0 auto;color:var(--color-accent-600)}

/* Turnierform als Auswahlkarten */
.segment{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:12px;margin:12px 0 16px}
.segment label{cursor:pointer;position:relative}
.segment input{position:absolute;inset:0;opacity:0;pointer-events:none}
.segment span{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;
  column-gap:12px;align-items:center;background:var(--color-neutral-100);
  border:1.5px solid var(--color-divider);border-radius:10px;padding:13px 16px;
  transition:border-color .12s,background .12s,box-shadow .12s}
.segment svg{grid-row:1/3;width:30px;height:30px;color:var(--color-neutral-600)}
.segment b{font-size:15px}
.segment small{font-size:12px;color:var(--color-neutral-600)}
.segment input:checked+span{background:var(--color-accent-100);
  border-color:var(--color-accent-600);box-shadow:var(--schatten)}
.segment input:checked+span svg{color:var(--color-accent-700)}
.segment input:focus-visible+span{outline:2px solid var(--color-accent);outline-offset:2px}
/* Auswahlkarten ohne Symbol (Rueckmeldung) — dieselbe Bedienung, eine Spalte. */
.segment.ohne-icon span{grid-template-columns:1fr}

/* Rueckmeldeformular */
.rm-feld{display:block;margin:16px 0}
.rm-feld > b{display:block;font-size:15px;margin-bottom:2px}
.rm-feld textarea,.rm-feld input[type=text],.rm-feld input[type=url]{
  display:block;width:100%;margin-top:6px;font:inherit;font-size:15px;
  border:1px solid var(--color-divider);border-radius:8px;padding:10px 12px;
  background:#fff;box-sizing:border-box}
.rm-feld textarea{min-height:88px;resize:vertical}
.rm-feld textarea:focus,.rm-feld input:focus{border-color:var(--color-accent);outline:none;
  box-shadow:0 0 0 3px var(--color-accent-200)}
.rm-plan{background:var(--color-accent-100);border:1px solid var(--color-accent-200);
  border-radius:10px;padding:14px 16px;margin:18px 0}
.rm-plan input{font-size:13px !important;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.rm-anonym{background:var(--color-neutral-100);border:1px solid var(--color-divider);
  border-radius:10px;padding:14px 16px;margin:18px 0}

.runde h4{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--color-neutral-600);margin:9px 0 2px}
.runde .gr-mitglieder{font-size:12.5px;color:var(--color-neutral-600);margin:0 0 4px}

/* Kräftigere Knöpfe */
.knopf{background:linear-gradient(150deg,var(--color-accent-600),var(--color-accent-800))}
.knopf:hover{background:linear-gradient(150deg,var(--color-accent-700),var(--color-accent-800))}
.knopf.zweit{background:var(--color-accent-100)}
.knopf.zweit:hover{background:var(--color-accent-200)}

/* Runden-Karten: weiß, Akzentkante, lebendige Zeilen */
.runde{background:#fff;border-top:3px solid var(--color-accent-200);
  box-shadow:var(--schatten)}
.runde li{border-bottom:1px solid var(--color-neutral-100);border-radius:6px;
  padding:7px 6px;margin:0 -6px;column-gap:8px}
.runde li:hover{background:var(--color-accent-100)}
.runde li b{background:var(--color-accent-600);color:#fff}
.runde em{background:#fdf6e3;border:1px solid #e8d49a;color:#8a6a1a}

/* Steuer-Zeile als Panel, Ergebnis als Pille */
.steuer{background:var(--color-neutral-100);border:1px solid var(--color-divider);
  border-radius:10px;padding:12px 14px;margin:6px 0 6px}
.zr-ergebnis{display:inline-block;background:var(--color-accent-100);
  border:1px solid var(--color-accent-200);border-radius:999px;
  padding:8px 18px;font-size:15px}
.zr-ergebnis:empty{display:none}

/* Bebilderte Anleitung (/anleitung/): Wort links, Handy-Bild rechts. */
.anl-schritt{display:grid;grid-template-columns:1fr 290px;gap:26px;align-items:start;
  background:#fff;border:1px solid var(--color-divider);border-radius:12px;
  padding:22px 24px;margin-bottom:16px}
.anl-schritt h2{margin:6px 0 8px;font-size:20px}
.anl-schritt p{margin:0}
.anl-nr{display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;background:var(--color-accent-600);
  color:#fff;font-weight:700;font-size:15px}
.anl-bild{margin:0}
.anl-bild img{display:block;width:100%;height:auto;border:1px solid var(--color-divider);
  border-radius:14px;background:#fff}
.anl-schluss{background:var(--color-accent-100);border:1px solid var(--color-accent-200);
  border-radius:12px;padding:22px 24px;margin-top:24px}
.anl-schluss h2{margin:0 0 10px;font-size:20px}
.anl-schluss ul{margin:10px 0 0;padding-left:20px}
.anl-schluss li{margin-bottom:6px}
.anl-muster{margin:22px 0}
.anl-musterbild{display:block;width:100%;height:auto;margin-top:12px;
  border:1px solid var(--color-divider);border-radius:8px;background:#fff}
@media(max-width:760px){.anl-schritt{grid-template-columns:1fr}
  .anl-bild{max-width:290px;margin:0 auto}}