/* Werkbank-Gerüst für neue Konfiguratoren (public/shop/glas/werkbank/geruest.mjs, Anleitung docs/konfiguratoren/werkbank-einbinden.md).
   Gleiche Farben und Maße wie die Werkbank P001 (werkbank.css): Weiter in Leitblau #154e8a mit weißer Schrift, Orange nur für Tipp,
   Empfehlung, Zähler und Hinweise; Text in Orange nur dunkel (#a64b0d), auf Orange dunkelblaue Schrift. Alles unter .wb (Wurzel mit
   data-werkbank), nichts hängt am Glas-Konfigurator. Keine Stile aus dem Skript: Höhe am Rechner und Kaufleiste regelt allein diese Datei.
   Spalten wie P001 (werkbank.css): links 224, rechts 392 px, ab 1600 px 424, bis 1330 px 206 und 358. Schrift ab 11 px, Bedienziele 44 px. */
.wb{--wb-tinte:#162c4b;--wb-blau:#154e8a;--wb-leise:#53677d;--wb-linie:#d5dfe7;--wb-flaeche:#f3f7fa;--wb-orange:#f2884b;--wb-orange-text:#a64b0d;--wb-orange-linie:#d9661f;--wb-orange-flaeche:#fff3e8;--wb-orange-rand:#f5c3a0;--wb-fokus:#c45a12;--wb-links:224px;--wb-rechts:392px;--wb-abstand:20px;display:grid;grid-template-columns:var(--wb-links) minmax(0,1fr) var(--wb-rechts);grid-template-areas:'auswahl mitte rechts' 'leiste leiste leiste';gap:var(--wb-abstand);align-items:start;color:var(--wb-tinte);font-size:14px;line-height:1.5}
.wb *,.wb *::before,.wb *::after{box-sizing:border-box}
.wb :is(button,input,select,textarea){font:inherit}
.wb button{cursor:pointer;color:var(--wb-tinte)}
.wb button:disabled{opacity:.45;cursor:default}
.wb :is(button,a,input,select,summary,textarea):focus-visible{outline:3px solid var(--wb-fokus);outline-offset:3px}
.wb [hidden]{display:none!important}
/* Unter der Werkbank kein Innenabstand der Behälter, sonst steht die klebende Kaufleiste am Seitenende nicht unten. */
body:has(.wb) :has(>.wb){padding-bottom:0;margin-bottom:0}
.wb :is(h2,p){margin-top:0}

/* Auswahl links */
.wb-auswahl{grid-area:auswahl;display:flex;flex-direction:column;padding:10px;background:#e8eef2;border:1px solid #d6e0e6;border-radius:16px;position:sticky;top:16px;max-height:calc(100dvh - 160px)}
.wb-auswahl-kopf{margin:2px 6px 10px}
.wb-auswahl-kopf h2{font-size:17px;line-height:1.3;margin:0 0 8px}
.wb-fortschritt{display:block;width:100%;height:4px;border:0;border-radius:4px;background:#cfdce5;overflow:hidden;appearance:none}
.wb-fortschritt::-webkit-progress-bar{background:#cfdce5;border-radius:4px}
.wb-fortschritt::-webkit-progress-value{background:#2d785a;border-radius:4px;transition:width .45s ease}
.wb-fortschritt::-moz-progress-bar{background:#2d785a;border-radius:4px}
.wb-fortschritt-text{display:block;font-size:11px;color:#4f6579;margin-top:6px}
.wb-schritte{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.wb :is(.wb-schritte,.wb-uebersicht-liste) button{display:flex;align-items:flex-start;gap:9px;width:100%;min-height:46px;margin:0 0 1px;padding:6px 8px;border:1px solid transparent;border-radius:10px;background:none;text-align:left}
.wb :is(.wb-schritte,.wb-uebersicht-liste) button[data-gesperrt]{opacity:.55;cursor:not-allowed}
.wb :is(.wb-schritte,.wb-uebersicht-liste) button.wb-aktiv{background:#fff;border-color:#9fb8c9;box-shadow:0 3px 10px #263f5610}
.wb :is(.wb-schritte,.wb-uebersicht-liste) i{flex:none;display:grid;place-items:center;width:22px;height:22px;margin-top:1px;border-radius:7px;background:#dce5eb;color:#4a6277;font-size:11px;font-style:normal}
.wb :is(.wb-schritte,.wb-uebersicht-liste) [data-erledigt] i{background:#d3e8da;color:#235e43}
.wb :is(.wb-schritte,.wb-uebersicht-liste) .wb-aktiv i{background:var(--wb-blau);color:#fff}
.wb :is(.wb-schritte,.wb-uebersicht-liste) button>span{flex:1;min-width:0}
.wb :is(.wb-schritte,.wb-uebersicht-liste) strong{display:block;font-size:12px;line-height:1.4}
.wb :is(.wb-schritte,.wb-uebersicht-liste) :is(small,em){display:block;margin-top:1px;font-size:11px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wb :is(.wb-schritte,.wb-uebersicht-liste) small{color:#4b6075}
.wb :is(.wb-schritte,.wb-uebersicht-liste) em{font-style:normal;font-weight:600;color:var(--wb-orange-text)}
.wb-auswahl-fuss{border-top:1px solid #c9d7e0;padding:8px 0 0;margin:4px 0 0;background:none}
.wb .wb-alles{width:100%;min-height:44px;padding:8px;border:1px solid #afc1cf;border-radius:8px;background:#fff;color:var(--wb-blau);font-size:12px;font-weight:700}

/* Mitte: Zeichnung mit Produktbildern im Kopf */
.wb-mitte{grid-area:mitte;display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--wb-linie);border-radius:16px}
.wb-mitte-kopf{display:flex;align-items:center;gap:12px;padding:16px 20px 8px}
.wb-mitte-kopf>div:first-child{flex:1 1 auto;min-width:0}
.wb-mitte-kopf span{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--wb-leise)}
.wb-mitte-kopf h2{font-size:16px;line-height:1.3;margin:4px 0 0;white-space:nowrap}
.wb-bilder{display:flex;gap:8px}
.wb .wb-bilder button{display:flex;flex-direction:column;align-items:stretch;width:124px;min-height:96px;padding:4px;border:1px solid #c9d5df;border-radius:9px;background:#fff}
.wb-bilder img{display:block;width:100%;height:70px;object-fit:contain;background:#f5f6f7;border-radius:5px}
.wb-bilder span{display:block;margin-top:3px;font-size:11px;font-weight:600;letter-spacing:0;color:var(--wb-tinte)}
.wb .wb-gross{min-height:44px;padding:9px 12px;border:1px solid #a7b7c7;border-radius:8px;background:#fff;font-size:12px;font-weight:600;white-space:nowrap}
.wb-zeichnung{flex:1 1 auto;min-height:260px;position:relative}
/* Unter der Zeichnung: beschriftete Knöpfe (wie "Zurücksetzen", "Vollbild", "Bedienhilfe" bei P001) und technische Daten, offen. */
.wb-werkzeuge{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;padding:0 20px 12px}
.wb .wb-werkzeuge button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:1px solid #c9d5df;border-radius:10px;background:#fff;color:var(--wb-blau);font-size:13px;font-weight:600;white-space:nowrap}
.wb-technik{flex:none;margin:0;border-top:1px solid var(--wb-linie);background:#f7f9fb;border-radius:0 0 16px 16px}
.wb-technik>summary{display:flex;align-items:center;min-height:36px;padding:6px 20px;font-size:12px;font-weight:600;cursor:pointer}
.wb-technik-inhalt{padding:0 20px 10px;font-size:12px;color:#405568}

/* Rechts: ein Schritt */
.wb-rechts{grid-area:rechts;min-width:0;padding:22px;background:#fff;border:1px solid var(--wb-linie);border-radius:16px;position:relative}
.wb-schritt-kopf{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.wb-schritt-kopf>span{margin-right:auto;font-size:11px;font-weight:700;letter-spacing:.12em;color:#526d80}
.wb .wb-tipp-knopf{min-height:44px;padding:8px 12px;border:1px solid #c5d8ee;border-radius:8px;background:#eef4fb;color:#154e8a;font-size:12px;font-weight:700}
.wb-tipp{display:grid;grid-template-columns:22px minmax(0,1fr) 44px;gap:8px;margin:0 0 18px;padding:12px 4px 12px 12px;border:1px solid #c5d8ee;border-left:4px solid #154e8a;border-radius:10px;background:#eef4fb;font-size:12px;color:#1d2a44}
.wb-tipp>span{display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:#154e8a;color:#fff;font-weight:700}
.wb-tipp strong{display:block;margin-bottom:4px;color:#154e8a}
.wb-tipp p{margin:0}
.wb .wb-tipp-weg{min-height:44px;border:0;background:none;color:#154e8a;font-size:20px;line-height:1;align-self:start;margin-top:-10px}

/* Kaufleiste unten */
/* Teil des Rasters (letzte Zeile, keine Höhe aus dem Skript): am Rechner steht sie unter den Spalten, darunter klebt sie am unteren
   Rand. Weiße Fläche und Linie über die ganze Fensterbreite per Schatten, damit nichts seitwärts scrollt. */
.wb-leiste{grid-area:leiste;position:sticky;bottom:0;z-index:50;display:grid;grid-template-columns:280px minmax(0,1fr) auto auto;grid-template-areas:'preis empfehlung optionen wege' 'preis lieferzeit lieferzeit lieferzeit';gap:6px 16px;align-items:center;padding:12px 8px;background:#fff;box-shadow:0 0 0 100vmax #fff,0 -1px 0 100vmax #dbe4ea;clip-path:inset(-1px -100vmax -100vmax -100vmax)}
.wb-preis{grid-area:preis;display:grid;grid-template-columns:auto 1fr;grid-template-areas:'wort wort' 'betrag enthalten' 'zusatz zusatz';column-gap:12px;align-items:center;min-width:0}
.wb-preis-wort{grid-area:wort}
.wb-betrag{grid-area:betrag;white-space:nowrap}
.wb-preis-zusatz{grid-area:zusatz}
.wb .wb-enthalten{grid-area:enthalten}
.wb-preis-zusatz a{color:inherit}
.wb-enthalten-kurz{display:none}
.wb .wb-enthalten{justify-self:start;min-height:40px;padding:0 4px;border:0;background:none;color:var(--wb-blau);font-size:12px;font-weight:600;text-decoration:underline;white-space:nowrap}
.wb-preis-wort,.wb-preis-zusatz{font-size:11px;color:var(--wb-leise)}
.wb-betrag{font-size:30px;line-height:1.1;font-weight:800;letter-spacing:-.02em}
.wb-empfehlung{grid-area:empfehlung;display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:6px;min-width:0}
.wb .wb-empfehlung-auf{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0;padding:7px 12px;border:1px solid var(--wb-orange-linie);border-left-width:4px;border-radius:10px;background:var(--wb-orange-flaeche);color:#4a2c14;text-align:left}
.wb-empfehlung-auf small{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--wb-orange-text)}
.wb-empfehlung-auf strong{display:block;font-size:14px;color:var(--wb-tinte)}
.wb-empfehlung-auf span{display:block;font-size:12px}
.wb .wb-empfehlung-weg{min-width:44px;min-height:44px;border:1px solid var(--wb-orange-rand);border-radius:8px;background:#fff;color:var(--wb-orange-text);font-size:20px}
.wb .wb-optionen{grid-area:optionen;display:flex;align-items:center;gap:8px;min-height:48px;padding:8px 14px;border:1px solid var(--wb-orange-rand);border-radius:10px;background:var(--wb-orange-flaeche);font-weight:700}
.wb-zaehler{display:grid;place-items:center;min-width:24px;height:24px;border-radius:7px;background:var(--wb-orange);color:var(--wb-tinte);font-size:12px}
.wb-wege{grid-area:wege;display:flex;gap:8px}
.wb .wb-zurueck{min-width:64px;min-height:56px;border:1px solid #bccedb;border-radius:10px;background:#fff;color:var(--wb-blau);font-size:20px}
.wb .wb-weiter{min-width:220px;min-height:56px;padding:12px 20px;border:1px solid var(--wb-blau);border-radius:10px;background:var(--wb-blau);color:#fff;font-size:15px;font-weight:700}
.wb-lieferzeit{grid-area:lieferzeit;margin:0;font-size:11px;color:var(--wb-leise)}

/* Meldung, Dialoge, Handy-Kopf */
.wb-meldung{position:fixed;left:50%;bottom:132px;transform:translateX(-50%);z-index:60;padding:10px 16px;border:1px solid #bfdccb;border-radius:10px;background:#eef6f1;color:#1f5a40;font-size:13px}
.wb-dialog{width:min(640px,calc(100vw - 32px));max-height:calc(100dvh - 40px);padding:24px;border:1px solid #c9d8e3;border-radius:20px;background:#fff;color:var(--wb-tinte);overflow:auto}
.wb-dialog::backdrop{background:#162c4b66}
.wb-dialog header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.wb-dialog h2{font-size:19px;margin:0}
.wb .wb-zu{min-width:44px;min-height:44px;border:1px solid #c9d5df;border-radius:8px;background:#fff;color:var(--wb-blau);font-size:14px;font-weight:600}
.wb-bild-dialog img{display:block;width:100%;max-height:70dvh;object-fit:contain}
.wb-gross-dialog{width:min(1200px,calc(100vw - 32px))}
.wb-gross-dialog .wb-zeichnung{min-height:min(70vh,620px)}
/* Optionen im eigenen Fenster (wb.aktualisieren({optionen: [...]})): Karten in Orange, Klick führt in den Schritt der Option. */
.wb-optionen-dialog header small{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--wb-orange-text)}
.wb-optionen-einleitung{margin:0 0 12px;font-size:13px;color:var(--wb-leise)}
.wb-optionen-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.wb .wb-option{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:44px;padding:12px 14px;border:1px solid var(--wb-orange-rand);border-left:4px solid var(--wb-orange-linie);border-radius:12px;background:var(--wb-orange-flaeche);color:#4a2c14;text-align:left}
.wb-option small{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--wb-orange-text)}
.wb-option strong{font-size:14px;color:var(--wb-tinte)}
.wb-option span{font-size:12px}
.wb-option em{margin-top:4px;font-style:normal;font-size:12px;font-weight:700;color:var(--wb-blau)}

/* Bausteine für den Schritt, in allen Werkbank-Konfiguratoren gleich: Karten (Wahl mit Bild oder Beschreibung) gewählt hell mit
   Leitblau-Rand und Haken wie die Formen bei P001; Segmente (kurze Wahl ohne Bild, 2 bis 4 Stück) gewählt Leitblau gefüllt mit weißer
   Schrift wie "Ausführung" bei P001. */
.wb-karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.wb .wb-karte{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:6px;min-height:44px;padding:10px;border:1px solid #c9d5df;border-radius:12px;background:#fff;text-align:left}
.wb .wb-karte img{display:block;width:100%;height:96px;object-fit:contain;background:#f5f6f7;border-radius:8px}
.wb .wb-karte strong{font-size:14px;line-height:1.35}
.wb .wb-karte small{font-size:12px;color:var(--wb-leise)}
.wb .wb-karte:not([aria-pressed="true"]):hover{border-color:var(--wb-blau);background:#f0f6fb}
.wb .wb-karte[aria-pressed="true"]{padding:9px;border:2px solid var(--wb-blau);background:#eaf2fa;color:var(--wb-blau)}
.wb .wb-karte[aria-pressed="true"]::after{content:'✓';position:absolute;top:8px;right:8px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--wb-blau);color:#fff;font-size:12px}
.wb-segmente{display:grid;gap:10px}
.wb .wb-segmente>button{min-height:52px;padding:10px 16px;border:1px solid #9fb3c4;border-radius:10px;background:var(--wb-flaeche);font-weight:700;text-align:left}
.wb .wb-segmente>button[aria-pressed="true"]{border-color:var(--wb-blau);background:var(--wb-blau);color:#fff}
/* Führung (fuehrung.mjs, 10.11.2026): die Gruppe, die gerade dran ist, in dezentem Blau wie der Tippkasten (Fläche #eef4fb, Rand #c5d8ee,
   links Leitblau). Als Fläche hinter der Gruppe, damit beim Weiterwandern nichts springt. Immer genau eine Gruppe. */
.wb .wb-dran{position:relative;isolation:isolate}
.wb .wb-dran::before{content:'';position:absolute;inset:-8px -10px;z-index:-1;border:1px solid #c5d8ee;border-left:4px solid #154e8a;border-radius:10px;background:#eef4fb;pointer-events:none}
/* fieldset: die Fläche beginnt unter der Legende (21 px und 8 px Abstand), deshalb eine oder zwei Zeilen höher. */
.wb fieldset.wb-dran::before{top:-37px}
.wb fieldset.wb-dran.wb-dran-zwei::before{top:-58px}
.wb-hier{display:none}

/* Seitenkopf ab 851 px wie bei P001 (glass-sheet.css): ohne Logo-/Suchzeile, Krümelpfad und Fuß; die Shop-Zeile trägt Name, Suche und
   "Zurück zum Shop". */
.wb-shopzeile{display:none}
@media(min-width:851px){
 body:has(.wb) :is(.t-footer,.t-krumen,header.t-header>.t-header-inner,header.t-header>.t-handywege,.f-fuss,p.t-preview){display:none}
 body:has(.wb) header.t-header>.t-nav{display:block}
 body:has(.wb) header.t-header>.t-nav .t-nav-rechts{display:none}
 html.t-kopf-klebt body:has(.wb) :is(.t-top,header.t-header){position:relative;top:auto}
 main:has(>.wb){padding-top:0}
 .wb-shopzeile{display:flex;align-items:center;gap:20px;min-height:52px;margin:0 0 8px;padding:0 4px;color:#162c4b;font-size:12px}
 .wb-shopzeile>span{font-size:16px;font-weight:700;letter-spacing:-.2px;white-space:nowrap}
 .wb-shopzeile>small{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .wb-shopzeile>a:last-child{margin-left:auto;white-space:nowrap;color:#162c4b;font-weight:600}
 /* 03.11.2026 (Variante A): "Startseite" rechts vor "Zurück zum Shop". */
 .wb-shopzeile>a.gc-zur-startseite{margin-left:auto;white-space:nowrap;color:#162c4b;font-weight:600}
 .wb-shopzeile>a.gc-zur-startseite~a:last-child{margin-left:0}
 /* Unter 1100 px reicht der Platz neben der Suche nicht, dort führt das Logo zur Startseite. */
 @media(max-width:1099px){.wb-shopzeile>a.gc-zur-startseite{display:none}.wb-shopzeile>a:last-child{margin-left:auto}.wb-shopzeile>form.wb-suche~a:last-child{margin-left:0}}
 .wb-shopzeile>form.wb-suche{flex:0 1 340px;min-width:200px;margin-left:auto}
 .wb-shopzeile>form.wb-suche~a:last-child,.wb-shopzeile>form.wb-suche~a.gc-zur-startseite{margin-left:0}
 .wb-shopzeile>form.wb-suche .t-suchfeld{height:40px;padding:0 14px;border:1px solid #c9d5df;border-radius:8px;background:#fff}
 .wb-shopzeile>form.wb-suche .t-suche-q{height:38px;font-size:14px}
}
@media(min-width:851px) and (max-width:1299px){.wb-shopzeile>small{display:none}}
/* 03.11.2026: Mit Smartglas sieben Bereiche in der Kategorienzeile; bis 1099 px enger, sonst läuft "Service" über den Rand (899 px: 59 px). */
@media(min-width:851px) and (max-width:1099px){body:has(.wb) header.t-header>.t-nav{--k-navi:14px}body:has(.wb) header.t-header>.t-nav .t-kats{gap:10px}body:has(.wb) header.t-header>.t-nav details.t-kat-auf>summary{gap:4px}}

/* Rechner ab 1200 × 600 px: die Seite ist eine Spalte über die Fensterhöhe (Seitenkopf, Shop-Zeile, Werkbank); die Werkbank und alle
   Behälter um sie herum füllen den Rest, die Kaufleiste ist ihre letzte Zeile. Reines CSS, keine Messung; die Seite scrollt nicht, lange
   Schritte scrollen rechts in ihrer Spalte. */
@media(min-width:1200px) and (min-height:600px){
 body:has(.wb){display:flex;flex-direction:column;height:100dvh;min-height:0;margin:0;padding-bottom:0;overflow:hidden}
 body:has(.wb) :has(>.wb),body:has(.wb) :has(.wb){display:flex;flex-direction:column;flex:1 1 auto;min-height:0;padding-bottom:0;margin-bottom:0}
 body:has(.wb)>:not(:has(.wb)),body:has(.wb) :has(.wb)>:not(:has(.wb),.wb){flex:none}
 /* Wie bei P001 (glass-sheet.css): am Rechner kein Seitenfuß unter der Werkbank. */
 body:has(.wb)>footer{display:none}
 .wb{flex:1 1 auto;min-height:0;grid-template-rows:minmax(0,1fr) auto;align-items:stretch}
 .wb>:is(.wb-auswahl,.wb-mitte,.wb-rechts){min-height:0;max-height:none;position:relative;top:auto}
 .wb-rechts{overflow-y:auto;overscroll-behavior:contain}
 .wb-mitte{overflow:hidden auto}
 .wb-leiste{position:relative;margin-top:-4px;padding-block:10px}
}
/* Viele Schritte (etwa 8) in niedrigen Fenstern: Namen einzeilig, Zeilen knapper. */
@media(min-width:1200px) and (min-height:600px) and (max-height:860px){
 .wb :is(.wb-schritte) strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .wb :is(.wb-schritte) button{min-height:44px;padding-block:4px}
 .wb-auswahl-kopf{margin-bottom:6px}
}
@media(min-width:1200px) and (max-width:1330px){.wb{--wb-links:206px;--wb-rechts:358px;--wb-abstand:16px}}
@media(min-width:1600px){.wb{--wb-rechts:424px;--wb-abstand:24px}}

/* Unter 1200 px: Auswahl als Übersicht über "Auswahl & Schritte", Zeichnung und Schritt nebeneinander (ab 900) oder untereinander. */
@media(max-width:1199px){
 .wb{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:'hier hier' 'mitte rechts' 'leiste leiste';gap:14px}
 /* Die Schrittzahl steht schon in "Du bist hier". */
 .wb-schritt-kopf>span{display:none}
 .wb .wb-tipp-knopf{margin-left:auto}
 .wb-auswahl{display:none}
 .wb-hier{grid-area:hier;position:sticky;top:0;z-index:40;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;background:#fff;border:1px solid #cfdae3;border-radius:12px}
 .wb-hier small{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--wb-leise)}
 .wb-hier strong{font-size:14px}
 .wb .wb-hier-knopf{min-height:44px;padding:8px 12px;border:1px solid #c9d5df;border-radius:8px;background:var(--wb-flaeche);color:var(--wb-blau);font-size:12px;font-weight:700}
 .wb-mitte{position:sticky;top:84px}
 .wb-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:10px 0}
 .wb-preis{order:1;flex:1 1 0;min-width:150px}
 .wb-wege{order:2}
 .wb-empfehlung{order:3;flex:1 1 60%}
 .wb .wb-optionen{order:4}
 .wb-lieferzeit{order:5;flex-basis:100%}
 .wb-uebersicht-liste{display:block}
}
@media(max-width:899px){
 .wb{grid-template-columns:minmax(0,1fr);grid-template-areas:'hier' 'rechts' 'mitte' 'leiste'}
 .wb-mitte{position:static}
 .wb-rechts{padding:18px}
 .wb .wb-weiter{min-width:0;padding:12px 14px}
}
@media(max-width:640px){
 .wb-mitte-kopf{flex-wrap:wrap}
 .wb-bilder{order:3;flex-basis:100%}
 .wb .wb-bilder button{flex:1;width:auto}
 .wb-bilder img{height:110px}
/* Kaufleiste am Handy rund 120 px hoch: Preis und Weiter in einer Zeile, darunter die Empfehlung als eine Zeile mit X und "Optionen" als
   Kachel, darunter die Lieferzeit. "Im Preis enthalten" heißt hier kurz "Details" (der Name für Screenreader bleibt der lange). */
 .wb-leiste{gap:4px 8px;padding:4px 0 calc(4px + env(safe-area-inset-bottom,0px))}
 .wb-preis-wort{display:none}
 .wb-preis{min-width:0;grid-template-areas:'betrag enthalten' 'zusatz zusatz';column-gap:8px}
 .wb-betrag{font-size:22px}
 .wb-preis-zusatz{line-height:1.3}
 .wb .wb-enthalten{min-width:44px;min-height:32px;white-space:nowrap}
 .wb-enthalten-lang{display:none}
 .wb-enthalten-kurz{display:inline}
 .wb-wege{gap:6px}
 .wb :is(.wb-zurueck,.wb-empfehlung-weg){min-width:44px;min-height:44px;padding:0}
 .wb .wb-weiter{min-height:44px;padding:8px 12px;font-size:14px}
 .wb-empfehlung{min-width:0}
 .wb .wb-empfehlung-auf{min-height:44px;padding:4px 10px}
 .wb-empfehlung-auf>:is(span,small){display:none}
 .wb-empfehlung-auf strong{max-width:100%;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .wb .wb-optionen{min-height:44px;padding:4px 8px;font-size:12px}
 .wb-lieferzeit{line-height:1.25}
}
@media(prefers-reduced-motion:reduce){.wb *,.wb *::before,.wb *::after{animation:none!important;transition:none!important}}

/* Führung, Merkmale aus dem Glasvordach (10.11.2026, fuehrung.mjs Optionen pfeil, feldKnopf, puls; Regel docs/konfiguratoren/REGEL-aufbau.md):
   oranger Pfeil links an der Gruppe, die dran ist; blauer Knopf "Weiter" im Maßfeld, der Pfeil springt dann an diesen Knopf; ist der
   Schritt fertig, Satz über dem großen Knopf, oranger Rand und Puls (ohne Bewegung bei prefers-reduced-motion). */
.wb .wb-dran.wb-dran-pfeil::after{content:"";position:absolute;left:-22px;top:2px;width:0;height:0;border-left:11px solid var(--wb-orange,#f2884b);border-top:8px solid transparent;border-bottom:8px solid transparent;pointer-events:none}
.wb .wb-dran.wb-dran-pfeil:has(.wb-feld-weiter)::after{display:none}
.wb .wb-feld-mit-knopf{position:relative}
.wb .wb-feld-weiter{position:absolute;right:4px;bottom:4px;z-index:2;display:inline-flex;align-items:center;min-height:36px;width:auto;padding:0 12px;border:0;border-radius:6px;background:var(--wb-blau,#154e8a);color:#fff;font-size:13px;font-weight:700;line-height:1;cursor:pointer}
.wb .wb-feld-mit-knopf::after{content:"";position:absolute;z-index:3;right:-9px;bottom:13px;width:0;height:0;border-right:11px solid var(--wb-orange,#f2884b);border-top:8px solid transparent;border-bottom:8px solid transparent;pointer-events:none}
.wb .wb-fertig{position:sticky;bottom:0;z-index:5;margin:18px 0 0;padding:11px 14px;border:1px solid #c5d8ee;border-radius:10px;background:#eef4fb;color:#12365f;font-size:14px;font-weight:600;line-height:1.35;box-shadow:0 -6px 16px rgba(255,255,255,.9),0 6px 18px rgba(18,54,95,.14)}
.wb .wb-fertig[hidden]{display:none}
.wb .wb-puls{outline:3px solid #ed8d43;outline-offset:2px}
@media (prefers-reduced-motion:no-preference){
 .wb .wb-dran.wb-dran-pfeil::after{animation:wb-pfeil 1.4s ease-in-out 2}
 .wb .wb-feld-mit-knopf::after{animation:wb-pfeil-links 1.1s ease-in-out infinite}
 .wb .wb-puls{animation:wb-puls 1.5s ease-out infinite}
 @keyframes wb-pfeil{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
 @keyframes wb-pfeil-links{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
 @keyframes wb-puls{0%{box-shadow:0 0 0 0 rgba(237,141,67,.75)}70%{box-shadow:0 0 0 12px rgba(237,141,67,0)}100%{box-shadow:0 0 0 0 rgba(237,141,67,0)}}
}

/* Fertig konfiguriert (11.11.2026): Zeichen oben in der Übersicht. Grün wie der Fortschritt links, kein Orange (das steht nur für
   Probleme und Upsells). Beim Ankommen zeichnet sich der Haken, Funken fliegen, die Kaufleiste blitzt einmal auf. */
.wb .gv-geschafft{position:relative;display:flex;align-items:center;gap:14px;margin:0 0 18px;padding:14px 16px;border:1px solid #9fd3b4;border-radius:10px;background:#e9f7ef;color:#0f4a2a}
.wb .gv-geschafft svg{flex:none;width:46px;height:46px}
.wb .gv-geschafft circle{fill:#1f8a4c}
.wb .gv-geschafft path{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.wb .gv-geschafft p{margin:0;font-size:15px;line-height:1.4}
.wb .gv-geschafft strong{display:block;font-size:18px;font-weight:800}
.wb .gv-geschafft-funken{position:absolute;left:39px;top:50%;width:0;height:0;pointer-events:none}
.wb .gv-geschafft-funken i{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:2px;background:#1f8a4c;opacity:0}
.wb .gv-geschafft-funken i:nth-child(odd){background:#154e8a}
.wb .gv-geschafft-funken i:nth-child(3n){width:6px;height:12px;background:#6fbf8f}
.wb .gv-geschafft-funken i:nth-child(1){--gv-w:0deg}.wb .gv-geschafft-funken i:nth-child(2){--gv-w:30deg}.wb .gv-geschafft-funken i:nth-child(3){--gv-w:60deg}.wb .gv-geschafft-funken i:nth-child(4){--gv-w:90deg}
.wb .gv-geschafft-funken i:nth-child(5){--gv-w:120deg}.wb .gv-geschafft-funken i:nth-child(6){--gv-w:150deg}.wb .gv-geschafft-funken i:nth-child(7){--gv-w:180deg}.wb .gv-geschafft-funken i:nth-child(8){--gv-w:210deg}
.wb .gv-geschafft-funken i:nth-child(9){--gv-w:240deg}.wb .gv-geschafft-funken i:nth-child(10){--gv-w:270deg}.wb .gv-geschafft-funken i:nth-child(11){--gv-w:300deg}.wb .gv-geschafft-funken i:nth-child(12){--gv-w:330deg}
@media (prefers-reduced-motion:no-preference){
  .wb .gv-geschafft.ist-neu{animation:gv-geschafft-ein .55s cubic-bezier(.2,1.3,.4,1) both}
  .wb .gv-geschafft.ist-neu svg{animation:gv-geschafft-haken .7s .1s cubic-bezier(.2,1.5,.4,1) both}
  .wb .gv-geschafft.ist-neu path{stroke-dasharray:40;stroke-dashoffset:40;animation:gv-geschafft-strich .45s .5s ease-out forwards}
  .wb .gv-geschafft.ist-neu .gv-geschafft-funken i{animation:gv-geschafft-funke 1s .45s cubic-bezier(.1,.7,.3,1) both}
  .wb .gv-geschafft.ist-neu .gv-geschafft-funken i:nth-child(even){animation-duration:1.25s}
  .wb.gv-bereit .wb-leiste{animation:gv-bereit-leiste 1.6s ease-out}
  @keyframes gv-geschafft-ein{from{opacity:0;transform:translateY(-10px) scale(.96)}to{opacity:1;transform:none}}
  @keyframes gv-geschafft-haken{from{transform:scale(0) rotate(-40deg)}to{transform:none}}
  @keyframes gv-geschafft-strich{to{stroke-dashoffset:0}}
  @keyframes gv-geschafft-funke{0%{opacity:1;transform:rotate(var(--gv-w)) translateX(18px) scale(1)}100%{opacity:0;transform:rotate(var(--gv-w)) translateX(96px) scale(.3)}}
  @keyframes gv-bereit-leiste{0%{box-shadow:0 -8px 0 0 #1f8a4c,0 -30px 40px -10px rgba(31,138,76,.45)}100%{box-shadow:0 0 0 0 rgba(31,138,76,0),0 0 0 0 rgba(31,138,76,0)}}
}