/**
 * JETZT.GOLF – Formularseiten des Nutzerkontos (Anmelden, Registrieren, Bestätigen, Passwort).
 *
 * Gemeinsam für konto.html, konto-bestaetigen.html und konto-passwort.html: Dreimal dasselbe
 * <style> zu pflegen ist die zuverlässigste Art, dass die Seiten auseinanderlaufen.
 *
 * Farben, Schrift und Breiten kommen aus tokens.css (Claude/Styleguide.md) – hier steht nichts
 * hart codiert, was dort schon eine Bedeutung hat.
 */

* { box-sizing: border-box; }

/* DAS SEITLICHE KARTENPOLSTER ALS TOKEN – seit 20.09.2026 an ZWEI Stellen gebraucht: von der
   Karte selbst und von der grünen Kopfzeile des offenen Abschnitts, die es wieder aufschlägt,
   um bis an beide Kartenränder zu reichen. Zweimal dieselbe Zahl zu tippen hiesse, dass der
   Balken beim nächsten Polster-Wechsel danebenliegt – und zwar unbemerkt. */
:root {
  --jg-karte-polster: 20px;
  /* Der Abstand des Aufklapp-Pfeils vom INNEREN Kartenrand. Die 17 px sind gemessen: Genau so
     weit sitzen die Pfeile der Auswahlfelder vom Feldrand (16 px Polster + 1 px Rahmen). Seit
     20.09.2026 ein Token, weil die grüne Kopfzeile ihn nachrechnen muss – sie reicht über das
     Kartenpolster hinaus und brächte den Pfeil sonst aus der Flucht. */
  --jg-kopf-pfeil: 17px;
}

/* Das HTML-Attribut `hidden` wirkt NUR über ein `display: none` im Standardstil des Browsers –
   jede eigene display-Regel schlägt es. Genau das ist hier passiert: `.feld .hinweis` setzt
   `display: block`, also stand "Mindestens 10 Zeichen." trotz `hidden` weiter unter dem
   Passwortfeld. Tückisch daran: Im DOM meldet das Element brav `hidden === true`, nur zu sehen
   ist es eben doch – aufgefallen ist es erst im Bildschirmfoto.
   Diese Regel stellt die erwartete Bedeutung wieder her, ein für alle Mal. */
[hidden] { display: none !important; }

body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  font-family: var(--jg-font);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.sitebar { background: var(--karte); border-bottom: 1px solid var(--linie); }
.sitebar-inner, .sitefoot-inner { max-width: var(--jg-w-wide); margin: 0 auto; padding: 12px var(--jg-gutter); }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; color: var(--text); text-decoration: none; font-size: 18px; }
.brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: var(--g); color: #fff; flex: 0 0 auto; }
.brand-mark svg { width: 18px; height: 18px; }
.brand-dot { color: var(--g); }

main { flex: 1 0 auto; }

/* Formularbreite, nicht Seitenbreite: ein Anmeldeformular über die volle Fensterbreite
   zu ziehen macht es nicht bedienbarer. */
.wrap { max-width: var(--jg-w-form); margin: 0 auto; padding: 36px var(--jg-gutter) 48px; }

/* ZWEI SEITEN SIND SO BREIT WIE DIE STATUSSEITE (16.08.2026).

   Anlass ist eine Frage des Betreibers: Warum steht „Mein Konto" und „Meine Runde" in einer
   schmalen 600-px-Spalte, während Status, Club und Turniere die volle Breite nutzen? Der Grund
   war historisch – beide Seiten waren einmal reine Formulare und erben ihr `.wrap` von hier.
   Inzwischen tragen sie Tabellen (Scorekarte, Stableford, Punktetafel, Mitspieler), und die
   quetschten sich in 600 px, während rechts daneben 480 px leer blieben.

   `konto.html`, „Passwort" und „Bestätigen" bleiben ausdrücklich schmal: Das sind echte
   Formulare mit zwei Feldern, und die liest man in einer schmalen Spalte besser.

   DIE SEITE WIRD BREIT, DIE EINGABESPALTE NICHT. Gemessen: Ohne die zweite Regel wären
   Eingabefelder und Knöpfe 1001 px breit – ein Knopf über die halbe Bildschirmbreite ist kein
   Fortschritt. Dasselbe Muster wie `.formcard` im Backend: Inhalt linksbündig in Lesebreite,
   Karte darum in voller Breite. Was Breite wirklich braucht (Tabellen, Listen), bekommt sie
   unten ausdrücklich zurück. */
body[data-seite="mein"] .wrap,
body[data-seite="runde"] .wrap { max-width: var(--jg-w-wide); }

h1 { font-size: 24px; margin: 0 0 6px; }
.unter { color: var(--grau); margin: 0 0 24px; }

.karte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--jg-r);
  padding: var(--jg-karte-polster);
}

.feld { margin: 0 0 16px; }
.feld label { display: block; font-size: 14px; font-weight: 600; margin: 0 0 5px; }
.feld .hinweis { display: block; font-size: 13px; color: var(--grau); font-weight: 400; margin: 4px 0 0; }

/* ⚠️ DIE FREISTEHENDE SCHWESTER – `hinweis` OHNE `.feld` darüber (20.09.2026).
 *
 * Die Regel eine Zeile höher greift NUR innerhalb eines `.feld`. Acht Absätze auf `runde.html`
 * und `konto-mein.html` tragen die Klasse aber freistehend in einer Karte; dort war sie
 * Browser-Standard – schwarze Fließschrift in voller Größe, mitten zwischen kleinen grauen
 * Texten. Aufgefallen ist es an `historie-hinweis` unter „Gespeicherte Runden“, die übrigen sieben
 * fielen beim Greppen an: `entw-luecken`, `teilen-melden`, der Absatz zum E-Mail-Anhang,
 * `aufbewahren-konto`, `fremd-hinweis`, `ms-melden`, `fr-melden`.
 *
 * SIE STEHT HIER UND NICHT IN `runde.css`, obwohl beide Seiten beide Dateien laden: Wer die
 * Schwester darüber liest, sieht die freistehende Fassung sofort daneben – und greift nicht
 * ein zweites Mal zur Klasse, die es so nicht gibt.
 *
 * KEIN `display`, anders als oben: Alle acht Absätze werden per `hidden` ein- und ausgeblendet.
 * Ein `display: block` hätte genau den Fehler wiederholt, den der Kommentar am Dateianfang
 * beschreibt – sichtbar trotz `hidden`.
 *
 * Größe, Zeilenhöhe und Farbe wörtlich von `.loeschhinweis` (webapp/style.css) – derselbe Fall,
 * dort im Bild abgenommen. Nur der Abstand nach oben ist eigen: Diese Absätze sitzen unter einer
 * Liste, nicht unter einem Eingabefeld. */
