/**
 * JETZT.GOLF – Die Runde (Phase 12). Ergaenzt konto.css, ersetzt es nicht.
 *
 * ENTWORFEN FUER DIE BEDIENUNG AUF DER BAHN, nicht fuer den Schreibtisch: Sonne, Handschuh,
 * eine Hand am Bag. Daraus folgen die Groessen hier – 44 px ist das Minimum fuer ein Tippziel,
 * die Ziffern im Block sind 52 px hoch.
 *
 * Alle Farben ueber `--jg-*` aus tokens.css. Nichts hart codiert – sonst driftet diese Seite
 * beim naechsten Design-Wechsel von den uebrigen ab.
 */

/* `hidden` verliert gegen jede eigene `display`-Regel. Ohne diese Zeile meldet ein Element im
   DOM brav `hidden === true` und ist trotzdem sichtbar – im Bildschirmfoto faellt es auf, im
   DOM nie. Dieselbe Absicherung steht in konto.css. */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------------------- Rundenstart */

.wahlreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wahlreihe button {
  flex: 0 1 auto;
  min-height: 44px;
  padding: 10px 16px;
  font-family: inherit;
  /* 16px, sonst zoomt iOS beim Antippen hinein. Gilt hier auch fuer Knoepfe, damit die Reihe
     nicht springt, wenn daneben ein Eingabefeld steht. */
  font-size: 16px;
  color: var(--jg-ink);
  background: #fff;
  border: 1px solid var(--jg-line);
  border-radius: 10px;
  cursor: pointer;
}

.wahlreihe button[aria-pressed="true"] {
  color: #fff;
  background: var(--jg-green);
  border-color: var(--jg-green);
}

/* Zweizeilige Wahlknöpfe: Titel und darunter, was die Spielart bzw. Paarung bedeutet.
   „Bestball“ allein sagt niemandem, ob gegeneinander oder als Team gespielt wird – und genau das
   ist die Entscheidung, die hier zu treffen ist. Untereinander statt nebeneinander, weil die
   Texte auf einem Telefon sonst nicht lesbar umbrechen. */
.wahlreihe-breit { flex-direction: column; align-items: stretch; }

.wahlreihe .wahl-zwei {
  display: block;
  text-align: left;
  padding: 10px 14px;
  line-height: 1.3;
}

.wahlreihe .wahl-zwei b { display: block; font-size: 16px; font-weight: 500; }
.wahlreihe .wahl-zwei span { display: block; font-size: 13px; color: var(--jg-muted); }
.wahlreihe .wahl-zwei[aria-pressed="true"] span { color: rgba(255, 255, 255, .85); }

/* DIE FELDER STEHEN IMMER UNTEREINANDER, jedes über die volle Breite – dieselbe Block-Bauform wie
   jedes andere Formularfeld des Projekts (`.feld input` in konto.css). Ansage des Betreibers,
   09.08.2026.

   OHNE MEDIA QUERY, und das ist Absicht: Hier standen nacheinander 420 px und 700 px, beide
   falsch. Eine Viewport-Query taugt an dieser Stelle grundsätzlich nicht, weil die Spalte gar
   nicht mitwächst – `.wrap` ist `--jg-w-form` = 600 px, netto 564 px, bei JEDER Fenstergröße.
   Mit der Query standen die Felder ausgerechnet am großen Bildschirm nebeneinander, wo die
   Spalte am schmalsten ist. Derselbe Denkfehler wie bei den Knopfgruppen; siehe dort.

   GRID STATT BLOCK, damit die Felder ÜBER ALLE SPIELER FLUCHTEN: Die erste Zeile („Ich") hat
   keinen Entfernen-Knopf. Ohne feste 44-px-Spur wäre ihr Namensfeld breiter als die darunter –
   vier Spieler, vier Kantenverläufe (Befund des Betreibers, 08.08.2026). Die Spur steht deshalb
   auch dort, wo kein Knopf darin sitzt.

   Der Entfernen-Knopf bleibt NEBEN dem Namen statt unter den Feldern: Er gehört zur Person, und
   unter dem Abschlag stünde er so weit vom Namen entfernt, dass nicht mehr erkennbar wäre, wen
   er entfernt.

   `minmax(0, …)` ist Pflicht: Ohne die 0 als Untergrenze wächst eine Grid-Spur mit ihrem Inhalt
   und ein langer Name schöbe die Zeile aus dem Bild. */
/* ⚠️ EINSPALTIG SEIT 25.08.2026 – das ✕ steht im KOPF, nicht mehr hier.
   Die alte zweite Spalte (44 px fuer den Knopf) blieb nach dem Umzug LEER stehen und nahm
   trotzdem Platz: Das Namensfeld endete 44 px vor HCPI und Abschlag darunter, die sich ueber
   beide Spalten spannten. Im Bild sah es aus, als sei das Feld zu kurz geraten – im CSS stand
   nur eine Spalte zu viel. Befund des Betreibers („das Layout ist nicht tauglich"). */
.spieler-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "name"
    "hcpi"
    "tee";
  align-items: end;
  /* Mehr Luft zwischen den Zeilen als zwischen den Spalten: Untereinander grenzt sonst ein
     Eingabefeld direkt an die nächste Beschriftung, und die Zuordnung wird undeutlich. */
  gap: 14px 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--jg-line);
}

.spieler-zeile:last-of-type { border-bottom: 0; }

.spieler-name { grid-area: name; }
.spieler-hcpi { grid-area: hcpi; }
.spieler-tee  { grid-area: tee; }

/* Die Zellen selbst dürfen schrumpfen – sonst hilft das minmax(0) der Spur nichts. */
.spieler-name,
.spieler-hcpi,
.spieler-tee { min-width: 0; }

.spieler-zeile label {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  color: var(--jg-muted);
}

.spieler-zeile input {
  /* ⚠️ `border-box` IST PFLICHT, NICHT KOSMETIK (25.08.2026): `width: 100%` plus 20 px Polster
     plus 2 px Rahmen ergibt 22 px MEHR als der Behaelter. Das Feld lief immer schon ueber –
     auf weissem Grund war es nur unsichtbar. Erst seit die Karte eine eigene Flaeche traegt,
     steht das Feld sichtbar darueber hinaus (Befund des Betreibers).
     Dieses Projekt setzt `box-sizing` NICHT global; wer hier ein Feld ergaenzt, setzt es mit. */
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 16px;
  color: var(--jg-ink);
  border: 1px solid var(--jg-line);
  border-radius: 10px;
}


/* ---- DAS ✕ LINKS VOR DEM NAMEN (25.08.2026) ----
   Eigene Klasse, keine geborgte: `.spieler-weg` steht im Grid der aufgeklappten Zeile
   (`grid-area: weg`) und haette hier eine Spalte gesucht, die es nicht gibt.

   ⚠️ DIE FLEX-ZEILE IST PFLICHT, nicht Kosmetik: `.spieler-kopf` ist ein `<button>`, ein
   zweiter darin waere ungueltiges Markup. Beide liegen deshalb nebeneinander, und der Kopf
   nimmt den Rest der Breite.

   ZURUECKHALTEND GEHALTEN – graue Linie, graues Zeichen, keine rote Flaeche: Es ist der
   seltene Fall, nicht das Angebot (Grundsatz „Loeschen-Knopf zurueckhaltend"). Die vollen
   44 px bleiben, damit man ihn auf der Bahn mit dem Daumen trifft. */
.spieler-kopfzeile { display: flex; align-items: center; gap: 8px; }

/* „Speichern" und „Abbrechen" im aufgeklappten Spieler (25.08.2026, Regel 8 der Kurzliste).
   UNTEREINANDER-UMBRUCH ueber `flex-wrap`, nicht ueber eine Media Query: Begrenzend ist die
   Kartenbreite, nicht das Fenster – derselbe Denkfehler hat bei `.aktionen` zwei Anlaeufe
   gekostet. Oben eine Trennlinie: Die Knoepfe gehoeren zur Zeile, sind aber keine Eingabe. */
.spieler-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--jg-line);
}
.spieler-aktionen .knopf-leise { flex: 1 1 140px; justify-content: center; }
.spieler-kopfzeile .spieler-kopf { flex: 1 1 auto; min-width: 0; }

.spieler-weg-kopf {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  /* Rot statt Grau (Ansage des Betreibers mit Bild, 25.08.2026): Es ist ein Entfernen, und das
     darf man sehen. Der KREIS bleibt heller als das Zeichen – die Form soll den Blick fuehren,
     nicht die Zeile dominieren („Loeschen-Knopf zurueckhaltend": Schrift ja, Flaeche nein). */
  color: var(--jg-red);
  background: none;
  border: 1px solid var(--jg-red-hell);
  border-radius: 50%;
  cursor: pointer;
  transition: box-shadow .12s, border-color .12s;
}

/* ⚠️ DER DICKERE KREIS KOMMT ALS `box-shadow`, NICHT ALS `border-width` (25.08.2026):
   Ein 2-px-Rand macht die Box zwei Pixel groesser, die Zeile springt beim Ueberfahren und die
   Namen daneben verrutschen. Ein innenliegender Schatten liegt IN der vorhandenen Flaeche –
   gleiche Wirkung, keine Bewegung. */
.spieler-weg-kopf:hover,
.spieler-weg-kopf:focus-visible {
  border-color: var(--jg-red);
  box-shadow: inset 0 0 0 1px var(--jg-red);
}

.spieler-weg-kopf svg { width: 16px; height: 16px; }

/* Der Haken beim Ersten: gleiche Groesse wie das ✕, damit die Namen aller Zeilen fluchten.
   Weisser Haken auf gruener Flaeche (Ansage des Betreibers) – gefuellt, weil er KEINE Aktion
   ist: Die umrandete Form gehoert hier den Knoepfen. */
.spieler-ich {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  background: var(--jg-green);
  border-radius: 50%;
}
.spieler-ich svg { width: 17px; height: 17px; }

/* Auf Touch die vollen 44 px – am Zeigergeraet festgemacht, nicht an der Fensterbreite
   (dieselbe Regel wie beim Schliessen-Knopf der Begruessung). Der Haken zieht mit, sonst
   verrutschen die Namen gegeneinander. */
@media (pointer: coarse) {
  .spieler-weg-kopf,
  .spieler-ich { width: 44px; height: 44px; }
}

/* ---- ABSCHLAGSFARBE JE ZEILE (25.08.2026) ----
   Variante B nach Vorschau: die Flaeche gruppiert auf einen Blick, der Punkt benennt. Die
   Werte kommen aus `tokens.css` – dieselben wie in den Platzdaten und im Course-Handicap-Kasten.

   ⚠️ EIGENE KLASSENNAMEN (`tee-f-`/`tee-p-`), nicht die `.sk-f-`/`.pd-` der Clubseite: Die
   haengen dort in einer Tabelle bzw. Flex-Zeile und braechten deren Masse mit. Gleiche FARBE,
   eigene Form. */
.spieler-tee-punkt {
  width: 12px; height: 12px; flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .25);
}
.tee-p-gelb   { background: var(--jg-tee-gelb); }
.tee-p-blau   { background: var(--jg-tee-blau); }
.tee-p-rot    { background: var(--jg-tee-rot); }
.tee-p-weiss  { background: var(--jg-tee-weiss); }
.tee-p-schwarz{ background: var(--jg-tee-schwarz); }
.tee-p-orange { background: var(--jg-tee-orange); }
.tee-p-gruen  { background: var(--jg-tee-gruen); }

/* Die Flaeche traegt der KARTENRAHMEN, damit auch der aufgeklappte Teil mitfaerbt – eine Karte,
   eine Farbe.

   ⚠️ KEIN `overflow: hidden` (Befund des Betreibers, 25.08.2026): Es stand hier, um die Toenung
   in der abgerundeten Ecke zu halten – und schnitt dabei die AUSKLAPPLISTE des Abschlag-Waehlers
   ab. Die ist `position: absolute` mit `z-index: 20` und ragt bewusst aus der Karte heraus;
   gegen `overflow: hidden` des Vorfahren hilft kein z-index. Gebraucht wird es ohnehin nicht:
   Ein Hintergrund respektiert `border-radius` von selbst, abgeschnitten werden muesste nur ein
   KIND mit eigener Flaeche – und das gibt es hier nicht. */
.spieler-karte[class*="tee-f-"] { border-radius: 10px; }
.tee-f-gelb   { background: var(--jg-teeflaeche-gelb); }
.tee-f-blau   { background: var(--jg-teeflaeche-blau); }
.tee-f-rot    { background: var(--jg-teeflaeche-rot); }
.tee-f-weiss  { background: var(--jg-teeflaeche-weiss); }
.tee-f-schwarz{ background: var(--jg-teeflaeche-schwarz); }
.tee-f-orange { background: var(--jg-teeflaeche-orange); }
.tee-f-gruen  { background: var(--jg-teeflaeche-gruen); }

/* JEDE SPIELERZEILE IST EIN AUFKLAPPER (Ansage des Betreibers, 10.08.2026): „da sich da
   üblicherweise nichts ändert". Vier Spieler ergaben sonst zwölf Felder untereinander, und
   „Runde beginnen" lag weit unterhalb des Bildschirms.

   Gleiche Sprache wie die Aufklapper in „Mein Konto": Kopfzeile mit Pfeil, Inhalt darunter. Nur
   OHNE deren Exklusivität – hier darf man zwei Spieler gleichzeitig offen haben. */
/* ## ZEILEN KLEBEN NIE ANEINANDER (Ansage des Betreibers, 25.08.2026)
   Die Trennlinie allein reichte, solange die Zeilen weiss auf weiss standen. Seit jede Karte
   eine eigene FLAECHE traegt, stossen zwei Farbfelder ohne Abstand aneinander – und zwei gelbe
   Zeilen sehen dann aus wie ein Block, nicht wie zwei Spieler. Der Abstand IST hier die
   Trennung; die Linie darf gehen. */
.spieler-karte {
  margin-bottom: 8px;
}

.spieler-karte:last-of-type { margin-bottom: 0; }

/* Ohne eigene Flaeche fehlt die Abgrenzung – dort traegt weiterhin die Linie. Wer den Rundenstart
   ohne Platzdaten oeffnet (keine Abschlaege, keine Farben), sieht sonst gar keine Zeilentrennung. */
.spieler-karte:not([class*="tee-f-"]) {
  border-bottom: 1px solid var(--jg-line);
  padding-bottom: 2px;
}
.spieler-karte:not([class*="tee-f-"]):last-of-type { border-bottom: 0; }

.spieler-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 10px 0;
  font-family: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

/* Der Name nimmt den Platz, die Kurzfassung steht rechts davor – so fluchten die Zahlen aller
   Spieler untereinander und man vergleicht sie mit einem Blick. */
.spieler-kopf-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--jg-ink);
  overflow-wrap: anywhere;
}

.spieler-kopf-kurz {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--jg-muted);
}

/* Die FORM steht zentral in `kopfmenue.css` (`.aufklapp-pfeil`) – hier nur der offene Zustand.
   Eine eigene Form hatte diese Zeile bis zum 17.08.2026: 18 px, grau, ohne Kreis. */
.spieler-kopf:hover > .aufklapp-pfeil {
  background: var(--jg-green); border-color: var(--jg-green); color: #fff;
}

.spieler-kopf[aria-expanded="true"] > .aufklapp-pfeil {
  transform: rotate(180deg);
  background: var(--jg-green); border-color: var(--jg-green); color: #fff;
  animation: none;
}

/* Im offenen Aufklapper trägt die Karte schon die Trennlinie – die Zeile darin braucht keine
   zweite, sonst stehen zwei Striche übereinander. */
/* ⚠️ SEITLICHER ABSTAND, seit die Karte eine eigene Flaeche traegt (25.08.2026): Ohne ihn
   stossen die Eingabefelder direkt an den Rand der Toenung, und der aufgeklappte Teil sieht
   aus, als gehoere er nicht mehr zur Karte. Derselbe Wert wie im Kopf, damit Beschriftung und
   Name untereinander fluchten. */
.spieler-inhalt { padding: 0 10px 12px; }
.spieler-inhalt .spieler-zeile { border-bottom: 0; padding-top: 0; }

/* SCHNELLWAHL: ein Knopf unter dem anderen, volle Breite (Ansage des Betreibers, 10.08.2026).
   Vorher standen sie als schmale Kacheln nebeneinander im Hinweis-Text – bei vier Namen brach das
   unruhig um, und die Trefferflächen waren unterschiedlich groß. Untereinander ist es dieselbe
   Bauform wie bei allen anderen Knopfgruppen des Projekts (`.aktionen`), und aus demselben Grund
   OHNE Media Query: begrenzend ist die Spalte, nicht das Fenster. */
