/*
 * Zusatz-CSS der Buchungsstrecke — bewusst MINIMAL (M1-Demo-Konzept 4):
 * Design-Tokens (--c-*), Typografie, Buttons (.ws-btn), Karten (.ws-service-card),
 * Demo-Leiste und Footer kommen aus dem site.css des Website-Moduls (per URL-Pfad
 * eingebunden, s. BookingLayout). Hier stehen nur die Bausteine, die es dort nicht
 * gibt: Auswahl-Karten (Radio), Datums-Raster, Uhrzeit-Chips, Formular, Fehltexte,
 * Zusammenfassungskarte. Fehlerfarbe #B3402A gemäß Konzept 4.3.
 */

/* Sprungmarke „Zum Inhalt springen" (WCAG 2.4.1, Befund G-1).

   Sie liegt aus dem Bild heraus statt auf display:none — Letzteres nähme sie auch dem
   Screenreader und der Tastatur, und genau für die ist sie da. Beim Fokus springt sie
   an den oberen Rand und ist dann ganz gewöhnlich sichtbar.

   ⚠️ Bewusst mit dem ws-Präfix und hier MIT-definiert, obwohl sie ins gemeinsame
   site.css gehört: Die anderen drei Flächen (Website, Konto, Plattform) bekommen
   dieselbe Klasse. Zwei inhaltsgleiche Definitionen sind harmlos (beide Stylesheets
   werden ohnehin geladen); zwei verschiedene Namen wären es nicht. Zusammengelegt
   wird, sobald alle vier Flächen sie tragen. */
.ws-skip-link {
    position: absolute;
    top: 0;
    left: -9999px;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    background: var(--c-grund);
    color: var(--c-marke);
    border: 2px solid var(--c-akzent);
    border-radius: 0 0 6px 0;
    font-weight: 600;
    text-decoration: underline;
}

.ws-skip-link:focus {
    left: 0;
}

/* Die Schritt-Sektion der Buchungsstrecke.

   ⚠️ Diese Klasse stand seit der ersten Fassung auf elf Seiten im Markup und war
   NIRGENDS definiert — gefunden 2026-09-19 vom neuen Wächter CssKlassenTests, der
   wegen R8 entstand. Sie bekommt jetzt die Wirkung, die sie immer vorgab zu haben:
   den Positionierungskontext für die Aktionsleiste unten und Platz darunter, damit
   die Leiste nichts verdeckt. */
.bk-step {
    position: relative;
    padding-bottom: 1rem;
}

/* R2 (Prod-Rundgang 2026-09-19): „Weiter: Wunschtermin" rutschte bei vielen
   Dienstleistungen aus dem Bild — man wählte etwas aus und sah den Knopf nicht mehr.
   Die Leiste klebt jetzt am unteren Rand, SOLANGE darunter noch Inhalt liegt; ist die
   Seite kurz, sitzt sie schlicht am Ende (das leistet position:sticky von allein, ohne
   eine Zeile JavaScript und ohne dass auf kurzen Seiten etwas überlagert wird).

   Der Verlauf nach oben ist kein Zierrat: Ohne ihn schneidet die Leiste den darunter
   durchscrollenden Text hart ab. */
.bk-aktionsleiste {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-top: 1.5rem;
    padding: 0.9rem 0 0.75rem;
    background: linear-gradient(to top, var(--c-grund) 82%, transparent);
}

/* Auf dem Handy nimmt der Knopf die volle Breite — er ist dort das einzige
   Bedienelement der Leiste und liegt so sicher unter dem Daumen. */
@media (max-width: 34rem) {
    .bk-aktionsleiste .ws-btn {
        flex: 1 1 100%;
        text-align: center;
    }
}

/* Ein Kasten für das, was man nicht überlesen darf (R6.3): beim Verschieben die
   Tatsache, dass der bisherige Termin abgesagt wird, und die Rückfrage davor. Bewusst
   kein Rot — es ist kein Fehler, sondern eine Folge, die man kennen muss. */
.bk-warnung {
    margin: 1.25rem 0;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--c-linie);
    border-left: 4px solid var(--c-akzent);
    border-radius: 12px;
    background: var(--c-flaeche);
}

.bk-warnung p {
    margin: 0 0 0.6rem;
}

.bk-warnung p:last-child {
    margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   DIE NAVIGATION DES KUNDENKONTOS (R5, Prod-Rundgang 2026-09-19)

   Vier Links quer ueber alle /mein-konto-Seiten. Bewusst KEINE Reiter-Optik mit
   Rahmen und Zunge: Die Flaeche ist klein, und ein Reiter verspricht einen
   Wechsel innerhalb einer Seite - hier wechselt die Seite.

   Die aktuelle Seite traegt eine Unterlinie UND aria-current. Farbe allein
   traegt die Aussage nie (Hausregel aus R9 und der BFSG-Schublade P2-22).
   ------------------------------------------------------------------------- */
.bk-kontonav {
    margin: 0 0 1.75rem;
    border-bottom: 1px solid var(--c-linie);
}

.bk-kontonav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
    margin: 0;
    padding: 0;
}

.bk-kontonav a {
    display: inline-block;
    padding: 0.5rem 0 0.6rem;
    border-bottom: 3px solid transparent;
    text-decoration: none;
}

.bk-kontonav a:hover,
.bk-kontonav a:focus-visible {
    text-decoration: underline;
}

/* Die Seite, auf der man steht: staerker gesetzt und unterstrichen - und sie
   bleibt ein Link, damit ein Klick darauf schlicht neu laedt statt ins Leere
   zu gehen. */
.bk-kontonav-aktiv {
    border-bottom-color: var(--c-akzent);
    color: var(--c-marke);
    font-weight: 600;
}

.bk-choice {
    margin: 0 0 1.5rem;
}

