/* Das eingebaute [hidden] { display: none } des Browsers gehoert zum
   User-Agent-Stylesheet und verliert gegen JEDE Autorenregel, unabhaengig von
   der Spezifitaet. Die Regel "label { display: block }" weiter unten hat genau
   das ausgehebelt: ein Kaestchen, das per hidden verschwinden sollte, blieb
   sichtbar und anklickbar - und schickte nichts mehr. Diese Zeile stellt die
   Zusicherung wieder her, auf die sich alle Seiten dieses Projekts stuetzen.
   [hidden] ist spezifischer als jeder Elementselektor, gewinnt also unabhaengig
   von der Reihenfolge. */
[hidden] { display: none !important; }

/* Politur 26.09.2026: Quicksand wird mitgeliefert (public/schrift/, OFL 1.1,
   Lizenz in public/schrift/OFL.txt), statt sich auf eine lokal installierte
   Schrift zu verlassen. Bewusst ohne local(): jedes Geraet laedt dieselbe
   Datei vom eigenen Server. Nur die zwei Schnitte, die stil.css braucht -
   400 (Text) und 700 (fett, Ueberschriften); font-weight 600 (label, th,
   .kachelWaehrung) faellt nach den CSS-Regeln auf 700. font-display: swap
   zeigt den Text sofort in der Ersatzschrift, falls die Datei noch laedt. */
@font-face {
  font-family: 'Quicksand'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/schrift/quicksand-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Quicksand'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/schrift/quicksand-700.woff2') format('woff2');
}

:root {
  --papier: #fafaf8; --panel: #ffffff; --text: #1a2329; --text-weich: #434a4f;
  --leise: #6c757b; --linie: rgba(26,35,41,.14); --marke: #1a6a68; --marke-dunkel: #0e3a3a;
  --marke-hell: #eef7f7; --akzent: #d46a3c; --radius: 10px;
  --schrift: 'Quicksand', system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--papier); color: var(--text); font-family: var(--schrift);
  font-size: 17px; line-height: 1.55; -webkit-text-size-adjust: 100%;
}
.huelle { max-width: 640px; margin: 0 auto; padding: 20px 16px 64px; }
.kopf { border-bottom: 2px solid var(--marke); padding-bottom: 12px; margin-bottom: 20px; }
.kopf .verein { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--marke); }
/* Politur 26.09.2026: kleines Sponsorenlauf-Logo (public/logo.svg) vor dem
   Vereinsnamen; der Name bleibt Text. */
