/* umbau-v5 Ergaenzungen zum Apple-gruen-Kanon. Keine externen Requests. */
/* Positionierungsblock der Startseite (Owner-Auftrag 01.09.2026). Nutzt
   ausschliesslich vorhandene Kanon-Tokens; kein neues Farb- oder Schriftsystem. */
/* Weltabschluss mit Anfrage-Uebergabe (Owner-Auftrag 01.09.2026). */
.welt-abschluss .section-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
/* Projektablauf auf "Über Kunden KI" (Owner-Auftrag 01.09.2026). */
.ablauf-liste{margin:1.25rem 0 0;padding-left:1.25rem;display:grid;gap:.85rem}
.ablauf-liste li{padding-left:.25rem}
.vorschau-band{margin:0;padding:8px 16px;background:var(--ink);color:#fff;text-align:center;
  font-size:var(--fs-caption);font-weight:600;letter-spacing:0.02em;}
:root{--fs-h1:clamp(2rem,1.2rem+3.8vw,4.5rem);--fs-h2:clamp(1.75rem,1.3rem+2vw,2.75rem);}
/* V5: Not-Umbruch bleibt aktiv (Kanon-Standard). Die Master-Skala haelt 40px
   Display auch bei 320-430px; lange Einzelwoerter (Buchungsinformationen,
   Paketkonfigurator) brauchen den Umbruch ohne Silbentrennung, sonst laeuft
   die Seite ueber (T12.2). hyphens:none = weiterhin keine Trennstriche. */
h1,h2,h3{overflow-wrap:break-word;hyphens:none;}

/* =====================================================================================
   DESIGN-DEMO 04.09.2026 — Punkt 2: keine Bewegung auf Layout-Eigenschaften.
   Quelle: Impeccable 3.5.0 `layout-transition` (Sollwert: 0 Uebergaenge auf width,
   height, padding, margin, max-height, max-width, min-height, min-width) und Emil
   Kowalski Standard 7 (erlaubt sind transform und opacity). Deckungsgleich mit dem
   Hauskanon BEWEGUNG ("nur transform und opacity").
   styles.css ist der geteilte Kanon-Stil und liegt ausserhalb des Repos; umbau.css
   laedt nach ihm, deshalb stehen die Korrekturen hier.
   ===================================================================================== */
/* Der Sprunglink wanderte ueber `top` ins Bild (Layout-Eigenschaft). Er sitzt jetzt
   fest auf seiner Endposition und wird per transform hereingeschoben — dieselbe
   Bewegung, dieselbe Dauer, ohne Neu-Layout. */
.skip-link{top:12px;transform:translateY(calc(-100% - 28px));
  transition:transform 160ms cubic-bezier(.23,1,.32,1);}
.skip-link:focus{top:12px;transform:translateY(0);}
/* Kopfleiste und Logo aenderten beim Scrollen `padding-block` und `width` mit 200 ms.
   Beides loest bei jedem Bild ein neues Layout aus. Der Zustandswechsel bleibt, die
   Animation entfaellt — eine gleichwertige transform-Fassung wuerde die Breite des
   Logos im Fluss stehenlassen und die Kopfleiste verschieben. */
.header-inner{transition:none;}
.logo-img{transition:none;}

/* =====================================================================================
   DESIGN-DEMO 04.09.2026 — Punkt 4: Zeilenlaenge im Fliesstext.
   Quelle: Impeccable 3.5.0 `line-length` (Sollwert: geschaetzte Zeichen je Zeile <= 85,
   Zielwert 80) und Impeccables craft-floor (Lesebreite 65-75ch). Gemessen live:
   124 Zeichen in der Kartenbeschreibung der Startseite, 87 in Welt-, Paket- und
   Rechtstexten.
   NACHGESCHAERFT 04.09.2026, am Kandidaten nachgemessen: 74ch war wirkungslos, weil die
   betroffenen Textbloecke bereits schmaler sind als 74ch — `.copy-document > p` misst
   740 px = 67ch, die berechnete max-width lag bei 792 px und griff nie (Impeccable meldete
   unveraendert 87 Zeichen). 65ch sind bei dieser Schrift rund 715 px und damit die untere
   Grenze derselben craft-floor-Spanne (65-75ch), die Impeccable selbst nennt.
   Der Container-Token `narrow` (760 px) bleibt unangetastet — begrenzt wird der
   Textblock, nicht der Kanon-Baustein.
   ===================================================================================== */
.karte-beschreibung,
.section-head > p,
.copy-document > p,
.container.narrow > p,
.container.narrow > ul > li{max-width:65ch;}

/* =====================================================================================
   DESIGN-DEMO 04.09.2026 — Punkt 8 [MARKENFRAGE]: ein dokumentiertes Radien-System.
   Quelle: Taste-Skill Abschnitt 4.4 "SHAPE CONSISTENCY LOCK". Das Regelwerk verlangt
   NICHT ein einziges Mass, sondern EINE dokumentierte Regel, die ueberall gilt:
   "Mixed systems are allowed only when there is a documented rule (e.g. buttons are
   full-pill, cards are 16px, inputs are 8px) and that rule is followed everywhere."
   Der Kanon fuehrt bereits Tokens (--r-card 28, --r-tile 20, --r-pill 980, --r-link 10,
   --r-badge 36); daneben standen 27 hartkodierte Radien (12/14/16/20/999 px und vier
   clamp-Werte). Die Regel lautet ab hier:
       grosse Flaeche  -> --r-card    (Buehne, Weltwahl, Bildziel)
       Karte, Kachel   -> --r-tile    (Katalog, Zusatzgruppen, Detailkarten)
       Bedienelement   -> --r-control (Eingabe, Wahlknopf, Meldung)  << neuer Token
       Pille, Marke    -> --r-pill    (Fortschritt, Auswahlmarke, Anfrage-Label)
       Kreis           -> 50 %        (Punkte, Schliessen-Knopf)
   `--r-control` ist neu und liegt bei 14 px — dem Median der abgeloesten Werte
   (12/14/16). Kein vorhandener Token wird veraendert; die Schrift-, Farb- und
   Abstands-Tokens bleiben unberuehrt.
   ===================================================================================== */
:root{--r-control:14px;}

/* =====================================================================================
   DESIGN-DEMO 04.09.2026 — Punkt 10: Rueckmeldung an Bedienflaechen.
   Quelle: Emil Kowalski, Standard 1 (Rueckmeldung ist einer der fuenf gueltigen
   Bewegungsgruende) und STANDARDS.md ("Button press feedback: transform: scale(0.97)
   on :active, transition: transform 160ms ease-out. Subtle 0.95-0.98. Applies to any
   pressable element."). Live gemessen ohne jeden Uebergang: die Login-Zeile der
   Kopfleiste, der Menue-Knopf, das Scanner-Eingabefeld, die Fusszeilen-Links und zwei
   Handlungszeilen.
   Nur transform und opacity, 120-160 ms, Ausgang so schnell wie Eingang. Unter
   prefers-reduced-motion bleibt alles stehen — der Endzustand ist derselbe.
   ===================================================================================== */
.login-link,.menu-toggle,.arrow-link,.linkzeile > a,.foot-col a,.btn{
  transition:transform 160ms cubic-bezier(.23,1,.32,1),opacity 120ms cubic-bezier(.23,1,.32,1);}
.login-link:active,.menu-toggle:active,.arrow-link:active,.linkzeile > a:active,
.foot-col a:active,.btn:active{transform:scale(.97);}
.login-link:hover,.foot-col a:hover,.linkzeile > a:hover{opacity:.72;}
/* Das Eingabefeld des Scanners meldet den Fokus ueber seinen Rahmen, nicht ueber eine
   Bewegung: eine Groessenaenderung am Feld verschiebt die Zeile darunter. */
.scanner-slot input#scanUrl{transition:opacity 120ms cubic-bezier(.23,1,.32,1);}
.scanner-slot input#scanUrl:focus-visible{opacity:1;}
@media(prefers-reduced-motion:reduce){
  .login-link,.menu-toggle,.arrow-link,.linkzeile > a,.foot-col a,.btn,
  .scanner-slot input#scanUrl{transition:none;}
  .login-link:active,.menu-toggle:active,.arrow-link:active,.linkzeile > a:active,
  .foot-col a:active,.btn:active{transform:none;}
}

/* P0 Punkt 7 (Owner 20.08.2026): keine Wortbrueche mitten in langen
   Hauptueberschriften; H1 bricht nur an Wortgrenzen. Die Groessenstufen
   h1-wort-l/-xl setzt der Generator ans laengste H1-Token gekoppelt, damit
   Komposita auf schmalen Breiten ohne Trennung in die Spur passen. */
h1{overflow-wrap:normal;word-break:keep-all;}
@media (max-width:520px){
  h1.h1-wort-l{font-size:clamp(1.5rem,8.6vw,2.25rem);letter-spacing:-0.5px}
  h1.h1-wort-xl{font-size:clamp(1.25rem,7vw,1.75rem);letter-spacing:-0.4px}
}
.world h3{font-size:var(--fs-h2);}
.card h3{font-size:var(--fs-subhead);line-height:1.2;}
code{overflow-wrap:anywhere;}
.pcard,.pcard-text,.pcard-preis,.pcard-punkte li,.feld p,.feld-liste li,.bundle-feld,.bundle-links,
.detail-name,.breadcrumb,.legende-liste li{overflow-wrap:break-word;}
.badge{white-space:normal;text-align:center;}
.chips{max-width:100%;}
.chip{max-width:100%;overflow-wrap:break-word;}
.card .step-num{margin-right:6px;}
.header-tools{display:flex;align-items:center;gap:10px;}
.login-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;
  padding:12px 14px;border-radius:var(--r-pill);border:1px solid var(--hairline);color:var(--ink);}
.login-link:hover{border-color:var(--ink);}
/* TOUCH-ZIELE (Kanon MOBILE-HAERTUNG): 311 geerbte Verstoesse bei 390px ueber
   Wurzeln behoben (19.08.2026, identischer Bestand im HEAD-Bau belegt) — nur
   Trefferflaechen ueber min-height/Padding, keine Schriftgroesse geaendert.
   Wurzeln: Fusszeilen-Listenlinks, Logo- und Login-Link der Kopfleiste,
   Breadcrumb- und Login-Hilfslinks (Padding mit Gegen-Margin, Layout bleibt),
   Chip-Links der Startseite. */
.footer-cols li a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;}
.logo-link{display:inline-flex;align-items:center;min-height:44px;}
.breadcrumb a,.login-hilfe a{display:inline-block;padding-block:13px;margin-block:-13px;}
a.chip{display:inline-flex;align-items:center;min-height:44px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media(max-width:767px){.grid-2{grid-template-columns:1fr;}}
.prinzipien{list-style:none;}
.section-cta{margin-top:2rem;text-align:center;}
.showcase{margin-bottom:1.5rem;}
.scan-meldung{min-height:1.4em;font-weight:600;color:var(--ember);margin-top:0.75rem;}
.scan-meldung.ok{color:var(--blue);}
.scan-login{margin-top:0.5rem;}
.chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin-top:1.25rem;}
.chip{display:inline-block;padding:8px 16px;border-radius:var(--r-pill);border:1px solid var(--hairline);
  background:var(--paper);font-size:var(--fs-caption);font-weight:600;text-decoration:none;color:var(--ink);}
a.chip:hover{border-color:var(--blue);color:var(--blue);}
.chip-status{background:var(--wash);}
.badge{display:inline-block;padding:4px 12px;border-radius:var(--r-badge);font-size:var(--fs-micro);
  font-weight:600;letter-spacing:0.03em;text-transform:uppercase;}
