/* =============================================================================
   PHYSIOPARK MG · PP Termine · Formular-CSS
   Datei:   ppw-termine.css      Version: 0.8.22
   System:  gebrückt auf ppw-base.css (globale --ppw-* Tokens, Hardcode-
            Fallbacks eingebaut). Scope: alles unter .ppanfrage-wrap gekapselt.
   Laden:   auf allen Frontend-Seiten (Elementor-Lektion aus pp-absage).

   CHANGELOG (neueste zuerst · historische Einträge NIE umschreiben)
   --------------------------------------------------------------------------
   0.8.22 · 2026-08-16
     - NACHZUG 2: die Regeln blieben live wirkungslos, weil Autoptimize
       die Datei an `.ppreset-slots-list` brach (schließende Klammer der
       Regel im Minify verloren — alles danach wurde als verschachtelte
       Regeln des ppreset-Blocks gelesen und matchte nichts mehr).
       Auslöser: der Inline-Kommentar mitten im Deklarationsblock (mit
       Klammern im Text). Kommentar jetzt ÜBER der Regel.
   0.8.21 · 2026-08-16
     - NACHZUG 0.8.20: scroll-margin-Regeln griffen live NICHT — der
       Autoptimize-Minifier schrieb sie als `& .ppanfrage-form-area`
       (Nested-Syntax ohne gueltige Eltern-Regel, Browser verwirft die
       Regel; gemessen: computed scroll-margin-top 0px). Selektor jetzt
       explizit `.ppanfrage-wrap .ppanfrage-form-area` — dagegen stabil.
   0.8.20 · 2026-08-16
     - Flüssige Wizard-Schritte (GF): nach dem PRG-Redirect gleitet der
       Browser sanft zum Formular (scroll-behavior auch auf Touch, mit
       prefers-reduced-motion-Respekt) und landet mit scroll-margin-top
       unter der Sticky-Navigation statt verdeckt am Rand — auf Mobil
       muss nicht mehr nachjustiert werden.
   0.8.20 · 2026-08-22
     - AUTOPTIMIZE-FRESSER (GF-iPhone, Schritt 6): siehe pp-termine.php 0.46.4 —
       diese Datei wird jetzt per autoptimize_filter_css_exclude als EIGENER
       Request ausgeliefert (das Aggregat hatte die Region slots-list-Kommentar
       bis Slot-Grundregel-Kommentar zerfressen). Hier zusaetzlich der Guertel
       color:var(--ppanfrage-text) in der Slot-Grundregel.
   0.8.19 · 2026-08-12
     - LIVE-BUG iPhone (GF-Screenshot, Schritt 6 von 6): Die Terminvorschlags-
       Karten und der "Keiner passt"-Button liefen rechts aus dem Viewport,
       der "Live-Stand"-Rahmen clippte. URSACHE (am Live-System nachgemessen):
       Die Site-CSS setzt global `button { white-space: nowrap }` — der
       "Keiner passt"-Text konnte nicht umbrechen, sein min-content (~411px)
       zwang die 1fr-Grid-Spur (= minmax(auto, 1fr), auto-Minimum!) ueber die
       Listenbreite (261px auf 375px-iPhone), alle Karten strecken sich auf
       die Spur. DREIFACH-FIX: (1) Scope-Reset `.ppanfrage-wrap button
       { white-space: normal }` — neutralisiert die Fehlerklasse fuer ALLE
       Buttons der Strecke (der Upsell-Button trug den Einzel-Fix schon seit
       0.17.8; gewollte Einzeiler wie .ppanfrage-btn-back/-next gewinnen mit
       Spezifitaet 0,2,0 weiter). (2) Slot-Grids auf minmax(0, 1fr)
       (#ppanfrage-slots-list beide Breakpoints, .ppreset-slots-list beide) —
       eine Spur kann den Container strukturell nie mehr ueberragen.
       (3) .ppanfrage-slot und .ppanfrage-slot-keiner zusaetzlich
       min-width:0 + max-width:100% + white-space:normal als Guertel.
       Desktop unveraendert: Spuren waren dort breiter als jeder min-content,
       Umbruch tritt nur ein, wo vorher Ueberlauf war. Alle uebrigen Grids
       der 6 Schritte gesichtet: Kinder sind <label>/<a> (vom Theme-nowrap
       nicht betroffen) oder bereits minmax(0, …)-gehaertet.
   0.8.18 · 2026-07-30
     - Der Block .ppanfrage-infobox (0.25.7) ist ERSATZLOS entfallen; er stylte
       die Box "Was ist Manuelle Therapie?", die es im Markup nicht mehr gibt.
       Er war zugleich die Ursache des gemeldeten Abstands-Fehlers: die Box war
       ein Rasterelement OHNE grid-column:1/-1 und belegte deshalb nur die linke
       Spalte, waehrend ihr Eigenrand (margin 12/0/4) zusaetzlich auf den
       Rasterabstand (gap:10px) kam. GEMESSEN im GKV-Fall: Luecke vor der Karte
       "Mein Heilmittel steht nicht dabei" 39px statt der durchgehenden 10px.

   0.8.17 · %s
     - LUFT UM DIE BUCHUNGSANFRAGE (GF: "wirkt reingequetscht"):
       scroll-margin-top am Panel-Container (die Seite hat eine klebende
       Kopfleiste von rund 65 CSS-Pixeln — ohne das verschwindet die
       Ueberschrift darunter) und mitwachsende Innenabstaende ueber clamp().
     - STANDORT-WAHL IN DER FAMILIENFARBE (GF: "haben noch die alten CSS").
       Der Hausstandard §7 (Waldhausen gruenlich, Bettrath roetlich) bleibt,
       aber nur als ERKENNUNGSMERKMAL an der linken Kante. Als FLAECHENFARBE
       einer Wahl war er falsch: zwei gleichwertige Optionen, von denen eine
       rot eingefaerbt ist, lesen sich als "verfuegbar" und "gesperrt".
       Die Verfuegbarkeits-Chips behalten ihre Flaechenfarbe — dort stehen
       beide Standorte nebeneinander und die Farbe traegt echte Information.
       Adresse: opacity 0.8 raus, Farbe #5a6f75 (5,30:1 nachgerechnet).

   0.8.16 · 2026-07-30
     - EINE TEAL-FAMILIE statt vier Farbtoenen (GF-Entscheid nach
       Entwurfs-Vergleich, Variante C "kraeftig gestaffelt"): die vier
       Modus-Karten trugen Bernstein, Teal, Violett und Navy — die Farbe
       sagte damit nichts ueber den Rang, und die EMPFOHLENE Karte war
       zufaellig die blasseste. Jetzt eine Hausfarbe, Rang ueber die
       Intensitaet (30 % / 15 % / 7 %), die Buchungs-Karte ueber die FORM
       abgesetzt (gestrichelter Umriss, sie ist inhaltlich etwas anderes:
       drei Wege zu fragen, einer zu buchen). Standort-Chips unberuehrt.
     - DEFEKT aus 0.29.0 behoben: die dortigen Verlaufs-Regeln fuer
       :hover und :checked standen VOR drei aelteren Regeln mit
       bitgleicher Spezifitaet (0,3,0), die ein flaches
       `background: var(--modus-soft)` setzten. Bei Gleichstand gewinnt
       die spaetere — der Verlauf griff also im Ruhezustand und
       verschwand bei Beruehrung und Auswahl. Der neue Stand steht
       deshalb geschlossen am Dateiende.
     - Die Akzentkante der empfohlenen Karte sitzt auf einem eigenen
       Radius statt hinter overflow:hidden — letzteres haette das Badge
       gekappt, das bewusst ueber die Oberkante ragt (top:-13px).
     - Hinweis zur 0.8.15-Luecke: die 0.29.0-Aenderung ging ohne
       Header-Bump in diese Datei; sie ist hier nachtraeglich benannt.

   0.8.15 · 2026-07-26
     - Telefon-Block nach unten (GF 0.24.2): schlanke .pptermine-telline
       oben (Textzeile + kleiner Status), Kontakt-Sektion
       (.pptermine-kontakt) und Unentschlossenen-Karten
       (.pptermine-weiter-*) unter dem Formular.
   0.8.14 · 2026-07-26
     - Heilmittel-Label in der Vorschlags-Karte (.ppanfrage-slot-
       heilmittel, 0.24.0): kleine ruhige Zeile unter der Dauer.
   0.8.13 · 2026-07-23
     - Mailbox-Zeile nur im geschlossenen Zustand sichtbar (Zustands-
       klasse per :has(), deckt Render und JS-Update ab).
   0.8.12 · 2026-07-23
     - Behandlungsart-Gruppen: kleine Gruppentitel (Physiotherapie-
       Heilmittel / Direktzugang & Wellness) mit feiner Trennlinie;
       Dauer-Feld als ruhige Box (zweispaltig ab 640 px).
   0.8.11 · 2026-07-22
     - Mehr Luft über den Telefon-Karten (20px); Status-Punkt samt CSS
       entfernt (Kartenfarbe + Animation tragen den Zustand); Texte in
       den Karten zentriert; Akzent-Strich atmet minimal weiter.
   0.8.10 · 2026-07-22
     - Modus-Call belebt: einmaliges sanftes Einsetzen + atmender
       Akzent-Strich (signalisiert den Einstieg); reduced-motion ruhig.
     - Telefon-Karten: Luft oben (12px), Inhalt in Leselogik (Label
       klein in Kapitälchen, Nummer groß/kräftig); Pfeil der
       Direktbuchung-Karte samt CSS entfernt.
   0.8.9 · 2026-07-22
     - Telefon-Intro: schmale Pille über den Standort-Nummern mit
       Hörer-Icon und kurzem Einlader zum Anruf.
   0.8.8 · 2026-07-22
     - Mailbox-Info in den Telefon-Karten: dezente zweite Zeile mit
       Mailbox-Icon (nimmt Anrufe für Absagen und Anfragen an).
   0.8.7 · 2026-07-22
     - Heilpraktiker-Hinweis (20 Minuten früher, Anamnesebogen) als
       Akzent-Box unter dem Behandlungsart-Grid.
   0.8.6 · 2026-07-22
     - FAQ-Spacer: Trennlinien (sanft auslaufend) mit Hinweistext und
       dezent pulsierendem Pfeil nach unten; mobil kompakter,
       reduced-motion ruhig.
   0.8.5 · 2026-07-22
     - Schlaf-Animation zurück (GF): geneigter Hörer mit zwei ruhig
       aufsteigenden z in Blau, dazu dezenter Mond oben rechts in der
       Karte; die Basis-Linie (Strich-Effekt) entfernt.
   0.8.4 · 2026-07-22
     - Modus-Stufen mobil: Icon + Zeitwert (30 Sek./1 Min./3 Min.)
       statt nur Icons — der Wechsel ist sofort verständlich.
   0.8.3 · 2026-07-22
     - Upsell-Knopf zweizeilig (Titel + Unterzeile) mit sauberem
       Umbruch — der lange Einzeiler brach mobil aus dem Knopf aus.
   0.8.2 · 2026-07-22
     - Der Zusatz „Online-Anfrage schläft nie" entfällt samt CSS.
   0.8.1 · 2026-07-22
     - Geschlossen-Status der Telefon-Karten: Der Hörer liegt jetzt
       AUFGELEGT auf einer kleinen Basis (flach gedreht) statt zu
       schlafen; Abenddämmerung in ruhigem Blau statt Warm-Lila.
   0.8.0 · 2026-07-22
     - Absende-Zeile als Flex-Reihe: „Zurück" (Geist) links, „Anfrage
       senden" rechts, Vertraulichkeits-Zeile darunter; die zugehörigen
       toten submit--nav-Regeln entfernt (das Umhängen per JS entfällt).
   0.7.0 · 2026-07-22
     - Modus-Stufen: alle drei Wege als schmale Segmente in der
       Fortschritts-Zeile, Sprung in beide Richtungen, aktive Stufe in
       Modusfarbe. [hidden]-Guard und Meta-Layout-Scope aus dem
       adversarialen Debug.
   0.6.0 · 2026-07-22
     - Modus-Pille in der Fortschritts-Zeile: schmal, in der Farbwelt
       des Modus getönt, mit Ein-Klick-Aufstieg (↑).
   0.5.2 · 2026-07-22
     - GF-UI-Runde: Gewählter Slot mit brand-soft-Füllung; „Keiner
       passt" als sichtbare Box (statt Textlink); Karten-Badges mit
       nowrap + Ellipse (deckten auf dem Desktop den Kartentitel);
       Karten mit mehr Oberluft; Ladezustand-Klasse für den
       Neu-Laden-Knopf.
   0.5.1 · 2026-07-22
     - [hidden]-Guard für den Countdown: display:flex hatte das
       hidden-Attribut ausgehebelt, der Timer wäre immer sichtbar
       gewesen (Debug 0.17.1).
   0.5.0 · 2026-07-22
     - Slot-Zeitfenster (0.17.0): 5-Minuten-Countdown unter dem Hinweis
       (ruhig pulsierender Punkt, reduced-motion aus) und Reload-Bar
       (gestrichelt, Ghost-CTA) für „Keiner passt" und Ablauf.
   0.4.0 · 2026-07-22
     - FAQ-Block (.pptermine-faq) unter dem Formular: aufklappbare
       Fragen ohne JavaScript (details/summary), selbe Kartenwelt,
       Plus/Minus-Indikator rein in CSS, Fokus-Ring, reduced-motion.
   0.3.0 · 2026-07-21
     - Seiten-Übersicht (.pptermine-hero): Titel, Vertrauens-Punkte,
       Einleitung, zwei Telefon-Buttons (Outline, Petrol).
     - Regionen in Gruppen (.ppanfrage-rgruppe) mit Zwischenüberschrift
       und Trennlinie; kleine Chip-Variante für die Seitenangabe.
     - Fortschrittsleiste motivierend: höherer Balken, Leucht-Schatten,
       wanderndes Lauflicht, Impuls beim Wachsen, grüner Abschluss bei
       100 Prozent, Zeile "Schritt x von y" / "n % geschafft".
       Alles deaktiviert bei prefers-reduced-motion.
     - Vertraulichkeits-Hinweis unter dem Absenden-Button.
     Kontraste: Brand #0f5c63 auf Weiß 7,7:1, Deep #0a464c auf Weiß 10,5:1,
     Muted-Soft #5a737a auf Weiß 5,0:1, Grün #1e7e34 auf Weiß 4,9:1 (ok).
   0.2.0 · 2026-07-21
     - THEORG-Direktbuchung: Styles für das Buchungs-Modul (.ppbuchung):
       Standort-Wahl (Chips), Bettrath-Hinweis (amber), iframe-Block.
       Kontraste aus dem geprüften Bestand (amber #6b5300 auf #fdf3d7
       6,6:1, weiß auf #0f5c63 7,7:1, deep #0a464c auf #e3eff0 9,0:1).
   0.1.0 · 2026-07-21
     - Initiale Version: Tab-Leiste der Seiten-Shell ([pp_termine]),
       Modus-Karten (Highlight mit Badge "Empfohlen"), Standort-Karten,
       Chips, Regionen-Icon-Grid (Auswahl petrol), Kurzfragen-Karten,
       Upload-Pill, Wizard (Fortschrittsanzeige, Schritte, Navigation),
       Erfolgs- und Fehlerboxen, responsive, reduced-motion.
       Farbpalette identisch mit pp-absage (Familien-Standard).

   KONTRAST-AUDIT (2026-07-21, WCAG 2.1 AA, relative Luminanz)
   --------------------------------------------------------------------------
   Kombination                                   Verhältnis  Schwelle  Status
   Text #0e2329 auf #ffffff                      16,3:1      4,5:1     ok
   Text #3a5258 auf #ffffff                       8,3:1      4,5:1     ok
   Text #3a5258 auf #f6fafa (Cards)               7,9:1      4,5:1     ok
   Text #5a737a auf #ffffff (Hints, Platzhalter)  5,0:1      4,5:1     ok
   Weiß auf #0f5c63 (Buttons, Chips, Badge)       7,7:1      4,5:1     ok
   Weiß auf #2f7880 (Gradient-Ende)               5,1:1      4,5:1     ok
   Brand #0f5c63 auf #e3eff0 (Icons, Links)       6,6:1      4,5:1     ok
   Deep #0a464c auf #e3eff0 (Telefon, Badge)      9,0:1      4,5:1     ok
   Amber #6b5300 auf #fdf3d7 (Hinweise)           6,6:1      4,5:1     ok
   Amber dunkel #8a6100 auf #fdf3d7 (Badge)       5,0:1      4,5:1     ok
   Grün #1e7e34 auf #e9f6ec (Erfolg)              4,6:1      4,5:1     ok
   Rot #c0392b auf #fbeeec (Fehlerbox)            4,8:1      4,5:1     ok
   Rot #c0392b auf #ffffff (Fehlertext)           5,4:1      4,5:1     ok
   Inakt. Schritt #5a737a auf #ffffff             5,0:1      3,0:1     ok
   Fokus-Ring #0f5c63 auf #ffffff                 7,7:1      3,0:1     ok
   Chip weiß auf #0f5c63 (gewählt)                7,7:1      4,5:1     ok
   Ghost-CTA #0a464c auf #ffffff                 10,5:1      4,5:1     ok
   Tab inaktiv #3a5258 auf #f1f7f7                7,5:1      4,5:1     ok
   --------------------------------------------------------------------------
   ============================================================================= */

.ppanfrage-wrap *,
.ppanfrage-wrap *::before,
.ppanfrage-wrap *::after {
  box-sizing: border-box;
}

/* THEME-NEUTRALISIERUNG (0.8.19, Live-Bug iPhone): Die Site-CSS setzt global
   `[type="button"], [type="submit"], button { white-space: nowrap }`. Damit
   kann KEIN Button-Text dieses Plugins umbrechen — der Text bestimmt als
   min-content die Breite. In einer Grid-Spur `1fr` (= minmax(auto, 1fr))
   sprengt dieser auto-Mindestwert die Spur über die Containerbreite hinaus:
   Genau so liefen die Terminvorschlags-Karten samt „Keiner passt“-Button auf
   dem iPhone rechts aus dem Viewport (411px Spur in einer 261px Liste).
   Die Regel stellt im Plugin-Scope das normale Umbruchverhalten wieder her
   (UA-Default für <button> ist `normal`). Bewusst gewollte Einzeiler
   (.ppanfrage-btn-back/-next, .ppanfrage-modus-badge, Chips) behalten ihr
   eigenes nowrap — ihre Regeln haben höhere Spezifität (0,2,0) und gewinnen.
   Der Upsell-Button trug denselben Einzel-Fix schon seit 0.17.8; diese
   Regel schließt die Fehlerklasse für ALLE Buttons der Strecke. */
.ppanfrage-wrap button {
  white-space: normal;
}

