/* Bomaye Gym — Probetraining-Seite
 *
 * Nachfolger von probetraining-modal.css. Was hier bewusst FEHLT, ist der
 * eigentliche Punkt dieser Datei:
 *
 *   kein position: fixed          - es gibt kein Overlay mehr
 *   kein max-height / 100dvh      - nichts deckelt die Hoehe des Widgets
 *   kein overflow: auto|hidden    - es gibt keinen zweiten Scroll-Container
 *
 * Gescrollt wird ausschliesslich das Dokument selbst, genau wie auf
 * stundenplan.html, wo das Bsport-Widget seit jeher ohne Scroll-Probleme im
 * Seitenfluss haengt. Eine Hoehenangabe steht hier nur als min-height fuer den
 * Ladezustand - eine Untergrenze verhindert das Springen des Layouts, eine
 * Obergrenze wuerde genau den Fehler zurueckholen, den dieser Umbau behebt.
 */

/* ── Seiten-Hero ── */
.pt-page-hero {
  background: #F5F0E8;
  padding: 100px 24px 60px;
  text-align: center;
  border-bottom: 1px solid rgba(10, 10, 8, 0.08);
}
.pt-page-hero .pt-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: var(--font-head);
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  color: #C9A84C;
  margin-bottom: 24px;
}
.pt-page-hero .pt-eyebrow::before,
.pt-page-hero .pt-eyebrow::after {
  content: '';
  width: 32px;
  height: 1px;
  background: #C9A84C;
}
.pt-page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 8vw, 5rem);
  color: #0A0A08;
  letter-spacing: 3px;
  margin: 0.5rem 0;
  text-transform: uppercase;
}
.pt-page-hero p {
  color: rgba(10, 10, 8, 0.6);
  font-family: var(--font-body);
  font-size: 1rem;
  margin-top: 0.75rem;
}

/* ── Kurzer Ablauf, damit die Seite nicht nur aus dem Widget besteht ── */
.pt-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2.25rem;
}
.pt-step {
  flex: 1 1 200px;
  max-width: 260px;
  text-align: center;
}
.pt-step-num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: #C9A84C;
  letter-spacing: 2px;
}
.pt-step p {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: rgba(10, 10, 8, 0.65);
  margin-top: 0.35rem;
  line-height: 1.5;
}

/* ─────────────────────────────────────────────────────────────────────────
   UNTER DEM KALENDER — Kontext statt nacktem Widget

   Die Seite bestand aus Kopfbereich, Widget und Fusszeile. Wer aus einer
   Anzeige kam, sah einen fremden Kalender und sonst nichts. Diese beiden
   Abschnitte kommen darunter, nicht davor: der Weg zum Kalender bleibt
   genauso kurz wie vorher.

   Beide nutzen bestehende Bauteile. "Dein erstes Mal" steht auf demselben
   hellen Grund wie der Buchungsbereich, damit .pt-steps unveraendert passt
   (dessen Textfarbe ist fuer hellen Grund gesetzt). Die Vertrauenszeile
   steht auf dunklem Grund, weil .hero-cred-v2-item helle Schrift hat -
   und leitet in die dunkle Fusszeile ueber.
   ───────────────────────────────────────────────────────────────────── */
.pt-erstes {
  background: #F5F0E8;
  border-top: 1px solid rgba(10, 10, 8, 0.08);
  padding: 56px 24px 64px;
}
.pt-erstes-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.pt-erstes-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4.5vw, 2.2rem);
  color: #0A0A08;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.pt-erstes-head p {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: rgba(10, 10, 8, 0.65);
  margin-top: 0.6rem;
  line-height: 1.6;
}
/* .pt-steps, .pt-step und .pt-step-num kommen unveraendert von oben. */
.pt-erstes .pt-steps { max-width: 900px; margin-left: auto; margin-right: auto; }

/* Vertrauenszeile. Die Bausteine .hero-cred-v2-item und
   .hero-cred-v2-divider sind aus index.html uebernommen, Wert fuer Wert -
   sie liegen dort im Seitenkopf und nicht in style.css. */
