/* ==========================================================================
   DSS Design System — "Licht nach Maß"
   Sitewide modern refresh for dersonnenschutz.de. Warm, premium, tactile.
   Enhances the existing Elementor/WooCommerce/Nyture build without changing
   layout structure. Excludes the native configurator (.dss-konfig — own system).
   ========================================================================== */

:root {
	--ds-paper:      #fafaf8;   /* crisp near-white (New-Shades hell, kaum warm) */
	--ds-paper-2:    #f2f1ee;   /* subtle band */
	--ds-surface:    #ffffff;
	--ds-ink:        #221b12;   /* warm espresso near-black */
	--ds-ink-soft:   #6b5e4e;
	--ds-ink-faint:  #9a8c7a;
	--ds-amber:      #db6d0b;   /* brand */
	--ds-amber-deep: #b4530a;
	--ds-amber-tint: #fcefe0;
	--ds-slate:      #35576a;   /* complementary cool accent, used sparingly */
	--ds-line:       #ebe1d3;
	--ds-line-soft:  #f3ece0;
	--ds-r:          14px;
	--ds-r-sm:       10px;
	--ds-r-lg:       22px;
	--ds-r-pill:     999px;
	/* HOME-AESTHETIK: weichere, NewShades-artige Schatten (weniger „boxig") */
	--ds-sh-sm:  0 1px 2px rgba(40,28,12,.04), 0 3px 10px rgba(40,28,12,.05);
	--ds-sh:     0 10px 32px rgba(40,28,12,.08);
	--ds-sh-lg:  0 24px 64px rgba(40,28,12,.12);
	/* HOME-AESTHETIK: Editorial-Maße + Register-B-Tracking */
	--ds-measure:      68ch;   /* Fließtext-Spaltenmaß */
	--ds-measure-lede: 52ch;   /* Lede/Sublines */
	--ds-track-label:  .16em;  /* Uppercase-Label-Tracking (Register B) */
	--ds-ease:   cubic-bezier(.4,0,.2,1);
	--ds-display: "Hanken Grotesk", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--ds-body:    "Hanken Grotesk", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---- Sticky-Fix: overflow-x:hidden auf html/body bricht position:sticky
   für ALLE Nachfahren. `clip` verhindert Horizontal-Scroll genauso, ohne
   einen Scroll-Container zu erzeugen → Sticky (Header + Konfig-Preisbox) geht. */
html, body { overflow-x: clip !important; }

/* ---- Typography -------------------------------------------------------- */
body {
	font-family: var(--ds-body) !important;
	color: var(--ds-ink);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
body, p, li, .elementor-widget-text-editor, .elementor-widget-container p {
	line-height: 1.68;
}
p { color: #3a3128; }

h1, h2, h3, .elementor-heading-title,
h1.entry-title, .page-title h1, .woocommerce-products-header__title {
	font-family: var(--ds-display) !important;
	/* KEINE erzwungene Farbe! Sonst werden Überschriften auf dunklen Sektionen unlesbar
	   (dunkel auf dunkel). Farbe erbt aus der Sektion: hell auf dunkel, dunkel auf hell. */
	font-weight: 700 !important;
	letter-spacing: -.02em !important;
	line-height: 1.14 !important;
	text-wrap: balance;
}
h1, .page-title h1, .woocommerce-products-header__title { font-weight: 600 !important; letter-spacing: -.022em !important; }
/* HOME-AESTHETIK: Skala behutsam angehoben (mehr Editorial-Präsenz, aber KEINE Monster-Headline
   — bleibt unter dem früheren Übergrößen-Stand; H1 max 2.6rem hält die lange Home-H1 zweizeilig). */
h1, .page-title h1, .woocommerce-products-header__title, .elementor-widget-heading h1.elementor-heading-title {
	font-size: clamp(2rem, 2.9vw, 2.6rem) !important; line-height: 1.12 !important;
}
h2, .elementor-widget-heading h2.elementor-heading-title { font-size: clamp(1.5rem, 2.2vw, 2.05rem) !important; }
h3, .elementor-widget-heading h3.elementor-heading-title { font-size: clamp(1.18rem, 1.6vw, 1.44rem) !important; }
h4, h5, h6 { font-family: var(--ds-body); font-weight: 600; letter-spacing: .002em; }

/* uppercase eyebrow labels get real tracking */
.elementor-heading-title[class*="uppercase"], .eyebrow, .elementor-widget-heading .elementor-heading-title small {
	letter-spacing: .14em; text-transform: uppercase; font-family: var(--ds-body); font-weight: 600;
}

/* links */
a { transition: color .16s var(--ds-ease); }
/* FB14: Custom-Button-/CTA-/Card-Links NICHT auf Amber umfärben — sonst wird der Text beim
   Hover so dunkel wie der Amber-Hintergrund (Text==BG) → „oranger Blob ohne Text". */
a:not(.elementor-button):not(.button):not(.wp-block-button__link):not([class*="btn"]):not([class*="cta"]):not([class*="card"]):hover { color: var(--ds-amber-deep); }

/* ---- Buttons (all flavours) ------------------------------------------- */
.elementor-button,
.wp-block-button__link,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce .button.alt,
button.single_add_to_cart_button, a.checkout-button, #place_order,
.wc-block-components-button, .button, input[type="submit"] {
	font-family: var(--ds-body) !important;
	font-weight: 600 !important;
	letter-spacing: .01em !important;
	border-radius: var(--ds-r-sm) !important;
	padding: .92em 1.9em !important;
	border: none !important;
	box-shadow: var(--ds-sh-sm);
	transition: transform .18s var(--ds-ease), box-shadow .2s var(--ds-ease), background-color .18s var(--ds-ease) !important;
	line-height: 1.25 !important;
	text-transform: none !important;
}
/* primary = amber with WHITE text (was black) */
.elementor-button, .wp-block-button__link,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce .button.alt,
button.single_add_to_cart_button, a.checkout-button, #place_order, .wc-block-components-button {
	background-color: var(--ds-amber) !important;
	color: #fff !important;
}
.elementor-button:hover, .wp-block-button__link:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
button.single_add_to_cart_button:hover, a.checkout-button:hover, #place_order:hover, .wc-block-components-button:hover {
	background-color: var(--ds-amber-deep) !important;
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: var(--ds-sh);
}
.elementor-button:focus-visible, .button:focus-visible, #place_order:focus-visible, .single_add_to_cart_button:focus-visible {
	outline: 3px solid rgba(219,109,11,.4); outline-offset: 2px;
}
/* secondary / ghost buttons */
.woocommerce a.button:not(.alt), .woocommerce button.button:not(.alt), .button:not(.alt) {
	background: var(--ds-surface) !important; color: var(--ds-ink) !important;
	border: 1.5px solid var(--ds-line) !important;
}
.woocommerce a.button:not(.alt):hover { border-color: var(--ds-amber) !important; color: var(--ds-amber-deep) !important; transform: translateY(-2px); box-shadow: var(--ds-sh-sm); }
/* F2: empty-cart "Zurück zum Shop" was white-on-white (Elementor page CSS forces
   link color #fff at very high specificity). Make it the amber primary style —
   the inherited white text then reads correctly on the amber fill. */