.hinweis-frei { margin: 12px 0 0; font-size: 13px; line-height: 1.45; color: var(--grau); }

/* Block-Layout statt Flex: iOS Safari ignoriert prozentuale flex-basis bei Formularfeldern,
   und das fällt in Chrome (auch im Simulator) nicht auf. Siehe Styleguide. */
.feld input {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--linie);
  border-radius: var(--jg-r-sm);
  background: #fff;
  color: var(--text);
  font-family: var(--jg-font);
  /* Mindestens 16px auf Touch, sonst zoomt iOS Safari beim Antippen und das Layout
     wirkt zerrissen – tokens.css setzt das global, hier nicht kleiner werden. */
  font-size: 16px;
  font-weight: 400;
}

.feld input:focus { outline: 2px solid var(--g); outline-offset: 1px; border-color: var(--g); }

/* Honeypot: für Menschen unsichtbar, für viele Bots ein Pflichtfeld. Bewusst KEIN
   display:none – manche Bots überspringen ausgeblendete Felder gezielt. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.knopf {
  display: block;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-radius: var(--jg-r-sm);
  background: var(--g);
  color: #fff;
  font-family: var(--jg-font);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.knopf:hover { filter: brightness(0.95); }
.knopf[disabled] { opacity: 0.6; cursor: default; }

.wechsel { margin: 18px 0 0; font-size: 14px; text-align: center; color: var(--grau); }
.wechsel a,
.wechsel button {
  border: 0; background: none; padding: 0;
  color: var(--g); font-family: var(--jg-font); font-size: 14px; font-weight: 600;
  cursor: pointer; text-decoration: underline;
}

.melden { margin: 0 0 18px; padding: 12px 14px; border-radius: var(--jg-r-sm); font-size: 14px; }
/* Farbe kommt aus den Tokens; die Flaeche bleibt bewusst hell und ruhig – eine Meldung
   soll lesbar sein, nicht schreien. */
.melden.ok     { border: 1px solid var(--g);   color: var(--text); background: var(--karte); }
.melden.fehler { border: 1px solid var(--rot); color: var(--text); background: var(--karte); }
/* Neutrale Auskunft (z. B. „Anmeldung abgelaufen") – weder Erfolg noch Fehler. Bewusst `info`
   und nicht `hinweis`: Diesen Klassennamen gibt es unter `.feld` schon für die kleinen Texte
   unter einem Eingabefeld, und zwei Bedeutungen für einen Namen rächen sich beim nächsten
   Umbau. */
.melden.info   { border: 1px solid var(--linie); color: var(--text); background: var(--karte); }
.melden p { margin: 0 0 6px; }
.melden p:last-child { margin: 0; }

/* Der Weg für Club-Mitarbeiter. Bewusst zurückhaltend: Die große Mehrheit der Besucher
   sind Nutzer, Mitarbeiter sind eine Handvoll bekannter Leute je Club. */
.nebenweg { margin: 22px 0 0; text-align: center; font-size: 13px; color: var(--grau); }
.nebenweg a { color: var(--grau); }
.nebenweg a:hover { color: var(--text); }

.sitefoot { background: var(--karte); border-top: 1px solid var(--linie); flex-shrink: 0; }
.sitefoot-inner { display: flex; gap: 22px; }
.sitefoot a { color: var(--grau); text-decoration: none; font-size: 14px; }
.sitefoot a:hover { color: var(--text); }

/* ---- Mein Konto ---------------------------------------------------------------------- */

.karte + .karte { margin-top: 18px; }
.karte h2 { font-size: 17px; margin: 0 0 6px; }
.feld-text { font-size: 14px; color: var(--grau); margin: 0 0 16px; }

/* Auswahlliste im Stil der Eingabefelder – gleiche Höhe, gleiche Kante, gleiche 16px
   (sonst zoomt iOS Safari beim Antippen). */
.feld select {
  display: block; width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--linie); border-radius: var(--jg-r-sm);
  background: #fff; color: var(--text);
  font-family: var(--jg-font); font-size: 16px; font-weight: 400;
}
.feld select:focus { outline: 2px solid var(--g); outline-offset: 1px; border-color: var(--g); }

/* Abo-Auswahl: je Club ein Block, darin die Zustände als Kästchen. */
.abo-club { border-top: 1px solid var(--linie); padding: 16px 0 4px; }
.abo-club:first-child { border-top: 0; padding-top: 0; }
.abo-club h3 { font-size: 15px; margin: 0 0 10px; }

.haken { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 15px; }
/* Kästchen gross genug für einen Finger – 20px ist die Untergrenze, bei der man auf einem
   Handy nicht danebentippt. */
.haken input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--g); margin: 0; }
.haken span { line-height: 1.3; }

/* ------------------------------------------------------------------ Mitspieler

   Der Bereich zum Anlegen/Bearbeiten ist vom Listenteil ABGEGRENZT (Ansage des Betreibers,
   09.08.2026): Vorher klebten die Felder direkt unter dem letzten Eintrag, und es war nicht zu
   erkennen, ob sie zu ihm gehören oder einen neuen anlegen. */
/* DER GRÜNE RAHMEN IST AM 10.08.2026 ENTFALLEN und durch das Gruppenband ersetzt (`.jg-band` in
   `kopfmenue.css`). Er hatte am 09.08. dieselbe Aufgabe – zeigen, wo der Listenteil endet und das
   Formular beginnt –, aber zwei Bauformen für dieselbe Aussage sind eine zu viel. Das Band macht es
   deutlicher UND heißt überall gleich.

   Übrig bleibt nur der Abstand: Ohne ihn klebt das erste Band am letzten Listeneintrag. */
.ms-formular { margin-top: 4px; }

/* Die eigene h3-Regel ist am 10.08.2026 ENTFALLEN: Die Blockebene steht jetzt zentral in
   `kopfmenue.css` (`.jg-block`, gilt auch fuer `.wrap .karte h3`) – Versalien mit Sperrung statt
   16 px/600. Zwei Fassungen derselben Ebene in zwei Stylesheets waren genau der Grund, warum
   „Freund einladen" und „Wer spielt mit?" verschieden aussahen.

   Hier bleibt nur, was den Titel IM FORMULARKASTEN betrifft: Der Kasten bringt seinen eigenen
   grünen Rand mit, eine zusätzliche Trennlinie darüber wäre ein doppelter Strich. */
