/* ============================================================
   Spesenrechner
   ============================================================
   Teil der nach Funktion aufgeteilten Gestaltung (29.08.2026).

   Vorher lag alles in einer seite.css mit 1.940 Zeilen, und jede neue
   Funktion wurde hinten drangehaengt. Max am 29.08.2026: "dass nicht
   alles in App.js reinkommt und in CSS, sondern dass das nach Funktion
   getrennt wird." Beim JavaScript war das laengst so, beim CSS nicht.

   Neue Regeln gehoeren in die Datei ihrer Funktion, nicht ans Ende der
   naechstbesten. Die Einbindereihenfolge in den HTML-Dateien entspricht
   der Reihenfolge, in der die Bloecke vorher in seite.css standen -
   daran haengt die Kaskade. tests/frontend-architecture.test.js prueft
   beides.
   ============================================================ */

/* ---------- Spesenquittung: bearbeitbare Beträge ---------- */

.q-eingabe {
  width: 92px;
  text-align: right;
  font: inherit;
  font-weight: 700;
  font-size: .92rem;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: inherit;
}
.q-eingabe:hover { border-color: var(--border); }
.q-eingabe:focus { border-color: var(--marke-hell); background: var(--card); outline: none; }
.q-eingabe.geaendert { border-color: var(--karte-gelb); background: var(--karte-gelb-hell); }

.q-summen { border-top: 1px solid var(--border); }
.q-summen .q-zeile { font-weight: 600; }
/* Gleiche Sprache wie die Personenueberschrift darueber (.person-kopf),
   damit der Block als eigener Abschnitt gelesen wird und nicht als
   Wiederholung der Zeilen davor. */
.q-summen-kopf {
  padding: 12px 16px 2px;
  font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted);
}

.linkknopf {
  font: inherit; font-size: inherit; font-weight: 700;
  background: none; border: 0; padding: 0;
  color: var(--marke-dunkel); cursor: pointer;
  text-decoration: underline;
}

/* Schritt, der gerade nichts zur Rechnung beiträgt (z. B. die Liga bei
   einem Turnier). Nicht ausblenden - man soll sehen, dass es ihn gibt. */
.schritt.gedaempft { opacity: .55; }
.schritt-still { background: transparent; border-style: dashed; }

/* ---------- Eine Bauform fuer alle Auswahlgruppen (30.08.2026) ----------
   Max ueber "Art des Spiels": "das ist irgendwie bisschen mismatched mit
   den Buttons und so." Er hat recht, und es war nicht eine Sache,
   sondern vier - jede fuer sich klein, zusammen sah der Abschnitt
   angeklebt aus:

   1. Die Ueberschrift war ein <span class="feldname"> mit .82rem und
      7 px Abstand, die Etiketten direkt darueber und darunter ein
      <label> mit .79rem und 6 px. Zwei Zeilen mit derselben Aufgabe,
      die verschieden aussahen.
   2. Die Knoepfe kamen aus dem allgemeinen .segment: 40 px hoch,
      .85rem, Pillenform mit 999px Radius - unmittelbar neben
      Auswahlfeldern mit 46 px, .9rem und 11 px Radius.
   3. Ihre Breiten liefen ueber "flex: 1 1 auto", also nach Textlaenge:
      "Meisterschaft" wurde mehr als doppelt so breit wie "Pokal", und
      die Reihe brach je nach Fenster woanders um.
   4. Die Blockabstaende standen als style="margin-top:16px|14px|12px|
      10px" im Markup - vier Werte fuer dieselbe Luecke.

   Statt jede Stelle einzeln zu flicken, gibt es jetzt EINE Bauform:
   .feldname sieht aus wie label, .wahl-block ist der eine Blockabstand,
   .wahl-gruppe ein Raster gleich breiter Felder, und Hoehe, Radius und
   Schriftgrad kommen fuer Felder, Knoepfe und Haken aus einer Regel. */

.feldname {
  display: block;
  font-size: .79rem; font-weight: 600;
  color: var(--marke-hell); margin-bottom: 6px;
}

.wahl-block { margin-top: 16px; }
.wahl-block:first-child { margin-top: 0; }

/* Zwei gleich breite Spalten in jeder Fensterbreite. Das haelt die
   Umbrueche vorhersagbar - vier Spielarten sind zwei Reihen, die
   Schnellauswahl eine Reihe je Frage - und macht den eigenen
   Umbruchpunkt bei 520 px ueberfluessig, den es dafuer vorher gab. */
.wahl-gruppe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wahl-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-weight: 600;
  padding: 9px 12px; text-align: center;
  border: 1px solid var(--border);
  background: #fff; color: var(--marke-hell);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.wahl-knopf[aria-pressed="true"] {
  border-color: var(--marke);
  background: var(--marke-lighter);
  color: var(--marke-dunkel);
  font-weight: 700;
}

