/* handy.css — was für die Handyansicht gewählt wurde.

   Diese Datei trägt nur noch die Fassungen, für die eine Entscheidung
   gefallen ist. Sie liegt auf allen zehn Seiten, damit Kopfhöhe, Abstände
   und der seitliche Nach-oben-Reiter überall gleich aussehen.

   Gewählt am 02.09.2026:
     Wegweiser        nav--register   nummeriertes Register statt Karten
     Bewegung         bw--auf         Abschnitte steigen beim Scrollen auf
     Nach oben        seite--hell     heller Reiter am rechten Rand
     Weiche Kanten    wk--mittel      Ablauf und Fragenband laufen 112 px aus
     Bild -> Wegweiser tb--verlauf    das Titelfoto läuft ins Grau aus
     Abstände         ab--enger       engere Abstände zwischen den Abschnitten
     Kopfzeile        kopf--k2        69 px statt 85 px

   Die Klassen stehen am <body> jeder Seite. Die nicht gewählten Fassungen
   liegen in varianten.css und werden nur von den Vorschauseiten geladen. */

/* ================= Handy: schaltbare Vorschläge =================
   Zum Vergleichen auf vorschau-start.html. Was gewählt wird, wandert
   danach ohne Klasse in style.css. */
/* --- Aktionsleiste: welche Knöpfe? --- */
/* ================= Handy: Etiketten, Übergang, Schriftgrößen =================
   Richtwerte: Fließtext ab 16 px, Nebentext nicht unter 14 px, Zeilenhöhe
   1,4–1,6, 50–75 Zeichen je Zeile. Alles hier auf 375 px nachgemessen. */
