/* waerme-handel.de — Premium-Overhaul "Manufaktur-Katalog" (2026-06-27, 4. Richtung)
   Inhaber lehnte die warme Vorversion als „COMIC-HEFT" ab. Diagnose: nicht die Wärme war das
   Problem, sondern ein dekoratives Kostüm (Mono-GROSSBUCHSTABEN als globale Haut, Deko-Index-Zahlen,
   Doppelrahmen/Pinselstrich, gesättigte Ton-Bänder, zwei Wärmen, §19 als Dauerwerbung). Diese
   Version nimmt zurück: warme, leicht ENTSÄTTIGTE Stein/Greige-Neutralflächen, GENAU EIN gedeckter
   Rost-Akzent (--accent #9A4528, Tinte-auf-Warm, nie Fläche größer als ein Button), viel Luft,
   ruhige Typografie. Anker: Carl Hansen & Søn (EIN Objekt auf warmem Feld), Manual.co (Single-
   Sentence-Hero), Buck Mason (echte eng gesetzte Wortmarke, reiches warmes Neutral ohne Farbblock).
   Typo: --display = Newsreader (sober Serif, SPARSAM — nur Hero/Seiten-H1/Produktname); --sans =
   Hanken Grotesk (Body, UI UND alle Labels in Satz-Schreibung); --mono = IBM Plex Mono AUSSCHLIESSLICH
   für Preis/Art.-Nr./Count. Wichtige Reconciliation: --serif ist auf --sans (Hanken) umgebogen, damit
   die vielen bestehenden „serif"-Sektions-/Karten-Überschriften zu Hanken werden (monolithisch, EIN
   Serif-Moment); Newsreader wird über --display NUR auf den H1-Momenten opt-in gesetzt (Dateiende).
   Bindender Bauvertrag: .overhaul/gesamtkonzept-premium.md. Reine Storefront-Optik, kein Backend/Slug/Schema.
   Source-order: @font-face → :root → base → components → RESPONSIVE (END, FEHLER-019).
   Self-hosted woff2 only (kein CDN/@import — FEHLER-009). AA-Kontrast: Tinte auf Stein-Weiß ≥4.5:1.
   Refusal: kein reines Weiß als Grund, kein gesättigter Farbblock, kein Doppelrahmen/Pinselstrich,
   keine Deko-Index-Zahlen, keine Mono-Großbuchstaben-Haut, §19 nie als Werbung, Preise in Ink-Mono. */

/* ===================== Self-hosted Fonts ===================== */
/* Display — Fraunces (warme Serif; NUR Display/Headings via --serif) */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/fraunces-400.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/fraunces-500.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/fraunces-600.woff2') format('woff2')}
/* Body / UI — Hanken Grotesk (humanistische Grotesk) */
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/hanken-grotesk-400.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/hanken-grotesk-500.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/hanken-grotesk-600.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/hanken-grotesk-700.woff2') format('woff2')}
/* Numeric / Protokoll — IBM Plex Mono (NUR Preise, Art.-Nr., Counts/Pagination) */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-500.woff2') format('woff2')}
/* Display — Newsreader (sober Transitional-Serif; SPARSAM — nur H1-Momente via --display) */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/newsreader-500.woff2') format('woff2')}
/* Fraunces-Dateien bleiben für Rollback auf Disk, werden aber nicht mehr referenziert. */

:root{
  /* ---- Warme Neutralflächen — REICHES Sand/Pergament (2026-06-29: tiefer & wärmer gg. „zu weiß/billig",
         echte Tonstufen Seite→Sektion→Karte; NICHT gelb-gesättigt, NICHT dunkel) ---- */
  --sand-0:#FCF7EA;       /* hellster Warmton: gehobene Flächen / Chips */
  --paper:#EADFC9;        /* Page-bg — warmes, sattes Pergament (reich, nicht weiß; bleibt hell) */
  --surface:#DBCDAB;      /* Sektions-Tonschritt — klar tiefer & wärmer für ablesbare Materialtiefe */
  --band:#DBCDAB;
  --band-clay:#D4C194;    /* tiefster Tonschritt — sattes Honig-Clay (sichtbare Wärme/Farbe, noch hell) */
  --card:#F9F2DF;         /* Karten / Buybox / Formulare — creme, hebt sich KLAR vom tieferen Pergament ab */
  --card-2:#F3EBD6;
  --field:#FBF6EA;        /* Inputs */
  /* Foto-Felder = ruhiges warmes Feld; Originalfotos (CLEAN_IMAGES=0) sitzen mit IHREM eigenen
     Hintergrund darauf — kein multiply/Treatment (Inhaber: „auf dem ursprünglichen Hintergrund"). */
  --plate:#EAE0C6;
  --plate-2:#ECE2C9;
  --plate-line:#C6B488;

  /* ---- Tinte — warmes Anthrazit-Taupe (sophisticated, niedrige Sättigung) ---- */
  --ink:#26211B;          /* ~13:1 auf --paper */
  --ink-soft:#574F44;     /* ~6.6:1 (AA) */
  --muted:#5E5443;        /* ~5.6:1 (AA) auf Pergament — alle warmen Gründe ≥4.5:1 */
  --on-deep:var(--ink);   /* Text auf den hellen Tonschritt-Bändern → Tinte */
  --on-deep-soft:var(--muted);
  --cream:#FBF8F1;        /* helles Cream für Text auf dem einen Rost-Button */

  /* ---- Haarlinien — warm & präsent (Struktur/Material liest reicher, kein flaches Vektorfeld) ---- */
  --line:#CDBB95;
  --line-strong:#B4A176;

  /* ---- DER eine Akzent — gedeckte Burnt-Sienna/Rost, sparsam (Tinte-auf-Warm, nie Fläche) ---- */
  --accent:#9A4528;       /* Burnt Sienna; #fff auf --accent ~5.6:1 (Buttons ≥16px bold) */
  --accent-dk:#7F3A22;    /* Hover/Active */
  --accent-ink:#8A3E22;   /* Akzent als Kleintext/Link auf warm, ~5.7:1 (AA) */
  --accent-soft:rgba(154,69,40,.07);  /* faintester Tint — nur aktive Facette/Häkchenfeld */
  --accent-line:rgba(154,69,40,.28);  /* Akzent-Haarlinie (aktive Unterkante) */

  /* ---- Zweite Wärme PENSIONIERT — Amber zeigt auf neutrale Tinte (kein sichtbarer 2. Ton) ---- */
  --amber:var(--muted); --amber-ink:var(--ink-soft);

  /* ---- Funktionssignal-Rost (NUR „Letztes Stück / Verkauft" / Fehler) ---- */
  --verify:var(--accent); /* „geprüft/lieferbar" = Rost-Häkchen (Tinte-auf-Warm) */
  --brick:#8A3520; --last:var(--brick);
  --danger:#9A3322; --ok:var(--accent);

  /* ---- Backward-compat Aliasse ---- */
  --deep:var(--band-clay); --accent-2:var(--ink-soft);
  --ember:var(--accent); --ember-dk:var(--accent-dk); --ember-soft:var(--accent-soft);
  --glow:transparent; --copper:var(--ink-soft);

  /* ---- Fonts (self-hosted woff2, kein CDN/@import — FEHLER-009) ---- */
  --display:'Newsreader',Georgia,serif;             /* sober Serif — SPARSAM (Hero/H1/Produktname) */
  --sans:'Hanken Grotesk',system-ui,sans-serif;     /* Body/UI/Labels (Satz-Schreibung) */
  --serif:var(--sans);                              /* bestehende „serif"-Regeln → Hanken (monolithisch) */
  --mono:'IBM Plex Mono',ui-monospace,monospace;    /* NUR Preis/Art.-Nr./Count */
  --fw-display:500;

  /* ---- Type scale — ruhiger, mehr Luft ---- */
  --t-hero:clamp(40px,5.2vw,68px);
  --t-h1:clamp(30px,3.6vw,46px);
  --t-h2:clamp(23px,2.4vw,31px);
  --t-h3:20px;
  --t-body:16px;
  --t-sm:14px;
  --t-xs:12.5px;
  --t-eyebrow:13px;

  /* ---- Spacing (8-based, großzügig) ---- */
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:40px; --s-5:72px; --s-6:104px;

  /* ---- Geometry — leise, präzise ---- */
  --radius:6px; --radius-sm:4px; --radius-pill:999px;
  --wrap:1280px;
  --read:680px;

  /* ---- Schatten — präsenter & warm (Karten/Bilder heben sich als Material ab) ---- */
  --shadow-card:0 18px 42px -22px rgba(60,38,20,.42);
  --shadow-soft:0 12px 26px -16px rgba(60,38,20,.28);

  /* ---- Motion ---- */
  --dur-color:160ms; --dur-hover:240ms; --dur-fade:180ms; --dur-slide:220ms;
  --ease:cubic-bezier(.2,.6,.2,1);
  --dur:.5s; --dur-fast:.18s;
}
*{box-sizing:border-box;min-width:0}
html{-webkit-text-size-adjust:100%;color-scheme:light;scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background-color:var(--paper);line-height:1.58;font-size:var(--t-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-wrap:break-word;hyphens:manual;
  /* Sehr niedrig-deckende warme Stein/Leinen-Textur — nur leichte Materialtiefe, kein Farb-Glow. */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  background-attachment:fixed;background-repeat:repeat}
/* Warme Material-Lage auch hinter den getönten Bändern/Hero: dieselbe Leinen-Textur sehr dezent. */
.paper-grain{position:relative}
.paper-grain::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23m)' opacity='0.05'/%3E%3C/svg%3E")}
.paper-grain>*{position:relative;z-index:1}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.muted{color:var(--muted)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:var(--fw-display);line-height:1.12;letter-spacing:-.005em;color:var(--ink);
  font-optical-sizing:auto;hyphens:manual;word-break:keep-all;overflow-wrap:normal}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
strong,b{font-weight:600}

/* ===================== Skip link + focus ===================== */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200}
.skip-link:focus{left:12px;top:12px;background:var(--accent);color:#fff;padding:10px 16px;border-radius:var(--radius-sm)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}

/* Eyebrow — Hanken, Satz-Schreibung, muted (KEINE Mono-Großbuchstaben-Haut mehr) */
.eyebrow{font-family:var(--sans);font-size:var(--t-eyebrow);letter-spacing:0;text-transform:none;
  color:var(--muted);font-weight:500;margin:0 0 14px;hyphens:manual;word-break:keep-all;overflow-wrap:normal}
.eyebrow.light{color:var(--on-deep-soft)}

/* ===================== Header (sticky, dunkel/Blur, zwei Reihen) ===================== */
.site-header{position:sticky;top:0;z-index:50;background:rgba(234,223,201,.90);backdrop-filter:blur(14px) saturate(1.02);
  -webkit-backdrop-filter:blur(14px) saturate(1.02);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;gap:28px;min-height:74px;padding:0;flex-wrap:nowrap}
.brand{display:inline-flex;align-items:center;gap:11px;color:var(--ink);flex:0 0 auto}
.brand-mark{width:28px;height:28px;display:block;flex:0 0 auto;align-self:center}
/* Wortmarke = Hanken 600, eng & präzise gesetzt (Anker Buck Mason), kein Serif */
.brand-name{font-family:var(--sans);font-size:20px;font-weight:600;letter-spacing:-.012em;white-space:nowrap;line-height:1;
  hyphens:manual;word-break:keep-all}
.brand-tld{color:var(--accent)}
/* Der „Punkt" nach Handel = kleines präzises Rost-Quadrat (Schrift verborgen) */
.brand-dot{display:inline-block;width:7px;height:7px;background:var(--accent);border-radius:1.5px;
  margin-left:3px;vertical-align:baseline;font-size:0;line-height:0;overflow:hidden}
.brand-spark{width:9px;height:9px;background:var(--accent);border-radius:1.5px;flex:0 0 auto;display:inline-block;align-self:center}

/* Suche als dunkles Tech-Feld (Mockup: gefülltes Charcoal-Pill mit Haarlinie) */
/* Suche = EIN Haarlinien-Feld (kein Naht zwischen Input und Button), klar lesbar auf Pergament */
.search{display:flex;align-items:stretch;gap:0;flex:1 1 auto;max-width:560px;margin:0 auto;position:relative;
  background:var(--field);border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(38,33,27,.04);
  transition:border-color var(--dur-color),box-shadow var(--dur-color)}
.search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-line)}
.search input{flex:1;min-width:0;width:auto;border:0;border-radius:0;padding:12px 14px;font:inherit;font-family:var(--sans);
  font-size:16px;background:transparent;color:var(--ink);text-overflow:ellipsis}
.search input::placeholder{font-family:var(--sans);font-size:14px;letter-spacing:0;color:var(--muted)}
.search input:focus{outline:none}
.search button{display:inline-flex;align-items:center;gap:7px;border:0;
  background:transparent;color:var(--ink-soft);border-radius:0;padding:10px 16px 10px 12px;font-size:13.5px;font-weight:500;
  cursor:pointer;white-space:nowrap;transition:color var(--dur-color),background-color var(--dur-color);forced-color-adjust:none}
.search button:hover{color:var(--accent);background:var(--accent-soft)}
.search button svg{display:block}
.search button span{display:none}

/* Header-Warenkorb mit Mono-Count-Chip */
/* Such-Umschalter: nur auf Mobile sichtbar (Lupe→X), Desktop hat die volle Suchleiste */
.search-toggle{display:none}
/* Desktop: Toggle-Checkbox ungenutzt → ganz aus dem Fluss/Fokus (volle Suchleiste ist immer sichtbar) */
.search-toggle-cb{display:none}
.cart-link{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;position:relative;color:var(--ink);
  padding:8px 4px;font-size:14.5px;font-weight:500;transition:color var(--dur-color)}
.cart-link:hover{color:var(--accent)}
.cart-link svg{display:block}
.cart-link.has-items{color:var(--accent)}
.cart-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;
  background:var(--accent);color:#fff;border-radius:var(--radius-sm);font-family:var(--mono);font-size:11px;font-weight:500;line-height:1;
  font-variant-numeric:tabular-nums;box-shadow:0 6px 16px -8px var(--glow)}

/* Kategorie-Leiste (Reihe 2) — ruhige Textnav auf Charcoal */
.catbar{border-top:1px solid var(--line);background:var(--surface)}
.catbar-inner{display:flex;gap:24px;align-items:center;min-height:46px;flex-wrap:wrap}
.catbar-inner a{position:relative;font-family:var(--sans);font-size:14px;letter-spacing:-.005em;
  color:var(--ink-soft);font-weight:500;padding:6px 0;border-bottom:1px solid transparent;
  transition:color var(--dur-color),border-color var(--dur-color);flex:0 0 auto}
.catbar-inner a:hover{color:var(--ink);border-bottom-color:var(--accent)}
.catbar-inner a.on{color:var(--ink);border-bottom-color:var(--accent)}

/* Mikro-Trust-Strip (Mono) auf tiefster Ink (Mockup-Topbar) */
.trust-strip{border-top:1px solid var(--line);background:var(--deep)}
.trust-strip-inner{display:flex;align-items:center;gap:10px 22px;flex-wrap:wrap;min-height:36px;padding:7px 0;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.trust-strip-inner span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.trust-strip-inner span::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--accent);margin-right:9px;flex:0 0 auto}
.trust-strip-inner span:not(:last-child)::after{content:"";margin-left:8px}

/* ===================== Buttons ===================== */
/* Primär = Ember-Gradient mit Glow + weißem Text (Mockup) */
.btn,a.btn:link,a.btn:visited{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;
  background:var(--accent);color:#fff;padding:13px 28px;border-radius:var(--radius);
  font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:-.005em;border:1px solid transparent;cursor:pointer;
  transition:transform var(--dur-color),background-color var(--dur-color);forced-color-adjust:none;
  -webkit-tap-highlight-color:transparent}
@media(hover:hover){.btn:hover{background:var(--accent-dk);transform:translateY(-1px)}}
.btn:active{transform:translateY(0)}
.btn.ghost,a.btn.ghost:link,a.btn.ghost:visited{background:transparent;color:var(--ink);border-color:var(--line-strong);box-shadow:none}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);background:transparent;transform:none;box-shadow:none}
.btn.tertiary,a.btn.tertiary:link{background:transparent;border-color:transparent;color:var(--accent-ink);min-height:auto;
  padding:6px 0;font-family:var(--mono);font-size:13px;letter-spacing:.02em;box-shadow:none}
.btn.tertiary:hover{color:var(--accent-dk);background:transparent;transform:none;box-shadow:none}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn-micro{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--muted);
  margin-top:7px;text-align:center}

/* ===================== Hero (FULL-BLEED warm-cinematic — Foto vollflächig, Espresso-Text auf Pergament-Verlauf) ===================== */
/* Aufmacher: ein echtes Werkstatt-Foto füllt die Bühne, der Handwerker sitzt rechts; ein warmer
   Pergament-Verlauf von links hält die Textseite hell & lesbar — KEIN dunkler Scrim (nie „Darknet"). */
.hero-img{position:relative;min-height:min(84vh,800px);display:flex;align-items:center;isolation:isolate;
  border-bottom:1px solid var(--line);overflow:hidden;background:var(--surface)}
.hero-bg{position:absolute;inset:0;z-index:0;background:var(--paper)}
/* Das Foto schmilzt links per weicher Maske in die Pergament-Fläche (kein harter Bild-/Diptychon-Rand mehr);
   object-position rückt den Handwerker-Panel nach rechts, sodass die Mittel-Naht des Quellbildes hinter dem
   deckenden Scrim verschwindet. */
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:88% 50%;
  -webkit-mask-image:linear-gradient(94deg, transparent 0%, transparent 34%, rgba(0,0,0,.35) 48%, #000 64%, #000 100%);
          mask-image:linear-gradient(94deg, transparent 0%, transparent 34%, rgba(0,0,0,.35) 48%, #000 64%, #000 100%)}
/* Warmer Pergament-Verlauf links: bleibt bis über die Bild-Naft deckend, federt dann weit & weich aus
   (kein sichtbarer vertikaler Schnitt mehr), + sehr dezenter Fuß-Schatten für die Trust-Reihe */
.hero-img .hero-scrim{display:block;position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(94deg, var(--paper) 0%, rgba(234,223,201,.995) 40%, rgba(234,223,201,.94) 54%,
      rgba(234,223,201,.68) 64%, rgba(234,223,201,.40) 74%, rgba(234,223,201,.18) 84%,
      rgba(234,223,201,0) 97%),
    linear-gradient(0deg, rgba(38,33,27,.10) 0%, rgba(38,33,27,0) 22%)}
.hero-img-inner{position:relative;z-index:2;padding:clamp(56px,8vh,116px) 28px;max-width:var(--wrap);width:100%;margin:0 auto}
.hero-copy{max-width:660px;min-width:0}
/* Eyebrow als kleines Rost-Quadrat + Label — selbstbewusster als der stille Default */
.hero-img .eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--accent-ink);
  font-weight:600;font-size:13.5px;margin:0 0 20px}
.hero-img .eyebrow::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--accent);flex:0 0 auto}
/* Der EINE große Serif-Moment: Newsreader, deutlich größer & enger als zuvor */
.hero-img h1{font-family:var(--display);font-size:clamp(44px,5.4vw,68px);font-weight:var(--fw-display);
  line-height:1.04;letter-spacing:-.025em;color:var(--ink);margin:0 0 22px;max-width:16ch;
  text-wrap:balance}
/* „vom Fachhandwerker" bleibt als Einheit zusammen — kein hängendes „vom" am Zeilenende (Desktop/Tablet).
   Auf dem Handy aufgehoben (siehe ≤680px), damit der lange Block nicht aus der Spalte läuft. */
.hero-img h1 .h1-nb{white-space:nowrap}
.hero-img h1 .em,.hero-img h1 em{color:var(--accent);font-style:normal}
.hero-img .lead{font-size:clamp(17px,1.4vw,20px);line-height:1.6;max-width:42ch;margin:0 0 32px;color:var(--ink-soft)}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.hero-cta .btn{font-size:16px;padding:15px 30px}
.hero-link{font-family:var(--sans);font-size:15px;font-weight:600;color:var(--accent-ink);
  display:inline-flex;align-items:center;gap:7px;transition:gap var(--dur-hover),color var(--dur-color)}