/* Der Titel im Formularkasten: Die Linien-Ausnahme steht zentral in `kopfmenue.css` (der Kasten
   bringt seinen grünen Rand mit, eine Trennlinie darüber wäre ein doppelter Strich). Hier bleibt
   nur der Abstand nach oben, damit der Titel nicht am Rand klebt. */
.ms-formular h3 { margin-top: 14px; }

/* Der globale Sperrschalter der Runden-Sichtbarkeit (Phase 13). Dieselbe Bauform wie `.haken` bei
   den Abos: Kästchen VOR dem Text, 20 px, damit man auf dem Handy nicht danebentippt. Ohne diese
   Regel stand das Kästchen über der Beschriftung und sah nach einem Fehler aus (10.08.2026). */
/* ⚠️ `.feld .fr-schalter`, NICHT nur `.fr-schalter` (02.10.2026): Beide Schalter stehen in einem
   `.feld`, und `.feld label` (0,1,1) schlägt `.fr-schalter` (0,1,0) trotz späterer Stelle – das
   Label wurde wieder `display: block`, das Kästchen stand über dem Text. Gemessen an „Meine Runden
   bleiben immer privat“ und „News von JETZT.GOLF erhalten“. */
.fr-schalter,
.feld .fr-schalter {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
}

.fr-schalter input,
.feld .fr-schalter input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  flex: 0 0 auto;
  accent-color: var(--g);
}

/* Aufbau und mobiles Verhalten stehen bei `.aktionen` in `runde.css` (dieselbe Sorte Gruppe,
   eine Regel). Hier nur, was die Knöpfe dieser Seite betrifft: Sie tragen sonst ein
   `margin-top`, das in einer Reihe einen Versatz erzeugt. */
.ms-aktionen .knopf { margin-top: 0; width: auto; flex: 1 1 auto; }

@media (max-width: 700px) {
  .ms-aktionen .knopf { width: 100%; flex: none; }
}

/* ------------------------------------------------------------------ Mitspieler-LISTE
   Eigene Zeile, absichtlich NICHT `.spieler-zeile` aus `runde.css`. Die Liste hat sich das dortige
   Grid bis zum 09.08.2026 geborgt, und das war für die EINGABEZEILE des Rundenstarts gebaut:
   `"name weg" / "hcpi hcpi" / "tee tee"`, zweite Spalte 44 px, `align-items: end`.

   Gemessen ergab das für jeden Listeneintrag: Knopfgruppe in einer 44-px-Spalte zusammengequetscht,
   zwei leere Grid-Zeilen mit je 14 px Abstand (= 28 px totes Polster) und alles unten ausgerichtet.
   Solange die Zeile zwei Knöpfe und zwei Textzeilen hatte, fiel es nicht auf; mit der dritten
   Textzeile („Als Freund einladen") wurde es sichtbar. Drei Anläufe an der falschen Stelle später
   ist die Lehre: Eine geborgte Klasse aus einem anderen Stylesheet ist kein Layout, sondern ein
   Zufall. Verwandt mit `.karte` und `sk-`.

   Ein Flex-Paar, nichts weiter: Text nimmt den Platz, Knöpfe brauchen ihren. `flex-start` hält die
   Knöpfe auf Höhe des Namens – unabhängig davon, ob unter dem Namen eine Zeile steht oder zwei. */
.ms-zeile {
  display: flex;
  align-items: flex-start;
  /* UMBRUCH STATT MEDIA QUERY: Bleiben dem Text weniger als 200 px, rutscht die Knopfgruppe von
     selbst unter ihn. Auf 375 px blieben ihm sonst 136 px, und „HCPI 38,0 · Rot · Damen ·
     gabi@…" brach über vier Zeilen um (gemessen: 158 px Zeilenhöhe).

     Bewusst KEINE `max-width`-Query: Die würde das FENSTER fragen, begrenzend ist aber die
     Spalte. Hier wächst sie zwar mit (`--jg-w-form` ist ein Maximum), doch die Schwelle hinge
     dann an der Breite der Knöpfe – und die ändert sich mit ihrer Beschriftung. `flex-basis`
     fragt genau das Richtige: „ist noch genug Platz für den Text?" Derselbe Denkfehler hat bei
     `.aktionen` in `runde.css` zwei Anläufe gekostet. */
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--jg-line);
}

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

/* ---- JEDE ZEILE IST EINE KARTE, DIE FARBE UNTERSCHEIDET (24.08.2026) ----

   ⚠️ WARUM ALLE UND NICHT NUR DIE MARKIERTEN - der Entwurf davor kippte mit der Datenlage:
   Zuerst bekam nur der reine Mitspieler eine Flaeche, die Freunde blieben rahmenlos. Beim
   Betreiber sieht das gut aus (vier Freunde, ein Ausreisser). LOKAL, wo drei von vier Eintraege
   Notizen sind, stand die EINE rahmenlose Zeile zwischen drei Karten - und las sich prompt wie
   ein unfertiger Eintrag. Im Bild gesehen, nicht bedacht.

   Eine Form fuer alle ist gegen jede Verteilung stabil. Der Unterschied traegt allein die
   Farbe: weiss = Freund, gruen = reine Notiz. Gruen liegt auf dem SELTENEREN und zugleich
   handlungsbeduerftigen Eintrag - nur dort steht „Als Freund einladen".

   ⚠️ `.ms-zeile.ms-nurmitspieler` und NICHT nur `.ms-nurmitspieler`: `.ms-zeile:last-of-type`
   hat zwei Klassen-Gewichte, eine einzelne Klasse haette verloren und die letzte Zeile stuende
   ohne Rand da - im DOM voellig korrekt, nur im Bild falsch.

   Der negative Rand zieht die Karte ueber das Textmass hinaus, damit die Liste nicht schmaler
   wirkt als der Text darueber. */
.ms-zeile {
  border: 1px solid var(--jg-line);
  border-radius: var(--jg-r);
  padding: 12px 10px;
  margin: 6px -10px;
  background: var(--jg-card);
}

.ms-zeile.ms-nurmitspieler {
  background: var(--jg-green-wash);
  border-color: var(--jg-green-rand);
}

/* `.ms-zeile:last-of-type { border-bottom: 0 }` weiter oben stammt aus der Zeit ohne Karten -
   dort trennte die Linie, hier gehoert sie zum Rahmen. Beide Faelle einzeln zuruecksetzen. */
.ms-zeile:last-of-type { border-bottom: 1px solid var(--jg-line); }
.ms-zeile.ms-nurmitspieler:last-of-type { border-bottom: 1px solid var(--jg-green-rand); }

