/* ═══════════════════════════════════════════════════════════════════
   bausteine.css — Zentrales Design-System (Tokens + Baustein-Klassen)
   PV-Konfigurator — Tag 34
   Version 1.5 — 21.08.2026
   v1.5: --bs-page-max-breit (1400px) als Ausnahme-Token fuer Schritte, die
         von Breite leben. Zusammen mit --wizard-breite in style.css ist die
         Wizard-Inhaltsbreite damit an EINER Stelle geregelt; die frueheren
         drei Wege (.bs-page auf Schritt 1, Inline-Wrapper in 4 und 7,
         .wizard-main-Default fuer den Rest) sind zusammengefuehrt.
   Version 1.4 — 07.06.2026
   v1.1: B0 .bs-page + --bs-page-max (einheitliche Inhaltsbreite).
   v1.2: --bs-box-gap (Abstand gestapelter Boxen) + .bs-box-stack;
         B8 .bs-btn .primary/.secondary (Optik 1:1 aus style.css .btn);
         Tokens --bs-btn-h, --bs-btn-pad-x.
   v1.3: B9 .bs-upload-foto (Foto-Upload + Vorschau) + B10 .bs-upload-ocr
         (Dokument/OCR-Dropzone + Status-Zeile); shared .bs-dropzone;
         Token --bs-upload-h. Optik aus style.css (schritt7/schritt0).
   v1.4: Erweiterte Farb-Tokens (Rollen aus FARBEN_WIZARD.txt TEIL 2):
         --bs-secondary*, --bs-text-heading/-secondary/-faint, --bs-bg-soft,
         --bs-border, --bs-success(+text/bg/border), --bs-warning, --bs-error
         (+strong/bg), --bs-info, --bs-header-bg. Bausteine/Boxen auf diese
         Tokens gestuetzt (B9 Loesch-Btn -> --bs-error-strong; B10
         Status-OK -> --bs-success*). Greift weiter NUR im Bausteine-System.

   ZWECK: zentrale Design-Tokens + wiederverwendbare Baustein-Klassen.
   Startwerte aus 03_Konzept/Design_SOLL/ gezogen (Maße: Schätzwerte,
   Farben: an Marken-Tokens var(--upc-teal) / var(--solar-orange) angelehnt).
   Greift NOCH NIRGENDS im Wizard — Migration nach Werte-Abnahme (separat).
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Maße (Startwerte; per Stellpult einstellbar) ── */
  --bs-page-max:  1080px;  /* EINHEITLICHE Inhaltsbreite (alle Schritte);
                              großzügig — Prinzip "breit vor lang"      */
                           /* K7/02 (14.09.2026): --bs-page-max-breit (fest
                              1400 px, nur Schritt 2) ist entfernt. EINE
                              Breite fuer alle elf Seiten, eingestellt ueber
                              wizard_seitenbreite (800-1400) im Stellwerk. */
  --bs-card-gap:   14px;   /* Abstand zwischen Karten            */
  --bs-card-pad:   32px;   /* Karten-Innenabstand (K5/02: von 16 auf den gemessenen Stand 32) */
  --bs-row-gap:    12px;   /* Abstand zwischen Zeilen in Karte   */
  --bs-field-gap:  12px;   /* Abstand zwischen Feldern in Zeile  */
  /* K8/01b (17.09.2026): >>> DIESES TOKEN BENUTZT KEINE REGEL. <<< Gesucht
     nach var(--bs-field-gap) in wizard\ und 01_Admin\: null Treffer — die
     Feldzeilen rechnen mit --bs-field-gap-x/-y. Nach Punkt 8 des Auftrags
     NICHT angeschlossen, sondern gemeldet (R86: Ausbau ist Dirks Wort). */
  /* K5/02: Rückfall von 40 auf 44px. 40 war der Schätzwert der Vorschau,
     44 ist die Höhe, die der Wizard auf Schritt 2 bis 8 wirklich zeigt
     (style.css .form-control). Vereinheitlicht auf den gemessenen Wert —
     sonst schrumpften 74 Felder um vier Pixel. */
  --bs-field-h:    var(--wz-feld-hoehe, 44px);   /* Feldhöhe — K4/05: einstellbar */
  --bs-field-pad-x: 16px;  /* Innenabstand im Feld, links/rechts */
  --bs-field-border-w: 1.5px; /* Rahmenstärke des Feldes */
  --bs-radius:      var(--wz-rundung, 8px);      /* Eckenradius — K4/05: einstellbar, 8px Vorgabe */
  /* K5/02: die größere Rundung für Karten, Hinweiskästen und die großen
     Knöpfe. Sie war als --radius-lg in style.css FEST verdrahtet und hing
     an keinem Regler — deshalb hatte der Weiter-Knopf 12px, während der
     Zurück-Knopf daneben dem Regler folgte. Jetzt: ein Vielfaches. */
  --bs-radius-gross: calc(var(--bs-radius) * 1.5);
  --bs-box-gap:    12px;   /* Abstand zwischen gestapelten Boxen */  /* [Schätzwert] */
  --bs-btn-h:      var(--wz-knopf-hoehe, 42px); /* Button-Höhe — K4/05: einstellbar, 42px Vorgabe */
  --bs-btn-pad-x:  24px;   /* Button-Padding horiz. (= space-lg) */
  --bs-upload-h:   96px;   /* Min-Höhe Upload-Dropzone           */  /* [Schätzwert] */

  /* ── Knopfgrößen als VIELFACHE der Grundhöhe (K5/01 A, 07.09.2026) ──
     BEFUND vom 07.09.: .btn-sm/.btn-lg/.btn-xl setzten je eine feste
     Pixelzahl (34/52/58) — und zwar NACH .btn, das brav
     var(--wz-knopf-hoehe) benutzt. Wer die Knopfhöhe auf 60 stellte, sah
     den Zurück-Knopf wachsen und den Weiter-Knopf daneben auf 52 stehen.
     Der Regler wirkte nicht unvollständig, er wirkte falsch.

     >>> DIE FAKTOREN STEHEN NUR HIER (A.2). <<< In style.css werden sie
     ausschließlich über var(...) gelesen; der dortige Rückfall trägt
     dieselbe Zahl, weil wizard_kontakt.html und wizard_wp_kontakt.html
     bausteine.css heute noch nicht laden.

     Bei der Vorgabe-Grundhöhe 42 px ergeben sie
        klein  33,6  (früher 34)   normal 42,0  (früher 42)
        groß   52,5  (früher 52)   sehr groß 58,8 (früher 58)
     — also je unter einem Pixel Abweichung, dafür wachsen jetzt alle
     vier im selben Verhältnis mit. */
  --wz-knopf-klein:      0.80;   /* .btn-sm  */
  --wz-knopf-normal:     1.00;   /* .btn     — nur der Vollständigkeit halber */
  --wz-knopf-gross:      1.25;   /* .btn-lg  */
  --wz-knopf-xl:         1.40;   /* .btn-xl  — Abschluss-Knopf Schritt 8 */
  --wz-knopf-xl-schmal:  1.20;   /* .btn-xl am Telefon (früher fest 50px) */

  /* ── Farben (Marke) ── */
  --bs-accent:        #0099a2;   /* teal (Akzent)        */
  --bs-accent-dark:   #007a82;
  --bs-accent-light:  #e6f5f6;
  --bs-text:          #333333;
  --bs-text-muted:    #848484;
  --bs-field-bg:      #ffffff;
  /* K5/02: von #cbd5e1 (Schätzwert der Vorschau) auf den Wert, den der
     Wizard heute wirklich zeigt (style.css --gray-light). Damit sieht die
     Vorschau aus wie der Wizard, nicht umgekehrt.
     NEBENBEFUND für K5/03: #ebebeb gegen Weiß sind 1,15:1 Kontrast — man
     sieht kaum, wo ein Feld anfängt. 3:1 wären nötig. NICHT hier geändert,
     das wäre eine Gestaltungsentscheidung und keine Vereinheitlichung. */
  --bs-field-border:  #ebebeb;   /* Feld-Rahmen (gemessen 07.09.2026) */
  --bs-card-border:   #e2e8f0;   /* Karten-Rahmen               */
  --bs-card-head-bg:  #f8fafc;   /* Karten-Kopf-Hintergrund     */
  --bs-card-radius:   var(--bs-radius-gross);  /* Karten-Eckenradius (K5/02: folgt jetzt dem Rundungs-Regler) */
  --bs-card-border-w: 0;         /* Kartenrahmen aus; der Schatten trennt */
  --bs-textarea-h:  100px;       /* Mindesthöhe des mehrzeiligen Feldes */
  --bs-hint-size:   0.77rem;     /* Feld-Hinweis unter dem Feld (gemessener Stand) */

  /* ── Schriftgrößen ── (K5/02: in rem, damit sie der Grundschrift folgen)
     Seit K5/01 hängt die Wurzelgröße am Regler "Grundschrift". Schrift SOLL
     mitwachsen, Abstände nicht — deshalb stehen die Schriftgrößen hier in
     rem und die Abstände weiter in px.
     Die Zahlen sind die, die der Wizard heute WIRKLICH zeigt (gemessen am
     07.09.2026), nicht die Schätzwerte von Tag 35:
        Beschriftung 0.78rem = 12,48px   (vorher als 13px notiert)
        Feldtext     0.9375rem = 15px    (vorher als 14px notiert)          */
  --bs-label-size:         0.78rem;   /* Feld-Beschriftung / Label       */
  --bs-input-size:         0.9375rem; /* Text im Eingabefeld             */
  --bs-card-title-size:    1rem;      /* Karten-Überschrift              */
  --bs-card-subtitle-size: 0.82rem;   /* Karten-Unterschrift             */
  --bs-slider-label-size:  0.82rem;   /* Beschriftung über Slider        */
  --bs-yn-size:            0.88rem;   /* Ja/Nein Button-Text             */
  --bs-ocr-size:           0.82rem;   /* OCR-Upload Text (Status-Zeilen)  */
  --bs-dz-size:            0.88rem;   /* Text IN der Ablageflaeche (B9/B10)*/
  --bs-btn-size:           0.88rem;   /* Knopfbeschriftung               */
  --bs-box-size:           0.88rem;   /* Text im Hinweiskasten           */

  /* ── Überschriften (K5/02, 3e) — vier Größen aus der Grundschrift ──
     Vorher lagen sie verstreut: die Karten-Überschrift in style.css
     (1.5rem), die Abschnitts-Überschrift im Stil-Block von Schritt 4,
     h3/h4 je Seite anders. */
  --bs-h1-size: 1.9rem;   /* Werbe-Überschrift, Schritt 0            */
  --bs-h2-size: 1.5rem;   /* Überschrift der Schritt-Karte           */
  --bs-h3-size: 1.15rem;  /* Abschnitts-Überschrift                  */
  --bs-h4-size: 1rem;     /* Zwischenüberschrift                     */

  /* ── DIE FÜNF FELDBREITEN, IN ZEICHEN (K5/02, 3b) ──────────────────
     Dirk: "sehr kurz 5 · kurz 10 · mittel 20 · lang 40 · ganze Zeile 60",
     jede ein Regler in Einerschritten. >>> IM ZWEIFEL DIE NÄCHSTGRÖSSERE.
     NIE ABGESCHNITTEN. <<<
     Gerechnet wird in ch — der Breite der Ziffer 0 in der Schrift, die das
     Feld gerade trägt. Damit folgt die Feldbreite automatisch der
     Grundschrift, und "10 Zeichen" heißt auch bei 24px noch 10 Zeichen.
     Am Telefon greift keine davon: dort steht alles auf voller Breite
     untereinander (siehe ganz unten in dieser Datei). */
  --bs-feld-sehr-kurz:  5;
  --bs-feld-kurz:      10;
  --bs-feld-mittel:    20;
  --bs-feld-lang:      40;
  --bs-feld-voll:      60;

  /* ── Maße (Tag 35) ── */
  --bs-card-body-h:  auto;   /* Karten-Body Höhe                     */
  --bs-card-btn-w:   auto;   /* Button in Karte: Breite              */
  /* NACHPRUEFUNG 07.09.2026 — HIER WAR 42px FEST, UND DAS WAR EIN
     RUECKFALL AUS K5/02.
     .bs-card-body .bs-btn setzt diese Höhe und ist mit zwei Klassen
     stärker als .bs-btn allein. Solange die Wizard-Knöpfe .btn hießen,
     traf die Regel nie — sie war für die Vorschauseite gedacht. Seit der
     Vereinheitlichung heißen sie .bs-btn, und damit bekam JEDER Knopf
     innerhalb eines Karten-Körpers wieder eine feste Höhe.
     GEMESSEN: mit Knopfhöhe 60 blieb der Zurück-Knopf auf Schritt 2 und
     Schritt 6 bei 42 px — dort liegt der Karten-Fuß im Karten-Körper.
     Auf den übrigen neun Seiten liegt er daneben, deshalb fiel es nicht
     eher auf. >>> GENAU DER FEHLER, DEN K5/01 A BESEITIGEN SOLLTE. <<<
     Jetzt folgt der Karten-Knopf der Grundhöhe; die Vorschau kann das
     Token weiter überschreiben, wenn sie eine andere Höhe zeigen will. */
  --bs-card-btn-h:   var(--bs-btn-h);   /* Button in Karte: Höhe */
  --bs-yn-btn-w:     70px;   /* Ja/Nein Button Breite                */
  /* K8/01b (17.09.2026): die Hoehe kommt jetzt aus dem Stellwerk, und zwar
     ueber --wz-yn-hoehe — nicht direkt. Grund steht in der Telefonregel
     unten: ein Wert auf <html style> schluege sonst die 44 px. Leer = 38. */
  --bs-yn-btn-h:     var(--wz-yn-hoehe, 38px);   /* Ja/Nein Button Höhe */
  --bs-field-gap-x:  16px;   /* Feld-Abstand horizontal              */
  --bs-field-gap-y:  12px;   /* Feld-Abstand vertikal                */

  /* ── Flächen/Rahmen (Tag 35) ── */
  --bs-page-bg:     #ffffff;          /* Seiten-Hintergrund          */
  --bs-page-border: var(--bs-border); /* Seiten-Rahmen               */

  /* ── Boxen ── */
  --bs-info-bg:   #e6f5f6;  --bs-info-border:   var(--bs-accent);  --bs-info-text:   #134e52;   /* K4/04: Rand = Firmenfarbe */
  --bs-hint-bg:   #fff7ed;  --bs-hint-border:   #f59e0b;  --bs-hint-text:   #92400e;
  --bs-result-bg: #fdf0e3;  --bs-result-border: #f5c18a;  --bs-result-text: #b8650f;

  /* ── Erweiterte Farb-Rollen (FARBEN_WIZARD.txt TEIL 2) ── */
  /* Marke — Sekundaer (CTA/Highlight; = --solar-orange / DB akzentfarbe) */
  --bs-secondary:      #d77a1a;
  --bs-secondary-dark: #b8650f;
  /* Text */
  --bs-text-heading:   #0f172a;   /* dunkle Ueberschriften (slate-900) */
  --bs-text-secondary: #64748b;   /* sekundaerer Text (slate-500)      */
  --bs-text-faint:     #94a3b8;   /* Platzhalter/sehr hell (slate-400) */
  /* Flaechen / Rahmen */
  --bs-bg-soft:        #f8fafc;   /* weiche Flaeche (= --bs-card-head-bg) */
  --bs-border:         #e2e8f0;   /* Standard-Rahmen (= --bs-card-border) */
  /* Status — Erfolg / Ampel "ausgefuellt" */
  --bs-success:        #16a34a;
  --bs-success-text:   #15803d;
  --bs-success-bg:     #f0fdf4;
  --bs-success-border: #bbf7d0;
  /* Status — Warnung (= --bs-hint-border) */
  --bs-warning:        #f59e0b;
  --bs-warning-bg:     #fef3c7;   /* K5/02: aus style.css --warning-light */
  --bs-warning-text:   #d97706;   /* K5/02: aus style.css --warning       */
  /* Status — Fehler */
  --bs-error:          #dc2626;
  --bs-error-strong:   #ef4444;
  --bs-error-bg:       #fee2e2;
  /* Status — Info */
  --bs-info:           #0284c7;
  /* Header-Hintergrund (an firma_einstellungen.header_farbe koppelbar) */
  --bs-header-bg:      #1e3a5f;
}