.hero-link:hover{color:var(--accent-dk);gap:11px}
/* Trust-Reihe — auffällig präsent, aber leise typografiert (echte Katalogzahl + Rost-Häkchen) */
.hero-trust{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;margin-top:34px;
  padding-top:24px;border-top:1px solid var(--line-strong)}
.hero-trust-item{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);
  font-size:14px;font-weight:500;color:var(--ink-soft);word-break:keep-all}
.hero-trust-item .ht-ck{color:var(--accent);font-weight:700;font-size:13px}
.hero-trust-num{font-family:var(--mono);font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.lead{font-size:18px;color:var(--ink-soft);line-height:1.62}

/* ===================== Section frames (alternierende Charcoal-Schatten) ===================== */
.section{padding:var(--s-6) 0}
.section--sand{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section--deep{background:var(--surface);color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-head{display:flex;justify-content:flex-start;align-items:baseline;margin-bottom:36px;gap:16px;flex-wrap:wrap}
.section-head h2{font-family:var(--sans);font-weight:600;font-size:var(--t-h2);margin:0;letter-spacing:-.012em;color:var(--ink)}
.section-head a{font-family:var(--sans);font-size:14px;letter-spacing:-.005em;color:var(--accent-ink);font-weight:500;white-space:nowrap;margin-left:auto}
.section-head a:hover{color:var(--accent-dk)}
.section--deep .section-head h2{color:var(--on-deep)}

/* ===================== Kategorie-Index (nummeriertes Register, graft #4) ===================== */
.kategorie-index{border-top:1px solid var(--line-strong)}
.kat-row{display:grid;grid-template-columns:auto 1fr auto 116px;align-items:center;gap:0 28px;
  padding:24px 0;border-bottom:1px solid var(--line);transition:padding-left var(--dur-hover) var(--ease)}
.kat-row:hover{padding-left:8px}
.kat-num{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--muted);letter-spacing:.04em;
  font-variant-numeric:tabular-nums;align-self:start;padding-top:6px}
.kat-name{font-family:var(--serif);font-weight:500;font-size:clamp(22px,2.4vw,30px);color:var(--ink);letter-spacing:-.012em;
  line-height:1.12;margin:0;hyphens:manual;word-break:keep-all;overflow-wrap:normal;transition:color var(--dur-color)}
.kat-row:hover .kat-name{color:var(--accent)}
.kat-count{font-family:var(--mono);font-size:13px;color:var(--muted);letter-spacing:.02em;
  font-variant-numeric:tabular-nums;white-space:nowrap;justify-self:end}
/* FIX#8 — Kategorie-Index-Thumbs ~20% größer + klarer 1px-Warm-Rahmen (Ring). */
.kat-thumb{width:116px;height:86px;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;justify-self:end;display:flex;align-items:center;justify-content:center;padding:7px;
  background:var(--plate)}
.kat-thumb img{width:100%;height:100%;object-fit:contain;
  transition:transform var(--dur-hover) var(--ease)}
.kat-row:hover .kat-thumb img{transform:scale(1.03)}
.kat-thumb .noimg{width:100%;height:100%;
  background:repeating-linear-gradient(45deg,var(--surface),var(--surface) 7px,var(--card) 7px,var(--card) 14px)}

/* ===================== „So prüfen wir" — Prozessband ===================== */
.steps-band{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.step-cell{background:var(--card);border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;min-width:0}
.step-cell .step-photo{aspect-ratio:4/3;background:var(--plate);overflow:hidden;border-bottom:1px solid var(--line)}
.step-cell .step-photo img{width:100%;height:100%;object-fit:cover}
.step-cell .step-photo .noimg{width:100%;height:100%;
  background:repeating-linear-gradient(45deg,var(--surface),var(--surface) 9px,var(--card) 9px,var(--card) 18px)}
/* FIX#12: leeres Foto-Feld (kein <img>/.noimg) liest nicht als kaputt → ruhiges Sandfeld statt starrer Leere */
.step-cell .step-photo:empty{background:var(--surface)}
.step-body{padding:24px 26px 28px}
.step-num{font-family:var(--sans);font-size:13px;letter-spacing:0;text-transform:none;color:var(--muted);font-weight:500;margin-bottom:10px}
.step-cell h3{font-family:var(--sans);font-weight:600;font-size:18px;margin:0 0 8px;letter-spacing:-.008em;color:var(--ink)}
/* FIX#8 — Prozessband-Captions: mehr Zeilenhöhe + warme Tinte (ruhiger lesbar). */
.step-cell p{margin:0;font-size:14.5px;color:var(--ink-soft);line-height:1.7}

/* ===================== Foto-Band (Frische-Eingänge, horizontaler Strip) ===================== */
.photo-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);gap:0;overflow-x:auto;
  border-top:1px solid var(--line);border-left:1px solid var(--line);scroll-snap-type:x proximity;scrollbar-width:thin}
.photo-strip>.card{scroll-snap-align:start}

/* ===================== Produkt-Grid + Karten (graft #6) ===================== */
/* Hairline-Grid OHNE Phantom-Zellen: jede Karte trägt eigene rechte/untere Haarlinien. */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--surface);
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.card{background:var(--card);display:flex;flex-direction:column;min-width:0;overflow:hidden;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;
  transition:background-color var(--dur-color),box-shadow var(--dur-hover) var(--ease),transform var(--dur-hover) var(--ease)}
@media(hover:hover){
  .card:hover{transform:translateY(-3px);z-index:1;box-shadow:0 14px 34px -22px rgba(42,30,20,.30)}
  .card:hover .card-title{color:var(--accent)}
  .card:hover .card-img img{transform:scale(1.025)}
}
/* Foto-Feld — ruhige warme Plinthe. Bauteil auf --plate, object-fit:contain.
   WARM-PLINTHE (konsistent mit Home-Kacheln): multiply schmilzt Studio-Hintergründe ins Pergament,
   Sepia/Entsättigung nimmt das grelle Studio-Rot, ein Terrakotta-Soft-Light-Schleier eint die Fotos. */
.card-img{position:relative;aspect-ratio:1/1;overflow:hidden;padding:clamp(18px,7%,30px);border-bottom:1px solid var(--line);
  background:var(--plate)}
/* Bilder in VOLLER FARBE; NUR multiply (kein Sepia/Duotone/Overlay) → das eingebackene Foto-Weiß nimmt den
   warmen Plattenton an, Produktfarben bleiben. */
.card-img img{width:100%;height:100%;object-fit:contain;transition:transform .4s var(--ease)}
.card-img .noimg{width:100%;height:100%;
  background:repeating-linear-gradient(45deg,#E6D6BB,#E6D6BB 11px,var(--plate) 11px,var(--plate) 22px)}
.card-img.is-clean{padding:clamp(22px,9%,38px)}
.card-img.is-clean img{object-fit:contain}
.card-img.is-orig,.card-img.is-cover{padding:clamp(14px,6%,26px);aspect-ratio:1/1}
.card-img.is-orig img,.card-img.is-cover img{
  width:100%;height:100%;object-fit:contain;object-position:center}
/* Badge: ruhiger neutraler Satz-Chip (Hanken, Haarlinie) — kein Terrakotta-Mono-Stempel */
.badge{position:absolute;top:12px;left:12px;background:var(--sand-0);color:var(--ink-soft);
  border:1px solid var(--line-strong);
  font-family:var(--sans);font-size:11.5px;font-weight:500;letter-spacing:0;text-transform:none;
  padding:4px 10px;border-radius:var(--radius-sm);z-index:2}
.card-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:7px;flex:1;min-width:0}
/* FIX#4 — Marken-Eyebrow-Zeile fest reservieren, damit markenlose Karten nicht
   ragged-baseline laufen (Markup-Owner rendert Platzhalter-Span; hier Höhe reservieren). */
.card-meta{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-width:0;min-height:15px}
.card-meta:empty{min-height:15px}
.card-brand{font-family:var(--sans);font-size:12px;letter-spacing:0;text-transform:none;color:var(--muted);font-weight:500}
.card-samebrand{font-family:var(--sans);font-size:11px;letter-spacing:0;text-transform:none;
  color:var(--muted);border:1px solid var(--line);border-radius:var(--radius-sm);padding:2px 8px}
/* Titel: sauberer 2-Zeilen-Clamp OHNE rohes „…"-Ellipsis (wirkte billig). Schnitt an der Wortgrenze
   per max-height + overflow:hidden; lange Token brechen nur wenn nötig (overflow-wrap). */
.card-title{font-family:var(--sans);font-size:14.5px;font-weight:500;line-height:1.38;margin:0;color:var(--ink);
  overflow:hidden;max-height:2.76em;min-height:2.76em;min-width:0;
  transition:color var(--dur-color);hyphens:manual;-webkit-hyphens:manual;word-break:normal;overflow-wrap:break-word}
.card-spec{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--muted);
  font-variant-numeric:tabular-nums;display:flex;gap:6px 12px;flex-wrap:wrap}
.card-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:baseline;gap:8px 10px;
  padding-top:13px;border-top:1px solid var(--line);flex-wrap:wrap}
/* Preis = IBM-Plex-Mono in dunklem Ink (ruhig, tabellarisch — kein Signalfarbe) */
.price{font-family:var(--mono);font-size:17px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;min-width:0;letter-spacing:-.01em}
/* DE-Preis sauber in Mono: tabular-Komma bekommt im Mono-Vollcell zu viel Luft („399 , 00 €") →
   Komma getrennt rendern, eng an die Ziffern; echte Em-Marge vor dem €. Additiv, fällt bei
   abweichendem Format auf den Rohtext zurück (card.ejs). */
.price .pp{white-space:nowrap}
.price .pp-sep{margin:0 -.15em 0 -.17em;font-variant-numeric:normal}
.price .pp-cur{margin-left:.28em;letter-spacing:0}
/* Verfügbarkeit = ruhiges Vertrauenssignal: Rost-Häkchen + Ink-Text (Hanken, kein Verkaufssignal). */
.stock{font-family:var(--sans);font-size:12.5px;letter-spacing:0;text-transform:none;font-weight:500;color:var(--ink-soft);
  display:inline-flex;align-items:center;gap:6px}
.stock.in{color:var(--ink-soft)}
.stock.in::before{content:"✓";color:var(--accent);font-weight:700;font-size:11px;line-height:1}
.stock.out{color:var(--muted)}
/* Verkauft: entsättigtes Foto + Durchstreichen */
.card.is-sold{opacity:.66}
.card.is-sold .card-img img{filter:saturate(.18) grayscale(.6)}
.card.is-sold .price{text-decoration:line-through;color:var(--muted)}
/* Condition-Chip / „Geprüftes Einzelstück" auf der Karte */
.cond-chip{display:inline-flex;align-items:center;align-self:flex-start;font-family:var(--sans);font-size:11.5px;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--ink-soft);background:var(--card-2);
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:4px 10px}

/* ===================== Listing-Köpfe / Breadcrumbs ===================== */
.crumbs{font-family:var(--sans);font-size:13px;letter-spacing:0;color:var(--muted);padding:26px 0 8px}
.crumbs a:hover{color:var(--accent)}
.list-head{padding:12px 0 24px;display:flex;align-items:flex-end;justify-content:space-between;gap:18px 28px;flex-wrap:wrap}
.list-head .lh-text{min-width:0}
.list-head h1{font-family:var(--display);font-weight:var(--fw-display);font-size:var(--t-h1);margin:0 0 8px;letter-spacing:-.014em;line-height:1.06}
.list-head h1 .lh-q{color:var(--ink)}
.list-head .muted{font-size:15px}
/* Keine Geister-Großzahl mehr: ruhige Mono-Trefferzeile (Zahl trägt Daten, nicht Ornament). */
.list-count{font-family:var(--mono);font-size:13.5px;font-weight:500;line-height:1.3;
  color:var(--muted);letter-spacing:.01em;font-variant-numeric:tabular-nums;flex:0 0 auto;white-space:nowrap;
  display:none;align-items:baseline;gap:7px;align-self:flex-end}
.list-count small{font-size:13.5px;letter-spacing:0;text-transform:none;color:var(--muted);font-weight:500}
.empty{padding:48px 0;color:var(--muted);font-size:15px;max-width:60ch;line-height:1.65}
.list-wrap{padding-bottom:var(--s-6)}

/* ===================== Shop-Shell (Facetten-Sidebar + Raster) ===================== */
/* FIX#5 — Facetten-Bogen: 260px-Haarlinien-Rail links + Raster rechts. Explizite
   Grid-Platzierung, damit das Raster nie über ein leeres linkes Gutter „schwebt"
   (Rail in Spalte 1, Main in Spalte 2 — auch falls eine Seite ohne Inhalt rendert). */
.list-shell{display:grid;grid-template-columns:260px minmax(0,1fr);gap:44px;align-items:start;margin-top:6px}
.list-side{min-width:0;grid-column:1}
.list-main{min-width:0;grid-column:2}
/* Facetten-Drawer — Desktop (>768px): Toggle versteckt, Body IMMER offen als 260px-Sidebar
   (unabhängig vom open/closed-Zustand des <details>, FIX#11). */
.facet-drawer{border:0;margin:0}
.facet-drawer-sum,.facet-drawer-toggle{display:none}
.facet-drawer-body{display:flex;flex-direction:column;gap:30px}
.facet{min-width:0}
.facet-title{font-family:var(--sans);font-size:14px;letter-spacing:-.005em;text-transform:none;
  color:var(--ink);font-weight:600;margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.facet-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.facet-link{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:7px 0;color:var(--ink-soft);font-size:14.5px;transition:color var(--dur-color)}
.facet-link .facet-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.facet-link .facet-count{font-family:var(--mono);font-size:12px;color:var(--muted);flex:0 0 auto;font-variant-numeric:tabular-nums}
.facet-link:hover{color:var(--accent)}
.facet-link.is-active{color:var(--accent);font-weight:600}
.facet-link.is-active .facet-count{color:var(--accent)}
.facet-price{flex-direction:row;flex-wrap:wrap;gap:8px}
.facet-chip{display:inline-flex;align-items:center;min-height:34px;padding:5px 12px;border:1px solid var(--line-strong);
  border-radius:var(--radius);font-family:var(--mono);font-size:12px;color:var(--ink-soft);
  transition:border-color var(--dur-color),color var(--dur-color),background-color var(--dur-color)}
.facet-chip:hover{border-color:var(--accent);color:var(--accent)}
.facet-chip.is-active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink);font-weight:500}
.facet-price-form{display:flex;align-items:flex-end;gap:8px;margin-top:12px;flex-wrap:wrap}
.facet-price-form .fp-field{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 0}
.facet-price-form .fp-field span{font-family:var(--sans);font-size:12px;letter-spacing:0;text-transform:none;color:var(--muted)}
.facet-price-form input{width:100%;border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:9px 10px;font:inherit;font-family:var(--mono);font-size:14px;background:var(--field);color:var(--ink)}
.facet-price-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.facet-price-form .fp-go{border:1px solid var(--line-strong);background:var(--card);color:var(--accent-ink);border-radius:var(--radius);
  padding:9px 14px;font-size:13.5px;font-weight:600;cursor:pointer;flex:0 0 auto;forced-color-adjust:none}
.facet-price-form .fp-go:hover{background:var(--accent-soft);border-color:var(--accent-line)}
.facet-price-form .fp-go:active{transform:translateY(1px)}
.facet-reset{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-family:var(--mono);font-size:12.5px;
  color:var(--accent);letter-spacing:.02em}
.facet-reset:hover{color:var(--accent-ink)}
.facet-reset::after{content:"→"}

/* Trefferleiste + Sort */
.list-bar{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;
  padding:0 0 18px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.list-bar-count{margin:0;font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--muted)}
.list-bar-count strong{font-family:var(--mono);font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.sort-form{display:flex;align-items:center;gap:10px}
.sort-label{font-family:var(--sans);font-size:13px;letter-spacing:0;text-transform:none;color:var(--muted)}
.sort-sel{border:1px solid var(--line-strong);border-radius:var(--radius);padding:9px 32px 9px 12px;
  font:inherit;font-family:var(--mono);font-size:13px;background:var(--field);color:var(--ink);cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236e8093' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center}
.sort-sel:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

/* Aktive Filter — entfernbare, eckige Mono-Chips */
.active-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 22px}
.afilter{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:5px 8px 5px 12px;
  background:var(--accent-soft);border:0;color:var(--accent-ink);border-radius:var(--radius);
  font-family:var(--mono);font-size:12px;font-weight:500;transition:background-color var(--dur-color)}
.afilter:hover{background:rgba(154,69,40,.13)}
.afilter .afilter-x{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;
  border-radius:var(--radius);background:rgba(154,69,40,.13);font-size:13px;line-height:1;flex:0 0 auto}
.afilter-clear{background:transparent;border:1px solid var(--line-strong);color:var(--ink-soft);padding:5px 12px}
.afilter-clear:hover{border-color:var(--ink);background:transparent;color:var(--ink)}

.empty-state{padding:8px 0 48px;max-width:60ch}
.empty-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}

/* ===================== Pagination (Mono, Haarlinien, Akzent-Unterstrich aktiv) ===================== */
.pager{display:flex;align-items:center;justify-content:center;gap:8px 14px;flex-wrap:wrap;
  margin-top:var(--s-5);padding-top:28px;border-top:1px solid var(--line)}
.pager-link{font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--ink-soft);
  padding:8px 12px;transition:color var(--dur-color)}
.pager-link:hover{color:var(--accent)}
.pager-link.is-off{color:var(--line-strong);pointer-events:none}
.pager-pages{list-style:none;display:flex;gap:4px;margin:0;padding:0;flex-wrap:wrap}
.pager-num{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:38px;padding:0 8px;
  font-family:var(--mono);font-size:13.5px;color:var(--ink-soft);border-bottom:1px solid transparent;
  font-variant-numeric:tabular-nums;transition:color var(--dur-color),border-color var(--dur-color)}
.pager-num:hover{color:var(--accent)}
.pager-num.is-current{color:var(--accent);border-bottom-color:var(--accent);font-weight:500}

/* ===================== Produktseite (Herzstück) ===================== */
.product{padding-bottom:var(--s-6)}
.product-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;margin:12px 0 var(--s-5);align-items:start}
.gallery{min-width:0;display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:start}
.gallery-thumbs{display:flex;flex-direction:column;gap:8px;min-width:0;max-height:560px;overflow-y:auto;scrollbar-width:thin}
.gallery-main{position:relative;aspect-ratio:1/1;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  padding:clamp(28px,5vw,56px);display:flex;align-items:center;justify-content:center;
  background:var(--plate-2);
  box-shadow:0 8px 24px -16px rgba(42,30,20,.16)}
/* Bild mittig auf hellem Feld, contain — WARM-PLINTHE (multiply + Terrakotta-Schleier), konsistent mit Karten */
/* Produktbild VOLLE FARBE; NUR multiply → eingebackenes Weiß nimmt den Plattenton an. Beim Zoom volle Farbe. */
.gallery-main img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  transition:transform .35s var(--ease)}
.gallery-main.is-orig img,.gallery-main.is-cover img{object-fit:contain}
.gallery-main.is-clean img{object-fit:contain}
.gallery-main.zoomable.is-zoom img{mix-blend-mode:normal}
.gallery-main.zoomable{cursor:zoom-in}
.gallery-main.zoomable.is-zoom img{transform:scale(1.9)}
/* Fallback wenn ein View die Thumbs unter dem Bild rendert */
.thumbs{display:flex;gap:8px;margin-top:8px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin}
.thumb{flex:0 0 64px;border:1px solid var(--line);background:var(--plate);border-radius:var(--radius-sm);overflow:hidden;
  cursor:pointer;aspect-ratio:1;padding:6px;scroll-snap-align:start;transition:border-color var(--dur-color)}
.thumb img{width:100%;height:100%;object-fit:contain}
.thumb.active,.thumb.is-active{border-color:var(--accent)}
.thumb:hover{border-color:var(--accent)}