.spieler-wahl {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

/* DIE SCHNELLWAHL IST EINE TABELLE (16.08.2026, Ansage des Betreibers). Sie war eine Reihe von
   Knöpfen; die Herkunft stand darin als Text. Jetzt: Name, Woher, Aktion – und die Herkunft ist
   ein LINK in den zuständigen Abschnitt von „Mein Konto".

   HERKUNFT JE EINTRAG (15.08.2026): Der Unterschied ist nicht kosmetisch – ein Freund hat ein
   Konto und kann die Runde spaeter sehen, ein Eintrag aus der eigenen Liste ist ein Name auf
   einem Zettel. Die Ueberschrift nennt beide Quellen zusammen; erst hier wird sichtbar, welche
   gerade gemeint ist. */
.wahl-tab { margin-top: 10px; }
/* Der Name bekommt den Platz: Die beiden anderen Spalten sind so schmal wie ihr Inhalt. */
.wahl-tab .wahl-sp-name { text-align: left; }
.wahl-tab .wahl-sp-her,
.wahl-tab .wahl-sp-tun { width: 1%; white-space: nowrap; }
.wahl-tab td.wahl-name { text-align: left; overflow-wrap: anywhere; }
.wahl-tab td.wahl-her,
.wahl-tab td.wahl-tun { width: 1%; white-space: nowrap; }
.wahl-tab td.wahl-tun { text-align: right; }
/* Der Knopf sitzt in einer Tabellenzelle – ohne diese Zeile erbte er die volle Spaltenbreite
   und stünde als Balken in der Zeile. */
.wahl-tab .wahl-nehmen { width: auto; margin: 0; padding: 6px 12px; font-size: 14px; }

/* VERSALIEN, WIE VOM BETREIBER VERLANGT – über CSS und nicht im Text: Vorgelesen wird „Freund",
   nicht „F-R-E-U-N-D", und der Wortlaut bleibt an einer Stelle im Skript. Dieselbe Bauform wie
   `.jg-block` (Sperrung dazu, sonst kleben Versalien). */
.wahl-herkunft {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--jg-muted);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.wahl-herkunft:hover { color: var(--jg-ink); }

/* Der Freund traegt die Markenfarbe – er ist der Fall mit den Moeglichkeiten dahinter. */
.wahl-herkunft.ist-freund { color: var(--jg-green); }
.wahl-herkunft.ist-freund:hover { color: var(--jg-green-dark); }

/* „Freund hinzufügen" unter der Tabelle. BEWUSST IN DER BAUFORM DES NACHBARN („Mitspieler
   temporär hinzufügen") und nicht schmaler: Beide holen jemanden in die Runde, stehen
   untereinander und sind gleichrangig. Ein schmaler Knopf über einem breiten sähe aus, als wäre
   der eine wichtiger – ohne dass es stimmt. */
.wahl-mehr { margin-top: 12px; }

/* Der temporäre Mitspieler steht in einem abgesetzten Block: grüner Rand wie beim
   Mitspieler-Formular in „Mein Konto" – dieselbe Bauform für dieselbe Sorte Sache. Ohne die
   Abgrenzung standen die zwei leeren Felder unvermittelt in der Spielerliste, und niemand sah,
   wo sie anfangen und wo sie aufhören. */
.temp-block {
  margin: 14px 0;
  padding: 0 14px 14px;
  border: 1px solid var(--jg-green-rand);
  border-radius: 10px;
  background: var(--jg-green-faint);
}

/* Der Blocktitel bringt oben eigenen Abstand mit (`kopfmenue.css`) – im Kasten wäre er zu viel. */
.temp-block .jg-block { margin-top: 14px; }

.temp-block .spieler-zeile { border-bottom: 0; padding-bottom: 0; }

.temp-block .knopf-leise {
  width: 100%;
  justify-content: center;
  margin-top: 12px;
  background: #fff;
}

/* `justify-content: flex-start` behält den Namen links – `.knopf-leise` ist ein Flex-Element und
   würde seinen Inhalt sonst mittig setzen, sobald der Knopf die ganze Breite hat. Eine Liste von
   Namen liest man an einer Kante, nicht in der Mitte. */
.spieler-wahl .knopf-leise {
  width: 100%;
  justify-content: flex-start;
}

/* Der Ausnahmeweg steht UNTER der Schnellwahl und trägt denselben Abstand – volle Breite, damit er
   nicht wie ein angehängter Rest wirkt. */
.spieler-zufuegen { margin-top: 12px; }
/* ⚠️ EIGENES `[hidden]`: Bei vollem Flight wird der Bereich versteckt (25.08.2026). Die Regel
   darueber setzt zwar nur `margin`, doch die Projektregel gilt trotzdem – wer hier spaeter ein
   `display: flex` ergaenzt, haette den Bereich sonst dauerhaft sichtbar, ohne es zu merken. */
.spieler-zufuegen[hidden] { display: none; }

.spieler-zufuegen .knopf-leise {
  width: 100%;
  justify-content: flex-start;
}

.knopf-leise {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 44px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--jg-green);
  background: none;
  border: 1px solid var(--jg-line);
  border-radius: 10px;
  cursor: pointer;
}

.knopf-leise svg { width: 18px; height: 18px; }
/* „Konto anlegen“ ist ein LINK, kein Knopf – sieht aber gleich aus. Ein Link, der wie ein
   Knopf aussieht, braucht das hier, sonst steht er unterstrichen und in Linkfarbe daneben. */
a.knopf-leise { text-decoration: none; }

.knopf-haupt {
  min-height: 48px;
  padding: 12px 20px;
  font-family: inherit;
  font-size: 16px;
  color: #fff;
  background: var(--jg-green);
  border: 1px solid var(--jg-green);
  border-radius: 10px;
  cursor: pointer;
}

/* LÖSCHEN IST ROT, ABER ZURÜCKHALTEND: rote Schrift, KEINE rote Fläche (Ansage des Betreibers,
   09.08.2026, nach einem ersten Anlauf mit gefülltem Knopf – „viel zu prominent“).

   Der Punkt ist die Rangfolge: „Löschen“ soll erkennbar die gefährliche Aktion sein, aber nicht
   die auffälligste auf der Seite. Ein voll gefüllter roter Knopf zog jeden Blick auf sich und
   stand damit über „Ansehen“, obwohl das die Aktion des Alltags ist. Die Farbe trägt jetzt die
   Schrift, der Rahmen bleibt die neutrale Linie.

   Als ZUSATZ zu `.knopf-leise` gedacht (`class="knopf-leise knopf-gefahr"`), damit Größe, Polster
   und Radius dieselben bleiben. Beide sind einfache Klassen, also entscheidet die Reihenfolge in
   der Datei – diese Regel muss deshalb NACH `.knopf-leise` stehen. */
/* „ANSEHEN" IST GEFUELLT (Ansage des Betreibers, 15.08.2026): die Aktion des Alltags, und in der
   Historienzeile steht sie neben „Loeschen". Das verstaerkt genau die Rangfolge, die unten bei
   `.knopf-gefahr` beschrieben ist – der gefaehrliche Knopf bleibt zurueckhaltend, der haeufige
   traegt die Flaeche.

   Als ZUSATZ zu `.knopf-leise` gedacht (`class="knopf-leise knopf-voll"`), damit Groesse, Polster
   und Radius dieselben bleiben wie beim Nachbarknopf – `.knopf-haupt` waere 4 px hoeher und die
   beiden staenden ungleich nebeneinander. Muss deshalb NACH `.knopf-leise` stehen. */
.knopf-voll {
  color: #fff;
  background: var(--jg-green);
  border-color: var(--jg-green);
}

.knopf-gefahr {
  color: var(--jg-red);
  background: none;
  border-color: var(--jg-line);
  /* DEN ABSTAND VON konto.css ZURÜCKNEHMEN. Dort trägt `.knopf-gefahr` ein `margin-top: 4px` –
     sinnvoll für die gestapelten Knöpfe von „Mein Konto", hier verheerend: In einer Knopfreihe
     schiebt der Aussenabstand den roten Knopf 4 px nach unten UND macht ihn 4 px niedriger als
     seinen Nachbarn (die Streckung rechnet den Abstand mit). Beide Dateien liegen auf dieser
     Seite übereinander; runde.css kommt später und gewinnt. Gemessen, bevor es ausgerollt wurde. */
  margin-top: 0;
}

.knopf-schmal { flex: 0 0 auto; min-width: 52px; padding: 10px; }

/* -------------------------------------------------------------------------- Erfassung */

/* ── DIE LOCHLEISTE (02.10.2026, Ansage des Betreibers) ───────────────────────────────────────
   Ersetzt Lochkopf (Club, „Loch 3 von 18"), Bahnnummer im Kreis und die Knoepfe unter der
   Erfassung. Drei Zellen: vorige Bahn (weiss) | aktuelle Bahn (gruen) | naechste Bahn (weiss).

   ⚠️ GRID MIT DREI FESTEN SPALTEN, NICHT FLEX: Die Mitte muss auf jeder Bahn an derselben Stelle
   stehen – auch auf Bahn 1, wo links kein Knopf ist. Deshalb hat JEDES Teil seine Spalte fest
   zugewiesen (`grid-column` unten): Faellt der linke Knopf weg, bleibt Spalte 1 einfach leer.
   ⚠️ NICHT ueber `visibility: hidden` am Knopf versuchen – `konto.css` und `runde.css` setzen
   `[hidden] { display: none !important; }`, dagegen verliert jede eigene Regel (gemessen
   02.10.2026: der Knopf war weg, die gruene Mitte rutschte nach links).
   `minmax(0, …)`, damit keine Spalte auf die Breite ihres laengsten Wortes waechst (siehe die
   Begruendung an der Historienliste). Die Mitte etwas breiter: „Par 4, HCP 9 · D 5" muss dort
   auf einem 320-px-Geraet Platz finden. */
.loch-leiste {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
  margin-bottom: 12px;
}

/* ⚠️ WEISS, NICHT FLAECHENLOS: `.knopf-leise` hat `background: none` – ohne eigene Flaeche schiene
   der Seitengrund durch. Und `color` ausdruecklich, weil ein `<button>` die Textfarbe nicht erbt
   (iOS malt ihn sonst blau); `line-height` aus demselben Grund. */
.loch-leiste-knopf {
  width: 100%;
  min-width: 0;
  min-height: 56px;
  justify-content: center;
  text-align: center;
  font-size: 16px;
  line-height: 1.25;
  color: var(--jg-green);
  background: #fff;
}

#loch-zurueck { grid-column: 1; }
.loch-aktuell { grid-column: 2; }
#loch-weiter  { grid-column: 3; }

.loch-aktuell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 6px 8px;
  color: #fff;
  background: var(--jg-green);
  border-radius: 10px;
  text-align: center;
}

.loch-aktuell-nr {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
}

.loch-aktuell-info {
  font-size: 13px;
  line-height: 1.3;
}

/* Par und HCP brechen nur ZWISCHEN sich um, nie mitten in „HCP 15" – auf schmalen Geraeten
   (und mit „HCP 9 · D 5") reicht die Mitte nicht immer fuer eine Zeile. */
.loch-aktuell-info > span { white-space: nowrap; }

.karte-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--jg-line);
  border-top: 0;
}

/* Spielt der Flight mit Zusatzpunkten, steht der Name über der Bedienreihe: Vier Elemente
   nebeneinander (Name, Zähler, Punkte, „Greenie“) passen auf 375 px nicht – der Name bräche
   sonst buchstabenweise um. */
.karte-zeile.hat-extra .karte-name { flex: 1 1 100%; }

/* ── „− “ UND „+“ NEHMEN DEN FREIEN PLATZ (20.09.2026, Ansage des Betreibers) ──────────────
   Sie standen auf ihrer Mindestbreite von 44 px, während rechts daneben Luft blieb: Der Name
   hat in dieser Bauform seine eigene Zeile, die Bedienreihe darunter war halb leer. Ein
   Zählknopf, den man im Gehen mit dem Daumen trifft, ist der meistbenutzte der ganzen App.

   ⚠️ NUR „−“ UND „+“, NICHT DIE ZAHL: `.zaehler-wert` ist ebenfalls ein `button` (ein Tipp
   darauf öffnet den Zahlenblock). Sie soll bei ihren 52 px bleiben – eine mitwachsende Zahl
   rückt beim Zählen hin und her, und man zielt auf einen Knopf, der sich bewegt.

   ⚠️ EIN `flex: 1` AM ZÄHLER ALLEIN TUT NICHTS, und das ist gemessen: Die Reihe hat VIER
   Kinder (Name, Zähler, Punkte, Extra-Knopf). Auf 375 px blieben nach Zähler (145), Punkten
   (40) und Knopf (104) plus Abständen genau 2 px übrig – es gab schlicht nichts zu verteilen.
   Der Knopf bekommt deshalb seine eigene Zeile; erst dadurch entsteht der Platz, den der
   Zähler dann nimmt.

   Das frühere `margin-left: auto` am Extra-Knopf ist damit entfallen – es schob ihn nach
   rechts, solange freier Platz übrig war, und den nimmt jetzt der Zähler. */
.karte-zeile.hat-extra .extra-knopf { flex: 1 1 100%; }

/* ── DIE ERFASSUNGSREIHE GEHT ÜBER DIE VOLLE BREITE (20.09.2026, Ansage des Betreibers) ─────
   „das alles immer über die gleiche breite … so wie der ‚Extra-Punkt‘ jetzt ist." Der Zähler
   nimmt eine eigene Zeile und füllt sie; darunter liegt der Extra-Knopf, ebenso breit. Zwei
   Bedienflächen gleicher Breite untereinander – man zielt zweimal auf dieselbe Spur.

   ⚠️ DAS GILT AUCH OHNE ZUSATZPUNKTE (kein `.hat-extra` davor): Bei Stableford steht rechts
   die Punktzahl („1 P") und links der Name; der Zähler bekommt trotzdem seine eigene Zeile.
   Eine Regel nur für den Bestball-Fall hiesse, dass derselbe Knopf je Spielart anders aussieht
   und anderswo liegt – und die Spielart wechselt man nicht, um zu zählen. */
.karte-zeile .zaehler { flex: 1 1 100%; }

/* „−“ und „+“ teilen sich den Rest zu gleichen Teilen; die ZAHL bleibt fest, aber breiter als
   die 52 px von `.zaehler-wert`: Sie ist selbst ein Knopf (ein Tipp öffnet den Zahlenblock),
   und darauf muss man im Gehen treffen. Fest, weil eine mitwachsende Zahl beim Zählen hin und
   her rückt – man zielt sonst auf einen Knopf, der sich bewegt. */
.karte-zeile .zaehler button:not(.zaehler-wert) { flex: 1; }
.karte-zeile .zaehler .zaehler-wert { flex: 0 0 96px; }

/* ⚠️ ROT UND GRÜN NUR ALS ANDEUTUNG, NICHT ALS SIGNAL (Ansage des Betreibers: „leicht"). Die
   kräftigen Farben sind in diesem Produkt vergeben – Rot heisst „geschlossen“, Grün „geöffnet“
   (siehe Info-Balken und Statuskacheln). Hier geht es nur darum, die Richtung zu sehen, ohne
   auf das Zeichen zu schauen. Die SCHRIFT bleibt deshalb die normale Textfarbe; ein `button`
   erbt sie nicht von selbst, und iOS-Safari malt ihn sonst blau (Fallstrick, 27.08.2026). */
/* ── DER ZÄHLER FÜR ZUSATZPUNKTE (20.09.2026) ───────────────────────────────────────────────
   Eine eigene Zeile über die volle Breite – dieselbe Spur wie der Schlagzähler darüber –, aber
   mit SCHMALEREN Knöpfen (Ansage des Betreibers). Links die Beschriftung, rechts der Zähler:
   Die Schläge zählt man an jedem Loch, einen Extra-Punkt selten. Die Trefferfläche darf deshalb
   kleiner sein, und die 44 px Mindesthöhe bleiben ohnehin. */
.extra-zeile {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}

.extra-lab { flex: 1; min-width: 0; font-size: 14px; }

/* `flex: 0 0 auto` an der Gruppe: Sie soll NICHT mitwachsen wie der Schlagzähler – genau das
   ist der Unterschied, den der Betreiber wollte. Die Beschriftung links nimmt den Rest.

   ⚠️ JEDE DIESER DREI REGELN BRAUCHT DAS `.karte-zeile`-PRÄFIX, und das ist nachgerechnet,
   nicht gehofft: Der kleine Zähler trägt AUCH die Klasse `.zaehler`, und darüber stehen
   `.karte-zeile .zaehler` (0,2,0) sowie `.karte-zeile .zaehler button:not(.zaehler-wert)`
   (0,3,1). Ohne Präfix lägen die neuen Regeln bei (0,1,0) bzw. (0,1,1) und verlören – die
   Knöpfe wären wieder breit, lautlos. Dieselbe Falle wie bei der `:not()`-Kette. */
.karte-zeile .zaehler-klein { flex: 0 0 auto; }
.karte-zeile .zaehler-klein button:not(.zaehler-wert) { flex: 0 0 auto; min-width: 56px; }
.karte-zeile .zaehler-klein .extra-wert { flex: 0 0 40px; min-width: 40px; font-size: 20px; }

/* ── ZUSATZPUNKT UND SCHLÄGE IN EINER REIHE (02.10.2026, Ansage des Betreibers) ─────────────
   „links etwas kleiner die Extra-Punkte, rechts der Score." Vorher hatte der Zusatzpunkt eine
   eigene Zeile über die volle Breite – das hebt die Regel vom 20.09. („alles über die gleiche
   Breite") für diese eine Zeile ausdrücklich auf.

   Der Schlagzähler nimmt den Rest (`flex: 1 1 0`), seine Zahl schrumpft von 96 auf 56 px; der
   Zusatzpunkt bleibt auf seiner festen Breite. „−" und „+" behalten überall ihre 44 px
   Mindestmaß – auch auf 320 px gemessen.

   ⚠️ SPEZIFITÄT NACHGERECHNET: Der kleine Zähler trägt AUCH `.zaehler`. Die Regel für die
   Schlag-Zahl schließt ihn deshalb mit `:not(.zaehler-klein)` aus (0,5,0); ohne das träfe sie
   auch die Extra-Zahl. Die Regel für den kleinen Zähler steht NACH der für den großen – beide
   liegen bei (0,3,0), und die spätere gewinnt. */
.erfass-reihe {
  flex: 1 1 100%;
  display: flex;
  /* 18 statt 10 px: Sonst steht das gruene „+" des Zusatzpunkts direkt am roten „−" der
     Schlaege, und die zwei Gruppen lesen sich als eine. */
  gap: 10px 18px;
  align-items: center;
  min-width: 0;
  /* ⚠️ UMBRUCH STATT QUETSCHEN: Auf sehr schmalen Geraeten (gemessen 320 px) braucht der
     Schlagzaehler 152 px und haette nur 114 – er lief ueber. Dann rutscht er unter den
     Zusatzpunkt, und alle Knoepfe behalten ihr Mindestmass. Die Grenze liegt bei rund 340 px
     Fensterbreite; ab 360 px (verbreitete Android-Geraete) steht alles in einer Zeile. */
  flex-wrap: wrap;
}
/* ⚠️ KEIN `min-width: 0` am Schlagzaehler: Seine Mindestbreite ist sein Inhalt (min-content),
   und genau die loest den Umbruch aus, bevor ein Knopf unter 44 px faellt. */