/* ═══════════════ B0 — Inhalts-Container (.bs-page) ══════════════════
   Prinzip "breit vor lang" — Feld-Zeilen lieber mehr Spalten nebeneinander
   (.bs-row .cols-N) als alles untereinander.

   ACHTUNG (21.08.2026): DIESE KLASSE IST NICHT DER BREITEN-BESITZER DES
   WIZARDS und gehoert dort auch nicht mehr hin. Sie war es bis heute in
   Schritt 1 — als einzigem von neun. Die Wizard-Breite regelt jetzt
   .wizard-main ueber --wizard-breite (style.css), das denselben Wert
   --bs-page-max liest.
   ZWEI GRUENDE, warum .bs-page dafuer nicht taugt:
     1. Sie braucht EINEN Inhalts-Container. Schritt 0 hat drei
        gleichrangige Bloecke unter <main>, Schritt 2 hat vier — dort gibt
        es kein Element, an das man sie haengen koennte, ohne eines zu
        erfinden.
     2. Sie bringt Flaeche und Rahmen mit (--bs-page-bg/--bs-page-border).
        Auf einer Karte ist das ein zusaetzlicher 1px-Rahmen, den keine
        andere Karte im Wizard hat; auf <main> waere es ein weisser Kasten
        um die ganze Seite.
   .bs-page bleibt fuer die Musterseite (00_Frontend_Bausteine.html) und
   fuer kuenftige reine Bausteine-Seiten. Im Wizard: NICHT verwenden. */