/* Die Zusammenfassung in Schritt 3 (Vorschlag 5, B-2/B-3): Dauer, Preis und
   Stornofrist direkt unter der gewählten Zeit. Sie steht enger an der Zeile
   darüber, weil sie zu ihr gehört, und ist eine Spur zurückgenommen — die
   Hauptaussage bleibt Leistung, Datum und Uhrzeit. */
.bk-zusammenfassung {
    margin-top: -1.1rem;
    color: var(--c-marke);
    font-size: 0.95rem;
}

/* Ehrlicher Leerzustand: kein offener Tag im ganzen Buchungshorizont (TS4) */
.bk-empty {
    margin: 1.5rem 0;
    padding: 1.1rem 1.3rem;
    background: var(--c-flaeche);
    border: 1px solid var(--c-linie);
    border-radius: 16px;
    max-width: 34rem;
}

/* Online-Buchungen ab (ONLINE-BUCHUNG-AB-PLAN OB4): der Stichtag ueber der Tagesauswahl */
.bk-online-ab {
    margin: 0 0 1.25rem;
    padding: 0.9rem 1.2rem;
    background: var(--c-flaeche);
    border: 1px solid var(--c-linie);
    border-radius: 16px;
    max-width: 34rem;
}

/* Schritt 1: Leistungs-Karten als Radio-Labels (kompakte Variante der ws-service-card) */
.bk-cards {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.bk-card {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    cursor: pointer;
}

.bk-card input[type="radio"] {
    margin-top: 0.35rem;
    accent-color: var(--c-marke);
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
}

.bk-card:has(input:checked) {
    border-color: var(--c-marke);
    outline: 2px solid var(--c-marke);
}

.bk-card-body {
    display: grid;
    gap: 0.3rem;
}

.bk-card-desc {
    font-size: 0.9375rem;
}

.bk-card-meta {
    font-weight: 600;
    color: var(--c-marke);
}

/* Leistungsort-Hinweis („Online", „beim Kunden") und Preis-Fußnote des Betriebs
   (§19 UStG o. Ä.) — beides Zusatzinformation, deshalb kleiner und gedämpft.
   Die Fußnote ist Tenant-Content und wird nie umformuliert (i18n-Konvention §6). */
.bk-card-hint,
.bk-card-note {
    font-size: 0.875rem;
    color: var(--c-text-gedaempft, #5c5c5c);
}

.bk-card-note {
    font-style: italic;
}

/* Schritt 1: JEDE Leistung ist derselbe Block (Rundgang 2026-10-08 Nr. 9) — eine Karte
   mit Name, Beschreibung und Hinweisen, darunter die wählbaren Zeilen: ohne Varianten
   eine („ca. 30 Min. · 35,00 €"), mit Varianten eine je Variante. Vorher sah eine
   Leistung mit Varianten anders aus (Überschrift + eingerückte Karten) als eine ohne
   (einzelne Karte) und die einzelne wirkte zwischen den Blöcken verloren.

   Die Karte selbst ist nicht klickbar — gewählt wird die Zeile. Deshalb hat sie auch
   keinen Hover-Effekt wie die Leistungskarte der Webseite (.ws-service-card): Eine
   Karte, die sich hebt, verspricht einen Klick, den es nicht gibt. */
.bk-leistung {
    display: grid;
    gap: 0.35rem;
    background: var(--c-grund);
    border: 1px solid var(--c-linie);
    border-radius: 20px;
    padding: 1.1rem 1.25rem 1.25rem;
}

.bk-leistung > p {
    margin: 0;
}

.bk-leistung-name {
    font-size: 1.0625rem;
    overflow-wrap: anywhere;
}

.bk-leistung-zeilen {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

/* Eine wählbare Zeile: das ganze Label ist Tippziel (≥ 44 px hoch, WCAG 2.5.5). */
.bk-zeile {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    min-height: 44px;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--c-linie);
    border-radius: 12px;
    background: var(--c-grund);
    cursor: pointer;
}

.bk-zeile input[type="radio"] {
    margin: 0;
    accent-color: var(--c-marke);
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
}

.bk-zeile:hover {
    border-color: var(--c-marke);
}

.bk-zeile:has(input:checked) {
    border-color: var(--c-marke);
    outline: 2px solid var(--c-marke);
}

/* Tastatur: Der Fokus sitzt am Radio; sichtbar wird er an der ganzen Zeile. */
.bk-zeile:has(input:focus-visible) {
    outline: 3px solid var(--c-akzent);
    outline-offset: 2px;
}

/* Variantenname und Dauer · Preis: nebeneinander, am Handy (360 px) untereinander,
   sobald es eng wird — der Umbruch fällt zuerst zwischen die beiden. */
.bk-zeile-text {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.75rem;
    min-width: 0;
}

.bk-zeile-name {
    font-weight: 600;
    overflow-wrap: anywhere;
}

@media (max-width: 30rem) {
    .bk-leistung {
        padding: 1rem;
    }
}

/* EXTRAS (docs/EXTRAS-PLAN.md X4, E-7): direkt unter der Leistung, für alle Varianten gleich. Sichtbar nur in der
   GEWÄHLTEN Karte — ohne JavaScript über :has. Die Regel steht als „verstecken, solange nichts gewählt ist", damit ein
   Browser ohne :has die ganze Regel verwirft und den Block zeigt (mehr Felder, aber nichts versteckt, was zählt). */
.bk-extras {
    margin: 0.75rem 0 0;
    padding: 0.75rem 0 0;
    border: 0;
    border-top: 1px dashed var(--c-linie);
    display: grid;
    gap: 0.5rem;
    min-width: 0;
}

.bk-leistung:not(:has(input[type="radio"]:checked)) .bk-extras {
    display: none;
}

.bk-extras-titel {
    padding: 0;
    font-weight: 600;
    font-size: 0.9375rem;
}

.bk-extras-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

/* Eine Extra-Zeile: wie die Zeile der Leistung ein ganzes Tippziel (≥ 44 px, WCAG 2.5.5); der Zähler rechts. */
.bk-extra {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--c-linie);
    border-radius: 12px;
    background: var(--c-grund);
}

label.bk-extra {
    justify-content: flex-start;
    cursor: pointer;
}

.bk-extra input[type="checkbox"] {
    margin: 0;
    accent-color: var(--c-marke);
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
}

.bk-extra:has(input:checked),
.bk-extra:has(select option:checked:not([value="0"])) {
    border-color: var(--c-marke);
}

.bk-extra:has(input:focus-visible),
.bk-extra:has(select:focus-visible) {
    outline: 3px solid var(--c-akzent);
    outline-offset: 2px;
}

.bk-extra-anzahl {
    min-height: 44px;
    min-width: 4.5rem;
    padding: 0 0.5rem;
    font: inherit;
    border: 1px solid var(--c-linie);
    border-radius: 8px;
    background: var(--c-grund);
    flex-shrink: 0;
}

.bk-extras-gesamt {
    margin: 0;
    font-weight: 600;
    color: var(--c-marke);
}

.bk-extras-summe {
    justify-self: start;
    min-height: 44px;
}

/* Die gebuchten bzw. gewählten Extras als Posten (Schritt 2/3, Bestätigung, Verwalten-Seite, Konto). */
.bk-extras-posten {
    margin: 0 0 0.75rem;
}

.bk-extras-posten-titel {
    margin: 0;
    font-weight: 600;
}

.bk-extras-posten-liste {
    margin: 0.25rem 0 0;
    padding-left: 1.25rem;
}

.bk-extras-aendern {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    color: var(--c-text-gedaempft, #5c5c5c);
}

/* Schritt 2: „Kompakter Terminkopf" (docs/M1-TERMINAUSWAHL-UX.md, Option B).
   Der gewählte Tag steht in einer 48-px-<summary>-Zeile, das 12-Tage-Raster liegt
   IM <details> und ist nur während des Umwählens sichtbar — die Uhrzeit-Chips
   bleiben dadurch im ersten Viewport. Null JS: <details>/<summary> klappt nativ,
   nach jedem GET-Reload rendert die Seite wieder zugeklappt. */
.bk-daypicker {
    max-width: 34rem;
    margin: 0 0 1rem;
    background: var(--c-flaeche);
    border: 1px solid var(--c-linie);
    border-radius: 12px;
}

.bk-daypicker summary {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 48px; /* Touch-Target der Kopfzeile */
    padding: 0.6rem 1rem;
    box-sizing: border-box;
    cursor: pointer;
    list-style: none; /* Standard-Dreieck aus — Chevron übernimmt */
}

.bk-daypicker summary::-webkit-details-marker {
    display: none;
}

.bk-daypicker summary:focus-visible {
    outline: 3px solid var(--c-akzent);
    outline-offset: 2px;
    border-radius: 12px;
}

.bk-daypicker-date {
    flex: 1 1 auto;
    min-width: 0;
}

.bk-daypicker-toggle {
    color: var(--c-marke);
    font-weight: 600;
    font-size: 0.9375rem;
    white-space: nowrap;
}

.bk-daypicker summary::after {
    content: "▾";
    color: var(--c-marke);
    transition: transform 0.15s ease;
}

.bk-daypicker[open] summary {
    border-bottom: 1px solid var(--c-linie);
}

.bk-daypicker[open] summary::after {
    transform: rotate(180deg);
}

/* Toggle-Beschriftung wechselt mit dem Zustand: „ändern" ⇄ „schließen" */
.bk-daypicker-toggle-open {
    display: none;
}

.bk-daypicker[open] .bk-daypicker-toggle-closed {
    display: none;
}

.bk-daypicker[open] .bk-daypicker-toggle-open {
    display: inline;
}

/* Mikrocopy unter der Kopfzeile: „Nächster freier Tag ist vorausgewählt." */
.bk-day-hint {
    margin: -0.5rem 0 1rem;
    font-size: 0.875rem;
    opacity: 0.75;
}

/* Der Vorbereitungshinweis der Leistung (Vorschlag 11, B-23/B-29): „Bitte den
   Impfpass mitbringen", Kursvoraussetzungen.

   Abgesetzt wie der Leerzustand und aus demselben Grund — er ist eine Aussage
   des Betriebs und nicht Fließtext der Seite. Zeilenumbrüche des Betreibers
   bleiben erhalten (pre-line): Wer drei Punkte untereinander tippt, meint drei
   Punkte untereinander, und ein Freitextfeld ist kein Ort für HTML. */
.bk-vorbereitung {
    margin: 1.5rem 0;
    padding: 1.1rem 1.3rem;
    background: var(--c-flaeche);
    border: 1px solid var(--c-linie);
    border-radius: 16px;
}

.bk-vorbereitung h2 {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
}

.bk-vorbereitung p {
    margin: 0;
    white-space: pre-line;
}

/* Der Sprung zum nächsten freien Tag (Vorschlag 10, B-11). Er steht ÜBER der
   Tagesauswahl und ist bewusst ein normaler Link und kein Knopf: Ein Knopf
   neben „Frühere/Spätere Tage" sähe aus wie ein dritter Blätter-Schritt, und
   das ist er nicht — er überspringt die Reihe, statt sich in ihr zu bewegen. */
.bk-naechster-freier {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
}

.bk-naechster-freier a {
    color: var(--c-marke);
    text-decoration: underline;
}

/* Datums-Raster (Inhaber-Vorgabe: Raster statt scrollender Leiste): alle 12 Tage
   ohne Scrollen erreichbar. auto-fill/minmax bricht selbst um: 4 Spalten × 3 Reihen
   auf Phones (320–390 px), bis 7 Spalten × 2 Reihen ab Tablet (max-width deckelt
   die Breite, damit die Kacheln auf Desktop nicht ausufern). */
.bk-days {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr));
    gap: 0.5rem;
    max-width: 34rem;
    padding: 0.25rem 0 1rem;
}

