/* ══════════════════════════════════════════════════════════════════════════════════════════
   ANLEITUNG DER CLUBVERWALTUNG (02.10.2026)

   Gestaltung nach `/fuer-clubs` (`Claude/werbung.css`, Ansage des Betreibers): grüne
   Auftaktzeile, große zweizeilige Überschrift mit heller zweiter Zeile, viel Luft, Abschnitte
   im Wechsel weiß / hellgrau, Kapitel als dunkle Bänder, die Ansichten im gezeichneten iPhone.

   ⚠️ NICHT `werbung.css` EINBINDEN, sondern die Maße hier mit `anl-` nachbilden: Jene Datei
   liegt im Bündel der öffentlichen Seiten (`status/`), nicht in `webapp/`, und trägt die ganze
   Bewegung der Werbeseiten mit. Die Werte (Schriftgrößen, Farben, Telefonrahmen) sind von dort
   übernommen und dort begründet.

   ⚠️ ALLE EIGENEN KLASSEN TRAGEN `anl-` – vor dem Anlegen gegrept, der Präfix war frei. Die
   Nachbauten IM TELEFON benutzen dagegen ABSICHTLICH die echten Klassen der Verwaltung
   (`zrow`, `modal`, `info-check` …), damit sie aussehen wie das Original und mitziehen.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

.anl-seite {
  --anl-schrift-gross:  clamp(30px, 5.2vw, 60px);
  --anl-schrift-mittel: clamp(19px, 2.2vw, 26px);
  --anl-breite: 1080px;
  --anl-tief: #0b1f18;            /* wie `--wb-tief` auf /fuer-clubs: Tannengrün, fast schwarz */

  background: #fff;
}

/* `hidden` braucht eine eigene Zeile, wo eine eigene `display`-Regel gilt (Kurzliste 7). */
.anl-nav[hidden],
.anl-kapitelnav[hidden],
#anl-inhalt[hidden] { display: none; }

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

/* Der Schriftzug bleibt auch auf schmalen Telefonen (Ansage des Betreibers, 02.10.2026).
   `style.css` blendet `.brand-name` unter 420 px aus – das gilt der vollen Kopfleiste der
   Verwaltung, hier stehen nur Marke und ein Knopf (gemessen bei 320 px: passt). */
.anl-kopf .brand-name { display: inline; }

/* Durchscheinend weiß wie `.wb-kopf`. Die Sprungmarken sind ihre zweite Zeile. */
.anl-kopf {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid rgba(21, 33, 28, .08);
}

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

/* Ein LINK in der Bauform der Werbeseiten-Knöpfe (Pille mit grünem Rand). */
.anl-zurueck {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border: 1px solid var(--jg-green); border-radius: var(--jg-r-pill);
  font-size: 14px; font-weight: 500; color: var(--jg-green); text-decoration: none;
}
.anl-zurueck:hover { background: var(--jg-green-wash); }
.anl-zurueck .ti { font-size: 16px; }

/* Seit der Schriftzug auch schmal stehen bleibt, reicht die Zeile unter ~346 px nicht mehr:
   Der Knopf ist 155 px breit und brach in zwei Zeilen um (gemessen bei 320 px: 26 px zu viel).
   Darunter weicht der Pfeil (22 px) und das Polster wird schmaler (8 px) – Text und Marke
   bleiben. Dieselbe Schwelle wie die Kopfleiste der Verwaltung in `style.css`. */
.anl-zurueck { white-space: nowrap; }
@media (max-width: 359px) {
  .anl-zurueck { padding-left: 10px; padding-right: 10px; }
  .anl-zurueck .ti { display: none; }
}

/* ZWEI ZEILEN UNTER DER MARKE (02.10.2026, Ansage des Betreibers): oben die Kapitel, darunter
   die Sprungmarken des aktuellen Kapitels. Beide auf dem Telefon waagerecht wischbar statt
   umbrochen – sieben Marken in drei Zeilen fräßen den halben Bildschirm. Gefüllt werden beide
   von `anleitung.js`. */
