/* ============================================================
   SHOP-LAYOUT-CSS — das kundenseitige Geruest (Kopf, Navigation, Kacheln, Warenkorb, Footer,
   Kundenkonto, Content-Seiten, Bestaetigungs-Modal, Cookie-Banner). Gehoert zu
   resources/views/shop/layout.blade.php und wird dort im <head> per <link> geladen:
     <link rel="stylesheet" href="/css/shop-layout.css?v=<filemtime>">
   Bis 08.09.2026 stand dieses CSS als 106-KB-Inline-<style> in JEDER Shop-Antwort (docs/73 Punkt 8:
   79 % jedes Seitentransfers waren identisches, ungecachtes Layout). Jetzt laedt der Browser es
   EINMAL und haelt es ein Jahr (nginx: Cache-Control public, immutable) — die Versionsnummer im
   Query-String kommt aus dem Dateidatum, jede Aenderung hier erzwingt also automatisch das Neuladen.

   ⚠️ Deshalb: NUR diese Datei aendern, kein CSS zurueck ins Layout. Seitentypische Stile bleiben,
   wo sie sind (shop-pdp.css fuer die Artikelseite, <style>-Bloecke in den einzelnen Views).
   Die Beschreibungs-Prose (.art-desc) kommt aus partials/art-desc-css und bleibt bewusst inline im
   Layout, weil dasselbe Partial auch die Office-Vorschau speist.
   Design 1:1 aus klemmbrett.de/css/theme.css; Font selbst gehostet (public/fonts).
   ============================================================ */