.ppanfrage-wrap {
  --ppanfrage-font: var(--ppw-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif);

  --ppanfrage-surface: var(--ppw-surface, #ffffff);
  --ppanfrage-surface-soft: var(--ppw-bg-alt, #f6fafa);
  --ppanfrage-tint: #f1f7f7;

  --ppanfrage-text: #0e2329;
  --ppanfrage-muted: #3a5258;
  --ppanfrage-muted-soft: #5a737a;

  --ppanfrage-brand: var(--ppw-brand, #0f5c63);
  --ppanfrage-brand-deep: var(--ppw-brand-deep, #0a464c);
  --ppanfrage-brand-hover: var(--ppw-brand-hover, #0b494f);
  --ppanfrage-brand-soft: var(--ppw-brand-soft, #e3eff0);

  --ppanfrage-border: var(--ppw-border, #d4e1e3);
  --ppanfrage-border-soft: #e5edee;

  --ppanfrage-shadow: var(--ppw-shadow-md, 0 14px 32px rgba(7, 24, 28, 0.10));
  --ppanfrage-shadow-sm: var(--ppw-shadow-sm, 0 4px 12px rgba(7, 24, 28, 0.06));

  --ppanfrage-error: #c0392b;
  --ppanfrage-error-soft: #fbeeec;
  --ppanfrage-success: #1e7e34;
  --ppanfrage-success-soft: #e9f6ec;

  font-family: var(--ppanfrage-font);
  color: var(--ppanfrage-text);
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 4px;
  /* Kein horizontales Scrollen der ganzen Seite, falls ein Element
     (Karte, Chip, Fortschrittsleiste) ein paar Pixel übersteht.
     "clip" statt "hidden": Es erzeugt keinen Scroll-Kontext, dadurch
     bleibt der sticky Fortschritt auf dem Handy funktionsfähig und das
     Eselsohr der Modus-Karten darf weiter oben herausragen. */
  overflow-x: clip;
}

/* ============================================================
   SEITEN-ÜBERSICHT / HERO ([pp_termine], ab 0.3.0)
   ============================================================ */
.ppanfrage-wrap .pptermine-hero {
  background: var(--ppanfrage-surface);
  border: 1px solid var(--ppanfrage-border);
  border-radius: 18px;
  box-shadow: var(--ppanfrage-shadow-sm);
  padding: 18px 16px 16px;
  margin: 0 0 16px;
  text-align: center;
}

.ppanfrage-wrap .pptermine-hero-title {
  margin: 0 0 8px;
  font-size: clamp(1.4rem, 3.4vw, 1.85rem);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ppanfrage-text);
}

/* Akzent-Unterstrich: ein ruhiger Verlaufs-Strich, der beim Laden
   einmal einwächst — die Überschrift von etwas Tollem (0.13.9) */
.ppanfrage-wrap .pptermine-hero-title::after {
  content: "";
  display: block;
  width: 96px;
  height: 4px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ppanfrage-brand), #2f9e8f);
  animation: pptermine-underline 0.6s ease-out 0.15s both;
}

@keyframes pptermine-underline {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ppanfrage-wrap .pptermine-hero-title::after {
    animation: none;
  }
}


.ppanfrage-wrap .pptermine-hero-tel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  max-width: 560px;
  margin: 20px auto 0;
}

/* Nebeneinander ab 640 px: hält den Einstieg flach (0.13.2) */
@media (min-width: 640px) {
  .ppanfrage-wrap .pptermine-hero-tel {
    grid-template-columns: 1fr 1fr;
  }
}

.ppanfrage-wrap .pptermine-telbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid #98bcc1;
  border-radius: 12px;
  background: var(--ppanfrage-surface);
  color: var(--ppanfrage-brand-deep);
  font-weight: 800;
  font-size: 0.95rem;
  text-decoration: none !important;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.ppanfrage-wrap .pptermine-telbtn:hover,
.ppanfrage-wrap .pptermine-telbtn:focus-visible {
  background: var(--ppanfrage-brand-soft);
  border-color: var(--ppanfrage-brand);
  outline: none;
}

.ppanfrage-wrap .pptermine-telbtn svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.ppanfrage-wrap .pptermine-telbtn-txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.25;
  text-align: center;
}

.ppanfrage-wrap .pptermine-telbtn-ort {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ppanfrage-muted-soft);
}

.ppanfrage-wrap .pptermine-telbtn-nr {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--ppanfrage-brand-deep);
  letter-spacing: 0.01em;
}

/* Optionale Frage (betroffene Seite) dezent absetzen */
.ppanfrage-wrap .ppanfrage-kf-seite {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--ppanfrage-border);
}

.ppanfrage-wrap .pptermine-panel[hidden] {
  display: none !important;
}

.ppanfrage-wrap .pptermine-panel.is-on {
  animation: ppanfrageStepIn 0.25s ease;
}

/* Platzhalter im Buchungs-Tab (bis der THEORG-Proxy andockt) */
.ppanfrage-wrap .pptermine-buchung-placeholder {
  background: var(--ppanfrage-surface);
  border: 1px solid var(--ppanfrage-border);
  border-radius: 16px;
  box-shadow: var(--ppanfrage-shadow-sm);
  padding: 34px 24px;
  text-align: center;
}

.ppanfrage-wrap .pptermine-buchung-placeholder h2 {
  margin: 0 0 8px;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ppanfrage-text);
}

.ppanfrage-wrap .pptermine-buchung-placeholder p {
  margin: 0 auto 18px;
  max-width: 480px;
  color: var(--ppanfrage-muted);
  line-height: 1.6;
}

/* ============================================================
   FORMULAR-KARTE
   ============================================================ */
.ppanfrage-wrap .ppanfrage-form {
  background: var(--ppanfrage-surface);
  border: 1px solid var(--ppanfrage-border);
  border-radius: 16px;
  box-shadow: var(--ppanfrage-shadow);
  padding: 26px 20px;
}

.ppanfrage-wrap .ppanfrage-field {
  border: 0;
  margin: 0 0 20px;
  padding: 0;
  min-width: 0;
}

.ppanfrage-wrap .ppanfrage-field[hidden] {
  display: none !important;
}

.ppanfrage-wrap .ppanfrage-legend {
  display: block;
  margin: 0 0 8px;
  padding: 0;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--ppanfrage-text);
}

.ppanfrage-wrap .ppanfrage-req {
  color: var(--ppanfrage-error);
  font-weight: 800;
}

.ppanfrage-wrap .ppanfrage-sublabel {
  display: block;
  margin: 0 0 5px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ppanfrage-muted);
}

.ppanfrage-wrap .ppanfrage-hint {
  margin: 6px 0 10px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ppanfrage-muted-soft);
}

.ppanfrage-wrap .ppanfrage-hint a {
  color: var(--ppanfrage-brand) !important;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ppanfrage-wrap .ppanfrage-grid {
  display: grid;
  gap: 14px;
  margin-bottom: 0;
}

.ppanfrage-wrap .ppanfrage-grid-2 {
  grid-template-columns: 1fr;
}

/* Eingabefelder */
.ppanfrage-wrap .ppanfrage-input {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ppanfrage-text);
  background: var(--ppanfrage-surface-soft);
  border: 1px solid var(--ppanfrage-border-soft);
  border-radius: 12px;
  padding: 12px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.ppanfrage-wrap .ppanfrage-input:focus {
  outline: none;
  border-color: var(--ppanfrage-brand);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(15, 92, 99, 0.25);
}

.ppanfrage-wrap .ppanfrage-input.ppanfrage-invalid {
  border-color: var(--ppanfrage-error);
  background: var(--ppanfrage-error-soft);
}

.ppanfrage-wrap textarea.ppanfrage-input {
  resize: vertical;
  min-height: 110px;
}

.ppanfrage-wrap .ppanfrage-input::placeholder {
  color: #5a737a;
  opacity: 1;
}

/* Datei-Input */
.ppanfrage-wrap .ppanfrage-file {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ppanfrage-muted);
  background: var(--ppanfrage-surface-soft);
  border: 1px dashed #98bcc1;
  border-radius: 12px;
  padding: 12px 14px;
}

.ppanfrage-wrap .ppanfrage-file:focus-visible {
  outline: 3px solid var(--ppanfrage-brand);
  outline-offset: 2px;
}

.ppanfrage-wrap .ppanfrage-file-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--ppanfrage-brand-soft);
  border: 1px solid #c0d9db;
  border-radius: 10px;
}

.ppanfrage-wrap .ppanfrage-file-pill[hidden] {
  display: none !important;
}

.ppanfrage-wrap .ppanfrage-file-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ppanfrage-brand-deep);
}

.ppanfrage-wrap .ppanfrage-file-remove {
  border: 1px solid #98bcc1;
  background: #ffffff;
  color: var(--ppanfrage-error);
  border-radius: 8px;
  padding: 6px 12px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.ppanfrage-wrap .ppanfrage-file-remove:hover,
.ppanfrage-wrap .ppanfrage-file-remove:focus-visible {
  background: var(--ppanfrage-error-soft);
  border-color: var(--ppanfrage-error);
  outline: none;
}

/* Fehlermeldung unter dem Feld */
.ppanfrage-wrap .ppanfrage-error {
  margin: 6px 0 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ppanfrage-error);
}

/* ============================================================
   MODUS-KARTEN (Start: zwei große Karten)
   ============================================================ */
.ppanfrage-wrap .ppanfrage-modi {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.ppanfrage-wrap .ppanfrage-modus-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  /* Oben mehr Platz: Das Badge an der Oberkante ragt ~13 px in die
     Karte — Titelzeile und Icon bleiben frei (0.17.2) */
  padding: 24px 16px 16px;
  background: var(--ppanfrage-surface-soft);
  border: 2px solid var(--ppanfrage-border-soft);
  border-radius: 16px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.ppanfrage-wrap .ppanfrage-modus-card:hover {
  border-color: var(--ppanfrage-brand);
  background: var(--ppanfrage-brand-soft);
}

.ppanfrage-wrap .ppanfrage-modus-card input[type="radio"] {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--ppanfrage-brand);
  flex: 0 0 auto;
}

.ppanfrage-wrap .ppanfrage-modus-card input[type="radio"]:focus-visible {
  outline: 3px solid var(--ppanfrage-brand);
  outline-offset: 2px;
}

.ppanfrage-wrap .ppanfrage-modus-card:has(input[type="radio"]:checked),
.ppanfrage-wrap .ppanfrage-modus-card.is-selected {
  border-color: var(--ppanfrage-brand);
  background: var(--ppanfrage-brand-soft);
  box-shadow: 0 0 0 3px rgba(15, 92, 99, 0.10);
}

.ppanfrage-wrap .ppanfrage-modus-card--highlight {
  border-color: #c0d9db;
}

.ppanfrage-wrap .ppanfrage-modus-badge {
  position: absolute;
  top: -12px;
  right: 14px;
  padding: 4px 12px;
  background: #fdf3d7;
  border: 1px solid #e8d48b;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a6100;
}

/* Zweites Eselsohr: "In 1 Minute erledigt" an der schnellen Anfrage.
   Bewusst ruhiger als das goldene "Empfohlen", damit die Empfehlung
   die stärkere Aussage bleibt. Kontrast Deep #0a464c auf #e3eff0 9,0:1. */
.ppanfrage-wrap .ppanfrage-modus-badge--zeit {
  background: var(--ppanfrage-brand-soft);
  border-color: #b6d3d6;
  color: var(--ppanfrage-brand-deep);
}

/* Zusatzzeile in den Modus-Karten (Reaktionszeit) */
.ppanfrage-wrap .ppanfrage-modus-note {
  display: block;
  margin-top: 8px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ppanfrage-brand-deep);
}

.ppanfrage-wrap .ppanfrage-modus-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ppanfrage-wrap .ppanfrage-modus-title {
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--ppanfrage-text);
}

.ppanfrage-wrap .ppanfrage-modus-sub {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ppanfrage-muted);
}

/* ============================================================
   STANDORT: RADIO-KARTEN
   ============================================================ */
.ppanfrage-wrap .ppanfrage-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.ppanfrage-wrap .ppanfrage-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--ppanfrage-surface-soft);
  border: 2px solid var(--ppanfrage-border-soft);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.ppanfrage-wrap .ppanfrage-card:hover {
  border-color: var(--ppanfrage-brand);
  background: var(--ppanfrage-brand-soft);
}

.ppanfrage-wrap .ppanfrage-card input[type="radio"] {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--ppanfrage-brand);
  flex: 0 0 auto;
}

.ppanfrage-wrap .ppanfrage-card input[type="radio"]:focus-visible {
  outline: 3px solid var(--ppanfrage-brand);
  outline-offset: 2px;
}

.ppanfrage-wrap .ppanfrage-card:has(input[type="radio"]:checked),
.ppanfrage-wrap .ppanfrage-card.is-selected {
  border-color: var(--ppanfrage-brand);
  background: var(--ppanfrage-brand-soft);
  box-shadow: 0 0 0 3px rgba(15, 92, 99, 0.10);
}

.ppanfrage-wrap .ppanfrage-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ppanfrage-wrap .ppanfrage-card-title {
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--ppanfrage-text);
}

.ppanfrage-wrap .ppanfrage-card-sub {
  font-size: 0.88rem;
  color: var(--ppanfrage-muted);
}

/* ============================================================
   CHIPS (Terminwunsch, Kontaktweg, Rahmendaten, Kurzfragen)
   ============================================================ */
.ppanfrage-wrap .ppanfrage-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ppanfrage-wrap .ppanfrage-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 2px solid var(--ppanfrage-border-soft);
  background: var(--ppanfrage-surface-soft);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ppanfrage-text);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.ppanfrage-wrap .ppanfrage-chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ppanfrage-wrap .ppanfrage-chip:hover {
  border-color: var(--ppanfrage-brand);
  background: var(--ppanfrage-brand-soft);
}

.ppanfrage-wrap .ppanfrage-chip:focus-within {
  outline: 3px solid var(--ppanfrage-brand);
  outline-offset: 2px;
}

.ppanfrage-wrap .ppanfrage-chip:has(input:checked),
.ppanfrage-wrap .ppanfrage-chip.is-selected {
  border-color: var(--ppanfrage-brand);
  background: var(--ppanfrage-brand);
  color: #ffffff;
}

/* Kleine Chip-Variante (optionale Seitenangabe bei den Kurzfragen) */
.ppanfrage-wrap .ppanfrage-chips--klein .ppanfrage-chip {
  min-height: 38px;
  padding: 7px 14px;
  font-size: 0.9rem;
  border-radius: 999px;
}

/* ============================================================
   REGIONEN-SCAN (Icon-Grid, ab 0.3.0 in Gruppen)
   ============================================================ */
.ppanfrage-wrap .ppanfrage-rgruppe + .ppanfrage-rgruppe {
  margin-top: 18px;
}

.ppanfrage-wrap .ppanfrage-rgruppe-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0 0 10px;
  padding: 0 0 6px;
  border-bottom: 2px solid var(--ppanfrage-brand-soft);
}

.ppanfrage-wrap .ppanfrage-rgruppe-titel {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--ppanfrage-brand-deep);
  letter-spacing: 0.01em;
}

.ppanfrage-wrap .ppanfrage-rgruppe-sub {
  font-size: 0.85rem;
  color: var(--ppanfrage-muted);
}

.ppanfrage-wrap .ppanfrage-regionen {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.ppanfrage-wrap .ppanfrage-region {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 44px;
  padding: 12px 14px;
  background: var(--ppanfrage-surface-soft);
  border: 2px solid var(--ppanfrage-border-soft);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.ppanfrage-wrap .ppanfrage-region input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ppanfrage-wrap .ppanfrage-region:hover {
  border-color: var(--ppanfrage-brand);
  background: var(--ppanfrage-brand-soft);
}

.ppanfrage-wrap .ppanfrage-region:focus-within {
  outline: 3px solid var(--ppanfrage-brand);
  outline-offset: 2px;
}

.ppanfrage-wrap .ppanfrage-region:has(input:checked),
.ppanfrage-wrap .ppanfrage-region.is-selected {
  border-color: var(--ppanfrage-brand);
  background: var(--ppanfrage-brand-soft);
  box-shadow: 0 0 0 3px rgba(15, 92, 99, 0.10);
}

.ppanfrage-wrap .ppanfrage-region-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--ppanfrage-brand-soft);
  color: var(--ppanfrage-brand);
}

.ppanfrage-wrap .ppanfrage-region-icon svg {
  width: 22px;
  height: 22px;
}

.ppanfrage-wrap .ppanfrage-region:has(input:checked) .ppanfrage-region-icon,
.ppanfrage-wrap .ppanfrage-region.is-selected .ppanfrage-region-icon {
  background: var(--ppanfrage-brand);
  color: #ffffff;
}

.ppanfrage-wrap .ppanfrage-region-label {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--ppanfrage-text);
  line-height: 1.3;
}

.ppanfrage-wrap .ppanfrage-region-sub {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ppanfrage-muted);
}

/* ============================================================
   KURZFRAGEN-KARTEN
   ============================================================ */
.ppanfrage-wrap .ppanfrage-kf-card {
  display: block;
  margin-bottom: 12px;
  padding: 14px 16px;
  background: var(--ppanfrage-surface-soft);
  border: 1px solid var(--ppanfrage-border-soft);
  border-left: 4px solid var(--ppanfrage-brand);
  border-radius: 12px;
}

/* Nur die gewählten Regionen (max. 3) anzeigen, sobald JavaScript die
   Kurzfragen steuert. Gilt für den Wizard UND für das schlanke
   Nachreich-Formular. Ohne JavaScript bleiben alle sichtbar (Fallback). */
.ppanfrage-wrap .ppanfrage-wizard-active .ppanfrage-kf-card,
.ppanfrage-wrap .ppanfrage-kf-js .ppanfrage-kf-card {
  display: none;
}

.ppanfrage-wrap .ppanfrage-wizard-active .ppanfrage-kf-card.is-on,
.ppanfrage-wrap .ppanfrage-kf-js .ppanfrage-kf-card.is-on {
  display: block;
}

.ppanfrage-wrap .ppanfrage-kf-title {
  display: block;
  margin: 0 0 10px;
  font-weight: 800;
  font-size: 1rem;
  color: var(--ppanfrage-text);
}

.ppanfrage-wrap .ppanfrage-kf-frage {
  margin-bottom: 10px;
}

.ppanfrage-wrap .ppanfrage-kf-frage:last-child {
  margin-bottom: 0;
}

.ppanfrage-wrap .ppanfrage-kf-label {
  display: block;
  margin: 0 0 6px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ppanfrage-muted);
}

.ppanfrage-wrap .ppanfrage-kf-more[hidden] {
  display: none !important;
}

/* ============================================================
   DATENSCHUTZ-CHECKBOX
   ============================================================ */
.ppanfrage-wrap .ppanfrage-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 0.98rem;
  color: var(--ppanfrage-text);
}

.ppanfrage-wrap .ppanfrage-check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--ppanfrage-brand);
  flex: 0 0 auto;
}

.ppanfrage-wrap .ppanfrage-check input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--ppanfrage-brand);
  outline-offset: 2px;
}

/* ============================================================
   ABSENDEN
   ============================================================ */
.ppanfrage-wrap .ppanfrage-submit-row {
  margin-top: 6px;
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: wrap;
}

/* Zurück serverseitig in der Absende-Zeile (0.17.5): links Geister-
   Knopf, rechts das Absenden — immer in EINER Reihe */
.ppanfrage-wrap .ppanfrage-submit-row .ppanfrage-btn-back--row {
  flex: 0 0 auto;
}