.bs-page { max-width: var(--bs-page-max); margin-inline: auto; padding-inline: 16px; box-sizing: border-box; background: var(--bs-page-bg); border: 1px solid var(--bs-page-border); }

/* ═══════════════ B2 — Eingabefeld (.bs-field / .bs-label / .bs-input) ═══
   Beschriftung oben, Feld, Hinweis klein unten.

   K5/02: Hier lag die zweite große Dublette. style.css hatte
   .form-group / .form-label / .form-control / .form-hint, bausteine.css
   hatte .bs-field mit denselben drei Teilen — mit ANDEREN Werten:
       Feldhöhe   40 (bs) gegen 44 (form)     -> 44, der gemessene Stand
       Feldschrift 14 (bs) gegen 15 (form)    -> 15
       Rahmen     1px #cbd5e1 gegen 1,5px #ebebeb -> 1,5px #ebebeb
       Beschriftung 13px/600/normal gegen 0.78rem/700/GROSSBUCHSTABEN
                                              -> die Großbuchstaben, weil
                                                 64 von 80 Beschriftungen
                                                 im Wizard so aussehen.
   Auf Schritt 1 wachsen die Felder dadurch von 40 auf 44px. Das ist die
   einzige beabsichtigte Änderung am Aussehen dieser Seite. */
.bs-field { display: flex; flex-direction: column; gap: 6px; }

/* Die Beschriftung über dem Feld */
.bs-label,
.bs-field > label {
  font-size: var(--bs-label-size);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bs-text);
  /* 13.09.2026 — deutsche Bandwurmwoerter. "Grundbuchblattnummer" laesst
     sich nicht umbrechen und stand am Telefon 8 px ueber seiner Spalte,
     sobald die Beschriftungsschrift hochgestellt war. Diese Zeile bricht
     NUR Woerter, die sonst gar nicht passen — normale Beschriftungen
     bleiben unberuehrt. Dirks Regel: nie abgeschnitten. */
  overflow-wrap: break-word;
}
.bs-label .req, .bs-field > label .req { color: var(--bs-secondary); margin-left: 2px; }

