/* Schießwertung – Oberfläche. Farben und Schrift aus dem Logoset (branding/README.md). Kein Grün. */
@font-face {
  font-family: "Sora";
  src: url("fonts/sora-variable.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --graphit: #15171C;
  --orange: #FF5A1F;
  --orange-dunkel: #C2410C;
  --orange-hell: #FFF1E9;
  --stahl: #5B606B;
  --hell: #F3F4F6;
  --weiss: #FFFFFF;
  --linie: #E1E4E9;
  --rot: #B42318;
  --rot-hell: #FDECEA;
  --blau-hell: #E8EDF6;
  --radius: 14px;
  --schatten: 0 1px 2px rgba(21, 23, 28, .06), 0 1px 0 rgba(21, 23, 28, .04);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--hell); color: var(--graphit);
  font-family: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.55;
  display: flex; flex-direction: column; min-height: 100vh;
}
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 .6em; }
h1 { font-size: 28px; font-weight: 700; }
h2 { font-size: 20px; font-weight: 600; }
h3 { font-size: 16px; font-weight: 600; }
p { margin: 0 0 .8em; }
a { color: var(--orange-dunkel); }
a:hover { color: #9A3412; }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .92em; background: var(--hell); padding: 1px 5px; border-radius: 5px; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.sprung { position: absolute; left: -9999px; }
.sprung:focus { left: 12px; top: 12px; background: var(--weiss); padding: 8px 12px; z-index: 10; border-radius: 8px; }
.unsichtbar { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bot-falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.icon { vertical-align: -3px; }

/* Kopf */
.kopf { background: var(--weiss); border-bottom: 1px solid var(--linie); }
.kopf-innen { max-width: 1400px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.marke { display: flex; align-items: center; }
.marke img { display: block; height: 34px; width: auto; }
.verein { color: var(--stahl); font-size: 13px; padding-left: 16px; border-left: 1px solid var(--linie); }
.hauptnav { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.hauptnav a, .hauptnav .link { color: var(--graphit); text-decoration: none; padding: 8px 12px; border-radius: 10px; font-size: 14px; font-weight: 500; }
.hauptnav a:hover, .hauptnav .link:hover { background: var(--hell); }
.hauptnav a.aktiv { background: var(--graphit); color: var(--weiss); }
.warnleiste { background: var(--rot); color: var(--weiss); text-align: center; padding: 8px 16px; font-size: 14px; }

.inhalt { width: 100%; max-width: 1140px; margin: 0 auto; padding: 28px 24px 48px; flex: 1; }
.inhalt.breit { max-width: 1400px; }
.inhalt.eng { max-width: 760px; }
.fuss { display: flex; justify-content: space-between; gap: 16px; max-width: 1400px; width: 100%; margin: 0 auto; padding: 16px 24px 28px; color: var(--stahl); font-size: 12px; }

/* Bausteine */
.karte { background: var(--weiss); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 20px; box-shadow: var(--schatten); }
.karte.eng { max-width: 620px; margin-left: auto; margin-right: auto; }
.karte.hervor { box-shadow: 0 0 0 2px var(--orange), var(--schatten); }
.karte.leer { text-align: center; color: var(--stahl); padding: 40px 24px; }
.unterkarte { background: var(--hell); border-radius: 12px; padding: 16px 18px; }
.raster2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.raster3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; }
.raster2 > .karte, .raster2 > section, .raster2 > form.karte { margin-bottom: 20px; }
.abstand { margin-top: 18px; gap: 18px; }
.titelzeile { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.titelzeile h1, .titelzeile h2 { margin: 0; }
.abschnitt { margin: 28px 0 14px; }
.hinweis { color: var(--stahl); font-size: 13px; }
.ueberzeile { color: var(--stahl); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 4px; }

.meldung { border-radius: 12px; padding: 12px 16px; margin-bottom: 14px; font-size: 14px; }
.meldung.erfolg { background: var(--blau-hell); color: #1B2B4B; }
.meldung.fehler { background: var(--rot-hell); color: #7A1810; }
.meldung.hinweis { background: var(--orange-hell); color: #7A2E0E; }

.marke-status { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .02em; padding: 2px 9px; border-radius: 999px; vertical-align: 1px; }
.marke-status.ja { background: var(--graphit); color: var(--weiss); }
.marke-status.nein, .marke-status.zu { background: #E4E6EA; color: #3A3F48; }
.marke-status.warn { background: #FFE3D3; color: #7A2E0E; }
.marke-status.info { background: var(--blau-hell); color: #1B2B4B; }

/* Formulare */
.formular label, .formular .label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 5px; }
.formular label.haken, label.haken { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; font-size: 14px; margin: 10px 0; cursor: pointer; }
label.haken input { margin-top: 3px; width: auto; accent-color: var(--orange-dunkel); }
input, select, textarea {
  width: 100%; font: inherit; color: var(--graphit); background: var(--weiss);
  border: 1px solid #C9CDD5; border-radius: 10px; padding: 9px 12px; min-height: 42px;
}
textarea { min-height: 80px; }
textarea.code { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
input:focus, select:focus, textarea:focus { border-color: var(--graphit); outline: 2px solid var(--orange); outline-offset: 0; }
input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; }
input[disabled], select[disabled], textarea[disabled] { background: var(--hell); color: var(--stahl); }
input.schmal, .schmal { max-width: 140px; }
.code-feld { max-width: 200px; font-size: 22px; letter-spacing: 6px; text-align: center; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.formular.zeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.formular.zeile input, .formular.zeile select { width: auto; min-width: 200px; flex: 1; }
.formular.zeile label.haken { margin: 0; }
.formular.zeile label.haken input { flex: none; min-width: 0; width: auto; }
.wahl { display: flex; flex-direction: column; }
.haken-spalte { padding-top: 22px; }
.spaltenwahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 16px; }
.pw-regeln { font-size: 13px; color: var(--stahl); margin: 8px 0; }
.pw-regeln ul { margin: 4px 0 0; padding-left: 20px; }
.pw-regeln li.ok { color: var(--graphit); }
.pw-regeln li.ok::marker { content: "✓  "; color: var(--orange-dunkel); }

button, .knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer;
  background: var(--graphit); color: var(--weiss); border: 1px solid var(--graphit); border-radius: 10px;
  padding: 10px 18px; min-height: 44px; margin-top: 14px;
}
button:hover, .knopf:hover { background: #000; color: var(--weiss); }
button.zweit, .knopf.zweit { background: var(--weiss); color: var(--graphit); border-color: #C9CDD5; }
button.zweit:hover, .knopf.zweit:hover { border-color: var(--graphit); background: var(--weiss); color: var(--graphit); }
button.gefahr { background: var(--weiss); color: var(--rot); border-color: #E8B4AE; }
button.gefahr:hover { background: var(--rot); color: var(--weiss); border-color: var(--rot); }
button.klein, .knopf.klein { min-height: 34px; padding: 5px 12px; font-size: 13px; margin-top: 0; }
button.voll { width: 100%; }
button.link { background: none; border: 0; min-height: 0; margin: 0; font-weight: 500; cursor: pointer; }
button[disabled] { opacity: .45; cursor: not-allowed; }
form.inline { display: inline; margin: 0; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.knopfreihe button, .knopfreihe .knopf { margin-top: 0; }
.formular .knopfreihe { margin-top: 14px; }

details > summary { cursor: pointer; color: var(--orange-dunkel); font-weight: 600; font-size: 13px; }
details.bearbeiten { margin-top: 8px; }
details.bearbeiten[open] { background: var(--hell); border-radius: 12px; padding: 10px 14px 16px; }
details.bearbeiten.klein summary { font-size: 13px; }
.gefahrzone { margin-top: 16px; }
.gefahrzone summary { color: var(--rot); }

/* Tabellen */
.tabelle-rahmen { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabelle th, .tabelle td { text-align: left; padding: 10px 10px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle thead th { font-size: 12px; font-weight: 600; color: var(--stahl); text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px solid var(--graphit); white-space: nowrap; }
.tabelle.kompakt th, .tabelle.kompakt td { padding: 7px 8px; }
.tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabelle tr.inaktiv td, .tabelle tr.inaktiv th { color: var(--stahl); }
.tabelle tr.status-dabei td { color: var(--stahl); }
.tabelle tr.status-unklar { background: #FFF8F3; }

/* Übersicht */
.filter { display: flex; gap: 4px; background: var(--weiss); padding: 4px; border-radius: 12px; box-shadow: var(--schatten); }
.filter a { text-decoration: none; color: var(--graphit); padding: 6px 12px; border-radius: 9px; font-size: 13px; font-weight: 500; }
.filter a.aktiv { background: var(--graphit); color: var(--weiss); }
.kachelraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-bottom: 28px; }
.kachel { display: flex; flex-direction: column; gap: 6px; background: var(--weiss); border-radius: var(--radius); padding: 18px 20px; text-decoration: none; color: var(--graphit); box-shadow: var(--schatten); border: 1px solid transparent; }
.kachel strong { font-size: 17px; letter-spacing: -0.01em; }
.kachel:hover { border-color: var(--graphit); color: var(--graphit); }
.kachel.zu { opacity: .72; }

/* Veranstaltung */
.v-kopf h1 { margin-bottom: 14px; }
.unternav, .reiter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.unternav a, .reiter a { text-decoration: none; color: var(--graphit); background: var(--weiss); padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; box-shadow: var(--schatten); }
.unternav a.aktiv, .reiter a.aktiv { background: var(--graphit); color: var(--weiss); }
.reiter.klein a { padding: 6px 12px; font-size: 13px; }
.reiter a.aktiv { background: var(--orange); color: var(--graphit); }
.zahlenreihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 20px; }
.zahl-kachel { background: var(--weiss); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--schatten); display: flex; flex-direction: column; color: var(--stahl); font-size: 13px; }
.zahl-kachel .gross { font-size: 30px; font-weight: 700; color: var(--graphit); letter-spacing: -0.03em; line-height: 1.1; }
.wk-liste { list-style: none; margin: 0; padding: 0; }
.wk-liste > li { padding: 14px 0; border-bottom: 1px solid var(--linie); }
.wk-liste > li:last-child { border-bottom: 0; }
.wk-liste > li.inaktiv { opacity: .6; }
.wk-zeile { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
ul.wk-liste.karte { padding: 8px 24px; }
ul.einfach { list-style: none; margin: 0 0 12px; padding: 0; }
ul.einfach li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--linie); }
.auswahlliste { max-height: 320px; overflow-y: auto; border: 1px solid var(--linie); border-radius: 12px; padding: 4px 12px; margin-bottom: 10px; }
.auswahlliste label.haken { margin: 8px 0; }
.gedimmt { opacity: .55; }
.filterfeld { max-width: 260px; }
.daten { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 12px; }
.daten dt { color: var(--stahl); font-size: 13px; }
.daten dd { margin: 0; }
code.gross { font-size: 18px; padding: 4px 10px; }
.pruefliste { list-style: none; padding: 0; margin: 0; }
.pruefliste li { padding: 6px 0 6px 26px; position: relative; font-size: 14px; }
.pruefliste li::before { position: absolute; left: 0; font-weight: 700; }
.pruefliste li.ok::before { content: "✓"; color: var(--graphit); }
.pruefliste li.nein::before { content: "✕"; color: var(--rot); }
.pruefliste li.warn::before { content: "!"; color: var(--orange-dunkel); }

/* Anmeldung */
.anmelde-box { max-width: 420px; margin: 40px auto; background: var(--weiss); border-radius: var(--radius); padding: 30px 30px 24px; box-shadow: var(--schatten); }
.schritte { padding-left: 20px; }
.schritte li { margin-bottom: 12px; }
.qr { background: var(--weiss); border: 1px solid var(--linie); border-radius: 10px; padding: 8px; line-height: 0; width: max-content; margin: 10px 0; }
.notfallcodes { columns: 2; font-size: 16px; }

/* Erfassung */
.tabelle.erfassen { width: auto; min-width: 560px; }
.erfassen th[scope="row"] { min-width: 240px; font-weight: 600; }
.erfassen thead th.schusskopf, .erfassen td.feld { text-align: center; }
.erfassen td.feld { padding: 6px 3px; }
.erfassen input.schuss { width: 3.6em; min-height: 40px; padding: 6px 4px; text-align: center; font-variant-numeric: tabular-nums; font-size: 15px; }
.erfassen td.feld:only-of-type input.schuss { width: 6em; }
.erfassen.viele input.schuss { width: 3.1em; font-size: 14px; }
.erfassen input.schuss.ungueltig { border-color: var(--rot); background: var(--rot-hell); }
.erfassen .summe-live { font-weight: 700; font-size: 16px; }
.leiste-unten { position: sticky; bottom: 0; background: rgba(243, 244, 246, .96); padding: 10px 0; display: flex; align-items: center; gap: 16px; border-top: 1px solid var(--linie); margin-top: 10px; }
.leiste-unten button { margin-top: 0; }

/* Ranglisten */
.werkzeugleiste { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.werkzeugleiste button, .werkzeugleiste .knopf { margin-top: 0; }
.rangliste .klasse { color: var(--orange-dunkel); }
.tabelle.rang td.platz { font-weight: 700; }
.tabelle.rang tr.p1 td.platz { color: var(--orange-dunkel); }
.tabelle.rang tr.podest td { background: #FFFAF6; }
.tabelle.rang td.ergebnis strong { font-size: 15px; }
.tabelle.rang td.schuss, .tabelle.rang th.schuss { color: var(--stahl); font-size: 13px; padding-left: 4px; padding-right: 4px; }
.tabelle .gestrichen { text-decoration: line-through; color: var(--stahl); }
.fussnote { margin-top: 8px; }
.druckkopf, .druckfuss { display: none; }

/* Schmale Bildschirme: Tabellen werden zu Karten */
@media (max-width: 760px) {
  body { font-size: 15px; }
  h1 { font-size: 23px; }
  .kopf-innen { padding: 10px 16px; gap: 10px; }
  .verein { display: none; }
  .hauptnav { margin-left: 0; width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .hauptnav a, .hauptnav .link { white-space: nowrap; }
  .inhalt { padding: 18px 14px 40px; }
  .karte { padding: 18px 16px; }
  .raster2, .raster3 { grid-template-columns: minmax(0, 1fr); }
  .haken-spalte { padding-top: 0; }
  .formular.zeile input, .formular.zeile select { min-width: 0; }
  .tabelle:not(.erfassen) thead { display: none; }
  .tabelle:not(.erfassen), .tabelle:not(.erfassen) tbody, .tabelle:not(.erfassen) tr { display: block; width: 100%; }
  .tabelle:not(.erfassen) tr { border-bottom: 1px solid var(--linie); padding: 10px 0; }
  .tabelle:not(.erfassen) td, .tabelle:not(.erfassen) th { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 3px 0; text-align: right; }
  .tabelle:not(.erfassen) td::before { content: attr(data-titel); color: var(--stahl); font-size: 12px; text-align: left; }
  .tabelle:not(.erfassen) td[data-titel=""]::before { content: none; }
  .tabelle:not(.erfassen) td.schuss { display: none; }
  .tabelle:not(.erfassen) td details { width: 100%; text-align: left; }
  /* Erfassung: je Teilnehmer eine Karte mit großen Feldern */
  .tabelle.erfassen { min-width: 0; width: 100%; }
  .erfassen thead { display: none; }
  .erfassen, .erfassen tbody { display: block; }
  .erfassen tr { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--linie); }
  .erfassen th[scope="row"] { grid-column: 1 / -1; border: 0; padding: 0; }
  .erfassen td { border: 0; padding: 0 !important; }
  .erfassen td.feld input.schuss { width: 100%; min-height: 46px; font-size: 17px; }
  .erfassen td.feld:only-of-type { grid-column: 1 / 3; }
  .erfassen .summe-live, .erfassen td.zahl { grid-column: span 1; align-self: center; text-align: center; }
  .erfassen td.zahl::before { content: attr(data-titel) " "; color: var(--stahl); font-size: 11px; font-weight: 400; display: block; }
  .anmelde-box { margin: 16px auto; padding: 22px 18px; }
}

/* Druck: A4, nur Inhalt */
@media print {
  @page { size: A4; margin: 14mm 12mm; }
  body { background: var(--weiss); font-size: 10.5pt; }
  .kopf, .fuss, .unternav, .reiter, .nicht-drucken, .warnleiste, .meldung, .v-kopf { display: none !important; }
  .inhalt { padding: 0; max-width: none; }
  .karte { box-shadow: none; padding: 0; margin-bottom: 8mm; break-inside: avoid-page; }
  .rangliste { break-inside: auto; }
  .rangliste h2 { break-after: avoid; }
  .druckkopf { display: flex; gap: 12px; align-items: center; border-bottom: 2px solid var(--graphit); padding-bottom: 8px; margin-bottom: 8mm; font-size: 11pt; }
  .druckfuss { display: block; color: var(--stahl); font-size: 8pt; margin-top: 6mm; }
  .tabelle th, .tabelle td { padding: 4px 6px; }
  .tabelle.rang tr.podest td { background: none; }
  .tabelle-rahmen { overflow: visible; }
  a { color: inherit; text-decoration: none; }
}