/* Der Hinweis ueber der Liste steht dichter am Kasten als der Einleitungstext darueber - er
   gehoert zur Liste, nicht zur Ueberschrift. */
.ms-hinweis { margin-top: -4px; }

/* `min-width: 0` ist nötig, damit eine lange E-Mail-Adresse die Spalte nicht aufbläht: Ein
   Flex-Element schrumpft ohne das nicht unter seinen Inhalt.
   Die 200 px sind die Umbruchschwelle, nicht die Breite – siehe `flex-wrap` oben. */
.ms-text { flex: 1 1 200px; min-width: 0; }

.ms-text b { display: block; font-size: 15px; font-weight: 500; }

.ms-unter {
  display: block;
  font-size: 13px;
  color: var(--jg-muted);
  /* Lange Adressen umbrechen lassen, statt die Zeile zu sprengen. */
  overflow-wrap: anywhere;
}

/* `margin-left: auto` hält die Knöpfe rechts – auch dann, wenn sie umgebrochen sind und die
   Zeile für sich haben. */
.ms-knoepfe { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; }

/* `.spieler-knoepfe` ist am 02.10.2026 entfallen: Die letzten Listen, die sie trugen (Freunde,
   Einladungen), haben jetzt `.ms-knoepfe` oben. */

/* DAS ✕ DER LISTEN in „Mein Konto“ (Freunde, offene Einladungen, Mitspieler). Die Regel stand bis
   1.16.0 in `runde.css` und ging dort mit dem Umbau der Spielerliste (25.08.2026, jetzt
   `.spieler-weg-kopf`) – `konto.js` benutzt die Klasse aber weiter. Seitdem malte der Browser
   einen grauen Standardknopf mit 13-px-Kreuz (gemessen 02.10.2026). Die Werte sind die damals
   abgenommenen, wörtlich; dazu Schrift und Farbe, weil ein `<button>` beides nicht erbt.
   Gleiche Höhe wie „Bearbeiten“ daneben. Zurückhaltend: grau, rot erst beim Darüberfahren. */
.spieler-weg {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  font-family: var(--jg-font); font-size: 22px; line-height: 1;
  color: var(--jg-muted);
  background: none;
  border: 1px solid var(--jg-line);         /* wie „Bearbeiten“ – das alte `--jg-rand` gibt es nicht mehr */
  border-radius: 10px;
  cursor: pointer;
}
.spieler-weg:hover,
.spieler-weg:focus-visible { color: var(--jg-red); border-color: var(--jg-red-hell); }

.spieler-bearbeiten {
  min-height: 44px;
  padding: 0 12px;
  font-family: var(--jg-font); font-size: 14px; font-weight: 600;
  color: var(--g);
  background: none;
  border: 1px solid var(--jg-line);
  border-radius: 10px;
  cursor: pointer;
}
.spieler-bearbeiten:hover { background: var(--jg-green-tint); border-color: var(--g); }

/* „Als Freund einladen“ (Phase 13) – eine TEXTAKTION unter dem Namen, KEIN dritter Knopf in der
   Reihe. Begründung im Zeichner: Die Spalte ist netto 564 px, drei Knöpfe passen dort nicht
   nebeneinander und hingen aus der Karte heraus.

   Dieselbe Sprache wie die Freigabe-Marke der Runden-Historie: gepunktete Unterlinie für „hier
   passiert etwas“, aber die Zurückhaltung eines Nebentextes – „Bearbeiten“ und „ד bleiben die
   Knöpfe der Zeile. Grün, weil es eine ANGEBOTENE Aktion ist und keine Angabe. */
.ms-einladen {
  display: inline-block;
  margin-top: 4px;
  border: 0;
  padding: 0;
  background: none;
  font-family: var(--jg-font);
  font-size: 13px;
  color: var(--jg-green);
  cursor: pointer;
  border-bottom: 1px dotted var(--jg-green);
}

.ms-einladen:disabled { opacity: .5; cursor: default; }

/* Der Zustand danach: eine Angabe, keine Aktion – deshalb gedeckt und ohne Unterlinie.
   Daneben steht „erneut einladen" (`.ms-einladen`), deshalb `inline` und ein Abstand nach rechts:
   Angabe und Aktion sollen in EINER Zeile stehen, nicht untereinander. */
.ms-eingeladen {
  display: inline;
  font-size: 13px;
  color: var(--jg-muted);
}

.ms-eingeladen + .ms-einladen { margin-left: 8px; }

/* ------------------------------------------------------------------ Aufklappbare Abschnitte

   Dieselbe Bauform wie im Backend (`.aufklapp` in webapp/style.css) – gleiche Klassen, gleiche
   Bedienung. Unterschied: Der Pfeil ist hier ein inline-SVG. Der Icon-Font des Backends wird
   auf den öffentlichen Seiten nicht geladen, ein `<i class="ti …">` bliebe ein leeres Element. */
/* ZART GRÜN HINTERLEGT (17.08.2026, Ansage des Betreibers) – dieselbe Fläche wie „Mein Course
   Handicap" auf der Statusseite. Dort trennt die Farbe zwei Sorten Inhalt: Auskünfte des Clubs
   gegen Funktionen für den Nutzer. Auf „Mein Konto" und „Meine Runde" ist ALLES eine solche
   Funktion – die Farbe sagt hier also nicht „anders als daneben", sondern verbindet die Seiten
   miteinander: Wo diese Fläche liegt, geht es um deine Eingaben und deine Daten.

   `--jg-green-wash` und nicht `--jg-green-tint`: „Mein Konto" hat acht Abschnitte untereinander,
   und der kräftigere Ton wäre dort eine grüne Leiter (die Begründung stand hier schon einmal,
   als es um die Pfeile ging – sie gilt für Flächen genauso).

   Die Klasse setzen `konto.js` und `runde.js` an ihre Karten; die übrigen Seiten mit `konto.css`
   (Anmelden, Passwort, Bestätigen …) haben keine Aufklapper und bleiben davon unberührt. */
.karte.aufklapp {
  padding-top: 0; padding-bottom: 0;
  background: var(--jg-green-wash);
  border-color: var(--jg-green-tint);
}

.aufklapp-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; margin: 0;
  /* 17 px RECHTS, GEMESSEN: Genau so weit sitzen die Pfeile der Auswahlfelder in dieser Karte
     vom Feldrand entfernt (16 px Polster + 1 px Rahmen). Ohne dieses Polster klebte der
     Kartenpfeil am Kopfende und stand damit 17 px weiter außen als jeder Feldpfeil darunter –
     auf „Neue Runde" mit drei Feldern untereinander sofort zu sehen. Karten sind breiter als
     ihr Inhalt; die Pfeile darin gehören trotzdem auf EINE senkrechte Linie. */
  padding: 16px var(--jg-kopf-pfeil) 16px 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--jg-font);
}
.aufklapp-kopf h2 { margin: 0; }