.woocommerce .return-to-shop a.button.wc-backward,
.return-to-shop a.button.wc-backward,
.woocommerce-cart .return-to-shop a.button.wc-backward {
	background: var(--ds-amber) !important;
	background-color: var(--ds-amber) !important;
	color: #fff !important;
	border: none !important;
}
.woocommerce .return-to-shop a.button.wc-backward:hover,
.return-to-shop a.button.wc-backward:hover,
.woocommerce-cart .return-to-shop a.button.wc-backward:hover {
	background: var(--ds-amber-deep) !important;
	background-color: var(--ds-amber-deep) !important;
	color: #fff !important;
}

/* ---- Cards / product tiles / category tiles --------------------------- */
.elementor-widget-image-box .elementor-image-box-wrapper,
.woocommerce ul.products li.product, .wc-block-grid__product,
.elementor-post, article.type-post, .related.products li.product {
	background: var(--ds-surface);
	border-radius: var(--ds-r) !important;
	transition: transform .22s var(--ds-ease), box-shadow .22s var(--ds-ease);
}
.woocommerce ul.products li.product, .elementor-post, article.type-post {
	overflow: hidden; box-shadow: var(--ds-sh-sm);
	border: 1px solid var(--ds-line-soft);
}
.woocommerce ul.products li.product:hover, .elementor-post:hover, article.type-post:hover {
	transform: translateY(-4px); box-shadow: var(--ds-sh); border-color: var(--ds-line);
}
/* image zoom-on-hover for tiles */
.woocommerce ul.products li.product a img, .elementor-post__thumbnail img {
	transition: transform .5s var(--ds-ease);
}
.woocommerce ul.products li.product:hover a img, .elementor-post:hover .elementor-post__thumbnail img {
	transform: scale(1.05);
}
.woocommerce ul.products li.product .price { color: var(--ds-ink) !important; font-weight: 700; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--ds-body); font-weight: 600; letter-spacing: -.005em; }

/* Elementor rounded cards / boxes get consistent radius + soft border */
.elementor-widget-container > .elementor-image-box-wrapper,
.dss-featurecard, .e-con-inner > .elementor-widget { border-radius: var(--ds-r); }

/* ---- Images — soft rounding + material feel --------------------------- */
.elementor-widget-image img, .wp-post-image, .attachment-woocommerce_thumbnail,
.woocommerce div.product div.images img {
	border-radius: var(--ds-r-sm);
}
figure.woocommerce-product-gallery__wrapper img { border-radius: var(--ds-r); }

/* ---- Header / nav — STICKY beim Scrollen ------------------------------ */
/* Promo-Bar entfixen, damit sie im Header-Fluss liegt; dann klebt der ganze
   Header (Promo + Logo/Nav) zusammen oben — Nav bleibt beim Scrollen sichtbar. */
.elementor-location-header {
	position: sticky !important; top: 0 !important; z-index: 500 !important;
	box-shadow: 0 1px 0 rgba(40,28,12,.06), 0 6px 18px rgba(40,28,12,.05);
	background: #fff;
	/* eigener Compositor-Layer → kein Repaint-Flackern beim Sticky-Scrollen (kein will-change,
	   das kann selbst flackern). Stabiler, ruhiger Sticky-Header ohne Einklapp-Animation. */
	transform: translateZ(0);
}
/* Promo-Bar entfixen, damit sie im Header-Fluss mitklebt (kein separates fixed-Element,
   das vor dem Sticky flackert). */
.elementor-location-header .elementor-element-a250399 { position: static !important; }

/* ---- Sticky-Header HÖHEN-JANK-Fix beim Scrollen ("kaputt beim scroll") -------
   Elementors JS-Sticky hält eine versteckte Promo-Dublette im Header und toggelt deren
   `display` beim Scrollen → der Header-Footprint springt 140↔185px → der Content darunter
   ruckelt/springt. Fix: Footprint auf Desktop fest pinnen (min-height) → konstante Höhe,
   kein Reflow, ruhiger Sticky. NUR Desktop (≥881px) — der Mobile-Header ist bewusst kompakt. */
@media (min-width: 881px) {
	/* FB01: 185px pinnte zu viel Ruhe-Weißraum (Logo-Reihe + Nav ≈ 148px). Auf echte Headerhöhe
	   heruntergezogen → deutlich weniger Leerraum im Ruhezustand, weiterhin ruckelfreier Sticky. */
	.elementor-location-header { min-height: 118px !important; } /* Feedback 15.07.: kompakter (war 150) */
}
/* Elementors (redundanter, 0px) Sticky-Platzhalter raus — CSS-position:sticky führt allein. */
.elementor-location-header .elementor-sticky__spacer { display: none !important; }

/* ===== WARENKORB-FLYOUT & MOBILE-HEADER (C1 + M1/M2) ===== */
/* C1: Das Cart-Flyout/Dropdown darf NIE aus dem Viewport laufen (lief rechts raus). */
.elementor-menu-cart__container { max-width: min(400px, 94vw) !important; }
.elementor-menu-cart__main { right: 0 !important; left: auto !important; max-width: min(360px, 94vw) !important; }
/* M1/M2 (ROOT CAUSE): der Cart-Toggle zeigte die Zwischensumme („83,00 €") → 110px breit → Header
   überläuft die 390px → Cart abgeschnitten + horizontaler Scroll auf ALLEN Seiten. Im mobilen Header
   nur Icon + Zähler-Bubble zeigen (Preis raus), dann passt der Header. */
@media (max-width: 880px) {
	.elementor-location-header .elementor-menu-cart__toggle .elementor-button-text,
	.elementor-location-header .elementor-menu-cart__subtotal { display: none !important; }
	.elementor-location-header .elementor-menu-cart__toggle_button { padding-inline: 8px !important; min-width: 0 !important; }
	/* Header-Inhalt darf nicht breiter als der Viewport werden. */
	.elementor-location-header, .elementor-location-header .e-con-inner, .elementor-location-header .elementor-container { max-width: 100vw !important; }
}
/* #65-Audit: Content-Tabellen (Vergleich/Specs) liefen mobil aus dem Viewport (z.B. /rollo/, /jalousien/).
   Tabelle wird zum horizontal scrollbaren Block → die SEITE läuft nicht mehr über, die Tabelle scrollt in
   sich. Nur Content-Prosa-Tabellen (NICHT WooCommerce-Cart/Checkout-Tabellen). */
