/* ══════════════════════════════════════════════════════════════════════════
   ENTWURF (27.08.2026) – die GEMEINSAME Grundlage der ruhigen Bauform.
   Wird von jeder `*-entwurf.html` geladen, vor dem seitenspezifischen Teil.

   ⚠️ VERSUCH, KEIN PRODUKT. Keine dieser Dateien steht in
   `build/build-frontend.sh`; Rueckweg: `bash build/entwurf-menue.sh --weg`.

   WARUM EINE GEMEINSAME DATEI: Dieselben Regeln fuenfmal zu kopieren hiesse,
   sie bei jeder Nachbesserung fuenfmal zu aendern – und beim ersten
   vergessenen Ort sieht eine Seite anders aus als die anderen. Genau der
   Fehler, den der Umbau beseitigen soll.

   WAS HIERHER GEHOERT: alles, was auf JEDER Seite gleich aussehen muss –
   Pfeile, Knoepfe, Kopfleiste, Karten, das App-Menue unten, der Fuss.
   WAS NICHT: alles, was nur eine Seite hat (Zustandsliste, Rundenkarte …).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Der Kopf ruecken naeher an den Inhalt ─────────────────────────────
   Die Kopfleiste traegt bereits eine `border-bottom`. Sie ist die Trennlinie;
   ein zusaetzlicher Abstand daneben liest sich als Luecke, nicht als Kante.
   (Auf der Statusseite ist das nachgeschaerft worden – hier gilt es fuer
   alle.) */
.wrap { padding-top: 18px; }

/* ── 2. JEDER Pfeil: schwarz, ohne Kreis, ohne Puls ───────────────────────
   ⚠️ DIESE REGEL GREIFT UEBER DEN KLASSENNAMEN HINWEG – ABSICHT, KEINE FAULHEIT.

   Zuvor stand hier eine Liste einzelner Klassen, und sie ist FUENFMAL
   nachgebessert worden: `jg-toggle`, `aufklapp-pfeil`, `cselect-pfeil`, dann
   `eck-chevron`, dann `platzdaten-kopf::after`, dann
   `.karte.aufklapp.offen > .aufklapp-kopf > .aufklapp-pfeil` aus `konto.css`.
   Jedes Mal tauchte an anderer Stelle wieder ein gruen gefuellter Knopf auf.
   Ansage des Betreibers: „koennen wir bitte das mit dem gruenen button ein
   fuer alle mal erledigen?"

   Deshalb: ALLES im Inhaltsbereich, dessen Klasse `pfeil`, `toggle` oder
   `chevron` enthaelt. Neue Aufklapper im Projekt heissen so – sie sind damit
   von Anfang an erfasst, statt beim naechsten Bild aufzufallen.

   ⚠️ UND MIT `!important`. Das ist im Projekt sonst verpoent, hier aber das
   ehrliche Mittel: Diese Datei ist eine AUFLAGE ueber gewachsenen
   Stylesheets, in denen ein Dutzend Sonderfaelle mit vier und fuenf Klassen
   stehen. Ohne `!important` hiesse „durchsetzen" jedes Mal, die laengste
   fremde Kette nachzubauen – und beim naechsten Sonderfall wieder.

   ⚠️ DIE FARBE MUSS MIT. Ein gefuellter Pfeil traegt sein Zeichen in WEISS;
   nimmt man nur die Fuellung weg, steht Weiss auf Weiss und der Pfeil ist
   unsichtbar. Genau darum geht `color` hier mit und nicht nur `background`.

   Die Puls-Animation faellt weg: Ein Element, das alle 2,6 s aufleuchtet, ist
   das Gegenteil einer ruhigen Liste. */