.pt-cred {
  background: #0A0A08;
  padding: 28px 24px;
}
.pt-cred-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0;
}
.pt-cred .hero-cred-v2-item {
  font-family: var(--font-head);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(245, 240, 232, 0.82);
  text-transform: uppercase;
  padding: 0 14px;
  white-space: nowrap;
}
.pt-cred .hero-cred-v2-item:first-child { padding-left: 0; }
.pt-cred .hero-cred-v2-item:last-child  { padding-right: 0; }
.pt-cred .hero-cred-v2-divider {
  display: block;
  width: 1px;
  height: 16px;
  background: #C9A84C;
  opacity: 0.55;
  flex-shrink: 0;
}
/* Umbruch auf schmalen Geraeten - genau wie auf der Startseite. */
@media (max-width: 560px) {
  .pt-cred-row { flex-wrap: wrap; row-gap: 10px; }
  .pt-cred .hero-cred-v2-item { font-size: 10px; letter-spacing: 0.05em; padding: 0 10px; }
  .pt-cred .hero-cred-v2-divider { display: none; }
  .pt-cred .hero-cred-v2-item::after { content: ' ·'; color: rgba(201, 168, 76, 0.6); }
  .pt-cred .hero-cred-v2-item:last-child::after { content: ''; }
}

/* ── Widget-Bereich: im Seitenfluss, ohne Deckel ── */
.pt-booking-section {
  background: #F5F0E8;
  padding: 56px 0 72px;
}
.pt-booking-head {
  text-align: center;
  margin-bottom: 2rem;
  padding: 0 24px;
}
.pt-booking-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  color: #0A0A08;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.pt-booking-head p {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: rgba(10, 10, 8, 0.6);
  margin-top: 0.5rem;
}
/* Die Einschraenkung steht vor der Terminliste, nicht darunter: wer erst
   scrollt und dann liest, hat sich den falschen Kurs schon ausgesucht. */
.pt-booking-limit {
  display: inline-block;
  border-left: 2px solid #C9A84C;
  padding-left: 12px;
  text-align: left;
  color: rgba(10, 10, 8, 0.85) !important;
  font-weight: 600;
}

/* Nur eine Untergrenze fuer den Ladezustand - niemals eine Obergrenze. */
#pt-cal-view {
  width: 100%;
  min-height: 420px;
}
#pt-cal-view:empty {
  min-height: 420px;
}

.pt-booking-note {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: rgba(10, 10, 8, 0.55);
  text-align: center;
  margin-top: 1.5rem;
  padding: 0 24px;
}

@media (max-width: 767px) {
  .pt-page-hero { padding: 84px 20px 44px; }
  .pt-booking-section { padding: 40px 0 56px; }
  #pt-cal-view,
  #pt-cal-view:empty { min-height: 380px; }

  /* Bsport setzt auf seinen Containern Seitenraender, die auf voller Breite
     als senkrechte Linien am Bildschirmrand erscheinen. Gleiche Behandlung
     wie auf stundenplan.html. */
  #pt-cal-view .cleanslate,
  #pt-cal-view > * {
    border-left: none !important;
    border-right: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Bsport-Widget — Markenoptik
   Gilt nur fuer den Kalender, der inline in dieser Seite haengt. Bsports
   eigener Anmeldedialog haengt an <body> und wird bewusst NICHT angefasst:
   sein Aussehen und sein Scrollverhalten gehoeren ihm.
   ───────────────────────────────────────────────────────────────────────── */

#pt-cal-view button,
#pt-cal-view .MuiButton-root,
#pt-cal-view [role="button"],
#pt-cal-view .MuiButtonBase-root {
  border-radius: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

#pt-cal-view .MuiButton-contained,
#pt-cal-view .MuiButton-containedPrimary {
  background-color: #C9A84C !important;
  color: #0A0A08 !important;
  border: 2px solid #C9A84C !important;
}

#pt-cal-view .MuiButton-text,
#pt-cal-view .MuiButton-outlined {
  color: #0A0A08 !important;
  background: transparent !important;
  border: 2px solid rgba(10, 10, 8, 0.2) !important;
}

#pt-cal-view .MuiCard-root,
#pt-cal-view .MuiPaper-root {
  border-radius: 0 !important;
  box-shadow: none !important;
}

#pt-cal-view .MuiInputBase-root,
#pt-cal-view .MuiOutlinedInput-root {
  border-radius: 0 !important;
}

