/* JETZT.GOLF – gemeinsame Bausteine der öffentlichen Seiten: Kopfleiste mit Clubname und
   Menü (siehe kopfmenue.js) sowie der „Zurück"-Knopf am Seitenende.
   Werte aus tokens.css; hier keine eigenen Farben hart codieren.

   Die Flex-Ausrichtung der Kopfleiste steht bewusst HIER und nicht in den Seiten selbst:
   sonst müsste dieselbe Regel in jeder Seite gepflegt werden. Breite, Innenabstand und
   Hintergrund der Leiste bleiben Sache der jeweiligen Seite. */
/* DIE KOPFLEISTE KLEBT OBEN (Ansage des Betreibers, 08.08.2026): Das Menü ist auf jeder Seite
   der Weg zurück – auf der Runde-Seite mit ihrer langen Auswertung war es nach dem Scrollen weg,
   und der Ausweg aus einer Ansicht darf nie erst ein Zurückscrollen kosten.

   Steht HIER und nicht in den Seiten: `.sitebar` wird in jeder öffentlichen Seite einzeln
   eingefärbt (Hintergrund, Rahmen), aber `kopfmenue.css` laden sie alle. Eine Regel statt zwölf.

   Bauform wie die `.topbar` des Backends (`webapp/style.css`) – wer zwischen Verwaltung und
   öffentlichen Seiten wechselt, soll dasselbe Verhalten vorfinden.

   z-index 50: über dem Seiteninhalt und über der Auswahlliste des `cselect` (20), aber UNTER den
   Overlays der Runde (60 Zahlenblock, 70 Bildansicht). Ein Dialog, den die Kopfleiste
   durchschneidet, sähe kaputt aus. */
.sitebar {
  position: sticky;
  top: 0;
  z-index: 50;
}

.sitebar-inner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 20px;
}

/* Aktueller Club, direkt neben dem Logo – grün und fett, damit auf jeder Unterseite ohne
   Nachdenken klar ist, um wessen Platz es geht. Seit 1.0.43 ein LINK zurück zum Status:
   Der Name ist das, worauf man intuitiv klickt, um „nach Hause" zu kommen. Deshalb ohne
   Unterstreichung – er soll aussehen wie vorher, nur klickbar sein. */
/* SO GROSS WIE DAS LOGO (18 px, Ansage des Betreibers vom 16.08.2026) – Marke und Club stehen
   nebeneinander und sollen gleich viel wiegen.

   GEMESSEN, BEVOR ES GEÄNDERT WURDE: Von den 735 bekannten Clubs passen bei 16 px zwölf nicht in
   die 438 px neben Logo, Menü und Chip; bei 18 px sind es 29. **Von den 38 öffentlichen sind es
   in BEIDEN Fällen dieselben sechs** – die Bad-Griesbach-Resorts mit bis zu 68 Zeichen
   („Quellness & Golf Resort Bad Griesbach, St. Wolfgang Golfplatz Uttlau"). Bei ihnen rutscht das
   Menü in die zweite Zeile und die Leiste wächst von 67 auf 103 px – das tut sie heute schon,
   die Schriftgröße ändert daran nichts.

   AUF DEM HANDY BLEIBT ES BEI 15 px (Media Query weiter unten): Dort wird nicht umgebrochen,
   sondern abgeschnitten, und 18 px hätten aus sechs abgeschnittenen Namen zehn gemacht – ohne
   Gewinn, denn dort steht der Name ohnehin in einer eigenen Zeile. */
.kopf-club {
  font-size: 18px; font-weight: 700; color: var(--jg-green);
  min-width: 0; overflow-wrap: anywhere;
  text-decoration: none;
}
.kopf-club:hover { text-decoration: underline; }

.kopfnav {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 20px;
  margin-left: auto;                /* rechtsbündig, Clubname bleibt links am Logo */
}
.kopfnav a {
  font-size: 14px; font-weight: 600; color: var(--jg-muted); text-decoration: none;
  padding: 2px 0; white-space: nowrap;
}
.kopfnav a:hover { color: var(--jg-green); }
/* Aktuelle Seite: erkennbar, aber weiter anklickbar (kürzester Weg zurück nach oben). */
.kopfnav a.aktiv { color: var(--jg-green); }

/* Angemeldet: Name + „Abmelden" ganz rechts in der Kopfleiste – dieselbe Anordnung wie im
   Backend, damit dieselbe Aktion überall gleich aussieht (siehe vorschau.js).
   `order` statt DOM-Reihenfolge: kopfmenue.js hängt das Menü bei jedem Clubwechsel neu an,
   der Konto-Bereich bliebe sonst mal links, mal rechts davon stehen. */
.jg-konto {
  order: 1; margin-left: 12px;
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
}
.jg-konto-name { font-size: 14px; font-weight: 600; color: var(--jg-ink); }
/* Nur das Symbol, wie im Backend – die Beschriftung steckt in title/aria-label. */
.jg-abmelden {
  display: inline-flex; align-items: center;
  background: none; border: none; padding: 2px; cursor: pointer;
  color: var(--jg-muted);
}
.jg-abmelden svg { width: 20px; height: 20px; flex: none; }
.jg-abmelden:hover { color: var(--jg-green); }

