/* ============================================================
   Werkstatt-Buchung NEU — Testflaeche (Faden 435)
   ------------------------------------------------------------
   ERGAENZT `bgpt-embed-base.css`, ersetzt es nicht. Layout, Knoepfe,
   Felder, Kalender, Fortschritt und „Gut zu wissen" kommen aus dem
   Haus-CSS (Bernd 09.09.: „bitte an unser css halten wie vorher").
   Hier steht nur, was es dort noch nicht gibt.
   ============================================================ */

/* ------------------------------------------------------------
   ZUERST: `hidden` muss gewinnen.
   Der erste Wurf hatte `.wb-zustimmung { display: flex }` — ein
   Klassen-Selektor schlaegt die Browser-Regel `[hidden]{display:none}`.
   Folge: vier leere Kaestchen standen dauerhaft sichtbar da, in
   Schritt 1 und Schritt 3 (Bernds Punkt 3 vom 09.09.: „wofür ist der
   haken auf der 1. seite?"). Diese Regel schliesst die Klasse aus
   Versehen fuer alle kuenftigen Faelle mit ein.
   ------------------------------------------------------------ */
[hidden] { display: none !important; }

.wb-testband {
    background: var(--bgpt-warning-bg, #fff3cd);
    border-bottom: 1px solid #e8d9a0;
    color: var(--bgpt-warning, #856404);
    font-size: 13px;
    padding: 10px 16px;
    text-align: center;
}

.wb-buehne { max-width: 560px; margin: 0 auto; padding: 24px 16px 64px; }
.wb-schritt { padding-bottom: 8px; }
.wb-breit { display: block; width: 100%; }

/* ---------- Die vier Karten ---------- */
.wb-karten { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }

.wb-karte {
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid var(--bgpt-bk-border, #e0e0e0);
    border-radius: var(--bgpt-bk-radius, 8px);
    padding: 16px 48px 16px 16px;
    cursor: pointer;
    font-family: inherit;
    font-size: 16px;
    color: var(--bgpt-bk-text, #333);
}
.wb-karte:hover { border-color: var(--bgpt-bk-primary, #333); }

/* Nicht nur Farbe: die gewaehlte Karte traegt zusaetzlich fette Schrift
   und eine dickere Kante (Bernd hat eine Rot-Gruen-Schwaeche, §0). */
.wb-karte.selected {
    border-color: var(--bgpt-bk-primary, #333);
    border-width: 2px;
    background: var(--bgpt-bk-surface, #f8f9fa);
    font-weight: 600;
}

.wb-karte__titel { display: block; }
.wb-karte__satz { display: block; font-size: 13px; font-weight: 400; color: var(--bgpt-text-muted, #666); margin-top: 3px; }

/* Das (i) oben rechts — Klick oder Tastatur klappt die Beschreibung auf. */
.wb-karte__info {
    position: absolute;
    top: 12px; right: 12px;
    width: 24px; height: 24px;
    border-radius: 50%;
    border: 1px solid var(--bgpt-bk-border, #e0e0e0);
    background: #fff;
    color: var(--bgpt-text-muted, #666);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.wb-karte__info:hover,
.wb-karte__info[aria-expanded="true"] {
    border-color: var(--bgpt-bk-primary, #333);
    color: var(--bgpt-bk-primary, #333);
}

.wb-karte__beschreibung {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--bgpt-bk-border, #e0e0e0);
    font-size: 14px;
    font-weight: 400;
    color: var(--bgpt-text-muted, #666);
}
/* Gepflegter Ladentext, von `liste()` gebaut — Beschreibung, Zusatztext,
   Leistungs-Hinweis und Slot-Warnung. Die Regeln hängen am ERZEUGER, nicht
   an einer seiner Flächen: vorher standen sie unter `.wb-karte__beschreibung`,
   und als derselbe Bau auch den Warnhinweis trug, fiel dort die Einrückung
   der Liste und die Leerzeile weg (Codex-P2 zu #2779). Eine Regel je Sache,
   an der Stelle, die die Sache herstellt. */
.wb-fliess ul { margin: 0; padding-left: 18px; }
.wb-fliess li { margin-bottom: 4px; }
/* Absatz ohne Punkt (Bernd 16.09.): Zeilen ohne führenden Strich sind kein
   Aufzählungspunkt, sondern Text — etwa die Zwischenüberschrift „Preis:".
   Der Abstand nach oben trennt sie von der Liste darüber, nach unten bleibt
   er klein, damit Überschrift und zugehöriger Satz zusammengehören. */
.wb-karte__absatz { margin: 10px 0 2px; }
.wb-karte__absatz:first-child { margin-top: 0; }
.wb-karte__absatz + .wb-karte__absatz { margin-top: 2px; }
/* Leerzeile im Einstellungsfeld (Bernd 17.09.): wer dort eine Zeile frei
   lässt, bekommt genau dort mehr Luft — als Abstand am folgenden Element,
   nicht als leerer Absatz dazwischen. */
.wb-fliess .wb-karte__luft { margin-top: 14px; }

/* ---------- Fortschrittsleiste ----------
   Das Haus-CSS macht daraus drei 4-Pixel-Balken. Weil es eine <ol> ist,
   stellte der Browser seine Aufzaehlungszeichen daneben — „1. 2. 3.", die bei
   jedem Schrittwechsel mitsprangen (Bernd 09.09.). */
.bgpt-progress { list-style: none; padding-left: 0; }
.bgpt-progress-step::marker { content: none; }

/* ---------- Login-Zeile ----------
   Eine Zeile, kein Kasten: die Kontowahl VOR der ersten Frage kostet gemessen
   61 % der Sitzungen. Wer schon Kunde ist, findet sie trotzdem sofort. */
.wb-login {
    margin: 0 0 14px;
    font-size: 14px;
    color: var(--c-muted, #666);
    text-align: center;
}
.wb-login--wartet { font-style: italic; }
.wb-login__knopf {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--c-link, #2f6fb5);
    text-decoration: underline;
    cursor: pointer;
}

/* ---------- Rueckfragen auf Schritt 1 ----------
   Es sind nur noch zwei: „bei uns gekauft?" bei der Garantie und der Umfang
   beim Schnellservice. Alles andere entscheidet die Karte selbst. */
.wb-frage {
    background: var(--c-bg-alt, #f8f9fa);
    border-radius: var(--radius-card, 8px);
    padding: 16px;
    margin-bottom: 20px;
}

/* Zwei kurze Fragen hintereinander („bei uns gekauft?" und „was für ein Rad?")
   ergaben zwei schwere graue Kaesten untereinander — fuer je zwei Knoepfe zu
   viel Rahmen (Bernd 09.09.: „Darstellung mit beiden untereinander ... mhhh").
   Ohne Kasten, mit engerem Abstand: die Frage traegt sich selbst. */
.wb-frage--schlank {
    background: none;
    padding: 0;
    margin-bottom: 16px;
}
.wb-frage--schlank .bgpt-section-title { margin-bottom: 2px; }
.wb-frage--schlank + .wb-frage--schlank { margin-top: -4px; }
.wb-frage__hinweis {
    margin: 10px 0 0;
    font-size: 14px;
    color: var(--c-muted, #666);
}
/* Nur der Kasten, kein Balken links (Bernd 10.09.: „bitte links die
   Markierung rausnehmen - einfach nur den Kasten"). Der gelbe Grund traegt
   den Hinweis schon; der Strich machte daraus ein zweites Signal. */
.wb-frage__hinweis--warnung {
    color: var(--bgpt-bk-text, #333);
    background: #fff8e1;
    padding: 10px 12px;
    border-radius: 4px;
}

/* ---------- Radio-Knoepfe ----------
   Sichtbar statt im Aufklapp-Menue (Bernd 09.09.): was man nicht sieht,
   waehlt man nicht — und hier haengt die Arbeitszeit dran. */
.wb-radios { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }

.wb-radio {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--c-bg, #fff);
    border: 1px solid var(--c-line, #e0e0e0);
    border-radius: var(--radius-card, 6px);
    padding: 13px 14px;
    cursor: pointer;
}
.wb-radio:hover { border-color: var(--c-link, #333); }
.wb-radio:has(input:checked) {
    border-color: var(--c-link, #333);
    box-shadow: inset 0 0 0 1px var(--c-link, #333);
}
.wb-radio input { margin: 2px 0 0; width: 18px; height: 18px; flex: none; accent-color: var(--c-link, #333); }
.wb-radio__text { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.wb-radio__zusatz { font-size: 13px; color: var(--c-muted, #666); }

/* ---------- Haken fuer E-Bike und „bei uns gekauft" ----------
   Haken statt Schalter, weil beides gleichzeitig gelten darf (Bernd 09.09.:
   „man kann beides haben!"). Als Toggle-Paar sah es aus wie entweder-oder. */
.wb-haken-gruppe { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }

.wb-haken {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid var(--c-line, #e0e0e0);
    border-radius: var(--radius-card, 6px);
    padding: 13px 14px;
    cursor: pointer;
}
.wb-haken:has(input:checked) {
    border-color: var(--c-link, #333);
    box-shadow: inset 0 0 0 1px var(--c-link, #333);
}
.wb-haken input { margin: 2px 0 0; width: 20px; height: 20px; flex: none; accent-color: var(--c-link, #333); }
/* Der Kontaktweg ist ein Entweder-oder und nutzt dieselbe Optik — Radio
   statt Haken, sonst identisch (Bernd 09.09.). */
.wb-haken input[type="radio"] { border-radius: 50%; }
.wb-haken__text { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.wb-haken__text span { font-size: 13px; color: var(--c-muted, #666); }

/* ---------- Terminvorschlag ---------- */
.wb-vorschlag {
    background: var(--bgpt-bk-surface, #f8f9fa);
    border: 1px solid var(--bgpt-bk-border, #e0e0e0);
    border-radius: var(--bgpt-bk-radius, 8px);
    padding: 20px;
    text-align: center;
}
.wb-vorschlag__kopf { font-size: 13px; color: var(--bgpt-text-muted, #666); text-transform: uppercase; letter-spacing: .04em; }
.wb-vorschlag__termin { font-size: 21px; font-weight: 500; margin: 6px 0 2px; }
.wb-vorschlag__slot { font-size: 14px; color: var(--bgpt-text-muted, #666); margin-bottom: 16px; }
.wb-kalender { margin-top: 16px; }

/* ---------- Defektfotos ---------- */
.wb-foto {
    border: 1px dashed var(--bgpt-bk-primary, #333);
    border-radius: var(--bgpt-bk-radius, 8px);
    padding: 16px;
    margin-bottom: 20px;
    text-align: center;
}
/* Der Knopf ist ein `<label>` mit Knopf-Optik und erbt aus dem Haus-CSS
   `display: inline-flex` samt 24 px Seitenpolster. In der schmalen rechten
   Spalte wurde er dadurch breiter als sein gestrichelter Rahmen und ragte
   sichtbar heraus (Bernd 15.09.).

   ZWEITER ANLAUF (Bernd 16.09.: „ist immer noch defekt"). Die Breite allein
   reichte nicht: in der Testumgebung passte „Fotos auswählen" auf den Pixel
   genau — 137 von 137 verfügbaren —, auf LIVE mit der Montserrat nicht mehr.

   DRITTER ANLAUF, UND HIER LAG DER EIGENTLICHE FEHLER (Codex-P2 zu #2689):
   Diese Datei laedt VOR `web/erfahre-embed.css`, und die setzt auf `.bgpt-btn`
   `display: inline-flex !important`, `white-space: nowrap !important` und
   `padding: 0 22px !important`. Im Browser nachgemessen: von meinen Regeln
   wirkte KEINE EINZIGE — der Knopf stand weiter auf inline-flex, nowrap und
   22 px Polster. Gewirkt hatte allein die kuerzere Beschriftung im Markup.

   Deshalb `!important`: nicht aus Bequemlichkeit, sondern weil die spaeter
   geladene Datei jede dieser vier Eigenschaften selbst so setzt. Ohne das
   waere die Reparatur nur eine Behauptung im Stylesheet. */
.wb-foto .bgpt-btn {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    text-align: center;
}

/* „Fotos?" ist seit dem 16.09. eine Ueberschrift UEBER dem Kasten; hier
   steht nur noch der erklaerende Satz. */
.wb-foto__text {
    display: block;
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--bgpt-text-muted, #666);
}
.wb-foto__liste { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.wb-foto__bild { width: 72px; height: 72px; object-fit: cover; border-radius: var(--bgpt-bk-radius-sm, 5px); border: 1px solid var(--bgpt-bk-border, #e0e0e0); }
.wb-foto__status { margin-top: 12px; font-size: 14px; }
.wb-foto__status.is-fehler { color: var(--bgpt-danger, #dc3545); }

/* ---------- Felder und Bloecke ---------- */
.wb-paar { display: flex; gap: 12px; }
.wb-paar .bgpt-form-group { flex: 1; }
.wb-schmal { max-width: 120px; }

.wb-mehr { margin-bottom: 20px; }
.wb-mehr summary { cursor: pointer; font-size: 14px; color: var(--bgpt-bk-primary, #333); padding: 8px 0; }
.wb-mehr[open] summary { margin-bottom: 12px; }

.wb-preis { background: var(--bgpt-bk-surface, #f8f9fa); border-radius: var(--bgpt-bk-radius, 8px); padding: 14px 16px; margin-bottom: 20px; }
.wb-preis__zeile { display: flex; justify-content: space-between; align-items: baseline; font-size: 16px; }
.wb-preis__zeile strong { font-size: 20px; font-weight: 600; }
.wb-preis__schutz {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--bgpt-bk-text, #333);
    background: #fff8e1;
    border-left: 3px solid #f0b429;
    padding: 9px 11px;
    border-radius: 4px;
}
.wb-preis__fuss { font-size: 13px; color: var(--bgpt-text-muted, #666); margin-top: 6px; }
.wb-fuss { font-size: 13px; color: var(--bgpt-text-muted, #666); margin-top: 6px; }

/* SCHRITT 3 IN BLOECKEN (Bernd 16.09.: „in blöcke ... damit man es optisch
   besser erfassen kann"). Der Schritt war eine einzige lange Spalte: Name,
   Adresse, Kontaktweg, Notiz, Fotos, Budget, Zusammenfassung, Hinweise und
   vier Haken hintereinander weg, alles gleich gewichtet. Vier Themen, vier
   Kaesten — dieselbe Optik wie die Kurzfassung darueber (`.wb-kurz`), damit
   kein zweites Kastenmuster entsteht. */
.wb-block {
    background: var(--c-bg, #fff);
    border: 1px solid var(--c-line, #e0e0e0);
    border-radius: var(--bgpt-bk-radius, 8px);
    padding: 16px;
    margin-bottom: 16px;
}
.wb-block__titel {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 14px;
    color: var(--bgpt-bk-text, #333);
}

/* ABWECHSELND GRAU (Bernd 16.09.: „eins weiss, eins grau, eins weiss, eins
   grau ... dann sieht man, da beginnt ein neues Card"). Vier gleich weisse
   Kaesten mit duennem Rand liefen ineinander — der Rand allein trennt zu
   leise. Grau sind der erste und der dritte; das steht im Markup und nicht
   als `nth-child`-Regel, weil zwischen den Bloecken noch anderes liegen kann
   und ein fuenfter Block eine Entscheidung braucht, kein automatisches
   Umklappen.

   Der Ton ist absichtlich HELLER als der Angemeldet-Kasten oben (Bernd:
   „nicht dieses ganz dunkle Grau von oben ... einfach nur so ein bisschen").
   Gemischt statt fest gesetzt: so folgt er dem Theme des Ladens, eine zweite
   Farbkonstante waere beim naechsten Theme-Wechsel sofort falsch. */
.wb-block--grau {
    background: color-mix(in srgb, var(--c-bg-alt, #f5f5f7) 55%, var(--c-bg, #fff));
}

/* KEIN KASTEN IM KASTEN: Zusammenfassung, „Gut zu wissen" und die
   Daten-Kurzfassung bringen eigene Flaechen mit, die im Block nur noch Rahmen
   auf Rahmen waeren. Im Block legen sie sie ab; ausserhalb (anderer Flow,
   anderes Embed) bleiben sie.

   Die Kurzfassung war der uebersehene Fall (Codex-P2 zu #2689): sie ist beim
   Gast versteckt, beim ANGEMELDETEN Kunden aber genau das, was im neuen Block
   steht — also bei dem, der die Seite am haeufigsten sieht. Nachgemessen:
   weisser Grund, 1 px Rahmen, 14 px Polster, mitten im Block. */
.wb-block .wb-zusammenfassung,
.wb-block .wb-kurz,
.wb-block .bgpt-bk-good-to-know {
    background: none !important;
    border: none !important;
    border-radius: 0;
    padding: 0;
    margin: 0;
}
/* Beide im selben Block: eine Linie dazwischen statt zwei Kaesten. */
.wb-block .wb-zusammenfassung + .bgpt-bk-good-to-know {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--c-line, #e0e0e0) !important;
}

/* Im grauen Block bekommt „Gut zu wissen" seine Flaeche zurueck — weiss auf
   grau (Bernd 16.09.: „gut zu wissen faellt so ein bisschen ab ... dann ist
   das wieder weiss in grau hinterlegt, damit das wirklich nochmal
   hervorkommt"). Auf weissem Grund war die Regel oben richtig: dort waere es
   Rahmen auf Rahmen gewesen. Auf grauem Grund ist genau umgekehrt richtig —
   der weisse Kasten HEBT sich ab, statt einen zweiten Rahmen zu bauen.
   Deshalb faellt hier auch die Trennlinie weg: die Kante des Kastens trennt
   schon. */
.wb-block--grau .bgpt-bk-good-to-know {
    background: var(--c-bg, #fff) !important;
    border-radius: var(--bgpt-bk-radius, 8px);
    padding: 14px 16px !important;
}
.wb-block--grau .wb-zusammenfassung + .bgpt-bk-good-to-know {
    margin-top: 14px !important;
    padding-top: 14px !important;
    border-top: none !important;
}

/* Die Arbeitszeit ist die Zahl, auf die es ankommt (Bernd 16.09.: „das ruhig
   in Fett, dass es da nochmal deutlicher zu sehen ist"). Sie stand in
   derselben Schrift wie Leistung, Termin und Abgabe. */
.wb-zusammenfassung dd.wb-zusammenfassung__betrag { font-weight: 700; }

/* Ein neuer Abschnitt, kein weiterer Absatz der Anschrift (Bernd 16.09.:
   „da muss ein bisschen mehr Luft"). Ueber der Frage stehen Name, Mail und
   Adresse dicht gestapelt; `.bgpt-form-group` bringt nur Abstand nach UNTEN
   mit, oben stiess die Frage direkt an. */
.wb-kontaktweg-feld { margin-top: 22px; }

/* Der letzte Block traegt Haken und Knopf — die Navigation sitzt darin und
   braucht unten keinen zweiten Abstand. */
.wb-block--buchen .bgpt-nav { margin-bottom: 0; }
.wb-block--buchen .wb-zustimmungen { margin-top: 0; }

/* Der Abschluss ist kein Formular mehr, sondern ein Satz und ein Knopf
   (Bernd 20.09.): kein Kasten um den Kasten, kein Rahmen um den einen
   Haken, keine Ueberschrift ueber zwei Zeilen. */
.wb-block--buchen { border: none; padding: 0; background: none; }
.wb-haken--schlank { border: none; padding: 0; }
.wb-haken--schlank:has(input:checked) { border: none; box-shadow: none; }

.wb-optional { margin: 24px 0; }

.wb-zusammenfassung { background: var(--bgpt-bk-surface, #f8f9fa); border-radius: var(--bgpt-bk-radius, 8px); padding: 14px 16px; margin-bottom: 16px; font-size: 15px; }
.wb-zusammenfassung dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; }
.wb-zusammenfassung dt { color: var(--bgpt-text-muted, #666); font-size: 14px; }
.wb-zusammenfassung dd { margin: 0; }

.wb-zustimmungen { margin: 16px 0 20px; }
.wb-haken { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; margin-bottom: 12px; cursor: pointer; }

.wb-hinweis { margin-bottom: 20px; }
.wb-hinweis__haken { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: 14px; cursor: pointer; }

.wb-fehler { margin-bottom: 16px; }

.wb-konto { background: var(--bgpt-bk-surface, #f8f9fa); border-radius: var(--bgpt-bk-radius, 8px); padding: 18px; margin-top: 24px; }
.wb-konto p { font-size: 14px; color: var(--bgpt-text-muted, #666); margin: 6px 0 14px; }

.wb-fertig__termin { font-size: 19px; font-weight: 500; margin-bottom: 8px; }

@media (max-width: 420px) {
    .wb-paar { flex-direction: column; gap: 0; }
    .wb-schmal { max-width: none; }
}

/* ---------- Radtyp-Raster ----------
   Sechs Knoepfe statt eines Aufklapp-Menues (Bernd 09.09.: „geht schneller vor
   allem mobil. dropdowns kosten unnötig zeit"). Am Radtyp haengt der Preis —
   er ist keine Nebensache, die man aufklappen muss. */
.wb-raster {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
@media (min-width: 480px) {
    .wb-raster { grid-template-columns: repeat(3, 1fr); }
}
.wb-raster.is-fehler { outline: 2px solid var(--bgpt-danger, #dc3545); outline-offset: 4px; border-radius: 8px; }

.wb-raster__feld {
    background: var(--c-bg, #fff);
    border: 1px solid var(--c-line, #e0e0e0);
    border-radius: var(--radius-card, 8px);
    padding: 14px 8px;
    font: inherit;
    font-size: 15px;
    color: var(--c-text, #333);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.wb-raster__feld:hover { border-color: var(--c-link, #333); }
.wb-raster__feld.selected {
    border-color: var(--c-link, #333);
    box-shadow: inset 0 0 0 1px var(--c-link, #333);
    font-weight: 600;
}

/* ---------- Abgabe-Karten ----------
   Dieselben Karten wie im Live-Embed, samt Sonne und Mond (Bernd 09.09.:
   „hier bitte auch die kleinen svg icons beibehalten wie bisher"). Bei der
   Vortag-Abgabe steht der ABGABETAG darunter — er ist nicht der Termintag,
   und genau darauf kommt es an. */
.bgpt-bk-slot-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}
.bgpt-bk-slot-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: var(--c-bg, #fff);
    border: 1.5px solid var(--c-line, #e0e0e0);
    border-radius: var(--radius-card, 8px);
    padding: 16px 12px;
    font: inherit;
    color: var(--c-text, #333);
    cursor: pointer;
    text-align: center;
    transition: border-color .2s, transform .2s;
}
.bgpt-bk-slot-card:hover { border-color: var(--c-link, #333); transform: translateY(-1px); }
.bgpt-bk-slot-card.selected {
    border-color: var(--c-link, #333);
    box-shadow: inset 0 0 0 1px var(--c-link, #333);
}
.bgpt-bk-slot-icon { line-height: 0; color: var(--c-link, #333); }
.bgpt-bk-slot-name { font-weight: 500; font-size: 14px; }
.bgpt-bk-slot-hint { font-size: 12px; color: var(--c-muted, #666); }

/* ---------- Garantie-Abwicklung ----------
   Steht in Schritt 2, weil sie an der Marke haengt: Rechnung, eigene Nummern
   oder Vorab-Freigabe — welcher Weg gilt, sagt die Marken-Konfiguration. */
.wb-garantie {
    background: var(--c-bg-alt, #f8f9fa);
    border-radius: var(--radius-card, 8px);
    padding: 16px;
    margin-bottom: 20px;
}
.wb-garantie .bgpt-form-group:last-child { margin-bottom: 0; }
.wb-garantie .wb-haken { background: var(--c-bg, #fff); }

/* ---------- Schaltflaechen-Paare (Radgroesse, Herkunft) ----------
   Das Haus-CSS gibt `.bgpt-toggle-option` gar keinen Grund — ein `<button>`
   ohne `background` faellt auf die Browser-Vorgabe `buttonface` zurueck, und
   die ist grau. Beim Auswaehlen aendert sich nur die Randfarbe, auf grauem
   Grund sieht man das nicht; der Knopf wirkte, als klemme er (Bernd 09.09.).
   Dieselbe Optik wie das Radtyp-Raster und die Haken: heller Grund,
   deutlicher Zustand.

   OHNE `.bgpt-toggle-group` DAVOR, und das ist der Kern (Bernd 16.09.: „die
   Dropdowns sollen nicht in Grau sein, sondern in Weiss ... so wie wir das
   immer mit allen Buttons haben"). Die Regel hing frueher am Container. Seit
   die Radwahl eingeloggt in `.wb-radwahl` steht (Knopf, darunter SEINE
   Liste), griff sie dort nicht mehr — und genau diese zwei Knoepfe wurden
   grau. Wie ein Knopf aussieht, darf nicht davon abhaengen, in welchem
   Kasten er haengt. Diese Datei laedt nur auf dieser Seite, die Regel gilt
   also fuer alle Toggle-Knoepfe der Buchungsstrecke — gewollt. */
.bgpt-toggle-option {
    background: var(--c-bg, #fff) !important;
    border: 1px solid var(--c-line, #e0e0e0) !important;
    border-radius: var(--radius-card, 8px) !important;
    color: var(--c-text, #333) !important;
    padding: 14px 12px !important;
}
.bgpt-toggle-option:hover { border-color: var(--c-link, #333) !important; }
.bgpt-toggle-option.active {
    border-color: var(--c-link, #333) !important;
    box-shadow: inset 0 0 0 1px var(--c-link, #333);
    font-weight: 600 !important;
}

/* Der Fusshinweis unter dem Kalender — ein ganzer Satz, kein Chip im Tag. */
.wb-kalender__fuss {
    margin: 10px 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--c-muted, #666);
}

/* ---------- Abstaende zwischen gestapelten Schaltflaechen ----------
   „Passt" und „Anderen Termin waehlen" lagen im Vorschlagskasten auf 0 px
   aneinander — im Browser gemessen (Bernd 09.09.: „die Buttons klemmen noch
   aneinander"). Zwei Schaltflaechen ohne Luft dazwischen liest man als eine. */
.wb-vorschlag .wb-breit + .wb-breit { margin-top: 10px; }
.wb-kalender .wb-breit { margin-top: 16px; }

/* Die Radgroesse hatte 10 px — auf dem Handy zu wenig, um die Knoepfe
   auseinanderzuhalten. */
.bgpt-toggle-group { gap: 12px !important; }

/* ---------- Anmeldung ---------- */
.wb-anmeldung { margin-bottom: 20px; }
.wb-anmeldung .bgpt-form-group { margin-bottom: 12px; }

/* Ohne Farbbalken links (Bernd 14.09.: „diese Markierung bitte weg") —
   ein ruhiger Kasten, keine Hervorhebung. */
.wb-angemeldet {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--c-bg-alt, #f0f7f0);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--c-text, #333);
}


/* ---------- Runde 8 (Bernd 10.09.) ---------- */

/* Zwei Knoepfe in einer Zeile — Kontaktweg, Leasing/Versicherung.
   Sie erben die Toggle-Optik; hier steht nur, dass sie sich die Breite
   teilen und ein abgeschalteter Knopf auch so aussieht. */
.wb-zweiwahl .bgpt-toggle-option {
    flex: 1 1 0;
    justify-content: center;
    text-align: center;
}
.wb-zweiwahl .bgpt-toggle-option[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

/* Vier Budget-Knoepfe: auf dem Handy zwei Reihen statt vier Spalten, sonst
   wird jeder Knopf schmaler als sein Text. */
.wb-budget {
    flex-wrap: wrap;
}
.wb-budget .bgpt-toggle-option {
    flex: 1 1 calc(50% - 12px);
    justify-content: center;
    text-align: center;
}
@media (min-width: 560px) {
    .wb-budget .bgpt-toggle-option { flex: 1 1 0; }
}

/* „Das solltet ihr wissen" und die Fotos nebeneinander, 2/3 zu 1/3
   (Bernd 10.09.). Auf dem Handy untereinander — daneben waere beides zu
   schmal zum Tippen.

   BEIDE KAESTEN EXAKT GLEICH GROSS (Bernd 16.09.: „fangen an der gleichen
   Stelle oben an und hoeren an der gleichen Stelle unten auf"). Vorher stand
   hier `align-items: start`: jede Spalte war so hoch wie ihr eigener Inhalt,
   und die Ueberschrift steckte beim Foto IM Kasten statt darueber — also
   begannen die Kaesten schon oben auf verschiedener Hoehe.

   Der Trick sind zwei Rasterzeilen statt zwei Spalten-Kaesten: die Spalten
   loesen sich mit `display: contents` auf, Beschriftung und Kasten werden
   selbst zu Rasterfeldern. Zeile 1 (`auto`) traegt beide Beschriftungen und
   ist so hoch wie die laengere — deshalb beginnen beide Kaesten auf den
   Pixel gleich, auch wenn „Das solltet ihr noch ueber mein Rad wissen"
   umbricht und „Fotos?" nicht. Zeile 2 (`1fr`) traegt beide Kaesten; sie
   nehmen die Hoehe des groesseren an und enden damit gleich.

   Zwei feste Hoehen nebeneinander zu schreiben waere der naheliegende Weg
   und der falsche: er haelt nur, solange Schrift, Sprache und Textlaenge so
   bleiben wie heute. */
.wb-sagen {
    display: grid;
    gap: 12px;
    margin-bottom: 16px;
}
@media (min-width: 640px) {
    .wb-sagen {
        grid-template-columns: 2fr 1fr;
        grid-template-rows: auto 1fr;
        column-gap: 12px;
        /* Kein Zeilenabstand: den Abstand zwischen Beschriftung und Kasten
           setzt `.bgpt-label` selbst (6 px) — und zwar fuer beide gleich. */
        row-gap: 0;
    }
    /* Die Spalte verschwindet als Kasten, ihre zwei Kinder werden zu
       Rasterfeldern. Auf dem Handy bleibt sie ein normaler Block, dort
       stehen die beiden Bloecke ohnehin untereinander. */
    .wb-sagen__spalte { display: contents; }

    /* Jedes Feld bekommt seinen Platz GENANNT. Ohne das fuellt das Raster
       zeilenweise auf — im Browser nachgemessen landeten dann die
       Beschriftung links und das Textfeld NEBENEINANDER in der ersten Zeile.
       Vier Felder, vier Adressen, keine Reihenfolgen-Magie. */
    .wb-sagen__spalte:nth-of-type(1) > * { grid-column: 1; }
    .wb-sagen__spalte:nth-of-type(2) > * { grid-column: 2; }
    .wb-sagen .bgpt-label { grid-row: 1; }
    .wb-sagen__feld { grid-row: 2; }
}
/* `min-width: 0` ist hier Pflicht: Rasterspalten sind von Haus aus so breit
   wie ihr Inhalt (`min-width: auto`), und der Foto-Knopf sprengte damit sein
   Drittel — gemessen 317/203 statt 347/173. */
.wb-sagen__spalte { margin-bottom: 0; min-width: 0; }
.wb-sagen .bgpt-label { min-width: 0; }

/* Der Kasten fuellt sein Rasterfeld ganz aus — das ist die eine Stelle, an
   der die gleiche Groesse entsteht. `box-sizing` muss stimmen, sonst zaehlt
   beim Foto-Kasten der gestrichelte Rand obendrauf und er waere 2 px hoeher. */
.wb-sagen__feld {
    margin: 0 !important;
    height: 100% !important;
    box-sizing: border-box !important;
    min-width: 0;
}

/* Der Fehlertext-Kasten hat eine feste Groesse (Bernd 16.09.: „den kann man
   nicht manuell in der Groesse veraendern"). Das Haus-CSS erlaubt
   `resize: vertical` — damit koennte der Kunde die beiden Kaesten mit einem
   Zug wieder ungleich machen. */
textarea.wb-sagen__feld {
    resize: none !important;
    min-height: 0 !important;
}

/* Der Inhalt sitzt mittig in der Hoehe, die ihm das Raster gibt — sonst
   klebte er am oberen Rand, sobald der Textkasten der hoehere ist. */
.wb-sagen .wb-foto {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Vorschlagsliste unter Marke und Modell. Sie liegt UEBER dem Folgefeld,
   deshalb absolut positioniert — sonst schoebe jeder Tastendruck das halbe
   Formular nach unten. */
.wb-vorschlagfeld { position: relative; }
.wb-vorschlagliste {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
    max-height: 240px;
    overflow-y: auto;
    background: var(--c-bg, #fff);
    border: 1px solid var(--c-line, #e0e0e0);
    border-radius: var(--radius-card, 8px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
}
.wb-vorschlag-eintrag {
    padding: 10px 12px;
    cursor: pointer;
    font-size: 14px;
}
.wb-vorschlag-eintrag:hover,
.wb-vorschlag-eintrag:focus {
    background: var(--c-bg-alt, #f8f9fa);
}
/* Der Firmenname hinter dem Anzeigenamen — erscheint NUR, wenn der Treffer
   ueber ihn zustande kam (Bernd 18.09.: „nur wenn jemand das wirklich
   sucht"). Deshalb leiser und kleiner: er erklaert den Treffer, er ist nicht
   die Antwort. */
.wb-vorschlag-firma {
    margin-left: 8px;
    font-size: 12px;
    color: var(--c-muted, #666);
}

/* Das (i) zur Pruefgebuehr: Teil des Preis-Kastens, eine Stufe leiser. */
.wb-preis__warum { margin-top: 8px; font-size: 13px; color: var(--c-muted, #666); }
.wb-preis__warum summary { cursor: pointer; color: var(--c-link, #333); }
.wb-preis__warum p { margin: 6px 0 0; }

/* ---------- Radwahl: Knopf, darunter SEINE Liste (Bernd 15.09.) ----------
   Eingeloggt stehen zwei Knöpfe untereinander, und die Liste gehört unter den
   Knopf, der sie geöffnet hat — nicht unter beide. Deshalb hier eine eigene
   Spalte statt der Toggle-Gruppe: in einer Flex-Zeile säße die Liste neben
   den Knöpfen statt darunter. */
.wb-radwahl { display: flex; flex-direction: column; gap: 12px; }
.wb-radwahl__block { display: flex; flex-direction: column; }
.wb-radwahl__block .bgpt-toggle-option { width: 100%; justify-content: flex-start; }

/* Das gewählte Rad in Schritt 2: Name links, „Ändern" rechts. */
.wb-radwahl__gewaehlt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--c-bg, #fff);
    border: 1px solid var(--c-line, #e0e0e0);
    border-radius: var(--radius-card, 8px);
    padding: 14px 16px;
}
.wb-radwahl__name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wb-radwahl__typ { display: block; font-size: 13px; color: var(--c-muted, #666); }

/* Die Merkmale des Rades als eigene Zeilen (Bernd 19.09.: „E-Bike ja nein
   gerne mit SVG-Icon grüner Haken und rotes x … schlicht aber gut sichtbar mit
   Zeilenumbruch"). Vorher stand alles in einer Zeile als „E-Bike: Ja · Bei uns
   gekauft: Nein" — lesbar erst beim zweiten Hinsehen.

   DAS ZEICHEN TRÄGT DIE AUSSAGE, nicht die Farbe: Haken und Kreuz sind auch
   ohne Farbe zu unterscheiden. */
.wb-merkmal {
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.7;
}
.wb-merkmal__zeichen {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
}
.wb-merkmal__zeichen--ja { color: var(--bgpt-success, #2d5a2d); }
.wb-merkmal__zeichen--nein { color: var(--bgpt-danger, #dc3545); }

/* ---------- Kurzfassung statt Formular (Bernd 15.09.) ----------
   Wer angemeldet ist, hat seine Daten schon hinterlegt. Ein ausgefülltes
   Formular ist dann nur eine Wand; hier steht, was wir wissen, und die Felder
   kommen erst auf „Bearbeiten". Dieselbe Zeile trägt Rad und Anschrift. */
.wb-kurz {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    background: var(--c-bg, #fff);
    border: 1px solid var(--c-line, #e0e0e0);
    border-radius: var(--radius-card, 8px);
    padding: 14px 16px;
    margin-bottom: 20px;
}
.wb-kurz__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wb-kurz__text span { font-size: 13px; color: var(--c-muted, #666); }
.wb-kurz__wege { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }

/* Die Nebenwege sind Text, keine zweite Knopfreihe neben dem Inhalt. */
.wb-kurz__aendern,
.wb-radwahl__aendern,
.wb-radwahl__abbrechen {
    background: none;
    border: 0;
    padding: 4px 2px;
    font: inherit;
    font-size: 14px;
    color: var(--c-link, #2f6fb5);
    cursor: pointer;
    flex: none;
}
.wb-radwahl__abbrechen { display: block; width: 100%; padding: 10px; text-align: center; color: var(--c-muted, #666); }
.wb-kurz__aendern:hover,
.wb-kurz__aendern:focus-visible,
.wb-radwahl__aendern:hover,
.wb-radwahl__aendern:focus-visible,
.wb-radwahl__abbrechen:hover,
.wb-radwahl__abbrechen:focus-visible { text-decoration: underline; outline: none; }