.karte-zeile .erfass-reihe > .zaehler { flex: 1 1 0; }
.karte-zeile .erfass-reihe > .zaehler-klein { flex: 0 0 auto; }
.karte-zeile .erfass-reihe > .zaehler:not(.zaehler-klein) > .zaehler-wert { flex: 0 0 52px; min-width: 52px; }
/* Der Zusatzpunkt bewusst schmaler als 44 px – die Hoehe bleibt 44, getroffen wird er trotzdem,
   und er wird selten gebraucht. Die Breite geht an die Schlaege. */
.karte-zeile .erfass-reihe .zaehler-klein button:not(.zaehler-wert) { min-width: 38px; width: 38px; }

/* Zahl und Wort untereinander in der Mitte des kleinen Zählers. */
.karte-zeile .erfass-reihe .zaehler-klein .extra-wert {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  min-width: 34px;
  padding: 0;
}
.extra-neben-zahl { font-size: 18px; line-height: 1.1; }
.extra-neben-wort { font-size: 10px; line-height: 1.2; color: var(--jg-muted); font-weight: 400; }

/* Bei 0 gibt es nichts wegzunehmen. Ausgegraut und nicht versteckt: Ein Knopf, der beim
   Zählen verschwindet und wiederkommt, lässt die Zeile springen. */
.karte-zeile .zaehler-klein button:disabled {
  opacity: 0.4;
  cursor: default;
}

.zaehler .zaehler-minus {
  background: var(--jg-red-wash);
  border-color: var(--jg-red-hell);
}
.zaehler .zaehler-plus {
  background: var(--jg-green-wash);
  border-color: var(--jg-green-rand);
}

/* ── DER SCHLAGZÄHLER IN KRÄFTIGEM ROT UND GRÜN (02.10.2026, Versuch auf Ansage des Betreibers) ──
   „die plus und minus buttons beim score probieren wir mal mit kräftigerem hintergrund". Das
   hebt für den SCHLAGZÄHLER die Regel darüber auf („nur als Andeutung") – mit Absicht, und nur
   dort: Der Zusatzpunkt (`.zaehler-klein`) bleibt blass, damit die Schläge der lauteste Knopf
   der Zeile sind.

   `--jg-green` statt `--jg-green-light`: Weiß auf dem hellen Grün liegt nur bei rund 3:1, auf dem
   Markengrün bei 6,2:1 (siehe `tokens.css`). `color: #fff` ausdrücklich – ein `button` erbt die
   Textfarbe nicht (iOS malt ihn sonst blau). `:not(.zaehler-klein)` steht bei (0,4,0) und schlägt
   damit die Regeln oben (0,2,0). */
.karte-zeile .zaehler:not(.zaehler-klein) > .zaehler-minus {
  color: #fff;
  background: var(--jg-red);
  border-color: var(--jg-red);
}
.karte-zeile .zaehler:not(.zaehler-klein) > .zaehler-plus {
  color: #fff;
  background: var(--jg-green);
  border-color: var(--jg-green);
}

/* `flex: 1` ist Pflicht: Eine Flex-Spalte mit Umbruch ohne sie schrumpft auf Breite 0 und
   bricht buchstabenweise um. */
/* ── NAME UND LÄNGE IN EINER ZEILE (20.09.2026, Ansage des Betreibers) ───────────────────────
   „wir nehmen die meter-angabe in klammern rechts und rechtsbündig neben den namen, damit
   sparen wir uns eine zeile." Bei Bestball stand die Länge bis dahin als einzige Angabe in
   einer eigenen Zeile – eine ganze Zeile für drei Zeichen.

   Der Behälter ist jetzt ein Flex mit Umbruch: Name links, Länge rechts, und die Vorgabezeile
   darunter nimmt mit `flex-basis: 100%` die volle Breite. Ohne diesen Umbruch stünde sie in
   derselben Zeile und drängte die Länge aus dem Bild.

   ⚠️ `min-width: 0` AM NAMEN IST PFLICHT: Eine Flex-Spalte ohne sie schrumpft nicht und schiebt
   die Länge hinaus – ein langer Name bräche sonst nicht um, sondern überliefe (derselbe Fall
   wie in `Fallstricke.md`, „Flex-Spalte ohne flex: 1"). */
.karte-name {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}
.karte-name b { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; }

/* Rechtsbündig ans Ende der Namenszeile. */
.karte-meter { flex: 0 0 auto; font-size: 12px; color: var(--jg-muted); }

/* Die Vorgabezeile bekommt eine eigene Zeile unter Name und Länge. */
.karte-info { flex: 1 1 100%; font-size: 12px; color: var(--jg-muted); }

/* Zusatzpunkt-Knopf (Greenie …) in der Spielerzeile. Bewusst schmal und ruhig: Er ist die
   Ausnahme, nicht der Normalfall – gedrückt wird er auf höchstens einer Bahn von sechs. */
.extra-knopf {
  min-height: 44px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--jg-ink);
  background: #fff;
  border: 1px solid var(--jg-line);
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
}

.extra-knopf[aria-pressed="true"] {
  color: #fff;
  background: var(--jg-amber, #8a5f00);
  border-color: var(--jg-amber, #8a5f00);
}

/* Gesetzt, aber verfallen: Das Greenie zählt nur bei Par oder besser. Durchgestrichen und blass
   statt einfach aus – „aus“ hieße, es wäre nie gesetzt worden, und dann tippt es jemand erneut. */
.extra-knopf.verfallen[aria-pressed="true"] {
  color: var(--jg-muted);
  background: #f2f4f2;
  border-color: var(--jg-line);
  text-decoration: line-through;
}

/* ---- Der Punktestand nach jedem Loch ----
   Steht unter den Spielerzeilen und ist der Grund, warum das Telefon überhaupt mitkommt: Auf
   Papier rechnet unterwegs niemand zusammen. */
.stand {
  margin-top: 16px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--jg-line);
  border-radius: 12px;
}

.stand-kopf {
  font-size: 13px;
  font-weight: 600;
  color: var(--jg-muted);
  margin-bottom: 6px;
}

/* Der Zwischenstand am laufenden Loch (25.08.2026) – eine AUSKUNFT, keine Wertung. Deshalb
   dezent und ohne Punktzahl rechts: Wer sie sucht, findet sie in den Zeilen darueber. */
.stand-laeuft {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--jg-line);
}
.stand-laeuft b { display: block; font-size: 15px; font-weight: 600; color: var(--jg-ink); }
.stand-laeuft span { display: block; margin-top: 2px; font-size: 13px; color: var(--jg-muted); }

.stand-zeile {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-top: 1px solid var(--jg-line);
}

.stand-zeile:first-of-type { border-top: 0; }

/* DIE RANGLISTE DES BESTBALLS IST EINE TABELLE (15.08.2026) – Platz, Name, Punkte in eigenen
   Spalten, damit die Zahlen untereinander fluchten. Bewusst NICHT `.jg-tab`: Deren gruene
   Kopfzeile waere hier eine Ueberschrift ueber drei selbsterklaerenden Spalten.
   Die Trennlinien sitzen wie zuvor zwischen den Zeilen, nicht ueber der ersten. */
.stand-tabelle { width: 100%; border-collapse: collapse; }
/* `top` statt `middle`: Beim Aggregat traegt die Namenszelle eine zweite Zeile, und der Platz
   soll auf Hoehe des NAMENS stehen, nicht mittig zwischen beiden (Ansage des Betreibers). */
.stand-tabelle td { padding: 6px 0; border-top: 1px solid var(--jg-line); vertical-align: top; }
.stand-tabelle tr:first-child td { border-top: 0; }

/* Der Platz steht vorn, fett und auf der Grundlinie des Namens. `white-space: nowrap`, damit
   „1. Platz" nie umbricht. */
.stand-tabelle .stand-platz {
  width: 1%;
  padding-right: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--jg-muted);
  white-space: nowrap;
}

.stand-tabelle .stand-punkte { width: 1%; text-align: right; }

.stand-name { flex: 1; min-width: 0; }
.stand-name b { display: block; font-size: 15px; font-weight: 500; }
.stand-name span { display: block; font-size: 12px; color: var(--jg-muted); }
.stand-punkte { font-size: 17px; font-weight: 600; color: var(--jg-green); white-space: nowrap; }

/* Team-Zeile hervorgehoben, Spielerzeilen darunter kleiner: Gespielt wird um den Team-Stand. */
.stand-team .stand-name b { font-size: 16px; font-weight: 700; }
.stand-team .stand-punkte { font-size: 20px; }

.zaehler { display: flex; gap: 6px; align-items: center; }

.zaehler button {
  min-width: 44px;
  min-height: 44px;
  font-family: inherit;
  font-size: 20px;
  color: var(--jg-ink);
  background: #fff;
  border: 1px solid var(--jg-line);
  border-radius: 10px;
  cursor: pointer;
}

/* Die Zahl ist ein Knopf: Ein Tipp darauf oeffnet den Zahlenblock fuer die Direkteingabe. */
.zaehler-wert {
  min-width: 52px;
  min-height: 44px;
  padding: 0 6px;
  font-family: inherit;
  font-size: 24px;
  font-weight: 500;
  color: var(--jg-ink);
  text-align: center;
  background: none;
  border: 0;
  cursor: pointer;
}

.zaehler-wert.ist-strich { color: var(--jg-muted); }

.karte-punkte {
  min-width: 40px;
  font-size: 14px;
  color: var(--jg-green);
  text-align: right;
}

.aufheben-hinweis {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--jg-orange);
  background: #fdf6ef;
  border: 1px solid #f0dcc4;
  border-top: 0;
}


.spiel-fuss {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}

/* Die beiden Auswege bleiben BEISAMMEN. Einzeln in der Flex-Zeile rutschte „Runde beenden“ auf
   dem Handy allein in eine dritte Zeile, weit weg von seinem Nachbarn – zwei Knöpfe derselben
   Sorte gehören nebeneinander, sonst sucht man den zweiten.

   ⚠️ SIE TEILEN SICH DIE BREITE ZU GLEICHEN TEILEN (20.09.2026, Ansage des Betreibers). Vorher
   trugen beide nur ihre Textbreite und die Gruppe hing mit `margin-left: auto` rechts; „Runde
   abbrechen" war dadurch breiter als „Runde beenden", obwohl es die seltenere Handlung ist.
   `flex: 1 1 0` an beiden, und die Zeile darunter nimmt die volle Breite – kein `margin-left`
   mehr, sonst bliebe rechts ein Rest stehen.

   ⚠️ `flex-wrap` BLEIBT: Auf sehr schmalen Geräten (320 px) brechen die beiden lieber um, als
   dass ihre Beschriftung abgeschnitten wird. */
.spiel-fuss-knoepfe {
  /* ⚠️ KEINE FLEX-ZEILE MEHR (21.09.2026): „Fertig" nimmt die ganze Breite, „Runde
     abbrechen" steht darunter in Textbreite – zwei verschiedene Breiten, also zwei Zeilen.
     Die Begründung für die Aufteilung steht im Markup. Der „BEISAMMEN"-Grund von oben bleibt
     erfüllt: Sie sind weiter derselbe Block und können nicht auseinanderrutschen. */
  display: block;
  width: 100%;
}

/* „Fertig" – der erwartete Weg, deshalb über die ganze Breite. `justify-content`, weil
   `.knopf-leise` ein `inline-flex` ist: Ohne die Zeile stünde die Beschriftung links außen
   an einem sehr breiten Knopf statt in seiner Mitte. */
#runde-beenden {
  display: flex;
  width: 100%;
  justify-content: center;
}

/* „Runde abbrechen" darunter, mittig, in Textbreite – die Zurückhaltung, die für jeden
   gefährlichen Weg im Projekt gilt. `margin: auto` zentriert, weil der Knopf `inline-flex`
   ist und damit nur seine Textbreite trägt. */
.spiel-fuss-knoepfe .knopf-verwerfen {
  display: flex;
  margin: 8px auto 0;
}

/* „Runde abbrechen" verwirft die Runde – rote SCHRIFT, keine rote Fläche (Ansage des
   Betreibers; dieselbe Regel wie beim Löschen-Knopf im ganzen Projekt). Eine rote Fläche
   machte den Ausweg zum auffälligsten Knopf der Seite, und das ist er nicht.
   Die Farbe ausdrücklich, nicht geerbt: Ein `button` erbt keine Textfarbe, und iOS-Safari
   malt ihn sonst blau. */
.spiel-fuss-knoepfe .knopf-verwerfen { color: var(--jg-red); }

.gesichert {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  color: var(--jg-muted);
}

.gesichert svg { width: 15px; height: 15px; }

/* -------------------------------------------------------------------------- Auswertung */

.erg-karte {
  margin-bottom: 12px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--jg-line);
  border-radius: 12px;
}

.erg-kopf {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}

.erg-kopf b { font-size: 17px; font-weight: 500; }
.erg-kopf span { font-size: 13px; color: var(--jg-muted); }

.erg-zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
}

.erg-zahl {
  padding: 10px;
  background: var(--jg-green-faint, #edf7f1);
  border-radius: 10px;
}

.erg-zahl b { display: block; font-size: 22px; font-weight: 500; color: var(--jg-ink); }
.erg-zahl span { display: block; font-size: 12px; color: var(--jg-muted); }

/* Die Runde MIT dem Strich-Ersatzwert (Par + Vorgabe + 2), in Klammern hinter der tatsaechlichen Zahl.
   Der Selektor ist absichtlich spezifischer als `.erg-zahl span` – sonst gewaenne die Regel
   darueber und setzte die Klammer als eigene graue Zeile unter die Zahl. */
.erg-zahl b .mit-strich {
  display: inline;
  font-size: inherit;
  color: var(--jg-orange);
}

/* Waagerecht scrollbar statt gequetscht: 18 Spalten passen auf kein Handy. */
.karte-tabelle-huelle { overflow-x: auto; margin-top: 12px; }

/* ZWEI NEUNER UNTEREINANDER. Der zweite Block braucht Abstand, sonst sieht die Karte aus wie
   eine einzige Tabelle mit einem versprungenen Kopf. `overflow-x` bleibt als Notnagel für sehr
   schmale Geraete stehen – gebraucht wird es seit dem Neuner-Schnitt normalerweise nicht. */
.karte-tabelle-huelle .karte-tabelle + .karte-tabelle {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--jg-line);
}

/* Grundform: `.jg-tab` in kopfmenue.css. Hier nur das Eigene dieser Karte – sie hat bis zu
   19 Spalten und muss deshalb enger und kleiner sein als eine gewöhnliche Tabelle. */
.karte-tabelle { font-size: 13px; }

/* NICHT AUF VOLLE BREITE ZIEHEN, SOLANGE ZWEI BLÖCKE UNTEREINANDER STEHEN. Seit dem
   Neuner-Schnitt hat der zweite Block oft weniger Spalten als der erste (eine Runde bis Loch 12
   ergibt 9 und 3). Gestreckt bekäme er dann viel breitere Spalten als der erste, und die zwei
   Blöcke sähen aus wie zwei verschiedene Tabellen. Mit `width: auto` bleiben die Spalten
   gleich breit. */
.karte-tabelle { width: auto; }

/* STEHT ABER NUR EIN BLOCK DA (Neuner-Runde), GILT DAS GEGENTEIL: Dann gibt es nichts, womit
   die Spalten fluchten müssten – und eine Tabelle, die bei neun Löchern nur 46 % der Karte
   nutzt (gemessen, 400-px-Gerät), lässt die halbe Karte leer stehen. Ansage des Betreibers
   vom 16.08.2026 mit Bildschirmfoto.

   `:only-child` ist hier die ganze Bedingung, und deshalb steht sie in CSS statt in einer
   Klasse aus `runde.js`: Der Bauer legt je Neuner-Block eine Tabelle an; ob es einer oder zwei
   sind, weiß das DOM selbst. Eine mitgeführte Klasse wäre eine zweite Wahrheit, die beim
   nächsten Umbau danebenliegt.

   Die Beschriftungsspalte wächst NICHT mit (`width: 1%` – das Muster von `.wahl-tab`): Sonst
   bekäme ausgerechnet „Netto-PAR" den meisten neuen Platz, und die Lochspalten blieben schmal.
   Bei der Punktetafel gilt dasselbe für die Summenspalte rechts.

   DIE PUNKTETAFEL WIRD NICHT IN NEUNER GESCHNITTEN, sie trägt alle Löcher in EINER Tabelle und
   ist damit auch bei 18 Löchern `:only-child`. Gemessen (400-px-Gerät, 19 Spalten): vorher 94 %
   der Hülle, jetzt 100 % – die Regel streckt sie also um jene 28 px, und das ist genau das
   Gewollte. Ist ihr Inhalt einmal breiter als die Hülle (viele Spieler, sehr schmales Gerät),
   bleibt `width: 100 %` wirkungslos, weil die Mindestbreite des Inhalts gewinnt; dann scrollt
   sie seitlich wie bisher, und die klebende Summenspalte trägt weiter. */
