/* =============================================================================
   PHYSIOPARK MG · PP Termine · Formular-CSS
   Datei:   ppw-termine.css      Version: 0.8.24
   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.24 · 2026-08-27 · Plugin 0.51.0
     - DIE PREISE DER SOFORTHILFE ALS AUFSTELLUNG (GF: „besser/schoener
       darstellen"): .ppreset-posten je Posten eine Zeile, Bezeichnung
       links, Betrag rechts. `font-variant-numeric: tabular-nums` haelt
       die Betraege exakt untereinander — ohne sie tanzen unterschiedlich
       breite Ziffern. Mobil bricht nur die BEZEICHNUNG um: `min-width:0`
       am Text (sonst schrumpft ein Flex-Kind nie unter seinen Inhalt und
       schiebt den Betrag hinaus) und `white-space:nowrap` am Betrag
       (ein umgebrochener Preis ist keiner). Die Summenzeile
       .ppreset-posten-zeile--summe steht ueber einer Trennlinie.
       GEMESSEN bis 200px Inhaltsbreite: kein Ueberlauf, keine
       Ueberlappung, kein Betrag ausserhalb seiner Karte — die Seite
       /soforthilfe laesst dem Formular auf einem 375px-Geraet nur 233px.
     - DER ABKLAER-HINWEIS WIRD EINE ZEILE ZUM AUFKLAPPEN (GF: „dezenter
       darstellen. Nimmt zu viel Platz"): .ppreset-abklaeren als natives
       <details>. Ruhige Flaeche (--ppanfrage-surface-soft) statt
       Warngelb, aber warme Randmarke und Warnsymbol bleiben — es ist
       weiterhin ein Hinweis, nur kein Block mehr. Kontrast auf der
       Flaeche: Titel ~15:1, Text ~7,9:1, Symbol ~7,1:1 (alle ueber AA).
       Trefferflaeche min-height:44px, ::-webkit-details-marker aus
       (Safari zeigte sonst sein eigenes Dreieck zusaetzlich),
       :focus-visible sichtbar, das Aufklapp-Zeichen dreht sich mit.
       Unter 480px faellt die Text-Einrueckung weg (44px Einzug kostet
       auf 233px Inhaltsbreite jede zweite Zeile).
     - .ppreset-feld-hinweis: Erklaersatz unter einem Preset-Feld
       (hier: „Freiwillig — …" am Beschwerden-Feld).
     KEINE Aenderung an bestehenden Regeln — alle drei Bloecke sind neu
     und greifen nur, wo das Preset die zugehoerigen Bausteine mitgibt
     (Schwindel-Preset und Standardanfrage rendern sie nie; Riegel in
     test-presets.php Abschnitt 4b).
   0.8.23 · 2026-08-26
     - DEFEKT A8: In der Fortschrittsleiste der Terminanfrage standen ALLE
       acht Schrittnamen abgeschnitten ("Angab...", "Kurzfrag...", "Tagesz..."),
       und zwar bei jeder Desktop-Breite. Gemessen: die Leiste braucht 938px,
       bekommt aber nie mehr als ~926px, weil .ppanfrage-wrap bei max-width:960px
       gedeckelt ist — der Deckel ist ab rund 1000px Fensterbreite erreicht,
       darum aenderte eine breitere Anzeige nichts. Die fehlenden Pixel zahlten
       die Beschriftungen, weil sie als einzige schrumpfen duerfen.
       URSACHE: `gap: 6px` auf .ppanfrage-progress-steps reservierte 7 x 6 = 42px,
       die zusammen mit justify-content:space-between gar keinen sichtbaren
       Abstand erzeugen (der gap-Wert kuerzt sich in der Verteilung heraus).
       FIX: gap: 0 — dieselben acht Namen passen mit rund 30px Luft.
       NICHT die Ursache (geprueft und widerlegt): `flex` auf den Listenelementen
       steht bereits auf `0 1 auto`.
       UNBERUEHRT: der <=899px-Block behaelt seinen Abstand (dort gilt flex-start,
       da traegt er wirklich) — Handy-Ansicht damit unveraendert; die Leisten von
       Kurs- und Rehasport-Anmeldung ebenfalls, sie haben 216-493px Luft und
       schrumpfen nie, weshalb sich der gap dort restlos herauskuerzt.
   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).
   0.47.0: 38px -> 44px. Das war das einzige Bedienelement des ganzen
   Formulars unter der 44-px-Touch-Marke (gemessen bei 375 px: „links /
   rechts / beidseits" in den Kurzfragen-Karten). Der Chip bleibt optisch
   die kleine Variante — kleinere Schrift, engere Polsterung, runder —,
   nur die Trefferflaeche waechst. */