.badge-bestand{background:#dcefe9;color:#0b5c4d;}
.badge-neuschnitt{background:#dde7f5;color:#274a78;}
.badge-entwurf{background:#f7e8cf;color:#7a4a06;}
.badge-anfrage{background:var(--wash);color:var(--ink-mid);}
.badge-blueprint{background:#e7e0f5;color:#4a3578;}
.pcard{display:flex;flex-direction:column;gap:0.6rem;align-items:flex-start;text-align:left;}
.pcard-bild{display:block;width:100%;margin-bottom:4px;}
.pcard-bild img{display:block;width:100%;height:auto;border-radius:var(--r-tile);}
.eingebettet .pcard-bild img{border-radius:var(--r-tile);}
.badge-referenz{background:var(--wash);color:var(--ink-mid);}
.pcard-status{font-size:var(--fs-caption);color:var(--ink-soft);font-weight:600;}
.konfig-optionen{list-style:none;}
.konfig-option{align-items:flex-start;text-align:left;display:flex;flex-direction:column;gap:0.6rem;}
.konfig-option-preis{font-weight:600;color:var(--ink);font-size:var(--fs-caption);}
.eingebettet{align-items:flex-start;text-align:left;display:flex;flex-direction:column;gap:0.6rem;}
.pcard-kopf{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;width:100%;}
.pcard-ergebnis{font-weight:600;color:var(--ink);}
.pcard-text{color:var(--ink-mid);font-size:var(--fs-caption);}
.pcard-preis{font-weight:600;color:var(--ink);font-size:var(--fs-caption);}
.pcard-punkte{list-style:disc;padding-left:1.2em;color:var(--ink-mid);font-size:var(--fs-caption);
  display:flex;flex-direction:column;gap:4px;}
.pcard-cta{margin-top:auto;}
.katalog-welt{text-decoration:none;display:flex;flex-direction:column;gap:0.6rem;align-items:flex-start;text-align:left;}
.breadcrumb{display:block;flex-wrap:wrap;font-size:var(--fs-caption);color:var(--ink-soft);margin-bottom:0.75rem;}
.breadcrumb a{color:var(--ink-soft);}
.container.narrow{max-width:820px;}
.detail-hero .detail-name{font-weight:600;display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.detail-sektion h2{margin-bottom:1.25rem;font-size:var(--fs-h2);}
.feld{margin-bottom:1.25rem;}
.preis-pflichtzeile{font-size:var(--fs-caption);color:var(--ink-soft);margin-top:0.75rem;}
.feld-titel{font-size:var(--fs-body-lg);font-weight:600;margin-bottom:0.35rem;}
.feld-liste{list-style:disc;padding-left:1.3em;display:flex;flex-direction:column;gap:6px;color:var(--ink-mid);}
ol.feld-liste{list-style:decimal;}
.tabelle-scroll{overflow-x:auto;margin:1rem 0;}
.tabelle-scroll:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:var(--r-link);}
.tabelle-scroll table{border-collapse:collapse;width:100%;min-width:480px;font-variant-numeric:tabular-nums;}
/* 03.09.2026 (KARUSSELL-Riegel): unter 700 px wird die Tabelle nicht mehr waagerecht gescrollt, sonst stehen Preis und Pflichtangaben nur im Wisch-Container. */
@media(max-width:700px){.tabelle-scroll{overflow-x:visible}.tabelle-scroll table{min-width:0;table-layout:fixed}.tabelle-scroll th,.tabelle-scroll td{padding:8px 6px;overflow-wrap:anywhere;hyphens:auto}}
.tabelle-scroll th,.tabelle-scroll td{border:1px solid var(--hairline);padding:10px 14px;text-align:left;font-size:var(--fs-caption);}
.tabelle-scroll th{background:var(--wash);font-weight:600;}
.faq-item{border-bottom:1px solid var(--hairline);padding:0.85rem 0;}
.faq-item summary{font-weight:600;cursor:pointer;padding:12px 4px;min-height:44px;box-sizing:border-box;border-radius:var(--r-link);}   /* 03.09.2026: Tap-Ziel >= 44 px (TOUCH_ZIELE) */
.faq-item summary:focus-visible{outline:3px solid var(--blue);outline-offset:3px;}
.faq-item p{margin-top:0.6rem;color:var(--ink-mid);}
.bundle-feld{font-size:var(--fs-caption);color:var(--ink-mid);}
.bundle-links{font-size:var(--fs-caption);}
.bundle-links a{color:var(--link);}
.konfig-liste{list-style:none;counter-reset:none;}
.konfig-schritt h3{display:flex;align-items:center;gap:10px;font-size:var(--fs-body-lg);}
.sperr-text p{font-weight:600;color:var(--ink-mid);}
.login-mitte{display:flex;justify-content:center;padding-block:var(--section);}
.login-karte{max-width:520px;width:100%;text-align:left;align-items:stretch;}
.login-karte h1{font-size:var(--fs-h3);margin:0.5rem 0;}
.login-form{display:flex;flex-direction:column;gap:10px;margin:1.25rem 0 0.5rem;}
.login-form .scan-input{flex:0 0 auto;width:100%;}
.login-form label{font-weight:600;font-size:var(--fs-caption);}
.anfrage-text{border-radius:var(--r-tile);min-height:120px;resize:vertical;padding:12px 16px;}
.login-neutral,.login-alt,.login-hilfe{font-size:var(--fs-caption);color:var(--ink-soft);margin-top:0.6rem;}
.login-hilfe a{color:var(--link);}
.drawer-hinweis{font-size:var(--fs-caption);color:var(--ink-soft);font-weight:600;}
.dash-karte{align-items:flex-start;text-align:left;}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--paper);
  z-index:300;box-shadow:-12px 0 40px rgba(0,0,0,0.18);display:flex;flex-direction:column;}
.drawer[hidden]{display:none;}
.drawer-kopf{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--hairline);}
.drawer-kopf h2{font-size:var(--fs-body-lg);}
.drawer-schliessen{background:none;border:1px solid var(--hairline);border-radius:50%;width:40px;height:40px;font-size:20px;line-height:1;}
.drawer-schliessen:hover{border-color:var(--ink);}
.drawer-inhalt{padding:22px;overflow-y:auto;display:flex;flex-direction:column;gap:14px;}
.korb-zeilen{display:flex;flex-direction:column;gap:10px;margin:0.75rem 0;}
.korb-zeilen li{display:flex;justify-content:space-between;gap:12px;font-size:var(--fs-caption);border-bottom:1px solid var(--hairline);padding-bottom:8px;}
.korb-enthalten span:first-child{color:var(--ink-soft);}
.korb-summen{display:flex;flex-direction:column;gap:6px;margin:0.5rem 0;}
.korb-summen div{display:flex;justify-content:space-between;font-size:var(--fs-caption);}
.korb-summen dt{font-weight:600;}
.btn-inaktiv{opacity:0.45;cursor:not-allowed;pointer-events:none;background:var(--ink-soft);}
@media(max-width:600px){.drawer{width:100%;}}
.slot-leer{display:flex;align-items:center;justify-content:center;min-height:240px;}
.legende-karte{align-items:flex-start;text-align:left;}
.legende-liste{display:flex;flex-direction:column;gap:8px;font-size:var(--fs-caption);color:var(--ink-mid);}
.btn-legende{pointer-events:none;font-size:var(--fs-caption);padding:8px 16px;}

.worlds{display:flex;flex-direction:column;gap:28px;}
footer .vorschau-fuss{font-weight:600;}
.footer-bald{color:inherit;opacity:0.75;}
@media(max-width:900px){.header-tools .login-link span{display:inline;}}

/* Sichtbarer Tastaturfokus fuer Formularfelder (26.08.2026, Grossgang Punkt 9):
   der Scanner-URL-Eingang der Startseite hatte als einziger Tab-Stopp keinen
   sichtbaren Fokus (gemessen ueber die 12er-Tastaturkette). */
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--brand,#10A88F);outline-offset:2px}
/* Der Scanner-Eingang traegt sein outline:0 auf dem inneren Feld; der sichtbare
   Fokus liegt deshalb auf der Eingabe-Pille selbst. */
.scanner-slot .scan:focus-within{outline:3px solid var(--brand,#10A88F);outline-offset:3px}

/* Kaufkopf der Produktseiten (26.08.2026, Grossgang Punkt 8): Kurzergebnis, ehrlicher
   Preisstatus und primaere Handlung stehen VOR dem grossen Produktbild. */
.kauf-kopf{margin-top:1.1rem}
.kauf-kopf .kk-ergebnis{max-width:56ch;font-size:1.06rem;line-height:1.55;margin:0 0 .6rem}
.kauf-kopf .kk-preis{font-weight:600;margin:0 0 .9rem}
.kauf-kopf .actions{margin:0}

/* KARTENTITEL BRECHEN, STATT ABGESCHNITTEN ZU WERDEN (Design-Blick 04.09.2026).
   Befund am gebauten Dokument: auf /katalog-webseite.html stand bei 768 px
   "Veranstaltungsbuch" statt "Veranstaltungsbuchung" — das Wort war an der
   Kartenkante gekappt (Feld 343 px, Inhalt 413 px, Karte mit overflow:hidden).
   Ursache: .catalog-card-copy und .selection-card sind Spalten-Flexboxen mit
   align-items:flex-start; ihre Kinder bekommen dadurch max-content-Breite und
   wachsen ueber den Container hinaus. Die vorhandene Regel h1,h2,h3
   {overflow-wrap:break-word} kann dann nie greifen, weil die Box selbst mitwaechst.
   max-width:100% deckelt das Kind auf die Containerbreite; erst dadurch bricht das
   lange Kompositum um. KEINE Silbentrennung (hyphens bleibt none, TRENNUNGS-Riegel
   unberuehrt), keine Schriftgroesse, kein Token.
   Gemessen ueberstehende Titel /katalog-webseite.html vorher -> nachher:
     390 px  2 -> 0      768 px  5 -> 0 (dazu 5 -> 0 abgeschnittene Karten)
     1024 px 2 -> 0      1440 px 0 -> 0                                        */
.catalog-card-copy>*,.selection-card>*{max-width:100%}
/* Dieselbe Wurzel, allgemein statt als Klassenliste (Design-Blick-Nachlauf 04.09.2026):
   JEDE Spalten-Flexbox mit align-items:flex-start gibt ihren Kindern max-content-Breite.
   Der Kandidatenlauf fand denselben Fehler ein zweites Mal an .world-choice auf
   /katalog.html — "Automatisierung" ragte bei 768 px 86 px aus der Kachel, bei 1024
   noch 54 px, bei 1440 noch 36 px. Eine Klassenliste waere am Tag ihrer Entstehung
   richtig und beim naechsten Bauteil wieder unvollstaendig; die Deckelung auf
   Containerbreite gilt deshalb fuer alle Blockbausteine. Im normalen Fluss aendert
   sie nichts (dort ist die Breite ohnehin 100 %), als Flex- oder Rasterkind deckelt
   sie. Gemessen ueber sieben Seiten x vier Breiten: 3 -> 0 Ueberlaeufe.               */
h1,h2,h3,h4,h5,h6,p,ul,ol,dl,figure,table{max-width:100%}

/* ===================================================================== FUSSZEILE
   Owner-Auftrag 04.09.2026, Design-Blick-Gang. Zwei gemessene Befunde:

   (a) WAISE — die Fusszeile fuehrt seit dem 23.08.2026 FUENF Spalten (Welten,
       Auswahl, Zugang, Unternehmen, Rechtliches), der Kanon-Stil `styles.css`
       stellte aber `repeat(4,1fr)` ab 1000 px. "Rechtliches" stand allein in
       einer zweiten Reihe. Gemessen am 04.09.2026 auf allen 294 gebauten
       Dokumenten: "letzte Reihe 1 von 5, volle Reihe 4".
   (b) LEERRAUM — `.footer-bottom` ist das dritte Kind des zweispaltigen
       `.footer-inner`-Rasters (1fr 2fr ab 1000 px) und landete damit in Spalte 1
       der zweiten Reihe. Rechts daneben blieb eine leere Rasterzelle von
       709 x 127 px stehen, in der Netto-Hinweis und Anschrift haetten stehen
       koennen. Gemessen bei 1440 px auf allen 294 Dokumenten.

   Die Regeln stehen hier und nicht in `styles.css`, weil `styles.css` der
   geteilte Kanon-Stil ist (aus dem Entwurf kopiert) und `umbau.css` die
   V5-Komponentenschicht, die NACH ihm laedt. Keine Token angefasst, keine
   Farbe, keine Schriftgroesse, kein Link, kein Text, keine Reihenfolge.

   Spaltenlage je Breite, orphanfrei gerechnet:
     <  560 px  gestapelt (1 Spalte)
     560-767    2 Spalten, die fuenfte Spalte ueber die volle Breite
     768-1199   3 + 2 ohne leere Zelle (6er-Raster, Zeile 1 je 2, Zeile 2 je 3)
     >= 1200    fuenf gleichwertige Spalten in EINER Reihe                    */
.footer-inner{align-items:start;}
@media (min-width:1200px){
  /* Logo und Kurzsatz links, die fuenf Spalten daneben. Die Marke bekommt eine
     feste Mindestbreite, damit die fuenf Spalten nicht gequetscht werden. */
  .footer-inner{grid-template-columns:minmax(200px,0.9fr) 3.6fr;}
}
.footer-cols{grid-template-columns:1fr;}
@media (min-width:560px) and (max-width:767.98px){
  .footer-cols{grid-template-columns:repeat(2,1fr);}
  .footer-cols>*:nth-child(5){grid-column:1 / -1;}
}
@media (min-width:768px) and (max-width:1199.98px){
  /* 3 + 2: das 6er-Hilfsraster laesst die zweite Reihe die volle Breite fuellen,
     statt eine dritte Zelle leer stehen zu lassen. */
  .footer-cols{grid-template-columns:repeat(6,1fr);}
  .footer-cols>*{grid-column:span 2;}
  .footer-cols>*:nth-child(4),.footer-cols>*:nth-child(5){grid-column:span 3;}
}
@media (min-width:1200px){
  .footer-cols{grid-template-columns:repeat(5,1fr);gap:24px;}
}
/* Schlusszeile ueber die volle Breite unter den Spalten, buendig mit dem Logo,
   duenne Trennlinie darueber.

   OWNER-BEFUND 04.09.2026 ("nicht in einer Linie, sondern einmal oben, einmal
   unten"): `margin-left:auto` schob die Anschrift ans rechte Ende — passte die
   Zeile nicht, brach sie um und die Anschrift stand rechts UNTER dem Netto-Hinweis.
   Gemessen am gebauten Dokument: Reihe 1 begann bei 0, Reihe 2 bei 518 px (1440),
   356 px (1024), 141 px (768). Zwei Ursachen, beide behoben:

   (1) Der Versatz selbst. `margin-left:auto` ist raus. Bricht die Zeile um, stehen
       beide Absaetze auf DERSELBEN linken Achse — nie mehr einer links oben und
       einer rechts unten.
   (2) Der Umbruch. Bei 16 px brauchen die beiden Texte 513 + 602 = 1115 px in einem
       1120 px breiten Feld; fuer einen Abstand bleiben 5 px. Mit --type-fussnote
       (15 px, Begruendung am Token) sind es 468 + 556 = 1024 px, also 96 px Luft.
       Ab 1200 px steht die Schlusszeile deshalb in EINER Zeile: Netto-Hinweis links,
       Anschrift rechts, `space-between`, kein Umbruch. Darunter reicht die Breite
       nicht (Feld 944 px bei 1024, 707 px bei 768) — dort wird gestapelt, buendig
       links, mit Zeilenabstand statt Versatz.                                       */
.footer-bottom{grid-column:1 / -1;border-top:1px solid var(--hairline);
  padding-top:20px;justify-content:flex-start;align-items:baseline;
  column-gap:28px;row-gap:8px;}
.footer-bottom p{margin:0;font-size:var(--type-fussnote);}
@media (min-width:1200px){
  .footer-bottom{flex-wrap:nowrap;justify-content:space-between;column-gap:32px;}
  .footer-bottom .footer-anschrift{text-align:right;}
}


/* Codex demo: extension of the committed Apple-green scaffold. */
.image-target{display:block;width:100%;margin:0;overflow:hidden;aspect-ratio:var(--image-aspect);border-radius:var(--r-card);background:var(--wash)}
.image-target picture{display:block;width:100%;height:100%}
.image-target img{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:var(--image-fit);object-position:var(--image-position)}
.detail-media-stage{padding-top:clamp(1.5rem,4vw,4rem)}
.detail-media{max-height:min(76vh,880px)}
.media-story-single,.world-section-media{margin-top:clamp(2rem,5vw,5rem)}
.media-story-single .demo-picture,.world-section-media .demo-picture{max-width:1180px;margin-inline:auto}
.media-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(10px,1.5vw,20px);margin-top:clamp(2rem,4vw,4rem)}
.media-bento .bento-media:nth-child(6n+1){grid-column:span 7}.media-bento .bento-media:nth-child(6n+2){grid-column:span 5}
.media-bento .bento-media:nth-child(6n+3){grid-column:span 4}.media-bento .bento-media:nth-child(6n+4){grid-column:span 8}
.media-bento .bento-media:nth-child(6n+5){grid-column:span 6}.media-bento .bento-media:nth-child(6n+6){grid-column:span 6}
.media-bento .bento-media img{height:100%}
.inline-explanation-media{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:clamp(12px,2vw,20px);margin:1.25rem 0 2rem}
.explanation-media{border-radius:var(--r-tile)}
.copy-hero{padding-bottom:1rem}.copy-document{font-size:var(--type-body);line-height:1.68}
.copy-document .copy-title{font-size:var(--type-display);margin:0 0 clamp(1.75rem,4vw,3.5rem);max-width:18ch}
/* copy-document h2 (03.09.2026): h2-Skala --type-section (32->48), nicht --type-subsection (24->32) - der TYPOGRAFIE-Riegel misst das erste main h2 gegen 32-33.2/48; die Katalogfakten-h2 (Leistungsumfang, Nicht enthalten) waren auf paket/assist-10/-11 neu das erste h2 */.copy-document h2{font-size:var(--type-section);margin:clamp(2.6rem,6vw,5rem) 0 1rem;max-width:24ch}
.copy-document h3{font-size:var(--type-card-title);margin:2rem 0 .7rem;max-width:34ch}
/* DESIGN-DEMO 04.09.2026 — Punkt 4 (Impeccable line-length): 72ch sind bei 17 px
   Schrift 792 px und damit breiter als der Container (740 px) — die Grenze griff nie,
   Impeccable meldete unveraendert ~87 Zeichen je Zeile. 65ch sind rund 715 px und
   liegen in der craft-floor-Spanne (65-75ch). Die Regel steht HIER und nicht als
   zweite daneben: DEMO_CSS wird an UMBAU_CSS angehaengt, eine gleich spezifische
   Regel weiter oben verliert. */
.copy-document p{margin:.9rem 0;max-width:65ch}.copy-list{padding-left:1.3rem;display:grid;gap:.65rem;margin:1rem 0}
.copy-document{min-width:0;max-width:100%}.copy-document p,.copy-document li,.copy-document td,.copy-document th{overflow-wrap:break-word}
.copy-document a,.legal-import a{overflow-wrap:anywhere}.copy-table{max-width:100%;margin:1.5rem 0}
.menu-toggle{flex:0 0 48px;min-width:48px}.world-choice .eyebrow,.world-choice .arrow-link{color:var(--ink)}
.world-choice.finish-midnight,.world-choice.finish-midnight h2,.world-choice.finish-midnight .eyebrow,.world-choice.finish-midnight .arrow-link{color:#fff}
.purchase-section,.selection-section{border-block:1px solid var(--hairline)}
.purchase-name{font-size:var(--type-card-title);font-weight:500}.selection-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.selection-card{display:flex;min-height:190px;flex-direction:column;align-items:flex-start;gap:.7rem;padding:clamp(1.25rem,2vw,2rem);border:1px solid var(--hairline);border-radius:var(--r-tile);background:var(--paper);color:var(--ink);text-decoration:none;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.selection-card:hover{transform:translateY(-3px);border-color:var(--ink);box-shadow:var(--shadow-md)}
.selection-card .arrow-link{margin-top:auto}.catalog-hero{padding-block:clamp(5rem,10vw,9rem)}
.catalog-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.catalog-tile{grid-column:span 6;display:flex;min-height:250px;flex-direction:column;align-items:stretch;padding:0;overflow:hidden;border-radius:var(--r-tile);background:var(--paper);border:1px solid var(--hairline);color:var(--ink);transition:transform .25s ease,box-shadow .25s ease}
.catalog-tile.tile-span-2{grid-column:span 12}.catalog-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.catalog-card-media{border-radius:0}.catalog-card-copy{display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:.75rem;padding:clamp(1.25rem,2.4vw,2.4rem)}
.catalog-card-copy .karte-beschreibung{color:var(--ink-mid)}.catalog-card-copy .pcard-cta{margin-top:auto}
.catalog-tile h3{font-size:var(--type-card-title);max-width:25ch}.catalog-tile .arrow-link{margin-top:auto}
.catalog-context-media{grid-column:span 6;align-self:stretch}.catalog-context-media:nth-of-type(4n){grid-column:span 12}
.selection-grid>.catalog-tile{grid-column:auto}.selection-grid>.catalog-tile .catalog-card-media{aspect-ratio:16/9}
.world-choice-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}
.world-choice{grid-column:span 6;display:flex;min-height:300px;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:clamp(1.5rem,4vw,4rem);border-radius:var(--r-card);color:var(--ink);text-decoration:none;border:1px solid rgba(0,0,0,.07)}
.world-choice:nth-child(3){grid-column:span 4}.world-choice:nth-child(4){grid-column:span 4}.world-choice:nth-child(5){grid-column:span 4}
.world-choice .arrow-link{margin-top:1rem}.world-choice h2{font-size:var(--type-section)}
.catalog-variants .link-index{margin:0;padding:0;list-style:none}.catalog-variants a,#angebote .link-index a{display:flex;align-items:center;min-height:44px;min-width:44px;padding:.35rem 0}
.configurator-shell{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);gap:clamp(2rem,5vw,6rem);align-items:start}
.config-stage{position:sticky;top:120px;display:flex;flex-direction:column;align-items:flex-start;gap:1rem;padding:clamp(1rem,2vw,1.5rem);border-radius:var(--r-card);background:var(--paper);box-shadow:var(--shadow-lg);border:1px solid var(--hairline)}
.config-stage-media{width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-tile);background:var(--wash)}
.config-stage-picture{display:block;width:100%;height:100%}.config-stage-media img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;transition:opacity .24s cubic-bezier(.23,1,.32,1),transform .28s cubic-bezier(.23,1,.32,1)}
.config-stage h2{font-size:var(--type-section)}.config-flow{min-width:0}
.config-current-scope{width:100%}.config-scope{width:100%;margin-top:.8rem;padding:1rem;border:1px solid var(--hairline);border-radius:var(--r-control);background:var(--wash)}
.config-scope summary{cursor:pointer;font-weight:500}.config-scope ul{display:grid;gap:.45rem;margin:.8rem 0 0;padding-left:1.15rem}
.shop-scope-summary{margin:1.25rem 0;padding:1rem;border-radius:var(--r-control);background:var(--wash)}.shop-scope-summary h3{font-size:1rem;margin-bottom:.65rem}
.config-addon-option{display:grid;gap:.45rem}.config-addon-option .config-scope{margin:.1rem 0 .5rem}
.config-tools{display:flex;flex-wrap:wrap;gap:.65rem;margin-bottom:1rem}.config-tools .btn{padding:.68rem 1rem}
.config-progress{height:5px;border-radius:var(--r-pill);background:var(--hairline);overflow:hidden;margin-bottom:2rem}
/* DESIGN-DEMO 04.09.2026 — Punkt 2 (Impeccable layout-transition, Emil Standard 7):
   der Fortschrittsbalken animierte seine `width`. Das Skript setzt die Breite und
   bleibt unveraendert; nur der Uebergang faellt weg. Eine transform-Fassung ginge
   nur ueber eine Skriptaenderung (style.width -> scaleX), und Skripte bleiben in
   diesem Gang funktional unangetastet. */