@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url("/fonts/PlusJakartaSans.woff2") format("woff2");}
:root{
  --paper:#FAFAF7; --paper2:#F2F0E8; --header:#F0EDE4; --surface:#FFFFFF;
  --ink:#1A1A18; --ink-soft:#3A3A2A; --muted:#666666; --muted-strong:#555555;
  --line:#E4E0D5; --line-strong:#D6D1C2;
  --accent:#2C4A1E; --accent2:#7B9B5A; --accent2-on-dark:#9CBF77;   /* --accent2 auf --accent = 3,2:1 (AA-Verstoss); diese Aufhellung = 4,8:1 */ --accent-dark:#1E3514; --accent-light:#F0F7EA;
  --green:#3A6B00; --green-hover:#4D8500; --cart:#296800;
  --wood:#8B5A2B; --birke:#E8D5A3;
  --cta:#111111;
  /* ===== SHOP-FOOTER (dunkel, Optik klemmbrett.de) ===== eigene, klar benannte Tokens statt
     hartkodierter Footer-Farben. Wo moeglich vorhandene Shop-Tokens nutzen: --accent2 = #7B9B5A. */
  --footer-bg:#000;                                    /* Footer-Grund (schwarz wie klemmbrett) */
  --footer-nl-bg:#252525;                              /* Newsletter- und Sitemap-Band */
  --footer-accent:#3A6B00;                             /* klemmbrett.de-Gruen rgb(58,107,0) — Buttons/Fokus. BEWUSST nicht --accent2 (#7B9B5A), das war sichtbar blasser als klemmbrett. */
  --footer-accent-hover:#2E5600;                        /* eine Spur dunkler fuer Hover */
  --good:#3A6B00; --danger:#C0392B;
  --shadow-sm:0 1px 2px rgba(26,26,24,.05), 0 1px 1px rgba(26,26,24,.04);
  --shadow-md:0 10px 30px -12px rgba(26,26,24,.18), 0 2px 6px -2px rgba(26,26,24,.07);
  --shadow-lg:0 30px 60px -24px rgba(26,26,24,.26);
  --radius:14px; --radius-sm:12px; --radius-lg:24px; --pill:100px;

  /* ===== ABSTAENDE ===== Benennung <bereich>-<rolle>. Bewusst semantisch, nicht numerisch:
     Ein Token entsteht NUR, wo EIN Konzept in MEHREREN Regeln steht — der Fall, in dem man beim
     Aendern eine Regel vergisst. Ein Wert, der nur einmal vorkommt, bleibt hartkodiert (dort ist
     die Regel schon die eine Quelle). Ein numerisches --sp-18 waere hier schaedlich: 18px steht
     18x in der Datei, aber nur 4x als dasselbe Konzept — es wuerde Raster und Suchfeld koppeln.
     Auszaehlung + Herleitung: docs/05_design-system.md. Neue Abstaende: vorhandenes Token nehmen
     oder ein neues klar benanntes anlegen — nie einen Wert duplizieren (CLAUDE.md). */

  /* Filterspalte — vorher ueber ein Dutzend .fopt-/.fgroup-Regeln verteilt, und „die Facetten
     etwas luftiger“ hiess: 12 Regeln nachziehen und eine vergessen. */
  --filter-pad:16px;    /* Luft ueber/unter einer Filtergruppe */
  --filter-inset:12px;  /* Gruppenkopf -> Inhalt */
  --filter-row:6px;     /* Zeilen-Padding eines Filterwerts (Klickflaeche) */
  --filter-gap:10px;    /* Kaestchen <-> Text */
  /* Karten-Raster auf Start-/Kategorie-/Suchseite (.cat-grid/.prod-grid/.steps/.rev-grid) —
     traegt „alle Seiten passen zueinander“: eine Aenderung geht durch alle vier Raster. */
  --grid-gap:18px;
  /* KARTEN-INNENPOLSTER — zwei Stufen, und das ist Absicht, kein Drift (geprueft 2026-07-22 an den
     gerenderten Seiten). Beide Kartentypen tragen DASSELBE Treppchen: oben n, seitlich n+1, unten
     n+2 (unten schwerer, damit die Karte optisch auf der Grundlinie steht). Unterschiedlich ist nur
     die Stufe: Die Kategorie-Karte setzt groessere Schrift (Name 16.8px) als die Produktkachel
     (14.72px, Faktor 0.88) — das Polster geht mit (16 vs 14, Faktor 0.875). Und beide stehen NIE
     auf derselben Seite: .cat-card gibt es nur auf der Startseite, .prod-card nur auf Kategorie-
     und Suchseite. Deshalb aus zwei Tokens ableiten statt vereinheitlichen. Messwerte: docs/05. */
  --card-pad:16px;      /* .cc-body — Kategorie-Karte (Startseite) */
  --card-pad-sm:12px;   /* .pc-body — Produktkachel (Kategorie-/Suchseite) */
  /* Textkarte OHNE Bild (.rev, .step auf der Startseite) — EIGENES Konzept, bewusst nicht an
     --card-pad gekoppelt: ganzflaechig gepolsterte Karte statt Kartenfuss unter einem Bild,
     Fliesstext statt Kurzzeile, 3-spaltig (415px) statt 4-spaltig (307px). Beide teilen sich
     aber den seitlichen Einzug (24px) und stehen als Sektionen untereinander — geht er bei
     einer weg, fluchten sie sichtbar nicht mehr. Deshalb EIN Token fuer beide Regeln. */
  --textcard-pad:24px;
  /* Sektionskopf-Innenabstand (Eyebrow->Titel, Titel->Lead, Band-Text) — stand vorher 10x inline
     hartkodiert auf der Startseite (Verstoss gegen die Regel direkt darueber). Eine Aenderung
     geht jetzt durch ALLE Sektionskoepfe. */
  --head-gap:10px;
  --head-gap-lg:16px;  /* dito, groesser im Hero */
  /* Abstand Navigation -> Ueberschrift auf Textseiten (siehe Regel bei .cms-head). */
  --page-top:28px;
  /* Seitenrand im Warenkorb-/Merkzettel-Drawer: Kopf, Koerper und Fuss muessen buendig sein,
     sonst springt die Kante zwischen den drei Bereichen. Stand vorher 3x einzeln da. */
  --drawer-pad:22px;
  /* Klebe-Abstand unter dem Kopf (.filters/.gallery). Abgeleitet — muss zur Kopfhoehe passen;
     stand 2x als calc() da, also eine Stelle zwangslaeufig vergessen, wenn der Kopf sich aendert. */
  --sticky-top:calc(var(--switch-h) + 132px);
  /* Badge-Polster (.badge-sale/-prod/-stock) — drei Regeln, ein Konzept. */
  --badge-x:9px;   /* links/rechts */
  --badge-y:3px;   /* oben/unten */
  /* Bestelleigenschaften-Feldblock (PDP, Gravur/Wunschmass/Zusatzoptionen). Je Token mehrfach
     genutzt (sonst haette ich hartkodiert): --op-gap in .order-props+.op-group, --op-inset in
     .op-field+.op-radios. */
  --op-gap:16px;    /* zwischen Eingabe-Gruppen und Feldern */
  --op-inset:9px;   /* Label -> Steuerelement, Optionszeilen */
  /* 1280 Inhaltsbreite wie klemmbrett.de (.inner/.lp-section-inner) + 2x24px Seitenrand */
  --switch-h:0px; --maxw:1328px;
  /* Lesespalte fuer Textseiten (Impressum/AGB/Info): begrenzt die Zeilenlaenge von Fliesstext.
     ch-basiert wie die vorhandene Longform-Spalte der PDP-Reiter (.tab-panel, 74ch) — ein
     Shop-eigenes Token statt eines hartkodierten Randes. */
  --reading-maxw:72ch;
  --sans:'Plus Jakarta Sans',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* word-spacing gleicht eine ENGE der Schrift aus, keine Geschmacksfrage: Plus Jakarta Sans setzt das
     Leerzeichen mit 0,170em — gemessen im Browser gegen Arial 0,278em, system-ui 0,274em, Georgia
     0,241em; ueblich sind 0,25-0,28em. Woerter klebten dadurch sichtbar aneinander (Nutzer-Meldung
     24.08.2026 an der Artikelbeschreibung). +0,085em hebt es auf 0,255em = Normalbereich.
     Gegengeprueft auf PDP und Kategorieseite (25 Kacheln): 0 neue Textueberlaeufe, Seite nicht
     breiter, Dokument nur 16px hoeher. Die Office-Oberflaeche nutzt dieselbe Schrift
     (public/css/app.css) und hat denselben Effekt — dort BEWUSST noch nicht angefasst. */
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;word-spacing:.085em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
/* ⚠️ word-spacing MUSS fuer Formularelemente ERNEUT gesetzt werden — die Vererbung von `body`
     greift dort NICHT: Browser setzen es in ihrem eigenen Stylesheet auf `normal` zurueck (dieselbe
     Sonderrolle wie font-family/font-size eine Zeile darueber, die deshalb schon `inherit` sind).
     Ohne diese Zeile blieben gemessen ALLE 48 Knoepfe der PDP beim engen 0,170em, waehrend der
     Fliesstext daneben bereits richtig stand — Nutzer-Meldung 24.08.2026: „hier gab es keinen
     effekt", gezeigt am Knopf „Bitte Artikel waehlen". */
button{font-family:inherit;font-size:inherit;cursor:pointer}
button,input,select,textarea{word-spacing:inherit}
h1,h2,h3,h4{margin:0;line-height:1.08;text-wrap:balance;letter-spacing:-.035em;font-weight:800}
p{margin:0}
:focus-visible{outline:2.5px solid var(--green);outline-offset:2px;border-radius:6px}
/* Sprunglink „Zum Inhalt": ausserhalb des Bildes, bis er den Tastaturfokus bekommt (WCAG 2.4.1). */
.skip-link{position:absolute;left:12px;top:-120px;z-index:1300;background:var(--green);color:#fff;padding:10px 16px;border-radius:var(--pill);font-weight:700;text-decoration:none;box-shadow:var(--shadow-lg);transition:top .12s}
.skip-link:focus{top:12px;outline:2.5px solid #fff;outline-offset:2px}
/* Sprungziel <main tabindex=-1>: kein Rahmen um den ganzen Inhalt, der Fokus ist nur programmatisch. */
main:focus-visible{outline:none}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:24px;padding-right:24px}   /* NUR horizontal — sonst nullt das die vertikalen section-Abstaende (schlaegt section{padding:58px 0}) */
.eyebrow{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}

/* Logo */
.bt-logo{height:38px;width:auto;display:block}
/* Footer-Logo: monochrom weiss auf schwarzem Grund (wie klemmbrett), etwas groesser als im Header. */
.footer-brand .bt-logo{width:172px;height:auto;filter:brightness(0) invert(1);opacity:.92;margin-bottom:12px}

/* Demo-Switcher */

/* USP-Bar */
.topbar{background:var(--accent);color:#EAF1E4;font-size:.76rem;font-weight:500}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:6px 28px;justify-content:center;padding-top:9px;padding-bottom:9px}
.topbar span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.topbar svg{width:14px;height:14px;flex:none;opacity:.9}
@keyframes uspTick{from{opacity:0}to{opacity:1}}

/* Header */
.site-head{position:sticky;top:var(--switch-h);z-index:90;background:color-mix(in srgb,var(--header) 92%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid #DDD9CC}
.site-head .wrap{display:flex;align-items:center;gap:18px;padding-top:14px;padding-bottom:14px}
.brand{flex:none;display:flex;align-items:center}
/* position:relative ist der Anker für die Vorschlagsliste (.such-drop) — ohne ihn hängt sie am
   nächsten positionierten Vorfahren und war doppelt so breit wie das Feld (gemessen: 681 statt 344). */
/* margin-left gleicht das linke Innen-Padding des ersten .icon-btn (Merken) rechts aus — sonst wirkt
   der Abstand zum Logo (links) enger als der zur Merkliste (rechts). */
.searchbox{position:relative;flex:1;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--pill);padding:10px 18px;margin-left:10px;min-width:0;transition:.16s}
.searchbox:focus-within{border-color:var(--green);box-shadow:0 0 0 3px var(--accent-light)}
.searchbox svg{width:18px;height:18px;color:var(--muted);flex:none}
.searchbox input{border:0;background:transparent;color:var(--ink);width:100%;font-size:.92rem;outline:none;font-family:inherit}
.searchbox input::placeholder{color:var(--muted)}
.head-actions{display:flex;align-items:center;gap:4px;flex:none}
.icon-btn{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 10px;border:0;background:transparent;color:var(--ink-soft);border-radius:10px;transition:.14s;font-size:.6rem;font-weight:600}
.icon-btn:hover{background:rgba(255,255,255,.7);color:var(--green)}
.icon-btn svg{width:20px;height:20px}
/* Herz fuellt sein 16er-Raster staerker als person/cart2 -> im Header einen Hauch kleiner (18px Glyph),
   Element bleibt 20px per Padding (box-sizing:border-box) -> Button-Hoehe = Konto/Korb.
   Padding oben 2 / unten 0: die Herzform wirkt durch den unteren Punkt optisch nach oben gezogen,
   darum das Glyph 1px tiefer setzen. */
#navFav svg{padding:2px 1px 0}
.icon-btn .badge{position:absolute;top:2px;right:5px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--cart);color:#fff;font-size:.6rem;font-weight:700;display:grid;place-items:center}
/* Lupe-Toggle: nur mobil (unten in der Media-Query eingeblendet); klappt das Suchfeld auf. */
.search-toggle{display:none;align-items:center;justify-content:center;padding:8px;border:0;background:transparent;color:var(--ink-soft);border-radius:10px;cursor:pointer;transition:.14s}
.search-toggle:hover{background:rgba(255,255,255,.7);color:var(--green)}
.search-toggle svg{width:22px;height:22px}

.mainnav{border-top:1px solid #DDD9CC;background:color-mix(in srgb,var(--header) 55%,var(--paper))}
.mainnav .wrap{display:flex;align-items:center;gap:2px;padding:0 10px;overflow-x:auto;scrollbar-width:none}   /* 10px, damit die Link-Kanten (10+14 Link-Padding = 24) mit dem Inhalts-.wrap (24px) fluchten */
.mainnav .wrap::-webkit-scrollbar{display:none}
.mainnav a{padding:12px 14px;font-size:.9rem;font-weight:500;color:#6B6B58;white-space:nowrap;transition:.14s;position:relative}
.mainnav a:hover{color:#2A2A1A;background:rgba(0,0,0,.05)}
.mainnav a.is-active{color:#2A5A08;background:rgba(74,140,28,.08);font-weight:600}
.mainnav a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:#4A8C1C}
.mainnav a.accent{color:var(--green);margin-left:auto;font-weight:600}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1.5px solid transparent;border-radius:var(--pill);padding:13px 26px;font-weight:700;font-size:.92rem;transition:.16s;white-space:nowrap;font-family:inherit}
.btn svg{width:18px;height:18px}
.btn-dark{background:var(--cta);color:#fff}
.btn-dark:hover{background:#000;transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{background:var(--green-hover);transform:translateY(-2px)}
.btn-ghost{background:var(--surface);border-color:var(--line-strong);color:var(--ink)}
.btn-ghost:hover{border-color:var(--green);color:var(--green);background:var(--accent-light)}
.btn-white{background:#fff;color:var(--accent)}
.btn-white:hover{opacity:.9;transform:translateY(-2px)}
.btn-lg{padding:15px 30px;font-size:1rem}

/* Badges */
.badge-sale{background:var(--birke);color:#5A4415;border-radius:var(--pill);padding:var(--badge-y) var(--badge-x);font-size:.62rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
/* links 7px statt var(--badge-x) (=9px): das fuehrende Icon bringt eigene Luft mit. Optische
   Korrektur, kein Ausreisser zum Einsammeln. */
.badge-prod{display:inline-flex;align-items:center;gap:5px;background:var(--accent-light);color:var(--accent);border:1px solid #CFE3BE;border-radius:var(--pill);padding:var(--badge-y) var(--badge-x) var(--badge-y) 7px;font-size:.6rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase}
.badge-prod svg{width:11px;height:11px}
.badge-stock{background:#EFF3EA;color:var(--muted-strong);border-radius:var(--pill);padding:var(--badge-y) var(--badge-x);font-size:.6rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--pill);border:1.5px solid var(--line-strong);background:var(--surface);font-size:.82rem;font-weight:600;color:var(--ink-soft);transition:.14s;white-space:nowrap}
.pill:hover{border-color:var(--green);color:var(--green)}
.pill.is-active{background:var(--accent);border-color:var(--accent);color:#fff}

/* Sections */
.page{display:none}
.page.is-shown{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
section{padding:58px 0}
/* Zwei Sektionen direkt hintereinander: obere Marge kappen -> durchgaengig EIN Abstand (58px),
   statt 58+58=116px. AUTOMATISCH (adjacent sibling) — kein manuelles pt0 mehr, das man vergessen kann.
   Ein Nicht-Section-Block dazwischen (stats/usp-strip) unterbricht die Nachbarschaft absichtlich. */
section.wrap + section.wrap{padding-top:0}
section.wrap:last-of-type{padding-bottom:26px}   /* letzte Section: enger an den Footer (nicht der volle 58er-Rhythmus, aber kein Kleben) */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.04em}
.sec-head .lead{color:var(--muted);font-size:.98rem;max-width:56ch;margin-top:var(--head-gap);line-height:1.55}
.sec-head a.more{color:var(--green);font-weight:700;font-size:.9rem;display:inline-flex;gap:6px;align-items:center}
/* Eyebrow-Label -> direkt folgende Ueberschrift: EIN Abstand aus dem Token, nicht 9x inline. */
.eyebrow + h1, .eyebrow + h2, .eyebrow + h3{margin-top:var(--head-gap)}
.hero .eyebrow + h1{margin-top:var(--head-gap-lg)}

/* Stats */
.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}
.stats .wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.stat{padding:26px 18px;text-align:center;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat .v{font-size:1.7rem;font-weight:800;letter-spacing:-.04em;color:var(--accent)}
.stat .l{font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-top:3px}

/* Motiv-Kacheln */
.tile-art{position:relative;aspect-ratio:1/1;border-radius:var(--radius-sm);overflow:hidden;background:linear-gradient(155deg,#FBF7EE 0%,#F1EAD9 60%,#EADFC8 100%);display:grid;place-items:center}
.tile-art .motif{width:56%;height:56%;color:var(--wood)}
.tile-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#fff}
.gallery .main img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;padding:0}
.gallery .thumb img{width:100%;height:100%;object-fit:cover;border-radius:12px;display:block}
/* Breite FEST (34px = die fruehere Kantenlaenge), Hoehe folgt dem Button per height:100%.
     ⛔ NICHT `aspect-ratio:1` + `width:auto`: dann leitet sich die BREITE aus der Hoehe ab und
     koppelt in einem Button variabler Hoehe zurueck (Hoehe -> Breite -> Umbruch -> Hoehe) — trieb den
     Knopf gemessen auf 162px. Mit fester Breite ist `height:100%` gefahrlos, weil nichts mehr
     zurueckwirkt.
     ⛔ Und NICHT `height:auto` mit groesserer Breite (war kurzzeitig 46px): das Bild sizt sich dann
     quadratisch aus der Breite und ERZWINGT die Buttonhoehe — gemessen 48px auch bei einzeiligen
     Labels, also shopweit hoehere Knoepfe ohne Gegenwert. Mit 34px+height:100% bleibt ein
     einzeiliger Knopf bei 37px wie eh und je und waechst nur dort, wo das Label umbricht. */
.seg button .vswatch{align-self:stretch;height:100%;width:34px;flex:0 0 auto;border-radius:0;object-fit:cover;display:block;margin:0}
.tile-art .fav{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.9);display:grid;place-items:center;color:var(--muted);z-index:2}
.tile-art .fav:hover{color:var(--green);border-color:var(--green)}
/* Das Herz sitzt sonst sichtbar zu hoch im Kreis — und daran ist KEIN CSS schuld: `place-items:center`
   zentriert die 16x16-SVG-Box exakt (9px Luft ringsum, nachgemessen). Der Bootstrap-Herzpfad fuellt
   aber seine Zeichenflaeche nicht symmetrisch: Die Tinte ist 15 statt 16 hoch und sitzt OBEN buendig
   (Luft oben 0, unten 1) — also 0.5px zu hoch. Gilt fuer `heart` UND `heart-fill` gleichermassen
   (syncFavButtons tauscht sie), deshalb reicht der eine Wert hier. Nachgemessen am Knopf: vorher
   9/10, jetzt 9.5/9.5.
   ⛔ An der TINTE messen (`path.getBoundingClientRect()`), nicht an der SVG-Box: Die Box war die
   ganze Zeit korrekt zentriert und verdeckte die Ursache. Und den Pfad VOLLSTAENDIG nehmen — das
   Outline-Herz hat zwei Konturen (aussen + innen, 313 Zeichen); misst man nur die erste, kommt
   Unsinn heraus (scheinbar 14x12.79). Genau das ist hier einmal passiert. */
.tile-art .fav svg{width:16px;height:16px;transform:translateY(.5px)}
.tile-art .flag{position:absolute;top:10px;left:10px;z-index:2}
/* Ausverkauft-Balken auf der Produktkachel (Lagerartikel ohne Bestand). */
.tile-art .soldout{position:absolute;left:0;right:0;bottom:0;z-index:2;background:rgba(26,26,24,.74);color:#fff;font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:5px 0}
/* Artikelseite: nicht lieferbar (statt der frueher STATISCHEN "Auf Lager"-Behauptung). */
/* Support-Ansicht (docs/19): Warnstreifen über der Seite, solange ein Mitarbeiter in einem fremden
   Kundenkonto liest. Bewusst laut und über der ganzen Breite — er soll nicht zu übersehen sein,
   denn darunter stehen personenbezogene Daten. Kein `position:sticky`: Der Streifen darf beim
   Scrollen nichts verdecken; man sieht ihn beim Seitenwechsel ohnehin jedes Mal neu. */
.support-banner{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:10px 16px;
  background:var(--danger);color:#fff;font-size:.88rem;line-height:1.4}
.support-banner svg{flex:none}
.support-banner-txt{flex:1 1 260px}
.support-banner-end{margin:0}
.support-banner-end button{border:1px solid rgba(255,255,255,.7);background:transparent;color:#fff;
  font:inherit;font-weight:700;padding:5px 13px;border-radius:var(--pill);cursor:pointer}
.support-banner-end button:hover{background:rgba(255,255,255,.15)}
/* Volle Zeile unter Text und Knopf — die Meldung soll nicht neben dem Fließtext untergehen. */
.support-banner-block{flex:1 0 100%;font-weight:700;background:rgba(0,0,0,.22);
  padding:7px 11px;border-radius:var(--radius-sm)}
.stock-line.out{color:var(--danger)}
.stock-line.out .dot{background:var(--danger)}

/* Kategorie-Kacheln */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--grid-gap)}
.cat-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:.18s;box-shadow:var(--shadow-sm)}
.cat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--accent2)}
.cat-card .cc-art{aspect-ratio:16/10;background:linear-gradient(155deg,#FBF7EE,#EFE7D4);display:grid;place-items:center;position:relative;border-bottom:1px solid var(--line)}
.cat-card .cc-art .motif{width:40%;height:40%;color:var(--accent)}
.cat-card .cc-art .cc-photo{width:100%;height:100%;object-fit:cover;display:block}
.cat-card .cc-art .flag{position:absolute;top:10px;left:10px}
.cat-card .cc-body{padding:var(--card-pad) calc(var(--card-pad) + 1px) calc(var(--card-pad) + 2px);display:flex;flex-direction:column;gap:5px;flex:1}
.cat-card .cc-name{font-weight:800;font-size:1.05rem;letter-spacing:-.02em;display:flex;align-items:center;justify-content:space-between;gap:8px}
.cat-card .cc-desc{color:var(--muted);font-size:.82rem;line-height:1.45}
.cat-card .cc-cnt{margin-top:auto;font-size:.74rem;color:var(--green);font-weight:700;padding-top:8px}

/* Produkt-Karten */
.prod-grid{display:grid;gap:var(--grid-gap)}
/* cols-5 = Kategorieseiten (Vorgabe 16.08.2026), cols-4 = Suche/Zusatzbloecke.
   Bei 1328px Inhaltsbreite bleiben je Kachel 242px (statt 306px bei vier) — die Kachel haelt das,
   weil der Name ohnehin hart auf zwei Zeilen geklemmt ist (s. .prod-card weiter unten). */
.prod-grid.cols-5{grid-template-columns:repeat(5,1fr)}
.prod-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.prod-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.prod-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:.16s;box-shadow:var(--shadow-sm)}
.prod-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--line-strong)}
.prod-card .pc-body{padding:var(--card-pad-sm) calc(var(--card-pad-sm) + 1px) calc(var(--card-pad-sm) + 2px);display:flex;flex-direction:column;gap:8px;flex:1}
/* Name hart auf 2 Zeilen (mit „…"): lange Namen machen sonst einzelne Rasterreihen hoeher -> unruhig. */
.pc-name{font-weight:700;font-size:.92rem;line-height:1.32;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.pc-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:auto;padding-top:6px}
.pc-price{display:flex;flex-direction:column;line-height:1.15}
/* Praefix „ab" jetzt INLINE vor dem Preis (spart die eigene Zeile -> weniger Weissraum). */
.pc-line{display:flex;align-items:baseline;gap:4px;flex-wrap:wrap}
.pc-price .ab{font-size:.62rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.pc-price .val{font-weight:800;font-size:1.12rem;letter-spacing:-.02em}
/* „· je nach Größe/Länge …" — INLINE hinter dem Preis (sagt, WOVON der ab-Preis abhaengt;
   ShopController::kachelnAnreichern). Inline spart die Zeile UND haelt die Preiszeile ueber alle
   Kacheln auf gleicher Hoehe (sonst saesse der Preis bei Treiber-Kacheln hoeher -> unruhig). */
.pc-varies{font-size:.66rem;color:var(--muted);font-weight:600;line-height:1.3}
/* Grundpreis auf der Kachel: EIGENE Zeile unter dem Preis. Inline gedacht war er zu lang - mit
   Preistreiber daneben ("ab 4,53 EUR, je kleinstes Mass, 5.033,33 EUR / 1 m2") brach er ohnehin
   um, und der Trenner landete als einsamer Punkt am Zeilenanfang (gesehen 08.09.2026 in der
   Kategorie Quadrate). Als eigene Zeile bricht nichts mehr unkontrolliert, und die Angabe steht
   da, wo der Kunde sie sucht: direkt unter dem Preis. */
/* Bewusst leiser als der Preistreiber daneben: normale Strichstaerke statt 600 und eine Stufe
   kleiner (.62rem wie das AB-Label). Der Grundpreis ist Pflichtangabe, nicht Verkaufsargument -
   bei Kleinstzuschnitten steht dort ein vierstelliger Quadratmeterpreis, der sonst die Kachel
   dominiert (Nutzer 08.09.2026: 'den grundpreis in der kachel etwas dezenter machen').
   Farbe bleibt --muted (#666 auf Weiss = 5,7:1) - heller waere unter WCAG AA. */
.pc-gp{display:block;font-size:.62rem;color:var(--muted);font-weight:400;line-height:1.25;white-space:nowrap;margin-top:2px}
.pc-add{width:42px;height:42px;border-radius:50%;background:var(--accent-light);color:var(--accent);border:0;display:grid;place-items:center;transition:.14s;flex:none}
.pc-add:hover{background:var(--green);color:#fff}
.pc-add svg{width:19px;height:19px}

/* ============ STARTSEITE ============ */
.hero{padding:66px 0 44px}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(2.5rem,5.4vw,4rem);line-height:1;letter-spacing:-.05em;font-weight:800}
.hero h1 .hl{color:var(--accent)}
.hero .sub{color:var(--muted-strong);font-size:1.14rem;max-width:46ch;margin-top:22px;line-height:1.55}
.hero .cta-row{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.hero .trust-line{display:flex;align-items:center;gap:9px;margin-top:24px;color:var(--muted);font-size:.84rem}
/* Sterne = inline Bootstrap-SVG (star-fill), nicht mehr das Schriftzeichen -> Abstand per gap,
   nicht per letter-spacing (das greift bei SVG nicht). */
.stars{display:inline-flex;align-items:center;gap:2px;line-height:1}
.stars svg{display:block;flex:none}
.hero .trust-line .stars{color:var(--wood)}
.hero-visual{position:relative;aspect-ratio:1/1;border-radius:var(--radius-lg);background:linear-gradient(155deg,#FBF6EC,#EFE5D0 60%,#E6D8BC);border:1px solid var(--line);box-shadow:var(--shadow-lg);overflow:hidden}
.hero-visual .big-motif{position:absolute;inset:0;display:grid;place-items:center}
.hero-visual .big-motif svg{width:58%;height:58%;color:var(--wood)}
/* Hero-Foto (echte Werkstatt/Laser-Aufnahme) füllt die 1:1-Fläche; Chips/Maß liegen als Overlay darüber. */
.hero-visual .hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-visual .mchip{position:absolute;background:rgba(255,255,255,.95);border:1px solid var(--line);border-radius:var(--pill);padding:8px 14px;box-shadow:var(--shadow-md);font-size:.72rem;font-weight:700;display:flex;align-items:center;gap:8px;color:var(--ink-soft)}
.hero-visual .mchip .sw{width:13px;height:13px;border-radius:50%;flex:none}
.hero-visual .mchip.m1{top:28px;left:26px}
.hero-visual .mchip.m2{top:70px;right:28px}
.hero-visual .mchip.m3{bottom:32px;left:32px}
.hero-visual .measure{position:absolute;bottom:26px;right:26px;font-size:.72rem;color:#fff;font-weight:700;background:var(--accent);padding:6px 13px;border-radius:var(--pill);display:flex;align-items:center;gap:7px}

.usp-strip{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.usp-strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.usp{display:flex;gap:13px;align-items:flex-start;padding:26px 22px;border-right:1px solid var(--line)}
.usp:last-child{border-right:0}
.usp .ui{width:40px;height:40px;border-radius:10px;background:var(--accent);color:#fff;display:grid;place-items:center;flex:none}
.usp .ui svg{width:20px;height:20px}
.usp h3{font-size:.94rem;letter-spacing:-.01em;font-weight:800}
.usp p{color:var(--muted);font-size:.8rem;margin-top:3px;line-height:1.45}

.mat-row{display:flex;gap:12px;flex-wrap:wrap}
.mat-chip{flex:1;min-width:150px;display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);transition:.16s;box-shadow:var(--shadow-sm)}
.mat-chip:hover{transform:translateY(-2px);border-color:var(--green);box-shadow:var(--shadow-md)}
.mat-chip .msw{width:40px;height:40px;border-radius:11px;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.mat-chip .mt{font-weight:800;font-size:.94rem}
.mat-chip .mc{font-size:.7rem;color:var(--muted);font-weight:600}

.steps{counter-reset:stepnum;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)}
.step{counter-increment:stepnum;background:var(--paper2);border-radius:var(--radius);padding:calc(var(--textcard-pad) + 2px) var(--textcard-pad);position:relative;overflow:hidden}
.step::before{content:"0" counter(stepnum);font-size:2.4rem;font-weight:800;color:#DDE7D2;line-height:1;position:absolute;top:16px;right:18px;letter-spacing:-.04em}
.step .si{width:46px;height:46px;border-radius:12px;background:var(--accent);color:#fff;display:grid;place-items:center;margin-bottom:15px}
.step .si svg{width:22px;height:22px}
.step h3{font-size:1.1rem;margin-bottom:7px;letter-spacing:-.02em;font-weight:800}
.step p{color:var(--muted-strong);font-size:.88rem;line-height:1.5}

.promise{background:var(--accent);color:#EAF1E4;border-radius:var(--radius-lg);padding:52px 44px;text-align:center;position:relative;overflow:hidden}
.promise .eyebrow{color:var(--accent2-on-dark)}
.promise blockquote{margin:14px auto 0;max-width:26ch;font-size:clamp(1.5rem,3.2vw,2.3rem);font-weight:800;letter-spacing:-.03em;line-height:1.15;color:#fff}
.promise .sig{margin-top:18px;font-size:.86rem;color:rgba(234,241,228,.8);font-weight:600}

.band{background:var(--paper2);border-radius:var(--radius-lg);padding:44px 40px;display:grid;grid-template-columns:1.4fr auto;gap:28px;align-items:center}
.band h3{font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.03em}
.band p{color:var(--muted-strong);margin-top:var(--head-gap);max-width:52ch}
.band .band-cta{display:flex;gap:12px;flex-wrap:wrap}

.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)}
#kundenmeinungen .trust-line{margin-top:12px}   /* Titel -> Sterne-Zeile (Kundenmeinungen) */
.rev-more{text-align:center;margin-top:26px}    /* „Alle Rezensionen"-Zeile unter dem Raster */
/* D16: „Alle Rezensionen auf Google ansehen" ist mit dem globalen `.btn{white-space:nowrap}` 383px
   breit — am 380px-Viewport ragt der Knopf 19px hinaus (gemessen 04.09.2026: `scrollWidth` 399 gegen
   `clientWidth` 380) und der echte Handy-Browser zoomt daraufhin die GANZE Startseite heraus. Nur
   DIESER Knopf darf deshalb umbrechen; `white-space` global umzustellen wuerde jede Knopfzeile im
   Shop treffen — die meisten sind kurz und sollen einzeilig bleiben. */
.rev-more .btn{white-space:normal;max-width:100%}
.pdp-short{color:var(--muted-strong);margin-top:12px;max-width:52ch}  /* Kurzbeschreibung auf der Artikelseite */
.rev{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--textcard-pad)}
.rev .stars{color:var(--wood)}
.rev p{margin-top:12px;font-size:.92rem;color:var(--ink-soft);line-height:1.55}
.rev .who{margin-top:15px;font-size:.8rem;color:var(--muted);font-weight:700;display:flex;align-items:center;gap:9px}
.rev .who .av{width:28px;height:28px;border-radius:50%;background:var(--accent-light);color:var(--accent);display:grid;place-items:center;font-weight:800;font-size:.72rem}

/* ============ FOOTER (dunkel, Optik 1:1 klemmbrett.de) ============
   Aufbau wie die Vorlage: (1) .footer-inner = 4 Spalten (Marke/Kontakt/Rechtliches/Folge uns),
   (2) .footer-newsletter-Band, (3) .footer-sitemap (Themen-/Service-Spalten), (4) .footer-bottom.
   Farben ueber die Footer-Tokens (--footer-*); Struktur/Masse aus klemmbrett.de/css/theme.css. */
.site-foot{background:var(--footer-bg);color:rgba(255,255,255,.75);padding:26px 0 30px}   /* padding-top von 52 -> 26: der schwarze Leerraum oben war zu gross */

/* (1) Vier Spalten — zentriert wie in der Vorlage */
.footer-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;justify-items:center;text-align:center;gap:20px;color:rgba(255,255,255,.75)}
.footer-inner>div{width:100%;background:var(--footer-nl-bg);border-radius:12px;padding:16px;box-sizing:border-box}
.footer-brand{display:flex;flex-direction:column;align-items:center}
.footer-brand-name{font-size:14px;font-weight:700;color:#fff;margin-bottom:8px}
.footer-tagline{font-size:13px;color:rgba(255,255,255,.6);line-height:1.55;max-width:34ch;margin:0 auto}
/* margin:0 0 16px statt nur margin-bottom: der Heading-Reset (Zeile 150) deckt nur h1–h4 ab, die
   Spaltentitel sind h5 → sonst bleibt der UA-Default margin-top (~1.33em) stehen und drückte die drei
   Titel gegenüber dem Logo (kein margin-top) sichtbar nach unten. */
.footer-col-title{line-height:1.3;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#fff;margin:0 0 16px}
.footer-links{display:flex;flex-direction:column;gap:8px}
.footer-links a{font-size:13px;color:rgba(255,255,255,.75);transition:color .2s}
.footer-links a:hover{color:#fff}
/* „Folge uns" — Pillen-Links mit Icon */
.footer-social-links{display:flex;flex-direction:column;align-items:center;gap:12px}
.footer-social-links a{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:fit-content;height:38px;padding:0 18px;font-size:13px;font-weight:600;color:#fff;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.09);border-radius:8px;transition:background .2s,border-color .2s}
.footer-social-links a:hover{background:rgba(255,255,255,.3);border-color:rgba(255,255,255,.65)}
.footer-social-links svg{width:15px;height:15px;flex:none}
/* Gruener Button — „Vertrag widerrufen" (Rechtliches) und „Anmelden" (Newsletter) */
.footer-btn-green{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 18px;border-radius:8px;font-size:13px;font-weight:600;font-family:inherit;border:1px solid var(--footer-accent);background:var(--footer-accent);color:#fff;cursor:pointer;transition:background .2s,border-color .2s;white-space:nowrap}
.footer-btn-green:hover{background:var(--footer-accent-hover);border-color:var(--footer-accent-hover)}
/* Vertrauens-Badges (Kontakt-Karte): statisch, echte Noten, Link zu echten Bewertungen. Weisse Kacheln wie klemmbretts Trustami-Siegel. */
.footer-trust{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.ft-badge{display:flex;align-items:center;gap:10px;background:#fff;border-radius:10px;padding:8px 11px;text-decoration:none;transition:transform .15s,box-shadow .15s}
.ft-badge:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.3)}
.ft-badge .ft-ico{flex:0 0 auto;width:24px;height:24px;display:flex;align-items:center;justify-content:center}
.ft-badge .ft-ico img{display:block;width:auto;height:22px}
.ft-badge .ft-body{display:flex;flex-direction:column;line-height:1.25;min-width:0;flex:1 1 auto}
.ft-badge .ft-stars{color:#fbbc05;font-size:12px;letter-spacing:1.5px}
.ft-badge .ft-line{color:#202124;font-size:11.5px}
.ft-badge .ft-line b{font-weight:700}
.ft-badge .ft-sub{color:#5f6368;font-size:10px}
.ft-badge .ft-ext{flex:0 0 auto;color:#9aa0a6;display:flex;align-items:center}
.footer-btn-green svg{flex:none}
.footer-widerruf-btn{margin-top:14px}

/* (2) Newsletter-Band — Masse exakt aus klemmbrett.de, Farben ueber Footer-Tokens */
.footer-newsletter{max-width:1280px;margin:20px auto 0;background:var(--footer-nl-bg);border-radius:12px;padding:16px 24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 32px;scroll-margin-top:100px}
.footer-nl-text{flex:1 1 280px;min-width:240px;text-align:left}
.footer-nl-title{font-size:16px;font-weight:700;color:#fff;margin:0 0 4px}
.footer-nl-sub{font-size:13px;color:rgba(255,255,255,.7);margin:0;line-height:1.45}
.footer-nl-form{flex:1 1 320px;min-width:260px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.footer-nl-form input[type=email]{flex:1 1 180px;min-width:0;height:38px;padding:0 14px;border:1px solid #4a4a4a;border-radius:8px;background:#1a1a1a;color:#fff;font-size:14px;font-family:inherit}
.footer-nl-form input[type=email]:focus{outline:none;border-color:var(--footer-accent)}
.footer-nl-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.footer-nl-consent{flex:1 1 100%;font-size:11px;color:rgba(255,255,255,.55);line-height:1.45;margin:0}
.footer-nl-consent a{color:rgba(255,255,255,.8);text-decoration:underline;text-underline-offset:2px}
.footer-nl-status{flex:1 1 100%;font-size:12px;font-weight:600;color:var(--footer-accent);margin:0;line-height:1.4}
.footer-nl-status:empty{display:none}
.footer-nl-status.is-error{color:#ff9b8a}

/* (3) Sitemap-Band — Themen-/Service-Spalten */
.footer-sitemap{max-width:1280px;margin:20px auto 0;background:var(--footer-nl-bg);border-radius:12px;padding:16px 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px 28px}
@media (max-width:820px){ .footer-sitemap{grid-template-columns:1fr 1fr} }
.footer-pay-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.pay-badge{display:inline-flex;align-items:center;height:26px;padding:0 8px;background:#fff;border-radius:5px;font-size:12.5px;font-weight:800;letter-spacing:.2px;box-shadow:0 1px 2px rgba(0,0,0,.2);white-space:nowrap}
.pay-badge i{font-style:normal}
/* Echte SVG-Wortmarken aus shop/_pay-logos (identisch zur Produktseite). Bewusst unter
   .footer-pay-badges gescopt, damit es sich nicht mit shop-pdp.css beisst, die dieselben
   Klassennamen fuer den Kaufbereich definiert. */
.footer-pay-badges .pay-logo{display:inline-flex;align-items:center;justify-content:center;
  height:26px;padding:0 8px;background:#fff;border-radius:5px;box-shadow:0 1px 2px rgba(0,0,0,.2);
  overflow:hidden}
.footer-pay-badges .pay-logo[hidden]{display:none}
.footer-pay-badges .pay-logo img{display:block;width:auto}
.footer-pay-badges .pay-logo--fill{padding:0;box-shadow:none;background:none;border-radius:0}
.footer-pay-badges .pay-logo--fill img{height:100%;width:auto}
.pay-paypal{color:#003087}.pay-paypal i{color:#0070ba}      /* offizielles PayPal-Blau statt #009CDE: 5,2:1 statt 3,1:1 */
.pay-visa{color:#1a1f71;font-style:italic;font-weight:900}
.pay-mc{color:#eb001b}.pay-mc i{color:#b35a00}              /* abgedunkeltes Mastercard-Orange (#F79E1B war 2,1:1) */
.pay-amazon{color:#232f3e}.pay-amazon i{color:#a85400}      /* abgedunkeltes Amazon-Orange (#FF9900 war 2,1:1) */
.pay-gpay,.pay-apay{color:#3c4043}
.pay-rate,.pay-vorkasse{color:var(--footer-accent,#3a6b00)}
.footer-pay-note{font-size:11px;color:rgba(255,255,255,.55);margin:10px 0 0;line-height:1.4}
.footer-smgroup-title{line-height:1.3;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.5);text-align:center;margin:0 0 10px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.12)}
.footer-smgroup a{display:block;font-size:13px;line-height:1.9;color:rgba(255,255,255,.75);text-align:center;transition:color .2s}
.footer-smgroup a:hover{color:#fff}

/* (4) Bottom-Leiste */
.footer-bottom{max-width:1280px;margin:20px auto 0;padding-top:10px;border-top:1px solid rgba(255,255,255,.25);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.footer-bottom p{font-size:12px;color:rgba(255,255,255,.75);margin:0}

/* ============ KATEGORIESEITE ============ */
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--muted);padding:18px 0;flex-wrap:wrap;font-weight:500}
.breadcrumb a{color:var(--accent)}   /* war --accent2 (#7B9B5A) = 3,0:1 auf hellem Grund — WCAG-AA-Verstoss (PSI 20.08.2026) */
.breadcrumb a:hover{color:var(--green)}
.breadcrumb .sep{opacity:.5}
.breadcrumb .cur{color:var(--ink);font-weight:700}
.cat-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid var(--line)}
.cat-hero .ch-l{max-width:64ch}
.cat-hero h1{font-size:clamp(2rem,4vw,2.8rem);letter-spacing:-.045em;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cat-hero p{color:var(--muted-strong);margin-top:11px;font-size:.96rem;line-height:1.55}
.cat-hero .cnt{font-size:.82rem;color:var(--green);font-weight:800}
.subcats{display:flex;gap:9px;flex-wrap:wrap;margin:22px 0 4px}
/* Kategorie/Suche nutzt die VOLLE Breite — die Facetten leben im Drawer (Knopf in der Toolbar),
   nicht mehr in einer festen Seitenspalte. */
.cat-layout{padding-top:28px;min-width:0}
.filters{display:flex;flex-direction:column;gap:4px}
/* Facettengruppe = natives <details> (docs/05: aufklappbare Listen = <details>, kein JS-Toggle).
   Voreinstellung/Logik s. shop/_facetten.blade.php. */
.fgroup{border-bottom:1px solid var(--line);padding:var(--filter-pad) 0}
.fgroup:first-child{padding-top:0}
.fg-h{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);
  display:flex;align-items:center;gap:8px;font-weight:800;cursor:pointer;list-style:none;user-select:none}
.fg-h::-webkit-details-marker{display:none}
.fg-h:hover{color:var(--ink)}
.fg-t{flex:1;min-width:0}
/* Anzahl gesetzter Haekchen — macht einen aktiven Filter auch an der ZUGEKLAPPTEN Gruppe sichtbar. */
.fg-n{flex:none;background:var(--green);color:#fff;border-radius:var(--pill);font-size:.66rem;
  font-weight:800;padding:1px 6px;letter-spacing:0}
.fg-c{flex:none;display:grid;place-items:center;color:var(--muted);transition:transform .18s}
.fgroup[open] .fg-c{transform:rotate(180deg)}
.fg-b{padding-top:var(--filter-inset)}
.fopt{display:flex;align-items:center;gap:var(--filter-gap);padding:var(--filter-row) 0;font-size:.87rem;color:var(--ink-soft);cursor:pointer;font-weight:500}
/* .fopt ist display:flex -> das hidden-Attribut allein wuerde still verpuffen (Rest-Werte/Suche). */
.fopt[hidden]{display:none}
.fopt:hover{color:var(--ink)}
.fopt .cb{width:19px;height:19px;border-radius:6px;border:1.5px solid var(--line-strong);display:grid;place-items:center;flex:none;transition:.14s;background:var(--surface)}
.fopt .cb svg{width:12px;height:12px;color:#fff;opacity:0}
.fopt .fc{margin-left:auto;font-size:.72rem;color:var(--muted);font-weight:600}
/* 0 Treffer im aktuellen Filterstand: sichtbar lassen (sonst waere ein gesetztes Haekchen weg und
   nicht mehr abwaehlbar), aber erkennbar zurueckgenommen. Angeklickte bleiben immer normal. */
.fopt.zero{opacity:.4}
.fopt.zero:hover{color:var(--ink-soft)}
.such-hinweis{font-size:.85rem;color:var(--muted)}
/* Vorschlagsliste unter dem Suchfeld. Das Formular ist der Anker (position:relative kommt aus
   .searchbox), damit die Liste exakt unter dem Feld haengt — auch mobil. */
.such-drop{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.13);
  overflow:hidden;z-index:60}
.such-drop a{display:flex;align-items:center;gap:11px;padding:9px 12px;text-decoration:none;color:var(--ink)}
.such-drop a:hover,.such-drop a.on{background:var(--paper2)}
.such-drop img{width:38px;height:38px;object-fit:contain;flex:none;border-radius:7px;background:var(--paper2)}
.such-drop .sd-n{font-size:.85rem;font-weight:600;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.such-drop .sd-p{margin-left:auto;font-size:.8rem;font-weight:700;white-space:nowrap;color:var(--ink-soft)}
.such-drop .sd-alle{display:block;padding:8px 12px;text-align:center;font-size:.8rem;font-weight:700;
  color:var(--green);border-top:1px solid var(--line);background:var(--paper2)}
.such-leer{background:var(--paper2);border:1px solid var(--line);border-radius:12px;padding:22px 24px;margin:8px 0 24px}
.such-leer p{margin:0;color:var(--ink-soft);font-size:.92rem}
.such-leer p+p{margin-top:6px;color:var(--muted)}
/* „Das könnte auch passen" — die ungefaehren Treffer, abgesetzt HINTER dem Ergebnis.
   Die kraeftige Trennlinie oben ist die eigentliche Botschaft: Ab hier endet das Suchergebnis
   und beginnt ein Vorschlag. Ohne sie waere es wieder das alte Problem — Taschenwaermer, die
   wie Suchtreffer aussehen. */
.auch-block{margin:44px 0 0;padding-top:28px;border-top:2px solid var(--line)}
.auch-kopf{margin-bottom:18px}
.auch-kopf h2{margin:0 0 4px;font-size:1.15rem;font-weight:800;color:var(--ink)}
.auch-kopf p{margin:0;font-size:.88rem;color:var(--muted)}
.auch-mehr{margin:18px 0 0;text-align:center}
.auch-mehr a{font-size:.85rem;font-weight:700;color:var(--green)}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatch{width:28px;height:28px;border-radius:9px;border:2px solid transparent;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);cursor:pointer;transition:.14s}
.swatch:hover{transform:scale(1.08)}
.swatch.on{border-color:var(--green);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 0 0 2px var(--accent-light)}
.range-mini{display:flex;align-items:center;gap:10px;font-size:.76rem;color:var(--muted);font-weight:600}
.range-mini input[type=range]{flex:1;accent-color:var(--green)}
/* Attribut-Facetten (Filter-Sidebar) */
.cat-main{min-width:0}
/* ⛔ KEIN eigener Scrollcontainer je Facette — die Seite scrollt als Ganzes.
   Hier stand max-height:232px + overflow-y:auto + overscroll-behavior:contain (+ scrollbar-gutter/
   padding-right, die es nur brauchte, weil der Scrollbalken die Trefferzahl verdeckte). Damit waren
   6 von 8 Facetten eigene Scrollkaesten, und `contain` verbot dem Browser ausdruecklich, das
   Mausrad an die Seite weiterzureichen: Die Spalte war 2468 px hoch und liess sich praktisch nicht
   scrollen (Nutzer, 2026-07-17). Statt Deckel: Top-Werte + „+ N weitere“ + Suchfeld, s. _facetten. */
.fopt-list{display:flex;flex-direction:column;gap:1px}
.fopt input{position:absolute;opacity:0;width:0;height:0}
.fopt .fc{margin-left:auto;flex:none}
.fopt:has(input:checked){color:var(--ink);font-weight:700}
.fopt:has(input:checked) .cb{background:var(--green);border-color:var(--green)}
.fopt:has(input:checked) .cb svg{opacity:1}
/* Tastatur-Fokus: das echte <input> ist visuell versteckt (0x0, opacity:0) -> der Fokusring landet
   sonst auf einem unsichtbaren Kasten. Ring deshalb auf die sichtbare .cb-Box legen. */
.fopt:focus-within{color:var(--ink)}
.fopt:focus-within .cb{outline:2.5px solid var(--green);outline-offset:2px;border-color:var(--green)}
/* „+ N weitere“ — bewusst leise: Textknopf, kein Rahmen, kein Button-Look (der wuerde in einer
   Spalte aus 8 Gruppen achtmal um Aufmerksamkeit buhlen). N = tatsaechliche Restanzahl. */
.fmore{background:none;border:0;padding:7px 0 2px;font-family:inherit;font-size:.78rem;font-weight:700;
  color:var(--muted);cursor:pointer;text-align:left;text-underline-offset:3px}
.fmore:hover{color:var(--green);text-decoration:underline}
.fmore:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:4px}
/* Suchfeld in der Facette (ab 12 Werten) — schlank, damit es die Gruppe nicht dominiert. */
.fsearch{display:flex;align-items:center;gap:7px;margin-bottom:8px;padding:0 9px;
  border:1.5px solid var(--line);border-radius:9px;background:var(--surface);transition:.14s}
.fsearch:focus-within{border-color:var(--green);box-shadow:0 0 0 3px var(--accent-light)}
.fsearch svg{flex:none;color:var(--muted)}
.fsearch input{flex:1;min-width:0;border:0;outline:0;background:none;padding:7px 0;
  font-family:inherit;font-size:.82rem;color:var(--ink)}
.fsearch input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.fleer{font-size:.78rem;color:var(--muted);padding:4px 0 2px}
.price-range{display:flex;align-items:center;gap:8px}
.price-range input{width:100%;min-width:0;border:1.5px solid var(--line-strong);background:var(--surface);border-radius:10px;padding:8px 10px;font-size:.85rem;font-family:inherit;color:var(--ink);outline:none}
.price-range input:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--accent-light)}
.price-range span{color:var(--muted)}
.filter-actions{display:flex;flex-direction:column;gap:9px;padding-top:16px;border-top:1px solid var(--line);margin-top:6px}
.filter-actions .btn{width:100%}
.filter-reset{text-align:center;font-size:.82rem;color:var(--muted);font-weight:600}
.filter-reset:hover{color:var(--green)}
/* Chips = gesetzte Filter, jeder entfernt SEINEN Filter (Link). Das x sitzt hinten und wird erst
   beim Hover kraeftig — ruhig im Normalzustand, eindeutig beim Zielen. */
.active-filters a.chip-x{cursor:pointer;transition:.14s}
.active-filters a.chip-x svg{opacity:.5;transition:.14s}
.active-filters a.chip-x:hover{filter:brightness(.96)}
.active-filters a.chip-x:hover svg{opacity:1}
.active-filters .chip-reset{background:var(--paper2);color:var(--ink-soft)}
.cat-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.cat-toolbar .res{font-size:.86rem;color:var(--muted)}
.cat-toolbar .res b{color:var(--ink)}
.toolbar-right{display:flex;align-items:center;gap:10px}
.sortsel{border:1.5px solid var(--line-strong);background:var(--surface);border-radius:var(--pill);padding:10px 14px;color:var(--ink);font-size:.84rem;font-weight:700;outline:none;cursor:pointer;font-family:inherit}
.active-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.chip-x{display:inline-flex;align-items:center;gap:6px;background:var(--accent-light);color:var(--accent);border:0;padding:7px 12px;border-radius:var(--pill);font-size:.76rem;font-weight:700}
.chip-x svg{width:13px;height:13px}
/* ===== Filter-Knopf + Drawer (Facetten hinter einem Knopf, Grid nutzt die volle Breite) ===== */
.filterbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.filter-btn{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line-strong);background:var(--surface);color:var(--ink);border-radius:var(--pill);padding:9px 16px;font-weight:700;font-size:.85rem;cursor:pointer;transition:.14s}
.filter-btn:hover{border-color:var(--green);color:var(--green)}
.filter-btn svg{width:15px;height:15px}
.filter-btn .fb-n{background:var(--green);color:#fff;border-radius:var(--pill);font-size:.68rem;font-weight:800;min-width:19px;height:19px;display:inline-grid;place-items:center;padding:0 5px;margin-left:2px}
/* Drawer von LINKS — Warenkorb/Merkzettel kommen von rechts, so bleibt der Filter klar getrennt. */
.drawer.drawer-left{right:auto;left:0;transform:translateX(-102%)}
.drawer.drawer-left.show{transform:none}
/* Facettenspalte im Drawer: nicht sticky, ohne die Sidebar-Rahmen/Row-Umbrueche. */
.filter-drawer .filters{position:static;flex-direction:column;border:0;padding:0;gap:2px}
.filter-drawer .drawer-body{padding-top:16px}
/* „Anwenden" bleibt am Fuss des Drawers stehen, auch bei langer Facettenliste. */
.filter-drawer .filter-actions{position:sticky;bottom:0;background:var(--paper);border-top:1px solid var(--line);padding:14px 0 6px;margin-top:10px;display:flex;align-items:center;gap:14px}
.pagination{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:38px}
.pagination a{min-width:42px;height:42px;padding:0 12px;border-radius:var(--pill);border:1.5px solid var(--line);background:var(--surface);display:grid;place-items:center;font-weight:700;font-size:.86rem;color:var(--ink-soft);transition:.14s}
.pagination a:hover{border-color:var(--green);color:var(--green)}
.pagination a.is-active{background:var(--accent);border-color:var(--accent);color:#fff}
.pagination a.dots{border:0;background:transparent;pointer-events:none}
/* Seitenzahl und „Artikel pro Seite" in EINER Zeile: Seitenzahl MITTIG, Auswahl RECHTS.
   Drei Spalten 1fr/auto/1fr — die leere erste Spalte ist der Trick: sie spiegelt die rechte, damit
   die Seitenzahl echt in der Mitte der Zeile steht und nicht von der Auswahl nach links gedrueckt
   wird (was ein Flex mit `margin-left:auto` taete). Greift auch, wenn nur EINER der beiden Teile
   da ist (eine Seite bei 50/100 -> nur die Auswahl, weiterhin rechts). */
.pag-zeile{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin-top:38px}
.pag-zeile .pagination{grid-column:2;margin-top:0}
.pag-zeile .proseite{grid-column:3;justify-self:end}
/* Bewusst leise: kleine, graue Beschriftung, damit sie die Seitenzahl nicht ueberstimmt. */
.proseite{display:flex;align-items:center;gap:10px}
.proseite label{font-size:.8rem;color:var(--muted);font-weight:600;white-space:nowrap}
.proseite .sortsel{padding:6px 12px;font-size:.8rem}
/* Mobil passen Seitenzahl (5 Knoepfe a 42px) und Auswahl (~180px) nicht nebeneinander — das waere
   breiter als der Viewport und der Handy-Browser zoomte die GANZE Seite heraus (Regel D16).
   Deshalb dort untereinander, beides mittig. */
@media (max-width:680px){
  .pag-zeile{grid-template-columns:1fr;justify-items:center;gap:16px}
  .pag-zeile .pagination,.pag-zeile .proseite{grid-column:1;justify-self:center}
}

/* ============ ARTIKELSEITE ============ */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding-top:20px;align-items:start}
/* min-width:0 gegen Grid-Blowout: ohne dies bläht der Thumbnail-Streifen (bei Varianten-Artikeln
   bis zu Dutzende Bilder, scrollWidth Tausende px) die 1fr-Galerie-Spalte auf und quetscht die
   Info-Spalte — das Hauptbild wird dann viel zu groß. min-width:0 hält die Spalte bei ihrem 1fr. */
.gallery{position:sticky;top:var(--sticky-top);display:flex;flex-direction:column;gap:12px;min-width:0}
.gallery .main{position:relative;aspect-ratio:1/1;border-radius:var(--radius-lg);border:1px solid var(--line);background:linear-gradient(155deg,#FBF6EC,#EFE5D0 60%,#E6D8BC);display:grid;place-items:center;overflow:hidden;box-shadow:var(--shadow-md)}
.gallery .main .motif{width:58%;height:58%;color:var(--wood)}
.gallery .main .dimtag{position:absolute;font-size:.74rem;color:#fff;font-weight:700;background:var(--accent);padding:6px 13px;border-radius:var(--pill)}
.gallery .main .dimtag.d1{top:22px;left:22px}
.gallery .main .dimtag.d2{bottom:22px;right:22px;background:rgba(255,255,255,.92);color:var(--ink-soft)}
/* Thumbnail-Slider: horizontaler Streifen, ~5 sichtbar, Rest per Wischen/Pfeil. Ersetzt das alte
   4er-Raster (max. 8 Bilder). Snap + Peek des naechsten Bilds signalisieren „scrollbar". */
.thumbs-wrap{position:relative}
.gallery .thumbs{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding-bottom:2px;scrollbar-width:none}
.gallery .thumbs::-webkit-scrollbar{display:none}
.gallery .thumb{flex:0 0 calc((100% - 4*10px)/5);scroll-snap-align:start;aspect-ratio:1/1;border-radius:14px;border:1px solid var(--line);background:#F5F1E8;display:grid;place-items:center;cursor:pointer;transition:.14s}
/* Slider-Pfeile: nur bei Ueberlauf (JS entfernt [hidden]); auf Touch-Geraeten ausgeblendet. */
.thumbs-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.94);color:var(--ink-soft);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-md);transition:.14s}
.thumbs-nav:hover{color:var(--green);border-color:var(--green)}
.thumbs-nav[hidden]{display:none}
.thumbs-nav.prev{left:-6px}
.thumbs-nav.next{right:-6px}
@media (hover:none){.thumbs-nav{display:none!important}}
.gallery .thumb .motif{width:50%;height:50%;color:var(--wood)}
.gallery .thumb:hover,.gallery .thumb.on{border-color:var(--green);background:var(--accent-light)}
.gallery .thumb.on .motif{color:var(--accent)}

.pdp-info .pdp-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.pdp-info h1{font-size:clamp(1.4rem,2.2vw,1.9rem);line-height:1.06;margin-top:4px;letter-spacing:-.045em}
.pdp-info .artno{font-size:.74rem;color:var(--muted);letter-spacing:.04em;font-weight:600}
/* Die Variantennummer haengt an der Artikelnummer — Wort und Zahl duerfen nie getrennt umbrechen. */
.pdp-info .artno .varno{white-space:nowrap}
.pdp-rate{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:.86rem;color:var(--ink-soft);flex-wrap:wrap;font-weight:600}
.pdp-rate .stars{color:var(--wood)}
.pdp-rate a{color:var(--green);font-weight:700}
.price-box{display:flex;align-items:baseline;gap:14px;margin:20px 0 6px;padding:18px 20px;border-radius:var(--radius);background:var(--accent-light);border:1px solid #D8E6C9;flex-wrap:wrap}
.price-box .now{font-size:2.1rem;font-weight:800;letter-spacing:-.03em}
.price-box .per{font-size:.8rem;color:var(--muted-strong)}
/* Preiszeile: der große Preis, RECHTS daneben ein zweizeiliger Block — Grundpreis (PAngV) oben,
   Versandhinweis darunter (Nutzer-Vorgabe 08.09.2026). Mittig ausgerichtet statt auf der
   Grundlinie: sonst hinge der zweizeilige Block unter dem Preis und die Box würde wieder hoch. */
/* Der Wrapper nimmt die volle Breite - sonst schoebe margin-left:auto am ab-Preis nur bis zum
   Ende des Textes statt an den rechten Rand der Box. */
.price-box .price-haupt{flex:1;min-width:0}
.price-box .price-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap;width:100%}
.price-box .price-neben{display:flex;flex-direction:column;gap:1px;line-height:1.35}
.price-box .grundpreis{font-size:.8rem;color:var(--muted-strong)}
/* Der ab-Preis sitzt rechts IN der Preiszeile (siehe Markup-Kommentar dort) und damit immer auf
   Höhe des großen Preises — auch wenn darunter noch „Bitte wählen Sie eine Variante" steht. */
.price-box .from{margin-left:auto;text-align:right}
/* display:flex der Kinder wuerde [hidden] sonst uebersteuern (dasselbe Muster wie bei .btn). */
.price-box .from[hidden]{display:none}
.price-box .from .ab{font-size:.64rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.price-box .from .abv{font-weight:800;color:var(--ink-soft)}
.taxline{font-size:.76rem;color:var(--muted);margin:0 0 20px}
.cfg{display:flex;flex-direction:column;gap:22px}
.cfg-block .cfg-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cfg-block .cfg-label span{font-weight:800;font-size:.92rem;letter-spacing:-.01em}
.seg{display:flex;flex-wrap:wrap;gap:8px}
/* min-height statt height + Umbruch statt nowrap: bei fixer Hoehe schnitt die Ellipse den Teil weg,
     der die Varianten UNTERSCHEIDET. Gemessen an Artikel 544 („Besteckkasten …", 8 Werte): Label hatte
     160px, brauchte 168-231px -> ALLE 8 Knoepfe abgeschnitten, Kundin konnte nichts unterscheiden
     (Anruf 24.08.2026). Betrifft 593 der 7.139 Artikel-Attribut-Kombinationen (8 %). */
.seg button{border:1.5px solid var(--line-strong);background:var(--surface);color:var(--ink-soft);border-radius:8px;min-height:37px;box-sizing:border-box;padding:0 15px;font-weight:700;font-size:.8rem;white-space:normal;display:inline-flex;align-items:stretch;gap:10px;overflow:hidden;transition:.14s;font-family:inherit}
.seg button:has(.vswatch){padding-left:0}
.seg button:hover{border-color:var(--green)}
.seg button.on{border-color:var(--green);background:var(--accent-light);color:var(--accent)}
.seg button:not(:has(.vswatch)){min-width:70px;justify-content:center}
.seg button .vlabel{white-space:normal;line-height:1.2;padding:6px 0;align-self:center;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.seg:has(.vswatch){display:grid;grid-template-columns:repeat(3,1fr)}
.seg:has(.vswatch) button{min-width:0}
.seg:has(.vswatch) .vlabel{flex:1;min-width:0}
@media(max-width:560px){.seg:has(.vswatch){grid-template-columns:repeat(2,1fr)}}
.size-select{border:1.5px solid var(--line-strong);background:var(--surface);border-radius:var(--pill);padding:10px 14px;color:var(--ink);font-size:.85rem;font-weight:700;outline:none;cursor:pointer;font-family:inherit}
.ve-note{font-size:.8rem;color:var(--muted);margin-top:9px;line-height:1.5}
.ve-note b{color:var(--ink-soft)}
.stepper{display:flex;align-items:center;border:1.5px solid var(--line-strong);border-radius:var(--pill);overflow:hidden}
.stepper button{width:46px;height:48px;border:0;background:var(--surface);color:var(--ink);font-size:1.2rem;font-weight:700;display:grid;place-items:center;transition:.14s}
.stepper button:hover{background:var(--paper2);color:var(--green)}
.stepper input{width:56px;height:48px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;font-weight:800;font-size:1rem;color:var(--ink);background:var(--surface);outline:none;font-family:inherit}
/* Menge, Warenkorb und Merken in EINER Zeile (08.09.2026). align-items:center, weil der
   Stepper niedriger ist als die großen Knöpfe; der Stepper wächst nicht mit (flex:none),
   die Breite verteilt der Warenkorb-Knopf. */
.buy-row{display:flex;gap:12px;margin-top:10px;flex-wrap:wrap;align-items:center}
.buy-row .stepper{flex:none}
/* Alles in der Kaufzeile exakt 50 px hoch (Nutzer-Vorgabe 08.09.2026). Vorher kam der Stepper
   ueber seine Kinder auf 50 und die Knoepfe ueber ihr Padding auf 53 - drei Rechnungen fuer
   eine Zeile. Feste Hoehe an EINER Stelle; das Padding der Knoepfe bleibt nur horizontal,
   .btn ist ohnehin inline-flex und zentriert seinen Inhalt selbst. Bewusst nur unter
   .buy-row: .btn-lg traegt auch den Checkout-Knopf und die Startseiten-Baender. */
.buy-row .stepper,.buy-row .btn{height:50px;box-sizing:border-box}
.buy-row .stepper button,.buy-row .stepper input{height:100%}
.buy-row .btn{padding-top:0;padding-bottom:0}
.buy-row .btn-green{flex:1;min-width:200px}
.stock-line{display:flex;align-items:center;gap:8px;font-size:.84rem;color:var(--good);font-weight:700;margin-top:2px}
.stock-line .dot{width:8px;height:8px;border-radius:50%;background:var(--good)}
.line-total{display:flex;align-items:baseline;justify-content:space-between;padding:16px 0 2px;border-top:1px solid var(--line);margin-top:6px}
.line-total .lt-l{font-size:.86rem;color:var(--muted)}
.line-total .lt-v{font-size:1.5rem;font-weight:800;letter-spacing:-.03em}
.pdp-usp{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:24px}
.pdp-usp .u{display:flex;align-items:center;gap:10px;font-size:.83rem;color:var(--ink-soft);background:var(--paper2);border-radius:12px;padding:12px 14px;font-weight:600}
.pdp-usp .u svg{width:18px;height:18px;color:var(--accent);flex:none}

/* Bestelleigenschaften (Gravur/Wunschmass/Zusatzoptionen) — kundenseitige Eingabefelder im PDP.
   Der Block liegt im .cfg-Fluss (Abstand nach oben/unten kommt vom .cfg-gap). */
.order-props{display:flex;flex-direction:column;gap:var(--op-gap)}
/* Ausblenden je Variante: die display:flex-Regeln unten sind Autoren-Styles und schlagen sonst das
   UA-[hidden]{display:none}, sodass verborgene Felder trotzdem erscheinen. Darum hier explizit
   (hoehere Spezifitaet als .op-field/.op-group) wieder auf none — sonst zeigt das PDP die Union. */
.order-props[hidden],.order-props [hidden]{display:none}
.op-group{display:flex;flex-direction:column;gap:var(--op-inset)}
.op-glabel{font-weight:800;font-size:.92rem;letter-spacing:-.01em}
.op-field{display:flex;flex-direction:column;gap:var(--op-inset)}
.op-flabel{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.86rem;color:var(--ink-soft);font-weight:600}
.op-req{color:var(--danger);font-weight:800}
.op-add{background:var(--accent-light);color:var(--accent);border-radius:var(--pill);padding:1px 9px;font-size:.72rem;font-weight:800;white-space:nowrap}
.op-input{width:100%;border:1.5px solid var(--line-strong);background:var(--surface);border-radius:var(--radius-sm);padding:10px 13px;font-size:.9rem;font-family:inherit;color:var(--ink);outline:none;transition:.14s}
.op-input:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--accent-light)}
.op-input.op-invalid{border-color:var(--danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 18%,transparent)}
textarea.op-input{min-height:56px;resize:vertical;line-height:1.5}
.op-radios{display:flex;flex-direction:column;gap:var(--op-inset)}
.op-radio{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:.86rem;color:var(--ink-soft);font-weight:600}
.op-radio input{width:18px;height:18px;flex:none;accent-color:var(--green);cursor:pointer}
.op-rtext{flex:1;min-width:0}
.op-hint{font-size:.76rem;color:var(--muted)}
.pdp-tabs{margin-top:36px;border-top:1px solid var(--line);padding-top:8px}
.tab-nav{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.tab-nav button{border:0;background:transparent;padding:15px 18px;font-weight:800;font-size:.88rem;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;transition:.14s;display:inline-flex;align-items:center;gap:7px;font-family:inherit;letter-spacing:-.01em}
.tab-nav button:hover{color:var(--ink)}
.tab-nav button.on{color:var(--accent);border-bottom-color:var(--accent)}
.tab-nav .tcount{font-size:.66rem;color:var(--muted)}
.tab-panel{display:none;padding:28px 0;max-width:74ch}
.tab-panel.on{display:block;animation:fade .25s ease}
.tab-panel p{color:var(--muted-strong);line-height:1.75;margin-bottom:14px}
.tab-panel h4{margin:20px 0 9px;font-size:1.05rem;letter-spacing:-.02em;color:var(--ink)}
.spectable{width:100%;border-collapse:collapse;font-size:.88rem}
.spectable td{padding:12px 4px;border-bottom:1px solid var(--line)}
.spectable td:first-child{color:var(--muted);width:42%}
.spectable td:last-child{font-variant-numeric:tabular-nums;text-align:right;font-weight:700}
.feat-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.feat-list li{display:flex;gap:11px;align-items:flex-start;font-size:.92rem;color:var(--muted-strong)}
.feat-list svg{width:18px;height:18px;color:var(--green);flex:none;margin-top:3px}

/* ===== PRODUKTBESCHREIBUNG (Reiter „Beschreibung") =====
   Shop-nativer Prose-Kontext fuer article_texts.description (.art-desc). Das gespeicherte HTML
   kommt aus Plenty (Ueberschriften, Fliesstext mit <br>, Pseudolisten) und wird per
   `php artisan shop:restyle-descriptions` normalisiert. Die Regeln liegen im GETEILTEN Partial
   partials/art-desc-css — dasselbe CSS speist die Live-Vorschau im Office-Editor
   (articles/show.blade.php #prev-desc), damit Vorschau und echte Shop-Seite identisch aussehen.
   BEWUSST auf .art-desc gescoped: der Wrapper umschliesst nur den Beschreibungstext, damit die
   darunter folgenden .rel-h/.keywords (Related-Pills) unberuehrt bleiben.
   ⚠️ Das Partial steht NICHT in dieser Datei: es wird im Layout als kleiner Inline-<style> direkt
   hinter dem <link> auf diese Datei eingebunden (ein Blade-Partial passt nicht in eine statische CSS-Datei). */

/* ============ CONTENT-/TEXTSEITEN (Impressum, AGB, Info …) ============
   Schlichter, gut lesbarer Textbereich im BESTEHENDEN Shop-Design: Shop-Tokens (Farben,
   Linien, --green/--accent/--paper2), Ueberschriften im Shop-Typo-Stil (font-weight 800,
   negatives letter-spacing wie die uebrigen Ueberschriften), Fliesstext-Zeilenhoehe 1.75
   wie in den PDP-Reitern. Aeussere Abstaende kommen vom Shop (section/.wrap), die Lesebreite
   vom Token --reading-maxw — keine hartkodierten Seitenpaddings. Dasselbe Markup dient der
   Live-Vorschau im Office-Editor. */
.cms-page{max-width:var(--reading-maxw);margin:0 auto}
/* Textseiten (CMS-Seiten aus dem Office, Blog, Team, Widerruf) fangen mit ihrer Ueberschrift an —
   der 58er-Sektionsrhythmus gilt aber ZWISCHEN Sektionen. Direkt unter der Navigation ist er
   schlicht leerer Raum (gemessen 17.08.2026: 58px ohne jeden Inhalt darin), waehrend Kategorie-/
   Artikelseiten dieselbe Hoehe mit Brotkrume fuellen. Erste Sektion einer Textseite deshalb auf
   --page-top; alle folgenden Sektionen behalten den normalen Rhythmus. */
main > section.wrap:first-child:has(.cms-head){padding-top:var(--page-top)}
.cms-head{margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.cms-head h1{font-size:clamp(2rem,4vw,2.8rem);letter-spacing:-.045em;line-height:1.08}
.cms-prose{color:var(--ink-soft);font-size:1rem;line-height:1.75}
.cms-prose>:first-child{margin-top:0}
.cms-prose h2{font-size:clamp(1.2rem,2.4vw,1.55rem);letter-spacing:-.03em;color:var(--ink);font-weight:800;margin:34px 0 12px}
.cms-prose h3{font-size:1.05rem;letter-spacing:-.02em;color:var(--ink);font-weight:800;margin:24px 0 8px}
.cms-prose p{margin:0 0 14px}
.cms-prose ul,.cms-prose ol{margin:0 0 14px;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.cms-prose strong{color:var(--ink)}
.cms-prose a{color:var(--green);font-weight:600;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.cms-prose a:hover{color:var(--green-hover)}
.cms-prose img{border-radius:var(--radius-sm);margin:8px 0}
.cms-prose hr{border:0;border-top:1px solid var(--line);margin:28px 0}
/* Tabellen (z. B. Versandkosten je Land) — auf schmalen Displays waagerecht scrollbar,
   nie die Seite sprengen. */
.cms-tablewrap{overflow-x:auto;margin:16px 0 20px}
.cms-prose table,.cms-table{width:100%;border-collapse:collapse;font-size:.9rem}
.cms-tablewrap>table,.cms-tablewrap>.cms-table{margin:0}
.cms-prose th,.cms-table th{background:var(--accent);color:#fff;text-align:left;font-weight:700;padding:9px 12px;white-space:nowrap}
.cms-prose td,.cms-table td{padding:8px 12px;border-bottom:1px solid var(--line)}
.cms-prose tbody tr:nth-child(even) td,.cms-table tbody tr:nth-child(even) td{background:var(--paper2)}
/* ============ TEXT NEBEN BILD (Content-Seiten) ============
   Zweispaltige Zeile fuer Textseiten: eine Spalte Text, eine Spalte Bild. `.cms-split-rechts`
   dreht die Reihenfolge (Bild links). Auf dem Handy stapelt die Zeile, das Bild wandert dabei
   IMMER unter den Text — sonst schiebt ein umgedrehter Block die Ueberschrift aus dem Blick
   (D16). Bewusst innerhalb der Lesebreite: das sind Textseiten, keine Galerien. */
/* Fussnote am Ende einer Textseite (Markenhinweis o. ae.) — leiser als Fliesstext, abgesetzt. */
.cms-prose .cms-fussnote{margin-top:28px;padding-top:14px;border-top:1px solid var(--line);font-size:.82rem;color:var(--muted)}
.cms-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center;margin:22px 0}
.cms-split>div{min-width:0}
.cms-prose .cms-split>:first-child>:first-child{margin-top:0}
.cms-prose .cms-split img{width:100%;height:auto;margin:0;border-radius:var(--radius-lg)}
/* Bild optisch nach links holen, OHNE es im Markup vor den Text zu ziehen — so steht auf dem
   Handy (eine Spalte) immer erst die Ueberschrift und dann das Bild. */
.cms-split-rechts>.cms-split-bild{order:-1}
/* Logos statt Fotos: nicht auf Spaltenbreite aufblasen (das SVG ist 1000x250 und saehe als
   410px breites Banner gestreckt aus), sondern begrenzen und mittig setzen. */
.cms-prose .cms-split-logo img{max-width:280px;margin:0 auto;border-radius:0}
@media (max-width:820px){
  .cms-split{grid-template-columns:minmax(0,1fr);gap:16px}
  .cms-split-rechts>.cms-split-bild{order:0}
}

/* ============ FOTOGALERIE (Content-Seite „fotogalerie") ============
   Kundenbilder als Zeilen-Karten, aufgebaut wie die alte Plenty-Seite: JEDE Zeile hat ihre
   eigene Aufteilung (zwei bis vier Bereiche, ungleiche Breiten), der Textblock sitzt mal vorn,
   mal mittig, mal hinten. Die Reihenfolge steckt im Markup, die Breiten in der Zeilen-Klasse
   (`c-…`) — deshalb kommt die Seite ohne einen einzigen Inline-Stil aus (D6).
   Eine Seite MIT Galerie verlaesst die Lesebreite (`:has`), der Fliesstext behaelt sie ueber
   `.cms-lead`. Kein Ausbruch ueber `100vw` (waagerechter Ueberlauf auf dem Handy, D16) — die
   Breite gibt die `.wrap` vor. Bilder binden die `-800`/`-1200`-Verkleinerung ein, AVIF/WebP
   kommen per Aushandlung (D14). Details: docs/38. */
.cms-page:has(.fg){max-width:none}
.cms-lead{max-width:var(--reading-maxw)}
/* Entwurfs-Hinweis: nur in der Office-Vorschau sichtbar (oeffentlich sind Entwuerfe 404) */
.cms-entwurf{margin:10px 0 0;font-size:.82rem;font-weight:700;color:var(--danger);letter-spacing:0}
.fg{display:flex;flex-direction:column;gap:22px;margin:26px 0 10px}
/* 1px Raster-Luecke auf Linienfarbe = feine Trennlinien zwischen den Bereichen, ohne Border-Stapel */
.fg-row{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);align-items:stretch}
.fg-row.c-3-3-3-3{grid-template-columns:repeat(4,minmax(0,1fr))}
.fg-row.c-4-4-4{grid-template-columns:repeat(3,minmax(0,1fr))}
.fg-row.c-3-6-3{grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr)}
.fg-row.c-6-6{grid-template-columns:repeat(2,minmax(0,1fr))}
.fg-row.c-4-8{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.fg-row.c-8-4{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
/* Bild absolut im Bereich: sonst diktiert ein quadratisches Foto in einem breiten Bereich die
   Zeilenhoehe (gemessen: 811px) und die Karten werden ungleich hoch. So gibt der TEXTBLOCK die
   Hoehe vor, die Fotos fuellen ihren Bereich per `cover`; `min-height` haelt reine Bildzeilen auf. */
.cms-prose .fg-pic{position:relative;display:block;line-height:0;background:var(--paper2);min-width:0;min-height:300px;overflow:hidden;text-decoration:none}
.fg-row.c-6-6 .fg-pic,.fg-row.c-4-8 .fg-pic,.fg-row.c-8-4 .fg-pic{min-height:360px}
/* `fg-tall` fuer Zeilen, deren grosser Bereich ein quadratisches/hochformatiges Foto traegt:
   sonst schneidet `cover` es auf einen Streifen zusammen (gemessen: mehr als die Haelfte weg). */
.fg-row.fg-tall .fg-pic{min-height:500px}
.fg-row .fg-stack .fg-pic{min-height:200px}
.cms-prose .fg-pic img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;margin:0;border-radius:0;transition:transform .35s}
.fg-pic:hover img{transform:scale(1.04)}
.fg-txt{display:flex;flex-direction:column;gap:9px;padding:24px;background:var(--surface);min-width:0}
.cms-prose .fg-txt h3{margin:0;font-size:1.05rem;line-height:1.35;letter-spacing:-.02em;color:var(--ink);font-weight:800}
.cms-prose .fg-txt p{margin:0;font-size:.92rem;line-height:1.62}
/* Herkunftszeile immer buendig unten, egal wie lang der Text ist */
.fg-by{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:.78rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:3px 9px}
.fg-by .fg-datum::before{content:"·";margin-right:9px;color:var(--line-strong)}
/* Gestapelter Bereich: kleines Bild oben, Text darunter — eine Spalte, zwei Reihen */
.fg-stack{display:grid;grid-template-rows:auto minmax(0,1fr);gap:1px;background:var(--line);min-width:0}
.fg-stack .fg-pic img{min-height:190px}
@media (max-width:820px){
  .fg-row[class*="c-"]{grid-template-columns:minmax(0,1fr)}
  .cms-prose .fg-pic,.fg-row.c-6-6 .fg-pic,.fg-row.c-4-8 .fg-pic,.fg-row.c-8-4 .fg-pic{min-height:0;aspect-ratio:4/3}
  .fg-txt{padding:20px}
}

/* ============ BLOG (Uebersicht `/blog` + Artikel `/blog/{slug}`) ============
   Aufbau wie die alte Plenty-Seite `/buetic-blog`: zentrierte Seitenueberschrift, darunter je
   Beitrag eine Zeile Bild links / Text rechts mit Knopf „WEITERLESEN", Zeilen durch eine
   Trennlinie getrennt. Unter 820px stapelt die Zeile (Bild oben) — sonst waere die Textspalte
   auf dem Handy zwei Woerter breit (D16). Der Artikelkoerper ist rohes HTML aus
   `blog_ideas.html`, gerendert im `.cms-prose`-Fluss; `.blog-strip` (Bildstrecke) und
   `.blog-aktionen` (Knopfzeile) sind die beiden Bausteine, die er zusaetzlich nutzen darf.
   Bilder kommen aus der Medien-Ablage und werden von nginx als AVIF/WebP ausgehandelt (D14).
   Details: docs/53. */
/* Die Uebersicht verlaesst die Lesebreite: eine Zeile aus Bild UND Text braucht mehr als 72ch,
   sonst steht die Textspalte auf dem Desktop nur ~409px breit (gemessen) und die Seite wirkt
   wie in eine Saeule gequetscht. Der Artikel behaelt die Lesebreite. Wie bei der Fotogalerie
   kein `100vw`-Ausbruch — die Breite gibt die `.wrap` vor (D16). */
.cms-page:has(.blog-list){max-width:none}
.cms-page:has(.blog-list) .cms-head{max-width:none}
.blog-title{text-align:center}
.blog-list{margin-top:6px}
.blog-sep{border:0;border-top:1px solid var(--line);margin:38px 0}
.blog-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;align-items:center}
.cms-prose .blog-pic{display:block;line-height:0;min-width:0;border-radius:var(--radius-lg);overflow:hidden;background:var(--paper2)}
.cms-prose .blog-pic img{display:block;width:100%;height:auto;margin:0;border-radius:0;transition:transform .35s}
.blog-pic:hover img{transform:scale(1.03)}
.blog-txt{min-width:0}
.cms-prose .blog-txt h2{margin:0 0 12px}
.cms-prose .blog-txt p{margin:0 0 8px}
/* Knopf „WEITERLESEN": volle Spaltenbreite wie im Original, Grundfarbe des Shops */
.cms-prose .blog-btn{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:18px;padding:13px 20px;border-radius:var(--radius-sm);background:var(--green);color:#fff;font-weight:700;letter-spacing:.04em;text-decoration:none;transition:background .2s}
.cms-prose .blog-btn:hover{background:var(--green-hover);color:#fff}
.blog-btn svg{flex:none}
.blog-pagination{margin-top:34px}
/* Artikelseite */
.blog-back{display:inline-block;margin-bottom:14px;font-size:.85rem;color:var(--ink-soft);text-decoration:none}
.blog-back:hover{color:var(--green)}
.blog-post-datum{margin:6px 0 0;font-size:.85rem;color:var(--ink-soft)}
.cms-prose .blog-post-hero{display:block;width:100%;margin:0 auto 28px;border-radius:var(--radius-lg)}
/* Bildstrecke im Artikel — im Original ein automatisch laufendes Karussell; hier alle Bilder
   zugleich sichtbar (kein JS, kein CLS, D7). Sie UMBRICHT, statt sich in eine Reihe zu quetschen:
   die Kerzen-Strecke hat sieben Bilder, in einer Reihe blieben in der Lesespalte 110px je Bild
   (gemessen) — nicht erkennbar. Mit `auto-fill`/180px sind es vier je Reihe zu ~200px. */
.blog-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin:26px 0}
.cms-prose .blog-strip img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;margin:0;border-radius:var(--radius-sm)}
/* Jede Kachel zeigt auf den Artikel, den sie abbildet (interne Verlinkung). Der Link umschliesst
   das Bild, darf aber KEINE Fliesstext-Dekoration erben — `.cms-prose a` setzt Unterstreichung
   und Gruen, das laege sonst als Strich unter jeder Kachel. */
.cms-prose .blog-strip a{display:block;min-width:0;line-height:0;border-radius:var(--radius-sm);overflow:hidden;text-decoration:none;color:inherit;font-weight:inherit}
.cms-prose .blog-strip a img{border-radius:0;transition:transform .35s}
.cms-prose .blog-strip a:hover img{transform:scale(1.05)}
/* Knopfzeile am Artikelende (im Original „ZURUECK" | „ZU DEN …") */
.blog-aktionen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin:32px 0 8px}
.cms-prose .blog-aktionen a{display:flex;align-items:center;justify-content:center;padding:13px 20px;border-radius:var(--radius-sm);background:var(--green);border:1px solid var(--green);color:#fff;font-weight:700;letter-spacing:.04em;text-decoration:none;text-align:center;transition:background .2s,color .2s}
.cms-prose .blog-aktionen a.ghost{background:transparent;color:var(--green)}
.cms-prose .blog-aktionen a:hover{background:var(--green-hover);border-color:var(--green-hover);color:#fff}
/* Einzelbild mit Bildunterschrift (Produktkasten der Alt-Artikel) */
.blog-figur{margin:26px auto;max-width:420px;text-align:center}
.cms-prose .blog-figur img{display:block;width:100%;margin:0;border-radius:var(--radius-sm)}
.cms-prose .blog-figur figcaption{margin:8px 0 0;font-size:.85rem;color:var(--muted)}
@media (max-width:820px){
  .blog-row{grid-template-columns:minmax(0,1fr);gap:18px}
  .blog-strip{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .blog-aktionen{grid-template-columns:minmax(0,1fr)}
}

.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:var(--accent);color:#fff;padding:13px 22px;border-radius:var(--pill);box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:11px;font-size:.9rem;font-weight:700;opacity:0;pointer-events:none;transition:.22s;z-index:200;max-width:90vw}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast svg{width:20px;height:20px;color:#fff}
.toast .ticon{display:inline-flex}
.toast .ticon-err{display:none}
.toast.is-error{background:var(--danger)}
.toast.is-error .ticon-ok{display:none}
.toast.is-error .ticon-err{display:inline-flex}

/* Fuenf Spalten nur, solange die Kachel nicht gequetscht wird: unter ~1200px Fensterbreite
   blieben je Kachel < 215px, deshalb dort zurueck auf vier.
   ⛔ Die weiteren Stufen (3 ab 1000px, 2 ab 680px) MUESSEN `cols-5` mit aufzaehlen — sie tun es
   weiter unten. Ohne das greift hier nur diese eine Regel und die Kacheln bleiben bis aufs Handy
   vierspaltig (gemessen 16.08.2026: bei 885px vier Spalten a 196px statt drei). */
@media (max-width:1200px){
  .prod-grid.cols-5{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:1000px){
  .hero .wrap{grid-template-columns:1fr;gap:32px}
  .hero-visual{max-width:460px}
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .prod-grid.cols-5,.prod-grid.cols-4{grid-template-columns:repeat(3,1fr)}
  .stats .wrap{grid-template-columns:repeat(3,1fr)}
  .stat:nth-child(3){border-right:0}
  .usp-strip .wrap{grid-template-columns:repeat(2,1fr)}
  .usp:nth-child(2){border-right:0}
  .band{grid-template-columns:1fr}
  .pdp{grid-template-columns:1fr;gap:28px}
  .gallery{position:static}
}
@media (max-width:680px){
  /* Preiskachel auf dem Handy: Wird der ab-Block doch gebraucht (teurere Auswahl), steht er
     EINZEILIG - untereinander kostete allein die Kleinschrift-Zeile 'AB' eine weitere Etage,
     und die Kachel wurde 208 px hoch (Nutzer-Meldung 08.09.2026 mit Screenshot). */
  .price-box .from{display:flex;align-items:baseline;gap:6px}
  .price-box .from .ab{font-size:.6rem}
  .wrap{padding-left:16px;padding-right:16px}
  section{padding:44px 0}
  .hero{padding-top:22px}   /* unter dem kompakten Header kein 66px-Luftpolster mehr nötig */
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .prod-grid.cols-5,.prod-grid.cols-4,.prod-grid.cols-3{grid-template-columns:repeat(2,1fr)}
  .steps,.rev-grid{grid-template-columns:1fr}
  .stats .wrap{grid-template-columns:1fr 1fr}
  .stat:nth-child(2){border-right:0}
  .usp-strip .wrap{grid-template-columns:1fr}
  .usp{border-right:0;border-bottom:1px solid var(--line)}
  /* Suche mobil: Lupe MITTIG zwischen Logo und Aktionen (auto-Margins); Feld erst beim Tippen. */
  .search-toggle{display:inline-flex;margin:0 auto}   /* zentriert; schiebt Aktionen nach rechts */
  .searchbox{order:5;flex-basis:100%;margin-left:0;display:none}
  .site-head.search-open .searchbox{display:flex}
  /* Nur die DIREKTE Header-Zeile straffen (nicht ins Nav-.wrap lecken -> deshalb > .wrap). */
  .site-head > .wrap{flex-wrap:wrap;gap:6px;padding-top:4px;padding-bottom:4px}
  .price-box .now{font-size:1.7rem}
  /* USP-Leiste als Auto-Ticker: nur der aktive Spruch (JS), EINE Zeile statt vier. */
  .topbar .wrap{flex-wrap:nowrap;justify-content:center;padding-top:7px;padding-bottom:7px}
  .topbar span{display:none}
  .topbar span.tick-on{display:inline-flex;animation:uspTick .45s ease}
  /* Kategorie-Nav: eine wischbare Zeile, gestrafft + engere Kategorie-Abstände.
     Höhere Spezifität (.mainnav .wrap a) — ein reines .mainnav a setzt sich hier nicht durch. */
  .mainnav .wrap{flex-wrap:nowrap;overflow-x:auto;gap:0;padding-top:0;padding-bottom:0}
  .mainnav .wrap a{padding:6px 9px;font-size:.85rem}
  .mainnav .wrap a.accent{margin-left:0}
}
/* Footer-Responsive wie die Vorlage (Breakpoints 768/600): Spalten stufenweise zusammenlegen. */
@media (max-width:768px){
  .footer-inner{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .footer-inner{grid-template-columns:1fr}
  .footer-sitemap{grid-template-columns:1fr}
  .footer-newsletter{justify-content:flex-start}
  .footer-bottom{flex-direction:column;justify-content:center;text-align:center;gap:6px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.shop-intern{background:var(--accent-dark);color:#CFE0C2;font-size:.72rem;text-align:center;padding:6px 16px;font-weight:600;letter-spacing:.02em}

/* ============ WARENKORB / MERKZETTEL (Drawer) ============ */
.drawer-backdrop{position:fixed;inset:0;background:rgba(26,26,24,.42);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:.22s;z-index:150}
.drawer-backdrop.show{opacity:1;pointer-events:auto}
/* Die GANZE Schublade scrollt, nicht nur die Artikelliste (Kundin K. Poeck, 16.08.2026): Bei kleiner
   Fensterhoehe (Notebook mit Browser-Zoom, Handy quer) sind „Passt dazu" + Fuss zusammen ~700px hoch und
   nicht schrumpfbar — die Liste wurde auf 12px gequetscht und Kasse/Bezahlart/Merken hingen unerreichbar
   unter dem Bildrand, ohne jede Scrollmoeglichkeit. Kopf bleibt sticky, Rest scrollt mit.
   `height:100vh` als Rueckfallebene: aeltere Browser kennen `dvh` nicht und wuerfen sonst die Hoehe weg. */
.drawer{position:fixed;top:0;right:0;height:100vh;height:100dvh;width:540px;max-width:94vw;background:var(--paper);box-shadow:var(--shadow-lg);transform:translateX(102%);transition:transform .26s cubic-bezier(.4,0,.2,1);z-index:160;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}
.drawer.show{transform:none}
/* Dieselben Bauteile als GANZE SEITE (/warenkorb): aus der festen Schublade wird ein normaler Block im
   Textfluss — kein fixed, keine Fensterhoehe, kein eigenes Scrollen. Die Seite scrollt. */
.drawer.is-page{position:static;transform:none;height:auto;width:auto;max-width:none;overflow:visible;
  box-shadow:none;background:transparent;border:1px solid var(--line);border-radius:var(--r-lg,18px);overflow:hidden}
.drawer.is-page .drawer-head{position:static;border-radius:0}
.drawer.is-page .drawer-body{padding-left:var(--drawer-pad);padding-right:var(--drawer-pad)}
/* Auf der Seite ist reichlich Breite da — Fuss zweispaltig, damit „Zur Kasse" nicht ans Seitenende rutscht. */
@media (min-width:760px){
  .drawer.is-page{display:grid;grid-template-columns:1fr 340px;grid-template-areas:"kopf kopf" "liste fuss"}
  .drawer.is-page .drawer-head{grid-area:kopf}
  .drawer.is-page .drawer-body{grid-area:liste}
  /* `stretch` statt `start`: der Fuss fuellt die Rasterzeile, damit die Trennlinie zwischen Liste und
     Fuss ueber die VOLLE Hoehe laeuft. Mit `start` endete sie auf Knopfhoehe und der Rest der rechten
     Spalte lief als leerer Kasten aus (Nutzer 16.08.2026). Kein `sticky` noetig — der Fuss steht oben
     in der Zeile, „Zur Kasse" ist beim Laden ohnehin im Bild. */
  /* `justify-content:center`: bei vielen Positionen ist die rechte Spalte deutlich kuerzer als die Liste
     — der Block klebte dann oben und liess darunter eine grosse Leere (Nutzer 16.08.2026). Mittig steht
     er ruhiger. Bei kurzem Korb ist die Spalte die hoehere, dann aendert die Regel nichts. */
  .drawer.is-page .drawer-foot{grid-area:fuss;border-top:0;border-left:1px solid var(--line);align-self:stretch;justify-content:center}
}
/* „Passt dazu" als eigene Karte UNTER dem Warenkorb (nur Seitenansicht). Der Rahmen sitzt bewusst am
   `.cart-cross` selbst und nicht am Wrapper: das Skript blendet genau dieses Element aus, wenn es keine
   Empfehlungen gibt (`[hidden]`) — so bleibt kein leerer Kasten stehen, ganz ohne `:has()`. */
.cart-cross-card{margin-top:18px}
.cart-cross-card .cart-cross{border:1px solid var(--line);border-radius:var(--r-lg,18px);background:var(--surface);padding:16px 20px 10px}
/* Kopf bewusst schlank (13px statt 20px Polsterung, kleinere Schliessen-Taste): er klebt beim Scrollen
   oben und kostet damit dauerhaft Platz — bei flachen Fenstern die teuerste Zeile der Schublade. */
.drawer-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px var(--drawer-pad);border-bottom:1px solid var(--line);background:var(--surface)}
.drawer-head h3{font-size:1.02rem;letter-spacing:-.025em;display:flex;align-items:center;gap:8px}
.drawer-head h3 svg{width:19px;height:19px;color:var(--accent)}
.drawer-head .dh-cnt{color:var(--muted);font-weight:700;font-size:.82rem}
/* „Ganze Seite“ im Kopf: leise (Text + Umriss), damit sie „Zur Kasse“ nicht die Aufmerksamkeit nimmt. */
.drawer-head h3{margin-right:auto}
.dh-page{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex:none;border:1px solid var(--line);
  border-radius:var(--pill);padding:5px 11px;font-size:.75rem;font-weight:700;color:var(--ink-soft);background:var(--surface)}
.dh-page:hover{border-color:var(--green);color:var(--green)}
.dh-page svg{width:14px;height:14px}
.drawer-close{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;color:var(--ink-soft);flex:none}
.drawer-close:hover{border-color:var(--green);color:var(--green)}
.drawer-close svg{width:17px;height:17px}
/* `1 0 auto`: bei kurzem Korb waechst die Liste weiter und schiebt den Fuss nach unten, bei langem Korb
   schrumpft sie NICHT mehr weg — dann scrollt die Schublade als Ganzes (s. .drawer). */
.drawer-body{flex:1 0 auto;padding:6px var(--drawer-pad)}
.drawer-empty{text-align:center;color:var(--muted);padding:64px 20px;font-size:.92rem;line-height:1.5}
/* Warnstreifen im Warenkorb, wenn der Browser nichts speichern darf (21.08.2026). Bleibt stehen,
   solange der Korb offen ist — ein Toast waere weg, bevor der Kunde die Ursache begriffen hat (D11). */
.cart-warn{display:flex;gap:10px;align-items:flex-start;background:#FBE6E6;color:#8E2A20;border-radius:8px;padding:12px 14px;margin-bottom:12px;font-size:.82rem;line-height:1.45}
.cart-warn svg{flex:0 0 auto;margin-top:2px}
.drawer-empty svg{width:50px;height:50px;color:var(--line-strong);margin:0 auto 14px;display:block}
.drawer-empty b{color:var(--ink-soft);font-weight:800;display:block;margin-bottom:4px}
.cart-line{display:flex;gap:13px;padding:16px 0;border-bottom:1px solid var(--line)}
/* Die letzte Position braucht keinen Trenner — darunter kommt nichts mehr (Nutzer 16.08.2026). */
.cart-line:last-child{border-bottom:0}
/* Bildkachel identisch in Warenkorb UND Merkzettel (Nutzer 21.08.2026). Vorher galten diese Regeln
   nur fuer `.cart-line` — im Merkzettel hatte der Bild-Link gar keine Groesse (gemessen 0×0, kein
   Rahmen, keine Rundung) und richtete sich allein nach dem Bild. */
.cart-line .cl-img, .fav-line .cl-img{width:66px;height:66px;border-radius:12px;border:1px solid var(--line);background:linear-gradient(155deg,#FBF6EC,#EFE5D0);flex:none;overflow:hidden;display:grid;place-items:center}
.cart-line .cl-img img, .fav-line .cl-img img{width:100%;height:100%;object-fit:cover}
.cart-line .cl-img .motif, .fav-line .cl-img .motif{width:54%;height:54%;color:var(--wood)}
/* Auch hier beide Listen: `min-width:0` ist im Merkzettel kein Schoenheitsfehler, sondern D16 —
   mit dem Default `auto` kann die Spalte nicht unter ihre Inhaltsbreite schrumpfen, ein langer
   Produktname sprengt dann die Zeile und der Handy-Browser zoomt die GANZE Seite heraus. */
.cart-line .cl-main, .fav-line .cl-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
/* Merkzettel traegt dieselben Schriftgroessen wie der Warenkorb (Nutzer 21.08.2026). Vorher war
   `.cart-line .cl-name` auf den Warenkorb beschraenkt — der Merkzettel-Name erbte damit den
   Body-Wert und stand mit 16 px NORMAL neben 13,6 px FETT im Korb. Gemessen, nicht geschaetzt. */
.cart-line .cl-name, .fav-line .cl-name{font-weight:700;font-size:.85rem;line-height:1.3;color:var(--ink)}
/* Der Produktname ist ein LINK und muss auch ohne Hover als solcher zu erkennen sein: am Handy gibt
   es kein Hover, vorher stand hier nur `color:inherit` — der Weg zum Artikel war damit unsichtbar
   (Nutzer 21.08.2026). Dezente Unterstreichung statt Linkfarbe: der Name bleibt gut lesbar. */
.cart-line .cl-name a, .fav-line .cl-name a{color:inherit;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;text-decoration-color:var(--line-strong)}
.cart-line .cl-name a:hover, .fav-line .cl-name a:hover{color:var(--green);text-decoration-color:var(--green)}
/* Bestelleigenschaften-Eingaben unter der Variante (Label: Wert · +Aufpreis). */
/* Eigenschaften stehen NACHEINANDER in einer fliessenden Zeile, mit „·" getrennt — wie im
   Merkzettel (Nutzer 21.08.2026: „im Merkzettel nacheinander. Das gefaellt mir besser"). Vorher
   stand jede auf einer eigenen Zeile. `flex-wrap` bricht bei Bedarf um, das Trennzeichen haengt per
   `::after` am VORHERIGEN Eintrag (nicht per `::before` am naechsten), damit es beim Umbruch nicht
   allein am Zeilenanfang landet. */
/* `space-between` + 2px statt 3px Grundabstand: der Stapel (Name · Eigenschaften · Reihe) fuellt
   die Kachelhoehe genau aus, statt sie zu ueberschreiten — die Zeile wird damit vom BILD bestimmt
   (vorher 112px, jetzt 104px). Die alten `margin-top`-Zugaben an Eigenschaften und Reihe sind
   deshalb weg: sie kamen zum Flex-Abstand noch obendrauf und trieben den Stapel ueber die Kachel. */
.cart-line .cl-main{gap:2px;justify-content:space-between}
.cart-line .cl-props{display:flex;flex-wrap:wrap;column-gap:5px;row-gap:2px;margin-top:0}
.cart-line .cl-prop{font-size:.72rem;color:var(--muted);line-height:1.35;overflow-wrap:break-word;min-width:0}
.cart-line .cl-prop:not(:last-child)::after{content:'·';color:var(--muted);margin-left:5px}
.cart-line .cl-pl{color:var(--muted-strong);font-weight:700}
.cart-line .cl-padd{color:var(--accent);font-weight:800;white-space:nowrap}
.cart-line .cl-row{display:flex;align-items:center;justify-content:space-between;margin-top:0;gap:8px}
.mini-step{display:inline-flex;align-items:center;border:1.5px solid var(--line-strong);border-radius:var(--pill);overflow:hidden;background:var(--surface)}
.mini-step button{width:30px;height:30px;border:0;background:transparent;color:var(--ink);font-size:1.05rem;display:grid;place-items:center;line-height:1}
.mini-step button:hover{background:var(--paper2);color:var(--green)}
.mini-step span{min-width:30px;text-align:center;font-weight:800;font-size:.83rem;font-variant-numeric:tabular-nums}
.cart-line .cl-price{font-weight:800;font-size:.9rem;white-space:nowrap}
.cl-remove{border:0;background:transparent;color:var(--muted);padding:3px;border-radius:6px;flex:none}
.cl-remove:hover{color:var(--danger)}
.cl-remove svg{width:15px;height:15px;display:block}
/* „Ansehen" als Auge direkt vor dem Papierkorb — gleiche Groesse/Optik wie dieser, damit die beiden
   Symbole eine Reihe bilden (Nutzer 21.08.2026). Grun beim Hover, nicht rot: es ist kein Loeschen. */
.cl-eye{color:var(--muted);padding:3px;border-radius:6px;flex:none;display:grid;place-items:center}
.cl-eye:hover{color:var(--green)}
.cl-eye svg{width:15px;height:15px;display:block}
/* Mengenwahl, Preis, Auge und Papierkorb NEBEN Name/Eigenschaften statt darunter — auf der ganzen
   Seite (/warenkorb) und erst ab 1100px Fensterbreite (Nutzer 04.09.2026: „kannst du die mengenwahl,
   den preis das Auge und den löschen button nicht auf die Zeile vom Bild rechts platzieren … statt
   darunter?"). Rechts neben dem Namen lag die halbe Zeile brach, waehrend die Aktionsreihe darunter
   Hoehe kostete; gemessen schrumpft die Position dadurch von 107 auf 99px — viel weniger, als die
   weggefallene 33px-Reihe vermuten laesst, weil das 66px-Bild die Untergrenze setzt. Der Gewinn ist
   also vor allem die ruhigere Ordnung: Text links, Bedienung rechts, alles auf Bildhoehe.
   Warum NUR dort und erst ab 1100px: Die Aktionsreihe ist rund 280px breit und nicht schrumpfbar
   (Mengenwahl 93 + Preis 90 + zwei Symbole). In der 430px-Schublade blieben dem Namen davon keine
   50px, er wuerde nach jedem zweiten Wort umbrechen; ab 1100px hat er in der Listenspalte neben dem
   340px-Fuss ueber 300px (gerechnet: wrap 1052 − Fuss 340 − 2×22 Polsterung − Bild 79). Darunter
   bleibt es bei der bisherigen Reihe unter dem Namen.
   Das Markup bleibt unveraendert — `renderCart` liefert dieselbe Zeile fuer Schublade UND Seite
   (s. `_cart-panel`), hier wird nur `.cl-main` vom Spalten-Flex zum zweispaltigen Raster: links Name
   ueber Eigenschaften, rechts `.cl-row` ueber beide Zeilen. `minmax(0,1fr)` statt `1fr` fuer die
   Textspalte (D16: mit `auto` kann sie nicht unter ihre Inhaltsbreite schrumpfen — ein langer
   Produktname sprengt sonst die Zeile). */
@media (min-width:1100px){
  .drawer.is-page .cart-line .cl-main{display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"name tun" "eigenschaften tun";align-content:center;align-items:center;column-gap:22px}
  .drawer.is-page .cart-line .cl-name{grid-area:name}
  .drawer.is-page .cart-line .cl-props{grid-area:eigenschaften}
  /* Rechtsbuendig, damit der Papierkorb mit der Zeilenkante fluchtet. */
  .drawer.is-page .cart-line .cl-row{grid-area:tun;justify-content:flex-end;gap:18px}
  /* Mindestbreite fuer den Preis: ohne sie ist die `auto`-Spalte je Position unterschiedlich breit
     und Mengenwahl/Preis/Symbole stuenden von Zeile zu Zeile versetzt statt untereinander. */
  .drawer.is-page .cart-line .cl-price{min-width:90px;text-align:right}
}
/* In der SCHUBLADE hat der NAME Vorrang vor dem Nebeneinander (Nutzer 04.09.2026, zweite Runde:
   „der artikelname sollte aber hier nicht umgebrochen werden. Die Zeile ist durch das Bild so hoch,
   dass der name nicht umgebrochen werden muss. der mengenwaehler das auge und das loeschicon haben
   darunter noch platz … auf gleicher hoehe wie das bild unten"). Neben der ~233px-Reihe blieben dem
   Namen selbst in der breiteren Schublade nur 171px — „Teelichthalter Tuelle silbern Ø 40mm / 18mm
   tief" wurde dreizeilig. UNTER dem Namen hat er die volle Breite (~411px) und bleibt einzeilig.
   Die Reihe steht hier also weiter unter Name und Eigenschaften — aber nicht mehr als Anhaengsel,
   das die Zeile hoeher macht: `space-between` verteilt den Stapel ueber die Kachelhoehe, die Reihe
   schliesst damit unten BUENDIG mit dem Bild ab. Damit das ohne Quetschen aufgeht, ist die Kachel
   hier 72 statt 66px: der Stapel misst 18 (Name) + 2 + 16 (Eigenschaften) + 2 + 33 (Reihe) = 71px.
   Nebenbei zeigt das Produktbild dadurch mehr — im Warenkorb kein Nachteil. Die 540px Schubladen-
   breite von vorhin bleiben: sie sind jetzt der Grund, warum der Name einzeilig passt. */
.drawer:not(.is-page) .cart-line .cl-img{width:72px;height:72px}
/* Preis, Auge und Papierkorb stehen als GRUPPE rechts, nur die Mengenwahl bleibt links
   (`margin-right:auto`). Mit dem geerbten `space-between` verteilten sich die vier Elemente
   gleichmaessig ueber die 411px der breiteren Schublade und die Reihe wirkte auseinander-
   gerissen — auf der Seite loest das `flex-end`, hier braucht die Mengenwahl ihren Platz links,
   damit sie nicht unter dem Namen zu kleben scheint. */
.drawer:not(.is-page) .cart-line .cl-row{justify-content:flex-end;gap:14px}
.drawer:not(.is-page) .cart-line .mini-step{margin-right:auto}
.fav-line{display:flex;gap:13px;padding:15px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.fav-line .cl-img{cursor:pointer}
.fav-line .fl-price{font-size:.72rem;color:var(--muted);font-weight:700}
.fav-line .fl-price b{color:var(--ink);font-size:.9rem;font-weight:800}
/* Waagerecht UNTER dem Inhalt (wie .cl-row im Warenkorb), nicht mehr als rechte Spalte — sonst
   bleiben dem Namen nur 208 statt 307 px. `wrap`, damit die Reihe auf schmalen Geraeten umbricht
   statt ueberzulaufen (D16). */
.fav-line .fl-act{display:flex;flex-direction:row;align-items:center;gap:6px;margin-top:5px;flex-wrap:wrap}
/* `line-height:1` ist der Grund, warum „Ansehen" (<a>) und „In den Warenkorb" (<button>) jetzt
   gleich hoch sind: ohne sie erbt der Link die Body-Zeilenhoehe, der Knopf nicht — gemessen 36 gegen
   32 px (Nutzer 21.08.2026). So bestimmen allein Symbolhoehe, Innenabstand und Rahmen die Hoehe. */
.fl-tocart{border:1.5px solid var(--line-strong);background:var(--surface);color:var(--accent);border-radius:var(--pill);padding:7px 13px;font-weight:700;font-size:.76rem;line-height:1;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.fl-tocart:hover{border-color:var(--green);background:var(--accent-light)}
.fl-tocart svg{width:14px;height:14px}
.drawer-foot{flex:none;border-top:1px solid var(--line);background:var(--surface);padding:16px var(--drawer-pad) 20px;display:flex;flex-direction:column;gap:12px}
/* Rest-Strecke bewusst warm (Bernstein) statt grau: „fast geschafft", ohne Alarm-Rot. Erreicht = grün. */
.ship-bar{height:7px;border-radius:99px;background:#FAC775;overflow:hidden}
.ship-bar > i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent2),var(--green));border-radius:99px;transition:width .35s}
.ship-note{font-size:.78rem;color:var(--ink);font-weight:600;line-height:1.4}
.ship-note b{color:#854F0B}
.ship-note .ship-ico{color:#854F0B}
.ship-note .ship-ico svg{vertical-align:-2px}
.ship-note.free{color:var(--green);font-weight:800}
.sub-row{display:flex;align-items:baseline;justify-content:space-between}
.sub-row .sl{font-size:.86rem;color:var(--muted);font-weight:600}
.sub-row .sl small{display:block;font-size:.68rem;color:var(--muted)}
.sub-row .sv{font-size:1.42rem;font-weight:800;letter-spacing:-.02em}
/* Cross-Selling „Passt dazu" im Warenkorb-Drawer: kompakte, horizontal scrollende Mini-Kachel-Reihe
   zwischen Positionsliste und Fuß. Verlinkt zur Produktseite (kein Direkt-Add, da Varianten/Pflichtfelder). */
.cart-cross{flex:none;padding:14px 20px 4px;border-top:1px solid var(--line)}
.cart-cross[hidden]{display:none}
.cart-cross-h{font-size:.78rem;font-weight:800;color:var(--muted-strong);text-transform:uppercase;letter-spacing:.03em;margin-bottom:10px}
.cart-cross-row{display:flex;gap:11px;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin}
.ccx{flex:0 0 100px;width:100px;text-decoration:none;color:inherit}
.ccx-img{display:block;width:100px;height:100px;border-radius:11px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(155deg,#FBF6EC,#EFE5D0)}
.ccx-img img{width:100%;height:100%;object-fit:cover;display:block}
.ccx-n{display:block;font-size:.73rem;line-height:1.3;color:var(--ink-soft);margin-top:6px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ccx-p{display:block;font-size:.76rem;font-weight:800;color:var(--accent);margin-top:3px}
.ccx:hover .ccx-img{border-color:var(--green)}
.ccx:hover .ccx-n{color:var(--green)}
/* line-height:normal, damit der „Zur Kasse"-<a> (erbt große line-height) exakt so hoch wird wie der
   „Weiter einkaufen"-<button> (UA-default normal) — sonst ist der Link ~6px höher trotz gleicher .btn. */
.drawer-foot .btn{width:100%;line-height:normal}
/* „Alles merken“ + „Weiter einkaufen“ nebeneinander statt untereinander — spart eine Knopfhoehe.
   `min-width:0` verhindert, dass die 100%-Breite der Knoepfe die Zeile aufblaeht. */
.drawer-foot .foot-row{display:flex;gap:10px}
/* Flacher als die Hauptknoepfe: es sind Nebenwege, und jede gesparte Zeile zaehlt bei flachen Fenstern. */
.drawer-foot .foot-row .btn{flex:1 1 0;min-width:0;padding:8px 10px;font-size:.82rem;white-space:nowrap}
/* Gutscheinfeld im Warenkorb-Fuss (02.09.2026, s. shop/_cart-panel): bewusst leise gestaltet — es ist
   ein Nebenweg fuer den, der einen Code HAT, und soll niemanden auf die Suche nach einem schicken. */
.cart-coupon{display:flex;flex-direction:column;gap:5px}
.cc-row{display:flex;gap:6px}
.cc-input{flex:1 1 auto;min-width:0;height:36px;border:1.5px solid var(--line);border-radius:8px;padding:0 11px;font-size:.8rem;font-family:inherit;background:var(--surface);color:var(--ink);text-transform:uppercase;letter-spacing:.04em}
.cc-input::placeholder{letter-spacing:.06em;color:var(--muted)}
.cc-input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(123,155,90,.18)}
.cc-input.is-valid{border-color:var(--green)}
.cc-btn{flex:0 0 auto;height:36px;padding:0 14px;border:1.5px solid var(--line);border-radius:8px;background:var(--surface-2,#f5f6f2);color:var(--ink);font-size:.8rem;font-weight:700;font-family:inherit;white-space:nowrap;cursor:pointer}
.cc-btn:hover{border-color:var(--green);color:var(--green)}
.cc-msg{font-size:.72rem;line-height:1.35;margin:0}
.cc-msg:empty{display:none}
.cc-msg.ok{color:var(--green);font-weight:700}
.cc-msg.err{color:var(--danger,#c0392b)}
.cc-line{display:flex;align-items:baseline;justify-content:space-between;font-size:.82rem;font-weight:700;color:var(--green)}
.cc-line[hidden]{display:none}
.foot-hint{font-size:.71rem;color:var(--muted);text-align:center;line-height:1.4}
.btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}
/* Gemerkte Ausfuehrung (Farbe/Groesse) unter dem Namen im Merkzettel-Drawer. */
.fav-line .fl-var { font-size: .72rem; line-height: 1.35; color: var(--muted); margin-top: 2px; }
.fav-line .fl-stock { font-size: .72rem; margin-top: 3px; display: flex; align-items: center; gap: 4px; }
.fav-line .fl-stock.ok { color: var(--green); }
.fav-line .fl-stock.no { color: #b3261e; }
/* Nicht bestellbar: sichtbar, aber sichtlich gesperrt — der Klick meldet den Grund, statt nichts zu tun. */
.fav-line .fl-add.na { opacity: .55; }
/* Merken-Herz auf Produktkacheln (gefuelltes Icon kommt aus syncFavButtons: heart <-> heart-fill) */
.tile-art .fav.on{color:var(--danger);border-color:var(--danger);background:#fff}
/* PDP-Merken-Button aktiv */
.btn.fav-on{border-color:var(--danger);color:var(--danger);background:#FCEEEC}
/* Toast-Nachricht (.toast bereits oben definiert) */
.toast .tmsg{white-space:nowrap}
@media (max-width:680px){ .drawer{width:100vw} }
/* Druckansicht: Shop-Rahmen weg, nur der Lesebereich; .no-print (z. B. Aktions-Buttons) ausblenden. */
@media print {
  .site-head, .site-foot, .drawer, .drawer-backdrop, #confirm-modal, .no-print { display:none !important; }
  main { padding:0 !important; }
  .wrap, .cms-page { max-width:none !important; margin:0 !important; padding:0 !important; }
  a[href]{ color:#000 !important; text-decoration:none !important; }
}

/* ===== BESTAETIGUNGS-MODAL (#confirm-modal, window.uiConfirm) — Markup und JS im Layout ===== */
.cmodal-overlay{position:fixed;inset:0;background:rgba(15,20,25,.45);display:flex;align-items:center;justify-content:center;z-index:2000;padding:16px}
.cmodal-overlay[hidden]{display:none}
.cmodal{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 14px 44px rgba(0,0,0,.25);max-width:430px;width:100%;padding:22px 22px 18px;animation:cmodal-in .12s ease-out}
@keyframes cmodal-in{from{opacity:0;transform:translateY(6px) scale(.99)}to{opacity:1;transform:none}}
.cmodal-title{margin:0 0 8px;font-size:1.15rem;color:var(--ink)}
.cmodal-msg{margin:0 0 18px;color:var(--muted);font-size:.94rem;line-height:1.5;white-space:pre-line}
.cmodal-actions{display:flex;justify-content:flex-end;gap:10px}
.cmodal .btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}
.cmodal .btn-danger:hover{filter:brightness(.94)}

/* ===== COOKIE-/DATENSCHUTZ-BANNER (#ccBanner) — Markup im Layout, nur bei aktivem Analytics gerendert;
   das CSS ist unbedingt hier, weil eine statische Datei nichts von shop_analytics() weiss ===== */
.cc-banner{position:fixed;left:0;right:0;bottom:0;z-index:1200;background:var(--surface);
  border-top:1px solid var(--line-strong);box-shadow:0 -14px 40px -20px rgba(26,26,24,.28);
  padding:16px clamp(14px,4vw,32px);animation:ccUp .28s ease}
@keyframes ccUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.cc-inner{max-width:1120px;margin:0 auto;display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.cc-main{flex:1 1 420px;min-width:0}
.cc-title{margin:0 0 4px;font-size:15px;font-weight:700;color:var(--ink)}
.cc-text{margin:0;font-size:13px;line-height:1.5;color:var(--muted-strong)}
.cc-text a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.cc-opts{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:520px){.cc-opts{grid-template-columns:1fr}}
.cc-opt{display:flex;justify-content:space-between;align-items:center;gap:14px;
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px 12px;background:var(--paper)}
.cc-opt span{display:flex;flex-direction:column;gap:1px}
.cc-opt b{font-size:13px;color:var(--ink)}
.cc-opt small{font-size:11.5px;color:var(--muted)}
.cc-opt input{width:18px;height:18px;accent-color:var(--green);flex:0 0 auto}
.cc-opt-fixed{opacity:.85}
.cc-actions{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:8px;align-items:center;align-self:center}
.cc-btn{font:inherit;font-size:13px;font-weight:600;padding:10px 16px;border-radius:var(--pill);
  cursor:pointer;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);white-space:nowrap}
.cc-btn-ghost:hover{background:var(--paper2)}
.cc-btn-accept{background:var(--green);border-color:var(--green);color:#fff}
.cc-btn-accept:hover{background:var(--green-hover);border-color:var(--green-hover)}
.cc-btn-save{background:var(--accent);border-color:var(--accent);color:#fff}
.cc-btn-save:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.footer-cc-link{color:rgba(255,255,255,.7);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.footer-cc-link:hover{color:#fff}
@media (max-width:640px){.cc-actions{width:100%}.cc-btn{flex:1 1 auto;text-align:center}}