#pt-cal-view .MuiChip-root {
  border-radius: 0 !important;
  background-color: rgba(201, 168, 76, 0.1) !important;
  color: #0A0A08 !important;
  border: 1px solid #C9A84C !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   Bsports Anmeldedialog in den Seitenfluss zwingen

   WARUM HIER UNSERE EIGENE KLASSE STEHT UND NICHT BSPORTS
   Bis hierher hingen diese Regeln an .bsport-user-interaction-modal__container.
   Der Geraetetest hat gezeigt, dass der Anmeldeschritt gar nicht so heisst -
   er heisst bs-activity--dialog, und Bsports MUI-Klassen tragen laufende
   Nummern (MuiPaper-root-889, nicht MuiPaper-root). Der Selektor traf nichts,
   also war dieser ganze Abschnitt auf der Seite wirkungslos.

   .pt-bsport-dialog vergeben WIR selbst, sobald probetraining-page.js den
   Dialog erkannt hat - nach Bauart, nicht nach Beschriftung. Damit kann kein
   Umbenennen bei Bsport diese Regeln mehr aushebeln. Wie gesucht wird, steht
   in probetraining-page.js beim Abschnitt "BSPORTS DIALOG FINDEN".

   Der Kalenderschritt scrollt einwandfrei, weil die Terminliste in unserem
   eigenen Markup haengt (#pt-cal-view) und das Dokument sie scrollt. Erst
   beim Tippen auf einen Termin baut Bsport seinen Dialog auf, haengt ihn an
   <body> und positioniert ihn fest, mit eigener Scroll-Flaeche. Ab da klemmte
   es - und deshalb half die Randleiste: die gehoerte noch zum Dokument.

   Statt Bsports Positionierung zu messen und darauf zu reagieren, wird sie
   hier ueberschrieben. Der Dialog bekommt keine Sonderrolle mehr, er ist ein
   Abschnitt der Seite wie jeder andere.

   position: relative statt static - dann bleibt er im Fluss, liefert aber
   weiterhin den Bezugsrahmen fuer absolut positionierte Kinder (Schliessen-
   Kreuz, Auswahllisten), die sonst an einen fremden Vorfahren springen.

   Eng auf die bekannte Bsport-Klasse begrenzt. Ohne Dialog greift hier
   nichts - der Kalenderschritt bleibt unberuehrt.
   ───────────────────────────────────────────────────────────────────────── */

body .pt-bsport-dialog {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  /* Ein transform macht das Element zum Bezugsrahmen fuer feste
     Positionierung darin - dann waere position: fixed bei Kindern wieder
     wirksam, obwohl wir sie eingereiht haben. */
  transform: none !important;
  z-index: auto !important;
  /* Die Abdunklung des Hintergrunds ergibt im Fluss keinen Sinn mehr und
     wuerde den Text unlesbar machen. */
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Keine Hoehendeckelung im Dialog: er soll in voller Laenge im Seitenfluss
   stehen, damit ihn das Dokument scrollt. */
body .pt-bsport-dialog * {
  max-height: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   WARUM HIER KEIN overflow MEHR STEHT

   Bis hierher stand an dieser Stelle:

     overflow-y: visible !important;

   mit der Absicht, innere Scroll-Flaechen abzuschalten. Die Regel hat das
   Gegenteil bewirkt. Nach CSS-Spezifikation kann overflow-y: visible nicht
   neben einem nicht-sichtbaren overflow-x bestehen - der Wert wird zu auto
   blockifiziert. Nachgemessen:

     gesetzt                                  berechnet
     overflow: hidden        (Bsports Karte)  hidden / hidden   kein Scroller
     dieselbe Karte + unsere Regel            hidden / AUTO     Scroller
     overflow-x: auto        + unsere Regel   auto   / AUTO     Scroller

   Aus jedem Kasten, den Bsport nur beschneidet - auf MUIs Paper und Card die
   Regel, nicht die Ausnahme -, wurde so ein beruehrungsscrollbarer Kasten.
   Und weil dieselbe Regel mit max-height: none die Hoehendeckelung entfernt,
   passt der Inhalt genau hinein: ein Scroll-Kasten mit null Scrollweg.

   Das ist die bekannte iOS-Falle. WebKit uebergibt den Wisch an diesen
   Kasten, der Kasten bewegt sich um 0 px, und weitergereicht wird nichts
   mehr. Am Bildschirmrand liegt der Finger ausserhalb dieser Karten - dort
   greift das Dokument. Genau das war die gemeldete Randleiste.

   Eine reine CSS-Loesung gibt es nicht: ein Element kann nicht waagerecht
   scrollen und gleichzeitig senkrecht kein Scroll-Container sein, weil jeder
   nicht-sichtbare Wert die andere Achse mitzieht. Deshalb entscheidet
   probetraining-page.js pro Element anhand des TATSAECHLICHEN Scrollwegs,
   siehe dort "SCHEINSCROLLER".
   ───────────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────────
   SENKRECHT WISCHEN IST IM DIALOG IMMER ERLAUBT

   Vierter Geraetetest: ein Wisch, der auf dem VERSENDEN-Knopf beginnt,
   bewegt die Seite nicht - daneben begonnen schon. Kein Scroll-Kasten in der
   Kette, kein abgefangenes Ereignis. Damit bleibt als Ursache der Startpunkt
   der Geste, und dort entscheidet touch-action.

   Was Bsport auf seinen Knoepfen setzt, ist von hier aus nicht nachlesbar -
   cdn.bsport.io ist nicht erreichbar. Deshalb wird es nicht erraten, sondern
   ueberschrieben: im Dialog darf ueberall senkrecht gewischt werden, auf
   Knoepfen wie auf Text. pan-y erlaubt genau das und laesst Tippen und
   Klicken unberuehrt.

   Das !important ist noetig, weil ein Wert aus Bsports eigenem Stylesheet
   sonst gewinnen koennte. Gegen einen Hoerer, der die Geste per
   preventDefault abfaengt, hilft CSS allerdings nicht - dagegen steht der
   Wischschutz in probetraining-page.js, Abschnitt "DER WISCH, DER AUF EINEM
   KNOPF BEGINNT".
   ───────────────────────────────────────────────────────────────────────── */
body .pt-bsport-dialog,
body .pt-bsport-dialog * {
  touch-action: pan-y !important;
}

/* Wo doch ein Scroll-Kasten stehen bleibt, muss er den Wisch weiterreichen
   duerfen. contain oder none von MUI wuerden die Kette hier kappen. */
body .pt-bsport-dialog,
body .pt-bsport-dialog * {
  overscroll-behavior: auto !important;
}

/* Das Zuruecktreten der Terminliste steht NICHT mehr hier.

   Diese Regel lautete body.bsport-modal-open #pt-cal-view { display: none }.
   Richtig, solange Bsports Dialog an <body> hing. Der Geraetetest hat
   gezeigt, dass er in #pt-cal-view haengt - die Regel haette ihn also mit
   ausgeblendet und den Buchungsbereich leer gelassen.

   Ausgeblendet wird jetzt in probetraining-page.js, Abschnitt "NUR DER
   DIALOG BLEIBT STEHEN": dort wird der Weg vom Dialog nach oben abgegangen
   und nur das ausgeblendet, was daneben steht. Das trifft in beiden
   Gestalten das Richtige. */

/* ─────────────────────────────────────────────────────────────────────────
   NOTBEHELF: Hinweis auf das Wischen am Bildschirmrand

   KEINE Geraeteabfrage mehr. Die erste Fassung war mit @media (pointer:
   coarse) abgeriegelt - und auf dem Geraet des Kunden blieb der Hinweis
   unsichtbar. Die eigentliche Ursache lag zwar woanders (der Hinweis hing in
   Bsports React-Portal und wurde dort laufend weggeraeumt, siehe
   probetraining-page.js), aber die Lehre bleibt: ein Hinweis, der auf dem
   Zeigergeraet ueberfluessig ist, kostet nichts. Einer, der genau dort
   ausfaellt, wo er gebraucht wird, kostet die Buchung. Also wird er ueberall
   angezeigt.

   ER BLEIBT WEG, BIS ES ETWAS ZU ERKLAEREN GIBT
   Die vorige Fassung hatte hier gar keinen Standardzustand: der Hinweis stand
   von der ersten Sekunde an im Seitenfluss ueber der Terminliste. Jeder
   Besucher las "Falls sich das Formular nicht scrollen laesst", bevor es
   ueberhaupt ein Formular gab - ein Umweg, den die meisten nie brauchen, als
   Begruessung. Das war eine Ueberkorrektur: weil der Hinweis einmal
   unsichtbar geblieben war, wurde er anschliessend gar nicht mehr
   abgeriegelt. Die Ursache von damals lag aber nicht am Abriegeln, sondern
   am Ort (React-Portal, siehe probetraining-page.js).

   Also: display none als Standard, sichtbar nur unter body.pt-form-step.
   Der Schalter ist eine Klasse am <body> und liegt damit ausserhalb jedes
   React-Baums - genau deshalb kann React ihn nicht wegraeumen. Welche drei
   Signale die Klasse setzen, steht in probetraining-page.js.

   pointer-events: none ist Pflicht - der Hinweis darf unter keinen Umstaenden
   selbst Beruehrungen abfangen, sonst waere er Teil des Problems.
   ───────────────────────────────────────────────────────────────────────── */

/* Nur noch das Aussehen. Die Lage setzt die Regel darunter - der Hinweis
   erscheint ausschliesslich angeheftet, einen Zustand im Seitenfluss gibt
   es nicht mehr. */
#pt-edge-hint {
  display: none;
  padding: 12px 14px;
  background: #0A0A08;
  color: #F5F0E8;
  border: none;
  border-left: 3px solid #C9A84C;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.45;
  letter-spacing: 0.01em;
  text-align: left;
}

/* Angeheftet, sobald der Buchungsschritt laeuft. Die Klasse setzt
   probetraining-page.js - entweder weil Bsports Dialog erkannt wurde oder
   weil in die Terminliste getippt wurde. */
body.pt-form-step #pt-edge-hint {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2147482000;
  margin: 0;
  max-width: none;
  pointer-events: none;
  box-shadow: 0 2px 12px rgba(10, 10, 8, 0.35);
  padding-top: max(12px, env(safe-area-inset-top));
  /* Angeheftet steht der Hinweis auch mal ueber dunklem Grund - etwa dem
     Footer. Ohne Abgrenzung verschwaende er dort. */
  border-bottom: 1px solid rgba(201, 168, 76, 0.35);
}

/* Der angeheftete Hinweis liegt oben. Damit er die ersten Zeilen des
   Formulars nicht verdeckt, rueckt der Buchungsbereich nach. */
body.pt-form-step .pt-booking-section {
  padding-top: 96px;
}

/* Nur mit ?ptdebug=1 sichtbar. */
#pt-touch-debug {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  /* Im Geraetetest hat dieser Kasten die halbe Seite verdeckt, samt der
     Knoepfe, die gepruefte werden sollten. Er bleibt jetzt bei einem
     Drittel des Schirms und scrollt in sich selbst. */
  max-height: 33vh;
  overflow-y: auto;
  z-index: 2147483000;
  padding: 8px 10px;
  background: rgba(10, 10, 8, 0.92);
  color: #C9A84C;
  font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  pointer-events: none;
  word-break: break-all;
}