.config-progress span{display:block;width:16.666%;height:100%;background:var(--blue);transition:none}
.config-step{display:none;min-height:420px}.config-step.is-active{display:block;animation:config-in .28s cubic-bezier(.23,1,.32,1) both}
@keyframes config-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.config-step h2{font-size:var(--type-section);margin:.6rem 0 1.5rem}.config-choices{display:grid;gap:10px}
.config-choice{width:100%;min-height:58px;padding:14px 18px;border-radius:var(--r-control);border:1px solid var(--hairline);background:var(--paper);color:var(--ink);font:inherit;font-weight:500;text-align:left;cursor:pointer;transition:border-color .2s ease,background .2s ease,transform .2s ease}
.config-choice:hover,.config-choice:focus-visible{border-color:var(--blue);background:var(--wash);transform:translateX(3px)}
.config-family-group{margin-bottom:clamp(2rem,4vw,3.5rem)}.config-family-group h3{font-size:var(--type-card-title);margin-bottom:1rem}
.config-operation-guidance{margin:0 0 1rem;color:var(--ink-mid)}
.config-operation-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.config-operation-card{display:flex;min-width:0;flex-direction:column;align-items:flex-start;gap:.75rem;padding:clamp(1.15rem,2vw,1.7rem);border:1px solid var(--hairline);border-radius:var(--r-tile);background:var(--paper)}
.config-operation-card.is-selected{border-color:var(--blue);box-shadow:0 0 0 2px color-mix(in srgb,var(--blue) 18%,transparent)}
.config-operation-card h3{font-size:var(--type-card-title)}.config-continue{margin-top:1.5rem}
.config-decision,.config-addon-group{display:grid;gap:.65rem;margin:0 0 1.5rem;padding:clamp(1rem,2vw,1.5rem);border:1px solid var(--hairline);border-radius:var(--r-tile);background:var(--paper)}
.config-decision legend,.config-addon-group legend{padding:0 .35rem;font-size:var(--type-card-title);font-weight:500}
.config-addon-selection-summary{margin:0 0 1.25rem;padding:1rem 1.1rem;border-radius:var(--r-control);background:var(--wash);color:var(--ink-mid)}
.config-addon-selection-summary p{margin:0}.config-addon-selection-summary strong{color:var(--ink)}
.config-addon-categories{display:grid;gap:.75rem}.config-addon-category{overflow:hidden;border:1px solid var(--hairline);border-radius:var(--r-tile);background:var(--paper)}
.config-addon-category.has-selection{border-color:color-mix(in srgb,var(--blue) 58%,var(--hairline))}
.config-addon-category-title{display:flex;min-height:64px;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.15rem;cursor:pointer;list-style:none}
.config-addon-category-title::-webkit-details-marker{display:none}.config-addon-category-title::after{content:"+";flex:0 0 auto;font-size:1.4rem;font-weight:400;color:var(--ink-mid)}
.config-addon-category[open]>.config-addon-category-title::after{content:"−"}.config-addon-category-copy{display:grid;gap:.15rem}
.config-addon-category-copy strong{font-size:1.05rem}.config-addon-category-count{font-size:.88rem;color:var(--ink-mid)}
.config-addon-category-selected{display:inline-flex;margin-left:auto;padding:.25rem .55rem;border-radius:var(--r-pill);background:#e7f0ff;color:#133e73;font-size:.8rem;font-weight:500;white-space:nowrap}
.config-addon-category-selected:empty{display:none}.config-addon-category-body{display:grid;gap:.25rem;padding:0 1rem 1rem}
.config-addon-category .config-addon-group{margin:0;padding:1rem 0;border:0;border-top:1px solid var(--hairline);border-radius:0}
.shop-korb-auftrag{padding:1rem 0;border-bottom:1px solid var(--hairline)}
.shop-korb-kopf h3{margin:0 0 .5rem}
.shop-korb-aktionen{display:flex;flex-wrap:wrap;gap:.5rem;margin:.75rem 0 0}
.shop-korb-zaehler,.shop-korb-hinweis{margin:0 0 .75rem;font-size:var(--type-card-copy);color:var(--ink-mid)}
.shop-korb-bestaetigung{margin:.75rem 0 0;font-size:var(--type-card-copy)}
.shop-korb-bestaetigung:empty{display:none}
.config-nachkauf{display:grid;gap:.5rem;margin:.5rem 0 .75rem;padding:.75rem;border:1px solid var(--hairline);border-radius:var(--r-control)}
.config-nachkauf-zeile{margin:0;font-size:var(--type-card-copy)}
.config-nachkauf-grenze{display:grid;gap:.35rem;font-size:var(--type-card-copy)}
.shop-nachkauf-zeile{margin:.5rem 0 0;font-size:var(--type-card-copy)}
.config-stage-auswahl{display:grid;gap:.35rem;margin:.75rem 0 0}
.config-stage-auswahl .csa-zeile{display:flex;justify-content:space-between;gap:1rem;font-size:var(--type-card-copy)}
.config-stage-auswahl .csa-zeile span:first-child{color:var(--ink-mid);min-width:0;overflow-wrap:anywhere}
.config-stage-summen{display:grid;gap:.25rem;margin:.75rem 0 0;padding-top:.75rem;border-top:1px solid var(--hairline)}
.config-stage-summen .css-zeile{display:flex;justify-content:space-between;gap:1rem;font-size:var(--type-card-copy)}
.config-stage-summen .css-hinweis{margin:0;font-size:var(--type-card-copy);color:var(--ink-mid)}
.shop-abbruch{margin:0 0 1.5rem;padding:1rem 1.25rem;border:1px solid var(--hairline);border-radius:var(--r-control);background:var(--wash)}
.shop-abbruch-text{margin:0 0 .75rem}
.pcard-einrichtung{margin:.15rem 0 0;font-size:var(--type-card-copy);color:var(--ink-mid)}
.preis-hinweis{margin:1.25rem 0 0;font-size:var(--type-card-copy);color:var(--ink-mid)}
.config-decision-count{margin:.35rem 0 .6rem;font-size:var(--type-card-copy);color:var(--ink-mid)}
.config-check.is-gesperrt{opacity:.5;cursor:not-allowed}
.config-check,.config-addon-card{display:flex;min-width:0;min-height:54px;align-items:flex-start;gap:.8rem;padding:.8rem;border:1px solid var(--hairline);border-radius:var(--r-control);cursor:pointer}
.config-check:has(input:checked),.config-addon-card:has(input:checked){border-color:var(--blue);background:var(--wash)}
.config-check input,.config-addon-card input{width:22px;height:22px;flex:0 0 22px;margin:.1rem 0 0;accent-color:var(--blue)}
.config-addon-copy{display:grid;min-width:0;gap:.2rem}.config-addon-copy span{overflow-wrap:anywhere}
.shop-lock-label,.shop-included-label,.shop-request-label{display:inline-flex;width:max-content;max-width:100%;padding:.3rem .6rem;border-radius:var(--r-pill);font-size:var(--type-card-copy);font-weight:500;line-height:1.25}
.shop-lock-label{background:#e7f0ff;color:#133e73}.shop-included-label{background:#e8f6ed;color:#1d6238}.shop-request-label{background:#fff4db;color:#76520c}
.shop-selection-overview{display:grid;gap:.2rem;margin-bottom:1.25rem;padding-bottom:1.25rem;border-bottom:1px solid var(--hairline)}
.shop-selection-overview p{margin:0}.shop-summary-lines{display:grid;gap:0;list-style:none;margin:0;padding:0}
.shop-summary-line{display:grid;gap:.5rem;padding:1rem 0;border-bottom:1px solid var(--hairline)}
.shop-line-heading{display:flex;min-width:0;align-items:flex-start;justify-content:space-between;gap:1rem}.shop-line-heading>*{min-width:0;overflow-wrap:anywhere}
.shop-totals{display:grid;gap:.45rem;margin-top:1.25rem;padding-top:1.25rem;border-top:2px solid var(--ink)}
.shop-total-row{display:flex;justify-content:space-between;gap:1rem}.shop-total-row:nth-child(3),.shop-total-row:nth-child(6){font-size:1.05rem}
.shop-next-copy{margin-top:1.25rem}.shop-error{padding:1rem;border-radius:var(--r-control);background:#fff0ee;color:#7b2118}.shop-loading{color:var(--ink-mid)}
#configNextStep{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.25rem}
.shop-cart-backdrop{position:fixed;z-index:1190;inset:0;background:rgba(4,11,20,.5);backdrop-filter:blur(3px)}
.shop-cart-drawer{position:fixed;z-index:1200;inset:0 0 0 auto;width:min(100%,520px);overflow:auto;padding:clamp(1rem,3vw,2rem);background:var(--paper);box-shadow:-18px 0 60px rgba(0,0,0,.24)}
.shop-cart-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:1rem;border-bottom:1px solid var(--hairline)}
.shop-cart-head h2{font-size:var(--type-subsection)}.shop-cart-content{padding-top:1.25rem}.shop-cart-open{overflow:hidden}
[hidden]{display:none!important}
.config-detail-card{padding:1.4rem;border:1px solid var(--hairline);border-radius:var(--r-tile);background:var(--paper)}
.config-detail-card h3{font-size:var(--type-card-title)}.scope-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.scope-card{padding:clamp(1.25rem,2vw,2rem);border-radius:var(--r-tile);border:1px solid var(--hairline);background:var(--paper)}
.scope-card h3{font-size:var(--type-card-title)}.system-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}
.system-visual{grid-column:span 6}.system-visual:nth-child(4n+1){grid-column:span 7}.system-visual:nth-child(4n+2){grid-column:span 5}
.system-visual h3{font-size:var(--type-card-title);margin:1rem 0 .35rem}.system-visual p{color:var(--ink-mid)}
.checkout-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,420px);gap:clamp(2rem,5vw,5rem);align-items:start}
.checkout-summary,.checkout-safety{padding:clamp(1.5rem,3vw,2.5rem);border-radius:var(--r-tile);background:var(--paper);border:1px solid var(--hairline)}
.checkout-safety{position:sticky;top:120px}.checkout-lines{display:grid;gap:1rem;list-style:none}.checkout-line{padding-bottom:1rem;border-bottom:1px solid var(--hairline)}
.checkout-line a{font-weight:500}.legal-import h1{font-size:var(--type-display)}.legal-import h2{font-size:var(--type-section);margin-top:2.5rem}.legal-import .linkzeile>a,.copy-document .linkzeile>a{display:inline-flex;align-items:center;min-height:44px}
.legal-import h3{font-size:var(--type-card-title);margin-top:1.7rem}.legal-import p,.legal-import li{max-width:75ch}
.link-index,.link-columns{display:grid;gap:.55rem;padding-left:1.1rem}.link-columns{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:1rem}
.acceptance-index{padding:1rem 0;border-bottom:1px solid var(--hairline)}.acceptance-index summary{font-size:var(--type-card-title);cursor:pointer}
@media(max-width:980px){.catalog-tile,.catalog-tile.tile-span-2,.catalog-context-media,.catalog-context-media:nth-of-type(4n){grid-column:span 6}.configurator-shell{grid-template-columns:1fr}.config-stage{position:relative;top:auto}.checkout-layout{grid-template-columns:1fr}.checkout-safety{position:relative;top:auto}.link-columns{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.image-target{aspect-ratio:4/5}.media-bento{grid-template-columns:1fr 1fr}.media-bento .bento-media:nth-child(n){grid-column:span 1}.media-bento .bento-media:first-child{grid-column:1/-1}.selection-grid,.scope-grid,.config-operation-list{grid-template-columns:1fr}.catalog-bento{grid-template-columns:1fr}.catalog-tile,.catalog-tile.tile-span-2,.catalog-context-media,.catalog-context-media:nth-of-type(4n){grid-column:1}.world-choice-grid{grid-template-columns:1fr}.world-choice,.world-choice:nth-child(n){grid-column:1;min-height:230px}.system-bento{grid-template-columns:1fr}.system-visual,.system-visual:nth-child(n){grid-column:1}.configurator-shell{padding-inline:0}.config-stage,.config-flow{margin-inline:16px}.link-columns{grid-template-columns:1fr}/* 03.09.2026 (TYPOGRAFIE): keine 11vw-Ueberschreibung mehr, h1 bleibt auf --type-display (40 -> 64) */.shop-line-heading{display:grid;gap:.25rem}.shop-total-row{align-items:flex-start}.shop-cart-drawer{width:100%}}
@media(max-width:520px){.copy-document .copy-title.h1-wort-l,.legal-import h1.h1-wort-l{font-size:clamp(1.5rem,8.6vw,2.25rem)}.copy-document .copy-title.h1-wort-xl,.legal-import h1.h1-wort-xl{font-size:clamp(1.25rem,7vw,1.75rem)}}
@media(max-width:390px){.media-bento{grid-template-columns:1fr}.media-bento .bento-media:nth-child(n){grid-column:1}.selection-card,.catalog-tile{min-height:auto}.config-stage,.config-flow{margin-inline:10px}}
@media(prefers-reduced-motion:reduce){.selection-card,.catalog-tile,.config-choice,.config-stage-media img,.config-progress span{transition:none!important}.config-step.is-active{animation:none}}


/* SHOP-KORREKTUR-GANG 06.09.2026 — Zieleinstieg, Loesungen, Produktseite, Korbsummen.
   Alle Werte aus den Kanon-Tokens, keine neue Farbe, keine neue Schrift. */
.shop-einstieg{padding-block:clamp(1.5rem,3vw,2.5rem) clamp(1rem,2vw,1.5rem)}
.shop-einstieg h1{margin:0 0 .5rem}.shop-einstieg .lead{margin:0 0 1.25rem;max-width:65ch}
.shop-einstieg .bs-einstiege{margin:0}
/* SHOP-EINSTIEG UND ZWEI MODI (Owner-Auftrag 07.09.2026) */
.shop-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem}
.shop-kopf-text{min-width:0;flex:1 1 32rem}.shop-korb-knopf{flex:0 0 auto;margin-top:.25rem}
.shop-korb-zahl{display:inline-block;min-width:1.6em;margin-left:.35rem;padding:.05em .45em;border-radius:var(--r-pill);background:var(--blue);color:var(--paper);font-size:var(--type-label);font-weight:600;text-align:center}
.shop-einstieg .bs-listenkopf{margin-top:0}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.shop-hilfe>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.6rem;min-height:44px;padding:.6rem 0;font-weight:600;font-size:var(--type-card-title)}
.shop-hilfe>summary::-webkit-details-marker{display:none}.shop-hilfe>summary::before{content:"›";display:inline-block;transition:transform 160ms cubic-bezier(.23,1,.32,1);color:var(--ink-soft)}
.shop-hilfe[open]>summary::before{transform:rotate(90deg)}.shop-hilfe-text{max-width:65ch;margin:0 0 1rem}
.config-kopf{margin:0 0 1rem}
[data-shop-modus="konfiguration"] .shop-einstieg,[data-shop-modus="konfiguration"] .shop-hilfe>summary,[data-shop-modus="konfiguration"] .shop-hilfe-text,[data-shop-modus="konfiguration"] .shop-schluss{display:none}
[data-shop-modus="uebersicht"] .config-stage,[data-shop-modus="uebersicht"] .config-tools,[data-shop-modus="uebersicht"] .config-progress,[data-shop-modus="uebersicht"] #configSchritte,[data-shop-modus="uebersicht"] .config-kopf,[data-shop-modus="uebersicht"] [data-config-step="3"],[data-shop-modus="uebersicht"] [data-config-step="4"],[data-shop-modus="uebersicht"] [data-config-step="5"],[data-shop-modus="uebersicht"] [data-config-step="6"],[data-shop-modus="uebersicht"] #configAktionsleiste{display:none!important}
[data-shop-modus="uebersicht"] .configurator-shell{grid-template-columns:1fr}
.config-stage>.config-stage-media{max-height:120px;aspect-ratio:auto}.config-stage>.config-stage-media img{height:120px;width:auto;max-width:100%}
.shop-schluss-raster{display:grid;gap:1.5rem;grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.shop-schluss-raster{grid-template-columns:minmax(0,320px) minmax(0,1fr)}}
.shop-schluss-bild figure{margin:0}.shop-schluss-bild img{width:100%;height:auto;border-radius:var(--r-tile)}
/* MASSE DER BAUVORLAGE (07.09.2026, Ansicht A): Inhalt max. 1280 px, Suche 48–52 px, Chips ≥ 44 px mit 8 px
   Abstand, Karten drei Spalten / eine Spalte; Kartenbeginn spaetestens 480 px (1440) bzw. 540 px (390); auf dem
   Telefon Name, Einmalpreis, Pflichtkosten und Hauptknopf im ersten Bildschirm. Chips brechen sichtbar um,
   keine versteckte horizontale Liste. Gemessen am ersten Bau: Suche 542, Chips 246 px hoch, erste Karte 913 px. */
