/* ============================================================================
   werbung.css – die Bauform der Werbeseiten (/fuer-golfer, spaeter /fuer-clubs)
   Seit Frontend 1.19.0 (19.09.2026) ausgeliefert. Konzept: Claude/Werbeseiten_Konzept.md.

   DREI GRUNDSAETZE, die jede Aenderung hier tragen muss:

   1. OHNE JAVASCRIPT VOLLSTAENDIG. Alles Bewegte ist CSS. Die Seiten sollen gefunden
      werden; Text, der erst per Skript erscheint, sieht keine Suchmaschine.
   2. OHNE UNTERSTUETZUNG SICHTBAR. Die Bewegung haengt an scrollgesteuerten Animationen
      (`animation-timeline`). Wo der Browser sie nicht kennt oder der Nutzer
      „Bewegung reduzieren" eingestellt hat, steht jedes Element SOFORT in seiner
      Endlage da. Deshalb liegt jeder Anfangszustand (unsichtbar, versetzt) INNERHALB
      von `@supports` + `prefers-reduced-motion` – nie in der Grundregel. Ein Element,
      das auf die Animation wartet, die nie kommt, waere fuer immer unsichtbar.
   3. EIGENE KLASSEN MIT `wb-`. Keine geborgten aus fremden Stylesheets (Kurzliste 9).
   ============================================================================ */

.wb {
  --wb-schrift-riesig: clamp(44px, 9vw, 112px);
  --wb-schrift-gross:  clamp(34px, 6vw, 72px);
  --wb-schrift-mittel: clamp(22px, 2.6vw, 30px);
  --wb-breite: 1080px;
  --wb-tief: #0b1f18;            /* dunkle Flaeche: Tannengruen, fast schwarz */

  margin: 0;
  font-family: var(--jg-font);
  color: var(--jg-ink);
  background: #fff;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;               /* die einfliegenden Telefone duerfen nie seitlich scrollen lassen */
}

.wb *, .wb *::before, .wb *::after { box-sizing: border-box; }
.wb img { display: block; max-width: 100%; }
.wb a { color: inherit; }

/* ── Kopfleiste ─────────────────────────────────────────────────────────── */

.wb-kopf {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid rgba(21, 33, 28, .08);
}

.wb-kopf-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--wb-breite);
  height: 52px;
  margin: 0 auto;
  padding: 0 var(--jg-gutter);
}

.wb-marke {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.01em;
  text-decoration: none;
}

/* DIE MARKE IM FLIESSTEXT (21.09.2026, Ansage des Betreibers: „wir schreiben hier JETZT.GOLF
   immer gross und in gruen"). Gleiche Farbe wie die Auftaktzeile `.wb-zeile` und wie `.GOLF`
   im Logo – EINE Quelle waere schoener, aber die drei sitzen in verschiedenen Zusammenhaengen
   (Logo, Abschnittszeile, Fliesstext) und sollen sich getrennt aendern lassen.

   `font-weight: inherit`: Als `<b>` wuerde der Browser sie fett zeichnen und die Marke spraenge
   aus dem Satz. Gemeint ist die FARBE, nicht Betonung – ausgezeichnet wird trotzdem mit `<b>`,
   weil es die Marke hervorhebt, ohne sie (wie `<strong>`) zu betonen. */
.wb-marke-text {
  color: var(--jg-green);
  font-weight: inherit;
}

.wb-marke svg { width: 26px; height: 26px; }
.wb-marke b { color: var(--jg-green); font-weight: 700; }

.wb-kopf-links { display: flex; align-items: center; gap: 18px; font-size: 14px; }
.wb-kopf-links a { text-decoration: none; color: var(--jg-muted); }
.wb-kopf-links a:hover { color: var(--jg-ink); }
/* WO BIN ICH? (Ansage des Betreibers, 02.10.2026): die aktuelle Seite grün und fett – dieselbe
   Markierung wie in der App-Leiste unten (`.wb-fussmenue a.aktiv`), am selben Merkmal
   `class="aktiv"` + `aria-current="page"`. Spezifischer als die Menü-Regel auf dem Telefon,
   greift also auch im Klappmenü. */
.wb-kopf-links a.aktiv,
.wb-kopf-links a.aktiv:hover { color: var(--jg-green); font-weight: 600; }
/* Die Anleitung fett (Ansage des Betreibers): Sie ist der einzige Weg in der Leiste, der nicht
   zu einer der drei Seiten führt, sondern zum Nachlesen. */
.wb-kopf-links a.wb-kopf-anleitung { font-weight: 600; }
.wb-kopf-links .wb-kopf-cta {
  padding: 6px 14px;
  color: #fff;
  background: var(--jg-green);
  border-radius: var(--jg-r-pill);
}
.wb-kopf-links .wb-kopf-cta:hover { color: #fff; background: var(--jg-green-dark); }

/* ══ DAS KOPFMENÜ (20.09.2026) ══════════════════════════════════════════════

   AM RECHNER eine Reihe nebeneinander, AUF DEM TELEFON ein Klappmenü hinter drei Strichen –
   und beides OHNE SKRIPT, weil diese Seiten keines laden (der Grund steht im Kopf jeder Seite).
   Der Schalter ist eine versteckte Checkbox vor dem `<nav>`.

   `.wb-nur-menue` (Impressum, Datenschutz) und die zwei Trennstriche stehen NUR im Klappmenü:
   Am Rechner trägt sie die Fusszeile, und eine Kopfleiste, die alles doppelt, wäre nur voll. */

/* Sichtbar versteckt, aber fokussierbar – die Begruendung steht im Markup. */
.wb-menue-schalter {
  position: absolute;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; white-space: nowrap; border: 0;
  clip-path: inset(50%);
}

.wb-menue-knopf {
  display: none;                       /* am Rechner gibt es den Knopf nicht */
  align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-left: auto;
  color: var(--jg-ink);
  border-radius: var(--jg-r-sm);
  cursor: pointer;
}
.wb-menue-knopf svg { width: 22px; height: 22px; }
.wb-menue-schalter:focus-visible + .wb-menue-knopf {
  outline: 2px solid var(--jg-green);
  outline-offset: 2px;
}

.wb-nur-menue,
.wb-menue-strich { display: none; }

@media (max-width: 760px) {
  .wb-menue-knopf { display: inline-flex; }

  /* ⚠️ ABSOLUT UNTER DER LEISTE, NICHT IN IHR: Als Teil der Leiste würde diese beim Aufklappen
     höher – und weil sie `sticky` ist, schiebt das den ganzen Seiteninhalt. Genau diese Falle
     hat am 20.09.2026 im Konto-Menü einen halben Nachmittag gekostet. Als Ueberlagerung bleibt
     die Leiste 52 px hoch und nichts darunter bewegt sich. */
  .wb-kopf-links {
    position: absolute;
    top: 100%; right: var(--jg-gutter); left: var(--jg-gutter);
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    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);
  }

  .wb-menue-schalter:checked ~ .wb-kopf-links { display: flex; }

  .wb-kopf-links a {
    padding: 11px 10px;
    font-size: 15px; font-weight: 600;
    color: var(--jg-ink);
    border-radius: 8px;
  }

  .wb-nur-menue { display: block; }

  .wb-menue-strich {
    display: block;
    flex: none;                        /* 1 px schrumpft in einer Flex-Spalte sonst auf 0 weg */
    height: 1px; margin: 6px 10px;
    background: var(--jg-line);
  }
}

/* ══ DIE LEISTE AM UNTEREN RAND – NUR AUF DEM TELEFON (20.09.2026) ═════════
   Masse und Symbole sind aus `app-menue.css` / `entwurf-basis.js` uebernommen, damit sie neben
   der Leiste der Live-Seiten nicht wie eine zweite Bauform aussieht. Drei Punkte statt fünf:
   mehr gibt es auf einer Werbeseite nicht zu erreichen. */
.wb-fussmenue { display: none; }

