/* ============================================================
   1 · Gestaltungsvariablen
============================================================ */
:root{
  /* Anzeigetafel: dunkler Grund, Ball-Gelb leuchtet */
  --tinte:#06080B;
  --tafel:#000000;
  --blau:#0F5FD6;
  --blau-hell:#5B9BFF;
  --gruen:#12B76A;
  --gruen-tief:#04140C;
  --gruen-hell:#0E2A1D;
  --ball:#D7FF1E;
  --orange:#FF8A3D;
  --pink:#FF5C8A;
  --hoch:#3DDC97;
  --runter:#FF7A6B;

  --grund:#0B0F14;
  --kachel:#11161C;
  --kachel-2:#161C22;
  --text:#F3F5F7;
  --text-2:#9AA4AE;
  --linie:#1F2730;
  --rand:#2A333D;
  --fehler:#FF7A6B;
  --fehler-bg:#2A1210;

  --sys:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --anzeige:"Big Shoulders",var(--sys);
  --ziffer:"Doto",ui-monospace,monospace;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --r:16px;
  --r-klein:10px;
  --feld:#0A0E12;
  --tafel-rand:#1C232B;
  --text-weich:#C9D1D8;
  --leucht:#D7FF1E;
  --aktiv:#1A2410;
  --hover:#1E262E;
  --rand-leise:#3A444F;
  --ich-bg:#2A0E18;
  --blau-bg:#14233A;
  --blau-text:#9CC2FF;
  --fehler-rand:#5A2620;
  --fehler-text:#FFD5CE;
  --hinweis-bg:#1A1608;
  --hinweis-chip:#3A2E05;
  --hinweis-text:#FFD84D;
  --gruen-rand:#1B4A33;
  --orange-text:#FF8A3D;
  --kopf:#06080B;
  --leiste-bg:rgba(6,8,11,.96);
  color-scheme:dark;
}

/* Helle Darstellung: nur wenn in den Einstellungen gewählt (Standard ist dunkel). js/thema.js setzt data-thema. */
html[data-thema="hell"]{
  --grund:#EEF1EC;--kachel:#FFFFFF;--kachel-2:#F3F5F2;--tafel:#FFFFFF;--tafel-rand:#D5DCD6;--feld:#FFFFFF;
  --text:#0B0F14;--text-2:#56636B;--text-weich:#33404A;--linie:#E1E6E2;--rand:#C3CCC5;--rand-leise:#AEB8B1;
  --leucht:#4A6300;--aktiv:#EFFAC8;--hover:#E7ECE6;--ich-bg:#FFE3EC;--blau-bg:#E3EEFC;--blau-text:#0B3C80;
  --gruen-hell:#DEF7ED;--hoch:#0B8A55;--runter:#C4361F;--fehler:#C4361F;--fehler-bg:#FBEBE7;--fehler-rand:#F0C2B8;--fehler-text:#7E2314;
  --hinweis-bg:#FFFBEA;--hinweis-chip:#FFF0B3;--hinweis-text:#6B5200;--gruen-rand:#A9E2C8;--orange-text:#B34E00;
  --kopf:#FFFFFF;--leiste-bg:rgba(255,255,255,.96);
  color-scheme:light;
}

/* Schriften liegen lokal (SIL Open Font License, siehe assets/fonts) */
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url(assets/fonts/inter-400.woff2) format("woff2");}
@font-face{font-family:"Inter";font-weight:500;font-display:swap;src:url(assets/fonts/inter-500.woff2) format("woff2");}
@font-face{font-family:"Inter";font-weight:600;font-display:swap;src:url(assets/fonts/inter-600.woff2) format("woff2");}
@font-face{font-family:"Inter";font-weight:700;font-display:swap;src:url(assets/fonts/inter-700.woff2) format("woff2");}
@font-face{font-family:"Inter";font-weight:800;font-display:swap;src:url(assets/fonts/inter-800.woff2) format("woff2");}
@font-face{font-family:"Big Shoulders";font-weight:800;font-display:swap;src:url(assets/fonts/big-shoulders-800.woff2) format("woff2");}
@font-face{font-family:"Big Shoulders";font-weight:900;font-display:swap;src:url(assets/fonts/big-shoulders-900.woff2) format("woff2");}
@font-face{font-family:"Doto";font-weight:900;font-display:swap;src:url(assets/fonts/doto-900.woff2) format("woff2");}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
button,input,select,textarea,summary,label{touch-action:manipulation;}

body{
  margin:0;
  background:var(--grund);
  color:var(--text);
  font-family:var(--sys);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(62px + env(safe-area-inset-bottom));
}

/* ============================================================
   2 · Kopfleiste
============================================================ */
.sprunglink{
  position:absolute;left:-9999px;top:0;z-index:70;
  background:var(--blau);color:#fff;padding:10px 16px;border-radius:0 0 10px 0;font-weight:600;
}
.sprunglink:focus{left:0;}

.leiste{
  position:sticky;top:0;z-index:40;
  background:var(--tinte);color:#fff;
  display:flex;align-items:center;gap:12px;
  padding:0 16px;height:52px;
}
.logo{display:flex;align-items:center;gap:9px;}
.wortmarke{font-size:17px;font-weight:500;letter-spacing:-.02em;}
.wortmarke b{font-weight:800;}
.kopf-knopf{
  margin-left:auto;width:38px;height:38px;border:0;border-radius:10px;
  background:rgba(255,255,255,.1);color:#fff;display:flex;align-items:center;justify-content:center;
}
.kopf-knopf:hover{background:rgba(255,255,255,.2);}

.warnbalken{
  position:sticky;top:52px;z-index:35;background:var(--fehler-bg);
  border-bottom:1px solid #E9C3BA;color:#7E2314;font-size:13px;line-height:1.4;padding:10px 14px;
}
.warnbalken[hidden]{display:none;}