/* Grüner Ring statt grauem Pfeil (17.08.2026) – dieselbe Entscheidung wie im Backend, damit ein
   Aufklapper hier und dort gleich aussieht. Ring und nicht Fläche: „Mein Konto" hat acht
   Abschnitte untereinander; acht grüne Balken wären eine Leiter, die den Blick verschluckt. */
/* SEIT 17.08.2026 GEFÜLLT, nicht mehr nur ein Ring (Ansage des Betreibers: „immer noch zu
   unscheinbar"). Helle Fläche + kräftiger Pfeil ist aus dem Augenwinkel erkennbar, bleibt aber
   in der Hausfarbe und tritt nicht gegen „Speichern" an – deshalb NICHT Orange: das heißt im
   Projekt „Achtung" (Strich-Werte, Empfehlen-Eintrag) und verlöre die Bedeutung. */
/* Die FORM steht zentral in `kopfmenue.css` – hier nur noch, was diese Seite ergänzt. */
.aufklapp-kopf:hover > .aufklapp-pfeil { background: var(--jg-green); border-color: var(--jg-green); color: #fff; }
/* Offen = voll gefüllt: Der Zustand ist damit auch ohne Blick auf den Inhalt ablesbar. Auf dem
   Handy gibt es kein Hover – dort ist das die einzige Rückmeldung. */
/* NUR DER PFEIL IM KOPF, nicht jeder Pfeil in der Karte (17.08.2026). Seit die Auswahlfelder
   denselben Pfeil als ELEMENT tragen, traf dieser Nachfahren-Selektor auch sie: In einer offenen
   Karte standen alle Auswahlfelder mit gefülltem Pfeil nach oben da, obwohl ihre Listen zu waren.
   Ein Zustand, den es nicht gab – und im Code unsichtbar, weil die Regel Jahre lang stimmte. */
.karte.aufklapp.offen > .aufklapp-kopf > .aufklapp-pfeil {
  transform: rotate(180deg);
  background: var(--jg-green); border-color: var(--jg-green); color: #fff;
}

/* Der linke Rand zeigt, welcher Abschnitt gerade offen ist – dieselbe Andeutung wie im
   Backend, aus denselben Tokens. */
.karte.aufklapp.offen { border-left: var(--jg-aufklapp-staerke) solid var(--jg-aufklapp-rand); }

/* DIE KOPFZEILE DES OFFENEN ABSCHNITTS IST GRÜN HINTERLEGT (Ansage des Betreibers, 20.09.2026).
   Der linke Rand darueber allein war ihm zu wenig – er zeigt den offenen Abschnitt erst, wenn
   man ihn sucht.

   ⚠️ DER ALTE EINWAND GEGEN FLÄCHEN GILT HIER NICHT, und das ist der ganze Unterschied: Gegen
   grüne Flächen sprach bisher „acht Abschnitte untereinander wären eine grüne Leiter“ (die
   Begruendung steht beim Pfeil und bei `.karte.aufklapp`, und sie hat 2026 zweimal zu einer
   Rücknahme geführt). Diese Regel färbt aber nie mehr als EINEN Kopf: `zeige()` lässt genau
   einen Abschnitt offen. Wer das je auf mehrere ausweitet, holt sich die Leiter zurück.

   `--jg-green-tint` und nicht `--jg-green-wash`: Der blasse Waschton ist die Fläche, die die
   ruhige Bauform ausdrücklich wieder entfernt hat („warum ist hier nun wieder alles gruen
   hinterlegt?“). Hier soll die Zeile sich abheben, nicht tönen – `tint` ist im Projekt die
   Farbe der AKTIVEN Navigation, und genau das ist ein offener Abschnitt.

   GILT AUCH AUF `runde.html`, das `konto.css` mitlädt und dieselbe Bauform benutzt – gewollt:
   derselbe Zustand sieht überall gleich aus. `.erg-aufklapp` (die Ergebniszeilen der Runde)
   trägt kein `.karte` und bleibt unberührt. */
.karte.aufklapp.offen > .aufklapp-kopf {
  background: var(--jg-green-tint);
  /* Die Fläche bis an beide Kartenränder ziehen und das Polster innen wieder aufschlagen:
     Der Kopf ist ein Kind der Karte und begaenne sonst erst hinter deren Polster – ein
     eingerueckter Farbbalken mit weissen Streifen links und rechts. GEMESSEN wird das Polster
     nicht geraten: Es steht als `--jg-karte-polster` am Kopf dieser Datei und speist auch
     `.karte` selbst (gemessen am 20.09.2026: 20 px, ohne Media Query). */
  padding-left: var(--jg-karte-polster);
  /* ⚠️ RECHTS KOMMT DAS KARTENPOLSTER AUF DEN PFEILABSTAND DRAUF – sonst springt der Pfeil.
     Die Zeile ragt links und rechts um `--jg-karte-polster` über den Karteninnenraum hinaus;
     ein `padding-right` von nur 17 px sässe dann 17 px vom AUSSENrand statt 17 px vom
     Innenrand – also 20 px weiter rechts als bei jedem zugeklappten Abschnitt darunter. Genau
     das hat der Betreiber am 20.09.2026 im Bild gesehen. Mein erster Anlauf hatte hier 17 px
     stehen, und meine Messung auf `runde.html` verglich den offenen Kopf mit sich selbst statt
     mit einem geschlossenen daneben – ein Vergleich, der den Sprung gar nicht zeigen konnte. */
  padding-right: calc(var(--jg-karte-polster) + var(--jg-kopf-pfeil));
  margin-left: calc(var(--jg-karte-polster) * -1);
  margin-right: calc(var(--jg-karte-polster) * -1);
  /* ⚠️ BREITE AUSRECHNEN, NICHT `width: auto`. Der Kopf ist ein `<button>`, und dort bedeutet
     `auto` SHRINK-TO-FIT – genau deshalb steht in der Grundregel `width: 100%`. Mit `auto`
     reichte der grüne Balken nur bis zum Ende der Überschrift (gemessen: 179 statt 433 px).
     `100%` ist die Karteninnenbreite; die beiden Polster kommen wieder drauf. */
  width: calc(100% + var(--jg-karte-polster) * 2);
}

.aufklapp-inhalt { padding-bottom: 18px; }
.aufklapp-inhalt[hidden] { display: none; }

/* Der zweite Weg: gleiche Größe und Breite wie „Anmelden", aber als Umriss. Gleich SICHTBAR,
   nicht gleich LAUT – wer ein Konto hat, soll weiter zuerst den grünen Knopf sehen.
   Vorher stand hier ein unterstrichener 14-px-Textlink; genau daran ist am 08.08.2026 ein neuer
   Nutzer vorbeigelaufen, bis ihn die Login-Bremse aussperrte. */
.knopf-zweit {
  margin-top: 10px;
  color: var(--g); background: none;
  border: 1px solid var(--g);
}
.knopf-zweit:hover { background: var(--jg-green-tint); filter: none; }

/* Der Rettungskasten über dem Formular – ruhig, aber nicht zu übersehen. */
.neu-hinweis {
  margin: 0 0 18px; padding: 14px;
  background: var(--jg-green-tint, #edf7f1);
  border: 1px solid var(--g); border-radius: var(--jg-r-sm);
}
.neu-hinweis p { margin: 0 0 10px; font-size: 14px; line-height: 1.45; }
.neu-hinweis .knopf { margin-top: 0; }

/* Der zweite Weg („Neues Konto anlegen") ÜBER dem Formular, seit 24.08.2026.

   EIGENE KLASSEN, keine geborgten – dieselbe Regel wie bei `.schon-an` unten: `.neu-hinweis`
   sieht ähnlich aus und sagt fast dasselbe, ist aber der Rettungsanker NACH Fehlversuchen. Wer
   eines von beiden umbaut, träfe sonst das andere mit.

   BEWUSST RUHIGER ALS `.neu-hinweis`: Dieser Kasten steht IMMER da. Ein kräftig gerahmter grüner
   Block über dem Anmeldeformular schriee jeden an, der nur seine Zugangsdaten eintippen will.
   Deshalb nur eine leise Fläche ohne Rahmen – der Knopf darin trägt die Aufmerksamkeit. */
.wechsel-box {
  margin: 0 0 18px; padding: 14px;
  background: var(--jg-green-tint, #edf7f1);
  border-radius: var(--jg-r-sm);
}
.wechsel-box-titel { margin: 0 0 10px; font-size: 14px; line-height: 1.45; font-weight: 600; }
.wechsel-box .knopf { margin-top: 0; }

/* „Du bist bereits angemeldet" über dem Formular (15.08.2026).

   EIGENE KLASSEN, keine geborgten: `.neu-hinweis` darüber sieht ähnlich aus, sagt aber das
   Gegenteil („noch kein Konto?") – und wer eines von beiden umbaut, träfe sonst das andere mit.
   Deshalb auch die kräftigere Fläche: Dieser Kasten ist die Antwort auf die Frage, mit der
   jemand hergekommen ist, und nicht ein Angebot am Rand.

   Die Knöpfe stehen UNTEREINANDER in voller Breite – `.knopf` bringt das mit, hier braucht es
   nur die Anpassung für das `<a>`, das als Knopf auftritt (Blockelemente zentrieren ihren Text
   nicht von selbst). Bewusst keine Media Query: Begrenzend ist die Formularspalte, nicht das
   Fenster. */
.schon-an {
  margin: 0 0 18px; padding: 16px;
  background: var(--jg-green-wash);
  border: 1px solid var(--g); border-radius: var(--jg-r-sm);
}
.schon-an[hidden] { display: none; }
.schon-an-titel { margin: 0 0 6px; font-size: 16px; font-weight: 600; color: var(--text); }
.schon-an-text { margin: 0 0 12px; font-size: 14px; line-height: 1.45; color: var(--text); }
.schon-an .knopf { margin-top: 0; }
.schon-an .knopf-zweit { margin-top: 10px; }
.schon-an a.knopf { text-align: center; text-decoration: none; }
/* Der leise dritte Weg – Abstand nach oben kleiner als der Standard der `.wechsel`-Zeile,
   sonst fällt der Kasten unten auseinander. */
.schon-an .wechsel { margin-top: 12px; }

/* Die Eingabespalte in den breiten Karten (siehe `.wrap` oben).

   ES WIRD DER KARTENINHALT BEGRENZT, NICHT JEDES EINZELNE ELEMENT. Eine Aufzählung aller
   Formularbausteine wäre eine Liste, die beim nächsten neuen Feld unvollständig ist – und der
   Fehler wäre lautlos: ein Eingabefeld über die volle Breite sieht nicht kaputt aus, nur falsch.
   `.aufklapp-inhalt` ist der Behälter, in den `akkordeon()` alles unter der Überschrift schiebt;
   `[data-fest]` deckt „Konto löschen" ab, das keiner ist.

   AUSNAHMEN stehen darunter: Was Breite braucht, holt sie sich ausdrücklich zurück. */
body[data-seite="mein"] .aufklapp-inhalt,
body[data-seite="mein"] .karte[data-fest] > *:not(h2) {
  max-width: var(--jg-w-form);
}

/* Listen und Tabellen dürfen die ganze Karte nutzen – für sie ist die Seite breit geworden.

   DAS BAND GEHÖRT AUSDRÜCKLICH DAZU: Es trennt zwei Gruppen INNERHALB der Karte und arbeitet
   dafür mit negativen Seitenrändern gegen die Kartenpolsterung. Endete das Grau schon bei
   600 px, wäre es ein Etikett mitten in der Karte statt einer Trennung – genau der Fehler, den
   die Regel in `kopfmenue.css` beschreibt. */
body[data-seite="mein"] .aufklapp-inhalt .ms-liste,
body[data-seite="mein"] .aufklapp-inhalt .jg-band,
body[data-seite="mein"] .aufklapp-inhalt .jg-tab,
body[data-seite="mein"] .aufklapp-inhalt .karte-tabelle-huelle {
  max-width: none;
}

/* „Weiterempfehlen" (1.9.0) – Textvorlage plus die drei Wege vom Gerät des Nutzers.

   Das Textfeld ist ausdrücklich änderbar: Jeder formuliert anders, und eine Empfehlung im
   Wortlaut eines Fremden verschickt niemand. 16 px, sonst zoomt iOS beim Antippen. */
.empf-text {
  display: block; width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--linie); border-radius: var(--jg-r-sm);
  font-family: var(--jg-font); font-size: 16px; line-height: 1.5; color: var(--text);
  resize: vertical;
}
.empf-text:focus { outline: 2px solid var(--g); outline-offset: 1px; border-color: var(--g); }

/* Die Wege UNTEREINANDER und in voller Breite – ohne Media Query. Begrenzend ist die
   Formularspalte, nicht das Fenster (die Regel steht in der UI-Liste von CLAUDE.md). */
.empf-wege { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.empf-wege .knopf { margin-top: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.empf-wege .knopf svg { width: 18px; height: 18px; flex: none; }

.knopf-gefahr { background: var(--rot); margin-top: 4px; }
.knopf-still { background: none; color: var(--grau); border: 1px solid var(--linie); margin-top: 8px; }

.nebenweg button {
  border: 0; background: none; padding: 0;
  color: var(--grau); font-family: var(--jg-font); font-size: 13px;
  cursor: pointer; text-decoration: underline;
}

/* „Abmelden" im Fuß sieht aus wie die anderen Fuß-Links (es ist ein <button>, damit es
   wirklich eine Aktion ist und kein Ziel). Gleiche Stelle, gleiche Optik wie „Anmelden"
   und „Mein Konto" – dieselbe Sorte Aktion gehört überall an denselben Platz. */
/* `.jg-konto-wer` und `.jg-abmelden-fuss` standen bis 1.0.46 hier. Sie sind nach
   `kopfmenue.css` gewandert, weil der Name des Angemeldeten seither auf JEDER Seite im Fuß
   steht – auch auf Impressum und Datenschutz, die diese Datei nicht laden. */

/* Weiteren Club abonnieren – steht unter den Club-Blöcken, abgesetzt durch eine Linie.
   Der untere Abstand MUSS mit: `.feld` bringt 16px mit, und die Kurzschreibweise `margin`
   hätte sie stillschweigend auf 0 gesetzt – dann klebt der Speichern-Knopf am Feld. */
.abo-hinzu { border-top: 1px solid var(--linie); padding-top: 16px; margin: 18px 0 16px; }

/* „Entfernen" je Club: bewusst klein und grau. Es ist der seltene Fall, und ein auffälliger
   Knopf neben jedem Club würde die Liste unruhig machen. */
.abo-club-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.abo-entfernen {
  border: 0; background: none; padding: 0;
  color: var(--grau); font-family: var(--jg-font); font-size: 13px;
  cursor: pointer; text-decoration: underline; white-space: nowrap;
}
.abo-entfernen:hover { color: var(--rot); }

/* Beschriftung über einem cselect – ein <label for> geht dort nicht, weil das Widget kein
   natives Feld ist. Und ein <label> DARUM wäre ein Fehler: Es reicht jeden Klick in seinem
   Inneren an das erste Bedienelement weiter, wodurch sich die Optionsliste sofort wieder
   öffnet (genau dieser Fehler steckte 2026 im Ansichts-Umschalter des Backends). */
.feld-label { display: block; font-size: 14px; font-weight: 600; margin: 0 0 5px; }

/* Ergebniszeile des Course Handicap (Phase 10). Abgesetzt wie ein Ergebnis, nicht wie ein
   weiteres Eingabefeld: gruener Anstrich, eine Zeile.
   `[hidden]` ausdruecklich – das Attribut verliert sonst gegen `display: block` (siehe Kopf
   dieser Datei, `[hidden] { display: none !important; }` faengt genau das ab). */
.hcp-erg {
  display: block; margin: 0 0 16px; padding: 10px 12px;
  background: var(--jg-green-wash); border-radius: var(--jg-r-sm);
  font-size: 15px; color: var(--text);
}
.hcp-erg b { font-weight: 600; }
.hcp-erg .hcp-platz { display: block; font-size: 13px; color: var(--grau); margin-top: 6px; }

/* --- Angemeldete Geräte (1.0.42) ---------------------------------------------------------
   Eine Zeile je Sitzung: links Gerät und Zeitpunkt, rechts der Knopf. Bewusst KEINE Tabelle –
   auf dem Telefon müsste sie scrollen, und der Grundsatz lautet: keine Tabelle scrollt je
   waagerecht. */
.geraet {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--linie);
}
.geraet:last-child { border-bottom: 0; }
/* Ohne `min-width: 0` schrumpft die Textspalte in einer Flex-Zeile nicht und drückt den Knopf
   aus dem Kasten – lange Gerätenamen brechen dann nicht um. */
.geraet-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.geraet-name { font-weight: 600; overflow-wrap: anywhere; }
.geraet-zeit { font-size: 13px; color: var(--grau); }
/* Die eigene Sitzung leicht hervorgehoben – sie ist der Bezugspunkt beim Durchsehen. */
.geraet-aktuell .geraet-name { color: var(--g); }
.geraet-beenden { margin-top: 0; flex: none; padding: 8px 14px; font-size: 14px; }

/* --- „Auch aufs Handy" (Phase 7) ---------------------------------------------------------
   Abgesetzt unter der Zustandsauswahl: Es geht um den KANAL, nicht um den Inhalt. Die dünne
   Linie darüber macht diesen Unterschied sichtbar, ohne einen zweiten Kasten zu brauchen. */
.haken-push { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linie); }
/* Der Satz, der einen abgeschalteten Schalter erklärt – ein Schalter, der beim Antippen nichts
   tut, ist schlimmer als keiner. */
.haken-hinweis { display: block; font-size: 13px; color: var(--grau); margin-left: 26px; }
.haken-push input:disabled + span { color: var(--grau); }

/* --- Phase 17: „Meine Anmeldungen" -------------------------------------------------------
 *
 * EIGENE KLASSEN (`anm-eintrag-*`), nicht die des Anmeldebereichs aus `turniere.css`: Diese
 * Seite lädt `turniere.css` gar nicht, und eine geborgte Klasse aus einem anderen Stylesheet
 * ist kein Layout, sondern ein Zufall.
 *
 * Die Knopfgruppe bricht über `flex-basis` um, nicht über eine Media Query: Begrenzend ist die
 * Spalte, nicht das Fenster.
 */
.anm-eintrag {
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  padding: 12px 0; border-bottom: 1px solid var(--jg-line, #e6ece8);
}
.anm-eintrag:last-child { border-bottom: none; }
.anm-eintrag-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; min-width: 0; }
.anm-eintrag-titel { font-size: 15px; font-weight: 600; color: var(--jg-ink); }
.anm-eintrag-fein { font-size: 13px; color: var(--jg-muted); }
.anm-eintrag-warn { font-size: 13px; color: var(--jg-orange, #a34d0b); }
/* 1.24.0: „Vom Club bestätigt“ – dieselbe Größe wie die Nachbarn, grün und kräftig. */
.anm-eintrag-ok { font-size: 13px; font-weight: 600; color: var(--jg-green); }
.anm-eintrag-test { font-size: 13px; font-weight: 600; color: var(--jg-orange, #a34d0b); }
/* ⚠️ HIER STAND NUR `flex: 0 0 auto` – UND DARÜBER EIN VERSPRECHEN („rote Schrift, keine
   Fläche, nur Textbreite“), das nie gebaut war. Der Knopf trug im Markup `knopf-still` OHNE die
   Basisklasse `knopf`; von `.knopf-still` kommen aber nur Farbe, Rahmen und ein `margin-top`.
   Ohne Polster, Schriftgrösse und Ecken stand dort ein grauer Kasten neben dem Titel – Befund
   des Betreibers im Bild, 20.09.2026. Ein Kommentar ist eben kein Befund.

   DIE WERTE SIND WÖRTLICH VON `.abo-entfernen` (oben in dieser Datei) übernommen, dem
   „Entfernen“ je Club: derselbe Fall, dieselbe Seite, dort abgenommen. Dessen Begründung gilt
   hier genauso – „bewusst klein und grau“, weil ein auffälliger Knopf neben JEDER Zeile die
   Liste unruhig machte. Rot erst beim Überfahren, so wie dort. */
.anm-eintrag-ab {
  flex: 0 0 auto;
  border: 0; background: none; padding: 0; margin: 0;
  color: var(--grau); font-family: var(--jg-font); font-size: 13px;
  cursor: pointer; text-decoration: underline; white-space: nowrap;
}
.anm-eintrag-ab:hover { color: var(--rot); }

/* „Meine Anmeldungen": eine Karte je Vorgang, darin eine Zeile je Person (1.14.2). EIGENE
 * Klassen, keine geborgten – `.anm-eintrag` ist die Karte selbst und hat andere Abstaende. */
.anm-gruppe-personen { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 8px; }
.anm-gruppe-zeile {
  display: flex; align-items: center; gap: 10px;
  padding-top: 6px; border-top: 1px solid var(--jg-line, #e6ebe8);
}
.anm-gruppe-name { flex: 1 1 auto; font-size: 14px; color: var(--jg-ink); }
.anm-gruppe-zeile .anm-eintrag-ab { flex: 0 0 auto; }
.anm-gruppe { flex-wrap: wrap; }

/* ---- BEGRUESSUNG NACH DER KONTOBESTAETIGUNG (24.08.2026) ----
   Der Kasten stand bis dahin NUR auf der Statusseite (`index.html`, dort inline). Seit dem
   Zielwechsel landet der frisch bestaetigte Nutzer hier auf „Mein Konto", also braucht diese
   Seite die Regeln.

   ⚠️ ZWILLING: Dieselben Regeln stehen weiterhin inline in `index.html`. Sie laufen dort nach
   dem Zielwechsel nicht mehr an (`?willkommen=1` entsteht nur noch mit Ziel `konto-mein.html`),
   bleiben aber vorerst stehen - Ansage des Betreibers, damit der Rueckweg billig bleibt. Wer
   hier etwas aendert und den Rueckweg offenhalten will, aendert dort mit.

   Die kurzen Namen (`--g`, `--grau`, `--karte`) stehen zentral in `tokens.css` und nicht in der
   jeweiligen Seite - das CSS ist deshalb woertlich uebernommen. */
.willkommen {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  margin-bottom: 20px;
  /* Rechts mehr Polsterung: Dort sitzt das ✕, und der Text darf nicht darunterlaufen. */
  padding: 16px 52px 16px 18px;
  background: var(--jg-green-wash);
  border: 1px solid var(--g);
  border-radius: 12px;
}
.willkommen[hidden] { display: none; }
.wk-titel { margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }
/* Zeilenlänge begrenzt – auf dem Desktop liefe der Satz sonst über die volle Seitenbreite. */
.wk-text { margin: 0; max-width: 46em; font-size: 14px; line-height: 1.5; color: var(--text); }
.wk-cta {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 4px; padding: var(--jg-btn-pad);
  background: var(--g); color: #fff; border-radius: var(--jg-r-sm);
  font-size: var(--jg-btn-fs); font-weight: 600; text-decoration: none;
}
.wk-cta:hover { background: var(--jg-green-dark); }
/* Ausblenden ist eine Aktion, kein Wert – also ein Knopf (gleiche Regel wie beim
   Betreiber-Hinweis). Leise gehalten: Er ist der Ausweg, nicht das Angebot. */
.wk-weg {
  position: absolute; top: 8px; right: 8px;
  width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 50%;
  color: var(--grau); cursor: pointer;
}
.wk-weg:hover { background: var(--karte); color: var(--text); }
.wk-weg svg { width: 17px; height: 17px; }
/* Auf Touch die vollen 44 px – am Zeigergerät festgemacht, nicht an der Fensterbreite. */
@media (pointer: coarse) {
  .wk-weg { width: 44px; height: 44px; top: 4px; right: 4px; }
  .wk-cta { min-height: 44px; }
}

/* ⚠️ 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. */
.aufklapp-kopf { color: var(--jg-ink, #15211c); }

/* „WARUM EIN KONTO?“ unter dem Knopf „Konto anlegen“ (02.10.2026). Zu steht die Kurzfassung in der
   Zeile, aufgeklappt die Erklärung. Dieselbe Bauform wie der Merke-Kasten der Anleitung: grüner
   Rand links, sehr helle grüne Fläche – eine Erklärung, kein Warnhinweis.
   ⚠️ DIESELBE BAUFORM STEHT IN `werbung.css` (`.wb .konto-warum`), weil die Werbeseiten und die
   Anleitung diese Datei nicht laden. Wer hier etwas ändert, zieht dort nach. */
.konto-warum {
  margin-top: 18px;
  padding: 12px 16px;
  font-size: 15px;
  line-height: 1.55;
  text-align: left;
  color: var(--jg-ink);
  background: var(--jg-green-faint);
  border-left: 3px solid var(--jg-green);
  border-radius: 8px;
}
.konto-warum summary { cursor: pointer; list-style: none; }
.konto-warum summary::-webkit-details-marker { display: none; }
.konto-warum-mehr {
  white-space: nowrap;
  font-weight: 600;
  color: var(--jg-green);
  text-decoration: underline;
}
.konto-warum[open] .konto-warum-mehr { display: none; }
.konto-warum p { margin: 10px 0 0; }
.konto-warum ul { margin: 8px 0 0; padding-left: 20px; }
.konto-warum li { margin-top: 4px; }
.konto-warum li::marker { color: var(--jg-green); }
.konto-warum a { font-weight: 600; color: var(--jg-green); }   /* sonst Browser-Blau (gemessen) */