.verein { display: flex; align-items: center; gap: 8px; }
.verein .logo { flex: none; width: 28px; height: 28px; }
h1 { font-size: 26px; line-height: 1.2; margin: 6px 0 4px; }
h2 { font-size: 19px; margin: 28px 0 8px; color: var(--marke-dunkel); }
.karte { background: var(--panel); border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px; margin: 0 0 16px; }
.karte.hell { background: var(--marke-hell); border-color: #bddee0; }
label { display: block; font-weight: 600; margin: 16px 0 4px; }
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=password], textarea, select {
  width: 100%; padding: 12px; font: inherit; color: inherit;
  border: 1px solid var(--linie); border-radius: 8px; background: var(--panel);
}
input:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 3px solid var(--marke); outline-offset: 2px;
}
.wahl { display: flex; gap: 8px; margin: 8px 0; }
.wahl button { flex: 1; padding: 14px; font: inherit; border: 2px solid var(--linie); background: var(--panel); border-radius: 8px; cursor: pointer; }
.wahl button[aria-pressed=true] { border-color: var(--marke); background: var(--marke-hell); font-weight: 700; }
button.haupt { width: 100%; padding: 16px; font: inherit; font-weight: 700; color: #fff; background: var(--marke); border: 0; border-radius: 8px; cursor: pointer; }
button.haupt:disabled { opacity: .6; cursor: progress; }
button.neben { padding: 10px 14px; font: inherit; background: var(--panel); border: 1px solid var(--marke); color: var(--marke-dunkel); border-radius: 8px; cursor: pointer; }
.fehler { color: #a4331a; font-size: 15px; margin-top: 4px; }
.hinweis { font-size: 15px; color: var(--text-weich); }
.leise { color: var(--leise); font-size: 14px; }
.betrag { font-variant-numeric: tabular-nums; font-weight: 700; }
.zeile { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linie); }
.zeile:last-child { border-bottom: 0; }
.honigtopf { position: absolute; left: -9999px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Ergänzung zu Aufgabe 17, Punkt 1: die CSP dieses Servers erlaubt kein
   style-Attribut (style-src 'self' ohne 'unsafe-inline'). Diese zwei Klassen
   ersetzen die einzigen zwei style=-Attribute aus dem Aufgaben-Brief, mit
   unveraendert denselben Werten - nur der Ort aendert sich. */
.einwilligungsfeld { font-weight: 400; margin-top: 20px; }
.absendefeld { margin-top: 24px; }

/* <noscript> deckt nur ab, wenn Skripting abgeschaltet ist - bei aktivem
   JavaScript und einem scheiternden /index.js haengt die Seite sonst
   dauerhaft bei "Einen Moment, wir laden die Angaben.", ohne jeden Hinweis.
   #ladeRueckfall in index.html traegt diese Klasse: unsichtbar und ohne
   Platzbedarf, bis die Animation sie nach einer kurzen Frist einblendet.
   index.js entfernt das Element sofort beim Start - die Animation kommt dann
   nie zum Zug. */
.rueckfall-verzoegert { max-height: 0; overflow: hidden; opacity: 0; animation: rueckfall-einblenden .01s 6s forwards; }
@keyframes rueckfall-einblenden { to { max-height: 200px; opacity: 1; } }

/* Aufgabe 18 (Familienseite): eine einzelne Zusage in der Liste eines Kindes
   ist mehrzeilig (Sponsor, Kontakt, Betrag, Herkunft, ggf. Nachricht und
   Duplikat-Hinweis) - anders als .zeile (zweispaltig, fuer einzelne
   Wertepaare gedacht). Nur eine Trennlinie zwischen den Eintraegen, keine
   eigene Karte-in-Karte (kein zusaetzlicher Hintergrund/Rahmen). */
.zusage { border-top: 1px solid var(--linie); padding-top: 12px; margin-top: 12px; }
.zusage:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

/* Entscheid Tom 24.09.2026: eine als «nicht von uns» markierte Zusage bleibt
   ausgegraut stehen (storniert, zaehlt nicht mit). Nur der Text ist grau und
   die Zeile mit Sponsor und Betrag durchgestrichen; der Knopf «Markierung
   aufheben» behaelt seine volle Farbe, damit er gut zu sehen und anzutippen
   ist (10px Innenabstand wie jeder .neben-Knopf, rund 46px hoch). */
.zusage.markiert, .zusage.markiert .hinweis { color: var(--leise); }
.zusage.markiert .durchgestrichen { text-decoration: line-through; }

/* Entscheid Tom 24.09.2026: «Zusage von Hand erfassen» als eigener,
   abgesetzter Block innerhalb der Kind-Karte (Rahmen und heller Hintergrund
   wie .karte.hell), damit er nicht zwischen den Zusagen untergeht. */
.erfassenBlock { background: var(--marke-hell); border: 1px solid #bddee0; border-radius: 8px; padding: 12px 14px 14px; margin-top: 20px; }
.erfassenBlock h3 { margin: 0 0 4px; color: var(--marke-dunkel); font-size: 17px; }
.erfassenBlock > .hinweis { margin: 0 0 12px; }

/* Drei Umschaltknoepfe nebeneinander («So bezahlt man uns»: TWINT, Bankkonto,
   Bar) - weniger seitlicher Innenabstand und etwas kleinere Schrift als bei
   zwei Knoepfen, damit «Bankkonto» auch gewaehlt (fett) auf 375 px in seinen
   Knopf passt (nachgemessen im Trockenlauf mit headless Chrome). */
.wahl.drei { gap: 6px; }
.wahl.drei button { padding: 14px 2px; min-width: 0; font-size: 16px; }

/* Politur 26.09.2026 (Familienseite, Trockenlauf bei 375 px): Stand und
   Fortschritt stehen zuoberst. Nur neue Klassen, die ausschliesslich
   familie.html/familie.js verwenden - die geteilten Regeln oben bleiben
   unveraendert, damit Sponsorformular, Rangliste, Sammelblatt und Admin
   gleich aussehen.
   .karte.knapp: der Hinweis «Diese Seite gehört dir» bleibt, braucht aber
   weniger Hoehe (kein Absatzabstand, kleinere Schrift). */
.karte.knapp { padding: 10px 14px; }
.karte.knapp p { margin: 0; font-size: 15px; line-height: 1.45; }
/* Betrag gross, «von CHF X» daneben, Beschriftung klein darueber. */
.stand { margin: 8px 0 0; }
.familienstand .stand { margin-top: 0; }
.standTitel { display: block; font-size: 15px; color: var(--text-weich); }
.stand .betrag { font-size: 28px; line-height: 1.25; color: var(--marke-dunkel); }
.standVon { color: var(--text-weich); white-space: nowrap; }
/* Schlichter Balken in den Markenfarben. appearance: none, damit Safari und
   Chrome die Pseudo-Elemente unten statt ihres eigenen Balkens zeigen. */
progress.fortschritt {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 10px;
  margin: 6px 0 4px; border: 1px solid #bddee0; border-radius: 6px; overflow: hidden;
  background: var(--marke-hell); color: var(--marke);
}
progress.fortschritt::-webkit-progress-bar { background: var(--marke-hell); }
progress.fortschritt::-webkit-progress-value { background: var(--marke); }
progress.fortschritt::-moz-progress-bar { background: var(--marke); }
.familienstand > :last-child { margin-bottom: 0; }
/* Kind-Karte: der Name steht oben in der Karte, ohne den h2-Abstand von
   28px, der fuer Ueberschriften zwischen Abschnitten gedacht ist. */
#kinderListe > .karte > h2:first-child { margin-top: 0; }

/* Aufgabe 19 (Admin-Seite): mehrere Knoepfe unterschiedlicher Textlaenge
   nebeneinander, die bei schmalem Bildschirm umbrechen - anders als .wahl
   (genau zwei gleich breite Knoepfe fuer einen Umschalter). */
.knopfliste { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }

/* Admin-Seite: das Protokoll ist vorformatierter Text (eine Zeile pro
   Ereignis, siehe admin.js) - <pre> erhaelt sonst die Monospace-Schrift des
   Browsers statt der Seitenschrift und bricht lange Zeilen nicht um.
   Politur 26.09.2026: zurueckgenommen - kleiner, leiser (Papier statt
   Markenfarbe, weiche Schrift), hoechstens 220px hoch, danach scrollt es. */
.protokoll {
  font-family: inherit; font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
  color: var(--text-weich); background: var(--papier); border: 1px solid var(--linie); border-radius: 8px;
  padding: 10px 12px; max-height: 220px; overflow-y: auto; margin: 6px 0 0;
}

/* Politur 26.09.2026 (Admin-Seite), nur Klassen dieser Seite. */
.protokollKarte h2 { font-size: 15px; margin: 0; color: var(--leise); }
.tokenKarte label { margin-top: 0; }
.tokenKarte .leise { margin: 8px 0 0; }
/* Drei Kennzahlen nebeneinander; auf dem Handy bleibt es ein kleines
   3er-Raster (kleinere Zahlen), damit die Aktionen nicht nach unten rutschen. */
.kennzahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; }
.kachel { background: var(--panel); border: 1px solid var(--linie); border-radius: var(--radius); padding: 12px 14px; min-width: 0; }
.kachel p { margin: 0; }
.kachelTitel { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--leise); }
.kachelWert { font-size: 28px; line-height: 1.2; font-weight: 700; color: var(--marke-dunkel); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kachelWaehrung { font-size: 15px; font-weight: 600; color: var(--text-weich); }
.kachelZusatz { font-size: 13px; line-height: 1.35; color: var(--leise); margin-top: 2px; }
@media (max-width: 479px) {
  .kennzahlen { gap: 6px; }
  .kachel { padding: 10px 8px; }
  .kachelTitel { font-size: 11px; letter-spacing: .03em; }
  .kachelWert { font-size: 20px; }
  .kachelWaehrung { display: block; font-size: 12px; }
  .kachelZusatz { font-size: 12px; }
}
/* Knoepfe in drei Gruppen: kleine Ueberschrift, die wichtigste Aktion der
   Gruppe gefuellt (.haupt), aber nicht in voller Breite wie im Formular. */
.aktionsgruppe + .aktionsgruppe { border-top: 1px solid var(--linie); margin-top: 12px; padding-top: 4px; }
.aktionsgruppe h3 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--leise); margin: 12px 0 0; }
.knopfliste button.haupt { width: auto; padding: 10px 14px; border: 1px solid var(--marke); }