.ppanfrage-wrap .ppanfrage-chips--klein .ppanfrage-chip {
  min-height: 44px;
  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;
}

/* KEIN fester Abstand hier — das ist Absicht und darf nicht "aufgeraeumt" werden
   (Defekt A8, 2026-08-26): Zusammen mit justify-content:space-between verteilt der
   Browser den freien Platz ohnehin gleichmaessig auf die Luecken; der sichtbare
   Abstand ist (Breite - Summe der Punkte) / (Anzahl - 1), der gap-Wert kuerzt sich
   dabei vollstaendig heraus. Solange Platz da ist, bringt ein gap also NICHTS — und
   sobald es eng wird, nimmt er den Platz ausgerechnet den Beschriftungen weg, weil
   die als einzige schrumpfen duerfen (min-width:0 + overflow:hidden weiter unten).
   Genau das ist live passiert: Die achtstufige Terminanfrage brauchte 938px, die
   Leiste bekommt durch .ppanfrage-wrap{max-width:960px} aber nie mehr als ~926px —
   die 42px (7 Luecken x 6px) fehlten, und ALLE acht Namen standen bei JEDER
   Desktop-Breite als "Angab...", "Kurzfrag..." da. Ohne den reservierten Abstand
   passen dieselben acht Namen mit rund 30px Luft.
   Fuer schmale Fenster (<=899px) setzt der Block weiter unten bewusst wieder einen
   Abstand — dort gilt flex-start statt space-between, da traegt er wirklich. */
.ppanfrage-wrap .ppanfrage-progress-steps {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 0;
  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;
}

/* box-shadow ist seit 0.47.0 Teil der transition-Liste: der Fertig-Ring des
   Weiter-Knopfs soll einblenden statt zu springen.
   Der Hinweis steht bewusst UEBER der Regel und nicht mehr zwischen ihren
   Deklarationen — ein Kommentar innerhalb eines Blocks hat den
   Autoptimize-Minifier schon einmal die schliessende Klammer verlieren lassen
   (0.8.22, live: alles danach wurde als verschachtelte Regel gelesen und war
   wirkungslos). */
.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, box-shadow 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;
}

/* FERTIG-ZUSTAND (0.47.0, GF-Entscheid „Aktiv-Zustand + sanfte
   Hervorhebung"): Sind alle Pflichtfelder der Seite beantwortet, wechselt
   der Knopf sichtbar in einen Fertig-Zustand. Notwendig geworden, weil das
   automatische Weiterspringen seit dieser Runde nur noch bei
   Einfachauswahl greift — auf den Mehrfach-Seiten muss der Knopf selbst
   sagen, dass es jetzt weitergehen kann.
   Bewusst ruhig: kraeftigere Flaeche, heller Ring, etwas mehr Tiefe.
   KEINE Animation, KEIN Puls, KEIN Groessenwechsel — der Knopf darf das
   Layout nicht verschieben (Ring als box-shadow, nicht als border). */