.buybox{min-width:0;position:sticky;top:130px}
.buybox .pb-brand{font-family:var(--sans);font-size:13px;letter-spacing:0;text-transform:none;color:var(--muted);font-weight:500;margin-bottom:14px}
.buybox h1{font-family:var(--display);font-weight:var(--fw-display);font-size:clamp(26px,3vw,38px);margin:0 0 16px;line-height:1.12;letter-spacing:-.016em;
  hyphens:manual;word-break:keep-all;overflow-wrap:normal}
.pb-sku{font-family:var(--mono);font-size:13px;color:var(--ink-soft);margin-bottom:22px;padding-bottom:20px;
  border-bottom:1px solid var(--line);letter-spacing:.02em}
.pb-price{font-family:var(--mono);font-size:36px;font-weight:500;margin-bottom:6px;font-variant-numeric:tabular-nums;color:var(--ink);letter-spacing:-.01em}
.pb-vat{font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:22px}
.pb-vat a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.pb-cond{margin:-6px 0 22px}
.pb-stock{font-family:var(--sans);font-size:13.5px;letter-spacing:0;text-transform:none;font-weight:500;margin-bottom:24px}
/* FIX#2 — Buybox-Bestandszeile „lieferbar/verfügbar" = verify-Terrakotta (Vertrauen, kein Verkaufs-Akzent);
   ausverkauft bleibt --last-Ocker (Funktionssignal). */
.pb-stock.in{color:var(--verify)} .pb-stock.out{color:var(--last)}
.pb-actions{display:flex;gap:12px;margin-bottom:22px;flex-wrap:wrap}
.pb-actions .btn{flex:1 1 auto}
.pb-note{font-size:13px;color:var(--muted);margin:0 0 20px;line-height:1.55}
.pb-short{color:var(--ink-soft);font-size:15px;border-top:1px solid var(--line);padding-top:18px;line-height:1.65}

/* „Geprüftes Einzelstück"-Block (Vertrauenszentrum) — ruhige Haarlinie, kein gefüllter Stempel */
.pruef-block{margin:22px 0 0;padding:22px 22px;background:var(--card-2);border:1px solid var(--line);border-radius:var(--radius)}
.pruef-stamp{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:13px;letter-spacing:0;
  text-transform:none;color:var(--accent-ink);font-weight:600;margin-bottom:12px}
.pruef-stamp::before{content:"✓";display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  background:transparent;color:var(--accent);border:1px solid var(--accent-line);border-radius:50%;font-size:12px;font-weight:700;flex:0 0 auto}
.pruef-block h2{font-family:var(--serif);font-weight:500;font-size:18px;margin:0 0 8px;letter-spacing:-.008em}
.pruef-block p{margin:0;font-size:14px;color:var(--ink-soft);line-height:1.6}
.pb-trust{list-style:none;margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:9px}
.pb-trust li{position:relative;padding-left:24px;font-size:13.5px;color:var(--ink-soft);line-height:1.45}
.pb-trust li::before{content:"✓";position:absolute;left:0;top:0;color:var(--accent);font-weight:700}
.pb-trust a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.pb-datasheet{margin:18px 0 0}
.pb-datasheet a{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:13.5px;letter-spacing:0;
  color:var(--accent);font-weight:500;border:1px solid var(--line-strong);border-radius:var(--radius);padding:9px 14px;
  transition:border-color var(--dur-color),color var(--dur-color)}
.pb-datasheet a:hover{border-color:var(--accent);color:var(--accent-ink)}
.pb-cat-link{font-size:13.5px;color:var(--muted);margin:14px 0 0}
.pb-cat-link a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

/* Spec-Tabelle (data-honest: nur Zeilen mit echten Werten) */
.spec-table{margin:22px 0 0;border-top:1px solid var(--line-strong)}
.spec-table h2{font-family:var(--serif);font-weight:500;font-size:18px;margin:0 0 8px;padding-top:18px;letter-spacing:-.008em}
.spec-dl{margin:0;padding:0}
.spec-dl .spec-row{display:grid;grid-template-columns:minmax(120px,40%) 1fr;gap:0 20px;padding:11px 0;border-bottom:1px solid var(--line)}
.spec-dl dt{font-family:var(--sans);font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--muted);font-weight:500;margin:0;
  hyphens:manual;word-break:keep-all;overflow-wrap:normal}
.spec-dl dd{margin:0;font-family:var(--sans);font-size:14.5px;color:var(--ink);font-variant-numeric:tabular-nums}

/* ===================== Prose / Content ===================== */
.prose{max-width:var(--read);line-height:1.75;color:var(--ink-soft);font-size:16.5px}
.prose h2{font-family:var(--serif);font-weight:600;font-size:26px;margin:48px 0 14px;color:var(--ink);letter-spacing:-.01em}
.prose h3{font-family:var(--serif);font-weight:600;font-size:20px;margin:30px 0 10px;color:var(--ink);letter-spacing:-.008em}
.prose h4{font-family:var(--serif);font-weight:600;font-size:17px;margin:24px 0 8px;color:var(--ink)}
.prose p{margin:0 0 18px}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.prose img{border-radius:var(--radius);margin:22px 0;border:1px solid var(--line);background:var(--card)}
.prose figure{margin:26px 0}
.prose figure img{margin:0}
.prose figcaption{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--muted);margin-top:8px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px}
.prose li{margin:0 0 6px}
.prose table{border-collapse:collapse;width:100%;margin:22px 0;font-size:14px}
.prose td,.prose th{border:1px solid var(--line);padding:9px 13px;text-align:left}
.prose th{background:var(--surface);font-size:13px;font-weight:600;font-family:var(--sans)}
/* Elementor-Font-Awesome-SVGs zähmen */
.prose .e-font-icon-svg,.prose svg.e-font-icon-svg{width:1em!important;height:1em!important;max-width:22px;max-height:22px;
  display:inline-block;vertical-align:-.12em;fill:var(--accent);color:var(--accent)}
/* FIX#7 — Beschreibung: komfortables Lesemaß + ruhiger Absatz-Rhythmus. */
.product-desc{max-width:var(--read);margin-inline:auto;margin-top:8px;border-top:1px solid var(--line);padding-top:8px;
  line-height:1.75;font-size:16.5px;color:var(--ink-soft)}
.product-desc p{margin:0 0 18px}
.product-desc h2{margin-top:36px}
.product-desc>h2:first-child{color:var(--accent)}
.product-desc h3,.product-desc h4,.product-desc h2:not(:first-child){color:var(--ink)}
/* WYSIWYG (Jörg 2026-07-03): FRÜHER erzwangen hier zwei !important-Regeln, dass JEDE inline
   gesetzte Farbe auf Grau und JEDE Überschriften-Ausrichtung auf linksbündig gezwungen wurde
   (Alt-Schutz gegen WP-Farb-Müll). Das hat Jörgs Editor-Formatierung (rote Wörter, zentrierte
   Zeilen) auf der fertigen Seite ZERSTÖRT → „sieht ganz anders aus als in der Bearbeitung".
   ENTFERNT. Der Archiv-Import ist ohnehin farb-/stil-bereinigt (rewriteHtml) → kein WP-Müll mehr;
   nur Jörgs BEWUSSTE Formatierung bleibt jetzt erhalten. NICHT wieder einführen. */

/* Datenblatt-Karten */
/* FIX#7 — Datenblatt-Strip als warmer --card-Figur-Chip mit Haarlinie zur Beschreibung
   und JetBrains-Mono-Label, klar abgesetzt vom Fließtext. */
.datasheets{margin-top:var(--s-5);background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:8px 26px 26px;position:relative}
.datasheets::before{content:"";position:absolute;left:26px;right:26px;top:0;height:1px;background:var(--line-strong)}
.datasheets>.section-head{margin-bottom:18px}
.datasheets>h2,.datasheets>.section-head h2{font-family:var(--sans);font-weight:600;font-size:15px;
  letter-spacing:-.005em;text-transform:none;color:var(--ink);margin:22px 0 18px}
.datasheet-cards{display:flex;flex-direction:column}
.datasheet{display:grid;grid-template-columns:auto 1fr;gap:0 18px;align-items:start;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);padding:22px 26px}
.datasheet+.datasheet{margin-top:-1px}
/* FIX#7 — im gerahmten Strip: innere Karten als Haarlinien-Zeilen (kein Box-in-Box-Doppelrahmen) */
.datasheets .datasheet-cards .datasheet{border:0;border-top:1px solid var(--line);border-radius:0;padding:20px 0;margin-top:0}
.datasheets .datasheet-cards .datasheet:first-child{border-top:0}
.datasheet .ds-icon{font-size:18px;color:var(--accent);line-height:1;margin-top:2px}
.datasheet .ds-body{min-width:0}
.datasheet .ds-title{margin:0 0 8px;font-family:var(--serif);font-weight:500;font-size:18px}
.datasheet .ds-title a{color:var(--ink);display:inline-flex;align-items:baseline;gap:9px}
.datasheet .ds-title a:hover{color:var(--accent)}
.datasheet .ds-teaser{font-size:14px;line-height:1.55;margin:0 0 10px;color:var(--ink-soft)}
.datasheet .ds-link{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:var(--accent);font-weight:500}
.datasheet .ds-link:hover{color:var(--accent-ink)}

/* ===================== Artikel / Datenblatt-Beitrag ===================== */
.article{padding-bottom:var(--s-6);padding-top:0}
.article>.article-inner{max-width:var(--read);margin:0 auto}
.article h1{font-family:var(--serif);font-weight:500;font-size:var(--t-h1);margin:16px 0 26px;line-height:1.08;letter-spacing:-.012em}
.article-product{background:var(--accent-soft);border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;margin-bottom:30px;font-size:14px}
.article-product>span{font-family:var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:11px;font-weight:500}
.article-product a{color:var(--accent-ink);font-weight:600;display:block;margin-top:6px;font-size:15px}
.article-cta{margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}

/* ===================== Legal / 404 ===================== */
.legal{font-size:16px;line-height:1.8;max-width:72ch}
.legal h1{font-family:var(--serif);font-weight:500;margin-bottom:26px;font-size:var(--t-h1);letter-spacing:-.012em}
.notfound{padding:var(--s-6) 0;min-height:54vh;max-width:680px;margin:0 auto}
.notfound .kicker{display:block;margin-bottom:16px;font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500}
.notfound h1{font-family:var(--serif);font-weight:500;font-size:var(--t-hero);margin:0 0 16px;letter-spacing:-.018em;line-height:1.04;
  hyphens:manual;word-break:keep-all;overflow-wrap:normal}
.notfound .muted{font-size:17px;margin:0 0 30px;max-width:48ch}
.notfound .hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.notfound .nf-cats{list-style:none;margin:34px 0 0;padding:24px 0 0;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:8px 22px}
.notfound .nf-cats a{font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--accent)}
.notfound .nf-cats a:hover{color:var(--accent-ink)}

/* ===================== Footer (Deep-Tiefenfläche) ===================== */
.site-footer{background:var(--surface);color:var(--ink);margin-top:0;border-top:1px solid var(--line-strong);position:relative}
/* Leistungsversprechen über den Spalten — ruhige Haarlinien-Häkchen (kein gefülltes Plakett) */
/* Critic (versand mobil): Trust-Band hob sich nicht vom Footer ab → Grenzen mulmig. Eigener,
   eine Spur tieferer Ton + kräftigere Hairline unten → Band liest als eigenständige Zusicherung. */
.footer-top{display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;
  padding:var(--s-4) 28px;background:#E1DAC9;border-bottom:1px solid var(--line-strong)}
/* Eine ruhige Hairline-Zusicherungszeile (kein Trust-Tetris, kein gestapeltes Häkchen-Plakett). */
.footer-assure{font-family:var(--sans);font-size:13.5px;letter-spacing:0;color:var(--muted);margin:0;line-height:1.5;max-width:62ch}
.footer-trustrow{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 30px}
.footer-trustrow li{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:13.5px;
  letter-spacing:0;color:var(--ink-soft);white-space:nowrap}
.footer-trustrow .ft-ic{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex:0 0 auto;
  border-radius:50%;background:transparent;border:1px solid var(--accent-line);color:var(--accent);font-size:10px;font-weight:700}
.footer-cta{flex:0 0 auto;min-height:44px}
.footer-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:40px;padding:var(--s-5) 28px var(--s-4)}
.brand-foot{display:inline-flex;align-items:center;gap:9px;margin-bottom:16px}
.brand-foot .brand-mark{width:28px;height:28px;display:block;flex:0 0 auto;align-self:center}
.brand-foot .brand-name{font-family:var(--sans);font-size:20px;font-weight:600;letter-spacing:-.012em;line-height:1;color:var(--on-deep)}
.brand-foot .brand-tld,.brand-foot .brand-dot{color:var(--accent)}
.footer-grid>div:first-child .muted{font-size:14.5px;max-width:42ch;line-height:1.65;color:var(--ink-soft)}
.site-footer h4{font-family:var(--sans);font-size:13.5px;letter-spacing:-.005em;text-transform:none;color:var(--ink);margin:0 0 16px;font-weight:600}
.site-footer a{display:block;color:var(--ink-soft);font-size:14.5px;padding:5px 0;transition:color var(--dur-color)}
.site-footer a:hover{color:var(--accent)}
.foot-bottom{border-top:1px solid var(--line);padding:20px 28px;font-family:var(--sans);font-size:13px;
  letter-spacing:0;color:var(--ink-soft);display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}
.foot-bottom .foot-trust{display:inline-flex;flex-wrap:wrap;gap:8px 18px}
.foot-contact{margin-top:12px}
.foot-contact a{display:inline;color:var(--ink-soft);text-decoration:underline;text-underline-offset:2px}
.foot-contact a:hover{color:var(--accent)}

/* ===================== Home: Story (Deep) ===================== */
.story{background:var(--surface);color:var(--ink);border-top:1px solid var(--line)}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:var(--s-6) 28px}
.story-media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);border:1px solid var(--line);box-shadow:0 8px 24px -16px rgba(42,30,20,.16)}
.story-text .eyebrow{color:var(--muted)}
.story-text h2{font-family:var(--serif);font-weight:var(--fw-display);font-size:var(--t-h2);margin:8px 0 18px;letter-spacing:-.01em;color:var(--ink)}
.story-text p{color:var(--ink-soft);font-size:16.5px;line-height:1.7;max-width:48ch;margin:0 0 28px}
.story-cta{display:flex;gap:12px;flex-wrap:wrap}
.story-cta .btn.ghost,.story-cta a.btn.ghost:link{color:var(--ink);border-color:var(--line-strong)}
.story-cta .btn.ghost:hover{border-color:var(--accent);color:var(--accent);background:transparent;transform:none;box-shadow:none}

/* ===================== Home: Datenblatt-Hinweis (Sand-Band) ===================== */
.ds-hint{padding-top:0}
.ds-hint-inner{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:34px 38px}
.ds-hint-inner h2{font-family:var(--serif);font-weight:500;font-size:22px;margin:0 0 8px;letter-spacing:-.01em}
.ds-hint-inner p{margin:0;max-width:62ch;font-size:14.5px;line-height:1.6;color:var(--ink-soft)}

/* ===================== Kontaktformular ===================== */
.contact-card{max-width:var(--read);margin:44px 0 0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:32px 34px}
.contact-card h2{font-family:var(--serif);font-weight:500;font-size:21px;margin:0 0 20px;letter-spacing:-.01em}
.contact-ok{background:var(--accent-soft);border:1px solid var(--line);color:var(--accent-ink);border-radius:var(--radius);padding:13px 16px;margin-bottom:20px;font-weight:500}
.contact-form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.cf-field{margin-bottom:16px}
.cf-field label{display:block;font-size:13px;font-weight:500;color:var(--ink-soft);margin:0 0 6px}
.cf-field input,.cf-field textarea{width:100%;border:1px solid var(--line-strong);border-radius:var(--radius);padding:12px 14px;font:inherit;font-size:15px;background:var(--field);color:var(--ink)}
.cf-field textarea{resize:vertical;line-height:1.55}
.cf-field input:focus,.cf-field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.cf-consent{display:block;font-size:13.5px;color:var(--ink-soft);margin:4px 0 22px;line-height:1.5}
.cf-consent input{float:left;margin:.18em .6em 0 0;width:17px;height:17px;accent-color:var(--accent)}
.cf-consent a{display:inline;color:var(--accent);text-decoration:underline;text-underline-offset:2px}

/* Kontakt: saubere Kontaktzeilen */
.prose.legal .contact-lead-h{font-family:var(--serif);font-weight:500;font-size:22px;margin:6px 0 12px}
.contact-lines{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:0;max-width:46ch;border-top:1px solid var(--line)}
.contact-lines li{margin:0}
.contact-lines a{display:flex;align-items:center;gap:16px;padding:16px 4px;color:var(--ink);border-bottom:1px solid var(--line);transition:color var(--dur-color)}
.contact-lines a:hover{color:var(--accent)}
.contact-lines .c-ic{width:22px;height:22px;flex:0 0 auto;color:var(--accent);overflow:visible}
.contact-lines .c-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.contact-lines .c-lab{font-family:var(--sans);font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--muted);font-weight:500}
.contact-lines .c-val{font-size:16px;font-weight:500;color:inherit;letter-spacing:-.005em;overflow-wrap:anywhere}

/* ===================== Warenkorb-Seite (Ledger, graft #0) ===================== */
.cartpage,.checkoutpage,.thankspage{padding-top:36px;padding-bottom:var(--s-6)}
.cartpage h1,.checkoutpage h1,.thankspage h1{font-family:var(--serif);font-weight:500;font-size:var(--t-h1);margin:6px 0 28px;letter-spacing:-.012em}
.cart-empty{padding:18px 0 64px;max-width:640px}
.cart-empty .ce-lead{font-family:var(--serif);font-weight:500;font-size:clamp(22px,3vw,30px);line-height:1.18;letter-spacing:-.012em;color:var(--ink);margin:0 0 32px;max-width:18ch}
.cart-empty .ce-cats-label{margin:0 0 14px}
.cart-empty .ce-cats{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 34px}
.cart-empty .ce-cta{display:flex;gap:12px;flex-wrap:wrap}
.cart-layout{display:grid;grid-template-columns:1fr 360px;gap:48px;align-items:start}
.cart-items{display:flex;flex-direction:column;border-top:1px solid var(--line-strong)}
.cart-row{display:grid;grid-template-columns:88px 1fr auto auto;gap:20px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line)}
.cart-row.sold{opacity:.62}
.cart-thumb{width:88px;height:88px;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:var(--plate);display:block;padding:8px}
.cart-thumb img{width:100%;height:100%;object-fit:contain}
/* Original-Foto im Cart-Thumb: gleiches helles Feld, contain (kein Cover-Crop). */
.cart-thumb.is-orig img{object-fit:contain;object-position:center}
.cart-name{font-weight:600;color:var(--ink);letter-spacing:-.005em}
.cart-name:hover{color:var(--accent)}
.cart-sku{font-family:var(--mono);font-size:12px;margin-top:4px;letter-spacing:.02em;color:var(--muted)}
.cart-info{min-width:0}
/* FIX#2 — Cart-Verfügbarkeit „verfügbar" = verify-Terrakotta (Vertrauen). */
.cart-avail{font-family:var(--sans);font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--verify);margin-top:4px}
.cart-laststock{font-family:var(--sans);font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--last);margin-top:4px}
.cart-soldnote{font-size:13px;color:var(--danger);margin-top:4px}
.cart-price{font-family:var(--mono);font-weight:500;white-space:nowrap;color:var(--ink);font-variant-numeric:tabular-nums}
.cart-qty{display:flex;align-items:center;gap:14px;margin:0}
.qty-badge{font-family:var(--mono);font-size:14px;color:var(--ink-soft);font-weight:500;min-width:30px;text-align:right;font-variant-numeric:tabular-nums}
.link-del{background:none;border:0;color:var(--muted);font:inherit;font-size:13.5px;cursor:pointer;text-decoration:underline;text-underline-offset:2px;padding:10px 4px;display:inline-flex;align-items:center;min-height:44px}
.link-del:hover{color:var(--danger)}
.cart-suggest{margin-top:var(--s-5);padding-top:8px}