@media (max-width: 880px) {
	.elementor-widget-text-editor table,
	.elementor-widget-theme-post-content table,
	.elementor-widget-html table,
	.dss-prose-scope table,
	.entry-content table:not(.shop_table):not(.cart) {
		display: block; width: 100%; max-width: 100%;
		/* overflow-x:auto MUSS die generische Tabellen-Klammer (table{overflow:hidden}
		   für Radius-Clipping, weiter unten, höhere Spezifität) schlagen → !important.
		   Ohne das wurde die Tabelle geklippt statt scrollbar (z.B. /rollo/, /jalousien/
		   Schritt-Tabelle: 379px in 310px-Wrapper, abgeschnitten). */
		overflow-x: auto !important; overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
	}
}
/* nav links: refined weight + amber hover underline */
.elementor-nav-menu .elementor-item, .menu-item a {
	font-family: var(--ds-body); font-weight: 500; letter-spacing: .005em;
	transition: color .16s var(--ds-ease);
}
.elementor-nav-menu .elementor-item:hover, .menu-item a:hover { color: var(--ds-amber-deep) !important; }

/* top promo bar — warm, not flat black */
.dss-promobar, .header-top-bar { letter-spacing: .01em; }

/* ---- Section grounds & rhythm ----------------------------------------- */
/* alternate warm-paper grounds for breathing room (only plain-bg sections) */
.elementor-section.dss-warm, body:not(.woocommerce-cart):not(.woocommerce-checkout) .elementor-section > .elementor-container {
	/* keep layout; just refine */
}
.woocommerce-breadcrumb, .breadcrumbs, nav.woocommerce-breadcrumb {
	color: var(--ds-ink-faint); font-size: .82rem; letter-spacing: .02em;
}
.woocommerce-breadcrumb a { color: var(--ds-ink-soft); }

/* ---- Forms / inputs (checkout, account, search) ----------------------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="search"], input[type="number"], select, textarea,
.woocommerce form .form-row input.input-text, .woocommerce-checkout input, .select2-selection {
	border-radius: var(--ds-r-sm) !important;
	border: 1.5px solid var(--ds-line) !important;
	background: var(--ds-surface);
	transition: border-color .16s var(--ds-ease), box-shadow .16s var(--ds-ease);
	padding: .7em .9em;
}
input:focus, select:focus, textarea:focus, .woocommerce-checkout input:focus {
	border-color: var(--ds-amber) !important;
	box-shadow: 0 0 0 3px rgba(219,109,11,.14) !important;
	outline: none !important;
}

/* ---- Footer ------------------------------------------------------------ */
footer, .site-footer, .elementor-location-footer { }
footer h3, footer h4, .site-footer h3 { font-family: var(--ds-body); font-weight: 700; letter-spacing: .01em; }
footer a { transition: color .16s var(--ds-ease); }
footer a:hover { color: var(--ds-amber) !important; }

/* ---- Trust / badges ---------------------------------------------------- */
.dss-trustbadge, .trusted-shops-badge { filter: none; }

/* ---- Tables (info/comparison) ----------------------------------------- */
table:not(.dss-konfig table) { border-radius: var(--ds-r-sm); overflow: hidden; }
table th { background: var(--ds-paper-2); color: var(--ds-ink); font-family: var(--ds-body); font-weight: 600; }

/* ---- Motion respect ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}

/* ---- Produkt-Above-the-fold: Konfigurator hochziehen (Theme-Builder-Template, alle Produkte) ---- */
/* redundante dunkle „Weitere Produktinformationen"-Überschrift entfernen — der Konfigurator
   hat seine eigene Überschrift direkt darunter; das Band drückte ihn nur nach unten. */
.elementor-element-bb8f7b3 { display: none !important; }
/* dunkles Band neutralisieren → fügt sich ins warme Ground ein statt harter schwarzer Balken */
.elementor-element-cf784c7 { background-color: transparent !important; }
/* die ~132px-Leerraum-Lücke unter den (i)-Boxen schließen */
.elementor-element-ef9c049 { margin-bottom: 24px !important; }

/* ---- Keep the configurator's own design intact ------------------------ */
.dss-konfig, .dss-konfig * { }
.dss-konfig h1, .dss-konfig h2, .dss-konfig h3 { font-family: var(--ds-body) !important; letter-spacing: -.01em !important; }

/* ============================================================================
   NUTZER-FEEDBACK BATCH — Konsistenz (DS-CONSISTENCY / Welle A)
   FB24 Peach-Grund · FB14 Button-Hover · FB01 Header · FB02 Sticky · FB12 Tokens
   · FB17 Trust-Box responsive. FB28 (Trusted-Shops-Siegel) bewusst NICHT hier
   (wird über die offizielle TS-Widget-Integration gelöst).
   ============================================================================ */

/* ---- FB12: konsistente Spacing-Skala + Card-Tokens (Sektions-Rhythmus) ---- */
:root {
	--ds-space-1: 8px;
	--ds-space-2: 16px;
	--ds-space-3: 24px;
	--ds-space-4: 40px;
	--ds-space-5: 64px;
	--ds-card-pad: 24px;   /* einheitliches Card-Innenmaß */
	--ds-card-r:   16px;   /* einheitlicher Card-Radius (Content-Cards) */
	--ds-section-y: clamp(40px, 6vw, 72px); /* vertikaler Sektions-Rhythmus */
	--ds-beige:    #f6f3ec; /* sehr helles, neutrales Warm-Beige (Ersatz für Peach) */
}

/* ---- FB24: „Oma"-Peach (#FEEBDA/#FEEFE4) → sehr helles, neutrales Warm-Beige ----
   Der warme Sektions-Grund kam NICHT aus --ds-paper, sondern aus dem Elementor-Global-
   Accent + dem Nyture-Theme-Accent-2 (beide = #FEEBDA). Amber (#db6d0b) bleibt reiner
   Akzent (Buttons/Eyebrows/Links); nur die breite Grundfläche wird neutral. */