/* ═════════════════════════════════════════════════════════════════════════
   SCROLL-HILFE

   WOZU
   Der Weg, der ohne Geste auskommt. Sechs Anlaeufe haben das Wischen im
   Anmeldeformular auf iOS nicht verlaesslich zum Laufen gebracht; der letzte
   Geraetetest zeigte null ankommende Beruehrungsereignisse, mit einem Stand,
   der die Ereignisse gar nicht mehr anfasst. Dieser Knopf ruft scrollBy und
   haengt an keiner Geste, an keinem touch-action, an keinem fremden Hoerer.

   WARUM SIE SO SCHMAL IST
   Die zweite Fassung war 52 Pixel breit und lag auf halber Hoehe am rechten
   Rand - dort, wo Bsport das Auge zum Einblenden des Passworts hinsetzt. Sie
   hat es verdeckt. Jede schwebende Flaeche verdeckt irgendwann irgendetwas;
   die Frage ist nur, wo am wenigsten steht.

   Gemessen am Anmeldeformular: die Karte endet rund 76 Pixel vor dem rechten
   Bildrand, das Augensymbol sitzt rund 134 Pixel davor. Die aeusseren knapp
   zwanzig Pixel sind die einzige Zone, in der auf dieser Seite nie Inhalt
   liegt. Genau dort sitzt die Leiste jetzt: 18 Pixel sichtbar.

   Beruehrt wird trotzdem mehr, als man sieht - die Knoepfe greifen ueber ein
   unsichtbares Feld 16 Pixel nach innen. Das bleibt immer noch weit vor dem
   Augensymbol und macht aus 18 sichtbaren Pixeln ein Ziel von 34.

   Und sie ist leise: im Ruhezustand halb durchscheinend, damit sie mit der
   Randkante verschmilzt. Wer sie benutzt oder scrollt, sieht sie deutlich.
   ═════════════════════════════════════════════════════════════════════════ */