/* Das Feld selbst */
.bs-input,
.bs-field > input,
.bs-field > select,
.bs-field > textarea {
  height: var(--bs-field-h);
  border: var(--bs-field-border-w) solid var(--bs-field-border);
  border-radius: var(--bs-radius);
  padding: 0 var(--bs-field-pad-x);
  font-family: inherit;
  font-size: var(--bs-input-size);
  color: var(--bs-text);
  background: var(--bs-field-bg);
  width: 100%;
  box-sizing: border-box;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.bs-input:focus, .bs-field > input:focus, .bs-field > select:focus, .bs-field > textarea:focus {
  border-color: var(--bs-accent);
  box-shadow: 0 0 0 3px rgba(var(--bs-accent-rgb, 0,153,162), 0.12);
}
.bs-input::placeholder { color: var(--bs-text-faint); }
.bs-input:disabled  { background: var(--bs-bg-soft); color: var(--bs-text-muted); cursor: not-allowed; }
.bs-input:read-only { background: var(--bs-bg-soft); color: var(--bs-text-muted); }
.bs-input.is-error  { border-color: var(--bs-error); }
/* Die Pflichtfeld-Ampel (K4/02, hierher gezogen in K5/02).
   rosa = Pflichtfeld noch leer — bewusst KEIN Fehler-Rot, es ist ja
   kein Fehler, sondern eine Erinnerung. Gesteuert von initAmpel()
   in wizard-logo-loader.js. */
.bs-input.pf-leer { border-color: #f9a8d4 !important; background: #fff1f8 !important; }
.bs-input.pf-ok   { border-color: #86efac !important; background: #f0fdf4 !important; }
.bs-input.is-valid  { border-color: var(--bs-success); }
/* Mehrzeilig: Höhe wächst, Innenabstand rundum */
textarea.bs-input, .bs-field > textarea {
  height: auto; min-height: var(--bs-textarea-h, 100px);
  padding: var(--bs-field-pad-x); resize: vertical; line-height: 1.5;
}
/* Auswahlfeld: eigener Pfeil statt des Browser-Pfeils.
   K5/02: kam aus style.css (select.form-control). Der Pfeil ist als
   Data-URI eingebettet — kein zweiter Netzabruf, kein fremder Server. */
select.bs-input, .bs-field > select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23848484' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}

.bs-hint, .bs-field .bs-hint { font-size: var(--bs-hint-size, 0.78rem); color: var(--bs-text-muted); line-height: 1.4; }

/* ═══════════ DIE FÜNF FELDBREITEN (K5/02, 3b) ═══════════════════════
   Dirks Vorgabe: "Da, wo Text drin steht, sollen die Felder sich an der
   Textlänge orientieren und nicht dreimal so breit sein wie der Text."
   >>> IM ZWEIFEL DIE NÄCHSTGRÖSSERE. NIE ABGESCHNITTEN. <<<
   Gerechnet: Zeichen × 1ch + Innenabstand links/rechts + Rahmen.
   1ch ist die Breite der Ziffer 0 in der Schrift des Feldes; Buchstaben
   sind im Mittel schmaler, die Breite ist also großzügig gerechnet. */
/* ZWEI KLASSEN, NICHT EINE — nachgemessen am 07.09.2026: .bs-field > input
   traegt width:100% und ist mit einer Klasse PLUS einem Typ staerker als eine
   Klasse allein. Mit .bs-input davor gewinnt die Breite. */
.bs-input.bs-b5, .bs-input.bs-b10, .bs-input.bs-b20,
.bs-input.bs-b40, .bs-input.bs-b60 { max-width: 100%; }
.bs-input.bs-b5  { width: calc(var(--bs-feld-sehr-kurz) * 1ch + 2 * var(--bs-field-pad-x) + 2 * var(--bs-field-border-w)); }
.bs-input.bs-b10 { width: calc(var(--bs-feld-kurz)      * 1ch + 2 * var(--bs-field-pad-x) + 2 * var(--bs-field-border-w)); }
.bs-input.bs-b20 { width: calc(var(--bs-feld-mittel)    * 1ch + 2 * var(--bs-field-pad-x) + 2 * var(--bs-field-border-w)); }
.bs-input.bs-b40 { width: calc(var(--bs-feld-lang)      * 1ch + 2 * var(--bs-field-pad-x) + 2 * var(--bs-field-border-w)); }
.bs-input.bs-b60 { width: calc(var(--bs-feld-voll)      * 1ch + 2 * var(--bs-field-pad-x) + 2 * var(--bs-field-border-w)); }
/* Auswahlfelder brauchen zusaetzlich den Platz fuer den Pfeil. */
select.bs-input.bs-b5, select.bs-input.bs-b10, select.bs-input.bs-b20,
select.bs-input.bs-b40, select.bs-input.bs-b60 { width: calc(var(--breite, 0px) + 22px); }
select.bs-input.bs-b5  { --breite: calc(var(--bs-feld-sehr-kurz) * 1ch + 2 * var(--bs-field-pad-x) + 2 * var(--bs-field-border-w)); }
select.bs-input.bs-b10 { --breite: calc(var(--bs-feld-kurz)      * 1ch + 2 * var(--bs-field-pad-x) + 2 * var(--bs-field-border-w)); }
select.bs-input.bs-b20 { --breite: calc(var(--bs-feld-mittel)    * 1ch + 2 * var(--bs-field-pad-x) + 2 * var(--bs-field-border-w)); }
select.bs-input.bs-b40 { --breite: calc(var(--bs-feld-lang)      * 1ch + 2 * var(--bs-field-pad-x) + 2 * var(--bs-field-border-w)); }
select.bs-input.bs-b60 { --breite: calc(var(--bs-feld-voll)      * 1ch + 2 * var(--bs-field-pad-x) + 2 * var(--bs-field-border-w)); }

/* ═══════════ HÄKCHEN MIT TEXT (.bs-check) ═══════════════════════════
   K5/02: kam aus style.css (.form-check / .form-check-label). Kästchen und
   Text sind EINE anklickbare Zeile — deshalb ein Baustein und nicht zwei. */
.bs-check { display: flex; align-items: flex-start; gap: var(--space-sm, 8px); cursor: pointer; }
.bs-check input[type="checkbox"],
.bs-check input[type="radio"] {
  width: 18px; height: 18px; accent-color: var(--bs-accent);
  margin-top: 2px; flex-shrink: 0; cursor: pointer;
}
.bs-check-label { font-size: var(--bs-box-size); color: var(--bs-text); line-height: 1.5; }

/* ═══════════════ B3 — Datei-Feld (.bs-file) ═════════════════════════
   "Datei auswählen"-Button + Dateiname, gleiche Höhe/Optik wie .bs-field. */
.bs-file { display: flex; flex-direction: column; gap: 4px; }
.bs-file > label { font-size: var(--bs-label-size); font-weight: 600; color: var(--bs-text); }
.bs-file > input[type="file"] {
  height: var(--bs-field-h);
  border: 1px solid var(--bs-field-border);
  border-radius: var(--bs-radius);
  padding: 6px 8px; font-size: var(--bs-input-size); color: var(--bs-text-muted);
  background: var(--bs-field-bg); width: 100%; box-sizing: border-box; cursor: pointer;
}
.bs-file > input[type="file"]::file-selector-button {
  border: 1px solid var(--bs-field-border); background: var(--bs-card-head-bg);
  border-radius: var(--bs-radius); padding: 4px 10px; margin-right: 10px;
  cursor: pointer; font-weight: 600; color: var(--bs-text); font-size: .82rem;
}
.bs-file .bs-hint { font-size: .74rem; color: var(--bs-text-muted); }

/* ═══════════════ B4 — Feld-Zeile (.bs-row + .cols-N) ════════════════ */
.bs-row { display: grid; gap: var(--bs-field-gap-y) var(--bs-field-gap-x); grid-template-columns: 1fr; align-items: end; }
/* Beschriftung über einem Slider (B5) */
.bs-sr-label { font-size: var(--bs-slider-label-size); font-weight: 600; color: var(--bs-text); margin-bottom: 4px; }
/* ══ 13.09.2026 — FLIESSZEILE STATT STARRER SPALTEN ═══════════════════
   Bericht: 03_Konzept/BERICHTE/BERICHT_Wizard_Ueberlauf_2026-09-13.txt

   HIER STAND:  grid-template-columns: repeat(N, 1fr)

   >>> "1fr" HEISST NICHT "EIN N-TEL". Es heisst "ein N-tel, aber NIEMALS
       schmaler als der Inhalt". <<< Seit K5/02 traegt jedes Feld eine
   feste Breite in ZEICHEN (bs-b5/10/20/40/60). Damit gibt das BREITESTE
   Feld einer Spalte deren Breite vor — auch fuer die Reihen darunter,
   die dort ein ganz anderes Feld stehen haben.

   GEMESSEN auf Schritt 1 (Kontaktdaten, .cols-3, fuenf Felder):
       Spalte 1 = max(Anrede 262, Telefon 240)  =  262 px
       Spalte 2 = max(Vorname 240, E-Mail 651)  =  651 px  <-- die E-Mail
       Spalte 3 = Nachname                      =  445 px
       + zwei Abstaende                         =   32 px
       ------------------------------------------------
       zusammen 1390 px in einem Kasten von 984 px
   Der Nachname stand danach 358 px ausserhalb der Karte — abgeschnitten,
   und die Seite liess sich nicht einmal dorthin schieben. Der Nachname
   war nie zu breit; er stand in einer Spalte, die ein anderes Feld
   breit gemacht hatte. (max-width:100% weiter oben hilft dagegen NICHT:
   die Spalte wird aus dem Feld errechnet, danach ist 100 % der Spalte
   genau die Feldbreite — die Schranke greift gegen sich selbst.)

   >>> JETZT: jedes Feld so breit, wie sein Regler es sagt. Passt das
       naechste nicht mehr daneben, BRICHT DIE ZEILE UM, statt etwas aus
       der Karte zu schieben. <<< Eine Fliesszeile KANN nicht
   abschneiden — das schliesst die Fehlerart, nicht nur den einen Fall.
   Dreht Dirk morgen an Schriftgroesse oder Feldbreite, bricht die Zeile
   frueher um; sie verliert nie ein Feld.

   KEINE FESTE PIXELZAHL: die Breiten kommen aus den fuenf Zeichen-
   Reglern (--bs-feld-*), der Abstand aus --bs-field-gap-x, die Hoehe
   aus --bs-field-h. Hier steht nur, WIE umgebrochen wird.

   flex-shrink bleibt 1 (mit min-width:0): ein einzelnes Feld, das auch
   allein nicht in die Karte passt (b5 auf 80 Zeichen bei schmalster
   Seite), schrumpft dann lieber, als ueber den Rand zu stehen —
   Dirks Regel "nie abgeschnitten" schlaegt "so breit wie der Regler".

   DIE ZWEI ALTEN UMBRUCH-PUNKTE (760 px / 560 px) SIND ENTFALLEN. Sie
   schalteten cols-3/cols-5 auf 2 bzw. 1 Spalte — geratene Schwellen,
   die eine Fliesszeile nicht braucht: sie bricht dort um, wo es
   tatsaechlich eng wird. Der 640er-Block weiter unten BLEIBT; er setzt
   am Telefon alle fuenf Breiten auf 100 %, und dann steht ohnehin jedes
   Feld allein in seiner Zeile. */
.bs-row.cols-2, .bs-row.cols-3, .bs-row.cols-5 {
  display: flex;
  flex-wrap: wrap;
}
.bs-row.cols-2 > *, .bs-row.cols-3 > *, .bs-row.cols-5 > * {
  flex: 0 1 auto;
  min-width: 0;
}

/* ═══════════════ B5 — Slider-Zeile (.bs-slider-row, R71) ════════════
   Slider ~halbe Breite + Wert + Eingabe, EINE Zeile, kein Umbruch. */
.bs-slider-row { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.bs-slider-row > input[type="range"] { flex: 1 1 46%; max-width: 50%; min-width: 90px; accent-color: var(--bs-accent); }
.bs-slider-row .bs-val { min-width: 56px; text-align: center; font-weight: 700; color: var(--bs-accent); font-family: 'DM Mono', monospace; flex-shrink: 0; }
.bs-slider-row .bs-sr-input { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.bs-slider-row .bs-sr-input input {
  width: 92px; height: var(--bs-field-h); border: 1px solid var(--bs-field-border);
  border-radius: var(--bs-radius); padding: 0 8px; box-sizing: border-box;
}
@media (max-width: 640px) {
  .bs-slider-row { flex-wrap: wrap; }
  .bs-slider-row > input[type="range"] { flex: 1 1 100%; max-width: 100%; }
}

/* ═══════════════ B6 — Auswahl-Zeile (.bs-choice-row) ════════════════
   Label links, zwei Karten ganz rechts, eine Zeile. Zwei Optik-Varianten:
   .style-radio (Kreis) und .style-check (eckiger Haken). */
.bs-choice-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bs-choice-row > .bs-choice-label { font-weight: 600; color: var(--bs-text); }
.bs-choice-cards { display: flex; gap: 8px; flex-shrink: 0; }
.bs-choice-card {
  display: flex; align-items: center; gap: 8px;
  border: 2px solid var(--bs-field-border); border-radius: var(--bs-radius);
  padding: 9px 14px; cursor: pointer; background: var(--bs-field-bg);
  min-width: 90px; user-select: none;
}
.bs-choice-card:hover { border-color: var(--bs-accent); }
.bs-choice-card.active { border-color: var(--bs-accent); background: var(--bs-accent-light); }
.bs-choice-card .bs-choice-txt { font-weight: 700; font-size: .9rem; color: var(--bs-text); }
.bs-choice-card.active .bs-choice-txt { color: var(--bs-accent-dark); }
/* Indikator-Grundform */
.bs-choice-ind { flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: .7rem; font-weight: 700; }
/* Variante style-radio: runder Kreis */
.style-radio .bs-choice-ind { width: 16px; height: 16px; border: 2px solid var(--bs-field-border); border-radius: 50%; }
.style-radio .bs-choice-card.active .bs-choice-ind { border-color: var(--bs-accent); background: var(--bs-accent); box-shadow: inset 0 0 0 3px #fff; }
/* Variante style-check: eckiger Haken */
.style-check .bs-choice-ind { width: 18px; height: 18px; border: 2px solid var(--bs-field-border); border-radius: 4px; }
.style-check .bs-choice-card.active .bs-choice-ind { background: var(--bs-accent); border-color: var(--bs-accent); }
.style-check .bs-choice-card .bs-choice-ind::after { content: ""; }
.style-check .bs-choice-card.active .bs-choice-ind::after { content: "✓"; }

/* ═══════════ B6 Variante B — Inline Ja / Nein (.bs-yn-row) ═══════════
   Eine Zeile: Frage/Beschreibung links (flex:1, Umbruch erlaubt),
   zwei Kacheln Ja/Nein rechts (fix). Genau eine Kachel aktiv. */
.bs-yn-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bs-yn-row > .bs-yn-label { flex: 1; min-width: 0; font-weight: 600; color: var(--bs-tx, #334155); text-transform: none; letter-spacing: normal; }
.bs-yn-cards { display: flex; gap: 8px; flex-shrink: 0; }
.bs-yn-option {
  display: flex; align-items: center; justify-content: center;
  min-width: var(--bs-yn-btn-w); height: var(--bs-yn-btn-h); padding: 0 18px;
  border: 1px solid var(--bs-border, #e2e8f0); border-radius: 6px;
  background: #fff; color: var(--bs-tx, #334155);
  font-weight: 700; font-size: var(--bs-yn-size); text-transform: none; letter-spacing: normal;
  cursor: pointer; user-select: none;
  transition: all 0.2s;
}
.bs-yn-option input[type="radio"], .bs-yn-option input[type="checkbox"] { display: none; }
.bs-yn-option:hover { border-color: var(--bs-accent, #0099a2); }
.bs-yn-option.active {
  background: var(--bs-accent, #0099a2); border-color: var(--bs-accent, #0099a2); color: #fff;
}
/* Responsive: unter 480px brechen Ja/Nein unter den Text um */
@media (max-width: 480px) {
  .bs-yn-row > .bs-yn-label { flex: 1 1 100%; }
  .bs-yn-cards { width: 100%; }
  .bs-yn-option { flex: 1; }
}

/* ═══════════════ B7 — Karte (.bs-card + .bs-card-head) ══════════════
   K5/02, 3c: EINE GRUNDKARTE, die anderen bauen darauf auf.
   Die Dublette war .card in style.css (Schatten, kein Rahmen, 12px
   Rundung) gegen .bs-card hier (Rahmen, kein Schatten). Der Wizard zeigt
   heute die Fassung mit Schatten — die gewinnt, weil sie auf allen elf
   Seiten steht. Der Rahmen bleibt als Token abschaltbar (Vorgabe 0). */
.bs-card {
  background: var(--bs-field-bg);
  border: var(--bs-card-border-w, 0) solid var(--bs-card-border);
  border-radius: var(--bs-card-radius);
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.09), 0 2px 6px rgba(0,0,0,0.05));
  overflow: hidden;
}
/* Der Fuß mit Zurück/Weiter. K5/02: kam aus style.css .card-footer */
.bs-card-fuss {
  padding: var(--space-md, 16px) var(--space-xl, 32px);
  border-top: 1px solid var(--bs-border);
  background: var(--bs-bg-soft);
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--space-md, 16px);
}
/* 17.09.2026 (K8/01, B.3): GEMESSEN — --bs-card-gap wirkt AUSSCHLIESSLICH
   hier, und .bs-card--rahmen kommt im ganzen Projekt kein einziges Mal im
   Markup vor (gesucht ueber wizard\ und 01_Admin\). Der Regler ist also
   nicht defekt, sondern sein Baustein wird nicht benutzt.
   >>> NICHT ENTFERNT: <<< Anders als die toten .toggle-group-Regeln ist
   das eine ANGEBOTENE Variante der Karte (Rahmen statt Schatten), die der
   Baukasten bereitstellt. Sie zu loeschen naehme eine Moeglichkeit weg,
   statt eine Leiche zu beseitigen. Die Dauerpruefung
   (_pruefung\browser\regler_wirksamkeit.js) meldet den Fall weiterhin —
   das ist gewollt: wird die Variante einmal benutzt, muss der Regler
   wirken. */
.bs-card--rahmen { border-width: 1px; box-shadow: none; margin-bottom: var(--bs-card-gap); }
.bs-card-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--bs-card-head-bg); border-bottom: 1px solid var(--bs-card-border); }
.bs-card-head .bs-card-icon { width: 36px; height: 36px; border-radius: var(--bs-radius); background: var(--bs-accent-light); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.bs-card-head .bs-card-title-wrap { flex: 1; min-width: 0; }
.bs-card-head h3 { font-size: var(--bs-card-title-size); font-weight: 700; color: var(--bs-text); margin: 0; }
.bs-card-head p { font-size: var(--bs-card-subtitle-size); color: var(--bs-text-muted); margin: 2px 0 0; }
.bs-card-head .bs-card-head-right { flex-shrink: 0; }
/* K5/02: Der Innenraum der Schritt-Karte hat 32px Innenabstand (style.css
   .card-body: var(--space-xl)), die Vorschau rechnete mit 16. 32 gewinnt —
   das ist der gemessene Stand auf zehn Seiten. */
.bs-card-body { padding: var(--bs-card-pad); min-height: var(--bs-card-body-h); }
/* K5/02, nachgebessert: .bs-card-body hatte display:flex + gap. Beim Umzug
   waeren dadurch ZWISCHEN ALLEN Kindern jeder Karte 12px dazugekommen —
   Schritt 4 wurde 62px laenger, ohne dass es jemand wollte. Das Stapeln ist
   jetzt eine eigene Klasse, die nur die Vorschau benutzt. */
.bs-card-body.gestapelt { display: flex; flex-direction: column; gap: var(--bs-row-gap); }
/* Button in der Karte: Breite/Höhe per Token (B7) */
.bs-card-body .bs-btn { width: var(--bs-card-btn-w); height: var(--bs-card-btn-h); }

/* ═══════════════ HINWEISKÄSTEN (K5/02, 3d) ══════════════════════════
   Eine Form, ein Abstand, eine Schrift — die Farbe unterscheidet.
   Die Dublette war .alert/.alert-* in style.css gegen .bs-box-* hier;
   beide mit anderer Rundung (12 gegen 8), anderem Innenabstand
   (16/24 gegen 12/16) und anderer Schrift (0.88 gegen 0.85rem).
   Der gemessene Stand des Wizards gewinnt: 16/24, große Rundung, 0.88rem.

   >>> DIE VIER STATUSFARBEN BLEIBEN GETRENNT. <<< Ein Fehler bleibt rot,
   auch wenn die Hausfarbe rot ist: .bs-box-fehler/-hint/-erfolg lesen die
   festen Status-Token, NICHT --bs-accent. Nur .bs-box-info (sachlicher
   Hinweis) und .bs-box-akzent tragen die Firmenfarben — dort ist die
   Farbe Schmuck, keine Bedeutung. */
.bs-box,
.bs-box-info, .bs-box-hint, .bs-box-erfolg, .bs-box-fehler, .bs-box-akzent {
  display: flex;
  gap: var(--space-md, 16px);
  padding: var(--space-md, 16px) var(--space-lg, 24px);
  border-radius: var(--bs-radius-gross);
  font-size: var(--bs-box-size);
  line-height: 1.5;
  border-left: 4px solid transparent;
}
.bs-box-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
/* Firmenfarben — Schmuck */
.bs-box-info   { background: var(--bs-accent-light);    border-left-color: var(--bs-accent);    color: var(--bs-accent-dark); }
.bs-box-akzent { background: var(--bs-result-bg);       border-left-color: var(--bs-secondary); color: var(--bs-secondary-dark); }
/* Statusfarben — Bedeutung, deshalb fest */
.bs-box-erfolg { background: var(--bs-success-bg);      border-left-color: var(--bs-success);   color: var(--bs-success-text); }
.bs-box-hint   { background: var(--bs-warning-bg, #fef3c7); border-left-color: var(--bs-warning); color: var(--bs-warning-text, #d97706); }
.bs-box-fehler { background: var(--bs-error-bg);        border-left-color: var(--bs-error);     color: var(--bs-error); }

/* Ergebniszeile — eigener Baustein, kein Hinweiskasten */
.bs-box-result { padding: var(--space-md, 16px) var(--space-lg, 24px); border-radius: var(--bs-radius);
                 font-size: var(--bs-box-size); line-height: 1.5;
                 background: var(--bs-result-bg); border: 1px solid var(--bs-result-border); color: var(--bs-result-text);
                 display: flex; align-items: center; justify-content: space-between; }
.bs-box-result .bs-box-result-val { font-size: 1.25rem; font-weight: 800; }

/* ═══════════════ ÜBERSCHRIFTEN (K5/02, 3e) ══════════════════════════
   Vier Größen, alle aus der Grundschrift gerechnet (rem). Vorher lagen
   sie verstreut in style.css und in den Stil-Blöcken der Seiten. */
.bs-h1, .bs-h2, .bs-h3, .bs-h4 { font-family: inherit; font-weight: 700; line-height: 1.25; color: var(--bs-text-heading); }
.bs-h1 { font-size: var(--bs-h1-size); }
.bs-h2 { font-size: var(--bs-h2-size); }
.bs-h3 { font-size: var(--bs-h3-size); }
.bs-h4 { font-size: var(--bs-h4-size); }

/* Gestapelte Boxen: vertikaler Abstand = --bs-box-gap */
.bs-box-stack { display: flex; flex-direction: column; gap: var(--bs-box-gap); }

/* ═══════════════ B8 — Buttons (.bs-btn .primary/.secondary) ═════════
   Optik 1:1 aus style.css .btn / .btn-primary / .btn-secondary. */
.bs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--bs-btn-h); padding: 0 var(--bs-btn-pad-x);
  border-radius: var(--bs-radius); border: none;
  /* K5/02, nachgemessen: der durchsichtige 1,5px-Rahmen machte JEDEN
     gefuellten Knopf 3px breiter als vorher (Weiter 166 -> 168). Den
     Rahmen tragen jetzt nur die Umriss-Knoepfe, genau wie frueher .btn. */
  /* 16.09.2026 (Teil C): HIER STAND EINE FESTE ZAHL. Der Regler
     "Knopfbeschriftung" (--bs-btn-size) wirkte dadurch NUR auf .klein/.gross/
     .xl, nicht auf den normalen Knopf — ein Regler ohne Wirkung. Damit haette
     sich die Schrift beim Senken der Knopfhoehe gar nicht mitsenken koennen
     (C.5). Der Vorgabewert ist derselbe, die Optik aendert sich nicht. */
  font-family: inherit; font-size: var(--bs-btn-size, .88rem); font-weight: 600; line-height: 1;
  cursor: pointer; box-sizing: border-box; white-space: nowrap;
  letter-spacing: .01em; user-select: none; text-decoration: none;
  transition: background .15s, box-shadow .15s, transform .1s;
}
.bs-btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.bs-btn:hover { text-decoration: none; }

/* ── DIE FARBEN ───────────────────────────────────────────────────────── */
/* Primär — gefüllt, Akzent */
.bs-btn.primary { background: var(--bs-accent); color: #fff; border-color: var(--bs-accent); box-shadow: 0 2px 8px rgba(var(--bs-accent-rgb, 0,153,162),.20); }
.bs-btn.primary:hover { background: var(--bs-accent-dark); border-color: var(--bs-accent-dark); transform: translateY(-1px); color: #fff; box-shadow: var(--shadow-teal, 0 4px 16px rgba(var(--bs-accent-rgb, 0,153,162),.25)); }
.bs-btn.primary:active { transform: none; box-shadow: none; }
/* Sekundär — Umriss/Akzent */
.bs-btn.secondary { background: transparent; color: var(--bs-accent); border: 1.5px solid var(--bs-accent); }
.bs-btn.secondary:hover { background: var(--bs-accent-light); color: var(--bs-accent-dark); }
/* Ghost — farbloser Nebenknopf ("Zurück"). K5/02: kam aus style.css .btn-ghost */
.bs-btn.ghost { background: transparent; color: var(--bs-text-muted); border: 1.5px solid var(--bs-border); }
.bs-btn.ghost:hover { background: var(--bs-bg-soft); color: var(--bs-text); border-color: var(--bs-text-muted); }
/* CTA — Abschluss, Sekundärfarbe. K5/02: kam aus style.css .btn-cta */
.bs-btn.cta { background: var(--bs-secondary); color: #fff; border-color: var(--bs-secondary); box-shadow: 0 2px 8px rgba(var(--bs-secondary-rgb, 215,122,26),.22); }
.bs-btn.cta:hover { background: var(--bs-secondary-dark); border-color: var(--bs-secondary-dark); box-shadow: 0 6px 20px rgba(var(--bs-secondary-rgb, 215,122,26),.30); transform: translateY(-1px); color: #fff; }
.bs-btn.cta:active { transform: none; }
/* Löschen. K5/02: kam aus style.css .btn-danger */
.bs-btn.danger { background: var(--bs-error); color: #fff; border-color: var(--bs-error); }
.bs-btn.danger:hover { background: #b91c1c; border-color: #b91c1c; transform: translateY(-1px); color: #fff; }

/* ── DIE GRÖSSEN — VIELFACHE DER GRUNDHÖHE (K5/01 A) ──────────────────
   >>> HIER STAND DER FEHLER, DEN K5 ANGESTOSSEN HAT: <<< derselbe Knopf
   "Weiter" war 42 px auf Schritt 1, 52 px auf Schritt 2 bis 7 und 58 px
   auf Schritt 8 — drei Höhen, zwei Baukästen. Jetzt eine Klasse, drei
   Größen, alle aus --wz-knopf-hoehe gerechnet. */
.bs-btn.klein { height: calc(var(--bs-btn-h) * var(--wz-knopf-klein, 0.80)); padding: 0 calc(var(--bs-btn-pad-x) * 2 / 3);  font-size: calc(var(--bs-btn-size) * 0.8  / 0.88); }
.bs-btn.gross { height: calc(var(--bs-btn-h) * var(--wz-knopf-gross, 1.25)); padding: 0 calc(var(--bs-btn-pad-x) * 2);      font-size: calc(var(--bs-btn-size) * 1.0  / 0.88); border-radius: var(--bs-radius-gross); }
.bs-btn.xl    { height: calc(var(--bs-btn-h) * var(--wz-knopf-xl, 1.40));    padding: 0 calc(var(--bs-btn-pad-x) * 8 / 3);  font-size: calc(var(--bs-btn-size) * 1.05 / 0.88); border-radius: var(--bs-radius-gross); }
/* Quadratisch (nur ein Zeichen) und über die ganze Zeile */
.bs-btn.icon  { width: var(--bs-btn-h); height: var(--bs-btn-h); padding: 0; }
.bs-btn.icon.klein { width: calc(var(--bs-btn-h) * var(--wz-knopf-klein, 0.80)); height: calc(var(--bs-btn-h) * var(--wz-knopf-klein, 0.80)); }
.bs-btn.voll  { width: 100%; }

/* ═══════════════════════════════════════════════════════════════════════
   16.09.2026 — AM TELEFON EINE ANDERE UNTERGRENZE ALS AM RECHNER
   ═══════════════════════════════════════════════════════════════════════
   Dirk, 16.09.: "Am Rechner klickt man mit der Maus, dort reichen 18. Am
   Telefon zaehlt die Fingerflaeche."

   >>> DIE GRENZE KANN NICHT IM STELLWERK LIEGEN. <<< Dort steht EIN
   gespeicherter Wert, den jeder Besucher bekommt — der Server weiss nicht,
   wie breit das Fenster des Kunden ist. Sie muss deshalb hier stehen: der
   Regler darf weiter bis 18 herunter, unterhalb der Umbruchbreite faengt
   ihn diese Regel ab. 640 px ist die Umbruchbreite, die der Wizard schon
   benutzt (vier weitere Stellen in dieser Datei, eine in style.css) — R65.

   >>> WELCHE ZAHL, UND WARUM NICHT UEBERALL: <<< Gemessen bei 390 Punkten
   ueber alle neun Seiten mit Vorgabewerten: 134 Tippflaechen, davon 103
   unter 44 px. Pauschal 44 zu erzwingen waere kein Nachziehen einer
   Grenze, sondern ein Redesign — und es fraesse genau den Platz, um den
   es in diesem Auftrag geht. Unter der harten WCAG-Grenze von 24 px
   (2.5.8, Stufe AA) lagen dagegen nur 37, und die verteilen sich auf
   wenige, KLEINE Bauteile. Angehoben wird deshalb, was eine eigene
   Handlung ausloest und klein ist:
       Knoepfe        42 -> 44 px   (+2 px, WCAG 2.5.5 / Apple 44)
       Ja/Nein        38 -> 44 px   (+6 px)
       Fragezeichen   22 -> 44 px   (in wizard_schritt6.html)
   NICHT angehoben:
       Ankreuzfelder in anklickbaren Karten — dort ist die GANZE Karte die
       Tippflaeche (gemessen rund 100 px hoch), das Kaestchen nur ihr Bild.
       EINGABEFELDER — gemessen 44 px hoch und 62 bis 326 px breit; sie
       erfuellen die Anforderung bereits. Ein Feld trifft man ueber seine
       Breite, ein rundes Knoepfchen nicht.

   >>> NICHT ALS FESTE HOEHE AM KNOPF. <<< Der erste Versuch setzte
   .bs-btn { min-height: 44px } — und der Prueffall [K5/02] 3 hat das zu
   Recht abgelehnt: seit K5/01 rechnet die ganze Knopffamilie aus EINER
   Grundhoehe (.klein 0,80 · .gross 1,25 · .xl 1,40). Eine feste Hoehe am
   Knopf haette am Telefon jede Abstufung eingeebnet — .klein waere so hoch
   geworden wie .gross. Angehoben wird deshalb die GRUNDHOEHE selbst; die
   Vielfachen rechnen weiter und bleiben unterscheidbar.                  */
@media (max-width: 640px) {
  :root {
    --bs-btn-h:     max(44px, var(--wz-knopf-hoehe, 42px));
    /* K8/01b: war fest 44px. Jetzt dieselbe Form wie der Knopf eine Zeile
       hoeher — mindestens die Fingerflaeche, darueber folgt der Regler. */
    --bs-yn-btn-h:  max(44px, var(--wz-yn-hoehe, 38px));
  }
}

/* ═══════════════ Dropzone (geteilt von B9/B10) ══════════════════════ */
.bs-dropzone {
  border: 2px dashed var(--bs-field-border); border-radius: var(--bs-radius);
  min-height: var(--bs-upload-h); padding: 14px 16px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 4px; cursor: pointer; background: var(--bs-card-head-bg);
  transition: border-color .15s, background .15s;
}
.bs-dropzone:hover { border-color: var(--bs-accent); background: var(--bs-accent-light); }
.bs-dropzone .bs-dz-icon { font-size: 1.6rem; }
/* 16.09.2026 (Teil C): wie beim Knopf stand hier eine feste Zahl.
   --bs-ocr-size steuert nur die Status-Zeilen darunter, nicht den Text IN der
   Ablageflaeche — beim Senken der Upload-Hoehe (B9/B10) gab es also nichts
   mitzusenken. Eigenes Token mit dem heutigen Wert als Vorgabe. */
.bs-dropzone .bs-dz-text { font-size: var(--bs-dz-size, .88rem); font-weight: 600; color: var(--bs-text); }
.bs-dropzone .bs-dz-sub  { font-size: .76rem; color: var(--bs-text-muted); }
.bs-dropzone input[type="file"] { display: none; }
/* Variante "accent" — teal-gerahmt (OCR-Look) */
.bs-dropzone.accent { border-color: var(--bs-accent); border-width: 2.5px; background: var(--bs-accent-light); }
.bs-dropzone.accent:hover { border-color: var(--bs-accent-dark); }
.bs-dropzone.accent .bs-dz-text { color: var(--bs-accent-dark); }
.bs-dropzone.accent .bs-dz-sub  { color: var(--bs-accent); }

/* ═══════════════ B9 — Foto-Upload (.bs-upload-foto) ═════════════════
   Foto-Annahme + mobil Kamera (im Markup: accept="image/*" capture).
   Optik aus style.css .upload-zone / .foto-thumb (schritt7). */
.bs-upload-foto { display: flex; flex-direction: column; gap: var(--bs-row-gap); }
.bs-upload-foto .bs-foto-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.bs-upload-foto .bs-foto-thumb {
  width: 70px; height: 52px; border-radius: var(--bs-radius);
  border: 1.5px solid var(--bs-field-border); background: var(--bs-card-head-bg);
  object-fit: cover; overflow: hidden; position: relative;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: var(--bs-text-muted);
}
.bs-upload-foto .bs-foto-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bs-upload-foto .bs-foto-del {
  position: absolute; top: -6px; right: -6px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--bs-error-strong); color: #fff; border: none;
  cursor: pointer; font-size: 12px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center; padding: 0;
}

/* ═══════════════ B10 — Dokument/OCR-Upload (.bs-upload-ocr) ═════════
   Dropzone für PDF+Bild + Hinweiszeile + Status-/Ergebnis-Zeile.
   Optik aus style.css .ocr-drop-zone / .ocr-hinweis-box / Erfolg (schritt0). */
.bs-upload-ocr { display: flex; flex-direction: column; gap: var(--bs-row-gap); }
.bs-upload-status {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border: 1px solid var(--bs-card-border); border-radius: var(--bs-radius);
  background: var(--bs-field-bg); font-size: var(--bs-ocr-size); color: var(--bs-text);
}
.bs-upload-status .bs-us-ico { flex-shrink: 0; font-size: 1.05rem; }
.bs-upload-status .bs-us-val { font-weight: 700; margin-left: auto; color: var(--bs-text); }
.bs-upload-status.ok { background: var(--bs-success-bg); border-color: var(--bs-success-border); color: var(--bs-success-text); }
.bs-upload-status.ok .bs-us-val { color: var(--bs-success-text); }

/* ═══════════════════════════════════════════════════════════════════
   AM TELEFON — DIRKS VORGABE (K5/02, 3b)
   "Wir muessen ja auch an das Mobilfunkgeraet denken."
   >>> ALLES VOLLE BREITE, UNTEREINANDER. <<< Die fuenf Feldbreiten
   gelten nur, solange nebeneinander ueberhaupt Platz ist. Darunter
   waere ein 5-Zeichen-Feld neben einem 40-Zeichen-Feld nicht mehr zu
   treffen, und ein langer Inhalt wuerde abgeschnitten — genau das,
   was die Regel verhindern soll.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .bs-input.bs-b5, .bs-input.bs-b10, .bs-input.bs-b20,
  .bs-input.bs-b40, .bs-input.bs-b60,
  select.bs-input.bs-b5, select.bs-input.bs-b10, select.bs-input.bs-b20,
  select.bs-input.bs-b40, select.bs-input.bs-b60 { width: 100%; max-width: 100%; }
  .bs-row, .bs-row.cols-2, .bs-row.cols-3, .bs-row.cols-5 { grid-template-columns: 1fr; }
  .bs-btn.gross, .bs-btn.xl { padding: 0 var(--space-xl, 32px); }
  /* K5/01 A / K5/02: der Abschluss-Knopf war am Telefon fest 50px hoch.
     1,20 x 42 = 50,4 — dieselbe Optik, aber am Regler. */
  .bs-btn.xl { height: calc(var(--bs-btn-h) * var(--wz-knopf-xl-schmal, 1.20)); font-size: calc(var(--bs-btn-size) * 0.95 / 0.88); }
}

/* ═══════════════════════════════════════════════════════════════════
   AM SCHMALEN BILDSCHIRM UND IM AUSDRUCK (K5/02)
   Diese drei Anpassungen standen in style.css und waren damit die
   letzten Stellen, an denen der alte Baukasten dort noch etwas zu
   sagen hatte. Sie gehoeren zum Baustein, also hierher.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .bs-card-body, .bs-card-fuss { padding-left: var(--space-md, 16px); padding-right: var(--space-md, 16px); }
}
/* ═══════════════ BILDRASTER (.bs-bilder, 09.10.2026) ═════════════════
   Auftrag Dirk 09.10.2026 ("Balkonkraftwerk-Seite nachbessern", Bilder): Bilder
   in DREI gleich breiten Spalten ueber die volle Inhaltsbreite, je Bild gleich
   hoch (Seitenverhaeltnis erhalten, mittig, object-fit contain), Unterschrift
   darunter, Klick vergroessert. .bs-row.cols-3 kann das nicht (Fliesszeile mit
   Breite nach Inhalt, die Bilder standen links). Am Telefon untereinander.
   Die Vergroesserung (.bs-bild-gross) liegt ueber der Seite; Klick oder Esc
   schliesst sie. Erste Verwendung: wizard/wizard_balkon.html. */
.bs-bilder {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md, 16px);
  width: 100%;
}
.bs-bilder > figure { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.bs-bilder .bs-bild-rahmen {
  height: 220px; width: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; overflow: hidden; cursor: zoom-in;
  border-radius: var(--bs-radius);
  background: linear-gradient(180deg, #ffffff, var(--bs-accent-light));
}
.bs-bilder .bs-bild-rahmen img { display: block; width: 100%; height: 100%; object-fit: contain; }
.bs-bilder figcaption { text-align: center; }
.bs-bild-gross {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; cursor: zoom-out;
  background: rgba(0, 0, 0, .82);
}
.bs-bild-gross img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--bs-radius); background: #fff; }
@media (max-width: 640px) {
  .bs-bilder { grid-template-columns: minmax(0, 1fr); }
  .bs-bilder .bs-bild-rahmen { height: auto; }
  .bs-bilder .bs-bild-rahmen img { height: auto; max-height: 320px; }
}

/* 09.10.2026: "hidden" muss auch bei Bausteinen mit eigener display-Regel wirken (.bs-box ist flex,
   .bs-bilder grid). Ohne diese Zeile zeigte die Balkonkraftwerk-Seite "Vielen Dank! Ihr Angebot ist
   unterwegs" und "Derzeit koennen wir Ihnen hier kein Balkonkraftwerk anbieten" immer an. */
.bs-box[hidden], .bs-bilder[hidden], .bs-bilder > figure[hidden] { display: none !important; }

@media print {
  .bs-btn, .bs-card-fuss { display: none !important; }
  .bs-card { box-shadow: none; border: 1px solid #ccc; }
}

/* 10.10.2026 (Balkon-Seite Punkt 5): Aufzaehlung mit Haken ("Ihre Vorteile"). style.css setzt
   ul/ol auf list-style none; diese Liste zeigt je Punkt einen Haken in der Akzentfarbe. */
.bs-liste-haken { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-xs, 4px); }
.bs-liste-haken > li { position: relative; padding-left: 1.6em; }
.bs-liste-haken > li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--bs-accent); font-weight: 700; }

/* 11.10.2026 (Zusatz Dirk 10.10.2026, Auswahlknoepfe bei schmaler Breite): Ja/Nein-Knoepfe tragen
   ihren Text ganz. Breit: feste Hoehe wie bisher (Regler wizard_yn_hoehe, K8/01b).
   Bis 480 px: Hoehe waechst mit (Mindesthoehe wie bisher), Text bricht um statt ueberzustehen,
   die Knoepfe brechen um; drei und mehr Knoepfe stehen untereinander in voller Breite
   (Eigentuemer- und Nutzungsfrage in Schritt 1). */
.bs-yn-option { text-align: center; overflow-wrap: break-word; }
@media (max-width: 480px) {
  .bs-yn-option { height: auto; min-height: var(--bs-yn-btn-h); padding-top: 6px; padding-bottom: 6px; line-height: 1.25; white-space: normal; }
  .bs-yn-cards { flex-wrap: wrap; }
  .bs-yn-option { flex: 1 1 auto; min-width: min(var(--bs-yn-btn-w), 100%); }
  .bs-yn-cards:has(> .bs-yn-option:nth-of-type(3)) { flex-direction: column; }
  .bs-yn-cards:has(> .bs-yn-option:nth-of-type(3)) > .bs-yn-option { width: 100%; }
}

/* Balkonkraftwerk-Seite (wizard_balkon.html), Sammelauftrag Teil D2, 12.10.2026:
   bis 640 px je Ausbaustufe eine Karte statt der Tabelle. */
/* 12.10.2026 (Teil D2): bis 640 px Karten statt der Tabelle; nur ids, keine neue Klasse */
#bkKarten { display: none; }
@media (max-width: 640px) { #bkTabelleWrap { display: none !important; } #bkKarten { display: block; } }
#bkKarten .bs-choice-card { display: block; margin: 0 0 10px; }
#bkKarten dl { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 8px 0 0; }
#bkKarten dt { color: var(--bs-text-muted); }
#bkKarten dd { margin: 0; text-align: right; }