.ppanfrage-wrap .ppanfrage-submit-row .ppanfrage-submit {
  flex: 1 1 auto;
  width: auto;
}

.ppanfrage-wrap .ppanfrage-submit-row .ppanfrage-vertraulich {
  flex-basis: 100%;
}

.ppanfrage-wrap .ppanfrage-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 12px 22px;
  border-radius: 12px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffffff;
  background: linear-gradient(135deg, var(--ppanfrage-brand), #2f7880);
  box-shadow: 0 10px 22px rgba(15, 91, 99, 0.22);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.ppanfrage-wrap .ppanfrage-submit:hover,
.ppanfrage-wrap .ppanfrage-submit:focus-visible {
  background: linear-gradient(135deg, var(--ppanfrage-brand-hover), #256b72);
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(15, 91, 99, 0.28);
  outline: none;
}

.ppanfrage-wrap .ppanfrage-submit[disabled] {
  opacity: 0.65;
  cursor: wait;
  transform: none;
}

/* ============================================================
   HONEYPOT (unsichtbar für Menschen)
   ============================================================ */
.ppanfrage-wrap .ppanfrage-hp {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ============================================================
   TELEFON-KARTEN (Erfolgs-Screen)
   ============================================================ */
.ppanfrage-wrap .ppanfrage-telcards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 6px;
}

.ppanfrage-wrap .ppanfrage-telcard {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid var(--ppanfrage-border);
  border-left: 4px solid var(--ppanfrage-brand);
  border-radius: 8px;
  text-decoration: none !important;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.ppanfrage-wrap .ppanfrage-telcard:hover {
  background: var(--ppanfrage-tint);
  border-left-color: var(--ppanfrage-brand-deep);
}

.ppanfrage-wrap .ppanfrage-telcard:focus-visible {
  outline: 3px solid var(--ppanfrage-brand);
  outline-offset: 2px;
}

.ppanfrage-wrap .ppanfrage-telcard-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ppanfrage-muted);
}

.ppanfrage-wrap .ppanfrage-telcard-num {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ppanfrage-brand-deep);
}

.ppanfrage-wrap .ppanfrage-telcard-num svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--ppanfrage-brand);
}

/* ============================================================
   ERFOLGS- UND FEHLERBOXEN
   ============================================================ */
.ppanfrage-wrap .ppanfrage-success,
.ppanfrage-wrap .ppanfrage-alert {
  border-radius: 16px;
  padding: 24px 22px;
  margin-bottom: 20px;
  box-shadow: var(--ppanfrage-shadow-sm);
}

.ppanfrage-wrap .ppanfrage-success {
  background: var(--ppanfrage-success-soft);
  border: 1px solid #bfe3c6;
  text-align: center;
  padding: 34px 24px;
}

.ppanfrage-wrap .ppanfrage-success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  color: var(--ppanfrage-brand);
  animation: ppanfragePop 0.45s ease;
}

.ppanfrage-wrap .ppanfrage-success-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes ppanfragePop {
  from { transform: scale(0.55); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.ppanfrage-wrap .ppanfrage-success h2 {
  margin: 0 0 8px;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--ppanfrage-success);
}

.ppanfrage-wrap .ppanfrage-success p {
  margin: 0 auto 12px;
  max-width: 520px;
  color: var(--ppanfrage-muted);
  line-height: 1.6;
}

.ppanfrage-wrap .ppanfrage-summary {
  margin: 0 auto 16px;
  padding: 14px 16px;
  list-style: none;
  max-width: 480px;
  text-align: left;
  background: #ffffff;
  border: 1px solid #d5ecda;
  border-radius: 12px;
}

.ppanfrage-wrap .ppanfrage-summary li {
  margin-bottom: 8px;
  color: var(--ppanfrage-muted);
  line-height: 1.55;
}

.ppanfrage-wrap .ppanfrage-summary li:last-child {
  margin-bottom: 0;
}

.ppanfrage-wrap .ppanfrage-summary strong {
  color: var(--ppanfrage-text);
}

.ppanfrage-wrap .ppanfrage-success .ppanfrage-telcards {
  max-width: 560px;
  margin: 10px auto 0;
  text-align: left;
}

.ppanfrage-wrap .ppanfrage-alert-error {
  background: var(--ppanfrage-error-soft);
  border: 1px solid #ecc8c3;
}

.ppanfrage-wrap .ppanfrage-alert-error h2 {
  margin: 0 0 8px;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ppanfrage-error);
}

.ppanfrage-wrap .ppanfrage-alert-error p {
  margin: 0 0 10px;
  color: var(--ppanfrage-muted);
  line-height: 1.6;
}

.ppanfrage-wrap .ppanfrage-box-phones a {
  color: var(--ppanfrage-brand) !important;
  font-weight: 700;
  text-decoration: none !important;
}

.ppanfrage-wrap .ppanfrage-box-phones a:hover {
  text-decoration: underline !important;
}

/* ============================================================
   BUCHUNGS-MODUL (THEORG-Direktbuchung, ab 0.2.0)
   ============================================================ */
.ppanfrage-wrap .ppbuchung {
  width: 100%;
}

.ppanfrage-wrap .ppbuchung-frame {
  background: var(--ppanfrage-surface);
  border: 1px solid var(--ppanfrage-border) !important;
  border-radius: 16px;
  box-shadow: var(--ppanfrage-shadow-sm);
}

/* Standort-Frage vor der Buchung (0.25.16, GF): ohne ?buchung_standort
   wird nichts vorbelegt — zwei Karten in den Standortfarben §7. */
.ppanfrage-wrap .ppbuchung-wahl-frage {
  margin: 4px 0 12px;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ppanfrage-text);
}

.ppanfrage-wrap .ppbuchung-wahl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.ppanfrage-wrap .ppbuchung-wahl-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1.5px solid transparent;
  text-decoration: none !important;
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

.ppanfrage-wrap .ppbuchung-wahl-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(7, 24, 28, 0.12);
}

.ppanfrage-wrap .ppbuchung-wahl-card:focus-visible {
  outline: 3px solid var(--ppanfrage-brand);
  outline-offset: 2px;
}

.ppanfrage-wrap .ppbuchung-wahl-card--waldhausen {
  background: #e3f2e7;
  border-color: #bfe0ca;
  color: #1f6b38;
}

.ppanfrage-wrap .ppbuchung-wahl-card--bettrath {
  background: #fbe9e7;
  border-color: #f0cdc7;
  color: #a03428;
}

.ppanfrage-wrap .ppbuchung-wahl-name {
  font-weight: 800;
  font-size: 1.08rem;
}

.ppanfrage-wrap .ppbuchung-wahl-addr {
  font-size: 0.86rem;
  font-weight: 600;
  opacity: 0.8;
}

/* Hinweis, solange Bettrath keine Direktbuchung hat */
.ppanfrage-wrap .ppbuchung-hinweis {
  margin-bottom: 14px;
  padding: 12px 16px;
  background: #fdf3d7;
  border: 1px solid #e8d48b;
  border-radius: 10px;
  color: #6b5300;
  font-size: 0.92rem;
  line-height: 1.55;
}

.ppanfrage-wrap .ppbuchung-hinweis a {
  color: var(--ppanfrage-brand-deep) !important;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ============================================================
   CTA-BUTTONS
   ============================================================ */
.ppanfrage-wrap .ppanfrage-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 20px 0 8px;
}

.ppanfrage-wrap .ppanfrage-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 12px 26px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none !important;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.ppanfrage-wrap .ppanfrage-cta--primary {
  background: linear-gradient(135deg, var(--ppanfrage-brand), #2f7880);
  border: 1px solid transparent;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(15, 91, 99, 0.22);
}

.ppanfrage-wrap .ppanfrage-cta--primary:hover,
.ppanfrage-wrap .ppanfrage-cta--primary:focus-visible {
  background: linear-gradient(135deg, var(--ppanfrage-brand-hover), #256b72);
  color: #ffffff !important;
  transform: translateY(-1px);
  outline: none;
}

.ppanfrage-wrap .ppanfrage-cta--ghost {
  background: #ffffff;
  border: 1px solid #98bcc1;
  color: var(--ppanfrage-brand-deep) !important;
}

.ppanfrage-wrap .ppanfrage-cta--ghost:hover,
.ppanfrage-wrap .ppanfrage-cta--ghost:focus-visible {
  background: var(--ppanfrage-brand-soft);
  border-color: var(--ppanfrage-brand);
  outline: none;
}

/* ============================================================
   WIZARD: FORTSCHRITTSANZEIGE UND SCHRITTE
   ============================================================ */
.ppanfrage-wrap .ppanfrage-progress[hidden] {
  display: none !important;
}

.ppanfrage-wrap .ppanfrage-progress {
  background: var(--ppanfrage-surface);
  border: 1px solid var(--ppanfrage-border);
  border-radius: 16px;
  box-shadow: var(--ppanfrage-shadow-sm);
  padding: 14px 16px;
  margin-bottom: 16px;
}

.ppanfrage-wrap .ppanfrage-progress-steps {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

/* Die Schrittpunkte bleiben immer in EINER Zeile. Reicht der Platz nicht,
   wird die Beschriftung des aktiven Schritts gekürzt (siehe unten), statt
   die Leiste umbrechen zu lassen. */
.ppanfrage-wrap .ppanfrage-progress-steps > li {
  min-width: 0;
  display: flex;
}

/* Sicherheitsnetz: Der Fortschritt darf die Seite nie breiter machen */
.ppanfrage-wrap .ppanfrage-progress {
  min-width: 0;
  overflow: hidden;
}

.ppanfrage-wrap .ppanfrage-progress-item {
  min-width: 0;
}

.ppanfrage-wrap .ppanfrage-progress-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ppanfrage-wrap .ppanfrage-progress-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 4px 6px;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: default;
  color: var(--ppanfrage-muted);
  border-radius: 10px;
}

.ppanfrage-wrap .ppanfrage-progress-item:disabled {
  color: #5a737a;
}

.ppanfrage-wrap li.is-done .ppanfrage-progress-item {
  cursor: pointer;
  opacity: 1;
}

.ppanfrage-wrap li.is-done .ppanfrage-progress-item:hover,
.ppanfrage-wrap li.is-done .ppanfrage-progress-item:focus-visible {
  background: var(--ppanfrage-brand-soft);
  outline: none;
}

.ppanfrage-wrap .ppanfrage-progress-num {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
  background: var(--ppanfrage-border-soft);
  color: var(--ppanfrage-muted);
  transition: background 0.25s ease, color 0.25s ease;
}

.ppanfrage-wrap li.is-current .ppanfrage-progress-num {
  background: var(--ppanfrage-brand);
  color: #ffffff;
}

.ppanfrage-wrap li.is-done .ppanfrage-progress-num {
  background: var(--ppanfrage-brand-soft);
  color: var(--ppanfrage-brand-deep);
}

.ppanfrage-wrap .ppanfrage-progress-label {
  font-size: 0.9rem;
  font-weight: 700;
}

.ppanfrage-wrap li.is-current .ppanfrage-progress-label {
  color: var(--ppanfrage-text);
}

.ppanfrage-wrap .ppanfrage-progress-track {
  position: relative;
  margin-top: 12px;
  height: 9px;
  border-radius: 999px;
  background: var(--ppanfrage-border-soft);
  overflow: hidden;
}

.ppanfrage-wrap .ppanfrage-progress-fill {
  position: relative;
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(90deg, var(--ppanfrage-brand), #2f7880 55%, #4ba7b0);
  box-shadow: 0 0 10px rgba(47, 120, 128, 0.55);
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

/* Lauflicht: wandernder heller Streifen im gefüllten Teil */
.ppanfrage-wrap .ppanfrage-progress-shine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 90px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
  animation: ppanfrageShine 2.4s ease-in-out infinite;
}

@keyframes ppanfrageShine {
  0%   { transform: translateX(-100px); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateX(560px); opacity: 0; }
}

/* Kurzer Impuls, sobald der Balken wächst (JS setzt .is-puls) */
.ppanfrage-wrap .ppanfrage-progress.is-puls .ppanfrage-progress-fill {
  animation: ppanfragePulsGlow 0.9s ease-out;
}

@keyframes ppanfragePulsGlow {
  0%   { box-shadow: 0 0 10px rgba(47, 120, 128, 0.55); }
  35%  { box-shadow: 0 0 20px 4px rgba(75, 167, 176, 0.85); }
  100% { box-shadow: 0 0 10px rgba(47, 120, 128, 0.55); }
}

.ppanfrage-wrap .ppanfrage-progress.is-voll .ppanfrage-progress-fill {
  background: linear-gradient(90deg, var(--ppanfrage-brand), #1e7e34 90%);
  box-shadow: 0 0 16px rgba(30, 126, 52, 0.55);
}

/* Zeile unter dem Balken: "Schritt 3 von 5" und "60 % geschafft" */
.ppanfrage-wrap .ppanfrage-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-top: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ppanfrage-muted);
}

.ppanfrage-wrap .ppanfrage-progress-pct {
  color: var(--ppanfrage-brand-deep);
}

.ppanfrage-wrap .ppanfrage-progress.is-voll .ppanfrage-progress-pct {
  color: #1e7e34;
}

/* Schritte: NUR im aktiven Wizard-Modus ein-/ausgeblendet.
   Ohne JS gibt es die Klasse nicht, alles bleibt sichtbar. */
.ppanfrage-wrap .ppanfrage-wizard-active .ppanfrage-step {
  display: none;
}

.ppanfrage-wrap .ppanfrage-wizard-active .ppanfrage-step.is-active {
  display: block;
  animation: ppanfrageStepIn 0.25s ease;
}

@keyframes ppanfrageStepIn {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: none; }
}

.ppanfrage-wrap .ppanfrage-step-title {
  margin: 0 0 14px;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ppanfrage-text);
  outline: none;
}

/* Wizard-Navigation */
.ppanfrage-wrap .ppanfrage-wizard-nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 18px;
}

.ppanfrage-wrap .ppanfrage-wizard-nav [hidden] {
  display: none !important;
}

.ppanfrage-wrap .ppanfrage-btn-back,
.ppanfrage-wrap .ppanfrage-btn-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 120px;
  padding: 10px 22px;
  border-radius: 12px;
  font: inherit;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.ppanfrage-wrap .ppanfrage-btn-back {
  background: #ffffff;
  border: 1px solid #98bcc1;
  color: var(--ppanfrage-brand-deep);
}

.ppanfrage-wrap .ppanfrage-btn-back:hover,
.ppanfrage-wrap .ppanfrage-btn-back:focus-visible {
  background: var(--ppanfrage-brand-soft);
  border-color: var(--ppanfrage-brand);
  outline: none;
}

.ppanfrage-wrap .ppanfrage-btn-next {
  margin-left: auto;
  background: linear-gradient(135deg, var(--ppanfrage-brand), #2f7880);
  border: 1px solid transparent;
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(15, 91, 99, 0.22);
}

.ppanfrage-wrap .ppanfrage-btn-next:hover,
.ppanfrage-wrap .ppanfrage-btn-next:focus-visible {
  background: linear-gradient(135deg, var(--ppanfrage-brand-hover), #256b72);
  outline: none;
}

/* ============================================================
   FEHLERMARKIERUNG
   Bei Texteingaben färbt sich der Rahmen. Chips, Karten-Grids und die
   Datenschutz-Checkbox sind dagegen Container: Ohne eigene Regel bliebe
   dort nur die Textmeldung, und man sieht auf den ersten Blick nicht,
   WO etwas fehlt.
   ============================================================ */
.ppanfrage-wrap .ppanfrage-chips.ppanfrage-invalid,
.ppanfrage-wrap .ppanfrage-cards.ppanfrage-invalid,
.ppanfrage-wrap .ppanfrage-modi.ppanfrage-invalid,
.ppanfrage-wrap .ppanfrage-rgruppen.ppanfrage-invalid,
.ppanfrage-wrap div.ppanfrage-invalid > .ppanfrage-chips {
  outline: 2px solid var(--ppanfrage-error);
  outline-offset: 6px;
  border-radius: 12px;
}

.ppanfrage-wrap .ppanfrage-check.ppanfrage-invalid,
.ppanfrage-wrap .ppanfrage-invalid > .ppanfrage-check {
  outline: 2px solid var(--ppanfrage-error);
  outline-offset: 4px;
  border-radius: 8px;
}

/* ============================================================
   TASTATUR-FOKUS (WCAG 2.4.7)
   Die Zustands-Regeln oben fassen :hover und :focus-visible zusammen und
   setzen dabei outline:none. Für Maus-Nutzer ist das richtig, für die
   Tastatur fehlte damit jeder sichtbare Fokus. Diese Regeln stehen
   bewusst am Ende und geben den Fokusring zurück.
   ============================================================ */
.ppanfrage-wrap .pptermine-telbtn:focus-visible,
.ppanfrage-wrap .ppanfrage-file-remove:focus-visible,
.ppanfrage-wrap .ppanfrage-submit:focus-visible,
.ppanfrage-wrap .ppanfrage-cta--primary:focus-visible,
.ppanfrage-wrap .ppanfrage-cta--ghost:focus-visible,
.ppanfrage-wrap li.is-done .ppanfrage-progress-item:focus-visible,
.ppanfrage-wrap .ppanfrage-btn-back:focus-visible,
.ppanfrage-wrap .ppanfrage-btn-next:focus-visible,
.ppanfrage-wrap .ppanfrage-input:focus-visible,
.ppanfrage-wrap .ppanfrage-file:focus-visible {
  outline: 3px solid var(--ppanfrage-brand-deep);
  outline-offset: 3px;
}

/* ============================================================
   TESTMODUS-BAND
   Absichtlich laut: Ein unbemerkt aktiver Testmodus wäre schlimmer als
   ein auffälliger Hinweis. Kontrast Weiß auf #8a2c2c 7,4:1.
   ============================================================ */
.ppanfrage-wrap .ppanfrage-testband {
  display: block;
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #8a2c2c;
  color: #ffffff;
  line-height: 1.5;
}

.ppanfrage-wrap .ppanfrage-testband-titel {
  display: block;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ppanfrage-wrap .ppanfrage-testband-text {
  display: block;
  font-size: 0.9rem;
  margin-top: 2px;
}

/* ============================================================
   BESCHWERDEN NACHREICHEN (Einladung + eigene Ansicht)
   ============================================================ */
.ppanfrage-wrap .ppanfrage-nachtrag-angebot {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 22px 0 6px;
  padding: 18px 20px;
  background: var(--ppanfrage-brand-soft);
  border: 1px solid #b6d3d6;
  border-radius: 14px;
  text-align: left;
}

.ppanfrage-wrap .ppanfrage-nachtrag-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--ppanfrage-surface);
  color: var(--ppanfrage-brand);
}

.ppanfrage-wrap .ppanfrage-nachtrag-icon svg {
  width: 22px;
  height: 22px;
}

.ppanfrage-wrap .ppanfrage-nachtrag-text strong {
  display: block;
  margin-bottom: 4px;
  font-size: 1.02rem;
  color: var(--ppanfrage-text);
}

.ppanfrage-wrap .ppanfrage-nachtrag-text p {
  margin: 0 0 12px;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--ppanfrage-muted);
}

.ppanfrage-wrap .ppanfrage-nachtrag-kopf {
  margin-bottom: 18px;
  text-align: center;
}

