/* Sponsorenlauf — was die Vereinsseite nicht hat.
 *
 * Grundlage ist vereinsseite.css, die unveraenderte style.css von
 * fcdhomepage: Farben, Schriften, Kopfzeile (.kopf, .marke), Sponsorenband
 * (.spitze, .markenlogo), Seitenkopf (.seitenkopf, .eyebrow), Abschnitte
 * (.sektion), Sponsorenwand (.wand), Knoepfe (.knopf) und Fuss (.fuss).
 * Hier steht nur, was dazukommt — in derselben Sprache. Zuerst fuers Handy
 * gebaut: die Sponsoren kommen ueber den QR-Code. */
:root {
  --rot: #b3261e;
  --gruen: #2e7d32;
  --rund: 3px;
}
* { box-sizing: border-box; }

/* ------------------------------------------------------------ Kopfzeile */
.marke__zusatz { font-family: var(--mono); font-size: .6875rem; font-weight: 500; letter-spacing: .12em;
  color: var(--gelb); margin-left: .35rem; vertical-align: .2em; }
.laufnav { margin-left: auto; display: flex; gap: .25rem; flex-wrap: wrap; justify-content: flex-end; }
.laufnav__link { padding: .6rem .62rem; font-size: .875rem; font-weight: 600; color: var(--weiss); text-decoration: none;
  border-radius: 4px; white-space: nowrap; }
.laufnav__link:hover { background: rgba(255, 255, 255, .14); }
.fuss__klein { font-family: var(--mono); font-size: .75rem; color: rgba(255,255,255,.45); }
/* Die Verwaltung hat sechs Menuepunkte: wird es eng, stehen sie in einer eigenen Zeile. */
@media (max-width: 1100px) {
  .verwaltung .kopf__inner { flex-wrap: wrap; gap: 0 1rem; padding-block: .6rem .35rem; min-height: 0; }
  .verwaltung .laufnav { margin-left: -.6rem; width: 100%; justify-content: flex-start; }
}
@media (max-width: 640px) {
  .marke__name { white-space: normal; font-size: 1.05rem; line-height: 1.1; }
  .marke__zusatz { display: block; margin: .2rem 0 0; }
  .kopf__inner { min-height: 60px; gap: .75rem; }
  .laufnav__link { padding: .45rem .5rem; font-size: .8125rem; }
  body:not(.verwaltung) .laufnav { display: none; }   /* der Link zur Vereinsseite steht im Fuss */
}

/* --------------------------------------------------------------- Inhalt */
.laufseite .sektion { padding-block: clamp(1.75rem, 4vw, 2.75rem) clamp(2.5rem, 6vw, 4rem); }
.laufseite .seitenkopf { padding-block: clamp(1.75rem, 5vw, 3rem) clamp(1.5rem, 4vw, 2.25rem); }
.laufseite .seitenkopf__titel { font-size: clamp(2rem, 7vw, 3.5rem); }
.laufseite .seitenkopf .eyebrow { margin-bottom: 1rem; }
/* Startseite: man muss auf den ersten Blick sehen, was es ist und wann. */
.laufseite .seitenkopf__titel--gross { font-size: clamp(2.9rem, 12vw, 6rem); line-height: .92; margin-bottom: .2rem; }
.seitenkopf__datum { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .01em; line-height: 1.05;
  font-size: clamp(1.6rem, 6vw, 3rem); color: var(--weiss); margin: 0 0 1.1rem; }
.seitenkopf__spruch { font-family: var(--display); font-weight: 700; text-transform: uppercase; line-height: 1.08;
  font-size: clamp(1.05rem, 3vw, 1.4rem); color: rgba(255, 255, 255, .85); margin: 0 0 1rem; padding-left: .8rem; border-left: 3px solid var(--gelb); }