/* ===================== Summary (Warenkorb + Checkout) ===================== */
.cart-summary,.checkout-summary{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;position:sticky;top:130px}
.cart-summary h2,.checkout-summary h2{font-family:var(--serif);font-weight:500;font-size:18px;margin:0 0 18px;letter-spacing:-.008em}
.cs-row{display:flex;justify-content:space-between;gap:12px;font-size:15px;padding:8px 0}
.cs-row span:last-child{font-family:var(--mono);font-variant-numeric:tabular-nums}
.cs-row.muted span:last-child{font-family:var(--sans)}
.cs-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-top:1px solid var(--line);margin-top:8px;padding-top:14px}
.cs-total>span:first-child{font-family:var(--serif);font-weight:500;font-size:18px}
/* FIX#6: Summen-Wert in Sora (Display), nicht Mono — Editorial-Zahl */
.cs-total>span:last-child{font-family:var(--serif);font-weight:500;font-size:26px;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.cs-vat{font-size:12.5px;margin:8px 0 18px;line-height:1.5;color:var(--muted)}
.cs-trust{font-family:var(--mono);font-size:11.5px;margin:16px 0 0;text-align:center;color:var(--muted)}
.btn-block{display:flex;width:100%;margin-bottom:10px}

/* ===================== Checkout ===================== */
.checkout-layout{display:grid;grid-template-columns:minmax(0,560px) 380px;gap:48px;align-items:start;justify-content:space-between}
.checkout-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.co-intro{max-width:70ch;margin:-12px 0 26px;font-size:15px;line-height:1.6;color:var(--ink-soft)}
.co-block{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 26px}
.co-block h2{font-family:var(--sans);font-size:14px;letter-spacing:-.005em;text-transform:none;margin:0 0 18px;color:var(--ink-soft);font-weight:600}
.field{display:block;margin:0 0 14px}
.field:last-child{margin-bottom:0}
.field>span{display:block;font-size:13px;font-weight:500;color:var(--ink-soft);margin:0 0 6px}
.field input,.field textarea{width:100%;border:1px solid var(--line-strong);border-radius:var(--radius);padding:12px 14px;font:inherit;font-size:15px;background:var(--field);color:var(--ink)}
.field textarea{resize:vertical;line-height:1.5}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field-row.two{display:grid;grid-template-columns:1fr 2fr;gap:14px}
.field-row.two .field.plz{grid-column:auto}
.check{display:flex;align-items:flex-start;gap:11px;font-size:14px;color:var(--ink-soft);line-height:1.5;margin:6px 0 0}
/* Deutlich sichtbare Checkbox (Jörg 2026-07-09: „kein Häkchen sichtbar bei der Datenschutzerklärung"):
   kräftiger 2px-Rahmen auf weißem Feld, robuster border-basierter Haken (kein clip-path -> überall sichtbar). */
.check input{appearance:none;-webkit-appearance:none;margin:.1em 0 0;width:22px;height:22px;
  background:#fff;border:2px solid var(--ink-soft,#6b5d49);border-radius:5px;
  flex:0 0 auto;cursor:pointer;position:relative;box-shadow:inset 0 0 0 1px rgba(0,0,0,.02);transition:background .12s,border-color .12s}
.check input:hover{border-color:var(--accent)}
.check input:checked{background:var(--accent);border-color:var(--accent)}
.check input:checked::after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;
  border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(42deg)}