/* Rangliste: echte Tabelle statt .zeile (die ist zweispaltig, fuer einzelne
   Wertepaare gedacht) - Rang/Vorname/Riege/Betrag sind vier Spalten. */
.rangliste { width: 100%; border-collapse: collapse; margin: 12px 0 0; }
.rangliste th, .rangliste td { padding: 8px 6px; text-align: left; border-bottom: 1px solid var(--linie); }
.rangliste th { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--leise); font-weight: 600; }
.rangliste th:last-child, .rangliste td:last-child { text-align: right; }
/* Entscheid Tom 24.09.2026: Umschalter Beträge/Meter über den beiden Listen. */
.wahl.reiter { margin: 0 0 16px; }

/* Sammelblatt: eine Druckseite pro Kind. Texte links (.blattText), QR-Code
   oben rechts daneben (.qrBereich), darunter die Tabelle (Testlauf
   24.09.2026 - vorher stand der QR-Code zentriert zwischen Kopf und
   Tabelle und kostete eine eigene Zeile Platz). */
.blatt { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px dashed var(--linie); }
.blatt:last-child { border-bottom: 0; }
.blattKopf { display: flex; align-items: flex-start; gap: 6mm; }
.blattText { flex: 1 1 auto; min-width: 0; }
.blattText > :last-child { margin-bottom: 0; }
.blatt .verein { margin-top: 0; }
.blatt h2 { margin: 2mm 0 1mm; }
.blatt header p.hinweis { margin: 0 0 2mm; }
.qrBereich { flex: 0 0 38mm; text-align: center; overflow-wrap: anywhere; }
.qrBereich p { margin: 1mm 0 0; font-size: 10pt; }
/* Ohne QR-Code (Kind noch ohne Code, oder der Code liess sich nicht
   erzeugen) steht dort ein Satz statt des Bilds - etwas breiter, damit er
   nicht zu einer langen, schmalen Spalte wird. */