.bk-daypicker .bk-days {
    max-width: none;
    padding: 0.75rem 1rem 1rem;
}

.bk-day {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 0.1rem;
    min-height: 44px; /* Touch-Target */
    padding: 0.5rem 0.25rem;
    background: var(--c-grund);
    border: 1px solid var(--c-linie);
    border-radius: 12px;
    text-decoration: none;
    text-align: center;
    color: var(--c-tinte);
    white-space: nowrap;
    font-size: 0.9375rem;
    line-height: 1.35;
}

.bk-day-name {
    font-size: 0.8125rem;
}

a.bk-day:hover {
    border-color: var(--c-marke);
}

.bk-day-active {
    background: var(--c-marke);
    color: var(--c-grund);
    border-color: var(--c-marke);
    font-weight: 600;
}

/* Gedämpfte Tinte für nicht buchbare Tageskacheln (Befund G-5, WCAG 1.4.3).

   VORHER stand hier opacity: 0.5. Das blendet die Vordergrundfarbe zur Hälfte mit
   dem Grund und ergibt rechnerisch #938D88 auf #FAF6EF = 3,04:1 — unter der
   AA-Schwelle 4,5:1. Die Kacheln tragen aber LESBARE Information („geschl."/„voll"
   plus Wochentag und Datum) bei 0,7 rem, also Normaltext; die WCAG-Ausnahme gilt nur
   für inaktive BEDIENELEMENTE ohne eigene Aussage.

   NACHHER eine feste, gerechnete Farbe in derselben warmen Farbfamilie wie --c-tinte
   (#2C2420), Vorbild ist das Backend-Token --bo-tinte-mild:
     #645A52 auf --c-grund   (#FAF6EF) = 6,24:1 ✓
     #645A52 auf --c-flaeche (#EFE7D8) = 5,47:1 ✓  (Kachel im Daypicker-Panel)
   Der Rand bleibt --c-linie; er ist Dekoration, kein Bedienelement-Umriss. */