/* Nicht angemeldet: „Anmelden" unten rechts im Fuß. Für den Golfer, der nur den Platzstatus
   sehen will, ist die Anmeldung Nebensache – deshalb bewusst nicht im Kopf.

   Die frühere Sonderregel `.powered ~ .jg-anmelden` ist mit dem Markenfuß entfallen: Seit
   „Powered by JETZT.GOLF" ganz unten in der eigenen grünen Leiste steht, tragen die Fußzeilen
   aller Seiten dieselben Elemente, und ein einzelnes `auto` genügt. */
.jg-anmelden { margin-left: auto; }

/* Name des Angemeldeten, direkt links vor „Abmelden" bzw. „Mein Konto".

   Diese Regeln standen bis 1.0.46 in `konto.css`. Sie gehören hierher, seit der Name auf JEDER
   Seite steht: Impressum und Datenschutz laden `konto.css` nicht, dort wäre er sonst
   unformatiert erschienen. `kopfmenue.css` lädt dagegen jede öffentliche Seite.

   Das `margin-left: auto` schiebt die Gruppe nach rechts – und es darf **nur EINMAL** vorkommen.
   Trägt auch der Nachbar ein `auto` (das bringt `.jg-anmelden` mit), verteilt Flexbox den freien
   Platz ZWISCHEN beiden, und der Name steht mitten in der Fußzeile statt daneben. Deshalb nimmt
   der Name das `auto` und der folgende Link/Knopf gibt seines ab. */
.jg-konto-wer { color: var(--grau); font-size: 14px; margin-right: 14px; margin-left: auto; }
.jg-konto-wer ~ .jg-anmelden,
.jg-konto-wer ~ .jg-abmelden-fuss { margin-left: 0; }

.jg-abmelden-fuss {
  border: 0; background: none; padding: 0;
  color: var(--grau); font-family: var(--jg-font); font-size: 14px;
  cursor: pointer; text-decoration: none;
}
.jg-abmelden-fuss:hover { color: var(--text); text-decoration: underline; }

@media (max-width: 560px) {
  .jg-konto { margin-left: 0; }
}

/* Hinweisband über der Seite: Dieser Club ist nur in der Vorschau sichtbar. Deutlich genug,
   dass es auffällt – ohne den Eindruck einer Fehlermeldung (es ist ja alles in Ordnung). */
.jg-vorschau-band {
  padding: 9px 16px; text-align: center;
  font-size: 14px; font-weight: 600; line-height: 1.35;
  color: var(--jg-amber); background: var(--jg-orange-tint);
  border-bottom: 1px solid var(--jg-orange-rand);
}

/* „Zurück"-Knopf am Seitenende. Jede Seite mit einem „Zurück zu …" oben hat unten denselben
   Weg als Knopf – wer unten angekommen ist, soll nicht erst wieder hochscrollen müssen.
   Gleiches Ziel, gleiche Beschriftung, gleiche Stelle auf allen Seiten. */
.zurueck-unten {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 28px; padding: 11px 20px;
  font-size: 15px; font-weight: 600; text-decoration: none;
  color: var(--jg-green); background: var(--jg-card);
  border: 1px solid var(--jg-green); border-radius: var(--jg-r-sm);
}
.zurueck-unten:hover { background: var(--jg-green-tint); }

/* ------------------------------------------------------------------ TABELLEN (1.4.34)

   EIN Erscheinungsbild für alle Tabellen der öffentlichen Seiten – Ansage des Betreibers vom
   09.08.2026: „die Tabelle machen wir schöner, wie z. B. die Tabelle bei Scorekarte. Überhaupt
   soll das für alle Tabellen gelten."

   Vorher gab es drei Fassungen an drei Orten: die Scorekarte und die Platzdaten im `<style>`-Block
   von `club.html`, die Auswertung in `runde.css`. Drei Fassungen heißt: Die nächste Änderung
   trifft zwei davon, und die dritte fällt Monaten später auf.

   Hier steht die Grundform, weil `kopfmenue.css` die einzige Datei ist, die JEDE öffentliche
   Seite lädt (sie trägt schon den Zurück-Knopf und das Vorschau-Band). Besonderheiten wie das
   grüne Lochband der Scorekarte bleiben bei der jeweiligen Tabelle – sie sind ihr Eigenes, nicht
   die Regel.

   ZAHLEN MITTIG, die erste Spalte links: Eine Tabelle aus kurzen Zahlen unterschiedlicher Länge
   (3 gegen 15, 137 m gegen 544 m) steht linksbündig optisch schief; mittig liegt jeder Wert
   unter seiner Überschrift. Die erste Spalte ist die Beschriftung der Zeile und bleibt links. */
