/*
 * ZITE PREMIUM — stylesheet.v2.css  (Redesign 2026)
 * ════════════════════════════════════════════════════════════════════════════
 * Die EINZIGE Stylesheet-Basis von Zite. head.php laedt sie via DesignVersion>=2;
 * das alte stylesheet.css wird NICHT mehr geladen (kompletter Schnitt — es enthielt
 * global wirkende Gifte wie a:hover{font-weight:bold} und pauschales
 * input[type=submit]-Styling, gegen die jede neue Komponente ankaempfen musste).
 * FOLGE: Noch nicht umgebaute Seiten (Produkt/Checkout/Konto) sind ungestylt. Das ist
 * GEWOLLT (Antrieb + kein Ballast), kein Bug.
 *
 * ── REGIONEN ────────────────────────────────────────────────────────────────
 * Die Datei ist in benannte Regionen geteilt. Jede neue Komponente gehoert in IHRE
 * Region — nicht ans Dateiende. Grund: mehrere Bloecke (und ggf. mehrere Sessions)
 * arbeiten nacheinander an derselben Datei; Git merged nicht-benachbarte Hunks
 * konfliktfrei, aneinandergereihte Anhaenge dagegen fast nie.
 *
 *   TOKENS/PRIMITIVE  Geteilte Bausteine (Buttons, Eyebrow, Section-Kopf, Crumb)
 *   BASIS             Reset, Typo-Grundlage, Layout-Container, Helfer
 *   BAND              Header-Band (.zbar-*)                        [M1 fertig]
 *   NAV               Top-Nav + Zwei-Panel-Mega (.znav-*, .zmega-*)  [M2 fertig]
 *                     ACHTUNG: In diesem Kommentar NIE die Zeichenfolge Stern-Slash
 *                     schreiben (z.B. ".znav-*" direkt gefolgt von "/.zmega-*") — das
 *                     schliesst den Kommentar vorzeitig, der Rest wird als Selektor
 *                     geparst und verschluckt die erste echte Regel dahinter.
 *   SUGGEST           Suchvorschlaege (.sug-*)                     [M2 fertig]
 *   DRAWER            Mobiler Drawer + Such-Popup (.zdrawer-*)     [M2 fertig]
 *   CHIPS             Kategorie-Chips (.zchips)                    [M3 fertig]
 *   GRIDS             Produktgrid-Huellen                          [provisorisch -> B3/B4]
 *   BANNER            Banner-System + Overlay-Caption              [B5]
 *   CARD              Produktkarte (.zcard-*)                      [B3]
 *   TRUST             Trust-Streifen                               [B6]
 *   FOOTER            Footer                                       [B6]
 *   CART-UPGRADE      Hero/Strip                                   [B7 — bringt eigene
 *                     scoped Inline-Styles mit, hier ggf. gar nichts]
 *   MEDIA             Newsletter, Videos, Slider                   [B8]
 *   LISTING/PDP/      Kategorieseite, Produktdetail, Checkout,     [B10/B14 fertig]
 *   CHECKOUT          (Konto siehe eigene Region)
 *   KONTO             Kundenbereich (.zac-*)                       [B15]
 *
 * ── HAUSREGELN ──────────────────────────────────────────────────────────────
 * - Nur CSS-Variablen, keine Hex-Werte. Flat (keine Gradients). Kein Bootstrap.
 * - Neue Klassen IMMER mit z-Praefix (.z<block>-*): Alt-Regeln matchen dann nichts.
 * - Jede Komponente von Anfang an in Light UND Dark, inkl. mobil.
 * - Breakpoint fest bei 1101px (Header/Nav-Hamburger haengt daran, NICHT auf 768).
 * - Dimensionen reservieren (aspect-ratio/feste Hoehen) => CLS 0.
 * - Wird Markup ersetzt, fliegen die zugehoerigen Alt-Regeln mit raus.
 * - ACHTUNG: templates/zite/critical_css.php DUPLIZIERT die Above-the-fold-Regeln
 *   (Band, Chips). Aenderungen dort im Gleichschritt, danach
 *   `rm private/cache/critical_css/zite_premium_*` (1 Woche Cache).
 */

/* ══════════════════════════════════════════════════════════════
   TOKENS / PRIMITIVE — geteilte Bausteine, die mehrere Regionen nutzen.
   Farb-/Font-Tokens selbst stehen in head.php (:root + beide Darkmode-Bloecke).
   Hier stehen nur zusammengesetzte Bausteine, die sonst je Region dupliziert wuerden.
   ══════════════════════════════════════════════════════════════ */

/* Breadcrumb — Entscheidung 15.07. (Spec Abschnitt 10):
   Startseite raus ("Startseite » Katalog" ist wertlos), Videos war schon raus.
   Auf Listing/Produkt bleibt sie fuer Orientierung + SEO, aber RUHIG: kein
   .hauptfarbeschrift (faerbte sie in der Markenfarbe = unnoetig laut), kein
   Inline-Padding, keine eigene Bande quer ueber 1920. Gerendert in design.php. */
.zcrumb {
	padding: 10px clamp(16px, 2.5vw, 56px);
	font-size: 12.5px;
	color: var(--color-text-light);
}
.zcrumb a { color: var(--color-text-light); }
.zcrumb a:hover { color: var(--color-accent); }

/* Full-bleed-Mass fuer geteilte Includes (cart_upgrade.php u.a.): zite definiert
   den .inhalt-Clamp als Token — Shops ohne das Token rendern contained (Fallback 0). */
:root { --z-bleed: clamp(16px, 2.5vw, 56px); }

/* Sektions-Kopf (Mockup .sec-title, Spec Abschnitt 3.5): Papierfarbe, roter Tick links —
   KEIN schwarzer Slab. Ersetzt die alten gruenen <h2> der Startseite (dort war
   rgb(86,100,71) im Seitentext hartkodiert — Altgruen, per CSS unerreichbar, deshalb
   wandert die Klasse mit der neuen Komposition in den Seitentext). */
.zsec-title {
	font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	font-size: clamp(24px, 2.4vw, 34px);
	letter-spacing: .02em;
	position: relative; padding-left: 16px;
	margin: 34px 0 22px;
	text-align: left;
	color: var(--color-text);
}
.zsec-title::before {
	content: ""; position: absolute; left: 0; top: 2px; bottom: 2px;
	width: 4px; background: var(--color-accent); border-radius: 2px;
}
/* Voller Sektionskopf (Mockup .sec-head, gerendert vom [ztitel]-Shortcode):
   links Titel + optionale Sub-Zeile (ShopVote-Sterne), rechts "Alle ansehen" */
.zsec-head {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 16px; margin: 34px 0 22px;
}
.zsec-head .zsec-title { margin: 0; }
.zsec-sub {
	display: flex; align-items: center; gap: 8px;
	font-size: 13px; color: var(--color-text-light);
	margin-top: 8px; padding-left: 16px;
}
.zsec-sub .zsec-stars { display: inline-flex; gap: 3px; }
.zsec-sub .zsec-stars svg { width: 14px; height: 14px; fill: var(--color-warning); }
.zsec-more {
	display: flex; align-items: center; gap: 6px;
	font-size: 13px; font-weight: 700; color: var(--color-text-light);
	white-space: nowrap;
}
.zsec-more:hover { color: var(--color-accent); }
@media (max-width: 700px) {
	.zsec-sub { display: none; }   /* mobil traegt der Kopf nur Titel + Link */
}

/* ══════════════════════════════════════════════════════════════
   BASIS — bewusst schlank. KEINE globalen Gifte wie frueher:
   kein `a:hover{font-weight:bold}`, kein pauschales input[type=submit]-Styling.
   ══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
body {
	margin: 0; padding: 0;
	font-family: var(--font-body);
	font-size: .875rem;
	color: var(--color-text);
	background-color: var(--color-bg-page);
}
img { max-width: 100%; height: auto; border: 0; }
a { color: var(--color-text); text-decoration: none; }
h1, h2 { font-family: var(--font-disp); font-stretch: var(--font-disp-wdth); letter-spacing: .5px; }
h1 { font-size: clamp(25px, calc(25px + 25*(100vw - 450px)/1470), 50px); margin: 5px 0 -5px; }
h2 { font-size: clamp(25px, calc(25px + 25*(100vw - 450px)/1470), 50px); }

/* Layout-Container */
.gesamt { background-color: var(--color-bg); width: 100%; margin: 0 auto; max-width: 1920px; min-width: 320px; text-align: left; min-height: 100%; }
.inner { width: 100%; }
.inhalt { padding: 0 clamp(16px, 2.5vw, 56px); }

/* Sichtbarkeits-Helfer (Breakpoint 1101px wie gehabt) */
@media (max-width: 1100px) { .desktop { display: none !important; } }
@media (min-width: 1101px) { .mobile, .handy { display: none !important; } }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ══════════════════════════════════════════════════════════════
   PREMIUM HEADER-BAND (Redesign 2026) — ersetzt .kopf/.logo/.searchbox/.mobilkonto
   Dimensionen bewusst fix (Band 96px, Logo 65px) => CLS 0
   ══════════════════════════════════════════════════════════════ */
.kopf {
	/* display/flex der Alt-Regel (.kopf{display:flex;flex-direction:column;align-items:center})
	   muss explizit aufgehoben werden, sonst schrumpft .zbar auf Inhaltsbreite */
	display: block;
	background: #000;
	padding: 0;
	position: sticky;
	top: 0;
	z-index: 9999;
	width: 100%;
	max-width: none;
	max-height: none;
	height: auto;
	border-radius: 0;
	box-shadow: none;
}
.zbar {
	position: relative;
	display: flex;
	align-items: center;
	gap: 20px;
	height: 96px;
	padding: 0 clamp(16px, 2.5vw, 56px);
}
.zbar-logo { display: flex; align-items: center; flex-shrink: 0; }
.zbar-logo img { height: 65px; width: auto; display: block; }

.zbar-search {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(520px, 34vw);
	display: flex;
	align-items: center;
	background: #fff;
	border-radius: var(--radius-small);
	overflow: visible;
}
.zbar-search input {
	flex: 1;
	border: 0;
	height: 44px;
	padding: 0 15px;
	font-family: var(--font-body);
	font-size: 14px;
	color: #1D1D1F;              /* fix: Feld ist in BEIDEN Modi weiss -> Schrift immer dunkel */
	background: transparent;
	border-radius: var(--radius-small) 0 0 var(--radius-small);
	min-width: 0;
}
.zbar-search input::placeholder { color: #6B6B68; opacity: 1; }
.zbar-search button {
	border: 0;
	background: var(--color-accent);
	color: #fff;
	height: 44px;
	padding: 0 17px;
	cursor: pointer;
	display: flex;
	align-items: center;
	border-radius: 0 var(--radius-small) var(--radius-small) 0;
}
.zbar-search button svg { width: 19px; height: 19px; }
.zbar-search button:hover { background: var(--color-primary-hover); }
.zbar-search .results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; width: auto; z-index: 60; }
.zbar-search .results:empty { display: none; }

.zbar-actions { display: flex; align-items: center; gap: 18px; margin-left: auto; }

