/* Handy-Ansicht (≤ 700 px): nur Unterseiten (Kurse, Einblicke, Termine, Verein, Kontakt, Fragen, Bibliothek, Impressum, Datenschutz).
   Baut auf mobil.css auf. Konzept: _test/h-konzept.md. Ab 701 px darf sich hier nichts auswirken.
   Aufbau: 1. Seitenkopf · 2. gemeinsame Bausteine (Band, Fragen, Info-Listen) · 3. Kurse · 4. Kursseiten · 5. Einblicke
           6. Termine · 7. Über uns · 8. Kontakt · 9. Häufige Fragen · 10. Bibliothek · 11. Impressum + Datenschutz */

/* Nur-Handy-Zusatz (z. B. Pfeil am Textlink „Formular“): am Desktop/Tablet nie sichtbar */
.handy-pfeil { display: none; }

/* Datenschutz: Die Hülle .rechts-abschnitte macht „3. Anfrage-Formular“ zum ersten Kind –
   ab 701 px bleibt der Abstand darüber genau wie vorher (site.css: .rechtstext h2 { margin-top: 2.6rem }) */
@media (min-width: 701px) {
  .rechtstext .rechts-abschnitte > h2:first-child { margin-top: 2.6rem; }
}

@media (max-width: 700px) {

  /* ---------- 1. Seitenkopf: kompakt, Brotkrumen klein ---------- */
  .seiten-kopf { padding: .25rem 0 1.25rem; }
  .brotkrumen { margin-bottom: 0; }
  .brotkrumen ol { gap: 0 .5rem; font-size: .75rem; }
  .brotkrumen li { gap: .5rem; }
  /* Tippfläche mindestens 44 px breit, ohne dass sich die Brotkrumen verschieben */
  .brotkrumen a { padding-inline: .4rem; margin-inline: -.4rem; }
  /* Telefonnummern im Text nie mitten in der Nummer umbrechen */
  .unterseite a[href^="tel:"] { white-space: nowrap; }
  .nowrap { white-space: nowrap; }
  .seiten-kopf .ueberzeile { margin-bottom: .5rem; }
  .seiten-kopf h1 { max-width: none; font-size: 2rem; line-height: 1.08; letter-spacing: -.01em; }
  .seiten-kopf p:not(.ueberzeile) { margin-top: .5rem; font-size: .9375rem; line-height: 1.55; }
  .seiten-kopf p[data-handy-kuerzen] { margin-bottom: 0; }
  .seiten-kopf .mehr-lesen { margin: -.15rem 0 -.6rem; }
  .seiten-anker { margin-top: .9rem; }
  .seiten-anker a { padding: .35rem .9rem; font-size: .8125rem; background: var(--c-weiss); }
  /* Seiten ohne Brotkrumen (Impressum, Datenschutz) */
  .seiten-kopf > .container-schmal { padding-top: 1rem; }

  /* Abschnitte: 32 px oben und unten, zwischen zwei Abschnitten also höchstens 64 px Luft */
  .unterseite { --sektion: 2rem; }

  /* Erster Abschnitt direkt unter dem Seitenkopf: etwas weniger Luft oben */
  .unterseite .seiten-kopf + .sektion { padding-top: 1.5rem; }

  /* Abschnitte: Einleitungen ruhiger, Abstand Kopf → Inhalt 16–20 px */
  .unterseite .abschnitt-kopf .einleitung { font-size: .9375rem; }
  .abschnitt-kopf .mehr-link { margin-top: .35rem; }

  /* ---------- 2a. Band „Möchten Sie dabei sein?“: Emblem klein neben dem Titel, Knöpfe nebeneinander ---------- */
  .handlung { padding-block: .25rem 2.25rem; }
  .flaeche-nacht + .handlung { padding-top: 1.75rem; }
  .handlung-band {
    grid-template-columns: 34px minmax(0, 1fr); gap: .5rem .75rem; align-items: center;
    padding: 1.1rem 1rem 1rem; border-radius: 16px; box-shadow: var(--sh-1);
  }
  .handlung-band::before { display: none; }
  .handlung-emblem { grid-column: 1; grid-row: 1; width: 34px; }
  .handlung-text { display: contents; }
  .handlung-text h2 { grid-column: 2; grid-row: 1; margin: 0; font-size: 1.35rem; line-height: 1.15; }
  .handlung-text p { grid-column: 1 / -1; margin: .1rem 0 .35rem; font-size: .875rem; line-height: 1.5; }
  .handlung-knoepfe { grid-column: 1 / -1; gap: .5rem; }
  .handlung-knoepfe > .btn { min-height: 46px; padding-inline: .7rem; font-size: .875rem; gap: .4rem; }

  /* ---------- 2b. Fragen-Akkordeons: eine Karte mit Trennlinien (wie eine App-Liste) ---------- */
  .fragen-raster { gap: 0; }
  .fragen-raster .abschnitt-kopf { margin-bottom: 1rem; }
  .fragen-liste {
    gap: 0; border: 1px solid var(--c-linie); border-radius: 16px; background: var(--c-weiss); box-shadow: var(--sh-1); overflow: hidden;
  }
  .frage { border: 0; border-radius: 0; background: none; box-shadow: none; }
  .frage:not([hidden]) ~ .frage { border-top: 1px solid var(--c-linie); }
  .frage[open] { border-color: var(--c-linie); box-shadow: none; background: var(--c-papier); }
  .frage summary {
    gap: .75rem; min-height: 52px; padding: .75rem 1rem; border-radius: 0;
    font: 600 .96875rem/1.35 var(--f-text); letter-spacing: 0;
  }
  .frage summary .ico { flex: none; width: 18px; height: 18px; }
  .frage-antwort { padding: 0 1rem .95rem; font-size: .9375rem; line-height: 1.55; }
  .frage-antwort p { margin-bottom: .55rem; }

  /* ---------- 2c. Info-Karten (So läuft der Unterricht): kompakte Liste mit kleinem Symbol ---------- */
  .info-raster {
    grid-template-columns: minmax(0, 1fr); gap: 0;
    border: 1px solid var(--c-linie); border-radius: 16px; background: var(--c-weiss); box-shadow: var(--sh-1);
  }
  .info-karte {
    display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: .85rem; align-items: start;
    padding: .9rem 1rem; border: 0; border-radius: 0; background: none; box-shadow: none;
  }
  .info-karte + .info-karte { border-top: 1px solid var(--c-linie); }
  .info-karte:hover { box-shadow: none; }
  .info-karte .info-medaillon { grid-row: 1 / span 2; width: 34px; height: 34px; border-color: var(--c-linie); background: var(--c-himmel); }
  .info-medaillon::after { display: none; }
  .info-karte .info-medaillon .ico { width: 17px; height: 17px; }
  .info-karte h3 { margin: .2rem 0 .2rem; font-size: 1.0625rem; line-height: 1.25; }
  .info-karte p { font-size: .875rem; line-height: 1.5; }

  /* ======================================================================
     3. KURSE (/kurse)
     ====================================================================== */
  /* Kurskarten: dieselbe Gewichtung wie auf der Startseite – „Platz anfragen“ als Knopf links,
     „Mehr zum Kurs →“ als Textlink daneben (nur optisch getauscht, die Reihenfolge im HTML bleibt) */
  [data-seite="kurse"] .kurs-knoepfe .btn-text {
    order: -1; --b-bg: var(--c-weiss); --b-fg: var(--c-tinte); --b-rand: var(--c-linie-2);
    padding: .55rem .95rem;
  }
  [data-seite="kurse"] .kurs-knoepfe .kurs-link {
    --b-bg: transparent; --b-fg: var(--c-lapis); --b-rand: transparent; padding-inline: .6rem; box-shadow: none;
  }

  /* Stundenplan: kompakte Karten, Titel und Untertitel immer untereinander, Link oben rechts */
  .zeiten-raster { gap: .5rem; }
  .zeiten-karte { position: relative; padding: .85rem 1rem .9rem; border-radius: 14px; }
  .zeiten-karte .kurs-kopf { margin: 0; padding-right: 5.5rem; }
  .zeiten-karte .kurs-kopf > div { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
  .zeiten-karte h3 { font-size: 1.125rem; line-height: 1.25; }
  .zeiten-karte .unterzeile { margin-top: 0; font-size: .875rem; }
  .zeiten-karte .kurs-zeiten { gap: .25rem; margin: .6rem 0 0; padding-top: .55rem; font-size: .875rem; }
  html.js .zeiten-karte .kurs-zeiten { min-height: 1.5rem; }
  .zeiten-karte .karten-link { position: absolute; top: .4rem; right: .55rem; min-height: 44px; margin: 0; padding: 0 .4rem; font-size: .8125rem; }
  .zeiten-karte .karten-link .ico { width: 15px; height: 15px; }
  #zeiten .kurse-hinweis { margin-top: .75rem; }

  /* ======================================================================
     4. KURSSEITEN (Tschetschenisch, Russisch, Kochkurs)
     ====================================================================== */
  .seiten-kopf.mit-bild { padding-bottom: 1.25rem; }
  .kopf-raster { gap: 1rem; }
  .kopf-text h1 { font-size: 2rem; line-height: 1.06; }
  .seiten-kopf .kurs-untertitel { margin-top: .25rem; font-size: 1.05rem; }
  .kopf-text .kurs-plaketten { margin-top: .65rem; gap: .3rem; }
  .kopf-text .kurs-plaketten .plakette { padding: .22rem .55rem; font-size: .75rem; }
  .seiten-kopf p.kurs-pausiert { margin-top: .75rem; font-size: .875rem; }
  .kopf-knoepfe { margin-top: 1rem; }
  .kopf-knoepfe .btn-gross { min-height: 48px; padding-inline: .9rem; font-size: .9375rem; }
  .kopf-bild .bogen { box-shadow: var(--sh-2); }

  /* Über den Kurs + Lernziele */
  .ueber-raster, .fuerwen-raster { gap: 1.25rem; }
  .ueber-text h2 { margin-bottom: .75rem; }
  .ueber-text .fliesstext p { font-size: .9375rem; }
  .ueber-text .hinweis { margin-top: .75rem; }
  .lernziele-karte { padding: 1rem 1rem 1.05rem; border-radius: 16px; box-shadow: var(--sh-1); }
  .lernziele-karte::before, .lernziele-orn { display: none; }
  .lernziele-karte h3 { margin-bottom: .75rem; padding-right: 0; font-size: 1.125rem; line-height: 1.25; }
  .lernziele { gap: .5rem; }
  .lernziele li { grid-template-columns: 24px minmax(0, 1fr); gap: .65rem; font-size: .9375rem; line-height: 1.4; }
  .lernziele .ico { width: 24px; height: 24px; padding: 5px; }

  /* Für wen: Fakten als 2 × 2-Raster */
  .fuerwen-raster .abschnitt-kopf { margin-bottom: 1rem; }
  .fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .fakt { padding: .75rem .8rem .8rem; border-radius: 14px; }
  .fakt dt { gap: .4rem; font-size: .625rem; letter-spacing: .1em; }
  .fakt dt .ico { width: 15px; height: 15px; }
  /* Werte in Manrope: die Bis-Striche („4–12“) bleiben bei 15 px klar lesbar */
  .fakt dd { margin-top: .35rem; font: 600 .9375rem/1.35 var(--f-text); letter-spacing: 0; text-wrap: balance; }

  /* Unterrichtszeiten (große Karte) kompakt */
  .zeiten-karte.gross { padding: 1rem; border-radius: 16px; box-shadow: var(--sh-1); }
  .zeiten-karte.gross h3 { gap: .5rem; margin-bottom: .6rem; font-size: 1.125rem; }
  .zeiten-karte.gross h3 .ico { width: 18px; height: 18px; }
  .zeiten-karte.gross .kurs-zeiten { margin-bottom: .6rem; }
  .zeiten-notiz { padding-top: .1rem; font-size: .75rem; line-height: 1.45; }

  /* Weitere Kurse: schmale Zeilen mit kleinem Bild */
  .quer-raster { gap: .5rem; }
  .quer-karte { gap: .85rem; padding: .6rem .9rem .6rem .6rem; border-radius: 16px; }
  .quer-karte:hover { transform: none; }
  .quer-bild { width: 60px; height: 60px; margin: 0; border-radius: 12px; box-shadow: none; }
  .quer-text { gap: .05rem; }
  .quer-text strong { font-size: 1.125rem; }
  .quer-text .cyr { font-size: .875rem; }
  .quer-text .symbol-notiz { font-size: .6875rem; }
  .quer-mehr { margin-top: .15rem; font-size: .8125rem; }
  .quer-mehr .ico { width: 14px; height: 14px; }

  /* ======================================================================
     5. EINBLICKE
     ====================================================================== */
  /* Räume als Wisch-Leiste: Bild 4:3, Nummer, Titel, voller Text (hier die Detailseite, darum nicht gekürzt) */
  .raeume-raster.wisch-leiste { gap: .75rem; }
  .raum {
    display: flex; flex-direction: column; gap: 0; padding: 0 0 1rem;
    border: 1px solid var(--c-linie); border-radius: 16px; background: var(--c-weiss); box-shadow: var(--sh-1); overflow: hidden;
  }
  .raum:nth-child(even) { margin-top: 0; }
  .raum-bild { width: 100%; margin: 0 0 .85rem; aspect-ratio: 4 / 3; border-radius: 0; box-shadow: none; }
  .raum:hover .raum-bild img { transform: none; }
  .raum-text { padding-inline: .95rem; }
  .raum-text .station-nr { font-size: .875rem; }
  .raum-text h3 { margin: .3rem 0 .3rem; font-size: 1.2rem; }
  .raum-text p:last-child { font-size: .875rem; line-height: 1.5; }

  /* Rundgang: ein Video, Hinweis und Pause-Knopf in einer Zeile */
  .rundgang { margin-top: 1.75rem; padding-top: 1.5rem; }
  .rundgang-reel .bogen { box-shadow: var(--sh-2); }
  .rundgang-reel figcaption { margin-top: .6rem; text-align: left; font-size: .625rem; letter-spacing: .2em; }
  .rundgang-fuss { justify-content: space-between; gap: 1rem; margin-top: .1rem; font-size: .8125rem; line-height: 1.45; }

  /* Galerie: zwei Spalten im Querformat */
  .galerie-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .galerie-knopf { aspect-ratio: 4 / 3; border-radius: 12px; }
  .galerie-knopf::before { inset: 5px; border-radius: 8px; }
  /* Beschriftung auch auf hellen Fotos lesbar: dunklerer Verlauf unten, ruhige Manrope statt Serif */
  .galerie-knopf::after { background: linear-gradient(180deg, rgba(10,26,61,0) 38%, rgba(10,26,61,.34) 66%, rgba(10,26,61,.8)); }
  .galerie-titel {
    left: .65rem; right: .65rem; bottom: .55rem;
    font: 600 .875rem/1.2 var(--f-text); letter-spacing: 0; text-shadow: 0 1px 2px rgba(0,0,0,.35);
  }

  /* Film (dunkle Fläche) */
  .einblicke-film .film-raster { gap: 1rem; }
  .film-beschreibung > p:last-child { margin-bottom: 0; }

  /* ======================================================================
     6. TERMINE
     ====================================================================== */
  .termine-monate { gap: 1.5rem; }
  .monat-titel { gap: .5rem; margin-bottom: .75rem; padding-bottom: .5rem; font-size: 1.3rem; }
  .monat-titel small { font-size: .6875rem; }
  .termine-raster { gap: .6rem; }
  .termine-hinweis { margin: 1.25rem 0 0; padding: .75rem .9rem; gap: .6rem; font-size: .875rem; line-height: 1.5; }
  /* Kalender → Neuigkeiten: 48 px Luft statt einer Lücke */
  #naechste.sektion { padding-bottom: 1.5rem; }
  #naechste + .sektion { padding-top: 1.5rem; }
  .termine-hinweis .ico { width: 18px; height: 18px; margin-top: .1rem; }
  .beitraege-voll { gap: .75rem; }
  .beitraege-voll .beitrag-text { font-size: .9375rem; }
  .beitraege-voll .beitrag-text p { margin-bottom: .55rem; }
  .beitraege-voll .mehr-lesen { margin: .1rem 0 -.5rem; }
  .mehr-laden { margin-top: 1.25rem; }
  .rueckblick-eintrag { gap: .15rem .9rem; padding: .7rem .1rem; }
  .rueckblick-eintrag time { font-size: .9375rem; }
  .rb-inhalt strong { font-size: .9375rem; }
  .rb-ort { font-size: .8125rem; }

  /* ======================================================================
     7. ÜBER UNS (/verein)
     ====================================================================== */
  #geschichte .verein-raster { gap: 1.5rem; }
  #geschichte .verein-bild .bogen { aspect-ratio: 2 / 1; }
  #geschichte .verein-bild .bogen-innen img { object-position: 50% 40%; }
  #geschichte .verein-text .einleitung { margin-bottom: .5rem; }
  #geschichte .fliesstext p { font-size: .9375rem; }
  .unterseite .leitsatz { padding-block: 2rem 1.75rem; }

  /* Werte als 2 × 2-Raster mit kleinem Symbol oben (wie auf der Startseite) */
  .werte-raster, .werte-raster:has(> li:nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .wert-karte { padding: .8rem .8rem .85rem; border-radius: 14px; }
  .wert-karte:hover { box-shadow: var(--sh-1); }
  .wert-karte .info-medaillon { width: 30px; height: 30px; border-color: var(--c-linie); background: var(--c-himmel); }
  .wert-karte .info-medaillon .ico { width: 16px; height: 16px; }
  .wert-karte h3 { margin: .5rem 0 .2rem; font: 700 .9375rem/1.25 var(--f-text); letter-spacing: 0; }
  .wert-karte p { font-size: .8125rem; line-height: 1.45; }

  /* Team: schmale Zeilen mit rundem Foto */
  .team-raster { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .team-karte {
    display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: .9rem; align-items: center;
    padding: .85rem 1rem; text-align: left; border-radius: 16px;
  }
  .team-bild { grid-column: 1; grid-row: 1 / span 2; width: 56px; margin: 0; box-shadow: 0 0 0 1px var(--gold-linie); }
  .team-initial span { font-size: 1.5rem; }
  .team-karte h3 { grid-column: 2; align-self: end; font-size: 1.125rem; }
  .team-rolle { grid-column: 2; align-self: start; margin-top: .15rem; font-size: .625rem; }
  .team-text { grid-column: 1 / -1; margin-top: .65rem; font-size: .875rem; line-height: 1.5; }

  /* Mitmachen + Vereinsdaten: zwei eigenständige Karten mit 24 px Abstand und gleich großen Titeln */
  .verein-unten { gap: 1.5rem; }
  .mitmachen-karte { padding: 1.25rem 1rem 1.1rem; border-radius: 20px; box-shadow: var(--sh-2); }
  .mitmachen-orn { width: 240px; right: -110px; bottom: -120px; }
  .mitmachen-karte h2 { margin-bottom: .6rem; font-size: 1.35rem; line-height: 1.15; }
  .mitmachen-karte .fliesstext p { font-size: .9375rem; }
  .mitmachen-knoepfe { margin-top: 1rem; }
  .mitmachen-knoepfe > .btn { min-height: 46px; padding-inline: .75rem; font-size: .875rem; gap: .4rem; }
  .vereinsdaten { padding: 1.1rem 1rem .6rem; border-radius: 16px; }
  .vereinsdaten h2 { margin-bottom: .6rem; font-size: 1.35rem; line-height: 1.15; }
  .vereinsdaten dl { grid-template-columns: max-content minmax(0, 1fr); gap: 0; margin-bottom: .25rem; }
  .vereinsdaten dt { padding-right: 1rem; }
  .vereinsdaten dt, .vereinsdaten dd { padding: .55rem 0; border-top: 1px solid var(--c-linie); font-size: .9375rem; line-height: 1.4; }
  .vereinsdaten dd { margin: 0; text-align: right; }
  .vereinsdaten .mehr-link { font-size: .875rem; }

  /* ======================================================================
     8. KONTAKT (/kontakt)
     ====================================================================== */
  .unterseite .kontakt .kontakt-raster { gap: .75rem; }
  .unterseite .kontakt textarea.eingabe { height: 96px; }
  /* Name und Alter teilen sich eine Zeile (Alter ist ein kurzes Feld), alles andere volle Breite */
  .unterseite .kontakt .form-raster { grid-template-columns: minmax(0, 1fr) 6.5rem; column-gap: .6rem; }
  .unterseite .kontakt .form-raster > * { grid-column: 1 / -1; }
  .unterseite .kontakt .form-raster > .feld:nth-child(1) { grid-column: 1; }
  .unterseite .kontakt .form-raster > .feld:nth-child(2) { grid-column: 2; }
  .formular-karte .formular-titel { margin-bottom: .25rem; font-size: 1.3rem; }

  /* ======================================================================
     9. HÄUFIGE FRAGEN (/fragen)
     ====================================================================== */
  .fragen-werkzeug { gap: .65rem; margin-bottom: 1.25rem; }
  .fragen-suche .ico { left: .95rem; width: 18px; height: 18px; }
  .fragen-suche .eingabe { min-height: 48px; padding-left: 2.6rem; }
  .fragen-werkzeug .chip { padding: .45rem .95rem; font-size: .8125rem; }
  .fragen-gruppen { gap: 1.5rem; }
  .fragen-gruppe h2 { gap: .6rem; margin-bottom: .6rem; font-size: 1.3rem; }
  .info-medaillon.klein { width: 32px; height: 32px; border-color: var(--c-linie); background: var(--c-himmel); }
  .info-medaillon.klein .ico { width: 16px; height: 16px; }

  /* „Ihre Frage ist nicht dabei?“ und „Auch in unseren Vereinsräumen“: kompakte Karte, Symbol neben dem Titel */
  .noch-fragen {
    grid-template-columns: 34px minmax(0, 1fr); gap: .5rem .75rem; align-items: center;
    margin-top: 1.75rem; padding: 1rem; border-radius: 16px;
  }
  .noch-fragen > .info-medaillon { width: 34px; height: 34px; border-color: var(--c-linie); background: var(--c-himmel); }
  .noch-fragen > .info-medaillon .ico { width: 17px; height: 17px; }
  .noch-fragen-text { display: contents; }
  .noch-fragen h2 { grid-column: 2; margin: 0; font-size: 1.25rem; line-height: 1.2; }
  .noch-fragen p { grid-column: 1 / -1; font-size: .875rem; line-height: 1.5; }
  .noch-fragen-knoepfe { grid-column: 1 / -1; margin-top: .25rem; }
  .noch-fragen-knoepfe > .btn { min-height: 44px; padding-inline: .7rem; font-size: .875rem; gap: .4rem; }

  /* /fragen: nur eine Handlungs-Karte. Anrufen + WhatsApp nebeneinander, „Formular →“ als Textlink darunter;
     das Band „Möchten Sie dabei sein?“ entfällt hier am Handy (gleiche Wege wie die Karte darüber) */
  [data-seite="fragen"] .noch-fragen-knoepfe > a[href^="/kontakt"] {
    flex: 1 1 100%; justify-content: flex-start; min-height: 44px; margin: -.25rem 0 -.5rem; padding-inline: 0;
    --b-bg: transparent; --b-rand: transparent; --b-fg: var(--c-lapis); box-shadow: none;
  }
  [data-seite="fragen"] .noch-fragen-knoepfe > a[href^="/kontakt"] .ico:not(.handy-pfeil) { display: none; }
  [data-seite="fragen"] .noch-fragen-knoepfe .handy-pfeil { display: block; width: 16px; height: 16px; }
  [data-seite="fragen"] .handlung { display: none; }

  /* ======================================================================
     10. BIBLIOTHEK: Lesetext bleibt 16 px, nur Rahmen und Abstände schlanker
     ====================================================================== */
  /* Lesefläche: weißes Blatt über die ganze Breite direkt unter dem Seitenkopf */
  .bibliothek.sektion, .unterseite .seiten-kopf + .bibliothek.sektion { padding-top: 0; }
  .bib-text { margin-inline: calc(-1 * var(--rand)); padding: 1rem var(--rand) 1.25rem; border-width: 0 0 1px; border-radius: 0; box-shadow: none; }
  .bib-text + .bib-text, .bib-trenner + .bib-text { border-top-width: 1px; }
  .bib-text::before { display: none; }
  /* Kapitelkopf schlank: ohne Ornament und Zierlinie, 16 px bis zum Text */
  .bib-kopf { gap: .2rem; margin-bottom: .875rem; padding-bottom: 0; }
  .bib-kopf::after, .bib-orn { display: none; }
  .bib-titel { font-size: 1.75rem; line-height: 1.12; }
  .bib-untertitel { font-size: 1rem; line-height: 1.38; }
  /* Lesetext bleibt 16 px; Zeilenhöhe 1.52 und Absatzabstand 8 px halten den langen Text kompakt, aber luftig */
  .bib-inhalt { font-size: 1rem; line-height: 1.52; }
  .bib-inhalt p { margin-bottom: .5em; }
  .bib-zitat { font-size: 1.06em; line-height: 1.4; }
  .bib-trenner { width: min(180px, 50%); margin: 1.25rem auto; }

  /* „Auch in unseren Vereinsräumen“: schmale Zeile am Ende der Lesefläche statt einer zweiten Karte */
  .bib-raum.noch-fragen {
    margin: 0 calc(-1 * var(--rand)); padding: .9rem var(--rand) .25rem;
    border: 0; border-bottom: 1px solid var(--c-linie); border-radius: 0; background: var(--c-weiss); box-shadow: none;
  }
  .bib-raum h2 { font-size: 1.125rem; }
  .bib-raum p { font-size: .875rem; }
  .bib-raum .noch-fragen-knoepfe { margin-top: -.25rem; }
  .bib-raum .noch-fragen-knoepfe > .btn {
    flex: 0 1 auto; min-height: 44px; padding-inline: 0; gap: .4rem; box-shadow: none;
    --b-bg: transparent; --b-rand: transparent; --b-fg: var(--c-lapis);
  }
  .bib-raum .noch-fragen-knoepfe .ico { width: 16px; height: 16px; }
  .bibliothek.sektion { padding-bottom: 1.5rem; }

  /* ======================================================================
     11. IMPRESSUM + DATENSCHUTZ: ruhige Rechtstexte, straffe Abstände
     ====================================================================== */
  .rechtstext { padding-block: 1.25rem 2rem; }
  .rechtstext p:not(.ueberzeile), .rechtstext li { font-size: .96875rem; line-height: 1.55; }
  .rechtstext p:not(.ueberzeile) { margin-bottom: .65rem; }
  .rechtstext h2 { margin: 1.5rem 0 .5rem; font-size: 1.3rem; line-height: 1.2; }
  .rechtstext h3 { margin: 1rem 0 .35rem; font-size: 1.05rem; }
  .rechtstext ul { padding-left: 1.1rem; }
  .rechtstext li { margin-bottom: .25rem; }
  .rechtstext dl { gap: 0; margin-bottom: .75rem; padding: .15rem 1rem; border-radius: 14px; }
  .rechtstext dt { padding-top: .5rem; font-size: .8125rem; line-height: 1.3; }
  .rechtstext dd { margin: .05rem 0 0; padding-bottom: .5rem; font-size: .9375rem; line-height: 1.45; }
  /* Links in den Datenlisten: Tippfläche 44 px hoch, ohne die Zeile höher zu machen */
  .rechtstext dd a { padding-block: .75rem; }
  .rechtstext .dl-zeile:not([hidden]) ~ .dl-zeile dt, .rechtstext dd ~ dt { border-top: 1px solid var(--c-linie); }
  .rechtstext .zweck-text { padding: .65rem .85rem; }
  .rechtstext p.stand { margin-top: 1.25rem; font-size: .8125rem; }
  .rechtstext .zurueck { margin-top: 1.25rem; }
  /* „Zur Startseite“ ist eine Nebenaktion: Textlink mit Pfeil statt Knopf */
  .rechtstext p.zurueck { margin-bottom: 0; }
  .rechtstext .zurueck.btn, .rechtstext .zurueck .btn {
    min-height: 44px; padding-inline: 0; gap: .4rem; font-size: .9375rem; box-shadow: none;
    --b-bg: transparent; --b-rand: transparent; --b-fg: var(--c-lapis);
  }
  .rechtstext .zurueck .ico, .rechtstext .zurueck.btn .ico { width: 16px; height: 16px; }

  /* Lange Abschnitte (data-handy-kuerzen): 3 Zeilen, darunter „Mehr lesen“ – Text bleibt vollständig im Dokument */
  .rechtstext .handy-gekuerzt, .rechtstext p.handy-gekuerzt { margin-bottom: 0; }
  .rechtstext .handy-gekuerzt + .mehr-lesen { margin: -.2rem 0 0; }
  .rechtstext .mehr-lesen + h2 { margin-top: .9rem; }
  .rechtstext .mehr-lesen + h3 { margin-top: .5rem; }
  .rechtstext .mehr-lesen + .zurueck { margin-top: .75rem; }
  .rechtstext a.zurueck { display: flex; width: fit-content; margin-top: .25rem; }

  /* Inhaltsverzeichnis: kompakte Liste mit Nummern in einer Spalte (Zeilen 44 px, nichts bricht eng um),
     Rahmen mit 1 px feiner Linie wie die übrigen Karten */
  .rechts-inhalt { margin-bottom: 1.5rem; padding: .8rem 1rem .3rem; border-left: 1px solid var(--c-linie); border-radius: 14px; }
  .rechts-inhalt .ueberzeile { margin-bottom: .15rem; }
  .rechts-inhalt ol { display: grid; grid-template-columns: minmax(0, 1fr); columns: auto; padding: 0; list-style: none; counter-reset: ri; }
  .rechts-inhalt li { counter-increment: ri; margin: 0; font-size: .875rem; }
  .rechts-inhalt li a { display: flex; align-items: center; gap: .5rem; min-height: 44px; padding: .2rem 0; line-height: 1.25; }
  .rechts-inhalt li a::before { content: counter(ri) "."; flex: none; min-width: 1.6em; color: var(--c-text-3); font-weight: 600; font-variant-numeric: tabular-nums; }

  .kurz-liste li { grid-template-columns: 32px minmax(0, 1fr); gap: .75rem; }
  .rechtstext ul.kurz-liste { gap: .7rem; }
  .kurz-liste .ico { width: 32px; height: 32px; padding: 8px; }

  /* Datenschutz, Abschnitte 3–11: Akkordeon-Liste wie „Häufige Fragen“ – Titelzeile ≥ 52 px, Chevron rechts,
     ganze Zeile tippbar. Raster mit „dense“: Jeder Umschalter (site.js setzt ihn hinter den Text) rückt in die
     freie Zelle neben seinem Titel. Ohne JavaScript steht einfach der ganze Text in der Karte. */
  .rechtstext .rechts-abschnitte {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-auto-flow: row dense;
    margin: 1.75rem 0 0; border: 1px solid var(--c-linie); border-radius: 16px; background: var(--c-weiss); box-shadow: var(--sh-1);
    overflow: hidden;
  }
  .rechtstext .rechts-abschnitte > * { grid-column: 1 / -1; min-width: 0; }
  .rechtstext .rechts-abschnitte > :is(h2, h3) {
    grid-column: 1; display: flex; align-items: center; min-height: 52px; margin: 0; padding: .75rem 0 .75rem 1rem;
    border-top: 1px solid var(--c-linie); font: 600 .96875rem/1.35 var(--f-text); letter-spacing: 0; color: var(--c-nacht);
  }
  /* Unterpunkt „Kontakt per Telefon und WhatsApp“: eingerückt und leiser */
  .rechtstext .rechts-abschnitte > h3 { padding-left: 2rem; font-weight: 500; font-size: .9375rem; color: var(--c-text-2); }
  .rechtstext .rechts-abschnitte > :first-child { border-top: 0; }
  .rechtstext .rechts-abschnitte > [data-handy-kuerzen] { padding: .1rem 1rem 1rem; }
  .rechtstext .rechts-abschnitte > [data-handy-kuerzen] > :last-child { margin-bottom: 0; }
  .rechtstext .rechts-abschnitte > .handy-gekuerzt { display: none; }
  .rechtstext .rechts-abschnitte > .mehr-lesen {
    grid-column: 2; align-self: stretch; position: relative; justify-content: center; min-width: 52px; min-height: 52px;
    margin: 0; padding: 0 1rem 0 .5rem; border-top: 1px solid var(--c-linie); color: var(--c-gold);
  }
  .rechtstext .rechts-abschnitte > .mehr-lesen:first-of-type { border-top: 0; }
  /* „Mehr lesen“/„Weniger“ bleibt für Screenreader lesbar, sichtbar ist nur der Chevron */
  .rechts-abschnitte > .mehr-lesen > span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .rechts-abschnitte > .mehr-lesen .ico { width: 18px; height: 18px; }
  /* Tippfläche über die ganze Titelzeile (die Karte schneidet sie seitlich ab) */
  .rechts-abschnitte > .mehr-lesen::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 100vw; }
  .rechts-abschnitte > .mehr-lesen:focus-visible { outline-offset: -3px; }
  /* Offener Abschnitt: zarter Papierton wie bei den Fragen */
  .rechts-abschnitte > :is(h2, h3):has(+ [data-handy-kuerzen] + .mehr-lesen[aria-expanded="true"]),
  .rechts-abschnitte > [data-handy-kuerzen]:has(+ .mehr-lesen[aria-expanded="true"]),
  .rechts-abschnitte > .mehr-lesen[aria-expanded="true"] { background: var(--c-papier); }
}