@media (max-width: 719px) {
/* ---- Etiketten: vier Fassungen ---- */
/* E1 · Zwei Spalten, alle Kacheln exakt gleich hoch */
/* E2 · Eine Karte, vier gleich hohe Zeilen mit Pfeil */
/* E3 · Quadratische Kacheln, Symbol oben, Wort unten */
/* ---- Übergang vom Titelbild zum Etikettenbereich ---- */
/* T2 · Das Foto läuft in den grauen Grund aus */
.tb--verlauf .buehne__bild::before { content: ''; position: absolute; left: 0; right: 0;
    bottom: 0; height: 120px; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(244,246,244,0), var(--dunst, #f4f6f4)); }
/* T3 · Der Etikettenbereich schiebt sich mit runder Kante über das Foto */
/* T4 · Kein Farbwechsel — der Bereich bleibt weiß */
}
/* ---- Schriftgrößen: zwei Stufen zum Vergleichen ----
   Empfehlung aus der Recherche: Fließtext ab 16 px, Nebentext nicht unter
   14 px. Gemessen lagen Etiketten und Marken bei 10–12 px. */
@media (max-width: 719px) {
/* Stufe 1 · nichts unter 13 px */
/* Stufe 2 · nichts unter 14 px, Nebentext auf dem empfohlenen Boden */
}
/* ---- Kopfzeile: drei Höhen zum Vergleichen (Handy) ---- */
@media (max-width: 719px) {
.kopf--k2 .kopf__innen { min-height: 68px; }
.kopf--k2 .marke__wort { font-size: .9375rem; }
}
/* Lange und kurze Beschriftung der Etiketten — kurz nur, wo eine Fassung sie einblendet */
/* T3 nachgeschärft und T5 · runde Kante mit weichem Auslauf des Fotos */
/* ================= Weiche Kanten zwischen den Abschnitten =================
   Die Farbfolge der Startseite, bei 375 px Pixel für Pixel nachgemessen:

     y  162  #ffffff   Bühne
     y  660  #faf8f7   Grund hinter dem Titelfoto
     y  702  #f4f6f4   Wegweiser
     y 1992  #12362a   grünes Band „Warum ändern"
     y 2328  #ffffff   weiße Hälfte desselben Abschnitts
     y 2982  #faf8f7   „Vom Abstecken bis zur Abholung"
     y 4206  #ffffff   Bilder und Google
     y 5880  #faf8f7   Fragenband
     y 6522  #ffffff   Abschlussband

   Weich gemacht werden nur die vier Kanten, an denen eine Tönung auf Weiß
   trifft — also die beiden Ränder des Ablaufs und die beiden des Fragenbands.
   Bewusst nicht angefasst:
   · die Ränder des grünen Bandes — dort ist der harte Schnitt gewollt,
     ein Verlauf von #12362a nach Weiß liest sich als Schatten;
   · die Unterkante des Wegweisers — sie stößt an das grüne Band;
   · die Oberkante des Wegweisers — die erledigt die Gruppe „Bild → Wegweiser".

   Der Verlauf endet durchsichtig statt weiß, damit nichts überdeckt wird. */
.wk--zart .abschnitt--leinen, .wk--zart .svj--j1,
.wk--mittel .abschnitt--leinen, .wk--mittel .svj--j1,
.wk--weit .abschnitt--leinen, .wk--weit .svj--j1 { background-color: transparent; }
.wk--mittel .abschnitt--leinen,
.wk--mittel .svj--j1 { background-image: linear-gradient(180deg,
  rgba(250,248,247,0) 0, #faf8f7 112px, #faf8f7 calc(100% - 112px), rgba(250,248,247,0) 100%); }
/* --- Das grüne Band: getrennt schaltbar, weil dort ein Farbverlauf
   anders wirkt als zwischen zwei hellen Tönen --- */
/* G2 · runde Ecken statt Verlauf */
/* G3 · kurzer Verlauf an beiden Rändern des Bandes */
/* ================= Wegweiser: filigrane Fassungen =================
   Alle vier verzichten auf Karte, Schatten und Etikettenzubehör
   (Lochung, Nadel, Perforation) und tragen nur noch Haarlinien. */
@media (max-width: 719px) {
/* Gemeinsam: Zubehör weg, kein Kasten, kein Schatten */
[class*="nav--"] .wegweiser__lochung,
  [class*="nav--"] .wegweiser__nadel,
  [class*="nav--"] .wegweiser__perfo { display: none; }
[class*="nav--"] .wegweiser__karte { background: none; box-shadow: none;
    border: 0; border-radius: 0; }
[class*="nav--"] .abschnitt--wegweiser { padding-top: clamp(24px, 5vw, 36px); }
/* F1 · Linien — vier Zeilen, nur durch Haarlinien getrennt */
/* F2 · Register — durchnummeriert, ohne Symbole, sehr ruhig */
.nav--register .wegweiser__reihe { display: block; padding-top: 0;
    counter-reset: reg; }
.nav--register .wegweiser__halter { counter-increment: reg;
    border-top: 1px solid var(--haarlinie, #e6e6e3); }
.nav--register .wegweiser__halter:last-child { border-bottom: 1px solid var(--haarlinie, #e6e6e3); }
.nav--register .wegweiser__karte { display: grid;
    grid-template-columns: 30px 1fr auto; align-items: baseline;
    column-gap: 14px; row-gap: 3px; padding: 17px 2px; min-height: 84px;
    align-content: center; }
.nav--register .wegweiser__karte::before { content: "0" counter(reg);
    grid-column: 1; grid-row: 1; font-size: .75rem; font-weight: 600;
    letter-spacing: .02em; color: var(--gruen-600, #2a6d4c);
    font-variant-numeric: tabular-nums; }
.nav--register .wegweiser__kopf { display: contents; }
.nav--register .wegweiser__kopf .ikon { display: none; }
.nav--register .wegweiser__wort { grid-column: 2; grid-row: 1;
    font-size: 1.0625rem; font-weight: 600; letter-spacing: -.02em; }
.nav--register .wegweiser__dazu { grid-column: 2; grid-row: 2;
    font-size: .875rem; line-height: 1.4; color: var(--stahl, #6b6b6b); }
.nav--register .wegweiser__pfeil { grid-column: 3; grid-row: 1;
    width: 13px; height: 13px; opacity: .45; align-self: center; }
/* F3 · Marken — kleine Umrisse, fließen nebeneinander */
/* F4 · Zart — zwei Spalten, nur Trennlinien, kein Kasten */
/* Die Linien liegen als Pseudoelemente auf dem Halter, damit sie nichts
     zur Höhe beitragen — sonst wären die Felder je nach Reihe 1 px höher. */
}
/* ================= Nach-oben-Knopf: Fassungen =================
   Der Knopf hat einen Fortschrittsring und einen Winkel nach oben. Die
   Beschriftung „Nach oben" steht im Markup und ist normal ausgeblendet. */
/* .hoch__wort steht in style.css — service.css laden nicht alle Seiten. */
/* H2 · Einmal mit Wort — klappt bei der ersten Anzeige auf und wieder zu */
.hoch--einmal .hoch__wort { display: block; max-width: 0; overflow: hidden;
  margin-left: 52px;
  opacity: 0; transition: max-width .45s var(--ease), opacity .3s var(--ease),
  margin .45s var(--ease); }
.hoch--einmal .hoch.zeigt-wort .hoch__wort { max-width: 9rem; opacity: 1; margin-left: 52px; }
/* H3 · Immer mit Wort — dauerhaft als Pille */
.hoch--wort .hoch__wort { display: block; margin-left: 52px; }
/* H4 · Der Winkel tippt an — zweimal kurz nach oben, wenn der Knopf kommt */
/* H5 · Balken über dem Winkel — das übliche Zeichen für „ganz nach oben".
   Der Balken hängt am Knopf, nicht am Winkel: der Winkel ist um 45° gedreht
   und würde den Balken mitdrehen. */
@media (prefers-reduced-motion: reduce) {
.hoch--einmal .hoch,
  .hoch--einmal .hoch__wort { transition: opacity .4s var(--ease); }
}
/* In der Pille sitzt der Winkel nicht mehr in der Flex-Mitte, sondern
   fest in der Mitte des 52-px-Rings (Ringmitte 26/26, Winkel 9×9). */
/* ================= Nach oben: seitlich am Rand =================
   Nicht mehr über der Aktionsleiste, sondern als schmaler Reiter am rechten
   Bildschirmrand — schlanker, länglich, mit Wort. Der Fortschrittsring des
   runden Knopfs entfällt dabei; an seine Stelle tritt ein feiner Balken. */
@media (max-width: 719px) {
[class*="seite--"] .hoch {
  right: 0; bottom: auto; top: 50%; transform: translateY(-50%) translateX(6px);
  width: 38px; height: auto; min-height: 124px; border-radius: 14px 0 0 14px;
  flex-direction: column; gap: 8px; padding: 14px 0;
  background: var(--weiss, #fff);
  box-shadow: 0 0 0 1px var(--haarlinie, #e6e6e3), 0 6px 22px -10px rgba(20,32,26,.28);
}
[class*="seite--"] .hoch.ist-da { transform: translateY(-50%); }
[class*="seite--"] .hoch:hover { transform: translateY(-50%) translateX(-2px);
  box-shadow: 0 0 0 1px var(--gruen-200, #c6e2d2), 0 10px 26px -10px rgba(20,32,26,.34); }
[class*="seite--"] .hoch__ring { display: none; }
[class*="seite--"] .hoch__wort { display: block; font-size: .75rem;
  font-weight: 600; letter-spacing: .02em; writing-mode: vertical-rl;
  transform: rotate(180deg); color: var(--gruen-800, #174934); }
[class*="seite--"] .hoch__pfeil { flex: 0 0 auto; width: 8px; height: 8px;
  border-width: 1.8px; border-color: var(--gruen-700, #1f5c40);
  transform: rotate(45deg) translate(1px, 1px); }
}

/* S1 · heller Reiter — das ist der Grundzustand aller seite--Fassungen.
   Die Klasse steht ausdrücklich hier, damit sie beim Suchen auffindbar ist. */
@media (max-width: 719px) { .seite--hell .hoch { background: var(--weiss, #fff); } }
/* S2 · grüner Reiter statt weißem */
.seite--gruen .hoch__wort { color: #fff; }
/* S3 · mit ruhigem Pulsieren — 4,5 s Takt, nur die Umrandung atmet,
   nichts bewegt sich von der Stelle */
/* S4 · fährt beim Erscheinen einmal aus und wieder ein */
/* ================= Bewegung beim Scrollen =================
   Die Seite hat bisher drei inszenierte Momente (Etiketten beim Laden, der
   Ring an der Live-Anzeige, der Rahmen im Ablauf). Zwischen den Abschnitten
   passiert nichts — deshalb wirkt der Wechsel abrupt.

   Alle Fassungen arbeiten mit einer Klasse `ist-sichtbar`, die ein
   IntersectionObserver setzt. Ohne JavaScript ist alles sofort da: der
   Ausgangszustand wird nur gesetzt, wenn <html> die Klasse `js` trägt.
   Zusätzlich hält sich alles an prefers-reduced-motion. */
.js [data-auf] { will-change: opacity, transform; }
/* B1 · Aufsteigen — Abschnitt taucht von unten auf */
.js .bw--auf [data-auf] { opacity: 0; transform: translateY(22px);
  transition: opacity .52s var(--ease), transform .52s var(--ease); }
.js .bw--auf [data-auf].ist-sichtbar { opacity: 1; transform: none; }
/* B2 · Gestaffelt — dieselbe Bewegung, aber die Kinder nacheinander */
.js .bw--staffel [data-auf] { opacity: 0; transform: translateY(20px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay: calc(var(--nr, 0) * 85ms); }
.js .bw--staffel [data-auf].ist-sichtbar { opacity: 1; transform: none; }
/* B3 · Nur Überschriften — der Fließtext bleibt ruhig */
.js .bw--titel [data-auf]:not(h1):not(h2):not(.h2):not(.display) { opacity: 1; transform: none; }
.js .bw--titel h1[data-auf], .js .bw--titel h2[data-auf],
.js .bw--titel .h2[data-auf], .js .bw--titel .display[data-auf] {
  opacity: 0; transform: translateY(18px);
  transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js .bw--titel [data-auf].ist-sichtbar { opacity: 1; transform: none; }
/* B4 · Sanft anwachsen — kaum Weg, nur ein Hauch Größe */
.js .bw--wachsen [data-auf] { opacity: 0; transform: scale(.985);
  transition: opacity .56s var(--ease), transform .56s var(--ease); }
.js .bw--wachsen [data-auf].ist-sichtbar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.js [class*="bw--"] [data-auf] { opacity: 1 !important; transform: none !important;
    transition: none !important; }
}
/* ================= Zwei eigene Vorschläge für „klein und aufgeräumt" =========

   K1 · Die Kopfzeile schrumpft beim Scrollen.
   Die Seite setzt beim Scrollen bereits `ist-gescrollt` auf die Kopfzeile —
   bisher wird damit nur die Trennlinie eingeblendet. Hier zieht sie zusätzlich
   zusammen. Gewinn am Handy: 27 px, die dauerhaft für Inhalt frei werden. */
/* K2 · Engere Abstände zwischen den Abschnitten.
   Die Seite atmet großzügig — am Handy kostet das viel Weg. Zwei Stufen. */
@media (max-width: 719px) {
.ab--enger .abschnitt,
  .ab--enger .warum__weiss,
  .ab--enger .band,
  .ab--enger .svj--j1 { padding-block: clamp(30px, 6vw, 44px); }
.ab--enger .warum__farbe { padding-block: clamp(34px, 7vw, 52px); }
.ab--enger .abschnitt--wegweiser { padding-top: clamp(22px, 5vw, 32px); }
}

/* ================= Der Reiter nimmt sich zurück =================
   Er ist erst voll da, damit man ihn bemerkt. Wer dann eine Weile nicht
   scrollt, braucht ihn offenbar nicht — also tritt er zurück und gibt die
   Seite frei. Anfassen kann man ihn weiterhin: die Fläche bleibt, nur die
   Deckkraft sinkt. Jede Scrollbewegung und jede Berührung holt ihn zurück.

   Das Zurücknehmen setzt `ruht` (siehe main-ergaenzung.js). */

@media (max-width: 719px) {
  [class*="seite--"] .hoch { transition: opacity .5s var(--ease),
    transform .4s var(--ease), box-shadow .4s var(--ease); }

  /* Achtung beim Ändern: `.ruhe--klar` und `seite--hell` stehen beide am
     selben <body>. Ein Nachfahren-Selektor `.ruhe--klar [class*="seite--"]`
     verlangt zwei verschiedene Elemente und greift deshalb nie. Die Regeln
     hängen darum direkt am Knopf. */

  /* R1 · dezent — bleibt gut sichtbar */
  .ruhe--dezent .hoch.ruht { opacity: .55; }

  /* R2 · deutlich — nimmt sich spürbar zurück (Vorgabe) */
  .ruhe--klar .hoch.ruht { opacity: .34; }

  /* R3 · fast weg — nur noch ein Hauch am Rand */
  .ruhe--kaum .hoch.ruht { opacity: .18; }

  /* R4 · schiebt sich halb hinaus, statt blasser zu werden */
  .ruhe--schmal[class*="seite--"] .hoch.ruht { opacity: .8;
    transform: translateY(-50%) translateX(19px); }
  .ruhe--schmal .hoch.ruht .hoch__wort { opacity: 0;
    transition: opacity .35s var(--ease); }

  /* Anfassen holt ihn in jeder Fassung sofort zurück */
  .hoch.ruht:hover, .hoch.ruht:focus-visible { opacity: 1; }
  .ruhe--schmal[class*="seite--"] .hoch.ruht:hover,
  .ruhe--schmal[class*="seite--"] .hoch.ruht:focus-visible {
    transform: translateY(-50%); }
  .hoch.ruht:hover .hoch__wort,
  .hoch.ruht:focus-visible .hoch__wort { opacity: 1; }
}

/* ================= Handy: Nacharbeiten an allen Seiten =================
   Gefunden beim Durchgang durch Preise, Gut zu wissen, Aktuelles,
   Schneiderei und Kontakt. */

@media (max-width: 719px) {

  /* Die Brotkrume war 30 × 20 px groß — unter den 24 px, die WCAG 2.5.8 AA
     als Mindestmaß für eine Tippfläche nennt. Das Polster vergrößert die
     Fläche, ohne die Zeile optisch auseinanderzuziehen. */
  .brotkrume { margin-bottom: 12px; }
  .brotkrume a,
  .brotkrume > span { display: inline-flex; align-items: center;
    min-height: 44px; min-width: 44px; justify-content: center;
    padding-inline: 6px; }
  .brotkrume a:first-child { margin-left: -6px; }
  .brotkrume .ikon { flex: none; }

  /* Die Aktionsleiste schwebt über dem Seitenende. Bisher blieb die Fußzeile
     nur deshalb frei, weil ihr eigenes Polster zufällig reichte. Hier steht
     der Abstand ausdrücklich: Leistenhöhe + Abstand + Geräterand. */
  .fuss { padding-bottom: calc(66px + 26px + env(safe-area-inset-bottom, 0px)); }

  /* Der Nach-oben-Reiter darf nicht auf der Leiste liegen, wenn die
     Öffnungszeiten aufgeklappt sind — das regelt style.css bereits über
     `body:has(.aleiste__klappe.ist-auf) .hoch`. Hier nur der Gleichlauf
     mit dem Reiter, der ja nicht mehr unten sitzt. */
  body:has(.aleiste__klappe.ist-auf) [class*="seite--"] .hoch {
    opacity: 0; pointer-events: none; }
}

@media (max-width: 719px) {
  /* Zwei Tippflächen lagen knapp unter 44 px: die Telefontaste in der
     Kopfzeile (42 × 46) und der Urlaubshinweis auf „Aktuelles" (241 × 42). */
  .kopf__tel { min-width: 44px; min-height: 44px; }
  .danach__knopf { min-height: 44px; }
}

/* ================= Einheitlichkeit über alle Seiten =================
   Beim Durchgang am 02.09.2026 gemessen (375 px):

     Seite            H1      Ausrichtung   Fließtext
     Start            30 px   links         16 / 24,8
     Preise           34 px   links         16 / 24,8
     Gut zu wissen    34 px   links         16 / 24,8
     Aktuelles        34 px   links         16 / 24,8
     Schneiderei      36 px   links         16 / 24,8
     Kontakt          34 px   mittig        16,3 / 26,1

   Zwei Dinge fielen aus der Reihe und werden hier geradegezogen. */

@media (max-width: 719px) {

  /* Die Angleichung der Schneiderei-Überschrift steht nicht mehr hier:
     Die Seite benutzt seit dem 03.11.2026 .display wie alle anderen. */

  /* 2 · Mittig gesetzter Fließtext.
     Drei Blöcke sind mittig gesetzt: `.messschritt` (Gut zu wissen),
     die Weiteres-Spalte (Aktuelles) und `.erreichen` (Kontakt). Für kurze
     Auszeichnungen ist das richtig — bei 160 bis 194 Zeichen sind es am
     Handy aber fünf bis sechs Zeilen, die jede an anderer Stelle beginnen.
     Überschriften und Marken bleiben mittig, nur der Fließtext rückt nach
     links. */
  .messschritt__text,
  .weiter__text,
  .erreichen .fliess,
  .erreichen p:not([class]) { text-align: left; }
  .weiter__text { max-width: none; margin-inline: 0; }
}

/* ================= Nur für das Skript: wann der Knopf kommt =============
   `auf--1`, `auf--2` und `auf--3` tragen kein Aussehen, sondern den
   Schwellenwert für hoch-ruhe.js: 260, 520 oder 800 px, die jemand nach oben
   gewischt haben muss, bevor der Nach-oben-Reiter erscheint. Beim ersten Zug
   nach unten ist er sofort wieder weg.

   Die leeren Regeln stehen hier, damit die Klassen beim Suchen in den
   Stilblättern auffindbar sind und eine Prüfung sie nicht als „ohne CSS"
   meldet. `main.js` prüft auf `auf--` und gibt die Steuerung dann ab. */
.auf--1, .auf--2, .auf--3 { /* siehe assets/js/hoch-ruhe.js */ }

/* ================= „Kommen Sie einfach vorbei" =================
   Der Abschnitt stand auf Start, Preise, Gut zu wissen, Aktuelles und
   Schneiderei — auf der Kontaktseite nicht, die hat ihren eigenen
   Kontaktbereich. Auf den vier Unterseiten wiederholte er sich nur; dort
   trägt der <body> jetzt `band--aus`. Auf der Startseite bleibt er stehen.

   Die Regel gilt in jeder Breite, nicht nur am Handy: die Wiederholung ist
   am Rechner genauso überflüssig. */
.band--aus .band { display: none; }

/* ================= Gewählt am 02.09.2026, deshalb hierher umgezogen =======
   Beide Fassungen lagen in varianten.css — die laden die echten Seiten nicht.
   Was gewählt ist, gehört in handy.css. */

@media (max-width: 719px) {

  /* sk--links */
  .sk--links .seitenkopf--mitte { text-align: left; }
  .sk--links .seitenkopf--mitte .brotkrume { justify-content: flex-start; }
  .sk--links .seitenkopf--mitte .lead { margin-inline: 0; }
  .sk--links .seitenkopf--mitte .display { max-width: 16ch; }

  /* ph--kleben */
  /* Die Überschrift klebt **bündig** an der Unterkante der Kopfzeile.

     Zwei Fehler stecken hier drin, die beide schon passiert sind:

     1. Eine feste Zahl geht nicht. Die Kopfhöhe ist am Rechner 108 px, am
        Handy 69 (kopf--k2) oder 61 (kopf--k3), dazu die Haarlinie unten.
        handy-extras.js misst sie und setzt --kopf-h.

     2. Ein Abstand *über* der Überschrift ist ein durchsichtiges Fenster:
        die Preiszeilen laufen beim Scrollen sichtbar hindurch. Deshalb
        top = genau die Kopfhöhe, und die Luft steckt als Polster **in** der
        Überschrift, hinter ihrem deckenden Grund.

     Aus demselben Grund keine Rundung oben — an einer gerundeten Ecke
     schaut der Text darunter hervor. */
  .ph--kleben .preisblock__kopf { position: sticky;
    top: var(--kopf-h, 69px); z-index: 5;
    background: var(--weiss); margin-inline: -20px;
    padding: 20px 20px 12px 38px; border-radius: 0;
    box-shadow: 0 1px 0 var(--haarlinie), 0 8px 16px -12px rgba(20,32,26,.26); }
  .ph--kleben .preisblock__kopf::before { top: 20px; }

  /* Die Blöcke stoßen direkt aneinander. Vorher lagen 30 px Abstand
     dazwischen — in diesem Fenster klebte gar keine Überschrift, die
     abziehende schob sich halb sichtbar unter die Kopfzeile und man las
     dazwischen hindurch. Jetzt schiebt die ankommende Überschrift die
     abziehende direkt weg, wie bei einer Liste im Betriebssystem: die
     Zeile unter der Kopfzeile ist immer von genau einer Überschrift belegt.

     Der Abstand ist nicht verschwunden, er sitzt jetzt als Polster unten
     in der Liste — also innerhalb des Blocks. */
  .ph--kleben .preisblock { margin-bottom: 0; }
  .ph--kleben .preisliste { padding-top: 20px; padding-bottom: 30px; }

  /* Der eigene Unterrand der Überschrift muss weg.

     Ein klebendes Element darf sich nur innerhalb seines Blocks bewegen —
     und zwar bis zum Blockrand **minus der eigenen Ränder**. Mit
     `margin-bottom: 20px` wurde die Überschrift also 20 px zu früh
     weggeschoben. In diesen 20 px deckte weder die abziehende noch die
     ankommende Überschrift die Zeile unter der Kopfzeile ab: man las die
     Preiszeilen dazwischen hindurch. Der Abstand sitzt jetzt als
     `padding-top` an der Liste. */
  .ph--kleben .preisblock__kopf { margin-bottom: 0; }
  .ph--kleben .preisblock__kopf::before { content: ''; position: absolute;
    left: 20px; top: 12px; bottom: 12px; width: 5px; border-radius: 3px;
    background: var(--gruen-600); }
  .ph--kleben .preisblock__kopf { border-left: 0; }
  /* Beim Sprung auf einen Block muss unter Kopfzeile UND klebender
     Überschrift Platz sein: 69 + 8 + 50 + etwas Luft. */
  .ph--kleben .preisblock { scroll-margin-top: calc(var(--kopf-h, 69px) + 66px); }
}

@media (max-width: 719px) {
  /* Urlaubshinweis am Handy weg. Er steht ohnehin auf „Aktuelles“, und
     auf der Kontaktseite drängt er sich zwischen Anfahrt und Fußzeile.
     Am Rechner bleibt er stehen. */
  .urlaubsinfo { display: none; }
}

@media (max-width: 719px) {
  /* Der Übergang für das Ausblenden beim Wegschieben (siehe handy-extras.js).
     Kurz genug, dass es dem Finger folgt. */
  
}

/* ======================================================================
   Am Handy fest übernommen — ausgewählt am 03.11.2026
   ======================================================================
   Befund vorher: Bei 375 px fiel jede Abstandsspanne auf ihren kleinsten
   Wert — --abschnitt auf 64 px, --luft auf 20 px, der Seitenkopf auf
   40 px. Die Seite stand überall am unteren Anschlag und wirkte gequetscht.
   ------------------------------------------------------------------ */
@media (max-width: 719px) {

  /* ---- Mehr Luft zwischen den Bereichen (alle Seiten) -------------- */
  :root { --abschnitt: 84px; }
  .seitenkopf { padding-block: 52px 42px; }

  /* ---- Fußzeile: ohne Zeichen, nur ein Strich (alle Seiten) -------- */
  /* Es waren zwei Striche: einer auf .fuss, einer auf .fuss__unten.
     Der obere geht, der über den Verweisen bleibt. Am Rechner bleibt
     das Zeichen stehen, dort stört es nicht. */
  .fuss__kopf { display: none; }
  .fuss { padding-top: 26px; border-top: none; }
  .fuss a, .fuss__unten { font-size: .8125rem; }

  /* Tippfläche: „Karte laden“ war 40 px hoch, die Empfehlung sind 44. */
  .btn--klein { min-height: 44px; }

  /* ---- Nur Kontaktseite: Anfahrt weg ------------------------------- */
  /* .anfahrt und .stege stehen ausschließlich dort. */
  .anfahrt, .stege { display: none; }

  /* ---- Nur Kontaktseite: Öffnungszeiten zugeklappt ----------------- */
  /* Zugeklappt steht nur eine Infozeile da — die Zeiten sind trotzdem
     sofort lesbar. Das Umschalten macht zeitenKlappe() in main.js;
     im Markup steht open, ohne JavaScript bleibt also alles sichtbar. */
  .zeitklapp > summary {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 4px 2px; cursor: pointer; list-style: none; }
  .zeitklapp__pfeil {
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .3s var(--ease); }
  .zeitklapp[open] > summary .zeitklapp__pfeil {
    transform: rotate(-135deg) translate(-3px, -3px); }
  .zeitklapp[open] > summary { margin-bottom: 6px; }
  .zeitklapp .zeitplan { margin-top: 0; }

  /* Eine Zeile je Tag, Uhrzeiten in eigener Spalte mit Tabellenziffern.
     Vorher saß der Trennstrich zwischen den beiden Spannen in derselben
     Zeile und schob die zweite um 12 px nach rechts. */
  .zeitklapp .zeitplan__tag {
    display: grid; grid-template-columns: 1fr auto;
    align-items: start; gap: 4px 14px; padding: 13px 0; }
  .erreichen--zeiten .zeitklapp .zeitplan__tag:first-of-type { padding-top: 13px; }
  .zeitklapp .zeitplan__name { font-size: .8125rem; letter-spacing: .1em; }
  .zeitklapp .zeitplan__spannen {
    display: grid; grid-template-columns: auto; justify-items: end; gap: 3px; }
  .zeitklapp .zeitplan__achse, .zeitklapp .zeitplan__wann { display: none; }
  .zeitklapp .zeitplan__paar { flex-direction: row; }
  .zeitklapp .zeitplan__uhr {
    font-size: .9375rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .zeitklapp .zeitplan__zu { margin-top: 14px; font-size: .875rem; }
}