/* Apple-Konfigurator v4, Stand v5 (06.10.2026, nach Boris' Pruefung): gefuehrter Ablauf auf EINEM Bildschirm ab 1200 x 700.
 * Oben Schrittleiste, Mitte der aktuelle Schritt, rechts die Live-Karte. Zwei Erscheinungsbilder: .k4--hell und .k4--pult.
 * Raster: Abstaende nur 3, 5, 8, 13, 21, 34 px; Radien 8, 13, 21 px; Schrift nie unter 11 px; Klickflaechen mindestens 44 px.
 * Farben aus der Produktseite: Rot #823a2d, Anthrazit #333e48, Grund #f4f2f0, Text #1f262d; Gruen #1f7a3f (Kontrast >= 4.5).
 * Fotos: fester Kasten 4:3, Bild fuellt ihn (contain). Hell: Weiss des Fotos verschwindet per mix-blend-mode multiply im Kastengrund.
 * Pult: Fotos liegen auf einem hellen "Leuchttisch" in Kartenbreite (bewusstes Gestaltungselement), ebenfalls per multiply.
 * Das Theme faerbt jeden <button> mit hoher Spezifitaet grau, darum tragen die sichtbaren Eigenschaften der Knoepfe !important. */
.k4 {
    --f0: 3px; --f05: 5px; --f1: 8px; --f2: 13px; --f3: 21px; --f4: 34px; --f5: 55px; --r: 8px; --r2: 13px;
    --rot: #823a2d; --rot-hell: #a24a3a; --gruen: #1f7a3f;
    --schrift: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --anzeige: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --luft: 13px; --innen: 21px;
    --s-klein: 12px; --s-text: 13px; --s-titel: 21px;
    --h-knopf: 55px; --h-seg: 55px;
    box-sizing: border-box; font-family: var(--schrift); font-size: var(--s-text); line-height: 1.35; color: var(--k-text); background: var(--k-grund);
    display: flex; flex-direction: column; gap: var(--luft); padding: var(--luft); height: 100vh; height: 100dvh; overflow: hidden; -webkit-font-smoothing: antialiased;
    max-width: 100vw;
}
@media (max-height: 849px) { .k4 { --luft: 8px; --innen: 13px; --h-knopf: 44px; --h-seg: 44px; } }
/* Im Shop (09.10.): Hoehe um den festen Seitenkopf kuerzen (--k4-oben setzt konfigurator-v4.js), damit alles auf einen Bildschirm passt */
.k4 { height: calc(100vh - var(--k4-oben, 0px) - var(--k4-unten, 0px)); height: calc(100dvh - var(--k4-oben, 0px) - var(--k4-unten, 0px)); scroll-margin-top: var(--k4-oben, 0px); }
/* 09.10. Boris K1: bei niedrigem Fenster das Foto der Live-Karte kleiner, damit Knoepfe und Bildunterschrift nie abgeschnitten werden */
@media (min-width: 1024px) and (max-height: 760px) { .k4 .k4-karte__bild { min-height: 34px; } .k4 .k4-karte { overflow-y: auto; } }
.k4 *, .k4 *::before, .k4 *::after { box-sizing: border-box; }
.k4--hell { --k-grund: #f4f2f0; --k-flaeche: #ffffff; --k-flaeche-2: #f4f2f0; --k-linie: #e3ddd9; --k-text: #1f262d; --k-leise: #56616b; --k-an: #823a2d; --k-hauch: #f7eeeb;
    --k-display: #1f262d; --k-display-text: #ffffff; --k-akzent: #823a2d; --k-spart: #1f7a3f; --k-licht: #f4f2f0; --k-schatten: 0 8px 21px rgba(31,38,45,.06); }
.k4--pult { --k-grund: #12171c; --k-flaeche: #1a2128; --k-flaeche-2: #232c35; --k-linie: #3a4651; --k-text: #e9edf0; --k-leise: #a7b2bc; --k-an: #823a2d; --k-hauch: #2a1d1a;
    --k-display: #07090b; --k-display-text: #ffb04a; --k-akzent: #f08f75; --k-spart: #7fdc9b; --k-licht: #e9e6e2; --k-schatten: inset 0 1px 0 rgba(255,255,255,.04);
    background-image: linear-gradient(180deg, #161c22 0%, #10151a 100%); }
.k4 button { font-family: var(--schrift) !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; margin: 0; line-height: 1.25 !important; }
.k4 :focus-visible { outline: 2px solid var(--k-akzent) !important; outline-offset: 2px; }
.k4 h2, .k4 h3 { font-family: var(--schrift); border: 0; padding: 0; text-transform: none; color: var(--k-text); }
.k4 p { margin: 0; }
.k4-unsichtbar { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Fotokasten: festes Seitenverhaeltnis, Bild fuellt ihn */
.k4-foto { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; max-width: 100%; max-height: 100%; border-radius: var(--r); background: var(--k-flaeche-2); overflow: hidden; }
.k4-foto img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; display: block; }
.k4-foto svg { width: 89%; height: 89%; }
.k4--pult .k4-foto { background: var(--k-licht); }

/* Schrittleiste */
.k4-schritte { position: relative; display: flex; gap: var(--f1); flex: 0 0 auto; }
.k4 button.k4-schritt { flex: 1 1 0; min-width: 0; height: var(--h-knopf); padding: 0 var(--f2) !important; display: flex !important; align-items: center; gap: var(--f1); text-align: left;
    background: var(--k-flaeche) !important; color: var(--k-text) !important; border: 1px solid var(--k-linie) !important; border-radius: var(--r) !important; cursor: pointer; }
.k4 button.k4-schritt[disabled] { cursor: default; color: var(--k-leise) !important; }
.k4 button.k4-schritt[data-zustand="aktiv"] { background: var(--k-an) !important; color: #fff !important; border-color: var(--k-an) !important; }
.k4 button.k4-schritt[data-zustand="erledigt"] { border-color: var(--k-akzent) !important; }
.k4-schritt__nr { flex: 0 0 auto; width: 21px; height: 21px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--k-flaeche-2); color: var(--k-text); }
.k4-schritt[disabled] .k4-schritt__nr { color: var(--k-leise); }
.k4-schritt[data-zustand="aktiv"] .k4-schritt__nr { background: #fff; color: var(--rot); }
.k4-schritt[data-zustand="erledigt"] .k4-schritt__nr { background: var(--rot); color: #fff; }
.k4-schritt__text { display: flex; flex-direction: column; min-width: 0; }
.k4-schritt__name, .k4-schritt__wert { overflow-wrap: anywhere; }
.k4-schritt__name { font-size: var(--s-klein); font-weight: 700; line-height: 1.2; }
.k4-schritt__wert { font-size: 11px; line-height: 1.2; }
.k4-schritt__wert:empty { display: none; }
.k4-schritttext { display: none; }
.k4-andere { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; font-size: var(--s-klein); color: var(--k-akzent); padding: 0 var(--f1); }
.k4-fortschritt { position: absolute; left: 0; right: 0; bottom: -5px; height: 3px; border-radius: 3px; background: var(--k-akzent); transform-origin: left center; transform: scaleX(0);
    transition: transform .55s cubic-bezier(.2,.8,.2,1); pointer-events: none; }

/* Flaeche */
.k4-flaeche { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 25vw, 377px); gap: var(--luft); }
.k4-mitte, .k4-karte { min-height: 0; background: var(--k-flaeche); border: 1px solid var(--k-linie); border-radius: var(--r2); box-shadow: var(--k-schatten); overflow: hidden; }
.k4-mitte { padding: var(--innen); display: flex; flex-direction: column; gap: var(--luft); }
.k4-kopf { flex: 0 0 auto; }
.k4 .k4-titel { font-size: var(--s-titel); line-height: 1.2; font-weight: 700; margin: 0 0 var(--f0); letter-spacing: -.01em; }
.k4-titel:focus { outline: none; }
.k4-unter { font-size: var(--s-text); color: var(--k-leise); }
.k4-hinweis { font-size: var(--s-klein); color: var(--k-leise); flex: 0 0 auto; }
.k4-meldung { font-size: var(--s-klein); padding: var(--f05) var(--f2); border-left: 3px solid var(--k-akzent); background: var(--k-hauch); border-radius: 0 var(--r) var(--r) 0; flex: 0 0 auto; }
.k4-empf { display: inline-block; font-size: 11px; font-weight: 700; padding: var(--f0) var(--f1); border-radius: 21px; background: var(--gruen); color: #fff; white-space: nowrap; }

/* 1 Typ */
.k4-typen { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--luft); }
.k4 button.k4-typ { min-height: 0; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: var(--f05); padding: var(--innen) !important; text-align: center;
    background: var(--k-flaeche-2) !important; color: var(--k-text) !important; border: 2px solid transparent !important; border-radius: var(--r2) !important; cursor: pointer; overflow: hidden; }
.k4 button.k4-typ:hover { border-color: var(--k-linie) !important; }
.k4 button.k4-typ[aria-pressed="true"] { border-color: var(--k-an) !important; background: var(--k-hauch) !important; }
.k4-typ__bild { flex: 1 1 auto; min-height: 55px; width: 100%; }
.k4-typ__bild.k4-foto { background: transparent; width: auto; height: 100%; }
.k4--pult .k4-typ__bild.k4-foto { background: var(--k-licht); }
.k4-typ__name { font-size: clamp(21px, 3.4vh, 34px); font-weight: 700; }
.k4-typ__sub, .k4-typ__n { font-size: var(--s-klein); color: var(--k-leise); }
.k4-typ__preis { font-size: var(--s-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.k4-zweck { flex: 0 0 auto; }
.k4-zweck__frage { margin: 0 0 var(--f05); font-size: var(--s-klein); font-weight: 700; color: var(--k-leise); }
.k4-chips { display: flex; flex-wrap: wrap; gap: var(--f1); }
.k4 button.k4-chip { min-height: 44px; padding: 0 var(--f2) !important; border-radius: 21px !important; background: var(--k-flaeche-2) !important; color: var(--k-text) !important;
    border: 1px solid var(--k-linie) !important; font-size: var(--s-text) !important; cursor: pointer; }
.k4 button.k4-chip[aria-pressed="true"] { background: var(--k-an) !important; color: #fff !important; border-color: var(--k-an) !important; }

/* 2 Modell: Kartenzeilen per subgrid ausgerichtet */
.k4-modelle { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); grid-template-rows: auto minmax(55px, 1fr) auto auto auto auto; column-gap: var(--luft); }
.k4 button.k4-modell { grid-row: span 6; display: grid !important; grid-template-rows: subgrid; row-gap: var(--f05); align-items: start; padding: var(--f2) !important; text-align: left;
    background: var(--k-flaeche-2) !important; color: var(--k-text) !important; border: 2px solid transparent !important; border-radius: var(--r2) !important; cursor: pointer; overflow: hidden; min-height: 0; }
.k4 button.k4-modell:hover { border-color: var(--k-linie) !important; }
.k4 button.k4-modell[aria-pressed="true"] { border-color: var(--k-an) !important; background: var(--k-hauch) !important; }
.k4-modell__kopf { display: flex; flex-wrap: wrap; gap: var(--f05); align-items: center; }
.k4-modell__etikett { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: var(--f0) var(--f1); border-radius: var(--r); background: var(--k-flaeche); color: var(--k-leise); }
.k4-etikett--profi { background: var(--k-display); color: var(--k-display-text); }
.k4-modell__bild { align-self: center; justify-self: stretch; width: 100%; height: auto; max-height: 100%; min-height: 0; }
.k4-modell__bild.k4-foto { background: var(--k-flaeche-2); }
.k4--pult .k4-modell__bild.k4-foto { background: var(--k-licht); }
.k4-modell__name { font-size: var(--s-text); font-weight: 700; line-height: 1.25; }
.k4 ul.k4-modell__punkte { margin: 0 !important; padding: 0 0 0 var(--f2) !important; font-size: var(--s-klein); color: var(--k-leise); line-height: 1.3; }
.k4 ul.k4-modell__punkte li { margin: 0 !important; }
.k4-modell__preis { font-size: var(--s-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.k4-verf { display: flex; align-items: center; gap: var(--f05); font-size: var(--s-klein); color: var(--k-leise); }
.k4-verf i { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #b06d00; }
.k4-verf--verfuegbar i, .k4-verf--knapp i { background: var(--gruen); }

/* 3 Hardware: Label ueber dem Schalter, gleich hohe Reihen, viele Reihen zweispaltig */
.k4-hw { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.k4-hw__regler { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(min-content, 1fr); align-content: stretch; gap: var(--luft) var(--innen); }
.k4-hw--viele .k4-hw__regler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k4-hw--viele .k4-regler--chip { grid-column: 1 / -1; }
.k4-regler { display: flex; flex-direction: column; gap: var(--f05); min-width: 0; justify-content: center; }
.k4-regler__name { font-size: var(--s-klein); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--k-leise); line-height: 1.2; overflow-wrap: anywhere; }
.k4-regler__fest { font-size: var(--s-text); font-weight: 600; min-height: 44px; display: flex; align-items: center; padding: 0 var(--f2); border-radius: var(--r); background: var(--k-flaeche-2); }
.k4-segment { display: flex; flex-wrap: nowrap; gap: var(--f0); padding: var(--f0); background: var(--k-flaeche-2); border-radius: var(--r); }
.k4 button.k4-seg { position: relative; flex: 1 1 0; min-width: 44px; min-height: var(--h-seg); max-height: 89px; padding: var(--f0) var(--f05) !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 0;
    background: transparent !important; color: var(--k-text) !important; border: 1px solid transparent !important; border-radius: var(--r) !important; cursor: pointer; text-align: center; }
.k4 button.k4-seg:hover { background: var(--k-flaeche) !important; border-color: var(--k-linie) !important; }
.k4 button.k4-seg[aria-pressed="true"] { background: var(--k-an) !important; color: #fff !important; border-color: var(--k-an) !important; }
.k4-seg__w { font-size: var(--s-text); font-weight: 600; overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
.k4-seg__p { font-size: var(--s-klein); font-variant-numeric: tabular-nums; }
.k4-seg__s { font-size: 11px; opacity: .85; overflow-wrap: anywhere; }
.k4-seg[aria-pressed="false"] .k4-seg__p { color: var(--k-akzent); }
.k4-seg--spart .k4-seg__p { color: var(--k-spart) !important; font-weight: 600; }
.k4-seg__a { font-size: 11px; line-height: 1.2; opacity: .9; overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
.k4-seg__empf { font-size: 11px; font-weight: 700; color: #fff; background: var(--gruen); border-radius: 21px; padding: 0 var(--f05); margin-top: var(--f0); }
.k4-regler--farbe .k4-segment { background: transparent; padding: 0; gap: var(--f05); flex-wrap: wrap; }
.k4 .k4-regler--farbe button.k4-seg { flex: 0 0 auto; width: auto; min-width: 44px; min-height: 44px; padding: var(--f0) var(--f05) !important; flex-direction: row; gap: var(--f05); }
.k4 .k4-regler--farbe button.k4-seg[aria-pressed="true"] { background: transparent !important; color: var(--k-text) !important; border-color: var(--k-akzent) !important; }
.k4-seg__farbe { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(0,0,0,.25); box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); flex: 0 0 auto; }
.k4-auswahl { width: 100%; min-height: 44px; padding: 0 var(--f1); border-radius: var(--r); border: 1px solid var(--k-linie); background: var(--k-flaeche-2); color: var(--k-text); font: inherit; }
.k4-hinweis--belegung { margin-top: var(--f0); }

/* 4 Software und Zubehoer */
.k4-reiter { display: flex; gap: var(--f1); flex-wrap: wrap; flex: 0 0 auto; }
.k4 button.k4-reiter__k { min-height: 44px; padding: 0 var(--f2) !important; border-radius: var(--r) !important; background: var(--k-flaeche-2) !important; color: var(--k-text) !important;
    border: 1px solid var(--k-linie) !important; font-size: var(--s-text) !important; font-weight: 600 !important; cursor: pointer; }
.k4 button.k4-reiter__k[aria-selected="true"] { background: var(--k-an) !important; color: #fff !important; border-color: var(--k-an) !important; }
.k4-kacheln { flex: 1 1 auto; min-height: 0; display: grid; gap: var(--luft); }
.k4-kacheln--fuenf { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.k4-kacheln--fuenf > :nth-child(-n+3) { grid-column: span 2; }
.k4-kacheln--fuenf > :nth-child(n+4) { grid-column: span 3; }
.k4-kachel { position: relative; display: flex; flex-direction: column; gap: var(--f0); padding: var(--f2); min-height: 0; overflow: hidden; border-radius: var(--r2); background: var(--k-flaeche-2); border: 2px solid transparent; cursor: pointer; }
.k4-kachel--an { border-color: var(--k-an); background: var(--k-hauch); }
.k4-kachel input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.k4-kachel__kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--f1); flex: 1 1 auto; min-height: 21px; }
.k4-kachel__bild { flex: 0 1 auto; height: 100%; max-height: 89px; min-height: 34px; }
.k4-kachel__bild.k4-foto { background: transparent; }
.k4--pult .k4-kachel__bild.k4-foto { background: var(--k-licht); }
.k4-kachel--an .k4-kachel__bild.k4-foto { background: transparent; }
.k4-schalter { flex: 0 0 auto; width: 34px; height: 21px; border-radius: 21px; background: var(--k-linie); position: relative; align-self: flex-start; }
.k4-schalter::after { content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.k4-kachel input:checked ~ .k4-kachel__kopf .k4-schalter { background: var(--k-an); }
.k4-kachel input:checked ~ .k4-kachel__kopf .k4-schalter::after { transform: translateX(13px); }
.k4-kachel input:focus-visible ~ .k4-kachel__kopf .k4-schalter { outline: 2px solid var(--k-akzent); outline-offset: 2px; }
.k4-kachel__name { font-size: var(--s-text); font-weight: 700; line-height: 1.25; }
.k4-kachel__sub { font-size: var(--s-klein); color: var(--k-leise); line-height: 1.3; }
.k4-kachel__preis { font-size: var(--s-text); font-weight: 700; font-variant-numeric: tabular-nums; }

/* 5 Uebersicht */
.k4-uebersicht { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--luft); align-content: start; }
.k4-ue { background: var(--k-flaeche-2); border-radius: var(--r2); padding: var(--f2) var(--innen); min-width: 0; }
.k4-ue__kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--f05); }
.k4 .k4-ue h3 { margin: 0; font-size: var(--s-text); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--k-leise); }
.k4 .k4-ue ul { margin: 0 !important; padding: 0 !important; list-style: none; font-size: var(--s-text); line-height: 1.45; }
.k4 .k4-ue li { margin: 0 !important; }
.k4 button.k4-aendern { min-height: 44px; min-width: 44px; padding: 0 var(--f1) !important; background: transparent !important; border: 0 !important; color: var(--k-akzent) !important; text-decoration: underline !important; font-size: var(--s-klein) !important; cursor: pointer; }

/* Live-Karte: Foto, Name, Kenndaten, Preis, Summe, direkt darunter die Navigation */
.k4-karte { padding: var(--innen); display: flex; flex-direction: column; gap: var(--luft); }
.k4-karte__ueber { font-size: var(--s-klein); color: var(--k-leise); }
.k4-karte__bild { flex: 1 1 auto; min-height: 89px; margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--f05); overflow: hidden; }
.k4-karte__bild .k4-foto { flex: 1 1 auto; min-height: 0; height: 100%; width: auto; }
.k4-karte__bild figcaption { flex: 0 0 auto; font-size: 11px; color: var(--k-leise); text-align: center; }
.k4-karte__name { font-size: var(--s-titel); font-weight: 700; line-height: 1.2; flex: 0 0 auto; }
.k4-hw__kacheln { flex: 0 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--f1); }
.k4-hwk { display: flex; flex-direction: column; gap: 0; padding: var(--f1) var(--f2); border-radius: var(--r); background: var(--k-display); color: var(--k-display-text); min-width: 0; }
.k4--hell .k4-hwk { color: #fff; }
.k4-hwk__t { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; opacity: .85; }
.k4-hwk__v { font-family: var(--anzeige); font-size: clamp(15px, 2.4vh, 21px); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.k4-hwk--lang .k4-hwk__v { font-family: var(--schrift); font-size: var(--s-text); }
.k4--pult .k4-hwk__v { text-shadow: 0 0 13px rgba(255,176,74,.35); }
.k4-hwk__u { font-size: 11px; opacity: .85; line-height: 1.25; }
.k4-hwk__u:empty { display: none; }
.k4-anzeige { background: var(--k-display); color: var(--k-display-text); border-radius: var(--r); padding: var(--f1) var(--f2); flex: 0 0 auto; }
.k4--hell .k4-anzeige { color: #fff; }
.k4-preis { font-family: var(--anzeige); font-size: clamp(21px, 4vh, 34px); font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; }
.k4--pult .k4-preis { text-shadow: 0 0 21px rgba(255,176,74,.4); }
.k4-ampel { display: flex; align-items: center; gap: var(--f1); margin-top: var(--f0); font-size: var(--s-klein); color: #e9edf0; line-height: 1.3; }
.k4-ampel__l { display: inline-flex; gap: var(--f0); padding: var(--f0); background: #000; border-radius: var(--r); flex: 0 0 auto; }
.k4-ampel__l i { width: 8px; height: 8px; border-radius: 50%; background: #2b2b2b; display: block; }
.k4-ampel--gruen .k4-ampel__l i:nth-child(3) { background: #3ccf6a; box-shadow: 0 0 8px #3ccf6a; }
.k4-ampel--gelb .k4-ampel__l i:nth-child(2) { background: #ffb020; box-shadow: 0 0 8px #ffb020; }
.k4 dl.k4-summe { margin: 0; display: grid; gap: var(--f0); flex: 0 0 auto; }
.k4-summe div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--f1); }
.k4-summe dt { font-size: var(--s-klein); color: var(--k-leise); margin: 0; font-weight: 400; }
.k4-summe dd { margin: 0; font-size: var(--s-klein); font-variant-numeric: tabular-nums; white-space: nowrap; }
.k4-summe__total { border-top: 1px solid var(--k-linie); padding-top: var(--f05); }
.k4-summe__total dt { color: var(--k-text); font-weight: 600; }
.k4-summe__total dd { font-family: var(--anzeige); font-size: clamp(15px, 2.6vh, 21px); font-weight: 700; }
.k4-navi { display: flex; gap: var(--f1); flex: 0 0 auto; }
.k4 button.k4-knopf { flex: 1 1 0; min-height: var(--h-knopf); padding: 0 var(--f2) !important; display: flex !important; align-items: center; justify-content: center; border-radius: var(--r) !important; cursor: pointer;
    background: transparent !important; color: var(--k-text) !important; border: 1px solid var(--k-linie) !important; font-size: 15px !important; font-weight: 600 !important; }
.k4 button.k4-knopf--haupt { flex: 2 1 0; background: var(--rot) !important; color: #fff !important; border-color: var(--rot) !important; font-weight: 700 !important; }
.k4 button.k4-knopf--haupt:hover { background: var(--rot-hell) !important; }
.k4 button.k4-knopf[disabled] { background: var(--k-flaeche-2) !important; color: var(--k-leise) !important; border-color: var(--k-linie) !important; cursor: default; }
.k4 button.k4-knopf[hidden] { display: none !important; }
.k4-klein { font-size: 11px; color: var(--k-leise); line-height: 1.3; flex: 0 0 auto; }
.k4-karte__leer { display: flex; flex-direction: column; gap: var(--luft); min-height: 0; flex: 1 1 auto; }
.k4 ol.k4-ablauf { margin: 0 !important; padding: 0 0 0 var(--f3) !important; font-size: var(--s-text); line-height: 1.6; color: var(--k-text); }
.k4-zweckinfo { font-size: var(--s-klein); color: var(--k-leise); }
.k4-vorschlag { margin-top: auto; display: flex; flex-direction: column; gap: var(--f05); padding: var(--f2); border-radius: var(--r2); background: var(--k-flaeche-2); cursor: pointer; min-height: 0; flex: 1 1 auto;
    transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.k4-vorschlag:hover { transform: translateY(-3px); }
.k4-vorschlag__bild { flex: 1 1 auto; min-height: 55px; height: 100%; width: auto; max-width: 100%; align-self: center; }
.k4-vorschlag__bild.k4-foto { background: transparent; }
.k4--pult .k4-vorschlag__bild.k4-foto { background: var(--k-licht); }
.k4-vorschlag__text { display: flex; flex-direction: column; font-size: var(--s-klein); }
.k4-vorschlag__text strong { font-size: var(--s-text); }
.k4-unten { display: none; }
.k4-dialog { position: fixed; inset: 0; z-index: 100000; background: rgba(0,0,0,.6); display: grid; place-items: center; padding: var(--f3); }
.k4-dialog[hidden] { display: none; }
.k4-dialog__kasten { background: var(--k-flaeche); color: var(--k-text); border-radius: var(--r2); padding: var(--f4); max-width: 610px; width: 100%; font-size: 15px; }
.k4-dialog__kasten h3 { margin: 0 0 var(--f2); font-size: 21px; }
.k4-dialog__kasten ul { margin: 0 0 var(--f2); padding-left: var(--f3); }

/* Bewegung: nur transform und opacity; bei prefers-reduced-motion aus */
.k4-rein { animation: k4-rein .55s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes k4-rein { from { opacity: 0; transform: translateY(21px) scale(.97); } to { opacity: 1; transform: none; } }
.k4-gleiten-vor { animation: k4-vor .45s cubic-bezier(.2,.8,.2,1) both; }
.k4-gleiten-zurueck { animation: k4-zurueck .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes k4-vor { from { opacity: 0; transform: translateX(55px); } to { opacity: 1; transform: none; } }
@keyframes k4-zurueck { from { opacity: 0; transform: translateX(-55px); } to { opacity: 1; transform: none; } }
.k4 button.k4-typ, .k4 button.k4-modell, .k4-kachel { transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, opacity .3s, border-color .15s; }
.k4 button.k4-typ:hover, .k4 button.k4-modell:hover, .k4-kachel:hover { transform: translateY(-3px); box-shadow: 0 13px 34px rgba(0,0,0,.14) !important; }
.k4-foto img, .k4-foto svg { transition: filter .35s cubic-bezier(.2,.8,.2,1); }
.k4 button.k4-typ:hover .k4-foto img, .k4 button.k4-modell:hover .k4-foto img { filter: brightness(1.04) contrast(1.04); }
.k4-typen--wahl .k4-typ { opacity: 0; transform: translateY(21px) scale(.94); pointer-events: none; }
.k4-typen--wahl .k4-typ.k4-typ--gewaehlt { opacity: 1; transform: scale(1.03); z-index: 1; box-shadow: 0 21px 55px rgba(0,0,0,.2) !important; }
.k4-hwk--neu { animation: k4-blitz .55s cubic-bezier(.2,.8,.2,1); }
@keyframes k4-blitz { 0% { transform: scale(.96); opacity: .4; } 100% { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .k4-rein, .k4-gleiten-vor, .k4-gleiten-zurueck, .k4-hwk--neu { animation: none !important; }
    .k4 *, .k4-fortschritt { transition: none !important; }
    .k4 button.k4-typ:hover, .k4 button.k4-modell:hover, .k4-kachel:hover, .k4-vorschlag:hover { transform: none; }
}

/* Handy und Tablett hochkant: Seite darf scrollen, aber kurz; unten feste Leiste mit Zurueck, Preis und Weiter */
@media (max-width: 1023px) {
    html, body { overflow-x: clip; }
    .k4 { height: auto; min-height: 100dvh; overflow: visible; overflow-x: clip; padding: var(--f1); padding-bottom: calc(89px + var(--f2));
        --s-text: 14px; --s-klein: 12px; --s-titel: 21px; --h-seg: 44px; --h-knopf: 44px; --luft: 8px; --innen: 13px; }
    .k4-schritte { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--f05); }
    .k4 button.k4-schritt { min-width: 0; height: 44px; padding: 0 !important; justify-content: center; }
    .k4 .k4-schritt__text { display: none; }
    .k4-andere { display: none; }
    .k4-schritttext { display: block; font-size: var(--s-klein); font-weight: 700; color: var(--k-leise); }
    .k4-flaeche { display: flex; flex-direction: column; }
    .k4-mitte { overflow: visible; }
    .k4-karte { display: none; }
    .k4[data-s="3"] .k4-karte { display: flex; order: -1; overflow: visible; padding: var(--f2); }
    .k4[data-s="3"] .k4-karte > :not(.k4-karte__bild):not(.k4-hw__kacheln):not(.k4-karte__name) { display: none; }
    .k4[data-s="3"] .k4-karte__bild { flex: 0 0 auto; height: 144px; }
    .k4[data-s="5"] .k4-karte { display: flex; overflow: visible; }
    .k4[data-s="5"] .k4-navi, .k4[data-s="5"] .k4-karte__bild, .k4[data-s="5"] .k4-hw__kacheln, .k4[data-s="5"] .k4-anzeige { display: none; }   /* Preis steht in der Leiste unten */
    .k4-typen { grid-template-columns: minmax(0, 1fr); }
    .k4 button.k4-typ { display: grid !important; grid-template-columns: 89px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: var(--f2); row-gap: 0; justify-items: start; text-align: left; padding: var(--f2) !important; }
    .k4 button.k4-typ .k4-typ__bild { grid-row: 1 / span 4; width: 89px; height: auto; min-height: 0; }
    .k4-typ__name { font-size: 21px; }
    .k4-modelle { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: var(--f1); }
    .k4 button.k4-modell { grid-row: auto; grid-template-rows: none; grid-template-columns: 89px minmax(0, 1fr); column-gap: var(--f2); row-gap: var(--f0); }
    .k4 button.k4-modell > * { grid-column: 2; }
    .k4 button.k4-modell .k4-modell__bild { grid-column: 1; grid-row: 1 / span 6; width: 89px; height: auto; align-self: start; }
    .k4 ul.k4-modell__punkte li:nth-child(n+3) { display: none; }
    .k4-hw__regler, .k4-hw--viele .k4-hw__regler { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
    .k4-segment { display: grid; grid-template-columns: repeat(auto-fill, minmax(89px, 1fr)); }
    .k4 button.k4-seg { max-height: none; }
    .k4-regler--farbe .k4-segment { display: flex; }
    .k4-kacheln { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: none !important; }
    .k4-kacheln > * { grid-column: auto !important; }
    .k4-kachel { display: grid; grid-template-columns: minmax(0, 1fr) 89px; column-gap: var(--f2); }
    .k4-kachel > * { grid-column: 1; }
    .k4-kachel__kopf { display: contents; }
    .k4-kachel__kopf .k4-schalter { grid-column: 1; grid-row: 1; }
    .k4-kachel__kopf .k4-empf { grid-column: 1; }
    .k4-kachel__bild { grid-column: 2; grid-row: 1 / span 5; width: 89px; height: auto; }
    .k4-uebersicht { grid-template-columns: minmax(0, 1fr); }
    .k4-unten { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; min-height: 89px; align-items: center; gap: var(--f1); padding: var(--f2) var(--f2) calc(var(--f2) + env(safe-area-inset-bottom));
        background: var(--k-flaeche); border-top: 1px solid var(--k-linie); box-shadow: 0 -8px 21px rgba(0,0,0,.12); font-family: var(--schrift); }
    .k4-unten__info { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
    .k4-unten__preis { font-family: var(--anzeige); font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; }
    .k4-unten__preis--text { font-family: var(--schrift); font-size: var(--s-text); font-weight: 600; }
    .k4-unten__verf { font-size: 12px; color: var(--k-leise); overflow-wrap: anywhere; }
    .k4-unten .k4-knopf--haupt { flex: 0 0 auto; min-width: 89px; }
    .k4-unten .k4-knopf--zurueck { flex: 0 0 auto; min-width: 44px; padding: 0 var(--f1) !important; }
}