#pt-scroll-hilfe {
  position: fixed;
  right: 0;
  top: 50%;
  z-index: 2147482500;
  display: none;
  pointer-events: none;
  /* Bestimmt, nicht blass. Eine halbdurchsichtige dunkle Flaeche wird ueber
     dem cremefarbenen Formular zu einem grauen Schlieren und sieht aus wie
     ein Darstellungsfehler. Leise wird sie ueber ihre Breite, nicht ueber
     ihre Deckkraft. */
  background: rgba(10, 8, 4, 0.9);
  border-left: 1px solid rgba(201, 168, 76, 0.4);
  border-radius: 0;
  opacity: 0;
  transform: translate(10px, -50%);
  transition: opacity 0.4s var(--ease-expo, cubic-bezier(0.16,1,0.3,1)),
              transform 0.4s var(--ease-expo, cubic-bezier(0.16,1,0.3,1)),
              background-color 0.3s ease;
}
#pt-scroll-hilfe.ist-da {
  display: grid;
  grid-template-columns: 2px 16px;
  opacity: 1;
  transform: translateY(-50%);
}
/* Beim Antippen wird sie kurz ganz undurchsichtig - die einzige Rueckmeldung,
   die es bei dieser Breite braucht. */
#pt-scroll-hilfe.ist-da:active {
  background: rgba(10, 8, 4, 1);
}

