/* =====================================================================
   stegplattenversand.de – de-thema.css
   Die Stildatei des neuen .de-Designs und Grundlage des Design-Systems (Entscheid 02.11.2026).
   Dazu: de-fuss.css (Fuß und seitenweite Übergangsregeln, lädt überall) und die Modul-Stile von Megamenü und Seitenmenü.
   Lädt nur, wo ein Modul sie einbindet: umgestellte Seiten (sv-de-thema.php), Kategorien und Produkte
   (sv-de-kategorien.php, sv-de-produkte.php, sv-de-probe-*.php), seit Welle C1 auch Warenkorb und Kasse (sv-de-thema.php, ohne
   Danke- und Bezahlseite). Nicht auf /produkte/, Konto.
   Entstanden 28.10.2026 aus nl-thema.css (gleiche Bausteine, gleiche Werte; .nl ist das Muster).

   Hausregeln (aus den Fehlern von .de gelernt):
   1. Eine Bausteinfamilie (sv-…). Keine zweite Familie, keine Altklassen.
   2. Farben, Abstände, Rundungen nur in Abschnitt 1 (Tokens). Danach nur var(--sv-…).
   3. Kein !important, kein @layer, keine Seiten-IDs, keine Stile im Seiteninhalt.
   4. :is()/:where() sind erlaubt: WP Rocket „Used CSS“ liefert sie aus (geprüft 02.11.2026 auf /, /versand/,
      /produkte/stegplatten/). Sparsam einsetzen und das Gewicht von :is() beachten.
   5. Höchstens zwei Klassen tief. Zustände nur über Modifier (--…) oder details[open].
   6. Bilder nie beschneiden (contain auf Hellgrau). Kein farbiger Rand links. Keine Emojis.
   7. Mobil zuerst geprüft: alles funktioniert ab 320 px ohne Querscrollen.
   Aufbau: 1 Tokens · 2 Schriften · 3 Grundlage · 4 Raster · 5 Text · 6 Bausteine
           7 Seitenkopf · 8 Fuß · 9 Bewegung und Fokus · 10 Shop (Kategorie, Produkt)
           11 Shop (Warenkorb, Kasse) · 12 Kontaktformular · 13 Begleitspalte · 14 Ratgeber-Bausteine
   ===================================================================== */

/* ---------- 1 Tokens ---------- */
:root{
  /* Text */
  --sv-text:#1F2124;              /* 16,1:1 auf Weiß */
  --sv-text-mid:#3A3D42;          /* 10,9:1 */
  --sv-text-soft:#55585E;         /* 7,1:1 */
  --sv-text-inverse:#FFFFFF;
  --sv-text-soft-on-dark:#A9B9C8; /* 7,4:1 auf --sv-surface-dark (Nachtblau) */
  /* Marke und Führung */
  --sv-brand-primary:#CC3333;     /* Rot = Handlung, Preis. Weiß darauf 5,1:1 */
  --sv-brand-primary-hover:color-mix(in oklch,var(--sv-brand-primary),black 8%); /* wie .de */
  --sv-brand-primary-on-dark:#F06A6A;
  --sv-link:#004D33;              /* Grün = Führung, Links, Häkchen. 10,0:1 */
  --sv-link-hover:#00331F;
  --sv-gruen-tint:#E8F1EC;
  /* Dritte Farbe „Glasblau“ (Inhaber 05.11.2026): Flächen, Marken, Infomeldungen – nie Links, Knöpfe, Fließtext, Kennzahl-Werte */
  --sv-himmel-tint:#EAF3FB;
  --sv-himmel-linie:#D6E6F5;
  --sv-glasblau:#1D5C96;          /* 6,9:1 auf Weiß, 6,2:1 auf --sv-himmel-tint */
  --sv-glasblau-on-dark:#9CC7EE;  /* 8,4:1 auf --sv-surface-dark */
  /* Flächen und Linien */
  --sv-bg:#FFFFFF;
  --sv-bg-alt:#F5F7F9;              /* kühles Hellgrau (bis 05.11.2026 #F4F5F2) */
  --sv-bg-soft:#FAFBFC;
  --sv-kopf-flaeche:#F5F5F7;      /* Kopfleiste wie .de (WoodMart-Panel) */
  --sv-surface-dark:#15293B;         /* Nachtblau (bis 05.11.2026 #2C2C2E); Weiß darauf 14,9:1 */
  --sv-surface-dark-deep:#0C1A27;
  --sv-border-subtle:#E3E7EB;
  --sv-border:#C8CED5;
  --sv-border-strong:#868C94;       /* 3,4:1 auf Weiß */
  /* Status: je Fläche und Schrift; Werte wie bisher aus sv-alt.min.css, Schrift auf Fläche mindestens 4,8:1 */
  --sv-warning-bg:#FFF8E1;
  --sv-warning-strong:#9F5E00;    /* 4,8:1 auf --sv-warning-bg */
  --sv-success-bg:#E8F1EC;
  --sv-success-strong:#004D33;    /* 8,6:1 */
  --sv-error-bg:#FFEBEB;
  --sv-error-strong:#C22A1F;      /* 5,0:1 */
  --sv-info-bg:#EAF3FB;              /* = --sv-himmel-tint */
  --sv-info-strong:#1D5C96;       /* = --sv-glasblau, 6,2:1 */
  --sv-focus-ring:#CC3333;        /* 5,1:1 auf Weiß; auf dunklen Flächen gilt --sv-brand-primary-on-dark */
  --sv-shadow-md:0 2px 8px rgba(0,0,0,.06);
  --sv-shadow-kasten:0 0 5px rgba(0,0,0,.1);     /* Kaufkasten wie .de */
  --sv-linie-gestrichelt:rgba(0,0,0,.106);
  /* Schrift */
  --sv-schrift-titel:"SV Barlow","SV Barlow Fallback",Arial,sans-serif;
  --sv-schrift-text:"SV Source Sans 3","SV Source Sans 3 Fallback",Arial,sans-serif;
  --sv-fs-klein:14px;
  --sv-fs-text:16px;
  --sv-fs-lede:18px;
  --sv-fs-h1:36px;
  --sv-fs-h2:32px;
  --sv-fs-h3:24px;
  --sv-zeile:1.6;
  /* Abstände (8er-Raster) */
  --sv-xs:8px; --sv-sm:16px; --sv-md:24px; --sv-lg:48px; --sv-xl:80px;
  --sv-breite-max:1400px;
  --sv-rand:20px;
  --sv-lesebreite:62ch;
  /* Rundungen */
  --sv-r-klein:8px; --sv-r:12px; --sv-r-gross:18px; --sv-r-pill:999px;
  /* Bedienmaße */
  --sv-touch:48px;
}
@media (max-width:767px){
  :root{--sv-fs-h1:28px;--sv-fs-h2:26px;--sv-fs-h3:22px;--sv-xl:48px;--sv-lg:32px;--sv-rand:16px}
}

/* ---------- 2 Schriften (im Theme selbst gehostet, liegen in woodmart-child/css/) ---------- */
@font-face{font-family:"SV Barlow";font-weight:600;font-style:normal;font-display:swap;src:url("css/barlow-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"SV Barlow";font-weight:700;font-style:normal;font-display:swap;src:url("css/barlow-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"SV Source Sans 3";font-weight:400;font-style:normal;font-display:swap;src:url("css/source-sans-3-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"SV Source Sans 3";font-weight:600;font-style:normal;font-display:swap;src:url("css/source-sans-3-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"SV Source Sans 3";font-weight:700;font-style:normal;font-display:swap;src:url("css/source-sans-3-latin-700-normal.woff2") format("woff2")}
/* Ersatzschriften bis die Schriften geladen sind: Arial mit angepassten Maßen je Gewicht (gegen Layout-Sprünge),
   gleiche Werte wie in sv-alt.min.css, damit sie mit dessen Abbau nicht wegfallen */
@font-face{font-family:"SV Source Sans 3 Fallback";src:local("Arial"),local("ArialMT"),local("Arimo"),local("Liberation Sans");font-weight:400;size-adjust:92.01%;ascent-override:111.29%;descent-override:43.47%;line-gap-override:0%}
@font-face{font-family:"SV Source Sans 3 Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Arimo Bold"),local("Liberation Sans Bold");font-weight:600 700;size-adjust:91.60%;ascent-override:111.79%;descent-override:43.67%;line-gap-override:0%}
@font-face{font-family:"SV Barlow Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Arimo Bold"),local("Liberation Sans Bold");font-weight:600 700;size-adjust:91.98%;ascent-override:108.72%;descent-override:21.74%;line-gap-override:0%}

/* ---------- 3 Grundlage ---------- */
body{margin:0;background:var(--sv-bg);-webkit-text-size-adjust:100%}
/* Schrift und Farbe nur für eigene Bereiche: im Shop gehören Kopf und Fuß (WoodMart) bis zur Umstellung der alten Datei */
.sv-seite,.sv-seitenkopf{font-family:var(--sv-schrift-text);font-size:var(--sv-fs-text);line-height:var(--sv-zeile);color:var(--sv-text-mid)}
.sv-seite h1,.sv-seite h2,.sv-seite h3{margin:0;font-family:var(--sv-schrift-titel);font-weight:700;color:var(--sv-text);text-wrap:balance}
.sv-seite h1{font-size:var(--sv-fs-h1);line-height:1.15}
.sv-seite h2{font-size:var(--sv-fs-h2);line-height:1.2;letter-spacing:-.01em}
.sv-seite h3{font-size:var(--sv-fs-h3);line-height:1.3}
.sv-seite p{margin:0}
.sv-seite a{color:var(--sv-link)}
.sv-seite a:hover{color:var(--sv-link-hover)}
.sv-seite img{max-width:100%;height:auto}
/* Shop-Rahmen: WoodMart setzt Listenabstand, fette Schrift 600, Tabellenränder und -abstand; hier wie auf der Fläche */
.sv-seite li{margin-bottom:0}
.sv-seite strong,.sv-seite b{font-weight:bolder}
.sv-pfad a{text-decoration:underline}
.sv-meta a{text-decoration:underline}