.shop-einstieg .container{max-width:1280px}
.shop-satz-kurz{display:none}
.shop-einstieg .bs-suche input{min-height:48px}
.shop-einstieg .bs-filtergruppe{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.shop-einstieg .bs-filter{min-height:44px}
/* Aktionsleiste: der Name der Leistung bricht um statt zu kuerzen (Design-Blick ABGESCHNITTEN bei 390: „Automatisierung und Integrationen") */
.bs-aktionsleiste .bs-summe-zeile{white-space:normal;overflow:visible;text-overflow:clip}
@media(max-width:1099px){.bs-aktionsleiste{flex-wrap:wrap}.bs-aktionsleiste .bs-summe{flex:1 1 12rem}.bs-aktionsleiste .config-continue{flex:1 1 auto}}
.bs-listen-kopfzeile{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem 1rem;margin:1rem 0 .75rem}
.bs-listen-kopfzeile h2{margin:0}.bs-listen-steuer{margin:0;font-size:var(--type-fussnote);color:var(--ink-soft)}
.shop-einstieg .bs-listenkopf{margin-top:0}.shop-einstieg .bs-treffer{margin:.35rem 0 0}
/* Kartenbeginn: Suche und Filter eng gesetzt (gemessen 600 px bei 1440, 690 px bei 390 nach dem ersten Bau) */
.shop-einstieg .shop-kopf{margin-bottom:.9rem}.shop-einstieg .lead{margin:0 0 .9rem}.shop-einstieg .kicker{margin-bottom:.2rem}
.shop-einstieg .bs-suche{margin:0 0 .6rem}.shop-einstieg .bs-suche label{margin-bottom:.3rem}
.shop-einstieg .bs-filterleiste{margin:0;padding:0}.shop-einstieg .bs-filtergruppe{margin:0}.shop-einstieg .bs-filter-zuruecksetzen{margin:0}.shop-einstieg .bs-listenkopf{padding:0;border:0;margin:0 0 .5rem;gap:.6rem}.shop-einstieg .bs-treffer:empty{display:none}
.shop-einstieg .bs-produktkarte .bs-inhalt{gap:.4rem}
.shop-einstieg .bs-listen-kopfzeile{margin:.6rem 0 .3rem}.shop-einstieg .shop-kopf{margin-bottom:.75rem}
/* Bauvorlage-Masse: H1 ~42 px (Desktop), Suchbeschriftung zugaenglich zugeordnet (Platzhalter traegt das Beispiel),
   Listenueberschrift in Abschnittsgroesse, Kartenbild im Shop-Einstieg klein. Gemessen vor dieser Stufe: H1 64 px,
   h2 48 px, Trefferzeile 25 px leer, Karte bei 588 px (1440) / 708 px (390). */
/* KANON-SKALA IM SHOP-KOPF (Owner-Entscheid B, 08.09.2026): H1 = --type-display (1.06, -.03em), Lead = --type-lead,
   Listenueberschrift = --type-section — TYPOGRAFIE-Riegel im Staging 07.09. rot (H1 28,86 / H2 20 / Lead 15 px bei 390).
   Der Platz fuer den ersten Hauptknopf bei 390 x 844 kommt aus den Abstaenden im Mobilblock unten, nicht aus den Texten. */
.shop-einstieg h1{font-size:var(--type-display);line-height:1.06;letter-spacing:-.03em}
.shop-einstieg .lead{font-size:var(--type-lead)}
.config-titel{font-size:clamp(1.6rem,2.6vw,2.25rem);margin:.25rem 0 .75rem;line-height:1.15}.config-kopf p{margin:0}
.btn[aria-disabled="true"]{background:var(--wash);color:var(--ink-mid);border-color:var(--hairline);cursor:default}
.shop-einstieg .bs-suche input{min-height:50px;font-size:var(--type-body)}
.shop-einstieg .bs-listen-titel{font-size:var(--type-section)}
.shop-einstieg .bs-treffer[hidden]{display:none}
.shop-einstieg .bs-produktkarte .bs-bild{max-height:150px}.shop-einstieg .bs-produktkarte .bs-bild img{max-height:150px;object-fit:cover}
@media(max-width:699px){
  .shop-einstieg .kicker{display:none}
  /* Kanon-Skala (H1 3 Zeilen, Steuerhinweis 15 px in 2 Zeilen) braucht bei 390 rund 108 px mehr; gewonnen ueber Abstaende:
     Abschnitts-Innenabstand, Kopf-, Such-, Chip- und Listenkopf-Abstaende, Preisblock und Knopf (44 px) — gemessen 08.09.2026:
     Knopf 792–837,9 px (46 px hoch), Name 590, Preis 722–784 px im ersten Bildschirm. Texte unveraendert. */
  .shop-einstieg{padding-top:.5rem}
  .shop-einstieg h1{margin:0 0 .2rem}
  .shop-einstieg .lead{margin:0 0 .4rem}
  .shop-einstieg .shop-kopf{margin-bottom:.25rem}
  .shop-einstieg .bs-suche{margin:0}.shop-einstieg .bs-suche input{min-height:48px}
  .shop-einstieg .bs-listenkopf{gap:.4rem;margin:0 0 .25rem}.shop-einstieg .bs-filtergruppe{gap:6px}
  .shop-einstieg .bs-listen-kopfzeile{margin:.25rem 0 .25rem;gap:0 .75rem}
  .shop-einstieg .bs-produktkarte .bs-bild{height:56px;max-height:56px;aspect-ratio:auto}.shop-einstieg .bs-produktkarte .bs-bild img,.shop-einstieg .bs-produktkarte .bs-bild picture{height:56px;max-height:56px;width:100%;object-fit:cover}
  /* Die Gruppenbeschriftung „Einmalig" wiederholt die Periode der Preiszeile („ab 499 € einmalig") — auf dem Telefon entfaellt sie im Shop-Einstieg, damit der Hauptknopf im ersten Bildschirm steht */
  .shop-einstieg .bs-produktkarte .bs-preis-label{display:none}
  .shop-einstieg .bs-produktkarte .bs-inhalt{gap:.25rem;padding:.35rem .85rem .8rem}.shop-einstieg .bs-produktkarte .bs-nutzen{line-height:1.35}
  .shop-einstieg .bs-produktkarte .bs-cta{margin-top:.25rem;min-height:44px;padding-block:.6rem}
  .shop-einstieg .bs-produktkarte .bs-preisblock{margin:.15rem 0 0;padding-top:.35rem}
  .shop-einstieg .bs-listenkopf{margin:0 0 .25rem;gap:.4rem}
  .shop-einstieg .lead{margin:0 0 .4rem}.shop-einstieg h1{margin:0 0 .2rem}
  .shop-einstieg .bs-filter{font-size:.875rem}
  .shop-einstieg .bs-produktkarte .bs-inhalt{padding:.35rem .9rem .9rem}
  .shop-einstieg .bs-produktkarte h3{margin-bottom:.25rem}.shop-einstieg .bs-produktkarte .bs-nutzen{margin:0 0 .35rem}
  .shop-einstieg .bs-produktkarte .bs-punkte{gap:.15rem;margin-bottom:.35rem}
  .shop-einstieg .bs-filter{padding:.45rem .6rem}
  .shop-einstieg .bs-produktkarte .bs-preisblock{margin:.15rem 0 0}
  .shop-einstieg .bs-produktkarte .bs-cta{margin-top:.25rem}
}
@media(max-width:699px){
  /* Kanon B (08.09.2026): keine Sonderskala mehr fuer H1 und Lead im Shop-Kopf (die Regeln .shop-einstieg h1 / .lead oben gelten);
     die Abstaende sind die Stellschraube fuer den ersten Bildschirm bei 390 x 844, am Bau gemessen. */
  .shop-einstieg{padding-block:.5rem .75rem}
  .shop-kopf{margin-bottom:.25rem;gap:.5rem}
  .shop-kopf-text .kicker{margin-bottom:.2rem}.shop-kopf-text h1{margin:0 0 .2rem}
  .shop-kopf .lead{margin:0 0 .4rem}.shop-satz-lang{display:none}.shop-satz-kurz{display:inline}
  .shop-einstieg .bs-suche label{margin-bottom:.2rem}
  .shop-einstieg .bs-filterleiste{margin-top:.25rem}
  .bs-listen-kopfzeile{margin:.25rem 0 .25rem}
  /* Karte kompakt: kleineres Bild, enge Abstaende — nichts abschneiden */
  .shop-einstieg .bs-produktkarte .bs-bild{max-height:120px}.shop-einstieg .bs-produktkarte .bs-bild img{max-height:120px;object-fit:cover}
  .shop-einstieg .bs-produktkarte .bs-inhalt{padding-top:.35rem}
}
/* Kopf-Warenkorb (Bauvorlage: Navigation „Shop", „Warenkorb"; mobil ein benanntes Symbol) */
.korb-link{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-width:44px;min-height:44px;padding:.4rem .6rem;border:0;background:transparent;font:inherit;color:inherit;cursor:pointer;border-radius:var(--r-control)}
.korb-link:hover,.korb-link:focus-visible{color:var(--blue-press)}.korb-link .shop-korb-zahl{margin-left:0}
@media(max-width:899px){.korb-link .korb-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
/* Konfiguration (Ansicht C): Entscheidung links, Preisuebersicht rechts */
@media(min-width:981px){.config-stage{order:2}}
/* Warenkorb-Dialog (Ansicht D): grosszuegig, Artikel links, Summe und Hauptaktion rechts; mobil eine Spalte */
.shop-cart-drawer{inset:5vh auto auto 50%;transform:translateX(-50%);width:min(100% - 2rem,1040px);max-height:90vh;border-radius:var(--r-card);box-shadow:0 24px 80px rgba(0,0,0,.28)}
.shop-korb-status{margin:0 0 1rem;padding:.7rem 1rem;border-radius:var(--r-tile);background:var(--canvas);border:1px solid var(--hairline);font-weight:600}
.shop-korb-raster{display:grid;gap:1.5rem;grid-template-columns:1fr}
@media(min-width:900px){.shop-korb-raster{grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);align-items:start}}
.shop-korb-summe{position:sticky;top:0;padding:1rem 1.1rem;border:1px solid var(--hairline);border-radius:var(--r-tile);background:var(--paper)}
.shop-korb-aktionen{margin:1rem 0 0}.shop-korb-aktionen .bs-knopf{width:100%}
.shop-korb-weiter{display:inline-flex;align-items:center;min-height:44px;margin-top:.75rem}
@media(max-width:899px){.shop-cart-drawer{inset:0;transform:none;width:100%;max-height:none;border-radius:0}}
/* KEIN SEITENUEBERLAUF IM KONFIGURATOR (gemessen 07.09.2026 bei 390: die Nachkauf-Fieldset war 389 px breit —
   ein <fieldset> hat min-inline-size:min-content, das Auswahlfeld mit langem Optionstext trieb die Seite auf 420 px,
   der Mobilbrowser zoomte heraus und die feste Aktionsleiste rutschte unter den sichtbaren Rand). */
.config-decision,.config-addon-group,.config-operation-card,.configurator-shell,.config-flow,.config-step{min-inline-size:0;min-width:0;max-width:100%}
.config-nachkauf-grenze{display:grid;grid-template-columns:minmax(0,1fr);gap:.35rem}
.config-nachkauf-grenze select,.config-decision select{width:100%;max-width:100%;min-width:0}
.config-decision label,.config-decision legend,.config-decision p{max-width:100%;overflow-wrap:anywhere}
/* Karten-Feinschliff 07.09.2026: die Buehnen-Zeile traegt nach der Bereichswahl keinen Zaehler mehr — leer heisst weg, kein reservierter Platz */
#configStagePrice:empty{display:none}
.bs-einstieg-satz{font-size:var(--type-card-copy);color:var(--ink-mid);line-height:1.4}
/* Bereiche klein als Kategorien (Schritt 1): Chips statt Volltreffer-Knoepfe. */
.config-welten .config-choices{display:flex;flex-wrap:wrap;gap:.5rem}
.config-welten .config-choice{width:auto;min-height:44px;padding:.6rem 1rem;border-radius:var(--r-pill)}
.config-welten .config-choice:hover,.config-welten .config-choice:focus-visible{transform:none}
/* Loesungen nach der Bereichswahl: hoechstens sechs, je ein Satz und ein Preisrahmen. */
.config-loesungen{display:grid;gap:.75rem;margin:0 0 1rem}
@media(min-width:700px){.config-loesungen{grid-template-columns:repeat(2,minmax(0,1fr))}}
.config-loesung{display:grid;gap:.25rem;text-align:left;width:100%;min-height:44px;padding:.9rem 1.1rem;
  border:1px solid var(--hairline);border-radius:var(--r-tile);background:var(--paper);font:inherit;color:var(--ink);cursor:pointer;
  transition:transform 160ms cubic-bezier(.23,1,.32,1)}
.config-loesung:active{transform:scale(.99)}.config-loesung:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.config-loesung .cl-titel{font-weight:600;font-size:var(--type-body)}
.config-loesung .cl-satz{color:var(--ink-mid);font-size:var(--type-card-copy);line-height:1.4}
.config-loesung .cl-preis{font-weight:600;font-variant-numeric:tabular-nums;font-size:var(--type-card-copy)}
.config-loesung[aria-pressed="true"],.config-loesung.is-gewaehlt{border-color:var(--blue);background:var(--canvas)}
.config-rest{margin-top:.5rem}.config-rest>summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:600;color:var(--blue-press)}
.config-step{min-height:0}
/* Auswahlknopf (Variante) mit Titel, Preis und Unterschieds-Satz (K12) */
.config-choice.cc-karte{display:grid;gap:.15rem}
.config-choice .cc-titel{font-weight:600}.config-choice .cc-preis{font-variant-numeric:tabular-nums;color:var(--ink)}
.config-choice .cc-satz{font-weight:400;color:var(--ink-mid);font-size:var(--type-card-copy);line-height:1.4}
.config-operation-satz{margin:0;color:var(--ink-mid);font-size:var(--type-card-copy);line-height:1.4}
.config-stage>.config-stage-media{max-height:160px}.config-stage>.config-stage-media img{height:160px}
/* Das Einstiegsmotiv FUNC-02 bleibt klein in der Buehne (Bildvertrag: inline am Ziel);
   sobald eine Leistung gewaehlt ist, zeigt die Buehne deren Motiv. */