.check input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.check a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
/* Consent-Zeile unterm Kontaktformular als klare Pflicht-Aktion hervorheben */
.contact-form .check{margin-top:14px;padding:12px 14px;background:var(--surface,#f4eee2);
  border:1px solid var(--line,#e3d8c4);border-radius:10px}
.small{font-size:12.5px}
.opt-list{display:flex;flex-direction:column;gap:10px}
.opt{display:flex;align-items:center;gap:12px;border:1px solid var(--line-strong);border-radius:var(--radius);padding:14px 16px;cursor:pointer;
  transition:border-color var(--dur-color),background-color var(--dur-color)}
.opt:hover{border-color:var(--accent)}
.opt:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.opt input{width:18px;height:18px;accent-color:var(--accent);flex:0 0 auto}
.opt-label{flex:1;font-size:14.5px;font-weight:500;color:var(--ink)}
.opt-label small{font-weight:400;color:var(--muted)}
.opt-price{font-family:var(--mono);font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
.opt.disabled{opacity:.5;cursor:not-allowed}
.cos-items{border-bottom:1px solid var(--line);margin-bottom:10px;padding-bottom:6px}
.cos-row{display:flex;justify-content:space-between;gap:14px;font-size:14px;padding:6px 0}
.cos-name{color:var(--ink-soft)}
.cos-price{white-space:nowrap;font-weight:500;font-family:var(--mono);font-variant-numeric:tabular-nums}
.form-errors{background:rgba(168,51,31,.07);border:1px solid rgba(168,51,31,.30);color:var(--danger);border-radius:var(--radius);padding:14px 18px;margin:0 0 24px}
.form-errors ul{margin:8px 0 0;padding-left:20px}

/* Checkout-Stepper — Haarlinien-Punkte + Satz-Labels (KEINE Deko-Numerale, Refusal #1) */
.co-steps{list-style:none;display:flex;align-items:center;gap:0;margin:8px 0 30px;padding:0;flex-wrap:wrap}
.co-step{display:flex;align-items:center;gap:9px;flex:0 0 auto;color:var(--muted);font-size:14px}
.co-step:not(:last-child)::after{content:"";display:block;width:clamp(20px,5vw,56px);height:1px;background:var(--line-strong);margin:0 14px}
.co-step-dot{display:inline-block;width:9px;height:9px;border-radius:50%;
  border:1px solid var(--line-strong);background:var(--card);flex:0 0 auto}
.co-step-label{font-family:var(--sans);font-weight:500;letter-spacing:-.005em}
.co-step.is-current{color:var(--ink)}
.co-step.is-current .co-step-label{font-weight:600}
.co-step.is-current .co-step-dot{border-color:var(--accent);background:var(--accent)}
.co-step.is-done{color:var(--ink-soft)}
.co-step.is-done .co-step-dot{border-color:var(--accent);background:var(--accent)}

/* ===================== Trust-Liste (Vorkasse) ===================== */
.trust-list{list-style:none;margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.trust-item{display:flex;align-items:flex-start;gap:11px;font-family:var(--sans);font-size:13px;color:var(--ink-soft);line-height:1.45}
.trust-item .trust-ic{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex:0 0 auto;
  margin-top:1px;border-radius:var(--radius);background:var(--accent-soft);color:var(--accent-ink);font-size:11px;font-weight:700}
.trust-item a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

/* ===================== Danke ===================== */
.thanks-head{max-width:680px;margin:10px auto 40px}
.thanks-check{width:62px;height:62px;border-radius:var(--radius);background:var(--accent);color:#fff;font-size:30px;display:flex;align-items:center;justify-content:center;margin:0 0 20px}
.thanks-pay,.thanks-order{max-width:680px;margin:0 auto 28px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px 28px}
.thanks-pay h2,.thanks-order h2{font-family:var(--serif);font-weight:500;font-size:19px;margin:0 0 14px;letter-spacing:-.008em}
.bank-box{display:grid;grid-template-columns:auto 1fr;gap:8px 22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin-top:16px;font-size:15px}
.bank-box>div{display:contents}
.bank-box .bk{font-family:var(--mono);color:var(--muted);font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.bank-box span:not(.bk){font-family:var(--mono);font-variant-numeric:tabular-nums}
.bank-pending{background:var(--surface);border-radius:var(--radius);padding:14px 18px;margin-top:14px}
.thankspage{max-width:880px;margin:0 auto}
.pay-steps{list-style:none;display:flex;flex-wrap:wrap;gap:14px;margin:18px 0 6px;padding:0}
.pay-step{display:flex;align-items:center;gap:10px;flex:1 1 200px;min-width:0;font-size:14px;color:var(--ink-soft);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
.pay-num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:0 0 auto;border-radius:var(--radius);
  background:var(--accent);color:#fff;font-family:var(--mono);font-size:13px;font-weight:500;font-variant-numeric:tabular-nums}
.bk-val{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.copy-btn{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);
  background:transparent;border:1px solid var(--line-strong);border-radius:var(--radius);padding:3px 10px;cursor:pointer;
  transition:border-color var(--dur-color),color var(--dur-color)}
.copy-btn:hover{border-color:var(--accent);color:var(--accent-ink)}
.copy-btn:active{transform:translateY(1px)}

/* ===================== Category-Hub (Intro + FAQ) ===================== */
.hub-intro{max-width:var(--read);margin:0 0 28px;color:var(--ink-soft)}
.hub-intro.prose{font-size:16px;line-height:1.7}
.hub-intro p:last-child{margin-bottom:0}
.hub-brands{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 30px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hub-brands a,.hub-brands span{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hub-brands a:hover{color:var(--accent)}
.hub-faq{margin-top:var(--s-5)}
.hub-faq-item{border-bottom:1px solid var(--line)}
.hub-faq-item:first-of-type{border-top:1px solid var(--line-strong)}
.hub-faq-item summary{position:relative;list-style:none;cursor:pointer;padding:18px 40px 18px 0;
  font-family:var(--sans);font-weight:600;font-size:16.5px;color:var(--ink);letter-spacing:-.005em;line-height:1.4;transition:color var(--dur-color)}
.hub-faq-item summary::-webkit-details-marker{display:none}
.hub-faq-item summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:20px;color:var(--muted);line-height:1;transition:transform var(--dur-color),color var(--dur-color)}
.hub-faq-item[open] summary::after{content:"–";color:var(--accent)}
.hub-faq-item summary:hover{color:var(--accent)}
.hub-faq-a{padding:0 0 22px;color:var(--ink-soft);font-size:15.5px;line-height:1.7;max-width:var(--read);animation:wh-fade var(--dur-fade) var(--ease)}
.hub-faq-a p{margin:0 0 12px}
.hub-faq-a p:last-child{margin-bottom:0}
.hub-faq-a a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
@keyframes wh-fade{from{opacity:0}to{opacity:1}}

/* Verwandte / Geschwister-Karten */
.hub-siblings{margin-top:var(--s-5)}
.sib-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.sib-card{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:10px;min-width:0;background:var(--card);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 22px;transition:background-color var(--dur-color)}
.sib-card:hover{background:var(--accent-soft)}
.sib-card .sib-name{font-family:var(--serif);font-weight:500;font-size:16.5px;color:var(--ink);letter-spacing:-.005em;
  flex:1 1 auto;min-width:0;hyphens:manual;word-break:keep-all;overflow-wrap:normal;line-height:1.25}
.sib-card:hover .sib-name{color:var(--accent-ink)}
.sib-card .sib-go{font-family:var(--mono);font-size:11.5px;color:var(--accent);letter-spacing:.04em;flex:0 0 auto}
/* FIX#1 — falls eine Geschwister-Karte ein Foto-Feld bekommt (.sib-media): warmes 4:3-Feld,
   Freisteller contain, Original Cover-Crop (kohärent zum Produkt-Raster, kein Farbblock). */
.sib-card .sib-media{width:100%;aspect-ratio:4/3;background:var(--plate);border:1px solid var(--line);
  border-radius:var(--radius-sm);overflow:hidden;margin-bottom:4px}
.sib-card .sib-media img{width:100%;height:100%;object-fit:contain}
.sib-card .sib-media.is-orig{padding:0}
.sib-card .sib-media.is-orig img{object-fit:cover;object-position:center}

/* ===================== Instant-Search Register-Panel ===================== */
.suggest-panel{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:60;background:var(--card);
  border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:0 24px 56px -28px rgba(42,30,20,.30);overflow:hidden;display:none}
.suggest-panel.open{display:block;animation:wh-suggest-in .16s var(--ease)}
@keyframes wh-suggest-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.suggest-list{list-style:none;margin:0;padding:0;max-height:60vh;overflow-y:auto}
.suggest-item{display:grid;grid-template-columns:48px 1fr auto;gap:0 14px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--line);color:var(--ink);cursor:pointer;text-decoration:none}
.suggest-item:last-child{border-bottom:0}
.suggest-item .s-thumb{width:48px;height:48px;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:var(--plate);flex:0 0 auto;align-self:center}
.suggest-item .s-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.suggest-item .s-thumb-empty{background:repeating-linear-gradient(45deg,var(--surface),var(--surface) 6px,var(--card) 6px,var(--card) 12px)}
.suggest-item .s-main{min-width:0;display:flex;flex-direction:column;gap:2px}
.suggest-item .s-name{font-size:14.5px;font-weight:500;line-height:1.3;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.suggest-item .s-meta{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;gap:8px;align-items:center}
.suggest-item .s-sold{color:var(--last);font-weight:500}
.suggest-item .s-price{font-family:var(--mono);font-size:14px;font-weight:500;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums;align-self:center}
.suggest-item .s-brand{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.suggest-item:hover,.suggest-item.active{background:var(--accent-soft)}
.suggest-foot{display:block;padding:11px 18px;font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--accent);border-top:1px solid var(--line);background:var(--surface)}
.suggest-foot:hover{background:var(--accent-soft)}
.suggest-empty{padding:18px;font-size:14px;color:var(--muted)}
.search .suggest-panel{left:auto;right:0;width:460px;max-width:92vw}

/* ===================== Lightbox ===================== */
.lightbox{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,56px);background:rgba(42,30,20,.74);backdrop-filter:blur(2px)}
.lightbox[hidden]{display:none}
.lightbox-stage{max-width:min(1100px,92vw);max-height:88vh;display:flex;align-items:center;justify-content:center}
.lightbox-img{max-width:100%;max-height:88vh;width:auto;height:auto;object-fit:contain;background:var(--card);border-radius:var(--radius)}
.lightbox-close{position:absolute;top:18px;right:20px;width:46px;height:46px;border-radius:var(--radius);
  border:1px solid rgba(251,245,233,.34);background:rgba(42,30,20,.58);color:#fff;font-size:24px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background-color var(--dur-color),border-color var(--dur-color)}
.lightbox-close:hover{background:var(--accent);border-color:var(--accent);color:#fff}
html.lightbox-open{overflow:hidden}

/* ===================== Reveals (nur Editorial-Bänder, data-reveal) ===================== */
.reveal-ready [data-reveal]{opacity:0;transform:translateY(16px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);transition-delay:calc(var(--i,0) * .08s);will-change:opacity,transform}
.reveal-ready [data-reveal].is-in{opacity:1;transform:none}

/* Karten-Tastatur-Fokusspur */
.card:focus-within{outline:2px solid var(--accent);outline-offset:-2px}

/* Animierte Nav-Unterstreichung (Katalog-Leiste) */
.catbar-inner a::after{content:"";position:absolute;left:0;right:100%;bottom:-1px;height:1px;background:var(--accent);transition:right var(--dur-fast) var(--ease)}
.catbar-inner a:hover::after,.catbar-inner a.on::after{right:0}

/* Cart-Badge-Pop */
.cart-link.has-items .cart-badge{animation:wh-badge-pop .26s var(--ease)}
@keyframes wh-badge-pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}

/* Sanftere Input-Fokus-Ringe (additiv) */
.facet-link:focus-visible,.afilter:focus-visible,.pager-link:focus-visible,.pager-num:focus-visible,.facet-chip:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}

/* „Ausgewählte Einzelstücke" = rahmenloses Standard-Karten-Raster (kein Werkstatt-Index,
   keine Doppellinie, keine Index-Nummern). Nutzt das geteilte .grid/.card unverändert. */

/* ===================== RESPONSIVE OVERRIDES (END — höchste Source-Order, FEHLER-019) ===================== */
@media(max-width:1080px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .steps-band{grid-template-columns:repeat(3,1fr)}
  .product-grid{grid-template-columns:1fr;gap:32px}
  .buybox{position:static}
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
}
@media(max-width:980px){
  .list-shell{grid-template-columns:1fr;gap:24px}
}
/* FIX#11: Mobile-Facetten-Drawer-Contract (<=768px) — Grid zuerst sichtbar, Drawer eingeklappt.
   Markup: <details class="facet-drawer"><summary class="facet-drawer-toggle">Filter</summary>… (list-shell). */
@media(max-width:768px){
  /* Produkt-Grid zuerst, Filter-Drawer danach (Quell-Reihenfolge: side vor main) */
  .list-shell{display:flex;flex-direction:column;gap:20px}
  .list-shell>.list-main{order:1}
  .list-shell>.list-side{order:2}
  /* Drawer als eckige Haarlinien-Karte */
  .facet-drawer{border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden}
  .facet-drawer-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;list-style:none;
    padding:14px 18px;font-family:var(--sans);font-size:14px;letter-spacing:0;text-transform:none;font-weight:600;
    color:var(--ink);background:var(--surface);transition:background-color var(--dur-color),color var(--dur-color)}
  .facet-drawer-toggle::-webkit-details-marker{display:none}
  .facet-drawer-toggle::after{content:"+";font-size:18px;line-height:1;color:var(--accent);margin-left:auto}
  .facet-toggle-cb:checked ~ .facet-drawer .facet-drawer-toggle{color:var(--accent);background:var(--accent-soft)}
  .facet-toggle-cb:checked ~ .facet-drawer .facet-drawer-toggle::after{content:"–"}
  .facet-drawer-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;
    background:var(--accent);color:#fff;border-radius:var(--radius);font-family:var(--mono);font-size:11px;font-variant-numeric:tabular-nums}
  .facet-drawer-body{padding:18px 18px 20px}
  /* Eingeklappt = nichts zeigen; Checkbox-Hack (no-JS, ersetzt <details> wegen Desktop-Collapse-Bug) */
  .facet-drawer-body{display:none}
  .facet-toggle-cb:checked ~ .facet-drawer .facet-drawer-body{display:flex}
}
@media(max-width:900px){
  .header-inner{min-height:auto;flex-wrap:wrap;gap:10px 16px;padding:9px 0}
  .brand{order:1}
  .brand-name{font-size:20px}
  /* Mobile: erste Sicht = Marke + H1 + CTA. Die Suche kollabiert zur Lupe (kein drittes schweres Band);
     Tippen klappt die volle Suchleiste als zweite Zeile auf (CSS-only, Checkbox-Toggle). */
  .search-toggle{order:2;margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;border-radius:var(--radius-sm,4px);color:var(--ink);cursor:pointer;
    border:1px solid var(--line);background:var(--card)}
  .search-toggle:hover{color:var(--accent);border-color:var(--line-strong)}
  .search-toggle .st-i-close{display:none}
  .cart-link{order:3;margin-left:8px}
  .search{order:4;flex:1 1 100%;max-width:none;margin:0;display:none}
  /* A11y: Checkbox bleibt im Fokus-/A11y-Baum (per Tab/Enter bedienbar), aber visuell verborgen —
     statt display:none/hidden, das sie aus dem Fokus nimmt. Pointer geht weiter aufs Label. */
  .search-toggle-cb{display:block;position:absolute;width:1px;height:1px;margin:0;padding:0;
    opacity:0;clip-path:inset(50%);pointer-events:none}
  /* Sichtbarer Fokusring auf der Lupe, wenn die (unsichtbare) Checkbox Tastatur-Fokus hat */
  .search-toggle-cb:focus-visible ~ .search-toggle{outline:2px solid var(--accent);outline-offset:2px}
  .search-toggle-cb:checked ~ .search{display:flex}
  .search-toggle-cb:checked ~ .search-toggle .st-i-open{display:none}
  .search-toggle-cb:checked ~ .search-toggle .st-i-close{display:inline}
  .search-toggle-cb:checked ~ .search-toggle{color:var(--accent);border-color:var(--line-strong)}
  .search button span{display:inline}
  .catbar{position:relative}
  /* Gutter exakt auf den Seiten-/Editorial-Gutter (20px) — Strip ist KEIN engerer Sub-Gutter mehr.
     `.catbar .catbar-inner` (Spez. 0,2,0) schlägt die spätere `.wrap{padding:0 20px}`-Regel robust (FEHLER-019). */
  .catbar .catbar-inner{gap:0;min-width:0;min-height:auto;padding:2px 60px 2px 20px;scroll-padding-left:20px;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x proximity;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent 100%);
            mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent 100%)}
  .catbar-inner::-webkit-scrollbar{display:none}
  .catbar-inner a{white-space:nowrap;flex:0 0 auto;padding:11px 15px;min-height:44px;display:inline-flex;align-items:center;border-bottom:0;scroll-snap-align:start}
  /* erstes Item beginnt exakt am Gutter (kein Zusatz-Einzug, kein „floating 26px") — der linke Fade ist
     auf 14px reduziert, damit „Alle Artikel" bei scrollLeft:0 frei steht. */
  .catbar .catbar-inner a:first-child{padding-left:0;margin-left:0}
  .catbar-inner a.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
  /* Scroll-Affordanz: warmer Rand-Fade in der EXAKTEN Bandfarbe (--surface), damit der abgeschnittene
     letzte Eintrag (z. B. „Gaskombiregler") als scrollbar lesbar wird statt „kaputt" zu wirken.
     Rechts kräftiger + breiter (deckt den letzten Eintrag spürbar an), links zarter Peek beim Scrollen. */
  /* Rand-Fade läuft jetzt als echte Alpha-Maske auf .catbar-inner (oben) — kein harter Schnitt/Chevron mehr;
     der frühere Overlay-Gradient (Farbkanten-Risiko) entfällt. Links nur ein zarter Peek beim Scrollen. */
  .catbar::before{content:"";position:absolute;top:0;left:0;bottom:0;width:14px;pointer-events:none;z-index:2;
    background:linear-gradient(270deg,rgba(232,226,214,0),var(--surface) 70%)}
  .cart-label{display:none}
  .kat-row{grid-template-columns:auto 1fr auto;gap:0 18px}
  .kat-thumb{display:none}
}
@media(max-width:760px){
  .wrap{padding:0 20px}
  .hero-img{min-height:auto}
  .hero-img-inner{padding:60px 20px 52px}
  .story-grid{grid-template-columns:1fr;gap:30px;padding:var(--s-5) 18px}
  .story-media{order:2}
  .ds-hint-inner{padding:26px 22px}
  .cf-row{grid-template-columns:1fr}
  .contact-card{padding:24px 22px}
  .grid{grid-template-columns:repeat(2,1fr)}
  .steps-band{grid-template-columns:1fr;border-left:0}
  .step-cell{border-left:1px solid var(--line)}
  .section{padding:var(--s-5) 0}
  .gallery{grid-template-columns:1fr}
  .gallery-thumbs{flex-direction:row;max-height:none;overflow-x:auto;order:2}
  .gallery-thumbs .thumb{flex:0 0 64px}
  .pb-actions .btn{flex:1 1 100%}
  .cart-layout,.checkout-layout{grid-template-columns:1fr;gap:28px}
  .cart-summary,.checkout-summary{position:static;order:2}
  .cart-row{grid-template-columns:64px 1fr auto;gap:14px}
  .cart-thumb{width:64px;height:64px}
  .cart-price{grid-column:2;grid-row:2;justify-self:start}
  .cart-qty{grid-column:3;grid-row:1/3;align-self:center}
  .field-row.two{grid-template-columns:1fr}
  .list-count{font-size:clamp(34px,12vw,52px)}
  .search .suggest-panel{width:100%;right:0;left:0}
  .co-steps{gap:0}
  .co-step{font-size:13px}
  .co-step:not(:last-child)::after{margin:0 8px}
  .co-step-label{display:none}
  .co-step.is-current .co-step-label{display:inline}
  .pay-step{flex:1 1 100%}
  .list-bar{gap:12px}
  .sib-grid{grid-template-columns:1fr 1fr}
  .gallery-main.zoomable.is-zoom img{transform:none}
  .gallery-main.zoomable{cursor:default}
}
@media(max-width:560px){
  /* FIX#9: Suchfeld bekommt Platz — Button auf reines Icon zurück (Label verdeckte den Placeholder) */
  .search button span{display:none}
  .search button{padding:10px 4px 10px 8px}
  /* FIX#10/FIX#8: großer Ocker-Numeral entfällt auf Mobile (würde sonst überdimensioniert
     mit dem Titel kollidieren) → ruhige Mono-Grundzeile UNTER dem Titel; bleibt die EINZIGE
     Trefferzahl (shop/category rendern keine separate .list-bar-count). */
  .list-head{flex-direction:column;align-items:flex-start;gap:10px;padding:8px 0 22px}
  .list-count{order:1;font-family:var(--mono);font-size:13px;line-height:1.2;color:var(--muted);
    letter-spacing:.04em;display:inline-flex;align-items:baseline;gap:7px;white-space:nowrap}
  .list-count small{display:inline;margin-top:0;text-align:left;font-size:13px;letter-spacing:.04em;
    text-transform:none;color:var(--muted)}
  /* .list-count (Grundzeile) ist die EINZIGE Trefferzahl auf Mobile; Bar-Count ausblenden = kein Duplikat */
  .list-bar-count{display:none}
  .footer-grid{grid-template-columns:1fr;gap:24px;padding-left:0;padding-right:0}
  .footer-top{padding-left:0;padding-right:0;align-items:flex-start}
  .footer-cta{width:100%}
  .brand-foot{margin-bottom:4px}
  .brand-foot .brand-name{white-space:normal}
  .kat-name{font-size:clamp(20px,6vw,24px)}
}
@media(max-width:480px){
  /* FIX#6 — Kontaktkarte bekommt unten Luft, damit der fixierte Chat-Launcher
     (bottom ~8px) nie über Formularinhalt liegt; Launcher bleibt im Rand. */
  .contact-card{padding-bottom:72px}
}
@media(max-width:440px){
  .grid{grid-template-columns:1fr 1fr}
  .card-body{padding:13px 13px 14px;gap:6px}
  .card-img{padding:20px}
  .card-title{font-size:13.5px;line-height:1.34}
  .card-foot{padding-top:10px}
  .sib-grid{grid-template-columns:1fr}
  .list-bar{flex-direction:column;align-items:flex-start}
  .pager-num{min-width:34px;height:34px}
  .facet-price{gap:6px}
  .suggest-item{grid-template-columns:42px 1fr auto;padding:10px 13px;gap:0 12px}
  .suggest-item .s-thumb{width:42px;height:42px}
}

/* ===================== CSS-Reconciliation (von Build-Agenten markierte Klassen) =====================
   Minimal, system-konform (Haarlinien, 2px, EIN Akzent, Mono für Protokoll/Eyebrows).
   Co-loziert am Dateiende vor RESPONSIVE-Guard; ändert nichts Bestehendes. */

/* Hero-Caption: Mono-„Protokoll"-Stimme auf der Hero-Tiefe (heller Text) */
.mono-ish{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.04em;color:var(--on-deep-soft)}

/* Verkauft-Zeile im Warenkorb: Foto entsättigen, Preis durchstreichen/muted (Bestand: opacity:.62) */
.cart-row.sold .cart-thumb img{filter:saturate(.2) grayscale(.6)}
.cart-row.sold .cart-price{text-decoration:line-through;color:var(--muted)}

/* Summary: muted-Variante einer .cs-row (z. B. „Versand — im nächsten Schritt") */
.cs-muted{color:var(--muted)}
.cs-muted span:last-child{font-family:var(--sans);color:var(--muted)}

/* Summary: leerer-Warenkorb-Fallback */
.cs-empty{color:var(--muted);font-size:var(--t-sm);line-height:1.55;text-align:center;padding:6px 0}

/* Checkout: editorialer Kopf (Eyebrow + h1 + Lead) — Block-Rhythmus */
.checkout-head{margin:0 0 var(--s-4)}

/* Breadcrumb-Trenner */
.crumb-sep,.crumbs .sep{color:var(--muted);margin:0 6px}

/* Checkout: rechtliche Mikrokopie unter dem Bestell-Button */
.cs-legal{color:var(--muted);font-size:var(--t-xs);line-height:1.5;margin-top:12px}

/* Danke: finaler CTA (ersetzt Inline-Style, harmlos) */
.thanks-cta{max-width:680px;margin:var(--s-4) auto 0}

/* ---- FIX#4: „Ähnliche Artikel" — ruhiger gerippter Streifen statt schwebender Kacheln ----
   3er-Streifen, Karten über geteilte Haarlinien verbunden, KEIN Rahmen/Schatten je Karte. */
.related-strip .card,.related-grid .card{box-shadow:none}
/* Fallback ohne eigene Markup-Klasse: das related-Grid ist das einzige .section .grid der
   Produktseite — 3-spaltig (Markup-Fixer kappt auf 3 → keine Phantomzelle), rahmenlos, geteilte Haarlinien.
   Nur ab Tablet erzwingen, damit die .grid-Responsive-Regeln (760/440px) darunter greifen. */
@media(min-width:761px){
  .product .section .grid,.related-strip,.related-grid{grid-template-columns:repeat(3,1fr)}
}
.product .section .grid .card{box-shadow:none}

/* ---- FIX#7: Inhalts-/Prosa-Seiten als zentriertes Lesemaß (kein hart-links-Pinning) ---- */
.article>.article-inner{max-width:var(--read);margin-inline:auto}
.prose.legal,.article .prose{max-width:var(--read);margin-inline:auto}
/* Mobile-Gutter: .article steckt NICHT in .wrap → seitlicher Innenabstand, sonst Text randlos (Post + Rechtsseiten). */
@media(max-width:640px){.article>.article-inner{padding-inline:18px}}

/* ---- FIX#8: Kontakt — Kontaktzeilen NICHT mehr 46ch-verwaist; auf das gleiche
   720px-Lesemaß wie die Formularkarte, damit beide bündig fluchten (kein Waisenkind). ---- */
.contact-lines{max-width:none}
.contact-card,.co-block.contact-card{max-width:var(--read);margin-left:0;margin-right:0}

/* Globaler Reduced-Motion-Guard (FEHLER-019) */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal],.reveal-ready [data-reveal]{opacity:1!important;transform:none!important}
  .card:hover{transform:none!important}
  .card:hover .card-img img,.gallery-main.zoomable.is-zoom img,.gallery-main img{transform:none!important}
  .kat-row:hover{padding-left:0!important}
  .catbar-inner a::after{transition:none!important}
}

/* ===================== Night4 Fix-Round (Tap-Targets / Footer-Gutter / Chat-Offset) ===================== */
@media(max-width:760px){
  /* WCAG 44px Touch-Targets */
  .cart-link{min-height:44px;padding-top:10px;padding-bottom:10px}
  .sort-sel{min-height:44px}
  .facet-chip,.afilter{min-height:44px;display:inline-flex;align-items:center}
  .crumbs a{display:inline-flex;align-items:center;min-height:34px}
  /* Footer-Gutter auf Mobile wiederherstellen (vormals auf 0 gesetzt → Inhalt klebte am Rand) */
  .footer-grid,.footer-top,.foot-bottom{padding-left:20px;padding-right:20px}
  /* Floating Chat-Launcher etwas anheben, damit er Content/CTAs seltener überlappt */
  html body #wh-chat{bottom:84px}
  /* Iter.2 Blocker (mobil): Rechts-/Info-Seiten haben KEINE Sticky-Buy-Bar → der 84px-Lift parkte
     den FAB mitten in der Lesespalte und verdeckte Wortenden. Dort den Launcher in die echte untere
     Ecke pinnen (safe-area-inset), nie über dem Fließtext ruhen. */
  html body:has(.legal-page) #wh-chat{bottom:calc(12px + env(safe-area-inset-bottom,0px))}
}

/* ===== Add-to-Cart-Bestätigung (cart-add.js, progressive Enhancement) =====
   Oben zentriert eingeblendet → kollidiert nicht mit Sticky-Buy-Bar/Chat-FAB unten. */
/* Desktop: oben-rechts unter der Katbar (nahe Warenkorb-Icon) — kollidiert nicht mit der zentralen Suche. */
.cart-toast{position:fixed;top:96px;right:18px;z-index:1200;
  display:flex;align-items:center;gap:14px;max-width:min(92vw,440px);
  padding:12px 16px;background:var(--card);border:1px solid var(--line-strong);
  border-left:3px solid var(--accent);border-radius:var(--radius);
  box-shadow:0 14px 34px -18px rgba(42,30,20,.28);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateX(24px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s}
.cart-toast.is-on{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(0)}
/* Mobil: unten-mittig ÜBER der Sticky-Buy-Bar + Chat-FAB (beide am unteren Rand). */
@media(max-width:760px){
  .cart-toast{top:auto;right:12px;left:12px;bottom:150px;max-width:none;transform:translateY(16px)}
  .cart-toast.is-on{transform:translateY(0)}
}
.cart-toast.is-error{border-left-color:var(--last)}
.cart-toast .ct-msg{font-size:14px;line-height:1.4;color:var(--ink);min-width:0}
.cart-toast .ct-go{flex:0 0 auto;font-family:var(--sans);font-size:13px;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--accent);white-space:nowrap;
  text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.cart-toast .ct-go:hover{color:var(--accent-dk)}
.btn.is-busy{opacity:.6;cursor:progress}
@media (prefers-reduced-motion:reduce){.cart-toast{transition:opacity .15s linear}}

/* ===================== Listen-Raster Feinschliff (entdekoriert) =====================
   KEINE Band-Platte, keine schweren Float-Schatten, keine Akzent-Oberkante mehr (das war das
   WARM2-„Comic"-Layering). Das Raster sitzt ruhig auf --paper, Karten tragen nur ihre geteilte
   1px-Haarlinie + kaum-sichtbaren Schatten. Eng auf .list-wrap (shop/category) gescoped. */

/* ---- Preis-Mono: kein großer Monospace-Abstand vor dem €-Zeichen ---- */
.price,.pc-price,.cart-price,.pb-price,.opt-price,.cos-price,.suggest-item .s-price,
.cs-total>span:last-child{white-space:nowrap}
.price,.pc-price,.cart-price,.pb-price,.opt-price,.cos-price,.suggest-item .s-price{word-spacing:-.3em}

/* Foto-Platte: Bauteil füllt das Feld ruhig, einheitliches --plate für ALLE Fotos (Refusal 8).
   (Blocker 2 — Desktop, Iter 2) Plattenpadding spürbar reduziert → das Bauteil füllt ~78 % der Platte
   statt klein in viel Cream-Leerraum zu schweben; contain bleibt (Freisteller unversehrt), die Karten
   gewinnen Rasterpräsenz gegen die große H1. */
.list-wrap .list-main .grid>.card .card-img{background:var(--plate);padding:clamp(8px,3%,15px)}
.list-wrap .list-main .grid>.card .card-img.is-clean{padding:clamp(10px,4%,18px)}
.list-wrap .list-main .grid>.card .card-body{min-height:118px}
.list-wrap .list-main .grid>.card .card-foot{margin-top:auto}
.list-wrap .list-main .grid>.card .cond-chip{margin-top:1px}

/* ---- Pagination: echte 44px-Touch-Targets @390 (Kill-List shop) ---- */
@media(max-width:440px){
  .pager-num{min-width:44px;height:44px}
  .pager-link{min-height:44px;display:inline-flex;align-items:center}
}

/* ===================== WARM3 — Raster-Hierarchie & Mobile-Einspalter (Iteration 3, Kill-List) =====================
   Eng auf shop/category (.list-wrap) gescoped — Home-/Produkt-/Cart-Raster unberuehrt (keine Regression).
   Hebel: Produktname dominant, Marken-Mono zurueckgenommen, Mobil EIN-spaltig statt geschrumpfter Thumbs. */

/* (3) Produktname dominanter (Groesse/Gewicht hoch); Marken-Mono-Label zuruecknehmen. */
.list-wrap .list-main .grid>.card .card-title{font-size:16px;font-weight:600;line-height:1.32;min-height:2.64em;
  letter-spacing:-.006em;color:var(--ink)}
.list-wrap .list-main .grid>.card:hover .card-title{color:var(--accent)}
.list-wrap .list-main .grid>.card .card-brand{font-size:9.5px;letter-spacing:.11em;color:var(--muted);opacity:.92}
.list-wrap .list-main .grid>.card .card-body{padding:15px 17px 17px;gap:6px}
.list-wrap .list-main .grid>.card .price{font-size:17.5px}
/* (5) Plattenton vereinheitlichen: jedes Foto-Feld liegt warm auf --plate, contain (kein kaltes Kachelweiss). */
.list-wrap .list-main .grid>.card .card-img.is-orig,
.list-wrap .list-main .grid>.card .card-img.is-cover{background:var(--plate)}

/* (Mobile-Grid) shop+category ≤430px: 2-spaltiges VERTIKALES Karten-Raster — das Foto sitzt oben
   ueber voller Kartenbreite (kraeftige Bildgewichtung wie das Desktop-Grid, statt utilitaristischem
   Listenzeilen-Thumbnail = „Teilekatalog", Critic-Blocker Iter 3). Greift NUR im .list-wrap (Home eigenes Raster). */
@media(max-width:430px){
  .list-wrap .list-main .grid{grid-template-columns:1fr 1fr;gap:12px}
  .list-wrap .list-main .grid>.card{display:flex;flex-direction:column;align-items:stretch}
  .list-wrap .list-main .grid>.card .card-img{aspect-ratio:1/1;border-right:0;
    border-bottom:1px solid var(--line);padding:10px}
  .list-wrap .list-main .grid>.card .card-img.is-clean{padding:13px}
  .list-wrap .list-main .grid>.card .card-body{padding:11px 12px 13px;min-height:0;
    justify-content:flex-start;gap:5px}
  .list-wrap .list-main .grid>.card .card-title{font-size:13px;line-height:1.32;-webkit-line-clamp:3;min-height:0}
  .list-wrap .list-main .grid>.card .price{font-size:15px}
  /* Einzelstueck-Badge auf der kleinen Mobil-Platte nicht ueberdimensionieren */
  .list-wrap .list-main .grid>.card .badge{top:8px;left:8px;padding:4px 7px;font-size:9px}
}

/* ===================== PREMIUM-OVERHAUL — DER EINE SERIF-MOMENT (Newsreader via --display) =====================
   --serif ist global auf Hanken umgebogen (monolithische Sektions-/Karten-Headlines). Newsreader
   erscheint NUR auf den H1-/Hero-/Produktnamen-Momenten + den großen Statement-Sätzen. Höchste
   Source-Order (Dateiende, FEHLER-019) — setzt ausschließlich font-family, Gewichte bleiben bestehen. */
.hero-img h1,
.list-head h1,
.buybox h1,.product .buybox h1,
.article h1,.ds-h1,
.notfound h1,.nf-h1,
.legal h1,.legal-head h1,
.cartpage h1,.checkoutpage h1,.thankspage h1,
.cart-empty .ce-lead{font-family:var(--display)}

/* ===================== Shared Fix-Round 1 (globale Formularfelder) =====================
   Kill-List Kontakt/Echtheit: Eingabefelder lasen sich „leer & ungeankert" auf Pergament.
   Klarere Feldkante (eine Stufe dunkler als --line-strong) + winziger Innen-Schatten = das Feld
   liest als bewusstes Steuerelement. Fokus-Ring (Akzent) bleibt unverändert (überschreibt box-shadow). */
.field input,.field textarea,
.cf-field input,.cf-field textarea,
.facet-price-form input{
  border-color:#C4BAA6;
  box-shadow:inset 0 1px 2px rgba(38,33,27,.05)}

/* Foto-Harmonisierung (Duotone/Sepia) ENTFERNT — Inhaber: wirkte wie aufgesetzter Hintergrund/„billig".
   Produktfotos überall in voller Farbe auf ruhiger Platte. */

/* ===================== PREMIUM SYSTEM-POLISH (2026-06-28 — Hermès-Editorial-Feinschliff) =====================
   Streng additiv & verfeinernd. Hebt die referenzielle Qualität des Designsystems (Typo-Render, Fokus-
   States, Tastbarkeit der Buttons, Tiefe von Header/Karten) ohne Bestehendes zurückzubauen. Höchste
   Source-Order (Dateiende, FEHLER-019). Reduced-Motion-Guard oben greift weiter (sein `!important`
   gewinnt über jede hier ergänzte Transition). Hero & Spiral-Logo bleiben unangetastet. */

/* 1) Text-Render: echtes Kerning + Standard-/kontextuelle Ligaturen für den ganzen Korpus
   (Hanken/Newsreader lesen dichter & ruhiger; Mono-Zahlen behalten ihre tabular-nums-Regeln). */
body{font-feature-settings:"kern" 1,"liga" 1,"calt" 1;font-kerning:normal;font-optical-sizing:auto}
h1,h2,h3,h4,.hero-img h1,.list-head h1,.buybox h1{font-feature-settings:"kern" 1,"liga" 1,"calt" 1,"ss01" 1}

/* 2) Auswahl-Farbe — warmer Rost auf Cream (Markensignatur statt Browser-Blau). */
::selection{background:var(--accent);color:var(--cream)}
::-moz-selection{background:var(--accent);color:var(--cream)}

/* 3) Sticky-Header bekommt eine kaum sichtbare warme Tiefe (premium „floating glass", kein JS) —
   trennt ihn vom durchscrollenden Inhalt, ohne die ruhige Haarlinie zu ersetzen. */
.site-header{box-shadow:0 10px 30px -26px rgba(38,33,27,.30)}

/* 4) Formular-Steuerelemente: Fokus-Ring & Kante weich einblenden (vorher hart umschaltend) +
   warme Auswahlfarbe für Häkchen/Checkboxen. Einheitliche Eingabe-Sprache über alle Felder. */
.field input,.field textarea,.cf-field input,.cf-field textarea,
.facet-price-form input,.search input,.sort-sel{
  transition:border-color var(--dur-color) var(--ease),box-shadow var(--dur-color) var(--ease)}
input[type="checkbox"],input[type="radio"]{accent-color:var(--accent)}

/* 5) Buttons — disziplinierte Tastbarkeit: einheitliche Übergänge inkl. Schatten, primärer Button
   hebt sich beim Hover mit einer weichen warmen Aura (Komposit-sicher: transform+box-shadow). */
.btn,a.btn:link,a.btn:visited{
  transition:transform var(--dur-color) var(--ease),background-color var(--dur-color) var(--ease),
    box-shadow var(--dur-hover) var(--ease)}
@media(hover:hover){.btn:not(.ghost):not(.tertiary):hover{box-shadow:0 14px 30px -16px rgba(154,69,40,.50)}}
.btn:not(.ghost):not(.tertiary):active{box-shadow:0 6px 16px -12px rgba(154,69,40,.45)}

/* 6) Karten-Fokusspur & interaktive Haarlinien-Elemente: gemeinsame, weiche Übergangssprache,
   damit Hover/Focus über das ganze System EIN Easing teilen (keine Sprünge). */
.facet-link,.facet-chip,.pager-num,.pager-link,.afilter,.sib-card,.suggest-item,
.contact-lines a,.site-footer a,.catbar-inner a{
  transition:color var(--dur-color) var(--ease),background-color var(--dur-color) var(--ease),
    border-color var(--dur-color) var(--ease)}

/* 7) Lesefluss-Feinheiten: Prosa-Links mit weicherem Unterstrich-Versatz, Mono-Zahlen überall
   strikt tabellarisch (Preise/Counts fluchten spaltenrein). */
.prose a,.pb-vat a,.pb-trust a,.hub-faq-a a,.legal a{text-decoration-thickness:1px;text-underline-offset:.18em}
.mono,.price,.pb-price,.cart-price,.opt-price,.cos-price,.list-count,.list-bar-count strong{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* 8) Dezente warme Scrollbalken in den Scroll-Containern (Galerie-Thumbs, Foto-Strip, Suggest-Liste). */
.gallery-thumbs,.photo-strip,.suggest-list,.thumbs,.catbar-inner{scrollbar-color:var(--line-strong) transparent}

/* ===================== SHOP-LISTE — 9er-Politur (2026-06-28, Kill-List shop/category) =====================
   Streng auf .list-wrap (shop + category) gescoped. Höchste Source-Order (Dateiende, FEHLER-019).
   Adressiert: Freisteller-Kohärenz (über CLEAN_IMAGES=1), 2-Zeilen-Titel mit fester Höhe (Baseline-Ruhe),
   spürbarer-aber-ruhiger Desktop-Hover, mobiler Filter-Zugang am Listenkopf (Bottom-Sheet), Count+Sort
   auf einer Baseline-Zeile, Chat-FAB überdeckt keine Kartenmeta mehr. Reduced-Motion-Guard (oben, !important)
   gewinnt weiter über jede hier ergänzte Transition. */

/* Default (Desktop): mobiler Filter-Knopf + Bottom-Sheet-Backdrop ausgeblendet (Desktop nutzt die Sidebar). */
.list-filter-btn{display:none}
.facet-backdrop{display:none}
.list-bar-left{display:flex;align-items:baseline;gap:16px;min-width:0;flex-wrap:wrap}
.facet-drawer-toggle .fdt-close{display:none}

/* (Titel) Fester 2-Zeilen-Block über Standard-Wortumbruch — kein harter Mid-Token-Cut, eine ruhige
   Baseline über alle Karten. NUR Desktop/Tablet (≥431px); Mobil-Reihe (≤430) behält 3 Zeilen/auto. */
@media(min-width:431px){
  .list-wrap .list-main .grid>.card .card-title{
    height:2.6em;min-height:2.6em;-webkit-line-clamp:2;line-clamp:2;
    word-break:normal;overflow-wrap:break-word;hyphens:none;-webkit-hyphens:none;text-wrap:pretty}
  /* (Innenabstand) konsistenter Rhythmus Bild → Eyebrow → Titel → Preis. */
  .list-wrap .list-main .grid>.card .card-body{padding:16px 18px 18px;gap:8px}
  .list-wrap .list-main .grid>.card .card-foot{padding-top:13px}
}

/* (Hover) spürbar aber zurückhaltend: weicher Lift, contain-Bildzoom, Akzent-Haarlinie unter dem Foto,
   Titel zieht in den Akzent. EIN Easing (var(--ease)). Nur Desktop-Zeiger (hover:hover, ≥769px). */
@media(hover:hover) and (min-width:769px){
  .list-wrap .list-main .grid>.card{
    transition:transform .26s var(--ease),box-shadow .26s var(--ease),border-color var(--dur-color) var(--ease)}
  .list-wrap .list-main .grid>.card .card-img{transition:border-color .26s var(--ease)}
  .list-wrap .list-main .grid>.card:hover{
    transform:translateY(-4px);border-color:var(--accent-line);
    box-shadow:0 20px 44px -26px rgba(42,30,20,.36)}
  .list-wrap .list-main .grid>.card:hover .card-img{border-bottom-color:var(--accent)}
  .list-wrap .list-main .grid>.card:hover .card-img img{transform:scale(1.045)}
}

/* ── Mobil (≤768px): Filter am Listenkopf + Bottom-Sheet, Count+Sort auf einer Baseline ── */
@media(max-width:768px){
  /* Listenkopf-Steuerung: Filter = eigene volle Zeile (tastbar), darunter Trefferzahl (links) +
     Sortieren (rechts) auf EINER gemeinsamen Baseline. */
  .list-bar{display:flex;flex-direction:row;align-items:center;justify-content:space-between;
    gap:16px 16px;flex-wrap:wrap;padding-bottom:16px;margin-bottom:20px}
  .list-bar-left{display:flex;align-items:center;gap:12px;min-width:0}
  .list-bar-count{display:inline-flex!important;align-items:center;margin:0;white-space:nowrap;font-size:13.5px}
  .list-head .list-count{display:none}            /* Duplikat im Kopf entfernen — Count lebt jetzt in der Bar */
  /* Sortieren: Label + Select mittig auf einer Achse, spürbar mehr Luft, 44px Touch-Ziel. */
  .list-bar .sort-form{margin-left:auto;align-items:center;gap:12px}
  .list-bar .sort-label{flex:0 0 auto;line-height:1}
  .list-bar .sort-sel{min-height:44px;padding-top:11px;padding-bottom:11px}

  /* Filter-Knopf am Listenkopf — volle Breite, öffnet das Bottom-Sheet. */
  .list-filter-btn{display:flex;flex:0 0 100%;align-items:center;justify-content:space-between;gap:10px;
    min-height:46px;padding:0 16px;
    border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--card);
    font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer;
    transition:border-color var(--dur-color) var(--ease),background-color var(--dur-color) var(--ease)}
  .list-filter-btn .lfb-main{display:inline-flex;align-items:center;gap:9px}
  .list-filter-btn svg{flex:0 0 auto;color:var(--accent)}
  .list-filter-btn-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;
    padding:0 5px;background:var(--accent);color:#fff;border-radius:var(--radius);
    font-family:var(--mono);font-size:11px;line-height:1;font-variant-numeric:tabular-nums;forced-color-adjust:none}
  .facet-toggle-cb:checked ~ * .list-filter-btn,
  .list-filter-btn:active{border-color:var(--accent);background:var(--accent-soft)}

  /* Die untenliegende Drawer-Karte wird ausgeblendet — der Zugang ist jetzt der Knopf oben. */
  .facet-drawer{display:none}

  /* Geöffnet: Bottom-Sheet über abdunkelndem Backdrop (No-JS, reiner Checkbox-Hack). */
  .facet-toggle-cb:checked ~ .facet-backdrop{
    display:block;position:fixed;inset:0;z-index:1400;background:rgba(38,33,27,.46);
    -webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);animation:wh-sheet-fade .2s var(--ease)}
  .facet-toggle-cb:checked ~ .facet-drawer{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:1401;max-height:84vh;overflow-y:auto;
    margin:0;border:0;border-top-left-radius:16px;border-top-right-radius:16px;background:var(--card);
    box-shadow:0 -18px 44px -16px rgba(38,33,27,.50);
    padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));
    animation:wh-sheet-up .26s var(--ease)}
  .facet-toggle-cb:checked ~ .facet-drawer .facet-drawer-toggle{
    position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;
    padding:16px 20px;border-bottom:1px solid var(--line);background:var(--card);
    font-size:16px;letter-spacing:-.01em}
  .facet-drawer-toggle .fdt-label{display:inline-flex;align-items:center;gap:9px}
  .facet-toggle-cb:checked ~ .facet-drawer .facet-drawer-toggle::after{content:none}
  .facet-toggle-cb:checked ~ .facet-drawer .facet-drawer-toggle .fdt-close{
    display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:13px;font-weight:500;
    letter-spacing:0;text-transform:none;color:var(--muted)}
  .facet-toggle-cb:checked ~ .facet-drawer .facet-drawer-toggle .fdt-close::after{content:"✕";font-size:13px;color:var(--accent)}
  .facet-toggle-cb:checked ~ .facet-drawer .facet-drawer-body{display:flex;padding:20px 20px 8px}
  /* Sheet sperrt nicht; Tap auf Backdrop ODER „Schließen“ togglet die Checkbox → schließt. */
}
@keyframes wh-sheet-up{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes wh-sheet-fade{from{opacity:0}to{opacity:1}}

/* (Karten-Fuss ≤430, 2-spaltig) In der schmalen Spalte Preis und „✓ lieferbar“ untereinander stapeln
   statt zu quetschen — Preis trägt, der Status-Hinweis ruht eine Zeile darunter. */
@media(max-width:430px){
  .list-wrap .list-main .grid>.card .card-foot{flex-direction:column;align-items:flex-start;gap:3px;padding-top:9px}
}

/* ===================== SHOP-LISTE — 9er-Politur, Iteration 2 (2026-06-28, Kill-List shop) =====================
   Streng auf .list-wrap (shop + category) gescoped. Höchste Source-Order (Dateiende, FEHLER-019) — verfeinert
   die vier offenen Critic-Blocker, ohne bestehende gute Stile zu schwächen. Reduced-Motion-Guard (oben,
   !important) bleibt unberührt; hier kein Bewegungs-Code. */

/* (Blocker 1 — Mobil) Trefferzahl-Zeile: zwischen Mono-Zahl und „Artikel" steckt im inline-flex der
   Whitespace-Textknoten zusammen → „360Artikel". Echter Abstand über flex-gap (statt fragilem Leerzeichen). */
@media(max-width:768px){
  .list-bar-count{gap:.42em}
}

/* (Blocker 3+4 — Desktop) Marken-Eyebrow IMMER auf identischer Zeilenhöhe rendern (echter Markenname wie
   markenloser Platzhalter), damit Titel & Preise jeder Reihe auf EINER Baseline fluchten. Der Platzhalter-
   Span (nur .card-eyebrow) erbte bislang die große Body-Schriftgröße → höhere Zeile → ragged. Jetzt feste,
   gleiche Metrik für beide; lange Marken werden sauber ellipsiert statt umzubrechen. */
@media(min-width:431px){
  .list-wrap .list-main .grid>.card .card-meta{
    height:15px;min-height:15px;flex-wrap:nowrap;overflow:hidden;align-items:baseline}
  .list-wrap .list-main .grid>.card .card-eyebrow{
    display:block;font-size:9.5px;line-height:15px;letter-spacing:.11em;font-family:var(--sans);
    font-weight:500;color:var(--muted);min-width:0;max-width:100%;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Titel: fester 2-Zeilen-Block, Zeilenhöhe exakt unter die Boxhöhe gerechnet (kein Descender-Clip der
     2. Zeile), Preis-/Stock-Fuß durch margin-top:auto unten verankert → Reihen-Baseline ruhig. */
  .list-wrap .list-main .grid>.card .card-title{
    line-height:1.3;height:2.6em;min-height:2.6em;-webkit-line-clamp:2;line-clamp:2}
}

/* (Titel-Umbruch ≤430, 2-spaltig) Lange Komposita in der schmalen Spalte sauber brechen statt unter
   overflow:hidden zu trunkieren („Heizungspump[e]") — Wortgrenze bevorzugt, Notbruch nur wenn nötig. */
@media(max-width:430px){
  .list-wrap .list-main .grid>.card .card-title{
    overflow-wrap:anywhere;word-break:normal;hyphens:none;-webkit-hyphens:none}
}

/* ===================== SHOP-LISTE — 9er-Politur, Iteration 3 (2026-06-28, Desktop-Kopf + Bild-Rhythmus) =====================
   Streng auf .list-wrap gescoped, höchste Source-Order (FEHLER-019). Behebt die zwei offenen Desktop-Befunde
   (tote Fläche rechts des Titelblocks; ungleich hohe Cream-Bildzellen) ohne bestehende Stile zu schwächen. */
@media(min-width:769px){
  /* (Blocker 3 — Kopfzone) Rechter Editorial-Anker schließt die tote Fläche rechts oben: kleines Eyebrow,
     große Mono-Ziffer (Bestandszahl, aktualisiert sich mit Filtern) + Label, baseline-bündig zum H1. Die
     funktionale Trefferzahl in der Bar entfällt auf Desktop → keine Dopplung. */
  .list-wrap .list-head{align-items:flex-end;padding-bottom:20px}
  .list-wrap .list-head .lh-text{max-width:42ch}
  .list-wrap .list-head .list-count{
    display:flex;flex-direction:column;align-items:flex-end;gap:0;flex:0 0 auto;align-self:flex-end;text-align:right;
    font-family:var(--mono);font-weight:500;color:var(--ink);letter-spacing:-.02em;line-height:.92;
    font-size:clamp(36px,3.6vw,50px);font-variant-numeric:tabular-nums;white-space:nowrap}
  .list-wrap .list-head .list-count::before{
    content:"Im Bestand";font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.15em;
    text-transform:uppercase;color:var(--muted);margin-bottom:9px;line-height:1}
  .list-wrap .list-head .list-count small{
    font-family:var(--sans);font-size:12.5px;font-weight:500;letter-spacing:.02em;color:var(--muted);
    text-transform:none;margin-top:7px}
  .list-wrap .list-bar .list-bar-count{display:none}

  /* (Blocker 4 — Bild-Rhythmus) Einheitlich flachere 4:3-Bildzellen statt 1:1 → ruhigerer Reihenrhythmus,
     weniger Cream-Leerraum um kleine Bauteile, gleiche Bildgewichtung über alle Reihen. */
  .list-wrap .list-main .grid>.card .card-img,
  .list-wrap .list-main .grid>.card .card-img.is-orig,
  .list-wrap .list-main .grid>.card .card-img.is-cover{aspect-ratio:4/3;padding:clamp(14px,5%,24px)}
  .list-wrap .list-main .grid>.card .card-img.is-clean{aspect-ratio:4/3;padding:clamp(16px,6%,28px)}
}

/* ===================== SHOP-LISTE — 9er-Politur, Iteration 4 (2026-06-28, finale Kill-List) =====================
   Streng auf .list-wrap / .list-side / .catbar gescoped, höchste Source-Order (Dateiende, FEHLER-019).
   Behebt die vier offenen Critic-Blocker rein verfeinernd (kein Rückbau bestehender Stile, keine andere
   Seite regressiert). Reduced-Motion-Guard oben (!important) bleibt unberührt. */

/* (Blocker 1 — Desktop) Sidebar-Preisfilter aus „generischem Webshop-Widget" in Hermès-Editorial
   überführt: von/bis = Haarlinien-Unterstrich-Felder auf der Body-Baseline (keine Box, kein Innen-
   schatten, kein Füll-Hintergrund), „Anwenden" = stiller Text-Link/Ghost mit Pfeil statt gefülltem
   Rost-Kasten, Preis-Chips konsequent in der 2px-Haarlinien-Sprache. */
/* (Blocker 1 — Desktop, Iter 2) VON/BIS jetzt als ECHTE umrandete Felder in der 2px-Haarlinien-
   Sprache der Preis-Chips darüber (gleiche Höhe, gleiche Kante, Mono-Innentext) statt schwebender
   nackter Unterstriche → das Feld liest als fertiges, bewusstes Steuerelement; „Anwenden" sitzt als
   solider, gleich-hoher Akzent-Button inline rechts. Mono-Platzhalter zeigt die reale Preisspanne. */
.list-side .facet-price-form{display:flex;align-items:flex-end;flex-wrap:wrap;gap:9px;margin-top:16px}
.list-side .facet-price-form .fp-field{gap:7px;flex:1 1 0;min-width:0}
.list-side .facet-price-form .fp-field span{
  font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}
.list-side .facet-price-form input{
  width:100%;height:42px;border:1px solid var(--line-strong);border-radius:var(--radius);
  background:var(--card);box-shadow:inset 0 1px 2px rgba(38,33,27,.05);
  padding:0 12px;font-family:var(--mono);font-size:14px;color:var(--ink);
  transition:border-color var(--dur-color) var(--ease),box-shadow var(--dur-color) var(--ease)}
.list-side .facet-price-form input::placeholder{color:var(--muted);font-family:var(--mono);opacity:1}
.list-side .facet-price-form input:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.list-side .facet-price-form .fp-go{
  flex:0 0 auto;align-self:flex-end;height:42px;border:1px solid var(--accent-line);border-radius:var(--radius);
  background:var(--accent-soft);box-shadow:none;
  padding:0 16px;color:var(--accent-ink);font-family:var(--sans);font-weight:600;font-size:12.5px;
  letter-spacing:.03em;cursor:pointer;
  transition:background var(--dur-color) var(--ease),border-color var(--dur-color) var(--ease),color var(--dur-color) var(--ease)}
.list-side .facet-price-form .fp-go::after{content:none}
@media(hover:hover){
  .list-side .facet-price-form .fp-go:hover{background:var(--accent);border-color:var(--accent);color:var(--cream)}
}
.list-side .facet-price-form .fp-go:active{transform:translateY(1px)}
.list-side .facet-chip{border-radius:var(--radius);min-height:32px;padding:5px 11px;font-size:11.5px;letter-spacing:.01em}
.list-side .facet-chip.is-active{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-ink);font-weight:500}

/* (Blocker 2 — beide) Produktnamen NIE sichtbar mit „…" abschneiden: fester Block aus genau zwei
   (Mobil bis drei) balancierten Zeilen, harter Block-Clip OHNE Ellipsis, Komposita nicht mitten im
   Wort gebrochen. display:block hebt die -webkit-box-Ellipsis der Basisregel auf; max-height = exakt
   n×line-height → kein Sliver der Folgezeile. */
.list-wrap .list-main .grid>.card .card-title{
  display:block;-webkit-line-clamp:none;line-clamp:none;
  text-wrap:balance;word-break:keep-all;overflow-wrap:break-word;
  hyphens:none;-webkit-hyphens:none}
@media(min-width:431px){
  .list-wrap .list-main .grid>.card .card-title{
    line-height:1.3;height:2.6em;min-height:2.6em;max-height:2.6em;overflow:hidden}
}
@media(max-width:430px){
  /* (Blocker Mobil, Iter 2) Feste 2-Zeilen-Höhe für den Namen → Preis/„lieferbar"-Zeilen fluchten
     über alle Karten (gleichmäßiger Raster-Rhythmus statt springender Höhen). Block-Clip ohne „…",
     Komposita nicht mitten im Wort. card-foot wird an die Kartenunterkante geschoben. */
  .list-wrap .list-main .grid>.card .card-title{
    line-height:1.34;height:2.68em;min-height:2.68em;max-height:2.68em;overflow:hidden;overflow-wrap:break-word}
  .list-wrap .list-main .grid>.card{display:flex;flex-direction:column}
  .list-wrap .list-main .grid>.card .card-body{flex:1 1 auto;display:flex;flex-direction:column}
  .list-wrap .list-main .grid>.card .card-foot{margin-top:auto}
}

/* (Blocker 3 — Mobil ≤560) Count+Sort nicht mehr gequetscht auf einer Zeile: „360" bekommt eigene
   baseline-bündige Präsenz (große Mono-Ziffer + Caption „ARTIKEL"), darunter ein volle-Breite-Sort-
   Steuerelement → die Zeile liest komponiert, nicht zufällig. */
@media(max-width:560px){
  .list-wrap .list-bar{flex-direction:column;align-items:stretch;gap:14px}
  .list-wrap .list-bar .list-bar-left{order:1;width:100%}
  .list-wrap .list-bar .list-bar-count{
    display:flex!important;align-items:baseline;gap:.42em;font-size:12.5px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--muted)}
  .list-wrap .list-bar .list-bar-count strong{
    font-size:27px;line-height:1;letter-spacing:-.02em;color:var(--ink)}
  .list-wrap .list-bar .sort-form{
    order:2;margin-left:0;width:100%;display:flex;align-items:center;gap:12px}
  .list-wrap .list-bar .sort-form .sort-label{flex:0 0 auto}
  .list-wrap .list-bar .sort-form .sort-sel{flex:1 1 auto;width:100%;min-height:46px}
}