.ppanfrage-wrap .ppanfrage-nachtrag-kopf h2 {
  margin: 0 0 8px;
  font-size: clamp(1.35rem, 3.5vw, 1.7rem);
  font-weight: 800;
  color: var(--ppanfrage-text);
}

.ppanfrage-wrap .ppanfrage-nachtrag-kopf p {
  margin: 0 auto 6px;
  max-width: 560px;
  line-height: 1.6;
  color: var(--ppanfrage-muted);
}

/* ============================================================
   VERTRAULICHKEITS-HINWEIS (unter dem Absenden-Button)
   ============================================================ */
.ppanfrage-wrap .ppanfrage-vertraulich {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  margin: 14px auto 0;
  max-width: 560px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ppanfrage-muted-soft);
  text-align: left;
}

.ppanfrage-wrap .ppanfrage-vertraulich svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--ppanfrage-brand);
}

/* Einleitungszeile über einem Schritt */
.ppanfrage-wrap .ppanfrage-hint--intro {
  margin-top: 0;
  margin-bottom: 16px;
}

/* Ausstattung unter den Standort-Karten (0.8.1). Der Bettrath-Zusatz steht
   in einer eigenen Zeile: Er gilt nur für einen der drei Knöpfe darüber und
   würde im Fließtext untergehen. */
.ppanfrage-wrap .ppanfrage-hint--orte {
  margin-top: 12px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width: 640px) {
  .ppanfrage-wrap .pptermine-hero-tel {
    grid-template-columns: 1fr 1fr;
  }

  .ppanfrage-wrap .pptermine-hero {
    padding: 34px 30px 28px;
  }

  .ppanfrage-wrap .ppanfrage-grid-2 {
    grid-template-columns: 1fr 1fr;
  }

  .ppanfrage-wrap .ppanfrage-telcards {
    grid-template-columns: 1fr 1fr;
  }

  .ppanfrage-wrap .ppanfrage-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* .ppanfrage-modi bekommt seit 0.11.0 die Modus-Karten —
     das Raster dafür steht am Ende dieser Datei. */

  .ppanfrage-wrap .ppanfrage-regionen {
    grid-template-columns: repeat(3, 1fr);
  }

  .ppanfrage-wrap .ppanfrage-submit {
    width: auto;
    min-width: 260px;
  }

  .ppanfrage-wrap .ppanfrage-form {
    padding: 34px 30px;
  }
}

@media (min-width: 900px) {
  .ppanfrage-wrap .ppanfrage-regionen {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Beschriftungen der Schritte brauchen Platz: Bei sieben Schritten passen
   sie erst ab etwa 900px nebeneinander. Darunter zeigt die Leiste nur den
   Namen des aktuellen Schritts, sonst läuft sie aus dem Bild. */
@media (max-width: 899px) {
  .ppanfrage-wrap .ppanfrage-progress-label {
    display: none;
  }

  /* Der aktive Schritt behält seinen Namen, solange Platz ist. */
  .ppanfrage-wrap li.is-current .ppanfrage-progress-label {
    display: inline;
  }

  .ppanfrage-wrap .ppanfrage-progress-steps {
    justify-content: flex-start;
    gap: 4px 10px;
  }
}

/* Wizard auf Mobile: Fortschritt sticky, Labels nur am aktiven Schritt */
@media (max-width: 640px) {
  /* Übersicht kompakter, damit das Formular schneller sichtbar ist */
  .ppanfrage-wrap .pptermine-hero {
    padding: 20px 16px 18px;
  }

  .ppanfrage-wrap .pptermine-telbtn {
    min-height: 46px;
    font-size: 0.95rem;
  }

  .ppanfrage-wrap .ppanfrage-progress {
    position: sticky;
    top: 0;
    z-index: 30;
  }

  .ppanfrage-wrap .ppanfrage-progress-item {
    padding: 4px;
  }

  .ppanfrage-wrap .ppanfrage-progress-label {
    display: none;
  }

  /* Auf dem Handy ganz ohne Namen: Bei sieben Punkten bliebe sonst nur
     ein abgeschnittenes "St..." übrig. Die Zeile "Schritt 2 von 7" und die
     große Überschrift im Formular sagen es deutlicher. */
  .ppanfrage-wrap li.is-current .ppanfrage-progress-label {
    display: none;
  }

  .ppanfrage-wrap .ppanfrage-progress-steps {
    justify-content: space-between;
  }

  .ppanfrage-wrap .ppanfrage-btn-back,
  .ppanfrage-wrap .ppanfrage-btn-next {
    flex: 1;
  }

  .ppanfrage-wrap .ppanfrage-ctas {
    flex-direction: column;
  }

  .ppanfrage-wrap .ppanfrage-cta {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ppanfrage-wrap .ppanfrage-input,
  .ppanfrage-wrap .ppanfrage-card,
  .ppanfrage-wrap .ppanfrage-modus-card,
  .ppanfrage-wrap .ppanfrage-chip,
  .ppanfrage-wrap .ppanfrage-region,
  .ppanfrage-wrap .ppanfrage-submit,
  .ppanfrage-wrap .ppanfrage-progress-num,
  .ppanfrage-wrap .ppanfrage-progress-fill,
  .ppanfrage-wrap .ppanfrage-btn-back,
  .ppanfrage-wrap .ppanfrage-btn-next,
  .ppanfrage-wrap .ppanfrage-cta {
    transition: none !important;
    transform: none !important;
  }

  .ppanfrage-wrap .ppanfrage-wizard-active .ppanfrage-step.is-active,
  .ppanfrage-wrap .pptermine-panel.is-on,
  .ppanfrage-wrap .ppanfrage-progress-shine,
  .ppanfrage-wrap .ppanfrage-progress.is-puls .ppanfrage-progress-fill {
    animation: none !important;
  }

  .ppanfrage-wrap .ppanfrage-progress-shine {
    display: none;
  }

  .ppanfrage-wrap .ppanfrage-success-icon {
    animation: none !important;
  }
}


/* ============================================================
   TERMINVORSCHLÄGE (freie THEORG-Zeiten, seit 0.9.0)
   Box erscheint nur, wenn live geprüfte Termine vorliegen
   (fail-closed); Auswahl optisch UND textlich markiert.
   ============================================================ */
.ppanfrage-wrap .ppanfrage-slots {
  margin: 0 0 22px;
  padding: 16px;
  background: var(--ppanfrage-brand-soft);
  border: 2px solid var(--ppanfrage-brand);
  border-radius: 14px;
}

.ppanfrage-wrap .ppanfrage-slots .ppanfrage-legend {
  display: block;
  margin-bottom: 4px;
}

.ppanfrage-wrap #ppanfrage-slots-list {
  display: grid;
  /* minmax(0, 1fr) statt 1fr (0.8.19): 1fr heißt minmax(auto, 1fr) — der
     auto-Mindestwert ließ die Spur auf die min-content-Breite des breitesten
     Kindes wachsen (Theme-nowrap auf Buttons) und über den Viewport laufen.
     Mit 0 als Minimum kann die Spur die Liste NIE mehr überragen. */
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-top: 10px;
}

@media (min-width: 560px) {
  .ppanfrage-wrap #ppanfrage-slots-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ppanfrage-wrap .ppanfrage-slot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  color: var(--ppanfrage-text); /* 0.8.20: explizit — font:inherit erbt KEINE Farbe, ohne diese Zeile faerbt die globale Theme-button-Regel (#cc3366) den Text */
  /* Nie breiter als die Grid-Spur/Liste (0.8.19, Gürtel zur minmax-Härtung) */
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  padding: 12px 14px;
  font: inherit;
  text-align: left;
  background: var(--ppanfrage-surface);
  border: 2px solid var(--ppanfrage-border-soft);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.ppanfrage-wrap .ppanfrage-slot:hover {
  border-color: var(--ppanfrage-brand);
}

.ppanfrage-wrap .ppanfrage-slot:focus-visible {
  outline: 3px solid var(--ppanfrage-brand);
  outline-offset: 2px;
}

.ppanfrage-wrap .ppanfrage-slot.is-selected {
  border-color: var(--ppanfrage-brand);
  background: var(--ppanfrage-brand-soft);
  box-shadow: 0 0 0 3px rgba(15, 92, 99, 0.18);
}

/* Auswahl nicht nur farbcodiert (Barrierefreiheit) */
.ppanfrage-wrap .ppanfrage-slot.is-selected::after {
  content: "✓ ausgewählt";
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ppanfrage-brand-deep);
}

.ppanfrage-wrap .ppanfrage-slot-datum {
  font-weight: 800;
  font-size: 1rem;
  color: var(--ppanfrage-text);
}

.ppanfrage-wrap .ppanfrage-slot-dauer {
  font-size: 0.85rem;
  color: var(--ppanfrage-muted);
}

/* Heilmittel-Label des Vorschlags (0.8.14): kleine ruhige Zeile —
   EIN Termin = EIN Heilmittel, sichtbar bei Mehrfachauswahl. */
.ppanfrage-wrap .ppanfrage-slot-heilmittel {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ppanfrage-brand-deep);
}

.ppanfrage-wrap .ppanfrage-slots-beide {
  margin-top: 8px;
}

/* Bestätigter Wunschtermin in der Erfolgsbox */
.ppanfrage-wrap .ppanfrage-slot-wunsch {
  margin: 14px 0;
  padding: 14px 16px;
  background: var(--ppanfrage-brand-soft);
  border-left: 4px solid var(--ppanfrage-brand);
  border-radius: 10px;
}

.ppanfrage-wrap .ppanfrage-slot-wunsch p {
  margin: 0 0 6px;
}

.ppanfrage-wrap .ppanfrage-slot-wunsch p:last-child {
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ppanfrage-wrap .ppanfrage-slot {
    transition: none !important;
  }
}


/* ============================================================
   WIZARD-NAV MIT ABSENDEN (0.9.1): Zurück links, Absenden rechts
   in EINER Reihe — kein voller Button-Block mehr darunter.
   (Das Styling des Absenden-Knopfs liegt seit 0.12.0 in der
   eigenen Klasse .ppanfrage-submit--nav, siehe dort.)
   ============================================================ */
.ppanfrage-wrap .ppanfrage-btn-back,
.ppanfrage-wrap .ppanfrage-btn-next {
  white-space: nowrap;
}

/* ============================================================
   BEHANDLUNGSART (0.9.1): Karten mit Akzentfarbe + Ausweichkarte.
   Farbe ist nur Zusatz — Titel und Unterzeile tragen die Sache.
   ============================================================ */
.ppanfrage-wrap .ppanfrage-behandlung-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 640px) {
  .ppanfrage-wrap .ppanfrage-behandlung-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.ppanfrage-wrap .ppanfrage-behandlung {
  --akzent: var(--ppanfrage-brand);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--ppanfrage-surface-soft);
  border: 2px solid var(--ppanfrage-border-soft);
  border-left: 5px solid var(--akzent);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.ppanfrage-wrap .ppanfrage-behandlung:hover {
  border-color: var(--akzent);
}

.ppanfrage-wrap .ppanfrage-behandlung input[type="radio"] {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--akzent);
  flex: 0 0 auto;
}

.ppanfrage-wrap .ppanfrage-behandlung input[type="radio"]:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
}

.ppanfrage-wrap .ppanfrage-behandlung-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  background: #ffffff;
  border-radius: 10px;
  color: var(--akzent);
}

.ppanfrage-wrap .ppanfrage-behandlung-icon svg {
  width: 22px;
  height: 22px;
}

.ppanfrage-wrap .ppanfrage-behandlung-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ppanfrage-wrap .ppanfrage-behandlung-titel {
  font-weight: 800;
  font-size: 0.97rem;
  color: var(--ppanfrage-text);
}

.ppanfrage-wrap .ppanfrage-behandlung-sub {
  font-size: 0.84rem;
  color: var(--ppanfrage-muted);
}

/* Akzentfarben, harmonisch um das Petrol herum */
.ppanfrage-wrap .ppanfrage-behandlung--kg_mt     { --akzent: #0f5c63; }
.ppanfrage-wrap .ppanfrage-behandlung--neuro     { --akzent: #5b4e8e; }
.ppanfrage-wrap .ppanfrage-behandlung--schwindel { --akzent: #2b6f8f; }
.ppanfrage-wrap .ppanfrage-behandlung--lymph     { --akzent: #4a7a5c; }

.ppanfrage-wrap .ppanfrage-behandlung:has(input:checked),
.ppanfrage-wrap .ppanfrage-behandlung.is-selected {
  border-color: var(--akzent);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(15, 92, 99, 0.10);
}

/* Ausweichkarte: sofort auffindbar, ruhig, gestrichelt, volle Breite */
.ppanfrage-wrap .ppanfrage-behandlung--unsicher {
  --akzent: #5a737a;
  grid-column: 1 / -1;
  border-style: dashed;
  background: #f4f7f7;
}

@media (prefers-reduced-motion: reduce) {
  .ppanfrage-wrap .ppanfrage-behandlung {
    transition: none !important;
  }
}


/* ============================================================
   SLOT-KARTEN 0.9.3: Tages-Label (Heute/Morgen), Heute-Highlight,
   „Keiner passt"-Ausweg, schlanke Bestätigungszeile
   ============================================================ */
.ppanfrage-wrap .ppanfrage-slot-badge {
  display: inline-block;
  margin: 0 0 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--ppanfrage-brand);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* Standort-Marke (0.20.0): bei „beide" mit gemischtem Ergebnis —
   ruhigere Variante, damit sie das Heute-Badge nicht umspielt */
.ppanfrage-wrap .ppanfrage-slot-badge--ort {
  background: var(--ppanfrage-brand-soft);
  color: var(--ppanfrage-brand-deep);
  border: 1px solid var(--ppanfrage-brand);
}

.ppanfrage-wrap .ppanfrage-slot-tag {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ppanfrage-muted);
}

.ppanfrage-wrap .ppanfrage-slot--heute .ppanfrage-slot-tag {
  color: var(--ppanfrage-brand-deep);
}

.ppanfrage-wrap .ppanfrage-slot-zeit {
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.15;
  color: var(--ppanfrage-text);
}

/* Heute-Termin: das ist die gute Nachricht, sie darf leuchten */
.ppanfrage-wrap .ppanfrage-slot--heute {
  background: var(--ppanfrage-brand-soft);
  border-color: var(--ppanfrage-brand);
  box-shadow: 0 0 0 3px rgba(15, 92, 99, 0.12);
}

/* „Keiner passt": ehrlicher Ausweg als ruhige Box (nicht mehr nur
   unterstrichener Text — der Punkt soll gelesen werden, 0.17.2) */
.ppanfrage-wrap .ppanfrage-slot-keiner {
  grid-column: 1 / -1;
  /* 0.8.19: Der lange Button-Text („Keiner passt — Termin lieber gemeinsam
     abstimmen“) war durch das Theme-nowrap DER Treiber der 411px-Spur.
     Umbruch + Breiten-Deckel machen ihn strukturell viewport-fest. */
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  padding: 12px 16px;
  background: var(--ppanfrage-surface);
  border: 1px dashed var(--ppanfrage-border);
  border-radius: 12px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ppanfrage-muted);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.ppanfrage-wrap .ppanfrage-slot-keiner:hover,
.ppanfrage-wrap .ppanfrage-slot-keiner:focus-visible {
  color: var(--ppanfrage-brand-deep);
  background: var(--ppanfrage-brand-soft);
  border-color: var(--ppanfrage-brand);
  border-style: solid;
  outline: none;
}

/* Ladezustand des Neu-Laden-Knopfs (0.17.2) */
.ppanfrage-wrap .ppanfrage-cta[disabled] {
  opacity: 0.7;
  cursor: progress;
}

/* Schmale Telefonzeile in der Bestätigung (statt Telefon-Karten) */
.ppanfrage-wrap .ppanfrage-box-tel {
  margin: 14px 0 0;
  font-size: 0.9rem;
  color: var(--ppanfrage-muted);
}


/* ============================================================
   EIN-KLICK-BESTÄTIGUNG (Empfang, 0.9.4): Vorschau-Seite
   ============================================================ */
.ppanfrage-wrap .ppanfrage-confirm {
  max-width: 620px;
}

.ppanfrage-wrap .ppanfrage-confirm-title {
  margin: 0 0 4px;
  color: var(--ppanfrage-text);
}

.ppanfrage-wrap .ppanfrage-confirm-slot {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 16px 0;
  padding: 14px 16px;
  background: var(--ppanfrage-brand-soft);
  border: 2px solid var(--ppanfrage-brand);
  border-radius: 14px;
}

.ppanfrage-wrap .ppanfrage-confirm-slot-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ppanfrage-brand-deep);
}

.ppanfrage-wrap .ppanfrage-confirm-slot strong {
  font-size: 1.15rem;
  color: var(--ppanfrage-text);
}

/* Mail-Vorschau wie ein Briefkasten */
.ppanfrage-wrap .ppanfrage-confirm-mail {
  margin: 0 0 16px;
  border: 1px solid var(--ppanfrage-border);
  border-radius: 14px;
  overflow: hidden;
}

.ppanfrage-wrap .ppanfrage-confirm-mail-subj {
  padding: 10px 16px;
  background: var(--ppanfrage-surface-soft);
  border-bottom: 1px solid var(--ppanfrage-border);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ppanfrage-muted);
}

.ppanfrage-wrap .ppanfrage-confirm-mail-body {
  padding: 16px;
  background: #ffffff;
  color: var(--ppanfrage-text);
  line-height: 1.6;
}

.ppanfrage-wrap .ppanfrage-confirm-mail-body p {
  margin: 0 0 10px;
}

.ppanfrage-wrap .ppanfrage-confirm-mail-body p:last-child {
  margin-bottom: 0;
}

.ppanfrage-wrap .ppanfrage-confirm-form {
  margin: 0 0 8px;
}


/* ============================================================
   Wunschdatum-Feld (0.10.0, klappt bei „✏️ Wunschdatum" auf)
   ============================================================ */
.ppanfrage-wrap .ppanfrage-datumfeld {
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--ppanfrage-surface-soft);
  border: 1px solid var(--ppanfrage-border-soft);
  border-radius: 14px;
  max-width: 360px;
}

.ppanfrage-wrap .ppanfrage-datumfeld input[type="date"] {
  margin-top: 6px;
  min-height: 48px;
  font: inherit;
  font-size: 1rem;
}


/* ============================================================
   DREI MODUS-FARBWELTEN (0.11.0): Turbo = tiefes Amber-Gold,
   Schnell = Petrol (Marke), Anamnese = tiefes Indigo.
   Die Karte trägt ihre Farbe dezent; die gewählte Welt tönt das
   ganze Formular über die Brand-Variablen (Progress, Buttons,
   Auswahl, Vorschläge). Edel und ruhig — keine bunte Werbung.
   ============================================================ */

/* Robustheit zuerst: das hidden-Attribut muss IMMER gewinnen
   (0.11.1 — .ppanfrage-grid { display:grid } hätte die Turbo-
   Ausblendungen sonst sichtbar gelassen). */
.ppanfrage-wrap [hidden] {
  display: none !important;
}