.qrBereich.ohneQr { flex-basis: 60mm; text-align: left; }
.qrCanvas { display: block; width: 32mm; height: 32mm; margin: 0 auto; }
.tabelle { width: 100%; border-collapse: collapse; margin-top: 6mm; }
.tabelle th, .tabelle td { border: 1px solid #333; padding: 6px 8px; height: 11mm; }
.tabelle th { background: #eef7f7; font-size: 10pt; text-align: left; height: 8mm; }
.fusszeile { margin-top: 8px; }

/* Druck: .nichtdrucken blendet den Bildschirm-Kopf (Ladehinweis,
   Druckknopf, Fehlerkarte) aus; .blatt erzwingt einen Seitenumbruch
   zwischen den Kindern, ausser nach dem letzten.
   Testlauf 24.09.2026 (leere zweite Seite): die Abstaende fuer den
   Bildschirm (.huelle unten 64px, .blatt unten 24px Innen- und 24px
   Aussenabstand) galten bisher auch im Druck. Chrome teilt einen
   Innenabstand nicht auf zwei Seiten auf - passte er nicht mehr auf die
   Seite, schob Chrome die letzte Zeile des Blatts (die Fusszeile) samt
   Abstand auf eine neue Seite. Im Druck sind sie deshalb null. Dieser
   Block steht mit Absicht NACH den Bildschirmregeln oben, damit er sie
   ueberschreibt. */
@media print {
  @page { size: A4; margin: 12mm; }
  .nichtdrucken { display: none; }
  body { background: #fff; font-size: 11pt; }
  .huelle { padding: 0; }
  .blatt { margin: 0; padding: 0; border: 0; break-after: page; page-break-after: always; }
  .blatt:last-child { break-after: auto; page-break-after: auto; }
}

/* Bauplan 27.09.2026 (A5): Hilfeseite und Fusszeile. Die Fragen als
   details/summary - ohne Skript aufklappbar, auch auf dem Handy. */
.frage { border-bottom: 1px solid var(--linie); padding: 10px 0; }
.frage summary { cursor: pointer; font-weight: 600; color: var(--marke-dunkel); }
.frage p { margin: 8px 0 0; }
.fuss { margin-top: 32px; border-top: 1px solid var(--linie); padding-top: 8px; }
/* Die Karte «Link erneut anfordern» hat schon ihren Innenabstand; ihre
   Ueberschrift braucht keinen zweiten nach oben. Nur hier, die anderen
   Seiten bleiben unveraendert. */
.linkKarte > h2:first-child { margin-top: 0; }