/* (Blocker 4 — Mobil, 2026-06-28 Iter1) Catbar-Scroller: harter Schnitt + Chevron RAUS → echter weicher
   Alpha-Fade per mask-image auf .catbar-inner (siehe @900-Block oben). Hier nur das Rechts-Padding so weit
   öffnen, dass der letzte Eintrag vollständig unter dem Fade durchscrollt (kein mitten-im-Wort-Schnitt). */
@media(max-width:900px){
  .catbar .catbar-inner{padding-right:66px;scroll-padding-right:66px}
}

/* ===================== SHOP-LISTE — 9er-Gate-Politur (premium-web-builder, 2026-06-28) =====================
   Streng auf .list-wrap / .list-side / body:has(.list-wrap) gescoped. Höchste Source-Order (Dateiende,
   FEHLER-019) → überschreibt die früheren Karten-/Sort-/Facetten-Regeln bei gleicher Spezifität, ohne andere
   Seiten zu berühren. Hermès-Editorial-Feinschliff der sechs offenen Critic-Blocker. Reduced-Motion-Guard
   (oben, !important) bleibt unangetastet. */

/* (Blocker 1+2 — beide Viewports) Produktname: KEIN harter Block-Clip mehr (schnitt 'Kesselregelung Siegmagy'
   / 'Heizkreispumpe ohne' mitten im Satz). Echter 3-Zeilen-Clamp (-webkit-box) → fast alle Namen stehen voll;
   nur ein wirklich überlanger Name endet sauber mit „…“ an der Wortgrenze, nie als halbes Wort. Feste Mindest-
   höhe = 2 Zeilen für eine ruhige Reihen-Baseline; Fuß per margin-top:auto unten verankert. */