/* Die eine Stelle fuer Hoehe, Radius und Schriftgrad aller
   Bedienelemente des Rechners. Mit ".rechner" eingegrenzt, weil
   spesen.css auch obmann.html laedt - und weil die hoehere Spezifitaet
   die Einzelregeln weiter unten schlaegt, unabhaengig davon, in welcher
   Reihenfolge sie in dieser Datei stehen. */
.rechner .feld,
.rechner .wahl-knopf,
.rechner .haken {
  min-height: 46px;
  font-size: .9rem;
  border-radius: 11px;
  border-width: 1px;
}
.q-eingabe-halter { display: inline-flex; align-items: center; gap: 3px; flex: none; }
.q-euro { font-weight: 700; font-size: .92rem; }


/* ============================================================
   Aus spesenrechner.html hierher geholt (29.08.2026)
   ============================================================
   Diese Regeln standen bis heute als <style>-Block mitten im Kopf von
   spesenrechner.html - genau die Vermischung, die Max an diesem Tag
   angesprochen hat. Beim Aufteilen habe ich den Block zuerst
   versehentlich geloescht; aufgefallen ist es nur, weil der
   Pixelvergleich die Seite ploetzlich 152 px kuerzer gemessen hat.
   Zurueckgeholt aus der Git-Fassung des letzten Commits.

   ACHTUNG: Hier stehen einfache Elementselektoren wie "label" und
   ".feld". Solange sie inline standen, galten sie nur fuer diese eine
   Seite. Deshalb wird spesen.css ausschliesslich von spesenrechner.html
   eingebunden - und dort als LETZTES, weil der Block vorher auch als
   Letztes kam. Diese Datei darf nicht auf andere Seiten wandern, ohne
   die Selektoren vorher einzugrenzen.
   ============================================================ */

    .rechner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 26px; align-items: start; }
    @media (max-width: 880px) { .rechner { grid-template-columns: 1fr; } }

    /* ---------- Schrittweise statt Formularwüste ----------
       Max' Kritik: "Die Bedienoberfläche sieht noch nicht wirklich geil
       aus." Vorher waren es drei graue Kästen mit zwölf Feldern
       untereinander. Jetzt nummerierte Schritte - man sieht, wo man
       steht, und jeder Schritt stellt genau eine Frage. */
    .schritt { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 14px; overflow: hidden; }
    .schritt-kopf { display: flex; align-items: center; gap: 11px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
    .schritt-nr { width: 26px; height: 26px; border-radius: 50%; background: var(--marke); color: #fff; display: grid; place-items: center; font-size: .78rem; font-weight: 700; flex: none; }
    .schritt-kopf h2 { font-family: var(--font-titel); font-size: .97rem; margin: 0; }
    .schritt-koerper { padding: 16px 18px 18px; }

    label { display: block; font-size: .79rem; font-weight: 600; margin-bottom: 6px; color: var(--marke-hell); }
    /* Erklaerender Nachsatz am Etikett: leiser als das Etikett selbst,
       damit er das Feld nicht ueberschreit (22.08.2026). */
    .etikett-zusatz { font-weight: 500; color: var(--muted); }
    .feld { width: 100%; padding: 12px 13px; border: 1px solid var(--border); border-radius: 11px; font: inherit; font-size: .9rem; background: #fff; min-height: 46px; }
    .feld:disabled { background: #f9fafb; color: #9ca3af; }
    .hinweis-klein { font-size: .75rem; color: var(--muted); line-height: 1.5; margin: 7px 0 0; }

    /* ---------- Ligen als Leiter statt Auswahlliste ----------
       Max' Vorgabe: Reihenfolge nach Spielstärke von unten nach oben,
       ohne Sponsorennamen. Als Knopfreihe sieht man die Rangfolge auf
       einen Blick - in einer Auswahlliste sieht man immer nur eine. */
    /* Absteigend im DOM (stärkste Liga zuerst) statt per "column-reverse"
       gedreht. Vorher liefen Tastaturfokus und Screenreader genau
       entgegengesetzt zur Anzeige. */
    .vb-svfd { background: var(--green-light); color: var(--green-dark); }
    .vb-sfv { background: var(--blau-hell); color: #1d4ed8; }

    .haken-reihe { display: flex; flex-wrap: wrap; gap: 8px; }
    .haken { display: flex; align-items: center; gap: 9px; border: 1.5px solid var(--border); border-radius: 999px; padding: 10px 16px 10px 13px; cursor: pointer; font-size: .85rem; font-weight: 500; background: #fff; user-select: none; min-height: 46px; }
    .haken input { margin: 0; width: 16px; height: 16px; accent-color: var(--marke); }
    .haken.an { border-color: var(--marke); background: var(--marke-lighter); font-weight: 600; }
    .haken.gesperrt { opacity: .55; cursor: not-allowed; }

    /* ---------- Quittung ---------- */
    .quittung { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; position: sticky; top: 80px; background: var(--card); box-shadow: var(--shadow); }
    .q-kopf { background: var(--marke); color: #fff; padding: 15px 18px; }
    .q-kopf h2 { margin: 0; font-size: .95rem; font-family: var(--font-titel); font-weight: 600; }
    .q-kopf .sub { font-size: .74rem; opacity: .7; margin-top: 3px; }
    .person { border-bottom: 1px solid var(--border); }
    .person-kopf { background: #fafafa; padding: 9px 18px; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--marke-hell); }
    .q-zeile { display: flex; justify-content: space-between; font-size: .86rem; padding: 10px 18px; gap: 14px; border-bottom: 1px solid #f7f7f8; }
    .q-zeile:last-child { border-bottom: 0; }
    .q-zeile b { white-space: nowrap; }
    .q-zeile .klein { display: block; font-size: .72rem; color: var(--muted); margin-top: 2px; font-weight: 400; }
    .q-zeile.person-summe { background: #fcfcfd; font-weight: 600; }
    .q-zeile.unsicher { background: #fffbeb; }
    .q-zeile.unsicher b { color: #854d0e; }
    .q-gesamt { display: flex; justify-content: space-between; padding: 17px 18px; background: var(--green-light); font-size: 1.15rem; align-items: center; font-family: var(--font-titel); }
    .q-gesamt b:last-child { color: var(--green-dark); }
    .q-haftung { font-size: .74rem; color: #713f12; padding: 13px 18px; background: #fffbeb; border-top: 1px solid #fde68a; line-height: 1.55; margin: 0; }

    /* ---------- Sichtbarer Abschluss (Testrunde 2) ----------
       Woertlich: "Man wusste nicht, wann man fertig ist." Der Rechner
       hoerte nach dem letzten Eingabefeld einfach auf. Der Abschluss
       traegt deshalb denselben gruenen Grund wie .q-gesamt direkt
       darueber und hat nach oben keine Trennlinie: Summe und "was jetzt
       zu tun ist" sollen als EIN Block gelesen werden, nicht als zwei. */
    .q-abschluss { padding: 0 18px 18px; background: var(--green-light); }
    .q-abschluss-titel { margin: 0 0 4px; font-size: .88rem; font-weight: 700; font-family: var(--font-titel); color: var(--green-dark); }
    .q-abschluss-text { margin: 0 0 12px; font-size: .8rem; line-height: 1.55; color: var(--marke-hell); }
    .q-drucken {
      display: inline-flex; align-items: center; justify-content: center;
      min-height: 44px; padding: 10px 18px;
      font: inherit; font-size: .86rem; font-weight: 700;
      border: 1px solid var(--marke); border-radius: 11px;
      background: var(--marke); color: #fff; cursor: pointer;
    }
    .q-drucken:hover { background: var(--marke-dunkel); border-color: var(--marke-dunkel); }

    .lage-marker { display: inline-block; font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; margin-left: 6px; }
    .lm-dd { background: var(--green-light); color: var(--green-dark); }
    .lm-aus { background: var(--karte-gelb-hell); color: #854d0e; }
    .lm-frag { background: var(--red-hell); color: #991b1b; }


/* ============================================================
   Handy (29.08.2026)
   ============================================================
   Max: "vor allem auch fuer die mobile Version auf dem Handy besser."
   Geprueft gegen 390 px Breite - damit kommen die meisten unserer
   Schiedsrichter auf die Seite, naemlich zwischen zwei Spielen.

   Vier Dinge waren dort echte Huerden:

   1. Die Quittung klebte an "top: 80px". Einspaltig steht sie aber
      hinter dem Formular - man tippt oben und sieht das Ergebnis erst
      nach dem Durchscrollen. Dafuer gibt es jetzt die klebende
      Ergebniszeile am unteren Rand.
   2. Die Betragsfelder waren rund 28 px hoch und rahmenlos. Unter
      44 px trifft man sie mit dem Daumen nicht zuverlaessig - und dass
      sie ueberhaupt Eingabefelder sind, sah man nicht.
   3. Schriftgroessen unter 16 px lassen iOS Safari beim Antippen eines
      Feldes in die Seite hineinzoomen. Danach steht sie verschoben, und
      man muss sie von Hand zurueckziehen.
   4. Die vier Spielarten passten nebeneinander nicht in eine
      390-px-Zeile, ohne dass die Beschriftungen brechen. Das erledigt
      seit dem 30.08.2026 das Zweispalten-Raster von .wahl-gruppe, das
      in jeder Breite gilt - hier steht dafuer nichts mehr.

   ACHTUNG, dieselbe Auflage wie oben: keine nackten Elementselektoren.
   Alles hier haengt an Klassen, die es nur auf dem Spesenrechner gibt -
   spesen.css laedt auch obmann.html.
   ============================================================ */

/* Auf breiten Bildschirmen klebt die Quittung selbst, dort waere die
   Zeile doppelt gemoppelt. */
.ergebnis-leiste { display: none; }

@media (max-width: 880px) {
  .ergebnis-leiste {
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
    z-index: 20;
    /* Bis an den Rand der Polsterung von .inhalt (20 px), damit die
       Zeile wie eine Leiste wirkt und nicht wie eine Karte. */
    margin: 16px -20px 0;
    padding: 12px 20px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    min-height: 60px;
    background: var(--card);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 18px rgba(16, 24, 40, .10);
  }
  .el-titel { font-size: .8rem; font-weight: 600; color: var(--muted); }
  .el-betrag {
    margin-left: auto;
    font-family: var(--font-titel);
    font-size: 1.2rem;
    color: var(--green-dark);
  }
  .el-betrag.unvollstaendig { color: #854d0e; }
  .el-sprung {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 0 14px;
    border: 1px solid var(--border); border-radius: 999px;
    font-size: .8rem; font-weight: 600;
    text-decoration: none; color: var(--marke-hell);
    white-space: nowrap;
  }

  /* Einspaltig steht die Quittung hinter dem Formular. Dort gibt es
     nichts mehr zu ueberholen, also auch nichts zu kleben. */
  .quittung { position: static; }

  /* 16 px ist die Grenze, unter der iOS Safari beim Fokus hineinzoomt. */
  .rechner .feld,
  .rechner .q-eingabe { font-size: 16px; }
  .rechner .feld { min-height: 48px; }
  .rechner .haken { min-height: 48px; }
  .rechner .wahl-knopf { min-height: 48px; font-size: 16px; }

  /* Betragsfeld: als Feld erkennbar und mit dem Daumen treffbar. */
  .rechner .q-eingabe {
    width: 106px;
    min-height: 44px;
    padding: 8px 10px;
    border-color: var(--border);
    background: #fff;
  }
  .q-zeile { align-items: center; padding: 12px 16px; }
  /* Ohne min-width: 0 schiebt die lange Erklaerzeile links das Feld aus
     der Karte heraus - und die Seite bekommt einen Querbalken. */
  .q-zeile > span:first-child { min-width: 0; overflow-wrap: anywhere; }
  .q-gesamt { padding: 16px; }
  .q-haftung .linkknopf { display: inline-block; padding: 8px 0; }
}

/* ============================================================
   Der Ausdruck der Quittung (Testrunde 1)
   ============================================================
   Die Testperson hat "Zur Quittung" gedrueckt, weil sie die
   ausgefuellte Quittung ausdrucken wollte - der Knopf ist aber nur
   nach unten gesprungen, und sie hielt ihn fuer kaputt. Es gibt jetzt
   beides: die ehrlich benannte Sprungmarke und einen echten
   Druckknopf unten in der Quittung.

   Gedruckt wird ausschliesslich die Quittung. Das Formular daneben ist
   die Eingabe und nicht das Ergebnis; Kopfleiste, Fussleiste und die
   klebende Ergebniszeile sind reine Bildschirmbedienung. Die
   Betragsfelder verlieren ihren Rahmen - mit Rahmen sieht das Blatt
   aus wie ein Formular, das noch auszufuellen waere.

   Es kommen bewusst KEINE neuen Angaben aufs Blatt. Was die Quittung
   nicht kennt (Datum, Spielkennung, Unterschrift), steht auf dem
   Papierformular des Verbands - hier waere es erfunden.

   spesen.css laedt auch obmann.html. Diese Regeln greifen dort nur
   beim Drucken und blenden dabei dieselbe Kopf- und Fussleiste aus;
   alles Uebrige haengt an Klassen, die es nur hier gibt.
   ============================================================ */
@media print {
  .sprungmarke,
  .seiten-kopf,
  .seiten-fuss,
  .seiten-unter,
  .ergebnis-leiste,
  .rechner-formular,
  .q-abschluss { display: none !important; }

  .rechner { display: block; }
  .quittung {
    position: static;
    box-shadow: none;
    border: 1px solid #999;
    break-inside: avoid;
  }
  .q-kopf { background: #fff; color: #000; border-bottom: 1px solid #999; }
  .q-kopf .sub { opacity: 1; }
  .q-gesamt { background: #fff; border-top: 1px solid #999; }
  .q-haftung { background: #fff; color: #000; }
  /* Eingabefeld auf dem Papier: nur noch die Zahl. */
  .q-eingabe {
    width: 78px; min-height: 0; padding: 0;
    border: 0; background: transparent; color: #000;
  }
  .q-eingabe.geaendert { background: transparent; }
}