/* ---------- 4 Raster ---------- */
.sv-abschnitt{position:relative;padding-block:var(--sv-xl)}
/* Im Shop-Rahmen (WoodMart setzt oben schon 40 px): erster Abschnitt ohne eigenen Abstand oben, sonst doppelter Leerraum unter dem Kopf */
.main-page-wrapper .sv-seite>.sv-abschnitt:first-child{padding-top:0}
/* Im Shop-Rahmen: Seiten im neuen Design (body.sv-de-thema) nutzen die volle Breite; Breite und Rand setzt .sv-breite.
   Warenkorb und Kasse (body.sv-de-kasse, Welle C1) behalten WoodMarts Rahmen; :where() hält das Gewicht gleich. */
.sv-de-thema:where(:not(.sv-de-kasse)) .content-layout-wrapper{max-width:none;padding-inline:0}
/* Bänder „Glasblau“ (Inhaber 05.11.2026): das erste Band einer Seite wird hellblau, das zweite hellgrau, jedes weitere weiß
   mit feiner Linie – so bleibt höchstens ein graues Band, ohne Seiten umzubauen. Bausteine auf einem farbigen Band werden über
   --sv-baustein-flaeche weiß; weiße Bänder setzen sie zurück. Zwei weiße Abschnitte trennt eine Linie.
   Die Geschwisterketten mit drei Klassen sind die bewusste Ausnahme von Hausregel 5. */
.sv-abschnitt--band,.sv-abschnitt--himmel{--sv-baustein-flaeche:var(--sv-bg);background:var(--sv-himmel-tint)}
.sv-abschnitt--band~.sv-abschnitt--band{background:var(--sv-bg-alt)}
.sv-abschnitt--band~.sv-abschnitt--band~.sv-abschnitt--band{--sv-baustein-flaeche:initial;background:var(--sv-bg);border-block:1px solid var(--sv-border-subtle)}
.sv-abschnitt+.sv-abschnitt:not(.sv-abschnitt--band){border-top:1px solid var(--sv-border-subtle)}
.sv-abschnitt--band+.sv-abschnitt:not(.sv-abschnitt--band){border-top:0}
.sv-abschnitt--linie{border-top:1px solid var(--sv-border-subtle)}
.sv-breite{max-width:var(--sv-breite-max);margin-inline:auto;padding-inline:var(--sv-rand);box-sizing:border-box}
.sv-stapel{display:flex;flex-direction:column;gap:var(--sv-md)}
.sv-stapel--weit{gap:var(--sv-lg)}
.sv-stapel--eng{gap:var(--sv-sm)}
.sv-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--sv-md)}
.sv-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.sv-anker{position:absolute;top:-80px}

/* ---------- 5 Text ---------- */
.sv-kopf{display:flex;flex-direction:column;gap:var(--sv-sm);max-width:var(--sv-lesebreite)}
.sv-chip{font-size:var(--sv-fs-klein);font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--sv-link)}
.sv-zusatz{color:var(--sv-text-soft)}
.sv-hero .sv-zusatz{color:var(--sv-brand-primary)}
.sv-lede{font-size:var(--sv-fs-lede);line-height:1.6;color:var(--sv-text-mid);max-width:var(--sv-lesebreite)}
.sv-meta{font-size:var(--sv-fs-klein);color:var(--sv-text-soft)}
.sv-pfad{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;font-size:var(--sv-fs-klein);color:var(--sv-text-soft)}
.sv-pfad li+li::before{content:"›";margin-right:8px}

/* Textlinks im Fließtext (Welle K, 04.11.2026): Links ohne eigene Klasse in Absätzen tragen einen Unterstrich –
   Farbe allein reicht nicht (Grün neben Dunkelgrau 1,09:1, WCAG 1.4.1). :where() hält das Gewicht niedrig.
   Ausnahme von Hausregel 1: .sv2 ist der Rahmen des Staging-Stils (Kategorien, Produkte); der Eintrag fällt
   weg, wenn sv2 in die sv-Familie aufgeht (Prüfung 03.11.2026, Befund 1). Gemessen: 20 Links auf 13 Seiten. */
:where(.sv-seite,.sv2) p a:not([class]){text-decoration:underline;text-underline-offset:.15em}

/* ---------- 6 Bausteine ---------- */
/* Knöpfe */
.sv-knopf{display:inline-flex;align-items:center;justify-content:center;min-height:var(--sv-touch);padding:0 var(--sv-md);box-sizing:border-box;border:2px solid transparent;border-radius:var(--sv-r-pill);font-family:var(--sv-schrift-text);font-size:var(--sv-fs-lede);font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.sv-knopf--primaer{background:var(--sv-brand-primary);border-color:var(--sv-brand-primary);color:var(--sv-text-inverse)}
.sv-seite .sv-knopf--primaer{color:var(--sv-text-inverse)}
/* Überfahren: .sv-seite a:hover färbte die Schrift grün (Claude Design 31.10., F5) – darum auch mit .sv-seite */
.sv-knopf--primaer:is(:hover,:focus-visible),.sv-seite .sv-knopf--primaer:is(:hover,:focus-visible){background:var(--sv-brand-primary-hover);border-color:var(--sv-brand-primary-hover);color:var(--sv-text-inverse);text-decoration:none}
.sv-knopf--linie{background:transparent;border-color:var(--sv-lokal-text,var(--sv-text));color:var(--sv-lokal-text,var(--sv-text))}
.sv-seite .sv-knopf--linie{color:var(--sv-lokal-text,var(--sv-text))}
.sv-knopf--linie:is(:hover,:focus-visible),.sv-seite .sv-knopf--linie:is(:hover,:focus-visible){background:var(--sv-lokal-text,var(--sv-text));color:var(--sv-lokal-flaeche,var(--sv-bg));text-decoration:none}
.sv-knopf--leise{background:transparent;padding-inline:0;color:var(--sv-link)}
.sv-knopf--leise:hover{text-decoration:underline}

/* Hero */
.sv-hero{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sv-lg);align-items:center}
.sv-hero__text{display:flex;flex-direction:column;gap:20px}
.sv-ki{position:absolute;top:12px;left:12px;z-index:1;padding:2px 8px;border-radius:6px;background:var(--sv-bg);font-size:12px;font-weight:600;color:var(--sv-text-soft)}
.sv-medien{position:relative;margin:0;border-radius:var(--sv-r);overflow:hidden;background:var(--sv-bg-alt)}
.sv-medien img,.sv-medien video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}
.sv-hero .sv-medien img{aspect-ratio:4/3}
/* Inhaber 28.10.: Bilder und Videos klein (ca. 300 px) direkt neben dem Text, ohne Lücke, nie volle Breite */
.sv-mit-medium{display:grid;grid-template-columns:minmax(0,var(--sv-lesebreite)) minmax(240px,340px);justify-content:start;gap:var(--sv-lg);align-items:center}
.sv-medien--klein{width:100%;max-width:340px}
.sv-medien.sv-medien--klein img,.sv-medien.sv-medien--klein video{aspect-ratio:auto;height:auto}
/* Startseite: Vorteile rechts neben dem Kopfbild (PC), Inhaber 29.10.: Leerraum rechts füllen. Darunter wie bisher als Zeile. */
.sv-mit-medium--vorteile>.sv-trust{grid-column:1/-1}
@media (min-width:1200px){
.sv-mit-medium--vorteile{grid-template-columns:minmax(0,var(--sv-lesebreite)) minmax(240px,340px) minmax(260px,1fr)}
.sv-mit-medium--vorteile>.sv-trust{grid-column:auto;flex-direction:column;gap:var(--sv-sm);padding:var(--sv-md);border-radius:var(--sv-r);background:var(--sv-baustein-flaeche,var(--sv-bg-alt))}
}
/* Startseite: erster Abschnitt mit Abstand zum Menü (andere Seiten haben ihn vom Shop-Rahmen) */
.home .main-page-wrapper .sv-seite>.sv-abschnitt:first-child{padding-top:var(--sv-lg)}

/* Promo-Zeile */
.sv-promo{display:flex;align-items:center;gap:var(--sv-sm);padding:14px 20px;border-radius:var(--sv-r-klein);background:var(--sv-baustein-flaeche,var(--sv-bg-alt))}
.sv-promo__zahl{flex:0 0 auto;min-width:72px;font-family:var(--sv-schrift-titel);font-size:28px;font-weight:700;line-height:1;color:var(--sv-brand-primary)}
.sv-promo__text{display:flex;flex-direction:column;font-size:15px;line-height:1.45;color:var(--sv-text-soft)}
.sv-promo__text strong{font-size:var(--sv-fs-text);color:var(--sv-text)}