/* Vier Modus-Karten: Desktop 4 nebeneinander, Tablet 2×2, Mobil gestapelt */
@media (min-width: 640px) {
  .ppanfrage-wrap .ppanfrage-modi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .ppanfrage-wrap .ppanfrage-modi {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.ppanfrage-wrap .ppanfrage-modus-card--turbo     { --modus: #b45309; --modus-deep: #92400e; --modus-soft: #fdf3e3; }
.ppanfrage-wrap .ppanfrage-modus-card--schnell   { --modus: #0f5c63; --modus-deep: #0a464c; --modus-soft: #e3eff0; }
.ppanfrage-wrap .ppanfrage-modus-card--highlight { --modus: #5b4e8e; --modus-deep: #4a4180; --modus-soft: #ece9f6; }

.ppanfrage-wrap .ppanfrage-modus-card {
  border-left: 5px solid var(--modus, var(--ppanfrage-border-soft));
}

/* 0.29.0 — EINE Verlaufs-Sprache fuer alle vier Karten.
   Vorher hatte nur die Buchungs-Karte einen echten Verlauf, die drei anderen waren flache
   Toenungen. Folge: die rechte Karte wirkte am hochwertigsten und zog den Blick auf sich —
   ausgerechnet die Option, die am wenigsten Aufmerksamkeit braucht, waehrend die EMPFOHLENE
   die blasseste war. Eine Empfehlung, die optisch verliert, ist keine.
   Der Verlauf laeuft von fast-weiss oben zur Eigenfarbe unten (160deg): Text steht oben auf
   hellem Grund (Kontrast bleibt), die Farbe traegt unten. Jede Karte nutzt ihr eigenes
   --modus-soft, die Struktur ist ueberall dieselbe. */
.ppanfrage-wrap .ppanfrage-modus-card {
  background: linear-gradient(160deg, #ffffff 0%, var(--modus-soft, #f6fafa) 100%);
  transition: background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ppanfrage-wrap .ppanfrage-modus-card:hover,
.ppanfrage-wrap .ppanfrage-modus-card:has(input[type="radio"]:checked),
.ppanfrage-wrap .ppanfrage-modus-card.is-selected {
  background: linear-gradient(160deg, #ffffff 0%, var(--modus-soft, #f6fafa) 62%, color-mix(in srgb, var(--modus, #0f5c63) 14%, #ffffff) 100%);
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--modus, #0f5c63) 45%, transparent);
}
/* Die EMPFOHLENE Karte ist der Anker: sattere Flaeche und ein tragender Schatten,
   damit die Empfehlung auch ohne Lesen des Badges als solche erkennbar ist. */
.ppanfrage-wrap .ppanfrage-modus-card--empfohlen {
  background: linear-gradient(160deg, #ffffff 0%, var(--modus-soft, #e3eff0) 45%, color-mix(in srgb, var(--modus, #0f5c63) 12%, #ffffff) 100%);
  box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--modus, #0f5c63) 55%, transparent);
}
/* color-mix ist seit 2023 in allen aktuellen Browsern; aeltere fallen auf die Flaeche
   ohne den dritten Stop zurueck (die ersten beiden Stops greifen weiterhin). */

.ppanfrage-wrap .ppanfrage-modus-card input[type="radio"] {
  accent-color: var(--modus, var(--ppanfrage-brand));
}

.ppanfrage-wrap .ppanfrage-modus-card:hover {
  border-color: var(--modus, var(--ppanfrage-brand));
  background: var(--modus-soft, var(--ppanfrage-brand-soft));
}

.ppanfrage-wrap .ppanfrage-modus-card:has(input[type="radio"]:checked),
.ppanfrage-wrap .ppanfrage-modus-card.is-selected {
  border-color: var(--modus, var(--ppanfrage-brand));
  background: var(--modus-soft, var(--ppanfrage-brand-soft));
}

.ppanfrage-wrap .ppanfrage-modus-card--turbo .ppanfrage-modus-badge--zeit {
  background: #fdf3e3;
  border-color: #e8c48b;
  color: #92400e;
}

.ppanfrage-wrap .ppanfrage-modus-card--highlight .ppanfrage-modus-badge {
  background: #ece9f6;
  border-color: #c5bfe0;
  color: #4a4180;
}

/* Die gewählte Modus-Welt tönt das Formular (Kaskade am Wrapper) */
.ppanfrage-form-area[data-modus="turbo"] {
  --ppanfrage-brand: #b45309;
  --ppanfrage-brand-deep: #92400e;
  --ppanfrage-brand-hover: #92400e;
  --ppanfrage-brand-soft: #fdf3e3;
}

.ppanfrage-form-area[data-modus="anamnese"] {
  --ppanfrage-brand: #5b4e8e;
  --ppanfrage-brand-deep: #4a4180;
  --ppanfrage-brand-hover: #4a4180;
  --ppanfrage-brand-soft: #ece9f6;
}

/* Primär-Gradient je Welt (sonst stünde Petrol im Verlauf) */
.ppanfrage-form-area[data-modus="turbo"] .ppanfrage-submit,
.ppanfrage-form-area[data-modus="turbo"] .ppanfrage-btn-next {
  background: linear-gradient(135deg, #b45309, #d97706);
}

.ppanfrage-form-area[data-modus="turbo"] .ppanfrage-submit:hover,
.ppanfrage-form-area[data-modus="turbo"] .ppanfrage-btn-next:hover,
.ppanfrage-form-area[data-modus="turbo"] .ppanfrage-submit:focus-visible,
.ppanfrage-form-area[data-modus="turbo"] .ppanfrage-btn-next:focus-visible {
  background: linear-gradient(135deg, #92400e, #b45309);
}

.ppanfrage-form-area[data-modus="anamnese"] .ppanfrage-submit,
.ppanfrage-form-area[data-modus="anamnese"] .ppanfrage-btn-next {
  background: linear-gradient(135deg, #5b4e8e, #7a6fb8);
}

.ppanfrage-form-area[data-modus="anamnese"] .ppanfrage-submit:hover,
.ppanfrage-form-area[data-modus="anamnese"] .ppanfrage-btn-next:hover,
.ppanfrage-form-area[data-modus="anamnese"] .ppanfrage-submit:focus-visible,
.ppanfrage-form-area[data-modus="anamnese"] .ppanfrage-btn-next:focus-visible {
  background: linear-gradient(135deg, #4a4180, #5b4e8e);
}

/* Upsell: ruhiger Wechsel von Turbo zur mittleren Version */
.ppanfrage-wrap .ppanfrage-btn-upsell {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 12px 16px;
  background: none;
  border: 2px dashed var(--ppanfrage-border);
  border-radius: 12px;
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ppanfrage-muted);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.ppanfrage-wrap .ppanfrage-btn-upsell:hover,
.ppanfrage-wrap .ppanfrage-btn-upsell:focus-visible {
  border-color: var(--ppanfrage-brand);
  color: var(--ppanfrage-brand-deep);
  background: var(--ppanfrage-brand-soft);
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .ppanfrage-wrap .ppanfrage-btn-upsell {
    transition: none !important;
  }
}


/* ============================================================
   MODUS-FARBWELTEN (0.11.0): Turbo = Amber-Gold, Schnell = Petrol,
   Anamnese = Indigo. Karten tragen ihre Akzente, das ganze
   Formular tönt über die data-modus-Kaskade in der Modusfarbe.
   ============================================================ */

/* Karten-Akzente */
.ppanfrage-wrap .ppanfrage-modus-card--turbo     { --karten-akzent: #b45309; --karten-soft: #fdf3e3; --karten-deep: #7c2d12; }
.ppanfrage-wrap .ppanfrage-modus-card--schnell   { --karten-akzent: #0f5c63; --karten-soft: #e3eff0; --karten-deep: #0a464c; }
.ppanfrage-wrap .ppanfrage-modus-card--highlight { --karten-akzent: #5b4e8e; --karten-soft: #eeecf7; --karten-deep: #433a6e; }

.ppanfrage-wrap .ppanfrage-modus-card:hover {
  border-color: var(--karten-akzent, var(--ppanfrage-brand));
  background: var(--karten-soft, var(--ppanfrage-brand-soft));
}

.ppanfrage-wrap .ppanfrage-modus-card input[type="radio"] {
  accent-color: var(--karten-akzent, var(--ppanfrage-brand));
}

.ppanfrage-wrap .ppanfrage-modus-card input[type="radio"]:focus-visible {
  outline-color: var(--karten-akzent, var(--ppanfrage-brand));
}

.ppanfrage-wrap .ppanfrage-modus-card:has(input[type="radio"]:checked),
.ppanfrage-wrap .ppanfrage-modus-card.is-selected {
  border-color: var(--karten-akzent, var(--ppanfrage-brand));
  background: var(--karten-soft, var(--ppanfrage-brand-soft));
}

/* Badges in den Kartenfarben */
.ppanfrage-wrap .ppanfrage-modus-card--turbo .ppanfrage-modus-badge--zeit {
  background: #fdf3e3;
  border-color: #e8c48b;
  color: #7c2d12;
}

.ppanfrage-wrap .ppanfrage-modus-card--schnell .ppanfrage-modus-badge--zeit {
  background: var(--ppanfrage-brand-soft);
  border-color: #b6d3d6;
  color: var(--ppanfrage-brand-deep);
}

.ppanfrage-wrap .ppanfrage-modus-card--highlight .ppanfrage-modus-badge {
  background: #eeecf7;
  border-color: #c5bde6;
  color: #433a6e;
}

/* Formular-Tönung je Modus (Progress, Auswahl, Rahmen) */
.ppanfrage-form-area[data-modus="turbo"] {
  --ppanfrage-brand: #b45309;
  --ppanfrage-brand-deep: #7c2d12;
  --ppanfrage-brand-hover: #92400e;
  --ppanfrage-brand-soft: #fdf3e3;
}

.ppanfrage-form-area[data-modus="anamnese"] {
  --ppanfrage-brand: #5b4e8e;
  --ppanfrage-brand-deep: #433a6e;
  --ppanfrage-brand-hover: #4c4278;
  --ppanfrage-brand-soft: #eeecf7;
}

/* Primärknöpfe: Verlauf und Schatten in der Modusfarbe */
.ppanfrage-form-area[data-modus="turbo"] .ppanfrage-submit,
.ppanfrage-form-area[data-modus="turbo"] .ppanfrage-btn-next {
  background: linear-gradient(135deg, #b45309, #d97706);
  box-shadow: 0 10px 22px rgba(180, 83, 9, 0.24);
}

.ppanfrage-form-area[data-modus="turbo"] .ppanfrage-submit:hover,
.ppanfrage-form-area[data-modus="turbo"] .ppanfrage-submit:focus-visible,
.ppanfrage-form-area[data-modus="turbo"] .ppanfrage-btn-next:hover,
.ppanfrage-form-area[data-modus="turbo"] .ppanfrage-btn-next:focus-visible {
  background: linear-gradient(135deg, #92400e, #c2690a);
  box-shadow: 0 14px 26px rgba(180, 83, 9, 0.28);
}

.ppanfrage-form-area[data-modus="anamnese"] .ppanfrage-submit,
.ppanfrage-form-area[data-modus="anamnese"] .ppanfrage-btn-next {
  background: linear-gradient(135deg, #5b4e8e, #6d63b0);
  box-shadow: 0 10px 22px rgba(91, 78, 142, 0.26);
}

.ppanfrage-form-area[data-modus="anamnese"] .ppanfrage-submit:hover,
.ppanfrage-form-area[data-modus="anamnese"] .ppanfrage-submit:focus-visible,
.ppanfrage-form-area[data-modus="anamnese"] .ppanfrage-btn-next:hover,
.ppanfrage-form-area[data-modus="anamnese"] .ppanfrage-btn-next:focus-visible {
  background: linear-gradient(135deg, #4c4278, #6156a0);
  box-shadow: 0 14px 26px rgba(91, 78, 142, 0.30);
}

/* Upsell „Ausführlicher anfragen" (ruhige zweite Option im Turbo) */
.ppanfrage-wrap .ppanfrage-btn-upsell {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 12px 16px;
  background: transparent;
  border: 2px dashed var(--ppanfrage-border);
  border-radius: 12px;
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ppanfrage-muted);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.ppanfrage-wrap .ppanfrage-btn-upsell:hover,
.ppanfrage-wrap .ppanfrage-btn-upsell:focus-visible {
  border-color: var(--ppanfrage-brand);
  background: var(--ppanfrage-brand-soft);
  color: var(--ppanfrage-brand-deep);
  outline: none;
}

.ppanfrage-wrap .ppanfrage-btn-upsell[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .ppanfrage-wrap .ppanfrage-btn-upsell {
    transition: none !important;
  }
}


/* ============================================================
   0.12.0 — Zurück/Absenden verlässlich inline, Upsell markanter,
   Wann/Tageszeit als saubere Raster
   ============================================================ */

/* Absenden in der Nav (Schritte vor dem letzten): robustes Flex-Layout. */
.ppanfrage-wrap .ppanfrage-wizard-nav {
  flex-wrap: nowrap;
  align-items: center;
}

/* Upsell: gut sichtbar, aber ruhig — gefüllt statt nur gestrichelt */
.ppanfrage-wrap .ppanfrage-btn-upsell {
  background: var(--ppanfrage-brand-soft);
  border: 2px solid var(--ppanfrage-brand);
  color: var(--ppanfrage-brand-deep);
  box-shadow: 0 0 0 3px rgba(15, 92, 99, 0.08);
}

.ppanfrage-wrap .ppanfrage-btn-upsell:hover,
.ppanfrage-wrap .ppanfrage-btn-upsell:focus-visible {
  background: var(--ppanfrage-brand);
  border-color: var(--ppanfrage-brand);
  color: #ffffff;
}

/* Wann? als sauberes Raster: 7 Optionen auf zwei Zeilen (4 + 3),
   Tageszeit? 5 Optionen auf zwei Zeilen (3 + 2) — nichts wirkt
   mehr „halb leer". */
@media (min-width: 640px) {
  .ppanfrage-wrap #ppanfrage-wunsch_tag .ppanfrage-chips {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  .ppanfrage-wrap #ppanfrage-tageszeit .ppanfrage-chips {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
}

@media (max-width: 639px) {
  .ppanfrage-wrap #ppanfrage-wunsch_tag .ppanfrage-chips,
  .ppanfrage-wrap #ppanfrage-tageszeit .ppanfrage-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

.ppanfrage-wrap #ppanfrage-wunsch_tag .ppanfrage-chip,
.ppanfrage-wrap #ppanfrage-tageszeit .ppanfrage-chip {
  justify-content: center;
  text-align: center;
  min-height: 46px;
}


/* ============================================================
   MODUS-KARTEN 0.12.1: Nutzen statt Namen — Häkchen-Vorteile,
   klare Empfehlung, einmalige Antwortzeit, Vertrauenszeile
   ============================================================ */
.ppanfrage-wrap .ppanfrage-modus-vorteile {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--ppanfrage-muted);
}

/* Die empfohlene Karte hebt sich ruhig, aber eindeutig ab */
.ppanfrage-wrap .ppanfrage-modus-card--empfohlen {
  border-color: var(--modus, var(--ppanfrage-brand));
  background: var(--modus-soft, var(--ppanfrage-brand-soft));
  box-shadow: 0 8px 20px rgba(15, 92, 99, 0.10);
}

.ppanfrage-wrap .ppanfrage-modus-card--empfohlen .ppanfrage-modus-badge {
  background: var(--modus, var(--ppanfrage-brand));
  border-color: var(--modus, var(--ppanfrage-brand));
  color: #ffffff;
}

/* Antwortzeit einmal unter allen Karten (Stil: Highlight-Box, siehe unten) */


/* ============================================================
   0.12.2 — Elite-Polish: Elevation-System, Karten-Charakter,
   moderne Radios, Badge-Feinschliff (nur Mikro, keine Umstellung)
   ============================================================ */

/* --- Elevation, einheitlich für alle Auswahl-Karten --------------
   Ruhe: feiner Schatten. Hover: +1px und etwas mehr Luft.
   Active: eingedrückt. Immer 200ms ease-out, nie hektisch. */
.ppanfrage-wrap .ppanfrage-modus-card,
.ppanfrage-wrap .ppanfrage-card,
.ppanfrage-wrap .ppanfrage-behandlung,
.ppanfrage-wrap .ppanfrage-slot {
  box-shadow: 0 1px 2px rgba(7, 24, 28, 0.05);
  transition: border-color 0.2s ease-out, background 0.2s ease-out,
              box-shadow 0.2s ease-out, transform 0.2s ease-out;
}

.ppanfrage-wrap .ppanfrage-modus-card:hover,
.ppanfrage-wrap .ppanfrage-card:hover,
.ppanfrage-wrap .ppanfrage-behandlung:hover,
.ppanfrage-wrap .ppanfrage-slot:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(7, 24, 28, 0.08);
}

.ppanfrage-wrap .ppanfrage-modus-card:active,
.ppanfrage-wrap .ppanfrage-card:active,
.ppanfrage-wrap .ppanfrage-behandlung:active,
.ppanfrage-wrap .ppanfrage-slot:active {
  transform: translateY(0);
  box-shadow: inset 0 1px 3px rgba(7, 24, 28, 0.08);
}

/* --- Charakter je Modus-Karte: 2–4 % Tönung der eigenen Farbe --- */
.ppanfrage-wrap .ppanfrage-modus-card {
  background: var(--modus-soft, var(--ppanfrage-surface-soft));
}

/* --- Radios: weg vom technischen System-Look ----------------------
   Größer, animierter Punkt, Ring im Fokus. Die Karte trägt den
   Zustand, der Kreis bestätigt ihn nur noch. */
.ppanfrage-wrap .ppanfrage-modus-card input[type="radio"],
.ppanfrage-wrap .ppanfrage-card input[type="radio"],
.ppanfrage-wrap .ppanfrage-behandlung input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 2px solid var(--ppanfrage-border);
  border-radius: 50%;
  background: #ffffff;
  display: inline-grid;
  place-content: center;
  flex: 0 0 auto;
  cursor: pointer;
  transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
}

.ppanfrage-wrap .ppanfrage-modus-card input[type="radio"]::before,
.ppanfrage-wrap .ppanfrage-card input[type="radio"]::before,
.ppanfrage-wrap .ppanfrage-behandlung input[type="radio"]::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--modus, var(--ppanfrage-brand));
  transform: scale(0);
  transition: transform 0.18s ease-out;
}

.ppanfrage-wrap .ppanfrage-modus-card input[type="radio"]:checked,
.ppanfrage-wrap .ppanfrage-card input[type="radio"]:checked,
.ppanfrage-wrap .ppanfrage-behandlung input[type="radio"]:checked {
  border-color: var(--modus, var(--ppanfrage-brand));
  box-shadow: 0 0 0 3px rgba(15, 92, 99, 0.10);
}

.ppanfrage-wrap .ppanfrage-modus-card input[type="radio"]:checked::before,
.ppanfrage-wrap .ppanfrage-card input[type="radio"]:checked::before,
.ppanfrage-wrap .ppanfrage-behandlung input[type="radio"]:checked::before {
  transform: scale(1);
}

.ppanfrage-wrap .ppanfrage-modus-card input[type="radio"]:focus-visible,
.ppanfrage-wrap .ppanfrage-card input[type="radio"]:focus-visible,
.ppanfrage-wrap .ppanfrage-behandlung input[type="radio"]:focus-visible {
  outline: 3px solid var(--modus, var(--ppanfrage-brand));
  outline-offset: 2px;
}

/* --- Badges: zentriert an der Oberkante (0.14.0, Mock) ----------- */
.ppanfrage-wrap .ppanfrage-modus-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  padding: 5px 13px;
  font-weight: 800;
  letter-spacing: 0.03em;
  box-shadow: 0 2px 6px rgba(7, 24, 28, 0.08);
  /* Nie zweizeilig umbrechen: Ein langes Badge (z. B. „★ Nur Waldhausen")
     würde sonst in die Karte ragen und den Titel decken (0.17.2) */
  white-space: nowrap;
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Zeit-/Nur-Badges tönen in der Kartenwelt */
.ppanfrage-wrap .ppanfrage-modus-badge--zeit {
  background: var(--modus-soft, var(--ppanfrage-brand-soft));
  border-color: var(--modus, #b6d3d6);
  color: var(--modus-deep, var(--ppanfrage-brand-deep));
}

/* --- Typografie-Mikro -------------------------------------------- */
.ppanfrage-wrap .ppanfrage-modus-title {
  font-size: 1.15rem;
  letter-spacing: -0.005em;
}

.ppanfrage-wrap .ppanfrage-modus-vorteile {
  gap: 4px;
  line-height: 1.5;
}

/* Häkchen in Kartenfarbe */
.ppanfrage-wrap .ppanfrage-modus-vorteile span::first-letter {
  color: var(--modus, var(--ppanfrage-brand));
  font-weight: 800;
}

@media (prefers-reduced-motion: reduce) {
  .ppanfrage-wrap .ppanfrage-modus-card,
  .ppanfrage-wrap .ppanfrage-card,
  .ppanfrage-wrap .ppanfrage-behandlung,
  .ppanfrage-wrap .ppanfrage-slot,
  .ppanfrage-wrap .ppanfrage-modus-card input[type="radio"],
  .ppanfrage-wrap .ppanfrage-card input[type="radio"],
  .ppanfrage-wrap .ppanfrage-behandlung input[type="radio"],
  .ppanfrage-wrap .ppanfrage-modus-card input[type="radio"]::before,
  .ppanfrage-wrap .ppanfrage-card input[type="radio"]::before,
  .ppanfrage-wrap .ppanfrage-behandlung input[type="radio"]::before {
    transition: none !important;
    transform: none !important;
  }
}


/* ============================================================
   VIER KARTEN EINE ENTSCHEIDUNG (0.13.0/0.14.0): Icon-Chip oben
   in Kartenfarbe getönt, Radio unsichtbar (Karte trägt den
   Zustand), Direktbuchung als grüne Aktions-Karte (NUR Waldhausen).
   ============================================================ */

/* Icon INLINE neben der Überschrift (Korrektur zu 0.14.0): gut
   lesbare Mittelgröße, in Kartenfarbe getönt */
.ppanfrage-wrap .ppanfrage-modus-titelzeile {
  display: flex;
  align-items: center;
  gap: 9px;
}

.ppanfrage-wrap .ppanfrage-modus-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--modus-soft, var(--ppanfrage-brand-soft));
  border: 1px solid rgba(7, 24, 28, 0.05);
  color: var(--modus, var(--ppanfrage-brand));
  flex: 0 0 auto;
}

.ppanfrage-wrap .ppanfrage-modus-icon svg {
  width: 17px;
  height: 17px;
}

/* Radios der Modus-Karten: funktional, aber unsichtbar — die Karte
   selbst trägt den Zustand (Muster der Chips). Kein Kreis mehr. */
.ppanfrage-wrap .ppanfrage-modus-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ppanfrage-wrap .ppanfrage-modus-card:focus-within {
  outline: 3px solid var(--modus, var(--ppanfrage-brand));
  outline-offset: 2px;
}

/* Kartenkörper unter dem Icon */
.ppanfrage-wrap .ppanfrage-modus-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* --- Karte 4: Direktbuchung (Aktion, keine Radio-Auswahl) ------- */
.ppanfrage-wrap .ppanfrage-modus-card--buchung {
  --modus: #2a5298;
  --modus-deep: #1f3f78;
  --modus-soft: #eaf1fd;
  text-decoration: none !important;
  color: inherit;
  cursor: pointer;
}

.ppanfrage-wrap .ppanfrage-modus-card--buchung:hover,
.ppanfrage-wrap .ppanfrage-modus-card--buchung:focus-visible {
  border-color: var(--modus);
  background: var(--modus-soft);
  outline: none;
}

.ppanfrage-wrap .ppanfrage-modus-card--buchung:focus-visible {
  outline: 3px solid var(--modus);
  outline-offset: 2px;
}

.ppanfrage-wrap .ppanfrage-modus-badge--buchung {
  background: var(--modus-soft);
  border-color: #c2d2ee;
  color: var(--modus-deep);
}

.ppanfrage-wrap .ppanfrage-modus-sub {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ppanfrage-text);
}

/* Missverständnis-Bremse: sichtbar, aber ruhig */
.ppanfrage-wrap .ppanfrage-modus-hinweis {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 4px;
  padding: 8px 10px;
  background: #ffffff;
  border: 1px solid #cfe7d6;
  border-radius: 10px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--ppanfrage-muted);
}

.ppanfrage-wrap .ppanfrage-modus-hinweis svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--modus);
}

/* Rückfall-Card auf der Buchungs-Seite (0.13.8): deutlich sichtbar,
   aber ruhig — für alle, die sich verklickt haben. */
.ppanfrage-wrap .pptermine-backcard {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 12px 16px;
  background: var(--ppanfrage-surface-soft);
  border: 2px solid var(--ppanfrage-border-soft);
  border-radius: 14px;
  text-decoration: none !important;
  color: var(--ppanfrage-text);
  transition: border-color 0.2s ease-out, background 0.2s ease-out, box-shadow 0.2s ease-out, transform 0.2s ease-out;
}

.ppanfrage-wrap .pptermine-backcard svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: var(--ppanfrage-brand);
}

.ppanfrage-wrap .pptermine-backcard-txt {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.ppanfrage-wrap .pptermine-backcard-txt strong {
  font-size: 0.98rem;
  color: var(--ppanfrage-brand-deep);
}

.ppanfrage-wrap .pptermine-backcard-txt span {
  font-size: 0.84rem;
  color: var(--ppanfrage-muted);
}

.ppanfrage-wrap .pptermine-backcard:hover,
.ppanfrage-wrap .pptermine-backcard:focus-visible {
  border-color: var(--ppanfrage-brand);
  background: var(--ppanfrage-brand-soft);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(7, 24, 28, 0.08);
  outline: none;
}

.ppanfrage-wrap .pptermine-backcard:focus-visible {
  outline: 3px solid var(--ppanfrage-brand);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .ppanfrage-wrap .pptermine-backcard {
    transition: none !important;
    transform: none !important;
  }
}


/* ============================================================
   0.13.1 — Der Call: große, zentrierte Anfrage-Überschrift im
   Fieldset (ersetzt kleine Legende + Hinweiszeile), Antwortzeit
   als Highlight, Badge kann die Radio-Punkte nie überdecken.
   ============================================================ */

/* Die Aufforderung selbst: mittig und klar das Größte im Schritt */
.ppanfrage-wrap .ppanfrage-call {
  display: block;
  width: 100%;
  margin: 0 0 20px;
  padding: 0;
  font-size: clamp(1.35rem, 3.2vw, 1.7rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-align: center;
  color: var(--ppanfrage-text);
}

/* Drei schlichte Häkchen unter dem Hero-Titel (0.13.5): keine Card,
   kein Rahmen — nur die drei Vertrauenspunkte in einer ruhigen Reihe */
.ppanfrage-wrap .pptermine-hero-points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin: 0 auto 8px;
  padding: 0;
  list-style: none;
}

.ppanfrage-wrap .pptermine-hero-points li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ppanfrage-brand-deep);
}

.ppanfrage-wrap .pptermine-hero-points svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--ppanfrage-brand);
}

/* Der Badge sitzt oben rechts — kurze Texte („Empfohlen",
   „★ Nur Waldhausen") passen überall hin, ohne abzuschneiden. */


/* ============================================================
   ERREICHBARKEITS-STATUS (0.13.3): ruhige Status-Zeile in den
   Telefon-Karten — Punkt + Text, grün = jetzt erreichbar,
   grau = nächster Öffnungszeitpunkt. Kein Pulsieren.
   ============================================================ */
.ppanfrage-wrap .pptermine-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.ppanfrage-wrap .pptermine-status--offen .pptermine-status-txt {
  color: #256443;
}

.ppanfrage-wrap .pptermine-status--zu .pptermine-status-txt {
  color: var(--ppanfrage-muted);
  font-weight: 600;
}


/* ============================================================
   TELEFON-KARTEN IM ZUSTAND (0.13.4/0.8.1): Offen = leises Grün,
   geschlossen = bläuliche Abenddämmerung mit aufgelegtem Hörer.
   Alles CSS-getrieben über die Status-Klasse (Server rendert,
   JS aktualisiert).
   ============================================================ */
.ppanfrage-wrap .pptermine-telbtn {
  position: relative;
  transition: background 0.25s ease-out, border-color 0.25s ease-out;
}

/* Offen: leises Grün */
.ppanfrage-wrap .pptermine-telbtn:has(.pptermine-status--offen) {
  border-color: rgba(46, 125, 82, 0.45);
  background: linear-gradient(135deg, #f2f9f4, #ffffff);
}

/* Geschlossen: bläuliche Abenddämmerung mit AUFGELEGTEM Hörer
   (0.8.1, GF) — das Hörer-Icon legt sich flach auf eine kleine
   Basis, dazu ein ruhiger Blauton statt Schlaf-Zeichen. */
.ppanfrage-wrap .pptermine-telbtn:has(.pptermine-status--zu) {
  border-color: #b9c6de;
  background: linear-gradient(135deg, #e9eef8, #e2e8f3);
}

/* Schlafender Hörer in Blau (0.8.5, GF): leicht geneigt, zwei ruhig
   aufsteigende z — dazu der dezente Mond oben rechts in der Karte. */
.ppanfrage-wrap .pptermine-telbtn:has(.pptermine-status--zu) .pptermine-telbtn-ico {
  transform: rotate(-8deg);
  transition: transform 0.3s ease-out;
  color: #5c7196;
}

.ppanfrage-wrap .pptermine-telbtn:has(.pptermine-status--zu)::before,
.ppanfrage-wrap .pptermine-telbtn:has(.pptermine-status--zu)::after {
  position: absolute;
  left: 24px;
  top: 4px;
  font-weight: 800;
  color: #8fa3c4;
  pointer-events: none;
  animation: pptermine-zzz 2.8s ease-in-out infinite;
}

.ppanfrage-wrap .pptermine-telbtn:has(.pptermine-status--zu)::before {
  content: "z";
  font-size: 0.8rem;
}

.ppanfrage-wrap .pptermine-telbtn:has(.pptermine-status--zu)::after {
  content: "z";
  font-size: 1rem;
  animation-delay: 1.4s;
}

@keyframes pptermine-zzz {
  0%   { opacity: 0; transform: translate(0, 0); }
  30%  { opacity: 0.9; }
  100% { opacity: 0; transform: translate(7px, -13px); }
}

/* Mond: dezent oben rechts, nur im geschlossenen Zustand sichtbar */
.ppanfrage-wrap .pptermine-moon {
  display: none;
}

.ppanfrage-wrap .pptermine-telbtn:has(.pptermine-status--zu) .pptermine-moon {
  display: block;
  position: absolute;
  top: 10px;
  right: 12px;
  width: 15px;
  height: 15px;
  color: #7c93bd;
  opacity: 0.85;
}

.ppanfrage-wrap .pptermine-status {
  flex-wrap: wrap;
}

@media (prefers-reduced-motion: reduce) {
  .ppanfrage-wrap .pptermine-telbtn,
  .ppanfrage-wrap .pptermine-telbtn:has(.pptermine-status--zu) .pptermine-telbtn-ico {
    transition: none !important;
  }

  .ppanfrage-wrap .pptermine-telbtn:has(.pptermine-status--zu)::before,
  .ppanfrage-wrap .pptermine-telbtn:has(.pptermine-status--zu)::after {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* ==================================================================
   FAQ-Block (0.4.0, SEO/SEA-Audit KONZEPT §6): aufklappbare Fragen
   ohne JavaScript (details/summary), selbe Kartenwelt wie der Rest.
   ================================================================== */
.ppanfrage-wrap .pptermine-faq {
  margin: 28px 0 4px;
}

.ppanfrage-wrap .pptermine-faq-title {
  margin: 0 0 14px;
  font-size: clamp(1.15rem, 2.6vw, 1.4rem);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ppanfrage-text);
  text-align: center;
}

.ppanfrage-wrap .pptermine-faq-list {
  background: var(--ppanfrage-surface);
  border: 1px solid var(--ppanfrage-border);
  border-radius: 14px;
  box-shadow: var(--ppanfrage-shadow-sm);
  overflow: hidden;
}

.ppanfrage-wrap .pptermine-faq-item + .pptermine-faq-item {
  border-top: 1px solid var(--ppanfrage-border-soft);
}

.ppanfrage-wrap .pptermine-faq-frage {
  position: relative;
  display: block;
  padding: 14px 46px 14px 16px;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ppanfrage-text);
  cursor: pointer;
  list-style: none; /* Marker-Pfeil des Browsers aus, eigener Indikator */
  transition: background-color 0.18s ease;
}

.ppanfrage-wrap .pptermine-faq-frage::-webkit-details-marker {
  display: none;
}

.ppanfrage-wrap .pptermine-faq-frage:hover {
  background: var(--ppanfrage-surface-soft);
}

.ppanfrage-wrap .pptermine-faq-frage:focus-visible {
  outline: 3px solid var(--ppanfrage-brand);
  outline-offset: -3px;
  border-radius: 4px;
}

/* Plus/Minus-Indikator (rein CSS): Strich + senkrechter Strich, der
   im offenen Zustand wegfällt */
.ppanfrage-wrap .pptermine-faq-frage::before,
.ppanfrage-wrap .pptermine-faq-frage::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 14px;
  height: 2.5px;
  border-radius: 999px;
  background: var(--ppanfrage-brand);
  transform: translateY(-50%);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.ppanfrage-wrap .pptermine-faq-frage::after {
  transform: translateY(-50%) rotate(90deg);
}

.ppanfrage-wrap .pptermine-faq-item[open] .pptermine-faq-frage::after {
  transform: translateY(-50%) rotate(0deg);
  opacity: 0;
}

.ppanfrage-wrap .pptermine-faq-item[open] .pptermine-faq-frage {
  color: var(--ppanfrage-brand-deep);
  background: var(--ppanfrage-surface-soft);
}

.ppanfrage-wrap .pptermine-faq-antwort {
  padding: 0 16px 16px;
}

.ppanfrage-wrap .pptermine-faq-antwort p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ppanfrage-muted);
}

.ppanfrage-wrap .pptermine-faq-antwort a {
  color: var(--ppanfrage-brand);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ppanfrage-wrap .pptermine-faq-antwort a:hover {
  color: var(--ppanfrage-brand-hover);
}

@media (max-width: 480px) {
  .ppanfrage-wrap .pptermine-faq-frage {
    padding: 13px 42px 13px 14px;
    font-size: 0.95rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ppanfrage-wrap .pptermine-faq-frage,
  .ppanfrage-wrap .pptermine-faq-frage::before,
  .ppanfrage-wrap .pptermine-faq-frage::after {
    transition: none !important;
  }
}

/* ==================================================================
   Slot-Zeitfenster (0.5.0): 5-Minuten-Countdown und Reload-Bar
   (0.17.0 — das Angebot verfällt sichtbar, nichts „reserviert").
   ================================================================== */
.ppanfrage-wrap .ppanfrage-slots-timer {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ppanfrage-muted-soft);
}

/* display:flex darf das hidden-Attribut nicht aushebeln (Bug, 0.17.1) */
.ppanfrage-wrap .ppanfrage-slots-timer[hidden] {
  display: none;
}

.ppanfrage-wrap .ppanfrage-slots-timer strong {
  color: var(--ppanfrage-brand-deep);
  font-variant-numeric: tabular-nums;
}

.ppanfrage-wrap .ppanfrage-slots-timer-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ppanfrage-brand);
  animation: ppanfrage-timer-puls 2s ease-in-out infinite;
}

@keyframes ppanfrage-timer-puls {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.ppanfrage-wrap .ppanfrage-slots-reload {
  margin: 12px 0 4px;
  padding: 14px 16px;
  background: var(--ppanfrage-surface);
  border: 1px dashed var(--ppanfrage-border);
  border-radius: 12px;
  text-align: center;
}

.ppanfrage-wrap .ppanfrage-slots-reload .ppanfrage-hint {
  margin: 0 0 10px;
}

.ppanfrage-wrap .ppanfrage-slots-reload .ppanfrage-cta {
  margin: 0 auto;
}

@media (prefers-reduced-motion: reduce) {
  .ppanfrage-wrap .ppanfrage-slots-timer-dot {
    animation: none !important;
  }
}

/* ==================================================================
   Modus-Stufen in der Fortschritts-Zeile (0.7.0): alle drei Wege als
   schmale Segmente, springen in beide Richtungen. Aktive Stufe in der
   Farbwelt des Modus.
   ================================================================== */
.ppanfrage-wrap .ppanfrage-progress-meta {
  align-items: center;
  flex-wrap: wrap;
}

.ppanfrage-wrap .ppanfrage-modus-stufen {
  display: inline-flex;
  flex: 0 0 auto;
  border: 1px solid var(--ppanfrage-border);
  border-radius: 999px;
  background: var(--ppanfrage-surface);
  overflow: hidden;
}

/* display:inline-flex darf das Verstecken nicht aushebeln (gleicher
   Bug-Typ wie der Timer 0.17.1 — gefunden im adversarialen Debug) */
.ppanfrage-wrap .ppanfrage-modus-stufen[hidden] {
  display: none;
}

.ppanfrage-wrap .ppanfrage-modus-stufe {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border: none;
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ppanfrage-muted-soft);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.ppanfrage-wrap .ppanfrage-modus-stufe + .ppanfrage-modus-stufe {
  border-left: 1px solid var(--ppanfrage-border-soft);
}

.ppanfrage-wrap .ppanfrage-modus-stufe:hover {
  background: var(--ppanfrage-surface-soft);
  color: var(--ppanfrage-muted);
}

.ppanfrage-wrap .ppanfrage-modus-stufe:focus-visible {
  outline: 3px solid var(--ppanfrage-brand);
  outline-offset: -3px;
}

.ppanfrage-wrap .ppanfrage-modus-stufe-ico {
  font-size: 0.95em;
  line-height: 1;
}

.ppanfrage-wrap .ppanfrage-modus-stufe.is-aktiv {
  cursor: default;
}

.ppanfrage-wrap .ppanfrage-modus-stufe.is-aktiv[data-modus="turbo"] {
  background: #fdf3e3;
  color: #92400e;
}

.ppanfrage-wrap .ppanfrage-modus-stufe.is-aktiv[data-modus="schnell"] {
  background: var(--ppanfrage-brand-soft);
  border-color: #b6d3d6;
  color: var(--ppanfrage-brand-deep);
}

.ppanfrage-wrap .ppanfrage-modus-stufe.is-aktiv[data-modus="anamnese"] {
  background: #ece9f6;
  color: #4a4180;
}

/* Schritt-Anzeige und Prozent bleiben rechts bündig — aber nur, wenn
   die Stufen links sichtbar sind; sonst bleibt das bisherige Layout. */
.ppanfrage-wrap .ppanfrage-progress-meta.mit-stufen .ppanfrage-progress-step {
  margin-left: auto;
}

/* Zeitwert nur auf schmalen Screens sichtbar (Desktop trägt der Name) */
.ppanfrage-wrap .ppanfrage-modus-stufe-zeit {
  display: none;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

/* Auf schmalen Screens zeigen die Stufen Icon + Zeitwert — so ist
   unmissverständlich, dass man wechseln kann und was es kostet */
@media (max-width: 560px) {
  .ppanfrage-wrap .ppanfrage-modus-stufe-txt {
    display: none;
  }

  .ppanfrage-wrap .ppanfrage-modus-stufe-zeit {
    display: inline;
  }

  .ppanfrage-wrap .ppanfrage-modus-stufe {
    padding: 4px 9px;
    gap: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ppanfrage-wrap .ppanfrage-modus-stufe {
    transition: none !important;
  }
}


/* ==================================================================
   Upsell zweizeilig (0.8.3): Titel + Unterzeile — der lange Einzeiler
   brach auf schmalen Screens aus dem Knopf (Layout-Shift).
   ================================================================== */
.ppanfrage-wrap .ppanfrage-btn-upsell {
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.35;
}

.ppanfrage-wrap .ppanfrage-btn-upsell-main {
  display: block;
  font-weight: 800;
  font-size: 1rem;
}

.ppanfrage-wrap .ppanfrage-btn-upsell-sub {
  display: block;
  margin-top: 2px;
  font-size: 0.8rem;
  font-weight: 600;
  opacity: 0.85;
}

/* ==================================================================
   FAQ-Spacer (0.8.6): ruhige Trennung zwischen Formular und FAQ —
   Trennlinien mit Hinweis, darunter ein dezent pulsierender Pfeil.
   ================================================================== */
.ppanfrage-wrap .pptermine-faq {
  margin-top: 8px;
}

.ppanfrage-wrap .pptermine-faq-spacer {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 44px 0 0;
}

.ppanfrage-wrap .pptermine-faq-spacer-line {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ppanfrage-border) 22%, var(--ppanfrage-border) 78%, transparent);
}

.ppanfrage-wrap .pptermine-faq-spacer-txt {
  flex: 0 0 auto;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ppanfrage-muted-soft);
  text-align: center;
}

.ppanfrage-wrap .pptermine-faq-spacer-pfeil {
  display: flex;
  justify-content: center;
  margin: 10px 0 14px;
  color: var(--ppanfrage-brand);
  animation: pptermine-faq-pfeil 2.6s ease-in-out infinite;
}

.ppanfrage-wrap .pptermine-faq-spacer-pfeil svg {
  width: 20px;
  height: 20px;
}

@keyframes pptermine-faq-pfeil {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50%      { transform: translateY(4px); opacity: 1; }
}

@media (max-width: 560px) {
  .ppanfrage-wrap .pptermine-faq-spacer {
    margin-top: 34px;
    gap: 10px;
  }

  .ppanfrage-wrap .pptermine-faq-spacer-txt {
    font-size: 0.78rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ppanfrage-wrap .pptermine-faq-spacer-pfeil {
    animation: none !important;
    opacity: 0.85;
  }
}

/* ==================================================================
   Heilpraktiker-Hinweis (0.8.7): 20 Minuten früher (Anamnesebogen),
   erscheint unter dem Behandlungsart-Grid bei Wahl der Karte.
   ================================================================== */
.ppanfrage-wrap .ppanfrage-hp-hinweis {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0 0;
  padding: 12px 14px;
  background: var(--ppanfrage-brand-soft);
  border-left: 4px solid var(--ppanfrage-brand);
  border-radius: 10px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ppanfrage-brand-deep);
}

.ppanfrage-wrap .ppanfrage-hp-hinweis svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

/* ==================================================================
   Mailbox-Info (0.8.8): Mini-Hinweis in den Telefon-Karten, dass die
   Mailbox Anrufe (Absagen, Anfragen) annimmt — dezent, zweite Zeile.
   ================================================================== */
.ppanfrage-wrap .pptermine-mailbox {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ppanfrage-muted-soft);
}

.ppanfrage-wrap .pptermine-mailbox svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  opacity: 0.8;
}

/* ==================================================================
   Telefon-Intro (0.8.9): schmale Minicard über den Standort-Nummern —
   lädt zum Anruf ein, ohne mit der Aufgabe zu konkurrieren.
   ================================================================== */
.ppanfrage-wrap .pptermine-telintro {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 2px;
  padding: 9px 14px;
  background: var(--ppanfrage-surface);
  border: 1px solid var(--ppanfrage-border-soft);
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ppanfrage-muted);
  text-align: center;
}

.ppanfrage-wrap .pptermine-telintro svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--ppanfrage-brand);
}