.jg-tab {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.jg-tab thead th {
  padding: 8px 12px;
  font-weight: 600;
  color: #fff;
  background: var(--jg-green);
  text-align: center;
  white-space: nowrap;
}

.jg-tab thead th:first-child { text-align: left; }

.jg-tab td {
  padding: 7px 12px;
  text-align: center;
}

.jg-tab td:first-child { text-align: left; }

/* Zebra statt Trennlinien: Bei achtzehn Zeilen führt die getönte Fläche das Auge sicherer über
   die Zeile als ein Strich – und sie kostet keine zusätzliche Höhe. */
.jg-tab tbody tr:nth-child(even) { background: var(--jg-green-faint, #f6f9f7); }

/* Die Summenzeile ist abgesetzt, nicht nur fett: „Gesamt 72" gehört sichtbar nicht mehr zu den
   Einzelwerten darüber. */
.jg-tab tfoot td {
  border-top: 2px solid var(--jg-line);
  font-weight: 600;
  padding-top: 8px;
}

/* Umschlag für breite Tabellen: Sie scrollt in sich, statt die Seite zu dehnen. */
.jg-tab-huelle { overflow-x: auto; }

/* ------------------------------------------------------------------ Konto im Kopf (1.4.23)

   Chip mit Initialen und Namen, dahinter ein Klappmenü – Vorbild PC CADDIE, Ansage des
   Betreibers vom 08.08.2026. Vorher lagen diese Wege im Fuß; dort sucht sie niemand.

   `position: relative` am Container ist Bedingung für das Menü darunter: Es hängt `absolute`
   daran. Ohne diese Zeile würde es sich am nächsten positionierten Vorfahren ausrichten – und
   das ist die klebende Kopfleiste, also die ganze Seitenbreite. */
.jg-konto { position: relative; margin-left: 14px; }

.jg-konto-knopf {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px 5px 5px;
  background: none; border: 1px solid transparent; border-radius: 999px;
  font-family: var(--jg-font); cursor: pointer;
}
.jg-konto-knopf:hover { background: var(--jg-green-tint); border-color: var(--jg-line); }
.jg-konto-knopf svg { width: 16px; height: 16px; color: var(--jg-muted); }

/* Am Rechner der Pfeil (Menü klappt unter dem Chip auf), auf dem Handy die drei Striche
   (der Chip IST dort der Hamburger). Nie beide. */
.jg-chip-striche { display: none; }

/* Die Initialen im grünen Kreis – das wiedererkennbare Zeichen „ich bin angemeldet". */
.jg-initialen {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: none;
  font-size: 12px; font-weight: 700; color: #fff;
  background: var(--jg-green); border-radius: 50%;
}

.jg-konto-liste {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  min-width: 220px; padding: 6px;
  background: var(--jg-card, #fff);
  border: 1px solid var(--jg-line); border-radius: var(--jg-r-sm);
  box-shadow: 0 10px 24px rgba(20, 34, 28, .14);
  display: flex; flex-direction: column;
}
.jg-konto-liste[hidden] { display: none; }

.jg-konto-eintrag {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 10px; width: 100%;
  font-family: var(--jg-font); font-size: 15px; font-weight: 600; text-align: left;
  color: var(--jg-ink); text-decoration: none;
  background: none; border: 0; border-radius: 8px; cursor: pointer;
}
.jg-konto-eintrag:hover { background: var(--jg-green-tint); color: var(--jg-green); }
.jg-konto-eintrag svg { width: 18px; height: 18px; flex: none; }

/* „WEITEREMPFEHLEN" IST HERVORGEHOBEN (Ansage des Betreibers, 16.08.2026) – der einzige Eintrag
   im Konto-Menü, der nicht der eigenen Verwaltung dient. Er steht zuletzt, direkt über
   „Abmelden", und muss dort auffallen, ohne zu schreien.

   ORANGE ALS FLÄCHE, NICHT ALS SCHRIFT: `--jg-orange-tint` ist eine sehr helle Fläche,
   `--jg-orange` die dazu geprüfte Textfarbe. Andersherum – oranger Text auf Weiß – wäre genau
   der Fehler, vor dem die Warnung an den Tokens steht ([[design-werte-als-token]]).
   Der linke Balken statt eines vollen Rahmens: Er hebt die Zeile heraus, ohne dass sie wie ein
   Knopf aussieht – die Nachbarn sind ja auch Links. */
.jg-konto-eintrag.hervor {
  background: var(--jg-orange-tint);
  color: var(--jg-orange);
  box-shadow: inset 3px 0 0 var(--jg-orange);
}
.jg-konto-eintrag.hervor:hover {
  background: var(--jg-orange-rand);
  color: var(--jg-orange);
}

/* Im Klappkasten laufen die Einträge randlos – dort trägt die Hervorhebung ihre eigene
   Polsterung, sonst klebte die Fläche am linken Bildschirmrand. */
.jg-konto-liste.im-menue .jg-konto-eintrag.hervor {
  padding-left: 10px; padding-right: 10px; border-radius: 8px;
}

/* Trennstrich zwischen den Gruppen des Konto-Menüs („Mein Konto" – seine Abschnitte –
   „Abmelden"). Ein eigenes Element und kein `border-top` am Nachbarn: Die Gruppen wachsen und
   schrumpfen je nach Anmeldelage, und ein Rahmen am Nachbarn stünde dann mal am richtigen, mal
   am falschen Eintrag. */
.jg-konto-trenner {
  display: block; height: 1px; margin: 6px 10px;
  background: var(--jg-line);
}

/* Der Handicap-Index: eine ANGABE, kein Eintrag – deshalb ohne Hover und ohne Zeigefinger.
   Eine Zeile, die aussieht wie ein Menüpunkt und keiner ist, führt jeden einmal in die Irre. */
.jg-konto-info {
  padding: 8px 10px; margin-bottom: 2px;
  font-size: 13px; color: var(--jg-muted);
  border-bottom: 1px solid var(--jg-line);
}

/* Nicht angemeldet: SCHLICHTER TEXT GANZ RECHTS, wie „Login" bei PC CADDIE (Vorbild des
   Betreibers). Erst als umrandeter Knopf gebaut und links neben dem Clubnamen gelandet – beides
   falsch: Er ist ein Menüpunkt wie „Status" oder „Club", kein Aufruf zur Tat. */
.jg-login {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 20px; padding: 2px 0;
  font-size: 14px; font-weight: 600; text-decoration: none;
  color: var(--jg-green); background: none; border: 0;
}
.jg-login:hover { text-decoration: underline; }
.jg-login svg { width: 17px; height: 17px; }

/* DIE REIHENFOLGE STEHT IM CSS, NICHT IM DOM. Konto und Menü entstehen in zwei verschiedenen
   Skripten (`vorschau.js` und `kopfmenue.js`) und zu verschiedenen Zeitpunkten – wer zuerst
   fertig ist, stünde sonst weiter links. Genau so landete „Anmelden" neben dem Clubnamen statt
   am rechten Rand. Mit `order` ist die Position unabhängig davon, wer zuerst fertig wird. */
.sitebar-inner > .brand { order: 0; }
.sitebar-inner > .kopf-club { order: 1; }
.sitebar-inner > .kopfnav { order: 2; }
.sitebar-inner > .jg-login,
.sitebar-inner > .jg-konto { order: 3; }

/* Der Hamburger-Knopf. Am Rechner gibt es ihn nicht – dort ist für das ganze Menü Platz. */
.jg-burger {
  display: none;
  align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  color: var(--jg-ink); background: none;
  border: 1px solid var(--jg-line); border-radius: var(--jg-r-sm);
  cursor: pointer;
}
.jg-burger svg { width: 22px; height: 22px; }
.jg-burger:hover { background: var(--jg-green-tint); }

/* HANDY: drei feste Plätze statt Umbruch nach Gutdünken (Ansage des Betreibers, 08.08.2026).

     Zeile 1   Logo ........................... Hamburger
     Zeile 2   Clubname ....................... angemeldet als …
     Zeile 3   das Menü, nur wenn aufgeklappt

   Ein Grid und kein `flex-wrap`, weil die Plätze sonst davon abhängen, wie lang der Clubname
   gerade ist – bei „Golf- und Landclub Bayerwald e. V." sah die Leiste anders aus als bei
   „Golfclub Gäuboden". Fehlt ein Element (kein Club, nicht angemeldet), entsteht seine Zeile
   erst gar nicht.

   DER CLUBNAME BRICHT NICHT UM: eine Zeile, bei Bedarf mit „…" gekürzt. Er ist die Überschrift
   der Seite, kein Fließtext – zweizeilig schob er das Menü nach unten und die Leiste wuchs bei
   jedem Club anders. `minmax(0, 1fr)` in der Spalte ist dafür Bedingung: Ohne die 0 als Minimum
   nimmt eine Grid-Spalte die volle Textbreite an, und `text-overflow` greift nie. */
@media (max-width: 560px) {
  /* Zwei Zeilen sind höher als eine – und der Knopf ist höher als das Logo. GEMESSEN: ohne
     diesen engeren Rand wäre die Leiste 92 px hoch geworden, gegen 83 px vorher, obwohl das
     Menü jetzt zugeklappt ist. Ausgerechnet der Umbau für mehr Platz hätte also welchen
     gekostet. Mit 8 px oben und unten sind es wieder 83 px – bei nun beliebig vielen
     Menüeinträgen, denn die kosten zugeklappt gar nichts mehr.

     Der Selektor ist absichtlich zweiteilig: `padding` steht im `<style>`-Block JEDER Seite,
     und der steht dort mal vor, mal nach diesem Stylesheet. Bei gleicher Spezifität entschiede
     die Ladereihenfolge – also je Seite anders. */
  .sitebar .sitebar-inner { padding-top: 8px; padding-bottom: 8px; }

  /* DREI Spalten, nicht zwei: Logo | Konto | Hamburger. Mit nur zwei Spalten landeten Chip und
     Hamburger in DERSELBEN Zelle und lagen exakt übereinander – im DOM waren beide brav da, erst
     die gemessenen Rechtecke zeigten es (beide bei x = 273). */
  .sitebar-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 4px 10px;
  }

  .brand { grid-column: 1; grid-row: 1; }
  .jg-burger { display: inline-flex; grid-column: 3; grid-row: 1; }

  .kopf-club {
    grid-column: 1; grid-row: 2;
    font-size: 15px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* Handy: Konto links neben dem Hamburger. Der Name entfällt dort – die Initialen genügen,
     und der Clubname darunter braucht die volle Breite.

     `display: contents` LÖST DEN CHIP-CONTAINER AUF, und das ist hier die entscheidende Zeile:
     Die Konto-Liste liegt im DOM INNERHALB von `.jg-konto`, ist also ein Enkel des Grids – ein
     `grid-column: 1 / -1` an ihr wirkte deshalb nicht. Gemessen: Sie landete oben rechts in
     Zeile 1 (y = 8) statt unter dem Menü. Mit `contents` werden Knopf und Liste selbst zu
     Grid-Kindern und lassen sich einzeln platzieren. */
  .jg-konto { display: contents; }
  .jg-login { grid-column: 2; grid-row: 1; justify-self: end; margin-left: 0; padding: 7px 10px; }

  /* EIN Bedienelement statt zwei: Der Chip trägt hier die Initialen UND die drei Striche und
     öffnet das gemeinsame Menü. Der eigene Hamburger-Knopf daneben entfällt, sobald ein Konto
     angemeldet ist – sonst stünden zwei Knöpfe da, die dasselbe tun. */
  .jg-konto-knopf {
    grid-column: 2; grid-row: 1; justify-self: end;
    gap: 8px; padding: 4px 10px 4px 4px;
    border-color: var(--jg-line);
  }
  .jg-konto-knopf .jg-konto-name, .jg-konto-knopf .jg-chip-pfeil { display: none; }
  .jg-konto-knopf .jg-chip-striche { display: inline-flex; width: 20px; height: 20px; color: var(--jg-ink); }

  .sitebar-inner.hat-konto > .jg-burger { display: none; }

  /* Feste Zeilen, damit die Reihenfolge nicht davon abhängt, welches Skript zuerst fertig war:
     1 Logo/Konto/Hamburger · 2 Clubname · 3 Seiten · 4 Konto-Einträge. */
  .kopf-club { grid-column: 1 / -1; grid-row: 2; }
  .kopfnav { grid-row: 3; }
  .jg-konto-liste.im-menue { grid-row: 4; }

  /* Zugeklappt ist es WEG, nicht nur unsichtbar: `display: none` nimmt der Leiste die Höhe.
     Mit `visibility` bliebe der Platz reserviert – und genau der war ja das Problem. */
  .kopfnav {
    grid-column: 1 / -1;
    display: none;
    flex-direction: column; align-items: stretch;
    margin: 6px 0 0; width: 100%; gap: 0;
    border-top: 1px solid var(--jg-line);
  }
  .kopfnav.offen { display: flex; }

  /* Große Trefferflächen: eine Zeile je Eintrag, volle Breite, 44 px hoch. */
  .kopfnav a { font-size: 15px; padding: 11px 2px; }

  /* DIE KONTO-EINTRÄGE STEHEN HIER IM SELBEN KLAPPKASTEN, nicht in einem zweiten Dropdown:
     „im Hamburger-Menü fehlen Punkte, z. B. Abmelden" (Betreiber, 08.08.2026). Aus dem
     schwebenden Menü am Chip wird ein Block unter der Seitenliste – dasselbe Element, andere
     Darstellung. */
  .jg-konto-liste.im-menue {
    position: static;
    grid-column: 1 / -1;
    min-width: 0; width: 100%;
    margin: 0; padding: 0;
    border: 0; box-shadow: none; background: none;
  }
  .jg-konto-liste.im-menue .jg-konto-eintrag { font-size: 15px; padding: 11px 2px; border-radius: 0; }

  /* Trennlinie ÜBER dem Konto-Block statt unter dem Handicap: Sie trennt die zwei Gruppen
     („wohin gehe ich" gegen „mein Konto"), und genau das soll sie sagen. */
  .jg-konto-liste.im-menue .jg-konto-info {
    padding: 12px 2px 10px; border-bottom: 0;
    border-top: 1px solid var(--jg-line);
  }
  .jg-konto-liste.im-menue .jg-konto-eintrag:first-child { border-top: 1px solid var(--jg-line); }

  /* Im Klappkasten laufen die Einträge bis an den Rand (2 px statt 10) – der Trennstrich folgt
     ihnen, sonst stünde er eingerückt zwischen bündigen Zeilen. */
  .jg-konto-liste.im-menue .jg-konto-trenner { margin: 6px 2px; }

  /* Der Chip bleibt sichtbar (wer bin ich?), sein Pfeil nicht: Geöffnet wird über den
     Hamburger daneben, und zwei Klapp-Andeutungen nebeneinander versprechen zwei Menüs. */
  .jg-konto-knopf[aria-expanded] { pointer-events: auto; }
}


/* ---- System-Admin-Leiste (nur der Betreiber sieht sie) ----
   Optik und Position wie die `.sysbar` im Backend (webapp/style.css) – wer zwischen Verwaltung
   und öffentlicher Seite wechselt, soll dieselbe Leiste an derselben Stelle wiederfinden. Der
   INHALT ist bewusst ein anderer; die Begründung steht in vorschau.js.

   Die Werte stehen hier doppelt und sind NICHT aus dem Backend importiert: `style.css` wird auf
   den öffentlichen Seiten nie geladen (656 KB Icon-Font hängen daran). Gemeinsam ist beiden das,
   was zählt – die Token aus tokens.css. */
.sysbar { background: var(--jg-green-tint); border-bottom: 1px solid var(--jg-line); }
.sysbar-inner {
  max-width: var(--jg-w-wide); margin: 0 auto; padding: 9px var(--jg-gutter);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.sysbar-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  color: var(--jg-green-dark);
}
.sysbar-tag svg, .sysbar-simhint svg { width: 15px; height: 15px; flex: 0 0 auto; }
.sysbar-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sysbar-view { display: inline-flex; align-items: center; gap: 7px; }
.sysbar-view-label { font-size: 13px; color: var(--jg-muted); }
.sysbar-switch {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; font-size: 13px; font-weight: 600; font-family: inherit;
  color: var(--jg-green); background: var(--jg-card);
  border: 1px solid #b9d4c8; border-radius: var(--jg-r); cursor: pointer;
}
.sysbar-switch:hover { background: var(--jg-green-wash); }
.sysbar-switch svg { width: 16px; height: 16px; flex: 0 0 auto; }
.sysbar-switch.aktiv { background: var(--jg-green); color: #fff; border-color: var(--jg-green); }
.sysbar-switch.aktiv:hover { background: var(--jg-green-dark); }

/* Gast-Ansicht: Leiste amber getönt + Hinweis. Ohne diese Färbung hält man die dann fehlenden
   nicht öffentlichen Clubs für einen Fehler statt für das bestellte Ergebnis. */
.sysbar.simaktiv { background: var(--jg-orange-tint); border-bottom-color: var(--jg-orange-rand); }
.sysbar-simhint {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  color: var(--jg-amber);
}

/* Das Auswahlfeld in der Leiste ist kompakt: Die öffentliche `.cselect-btn` ist auf
   Formularbreite ausgelegt (width: 100%, 11px Polster) und sprengte die Zeile. */
.sysbar-view .cselect { width: auto; min-width: 190px; }
/* Kompakte Fassung fuer die System-Admin-Leiste. Der Pfeil bleibt bei 34 px – im Bild gemessen
   passt er, und ein zweites Maß wäre genau die Uneinheitlichkeit, um die es hier geht. */
.sysbar-view .cselect-btn { padding: 6px 8px 6px 12px; font-size: 13px; font-weight: 600; }
.sysbar-view .cselect-list { min-width: 100%; }

/* Die iPhone-Vorschau lohnt erst am Schreibtisch – auf dem Handy zeigte sie das, was ohnehin
   auf dem Schirm steht. Die Grenze steht bewusst HIER und nicht im Skript: Eine Abfrage beim
   Aufbau der Leiste gälte nur für diesen Moment, das `@media` folgt jeder Fenstergröße. */
@media (max-width: 899px) {
  .sysbar-preview { display: none; }
}

@media (max-width: 560px) {
  .sysbar-actions { margin-left: 0; width: 100%; }
  .sysbar-view { flex: 1; }
}

/* ---- iPhone-Vorschau (System-Admin, breiter Bildschirm) ----
   Die Seite läuft in einem iframe fester Breite → eigener Viewport → die @media-Handy-Layouts
   greifen exakt wie auf dem Gerät. Nur Standard-iframe + CSS, damit es überall gleich wirkt. */
.preview-overlay {
  position: fixed; inset: 0; z-index: 900;
  /* dvh statt vh: Sonst liegt die Safari-Leiste über der untersten Knopfzeile. */
  height: 100dvh;
  background: rgba(20, 34, 28, .55);
  display: flex; flex-direction: column;
}
.preview-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; background: var(--jg-card); border-bottom: 1px solid var(--jg-line);
}
.preview-titel { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--jg-ink); }
.preview-titel svg { width: 18px; height: 18px; }
.preview-geraete { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.preview-spacer { flex: 1; }
.preview-chip, .preview-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; font-size: 13px; font-weight: 600; font-family: inherit;
  color: var(--jg-green); background: var(--jg-card);
  border: 1px solid #b9d4c8; border-radius: var(--jg-r); cursor: pointer;
}
.preview-chip:hover, .preview-btn:hover { background: var(--jg-green-wash); }
.preview-chip.aktiv { background: var(--jg-green); color: #fff; border-color: var(--jg-green); }
.preview-btn.schliessen { color: var(--jg-ink); border-color: var(--jg-line); }
.preview-btn svg { width: 16px; height: 16px; }
.preview-auto { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--jg-ink); cursor: pointer; }

.preview-buehne {
  flex: 1; min-height: 0; overflow: auto;
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 16px;
}
/* Telefon-Rahmen: schwarzer Bezel, runde Ecken; der iframe (feste Gerätegröße) füllt die Fläche. */
.preview-phone {
  flex: 0 0 auto; background: #0b0f0d; border-radius: 42px; padding: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}
.preview-frame { border: 0; border-radius: 30px; background: #fff; display: block; }
.preview-info { font-size: 12px; color: #e7efe9; }

/* ---- Auswahlfeld mit Suche (.cselect) ----
   Das Muster aus dem Backend („Typ"-Feld, Club-Umschalter des System-Admins): eigener Knopf,
   weisse Liste, Suchzeile. Stand bis 28.07.2026 inline in index.html – seit die Konto-Seiten
   dieselbe Auswahl brauchen (Lieblingsplatz, weitere Clubs), liegt es hier als EINE Quelle.
   Die Logik dazu: cselect.js. */
.cselect { position: relative; }
.cselect-btn {
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: 11px 50px 11px 13px;
  border: 1px solid var(--linie);
  border-radius: 10px;
  background-color: var(--karte);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cselect-btn:focus { outline: none; border-color: var(--gruen); box-shadow: 0 0 0 3px rgba(29,158,117,.15); }
.cselect.offen .cselect-btn { border-color: var(--gruen); box-shadow: 0 0 0 3px rgba(29,158,117,.15); }

.cselect-list {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
  overflow: hidden auto;
  max-height: 280px;
}
.cselect-list[hidden] { display: none; }
/* Suchzeile, klebt oben beim Scrollen */
.cselect-search { position: sticky; top: 0; z-index: 1; background: var(--karte); padding: 8px; }
.cselect-input {
  width: 100%; font: inherit; font-size: 15px;
  padding: 9px 11px; border: 1px solid var(--linie); border-radius: 8px;
  background: var(--bg); color: var(--text);
}
/* `type="search"` bringt in Chrome/Safari ein eigenes Löschkreuz und eine abweichende
   Innenabstands-Berechnung mit. Beides weg – das Feld soll aussehen wie jedes andere
   Eingabefeld hier, der Typ dient nur dazu, Passwortmanager fernzuhalten. */
.cselect-input::-webkit-search-decoration,
.cselect-input::-webkit-search-cancel-button,
.cselect-input::-webkit-search-results-button { -webkit-appearance: none; display: none; }
.cselect-input { -webkit-appearance: none; appearance: none; }

.cselect-input:focus { outline: none; border-color: var(--gruen); box-shadow: 0 0 0 3px rgba(29,158,117,.15); }
/* Auf dem Finger mindestens 16px, sonst zoomt iOS beim Antippen in das Feld und die Seite
   wird breiter als der Bildschirm. Die allgemeine Regel in tokens.css greift hier nicht:
   `.cselect-input` ist spezifischer und würde gewinnen. */
@media (pointer: coarse) { .cselect-input { font-size: 16px; } }
.cselect-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 13px; cursor: pointer; font-size: 15px; color: var(--text);
  border-top: 1px solid var(--linie);   /* je Option, damit Trennlinien beim Filtern stimmen */
}
.cselect-opt[hidden] { display: none; }
.cselect-opt:hover, .cselect-opt.markiert { background: var(--bg); }
/* Dunkles Grün, nicht --gruen: die gewählte Zeile ist Text, kein Flächenelement
   (Kontrast 6,2:1 statt 3,4:1). Gilt auch für das Häkchen – es trägt hier Bedeutung. */
.cselect-opt[aria-selected="true"] { color: var(--jg-green); font-weight: 600; }
.cselect-opt[aria-selected="true"]::after { content: "✓"; color: var(--jg-green); font-weight: 700; }
.cselect-noresult { padding: 14px 13px; border-top: 1px solid var(--linie); color: var(--grau); font-size: 14px; text-align: center; }
.cselect-noresult[hidden] { display: none; }
.cselect-leer { padding: 11px 13px; border: 1px solid var(--linie); border-radius: 10px; color: var(--grau); background: var(--karte); }

/* ------------------------------------------------------------------ Blocküberschrift
   EINE Ebene zwischen Abschnitt und Feld – und sie unterscheidet sich in der FORM, nicht in der
   Größe (Entscheidung des Betreibers, 10.08.2026).

   Warum das nötig war: Abschnitt (`h2`, 17 px/600), Block (`h3`, 16 px/600) und Feldbeschriftung
   (`.feld-label`, 14 px/600) lagen bei gleichem Gewicht und gleicher Farbe 1–2 px auseinander.
   Das ist keine Hierarchie, sondern eine Ahnung. Im Rundenstart fehlte die Blockebene sogar ganz:
   „Wer spielt mit?" war ein `.feld-label` und sah damit aus wie „Name" oder „HCPI" – daher der
   Eindruck „unübersichtlich", die Seite hatte unter der Karte nur EINE Ebene.

   Versalien mit Sperrung erkennt man aus dem Augenwinkel, auch KLEINER als die Feldbeschriftung –
   deshalb bleibt die Feldebene unverändert und es entsteht kein Größenwettlauf. Die feine Linie
   darüber trennt Blöcke ohne zusätzliche Kästen.

   Verworfen: ein grüner Balken links. Kräftiger, aber unruhiger – und er kollidiert mit dem grünen
   Rand des `.ms-formular`.

   Gilt für `<h3>` innerhalb der Seiten UND für die Klasse – manche Blocktitel entstehen in
   JavaScript, wo ein `h3` semantisch falsch wäre (sie stehen dort in einem Feld-Behälter). */
.jg-block,
.wrap .karte h3 {
  display: block;
  margin: 22px 0 10px;
  padding-top: 12px;
  border-top: 1px solid var(--jg-line);
  font-family: var(--jg-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--jg-green);
}

/* AUSNAHMEN VON DER LINIE – und zwar EINZELN benannt, nicht über `:first-child`.
   Der erste Versuch war `.jg-block:first-child`, und er griff zu breit: Jeder Blocktitel, der
   zufällig das erste Kind SEINES Behälters ist, verlor die Linie – „OFFENE EINLADUNGEN" stand
   dadurch ohne Trennung direkt unter einem Knopf (im Bild gesehen, 10.08.2026). `:first-child`
   fragt die Stelle im Elternteil, gemeint war aber „erster Block im ABSCHNITT". Das sind zwei
   verschiedene Dinge, und nur die Ausnahmen wissen, welches gilt. */
.temp-block .jg-block,
.ms-formular h3 {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* GRUPPENBAND – die Blockebene als volles Band über die Kartenbreite (Vorschlag 10.08.2026).
   Bewusst mit NEGATIVEN Seitenrändern: `.karte` hat 20 px Polsterung, und ein Band, das davor
   aufhört, sieht aus wie ein Etikett statt wie eine Trennung. Über die ganze Breite gelesen ist es
   ein Abschnittskopf – dieselbe Sprache wie der grüne Kopf der `.jg-tab`-Tabellen.

   NUR FUER GRUPPEN, NICHT FUER FELDER: Der Sinn steht und fällt damit, dass es WENIGE sind. Ein
   Band um jede Feldbeschriftung wäre dasselbe Problem in Grau. */
.jg-band {
  display: block;
  margin: 24px -20px 16px;
  padding: 9px 20px;
  background: var(--jg-bg);
  border-top: 1px solid var(--jg-line);
  border-bottom: 1px solid var(--jg-line);
  font-family: var(--jg-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--jg-green);
}

/* Das erste Band schliesst direkt an die Kartenüberschrift an – dort braucht es oben keine Luft,
   sonst klafft eine Lücke zwischen Titel und erstem Abschnitt. */
.karte h2 + .jg-band,
.karte .aufklapp-inhalt > .jg-band:first-child { margin-top: 4px; }

/* Erklärung direkt unter einem Blocktitel: dichter dran als ein gewöhnlicher Hinweis, damit sie
   sichtbar zum Titel gehört und nicht zum ersten Feld darunter. */
.jg-block-text {
  display: block;
  margin: -4px 0 12px;
  font-size: 13px;
  color: var(--jg-muted);
}


/* =========================================================================================
   DER LEISE PULS AN DEN AUFKLAPPERN (17.08.2026, Ansage des Betreibers: „wir müssen unsere
   Nutzer auf diese Buttons aufmerksam machen").

   BEWUSST EIN SCHEIN, KEIN BLINKEN: Ein weicher Ring schwillt an und ab – dieselbe Frequenz
   (2,6 s) wie die laufende Belegung auf der Statusseite und der Webcam-Ausfall, damit Bewegung
   im Projekt überall dasselbe Tempo hat. Die Deckkraft des Knopfes selbst bleibt unangetastet;
   ein verblassender Knopf wäre ein Fehler-Eindruck, kein Hinweis.

   ER HÖRT AUF, SOBALD ER SEINE ARBEIT GETAN HAT: beim Zeigen und im geöffneten Zustand. Eine
   Animation, die auch dann noch läuft, wenn man den Knopf längst gefunden hat, ist Dekoration –
   und Dekoration wird nach dem dritten Mal zur Störung.

   Alle Pfeile pulsen im GLEICHEN Takt: Die Animation startet mit dem Rendern, und synchrone
   Bewegung liest sich als Atmen, während versetzte Phasen als Flackern ankommen.
   ========================================================================================= */
/* DIE FORM DES AUFKLAPP-PFEILS STEHT HIER UND NUR HIER (17.08.2026). Vorher lag sie in
   `konto.css` – und die lädt die Statusseite nicht, weshalb der Pfeil des Auswahlfelds dort
   als nackter schwarzer Haken erschien, sobald er ein Element statt eines Hintergrundbilds war.
   `kopfmenue.css` ist die einzige Datei, die JEDE öffentliche Seite lädt; wer die Form ändert,
   ändert sie damit überall auf einmal. */
.aufklapp-pfeil {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--jg-green-light); color: var(--jg-green);
  background: var(--jg-green-tint);
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.aufklapp-pfeil svg { width: 20px; height: 20px; }

@keyframes jg-pfeil-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(29, 158, 117, 0); }
  50%      { box-shadow: 0 0 9px 2px rgba(29, 158, 117, .26); }
}

.aufklapp-pfeil,
.jg-toggle {
  animation: jg-pfeil-puls 2.6s ease-in-out infinite;
}

.aufklapp-kopf:hover .aufklapp-pfeil,
.karte.aufklapp.offen .aufklapp-pfeil,
.jg-toggle:hover,
.jg-item.offen .jg-toggle {
  animation: none;
}

/* Wer Bewegung reduzieren möchte (Betriebssystem-Einstellung), bekommt die gefüllte Form ohne
   Animation – sie allein trägt den Hinweis. Wie bei Webcam und Belegzeit. */
@media (prefers-reduced-motion: reduce) {
  .aufklapp-pfeil,
  .jg-toggle,
  .platzdaten-kopf::after { animation: none; }
}


/* Das Auswahlfeld traegt denselben Aufklapp-Pfeil wie alle anderen (17.08.2026) – als Element,
   nicht als Hintergrundbild. Nur so bekommt es Hover-Fuellung und Puls aus derselben Regel;
   vorher sah der Pfeil gleich aus und verhielt sich anders, und genau das fiel auf. */
.cselect-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  /* 17 px: GEMESSEN, nicht geschätzt. So weit steht der Pfeil der Zustandskarten vom rechten
     Kartenrand (`.jg-toggle`), und beide stehen damit auf einer Linie. Mit den 8 px von vorher
     lagen sie um genau diese Differenz auseinander – auf dem Schirm sofort zu sehen, im Code
     nicht. Wer das Polster der Karten ändert, misst hier nach.

     16 und nicht 17: Das Feld hat einen 1-px-Rahmen, die Karte nicht – der zählt mit. */
  padding-right: 16px;
}
.cselect-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cselect-pfeil { flex: 0 0 34px; }
.cselect-btn:hover .cselect-pfeil { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.cselect.offen .cselect-pfeil {
  transform: rotate(180deg);
  background: var(--gruen); border-color: var(--gruen); color: #fff;
  animation: none;
}

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