/* VOLLE BREITE (17.08.2026). Zwei Wege dorthin, und beide sind nötig:
   - `:only-child` – ein einziger Block, wie bisher.
   - `.karte-tabelle-voll` – MEHRERE Blöcke mit GLEICH VIELEN Spalten, gesetzt von
     `streckeWennGleich()` im JS nach dem Befüllen.

   Warum das zweite dazukam: Bei 18 Löchern stehen zwei Neuner untereinander, und die nutzten nur
   die halbe Breite – während Punkte-Tafel und Stableford-Tabelle darüber und darunter sich
   strecken. Dieselbe Sache sah aus wie zwei verschiedene Bauteile (Ansage des Betreibers).

   DIE ALTE VORSICHT BLEIBT GÜLTIG, nur genauer gefasst: Eine Runde bis Loch 12 ergibt 9 + 3, und
   ein gestreckter Dreier bekäme dreimal so breite Spalten wie der Neuner darüber. Genau dieser
   Fall bekommt die Klasse NICHT – die Spaltenzahlen unterscheiden sich. */
.karte-tabelle-huelle > .karte-tabelle:only-child,
.karte-tabelle-huelle.karte-tabelle-voll > .karte-tabelle { width: 100%; }

/* Name- und Summenspalte so schmal wie ihr Inhalt – der gewonnene Platz gehört den Löchern.
   Die Summenspalte gibt es in dieser Tabelle nicht (sie gehört zur `.punkte-tafel`); der
   Selektor bleibt der Vollständigkeit halber stehen.

   ⚠️ DIE NAMENSSPALTE STEHT SEIT DEM 20.09.2026 NICHT MEHR AUF `width: 1%`, und der Grund ist
   ein Fallstrick, der im Projekt schon einmal Zeit gekostet hat: `width: 1%` heisst „so schmal
   wie der Inhalt" NUR bei `table-layout: auto`. Seit die Karte auf `fixed` steht, ist es
   wörtlich ein Prozent – gemessen: 3 px statt 78, die Beschriftungen waren nicht mehr zu lesen.
   Dieselbe Falle steht in `Fallstricke.md` („`width: 1%` ist ein Tabellentrick"). */
.karte-tabelle-huelle > .karte-tabelle:only-child > * > tr > .spalte-summe,
.karte-tabelle-huelle.karte-tabelle-voll > .karte-tabelle > * > tr > .spalte-summe { width: 1%; }

.karte-tabelle-huelle > .karte-tabelle:only-child > * > tr > .spalte-name,
.karte-tabelle-huelle.karte-tabelle-voll > .karte-tabelle > * > tr > .spalte-name { width: 78px; }

/* `thead th` und nicht nur `th`: Sonst gewinnt `.jg-tab thead th` mit seinem grosszuegigen
   Polster (8/12 statt 5/7), und bei bis zu 19 Spalten wird die Karte dadurch deutlich breiter,
   als sie sein muss. Gemessen, bevor es live ging. */
.karte-tabelle thead th,
.karte-tabelle td { padding: 5px 7px; white-space: nowrap; }

.karte-tabelle .spalte-name { text-align: left; }

/* ── GLEICHE SPALTENBREITEN IN ALLEN BLÖCKEN UND ALLEN KARTEN (20.09.2026) ───────────────────
   Befund des Betreibers am Bild: „Die Spalten sind verschieden breit (z. B. wenn Zusatzpunkt
   fehlt)." Genau das war es – mit `table-layout: auto` richtet sich die Namensspalte nach dem
   längsten Wort ihrer eigenen Tabelle. Gemessen: 78 px bei einer Karte mit Zusatzpunkt-Zeile,
   deutlich weniger bei einer ohne. Zwei Karten untereinander standen dadurch versetzt.

   `table-layout: fixed` plus eine feste Breite macht sie unabhängig vom Inhalt – dieselbe
   Zahl für jede Tabelle, jeden Block und jeden Spieler.

   ⚠️ 78 px IST DIE GEMESSENE BREITE VON „Zusatzpunkt", nicht geschätzt. Weniger, und das Wort
   bräche in zwei Zeilen um; die Zeile würde höher, und das kostet mehr als die Spalte spart. */
.karte-tabelle { table-layout: fixed; }
.karte-tabelle .spalte-name { width: 78px; }

/* ── DIE OUT/IN-ZEILE UNTER JEDEM BLOCK (20.09.2026) ─────────────────────────────────────────
   Sie steht bewusst als eigene Zeile und nicht als zehnte Spalte – die Karte hat auf dem
   Telefon keine Breite dafür übrig (Begründung und Messwerte an `summenFuss()` in runde.js).

   Abgesetzt durch eine Linie nach oben, damit sie als Abschluss des Blocks gelesen wird und
   nicht als weitere Datenzeile. */
.karte-tabelle tfoot td {
  padding: 7px;
  border-top: 1px solid var(--jg-line);
  background: none;
  white-space: normal;
}

.karte-tabelle tfoot .summe-marke {
  text-align: left;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.karte-tabelle tfoot .summe-werte {
  text-align: left;
  color: var(--jg-muted);
}

/* Die Summe MIT den Strich-Ersatzwerten (04.10.2026) – orange wie die Klammern in den Zellen
   darueber und wie in der grossen Box (`.erg-zahl b .mit-strich`). */
.karte-tabelle tfoot .summe-werte .mit-strich {
  color: var(--jg-orange);
}

/* AUFGEHOBENES LOCH: der Ersatzwert in orangen Klammern mit dickem Unterstrich, statt eines
   Gedankenstrichs (Ansage des Betreibers, 15.08.2026). Dieselbe Farbe wie die Klammer hinter der
   Gesamtzahl – beide bedeuten dasselbe: „hier steht ein gerechneter Wert, kein gespielter".

   SIE SITZT IN DERSELBEN BOX WIE JEDES ERGEBNIS (`.marke`) und erbt daraus die Hoehe. Nur so
   endet der Unterstrich exakt auf der Hoehe der Markenunterkanten daneben – mit einer eigenen
   Zelle liesse sich das nur ueber eine Zahl nachstellen, die beim naechsten Groessenwechsel
   auseinanderliefe.

   `width: auto` statt der festen 28 px: Vier Zeichen wie „(11)" passen sonst nicht. Die
   `min-width` haelt die Spalte trotzdem auf Markenbreite, damit das Raster nicht knickt. */
/* Gemeinsam in beiden Tabellen: Farbe und der dicke Unterstrich. `box-shadow` statt
   `border-bottom`, weil die Marke `box-sizing: border-box` traegt – ein Rahmen fraesse dort von
   der Hoehe, und die Zahl saesse 3 px hoeher als ihre Nachbarn. */
.karte-tabelle .strich-wert {
  color: var(--jg-orange);
  white-space: nowrap;
  box-shadow: inset 0 -3px 0 0 var(--jg-orange);
}

/* IN DER SCHLAGKARTE die normale Marken-Box: Nur so endet der Unterstrich exakt auf der Hoehe
   der Markenunterkanten daneben (gemessen: beide 160 px). `width: auto` statt der festen 28 px,
   weil vier Zeichen wie „(11)" sonst nicht hineinpassen; die `min-width` haelt die Spalte
   trotzdem auf Markenbreite, damit das Raster nicht knickt. */
.karte-tabelle .marke.strich-wert {
  width: auto;
  min-width: 28px;
  padding: 0 2px;
  border-radius: 0;
}

/* IN „ALS STABLEFORD GERECHNET" GIBT ES KEINE MARKEN – dort nur ein schmales Polster. Mit der
   28-px-Box der Schlagkarte wurde diese eine Zeile gemessene 38 px hoch gegen 26 der anderen
   und stach heraus. Hier gibt es keine Markenunterkante, mit der etwas fluchten muesste. */
.karte-tabelle td > .strich-wert:not(.marke) {
  display: inline-block;
  padding: 0 3px 2px;
}

/* Die gespielten Schlaege sind die einzige Zeile mit echten Ereignissen – alles darueber ist
   Vorgabe, alles darunter Ableitung. Deshalb fett (Ansage des Betreibers, 15.08.2026). */
.karte-tabelle tr.zeile-gespielt td { font-weight: 700; color: var(--text); }

/* PUNKTETAFEL je Loch (15.08.2026): eine Zeile je Mitspieler, eine Spalte je Loch. Sie steht
   in der Punkte-Karte unter den Endstaenden und ersetzt die gruene Gewinn-Flaeche.

   TRENNLINIE OBERHALB (Ansage des Betreibers): Darueber stehen die Endstaende als Textzeilen,
   darunter beginnt eine Tabelle – ohne Strich las sich die Kopfzeile der Tabelle wie ein
   weiterer Eintrag der Liste. */
.punkte-tafel {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--jg-line);
}

/* Ein Loch MIT Punkt tritt hervor – aber als Zahl, nicht als Flaeche: Die Tafel steht allein,
   hier gibt es keine zweite Bedeutung, mit der sie sich beissen koennte. */
.punkte-tafel td.hat-punkt { font-weight: 700; color: var(--jg-green); }

/* ⚠️ DIESE REGELN SIND SEIT DEM 20.09.2026 OHNE WIRKUNG – die Punktetafel hat keine
   `.spalte-summe` mehr. Sie steht in Neuner-Bloecken und scrollt deshalb nicht mehr; die
   Blocksumme traegt die OUT/IN-Zeile, die Gesamtzahl die Rangliste darueber.

   ⚠️ UND DAS KLEBEN WAR DER FEHLER, DER LOCH 1 VERSCHLUCKT HAT: Die Beschriftungsspalte links
   klebte ueber der ersten Lochspalte, die Kopfzeile begann sichtbar bei „2". Gemeldet vom
   Betreiber am Bild, mit dem Gegenbeleg aus derselben Runde („auf loch 1 stehen schlaege").

   Die Regeln bleiben stehen, weil `.punkte-tafel` dieselbe Huelle wie die Scorekarte benutzt
   und eine kuenftige Tabelle wieder eine Summenspalte haben koennte. Wer sie braucht, findet
   hier die gemessene Erfahrung: Eine klebende Spalte verdeckt die erste Datenspalte.

   Der alte Grund, unveraendert: Sie ist das Ergebnis der Zeile und keine weitere Bahn; der
   Hintergrund ist Pflicht, sonst scrollen die Lochspalten sichtbar darunter durch. */
.punkte-tafel .spalte-summe {
  position: sticky;
  right: 0;
  z-index: 1;
  padding-left: 10px;
  background: var(--jg-card, #fff);
  border-left: 1px solid var(--jg-line);
  font-weight: 700;
  color: var(--jg-green);
}

.punkte-tafel thead .spalte-summe {
  color: #fff;
  background: var(--jg-green);
  border-left-color: rgba(255, 255, 255, .35);
}

/* KLEBENDE SPALTEN MUESSEN DAS ZEBRA MITTRAGEN. Sie brauchen einen eigenen Hintergrund, damit
   die Lochspalten nicht sichtbar darunter durchscrollen – ein FESTER Hintergrund setzt aber in
   jeder zweiten Zeile einen weissen Block in eine getoente Zeile. Vom Betreiber an der neuen
   P-Spalte gemeldet (15.08.2026); die Beschriftungsspalte links hatte denselben Fehler von
   Anfang an. Beide ziehen jetzt die Zeilenfarbe nach. */
.karte-tabelle tbody tr:nth-child(even) .spalte-name,
.punkte-tafel tbody tr:nth-child(even) .spalte-summe {
  background: var(--jg-green-faint, #f6f9f7);
}

/* WER DAS SEHEN DARF – die Auswahlliste je Runde (15.08.2026). Vorher stand hier ein kleiner
   Knopf, der bei jedem Klick zur naechsten Stufe sprang; der Betreiber nannte ihn verwirrend.

   Abgesetzt, aber leise: Es ist eine Angabe zur Runde, keine Aktion der Zeile – die Knoepfe
   darunter sollen die auffaelligsten Elemente bleiben. */
.sicht-wahl {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--jg-line);
}

/* ⚠️ DIESE REGELN STAMMTEN AUS DER ZEIT VOR DEM FLEX-KOPF (25.08.2026, Befund des Betreibers:
   „hier bitte beim Layout nachbessern"). `display: block` und ein `margin-bottom` gehoeren zu
   einer Ueberschrift, UNTER der etwas steht – im Flex-Kopf schoben sie Titel und Wert
   gegeneinander, und beide klebten links zusammen, waehrend rechts Platz frei blieb.

   Dieselbe Bauform wie der Anmelde-Aufklapper (`.anm-kopf-*`): Der Titel nimmt den Platz, der
   Stand wird per `margin-left: auto` nach rechts gedrueckt, der Pfeil steht ganz aussen. */
.sicht-titel {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--jg-ink);
}

/* 44 px Tippziel je Zeile – auf der Bahn mit Handschuh ist ein 16-px-Radio zu wenig. Die Zeile
   ist ein `<label>`, also trifft auch der Text. */
.sicht-zeile {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  font-size: 14px;
  color: var(--jg-muted);
  cursor: pointer;
}

.sicht-zeile input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--jg-green);
  cursor: pointer;
}

/* Die gewaehlte Stufe traegt die Aussage – sie soll aus dem Augenwinkel erkennbar sein. */
/* WER ES TATSAECHLICH SIEHT – das Ergebnis unter der Absicht. Abgesetzt und leise: eine
   Rueckmeldung, keine Bedienung. */
.sicht-stand {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--jg-muted);
}

.sicht-zeile:has(input:checked) { color: var(--jg-ink); font-weight: 600; }
.sicht-zeile input:disabled { cursor: default; }
.sicht-zeile:has(input:disabled) { opacity: .5; cursor: default; }

/* Antippbare Zelle im Korrekturmodus. Gestrichelter Rahmen statt Knopf-Optik: Die Karte soll
   noch wie eine Scorekarte aussehen, aber erkennbar sein, dass hier etwas geht. */