/* Vertrauenszeile mit Häkchen */
.sv-trust{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px var(--sv-md)}
.sv-trust__punkt{display:flex;align-items:center;gap:10px;font-size:var(--sv-fs-text);font-weight:600;color:var(--sv-text)}
.sv-trust__punkt::before{content:"✓";flex:0 0 24px;height:24px;border-radius:50%;background:var(--sv-gruen-tint);color:var(--sv-link);display:grid;place-items:center;font-size:var(--sv-fs-klein);font-weight:700}

/* Inhaltsleiste */
.sv-pillen{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sv-pillen__titel{margin-right:8px;font-size:var(--sv-fs-klein);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--sv-text-soft)}
.sv-pillen__link{display:inline-flex;align-items:baseline;gap:8px;min-height:44px;padding:10px 18px;box-sizing:border-box;border:1px solid var(--sv-border);border-radius:var(--sv-r-pill);font-size:15px;font-weight:600;color:var(--sv-text);text-decoration:none}
.sv-seite .sv-pillen__link{color:var(--sv-text)}
.sv-pillen__link span{font-size:var(--sv-fs-klein);font-weight:400;color:var(--sv-text-soft)}
.sv-pillen__link:hover{border-color:var(--sv-link);background:var(--sv-gruen-tint)}

/* Karten */
.sv-karte{position:relative;display:flex;flex-direction:column;gap:var(--sv-xs);padding:var(--sv-md);border:1px solid var(--sv-border-subtle);border-radius:var(--sv-r);background:var(--sv-bg);transition:transform .2s,box-shadow .2s}
.sv-karte:hover{transform:translateY(-2px);box-shadow:var(--sv-shadow-md)}
.sv-karte__bild{display:block;width:calc(100% + 2 * var(--sv-md));max-width:none;margin:calc(-1 * var(--sv-md)) calc(-1 * var(--sv-md)) var(--sv-xs);aspect-ratio:4/3;object-fit:contain;background:var(--sv-bg-alt);border-radius:var(--sv-r) var(--sv-r) 0 0}
.sv-karte__nummer{width:36px;height:36px;margin-bottom:var(--sv-xs);border-radius:50%;background:var(--sv-brand-primary);color:var(--sv-text-inverse);display:grid;place-items:center;font-weight:700}
.sv-karte__kicker{font-size:var(--sv-fs-klein);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--sv-text-soft)}
.sv-karte__titel{font-size:var(--sv-fs-h3)}
.sv-seite .sv-karte__titel a{color:var(--sv-text);text-decoration:none}
.sv-karte__titel a::after{content:"";position:absolute;inset:0;border-radius:var(--sv-r)}
.sv-karte__text{color:var(--sv-text-mid)}
.sv-karte__text a{position:relative;z-index:1}
.sv-karte__link{margin-top:auto;padding-top:var(--sv-xs);font-weight:600;color:var(--sv-link)}

/* Kennzahlen */
.sv-kennzahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sv-md)}
.sv-kennzahl{display:flex;flex-direction:column;gap:4px;padding:var(--sv-md);border:1px solid var(--sv-border-subtle);border-radius:var(--sv-r);background:var(--sv-bg);color:var(--sv-text-mid)}
.sv-abschnitt--himmel :is(.sv-kennzahl,.sv-karte,.sv-schritt){border-color:var(--sv-himmel-linie)}
.sv-kennzahl__label{font-size:var(--sv-fs-klein);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--sv-text-soft)}
.sv-kennzahl__wert{font-size:24px;line-height:1.25;font-weight:700;color:var(--sv-text)}

/* Kurze Antwort */
.sv-kurzantwort{display:flex;flex-direction:column;gap:var(--sv-xs);max-width:78ch;padding:var(--sv-md) 28px;border-radius:var(--sv-r);background:var(--sv-gruen-tint)}
.sv-kurzantwort__titel{font-size:var(--sv-fs-klein);font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--sv-link)}
.sv-kurzantwort p+p{font-size:var(--sv-fs-lede);color:var(--sv-text)}

/* Hinweis */
.sv-hinweis{padding:var(--sv-sm) 20px;border-radius:var(--sv-r-klein);background:var(--sv-baustein-flaeche,var(--sv-himmel-tint));color:var(--sv-text-mid);max-width:78ch}
.sv-hinweis strong{margin-right:6px;color:var(--sv-text)}

/* Kasten hell und dunkel */
.sv-kasten{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sv-sm);padding:var(--sv-lg);border-radius:var(--sv-r);background:var(--sv-baustein-flaeche,var(--sv-bg-alt))}
.sv-kasten--dunkel,.sv-abschnitt--band .sv-kasten--dunkel{--sv-lokal-text:var(--sv-text-inverse);--sv-lokal-flaeche:var(--sv-surface-dark);--sv-focus-ring:var(--sv-brand-primary-on-dark);--wd-otl-color:var(--sv-brand-primary-on-dark);background:var(--sv-surface-dark);color:var(--sv-text-soft-on-dark)}
.sv-kasten--dunkel h2{color:var(--sv-text-inverse)}
.sv-kasten--dunkel .sv-zusatz,.sv-kasten--dunkel .sv-lede,.sv-kasten--dunkel .sv-meta{color:var(--sv-text-soft-on-dark)}
.sv-kasten--dunkel .sv-chip{color:var(--sv-glasblau-on-dark)}
.sv-kasten--dunkel .sv-meta a{color:var(--sv-text-inverse)}
/* Grün hat auf Nachtblau nur 1,5:1: Textlinks im dunklen Kasten hell (Codex-Prüfung 05.11.2026) */
.sv-kasten--dunkel a:not(.sv-knopf){color:var(--sv-text-inverse)}
.sv-kasten--dunkel a:not(.sv-knopf):hover{color:var(--sv-glasblau-on-dark)}

/* Tabelle */
.sv-tabelle{overflow-x:auto;border:1px solid var(--sv-border-subtle);border-radius:var(--sv-r);background:var(--sv-bg)}
.sv-tabelle table{width:100%;min-width:560px;border-collapse:collapse;font-size:var(--sv-fs-text);line-height:1.5;margin:0}
.sv-tabelle th{padding:12px var(--sv-md);border:0;background:var(--sv-bg-alt);font-family:var(--sv-schrift-text);text-align:left;font-size:var(--sv-fs-klein);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--sv-text-soft)}
.sv-tabelle td{padding:var(--sv-sm) var(--sv-md);border:0;border-top:1px solid var(--sv-border-subtle);vertical-align:top;color:var(--sv-text-mid)}
.sv-tabelle td:first-child{font-weight:600;color:var(--sv-text)}
.sv-tabelle--preise td:last-child,.sv-tabelle--preise th:last-child{text-align:left}
/* Zweispaltige Tabellen: Thema schmal, Antwort direkt daneben, volle Breite ohne Leerraum (Inhaber 29.10.) */
.sv-tabelle table:not(:has(tr > :nth-child(3))) :is(td,th):first-child{width:28%}
.sv-tabelle--preise td:last-child{font-weight:700;color:var(--sv-brand-primary);font-variant-numeric:tabular-nums}
.sv-tabelle__notiz{font-size:var(--sv-fs-klein);color:var(--sv-text-soft);max-width:78ch}

/* Schritte mit Zeitangabe */
.sv-schritte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sv-md);counter-reset:schritt}
.sv-schritt{counter-increment:schritt;display:flex;flex-direction:column;gap:var(--sv-xs);padding:var(--sv-md);border:1px solid var(--sv-border-subtle);border-radius:var(--sv-r);background:var(--sv-bg)}
.sv-schritt::before{content:counter(schritt);width:36px;height:36px;margin-bottom:var(--sv-xs);border-radius:50%;background:var(--sv-brand-primary);color:var(--sv-text-inverse);display:grid;place-items:center;font-weight:700}
.sv-schritt__zeit{font-size:var(--sv-fs-klein);font-weight:600;color:var(--sv-link)}
.sv-seite .sv-schritt__titel{font-size:20px}

/* Fragen */
.sv-faq{display:flex;flex-direction:column;border-top:1px solid var(--sv-border-subtle)}
.sv-faq__frage{border-bottom:1px solid var(--sv-border-subtle)}
.sv-faq__kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--sv-sm);min-height:var(--sv-touch);padding:var(--sv-sm) 0;box-sizing:border-box;list-style:none;cursor:pointer;font-size:17px;font-weight:600;color:var(--sv-text)}
.sv-faq__kopf::-webkit-details-marker{display:none}
.sv-faq__kopf::after{content:"+";flex:0 0 auto;font-size:24px;font-weight:400;line-height:1;color:var(--sv-link)}
.sv-faq__frage[open] .sv-faq__kopf::after{content:"–"}
.sv-faq__antwort{padding:0 0 var(--sv-md);font-size:17px;color:var(--sv-text-mid);max-width:78ch}
.sv-faq-gruppe{display:flex;flex-direction:column;gap:12px}
.sv-seite .sv-faq-gruppe__titel{margin-top:var(--sv-xs);font-size:22px}

/* Kontaktwege */
.sv-kontaktwege{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sv-md)}
.sv-kontaktweg{display:flex;flex-direction:column;gap:var(--sv-xs);padding:var(--sv-md);border-radius:var(--sv-r);background:var(--sv-baustein-flaeche,var(--sv-bg-alt))}
.sv-kontaktweg__label{font-size:var(--sv-fs-klein);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--sv-text-soft)}
.sv-kontaktweg__wert{font-size:22px;font-weight:700;color:var(--sv-text);overflow-wrap:anywhere}
.sv-kontaktweg .sv-zeile{margin-top:auto;padding-top:var(--sv-xs)}