.wrap [class*="pfeil"],
.wrap [class*="toggle"],
.wrap [class*="chevron"] {
  width: 28px !important;
  height: 28px !important;
  min-width: 0 !important;
  flex: 0 0 28px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  animation: none !important;
  color: var(--jg-ink, #15211c) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ⚠️ AUSNAHME – ZWEI PFEILE SIND GEZEICHNET, NICHT GESETZT (28.08.2026).
   Die Regel darueber ist fuer Pfeile gemacht, die ein `<svg>` enthalten. Es
   gibt aber zwei, die als LEERER `<span>` im DOM stehen und ihre Form allein
   aus `border-right` + `border-bottom` + `rotate(45deg)` beziehen
   (`turniere.css`): `.turnier-mehr-pfeil` („mehr Information" im
   aufgeklappten Termin) und `.anm-pfeil` (Anmeldeblock).

   Fuer sie ist `border: 0 !important` keine Kosmetik, sondern LOESCHUNG –
   und `flex: 0 0 28px` blaeht das unsichtbare Kaestchen zusaetzlich auf.
   Live nachgemessen: 40x40 Pixel, alle vier Raender 0, keine
   Pseudoelemente, kein Hintergrund. Auf `jetzt.golf` stand seit 1.17.20 ein
   Aufklapper OHNE JEDEN PFEIL – man sah dem fetten „mehr Information" nicht
   an, dass sich dahinter etwas oeffnet.

   `currentColor` statt eines festen Wertes ist Absicht: Die Regel oben setzt
   `color` bereits auf `--jg-ink` und im offenen Zustand auf `--jg-green`.
   So folgen die gezeichneten Pfeile derselben Faerbung wie die gesetzten,
   ohne dass die Farbe hier ein zweites Mal gepflegt werden muss.

   ⚠️ WER HIER EINEN PFEIL ERGAENZT, PRUEFT ZUERST, WORAUS ER BESTEHT.
   Ein Attributselektor wie `[class*="pfeil"]` fragt nicht nach dem Markup. */
.wrap .turnier-mehr-pfeil,
.wrap .anm-pfeil {
  width: 10px !important;
  height: 10px !important;
  flex: 0 0 auto !important;
  border: 0 !important;
  border-right: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  display: block !important;
}

.wrap [class*="pfeil"] svg,
.wrap [class*="toggle"] svg,
.wrap [class*="chevron"] svg {
  width: 24px !important;
  height: 24px !important;
  color: inherit !important;
}

/* Aufgeklappt und beim Ueberfahren traegt der Pfeil die Markenfarbe – das ist
   der einzige Farbwechsel, der bleibt. Er steht NACH der Regel darueber und
   ist spezifischer, also gewinnt er trotz gleicher `!important`-Stufe. */
.wrap .offen [class*="pfeil"],
.wrap .offen [class*="chevron"],
.wrap [class*="pfeil"]:hover,
.wrap [class*="toggle"]:hover,
.wrap [class*="chevron"]:hover,
.wrap [open] > * > [class*="pfeil"],
.wrap :hover > [class*="pfeil"],
.wrap :hover > [class*="chevron"] { color: var(--jg-green, #0f6e56) !important; }

/* Der aufgeklappte Zeiger dreht sich – wie ueberall im Projekt. */
.wrap .jg-item.offen [class*="toggle"],
.wrap [open] > * > [class*="pfeil"] { transform: rotate(180deg); }

/* ── 3. Alles Eckige ──────────────────────────────────────────────────────
   3 px – dieselbe Zahl wie die Statusflaeche. Nicht 0: Eine harte Ecke kommt
   im Projekt sonst nirgends vor. EINE Zahl fuer alles heisst: eine Stelle zu
   aendern, wenn sie doch nicht passt. */
.club-info .ci-mehr,
.club-info .ci-call,
.club-aktionen .ci-mehr,
.club-aktionen .ci-call,
.wrap .reload-btn,
.wrap .nah-btn,
.jg-k-btn,
.knopf,
.jg-tab-btn,
button.primary,
button.ghost,
.cselect-btn,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select { border-radius: 3px; }

/* ── 4. Karten werden Zeilen ──────────────────────────────────────────────
   Die verbreitetste Bauform des Projekts (`konto`, `konto-mein`, `runde`).
   Aus dem Kasten mit Rahmen wird eine Flaeche mit Trennlinien, die bis an den
   Rand laeuft – der INHALT behaelt seinen Abstand.

   ⚠️ Bis an den Rand geht die LINIE, nie der Inhalt. Ein Kasten, dessen
   Rahmen an der Bildschirmkante klebt, sieht angeschnitten aus. */
.wrap > .karte,
.wrap > * > .karte {
  margin: 0 calc(var(--jg-gutter, 18px) * -1);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  border-top: 0;
  border-bottom: 1px solid var(--jg-line, #e4eae7);
  box-shadow: none;

  /* ⚠️ WEISS, NICHT „KEINE FLAECHE". Der Unterschied ist im Bild sofort da:
     Ohne Flaeche scheint der Seitenhintergrund (#f5f8f6) durch, und die Liste
     wirkt grau hinterlegt – genau der Befund des Betreibers beim Vergleich von
     Statusseite und „Mein Konto": „so passt es / so nicht … es geht um den
     Hintergrund und um ein absolut einheitliches Design."

     Die Referenz ist die abgenommene Statusseite: Dort ist die LISTE weiss
     (`.status-liste`, gemessen `rgb(255,255,255)`), die Zeilen darin sind
     transparent, und getrennt wird mit 1 px `#e4eae7`. Genau diese drei Werte
     gelten hier. */
  background: var(--karte, var(--jg-card, #fff));
}

/* Der Aufklapper innerhalb einer Karte verliert seinen zweiten Rahmen – die
   Karte traegt ihn bereits. Zwei Linien an derselben Stelle sind 2 px, und
   das faellt neben einer 1-px-Liste sofort auf. */
.karte.aufklapp {
  border-left: 0;
  /* ⚠️ UND OHNE DEN GRUENEN SCHIMMER. `konto.css` gibt jeder `.karte.aufklapp`
     `background: var(--jg-green-wash)` (#f0faf5). In der Kastenform war das die
     Tuchfuehlung „hier steckt etwas dahinter“; als randlose Zeile faerbt es die
     halbe Seite ein. Befund des Betreibers an „Mein Konto“: „warum ist hier nun
     wieder alles gruen hinterlegt?“ Die Statusseite, an der die Bauform
     abgenommen wurde, hat an dieser Stelle keine Flaeche – nur Trennlinien. */
  background: var(--karte, var(--jg-card, #fff));
}

/* ── 5. Das Auswahlfeld flach ─────────────────────────────────────────────
   ⚠️ NUR IM INHALTSBEREICH (`.wrap`). Ohne das Praefix galten diese Regeln
   fuer JEDES `cselect` der Seite – auch fuer das kleine „Ansicht"-Feld in der
   System-Admin-Leiste. Ein `min-height: 62px` in einer 40 px hohen Leiste
   ragt heraus und ueberdeckt die Beschriftung daneben; die negativen Raender
   zogen es zusaetzlich ueber die Nachbarn (Befund des Betreibers am Bild,
   27.08.2026). Die Leiste steht ausserhalb von `.wrap` und bleibt jetzt, wie
   sie war. */
.wrap .cselect-btn {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-bottom: 1px solid var(--jg-line, #e4eae7);
  padding: 15px 18px;
  min-height: 62px;
}
.wrap .cselect {
  margin-left: calc(var(--jg-gutter, 18px) * -1);
  margin-right: calc(var(--jg-gutter, 18px) * -1);
}
.wrap .cselect-list { border-radius: 0; border-left: 0; border-right: 0; }

/* ⚠️ DIE SYSTEM-ADMIN-LEISTE BRAUCHT KEINE AUSNAHME – sie haengt direkt am
   `<body>` und wird vom `.wrap`-Praefix ohnehin nicht getroffen. Hier stand
   kurzzeitig eine Ausnahme `.wrap .sysbar …`; sie konnte nie greifen, weil es
   diese Verschachtelung nicht gibt. Der wahre Ort war `status-entwurf.css`,
   wo dieselben Regeln ein zweites Mal stehen. */

/* Das App-Menue am unteren Rand, „In meiner Naehe“ in der Liste und die
   abgesetzten Rechts-Eintraege im Konto-Menue standen bis zum 27.08.2026 hier.
   Sie sind nach `app-menue.css` gewandert: Sie gehoeren zu dem, was
   `entwurf-basis.js` BAUT, und das laeuft auf JEDER Seite – auch auf denen,
   die die Bauform (noch) nicht tragen. Begruendung im Kopf jener Datei. */

/* ══════════════════════════════════════════════════════════════════════════
   ALLES ECKIG – DIE REGEL AN EINER STELLE (27.08.2026)

   Ansage des Betreibers: „da wir nun eh alles eckig haben, bauen wir auch die
   Buttons bitte so“ und spaeter „einfach alles“.

   ⚠️ WARUM BREIT UND NICHT KLASSE FUER KLASSE: Ein Durchlauf ueber die sechs
   Entwurfsseiten fand 11, 34 und 2 verbliebene Rundungen – in Klassen wie
   `hero`, `eck`, `zurueck-unten`, die je nur auf einer Seite vorkommen. Sie
   einzeln zu treffen hiesse, bei jeder neuen Seite von vorn zu suchen; genau
   dieses Nachlaufen hat den Nachmittag gekostet.

   Deshalb greift die Regel auf ALLES im Inhaltsbereich und nimmt aus, was
   rund BLEIBEN muss. Ausserhalb von `.wrap` – Kopfleiste, Nutzer-Chip,
   App-Menue – wird nichts angefasst.

   PRUEFABFRAGE fuer jede weitere Seite (gehoert ans Ende jedes Umbaus):
     [].slice.call(document.querySelectorAll('.wrap *'))
       .filter(e => parseInt(getComputedStyle(e).borderRadius) > 4)
   ══════════════════════════════════════════════════════════════════════════ */
.wrap *:not(.jg-avatar):not(.brand-mark):not(.jg-konto-avatar):not([class*="chip"]):not([class*="badge"]):not(.mn-sym):not(.hcp-punkt):not(.tee-punkt):not(.pd-punkt):not(svg):not(path):not(circle) {
  border-radius: 3px;
}

/* Was seine Form BRAUCHT, behaelt sie – ein Statuspunkt oder ein Avatar ist
   rund, weil er rund ist, nicht aus Mode.

   ⚠️ DIESE LISTE ALLEIN GENUEGT NICHT, und das hat am 27.08.2026 drei eckige
   Tee-Punkte auf der ABGENOMMENEN Statusseite stehen lassen (gemessen: 3 px
   statt 50 % an `.hcp-punkt`). Grund: Die Regel darueber traegt neun
   `:not(…)`, und jedes einzelne zaehlt in die Spezifitaet – `.wrap *:not…`
   steht bei (0,9,3), `.wrap .hcp-punkt` nur bei (0,2,0). Wer hier eine Klasse
   eintraegt, MUSS sie deshalb zusaetzlich in die `:not()`-Kette aufnehmen;
   sonst schreibt er eine Regel, die nie greift. */
.wrap .jg-avatar,
.wrap .brand-mark,
.wrap [class*="chip"],
.wrap [class*="badge"],
.wrap .hcp-punkt,
.wrap .tee-punkt { border-radius: 50%; }

/* ⚠️ HIER STAND EINE REGEL, DIE NIE GEGRIFFEN HAT – „Listen und Zeilen
   bleiben KANTIG" (`border-radius: 0` auf `.status-liste`, `.turnier-liste`,
   `.indoor-bereich`, `.mn-liste`, `.cselect`, `.hcp`, `.jg-cam-klapp`,
   `.sub`, die meisten davon mit `*`). Entfernt am 28.08.2026.

   DERSELBE FALLSTRICK WIE BEI DEN TEE-PUNKTEN einen Tag zuvor, nur ohne
   sichtbaren Schaden: Die `:not()`-Kette oben steht bei (0,10,3),
   `.wrap .turnier-liste *` nur bei (0,2,0). Die Kette gewinnt – überall.

   **Die Optik ist deshalb NICHT betroffen: live sind diese Listen 3 px, und
   genau so sind sie abgenommen worden** („passt jetzt", 27.08.). Entfernt
   wurde eine Behauptung, kein Verhalten.

   Bewiesen statt abgeleitet (28.08.2026): Regel im Browser abgeschaltet und
   `borderRadius` aller Elemente vorher/nachher verglichen – auf allen sechs
   Bauform-Seiten zusammen **4.300 Elemente, null Unterschied**. Wer die
   Kantigkeit wirklich will, trägt die Klassen in die `:not()`-Kette ein;
   eine zweite Regel daneben ist wirkungslos.

   (Pseudoelemente waren in dieser Messung nicht enthalten – sie konnten von
   der Regel aber auch nicht getroffen werden, kein Selektor darin endete auf
   `::before`/`::after`.) */

/* ⚠️ DIESE REGEL BLEIBT, UND ZWAR WEGEN DES `::after`. Ihr alter Kommentar
   nannte sie „Schutz vor der Null-Regel darüber" – die gibt es nicht mehr,
   und für die drei Element-Selektoren wäre sie heute überflüssig (die
   `:not()`-Kette setzt dort ohnehin 3 px).

   `.wrap .jg-indoor::after` ist der Grund: **Die Kette trifft Pseudoelemente
   nicht** – ihr `*` steht für Elemente. Ohne diese Zeile bekäme das `::after`
   gar keine Rundung. Die übrigen drei bleiben als Absicherung stehen: Wer
   morgen `.knopf` in die `:not()`-Kette aufnimmt, ist froh, dass sie da sind. */
.wrap .jg-item[data-status] .jg-anzeige,
.wrap .jg-indoor::after,
.wrap .status-liste .knopf,
.wrap .status-liste button { border-radius: 3px; }