.ppanfrage-wrap .ppanfrage-btn-next.is-ready {
  background: linear-gradient(135deg, var(--ppanfrage-brand-hover), #256b72);
  box-shadow: 0 0 0 3px rgba(15, 91, 99, 0.18), 0 12px 26px rgba(15, 91, 99, 0.3);
}

/* Der Wechsel blendet sanft — das ist ein Farbverlauf, keine Bewegung.
   Wer Bewegung abbestellt hat, bekommt ihn trotzdem ohne Uebergang
   (GF-Vorgabe „prefers-reduced-motion respektieren"). */
@media (prefers-reduced-motion: reduce) {
  .ppanfrage-wrap .ppanfrage-btn-next {
    transition: 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);
}

/* FERTIG-ZUSTAND JE MODUS-WELT (0.47.0)
   Die Grundregel .ppanfrage-btn-next.is-ready weiter oben hat dieselbe
   Spezifitaet (0,3,0) wie die Modus-Verlaeufe hier — und steht davor.
   Sie verlor deshalb in „Nur das Wichtigste" und „Individuelle Empfehlung"
   restlos: gemessen war der fertige Knopf dort Pixel fuer Pixel derselbe
   wie der unfertige. Genau die zwei Wege, in denen der Knopf am meisten
   gebraucht wird.
   Die Farbe ist bewusst KEINE neue: es ist der Hover-Verlauf der jeweiligen
   Welt plus einem Ring. Damit sieht „fertig" ueberall gleich aus, ohne dass
   irgendwo ein Fremdton auftaucht. */
.ppanfrage-form-area[data-modus="turbo"] .ppanfrage-btn-next.is-ready {
  background: linear-gradient(135deg, #92400e, #c2690a);
  box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.20), 0 14px 26px rgba(180, 83, 9, 0.30);
}

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

/* 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);
}

/* TOUCH-FLAECHE (0.47.1, Abnahme): Die drei Stufen-Knoepfe waren bei 375 px
   nur 25,3 px hoch — echte <button>, sichtbar auf JEDEM Schritt nach der
   Modus-Wahl, und damit die einzigen Bedienelemente, die die 44-px-Marke
   des Hauses noch rissen (0.47.0 hatte nur die Kurzfragen-Chips gemessen
   und „0 Elemente unter 44 px" gemeldet — das war falsch).
   ERSTER ANLAUF UND WARUM ER FIEL: Die Trefferflaeche ueber ein
   Pseudo-Element zu vergroessern haette Optik und Layout unveraendert
   gelassen — die Zeile darueber traegt aber overflow:hidden (sie klippt die
   eckigen Segment-Hintergruende auf die runde Pillenform), und damit war
   das Pseudo-Element abgeschnitten: 45,3 px im Rechenwert, gemessen kein
   einziger Treffer ausserhalb der 25,3 px. Deshalb waechst jetzt der Knopf
   selbst. Schriftgroesse, Farben und Trennlinien bleiben; die Pille wird
   von 27 auf 46 px hoch und liest sich als der Umschalter, der sie ist. */
.ppanfrage-wrap .ppanfrage-modus-stufe {
  min-height: 44px;
}

.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);
}

/* ------------------------------------------------------------------
   0.51.0 — Preis-Aufstellung (GF 2026-08-27: „die Preise besser/
   schoener darstellen"). Aus der langen Rechenzeile wird je Posten
   eine Zeile mit rechtsbuendigem Betrag; die Summe steht abgesetzt
   ueber einer Trennlinie. tabular-nums haelt die Betraege exakt
   untereinander, auch bei unterschiedlich breiten Ziffern.
   Mobil bricht die BEZEICHNUNG um, der Betrag bleibt geschlossen
   (min-width:0 am Text, white-space:nowrap am Betrag) — so laeuft
   auf schmalen Geraeten nichts aus der Karte heraus.

   0.51.1 — DIE KARTE MUSS SCHRUMPFEN DUERFEN. .ppanfrage-behandlung-body
   ist ein Flex-Element ohne `flex`/`min-width` und wuchs damit auf die
   Mindestbreite seines breitesten Kindes: Weil der Betrag nicht
   umbricht, war das die volle Breite von „29,60 € bis 35,60 €". Bei
   vergroesserter Schrift (WCAG 1.4.4 verlangt 200 %) sprengte die
   Aufstellung die Karte — gemessen auf 375 px bei 150 % um 17 px, bei
   200 % um 121 px. Und weil .ppanfrage-wrap `overflow-x: clip` traegt
   (bewusst, wegen des klebenden Fortschritts), entstand dabei KEIN
   Rollbalken: Die Betraege waren abgeschnitten UND unerreichbar, uebrig
   blieben nur die Bezeichnungen. `flex:1; min-width:0` erlaubt das
   Schrumpfen, `flex-wrap:wrap` laesst den Betrag im Notfall unter die
   Bezeichnung rutschen — genau der Weg, den der Fliesstext vorher
   hatte. Nachgemessen liegt der aeusserste Betrag danach bei 100 %,
   160 % UND 200 % innerhalb des Rahmens.

   Nebenwirkung, ebenfalls gewollt: Am Rechner fluchten die beiden
   Betragsspalten der nebeneinander stehenden Karten wieder (vorher
   16 px gegen 28 px Abstand zum Kartenrand), und die Trennlinie ueber
   „Gesamt" laeuft bis zum Innenrand.

   Der Selektor ist auf .ppreset-preiskarte begrenzt: Die Klasse
   .ppanfrage-behandlung-body tragen ALLE Behandlungskarten des
   Hauptformulars, und der Bestand darf sich nicht aendern.
   ------------------------------------------------------------------ */
.ppanfrage-wrap .ppreset-preiskarte .ppanfrage-behandlung-body {
  flex: 1;
  min-width: 0;
}