@media (max-width: 560px) {
  .ppanfrage-wrap .pptermine-telintro {
    font-size: 0.84rem;
    padding: 8px 12px;
  }
}

/* ==================================================================
   Modus-Call belebt (0.8.10): Der Einstieg („Wie möchten Sie Ihren
   Termin anfragen?") signalisiert ruhig, dass hier die Musik spielt —
   einmaliges Einsetzen, darunter ein atmender Akzent-Strich.
   ================================================================== */
.ppanfrage-wrap .ppanfrage-call {
  position: relative;
  animation: ppanfrage-call-in 0.55s ease-out 0.05s both;
}

@keyframes ppanfrage-call-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.ppanfrage-wrap .ppanfrage-call::after {
  content: "";
  display: block;
  width: 120px;
  height: 4px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ppanfrage-brand), #2f9e8f);
  animation: ppanfrage-call-line 3.6s ease-in-out infinite;
}

@keyframes ppanfrage-call-line {
  0%, 100% { transform: scaleX(0.66); opacity: 0.6; }
  50%      { transform: scaleX(1.05); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ppanfrage-wrap .ppanfrage-call,
  .ppanfrage-wrap .ppanfrage-call::after {
    animation: none !important;
  }

  .ppanfrage-wrap .ppanfrage-call::after {
    transform: none;
    opacity: 1;
  }
}

/* ==================================================================
   Behandlungsart-Gruppen + Dauerfeld (0.8.12): Physio-Heilmittel und
   Direktzugang & Wellness als zwei ruhige Gruppen — viele Optionen,
   ohne dass es voll wirkt.
   ================================================================== */
.ppanfrage-wrap .ppanfrage-bgruppe-titel {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ppanfrage-muted-soft);
}