:root {
    --c-tinte-mild: #645A52;
}

.bk-day-closed {
    color: var(--c-tinte-mild);
    border-style: dashed;
}

/* Offen, aber ausgebucht (Spec 4.5): gedämpft wie „geschl.", aber mit
   durchgezogenem Rand und Text „voll" — unterscheidbar vom Ruhetag. */
.bk-day-full {
    color: var(--c-tinte-mild);
}

.bk-day small {
    font-size: 0.7rem;
}

.bk-slot-group {
    margin: 1rem 0 0.5rem;
    font-size: 0.9375rem;
}

/* Uhrzeit-Kacheln (P-R-6, Inhaber-Liste 2026-09-20 Nr. 3): Die Chips bleiben Chips —
   ein Auswahlfeld wäre gegen jede Empfehlung (docs/M1-TERMINAUSWAHL-UX.md §2: Listen
   und Chips schlagen Roll-Picker) —, aber sie werden KOMPAKTER. Aus der wickelnden
   Reihe wird ein Raster wie beim Datum darüber: gleich breite Kacheln, auf dem Handy
   vier statt drei pro Zeile, kleinere Schrift und weniger Innenabstand.

   DIE HÖHE BLEIBT BEI 44 px. Kompakter heißt schmaler und leiser, nicht schwerer zu
   treffen — die Trefferfläche ist eine Zusage der Spec (4.7 Nr. 3), keine Stellschraube.

   EINE Definition für BEIDE Flächen: Die Buchungsstrecke und die Verschieben-Seite
   unter /mein-konto benutzen dieselben Klassen (R6.2); .bk-zeiten setzt dort nur noch
   den Abstand. */
.bk-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(4.75rem, 1fr));
    gap: 0.4rem;
    max-width: 34rem; /* wie das Datums-Raster — sonst laufen die Kacheln auf Desktop aus */
}

.bk-chip {
    display: flex;
    flex-wrap: wrap; /* der Plätze-Zusatz rutscht in einer schmalen Kachel darunter */
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px; /* Touch-Target */
    padding: 0.3rem 0.4rem;
    box-sizing: border-box;
    border: 1.5px solid var(--c-marke);
    border-radius: 12px; /* Kachel wie .bk-day, nicht mehr Pille */
    color: var(--c-marke);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
}

.bk-chip:hover {
    background: var(--c-marke);
    color: var(--c-grund);
}

/* „Bei wem möchten Sie buchen?" (MITARBEITER-PLAN BE-4): dieselben Kacheln wie die Uhrzeiten, nur breiter — ein
   Name ist länger als „10:30". Die gewählte Person (oben „Egal wer") steht gefüllt da wie der gewählte Tag
   (.bk-day-active); sie ist kein Link, sondern der Stand (aria-current). */
.bk-personwahl {
    margin: 0 0 1rem;
}

.bk-personwahl .bk-chips {
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
}

.bk-chip-aktiv {
    background: var(--c-marke);
    color: var(--c-grund);
}

/* Gruppentermin: „Noch 4 von 6 Plätzen" am Uhrzeit-Chip (M3-KURS-VORGRIFF-PLAN KS4).
   Der Zusatz steht IM Chip und trägt kein eigenes Farbsignal: Ein Gruppentermin ist
   kein Sonderfall und keine Warnung, sondern eine zweite normale Art zu buchen. */
.bk-chip-seats {
    flex-basis: 100%; /* eigene Zeile in der Kachel */
    margin: 0;
    font-size: 0.72rem;
    font-weight: 500;
    opacity: 0.75;
}

/* Feste Termine (BUCHUNGSMODELL-PLAN §12 A4-L9): eine Liste statt Datumsleiste und
   Raster — je Zeile Tag, Uhrzeit von–bis, Treffpunkt und freie Plätze. Eine Zeile ist
   ein ganzer Link (Static SSR, kein JavaScript); die Trefferfläche ist die Zeile, nicht
   ein Knopf darin. Ausgebuchte Termine stehen gedämpft und ohne Link da, damit die
   Kundin sieht, dass es sie gibt — dieselbe Tinte wie eine volle Tageskachel (G-5).

   Am Handy bricht die Zeile in zwei Zeilen: oben Tag und Uhrzeit, darunter Treffpunkt
   und Plätze. Kein Teil wird abgeschnitten, weil ein Treffpunkt beliebig lang sein darf. */