.config-stage-figure{margin:0;border-radius:0;aspect-ratio:auto;max-height:160px}
.config-stage-figure img{height:160px}
html:not([data-shop-stage="1"]) .config-stage-figure{display:none}
html[data-shop-stage="1"] .config-stage-picture{display:none}
/* Produktseite: erster Bildschirm */
.produkt-raster{display:grid;gap:clamp(1.5rem,3vw,2.5rem);margin-top:1rem}
@media(min-width:1100px){.produkt-raster{grid-template-columns:minmax(0,1fr) 400px;align-items:start}
  .produkt-raster .kauf-kopf{position:sticky;top:96px}}
/* EINE SPALTE (<1100): Titel zuerst, dann die Kaufspalte, dann der Text. Die Kaufspalte ist seit dem
   Nachschnitt (Unterschieds-Saetze, Pflichtkosten) hoeher als ein Telefonschirm; stand sie vor dem Titel,
   lag die H1 bei 390 px erst bei 958 px (Kundensicht K13 rot im Staging 07.09.2026). display:contents
   loest den Artikel nur fuer das Raster auf — die Copy bleibt im DOM ein zusammenhaengender Block
   (Quell-Gate „Copy-Ziel genau einmal"). gap:0 und Einzelabstaende, weil Raster-Abstaende nicht kollabieren. */