.ppanfrage-wrap .ppanfrage-bgruppe-privat {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--ppanfrage-border-soft);
}

.ppanfrage-wrap .ppanfrage-dauerfeld {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding: 14px 16px;
  background: var(--ppanfrage-surface-soft);
  border: 1px solid var(--ppanfrage-border-soft);
  border-radius: 12px;
}

@media (min-width: 640px) {
  .ppanfrage-wrap .ppanfrage-dauerfeld {
    grid-template-columns: 1fr 1fr;
  }
}

.ppanfrage-wrap .ppanfrage-dauerfeld[hidden],
.ppanfrage-wrap .ppanfrage-dauerfeld-item[hidden] {
  display: none;
}

/* ==================================================================
   Mailbox nur im geschlossenen Zustand (0.8.13, GF): Die Zeile ist
   der Hinweis „trotzdem erreichbar" — offen braucht es sie nicht.
   ================================================================== */
.ppanfrage-wrap .pptermine-mailbox {
  display: none;
}

.ppanfrage-wrap .pptermine-telbtn:has(.pptermine-status--zu) .pptermine-mailbox {
  display: flex;
}

/* ==================================================================
   SEKTIONEN UNTER DEM FORMULAR (0.8.15, GF 0.24.2): die vollen
   Telefon-Karten stehen als Kontakt-Sektion UNTER dem Formular,
   danach drei ruhige Karten fuer Unentschlossene. Die schlanke
   Telefon-Zeile oben (0.22.0) ist seit 0.24.3 entfernt — Duplikat
   zur Kontakt-Sektion (GF-Meldung).
   ================================================================== */

/* Kontakt-Sektion unter dem Formular: gleiche Karten wie bisher
   (Klassen unveraendert, Zustands-CSS greift weiter), ruhiger Titel */
.ppanfrage-wrap .pptermine-kontakt {
  margin: 30px 0 4px;
}

.ppanfrage-wrap .pptermine-kontakt-title {
  margin: 0 0 12px;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ppanfrage-text);
  text-align: center;
}

.ppanfrage-wrap .pptermine-kontakt .pptermine-hero-tel {
  margin-top: 0;
}

/* Unentschlossenen-Sektion: drei ruhige Karten (Familien-Optik,
   kein Popup-Charakter) — Standorte, Leistungen, Ohne Rezept */
.ppanfrage-wrap .pptermine-weiter {
  margin: 26px 0 4px;
}

.ppanfrage-wrap .pptermine-weiter-title {
  margin: 0 0 12px;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ppanfrage-text);
  text-align: center;
}

.ppanfrage-wrap .pptermine-weiter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 760px) {
  .ppanfrage-wrap .pptermine-weiter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ppanfrage-wrap .pptermine-weiter-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--ppanfrage-surface);
  border: 1px solid var(--ppanfrage-border);
  border-radius: 14px;
  box-shadow: var(--ppanfrage-shadow-sm);
  text-decoration: none !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.ppanfrage-wrap .pptermine-weiter-card:hover,
.ppanfrage-wrap .pptermine-weiter-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--ppanfrage-brand);
  box-shadow: var(--ppanfrage-shadow);
  outline: none;
}

.ppanfrage-wrap .pptermine-weiter-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--ppanfrage-brand-soft);
  color: var(--ppanfrage-brand-deep);
}

.ppanfrage-wrap .pptermine-weiter-icon svg {
  width: 19px;
  height: 19px;
}

.ppanfrage-wrap .pptermine-weiter-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.45;
}

.ppanfrage-wrap .pptermine-weiter-titel {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--ppanfrage-brand-deep);
}

.ppanfrage-wrap .pptermine-weiter-text {
  font-size: 0.85rem;
  color: var(--ppanfrage-muted);
}

@media (prefers-reduced-motion: reduce) {
  .ppanfrage-wrap .pptermine-weiter-card {
    transition: none !important;
  }
}


/* ============================================================
   0.25.3 — STANDORT-KARTEN + BACKCARD REDESIGN (GF: „altbacken")
   Icon-Badges in Brand-Soft, Eck-Check statt sichtbarem Radio,
   3er-Grid mit vertikalen Karten ab 720px. Das Radio bleibt
   fokussierbar im DOM (sr-only-Muster), die Karte traegt Fokus
   und Zustand. Gilt NUR fuer #ppanfrage-standort und die
   .pptermine-backcard — Modus-/Behandlungs-/Slot-Karten bleiben
   unangetastet.
   ============================================================ */

/* --- Standort-Karten -------------------------------------------- */
#ppanfrage-standort .ppanfrage-card {
  position: relative;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
}

#ppanfrage-standort .ppanfrage-card-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-content: center;
  border-radius: 13px;
  background: var(--ppanfrage-brand-soft);
  color: var(--ppanfrage-brand-deep);
  transition: background 0.2s ease-out, color 0.2s ease-out, transform 0.2s ease-out;
}
#ppanfrage-standort .ppanfrage-card-icon svg {
  width: 23px;
  height: 23px;
}
#ppanfrage-standort .ppanfrage-card:hover .ppanfrage-card-icon {
  transform: scale(1.05);
}

/* Radio: unsichtbar, aber im DOM und fokussierbar (sr-only-Muster);
   die Karte traegt Fokus-Ring und Auswahl-Zustand. */
#ppanfrage-standort .ppanfrage-card input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
#ppanfrage-standort .ppanfrage-card:has(input[type="radio"]:focus-visible) {
  outline: 3px solid var(--ppanfrage-brand);
  outline-offset: 2px;
}

/* Eck-Check bei Auswahl */
#ppanfrage-standort .ppanfrage-card-check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-content: center;
  border-radius: 50%;
  background: var(--ppanfrage-brand);
  color: #ffffff;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.18s ease-out, transform 0.18s ease-out;
}
#ppanfrage-standort .ppanfrage-card-check svg {
  width: 13px;
  height: 13px;
}
#ppanfrage-standort .ppanfrage-card:has(input[type="radio"]:checked) .ppanfrage-card-check {
  opacity: 1;
  transform: scale(1);
}
#ppanfrage-standort .ppanfrage-card:has(input[type="radio"]:checked) .ppanfrage-card-icon {
  background: var(--ppanfrage-brand);
  color: #ffffff;
}

/* Ab 720px: drei echte Karten nebeneinander, Inhalt vertikal */
@media (min-width: 720px) {
  .ppanfrage-wrap .ppanfrage-cards#ppanfrage-standort {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  #ppanfrage-standort .ppanfrage-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 16px 16px;
  }
}

/* --- Backcard-Polish ----------------------------------------------
   Pfeil bekommt die Icon-Badge-Behandlung der Standort-Karten;
   im Hover fuellt die Badge und der Pfeil rueckt einen Tick nach
   links (Richtung „zurueck"). */
.ppanfrage-wrap .pptermine-backcard svg {
  width: 38px;
  height: 38px;
  padding: 9px;
  border-radius: 50%;
  background: var(--ppanfrage-brand-soft);
  color: var(--ppanfrage-brand-deep);
  transition: background 0.2s ease-out, color 0.2s ease-out, transform 0.2s ease-out;
}
.ppanfrage-wrap .pptermine-backcard:hover svg,
.ppanfrage-wrap .pptermine-backcard:focus-visible svg {
  background: var(--ppanfrage-brand);
  color: #ffffff;
  transform: translateX(-2px);
}


/* 0.32.0 — Der Block .ppanfrage-infobox ist ERSATZLOS entfallen.
   Er stylte die Box "Was ist Manuelle Therapie?" (0.25.7), die nur an
   EINER Stelle im Markup stand (class-form.php) und dort ebenfalls
   entfallen ist. Ihre Aussage steht jetzt in der Unterzeile der Karte.
   Der Block war zudem der Grund fuer den vom GF gemeldeten Abstands-
   fehler: die Box war ein Rasterelement OHNE grid-column:1/-1 und
   belegte deshalb nur die linke Spalte, waehrend ihr Eigenrand
   (margin 12/0/4) zusaetzlich auf den Rasterabstand (gap:10px) kam. */


/* ============================================================
   0.25.13 — Direkt-buchen-Card HELL-BLAU im Layout der anderen
   Karten (GF: „an das Layout der anderen Cards anpassen; edler,
   sanfter, hochwertiger"): weicher Blau-Schleier auf hellem Grund
   statt deckendem Navy, linke Akzentkante + Soft-Badge wie bei
   den drei Anfrage-Karten; Standort-Chips (gruen/rot) bleiben §7.
   ============================================================ */
.ppanfrage-wrap .ppanfrage-modus-card--buchung {
  --modus: #2a5298;
  --modus-deep: #1f3f78;
  --modus-soft: #eaf1fd;
  background: linear-gradient(160deg, #fdfeff 0%, #e9f1fc 100%);
  color: var(--ppanfrage-text);
  box-shadow: 0 2px 10px rgba(31, 63, 120, 0.08);
}
.ppanfrage-wrap .ppanfrage-modus-card--buchung:hover,
.ppanfrage-wrap .ppanfrage-modus-card--buchung:focus-visible {
  background: linear-gradient(160deg, #f4f8fe 0%, #dfebfb 100%);
  border-color: var(--modus);
  box-shadow: 0 8px 18px rgba(31, 63, 120, 0.14);
  outline: none;
}
.ppanfrage-wrap .ppanfrage-modus-card--buchung .ppanfrage-modus-title,
.ppanfrage-wrap .ppanfrage-modus-card--buchung .ppanfrage-modus-icon {
  color: var(--modus-deep);
}
/* 0.25.15 — Badge schwebt oben wie bei den anderen Karten (Basis-
   Regel: absolute, top -13px, left 50%, translateX(-50%)); hier nur
   die Highlight-Farbung solid-blau. Text „Direkt buchen" ist kurz,
   zentriert — nichts ragt raus, nichts wird abgeschnitten. */
.ppanfrage-wrap .ppanfrage-modus-card--buchung .ppanfrage-modus-badge--buchung {
  background: var(--modus);
  border-color: var(--modus);
  color: #ffffff;
}
.ppanfrage-wrap .ppanfrage-modus-card--buchung .ppanfrage-modus-angebot-taglabel {
  color: #6b7fa8;
}
.ppanfrage-wrap .ppanfrage-modus-card--buchung .ppanfrage-modus-angebote {
  border-top-color: #d5e1f5;
}
.ppanfrage-wrap .ppanfrage-modus-card--buchung .ppanfrage-modus-angebot-hinweis {
  color: #5a6b8c;
}
.ppanfrage-wrap .ppanfrage-modus-card--buchung .ppanfrage-modus-ort-zeit {
  color: #2c3e5f;
  white-space: nowrap;
}

/* Standort-Zeit-Chips (Standard §7: Waldhausen gruenlich, Bettrath
   roetlich, immer ausgeschrieben; Sprung via JS data-goto-url).
   0.25.10: Radius = Radius der Cards (16px) — eine Formensprache. */
.ppanfrage-wrap .ppanfrage-modus-zeitchip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 16px;
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}
.ppanfrage-wrap .ppanfrage-modus-zeitchip:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(7, 24, 28, 0.12);
}
.ppanfrage-wrap .ppanfrage-modus-zeitchip:focus-visible {
  outline: 3px solid var(--ppanfrage-brand);
  outline-offset: 2px;
}
.ppanfrage-wrap .ppanfrage-modus-zeitchip--wh {
  background: #e3f2e7;
  color: #1f6b38;
}
.ppanfrage-wrap .ppanfrage-modus-zeitchip--bt {
  background: #fbe9e7;
  color: #a03428;
}

/* Je Standort EINE Zeile (Chip + Zeitfenster), echtes Untereinander
   ohne Versetzung (0.25.10, GF-Review). */
.ppanfrage-wrap .ppanfrage-modus-ort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 3px 0;
  font-size: 0.92rem;
}
.ppanfrage-wrap .ppanfrage-modus-ort-zeit {
  color: var(--ppanfrage-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Tages-Overline in der Angebote-Box (statt „morgen"-Pille): ruhig,
   klein, grossgeschrieben — der Tag steht ueber den Zeilen. */
.ppanfrage-wrap .ppanfrage-modus-angebot-taglabel {
  display: block;
  margin-bottom: 6px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ppanfrage-muted);
}

/* Fruehestens/Spaetestens-Reihen (0.25.16, GF „so wie es mal war"):
   Label links, Chips (Standort + Uhrzeit) rechts, darf umbrechen. */
.ppanfrage-wrap .ppanfrage-modus-angebot-reihe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 4px 0;
}
.ppanfrage-wrap .ppanfrage-modus-angebot-was {
  min-width: 82px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ppanfrage-muted);
}