.bk-terminwahl {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
    max-width: 34rem;
}

.bk-terminwahl-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.75rem;
    min-height: 44px; /* Touch-Target wie .bk-chip */
    padding: 0.6rem 0.9rem;
    box-sizing: border-box;
    border: 1.5px solid var(--c-marke);
    border-radius: 12px;
    color: var(--c-tinte);
    text-decoration: none;
    line-height: 1.35;
}

a.bk-terminwahl-zeile:hover {
    background: color-mix(in srgb, var(--c-marke) 7%, transparent);
}

.bk-terminwahl-tag,
.bk-terminwahl-zeit {
    font-weight: 600;
    color: var(--c-marke);
}

.bk-terminwahl-ort {
    flex-basis: 100%;
    font-size: 0.9375rem;
    overflow-wrap: anywhere;
}

.bk-terminwahl-plaetze {
    flex-basis: 100%;
    font-size: 0.8125rem;
}

@media (min-width: 40rem) {
    .bk-terminwahl-ort,
    .bk-terminwahl-plaetze {
        flex-basis: auto;
    }

    .bk-terminwahl-plaetze {
        margin-left: auto;
    }
}

.bk-terminwahl-voll {
    border-color: var(--c-linie);
    color: var(--c-tinte-mild);
}

.bk-terminwahl-voll .bk-terminwahl-tag,
.bk-terminwahl-voll .bk-terminwahl-zeit {
    color: var(--c-tinte-mild);
}

/* WARTELISTE (BUCHUNGSMODELL-PLAN §18 W-3, T-W4): „Auf die Warteliste" unter einer vollen Zeile —
   ein eigener Link, damit die volle Zeile selbst kein Link wird (sie bleibt „ausgebucht").
   Touch-Target 44 px wie .bk-chip. */
.bk-warteliste-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.25rem;
    font-size: 0.9375rem;
    color: var(--c-marke);
}

/* GANZER KURS (BUCHUNGSMODELL-PLAN §15 A6-7): die Gruppenliste in Schritt 2. Jede Gruppe ist
   eine Zeile wie ein fester Termin (bk-terminwahl-zeile) — darunter, aufklappbar, ALLE ihre
   Termine. Preis und Anmeldeschluss stehen in eigener Zeile, damit am Handy nichts quetscht. */
.bk-kurswahl {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
    max-width: 34rem;
}

.bk-kurswahl-eintrag {
    display: grid;
    gap: 0.25rem;
}

.bk-kurswahl-preis {
    font-weight: 600;
}

.bk-kurswahl-schluss {
    flex-basis: 100%;
    font-size: 0.8125rem;
    color: var(--c-tinte-mild);
}

.bk-kurswahl-termine {
    padding: 0 0.9rem;
    font-size: 0.9375rem;
}

.bk-kurswahl-termine > summary {
    min-height: 44px; /* Touch-Target wie .bk-chip */
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--c-marke);
}

/* Die Termine eines Kurses — in der Liste, in Schritt 3, auf Bestätigung, Verwaltung und im
   Portal dieselbe schlichte Aufzählung. */