.elementor-kit-14, :root {
	--e-global-color-accent:   #f6f3ec !important;
	--e-global-color-e70d01f:  #f6f3ec !important;
	--site-accent-color-2:     #f6f3ec !important;
	--site-accent-color-2-bg:  rgba(246,243,236,.6) !important;
}
/* Hart kodierte Peach-Grundflächen (Elementor-Container/Spalten mit inline-Background) neutralisieren.
   Nur wenn die Inline-Style-Deklaration BEIDES enthält (background + Peach-Hex) → kein Kollateral. */
[style*="#FEEBDA"][style*="background"], [style*="#feebda"][style*="background"],
[style*="#FEEFE4"][style*="background"], [style*="#feefe4"][style*="background"] {
	background-color: #f6f3ec !important;
}

/* ---- FB14: Amber-BG-Buttons behalten IMMER sichtbaren weißen Text (nie Text==BG) ----
   Belt-and-suspenders zusätzlich zur Link-Hover-Ausnahme oben: die bekannten Amber-Buttons
   werden in allen Zuständen weiß gehalten. (Ghost-Varianten NICHT erfasst — die tragen die
   Klasse ohne Amber-BG bzw. setzen ihre Farbe inline.) */
.dss-catgrid-cta__btn, .dss-catgrid-cta__btn:hover, .dss-catgrid-cta__btn:focus, .dss-catgrid-cta__btn:focus-visible,
.dss-about .btn--primary, .dss-about .btn--primary:hover, .dss-about .btn--primary:focus,
/* LP-Hero-/CTA-Band-Button „Plissee konfigurieren" — Amber-Variante immer weiß; die Ghost-Variante
   (inline transparent + Amber-Text) wird per :not([style*="transparent"]) ausgenommen. */
.dss-lp-cta:not([style*="transparent"]), .dss-lp-cta:not([style*="transparent"]):hover, .dss-lp-cta:not([style*="transparent"]):focus {
	color: #fff !important;
}
/* Elementor-Amber-Buttons: Text in ALLEN Zuständen weiß halten (schlägt per-Widget-Hoverfarben). */
.elementor-button, .elementor-button:hover, .elementor-button:focus, .elementor-button:focus-visible {
	color: #fff !important;
}

/* ---- FB01: Sticky-Header darf beim Ankersprung/Scroll die Überschrift nicht verdecken ---- */
/* Mobil: kompakter 62px-Header (P0-07) → Offset 74px. */
h1, h2, h3, h4, [id] { scroll-margin-top: 74px; }
@media (min-width: 881px) {
	h1, h2, h3, h4, [id] { scroll-margin-top: 130px; } /* = Headerhöhe (118, Feedback 15.07.) + Puffer */
}

/* ---- FB02: Produkt-linke-Spalte (sticky Galerie+Preis) unter den Sticky-Header setzen ----
   Der Konfigurator klebt bei top:24px → lief beim Scrollen halb HINTER den 150px-Header
   („halb abgeschnitten"). Offset = Headerhöhe + Puffer. Nur Desktop (Header ist erst ≥881 sticky). */
@media (min-width: 881px) {
	.dss-konfig__visual { top: 130px !important; }
}

/* ---- FB17: Trust-Box (.home-trust) robuster stacken ----
   Hatte nur einen 640px-Breakpoint → zerbrach zwischen ~640–860px (4 Stats + langer Titel).
   Früher (≤860px) auf Stack + 2-spaltige Stats, ganz schmal 1-spaltig. */
@media (max-width: 860px) {
	.home-trust-top   { flex-direction: column; align-items: center; text-align: center; gap: 14px; }
	.home-trust-stats { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
	.home-trust-foot  { justify-content: center; text-align: center; }
}
@media (max-width: 430px) {
	.home-trust-stats { grid-template-columns: 1fr; }
}

/* ============================================================================
   NUTZER-FEEDBACK BATCH 2 — Konsistenz (WELLE C)
   FB2-01 Cart-Kontrast · FB2-02 „Letzte Aktualisierung" Layout · FB11 Home-Nav
   · FB16 Feature-Cards Alignment · FB20 Footer-Optik.
   (Datum→Juli, CTA-Bänder, Legal-Template, Farb-Swatches: eigene Dateien/DB.)
   ============================================================================ */

/* ---- FB2-01 (#117): Header-Warenkorb-Kontrast --------------------------------
   Der Cart-Toggle ist ein .elementor-button → Design-System machte ihn amber mit
   weißem Text/Icon + roter 0-Bubble → schwer lesbar (image1). Lösung: dunkler,
   klar kontrastierter Cart-Button (Espresso statt Amber), der sich zugleich vom
   restlichen Amber-CTA abhebt. ID-Selektor schlägt die .elementor-button-Regel. */
#elementor-menu-cart__toggle_button.elementor-button,
a.elementor-menu-cart__toggle_button {
	background-color: var(--ds-ink) !important;   /* #221b12 — hoher Kontrast */
	color: #fff !important;
	box-shadow: 0 1px 2px rgba(40,28,12,.16) !important;
}
#elementor-menu-cart__toggle_button.elementor-button:hover,
#elementor-menu-cart__toggle_button.elementor-button:focus-visible,
a.elementor-menu-cart__toggle_button:hover {
	background-color: #3a2c1c !important;   /* leicht aufgehellt beim Hover */
	color: #fff !important;
	transform: translateY(-1px);
}
#elementor-menu-cart__toggle_button .elementor-button-text,
#elementor-menu-cart__toggle_button .woocommerce-Price-amount,
#elementor-menu-cart__toggle_button .woocommerce-Price-amount bdi {
	color: #fff !important; font-weight: 700 !important;
}
#elementor-menu-cart__toggle_button .e-eicon-cart-medium,
#elementor-menu-cart__toggle_button .elementor-button-icon svg {
	fill: #fff !important; color: #fff !important;
}
/* Zähler-Bubble: Amber-Kreis mit weißer Zahl (statt Rot-auf-Orange), mit Ring
   gegen den dunklen Button → klar ablesbar, on-brand. */
#elementor-menu-cart__toggle_button .elementor-button-icon-qty {
	background-color: var(--ds-amber) !important;
	color: #fff !important; font-weight: 700 !important;
	box-shadow: 0 0 0 2px var(--ds-ink) !important;
}

/* ---- FB2-02 (#118a): „Letzte Aktualisierung"-Zeile kompakt inline -------------
   .mb-trust-foot war auf Desktop justify-content:space-between → Kalender-Icon
   ganz links, Text/Links ganz rechts, große Lücke (image2). Jetzt zentriert,
   Icon+Text als eine kompakte Einheit; Kalender-SVG auf Textgröße normiert. */
