/* Spieltag-Zentrale – Gestaltung nach Markenbuch ThSV Eisenach
   Primär: ThSV-Blau #0060AF, Rein-Weiß · Sekundär: Nachthimmel-Blau #002559, Eisen-Grau #E7E8E9
   Akzent: Motor-Rot #ED1A34 (nur Akzent – hier für Alarme) · Hausschrift: GT America */

/* Hausschrift laut Markenbuch: GT America (Expanded Black für Überschriften, Regular für Text).
   GT America ist lizenzpflichtig (Grilli Type) – die Webfont-Dateien (woff2) nach public/fonts/ legen,
   dann wird sie überall automatisch benutzt (auch auf den Druckbögen).
   Bis dahin: Archivo (freie Schrift, gleiche Groteskform, mit „Expanded“-Breite) als Ersatz, falls vorhanden. */
@font-face { font-family: "GT America Expanded"; font-weight: 900; src: local("GT America Expanded Black"), local("GTAmerica-ExpandedBlack"), url("/fonts/GT-America-Expanded-Black.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "GT America"; font-weight: 400; src: local("GT America Regular"), local("GTAmerica-Regular"), url("/fonts/GT-America-Standard-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "GT America"; font-weight: 900; src: local("GT America Black"), local("GTAmerica-Black"), url("/fonts/GT-America-Standard-Black.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Archivo"; font-weight: 100 900; font-stretch: 62% 125%; src: url("/fonts/Archivo-Variable.ttf") format("truetype-variations"), url("/fonts/Archivo-Variable.ttf") format("truetype"); font-display: swap; }

:root {
  --brand: #0060AF;
  --night: #002559;
  --bg: #00122d;
  --panel: #031c40;
  --panel-2: #072650;
  --line: #17365f;
  --text: #ffffff;
  --muted: #a9b8cc;
  --grey: #E7E8E9;
  --red: #ED1A34;
  --red-dark: #9E061C;
  --ok: #2fbf71;
  --warn: #f5a524;
  --radius: 10px;
  --font: "GT America", "Archivo", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-head: "GT America Expanded", "Archivo", "Arial Black", "Segoe UI Black", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { overflow-anchor: none; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.4; }
body { min-height: 100vh; -webkit-font-smoothing: antialiased; overflow-anchor: none; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.hidden { display: none !important; }
h1, h2, h3 { font-family: var(--font-head); font-stretch: 125%; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; margin: 0; line-height: 1.1; }
h2 { font-size: 18px; }
h3 { font-size: 14px; }

/* aufstrebende Streifen (Formgebung lt. Markenbuch) */
.stripes { position: relative; overflow: hidden; }
.stripes::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .14;
  background: repeating-linear-gradient(-62deg, transparent 0 46px, var(--brand) 46px 70px);
  mask-image: linear-gradient(90deg, transparent 35%, #000 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 100%);
}
.stripes > * { position: relative; }

/* ---------- Buttons & Formulare */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  border-radius: 8px; padding: 8px 14px; cursor: pointer; font-weight: 600; white-space: nowrap;
  min-height: 38px; text-decoration: none;
}
.btn:hover { border-color: #2d5488; background: #0b2f60; }
.btn:focus-visible, .chip:focus-visible, .check:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.btn.primary { background: var(--brand); border-color: var(--brand); }
.btn.primary:hover { filter: brightness(1.12); }
.btn.danger { background: transparent; border-color: #6d1a28; color: #ff8e9c; }
.btn.danger:hover { background: #3a0c15; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--panel-2); }
.btn.sm { padding: 4px 10px; min-height: 30px; font-size: 13px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

label.field { display: block; margin-bottom: 14px; }
label.field > span { display: block; font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .04em; }
label.field > small { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }
input[type=text], input[type=password], input[type=date], input[type=time], input[type=number], select, textarea {
  width: 100%; background: #001029; border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; min-height: 40px;
}
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,96,175,.35); }
input[type=color] { width: 48px; height: 38px; padding: 2px; background: #001029; border: 1px solid var(--line); border-radius: 8px; }
.check-line { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; cursor: pointer; }
.check-line input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand); flex-shrink: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 14px; }
@media (max-width: 560px) { .grid2, .grid3 { grid-template-columns: 1fr; } }

/* ---------- Kopfzeile */
.topbar {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 14px;
  background: var(--night); border-bottom: 3px solid var(--brand); padding: 8px 16px; min-height: 60px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.brand .logo-wrap { width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; overflow: hidden; }
.brand img { width: 36px; height: 36px; object-fit: contain; }
.brand b { font-family: var(--font-head); font-stretch: 125%; font-size: 14px; text-transform: uppercase; letter-spacing: .03em; display: block; line-height: 1.05; }
.brand small { color: var(--muted); font-size: 11.5px; display: block; }
.nav { display: flex; gap: 2px; overflow-x: auto; flex: 1; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { text-decoration: none; padding: 8px 12px; border-radius: 8px; color: var(--muted); font-weight: 700; white-space: nowrap; font-size: 14px; }
.nav a:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav a.on { color: #fff; background: var(--brand); }
.top-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.conn { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(47,191,113,.2); }
.conn.off { background: var(--red); box-shadow: 0 0 0 3px rgba(237,26,52,.25); animation: blink 1s infinite; }
.userbtn { display: flex; align-items: center; gap: 8px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--brand); display: grid; place-items: center; font-weight: 800; font-size: 13px; }
@media (max-width: 860px) {
  .topbar { flex-wrap: wrap; padding: 8px 12px; gap: 8px; }
  .brand small, .userbtn .uname { display: none; }
  .nav { order: 3; flex-basis: 100%; }
}

/* ---------- Seite */
main { padding: 16px; max-width: 1400px; margin: 0 auto; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.panel-pad { padding: 16px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 0 10px; flex-wrap: wrap; }
.row-gap { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.empty { text-align: center; padding: 50px 20px; color: var(--muted); }
.empty h2 { color: #fff; margin-bottom: 8px; }

/* ---------- Alarmleiste */
#alarms { position: sticky; top: 63px; z-index: 35; }
.alarm {
  display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; padding: 6px 16px;
  background: var(--red); color: #fff; border-bottom: 1px solid var(--red-dark); animation: pulse 1.2s infinite;
}
.alarm .a-icon { font-size: 18px; }
.alarm .a-text { flex: 1; min-width: 200px; font-size: 14px; }
.alarm .a-text b { font-family: var(--font-head); font-stretch: 125%; text-transform: uppercase; font-size: 11.5px; letter-spacing: .04em; margin-right: 8px; }
.alarm .btn.sm { min-height: 28px; padding: 3px 10px; }
.disp-alarms .alarm .a-text b { display: block; }
.alarm .btn { background: #fff; color: var(--red-dark); border-color: #fff; }
.alarm .btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.audio-hint { background: var(--warn); color: #1d1300; padding: 5px 16px; font-size: 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-weight: 600; }
.audio-hint .btn { background: #1d1300; color: #fff; border-color: #1d1300; }
@keyframes pulse { 0%,100% { background: var(--red); } 50% { background: var(--red-dark); } }
@keyframes blink { 50% { opacity: .35; } }
@media (max-width: 860px) { #alarms { top: 0; position: relative; } }

/* ---------- Uhr-Leiste */
.clockbar { display: grid; grid-template-columns: 1.3fr auto auto; gap: 16px; align-items: center; padding: 16px 20px; margin-bottom: 14px; }
.clockbar .ev-title { font-family: var(--font-head); font-stretch: 125%; font-size: 22px; text-transform: uppercase; line-height: 1.05; }
.clockbar .ev-sub { color: var(--muted); margin-top: 4px; }
.bigclock { font-family: var(--font-head); font-stretch: 125%; font-size: 46px; line-height: 1; letter-spacing: .01em; }
.tcount { text-align: right; }
.tcount .lbl { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.tcount .val { font-family: var(--font-head); font-stretch: 125%; font-size: 30px; line-height: 1.05; }
.delay-badge { display: inline-block; margin-top: 6px; background: var(--warn); color: #1d1300; font-weight: 800; padding: 2px 8px; border-radius: 6px; font-size: 12.5px; }
.delay-ctrl { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 12px; }
.delay-ctrl .lbl { color: var(--muted); font-size: 13px; margin-right: 4px; }
@media (max-width: 760px) {
  .clockbar { grid-template-columns: 1fr 1fr; padding: 14px; }
  .clockbar .ev { grid-column: 1 / -1; }
  .bigclock { font-size: 34px; }
  .tcount .val { font-size: 24px; }
}

/* ---------- Jetzt / Nächstes */
.nownext { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.nn { padding: 14px 16px; border-left: 5px solid var(--brand); min-height: 92px; }
.nn .lbl { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: var(--muted); }
.nn .t { font-weight: 800; font-size: 17px; margin: 4px 0 2px; }
.nn .c { font-family: var(--font-head); font-stretch: 125%; font-size: 22px; }
.nn.must { border-left-color: var(--red); }
.nn.prog { border-left-color: var(--ok); }
.bar { height: 8px; background: #001029; border-radius: 6px; overflow: hidden; margin-top: 8px; }
.bar i { display: block; height: 100%; background: var(--ok); width: 0; transition: width .4s; }
@media (max-width: 760px) { .nownext { grid-template-columns: 1fr; } .nn { min-height: 0; } }

/* ---------- Filter */
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); font-size: 13px; font-weight: 600; color: var(--muted);
}
.chip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--brand)); }
.chip.on { color: #fff; border-color: var(--c, var(--brand)); background: color-mix(in srgb, var(--c, var(--brand)) 22%, var(--panel)); }
.toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); cursor: pointer; padding: 6px 4px; font-weight: 600; }
.toggle input { accent-color: var(--brand); width: 16px; height: 16px; }
.sep { width: 1px; height: 24px; background: var(--line); margin: 0 4px; flex-shrink: 0; }
@media (max-width: 760px) {
  .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 12px; padding: 0 16px; }
  .filters::-webkit-scrollbar { display: none; }
  .filters > * { flex-shrink: 0; }
  .legend { display: none; }
}

/* ---------- Legende */
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin: 0 0 12px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* ---------- Ablaufliste */
.list { display: flex; flex-direction: column; gap: 6px; }
.row {
  display: grid; grid-template-columns: 92px 1fr 190px 128px; gap: 12px; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-left: 5px solid var(--area, var(--line));
  border-radius: 9px; padding: 10px 12px; transition: background .2s, border-color .2s;
}
.row .r-time b { font-family: var(--font-head); font-stretch: 125%; font-size: 18px; display: block; line-height: 1.1; }
.row .r-time small { color: var(--muted); font-size: 12px; }
.row .r-title { font-weight: 700; font-size: 15.5px; cursor: pointer; }
.row .r-title:hover { text-decoration: underline; text-decoration-color: var(--muted); }
.row .r-meta { color: var(--muted); font-size: 12.5px; margin-top: 3px; display: flex; gap: 6px 12px; flex-wrap: wrap; }
.row .r-meta .area { color: var(--area); font-weight: 700; }
.row .r-state { font-size: 13.5px; font-weight: 700; text-align: right; }
.row .r-action { display: flex; justify-content: flex-end; }
.row .bar { margin-top: 6px; height: 5px; }
.row.k-milestone { background: linear-gradient(90deg, rgba(0,96,175,.38), var(--panel) 70%); }
.row.k-milestone .r-title { font-family: var(--font-head); font-stretch: 125%; text-transform: uppercase; letter-spacing: .03em; }
.row.k-cue .r-title::before { content: "▶ "; color: var(--muted); font-size: 12px; }
.badge { display: inline-block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 2px 6px; border-radius: 5px; vertical-align: 2px; margin-left: 6px; }
.badge.must { background: rgba(237,26,52,.18); color: #ff8e9c; border: 1px solid rgba(237,26,52,.45); }
.badge.cue { background: rgba(255,255,255,.08); color: var(--muted); }

.row[data-status=past] { opacity: .5; }
.row[data-status=done] { opacity: .62; }
.row[data-status=done] .r-title { text-decoration: line-through; text-decoration-color: rgba(255,255,255,.4); }
.row[data-status=done] .r-state { color: var(--ok); }
.row[data-status=running] { border-color: var(--ok); border-left-color: var(--area); background: #05284d; }
.row[data-status=running] .r-state { color: var(--ok); }
.row[data-status=overdue] .r-state { color: var(--warn); }
.row[data-status=overdue] { border-color: rgba(245,165,36,.6); border-left-color: var(--area); }
.row[data-status=warn] { border-color: var(--warn); border-left-color: var(--area); background: #2a2208; }
.row[data-status=warn] .r-state { color: var(--warn); }
.row[data-status=alarm] { border-color: var(--red); border-left-color: var(--red); background: #3d0812; animation: rowpulse 1.2s infinite; }
.row[data-status=alarm] .r-state { color: #fff; }
@keyframes rowpulse { 50% { background: #5c0b1a; } }

.check {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 120px; min-height: 42px; padding: 6px 12px;
  border-radius: 9px; border: 2px solid #3a5f8f; background: transparent; color: #fff; font-weight: 800; cursor: pointer;
}
.check:hover:not(:disabled) { border-color: var(--ok); background: rgba(47,191,113,.12); }
.check.on { background: var(--ok); border-color: var(--ok); color: #03200f; }
.check:disabled { opacity: .35; cursor: not-allowed; }
.row[data-status=alarm] .check:not(.on) { background: #fff; color: var(--red-dark); border-color: #fff; }

.nowline { display: flex; align-items: center; gap: 10px; color: var(--red); font-weight: 800; font-size: 12.5px; letter-spacing: .06em; margin: 4px 0; }
.nowline::before, .nowline::after { content: ""; height: 2px; background: var(--red); flex: 1; }
.nowline::before { flex: 0 0 20px; }

@media (max-width: 760px) {
  .row { grid-template-columns: 64px 1fr; gap: 6px 10px; padding: 10px; }
  .row .r-time b { font-size: 15px; }
  .row .r-state { grid-column: 2; text-align: left; }
  .row .r-action { grid-column: 1 / -1; justify-content: stretch; }
  .row .r-action .check { width: 100%; }
  .row .r-action:empty { display: none; }
}

/* ---------- Zeitstrahl */
.tl-wrap { overflow: auto; position: relative; max-height: calc(100vh - 230px); }
.tl { position: relative; }
.tl-ruler { position: sticky; top: 0; z-index: 3; height: 34px; background: var(--night); border-bottom: 1px solid var(--line); }
.tl-ruler .tick { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line); font-size: 11.5px; color: var(--muted); padding: 9px 0 0 5px; white-space: nowrap; }
.tl-ruler .tick.h { color: #fff; font-weight: 800; border-left-color: #3a5f8f; }
.tl-lane { position: relative; border-bottom: 1px solid var(--line); }
.tl-lane:nth-child(even) { background: rgba(255,255,255,.015); }
.tl-label {
  position: sticky; left: 0; z-index: 2; width: 170px; height: 100%; display: flex; align-items: center; gap: 8px;
  padding: 0 12px; background: var(--panel); border-right: 1px solid var(--line); font-weight: 700; font-size: 13px;
}
.tl-label .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.tl-block {
  position: absolute; height: 30px; border-radius: 6px; padding: 0 8px; font-size: 12px; font-weight: 700; color: #fff;
  display: flex; align-items: center; overflow: hidden; white-space: nowrap; cursor: pointer;
  background: color-mix(in srgb, var(--c) 55%, #00122d); border: 1px solid var(--c);
}
.tl-block:hover { z-index: 2; filter: brightness(1.2); }
.tl-block.k-cue { background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--c) 30%, #00122d) 0 8px, color-mix(in srgb, var(--c) 18%, #00122d) 8px 16px); }
.tl-block.k-milestone { width: 4px !important; padding: 0; background: #fff; border: 0; overflow: visible; }
.tl-block.k-milestone span { position: absolute; left: 8px; font-family: var(--font-head); font-stretch: 125%; font-size: 11px; text-transform: uppercase; }
.tl-block[data-status=done] { opacity: .5; }
.tl-block[data-status=done]::after { content: "✔"; margin-left: auto; padding-left: 6px; }
.tl-block[data-status=alarm] { background: var(--red); border-color: #fff; animation: blink 1s infinite; }
.tl-block[data-status=warn], .tl-block[data-status=overdue] { border: 2px solid var(--warn); }
.tl-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--red); z-index: 1; pointer-events: none; }
.tl-now::before { content: "JETZT"; position: absolute; top: 2px; left: 4px; font-size: 10px; font-weight: 800; color: var(--red); background: var(--bg); padding: 0 3px; }
.tl-corner { position: sticky; left: 0; z-index: 4; width: 170px; height: 100%; background: var(--night); border-right: 1px solid var(--line); display: flex; align-items: center; padding: 0 12px; font-size: 11.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

/* ---------- Großanzeige */
body.display-mode { background: #000814; }
body.display-mode .topbar { display: none; }
body.display-mode main { max-width: none; padding: 0; }
body.display-mode #alarms { top: 0; }
.disp { min-height: 100vh; display: flex; flex-direction: column; padding: 3vh 4vw; gap: 3vh; }
.disp-head { display: flex; align-items: center; gap: 20px; }
.disp-head .logo-wrap { width: 8vh; height: 8vh; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.disp-head img { width: 7vh; height: 7vh; object-fit: contain; }
.disp-head h1 { font-size: 3.6vh; }
.disp-head .muted { font-size: 2.2vh; }
.disp-head .tools { margin-left: auto; display: flex; gap: 8px; opacity: .35; }
.disp-head .tools:hover { opacity: 1; }
.disp-main { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3vw; align-items: center; flex: 1; }
.disp-clock { font-family: var(--font-head); font-stretch: 125%; font-size: 17vh; line-height: .9; letter-spacing: -.01em; }
.disp-clock-lbl, .disp-lbl { text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 800; font-size: 2vh; }
.disp-t { font-family: var(--font-head); font-stretch: 125%; font-size: 9vh; line-height: 1; color: #fff; }
.disp-t.neg { color: #7ec3ff; }
.disp-card { background: var(--panel); border-radius: 14px; padding: 2.2vh 2vw; border-left: 1vh solid var(--brand); margin-bottom: 2vh; }
.disp-card .t { font-size: 3.4vh; font-weight: 800; margin: .6vh 0; }
.disp-card .c { font-family: var(--font-head); font-stretch: 125%; font-size: 4.2vh; }
.disp-card.next { border-left-color: #7ec3ff; }
.disp-alarms .alarm { font-size: 2.6vh; border-radius: 12px; margin-bottom: 1vh; }
.disp-alarms .alarm b { font-size: 2vh !important; }
.disp-progress { display: flex; gap: 3vw; font-size: 2.4vh; color: var(--muted); }
.disp-progress b { color: #fff; font-family: var(--font-head); font-stretch: 125%; font-size: 3.4vh; display: block; }
@media (max-width: 800px) { .disp-main { grid-template-columns: 1fr; } .disp-clock { font-size: 22vw; } .disp-t { font-size: 12vw; } }

/* ---------- Verwaltung */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; }
.tabs a { padding: 10px 14px; text-decoration: none; font-weight: 700; color: var(--muted); border-bottom: 3px solid transparent; white-space: nowrap; }
.tabs a.on { color: #fff; border-bottom-color: var(--brand); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.card { padding: 16px; position: relative; }
.card.active { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.card h3 { font-size: 15px; margin-bottom: 4px; }
.card .meta { color: var(--muted); font-size: 13px; margin-bottom: 12px; }
.card .actions { display: flex; gap: 6px; flex-wrap: wrap; }
.pill { display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 3px 8px; border-radius: 6px; background: var(--brand); }
.pill.grey { background: var(--panel-2); color: var(--muted); }
table.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl td.num { white-space: nowrap; }
.tbl tr:hover td { background: rgba(255,255,255,.025); }
.tbl .t-actions { white-space: nowrap; text-align: right; }
.tbl .areadot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.tbl-wrap { overflow-x: auto; }
.hint { background: rgba(0,96,175,.16); border: 1px solid rgba(0,96,175,.5); border-radius: 9px; padding: 11px 14px; font-size: 13.5px; margin-bottom: 14px; }
.hint b { color: #fff; }

/* ---------- Modal */
.modal-bg { position: fixed; inset: 0; background: rgba(0,6,18,.72); z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; overflow-y: auto; }
.modal { width: 100%; max-width: 560px; background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--brand); border-radius: 12px; }
.modal.wide { max-width: 760px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.modal-body { padding: 18px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.modal-foot .left { margin-right: auto; }
.form-error { background: rgba(237,26,52,.15); border: 1px solid rgba(237,26,52,.5); color: #ffb3bd; padding: 9px 12px; border-radius: 8px; margin-bottom: 12px; }
.areas-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
@media (max-width: 560px) { .areas-pick { grid-template-columns: 1fr; } }

/* ---------- Login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: var(--night); }
.login-box { width: 100%; max-width: 400px; padding: 30px; background: var(--panel); border-radius: 14px; border-top: 5px solid var(--brand); }
.login-box .logo-wrap { width: 128px; height: 128px; border-radius: 50%; background: #fff; display: grid; place-items: center; margin: 0 auto 18px; }
.login-box img { width: 116px; height: 116px; object-fit: contain; }
.login-box h1 { text-align: center; font-size: 22px; }
.login-box .claim { text-align: center; color: var(--muted); margin: 6px 0 22px; font-family: var(--font-head); font-stretch: 125%; text-transform: uppercase; font-size: 12px; letter-spacing: .12em; }

/* ---------- Toast */
#toast-root { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { background: #fff; color: var(--night); padding: 10px 16px; border-radius: 9px; font-weight: 700; box-shadow: 0 6px 24px rgba(0,0,0,.4); }
.toast.err { background: var(--red); color: #fff; }

/* ---------- Hilfe */
.help { max-width: 900px; }
.help .steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 14px 0 24px; }
.help .step { padding: 16px; }
.help .step .n { font-family: var(--font-head); font-stretch: 125%; font-size: 28px; color: var(--brand); }
.help dl { display: grid; grid-template-columns: 170px 1fr; gap: 10px 16px; }
.help dt { font-weight: 800; }
.help dd { margin: 0; color: var(--muted); }
@media (max-width: 560px) { .help dl { grid-template-columns: 1fr; } .help dd { margin-bottom: 8px; } }

/* ---------- Protokoll */
.log-row { display: grid; grid-template-columns: 150px 160px 1fr; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 14px; }
.log-row .muted { font-size: 13px; }
@media (max-width: 640px) { .log-row { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- Live-Knöpfe & Countdown */
.trigpanel { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; padding: 14px; margin-bottom: 14px; border-left: 5px solid var(--warn); }
.trigpanel:empty { display: none; }
/* Ablauf-Steuerung: Zurück · Jetzt läuft · Beenden · Weiter */
.transport { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 14px; margin-bottom: 14px; border-left: 5px solid var(--brand); }
.transport .lbl { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.transport .tp-now { flex: 1; min-width: 150px; }
.transport .tp-now b { font-size: 18px; }
.tp-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 14px; font-weight: 700; }
.tp-btn span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.tp-btn small { font-weight: 400; font-size: 11.5px; opacity: .8; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-btn[disabled] { opacity: .35; }
.transport.ended { border-left-color: var(--red); }
/* Testlauf-Hinweis auf allen Seiten */
.teststrip { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 16px; color: #1d1300; font-size: 13.5px;
  background: repeating-linear-gradient(-45deg, #f5a524 0 18px, #ffc66b 18px 36px); border-bottom: 2px solid #b87400; }
.teststrip b { font-size: 15px; letter-spacing: .06em; }
.teststrip span { flex: 1; min-width: 200px; }
.teststrip .btn { background: #1d1300; color: #fff; border-color: #1d1300; }
/* Spielphasen manuell starten (1. HZ, Halbzeitpause, 2. HZ, Ende) + Zurücksetzen */
.transport.phases { border-left-color: var(--warn); margin-top: -6px; }
.transport.phases .lbl { flex-basis: 100%; margin-bottom: -2px; }
.transport.phases .btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-height: 46px; padding: 5px 14px; font-weight: 700; line-height: 1.15; }
.transport.phases .btn small { font-weight: 400; font-size: 11px; opacity: .8; }
.transport.phases .sep { flex: 1; }
.transport.phases .btn.waiting { background: var(--warn); color: #1d1300; border-color: var(--warn); animation: phase-blink 1.2s ease-in-out infinite; }
@keyframes phase-blink { 50% { box-shadow: 0 0 0 4px rgba(245, 165, 36, .35); } }
@media (max-width: 700px) {
  .transport.phases .btn { flex: 1 1 calc(50% - 10px); }
  .transport.phases .sep { display: none; }
  .transport.phases [data-act="event-reset"] { flex-basis: 100%; }
}
.tp-restart { display: flex; flex-direction: column; gap: 3px; }
.tp-restart select { min-height: 44px; min-width: 220px; }
@media (max-width: 860px) {
  .transport .tp-now { order: -1; flex-basis: 100%; }
  .transport:not(.ended) .tp-btn { flex: 1; justify-content: center; }
  .tp-restart, .tp-restart select, .transport.ended .btn { width: 100%; min-width: 0; }
}
#trigpanel:empty { display: none; }
.cd-card { flex: 1 1 320px; background: #2a2208; border: 1px solid var(--warn); border-radius: 10px; padding: 12px 16px; }
.cd-lbl { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #ffc66b; }
.cd-val { font-family: var(--font-head); font-stretch: 125%; font-size: 56px; line-height: 1.05; color: #fff; }
.cd-card .bar i { background: var(--warn); }
.trig-next { flex: 1 1 280px; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.trig-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; cursor: pointer; text-align: left;
  background: var(--warn); color: #1d1300; border: 0; border-radius: 12px; padding: 14px 18px; box-shadow: 0 4px 0 #a86c00;
}
.trig-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #a86c00; }
.trig-btn:disabled { opacity: .45; cursor: not-allowed; }
.trig-btn.soft { background: transparent; color: #ffc66b; border: 2px dashed rgba(245,165,36,.6); box-shadow: none; padding: 10px 14px; }
.trig-btn.soft .tb-main { font-size: 16px; }
.trig-btn .tb-main { font-family: var(--font-head); font-stretch: 125%; font-size: 22px; text-transform: uppercase; }
.trig-btn .tb-sub { font-weight: 700; font-size: 13.5px; }
.trig-done-list { flex-basis: 100%; display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.trig-done-list .btn { min-height: 24px; padding: 0 6px; }
.badge.trig { background: rgba(245,165,36,.18); color: #ffc66b; border: 1px solid rgba(245,165,36,.5); }
.check.trig { border-color: var(--warn); color: #ffc66b; }
.check.trig:hover:not(:disabled) { background: rgba(245,165,36,.15); border-color: var(--warn); }
.trig-done { color: var(--ok); font-weight: 800; font-size: 13px; }
.row[data-status=waiting] { border-color: var(--warn); border-left-color: var(--warn); background: #2a2208; animation: rowwait 1.6s infinite; }
.row[data-status=waiting] .r-state { color: #ffc66b; }
.row[data-status=waiting] .check.trig { background: var(--warn); color: #1d1300; }
@keyframes rowwait { 50% { background: #3a2f0a; } }
.tcount .val.cd, .disp-t.cd { color: var(--warn); }
.cdstrip { display: block; background: var(--warn); color: #1d1300; padding: 7px 16px; text-decoration: none; font-size: 14.5px; }
@media (max-width: 760px) { .cd-val { font-size: 44px; } .trig-btn .tb-main { font-size: 19px; } }

/* ---------- Timelines nebeneinander (Spalten je Bereich) */
.cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.col { background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--area); border-radius: 10px; display: flex; flex-direction: column; min-width: 0; scroll-snap-align: start; }
.col-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); position: sticky; top: 0; }
.col-head .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--area); }
.col-head b { flex: 1; font-size: 14px; }
.col-list { padding: 8px; max-height: calc(100vh - 300px); min-height: 300px; overflow-y: auto; }
.col-list .row { grid-template-columns: 58px 1fr; gap: 4px 8px; padding: 8px 10px; }
.col-list .row .r-time b { font-size: 15px; }
.col-list .row .r-title { font-size: 14px; }
.col-list .row .r-state { grid-column: 2; text-align: left; font-size: 12.5px; }
.col-list .row .r-action { grid-column: 1 / -1; justify-content: stretch; }
.col-list .row .r-action .check { width: 100%; min-height: 36px; }
.col-list .row .r-action:empty { display: none; }
.col-list .row.k-milestone:not(.is-trig) { padding: 5px 10px; opacity: .8; }
@media (max-width: 760px) { .cols { grid-auto-columns: 88%; } .col-list { max-height: 65vh; } }

/* ---------- Punkte übernehmen */
.imp-list { max-height: 50vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 9px; padding: 6px; background: #001029; margin-bottom: 10px; }
.imp-group + .imp-group { margin-top: 8px; }
.imp-head { display: flex; align-items: center; gap: 6px; padding: 6px 8px; font-size: 13px; }
.imp-head .areadot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.imp-head .btn { margin-left: auto; min-height: 24px; padding: 0 8px; }
.imp-row { display: grid; grid-template-columns: 22px 54px 1fr auto; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 7px; cursor: pointer; }
.imp-row:hover { background: var(--panel-2); }
.imp-row input { width: 18px; height: 18px; accent-color: var(--brand); }
.imp-row.dup { opacity: .45; cursor: default; }
.imp-time { font-weight: 800; }
.badge.rec { background: rgba(52,211,153,.15); color: #7ee2a8; border: 1px solid rgba(52,211,153,.45); }
@media (max-width: 560px) { .imp-row { grid-template-columns: 22px 46px 1fr; } .imp-row > :last-child { display: none; } }

/* ---------- Kalender */
.warn-t { color: var(--warn); font-weight: 700; }
.overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.ov { padding: 14px 16px; border-left: 5px solid var(--brand); cursor: pointer; transition: background .15s; }
.ov:hover { background: var(--panel-2); }
.ov .lbl { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: var(--muted); }
.ov .t { font-family: var(--font-head); font-stretch: 125%; font-size: 19px; text-transform: uppercase; margin: 6px 0 4px; line-height: 1.1; }
.ov .s { color: var(--muted); font-size: 13px; }
.ov .s b { color: #fff; }
.ov.away { border-left-color: #7ec3ff; }
.ov.fleet { border-left-color: var(--warn); }
@media (max-width: 860px) { .overview { grid-template-columns: 1fr; gap: 8px; } .ov .t { font-size: 16px; } }

.cal-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-nav h2 { margin-left: 8px; font-size: 20px; }
.seg { display: inline-flex; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; color: var(--muted); font-weight: 700; padding: 6px 12px; border-radius: 7px; cursor: pointer; font-size: 13.5px; }
.seg button.on { background: var(--brand); color: #fff; }
.mini-select { width: auto; min-height: 32px; padding: 4px 10px; border-radius: 999px; font-size: 13px; }

.menu { position: relative; }
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 6px; min-width: 250px; box-shadow: 0 12px 30px rgba(0,0,0,.45); }
.menu-list button { display: block; width: 100%; text-align: left; background: transparent; border: 0; color: #fff; padding: 10px 12px; border-radius: 7px; cursor: pointer; font-weight: 600; }
.menu-list button:hover { background: var(--panel-2); }

.cal-layout { display: grid; grid-template-columns: 1fr 340px; gap: 14px; align-items: start; }
.cal-month { overflow: hidden; }
.cal-wd { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--night); border-bottom: 1px solid var(--line); }
.cal-wd div { padding: 8px 10px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-cell { min-height: 112px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 4px; cursor: pointer; position: relative; transition: background .15s; min-width: 0; }
.cal-cell:nth-child(7n) { border-right: 0; }
.cal-cell:hover { background: rgba(255,255,255,.03); }
.cal-cell.other { background: rgba(0,0,0,.18); }
.cal-cell.other .cal-dn { opacity: .4; }
.cal-cell.sel { background: rgba(0,96,175,.18); box-shadow: inset 0 0 0 2px var(--brand); }
.cal-cell.has-home::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--brand); }
.cal-dn { display: flex; justify-content: space-between; padding: 2px 4px 4px; font-weight: 800; font-size: 13px; }
.cal-cell.today .cal-dn span { background: var(--red); color: #fff; border-radius: 999px; min-width: 24px; height: 24px; display: inline-grid; place-items: center; padding: 0 6px; }
.cal-evs { display: flex; flex-direction: column; gap: 2px; }
.ev {
  display: flex; align-items: center; gap: 4px; width: 100%; border: 0; border-left: 3px solid var(--c); border-radius: 4px; padding: 2px 5px;
  background: color-mix(in srgb, var(--c) 22%, transparent); color: #fff; font-size: 11.5px; font-weight: 600; cursor: pointer; text-align: left; overflow: hidden; white-space: nowrap;
}
.ev:hover { background: color-mix(in srgb, var(--c) 40%, transparent); }
.ev .ev-n { overflow: hidden; text-overflow: ellipsis; }
.ev .ev-t { color: rgba(255,255,255,.75); font-weight: 700; }
.ev .ev-i { font-size: 10px; }
.ev.t-home { background: var(--brand); border-left-color: #fff; font-weight: 800; }
.ev.t-away { background: transparent; border: 1px dashed #7ec3ff; border-left: 3px solid #7ec3ff; }
.ev.done, .ag.done { opacity: .5; }
.more { font-size: 11px; color: var(--muted); padding-left: 4px; }
[draggable="true"] { cursor: grab; }
body.dragging [draggable="true"] { cursor: grabbing; }
body.dragging .cal-cell, body.dragging .wk-col { transition: background .1s; }
.drop-hover { background: rgba(0,96,175,.35) !important; box-shadow: inset 0 0 0 2px #fff !important; }
.cal-tip { margin-top: 10px; }
@media (max-width: 760px) { .cal-tip { display: none; } }
.cal-dots { display: none; gap: 3px; flex-wrap: wrap; padding: 0 4px; }
.cal-dots i { width: 7px; height: 7px; border-radius: 50%; }

.cal-side { padding: 16px; position: sticky; top: 76px; }
.side-head { margin-bottom: 12px; }
.side-head h3 { font-size: 15px; margin-bottom: 2px; }
.agenda { display: flex; flex-direction: column; gap: 6px; }
.ag {
  display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; cursor: pointer; color: #fff;
  background: var(--panel-2); border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: 8px; padding: 8px 10px;
}
.ag:hover { border-color: #2d5488; border-left-color: var(--c); }
.ag-time { flex: 0 0 auto; min-width: 58px; font-weight: 800; font-size: 13px; color: var(--muted); }
.ag-main { display: flex; flex-direction: column; min-width: 0; }
.ag-main b { font-size: 14px; }
.ag-main small { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.ag.t-home { background: color-mix(in srgb, var(--brand) 35%, var(--panel-2)); }
.ag.t-away { border-style: dashed; border-left-style: solid; }

.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.wk-col { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 6px; min-height: 260px; min-width: 0; }
.wk-col.today { border-color: var(--red); }
.wk-head { font-weight: 800; font-size: 13px; padding: 4px; cursor: pointer; border-bottom: 1px solid var(--line); margin-bottom: 2px; }
.wk-col .ag { flex-direction: column; gap: 2px; padding: 6px 8px; }
.wk-col .ag-time { min-width: 0; }
.wk-col .ag-main b { font-size: 12.5px; }
.wk-empty { padding: 4px; }
.wk-add { margin-top: auto; }

.list-day { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.list-day:last-child { border-bottom: 0; }
.list-date { display: flex; flex-direction: column; }
.list-date.today b { color: var(--red); }

@media (max-width: 1100px) { .cal-layout { grid-template-columns: 1fr; } .cal-side { position: static; } }
@media (max-width: 760px) {
  .cal-nav h2 { font-size: 16px; }
  .cal-cell { min-height: 58px; padding: 2px; }
  .cal-evs { display: none; }
  .cal-dots { display: flex; }
  .cal-dn { font-size: 12px; justify-content: center; }
  .week { grid-template-columns: 1fr; }
  .wk-col { min-height: 0; }
  .wk-col .ag { flex-direction: row; }
  .list-day { grid-template-columns: 1fr; gap: 6px; }
}

/* Modale Details */
.big-line { font-size: 16px; }
.note { background: #001029; white-space: pre-wrap; margin: 10px 0; }
.pill.ok { background: var(--ok); color: #03200f; }
.pill.warn { background: var(--warn); color: #1d1300; }
.pill.bad { background: var(--red); color: #fff; }

/* Deutsches Kennzeichen */
.plate {
  display: inline-flex; align-items: stretch; background: #fff; color: #111; border: 2px solid #111; border-radius: 5px; overflow: hidden;
  font-family: "Arial Narrow", Arial, sans-serif; font-weight: 800; font-size: 13px; letter-spacing: .04em; line-height: 1; vertical-align: middle; white-space: nowrap;
}
.plate::before { content: "D"; background: #003399; color: #fff; font-size: 9px; padding: 7px 4px 2px; display: flex; align-items: flex-end; }
.plate span { padding: 4px 7px; }

/* Spielplan */
.matches { display: flex; flex-direction: column; gap: 6px; }
.match-row { display: grid; grid-template-columns: 120px 1fr auto; gap: 14px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-left: 5px solid var(--brand); border-radius: 9px; padding: 10px 14px; }
.match-row.away { border-left-color: #7ec3ff; }
.match-row .mr-date, .match-row .mr-main { cursor: pointer; }
.mr-date { display: flex; flex-direction: column; }
.mr-date span { color: var(--muted); font-size: 13px; }
.mr-main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.mr-main b { font-size: 15.5px; }
.mr-main small { flex-basis: 100%; }
.mr-act { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.tag { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; padding: 3px 7px; border-radius: 5px; }
.tag.home { background: var(--brand); }
.tag.away { border: 1px solid #7ec3ff; color: #7ec3ff; }
.score { background: #fff; color: var(--night); font-weight: 800; padding: 1px 7px; border-radius: 5px; font-size: 13px; }
@media (max-width: 700px) {
  .match-row { grid-template-columns: 1fr; gap: 6px; }
  .mr-date { flex-direction: row; gap: 8px; }
  .mr-act { justify-content: flex-start; }
}

/* Fuhrpark */
.veh { border-top: 4px solid var(--c); }
.veh.inactive { opacity: .55; }
.veh-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.veh-top .plate { font-size: 16px; }
.veh-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--c); }
.veh-status { font-size: 13px; padding: 7px 10px; border-radius: 7px; margin-bottom: 10px; font-weight: 600; }
.veh-status.free { background: rgba(47,191,113,.14); color: #7ee2a8; }
.veh-status.busy { background: rgba(0,96,175,.25); color: #9fd0ff; }
.veh-status.shop { background: rgba(245,165,36,.16); color: #ffc66b; }
.veh-facts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; font-size: 14px; }
tr.click { cursor: pointer; }

/* ---------- Druckbögen „Spielablauf“ (A4, hell, ThSV-Design) */
body.print-mode { background: #5b6675; }
body.print-mode .topbar, body.print-mode #alarms, body.print-mode #cdstrip { display: none; }
body.print-mode main { max-width: none; padding: 0 0 40px; }
.print-bar { position: sticky; top: 0; z-index: 20; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 16px; background: var(--night); border-bottom: 3px solid var(--brand); }
.sheets { display: flex; flex-direction: column; align-items: center; gap: 24px; padding-top: 24px; }
.sheet {
  width: 210mm; min-height: 297mm; padding: 12mm 13mm 16mm; background: #fff; color: #14202e; position: relative;
  box-shadow: 0 10px 40px rgba(0,0,0,.35); font-family: var(--font); font-size: 10.5pt; line-height: 1.35;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.sh-head { display: grid; grid-template-columns: 26mm 1fr auto; gap: 6mm; align-items: center; background: #002559; color: #fff; margin: -12mm -13mm 0; padding: 7mm 13mm 6mm; position: relative; overflow: hidden; }
.sh-head::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22; background: repeating-linear-gradient(-62deg, transparent 0 28px, #0060AF 28px 44px); -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000 100%); mask-image: linear-gradient(90deg, transparent 40%, #000 100%); }
.sh-head > * { position: relative; z-index: 1; }
.sh-logo { width: 26mm; height: 26mm; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.sh-logo img { width: 24mm; height: 24mm; object-fit: contain; }
.sh-kicker { font-size: 8.5pt; letter-spacing: .12em; text-transform: uppercase; color: #9fc4ea; font-weight: 700; }
.sh-head h1 { font-family: var(--font-head); font-stretch: 125%; font-weight: 900; font-size: 30pt; line-height: 1; text-transform: uppercase; letter-spacing: .01em; margin: 1.5mm 0 1.5mm; color: #fff; }
.sh-match { font-size: 13pt; font-weight: 700; }
.sh-when { text-align: right; }
.sh-date { font-weight: 700; font-size: 11pt; }
.sh-lbl { font-size: 7.5pt; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: #9fc4ea; margin-top: 1.5mm; }
.sh-time { font-family: var(--font-head); font-stretch: 125%; font-weight: 900; font-size: 26pt; line-height: 1; }
.sh-venue { font-size: 8.5pt; color: #cfe0f2; margin-top: 1mm; }
.sh-stripe { height: 2.2mm; background: #0060AF; margin: 0 -13mm 6mm; }
.sh-sec { margin-bottom: 6mm; break-inside: auto; }
.sh-sec h2 { font-family: var(--font-head); font-stretch: 125%; font-weight: 900; font-size: 11pt; text-transform: uppercase; letter-spacing: .06em; color: #002559; border-bottom: 2px solid #0060AF; padding-bottom: 1.2mm; margin: 0 0 2.5mm; }
.sh-wifi { display: grid; grid-template-columns: 12mm 1fr 1.4fr; gap: 5mm; align-items: center; border: 2px solid #0060AF; border-radius: 3mm; padding: 3.5mm 5mm; margin-bottom: 6mm; background: #eef5fc; }
.sh-wifi-ico { font-size: 22pt; text-align: center; }
.sh-wifi .sh-lbl { color: #0060AF; margin: 0; }
.sh-wifi-v { font-size: 15pt; font-weight: 800; color: #002559; }
.sh-wifi-v.mono { font-family: Consolas, "Courier New", monospace; letter-spacing: .04em; }
.sh-missing { font-family: var(--font); font-size: 10pt; font-weight: 600; color: #b45309; letter-spacing: 0; }
.sh-spons { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm; margin-bottom: 6mm; }
.sh-sp { display: flex; align-items: center; gap: 3.5mm; border-radius: 3mm; padding: 3mm 4.5mm; background: #002559; color: #fff; }
.sh-sp-ico { font-size: 16pt; }
.sh-sp .sh-lbl { margin: 0; }
.sh-sp-v { font-family: var(--font-head); font-stretch: 125%; font-weight: 900; font-size: 12.5pt; text-transform: uppercase; letter-spacing: .02em; line-height: 1.15; }
.sh-sp .sh-missing { color: #fbbf24; font-family: var(--font); font-stretch: 100%; text-transform: none; font-size: 10pt; }
.sp-tbl input { min-height: 34px; padding: 5px 9px; }
.sp-tbl td { min-width: 130px; }
.sp-state { min-width: 90px !important; color: var(--ok) !important; }
.sp-tbl td.sp-save { min-width: 110px; white-space: nowrap; }
.sp-save .sp-state { margin-top: 4px; }
[data-dirty] .sp-state { color: var(--warn, #F59E0B) !important; }
[data-dirty] [data-sp-save], [data-dirty] [data-kid-save], [data-dirty] [data-pl-save] { box-shadow: 0 0 0 3px rgba(245,158,11,.45); }
.section-head [data-save-all] { margin-left: auto; }
.rep-box { background: #001029; margin-bottom: 14px; }
/* Einlaufkinder */
.kids-box { border: 1px solid var(--line); border-radius: 9px; padding: 12px; margin-bottom: 14px; background: #001029; }
.kids-h { display: block; font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.kids-row { display: grid; grid-template-columns: 150px 1fr 80px 1fr; gap: 8px; align-items: center; margin-bottom: 6px; }
.kids-row b { font-size: 13px; }
@media (max-width: 640px) { .kids-row { grid-template-columns: 1fr 80px; } .kids-row b { grid-column: 1 / -1; } }
.kid-tbl td { min-width: 190px; }
.kid-sub { display: grid; grid-template-columns: 64px 1fr; gap: 5px; margin-top: 5px; }
.sh-kids { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3mm; }
.sh-kid { border: 1.5px solid #0060AF; border-radius: 2.5mm; padding: 2.5mm 3.5mm; background: #fff; }
.sh-kid .sh-lbl { color: #0060AF; margin: 0 0 1mm; }
.sh-kid-org { font-weight: 800; font-size: 11pt; color: #002559; }
.sh-kid-meta { font-size: 8.5pt; color: #4b5563; margin-top: .5mm; }
/* Bogen: Logos, Offizielle, klassisches Layout, Infotext, Rahmen */
.sh-head { grid-template-columns: auto minmax(0, 1fr) auto; gap: 5mm; }
.sh-title { min-width: 0; }
.sh-when { white-space: nowrap; }
.sh-logos { display: flex; align-items: center; gap: 2.5mm; }
.sh-logos .sh-logo { width: 20mm; height: 20mm; }
.sh-logos .sh-logo img { width: 18mm; height: 18mm; }
.sh-logos:has(.sh-vs) ~ .sh-title h1 { font-size: 24pt; }
.sh-logos:has(.sh-vs) ~ .sh-title .sh-match { font-size: 11pt; }
.sh-vs { font-family: var(--font-head); font-stretch: 125%; font-weight: 900; font-size: 13pt; color: #9fc4ea; font-style: italic; }
.sh-off-row { grid-column: 1 / -1; }
.sh-officials { display: flex; flex-wrap: wrap; justify-content: center; gap: 1mm 6mm; padding-top: 3mm; margin-top: 1mm; border-top: 1px solid rgba(255,255,255,.25); font-size: 8.5pt; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.sh-officials b { color: #9fc4ea; font-weight: 800; }
.sh-hl .sh-what b, .sl-row.hl .sl-what b { color: #ED1A34; }
.sh-hl .sh-t b { color: #ED1A34; }
.sl { border-left: none; }
.sl-row { display: grid; grid-template-columns: 30mm 1fr; align-items: baseline; break-inside: avoid; }
.sl-time { text-align: right; padding: 1.6mm 4mm 1.6mm 0; font-weight: 800; font-size: 12pt; color: #002559; border-right: 1.2mm solid #0060AF; white-space: nowrap; }
/* Spielereignis („20. Tor“, „25 Min nach Abpfiff“) klein unter der Uhrzeit – darf umbrechen */
.sh-tlbl { display: block; white-space: normal; font-size: 7.5pt; font-weight: 600; line-height: 1.15; color: #6b7280; overflow-wrap: anywhere; margin-top: .3mm; }
.sl-what { padding: 1.6mm 0 1.6mm 4.5mm; font-size: 12pt; }
.sl-what b { color: #002559; }
.sl-row.base .sl-what b { color: #0060AF; text-transform: uppercase; letter-spacing: .02em; }
.sl-row.base .sl-time { color: #0060AF; }
.sl-row .sh-note { font-size: 9pt; }
.sh-info { text-align: center; }
.sh-info .ti-red { font-family: var(--font-head); font-stretch: 125%; font-weight: 900; font-size: 15pt; color: #ED1A34; text-transform: uppercase; margin: 4mm 0 1.5mm; }
.sh-info .ti-blue { font-family: var(--font-head); font-stretch: 125%; font-weight: 900; font-size: 11pt; color: #002559; text-transform: uppercase; margin: 3mm 0 1mm; }
.sh-info p { margin: 1mm 0; font-weight: 700; color: #002559; }
.sh-info ol, .sh-info ul { display: inline-block; text-align: left; margin: 1mm 0; padding-left: 7mm; font-weight: 700; color: #002559; }
.sh-info li { margin: 1mm 0; }
.sheet.frame { background: #002559; }
.sheet.frame > .sh-bg { opacity: 1; }
.sheet.frame .sh-head { background: transparent; }
.sheet.frame .sh-head::after { display: none; }
.sh-card { background: #fff; border-radius: 2mm; padding: 6mm 7mm; margin-top: 5mm; margin-bottom: 8mm; box-shadow: 0 2mm 6mm rgba(0,0,0,.25); }
.sheet.frame .sh-foot { color: #cfe0f2; border-top-color: rgba(255,255,255,.3); }
.sheet.frame .sh-foot span:last-child { color: #fff; }
.row.hl .r-title { color: #ff8e9c; }
.r-time .tl-ev { font-size: 14px !important; color: #ffc66b; }
.opp-prev { width: 52px; height: 52px; border-radius: 50%; background: #fff; display: grid; place-items: center; overflow: hidden; }
.opp-prev img { width: 46px; height: 46px; object-fit: contain; }

/* Freundlicher, mehr Weiß – Markenfarben: ThSV-Blau #0060AF, Nachthimmel #002559, Eisen-Grau #E7E8E9, Motor-Rot nur Akzent */
.sh-head { background: linear-gradient(120deg, #0060AF 0%, #004a8f 45%, #002559 100%); padding-bottom: 5mm; }
.sh-head-bg { background-size: cover; background-position: center 45%; background-repeat: no-repeat; mix-blend-mode: screen; }
.sh-stripe { height: 1.2mm; background: linear-gradient(90deg, #0060AF, #7ec3ff); margin-bottom: 7mm; }
.sheet .sh-sec h2 { color: #0060AF; border-bottom: 1.5px solid #E7E8E9; }
.sheet .sh-table th { border-bottom: 1.5px solid #0060AF; color: #0060AF; }
.sheet .sh-table td { border-bottom: 1px solid #eef0f3; }
.sheet .sh-phase td { background: #E7E8E9; color: #002559; border-left: 1.5mm solid #0060AF; }
.sheet .sh-base td { background: #f4f8fd; }
.sh-sp { background: #fff; color: #002559; border: 1.5px solid #0060AF; }
.sh-sp .sh-lbl { color: #0060AF; }
.sh-sp .sh-missing { color: #b45309; }
.sh-wifi { background: #f4f8fd; border-width: 1.5px; }
.sh-kid { background: #f4f8fd; border-width: 1px; }
.sh-stat { background: #f4f8fd; border: 1px solid #dbe7f5; }
.sl-time { border-right-width: 1mm; }
.sheet:not(.frame) .sh-foot { border-top-color: #E7E8E9; }

/* Banner-Ebenen: 1 Zahnradmuster (Grund) → 2 blauer Verlauf → 3 Spielerfotos → 4 Inhalt */
.sheet .sh-head.has-bg { background: #002559; }
.sh-head-gears { position: absolute; inset: 0; z-index: 0 !important; background-size: cover; background-position: center 45%; background-repeat: no-repeat; pointer-events: none; }
.sh-head-grad { position: absolute; inset: 0; z-index: 0 !important; pointer-events: none;
  background: linear-gradient(120deg, rgba(0,96,175,.72) 0%, rgba(0,74,143,.68) 45%, rgba(0,37,89,.80) 100%); }
.sheet.frame .sh-head.has-bg { background: transparent; }
.sheet.frame .sh-head-grad { background: linear-gradient(120deg, rgba(0,96,175,.45), rgba(0,37,89,.55)); }

/* Gegner-Logo ohne weißen Kreis (nur das ThSV-Original-Logo steht laut Markenbuch auf Weiß) */
.sh-logos .sh-logo.opp { background: transparent; border-radius: 0; }
.sh-logos .sh-logo.opp img { filter: drop-shadow(0 .4mm 1mm rgba(0,0,0,.45)); }

/* Kopf: links „Spielablauf“ + Teams + Logos, rechts Datum/Anwurf, unten Offizielle + HBL-Logo */
.sheet .sh-head { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 4mm 6mm; padding-top: 7mm; }
.sh-left { min-width: 0; }
.sh-left h1 { margin: 0 0 1mm; }
.sh-left .sh-match { margin-bottom: 3mm; }
.sheet .sh-logos { gap: 3mm; }
/* beide Logos gleich groß: ThSV-Kreis und Gegner-Logo jeweils 19 mm */
.sheet .sh-logos .sh-logo { width: 19mm; height: 19mm; }
.sheet .sh-logos .sh-logo img { width: 17mm; height: 17mm; }
.sheet .sh-logos .sh-logo.opp img { width: 19mm; height: 19mm; }
.sh-round { font-size: 8pt; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: #9fc4ea; margin-bottom: .8mm; }
.sh-when { padding-top: 1mm; }
.sheet .sh-off-row { display: flex; align-items: center; justify-content: space-between; gap: 6mm; border-top: 1px solid rgba(255,255,255,.25); padding-top: 3mm; margin-top: 1mm; }
.sheet .sh-off-row .sh-officials { justify-content: flex-start; border-top: 0; padding-top: 0; margin-top: 0; text-align: left; }
/* Offizielle (Schiedsrichter & Kampfgericht) in einem weißen Feld */
.sheet .sh-off-row { border-top: 0; padding-top: 2mm; }
.sheet .sh-off-row .sh-officials { flex: 1; background: #fff; color: #002559; border-radius: 2mm; padding: 2mm 4mm;
  box-shadow: 0 .5mm 2mm rgba(0, 20, 50, .25); text-shadow: none !important; gap: 1.2mm 6mm; font-size: 9.5pt; letter-spacing: .03em; }
.sheet .sh-off-row .sh-officials b { color: #0060AF; }
/* Aufgabenbogen: für wen */
.sh-who { display: flex; align-items: center; gap: 5mm; border: 1.5px solid #0060AF; border-left: 2.5mm solid #0060AF; border-radius: 2.5mm; padding: 3.5mm 5mm; margin-bottom: 6mm; background: #f4f8fd; }
.sh-who > div:first-child { flex: 1; }
.sh-who .sh-lbl { color: #0060AF; margin: 0 0 .8mm; }
.sh-who-v { font-family: var(--font-head); font-stretch: 125%; font-weight: 900; font-size: 17pt; color: #002559; text-transform: uppercase; line-height: 1.1; }
.sh-who-sub { font-size: 9pt; color: #4b5563; margin-top: 1mm; }
.sh-who-n { text-align: center; min-width: 20mm; }
.sh-who-n b { display: block; font-family: var(--font-head); font-stretch: 125%; font-weight: 900; font-size: 18pt; color: #002559; }
.sh-who-n span { font-size: 7.5pt; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: #4b5563; }
.sh-who-n.must b { color: #ED1A34; }
/* HBL-Logo: größer und weiter rechts (bis in den Seitenrand des Banners) */
.sh-hbl { height: 13mm; width: auto; flex-shrink: 0; margin-right: -8mm; margin-left: auto; }
.sh-logos:has(.sh-vs) ~ .sh-title h1 { font-size: inherit; }

/* Spieler im Banner: Heim links, Gast rechts, leicht transparent */
.sh-head.has-players { min-height: 46mm; }
/* nur der obere Teil des Fotos (Kopf & Schultern), oben etwas Luft, unten weich ausgeblendet */
.sh-pls { position: absolute; inset: 0; z-index: 0 !important; opacity: 1; pointer-events: none; }
/* Schrift im Banner gut lesbar, auch über den Spielerfotos */
.sh-head.has-players .sh-left, .sh-head.has-players .sh-when, .sh-head.has-players .sh-officials { text-shadow: 0 .3mm 1.4mm rgba(0, 20, 50, .85); }
/* voll deckend, ohne Ausblendung – das Foto endet an der Unterkante des Banners */
.sh-pl { position: absolute; top: 5mm; bottom: auto; height: 175%; width: auto; max-width: 36%; object-fit: contain; object-position: top; }
/* mittig, Schultern überlappen – ThSV links und vorne, Gegner rechts dahinter (zur Mitte gedreht) */
.sh-pl.home { left: calc(50% - 47mm); }
.sh-pl.away { left: calc(50% - 13mm); }
.print-bar2 { top: 61px; background: #031c40; border-bottom: 1px solid var(--line); padding: 8px 16px; }
.pl-pick { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.pl-pick label { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.pl-pick select { min-width: 210px; min-height: 34px; padding: 4px 8px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.pl-pick.compact select { min-width: 180px; }
.pl-pick [data-pl-save] { min-height: 34px; }
@media (max-width: 860px) { .pl-pick, .pl-pick label { width: 100%; } .pl-pick select { min-width: 0; width: 100%; } }

/* Bogen-Hintergrund */
.sheet > * { position: relative; z-index: 1; }
.sheet > .sh-foot { position: absolute; }
.sheet > .sh-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; pointer-events: none; }
.sh-head-bg { position: absolute; inset: 0; z-index: 0 !important; background-size: cover; background-position: center; }
.sh-head.has-bg::after { display: none; }
.bg-pick { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.bg-prev { width: 105px; height: 148px; border: 1px dashed var(--line); border-radius: 6px; background: #fff; display: grid; place-items: center; overflow: hidden; flex-shrink: 0; }
.bg-prev img { width: 100%; height: 100%; object-fit: cover; }
.assignee { color: #cfe0f2; }
.assignee.me { color: #1d1300; background: var(--warn); border-radius: 5px; padding: 0 6px; font-weight: 800; }
.ok-t { color: var(--ok); }
.rep-line { color: #7ee2a8; }
.sh-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3mm; margin-bottom: 6mm; }
.sh-stat { background: #E7E8E9; border-radius: 2.5mm; padding: 3mm 4mm; }
.sh-stat b { display: block; font-family: var(--font-head); font-stretch: 125%; font-weight: 900; font-size: 18pt; color: #002559; line-height: 1.1; }
.sh-stat span { font-size: 8pt; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: #4b5563; }
.sh-stat.ok b { color: #15803d; } .sh-stat.bad b { color: #ED1A34; }
.sh-bar { grid-column: 1 / -1; height: 5mm; background: #E7E8E9; border-radius: 3mm; position: relative; overflow: hidden; }
.sh-bar i { position: absolute; inset: 0 auto 0 0; background: #0060AF; }
.sh-bar span { position: relative; font-size: 7.5pt; font-weight: 800; color: #fff; padding-left: 3mm; line-height: 5mm; }
.sh-tl { width: 100%; height: auto; display: block; }
.sh-table { width: 100%; border-collapse: collapse; }
.sh-table th { text-align: left; font-size: 7.5pt; text-transform: uppercase; letter-spacing: .08em; color: #4b5563; border-bottom: 1.5px solid #14202e; padding: 1.5mm 2mm; }
.sh-table td { border-bottom: 1px solid #dde2e8; padding: 1.8mm 2mm; vertical-align: top; }
.sh-table tr { break-inside: avoid; }
.sh-phase td { background: #002559; color: #fff; font-family: var(--font-head); font-stretch: 125%; font-weight: 900; font-size: 8.5pt; letter-spacing: .1em; text-transform: uppercase; padding: 1.3mm 2mm; border: 0; }
.sh-base td { background: #eef5fc; }
.sh-base .sh-what b { color: #0060AF; text-transform: uppercase; letter-spacing: .02em; }
.sh-chk { width: 7mm; text-align: center; }
.sh-chk .box { display: inline-block; width: 4mm; height: 4mm; border: 1.5px solid #14202e; border-radius: .8mm; margin-top: .5mm; }
.sh-t { width: 17mm; white-space: nowrap; }
.sh-t b { font-size: 11pt; display: block; }
.sh-t small { color: #6b7280; font-size: 8pt; }
.sh-what b { font-size: 10.5pt; }
.sh-note { color: #4b5563; font-size: 8.5pt; margin-top: .6mm; white-space: pre-wrap; }
.sh-tag { display: inline-block; font-size: 7pt; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: .3mm 1.5mm; border-radius: 1mm; border: 1px solid #f59e0b; color: #92400e; vertical-align: 1px; }
.sh-tag.must { border-color: #ED1A34; color: #9E061C; }
.sh-area { width: 38mm; }
.sh-chip { display: inline-block; white-space: nowrap; font-size: 7.5pt; font-weight: 700; padding: .5mm 2mm; border-radius: 1.5mm; border-left: 2.5mm solid var(--c); background: #f3f5f8; }
.sh-own { width: 28mm; font-size: 9pt; }
.sh-st { width: 24mm; font-size: 9pt; }
.sh-st .ok { color: #15803d; font-weight: 800; } .sh-st .bad { color: #ED1A34; font-weight: 800; }
.sh-st small { display: block; color: #6b7280; font-size: 7.5pt; }
.sh-empty { color: #6b7280; font-style: italic; text-align: center; padding: 6mm; }
.sh-text { white-space: pre-wrap; font-size: 10pt; }
.sh-footer-text { border-left: 2mm solid #0060AF; background: #f3f5f8; padding: 3mm 4mm; }
.sh-foot { position: absolute; left: 13mm; right: 13mm; bottom: 7mm; display: flex; justify-content: space-between; font-size: 7.5pt; color: #6b7280; border-top: 1px solid #dde2e8; padding-top: 2mm; }
.sh-foot span:last-child { font-family: var(--font-head); font-stretch: 125%; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; color: #0060AF; }
@media (max-width: 860px) { .sheet { transform-origin: top center; zoom: .48; } }
/* Seitengerüst: Kopf (thead) wiederholt sich auf jeder gedruckten Seite */
.sheet { padding-top: 0; padding-bottom: 0; }
.sh-pg { width: 100%; border-collapse: collapse; border-spacing: 0; }
.sh-pg > thead > tr > td, .sh-pg > tbody > tr > td, .sh-pg > tfoot > tr > td { padding: 0; border: 0; vertical-align: top; }
.sh-pg > thead .sh-head { margin-top: 0; }
.sh-pg-foot { height: 16mm; }
/* Kopf kompakt halten: Chrome/Edge wiederholen ihn nur, wenn er höchstens ein Viertel der Seite (~74 mm) belegt */
.sh-pg .sh-head { padding-top: 5mm; padding-bottom: 3.5mm; row-gap: 2.5mm; }
.sh-pg .sh-head.has-players { min-height: 40mm; }
.sh-pg .sh-left h1 { font-size: 26pt; }
.sh-pg .sh-left .sh-match { margin-bottom: 2mm; }
.sh-pg .sh-logos .sh-logo { width: 15mm; height: 15mm; }
.sh-pg .sh-logos .sh-logo img { width: 13.5mm; height: 13.5mm; }
.sh-pg .sh-logos .sh-logo.opp img { width: 15mm; height: 15mm; }
.sh-pg .sh-off-row { padding-top: 1mm; margin-top: 0; }
.sh-pg .sh-off-row .sh-officials { display: grid; grid-template-columns: auto auto; justify-content: start; gap: .8mm 6mm; padding: 1.5mm 3.5mm; font-size: 8.5pt; }
.sh-pg .sh-hbl { height: 11mm; }
.sh-pg .sh-stripe { margin-bottom: 4mm; }
/* „Spielablauf“ und die Spielpaarung liegen HINTER den Spielerfotos; Logos, Datum/Anwurf und Offizielle bleiben davor */
.sh-head.has-players .sh-left { z-index: auto; }
.sh-head.has-players .sh-left h1, .sh-head.has-players .sh-match { position: relative; z-index: 1; }
.sh-head.has-players .sh-pls { z-index: 2 !important; }
.sh-head.has-players .sh-logos, .sh-head.has-players .sh-when, .sh-head.has-players .sh-off-row { position: relative; z-index: 3; }
@media print {
  /* Fußzeile fest unten auf JEDER Druckseite (der Platz dafür bleibt über <tfoot> frei);
     der Bogen ist nur so hoch wie sein Inhalt → keine leere Extraseite */
  body.print-mode .sheet > .sh-foot { position: fixed; left: 13mm; right: 13mm; bottom: 7mm; z-index: 2; background: #fff; color: #6b7280; border-top-color: #dde2e8; }
  body.print-mode .sheet ~ .sheet > .sh-foot { display: none; }
}
.sd-h { font-size: 13px; margin: 18px 0 10px; color: #fff; }
.imp-group.via-area .imp-row { opacity: .5; }

@media print {
  @page { size: A4; margin: 0; }
  body.print-mode { background: #fff; }
  body.print-mode .sheets { padding: 0; gap: 0; display: block; }
  /* Bogen nur so hoch wie sein Inhalt, Seitenumbruch nur ZWISCHEN Bögen → keine leere Extraseite */
  body.print-mode main { padding: 0; }
  body.print-mode .sheet { box-shadow: none; margin: 0; zoom: 1; width: 210mm; min-height: 0; page-break-after: auto; break-after: auto; }
  body.print-mode .sheet + .sheet { break-before: page; page-break-before: always; }
}

/* ---------- Druck (Ablaufplan als PDF / Papier) */
@media print {
  :root { --bg: #fff; --panel: #fff; --line: #ccc; --text: #000; --muted: #444; }
  body { background: #fff; color: #000; }
  .topbar, #alarms, .no-print, .tabs, .filters, .legend, .btn, .check { display: none !important; }
  main { padding: 0; max-width: none; }
  .panel { border: none; }
  .tbl td, .tbl th { border-bottom: 1px solid #ccc; color: #000; }
  .print-title { display: block !important; }
}
.print-title { display: none; margin-bottom: 10px; }

/* ------------------------------------------------------------ Social Media */
.soc { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: start; }
.soc.editing { grid-template-columns: 180px 1fr; }
.soc-menu { display: flex; flex-direction: column; padding: 8px; gap: 2px; position: sticky; top: 120px; }
.soc-menu a { display: flex; align-items: center; gap: 10px; padding: 10px 10px; border-radius: 8px; color: var(--text); text-decoration: none; font-weight: 600; }
.soc-menu a:hover { background: var(--panel-2); }
.soc-menu a.on { background: var(--brand); }
.soc-menu a .ic { width: 22px; text-align: center; }
.soc-menu a small { margin-left: auto; color: var(--muted); font-weight: 400; }
.soc-menu a.on small { color: #fff; }
.soc-menu .btn { margin-top: 6px; }
.soc-main { min-width: 0; }
.soc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.soc-card { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; color: var(--text); text-decoration: none; }
.soc-card canvas { width: 100%; height: auto; display: block; background: #0b1f3f; }
.soc-card-t { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; }
.soc-card-t .row-gap { flex-wrap: wrap; gap: 4px; }
.st-entwurf { color: var(--warn, #F59E0B); } .st-fertig { color: #7ec3ff; } .st-gepostet { color: var(--ok); }
.soc-next h3 { margin-bottom: 8px; }
.soc-next, .soc-list { margin-bottom: 14px; }
.soc-bday { display: grid; grid-template-columns: 170px 1fr auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); }
.soc-list summary { cursor: pointer; }
/* Editor */
.ed-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 10px 12px; margin-bottom: 12px; }
.ed-f { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.ed-f input, .ed-f select, .ed-f textarea { text-transform: none; letter-spacing: 0; font-weight: 400; min-height: 36px; padding: 5px 9px; }
.ed-f input[type=range] { padding: 0; min-height: 26px; }
.ed-bar .ed-f { margin-bottom: 0; }
.ed-f.grow { flex: 1; min-width: 180px; }
.ed-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ed-state { min-width: 90px; }
[data-dirty] .ed-state { color: var(--warn, #F59E0B); }
.ed-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 12px; align-items: start; }
.ed-stage { padding: 12px; display: flex; flex-direction: column; align-items: center; background: repeating-conic-gradient(#0a1a35 0 25%, #0d2244 0 50%) 0 0 / 24px 24px; }
.ed-stage canvas { max-width: 100%; max-height: 74vh; width: auto; height: auto; box-shadow: 0 6px 30px rgba(0,0,0,.5); touch-action: none; cursor: move; }
.ed-tip { margin-top: 8px; text-align: center; }
.ed-side { display: flex; flex-direction: column; gap: 12px; }
.ed-layers, .ed-props { padding: 10px; }
.ed-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 8px; }
.ed-layer { display: flex; align-items: center; gap: 4px; padding: 5px 6px; border-radius: 7px; cursor: pointer; border: 1px solid transparent; }
.ed-layer:hover { background: var(--panel-2); }
.ed-layer.on { border-color: #FACC15; background: var(--panel-2); }
.ed-layer.off .ed-ln { opacity: .45; }
.ed-ln { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.ed-ln small { color: var(--muted); font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.ed-ty { width: 20px; text-align: center; color: var(--muted); }
.ed-ic { background: transparent; border: 0; color: var(--text); cursor: pointer; padding: 3px 5px; border-radius: 5px; font-size: 13px; }
.ed-ic:hover { background: var(--line); }
.ed-ic[disabled] { opacity: .25; cursor: default; }
.ed-add { margin-top: 8px; flex-wrap: wrap; }
.ed-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
@media (max-width: 1100px) { .ed-body { grid-template-columns: 1fr; } .ed-stage canvas { max-height: 62vh; } }
@media (max-width: 860px) {
  .soc, .soc.editing { grid-template-columns: 1fr; }
  .soc-menu { position: static; flex-direction: row; overflow-x: auto; }
  .soc-menu a { white-space: nowrap; }
  .soc-menu .btn { margin-top: 0; white-space: nowrap; }
  .soc-bday { grid-template-columns: 1fr; gap: 4px; }
  .ed-f.grow { min-width: 100%; }
}

/* Bild-Ausdruck (Kabinen-/Schiedsrichter-Bilder): nur das Bild, randlos auf A4 */
#print-only { display: none; }
@page bildquer { size: A4 landscape; margin: 0; }
@page bildhoch { size: A4 portrait; margin: 0; }
@media print {
  body.print-image > *:not(#print-only) { display: none !important; }
  body.print-image { background: #fff !important; }
  body.print-image #print-only { display: block; }
  #print-only.landscape { page: bildquer; }
  #print-only.portrait { page: bildhoch; }
  #print-only img { display: block; width: 100%; height: auto; max-height: 100vh; object-fit: contain; }
}
.club-pick { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.club-pick img, .club-pick .club-nologo { width: 72px; height: 72px; object-fit: contain; background: #fff; border-radius: 10px; padding: 6px; }
.club-pick .club-nologo { display: grid; place-items: center; color: #666; font-size: 11px; }
.club-pick .ed-f { margin-bottom: 0; min-width: 220px; }

/* ------------------------------------------------------------ Handy & Tablet */
.menubtn { display: none; font-size: 20px; min-width: 42px; }
.mnav { display: none; }
@media (max-width: 860px) {
  .menubtn { display: inline-flex; justify-content: center; }
  .mnav:not([hidden]) {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--night); border-bottom: 3px solid var(--brand); padding: 10px 12px 14px; box-shadow: 0 14px 30px rgba(0,0,0,.5);
  }
  .mnav a { text-decoration: none; color: #fff; font-weight: 700; padding: 13px 14px; border-radius: 10px; background: var(--panel-2); font-size: 15px; }
  .mnav a.on { background: var(--brand); }
  .clockbar .ev-title { white-space: normal; overflow: visible; text-overflow: clip; font-size: 18px; }
}
/* Tabellen als Karten */
@media (max-width: 700px) {
  .tbl.stack, .tbl.stack tbody { display: block; width: 100%; }
  .tbl.stack thead { display: none; }
  .tbl.stack tr { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; margin: 0 0 10px; padding: 6px 0; }
  .tbl.stack tr:hover td { background: transparent; }
  .tbl.stack td { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 0; padding: 6px 12px; min-width: 0 !important; text-align: right; white-space: normal; }
  .tbl.stack td::before { content: attr(data-label); text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; flex-shrink: 0; }
  .tbl.stack td[data-label=""]::before { display: none; }
  .tbl.stack td[data-label=""] { justify-content: flex-end; }
  .tbl.stack td:has(input, select, textarea) { flex-direction: column; align-items: stretch; text-align: left; }
  .tbl.stack td:has(input, select, textarea) input, .tbl.stack td:has(input, select, textarea) select { width: 100%; }
  .tbl.stack td.empty { justify-content: center; }
  .tbl.stack td.empty::before { display: none; }
  .tbl.stack .t-actions { justify-content: flex-end; flex-wrap: wrap; }
  .tbl-wrap { overflow-x: visible; }
  .panel.tbl-wrap { background: transparent; border: 0; }
  .kid-sub { display: grid; grid-template-columns: 90px 1fr; gap: 6px; }
  .section-head { flex-wrap: wrap; gap: 8px; }
  /* Großanzeige im Hochformat */
  .disp { padding: 16px; gap: 16px; }
  .disp-head { flex-wrap: wrap; }
  .disp-head .tools { opacity: 1; margin-left: 0; }
  .disp-main { grid-template-columns: 1fr; }
  .disp-clock { font-size: min(17vh, 21vw); }
  .disp-t { font-size: min(9vh, 12vw); }
  .disp-progress { flex-wrap: wrap; }
}
/* Fingerbedienung: größere Tippflächen, keine Zoom-Sprünge beim Tippen in Felder (iOS) */
@media (pointer: coarse) {
  .btn.sm { min-height: 38px; }
  .ed-ic { min-width: 34px; min-height: 34px; }
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea { font-size: 16px; }
}
@media (max-width: 860px) {
  .top-right { margin-left: auto; gap: 6px; }
  .brand { min-width: 0; }
  .brand b { font-size: 12.5px; }
}

/* ------------------------------------------------------------ Parkscheine (2 Karten je A4 quer) */
.park-ctrl { margin-bottom: 16px; }
.park-grid { display: grid; grid-template-columns: 2fr 1fr .7fr .7fr; gap: 0 12px; }
.park-grid .field.wide { grid-column: 1 / -1; }
@media (max-width: 860px) { .park-grid { grid-template-columns: 1fr 1fr; } .park-grid .field:first-child { grid-column: 1 / -1; } }
.park-pages { display: flex; flex-direction: column; align-items: center; gap: 24px; padding-bottom: 30px; }
.park-page {
  width: 297mm; height: 210mm; background: #fff; display: flex; box-shadow: 0 10px 40px rgba(0,0,0,.45); flex-shrink: 0;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; color: #002559; font-family: var(--font);
}
@media (max-width: 1240px) { .park-page { zoom: .75; } }
@media (max-width: 960px) { .park-page { zoom: .55; } }
@media (max-width: 700px) { .park-page { zoom: .32; } }
.pk-card { flex: 1; display: flex; flex-direction: column; position: relative; overflow: hidden; min-width: 0; }
.pk-empty { background: repeating-linear-gradient(45deg, #fafafa 0 10px, #f2f2f2 10px 20px); }
.pk-cut { width: 0; border-left: .4mm dashed #9aa7b8; }
.pk-head { position: relative; height: 58mm; color: #fff; overflow: hidden; background: #002559; }
.pk-gears { position: absolute; inset: 0; background-size: cover; background-position: center 45%; }
.pk-grad { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(0,96,175,.78) 0%, rgba(0,74,143,.72) 45%, rgba(0,37,89,.86) 100%); }
.pk-head-in { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3mm; text-align: center; }
.pk-title { font-family: var(--font-head); font-stretch: 125%; font-weight: 900; font-size: 34pt; text-transform: uppercase; letter-spacing: .02em; line-height: 1; }
.pk-season { font-family: var(--font-head); font-stretch: 125%; font-weight: 900; font-size: 19pt; text-transform: uppercase; color: transparent; -webkit-text-stroke: .35mm #fff; letter-spacing: .03em; }
.pk-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6mm; padding: 4mm 10mm; }
.pk-no { font-family: var(--font-head); font-stretch: 125%; font-weight: 900; color: #002559; line-height: .85; font-size: 150pt; letter-spacing: -.02em; }
.pk-no.d3 { font-size: 112pt; }
.pk-no.d4 { font-size: 86pt; }
.pk-logos { display: flex; align-items: center; justify-content: center; gap: 7mm; }
.pk-logos img { width: 30mm; height: 30mm; object-fit: contain; }
.pk-logos.solo img { width: 36mm; height: 36mm; }
.pk-vs { font-family: var(--font-head); font-stretch: 125%; font-weight: 900; font-size: 18pt; color: #0060AF; text-transform: uppercase; }
.pk-match { text-align: center; font-size: 11pt; line-height: 1.35; color: #002559; }
.pk-match b { font-weight: 800; }
.pk-extra { margin: 0 10mm 4mm; background: #0060AF; color: #fff; text-align: center; font-weight: 800; font-size: 15pt; padding: 3mm 4mm; border-radius: 2mm; text-transform: uppercase; letter-spacing: .03em; }
.pk-foot { display: flex; justify-content: space-between; align-items: center; gap: 4mm; background: #002559; color: #fff; padding: 3.5mm 8mm; font-size: 9pt; }
.pk-foot b { font-family: var(--font-head); font-stretch: 125%; text-transform: uppercase; font-size: 9.5pt; white-space: nowrap; }
@page parkquer { size: A4 landscape; margin: 0; }
@media print {
  body.park-mode { background: #fff !important; }
  body.park-mode .topbar, body.park-mode #alarms, body.park-mode #cdstrip, body.park-mode .tabs, body.park-mode .no-print, body.park-mode .mnav { display: none !important; }
  body.park-mode main { padding: 0 !important; max-width: none !important; }
  body.park-mode .park-pages { display: block; padding: 0; }
  body.park-mode .park-page { page: parkquer; zoom: 1 !important; box-shadow: none; margin: 0; break-after: page; page-break-after: always; }
  body.park-mode .park-page:last-child { break-after: auto; page-break-after: auto; }
}
@media (max-width: 860px) { .park-grid .field:nth-child(6) { grid-column: 1 / -1; } }

/* ------------------------------------------------------------ Listen Spieltag (VIP, Gewinnspiel, Akkreditierungen) */
.ls-top { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
.ls-top .field { margin-bottom: 0; min-width: 260px; flex: 1; }
.ls-show { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.ls-show .check-line { margin-bottom: 0; }
.ls-ed { margin-bottom: 16px; }
.ls-tabs { margin-bottom: 12px; flex-wrap: wrap; }
.ls-tabs small { opacity: .7; margin-left: 4px; }
.ls-opts { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0 12px; }
.ls-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.ls-row { display: flex; gap: 8px; align-items: flex-end; }
.ls-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.ls-cell input { min-height: 38px; padding: 5px 9px; }
@media (max-width: 700px) {
  .ls-opts { grid-template-columns: 1fr 1fr; } .ls-opts .field:first-child { grid-column: 1 / -1; }
  .ls-row { flex-wrap: wrap; background: var(--panel-2); padding: 8px; border-radius: 10px; }
  .ls-row .ls-cell { flex: 1 1 45% !important; }
}
.ls-pages { display: flex; flex-direction: column; align-items: center; gap: 24px; padding-bottom: 30px; }
.ls-page {
  width: 210mm; height: 297mm; background: #fff; color: #002559; display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0,0,0,.45);
  -webkit-print-color-adjust: exact; print-color-adjust: exact; flex-shrink: 0; overflow: hidden;
}
@media (max-width: 960px) { .ls-page { zoom: .6; } }
@media (max-width: 700px) { .ls-page { zoom: .42; } }
.ls-head { position: relative; color: #fff; background: #002559; min-height: 46mm; overflow: hidden; }
.ls-grad { position: absolute; inset: 0; background: linear-gradient(120deg, color-mix(in srgb, var(--lc) 82%, transparent) 0%, rgba(0,37,89,.86) 100%); }
.ls-head-in { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 8mm; padding: 9mm 13mm; min-height: 46mm; box-sizing: border-box; }
.ls-head h1 { font-family: var(--font-head); font-stretch: 125%; font-weight: 900; font-size: 26pt; line-height: 1.02; text-transform: uppercase; margin: 0 0 2.5mm; }
.ls-match { font-weight: 800; font-size: 13pt; }
.ls-when { font-size: 10.5pt; opacity: .9; margin-top: 1mm; }
.ls-logos { display: flex; align-items: center; gap: 3mm; flex-shrink: 0; }
.ls-logo { width: 21mm; height: 21mm; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.ls-logo img { width: 18mm; height: 18mm; object-fit: contain; }
.ls-logo.opp { background: transparent; border-radius: 0; }
.ls-logo.opp img { width: 21mm; height: 21mm; }
.ls-vs { font-family: var(--font-head); font-stretch: 125%; font-weight: 900; font-size: 12pt; text-transform: uppercase; }
.ls-tbl { width: calc(100% - 26mm); margin: 8mm 13mm 0; border-collapse: collapse; table-layout: fixed; font-size: 11pt; }
.ls-tbl th { background: var(--lc); color: #fff; font-weight: 700; padding: 3.5mm 2mm; border: .35mm solid #002559; text-align: center; font-size: 10pt; line-height: 1.2; hyphens: auto; }
.ls-tbl td { height: 13.2mm; border: .35mm solid #002559; padding: 1mm 2.5mm; text-align: center; vertical-align: middle; color: #000; overflow: hidden; word-wrap: break-word; }
.ls-tbl td.shade { background: #dbe5ef; }
.ls-tbl td.num { font-weight: 700; }
.ls-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding: 6mm 13mm; font-size: 9pt; color: #5b6b80; border-top: 1.2mm solid var(--lc); }
.ls-foot img { height: 11mm; width: auto; }
@media print {
  body.lists-mode { background: #fff !important; }
  body.lists-mode .topbar, body.lists-mode #alarms, body.lists-mode #cdstrip, body.lists-mode .tabs, body.lists-mode .no-print, body.lists-mode .mnav { display: none !important; }
  body.lists-mode main { padding: 0 !important; max-width: none !important; }
  body.lists-mode .ls-pages { display: block; padding: 0; }
  body.lists-mode .ls-page { zoom: 1 !important; box-shadow: none; margin: 0; break-after: page; page-break-after: always; }
  body.lists-mode .ls-page:last-child { break-after: auto; page-break-after: auto; }
}

/* Texte passen sich ihrem Feld an (fitText): feste Kästen, damit Überlauf messbar ist */
.ls-tbl td .fit { max-height: 11.4mm; overflow: hidden; overflow-wrap: anywhere; line-height: 1.15; }
.ls-tbl th .fit { max-height: 14mm; overflow: hidden; overflow-wrap: anywhere; line-height: 1.15; }
.ls-titles { min-width: 0; flex: 1; }
.ls-head h1[data-fit] { max-height: 22mm; overflow: hidden; overflow-wrap: anywhere; }
.ls-match[data-fit], .ls-when[data-fit] { white-space: nowrap; overflow: hidden; }
.pk-title[data-fit], .pk-season[data-fit] { white-space: nowrap; overflow: hidden; max-width: 100%; padding: 0 6mm; box-sizing: border-box; }
.pk-match[data-fit] { max-height: 16mm; overflow: hidden; width: 100%; }
.pk-extra[data-fit] { max-height: 20mm; overflow: hidden; overflow-wrap: anywhere; line-height: 1.15; }
.pk-foot span[data-fit] { white-space: nowrap; overflow: hidden; min-width: 0; flex: 1; }
/* keine Trennung mitten im Wort ohne Bindestrich: deutsche Silbentrennung, sonst Schrift verkleinern */
.ls-tbl td .fit, .ls-tbl th .fit, .ls-head h1[data-fit], .pk-extra[data-fit] { overflow-wrap: normal; word-break: normal; hyphens: auto; -webkit-hyphens: auto; }
.ls-tbl th { padding: 3mm 1.5mm; }
.ls-head h1[data-fit] { white-space: nowrap; hyphens: none; }

/* ------------------------------------------------------------ Presseplätze (A4-Schild je Platz) */
.pr-page {
  width: 210mm; height: 297mm; flex-shrink: 0; box-shadow: 0 10px 40px rgba(0,0,0,.45); color: #fff; overflow: hidden;
  background: #022856 url('/img/druck-hintergrund-hoch.png') center / cover no-repeat;
  display: flex; flex-direction: column; align-items: center; padding: 22mm 14mm 16mm; box-sizing: border-box;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
@media (max-width: 960px) { .pr-page { zoom: .6; } }
@media (max-width: 700px) { .pr-page { zoom: .42; } }
.pr-title { width: 100%; text-align: center; white-space: nowrap; overflow: hidden; font-family: var(--font-head); font-stretch: 125%; font-weight: 900; font-size: 46pt; text-transform: uppercase; color: transparent; -webkit-text-stroke: .5mm #fff; line-height: 1.15; }
.pr-names { flex: 1; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; overflow: hidden; max-height: 150mm;
  font-family: var(--font-head); font-stretch: 125%; font-weight: 900; font-size: 50pt; line-height: 1.12; text-transform: uppercase; overflow-wrap: normal; hyphens: auto; }
.pr-logos { width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; justify-items: center; gap: 6mm; }
.pr-logo img { display: block; object-fit: contain; }
.pr-logo.opp img { width: 42mm; height: 42mm; }
.pr-logo.own { width: 46mm; height: 46mm; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.pr-logo.own img { width: 42mm; height: 42mm; }
.pr-logo.hbl { background: #fff; border-radius: 3mm; padding: 2.5mm 3mm; }
.pr-logo.hbl img { width: 56mm; height: auto; }
@media print {
  body.lists-mode .pr-page { zoom: 1 !important; box-shadow: none; margin: 0; break-after: page; page-break-after: always; }
  body.lists-mode .pr-page:last-child { break-after: auto; page-break-after: auto; }
}
.pr-logo.hbl { background: transparent; padding: 0; border-radius: 0; } /* HBL-Logo ohne zusätzlichen weißen Rand */
/* Parkkarten füllend: Seite exakt A4 quer, keine Ränder, nichts darf eine Extraseite erzeugen */
@media print {
  body.park-mode, body.park-mode main, body.park-mode #view, body.park-mode #app { margin: 0 !important; padding: 0 !important; }
  body.park-mode .park-page { width: 297mm !important; height: 209.5mm !important; overflow: hidden; }
}
.pk-hbl { height: 8mm; width: auto; flex-shrink: 0; margin-left: 2mm; }
/* Gespann-Fotos benennen */
.ref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 10px; }
.ref-card { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px; }
.ref-card.open { border-color: var(--warn, #F59E0B); }
.ref-img { background: #022856; border-radius: 8px; aspect-ratio: 16 / 10; display: grid; place-items: end center; overflow: hidden; }
.ref-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ref-row { display: flex; gap: 6px; margin-top: 8px; }
.ref-row input { min-height: 36px; padding: 5px 9px; flex: 1; min-width: 0; }
.logo-dark { filter: drop-shadow(0 0 .5mm #fff) drop-shadow(0 0 .5mm #fff) drop-shadow(0 0 .3mm #fff); } /* dunkle Gegner-Logos auf dunklem Grund */

/* ------------------------------------------------------------ Großanzeige responsiv (Handy, Tablet, PC, TV)
   Schriftgrößen richten sich nach Höhe UND Breite – das Knappere gewinnt, nichts läuft aus dem Bild */
.disp { padding: clamp(12px, 3vh, 48px) clamp(14px, 4vw, 80px); gap: clamp(10px, 3vh, 40px); box-sizing: border-box; overflow-x: hidden; }
.disp-head { flex-wrap: wrap; gap: 12px 20px; }
.disp-head .logo-wrap { width: clamp(44px, 8vh, 120px); height: clamp(44px, 8vh, 120px); flex-shrink: 0; }
.disp-head img { width: 88%; height: 88%; }
.disp-head h1 { font-size: clamp(20px, min(3.6vh, 4.2vw), 64px); }
.disp-head .muted { font-size: clamp(13px, min(2.2vh, 2.6vw), 34px); }
.disp-head > div:nth-child(2) { min-width: 0; flex: 1; }
.disp-main { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); min-width: 0; }
.disp-main > * { min-width: 0; }
.disp-clock { font-size: min(17vh, 9.6vw); white-space: nowrap; }
.disp-t { font-size: min(9vh, 5.4vw); white-space: nowrap; }
.disp-clock-lbl, .disp-lbl { font-size: clamp(11px, min(2vh, 1.6vw), 28px); }
.disp-card { padding: clamp(10px, 2.2vh, 32px) clamp(12px, 2vw, 36px); }
.disp-card .t { font-size: clamp(16px, min(3.4vh, 2.6vw), 56px); overflow-wrap: anywhere; }
.disp-card .c { font-size: clamp(18px, min(4.2vh, 3.2vw), 68px); }
.disp-progress { flex-wrap: wrap; gap: 12px clamp(16px, 3vw, 60px); font-size: clamp(12px, min(2.4vh, 2vw), 36px); }
.disp-progress b { font-size: clamp(18px, min(3.4vh, 2.8vw), 54px); }
/* Hochformat (Handy, Tablet hochkant): Uhr und Karten untereinander, Größe an der Breite ausrichten */
@media (orientation: portrait), (max-width: 760px) {
  .disp-main { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .disp-clock { font-size: min(14vh, 17.5vw); }
  .disp-t { font-size: min(8vh, 13vw); }
  .disp-clock-lbl, .disp-lbl { font-size: clamp(11px, 3.2vw, 26px); }
  .disp-card .t { font-size: clamp(16px, 5vw, 48px); }
  .disp-card .c { font-size: clamp(18px, 6vw, 56px); }
  .disp-head h1 { font-size: clamp(18px, 5.4vw, 52px); }
  .disp-head .muted { font-size: clamp(12px, 3.4vw, 28px); }
  .disp-progress { font-size: clamp(12px, 3.4vw, 28px); }
  .disp-progress b { font-size: clamp(18px, 5vw, 44px); }
}
/* Handy quer (wenig Höhe): kompakter Kopf */
@media (orientation: landscape) and (max-height: 500px) {
  .disp-head .muted { display: none; }
  .disp-head h1 { font-size: clamp(16px, 5vh, 28px); }
}
.disp-head .tools .btn { white-space: nowrap; }
.disp { padding-top: max(clamp(12px, 3vh, 48px), env(safe-area-inset-top)); padding-left: max(clamp(14px, 4vw, 80px), env(safe-area-inset-left)); padding-right: max(clamp(14px, 4vw, 80px), env(safe-area-inset-right)); padding-bottom: max(clamp(12px, 3vh, 48px), env(safe-area-inset-bottom)); } /* iPhone-Notch / Home-Bildschirm-App */
@media (orientation: portrait), (max-width: 760px) { .disp-head .tools { order: 3; flex-basis: 100%; margin-left: 0; opacity: 1; } .disp-head .tools .btn { flex: 1; justify-content: center; min-height: 40px; } }
.label-edit { display: flex; gap: 8px; align-items: flex-end; margin: 10px 0; padding: 10px; background: #001029; border: 1px solid var(--line); border-radius: 10px; } .label-edit .btn { min-height: 40px; }
.area-multi { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .area-multi .chip { cursor: pointer; user-select: none; } .area-multi .chip[hidden] { display: none; }
.sh-area .sh-chip { margin: .3mm .6mm .3mm 0; } /* mehrere Gruppen je Punkt */
.move-btns { display: inline-flex; gap: 2px; margin-left: 6px; vertical-align: middle; } .move-btns .btn { padding: 2px 6px; min-height: 26px; } tr.same-time td:first-child { box-shadow: inset 3px 0 0 var(--brand); } @media (pointer: coarse) { .move-btns .btn { min-height: 34px; min-width: 34px; } }

/* ---------- Starting 7 (Aufstellung, Live, Saison, Sendung) */
.s7-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1000px) { .s7-grid { grid-template-columns: 1fr; } }
.s7-h { font-size: 14px; margin: 4px 0 10px; color: #fff; }
.s7-court { display: grid; grid-template-areas: "LA RM RA" "RL KM RR" ". TW ."; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  background: rgba(0,96,175,.25); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 12px; margin-bottom: 14px; }
.s7-slot { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.s7-slot span { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--muted); }
.s7-slot select { width: 100%; min-width: 0; min-height: 36px; }
.s7-bench { display: flex; flex-wrap: wrap; gap: 6px; }
.s7-fmts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.s7-canvas { background: repeating-conic-gradient(#1b2a40 0 25%, #14223a 0 50%) 0 0 / 22px 22px; border-radius: 10px; padding: 10px; display: flex; justify-content: center; }
.s7-canvas canvas { max-width: 100%; max-height: 68vh; height: auto; width: auto; border-radius: 6px; box-shadow: 0 6px 24px rgba(0,0,0,.4); }
.s7-canvas.tv canvas { width: 100%; max-height: none; }
.s7-actions { margin-top: 10px; }
.s7-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 14px 18px; margin-bottom: 14px; }
.s7-score > div { display: flex; align-items: center; gap: 12px; min-width: 0; }
.s7-score > div:last-child { flex-direction: row-reverse; text-align: right; }
.s7-score img { width: 54px; height: 54px; object-fit: contain; flex-shrink: 0; }
.s7-score b { font-family: var(--font-head); font-stretch: 125%; text-transform: uppercase; font-size: 15px; overflow-wrap: anywhere; }
.s7-res { flex-direction: column !important; text-align: center !important; }
.s7-res b { font-size: 40px !important; line-height: 1; }
.s7-res span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.s7-ptbl td, .s7-ptbl th { padding: 5px 7px; }
.s7-mini { width: 22px; height: 22px; object-fit: contain; vertical-align: middle; }
tr.s7-own td { background: rgba(237,26,52,.18); }
.s7-onair { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.s7-url { display: flex; gap: 8px; margin-bottom: 8px; }
.s7-url input { flex: 1; min-width: 0; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.s7-tvprev { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: repeating-conic-gradient(#1b2a40 0 25%, #14223a 0 50%) 0 0 / 22px 22px; }
.s7-tvprev iframe { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; border: 0; transform-origin: 0 0; }
@media (max-width: 700px) { .s7-score { grid-template-columns: 1fr; text-align: center; } .s7-score > div, .s7-score > div:last-child { justify-content: center; flex-direction: row; } }

/* ---------- Programmheft (Ausdrucke → Programmheft), A4 hoch */
.hp-top { margin-bottom: 12px; }
.hp-grid { display: grid; grid-template-columns: auto minmax(320px, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .hp-grid { grid-template-columns: 1fr; } }
.hp-prev { overflow: auto; background: #5b6675; border-radius: 10px; padding: 14px; }
.hp-prev .hp-page { zoom: .62; }
@media (max-width: 700px) { .hp-prev .hp-page { zoom: .4; } }
.hp-ed { max-height: calc(100vh - 160px); overflow: auto; }
.hp-ed input[type=text], .hp-ed textarea, .hp-ed select { width: 100%; }
.hp-ed-roster input { min-width: 0; width: 100%; padding: 3px 6px; font-size: 12.5px; }
.hp-tools { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 4px 0 6px; }
.hp-tools select { width: auto !important; }
.hp-tools input[type=color] { width: 34px; height: 30px; padding: 0; border: 0; background: none; }
.hp-slot { border: 1px solid var(--line); border-radius: 8px; padding: 8px; margin-bottom: 8px; display: grid; gap: 6px; }
.hp-adj { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 8px; align-items: end; font-size: 11.5px; color: var(--muted); margin: 6px 0; }
.hp-adj label { display: flex; flex-direction: column; gap: 2px; }
.hp-print { display: none; }

.hp-page { width: 210mm; height: 297mm; background: #fff; color: #14202e; position: relative; overflow: hidden; box-sizing: border-box;
  font-family: var(--font); font-size: 10.5pt; line-height: 1.38; box-shadow: 0 8px 30px rgba(0,0,0,.35); margin: 0 auto;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; display: flex; flex-direction: column; }
.hp-page b { font-weight: 900; }
.hp-ph { display: flex; align-items: center; justify-content: center; background: #e7e8e9; color: #8a94a3; font-weight: 700; width: 100%; height: 100%; }
/* Seite 1 – Aufstellung */
.hp-bar { height: 9mm; background: #ED1A34; flex-shrink: 0; }
.hp-team { height: 112mm; overflow: hidden; flex-shrink: 0; background: #e7e8e9; }
.hp-team img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-bar2 { height: 14mm; display: flex; align-items: center; gap: 4mm; padding: 0 12mm; color: #fff; }
.hp-bar2 img { height: 11mm; width: auto; filter: drop-shadow(0 0 1.2mm rgba(255,255,255,.9)); }
.hp-bar2 b { font-family: var(--font-head); font-stretch: 125%; text-transform: uppercase; font-size: 17pt; letter-spacing: .02em; }
.hp-caps { padding: 3mm 12mm 1mm; font-size: 8.6pt; line-height: 1.32; }
.hp-caps p { margin: 0 0 1.2mm; }
.hp-caps b { color: #0060AF; }
.hp-roster { width: calc(100% - 24mm); margin: 2mm 12mm 0; border-collapse: collapse; font-size: 9pt; }
.hp-roster th { background: #0060AF; color: #fff; text-align: left; font-family: var(--font-head); font-stretch: 125%; text-transform: uppercase; font-size: 7.6pt; padding: 1.4mm 2mm; letter-spacing: .04em; }
.hp-roster td { padding: 1.05mm 2mm; border-bottom: .3mm solid #dfe3e8; }
.hp-roster tr:nth-child(even) td { background: #f2f4f7; }
.hp-roster td:first-child { font-family: var(--font-head); font-stretch: 125%; color: #ED1A34; font-weight: 900; width: 9mm; }
.hp-staff { margin: auto 12mm 8mm; padding-top: 3mm; border-top: .5mm solid #ED1A34; font-size: 9pt; display: grid; gap: 1.2mm; }
.hp-staff i { color: #ED1A34; font-style: normal; margin: 0 3mm; }
.hp-staff b { color: #0060AF; }
/* Seite 2 – Liga-Überblick */
.hp-p2 { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6mm; padding: 10mm; }
.hp-box { border: .6mm solid #0060AF; border-radius: 3mm; padding: 4mm 4.5mm; overflow: hidden; display: flex; flex-direction: column; }
.hp-box h2 { font-family: var(--font-head); font-stretch: 125%; text-transform: uppercase; color: #fff; background: #0060AF; margin: -4mm -4.5mm 3mm; padding: 2.4mm 4.5mm;
  font-size: 10pt; display: flex; align-items: center; justify-content: space-between; gap: 3mm; letter-spacing: .02em; }
.hp-box h2 img { height: 7mm; width: auto; }
.hp-box h2 small { font-family: var(--font); font-stretch: 100%; font-weight: 400; font-size: 7.5pt; text-transform: none; }
.hp-day { font-weight: 900; color: #ED1A34; font-size: 8.2pt; margin: 2mm 0 .6mm; }
.hp-game { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 1.5mm; font-size: 8.4pt; padding: .7mm 0; border-bottom: .25mm solid #e5e8ec; }
.hp-game span:nth-of-type(2) { text-align: left; }
.hp-game i { font-style: normal; color: #8a94a3; }
.hp-game b { min-width: 11mm; text-align: right; color: #002559; }
.hp-table { width: 100%; border-collapse: collapse; font-size: 7.9pt; }
.hp-table th { text-align: left; color: #0060AF; font-size: 7pt; padding: .5mm 1mm; }
.hp-table td { padding: .55mm 1mm; border-bottom: .25mm solid #e5e8ec; white-space: nowrap; }
.hp-table tr.own td { background: #ED1A34; color: #fff; }
.hp-empty { color: #8a94a3; font-style: italic; }
.hp-own { white-space: normal; font-size: 8.6pt; }
/* freie Seiten im Stil des Hallenheftes */
.hp-free { padding: 14mm 13mm 16mm; }
.hp-bg { position: absolute; inset: 0; background: #002559 center / cover no-repeat; z-index: 0; }
.hp-free.bg-flaeche .hp-bg { inset: 0 0 auto 0; height: 62%; }
.hp-free > *:not(.hp-bg) { position: relative; z-index: 1; }
.hp-free.dark.bg-seite { color: #fff; }
.hp-free.dark.bg-seite .hp-head, .hp-free.dark .hp-head { color: #fff; }
.hp-free.dark.bg-seite figcaption { color: #dbe6f5; }
.hp-deco { position: absolute !important; top: 0; right: 10mm; display: flex; gap: 2.2mm; height: 22mm; }
.hp-deco.r { right: auto; left: 10mm; }
.hp-deco i { width: 5mm; background: #ED1A34; transform: skewX(-20deg); }
.hp-deco i:nth-child(2) { background: #0060AF; }
.hp-deco i:nth-child(3) { background: #002559; }
.hp-head { font-family: var(--font-head); font-stretch: 125%; font-weight: 900; text-transform: uppercase; color: #0060AF; font-size: 22pt; line-height: 1.05;
  margin: 6mm 0 5mm; display: flex; flex-direction: column; position: relative; padding-bottom: 3mm; }
.hp-head span:nth-child(n+2) { font-size: 12pt; color: inherit; opacity: .9; }
.hp-head::after { content: ""; position: absolute; left: 0; right: -13mm; bottom: 0; height: 1.2mm; background: #ED1A34; }
.hp-head.r { text-align: right; }
.hp-head.r::after { left: -13mm; right: 0; }
.hp-text { flex: 1; overflow: hidden; column-count: 2; column-gap: 7mm; min-height: 20mm; }
.hp-text p { margin: 0 0 1.6mm; }
.hp-text p.hp-gap { margin: 0 0 1.6mm; height: 0; }
.hp-text h3 { font-family: var(--font-head); font-stretch: 125%; text-transform: uppercase; color: #ED1A34; font-size: 1.1em; margin: 2.5mm 0 1.2mm; break-after: avoid; }
.hp-text .lead { font-weight: 900; }
.hp-text .q { color: #0060AF; font-weight: 900; }
.hp-text .big { font-size: 1.2em; }
.hp-text .small { font-size: .85em; }
.hp-text .center { text-align: center; }
.hp-text ul { margin: 0 0 1.6mm; padding-left: 4.5mm; }
.hp-photos { display: grid; gap: 3mm; margin: 3mm 0; }
.hp-photos figure { margin: 0; display: flex; flex-direction: column; min-height: 0; }
.hp-fr { overflow: hidden; flex: 1; min-height: 0; background: #e7e8e9; }
.hp-fr img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-photos figcaption { font-size: 7.6pt; color: #4b5563; margin-top: 1mm; line-height: 1.25; }
.hp-photos.top.t1 { grid-template-columns: 1fr; height: 70mm; }
.hp-photos.top.t2 { grid-template-columns: 1fr 1fr; height: 58mm; }
.hp-photos.l1q { grid-template-columns: 1fr; height: 95mm; }
.hp-photos.l1h { grid-template-columns: 1fr; height: 135mm; width: 72%; margin-left: auto; margin-right: auto; }
.hp-photos.l2n { grid-template-columns: 1fr 1fr; height: 62mm; }
.hp-photos.l2u { grid-template-columns: 1fr; height: 120mm; }
.hp-photos.l4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; height: 112mm; }
.hp-photos.l6 { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); height: 160mm; }
.hp-photos.l3n { grid-template-columns: repeat(3, 1fr); height: 50mm; }
.hp-num { position: absolute !important; bottom: 0; left: 13mm; display: flex; flex-direction: column; align-items: center; }
.hp-num.r { left: auto; right: 13mm; }
.hp-num b { font-family: var(--font-head); font-stretch: 125%; font-size: 12pt; color: #000; padding-bottom: 1mm; }
.hp-free.dark.bg-seite .hp-num b { color: #fff; }
.hp-num i { width: 12mm; height: 4mm; background: #ED1A34; }
.hp-over { position: absolute !important; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #ED1A34; color: #fff; font-weight: 900; padding: 3mm 6mm; border-radius: 2mm; }
@media print {
  body.lists-mode .hp-grid, body.lists-mode .hp-top { display: none !important; }
  body.lists-mode .hp-print { display: block; }
  body.lists-mode .hp-print .hp-page { zoom: 1 !important; box-shadow: none; margin: 0; break-after: page; page-break-after: always; }
  body.lists-mode .hp-print .hp-page:last-child { break-after: auto; page-break-after: auto; }
  .hp-over { display: none !important; }
}

/* Starting 7: Hintergrund-Auswahl */
.s7-bgpick { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.s7-bgpick .lbl { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 6px; }
.s7-bgchip { display: inline-flex; align-items: center; gap: 6px; }
.s7-bgchip img { width: 22px; height: 30px; object-fit: cover; border-radius: 3px; }

/* Listen Spieltag: Eingabe als Tabelle */
.ls-edtbl { width: 100%; border-collapse: collapse; }
.ls-edtbl th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 4px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ls-edtbl td { padding: 3px 4px; border-bottom: 1px solid rgba(255,255,255,.05); }
.ls-edtbl td input { width: 100%; min-width: 90px; min-height: 36px; }
.ls-edtbl td.ls-n { width: 30px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.ls-edtbl tr.ls-new input { opacity: .75; border-style: dashed; }
.ls-edtbl tr.ls-new input:focus { opacity: 1; }
.ls-more { margin-top: 12px; }
.ls-more summary { cursor: pointer; color: var(--muted); font-size: 13px; }
@media (max-width: 700px) { .ls-edtbl td input { min-width: 120px; } }

/* Interview-Spieler (DYN): Auswahl im Ablauf, Anzeige auf Bögen */
.pl-quick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.pl-quick select { min-width: 160px; min-height: 32px; padding: 2px 6px; }
.pl-meta { color: #ffd27a; }
.sh-ivw { font-weight: 800; color: #0060AF; font-size: 9.5pt; margin-top: .4mm; }
.print-only { display: none; }
@media print { .print-only { display: block; } }

/* Gast: keine Alarme/Ton-Hinweise, keine Bedienelemente */
body.guest #alarms, body.guest #cdstrip .btn, body.guest .audio-hint { display: none !important; }

/* Großanzeige: links Uhr/Jetzt/Als Nächstes, rechts die nächsten 10 Aufgaben */
.disp-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(14px, 2.5vw, 48px); flex: 1; min-height: 0; }
.disp-left { display: flex; flex-direction: column; gap: clamp(10px, 3vh, 40px); min-width: 0; }
.disp-split .disp-main { grid-template-columns: minmax(0, 1fr); align-items: start; flex: 1; }
.disp-split .disp-clock { font-size: min(15vh, 8vw); }
.disp-split .disp-t { font-size: min(8vh, 4.4vw); }
.disp-tasks { background: rgba(0, 26, 64, .6); border-radius: 16px; padding: clamp(10px, 2vh, 26px) clamp(10px, 1.4vw, 26px); min-width: 0; overflow: hidden; display: flex; flex-direction: column; gap: 1vh; }
.disp-task { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(8px, 1vw, 18px); align-items: center; background: var(--panel); border-left: .8vh solid var(--area);
  border-radius: 10px; padding: clamp(6px, 1.1vh, 16px) clamp(8px, 1vw, 18px); }
.disp-task .dt-time { font-family: var(--font-head); font-stretch: 125%; font-size: clamp(14px, min(2.6vh, 1.6vw), 40px); color: #cfe2ff; min-width: 4.2em; }
.disp-task b { font-size: clamp(14px, min(2.4vh, 1.5vw), 38px); display: block; overflow-wrap: anywhere; line-height: 1.15; }
.disp-task .dt-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: clamp(11px, min(1.6vh, 1vw), 24px); color: var(--muted); margin-top: .3vh; }
.disp-task .badge { margin-left: 0; }
.disp-task .dt-flag { background: var(--red); color: #fff; font-weight: 900; padding: 1px 8px; border-radius: 6px; letter-spacing: .05em; }
.disp-task .dt-flag.late { background: var(--warn); color: #1d1300; }
.disp-task.st-alarm { box-shadow: 0 0 0 3px var(--red) inset; animation: phase-blink 1.2s ease-in-out infinite; }
.disp-task.st-warn { box-shadow: 0 0 0 2px var(--warn) inset; }
.disp-task .check { font-size: clamp(13px, min(2vh, 1.2vw), 30px); min-height: clamp(36px, 5vh, 70px); padding: 0 clamp(10px, 1vw, 22px); white-space: nowrap; }
.disp-task .check.must { background: var(--red); border-color: var(--red); color: #fff; }
.disp-none { color: var(--muted); font-size: clamp(14px, 2.4vh, 36px); padding: 2vh 0; }
@media (orientation: portrait), (max-width: 900px) {
  .disp-split { grid-template-columns: minmax(0, 1fr); }
  .disp-split .disp-clock { font-size: min(14vh, 17.5vw); }
  .disp-split .disp-t { font-size: min(8vh, 13vw); }
  .disp-task .dt-time { font-size: clamp(14px, 4vw, 32px); }
  .disp-task b { font-size: clamp(14px, 4.2vw, 32px); }
  .disp-task .dt-meta { font-size: clamp(11px, 3vw, 22px); }
  .disp-task .check { font-size: clamp(13px, 3.6vw, 26px); }
}

/* Knöpfe nur zum Ansehen (Gast/„Nur lesen“, fremder Bereich) */
.check[disabled] { opacity: .55; cursor: not-allowed; }
.disp-task .check.must[disabled] { background: rgba(237,26,52,.35); border-color: rgba(237,26,52,.6); }
.disp-filter { margin-left: 8px; color: #ffd27a; text-transform: none; letter-spacing: 0; font-weight: 700; }

/* ThSV: das h bleibt klein, auch in Großbuchstaben-Zeilen */
.thsv { text-transform: none; }

/* ThSV-Logo: nur ein dünner weißer Rand (das PNG hat transparenten Rand – Kreis füllt 94 % der Breite) */
.brand .logo-wrap, .disp-head .logo-wrap, .login-box .logo-wrap { box-sizing: border-box; padding: 2px; overflow: hidden; display: block; }
.disp-head .logo-wrap { padding: 2.5px; }
.login-box .logo-wrap { padding: 4px; }
/* Logo-Datei hat einen durchsichtigen Rand (Kreis: x 33–1042, y 17–1023 von 1072×1028) → Kreis exakt auf die Innenfläche legen,
   damit der weiße Ring rundum gleich dick ist */
.brand .logo-wrap img, .disp-head .logo-wrap img, .login-box .logo-wrap img,
.sh-logo:not(.opp) img, .ls-logo:not(.opp) img, .pr-logo.own img {
  display: block; justify-self: start; max-width: none; width: 106.24% !important; height: 102.19% !important; margin: -1.69% 0 0 -3.27%; object-fit: fill; transform: none;
}

/* Header mit Zahnrädern: kein Farbverlauf mehr – Markenbuch: Zahnräder ThSV-Blau #0060AF auf Nachthimmel #002559.
   Das Zahnrad-PNG hat schwarzen Grund – „lighten“ macht daraus Nachthimmel, die Zahnräder bleiben ThSV-Blau. */
.sh-head, .sheet .sh-head.has-bg, .pk-head, .ls-head { background: #002559; isolation: isolate; }
.sh-head-gears, .pk-gears { mix-blend-mode: lighten; }
.sh-head.has-bg::after { display: none; }
.sh-head-grad, .pk-grad { display: none; }
.sheet.frame .sh-head, .sheet.frame .sh-head.has-bg { background: transparent; }
.ls-grad { display: none; }

/* Gast-Spieler im Banner etwas kleiner als der ThSV-Spieler (steht dahinter) */
.sh-pl.away { height: 150%; top: 9mm; max-width: 31%; }

/* ThSV-Logo in den Druck-Headern (Bögen, Listen, Preisschilder): nur ein ganz dünner weißer Rand */
.sh-logo:not(.opp), .ls-logo:not(.opp), .pr-logo.own { box-sizing: border-box; padding: .6mm; overflow: hidden; display: block; }
.pr-logo.own { padding: 1.2mm; }

/* Parkkarten: beide Kopfzeilen gleich groß, Nummer mittig zwischen Muster-Kante und Logos, keine Trennlinie */
.pk-title, .pk-season { font-size: 30pt; line-height: 1.1; }
.pk-cut { border-left: 0; }
.pk-body { justify-content: flex-start; gap: 0; padding: 0 10mm 7mm; }
.pk-no { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; line-height: 1; }
.pk-no span { display: block; line-height: .72; padding-top: .02em; } /* Kasten = Ziffernhöhe, damit wirklich die Ziffern mittig sitzen */
.pk-match { margin-top: 5mm; }

/* Listen Spieltag: nur eingetragene Zeilen untereinander; feste Höhe, so dass eine volle Seite bis zur Fußzeile reicht */
.ls-tbl td { height: 13.8mm; }

/* Presseplätze: Logos ThSV – HBL – Gast ganz unten; Abstand nach unten = Abstand der Schrift „Arbeitsplatz Presse“ nach oben */
.pr-page { padding-bottom: 22.8mm; }
.pr-logos { margin-top: auto; }

/* Presseplätze: ThSV-Spieler vor dem Zahnrad-Hintergrund, von unten bis etwa zur Mitte; Texte und Logos liegen darüber */
.pr-page { position: relative; }
.pr-page > :not(.pr-player) { position: relative; z-index: 1; }
.pr-player { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); height: 52%; width: auto; max-width: 100%; object-fit: contain; object-position: bottom; pointer-events: none; }
.pr-bgpick { display: grid; grid-template-columns: 2fr 1fr; gap: 0 12px; margin-bottom: 6px; }
@media (max-width: 700px) { .pr-bgpick { grid-template-columns: 1fr; } }

/* Großanzeige: Videobeweis (eingebettete Seite über die ganze Fläche, Zurück-Knopf immer sichtbar) */
.disp-progress { align-items: center; order: -1; } /* ueber der Uhr, damit der Videobeweis-Knopf ohne Scrollen sichtbar ist */
.vb-open { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; flex-shrink: 0; min-height: clamp(52px, 8vh, 110px); padding: 0 clamp(14px, 1.5vw, 40px); border-radius: 12px; background: #ED1A34; color: #fff !important; font-family: var(--font-head); font-stretch: 125%; font-weight: 900; font-size: clamp(15px, min(2.5vh, 1.45vw), 40px); text-transform: uppercase; text-decoration: none; box-shadow: 0 4px 18px rgba(237,26,52,.45); }
.vb-open:hover { background: #ff3049; }
@media (min-width: 761px) { .disp-split .disp-progress { flex-wrap: nowrap; } }
.disp-split .disp-main { align-content: start; } /* „Als Nächstes“ direkt unter der Uhr, nicht unten aus dem Bild */
.vb { height: 100vh; height: 100dvh; display: flex; flex-direction: column; box-sizing: border-box; }
.vb-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left)); background: #002559; }
.vb-head b { font-family: var(--font-head); font-stretch: 125%; text-transform: uppercase; }
.vb-clock { margin-left: auto; font-family: var(--font-head); font-stretch: 125%; font-size: 20px; }
.vb .disp-alarms:not(:empty) { padding: 8px 14px 0; }
.vb-frame { flex: 1; min-height: 0; width: 100%; border: 0; background: #fff; }

/* Schiedsrichter-Aufsteller: A5 hoch, ruhiger Zahnrad-Hintergrund, Namen und Logos darüber */
.au-pages { display: flex; justify-content: center; padding-bottom: 30px; }
.au-page {
  position: relative; width: 148mm; height: 210mm; flex-shrink: 0; overflow: hidden; box-sizing: border-box; background: #002559; color: #fff;
  display: flex; flex-direction: column; align-items: center; padding: 20mm 10mm 23mm; box-shadow: 0 10px 40px rgba(0,0,0,.45);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.au-page::before { content: ''; position: absolute; inset: 0; background: url('/img/s7-zahnrad-hoch.png') center / cover no-repeat; opacity: .22; }
.au-page > * { position: relative; }
.au-title { font-family: var(--font-head); font-stretch: 125%; font-weight: 900; font-size: 32pt; line-height: 1.2; text-align: center; text-transform: uppercase; color: transparent; -webkit-text-stroke: .32mm #fff; white-space: nowrap; }
.au-names { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; font-family: var(--font); font-stretch: 86%; font-weight: 900; font-size: 28pt; line-height: 1.3; text-align: center; text-transform: uppercase; white-space: nowrap; }
.au-logos { display: flex; align-items: center; justify-content: center; gap: 5mm; flex-shrink: 0; }
.au-logo { display: block; width: 40mm; height: 40mm; }
.au-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.au-logo.own { overflow: hidden; border-radius: 50%; }
.au-logo.own img { max-width: none; width: 106.24%; height: 102.19%; margin: -1.69% 0 0 -3.27%; object-fit: fill; }
.au-vs { font-family: var(--font-head); font-stretch: 125%; font-weight: 900; font-size: 34pt; line-height: 1; text-transform: capitalize; transform: skewX(-8deg); }
@media (max-width: 700px) { .au-page { zoom: .6; } }
@media print {
  body.lists-mode .au-pages { display: block; padding: 0; }
  body.lists-mode .au-page { zoom: 1 !important; box-shadow: none; margin: 0; height: 209.5mm; }
}

.backup-warn { margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; background: rgba(237,26,52,.16); border: 1px solid #ED1A34; color: #ffd4da; }
.backup-warn b { color: #fff; }

/* Anhänge (PDF) an Aufgaben */
.det-tabs { margin: -4px 0 14px; }
.det-tabs small { opacity: .75; margin-left: 3px; }
.att-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.att-list li { display: flex; align-items: center; gap: 10px; background: #001029; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.att-ico { flex-shrink: 0; width: 34px; height: 40px; border-radius: 5px; background: #ED1A34; color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; letter-spacing: .04em; }
.att-main { flex: 1; min-width: 0; }
.att-main a { color: inherit; text-decoration: none; word-break: break-word; }
.att-main a:hover { text-decoration: underline; }
.att-up { margin-right: 8px; }
.pdf-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 2px; margin: 0 6px 0 0; border-radius: 6px; background: rgba(237,26,52,.14); border: 1px solid rgba(237,26,52,.55); color: #ffd4da; font: inherit; font-size: 12px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; vertical-align: middle; }
.pdf-chip b { background: #ED1A34; color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; padding: 2px 4px; border-radius: 4px; }
.r-meta:empty { display: none; } /* „Bereiche ausblenden“: keine leere Zeile unter dem Titel */
.pdf-chip:hover { background: rgba(237,26,52,.3); color: #fff; }
.att-btn { padding: 2px 7px; min-height: 0; font-size: 12px; opacity: .7; }
.att-btn:hover { opacity: 1; }

/* Verwaltung → Aufgaben-Übersicht: Bereichs-Filter als Chips */
.ov-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.ov-chip { display: inline-flex; align-items: center; gap: 4px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); color: inherit; font: inherit; font-size: 13px; cursor: pointer; }
.ov-chip small { opacity: .65; }
.ov-chip.on { border-color: var(--c, #0060AF); background: color-mix(in srgb, var(--c, #0060AF) 28%, var(--panel-2)); font-weight: 700; }
.ov-chip .areadot { margin-right: 2px; }
tr.ov-done td { opacity: .6; }
/* Ablauf bearbeiten: Bereichs-Filter direkt in der Spaltenüberschrift */
.th-filter select { min-height: 0; width: auto; max-width: 220px; padding: 4px 26px 4px 8px; font: inherit; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: inherit; background-color: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
@media (max-width: 700px) { /* Handy (Tabelle als Karten): nur der Filter bleibt von der Kopfzeile sichtbar */
  .tbl.stack thead:has(.th-filter) { display: block; }
  .tbl.stack thead:has(.th-filter) tr { display: block; background: none; border: 0; padding: 0; margin: 0 0 8px; }
  .tbl.stack thead:has(.th-filter) th:not(.th-filter) { display: none; }
  .tbl.stack thead .th-filter { display: block; padding: 0; border: 0; }
}
.th-filter select.on { border-color: var(--accent, #0060AF); color: #fff; background-color: color-mix(in srgb, #0060AF 35%, var(--panel-2)); }
.ov-areas { max-width: 420px; }
.ov-areas > span { display: inline-flex; align-items: center; white-space: nowrap; font-size: 12px; margin: 1px 10px 1px 0; }

/* ------------------------------------------------------------ Essensmarken (30 je A4 hoch: 3 × 10, Format 63,3 × 28 mm) */
.em-ctrl { margin-bottom: 16px; }
.em-grid { display: grid; grid-template-columns: 2fr .7fr .7fr 1fr 1.4fr; gap: 0 12px; }
.em-grid .field:last-child { grid-column: 1 / -1; }
@media (max-width: 860px) { .em-grid { grid-template-columns: 1fr 1fr; } .em-grid .field:first-child { grid-column: 1 / -1; } }
.em-colors { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.em-colors input[type=color] { width: 54px; height: 38px; padding: 2px; border-radius: 8px; cursor: pointer; }
.em-sw { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); cursor: pointer; padding: 0; }
.em-sw.on { border-color: #fff; box-shadow: 0 0 0 3px var(--accent, #0060AF); }
.em-pages { display: flex; flex-direction: column; align-items: center; gap: 24px; padding-bottom: 30px; }
.em-page {
  --ink: #fff; --ink-soft: rgba(255,255,255,.82); --cut: #9aa7b8;
  width: 210mm; height: 297mm; background-color: #fff; box-shadow: 0 10px 40px rgba(0,0,0,.45); flex-shrink: 0; position: relative; overflow: hidden;
  padding: 8.5mm 10mm; box-sizing: border-box; -webkit-print-color-adjust: exact; print-color-adjust: exact; font-family: var(--font);
  /* Schneidemarken im Rand: an jeder Zeilen- und Spaltenkante */
  background-image:
    repeating-linear-gradient(to bottom, var(--cut) 0 .2mm, transparent .2mm 28mm), repeating-linear-gradient(to bottom, var(--cut) 0 .2mm, transparent .2mm 28mm),
    repeating-linear-gradient(to right, var(--cut) 0 .2mm, transparent .2mm 63.3333mm), repeating-linear-gradient(to right, var(--cut) 0 .2mm, transparent .2mm 63.3333mm);
  background-size: 6mm 280.2mm, 6mm 280.2mm, 190.2mm 5.5mm, 190.2mm 5.5mm;
  background-position: 1.5mm 8.4mm, calc(100% - 1.5mm) 8.4mm, 9.9mm 1.5mm, 9.9mm calc(100% - 1.5mm);
  background-repeat: no-repeat;
}
.em-page.light { --ink: #002559; --ink-soft: rgba(0,37,89,.8); }
@media (max-width: 960px) { .em-page { zoom: .6; } }
@media (max-width: 700px) { .em-page { zoom: .42; } }
.em-sheet { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(10, 1fr); width: 190mm; height: 280mm; }
.em-card {
  position: relative; overflow: hidden; display: flex; align-items: center; background: var(--em); color: var(--ink);
  box-shadow: inset 0 0 0 .2mm rgba(255,255,255,.95); /* feine weiße Kante = Schnittlinie zwischen den Marken */
}
.em-card.em-empty { background: transparent; box-shadow: none; }
.em-gears { position: absolute; inset: 0; background: url('/img/banner-zahnraeder.png') center 40% / 150% auto no-repeat; filter: grayscale(1) brightness(1.6); mix-blend-mode: screen; opacity: .22; pointer-events: none; }
.em-page.light .em-gears { filter: grayscale(1) invert(1); mix-blend-mode: multiply; opacity: .12; }
.em-card::before { /* drei rote CI-Streifen oben links */
  content: ''; position: absolute; left: 0; top: 0; width: 9mm; height: 1.4mm; z-index: 1;
  background: repeating-linear-gradient(115deg, #ED1A34 0 1.4mm, transparent 1.4mm 2.4mm);
}
.em-logos { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .4mm; padding: 0 2.2mm 0 3mm; flex-shrink: 0; }
.em-logo { width: 9.6mm; height: 9.6mm; display: block; } /* Logos ohne weißen Kreis direkt auf der Markenfarbe */
.em-logo img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 .2mm .5mm rgba(0,0,0,.3)); }
.em-vs { font-family: var(--font-head); font-stretch: 125%; font-weight: 900; font-size: 5pt; line-height: 1; text-transform: uppercase; color: var(--ink); }
.em-txt { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .5mm; padding-right: 1.5mm; }
.em-title { font-family: var(--font-head); font-stretch: 125%; font-weight: 900; font-size: 11pt; line-height: 1; text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; overflow: hidden; }
.em-sub { font-weight: 700; font-size: 7.5pt; line-height: 1.15; white-space: nowrap; overflow: hidden; }
.em-when { font-size: 6.2pt; line-height: 1.15; color: var(--ink-soft); white-space: nowrap; overflow: hidden; }
.em-no { /* Abriss-Stummel rechts mit senkrechter Nummer */
  position: relative; z-index: 1; align-self: stretch; width: 10mm; flex-shrink: 0; border-left: .3mm dashed var(--ink-soft);
  display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--font-head); font-stretch: 125%; font-weight: 900; font-size: 10pt; letter-spacing: .04em; gap: .8mm;
}
.em-no small { font-family: var(--font); font-stretch: 100%; font-weight: 700; font-size: 5.5pt; letter-spacing: 0; opacity: .85; }
@media print {
  body.lists-mode .em-pages { display: block; padding: 0; }
  body.lists-mode .em-page { zoom: 1 !important; box-shadow: none; margin: 0; break-after: page; page-break-after: always; }
  body.lists-mode .em-page:last-child { break-after: auto; page-break-after: auto; }
}

/* Parkkarten: weißer Mittelstreifen mit Schneidekante genau in der Mitte (→ 2 × A5) */
.pk-cut { width: 8mm; flex-shrink: 0; background: #fff; position: relative; border-left: 0; }
.pk-cut::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; border-left: .3mm dashed #7d8da3; transform: translateX(-50%); }
.pk-cut::after { content: '✂'; position: absolute; left: 50%; top: 2mm; transform: translateX(-50%) rotate(90deg); font-size: 11pt; line-height: 1; color: #7d8da3; background: #fff; padding: .5mm 0; }

/* Programmheft-Editor: Ausrichtung links / zentriert / rechts */
.hp-align { display: inline-flex; gap: 2px; }
.hp-align .btn { padding-left: 8px; padding-right: 8px; display: inline-grid; place-items: center; }