.bk-kurstermine {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.bk-kurstermine-titel {
    font-size: 1.05rem;
    margin: 1rem 0 0.4rem;
}

/* Portal: die Karte einer Kursanmeldung — wie ein Termin, mit der Terminliste darin. */
.bk-kurskarte .bk-kurstermine {
    margin: 0.4rem 0;
}

/* Portal: die Karte einer Mitgliedschaft (§17 M-11) — wie ein Termin, darin die nächsten Termine
   mit je einer eigenen Handlung. Am Handy steht die Handlung UNTER der Zeile (wickelt), nie daneben
   gequetscht; lange Treffpunkte brechen statt die Karte zu sprengen. */
.bk-mitglied-titel {
    font-size: 1rem;
    margin: 0.8rem 0 0.3rem;
}

.bk-mitgliedtermine {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bk-mitgliedtermin {
    padding: 0.5rem 0;
    border-top: 1px solid var(--c-linie);
    overflow-wrap: anywhere;
}

.bk-mitgliedtermin .bk-termin-aktionen {
    margin-top: 0.3rem;
}

.bk-mitgliedkarte > .bk-termin-aktionen {
    margin-top: 0.9rem;
}

/* § 356a Abs. 2 BGB: Name, Vertrag und Adresse der Bestätigung vor „Widerruf bestätigen" (Code-Review R1-1). */
.bk-widerruf-angaben {
    margin: 0.4rem 0 0.6rem;
}

/* Die Karten „Monatsbeitrag" (§17 M-13) im Kundenkonto und auf der Buchungsseite: eine Karte wie eine
   Leistung, aber mit einem Link statt einer Auswahl — der Abschluss ist ein eigener Weg im Konto. */
.bk-monatsbeitraege {
    margin-top: 0.5rem;
}

/* P2-120: Auf der Buchungsseite steht die Überschrift „Monatsbeitrag" direkt unter der klebenden Leiste mit
   „Weiter: Wunschtermin". Ohne eigenen Abstand schloss sie am Handy an den Knopf an, und der Knopf las sich wie
   ein Teil der Karte. */
.bk-monatsbeitraege-titel {
    margin-top: 2.5rem;
}

.bk-monatsbeitrag .bk-card-body > a {
    align-self: flex-start;
    margin-top: 0.6rem;
}

/* Die Abschluss-Seite (§17 M-13): Auswahl, Belehrung zum Aufklappen, Zusammenfassung vor dem Knopf. */
.bk-abschluss-auswahl fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 1rem;
}

.bk-belehrung {
    margin: 0 0 1rem;
    padding: 0.6rem 0.95rem;
    border: 1px solid var(--c-linie);
    border-radius: 6px;
    overflow-wrap: anywhere;
}

.bk-belehrung > summary {
    cursor: pointer;
    font-weight: 600;
}

.bk-formularzeile {
    margin: 0.2rem 0;
}

.bk-zusammenfassung {
    margin: 0 0 0.6rem;
    padding: 0.7rem 0.95rem 0.7rem 1.9rem;
    border-left: 3px solid var(--c-marke);
    background: color-mix(in srgb, var(--c-marke) 7%, transparent);
    border-radius: 0 6px 6px 0;
}

.bk-zusammenfassung > li + li {
    margin-top: 0.3rem;
}

.bk-preisangabe {
    font-weight: 600;
}

.bk-abschluss-knopf {
    margin-top: 0.5rem;
}

/* Schritt 3: der Hinweis „Sie melden sich zu einem bestehenden Termin an". Bewusst
   KEIN Fehlerstil (bk-error) — hier läuft alles richtig, die Kundin soll nur wissen,
   worauf sie sich einlässt. */
.bk-group-hint {
    margin: 0 0 1rem;
    padding: 0.7rem 0.95rem;
    border-left: 3px solid var(--c-marke);
    background: color-mix(in srgb, var(--c-marke) 7%, transparent);
    border-radius: 0 6px 6px 0;
    font-size: 0.94rem;
}

/* Die Zahlungsbedingungen des ganzen Kurses (BUCHUNGSMODELL-PLAN §16 N-3, T1/T2): Schritt 3,
   Bestätigungs- und Verwalten-Seite. Dieselbe ruhige Fläche wie der Gruppen-Hinweis — kein
   Warnstil, aber abgesetzt: Es ist der Absatz, den die Kundin vor dem Knopf lesen soll. */
.bk-kurs-zahlung {
    margin: 0 0 1rem;
    padding: 0.7rem 0.95rem;
    border-left: 3px solid var(--c-marke);
    background: color-mix(in srgb, var(--c-marke) 7%, transparent);
    border-radius: 0 6px 6px 0;
    font-size: 0.94rem;
}

/* Die Ausfallpauschale eines einzeln bezahlten Termins (BUCHUNGSMODELL-PLAN §16 N-L7, T6/T7):
   dieselbe ruhige Fläche wie die Zahlungsbedingungen des Kurses — vereinbart ist, was vor
   dem Knopf stand. Die Kurzfassung auf Portal-Karte und Verwalten-Seite ist eine Zeile ohne
   Fläche (bk-ausfallpauschale-kurz). */
.bk-ausfallpauschale {
    margin: 0 0 1rem;
    padding: 0.7rem 0.95rem;
    border-left: 3px solid var(--c-marke);
    background: color-mix(in srgb, var(--c-marke) 7%, transparent);
    border-radius: 0 6px 6px 0;
    font-size: 0.94rem;
}

.bk-ausfallpauschale-kurz {
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
}

/* Schritt 3: „nur für freigeschaltete Kundinnen" (BUCHUNGSMODELL-PLAN §12 A4-L8). Der
   Grund in Fehlerfarbe, darunter der Ausweg (Probetraining bzw. Kontakt) in normaler
   Schrift — die Kundin hat nichts falsch gemacht, sie braucht nur den anderen Weg. */
.bk-freischaltung {
    margin: 0 0 1rem;
    padding: 0.7rem 0.95rem;
    border-left: 3px solid #B3402A;
    background: color-mix(in srgb, #B3402A 6%, transparent);
    border-radius: 0 6px 6px 0;
}

.bk-freischaltung p {
    margin: 0.25rem 0 0;
}

.bk-freischaltung ul {
    margin: 0.25rem 0 0;
    padding-left: 1.1rem;
}

/* Schritt 3: Formular (Konzept 4.3) */
.bk-form {
    display: grid;
    gap: 1.1rem;
    max-width: 28rem;
}

/* Rundgang Kalender-nach-Bestätigung §4a R-7: Der Hinweis unter „Code senden" klebte ohne
   Abstand am Knopf — .ws-fineprint hat oben keinen Rand, .bk-form unten auch nicht. */
.bk-tor-hinweis {
    margin-top: 1rem;
}

.bk-field {
    display: grid;
    gap: 0.35rem;
}

.bk-field label {
    font-weight: 600;
}

.bk-field input,
.bk-field textarea {
    font: inherit;
    color: var(--c-tinte);
    background: #fff;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--c-linie);
    border-radius: 10px;
}

.bk-field-check label {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    font-weight: 400;
    font-size: 0.9375rem;
}

.bk-field-check input {
    margin-top: 0.2rem;
    accent-color: var(--c-marke);
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
}

/* Code-Schritt (M3-PORTAL-PLAN Etappe A): Die sechs Ziffern groß und gespreizt —
   Abtippen aus einer Mail ist fehleranfällig, und jeder Vertipper kostet einen von
   fünf Versuchen. Die Breite ist an den Inhalt gebunden (ch), nicht an das Formular:
   Ein sechsstelliges Feld, das wie ein Namensfeld aussieht, lädt zum Weitertippen ein. */
.bk-code-input {
    max-width: 11ch;
    font-size: 1.5rem;
    letter-spacing: 0.35em;
    text-align: center;
}

/* Der zweite Weg steht etwas abgesetzt — er ist die Ausnahme, nicht der Normalfall. */
.bk-resend {
    margin-top: 1.25rem;
}

/* Fehltexte: Klartext am Feld mit Symbol, nie nur ein roter Rahmen (Konzept 4.3) */
.bk-error {
    margin: 0.25rem 0 0;
    color: #B3402A;
    font-weight: 600;
    font-size: 0.9375rem;
}

.bk-error::before {
    content: "⚠ ";
}

.bk-demo-sub {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
}

/* Schritt 4: Zusammenfassungskarte (Konzept 4.4) */
.bk-summary {
    margin: 1.5rem 0;
    padding: 1.25rem 1.4rem;
    background: var(--c-flaeche);
    border: 1px solid var(--c-linie);
    border-radius: 20px;
    display: grid;
    gap: 0.45rem;
    max-width: 28rem;
}

.bk-summary div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.bk-summary dt {
    color: var(--c-marke);
}

.bk-summary dd {
    margin: 0;
    font-weight: 600;
    text-align: right;
}

/* -------------------------------------------------------------------------
   Das Konto-Angebot auf der Bestätigungsseite (M3-PORTAL-PLAN PS6).

   Abgesetzt statt hervorgehoben: Wer hier ankommt, hat sein Ziel erreicht.
   Das Angebot steht daneben, nicht im Weg — eine Linie oben und etwas Luft
   genügen dafür.
   ------------------------------------------------------------------------- */
.bk-konto-angebot {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--c-linie, rgba(0, 0, 0, 0.12));
}

.bk-konto-angebot h2 {
    font-size: 1.125rem;
    margin: 0 0 0.35rem;
}

.bk-konto-angebot p {
    margin: 0 0 0.9rem;
}

/* -------------------------------------------------------------------------
   Die Terminliste des Portals (M3-PORTAL-PLAN PS7).

   Karten statt Tabelle: Die Fläche läuft auf dem Handy, und eine Tabelle mit
   vier Spalten wird dort entweder gequetscht oder gescrollt. Jede Karte trägt
   dieselbe Lesereihenfolge wie die Bestätigungsseite — wann, was, wie steht es.

   Kein eigener Kontrast für den Status: Die Karte ist die Einheit, nicht der
   Status. Eine Farbcodierung nach Status verspräche eine Bedeutung, die es bei
   fünf Zuständen ohne Legende nicht gibt (und die BFSG-Schublade P2-22 sagt,
   dass Farbe allein ohnehin nie die Aussage tragen darf).
   ------------------------------------------------------------------------- */
.bk-termine {
    list-style: none;
    margin: 1rem 0 2rem;
    padding: 0;
    display: grid;
    gap: 0.9rem;
    max-width: 32rem;
}

.bk-termin {
    padding: 1.1rem 1.3rem;
    background: var(--c-flaeche);
    border: 1px solid var(--c-linie);
    border-radius: 20px;
}

/* Vergangenes tritt zurück — es ist Nachschlagewerk, nicht Handlungsaufruf. */
.bk-termin-alt {
    background: none;
    opacity: 0.75;
}

.bk-termin p {
    margin: 0 0 0.3rem;
}

/* Die Zeit ist die Kopfzeile jeder Terminkarte — sie fehlte als Einzige, während
   Leistung, Status und Frist ihre Regel hatten (gefunden 2026-09-19, CssKlassenTests). */
.bk-termin-zeit {
    font-size: 1.05rem;
}

.bk-termin-leistung {
    color: var(--c-marke);
}

/* Der Treffpunkt unter der Leistung (Rundgang A4 Nr. 4) — eine Angabe, keine Überschrift. */
.bk-termin-ort {
    font-size: 0.95rem;
}

/* „bei Lea" unter der Leistung (MITARBEITER-PLAN BE-5) — nur, wenn die Kundin die Person gewählt hat; dieselbe
   leise Angabe wie der Treffpunkt. */
.bk-termin-person {
    font-size: 0.95rem;
}

.bk-termin-status {
    font-weight: 600;
}

/* Die Frist steht kleiner ÜBER dem Knopf: Sie ist die Bedingung der Handlung,
   nicht ihre Beschriftung. */
.bk-termin-frist {
    margin-top: 0.6rem;
    font-size: 0.9375rem;
}

/* GUTSCHRIFT-PLAN T-3: die Gutschriften eingerückt unter ihrer Rechnung im Kundenkonto. */
.bk-gutschriften {
    list-style: none;
    margin: 0.6rem 0 0;
    padding-left: 1rem;
    border-left: 2px solid currentColor;
}

.bk-gutschrift {
    font-size: 0.9375rem;
    overflow-wrap: anywhere;
}

.bk-gutschrift + .bk-gutschrift {
    margin-top: 0.3rem;
}

/* Die zwei Handlungen einer Terminkarte nebeneinander (PS8). Sie wrappen auf
   dem Handy, statt zu schrumpfen — ein Knopf, den man nicht trifft, ist kein
   Knopf. */
.bk-termin-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.6rem;
}