.mb-trust-foot {
	justify-content: center !important;
	gap: 4px 10px !important;
	text-align: center;
}
.mb-trust-foot .dss-emoji-ic--calendar,
.mb-trust-foot > svg:first-child {
	width: 1.05em !important; height: 1.05em !important;
	flex: none; margin: 0 3px 0 0 !important; vertical-align: -.14em;
	color: var(--ds-amber-deep, #b4530a);
}

/* ---- FB11 (#97): Home-Nav — 6 Boxen auf EINE Linie + Baseline ----------------
   Inline-Style setzte grid repeat(5) bei 6 Items → „Lamellen" wrappte allein in
   Zeile 2. Auf Desktop 6 Spalten. Baseline: Icon-Zeile fixe Höhe, Label unten
   ausgerichtet → keine springenden Baselines, auch wenn ein Label 2 Zeilen hat. */
@media (min-width: 901px) {
	.home-nav { grid-template-columns: repeat(6, 1fr) !important; max-width: 1180px !important; }
}
.home-nav a { justify-content: flex-start !important; }
.home-nav a .ic {
	min-height: 46px; display: flex; align-items: center; justify-content: center;
}
/* Fallback, falls die Lamellen-Kachel (DB) mal fehlt: das ▮▮▮-Zeichen zumindest
   optisch in eine Kachel fassen, damit die Reihe nicht springt. */
.home-nav a .ic:not(:has(.dss-hp-ic)) {
	width: 46px; height: 46px; border-radius: 14px; font-size: 20px !important;
	background: rgba(219,109,11,.09); color: var(--ds-amber, #DD6D0B);
}

/* ---- FB16 (#102): Feature-Cards Icon/Titel-Alignment -------------------------
   .home-why .w: Icon war über dss-hp-ic{margin:0 auto} zentriert, Titel/Text
   linksbündig → schief (image17). Vereinheitlicht auf LINKS (wie Produkt-/About-
   Cards sitewide): Icon linksbündig zum Titel. */
.home-why .w { text-align: left; }
.home-why .w .ic { text-align: left; }
.home-why .w .ic .dss-hp-ic { margin-left: 0 !important; margin-right: 0 !important; }

/* ---- FB20 (#106b): Footer-Optik behutsam aufwerten ---------------------------
   Struktur bleibt (kein Layout-Umbau), nur Hierarchie/Abstände/Hover. */
.elementor-location-footer .elementor-social-icon,
footer .elementor-social-icon {
	transition: transform .16s var(--ds-ease), background-color .16s var(--ds-ease);
}
.elementor-location-footer .elementor-social-icon:hover,
footer .elementor-social-icon:hover {
	transform: translateY(-2px); background-color: var(--ds-amber, #db6d0b) !important;
}
/* Kunden-Service-Kontaktbuttons (Telefon/Mail): einheitlicher Abstand. */
.elementor-location-footer .elementor-button { margin: 4px 0; }
/* SEO-/Legal-Fußbar (dssnav-foot): etwas mehr Luft + klarere Trennlinie. */
.dssnav-foot__pop-in { padding-block: 26px !important; }
.dssnav-foot__inner { border-top: 1px solid rgba(255,255,255,.06); }

/* ============================================================================
   HOME-AESTHETIK — Startseiten-Redesign (Batch 1, reines CSS)
   Ziel: ruhige, warme Wohnwelt-Galerie statt kühlem Shop-Raster.
   Alles unter body.home bzw. auf home-only Elementor-IDs → kollisionsfrei,
   kein Wort/URL geändert, jederzeit durch Löschen dieses Blocks rückbaubar.
   Grundsätze: P1 nur paper/beige (kein Grau) · P2 EIN Amber pro Viewport
   · P4 Editorial-Maß (Fließtext links, 68ch) · P5 eine Kartenfamilie.
   ============================================================================ */

/* ---- 3.7.1 Sektions-Grounds: kühles Grau (#f7f7f7) → warm paper/beige ----
   S1 beige · S2 paper · S3 beige · S4 paper · S5 beige. Die Grounds sind
   per Elementor „classic background" gesetzt → per Element-ID mit !important
   geschlagen (kein Elementor-Content-Eingriff). */
body.home .elementor-element-32c00788,
body.home .elementor-element-2d4ceb9a,
body.home .elementor-element-436193ec { background-color: var(--ds-beige) !important; background-image: none !important; }
body.home .elementor-element-227d7842,
body.home .elementor-element-d186d5   { background-color: var(--ds-paper) !important; background-image: none !important; }
/* Vertikaler Rhythmus der fünf Themen-Sektionen — CLUSTER E (Nutzer: „überall
   ungleichmäßige Abstände, große Weißräume desktop+mobil"): die vorige Skala
   (46–92px) erzeugte auf breiten Screens fast 100px Luft je Sektion × 5 Sektionen
   = spürbare Leerlauf-Strecke. Straffere, aber weiterhin atmende Skala; mobil
   nochmal deutlich enger (kein 40px+ Leerband auf kleinen Screens). */
body.home .elementor-element-32c00788,
body.home .elementor-element-227d7842,
body.home .elementor-element-2d4ceb9a,
body.home .elementor-element-d186d5,
body.home .elementor-element-436193ec { padding-block: clamp(32px, 4vw, 64px) !important; }
@media (max-width: 600px) {
	body.home .elementor-element-32c00788,
	body.home .elementor-element-227d7842,
	body.home .elementor-element-2d4ceb9a,
	body.home .elementor-element-d186d5,
	body.home .elementor-element-436193ec { padding-block: 26px !important; }
}

/* ---- 3.7.2 Banner (.home-band): weiche Rundung + Materialschatten ----
   Höhe bewusst nahe am Ist gehalten (die verpixelten/Clipart-Banner NICHT
   vergrößern — Bild-Ersatz folgt in Batch 2). */
body.home .home-band {
	border-radius: var(--ds-r-lg) !important;
	box-shadow: var(--ds-sh) !important;
	object-fit: cover;
}
/* Banner-Chip (unten links, JS-injiziert aus dss-home-editorial.php).
   Wrapper übernimmt den Banner-Außenabstand; Banner-Eigenmargin genullt, damit
   der Chip zuverlässig INNEN unten sitzt (kein Margin-Collapse-Versatz). */
body.home .dss-bandwrap { position: relative; display: block; margin: 0 auto 30px; }
body.home .dss-bandwrap .home-band { margin: 0 auto !important; display: block; }
@media (max-width: 767px) { body.home .dss-bandwrap { margin-bottom: 22px; } }
body.home .dss-imgchip {
	position: absolute; left: 16px; bottom: 14px; z-index: 2;
	background: rgba(246,243,236,.92); color: var(--ds-ink);
	font-family: var(--ds-body); font-weight: 700;
	text-transform: uppercase; letter-spacing: var(--ds-track-label);
	font-size: .72rem; padding: 8px 14px; border-radius: var(--ds-r-pill);
	box-shadow: 0 2px 10px rgba(40,28,12,.14); backdrop-filter: blur(2px);
}
@media (max-width: 767px) { body.home .dss-imgchip { bottom: 12px; left: 12px; font-size: .66rem; padding: 6px 11px; } }

/* ---- 3.7.4 / P5 Produktkarten (.home-tile) — EINE ruhige Kartenfamilie ----
   Rahmen weg, weicher Schatten, 3:2-Bild, „Mehr erfahren" leise. */
body.home .home-tile {
	border: 0 !important;
	border-radius: var(--ds-card-r) !important;
	background: var(--ds-surface) !important;
	box-shadow: var(--ds-sh-sm) !important;
	transition: transform .22s var(--ds-ease), box-shadow .22s var(--ds-ease) !important;
}
body.home .home-tile:hover { transform: translateY(-4px) !important; box-shadow: var(--ds-sh) !important; }
/* Warm getönter Bildrahmen: eine noch nicht geladene (lazy, fetchpriority=low)
   oder ausnahmsweise fehlende Karte zeigt eine ruhige Beige-Fläche statt stark-
   weißem „Defekt"-Eindruck. */
body.home .home-tile .ti { aspect-ratio: 3 / 2; background: var(--ds-beige); }
body.home .home-tile .ti img { width: 100%; height: 100% !important; object-fit: cover; }
body.home .home-tile .tl { padding: 15px 18px 18px !important; }
body.home .home-tile .tl strong { font-size: 1.05rem; letter-spacing: -.005em; color: var(--ds-ink); }
body.home .home-tile .tl .td { color: var(--ds-ink-soft); font-size: .92rem; }
/* „Mehr erfahren →": leiser Text, nur der Pfeil amber (Amber-Rauschen raus). */
body.home .home-tile .tl .tarrow {
	color: var(--ds-ink-soft) !important; font-weight: 600 !important;
	display: inline-flex; gap: 4px; transition: color .16s var(--ds-ease);
}
body.home .home-tile:hover .tl .tarrow { color: var(--ds-amber-deep) !important; }

/* ---- 3.5 USP-Streifen (.home-usp) — Chrome weg, NewShades-Strip ----
   Kein BG/Border/Schatten; Icon-Chip amber-tint, Titel Register B, links. */
body.home .home-usp .u {
	background: transparent !important; border: 0 !important; box-shadow: none !important;
	text-align: left !important; padding: 8px 10px !important;
	min-width: 0;   /* Grid-Kind darf unter min-content schrumpfen (verhindert Overflow) */
}
body.home .home-usp .u .ic { margin: 0 0 12px !important; }
body.home .home-usp .u strong {
	text-transform: uppercase; letter-spacing: var(--ds-track-label);
	font-size: .82rem !important; color: var(--ds-ink) !important;
	overflow-wrap: anywhere;   /* „TIEFPREISGARANTIE" darf umbrechen statt zu sprengen */
}
body.home .home-usp .u span { color: var(--ds-ink-soft) !important; font-size: .9rem !important; }
/* minmax(0,1fr) statt 1fr → Spalten sprengen die Breite nicht (Uppercase+Tracking).
   Fix gegen den mobilen Horizontal-Overflow. Zentrierung (max-width 1000) bleibt. */
body.home .home-usp { grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
@media (max-width: 700px) { body.home .home-usp { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
@media (max-width: 480px) {
	/* Enges Tracking + KEIN Wortumbruch mitten im Wort (die Basisregel setzt
	   overflow-wrap:anywhere für „TIEFPREISGARANTIE" — das zerbrach „MASSANFERTIGUNG"
	   zu „MASSANFERTIGUN G" bei 390px). Reduziertes Tracking sorgt fürs Einpassen. */
	body.home .home-usp .u strong { letter-spacing: .03em; overflow-wrap: normal; word-break: normal; hyphens: none; }
}

/* ---- 3.6 Themen-Kacheln (.home-nav) — ruhige Surface-Kachel ---- */
body.home .home-nav a {
	background: var(--ds-surface) !important;
	border: 1px solid var(--ds-line-soft) !important;
	border-radius: var(--ds-card-r) !important;
	box-shadow: var(--ds-sh-sm) !important;
	transition: transform .18s var(--ds-ease), box-shadow .18s var(--ds-ease), border-color .18s var(--ds-ease) !important;
}
body.home .home-nav a:hover { transform: translateY(-3px) !important; box-shadow: var(--ds-sh) !important; border-color: var(--ds-line) !important; }

/* ---- 3.4 + 3.7.3 Editorial-Textmaß ----
   Sublines bleiben zentrierte Lede (≤2 Zeilen); die langen Fließtext-Absätze
   werden linksbündig, 68ch, mittige Spalte, 1.75 Zeilenhöhe. Kein Wort geändert. */
body.home .elementor-element-629cf83c,
body.home .elementor-element-6fb303db,
body.home .elementor-element-2ca3068b,
body.home .elementor-element-19390fb9,
body.home .elementor-element-47123bc0 {
	max-width: var(--ds-measure-lede); margin-inline: auto; text-align: center;
}
body.home .elementor-element-167b644f,
body.home .elementor-element-7b6b2b8f,
body.home .elementor-element-617e9489,
body.home .elementor-element-6e7663b2,
body.home .elementor-element-42c61510 {
	max-width: var(--ds-measure); margin-inline: auto;
}
body.home .elementor-element-167b644f .elementor-widget-container,
body.home .elementor-element-7b6b2b8f .elementor-widget-container,
body.home .elementor-element-617e9489 .elementor-widget-container,
body.home .elementor-element-6e7663b2 .elementor-widget-container,
body.home .elementor-element-42c61510 .elementor-widget-container { text-align: left !important; }
body.home .elementor-element-167b644f p,
body.home .elementor-element-7b6b2b8f p,
body.home .elementor-element-617e9489 p,
body.home .elementor-element-6e7663b2 p,
body.home .elementor-element-42c61510 p { text-align: left !important; line-height: 1.75 !important; }

/* ---- 3.9 Brand-Trust-Karte (.home-trust) — Kennzahlen beruhigen ----
   Zahlen → Ink; nur Stern + „4,65/5" bleiben amber. Kicker Register B. */
body.home .home-trust { box-shadow: var(--ds-sh-lg) !important; border: 0 !important; border-radius: var(--ds-r-lg) !important; }
body.home .home-trust-stats .num { color: var(--ds-ink) !important; font-weight: 700; }
/* Nur die Bewertungs-Kennzahl (enthält den Stern-SVG) behält Amber. */
body.home .home-trust-stats .num:has(svg),
body.home .home-trust-stats .num:has(.dss-emoji-ic--star) { color: var(--ds-amber-deep) !important; }
body.home .home-trust .kicker { letter-spacing: var(--ds-track-label); color: var(--ds-amber-deep) !important; }
body.home .home-trust hr { border-top-color: var(--ds-line-soft) !important; }

/* ---- 3.8 Fachhändler-Cards (.home-why) — Rahmen weg, weicher Schatten ---- */
body.home .home-why .w {
	border: 0 !important; box-shadow: var(--ds-sh-sm) !important;
	border-radius: var(--ds-card-r) !important;
}
/* „Über uns" wird Ghost (der EINE Amber-CTA bleibt „Kostenlose Stoffmuster").
   Schlägt die FB14-Regel (.elementor-button{color:#fff}) per höherer Spezifität. */
body.home a.elementor-button[href*="das-unternehmen"],
body.home a.elementor-button[href*="das-unternehmen"]:hover,
body.home a.elementor-button[href*="das-unternehmen"]:focus {
	background-color: transparent !important;
	color: var(--ds-ink) !important;
	border: 1.5px solid var(--ds-line) !important;
	box-shadow: none !important;
}
body.home a.elementor-button[href*="das-unternehmen"]:hover { border-color: var(--ds-amber) !important; color: var(--ds-amber-deep) !important; }

/* ---- 3.11 Dunkles CTA-Band (Home „Finde deinen…", Element 2b6cc32c) ----
   Flachschwarz → warmes Espresso mit Amber-Glut; 2. Button („Jetzt beraten
   lassen" → /kontakt/) wird Ghost-Weiß. Der 1. Button (Amber) führt. */
body.home .elementor-element-2b6cc32c {
	background-color: var(--ds-ink) !important;
	background-image: radial-gradient(1100px 480px at 85% -10%, rgba(219,109,11,.16), transparent 60%) !important;
}
body.home .elementor-element-2b6cc32c a.elementor-button[href*="kontakt"],
body.home .elementor-element-2b6cc32c a.elementor-button[href*="kontakt"]:hover,
body.home .elementor-element-2b6cc32c a.elementor-button[href*="kontakt"]:focus {
	background-color: transparent !important;
	color: #fff !important;
	border: 1.5px solid rgba(255,255,255,.3) !important;
	box-shadow: none !important;
}
body.home .elementor-element-2b6cc32c a.elementor-button[href*="kontakt"]:hover { background-color: rgba(255,255,255,.08) !important; }

/* ---- 3.3 Hero: Eyebrow auf Register B, schwebendes TS-Badge auf Home aus ---- */
body.home .elementor-element-44af5cc5 {
	letter-spacing: var(--ds-track-label) !important;
	font-size: .8rem !important; font-weight: 700 !important;
	color: var(--ds-amber-deep) !important;
}
/* Trusted-Shops-Overlay (fixed) auf der Startseite ausblenden — die statische
   Trust-Zeile im Hero (dss-hero-grid.php) ersetzt es dramaturgisch. */
body.home [id^="trustbadge-container"],
body.home [id^="minimized-trustbadge"] { display: none !important; }
/* Statische Hero-Trust-Zeile (aus dss-hero-grid.php injiziert) */
.dss-hero-trust {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
	gap: 6px 10px; margin: 14px auto 2px; font-size: .9rem; color: var(--ds-ink-soft);
	font-family: var(--ds-body); text-align: center;
}
.dss-hero-trust .dss-emoji-ic--star, .dss-hero-trust svg.dss-emoji-ic { color: var(--ds-amber, #db6d0b); }
.dss-hero-trust .sep { color: var(--ds-ink-faint); }

/* ---- 3.2 Header: „Gratis-Muster"-Pill wird der EINE leise Header-CTA ----
   (amber-tint statt blasser Warm-Pill mit Rahmen). */
.dssnav__sample {
	background: var(--ds-amber-tint) !important; border-color: transparent !important;
	color: #8a4a08 !important; font-weight: 700 !important;
}
.dssnav__sample:hover { background: #f8e3cd !important; border-color: transparent !important; }
.dssnav__sample svg { color: var(--ds-amber-deep) !important; }

/* ---- 3.1 Topbar: Newsletter-Link weicher (weniger Voll-Amber-Rauschen) ---- */
.elementor-element-a250399 a { color: #e08a3c !important; }

/* ---- 3.12 Footer mobil: Spaltenüberschriften auf Register B ---- */
footer h3, .site-footer h3, .elementor-location-footer h3,
footer h4, .site-footer h4 {
	text-transform: uppercase; letter-spacing: var(--ds-track-label); font-size: .82rem;
}
/* P8-Fix: die vier Footer-Spalten (Shop/Infos/Bestellung/Wissenswertes) sind flex-row
   [Überschrift | Links] → mobil steht die Überschrift NEBEN den Links. Auf Mobil stapeln
   (Überschrift ÜBER die Links). Nur ≤880px + nur diese 4 Container → kein Desktop-Risiko. */
@media (max-width: 880px) {
	.elementor-location-footer .elementor-element-a8faa44,
	.elementor-location-footer .elementor-element-a782a48,
	.elementor-location-footer .elementor-element-1a0ab6f,
	.elementor-location-footer .elementor-element-a9fcf5b { flex-direction: column !important; }
}

/* ============================================================================
   HOME-FINISH — Abschluss der Startseiten-Ästhetik (3 Punkte)
   (a) Hero-Split: reines JS+CSS in dss-hero-grid.php (hier nichts nötig).
   (b) Elementor-Banner-Promote (Thermo/Insekten): Bild-Framing bewahren.
   (c) Mobiler KATEGORIEN-Balken → Espresso (konsistent mit Cart-Button).
   ============================================================================ */

/* ---- (c) 3.2 Mobiler KATEGORIEN-Balken (#dssnav-burger) → Espresso ----
   War voll-amber mit schwarzem Text → jetzt Espresso (--ds-ink) + weißer Text/Icon,
   konsistent mit dem Warenkorb-Button (FB2-01). Macht den Gratis-Muster-CTA zum
   EINZIGEN Amber im Mobil-Viewport (P2). Element ist mobil-only (display:none ≥Desktop),
   daher sitewide unkritisch. NUR CSS auf die dss-navigation.php-Klasse (Markup NICHT
   anfassen — Welle-2 arbeitet dort). id+class schlägt eine evtl. id-only-Regel. */
#dssnav-burger.dssnav__burger,
button.dssnav__burger {
	background: var(--ds-ink) !important;
	color: #fff !important;
}
#dssnav-burger.dssnav__burger:hover,
#dssnav-burger.dssnav__burger:focus-visible,
button.dssnav__burger:hover {
	background: #3a2c1c !important;
	color: #fff !important;
}
#dssnav-burger.dssnav__burger svg,
button.dssnav__burger svg { stroke: #fff !important; color: #fff !important; }
#dssnav-burger.dssnav__burger span,
button.dssnav__burger span { color: #fff !important; }

/* ---- (b) Promotetes Insekten-Banner: Bild-Ausschnitt bewahren ----
   Nach dem DB-Promote (Bild liegt jetzt server-seitig) wird das Framing des
   Insekten-Banners stabil gehalten (leichter Versatz nach unten). Das Thermo-Banner
   trägt die Klasse .home-band-down (object-position:center 25% !important, im
   Elementor-Style-Block) — dessen Ausschnitt zeigt sauber die Wabenstruktur und
   bleibt daher unberührt. */
body.home .elementor-element-436193ec .home-band { object-position: center 55%; }

/* ============================================================================
   CLUSTER E [P2] — Blocksatz raus (Rivers / „Wort-Flüsse")
   `text-align:justify` erzeugt auf schmalen mobilen Spalten hässliche Wortlücken.
   Hauptquelle: `.elementor-icon-list-text{text-align:justify!important}` (global,
   0,1,0) → ~27 justierte USP-Bullets auf JEDER PDP. Höhere Spezifität + !important
   schlägt die Inline-Post-CSS-Regel. Fließtext/Listen zusätzlich linksbündig (ohne
   !important → zentrierte Hero-/CTA-Designs bleiben unberührt). Konfigurator-Prosa
   ist ebenfalls linksbündig gewollt (harmlos).
   ============================================================================ */
/* WURZEL: das WooCommerce-Produkt-Content-Widget trägt (PDP-weit) text-align:justify →
   der GESAMTE Teilbaum (Breadcrumb, Konfig-Inhalt, Cross-Sell, USP-Listen) erbt Blocksatz.
   Am Widget/Container auf left zwingen → linksbündig erbt sauber nach unten; Elemente mit
   eigener Ausrichtung (Konfig) behalten ihre. Nur PDP-Content, kein Kollateral. */
body .elementor-widget-woocommerce-product-content,
body .elementor-widget-woocommerce-product-content > .elementor-widget-container { text-align: left !important; }
.elementor-widget-icon-list .elementor-icon-list-text,
.elementor-widget-icon-list .elementor-icon-list-item,
.elementor-icon-list-items .elementor-icon-list-text { text-align: left !important; }
.elementor-widget-text-editor, .elementor-widget-text-editor p, .elementor-widget-text-editor li,
.elementor-widget-theme-post-content p, .elementor-widget-theme-post-content li,
.entry-content p, .entry-content li, .dss-prose-scope p, .dss-prose-scope li,
.woocommerce-product-details__short-description,
.woocommerce-Tabs-panel p, .woocommerce-Tabs-panel li { text-align: left; }

/* ============================================================================
   CLUSTER C — Modell-/Cross-Sell-Karten-Grid (.dss-modell*, „Passende Modelle")
   Quelle der großen Leerflächen unter Preis/CTA: modelle.css lässt `.dss-modell__sub`
   per flex:1 1 auto mitwachsen, wenn eine Karte in der Reihe kürzeren Text hat als
   ihre Nachbarn (Grid stretch macht alle Karten gleich hoch) — der Wachstumsraum
   landet MITTEN in der Karte statt kontrolliert unten, dazu variiert die Titelzeilen-
   zahl (1 vs. 2 Zeilen) die Bildposition. Fix: Titel/Bild deterministisch, Preis+CTA
   fest per margin-top:auto ans Kartenende genagelt — Wachstum passiert NUR noch am
   Kartenende, nie mehr „im Nichts". Überschreibt modelle.css gezielt (lädt NACH
   diesem File) → hier zwingend mit !important, sonst gewinnt die spätere Kaskade. */
.dss-modelle__grid { align-items: stretch !important; }
.dss-modell { display: flex !important; flex-direction: column !important; height: 100% !important; }
.dss-modell__body { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; }
/* Untertitel bleibt oben ausgerichtet (kein Mit-Wachsen mehr) — die einzige
   wachsende Fläche ist ab jetzt die Lücke vor .dss-modell__foot. */
.dss-modell__sub { flex: 0 1 auto !important; }
.dss-modell__foot { margin-top: auto !important; padding-top: 12px; }
/* Titel auf feste 2-Zeilen-Höhe clampen — verhindert, dass 1-zeilige Titel das
   Bild/den Rest der Karte nach oben rutschen lassen (ungleiche Kartenoptik). */
.dss-modell__name {
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
	overflow: hidden; min-height: 2.5em;
}
/* Mobil (≤560px): volle Bildbreite oben, Body darunter statt Bild-links/Text-rechts
   (Brief: „mobil 1-spaltig, Bild volle Breite"). Grid ist ab 560px bereits 1-spaltig
   (modelle.css) — hier nur die Karten-interne Reihen-Richtung zurück auf Spalte. */
@media (max-width: 560px) {
	.dss-modell { flex-direction: column !important; }
	.dss-modell__imgwrap { width: 100% !important; flex: none !important; aspect-ratio: 4 / 3 !important; }
	.dss-modell__body { width: 100% !important; }
}

/* ---- Punkt 4: „Mehr Modelle anzeigen" / „+XX weitere" konsistent + Ghost-Look ----
   Muss in JEDEM Zustand (Ruhe/Hover/Fokus) denselben Radius behalten (kein Sprung)
   und darf NIE schwarz-auf-orange sein — sekundärer Ghost-Button, kein Primär-CTA. */
.dss-modelle__more,
.dss-modelle__more:hover,
.dss-modelle__more:focus,
.dss-modelle__more:focus-visible {
	border-radius: var(--ds-r-pill, 999px) !important;
	background-color: var(--ds-surface, #fff) !important;
	color: var(--ds-ink, #221b12) !important;
	border: 1.5px solid var(--ds-line, #ebe1d3) !important;
}
.dss-modelle__more:hover,
.dss-modelle__more:focus-visible {
	border-color: var(--ds-amber, #db6d0b) !important;
	color: var(--ds-amber-deep, #b4530a) !important;
	background-color: var(--ds-beige, #f6f3ec) !important;
}