/* Fließtext in Ratgebern */
.sv-text{display:flex;flex-direction:column;gap:var(--sv-sm);max-width:72ch;font-size:17px;line-height:1.7;color:var(--sv-text-mid)}
.sv-tabelle caption{padding:var(--sv-sm) var(--sv-md) 0;text-align:left;font-family:var(--sv-schrift-titel);font-size:20px;font-weight:700;color:var(--sv-text)}

/* Aufzählung */
.sv-liste{display:flex;flex-direction:column;gap:10px;max-width:78ch;margin:0;padding:0;list-style:none}
.sv-liste li{position:relative;padding-left:24px;color:var(--sv-text-mid)}
.sv-liste li::before{content:"";position:absolute;left:4px;top:.65em;width:8px;height:8px;border-radius:50%;background:var(--sv-link)}

/* Rechtstext (AGB, Privacy, Cookies): ruhige Lesespalte */
.sv-rechtstext{display:flex;flex-direction:column;gap:var(--sv-sm);max-width:78ch;font-size:var(--sv-fs-text);line-height:1.7;color:var(--sv-text-mid)}
.sv-seite .sv-rechtstext h2{margin-top:var(--sv-md);font-size:22px}
.sv-rechtstext ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}

/* Bewertungen */
.sv-zitate{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--sv-md)}
.sv-zitat{display:flex;flex-direction:column;gap:12px;margin:0;padding:var(--sv-md);border:1px solid var(--sv-border-subtle);border-radius:var(--sv-r);background:var(--sv-bg)}
.sv-zitat blockquote{margin:0;font-size:17px;line-height:1.6;color:var(--sv-text)}
.sv-zitat figcaption{margin-top:auto;font-size:var(--sv-fs-klein);color:var(--sv-text-soft)}
.sv-zitat figcaption strong{color:var(--sv-text)}

/* Entwurfs-Hilfen: vor dem Livegang leer */
.sv-bildplatz{display:grid;place-items:center;width:100%;aspect-ratio:4/3;padding:var(--sv-sm);box-sizing:border-box;background:var(--sv-bg-alt);text-align:center;font-size:var(--sv-fs-klein);font-weight:600;color:var(--sv-text-soft)}
.sv-bildplatz--breit{aspect-ratio:16/9}
.sv-bildplatz--tabelle{aspect-ratio:auto;min-height:160px;border-radius:var(--sv-r)}
.sv-offen{padding:1px 6px;border-radius:6px;background:var(--sv-warning-bg);color:var(--sv-warning-strong);font-size:.9em;font-weight:600}

@media (max-width:899px){
  .sv-hero{grid-template-columns:minmax(0,1fr);gap:var(--sv-md)}
}
@media (max-width:767px){
  .sv-mit-medium{grid-template-columns:minmax(0,1fr)}
  .sv-zeile .sv-knopf{width:100%}
  .sv-knopf{padding-inline:var(--sv-sm)}
  .sv-knopf--leise{width:auto}
  .sv-karte,.sv-kennzahl,.sv-schritt,.sv-kontaktweg{padding:var(--sv-sm)}
  .sv-karte__bild{width:calc(100% + 2 * var(--sv-sm));margin:calc(-1 * var(--sv-sm)) calc(-1 * var(--sv-sm)) var(--sv-xs)}
  .sv-kennzahl__wert{font-size:20px}
  .sv-kasten{padding:var(--sv-md) var(--sv-sm)}
  .sv-faq__kopf{padding:12px 0;font-size:var(--sv-fs-text)}
  .sv-faq__antwort{padding:0 var(--sv-sm) var(--sv-sm)}
  .sv-promo__zahl{min-width:56px;font-size:22px}
}

/* ---------- 7 Seitenkopf ---------- */
.sv-seitenkopf{font-family:var(--sv-schrift-text)}
.sv-seitenkopf__leiste{background:var(--sv-kopf-flaeche);border-bottom:1px solid var(--sv-border-subtle)}
.sv-seitenkopf__reihe{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sv-sm) var(--sv-md);max-width:var(--sv-breite-max);margin-inline:auto;padding:14px var(--sv-rand);box-sizing:border-box}
.sv-logo{display:flex;align-items:center;gap:12px;color:var(--sv-text);text-decoration:none}
.sv-logo img{display:block;width:40px;height:40px}
.sv-logo__wort{font-family:var(--sv-schrift-titel);font-size:23px;font-weight:700;line-height:1;letter-spacing:-.01em}
.sv-logo__tld{color:var(--sv-text-soft)}
.sv-suche{position:relative;display:flex;flex:1 1 360px;max-width:620px}
.sv-suche__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sv-suche__feld{flex:1;min-height:52px;box-sizing:border-box;padding:0 60px 0 22px;border:1px solid var(--sv-border-strong);border-radius:var(--sv-r-pill);background:var(--sv-bg);font:inherit;font-size:var(--sv-fs-text);color:var(--sv-text)}
.sv-suche__feld::placeholder{color:var(--sv-text-soft)}
.sv-suche__knopf{position:absolute;top:4px;right:4px;width:44px;height:44px;border:0;border-radius:50%;background:var(--sv-brand-primary);color:var(--sv-text-inverse);display:grid;place-items:center;cursor:pointer}
.sv-seitenkopf__hilfe{display:flex;align-items:center;gap:var(--sv-xs);margin-left:auto}
.sv-seitenkopf__telefon{display:flex;align-items:center;gap:10px;min-height:var(--sv-touch);padding-right:var(--sv-xs);color:var(--sv-text);text-decoration:none;line-height:1.3}
.sv-seitenkopf__telefon strong{display:block;font-size:var(--sv-fs-text)}
.sv-seitenkopf__telefon small{display:block;font-size:var(--sv-fs-klein);color:var(--sv-text-soft)}
.sv-seitenkopf__symbol{position:relative;display:grid;place-items:center;width:var(--sv-touch);height:var(--sv-touch);border-radius:50%;color:var(--sv-link)}
.sv-seitenkopf__symbol:hover{background:var(--sv-gruen-tint)}
.sv-seitenkopf__zahl{position:absolute;top:2px;right:0;display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;box-sizing:border-box;border-radius:10px;background:var(--sv-brand-primary);color:var(--sv-text-inverse);font-size:12px;font-weight:700}
.sv-hauptmenue{--sv-focus-ring:var(--sv-brand-primary-on-dark);--wd-otl-color:var(--sv-brand-primary-on-dark);background:var(--sv-surface-dark)}
.sv-hauptmenue__reihe{display:flex;gap:4px;max-width:var(--sv-breite-max);margin-inline:auto;padding:0 var(--sv-rand);box-sizing:border-box;overflow-x:auto;scrollbar-width:none}
.sv-hauptmenue__link{display:flex;align-items:center;min-height:var(--sv-touch);padding:0 14px;color:var(--sv-text-inverse);font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap}
.sv-hauptmenue__link:hover{background:var(--sv-surface-dark-deep)}
.sv-hauptmenue__link--akzent{color:var(--sv-brand-primary-on-dark)}
@media (max-width:767px){
  .sv-seitenkopf__reihe{gap:10px;padding-block:10px}
  .sv-logo img{width:32px;height:32px}
  .sv-logo__wort{font-size:19px}
  .sv-suche{order:5;flex-basis:100%;max-width:none}
  .sv-seitenkopf__text{display:none}
  .sv-seitenkopf__telefon{justify-content:center;width:var(--sv-touch);padding:0}
}

/* ---------- 8 Fuß: Regeln in de-fuss.css (lädt auf allen Seiten, Modul sv-de-fuss.php) ---------- */

/* ---------- 9 Bewegung und Fokus ---------- */
.sv-seite a:focus-visible,.sv-knopf:focus-visible,.sv-faq__kopf:focus-visible,.sv-seitenkopf a:focus-visible,.sv-suche__feld:focus-visible{outline:3px solid var(--sv-focus-ring);outline-offset:2px}
/* WoodMart setzt den Fokus von Links und Knöpfen mit !important (2 px gepunktet, schwarz bzw. weiß je Farbschema) und schlägt
   damit die Regel oben. Statt !important seine Variablen im Inhalt auf den eigenen Ring stellen (wie --bgcolor-gray-200 in 11). */
.sv-seite{--wd-otl-width:3px;--wd-otl-style:solid;--wd-otl-color:var(--sv-focus-ring);--wd-otl-offset:2px}
@media (prefers-reduced-motion:reduce){
  .sv-karte,.sv-knopf{transition:none}
  .sv-karte:hover{transform:none}
}

/* ---------- 10 Shop: Kategorie und Produkt (Aufbau wie .de) ---------- */
/* Kopfzeile über dem Raster: Pfad links, Anzahl rechts; Filter links, Sortierung rechts */
.sv-shopkopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px var(--sv-md)}
.sv-shopkopf__zahl{font-size:var(--sv-fs-klein);color:var(--sv-text-soft)}
.sv-filterknopf{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0;border:0;background:transparent;font:inherit;font-size:var(--sv-fs-text);font-weight:600;color:var(--sv-text);cursor:pointer}
.sv-shopkopf select{min-height:44px;padding:0 var(--sv-sm);border:0;border-bottom:1px solid var(--sv-border-strong);background:var(--sv-bg);font:inherit;font-size:15px;color:var(--sv-text)}