/* ============================================================
   0.8.16 / Plugin 0.30.0 — EINE TEAL-FAMILIE STATT VIER FARBTOENEN
   (GF-Entscheid nach Entwurfs-Vergleich: Variante C, "kraeftig
   gestaffelt")

   AUSGANGSLAGE: die vier Karten trugen vier fremde Farbwelten —
   Bernstein, Teal, Violett, Navy. Die Farbe sagte damit nichts ueber
   den RANG der Optionen, sondern nur, dass sie verschieden sind; die
   EMPFOHLENE Karte war zufaellig die blasseste. Jetzt tragen alle vier
   dieselbe Hausfarbe, und der Rang laeuft ueber die Intensitaet.
   Die Abstaende der Staffel sind bewusst weit (30 % / 15 % / 7 %
   Toenung): ein erster, sanfterer Entwurf lag komplett im hellsten
   Fuenftel des Farbraums, dort waren die mittleren Karten kaum
   unterscheidbar.

   DIE VIERTE KARTE ist inhaltlich etwas anderes — drei Wege zu FRAGEN,
   einer zu BUCHEN — und wird deshalb ueber die FORM abgesetzt
   (gestrichelter Umriss) statt ueber eine fremde Farbe.

   NICHT ANGEFASST: die Standort-Chips (Waldhausen gruenlich, Bettrath
   roetlich, Standard §7). Die tragen eine echte Information und duerfen
   nicht in der Familienfarbe verschwinden.

   WARUM AM DATEIENDE: die Karten-Regeln weiter oben stehen in mehreren
   Bloecken mit BITGLEICHER Spezifitaet (0,3,0). Bei Gleichstand gewinnt
   die spaetere Regel — deshalb liegt der neue Stand hier unten und
   nicht verstreut in den Alt-Bloecken.
   ============================================================ */

/* --- Die eine Farbfamilie, gestaffelt nach Rang --- */
.ppanfrage-wrap .ppanfrage-modus-card--turbo,
.ppanfrage-wrap .ppanfrage-modus-card--schnell,
.ppanfrage-wrap .ppanfrage-modus-card--highlight,
.ppanfrage-wrap .ppanfrage-modus-card--buchung {
  --modus: #0f5c63;
  --modus-deep: #0a464c;
  --modus-soft: #e3eff0;
}

/* Grundflaeche: hell oben, Eigenfarbe unten (160deg) — der Text steht
   oben auf hellem Grund, der Kontrast bleibt unangetastet. */
.ppanfrage-wrap .ppanfrage-modus-card--turbo,
.ppanfrage-wrap .ppanfrage-modus-card--highlight {
  background: linear-gradient(160deg, #ffffff 0%, color-mix(in srgb, var(--modus) 15%, #ffffff) 100%);
  /* Vierwertig, damit die LINKE Akzentkante erhalten bleibt: die
     Basis-Regel setzt sie ueber `border-left: 5px solid var(--modus)`,
     ein einwertiges border-color haette sie mit ueberschrieben und die
     Kante waere still verschwunden (bitgleiche Spezifitaet, spaeter). */
  border-color: color-mix(in srgb, var(--modus) 30%, var(--ppanfrage-border-soft, #dceaea))
                color-mix(in srgb, var(--modus) 30%, var(--ppanfrage-border-soft, #dceaea))
                color-mix(in srgb, var(--modus) 30%, var(--ppanfrage-border-soft, #dceaea))
                var(--modus);
}
/* Die dritte Karte eine Stufe leiser als die erste. */
.ppanfrage-wrap .ppanfrage-modus-card--highlight {
  background: linear-gradient(160deg, #ffffff 0%, color-mix(in srgb, var(--modus) 7%, #ffffff) 100%);
}

/* --- Der Anker: die empfohlene Karte --- */
.ppanfrage-wrap .ppanfrage-modus-card--empfohlen {
  --modus: #0a464c;
  background: linear-gradient(160deg, #ffffff 0%, color-mix(in srgb, var(--modus) 30%, #ffffff) 100%);
  border-color: var(--modus);
  border-width: 2px;
  box-shadow: 0 12px 28px -14px rgba(10, 70, 76, 0.42);
}
/* Akzentkante als ZWEITER Erkennungsanker neben der Flaeche — hilft
   auch dort, wo Farbunterschiede schlechter wahrgenommen werden.
   Der Radius sitzt an der Kante selbst; ein overflow:hidden an der
   Karte wuerde das Badge kappen, das bewusst darueber schwebt
   (Basis-Regel top:-13px). */
.ppanfrage-wrap .ppanfrage-modus-card--empfohlen::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  z-index: 0;
  border-radius: 12px 12px 0 0;
  pointer-events: none;
  background: linear-gradient(90deg, #0a464c, #0f5c63 60%, #4ba7b0);
}
/* Das Badge muss ueber der Akzentkante liegen (beide positioniert, das
   Pseudo-Element kaeme sonst als spaeteres Element darueber). */
.ppanfrage-wrap .ppanfrage-modus-card .ppanfrage-modus-badge {
  z-index: 2;
}

/* --- Die Buchungs-Karte: Form statt Farbe --- */
.ppanfrage-wrap .ppanfrage-modus-card--buchung {
  background: #ffffff;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--modus) 34%, var(--ppanfrage-border-soft, #dceaea))
                color-mix(in srgb, var(--modus) 34%, var(--ppanfrage-border-soft, #dceaea))
                color-mix(in srgb, var(--modus) 34%, var(--ppanfrage-border-soft, #dceaea))
                var(--modus);
  border-left-style: solid;
  box-shadow: none;
}
.ppanfrage-wrap .ppanfrage-modus-card--buchung .ppanfrage-modus-title,
.ppanfrage-wrap .ppanfrage-modus-card--buchung .ppanfrage-modus-icon {
  color: var(--modus-deep);
}
.ppanfrage-wrap .ppanfrage-modus-card--buchung .ppanfrage-modus-badge--buchung {
  background: #ffffff;
  border: 1px dashed color-mix(in srgb, var(--modus) 45%, transparent);
  color: var(--modus);
}
.ppanfrage-wrap .ppanfrage-modus-card--buchung .ppanfrage-modus-angebot-taglabel,
.ppanfrage-wrap .ppanfrage-modus-card--buchung .ppanfrage-modus-angebot-hinweis {
  color: var(--ppanfrage-muted);
}
.ppanfrage-wrap .ppanfrage-modus-card--buchung .ppanfrage-modus-angebote {
  border-top-color: color-mix(in srgb, var(--modus) 22%, #ffffff);
}
.ppanfrage-wrap .ppanfrage-modus-card--buchung .ppanfrage-modus-ort-zeit {
  color: var(--ppanfrage-text);
  white-space: nowrap;
}

/* --- Zustaende: EINE Sprache fuer alle vier ---
   ACHTUNG, hier lag ein echter Defekt: die Verlaufs-Regeln fuer :hover
   und :checked aus 0.29.0 standen VOR zwei aelteren Regeln mit
   bitgleicher Spezifitaet, die ein flaches
   `background: var(--modus-soft)` setzten. Bei Gleichstand gewinnt die
   spaetere — der Verlauf griff also im Ruhezustand, verschwand aber bei
   Beruehrung und Auswahl. Genau dann, wenn die Karte am meisten sagen
   soll. */
.ppanfrage-wrap .ppanfrage-modus-card:hover,
.ppanfrage-wrap .ppanfrage-modus-card:has(input[type="radio"]:checked),
.ppanfrage-wrap .ppanfrage-modus-card.is-selected {
  border-color: var(--modus);
  background: linear-gradient(160deg, #ffffff 0%, color-mix(in srgb, var(--modus) 22%, #ffffff) 100%);
  box-shadow: 0 8px 20px -10px rgba(10, 70, 76, 0.35);
}
.ppanfrage-wrap .ppanfrage-modus-card--empfohlen:hover,
.ppanfrage-wrap .ppanfrage-modus-card--empfohlen:has(input[type="radio"]:checked),
.ppanfrage-wrap .ppanfrage-modus-card--empfohlen.is-selected {
  background: linear-gradient(160deg, #ffffff 0%, color-mix(in srgb, var(--modus) 38%, #ffffff) 100%);
  box-shadow: 0 14px 30px -14px rgba(10, 70, 76, 0.5);
}
/* Die Buchungs-Karte behaelt auch beruehrt ihren ruhigen Umriss. Diese
   Regel MUSS nach der allgemeinen Zustands-Regel stehen: beide haben
   bitgleiche Spezifitaet (0,3,0), und bei Gleichstand gewinnt die
   spaetere. Stuende sie vorher, saehe die Buchungs-Karte beim
   Beruehren aus wie eine Anfrage-Karte. */
.ppanfrage-wrap .ppanfrage-modus-card--buchung:hover,
.ppanfrage-wrap .ppanfrage-modus-card--buchung:focus-visible {
  background: linear-gradient(160deg, #ffffff 0%, color-mix(in srgb, var(--modus) 9%, #ffffff) 100%);
  border-color: var(--modus);
  box-shadow: 0 8px 18px -10px rgba(10, 70, 76, 0.3);
}

/* Die farbigen Alt-Badges der Bernstein- und Violett-Karte gehoeren zu
   Farbwelten, die es nicht mehr gibt. */
.ppanfrage-wrap .ppanfrage-modus-card--turbo .ppanfrage-modus-badge--zeit,
.ppanfrage-wrap .ppanfrage-modus-card--highlight .ppanfrage-modus-badge {
  background: var(--modus-soft);
  border-color: color-mix(in srgb, var(--modus) 30%, transparent);
  color: var(--modus-deep);
}

/* Die getoente Formular-Welt folgt der Auswahl — mit nur noch einer
   Familie tragen alle drei Anfrage-Wege dieselbe Hausfarbe. */
.ppanfrage-form-area[data-modus="turbo"],
.ppanfrage-form-area[data-modus="anamnese"] {
  --ppanfrage-brand: #0f5c63;
  --ppanfrage-brand-deep: #0a464c;
  --ppanfrage-brand-hover: #0b494f;
  --ppanfrage-brand-soft: #e3eff0;
}

/* ============================================================
   0.8.17 / Plugin 0.31.0 — LUFT UM DIE BUCHUNGSANFRAGE
   + STANDORT-WAHL IN DER FAMILIENFARBE
   (GF-Meldung vom Telefon, zwei Befunde)
   ============================================================ */

/* (1) Der Sprung landete "gefuehlt im FAQ". Ursache war KEIN zu weiter
   Sprung, sondern ein NICHT gemachter: der Klick-Handler unterband die
   Anker-Navigation und tauschte nur die Panels; weil das Buchungs-Panel
   viel kuerzer ist als das Anfrage-Panel, wurde das Dokument kuerzer und
   der Browser klemmte die beibehaltene Scroll-Position ans neue Ende.
   Der Sprung passiert jetzt im JS; hier steht der Abstand, mit dem er
   landet. Die Seite hat eine KLEBENDE Kopfleiste — ohne scroll-margin-top
   verschwindet die Ueberschrift darunter. */
.ppanfrage-wrap #pptermine-panels {
  /* Die klebende Kopfleiste misst auf dem Telefon rund 65 CSS-Pixel. Der
     untere Wert des clamp liegt bewusst darueber, damit die Ueberschrift
     nicht darunter verschwindet, und traegt zugleich die vom GF gewuenschte
     Luft; nach oben deckelt der clamp, damit auf grossen Bildschirmen keine
     leere Flaeche entsteht. */
  scroll-margin-top: clamp(92px, 13vh, 132px);
}

/* (2) "Nicht zu wenig Luft nach oben und unten, sonst wirkt die
   Buchungsanfrage reingequetscht." Der Innenabstand waechst mit der
   Breite mit, bleibt auf dem Telefon aber bezahlbar. */
.ppanfrage-wrap #pptermine-panels {
  padding-block: clamp(14px, 3.5vw, 30px);
}
.ppanfrage-wrap .ppbuchung {
  padding-block: clamp(6px, 2vw, 16px);
}
.ppanfrage-wrap .ppbuchung-frame {
  margin-block: clamp(10px, 2.5vw, 20px);
}

/* (3) Standort-WAHL in der Familienfarbe.
   Der Hausstandard §7 (Waldhausen gruenlich, Bettrath roetlich) bleibt —
   aber nur in seiner Rolle als ERKENNUNGSMERKMAL, als schmale Kante. Als
   FLAECHENFARBE einer Wahl war er falsch: zwei gleichwertige Optionen, von
   denen eine rot eingefaerbt ist, lesen sich als "verfuegbar" und "gesperrt".
   Die Verfuegbarkeits-Chips (.ppanfrage-modus-zeitchip--wh/--bt) behalten
   ihre Flaechenfarbe: dort stehen beide Standorte nebeneinander und die
   Farbe traegt echte Information. */
.ppanfrage-wrap .ppbuchung-wahl-card--waldhausen,
.ppanfrage-wrap .ppbuchung-wahl-card--bettrath {
  background: linear-gradient(160deg, #ffffff 0%, color-mix(in srgb, #0f5c63 12%, #ffffff) 100%);
  border: 2px solid color-mix(in srgb, #0f5c63 26%, var(--ppanfrage-border-soft, #dceaea));
  color: var(--ppanfrage-text);
}
/* Die Kante traegt die Standort-Identitaet weiter (§7), ohne die Flaeche
   einzufaerben. */
.ppanfrage-wrap .ppbuchung-wahl-card--waldhausen { border-left: 5px solid #1f6b38; }
.ppanfrage-wrap .ppbuchung-wahl-card--bettrath   { border-left: 5px solid #a03428; }

.ppanfrage-wrap .ppbuchung-wahl-card--waldhausen:hover,
.ppanfrage-wrap .ppbuchung-wahl-card--bettrath:hover {
  border-color: #0f5c63;
  background: linear-gradient(160deg, #ffffff 0%, color-mix(in srgb, #0f5c63 20%, #ffffff) 100%);
  box-shadow: 0 8px 20px -10px rgba(10, 70, 76, 0.35);
}
.ppanfrage-wrap .ppbuchung-wahl-card--waldhausen:hover { border-left-color: #1f6b38; }
.ppanfrage-wrap .ppbuchung-wahl-card--bettrath:hover   { border-left-color: #a03428; }

.ppanfrage-wrap .ppbuchung-wahl-name { color: var(--ppanfrage-brand-deep, #0a464c); }
/* opacity:0.8 auf der Adresse senkte den Kontrast unnoetig; die Farbe
   traegt die Abstufung jetzt selbst und ist nachgerechnet (5,30:1). */
.ppanfrage-wrap .ppbuchung-wahl-addr { color: #5a6f75; opacity: 1; }

/* ==================================================================
   PRESET-WIZARD (0.43.1): 4-Schritt-Formulare der Landingpage-
   Presets ([pp_anfrage preset="…"]) — Schritte, Navigation,
   Preis-Karten, Zusammenfassung. Baut auf denselben Tokens und
   Karten-Klassen auf (keine neue Optik, nur Anordnung).
   ================================================================== */
.ppanfrage-wrap .ppreset-wizard .ppreset-step {
  margin-top: 18px;
}

.ppanfrage-wrap .ppreset-wizard .ppanfrage-step-title {
  margin: 0 0 12px;
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--ppanfrage-text);
}

.ppanfrage-wrap .ppreset-progress {
  margin-bottom: 4px;
}

.ppanfrage-wrap .ppreset-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.ppanfrage-wrap .ppreset-nav .ppreset-weiter-btn {
  margin-left: auto;
}

/* Hinweis-Boxen der Presets (gleiche Optik wie ppanfrage-hp-hinweis) */
.ppanfrage-wrap .ppanfrage-preset-hinweis {
  margin: 0 0 14px;
}

.ppanfrage-wrap .ppanfrage-preset-hinweis--warn {
  background: #fdf3d7;
  border-left-color: #d97706;
  color: #6b5300;
}

/* Statische Preis-Karten (Info, keine Auswahl): wie die Karten,
   aber ohne Klick-Verhalten */
.ppanfrage-wrap .ppreset-preise {
  margin: 0 0 14px;
}

.ppanfrage-wrap .ppreset-preiskarte {
  cursor: default;
}

.ppanfrage-wrap .ppreset-preiskarte:hover {
  border-color: var(--ppanfrage-border-soft);
}

/* Akut-Häkchen (Soforthilfe): ruhige Karte, gleiche Sprache */
.ppanfrage-wrap .ppreset-check {
  background: var(--ppanfrage-surface-soft);
  border: 2px solid var(--ppanfrage-border-soft);
  border-left: 5px solid #c0392b;
  border-radius: 14px;
  padding: 12px 14px;
}

/* Zusammenfassung in Schritt 4 */
.ppanfrage-wrap .ppreset-summary-box {
  background: var(--ppanfrage-surface-soft);
  border: 1px solid var(--ppanfrage-border-soft);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 0 0 16px;
}

.ppanfrage-wrap .ppreset-summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 18px;
  margin: 8px 0 0;
}

@media (min-width: 640px) {
  .ppanfrage-wrap .ppreset-summary {
    grid-template-columns: minmax(140px, 0.9fr) 1.4fr;
  }
}

.ppanfrage-wrap .ppreset-summary-titel {
  font-weight: 700;
  color: var(--ppanfrage-text);
  font-size: 0.92rem;
}

.ppanfrage-wrap .ppreset-summary-wert {
  margin: 0 0 6px;
  color: var(--ppanfrage-muted);
  font-size: 0.92rem;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Slot-Liste des Wizards (Karten kommen aus denselben Klassen wie
   die des Hauptformulars — hier nur die Anordnung) */
.ppanfrage-wrap .ppreset-slots {
  margin-top: 16px;
}

/* minmax(0, 1fr) statt 1fr (0.8.19): gleiche Härtung wie
   #ppanfrage-slots-list — die Preset-Wizards nutzen DIESELBEN
   .ppanfrage-slot-Karten (pp-preset-wizard.js), also dieselbe Falle. */
.ppanfrage-wrap .ppreset-slots-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-top: 8px;
}

@media (min-width: 640px) {
  .ppanfrage-wrap .ppreset-slots-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================================
   0.8.20 — FLÜSSIGE WIZARD-SCHRITTE (GF 2026-08-16)
   ============================================================ */
/* Nach dem PRG-Redirect landet der Browser am Formular-Anker — das
   soll gleiten statt rucken, auch auf Touch-Geräten (bisher galt das
   sanfte Scrollen nur hover/fine). prefers-reduced-motion respektiert. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Anker-Landung mit Luft unter der Sticky-Navigation — das Formular
   klebt nicht verdeckt am oberen Rand, mobil muss nicht nachjustiert
   werden (GF: „bei jedem Schritt das Fenster zurechtrücken"). */
.ppanfrage-wrap .ppanfrage-form-area { scroll-margin-top: 110px; }
@media (max-width: 768px) {
  .ppanfrage-wrap .ppanfrage-form-area { scroll-margin-top: 90px; }
}