@media (max-width: 767px) {
  .wb-fussmenue {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 20;                       /* ueber dem Inhalt, unter dem Kopfmenü (dort z-index 10
                                          auf der Leiste – das Klappmenü liegt in ihr) */
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    background: var(--jg-card, #fff);
    border-top: 1px solid var(--jg-line, #e4eae7);

    /* PFLICHT wie bei der Live-Leiste: Auf jedem iPhone ohne Home-Knopf liegt der
       Home-Indikator ueber der Seite. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .wb-fussmenue a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 7px 2px 6px;
    min-height: 52px;
    text-decoration: none;
    color: var(--jg-muted, #5c6b64);
    font-size: 11px; font-weight: 500; line-height: 1.2;
  }
  .wb-fussmenue svg { width: 23px; height: 23px; }
  .wb-fussmenue a.aktiv { color: var(--jg-green, #0f6e56); font-weight: 600; }

  /* DER SEITE UNTEN PLATZ MACHEN – sonst deckt die Leiste den letzten Abschnitt zu. Derselbe
     Ausdruck wie in `app-menue.css`. */
  body.wb { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }

  /* ⚠️ DIE FUSSZEILE ENTFÄLLT AUF DEM TELEFON (Ansage des Betreibers, 20.09.2026). Sie trägt
     „© JETZT.GOLF“, Impressum und Datenschutz – und stand seit dem Menü-Umbau direkt über
     einer Leiste, die dieselbe Gegend belegt. BEIDE RECHTSWEGE BLEIBEN ERREICHBAR: Impressum
     und Datenschutz stehen im Klappmenü oben, und zwar NUR dort (`.wb-nur-menue`) – deshalb
     darf diese Zeile hier verschwinden, ohne dass etwas unauffindbar wird. */
  .wb-fuss { display: none; }
}

/* ── Abschnitte und Schrift ─────────────────────────────────────────────── */

.wb-abschnitt {
  padding: clamp(80px, 12vw, 160px) var(--jg-gutter);
}

.wb-innen { max-width: var(--wb-breite); margin: 0 auto; }
.wb-mitte { text-align: center; }

.wb-zeile {
  margin: 0 0 14px;
  /* 20 statt 17 px (Ansage des Betreibers, 21.09.2026: „die gehen sonst unter“). Am 20.09. ging
     es schon einmal von 15 auf 17 – auf dieselbe Ansage, und der Schritt war zu klein. Gilt für
     JEDE Auftaktzeile auf BEIDEN Seiten (5x /fuer-golfer, 6x /fuer-clubs) – sie sind alle
     `.wb-zeile`, eine Zahl reicht. */
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--jg-green);
}

.wb-riesig,
.wb-gross {
  margin: 0;
  font-weight: 700;
  letter-spacing: -.035em;
  /* 1.14 statt 1.02 (Ansage des Betreibers, 02.10.2026) – wie die Anleitung: Die Punkte eines
     Umlauts am Zeilenanfang („Änderung“) stießen sonst fast an die Zeile darüber. Gilt für
     BEIDE Werbeseiten, sie teilen diese Datei. */
  line-height: 1.14;
  text-wrap: balance;
}

.wb-riesig { font-size: var(--wb-schrift-riesig); }
.wb-gross  { font-size: var(--wb-schrift-gross); }

.wb-leise { color: #8a9892; }     /* zweite Zeile einer Ueberschrift, Apple-typisch heller */

.wb-einleitung {
  max-width: 620px;
  margin: 22px auto 0;
  font-size: var(--wb-schrift-mittel);
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--jg-muted);
  text-wrap: pretty;
}

.wb-links .wb-einleitung { margin-left: 0; }

/* Im linksbuendigen Abschnitt („Auch bei uns“) richtet sich auch die Knopfreihe links aus –
   `.wb-knoepfe` zentriert sonst, was neben linksbuendigem Text schief aussaehe. Kein neuer
   Klassenname noetig: `.wb-links` ist genau der Zusammenhang, in dem das gilt. */
.wb-links .wb-knoepfe { justify-content: flex-start; margin-top: 28px; }

/* ── Knoepfe ────────────────────────────────────────────────────────────── */

.wb-knoepfe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 34px;
}

.wb-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  padding: 12px 26px;
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--jg-r-pill);
  border: 1px solid var(--jg-green);
}