.seitenkopf__spruch span, .seitenkopf__spruch em { display: block; }
.seitenkopf__spruch em { font-style: normal; color: var(--gelb); }
.inhalt--schmal { max-width: calc(42rem + 2 * var(--bund)); }
.inhalt a:not(.knopf):not(.markenlogo) { color: var(--blau-text); }
.inhalt h1, .inhalt h2, .inhalt h3 { font-family: var(--display); text-transform: uppercase; letter-spacing: .01em; line-height: 1.05; color: var(--nacht); margin: 0 0 .6rem; }
.inhalt h1 { font-size: clamp(2rem, 6vw, 2.75rem); }
.inhalt h2 { font-size: 1.4rem; margin-top: 2rem; }
.inhalt p { margin: 0 0 .9rem; }
.inhalt .eyebrow { display: block; color: var(--blau-text); margin: 0 0 .4rem; letter-spacing: .12em; font-weight: 500; }
.lead { font-size: 1.0625rem; color: var(--nebel); }
.klein { font-size: .875rem; color: var(--nebel); }
.rechts { text-align: right; }
.kasten { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--rund); padding: 1.1rem; margin: 0 0 1rem; }
.kasten > :last-child { margin-bottom: 0; }
.kasten--gelb { border-left: 5px solid var(--gelb); }
/* Die Kacheln der Sponsorenwand sind weiss — die meisten Logos bringen ihren weissen Grund mit,
   auf Grau saehen sie aus wie aufgeklebt. (Die Vereinsseite macht sie im weissen Abschnitt grau.) */
.junioren .wand > a, .junioren .wand > span { background: var(--weiss); }
.junioren .wand > a:hover { transform: translateY(-2px); }