/* Produktraster: Kacheln wie .de (hellgrau, 18 px Rundung, Titel und Preis mittig) */
.sv-produkte{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.sv-produkt{position:relative;display:flex;flex-direction:column;gap:10px;padding:15px;border-radius:var(--sv-r-gross);background:var(--sv-bg-soft);text-align:center}
.sv-produkt__marke{align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--sv-link)}
.sv-produkt__bild{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain}
.sv-seite .sv-produkt__titel{font-size:var(--sv-fs-lede);font-weight:600;line-height:1.35;color:var(--sv-text-mid)}
.sv-seite .sv-produkt__titel a{color:var(--sv-text-mid);text-decoration:none}
.sv-produkt__titel a::after{content:"";position:absolute;inset:0;border-radius:var(--sv-r-gross)}
.sv-seite .sv-produkt__titel a:hover{color:var(--sv-link)}
.sv-produkt__preis{margin-top:auto;font-size:var(--sv-fs-text);font-weight:600;color:var(--sv-brand-primary);font-variant-numeric:tabular-nums}
.sv-produkt__preis small{font-size:var(--sv-fs-text);font-weight:400}

/* Produktkopf: Galerie links, Kaufkasten rechts */
.sv-produktkopf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sv-lg);align-items:start}
.sv-galerie{display:flex;flex-direction:column;gap:var(--sv-sm);margin:0}
.sv-galerie__haupt{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain}
.sv-galerie__leiste{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sv-sm);margin:0;padding:0;list-style:none}
.sv-galerie__mini{display:block;width:100%;aspect-ratio:1/1;padding:0;border:2px solid transparent;border-radius:var(--sv-r-klein);background:transparent;cursor:pointer;overflow:hidden}
.sv-galerie__mini img{display:block;width:100%;height:100%;object-fit:contain}
.sv-galerie__mini--aktiv{border-color:var(--sv-border)}
.sv-kaufbox{display:flex;flex-direction:column;gap:var(--sv-sm);padding:30px 35px 20px;border-radius:var(--sv-r-gross);background:var(--sv-bg);box-shadow:var(--sv-shadow-kasten)}
.sv-kaufbox__kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sv-sm)}
.sv-kaufbox__marke{flex:0 0 auto;padding:6px 10px;border-radius:var(--sv-r-klein);background:var(--sv-bg-alt);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--sv-link)}
.sv-preis{font-size:21px;color:var(--sv-brand-primary);font-variant-numeric:tabular-nums}
.sv-preis strong{font-weight:700}
.sv-lieferzeit{font-size:var(--sv-fs-klein);font-weight:600;color:var(--sv-link)}
.sv-versandbalken{display:flex;flex-direction:column;gap:10px;padding:var(--sv-sm) 20px;border:2px dashed var(--sv-linie-gestrichelt);border-radius:var(--sv-r-gross);font-size:15px;color:var(--sv-text-mid)}
.sv-versandbalken__spur{height:6px;border-radius:3px;background:var(--sv-bg-alt);overflow:hidden}
.sv-versandbalken__stand{display:block;width:2%;height:100%;background:var(--sv-brand-primary)}
.sv-planhinweis{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:var(--sv-sm) 20px;border-radius:var(--sv-r-gross);background:var(--sv-bg-alt);font-size:15px;line-height:1.5;color:var(--sv-text-mid)}
.sv-planhinweis .sv-knopf{min-height:40px;padding:0 18px;border-radius:var(--sv-r-klein);font-size:15px}
.sv-auswahl{display:flex;flex-direction:column;gap:10px;min-width:0;margin:0;padding:0;border:0}
.sv-auswahl__titel{padding:0;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--sv-text-soft)}
.sv-auswahl__optionen{display:flex;flex-wrap:wrap;gap:var(--sv-xs)}
.sv-option{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:64px;min-height:44px;padding:0 14px;box-sizing:border-box;border:1px solid transparent;border-radius:var(--sv-r);background:var(--sv-bg-alt);font-size:15px;color:var(--sv-text);cursor:pointer}
.sv-option input{position:absolute;opacity:0;width:1px;height:1px}
.sv-option--aktiv{border-color:var(--sv-text);background:var(--sv-bg);font-weight:600}
.sv-feld{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--sv-text-soft)}
.sv-feld input{min-height:48px;box-sizing:border-box;padding:0 var(--sv-sm);border:1px solid var(--sv-border-strong);border-radius:var(--sv-r);background:var(--sv-bg);font:inherit;font-size:var(--sv-fs-text);font-weight:400;letter-spacing:0;text-transform:none;color:var(--sv-text)}
.sv-feld__hilfe{font-weight:400;letter-spacing:0;text-transform:none;font-size:var(--sv-fs-klein)}
.sv-kaufbox__regel{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:end}
.sv-kaufbox__regel .sv-knopf{width:100%;min-height:48px;font-size:15px}
.sv-kaufbox__fuss{display:flex;flex-direction:column;gap:6px;padding-top:var(--sv-sm);border-top:1px solid var(--sv-border-subtle);font-size:var(--sv-fs-klein);color:var(--sv-text-soft)}
.sv-option:focus-within,.sv-feld input:focus-visible,.sv-shopkopf select:focus-visible,.sv-filterknopf:focus-visible,.sv-galerie__mini:focus-visible{outline:3px solid var(--sv-focus-ring);outline-offset:2px}
@media (max-width:1024px){
  .sv-produkte{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:899px){
  .sv-produktkopf{grid-template-columns:minmax(0,1fr);gap:var(--sv-md)}
}
@media (max-width:767px){
  .sv-produkte{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .sv-produkt{padding:10px}
  .sv-seite .sv-produkt__titel{font-size:15px}
  .sv-produkt__preis,.sv-produkt__preis small{font-size:15px}
  .sv-kaufbox{padding:20px var(--sv-sm)}
  .sv-seite .sv-kaufbox h1{font-size:24px}
}

/* ---------- 11 Shop: Warenkorb und Kasse (Aufbau wie .de) ---------- */
/* Seit Welle C1 (2026-11): de-thema.css lädt auf Warenkorb und Kasse (sv-de-thema.php setzt dort body.sv-de-thema und
   body.sv-de-kasse). Die 29 alten Kassen-Regeln aus sv-alt.min.css (30-woo-core 5.4, 36-funnel, 90-utilities) tragen den
   Schalter :where(:not(.sv-de-kasse)) und gelten dort nicht mehr; Liste und Gründe: design-befunde-2026-11-02/c1/kasse-schalter.mjs.
   Bleiben aus sv-alt (bewusst): Kopf, Werkzeugleiste, Versandarten, Mengenfeld, Feld-Beschriftungen, Fehler-/Ok-Rahmen,
   Tabellenzellen, 24-px-Kästchen, Knopf-Grundregel, Schritt-Führung 1–2–3 mit „Zahlart wählen“. Deshalb setzt dieser
   Abschnitt dort nichts (kein Gegeneinander).
   Ausnahme von Hausregel 1: Das Markup kommt von WooCommerce/WoodMart, deshalb Woo-Klassen statt sv-… */

/* Überschriften: Titelschrift, normale Schreibweise statt Versalien */
.woocommerce-cart .cart_totals h2,
.woocommerce-checkout .woocommerce-billing-fields>h3,
.woocommerce-checkout .woocommerce-additional-fields>h3,
.woocommerce-checkout #order_review_heading{margin:0 0 var(--sv-sm);font-family:var(--sv-schrift-titel);font-size:var(--sv-fs-h3);font-weight:700;line-height:1.3;text-transform:none;color:var(--sv-text)}

/* Leerer Warenkorb: Überschrift in Abschnittsgröße (ohne alte Überschriften-Regeln wären es WoodMarts 40 px) */
.woocommerce-cart .wd-empty-block-title{font-size:var(--sv-fs-h3)}

/* Summenkasten im Warenkorb: hellgrau, 18 px Rundung, ohne Rahmen */
/* gleicher Selektor wie WoodMart (woo-page-cart), damit er ohne !important gewinnt */
.cart-content-wrapper>.cart_totals .cart-totals-inner{padding:var(--sv-md);border:0;border-radius:var(--sv-r-gross);background:var(--sv-bg-alt);box-shadow:none}
.woocommerce-cart .cart_totals th,
.woocommerce-cart .cart_totals td{font-size:var(--sv-fs-text);color:var(--sv-text)}
.woocommerce-cart .cart_totals th{font-weight:600}

/* Bestellübersicht in der Kasse: hellgraue Fläche, darin weiße Karte; ohne die gezackten Kanten */
/* WoodMart setzt Fläche und Innenabstand mit ID-Gewicht (:is(… #order_review)); deshalb nur seine Variable umstellen statt !important */
.woocommerce-checkout .checkout-order-review{--bgcolor-gray-200:var(--sv-bg-alt);border-radius:var(--sv-r-gross);box-shadow:none}
/* Zackenkanten oben/unten: WoodMart setzt content mit ID-Gewicht, display setzt er nicht */
.woocommerce-checkout .checkout-order-review::before,
.woocommerce-checkout .checkout-order-review::after{display:none}
.woocommerce-checkout .checkout-order-review .wd-table-wrapper{padding:var(--sv-md);border-radius:var(--sv-r-gross);background:var(--sv-bg)}

/* Hauptknöpfe „Weiter zur Kasse“ und „Zahlungspflichtig bestellen“: Form, Höhe und Schrift kommen aus der Knopf-Grundregel
   aller Shop-Knöpfe in sv-alt.min.css (bleibt, wie „In den Warenkorb“); hier nur volle Breite und Farbe wie .sv-knopf--primaer */
.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
.woocommerce-checkout #payment #place_order{width:100%;box-sizing:border-box;border:2px solid var(--sv-brand-primary);background:var(--sv-brand-primary);color:var(--sv-text-inverse);box-shadow:none}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover,
.woocommerce-checkout #payment #place_order:hover{border-color:var(--sv-brand-primary-hover);background:var(--sv-brand-primary-hover);color:var(--sv-text-inverse)}

/* PDF-Knopf im Warenkorb: Linienknopf wie .sv-knopf--linie, sonst verschwindet er auf der grauen Fläche */
.woocommerce-cart .cart_totals .cart-pdf-button{display:flex;align-items:center;justify-content:center;width:100%;min-height:var(--sv-touch);margin-top:12px;padding:0 var(--sv-md);box-sizing:border-box;border:2px solid var(--sv-text);border-radius:var(--sv-r-pill);background:transparent;font-family:var(--sv-schrift-text);font-size:var(--sv-fs-text);font-weight:600;letter-spacing:0;text-transform:none;color:var(--sv-text);box-shadow:none}
.woocommerce-cart .cart_totals .cart-pdf-button:hover{background:var(--sv-text);color:var(--sv-text-inverse)}

/* Zahlarten als Karten: weiß, feiner Rand, gewählte Karte mit rotem Rand (wie .de) */
/* Platz oben bleibt frei: dort steht „3 Zahlart wählen“ aus der Schritt-Führung (sv-alt, bleibt) */
.woocommerce-checkout #payment .payment_methods{margin:0;padding-inline:0;padding-bottom:0;border:0}
.woocommerce-checkout #payment .wc_payment_method{position:relative;margin:0 0 12px;padding:0;border:0;background:transparent;list-style:none}
.woocommerce-checkout #payment .wc_payment_method::before,
.woocommerce-checkout #payment .wc_payment_method::after{content:none}
.woocommerce-checkout #payment .wc_payment_method>input.input-radio{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.woocommerce-checkout #payment .wc_payment_method>label{display:flex;align-items:center;gap:12px;min-height:var(--sv-touch);margin:0;padding:12px 20px;box-sizing:border-box;border:2px solid var(--sv-border-subtle);border-radius:var(--sv-r);background:var(--sv-bg);font-family:var(--sv-schrift-text);font-size:var(--sv-fs-text);color:var(--sv-text);cursor:pointer;transition:border-color .2s}
.woocommerce-checkout #payment .wc_payment_method>label:hover{border-color:var(--sv-border)}
.woocommerce-checkout #payment .wc_payment_method>label::before,
.woocommerce-checkout #payment .wc_payment_method>label::after{content:none}
.woocommerce-checkout #payment .wc_payment_method>label img{order:-1;max-height:24px;width:auto;margin:0}
.woocommerce-checkout #payment .wc_payment_method>input.input-radio:checked+label{border-color:var(--sv-brand-primary)}
.woocommerce-checkout #payment .wc_payment_method>input.input-radio:focus-visible+label{outline:3px solid var(--sv-focus-ring);outline-offset:2px}
.woocommerce-checkout #payment .payment_box{margin:8px 0 4px;padding:0 20px;background:transparent;font-size:var(--sv-fs-klein);line-height:1.5;color:var(--sv-text-soft)}
.woocommerce-checkout #payment .payment_box::before{content:none}

/* Formularfelder: 48 px hoch, 16 px Schrift (kein Hineinzoomen am iPhone), Rundung wie .sv-feld */
.woocommerce-checkout .form-row .input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container .select2-selection--single{min-height:var(--sv-touch);box-sizing:border-box;border:1px solid var(--sv-border-strong);border-radius:var(--sv-r);background:var(--sv-bg);font-size:var(--sv-fs-text);color:var(--sv-text)}
.woocommerce-checkout .select2-container .select2-selection__rendered{line-height:46px}
.woocommerce-checkout .form-row textarea.input-text{min-height:120px;padding-block:12px}
.woocommerce-checkout .form-row .input-text:focus-visible,
.woocommerce-checkout .form-row select:focus-visible{outline:3px solid var(--sv-focus-ring);outline-offset:2px}

/* „Lieferung an eine andere Adresse?“: eigene Zeile über die volle Breite, Kästchen links neben dem Text */
.woocommerce-checkout #ship-to-different-address{width:100%;margin:var(--sv-md) 0 var(--sv-sm);padding:0;font-size:var(--sv-fs-text);font-weight:600;line-height:1.4;text-transform:none;color:var(--sv-text)}
.woocommerce-checkout #ship-to-different-address label{display:inline-flex;align-items:center;gap:12px;margin:0;cursor:pointer}

@media (max-width:767px){
  .cart-content-wrapper>.cart_totals .cart-totals-inner{padding:var(--sv-sm)}

  .woocommerce-checkout .checkout-order-review .wd-table-wrapper{padding:var(--sv-sm)}

  /* Zeile „Sendung“ untereinander, damit „Versandkostenpauschale“ nicht getrennt wird (Inhaber 31.10.; bis C1 in de-fuss.css) */
  .woocommerce-shipping-totals{flex-wrap:wrap}
  .woocommerce-shipping-totals>th{flex:0 0 100%;width:100%;padding-bottom:4px}
  .woocommerce-shipping-totals>td{flex:1 1 100%;width:100%;padding-left:0}
  .woocommerce-shipping-methods label{-webkit-hyphens:manual;hyphens:manual;overflow-wrap:normal}
}

/* ---------- 12 Kontaktformular (Modul sv-contact-form, Kurzcode) im Seitenstil – Welle 4, 29.10.2026 ---------- */
.sv-seite .svK-form{max-width:720px;margin:0;display:flex;flex-direction:column;gap:var(--sv-md);font-family:var(--sv-schrift-text)}
.sv-seite .svK-form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sv-md)}
.sv-seite .svK-form__field{display:flex;flex-direction:column;gap:6px}
.sv-seite .svK-form__label{font-family:var(--sv-schrift-text);font-size:11px;font-weight:600;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;color:var(--sv-text-soft)}
.sv-seite .svK-form input[type=text],.sv-seite .svK-form input[type=email],.sv-seite .svK-form input[type=tel],.sv-seite .svK-form select,.sv-seite .svK-form textarea{width:100%;min-height:var(--sv-touch);box-sizing:border-box;margin:0;padding:10px var(--sv-sm);border:1px solid var(--sv-border-strong);border-radius:var(--sv-r);background:var(--sv-bg);font-family:var(--sv-schrift-text);font-size:var(--sv-fs-text);font-weight:400;line-height:1.4;color:var(--sv-text);box-shadow:none;transition:none}
.sv-seite .svK-form textarea{min-height:160px;resize:vertical}
.sv-seite .svK-form input:focus,.sv-seite .svK-form select:focus,.sv-seite .svK-form textarea:focus{border-color:var(--sv-border-strong);outline:3px solid var(--sv-focus-ring);outline-offset:2px}
.sv-seite .svK-form__consent{display:flex;align-items:flex-start;gap:10px;font-size:var(--sv-fs-klein);line-height:1.5;color:var(--sv-text-soft)}
.sv-seite .svK-form__consent input[type=checkbox]{margin:3px 0 0;flex-shrink:0;width:20px;height:20px;accent-color:var(--sv-brand-primary)}
.sv-seite .svK-form__consent a{color:var(--sv-link);text-decoration:underline}
.sv-seite .svK-form__submit{align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;gap:0;min-width:0;min-height:var(--sv-touch);padding:0 var(--sv-md);box-sizing:border-box;border:2px solid var(--sv-brand-primary);border-radius:var(--sv-r-pill);background:var(--sv-brand-primary);color:var(--sv-text-inverse);font-family:var(--sv-schrift-text);font-size:var(--sv-fs-lede);font-weight:600;line-height:1.2;letter-spacing:0;text-decoration:none;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.sv-seite .svK-form__submit:hover{background:var(--sv-brand-primary-hover);border-color:var(--sv-brand-primary-hover);color:var(--sv-text-inverse)}
.sv-seite .svK-form__submit:disabled{opacity:.6;cursor:default}
.sv-seite .svK-form__status{display:block;min-height:24px;padding:0;font-family:var(--sv-schrift-text);font-size:var(--sv-fs-klein);font-weight:600;line-height:1.4;color:var(--sv-text)}
.sv-seite .svK-form__status--err{color:var(--sv-warning-strong)}
.sv-seite .svK-form :where(label){margin:0;color:inherit}
.sv-seite .svK-form input[type=text],.sv-seite .svK-form input[type=email],.sv-seite .svK-form input[type=tel],.sv-seite .svK-form select,.sv-seite .svK-form textarea{max-width:none;height:auto}
.sv-seite .svK-form select{line-height:normal}
.sv-seite .svK-form select option{background-color:transparent}
.sv-seite .svK-form__consent span,.sv-seite .svK-form__consent a{font-weight:400;line-height:1.5}
.sv-seite .svK-form__submit{text-transform:none}
.sv-seite :is(.sv-text,.sv-hinweis,.sv-tabelle,.sv-karte__text) a{text-decoration:underline}
.sv-seite .sv-medien video{max-width:none}
@media (max-width:767px){.sv-seite .svK-form__row{grid-template-columns:minmax(0,1fr)}}

/* ---------- 13 Begleitspalte neben Anleitungstext (Desktop), Inhaber 29.10.: Leerraum rechts füllen ---------- */
.sv-mit-rand{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--sv-xl);align-items:start}
.sv-rand{position:sticky;top:var(--sv-lg);display:flex;flex-direction:column;gap:var(--sv-sm)}
.sv-rand__titel{margin:0;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--sv-text-soft)}
.sv-produktkarte{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;align-items:center;padding:12px;border:1px solid var(--sv-border-subtle);border-radius:var(--sv-r);background:var(--sv-bg);color:var(--sv-text);text-decoration:none;transition:box-shadow .2s,border-color .2s}
.sv-produktkarte:hover{border-color:var(--sv-border);box-shadow:0 4px 16px rgba(0,0,0,.06)}
.sv-produktkarte--ohne-bild{grid-template-columns:minmax(0,1fr)}
.sv-produktkarte img{width:88px;height:88px;object-fit:contain;background:var(--sv-bg-alt);border-radius:calc(var(--sv-r) - 4px)}
.sv-produktkarte__text{display:flex;flex-direction:column;gap:2px}
.sv-produktkarte__name{font-weight:600;font-size:var(--sv-fs-text);line-height:1.3;color:var(--sv-text)}
.sv-produktkarte__info{font-size:var(--sv-fs-klein);color:var(--sv-text-soft)}
.sv-produktkarte__mehr{font-size:var(--sv-fs-klein);font-weight:600;color:var(--sv-link);text-decoration:underline}
@media (max-width:999px){.sv-mit-rand{grid-template-columns:minmax(0,1fr)}.sv-rand{position:static}}
/* Begleitspalte rückt an den Text (Abschnitte nur mit Text): Spalte nimmt den Rest der Breite, Inhalte in bis zu 2 Reihen */
@media (min-width:1000px){
.sv-mit-rand:not(:has(> :first-child :is(.sv-tabelle,.sv-schritte,.sv-raster))){grid-template-columns:minmax(0,auto) minmax(300px,1fr)}
.sv-mit-rand:not(:has(> :first-child :is(.sv-tabelle,.sv-schritte,.sv-raster))) > .sv-rand{display:block;position:static;columns:300px 2;column-gap:var(--sv-md)}
.sv-mit-rand:not(:has(> :first-child :is(.sv-tabelle,.sv-schritte,.sv-raster))) > .sv-rand > *{break-inside:avoid;margin:0 0 var(--sv-sm)}
.sv-mit-rand:not(:has(> :first-child :is(.sv-tabelle,.sv-schritte,.sv-raster))) > .sv-rand > .sv-rand__titel{break-after:avoid;margin-bottom:8px}
.sv-mit-rand:not(:has(> :first-child :is(.sv-tabelle,.sv-schritte,.sv-raster))) > .sv-rand > .sv-rand__titel:first-child{column-span:all}
}
/* Vier Karten nebeneinander (Startseite Ratgeber), Inhaber 29.10. */
.sv-raster--vier{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:999px){.sv-raster--vier{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){.sv-raster--vier{grid-template-columns:minmax(0,1fr)}}

/* Nebeneinander: Anordnungen von der Fläche als Klassen statt eingebautem Stil (Retoure „Gut zu wissen“, Wellplatten Schritte + Bild) */
.sv-nebeneinander{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--sv-lg)}
.sv-nebeneinander__haupt{flex:1 1 560px;min-width:0;margin:0}
.sv-nebeneinander__neben{flex:0 1 380px;min-width:0;max-width:100%;margin:0}
.sv-infokasten{flex:1 1 300px;min-width:0;box-sizing:border-box;padding:28px;display:flex;flex-direction:column;gap:14px;background:var(--sv-bg);border:1px solid var(--sv-border-subtle);border-radius:var(--sv-r)}
.sv-infokasten__titel{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--sv-text-soft)}
.sv-infokasten p{margin:0;font-size:var(--sv-fs-text);line-height:1.55;color:var(--sv-text-mid)}