.wb .wb-knopf-voll { color: #fff; background: var(--jg-green); }
.wb .wb-knopf-voll:hover { background: var(--jg-green-dark); border-color: var(--jg-green-dark); }
.wb .wb-knopf-rand { color: var(--jg-green); background: none; }
.wb .wb-knopf-rand:hover { background: var(--jg-green-wash); }
/* Weißer Knopf für dunkle Flächen (02.10.2026, Block „Zur Anleitung“ auf /fuer-golfer). */
.wb .wb-knopf-hell { color: var(--wb-tief); background: #fff; border-color: #fff; }
.wb .wb-knopf-hell:hover { color: var(--wb-tief); background: #e8f2ee; border-color: #e8f2ee; }

.wb .wb-pfeil-link {
  font-size: 17px;
  color: var(--jg-green);
  text-decoration: none;
}
.wb .wb-pfeil-link:hover { text-decoration: underline; }

/* ── Das Telefon ────────────────────────────────────────────────────────── */

/* Rahmen, Insel und Bildschirm aus CSS – kein Produktfoto eines fremden Herstellers,
   nur die Form. Das Bildschirmfoto ist echt (jetzt.golf, 390 × 844 @2x).

   SILBERNES METALLBAND UND SCHWARZER GLASRAND (04.10.2026, nach einer Vorlage des Betreibers,
   zuerst auf der Startseite abgenommen). Das Band ist der RAHMEN (`border`, durchsichtig), über
   den ein Silberverlauf gemalt wird (`border-box`); innen bleibt es schwarz (`padding-box`). So
   braucht es kein zusätzliches Element. ⚠️ Rahmen + Polster ergeben zusammen die alten 11 px –
   damit bleibt der Bildschirm Pixel für Pixel, wo er war (die Lupe auf /fuer-golfer hängt daran).
   Keine Seitentasten (Ansage des Betreibers: „wir lassen die Tasten einfach weg“). */
.wb-telefon {
  --wb-band: 4px;
  position: relative;
  width: clamp(230px, 27vw, 320px);
  aspect-ratio: 390 / 844;
  padding: calc(11px - var(--wb-band));
  border: var(--wb-band) solid transparent;
  background:
    linear-gradient(#0b0b0c, #0b0b0c) padding-box,
    linear-gradient(145deg, #f1f2f4 0%, #c3c6cb 28%, #eef0f2 52%, #a9adb3 78%, #dfe1e4 100%) border-box;
  border-radius: 54px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .14),
    0 40px 80px -20px rgba(11, 31, 24, .35),
    0 18px 36px -18px rgba(11, 31, 24, .3);
}

/* DIE INSEL WÄCHST MIT DER BREITE (04.10.2026). Vorher feste 25 px – die Statusleiste skaliert
   aber mit (SVG), und im kleinen Fächer auf dem Handy säßen Insel und Uhrzeit sonst nicht auf
   einer Höhe. `margin-top` in Prozent rechnet von der BREITE; 3,3 % + halbe Inselhöhe ergibt
   die Mitte der Statusleiste (7,4 % der Bildschirmbreite). */
.wb-telefon::before {                         /* die Insel */
  content: "";
  position: absolute;
  top: calc(11px - var(--wb-band));
  left: 50%;
  z-index: 2;
  width: 29%;
  aspect-ratio: 3.5;
  margin-top: 3.3%;
  background: #000;
  border-radius: 99px;
  transform: translateX(-50%);
}

/* OBEN LIEGT DIE STATUSLEISTE DES TELEFONS. Das Bildschirmfoto zeigt nur den Seiteninhalt;
   ohne diesen Streifen saesse die Insel mitten auf dem Logo der Kopfleiste. `padding-top` in
   Prozent rechnet von der BREITE – genau das, woran Insel und Rahmen haengen. */
.wb-bildschirm {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding-top: 15%;
  overflow: hidden;
  /* Die Statusleiste (Uhrzeit, Netz, Akku) als EINE Datei für alle gezeichneten Telefone – auch
     die Club-Anleitung und die Startseite holen sie von hier. Absoluter Pfad: Diese Datei lädt
     auch auf /fuer-golfer, /fuer-clubs und der Golfer-Anleitung, nie relativ zu `status/`. */
  background: #fff url("/status/werbung/statusleiste.svg") center top / 100% auto no-repeat;
  border-radius: 43px;
}

.wb-bildschirm img {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  object-fit: cover;
  object-position: top;
}

/* ⚠️ DAS FOTO GANZ ZEIGEN, AUCH DIE APP-LEISTE (02.10.2026, Befund des Betreibers: „der footer
   sieht auch nicht gut aus“). Die Grundform oben hat ein festes Verhältnis 390:844 – minus dem
   15-%-Streifen der Statusleiste bleibt für das Foto (ebenfalls 390:844) zu wenig Höhe, und
   `object-fit: cover` schnitt unten genau die App-Leiste ab (gemessen 3 % = ihre Beschriftungen),
   die runde Ecke den Rest. Diese Telefone nehmen ihre Höhe deshalb aus dem Bild: Statusleiste +
   ganzes Foto + Home-Balken. Der Balken ist wie beim echten iPhone eine eigene Zone – ohne ihn
   schnitte die Rundung die äußeren Symbole an. In PROZENT der Breite, damit er im kleinen Fächer
   auf dem Handy (~140 px) im Verhältnis bleibt.

   BEWUSST NICHT FÜR ALLE `.wb-telefon`: Das Kopf-Telefon auf /fuer-golfer ragt absichtlich aus dem
   Abschnitt (sein Fuß ist nie sichtbar), und die Club-Info auf /fuer-clubs (`wb-scrollbild`) setzt
   Kopf und Leiste als eigene Bilder – dort fehlt nichts. */
.ag-telefon,
.wb-faecher .wb-telefon { aspect-ratio: auto; }

.ag-telefon .wb-bildschirm,
.wb-faecher .wb-telefon .wb-bildschirm { height: auto; }

.ag-telefon .wb-bildschirm img,
.wb-faecher .wb-telefon .wb-bildschirm img { flex: none; height: auto; aspect-ratio: 390 / 844; }

.ag-telefon .wb-bildschirm::after,
.wb-faecher .wb-telefon .wb-bildschirm::after {
  content: "";
  flex: none;
  align-self: center;
  width: 36%;
  aspect-ratio: 22 / 1;
  margin: 3% 0 3.4%;
  background: #1b1d1c;
  border-radius: 99px;
}

/* ── 1. Kopf ────────────────────────────────────────────────────────────── */

.wb-held { padding-bottom: 0; overflow: hidden; }

.wb-held-buehne {
  display: flex;
  justify-content: center;
  margin-top: clamp(56px, 8vw, 96px);
  /* Das Telefon ragt unten aus dem Abschnitt – wie bei Apple steht es auf der Kante. */
  margin-bottom: -18%;
}

/* ── 2. Der Stempel ─────────────────────────────────────────────────────── */

.wb-stempel { background: var(--jg-bg); }

.wb-stempel-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}

@media (max-width: 760px) {
  .wb-stempel-raster { grid-template-columns: minmax(0, 1fr); }
}

/* Die Lupe: derselbe echte Bildschirm, vergroessert auf die Zeile „Stand: …". */
/* ## DER AUSSCHNITT AUS DEM TELEFON-FOTO (neu gefasst 22.09.2026)

   Vorher war das eine LUPE: `transform: scale(1.5)` mit einem Drehpunkt auf Hoehe der
   Stand-Zeile. Zwei Dinge sahen dabei nach Versehen aus (Befund des Betreibers):
   der **Header ragte halb ins Bild** (die Vergroesserung schob ihn von oben herein), und
   rechts war **„Aktualisieren" angeschnitten**, weil 1,5-fache Breite nicht mehr ins Fenster
   passt. Dazu musste der Drehpunkt nach jeder Neuaufnahme nachgemessen werden.

   JETZT OHNE ZOOM, dafuer mit einem Ausschnitt, der auf TRENNLINIEN beginnt und endet. Am
   Foto gemessen (390x844 CSS-Punkte, Hintergrundfarbe je Bildzeile am linken Rand):

     51  Trennlinie unter dem Header   <- hier faengt der Ausschnitt an
     113 | 114-143 Stand-Streifen (grau) | 144
     210 Trennlinie Platz/Carts
     276 Trennlinie Carts/Range         <- hier hoert er auf

   Sichtbar sind damit vier vollstaendige Bloecke: Clubname, Stand, Platz, Carts – in voller
   Breite, also mit „Aktualisieren" und den gruenen Knoepfen. 390/225 ergibt das Seitenverhaeltnis.

   ⚠️ BEI EINER NEUAUFNAHME NEU MESSEN: `aspect-ratio` und `margin-top` haengen am Foto.
   `margin-top` ist in % der BREITE zu rechnen (51/390 = 13.08%) – prozentuale margins beziehen
   sich in CSS immer auf die Breite, und die Bildhoehe folgt ihr ueber `height: auto`. */
.wb-lupe {
  aspect-ratio: 390 / 225;
  overflow: hidden;
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 30px 60px -30px rgba(11, 31, 24, .3);
}

.wb-lupe img {
  display: block;
  width: 100%;
  height: auto;                  /* sonst gilt das height-Attribut und das Bild wird gestaucht */
  margin-top: -13.08%;           /* 51 von 390 – die Trennlinie unter dem Header */
}

/* ── 3. Kostet nichts (dunkle Flaeche) ──────────────────────────────────── */

.wb-dunkel {
  color: #fff;
  background: var(--wb-tief);
}

.wb-dunkel .wb-zeile { color: #7fd1ad; }
.wb-dunkel .wb-leise { color: #6f8a80; }
.wb-dunkel .wb-einleitung { color: #b9c9c2; }

.wb-drei {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(48px, 7vw, 80px);
  overflow: hidden;
  background: rgba(255, 255, 255, .1);
  border-radius: 24px;
}

@media (max-width: 760px) {
  .wb-drei { grid-template-columns: minmax(0, 1fr); }
}

.wb-drei-feld {
  padding: 34px 28px;
  background: var(--wb-tief);
}

.wb-drei-feld strong {
  display: block;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
}

.wb-drei-feld span { display: block; margin-top: 8px; color: #b9c9c2; }

/* ── 4. Mit Konto: drei Telefone im Faecher, antippbar ─────────────────── */

/* ANTIPPEN HOLT EIN TELEFON NACH VORN – OHNE JAVASCRIPT (Wunsch des Betreibers, 19.09.2026).
   Die drei Telefone sind LABELS zu drei unsichtbaren Radio-Knoepfen; der gewaehlte steht in der
   Mitte, der bisher mittlere tauscht mit ihm den Platz. Tastatur geht von selbst (Tab, Pfeile).

   ZWEI GETRENNTE ZAHLEN steuern die Lage, und das ist der Kern:
     --wb-auf    0 … 1   wie weit der Faecher aufgeschoben ist – kommt aus dem SCROLLEN
     --wb-platz -1/0/1   links / Mitte / rechts                – kommt aus dem ANTIPPEN
     --wb-seite  0/1     steht es aussen? (kleiner, gedreht)    – ebenfalls aus dem Antippen
   Wuerde das Scrollen direkt `transform` animieren (so bis 1.19.2), haette eine laufende
   Animation jede Platzaenderung ueberschrieben – das Antippen waere wirkungslos gewesen.
   Registriert (@property), damit `--wb-platz` WEICH uebergeht; ohne Registrierung springt es nur.

   OHNE UNTERSTUETZUNG: `--wb-auf` startet bei 1, der Faecher steht also offen da.

   `--wb-auf` WIRD NICHT VERERBT, sondern an jedem Telefon selbst animiert – aus demselben Grund
   wie beim Schalter auf /fuer-clubs (dort steht der Befund): Ein animierter, geerbter Wert kam
   beim Betreiber nicht bei den Kindern an. */
@property --wb-auf   { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --wb-platz { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --wb-seite { syntax: "<number>"; inherits: false; initial-value: 0; }

.wb-faecher {
  --wb-weite: 62%;              /* Versatz der Aussenseiter, in Telefonbreiten */
  --wb-klein: .1;               /* so viel kleiner stehen sie aussen */
  position: relative;
  display: grid;
  place-items: center;
  margin-top: clamp(56px, 8vw, 96px);
  padding-bottom: 20px;
}

/* Die Knoepfe selbst: unsichtbar, aber fokussierbar – und MITTEN im Faecher. Lagen sie oben am
   Abschnitt, spraenge der Browser beim Fokus dorthin, sobald man ein Telefon antippt. */
.wb-faecher-wahl {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.wb-faecher .wb-telefon {
  --wb-platz: 0;
  --wb-seite: 0;
  display: block;
  grid-area: 1 / 1;
  z-index: 1;
  cursor: pointer;
  opacity: calc(1 - var(--wb-seite) * (1 - var(--wb-auf)));
  transform:
    translateX(calc(var(--wb-platz) * var(--wb-weite) * var(--wb-auf)))
    translateY(calc(var(--wb-seite) * 8% * var(--wb-auf)))
    rotate(calc(var(--wb-platz) * 5deg * var(--wb-auf)))
    scale(calc(1 - var(--wb-seite) * var(--wb-klein)));
  -webkit-tap-highlight-color: transparent;
}

.wb-faecher .wb-telefon .wb-bildschirm { display: flex; }

/* Die Plaetze je Auswahl. Grundstellung seit 19.09.2026 (Ansage des Betreibers): TURNIERE vorn,
   Club links, Runde rechts – vorgewaehlt ist `#wb-f1` im HTML.
   Der gewaehlte TAUSCHT mit dem bisher mittleren; der dritte bleibt, wo er ist. */
#wb-f2:checked ~ .wb-f1,
#wb-f3:checked ~ .wb-f1 { --wb-platz: -1; --wb-seite: 1; }
#wb-f1:checked ~ .wb-f2 { --wb-platz: -1; --wb-seite: 1; }
#wb-f3:checked ~ .wb-f2 { --wb-platz:  1; --wb-seite: 1; }
#wb-f1:checked ~ .wb-f3,
#wb-f2:checked ~ .wb-f3 { --wb-platz:  1; --wb-seite: 1; }

#wb-f1:checked ~ .wb-f1,
#wb-f2:checked ~ .wb-f2,
#wb-f3:checked ~ .wb-f3 { z-index: 2; cursor: default; }

/* Tastatur: der Fokus liegt am unsichtbaren Knopf – sichtbar wird er am Telefon. */
#wb-f1:focus-visible ~ .wb-f1,
#wb-f2:focus-visible ~ .wb-f2,
#wb-f3:focus-visible ~ .wb-f3 { outline: 3px solid var(--jg-green-light); outline-offset: 6px; }

.wb-faecher-hinweis {
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--jg-muted);
}

/* Leiser Nachsatz unter einem Abschnitt – derzeit das Einbau-Angebot unter den zwei Code-Zeilen.
   EIGENE Klasse, keine geborgte: `.wb-faecher-hinweis` sieht heute gleich aus, gehoert aber zum
   Faecher; wer den einmal anders setzt, verschoebe hier stillschweigend etwas mit. */
.wb-nachsatz {
  margin: 20px 0 0;
  font-size: 15px;
  color: var(--jg-muted);
}

.wb-nachsatz strong {
  color: var(--jg-ink);
  font-weight: 600;
}

/* Der Weg zur Anleitung unter dem Einbau-Angebot – eigene Klasse, damit der zweite Nachsatz
   enger an den ersten rückt und sein Link grün ist, ohne `.wb-nachsatz` selbst zu ändern. */
.wb-anleitung-hinweis { margin-top: 6px; }
.wb-anleitung-hinweis a { color: var(--jg-green); text-decoration: none; }
.wb-anleitung-hinweis a:hover { text-decoration: underline; }

/* „Tippe" am Telefon, „Klicke" mit der Maus – entschieden am Zeigegeraet, nicht an der Breite
   (ein Tablet quer ist breit und hat trotzdem keinen Mauszeiger). */
.wb-nur-maus { display: none; }
@media (hover: hover) and (pointer: fine) {
  .wb-nur-maus  { display: inline; }
  .wb-nur-touch { display: none; }
}

/* AUCH AUF DEM HANDY ALLE DREI (Befund des Betreibers, 19.09.2026: „faechert mobil nicht aus").
   Bis 1.19.1 standen die Aussenseiter hier auf `display: none` – damit war die Bewegung auf genau
   dem Geraet weg, auf dem die Seite am meisten gelesen wird. Kleiner, enger gefaechert, damit die
   Aussenseiter nicht ueber den Rand ragen. Rahmen, Rundung und Insel sind oben in festen Pixeln
   fuer ~300 px Breite gesetzt; bei ~140 px saehen sie klobig aus und muessen mit. */
@media (max-width: 600px) {
  .wb-faecher { --wb-weite: 45%; --wb-klein: .15; }
  .wb-faecher .wb-telefon { --wb-band: 2px; width: 36vw; padding: 3px; border-radius: 24px; }
  .wb-faecher .wb-telefon::before { top: 3px; }
  .wb-faecher .wb-bildschirm { border-radius: 19px; }
}

.wb-vorteile {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(56px, 8vw, 88px);
  text-align: left;
}

@media (max-width: 860px) { .wb-vorteile { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .wb-vorteile { grid-template-columns: minmax(0, 1fr); } }

.wb-vorteil {
  padding: 26px 24px;
  background: var(--jg-bg);
  border-radius: 22px;
}

.wb-vorteil svg {
  width: 30px;
  height: 30px;
  color: var(--jg-green);
}

.wb-vorteil h3 {
  margin: 14px 0 6px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.015em;
}

.wb-vorteil p { margin: 0; color: var(--jg-muted); }

/* ── 5. Ans Handy legen ─────────────────────────────────────────────────── */

.wb-handy { background: var(--jg-bg); }

.wb-schritte {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 900px;
  margin: clamp(48px, 7vw, 80px) auto 0;
  padding: 0;
  list-style: none;
  counter-reset: wb-schritt;
}

@media (max-width: 700px) { .wb-schritte { grid-template-columns: minmax(0, 1fr); } }

.wb-schritte li {
  padding: 28px 24px;
  text-align: left;
  background: #fff;
  border-radius: 22px;
  counter-increment: wb-schritt;
}

.wb-schritte li::before {
  content: counter(wb-schritt);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--jg-green);
  border-radius: 50%;
}

.wb-schritte strong { display: block; font-size: 19px; letter-spacing: -.01em; }
.wb-schritte span { display: block; margin-top: 4px; color: var(--jg-muted); }
.wb-schritte svg { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; color: var(--jg-green); }

/* ── 6. Schluss und Fuss ────────────────────────────────────────────────── */

.wb-schluss .wb-knoepfe { flex-direction: column; align-items: center; }

/* Der Block „Zur Anleitung“ vor „Reden wir.“ (02.10.2026): hellgrau-grüne Fläche zwischen dem
   dunklen „Wer davon hat“ und dem weißen Schluss. */
.wb-anleitung-block { background: var(--jg-bg); }

.wb-fuss {
  padding: 28px var(--jg-gutter) 40px;
  font-size: 13px;
  color: var(--jg-muted);
  border-top: 1px solid var(--jg-line);
}

.wb-fuss-innen {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  max-width: var(--wb-breite);
  margin: 0 auto;
}

.wb-fuss a { margin-left: 18px; text-decoration: none; }
.wb-fuss a:first-child { margin-left: 0; }
.wb-fuss a:hover { color: var(--jg-ink); }

/* ============================================================================
   BEWEGUNG – nur, wo der Browser sie kann und der Nutzer sie will.
   Alles darunter ist Zugabe; die Seite oben ist ohne diesen Block vollstaendig.
   ============================================================================ */

@media (prefers-reduced-motion: no-preference) {

  /* Antippen im Faecher: Platz und Groesse gleiten, statt zu springen. */
  .wb-faecher .wb-telefon {
    transition: --wb-platz .6s cubic-bezier(.2, .7, .2, 1), --wb-seite .6s cubic-bezier(.2, .7, .2, 1);
  }

  /* Beim Laden: Ueberschrift und Telefon steigen auf. Das braucht keine Scroll-Leiste,
     laeuft also auch in Browsern ohne `animation-timeline`. `backwards` haelt den
     Anfangszustand nur waehrend der Verzoegerung – danach gilt die Grundregel. */
  .wb-auftakt   { animation: wb-auftauchen .9s cubic-bezier(.2, .7, .2, 1) backwards; }
  .wb-auftakt-2 { animation-delay: .12s; }
  .wb-auftakt-3 { animation-delay: .24s; }
  .wb-held-buehne .wb-telefon {
    animation: wb-telefon-auf 1.3s cubic-bezier(.2, .7, .2, 1) .3s backwards;
  }

  @supports (animation-timeline: view()) {

    /* Einblenden beim Hereinscrollen – fuer alles mit `.wb-ein`. */
    .wb-ein {
      animation: wb-auftauchen linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 28%;
    }

    /* Das Kopf-Telefon kippt beim Wegscrollen nach hinten und waechst – Apple-typisch. */
    .wb-held-buehne {
      animation: wb-buehne-kippen linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
      perspective: 1400px;
    }

    /* ⚠️ HIER FUHR DIE LUPE BEIM SCROLLEN HERAN (`scale(1)` -> `scale(1.5)`), und eine
       Markierung blendete um die Stand-Zeile ein. BEIDES IST AM 22.09.2026 HERAUS: In der
       Endlage ragte der Header halb ins Bild und rechts war „Aktualisieren" abgeschnitten –
       beides sah nach Versehen aus. **Und Firefox kann `animation-timeline` nicht**, zeigt
       also dauerhaft genau diese Endlage. Ein Effekt, der in einem Browser als kaputtes
       Standbild endet, ist keiner. Der Ausschnitt steht jetzt ruhig und sitzt auf
       Trennlinien; das sanfte Hereinfahren macht `wb-ein` wie bei allem anderen. */

    /* Die Faecher-Telefone liegen erst uebereinander und fahren dann auseinander – animiert
       wird nur `--wb-auf`, die Plaetze bleiben dem Antippen ueberlassen. */
    .wb-faecher { view-timeline: --wb-faecher block; }
    .wb-faecher .wb-telefon {
      animation: wb-faecher-auf linear both;
      animation-timeline: --wb-faecher;
      animation-range: entry 30% cover 50%;
    }

    /* Die drei Felder auf der dunklen Flaeche nacheinander. NUR DER TEXT blendet ein, nicht das
       Feld: Das Raster darunter ist heller (es zeichnet die Trennlinien), und ein halb
       durchsichtiges Feld liess es waehrend des Einblendens als Kasten durchscheinen. */
    .wb-drei-feld > * {
      animation: wb-auftauchen linear both;
      animation-timeline: view();
    }
    .wb-drei-feld:nth-child(1) > * { animation-range: entry 10% cover 30%; }
    .wb-drei-feld:nth-child(2) > * { animation-range: entry 25% cover 38%; }
    .wb-drei-feld:nth-child(3) > * { animation-range: entry 40% cover 46%; }

    /* ⚠️ AUF DEM TELEFON OHNE STAFFELUNG – SONST BLEIBT DAS DRITTE FELD HALB DURCHSICHTIG
       STEHEN (Befund des Betreibers, 20.09.2026: „‚Ohne unnötigen Anruf‘ hat mobil die falsche
       Farbe (grau)“).

       Es war nicht die Farbe: GEMESSEN bei 375×667 stand der Text bei `opacity: 0.52` und noch
       23 px versetzt – weiß, aber halb durchsichtig auf dunklem Grund, und das liest sich als
       Grau. Die Staffelung oben ist für DREI FELDER NEBENEINANDER gedacht: Dort laufen sie
       gemeinsam durchs Bild, und 10/25/40 % ergeben ein Nacheinander. Unter 760 px stehen sie
       untereinander; jedes Feld scrollt einzeln, und das dritte erreicht sein schmales Fenster
       (40–46 %) nicht mehr, wenn der Abschnitt zum Stehen kommt.

       Dieselbe Spanne für alle drei ist hier also nicht Bequemlichkeit, sondern richtig: Ein
       Nacheinander gibt es untereinander ohnehin nicht zu sehen. */
    @media (max-width: 760px) {
      /* `entry 0% entry 100%`: fertig eingeblendet, sobald das Feld GANZ im Bild ist – die
         natuerliche Spanne fuer ein Auftauchen von unten. Ein `cover`-Endpunkt taugt hier nicht:
         Er misst, wie weit das Element den Bildschirm durchquert hat, und untereinander kommt
         das dritte Feld nie so weit. Erster Anlauf mit `cover 30%` brachte es von 0.52 auf
         0.87 – besser, aber immer noch nicht da (gemessen am 20.09.2026). */
      .wb-drei-feld:nth-child(1) > *,
      .wb-drei-feld:nth-child(2) > *,
      .wb-drei-feld:nth-child(3) > * { animation-range: entry 0% entry 100%; }
    }
  }
}

@keyframes wb-auftauchen {
  from { opacity: 0; transform: translateY(48px); }
  to   { opacity: 1; transform: none; }
}

@keyframes wb-telefon-auf {
  from { opacity: 0; transform: translateY(120px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

@keyframes wb-buehne-kippen {
  to { transform: rotateX(18deg) scale(1.06); opacity: .35; }
}

@keyframes wb-faecher-auf {
  from { --wb-auf: 0; }
  to   { --wb-auf: 1; }
}

/* ============================================================================
   ERGAENZUNGEN FUER /fuer-clubs (19.09.2026) – dieselben drei Grundsaetze wie oben.
   Die Bewegung dazu steht im eigenen Block am Ende, ebenfalls hinter @supports.
   ============================================================================ */

/* ── Browserfenster um ein Bildschirmfoto der Club-Website ──────────────── */

.wb-browser {
  overflow: hidden;
  text-align: left;
  background: #fff;
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(11, 31, 24, .08),
    0 40px 80px -30px rgba(11, 31, 24, .4);
}

.wb-browser-leiste {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  background: #eef1ef;
  border-bottom: 1px solid var(--jg-line);
}

.wb-browser-leiste i {
  width: 11px;
  height: 11px;
  background: #d3dad6;
  border-radius: 50%;
}

.wb-browser-leiste span {
  flex: 1;
  max-width: 340px;
  margin: 0 auto;
  padding: 3px 10px;
  overflow: hidden;
  font-size: 12px;
  color: var(--jg-muted);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #fff;
  border-radius: 6px;
}

.wb-browser img { width: 100%; height: auto; }

/* ABSTAND NACH UNTEN (Befund des Betreibers, 19.09.2026: das Fenster stiess direkt an den
   grauen Abschnitt darunter). Der Kopf hat `padding-bottom: 0`, weil auf /fuer-golfer das Telefon
   bewusst auf der Kante steht – das Browserfenster dagegen soll frei stehen, samt Schatten. */
/* DER BROWSER STEHT SEIT 21.09.2026 IN ABSCHNITT 3, nicht mehr im Auftakt – dort zeigte er den
   Zustand MIT unserem System und widersprach der Ueberschrift. Deshalb auch der neue Name und
   KEINE eigene Animation mehr: Er wird ueber `wb-ein` hereingescrollt wie alles andere in der
   Seitenmitte, statt beim Laden aufgezogen zu werden. */
.wb-beleg-browser {
  max-width: 980px;
  margin: clamp(48px, 7vw, 72px) auto 0;
}

/* ── Turniere: drei Ansichten hinter Reitern ───────────────────── */

/* SEIT 21.09.2026 REITER STATT ZWEI FENSTER NEBENEINANDER (Ansage des Betreibers: „die
   Screenshots sind etwas arg klein"). Nebeneinander blieben je rund 500 px – in einem
   Bildschirmfoto voller Formularfelder ist darin nichts mehr zu lesen. Hinter Reitern bekommt
   jedes Bild die volle Spaltenbreite.

   OHNE SKRIPT, wie alles auf diesen Seiten: drei Radio-Knoepfe, die Reiter sind ihre Labels.
   Die Knoepfe stehen VOR den Blaettern – `~` sieht nur nachfolgende Geschwister.

   ⚠️ EIGENE IDs `wb-r1..3`: Der Faecher auf dieser Seite belegt bereits `wb-f1..3`, und zwei
   gleiche IDs in einem Dokument waeren ein Fehler. Anders als beim Faecher haengt HIER kein
   fremdes CSS an den Namen – die Regeln unten stehen direkt dabei. */
.wb-reiter {
  margin-top: clamp(40px, 6vw, 64px);
}

.wb-reiter-wahl {
  position: absolute;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; white-space: nowrap; border: 0;
  clip-path: inset(50%);
}

.wb-reiter-leiste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 22px;
}

.wb-reiter-leiste label {
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 500;
  color: var(--jg-muted);
  background: none;
  border: 1px solid var(--jg-line);
  border-radius: var(--jg-r-pill);
  cursor: pointer;
}

.wb-reiter-leiste label:hover { color: var(--jg-ink); }

/* Der gewaehlte Reiter. Farbe UND Rahmen wechseln – Farbe allein traegt nicht, wenn jemand
   sie nicht unterscheiden kann. */
#wb-r1:checked ~ .wb-reiter-leiste label[for="wb-r1"],
#wb-r2:checked ~ .wb-reiter-leiste label[for="wb-r2"],
#wb-r3:checked ~ .wb-reiter-leiste label[for="wb-r3"] {
  color: #fff;
  background: var(--jg-green);
  border-color: var(--jg-green);
}

/* Tastatur: Der Fokus liegt am unsichtbaren Knopf, sichtbar wird er am Reiter. */
#wb-r1:focus-visible ~ .wb-reiter-leiste label[for="wb-r1"],
#wb-r2:focus-visible ~ .wb-reiter-leiste label[for="wb-r2"],
#wb-r3:focus-visible ~ .wb-reiter-leiste label[for="wb-r3"] {
  outline: 3px solid var(--jg-green-light);
  outline-offset: 3px;
}

.wb-reiter-blatt { display: none; }

#wb-r1:checked ~ .wb-reiter-blatt.wb-r1,
#wb-r2:checked ~ .wb-reiter-blatt.wb-r2,
#wb-r3:checked ~ .wb-reiter-blatt.wb-r3 { display: block; }

/* ── Der veraltete Stand im Auftakt ──────────────────────────── */

/* EIGENE KLASSEN, KEINE GEBORGTEN. `.wb-kachel` aus Abschnitt 2 sieht aehnlich aus, haengt aber
   am Schalter (`--wb-umgelegt`, Graustufen-Filter) – sie hier mitzubenutzen hiesse, dass ein
   Klick auf den Schalter weiter unten den Auftakt mitfaerbt.

   Text AUF dem Foto, nicht darunter: Die Kacheln sollen wie eine echte Club-Website aussehen,
   und dort steht er so. Der Verlauf macht ihn lesbar, ohne das Motiv zuzudecken. */
.wb-veraltet {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  max-width: 980px;
  /* ⚠️ DER ABSTAND NACH UNTEN MUSS HIER STEHEN: `.wb-held` hat `padding-bottom: 0` – das ist
     Absicht fuer /fuer-golfer, wo das Telefon bewusst auf der Kante steht. Das Browserfenster,
     das hier bis 21.09.2026 stand, brachte seinen Abstand selbst mit (`.wb-beleg-browser`);
     beim Austausch gegen die Kacheln ging er verloren und sie klebten am Abschnittsrand. */
  margin: clamp(40px, 6vw, 72px) auto clamp(64px, 9vw, 120px);
  padding: 0;
  list-style: none;
}

/* AUF DEM TELEFON ZWEI MAL ZWEI. Vier nebeneinander waeren bei 375 px je 80 px breit – die
   Schrift laege dann bei rund 8 px und das Bild sagte gar nichts mehr (gemessen am alten
   Bildschirmfoto, das genau daran scheiterte). */
@media (max-width: 720px) {
  .wb-veraltet { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

.wb-veraltet li {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 1 / 1;
  padding: 16px;
  overflow: hidden;
  color: #fff;
  text-align: left;
  background: #2f6a3f;           /* Flaeche, falls das Foto (noch) fehlt – nie flaechenlos */
  border-radius: 18px;
}

.wb-veraltet img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Der Verlauf liegt ZWISCHEN Foto und Text, darum ein eigenes Pseudoelement mit z-index 1. */
.wb-veraltet li::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  /* Kraeftiger als beim ersten Entwurf (.62 ab 40%): Auf dem Restaurant-Foto liegt unten ein
     heller Tellerrand, dort war die Schrift unruhig. Die dunklen Motive vertragen es ohne
     Verlust – im Bild gegengeprueft. */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .78));
}

.wb-veraltet b,
.wb-veraltet span {
  position: relative;
  z-index: 2;                    /* ueber dem Verlauf */
  font-size: clamp(15px, 1.9vw, 22px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
}

/* ── Der Schalter und die Kachel daneben ────────────────────────────────── */

.wb-griff { background: var(--jg-bg); }

/* DER SCHALTER IST ANKLICKBAR – OHNE JAVASCRIPT (Wunsch des Betreibers, 19.09.2026). Dasselbe
   Muster wie beim Faecher auf /fuer-golfer, aus demselben Grund:
     --wb-griff-auf  0 … 1  vom SCROLLEN – beim Hereinscrollen legt sich der Schalter von selbst um
     --wb-umgelegt   0 / 1  vom ANKLICKEN – eine unsichtbare Checkbox, die Karte ist ihr Label
     --wb-an         0 … 1  was ANGEZEIGT wird: der Scroll-Stand, beim Anklicken umgekehrt
   Animierte das Scrollen Farbe und Knopf direkt, ueberschriebe es jedes Klicken.
   Ohne Scroll-Animation startet `--wb-griff-auf` bei 1: Der Schalter steht auf „an“ und laesst
   sich trotzdem umlegen.

   ⚠️ JEDES ELEMENT RECHNET FUER SICH – NICHTS DAVON WIRD VERERBT (`inherits: false`). In der
   ersten Fassung animierte das Scrollen den Wert EINMAL am Elternteil, und Schalter, Text und
   Kachel erbten ihn. In Chrome lief das; beim Betreiber (19.09.2026) legte sich der Schalter
   beim Scrollen gar nicht mehr um – vermutlich reicht der Browser einen animierten, geerbten
   Wert nicht an die Kinder weiter. Die Fassung davor, mit einer Animation JE Element, lief bei
   ihm. Deshalb traegt jetzt jedes sichtbare Teil Animation, Klickwert und Uebergang selbst. */
@property --wb-griff-auf { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --wb-umgelegt  { syntax: "<number>"; inherits: false; initial-value: 0; }

.wb-zwei {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(16px, 3vw, 36px);
  align-items: center;
  max-width: 860px;
  margin: clamp(48px, 7vw, 80px) auto 0;
}

@media (max-width: 700px) {
  .wb-zwei { grid-template-columns: minmax(0, 1fr); }
  .wb-zwei-pfeil { transform: rotate(90deg); justify-self: center; }
}

.wb-zwei-titel {
  margin: 0 0 10px;
  /* 16 statt 13 px (Ansage des Betreibers, 21.09.2026, im selben Zug wie `.wb-zeile` auf 20):
     „CLUBVERWALTUNG“ und „EURE WEBSITE“ gingen neben der gewachsenen Abschnittszeile unter.
     Bewusst KLEINER als die 20 px dort – es sind Beschriftungen einer Grafik, keine
     Abschnittsüberschriften. In Versalien traegt 16 px gut. Nur auf /fuer-clubs im Einsatz. */
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--jg-muted);
  text-align: left;
}

/* Die Checkbox: unsichtbar, fokussierbar, MITTEN im Paar (sonst springt der Fokus). */
.wb-schalter-wahl {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

/* Die Teile, die sich mit dem Schalter aendern – je fuer sich (siehe oben). `--wb-an` ist bewusst
   NICHT registriert: So wird es an jedem Element aus dessen EIGENEN Werten gerechnet. */
.wb-schalter,
.wb-schalter::after,
.wb-wechsel > span,
.wb-kachel {
  --wb-an: calc(var(--wb-griff-auf) + var(--wb-umgelegt) * (1 - 2 * var(--wb-griff-auf)));
}

.wb-schalter-wahl:checked ~ * .wb-schalter,
.wb-schalter-wahl:checked ~ * .wb-schalter::after,
.wb-schalter-wahl:checked ~ * .wb-wechsel > span,
.wb-schalter-wahl:checked ~ * .wb-kachel { --wb-umgelegt: 1; }

.wb-schalter-wahl:focus-visible ~ .wb-zwei-links .wb-verwaltung {
  outline: 3px solid var(--jg-green-light);
  outline-offset: 4px;
}

.wb-verwaltung {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 150px;
  padding: 26px 24px;
  text-align: left;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 20px 40px -24px rgba(11, 31, 24, .25);
}

.wb-verwaltung strong { display: block; font-size: 22px; letter-spacing: -.015em; }

/* ZWEI WOERTER UEBEREINANDER IN EINER ZELLE: Das zweite ist die Endlage und steht ohne
   Bewegung allein da; das erste wird nur in der Animation eingeblendet. */
.wb-wechsel { display: grid; margin-top: 2px; font-size: 16px; font-weight: 500; }
.wb-wechsel > span { grid-area: 1 / 1; }
.wb-wechsel .wb-vorher { opacity: calc(1 - var(--wb-an)); color: var(--jg-red); }
.wb-wechsel .wb-nachher { opacity: var(--wb-an); color: var(--jg-green-light); }

.wb-schalter {
  position: relative;
  flex: none;
  width: 76px;
  height: 44px;
  background: color-mix(in srgb, var(--jg-green-light) calc(var(--wb-an) * 100%), var(--jg-switch-off));
  border-radius: 99px;
}

.wb-schalter::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 36px;
  height: 36px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
  transform: translateX(calc(var(--wb-an) * 32px));
}

.wb-zwei-pfeil { width: 36px; height: 36px; color: #9fb0a8; }

/* Die Kachel im Stil der Club-Website: Bild, dunkler Verlauf, weisse Schrift. */
.wb-kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 150px;             /* gleich hoch wie die Karte links – sonst kippt das Paar */
  padding: 22px;
  overflow: hidden;
  color: #fff;
  text-align: left;
  /* SEIT 21.09.2026 MIT FOTO statt gruener Flaeche. Zwei Gruende: Die Kachel soll aussehen wie
     auf einer echten Club-Website, und der `filter` unten (grau/dunkel im Aus-Zustand) war auf
     einer einfarbigen Flaeche kaum zu sehen – auf einem Foto ist der Wechsel deutlich. Dasselbe
     Motiv wie im Auftakt: Dort steht der Platz veraltet auf „geschlossen“, hier legt man ihn um.
     EIGENER AUSSCHNITT (900x360, 2,5:1): Die Kachel ist breit und flach; das quadratische
     Auftakt-Bild waere zu fast nichts beschnitten worden (gemessen: 376x150). Die Farbe bleibt
     als Rueckfall darunter – nie flaechenlos. */
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .55)),
    url("/status/werbung/kachel-demo-platz.jpg") center / cover no-repeat,
    #2f6a3f;
  border-radius: 22px;
  filter: grayscale(calc(1 - var(--wb-an))) brightness(calc(.7 + .3 * var(--wb-an)));
}

.wb-griff-hinweis {
  margin: 22px 0 0;
  font-size: 14px;
  color: var(--jg-muted);
}

.wb-kachel b { font-size: 26px; font-weight: 600; line-height: 1.15; }
.wb-kachel .wb-wechsel { font-size: 26px; font-weight: 600; line-height: 1.15; }
.wb-kachel .wb-vorher,
.wb-kachel .wb-nachher { color: #fff; }

/* ── Der Einbau-Code ────────────────────────────────────────────────────── */

.wb-code {
  max-width: 760px;
  margin: clamp(40px, 6vw, 64px) auto 0;
  padding: 24px 26px;
  overflow-x: auto;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.7;
  color: #d5e4dd;
  text-align: left;
  white-space: pre;
  background: var(--wb-tief);
  border-radius: 18px;
}

@media (max-width: 520px) {
  .wb-code { padding: 18px; font-size: 11.5px; }   /* schmal: lieber kleiner als seitlich schieben */
}

.wb-code .wb-code-marke { color: #7fd1ad; }
.wb-code .wb-code-leise { color: #6f8a80; }

.wb-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.wb-chips li {
  padding: 8px 16px;
  font-size: 15px;
  font-weight: 500;
  background: var(--jg-bg);
  border-radius: 99px;
}

/* ── Die dunkle Doppelflaeche „Entlastung auf beiden Seiten" ────────────── */

.wb-drei.wb-zwei-felder { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 760px) {
  .wb-drei.wb-zwei-felder { grid-template-columns: minmax(0, 1fr); }
}

.wb-vorteile-vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1000px) { .wb-vorteile-vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .wb-vorteile-vier { grid-template-columns: minmax(0, 1fr); } }

/* Telefon und Adresse untereinander – beide gleich gross, beide antippbar. */
.wb-kontakt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 26px;
}

.wb-kontakt-adresse {
  display: inline-block;
  font-size: var(--wb-schrift-mittel);
  font-weight: 600;
  letter-spacing: -.01em;
}

.wb .wb-kontakt-adresse { color: var(--jg-green); text-decoration: none; }
.wb .wb-kontakt-adresse:hover { text-decoration: underline; }

/* ── Club-Info zum Durchscrollen (vor „Wer davon hat“, seit 27.09.2026) ─────
   Wunsch des Betreibers: die Clubseite als Demo, KOMPLETT per Scrollen. Drei Bilder aus
   `build/werbefoto-clubseite.sh`: Kopfleiste und App-Leiste stehen fest (wie `sticky`/`fixed`
   auf dem echten Telefon), dazwischen scrollt die ganze Seite.

   ⚠️ `.wb-bildschirm img` („Das Telefon“) gilt auch fuer diese drei Bilder – mit `flex: 1` und
   `object-fit: cover` zoge sie jedes auf volle Hoehe und schnitte es zu. Die Regeln hier muessen
   deshalb SPEZIFISCHER sein, nicht nur spaeter. Genau so sah es aus, als eine Vorschau die neue
   Seite mit der alten `werbung.css` aus dem Browser-Cache zeigte.
   ⚠️ `overscroll-behavior` bleibt auf `auto`: Wer am Handy durch die Seite wischt und das Telefon
   trifft, scrollt erst dessen Inhalt – an dessen Ende laeuft die Bewegung an der Seite weiter. */
.wb-demo-buehne {
  display: flex;
  justify-content: center;
  margin-top: clamp(40px, 6vw, 72px);
}

.wb-bildschirm.wb-scrollbild > .wb-kopfbild,
.wb-bildschirm.wb-scrollbild > .wb-leistenbild {
  flex: none;
  width: 100%;
  height: auto;
}

.wb-bildschirm.wb-scrollbild > .wb-seitenbild {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}

.wb-bildschirm.wb-scrollbild > .wb-seitenbild::-webkit-scrollbar { display: none; }

.wb-bildschirm.wb-scrollbild .wb-seitenbild img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: fill;
}

/* ── Bewegung fuer /fuer-clubs ──────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {


  /* Anklicken des Schalters: umlegen statt umspringen. */
  .wb-schalter,
  .wb-schalter::after,
  .wb-wechsel > span,
  .wb-kachel { transition: --wb-umgelegt .35s ease-in-out; }

  @supports (animation-timeline: view()) {

    /* EIN Wert fuer Schalter UND Kachel: Beide stehen am selben Umlegen, sonst liefe die
       Website dem Schalter voraus oder hinterher – und genau das Gleichzeitige ist die Aussage.
       Animiert wird nur `--wb-griff-auf`; alles Sichtbare rechnet sich daraus (siehe oben). */
    .wb-zwei { view-timeline: --wb-griff block; }

    .wb-schalter,
    .wb-schalter::after,
    .wb-wechsel > span,
    .wb-kachel {
      animation: wb-griff-umlegen ease-in-out both;
      animation-timeline: --wb-griff;
      animation-range: cover 38% cover 50%;
    }

  }
}

@keyframes wb-griff-umlegen  { from { --wb-griff-auf: 0; } to { --wb-griff-auf: 1; } }

/* ══ ANLEITUNG FÜR GOLFER (/anleitung-golfer, 02.10.2026) ═════════════════
   Eigene Teile mit `ag-`, alles andere aus der Bauform der Werbeseiten. Eine Seite mit
   Sprungmarken; je Abschnitt Text und – wo ein echtes Bildschirmfoto da ist – ein Telefon. */

.ag-auftakt { padding-bottom: clamp(48px, 7vw, 80px); }

/* Sprungmarken: Pillen wie die Kapitelzeile der Club-Anleitung; umbrechen statt wischen –
   es sind sieben, und auf dem Telefon soll man alle sehen. */
.ag-marken {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  max-width: 760px; margin: clamp(36px, 5vw, 52px) auto 0;
}
.ag-marken a {
  padding: 7px 14px; font-size: 14px; font-weight: 600;
  color: var(--jg-ink); text-decoration: none;
  background: var(--jg-bg); border-radius: var(--jg-r-pill);
}
.ag-marken a:hover { color: var(--jg-green); background: var(--jg-green-wash); }

/* Sprungziele nicht unter der festen Kopfleiste verschwinden lassen. */
.wb [id] { scroll-margin-top: 70px; }

.ag-zwischen { margin: clamp(40px, 6vw, 64px) 0 0; font-size: 20px; letter-spacing: -.01em; }
.ag-zwischen + .wb-schritte { margin-top: 18px; }

/* Android hat zwei Wege, nicht drei Schritte – zwei Spalten, auf dem Telefon untereinander. */
.ag-schritte-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 620px; }
@media (max-width: 700px) { .ag-schritte-zwei { grid-template-columns: minmax(0, 1fr); } }

/* Text und Telefon nebeneinander – OHNE Media Query: Die Spalte entscheidet (Kurzliste 10).
   Unter 2 × 300 px steht das Telefon unter dem Text. */
.ag-buehne {
  display: grid; gap: 40px 64px; align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  max-width: 960px; margin: 0 auto;
}
.ag-nur-text { grid-template-columns: minmax(0, 1fr); max-width: 680px; }

.ag-text { font-size: 17px; line-height: 1.6; text-align: left; }
.ag-text .wb-zeile, .ag-text .wb-gross { text-align: left; }
/* In der halben Spalte neben dem Telefon wäre die volle Größe (bis 72 px) zu groß: „Dein Club sagt
   Bescheid.“ brach am Rechner in vier Zeilen zu je einem Wort. Auf dem Telefon bleibt es bei 34 px. */
.ag-text .wb-gross { margin-bottom: 22px; font-size: clamp(34px, 4.4vw, 54px); }
.ag-text p { margin: 0 0 16px; }
.ag-text > :last-child { margin-bottom: 0; }

.ag-liste { margin: 0 0 18px; padding-left: 22px; }
.ag-liste li { margin-bottom: 10px; padding-left: 4px; }
.ag-liste li::marker { color: var(--jg-green); font-weight: 700; }

.ag-telefon { justify-self: center; }

/* GRÖSSER, DÜNNERER RAND – WIE IN DER CLUB-ANLEITUNG (03.10.2026, Ansage des Betreibers: „das
   iPhone etwas größer und mit dünnerem Rand … wie bei der Anleitung für Clubs etwas mehr Breite“).
   Breite aus `.anl-telefon` (webapp/anleitung.css): so breit, wie die Spalte erlaubt, höchstens
   340 px. Vorher `clamp(230px, 27vw, 320px)` – auf 375 px blieb das Bildschirmfoto 230 px schmal.
   Der RAHMEN ist bewusst DÜNNER als dort (6–8 px statt 6–11 px): Mit den Club-Werten blieb er am
   Rechner bei 11 px – genau wie vorher, also nicht „dünner“ (gemessen 1024 px).
   Innenradius = Außenradius − Rahmen, sonst stehen die Ecken schief im Rahmen. NUR `.ag-telefon`:
   Die Telefone der Werbeseiten (Kopf, Fächer, Club-Info) bleiben, wie sie sind. Der Schatten
   bleibt – anders als in der Club-Anleitung ist dieses Telefon unten geschlossen. */
.ag-telefon {
  --ag-rahmen: clamp(6px, 1vw, 8px);
  --ag-rund: 46px;
  --wb-band: 3px;
  width: min(100%, 340px);
  padding: calc(var(--ag-rahmen) - var(--wb-band));
  border-radius: var(--ag-rund);
}
.ag-telefon::before { top: calc(var(--ag-rahmen) - var(--wb-band)); }
.ag-telefon .wb-bildschirm { border-radius: calc(var(--ag-rund) - var(--ag-rahmen)); }

/* Der Merke-Kasten: grüner Rand links, heller Grund – wie in der Club-Anleitung. Auf den
   hellgrauen Abschnitten (`wb-handy`) weiß, sonst hellgrün, damit er sich immer abhebt. */
.ag-merke {
  max-width: 680px; margin: 28px auto 0; padding: 14px 18px;
  font-size: 16px; line-height: 1.55; text-align: left;
  background: var(--jg-green-faint); border-left: 3px solid var(--jg-green); border-radius: 8px;
}
.wb-handy .ag-merke { background: #fff; }

/* „E-Mail“ nicht am Bindestrich umbrechen („E-“ / „Mail“ sah auf dem Telefon kaputt aus). */
.ag-nw { white-space: nowrap; }


/* Das geteilte Ergebnis unter „Nach der Runde“ – das ECHTE Bild aus „Scorekarte ansehen“, kein
   Nachbau. Weiß mit Schatten, wie ein Foto auf dem hellgrauen Abschnitt (`wb-handy`). */
.ag-ergebnis { max-width: 620px; margin: clamp(48px, 7vw, 72px) auto 0; }
.ag-ergebnis img {
  width: 100%; height: auto;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(14, 42, 32, .16), 0 2px 8px rgba(14, 42, 32, .08);
}
.ag-ergebnis figcaption { margin-top: 14px; font-size: 15px; color: var(--jg-muted); text-align: center; }

/* Der Schluss steht hier auf DUNKLER Fläche; Grün auf Tiefgrün wäre kaum lesbar. Dieselbe
   Farbe wie `.wb-dunkel .wb-zeile`. */
.wb-dunkel .wb-pfeil-link { color: #7fd1ad; }

/* „WARUM EIN KONTO?“ (02.10.2026). Die Kurzfassung als leise Zeile unter einem Konto-Knopf, die
   Erklärung als Kasten in der Anleitung (`#konto-warum`). ⚠️ Der Kasten hat dieselbe Bauform wie
   `.konto-warum` in `konto.css` (Registrierungsseite) – wer eine ändert, zieht die andere nach. */
.wb-warum-kurz {
  max-width: 520px;
  margin: 16px auto 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--jg-muted);
}
.wb-knoepfe .wb-warum-kurz { margin: 0; }
.wb-warum-kurz a { color: var(--jg-green); font-weight: 600; }
.wb-dunkel .wb-warum-kurz { color: #b9c9c2; }
.wb-dunkel .wb-warum-kurz b { color: #fff; }
.wb-dunkel .wb-warum-kurz a { color: #7fd1ad; }

.wb .konto-warum {
  margin-top: 24px;
  padding: 14px 18px;
  font-size: 16px;
  line-height: 1.55;
  text-align: left;
  background: var(--jg-green-faint);
  border-left: 3px solid var(--jg-green);
  border-radius: 8px;
}
.wb .konto-warum summary { cursor: pointer; list-style: none; }
.wb .konto-warum summary::-webkit-details-marker { display: none; }
.wb .konto-warum-mehr { white-space: nowrap; font-weight: 600; color: var(--jg-green); text-decoration: underline; }
.wb .konto-warum[open] .konto-warum-mehr { display: none; }
.wb .konto-warum p { margin: 10px 0 0; }
.wb .konto-warum ul { margin: 8px 0 0; padding-left: 20px; }
.wb .konto-warum li { margin-top: 4px; }
.wb .konto-warum li::marker { color: var(--jg-green); }
.wb .konto-warum a { font-weight: 600; color: var(--jg-green); }