.zbar-rating { display: flex; flex-direction: column; line-height: 1.05; padding-right: 18px; border-right: 1px solid #2a2a2a; color: #fff; text-decoration: none; }
.zbar-stars { display: flex; align-items: center; gap: 4px; }
.zbar-stars svg { width: 15px; height: 15px; fill: var(--color-warning); }
.zbar-stars svg.off { fill: #4a4a4a; }
.zbar-stars b { font-size: 13px; font-weight: 700; margin-left: 4px; color: #fff; }
.zbar-rating small { color: #b8b8b4; font-size: 11px; margin-top: 2px; }
.zbar-rating:hover small { color: #fff; }

.zbar-tools { display: flex; align-items: center; gap: 8px; }
.zbar-tool {
	background: transparent;
	border: 1px solid #333;
	border-radius: 999px;
	width: 38px; height: 38px;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; color: #fff; padding: 0;
}
.zbar-tool svg { width: 19px; height: 19px; }
.zbar-tool:hover { border-color: #666; }

.zbar-item { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; position: relative; background: transparent; border: 0; cursor: pointer; padding: 0; }
.zbar-item svg { width: 23px; height: 23px; fill: currentColor; }
.zbar-item:hover { color: #fff; }
.zbar-label small { color: #b8b8b4; display: block; font-size: 11px; line-height: 1.1; }
.zbar-label b { font-weight: 700; font-size: 13px; display: block; font-family: var(--font-body); }
.zbar-carticon { position: relative; display: flex; }
.zbar-count {
	position: absolute; top: -7px; left: 15px;
	background: var(--color-accent); color: #fff;
	font-size: 10px; font-weight: 700; font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	min-width: 17px; height: 17px; border-radius: 9px;
	display: flex; align-items: center; justify-content: center; padding: 0 4px;
}

/* Merklisten-Herz (Owner 27.08.): erscheint erst mit Eintraegen — das Auftauchen
   selbst ist das Signal. Weiss wie alle Kopfband-Icons (Owner: Rot sah komisch
   aus, der Chip davor killte die UI) — das gefuellte Herz traegt die Botschaft
   allein. Kein Zaehler — der einzige Zahlen-Badge im Kopfband bleibt der
   Warenkorb. Gleichschritt critical_css! */
.zbar-wish[hidden] { display: none !important; }

@media (max-width: 1100px) {
	/* Label fuer Screenreader im DOM lassen (sr-only) statt display:none => Links behalten einen Namen */
	.zbar-label { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
	.zbar { height: 64px; gap: 12px; padding: 0 10px; }
	.zbar-logo img { height: 44px; }
	.zbar-search { display: none; }
	/* Touch-Targets: Google verlangt >=48x48 — die Trefferflaeche waechst,
	   das Icon (23px) bleibt zentriert. Der gewachsene Button traegt den
	   Abstand selbst, deshalb gap runter. */
	.zbar-actions { gap: 2px; }
	.zbar-item { min-width: 48px; min-height: 48px; justify-content: center; }
	/* Light/Dark-Toggle auch mobil (Owner 27.08.): ohne Ring als schlichtes
	   Kopfband-Icon im 48px-Touch-Gleichschritt der .zbar-item-Nachbarn.
	   Gleichschritt critical_css! */
	.zbar-tool { border: 0; width: 48px; height: 48px; }
}

/* ══════════════════════════════════════════════════════════════
   TOP-NAVIGATION + "KATEGORIEN"-ZWEI-PANEL-MEGA (Redesign 2026)
   Dimensionen fix (Nav 52px) => CLS 0. Nur Desktop; mobil bleibt cat_navbar-Popup.
   ══════════════════════════════════════════════════════════════ */
.znav { background: var(--color-bg); border-bottom: 1px solid var(--color-border); position: relative; z-index: 20; }
.znav-inner { display: flex; justify-content: space-between; align-items: stretch; gap: 6px; padding: 0 clamp(16px, 2.5vw, 56px); height: 52px; }
.znav-mega-item { position: static; display: flex; }
.znav-link {
	display: flex; align-items: center;
	padding: 0 4px;
	font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	/* 17px statt der 16px des Mockups (Owner-Wunsch): die schmalere Schrift traegt
	   den Tick mehr Groesse, ohne dass die Nav auf 1920 enger wird. */
	text-transform: uppercase; letter-spacing: .05em; font-weight: 700; font-size: 17px;
	color: var(--color-text);
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}
.znav-link:hover, .znav-mega-item:hover .znav-link { color: var(--color-accent); border-bottom-color: var(--color-accent); font-weight: 700; }
.znav-sale { color: var(--color-accent-text, var(--color-accent)); }   /* A11y: im Darkmode helleres Text-Rot */
/* Abstand per margin statt per HTML-Leerzeichen: das Leerzeichen wird von
   letter-spacing/uppercase optisch aufgefressen und ist nicht steuerbar. */
.znav-caret { margin-left: 7px; }

/* Mega: links Kategorien (2-spaltig), rechts Flyout */
.zmega {
	position: absolute; left: clamp(16px, 2.5vw, 56px); top: 100%;
	width: min(1180px, 95vw);
	background: var(--color-bg);
	border: 1px solid var(--color-border); border-top: 2px solid var(--color-accent);
	box-shadow: 0 8px 24px rgba(0,0,0,.10);
	display: grid; grid-template-columns: 400px 1fr;
	/* Zu-Zustand. Die visibility hier ist der EINZIGE Schalter, der ueber die
	   Treffer-Empfindlichkeit des gesamten Megas entscheidet — kein Kind darf sie
	   zurueckdrehen (siehe .zmega-flyout unten). pointer-events zusaetzlich als
	   zweite Sicherung. */
	opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px);
	transition: opacity .16s ease, transform .16s ease;
	z-index: 30;
}
.znav-mega-item:hover .zmega, .znav-mega-item:focus-within .zmega,
.znav-mega-item.zmega-offen .zmega { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.zmega-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 8px; align-content: start; padding: 14px 12px; border-right: 1px solid var(--color-border); }
.zmega-cat > a {
	display: block; padding: 7px 10px; font-size: 14px; font-family: var(--font-body); font-weight: 400;
	color: var(--color-text); border-left: 3px solid transparent;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zmega-cat:hover > a, .zmega-cat.zmega-on > a { background: var(--color-bg-alt); border-left-color: var(--color-accent-dark); color: var(--color-text); font-weight: 400; }

/* Die Flyouts schalten BEWUSST nur ueber opacity + pointer-events — sie bringen
   KEINE eigene visibility mit. Grund (teuer gelernt): visibility wird vererbt und ein
   Kind darf sie zurueckdrehen. Das JS setzt beim Laden activate(def), die Default-
   Kategorie bekommt also .zmega-on. Trug die ON-Regel ein visibility:visible, hob sie
   damit das visibility:hidden des geschlossenen .zmega wieder auf. Dessen opacity:0
   blieb (Opacity ist nicht ueberschreibbar) => das Flyout war unsichtbar, aber
   TREFFEREMPFINDLICH und lag unter der Nav. Maus in den leeren Bereich darunter =>
   :hover feuerte am Vorfahren .znav-mega-item => das Mega sprang auf.
   So herum regiert allein die (vererbte, unangetastete) visibility des Elternteils. */
.zmega-flyout {
	position: absolute; left: 400px; top: 0; width: calc(100% - 400px); height: 100%;
	padding: 24px 30px; background: var(--color-bg); overflow-y: auto;
	opacity: 0; pointer-events: none; transition: opacity .16s ease;
}
.zmega-cat.zmega-on .zmega-flyout { opacity: 1; pointer-events: auto; }
.zmega-banner { display: block; max-width: 420px; margin: 0 0 20px; border-radius: var(--radius-small); overflow: hidden; }
.zmega-banner img { width: 100%; height: auto; aspect-ratio: 600/214; object-fit: cover; display: block; }
.zmega-subs { columns: 3; column-gap: 30px; max-width: 640px; }
.zmega-subs a { display: block; padding: 6px 0; font-size: 14.5px; color: var(--color-text); break-inside: avoid; }
.zmega-subs a:hover { color: var(--color-accent); font-weight: 400; }
.zmega-all { display: inline-block; margin-top: 16px; font-family: var(--font-disp); font-stretch: var(--font-disp-wdth); letter-spacing: .04em; font-size: 14px; color: var(--color-accent); }

@media (max-width: 1100px) { .znav { display: none; } }

/* ── Suchvorschläge (Premium, DesignVersion 2) ─────────────────────────── */
.zbar-search .results {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-medium);
	box-shadow: 0 10px 30px rgba(0,0,0,.14);
	overflow: hidden;
	padding: 4px;
	max-height: 70vh;
	overflow-y: auto;
}
.sug-item {
	display: flex; align-items: center; gap: 12px;
	padding: 9px 10px;
	border-radius: var(--radius-small);
	color: var(--color-text);
	text-decoration: none;
}
.sug-item:hover { background: var(--color-bg-alt); font-weight: 400; }
.sug-img {
	flex: 0 0 44px; width: 44px; height: 44px;
	display: flex; align-items: center; justify-content: center;
	background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-small);
	overflow: hidden;
}
.sug-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sug-name { flex: 1; font-size: 13.5px; line-height: 1.35; }
.sug-faq { display: block; padding: 10px 12px; border-radius: var(--radius-small); background: var(--color-bg-alt); color: var(--color-text); text-decoration: none; margin: 2px 0; }
.sug-faq:hover { background: var(--color-border); font-weight: 400; }
.sug-faq-q { display: block; font-weight: 700; font-size: 13px; color: var(--color-text); margin-bottom: 3px; }
.sug-faq-a { display: block; font-size: 12px; color: var(--color-text-light); line-height: 1.4; }
.sug-faq-src { display: block; font-size: 11px; color: var(--color-text-muted); margin-top: 3px; }
.sug-head { padding: 8px 10px 4px; font-family: var(--font-disp); font-stretch: var(--font-disp-wdth); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }
.sug-badge { display: inline-block; font-size: 10px; color: #fff; background: var(--color-accent); padding: 1px 7px; border-radius: 8px; margin-left: 6px; vertical-align: middle; }

/* ══════════════════════════════════════════════════════════════
   MOBILE: Drawer (Kategorien) + Such-Popup
   Ersetzen die alten cat_navbar-/Such-Popups. Beide sind `hidden` per Default
   (Attribut, nicht CSS-Klasse) und werden per JS geöffnet.
   ══════════════════════════════════════════════════════════════ */
.zdrawer, .zsearch-popup { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.6); }
.zdrawer[hidden], .zsearch-popup[hidden] { display: none !important; }

.zdrawer-panel {
	/* rechts andocken: der Menue-Button sitzt rechts im Band — ein links
	   aufschlagender Drawer waere ergonomisch falsch herum (Owner 22.07.) */
	position: absolute; inset: 0 0 0 auto;
	width: min(360px, 88vw);
	background: var(--color-bg); color: var(--color-text);
	display: flex; flex-direction: column;
	box-shadow: 0 0 40px rgba(0,0,0,.4);
}
.zsearch-panel {
	position: absolute; inset: 0 0 auto 0;
	background: var(--color-bg); color: var(--color-text);
	max-height: 92vh; display: flex; flex-direction: column;
	box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.zdrawer-head, .zsearch-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 0 8px 0 16px; height: 64px; flex: 0 0 64px;
	background: var(--color-band); color: #fff;
	font-family: var(--font-disp); font-stretch: var(--font-disp-wdth); letter-spacing: .06em; font-size: 18px;
}
.zdrawer-close, .zsearch-close {
	background: transparent; border: 0; color: #fff; cursor: pointer;
	width: 44px; height: 44px; font-size: 28px; line-height: 1;
	display: flex; align-items: center; justify-content: center; border-radius: 999px;
}
.zdrawer-close:hover, .zsearch-close:hover { background: rgba(255,255,255,.15); }

.zdrawer-body { overflow-y: auto; padding: 8px 0 24px; }
.zdrawer-link, .zdrawer-cat, .zdrawer-sub, .zdrawer-group > summary {
	display: block; padding: 12px 16px; color: var(--color-text);
	border-bottom: 1px solid var(--color-border); font-size: 15px;
}
/* Kategorien sehen gleich aus — egal ob sie Unterkategorien haben oder nicht */
.zdrawer-cat, .zdrawer-group > summary { font-size: 15px; }
.zdrawer-link { font-family: var(--font-disp); font-stretch: var(--font-disp-wdth); letter-spacing: .05em; font-size: 17px; text-transform: uppercase; }
.zdrawer-sale { color: var(--color-accent); }
.zdrawer-sep {
	padding: 16px 16px 6px; font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	letter-spacing: .08em; text-transform: uppercase; font-size: 13px; color: var(--color-text-muted);
}
.zdrawer-group > summary { cursor: pointer; list-style: none; position: relative; }
.zdrawer-group > summary::-webkit-details-marker { display: none; }
.zdrawer-group > summary::after { content: '+'; position: absolute; right: 16px; color: var(--color-text-muted); }
.zdrawer-group[open] > summary::after { content: '–'; }
.zdrawer-group[open] > summary { border-left: 3px solid var(--color-accent-dark); padding-left: 13px; }
.zdrawer-sub { padding-left: 30px; font-size: 14px; color: var(--color-text-light); }
.zdrawer-all { color: var(--color-accent); }

.zsearch-body { padding: 14px; overflow-y: auto; }
.zsearch-body input[type="text"] {
	width: 100%; height: 46px; padding: 0 14px; font-size: 16px;
	border: 1px solid var(--color-border); border-radius: var(--radius-small);
	background: var(--color-bg); color: var(--color-text);
}
.zsearch-body .results { margin-top: 8px; }

/* ══════════════════════════════════════════════════════════════
   KATEGORIE-CHIPS (.zchips)
   DB-getrieben (schnellzugriff_icons). Ghost-Pills statt Icon-Kacheln.

   WARUM NICHT MEHR ".icon-container": die Klasse ist im Shopsystem DOPPELT belegt.
   Neben den Chips (zite-only, Markup in inhalt.php) tragen sie auch SECHS geteilte
   Produktgrids (list_deals, list_bestseller, list_neuheiten, list_flashsales,
   list_outlet, list_products) sowie angebote.php und shopping_cart.php. Da
   list_prod_by_id.php jede Karte in ein <a> wickelt, machte ".icon-container a"
   (Pill-Radius + Border + Padding) aus JEDER Zite-Produktkarte eine Ghost-Pill.
   Die Chips sind zite-eigenes Markup und damit frei umbenennbar; die geteilten
   Grids bleiben unangetastet (Isolationsgate) und behalten ihre Klasse — deren
   Regel steht unten unter GRIDS.

   Hinweis: Die Icon-ASSETS tragen noch Natur-Motive — das ist eine
   Asset-/DB-Entscheidung, per CSS nicht loesbar (siehe Spec §11).
   ══════════════════════════════════════════════════════════════ */
.zchips {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	/* Horizontal buendig mit .znav-inner: das Seitenpadding kommt ausschliesslich von
	   .inhalt (clamp). Hier NUR vertikal padden — ein zweites clamp wuerde doppelt
	   einruecken. */
	padding: 14px 0;
	background: var(--color-bg);
	/* Duenne getoente Scrollbar am Desktop: der Container ist scrollbar, aber ein
	   vertikales Mausrad scrollt ihn nicht — ohne sichtbaren Balken fuehlt er sich tot
	   an. Der Balken IST die Affordanz. Kein Rad-auf-Horizontal-JS-Shim: der kapert
	   natives Scrollen und kostet INP. */
	scrollbar-width: thin;
	scrollbar-color: var(--color-border) transparent;
	/* horizontal scrollbar — mit sichtbarer Affordance (Owner 22.07.) */
	scrollbar-width: thin;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
}
.zchips::-webkit-scrollbar { height: 8px; }
.zchips::-webkit-scrollbar-track { background: transparent; }
.zchips::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 999px; }
.zchips::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }
.zchips a {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	padding: 9px 18px;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	background: var(--color-bg);
	color: var(--color-text);
	transition: border-color .15s, background .15s;
}
.zchips a:hover { border-color: var(--color-primary); background: var(--color-bg-alt); }
/* Auf Touch wird gewischt — dort ist der Balken nur Ballast. */
@media (max-width: 1100px) {
	.zchips { scrollbar-width: none; }
	.zchips::-webkit-scrollbar { display: none; }
}
.chip-label {
	/* Chips laufen im Mockup BEWUSST auf dem Fliesstext-Stack, nicht auf der
	   Display-Schrift (.chip dort: font-size:14px; font-weight:700; keine eigene
	   font-family, also Body-Erbe, kein letter-spacing). Kurze Labels scannen so
	   schneller; die Display-Schrift bleibt Headlines/Nav/Preisen vorbehalten. */
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════
   GRIDS (.icon-container) — Produktraster                          [B3; B4 raeumt auf]
   Die geteilten Produktlisten (list_deals/bestseller/neuheiten/flashsales/outlet/
   products, angebote.php, shopping_cart.php) rendern diese Klasse. Wir stylen sie
   hier zum Raster des Mockups (.grid). Das ist zite-only sicher: stylesheet.v2.css
   laedt NUR Zite, und die Chips sind seit B1 auf .zchips umbenannt — .icon-container
   sind bei Zite also ausschliesslich Produktgrids.
   Offen fuer B4: die Huellen bringen Inline-Styles mit (u.a. display:flex bei
   list_bestseller/list_flashsales), die dieses Raster schlagen. Inline-Styles sind per
   CSS nicht ueberschreibbar (ausser per !important = Workaround) -> die Huellen
   brauchen ihren eigenen DesignVersion-Zweig.
   ══════════════════════════════════════════════════════════════ */
.icon-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 18px;
	align-items: stretch;
}
@media (max-width: 700px) {
	.icon-container { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
/* Reihen-Trimmer (foot.php): Karten jenseits der letzten vollen Reihe.
   .icon-container-Prafix noetig: .zcard{display:flex} steht SPAETER im Stylesheet
   und gewinnt sonst die Kaskade (gleiche Spezifitaet). */
.icon-container .zcard-rowhide { display: none; }

/* ══════════════════════════════════════════════════════════════
   LISTING (Kategorieseite)                                              [B10]
   Gleiche Raster-Sprache wie .icon-container (EIN Karten-System), aber volle
   Listings — hier trimmt NICHTS. Markup-Aenderungen leben DesignVersion-gated
   in index_products.php (geteilte Datei); dieses CSS laedt nur Zite.
   ══════════════════════════════════════════════════════════════ */
.herstellergesamt {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 18px;
	align-items: stretch;
	clear: both;
}
@media (max-width: 700px) {
	.herstellergesamt { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
/* Volle-Reihen-Puffer des Nachladers (gleiche Mechanik wie der Teaser-Trimmer) */
.herstellergesamt .zcard-rowhide { display: none; }

/* Kategorie-Kopf: H1 im Display-Stil (Grundregel h1/h2 liefert Font + Breite) */
.zcat-h1 {
	margin: 10px 0 4px;
	font-size: clamp(26px, 3.2vw, 44px);
	line-height: 1.1;
}
/* Kurze Kategoriebeschreibung unter dem Kopf — nur Desktop, linksbuendig
   volle Breite (Owner 11.08., Runde 2: kein zentriertes Insel-Layout) */
.zcat-intro {
	margin: 12px 0 10px; text-align: left;
	color: var(--color-text-light); font-size: 15px; line-height: 1.6; clear: both;
}
.zcat-intro p { margin: 0 0 6px; }
@media (max-width: 700px) { .zcat-intro { display: none; } }

/* Toolbar ueber dem Grid: Trefferzahl links, Sortier-Pills rechts */
.zlist-bar {
	display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
	margin: 6px 0 16px; clear: both;
}
/* Trefferzahl floatet mittig zwischen Breadcrumb und Sortierung (Owner 11.08.) */
.zlist-count { flex: 1 1 auto; text-align: center; color: var(--color-text-light); font-size: 14px; }
/* Umgezogener Breadcrumb: ohne Kopfzonen-Padding, Typo an die Toolbar angeglichen */
.zlist-bar .zcrumb { padding: 0; font-size: 14px; }

/* Unterkategorien-Leiste: Chip-Pills mit Kategorie-Icon (zchips-Bildsprache);
   mobil horizontal scrollbar statt umbrechend */
.zsubcats { display: flex; flex-wrap: wrap; gap: 10px; margin: 2px 0 16px; clear: both; }
.zsubcats a {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 7px 16px 7px 8px; border: 1px solid var(--color-border);
	border-radius: 999px; background: var(--color-bg); color: var(--color-text);
}
.zsubcats a:hover { border-color: var(--color-primary); background: var(--color-bg-alt); }
.zsubcat-icon { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; display: block; }
@media (max-width: 700px) {
	.zsubcats { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
	.zsubcats a { flex: 0 0 auto; }
}
.zlist-sort { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.zlist-sort-label { color: var(--color-text-light); font-size: 13px; } /* text-light statt muted: echter Text braucht AA in beiden Modi */
.zlist-sort a {
	padding: 7px 14px; border: 1px solid var(--color-border); border-radius: 999px;
	font-size: 13px; color: var(--color-text); background: var(--color-bg);
	white-space: nowrap;
}
.zlist-sort a:hover { border-color: var(--color-primary); background: var(--color-bg-alt); }
.zlist-sort a.active {
	background: var(--color-primary); border-color: var(--color-primary);
	color: var(--color-text-inverse); font-weight: 700;
}

/* Pagination: Zahlen-Pills + Chevrons (ersetzt gated die Alt-Pfeilbilder) */
.zpager {
	display: flex; justify-content: center; align-items: center; gap: 6px;
	flex-wrap: wrap; margin: 24px 0 8px; clear: both;
}
.zpager a, .zpager .zpager-cur, .zpager .zpager-gap {
	min-width: 38px; height: 38px; padding: 0 10px; box-sizing: border-box;
	display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
}
.zpager a { border: 1px solid var(--color-border); border-radius: var(--radius-medium); color: var(--color-text); }
.zpager a:hover { border-color: var(--color-primary); background: var(--color-bg-alt); }
.zpager .zpager-cur {
	background: var(--color-primary); color: var(--color-text-inverse);
	border-radius: var(--radius-medium); font-weight: 700;
}
.zpager .zpager-gap { color: var(--color-text-muted); }

.zlist-empty { margin: 30px 0; text-align: center; color: var(--color-text-light); font-size: 15px; clear: both; }

/* Langer SEO-Block (categories_desc2): volle Breite, linksbuendig */
.zcat-longdesc {
	margin: 24px 0 12px; clear: both; text-align: left;
	color: var(--color-text-light); font-size: 15px; line-height: 1.65;
}
.zcat-longdesc p { margin: 0 0 10px; }
.zcat-longdesc h2, .zcat-longdesc h3 { margin: 18px 0 8px; text-align: left; }

/* SUCHE (templatecontent/search.php, geteilte Datei — nur v2-Zweige) [27.08.]
   .zs-typo = Typo-Korrektur-Hinweis, .zsfaq = FAQ-Direktantwort bei Fragen.
   Toolbar/Pager kommen von .zlist-bar/.zpager (Kategorie-Muster B10). */
.zs-typo { margin: 10px 0; font-size: 14px; color: var(--color-text-light); }
.zsfaq { margin: 0 0 25px; padding: 20px 24px; background: var(--color-bg-alt); border-radius: var(--radius-medium); }
.zsfaq-kicker { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--color-text-light); margin-bottom: 14px; }
.zsfaq-item { padding: 14px 0; border-bottom: 1px solid var(--color-border); }
.zsfaq-item:last-child { border-bottom: 0; padding-bottom: 0; }
.zsfaq-q { display: block; font-size: 15px; font-weight: 600; color: var(--color-text); line-height: 1.4; margin-bottom: 5px; text-decoration: none; }
.zsfaq-q:hover { text-decoration: underline; }
.zsfaq-a { font-size: 14px; color: var(--color-text-light); line-height: 1.65; margin-bottom: 6px; }
.zsfaq-more { font-size: 12px; font-weight: 600; color: var(--color-text); text-decoration: none; }
.zsfaq-more:hover { text-decoration: underline; }

/* Ratgeber-/Blog-Raster unter dem Listing (SEO-Landingpages) — flache Karten,
   16:9-Bildkopf, Kicker im Text-Rot; Sektions-Kopf kommt von .zsec-head */
.zlp { clear: both; margin: 10px 0 6px; }
.zlp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
/* Beitrags-Grid rendert IM ItemList-Container (selbst ein Grid) — volle Breite */
.herstellergesamt > .zlp-grid { grid-column: 1 / -1; }
@media (max-width: 1100px) { .zlp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .zlp-grid { grid-template-columns: 1fr; gap: 14px; } }
.zlp-card {
	display: flex; flex-direction: column; overflow: hidden;
	background: var(--color-bg); border: 1px solid var(--color-border);
	border-radius: var(--radius-medium);
}
.zlp-card:hover { border-color: var(--color-border-dark); }
.zlp-media { display: block; aspect-ratio: 16 / 9; background: var(--color-bg-alt); }
.zlp-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zlp-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; flex: 1; }
.zlp-kicker {
	font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
	color: var(--color-accent-text, var(--color-accent));
}
.zlp-title { margin: 0; font-size: 17px; line-height: 1.35; }
.zlp-title a { color: var(--color-text); }
.zlp-excerpt { margin: 0; color: var(--color-text-light); font-size: 14px; line-height: 1.55; flex: 1; }
.zlp-more {
	align-self: flex-start; font-size: 14px; font-weight: 700;
	color: var(--color-accent-text, var(--color-accent));
}

/* Hybrid-Nachladen: "Mehr laden" (JS ersetzt die .zpager; sie bleibt Fallback) */
.zmore { display: flex; justify-content: center; margin: 26px 0 8px; clear: both; }
.zmore-btn {
	padding: 13px 42px; border: 1px solid var(--color-border-dark); border-radius: 999px;
	background: var(--color-bg); color: var(--color-text); cursor: pointer;
	font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	letter-spacing: .05em; font-size: 15px;
}
.zmore-btn:hover {
	background: var(--color-primary); border-color: var(--color-primary);
	color: var(--color-text-inverse);
}

/* ══════════════════════════════════════════════════════════════
   BANNER — Sektions-Banner (.zbanner-*)                              [B5 fertig]
   Gerendert vom [zbanner]-Shortcode (includes/zbanner.php). Werte aus dem Mockup
   (.hero/.hero-caption): Foto per aspect-ratio reserviert (CLS 0), Caption als
   schwarzer Block unten links — Eyebrow rot, Headline Display, Copy, CTA.
   Banner-Grafiken, die ihren Text schon im Bild tragen (Springzite), laufen ohne
   Caption: einfach titel weglassen.
   ══════════════════════════════════════════════════════════════ */
.zbanner {
	position: relative;
	display: block;
	/* ratio kommt als Custom Property (--zbr) vom Renderer — NICHT als Inline-
	   aspect-ratio: Inline schluege die mobile auto-Regel und clippte die Caption. */
	aspect-ratio: var(--zbr, 1920/560);
	/* Full-bleed wie der Mockup-Hero (.hero-outer{padding:0}): bricht per Negativ-
	   Margin exakt aus dem .inhalt-Padding aus — Wert = dessen clamp. Kein Radius,
	   das Banner laeuft Kante an Kante. */
	margin: 0 calc(-1 * clamp(16px, 2.5vw, 56px)) 18px;
	overflow: hidden;
}
/* Das Banner traegt nur unten Abstand — steht eines MITTEN im Seitenfluss (auf
   der Startseite zwischen den Produktsektionen), klebte der Inhalt darueber
   ohne jede Luft an der Bildkante (Owner 25.08.). Erster Versuch war
   ".icon-container + .zbanner"; das griff nur bei 2 von 7 Bannern, weil die
   uebrigen auf klassenlose Wrapper aus dem Seitentext folgen. Deshalb ueber
   die Position statt ueber den Vorgaenger: nur das FUEHRENDE Banner (Hero im
   Kopf) bleibt buendig. */
.zbanner:not(:first-child) { margin-top: 44px; }
@media (max-width: 700px) {
	.zbanner:not(:first-child) { margin-top: 26px; }
}
.zbanner-photo {
	display: block; width: 100%; height: 100%;
	object-fit: cover; object-position: center 44%;
}
.zbanner-caption {
	position: absolute; left: clamp(20px, 2.5vw, 56px); bottom: 0;
	display: block;
	background: var(--color-band); color: #fff;
	padding: 26px 42px 26px 34px;              /* Mockup .hero-caption 1:1 */
	max-width: min(560px, 88%);
	text-align: left;                          /* critical_css zentriert h1 global — hier zurueckdrehen */
}
.zbanner-eyebrow {
	display: block;
	color: var(--color-accent-onink, var(--color-accent));   /* A11y: Text auf Band-Schwarz braucht 4,5:1 — Markenrot hat dort nur 3,7 */
	font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	letter-spacing: .14em; font-size: 15px; font-weight: 700; text-transform: uppercase;
	margin-bottom: 8px;                        /* groesser+fetter als Mockup (12px/400): Rot auf Schwarz braucht Masse */
}
.zbanner-mark { color: var(--color-accent-onink, var(--color-accent)); }   /* EIN Ton je Flaeche: gleiches Caption-Rot wie Eyebrow/Countdown */ /* Keyword-Hervorhebung in der Headline (mark="...") */
.zbanner-title {
	display: block; margin: 0;   /* margin-Reset: Titel darf auch als <h1> laufen (h1="1") */
	font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	font-weight: 700; font-size: clamp(30px, 3.2vw, 50px);
	line-height: .96; letter-spacing: .02em; text-wrap: balance;
	color: #fff;                 /* explizit: h1-Regeln anderswo duerfen nicht durchschlagen */
	text-align: left;            /* critical_css zentriert h1 — Klasse muss es direkt zuruecksetzen */
}
.zbanner-copy { display: block; font-size: 14px; color: #c9c9c6; margin: 12px 0 0; max-width: 44ch; }
.zbanner-copy--sub { margin-top: 8px; font-size: 13.5px; line-height: 1.55; max-width: 78ch; }
/* Caption mit Kurzbeschreibung: breiter, weniger Zeilen (Owner 11.08., Desktop) */
.zbanner-caption--wide { max-width: min(820px, 92%); }
@media (max-width: 700px) {
	/* Mobil traegt die Caption die Beschreibung NICHT — sie steht unter den Produkten */
	.zbanner-copy--sub { display: none; }
}

/* Kurzbeschreibung mobil unter den Produkten (Desktop: Caption bzw. zcat-intro) */
.zcat-intro-mobile { display: none; }
@media (max-width: 700px) {
	.zcat-intro-mobile {
		display: block; margin: 18px 0 6px; clear: both;
		color: var(--color-text-light); font-size: 14.5px; line-height: 1.6;
	}
}
.zbanner-cd {
	/* countdown="outlet": Dringlichkeitszeile in der Caption — Rot als Signal-Pop
	   auf Band-Schwarz (wie Karten-Flag .zcard-flag-dringend) */
	display: block; margin: 12px 0 0;
	font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	font-weight: 700; font-size: 17px; letter-spacing: .05em; text-transform: uppercase;
	color: var(--color-accent-onink, var(--color-accent));   /* A11y wie .zbanner-eyebrow */
}
.zbanner-cd .fs-countdown {
	font-variant-numeric: tabular-nums;
	display: inline-block; min-width: 8ch; text-align: left;   /* Ticker-Ziffern springen nicht */
}
.zbanner-cta {
	/* Mockup .btn.btn-onink: weiss auf Band-Schwarz, Hover rot — modus-invariant,
	   weil die Caption in BEIDEN Modi auf strukturellem Schwarz sitzt */
	display: inline-block; margin-top: 18px;
	font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
	color: #1D1D1F; background: #fff; border: 1.5px solid transparent;
	border-radius: var(--radius-small);
	padding: 12px 22px;
	transition: background .15s, color .15s, border-color .15s;
}
.zbanner:hover .zbanner-cta { background: var(--color-accent); color: #fff; }
.zbanner-more {
	display: flex; justify-content: flex-end;
	margin: 8px 0 0; padding: 0;
}
.zbanner-more a {
	display: inline-flex; align-items: center; gap: 6px;
	min-height: 32px;
	font-size: 13px; font-weight: 700; color: var(--color-text-light);
}
.zbanner-more a:hover { color: var(--color-accent); }

@media (max-width: 700px) {
	/* EIN Asset fuer beide Welten (Owner 22.07.): mobil zeigt das CSS einen
	   4:3-AUSSCHNITT desselben Banners — object-position steuert den horizontalen
	   Fokus (--zbf aus dem fokus-Attribut, Default 65% = Motiv mittig-rechts laut
	   Banner-Standard). Die Caption rutscht UNTER das Bild: als Overlay verdeckte
	   sie auf Handybreite das gesamte Foto. */
	.zbanner { aspect-ratio: auto; }
	.zbanner-photo { aspect-ratio: 4 / 3; height: auto; object-position: var(--zbf, 65%) 44%; }
	.zbanner-caption { position: static; display: block; max-width: none; padding: 16px 18px 18px; }
	.zbanner-title { font-size: 28px; }
}

/* ══════════════════════════════════════════════════════════════
   CARD — Produktkarte (.zcard-*)                                     [B3 fertig]
   EINE Komponente, vier Einsatzorte (Deals/Bestseller/Outlet/Neuheiten).
   Markup: includes/product_card_v2.php (via DesignVersion-Weiche in
   includes/list_prod_by_id.php). Preisdaten: functions/product_card_price.php.
   Werte 1:1 aus zite-mockup.html (.card/.thumb/.card-body/.price/.btn-cart),
   Mockup-Tokens auf den Haus-Namensraum gemappt.
   KEIN Direkt-Warenkorb: "Zum Produkt" ist PAngV-Vorgabe (Spec Abschnitt 4).
   ══════════════════════════════════════════════════════════════ */
.zcard {
	position: relative;               /* Bezug fuer den flaechendeckenden Karten-Link */
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-medium);
	overflow: hidden;
	display: flex; flex-direction: column;
	transition: box-shadow .18s, transform .18s, border-color .18s;
}
.zcard:hover {
	box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
	transform: translateY(-2px);
	border-color: var(--color-border-hover);
}
/* Der Titel-Link deckt die ganze Karte ab ("stretched link"): ueberall klickbar, aber
   nur EIN Link im Baum — statt der frueheren drei (Bild/Titel/Button) auf dasselbe Ziel.
   Alles, was selbst klickbar bleiben muss (Herz, Versand-Link), liegt per z-index darueber. */
.zcard-link { color: var(--color-text); }
.zcard-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.zcard:hover .zcard-link { color: var(--color-accent); }
/* Tastatur: der Fokus landet auf dem Titel-Link, sichtbar wird die ganze Karte. */
.zcard:focus-within { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Bildrahmen: quadratisch (unsere Fotos sind 600x600) => aspect-ratio traegt die
   Hoehe, CLS 0 ohne feste Pixelmasse. Der Grund bleibt in BEIDEN Modi weiss —
   bewusste Ausnahme (Spec Abschnitt 2): unsere Produktfotos haben weissen Hintergrund,
   ein dunkler Rahmen wuerde sie ausfransen lassen. */
.zcard-thumb {
	position: relative;
	aspect-ratio: 1 / 1;
	background: #fff;
	display: flex; align-items: center; justify-content: center;
	border-bottom: 1px solid var(--color-border);
}
.zcard-imgwrap { display: block; width: 100%; height: 100%; position: relative; }
.zcard-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }

.zcard-badge {
	position: absolute; top: 12px; left: 12px; z-index: 2;
	background: var(--color-accent); color: #fff;
	font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	font-weight: 700;              /* wie alle Display-Elemente — Regular wirkte wie eine fremde Schrift (Owner 23.07.) */
	letter-spacing: .05em; font-size: 12px;
	padding: 4px 9px; border-radius: var(--radius-small);
}
/* Rabatt-Prozent — der staerkste Kaufanreiz auf der Kachel, deshalb bewusst gross.
   UNTEN LINKS (Owner): die Marketing-Sticker ("GRATIS", "2+1 GRATIS") sind in die
   Produktfotos hineingebaut und sitzen dort rechts — links ist frei. Sie stecken IM
   Bild, nicht in der DB (discount_seasonal_overlay_products ist leer), sind also
   programmatisch weder erkennbar noch ausweichbar; die Position ist die Loesung.
   EIN ROT — Marken-Rot #D0021B, ueberall. Owner-Entscheidung 16.07.: "niemals
   Ziegelrot, auch nicht fuer die Preise; verschiedene Rottoene sind faktisch mist und
   wirken inkonsequent."
   Damit ist Spec Abschnitt 4 ("Zwei Rots getrennt: Marken-Rot #D0021B != Sale/Fehler
   #A4272A") ueberholt — sie widersprach sich ohnehin selbst, denn Abschnitt 1 listet
   den Sale-Badge unter "Rot nur als Pop: CTA-Hover, Sale-Badge, aktive Nav,
   Warenkorb-Zaehler". Das Mockup faerbt .badge ebenfalls mit --red.
   --color-error bleibt ausschliesslich echten Fehlermeldungen (Formulare) vorbehalten,
   taucht auf der Karte nicht mehr auf. */
.zcard-discount {
	position: absolute; bottom: 10px; left: 10px; z-index: 2;
	background: var(--color-accent); color: #fff;
	font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	font-weight: 700; font-size: 26px; line-height: 1; letter-spacing: .01em;
	font-variant-numeric: tabular-nums;
	padding: 7px 12px 8px; border-radius: var(--radius-small);
	box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
/* Auszeichnungs-Balken (BESTSELLER/NEUHEIT/VORBESTELLEN) — ersetzt die alten dicken
   SVG-Banner mit Glow, die quer ueberm Produkt lagen.
   UNTER dem Bild, NICHT als Overlay (Owner): so verdeckt er kein Produkt. Bei Fotos,
   die bis an den unteren Rand reichen, haette ein Overlay Ware verdeckt.

   FARBLOGIK — Band-Schwarz ist der Normalfall, Rot die Ausnahme:
   Schwarz = strukturelle Auszeichnung ohne Frist (BESTSELLER/NEUHEIT/VORBESTELLEN).
             Dieselbe Farbe wie Header und Footer, in beiden Modi.
   Rot     = befristete Reduktion (Outlet-Restlaufzeit, Flashsale-Countdown). NUR hier,
             denn nur hier ist es ein Signal. Waeren auch die Auszeichnungen rot, traege
             im Bestseller-Block JEDE Karte ein rotes Band — Rot waere flaechig (Spec
             Abschnitt 1: "nur als Pop, nie flaechig") und wuerde "reduziert" bedeuten,
             obwohl nichts reduziert ist. Rot bedeutet auf dieser Karte schon
             "reduziert" (Rabatt-Badge, Sale-Preis).

   Die Preise fluchten weiter: der Balken verkuerzt den Karten-Body, aber der Preisblock
   haengt per margin-top:auto am Boden, nicht an der Oberkante. */
.zcard-flag {
	display: block;
	background: var(--color-band); color: #fff;
	font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	font-weight: 700; letter-spacing: .06em; font-size: 13px;
	text-align: center; padding: 7px 10px;
}
/* Marken-Rot wie der Rabatt-Badge — dieselbe Signalfamilie. */
.zcard-flag-dringend { background: var(--color-accent); }
/* tabular-nums: der Countdown tickt sekuendlich — ohne feste Ziffernbreite zappelt der
   ganze Balken. min-width haelt die Breite beim Wechsel 09:59 -> 10:00. */
.zcard-flag .fs-countdown {
	font-variant-numeric: tabular-nums;
	display: inline-block; min-width: 7ch; text-align: left;
}
/* Traegt die Karte einen Balken, ist die Hairline unter dem Bild doppelt gemoppelt —
   der schwarze Balken trennt selbst. */
.zcard-thumb:has(+ .zcard-flag) { border-bottom: 0; }
.zcard-wish {
	/* z-index 3: MUSS ueber dem flaechendeckenden Karten-Link (z-index 1) liegen,
	   sonst faengt der Link den Klick ab und das Merken ist tot. */
	position: absolute; top: 10px; right: 10px; z-index: 3;
	width: 34px; height: 34px; border-radius: 50%;
	background: var(--color-bg); border: 1px solid var(--color-border);
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; padding: 0;
}
.zcard-wish svg { width: 17px; height: 17px; stroke: var(--color-text-light); fill: none; stroke-width: 1.6; }
.zcard-wish:hover svg { stroke: var(--color-accent); }
.zcard-wish[aria-pressed="true"] svg { fill: var(--color-accent); stroke: var(--color-accent); }

.zcard-body { padding: 15px 16px 17px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
/* Der Offer-Container ist reine Schema.org-Klammer und darf das Layout nicht sehen:
   display:contents hebt seine Box auf, damit Preis/Hinweis/Pflichtangabe DIREKTE
   Flex-Kinder von .zcard-body werden. Nur so greift margin-top:auto am Preisblock
   (Buttons fluchten ueber die Reihe) und der 9px-Abstand stimmt wie im Mockup.
   <meta> ist per Browser-Default display:none und stoert dabei nicht. */
.zcard-body > [itemprop="offers"] { display: contents; }
/* Versand-/Rueckgabe-Microdata: unsichtbare Container, duerfen keine Flex-Luecke
   erzeugen. Google liest Microdata aus dem DOM, nicht aus dem Layout. */
.zcard-body [itemprop="shippingDetails"],
.zcard-body [itemprop="hasMerchantReturnPolicy"] { display: none; }
.zcard-eyebrow {
	font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	letter-spacing: .08em; font-size: 11px; color: var(--color-text-light);
	text-transform: uppercase;
}
.zcard-title { font-size: 15px; font-weight: 700; line-height: 1.3; margin: 0; }

/* Sterne (Mockup .stars): Gold gefuellt, unbewertete Sterne leise statt weggelassen —
   fuenf Positionen halten die Zeile ruhig, egal wie die Wertung ausfaellt. */
.zcard-stars { display: flex; align-items: center; gap: 3px; font-size: 12px; color: var(--color-text-light); }
.zcard-stars svg { width: 14px; height: 14px; fill: var(--color-warning); stroke: none; flex: 0 0 auto; }
.zcard-stars svg.off { fill: var(--color-border); }
.zcard-stars span { margin-left: 4px; font-variant-numeric: tabular-nums; }

.zcard-avail { font-size: 12px; }
.zcard-avail-orange { color: var(--color-accent-orange, #ED7103); }
.zcard-avail-red { color: var(--color-accent-text, var(--color-accent)); } /* Rot-Architektur: Text-Rot (Darkmode heller #FF3B30), Flaechen-Rot bleibt accent */
.zcard-avail-hint { color: var(--color-text-light); }

.zcard-pricerow { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.zcard-price {
	font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	/* Groesser + fett als im Mockup (dort 22px, Normalschnitt): der Preis ist die
	   Information, auf die der Blick zuerst faellt. */
	font-size: 26px; font-weight: 700; letter-spacing: .01em;
	font-variant-numeric: tabular-nums;
	color: var(--color-text);
}
/* Reduzierter Preis im Marken-Rot, konsistent mit Badge und Dringlichkeits-Balken. */
.zcard-sale .zcard-price { color: var(--color-accent); }
.zcard-price-prefix { font-size: 16px; font-weight: 700; }
.zcard-price-old {
	color: var(--color-text-light); font-size: 15px;
	font-variant-numeric: tabular-nums;
}
/* Sternchen am Streichpreis -> loest die Fussnote darueber auf. Nicht durchgestrichen
   (es gehoert zur Fussnote, nicht zum alten Preis) und nicht tabular. */
.zcard-price-star { text-decoration: none; display: inline-block; font-variant-numeric: normal; }
/* Grundpreis (§ 4 PAngV) — direkt UEBER dem Gesamtpreis. Das Gesetz verlangt ihn
   "neben dem Gesamtpreis" (raeumlich, gleiche Blickrichtung; nicht per Hover/Klick und
   nicht am anderen Ende der Karte) — angrenzend darueber erfuellt das genauso wie
   darunter. Oben, weil der reservierte Platz sonst als Luecke zwischen Preis und
   MwSt.-Zeile stuende; so liegt er in der ohnehin ruhigen Zone ueber dem Preis.
   Bewusst kraeftiger als die MwSt.-Zeile: er muss "unmissverstaendlich, klar erkennbar
   und gut lesbar" sein, darf also nicht im Kleingedruckten untergehen.
   Platz IMMER reserviert (nur ~11% der Artikel brauchen einen) — sonst saessen die
   Preise auf diesen Karten hoeher und die Reihe fluchtet nicht. */
.zcard-grundpreis {
	/* margin-top:auto sitzt HIER: der Grundpreis ist das oberste Element der unteren
	   Gruppe (Grundpreis -> Preis -> MwSt./Lieferzeit -> Fussnote -> Button). Damit
	   wird die ganze Gruppe nach unten geschoben und die Preise fluchten ueber die
	   Reihe, egal wie lang die Titel sind. */
	margin-top: auto;
	font-size: 12px; color: var(--color-text-light);
	font-variant-numeric: tabular-nums;
	min-height: calc(12px * 1.3);
	margin-bottom: -2px;
}
/* Sitzt unter dem Preis — der negative Rand zieht sie heran (Mockup-Wert). */
.zcard-price-note { font-size: 11px; color: var(--color-text-light); margin-top: -2px; }
/* position/z-index: sonst deckt der Karten-Link den Versand-Link ab. */
.zcard-price-note a { color: var(--color-text-light); text-decoration: underline; position: relative; z-index: 2; }
/* Pflichtangabe (PAngV/UVP) — leise, aber lesbar. NIE ausblenden.
   margin-top:auto sitzt HIER, weil dieser Hinweis das erste Element der unteren
   Gruppe ist (Hinweise -> Preis -> Button). Damit wird die ganze Gruppe nach unten
   geschoben und die Preise fluchten ueber die Reihe, egal wie lang die Titel sind.
   Der Platz ist FEST reserviert (2 Zeilen), auch ohne Hinweis: sonst saesse der Preis
   auf Karten mit Hinweis hoeher. Beide Pflichttexte ("Unverbindliche Preisempfehlung
   des Herstellers" / "Niedrigster Preis der letzten 30 Tage (am …)") brauchen in einer
   ~240px-Spalte zwei Zeilen. */
.zcard-price-legal {
	font-size: 10px; line-height: 1.25; color: var(--color-text-light);
	min-height: calc(2 * 10px * 1.25);
	margin-top: -4px;
}

/* Ein Knopf-Aussehen fuer beide Faelle — nur der TEXT unterscheidet sich
   ("Zum Produkt" bei Varianten/nicht lieferbar, sonst "In den Warenkorb"). */
.zcard-btn, .zcard-cart {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	width: 100%; margin-top: 6px;
	font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: 14px;
	padding: 12px 22px; border-radius: var(--radius-small);
	background: transparent; color: var(--color-text);
	border: 1.5px solid var(--color-border);
	transition: background .15s, color .15s, border-color .15s;
}
/* Kein Link mehr, nur sichtbare Handlungsaufforderung: Klicks gehen an den
   Karten-Link darunter durch, der Hover-Zustand kommt von der Karte. */
.zcard-btn { pointer-events: none; }
/* "Zum Produkt" faerbt sich, wenn die KARTE gehovert wird (er ist kein eigener Klickpunkt,
   der Karten-Link liegt darueber). "In den Warenkorb" faerbt sich beim Hover auf ihn
   SELBST — er ist ein eigener Knopf mit eigener Handlung. */
.zcard:hover .zcard-btn,
.zcard-cart:hover { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.zcard-btn-ico { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.6; flex: 0 0 auto; }

/* Der Warenkorb-Knopf sieht aus wie .zcard-btn (Regeln oben) — nur der TEXT ist anders.
   Diese Zusaetze trennen ihn: er MUSS ueber dem flaechendeckenden Karten-Link
   (z-index 1) liegen, sonst faengt der Link den Klick ab und der Korb bleibt leer.
   .zcard-btn dagegen laesst Klicks bewusst durch. */
.zcard-cart {
	position: relative; z-index: 2; pointer-events: auto;
	cursor: pointer;
	white-space: nowrap;   /* "In den Warenkorb" nicht umbrechen lassen */
}

.zcard-cart.is-busy { opacity: .65; cursor: progress; }
/* Bestaetigung und Fehler tragen dieselbe Flaeche — der Blick bleibt, wo er war.
   KEIN Gruen: --color-success ist das alte Marken-Gruen und faellt aus dem Design.
   Die Bestaetigung nutzt dieselbe rote Fuellung wie der Hover — keine neue Farbe. */
.zcard-cart.is-done { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.zcard-cart.is-error {
	background: transparent; color: var(--color-accent); border-color: var(--color-accent);
	font-size: 12px; letter-spacing: .02em; text-transform: none; white-space: normal;
}

/* ══════════════════════════════════════════════════════════════
   TRUST — Trust-Streifen (.ztrust-*)                                 [B6 fertig]
   Mockup .trust 1:1: heller Section-Ton, 4 Anker (ShopVote echt, DHL 1-3 WT,
   30 Tage Rueckgabe, Gratis-Geschenk ab 60 EUR). Gerendert vom [ztrust]-Shortcode.
   Full-bleed wie .zbanner (Negativ-Margin = .inhalt-clamp).
   ══════════════════════════════════════════════════════════════ */
.ztrust {
	display: flex; flex-wrap: wrap; gap: 30px;
	justify-content: space-between;
	margin: 26px calc(-1 * clamp(16px, 2.5vw, 56px));
	padding: 20px clamp(16px, 2.5vw, 56px);
	background: var(--color-bg-alt);
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}
.ztrust-item {
	display: flex; align-items: center; gap: 11px;
	font-size: 13.5px; font-weight: 700; color: var(--color-text);
	min-height: 48px;                          /* Touch-Target */
}
.ztrust-item svg { width: 24px; height: 24px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.5; }
.ztrust-item .ztrust-gold { stroke: none; fill: var(--color-warning); }
.ztrust-item small { color: var(--color-text-light); font-weight: 400; display: block; font-size: 12px; }
a.ztrust-item:hover span { color: var(--color-accent); }
@media (max-width: 700px) {
	.ztrust { gap: 10px 18px; padding: 14px clamp(16px, 2.5vw, 56px); }
	.ztrust-item { flex: 1 1 45%; min-height: 44px; }
}

/* ══════════════════════════════════════════════════════════════
   NEWSLETTER — Formular-Streifen (.znews-*)                          [B8]
   Gerendert vom DesignVersion-Zweig in includes/newsletter_mainpage.php.
   Der Foto-Aufhänger ist ein eigenes [zbanner] im Seitentext (Banner-Standard) —
   dieser Streifen traegt nur Copy links + Formular rechts. Tint-Optik wie .ztrust,
   full-bleed per Negativ-Margin. Mechanik (Consent, Gewinnspiel, Turnstile,
   Gratis-Praemie) kommt unveraendert aus dem geteilten Include.
   ══════════════════════════════════════════════════════════════ */
.znews {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(24px, 3vw, 56px);
	align-items: start;
	margin: 0 calc(-1 * clamp(16px, 2.5vw, 56px)) 26px;
	padding: 26px clamp(16px, 2.5vw, 56px) 30px;
	background: var(--color-bg-alt);
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}
.znews-head {
	/* Owner 23.07.: Textblock groesser + werblicher — dynamische Rabatt-Headline
	   (NewsletterRabatt/Formlich/Contest aus dem Include), Rabatt im Akzent-Rot */
	margin: 0 0 10px;
	font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	font-weight: 700; font-size: clamp(22px, 2.2vw, 30px);
	line-height: 1.08; letter-spacing: .01em; text-wrap: balance;
	color: var(--color-text);
	text-align: left;            /* Altregeln zentrieren Ueberschriften — hier zuruecksetzen */
}
.znews-mark { color: var(--color-accent); }
.znews-copy { font-size: 15.5px; line-height: 1.6; color: var(--color-text); margin: 0 0 14px; }
.znews-freebie {
	display: flex; gap: 12px; align-items: center;
	background: var(--color-bg); border: 1px solid var(--color-border);
	border-radius: var(--radius-small);
	padding: 10px 14px;
	font-size: 13px; line-height: 1.45; color: var(--color-text);
}
.znews-freebie small { color: var(--color-text-light); }
.znews-freebie-img {
	width: 58px; height: 58px; object-fit: contain; flex: 0 0 auto;
	background: #fff; border-radius: var(--radius-small);   /* Produktfotos haben weissen Grund — bleibt in beiden Modi weiss */
	border: 1px solid var(--color-border);
}
.znews-fields { display: flex; gap: 10px; margin-bottom: 10px; }
.znews-input {
	flex: 1; min-width: 0; height: 48px; padding: 0 14px;
	font-size: 14px; color: var(--color-text);
	background: var(--color-bg); border: 1px solid var(--color-border);
	border-radius: var(--radius-small);
}
.znews-input:focus { outline: none; border-color: var(--color-text); }
.znews-cta {
	flex: 0 0 auto; height: 48px; padding: 0 26px; cursor: pointer;
	border: none; border-radius: var(--radius-small);
	background: var(--color-accent); color: #fff;
	font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	font-weight: 700; font-size: 15px; letter-spacing: .06em; text-transform: uppercase;
	transition: background .15s;
}
.znews-cta:hover { background: var(--color-accent-dark); }
.znews-turnstile { margin: 0 0 10px; }
.znews-consent {
	display: flex; gap: 10px; align-items: flex-start;
	font-size: 12.5px; line-height: 1.5; color: var(--color-text-light);
	cursor: pointer;
}
.znews-consent input {
	width: 18px; height: 18px; margin-top: 1px; flex: 0 0 auto;
	accent-color: var(--color-accent); cursor: pointer;
}
.znews-consent a { color: var(--color-text); text-decoration: underline; }
.znews-contest {
	margin-top: 12px; padding: 12px 14px;
	background: var(--color-bg); border: 1px solid var(--color-border);
	border-radius: var(--radius-small);
	font-size: 13px;
}
.znews-contest-links { margin-top: 8px; padding-left: 28px; font-size: 12px; }
.znews-contest-links a { color: var(--color-text); text-decoration: underline; }
.znews-contest-links a:hover { color: var(--color-accent); }
@media (max-width: 1100px) {
	.znews { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 700px) {
	.znews-fields { flex-wrap: wrap; }
	.znews-cta { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   BRAND — „Wir sind Zite" (.zbrand-*)                                [B8]
   Startseiten-Brand-Block + Hero der /lp/about-us (parallel gehalten,
   Owner 23.07.). Schwarzes Logo-Band: Eyebrow rot + weisse Wortmarke
   mittig — strukturelles Schwarz wie Band/Footer/Caption. Darunter der
   Zwei-Spalter: Volltext links (Owner: NICHT kuerzen), Team-Foto rechts.
   Markup liegt im DB-Content (seiten.mainpage bzw. landingpages) — beim
   Rollout via CB pflegen. Band full-bleed wie .zbanner/.ztrust.
   ══════════════════════════════════════════════════════════════ */
.zbrand-band {
	margin: 26px calc(-1 * clamp(16px, 2.5vw, 56px)) 0;
	padding: 46px clamp(16px, 2.5vw, 56px);
	background: var(--color-band);
	text-align: center;
}
.zbrand-head { margin: 0; }
.zbrand-eyebrow {
	/* Owner 23.07.: weiss statt rot, groesser, dicht ans Logo; mobil mitwachsend
	   (Feedback-Runde 2: fix 26px war auf Handybreite zu dominant) */
	display: block;
	color: #fff;
	font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	letter-spacing: .14em; font-size: clamp(15px, 2.4vw, 26px); font-weight: 700; text-transform: uppercase;
	margin-bottom: 2px;
}
.zbrand-logo { height: 96px; width: auto; vertical-align: top; }
.zbrand-body {
	/* Lesbarkeit schlaegt Vollbreite: wie die about-us-Textstrecke gedeckelt und
	   zentriert — ungedeckelt hiesse die Textspalte bei 1920 >100 Zeichen/Zeile. */
	max-width: 1280px; margin: 0 auto;
	display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 64px);
	align-items: center;
	padding: 38px 0 10px;
}
.zbrand-text p { font-size: 16px; line-height: 1.65; margin: 0 0 18px; }
.zbrand-photo { width: 100%; height: auto; border-radius: var(--radius-medium); }
.zbrand-more { margin: 24px 0 0; }
.zbrand-more a {
	display: inline-flex; align-items: center; gap: 6px;
	min-height: 32px;                          /* Touch-Target */
	font-size: 14px; font-weight: 700; color: var(--color-text);
}
.zbrand-more a:hover { color: var(--color-accent); }
@media (max-width: 1100px) {
	.zbrand-body { grid-template-columns: 1fr; }
	/* Gestapelt: quadratisches Team-Foto nicht auf volle Breite aufblasen */
	.zbrand-photo { max-width: 680px; justify-self: center; }
}
@media (max-width: 700px) {
	/* Feedback-Runde 2: Logo mobil PROMINENT halten (76px statt 46px),
	   nur das Band-Padding wird kompakter */
	.zbrand-band { padding: 34px clamp(16px, 2.5vw, 56px); }
	.zbrand-logo { height: 76px; }
}

/* ══════════════════════════════════════════════════════════════
   FOOTER — (.zfoot-*)                                                [B6 fertig]
   Mockup footer 1:1: Band-Schwarz, 4-Spalten-Grid (Brand/Sortiment/Service/Zite),
   Siegel-Zeile (Zahlarten, ShopVote, IT-Recht, IHK), Bottom mit Pflicht-Fussnoten.
   Links mit >=24px Touch-Target (padding statt Schriftgroesse). Der SEO-Block der
   Startseite bleibt erhalten (.zfoot-seo). Struktureller Schwarz-Ton in BEIDEN Modi.
   ══════════════════════════════════════════════════════════════ */
.zfoot { background: var(--color-band); color: #c9c9c6; margin-top: 26px; }
.zfoot a { color: #c9c9c6; }
.zfoot a:hover { color: #fff; }
.zfoot-grid {
	display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px;
	padding: 46px clamp(16px, 2.5vw, 56px) 28px;
}
.zfoot-brand img { height: 47px; width: auto; margin-bottom: 16px; }
.zfoot-brand p { font-size: 13px; line-height: 1.6; max-width: 34ch; margin: 0 0 18px; }
.zfoot-social { display: flex; gap: 8px; }
.zfoot-social a {
	display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border: 1px solid #333; border-radius: 999px;
}
.zfoot-social a:hover { border-color: #c9c9c6; }
.zfoot-social svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.zfoot-col h3 {
	color: #fff; font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	letter-spacing: .06em; font-size: 14px; margin: 0 0 10px; text-transform: uppercase;
}
.zfoot-col a { display: block; padding: 7px 0; font-size: 13px; }   /* >=24px Target */
.zfoot-seals {
	display: flex; flex-wrap: wrap; gap: 18px 26px; align-items: center; justify-content: space-between;
	padding: 18px clamp(16px, 2.5vw, 56px);
	border-top: 1px solid #262626;
}
.zfoot-pays { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.zfoot-pays img {
	/* EINHEITLICHE Chip-Box fuer alle Zahl-/Versandlogos (Owner: gleiche Hoehe):
	   fixes Mass + object-fit statt auto-Breite — SVGs/PNGs mit wildem Seitenverhaeltnis
	   rendern sonst unterschiedlich hoch/breit */
	height: 44px; width: 84px; object-fit: contain;
	background: #fff; border-radius: var(--radius-small); padding: 2px 4px;   /* Logos fuellen die Box */
}
.zfoot-badges { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.zfoot-badge { height: 52px; width: auto; background: #fff; border-radius: var(--radius-small); padding: 3px; }
.zfoot-bottom {
	padding: 16px clamp(16px, 2.5vw, 56px) 22px;
	border-top: 1px solid #262626;
	font-size: 12px; color: #8a8a86;
	text-align: center;                        /* Owner 22.07.: Pflicht-Fussnoten mittig */
}
.zfoot-widerruf {
	background: transparent; color: #c9c9c6; border: 1.5px solid #c9c9c6;
	border-radius: var(--radius-small); padding: 0 22px; height: 52px;   /* = .zfoot-badge-Hoehe */
	font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
	cursor: pointer; transition: color .15s, border-color .15s;
}
.zfoot-widerruf:hover { color: #fff; border-color: #fff; }
.zfoot-bottom > span { display: block; margin-bottom: 8px; color: #c9c9c6; }
.zfoot-legal { line-height: 1.7; }
.zfoot-legal a { text-decoration: underline; }
.zfoot-seo {
	padding: 20px clamp(16px, 2.5vw, 56px) 30px;
	border-top: 1px solid #262626;
	font-size: 12px; line-height: 1.7; color: #8a8a86;
}
.zfoot-seo a { text-decoration: underline; }
.zfoot-seo h2, .zfoot-seo h3, .zfoot-seo h4 {
	color: #c9c9c6; font-size: 13px; text-align: left; margin: 18px 0 6px; letter-spacing: .04em;
}
.zfoot-seo hr { border: 0; border-top: 1px solid #262626; margin: 18px 0; }
@media (max-width: 1100px) {
	.zfoot-grid { grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 30px; }
	.zfoot-seals { justify-content: flex-start; }
}
@media (max-width: 560px) {
	.zfoot-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   MEDIA — Newsletter, Videos, rotierende Bundles (Slider)            [B8; Videos vorgezogen]
   Alle drei sind geteiltes PHP mit Inline-<style> → Overrides brauchen HOEHERE
   SPEZIFITAET (.inhalt-Praefix, 0-2-0 schlaegt deren 0-1-0), nicht spaetere Position:
   Inline-<style> im Body kommt nach dem Head-Stylesheet.
   ══════════════════════════════════════════════════════════════ */

/* Videos (includes/long_videos.php / all_shorts.php) — v2-Look statt zentrierter
   Alt-Optik: Karten wie .zcard (Border, Radius), Titel links/fett, Meta gedeckt,
   Show-More als Ghost-Button der Kartenfamilie. Markup bleibt geteilt+unangetastet. */
.inhalt .video-grid { gap: 18px; justify-content: flex-start; }
.inhalt .video-item {
	/* FLACHE Kachel (Owner: Karten-Rahmen wirkte fremd): Poster randlos mit
	   Radius wie die Produktbilder, Text darunter — kein Border, kein Kasten. */
	flex: 1 1 340px; max-width: none;
	background: transparent; border: 0; padding: 0;
}
.inhalt .video-item:hover .video-title-neu { color: var(--color-accent); }
.inhalt .video-title-neu {
	text-align: left; font-size: 14.5px; font-weight: 700; line-height: 1.35;
	margin: 10px 2px 2px; color: var(--color-text);
	transition: color .15s;
}
.inhalt .videosmalltext { text-align: left; font-size: 12px; color: var(--color-text-light); margin: 2px; }
.inhalt .videosmalltext a { color: var(--color-text-light); text-decoration: underline; }
.inhalt .show-more-btn button {
	background: transparent; color: var(--color-text);
	border: 1px solid var(--color-border); border-radius: var(--radius-small);
	font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
	padding: 11px 22px; min-height: 44px;
}
.inhalt .show-more-btn button:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
/* "Mehr Infos zum Video?" traegt ein INLINE style="text-align:center" im geteilten
   Include — gegen Inline-Styles hilft nur !important (dokumentierte Ausnahme). */
.inhalt .video-item p[style] { text-align: left !important; margin: 4px 2px 0 !important; font-size: 12px; }

/* ══════════════════════════════════════════════════════════════
   LISTING / PDP / CHECKOUT / KONTO                                   [B10]
   Checkout [B14] und Konto [B15] haben eigene Regionen weiter oben/unten.
   ══════════════════════════════════════════════════════════════ */

/* ── PDP (.zpi-*) — Markup: templatecontent/product_info_v2.php (Fork, nur via
   zite/inhalt.php geladen). Kopf = Grid: Galerie links, Kaufspalte rechts (Papier,
   KEIN Flaechen-Schwarz); mobil stapelt die Quellreihenfolge Head->Galerie->Kauf.
   Critical-CSS-Gleichschritt: getProductCSS() in templates/zite/critical_css.php. */
.zpi { margin-top: 4px; }
/* Owner-Runde 4 (13.08.) — Drei-Zonen-Muster der grossen Converter (Amazon):
   Galerie moderat links · MITTE traegt Titelblock + komplette USP-Liste (nichts
   abgeschnitten) · rechts schlanke Kaufbox, Preis+CTA sofort sichtbar oben.
   Quellreihenfolge Titel > Galerie > Kaufbox > Bullets = mobile Ordnung. */
@media (min-width: 1101px) {
	.zpi {
		display: grid;
		/* Runde 5: Bild fuehrt (~40%), Mitte schlanker (~35%), Kaufbox ~25% —
		   Marktschema-Proportionen; fr-Anteile halten 1101-1440px stabil */
		grid-template-columns: minmax(420px, 1.1fr) minmax(280px, 1fr) minmax(360px, 400px);
		grid-template-areas: "media head buy" "media mid buy" "left left buy";
		/* Reihe 3 schluckt den Hoehen-Ueberschuss der langen Kaufspalte — sonst
		   dehnen sich Reihe 1/2 und reissen Luft unter Titel und Bullets (Runde 6) */
		grid-template-rows: auto auto 1fr;
		column-gap: clamp(20px, 2.2vw, 40px);
		align-items: start;
	}
	.zpi-head    { grid-area: head; }
	.zpi-media   { grid-area: media; }
	.zpi-summary { grid-area: mid; }
	.zpi-buy     { grid-area: buy; }
	.zpi-left    { grid-area: left; margin-top: 8px; }
	.zpi-left .zsec-title { margin: 14px 0 16px; }
}
.zpi-eyebrow { font-family: var(--font-disp); font-stretch: var(--font-disp-wdth); font-size: 12px; letter-spacing: .09em; font-weight: 700; color: var(--color-accent-text, var(--color-accent)); }
.zpi-h1 { font-size: clamp(20px, 1.5vw, 28px); line-height: 1.22; margin: 2px 0 6px; text-align: left; }
.zpi-h1--archiv { text-align: center; margin: 10px 0; }
.zpi-meta { color: var(--color-text-light); font-size: 13px; margin-bottom: 8px; } /* text-light statt muted: Artikelnr/EAN = echter Text, AA beide Modi */
.zpi-headrating { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text-light); min-height: 24px; } /* min-height = Tap-Target (Lighthouse target-size) */
.zpi-headrating:hover { color: var(--color-accent-text, var(--color-accent)); }
.zpi-stars { display: inline-flex; gap: 2px; font-size: 16px; line-height: 1; }
.zpi-stars .on { color: var(--color-warning); }
.zpi-stars .off { color: var(--color-text-muted); }
.zpi-stars--lg { font-size: 26px; gap: 4px; justify-content: center; }

/* Galerie: Rahmen in Kartensprache; Include-Markup (detailbild_mobil.php) bleibt
   mechanisch unveraendert — hoehere Spezifitaet schlaegt dessen Body-<style>. */
.zpi-media .productimage { position: relative; width: 100%; max-width: none; }
.zpi-media #custom-carousel { max-width: 100%; margin: 0; border: 1px solid var(--color-border); border-radius: var(--radius-medium); background: #fff; }
/* EIN Rahmen (Owner 13.08.): Slide-Grund + Bild verschmelzen mit der weissen Karte —
   kein Innenradius, kein zweiter Kasten. !important schlaegt die Include-/head.php-
   Darkmode-Regeln (dort ebenfalls !important); Fotogrund bleibt in BEIDEN Modi weiss. */
.zpi-media #custom-carousel .carousel-slide.outer { aspect-ratio: 1 / 1; max-height: none; background: #fff !important; border-radius: 0 !important; }
.zpi-media #custom-carousel .carousel-image { max-width: 100%; max-height: 100%; border-radius: 0 !important; }
.zpi-media .carousel-preview { max-width: 100%; margin: 10px 0 0; justify-content: flex-start; }
/* Thumbs klein (Runde 5): Artikel haben bis zu 10 Variationsbilder — 44px halten
   eine Reihe in der Galerie-Spalte, zwei Reihen bleiben kompakt */
.zpi-media .carousel-preview-btn img { width: 44px; height: 44px; border-radius: var(--radius-small); }
.zpi-media .carousel-preview-btn.video-preview-thumb img { width: 78px; height: 44px; }

/* Kaufbox: Papier + Hairline (Schwarz bleibt strukturell — Band/Footer) */
.zpi-box { border: 1px solid var(--color-border); border-radius: var(--radius-medium); background: var(--color-bg); }
.zpi-purchase, .zpi-trust { padding: 18px clamp(16px, 2vw, 26px); text-align: left; }
/* padding-top der Trust-Zone steht unten in ihrer eigenen Region (14px) — hier
   stand ein toter padding-top:0, den jene Regel ohnehin ueberschrieb. */
.zpi-love { display: inline-block; background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 700; margin-bottom: 12px; }
.zpi-pricezone { margin: 2px 0; }
.zpi-timer { text-align: center; padding: 10px; margin: 0 0 12px; font-weight: 700; border-radius: var(--radius-small); font-family: var(--font-disp); font-stretch: var(--font-disp-wdth); letter-spacing: .04em; }
.zpi-timer--outlet { background: var(--color-accent); color: #fff; }
.zpi-timer-label { font-size: 12px; font-family: var(--font-body); letter-spacing: 0; margin-bottom: 3px; }
.zpi-timer-count { font-size: 20px; font-variant-numeric: tabular-nums; }
.zpi-strike { font-family: var(--font-disp); font-stretch: var(--font-disp-wdth); font-size: 20px; font-weight: 700; color: var(--color-text-light); }
.zpi-strike--block { display: block; }
.zpi-strike-label { margin-right: 6px; }
.zpi-pricenote { font-size: 12px; color: var(--color-text-light); margin: 2px 0 6px; } /* text-light statt muted: PAngV-Zeile = echter Text, AA beide Modi */
.zpi-pricenote--hot { color: var(--color-accent-text, var(--color-accent)); font-weight: 600; }
.zpi-price { font-family: var(--font-disp); font-stretch: var(--font-disp-wdth); font-size: clamp(34px, 3vw, 44px); font-weight: 700; line-height: 1.05; color: var(--color-text); font-variant-numeric: tabular-nums; }
.zpi-price--sale { color: var(--color-accent-text, var(--color-accent)); }
.zpi-fineprint { font-size: 12px; color: var(--color-text-light); margin: 4px 0; }
.zpi-fineprint a { color: inherit; }
.zpi-save { margin: 6px 0; font-size: 12px; color: var(--color-text-light); }
.zpi-save span { display: block; color: var(--color-accent-text, var(--color-accent)); font-weight: 700; font-size: 22px; font-family: var(--font-disp); font-stretch: var(--font-disp-wdth); }
.zpi-stock { padding: 8px 0 10px; font-size: 15px; }
.zpi-stock--ok { color: var(--color-success); }
.zpi-stock--out { color: var(--color-accent-text, var(--color-accent)); }
.zpi-stock-sub { font-size: 12px; color: var(--color-text-light); }
.zpi-stock-sub--strong { font-weight: 700; font-size: 12px; padding-top: 2px; }
.zpi-stock-xmas { font-weight: 700; color: var(--color-success); margin: 0 0 8px; }
.zpi-qty label { font-weight: 700; font-size: 13px; }
.zpi-qty select { margin-top: 4px; min-width: 76px; height: 42px; padding: 0 10px; font-size: 15px; border: 1px solid var(--color-border); border-radius: var(--radius-small); background: var(--color-bg); color: var(--color-text); }
.zpi-dealer-minqty { background: var(--color-bg-alt); border: 1px solid var(--color-border); padding: 8px 10px; border-radius: var(--radius-small); margin: 10px 0 4px; font-size: 12px; }
.zpi-ctawrap { padding: 16px 0 10px; }
.zpi-cta { display: block; width: 100%; background: var(--color-accent); color: #fff; border: 0; cursor: pointer; text-align: center; font-family: var(--font-disp); font-stretch: var(--font-disp-wdth); font-weight: 700; letter-spacing: .06em; font-size: 22px; padding: 15px 10px; border-radius: var(--radius-medium); transition: background .15s; box-sizing: border-box; }
.zpi-cta:hover { background: var(--color-accent-dark); color: #fff; }
.zpi-request-note { padding: 10px 0 16px; font-size: 13px; color: var(--color-text-light); }
.zpi-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 4px; }

/* Trust-Zone in der Kaufbox: ruhige Zeilen statt Kachel-Grid; IHK ist umgezogen */
.zpi-trust { border-top: 1px solid var(--color-border); margin-top: 4px; padding-top: 14px; }
.zpi-payrow { display: flex; align-items: center; gap: 12px; font-size: 13.5px; margin-bottom: 10px; }
.zpi-payrow img { flex-shrink: 0; width: 50px; height: auto; }
.zpi-usps { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.zpi-usp { display: flex; align-items: center; gap: 12px; font-size: 13.5px; }
.zpi-usp svg { width: 26px; height: 26px; flex-shrink: 0; fill: var(--color-text); }
.zpi-usp-logo { width: 44px; height: auto; }
.zpi-usp span { font-size: 12px; color: var(--color-text-light); }
@media (min-width: 700px) and (max-width: 1100px) {
	.zpi-offer-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; align-items: start; }
	.zpi-trust { border-top: 0; border-left: 1px solid var(--color-border); margin-top: 18px; padding-top: 18px; }
}

/* Bewertungen (Anzeige + Abgabe-Formular) */
.zpi-reviews { border: 1px solid var(--color-border); border-radius: var(--radius-medium); background: var(--color-bg-alt); margin-top: 14px; padding: 16px clamp(16px, 2vw, 26px); text-align: center; scroll-margin-top: 120px; }
.zpi-reviews-title { font-size: 20px; margin: 0 0 8px; }
.zpi-ratingform { margin-top: 10px; }
.zpi-ratingsubmit { margin-top: 8px; padding: 8px 22px; border: 1px solid var(--color-border-dark); border-radius: 999px; background: var(--color-bg); color: var(--color-text); cursor: pointer; font-weight: 700; }
.zpi-ratingsubmit:hover { background: var(--color-primary); color: var(--color-text-inverse); border-color: var(--color-primary); }
/* Sterne-Radio-Widget: DOM-Reihenfolge 5..1 + row-reverse => visuell 1..5;
   Hover/Checked fuellt per Folge-Geschwister alle niedrigeren Sterne mit. */
.sternebewertung { display: inline-flex; flex-direction: row-reverse; gap: 2px; position: relative; }
.sternebewertung input { position: absolute; opacity: 0; pointer-events: none; }
.sternebewertung label.reset-this { cursor: pointer; font-size: 0; line-height: 1; }
.sternebewertung label.reset-this::before { content: "★"; font-size: 28px; color: var(--color-text-muted); transition: color .1s; }
.sternebewertung label:hover::before,
.sternebewertung label:hover ~ label::before,
.sternebewertung input:checked ~ label::before { color: var(--color-warning); }

/* USP-/Kurzinfo-Liste in der MITTELSPALTE: dicht + scanbar, rote Haken an den
   Fett-Zeilen, VOLLSTAENDIG (kein Abschneiden — Owner-Runde 4). Content 1:1,
   nur die Praesentation komprimiert; Langform folgt in den Content-Bloecken. */
.zpi-summary { margin: 6px 0 14px; font-size: 14px; line-height: 1.6; color: var(--color-text-light); text-align: left; }
.zpi-summary b { display: block; position: relative; padding-left: 20px; margin-top: 10px; color: var(--color-text); font-size: 14.5px; }
.zpi-summary span > b:first-child { margin-top: 0; }
.zpi-summary b::before { content: "\2713"; position: absolute; left: 0; color: var(--color-accent-text, var(--color-accent)); font-weight: 700; }
/* Linke Restspalte (Umfang/Warnung/Upsell) — volle Breite unter dem Grid */
.zpi-left { text-align: left; }
.warnumfang { display: flex; gap: 20px; flex-wrap: wrap; }
.umfang { flex: 1 1 300px; }
.warning { flex: 1 1 300px; margin: 20px 0; }
/* Upsell (geteiltes bundle_single_product.php): Kacheln an die Kartensprache
   angleichen. Ribbon/Fonts/Rot stecken inline im Include — gezielte Overrides,
   dokumentierte Ausnahme wie beim Video-Include. */
.zpi-left .bundleproductscontainer { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 4px; overflow: visible; }
/* Runde 5 (Owner): Ribbon-Overlay im Bild raus — der Sektions-Kopf uebernimmt */
.zpi-left .bundleproductscontainer svg { display: none !important; }
.zpi-left .bannermobile { border: 1px solid var(--color-border); border-radius: var(--radius-medium); padding: 12px; background: var(--color-bg); float: none !important; margin-bottom: 0 !important; }
.zpi-left .bundleproductscontainer [style*="Bebas Neue"] { font-family: var(--font-disp) !important; font-stretch: var(--font-disp-wdth) !important; }
.zpi-left .bundleproductscontainer [style*="color:red"] { color: var(--color-accent-text, var(--color-accent)) !important; }

/* Content-Bloecke unter dem Kopf-Grid (volle Breite) */
.zpi-content { position: relative; text-align: left; margin-top: 26px; clear: both; }
.zpi-content .zsec-title { text-align: left; clear: both; }
.zpi-proptitle { font-size: 17px; margin: 8px 0 6px; }

/* A+ neu gedacht (Runde 9): Weiss nur als bewusste Karten-Bildflaeche.
   Detailbild = weisse Karte links, Folgetext (long_description) fliesst am
   Desktop rechts daneben; Eigenschaften = Karten-Grid mit weissem Bildkopf. */
.zpi-aplus-bpd { text-align: left; padding: 14px 0; }
.zpi-aplus-hero { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-medium); padding: 12px; margin: 6px auto 16px; max-width: 680px; }
.zpi-aplus-hero img { display: block; width: 100%; height: auto; border-radius: var(--radius-small); }
@media (min-width: 1101px) {
	/* Runde 10 (Owner): Bild fuehrt — breiter, Textspalte daneben schmaler,
	   damit der Text die Hoehe fuellt statt Leerflaeche zu lassen */
	.zpi-aplus-hero { float: left; width: min(56%, 900px); margin: 6px 32px 18px 0; }
}
.zpi-props { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; clear: both; margin: 8px 0 6px; }
@media (max-width: 1100px) { .zpi-props { grid-template-columns: 1fr; max-width: 560px; } }
.zpi-prop { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-medium); overflow: hidden; display: flex; flex-direction: column; }
/* Quadratisch, nicht 4:3: die A+-Bilder liegen durchgaengig als 2048x2048 vor
   und standen in der 4:3-Kachel mit breiten weissen Streifen links und rechts
   (Owner 26.08.). Kachel jetzt quadratisch wie die Motive selbst, mit RINGSUM
   gleichem Innenabstand — ein einseitig fehlender Rand fiel sofort auf. Die
   Trennlinie zum Text ist raus, der weisse Rahmen trennt bereits. */
.zpi-prop-media { background: #fff; padding: 10px; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; }
.zpi-prop-media img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.zpi-prop .zpi-proptitle { margin: 12px 16px 6px; text-align: left; }
.zpi-prop-text { margin: 0 16px 14px; font-size: 13.5px; line-height: 1.55; color: var(--color-text-light); text-align: left; }
.zpi-mfginfo { text-align: left; margin-top: 30px; font-size: 13px; }
.zpi-mfginfo a { text-decoration: underline; color: var(--color-text-light); cursor: pointer; }
/* IHK-Badge im zbrand-Textlauf (ihk="1", nur PDP) */
.zbrand-ihk { margin: 14px 0 0; }
.zbrand-ihk img { max-width: 200px; height: auto; border-radius: var(--radius-small); display: block; }
/* Ueber-uns (Runde 8): rendert als [zbrand]-Block wie die Startseite (Region BRAND);
   hier nur der IHK-Anhang */
/* Ratgeber-Block (Runde 6): rendert via DesignVersion-Zweig im geteilten Include
   jetzt echtes .zlp-Karten-Markup wie auf der Kategorieseite — plus PDP-Extras:
   4er-Raster und die Wissens-Suchleiste in Tokensprache */
.zlp--pi { margin: 18px 0 6px; }
@media (min-width: 1101px) { .zlp-grid--4 { grid-template-columns: repeat(4, 1fr); } }
.zlp-search { display: flex; position: relative; max-width: 560px; margin: 0 0 18px; }
.zlp-search input { flex: 1; height: 44px; padding: 0 52px 0 14px; font-size: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-medium); background: var(--color-bg); color: var(--color-text); outline: none; }
.zlp-search input:focus { border-color: var(--color-border-dark); }
.zlp-search button { position: absolute; right: 0; top: 0; bottom: 0; width: 46px; border: 0; cursor: pointer; border-radius: 0 var(--radius-medium) var(--radius-medium) 0; background: var(--color-accent); color: #fff; display: flex; align-items: center; justify-content: center; }
.zlp-search button:hover { background: var(--color-accent-dark); }

@media (max-width: 1100px) {
	.zpi-buy { margin-top: 16px; }
	.zpi-media #custom-carousel, .zpi-media .carousel-preview { max-width: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   PDP LIGHTBOX (.zpi-media .lightbox) — B10 Lightbox-Runde
   Markup/JS: geteiltes templates/DesignFunktionen/detailbild_mobil.php,
   v2-Zweig via $zpiGalleryV2-Flag (setzt NUR product_info_v2.php).
   Sprache: Scrim schwarz (strukturell), Foto auf weisser Buehne
   (Fotogrund — bleibt wie die Galerie-Karte auch im Darkmode weiss),
   Bedienelemente als runde Karten-Buttons, Aktiv-Rand = Tinte.
   !important NUR gegen die head.php-Darkmode-Radius-Flicken
   (dokumentierte Ausnahme, vgl. Upsell-Kacheln).
   ══════════════════════════════════════════════════════════════ */
html.zpi-lb-open { overflow: hidden; }

.zpi-media .lightbox {
	display: none;
	position: fixed; inset: 0;
	left: 0; top: 0; width: 100%; height: 100%;
	max-width: none; transform: none; /* Alt-CSS zentriert per 50%/translate — neutralisieren */
	z-index: 10000;
	background: rgba(0, 0, 0, .72);
	overflow: hidden;
}

/* Buehne: Bild/Video mittig, unten Platz fuer die Thumbleiste */
.zpi-media .lightbox .lightbox-content {
	width: 100%;
	height: calc(100vh - 128px);
	height: calc(100dvh - 128px);
	margin: 0;
	padding: 24px clamp(56px, 7vw, 96px) 0;
	display: flex; align-items: center; justify-content: center;
}
.zpi-media .lightbox .lightbox-content img,
.zpi-media .lightbox .lightbox-content video { max-width: 100%; max-height: 100%; margin: 0; }
.zpi-media .lightbox #lightbox-img {
	background: #fff; /* Fotogrund — bewusst fix, beide Modi */
	border-radius: var(--radius-medium);
	padding: clamp(8px, 1.5vw, 20px);
}
.zpi-media .lightbox #lightbox-video {
	background: #000; border-radius: var(--radius-medium);
	/* feste Buehne: ohne Metadata kollabiert <video> sonst auf 300x150 */
	width: min(100%, 1100px); aspect-ratio: 16 / 9;
}

/* Thumbleiste: schwebender Streifen ueber dem Scrim, horizontal scrollbar */
.zpi-media .lightbox .lightbox-thumbnails {
	position: absolute; left: 0; right: 0; bottom: 12px;
	display: flex; gap: 8px; align-items: center;
	flex-wrap: nowrap; justify-content: flex-start;
	width: max-content; max-width: calc(100% - 24px);
	margin: 0 auto; padding: 4px;
	overflow-x: auto; scrollbar-width: thin;
}
.zpi-media .lightbox .lightbox-thumbnails img,
.zpi-media .lightbox .lightbox-thumbnails .lb-thumb-video {
	flex: 0 0 auto;
	width: 56px; height: 56px; margin: 0; padding: 3px;
	background: #fff; /* Fotogrund */
	border: 2px solid var(--color-border);
	border-radius: var(--radius-small) !important; /* gegen head.php-Darkmode-Flicken */
	cursor: pointer; object-fit: contain;
}
.zpi-media .lightbox .lightbox-thumbnails .is-active { border-color: var(--color-accent); } /* EIN ROT — liest auf weisser Karte in beiden Modi (Tinte versinkt im Darkmode) */
.zpi-media .lightbox .lb-thumb-video { position: relative; overflow: hidden; padding: 0; }
.zpi-media .lightbox .lb-thumb-video img {
	width: 100%; height: 100%; margin: 0; padding: 0;
	border: 0; border-radius: 0 !important; object-fit: cover;
}
.zpi-media .lightbox .lb-thumb-play { position: absolute; inset: 0; background: rgba(0, 0, 0, .35); }
.zpi-media .lightbox .lb-thumb-play::after {
	content: ""; position: absolute; inset: 0; margin: auto;
	width: 55%; height: 55%;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='47' fill='rgba(0,0,0,0.55)' stroke='%23fff' stroke-width='4'/%3E%3Cpolygon points='41,32 72,50 41,68' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Bedienelemente: runde Karten-Buttons, Hover = EIN ROT (CTA-Pop).
   Farben FEST (nicht Token): auf dem immer-dunklen Scrim muessen die Buttons
   in BEIDEN Modi weisse Karten bleiben — gleiches Muster wie Galerie-Buehne/
   Geschenk-Kacheln (weiss in beiden Modi, Schrift fest dunkel). */
.zpi-media .lightbox .lightbox-prev,
.zpi-media .lightbox .lightbox-next,
.zpi-media .lightbox .lightbox-close {
	position: absolute;
	display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; padding: 0; margin: 0;
	background: #fff; color: #1D1D1F; /* Fotogrund-/Kacheln-Ausnahme, beide Modi */
	border: 1px solid rgba(0, 0, 0, .1); border-radius: 50%;
	font-size: 0; line-height: 0; /* neutralisiert Alt-Glyph-Styles */
	cursor: pointer; user-select: none;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.zpi-media .lightbox .lightbox-prev,
.zpi-media .lightbox .lightbox-next { top: 50%; margin-top: -22px; }
.zpi-media .lightbox .lightbox-prev { left: clamp(10px, 2vw, 24px); }
.zpi-media .lightbox .lightbox-next { right: clamp(10px, 2vw, 24px); }
.zpi-media .lightbox .lightbox-close { top: 14px; right: 14px; }
@media (hover: hover) {
	.zpi-media .lightbox .lightbox-prev:hover,
	.zpi-media .lightbox .lightbox-next:hover,
	.zpi-media .lightbox .lightbox-close:hover {
		background: var(--color-accent); border-color: var(--color-accent); color: #fff;
	}
}
.zpi-media .lightbox .lightbox-prev:focus-visible,
.zpi-media .lightbox .lightbox-next:focus-visible,
.zpi-media .lightbox .lightbox-close:focus-visible {
	outline: 2px solid var(--color-accent); outline-offset: 2px;
}

/* Galerie-Preview unter dem Hauptbild: Aktiv-Rand = Tinte statt JS-Inline-Blau */
.zpi-media .carousel-preview-btn { border: 2px solid transparent; border-radius: var(--radius-small); }
.zpi-media .carousel-preview-btn.is-active { border-color: var(--color-accent); } /* EIN ROT statt JS-Inline-Blau; Tinte waere im Darkmode unsichtbar */
.zpi-media .carousel-preview .carousel-preview-btn img { border-radius: var(--radius-small) !important; } /* gegen head.php-Darkmode-Flicken */

/* Play-Icon (Carousel-Video-Slide + Lightbox-Overlay): Inline-SVG statt amp.dev-Fremdbild */
.zpi-media .video-thumbnail .play-icon,
.zpi-media .lightbox .play-icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='47' fill='rgba(0,0,0,0.55)' stroke='%23fff' stroke-width='4'/%3E%3Cpolygon points='41,32 72,50 41,68' fill='%23fff'/%3E%3C/svg%3E");
}

@media (max-width: 1100px) {
	.zpi-media .lightbox .lightbox-content {
		height: calc(100vh - 112px);
		height: calc(100dvh - 112px);
		padding: 20px 10px 0;
	}
	.zpi-media .lightbox .lightbox-prev,
	.zpi-media .lightbox .lightbox-next { width: 40px; height: 40px; margin-top: -20px; }
	.zpi-media .lightbox .lightbox-prev { left: 8px; }
	.zpi-media .lightbox .lightbox-next { right: 8px; }
	.zpi-media .lightbox .lightbox-close { top: 10px; right: 10px; width: 40px; height: 40px; }
	.zpi-media .lightbox .lightbox-thumbnails img,
	.zpi-media .lightbox .lightbox-thumbnails .lb-thumb-video { width: 48px; height: 48px; }
}

/* ══════════════════════════════════════════════════════════════
   WARENKORB (.zct-*)                                          [B12]
   Markup: templatecontent/shopping_cart_v2.php (Fork, zite-only).
   Zwei Zonen: links Artikel-Karten, rechts mitlaufende Kaufbox in der
   Sprache der PDP-Kaufbox. Mobil stapelt es, der CTA bleibt als
   Sticky-Leiste erreichbar. Schwarz bleibt strukturell, EIN ROT ist Signal.
   ══════════════════════════════════════════════════════════════ */
.zct-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
	gap: clamp(20px, 2.4vw, 40px);
	align-items: start;
	margin-top: 6px;
}
.zct-list { min-width: 0; }

/* ── Artikelzeile als Karte ─────────────────────────────────── */
.zct-item {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr) minmax(150px, 200px);
	gap: 16px;
	align-items: start;
	padding: 18px 0;
	border-bottom: 1px solid var(--color-border);
}
.zct-item:first-of-type { padding-top: 6px; }
.zct-item.is-over { background: color-mix(in srgb, var(--color-accent) 6%, transparent); }

.zct-item-media {
	display: block; width: 120px; height: 120px;
	background: #fff;                      /* Fotogrund — in beiden Modi weiss */
	border: 1px solid var(--color-border);
	border-radius: var(--radius-medium);
	padding: 6px; overflow: hidden;
}
.zct-item-media img { width: 100%; height: 100%; object-fit: contain; display: block; }

.zct-item-main { min-width: 0; }
.zct-item-title { margin: 0 0 6px; font-size: 16px; line-height: 1.3; font-weight: 700; }
.zct-item-title a { color: var(--color-text); }
.zct-item-title a:hover { color: var(--color-accent-text, var(--color-accent)); }
.zct-item-umfang { font-size: 13px; color: var(--color-text-light); margin-top: 8px; }
.zct-item-umfang b { color: var(--color-text); }

.zct-badge {
	display: inline-block; margin: 0 0 6px;
	padding: 2px 8px; border-radius: var(--radius-small);
	background: var(--color-bg-alt); color: var(--color-text);
	font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.zct-badge--bw { background: var(--color-text); color: var(--color-bg); }

/* Lagerstatus — eine Quelle (zct_stock_html) */
.zct-stock { font-size: 13px; line-height: 1.5; margin: 4px 0 2px; }
.zct-stock b { font-size: 14px; }
.zct-stock--ok  b { color: var(--color-success); }
.zct-stock--low b { color: var(--color-accent-text, var(--color-accent)); }
.zct-stock--out b { color: var(--color-accent-text, var(--color-accent)); }
.zct-fineprint { font-size: 12px; color: var(--color-text-light); font-weight: 400; overflow-wrap: anywhere; }

.zct-hint {
	display: flex; align-items: center; gap: 10px;
	margin: 8px 0; padding: 10px 12px;
	border: 1px solid var(--color-warning); border-radius: var(--radius-medium);
	background: color-mix(in srgb, var(--color-warning) 12%, transparent);
	font-size: 13px;
}
.zct-hint svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--color-warning); }
.zct-hint-sub { font-size: 11px; color: var(--color-text-light); }

.zct-dealer-unit { font-size: 13px; margin: 6px 0; }
.zct-dealer-unit s { color: var(--color-text-light); margin-right: 4px; }
.zct-dealer-price { color: var(--color-accent-text, var(--color-accent)); }

/* Zeilen-Aktionen: Merken zuerst (Retention), Entfernen sekundaer */
.zct-item-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.zct-linkbtn {
	display: inline-flex; align-items: center; gap: 6px;
	min-height: 32px; padding: 0; border: 0; background: none; cursor: pointer;
	font-family: var(--font-body); font-size: 13px; color: var(--color-text-light);
}
.zct-linkbtn svg { width: 15px; height: 15px; }
.zct-linkbtn:hover { color: var(--color-text); }
.zct-linkbtn--del:hover { color: var(--color-accent-text, var(--color-accent)); }
.zct-linkbtn.on-wishlist { color: var(--color-accent-text, var(--color-accent)); }

/* Mengen-Stepper */
.zct-item-side { text-align: right; }
.zct-qty {
	display: inline-flex; align-items: stretch; margin-left: auto;
	border: 1px solid var(--color-border); border-radius: var(--radius-medium); overflow: hidden;
}
.zct-qty-btn {
	width: 38px; min-height: 40px; border: 0; cursor: pointer;
	background: var(--color-bg); color: var(--color-text);
	font-size: 18px; line-height: 1; font-family: var(--font-body);
}
.zct-qty-btn:hover { background: var(--color-bg-alt); }
.zct-qty-input {
	width: 52px; min-height: 40px; text-align: center;
	border: 0; border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border);
	background: var(--color-bg); color: var(--color-text);
	font-family: var(--font-body); font-size: 15px; font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
}
.zct-qty-input::-webkit-outer-spin-button,
.zct-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.is-over .zct-qty-input { color: var(--color-accent-text, var(--color-accent)); font-weight: 700; }

.zct-price {
	margin-top: 10px;
	font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums;
	color: var(--color-text); line-height: 1.1;
}
.zct-price.is-sale { color: var(--color-accent-text, var(--color-accent)); }
.zct-price-was { margin-top: 8px; font-size: 13px; color: var(--color-text-light); }
.zct-price-was s { font-variant-numeric: tabular-nums; }
.zct-save { font-size: 12px; font-weight: 700; color: var(--color-text); margin-top: 2px; }
.zct-free { font-size: 12px; font-weight: 700; color: var(--color-text-light); margin-top: 4px; }
.zct-warn { font-size: 12px; font-weight: 700; color: var(--color-accent-text, var(--color-accent)); margin-top: 6px; }
.zct-price-badge { margin-top: 4px; }

/* ── Kaufbox rechts ─────────────────────────────────────────── */
/* [Owner 19.08.] Der Kopf der Kaufbox verschwand beim Scrollen unter dem Header:
   top:16px klebt am Viewport-Rand, der sticky .kopf (96px, z-index 9999) liegt aber
   darueber. Offset = Headerhoehe + Abstand. Zusaetzlich eine Hoehenbremse, damit eine
   Box, die laenger als der Bildschirm ist, intern scrollt statt oben abgeschnitten zu
   werden. */
.zct-summary {
	position: sticky; top: calc(96px + 14px);
	max-height: calc(100vh - 96px - 28px);
	overflow-y: auto; overscroll-behavior: contain;
}
.zct-sumbox {
	border: 1px solid var(--color-border); border-radius: var(--radius-medium);
	background: var(--color-bg); padding: 18px;
}

.zct-sumtable { width: 100%; border-collapse: collapse; table-layout: fixed; }
.zct-sumtable td { padding: 3px 0; vertical-align: top; font-size: 14px; overflow-wrap: anywhere; }
.zct-sumtable td:last-child { width: 42%; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; overflow-wrap: normal; }

.zct-savings-total {
	margin: 12px 0 6px; padding: 8px 10px;
	border-radius: var(--radius-small); background: color-mix(in srgb, var(--color-success) 12%, transparent);
	font-size: 13px; color: var(--color-text); text-align: center;
}
.zct-savings-total b { color: var(--color-text); }

.zct-cta {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	width: 100%; min-height: 52px; margin-top: 14px;
	background: var(--color-accent); color: #fff;
	border: 0; border-radius: var(--radius-medium); cursor: pointer;
	font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
	transition: background .15s ease;
}
.zct-cta svg { width: 18px; height: 18px; }
.zct-cta:hover { background: var(--color-accent-dark); color: #fff; }
.zct-cta.is-blocked { background: var(--color-bg-alt); color: var(--color-text-light); cursor: not-allowed; }
.zct-cta.is-blocked svg { display: none; }
.zct-cta-reason {
	margin: 8px 0 0; font-size: 13px; line-height: 1.4;
	color: var(--color-accent-text, var(--color-accent)); text-align: center;
}

/* Zahlarten + Teilen in der Box */
.zct-pay { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-border); }
.zct-pay-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.zct-pay-row img { width: 62px; height: auto; flex: 0 0 auto; }
.zct-pay-row b { font-size: 14px; }
.zct-pay-row span { display: block; font-size: 12px; color: var(--color-text-light); }

@media (max-width: 1100px) {
	.zct-layout { grid-template-columns: minmax(0, 1fr); }
	.zct-summary { position: static; max-height: none; overflow: visible; }
	.zct-item { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; }
	.zct-item-media { width: 88px; height: 88px; }
	.zct-item-side { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; text-align: left; }
	.zct-item-side .zct-qty { margin-left: 0; }
	.zct-price { margin-top: 0; }
	/* Sticky-CTA-Leiste: der Abschluss bleibt immer erreichbar */
	.zct-sumbox { padding-bottom: 14px; }
}
@media (max-width: 700px) {
	.zct-item-title { font-size: 15px; }
	.zct-price { font-size: 21px; }
	.zct-progress-steps { font-size: 10px; }
}

/* Gratis-Geschenk-Zeilen (Cart-Upgrade-Picker) — gleiche Zeilensprache, ruhiger Ton */
.zct-item--gift .zct-item-media { opacity: .75; }
.zct-badge--gift { background: var(--color-text); color: var(--color-bg); }
.zct-gift-status { margin: 4px 0 2px; font-size: 14px; color: var(--color-text-light); }
.zct-price--free { color: var(--color-text); }
.zct-gift-btn {
	margin-top: 10px; width: 100%; min-height: 40px; padding: 0 14px;
	border: 1px solid var(--color-success); border-radius: var(--radius-medium);
	background: var(--color-success); color: #fff; cursor: pointer;
	font-family: var(--font-body); font-size: 14px; font-weight: 700;
}

/* Gutschein: eingeklappt, damit das Feld nicht zur Code-Suche verleitet */
.zct-voucher { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-border); }
.zct-voucher > summary {
	cursor: pointer; list-style: none; font-size: 14px; color: var(--color-text-light);
	display: flex; align-items: center; gap: 6px; min-height: 32px;
}
.zct-voucher > summary::-webkit-details-marker { display: none; }
.zct-voucher > summary::after { content: '+'; margin-left: auto; font-size: 18px; }
.zct-voucher[open] > summary::after { content: '−'; }
.zct-voucher > summary:hover { color: var(--color-text); }
.zct-voucher-body { display: flex; gap: 8px; margin-top: 10px; }
.zct-voucher-body input[type="text"] {
	flex: 1; min-width: 0; height: 42px; padding: 0 12px;
	border: 1px solid var(--color-border); border-radius: var(--radius-medium);
	background: var(--color-bg); color: var(--color-text); font-size: 14px;
}
.zct-voucher-body input[type="submit"] {
	height: 42px; padding: 0 16px; border: 1px solid var(--color-border-dark);
	border-radius: var(--radius-medium); background: var(--color-text); color: var(--color-bg);
	font-family: var(--font-body); font-size: 14px; font-weight: 700; cursor: pointer;
}
.zct-voucher-body input[type="submit"]:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

/* Trust-Streifen unter dem Warenkorb */
.zct-trust {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
	margin: 26px 0 10px; clear: both;
}
.zct-trust-item {
	display: flex; align-items: center; gap: 10px;
	padding: 12px 14px; border-radius: var(--radius-medium);
	background: var(--color-bg-alt); color: var(--color-text);
}
.zct-trust-item svg, .zct-trust-item > img { width: 28px; height: 28px; flex: 0 0 auto; fill: var(--color-text); }
.zct-trust-item b { display: block; font-size: 13px; line-height: 1.25; }
.zct-trust-item span { display: block; font-size: 11px; color: var(--color-text-light); }
.zct-trust-item--img { padding: 0; overflow: hidden; background: none; }
.zct-trust-item--img img { width: 100%; height: 100%; max-height: 74px; object-fit: cover; border-radius: var(--radius-medium); }

/* Titel links (das geteilte Alt-CSS zentriert h2 global) */
.zct-item-title { text-align: left; }
.zct-item .zct-item-title a { text-decoration: none; }

@media (max-width: 1100px) { .zct-trust { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .zct-trust { grid-template-columns: 1fr; } }

/* Warenkorb-Feinschliff (Mobil + Trust) */
.zct-trust-item > img[src*="brandlogo"] {
	/* brandlogo.svg ist die WEISSE Wortmarke -> im Lightmode unsichtbar.
	   Im Darkmode bleibt sie weiss, im Lightmode wird sie zu Tinte invertiert. */
	filter: invert(1) brightness(.15);
}
html.darkmode .zct-trust-item > img[src*="brandlogo"] { filter: none; }
@media (prefers-color-scheme: dark) {
	html:not(.lightmode) .zct-trust-item > img[src*="brandlogo"] { filter: none; }
}
.zct-trust-item--img img { object-fit: contain; background: var(--color-bg-alt); }

@media (max-width: 1100px) {
	/* Geschenk-Zeilen brauchen mehr Platz als eine Stepper-Zeile: sauber umbrechen */
	.zct-item--gift .zct-item-side {
		flex-wrap: wrap; gap: 4px 10px; align-items: baseline; justify-content: flex-start;
	}
	.zct-item--gift .zct-gift-btn { width: auto; margin-top: 6px; padding: 0 18px; }
	.zct-item--gift .zct-price-was { margin-top: 0; }
}

/* Toast fuer Undo/Hinweise (AJAX-Warenkorb) */
.zct-toast {
	position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
	z-index: 9000; max-width: min(560px, 92vw);
	display: flex; align-items: center; gap: 14px;
	padding: 12px 16px; border-radius: var(--radius-medium);
	background: var(--color-band); color: #fff;
	font-size: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.zct-toast[hidden] { display: none !important; }
.zct-toast-undo {
	border: 0; background: none; cursor: pointer; padding: 0;
	font-family: var(--font-body); font-size: 14px; font-weight: 700;
	color: var(--color-accent-onink, var(--color-accent));
	text-decoration: underline; text-underline-offset: 3px;
}
.zct-item.is-busy { opacity: .55; pointer-events: none; }

/* Lieferdatum-Prognose + MwSt-Ausweis */
.zct-eta { margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--color-text); }
/* MwSt-/Versandzeilen stehen in der nowrap-Wertzelle der Summentabelle —
   sie muessen dort ausdruecklich umbrechen duerfen, sonst laufen sie mobil
   aus dem Viewport. */
.zct-vat { font-size: 12px; color: var(--color-text-light); white-space: normal; overflow-wrap: anywhere; }
.zct-vat .zct-fineprint { white-space: normal; }

/* Digital-Badge + Sticky-CTA (mobil) */
.zct-badge--digital { background: var(--color-secondary); color: #fff; }
.zct-stickybar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 8000;
	display: none; align-items: center; gap: 12px;
	padding: 10px clamp(12px, 3vw, 20px) calc(10px + env(safe-area-inset-bottom, 0px));
	background: var(--color-bg); border-top: 1px solid var(--color-border);
	box-shadow: 0 -6px 24px rgba(0,0,0,.14);
}
.zct-stickybar[hidden] { display: none !important; }
.zct-stickybar-sum { flex: 0 0 auto; line-height: 1.15; }
.zct-stickybar-sum span { display: block; font-size: 11px; color: var(--color-text-light); }
.zct-stickybar-sum b { font-family: var(--font-disp); font-stretch: var(--font-disp-wdth); font-size: 19px; font-variant-numeric: tabular-nums; }
.zct-cta--sticky { flex: 1; margin-top: 0; min-height: 48px; font-size: 18px; }
@media (max-width: 1100px) {
	.zct-stickybar:not([hidden]) { display: flex; }
	body.has-zct-stickybar { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}

/* Kontext-Vorschlaege (Geschenk-Luecke / Kassenzone) */
.zct-suggest {
	margin: 6px 0 18px; padding: 16px;
	border: 1px solid var(--color-border); border-radius: var(--radius-medium);
	background: var(--color-bg-alt);
}
.zct-suggest-head b {
	display: block; font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	font-size: 18px; text-transform: uppercase; letter-spacing: .03em;
}
.zct-suggest-head span { display: block; font-size: 13px; color: var(--color-text-light); margin-top: 2px; }
.zct-suggest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.zct-suggest-card {
	display: flex; flex-direction: column; gap: 6px;
	padding: 10px; border-radius: var(--radius-medium);
	background: var(--color-bg); border: 1px solid var(--color-border);
}
.zct-suggest-media {
	display: block; aspect-ratio: 1/1; background: #fff;   /* Fotogrund */
	border-radius: var(--radius-small); overflow: hidden; padding: 4px;
}
.zct-suggest-name {
	font-size: 13px; line-height: 1.3; color: var(--color-text);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.zct-suggest-name:hover { color: var(--color-accent-text, var(--color-accent)); }
.zct-suggest-price {
	font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	font-size: 17px; font-variant-numeric: tabular-nums; margin-top: auto;
}
.zct-suggest-add {
	min-height: 38px; border: 1px solid var(--color-border-dark); border-radius: var(--radius-medium);
	background: var(--color-bg); color: var(--color-text); cursor: pointer;
	font-family: var(--font-body); font-size: 13px; font-weight: 700;
}
.zct-suggest-add:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.zct-suggest-add:disabled { opacity: .6; cursor: default; }
/* ACHTUNG: Das LAYOUT dieser Komponente (Grid -> Zeilenliste) wird weiter unten
   in der Region "Vorschlaege kompakt" ueberschrieben; hier stehen nur noch die
   Farben, Schriften und Zustaende. Eine 700px-Query auf grid-template-columns
   stand hier ebenfalls und war wirkungslos, seit die Liste auf Flex laeuft. */

/* ══════════════════════════════════════════════════════════════
   WARENKORB LEER — ersetzt den Alt-Styleblock (Bebas/Francois/Hex)
   Karten in derselben Sprache wie .zcard, nur schlanker.
   ══════════════════════════════════════════════════════════════ */
.empty-cart-section { margin-bottom: 28px; }
.empty-cart-section .section-header {
	display: flex; align-items: baseline; gap: 12px;
	margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--color-border);
}
.empty-cart-section .section-header h2 {
	margin: 0; font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	font-size: clamp(20px, 2.2vw, 26px); text-transform: uppercase; letter-spacing: .03em; text-align: left;
}
.empty-cart-section .section-header a, .empty-cart-section .section-header span { font-size: 13px; color: var(--color-text-light); }
/* [27.08.] Die .product-*-empty-Eigenbau-Karten sind entfallen — beide
   Leerseiten-Raster (Merkliste + Deals) rendern die Standard-Karte (.zcard)
   via includes/list_prod_by_id.php im .icon-container. */

/* Login-Anreiz in der Kaufbox */
.zct-loginhint { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-border); font-size: 13px; color: var(--color-text-light); }
.zct-loginhint a { font-weight: 700; color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; }
.zct-loginhint a:hover { color: var(--color-accent-text, var(--color-accent)); }

/* ══════════════════════════════════════════════════════════════
   MINI-CART-DRAWER (.zdrawer-cart) — Add-Feedback ohne Seitenwechsel
   ══════════════════════════════════════════════════════════════ */
html.zdrawer-open { overflow: hidden; }
/* z-index ueber Band/Nav (10000) — sonst verschwindet der Drawer-Kopf hinter dem Header */
.zdrawer-cart { position: fixed; inset: 0; z-index: 10050; }
.zdrawer-cart[hidden] { display: none !important; }
.zdrawer-cart-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.zdrawer-cart-panel {
	position: absolute; inset: 0 0 0 auto; width: min(420px, 92vw);
	display: flex; flex-direction: column;
	background: var(--color-bg); color: var(--color-text);
	box-shadow: 0 0 40px rgba(0,0,0,.4);
}
.zdrawer-cart-head {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 16px 18px; border-bottom: 1px solid var(--color-border);
}
.zdrawer-cart-head b {
	font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	font-size: 19px; text-transform: uppercase; letter-spacing: .03em;
}
.zdrawer-cart-x { border: 0; background: none; cursor: pointer; color: var(--color-text); padding: 4px; min-width: 32px; min-height: 32px; }
.zdrawer-cart-x svg { width: 20px; height: 20px; }
.zdrawer-cart-body { flex: 1; overflow-y: auto; padding: 18px; }
.zdrawer-cart-loading { font-size: 14px; color: var(--color-text-light); }
/* Der Drawer listet den ganzen Warenkorb (neueste zuerst) — die Positionen
   brauchen deshalb eine Trennung, und die eben gelegte eine Auszeichnung. */
.zdrawer-cart-item { display: flex; gap: 12px; align-items: flex-start;
	padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--color-border); }
.zdrawer-cart-item:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.zdrawer-cart-item.is-neu { padding: 10px; margin: -10px -10px 12px; border-bottom: 0;
	background: var(--color-bg-alt); border-radius: var(--radius-medium); }
.zdrawer-cart-neu { display: block; margin-bottom: 3px; font-size: 11.5px; font-weight: 700;
	letter-spacing: .04em; text-transform: uppercase; color: var(--color-success); }
.zdrawer-cart-img {
	flex: 0 0 auto; width: 84px; height: 84px; padding: 5px;
	background: #fff; /* Fotogrund */ border: 1px solid var(--color-border); border-radius: var(--radius-medium);
}
.zdrawer-cart-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.zdrawer-cart-item b { display: block; font-size: 14px; line-height: 1.35; }
.zdrawer-cart-qty { display: block; margin-top: 4px; font-size: 13px; color: var(--color-text-light); }

/* Geschenk-Moment im Drawer (Owner 27.08.): Fortschritt + EIN Overstock-Vorschlag.
   Balken in Accent (dasselbe Rot wie die Geschenk-Leiter im Warenkorb). */
.zdrawer-gift { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 8px; }
.zdrawer-gift-line { font-size: 13.5px; color: var(--color-text); }
.zdrawer-gift-bar { height: 6px; border-radius: 999px; background: var(--color-bg-alt); overflow: hidden; }
.zdrawer-gift-bar span { display: block; height: 100%; background: var(--color-accent); border-radius: 999px; }
.zdrawer-gift-hint { font-size: 12px; color: var(--color-text-light); }
.zdrawer-gift-sug { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--color-border); border-radius: var(--radius-small); }
.zdrawer-gift-sug > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.zdrawer-gift-sugname { font-size: 13px; line-height: 1.3; color: var(--color-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.zdrawer-gift-sug .zdrawer-cart-qty { margin-top: 0; }
.zdrawer-gift-add { flex: 0 0 auto; border: 1px solid var(--color-border-dark); background: var(--color-bg); color: var(--color-text); border-radius: var(--radius-small); padding: 8px 12px; font-weight: 700; cursor: pointer; }
.zdrawer-gift-add:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.zdrawer-gift-claim { display: block; padding: 11px 12px; background: var(--color-accent); color: #fff; border-radius: var(--radius-small); font-weight: 700; text-align: center; text-decoration: none; }
.zdrawer-gift-claim:hover { background: var(--color-accent-dark, var(--color-accent)); color: #fff; }

.zdrawer-cart-foot { padding: 16px 18px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--color-border); }
.zdrawer-cart-sum { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.zdrawer-cart-sum span { font-size: 13px; color: var(--color-text-light); }
.zdrawer-cart-sum b { font-family: var(--font-disp); font-stretch: var(--font-disp-wdth); font-size: 22px; font-variant-numeric: tabular-nums; }
.zdrawer-cart-cta {
	display: flex; align-items: center; justify-content: center;
	width: 100%; min-height: 50px; margin-bottom: 8px;
	background: var(--color-accent); color: #fff; border-radius: var(--radius-medium);
	font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	font-size: 19px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.zdrawer-cart-cta:hover { background: var(--color-accent-dark); color: #fff; }
.zdrawer-cart-more {
	width: 100%; min-height: 44px; cursor: pointer;
	border: 1px solid var(--color-border-dark); border-radius: var(--radius-medium);
	background: var(--color-bg); color: var(--color-text);
	font-family: var(--font-body); font-size: 14px; font-weight: 700;
}
.zdrawer-cart-more:hover { border-color: var(--color-text); }

/* Vorschlags-Kopf: echte Ueberschrift statt <b> (Heading-Navigation) */
.zct-suggest-head h2 {
	margin: 0; font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	font-size: 18px; text-transform: uppercase; letter-spacing: .03em; text-align: left;
}

/* ── Kaufbox: Summen als ruhige Zeilen, Fortschritt schlank unter dem CTA ──
   Vorher: Label mit Doppelpunkt brach um, Zusatzzeilen klebten rechtsbuendig
   untereinander, der Fortschritt thronte als eigener Kasten ueber der Box und
   "Teilen" konkurrierte direkt mit dem Haupt-CTA. */
.zct-sum-sub { display: block; font-size: 12px; color: var(--color-text-light); font-weight: 400; margin-top: 1px; }
.zct-sumtable { width: 100%; border-collapse: collapse; }
.zct-sum-head td { font-size: 17px; font-weight: 700; padding-bottom: 2px; }
.zct-sum-head td:last-child { white-space: nowrap; }

/* Zusatzzeilen: Label links, Betrag auf DERSELBEN rechten Kante wie die
   Zwischensumme — als Fliesstext waren sie weder scanbar noch vergleichbar. */
.zct-sum-lines td {
	font-size: 12px; font-weight: 400; color: var(--color-text-light);
	line-height: 1.5; padding-top: 5px; vertical-align: baseline;
}
.zct-sum-lines .zct-num { text-align: right; white-space: nowrap; padding-left: 12px; font-variant-numeric: tabular-nums; }
.zct-sum-legal { padding-top: 9px !important; }
.zct-sum-legal a { color: inherit; }

/* ── Fortschritt: der geleistete Einsatz ist die Aussage ──────────────────
   Vorher stand hier "Schritt 1 von 4" mit 25%-Balken unter dem CTA — das las
   sich wie ein Anfang, obwohl der aufwendigste Teil (das Aussuchen) erledigt
   ist. Jetzt dominiert der erledigte Anteil, und der Block steht VOR dem
   Button, wo er die Klickentscheidung noch beeinflussen kann. */
/* [Owner 18.08.] Trennlinie nach oben: der Fortschritt gehoert optisch zum CTA,
   nicht zu den Summenzeilen darueber. Und der Balken laeuft in der neutralen
   Hausfarbe statt in Gruen — Gruen ist bei uns Verfuegbarkeits-/Erfolgssignal
   ("Auf Lager", "freigeschaltet"); direkt ueber dem roten CTA waere es ein
   dritter Farbton ohne eigene Bedeutung. */
.zct-progress { margin: 14px 0 12px; padding-top: 13px; border-top: 1px solid var(--color-border); }
.zct-progress-top {
	display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
	margin-bottom: 7px;
}
.zct-progress-top b { font-size: 14px; color: var(--color-text); }
.zct-progress-rest { font-size: 12px; color: var(--color-text-light); white-space: nowrap; }
.zct-progress-track {
	height: 8px; border-radius: 999px; overflow: hidden;
	background: color-mix(in srgb, var(--color-border) 70%, transparent);
}
.zct-progress-fill {
	display: block; height: 100%; border-radius: 999px;
	background: var(--color-accent); transition: width .5s ease;
}
.zct-progress-legend {
	display: flex; justify-content: space-between; gap: 10px; margin-top: 5px;
	font-size: 11px; line-height: 1.35;
}
.zct-progress-done { color: var(--color-text); font-weight: 700; }
.zct-progress-todo { color: var(--color-text-muted); text-align: right; }

/* ── Absicherung unter den Zahlarten: Zeilen, keine Kacheln ───────────────── */
.zct-assure { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--color-border); }
.zct-assure li { display: flex; align-items: flex-start; gap: 8px; margin-top: 7px; font-size: 12.5px; line-height: 1.45; color: var(--color-text-light); }
.zct-assure li:first-child { margin-top: 0; }
.zct-assure svg { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 2px; color: var(--color-text); }
.zct-assure b { color: var(--color-text); font-weight: 700; }

/* IHK-Badge (Owner 19.08.: ist ein Kaufargument): steht bei den Vertrauensankern
   in der Kaufbox, mit erklaerender Zeile statt nackt. Kein opacity — das wirkte
   verwaschen; der eigene helle Bildgrund bekommt eine saubere Karte. */
.zct-ihk { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-border); }
.zct-ihk img {
	flex: 0 0 auto; height: 34px; width: auto; display: block;
	background: #fff; padding: 3px;
	border: 1px solid var(--color-border); border-radius: var(--radius-small);
}
.zct-ihk span { font-size: 12px; line-height: 1.4; color: var(--color-text-light); }

.zct-share { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--color-border); }
.zct-sharebtn {
	display: inline-flex; align-items: center; gap: 7px; min-height: 32px;
	padding: 0; border: 0; background: none; cursor: pointer;
	font-family: var(--font-body); font-size: 13px; color: var(--color-text-light);
}
.zct-sharebtn svg { width: 15px; height: 15px; }
.zct-sharebtn:hover { color: var(--color-text); }

/* ── Vorschlaege kompakt: Zeilen statt grosser Kacheln ────────────────────
   Die Kacheln waren mit 1:1-Bildern groesser als die Warenkorb-Artikel selbst
   und zogen die Aufmerksamkeit vom Kauf weg. */
.zct-suggest-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.zct-suggest-card {
	display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto;
	align-items: center; gap: 12px;
	padding: 8px 10px; border-radius: var(--radius-medium);
	background: var(--color-bg); border: 1px solid var(--color-border);
}
.zct-suggest-media {
	/* flex-shrink:0 + feste Breite: Produkte ohne hinterlegtes Bild sollen die
	   Zeile nicht verrutschen lassen (die Liste stand sonst uneinheitlich). */
	flex: 0 0 auto;
	width: 56px; height: 56px; aspect-ratio: auto; padding: 3px;
	background: #fff;                      /* Fotogrund */
	border-radius: var(--radius-small); overflow: hidden;
}
.zct-suggest-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.zct-suggest-name { font-size: 13px; line-height: 1.3; -webkit-line-clamp: 2; }
.zct-suggest-price { margin-top: 0; font-size: 16px; white-space: nowrap; }
.zct-suggest-add { min-height: 34px; padding: 0 14px; white-space: nowrap; }
@media (max-width: 560px) {
	.zct-suggest-card { grid-template-columns: 48px minmax(0, 1fr) auto; row-gap: 6px; }
	.zct-suggest-media { width: 48px; height: 48px; }
	.zct-suggest-add { grid-column: 2 / -1; justify-self: start; }
}

/* Express-Versand-Option (nur sichtbar, wenn die Heute-Zusage gedeckt ist) */
.zct-express {
	display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
	margin-top: 14px; padding: 10px 12px;
	border: 1px solid var(--color-border); border-radius: var(--radius-medium);
	background: var(--color-bg-alt);
}
.zct-express:hover { border-color: var(--color-border-dark); }
.zct-express input { margin: 2px 0 0; width: 18px; height: 18px; accent-color: var(--color-accent); flex: 0 0 auto; }
.zct-express-body b { display: block; font-size: 14px; line-height: 1.3; }
.zct-express-sub { display: block; margin-top: 2px; font-size: 12px; color: var(--color-text-light); }
.zct-express-sub b { display: inline; color: var(--color-text); }

/* Rechtlicher Zusatz in der Summenbox: gleiche Stimme wie die Zeilen darueber */
.zct-sum-legal { font-size: 12px; color: var(--color-text-light); }
.zct-sum-legal a { color: var(--color-text-light); text-decoration: underline; text-underline-offset: 2px; }
.zct-sum-legal a:hover { color: var(--color-text); }

/* ══ GESCHENK-STUFEN (Warenkorb) ══════════════════════════════════════════
   Ersetzt den Alt-Kasten aus der Cart-Upgrade-Welt (eigener Inline-Style,
   gestrichelte Rahmen, Fliesstext mit Thumbnail, dicker Balken). Neu ist die
   Aussage oben und darunter eine Leiter mit den ECHTEN Schwellen — der Kunde
   sieht, wo er steht, was als naechstes kommt und was danach noch kaeme. */
.zct-giftbar {
	margin: 16px 0 18px; padding: 16px 18px 14px;
	border: 1px solid var(--color-border); border-radius: var(--radius-medium);
	background: var(--color-bg);
}
.zct-giftbar.is-complete { border-color: var(--color-border); }

.zct-giftbar-top { display: flex; align-items: center; gap: 16px; }
/* Die Ware ist das Verkaufsargument — entsprechend gross. */
.zct-giftbar-hero {
	flex: 0 0 auto; display: block; width: 96px; height: 96px; padding: 5px;
	background: #fff;                       /* Fotogrund */
	border: 1px solid var(--color-border); border-radius: var(--radius-medium);
	overflow: hidden;
}
.zct-giftbar-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.zct-giftbar-say { min-width: 0; }
.zct-giftbar-say b { display: block; font-size: 16px; line-height: 1.3; color: var(--color-text); }
.zct-giftbar-name {
	display: block; margin-top: 4px; font-size: 13.5px; font-weight: 700; line-height: 1.35;
	color: var(--color-text);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.zct-giftbar-meta { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--color-text-light); }
.zct-giftbar-meta b { display: inline; font-size: inherit; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text); }
.zct-giftbar.is-complete .zct-giftbar-say > b { color: var(--color-text); }

/* Leiter: Track mit absolut gesetzten Haltepunkten auf den echten Schwellen —
   gleichmaessig verteilte Punkte waeren eine Luege, die Stufen liegen nicht
   im gleichen Abstand. */
.zct-giftbar-ladder { position: relative; margin: 20px 2px 0; }
.zct-giftbar-track {
	height: 6px; border-radius: 999px; overflow: hidden;
	background: color-mix(in srgb, var(--color-border) 70%, transparent);
}
/* [Owner 18.08.] Vorher --color-success: das ist ein Oliv (#49543C hell / #7E906C
   dunkel) und hebt sich vom Track kaum ab — als "gruen" war es gar nicht erkennbar.
   Beide Fortschrittsbalken der Seite laufen jetzt in derselben neutralen Textfarbe,
   damit Fortschritt EINE Sprache spricht. Farbe traegt hier nur noch der Status
   "freigeschaltet". */
/* Neutral statt rot (Owner 18.08.): das Rot bleibt dem Kaufabschluss vorbehalten,
   der Geschenk-Fortschritt laeuft in der Textfarbe — hell auf dunkel, dunkel auf hell. */
.zct-giftbar-fill { display: block; height: 100%; border-radius: 999px; background: var(--color-text); transition: width .45s ease; }
.zct-giftbar-stop {
	position: absolute; top: -3px; transform: translateX(-50%);
	width: 12px; height: 12px; border-radius: 50%;
	background: var(--color-bg); border: 2px solid var(--color-border);
	display: flex; align-items: center; justify-content: center;
}
.zct-giftbar-stop.is-done { background: var(--color-text); border-color: var(--color-text); color: var(--color-bg); }
.zct-giftbar-stop svg { width: 7px; height: 7px; }
/* Jede Stufe zeigt ihre Ware — vorher stand dort nur ein Betrag und der Kunde
   erfuhr nie, was ihn an den weiteren Schwellen erwartet (Owner 18.08.). */
.zct-giftbar-gifts { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.zct-giftstep {
	flex: 1 1 150px; min-width: 0; display: flex; flex-direction: column; align-items: center;
	gap: 4px; padding: 10px 8px 11px; text-align: center; text-decoration: none;
	border: 1px solid var(--color-border); border-radius: var(--radius-medium);
	background: var(--color-bg); font: inherit; color: inherit;
}
/* Freigeschaltete Karten sind Buttons — die Auswahl passiert hier, nicht in einer
   zweiten Zeilenliste weiter unten (Owner 18.08.).
   BEWUSST OHNE ROTE FLAECHE: rote Buttons hier haben dem CTA "Zur Kasse" den Fokus
   genommen. Rot bleibt der Kaufabschluss; die Karten arbeiten mit Kontur und
   Textfarbe. */
button.zct-giftstep { cursor: pointer; }
button.zct-giftstep:hover { border-color: var(--color-text); }
button.zct-giftstep:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }
.zct-giftstep.is-next { border-color: var(--color-text-light); }
.zct-giftstep.is-chosen { border-color: var(--color-text); background: var(--color-bg-alt); }
.zct-giftstep-cta {
	margin-top: 4px; padding: 5px 12px; border-radius: var(--radius-small);
	border: 1px solid var(--color-text); color: var(--color-text);
	font-size: 11.5px; font-weight: 700; line-height: 1.3;
}
button.zct-giftstep:hover .zct-giftstep-cta { background: var(--color-text); color: var(--color-bg); }
.zct-giftstep-cta.is-chosen { border-color: transparent; padding: 5px 0; color: var(--color-text); }
.zct-giftstep-media {
	position: relative; display: block; width: 60px; height: 60px; padding: 3px;
	background: #fff;                       /* Fotogrund */
	border: 1px solid var(--color-border); border-radius: var(--radius-small); overflow: hidden;
}
.zct-giftstep-media .zct-giftbar-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.zct-giftstep-check {
	position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px;
	display: flex; align-items: center; justify-content: center;
	background: var(--color-text); color: var(--color-bg); border-radius: 50%;
	border: 2px solid var(--color-bg);
}
.zct-giftstep-check svg { width: 9px; height: 9px; }
.zct-giftstep-th { font-size: 12px; font-weight: 700; color: var(--color-text); }
.zct-giftstep.is-done .zct-giftstep-th { color: var(--color-text-light); }
.zct-giftstep-name {
	font-size: 11.5px; line-height: 1.3; color: var(--color-text-light);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.zct-giftstep-wert { font-size: 10.5px; color: var(--color-text-muted); }
.zct-giftstep-wert b { text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-light); }

@media (max-width: 600px) {
	.zct-giftbar { padding: 14px; }
	.zct-giftbar-say b { font-size: 14px; }
	.zct-giftbar-hero { width: 76px; height: 76px; }
	.zct-giftstep-name { display: none; }   /* schmal: Bild, Schwelle und Wert reichen */
}

/* ══ VERSAND-MODAL (Warenkorb) ════════════════════════════════════════════
   Owner 18.08.: "zzgl. Porto" fuehrte aus dem Funnel heraus. Der Inhalt kommt
   jetzt aus /shipping.php ins Modal — ohne JS bleibt der Link ein normaler Link. */
.zct-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 4vh 16px; }
.zct-modal[hidden] { display: none !important; }
.zct-modal-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .58); }
.zct-modal-box {
	position: relative; display: flex; flex-direction: column;
	width: min(760px, 100%); max-height: 92vh;
	/* Breite nach Inhalt: Versandtabellen brauchen Platz, ein Login-Formular nicht —
	   in voller Breite wirkte es verloren (Owner 19.08.). Siehe .is-schmal unten. */
	background: var(--color-bg); color: var(--color-text);
	border: 1px solid var(--color-border); border-radius: var(--radius-medium);
	box-shadow: 0 18px 50px rgba(0, 0, 0, .35); overflow: hidden;
}
.zct-modal-head {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 14px 18px; border-bottom: 1px solid var(--color-border);
}
.zct-modal-head h2 {
	margin: 0; text-align: left; font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	font-size: 20px; letter-spacing: .03em; text-transform: uppercase;
}
.zct-modal-x {
	flex: 0 0 auto; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
	background: none; border: 1px solid var(--color-border); border-radius: var(--radius-small);
	color: var(--color-text); cursor: pointer;
}
.zct-modal-x:hover { border-color: var(--color-text); }
.zct-modal-x svg { width: 16px; height: 16px; }
.zct-modal-body { overflow-y: auto; padding: 16px 18px; font-size: 14px; line-height: 1.55; }
/* Fremdinhalt kommt teils zentriert herein (Alt-Seiten zentrieren Ueberschriften
   und ganze Bloecke). Im Dialog liest sich das schlecht — hier gilt linksbuendig. */
.zct-modal-body, .zct-modal-body * { text-align: left !important; }
/* Die Versandseite bringt harte Inline-Farben mit (color:white, eigene Kastenfarben).
   Im Modal wuerde das je nach Modus unlesbar — Fremdinhalt erbt hier konsequent. */
.zct-modal-body *:not(a) { color: inherit !important; background-color: transparent !important; }
.zct-modal-body a { color: var(--color-text) !important; text-decoration: underline; text-underline-offset: 2px; }
.zct-modal-body [style] { border-color: var(--color-border) !important; }
.zct-modal-body b, .zct-modal-body strong { color: var(--color-text) !important; }
.zct-modal-body h1 { font-size: 20px !important; text-align: left !important; margin: 0 0 10px !important; }
.zct-modal-body h2 { font-size: 17px; text-align: left; margin: 18px 0 8px; }
.zct-modal-body table { width: 100%; border-collapse: collapse; margin: 8px 0 14px; }
.zct-modal-body td, .zct-modal-body th { padding: 6px 8px; border-bottom: 1px solid var(--color-border); text-align: left; }
.zct-modal-body img { max-width: 100%; height: auto; }
.zct-modal-load { color: var(--color-text-light); }
.zct-modal-foot {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 12px 18px; border-top: 1px solid var(--color-border); background: var(--color-bg-alt);
}
.zct-modal-full { font-size: 13px; color: var(--color-text-light); text-decoration: underline; text-underline-offset: 2px; }
.zct-modal-full:hover { color: var(--color-text); }
.zct-modal-ok {
	min-height: 38px; padding: 0 18px; border-radius: var(--radius-small);
	border: 1px solid var(--color-text); background: none; color: var(--color-text);
	font-family: var(--font-body); font-size: 14px; font-weight: 700; cursor: pointer;
}
.zct-modal-ok:hover { background: var(--color-text); color: var(--color-bg); }
@media (max-width: 600px) {
	.zct-modal { padding: 0; align-items: flex-end; }
	.zct-modal-box { width: 100%; max-height: 88vh; border-radius: var(--radius-medium) var(--radius-medium) 0 0; }
}

/* Login im Modal: das eingebettete Original-Formular auf v2-Formen bringen */
.zct-modal-note { margin: 0 0 14px; font-size: 13px; color: var(--color-text-light); }
.zct-modal-err {
	margin: 0 0 14px; padding: 10px 12px; font-size: 13px; font-weight: 700;
	color: var(--color-accent-text, var(--color-accent));
	border: 1px solid var(--color-accent); border-radius: var(--radius-small);
}
.zct-modal-body form input[type="text"],
.zct-modal-body form input[type="email"],
.zct-modal-body form input[type="password"] {
	width: 100%; min-height: 44px; padding: 0 12px; margin: 6px 0 12px;
	background: var(--color-bg) !important; color: var(--color-text) !important;
	border: 1px solid var(--color-border); border-radius: var(--radius-small);
	font-family: var(--font-body); font-size: 15px;
}
/* [Owner 26.08.] Auch <button type="submit"> — die Regel darueber
   (.zct-modal-body *:not(a) { background: transparent !important }) neutralisiert
   Farben aus nachgeladenen Inhalten, damit CMS-Seiten im Modal lesbar bleiben.
   Sie traf aber auch den Anmelde-Knopf: schwarz auf schwarz, nur der Text war
   zu sehen. input[type=submit] war hier schon ausgenommen, das v2-Anmelde-
   formular benutzt jedoch ein <button>. Gilt fuer beide Login-Modale
   (Warenkorb und Checkout). */
.zct-modal-body form input[type="submit"],
.zct-modal-body form button[type="submit"] {
	min-height: 46px; padding: 0 22px; border: 0; border-radius: var(--radius-small);
	background: var(--color-accent) !important; color: #fff !important;
	/* .zct-modal-body * erzwingt linksbuendig fuer nachgeladene Texte — im Knopf
	   gehoert die Beschriftung aber in die Mitte. */
	text-align: center !important;
	font-family: var(--font-body); font-size: 15px; font-weight: 700; cursor: pointer;
}
.zct-modal-body form input[type="submit"]:hover,
.zct-modal-body form button[type="submit"]:hover { opacity: .9; }
.zct-modal-body form input[type="submit"]:disabled,
.zct-modal-body form button[type="submit"]:disabled { opacity: .5; cursor: default; }

/* Gewaehlter Express als eigene Kostenzeile (Owner 19.08.) */
.zct-sum-express td { font-weight: 700; color: var(--color-text) !important; }

/* Schmale Variante fuer Formular-Dialoge (Login) */
.zct-modal-box.is-schmal { width: min(420px, 100%); }
.zct-modal-box.is-schmal .zct-modal-body { padding: 18px; }
.zct-modal-neu { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--color-border); font-size: 13px; color: var(--color-text-light); }
/* [Owner 26.08.] Zwischenschritt "Passwort vergessen" im Anmelde-Modal. */
.zct-modal-frage p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; }
.zct-modal-frage button {
	width: 100%; min-height: 46px; margin-top: 8px; border-radius: var(--radius-small);
	font-family: var(--font-body); font-size: 15px; font-weight: 700; cursor: pointer;
	text-align: center !important;
}
.zct-modal-frage .zct-modal-ja {
	border: 0; background: var(--color-accent) !important; color: #fff !important;
}
.zct-modal-frage .zct-modal-ja:hover { opacity: .9; }
.zct-modal-frage .zct-modal-ja:disabled { opacity: .5; cursor: default; }
.zct-modal-frage .zct-modal-nein {
	border: 1px solid var(--color-border); background: var(--color-bg) !important; color: var(--color-text) !important;
}
.zct-modal-frage .zct-modal-nein:hover { background: var(--color-bg-alt) !important; }
.zct-modal-neu a { color: var(--color-text); text-decoration: underline; text-underline-offset: 2px; }

/* ══ LOGIN / KONTO ANLEGEN (v2) ═══════════════════════════════════════════
   Ersetzt 49 Inline-Styles und harte Hex-Werte der Alt-Seite. Zwei Karten
   nebeneinander: links der schnelle Weg (Anmelden), rechts die Neuanlage —
   vorher lag der Login in einer 350px-Spalte ueber einem 800px-Block, was auf
   dem Desktop unausgewogen wirkte und den Login klein aussehen liess. */
.zlog {
	display: grid; gap: 22px; align-items: start;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
	max-width: 1100px; margin: 8px auto 40px;
}
.zlog-card {
	border: 1px solid var(--color-border); border-radius: var(--radius-medium);
	background: var(--color-bg); padding: 24px;
}
.zlog-card h1, .zlog-card h2 {
	margin: 0; text-align: left;
	font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	font-size: 27px; letter-spacing: .02em; text-transform: uppercase;
}
.zlog-sub { margin: 4px 0 18px; font-size: 13.5px; color: var(--color-text-light); }

.zlog-form { display: block; }
.zlog-field { margin-bottom: 14px; }
.zlog-field > label,
.zlog-labelrow label { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 700; color: var(--color-text); }
.zlog-labelrow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.zlog-labelrow a { font-size: 12.5px; font-weight: 400; color: var(--color-text-light); text-decoration: underline; text-underline-offset: 2px; }
.zlog-labelrow a:hover { color: var(--color-text); }
/* [Lighthouse 20.08.] --color-text-muted (#949494) ergibt 3,03:1 — unter den
   4,5:1 der WCAG AA. Fuer echten Text ist das zu wenig; muted bleibt
   Platzhaltern vorbehalten. Dieselbe Korrektur wie am 17.08. fuer die
   Kategorie- und PDP-Texte. */
.zlog-opt { font-weight: 400; color: var(--color-text-light); }

/* 48px statt der alten 20px — darunter ist ein Feld auf dem Handy nicht bedienbar. */
.zlog-field input,
.zlog-field select {
	width: 100%; min-height: 48px; padding: 0 13px;
	background: var(--color-bg); color: var(--color-text);
	border: 1px solid var(--color-border); border-radius: var(--radius-small);
	font-family: var(--font-body); font-size: 15px; box-sizing: border-box;
}
.zlog-field select { padding-right: 34px; }
.zlog-field input:focus,
.zlog-field select:focus { outline: 2px solid var(--color-text); outline-offset: 1px; border-color: var(--color-text); }
.zlog-field input:user-invalid { border-color: var(--color-accent); }

.zlog-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.zlog-row--plz { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }

.zlog-check { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; font-size: 13px; line-height: 1.45; color: var(--color-text-light); cursor: pointer; }
.zlog-check[hidden] { display: none !important; } /* hidden gewinnt gegen display:flex (Adress-Modal) */
.zlog-check input { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--color-text); cursor: pointer; }
.zlog-check a { color: var(--color-text); text-decoration: underline; text-underline-offset: 2px; }
.zlog-check--dsgvo {
	padding: 13px 14px; margin-top: 4px;
	border: 1px solid var(--color-border); border-radius: var(--radius-small);
	background: var(--color-bg-alt);
}
.zlog-check--dsgvo em { display: block; margin-top: 5px; font-style: normal; font-size: 12px; color: var(--color-text-light); }

.zlog-pflicht { margin: 2px 0 16px; font-size: 12px; color: var(--color-text-light); }

.zlog-btn {
	width: 100%; min-height: 50px; border: 0; border-radius: var(--radius-small);
	font-family: var(--font-body); font-size: 15px; font-weight: 700; cursor: pointer;
}
.zlog-btn--primary { background: var(--color-accent); color: #fff; }
.zlog-btn--primary:hover { opacity: .92; }

.zlog-error {
	margin: 0 0 16px; padding: 11px 13px; font-size: 13.5px; font-weight: 700;
	color: var(--color-accent-text, var(--color-accent));
	border: 1px solid var(--color-accent); border-radius: var(--radius-small);
}

.zlog-perks { list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--color-border); }
.zlog-perks li { display: flex; align-items: flex-start; gap: 9px; margin-top: 9px; font-size: 13px; line-height: 1.45; color: var(--color-text-light); }
.zlog-perks li:first-child { margin-top: 0; }
.zlog-perks svg { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 2px; color: var(--color-text); }

.zlog-turnstile { display: flex; justify-content: center; margin: 6px 0 14px; }

/* Gewinnspiel: nur sichtbar, solange der Newsletter angehakt ist */
.zlog-contest { display: none; margin: 0 0 16px; padding: 13px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-small); }
.zlog-contest.show { display: block; }
.zlog-contest .zlog-check { margin-bottom: 8px; }
.zlog-contest-links { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; }
.zlog-contest-links a { color: var(--color-text-light); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 900px) {
	.zlog { grid-template-columns: 1fr; gap: 16px; margin-bottom: 28px; }
	.zlog-card { padding: 18px; }
	.zlog-card h1, .zlog-card h2 { font-size: 23px; }
}
@media (max-width: 520px) {
	.zlog-row, .zlog-row--plz { grid-template-columns: 1fr; gap: 0; }
}

/* ══ KONTO (v2) [B15] ════════════════════════════════════════════════════
   Kundenbereich: Uebersicht als Kachel-Grid, Unterseiten als schmale Karten.
   Die FORM-Sprache kommt aus der LOGIN-Region (.zlog-card/-field/-btn/-error)
   — bewusste Wiederverwendung, ein zweites Formular-CSS waere eine zweite
   Wahrheit. Hier stehen nur Konto-EIGENE Klassen. */
.zac { max-width: 1180px; margin: 8px auto 40px; }
.zac--narrow { max-width: 560px; }
.zac--mid { max-width: 900px; }
/* Uebersicht: Desktop-Breite ausnutzen (Owner 25.08.) — breitere Spur,
   groessere Mindest-Kachelbreite ergibt 4 Spalten ab ~1500px. */
.zac--wide { max-width: 1560px; }
.zac--wide .zac-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.zac-head { display: flex; align-items: baseline; justify-content: space-between;
	gap: 6px 16px; flex-wrap: wrap; margin: 4px 0 16px; }
.zac-head h1 { margin: 0; text-align: left;
	font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	font-size: clamp(24px, 2.4vw, 32px); letter-spacing: .02em; text-transform: uppercase; }
.zac-head-sub { margin: 0; font-size: 13.5px; color: var(--color-text-light); }
.zac-back { font-size: 13px; color: var(--color-text-light);
	text-decoration: underline; text-underline-offset: 2px; }
.zac-back:hover { color: var(--color-text); }

.zac-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.zac-tile { display: flex; gap: 14px; align-items: flex-start; text-align: left;
	border: 1px solid var(--color-border); border-radius: var(--radius-medium);
	background: var(--color-bg); padding: 18px; color: var(--color-text); }
a.zac-tile:hover { border-color: var(--color-border-dark); }
.zac-tile-icon { flex: 0 0 auto; width: 46px; height: 46px;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--color-border); border-radius: 50%;
	background: var(--color-bg-alt); color: var(--color-text); }
.zac-tile-icon svg { width: 22px; height: 22px; }
.zac-tile-icon--accent { color: var(--color-accent-text, var(--color-accent)); }
.zac-tile-body { min-width: 0; flex: 1 1 auto; }
.zac-tile h2 { margin: 0 0 3px; text-align: left;
	font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	font-size: 17.5px; letter-spacing: .02em; text-transform: uppercase; }
.zac-tile p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--color-text-light); }
.zac-tile-value { display: block; margin-top: 6px;
	font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Gutschein-/Aktionscode: dezente Pill statt Display-Zahl (Owner 25.08. —
   der grosse Code wirkte fehlplatziert) */
.zac-codezeile { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; }
.zac-code { display: inline-block; padding: 4px 14px;
	border: 1px solid var(--color-border-dark); border-radius: var(--radius-small);
	background: var(--color-bg-alt); font-size: 13.5px; font-weight: 700;
	letter-spacing: .14em; }
.zac-codezeile .zac-code { margin-top: 0; }
.zac-copy { padding: 5px 12px; border: 1px solid var(--color-border-dark);
	border-radius: var(--radius-small); background: var(--color-bg); color: var(--color-text);
	font-family: var(--font-body); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.zac-copy:hover { border-color: var(--color-text); }
.zac-copy.ok { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.zac-count { display: inline-flex; align-items: center; justify-content: center;
	min-width: 19px; height: 19px; padding: 0 5px; margin-left: 6px;
	border-radius: 999px; background: var(--color-accent); color: #fff;
	font-family: var(--font-body); font-size: 11px; font-weight: 700; vertical-align: 2px; }
.zac-chip { display: inline-block; margin-top: 6px; padding: 3px 10px;
	border: 1px solid var(--color-border-dark); border-radius: 999px;
	font-size: 12px; font-weight: 700; color: var(--color-text);
	align-self: flex-start; /* im .zac-addr-Flexstapel nicht auf Kartenbreite dehnen */ }
.zac-note { display: block; margin-top: 5px; font-size: 11px; color: var(--color-text-light); }
.zac-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.zac-saldo { display: block; margin-top: 8px;
	font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	font-size: 38px; font-weight: 700; font-variant-numeric: tabular-nums;
	color: var(--color-text); }
.zac-saldo--neg { color: var(--color-accent-text, var(--color-accent)); }
.zac-tablewrap { width: 100%; overflow-x: auto; }
.zac-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.zac-table th, .zac-table td { padding: 9px 10px; text-align: left;
	border-bottom: 1px solid var(--color-border); }
.zac-table th { font-size: 12.5px; color: var(--color-text-light); font-weight: 600; }
.zac-table tr:last-child td { border-bottom: none; }
.zac-table-num { text-align: right !important; font-weight: 700; white-space: nowrap; }
.zac-amount--plus { color: var(--color-success); }
.zac-amount--minus { color: var(--color-accent-text, var(--color-accent)); }
.zac-table-leer { text-align: center !important; padding: 20px !important; color: var(--color-text-light); }
.zac-ticketmeta { margin-top: 10px; font-size: 13px; color: var(--color-text-light); }
.zac-ticketstate { padding: 8px 10px; border-radius: var(--radius-small);
	margin-bottom: 8px; font-weight: 700; }
.zac-ticketstate--used { border: 1px solid var(--color-success); color: var(--color-success); }
.zac-ticketstate--fresh { border: 1px solid var(--color-border-dark); color: var(--color-text); }
.zac-ticketdl { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--color-border); }
.zac-hints { margin: 0; padding-left: 20px; line-height: 1.8; font-size: 13px; color: var(--color-text-light); }
.zac-hints a { text-decoration: underline; text-underline-offset: 2px; }

/* ── TEXTSEITEN (.ztext) + WISSEN-OVERRIDES [B15] ──────────────────────────
   DB-Textseiten (AGB/Datenschutz/Impressum/Batterie): Lesetypografie statt
   Alt-Zentrierung. Wissen: Widescreen + Abstand unter der zentralen H1
   (deren Inline-margin-bottom:-5px schob die Suchbox in die Unterlaengen). */
.ztext { max-width: 880px; margin: 10px auto 48px; text-align: left;
	font-size: 15px; line-height: 1.7; color: var(--color-text); }
.ztext h1, .ztext h2, .ztext h3, .ztext h4 { text-align: left; margin: 1.6em 0 .5em;
	font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	letter-spacing: .02em; line-height: 1.2; }
.ztext h1 { font-size: 28px; margin-top: .4em; }
.ztext h2 { font-size: 22px; }
.ztext h3 { font-size: 18px; }
.ztext h4 { font-size: 16px; }
.ztext p { margin: 0 0 1em; }
.ztext ul, .ztext ol { margin: 0 0 1em; padding-left: 22px; }
.ztext li { margin-bottom: .35em; }
.ztext a { text-decoration: underline; text-underline-offset: 2px; }
.ztext hr { border: 0; border-top: 1px solid var(--color-border); margin: 1.6em 0; }
.ztext table { max-width: 100%; overflow-x: auto; display: block; border-collapse: collapse; }
.ztext img { max-width: 100%; height: auto; }

/* wissen.php traegt einen eigenen <style>-Block im BODY — der steht nach dieser
   Datei und gewinnt bei gleicher Spezifitaet. Overrides muessen deshalb
   spezifischer sein als dessen Ein-Klassen-Selektoren. */
div.wissen-wrap { max-width: 1560px; }
.wissen-wrap .wissen-search { margin-top: 22px; }

/* ── KONTO — SUPPORT-CHAT (.zsc-*) [B15-R3] ────────────────────────────────
   Chat-Modal statt Support-Seite (Owner 25.08.) — includes/zsupport_chat.php,
   geladen von account_v2 + account_history_v2. Desktop: Messenger-Panel unten
   rechts; mobil Vollbild. Nutzt die Endpunkte der Support-Seite unveraendert. */
.zsc-overlay { position: fixed; inset: 0; z-index: 10060; background: rgba(0,0,0,.45); }
/* hidden-Attribut MUSS gewinnen — display:flex unten wuerde es sonst aushebeln
   und das Panel staende dauerhaft offen (Headless-Befund 25.08.). */
.zsc[hidden], .zsc-overlay[hidden] { display: none !important; }
.zsc { position: fixed; right: 22px; bottom: 22px; z-index: 10061;
	display: flex; flex-direction: column;
	width: min(430px, calc(100vw - 24px)); height: min(640px, calc(100vh - 44px));
	background: var(--color-bg); color: var(--color-text);
	border: 1px solid var(--color-border); border-radius: var(--radius-medium);
	box-shadow: 0 14px 44px rgba(0,0,0,.3); overflow: hidden; }
html.zsc-offen { overflow: hidden; }
.zsc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 13px 16px; background: #000; color: #fff; flex: 0 0 auto; }
.zsc-head-text { display: flex; align-items: center; gap: 10px; min-width: 0; }
.zsc-head-text b { font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	font-size: 17px; letter-spacing: .04em; text-transform: uppercase; }
.zsc-order { font-size: 12px; padding: 3px 10px; border: 1px solid #444; border-radius: 999px;
	color: #ddd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zsc-close { flex: 0 0 auto; width: 32px; height: 32px; border: 0; border-radius: 999px;
	background: transparent; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.zsc-close:hover { background: #222; }
.zsc-verlauf { flex: 1 1 auto; overflow-y: auto; padding: 16px;
	display: flex; flex-direction: column; gap: 10px; background: var(--color-bg-alt); }
.zsc-msg { max-width: 86%; padding: 10px 13px; border-radius: var(--radius-medium);
	font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: break-word; }
.zsc-msg--bot { align-self: flex-start; background: var(--color-bg);
	border: 1px solid var(--color-border); border-bottom-left-radius: var(--radius-small); }
.zsc-msg--user { align-self: flex-end; background: var(--color-primary);
	color: var(--color-text-inverse); border-bottom-right-radius: var(--radius-small); }
.zsc-msg small { color: var(--color-text-light); }
.zsc-tippt { color: var(--color-text-light); font-style: italic; }
.zsc-ki-label { display: block; margin-bottom: 4px; font-size: 10.5px; font-weight: 700;
	letter-spacing: .09em; text-transform: uppercase; color: var(--color-text-light); }
.zsc-ki-text { display: block; }
.zsc-treffer { margin-top: 9px; padding: 9px 11px; border: 1px solid var(--color-border);
	border-radius: var(--radius-small); background: var(--color-bg-alt); white-space: normal; }
.zsc-treffer a { text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }
.zsc-aktionen { align-self: flex-start; display: flex; flex-wrap: wrap; gap: 8px; }
.zsc-btn { padding: 8px 14px; border: 1px solid var(--color-border-dark);
	border-radius: 999px; background: var(--color-bg); color: var(--color-text);
	font-family: var(--font-body); font-size: 13px; font-weight: 700; cursor: pointer; }
.zsc-btn:hover { border-color: var(--color-text); }
.zsc-btn--primaer { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.zsc-btn--primaer:hover { opacity: .92; }
.zsc-anmerkung { display: block; width: 100%; margin-top: 9px; padding: 8px 10px;
	border: 1px solid var(--color-border); border-radius: var(--radius-small);
	background: var(--color-bg); color: var(--color-text);
	font-family: var(--font-body); font-size: 13px; resize: vertical; box-sizing: border-box; }
.zsc-eingabe { display: flex; align-items: flex-end; gap: 8px; padding: 12px 14px;
	border-top: 1px solid var(--color-border); background: var(--color-bg); flex: 0 0 auto; }
.zsc-eingabe textarea { flex: 1 1 auto; min-height: 44px; max-height: 120px; padding: 11px 13px;
	border: 1px solid var(--color-border); border-radius: var(--radius-medium);
	background: var(--color-bg); color: var(--color-text);
	font-family: var(--font-body); font-size: 14px; resize: none; box-sizing: border-box; }
.zsc-eingabe textarea:focus { outline: 2px solid var(--color-text); outline-offset: 1px; }
.zsc-senden { flex: 0 0 auto; width: 44px; height: 44px; border: 0; border-radius: 999px;
	background: var(--color-accent); color: #fff; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center; }
.zsc-senden svg { width: 20px; height: 20px; }
.zsc-senden:disabled { opacity: .55; cursor: wait; }
.zsc-fuss { padding: 8px 14px 11px; font-size: 11.5px; color: var(--color-text-light);
	background: var(--color-bg); text-align: center; flex: 0 0 auto; }
.zsc-fuss a { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 700px) {
	.zsc { right: 0; bottom: 0; width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
}

/* ── NEWSLETTER-BESTAETIGUNGSSTRECKE (.znl-*) [B15] ────────────────────────
   newsletter_process/confirm/erfolg — geteilte Dateien, Markup dort nur in
   zite-Zweigen bzw. DesignVersion-gated geaendert. Der Gutschein-Coupon
   ersetzt die Alt-Gruen-Box (#759372) durch EIN ROT. */
.znl-wrap { max-width: 720px; margin: 8px auto 40px; text-align: center; }
.znl-h1 { margin: 6px 0 14px; text-align: center;
	font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	font-size: clamp(22px, 2.6vw, 32px); letter-spacing: .02em; text-transform: uppercase; }
.znl-sub { margin: 0 auto; max-width: 62ch; text-align: center;
	font-size: 15px; font-weight: 400; line-height: 1.65; color: var(--color-text); }
.znl-coupon { width: 270px; margin: 0 auto; padding: 20px 0; }
.znl-coupon-box { border: dashed 2px var(--color-accent); border-radius: var(--radius-small);
	padding: 18px 5px; }
.znl-coupon-code { margin: 0; text-align: center; text-transform: uppercase;
	font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	font-size: 26px; letter-spacing: .04em;
	color: var(--color-accent-text, var(--color-accent)); }
.znl-freebie { max-width: 520px; margin: 10px auto 14px; display: flex; gap: 12px;
	align-items: center; text-align: left; line-height: 1.3; padding: 12px;
	border: 1px solid var(--color-border); border-radius: var(--radius-small);
	background: var(--color-bg); }
.znl-freebie-img { width: 72px; height: 72px; flex: 0 0 auto; border-radius: var(--radius-small);
	background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.znl-freebie-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.znl-freebie-note { font-size: 12px; color: var(--color-text-light); }
.znl-img { display: block; width: 100%; max-width: 400px; height: auto; margin: 10px auto 0;
	border-radius: var(--radius-medium); }

/* ── KONTO — HAENDLER (.dealer-*) [B15] ────────────────────────────────────
   Fork account_dealer_v2.php — Klassennamen der Alt-Seite beibehalten,
   token-basiert neu gestylt. Staffel-Farben (Bronze/Gold/...) sind DATEN
   des Staffelsystems, keine Markenfarben — sie bleiben als Hex bestehen. */
.zac .dealer-card { background: var(--color-bg); border: 1px solid var(--color-border);
	border-radius: var(--radius-medium); padding: 22px; margin-bottom: 14px; }
.zac .dealer-card-header { display: flex; align-items: center; justify-content: space-between;
	margin-bottom: 18px; flex-wrap: wrap; gap: 12px; }
.zac .dealer-card-title, .zac .prognose-title { margin: 0; text-align: left;
	font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	font-size: 20px; letter-spacing: .02em; text-transform: uppercase; }
.zac .tier-badge { display: inline-flex; align-items: center; gap: 8px;
	padding: 7px 16px; border-radius: 999px; font-weight: 700; font-size: 15px; }
.zac .tier-badge-bronze { background: #CD7F32; color: #fff; }
.zac .tier-badge-silber { background: #A8A9AD; color: #1D1D1F; }
.zac .tier-badge-gold { background: #D4AF37; color: #1D1D1F; }
.zac .tier-badge-platin { background: #8E9196; color: #fff; }
.zac .tier-badge-diamant { background: #B9F2FF; color: #1D1D1F; }
.zac .dealer-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.zac .stat-box { text-align: center; padding: 15px; background: var(--color-bg-alt);
	border-radius: var(--radius-small); }
.zac .stat-value { font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	font-size: 26px; font-weight: 700; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.zac .stat-label { font-size: 13px; color: var(--color-text-light); }
.zac .prognose-header { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.zac .prognose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.zac .prognose-item { padding: 15px; background: var(--color-bg-alt); border-radius: var(--radius-small); }
.zac .prognose-item-label { font-size: 13px; color: var(--color-text-light); margin-bottom: 5px; }
.zac .prognose-item-value { font-size: 19px; font-weight: 700; }
.zac .prognose-item-value .next-tier-badge { display: inline-block; padding: 4px 12px;
	border-radius: 999px; font-size: 13px; margin-left: 8px; }
.zac .progress-section { margin-top: 10px; }
.zac .progress-label { display: flex; justify-content: space-between; font-size: 13px;
	color: var(--color-text-light); margin-bottom: 8px; }
.zac .progress-bar-container { width: 100%; height: 20px; background: var(--color-bg-alt);
	border: 1px solid var(--color-border); border-radius: 999px; overflow: hidden; position: relative; }
.zac .progress-bar-fill { height: 100%; border-radius: 999px; background: var(--color-accent); }
.zac .progress-bar-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	font-size: 12px; font-weight: 700; }
.zac .next-tier-info { margin-top: 14px; padding: 15px; background: var(--color-bg-alt);
	border-radius: var(--radius-small); text-align: center; }
.zac .next-tier-highlight { font-size: 17px; font-weight: 700; }
.zac .max-tier-message { text-align: center; padding: 20px; margin-top: 14px;
	border: 1px solid var(--color-border-dark); border-radius: var(--radius-small); }
.zac .max-tier-message h3 { margin: 0 0 10px; font-family: var(--font-disp);
	font-stretch: var(--font-disp-wdth); font-size: 19px; text-transform: uppercase; }
.zac .staffel-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.zac .staffel-table th { text-align: left; padding: 11px 14px; font-size: 12.5px;
	color: var(--color-text-light); font-weight: 600;
	border-bottom: 2px solid var(--color-border-dark); }
.zac .staffel-table td { padding: 11px 14px; border-bottom: 1px solid var(--color-border); }
.zac .staffel-table tr:last-child td { border-bottom: none; }
.zac .staffel-table tr.current-tier td { font-weight: 700; }
.zac .tier-name-cell { display: flex; align-items: center; gap: 10px; }
.zac .tier-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.zac .tier-current-marker { font-size: 11px; background: var(--color-accent); color: #fff;
	padding: 2px 8px; border-radius: 999px; margin-left: auto; }
.zac .info-box { display: flex; align-items: flex-start; gap: 12px; margin-top: 14px;
	padding: 15px 18px; border: 1px solid var(--color-border);
	border-radius: var(--radius-medium); background: var(--color-bg); margin-bottom: 14px; }
.zac .info-box-text { font-size: 13px; color: var(--color-text-light); line-height: 1.5; }
@media (max-width: 600px) {
	.zac .prognose-grid { grid-template-columns: 1fr; }
	.zac .staffel-table th, .zac .staffel-table td { padding: 10px 8px; font-size: 13px; }
}

/* Unterseiten-Aktionen: schlanke Zweitknoepfe neben dem .zlog-btn-Primaerweg */
.zac-btnrow { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.zac-btn-ghost { display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 0 18px; cursor: pointer;
	border: 1px solid var(--color-border-dark); border-radius: var(--radius-small);
	background: var(--color-bg); color: var(--color-text);
	font-family: var(--font-body); font-size: 14px; font-weight: 700; }
.zac-btn-ghost:hover { border-color: var(--color-text); }

/* Erfolg/Systemmeldungen (messageStack) im Karten-Look, EIN ROT nur fuer Fehler */
.zac-msg { margin: 0 0 16px; padding: 11px 13px; font-size: 13.5px;
	border: 1px solid var(--color-border-dark); border-radius: var(--radius-small); }
.zac-pwhinweis { display: flex; align-items: center; justify-content: space-between;
	gap: 10px 16px; flex-wrap: wrap; }
.zac-pwhinweis-aktionen { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.zac-pwhinweis-aktionen .btn { display: inline-flex; align-items: center; padding: 9px 16px;
	font-size: 13px; font-weight: 700; border: 0; border-radius: var(--radius-small);
	background: var(--color-accent); color: #fff; cursor: pointer; }
.zac-pwhinweis-aktionen .btn:hover { opacity: .92; }
.zac-pwhinweis-aktionen .zac-btn-ghost { min-height: 36px; padding: 0 14px; font-size: 13px; }

/* Adressbuch (R2, Owner 25.08.): breite Spur, Karten mit Icon-Kopf, Aktionen
   hinter Trennlinie; Anlegen/Bearbeiten laeuft im Modal (.zabm). */
.zac-addrgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; }
.zac-addr { display: flex; flex-direction: column; gap: 12px; text-align: left;
	border: 1px solid var(--color-border); border-radius: var(--radius-medium);
	background: var(--color-bg); padding: 20px; }
.zac-addr--default { border-color: var(--color-border-dark); }
.zac-addr-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.zac-addr-icon { display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border: 1px solid var(--color-border); border-radius: 50%;
	background: var(--color-bg-alt); color: var(--color-text); }
.zac-addr-icon svg { width: 19px; height: 19px; }
.zac-addr-kopf .zac-chip { margin-top: 0; }
.zac-addr-text { flex: 1 1 auto; font-size: 14px; line-height: 1.6; color: var(--color-text); }
.zac-addr-text b { font-size: 15px; }
.zac-addr-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
	border-top: 1px solid var(--color-border); padding-top: 12px; }
.zac-addr-actions .zac-btn-ghost { min-height: 36px; padding: 0 14px; font-size: 13px; font-weight: 400; }
.zac-addr-actions form { display: contents; }
.zabm--klein { width: min(430px, calc(100vw - 24px)); }
.zabd-aktionen { display: flex; gap: 10px; margin-top: 6px; }
.zabd-aktionen .zlog-btn { flex: 1 1 auto; width: auto; display: inline-flex;
	align-items: center; justify-content: center; }
.zabd-aktionen .zac-btn-ghost { flex: 0 0 auto; }

/* Adress-Modal: zentrierte Karte, zlog-Formsprache */
.zabm-overlay { position: fixed; inset: 0; z-index: 10060; background: rgba(0,0,0,.45); }
.zabm-overlay[hidden], .zabm[hidden] { display: none !important; }
.zabm { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 10061;
	width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 40px); overflow-y: auto;
	background: var(--color-bg); color: var(--color-text);
	border: 1px solid var(--color-border); border-radius: var(--radius-medium);
	box-shadow: 0 14px 44px rgba(0,0,0,.3); padding: 22px; }
.zabm-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.zabm-kopf h2 { margin: 0; text-align: left; font-family: var(--font-disp);
	font-stretch: var(--font-disp-wdth); font-size: 22px; letter-spacing: .02em; text-transform: uppercase; }
.zabm-close { width: 34px; height: 34px; border: 0; border-radius: 999px; cursor: pointer;
	background: var(--color-bg-alt); color: var(--color-text); font-size: 21px; line-height: 1; }
.zabm-close:hover { background: var(--color-border); }
a.zac-addr--new { align-items: center; justify-content: center; text-align: center;
	gap: 6px; min-height: 170px; color: var(--color-text-light);
	border-style: dashed; }
a.zac-addr--new:hover { color: var(--color-text); border-color: var(--color-border-dark); }
a.zac-addr--new svg { width: 30px; height: 30px; }

@media (max-width: 700px) {
	.zac-grid, .zac-addrgrid { grid-template-columns: 1fr; gap: 10px; }
	.zac-tile { padding: 15px; }
	.zac-head { margin-bottom: 12px; }
}

/* ── KONTO — BESTELLUNGEN (.zoh) [B15] ─────────────────────────────────────
   Fork templatecontent/account_history_v2.php. Die Alt-Klassennamen
   (order-container/order-header/products-table/status-chip/...) bleiben
   BEWUSST erhalten — das Bestell-JS (Accordion, Ticket-Modal, Status-Loader)
   liest sie. Hier nur neu gestylt, alles .zoh-gescoped. */
.zoh .order-container { border: 1px solid var(--color-border); border-radius: var(--radius-medium);
	background: var(--color-bg); margin: 0 0 14px; overflow: hidden; }
.zoh .order-header { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap;
	padding: 12px 44px 12px 16px; cursor: pointer; position: relative;
	font-size: 14px; background: var(--color-bg-alt); }
.zoh-head-left { display: flex; flex-direction: column; gap: 4px; min-width: 190px; }
.zoh-head-left .zoh-chip { align-self: flex-start; }
.zoh-head-meta { font-weight: 400; font-size: 12.5px; color: var(--color-text-light); }
.zoh-head-thumbs { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; }
.zoh-head-thumbs img, .zoh-thumb-leer, .zoh-thumb-mehr { width: 44px; height: 44px;
	border: 1px solid var(--color-border); border-radius: var(--radius-small);
	background: #fff; object-fit: contain; flex: 0 0 auto; }
.zoh-thumb-mehr { display: inline-flex; align-items: center; justify-content: center;
	background: var(--color-bg); color: var(--color-text-light);
	font-size: 12.5px; font-weight: 700; }
.zoh-head-total { font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	font-size: 20px; font-weight: 700; color: var(--color-text); white-space: nowrap; }
.zoh-head-pay { min-height: 38px; display: inline-flex; align-items: center; padding: 0 16px; }
.zoh .order-header:after { content: "\203A"; font-size: 22px; line-height: 1;
	position: absolute; right: 18px; transform: rotate(90deg); transition: transform .2s ease; }
.zoh .order-header.collapsed:after { transform: rotate(0deg); }
.zoh .order-header-right { margin-left: auto; display: flex; align-items: center;
	gap: 14px; font-weight: 400; font-size: 13px; color: var(--color-text-light); }
.zoh .zoh-invlink { text-decoration: underline; text-underline-offset: 2px; color: var(--color-text); }
.zoh-chip { display: inline-block; padding: 3px 12px; border-radius: 999px;
	font-size: 12.5px; font-weight: 700; color: #fff; }
.zoh-st--new, .zoh-st--due { background: var(--color-accent); }
/* Bezahlt ist ein POSITIVER Zustand (Owner 25.08.: "Warum ist bezahlt rot?!") —
   Rot bleibt der Aufforderung "Zahlung offen" vorbehalten. */
.zoh-st--paid { background: var(--color-success); }
.zoh-st--ok { background: var(--color-success); }
.zoh-st--proc { background: var(--color-warning); color: #1D1D1F; }
.zoh-small { font-size: 12px; }
.zoh .order-content { display: none; }
.zoh-body { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); }
.zoh-body-main { padding: 14px 16px; min-width: 0; }
.zoh-body-side { padding: 16px; display: flex; flex-direction: column; gap: 16px;
	background: var(--color-bg-alt); border-left: 1px solid var(--color-border);
	font-size: 13.5px; line-height: 1.6; text-align: left; }
.zoh-side-titel { margin: 0 0 6px; font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	font-size: 14px; letter-spacing: .03em; text-transform: uppercase; }
.zoh-side-pay { display: block; text-align: center; padding: 10px 14px; margin-bottom: 10px; }
.zoh-side-summen { margin-top: auto; border-top: 1px solid var(--color-border); padding-top: 12px; }
.zoh-side-zeile { display: flex; justify-content: space-between; gap: 12px; }
.zoh-side-gesamt { margin-top: 4px; font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	font-size: 20px; font-weight: 700; }
.zoh .order-section-title { display: inline-block; margin: 0 0 6px;
	font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	font-size: 15px; letter-spacing: .02em; text-transform: uppercase; }
.zoh .order-products { padding: 14px 16px; }
.zoh .products-table { width: 100%; border-collapse: collapse; }
.zoh .products-table td { padding: 10px; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.zoh .products-table tr:last-child td { border-bottom: none; }
.zoh .product-image { width: 70px; height: 70px; object-fit: contain; max-width: none;
	border: 1px solid var(--color-border); border-radius: var(--radius-small); background: #fff; }
.zoh .product-name { font-weight: 700; font-size: 14.5px; margin-bottom: 4px; }
.zoh .product-sku { color: var(--color-text-light); font-size: 12px; margin-bottom: 4px; }
.zoh .product-quantity { display: inline-block; padding: 2px 8px; font-size: 12px;
	background: var(--color-bg-alt); border-radius: var(--radius-small); }
.zoh .product-price { font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	font-size: 19px; white-space: nowrap; text-align: right; }
.zoh .product-actions { text-align: right; padding-top: 5px; }
.zoh .order-actions { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center;
	justify-content: flex-start; gap: 8px; border-top: 1px solid var(--color-border); padding-top: 14px; }
.zoh .btn { display: inline-block; padding: 9px 16px; border-radius: var(--radius-small);
	font-family: var(--font-body); font-size: 13.5px; font-weight: 700;
	text-align: center; text-decoration: none; cursor: pointer; }
.zoh .btn-primary, .zoh .btn-secondary { background: var(--color-bg); color: var(--color-text);
	border: 1px solid var(--color-border-dark); }
.zoh .btn-primary:hover, .zoh .btn-secondary:hover { border-color: var(--color-text); }
.zoh .btn-danger, .zoh .btn-pay { background: var(--color-accent); color: #fff; border: 0; }
.zoh .btn-danger:hover, .zoh .btn-pay:hover { opacity: .92; }
.zoh .btn-sm { padding: 5px 10px; font-size: 12px; }
.zoh .btn-disabled { background: var(--color-bg-alt); color: var(--color-text-muted);
	border: 0; cursor: not-allowed; }
.zoh .btn-active-ticket { background: var(--color-success) !important; color: #fff !important;
	border: 0 !important; opacity: 1 !important; cursor: not-allowed !important; }
.zoh .payment-info-box { padding: 12px 14px; text-align: left;
	background: var(--color-bg); border: 1px solid var(--color-border);
	border-radius: var(--radius-small); font-size: 13px; line-height: 1.7; }
.zoh .tracking-link { margin-top: 10px; }
.zoh .tickets-wrapper { margin-top: 10px; text-align: left; width: 100%; }
.zoh .tickets-heading { font-weight: 700; margin: 6px 0 8px; }
.zoh .tickets-table-responsive { width: 100%; overflow-x: auto; }
.zoh .tickets-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.zoh .tickets-table th, .zoh .tickets-table td { padding: 8px 10px; text-align: left;
	white-space: nowrap; border-bottom: 1px solid var(--color-border); }
.zoh .tickets-table th { color: var(--color-text-light); font-weight: 600; }
.zoh .tickets-table tr:last-child td { border-bottom: none; }
.zoh .status-chip { color: #fff; padding: 4px 10px; border-radius: 999px;
	font-size: 12px; display: inline-block; white-space: nowrap; }
.zoh .st-open, .zoh .st-in_progress, .zoh .st-waiting_response { background: var(--color-accent); }
.zoh .st-closed { background: var(--color-success); }
.zoh .st-deleted, .zoh .st-trash { background: var(--color-text-muted); }
.zoh .ticket-badge { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.zoh .ticket-subject { font-size: 13px; background: var(--color-bg-alt); padding: 4px 10px;
	border-radius: 999px; max-width: 520px; overflow: hidden;
	text-overflow: ellipsis; white-space: nowrap; }
.zoh .ticket-info-note { margin-top: 10px; padding: 10px 12px; font-size: 13px;
	background: var(--color-bg-alt); border: 1px solid var(--color-border);
	border-radius: var(--radius-small); color: var(--color-text-light); }
.zoh .ticket-success-note { margin: 10px 0 0; padding: 12px 14px; font-size: 13px; font-weight: 600;
	border: 1px solid var(--color-success); border-radius: var(--radius-small);
	color: var(--color-success); }
.zoh-note { max-width: 600px; margin: 0 auto 16px; padding: 22px; text-align: center;
	border: 1px solid var(--color-border); border-radius: var(--radius-medium);
	background: var(--color-bg); font-size: 14px; line-height: 1.55; }
.zoh-note h2, .zoh-note h3 { margin: 0 0 8px; font-family: var(--font-disp);
	font-stretch: var(--font-disp-wdth); font-size: 21px; letter-spacing: .02em;
	text-transform: uppercase; text-align: center; }
.zoh-note--err { border-color: var(--color-accent); }
.zoh-note--err h3 { color: var(--color-accent-text, var(--color-accent)); }
.zoh-note--warn { border-color: var(--color-border-dark); }
.zoh-warntext { color: var(--color-accent-text, var(--color-accent)); margin: 12px 0; }
.zoh-mutetext { display: block; margin-top: 6px; font-size: 12px; color: var(--color-text-light); }
@media (max-width: 1100px) {
	.zoh-body { grid-template-columns: 1fr; }
	.zoh-body-side { border-left: 0; border-top: 1px solid var(--color-border); }
}
@media (max-width: 700px) {
	.zoh .order-header { padding-right: 38px; font-size: 13px; }
	.zoh-head-thumbs { order: 3; flex-basis: 100%; }
	.zoh-head-thumbs img, .zoh-thumb-leer, .zoh-thumb-mehr { width: 36px; height: 36px; }
	.zoh .order-header-right { margin-left: auto; }
	.zoh .tickets-table th:nth-child(3), .zoh .tickets-table td:nth-child(3),
	.zoh .tickets-table th:nth-child(5), .zoh .tickets-table td:nth-child(5) { display: none; }
}

/* ══ CHECKOUT SCHRITT 1 — LIEFERUNG & ZAHLUNG (v2) ═══════════════════════
   84 % der Aufrufe sind mobil (gemessen). Deshalb: Touch-Ziele statt 30px-Zeilen,
   keine festen Pixelbreiten, Uebersicht auf dem Handy UNTER den Optionen und der
   Absende-Knopf dort, wo der Daumen ist. */
.zco { display: grid; gap: 20px; align-items: start; max-width: 1180px; margin: 6px auto 40px;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.zco-main { min-width: 0; }

.zco-block { border: 1px solid var(--color-border); border-radius: var(--radius-medium);
	background: var(--color-bg); padding: 18px; margin-bottom: 14px; }
.zco-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.zco-block-head h2 { margin: 0; text-align: left; font-family: var(--font-disp);
	font-stretch: var(--font-disp-wdth); font-size: 19px; text-transform: uppercase; letter-spacing: .03em; }
.zco-change { font-size: 13px; color: var(--color-text-light); text-decoration: underline; text-underline-offset: 2px; }
.zco-change:hover { color: var(--color-text); }
.zco-adr { font-style: normal; font-size: 14px; line-height: 1.55; color: var(--color-text); }

/* Auswahlzeilen: eine Zeile = ein Touch-Ziel (mind. 56 px hoch) */
.zco-opt { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 14px;
	margin-bottom: 8px; cursor: pointer;
	border: 1px solid var(--color-border); border-radius: var(--radius-small); background: var(--color-bg); }
.zco-opt:last-child { margin-bottom: 0; }
.zco-opt:hover { border-color: var(--color-text-light); }
.zco-opt.is-active { border-color: var(--color-text); background: var(--color-bg-alt); }
.zco-opt input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--color-text); cursor: pointer; }
/* [Owner 20.08.] Ohne Rahmen — die Auswahlkachel hat bereits einen, ein zweiter
   um das Logo herum erzeugt einen Kasten im Kasten. Der weiße Grund bleibt: die
   Carrier- und Zahlungslogos sind für hellen Untergrund gezeichnet und wären im
   Darkmode sonst unlesbar. */
.zco-opt-media { flex: 0 0 auto; width: 54px; display: flex; align-items: center; justify-content: center;
	background: #fff; border-radius: var(--radius-small); padding: 4px; }
.zco-opt-media img { max-width: 100%; height: auto; display: block; }
.zco-opt-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.zco-opt-body b { font-size: 14px; color: var(--color-text); }
.zco-opt-body span { font-size: 12.5px; color: var(--color-text-light); line-height: 1.4; }
.zco-opt-preis { flex: 0 0 auto; font-size: 14px; font-weight: 700; white-space: nowrap; color: var(--color-text); }
.zco-tag { font-style: normal; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
	padding: 2px 6px; margin-left: 6px; border-radius: var(--radius-small);
	background: var(--color-accent); color: #fff; }
.zco-opt-hint { font-weight: 400; color: var(--color-text-light); }

.zco-hinweis { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--color-text-light); }
.zco-hinweis a { color: var(--color-text); text-decoration: underline; text-underline-offset: 2px; }
.zco-error { margin: 0 0 14px; padding: 11px 13px; font-size: 13.5px; font-weight: 700;
	color: var(--color-accent-text, var(--color-accent));
	border: 1px solid var(--color-accent); border-radius: var(--radius-small); }

.zco-details summary { cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--color-text); }
.zco-details textarea { width: 100%; margin-top: 10px; padding: 11px 13px; min-height: 84px;
	background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 14px;
	border: 1px solid var(--color-border); border-radius: var(--radius-small); box-sizing: border-box; }
.zco-check { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding-top: 14px;
	border-top: 1px solid var(--color-border);
	font-size: 13px; line-height: 1.45; color: var(--color-text-light); cursor: pointer; }
.zco-check input { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--color-text); cursor: pointer; }

/* Übersicht */
.zco-summe { position: sticky; top: calc(96px + 14px); border: 1px solid var(--color-border);
	border-radius: var(--radius-medium); background: var(--color-bg); padding: 18px;
	/* KEIN interner Scrollbereich: mit vielen Artikeln lagen Knopf und
	   Vertrauensliste sonst ausserhalb des sichtbaren Kastens (Agenten-Befund). */
	}
.zco-summe h2 { margin: 0 0 12px; text-align: left; font-family: var(--font-disp);
	font-stretch: var(--font-disp-wdth); font-size: 19px; text-transform: uppercase; letter-spacing: .03em; }
.zco-items { list-style: none; margin: 0 0 14px; padding: 0; }
.zco-items li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.zco-item-media { position: relative; flex: 0 0 auto; width: 46px; height: 46px; padding: 3px;
	background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-small); overflow: hidden; }
.zco-item-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.zco-item-qty { position: absolute; right: -5px; top: -5px; min-width: 18px; height: 18px; padding: 0 4px;
	display: flex; align-items: center; justify-content: center; border-radius: 999px;
	background: var(--color-text); color: var(--color-bg); font-size: 11px; font-weight: 700;
	border: 2px solid var(--color-bg); }
.zco-item-name { flex: 1 1 auto; min-width: 0; font-size: 12.5px; line-height: 1.35; color: var(--color-text);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.zco-item-preis { flex: 0 0 auto; font-size: 13px; font-weight: 700; white-space: nowrap; }

/* [Owner 20.08.] Die Tabelle spannte sich ueber die volle Breite und riss
   Bezeichnung und Betrag maximal auseinander — bei "GLS: … 6,99 €" lagen zwei
   Handbreit dazwischen. Jetzt waechst sie mit ihrem Inhalt und steht rechts:
   der Abstand richtet sich nach der Laenge der Zahlen, nicht nach der Kastenbreite.
   Die Summenzeile behaelt ihre Trennlinie ueber die volle Breite. */
.zco-sumtable { width: auto; min-width: min(260px, 100%); margin-left: auto;
	border-collapse: collapse; margin-top: 4px; }
.zco-sumtable td { padding: 5px 0; font-size: 13px; color: var(--color-text-light); }
.zco-sumtable td:first-child { padding-right: 18px; }
.zco-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.zco-sum-head td { font-size: 14px; font-weight: 700; color: var(--color-text); }
.zco-sum-total td { padding-top: 10px; font-size: 17px; font-weight: 700; color: var(--color-text);
	border-top: 1px solid var(--color-border); }
.zco-sum-legal { padding-top: 8px !important; font-size: 11.5px; color: var(--color-text-light); }
.zco-sum-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.zco-rest { margin: 10px 0 0; font-size: 12.5px; color: var(--color-text-light); }

.zco-btn { width: 100%; min-height: 52px; margin-top: 14px; border: 0; border-radius: var(--radius-small);
	background: var(--color-accent); color: #fff; font-family: var(--font-body);
	font-size: 16px; font-weight: 700; cursor: pointer; }
.zco-btn:hover { opacity: .92; }
.zco-submit-mobil { display: none; }

.zco-assure { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--color-border); }
.zco-assure li { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; font-size: 12.5px;
	line-height: 1.45; color: var(--color-text-light); }
.zco-assure li:first-child { margin-top: 0; }
.zco-assure b { color: var(--color-text); }
.zco-assure a { color: var(--color-text); text-decoration: underline; text-underline-offset: 2px; }
.zco-assure svg { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 2px; color: var(--color-text); }

/* [Agenten-Befund] Der Absende-Knopf stand mobil im Formular — also VOR der
   Bestellübersicht. Der Kunde sah den roten Knopf, bevor je ein Betrag auf dem
   Schirm war. Die Übersicht wird deshalb per order vorgezogen, und der Knopf
   klebt unten, damit er trotzdem immer erreichbar ist. */
@media (max-width: 900px) {
	/* align-items:start stammt aus dem Grid-Layout und meint dort die vertikale
	   Ausrichtung. In der Flex-SPALTE kippt dieselbe Angabe auf die Querachse und
	   schrumpfte beide Bloecke auf ihre Inhaltsbreite: die Kartenspalte endete bei
	   ~550 px, die Bestelluebersicht darunter bei ~665 px. Deshalb explizit strecken. */
	.zco { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
	.zco-main { order: 1; }
	.zco-summe { order: 2; position: static; max-height: none; overflow: visible; }
	.zco-btn--desktop { display: block; }        /* der Knopf in der Übersicht bleibt */
	.zco-submit-mobil { display: none; }          /* der im Formular verschwindet */
	.zco-block { padding: 15px; }
	/* Solange die Übersicht noch nicht im Bild war, bleibt der Abschluss am
	   unteren Rand griffbereit — ohne den Endbetrag zu verstecken. */
	.zco-sticky {
		position: sticky; bottom: 0; z-index: 40;
		margin: 0 -15px -15px; padding: 10px 15px calc(10px + env(safe-area-inset-bottom));
		background: var(--color-bg); border-top: 1px solid var(--color-border);
	}
	.zco-sticky .zco-btn { margin-top: 0; }
}

/* ══ CHECKOUT SCHRITT 2 — PRÜFEN & BESTELLEN (v2) ════════════════════════
   Der zweitgroesste Verlustpunkt: 97 s Verweildauer, danach 18 % Abbruch.
   Hier wird gezweifelt, nicht geklickt — deshalb stehen Endbetrag, Lieferzeit
   und Widerruf sichtbar statt im Kleingedruckten. */
.zk { display: grid; gap: 20px; align-items: start; max-width: 1180px; margin: 6px auto 40px;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.zk-main { min-width: 0; }
.zk-block { border: 1px solid var(--color-border); border-radius: var(--radius-medium);
	background: var(--color-bg); padding: 18px; margin-bottom: 14px; }
.zk-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.zk-block-head h2 { margin: 0; text-align: left; font-family: var(--font-disp);
	font-stretch: var(--font-disp-wdth); font-size: 19px; text-transform: uppercase; letter-spacing: .03em; }
.zk-change { font-size: 13px; color: var(--color-text-light); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.zk-change:hover { color: var(--color-text); }

.zk-items { list-style: none; margin: 0; padding: 0; }
.zk-items li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.zk-items li:last-child { border-bottom: 0; padding-bottom: 0; }
.zk-item-qty { flex: 0 0 auto; min-width: 30px; font-size: 13px; font-weight: 700; color: var(--color-text-light); }
.zk-item-name { flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 1.4; color: var(--color-text); }
.zk-item-attr { display: block; margin-top: 2px; font-size: 12px; color: var(--color-text-light); }
.zk-item-preis { flex: 0 0 auto; font-size: 14px; font-weight: 700; white-space: nowrap; }
.zk-tag { font-style: normal; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
	margin-left: 6px; padding: 2px 6px; border-radius: var(--radius-small);
	background: var(--color-text); color: var(--color-bg); }

.zk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.zk-cell { display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; line-height: 1.5; }
.zk-cell-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-light); }
.zk-cell address { font-style: normal; color: var(--color-text); }
.zk-cell b { color: var(--color-text); }
.zk-cell-sub { font-size: 12.5px; color: var(--color-text-light); }
.zk-cell-sub--stark { color: var(--color-text); font-weight: 700; }
.zk-cell .zk-change { align-self: flex-start; margin-top: 2px; }
.zk-comment { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--color-text-light); }

.zk-summe { position: sticky; top: calc(96px + 14px); border: 1px solid var(--color-border);
	border-radius: var(--radius-medium); background: var(--color-bg); padding: 18px;
	}
.zk-summe h2 { margin: 0 0 12px; text-align: left; font-family: var(--font-disp);
	font-stretch: var(--font-disp-wdth); font-size: 19px; text-transform: uppercase; letter-spacing: .03em; }
/* Die Summenzeilen kommen aus den order_total-Modulen mit align="right" am Titel —
   im Dialog wie hier gehoert das Label nach links. */
.zk-sumtable { width: 100%; border-collapse: collapse; }
.zk-sumtable td { padding: 5px 0; font-size: 13.5px; color: var(--color-text-light); text-align: left !important; }
.zk-sumtable td:last-child { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.zk-sumtable tr:last-child td { padding-top: 10px; font-size: 18px; font-weight: 700; color: var(--color-text);
	border-top: 1px solid var(--color-border); }
.zk-tax { margin: 8px 0 0; font-size: 11.5px; color: var(--color-text-light); }

.zk-agree { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0; padding: 13px 14px;
	border: 1px solid var(--color-border); border-radius: var(--radius-small); background: var(--color-bg-alt);
	font-size: 12.5px; line-height: 1.45; color: var(--color-text-light); cursor: pointer; }
.zk-agree input { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--color-text); cursor: pointer; }
.zk-agree a { color: var(--color-text); text-decoration: underline; text-underline-offset: 2px; }

.zk-btn { width: 100%; min-height: 56px; margin-top: 14px; border: 0; border-radius: var(--radius-small);
	background: var(--color-accent); color: #fff; font-family: var(--font-body);
	font-size: 16px; font-weight: 700; cursor: pointer; }
.zk-btn:hover { opacity: .92; }

.zk-assure { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--color-border); }
.zk-assure li { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; font-size: 12.5px;
	line-height: 1.45; color: var(--color-text-light); }
.zk-assure li:first-child { margin-top: 0; }
.zk-assure b { color: var(--color-text); }
.zk-assure a { color: var(--color-text); text-decoration: underline; text-underline-offset: 2px; }
.zk-assure svg { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 2px; color: var(--color-text); }

@media (max-width: 900px) {
	.zk { display: flex; flex-direction: column; gap: 14px; }
	/* Zusammenfassung inklusive Betrag, AGB und Kaufknopf ZUERST — danach die
	   Details zum Nachlesen. Vorher lag der Bestellknopf rund 2.400 px tief auf
	   genau der Seite, die 18 % Abbruch hat. */
	.zk-summe { order: 1; position: static; max-height: none; overflow: visible; }
	.zk-main { order: 2; }
	.zk-block { padding: 15px; }
}

/* ══ ERFOLGSSEITE (v2) ════════════════════════════════════════════════════
   Nach dem Kauf zaehlt Orientierung, nicht Verkauf: Ist es durch? Was passiert
   jetzt? Wie zahle ich (Vorkasse, 6 % der Bestellungen)? */
.zs { max-width: 760px; margin: 8px auto 44px; }
.zs-head { text-align: center; padding: 8px 0 22px; }
.zs-check { display: inline-flex; align-items: center; justify-content: center;
	width: 54px; height: 54px; margin-bottom: 12px; border-radius: 50%;
	background: var(--color-text); color: var(--color-bg); }
.zs-check svg { width: 26px; height: 26px; }
.zs-head h1 { margin: 0; font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	font-size: clamp(26px, 5vw, 38px); letter-spacing: .02em; }
.zs-nr { margin: 8px 0 0; font-size: 14px; color: var(--color-text-light); }
.zs-nr b { color: var(--color-text); font-size: 16px; }
.zs-sub { margin: 8px auto 0; max-width: 460px; font-size: 14.5px; line-height: 1.55; color: var(--color-text-light); }

.zs-block { border: 1px solid var(--color-border); border-radius: var(--radius-medium);
	background: var(--color-bg); padding: 20px; margin-bottom: 14px; }
.zs-block h2 { margin: 0 0 12px; text-align: left; font-family: var(--font-disp);
	font-stretch: var(--font-disp-wdth); font-size: 19px; text-transform: uppercase; letter-spacing: .03em; }
.zs-block--zahlung { border-color: var(--color-text); }
.zs-bank { font-size: 14px; line-height: 1.65; color: var(--color-text); }
.zs-bank b, .zs-bank strong { color: var(--color-text); }
.zs-hinweis { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--color-border);
	font-size: 13px; line-height: 1.5; color: var(--color-text-light); }

.zs-steps { list-style: none; counter-reset: zs; margin: 0; padding: 0; }
.zs-steps li { position: relative; counter-increment: zs; padding: 0 0 14px 38px; }
.zs-steps li:last-child { padding-bottom: 0; }
.zs-steps li::before { content: counter(zs); position: absolute; left: 0; top: 0;
	width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
	border-radius: 50%; background: var(--color-bg-alt); border: 1px solid var(--color-border);
	font-size: 12px; font-weight: 700; color: var(--color-text); }
.zs-steps b { display: block; font-size: 14px; color: var(--color-text); }
.zs-steps span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--color-text-light); }

.zs-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; padding-top: 14px;
	border-top: 1px solid var(--color-border); }
.zs-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
	border: 1px solid var(--color-text); border-radius: var(--radius-small);
	font-size: 14px; font-weight: 700; color: var(--color-text); }
.zs-link:hover { background: var(--color-text); color: var(--color-bg); }

.zs-block--nl p { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: var(--color-text-light); }
.zs-nlform { margin: 0; }
.zs-btn { display: inline-flex; align-items: center; justify-content: center;
	min-height: 52px; padding: 0 24px; margin-top: 14px; border: 0; border-radius: var(--radius-small);
	background: var(--color-accent); color: #fff; font-family: var(--font-body);
	font-size: 16px; font-weight: 700; cursor: pointer; }
.zs-btn:hover { opacity: .92; }
.zs-btn--kontur { margin-top: 0; background: none; border: 1px solid var(--color-text); color: var(--color-text); }
.zs-btn--kontur:hover { background: var(--color-text); color: var(--color-bg); opacity: 1; }

.zs-bild { margin-top: 18px; text-align: center; }
.zs-bild img { width: 100%; max-width: 400px; border-radius: var(--radius-medium); }

@media (max-width: 600px) {
	.zs-block { padding: 16px; }
	.zs-links { flex-direction: column; }
	.zs-link { justify-content: center; }
}

/* ══ CHECKOUT-ADRESSE (v2) ════════════════════════════════════════════════
   Ziel der "Ändern"-Links. Das gemeinsame Formularmodul
   (includes/modules/checkout_new_address.php) bleibt unveraendert — es arbeitet
   schon mit Klassen; hier bekommen sie nur Groessen, die man am Handy trifft. */
.za { max-width: 760px; margin: 6px auto 40px; }
.za .zco-opt { align-items: flex-start; }
.za .zco-opt-body b { display: block; }
.za-zurueck { margin: 4px 0 0; font-size: 13px; }
.za-zurueck a { color: var(--color-text-light); text-decoration: underline; text-underline-offset: 2px; }
.za-zurueck a:hover { color: var(--color-text); }

.za-form .form-group { margin-bottom: 14px; }
.za-form .custom-label,
.za-form label { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 700; color: var(--color-text); }
.za-form .form-input,
.za-form .form-select,
.za-form input[type="text"],
.za-form select {
	width: 100%; min-height: 48px; padding: 0 13px; box-sizing: border-box;
	background: var(--color-bg); color: var(--color-text);
	border: 1px solid var(--color-border); border-radius: var(--radius-small);
	font-family: var(--font-body); font-size: 15px;
}
.za-form .form-input:focus,
.za-form .form-select:focus,
.za-form input[type="text"]:focus,
.za-form select:focus { outline: 2px solid var(--color-text); outline-offset: 1px; border-color: var(--color-text); }
.za-form .input-note { display: block; margin-top: 4px; font-size: 12px; color: var(--color-text-muted); }


/* ── Native Bedienelemente im Dark Mode ──────────────────────────────────────
   [Agenten-Befund] accent-color allein genügt nicht: ohne color-scheme rendert
   der Browser Radios und Checkboxen weiter im hellen Schema. Im Dark Mode sah
   dadurch der NICHT gewählte Radio wie ein voll gefüllter weißer Kreis aus und
   der gewählte weniger gefüllt als der ungewählte — die AGB-Pflichtcheckbox wirkte
   bereits gesetzt. */
html.darkmode { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
	html:not(.lightmode) { color-scheme: dark; }
}

/* Sichtbare Kartengrenzen: --color-border liegt bei 1,28:1 und reicht für
   Bedienelement-Umrisse nicht (WCAG 1.4.11 verlangt 3:1). */
.zco-opt, .za .zco-opt { border-color: var(--color-text-muted); }
.zco-opt:hover { border-color: var(--color-text-light); }

/* Tastaturbedienung: für die Checkout-Regionen fehlte jeder Fokus-Ring. */
.zco-opt:focus-within,
.zk-agree:focus-within { outline: 2px solid var(--color-text); outline-offset: 2px; }
.zco-btn:focus-visible, .zk-btn:focus-visible, .zs-btn:focus-visible,
.zco-change:focus-visible, .zk-change:focus-visible, .zs-link:focus-visible {
	outline: 3px solid var(--color-text); outline-offset: 2px;
}

/* Korrekturwege waren 15–20 px hohe Tap-Ziele — die einzigen Wege zurück. */
.zco-change, .zk-change, .za-zurueck a {
	display: inline-flex; align-items: center; min-height: 32px; padding: 4px 2px;
}
/* display:flex laesst das Leerzeichen vor "(optional)" kollabieren -> gap.
   Und: mit display:flex verschwindet der Standard-Marker, das Feld sah aus wie
   eine tote Ueberschrift statt wie etwas Aufklappbares. Deshalb ein eigener,
   sich drehender Pfeil. */
.zco-details summary { min-height: 32px; display: flex; align-items: center; gap: 6px;
	list-style: none; }
.zco-details summary::-webkit-details-marker { display: none; }
.zco-details summary::after { content: ''; margin-left: auto; width: 8px; height: 8px;
	border-right: 2px solid var(--color-text-light); border-bottom: 2px solid var(--color-text-light);
	transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s ease; }
.zco-details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

/* Der Mengen-Badge wurde vom overflow der Bildkachel abgeschnitten. */
.zco-item-media { overflow: visible; }
.zco-item-media img { border-radius: var(--radius-small); }

/* Sperrgut ist eine Warnung, kein Kaufabschluss — das eine Rot bleibt dem CTA. */
.zco-tag { background: var(--color-text); color: var(--color-bg); }
/* EIN ROT: --color-error ist das alte Ziegelrot und hat diese beiden Regeln, weil
   sie spaeter stehen, still ueber die korrekten Erstdefinitionen gelegt
   (.zlog-error oben, .zco-error in der Checkout-Region). Fehlermeldungen tragen
   dasselbe Markenrot wie der Rest — als TEXT ueber --color-accent-text (A11y). */
.zco-error { border-color: var(--color-accent); color: var(--color-accent-text, var(--color-accent)); }
.zlog-error, .zk-error { border-color: var(--color-accent); color: var(--color-accent-text, var(--color-accent)); }

/* Pflichtangaben standen in --color-text-muted (3,03:1 auf Weiß) — zu schwach für
   Steuerhinweis, Feldbeschriftungen und einen echten Link. */
.zco-sum-legal, .zco-sum-legal a, .zk-cell-label, .zk-tax { color: var(--color-text-light); }

/* Pflichthinweise (Drittland, Zoll) — sichtbar, aber nicht als Fehler gefaerbt */
.zco-warn, .zk-warn {
	margin: 12px 0 0; padding: 12px 14px; font-size: 12.5px; line-height: 1.5;
	color: var(--color-text); background: var(--color-bg-alt);
	border: 1px solid var(--color-border); border-left: 3px solid var(--color-text); border-radius: var(--radius-small);
}
.zco-warn b { display: block; margin-bottom: 4px; }
.zco-warn p { margin: 6px 0 0; }

/* ── SCHNELLSTART MIT PAYPAL ─────────────────────────────────────────────────
   Nebenweg unter dem Hauptknopf. Bewusst in Kontur statt gefuellt: das eine Rot
   gehoert dem Weg zur Kasse, hier steht die Abkuerzung fuer alle, die auf dem
   Handy keine Adresse tippen wollen. */
/* [Owner 20.08.] Der Schnellstart klebte unter "Zur Kasse". Abstand genügt —
   eine Trennlinie wäre eine zusätzliche Kante in einer Box, die schon genug
   davon hat.
   Der Abstand gehört an den KNOPF, nicht an das <form> drumherum: die Kaufbox
   setzt ihre Abstände über die eigenen Elemente, das Formular ist nur eine
   Hülle ohne eigene Kontur — ein margin dort wurde nicht sichtbar. */
.zct-ppx { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.zct-ppx-btn { margin-top: 12px;
	display: flex; align-items: center; justify-content: center; gap: 9px;
	width: 100%; min-height: 48px; padding: 11px 16px; cursor: pointer;
	background: var(--color-bg); color: var(--color-text);
	border: 1px solid var(--color-border); border-radius: var(--radius-medium);
	font-family: var(--font-body); font-size: 14.5px; font-weight: 700;
	transition: border-color .15s ease, background-color .15s ease; }
.zct-ppx-btn:hover { border-color: var(--color-text); background: var(--color-bg-alt); }
.zct-ppx-btn img { display: block; height: 22px; width: auto; }
.zct-ppx-hint { text-align: center; font-size: 11.5px; line-height: 1.4; color: var(--color-text-light); }

/* ── GAST-LIGHT: ADRESSFORMULAR IN SCHRITT 1 ────────────────────────────────
   Felder in der Höhe des CTA (48px) — auf dem Handy ist jedes zu kleine Feld ein
   Fehlversuch. Beschriftungen stehen fest über dem Feld statt als Platzhalter:
   ein Platzhalter verschwindet beim Tippen, und dann weiß niemand mehr, was in
   dem Feld stehen soll. */
.zco-feld { margin-bottom: 12px; }
.zco-feld label { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 700; color: var(--color-text); }
.zco-feld input, .zco-feld select {
	width: 100%; min-height: 48px; padding: 11px 13px; box-sizing: border-box;
	background: var(--color-bg); color: var(--color-text);
	border: 1px solid var(--color-border); border-radius: var(--radius-small);
	font-family: var(--font-body); font-size: 16px;   /* 16px: alles darunter zoomt iOS beim Fokus */ }
.zco-feld input:focus, .zco-feld select:focus { outline: 2px solid var(--color-text); outline-offset: 1px; border-color: var(--color-text); }
/* :user-invalid statt :invalid — sonst stehen alle Pflichtfelder rot da, bevor
   überhaupt jemand getippt hat. */
.zco-feld input:user-invalid, .zco-feld input[aria-invalid="true"] { border-color: var(--color-error); }
.zco-feld-hint { display: block; margin-top: 4px; font-size: 12px; line-height: 1.4; color: var(--color-text-light); }
.zco-feld input[aria-invalid="true"] + .zco-feld-hint { color: var(--color-error); }
/* [Owner 26.08.] Frueher Hinweis, wenn die Adresse zu einem Konto gehoert. Der
   Verweis muss als Verweis erkennbar bleiben, auch in der Warnfarbe. */
.zco-feld-hint--warnung { color: var(--color-error); }
.zco-feld-hint--warnung a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.zco-feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.zco-feld-paar--plz { grid-template-columns: minmax(0, 100px) minmax(0, 1fr); }
.zco-details--adr { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--color-border); }
/* Der Zwischenschritt ist NICHT der Kaufabschluss — in Kontur statt Rot, sonst
   konkurrieren zwei rote Knöpfe auf derselben Seite. (Hausregel: EIN ROT, und
   das gehört "Weiter zur Prüfung".) Er verschwindet ohnehin, sobald die
   Versandarten nachgeladen sind. */
.zco-btn--weiter { margin-top: 14px; background: var(--color-bg); color: var(--color-text);
	border: 1px solid var(--color-text); }
.zco-btn--weiter:hover { background: var(--color-bg-alt); }
@media (max-width: 520px) {
	.zco-feld-paar { grid-template-columns: 1fr; gap: 0; }
	.zco-feld-paar--plz { grid-template-columns: minmax(0, 110px) minmax(0, 1fr); gap: 10px; }
}

/* Gast-Light: Konto-Angebot auf der Erfolgsseite */
.zs-kontoform { margin-top: 12px; }
.zs-kontoform input[type="email"] { width: 100%; min-height: 44px; margin-bottom: 8px; padding: 10px 12px;
	box-sizing: border-box; background: var(--color-bg-alt); color: var(--color-text-light);
	border: 1px solid var(--color-border); border-radius: var(--radius-small); font-size: 15px; }
.zs-kontoform-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.zs-kontoform-paar input { min-height: 48px; padding: 11px 13px; box-sizing: border-box;
	background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-border);
	border-radius: var(--radius-small); font-family: var(--font-body); font-size: 16px; }
.zs-kontoform-paar input:focus { outline: 2px solid var(--color-text); outline-offset: 1px; }
@media (max-width: 520px) { .zs-kontoform-paar { grid-template-columns: 1fr; } }

/* Gast-Light: Kopfzeile des Adressblocks. Auf schmalen Geräten drängte
   "Ich habe ein Konto" die Überschrift in zwei Zeilen und stand selbst
   zweizeilig daneben — deshalb dort untereinander. */
@media (max-width: 520px) {
	.zco-block-head { flex-wrap: wrap; }
	.zco-block-head .zco-change { flex: 0 0 100%; margin-top: 2px; }
}

/* ── EINSTIEGE IN SCHRITT 1 (Anmelden / Schnellstart) ───────────────────────
   Stehen VOR dem Adressformular, nicht als Link daneben: ein Stammkunde soll
   seine gespeicherte Adresse nutzen können, ohne danach zu suchen. Bewusst in
   Kontur — das eine Rot bleibt dem Abschluss. */
/* [Owner 26.08.] Ohne den zweiten Einstieg trug der Kartenrahmen nichts mehr —
   ein Rahmen um einen einzelnen Knopf. Jetzt steht der Knopf frei ueber dem
   Trenner, der Abstand nach unten kommt von hier statt vom entfallenen .zco-block. */
.zco-einstieg { margin-bottom: 14px; padding-bottom: 6px; }
/* [Owner 26.08.] Flex statt festem Zweier-Raster: mit dem PayPal-Schnellstart
   hielt die zweite Spalte einen Platz frei, der ohne ihn leer stehen blieb.
   Jetzt richtet sich die Reihe nach der Zahl der Einstiege — einer steht mittig,
   zwei teilen sich die Breite wie bisher. */
.zco-einstieg-reihe { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.zco-einstieg-form { display: contents; }
.zco-einstieg-btn { display: flex; align-items: center; gap: 10px; flex: 1 1 260px; max-width: 380px; min-height: 60px;
	padding: 11px 14px; box-sizing: border-box; cursor: pointer; text-align: left; text-decoration: none;
	background: var(--color-bg); color: var(--color-text);
	border: 1px solid var(--color-border); border-radius: var(--radius-medium);
	font-family: var(--font-body); font-size: 14px;
	transition: border-color .15s ease, background-color .15s ease; }
.zco-einstieg-btn:hover { border-color: var(--color-text); background: var(--color-bg-alt); }
.zco-einstieg-btn svg { flex: 0 0 auto; width: 22px; height: 22px; }
.zco-einstieg-btn img { flex: 0 0 auto; height: 20px; width: auto; }
.zco-einstieg-btn > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.zco-einstieg-btn b { font-size: 14px; line-height: 1.25; }
.zco-einstieg-btn span span { font-size: 12px; line-height: 1.3; color: var(--color-text-light); }
/* Trennzeile "oder": die Linie läuft durch, der Text sitzt auf dem Grund der Karte. */
.zco-einstieg-oder { position: relative; margin: 16px 0 2px; text-align: center; }
.zco-einstieg-oder::before { content: ''; position: absolute; left: 0; right: 0; top: 50%;
	border-top: 1px solid var(--color-border); }
.zco-einstieg-oder span { position: relative; padding: 0 12px; background: var(--color-bg);
	font-size: 12.5px; color: var(--color-text-light); }


/* Gratis-Artikel in der Bestellübersicht: 0 € mit durchgestrichenem Originalpreis.
   Der Streichpreis steht darüber, nicht daneben — daneben liest man ihn als zwei
   Beträge, übereinander als eine Aussage. */
.zco-item-preis { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.zco-item-alt { color: var(--color-text-muted); font-size: 12px; text-decoration: line-through; }
.zco-tag--gratis { background: var(--color-text); color: var(--color-bg); }

/* ── KAUFABSCHLUSS IN DER BESTELLÜBERSICHT ──────────────────────────────────
   Einwilligung, Zustimmung und Kaufknopf stehen dort, wo Positionen und
   Gesamtpreis stehen — § 312j BGB verlangt die Angaben unmittelbar vor der
   Bestellung, und der Kunde soll nicht zwischen zwei Blöcken vergleichen. */
.zco-abschluss { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-border); }
.zco-abschluss .zco-check { margin-top: 0; padding-top: 0; border-top: 0; margin-bottom: 12px; }
.zco-check--agb { align-items: flex-start; }
.zco-check--agb a { color: var(--color-text); text-decoration: underline; }
.zco-btn--kauf { width: 100%; min-height: 56px; font-size: 16px; }
.zco-kauf-hinweis { margin: 8px 0 0; text-align: center; font-size: 12px; color: var(--color-text-light); }

/* Rechnungsadresse: eingeklappt, weil sie die Ausnahme ist. */
.zco-check--knapp { margin-top: 10px; padding-top: 0; border-top: 0; }
.zco-rechnung { margin-top: 10px; padding-top: 12px; border-top: 1px dashed var(--color-border); }

/* Rückmeldung des Schnellstarts (Abbruch, Fehler, Land nicht belieferbar).
   Ohne sie landete der Kunde wortlos wieder im Warenkorb. */
.zct-ppx-meldung { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius-small);
	background: var(--color-bg-alt); border: 1px solid var(--color-border);
	font-size: 12.5px; line-height: 1.45; color: var(--color-text); }

/* Express als Zusatzleistung unter den Versandarten — bewusst anders als eine
   Versandart (Checkbox statt Radio), weil er keine ersetzt, sondern dazukommt. */
.zco-express { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px;
	padding: 12px 14px; cursor: pointer;
	background: var(--color-bg-alt); border: 1px solid var(--color-border);
	border-radius: var(--radius-medium); }
.zco-express input { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0;
	accent-color: var(--color-text); cursor: pointer; }
.zco-express-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zco-express-body b { font-size: 14px; color: var(--color-text); }
.zco-express-body span { font-size: 12.5px; line-height: 1.4; color: var(--color-text-light); }

/* Klarna-Varianten: klappen unter der Klarna-Zeile auf, sobald sie gewählt ist.
   Eingerückt, damit die Zugehörigkeit ohne Erklärung lesbar ist. */
.zco-klarna { margin: -4px 0 10px; padding: 12px 14px 4px;
	background: var(--color-bg-alt); border: 1px solid var(--color-border);
	border-top: 0; border-radius: 0 0 var(--radius-medium) var(--radius-medium); }
.zco-klarna-titel { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--color-text); }
.zco-klarna-laedt, .zco-klarna-fehler { margin: 0 0 10px; font-size: 12.5px; line-height: 1.45;
	color: var(--color-text-light); }
.zco-klarna-fehler { color: var(--color-error); }
.zco-opt--klarna { background: var(--color-bg); }

/* Kaufknopf ausgegraut statt versteckt: ein Knopf, der verschwindet, lässt den
   Kunden raten. Der Grund steht direkt darunter. */
.zco-btn--kauf.is-aus, .zco-btn--kauf:disabled {
	background: var(--color-bg-alt); color: var(--color-text-muted);
	border: 1px solid var(--color-border); cursor: not-allowed; }
.zco-kauf-grund { margin: 8px 0 0; text-align: center; font-size: 12.5px;
	line-height: 1.45; color: var(--color-text-light); }

/* Kontovorteile auf der Erfolgsseite — benannt statt angedeutet. */
.zs-vorteile { margin: 10px 0 14px; padding-left: 18px; }
.zs-vorteile li { margin-bottom: 5px; font-size: 13.5px; line-height: 1.5; color: var(--color-text-light); }
.zs-vorteile b { color: var(--color-text); }

/* ── LANDINGPAGES ───────────────────────────────────────────────────────────
   Der Inhalt der LPs liegt als HTML in der Datenbank und brachte bisher eigene
   <style>-Blöcke mit hartcodierten Farben mit (#ffffff, #f5f5f5, #ff6600) —
   im Darkmode also weiß auf weiß. Diese Region ersetzt das: die Seiten nutzen
   nur noch Klassen, gefärbt wird über Tokens. Damit funktioniert jede LP in
   beiden Modi, ohne dass ihr HTML Farben kennt. */
/* [Owner 20.08.] Breiter als der Checkout (dessen 1180 px buendeln bewusst den
   Blick), aber nicht randlos: bei voller Fensterbreite klebten drei Produktkarten
   links, rechts stand ein Drittel leer, und das Hero-Bild wurde bildschirmfuellend.
   Volle Breite hilft nur, wenn der Inhalt sie auch fuellt.
   Das Layout hat deshalb zwei Spuren: das Aufmacherbild und die Produktraster
   nehmen die ganze Breite, alles Gelesene steht in EINER mittigen Spalte. Woran
   das Auge sich haelt, ist nicht die Breite, sondern die gemeinsame Kante. */
.zlpage { --zlp-spalte: 780px; max-width: 1240px; margin: 0 auto 40px; }
.zlpage-hero { margin: 0 0 24px; }
/* Das Aufmacherbild fuellt die breite Spur. Kein object-fit: cover — auf diesen
   Motiven steht Text IM Bild, den ein Beschnitt zerschneiden wuerde; begrenzt
   wird deshalb ueber die Breite, die Hoehe folgt dem Seitenverhaeltnis. */
.zlpage-hero img { display: block; width: 100%; height: auto;
	margin: 0 auto; border-radius: var(--radius-medium); }
/* Nur das erste Bild ist der Aufmacher. Jedes weitere gehoert zum Text, den es
   erklaert — es steht deshalb in derselben Spalte und in derselben Kante. Sonst
   springt die Seite bei jedem Bild in eine andere Breite. */
.zlpage-hero ~ .zlpage-hero img { max-width: var(--zlp-spalte); max-height: none; }
.zlpage-block { margin: 0 0 34px; }
/* Eine Landingpage zeigt zwei bis vier Produkte, kein volles Listing. Das
   geteilte Raster rechnet mit auto-fill und haelt leere Spalten frei — drei
   Karten klebten deshalb links, rechts stand nichts. auto-fit faltet die leeren
   Spalten weg. Der Deckel von 400 px ist so gewaehlt, dass drei Karten die breite
   Spur genau ausfuellen (3x400 + 2x18 = 1236) und damit dieselbe Kante haben wie
   das Bild darueber. Groesser als im Listing ist Absicht: hier sind die Produkte
   nicht Auswahl, sondern das Angebot der Seite. */
.zlpage:not(.zlpage--alt) .icon-container {
	grid-template-columns: repeat(auto-fit, minmax(240px, 400px)); justify-content: center; }
.zlpage-block h2 { margin: 0 0 14px; text-align: left; font-family: var(--font-disp);
	font-stretch: var(--font-disp-wdth); font-size: clamp(24px, 3vw, 36px);
	text-transform: uppercase; letter-spacing: .02em; color: var(--color-text); }
.zlpage-block h3 { margin: 22px 0 8px; text-align: left; font-size: 18px; color: var(--color-text); }
/* Die Inhaltsspalte. Ueberschrift, Text und erklaerende Bilder teilen sich eine
   Kante — eine Ueberschrift ueber 1440 px mit 730 px Text darunter wirkt wie ein
   Fehler, nicht wie Gestaltung. Produktraster und Videoreihen sind hier bewusst
   NICHT genannt: die duerfen die Breite nutzen. */
.zlpage-block > h2, .zlpage-block > h3, .zlpage-block > h4, .zlpage-block > p,
.zlpage-block > ul, .zlpage-block > ol, .zlpage-block > blockquote,
.zlpage-block > img, .zlpage-block > .zlpage-fazit {
	max-width: var(--zlp-spalte); margin-inline: auto; }
/* margin-inline bleibt auto — die Kurzform "0 0 12px" hat das Zentrieren der
   Spalte weiter oben stillschweigend wieder aufgehoben. */
.zlpage-block p { margin: 0 auto 12px; font-size: 15px; line-height: 1.65; color: var(--color-text-light); }
.zlpage-block p strong, .zlpage-block li strong { color: var(--color-text); }
.zlpage-block ul { margin: 0 auto 14px; padding-left: 20px; }
.zlpage-block li { margin-bottom: 6px; font-size: 15px; line-height: 1.6; color: var(--color-text-light); }
/* Marken-Block: Text und Bild nebeneinander, auf schmalen Geräten gestapelt. */
.zlpage-brand { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px;
	align-items: center; padding: 26px; background: var(--color-bg-alt);
	border: 1px solid var(--color-border); border-radius: var(--radius-medium); }
.zlpage-brand img { display: block; width: 100%; height: auto; border-radius: var(--radius-small); }
.zlpage-fazit { margin-top: 16px; padding: 14px 16px; background: var(--color-bg-alt);
	border-left: 3px solid var(--color-text); border-radius: var(--radius-small); }
.zlpage-fazit p { margin: 0; color: var(--color-text); }
@media (max-width: 900px) {
	.zlpage-brand { grid-template-columns: 1fr; gap: 18px; }
}

/* Alt-Landingpages (noch nicht neu aufgebaut): Der Renderer entfernt ihre
   Farbangaben, hier bekommen die verbliebenen Strukturen ein Aussehen. So sind
   alle Seiten sofort in beiden Modi lesbar, ohne dass ihr HTML angefasst wird. */
.zlpage--alt section { padding: 0 0 26px; text-align: left; }
.zlpage--alt h2 { margin: 0 0 12px; text-align: left; font-family: var(--font-disp);
	font-stretch: var(--font-disp-wdth); font-size: clamp(22px, 2.6vw, 32px);
	text-transform: uppercase; color: var(--color-text); }
.zlpage--alt h3 { margin: 18px 0 6px; text-align: left; font-size: 17px; color: var(--color-text); }
.zlpage--alt p, .zlpage--alt li { max-width: 90ch; font-size: 15px; line-height: 1.65; color: var(--color-text-light); }
.zlpage--alt strong { color: var(--color-text); }
.zlpage--alt img { max-width: 100%; height: auto; border-radius: var(--radius-medium); }
/* Bei den Alt-Seiten wird NICHT zentriert. Sie bringen ihr eigenes Raster mit
   (meist max-width um 1160 px plus Inline-Margins) — ein margin-inline: auto greift
   dort mal durch und mal nicht, je nachdem was inline steht. Das Ergebnis waere von
   Seite zu Seite verschieden. Begrenzt wird nur die Zeilenlaenge. */
.zlpage--alt ul, .zlpage--alt ol { max-width: 90ch; }
/* Alt-Seiten setzen ihre Ueberschriften links. Ein zentriertes Raster darunter
   ergaebe zwei verschiedene Kanten — hier bleibt es deshalb linksbuendig, die
   Karten duerfen nur breiter werden als die 240 px des Listings. */
.zlpage--alt .icon-container { grid-template-columns: repeat(auto-fit, minmax(240px, 330px)); }
.zlpage--alt .product, .zlpage--alt .upgrade { padding: 16px; background: var(--color-bg-alt);
	border: 1px solid var(--color-border); border-radius: var(--radius-medium); }
.zlpage--alt .buy-button { display: inline-block; margin-top: 12px; padding: 11px 20px;
	/* Kauf-Knopf traegt das Markenrot, nicht das Fehler-Ziegelrot (EIN ROT). */
	background: var(--color-accent); color: var(--color-text-inverse); border-radius: var(--radius-small);
	font-weight: 700; text-decoration: none; }

/* Auf dem Handy bleibt es bei zwei Karten pro Reihe wie im ganzen Shop. Die
   Deckel-Regel oben ist spezifischer als die allgemeine 700px-Query und hatte sie
   still ueberstimmt — eine Karte pro Reihe fuellte den Schirm und machte aus drei
   Produkten drei Bildschirmlaengen. */
@media (max-width: 700px) {
	.zlpage:not(.zlpage--alt) .icon-container, .zlpage--alt .icon-container {
		grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ── SHOPVOTE-BEWERTUNGS-MODAL (.zsvm) [B15-R5] ────────────────────────────
   Klick auf Header-Bewertung/Siegel oeffnet die gecachten ShopVote-Reviews
   (includes/zshopvote_modal.php) statt zur Profilseite rauszuleiten.
   Formsprache wie .zabm; [hidden] MUSS gewinnen (Lehre aus .zsc/.zabm). */
.zsvm-overlay { position: fixed; inset: 0; z-index: 10060; background: rgba(0,0,0,.45); }
.zsvm-overlay[hidden], .zsvm[hidden] { display: none !important; }
.zsvm { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 10061;
	width: min(620px, calc(100vw - 24px)); max-height: calc(100vh - 40px); overflow-y: auto;
	background: var(--color-bg); color: var(--color-text);
	border: 1px solid var(--color-border); border-radius: var(--radius-medium);
	box-shadow: 0 14px 44px rgba(0,0,0,.3); padding: 22px; }
.zsvm-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.zsvm-kopf h2 { margin: 0; text-align: left; font-family: var(--font-disp);
	font-stretch: var(--font-disp-wdth); font-size: 22px; letter-spacing: .02em; text-transform: uppercase; }
.zsvm-close { width: 34px; height: 34px; border: 0; border-radius: 999px; cursor: pointer;
	background: var(--color-bg-alt); color: var(--color-text); font-size: 21px; line-height: 1; }
.zsvm-close:hover { background: var(--color-border); }
.zsvm-summary { display: flex; align-items: center; gap: 14px; padding: 14px;
	background: var(--color-bg-alt); border-radius: var(--radius-medium); margin-bottom: 14px; }
.zsvm-summary-text { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.zsvm-score { font-size: 15px; }
.zsvm-score b { font-size: 21px; }
.zsvm-summary small { color: var(--color-text-light); font-size: 13px; }
.zsvm-stars { display: inline-flex; gap: 2px; }
.zsvm-stars svg { width: 17px; height: 17px; fill: var(--color-warning); }
.zsvm-stars svg.off { fill: var(--color-border); }
.zsvm-stars--klein svg { width: 13px; height: 13px; }
.zsvm-liste { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.zsvm-review { border: 1px solid var(--color-border); border-radius: var(--radius-medium);
	padding: 12px 14px; text-align: left; }
.zsvm-review-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.zsvm-review-kopf b { font-size: 14px; }
.zsvm-review-datum { margin-left: auto; color: var(--color-text-muted); font-size: 12.5px; }
.zsvm-verifiziert { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px;
	color: var(--color-success); font-size: 12.5px; }
.zsvm-verifiziert svg { width: 14px; height: 14px; fill: currentColor; }
.zsvm-review p { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--color-text); }
.zsvm-fuss { display: flex; flex-direction: column; gap: 10px; text-align: center; }
/* CTA ist ein <a>: .zlog-btn zentriert nur als <button> (UA-Default) —
   als Anker braucht es flex, sonst klebt der Text oben (Owner 25.08.). */
.zsvm-fuss .zlog-btn { width: auto; display: inline-flex; align-items: center;
	justify-content: center; padding: 0 18px; text-decoration: none; }
.zsvm-echtheit { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--color-text-light); }
.zsvm-echtheit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 700px) {
	.zsvm { width: calc(100vw - 16px); padding: 16px; max-height: calc(100dvh - 24px); }
	.zsvm-review-datum { flex-basis: 100%; margin-left: 0; }
}

/* ── KUNDENSTIMMEN AUF DER PRODUKTSEITE (.zsvs) [B16] ──────────────────────
   includes/zshopvote_stimmen.php, gerendert in der Bewertungszone der Kaufbox.
   Bewusst als eigener, abgesetzter Block: es sind SHOP-Bewertungen (ShopVote),
   keine Produktbewertungen — die Trennung muss auch optisch lesbar sein. */
.zsvs { margin: 14px 0 18px; padding: 14px; text-align: left;
	border: 1px solid var(--color-border); border-radius: var(--radius-medium);
	background: var(--color-bg-alt); }
.zsvs-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.zsvs-kopf img { flex: 0 0 auto; }
.zsvs-kopf h3 { margin: 0; font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	font-size: 16px; line-height: 1.2; text-transform: uppercase; letter-spacing: .02em; }
.zsvs-kopf p { margin: 2px 0 0; font-size: 12.5px; color: var(--color-text-light); }
.zsvs-liste { display: flex; flex-direction: column; gap: 10px; }
.zsvs-stimme { margin: 0; padding: 10px 12px; background: var(--color-bg);
	border: 1px solid var(--color-border); border-radius: var(--radius-small); }
.zsvs-stimme blockquote { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--color-text); }
.zsvs-stimme blockquote::before { content: "„"; }
.zsvs-stimme blockquote::after { content: "“"; }
.zsvs-stimme figcaption { margin-top: 6px; font-size: 12px; color: var(--color-text-light);
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.zsvs-verif { color: var(--color-success); }
.zsvs-verif::before { content: "✓ "; }
.zsvs-hinweis { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--color-text-light); }
.zsvs-hinweis a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.zsvs-mehr { display: block; margin-top: 8px; padding: 0; border: 0; background: none; cursor: pointer;
	font-family: var(--font-body); font-size: 12.5px; font-weight: 700; color: var(--color-text);
	text-decoration: underline; text-underline-offset: 2px; }
.zsvs-mehr:hover { color: var(--color-accent-text, var(--color-accent)); }
/* Bewertungsformular eingeklappt (siehe Kommentar in product_info_v2.php) */
.zpi-ratingbox { margin-top: 12px; }
.zpi-ratingbox > summary { cursor: pointer; list-style: none; font-size: 13px; font-weight: 700;
	color: var(--color-text-light); text-decoration: underline; text-underline-offset: 2px; }
.zpi-ratingbox > summary::-webkit-details-marker { display: none; }
.zpi-ratingbox > summary:hover { color: var(--color-text); }
.zpi-ratingbox[open] > summary { margin-bottom: 10px; }

/* ── PDP CROSS-SELL "Passt dazu" (.zpix) [B16] ─────────────────────────────
   Steht in .zpi-left, also unter Galerie/Mitte neben der Kaufbox — der Bereich
   blieb leer, seit die Kundenstimmen die Kaufspalte verlaengert haben.
   Gerendert werden die REGULAEREN Produktkarten (includes/list_prod_by_id.php):
   ein "In den Warenkorb"-Knopf verlangt die Pflichtangaben, eine abgespeckte
   Kachel waere nicht zulaessig. Deshalb hier nur das Raster, nicht die Karte. */
.zpix { margin: 6px 0 22px; }
.zpix-sub { margin: -8px 0 14px; font-size: 13.5px; color: var(--color-text-light); }
.zpix-grid.icon-container { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
@media (max-width: 700px) {
	.zpix-grid.icon-container { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	/* Mobil ist Cross-Sell Beiwerk, kein Katalog: hoechstens zwei Reihen, sonst
	   schiebt sich der Zusatz vor die eigentliche Produktbeschreibung
	   (Owner 25.08.). Der Reihen-Trimmer kuerzt nur auf volle Reihen, deckelt
	   die Menge aber nicht. */
	.zpix-grid.icon-container > .zcard:nth-of-type(n+5) { display: none; }
}

/* ── WARENKORB-ERINNERUNG (.zce) [B16] ─────────────────────────────────────
   Einmalig, zeitlich begrenzt, unten rechts (dort, wo das ShopVote-Siegel ab
   dem ersten Scrollen verschwindet). Bewusst ruhig: kein Rot, keine Frist —
   sie erinnert, sie draengt nicht. Siehe includes/zcart_erinnerung.php. */
.zce { position: fixed; right: 16px; bottom: 16px; z-index: 10040;
	display: flex; align-items: center; gap: 14px;
	max-width: min(360px, calc(100vw - 32px)); padding: 14px 16px;
	background: var(--color-bg); color: var(--color-text);
	border: 1px solid var(--color-border); border-radius: var(--radius-medium);
	box-shadow: 0 10px 30px rgba(0,0,0,.18);
	opacity: 0; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease; }
.zce[hidden] { display: none !important; }
.zce.is-an { opacity: 1; transform: translateY(0); }
.zce-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zce-text b { font-size: 14px; }
.zce-text span { font-size: 12.5px; color: var(--color-text-light); }
.zce-cta { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
	min-height: 40px; padding: 0 16px; border-radius: var(--radius-medium);
	background: var(--color-accent); color: var(--color-text-inverse); text-decoration: none;
	font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.zce-cta:hover { opacity: .92; }
.zce-zu { position: absolute; top: -9px; right: -9px; width: 26px; height: 26px;
	border: 1px solid var(--color-border); border-radius: 999px; cursor: pointer;
	background: var(--color-bg); color: var(--color-text-light); font-size: 16px; line-height: 1; }
.zce-zu:hover { color: var(--color-text); }
@media (max-width: 700px) {
	.zce { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}
/* Wer weniger Bewegung moechte, bekommt sie nicht. */
@media (prefers-reduced-motion: reduce) {
	.zce { transition: none; transform: none; }
}

/* Senke fuer nachgeruckten Fliesstext (siehe Skript in product_info_v2.php).
   Nur Text landet hier, deshalb reicht Lesetypografie — keine Rasterregeln. */
.zpi-fliess { margin-top: 18px; }
.zpi-fliess[hidden] { display: none !important; }
.zpi-fliess > * { margin: 0 0 1em; }
.zpi-fliess > *:last-child { margin-bottom: 0; }

/* ══ ANGEBOTE-SAMMELSEITE (v2) ════════════════════════════════════════════
   Loest die sechs <style>-Bloecke ab, die die Alt-Fassung im Koerper mitbrachte
   (~22.000 Zeichen je Aufruf) und die dort das Karten-Raster ueberschrieben.
   Das Raster selbst kommt aus .icon-container, die Baender aus .zbanner, die
   Sektionskoepfe aus .zsec-head — hier steht nur, was die Seite zusammenhaelt. */
.zsale { padding-bottom: 30px; }
.zsale-block { margin-top: 48px; scroll-margin-top: 96px; }
.zsale-block:first-of-type { margin-top: 8px; }
/* Nach einem Band steht das Raster dichter darunter als nach einer Ueberschrift:
   das Band ist bereits der Kopf der Sektion. */
.zsale-block .zbanner + .icon-container { margin-top: 18px; }
.zsale-block .zbanner:not(:first-child) { margin-top: 0; }
.zsale-sub { margin: 10px 0 0; font-size: 14px; color: var(--color-text-light); }
.zsale-intro { margin-bottom: 6px; }
.zsale-outro { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--color-border); }
.zsale-leer { padding: 48px 0; text-align: center; color: var(--color-text-light); }
.zsale-mehr { margin-top: 22px; text-align: center; }
.zsale-mehr-btn {
	min-height: 46px; padding: 0 26px;
	border: 1px solid var(--color-border); border-radius: var(--radius-medium);
	background: var(--color-bg); color: var(--color-text);
	font-family: var(--font-disp); font-stretch: var(--font-disp-wdth);
	font-size: 17px; letter-spacing: .04em; cursor: pointer;
}
.zsale-mehr-btn:hover { border-color: var(--color-text); background: var(--color-bg-alt); }
.zsale-mehr-btn:disabled { opacity: .55; cursor: default; }
.zsale-mehr .deals-loader-sentinel { height: 1px; }