.karte-tabelle td.tippbar {
  cursor: pointer;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--jg-green);
  background: var(--jg-green-tint);
}
.karte-tabelle td.tippbar:hover,
.karte-tabelle td.tippbar:focus-visible { background: var(--jg-green-wash, #e3f0e8); outline: none; }

/* KNOPFGRUPPEN – bis 1.4.32 war `.aktionen` überhaupt nicht definiert. Die Knöpfe flossen
   einfach nebeneinander und brachen um, wo gerade Platz war: „Zurück zur Übersicht" und
   „Schläge korrigieren" in einer Zeile, „Diese Runde löschen" allein darunter (Befund des
   Betreibers, 09.08.2026 – zweimal gemeldet, siehe unten). */
.aktionen,
.ms-aktionen {
  display: flex;
  /* IMMER UNTEREINANDER ÜBER DIE VOLLE BREITE – ohne Media Query, und das ist der Kern der
     Korrektur vom 09.08.2026 (zweiter Anlauf).

     Der erste Anlauf schaltete bei `max-width: 700px` auf Spalte um. Das misst das FENSTER,
     der begrenzende Faktor ist hier aber die SPALTE: `.wrap` ist `--jg-w-form` = 600 px, minus
     2×18 px Polster bleiben **564 px – bei jeder Fenstergröße**. Am Rechner griff die Query
     folglich nie, die drei Knöpfe der Auswertung passten trotzdem nicht nebeneinander und
     brachen 2+1 um: genau der Befund, den die Query beheben sollte.

     Für diese Spalte gibt es keinen breiten Fall. Eine Bedingung, die nie zutrifft, wenn man sie
     braucht, ist schlechter als keine. */
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: 18px;
}

.aktionen > *,
.ms-aktionen > * { width: 100%; justify-content: center; }

/* Die Teilen-Knöpfe tragen Symbol und Text: linksbündig sind sie untereinander leichter zu
   erfassen als vier zentrierte Beschriftungen unterschiedlicher Länge. `.teilen-reihe` trägt
   zusätzlich `.aktionen`, steht also ebenfalls untereinander – vorher rutschte die Reihe am
   Rechner in zwei mal zwei, was nur zufällig ordentlich aussah (die Beschriftungen sind gerade
   ähnlich lang). */
.teilen-reihe > .knopf-leise { justify-content: flex-start; }

/* DIE KNÖPFE STEHEN ÜBER DIE VOLLE BREITE, BEI ZWEIEN JEDER ZUR HÄLFTE (Ansage des Betreibers,
   09.08.2026). Das erledigt `flex: 1 1 0` ohne jede Breitenrechnung und ohne Media Query: Bei
   zwei Knöpfen ergibt es 50/50, bei einem die volle Breite. `flex-basis: 0` ist dabei der Kern –
   mit `auto` teilten sie sich den Platz nach Textlänge, „Ansehen“ bliebe also schmaler als
   „Löschen“. */
/* RUNDEN VON FREUNDEN – eigene Klassen, obwohl die Zeile wie die Historie aussieht (Phase 13,
   16.08.2026). Die Optik ist absichtlich dieselbe; geteilt wird sie trotzdem nicht, denn die
   Aktionsreihe unterscheidet sich im Kern: In der Historie teilen sich „Ansehen“ und „Löschen“
   die Zeile, hier gibt es nur „Ansehen“ – eine fremde Runde löscht man nicht. Mit `.historie-*`
   bekäme der einzelne Knopf über `flex: 1 1 0` die volle Breite und stünde da wie eine
   Hauptaktion. Wer hier vereinheitlichen will, ändert zwei Bedeutungen mit einer Regel. */
.fr-von {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--jg-text);
}

/* Der Knopf nimmt seine Textbreite, nicht die Zeile: Es ist die einzige Aktion, und eine
   volle Breite verspräche mehr, als dahinter steckt (Ansehen, nicht Bearbeiten). */
/* Wo liegt die Runde? „nur auf diesem Gerät“ ist kein Fehler, aber ein Zustand, den man sehen
   soll – sonst merkt niemand, was beim Löschen der Browserdaten verloren ginge.
   Das Gegenstück „in deinem Konto“ ist am 09.08.2026 entfallen: Es stand an fast jeder Zeile und
   sagte nichts, was der Nutzer nicht ohnehin erwartet – der Normalfall braucht keine Marke. */
.offen-marke {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  color: var(--jg-orange);
  background: #fdf6ef;
  border-radius: 999px;
}

/* ---- Ergebnis teilen ----
   Die Knöpfe tragen ihr Symbol als inline-SVG: Den Icon-Font lädt nur das Backend, im Frontend
   bliebe ein `<i class="ti …">` ein leeres Element (Fallstrick aus CLAUDE.md). */
.teilen-reihe { flex-wrap: wrap; }
.teilen-reihe .knopf-leise { gap: 8px; }
.teilen-reihe svg { width: 20px; height: 20px; flex: none; }

/* ---- Das Ergebnisbild in voller Größe ----
   `100dvh` statt `100vh`: Sonst liegt die Safari-Leiste über der Knopfzeile (Fallstrick aus
   CLAUDE.md). Die Fläche scrollt, weil eine Vierer-Karte über 18 Löcher hoch wird. */
.bild-huelle {
  position: fixed;
  inset: 0;
  z-index: 70;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: rgba(20, 34, 28, .92);
}

.bild-leiste {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  color: #e7efe9;
  font-size: 14px;
}

.bild-leiste .knopf-leise { background: #fff; }

/* Zentriert, damit ein eingepasstes Bild nicht links klebt. `min-height: 0` haelt die Flaeche
   im Flex-Elternteil schrumpfbar – ohne sie wuechse sie ueber den Bildschirm hinaus. */
.bild-flaeche {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0 12px 16px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* DAS BILD PASST SICH DER HOEHE AN, nicht nur der Breite: Die Ergebniskarte ist hoch (bei drei
   Spielern ueber 1100 px). Nur mit `max-width` stand am Rechner die halbe Karte unter dem
   Fensterrand, und der Betrachter sah zuerst leere Flaeche statt Ergebnis.
   `height: auto` + `object-fit: contain` halten dabei das Seitenverhaeltnis. */
.bild-flaeche img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(720px, 100%);
  max-height: 100%;
  object-fit: contain;
  margin: 0 auto;
  border-radius: 8px;
}

/* ------------------------------------------------------------------------ Zahlenblock */

.block-huelle {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* `100dvh` statt `100vh`: `100vh` meint den GROSSEN Viewport, dann liegt die Safari-Leiste
     ueber dem untersten Knopf – und das ist hier ausgerechnet „Übernehmen“. */
  height: 100dvh;
  background: rgba(21, 33, 28, .45);
}

.block {
  width: 100%;
  max-width: 420px;
  padding: 14px;
  background: #fff;
  border-radius: 16px 16px 0 0;
}

@media (min-width: 520px) {
  .block-huelle { align-items: center; }
  .block { border-radius: 16px; }
}

/* ── DIE RUECKFRAGE STEHT SEIT DEM 21.09.2026 IN `frage.css` ──────────────────────
   Hier standen `.frage-text`, `.frage-wahl` und `.frage-weg`. Der Dialog gilt jetzt
   projektweit (`webapp/frage.css`, im Frontend als Symlink) und bringt seine Optik selbst
   mit – mit EIGENEN Klassen (`jg-frage-*`).

   ⚠️ WARUM NICHT EINFACH DIESE REGELN MITBENUTZEN: Sie stehen in `runde.css`, und die laedt
   nur `runde.html`. Auf `konto.html` und `turniere.html` waere jede davon Browser-Standard
   statt Stil gewesen – der Dialog ein weisser Kasten mit Systemknoepfen. Dasselbe gilt fuer
   `.knopf-haupt` / `.knopf-leise`, die ebenfalls nur hier stehen; `frage.css` trägt deren
   Werte deshalb noch einmal, 1:1 uebernommen.

   ⚠️ `.block-huelle`, `.block` UND DIE UEBRIGEN `.block-*` BLEIBEN OBEN STEHEN: Sie
   gehoeren dem Zahlenblock, der sie weiter benutzt. Wer sie fuer tot haelt und aufraeumt,
   nimmt der Erfassung ihr Eingabefeld. */

.block-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: var(--jg-muted);
}

.block-schliessen {
  min-width: 44px;
  min-height: 44px;
  color: var(--jg-muted);
  background: none;
  border: 0;
  cursor: pointer;
}

.block-schliessen svg { width: 20px; height: 20px; }

.block-anzeige { padding: 10px 0 14px; text-align: center; }
.block-zahl { display: block; font-size: 44px; font-weight: 500; line-height: 1; color: var(--jg-ink); }
.block-unter { display: block; margin-top: 4px; font-size: 13px; color: var(--jg-muted); }

.block-tasten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.block-tasten button {
  min-height: 52px;
  font-family: inherit;
  font-size: 20px;
  color: var(--jg-ink);
  background: #fff;
  border: 1px solid var(--jg-line);
  border-radius: 10px;
  cursor: pointer;
}

.block-tasten button.klein { font-size: 15px; }
.block-tasten button svg { width: 20px; height: 20px; }

.block-fuss { margin-top: 10px; }
.block-fuss .knopf-haupt { width: 100%; }
/* „Loch … für alle entfernen“ (nur beim Korrigieren) – unter „Speichern“, volle Breite, rot wie
   jedes Löschen, aber ohne Fläche. `hidden` muss gegen das `display: inline-flex` gewinnen. */
.block-fuss .knopf-gefahr { width: 100%; justify-content: center; margin-top: 8px; }
.block-fuss .knopf-gefahr[hidden] { display: none; }

.block-warnung { margin-top: 8px; font-size: 13px; color: var(--jg-orange); text-align: center; }

/* SUMMEN UNTER DER KARTE, NICHT ALS 19. SPALTE. Die Karte scrollt auf dem Telefon seitlich;
   eine Summenspalte am rechten Ende wäre ausgerechnet die Zahl, die man suchen muss.
   Links die Summen, rechts Spielvorgabe und GBE – bei zu wenig Platz bricht die rechte Gruppe
   über `flex-wrap` um, nicht über eine Media Query: Begrenzend ist die Spalte, nicht das
   Fenster (dieselbe Lehre wie bei den Knopfgruppen). */
.karte-summen {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--jg-muted, #5b6b60);
}

.summen-links { font-weight: 600; color: var(--text); }
.summen-rechts { margin-left: auto; }

/* Zwei Zeilen: oben die Summen und das gespielte Handicap, darunter Spielvorgabe und GBE.
   Die zweite Zeile traegt kein eigenes `margin-top` – der Abstand kommt aus `.karte-summen`,
   sonst stuenden dort 16 statt 8 px. */
.summen-block .karte-summen + .karte-summen { margin-top: 2px; }
.summen-unten { color: var(--jg-muted, #5b6b60); }

/* DIE BESCHRIFTUNGSSPALTE KLEBT LINKS. Mit bis zu sechs Zeilen und 19 Spalten scrollt man
   seitlich und weiß nach drei Bahnen nicht mehr, ob man Brutto oder Netto liest.
   Der Hintergrund ist Pflicht: Ohne ihn scrollen die Zahlen sichtbar darunter durch. */
.karte-tabelle .spalte-name {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--jg-card, #fff);
}

.karte-tabelle thead th.spalte-name { z-index: 2; }

/* Der Aufklapper „Als Stableford gerechnet" in einer Bestball-Karte. Gleiche Bauform wie
   `.aufklapp` in konto.css – hier aber je Spieler und unabhängig, deshalb eigene Klasse. */
.erg-aufklapp {
  margin-top: 12px;
  border-top: 1px solid var(--jg-line);
  padding-top: 4px;
}

.erg-aufklapp .aufklapp-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 0;
  background: none;
  border: 0;
  font: inherit;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

/* Auch hier der grüne Ring (17.08.2026) – diese Regel überschrieb die gemeinsame aus `konto.css`
   und hätte die Aufklapper der Auswertung („Als Stableford gerechnet", „Als Privatrunde (RPR)
   gerechnet") als einzige grau gelassen. Genau die Sorte Abweichung, die man erst im
   Bildschirmfoto sieht: Die neue Regel greift überall – nur nicht dort, wo eine ältere
   spezifischer ist. */
/* Dieselbe gefüllte Form wie in `konto.css` (17.08.2026) – ein Aufklapper muss überall gleich
   aussehen, sonst hält man ihn für zweierlei. */
/* DAS GEWICHT STEHT HIER AUSDRUECKLICH, statt es von aussen zu erben.
   Der Titel ist ein <b>, kaeme also mit 700 - angezeigt wurden aber 500, weil
   `.runden-tab > tbody > tr > td b` aus der Historientabelle daraufliegt: Die Auswertung steht in
   einer Zeile INNERHALB dieser Tabelle und erbt deren Regel mit hoeherer Spezifitaet. Sichtbar
   war das nie ein Fehler, aber das Aussehen hing an einer fremden Regel; wer die begrenzt, macht
   diesen Titel unversehens fetter. Am 22.08.2026 gemessen (Klon ausserhalb der Tabelle: 700,
   darin 500). Dasselbe gilt fuer `.rpr-zeile b` weiter oben. */
.erg-aufklapp > .aufklapp-kopf > b { font-weight: 500; }

.erg-aufklapp > .aufklapp-kopf > .aufklapp-pfeil {
  display: flex; border: 2px solid var(--jg-green-light); color: var(--jg-green);
  background: var(--jg-green-tint);
}
.erg-aufklapp > .aufklapp-kopf > .aufklapp-pfeil svg { width: 20px; height: 20px; }

/* Offen: gefüllt statt nur umrandet – der Zustand ist damit auch ohne den Pfeilwinkel ablesbar. */
.erg-aufklapp.offen > .aufklapp-kopf > .aufklapp-pfeil {
  transform: rotate(180deg);
  background: var(--jg-green);
  color: #fff;
}

/* ================================================================================
   SCORE-NOTATION UND GEWINNMARKE IN DER SCHLÄGE-ZEILE
   ================================================================================
   FORM = ERGEBNIS GEGEN PAR, F/* ================================================================================
   SCORE-NOTATION UND GEWINNMARKE IN DER SCHLÄGE-ZEILE
   ================================================================================
   FORM = ERGEBNIS GEGEN PAR, FLÄCHE = GEWONNENES LOCH.

   DIE FORM SITZT AUF `.marke`, NICHT AUF DER ZELLE: Eine Zelle ist breiter als hoch, ein
   `border-radius: 50%` darauf ergibt eine Ellipse – und am Zellenrand kleben zwei markierte
   Bahnen aneinander.

   DIE ZWEITE STUFE (Eagle, Doppelbogey) RINGT AUSSEN, NICHT INNEN. Innen liegende Doppelringe
   haben den Innenraum aufgefressen: Bei einer zweistelligen Zahl schnitt der Ring durch die
   Ziffer, am Desktop-Safari war sie nicht mehr lesbar (Meldung des Betreibers, 10.08.2026).
   Aussen kostet der Ring nur Zellpolster, das ohnehin da ist. */

.karte-tabelle td.zelle-marke { padding-left: 10px; padding-right: 10px; }

.karte-tabelle .marke {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Die Form steckt in der Ecke: Kreis unter Par, scharfes Quadrat darüber, abgerundet für
   ein gewonnenes Par. So braucht die erste Stufe GAR KEINEN Ring – der Innenraum bleibt
   ganz für die Zahl, auch für eine zweistellige. */
.karte-tabelle .marke.erg-birdie,
.karte-tabelle .marke.erg-eagle { border-radius: 50%; }
.karte-tabelle .marke.erg-bogey,
.karte-tabelle .marke.erg-doppelbogey { border-radius: 0; }

/* Erste Stufe: ein Ring auf der Kante. */
.karte-tabelle .marke.erg-birdie,
.karte-tabelle .marke.erg-eagle { box-shadow: inset 0 0 0 2px var(--jg-green); }
.karte-tabelle .marke.erg-bogey,
.karte-tabelle .marke.erg-doppelbogey { box-shadow: inset 0 0 0 2px var(--jg-muted); }

/* Zweite Stufe: derselbe Ring plus einer AUSSEN, getrennt durch die Zellenfarbe. */
.karte-tabelle .marke.erg-eagle {
  box-shadow: inset 0 0 0 2px var(--jg-green),
              0 0 0 2px #fff,
              0 0 0 4px var(--jg-green);
}
.karte-tabelle .marke.erg-doppelbogey {
  box-shadow: inset 0 0 0 2px var(--jg-muted),
              0 0 0 2px #fff,
              0 0 0 4px var(--jg-muted);
}

/* GEWONNENES LOCH: KEINE eigene Gestaltung mehr (Ansage des Betreibers, 15.08.2026).
   Bis dahin stand hier eine dunkelgrüne Fläche mit weißer Zahl. Sie hat verwirrt, weil in
   derselben Zelle die FORM schon etwas anderes sagt – das Ergebnis relativ zum Par. Zwei
   Bedeutungen an einem Zeichen ließen sich nicht auseinanderhalten.
   Wer gepunktet hat, steht jetzt als Zahl in der Punktetafel oben (`punkteTafel`).

   DIE KLASSE `erg-sieg` BLEIBT im Markup: Sie trägt den Titel „Loch gewonnen" und die
   Sieg-Information für spätere Verwendung. Hier bekommt sie bewusst keine Regel – und
   erst dadurch greifen die Ringe der Ergebnis-Stufen darüber wieder wie bei jeder anderen
   Zelle. Wer hier wieder etwas einfärbt, holt die Verwechslung zurück. */

/* AUF DEM TELEFON EINE NUMMER KLEINER. Neun Spalten mal 48 px sind 432 – die Karte hat dort
   aber nur rund 335. Mit 24-px-Marke und engerem Polster sind es 30 px je Spalte, macht 270
   plus Beschriftung: es passt ohne jeden seitlichen Schub.

   HIER IST DIE MEDIA QUERY AUSNAHMSWEISE RICHTIG, anders als bei den Knopfgruppen: Die Karte
   ist auf `--jg-w-form` gedeckelt, unterhalb dieser Breite ist das FENSTER der Engpass, und
   genau den misst die Query. Oberhalb bleibt die Karte gleich breit, dort aendert sich nichts. */
@media (max-width: 560px) {
  .karte-tabelle .marke { width: 22px; height: 22px; }
  .karte-tabelle td.zelle-marke { padding-left: 3px; padding-right: 3px; }
  /* Mitziehen, sonst reisst die Strich-Spalte das enge Telefon-Raster auf. */
  .karte-tabelle .marke.strich-wert,
  .karte-tabelle .strich-wert { min-width: 22px; height: 22px; }
  .karte-tabelle thead th, .karte-tabelle td { padding-left: 3px; padding-right: 3px; }

  /* DER AEUSSERE RING MUSS INS POLSTER PASSEN. Mit 4 px ragte er in die Nachbarspalte und
     stiess an deren Marke (bei 375 px gemessen). Auf dem Telefon deshalb schmaler: 1 px
     Luecke, 1,5 px Ring – zusammen 2,5 px und damit innerhalb der 3 px Polster. */
  .karte-tabelle .marke.erg-eagle { box-shadow: inset 0 0 0 2px var(--jg-green), 0 0 0 1px #fff, 0 0 0 2.5px var(--jg-green); }
  .karte-tabelle .marke.erg-doppelbogey { box-shadow: inset 0 0 0 2px var(--jg-muted), 0 0 0 1px #fff, 0 0 0 2.5px var(--jg-muted); }

  /* Die Beschriftungsspalte ist der einzige Posten, der sich kuerzen laesst, ohne die Marke
     zu verkleinern: neun Spalten mal 28 plus Beschriftung muessen unter die Kartenbreite. */
  /* Auf schmalen Geraeten schrumpft auch die feste Namensspalte (20.09.2026). Mit den 78 px
     des Rechners blieben bei 320 px vier Pixel Ueberlauf – gemessen; 70 px bringen die Karte
     ohne Scrollen unter. „Zusatzpunkt" passt dort bei 12 px Schrift noch in eine Zeile. */
  .karte-tabelle .spalte-name { font-size: 12px; padding-right: 5px; }
  .karte-tabelle-huelle > .karte-tabelle:only-child > * > tr > .spalte-name,
  .karte-tabelle-huelle.karte-tabelle-voll > .karte-tabelle > * > tr > .spalte-name,
  .karte-tabelle .spalte-name { width: 70px; }
}

/* NICHT GESPIELTE LOECHER IM AUFKLAPPER. Dort stehen alle 18 Bahnen, damit die Vorgabe-
   verteilung vollstaendig ist – was noch nicht gespielt ist, tritt zurueck statt zu fehlen. */
.karte-tabelle td.leer { color: var(--jg-muted); opacity: .4; }

/* SACHTE TRENNLINIEN ZWISCHEN ALLEN SPALTEN (Ansage des Betreibers, 10.08.2026).

   Ueber `box-shadow` und nicht ueber `border-left`: Ein Rahmen kostet je Spalte ein Pixel,
   bei neun Spalten also acht – und die Tabelle hat auf dem Telefon nur vier Pixel Luft
   (305 von 309 gemessen). Der Schatten liegt ausserhalb des Layouts und kostet nichts.

   Im gruenen Kopf ein helles Weiss statt des Graus, sonst waere die Linie dort unsichtbar. */
.karte-tabelle tbody td + td { box-shadow: inset 1px 0 0 var(--jg-line); }
.karte-tabelle thead th + th { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .22); }

/* DIE KARTE WAEHREND DER RUNDE. Gleiche Bauform wie der Aufklapper in der Auswertung; hier
   steht sie in der Erfassungsansicht und traegt deshalb einen eigenen Rahmen wie die
   Stand-Karte darueber. */
#spiel-karte .erg-aufklapp {
  margin-top: 12px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid var(--jg-line);
  border-radius: 12px;
}

#spiel-karte .spiel-karte-spieler { padding-bottom: 14px; }
#spiel-karte .spiel-karte-spieler + .spiel-karte-spieler {
  border-top: 1px solid var(--jg-line);
  padding-top: 14px;
}
#spiel-karte .spiel-karte-spieler > b { display: block; margin-bottom: 2px; }

/* DAS HANDICAP-FELD IM KORREKTURMODUS. Es steht im Kopf der Ergebniskarte, wo sonst die
   Handicap-Angabe steht – dort sucht man es. 16 px, sonst zoomt iOS beim Antippen. */
/* ---- DIE KORREKTURFELDER: HANDICAP UND ABSCHLAG (1.17.2) ----

   ⚠️ DIESE BAUFORM IST NICHT NEU ERFUNDEN, sondern die der SPIELERZEILE beim Rundenstart
   (`.spieler-zeile`): Beschriftung als Block DARUEBER, Feld auf volle Breite, `min-width: 0`,
   `border-box`. Dort stehen genau dieselben zwei Bedienelemente (HCPI-Eingabe und
   Abschlag-`cselect`) untereinander, und diese Fassung hat der Betreiber am 25.08.2026
   abgenommen.

   **Was hier vorher stand und warum es weg ist (Befund des Betreibers im Bild, 25.08.2026):**
   Ich hatte ein DRITTES Muster gebaut – Beschriftung LINKS neben dem Feld, `cselect` auf feste
   `width: 11em`. Zwei Fehler auf einmal:

     1. **Der Knopftext war abgeschnitten** („Gelb (Herr…"). 11em muessen den 34-px-Pfeil und das
        Polster mittragen; fuer den Text blieb zu wenig. Im Kommentar stand, die Breite trage
        „Champions (Herren)" – das war GESCHAETZT, nicht gemessen. Eine Breitenangabe ohne Messung
        am laengsten echten Text ist eine Behauptung.
     2. **Zwei ungleich hohe Felder standen als Paar nebeneinander** (32 px gegen 58 px), weil
        Label und Feld je eine Flex-Zeile bildeten. Untereinander und gleich breit faellt der
        Hoehenunterschied nicht als Bruch auf – das `cselect` bleibt damit unangetastet. Der
        verbleibende Unterschied (44 zu 58 px) ist genau der der Spielerzeile.

   Volle Breite ohne Media Query ist Absicht (Kurzliste 10): Begrenzend ist die Spalte der Karte,
   nicht das Fenster. Genau so macht es die Spielerzeile auch. */
.korr-felder {
  /* Das `flex-basis` sitzt auf DIESEM `div`, nie auf einem Feld – iOS-Safari ignoriert eine
     prozentuale `flex-basis` auf Formularfeldern und quetscht sie auf ihre intrinsische Breite. */
  flex: 1 0 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 10px;
}

/* Beide Zellen duerfen schrumpfen – sonst hilft das `minmax(0)` der Spur nichts. */
.hcpi-korrektur,
.tee-korrektur { min-width: 0; }

.hcpi-korrektur label,
.tee-korrektur .tee-korrektur-lab {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  color: var(--jg-muted);
}

.hcpi-korrektur input {
  /* ⚠️ DIE WERTE SIND AUS `.spieler-zeile input` UEBERNOMMEN, nicht selbst gewaehlt – bis auf das
     Zeichen. Dort steht dasselbe Feld ueber demselben `cselect`, und diese Fassung ist abgenommen.
     Damit ist der Hoehenunterschied zum Abschlagsfeld genau der, den der Betreiber beim
     Rundenstart schon akzeptiert hat: 44 gegen 58 px.
     `border-box` ist PFLICHT: `width: 100%` plus Polster plus Rahmen ergibt sonst mehr als der
     Behaelter. Dieses Projekt setzt `box-sizing` NICHT global. */
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 16px;
  color: var(--jg-ink);
  border: 1px solid var(--jg-line);
  border-radius: 10px;
}

/* Das `cselect` bleibt, wie es ist – als Block nimmt es die volle Breite der Spur, und der Text
   hat damit auf jedem Platz Raum, auch „Champions (Herren)". Keine feste Breite mehr. */

/* DER RPR-EINGABEWERT unter der Summenzeile. Die Bedingungen stehen daneben und nicht in einer
   Fussnote: Wer die Zahl abtippt, ohne dass die Runde angemeldet war, meldet ein ungueltiges
   Ergebnis an den Verband. */
.rpr-zeile {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--jg-line);
  font-size: 13px;
}

.rpr-zeile b { display: block; font-weight: 500; color: var(--text); }
.rpr-zeile span { display: block; margin-top: 3px; color: var(--jg-muted); line-height: 1.45; }

/* Im Aufklapper hat die RPR-Zeile schon einen Rahmen ueber sich – der eigene Trennstrich waere
   dann ein zweiter Strich auf zwei Pixeln. */
.rpr-zeile.rpr-im-aufklapp { margin-top: 0; padding-top: 0; border-top: 0; }

/* Das Urteil ist die Aussage, die GBE nur die Zahl fuer die Software – deshalb tritt sie zurueck. */
.rpr-zeile .rpr-urteil { color: var(--jg-green); font-weight: 600; }
.rpr-zeile .rpr-gbe { margin-top: 6px; }

/* Das gespielte Handicap steht ueber der GBE und traegt Gewicht – es ist die Zahl, nach der
   gefragt wurde. Dunkel statt gruen: Gruen gehoert dem Urteil („besser/unter deinem Handicap"),
   zwei gruene Zeilen untereinander konkurrierten. */
.rpr-zeile .rpr-sd { margin-top: 8px; color: var(--text); font-weight: 600; }

/* GEZIELTE FREIGABE „einzelne Freunde" (1.10.0). Eigene Klassen statt geborgter – die
   Stufen darüber sind Radios in `.sicht-wahl`, das hier sind Haken, und beide Listen sollen
   sich beim nächsten Umbau nicht gegenseitig verstellen. */
.sicht-auswahl {
  margin: 8px 0 0 22px;
  padding-left: 10px;
  border-left: 2px solid var(--jg-line);
}

/* Eingerückt unter der Stufe, zu der sie gehört: Die Liste ist deren Fortsetzung, keine
   eigene Frage. Der Strich links sagt das, ohne ein Wort dafür zu brauchen. */
.sicht-freund {
  display: flex;
  align-items: center;
  gap: 8px;
  /* 44 px Trefferfläche wie überall auf der Bahn – hier zwar am Schreibtisch benutzt, aber
     dieselbe Hand mit demselben Handschuh. */
  min-height: 44px;
  font-size: 14px;
  cursor: pointer;
}

.sicht-leer {
  margin: 0;
  padding: 6px 0;
  font-size: 13px;
  color: var(--jg-muted);
}

/* ====================================================================================
   MEINE ENTWICKLUNG (Phase 16)

   EIGENE KLASSEN, keine geborgten: `.spieler-zeile` aus dieser Datei hat drei Anlaeufe
   gekostet, weil eine Liste sich ein Grid geliehen hatte, das fuer etwas anderes gebaut
   war. Eine geborgte Klasse ist kein Layout, sondern ein Zufall.
   ==================================================================================== */

.entw-wahl {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

/* Zwei Ansichten derselben Runden – kein Aufklapper, kein Auswahlfeld: Es sind genau zwei,
   und beide sollen sichtbar sein, damit man weiss, dass es sie gibt. */
.entw-knopf {
  flex: 1 1 0;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--jg-green-rand);
  border-radius: 8px;
  background: var(--jg-card);
  color: var(--jg-green-dark);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.entw-knopf[aria-pressed="true"] {
  background: var(--jg-green);
  border-color: var(--jg-green);
  color: #fff;
}

/* NICHT SKALIEREN: Die Breite kommt aus der gemessenen Kartenbreite (siehe `entwZeichneChart`),
   damit die Beschriftung auf dem Handy ihre echte Groesse behaelt. `height` ist deshalb fest. */
.entw-flaeche svg {
  display: block;
  width: 100%;
  height: 260px;
}

.entw-linie {
  fill: none;
  stroke: var(--jg-green);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* BEIDE PUNKTFORMEN MESSEN GLEICH GROSS (1.13.4). Vorher trug der gefuellte Punkt einen WEISSEN
   Rand – auf weissem Grund unsichtbar, also war er sichtbar 10 px breit, waehrend der offene mit
   seinem gruenen Rand auf 12 px kam. Im Bild sah der gefuellte dadurch kleiner aus, obwohl beide
   `r: 5` haben. Der Rand ist jetzt bei beiden gruen; unterschieden wird allein durch die
   FUELLUNG, und das ist die einzige Eigenschaft, die hier etwas bedeuten soll. */
.entw-punkt {
  fill: var(--jg-green);
  stroke: var(--jg-green);
  stroke-width: 2;
  cursor: pointer;
}

/* NEUN LOECHER UND BESTBALL SIND MARKIERT, nicht versteckt: In beiden steckt eine Annahme
   (die Zuschlagsformel bzw. eine taktisch anders gespielte Runde). Wer die Kurve liest,
   soll sehen koennen, welcher Punkt woher kommt. Offener Ring statt gefuellter Scheibe. */
.entw-punkt.ist-annahme {
  fill: var(--jg-card);
  stroke: var(--jg-green);
}

/* DER GEWAEHLTE PUNKT AENDERT NUR DEN RAND, NICHT DIE FUELLUNG: Eine gefuellte Scheibe wuerde
   die Annahme-Markierung (offener Ring) ueberschreiben – der angetippte Punkt saehe dann als
   einziger so aus, als steckte keine Annahme darin. Die Auswahl zeigt sich ueber Randstaerke
   und Radius (7 statt 5, gesetzt in `entwZeichneChart`). */
.entw-punkt.ist-gewaehlt {
  stroke: var(--jg-green-dark);
  stroke-width: 3;
}

.entw-achse {
  stroke: var(--jg-line);
  stroke-width: 1;
}

/* DAS RASTER: eine Senkrechte je Tag. Bis 1.13.2 lief es mit halber Deckkraft und war dem
   Betreiber im Bild zu schwach – jetzt volle Linienfarbe. Es soll die Kurve fuehren, aber man
   muss die Spalten auch sehen; ein Kalender ohne erkennbare Spalten ist keiner. */
.entw-raster {
  stroke: var(--jg-line);
  stroke-width: 1;
}

/* WOCHENENDEN LEICHT HINTERLEGT – wie im Kalender. Sie sind der Grund, warum sich der Verlauf
   ohne Antippen lesen laesst: „Samstag" muss man nicht lesen, man sieht es. Sehr zurueckhaltend,
   damit die Kurve darauf noch klar liegt. */
.entw-wochenende {
  fill: var(--jg-ink);
  fill-opacity: 0.04;
}

/* Der Wert am Punkt – die Zahl, die man sonst nur beim Antippen saehe. */
.entw-wert {
  fill: var(--jg-green-dark);
  font-size: 11px;
  font-weight: 700;
}

/* Datumsreihe im Stil einer Kalender-Kopfzeile: Wochentag zurueckgenommen, Tag kraeftiger. */
.entw-wochentag {
  fill: var(--jg-muted);
  font-size: 11px;
}

.entw-tag {
  fill: var(--jg-text);
  font-size: 12px;
  font-weight: 600;
}

/* Waagerechte Linie je ganzer Zahl – noch zurueckhaltender als das senkrechte Tagesraster.
   Sie ist eine Lesehilfe fuer die Hoehe, keine Einteilung der Zeit; traete sie gleich stark auf,
   entstuende ein Gitter, in dem die Kurve untergeht. */
.entw-zeile {
  stroke: var(--jg-line);
  stroke-width: 1;
  stroke-opacity: 0.6;
}

/* Die Bezugslinie – 0 bzw. der aktuelle Handicap-Index. Gestrichelt, damit sie nicht wie
   ein weiterer Messwert aussieht. */
.entw-bezug {
  stroke: var(--jg-muted);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.entw-beschriftung {
  fill: var(--jg-muted);
  font-size: 11px;
}

.entw-tipp {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--jg-green-wash);
  color: var(--jg-text);
  font-size: 14px;
  font-weight: 600;
}

.entw-fuss {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--jg-muted);
}

@media (prefers-reduced-motion: no-preference) {
  .entw-punkt { transition: r 120ms ease; }
}

/* Die Legende steht zwischen Chart und Fusstext – dort, wo die Frage entsteht. */
.entw-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 10px;
}

.entw-legende-teil {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--jg-muted);
}

.entw-legende-teil svg {
  flex: 0 0 auto;
}

/* ---- Blaetterzeile: ‹ August 2026 ›  [Alle Runden] ---- */
.entw-zeitraum {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

/* Der Titel nimmt den freien Platz, damit die Pfeile aussen sitzen – wie in der Kopfzeile eines
   Kalenders. */
.entw-zeitraum-titel {
  flex: 1 1 auto;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--jg-text);
}

.entw-pfeil {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--jg-green-rand);
  border-radius: 8px;
  background: var(--jg-card);
  color: var(--jg-green-dark);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

/* Am Rand des Bestands abgeschaltet – sichtbar, aber erkennbar tot: Ein verschwindender Pfeil
   liesse die Zeile springen. */
.entw-pfeil:disabled {
  opacity: 0.35;
  cursor: default;
}

.entw-alle {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--jg-green-rand);
  border-radius: 8px;
  background: var(--jg-card);
  color: var(--jg-green-dark);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* Der leere Monat – ein Satz statt einer leeren Zeichenflaeche. */
.entw-leer {
  margin: 0;
  padding: 26px 10px;
  text-align: center;
  font-size: 14px;
  color: var(--jg-muted);
}

/* „Meine Entwicklung" und „Runden meiner Freunde" gehoeren zu „Gespeicherte Runden" – unter „Neue
   Runde" haben sie nichts verloren. Gesetzt wird die Klasse in `klappStart` (runde.js). */
/* POSITIV FORMULIERT, und das ist der Punkt: „Meine Entwicklung" und „Runden meiner Freunde"
   erscheinen NUR, wenn „Gespeicherte Runden" offen ist – nicht „immer außer bei Neue Runde".
   Die alte, negative Fassung ließ sie stehen, sobald BEIDE Abschnitte zu waren (am 20.08.2026
   im Bild gesehen). Eine Regel, die nur die Fälle abdeckt, an die man gerade denkt, hat immer
   einen dritten. */
#ansicht-start:not(.zeigt-historie) .zur-historie {
  display: none;
}