.list-wrap .list-main .grid>.card .card-title{
  display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:3;line-clamp:3;overflow:hidden;
  height:auto;max-height:none;
  word-break:normal;overflow-wrap:break-word;hyphens:none;-webkit-hyphens:none;text-wrap:pretty}
@media(min-width:431px){
  .list-wrap .list-main .grid>.card .card-title{
    font-size:16px;font-weight:600;line-height:1.32;min-height:2.64em;letter-spacing:-.006em;color:var(--ink)}
}

/* (Blocker 3 — Desktop) Filter-Sidebar aus „Standard-E-Commerce-Facetten“ in einen editorialen Index überführt:
   Gruppen-Titel als ruhiges Uppercase-Eyebrow, engere Typo-Skala, Counts in heller getöntem Mono, Hairline-
   Hover (Akzent-Bar + sanfter Einzug) und klar gelesener Aktiv-Zustand. Nur Desktop (Sidebar). */
@media(min-width:769px){
  .list-side .facet-drawer-body{gap:36px}
  .list-side .facet-title{
    font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
    color:var(--muted);margin:0 0 10px;padding-bottom:11px;border-bottom:1px solid var(--line)}
  .list-side .facet-list{gap:1px}
  .list-side .facet-link{
    align-items:baseline;gap:12px;padding:7px 2px 7px 0;font-size:13.5px;line-height:1.35;color:var(--ink-soft);
    border-left:2px solid transparent;
    transition:color var(--dur-color) var(--ease),padding-left var(--dur-color) var(--ease),border-color var(--dur-color) var(--ease)}
  .list-side .facet-link .facet-name{font-size:13.5px}
  .list-side .facet-link .facet-count{
    font-family:var(--mono);font-size:11px;color:var(--muted);opacity:.72;font-variant-numeric:tabular-nums;letter-spacing:0}
  .list-side .facet-link:hover{color:var(--accent);padding-left:11px;border-left-color:var(--accent-line)}
  .list-side .facet-link.is-active{color:var(--accent);font-weight:600;padding-left:11px;border-left-color:var(--accent)}
  .list-side .facet-link.is-active .facet-count{color:var(--accent-ink);opacity:.85}
}

/* (Blocker 4 — Desktop) Sortier-Select aus dem Quasi-nativen Look in die Custom-Premium-UI gehoben:
   Hanken (Sans) statt Mono, Hairline-Border + gleicher 6px-Radius wie die Filter-Chips, Chevron in --ink
   (vorher ein Slate-Blau %236e8093 = bricht das warme System). Greift auf allen Viewports (Mobil-Höhen
   aus den 768/560-Blöcken bleiben unberührt — sie setzen keine font-family/Chevron). */
.list-wrap .sort-sel{
  font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:-.005em;
  border:1px solid var(--line-strong);border-radius:var(--radius);
  background-color:var(--card);color:var(--ink);padding:9px 36px 9px 14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23574F44' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center}
@media(hover:hover){.list-wrap .sort-sel:hover{border-color:var(--accent);color:var(--accent-ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238A3E22' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}}
.list-wrap .sort-sel:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
/* Mono-Eyebrow-Label — gleiche editoriale Sprache wie Facetten-/Filter-Titel statt Sans-Grau-Beifang. */
.list-wrap .sort-label{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}
/* Desktop (Blocker 3, Iter 2): Select auf Suchfeld-Höhe heben → gleichwertige Chip-Pille neben
   Suche/Filter statt geschrumpftem nativem Dropdown. Mobil-Touch-Höhen (768/560-Blöcke) bleiben höher
   spezifisch und unberührt. */
@media(min-width:769px){
  .list-wrap .sort-form{gap:12px}
  .list-wrap .sort-sel{min-height:42px;padding-top:10px;padding-bottom:10px}
}

/* (Blocker 5 — beide) Bestand-Hinweis entrauscht: das auf allen 24 Karten wiederholte Rost-„✓ lieferbar“
   wird zu einem leisen, gedämpften Punkt + zurückgenommenem Text. Ruhe gewinnt; „angefragt“ bleibt dezent. */
.list-wrap .list-main .grid>.card .stock.in{
  color:var(--muted);font-size:12px;font-weight:400;letter-spacing:0;display:inline-flex;align-items:center;gap:6px}
.list-wrap .list-main .grid>.card .stock.in::before{
  content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--accent);opacity:.55;flex:0 0 auto}
.list-wrap .list-main .grid>.card .stock.out{color:var(--muted);font-size:12px}

/* (Blocker 6 — Mobil) Karten in der 2-spaltigen Reihe bekommen Atem: mehr Innenabstand, mehr Leading,
   größeres Foto-Feld → Marken-Eyebrow / Name / Preis stehen nicht mehr gequetscht. */
@media(max-width:430px){
  .list-wrap .list-main .grid{gap:13px}
  .list-wrap .list-main .grid>.card .card-img,
  .list-wrap .list-main .grid>.card .card-img.is-orig,
  .list-wrap .list-main .grid>.card .card-img.is-cover{aspect-ratio:5/4;padding:13px}
  .list-wrap .list-main .grid>.card .card-img.is-clean{aspect-ratio:5/4;padding:16px}
  .list-wrap .list-main .grid>.card .card-body{padding:13px 13px 15px;gap:7px}
  .list-wrap .list-main .grid>.card .card-eyebrow{margin-bottom:1px}
  .list-wrap .list-main .grid>.card .card-title{
    font-size:13.5px;line-height:1.4;min-height:2.8em;height:auto;max-height:none}
  .list-wrap .list-main .grid>.card .card-foot{padding-top:11px}
}

/* (Blocker 7 — Mobil) Chat-Pille schwamm über dem Preisbereich der rechten Karte. Auf Listen-Seiten
   (body:has(.list-wrap)) wird sie auf Mobil zur kompakten Icon-Pille (Label aus, aria-label „Chat öffnen“
   bleibt) → minimaler Fußabdruck in der Ecke statt Slab über der Karten-Meta. Andere Seiten unverändert. */
@media(max-width:768px){
  body:has(.list-wrap) #wh-chat{right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  body:has(.list-wrap) #wh-chat .whc-launcher{padding:11px;gap:0}
  body:has(.list-wrap) #wh-chat .whc-launcher-label{display:none}
}

/* ===================== SHOP-LISTE — Bild-Sättigung + Kopf-Rhythmus (premium-web-builder, finale Iteration) =====================
   Streng auf .list-wrap gescoped, höchste Source-Order (Dateiende, FEHLER-019) → überschreibt die früheren
   card-img-/list-head-Regeln bei gleicher Spezifität, ohne andere Seiten zu berühren. Behebt die drei offenen
   Blocker (kleine/ungleiche Fotos in zu großen Cream-Kacheln · loser Kopf-Rhythmus · zu kleine Mobil-Fotos)
   rein verfeinernd. Reduced-Motion-Guard (oben, !important) bleibt unangetastet. */

/* ── (Blocker 1, Desktop) Bild satt: das Foto füllt die Kachel jetzt fast randlos. Quadratische
      Foto-Bühne (Heizungsteile sind meist quadratisch/hochkant → lesen so groß & gleichwertig)
      mit knappem Padding statt breitem Cream-Rahmen. object-fit:contain bleibt (kein Crop, keine
      verzerrte Skalierung) → jedes Teil liest ähnlich groß und „satt" (Dishoom-Reichtum). ── */
@media(min-width:769px){
  .list-wrap .list-main .grid>.card .card-img,
  .list-wrap .list-main .grid>.card .card-img.is-orig,
  .list-wrap .list-main .grid>.card .card-img.is-cover{aspect-ratio:1/1;padding:clamp(7px,2.4%,13px)}
  .list-wrap .list-main .grid>.card .card-img.is-clean{aspect-ratio:1/1;padding:clamp(9px,3%,15px)}

  /* ── (Blocker 2, Desktop) Kopf-Rhythmus straffen: die Bestand-Stat sitzt mit ihrer Ziffer-Baseline
        auf der Subtitle-Zeile (Eyebrow darüber, „Artikel" baseline-bündig rechts neben der Zahl) →
        kein hoch schwebender Block mehr. Leerband über dem Raster reduziert (Kopf + Sortier-Bar
        rücken näher ans Grid). ── */
  .list-wrap .list-head{padding:8px 0 12px}
  .list-wrap .list-shell{margin-top:0}
  .list-wrap .list-head .list-count{
    display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-end;gap:0 9px;
    align-self:flex-end;text-align:right;
    font-family:var(--mono);font-weight:500;color:var(--ink);letter-spacing:-.02em;line-height:.9;
    font-size:clamp(32px,3.1vw,44px);font-variant-numeric:tabular-nums;white-space:nowrap}
  .list-wrap .list-head .list-count::before{
    flex:0 0 100%;text-align:right;
    content:"Im Bestand";font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.15em;
    text-transform:uppercase;color:var(--muted);margin:0 0 6px;line-height:1}
  .list-wrap .list-head .list-count small{
    align-self:baseline;margin:0;
    font-family:var(--sans);font-size:12.5px;font-weight:500;letter-spacing:.02em;color:var(--muted);
    text-transform:none}
  .list-wrap .list-bar{padding-bottom:13px;margin-bottom:16px}
}

/* ── (Blocker 3, Mobil) Fotos im 2-Spalten-Raster deutlich größer: quadratische Foto-Bühne (statt
      flacher 5:4) + knapperes Padding → das Bauteil liest klar erkennbar, nicht mehr ~100px klein.
      Karten-Body bleibt kompakt, damit das Foto die Karte trägt. ── */
@media(max-width:430px){
  .list-wrap .list-main .grid>.card .card-img,
  .list-wrap .list-main .grid>.card .card-img.is-orig,
  .list-wrap .list-main .grid>.card .card-img.is-cover{aspect-ratio:1/1;padding:9px}
  .list-wrap .list-main .grid>.card .card-img.is-clean{aspect-ratio:1/1;padding:12px}
  .list-wrap .list-main .grid>.card .card-body{padding:12px 12px 14px}
}

/* ===================== SHOP-LISTE — Gate-9 Politur (premium-web-builder, 2026-06-28 Iter1) =====================
   Streng auf .list-wrap / .list-side / .catbar gescoped, höchste Source-Order (Dateiende, FEHLER-019) →
   überschreibt frühere Regeln bei gleicher Spezifität, ohne andere Seiten zu berühren. WARM-PLINTHE-Foto-
   Treatment ( + Sepia/Soft-Light) bleibt unangetastet — hier nur Skalierung/Padding.
   Reduced-Motion-Guard (oben, !important) bleibt unberührt. */

/* (Blocker 1, Desktop) Motiv-Skalierung VEREINHEITLICHT: das Bauteil wird auf eine konstante Safe-Area
   normalisiert (max-height/-width im Feld) + KONSTANTES Padding statt knapp-randlosem clamp. So sitzt jedes
   Motiv optisch gleich groß auf seiner Plinthe — kleine Pumpen schweben nicht mehr winzig, breite Regler
   füllen das Feld nicht mehr randlos. object-fit/contain-Treatment bleibt; nur die Box wird beruhigt. */
@media(min-width:769px){
  .list-wrap .list-main .grid>.card .card-img,
  .list-wrap .list-main .grid>.card .card-img.is-orig,
  .list-wrap .list-main .grid>.card .card-img.is-cover{
    aspect-ratio:1/1;padding:26px;display:flex;align-items:center;justify-content:center}
  .list-wrap .list-main .grid>.card .card-img.is-clean{padding:30px}
  .list-wrap .list-main .grid>.card .card-img img{
    width:auto;height:auto;max-width:100%;max-height:84%;margin:auto;object-fit:contain}

  /* (Blocker 2, Desktop) Bestand-Stat an ein gemeinsames Kopf-Band gekoppelt: eine Haarlinie unter dem
     ganzen Kopf, auf der sowohl Titelblock als auch die Ziffer mit ihrer Grundlinie sitzen → die Zahl
     schwebt nicht mehr lose oben rechts, sondern ist am Header-Band verankert. Ziffer auf H1-Skala
     zurückgenommen, damit sie den Titel begleitet statt ihn zu überragen. */
  .list-wrap .list-head{
    align-items:flex-end;padding:8px 0 16px;
    border-bottom:1px solid var(--line);margin-bottom:22px}
  .list-wrap .list-head .list-count{
    font-size:clamp(28px,2.7vw,38px);line-height:.86}
  .list-wrap .list-head .list-count::before{margin:0 0 5px}
}

/* (Blocker 3, Mobil) Count nicht mehr als großer Stat neben dem Sortieren — Ziffer zurückgenommen,
   damit die (gestapelte) Steuerzeile ruhig komponiert liest statt zu konkurrieren. */
@media(max-width:560px){
  .list-wrap .list-bar .list-bar-count{font-size:11.5px;letter-spacing:.1em;gap:.5em}
  .list-wrap .list-bar .list-bar-count strong{font-size:19px;letter-spacing:0}
}

/* (Blocker 4, Mobil) Catbar-Scroller bekommt eine klare Rechts-Affordanz: weicher Veil in der EXAKTEN
   Bandfarbe (--surface → kein Farbkanten-Risiko) + zarter Chevron als „weiter scrollen"-Andeutung, damit
   der letzte Eintrag (z. B. Gaskombiregler) als scrollbar statt abgeschnitten liest. Mask-Fade (oben) bleibt. */
@media(max-width:900px){
  .catbar::after{content:"\203A";position:absolute;top:0;right:0;bottom:0;width:38px;z-index:3;
    display:flex;align-items:center;justify-content:flex-end;padding-right:13px;
    font-family:var(--sans);font-size:19px;font-weight:400;color:var(--muted);pointer-events:none;
    background:linear-gradient(90deg,rgba(232,226,214,0),var(--surface) 62%)}
}

/* (Blocker 5, beide) Verfügbarkeits-Indikator detaillierter & weniger kontaktarm: Punkt + Label leicht
   vergrößert, etwas mehr Abstand zur Preiszeile → sauberere Detailpräzision auf Premium-Niveau. */
.list-wrap .list-main .grid>.card .card-foot{padding-top:15px;gap:8px 12px}
.list-wrap .list-main .grid>.card .stock.in{font-size:12.5px;gap:7px;color:var(--ink-soft)}
.list-wrap .list-main .grid>.card .stock.in::before{width:7px;height:7px;opacity:.8}
.list-wrap .list-main .grid>.card .stock.out{font-size:12.5px}
@media(max-width:430px){
  .list-wrap .list-main .grid>.card .card-foot{gap:7px;padding-top:11px}
}

/* ===================== SHOP-LISTE — Gate-9 Politur, Iteration 2 (premium-web-builder, 2026-06-28) =====================
   Streng auf .list-wrap / .list-side / .catbar gescoped. HÖCHSTE Source-Order (Dateiende, FEHLER-019) →
   überschreibt alle früheren Karten-/Kopf-/Facetten-/Catbar-Regeln bei gleicher Spezifität, ohne andere
   Seiten zu regressen. WARM-PLINTHE-Foto-Treatment (multiply+Sepia/Soft-Light) bleibt unangetastet — hier
   nur Box-/Padding-/Layout-Feinschliff. Reduced-Motion-Guard oben (!important) bleibt unberührt.
   Behebt die sieben offenen Critic-Blocker der Runde D8.4/M8.1. */

/* (Blocker 1 — beide) Foto füllt die Plinthe satt: 84%-Höhendeckel RAUS, Padding 26→14px → das Bauteil
   trägt die Kachel statt winzig in totem Cream zu schweben. contain bleibt (kein Crop, kein Verzerren). */
@media(min-width:769px){
  .list-wrap .list-main .grid>.card .card-img,
  .list-wrap .list-main .grid>.card .card-img.is-orig,
  .list-wrap .list-main .grid>.card .card-img.is-cover{
    aspect-ratio:1/1;padding:14px;display:flex;align-items:center;justify-content:center}
  .list-wrap .list-main .grid>.card .card-img.is-clean{padding:18px}
  .list-wrap .list-main .grid>.card .card-img img{
    width:auto;height:auto;max-width:100%;max-height:100%;margin:auto;object-fit:contain}
}
@media(max-width:430px){
  .list-wrap .list-main .grid>.card .card-img,
  .list-wrap .list-main .grid>.card .card-img.is-orig,
  .list-wrap .list-main .grid>.card .card-img.is-cover{aspect-ratio:1/1;padding:8px}
  .list-wrap .list-main .grid>.card .card-img.is-clean{padding:11px}
  .list-wrap .list-main .grid>.card .card-img img{
    width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}
}

/* (Blocker 2+3 — beide) Produktname EINHEITLICH genau 2 Zeilen mit fester Höhe → jede Karte gleich hoch,
   Preis-/Fußzeile fluchtet über die ganze Reihe (margin-top:auto verankert den Fuß unten). KEIN Misch-Look
   mehr aus „…“-Trunkat hier und 3-Zeilen-Umbruch dort: überall identischer 2-Zeilen-Clamp. */
.list-wrap .list-main .grid>.card .card-title{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  overflow:hidden;text-overflow:ellipsis;
  word-break:normal;overflow-wrap:break-word;hyphens:none;-webkit-hyphens:none;text-wrap:normal}
@media(min-width:431px){
  .list-wrap .list-main .grid>.card .card-title{
    font-size:16px;font-weight:600;line-height:1.34;
    height:2.68em;min-height:2.68em;max-height:2.68em;letter-spacing:-.006em;color:var(--ink)}
}
@media(max-width:430px){
  .list-wrap .list-main .grid>.card .card-title{
    font-size:13.5px;line-height:1.36;height:2.72em;min-height:2.72em;max-height:2.72em}
}
.list-wrap .list-main .grid>.card{display:flex;flex-direction:column}
.list-wrap .list-main .grid>.card .card-body{flex:1 1 auto;display:flex;flex-direction:column}
.list-wrap .list-main .grid>.card .card-foot{margin-top:auto}

/* (Blocker 4 — beide) Wiederholtes „✓ lieferbar“ auf JEDER Karte = Rauschen → ganz aus dem Raster
   genommen. Der seltene verkaufte Artikel trägt sein eigenes Signal (Verkauft-Badge + durchgestrichener
   Preis + Ausgrauen). Karten-Fuß = ruhig nur Preis (Hermès/SSENSE-Editorial). */
.list-wrap .list-main .grid>.card .stock.in,
.list-wrap .list-main .grid>.card .stock.out,
.list-wrap .list-main .grid>.card .card-stock{display:none!important}
.list-wrap .list-main .grid>.card .card-foot{padding-top:13px;gap:0}

/* (Blocker 6 — Mobil) Trefferzahl raus aus der gequetschten Bar-Mitte → als leise Metazeile unter den
   H1-Untertitel gehängt; die Bar trägt nur noch Filter (volle Zeile) + Sortieren (volle Zeile). */
@media(max-width:768px){
  .list-wrap .list-head{flex-direction:column;align-items:flex-start;gap:8px;padding:6px 0 18px}
  .list-wrap .list-head .lh-text{max-width:none}
  .list-wrap .list-head .list-count{
    display:flex!important;order:3;align-self:flex-start;justify-content:flex-start;
    align-items:baseline;gap:.4em;margin:-2px 0 0;
    font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.05em;
    color:var(--muted);line-height:1.2;text-align:left}
  .list-wrap .list-head .list-count::before{content:none}
  .list-wrap .list-head .list-count small{
    display:inline;margin:0;font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;color:var(--muted)}
  .list-wrap .list-bar{
    display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;
    gap:12px;padding-bottom:14px;margin-bottom:18px}
  .list-wrap .list-bar .list-bar-left,
  .list-wrap .list-bar .list-bar-count{display:none!important}
  .list-wrap .list-bar .list-filter-btn{order:0;flex:0 0 100%}
  .list-wrap .list-bar .sort-form{order:1;margin-left:0;width:100%;display:flex;align-items:center;gap:12px}
  .list-wrap .list-bar .sort-form .sort-label{flex:0 0 auto}
  .list-wrap .list-bar .sort-form .sort-sel{flex:1 1 auto;width:100%;min-height:46px}
}

/* (Blocker 7 — Desktop) Filter-Sidebar atmet: mehr Zeilenabstand, hellere Counts, Preis-Chips enger
   gruppiert → editorialer Index statt dichtes SaaS-Filter-Widget. */
@media(min-width:769px){
  .list-side .facet-drawer-body{gap:44px}
  .list-side .facet-list{gap:4px}
  .list-side .facet-link{padding-top:9px;padding-bottom:9px;font-size:13px}
  .list-side .facet-link .facet-count{opacity:.5;font-weight:400}
  .list-side .facet-title{margin-bottom:13px;padding-bottom:13px}
  .list-side .facet-price{gap:7px;margin-top:2px}
  .list-side .facet-chip{min-height:30px;padding:5px 10px}
}

/* (Blocker 5 — Mobil) Catbar-Scroller: unmissverständliche Scroll-Affordanz statt „abgeschnitten“ —
   ein runder Chevron-Pill-Knopf (Card-Grund, Haarlinie, Akzent-Pfeil, weicher Schatten) sitzt rechts am
   Bandrand. Der weiche Mask-Fade (oben) lässt den letzten Eintrag dahinter PEEKEN → liest als „weiter
   scrollen“, nicht als Mitten-im-Wort-Schnitt. Pill liegt auf .catbar (unmaskiert), voll deckend. */
@media(max-width:900px){
  .catbar{position:relative}
  .catbar::after{
    content:"";position:absolute;top:50%;right:11px;transform:translateY(-50%);
    width:30px;height:30px;border-radius:50%;z-index:4;pointer-events:none;
    border:1px solid var(--line-strong);background-color:var(--card);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12'%3E%3Cpath d='M1.6 1l5 5-5 5' fill='none' stroke='%239A4528' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:center;
    box-shadow:0 5px 14px -7px rgba(38,33,27,.45)}
  /* Mask-Fade etwas zarter, damit hinter dem Pill ein klarer Peek (nicht harter Cut) liegt. */
  .catbar .catbar-inner{padding-right:54px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),rgba(0,0,0,.35) 100%);
            mask-image:linear-gradient(90deg,#000 calc(100% - 40px),rgba(0,0,0,.35) 100%)}
}

/* (Catbar — Gate-9 Iter2, premium-web-builder) Letzter Eintrag soll NICHT unter dem Chevron-Pill
   hart trunkieren: Mask läuft jetzt VOLL auf transparent und endet bereits links des Pills, sodass das
   Label sauber ausblendet, bevor es den Knopf erreicht. Der Pill ist reines Affordance-Overlay über
   dem bereits leeren Rand — er überdeckt kein lesbares Wort mehr. Großzügiges Rechts-Padding gibt dem
   letzten Eintrag Auslauf, damit er am Scroll-Ende vollständig (unmaskiert) liest. HÖCHSTE Source-Order
   (Dateiende, FEHLER-019). */
@media(max-width:900px){
  .catbar .catbar-inner{padding-right:92px;scroll-padding-right:92px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 86px),transparent calc(100% - 38px));
            mask-image:linear-gradient(90deg,#000 calc(100% - 86px),transparent calc(100% - 38px))}
  .catbar::after{right:12px}
}

/* ===================== HERMÈS-EDITORIAL FINALE (premium-web-builder, 2026-06-30) =====================
   Letzte globale Craft-Lage. Streng additiv & verfeinernd, höchste Source-Order (Dateiende, FEHLER-019).
   KEINE Bild-Eingriffe (Tabu: Produktfotos original/volle Farbe). Hero + Spiral-Logo unangetastet.
   Reduced-Motion-Guard (oben, !important) deaktiviert alle hier ergänzten Transitions/Transforms.
   Adressiert die kreuzschneidenden Kill-List-Punkte: Eyebrow-System, Stat-/Ledger-Präsenz, Karten-
   Hierarchie, Buttons/Links-States, Custom-Checkbox, Pagination, Footer-Touch/Heads, Legal-Maß/Rhythmus,
   vertikaler 8er-Rhythmus, Mono-Trust-Präfix. EIN Easing (--ease), eine Abstandssprache. */

/* 1) EYEBROW-SYSTEM — eine Stimme über alle Sektionen: Akzent-Quadrat-Punkt davor, etwas mehr
   Tracking, ruhige Tinte. Scoped auf Sektions-/Listenköpfe (Hero hat eigene, spezifischere Regel;
   .light/Footer/Legal-Marginalien bleiben dot-frei). */
.section .eyebrow,.section-head .eyebrow,.list-head .eyebrow,.story-text .eyebrow,
.contact-card .eyebrow,.hub-intro .eyebrow{
  display:inline-flex;align-items:center;gap:9px;letter-spacing:.02em;font-weight:600;color:var(--ink-soft)}
.section .eyebrow::before,.section-head .eyebrow::before,.list-head .eyebrow::before,
.story-text .eyebrow::before,.contact-card .eyebrow::before,.hub-intro .eyebrow::before{
  content:"";width:7px;height:7px;border-radius:2px;background:var(--accent);flex:0 0 auto}

/* 2) SEKTIONS-H2 — eine Spur enger gesetzt, klar der Page-H1 untergeordnet (Kontakt-Kill-List:
   Section-H2 konkurrierte mit H1). Gilt für die Sans-Sektionsköpfe; Display-H1-Momente unberührt. */
.section-head h2,.contact-card h2,.hub-intro h2{letter-spacing:-.014em}

/* 3) STAT-/LEDGER-FIGUREN — Mono-Zahlen tragen optisches Gewicht, Labels mit mehr Tracking.
   Greift auf vorhandene Home-/Listen-Ledger (fact-num/fact-lbl, list-count) ohne Layout-Bruch. */
.fact-num,.ds-kennwerte .ds-kw-val{letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fact-lbl,.ds-kennwerte .ds-kw-lbl{letter-spacing:.04em}
/* Einheit (m / m³/h) tritt hinter die Zahl zurück — die Zahl bleibt der Held (post-Kill-List). */
.ds-kennwerte .ds-kw-unit{opacity:.62;font-weight:400}

/* 4) KARTEN-HIERARCHIE — Marke als leise Mono-Eyebrow oben, Preis trägt das Gewicht (Ink),
   etwas mehr Innenruhe. Marke/Titel/Preis lesen als drei Stufen statt einer Fläche. */
.card-body .card-brand{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:500;line-height:1.2}
.card-foot .price{font-size:17.5px;letter-spacing:-.012em;color:var(--ink)}

/* 5) SEKUNDÄR-/PFEIL-LINKS — animierte Haarlinien-Unterstreichung (rein scaleX, kompositorsicher).
   Hebt „So prüfen wir →", Section-Head-Links, 404-Ghost-Link aus dem beiläufigen Default. */
.hero-link,.section-head a,.notfound .nf-cats a,.story-cta .btn.tertiary,.hub-faq a{position:relative}
.hero-link::after,.section-head a::after,.notfound .nf-cats a::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform var(--dur-hover) var(--ease)}
@media(hover:hover){
  .hero-link:hover::after,.section-head a:hover::after,.notfound .nf-cats a:hover::after{transform:scaleX(1)}
}

/* 6) BUTTONS — ablesbarer Fokus-Ring (über Tap immer sichtbar), Pfeil-Microshift im Primär-CTA. */
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn .btn-arrow,.btn [aria-hidden="true"]{transition:transform var(--dur-hover) var(--ease)}
@media(hover:hover){.btn:not(.ghost):hover .btn-arrow,.btn:not(.ghost):hover [aria-hidden="true"]{transform:translateX(3px)}}

/* 7) CUSTOM CHECKBOX (Kontakt-Consent) — letztes natives Control editorialisiert: Haarlinie, 2px-Radius,
   Akzent-Tick, AA-Fokusring. accent-color bleibt als Fallback bestehen. */
@supports(appearance:none){
  .cf-consent input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:18px;height:18px;
    border:1px solid var(--line-strong);border-radius:2px;background:var(--field);cursor:pointer;
    margin:.18em .6em 0 0;flex:0 0 auto;position:relative;transition:border-color var(--dur-color) var(--ease),
    background-color var(--dur-color) var(--ease)}
  .cf-consent input[type="checkbox"]:hover{border-color:var(--accent)}
  .cf-consent input[type="checkbox"]:checked{background:var(--accent);border-color:var(--accent)}
  .cf-consent input[type="checkbox"]:checked::after{content:"";position:absolute;left:5px;top:1.5px;
    width:5px;height:9px;border:solid var(--cream);border-width:0 2px 2px 0;transform:rotate(43deg)}
  .cf-consent input[type="checkbox"]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
}

/* 8) PAGINATION — aktive Seite trägt den Display-Serif-Akzent, mehr Luft, Mono-Ziffern fluchten.
   Haarlinie darüber existiert bereits (.pager border-top). */
.pager-num.is-current,.pager-num[aria-current="page"]{font-family:var(--display);font-size:16px;
  color:var(--ink);border-bottom-color:var(--accent)}
.pager{gap:8px 16px}
.pager-pages{gap:6px}

/* 9) TRUST-PRÄFIX „//" — Mono statt Literal-Häkchen (einheitliche Protokoll-Sprache). */
.trust-item .trust-ic{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:-.04em;
  background:transparent;color:var(--accent);width:auto;height:auto;margin-top:0;border-radius:0}

/* 10) FOOTER — Spaltenköpfe als Mono-Eyebrow (caps/tracking), Mobil-Touch ≥44px, ruhiger Rhythmus. */
.site-footer h4{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft)}

/* 11) LEGAL — ruhiges Lese-Maß (~64ch) für die Bleiwüste; Sektionsköpfe mit etwas mehr Oberluft. */
.legal,.prose.legal{max-width:66ch}
.prose.legal h2,.prose.legal h3{margin-top:var(--s-4)}

/* 12) INTERAKTIVE HAARLINIEN-ZEILEN — gemeinsamer Hover-Unterstrich + sichtbarer Fokus auf
   Akkordeon-/Listen-Links (Produkt-„So läuft der Kauf"-Zeilen, Kontakt-Zeilen, Footer). */
.pb-row a,.contact-lines a,.afilter:focus-visible{border-radius:2px}
.pb-row a:focus-visible,.contact-lines a:focus-visible,.site-footer a:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}