.anl-kapitelnav,
.anl-nav {
  display: flex;
  max-width: var(--anl-breite); margin: 0 auto; padding: 0 var(--jg-gutter);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.anl-kapitelnav::-webkit-scrollbar,
.anl-nav::-webkit-scrollbar { display: none; }

/* EINE SENKRECHTE LINIE (Ansage des Betreibers, 02.10.2026): Logo und Pillen beginnen am Rand,
   die SCHRIFT der Pillen um ihr Polster weiter innen – und genau dort beginnen die Sprungmarken.
   Deshalb ein gemeinsamer Wert statt zweimal 12 px. */
.anl-kopf { --anl-pille-polster: 12px; }

/* Kapitel: Pillen, das aktuelle grün gefüllt – die Zeile, in der man sich orientiert. */
.anl-kapitelnav { gap: 6px; padding-bottom: 8px; }
.anl-kapitelnav a {
  flex: 0 0 auto; padding: 5px var(--anl-pille-polster); border-radius: var(--jg-r-pill);
  font-size: 14px; font-weight: 600; color: var(--jg-ink); text-decoration: none;
  background: var(--jg-bg);
}
.anl-kapitelnav a:hover { background: var(--jg-green-wash); color: var(--jg-green); }
.anl-kapitelnav a.aktiv { color: #fff; background: var(--jg-green); }

/* Sprungmarken: leiser Text darunter, eingerückt auf die Schrift der Pillen. */
.anl-nav { gap: 18px; padding-bottom: 10px; padding-left: calc(var(--jg-gutter) + var(--anl-pille-polster)); }
.anl-nav a {
  flex: 0 0 auto; font-size: 13px; font-weight: 500;
  color: var(--jg-muted); text-decoration: none;
}
.anl-nav a:hover { color: var(--jg-ink); }

/* Sprungziele nicht unter der Kopfleiste verschwinden lassen (Leiste + Kapitel + Marken
   ≈ 125 px). */
.anl-abschnitt { scroll-margin-top: 128px; }

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

.anl-abschnitt {
  padding: clamp(64px, 9vw, 120px) var(--jg-gutter);
  text-align: center;
}
.anl-hell   { background: var(--jg-bg); }
.anl-dunkel { color: #fff; background: var(--anl-tief); }

/* Kapitel-Bänder sind kürzer: Sie kündigen an, sie erklären nichts. */
.anl-kapitel { padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(48px, 7vw, 88px); }

.anl-zeile {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px;
  margin: 0 0 12px; font-size: 18px; font-weight: 600; letter-spacing: .02em;
  color: var(--jg-green);
}
.anl-dunkel .anl-zeile { color: #7fd1ad; }

.anl-gross {
  max-width: 900px; margin: 0 auto;
  font-size: var(--anl-schrift-gross); font-weight: 700;
  /* 1.14 statt 1.04 (Ansage des Betreibers, 02.10.2026): Bei 1.04 stießen die Punkte des „Ä“
     in „Bei jeder Änderung“ fast an die Zeile darüber – zweizeilige Überschriften sind hier die
     Regel, und Umlaute stehen oft am Zeilenanfang. */
  letter-spacing: -.035em; line-height: 1.14; text-wrap: balance;
}
.anl-leise { color: #8a9892; }
.anl-dunkel .anl-leise { color: #6f8a80; }

.anl-einleitung {
  max-width: 640px; margin: 20px auto 0;
  font-size: var(--anl-schrift-mittel); line-height: 1.38; letter-spacing: -.01em;
  color: var(--jg-muted); text-wrap: pretty;
}
.anl-dunkel .anl-einleitung { color: #b9c9c2; }

/* Für wen der Abschnitt gilt – eine Anleitung für alle, je Abschnitt markiert (Ansage 02.10.). */
.anl-rolle {
  display: inline-block; padding: 2px 10px; border-radius: var(--jg-r-pill);
  font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--jg-green-dark);
  background: var(--jg-green-tint); white-space: nowrap;
}
.anl-rolle-klein { font-size: 11px; padding: 1px 7px; }

/* ── Knöpfe (wie `.wb-knopf`) ────────────────────────────────────────────────────────────── */

.anl-knoepfe {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin: 30px 0 0;
}
.anl-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 26px;
  font-size: 17px; font-weight: 500; text-decoration: none;
  border: 1px solid var(--jg-green); border-radius: var(--jg-r-pill);
}
.anl-knopf-voll { color: #fff; background: var(--jg-green); }
.anl-knopf-voll:hover { background: var(--jg-green-dark); border-color: var(--jg-green-dark); }
.anl-knopf-rand { color: var(--jg-green); background: none; }
.anl-knopf-rand:hover { background: var(--jg-green-wash); }
.anl-dunkel .anl-knopf-voll { color: var(--anl-tief); background: #fff; border-color: #fff; }

/* ── Bühne: Telefon und Erklärung nebeneinander ──────────────────────────────────────────── */

/* OHNE Media Query: Die Spalte entscheidet, nicht das Fenster (Kurzliste 10). Unter 2 × 320 px
   steht der Text unter dem Telefon. */
.anl-buehne {
  display: grid; gap: 36px 56px; align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  max-width: 940px; margin: clamp(40px, 6vw, 72px) auto 0;
  text-align: left;
}

.anl-text { max-width: 480px; font-size: 16px; line-height: 1.55; }
.anl-text p { margin: 0 0 14px; }
.anl-text > :last-child { margin-bottom: 0; }
.anl-text a { color: var(--jg-green); }

.anl-schritte, .anl-liste { margin: 0 0 14px; padding-left: 22px; }
.anl-schritte li, .anl-liste li { margin-bottom: 8px; }
.anl-liste .zbadge { white-space: nowrap; }

/* Merksatz (grün) und Warnung (rot): dieselben Flächen wie `.eingriff-info` der Verwaltung. */
.anl-merke, .anl-warnung { padding: 12px 14px; border-radius: 8px; font-size: 15px; }
.anl-merke   { background: var(--jg-green-faint); border-left: 3px solid var(--jg-green); }
.anl-warnung { background: #fdf3f2; border-left: 3px solid var(--jg-red); }

/* ── Das Telefon (Maße aus `.wb-telefon`, ohne Bildschirmfoto) ───────────────────────────── */

/* ⚠️ DAS TELEFON IST UNTEN OFFEN (02.10.2026, Ansage des Betreibers: „das zu kurze Handy sieht
   seltsam aus … unten abschneiden und durch einen kleinen Verlauf darstellen“). Die Nachbauten
   sind verschieden lang – ein vollständig gezeichnetes Telefon war dann mal gestaucht, mal
   überlang. Jetzt: oben Rundung, Insel und Rahmen, unten KEIN Rahmen und keine Rundung; der
   Bildschirm läuft in einem Verlauf in den Grund des Abschnitts aus. So liest sich jede Länge
   als Ausschnitt.

   Der Verlauf muss die Farbe DES ABSCHNITTS treffen (weiß oder hellgrau) – deshalb trägt jeder
   Abschnitt `--anl-grund`, und das `::after` malt genau diese Farbe.

   Der RAHMEN ist schmal auf dem Handy, breiter am Rechner (`--anl-rahmen`, ebenfalls Ansage
   des Betreibers) – ohne Media Query, über `clamp()`. Innenradius = Außenradius − Rahmen, sonst
   stehen die Ecken des Bildschirms schief im Rahmen. */
.anl-abschnitt { --anl-grund: #fff; }
.anl-hell      { --anl-grund: var(--jg-bg); }

.anl-telefon {
  --anl-rahmen: clamp(6px, 1.8vw, 11px);
  --anl-rund: 46px;
  position: relative; justify-self: center;
  /* So breit, wie die Spalte erlaubt, höchstens 340 px (Ansage des Betreibers, 02.10.2026: „auf
     dem Handy könnte man das abgebildete Handy etwas breiter machen“). Vorher
     `clamp(270px, 30vw, 330px)` – auf 375 px blieben es 270, und die Nachbauten brachen öfter um
     als im echten Bildschirm. */
  width: min(100%, 340px); margin: 0;
  /* SILBERNES METALLBAND + SCHWARZER GLASRAND (04.10.2026, wie `.wb-telefon` in werbung.css):
     das Band ist der durchsichtige `border` mit Silberverlauf darüber, innen schwarz. Rahmen +
     Polster ergeben zusammen weiter `--anl-rahmen`. Unten kein Band – dort läuft der Verlauf aus. */
  --anl-band: 3px;
  padding: calc(var(--anl-rahmen) - var(--anl-band)) calc(var(--anl-rahmen) - var(--anl-band)) 0;
  border: var(--anl-band) solid transparent; border-bottom: 0;
  background:
    linear-gradient(#0b0b0c, #0b0b0c) padding-box,
    linear-gradient(145deg, #f1f2f4 0%, #c3c6cb 28%, #eef0f2 52%, #a9adb3 78%, #dfe1e4 100%) border-box;
  border-radius: var(--anl-rund) var(--anl-rund) 0 0;
  /* NUR die Randlinie, KEIN Schlagschatten: Ein Schatten reicht unter dem Verlauf hervor und
     malte dort einen grauen Kasten unter ein Telefon, das gar nicht endet (gemessen im Bild,
     02.10.2026). */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .14);
}
/* Die Insel wächst mit der Breite, damit sie mittig in der (mitwachsenden) Statusleiste sitzt –
   Rechnung siehe `.wb-telefon::before` in werbung.css. */
.anl-telefon::before {                         /* die Insel */
  content: ""; position: absolute; top: calc(var(--anl-rahmen) - var(--anl-band)); left: 50%; z-index: 2;
  width: 29%; aspect-ratio: 3.5; margin-top: 3.3%; background: #000; border-radius: 99px;
  transform: translateX(-50%);
}
/* Der Verlauf: von durchsichtig in den Grund des Abschnitts. Ein Stück breiter als das Telefon
   und ein Stück tiefer, damit Rahmen und Randlinie mit verschwinden. */
.anl-telefon::after {
  content: ""; position: absolute; z-index: 3; pointer-events: none;
  left: -3px; right: -3px; bottom: -2px; height: 90px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--anl-grund) 85%);
}

/* Oben Platz für die Statusleiste, sonst säße die Insel auf dem Inhalt; unten Platz für den
   Verlauf, damit er nur Rand und Luft verschluckt, nicht den letzten Knopf. `inert` im Markup
   nimmt Klicks und Tastatur. */
.anl-bildschirm {
  min-height: 360px; padding: 52px 12px 56px;
  /* Die gezeichnete Statusleiste – dieselbe Datei wie auf den öffentlichen Seiten (04.10.2026).
     Absoluter Pfad, sie liegt im Status-Bündel (`Claude/werbung/`). */
  background: url("/status/werbung/statusleiste.svg") center top / 100% auto no-repeat, var(--jg-bg);
  border-radius: calc(var(--anl-rund) - var(--anl-rahmen)) calc(var(--anl-rund) - var(--anl-rahmen)) 0 0;
  overflow: hidden;
  text-align: left; font-size: 15px;
}
.anl-bildschirm > :last-child { margin-bottom: 0; }
.anl-bildschirm-mitte { display: flex; flex-direction: column; justify-content: center; }

/* `.modal` hat in der Verwaltung `max-height` + eigenes Scrollen (für den Bildschirm-Dialog).
   Im Telefon steht er im Fluss – ganz zeigen statt scrollen; etwas weniger Polster, weil der
   Bildschirm schmal ist. */
.anl-bildschirm .modal { max-height: none; overflow: visible; padding: 18px 16px; box-shadow: 0 6px 20px rgba(21, 33, 28, .12); }

/* `.pwa-block` hat oben 18 px Abstand zur Anmeldekarte – die gibt es hier nicht. */
.anl-bildschirm .pwa-block { margin: 0 auto 12px; }
.anl-bildschirm .club-head h1 { font-size: 18px; }
.anl-bildschirm .banner { margin-bottom: 10px; }

/* Datum/Uhrzeit als stiller Text statt `<input type="date">`: Ein echtes Datumsfeld zeigt je
   Browser ein anderes Format und trägt das Datum des Prüftags. */
.anl-feld {
  flex: 1; min-width: 0; padding: 8px 10px; font-size: 14px;
  border: 1px solid var(--jg-line); border-radius: var(--jg-r-sm); background: var(--jg-card);
}
.anl-feld-breit { display: block; }
/* Im Aufklapper „Ausschreibung“ sind die Feldnamen halbfett (style.css, 17.10.2026); der Inhalt
   eines echten Feldes ist dort 400 – die stille Nachbau-Fläche würde das Halbfett sonst erben. */
.ausschreibung .anl-feld { font-weight: 400; }

/* Der Zusatztext in der Liste ist ein `<textarea>` – hier ein Block mit derselben Klasse;
   `anl-zusatz-aktiv` zeigt ihn so, wie er beim Tippen aussieht. */
.anl-zusatz { min-height: 1.6em; }
.anl-zusatz-aktiv { border-color: var(--jg-green-light); background: var(--jg-card); color: var(--jg-ink); }

/* Kapitel 3: Teile, die in der Verwaltung ein <button>, <select> oder <textarea> sind und im
   Nachbau ein <span>. Die echten Klassen geben Form und Farbe; hier nur, was am Element hängt. */
.anl-auswahl { display: block; }                       /* `.cselect-btn` ist sonst ein Knopf */
.anl-zurueck-nachbau { padding-bottom: 10px; }         /* `.zurueck` über der Karte */
.anl-textfeld { min-height: 64px; margin-top: 5px; font-size: 15px; }
.anl-schalterzeile { display: flex; justify-content: space-between; width: 100%; margin-top: 14px; }
.anl-loesch-nachbau { margin-top: 12px; padding-top: 4px; padding-bottom: 8px; }
.anl-loesch-nachbau .loeschzone { margin-top: 0; padding-top: 0; border-top: 0; }  /* allein steht keine Linie darüber */

/* Der Bildschirm im Telefon ist mit rund 260–318 px SCHMALER als ein echtes iPhone. Formulare
   bekommen dort weniger Polster, und eine Wochentags-Zeile darf umbrechen – in der Verwaltung
   passt sie auf 375 px in eine Zeile, im Nachbau lief „bis 22:00“ aus dem Bild (gemessen). */
.anl-bildschirm .formcard { padding: 16px 14px; }
.anl-bildschirm .wtag { flex-wrap: wrap; gap: 8px 12px; }
.anl-bildschirm .wtag-zeit .anl-feld { flex: 0 0 auto; padding: 6px 8px; }
.anl-text .ti { font-size: 17px; vertical-align: -2px; color: var(--jg-muted); }

/* ── Übersicht: die Kapitel als Karten ───────────────────────────────────────────────────────
   Ohne Media Query: so viele Spalten, wie 260 px breite Karten in die Zeile passen. */
.anl-karten {
  display: grid; gap: 16px; max-width: 940px; margin: 0 auto; text-align: left;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.anl-karte {
  display: flex; flex-direction: column; gap: 6px;
  padding: 22px 22px 20px; border-radius: 18px; text-decoration: none; color: var(--jg-ink);
  background: #fff; border: 1px solid var(--jg-line);
}
.anl-karte:hover { border-color: var(--jg-green-rand); }
.anl-karte-nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  font-size: 15px; font-weight: 700; color: #fff; background: var(--jg-green);
}
.anl-karte-titel { margin-top: 6px; font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.anl-karte-leise { font-size: 16px; color: #8a9892; }
.anl-karte-inhalt { flex: 1; margin: 6px 0 8px; font-size: 14px; color: var(--jg-muted); }
.anl-karte .anl-rolle { align-self: flex-start; }

/* ── Weiterblättern am Ende einer Kapitelseite ─────────────────────────────────────────────── */
.anl-blaettern {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  max-width: 940px; margin: 0 auto; padding: 36px var(--jg-gutter) 48px;
}
.anl-blaettern:empty { display: none; }
.anl-blaettern a {
  display: inline-flex; align-items: center; min-height: 48px; padding: 12px 22px;
  border: 1px solid var(--jg-green); border-radius: var(--jg-r-pill);
  font-size: 16px; font-weight: 500; color: var(--jg-green); text-decoration: none;
}
.anl-blaettern a:hover { background: var(--jg-green-wash); }
.anl-blaettern .anl-blaettern-nach { margin-left: auto; color: #fff; background: var(--jg-green); }
.anl-blaettern .anl-blaettern-nach:hover { background: var(--jg-green-dark); }

/* ── Die Rollen (Kapitel 6): Etikett links, Beschreibung rechts ────────────────────────────
   Eine Bühne ohne Telefon – zwei Textspalten statt Telefon + Text. */
.anl-rollen { margin: 0; text-align: left; display: flex; flex-direction: column; gap: 14px; }
.anl-rollen > div { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
/* Umbruch über `flex-basis`, nicht über eine Media Query: Reicht die Zeile nicht für Etikett und
   200 px Text, rutscht der Text darunter (Kurzliste 9). */
.anl-rollen dt { margin: 0; flex: 0 0 9.5em; }
.anl-rollen dd { margin: 0; flex: 1 1 200px; min-width: 0; font-size: 15px; }
.anl-rollen a { color: var(--jg-green); }
.anl-rollen .zbadge { font-size: 12px; padding: 2px 8px; white-space: nowrap; }

/* ── Fuß ─────────────────────────────────────────────────────────────────────────────────── */

.anl-fuss {
  padding: 24px var(--jg-gutter) 36px; font-size: 13px; color: var(--jg-muted);
  border-top: 1px solid var(--jg-line);
}
.anl-fuss-innen { max-width: var(--anl-breite); margin: 0 auto; }

/* ── Druck ───────────────────────────────────────────────────────────────────────────────── */
/* Ohne Kopfleiste; nichts Verstecktes, das im Ausdruck fehlen könnte (Kurzliste 14). */
@media print {
  .anl-kopf { display: none; }
  .anl-abschnitt { break-inside: avoid; padding-top: 32px; padding-bottom: 32px; }
  .anl-dunkel { color: var(--jg-ink); background: none; }
}