/* Unter „Neue Runde" verschwindet auch der Aufklapp-Kopf von „Gespeicherte Runden" – aber nur für
   Angemeldete, die den Weg im Konto-Menü haben. Gäste behalten ihn, sonst kommen sie nicht mehr
   an ihr Geräte-Archiv (gesetzt in `klappStart`). */
#karte-historie.nur-gast {
  display: none;
}

/* Und die Gegenrichtung: Unter „Gespeicherte Runden" ist das Startformular samt Kopf weg. Zurück
   führt „Neue Runde" im Kopfmenü – der Punkt steht dort für jeden, auch ohne Konto. */
#ansicht-start.zeigt-historie #karte-neu {
  display: none;
}

/* ---- Putts & Strafschläge – direkt unter der Schlagzahl (1.13.8) ---- */

/* Zwei eigene Zeilen im Muster der Schlagzeile: Beschriftung links, Zähler rechts. Sie nehmen
   die volle Breite der Spielerzeile (`flex: 1 0 100%`), damit sie darunter stehen und nicht
   daneben – vier Bedienelemente nebeneinander passen auf 375 px nicht. */
.zz-reihe {
  flex: 1 0 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed var(--jg-line);
}

.zz-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* So kräftig wie der Spielername darüber, damit die Zeilen eine Familie bilden – aber ohne
   dessen Fettung, sonst konkurriert die Nebensache mit dem Namen. */
.zz-titel {
  flex: 1 1 auto;
  font-size: 14px;
  color: var(--jg-text);
}

/* „–" für „nicht gezählt" steht schmaler als eine Ziffer – die Breite kommt von `.zaehler-wert`,
   hier wird nur die Farbe zurückgenommen, solange nichts gezählt wurde. */
/* DER WERT IST HIER EIN `span`, KEIN KNOPF – und ein Inline-Element ignoriert `min-width`.
   Ohne `inline-flex` schrumpfte er auf die Breite seines Inhalts (beim Platzhalter „·" auf ein
   paar Pixel), die Knöpfe rutschten zusammen und die Zeile floh aus der Flucht des
   Schlagzählers darüber. Die Regel `.zaehler-wert` war die ganze Zeit geladen und tat nichts. */
.zz-wert {
  /* 44 statt der 52 aus `.zaehler-wert`: Beim Schlagzaehler ist der Wert ein `button` und erbt
     damit `.zaehler button` (min-width 44) – der Selektor ist spezifischer als `.zaehler-wert`.
     Ohne diese Zeile waere die Zusatzreihe 152 statt 144 px breit und liefe aus der Flucht. */
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  cursor: default;
}

/* „Hier steht noch nichts" – klar zurückgenommen, damit der Punkt nicht mit dem Minus-Knopf
   daneben verwechselt wird. */
.zz-wert.ist-leer {
  color: var(--jg-line);
}

/* Nichts zu verringern: erkennbar nicht bedienbar, statt sichtbar und wirkungslos. */
.zz-zeile .zaehler button:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Putts und Strafschläge in der Auswertung – bewusst zurückgenommen: Sie sind eine Auskunft,
   keine Wertung. */
.erg-zusatzzahlen {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--jg-muted);
}

/* ---- „Wer das sehen darf" in der Historie: Aufklapper (1.13.10) ---- */
.sicht-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
}

.sicht-kopf .sicht-titel {
  flex: 0 0 auto;
}

/* Die aktuelle Stufe im zugeklappten Kopf – ohne sie müsste man jede Runde öffnen, um zu sehen,
   was freigegeben ist. */
.sicht-stand {
  flex: 1 1 auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--jg-green-dark);
}