@media(max-width:1099px){.produkt-raster{gap:0;grid-template-columns:minmax(0,1fr)}.produkt-raster .copy-document{display:contents}.produkt-raster .copy-document>*{min-width:0;max-width:100%}.produkt-raster .copy-document>.copy-title{order:-2;margin-bottom:1rem}.produkt-raster .kauf-kopf{order:-1;margin:0 0 1.75rem}.produkt-raster .copy-document>p{margin:0 0 .7rem}}
.kauf-kopf{border:1px solid var(--hairline);border-radius:var(--r-tile);background:var(--paper);padding:1.1rem 1.2rem}
.kauf-kopf .kk-name{font-size:var(--type-label);font-weight:600;color:var(--ink-soft);margin:0 0 .5rem;text-transform:uppercase;letter-spacing:.04em}
.produkt-raster .copy-document .copy-title{margin-bottom:1.25rem}
.produkt-raster .copy-document h2{margin-top:2.5rem}
.copy-details>summary>h2{margin:0;font-size:var(--type-card-title)}
.kk-fakten{margin-top:2rem}
/* Zeitleiste der Abrechnung (N1): Schrift geerbt (Outfit), Farben ueber Tokens, quer ab 700 px */
.zeitleiste-abrechnung{margin:0;width:100%}.zeitleiste-abrechnung svg{width:100%;height:auto;display:block;font-family:inherit}
.zeitleiste-abrechnung .zl-quer{display:none;max-width:760px}.zeitleiste-abrechnung .zl-hoch{display:block;max-width:360px}
@media(min-width:700px){.zeitleiste-abrechnung .zl-quer{display:block}.zeitleiste-abrechnung .zl-hoch{display:none}}
.zeitleiste-abrechnung figcaption{font-size:var(--type-fussnote);color:var(--ink-soft);margin-top:.5rem}
.bs-variantenrest{grid-column:1/-1}.bs-variantenrest>summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:600;color:var(--blue-press)}
.bs-variantenrest[open]>summary{margin-bottom:.5rem}.bs-variantenrest .bs-auswahl{margin-bottom:.5rem}
.kauf-kopf .kk-ergebnis{font-size:var(--type-body);max-width:65ch;margin:0 0 .75rem}
.kauf-kopf .kk-preis{font-size:var(--type-body);font-weight:600;margin:0 0 .5rem;max-width:65ch}
.kauf-kopf .bs-variantenwahl{margin:.75rem 0 0;grid-template-columns:1fr}.kauf-kopf .kk-aktion{margin:1rem 0 0}
/* Eine Spalte in der 400-px-Seitenspalte: zwei Spalten liessen Variantennamen ueber die Karte
   ragen (Design-Blick UEBERLAUF, 83 Funde auf 27 Produktseiten bei 1440, 07.09.2026). */
@media(min-width:700px){.kauf-kopf .bs-variantenwahl{grid-template-columns:1fr}}
.kauf-kopf .kk-steuer{font-size:var(--type-fussnote);color:var(--ink-soft);margin:.5rem 0 0}
.detail-media{max-height:min(30vh,240px)}.detail-media-stage{padding-top:clamp(1rem,2vw,2rem)}
.selection-section{padding-block:clamp(2rem,4vw,3rem)}.selection-section .section-head{margin-bottom:1rem}
.produkt-raster .copy-document p{margin:.7rem 0}.produkt-raster .copy-document h2{margin-top:2.25rem}
.config-stage>.kk-steuer{order:6;font-size:var(--type-fussnote);color:var(--ink-soft);margin:0}
.copy-details{margin:1.5rem 0;border:1px solid var(--hairline);border-radius:var(--r-tile);padding:0 1rem}
.copy-details>summary{min-height:48px;display:flex;align-items:center;cursor:pointer;font-weight:600;font-size:var(--type-card-title)}
.copy-details[open]>summary{border-bottom:1px solid var(--hairline)}
/* Warenkorb und Bestelluebersicht: gemeinsame Summen */
.shop-korb-gesamt{margin:1rem 0;padding:1rem;border:1px solid var(--hairline);border-radius:var(--r-control);background:var(--canvas)}
.shop-korb-gesamt h3{font-size:var(--type-card-title);margin:0 0 .5rem}
.shop-korb-gesamt .shop-total-row{display:flex;justify-content:space-between;gap:1rem}
.shop-korb-gesamt .shop-total-row strong{font-size:var(--type-body)}
.shop-korb-gesamt .drawer-hinweis{margin:.5rem 0 0;font-size:var(--type-fussnote);color:var(--ink-soft)}
/* Nachkauf: Antworten als Auswahlkarten, Grenze nur bei „mit Grenze" */
.config-nachkauf-zeile{margin:0 0 .5rem}.config-nachkauf-grenze{display:grid;gap:.3rem;margin:.5rem 0 0}
.config-nachkauf-grenze[hidden]{display:none}


/* =====================================================================================
   SHOP-UX-BAUSTEINE (Shop-UX-Gang 06.09.2026, Quelle: bausteine.py).
   Neun wiederverwendbare Bausteine mit je sechs Zustaenden. Alle Werte aus den
   Kanon-Tokens; ein einziger neuer Token (--type-preis-gross), begruendet am Ort.
   ===================================================================================== */
:root{
  /* Der Preis ist die groesste Zahl einer Produktkarte und muss vor dem Titel
     gelesen werden. Die Kanon-Preisstufe endet bei 20 px (--type-preis) und ist
     damit kleiner als der Kartentitel (20-24 px). Diese Stufe fuehrt 28 -> 32 px
     und bleibt in derselben Klammerlogik wie die uebrigen Typo-Tokens. */
  --type-preis-gross:clamp(1.75rem,1.6rem + 0.6vw,2rem);
}