/* Die Absage tritt neben dem Verschieben zurück — sie ist die seltenere und die
   endgültige Handlung. BEWUSST EINE EIGENE KLASSE und kein „leiser" Modifier von
   ws-btn: Der Bestand kennt keinen (der Befund U4 entstand genau daran, dass eine
   vermutete Klasse nicht existierte). Sie setzt nur Farben um und lässt Form,
   Polster und Trefferfläche unangetastet. */
.bk-btn-leise {
    background: none;
    color: var(--c-tinte);
    border: 1px solid var(--c-linie);
}

/* Ohne diese Regel erbt der leise Knopf von .ws-btn:hover den dunklen Grund (höhere
   Spezifität), behält aber seine dunkle Schrift: Espresso auf Tannengrün, unlesbar.
   Am Handy bleibt :hover nach dem Tippen stehen — seit der Rückfrage im Portal (§16 N-2)
   klappt der Knopf auf, statt die Seite neu zu laden, also blieb er dunkel stehen
   (Rundgang 2026-10-04, R-1). */
.bk-btn-leise:hover,
.bk-btn-leise:active {
    background: var(--c-grund);
    color: var(--c-marke);
    border-color: var(--c-marke);
}

/* Rückfrage im Portal (BUCHUNGSMODELL-PLAN §16 N-2): „Termin absagen…" klappt eine Frage
   und den echten Knopf auf. Null JS — <details>/<summary> klappt nativ. Die Zeile
   „summary" trägt die Knopf-Klassen; das Standard-Dreieck ist aus, weil ein Knopf mit
   Dreieck wie ein Menü aussähe. Aufgeklappt nimmt die Rückfrage die ganze Breite der
   Aktionszeile ein, damit Frage und Knopf am Handy nicht neben „Verschieben" klemmen. */