/* Drei Karten in einer Reihe ohne Lücke (Startseite „Wie möchtest du starten?“) */
.sv-raster--drei{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:767px){.sv-raster--drei{grid-template-columns:minmax(0,1fr)}}

/* Bildkarten am Handy quer (Inhaber 29.10.2026, Variante B): kleines Bild links neben dem Titel,
   Text und Link darunter über die volle Kartenbreite. Gilt für jede sv-karte mit sv-karte__bild;
   Karten ohne Bild bleiben unverändert. */
@media (max-width:767px){
  .sv-karte{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 0;align-items:center}
  .sv-karte>*{grid-column:1 / -1}
  .sv-karte .sv-karte__bild{grid-column:1;grid-row:1;width:96px;margin:0 var(--sv-sm) 0 0;aspect-ratio:1/1;border-radius:var(--sv-r-klein)}
  .sv-karte .sv-karte__titel{grid-column:2;grid-row:1;font-size:20px;line-height:1.25}
}

/* ---------- 14 Ratgeber im Stil der Mega-Menüs (Claude Design 31.10.2026) – nur Tokens, Live-Typografie unverändert ===== */
/* Kopf mit Titelbild: links Chip, H1, Lede; rechts Bild 16:9 (Handy darunter) */
.sv-kopf-bild{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:var(--sv-lg);align-items:center}
.sv-kopf-bild>.sv-medien img{aspect-ratio:16/9;object-fit:contain}
/* Preis in der Produktkarte am Rand: „ab X €“ (rot) · „Zum Produkt“ (grün) */
.sv-produktkarte__preiszeile{font-size:var(--sv-fs-klein);line-height:1.6;color:var(--sv-text-soft)}
.sv-produktkarte__preis{font-weight:700;color:var(--sv-brand-primary)}
.sv-produktkarte__preiszeile .sv-produktkarte__mehr{text-decoration:none}
/* Lesekarte ohne Bild: grünes Symbol */
.sv-produktkarte__symbol{display:flex;align-items:center;justify-content:center;width:88px;height:88px;border-radius:calc(var(--sv-r) - 4px);background:var(--sv-gruen-tint);color:var(--sv-link)}
.sv-produktkarte__symbol svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Entscheidungskarte: rote Pille vorn */
.sv-karte__pille{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;min-width:52px;height:30px;padding:0 12px;box-sizing:border-box;border-radius:var(--sv-r-pill);background:var(--sv-brand-primary);color:var(--sv-text-inverse);font-size:15px;font-weight:700;line-height:1}
/* Kopfzeile eines Abschnitts mit Link rechts */
.sv-kopfzeile{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--sv-xs) var(--sv-md)}
.sv-kopfzeile__link{font-weight:600;color:var(--sv-link)}
/* Produktraster am Ende: Karte wie im Mega-Menü */
.sv-produktraster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sv-md)}
.sv-seite .sv-produktraster__karte{display:flex;flex-direction:column;gap:10px;padding:10px 10px 14px;border:1px solid var(--sv-border-subtle);border-radius:var(--sv-r);background:var(--sv-bg);color:var(--sv-text-mid);text-decoration:none}
.sv-seite .sv-produktraster__karte:hover{border-color:var(--sv-link);color:var(--sv-text-mid)}
.sv-produktraster__bild{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;background:var(--sv-bg-alt);border-radius:var(--sv-r-klein)}
.sv-produktraster__text{display:flex;flex-direction:column;gap:2px;padding:0 4px}
.sv-produktraster__marke{font-size:13px;font-weight:600;letter-spacing:.06em;line-height:1.25;text-transform:uppercase;color:var(--sv-text-soft)}
.sv-produktraster__name{font-family:var(--sv-schrift-titel);font-size:var(--sv-fs-lede);font-weight:600;line-height:1.25;color:var(--sv-text)}
.sv-produktraster__nutzen{font-size:var(--sv-fs-klein);line-height:1.4;color:var(--sv-text-soft)}
.sv-produktraster__preiszeile{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sv-xs);margin-top:6px;line-height:1.25}
.sv-produktraster__preis{font-size:var(--sv-fs-text);font-weight:700;color:var(--sv-brand-primary);white-space:nowrap}
.sv-produktraster__mehr{font-size:var(--sv-fs-klein);font-weight:600;color:var(--sv-link);white-space:nowrap}
/* Video breit neben dem Abschnittstitel */
.sv-mit-medien{display:flex;flex-wrap:wrap;gap:var(--sv-lg) var(--sv-xl);align-items:center}
.sv-mit-medien>:first-child{flex:999 1 520px;min-width:0}
.sv-mit-medien>.sv-medien-block{flex:1 1 440px;min-width:0;margin:0;display:flex;flex-direction:column;gap:var(--sv-xs)}
.sv-medien-block>figcaption{font-size:var(--sv-fs-text);color:var(--sv-text-mid)}
/* Serviceleiste unter dem dunklen Kasten */
.sv-kasten--mit-leiste{border-radius:var(--sv-r) var(--sv-r) 0 0}
.sv-serviceleiste{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px var(--sv-md);padding:14px 32px;background:var(--sv-baustein-flaeche,var(--sv-bg-alt));border-radius:0 0 var(--sv-r) var(--sv-r);font-size:15px;color:var(--sv-text-mid)}
.sv-serviceleiste__punkte{display:flex;flex-wrap:wrap;gap:var(--sv-xs) 28px;margin:0;padding:0;list-style:none}
.sv-serviceleiste__punkte li{display:inline-flex;align-items:center;gap:var(--sv-xs);margin:0}
.sv-serviceleiste__punkte svg{flex:none}
.sv-serviceleiste__punkte circle{fill:var(--sv-gruen-tint)}
.sv-serviceleiste__punkte path{fill:none;stroke:var(--sv-link);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sv-serviceleiste__kontakt{display:flex;flex-wrap:wrap;gap:var(--sv-md)}
.sv-seite .sv-serviceleiste__kontakt a{font-weight:600;color:var(--sv-link);text-decoration:none}
@media (max-width:999px){.sv-produktraster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){
  .sv-produktraster{gap:var(--sv-sm)}
  .sv-serviceleiste{flex-direction:column;align-items:flex-start;padding:var(--sv-sm)}
  .sv-serviceleiste__punkte{flex-direction:column}
}

/* ---------- 15 Startseite neu (04.11.2026, Inhaber „Collage, Variante B“; nur eigene Klassen sv-start…) ----------
   Rechner: Startbild 3:2 mit Schrift unten links + zwei Kacheln (Konfigurator, Doppelstegplatten).
   Handy: Suchfeld, Startbild über die ganze Breite, Schrift und zwei Knöpfe darunter, Vertrauenszeile 2 × 2. */
.sv-start{display:flex;flex-direction:column;gap:var(--sv-md);padding-top:var(--sv-md)}
.sv-start__suche{display:none}
.sv-start__suche .sv-suche__knopf svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor}
.sv-start__collage{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--sv-md)}
.sv-start__haupt{position:relative;aspect-ratio:3/2;border-radius:var(--sv-r-gross);overflow:hidden;background:var(--sv-surface-dark)}
.sv-start__bild{position:absolute;inset:0;margin:0}
.sv-start__bild img{display:block;width:100%;height:100%;object-fit:contain}
.sv-start__bild::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,color-mix(in srgb,var(--sv-text) 92%,transparent) 0%,color-mix(in srgb,var(--sv-text) 75%,transparent) 40%,color-mix(in srgb,var(--sv-text) 30%,transparent) 65%,transparent 80%),linear-gradient(90deg,color-mix(in srgb,var(--sv-text) 45%,transparent) 0%,transparent 55%)}
.sv-start__bild .sv-ki{left:auto;right:var(--sv-sm);top:var(--sv-sm)}
.sv-start__text{position:absolute;left:var(--sv-lg);bottom:44px;z-index:1;width:min(470px,calc(100% - 2 * var(--sv-lg)));display:flex;flex-direction:column;gap:var(--sv-sm)}
.sv-seite .sv-start__text h1{font-size:44px;line-height:1.1;color:var(--sv-text-inverse)}
.sv-start__text .sv-lede{color:var(--sv-text-inverse)}
.sv-start__knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.sv-start__knoepfe .sv-knopf--primaer{box-shadow:0 2px 10px color-mix(in srgb,var(--sv-text) 25%,transparent)}
.sv-start__knoepfe .sv-knopf--linie{display:none}
.sv-start__kacheln{display:grid;grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:var(--sv-md)}
.sv-start__kachel{position:relative;display:flex;border-radius:var(--sv-r-gross);overflow:hidden;background:var(--sv-bg-alt);text-decoration:none;transition:transform .2s,box-shadow .2s}
.sv-seite a.sv-start__kachel,.sv-seite a.sv-start__kachel:hover{color:var(--sv-text);text-decoration:none}
.sv-start__kachel:hover{transform:translateY(-2px);box-shadow:var(--sv-shadow-md)}
.sv-start__kachel:focus-visible{outline:3px solid var(--sv-focus-ring);outline-offset:2px}
.sv-start__kachel-text{display:flex;flex-direction:column;gap:var(--sv-xs)}
.sv-start__kachel-kicker{font-size:var(--sv-fs-klein);font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--sv-link)}
.sv-start__kachel-titel{font-family:var(--sv-schrift-titel);font-size:var(--sv-fs-h3);font-weight:700;line-height:1.25;color:var(--sv-text);-webkit-hyphens:auto;hyphens:auto}
.sv-start__kachel-link{font-weight:600;color:var(--sv-link);text-decoration:underline}
.sv-start__kachel--konfig img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.sv-start__kachel--konfig::after{content:"";position:absolute;left:0;right:0;bottom:0;height:75%;background:linear-gradient(0deg,color-mix(in srgb,var(--sv-text) 92%,transparent) 0%,color-mix(in srgb,var(--sv-text) 80%,transparent) 55%,transparent 100%)}
.sv-start__kachel--konfig .sv-start__kachel-text{position:absolute;left:var(--sv-md);right:var(--sv-md);bottom:20px;z-index:1;gap:4px}
.sv-start__kachel--konfig .sv-start__kachel-kicker,.sv-start__kachel--konfig .sv-start__kachel-titel{color:var(--sv-text-inverse)}
.sv-start__kachel--platten{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--sv-sm);padding:var(--sv-md)}
.sv-start__kachel--platten img{width:170px;height:170px;object-fit:contain}
.sv-start__vertrauen{border-block:1px solid var(--sv-border-subtle)}
.sv-start__vertrauen .sv-trust{justify-content:space-between;padding-block:var(--sv-md)}
.sv-start-konfig{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--sv-lg);align-items:center;padding:var(--sv-lg);border-radius:var(--sv-r-gross)}
.sv-start-konfig__text{display:flex;flex-direction:column;gap:var(--sv-sm)}
.sv-start-konfig__hinweis{font-size:var(--sv-fs-klein)}
.sv-start-konfig__bild{margin:0;border-radius:var(--sv-r);overflow:hidden;background:var(--sv-bg)}
.sv-start-konfig__bild img{display:block;width:100%;height:auto}
.sv-start-beratung{display:flex;flex-wrap:wrap;gap:var(--sv-md);align-items:center;justify-content:space-between}
.sv-start-beratung>p{max-width:var(--sv-lesebreite)}
.sv-start-ueber{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--sv-lg);align-items:center}
.sv-start-ueber__text{display:flex;flex-direction:column;gap:var(--sv-sm)}
.sv-start-ueber__bild{position:relative;margin:0;justify-self:end;width:100%;max-width:340px;aspect-ratio:4/5;border-radius:var(--sv-r);overflow:hidden;background:var(--sv-bg-alt)}
.sv-start-ueber__bild img{display:block;width:100%;height:100%;object-fit:contain}
@media (prefers-reduced-motion:reduce){
  .sv-start__kachel{transition:none}
  .sv-start__kachel:hover{transform:none}
}
@media (min-width:1100px) and (max-width:1365px){
  .sv-start__kachel--platten{padding:var(--sv-sm)}
  .sv-start__kachel--platten img{width:96px;height:96px}
}
@media (min-width:768px) and (max-width:1099px){
  .sv-start__collage{grid-template-columns:minmax(0,1fr)}
  .sv-start__kacheln{grid-template-rows:none;grid-template-columns:repeat(2,minmax(0,1fr))}
  .sv-start__kachel--konfig{aspect-ratio:3/2}
  .sv-start__kachel--platten img{width:120px;height:120px}
  .sv-start-konfig{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767px){
  .home .main-page-wrapper:has(.sv-start){padding-top:0}
  .sv-start{gap:0;padding-top:0}
  .sv-start__suche{display:block;padding:6px var(--sv-rand);background:var(--sv-kopf-flaeche)}
  .sv-start__suche .sv-suche{max-width:none}
  .sv-start__suche .sv-suche__feld{min-height:44px;padding-right:52px}
  .sv-start__suche .sv-suche__knopf{width:40px;height:40px;min-height:0;padding:0;top:2px;right:2px}
  .sv-start__collage{display:block;padding-inline:0}
  .sv-start__haupt{aspect-ratio:auto;border-radius:0;overflow:visible;background:none}
  .sv-start__bild{position:relative;inset:auto;aspect-ratio:3/2;background:var(--sv-bg-alt)}
  .sv-start__bild::after{display:none}
  .sv-start__bild .sv-ki{left:12px;right:auto;top:12px}
  .sv-start__text{position:static;width:auto;padding:12px var(--sv-rand) 0;gap:10px}
  .sv-start__text .sv-lede{font-size:var(--sv-fs-text)}
  .sv-seite .sv-start__text h1{font-size:var(--sv-fs-h1);color:var(--sv-text)}
  .sv-start__text .sv-lede{color:var(--sv-text-mid)}
  .sv-start__knoepfe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sv-xs)}
  .sv-start__knoepfe .sv-knopf{width:100%;padding-inline:10px}
  .sv-start__knoepfe .sv-knopf--linie{display:inline-flex}
  .sv-start__lang{display:none}
  .sv-start__kacheln{display:none}
  .sv-start__vertrauen{margin-top:var(--sv-sm);border:0;background:var(--sv-bg-alt)}
  .sv-start__vertrauen .sv-trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;padding-block:var(--sv-sm)}
  .sv-start__vertrauen .sv-trust__punkt{align-items:flex-start;font-size:var(--sv-fs-klein);line-height:1.35}
  .sv-start-konfig{grid-template-columns:minmax(0,1fr);gap:var(--sv-md);padding:var(--sv-md) var(--sv-sm)}
  .sv-start-ueber{grid-template-columns:minmax(0,1fr);gap:var(--sv-md)}
  .sv-start-ueber__bild{justify-self:start;max-width:240px}
}