/* Kartenraster 3 / 2 / 1. Eine Regel fuer jede Liste von Bausteinen. */
.bs-raster{display:grid;gap:1.25rem;grid-template-columns:1fr;align-items:stretch}
@media(min-width:700px){.bs-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.bs-raster{grid-template-columns:repeat(3,minmax(0,1fr))}}
.bs-raster--zwei{grid-template-columns:1fr}
@media(min-width:700px){.bs-raster--zwei{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Gemeinsame Fokusmarke: sichtbar, ohne die Flaeche zu verschieben. */
.bs-produktkarte:focus-within,.bs-produktkarte.is-fokus,
.bs-auswahl:focus-within,.bs-auswahl.is-fokus,
.bs-korbposition:focus-within,.bs-korbposition.is-fokus,
.bs-schritt:focus-visible,.bs-schritt.is-fokus,
.bs-knopf:focus-visible,.bs-knopf.is-fokus{outline:3px solid var(--blue);outline-offset:3px}

/* ---------- 1. Produktkarte ---------------------------------------------------- */
.bs-produktkarte{display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--hairline);border-radius:var(--r-tile);overflow:hidden;
  transition:transform 160ms cubic-bezier(.23,1,.32,1),opacity 120ms cubic-bezier(.23,1,.32,1)}
.bs-produktkarte:hover{transform:translateY(-2px)}
.bs-produktkarte .bs-bild{aspect-ratio:4/3;background:var(--wash);display:block;
  width:100%;object-fit:cover}
.bs-produktkarte .bs-inhalt{display:flex;flex-direction:column;gap:.5rem;padding:1rem 1.1rem 1.2rem;flex:1}
/* Kein line-clamp: abgeschnittener Text ist im Design-Blick ROT (gemessen 06.09.2026:
   396 Funde). Die Laenge wird im Bau begrenzt, nicht im Browser abgeschnitten. */
.bs-produktkarte h3{font-size:var(--type-card-title);font-weight:600;line-height:1.25;margin:0}
/* Lesebreite wie im Kanon (65ch): im Hero der Galerie stand die Zeile mit 132
   Zeichen (Impeccable line-length, gemessen 06.09.2026). In der Karte ist sie
   ohnehin schmaler. */
.bs-nutzen{font-size:var(--type-body);color:var(--ink-mid);margin:0;line-height:1.45;
  max-width:65ch}
/* In der Liste zaehlt der erste Satz; gekuerzt wird im Bau (siehe angebots_karte),
   nicht per line-clamp — abgeschnittener Text ist im Design-Blick ROT. */
.bs-punkte{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.bs-punkte li{font-size:var(--type-card-copy);color:var(--ink-mid);padding-left:1.1rem;position:relative;line-height:1.4}
.bs-punkte li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;
  border-radius:50%;background:var(--blue)}
.bs-produktkarte .bs-preisblock{margin-top:auto;padding-top:.75rem}
.bs-produktkarte .bs-cta{margin-top:.9rem}
.bs-nicht-waehlbar{font-size:var(--type-card-copy);color:var(--ink-mid);
  margin:.5rem 0 0;font-weight:600}

/* ---------- 2. Preisblock ------------------------------------------------------ */
.bs-preisblock{display:grid;gap:.75rem}
.bs-preisgruppe{display:grid;gap:.15rem}
.bs-preisgruppe .bs-preis-label{font-size:var(--type-label);color:var(--ink-soft);margin:0}
.bs-preisgruppe .bs-preis{font-size:var(--type-preis-gross);font-weight:600;line-height:1.1;
  margin:0;color:var(--ink);font-variant-numeric:tabular-nums;
  /* Betrag und Zeitraum als Flex-Kinder: bricht „Richtpreis ab 7.499 €“ um, liegt „/ Monat“
     auf der naechsten Zeile statt ueber dem Betrag (Design-Blick UEBERLAPPUNG, 10 Funde, 07.09.2026). */
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .35rem}
.bs-preisgruppe .bs-preis .bs-zeitraum{font-size:var(--type-body);font-weight:500;color:var(--ink-mid)}
.bs-preisgruppe .bs-preis-zweite{font-size:var(--type-card-copy);color:var(--ink-mid);margin:0}
.bs-preisgruppe .bs-steuer{font-size:var(--type-fussnote);color:var(--ink-soft);margin:.15rem 0 0}

/* ---------- 3. Auswahlkarte ---------------------------------------------------- */
.bs-auswahl{display:flex;gap:.85rem;align-items:flex-start;background:var(--paper);
  border:1.5px solid var(--hairline);border-radius:var(--r-control);padding:.9rem 1rem;
  min-height:44px;cursor:pointer;
  transition:transform 140ms cubic-bezier(.23,1,.32,1),opacity 120ms cubic-bezier(.23,1,.32,1)}
.bs-auswahl:active{transform:scale(.99)}
.bs-auswahl input{width:22px;height:22px;margin:.15rem 0 0;flex:none;accent-color:var(--blue)}
.bs-auswahl .bs-auswahl-text{display:grid;gap:.2rem;min-width:0}
.bs-auswahl .bs-auswahl-titel{font-size:var(--type-body);font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.bs-auswahl .bs-auswahl-copy{font-size:var(--type-card-copy);color:var(--ink-mid);line-height:1.45}
.bs-auswahl .bs-auswahl-preis{font-size:var(--type-card-copy);color:var(--ink);font-weight:600;
  font-variant-numeric:tabular-nums}
/* Ausgewaehlt wird doppelt gezeigt: Rahmen UND Haekchen mit Beschriftung. Farbe
   allein waere fuer Rot-Gruen-Sehschwaeche keine Aussage. */
.bs-auswahl.is-gewaehlt{border-color:var(--blue);background:var(--canvas)}
.bs-auswahl .bs-marke{display:none;align-items:center;gap:.3rem;font-size:var(--type-label);
  font-weight:600;color:var(--blue-press);margin-top:.15rem}
.bs-auswahl.is-gewaehlt .bs-marke{display:flex}

/* ---------- 4. Fortschritt ----------------------------------------------------- */
.bs-fortschritt{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:0}
.bs-schritt{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:.4rem .85rem;
  border-radius:var(--r-pill);border:1px solid var(--hairline);background:var(--paper);
  font-size:var(--type-label);font-weight:600;color:var(--ink-soft);text-decoration:none;
  transition:opacity 120ms cubic-bezier(.23,1,.32,1)}
.bs-schritt .bs-nr{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;background:var(--wash);color:var(--ink-mid);font-size:var(--type-fussnote)}
/* Erledigte Schritte sind anklickbar (zurueck), der aktive traegt aria-current. */
.bs-schritt.is-erledigt{color:var(--ink);border-color:var(--hairline)}
.bs-schritt.is-erledigt .bs-nr{background:var(--blue);color:var(--paper)}
.bs-schritt[aria-current="step"]{color:var(--paper);background:var(--blue);border-color:var(--blue)}
.bs-schritt[aria-current="step"] .bs-nr{background:var(--paper);color:var(--blue-press)}
/* Ein spaeterer Schritt ist noch nicht erreichbar — das zeigt die graue Flaeche,
   nicht eine halbdurchsichtige Schrift (Kontrast bleibt lesbar). */
.bs-schritt.is-aus,.bs-schritt[aria-disabled="true"]{background:var(--wash);
  color:var(--ink-mid);border-color:var(--hairline);pointer-events:none}

/* ---------- 5. Aktionsleiste --------------------------------------------------- */
/* AKTIONSLEISTE-REGEL (Shop-Korrektur-Gang 06.09.2026, U03):
   Desktop (ab 1100): IM FLUSS direkt unter der Auswahl, kein position:fixed — die
   schwebende Karte rechts unten deckte die Fusszeile (Kundenbefund, gemessen
   06.09.2026: 5 von 10 Scrollpositionen bei 1440). Mobil (unter 1100): fest am
   unteren Rand MIT reserviertem Platz — das Skript misst die Leistenhoehe und
   schreibt sie als --bs-leiste-hoehe an den body, der Inhalt bekommt genau diesen
   Platz; die Leiste liegt damit nie ueber Fusszeile, Formular oder letztem Knopf.
   Ausserhalb des Konfigurators existiert sie nicht (nur shop/index.html). */
.bs-aktionsleiste{position:static;margin-top:1.25rem;background:var(--paper);
  border:1px solid var(--hairline);border-radius:var(--r-tile);
  padding:1rem 1.1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.bs-aktionsleiste .bs-summe{display:grid;gap:.1rem;min-width:0}
.bs-aktionsleiste .bs-summe-zeile{font-size:var(--type-card-copy);color:var(--ink-mid);
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bs-aktionsleiste .bs-summe-zeile b{color:var(--ink);font-weight:600}
@media(max-width:1099px){
  .bs-aktionsleiste{position:fixed;left:0;right:0;bottom:0;z-index:140;margin:0;
    border:0;border-top:1px solid var(--hairline);border-radius:0;
    box-shadow:0 -6px 24px rgba(29,29,31,.10);
    padding:.75rem 1rem calc(.75rem + env(safe-area-inset-bottom,0px))}
  body.hat-aktionsleiste{padding-bottom:var(--bs-leiste-hoehe,6.5rem)}
}

/* ---------- Knopf (eine Basis fuer alle Bausteine) ------------------------------ */
.bs-knopf{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  min-height:44px;padding:.7rem 1.2rem;border:1px solid var(--blue);border-radius:var(--r-control);
  background:var(--blue);color:var(--paper);font:inherit;font-size:var(--type-button);font-weight:600;
  cursor:pointer;text-decoration:none;text-align:center;
  transition:transform 160ms cubic-bezier(.23,1,.32,1),opacity 120ms cubic-bezier(.23,1,.32,1)}
.bs-knopf:active{transform:scale(.97)}
.bs-knopf--leise{background:var(--paper);color:var(--blue-press)}
.bs-knopf--link{background:transparent;border-color:transparent;color:var(--blue-press);
  text-decoration:underline;padding-inline:.4rem}
/* Inaktiv und ladend werden ueber FLAECHE und FARBE gezeigt, nicht ueber Deckkraft:
   `opacity:.45` ergab 1,8:1 auf dem Knopftext (Impeccable low-contrast, 06.09.2026).
   Der graue Knopf ist eindeutig nicht der gruene, und sein Text bleibt lesbar. */
.bs-knopf[disabled],.bs-knopf.is-aus,.bs-knopf[aria-disabled="true"]{
  background:var(--wash);color:var(--ink-mid);border-color:var(--hairline);
  cursor:not-allowed;transform:none}
.bs-knopf[aria-busy="true"],.bs-knopf.is-laedt{background:var(--wash);color:var(--ink-mid);
  border-color:var(--hairline);cursor:progress}
/* Kein blinkender Punkt: eine Endlosanimation ueber 300 ms verlaesst den Kanon
   (BEWEGUNG). Der Ladezustand steht an `aria-busy` und im Knopftext. */
.bs-knopf.is-laedt .bs-punkt{width:6px;height:6px;border-radius:50%;background:currentColor;
  display:inline-block;opacity:.55}
.bs-knopf.is-laedt .bs-punkt:nth-child(2){opacity:.75}
.bs-knopf.is-laedt .bs-punkt:nth-child(3){opacity:1}

/* ---------- 6. Variantenvergleich ---------------------------------------------- */
/* Unter 700 px wird NICHT gewischt (A11y-Regel 4 und KARUSSELL-Riegel: Preise und
   Pflichtangaben duerfen nie nur in einem Scroll-Container stehen — gemessen
   06.09.2026 auf paket/web.crm und web.vertrauen). Ab 700 px darf die Tabelle
   scrollen, dort stehen die Betraege zusaetzlich in den Auswahlkarten darunter. */
.bs-vergleich-huelle{overflow-x:visible}
@media(min-width:700px){.bs-vergleich-huelle{overflow-x:auto}}
@media(max-width:699px){
  .bs-vergleich,.bs-vergleich thead,.bs-vergleich tbody,.bs-vergleich tr,
  .bs-vergleich th,.bs-vergleich td{display:block;width:auto;min-width:0}
  /* Kopf ganz ausblenden, nicht auf 1 px klemmen: die sr-only-Technik erzeugt ein
     1 px breites Feld mit 99 px Inhalt, und der Design-Blick meldet das zu Recht als
     UEBERLAUF und ABGESCHNITTEN (22 Funde, gemessen 06.09.2026). In der gestapelten
     Darstellung traegt ohnehin jede Zelle ihren Spaltennamen ueber data-spalte. */
  .bs-vergleich thead{display:none}
  .bs-vergleich tbody tr{border-bottom:1px solid var(--hairline);padding:.5rem 0}
  .bs-vergleich tbody th{width:auto;padding:.35rem 0 .1rem;font-weight:600;color:var(--ink)}
  .bs-vergleich tbody td{padding:.1rem 0 .1rem 1rem;position:relative}
  .bs-vergleich tbody td::before{content:attr(data-spalte) ": ";color:var(--ink-soft);
    font-size:var(--type-label)}
}
.bs-vergleich{width:100%;border-collapse:collapse;font-size:var(--type-card-copy);
  min-width:min(100%,520px)}
.bs-vergleich caption{text-align:left;font-size:var(--type-label);color:var(--ink-soft);
  padding-bottom:.5rem}
.bs-vergleich th,.bs-vergleich td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--hairline);
  vertical-align:top;line-height:1.4}
.bs-vergleich thead th{font-size:var(--type-body);font-weight:600;color:var(--ink);
  border-bottom:2px solid var(--hairline)}
.bs-vergleich tbody th{font-weight:500;color:var(--ink-mid);width:34%}
.bs-vergleich td{color:var(--ink-mid)}
/* Nur die Zellen, in denen sich die Varianten unterscheiden, tragen Gewicht. */
.bs-vergleich td.bs-diff{font-weight:600;color:var(--ink)}
.bs-vergleich .bs-spalte-gewaehlt{background:var(--canvas)}

/* ---------- 7. Korbposition ---------------------------------------------------- */
/* Innenabstand auch seitlich: eine umrandete Flaeche ohne Einzug meldet
   Impeccable als cramped-padding (gemessen 06.09.2026). */
.bs-korbposition{display:grid;gap:.5rem;padding:1rem .75rem;
  border-bottom:1px solid var(--hairline)}
.bs-korbposition .bs-kopfzeile{display:flex;gap:1rem;align-items:flex-start;justify-content:space-between}
.bs-korbposition .bs-titel{font-size:var(--type-body);font-weight:600;line-height:1.35;margin:0}
.bs-korbposition .bs-variante{font-size:var(--type-card-copy);color:var(--ink-mid);margin:.15rem 0 0}
.bs-korbposition .bs-betrag{font-size:var(--type-body);font-weight:600;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.bs-korbposition .bs-zubehoer{list-style:none;margin:.2rem 0 0;padding:0 0 0 1rem;display:grid;gap:.25rem;
  border-left:2px solid var(--hairline)}
.bs-korbposition .bs-zubehoer li{display:flex;justify-content:space-between;gap:1rem;
  font-size:var(--type-card-copy);color:var(--ink-mid)}
.bs-korbposition .bs-zeilenaktionen{display:flex;gap:.25rem;flex-wrap:wrap}
/* Ladend ueber Flaeche, nicht ueber Deckkraft (siehe Knopfzustaende). */
.bs-korbposition.is-laedt{background:var(--canvas)}
.bs-korbposition.is-fehler{border-left:3px solid var(--ember);padding-left:.75rem}

/* ---------- 8. Fehlermeldung ---------------------------------------------------- */
.bs-fehler{display:grid;gap:.35rem;border:1px solid var(--ember);border-left-width:4px;
  border-radius:var(--r-control);background:var(--paper);padding:.9rem 1rem;color:var(--ink)}
.bs-fehler .bs-fehler-titel{font-size:var(--type-body);font-weight:600;margin:0}
.bs-fehler .bs-fehler-korrektur{font-size:var(--type-card-copy);color:var(--ink-mid);margin:0;line-height:1.45}
.bs-fehler .bs-fehler-aktionen{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.35rem}
.bs-feld{display:grid;gap:.3rem}
.bs-feld label{font-size:var(--type-label);font-weight:600}
.bs-feld input{min-height:44px;border:1.5px solid var(--hairline);border-radius:var(--r-control);
  padding:.6rem .8rem;font:inherit;font-size:var(--type-body);background:var(--paper);color:var(--ink)}
.bs-feld input:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.bs-feld.is-fehler input{border-color:var(--ember)}
.bs-feld .bs-feldhinweis{font-size:var(--type-fussnote);color:var(--ink-soft);margin:0}
.bs-feld.is-fehler .bs-feldhinweis{color:var(--ember)}

/* ---------- 9. Anfrageuebergabe -------------------------------------------------- */
.bs-uebergabe{border:1px solid var(--hairline);border-radius:var(--r-tile);background:var(--canvas);
  padding:1rem 1.1rem;display:grid;gap:.6rem}
.bs-uebergabe h3{font-size:var(--type-card-title);font-weight:600;margin:0}
.bs-uebergabe dl{display:grid;gap:.4rem;margin:0}
.bs-uebergabe .bs-zeile{display:grid;gap:.1rem}
@media(min-width:700px){.bs-uebergabe .bs-zeile{grid-template-columns:11rem 1fr;gap:1rem;align-items:baseline}}
.bs-uebergabe dt{font-size:var(--type-label);color:var(--ink-soft);margin:0}
.bs-uebergabe dd{font-size:var(--type-body);color:var(--ink);margin:0;font-weight:500}
.bs-uebergabe .bs-uebergabe-fuss{font-size:var(--type-fussnote);color:var(--ink-soft);margin:0}

/* ---------- Ladezustand (alle Bausteine) ----------------------------------------- */
/* LADEFLAECHE ohne Puls und ohne transparenten Text (Design-Pruefer 06.09.2026).
   Zwei Befunde, beide berechtigt: der Puls lief 1 200 ms und verletzte damit den
   Kanon BEWEGUNG (unter 300 ms) — Emil `review-animations` meldete 8 Stellen; und
   `color:transparent` auf einer grauen Flaeche ergab 1,1:1 Kontrast, was Impeccable
   zu Recht als Textbefund fuehrt. Die Flaeche ist jetzt leer und traegt ihren Text
   nur fuer Vorlesegeraete (`sr-only`), der Zustand steht an `aria-busy`. */
.bs-laedt-flaeche{background:var(--wash);border-radius:var(--r-control);
  padding:.75rem;min-height:1.25rem}
[aria-busy="true"] .bs-laedt-flaeche{pointer-events:none}

/* ---------- Deaktiviert (alle Bausteine) -----------------------------------------
   NICHT ueber Deckkraft: `opacity:.5` auf einer ganzen Karte zieht auch den Text
   mit und ergibt 1,8:1 im Fliesstext (Impeccable low-contrast, gemessen 06.09.2026).
   Ein Zustand, den man nur an der Blaesse erkennt, ist ausserdem fuer niemanden eine
   Aussage. Der deaktivierte Zustand traegt deshalb eine eigene Flaeche, einen
   gestrichelten Rand und ein Etikett; nur das inaktive Bedienelement selbst bleibt
   blass (WCAG nimmt inaktive Controls aus, design-kanon.md). */
.bs-produktkarte.is-aus,.bs-auswahl.is-aus,.bs-uebergabe.is-aus{
  background:var(--canvas);border-style:dashed;color:var(--ink-mid)}
.bs-produktkarte.is-aus .bs-nutzen,.bs-produktkarte.is-aus .bs-punkte li,
.bs-auswahl.is-aus .bs-auswahl-copy{color:var(--ink-mid)}
.bs-produktkarte.is-aus .bs-bild,.bs-auswahl.is-aus input{opacity:.55}
.bs-auswahl.is-aus{cursor:not-allowed}
.bs-auswahl.is-aus input{pointer-events:none}

/* ---------- Konfigurator: Zusammenfassung vor Bild (Block 2c, 06.09.2026) ------- */
/* Die Buehne zeigte oben ein grosses Bild und darunter die Auswahl. Wer wissen
   wollte, was er gerade zusammenstellt, musste am Bild vorbeiscrollen. Reihenfolge
   jetzt: Titel, Auswahl, Summen, dann das Bild (klein), dann die Erklaerung. */
.config-stage{display:flex;flex-direction:column;gap:.9rem}
.config-stage > .eyebrow{order:0;margin:0}
.config-stage > h2{order:1;margin:0}
.config-stage > .pcard-preis{order:2;margin:0}
.config-stage > .config-stage-auswahl{order:3}
.config-stage > .config-stage-summen{order:4}
.config-stage > .config-stage-media{order:5;max-height:160px;overflow:hidden;
  border-radius:var(--r-tile)}
.config-stage > .config-stage-media img{width:100%;height:160px;object-fit:cover}
.config-stage > .config-current-scope{order:6}
.config-stage > .btn{order:7;align-self:start}
/* Die uebersprungenen Schritte stehen in der Zusammenfassung, nicht im Fortschritt. */
.config-uebersprungen{border:1px solid var(--hairline);border-radius:var(--r-control);
  padding:.9rem 1rem;margin:0 0 1.25rem;background:var(--canvas)}
.config-uebersprungen p{margin:0 0 .35rem;font-size:var(--type-card-copy);color:var(--ink-mid)}
/* Die Wahl bleibt sichtbar markiert, bis der Kunde weitergeht. */
.config-choice[aria-pressed="true"],.config-choice.is-gewaehlt{border-color:var(--blue);
  background:var(--canvas);font-weight:600}

/* ---------- Produktseite: Variantenwahl ---------------------------------------- */
.bs-variantenwahl{display:grid;gap:.75rem;margin:1.5rem 0 0}
@media(min-width:700px){.bs-variantenwahl{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bs-variantenseiten{margin:1.25rem 0 0}
.bs-variantenseiten summary{min-height:44px;display:flex;align-items:center;cursor:pointer;
  font-size:var(--type-body);font-weight:600;color:var(--blue-press)}
.bs-variantenliste{list-style:none;margin:.5rem 0 0;padding:0;display:grid;gap:.5rem}

/* ---------- Angebotsliste: Suche, Filter, haeufige Einstiege -------------------- */
.bs-mehr-zeigen{margin:1.25rem 0 0}
/* 44-px-Trefferflaeche ohne sichtbare Aenderung (Kanon Punkt 7, TOUCH_ZIELE 07.09.: 148 x 25 px): Innenabstand oben/unten
   und gleich grosser negativer Aussenabstand — die Zeilenbox des h3 bleibt 25 px, die Klickflaeche wird 44 px. */
.bs-titel-link{color:inherit;text-decoration:none;display:inline-block;padding:.6rem 0;margin:-.6rem 0}.bs-titel-link:hover,.bs-titel-link:focus-visible{text-decoration:underline;text-underline-offset:3px}
.bs-einstiege{margin:0 0 1.75rem}
/* Keine eigene h2-Stufe: der TYPOGRAFIE-Riegel verlangt fuer h2 die Sektionsskala
   und Gewicht 500 (gemessen 06.09.2026: 24 Funde ueber sieben Katalogseiten,
   weil hier 24/32 px mit Gewicht 600 standen). Nur der Abstand bleibt. */
.bs-einstiege h2{margin:0 0 .9rem}
.bs-einstieg-raster{display:grid;gap:.75rem;grid-template-columns:1fr}
@media(min-width:700px){.bs-einstieg-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.bs-einstieg-raster{grid-template-columns:repeat(3,minmax(0,1fr))}}
.bs-einstieg{display:grid;gap:.25rem;text-align:left;min-height:44px;padding:.8rem 1rem;
  border:1px solid var(--hairline);border-radius:var(--r-tile);background:var(--paper);
  font:inherit;color:var(--ink);cursor:pointer;text-decoration:none;
  transition:transform 160ms cubic-bezier(.23,1,.32,1),opacity 120ms cubic-bezier(.23,1,.32,1)}
.bs-einstieg:active{transform:scale(.99)}
.bs-einstieg:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.bs-einstieg[aria-current="true"]{border-color:var(--blue);background:var(--canvas)}
/* KARTEN-FEINSCHLIFF (Owner-Entscheid 07.09.2026): kein Leistungszaehler mehr (die Regel .bs-einstieg-zahl
   ist weg), keine dauerhafte Unterstreichung in der Karte (auf dem iPhone waren Titel und Zaehler
   unterstrichen), dafuer ein dezenter Richtungspfeil rechts vom Titel; Fokus (outline) und
   Auswahlzustand (aria-current) bleiben, die ganze Karte bleibt der Link. */
.bs-einstieg,.bs-einstieg span{text-decoration:none}
.bs-einstieg-titel{font-size:var(--type-body);font-weight:600;display:flex;align-items:baseline;justify-content:space-between;gap:.5rem}
.bs-einstieg-pfeil{color:var(--ink-soft);font-weight:400;flex:0 0 auto;transition:transform 160ms cubic-bezier(.23,1,.32,1)}
.bs-einstieg:hover .bs-einstieg-pfeil,.bs-einstieg:focus-visible .bs-einstieg-pfeil{transform:translateX(2px);color:var(--blue-press)}
.bs-listenkopf{display:grid;gap:.9rem;margin:0 0 1.5rem}
.bs-suche{display:grid;gap:.35rem}
.bs-suche label{font-size:var(--type-label);color:var(--ink-mid)}
.bs-suche input{min-height:48px;border:1.5px solid var(--hairline);border-radius:var(--r-control);
  padding:.7rem .9rem;font:inherit;font-size:var(--type-body);background:var(--paper);color:var(--ink);
  width:100%;max-width:34rem}
.bs-suche input:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.bs-filterleiste{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;align-items:center}
.bs-filtergruppe{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.bs-filter-titel{font-size:var(--type-label);color:var(--ink-soft);margin-right:.15rem}
.bs-filter{min-height:44px;padding:.45rem 1rem;border:1px solid var(--hairline);
  border-radius:var(--r-pill);background:var(--paper);font:inherit;font-size:var(--type-label);
  font-weight:600;color:var(--ink-mid);cursor:pointer;
  transition:transform 160ms cubic-bezier(.23,1,.32,1),opacity 120ms cubic-bezier(.23,1,.32,1)}
.bs-filter:active{transform:scale(.97)}
.bs-filter:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.bs-filter[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:var(--paper)}
.bs-treffer{font-size:var(--type-label);color:var(--ink-mid);margin:0}
.bs-leer-treffer{font-size:var(--type-body);color:var(--ink-mid);margin:1.5rem 0 0}
.bs-alle-zeigen{margin:1rem 0 0}.bs-alle-zeigen[hidden]{display:none}
.bs-angebote article[hidden],.bs-angebote [data-kontextbild][hidden]{display:none}
.bs-kontextbild{grid-column:1/-1}
@media(prefers-reduced-motion:reduce){
  .bs-einstieg,.bs-filter,.bs-einstieg-pfeil{transition:none}
  .bs-einstieg:active,.bs-filter:active{transform:none}
}

@media(prefers-reduced-motion:reduce){
  .bs-produktkarte,.bs-auswahl,.bs-knopf,.bs-schritt{transition:none}
  .bs-produktkarte:hover{transform:none}
  .bs-auswahl:active,.bs-knopf:active{transform:none}
  /* Ladezustaende tragen ohnehin keine Animation mehr. */
}

/* Galerie-Seite bausteine.html (nur Vorschau). Zeigt jeden Baustein in jedem Zustand. */
.bs-galerie-raster{display:grid;gap:1.25rem;grid-template-columns:1fr;margin-top:1.25rem}
@media(min-width:700px){.bs-galerie-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.bs-galerie-raster{grid-template-columns:repeat(3,minmax(0,1fr))}}
.bs-galerie-fall{display:grid;gap:.5rem;align-content:start}
.bs-galerie-fall-titel{font-size:var(--type-label);font-weight:600;color:var(--ink-soft);margin:0;
  text-transform:uppercase;letter-spacing:.04em}
.bs-galerie-buehne{background:var(--canvas);border:1px dashed var(--hairline);
  border-radius:var(--r-tile);padding:1rem;position:relative;min-height:120px}
/* Die Aktionsleiste ist im echten Einsatz fixiert. In der Galerie muss sie im Fluss
   stehen, sonst liegen sechs Leisten uebereinander am unteren Rand. */
.bs-galerie-buehne .bs-aktionsleiste{position:static!important;box-shadow:none;border:1px solid var(--hairline);
  border-radius:var(--r-control);padding:.75rem;flex-direction:column;align-items:stretch;gap:.75rem;
  /* Die Breitenregel der fixierten Leiste (420 px ab 1100) gilt hier nicht: in der
     Galerie steht die Leiste in einer schmalen Buehne und ragte sonst heraus
     (Design-Blick 06.09.2026: 94 px ueber die Elternbox). */
  width:auto;left:auto;right:auto;bottom:auto;max-width:100%}
.bs-galerie-mass{font-size:var(--type-fussnote);color:var(--ink-soft);margin:.35rem 0 0;
  max-width:65ch}
.bs-korbliste{list-style:none;margin:0;padding:0}

/* Gang reste-schliessen-20260925, 11c: Links in der Schlusszeile (mailto, tel) waren im Fliesstext nur ueber die Farbe (axe link-in-text-block auf /partner/) oder gar nicht vom Text unterscheidbar. Unterstrichen, Farbe bleibt die der Seite. */
footer .footer-anschrift a[href]{text-decoration:underline;text-underline-offset:.15em}