.sicht-inhalt {
  padding-bottom: 10px;
}

/* Der Aufklapper im Startformular teilt sich die Kopfzeile mit dem der Historie (`.sicht-kopf`) –
   das graue Band gehört NICHT in den Knopf, es zerreißt dort das Layout. */
.feld-klapp > .sicht-kopf {
  padding-top: 0;
}

.feld-klapp .aufklapp-inhalt {
  padding-top: 12px;
}

/* DER AUFKLAPP-PFEIL BEI „FRÜHERE RUNDEN" IST EIN REST (1.13.15): Seit die beiden Abschnitte
   einander ausschließen, klappt er etwas auf, das ohnehin allein auf der Seite steht. Für
   Angemeldete bleibt nur die Überschrift; der Wechsel läuft übers Menü.

   Gäste behalten den Knopf – für sie ist er der einzige Weg zwischen Formular und Archiv
   (kein Konto-Menü). Dieselbe Unterscheidung wie bei `nur-gast`. */
#ansicht-start.zeigt-historie.ohne-klapp #karte-historie > .aufklapp-kopf {
  cursor: default;
  pointer-events: none;
}

#ansicht-start.zeigt-historie.ohne-klapp #karte-historie > .aufklapp-kopf .aufklapp-pfeil {
  display: none;
}

/* ================================================================================
   DIE AUSWERTUNG KLAPPT IN DER ZEILE AUF (1.13.16)
   ================================================================================
   Ansage des Betreibers, 20.08.2026: „in jeder zeile einen aufklapper, der dann die details,
   welche aktuell auf ‚Ansehen‘ kommt, einfach anzeigt". Der Knopf „Ansehen" ist damit entfallen –
   die Zeile SELBST ist der Schalter.

   Gebaut als Umzug: `#ansicht-ende` wandert per `appendChild` in `.zeilen-inhalt` und beim
   Zuklappen zurück. Warum kein Nachbau, steht in `runde.js` über `endeInZeile`. */

/* IN DER ZEILE BRAUCHT DIE AUSWERTUNG WEDER ÜBERSCHRIFT NOCH KOPFZEILE: Die Zeile darüber
   nennt Platz, Datum, Spielform und seit dem 20.09.2026 auch die gespielten Bahnen
   („gespielt: Bahn 1 bis 3") – ein zweites `h1` mitten in einer Liste wäre zudem semantisch
   falsch.

   ⚠️ DIE KOPFZEILE STAND HIER BIS ZUM 21.09.2026 AUSDRÜCKLICH DRIN, mit der Begründung „der
   Umfang steht sonst nirgends". Das stimmte, bis `bahnenBereich()` in die Zeile kam; seitdem
   sagte sie dasselbe ein zweites Mal – vier Angaben, von denen drei wörtlich darüber stehen
   (Ansage des Betreibers: „informationen doppelt vorhanden, der untere bereich kann weg").

   ⚠️ NUR IN DER ZEILE. In der Vollansicht (`#ende` nach dem Beenden, und die frisch beendete
   Runde) gibt es keine Zeile darüber – dort ist die Kopfzeile die EINZIGE Stelle, an der
   Umfang, Spielform, Ort und Datum stehen. Deshalb hängt die Regel an `.in-zeile` und nicht
   an der ID.

   NEBENWIRKUNG, DIE DEN ZWEITEN TEIL DER BESTELLUNG ERLEDIGT: Sie war der einzige Text im
   Aufklapper ohne eigene Fläche – alles andere steht in Karten mit Rahmen und Innenabstand.
   Die Zelle hat am Rechner kein seitliches Polster (siehe `td.zeilen-inhalt`), also klebte
   ausgerechnet dieser Text auf der Kante der grünen Zeile darüber. Gemessen am 21.09.2026 bei
   900 px: Text im Aufklapper bei x=22, Text der Spalte darüber bei x=34. */
#ansicht-ende.in-zeile > h1 { display: none; }
#ansicht-ende.in-zeile > .unter { display: none; }

/* ── Die Angaben der Kopfzeile: am Rechner nebeneinander, am Telefon untereinander ────
   Ansage des Betreibers, 21.09.2026: „Hier bitte auch aufraeumen. infos untereinander
   (Mobil)." Die Teile setzt `setzeUnterZeile()` in `runde.js`; die Begruendung, warum es
   Elemente sein muessen und der Trennpunkt ein eigenes, steht dort.

   ⚠️ 767 px UND NICHT 700 wie die Tabelle weiter unten: Das ist die Telefongrenze des
   Projekts (`CLAUDE.md`). Die 700 der Historientabelle sind aelter; sie hier zu wiederholen
   hiesse, dieselbe Grenze an zwei Stellen verschieden zu ziehen. */
@media (max-width: 767px) {
  .unter > .unter-teil { display: block; }
  .unter > .unter-punkt { display: none; }
}

/* ================================================================================
   „FRÜHERE RUNDEN" ALS ECHTE TABELLE (1.13.16)
   ================================================================================
   Ansage des Betreibers, 20.08.2026: „mach eine echte jg-tab-tabelle draus". Vorher waren es
   gleich gebaute Textblöcke – acht Zeilen begannen identisch mit „18 Loch · Deggendorfer
   Golfclub", darunter Datum und Namen. Die Liste war nicht zu lesen, weil an keiner Stelle
   dieselbe Angabe stand.

   Grundform ist `.jg-tab` aus `kopfmenue.css` (grüne Kopfzeile, erste Spalte links, Zebra statt
   Trennlinien). Hier steht nur, was diese Tabelle ergänzt. */
.runden-tab { font-size: 14px; }

/* Die Zeile IST der Schalter – kein „Ansehen"-Knopf mehr. */
.runden-tab tbody tr.runden-zeile[role="button"] { cursor: pointer; }
.runden-tab tbody tr.runden-zeile[role="button"]:hover { background: var(--jg-green-tint); }
.runden-tab tbody tr.runden-zeile[role="button"]:focus-visible {
  outline: 2px solid var(--jg-green);
  outline-offset: -2px;
}

/* ZEBRA ÜBER EINE KLASSE, nicht über `nth-child`: Jede Runde belegt zwei `<tr>` (Zeile +
   Aufklapp-Reihe), die Regel der Grundform träfe die falschen. Deshalb wird sie hier
   abgeschaltet und durch `.r-gerade` ersetzt, das `zeichneHistorie` setzt. */