.ppanfrage-wrap .ppreset-posten {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  width: 100%;
}

.ppanfrage-wrap .ppreset-posten-zeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  /* Letzte Reissleine bei sehr grosser Schrift: lieber der Betrag
     unter der Bezeichnung als ein abgeschnittener Betrag (0.51.1). */
  flex-wrap: wrap;
  gap: 10px;
  padding: 4px 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ppanfrage-muted);
}

.ppanfrage-wrap .ppreset-posten-text {
  min-width: 0;
  overflow-wrap: break-word;
}

.ppanfrage-wrap .ppreset-posten-betrag {
  flex: 0 0 auto;
  /* Haelt den Betrag auch dann rechts, wenn die Zeile umbricht
     (space-between wirkt dann nicht mehr) — 0.51.1. */
  margin-left: auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--ppanfrage-text);
}

.ppanfrage-wrap .ppreset-posten-zeile--summe {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--ppanfrage-border);
  font-weight: 700;
  color: var(--ppanfrage-text);
}

.ppanfrage-wrap .ppreset-posten-zeile--summe .ppreset-posten-betrag {
  color: var(--ppanfrage-brand-deep);
}

.ppanfrage-wrap .ppreset-preis-fussnote {
  margin-top: 10px;
  font-size: 0.84rem;
  color: var(--ppanfrage-muted-soft);
}

/* ------------------------------------------------------------------
   0.51.0 — Aerztlich-abklaeren-Hinweis (GF 2026-08-27: „dezenter
   darstellen. Nimmt zu viel Platz"). Statt des gelben Kastens eine
   ruhige Zeile zum Aufklappen (natives <details>, laeuft ohne
   JavaScript). Der Hinweis bleibt als solcher erkennbar: warme
   Randmarke und Warnsymbol, aber ohne Warnflaeche.
   Kontrast auf --ppanfrage-surface-soft (#f6fafa), nachgerechnet:
   Titel --ppanfrage-text (#0e2329) 15,47:1, Text --ppanfrage-muted
   (#3a5258) 7,90:1 — beides deutlich ueber WCAG AA. (0.51.1: hier
   stand „~ 8,3:1"; die Zahl war der Beleg, den eine spaetere Runde
   liest, bevor sie den Ton anfasst — sie muss stimmen. Wacht wird
   ueber beide Werte jetzt in test-presets.php, Abschnitt 4c.)
   ------------------------------------------------------------------ */
.ppanfrage-wrap .ppreset-abklaeren {
  margin: 0 0 14px;
  background: var(--ppanfrage-surface-soft);
  border: 1px solid var(--ppanfrage-border-soft);
  border-left: 4px solid #b45309;
  border-radius: 10px;
}

.ppanfrage-wrap .ppreset-abklaeren-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  /* >= 44 px Trefferflaeche (10 + 24 + 10) */
  padding: 10px 14px;
  min-height: 44px;
  box-sizing: border-box;
  cursor: pointer;
  list-style: none;
  color: var(--ppanfrage-text);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.4;
}

/* Safari/iOS zeigt sonst das eigene Dreieck zusaetzlich */
.ppanfrage-wrap .ppreset-abklaeren-zeile::-webkit-details-marker {
  display: none;
}

.ppanfrage-wrap .ppreset-abklaeren-zeile svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: #8a4008;
}

.ppanfrage-wrap .ppreset-abklaeren-titel {
  min-width: 0;
  overflow-wrap: break-word;
}

/* Aufklapp-Zeichen rechts, dreht sich beim Oeffnen */
.ppanfrage-wrap .ppreset-abklaeren-titel::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 8px;
  vertical-align: middle;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  opacity: 0.6;
}

.ppanfrage-wrap .ppreset-abklaeren[open] .ppreset-abklaeren-titel::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.ppanfrage-wrap .ppreset-abklaeren-zeile:focus-visible {
  outline: 3px solid var(--ppanfrage-brand);
  outline-offset: 2px;
  border-radius: 8px;
}

.ppanfrage-wrap .ppreset-abklaeren-text {
  margin: 0;
  padding: 0 14px 12px 44px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ppanfrage-muted);
}

@media (max-width: 480px) {
  .ppanfrage-wrap .ppreset-abklaeren-text {
    padding-left: 14px;
  }
}

/* Erklaersatz unter einem Preset-Feld (0.51.0, z. B. „freiwillig") */
.ppanfrage-wrap .ppreset-feld-hinweis {
  margin-top: 6px;
}

/* 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; }
}