/* --- Fenster (Mike 04.11.2026): mitlaufende Kopfleiste, Inhalt scrollt darunter, ohne Schließen-Knopf unten ------------
   Gilt für alle Shop-Fenster (.cb-f: Cashback/Rückruf/Kontakt, .k-fenster: Garantie, Preisgarantie …), Handy und Desktop.
   Aufbau wird von assets/js/fenster.js hergestellt. Diese Datei gilt für Shop-Seiten (style.css) und Konfigurator-Seiten gleich. */
.cb-f.sl-fx, .k-fenster.sl-fx { --fx-px: 32px; padding: 0 var(--fx-px) 22px; }
html.mobil .cb-f.sl-fx, html.mobil .k-fenster.sl-fx { --fx-px: 18px; padding: 0 var(--fx-px) 16px; }
.sl-fx-kopf { position: sticky; top: 0; z-index: 100; background: #ffffff; padding: 12px 16px; border-bottom: 1px solid #e5e5e5; display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 calc(-1 * var(--fx-px)) 14px; }
.sl-fx-marke { flex: 1 1 auto; min-width: 0; padding-right: 40px; }
.sl-fx-kopf .cb-marke, .sl-fx-kopf .k-fenster-marke { margin: 0; line-height: 1.25; }
.sl-fx-kopf .cb-x, .sl-fx-kopf .k-schliessen { position: static; flex: 0 0 auto; margin-left: auto; }
/* Cashback-Abschnitte als helle türkise Boxen (Mike 04.11.2026), Titel dunkeltürkis, Stichwörter fett schwarz */
.sl-fx .sl-cb-box { background-color: #e6f7f7 !important; border: 0 !important; padding: 16px; border-radius: 6px; margin-bottom: 16px; }
.sl-fx .sl-cb-box > strong { display: block; margin-bottom: 8px; color: #085F67; }
.sl-fx .sl-cb-stich { color: #000000; font-weight: 700; }
.sl-fx .sl-cb-box .sl-cb-stich { color: #000000 !important; font-weight: 700 !important; }
/* Das EINE Cashback-Fenster (Mike 04.11.2026): überall (Kopfleiste, Konfigurator, Warenkorb, Kasse) links rund, rechts eckig,
   damit die Bildlaufleiste bündig am Rahmen sitzt. .sl-cb-master setzt fenster.js, solange ein Cashback-Text im Fenster steht. */
.cb-f[aria-labelledby="cbTitel"], #slCbOverlay .sl-cb-fenster, .sl-fx.sl-cb-master { border-radius: 12px 0 0 12px !important; }

/* --- Handy-Feinschliff (Mike 05.11.2026), gilt für Shop- UND Konfigurator-Seiten ---------------------------------------
   Die Handy-Ansicht schaltet die Seite mit der Klasse html.mobil (Breite bis 760 px, siehe header.php), nicht per @media.
   Die Kopfleiste hat die ID sl-kopf: Selektoren mit #sl-kopf gewinnen gegen die Regeln des Entwurfs, egal in welcher Reihenfolge geladen wird,
   und treffen nie den Fußbereich. */

/* Burger-Knopf: breiteres Symbol (Linien 21 statt 16 px lang) und breitere Tippfläche (62 px, wächst nach rechts, Symbol bleibt links bündig) */
html.mobil #sl-kopf .bm-knopf { width: 62px !important; min-width: 62px !important; justify-content: flex-start !important; padding: 12px 0 12px 12px !important; margin-right: 0 !important; }
html.mobil #sl-kopf .bm-knopf svg { width: 24px !important; height: 24px !important; flex: none; transform: scaleX(1.32); transform-origin: 4px 50%; }
/* Logos (KESBO oben, SitzLust.de nach dem Scrollen) rücken um die gewonnene Breite (+10 px)  nach rechts, näher an den Schalter Privat/Firma */
html.mobil #sl-kopf > div:nth-of-type(2) > div:first-of-type { left: 64px !important; }
@media (max-width: 370px) {
	html.mobil #sl-kopf .bm-knopf { width: 58px !important; min-width: 58px !important; }
	html.mobil #sl-kopf > div:nth-of-type(2) > div:first-of-type { left: 60px !important; }
}

/* Handy: Fenster (Rückruf anfordern, Nachricht schreiben, Cashback …) bleiben mit eingeblendeter Bildschirmtastatur bedienbar.
   --sl-vvh / --sl-vvt (sichtbare Höhe / Oberkante) setzt assets/js/mobil-feinschliff.js; ohne Skript gilt der Rückfall 100dvh. */
html.mobil .cb-ov { top: var(--sl-vvt, 0px); bottom: auto; height: var(--sl-vvh, 100dvh); box-sizing: border-box; }
html.mobil .cb-ov .cb-f, html.mobil .cb-f.sl-fx, html.mobil .k-fenster {
	max-height: 85vh;
	max-height: min(85vh, calc(var(--sl-vvh, 100vh) - 24px));
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-y;
	overscroll-behavior: contain;
}

/* Kasse: fehlerhaftes Feld pulsiert kurz rot, nachdem die Seite dorthin gesprungen ist (assets/js/mobil-feinschliff.js) */
@keyframes sl-puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(198, 40, 40, 0); } 50% { box-shadow: 0 0 0 4px rgba(198, 40, 40, .55); } }
.sl-puls { animation: sl-puls .7s ease-in-out 3; border-radius: 6px; }
.sl-puls input, .sl-puls select { border-color: #C62828 !important; }

/* --- Handy-Feinschliff Runde 3 (Mike 06.11.2026), Shop- UND Konfigurator-Seiten ---------------------------------------- */
/* Fußbereich: KESBO-Logo bündig mit den Textzeilen darunter (K und B auf einer senkrechten Linie). Auf Konfigurator-Seiten stand es 3 px zu weit links,
   weil dort nur der Entwurfswert (-3,4 px) galt; auf Shop-Seiten steht dieselbe Regel in style.css. Nur im Fußbereich (footer). */
html.mobil footer [data-dc-tpl="152"] > img[alt^="KESBO"] { margin-left: -0.4px !important; }
/* Burger-Knopf: immer oberstes, antippbares Element der Kopfleiste (reagiert beim ersten Tippen) */
html.mobil #sl-kopf .bm-knopf { position: relative !important; z-index: 99999 !important; pointer-events: auto !important; touch-action: manipulation; cursor: pointer; -webkit-tap-highlight-color: transparent; }
html.mobil #sl-kopf .bm-knopf::before, html.mobil #sl-kopf .bm-knopf::after { pointer-events: none; }
/* Untermenü-Punkte im aufgeklappten Handy-Menü: dasselbe Türkis wie „Aussteller“ im Menü (#0B7A84, Mike 06.11.2026), nicht fett, Einrückung wie bisher */
html.mobil .bm-p .bm-unter a { color: #0B7A84; font-weight: 500; }
/* Spezialstühle (Handy): Dokument und Hülle dürfen den Bildlauf nie sperren (Mike 06.11.2026, Pixel 9 Pro) */
html.mobil:has(.sl-spezial), html.mobil:has(.sl-spezial) body { overflow-y: auto !important; touch-action: auto !important; height: auto !important; }

/* Handy: kein weißer Blitz über der Kopfleiste, kein Springen beim Seitenwechsel (Mike 06.11.2026). Gilt für Shop- und Konfigurator-Seiten.
   - html bekommt das Türkis der obersten Kopfleiste (#0B7A84): Beim Laden einer neuen Seite oder beim Umschalten Privat/Firma (lädt neu) blitzt kein heller Streifen auf.
   - Die Kopfleiste bleibt wie im Entwurf (absolute im Seitenrahmen). Die Umstellung auf fixed + eigene Grafikebene (0.4.53) ist zurückgenommen (Mike 06.11.2026: Zucken blieb). */
html.mobil { background-color: #0B7A84 !important; }
html.mobil body { background-color: #F4F6F6; }