/* 13) GHOST-/SEKUNDÄR-BUTTON Hover — tonale Vertiefung statt nur Randfarbe (404/Home CTA-Paar). */
@media(hover:hover){.btn.ghost:hover{background:var(--accent-soft)}}

/* ===================== MOBILE FINALE (≤640px, Touch-Disziplin) ===================== */
@media(max-width:640px){
  /* Footer-Links als echte 44px-Touchziele. */
  .site-footer a{min-height:44px;display:flex;align-items:center;padding:7px 0}
  .site-footer h4{min-height:0}
  /* Inline-Chat-/Prosa-Links im Footer-/Checkout-Kontext mindestens tastbar. */
  .foot-contact a{min-height:44px;display:inline-flex;align-items:center;padding:6px 0}
  /* Mehr horizontale Marge für die selbstsichere Luft des Desktops. */
  .wrap{padding:0 22px}
  /* Lead-Maß auf dem Handy etwas luftiger. */
  .legal,.prose.legal{line-height:1.7}
}

/* ===================== WARM-DEPTH POLISH (2026-06-30) =====================
   Inhaber: Seite „zu weiß / zu farblos / comic-mäßig / Schatzkarte". Diagnose: zu schmaler,
   zu grauer Tonumfang + fast kein sichtbarer Akzent + flache, schattenlose Flächen.
   Antwort (alles HELL & im warmen Rost-System, KEIN Verdunkeln, KEINE Bildfilter):
   gestufte warme Töne (Tokens vertieft), präsente Haarlinien/Schatten = Materialtiefe,
   der EINE Rost-Akzent als Mikro-Detail (Kicker/Saum/Naht), reiche Sektionsübergänge.
   Höchste Source-Order (Dateiende, FEHLER-019). Produktfotos/Hero/Logo unangetastet. */

/* A) HEADER — als eigene Materiallage abgesetzt: warmer Tiefenschatten + feiner Akzent-Saum unten,
   Kategorieleiste mit Creme-Highlight oben (liest plastisch, nicht als flacher Tan-Streifen). */
.site-header{box-shadow:0 1px 0 var(--line-strong),0 16px 32px -26px rgba(60,38,20,.50)}
.catbar{background:var(--surface);border-top:1px solid var(--line-strong);
  box-shadow:inset 0 1px 0 rgba(249,242,223,.55),inset 0 -2px 0 -1px var(--accent-line)}
.catbar-inner a:hover,.catbar-inner a.on{color:var(--ink)}
.catbar-inner a.on{border-bottom-width:2px;border-bottom-color:var(--accent)}

/* B) SEKTIONSKOPF — editorialer Rost-Kicker (kurze Akzentlinie) über jedem Kopf: bringt sichtbare
   Farbe + editoriale Selbstsicherheit, ohne Akzentfläche. Site-weit (home/product/category/cart). */
.section-head{position:relative}
.section-head::before{content:"";display:block;width:34px;height:3px;border-radius:2px;
  background:var(--accent);margin:0 0 18px;opacity:.92}
.section--deep .section-head::before{opacity:.88}

/* C) TONALE BÄNDER — reiche Naht: präsente obere Haarlinie + warmer Creme-Glanz innen oben
   (Material-Kante statt flacher Stoß zweier gleicher Beigeflächen). */
.section--deep,.value-sec,.story,.fact-band,.brand-strip{
  box-shadow:inset 0 1px 0 rgba(249,242,223,.5)}
.section--deep,.value-sec,.story{border-top:1px solid var(--line-strong)}

/* D) KARTEN/GRID — Materialhebung: Haarlinien-Grid bekommt einen weichen Außenschatten als ganzes
   Objekt; Featured-Karten lupfen klarer mit warmem Schatten + Akzent-Hairline unterm Foto beim Hover. */
.steps-band,.value-grid,.kategorie-index{box-shadow:var(--shadow-soft)}
.featured-sec .grid .card{box-shadow:var(--shadow-soft)}
@media(hover:hover){
  .featured-sec .grid .card:hover{box-shadow:var(--shadow-card);border-color:var(--line-strong)}
  .featured-sec .grid .card:hover .card-img{border-bottom-color:var(--accent)}
}

/* E) PRODUKT — Galerie als gerahmtes Foto-„Mount" (warme Platte + Innenschatten + weicher Außenschatten),
   damit das Bauteil nicht in einem flachen Tan-Void schwebt. Buybox: Preis mit Akzent-Kicker, klare Naht. */
.gallery-main{background:var(--plate);box-shadow:var(--shadow-soft),inset 0 0 0 1px rgba(60,38,20,.05);
  border-color:var(--line-strong)}
.thumb.active,.thumb.is-active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.buybox .pb-price{position:relative;padding-left:16px}
.buybox .pb-price::before{content:"";position:absolute;left:0;top:.12em;bottom:.12em;width:3px;
  border-radius:2px;background:var(--accent)}

/* F) FOOTER — warmer Anker (kein dunkler Grund): selbstbewusster Akzent-Saum oben, tieferer
   Spaltenraum, Spaltenköpfe mit Rost-Tick. Liest als Fundament, nicht als weiterer blasser Streifen. */
.site-footer{background:var(--band-clay);border-top:2px solid var(--accent)}
.footer-top{background:var(--surface);border-bottom:1px solid var(--line-strong)}
.footer-grid{box-shadow:inset 0 1px 0 rgba(249,242,223,.4)}
.site-footer h4{position:relative;padding-left:14px}
.site-footer h4::before{content:"";position:absolute;left:0;top:.18em;width:5px;height:5px;
  border-radius:1.5px;background:var(--accent)}
.foot-bottom{border-top:1px solid var(--line-strong);background:rgba(60,38,20,.04)}

/* G) Akzent-Mikrodetails, die Farbe in die ruhige Fläche tragen (klein, nie Fläche). */
.crumbs a{color:var(--accent-ink)}
.crumbs a:hover{color:var(--accent-dk)}
.pb-sku{border-bottom-color:var(--line-strong)}

/* H) FOTO-PLINTHEN — die roten Studio-Fotos satter ins warme Feld setzen: tieferer Plattenton (Token)
   + sehr feiner Innenschatten-Rahmen (kein Filter aufs Foto, nur das Feld DARUNTER rahmt).
   Adressiert Kill-List 2/4 (rote Kacheln „schwimmen" auf Fast-Creme). */
.card-img,.step-cell .step-photo,.cat-tile-bg,.kat-thumb{
  box-shadow:inset 0 1px 3px rgba(60,38,20,.06)}