/* Wettkampf – Farben und Bausteine wie im Abteilungsportal (SSV-Blau), hell, auch draußen gut lesbar. */
:root {
    --bg: #f5f6f8;
    --flaeche: #ffffff;
    --flaeche-2: #f0f2f5;
    --text: #1a1d23;
    --gedaempft: #626b79;
    --linie: #e2e5ea;
    --akzent: #0a4f9e;
    --akzent-hell: #e8f0fa;
    --gut: #1f8a53;
    --gut-hell: #e6f5ec;
    --warn: #b7791f;
    --warn-hell: #fdf3dc;
    --schlecht: #c0392b;
    --schlecht-hell: #fbe9e7;
    --gold: #c9a227;
    --silber: #9aa3ad;
    --bronze: #b0743c;
    --radius: 10px;
    color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; margin: 0; line-height: 1.2; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }
h3 { font-size: .95rem; margin: 0 0 .5rem; }
p { margin: 0 0 .75rem; }
small, .gedaempft { color: var(--gedaempft); }
.zahl { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

/* ---------- Gerüst ---------- */
.leiste { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 1rem; padding: .6rem 1rem; padding-top: max(.6rem, env(safe-area-inset-top)); background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.marke { font-weight: 800; color: var(--text); }
.leiste nav { display: flex; gap: .25rem; }
.leiste nav a { padding: .35rem .7rem; border-radius: 8px; color: var(--text); font-weight: 500; }
.leiste nav a.aktiv { background: var(--akzent-hell); color: var(--akzent); }
.leiste nav a:hover { text-decoration: none; background: var(--flaeche-2); }
.leiste__wer { margin-left: auto; font-size: .85rem; color: var(--gedaempft); white-space: nowrap; }
main { padding: 1.25rem 1.25rem 4rem; max-width: 1200px; margin: 0 auto; }
main.mitte { min-height: 100vh; display: grid; place-items: center; }
.schmal { width: min(420px, 100%); text-align: center; }
@media (max-width: 640px) {
    .leiste { gap: .5rem; }
    .leiste__wer { display: none; }
    main { padding: 1rem .9rem 4rem; }
}

/* ---------- Bausteine ---------- */
.kopf { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.kopf .gedaempft { margin: .2rem 0 0; }
.aktionen, .knopfzeile { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem 1.1rem; min-width: 0; margin-bottom: 1rem; }
.karte > h2:first-child { margin-top: 0; }
.raster { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.leer { color: var(--gedaempft); padding: 1rem 0; }

button, .knopf { font: inherit; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 40px; padding: .45rem .9rem; border-radius: 8px; border: 1px solid var(--linie); background: var(--flaeche); color: var(--text); cursor: pointer; text-decoration: none; }
button:hover, .knopf:hover { background: var(--flaeche-2); text-decoration: none; }
.primaer { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.primaer:hover { background: #083f7e; }
.gefahr { color: var(--schlecht); }
.klein { min-height: 32px; padding: .25rem .6rem; font-size: .85rem; }
button.link { border: 0; background: none; padding: 0; min-height: 0; color: var(--akzent); font-weight: 500; }
button:disabled { opacity: .5; cursor: progress; }

.chip { display: inline-block; padding: .1rem .5rem; border-radius: 999px; background: var(--flaeche-2); font-size: .78rem; font-weight: 600; white-space: nowrap; }
.chip.gut { background: var(--gut-hell); color: var(--gut); }
.chip.warn { background: var(--warn-hell); color: var(--warn); }
.chip.schlecht { background: var(--schlecht-hell); color: var(--schlecht); }
.chip.info { background: var(--akzent-hell); color: var(--akzent); }

.reiter { display: flex; gap: .25rem; border-bottom: 1px solid var(--linie); margin-bottom: 1rem; overflow-x: auto; scrollbar-width: none; }
.reiter button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; padding: .55rem .8rem; color: var(--gedaempft); white-space: nowrap; min-height: 42px; }
.reiter button.an { color: var(--akzent); border-bottom-color: var(--akzent); }

.felder { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); align-items: end; }
label.feld { display: grid; gap: .25rem; font-size: .82rem; font-weight: 600; color: var(--gedaempft); }
input, select, textarea { font: inherit; font-size: 16px; min-height: 42px; padding: .45rem .6rem; border: 1px solid var(--linie); border-radius: 8px; background: var(--flaeche); color: var(--text); width: 100%; }
textarea { min-height: 120px; font-family: ui-monospace, Menlo, monospace; font-size: 14px; }
input[type=checkbox] { width: 20px; min-height: 20px; height: 20px; accent-color: var(--akzent); }
label.haken { display: flex; gap: .5rem; align-items: center; font-weight: 500; color: var(--text); font-size: .95rem; min-height: 42px; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(10, 79, 158, .2); border-color: var(--akzent); }

.tabelle-scroll { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; }
.tabelle th, .tabelle td { text-align: left; padding: .5rem .55rem; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.tabelle th { font-size: .78rem; color: var(--gedaempft); font-weight: 600; }
.tabelle td.r, .tabelle th.r { text-align: right; }
.tabelle tr.klickbar { cursor: pointer; }
.tabelle tr.klickbar:hover td { background: var(--flaeche-2); }

.zeile { display: flex; align-items: center; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid var(--linie); }
.zeile:last-child { border-bottom: 0; }
.zeile .wachsen { flex: 1; min-width: 0; }

dialog { border: 0; border-radius: 14px; padding: 0; width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 40px); color: var(--text); }
dialog::backdrop { background: rgba(10, 20, 40, .45); }
dialog form, dialog .dialog-inhalt { padding: 1.1rem; display: grid; gap: .8rem; }
dialog h2 { margin: 0; }
#toast { position: fixed; left: 50%; bottom: max(1.2rem, env(safe-area-inset-bottom)); transform: translateX(-50%); background: #1a1d23; color: #fff; padding: .55rem 1rem; border-radius: 10px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 50; max-width: calc(100vw - 24px); }
#toast.an { opacity: 1; }
#toast.fehler { background: var(--schlecht); }

/* ---------- Organisator ---------- */
.wk-karte { display: block; color: var(--text); }
.wk-karte:hover { text-decoration: none; border-color: var(--akzent); }
.wk-karte h2 { margin-bottom: .25rem; }
.disz { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem .75rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--linie); }
.disz:last-child { border-bottom: 0; }
.team-kopf { display: flex; align-items: center; gap: .5rem; margin: 1rem 0 .25rem; }
.team-kopf h3 { margin: 0; flex: 1; }
.kind { display: flex; gap: .5rem; align-items: center; padding: .35rem 0; border-bottom: 1px solid var(--linie); }
.kind .wachsen { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr-karte { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 1rem; align-items: center; }
.qr-karte img, .qr-karte svg { width: 120px; height: 120px; image-rendering: pixelated; }
.qr-karte .url { font-size: .78rem; word-break: break-all; color: var(--gedaempft); }
.gesperrt { opacity: .55; }
.erg-eingabe { width: 5.5rem; min-height: 36px; padding: .25rem .4rem; text-align: right; }

@media print {
    .leiste, .reiter, .aktionen, .kopf .knopfzeile, .nicht-drucken, #toast { display: none !important; }
    body { background: #fff; }
    main { padding: 0; max-width: none; }
    .karte { border: 0; padding: 0; }
    .qr-karte { break-inside: avoid; border: 1px solid #ccc; padding: 10mm; margin-bottom: 8mm; grid-template-columns: 45mm 1fr; }
    .qr-karte img, .qr-karte svg { width: 45mm; height: 45mm; }
    .qr-karte h2 { font-size: 22pt; }
}

/* ---------- Kampfrichter-Station ---------- */
.leiste--station { justify-content: space-between; }
.sync { font-weight: 700; font-size: .85rem; padding: .2rem .6rem; border-radius: 999px; background: var(--gut-hell); color: var(--gut); }
.sync[data-zustand=offen] { background: var(--warn-hell); color: var(--warn); }
.sync[data-zustand=fehler] { background: var(--schlecht-hell); color: var(--schlecht); }
.station main { max-width: 640px; }
.wahl { display: grid; gap: .6rem; }
.wahl button { justify-content: space-between; min-height: 58px; font-size: 1.05rem; padding: .6rem 1rem; text-align: left; }
.wahl button small { font-weight: 500; }
.zurueck { margin-bottom: .75rem; }
.kind-gross { text-align: center; margin: .5rem 0 1rem; }
.kind-gross h1 { font-size: 1.7rem; }
.versuche { display: grid; gap: .6rem; }
.versuch { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; gap: .5rem; align-items: center; }
.versuche.einzeln .versuch { grid-template-columns: minmax(0, 1fr) auto; }
.versuch .nr { font-weight: 700; color: var(--gedaempft); text-align: center; }
.versuch input { font-size: 1.6rem; min-height: 58px; text-align: center; font-variant-numeric: tabular-nums; }
.versuch input.ungueltig { text-decoration: line-through; color: var(--schlecht); background: var(--schlecht-hell); }
.versuch .x { min-height: 58px; min-width: 58px; font-size: 1.2rem; }
.versuch .x.an { background: var(--schlecht); border-color: var(--schlecht); color: #fff; }
.einheit { text-align: center; color: var(--gedaempft); margin: .25rem 0 1rem; }
.navi { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1.25rem; }
.navi button { min-height: 56px; font-size: 1.05rem; }
.na-knopf { width: 100%; margin-top: .75rem; }
.na-knopf.an { background: var(--warn-hell); border-color: var(--warn); color: var(--warn); }
.kinderliste .zeile { cursor: pointer; }
.punkt { width: .7rem; height: .7rem; border-radius: 50%; background: var(--linie); flex: none; }
.punkt.fertig { background: var(--gut); }
.punkt.teil { background: var(--warn); }
.punkt.na { background: var(--gedaempft); }
.wert-kurz { font-variant-numeric: tabular-nums; color: var(--gedaempft); font-size: .9rem; }

/* ---------- Live ---------- */
.live main { max-width: 1400px; }
.live-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.platz { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--flaeche-2); font-weight: 800; font-variant-numeric: tabular-nums; }
.platz.p1 { background: var(--gold); color: #fff; }
.platz.p2 { background: var(--silber); color: #fff; }
.platz.p3 { background: var(--bronze); color: #fff; }
.rp { font-weight: 700; font-variant-numeric: tabular-nums; }
.rp small { display: block; font-weight: 400; font-size: .75rem; }
.offen { color: var(--gedaempft); font-weight: 400; }
.gesamt { font-size: 1.15rem; font-weight: 800; }
.gewertet { font-weight: 700; }
.kindzeile td { background: var(--flaeche-2); padding-top: .3rem; padding-bottom: .3rem; font-size: .9rem; }
.nicht-gewertet { color: var(--gedaempft); }
.blink { animation: blink 1.6s ease-out; }
@keyframes blink { from { background: var(--warn-hell); } to { background: transparent; } }
.beamer { font-size: 22px; }
.beamer main { max-width: none; padding: 1.5rem 2.5rem; }
.beamer h1 { font-size: 2.4rem; }
.beamer .tabelle th, .beamer .tabelle td { padding: .7rem .8rem; }
.beamer .platz { width: 2.6rem; height: 2.6rem; }
.beamer .reiter { display: none; }

/* ---------- Urkunden-Editor ---------- */
.editor { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; align-items: start; }
@media (max-width: 900px) { .editor { grid-template-columns: 1fr; } }
.blatt { position: relative; background: #fff; border: 1px solid var(--linie); box-shadow: 0 2px 10px rgba(0, 0, 0, .08); overflow: hidden; touch-action: none; user-select: none; }
.blatt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; opacity: .9; }
.blatt .leer-blatt { position: absolute; inset: 0; display: grid; place-items: center; color: var(--gedaempft); }
.ufeld { position: absolute; white-space: nowrap; line-height: 1; font-family: Helvetica, Arial, sans-serif; color: #000; cursor: move; outline: 1px dashed rgba(10, 79, 158, .5); background: rgba(232, 240, 250, .55); padding: 0; }
.ufeld.an { outline: 2px solid var(--akzent); background: rgba(232, 240, 250, .85); }
.ufeld.mitte { transform: translateX(-50%); }
.ufeld.rechts { transform: translateX(-100%); }
.ufeld.umbruch { white-space: normal; }
.seitenfeld { display: grid; gap: .6rem; }