/* Sprachumschalter DE/EN/FR */
html.sprache-laedt body{visibility:hidden;}
.sprach-knopf{
  flex:none;display:flex;align-items:center;gap:2px;height:30px;padding:3px;border:0;border-radius:999px;
  background:rgba(255,255,255,.1);font:800 11.5px/1 var(--sys);letter-spacing:.04em;
}
.sprach-knopf button{display:grid;place-items:center;height:24px;min-width:26px;padding:0 4px;border:0;border-radius:999px;background:none;font:inherit;letter-spacing:inherit;cursor:pointer;color:rgba(255,255,255,.62);}
html[lang="de"] .sprach-knopf [data-l="de"],html[lang="en"] .sprach-knopf [data-l="en"],html[lang="fr"] .sprach-knopf [data-l="fr"]{background:var(--ball,#D7FF1E);color:#06080B;}
.sprach-knopf:hover button{color:#fff;}
html[lang="de"] .sprach-knopf:hover [data-l="de"],html[lang="en"] .sprach-knopf:hover [data-l="en"],html[lang="fr"] .sprach-knopf:hover [data-l="fr"]{color:#06080B;}

/* ============================================================
   3 · Tab-Leiste unten
============================================================ */
.tabbar{
  position:fixed;bottom:0;left:0;right:0;z-index:40;
  background:rgba(16,22,28,.94);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar ul{list-style:none;margin:0 auto;padding:5px 0 3px;max-width:560px;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;}
.tabknopf{
  width:100%;border:0;background:none;font:inherit;cursor:pointer;color:rgba(255,255,255,.55);
  display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 0 4px;font-size:10px;
}
.tabknopf[aria-selected="true"]{color:#fff;}
.tabknopf .punkt{width:5px;height:5px;border-radius:50%;background:transparent;margin-top:1px;}
.tabknopf[aria-selected="true"] .punkt{background:var(--blau-hell);}

/* ============================================================
   4 · Layout: Ansichten, Raster, Kacheln
============================================================ */
.ansicht{display:none;}
.ansicht:focus{outline:none;}
.ansicht.aktiv{display:block;animation:rein .25s ease;}
@keyframes rein{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

.bahn{max-width:560px;margin:0 auto;padding:12px 12px 24px;}
.raster{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.unter[hidden]{display:none;}
.kachel{background:var(--kachel);border-radius:var(--r);padding:16px;overflow:hidden;display:flex;flex-direction:column;}
.b2{grid-column:span 2;}

.marke{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.7;margin:0 0 10px;}
.kachel h2{font-size:20px;font-weight:800;letter-spacing:-.02em;margin:0 0 8px;line-height:1.15;}
.kachel p{margin:0 0 12px;font-size:14.5px;line-height:1.5;}
.kachel p:last-child{margin-bottom:0;}
.kachel .zeile{margin:0 0 14px;}
.kachel .zeile:last-child{margin-bottom:0;}
.kachel .zeile b{display:block;font-size:14.5px;font-weight:750;margin-bottom:2px;letter-spacing:-.01em;}
.leise{color:var(--text-2);}
.abschnitt{grid-column:1/-1;display:flex;align-items:baseline;gap:10px;margin:12px 0 -2px;flex-wrap:wrap;}
.abschnitt h3{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin:0;}

/* Rechtliche Links */
.fusszeile{grid-column:1/-1;text-align:center;font-size:12.5px;color:var(--text-2);margin:8px 0 0;}
.fusszeile a,.rechtliches a{color:inherit;}

/* ============================================================
   5 · Startseite
============================================================ */
.dash-hero{background:var(--tinte);color:#fff;}
.dash-hero h2{font-size:26px;margin:0 0 4px;}
.dash-hero p{color:rgba(255,255,255,.75);margin:0 0 8px;font-size:14px;}
.dash-hero p:last-of-type{margin-bottom:0;}
.dash-hero .knopfzeile{margin-top:14px;}
.dash-link{border:0;font:inherit;text-align:left;color:inherit;cursor:pointer;}
.dash-link svg{color:var(--blau);margin-bottom:8px;}
.dash-link h2{font-size:16px;margin:0 0 4px;}
.dash-link p{font-size:12.5px;margin:0;line-height:1.4;}
.dash-link:hover{background:#F6F9F7;}

/* ============================================================
   6 · Regelteil
============================================================ */
.court-kachel{padding:12px;}
.court-kachel svg{display:block;width:100%;height:auto;}
.schlag svg{display:block;width:100%;height:auto;margin:4px 0 10px;}
.schlag h2{font-size:17px;margin-bottom:4px;}
.schlag p{font-size:13.5px;line-height:1.45;}
.urteil{
  display:inline-block;align-self:flex-start;font-size:10.5px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:999px;margin:0 0 8px;
}
.urteil.ok{background:var(--gruen-hell);color:var(--gruen-tief);}
.urteil.nein{background:var(--fehler-bg);color:var(--fehler);}
.urteil.neutral{background:#EAF3FC;color:#0B3C80;}
.wertchips{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 12px;}
.wertchips span{background:var(--grund);border-radius:9px;padding:7px 10px;font-weight:800;font-size:14px;letter-spacing:-.01em;}
.wertchips span.stark{background:var(--tinte);color:#fff;}
.wertchips span.gruen-chip{background:var(--gruen);color:#fff;}
.check{list-style:none;margin:0;padding:0;}
.check li{display:flex;gap:11px;align-items:flex-start;padding:11px 0;font-size:14px;cursor:pointer;border-bottom:1px solid var(--linie);}
.check li:last-child{border-bottom:0;}
.check li::before{content:"";flex:0 0 auto;width:20px;height:20px;border-radius:6px;border:2px solid #C2CBC5;margin-top:1px;transition:background .2s,border-color .2s;}
.check li.fertig::before{background:var(--gruen);border-color:var(--gruen);}
.check li.fertig{color:var(--text-2);}
.klapp{display:block;}
.klapp>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;list-style:none;}
.klapp>summary::-webkit-details-marker{display:none;}
.klapp>summary .marke{margin:0;}
.klapp .pfeil{color:var(--text-2);flex:0 0 auto;transition:transform .2s ease;}
.klapp[open] .pfeil{transform:rotate(90deg);}
.klapp .check{margin-top:12px;}
#ball{
  offset-path:path("M 105 245 Q 262 152 420 112 T 540 92 Q 470 120 435 138 Q 280 55 150 232");
  animation:flug 7.5s cubic-bezier(.5,.05,.6,.95) infinite;
}
@keyframes flug{0%{offset-distance:0%;opacity:0;}6%{opacity:1;}92%{offset-distance:100%;opacity:1;}100%{offset-distance:100%;opacity:0;}}

/* ============================================================
   7 · Formulare, Knöpfe, Meldungen
============================================================ */
label{display:block;font-size:11px;font-weight:600;color:var(--text-2);margin-bottom:3px;letter-spacing:.02em;}
input[type=date],input[type=time],input[type=text],input[type=number],input[type=email],input[type=url],input[type=search],select{
  width:100%;padding:8px 10px;border:1px solid #CBD4CE;border-radius:var(--r-klein);
  background:#fff;color:inherit;font-family:inherit;font-size:16px;
}
input[type=number]{text-align:center;-moz-appearance:textfield;}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
input:focus-visible,select:focus-visible,button:focus-visible{outline:3px solid var(--blau-hell);outline-offset:2px;}

.knopf{padding:9px 14px;border:0;border-radius:var(--r-klein);background:var(--blau);color:#fff;font:inherit;font-weight:600;font-size:14px;cursor:pointer;}
.knopf:hover{background:#0C55AB;}
.knopf.gruen{background:var(--gruen);}
.knopf.gruen:hover{background:#0A7E54;}
.knopf.sekundaer{background:#fff;color:var(--tinte);border:1px solid #CBD4CE;}
.knopf.sekundaer:hover{background:var(--grund);}
.knopf.mini{padding:5px 9px;font-size:12.5px;font-weight:500;}
.knopf[disabled]{opacity:.35;cursor:default;}
.knopfzeile{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.icon-zeile{display:flex;gap:8px;margin-top:12px;}
.icon-knopf{
  width:48px;height:44px;flex:0 0 auto;border:1px solid #CBD4CE;background:#fff;color:var(--tinte);
  border-radius:var(--r-klein);cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.icon-knopf svg{width:21px;height:21px;}
.icon-knopf:hover{background:var(--grund);}
.icon-knopf.gruen{background:var(--gruen);border-color:var(--gruen);color:#fff;flex:1 1 auto;}
.icon-knopf.gruen:hover{background:#0A7E54;}
.icon-knopf.gefahr{color:var(--fehler);border-color:#E9C3BA;background:var(--fehler-bg);}
.icon-knopf.gefahr:hover{background:#F5D9D2;}
.formzeile{display:grid;gap:8px;align-items:end;}

.segment{display:flex;gap:3px;background:var(--grund);border-radius:11px;padding:3px;}
.segment button{flex:1;border:0;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--text-2);padding:7px 4px;border-radius:8px;cursor:pointer;white-space:nowrap;}
.segment button[aria-pressed="true"]{background:#fff;color:var(--tinte);box-shadow:0 1px 2px rgba(16,22,28,.12);}

.stepper{display:flex;align-items:center;gap:6px;}
.stepper button{width:34px;height:34px;flex:0 0 auto;border:1px solid #CBD4CE;background:#fff;border-radius:9px;font-size:19px;line-height:1;cursor:pointer;color:var(--tinte);}

.teilnehmer{display:flex;flex-wrap:wrap;gap:6px;}
.tn-feld{display:inline-flex;align-items:center;gap:6px;border:1px solid #CBD4CE;border-radius:999px;padding:6px 12px;cursor:pointer;font-size:13.5px;background:#fff;}
.tn-feld input{position:absolute;opacity:0;width:0;height:0;}
.tn-feld::before{content:"+";font-weight:700;color:var(--text-2);font-size:13px;}
.tn-feld.gewaehlt{border-color:var(--gruen);background:var(--gruen-hell);color:var(--gruen-tief);font-weight:600;}
.tn-feld.gewaehlt::before{content:"\2713";color:var(--gruen);}
.zaehler{font-family:var(--mono);font-size:11.5px;color:var(--text-2);margin:8px 0 0;}
.zaehler.voll{color:var(--gruen);font-weight:600;}

.status{font-size:12.5px;min-height:18px;margin-top:8px;color:var(--gruen);font-weight:600;}
.status.fehler{color:var(--fehler);}
.hinweis-klein{font-size:11.5px;color:var(--text-2);margin:7px 0 0;line-height:1.35;}
.leer{padding:18px;text-align:center;color:var(--text-2);border:1px dashed #C2CBC5;border-radius:12px;font-size:13px;}

.toast{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(72px + env(safe-area-inset-bottom));z-index:55;
  background:var(--tinte);color:#fff;border-radius:12px;padding:11px 16px;
  display:flex;align-items:center;gap:16px;max-width:min(480px,92vw);
  font-size:14px;box-shadow:0 6px 20px rgba(16,22,28,.35);
}
.toast[hidden]{display:none;}
.toast-knopf{border:0;background:none;color:var(--blau-hell);font:inherit;font-weight:750;cursor:pointer;padding:0;white-space:nowrap;}

.overlay{position:fixed;inset:0;z-index:60;background:rgba(16,22,28,.55);display:flex;align-items:center;justify-content:center;padding:16px;}
.overlay[hidden]{display:none;}
.overlay-box{background:var(--kachel);border-radius:var(--r);padding:16px;width:min(520px,100%);max-height:80vh;overflow:auto;}
textarea{width:100%;min-height:220px;margin-top:8px;padding:8px;border:1px solid #CBD4CE;border-radius:var(--r-klein);font-family:var(--mono);font-size:11.5px;resize:vertical;}

/* ============================================================
   8 · Turnier, Match und Rangliste
============================================================ */
.tabellen-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table{width:100%;border-collapse:collapse;min-width:420px;}
th{background:var(--tinte);color:#fff;padding:7px 4px;font-size:11px;font-weight:600;text-align:center;}
th.links,td.links{text-align:left;}
td{border-bottom:1px solid var(--linie);padding:5px 4px;text-align:center;font-size:13.5px;}

.runden-nav{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.runden-nav .knopf{padding:8px 16px;font-size:18px;line-height:1;}
.runden-titel{flex:1;text-align:center;font-weight:800;font-size:17px;}
.runden-titel small{font-weight:600;color:var(--text-2);font-size:12.5px;margin-left:4px;}
.court-karte{border:1px solid var(--linie);border-radius:12px;padding:10px 12px;margin-bottom:8px;}
.court-kopf{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);margin-bottom:4px;}
.court-zeile{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 0;font-size:14.5px;font-weight:650;}
.court-zeile input{width:68px;flex:0 0 auto;}
.court-zeile b{width:68px;text-align:center;font-size:17px;flex:0 0 auto;}
.pause-karte{border:1px dashed #C2CBC5;border-radius:12px;padding:8px 12px;margin-bottom:8px;font-size:13px;color:var(--text-2);}
.zw-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px;}
.zw-chips span{background:var(--grund);border-radius:999px;padding:5px 10px;font-size:12.5px;font-weight:650;}
.zw-chips span:first-child{background:var(--gruen-hell);color:var(--gruen-tief);}

#punkteTabelle input[type=number]{width:46px;padding:6px 2px;font-size:15px;}
#punkteTabelle .name-td{min-width:104px;background:#F6F9F7;text-align:left;font-weight:600;}
#punkteTabelle .total{font-weight:700;background:#EAF3FC;min-width:56px;}
#punkteTabelle .rang-td{font-weight:700;color:var(--text-2);width:34px;}
#punkteTabelle tr.fuehrend .total,#punkteTabelle tr.fuehrend .rang-td,#punkteTabelle tr.fuehrend .name-td{background:var(--gruen-hell);}
#punkteTabelle tfoot td{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--text-2);background:#F6F9F7;}
#punkteTabelle tfoot td.ok{color:var(--gruen);background:var(--gruen-hell);}
#punkteTabelle tfoot td.falsch{color:var(--fehler);background:var(--fehler-bg);}
#planTabelle td{text-align:left;padding:6px 8px;font-size:13px;}
#planTabelle .runde-td{text-align:center;font-weight:700;background:#F6F9F7;width:46px;}
#planTabelle .vs{color:#98A5A0;font-weight:600;padding:0 4px;}
#planTabelle .pause{color:var(--text-2);font-size:12px;}
tr.plan-aktiv td{background:#EAF3FC;font-weight:600;}

.uhrzeit{font-size:clamp(64px,24vw,96px);font-weight:800;text-align:center;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.03em;margin:8px 0 14px;}
.uhrzeit.knapp{color:var(--fehler);}
.uhr-reset{
  width:34px;height:34px;flex:0 0 auto;border:0;border-radius:9px;cursor:pointer;
  background:var(--fehler-bg);color:var(--fehler);display:flex;align-items:center;justify-content:center;
}
.uhr-reset:hover{background:#F5D9D2;}

.delta{width:54px;font-weight:700;font-size:13px;}
.delta.hoch{color:var(--gruen);}
.delta.runter{color:var(--fehler);}
.delta.gleich{color:#A6B1AB;}
.delta.neu{color:var(--blau);font-size:10px;letter-spacing:.1em;}
td.aktiv-spalte{background:#EAF3FC;font-weight:700;}
th.aktiv-spalte{background:#0B3C80;}
tr.fuehrend-r td{background:var(--gruen-hell);}
tr.ich-zeile td{box-shadow:inset 3px 0 0 var(--blau);}
table.gaeste th{background:#55635C;}
table.gaeste td{color:var(--text-2);}

.namensknopf{
  border:0;background:none;font:inherit;font-weight:600;color:var(--blau);
  cursor:pointer;padding:0;text-align:left;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(15,99,196,.3);
}
.namensknopf:hover{text-decoration-color:var(--blau);}
.spielerTabelle input[type=text]{padding:6px 8px;font-size:15px;font-weight:600;border-color:transparent;background:transparent;}
.spielerTabelle input[type=text]:hover{border-color:#CBD4CE;}
.spielerTabelle input[type=text]:focus{border-color:var(--blau);background:#fff;}
.abzeichen{border:0;cursor:pointer;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;border-radius:999px;}
.abzeichen.stamm{background:var(--gruen-hell);color:var(--gruen-tief);}
.abzeichen.gast{background:#EAF3FC;color:#0B3C80;}
.badge{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--linie);font-size:14px;}
.badge:last-child{border-bottom:0;}
.badge b{font-weight:750;flex:0 0 auto;}
.badge span{color:var(--text-2);text-align:right;}

.turnier-block{border:1px solid var(--linie);border-radius:12px;padding:10px 12px;margin-bottom:8px;}
.turnier-block .kopf-z{display:flex;justify-content:space-between;gap:10px;font-weight:650;margin-bottom:6px;font-size:14px;}
.turnier-block .kopf-z .klein{font-weight:400;font-size:12px;color:var(--text-2);}
.eintrag-z{display:flex;align-items:center;gap:8px;padding:4px 0;border-top:1px solid var(--linie);font-size:13.5px;}
.eintrag-z .pkt{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums;}

/* Spielerverwaltung: passt ohne seitliches Scrollen auf 360 px */
table.spielerTabelle{min-width:0;table-layout:fixed;}
table.spielerTabelle th:nth-child(2),table.spielerTabelle td:nth-child(2){width:50px;}
table.spielerTabelle th:nth-child(3),table.spielerTabelle td:nth-child(3){width:64px;}
table.spielerTabelle th:nth-child(4),table.spielerTabelle td:nth-child(4){width:96px;}
table.spielerTabelle td.links input{width:100%;min-width:0;padding-left:4px;padding-right:4px;}
table.spielerTabelle .abzeichen{padding:5px 6px;letter-spacing:.05em;}
table.spielerTabelle .knopf.mini{padding:5px 6px;}

/* ============================================================
   9 · Breakpoints, Bewegung, Druck
============================================================ */
@media (min-width:620px){
  .bahn{padding:14px 14px 28px;}
}
@media (prefers-reduced-motion:reduce){
  #ball{animation:none;offset-distance:0%;}
  .ansicht.aktiv{animation:none;}
}
@media print{
  .leiste,.tabbar,.knopfzeile,.icon-zeile,.status,.uhr-kachel{display:none;}
  body{background:#fff;padding-bottom:0;}
  .bahn{max-width:none;}
  .kachel{break-inside:avoid;border:1px solid #ddd;}
  table{min-width:0;}
}

/* ============================================================
   10 · Impressum und Datenschutz
============================================================ */
.rechtsseite{padding-bottom:24px;}
.rechtsseite .logo{color:#fff;text-decoration:none;}
.rechtsseite .zurueck{margin-left:auto;text-decoration:none;}
.rechtsseite h2{font-size:16px;margin:18px 0 6px;}
.rechtsseite .verbindlich{background:color-mix(in srgb,var(--ball,#D7FF1E) 14%,transparent);border-left:4px solid var(--ball,#D7FF1E);border-radius:var(--r-klein);padding:10px 12px;font-size:13px;}
.rechtsseite .leiste .knopf{white-space:nowrap;}
.rechtsseite .vorlage{background:#FFF6D6;color:#3A2E00;border-radius:var(--r-klein);padding:10px 12px;font-size:13px;}

/* ============================================================
   11 · Courtfinder
============================================================ */
.kachel[hidden]{display:none;}
#cfListe{display:contents;}

.cf-suchkachel{background:linear-gradient(160deg,#0F63C4 0%,#0B4C98 100%);color:#fff;}
.cf-suchkachel .marke{color:#fff;}
.cf-suchkachel h2{color:#fff;}
.cf-suchkachel input[type=text]{width:100%;text-align:left;border:0;background:#fff;color:var(--tinte);padding:11px 12px;font-size:16px;}
.cf-suchkachel .hinweis-klein{color:rgba(255,255,255,.8);}
.cf-suchkachel .knopf.gruen{background:var(--ball);color:var(--tinte);}
.cf-suchkachel .knopf.gruen:hover{background:#B8E600;}
.cf-filter{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}
.cf-chip{border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.12);color:#fff;font:inherit;font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;cursor:pointer;}
.cf-chip:hover{background:rgba(255,255,255,.22);}
.cf-chip.an{background:#fff;color:#0B4C98;border-color:#fff;}
.cf-anzahl{margin:12px 0 0;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.85);}

.cf-kartenkachel #karteHinweis p{font-size:13.5px;}
.cf-fehler{color:var(--fehler);font-weight:600;}
.cf-fehler:empty{display:none;}
/* isolation: Leaflet nutzt z-index bis 1000, das darf Kopf- und Tab-Leiste nicht überdecken */
#karte{height:300px;border-radius:var(--r-klein);position:relative;z-index:0;isolation:isolate;}

.cf-karte{border-top:4px solid var(--blau);}
.cf-karte.beispiel{border-top-color:#E8B100;background:#FFFDF3;}
.cf-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:6px;}
.cf-kopf h2{margin:0 0 2px;font-size:18px;}
.cf-adresse{margin:0;font-size:13px;}
.cf-km{flex:none;background:var(--ball);color:var(--tinte);font-weight:800;font-size:13px;padding:5px 10px;border-radius:999px;font-family:var(--mono);}
.cf-beispiel{display:inline-block;background:#FFF0B3;color:#6B5200;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:999px;margin-bottom:6px;}
.cf-zahlen{display:flex;gap:8px;margin:8px 0;}
.cf-zahl{border-radius:var(--r-klein);padding:6px 12px;font-size:13px;font-weight:600;}
.cf-zahl b{font-size:20px;font-weight:800;margin-right:4px;}
.cf-zahl.indoor{background:#EAF3FC;color:#0B3C80;}
.cf-zahl.outdoor{background:var(--gruen-hell);color:var(--gruen-tief);}
.cf-tags{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 8px;}
.cf-tags span{background:var(--grund);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;color:var(--text-2);}
.cf-preis{font-weight:600;margin:0 0 6px;}
.cf-notiz{font-size:13px;margin:0 0 6px;}
.cf-karte .knopfzeile{margin:8px 0 0;}
.cf-karte a.knopf{text-decoration:none;display:inline-block;}
.cf-stand{margin:10px 0 0;font-size:11.5px;color:var(--text-2);}
.cf-stand.veraltet{color:#8A5A00;font-weight:700;}
.cf-melden{background:var(--gruen-hell);color:var(--gruen-tief);text-decoration:none;display:block;font-size:14px;}
.cf-melden:hover{background:#CDEFE0;}
.dash-courts{background:linear-gradient(120deg,#EAF3FC,#DEF7ED);}
.dash-courts:hover{background:linear-gradient(120deg,#DCEBFA,#CDEFE0);}

@media print{.cf-suchkachel,.cf-kartenkachel{display:none;}}

/* ============================================================
   12 · Konto, Gruppen, Synchronisierung
============================================================ */
.kopf-rechts{display:flex;align-items:center;gap:8px;min-width:0;}
.konto-knopf{
  display:inline-flex;align-items:center;gap:7px;max-width:46vw;height:36px;padding:0 13px;border:0;border-radius:18px;
  background:rgba(255,255,255,.14);color:#fff;font:600 13px var(--sys);cursor:pointer;
}
.konto-knopf:hover{background:rgba(255,255,255,.22);}
.konto-knopf.an{background:rgba(204,255,0,.18);}
.konto-knopf .konto-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sync-punkt{width:8px;height:8px;border-radius:50%;background:transparent;flex:none;}
.konto-knopf[data-sync] .sync-punkt{background:rgba(255,255,255,.5);}
.konto-knopf[data-sync="ok"] .sync-punkt{background:#3DDC97;}
.konto-knopf[data-sync="wartet"] .sync-punkt{background:var(--ball);}
.konto-knopf[data-sync="offline"] .sync-punkt{background:#9AA5AD;}
.konto-knopf[data-sync="fehler"] .sync-punkt{background:#FF6B57;}
.konto-knopf[data-sync=""] .sync-punkt{display:none;}

.gruppe-zeile{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;margin:0 0 8px;padding:11px 13px;
  border:2px solid var(--linie);border-radius:var(--r-klein);background:var(--kachel);color:var(--text);font:inherit;text-align:left;cursor:pointer;
}
.gruppe-zeile span{font-size:12.5px;color:var(--text-2);}
.gruppe-zeile.aktiv{border-color:var(--gruen);background:var(--gruen-hell);}

.mitglieder{list-style:none;margin:0 0 4px;padding:0;}
.mitglieder li{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:7px 0;border-bottom:1px solid var(--linie);font-size:14px;}
.mitglieder li > span:first-child{flex:1 1 120px;font-weight:600;}
.marke-rolle{font-size:11.5px;color:var(--text-2);}
.linkfeld{width:100%;height:64px;min-height:0;font:12px var(--mono);resize:none;}
.haken{display:flex;gap:8px;align-items:center;margin:12px 0 4px;font-size:14px;}
.fehler-text{color:var(--fehler);min-height:1em;}
.honig{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}

/* Mitglieder lesen nur: Eingabebereiche ausblenden */
body.nur-lesen .tabknopf[data-ziel="turnier"],
body.nur-lesen .tabknopf[data-ziel="match"],
body.nur-lesen [data-bereich="daten"],
body.nur-lesen #dashTurnierKnopf,
body.nur-lesen .nur-leitung{display:none !important;}

/* ---------- Anmelden und Registrieren (Tafel-Stil) ---------- */
.overlay.sheet{align-items:flex-end;padding:0;}
.overlay.sheet .overlay-box{
  width:min(560px,100%);max-height:92vh;border-radius:22px 22px 0 0;border-bottom:0;
  padding:14px 18px calc(18px + env(safe-area-inset-bottom));animation:hochfahren .28s cubic-bezier(.2,.8,.2,1);
}
.overlay.sheet .overlay-box::before{content:"";display:block;width:44px;height:5px;border-radius:3px;background:var(--rand);margin:0 auto 10px;}
@keyframes hochfahren{from{transform:translateY(40px);opacity:0;}to{transform:none;opacity:1;}}
@media (min-width:620px){ .overlay.sheet{align-items:center;padding:16px;} .overlay.sheet .overlay-box{border-radius:22px;border-bottom:1px solid var(--rand);} }

#kontoInhalt label{margin:14px 0 6px;font-size:12px;}
#kontoInhalt input[type=email],#kontoInhalt input[type=text]:not(.honig),#kontoInhalt input[type=url]{min-height:52px;font-size:17px;border-radius:12px;}
.k-voll{width:100%;margin-top:14px;}
.k-gross{margin:4px 0 12px;font:900 30px/1.02 var(--anzeige);letter-spacing:.02em;}
.k-text{margin:0 0 4px;font:500 14.5px/1.5 var(--sys);color:var(--text-weich);}
.k-text b{color:var(--text);}
.k-mitte{text-align:center;margin-top:12px;}
.k-zeile{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:12px;}
.text-knopf{border:0;background:none;color:var(--leucht);font:700 14px var(--sys);min-height:44px;padding:0 4px;cursor:pointer;}
.text-knopf[disabled]{color:var(--text-2);cursor:default;}
.text-knopf.gefahr{color:var(--fehler);margin-top:6px;}

.k-schritte{list-style:none;display:flex;gap:6px;margin:0 0 16px;padding:0;}
.k-schritte li{flex:1;display:flex;align-items:center;gap:6px;padding:7px 8px;border-radius:10px;background:var(--kachel-2);color:var(--text-2);font:700 12px var(--sys);}
.k-schritte .ziffer{font-size:16px;}
.k-schritte li.jetzt{background:var(--ball);color:var(--tinte);}
.k-schritte li.fertig{color:var(--hoch);}
.k-schritte li.fertig .ziffer::after{content:" ✓";font-family:var(--sys);font-size:12px;}

.k-vorteile{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:8px;}
.k-vorteile li{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:var(--tafel);border:1px solid var(--linie);}
.k-vorteile .ziffer{font-size:20px;color:var(--leucht);line-height:1.2;}
.k-vorteile b{display:block;font:900 18px/1.1 var(--anzeige);letter-spacing:.02em;}
.k-vorteile span span,.k-vorteile li > span:last-child{font:500 13px/1.4 var(--sys);color:var(--text-2);}

.code-feld{
  width:100%;height:76px;margin-top:14px;border-radius:14px;text-align:center;font-size:44px !important;letter-spacing:.38em;
  padding:0 0 0 .38em !important;background:var(--tafel) !important;color:var(--leucht) !important;border:2px solid var(--tafel-rand) !important;
}
.code-feld:focus{border-color:var(--ball) !important;}
.code-feld::placeholder{color:var(--rand-leise);}

.k-spieler{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 2px;}
.k-spieler-knopf{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 6px;border-radius:999px;border:2px solid var(--rand);background:var(--kachel-2);color:var(--text);font:700 14px var(--sys);cursor:pointer;}
.k-spieler-knopf .avatar{width:30px;height:30px;font-size:11px;}
.k-spieler-knopf.an{border-color:var(--farbe);background:var(--farbe);color:var(--tinte);}
.k-spieler-knopf.an .avatar{background:var(--tinte);color:var(--farbe);}

.k-profil{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:var(--tafel);border:1px solid var(--linie);}
.k-profil b{display:block;font:900 24px/1.05 var(--anzeige);}
.k-profil small{color:var(--text-2);font-size:13px;}
.avatar.gross-k{width:52px;height:52px;font:900 24px var(--anzeige);}
.k-paar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:4px;}
.k-paar .knopf{min-height:52px;}
.k-verwalten{margin-top:16px;border-top:1px solid var(--linie);padding-top:6px;}
.k-verwalten summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font:700 14px var(--sys);color:var(--text-2);}

.einladung-tafel{display:flex;gap:14px;align-items:center;padding:12px;border-radius:16px;background:var(--tafel);border:2px solid var(--tafel-rand);}
.einladung-text b{display:block;margin-top:4px;font:900 20px/1.1 var(--anzeige);letter-spacing:.02em;}
#kontoInhalt .linkfeld{height:44px;min-height:0;margin-top:10px;font:12px var(--mono);color:var(--text-2);}

.mitglieder li{gap:10px;padding:9px 0;}
.mitglieder .m-name{flex:1 1 100px;font-weight:700;}
.mitglieder .avatar{width:30px;height:30px;font-size:11px;}
.rolle-chip{font:800 10.5px var(--sys);letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:6px;background:var(--kachel-2);color:var(--text-2);}
.rolle-chip.leitung{background:var(--ball);color:var(--tinte);}
.m-aktionen{display:flex;gap:6px;width:100%;padding-left:40px;}
.haken input{accent-color:var(--ball);width:20px;height:20px;}
.konto-ini{width:24px;height:24px;border-radius:50%;background:var(--ball);color:var(--tinte);display:inline-flex;align-items:center;justify-content:center;font:800 10px var(--sys);margin-left:-6px;}
.konto-knopf .sync-punkt{display:none;}
.konto-knopf[data-sync]:not([data-sync=""]) .sync-punkt{display:block;}
.mitglieder li > span.avatar{flex:none;}

/* Ein Weg für alle: Anmelden und Registrieren erklärt */
.k-wege{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 14px;}
.k-wege div{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:12px;background:var(--tafel);border:1px solid var(--linie);font:500 13px/1.35 var(--sys);color:var(--text-2);}
.k-wege b{font:900 17px/1.1 var(--anzeige);letter-spacing:.03em;color:var(--leucht);text-transform:uppercase;}
.k-schritte small{font-weight:600;opacity:.75;margin-left:2px;}
.k-wozu{margin-top:10px;}
.k-wozu summary{cursor:pointer;font:700 13px var(--sys);color:var(--text-2);text-align:center;list-style:none;padding:6px;}
.k-wozu summary::-webkit-details-marker{display:none;}
.k-wozu summary::after{content:" ▾";}
.k-wozu[open] summary::after{content:" ▴";}
.k-wozu .k-vorteile{margin-top:6px;}
.k-bleiben{margin:10px 0 2px;}
/* Kontaktformular: Themen als Chips */
.k-themen{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 6px;}
.k-themen button{border:2px solid var(--linie);background:var(--tafel);color:var(--text-2);border-radius:999px;padding:6px 12px;font:700 13px var(--sys);cursor:pointer;}
.k-themen button[aria-checked="true"]{border-color:var(--leucht);color:var(--leucht);background:color-mix(in srgb,var(--leucht) 12%,var(--tafel));}
.k-admin{display:flex;flex-direction:column;gap:2px;margin:12px 0 0;padding:10px 14px;border-radius:12px;text-decoration:none;
  border:2px solid #FF5C8A;background:color-mix(in srgb,#FF5C8A 12%,var(--tafel));color:var(--text);}
.k-admin b{font:900 18px/1 var(--anzeige);letter-spacing:.06em;color:#FF5C8A;}
.k-admin span{font:600 12px var(--sys);color:var(--text-2);}

/* ============================================================
   13 · Anzeigetafel + Sammelkarten
   Grundstil: Stadion-Anzeigetafel. Dunkler Grund, Ball-Gelb leuchtet,
   Punktmatrix-Ziffern (Doto), Namen in Big Shoulders, Text in Inter.
============================================================ */
.ziffer{font-family:var(--ziffer);font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:0;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.tafel-label{display:block;margin:0;font:700 11px/1.3 var(--sys);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);}
.seiten-titel{margin:6px 4px 10px;font:900 44px/1 var(--anzeige);letter-spacing:.02em;}
.seiten-titel.klein{font-size:34px;margin:0 0 12px;}
.abschnitt-titel{margin:22px 4px 8px;font:900 24px/1 var(--anzeige);letter-spacing:.03em;}

/* ---------- Kopf und Tabs ---------- */
.leiste{background:var(--kopf);color:var(--text);border-bottom:1px solid var(--linie);gap:8px;}
.wortmarke{font-family:var(--ziffer);font-weight:900;font-size:20px;letter-spacing:.04em;color:var(--leucht);}
.logo img{display:none;}
.kopf-rechts{margin-left:auto;}
.kopf-knopf:hover,.konto-knopf:hover{background:var(--hover);}
.kopf-knopf{color:var(--text);margin-left:0;width:40px;height:40px;background:var(--kachel-2);border:1px solid var(--rand);}
.kopf-knopf.an{background:var(--ball);color:var(--tinte);border-color:var(--leucht);}
.konto-knopf{color:var(--text);background:var(--kachel-2);border:1px solid var(--rand);height:40px;}
.konto-knopf.an{background:var(--kachel-2);}

.tabbar{background:var(--leiste-bg);border-top:1px solid var(--linie);}
.tabknopf{color:var(--text-2);font:700 10.5px var(--sys);letter-spacing:.08em;text-transform:uppercase;min-height:52px;justify-content:center;}
.tabknopf[aria-selected="true"]{color:var(--leucht);}
.tabknopf[aria-selected="true"] .punkt{background:var(--ball);}

/* ---------- Grundbausteine im Dunkeln ---------- */
.kachel{background:var(--kachel);border:1px solid var(--linie);}
.kachel h2{font-family:var(--anzeige);font-weight:900;font-size:24px;letter-spacing:.02em;}
.marke{opacity:1;color:var(--text-2);letter-spacing:.14em;}
.knopf{background:var(--ball);color:var(--tinte);font-weight:800;min-height:44px;border-radius:12px;}
.knopf:hover{background:#ECFF8A;}
.knopf.gruen{background:var(--ball);color:var(--tinte);}
.knopf.gruen:hover{background:#ECFF8A;}
.knopf.sekundaer{background:var(--kachel-2);color:var(--text);border:1px solid var(--rand);}
.knopf.sekundaer:hover{background:var(--hover);}
.knopf.mini{min-height:34px;}
.icon-knopf{background:var(--kachel-2);border-color:var(--rand);color:var(--text);}
.icon-knopf:hover{background:var(--hover);}
.icon-knopf.gruen{background:var(--ball);border-color:var(--leucht);color:var(--tinte);}
.icon-knopf.gruen:hover{background:#ECFF8A;}
.icon-knopf.gefahr{background:var(--fehler-bg);border-color:var(--fehler-rand);color:var(--fehler);}
input[type=date],input[type=time],input[type=text],input[type=number],input[type=email],input[type=url],input[type=search],select,textarea{background:var(--feld);border-color:var(--rand);color:var(--text);}
input::placeholder,textarea::placeholder{color:var(--text-2);}
input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible,textarea:focus-visible{outline:3px solid var(--ball);outline-offset:2px;}
.segment{background:var(--tafel);border:2px solid var(--linie);border-radius:12px;padding:4px;gap:4px;}
.segment button{color:var(--text-weich);font:900 17px var(--anzeige);letter-spacing:.06em;text-transform:uppercase;min-height:40px;}
.segment button[aria-pressed="true"]{background:var(--ball);color:var(--tinte);box-shadow:none;}
.stepper button{background:var(--kachel-2);border-color:var(--rand);color:var(--text);width:40px;height:40px;}
.tn-feld{background:var(--kachel-2);border-color:var(--rand);min-height:40px;}
.tn-feld::before{color:var(--text-2);}
.tn-feld.gewaehlt{background:var(--ball);border-color:var(--leucht);color:var(--tinte);}
.tn-feld.gewaehlt::before{color:var(--tinte);}
.leer{border-color:var(--rand);}
.toast{background:var(--tafel-rand);border:1px solid var(--rand);}
.toast-knopf{color:var(--leucht);}
.overlay{background:rgba(0,0,0,.72);}
html[data-thema="hell"] .overlay{background:rgba(11,15,20,.55);}
.overlay-box{border:1px solid var(--rand);}
.warnbalken{border-bottom-color:var(--fehler-rand);color:var(--fehler-text);}
.status{color:var(--hoch);}
a{color:var(--leucht);}
.fusszeile{margin-top:22px;}

/* Tabellen (Turniertabelle, Plan, Spielerverwaltung) */
th{background:var(--tafel);color:var(--text-2);letter-spacing:.06em;}
td{border-bottom-color:var(--linie);}
#punkteTabelle .name-td,#planTabelle .runde-td,#punkteTabelle tfoot td{background:var(--kachel-2);}
#punkteTabelle .total{background:var(--aktiv);color:var(--leucht);}
#punkteTabelle tr.fuehrend .total,#punkteTabelle tr.fuehrend .rang-td,#punkteTabelle tr.fuehrend .name-td{background:var(--aktiv);}
#punkteTabelle tfoot td.ok{color:var(--hoch);background:var(--gruen-hell);}
tr.plan-aktiv td{background:var(--aktiv);}
.turnier-block{border-color:var(--linie);background:var(--kachel-2);}
.eintrag-z{border-top-color:var(--linie);}
.namensknopf{color:var(--leucht);text-decoration-color:rgba(215,255,30,.35);}
.spielerTabelle input[type=text]:focus{background:var(--feld);}
.abzeichen.stamm{background:var(--gruen-hell);color:var(--hoch);}
.abzeichen.gast{background:var(--blau-bg);color:var(--blau-text);}
.zw-chips span{background:var(--kachel-2);}
.zw-chips span:first-child{background:var(--ball);color:var(--tinte);}

/* Regeln und Courtfinder */
.urteil.neutral{background:var(--blau-bg);color:var(--blau-text);}
.wertchips span{background:var(--kachel-2);}
.wertchips span.stark{background:var(--ball);color:var(--tinte);}
.check li::before{border-color:var(--rand);}
.cf-suchkachel{background:#0F5FD6;border-color:#0F5FD6;}
.cf-suchkachel input[type=text]{background:#fff;color:#0B0F14;}
.cf-karte{border-top:4px solid var(--blau);}
.cf-karte.beispiel{border-top-color:#E8B100;background:var(--hinweis-bg);}
.cf-beispiel{background:var(--hinweis-chip);color:var(--hinweis-text);}
.cf-zahl.indoor{background:var(--blau-bg);color:var(--blau-text);}
.cf-zahl.outdoor{background:var(--gruen-hell);color:var(--hoch);}
.cf-tags span{background:var(--kachel-2);}
.cf-stand.veraltet{color:#FFB020;}
.cf-melden{background:var(--gruen-hell);color:var(--hoch);border-color:var(--gruen-rand);}
.cf-melden:hover{background:var(--gruen-hell);}
.gruppe-zeile{background:var(--kachel-2);border-color:var(--rand);}
.gruppe-zeile.aktiv{background:var(--aktiv);border-color:var(--leucht);}

/* ---------- Tafeln ---------- */
.tafel{background:var(--tafel);border:2px solid var(--tafel-rand);border-radius:16px;box-shadow:inset 0 0 0 4px var(--grund);}
.haupttafel{padding:16px 14px 14px;}
.tafel-kopf{display:flex;justify-content:space-between;gap:8px;font:700 11px var(--sys);letter-spacing:.14em;color:var(--text-2);}
.tafel-kopf .orange{color:var(--orange-text);}
.haupttafel .tafel-label{margin-top:12px;}
.klapp-reihe{display:flex;gap:3px;margin-top:6px;perspective:400px;min-height:56px;flex-wrap:nowrap;overflow:hidden;}
.klappfeld{
  position:relative;display:flex;align-items:center;justify-content:center;flex:0 1 40px;min-width:26px;height:56px;border-radius:5px;
  background:var(--kachel-2);border-top:1px solid var(--rand);font:900 40px var(--anzeige);color:var(--text);
  animation:klappen .55s cubic-bezier(.2,.9,.3,1.2) both;transform-origin:50% 50%;
}
.klappfeld::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--tafel-rand);}
@keyframes klappen{0%{transform:rotateX(90deg);opacity:.2;}60%{transform:rotateX(-12deg);opacity:1;}100%{transform:rotateX(0);}}
.haupt-zeile{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:12px;}
.riesig{font-size:64px;line-height:.9;color:var(--leucht);}
.haupt-info{text-align:right;font:500 12.5px/1.4 var(--sys);color:var(--text-weich);}
.haupt-info span{color:var(--text-2);}

.ticker{margin:10px -12px 0;height:34px;background:var(--ball);color:var(--tinte);overflow:hidden;display:flex;align-items:center;}
.ticker-band{display:flex;white-space:nowrap;font:800 13px var(--sys);letter-spacing:.04em;animation:laufen 26s linear infinite;}
.ticker-band span{padding-right:28px;}
@keyframes laufen{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* Tafelzeilen: Rangliste und Top 5 */
.liste-tafel{margin-top:22px;padding:6px 0;}
.tafel-liste{list-style:none;margin:0;padding:4px 6px 2px;perspective:700px;}
.tafel-liste li{margin:0 0 4px;}
.tafel-zeile{
  width:100%;display:flex;align-items:center;gap:10px;min-height:54px;padding:0 12px;border-radius:9px;
  background:var(--kachel);border:2px solid transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer;
  animation:klappen .5s cubic-bezier(.2,.9,.3,1.2) both;transform-origin:50% 50%;
}
.tafel-zeile:hover{background:var(--hover);}
.tafel-zeile.ich{background:var(--ich-bg);border-color:var(--pink);}
.tz-platz{width:30px;flex:none;font-size:22px;}
.tafel-zeile.erster .tz-platz{color:var(--leucht);}
.tz-name{flex:1;min-width:0;display:flex;flex-direction:column;}
.tz-name b{font:800 22px/1.05 var(--anzeige);letter-spacing:.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tz-name small{font:600 11px var(--sys);color:var(--text-2);}
.tz-delta{width:30px;flex:none;font:800 12px var(--sys);color:var(--text-2);}
.tz-delta.hoch{color:var(--hoch);}
.tz-delta.runter{color:var(--runter);}
.tz-delta.neu{color:var(--blau-hell);font-size:10px;letter-spacing:.08em;}
.tz-wert{min-width:58px;text-align:right;font-size:25px;color:var(--leucht);}
.tz-einheit{margin:0 6px 6px;color:var(--orange-text);}
.kompakt .tafel-zeile{min-height:46px;}
.kompakt .tz-name b{font-size:21px;}
.tafel-liste.gaeste .tz-wert{color:var(--text-weich);}
.tafel-link{display:flex;width:100%;justify-content:center;align-items:center;min-height:46px;border:0;background:none;color:var(--leucht);font:700 13px var(--sys);letter-spacing:.06em;cursor:pointer;}
#unter-wertung > .kachel{background:transparent;border:0;padding:0;}
#ranglisteBereich{background:var(--tafel);border:2px solid var(--tafel-rand);border-radius:16px;padding:8px 0 4px;}
#ranglisteBereich > .hinweis-klein{margin:6px 12px 8px;}

/* Avatare in Spielerfarbe */
.avatar{flex:none;width:32px;height:32px;border-radius:50%;background:var(--farbe);color:var(--tinte);display:flex;align-items:center;justify-content:center;font:800 12px var(--sys);}
.avatar.gross{width:72px;height:72px;margin:8px auto 0;background:var(--tinte);color:var(--farbe);border:3px solid #fff;font:900 36px var(--anzeige);}
.avatar.riesig{width:128px;height:128px;margin:12px auto 0;background:var(--tinte);color:var(--farbe);border:5px solid #fff;font:900 66px var(--anzeige);}

/* Startseite: meine Karte + Form */
.meine-zeile{display:flex;gap:14px;align-items:center;padding:20px 4px 0;}
.mini-karte{
  flex:none;width:148px;height:206px;border:0;border-radius:14px;background:var(--farbe);color:var(--tinte);padding:10px;
  transform:rotate(-4deg);box-shadow:0 10px 24px rgba(0,0,0,.5);display:flex;flex-direction:column;cursor:pointer;font:inherit;position:relative;
  transition:transform .2s;
}
.mini-karte:hover{transform:rotate(-1deg) scale(1.02);}
.mk-kopf{display:flex;justify-content:space-between;font:800 11px var(--sys);letter-spacing:.08em;}
.mk-name{margin-top:8px;text-align:center;font:900 25px/1 var(--anzeige);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mk-werte{margin-top:6px;display:flex;justify-content:space-around;font:700 11px var(--sys);}
.mk-band{position:absolute;left:10px;right:10px;bottom:10px;height:18px;border-radius:4px;background:var(--tinte);color:var(--farbe);font:800 9.5px var(--sys);letter-spacing:.1em;display:flex;align-items:center;justify-content:center;}
.meine-form{flex:1;min-width:0;}
.formkurve{width:100%;height:64px;display:block;}
.form-daten{display:flex;justify-content:space-between;font:600 11px var(--sys);color:var(--text-2);}
.meine-text{margin:10px 0 0;font:500 13.5px/1.4 var(--sys);color:var(--text-weich);}
.meine-text b{color:var(--leucht);}
.ich-waehlen{width:100%;margin-top:14px;}

.farb-paar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px;}
.farbkachel{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:100px;padding:12px;border:0;border-radius:14px;text-align:left;font:inherit;cursor:pointer;}
.farbkachel b{font:900 24px/1 var(--anzeige);margin-top:4px;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.farbkachel b.ziffer{font-family:var(--ziffer);font-size:28px;}
.farbkachel > span:last-child{font:600 12.5px/1.35 var(--sys);}
.farbkachel.blau{background:var(--blau);color:#fff;}
.farbkachel.blau .tafel-label{color:#CFE0FF;}
.farbkachel.gruen{background:var(--gruen);color:var(--gruen-tief);}
.farbkachel.gruen .tafel-label{color:var(--gruen-tief);}

.daumen{padding:18px 0 0;}
.haupt-aktion{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:64px;padding:0 20px;border:0;border-radius:16px;
  background:var(--ball);color:var(--tinte);font:900 26px var(--anzeige);letter-spacing:.04em;cursor:pointer;
}
.haupt-aktion:hover{background:#ECFF8A;}
.haupt-aktion.klein{min-height:52px;font-size:20px;justify-content:center;}
.haupt-chip{font:800 11px var(--sys);letter-spacing:.12em;padding:5px 8px;border-radius:6px;background:var(--tinte);color:var(--ball);}
.haupt-chip:empty{display:none;}
.haupt-chip.live{animation:blinken 1.4s ease-in-out infinite;}
@keyframes blinken{0%,100%{opacity:1;}50%{opacity:.35;}}

/* ---------- Spielerkarte ---------- */
.karten-overlay{align-items:flex-start;overflow:auto;padding:16px 12px;}
.karten-buehne{width:min(420px,100%);margin:0 auto;display:flex;flex-direction:column;align-items:center;}
.karten-kopf{width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.sammelkarte{
  position:relative;width:min(300px,82vw);aspect-ratio:300/430;padding:0;border:0;background:none;cursor:pointer;
  transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.8,.2,1);perspective:1200px;font:inherit;color:inherit;
}
.sammelkarte.gedreht{transform:rotateY(180deg);}
.karte-vorne,.karte-hinten{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:22px;padding:16px;
  display:flex;flex-direction:column;text-align:left;box-shadow:0 18px 40px rgba(0,0,0,.6);overflow:hidden;
}
.karte-vorne{background:var(--farbe);color:var(--tinte);border:6px solid #fff;}
.karte-hinten{transform:rotateY(180deg);background:var(--tinte);color:var(--text);border:6px solid var(--farbe);}
.kv-kopf{display:flex;justify-content:space-between;align-items:center;}
.kv-kopf .ziffer{font-size:30px;}
.kv-delta{padding:4px 8px;border-radius:6px;background:var(--tinte);color:var(--hoch);font:800 12px var(--sys);}
.kv-name{margin-top:10px;text-align:center;font:900 clamp(36px,13vw,52px)/.95 var(--anzeige);letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.kv-unter{text-align:center;font:700 11px var(--sys);letter-spacing:.16em;margin-top:2px;}
.kv-werte{margin-top:14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}
.kw{background:var(--tinte);color:var(--farbe);border-radius:10px;padding:8px 4px;text-align:center;display:flex;flex-direction:column;}
.kw b{font-size:25px;line-height:1;}
.kw small{margin-top:3px;font:700 9.5px var(--sys);letter-spacing:.1em;color:var(--text);}
.kv-fuss{margin-top:auto;display:flex;justify-content:space-between;font:800 10px var(--sys);letter-spacing:.12em;}
.kh-titel{font:900 28px var(--anzeige);color:var(--farbe);margin-bottom:10px;}
.kh-zeile{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;background:var(--kachel-2);margin-bottom:6px;font:600 13px var(--sys);}
.kh-zeile > span:first-child{width:50px;color:var(--text-2);font-size:12px;}
.kh-zeile > span:nth-child(2){flex:1;}
.kh-zeile b{font-size:22px;color:var(--leucht);}
.kh-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
.chip{padding:6px 10px;border-radius:999px;background:var(--farbe);color:var(--tinte);font:800 11.5px var(--sys);}
.karte-hinten .tafel-label{margin-top:12px;}
.karte-hinten .kv-fuss{color:var(--text-2);}
.karten-knoepfe{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:20px;}
.karten-knoepfe .knopf{min-height:52px;}
.karten-streifen{width:100%;display:flex;gap:10px;overflow-x:auto;padding:18px 2px 6px;scroll-snap-type:x mandatory;}
.streifen-karte{
  flex:none;width:92px;height:128px;border-radius:12px;background:var(--farbe);color:var(--tinte);border:3px solid #fff;padding:7px;
  display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;font:inherit;scroll-snap-align:start;
}
.streifen-karte .ziffer{align-self:flex-start;font-size:16px;}
.streifen-karte .avatar{width:44px;height:44px;background:var(--tinte);color:var(--farbe);font:900 22px var(--anzeige);}
.streifen-karte b{font:900 16px var(--anzeige);overflow:hidden;text-overflow:ellipsis;max-width:100%;white-space:nowrap;}

/* ---------- Album ---------- */
.album-fortschritt{display:flex;align-items:center;gap:10px;margin:8px 4px 14px;}
.balken{flex:1;height:10px;border-radius:5px;background:var(--tafel-rand);overflow:hidden;}
.balken > div{height:100%;width:0;background:var(--ball);transition:width .6s;}
.album-fortschritt .ziffer{font-size:20px;color:var(--leucht);}
.pack{display:flex;align-items:center;gap:14px;margin:0 0 12px;padding:16px;border-radius:18px;background:var(--orange);color:#170800;}
.pack[hidden]{display:none;}
.pack-karte{flex:none;width:64px;height:84px;border-radius:12px;background:var(--tinte);color:var(--orange);display:flex;align-items:center;justify-content:center;font:900 40px var(--anzeige);transform:rotate(-6deg);border:3px solid #fff;}
.pack-text{flex:1;min-width:0;}
.pack-text .tafel-label{color:#170800;}
.pack-text b{display:block;font:900 22px/1.05 var(--anzeige);}
.pack-knopf{min-height:48px;padding:0 14px;border-radius:12px;border:0;background:var(--tinte);color:var(--orange);font:900 18px var(--anzeige);cursor:pointer;}
.sticker-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.sticker{min-height:150px;border-radius:16px;padding:12px;display:flex;flex-direction:column;justify-content:space-between;background:var(--kachel);color:var(--text-2);border:2px dashed var(--rand-leise);}
.sticker.hat{background:var(--farbe);color:var(--tinte);border:3px solid #fff;}
.sticker-symbol{font-size:40px;line-height:1;}
.sticker b{display:block;font:900 22px/1.05 var(--anzeige);}
.sticker small{display:block;margin-top:3px;font:600 11.5px/1.35 var(--sys);opacity:.9;}
.sticker.pop{animation:aufpoppen .7s cubic-bezier(.2,.9,.3,1.3) both;}
@keyframes aufpoppen{0%{transform:scale(.4) rotate(-20deg);opacity:0;}70%{transform:scale(1.12) rotate(4deg);opacity:1;}100%{transform:none;}}
.badge{align-items:center;border-bottom-color:var(--linie);}
.badge-symbol{flex:none;width:34px;height:34px;border-radius:50%;background:var(--farbe);color:var(--tinte);display:flex;align-items:center;justify-content:center;font-size:18px;}
.badge b{flex:0 0 auto;font:900 19px var(--anzeige);letter-spacing:.02em;}
.badge span:last-child{flex:1;font-size:13px;}

/* ---------- Turnier: Court-Tafeln ---------- */
.modus-segment{margin-bottom:2px;}
.court-karte{border:0;border-radius:18px;padding:4px;margin-bottom:12px;background:var(--gruen);}
.court-karte.blau{background:var(--blau);}
.court-karte.orange{background:var(--orange);}
.court-karte.lila{background:#7C8CFF;}
.court-kopf{display:flex;justify-content:space-between;padding:6px 10px;margin:0;color:var(--tinte);font:800 11px var(--sys);letter-spacing:.14em;}
.court-karte.blau .court-kopf{color:#fff;}
.court-tafel{border-radius:14px;background:var(--tafel);padding:12px;}
.court-teams{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;text-align:center;font:900 20px/1.05 var(--anzeige);}
.court-teams small{font:800 11px var(--sys);color:var(--text-2);letter-spacing:.14em;}
.court-stand{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin-top:8px;}
.court-stand input{width:100%;height:84px;border:0;border-radius:10px;background:var(--feld);color:var(--leucht);font:900 68px var(--ziffer);text-align:center;padding:0;}
.court-stand b{text-align:center;font-size:68px;line-height:84px;color:var(--text);}
.court-stand b.offen,.court-stand input:placeholder-shown{color:var(--rand-leise);}
.court-stand input::placeholder{color:var(--rand-leise);opacity:1;}
.court-doppel{font:900 40px var(--ziffer);color:var(--rand-leise);}
.court-knoepfe{display:flex;justify-content:space-between;margin-top:10px;}
.court-knoepfe > span{display:flex;gap:8px;}
.punkt-knopf{width:56px;height:56px;border-radius:14px;border:0;background:var(--tafel-rand);color:var(--text);font:900 30px var(--ziffer);cursor:pointer;}
.punkt-knopf:active{background:var(--ball);color:var(--tinte);}
.pause-karte{border-color:var(--rand);display:flex;justify-content:space-between;font:700 13px var(--sys);}
.runden-titel{font:900 26px var(--anzeige);letter-spacing:.04em;}
.runden-nav .knopf{min-width:52px;min-height:48px;}
.uhrzeit{font-family:var(--ziffer);font-weight:900;color:var(--leucht);letter-spacing:0;}
.uhrzeit.knapp{color:var(--runter);}
.uhr-kachel{background:var(--tafel);border:2px solid var(--tafel-rand);}

/* Weniger Bewegung, wenn das System es wünscht */
@media (prefers-reduced-motion:reduce){
  .klappfeld,.tafel-zeile,.sticker.pop,.haupt-chip.live{animation:none;}
  .ticker-band{animation:none;flex-wrap:wrap;white-space:normal;}
  .ticker{height:auto;padding:8px 12px;}
  .ticker-band span:last-child{display:none;}
  .sammelkarte{transition:none;}
}
@media print{
  body{background:#fff;color:#000;}
  .kachel,.tafel,#ranglisteBereich{background:#fff;border:1px solid #ccc;color:#000;}
  .tz-wert,.ziffer{color:#000;}
}

/* Mitglieder: Lücke in der Tab-Leiste vermeiden */
body.nur-lesen .tabbar li:has(> .tabknopf[data-ziel="turnier"]){display:none;}

/* Darstellung-Umschalter */
.thema-segment button{font-size:15px;}
.bild-box img{display:block;width:100%;height:auto;border-radius:12px;}
.bild-box a.knopf{text-decoration:none;display:inline-flex;align-items:center;}

/* Schließen-Knopf als X */
.schliessen-x{
  flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--rand);background:var(--kachel-2);color:var(--text);
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
}
.schliessen-x:hover{background:var(--hover);}
.karten-overlay .schliessen-x{background:rgba(6,8,11,.7);border-color:#2A333D;color:#F3F5F7;}
[hidden]{display:none !important;}
.sprach-knopf{height:40px;padding:4px;background:var(--kachel-2);border:1px solid var(--rand);}
.sprach-knopf button{height:30px;color:var(--text-2);}
.sprach-knopf:hover button{color:var(--text);}
html[lang="de"] .sprach-knopf [data-l="de"],html[lang="en"] .sprach-knopf [data-l="en"],html[lang="fr"] .sprach-knopf [data-l="fr"]{background:var(--ball);color:var(--tinte);}
@media (max-width:430px){
  .leiste{padding:0 10px;gap:6px;}
  .logo{gap:6px;}
  .wortmarke{font-size:15px;}
  .kopf-rechts{gap:5px;}
  .sprach-knopf{height:36px;padding:2px;}
  .sprach-knopf button{height:30px;min-width:21px;padding:0 2px;font-size:11px;}
  .kopf-knopf{width:36px;height:36px;}
  .konto-knopf{height:36px;padding:0 10px;gap:5px;}
  .konto-knopf.an .konto-text{display:none;}   /* angemeldet: Kürzel reicht, damit die Kopfleiste passt */
}
@media (max-width:370px){
  .wortmarke{display:none;}   /* sehr schmale Handys: nur das Logo, damit alle Knöpfe Platz haben */
}

/* ============================================================
   14 · Regeln im Tafel-Stil
   Schläge als Sammelkarten zum Wischen, Regeln als Urteilskarten
   mit Entscheidung wie auf der Anzeigetafel.
============================================================ */
.regel-raster{gap:12px;}
.regel-kopf{padding:4px 4px 0;}
.regel-kopf .seiten-titel{margin:0 0 6px;}
.regel-unter{margin:0 0 12px;font:500 14px/1.45 var(--sys);color:var(--text-weich);}
.regel-legende{display:flex;flex-wrap:wrap;gap:6px;}

/* Kapitel-Sprungleiste, bleibt oben stehen */
.regel-sprung{
  position:sticky;top:52px;z-index:20;display:flex;gap:6px;overflow-x:auto;margin:0 -12px;padding:8px 12px;
  background:var(--grund);border-bottom:1px solid var(--linie);scrollbar-width:none;
}
.regel-sprung::-webkit-scrollbar{display:none;}
.regel-sprung a{
  flex:none;display:flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border-radius:999px;
  background:var(--kachel-2);border:1px solid var(--rand);color:var(--text);text-decoration:none;
  font:900 16px var(--anzeige);letter-spacing:.05em;
}
.regel-sprung a .ziffer{font-size:14px;color:var(--leucht);}
.regel-sprung a:hover{background:var(--hover);}

/* Kapitelköpfe */
.regel-abschnitt{display:flex;align-items:baseline;gap:10px;margin:22px 4px 0;scroll-margin-top:112px;}
.regel-abschnitt .ziffer{font-size:30px;line-height:1;color:var(--leucht);}
.regel-abschnitt h3{font:900 30px/1 var(--anzeige);letter-spacing:.03em;text-transform:uppercase;}

/* Urteile wie auf der Tafel */
.urteil{font:900 14px/1 var(--ziffer);letter-spacing:.06em;padding:7px 10px;border-radius:7px;margin:0;}
.urteil.ok{background:var(--hoch);color:var(--tinte);}
.urteil.nein{background:var(--runter);color:var(--tinte);}
.urteil.neutral{background:#5CC8FF;color:var(--tinte);}

/* Zeichnungen in beiden Darstellungen lesbar */
[data-ansicht="regeln"] .schlag svg [stroke="#10161C"]{stroke:var(--text);}
[data-ansicht="regeln"] .schlag svg [fill="#10161C"]{fill:var(--text);}
[data-ansicht="regeln"] .schlag svg [stroke="#E3E8E4"]{stroke:var(--rand);}
[data-ansicht="regeln"] .schlag svg [stroke="#55635C"]{stroke:var(--text-2);}
[data-ansicht="regeln"] .schlag svg [fill="#55635C"]{fill:var(--text-2);}
[data-ansicht="regeln"] .schlag svg [stroke="#1160CC"]{stroke:var(--blau-hell);}
[data-ansicht="regeln"] .schlag svg [fill="#1160CC"]{fill:var(--blau-hell);}
[data-ansicht="regeln"] .schlag svg [stroke="#0D9664"]{stroke:var(--hoch);}
[data-ansicht="regeln"] .schlag svg [fill="#0D9664"]{fill:var(--hoch);}
[data-ansicht="regeln"] .schlag svg [fill="#C4361F"]{fill:var(--runter);}

/* 01 · Grundschläge: Sammelkarten zum Wischen */
.schlag-streifen{display:flex;gap:12px;overflow-x:auto;margin:0 -12px;padding:4px 12px 10px;scroll-snap-type:x mandatory;scrollbar-width:none;}
.schlag-streifen::-webkit-scrollbar{display:none;}
.schlag-karte{
  flex:none;width:min(240px,68vw);scroll-snap-align:start;border-radius:20px;border:4px solid #fff;
  background:var(--farbe);color:var(--tinte);padding:14px;box-shadow:0 10px 22px rgba(0,0,0,.35);
}
.schlag-karte .marke{color:var(--tinte);}
.schlag-karte h2{font-size:34px;margin:2px 0 6px;color:var(--tinte);}
.schlag-karte p.leise{color:var(--tinte);opacity:.85;}
.schlag-karte svg{background:rgba(6,8,11,.12);border-radius:12px;padding:6px;}
[data-ansicht="regeln"] .schlag-karte svg [stroke]{stroke:var(--tinte);}
[data-ansicht="regeln"] .schlag-karte svg [fill]:not([fill="none"]){fill:var(--tinte);}
.wisch-hinweis{margin:-6px 4px 0;}

/* 02 und 03 · Urteilskarten */
.urteil-karte{
  grid-column:span 2;display:grid;grid-template-columns:104px 1fr;column-gap:14px;align-items:start;
  grid-template-areas:"bild marke" "bild titel" "bild urteil" "bild text";
  border-left:6px solid var(--hoch);padding:14px 14px 14px 12px;
}
.urteil-karte.urteil-nein{border-left-color:var(--runter);}
.urteil-karte.urteil-neutral{border-left-color:#5CC8FF;}
.urteil-karte svg{grid-area:bild;align-self:center;width:104px;margin:0;padding:6px;border-radius:12px;background:var(--tafel);border:1px solid var(--linie);}
.urteil-karte .marke{grid-area:marke;margin:0 0 2px;}
.urteil-karte h2{grid-area:titel;font-size:25px;margin:0 0 8px;}
.urteil-karte .urteil{grid-area:urteil;justify-self:start;margin-bottom:8px;}
.urteil-karte p.leise{grid-area:text;margin:0;}

/* Aufschlag- und Positions-Court als Tafel */
[data-ansicht="regeln"] .court-kachel{background:var(--tafel);border:2px solid var(--tafel-rand);padding:10px;}
[data-ansicht="regeln"] .court-kachel svg{border-radius:10px;}

/* 04 · Zählweise: Werte als Klappfelder */
.zaehl-karte .wertchips span{
  background:var(--kachel-2);border-top:1px solid var(--rand);border-radius:6px;
  font:900 20px var(--ziffer);padding:8px 10px;color:var(--text);
}
.zaehl-karte .wertchips span.stark{background:var(--ball);color:var(--tinte);border-color:var(--ball);font:900 18px var(--anzeige);letter-spacing:.04em;text-transform:uppercase;}
.zaehl-karte .wertchips span.gruen-chip{background:var(--hoch);color:var(--tinte);border-color:var(--hoch);font:900 18px var(--anzeige);text-transform:uppercase;}
.zaehl-karte h2,.format-karte h2{font-size:26px;}
.format-karte{border-top:6px solid var(--farbe);}
.format-karte .wertchips span.stark{background:var(--farbe);color:var(--tinte);font:900 17px var(--anzeige);letter-spacing:.04em;text-transform:uppercase;}

/* Positionsspiel-Text */
[data-ansicht="regeln"] .zeile b{font:900 20px var(--anzeige);letter-spacing:.03em;color:var(--text);}

/* 06 · Checkliste */
[data-ansicht="regeln"] .klapp > summary .marke{font:900 20px var(--anzeige);letter-spacing:.04em;color:var(--text);}
.check li.fertig::before{background:var(--ball);border-color:var(--ball);}

@media (prefers-reduced-motion:reduce){ .regel-sprung a{scroll-behavior:auto;} }
@media print{ .regel-sprung,.wisch-hinweis{display:none;} .schlag-streifen{flex-wrap:wrap;overflow:visible;} }
.regel-sprung a.an{background:var(--ball);border-color:var(--ball);color:var(--tinte);}
.regel-sprung a.an .ziffer{color:var(--tinte);}

/* Unterüberschriften und Minispiel-Hinweis auf den Karten */
.regel-unter{margin:18px 4px 6px;font:900 22px/1 var(--anzeige);letter-spacing:.04em;text-transform:uppercase;color:var(--text);}
.schlag-karte p.leise b{font-weight:800;}
.ms-hinweis{display:inline-block;margin:8px 0 0;padding:4px 8px;border-radius:8px;background:var(--tinte);color:var(--farbe);font:800 10.5px/1.3 var(--sys);letter-spacing:.06em;text-transform:uppercase;}

/* ============================================================
   15 · Mitspieler-Gesuche
   Jedes Gesuch ist eine kleine Anzeigetafel: Tag, Uhrzeit, freie Plätze.
============================================================ */
.seg-zahl{display:inline-block;min-width:18px;margin-left:4px;padding:1px 5px;border-radius:9px;background:var(--orange);color:var(--tinte);font:800 11px/16px var(--sys);}
.seg-zahl:empty{display:none;}
.gs-kopf{padding:4px 4px 0;}
.gs-kopf .seiten-titel{margin:0 0 6px;}

.gs-tafel{padding:18px 16px;text-align:left;}
.gs-tafel b{display:block;margin:4px 0 6px;font:900 26px/1.05 var(--anzeige);}
.gs-tafel p:not(.tafel-label){margin:0;font:500 14px/1.45 var(--sys);color:var(--text-weich);}
.gs-tafel .riesig{margin-top:6px;}

.gs-filter{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px;}
.gs-chip{background:var(--kachel-2);border-color:var(--rand);color:var(--text);min-height:40px;}
.gs-chip[aria-pressed="true"]{background:var(--ball);border-color:var(--ball);color:var(--tinte);}

.gs-karte{position:relative;margin:0 0 12px;padding:14px 14px 12px;border-radius:18px;background:var(--kachel);border:1px solid var(--linie);border-top:6px solid var(--farbe);}
.gs-karte.eigen{border-color:var(--ball);border-width:2px;border-top-width:6px;}
.gs-karte.blass{opacity:.6;}
.gs-label{display:inline-block;margin:0 0 8px;padding:4px 8px;border-radius:6px;background:var(--kachel-2);font:800 10.5px var(--sys);letter-spacing:.12em;color:var(--text-2);}
.gs-karte.eigen .gs-label{background:var(--ball);color:var(--tinte);}
.gs-zeit{display:flex;align-items:center;gap:12px;}
.gs-tag{display:flex;flex-direction:column;font:900 18px/1.05 var(--anzeige);letter-spacing:.04em;}
.gs-rel{font:800 10.5px var(--sys);letter-spacing:.12em;color:var(--orange-text);}
.gs-zeit > b{font-size:42px;line-height:1;color:var(--leucht);}
.gs-frei{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:4px;}
.gs-frei small{font:800 11px var(--sys);letter-spacing:.12em;color:var(--text-2);}
.gs-punkte{display:flex;gap:4px;}
.gs-punkte span{width:14px;height:14px;border-radius:50%;border:2px solid var(--ball);}
.gs-punkte span.voll{background:var(--ball);}
.gs-anlage{margin:10px 0 2px;font:900 24px/1.05 var(--anzeige);letter-spacing:.02em;}
.gs-ort{margin:0;font:600 13px var(--sys);color:var(--text-2);}
.gs-niveau{color:var(--text);font-weight:800;letter-spacing:.06em;}
.gs-text{margin:8px 0 0;font:500 14px/1.45 var(--sys);color:var(--text-weich);white-space:pre-line;}
.gs-fusszeile{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid var(--linie);}
.gs-person{flex:1;min-width:0;display:flex;align-items:center;gap:10px;}
.gs-person b{display:block;font:800 15px var(--sys);}
.gs-person small{display:block;font:600 11.5px var(--sys);color:var(--text-2);}
.gs-mehr{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--rand);background:var(--kachel-2);color:var(--text);font:900 20px/1 var(--sys);cursor:pointer;}
.gs-aktion{display:flex;align-items:center;gap:12px;margin-top:12px;}
.gs-aktion .haupt-aktion{width:100%;}
.gs-status{padding:8px 10px;border-radius:8px;background:var(--kachel-2);font:900 13px var(--ziffer);letter-spacing:.06em;}
.gs-status.wartet{background:var(--hinweis-chip);color:var(--hinweis-text);}
.gs-status.ok{background:var(--hoch);color:var(--tinte);}
.gs-zwischen{margin:14px 0 6px;}
.gs-anfrage{padding:10px;border-radius:12px;background:var(--kachel-2);margin-bottom:8px;}
.gs-anfrage.angenommen{background:var(--aktiv);}
.gs-anfrage .gs-person{margin-bottom:8px;}
.gs-ja-nein{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.gs-ja-nein .knopf{min-height:52px;}
.gs-hinweis{margin:8px 0 0;font:500 13px/1.4 var(--sys);color:var(--text-2);}
.gs-hinweis.ok{color:var(--hoch);font-weight:700;}
.kontakt-knopf{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:12px;background:var(--ball);color:var(--tinte);text-decoration:none;}
.kontakt-knopf .tafel-label{color:var(--tinte);}
.kontakt-knopf b{font:900 22px var(--anzeige);letter-spacing:.02em;word-break:break-all;}
.gs-fuss{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;margin-top:6px;}
.gs-fuss a.text-knopf{display:inline-flex;align-items:center;text-decoration:none;}

/* Formulare in den Sheets */
.sheet-kopf{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.sheet-kopf .marke{margin:0;}
#gesuchOverlay label,#spielprofilOverlay label,#gsMeldenOverlay label{margin:12px 0 6px;}
#gesuchOverlay select,#gesuchOverlay input[type=date],#gesuchOverlay input[type=time],#gesuchOverlay input[type=text],#spielprofilOverlay input[type=text],#spielprofilOverlay select{min-height:50px;border-radius:12px;}
#gesuchOverlay textarea,#gsMeldenOverlay textarea{min-height:0;font:500 15px/1.4 var(--sys);border-radius:12px;padding:10px;}
.gf-label{margin:14px 0 6px;}
.gf-label span{color:var(--leucht);}
.gf-niveau{display:grid;gap:4px;}
.gf-niveau input[type=range]{width:100%;accent-color:var(--ball);height:32px;}
.sp-niveaus{display:grid;gap:6px;}
.sp-niveaus button{display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 12px;border-radius:12px;border:2px solid var(--rand);background:var(--kachel-2);color:var(--text);text-align:left;font:inherit;cursor:pointer;}
.sp-niveaus button .ziffer{font-size:26px;width:24px;color:var(--leucht);}
.sp-niveaus button b{display:block;font:900 18px/1.1 var(--anzeige);}
.sp-niveaus button small{font:500 12.5px var(--sys);color:var(--text-2);}
.sp-niveaus button[aria-checked="true"]{border-color:var(--ball);background:var(--aktiv);}
.haken a{color:var(--leucht);}
.gm-gruende{display:grid;gap:6px;margin-top:10px;}
.gm-gruende button{min-height:46px;padding:0 14px;border-radius:12px;border:2px solid var(--rand);background:var(--kachel-2);color:var(--text);font:700 14px var(--sys);text-align:left;cursor:pointer;}
.gm-gruende button[aria-pressed="true"]{border-color:var(--runter);background:var(--fehler-bg);}

/* Courtfinder: Gesuche an der Anlage */
.cf-gesuche{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--rand);}
.cf-gs-zahl{border:0;border-radius:8px;padding:7px 10px;background:var(--orange);color:var(--tinte);font:800 13px var(--sys);cursor:pointer;min-height:36px;}
.cf-gs-zahl b{font-size:16px;margin-right:2px;}
#gsNeuKnopf{font-size:23px;}
#gsNeuKnopf .haupt-chip{white-space:nowrap;}

/* Profil: Pflicht und freiwillig */
.sp-teil{margin-top:16px;padding:14px;border-radius:16px;background:var(--tafel);border:1px solid var(--linie);}
.sp-titel{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 4px;font:900 22px/1.1 var(--anzeige);letter-spacing:.02em;}
.sp-titel .ziffer{font-size:20px;color:var(--leucht);}
.sp-marke{padding:3px 8px;border-radius:6px;background:var(--kachel-2);color:var(--text-2);font:800 10.5px var(--sys);letter-spacing:.1em;text-transform:uppercase;}
.sp-marke.pflicht{background:var(--ball);color:var(--tinte);}
.sp-wahl button{font-size:15px;}
.sp-klein button{font-size:14px;padding:7px 2px;}
.sp-wahl.gesperrt{opacity:.45;}
.sp-chips{display:flex;flex-wrap:wrap;gap:6px;}
.sp-chip{min-height:40px;padding:0 12px;border-radius:999px;border:2px solid var(--rand);background:var(--kachel-2);color:var(--text);font:700 13px var(--sys);cursor:pointer;}
.sp-chip[aria-pressed="true"]{background:var(--ball);border-color:var(--ball);color:var(--tinte);}
.sp-zeiten{display:grid;grid-template-columns:36px repeat(3,minmax(0,1fr));gap:4px;align-items:center;}
.sp-slot{text-align:center;font:700 11px var(--sys);color:var(--text-2);}
.sp-tag{font:800 13px var(--sys);}
.sp-zeit{height:34px;border-radius:8px;border:2px solid var(--rand);background:var(--kachel-2);cursor:pointer;}
.sp-zeit[aria-pressed="true"]{background:var(--ball);border-color:var(--ball);}
#spielprofilOverlay .haken{align-items:flex-start;}

/* Gesuche: freiwillige Angaben der Person, Markierungen */
.gs-person-block{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;}
.gs-merkmale{display:flex;flex-wrap:wrap;gap:4px;padding-left:42px;}
.gs-merkmale span{padding:3px 8px;border-radius:6px;background:var(--kachel-2);font:700 11px var(--sys);color:var(--text-weich);}
.gs-ueber{padding-left:42px;font:italic 500 13px/1.4 var(--sys);color:var(--text-weich);}
.gs-marken{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
.gs-marke{padding:4px 8px;border-radius:6px;font:800 10.5px var(--sys);letter-spacing:.1em;}
.gs-marke.heim{background:var(--ball);color:var(--tinte);}
.gs-marke.zeit{background:var(--blau);color:#fff;}
.chip.neutral{background:var(--kachel-2);color:var(--text);}
.kh-text{display:block;margin-top:6px;font:500 12.5px/1.4 var(--sys);color:var(--text-weich);}

/* Benachrichtigungen: Zeilen mit zwei Schaltern */
.b-zeile{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid var(--linie);}
.b-zeile:last-of-type{border-bottom:0;}
.b-text b{display:block;font:900 18px/1.1 var(--anzeige);letter-spacing:.02em;}
.b-text small{display:block;margin-top:2px;font:500 12px/1.35 var(--sys);color:var(--text-2);}
.schalter{display:flex;flex-direction:column;align-items:center;gap:4px;margin:0;cursor:pointer;font:700 11px var(--sys);color:var(--text-2);}
.schalter input{appearance:none;-webkit-appearance:none;width:48px;height:28px;border-radius:14px;background:var(--rand);position:relative;cursor:pointer;margin:0;transition:background .2s;}
.schalter input::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .2s;}
.schalter input:checked{background:var(--ball);}
.schalter input:checked::after{transform:translateX(20px);background:var(--tinte);}
.schalter input:disabled{opacity:.4;cursor:default;}
#spielprofilOverlay .schalter{margin:0;}

/* ============================================================
   16 · Minispiel „Glaswand“
============================================================ */
.spiel-bahn{padding-top:8px;}
.spiel-tafel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:10px 12px;margin-bottom:8px;}
.spiel-tafel > div{display:flex;flex-direction:column;align-items:center;}
.spiel-tafel b{font-size:34px;line-height:1.05;color:var(--leucht);}
.spiel-tafel b.gegner{color:var(--runter);}
.spiel-feld{position:relative;display:flex;justify-content:center;border-radius:18px;overflow:hidden;background:#06080B;border:2px solid #1C232B;
  touch-action:manipulation;-webkit-user-select:none;user-select:none;}
.spiel-feld canvas{display:block;cursor:pointer;}
.spiel-schicht{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;
  background:rgba(6,8,11,.86);color:#F3F5F7;text-align:center;}
.spiel-schicht .tafel-label{color:#9AA4AE;}
.ms-titel{margin:0;font:900 56px/1 var(--anzeige);letter-spacing:.04em;color:#D7FF1E;}
.ms-regeln{list-style:none;margin:6px 0;padding:0;display:grid;gap:8px;text-align:left;max-width:300px;}
.ms-regeln li{display:flex;gap:10px;font:500 14px/1.4 var(--sys);color:#C9D1D8;}
.ms-regeln .ziffer{font-size:20px;color:#D7FF1E;line-height:1.1;}
.ms-regeln b{color:#F3F5F7;}
.ms-best{margin:4px 0;font:800 12px var(--sys);letter-spacing:.14em;color:#9AA4AE;}
.ms-best b{font-size:24px;color:#D7FF1E;margin-left:6px;vertical-align:middle;}
.spiel-schicht .haupt-aktion{width:min(280px,100%);}
.spiel-schicht .text-knopf{color:#D7FF1E;}
.ms-endwert{font-size:96px;line-height:1;color:#D7FF1E;}
.ms-neu{margin:0;padding:6px 12px;border-radius:8px;background:#FF8A3D;color:#06080B;font:900 18px var(--anzeige);letter-spacing:.06em;animation:blinken 1.2s ease-in-out infinite;}
.ms-statistik{margin:0;font:600 13px var(--sys);color:#C9D1D8;}
.ms-hinweis{text-align:center;}

/* Startseite: Kachel zum Spiel */
.spiel-kachel{width:100%;display:flex;align-items:center;gap:14px;margin-top:14px;padding:12px;border-radius:16px;border:2px solid #1C232B;
  background:#06080B;color:#F3F5F7;text-align:left;cursor:pointer;font:inherit;}
.spiel-kachel:hover{border-color:#D7FF1E;}
.spiel-kachel-bild{position:relative;flex:none;width:76px;height:60px;border-radius:10px;background:linear-gradient(#06080B 72%,#0F5FD6 72%);overflow:hidden;}
.sk-glas{position:absolute;left:4px;top:10px;width:8px;height:34px;background:rgba(120,200,255,.3);border:1px solid rgba(160,220,255,.6);}
.sk-ball{position:absolute;width:10px;height:10px;border-radius:50%;background:#D7FF1E;left:14px;top:24px;animation:skball 1.6s ease-in-out infinite alternate;}
@keyframes skball{0%{transform:translate(0,0);}50%{transform:translate(26px,-16px);}100%{transform:translate(52px,10px);}}
.spiel-kachel-text{flex:1;min-width:0;}
.spiel-kachel-text .tafel-label{color:#9AA4AE;}
.spiel-kachel-text b{display:block;font:900 26px/1 var(--anzeige);letter-spacing:.04em;color:#D7FF1E;}
.spiel-kachel-text > span:last-child{display:block;margin-top:2px;font:600 12.5px var(--sys);color:#C9D1D8;}
.spiel-kachel-pfeil{font-size:22px;color:#D7FF1E;}
@media (prefers-reduced-motion:reduce){ .sk-ball,.ms-neu{animation:none;} }
.spiel-schicht .haupt-aktion{justify-content:center;}
.ms-regeln li > span:last-child{flex:1;}
.ms-platz{margin:0;padding:6px 12px;border-radius:8px;background:#0F5FD6;color:#fff;font:900 18px var(--anzeige);letter-spacing:.04em;}
.ms-rangliste{margin-top:8px;}
.ms-rangliste .segment{margin:10px 0;}
.ms-liste{background:var(--tafel);border:2px solid var(--tafel-rand);border-radius:16px;padding:6px;}
.ms-liste li.abstand{margin-top:12px;position:relative;}
.ms-liste li.abstand::before{content:"···";position:absolute;top:-13px;left:22px;color:var(--text-2);font:900 14px var(--sys);}
.ms-liste .tafel-zeile{cursor:default;}
.ms-sichtbar{margin-top:10px;}
.spiel-schicht{gap:8px;padding:14px;overflow-y:auto;justify-content:safe center;}
#msEnde .ms-endwert{font-size:72px;}
#msEnde .haupt-aktion{min-height:56px;}
.ms-platz{font-size:16px;}
#msStart .ms-titel{font-size:48px;}
#msStart .ms-regeln{gap:6px;margin:2px 0;}
#msStart .ms-regeln li{font-size:13.5px;line-height:1.35;}
#msStart .haupt-aktion{min-height:56px;}
#msStart .ms-best{margin:0;}

/* Spielklassen: drei Karten, der Kreis zeigt die Größe der Schlagzone */
.ms-klassen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:min(310px,100%);margin:2px 0 0;}
.ms-klasse{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px 6px;border-radius:12px;border:2px solid #232C36;
  background:rgba(12,16,21,.9);color:#C9D1D8;font:inherit;cursor:pointer;transition:border-color .15s,background .15s,transform .15s;}
.ms-klasse .ms-kreis{display:grid;place-items:center;width:30px;height:30px;}
.ms-klasse .ms-kreis::before{content:"";grid-area:1/1;width:var(--kreis);height:var(--kreis);border-radius:50%;border:2px dashed var(--farbe);opacity:.55;}
.ms-klasse .ms-kreis svg{grid-area:1/1;color:#9AA4AE;}
.ms-klasse b{font:900 18px/1 var(--anzeige);letter-spacing:.06em;color:#F3F5F7;}
.ms-klasse small{font:700 11px var(--sys);color:#9AA4AE;letter-spacing:.02em;}
.ms-klasse[aria-checked="true"]{border-color:var(--farbe);background:color-mix(in srgb,var(--farbe) 14%,#0A0E12);box-shadow:0 0 16px color-mix(in srgb,var(--farbe) 35%,transparent);transform:translateY(-1px);}
.ms-klasse[aria-checked="true"] .ms-kreis::before{border-style:solid;opacity:1;box-shadow:0 0 8px var(--farbe);}
.ms-klasse[aria-checked="true"] b{color:var(--farbe);}
.ms-klasse.zu{opacity:.55;cursor:not-allowed;}
.ms-klasse.zu .ms-kreis::before{opacity:.25;}
.ms-klasse:focus-visible{outline:2px solid #F3F5F7;outline-offset:2px;}
.ms-klasse-info{margin:0;min-height:1.3em;font:700 12.5px/1.3 var(--sys);color:var(--farbe,#D7FF1E);max-width:310px;}
.ms-frei{margin:0;padding:6px 12px;border-radius:8px;background:var(--farbe,#5CC8FF);color:#06080B;font:900 18px var(--anzeige);letter-spacing:.06em;}
#msStart .ms-titel{font-size:44px;}
#msStart{gap:7px;}
.ms-wertung{margin:10px 0 0;}
.ms-wertung + .segment{margin-top:6px;}
@media (prefers-reduced-motion:reduce){ .ms-klasse{transition:none;} }
.spiel-schicht > *{flex-shrink:0;}
/* Stufen-Punkte auf den Klassenkarten */
.ms-pips{display:flex;gap:3px;margin:2px 0 1px;}
.ms-pips i{width:7px;height:7px;border-radius:2px;background:#232C36;}
.ms-pips i.voll{background:var(--farbe);}
.ms-pips i.jetzt{background:transparent;box-shadow:inset 0 0 0 1.5px var(--farbe);}
.ms-klasse.meister small::after{content:" ✓";color:var(--farbe);}
.ms-regeln b.ms-trick{color:#FF8A3D;}
#msStart .ms-titel{font-size:40px;}
#msStart .ms-regeln{gap:4px;}
#msStart .ms-regeln li{font-size:13px;line-height:1.3;}
#msStart .ms-regeln .ziffer{font-size:17px;}
#msStart #msTon{position:absolute;top:6px;right:8px;min-height:32px;padding:4px 8px;font-size:12px;color:#9AA4AE;}
#msStart #msTon[aria-pressed="true"]{color:#D7FF1E;}
/* Einmaliger Erklärhinweis zum Trickshot */
.ms-tipp{background:rgba(6,8,11,.9);z-index:2;}
.ms-tipp-bogen{position:relative;width:74px;height:74px;border-radius:50%;border:3px solid #FF8A3D;display:grid;place-items:center;
  box-shadow:0 0 22px rgba(255,138,61,.55);animation:tippPuls 1s ease-in-out infinite;}
.ms-tipp-bogen span{font:900 26px var(--anzeige);color:#FF8A3D;}
@keyframes tippPuls{50%{transform:scale(1.08);box-shadow:0 0 34px rgba(255,138,61,.8);}}
.ms-tipp-titel{margin:0;font:900 34px/1 var(--anzeige);letter-spacing:.05em;color:#FF8A3D;}
.ms-tipp-text{margin:0;max-width:290px;font:500 14px/1.45 var(--sys);color:#C9D1D8;}
.ms-tipp-text b{color:#F3F5F7;}
.ms-tipp-klein{margin:0;font:600 12px var(--sys);color:#9AA4AE;}
@media (prefers-reduced-motion:reduce){ .ms-tipp-bogen{animation:none;} }

/* ============ Querformat: breite Bühne, Vollbild am Handy, Dreh-Hinweis im Hochformat ============ */
.spiel-bahn{max-width:980px;}
/* Spielstand steht auf der Anzeigetafel im Canvas; die DOM-Tafel bleibt nur für Screenreader */
.spiel-tafel{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:0;padding:0;border:0;}
.spiel-schicht.ms-zwei{flex-direction:row;align-items:center;justify-content:center;gap:26px;padding:12px 18px;}
.ms-spalte{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;max-width:330px;flex:0 1 auto;}
.ms-rechts{align-items:flex-start;}
.ms-rechts .ms-best{align-self:flex-start;margin-top:4px;}
#msStart .haupt-aktion,#msEnde .haupt-aktion{min-height:50px;width:min(300px,100%);}
#msEnde .ms-endwert{font-size:64px;}
#msEnde .ms-spalte{gap:6px;}
#msTipp .ms-spalte:last-child{align-items:flex-start;text-align:left;}
#msPause{gap:14px;}
.ms-zu{display:none;}
body.ms-voll{overflow:hidden;}
body.ms-voll .leiste,body.ms-voll .tabbar,body.ms-voll .demo-band,body.ms-voll .ms-hinweis,body.ms-voll .ms-rangliste{display:none !important;}
body.ms-voll .spiel-feld{position:fixed;inset:0;z-index:60;border-radius:0;border:0;align-items:center;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);}
body.ms-voll .ms-zu{display:grid;place-items:center;position:absolute;z-index:4;top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));
  width:40px;height:40px;border-radius:12px;border:2px solid #232C36;background:rgba(6,8,11,.8);color:#F3F5F7;cursor:pointer;}
body.ms-voll #msStart #msTon{top:max(6px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));}
/* Hochformat am Handy: Karte statt Spielfeld */
.ms-drehen-karte{display:none;}
body.ms-drehen .spiel-feld,body.ms-drehen .ms-hinweis{display:none;}
body.ms-drehen .ms-drehen-karte{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:26px 20px 22px;border-radius:18px;
  background:#06080B;border:2px solid #1C232B;color:#C9D1D8;font:500 14px/1.45 var(--sys);}
.ms-drehen-karte p{margin:0;max-width:300px;}
.ms-handy{width:46px;height:76px;border-radius:10px;border:3px solid #D7FF1E;position:relative;margin:6px 0 8px;animation:handyDreh 2.4s ease-in-out infinite;
  box-shadow:0 0 18px rgba(215,255,30,.35);}
.ms-handy span{position:absolute;left:50%;bottom:5px;width:12px;height:3px;margin-left:-6px;border-radius:2px;background:#D7FF1E;}
@keyframes handyDreh{0%,25%{transform:rotate(0);}55%,85%{transform:rotate(-90deg);}100%{transform:rotate(0);}}
@media (prefers-reduced-motion:reduce){ .ms-handy{animation:none;transform:rotate(-90deg);} }
body.ms-voll .ansicht{animation:none !important;transform:none !important;}
.ms-rangliste{max-width:560px;margin-left:auto;margin-right:auto;}

/* Zwei-Daumen-Schläge: links Gefühl (violett), rechts Angriff (orange) */
.ms-l{color:#C77DFF;} .ms-r{color:#FF8A3D;}
.ms-schlaege{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 0;}
.ms-schlaege:empty{display:none;}
.ms-chip{padding:3px 8px;border-radius:999px;font:800 11px/1.2 var(--anzeige);letter-spacing:.05em;border:1px solid currentColor;}
.ms-chip.l{color:#C77DFF;} .ms-chip.r{color:#FF8A3D;}
.ms-skill{display:grid;gap:4px;margin:0;max-width:300px;font:500 12.5px/1.4 var(--sys);color:#C9D1D8;text-align:left;}
.ms-skill-kopf{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;color:var(--farbe);}
.ms-skill-kopf span{font:800 11px var(--sys);letter-spacing:.08em;}
.ms-skill-kopf b{font:900 20px/1 var(--anzeige);letter-spacing:.04em;}
.ms-skill-kopf small{font:600 11px var(--sys);color:#9AA4AE;}

/* ============ Verwaltung (/verwaltung/) – Leitstand im Anzeigetafel-Stil ============ */
.verwaltung .leiste{gap:10px;}
.vw-chip{margin-right:auto;padding:4px 10px;border-radius:999px;background:#FF5C8A;color:#06080B;font:900 13px var(--anzeige);letter-spacing:.08em;}
.vw-bahn{max-width:980px;margin:0 auto;padding:14px 16px 60px;}
.vw-status{margin:4px 0 12px;font:600 13px var(--sys);color:var(--text-2);}
.vw-sperre{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:22px;border-radius:18px;background:#06080B;border:2px solid #1C232B;color:#C9D1D8;}
.vw-sperre-titel{margin:0;font:900 30px/1 var(--anzeige);letter-spacing:.05em;color:#FF5C8A;}
.vw-sperre p{margin:0;max-width:520px;}
.vw-zeile{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;}
.vw-reiter{margin:0 0 14px;}
.vw-reiter .vw-zahl{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:4px;padding:0 5px;border-radius:9px;background:#FF5C8A;color:#06080B;font:800 11px var(--sys);}
.vw-reiter .vw-zahl:empty{display:none;}
.vw-tafel{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}
.vw-kachel{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px;border-radius:14px;border:2px solid #1C232B;background:#06080B;color:#F3F5F7;text-align:left;font:inherit;}
button.vw-kachel{cursor:pointer;}
.vw-kachel .vw-wert{font:900 38px/1 "Doto",monospace;color:var(--farbe);text-shadow:0 0 12px color-mix(in srgb,var(--farbe) 55%,transparent);}
.vw-kachel .vw-label{font:800 11px var(--sys);letter-spacing:.08em;color:#9AA4AE;}
.vw-kachel.dringend{border-color:var(--farbe);background:color-mix(in srgb,var(--farbe) 10%,#06080B);}
.vw-kachel:first-child,.vw-kachel:nth-child(2){grid-column:span 2;}
.vw-titel{margin:22px 0 8px;font:900 18px var(--anzeige);letter-spacing:.08em;color:var(--text-2);}
.vw-protokoll{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;}
.vw-protokoll li{display:grid;grid-template-columns:110px 150px 1fr auto;gap:8px;align-items:baseline;padding:7px 10px;border-radius:8px;background:var(--tafel);font:500 13px var(--sys);}
.vw-protokoll .vw-zeit{font:700 12px "Doto",monospace;color:#9AA4AE;}
.vw-protokoll small{color:var(--text-2);}
.vw-karte{padding:14px;border-radius:14px;background:var(--tafel);border:1px solid var(--linie);margin:0 0 10px;}
.vw-karte p{margin:0 0 6px;}
.vw-karte-kopf{font:600 12px var(--sys);color:var(--text-2);}
.vw-art{display:inline-block;padding:2px 8px;border-radius:6px;font:900 12px var(--anzeige);letter-spacing:.06em;color:#06080B;background:#9AA4AE;}
.vw-art.gesuch{background:#FFB020;} .vw-art.nutzer{background:#FF5C8A;} .vw-art.court{background:#FF8A3D;} .vw-art.admin{background:#D7FF1E;} .vw-art.gesperrt{background:#FF7A6B;}
.vw-liste{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;}
.vw-liste li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:10px;background:var(--tafel);border:1px solid var(--linie);}
.vw-liste li.gesperrt{opacity:.7;}
.vw-liste small{color:var(--text-2);}
.knopf.warn{background:#FF5C8A;color:#06080B;border-color:#FF5C8A;}
.leer{color:var(--text-2);}
@media (max-width:620px){
  .vw-protokoll li{grid-template-columns:1fr;gap:2px;}
  .vw-kachel:first-child,.vw-kachel:nth-child(2){grid-column:span 1;}
}
.vw-protokoll li.leer{display:block;}

/* ---- Anlagen ---- */
.vw-quelle{font:600 12px var(--sys);letter-spacing:0;color:#FF8A3D;}
.vw-werkzeug{display:flex;gap:8px;align-items:center;}
.vw-werkzeug input{flex:1;min-width:0;}
.vw-werkzeug .knopf{white-space:nowrap;}
.vw-filter{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px;}
.vw-filter button{border:2px solid #1C232B;background:#06080B;color:#C9D1D8;border-radius:999px;padding:5px 12px;font:700 12.5px var(--sys);cursor:pointer;}
.vw-filter button b{font:900 13px "Doto",monospace;margin-left:3px;}
.vw-filter button[aria-pressed="true"]{border-color:var(--f);color:var(--f);background:color-mix(in srgb,var(--f) 12%,#06080B);}
.vw-filter .f-alle{--f:#D7FF1E;} .vw-filter .f-entwurf{--f:#FF8A3D;} .vw-filter .f-pruefen{--f:#FFB020;} .vw-filter .f-beispiel{--f:#9AA4AE;}
.vw-anlagen{list-style:none;margin:8px 0 12px;padding:0;display:flex;flex-direction:column;gap:6px;}
.vw-anlagen button{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--tafel);border:1px solid var(--linie);color:var(--text);font:inherit;text-align:left;cursor:pointer;}
.vw-anlagen button:hover{border-color:#D7FF1E;}
.vw-anlagen b{display:block;font-weight:700;}
.vw-anlagen small{color:var(--text-2);font-size:12px;}
.vw-pfeil{font-size:22px;color:var(--text-2);}
.vw-st{display:inline-block;min-width:64px;text-align:center;padding:3px 7px;border-radius:6px;font:900 11.5px var(--anzeige);letter-spacing:.06em;color:#06080B;background:#3DDC97;}
.vw-st.entwurf{background:#FF8A3D;} .vw-st.pruefen{background:#FFB020;} .vw-st.beispiel{background:#9AA4AE;}
.vw-link{border:0;background:none;padding:0;color:var(--blau-hell,#5CC8FF);font:inherit;text-decoration:underline;cursor:pointer;}

.vw-form{max-width:720px;}
.vw-form-kopf{display:flex;justify-content:space-between;align-items:center;}
.vw-form-titel{margin:10px 0 6px;font:900 26px/1.1 var(--anzeige);letter-spacing:.02em;}
.vw-hinweise p{margin:0 0 6px;padding:8px 10px;border-radius:8px;background:color-mix(in srgb,#FFB020 14%,var(--tafel));border-left:4px solid #FFB020;font-size:13px;}
.vw-form fieldset{margin:12px 0 0;padding:12px;border:1px solid var(--linie);border-radius:14px;background:var(--tafel);}
.vw-form legend{padding:0 6px;font:900 13px var(--anzeige);letter-spacing:.08em;color:#D7FF1E;}
.vw-raster{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.vw-feld.breit{grid-column:1/-1;}
.vw-feld input,.vw-feld textarea{width:100%;}
.vw-form textarea{min-height:76px;margin:0;font:inherit;font-size:14px;}
.vw-form [aria-invalid="true"]{border-color:#FF5C8A;box-shadow:0 0 0 2px #FF5C8A55;}
.vw-chips{display:flex;flex-wrap:wrap;gap:6px;}
.vw-chip-a{border:1px solid var(--linie);background:var(--feld,#fff);color:var(--text);border-radius:999px;padding:6px 11px;font:600 12.5px var(--sys);cursor:pointer;}
.vw-chip-a[aria-pressed="true"]{background:#3DDC97;border-color:#3DDC97;color:#06080B;}
.vw-chip-a.eigen{border-style:dashed;}
.vw-treffer{display:block;width:100%;margin:6px 0 0;padding:8px 10px;border-radius:8px;border:1px solid var(--linie);background:var(--feld,#fff);color:var(--text);font:13px var(--sys);text-align:left;cursor:pointer;}
.vw-treffer b{font-family:"Doto",monospace;margin-right:4px;}
.vw-formfehler{flex-basis:100%;margin:0;padding:10px 12px;border-radius:10px;background:#FF5C8A22;border:1px solid #FF5C8A;font-weight:600;}
.vw-aktionen{position:sticky;bottom:0;display:flex;flex-wrap:wrap;gap:8px;margin:14px -4px 0;padding:10px 4px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--grund) 30%);}
.vw-aktionen .knopf.warn{margin-left:auto;}
@media (max-width:620px){
  .vw-werkzeug{flex-wrap:wrap;}
  .vw-werkzeug input{flex-basis:100%;}
}


/* Glaswand: öffentlicher Nickname und ewige Bestenliste (2026-11) */
.ms-konto-nick{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--tafel, #141c22);border:1px solid var(--tafel-rand, #303c45);border-radius:13px;padding:12px 14px;margin:14px 0;}
.ms-konto-nick span{display:flex;flex-direction:column;gap:3px;min-width:0;}
.ms-konto-nick b{overflow-wrap:anywhere;font-size:16px;}
.ms-konto-nick small{font-weight:700;font-size:10px;letter-spacing:.07em;color:var(--neben, #a3adb7);}
.ms-nickname-zeile{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin:12px 0 8px;font-size:13px;}
.ms-nickname-zeile span{overflow-wrap:anywhere;}
.ms-gast-hinweis{margin:15px 0 7px;padding:16px;border:1px solid var(--tafel-rand, #303c45);border-radius:13px;background:var(--tafel, #141c22);}
.ms-gast-hinweis p{font-size:13px;line-height:1.5;margin:7px 0 12px;}
#spNickname{width:100%;max-width:420px;}
@media(max-width:420px){.ms-konto-nick{flex-wrap:wrap;}.ms-nickname-zeile{align-items:flex-start;flex-direction:column;}}

/* Glaswand: eigene Position in der ewigen Rangliste im Konto */
.ms-konto-rang { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--linie, #484b51); border-radius: 10px; font-size: .86rem; line-height: 1.45; }

/* Kontoaktionen – nur in der bestehenden Kopfzeile; Padel-Club-Design bleibt erhalten.
   Desktop: dezenter Textlink + sekundäre Konturaktion.
   Mobil: wie bisher ein Konto-Einstieg; Registrierung im vorhandenen Konto-Dialog.
   Weder .leiste noch .kopf-rechts werden in Höhe oder Umbruch verändert. */
#kontoKnopf:not(.an){
  flex:none;max-width:none;background:transparent;border-color:transparent;
  padding:0 8px;color:var(--text);
}
#kontoKnopf:not(.an):hover{background:var(--hover);}
.registrieren-knopf{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  height:40px;padding:0 12px;border-radius:10px;
  border:1px solid var(--rand);background:var(--kachel-2);color:var(--leucht);
  font:600 13px var(--sys);white-space:nowrap;cursor:pointer;
}
.registrieren-knopf:hover{background:var(--hover);}
#kontoKnopf:focus-visible,#registrierKnopf:focus-visible{
  outline:2px solid var(--ball);outline-offset:2px;
}
/* Kontoformulare nutzen die vorhandenen Komponenten. */
.k-neben{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:8px;}
.k-neben .k-bleiben{margin:0;}
.k-neben .text-knopf{font-size:13px;}
.k-trenner{display:flex;align-items:center;gap:12px;margin:18px 0 4px;color:var(--text-2);font:700 12px var(--sys);}
.k-trenner::before,.k-trenner::after{content:'';height:1px;background:var(--rand);flex:1;}
#kontoInhalt input[type=password]{min-height:52px;font-size:17px;border-radius:12px;}
/* Sobald der Kopf eng wird, nicht den ganzen Header umbrechen.
   Der unveränderte Konto-Knopf öffnet den Login mit Registrierungslink. */
@media(max-width:900px){
  #registrierKnopf{display:none!important;}
  #kontoKnopf:not(.an){
    background:var(--kachel-2);border-color:var(--rand);
    padding:0 10px;max-width:46vw;
  }
}
@media(max-width:430px){
  #kontoKnopf:not(.an){padding:0 8px;}
}