.runden-tab > tbody > tr:nth-child(even) { background: none; }
.runden-tab > tbody > tr.r-gerade { background: var(--jg-green-faint, #f6f9f7); }

/* Datum, Platz und Mitspieler sind Text, keine Zahlen – sie stehen links. Mittig bleibt nur die
   Spielart, weil sie ein kurzes Etikett ist, und der Pfeil.

   DER KOPF MUSS MIT: `.jg-tab thead th` zentriert alles ausser der ersten Spalte. Ohne diese
   Zeile schwebt „Platz" über einer linksbündigen Spalte irgendwo in deren Mitte – im Code sieht
   die Regel richtig aus, auf dem Schirm sofort falsch. */
.runden-tab td.r-datum,
.runden-tab td.r-platz,
.runden-tab td.r-namen,
.runden-tab > thead > tr > th:nth-child(2),
.runden-tab > thead > tr > th:nth-child(4) { text-align: left; }

/* SPALTENBREITEN: Datum und Spielart nehmen nur ihren Inhalt (`width: 1%` plus `nowrap` ist der
   Weg, eine Tabellenspalte auf Inhaltsbreite zu zwingen), den Rest teilen sich Platz und
   Mitspieler. Ohne das verteilt der Browser gleichmässig – die Datumsspalte war dann 500 px
   breit und der Platz begann in der Mitte der Tabelle. */
.runden-tab td.r-datum,
.runden-tab > thead > tr > th:nth-child(1),
.runden-tab td.r-art,
.runden-tab > thead > tr > th:nth-child(3) { width: 1%; white-space: nowrap; }

.runden-tab td.r-platz { width: 34%; }

.runden-tab > tbody > tr > td { vertical-align: top; padding: 10px 12px; }
.runden-tab > tbody > tr > td b { display: block; font-weight: 500; }

/* Die zweite Zeile einer Zelle: Wochentag und Uhrzeit, Club unter dem Platz. */
.runden-tab .r-klein {
  display: block;
  font-size: 12px;
  color: var(--jg-muted);
  margin-top: 2px;
}

.runden-tab td.r-art { white-space: nowrap; }

/* Die Marken in der Zelle: „nur auf diesem Gerät", „korrigiert am …", die Freigabe-Marke und
   „Freigegeben von …". Sie standen vorher im Textblock der Zeile und hatten dort ihren Abstand;
   der gehört jetzt hierher, sonst kleben sie am Text darüber. */
.runden-tab .offen-marke,
.runden-tab .korrigiert-marke,
.runden-tab .sicht-marke { display: inline-block; margin-top: 5px; }

.runden-tab .fr-von { font-size: 12px; }

/* „korrigiert am …“ ist eine ANGABE, keine Warnung – dieselbe Zurückhaltung wie die Nebentexte
   daneben, damit sie die Marke „nur auf diesem Gerät“ nicht übertönt. (Die Regel stand im alten
   Historie-Block und ist beim Umbau auf die Tabelle mitgegangen; ohne sie steht die Zeile in
   voller Textfarbe und wirkt wie eine Fehlermeldung.) */
.korrigiert-marke {
  font-size: 12px;
  color: var(--jg-muted);
}

/* Der Abstand nach links gilt nur, wenn tatsächlich eine Marke davor steht – sonst begänne die
   Zeile eingerückt und stünde schief unter dem Text darüber. */
.offen-marke + .korrigiert-marke { margin-left: 8px; }
.runden-tab td.r-namen { overflow-wrap: anywhere; }

/* Die Pfeilspalte nimmt nur ihre eigene Breite – 34 px Kreis plus Luft. */
.runden-tab th.r-pfeilkopf,
.runden-tab td.r-pfeil { width: 1%; white-space: nowrap; text-align: right; }

.runden-tab td.r-pfeil { padding-right: 12px; }

/* Offen: gefüllt und gedreht. ÜBER DIE ZEILE, nie als Nachfahren-Selektor – in der aufgeklappten
   Auswertung stehen weitere `.aufklapp-pfeil` („Mein Course Handicap", „Nettopunkte je Loch"),
   die ein Nachfahren-Selektor alle auf „offen" stellte (Fallstrick aus CLAUDE.md). */
.runden-tab tr.runden-zeile:hover > td.r-pfeil > .aufklapp-pfeil,
.runden-tab tr.runden-zeile.offen > td.r-pfeil > .aufklapp-pfeil {
  background: var(--jg-green);
  border-color: var(--jg-green);
  color: #fff;
}

.runden-tab tr.runden-zeile.offen > td.r-pfeil > .aufklapp-pfeil {
  transform: rotate(180deg);
  animation: none;
}

/* ⚠️ IST EINE RUNDE OFFEN, VERSCHWINDEN DIE UEBRIGEN ZEILEN (Ansage des Betreibers,
   20.09.2026). Die Klasse setzt `zeileMarkiere()` an der Tabelle, in der die offene
   Zeile steht – die zweite Liste (Runden der Freunde) bleibt davon unberuehrt.

   ⚠️ DIE AUFKLAPP-REIHEN MUESSEN MIT. Jede Runde belegt ZWEI `<tr>`: die Zeile und die
   Reihe darunter, die den Inhalt traegt. Die der geschlossenen Runden sind zwar ohnehin
   `hidden` – aber `hidden` verliert im ganzen Projekt regelmaessig gegen eine eigene
   `display`-Regel, und hier steht mit `display: block` im Handy-Layout genau so eine.
   Sie deshalb ausdruecklich mitnehmen, statt sich auf das Attribut zu verlassen.

   ⚠️ DER TABELLENKOPF BRAUCHT KEINE REGEL – er ist in dieser Liste NIE sichtbar. Hier stand
   dafuer erst eine, bis die Messung zeigte: `runde-entwurf.css` blendet `.runden-tab > thead`
   bei JEDER Fensterbreite aus (in `runde.css` gibt es dieselbe Regel noch einmal, dort in der
   Media Query fuer schmale Geraete). Eine dritte Fassung waere toter Code mit einer
   Begruendung, die niemand nachpruefen kann. */
.runden-tab.eine-offen > tbody > tr.runden-zeile:not(.offen),
.runden-tab.eine-offen > tbody > tr.runden-zeile:not(.offen) + tr.zeilen-reihe { display: none; }

/* ── Die offene Zeile IST die Kopfzeile ihres Aufklappers ─────────────────────
   Ansage des Betreibers, 20.09.2026: „dunkelgruen hinterlegt“ und „ganz unten eine
   dunkelgruene Trennlinie“. Bis dahin war sie `--jg-green-tint` – derselbe blasse
   Ton, den auch der `:hover` jeder anderen Zeile traegt. Offen und ueberfahren sahen
   damit gleich aus.

   `--jg-green` UND NICHT `--jg-green-dark`: Es ist woertlich die Farbe der Kopfzeile
   dieser Tabelle (`.jg-tab thead th` in `kopfmenue.css`, `#0f6e56` auf Weiss). Die
   offene Zeile wird damit optisch zu dem, was sie ist – der Kopf des Blocks darunter.
   Ein zweiter, eigener Gruenton daneben waere im Bild ohnehin nicht zu unterscheiden
   (gemessen am selben Tag am Info-Balken: vier Helligkeitsstufen sieht man nicht).

   ⚠️ DIE SCHRIFT MUSS MIT. Sonst steht `--jg-ink` auf dunklem Grund – und die
   Nebenzeilen (`--jg-muted`) waeren praktisch unlesbar. Mitgenommen werden auch die
   Marken: Sie tragen eigene Farben UND eigene Flaechen. */
.runden-tab > tbody > tr.runden-zeile.offen { background: var(--jg-green); }

.runden-tab > tbody > tr.runden-zeile.offen > td,
.runden-tab > tbody > tr.runden-zeile.offen > td b,
.runden-tab > tbody > tr.runden-zeile.offen > td .r-klein,
.runden-tab > tbody > tr.runden-zeile.offen > td .korrigiert-marke { color: #fff; }

/* Die zwei Marken mit eigener Flaeche: durchscheinendes Weiss statt der hellen
   Toenung – die waere auf dem dunklen Grund ein leuchtender Fleck. */
.runden-tab > tbody > tr.runden-zeile.offen > td .offen-marke {
  color: #fff;
  background: rgba(255, 255, 255, .18);
}

/* ⚠️ DER `:hover` MUSS AUSGENOMMEN WERDEN. `.runden-tab tbody tr.runden-zeile[role="button"]:hover`
   steht weiter oben und ist SPEZIFISCHER als diese Regel (Attribut plus Pseudoklasse) – ohne
   die Ausnahme wird die offene Zeile beim Ueberfahren wieder blassgruen, und zwar nur dann.
   Ein Fehler, den kein ruhendes Bild zeigt. */
.runden-tab tbody tr.runden-zeile[role="button"].offen:hover { background: var(--jg-green); }

/* ⚠️ DER PFEIL WIRD NICHT HIER UMGEFAERBT, SONDERN IN `runde-entwurf.css`. Grund: Die
   ruhige Bauform legt in `entwurf-basis.css` eine Auflage ueber ALLES, dessen Klasse
   „pfeil“ enthaelt – mit `!important` (`background: none`, `color: --jg-ink`, und fuer
   `.offen` dann `--jg-green`). Eine Regel an dieser Stelle verliert dagegen, egal wie
   spezifisch sie ist; gemessen am 20.09.2026: Sie stand im CSSOM, `matches()` sagte
   „trifft“, und der Pfeil blieb trotzdem gruen auf gruen – also unsichtbar.
   Die Ausnahme steht deshalb dort, wo die uebrigen Pfeil-Ausnahmen schon stehen. */

/* ---- Die Aufklapp-Reihe: eine Zelle über die volle Breite ----
   Ohne Polsterung, damit die Auswertung darin dieselbe Breite hat wie die Karte drumherum –
   sonst stünde sie doppelt eingerückt.

   ⚠️ DIE TRENNLINIE GANZ UNTEN schliesst den Aufklapper ab (bestellt am 20.09.2026). Sie sitzt
   an DIESER Zelle und nicht an der naechsten Zeile: Die Reihe ist `hidden`, solange die Runde
   zu ist – damit erscheint und verschwindet der Strich zusammen mit dem Inhalt, ohne eine
   eigene Regel dafuer. */
/* ⚠️ DAS POLSTER OBEN IST PFLICHT, SEIT DIE KOPFZEILE WEG IST (21.09.2026). Bis dahin trug
   die Textzeile („12 von 18 Löchern · …") den Abstand; ohne sie stiess die Ergebniskarte mit
   ihrem 1-px-Rahmen exakt auf die gruene Zeile – gemessen: 0 px Luft. Zwei Flaechen brauchen
   einen Abstand, sonst sehen sie aus wie eine verrutschte. */
.runden-tab tr.zeilen-reihe > td.zeilen-inhalt {
  padding: 14px 0 18px;
  text-align: left;
  background: none;
  border-bottom: 2px solid var(--jg-green);
}

/* ---- Handy: die Tabelle bricht in Karten um ----
   FÜNF SPALTEN PASSEN AUF 375 px NICHT. Die Hülle würde zwar waagerecht scrollen, aber eine
   Hauptliste, die man seitwärts schieben muss, ist keine Liste mehr. Deshalb wird jede Zeile zum
   Block – dieselben Daten, dieselbe Reihenfolge, nur untereinander.

   Hier ist die Media Query richtig (anders als bei den Knopfgruppen, siehe CLAUDE.md): Diese
   Tabelle nimmt tatsächlich die volle Fensterbreite, es gibt keine begrenzende Spalte darüber. */
/* ⚠️ ALLE SELEKTOREN HIER ZIELEN AUF DIREKTE KINDER (`>`), UND DAS IST PFLICHT.
   Die Auswertung einer Runde steht in einer eigenen Tabellenzeile MIT `colspan` INNERHALB dieser
   Tabelle – und darin liegt die Scorekarte, selbst eine `<table>`. Ein Nachfahren-Selektor wie
   `.runden-tab td { display: block }` trifft deshalb auch deren Zellen: Par und Vorgabe standen
   dann untereinander statt nebeneinander, und `.runden-tab thead { display: none }` blendete den
   Lochnummern-Kopf gleich mit aus. Am 22.08.2026 vom Betreiber am Handy gemeldet, am echten
   Markup gegengeprüft (alt: innere Zelle `block`, neu: `table-cell`).
   Wer hier einen `>` entfernt, holt den Fehler zurück. */
@media (max-width: 700px) {
  .runden-tab > thead { display: none; }
  .runden-tab,
  .runden-tab > tbody,
  .runden-tab > tbody > tr,
  .runden-tab > tbody > tr > td { display: block; width: auto; }

  /* ── Die Zeile als zweispaltige Karte ───────────────────────────────────
     Ansage des Betreibers, 21.09.2026: „Das ist pro Zeile (mobil) sehr unuebersichtlich. Der
     Clubname sollte neben dem Datum stehen. Mobil kann der ‚Platz‘ weg. Spielart und Spieler
     passen doch sicher in eine Zeile?" Vorher stand jede der vier Zellen untereinander – fuenf
     bis sechs Zeilen je Runde, bei acht Runden eine Seite ohne Gliederung.

     Daraus werden zwei Zeilen zu je zwei Spalten:

         20.09.2026              Deggendorfer Golfclub
         Sonntag · 14:00 Uhr
         Bestball                Stefan, Liesl, Gabi

     ⚠️ GRID AUF DEM `<tr>`, UND DAS GEHT NUR HIER: Die Regel darueber hat `display: block`
     auf jede Zeile und jede Zelle gelegt – die Tabellendarstellung ist also ohnehin schon
     aufgegeben. Ohne diesen Zwischenschritt waere `grid` auf einem `<tr>` eine Wette.

     ⚠️ DIE ZUORDNUNG STEHT AUSDRUECKLICH DA (`grid-row`/`grid-column`) und wird NICHT dem
     automatischen Fluss ueberlassen. Der Pfeil ist die fuenfte Zelle; er liegt zwar `absolute`
     und belegt damit keine Spur – aber eine spaeter ergaenzte sechste Zelle rutschte sonst
     wortlos in eine der vier Stellen und schoebe alles weiter.

     ⚠️ `minmax(0, 1fr)` STATT `1fr`: Ein Grid-Bereich ist von Haus aus mindestens so breit
     wie sein laengstes unteilbares Wort. „Deggendorfer Golfclub" passt, eine lange
     Mitspielerliste nicht – sie schoebe die Spalte auf und damit die Zeile aus dem Bild.
     `overflow-wrap: anywhere` an `.r-namen` traegt den Rest. */
  .runden-tab > tbody > tr.runden-zeile {
    position: relative;
    display: grid;
    /* ⚠️ 148 px IST GEMESSEN, NICHT GESCHAETZT (21.09.2026, an der echten Liste im Chrome
       des Betreibers, 12 px Inter). `auto` stand hier zuerst – und weil JEDE Zeile ihr
       eigenes Grid ist, bekam jede eine andere Spaltenbreite: Der Club begann mal bei 139,
       mal bei 175 px, die Liste „sprang". Genau der Fehler, den die Tabelle vorher nicht
       hatte.

       Was die Breite BESTIMMT, war dabei nicht zu raten: nicht der laengste Wochentag
       („Donnerstag · 12:03 Uhr" = 133 px), sondern die Marke „korrigiert am 08.08.2026"
       darunter = 141 px. 148 px sind diese 141 plus Luft fuer eine andere Schriftwiedergabe.

       ⚠️ `minmax(0, 148px)` UND NICHT `148px`: Auf einem 320-px-Geraet bliebe eine feste
       Spalte stehen und druecke den Clubnamen auf Buchstabenbreite. So schrumpfen beide
       Spalten gemeinsam – und weil sie in JEDER Zeile gleich schrumpfen, fluchten sie
       weiterhin. */
    grid-template-columns: minmax(0, 148px) minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 2px;
    align-items: start;

    /* ── Die Flaeche bis an beide Kartenraender ──────────────────────────
       Ansage des Betreibers, 21.09.2026: „Der Hintergrund des Aufklappers soll sowohl in der
       Uebersicht, als auch in der Detailansicht in voller Breite (mobil) sein."

       Die Zeile ist ein Kind der Karte und begann bisher hinter deren Polster – die gruene
       Flaeche der offenen Zeile hatte damit links und rechts einen weissen Streifen, waehrend
       die Karte selbst in der ruhigen Bauform bis an den Bildschirmrand laeuft
       (`entwurf-basis.css`, „Karten werden Zeilen").

       ⚠️ WOERTLICH DAS MUSTER VON `.karte.aufklapp.offen > .aufklapp-kopf` (`konto.css`,
       20.09.2026) – dort ist dieselbe Aufgabe schon geloest und im Bild abgenommen. Gleiches
       Token, gleiches Vorzeichen, gleicher Aufschlag rechts. Ein eigener Wert an dieser Stelle
       waere eine zweite Wahrheit ueber dasselbe Polster.

       ⚠️ KEIN `width: calc(100% + …)` WIE DORT: Das Grid ist ein Block, und dessen `auto`
       fuellt die Breite bereits. Der `<button>` dort brauchte die Rechnung, weil `auto` fuer
       ihn „so breit wie der Inhalt" heisst.

       ⚠️⚠️ DAS NEGATIVE MARGIN IST AM 21.09.2026 WIEDER ENTFALLEN – ES KONNTE HIER NIE WIRKEN,
       UND ES RICHTETE SCHADEN AN. Die Zeile liegt NICHT direkt in der Karte wie ihr Vorbild in
       `konto.css`, sondern in `div.jg-tab-huelle` – dem Container mit `overflow: auto`, der
       breite Tabellen waagerecht scrollbar macht. Der schneidet jeden Ueberstand ab:

         Element der Zeile   2 .. 497   (das negative Margin wirkte auf die Geometrie)
         GEMALTE Flaeche    22 .. 476   (die Huelle schnitt sie auf ihre Breite zurueck)
         Text der Zeile     ab 22       -> also EXAKT auf der sichtbaren Kante

       Das Polster von 20 px lag damit vollstaendig im abgeschnittenen Bereich, und der Text
       klebte am Rand (Bestellung des Betreibers: „warum klebt der text immer noch am linken
       rand?"). Zusaetzlich erzeugte der Ueberstand einen waagerechten Scrollbereich von 20 px
       (gemessen: Huelle 455 px breit, Inhalt 475 px).

       ⚠️ DIE HUELLE DARF NICHT AUF `overflow: visible`: Im Aufklapper liegt die SCOREKARTE und
       sie hat KEINE eigene Huelle – sie scrollt ueber genau diese. Wer die Flaeche wirklich bis
       an den Kartenrand fuehren will, muss der Huelle den Versatz geben, nicht der Zeile.

       ⚠️ GEMESSEN WIRD DIE FLAECHE, NICHT DIE ELEMENTKANTE. `getBoundingClientRect()` meldete
       brav 20 px Abstand, waehrend im Bild 0 zu sehen waren; erst `elementFromPoint()` ueber
       die linke Kante zeigte, wo das Gruen wirklich beginnt (Fallstrick aus `CLAUDE.md`). */
    padding: 12px calc(var(--jg-karte-polster, 20px) + 40px) 12px var(--jg-karte-polster, 20px);
    border-bottom: 1px solid var(--jg-line);
  }

  /* ⚠️ DEN VERSATZ TRAEGT DIE HUELLE, NICHT DIE ZEILE (21.09.2026, Ansage des Betreibers:
     „die Flaeche soll bis an den Rand").

     An der Zeile konnte er nie wirken – `.jg-tab-huelle` hat `overflow-x: auto`
     (`kopfmenue.css`, damit breite Tabellen in sich scrollen statt die Seite zu dehnen) und
     schnitt jeden Ueberstand ab; die Begruendung steht ausfuehrlich an der Regel darueber.
     Verschiebt man stattdessen die HUELLE, wandert ihre Schnittkante mit: Die gruene Flaeche
     laeuft bis an den Bildschirmrand, und das Polster der Zeile liegt wieder IM sichtbaren
     Bereich.

     ⚠️ NICHT AN `.jg-tab-huelle` SELBST: Die Klasse gehoert allen Tabellen des Projekts
     (`kopfmenue.css`). Die beiden Runden-Listen – „Gespeicherte Runden" und die Runden der
     Freunde, die laut `runde.js` bewusst gleich aussehen – tragen dafuer zusaetzlich
     `runden-huelle`.

     ⚠️ `overflow-x: auto` BLEIBT: Im Aufklapper liegt die Scorekarte, und sie hat KEINE eigene
     Huelle – sie scrollt ueber genau diese (gemessen am 21.09.2026). */
  .runden-huelle {
    margin-left: calc(var(--jg-karte-polster, 20px) * -1);
    margin-right: calc(var(--jg-karte-polster, 20px) * -1);
  }

  /* Wer wo steht. Erste Zeile: wann und wo. Zweite Zeile: wie und mit wem. */
  .runden-tab > tbody > tr.runden-zeile > td.r-datum { grid-column: 1; grid-row: 1; }
  .runden-tab > tbody > tr.runden-zeile > td.r-platz { grid-column: 2; grid-row: 1; }
  .runden-tab > tbody > tr.runden-zeile > td.r-art   { grid-column: 1; grid-row: 2; }
  .runden-tab > tbody > tr.runden-zeile > td.r-namen { grid-column: 2; grid-row: 2; }

  /* ⚠️ DER PLATZNAME GEHT NUR, WO EIN CLUB DANEBENSTEHT. Welche der beiden Klassen das
     `<b>` traegt, entscheidet `historieZeile()` an den DATEN – eine Runde, die nur auf dem
     Geraet liegt, hat keinen Club und behielte hier sonst gar keine Ortsangabe. Begruendung
     ausfuehrlich dort; wer die Regel hier auf `td.r-platz > b` verallgemeinert, holt den
     Verlust zurueck. */
  .runden-tab > tbody > tr.runden-zeile > td.r-platz > b.r-platz-ersetzbar { display: none; }

  /* Der Club steht jetzt NEBEN dem Datum und ist dort die Hauptangabe seiner Spalte – nicht
     mehr die Nebenzeile unter einem Platznamen. Er bekommt deshalb die Groesse des Datums
     daneben zurueck; grau bleibt er, weil das Datum die fuehrende Angabe der Zeile ist. */
  .runden-tab > tbody > tr.runden-zeile > td.r-platz > .r-clubname {
    font-size: 14px;
    margin-top: 0;
  }

  /* DIE SPALTENBREITEN MÜSSEN HIER EINZELN ZURÜCK. `.runden-tab td { width: auto }` oben in
     dieser Query verliert gegen `.runden-tab td.r-platz { width: 34% }` – die Klasse macht den
     Selektor spezifischer (0,2,1 gegen 0,1,1). Ohne diese Zeilen ist der Block 34 % breit, und
     „Deggendorfer Golfclub" bricht mitten im Namen um (im Bild gemessen, im Code unsichtbar). */
  .runden-tab td.r-datum,
  .runden-tab td.r-platz,
  .runden-tab td.r-art { width: auto; white-space: normal; }

  .runden-tab > tbody > tr > td { padding: 0; }
  .runden-tab > tbody > tr > td + td { margin-top: 2px; }

  /* KEIN ZEBRA AUF DEM HANDY: Über einen vier Zeilen hohen Block gelegt wird aus der leisen
     Tönung ein Kasten – die Trennlinie darunter leistet dasselbe ruhiger. */
  .runden-tab > tbody > tr.r-gerade { background: none; }

  /* Spielart und Mitspieler tragen auf dem Handy ihre Bedeutung nicht mehr über die Spalte –
     sie stehen deshalb wie die Nebenangaben in der zweiten Ebene. */
  .runden-tab td.r-art,
  .runden-tab td.r-namen { text-align: left; font-size: 13px; color: var(--jg-muted); }

  .runden-tab td.r-art::before { content: ""; }

  /* Der Pfeil sitzt rechts neben dem Block, nicht darunter.

     ⚠️ `right` MUSS DAS KARTENPOLSTER TRAGEN, seit die Zeile darueber hinausragt: `0` waere
     jetzt der Bildschirmrand, also 20 px weiter rechts als vorher – derselbe Sprung, den der
     Betreiber am 20.09.2026 am offenen Aufklapper in `konto.css` gesehen hat. Das
     `padding-right` der Zeile rechnet mit demselben Wert plus 40 px Platz fuer den Kreis. */
  .runden-tab td.r-pfeil {
    position: absolute;
    top: 12px;
    right: var(--jg-karte-polster, 20px);
    width: auto;
    padding: 0;
  }

  /* ⚠️ DER ABSCHLUSSSTRICH MUSS MITWANDERN. Die Reihe darunter traegt `border-bottom: 2px
     solid var(--jg-green)` (siehe oben) – bliebe sie im Karteninnenraum, endete der gruene
     Strich 20 px vor dem Rand, waehrend der gruene KOPF darueber bis an die Kante laeuft. Der
     Aufklapper saehe unten schmaler aus als oben, und zwar nur auf dem Telefon.

     Der INHALT bleibt eingerueckt: Er ist Text und keine Flaeche – dieselbe Regel wie bei der
     Karte selbst („Bis an den Rand geht die LINIE, nie der Inhalt", `entwurf-basis.css`). */
  .runden-tab tr.zeilen-reihe > td.zeilen-inhalt {
    padding: 14px var(--jg-karte-polster, 20px) 14px;
  }
}

/* Datum und Uhrzeit beim Rundenstart (1.13.25).
   16 px auf beiden Feldern ist Pflicht, sonst zoomt iOS beim Antippen hinein. */
.zeitpunkt-reihe { display: flex; gap: 8px; flex-wrap: wrap; }
.zeitpunkt-reihe input {
  flex: 1 1 140px;
  min-width: 0;
  font-size: 16px;
  padding: 10px 12px;
  border: 1px solid var(--jg-line);
  border-radius: 10px;
  background: var(--jg-card);
  color: var(--jg-ink);
  font-family: inherit;
}

/* ⚠️ EIN `<button>` ERBT DIE TEXTFARBE NICHT – und jeder Browser malt ihn anders.
   Chrome nimmt Schwarz, **iOS-Safari nimmt sein Systemblau**. Auf dem iPhone standen
   dadurch die Aufklapp-Beschriftungen blau da (Befund des Betreibers, 27.08.2026:
   „am iphone sind einige links blau"), waehrend im Chrome alles richtig aussah –
   ein Fehler, den man am Rechner NIE sieht. Auch die Kinder erben dann das Blau:
   Die Ueberschrift im Kopf hat selbst keine Farbe.
   Gefunden mit einer Abfrage, die fuer jedes sichtbare `button`/`a` prueft, ob
   IRGENDEINE geladene Regel `color` setzt – nicht durch Hinsehen. */
.spieler-kopf { color: var(--jg-ink, #15211c); }

/* ============================================================================================
   DER RIEGEL BEI LAUFENDER RUNDE (08.09.2026)

   Er ersetzt in der Karte „Neue Runde" das Startformular, solange eine Runde laeuft – siehe die
   Begruendung in `runde.html` und bei `zeigeLaufendeRunde()` in `runde.js`.

   GRUEN UND NICHT ROT: Hier ist nichts kaputt und nichts verboten. Es laeuft etwas, und der
   Kasten ist der Weg dorthin zurueck – `--jg-green-faint` ist im Projekt die Flaeche fuer einen
   abgegrenzten Bereich, `--jg-red` waere eine Warnung ohne Anlass.

   EIGENE KLASSEN, KEINE GEBORGTEN: `.hinweis` gibt es im ganzen Frontend nur als `.feld .hinweis`
   (konto.css) – ausserhalb eines `.feld` waere sie Browser-Standard. `.aktionen` dagegen ist eine
   reine Klassenregel (runde.css, Knopfgruppen) und traegt hier bewusst mit: derselbe Knopf, in
   derselben Bauform wie ueberall sonst. */
.laeuft-block {
  background: var(--jg-green-faint, #edf7f1);
  border: 1px solid var(--jg-green-rand, #b7ddc9);
  border-radius: 8px;
  padding: 16px 18px 18px;
  /* WEISS IST NICHT FLAECHENLOS – und umgekehrt: Der Kasten sitzt auf der weissen Karte, also
     traegt er seine Flaeche selbst. Ohne sie schiene der Kartengrund durch und der Rahmen stuende
     um nichts herum. */
  margin: 0 0 4px;
}

.laeuft-titel {
  margin: 0;
  font-size: var(--jg-subhead-size, 15px);
  font-weight: 600;
  color: var(--jg-ink, #15211c);
}

.laeuft-wo {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--jg-muted, #5c6b64);
}

/* Der einzelne Knopf braucht weniger Luft nach oben als eine Knopfgruppe am Kartenende: Er steht
   direkt unter zwei kurzen Zeilen, nicht unter einem ganzen Formular. */
.laeuft-block .aktionen { margin-top: 14px; }


/* Der feststehende Golfclub bei „Neue Runde“ (28.09.2026) – Angabe statt Auswahl. Schriftgröße
   wie ein Eingabefeld (16 px), damit die Zeile nicht kleiner wirkt als „Platz“ darunter. */
.club-fest { font-size: 16px; font-weight: 600; color: var(--jg-ink, #15211c); padding: 2px 0; }