/* Die Schiene ist bei dieser Breite das Hauptmerkmal: sie sagt ohne ein
   Wort, wie weit das Formular durchlaufen ist. */
.pt-scroll-schiene {
  position: relative;
  display: block;
  background: rgba(201, 168, 76, 0.14);
}
.pt-scroll-fortschritt {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0;
  background: var(--gold, #C9A84C);
  transition: height 0.3s var(--ease-expo, cubic-bezier(0.16,1,0.3,1));
}

.pt-scroll-saeule {
  display: flex;
  flex-direction: column;
}

.pt-scroll-knopf {
  position: relative;
  pointer-events: auto;
  width: 16px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--gold, #C9A84C);
  cursor: pointer;
  /* Der Knopf selbst darf nie Teil des Problems werden. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.28s ease;
}
/* Das unsichtbare Ziel reicht nach innen, damit der Daumen trifft, ohne dass
   die Leiste breiter aussieht. Nachgemessen am Anmeldeformular: mit 18 Pixel
   Ueberhang begann es bei x=359 und lag damit zwei Pixel auf dem Augensymbol,
   das bei x=361 endet - es haette dessen Antippen abgefangen. Mit 12 bleiben
   vier Pixel Luft. Die fehlende Breite holt die Hoehe zurueck: 44 statt 38. */
.pt-scroll-knopf::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; right: 0;
  left: -12px;
}
.pt-scroll-knopf svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

/* Die Haarlinie zwischen den beiden Haelften. */
.pt-scroll-trenner {
  display: block;
  height: 1px;
  margin: 0 4px;
  background: rgba(201, 168, 76, 0.2);
}

/* In diese Richtung geht es nicht weiter. */
.pt-scroll-knopf.ist-fertig {
  opacity: 0.16;
  pointer-events: none;
}
/* Ganz oben gibt es nichts zurueckzugehen - dann faellt die obere Haelfte
   samt Trennlinie weg, statt blass herumzustehen. */
.pt-scroll-hoch.ist-fertig,
.pt-scroll-hoch.ist-fertig + .pt-scroll-trenner {
  display: none;
}

/* Meldet sich einmal, dann Ruhe. */
@keyframes pt-scroll-winken {
  0%, 72%, 100% { transform: translateY(0); }
  82%           { transform: translateY(3px); }
  92%           { transform: translateY(0); }
}
#pt-scroll-hilfe:not(.ist-ruhig) .pt-scroll-runter:not(.ist-fertig) svg {
  animation: pt-scroll-winken 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  #pt-scroll-hilfe,
  #pt-scroll-hilfe .pt-scroll-runter svg,
  .pt-scroll-fortschritt { animation: none; transition: none; }
}