.bk-rueckfrage > summary {
    list-style: none;
    cursor: pointer;
}

.bk-rueckfrage > summary::-webkit-details-marker {
    display: none;
}

.bk-rueckfrage > summary:focus-visible {
    outline: 3px solid var(--c-akzent);
    outline-offset: 2px;
}

.bk-rueckfrage[open] {
    flex-basis: 100%;
}

.bk-rueckfrage-inhalt {
    margin-top: 0.6rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--c-linie);
    border-radius: 12px;
    background: var(--c-flaeche);
}

.bk-rueckfrage-inhalt p {
    margin: 0 0 0.6rem;
}

/* Die Zeiten der Verschiebe-Seite: eine Reihe wickelnder Knöpfe wie die
   Uhrzeit-Chips der Buchungsstrecke. */
/* Die Zeitenliste der Verschieben-Seite. Seit R6.2 ist sie ein Modifier von
   .bk-chips und setzt nur noch die Abstaende: Die Chips selbst sind dieselben wie
   in der Buchungsstrecke, weil es dieselbe Handlung ist. */
.bk-zeiten {
    margin: 0.75rem 0 1.5rem;
}

/* Blaetter-Leiste unter dem Datums-Raster (R4). Sie steht nur da, wenn es ueberhaupt
   ein Nachbarfenster gibt — ein Knopf ins Nichts waere schlechter als keiner. */
.bk-days-blaettern {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: space-between;
    padding: 0 1rem 1rem;
}

.bk-tagwahl {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
    margin: 1.25rem 0;
}

.bk-hinweis-text {
    font-size: 0.9375rem;
}

/* Auswahlfelder tragen denselben Stil wie Text- und Textarea-Felder (Befund U7
   der Etappe-C-UAT). Vorher stand im Anschrift-Block ein nackter Browser-Select
   zwischen lauter gestalteten Feldern — dieselbe Fehlerform wie U1, nur eine
   Elementart weiter. `appearance: none` nimmt die Systemdarstellung; der Pfeil
   kommt als eingebettetes SVG zurück, damit das Feld ohne zusätzliche Datei
   auskommt und in beiden Zuständen gleich aussieht. */
.bk-field select {
    width: 100%;
    padding: 0.7rem 2.2rem 0.7rem 0.9rem;
    border: 1px solid var(--c-linie);
    border-radius: 12px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23385f52' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 0.7rem;
    font: inherit;
    color: inherit;
    appearance: none;
}

/* Ein Feld, das man NICHT ändern kann, muss auch so aussehen — sonst tippt die
   Kundin hinein und versteht nicht, warum nichts passiert (Etappe-C-UAT). Der
   erklärende Satz darunter bleibt trotzdem stehen: Die Optik sagt „geht nicht",
   der Satz sagt „warum". */
.bk-field input:disabled {
    background: var(--c-flaeche);
    color: var(--c-marke);
    cursor: not-allowed;
}

/* Telefonnummer und E-Mail-Adresse als Bedienelement (Vorschlag 1, B-8,
   Komponente Kontaktzeile).

   Anders als in der Betreiber-Fläche wird hier UNTERSTRICHEN: Auf den
   Kundenseiten stehen genau ein bis zwei dieser Zeilen, und die Kundin, die auf
   ihnen landet, hat gerade erfahren, dass sie anrufen muss. Dass die Nummer
   antippbar ist, darf sie nicht erst durch Probieren herausfinden.

   Ein <a> OHNE href (unwählbarer Wert, s. Komponente) ist kein Link — der
   Selektor greift dort absichtlich nicht, und die Zeile bleibt Text. */
a.bk-kontaktlink[href] {
    color: var(--c-marke);
    text-decoration: underline;
}

a.bk-kontaktlink[href^="tel:"] {
    white-space: nowrap;
}

a.bk-kontaktlink[href^="mailto:"] {
    overflow-wrap: anywhere;
}

/* Tierwahl aus „Meine Tiere" (Befund P2-109 Stufe 2): eine Auswahl statt des
   Namensfelds für die angemeldete Kundin. Steht NACH .bk-field input, damit die
   Optionsfelder nicht Rahmen und Innenabstand der Textfelder erben. Jede Zeile
   ist mindestens 44 px hoch — auf dem Handy ist der Name das Tippziel, nicht
   der kleine Kreis davor. */
.bk-tierwahl {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.bk-tierwahl legend {
    font-weight: 600;
    padding: 0;
    margin-bottom: 0.35rem;
}

.bk-tierwahl label {
    display: flex;
    gap: 0.65rem;
    align-items: center;
    min-height: 44px;
    font-weight: 400;
}

.bk-tierwahl input {
    accent-color: var(--c-marke);
    width: 1.15rem;
    height: 1.15rem;
    padding: 0;
    flex-shrink: 0;
}

/* „Verträge hier kündigen" (BUCHUNGSMODELL-PLAN §17 M-12, T-M7). Die Bestätigung des Zugangs steht
   hervorgehoben (§ 312k Abs. 3: zum Speichern), die eigenen Angaben darunter als Liste — am Handy
   untereinander, Begriff über Wert, nichts über den Rand (lange Adressen brechen). */
.bk-kuendigen fieldset label {
    display: block;
    margin: 0.25rem 0;
}

.bk-kuendigen-eingang {
    font-weight: 600;
    padding: 0.9rem 1rem;
    border-left: 4px solid var(--c-marke, #2f5d50);
    background: var(--c-flaeche, #f4f1ea);
}

.bk-kuendigen-angaben {
    margin: 0.5rem 0 0;
}

.bk-kuendigen-angaben dt {
    font-weight: 600;
    margin-top: 0.6rem;
}

.bk-kuendigen-angaben dd {
    margin: 0.1rem 0 0;
    overflow-wrap: anywhere;
}