.notiz { padding: .75rem 1rem; border-radius: var(--rund); margin: 0 0 1rem; }
.notiz--ok { background: #eef7ee; color: var(--gruen); }
.notiz--fehler { background: #fdecea; color: var(--rot); }
.notiz--grau { background: var(--weiss); color: var(--nebel); border: 1px solid var(--linie); }

/* ---------------------------------------------------------- Formulare */
label { display: block; font-weight: 600; font-size: .9375rem; margin: 0 0 .25rem; }
label small { font-weight: 400; color: var(--nebel); }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  width: 100%; font: inherit; padding: .65rem .7rem; border: 1px solid #b9c5cf; border-radius: var(--rund); background: var(--weiss); color: var(--tinte); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blau); outline-offset: 1px; border-color: var(--blau); }
textarea { min-height: 11rem; font-family: var(--mono); font-size: .875rem; }
.feld { margin: 0 0 .9rem; }
.feld label { font-size: .9375rem; }
.feld input, .feld select, .feld textarea { border-color: #b9c5cf; padding: .65rem .7rem; font-size: 1rem; }
.reihe { display: grid; grid-template-columns: 6.5rem 1fr; gap: .7rem; }
.falle { position: absolute; left: -9999px; }
.wichtig { display: flex; gap: .7rem; align-items: flex-start; margin: .9rem 0 0; padding: .8rem .9rem; background: #fff8cc; border: 1px solid var(--gelb); border-left: 5px solid var(--gelb); border-radius: var(--rund); color: var(--nacht-2); }
.wichtig > span:first-child { font-size: 1.4rem; line-height: 1.2; }
.rechnen { background: var(--weiss); border: 1px solid var(--linie); border-left: 5px solid var(--gelb); border-radius: var(--rund); padding: .8rem; }
.rechnen label { font-weight: 400; }
.rechnen input[type=text] { max-width: 7rem; margin-top: .4rem; }

.artwahl { display: grid; gap: .6rem; margin: 0 0 .9rem; }
.artwahl__art { display: block; border: 1px solid #b9c5cf; border-radius: var(--rund); padding: .8rem; background: var(--weiss); font-weight: 400; margin: 0; cursor: pointer; }
.artwahl__art:has(input[type=radio]:checked) { border-color: var(--blau); box-shadow: inset 0 0 0 1px var(--blau); background: #f4fbff; }
.artwahl__kopf { display: flex; align-items: center; gap: .55rem; font-weight: 700; }
.artwahl__kopf input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--blau); }
.artwahl__felder { display: none; margin-top: .7rem; gap: .7rem; grid-template-columns: 1fr 1fr; }
.artwahl__art:has(input[type=radio]:checked) .artwahl__felder { display: grid; }
.artwahl__felder label { font-size: .8125rem; }
.vorschau { font-size: .875rem; color: var(--nebel); margin: .6rem 0 0; }
.kreuz { display: flex; gap: .55rem; align-items: flex-start; font-weight: 400; margin: 0 0 1.1rem; }
.kreuz input { width: 1.15rem; height: 1.15rem; margin: .15rem 0 0; flex: none; accent-color: var(--blau); }

/* Die Knoepfe sind die der Vereinsseite. Dazu: ein Knopf ohne Farbe (dort
   gibt es ihn nur auf dunklem Grund), klein, gross und rot. */
.knopf { cursor: pointer; font-family: var(--body); line-height: 1.3; }
.knopf:not(.knopf--gelb):not(.knopf--rot):not(.knopf--blau) { background: var(--weiss); border: 1px solid var(--linie); color: var(--nacht); }
.knopf:not(.knopf--gelb):not(.knopf--rot):not(.knopf--blau):hover { border-color: var(--nacht); }
.knopf--gelb:hover { background: #ffe94d; }
.knopf--gross { width: 100%; justify-content: center; font-size: 1.0625rem; padding: 1rem; }
.knopf--klein { padding: .4rem .7rem; font-size: .8125rem; }
.knopf--rot { background: #fdecea; color: var(--rot); border: 1px solid #f0c4c0; }
.knopf:disabled { opacity: .6; cursor: default; transform: none; }
.knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 1rem; }

/* ------------------------------------------------------------ Tabellen */
.rahmen { overflow-x: auto; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--rund); margin: 0 0 1rem; }
table { border-collapse: collapse; width: 100%; font-size: .9375rem; }
th, td { padding: .55rem .7rem; text-align: left; border-bottom: 1px solid var(--linie); vertical-align: middle; }
th { font-family: var(--mono); font-size: .6875rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--nebel); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.zahl, th.zahl { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
tfoot td { font-weight: 700; border-top: 2px solid var(--nacht); }
td input[type=number] { width: 4.5rem; padding: .4rem .45rem; text-align: right; }
.offen { color: var(--nebel); }
.gut { color: var(--gruen); font-weight: 600; }
.code { font-family: var(--mono); font-size: .8125rem; }

.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .7rem; margin: 0 0 1.3rem; }
.kachel { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--rund); padding: .8rem .9rem; }
.kachel b { display: block; font-family: var(--display); font-size: 1.6rem; color: var(--nacht); line-height: 1.2; }
.kachel--gelb { border-left: 5px solid var(--gelb); }
.kachel span { font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--nebel); }

/* ------------------------------------------- Zusagen als Liste erfassen */
.erfassliste th, .erfassliste td { padding: .3rem .35rem; }
.erfassliste td { vertical-align: top; }
.erfassliste input[type=text] { padding: .45rem .5rem; min-width: 7.5rem; font-size: .9375rem; }
.erfassliste input.schmal { min-width: 4.2rem; width: 4.6rem; }
.erfassliste input[type=checkbox] { width: 1.15rem; height: 1.15rem; margin-top: .55rem; accent-color: var(--blau); }
.erfassliste__falsch td { background: #fdecea; }
.erfassliste__fehler { display: block; color: var(--rot); font-size: .8125rem; margin-top: .2rem; }

/* -------------------------------------------------------- Meine Zusagen */
.meinkind { margin: 0 0 2.5rem; padding-bottom: 2rem; border-bottom: 2px solid var(--linie); }
.meinkind:last-of-type { border-bottom: 0; }
.meinkind h2 { margin-top: 1.2rem; font-size: 1.7rem; }
.codefeld { font-family: var(--mono); font-size: 1.5rem !important; letter-spacing: .3em; text-align: center; max-width: 14rem; }
.textknopf { border: 0; background: none; padding: 0; font: inherit; color: var(--blau-text); text-decoration: underline; cursor: pointer; }

/* ---------------------------------------------------------------- Läufe */
input[type=date] { width: 100%; font: inherit; padding: .6rem .7rem; border: 1px solid #b9c5cf; border-radius: var(--rund); background: var(--weiss); color: var(--tinte); }
.lauf { background: var(--weiss); border: 1px solid var(--linie); border-left: 5px solid var(--linie); border-radius: var(--rund); padding: 1rem 1.1rem; margin: 0 0 .9rem; max-width: 46rem; }
.lauf--aktiv { border-left-color: var(--gelb); }
.lauf--neu { border-left-width: 1px; border-top: 3px solid var(--gelb); margin-top: 2rem; padding: 1.2rem 1.3rem 1.3rem; }
.lauf--neu h2 { margin-bottom: .35rem; }
.lauf h2 { margin: 0; font-size: 1.4rem; }
.lauf__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .5rem 1rem; }
.lauf__datum { margin: .1rem 0 0; }
.lauf__marken { display: flex; flex-wrap: wrap; gap: .35rem; }
.marke2 { font-family: var(--mono); font-size: .6875rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; padding: .25rem .5rem; border-radius: var(--rund); background: var(--papier); color: var(--nebel); white-space: nowrap; }
.marke2--gelb { background: var(--gelb); color: var(--nacht-2); }
.marke2--gruen { background: #eef7ee; color: var(--gruen); }
.marke2--rot { background: #fdecea; color: var(--rot); }
.lauf__zahlen { margin: .6rem 0; color: var(--nebel); }
.lauf__zahlen b { color: var(--tinte); }
.lauf__mehr summary { cursor: pointer; color: var(--blau-text); font-weight: 600; width: max-content; padding: .2rem 0; }
/* Felder und Knopf stehen auf einer Linie: unten buendig, alle gleich hoch. */
.lauf__form { display: grid; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); gap: .9rem 1rem; align-items: end; margin-top: .9rem; }
.lauf__form .feld { margin: 0; }
.lauf__form .feld label { font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lauf__form input[type=text], .lauf__form input[type=date], .lauf__form select { height: 2.9rem; padding-block: 0; }
.lauf__knoepfe .knopf { height: 2.9rem; padding-block: 0; width: 100%; justify-content: center; }
.lauf__loeschen { margin: 1.2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--linie); }
.lauf__loeschen h3 { font-size: 1rem; color: var(--rot); margin: 0 0 .3rem; }
.lauf__loeschen > p { margin-bottom: .6rem; }
.lauf__wechsel { margin-top: .8rem; }

/* ------------------------------------------------- Blaetter zum Drucken */
/* Am Bildschirm so breit wie auf dem Papier (A4 mit 14 mm Rand) — nur so
   stimmt die Vorschau mit dem Druck ueberein und man sieht, ob alles auf
   eine Seite passt. Auf dem Handy laesst sich das Blatt seitlich schieben. */
.blattrahmen { overflow-x: auto; }
.inhalt--schmal:has(.blatt) { max-width: none; }
.blatt { background: var(--weiss); border: 1px solid var(--linie); padding: 14mm; margin: 0 auto 1rem; width: 210mm; min-height: 297mm; box-sizing: border-box;
  font-size: 10.5pt; line-height: 1.4; color: #000; }
.blatt p { margin: 0 0 3mm; }
.blatt__kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.blatt__marke { display: flex; align-items: center; gap: 5mm; flex: none; }
.blatt .blatt__spruch { margin: 0; text-align: right; font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 15pt; line-height: 1.12; color: var(--nacht); }
.blatt__spruch span, .blatt__spruch em { display: block; }
.blatt__spruch em { font-style: normal; color: var(--blau); }
.blatt__kopf img { width: 30mm; height: 30mm; }
.blatt__kind { display: flex; gap: 8mm; align-items: center; border: 2px solid var(--nacht); border-radius: var(--rund); padding: 6mm; margin: 6mm 0; }
.blatt__qr { width: 46mm; flex: none; }
.blatt__qr svg { display: block; width: 100%; height: auto; }
.blatt__name { font-family: var(--display); font-size: 1.9rem; text-transform: uppercase; color: var(--nacht); line-height: 1.1; }
.blatt__link { font-family: var(--mono); font-size: .8125rem; word-break: break-all; }
.blatt__sponsoren { margin-top: 6mm; padding-top: 4mm; border-top: .3mm solid #999; }
.blatt__sponsorentitel { font-family: var(--mono); font-size: 7pt; letter-spacing: .12em; text-transform: uppercase; color: #555; margin: 0 0 2mm; }
/* Jede Gruppe steht auf genau einer Zeile: die Logos behalten ihre Hoehe
   und werden, wenn es eng wird, alle im gleichen Mass schmaler. */
.blatt__logos { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 4mm; margin: 0 0 4mm; }
.blatt__logos:last-child { margin-bottom: 0; }
.blatt__logos img { height: 10mm; width: auto; max-width: none; min-width: 0; flex: 0 1 auto; object-fit: contain; }
.blatt__logos--klein img { height: 8mm; }
.blatt ol { padding-left: 1.2rem; margin: 0 0 .9rem; }
.blatt table { font-size: .8125rem; margin-top: 3mm; }
.blatt table th, .blatt table td { border: 1px solid #333; height: 8.5mm; padding: 0 2mm; }
.blatt table th { color: var(--tinte); letter-spacing: 0; text-transform: none; font-family: var(--body); font-weight: 700; font-size: .75rem; white-space: normal; text-align: center; }

@media print {
  body { background: #fff; }
  .kopf, .fuss, .spitze, .seitenkopf, .junioren, .skip, .nichtdrucken { display: none !important; }
  .laufseite .sektion, .laufseite .wrap { max-width: none; padding: 0; margin: 0; }
  .blatt { border: 0; margin: 0; padding: 0; width: auto; min-height: 0; page-break-after: always; break-after: page; }
  .blattrahmen { overflow: visible; }
  .blatt:last-child { page-break-after: auto; break-after: auto; }
  @page { size: A4; margin: 14mm; }
}