/* FELIX theme stylesheet — generated by tools/build-css.py, do not edit by hand.
   Sources: assets/css/{v2,fonts,v5,product,category,light-sections,cart,theme}.css */

/* ===== v2.css (pruned) ===== */
:root{
  --paper:   #ffffff;   /* clean white body           */
  --paper-2: #f2f3f4;   /* clean light grey for card/image tiles (cool neutral) */
  --white:   #ffffff;
  --ink:     #211d18;   /* warm near-black (display)  */
  --ink-2:   #4c4339;   /* body text                  */
  --muted:   #8a7f70;   /* secondary text             */
  --line:    #e7e9eb;   /* clean cool-neutral hairline */
  --sand:    #efe4d2;   /* sand panel                 */
  --clay:    #ecd8c6;   /* soft terracotta            */
  --lilac:   #e6dce6;   /* dusty mauve panel          */
  --sage:    #dbe2d3;   /* soft sage                  */
  --forest:  #2c3a30;   /* deep green dark panel      */
  --forest-2:#37493c;
  --char:    #424242;   /* cool charcoal (modern dark panels) */
  --char-2:  #474747;
  --mist:    #eef0f2;   /* cool light grey panel      */
  --gold-dk: #ff8088;   /* bright red for eyebrows on dark surfaces */
  --brass:   #c31622;   /* FELIX brand red (from logo) — accent */
  --brass-br:#ff8088;   /* brighter red (hover / highlight) */
  --brass-d: #9e1119;   /* deep red (prices / eyebrows on light) */

  --maxw: 1200px;
  --r-xl: 34px; --r-lg: 26px; --r-md: 18px; --r-sm: 12px; --pill: 999px;
  --ease: cubic-bezier(.22,.68,.16,1);
  --shadow-sm: 0 2px 10px rgba(56,40,20,.05);
  --shadow-md: 0 14px 40px -18px rgba(56,40,20,.28);
  --shadow-lg: 0 30px 70px -30px rgba(56,40,20,.4);

  --serif: "Fraunces", Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, sans-serif;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--paper); color:var(--ink-2);
  font-family:var(--sans); font-weight:400; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--serif); color:var(--ink); font-weight:500; line-height:1.05; letter-spacing:-.01em; }
.kicker{
  display:inline-block; font-family:var(--sans); font-size:.7rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--brass-d);
}
.kicker.dot::before{ content:"● "; color:var(--brass); font-size:.6em; vertical-align:middle; }
.btn{
  display:inline-flex; align-items:center; gap:.6rem; justify-content:center;
  font-family:var(--sans); font-size:.86rem; font-weight:600; letter-spacing:.01em;
  padding:.95rem 1.7rem; border-radius:var(--pill); cursor:pointer; border:1.5px solid transparent;
  transition:transform .3s var(--ease), background .3s, color .3s, border-color .3s, box-shadow .3s;
}
.btn .arr{ transition:transform .3s var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }
.btn-dark{ background:var(--ink); color:var(--paper-2); }
.btn-dark:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); background:#000; }
.btn-brass{ background:var(--brass); color:#fff; }
.btn-brass:hover{ background:var(--brass-d); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.nav{ display:flex; gap:.4rem; }
.nav a{
  font-size:.85rem; font-weight:500; color:var(--ink-2); padding:.5rem .9rem; border-radius:var(--pill);
  transition:.25s var(--ease);
}
.nav a:hover{ background:var(--paper-2); color:var(--ink); }
.ic{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--white);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink);
  font-size:1rem; transition:.25s var(--ease); position:relative;
}
.ic:hover{ background:var(--ink); color:var(--paper-2); border-color:var(--ink); }
.ic .dot{ position:absolute; top:-3px; right:-3px; min-width:17px; height:17px; padding:0 4px;
  background:var(--brass); color:#fff; font-size:.62rem; font-weight:600; border-radius:var(--pill);
  display:flex; align-items:center; justify-content:center; }
.burger{ display:none; width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
  background:var(--white); cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.burger span{ width:16px; height:1.5px; background:var(--ink); transition:.3s; }
.hero{ position:relative; overflow:hidden; padding:2.5rem 0 3rem; }
.hero h1{ font-size:clamp(2.4rem,6.8vw,5rem); letter-spacing:-.025em; overflow-wrap:break-word; }
.hero h1 .ital{ font-style:italic; font-weight:400; color:var(--ink); }
@keyframes float{ 0%,100%{ transform:translateY(-50%) rotate(-14deg);} 50%{ transform:translateY(-56%) rotate(-14deg);} }
.chip{
  position:absolute; z-index:3; background:rgba(253,250,244,.86); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.7); border-radius:var(--r-md); padding:.75rem 1rem;
  box-shadow:var(--shadow-md); animation:floatChip 7s ease-in-out infinite;
}
.chip .t{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.chip .v{ font-family:var(--serif); font-size:1.25rem; color:var(--ink); line-height:1.1; }
.chip.c2{ bottom:10%; left:2%; animation-delay:-2s; }
@keyframes floatChip{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
.marquee{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper-2); overflow:hidden; padding:1.2rem 0; }
@keyframes scrollX{ to{ transform:translateX(-50%); } }
.sec{ padding:5.5rem 0; }
.panel{ border-radius:var(--r-xl); overflow:hidden; display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.panel.dark{ background:var(--char); }
.panel.dark .kicker{ color:var(--gold-dk); }
.quality{ background:var(--char); color:#c3c4c8; border-radius:var(--r-xl); padding:clamp(2.4rem,5vw,4.5rem); position:relative; overflow:hidden; }
.quality::before{ content:""; position:absolute; width:420px; height:420px; border-radius:50%; background:var(--char-2); top:-160px; right:-120px; filter:blur(10px); opacity:.6; }
.quality h2{ color:#fff; font-size:clamp(2rem,4vw,3rem); }
.quality .kicker{ color:var(--gold-dk); }
.story{ position:relative; border-radius:var(--r-xl); overflow:hidden; min-height:440px; display:flex; align-items:center; }
.story img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.story blockquote{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(1.6rem,3.4vw,2.5rem); line-height:1.25; margin:1rem 0 1.6rem; }
.play{ display:inline-flex; align-items:center; gap:.8rem; color:#fff; font-weight:500; font-size:.9rem; }
.news{ background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(2.4rem,5vw,4rem); text-align:center; position:relative; overflow:hidden; }
.news h2{ font-size:clamp(2rem,4vw,3rem); }
.news p{ color:var(--ink-2); margin:.9rem auto 1.8rem; max-width:34rem; }
.news form{ display:flex; gap:.6rem; max-width:30rem; margin:0 auto; background:var(--white); border-radius:var(--pill); padding:.4rem .4rem .4rem 1.3rem; box-shadow:var(--shadow-sm); }
.news input{ flex:1; border:none; background:none; font-family:var(--sans); font-size:.95rem; color:var(--ink); }
.news input:focus{ outline:none; }
.news .btn{ flex:none; }
@media (prefers-reduced-motion: reduce){.chip{ animation:none !important; }}
.scrim{ position:fixed; inset:0; background:rgba(30,20,10,.4); backdrop-filter:blur(2px); opacity:0; visibility:hidden; transition:.3s; z-index:85; }
.scrim.show{ opacity:1; visibility:visible; }
@media(max-width:960px){.nav{ display:none; }
.burger{ display:flex; }
.panel{ grid-template-columns:1fr; }}
@media(max-width:540px){.sec{ padding:3.8rem 0; }
.ic{ width:38px; height:38px; }}

/* ===== fonts.css ===== */
/* ============================================================
   FELIX Solingen — BRAND FONTS (matches the live site)
   Museo Slab  → headings/display   (live: "Museo Slab W01_500")
   Museo Sans  → body / UI          (live: "Museo Sans W01_500/900")
   Self-hosted woff2 pulled from felix-solingen.de for the prototype.
   Overrides v2.css --serif/--sans, so load AFTER v2.css.
   ============================================================ */

@font-face{ font-family:"Museo Slab"; src:url("../fonts/museo-slab-500.woff2") format("woff2");
  font-weight:300 600; font-style:normal; font-display:swap; }
@font-face{ font-family:"Museo Sans"; src:url("../fonts/museo-sans-500.woff2") format("woff2");
  font-weight:300 600; font-style:normal; font-display:swap; }
@font-face{ font-family:"Museo Sans"; src:url("../fonts/museo-sans-900.woff2") format("woff2");
  font-weight:700 900; font-style:normal; font-display:swap; }

:root{
  --serif: "Museo Slab", Georgia, serif;
  --sans:  "Museo Sans", system-ui, -apple-system, sans-serif;
}


/* ===== v5.css ===== */
/* ============================================================
   FELIX Solingen — V5  (dark prototype canvas)
   Hero = "Minimal + Strip" (chosen from hero-lab).
   Below: full-bleed DARK "Finden Sie Ihre Klinge" — the knives
   go huge so the craft (etch, grain, damascus) can be enjoyed.
   Uses v2.css tokens (--serif/--sans/--brass/--ease…).
   ============================================================ */

/* --boxw = the shared "Boxed" content width (the virtual-tour width).
   BOXED = --boxw, centered w/ --boxpad gutters (tour, Kundenlieblinge).
   FULL  = edge-to-edge full-bleed (hero, Serien). */
body.v5{ background:#333333; color:#e9eaec; --boxw:1700px; --boxpad:clamp(1rem,3vw,2rem); }
.v5 .eyebrow{ font:600 .72rem/1 var(--sans); letter-spacing:.28em; text-transform:uppercase; color:var(--brass-br); }

/* ============================================================
   HERO — full-bleed cinematic · minimal center + bottom strip
   ============================================================ */
.h5{ position:relative; overflow:hidden; background:#2e2e2e; color:#fff; height:clamp(660px,99vh,1034px); }
.h5-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.h5-veil{ position:absolute; inset:0; z-index:1; background:
  radial-gradient(80% 74% at 50% 42%, rgba(8,9,11,.30), rgba(8,9,11,.66)),
  linear-gradient(to top, rgba(8,9,11,.74), transparent 30%); }

/* fixed nav overlapping the hero — transparent at top, solid on scroll / mega-open */
.h5-nav{ position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; padding:1.6rem clamp(1.5rem,4vw,3rem);
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease), padding .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
/* becomes solid when scrolled, or when a mega is hovered/open (even at the top) */
.h5-nav.scrolled,
.h5-nav:has(.has-mega:hover),
.h5-nav:has(.has-mega.open){
  background:rgba(46,46,46,.9); backdrop-filter:blur(14px); border-bottom-color:rgba(255,255,255,.08); }
.h5-nav.scrolled{ padding-top:1rem; padding-bottom:1rem; box-shadow:0 12px 34px rgba(0,0,0,.45); }
.h5-logo-link{ display:inline-flex; align-items:center; }
.h5-logo{ height:50px; width:auto; display:block; }
.h5-nav ul{ display:flex; gap:1.5rem; list-style:none; margin:0; padding:0; }
.h5-nav a{ color:rgba(255,255,255,.82); text-decoration:none; font:500 .9rem/1 var(--sans); }
.h5-nav a:hover{ color:#fff; }
.h5-right{ display:flex; align-items:center; gap:1.4rem; }
/* nav icon buttons (account + cart) */
.h5-icons{ display:flex; align-items:center; gap:.25rem; }
.h5-icon{ position:relative; width:40px; height:40px; cursor:pointer;
  background:transparent; border:none; color:#fff;
  display:inline-flex; align-items:center; justify-content:center; transition:.2s var(--ease); }
.h5-icon:hover{ opacity:.72; }
.h5-cart-dot{ position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 4px;
  border-radius:9px; background:var(--brass); color:#fff; font:600 .66rem/18px var(--sans); text-align:center; }
@media(max-width:1199px){ .h5-nav ul{ display:none; } .h5-right{ gap:0; } } /* below 1200 the seven items no longer fit beside logo + icons → burger */
.h5-nav ul > li > a{ white-space:nowrap; }

/* ---------- Floating cart (persistent shopping cue) ---------- */
.cart-fab{ position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); z-index:120;
  width:58px; height:58px; border-radius:50%; cursor:pointer; border:none; background:var(--brass); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 12px 30px rgba(0,0,0,.4); transition:transform .2s var(--ease), box-shadow .2s var(--ease); }
.cart-fab:hover{ transform:translateY(-3px); box-shadow:0 16px 38px rgba(0,0,0,.5); }
.cart-fab-dot{ position:absolute; top:-5px; right:-5px; min-width:22px; height:22px; padding:0 5px;
  border-radius:11px; background:#fff; color:#3d3d3d; font:700 .72rem/22px var(--sans); text-align:center;
  border:2px solid #333333; box-shadow:0 2px 8px rgba(0,0,0,.45); }

.h5-center{ position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:0 1.5rem 5rem; }
.h5-center .eyebrow{ margin-bottom:1.4rem; }
/* the small red line sits on photos: lighter red + soft shadow so it stays readable on light images */
.h5 .h5-center .eyebrow{ color:#ff8088; text-shadow:0 1px 2px rgba(0,0,0,.7), 0 0 10px rgba(0,0,0,.75), 0 0 22px rgba(0,0,0,.6); }
.h5-title{ font-family:var(--serif); font-weight:500; line-height:1.02; letter-spacing:-.02em; color:#fff;
  font-size:clamp(2.8rem,6.6vw,5.8rem); margin:0; }
.h5-title em{ font-style:italic; font-weight:400; color:#d7dade; }
/* "Made in Germany" = second line of the H1 — same scale & colour → ONE headline */
.h5-made{ display:block; margin-top:.04em; font-weight:500; font-size:.82em; letter-spacing:-.01em; color:#fff; }
/* German colours as a refined tricolor rule above the eyebrow (not a sticker) */
.flag-de{ display:block; width:56px; height:4px; border-radius:2px; margin:0 auto 1.3rem;
  background:linear-gradient(90deg, #424242 0 33.34%, #D80000 33.34% 66.67%, #F5C400 66.67% 100%); }
.h5-cta{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin-top:2.2rem; }
.btn-ghost-light{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.42); }
.btn-ghost-light:hover{ background:#fff; color:var(--ink); border-color:#fff; }

/* bottom credential strip */
.h5-strip{ position:absolute; left:0; right:0; bottom:0; z-index:4;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1rem clamp(1.5rem,4vw,3rem); background:linear-gradient(to top, rgba(8,9,11,.82), transparent);
  border-top:1px solid rgba(255,255,255,.14); }
.h5-facts{ display:flex; align-items:center; gap:1.1rem;
  font:600 .68rem/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:#d3d6db; }
.h5-facts i{ color:rgba(255,255,255,.4); font-style:normal; }
.h5-awards{ display:flex; align-items:center; gap:1rem; }
.h5-chip{ flex:none; display:inline-flex; align-items:center; justify-content:center; height:88px; padding:0 1.6rem;
  background:#fff; border-radius:16px; box-shadow:0 12px 30px rgba(0,0,0,.34); }
.h5-chip img{ height:60px; width:auto; max-width:none; display:block; } /* never squeezed sideways */
/* Trusted Shops Käuferschutz — reduced trust seal chip (mono logo + title) */
.h5-chip--ts{ flex-direction:column; gap:.5rem; padding:0 1.5rem; }
.h5-chip--ts .ts-logo{ height:40px; width:40px; }
.h5-chip--ts .ts-cap{ font:700 .63rem/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:#424242; }
@media(max-width:860px){
  .h5-strip{ flex-direction:column; gap:.9rem; padding:1.1rem 1.2rem 1.3rem; }
  .h5-facts{ flex-wrap:wrap; justify-content:center; gap:.7rem; }
}
@media(max-width:420px){
  .h5-awards{ gap:.6rem; }
  .h5-chip{ height:76px; padding:0 1rem; border-radius:14px; }
  .h5-chip img{ height:50px; }
  .h5-chip--ts{ padding:0 .9rem; }
  .h5-chip--ts .ts-logo{ height:34px; width:34px; }
}
/* just above the 860 breakpoint the strip is one row: smaller chips so Trusted Shops is not cut off (861–940) */
@media(min-width:861px) and (max-width:960px){
  .h5-strip{ gap:1rem; }
  .h5-awards{ gap:.6rem; }
  .h5-chip{ height:76px; padding:0 1rem; border-radius:14px; }
  .h5-chip img{ height:50px; }
  .h5-chip--ts{ padding:0 .9rem; }
}
/* very small phones (320–374): facts in 2 lines instead of 4, so the dots fit between buttons and strip */
@media(max-width:374px){ .h5-facts{ font-size:.58rem; letter-spacing:.1em; gap:.45rem; } }

/* ============================================================
   FINDEN SIE IHRE KLINGE — full-bleed dark, knives go huge
   ============================================================ */
.kl{ position:relative; overflow:hidden;
  background:radial-gradient(130% 70% at 50% -8%, #424242 0%, #333333 55%);
  padding:clamp(4rem,7vw,6.5rem) 0 0; }

.kl-head{ text-align:center; max-width:46rem; margin:0 auto; padding:0 1.5rem; }
.kl-head .eyebrow{ display:block; margin-bottom:1rem; }
.kl-head h2{ font-family:var(--serif); font-weight:500; color:#fff; margin:0;
  font-size:clamp(2.2rem,4.8vw,3.5rem); line-height:1.04; letter-spacing:-.02em; }
.kl-head p{ color:#a4a8af; margin:1.1rem auto 0; font-size:1.06rem; line-height:1.6; max-width:35rem; }

.kl-grid{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:clamp(2.4rem,4vw,3.4rem); }

.kl-col{ position:relative; overflow:hidden; text-decoration:none;
  min-height:clamp(520px,66vh,760px);
  display:flex; flex-direction:column; justify-content:flex-end; }

/* spotlight behind each blade */
.kl-glow{ position:absolute; left:50%; top:37%; width:122%; height:74%; z-index:0;
  transform:translate(-50%,-50%);
  background:radial-gradient(50% 46% at 50% 48%,
    rgba(255,249,240,.11) 0%, rgba(255,249,240,.05) 34%, rgba(255,249,240,.015) 54%, transparent 72%);
  pointer-events:none; transition:opacity .5s var(--ease); }

/* the big blade — diagonal, bleeds beyond the column edges */
.kl-knife{ position:absolute; left:50%; top:39%; z-index:1; width:158%; height:auto;
  transform:translate(-50%,-50%) rotate(-38deg); transform-origin:center;
  filter:drop-shadow(0 34px 46px rgba(0,0,0,.6));
  transition:transform .55s var(--ease), filter .55s var(--ease); }
.kl-col:hover .kl-knife{ transform:translate(-50%,-50%) rotate(-34deg) scale(1.05); }
.kl-col:hover .kl-glow{ opacity:1.35; }

/* legibility scrim under the meta */
.kl-scrim{ position:absolute; left:0; right:0; bottom:0; height:56%; z-index:2; pointer-events:none;
  background:linear-gradient(to top, #333333 6%, rgba(51,51,51,.72) 42%, transparent); }

.kl-meta{ position:relative; z-index:3; padding:0 clamp(1.5rem,2.6vw,2.4rem) clamp(2rem,3vw,2.8rem); }
.kl-kicker{ font:600 .64rem/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--brass-br); }
.kl-meta h3{ font-family:var(--serif); font-weight:500; color:#fff; margin:.7rem 0 .35rem;
  font-size:clamp(1.7rem,2.6vw,2.3rem); letter-spacing:-.01em; }
.kl-desc{ color:#b8bcc2; font-size:.95rem; line-height:1.55; margin:0 0 1rem; max-width:22rem; }
.kl-link{ display:inline-flex; align-items:center; gap:.5rem; color:#fff; font:600 .82rem/1 var(--sans); letter-spacing:.02em; }
.kl-link .arr{ color:var(--brass-br); transition:transform .25s; }
.kl-col:hover .kl-link .arr{ transform:translateX(5px); }

/* footer link row */
.kl-all{ text-align:center; padding:clamp(2.6rem,4vw,3.6rem) 1.5rem clamp(4rem,6vw,5.5rem); }

@media(max-width:900px){
  .kl-grid{ grid-template-columns:1fr; }
  .kl-col{ min-height:58vh; }
  .kl-knife{ width:78%; transform:translate(-50%,-50%) rotate(-8deg); }
  .kl-col:hover .kl-knife{ transform:translate(-50%,-50%) rotate(-6deg) scale(1.04); }
}

/* ============================================================
   CRAFT / HERITAGE — dark split: workshop image + key facts
   ============================================================ */
.craft{ position:relative; background:#333333; overflow:hidden; border-top:1px solid rgba(255,255,255,.07); }
.craft-grid{ display:grid; grid-template-columns:1.02fr .98fr; align-items:stretch;
  min-height:clamp(480px,66vh,680px); }
.craft-media{ position:relative; overflow:hidden; background:#000; }
.craft-media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.15) contrast(1.06) brightness(.82); }
.craft-media::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(51,51,51,.2) 0%, transparent 28%, transparent 70%, #333333 100%),
    radial-gradient(65% 80% at 28% 42%, rgba(195,22,34,.14), transparent 68%); }
.craft-copy{ display:flex; flex-direction:column; justify-content:center; padding:clamp(2.4rem,5vw,5rem); }
.craft-copy .eyebrow{ display:block; margin-bottom:1rem; }
.craft-copy h2{ font-family:var(--serif); font-weight:500; color:#fff; margin:0;
  font-size:clamp(2rem,3.6vw,3rem); line-height:1.06; letter-spacing:-.01em; }
.craft-lead{ color:#a4a8af; font-size:1.05rem; line-height:1.6; margin:1.1rem 0 0; max-width:34rem; }
.craft-points{ display:flex; flex-direction:column; gap:1.15rem; margin:2rem 0 2.3rem; }
.craft-point{ display:flex; gap:1rem; align-items:baseline; }
.craft-point .n{ font-family:var(--serif); font-weight:500; color:var(--brass-br);
  font-size:1rem; letter-spacing:.04em; min-width:1.7rem; }
.craft-point .t b{ display:block; color:#fff; font-weight:600; font-size:1rem; font-family:var(--sans); margin-bottom:.15rem; }
.craft-point .t span{ display:block; color:#b8bcc2; font-size:.92rem; line-height:1.5; }
@media(max-width:900px){
  .craft-grid{ grid-template-columns:1fr; }
  .craft-media{ min-height:42vh; }
}

/* ============================================================
   MANUFAKTUR — heading + edge-to-edge cinematic MARQUEE of the
   8 real Solingen production stages (from the 360° virtual tour)
   ============================================================ */
.mfk{ background:#2e2e2e; padding:clamp(3.5rem,6vw,5.5rem) 0; overflow:hidden; }
.mfk-head{ text-align:center; max-width:52rem; margin:0 auto clamp(2.4rem,4vw,3.4rem); padding:0 1.5rem; }
.mfk-head .eyebrow{ display:block; margin-bottom:1rem; }
.mfk-head h2{ font-family:var(--serif); font-weight:500; color:#fff; margin:0;
  font-size:clamp(2rem,4vw,3rem); line-height:1.06; letter-spacing:-.01em; }
.mfk-head p{ color:#a4a8af; font-size:1.05rem; line-height:1.6; margin:1.1rem auto 0; max-width:38rem; }
/* embedded 360° virtual tour — wide, capped ~1700px (not full-bleed) */
.tour{ width:100%; max-width:var(--boxw); margin:0 auto; padding:0 var(--boxpad); }
.tour-frame{ position:relative; width:100%; aspect-ratio:16/9; border-radius:16px;
  overflow:hidden; background:#2e2e2e; }
.tour-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.tour-poster{ position:absolute; inset:0; z-index:2; width:100%; height:100%; object-fit:cover; transition:opacity .5s; } /* above the empty iframe, under the start button; removed once the tour has loaded */
.tour-poster.is-gone{ opacity:0; pointer-events:none; }
/* click-to-explore cover so the page scrolls past the tour until you opt in */
.tour-cover{ position:absolute; inset:0; z-index:3; width:100%; height:100%; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .25s;
  background:linear-gradient(0deg, rgba(8,9,11,.55), rgba(8,9,11,.14)); }
.tour-cover:hover{ background:linear-gradient(0deg, rgba(8,9,11,.4), rgba(8,9,11,.06)); }
.tour-cover span{ display:inline-flex; align-items:center; gap:.7rem; color:#fff; font:600 .92rem/1 var(--sans);
  padding:.85rem 1.5rem; border:1px solid rgba(255,255,255,.45); border-radius:var(--pill); background:rgba(46,46,46,.35); }
.tour-cover svg{ width:20px; height:20px; }
/* graceful fallback shown when the browser has no WebGL (krpano can't render) */
.tour-fallback{ position:absolute; inset:0; z-index:4; }
.tour-fallback[hidden]{ display:none; }
.tour-fallback img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tour-fallback::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(60% 60% at 50% 46%, rgba(8,9,11,.32), rgba(8,9,11,.66)); }
.tour-fallback-in{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.5rem; text-align:center; padding:1.4rem; }
.tf-k{ font:600 .6rem/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--brass-br); }
.tour-fallback-in b{ color:#fff; font-family:var(--serif); font-weight:500;
  font-size:clamp(1.3rem,2.4vw,1.9rem); letter-spacing:-.01em; max-width:24rem; }
.tf-link{ margin-top:.9rem; color:#fff; font:600 .9rem/1 var(--sans); text-decoration:none;
  display:inline-flex; align-items:center; gap:.5rem; padding:.8rem 1.5rem;
  border:1px solid rgba(255,255,255,.5); border-radius:var(--pill); transition:.25s var(--ease); }
.tf-link:hover{ background:var(--brass); border-color:var(--brass); }
.mfk-cta{ text-align:center; margin-top:clamp(2.4rem,4vw,3.4rem); }

/* ============================================================
   SELECTED PRODUCTS — "Kundenlieblinge": big, UNCONTAINED knives
   (no cards/boxes; the knife is huge and bleeds on open dark)
   ============================================================ */
.sel{ background:#333333; padding:clamp(4rem,7vw,6rem) 0 clamp(3.5rem,5vw,5rem); overflow:hidden; }
.sel-head{ position:relative; z-index:6; width:100%; margin:0 0 clamp(1.4rem,2.5vw,2.4rem); padding:0 clamp(2rem,4vw,4rem);
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.sel-head .eyebrow{ display:block; margin-bottom:.7rem; }
.sel-head-copy{ max-width:33rem; }
.sel-lead{ color:#a4a8af; font-size:1.02rem; line-height:1.6; margin:.9rem 0 0; }
.sel-head h2{ font-family:var(--serif); font-weight:500; color:#fff; margin:0;
  font-size:clamp(1.9rem,3.6vw,2.8rem); letter-spacing:-.01em; }
.sel-all{ color:#cfd2d7; text-decoration:none; font:600 .85rem/1 var(--sans);
  display:inline-flex; gap:.45rem; align-items:center; white-space:nowrap; }
.sel-all .arr{ color:var(--brass-br); transition:transform .25s; }
.sel-all:hover .arr{ transform:translateX(4px); }
/* header right group + column switcher */
.sel-head-right{ display:flex; align-items:center; gap:1.4rem; }
.sel-cols{ display:inline-flex; gap:.2rem; padding:.25rem; border:1px solid rgba(255,255,255,.14); border-radius:var(--pill); }
.sel-col-btn{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:30px;
  border:0; background:transparent; color:#7f838a; cursor:pointer; border-radius:calc(var(--pill) - 4px); transition:.2s var(--ease); }
.sel-col-btn:hover{ color:#fff; }
.sel-col-btn.is-active{ background:rgba(255,255,255,.13); color:#fff; }
.sel-col-btn svg{ width:17px; height:13px; }
@media(max-width:720px){ .sel-cols{ display:none; } }
/* full-bleed grid — user-switchable 3/4/5 across, uncontained, proper gaps */
.sel-grid{ width:100%; padding:0 clamp(2rem,4vw,4rem);
  display:grid; grid-template-columns:repeat(3,1fr);
  column-gap:clamp(1.8rem,3vw,3.4rem); row-gap:clamp(3rem,4.5vw,4.5rem); }
/* wider cells → taller knives → more top clearance so row 1 never reaches the title.
   Knife stays cell-relative (never locked) — the padding just tracks how far it can spill up. */
.sel-grid[data-cols="3"]{ grid-template-columns:repeat(3,1fr); padding-top:clamp(4.5rem,11vw,13rem); row-gap:clamp(5rem,12vw,14rem); }
.sel-grid[data-cols="4"]{ grid-template-columns:repeat(4,1fr); padding-top:clamp(3rem,6.5vw,8rem); row-gap:clamp(3.5rem,7vw,8.5rem); }
.sel-grid[data-cols="5"]{ grid-template-columns:repeat(5,1fr); padding-top:clamp(2rem,4vw,4.5rem); row-gap:clamp(2.5rem,4.5vw,5.5rem); }
/* the knife spills DOWN as much as up — reserve matching room before the product name
   so the blade never crowds the kicker/title (the clean gap the Serien cards have). */
.sel-grid[data-cols="3"] .sel-media{ margin-bottom:clamp(4rem,10vw,12rem); }
.sel-grid[data-cols="4"] .sel-media{ margin-bottom:clamp(2.6rem,5.6vw,7rem); }
.sel-grid[data-cols="5"] .sel-media{ margin-bottom:clamp(1.8rem,3.6vw,4.2rem); }
.sel-item{ position:relative; display:flex; flex-direction:column; }
/* big knife — sized to breathe inside its cell (only a slight bleed) */
.sel-media{ position:relative; height:clamp(150px,11.5vw,195px); margin-bottom:1.4rem; }
/* clean warm light-pool (multi-stop falloff → no hard grey edge / "dirty" disc) */
.sel-media::before{ content:""; position:absolute; inset:-20% -12%; z-index:0; pointer-events:none;
  background:radial-gradient(60% 50% at 50% 47%,
    rgba(255,249,240,.10) 0%, rgba(255,249,240,.045) 32%, rgba(255,249,240,.014) 52%, transparent 70%); }
/* cell-relative — knife scales UP as you switch to fewer/wider columns (that's the whole point).
   pointer-events:none so the giant PNG never eats clicks on the switcher/buttons behind it. */
.sel-knife{ position:absolute; left:50%; top:50%; z-index:1; width:116%; max-width:none;
  pointer-events:none;
  transform:translate(-50%,-50%) rotate(-20deg); transform-origin:center;
  filter:drop-shadow(0 20px 24px rgba(0,0,0,.6)); transition:transform .45s var(--ease); }
.sel-item:hover .sel-knife{ transform:translate(-50%,-50%) rotate(-16deg) scale(1.06); z-index:2; }
.sel-kicker{ position:relative; z-index:2; font:600 .58rem/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--brass-br); }
.sel-name{ position:relative; z-index:2; font-family:var(--sans); font-weight:600; color:#fff; font-size:.92rem; line-height:1.3; margin:.45rem 0 1.6rem; }
.sel-foot{ position:relative; z-index:2; margin-top:auto; padding-top:1.1rem; border-top:1px solid rgba(255,255,255,.08);
  display:flex; align-items:flex-end; justify-content:space-between; gap:.4rem; }
.sel-price{ color:#fff; font-family:var(--serif); font-size:1.12rem; line-height:1.1; }
.sel-price small{ display:block; color:#b0b4ba; font-family:var(--sans); font-size:.56rem; letter-spacing:.02em; margin-top:.15rem; }
/* sale: red "now" price + struck-through old price, "Angebot" tag */
.sel-item.is-sale .sel-price .now{ color:var(--brass-br); }
.sel-price .was{ font-family:var(--sans); font-size:.74rem; color:#b0b4ba;
  text-decoration:line-through; text-decoration-color:var(--brass); margin-left:.4rem; }
.sel-tag{ position:absolute; top:0; left:0; z-index:3; background:var(--brass); color:#fff;
  font:600 .58rem/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; padding:.34rem .55rem; border-radius:6px; }
.sel-add{ flex:none; width:40px; height:40px; border-radius:50%; border:none; cursor:pointer;
  background:var(--brass); color:#fff; display:inline-flex; align-items:center; justify-content:center;
  transition:transform .2s var(--ease), background .2s; }
.sel-add:hover{ background:var(--brass-d); transform:scale(1.09); }
/* always full rows: 12 products → 3-up=4 rows, 4-up=3 rows (both exact).
   5-up = 5+5+2, so hide the trailing 2 to keep 2 clean rows (only while 5 cols are actually active). */
@media(min-width:1101px){ .sel-grid[data-cols="5"] .sel-item:nth-child(n+11){ display:none; } }
@media(max-width:1100px){ .sel-grid[data-cols]{ grid-template-columns:repeat(3,1fr); padding-top:clamp(2rem,6vw,4rem); }
  .sel-media{ height:clamp(190px,22vw,240px); } .sel-knife{ width:124%; } }
@media(max-width:600px){ .sel-grid[data-cols]{ grid-template-columns:repeat(2,1fr); } }

/* ============================================================
   V5 DARK OVERRIDES for reused V2 components (.sec/.sec-head/.svc…)
   → replicate V2 structure, just restyled for the dark theme
   ============================================================ */
.v5 .sec-head h2{ color:#fff; }
.v5 .sec-head p{ color:#b8bcc2; }
.v5 .svc{ background:linear-gradient(#3d3d3d,#363636); border-color:rgba(255,255,255,.08); }
.v5 .svc:hover{ border-color:rgba(255,255,255,.2); box-shadow:0 18px 40px rgba(0,0,0,.45); }
.v5 .svc h4{ color:#fff; }
.v5 .svc p{ color:#b8bcc2; }
.v5 .svic{ background:rgba(195,22,34,.12); color:var(--brass-br); }
.v5 .svic svg{ width:26px; height:26px; }

/* ============================================================
   SERVICE — boxed banner (workshop photo + overlaid promises, .story-style)
   ============================================================ */
.svc-banner{ max-width:var(--boxw); margin:0 auto; padding:0 var(--boxpad); }
.svc-card{ position:relative; border-radius:var(--r-xl); overflow:hidden;
  min-height:clamp(520px,50vw,660px); display:flex; align-items:center; }
.svc-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:64% 30%; filter:grayscale(.22); }
.svc-veil{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(8,9,11,.95) 0%, rgba(8,9,11,.82) 40%, rgba(8,9,11,.44) 72%, rgba(8,9,11,.16) 100%); }
.svc-inner{ position:relative; z-index:2; color:#fff; padding:clamp(2.2rem,5vw,4rem); max-width:42rem; }
.svc-inner .kicker{ color:var(--brass-br); }
.svc-inner h2{ font-family:var(--serif); font-weight:500; color:#fff; margin:.5rem 0 0;
  font-size:clamp(1.9rem,3.4vw,2.7rem); letter-spacing:-.01em; }
.svc-lead{ color:#cfd2d7; font-size:1.05rem; line-height:1.6; margin:1rem 0 1.9rem; max-width:30rem; }
.svc-list{ list-style:none; display:flex; flex-direction:column; gap:1.15rem; }
.svc-list li{ display:flex; gap:1rem; align-items:flex-start; }
.svc-list .ic{ flex:none; width:46px; height:46px; border-radius:13px;
  background:rgba(195,22,34,.16); color:var(--brass-br); display:grid; place-items:center;
  border:1px solid rgba(195,22,34,.22); }
.svc-list .ic svg{ width:22px; height:22px; }
.svc-list b{ display:block; font-family:var(--sans); font-weight:600; color:#fff; font-size:1.02rem; margin-bottom:.15rem; }
.svc-list .d{ color:#a9adb4; font-size:.9rem; line-height:1.45; }
@media(max-width:680px){
  .svc-card{ min-height:0; }
  .svc-veil{ background:linear-gradient(0deg, rgba(8,9,11,.96) 34%, rgba(8,9,11,.6)); }
  .svc-inner{ padding:2rem 1.4rem; max-width:none; }
}

/* ============================================================
   QUALITY — dark split (image + stats), reworked for V5
   ============================================================ */
/* ============================================================
   ERBE — evolution of the blade (full-bleed, transparent PNG floats on dark)
   ============================================================ */
.evo{ position:relative; overflow:hidden; background:#2e2e2e;
  padding:clamp(4.5rem,8vw,7.5rem) 0 clamp(4rem,7vw,6.5rem); }
/* soft cinematic glow that lifts the blades off the black */
.evo::before{ content:""; position:absolute; left:50%; top:58%; z-index:0;
  width:min(1500px,94vw); height:70%; transform:translate(-50%,-50%);
  background:radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,.09), transparent 72%);
  pointer-events:none; }
.evo-head{ position:relative; z-index:1; text-align:center; max-width:54rem; margin:0 auto; padding:0 1.5rem; }
.evo-head .eyebrow{ display:block; margin-bottom:1rem; }
.evo-head h2{ font-family:var(--serif); font-weight:500; color:#fff; margin:0;
  font-size:clamp(2rem,3.8vw,3rem); line-height:1.12; letter-spacing:-.01em; }
.evo-head h2 em{ font-style:italic; color:var(--brass-br); }
.evo-lead{ color:#a4a8af; font-size:1.06rem; line-height:1.6; margin:1.2rem auto 0; max-width:40rem; }
.evo-stage{ position:relative; z-index:1; max-width:var(--boxw); margin:clamp(2.6rem,5vw,4.2rem) auto 0;
  padding:0 var(--boxpad); }
.evo-img{ width:100%; height:auto; display:block;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.6)); }
/* timeline track under the row: Mittelalter ————— Heute */
.evo-track{ display:flex; align-items:center; gap:clamp(1rem,3vw,2.4rem);
  margin-top:clamp(1.4rem,2.5vw,2.2rem); padding:0 clamp(.5rem,2vw,2rem); }
.evo-era{ flex:none; display:flex; flex-direction:column; gap:.2rem; }
.evo-era b{ font-family:var(--sans); font-weight:600; color:#fff; font-size:.9rem; letter-spacing:.01em; }
.evo-era span{ font:500 .72rem/1.3 var(--sans); letter-spacing:.03em; color:#b0b4ba; text-transform:uppercase; }
.evo-era--now{ text-align:right; }
.evo-era--now b{ color:var(--brass-br); }
.evo-line{ flex:1; height:1px; background:linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.22), rgba(255,255,255,.05)); }
@media(max-width:560px){ .evo-track{ gap:.8rem; } .evo-era span{ font-size:.62rem; } }

.qual{ background:#333333; padding:clamp(4rem,7vw,6.5rem) 0; }
.qual-grid{ max-width:var(--boxw); margin:0 auto; padding:0 var(--boxpad);
  display:grid; grid-template-columns:1.02fr 1fr; gap:clamp(2.4rem,5vw,5rem); align-items:center; }
/* left column = staggered overlapping diptych (two B&W craft shots) */
.qual-media{ position:relative; padding-bottom:.5rem; }
.qm{ overflow:hidden; border-radius:16px; box-shadow:0 26px 55px rgba(0,0,0,.5); margin:0; }
.qm img{ width:100%; height:100%; object-fit:cover; display:block; }
.qm-a{ width:76%; aspect-ratio:4/3; position:relative; z-index:1; }
.qm-b{ width:66%; aspect-ratio:4/3; margin:-14% 0 0 auto; position:relative; z-index:2;
  border:7px solid #333333; border-radius:22px; }
/* discreet glassy tag riding the overlap */
.qm-badge{ position:absolute; left:2%; bottom:5%; z-index:3;
  display:inline-flex; align-items:center; gap:.45rem;
  font:600 .58rem/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:#d5d7db;
  background:rgba(51,51,51,.55); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14); padding:.42rem .7rem; border-radius:999px; }
.qm-badge::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--brass-br); }
.qual-copy .eyebrow{ display:block; margin-bottom:1rem; }
.qual-copy h2{ font-family:var(--serif); font-weight:500; color:#fff; margin:0;
  font-size:clamp(2rem,4vw,3.1rem); line-height:1.05; letter-spacing:-.01em; }
.qual-lead{ color:#a4a8af; font-size:1.06rem; line-height:1.6; margin:1.2rem 0 0; max-width:34rem; }
.qual-stats{ display:grid; grid-template-columns:1fr 1fr; gap:1.8rem 1.6rem; margin-top:clamp(2.2rem,3.5vw,3rem); }
.qual-stat{ border-top:1px solid rgba(255,255,255,.14); padding-top:1.1rem; }
.qual-stat b{ display:block; font-family:var(--serif); font-weight:500; color:#fff; font-size:1.6rem; line-height:1; letter-spacing:-.01em; }
.qual-stat span{ display:block; color:#b8bcc2; font-size:.88rem; margin-top:.45rem; line-height:1.4; }
@media(max-width:820px){ .qual-grid{ grid-template-columns:1fr; gap:2.4rem; }
  .qual-media{ max-width:34rem; } }
/* columns swapped in the builder ("Bilder rechts"): same proportions, mirrored */
.qual-grid--flip{ grid-template-columns:1fr 1.02fr; }
@media(max-width:820px){ .qual-grid--flip{ grid-template-columns:1fr; } }

/* ============================================================
   AKTUELLES / NEWS — boxed dark cards
   ============================================================ */
.news5-sec{ background:#333333; }
.news5{ max-width:var(--boxw); margin:0 auto; padding:0 var(--boxpad); }
.news5-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem;
  flex-wrap:wrap; margin-bottom:clamp(2rem,3.5vw,3rem); }
.news5-head .eyebrow{ display:block; margin-bottom:.7rem; }
.news5-head h2{ font-family:var(--serif); font-weight:500; color:#fff; margin:0;
  font-size:clamp(1.9rem,3.4vw,2.7rem); letter-spacing:-.01em; }
.news5-all{ color:#cfd2d7; text-decoration:none; font:600 .85rem/1 var(--sans);
  display:inline-flex; gap:.45rem; align-items:center; white-space:nowrap; }
.news5-all .arr{ color:var(--brass-br); transition:transform .25s; }
.news5-all:hover .arr{ transform:translateX(4px); }
.news5-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.6rem,2.6vw,2.4rem); }
.ncard{ display:flex; flex-direction:column; text-decoration:none; background:#3a3a3a;
  border:1px solid rgba(255,255,255,.07); border-radius:18px; overflow:hidden;
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.ncard:hover{ transform:translateY(-4px); border-color:rgba(255,255,255,.18); box-shadow:0 22px 46px rgba(0,0,0,.5); }
.ncard-img{ aspect-ratio:16/10; overflow:hidden; }
.ncard-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.ncard:hover .ncard-img img{ transform:scale(1.05); }
.ncard-body{ padding:1.4rem 1.5rem 1.7rem; display:flex; flex-direction:column; flex:1; }
.ncard-cat{ font:600 .6rem/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--brass-br); }
.ncard h3{ font-family:var(--serif); font-weight:500; color:#fff; font-size:1.22rem; line-height:1.28;
  margin:.7rem 0 .55rem; }
.ncard p{ color:#b8bcc2; font-size:.92rem; line-height:1.55; margin:0 0 1.2rem; }
.ncard-link{ margin-top:auto; display:inline-flex; align-items:center; gap:.45rem;
  color:#fff; font:600 .82rem/1 var(--sans); }
.ncard-link .arr{ color:var(--brass-br); transition:transform .25s; }
.ncard:hover .ncard-link .arr{ transform:translateX(4px); }
@media(max-width:860px){ .news5-grid{ grid-template-columns:1fr; max-width:34rem; margin:0 auto; } }

/* ============================================================
   NEWSLETTER — boxed dark panel
   ============================================================ */
.nl-sec{ background:#333333; padding:clamp(1.8rem,3.5vw,3.4rem) 0; }
.nl5{ position:relative; overflow:hidden; max-width:calc(var(--boxw) - 2 * var(--boxpad)); margin:0 auto;
  background:linear-gradient(135deg,#3d3d3d,#363636); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-xl); padding:clamp(2.6rem,5vw,4.5rem) var(--boxpad); text-align:center; }
.nl5::before{ content:""; position:absolute; left:50%; top:-30%; width:60%; height:120%;
  transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(195,22,34,.16), transparent 70%); }
.nl5 > *{ position:relative; z-index:1; }
.nl5 .eyebrow{ display:block; margin-bottom:.9rem; }
.nl5 h2{ font-family:var(--serif); font-weight:500; color:#fff; margin:0;
  font-size:clamp(2rem,3.8vw,3rem); letter-spacing:-.01em; }
.nl5 p{ color:#a4a8af; font-size:1.05rem; line-height:1.6; margin:1rem auto 2rem; max-width:34rem; }
.nl5 form{ display:flex; gap:.5rem; max-width:31rem; margin:0 auto;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--pill); padding:.42rem .42rem .42rem 1.4rem; }
.nl5 input{ flex:1; border:none; background:none; font-family:var(--sans); font-size:.95rem; color:#fff; }
.nl5 input::placeholder{ color:#b0b4ba; }
.nl5 input:focus{ outline:none; }
.nl5 button{ flex:none; border:none; cursor:pointer; background:var(--brass); color:#fff;
  font:600 .9rem/1 var(--sans); padding:.85rem 1.6rem; border-radius:var(--pill);
  transition:background .2s var(--ease), transform .2s var(--ease); }
.nl5 button:hover{ background:var(--brass-d); transform:translateY(-1px); }
@media(max-width:520px){ .nl5 form{ flex-direction:column; background:none; border:none; padding:0; gap:.6rem; }
  .nl5 input{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--pill); padding:.85rem 1.3rem; }
  .nl5 button{ width:100%; padding:.9rem; } }

/* ============================================================
   FOOTER — dramatic: nav + columns above, GIANT steel FELIX wordmark
   dissolving into the bottom edge (à la oversized-brand footers)
   ============================================================ */
.ftr5{ position:relative; overflow:hidden; border-top:1px solid rgba(255,255,255,.06);
  background:radial-gradient(130% 90% at 50% -25%, #3d3d3d 0%, #2e2e2e 62%);
  padding:clamp(4rem,7vw,6.5rem) 0 clamp(2.6rem,4vw,3.6rem); }
/* soft brand-red glow at the top */
.ftr5::before{ content:""; position:absolute; top:-14%; left:50%; transform:translateX(-50%);
  width:72%; height:48%; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(195,22,34,.15), transparent 70%); }
.ftr5-inner{ position:relative; z-index:2; max-width:var(--boxw); margin:0 auto; padding:0 var(--boxpad); }
.ftr5-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1.1fr; gap:clamp(2rem,3.5vw,4rem); }

/* big editorial nav */
.ftr5-nav{ display:flex; flex-direction:column; align-items:flex-start; gap:.15rem; }
.ftr5-nav > a{ font-family:var(--serif); font-weight:500; color:#fff; text-decoration:none;
  font-size:clamp(1.5rem,2.5vw,2.3rem); line-height:1.28; letter-spacing:-.01em; transition:color .2s var(--ease); }
.ftr5-nav > a:hover{ color:var(--brass-br); }
.ftr5-copy{ margin-top:1.8rem; color:#6f7177; font-size:.82rem; line-height:1.7; }
.ftr5-copy a{ font-family:var(--sans); font-size:.82rem; color:#8b8d93 !important; text-decoration:none; }
.ftr5-copy a:hover{ color:var(--brass-br) !important; }

/* link + contact columns */
.ftr5-col .ftr5-h{ font:600 1.15rem/1.2 var(--serif); font-weight:500; color:#fff; margin:.2rem 0 1.2rem; letter-spacing:-.01em; }
.ftr5-col a, .ftr5-col span.line{ display:block; color:#b8bcc2; font-size:.95rem; padding:.4rem 0;
  text-decoration:none; transition:color .2s, padding .2s; }
.ftr5-col a:hover{ color:#fff; padding-left:5px; }
.ftr5-contact a{ color:#c4c6cb; }
.ftr5-social{ display:flex; gap:.6rem; margin-top:1.1rem; }
.ftr5-social a{ width:40px; height:40px; padding:0; border-radius:50%; border:1px solid rgba(255,255,255,.14);
  display:grid; place-items:center; color:#c4c6cb; transition:.25s var(--ease); }
.ftr5-social a:hover{ background:var(--brass); border-color:var(--brass); color:#fff; transform:translateY(-2px); padding:0; }
.ftr5-social svg{ width:18px; height:18px; }

/* thin credibility strip */
.ftr5-strip{ position:relative; z-index:2; max-width:var(--boxw); margin:clamp(2.4rem,4vw,3.5rem) auto 0;
  padding:1.6rem var(--boxpad) 0; border-top:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:space-between; gap:1.4rem; flex-wrap:wrap; }
.ftr5-badges{ display:flex; gap:.7rem; flex-wrap:wrap; }
.ftr5-badges .bdg{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:var(--pill);
  padding:.5rem 1rem; font:600 .71rem/1 var(--sans); letter-spacing:.05em; color:#cfd2d7; }
.ftr5-pay{ display:inline-flex; }
.ftr5-pay img{ height:clamp(38px,3.4vw,46px); width:auto; display:block; }

/* GIANT steel wordmark dissolving into the floor */
.ftr5-word{ position:relative; z-index:1; margin-top:clamp(.5rem,2vw,1.5rem); text-align:center;
  font-family:var(--serif); font-weight:700; text-transform:uppercase;
  font-size:clamp(6rem,27vw,25rem); line-height:.9; letter-spacing:-.03em; white-space:nowrap;
  background:linear-gradient(180deg, #f4f6f8 0%, #cccfd5 34%, #8b8f98 64%, #45484f 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  -webkit-mask-image:linear-gradient(180deg, #000 55%, transparent 96%);
  mask-image:linear-gradient(180deg, #000 55%, transparent 96%);
  user-select:none; pointer-events:none; }

@media(max-width:920px){ .ftr5-grid{ grid-template-columns:1fr 1fr; gap:2.4rem; }
  .ftr5-nav{ grid-column:1/-1; margin-bottom:.5rem; } }
@media(max-width:560px){ .ftr5-grid{ grid-template-columns:1fr; }
  .ftr5-strip{ flex-direction:column; align-items:flex-start; }
  .ftr5-word{ font-size:30vw; } }

/* ============================================================
   KUNDENSTIMMEN — Trusted Shops rating + real review excerpts (boxed)
   ============================================================ */
.rev-sec{ background:#333333; }
.rev5{ max-width:var(--boxw); margin:0 auto; padding:0 var(--boxpad); }
.rev5-head{ display:flex; align-items:center; justify-content:space-between; gap:2rem;
  flex-wrap:wrap; padding-bottom:clamp(2rem,3.5vw,3rem); margin-bottom:clamp(2rem,3.5vw,3rem);
  border-bottom:1px solid rgba(255,255,255,.08); }
.rev5-score{ display:flex; align-items:center; gap:1.2rem; }
.rev5-num{ font-family:var(--serif); font-weight:500; color:#fff; font-size:clamp(3rem,6vw,4.6rem); line-height:.9; letter-spacing:-.02em; }
.rev5-stars{ position:relative; display:inline-block; font-size:1.45rem; letter-spacing:3px; line-height:1; }
.rev5-stars::before{ content:"★★★★★"; color:rgba(255,255,255,.16); }
.rev5-stars::after{ content:"★★★★★"; color:#f6b93b; position:absolute; left:0; top:0; width:95.8%; overflow:hidden; white-space:nowrap; }
.rev5-meta{ display:block; margin-top:.55rem; color:#a4a8af; font-size:.95rem; }
.rev5-meta b{ color:#fff; font-weight:600; }
.rev5-src{ display:inline-flex; align-items:center; gap:.85rem; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1); border-radius:var(--pill); padding:.7rem 1.2rem .7rem .8rem; }
.rev5-seal{ width:44px; height:44px; flex:none; background:#fff; border-radius:50%; padding:5px; }
.rev5-src b{ display:block; color:#fff; font:600 .95rem/1.2 var(--sans); }
.rev5-src span{ display:block; color:#b0b4ba; font-size:.78rem; margin-top:.15rem; }
.rev5-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,2.4vw,2.2rem); }
.rcard{ margin:0; background:#3a3a3a; border:1px solid rgba(255,255,255,.07); border-radius:16px;
  padding:1.6rem 1.7rem; display:flex; flex-direction:column; }
.rcard-stars{ color:#f6b93b; font-size:1rem; letter-spacing:2px; margin-bottom:.9rem; }
.rcard blockquote{ margin:0 0 1.2rem; color:#e6e7ea; font-family:var(--serif); font-style:italic;
  font-size:1.06rem; line-height:1.5; }
.rcard figcaption{ margin-top:auto; display:flex; align-items:center; gap:.5rem;
  color:#b0b4ba; font:500 .8rem/1 var(--sans); }
.rcard figcaption .chk{ width:16px; height:16px; border-radius:50%; background:rgba(70,160,90,.9);
  color:#fff; display:grid; place-items:center; font-size:.6rem; flex:none; }
@media(max-width:860px){ .rev5-grid{ grid-template-columns:1fr; max-width:34rem; margin:0 auto; }
  .rev5-head{ justify-content:center; text-align:center; } }

/* ============================================================
   MEGA MENUS — drop from the hero nav on hover (merged from prototype)
   ============================================================ */
.h5-nav .has-mega > a{ display:inline-flex; align-items:center; gap:.4rem; }
.h5-nav .has-mega > a .caret{ width:8px; height:8px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-1px); transition:transform .25s var(--ease); opacity:.7; }
.h5-nav .has-mega:hover > a, .h5-nav .has-mega.open > a{ color:#fff; }
.h5-nav .has-mega:hover > a .caret, .h5-nav .has-mega.open > a .caret{ transform:rotate(-135deg) translateY(1px); }

/* full-bleed panel breaking out of the nav's horizontal padding */
.h5-nav .mega{ position:absolute; top:100%; left:0; right:0; z-index:30;
  background:linear-gradient(180deg,#3a3a3a,#333333); border-top:1px solid rgba(255,255,255,.07);
  box-shadow:0 40px 70px rgba(0,0,0,.55);
  opacity:0; visibility:hidden; transform:translateY(-10px); transition:.28s var(--ease); }
.h5-nav .has-mega:hover .mega, .h5-nav .has-mega.open .mega{ opacity:1; visibility:visible; transform:none; }
/* transparent hover-bridge across the nav's bottom padding so the menu stays reachable */
.h5-nav .mega::before{ content:""; position:absolute; left:0; right:0; top:-40px; height:40px; }
.mega-in{ max-width:var(--boxw); margin:0 auto; padding:clamp(2rem,3vw,2.8rem) var(--boxpad) clamp(2.2rem,3.2vw,3rem); }

/* products mega — few large hero tiles, RAW knife cutouts on dark */
.mega-hero-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.8rem,1.5vw,1.4rem); }
.mega-hero{ position:relative; display:block; overflow:hidden; text-decoration:none;
  height:clamp(230px,20vw,300px); border-radius:16px; border:1px solid rgba(255,255,255,.08);
  background:radial-gradient(125% 95% at 50% 0%, #424242 0%, #363636 60%); transition:.3s var(--ease); }
.mega-hero:hover{ border-color:rgba(255,255,255,.22); transform:translateY(-4px); box-shadow:0 24px 46px rgba(0,0,0,.5); }
.mega-hero-glow{ position:absolute; left:50%; top:40%; width:135%; height:74%; z-index:0;
  transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(50% 46% at 50% 48%, rgba(255,249,240,.13), transparent 68%); }
.mega-hero img{ position:absolute; left:50%; top:42%; width:88%; max-width:88%; z-index:1;
  transform:translate(-50%,-50%) rotate(-18deg); filter:drop-shadow(0 20px 26px rgba(0,0,0,.6));
  transition:transform .55s var(--ease); }
.mega-hero:hover img{ transform:translate(-50%,-50%) rotate(-15deg) scale(1.05); }
.mega-hero-meta{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1.1rem 1.3rem 1.2rem;
  background:linear-gradient(to top, rgba(8,9,11,.72) 20%, transparent); }
.mega-hero-meta .k{ display:block; font:600 .58rem/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--brass-br); margin-bottom:.4rem; }
.mega-hero-meta b{ color:#fff; font-family:var(--serif); font-weight:500; font-size:1.28rem; letter-spacing:-.01em; }
.mega-hero-meta .arr{ color:#fff; opacity:.55; margin-left:.35rem; transition:.25s var(--ease); }
.mega-hero:hover .mega-hero-meta .arr{ opacity:1; color:var(--brass-br); }
.mega-cat-foot{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap;
  margin-top:1.5rem; padding-top:1.3rem; border-top:1px solid rgba(255,255,255,.08); }
.mega-cat-foot a{ color:#b6b9bf; text-decoration:none; font:500 .92rem/1 var(--sans); transition:.2s var(--ease); }
.mega-cat-foot a:hover{ color:#fff; }
.mega-cat-foot a.hot{ color:var(--brass-br); font-weight:600; }
.mega-cat-foot .spacer{ flex:1; }
.mega-cat-foot a.all{ color:#fff; font-weight:600; display:inline-flex; gap:.4rem; }
.mega-cat-foot a.all i{ color:var(--brass-br); font-style:normal; }

/* series mega — featured series + vertical mini-cards */
.mega-series .mega-in{ display:grid; grid-template-columns:1.05fr 2fr; gap:clamp(1.4rem,2.4vw,2.4rem); align-items:stretch; }
.ms-feat{ position:relative; overflow:hidden; text-decoration:none; border-radius:18px;
  border:1px solid rgba(255,255,255,.09); background:radial-gradient(120% 85% at 50% -5%, #474747, #333333 62%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:1.7rem 1.8rem 1.8rem;
  min-height:clamp(320px,26vw,400px); transition:.3s var(--ease); }
.ms-feat:hover{ border-color:rgba(255,255,255,.24); }
.ms-feat-glow{ position:absolute; left:52%; top:30%; width:130%; height:64%; z-index:0; transform:translate(-50%,-50%);
  background:radial-gradient(50% 46% at 50% 48%, rgba(255,249,240,.14), transparent 66%); pointer-events:none; }
.ms-feat img{ position:absolute; left:52%; top:30%; width:112%; max-width:none; z-index:1;
  transform:translate(-50%,-50%) rotate(-24deg); filter:drop-shadow(0 26px 34px rgba(0,0,0,.6));
  transition:transform .55s var(--ease); }
/* scrim so the blade fades into the dark before the text (no overlap with the eyebrow) */
.ms-feat::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:58%; z-index:1; pointer-events:none;
  background:linear-gradient(to top, #333333 14%, rgba(54,54,54,.72) 48%, transparent); }
.ms-feat:hover img{ transform:translate(-50%,-50%) rotate(-19deg) scale(1.04); }
.ms-feat .k{ position:relative; z-index:2; font:600 .62rem/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--brass-br); }
.ms-feat h3{ position:relative; z-index:2; font-family:var(--serif); font-weight:500; color:#fff;
  font-size:clamp(1.7rem,2.4vw,2.2rem); letter-spacing:-.01em; margin:.6rem 0 .5rem; }
.ms-feat p{ position:relative; z-index:2; color:#a4a8af; font-size:.92rem; line-height:1.5; margin:0 0 1.1rem; max-width:22rem; }
.ms-feat .go{ position:relative; z-index:2; color:#fff; font:600 .84rem/1 var(--sans); display:inline-flex; gap:.45rem; }
.ms-feat .go i{ color:var(--brass-br); font-style:normal; transition:transform .25s var(--ease); }
.ms-feat:hover .go i{ transform:translateX(4px); }
.ms-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.7rem,1.1vw,1rem); }
.ms-card{ position:relative; display:flex; flex-direction:column; text-decoration:none;
  background:#3a3a3a; border:1px solid rgba(255,255,255,.06); border-radius:13px; overflow:hidden; transition:.25s var(--ease); }
.ms-card:hover{ border-color:rgba(255,255,255,.22); background:#424242; transform:translateY(-3px); }
.ms-card-img{ position:relative; height:clamp(66px,6vw,86px); }
.ms-card-img .g{ position:absolute; inset:-10% -4%;
  background:radial-gradient(56% 52% at 50% 46%, rgba(255,249,240,.13), transparent 66%); }
.ms-card-img img{ position:absolute; left:50%; top:48%; width:132%; max-width:none;
  transform:translate(-50%,-50%) rotate(-16deg); filter:drop-shadow(0 12px 15px rgba(0,0,0,.55)); transition:transform .45s var(--ease); }
.ms-card:hover .ms-card-img img{ transform:translate(-50%,-50%) rotate(-12deg) scale(1.05); }
.ms-card-body{ padding:.55rem .9rem 1rem; }
.ms-card .k{ display:block; font:600 .52rem/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--brass-br); }
.ms-card b{ display:block; color:#fff; font-family:var(--serif); font-weight:500; font-size:1.02rem; margin-top:.3rem; letter-spacing:-.01em; }
.ms-card.all{ align-items:center; justify-content:center; text-align:center; background:transparent;
  border-style:dashed; border-color:rgba(255,255,255,.16); }
.ms-card.all:hover{ background:rgba(255,255,255,.03); border-color:var(--brass-br); }
.ms-card.all span{ color:#fff; font:600 .88rem/1.3 var(--sans); }
.ms-card.all span i{ display:block; color:var(--brass-br); font-style:normal; font-size:1.1rem; margin-top:.3rem; }

/* company mega — subpage sidebar + editorial B&W content cards */
.mega-company .mega-in{ display:grid; grid-template-columns:.82fr 2.4fr; gap:clamp(1.6rem,3vw,3.2rem); }
.mc-side .sub{ display:block; font:600 .6rem/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--brass-br); margin-bottom:.65rem; }
.mc-side h4{ font-family:var(--serif); font-weight:500; color:#fff; font-size:1.5rem; letter-spacing:-.01em; margin:0 0 1.3rem; }
.mc-nav{ display:grid; grid-template-columns:1fr 1fr; gap:.05rem .8rem; }
.mc-nav a{ color:#b0b3b9; text-decoration:none; font-size:.9rem; padding:.42rem 0; transition:.2s var(--ease); }
.mc-nav a:hover{ color:#fff; padding-left:5px; }
.mc-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,1.6vw,1.5rem); }
.mc-card{ display:flex; flex-direction:column; text-decoration:none; background:#3a3a3a;
  border:1px solid rgba(255,255,255,.07); border-radius:15px; overflow:hidden; transition:.28s var(--ease); }
.mc-card:hover{ border-color:rgba(255,255,255,.2); transform:translateY(-4px); box-shadow:0 22px 44px rgba(0,0,0,.5); }
.mc-card-img{ aspect-ratio:16/10; overflow:hidden; }
.mc-card-img img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05) brightness(.95);
  transition:transform .55s var(--ease), filter .55s var(--ease); }
.mc-card:hover .mc-card-img img{ transform:scale(1.05); filter:grayscale(.35) contrast(1.05); }
.mc-card-body{ padding:1.15rem 1.3rem 1.4rem; display:flex; flex-direction:column; flex:1; }
.mc-card-body h5{ font-family:var(--serif); font-weight:500; color:#fff; font-size:1.32rem; letter-spacing:-.01em; margin:0 0 .5rem; }
.mc-card-body p{ color:#b8bcc2; font-size:.86rem; line-height:1.5; margin:0 0 1rem; }
.mc-card-body .more{ margin-top:auto; color:#fff; font:600 .8rem/1 var(--sans); display:inline-flex; gap:.4rem; }
.mc-card-body .more i{ color:var(--brass-br); font-style:normal; transition:transform .25s var(--ease); }
.mc-card:hover .more i{ transform:translateX(4px); }

@media(max-width:1100px){ .mega-hero-grid{ grid-template-columns:1fr 1fr; }
  .mega-series .mega-in, .mega-company .mega-in{ grid-template-columns:1fr; }
  .ms-grid{ grid-template-columns:repeat(3,1fr); } .mc-cards{ grid-template-columns:1fr 1fr; } }

/* manufaktur mega — big 360° tour launch (left) + experience list (right) */
.mega-manu .mega-in{ display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(1.4rem,2.4vw,2.4rem); }
.mm-tour{ position:relative; display:block; overflow:hidden; border-radius:18px; text-decoration:none;
  min-height:clamp(300px,24vw,360px); border:1px solid rgba(255,255,255,.09); }
.mm-tour img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.mm-tour:hover img{ transform:scale(1.04); }
.mm-tour::after{ content:""; position:absolute; inset:0; background:radial-gradient(62% 62% at 50% 42%, rgba(8,9,11,.24), rgba(8,9,11,.62)); }
.mm-tour-in{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.55rem; text-align:center; padding:1.4rem; }
.mm-play{ width:66px; height:66px; border-radius:50%; display:grid; place-items:center; margin-bottom:.4rem;
  color:#fff; background:rgba(46,46,46,.42); border:1px solid rgba(255,255,255,.55); backdrop-filter:blur(4px); transition:.3s var(--ease); }
.mm-tour:hover .mm-play{ background:var(--brass); border-color:var(--brass); transform:scale(1.08); }
.mm-play svg{ width:28px; height:28px; }
.mm-tour .k{ font:600 .6rem/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--brass-br); }
.mm-tour b{ color:#fff; font-family:var(--serif); font-weight:500; font-size:1.55rem; letter-spacing:-.01em; }
.mm-tour .sub{ color:rgba(255,255,255,.74); font:500 .86rem/1.4 var(--sans); max-width:22rem; }
.mm-list{ display:flex; flex-direction:column; gap:.7rem; }
.mm-row{ display:flex; align-items:center; gap:1rem; text-decoration:none; padding:.9rem 1.05rem;
  background:#3a3a3a; border:1px solid rgba(255,255,255,.06); border-radius:13px; flex:1; transition:.25s var(--ease); }
.mm-row:hover{ border-color:rgba(255,255,255,.22); background:#424242; transform:translateX(3px); }
.mm-row-ic{ flex:none; width:44px; height:44px; border-radius:11px; display:grid; place-items:center;
  background:rgba(195,22,34,.14); color:var(--brass-br); border:1px solid rgba(195,22,34,.2); }
.mm-row-ic svg{ width:22px; height:22px; }
.mm-row-tx{ display:flex; flex-direction:column; }
.mm-row-tx b{ color:#fff; font-family:var(--sans); font-weight:600; font-size:.98rem; }
.mm-row-tx span{ color:#b8bcc2; font-size:.82rem; margin-top:.15rem; }
@media(max-width:1100px){ .mega-manu .mega-in{ grid-template-columns:1fr; } }

/* selected products (Kundenlieblinge) — whole card clickable to the product page */
.sel-item{ cursor:pointer; }

/* ============================================================
   SOCIAL FEED — Instagram posts (@felixsolingen), portrait tiles
   ============================================================ */
.ig{ background:#2e2e2e; padding:clamp(3.5rem,6vw,5.5rem) 0; }
.ig-in{ max-width:var(--boxw); margin:0 auto; padding:0 var(--boxpad); }
.ig-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-bottom:clamp(1.8rem,3vw,2.6rem); }
.ig-head .eyebrow{ display:block; margin-bottom:.55rem; }
.ig-head h2{ font-family:var(--serif); font-weight:500; color:#fff; letter-spacing:-.01em;
  font-size:clamp(1.9rem,3.4vw,2.7rem); margin:0; }
.ig-follow{ color:#cfd2d7; text-decoration:none; font:600 .85rem/1 var(--sans);
  display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap; }
.ig-follow svg{ width:17px; height:17px; }
.ig-follow .arr{ color:var(--brass-br); transition:transform .25s var(--ease); }
.ig-follow:hover .arr{ transform:translateX(4px); }
.ig-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,1.6vw,1.6rem); }
.ig-post{ position:relative; display:block; aspect-ratio:4/5; border-radius:12px; overflow:hidden;
  border:1px solid rgba(255,255,255,.06); }
.ig-post img{ width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease); }
.ig-post:hover img{ transform:scale(1.06); }
.ig-ov{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0;
  background:radial-gradient(60% 60% at 50% 50%, rgba(46,46,46,.35), rgba(46,46,46,.62));
  transition:opacity .3s var(--ease); color:#fff; }
.ig-post:hover .ig-ov{ opacity:1; }
.ig-ov svg{ width:30px; height:30px; filter:drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
@media(max-width:760px){ .ig-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:460px){ .ig-grid{ grid-template-columns:1fr; max-width:22rem; margin:0 auto; } }

/* ============================================================
   HERO SLIDER — replaces the video on the slider home variant
   ============================================================ */
.h5-slider{ position:absolute; inset:0; z-index:0; overflow:hidden; background:#2e2e2e; }
.h5-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.4s var(--ease); }
.h5-slide.is-active{ opacity:1; }
.h5-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
/* "Bild abdunkeln: stark" for light pictures: darker on the text side (left), and overall a little */
.h5-slide--dark::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(8,9,11,.78) 0%, rgba(8,9,11,.62) 38%, rgba(8,9,11,.28) 70%, rgba(8,9,11,.18) 100%); }
@media(max-width:860px){ .h5-slide--dark::after{ background:rgba(8,9,11,.52); } }
/* slow ken-burns on the active slide */
.h5-slide.is-active img{ animation:h5kb 9s ease-out both; }
@keyframes h5kb{ from{ transform:scale(1.07); } to{ transform:scale(1); } }
/* pager dots (sit above the credential strip) */
.h5-dots{ position:absolute; left:50%; transform:translateX(-50%); z-index:5; /* above the strip (z 4), else not clickable */
  bottom:clamp(6.5rem,13vh,8.5rem); display:flex; gap:.5rem; }
.h5-dot{ width:9px; height:9px; padding:0; border:none; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.4); transition:.3s var(--ease); }
.h5-dot:hover{ background:rgba(255,255,255,.7); }
.h5-dot.is-active{ background:#fff; width:24px; border-radius:5px; }
/* phones/tablets: just above the strip (its height comes from home.js), never on the buttons */
.h5-dots{ bottom:calc(var(--h5-strip, 7.5rem) + 1rem); } /* all widths: just above the strip (desktop dots sat on its top line) */
/* short phones (SE, 320×568): text + buttons + strip did not fit in the fixed 600px, buttons ran into the strip.
   Up to 860px the slider hero grows with its content instead (text in flow, room for nav above, dots + strip below). */
@media(max-width:860px){
  .slider-home .h5{ height:auto; min-height:clamp(660px,99vh,1034px); display:flex; flex-direction:column; }
  .slider-home .h5 .h5-center{ position:relative; inset:auto; flex:1 0 auto; /* .h5 for weight: the SLIDER HOME padding rule comes later */
    padding-top:7.5rem; padding-bottom:calc(var(--h5-strip, 11rem) + 3.2rem); }
}
/* small phones: headlines take 3–4 lines; reserve 4 so the hero (and the page below) does not jump between slides */
@media(max-width:480px){ .slider-home .h5 .h5-title{ min-height:4.2em; } }

/* ============================================================
   SLIDER HOME — LEFT-aligned hero text (never centred), high enough
   to clear the knife; veil darkens the left so text stays legible.
   ============================================================ */
.slider-home .h5-center{ align-items:flex-start; justify-content:center; text-align:left;
  padding:0 clamp(1.5rem,5vw,4.5rem) clamp(3.5rem,7vh,6rem); }
.slider-home .flag-de{ margin-left:0; margin-right:0; }
.slider-home .h5-title{ font-size:clamp(2.1rem,4.8vw,4.1rem); max-width:min(25ch,88vw);
  min-height:2.3em; transition:opacity .5s var(--ease); }
/* each slide's headline: emphasis phrase drops to its own line */
.slider-home .h5-title em{ display:block; }
.slider-home .h5-cta{ justify-content:flex-start; }
.slider-home .h5-veil{ background:
  linear-gradient(to right, rgba(8,9,11,.78) 0%, rgba(8,9,11,.3) 40%, transparent 66%),
  linear-gradient(to top, rgba(8,9,11,.8) 0%, transparent 22%); }


/* ===== product.css ===== */
/* ============================================================
   FELIX Solingen — V5 single product page (dark, cinematic)
   Full-bleed knife hero on top · details below. Uses v5.css tokens.
   ============================================================ */

/* breadcrumb (subtle, boxed, sits right above the title) */
.pv-crumbs{ max-width:var(--boxw); margin:0 auto; padding:clamp(2rem,3.2vw,2.8rem) var(--boxpad) 0;
  font:500 .82rem/1 var(--sans); color:#b0b4ba; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.pv-crumbs a{ color:#b0b4ba; text-decoration:none; transition:color .2s var(--ease); }
.pv-crumbs a:hover{ color:#fff; }
.pv-crumbs .sep{ opacity:.4; }
.pv-crumbs .here{ color:#cfd2d7; }

/* ---------- hero: knife straddles the bottom edge of a bg band ---------- */
.pv-hero{ position:relative; overflow:hidden; background:#2e2e2e;
  min-height:clamp(560px,66vh,760px); }
/* the B&W building band occupies the top portion; solid #2e2e2e below it */
.pv-hero-bg{ position:absolute; top:0; left:0; right:0; height:82%; z-index:0; overflow:hidden; }
.pv-hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center top;
  filter:blur(2px) brightness(.62) saturate(.9); transform:scale(1.03); } /* mood only: blurred + dark so the knife/photo stays the subject (FELIX: no fire, calm) */
.pv-hero-bg::after{ content:""; position:absolute; inset:0; background:
  linear-gradient(to bottom, rgba(46,46,46,.45) 0%, rgba(46,46,46,0) 22%, rgba(46,46,46,0) 70%, #2e2e2e 100%); }
/* big knife centred ON the band's bottom edge → top half over the image, bottom half over solid */
.pv-hero-stage{ position:absolute; left:50%; top:62%; transform:translate(-50%,-50%); z-index:2;
  width:min(1560px,94vw); display:flex; flex-direction:column; align-items:center; }
.pv-hero-tag{ font:600 .7rem/1 var(--sans); letter-spacing:.24em; text-transform:uppercase; color:#fff;
  margin-bottom:clamp(.3rem,1vw,.7rem); text-shadow:0 2px 16px rgba(0,0,0,.9); }
.pv-hero-tag b{ color:var(--brass-br); font-weight:600; }
.pv-hero-img{ width:100%; height:auto; display:block; filter:drop-shadow(0 44px 40px rgba(0,0,0,.75)); }

/* ---------- meta band (awards won + guarantee, white marks on dark) ---------- */
.pv-meta{ max-width:var(--boxw); margin:0 auto; padding:0 var(--boxpad); }
.pv-meta-in{ display:grid; grid-template-columns:repeat(3,1fr);
  margin-top:clamp(1.2rem,2.2vw,1.8rem);
  border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); }
.pv-aw{ display:flex; align-items:center; justify-content:center; gap:.85rem;
  padding:clamp(1.2rem,2.2vw,1.7rem) 1rem; min-height:92px; }
.pv-aw + .pv-aw{ border-left:1px solid rgba(255,255,255,.08); }
/* iF badge — white outlined mark */
.aw-if{ flex:none; font:700 1.5rem/1 var(--sans); letter-spacing:-.03em; color:#fff;
  border:1.5px solid rgba(255,255,255,.55); border-radius:7px; padding:.28rem .5rem; }
/* red dot wordmark (red "dot") */
.aw-rd{ flex:none; font:700 1.4rem/1 var(--sans); letter-spacing:-.02em; color:#fff; }
.aw-rd b{ color:var(--brass-br); font-weight:700; }
/* 5 Jahre number */
.aw-num{ flex:none; font-family:var(--serif); font-weight:500; color:#fff; font-size:1.55rem; line-height:1; letter-spacing:-.01em; }
/* shared label */
.aw-lbl{ text-align:left; font:500 .74rem/1.28 var(--sans); color:#b0b4ba; }
.aw-lbl b{ color:#cfd2d7; font-weight:600; }
@media(max-width:720px){ .pv-meta-in{ grid-template-columns:1fr; }
  .pv-aw + .pv-aw{ border-left:0; border-top:1px solid rgba(255,255,255,.08); } }

/* ---------- details (boxed, 2 columns) ---------- */
.pv-detail{ max-width:var(--boxw); margin:0 auto;
  padding:clamp(2.6rem,5vw,4rem) var(--boxpad) clamp(3rem,6vw,5rem);
  display:grid; grid-template-columns:1.12fr 1fr; gap:clamp(2.4rem,5vw,5rem); align-items:start; }

.pv-series{ font:600 .66rem/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--brass-br); }
.pv-title{ font-family:var(--serif); font-weight:500; color:#fff; letter-spacing:-.01em;
  font-size:clamp(2rem,3.6vw,2.9rem); line-height:1.08; margin:.7rem 0 0; }
.pv-award{ color:#b8bcc2; font-size:.9rem; line-height:1.5; margin:1rem 0 0; }
.pv-award b{ color:#cfd2d7; font-weight:600; }

.pv-price{ display:flex; align-items:baseline; gap:.8rem; margin:1.6rem 0 0; flex-wrap:wrap; }
.pv-price .now{ font-family:var(--serif); font-weight:500; color:#fff; font-size:2.1rem; line-height:1;
  font-variant-numeric:tabular-nums; }
.pv-detail.sale .pv-price .now{ color:var(--brass-br); }
.pv-price .was{ font-family:var(--sans); font-size:1.15rem; color:#b0b4ba; text-decoration:line-through;
  text-decoration-color:var(--brass); }
.pv-price .save{ font:600 .72rem/1 var(--sans); letter-spacing:.05em; color:#fff; background:var(--brass);
  padding:.4rem .6rem; border-radius:6px; }
.pv-vat{ color:#b0b4ba; font-size:.82rem; margin:.6rem 0 0; }
.pv-vat a{ color:#b8bcc2; }
.pv-avail{ display:inline-flex; align-items:center; gap:.5rem; color:#c4c6cb; font-size:.9rem; margin:1rem 0 0; }
.pv-avail .dot{ width:8px; height:8px; border-radius:50%; background:#4caf72; box-shadow:0 0 0 3px rgba(76,175,114,.18); }

/* features from the old shop: check list in the "Merkmale" panel, two columns when there is room */
.pv-feats{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:minmax(0,1fr); gap:.55rem 1.4rem; }
@media(min-width:560px){ .pv-feats{ grid-template-columns:repeat(2,minmax(0,1fr)); } } /* auto-fill widened the column on phones */
.pv-feats li{ position:relative; padding-left:1.45rem; color:#c4c6cb; font-size:.9rem; line-height:1.4; overflow-wrap:anywhere; }
.pv-feats li::before{ content:""; position:absolute; left:.15rem; top:.28em; width:.38rem; height:.7rem;
  border:solid var(--brass-br); border-width:0 2px 2px 0; transform:rotate(45deg); }

.pv-desc{ color:#a4a8af; font-size:1rem; line-height:1.65; margin:1.6rem 0 0; max-width:34rem; }

/* buy row — fluid but balanced (wider qty, capped so the CTA isn't oversized) */
.pv-buy{ display:flex; gap:.9rem; margin:2rem 0 0; max-width:34rem; }
.pv-qty{ flex:none; display:inline-flex; align-items:center; justify-content:space-between;
  border:1px solid rgba(255,255,255,.16); border-radius:var(--pill); background:rgba(255,255,255,.04); }
.pv-qty button{ width:56px; height:58px; border:none; background:none; color:#fff; font-size:1.25rem; cursor:pointer;
  border-radius:var(--pill); transition:.2s var(--ease); }
.pv-qty button:hover{ background:rgba(255,255,255,.08); }
.pv-qty span{ min-width:40px; text-align:center; color:#fff; font:600 1.05rem/1 var(--sans); font-variant-numeric:tabular-nums; }
.pv-add{ flex:1; height:58px; border:none; cursor:pointer; background:var(--brass); color:#fff;
  font:600 1rem/1 var(--sans); border-radius:var(--pill); padding:0 1.4rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  transition:background .2s var(--ease), transform .2s var(--ease); }
.pv-add:hover{ background:var(--brass-d); transform:translateY(-1px); }
.pv-add .arr{ transition:transform .2s var(--ease); }
.pv-add:hover .arr{ transform:translateX(4px); }

/* trust row */
.pv-trust{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:2rem 0 0; }
.pv-trust div{ border-top:1px solid rgba(255,255,255,.12); padding-top:.9rem; }
.pv-trust b{ display:block; color:#fff; font:600 .95rem/1.1 var(--sans); }
.pv-trust small{ display:block; color:#b0b4ba; font-size:.8rem; margin-top:.25rem; }

/* payment (self-contained dark Mollie bar) */
.pv-pay{ margin:1.8rem 0 0; padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.08); }
.pv-pay img{ height:clamp(44px,4.4vw,56px); width:auto; display:block; }

/* ---------- specs accordion (right column) ---------- */
.pv-specs{ position:sticky; top:6rem; }
.pv-acc details{ border-bottom:1px solid rgba(255,255,255,.1); }
.pv-acc details:first-child{ border-top:1px solid rgba(255,255,255,.1); }
.pv-acc summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1.2rem 0; color:#fff; font-family:var(--serif); font-weight:500; font-size:1.12rem; letter-spacing:-.01em; }
.pv-acc summary::-webkit-details-marker{ display:none; }
.pv-acc summary .pm{ color:var(--brass-br); font-family:var(--sans); font-size:1.3rem; font-weight:300; transition:transform .25s var(--ease); }
.pv-acc details[open] summary .pm{ transform:rotate(45deg); }
.pv-acc .acc-body{ color:#a4a8af; font-size:.92rem; line-height:1.6; padding:0 0 1.3rem; }
.pv-acc .spec-row{ display:flex; justify-content:space-between; gap:1rem; padding:.6rem 0;
  border-bottom:1px solid rgba(255,255,255,.06); font-size:.9rem; }
.pv-acc .spec-row:last-child{ border-bottom:0; }
.pv-acc .spec-row span:first-child{ color:#b0b4ba; }
.pv-acc .spec-row span:last-child{ color:#e6e7ea; text-align:right; }

/* ---------- Design & Serie (editorial, big imagery) ---------- */
.pv-design{ background:#333333; padding:clamp(3.5rem,6vw,6rem) 0 clamp(1rem,2vw,2rem); }
.pv-design-in{ max-width:var(--boxw); margin:0 auto; padding:0 var(--boxpad); }
.pv-design-head{ max-width:44rem; }
.pv-design-head .eyebrow{ display:block; margin-bottom:.9rem; }
.pv-design-head h2{ font-family:var(--serif); font-weight:500; color:#fff; letter-spacing:-.01em;
  font-size:clamp(1.8rem,3.4vw,2.7rem); line-height:1.12; margin:0; }
.pv-design-head p{ color:#a4a8af; font-size:1.05rem; line-height:1.65; margin:1.1rem 0 0; }
.pv-design-feat{ position:relative; margin:clamp(2.2rem,4vw,3.4rem) 0 0; border-radius:18px; overflow:hidden; }
.pv-design-feat img{ width:100%; height:auto; display:block; aspect-ratio:2.5/1; object-fit:cover; }
.pv-design-feat figcaption{ position:absolute; left:clamp(1.2rem,2.5vw,2rem); bottom:clamp(1.1rem,2.5vw,1.6rem);
  color:#fff; font:500 .92rem/1.2 var(--sans);
  background:rgba(46,46,46,.4); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.14);
  padding:.6rem 1rem; border-radius:var(--pill); }
.pv-design-feat figcaption .k{ color:var(--brass-br); font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  font-size:.66rem; margin-right:.5rem; }
.pv-design-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,2.4vw,2.2rem);
  margin-top:clamp(1.4rem,2.4vw,2.2rem); }
.pv-dcard-img{ aspect-ratio:4/3; border-radius:14px; overflow:hidden; }
.pv-dcard-img img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.5) contrast(1.03);
  transition:transform .55s var(--ease), filter .55s var(--ease); }
.pv-dcard:hover .pv-dcard-img img{ transform:scale(1.04); filter:grayscale(0); }
.pv-dcard h3{ font-family:var(--serif); font-weight:500; color:#fff; font-size:1.3rem; letter-spacing:-.01em;
  margin:1.1rem 0 .5rem; }
.pv-dcard p{ color:#b8bcc2; font-size:.92rem; line-height:1.55; margin:0; }

/* ---------- related (dark grid) ---------- */
.pv-related{ background:#2e2e2e; padding:clamp(3.5rem,6vw,5.5rem) 0; }
.pv-related-in{ max-width:var(--boxw); margin:0 auto; padding:0 var(--boxpad); }
.pv-related h2{ font-family:var(--serif); font-weight:500; color:#fff; font-size:clamp(1.7rem,3vw,2.3rem);
  letter-spacing:-.01em; margin:0 0 .4rem; }
.pv-related .eyebrow{ display:block; margin-bottom:.7rem; }
.pv-rel-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.2rem,2vw,2rem); margin-top:clamp(2rem,3.5vw,3rem); }
.pv-rel{ display:flex; flex-direction:column; text-decoration:none; }
.pv-rel-media{ position:relative; height:clamp(140px,12vw,180px); margin-bottom:1rem; }
.pv-rel-media .g{ position:absolute; inset:-8% -4%;
  background:radial-gradient(56% 50% at 50% 48%, rgba(255,249,240,.10), transparent 68%); }
.pv-rel-media img{ position:absolute; left:50%; top:50%; width:120%; max-width:none;
  transform:translate(-50%,-50%) rotate(-16deg); filter:drop-shadow(0 16px 20px rgba(0,0,0,.55));
  transition:transform .45s var(--ease); }
.pv-rel:hover .pv-rel-media img{ transform:translate(-50%,-50%) rotate(-12deg) scale(1.05); }
.pv-rel-k{ font:600 .56rem/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--brass-br); }
.pv-rel-t{ color:#fff; font-family:var(--sans); font-weight:600; font-size:.95rem; margin:.4rem 0 .5rem; }
.pv-rel-p{ color:#cfd2d7; font-family:var(--serif); font-size:1.05rem; }

@media(max-width:900px){
  .pv-detail{ grid-template-columns:1fr; gap:2.4rem; }
  .pv-specs{ position:static; }
  .pv-rel-grid{ grid-template-columns:1fr 1fr; }
  .pv-design-grid{ grid-template-columns:1fr; max-width:32rem; }
  .pv-design-feat img{ aspect-ratio:16/10; }
}

/* ---------- WooCommerce (theme): real quantity field, stock states, swapped columns, notices ---------- */
.pv-qty-input{ width:44px; height:58px; border:0; background:none; color:#fff; text-align:center;
  font:600 1.05rem/1 var(--sans); font-variant-numeric:tabular-nums; -moz-appearance:textfield; appearance:textfield; }
.pv-qty-input::-webkit-outer-spin-button, .pv-qty-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.pv-qty-input:focus-visible, .pv-qty button:focus-visible, .pv-add:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.pv-avail .dot--wait{ background:#e0a93b; box-shadow:0 0 0 3px rgba(224,169,59,.18); }
.pv-avail .dot--out{ background:#e5484d; box-shadow:0 0 0 3px rgba(229,72,77,.22); } /* sold out = red (traffic light), text stays white */
.pv-detail--flip{ grid-template-columns:1fr 1.12fr; }
.pv-price .was .amount{ color:inherit; }
.pv-buy-col .woocommerce-message, .pv-buy-col .woocommerce-error, .pv-buy-col .woocommerce-info{ list-style:none; margin:0 0 1.4rem; padding:1rem 1.2rem;
  border-radius:12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#e6e7ea; font-size:.92rem; }
.pv-buy-col .woocommerce-message a, .pv-buy-col .woocommerce-error a{ color:#fff; }
/* hero: the knife never reaches up under the nav (prototype let a tall picture push the series line behind it) */
.pv-hero{ min-height:clamp(560px,76vh,800px); }
.pv-hero-img{ width:auto; max-width:100%; max-height:clamp(220px,40vh,440px); object-fit:contain; }
/* product without a cut-out: its photo, framed, below the nav */
.pv-hero--photo{ min-height:0; padding:clamp(7rem,12vh,9rem) var(--boxpad) 0; }
.pv-hero--photo .pv-hero-bg{ height:62%; }
.pv-hero--photo .pv-hero-stage{ position:relative; left:auto; top:auto; transform:none; width:min(1240px,100%); margin:0 auto; }
.pv-hero--photo .pv-hero-img{ width:100%; max-height:min(64vh,620px); aspect-ratio:16/9; object-fit:cover; border-radius:18px; filter:none; box-shadow:0 30px 60px rgba(0,0,0,.5); }
/* related product that only has a photo: a calm framed picture, not the tilted knife */
.pv-rel--photo .pv-rel-media{ border-radius:12px; overflow:hidden; }
.pv-rel--photo .pv-rel-media .g{ display:none; }
.pv-rel--photo .pv-rel-media img, .pv-rel--photo:hover .pv-rel-media img{ position:static; width:100%; height:100%; object-fit:cover; transform:none; filter:none; }
/* BFSG / WCAG AA: small red text on dark needs the lighter red (same fix as the home sections); links in text are underlined */
.pv-related .eyebrow, .pv-rel-k{ color:#ff8088; }
.pv-vat a{ text-decoration:underline; text-underline-offset:.15em; }
/* products with variants etc. use WooCommerce's own form inside the buy column */
.pv-buy-wc{ margin:2rem 0 0; max-width:34rem; color:#c4c6cb; }
.pv-buy-wc select{ width:100%; padding:.8rem 1rem; border-radius:12px; background:#3d3d3d; color:#fff; border:1px solid rgba(255,255,255,.16); }
.pv-buy-wc .single_add_to_cart_button{ height:58px; border:0; border-radius:var(--pill); background:var(--brass); color:#fff; font:600 1rem/1 var(--sans); padding:0 1.6rem; cursor:pointer; }

/* variants: the choice as pills above the cart row (Farbe / Griff) */
.pv-opts{ border:0; margin:1.8rem 0 0; padding:0; max-width:34rem; min-width:0; }
.pv-opts legend{ padding:0; margin:0 0 .75rem; color:#a4a8af; font:500 .82rem/1.2 var(--sans); letter-spacing:.06em; text-transform:uppercase; }
.pv-opts legend b{ color:#fff; font-weight:600; letter-spacing:.02em; text-transform:none; font-size:.95rem; margin-left:.25rem; }
.pv-opts-row{ display:flex; flex-wrap:wrap; gap:.55rem; }
.pv-opt{ position:relative; cursor:pointer; }
.pv-opt input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.pv-opt > span{ display:inline-flex; align-items:center; gap:.45rem; min-height:44px; padding:0 1.15rem; border-radius:var(--pill);
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.04); color:#e6e7e9; font:500 .92rem/1 var(--sans);
  transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease); }
.pv-opt > span small{ font-size:.72rem; color:#b0b4ba; font-weight:400; }
.pv-opt:hover > span{ border-color:rgba(255,255,255,.4); }
.pv-opt input:checked + span{ border-color:var(--brass); background:rgba(195,22,34,.16); color:#fff; box-shadow:inset 0 0 0 1px var(--brass); }
.pv-opt input:focus-visible + span{ outline:2px solid #fff; outline-offset:3px; }
.pv-opt.is-out > span{ color:#b0b4ba; }
.pv-opt.is-out .pv-opt-n{ text-decoration:line-through; text-decoration-color:rgba(255,255,255,.3); }
.pv-opt.is-out .pv-opt-img{ opacity:.45; }
/* the variant's own picture in the pill: the choice is visible where it is made (the big picture can be off-screen) */
.pv-opt.has-img > span{ padding-left:.45rem; }
.pv-opt-img{ width:46px; height:26px; object-fit:contain; flex:none; filter:drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.pv-buy--var{ margin-top:1.4rem; }
.pv-add:disabled{ background:#3a3d42; color:#a4a8af; cursor:not-allowed; transform:none; }

/* ---------- reviews (inc/reviews.php) ---------- */
.pv-reviews{ background:#2e2e2e; padding:clamp(3.5rem,6vw,5.5rem) 0; border-top:1px solid rgba(255,255,255,.06); }
.pv-reviews-in{ max-width:var(--boxw); margin:0 auto; padding:0 var(--boxpad); display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr); gap:clamp(2rem,5vw,5rem); align-items:start; }
.rv-sum .eyebrow{ display:block; margin-bottom:.7rem; }
.rv-sum h2{ font-family:var(--serif); font-weight:500; color:#fff; font-size:clamp(1.7rem,3vw,2.3rem); letter-spacing:-.01em; margin:0 0 1.6rem; }
.rv-avg{ display:flex; align-items:center; gap:1rem; margin-bottom:1.4rem; }
.rv-avg > b{ font-family:var(--serif); font-weight:500; color:#fff; font-size:3.2rem; line-height:1; }
.rv-avg-t{ display:block; color:#a4a8af; font-size:.88rem; margin-top:.35rem; }
.rv-stars{ position:relative; display:inline-block; line-height:0; }
.rv-stars svg{ width:18px; height:18px; margin-right:2px; }
.rv-stars-bg svg{ fill:rgba(255,255,255,.16); }
.rv-stars-fg{ position:absolute; left:0; top:0; overflow:hidden; white-space:nowrap; }
.rv-stars-fg svg{ fill:#e0a93b; }
.rv-dist{ list-style:none; margin:0 0 1.8rem; padding:0; display:grid; gap:.45rem; max-width:22rem; }
.rv-dist li{ display:grid; grid-template-columns:2.6rem 1fr 2rem; align-items:center; gap:.7rem; color:#a4a8af; font-size:.82rem; }
.rv-dist li span:last-child{ text-align:right; font-variant-numeric:tabular-nums; }
.rv-bar{ height:6px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden; }
.rv-bar i{ display:block; height:100%; background:#e0a93b; border-radius:inherit; }
.rv-empty{ color:#a4a8af; margin:0 0 1.6rem; max-width:24rem; }
.rv-write, .rv-send, .rv-more{ display:inline-flex; align-items:center; gap:.6rem; min-height:50px; padding:0 1.5rem; border-radius:var(--pill); cursor:pointer;
  font:600 .95rem/1 var(--sans); transition:background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); }
.rv-write{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.3); }
.rv-write:hover{ border-color:#fff; }
.rv-write[aria-expanded="true"] .arr{ transform:rotate(90deg); }
.rv-write .arr, .rv-send .arr{ transition:transform .2s var(--ease); }
.rv-send{ background:var(--brass); color:#fff; border:0; }
.rv-send:hover{ background:var(--brass-d); transform:translateY(-1px); }
.rv-more{ margin-top:1.4rem; background:transparent; color:#fff; border:1px solid rgba(255,255,255,.22); }
.rv-write:focus-visible, .rv-send:focus-visible, .rv-more:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.rv-notice{ margin:0 0 1.4rem; padding:.9rem 1.1rem; border-radius:12px; background:rgba(76,175,114,.12); border:1px solid rgba(76,175,114,.35); color:#d6efe0; }
.rv-form{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.09); border-radius:18px; padding:clamp(1.3rem,2.4vw,1.9rem); margin-bottom:2rem; }
.rv-pick{ border:0; margin:0 0 1.2rem; padding:0; min-width:0; }
.rv-pick legend, .rv-field label{ display:block; padding:0; margin:0 0 .55rem; color:#c4c6cb; font-size:.88rem; font-weight:500; }
.rv-pick-row{ display:inline-flex; gap:.2rem; }
.rv-pick-row input{ position:absolute; opacity:0; width:1px; height:1px; }
.rv-pick-row label{ cursor:pointer; padding:.2rem; line-height:0; border-radius:8px; }
.rv-pick-row svg{ width:34px; height:34px; fill:rgba(255,255,255,.16); transition:fill .15s var(--ease), transform .15s var(--ease); }
/* chosen: every star up to the checked one; hover previews up to the hovered one (natural DOM order 1→5) */
.rv-pick-row:has(input:checked) label svg{ fill:#e0a93b; }
.rv-pick-row input:checked + label ~ label svg{ fill:rgba(255,255,255,.16); }
.rv-pick-row:has(label:hover) label svg{ fill:#e0a93b !important; } /* the preview wins over the chosen state */
.rv-pick-row:has(label:hover) label:hover ~ label svg{ fill:rgba(255,255,255,.16) !important; }
.rv-pick-row label:hover svg{ transform:scale(1.08); }
.rv-pick-row input:focus-visible + label{ outline:2px solid #fff; outline-offset:2px; }
.rv-field{ margin:0 0 1rem; }
.rv-field input, .rv-field textarea{ width:100%; padding:.85rem 1rem; border-radius:12px; border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.25); color:#fff; font:400 1rem/1.5 var(--sans); }
.rv-field input:focus, .rv-field textarea:focus{ outline:none; border-color:var(--brass); box-shadow:0 0 0 3px rgba(195,22,34,.25); }
.rv-2col{ display:grid; grid-template-columns:1fr 1fr; gap:0 1rem; }
.rv-hp{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }
.rv-priv{ color:#b0b4ba; font-size:.82rem; margin:.2rem 0 1.1rem; }
.rv-priv a{ color:#c4c6cb; }
.rv-list{ display:grid; gap:1rem; }
.rv-item{ padding:1.3rem 1.4rem; border-radius:16px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); }
.rv-item header{ display:flex; align-items:center; flex-wrap:wrap; gap:.4rem .9rem; margin-bottom:.6rem; }
.rv-item header b{ color:#fff; font-weight:600; font-size:.95rem; }
.rv-item time{ color:#b0b4ba; font-size:.82rem; }
.rv-text{ color:#c4c6cb; font-size:.95rem; line-height:1.6; overflow-wrap:anywhere; }
.rv-sum, .rv-main, .rv-item{ min-width:0; }
.rv-item header b{ overflow-wrap:anywhere; }
.rv-text p{ margin:0 0 .6rem; } .rv-text p:last-child{ margin:0; }
.rv-auth{ margin:.7rem 0 0; color:#b0b4ba; font-size:.78rem; }
.rv-auth a{ color:#a4a8af; }
@media (max-width:900px){ .pv-reviews-in{ grid-template-columns:1fr; } .rv-2col{ grid-template-columns:1fr; } }

/* reviews LIGHT (Khalil 2026-11-03): light grey band between the white "Serie & Design" and the dark "Passt dazu" */
.pv-reviews{ background:#f0f0ef; border-top:0; }
.pv-reviews .eyebrow{ color:var(--brass-d,#9e1119); }
.rv-sum h2, .rv-avg > b, .rv-item header b{ color:var(--ink,#211d18); }
.rv-avg-t, .rv-empty, .rv-dist li, .rv-item time, .rv-auth, .rv-priv{ color:#5c574e; }
.rv-auth a, .rv-priv a{ color:var(--ink,#211d18); }
.rv-stars-bg svg{ fill:rgba(33,29,24,.16); }
.rv-bar{ background:rgba(33,29,24,.1); }
.rv-write, .rv-more{ color:var(--ink,#211d18); border-color:rgba(33,29,24,.3); }
.rv-write:hover, .rv-more:hover{ border-color:var(--ink,#211d18); }
.rv-write:focus-visible, .rv-send:focus-visible, .rv-more:focus-visible{ outline-color:var(--ink,#211d18); }
.rv-form, .rv-item{ background:#fff; border:1px solid rgba(33,29,24,.08); box-shadow:0 10px 24px -20px rgba(33,29,24,.35); }
.rv-pick legend, .rv-field label{ color:var(--ink-2,#4c4339); }
.rv-pick-row svg{ fill:rgba(33,29,24,.18); }
.rv-pick-row input:checked + label ~ label svg{ fill:rgba(33,29,24,.18); }
.rv-pick-row:has(label:hover) label:hover ~ label svg{ fill:rgba(33,29,24,.18) !important; }
.rv-pick-row input:focus-visible + label{ outline-color:var(--ink,#211d18); }
.rv-field input, .rv-field textarea{ background:#fff; color:var(--ink,#211d18); border-color:rgba(33,29,24,.22); }
.rv-text{ color:var(--ink-2,#4c4339); }
.rv-notice{ background:#e7f4ec; border-color:rgba(31,122,70,.3); color:#1f5c38; }

/* expected delivery date for sold-out items (inc/restock.php) */
.pv-avail{ flex-wrap:wrap; row-gap:.2rem; }
.pv-restock{ flex-basis:100%; padding-left:calc(8px + .5rem); color:#c4c6cb; font-size:.88rem; }

/* items without a blade (forks, sheath): the "Die Klinge" card is dropped → the two cards share the row */
@media (min-width:901px){ .pv-design-grid:has(> .pv-dcard:nth-child(2):last-child){ grid-template-columns:repeat(2,1fr); } }


/* ===== category.css ===== */
/* ============================================================
   FELIX Solingen — Category / listing page (V2 LIGHT)
   Extends css/v2.css tokens. Same class names as the filter
   engine (js/category.js) — re-themed warm & rounded.
   ============================================================ */

/* ---------- Page header ---------- */
.cat-header{ border-bottom:1px solid var(--line); background:transparent; padding:2.4rem 0 2.2rem; }
.cat-header-inner{ max-width:var(--maxw); margin:0 auto; padding:0 1.5rem; }
.crumbs{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  margin-bottom:1rem; display:flex; gap:.5rem; flex-wrap:wrap; }
.crumbs a{ color:var(--muted); transition:.25s; } .crumbs a:hover{ color:var(--brass-d); }
.crumbs .sep{ color:var(--line); } .crumbs .here{ color:var(--ink); }
.cat-header h1{ font-size:clamp(2.1rem,4.4vw,3.2rem); margin:.1rem 0 .6rem; }
.cat-header .lead{ color:var(--ink-2); font-size:1.02rem; max-width:44rem; }

/* ---------- Two-column shell ---------- */
.catalog{ max-width:var(--maxw); margin:0 auto; padding:2.2rem 1.5rem 5rem;
  display:grid; grid-template-columns:276px 1fr; gap:2.4rem; align-items:start; }

/* ---------- Toolbar ---------- */
.toolbar{ grid-column:2; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-bottom:1.1rem; margin-bottom:1.5rem; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.result-count{ font-size:.85rem; color:var(--muted); }
.result-count b{ color:var(--ink); font-weight:600; }
.toolbar-right{ display:flex; align-items:center; gap:1rem; }
.sort-field{ display:flex; align-items:center; gap:.6rem; }
.sort-field label{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.sort-field select{ appearance:none; background:var(--white); color:var(--ink); border:1px solid var(--line);
  border-radius:var(--pill); padding:.6rem 2.2rem .6rem 1.1rem; font-family:var(--sans); font-size:.84rem; cursor:pointer; transition:.25s;
  background-image:linear-gradient(45deg,transparent 50%,var(--brass) 50%),linear-gradient(135deg,var(--brass) 50%,transparent 50%);
  background-position:calc(100% - 16px) 55%, calc(100% - 11px) 55%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }
.sort-field select:focus{ outline:none; border-color:var(--brass); }
.filter-toggle{ display:none; }

/* ---------- Sidebar / facets ---------- */
.catalog-main{ min-width:0; } /* right column: toolbar + chips + grid stack naturally (no stretch to sidebar height) */
.facets{ position:sticky; top:96px; align-self:start;
  background:none; border:none; border-radius:0; padding:0 1.6rem 0 0; }
.facets-head{ display:flex; align-items:baseline; justify-content:space-between;
  padding-bottom:1rem; margin-bottom:.2rem; border-bottom:1px solid var(--line); }
.facets-head h2{ font-size:1.3rem; }
.clear-all{ font-family:var(--sans); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); background:none; border:none; cursor:pointer; transition:.25s; }
.clear-all:hover{ color:var(--brass-d); }
.clear-all[disabled]{ opacity:.35; cursor:default; }

.facet{ border-bottom:1px solid var(--line); padding:1.05rem 0; }
.facet:last-of-type{ border-bottom:none; }
.facet-title{ width:100%; background:none; border:none; cursor:pointer; color:var(--ink);
  display:flex; align-items:center; justify-content:space-between; padding:0;
  font-family:var(--sans); font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
.facet-title .chev{ color:var(--ink-2); transition:transform .3s; display:block; }
.facet-title:hover .chev{ color:var(--ink); }
.facet.collapsed .chev{ transform:rotate(-90deg); }
.facet-body{ margin-top:.9rem; display:grid; gap:.1rem; }
.facet.collapsed .facet-body{ display:none; }

.opt{ display:flex; align-items:center; gap:.7rem; cursor:pointer; padding:.4rem 0; font-size:.9rem;
  color:var(--ink-2); transition:color .2s; user-select:none; }
.opt:hover{ color:var(--ink); }
.opt input{ position:absolute; opacity:0; width:0; height:0; }
.opt .box{ flex:none; width:18px; height:18px; border:1.5px solid var(--line); border-radius:5px;
  background:var(--white); position:relative; transition:.2s; }
.opt:hover .box{ border-color:var(--brass); }
.opt input:checked + .box{ background:var(--brass); border-color:var(--brass); }
.opt input:checked + .box::after{ content:""; position:absolute; left:5px; top:1.5px; width:4px; height:9px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.opt input:focus-visible + .box{ box-shadow:0 0 0 3px rgba(176,137,78,.3); }
.opt .lbl{ flex:1; } .opt input:checked ~ .lbl{ color:var(--ink); font-weight:500; }
.opt .cnt{ font-size:.74rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.opt.is-empty{ opacity:.34; cursor:default; } .opt.is-empty:hover{ color:var(--ink-2); }
.opt.sale .box{ border-radius:50%; }

/* dual range price */
.price-range{ padding-top:.3rem; }
.range-vals{ display:flex; justify-content:space-between; font-size:.86rem; color:var(--ink);
  margin-bottom:1rem; font-variant-numeric:tabular-nums; }
.range-vals span b{ color:var(--brass-d); font-weight:600; }
.slider{ position:relative; height:26px; }
.slider .track{ position:absolute; top:11px; left:0; right:0; height:4px; background:var(--line); border-radius:var(--pill); }
.slider .fill{ position:absolute; top:11px; height:4px; background:var(--brass); border-radius:var(--pill); }
.slider input[type=range]{ position:absolute; top:0; left:0; width:100%; margin:0; height:24px;
  -webkit-appearance:none; appearance:none; background:none; pointer-events:none; }
.slider input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; pointer-events:auto;
  width:18px; height:18px; border-radius:50%; background:#fff; border:2px solid var(--brass); cursor:pointer;
  box-shadow:var(--shadow-sm); transition:.15s; }
.slider input[type=range]::-webkit-slider-thumb:hover{ background:var(--brass); transform:scale(1.12); }
.slider input[type=range]::-moz-range-thumb{ pointer-events:auto; width:18px; height:18px; border-radius:50%;
  background:#fff; border:2px solid var(--brass); cursor:pointer; box-shadow:var(--shadow-sm); }

/* ---------- Active chips ---------- */
.chips{ grid-column:2; display:flex; flex-wrap:wrap; gap:.5rem; margin:-.3rem 0 1.4rem; }
.chips:empty{ display:none; }
/* .fchip (not .chip) — avoids collision with v2.css hero .chip{position:absolute} */
.fchip{ display:inline-flex; align-items:center; gap:.5rem; background:var(--white); border:1px solid var(--line);
  border-radius:var(--pill); padding:.4rem .5rem .4rem .9rem; font-size:.78rem; color:var(--ink); }
.fchip b{ color:var(--brass-d); font-weight:600; }
.fchip button{ background:none; border:none; color:var(--muted); cursor:pointer; font-size:.95rem; line-height:1;
  width:18px; height:18px; border-radius:50%; transition:.2s; display:inline-flex; align-items:center; justify-content:center; }
.fchip button:hover{ color:#fff; background:var(--brass); }

/* ---------- Product grid ---------- */
.grid{ grid-column:2; display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.card{ display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.card-media{ position:relative; aspect-ratio:1/1; background:var(--paper-2); overflow:hidden; display:flex; align-items:center; justify-content:center; }
/* cut-out knives rotated corner-to-corner so they read bigger */
.card-media img{ max-width:100%; max-height:100%; object-fit:contain; transform:rotate(-40deg) scale(1.2); transition:transform .6s var(--ease); }
.card:hover .card-media img{ transform:rotate(-40deg) scale(1.28); }
/* fallback listing photos (rare, no master) stay flat & un-rotated */
.card-media img.is-photo{ transform:none; object-fit:contain; padding:8%; }
.card:hover .card-media img.is-photo{ transform:scale(1.05); }
.badge{ position:absolute; top:.7rem; left:.7rem; z-index:2; background:var(--brass); color:#fff;
  font-size:.62rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:.32rem .6rem; border-radius:var(--pill); }
.badge.len{ left:auto; right:.7rem; background:var(--white); color:var(--ink-2); border:1px solid var(--line); }
.card-body{ padding:1.05rem 1.1rem 1.2rem; display:flex; flex-direction:column; flex:1; }
.card-series{ font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brass-d); margin-bottom:.4rem; }
.card-title{ font-family:var(--serif); font-size:1.1rem; line-height:1.2; color:var(--ink); margin-bottom:.4rem;
  min-height:2.5em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card-art{ font-size:.7rem; color:var(--muted); margin-bottom:.9rem; }
.card-foot{ margin-top:auto; display:flex; align-items:flex-end; justify-content:space-between; gap:.5rem; }
.card-priceblock{ display:flex; flex-direction:column; gap:.15rem; }
.card-tax{ font-size:.64rem; color:var(--muted); letter-spacing:.01em; }
.card-price{ display:flex; align-items:baseline; gap:.45rem; font-variant-numeric:tabular-nums; }
.card-price .now{ font-family:var(--serif); font-size:1.25rem; color:var(--ink); }
.card.on-sale .card-price .now{ color:var(--brass-d); }
.card-price .was{ font-size:.78rem; color:var(--muted); text-decoration:line-through; }
.card-cart{ flex:none; width:38px; height:38px; border-radius:50%; background:var(--ink); color:var(--paper-2);
  border:none; cursor:pointer; font-size:1.05rem; transition:.25s var(--ease); }
.card-cart:hover{ background:var(--brass); transform:rotate(90deg); }

/* ---------- No results ---------- */
.empty{ grid-column:2; text-align:center; padding:4.5rem 1rem; border:1px dashed var(--line); border-radius:var(--r-lg); }
.empty h3{ font-size:1.7rem; margin-bottom:.6rem; }
.empty p{ color:var(--muted); margin-bottom:1.5rem; }

/* ---------- Mobile drawer ---------- */
.scrim{ position:fixed; inset:0; background:rgba(30,20,10,.4); backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; transition:.3s; z-index:75; }
.scrim.show{ opacity:1; visibility:visible; }

@media(max-width:1080px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:820px){
  .catalog{ grid-template-columns:1fr; gap:0; }
  .toolbar,.chips,.grid,.empty{ grid-column:1; }
  .filter-toggle{ display:inline-flex; align-items:center; gap:.5rem; background:var(--white); border:1px solid var(--line);
    color:var(--ink); font-family:var(--sans); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
    padding:.6rem 1.2rem; border-radius:var(--pill); cursor:pointer; transition:.25s; }
  .filter-toggle:hover{ border-color:var(--brass); color:var(--brass-d); }
  .filter-toggle .fcount{ color:var(--brass-d); }
  .facets{ position:fixed; top:0; left:0; bottom:0; width:88%; max-width:360px; z-index:80; border-radius:0 var(--r-xl) var(--r-xl) 0;
    background:#fff; box-shadow:var(--shadow-lg);
    padding:1.5rem 1.5rem 2.5rem; overflow-y:auto; transform:translateX(-100%); transition:transform .35s ease; }
  .facets.open{ transform:none; }
  .facets-close{ display:block; background:var(--white); border:1px solid var(--line); color:var(--ink); font-size:1.1rem;
    cursor:pointer; position:absolute; top:1rem; right:1.2rem; width:38px; height:38px; border-radius:50%; }
}
@media(min-width:821px){ .facets-close{ display:none; } }
@media(max-width:480px){
  .grid{ grid-template-columns:1fr 1fr; gap:.8rem; }
  .card-body{ padding:.85rem .85rem 1rem; } .card-title{ font-size:1rem; } .card-price .now{ font-size:1.1rem; }
}
.card-art--var{ color:var(--ink-2,#3a352e); font-weight:600; letter-spacing:.01em; }
/* Only option of its group on this page (e.g. "Kunststoff" on First Class): ticked, greyed, not clickable — product info */
.opt.is-fixed{ cursor:default; }
.opt.is-fixed:hover{ color:inherit; }
.opt.is-fixed input:checked + .box,
.opt.is-fixed:hover .box{ background:#b9b4ac; border-color:#b9b4ac; }
.opt.is-fixed .lbl{ font-weight:500; }


/* ===== light-sections.css ===== */
/* ============================================================
   LIGHT SECTIONS — opt-in white treatment for V5.
   Guede stays fully dark; Felix mixes in warm-white bands.
   Everything is scoped to a `.kl--light` MODIFIER so the dark
   base in v5.css is never touched. Revert = drop the modifier
   class (and this <link>). Section-by-section rollout.

   First band: the category / "Finden Sie Ihre Klinge" grid.
   The dark "splash" (the cream glow behind each blade) is
   re-tuned into a soft warm-grey shadow pool so the steel
   blades still get depth on paper-white instead of washing out.
   ============================================================ */

/* --- clean white backdrop (was: dark radial; cream felt too warm) --- */
.kl.kl--light{ background:#ffffff; }

/* --- heading block --- */
.kl--light .eyebrow{ color:var(--brass-d); }
.kl--light .kl-head h2{ color:var(--ink); }
.kl--light .kl-head p{ color:#5c574e; }

/* --- card separators: INTERNAL hairlines only (outer top/bottom/sides removed) --- */
.kl--light .kl-col{
  border-right:1px solid rgba(33,29,24,.09);
  border-bottom:1px solid rgba(33,29,24,.09);
  background:transparent;                       /* white section shows through — no cream tint */
  transition:background .4s var(--ease);
}
.kl--light .kl-col:nth-child(3n){ border-right:0; }          /* no outer right edge */
.kl--light .kl-col:nth-last-child(-n+3){ border-bottom:0; }  /* no outer bottom edge */
.kl--light .kl-col:hover{ background:rgba(33,29,24,.022); }  /* neutral wash, not cream */
@media(max-width:900px){ .kl--light .kl-col{ border-right:0; } }  /* 1-col: drop side lines */

/* --- our splash REMOVED on white — blades sit clean, kept their own drop-shadow --- */
.kl--light .kl-glow{ display:none; }

/* --- blade: lighter, tighter drop-shadow so it reads on white --- */
.kl--light .kl-knife{
  filter:drop-shadow(0 22px 30px rgba(33,29,24,.24));
}

/* --- legibility scrim flips to white --- */
.kl--light .kl-scrim{
  background:linear-gradient(to top, #ffffff 8%, rgba(255,255,255,.72) 44%, transparent);
}

/* --- meta text on light --- */
.kl--light .kl-kicker{ color:var(--brass-d); }
.kl--light .kl-meta h3{ color:var(--ink); }
.kl--light .kl-desc{ color:#6b665c; }
.kl--light .kl-link{ color:var(--ink); }
.kl--light .kl-link .arr{ color:var(--brass); }

/* --- bottom "Alle Serien ansehen" — ghost-light is invisible on white --- */
.kl--light .kl-all .btn-ghost-light{
  color:var(--ink); border-color:rgba(33,29,24,.28); background:transparent;
}
.kl--light .kl-all .btn-ghost-light:hover{
  background:var(--ink); color:#fff; border-color:var(--ink);
}

/* ============================================================
   SELECTED PRODUCTS — "Kundenlieblinge" grid, white treatment.
   Same idea: `.sel--light` modifier, dark base untouched.
   The blade light-pool becomes a warm-grey grounding shadow.
   ============================================================ */
.sel.sel--light{ background:#ffffff; }

/* head */
.sel--light .eyebrow{ color:var(--brass-d); }
.sel--light .sel-head h2{ color:var(--ink); }
.sel--light .sel-lead{ color:#5c574e; }
.sel--light .sel-all{ color:var(--ink); }
.sel--light .sel-all .arr{ color:var(--brass); }

/* column switcher */
.sel--light .sel-cols{ border-color:rgba(33,29,24,.16); }
.sel--light .sel-col-btn{ color:#8a857c; }
.sel--light .sel-col-btn:hover{ color:var(--ink); }
.sel--light .sel-col-btn.is-active{ background:rgba(33,29,24,.07); color:var(--ink); }

/* our splash REMOVED on white — knife keeps only its own drop-shadow below */
.sel--light .sel-media::before{ display:none; }
.sel--light .sel-knife{ filter:drop-shadow(0 16px 22px rgba(33,29,24,.24)); }

/* card text */
.sel--light .sel-kicker{ color:var(--brass-d); }
.sel--light .sel-name{ color:var(--ink); }
.sel--light .sel-foot{ border-top-color:rgba(33,29,24,.12); }
.sel--light .sel-price{ color:var(--ink); }
.sel--light .sel-price small,
.sel--light .sel-price .was{ color:#6f6a62; } /* ≥ 4.5:1 on white (BFSG) */
.sel--light .sel-item.is-sale .sel-price .now{ color:var(--brass); }
/* .sel-tag + .sel-add stay brass/red — they read fine on white */

/* ============================================================
   KOMPROMISSLOSE QUALITÄT — photo-split + stats, white treatment.
   `.qual--light` modifier; dark base untouched.
   ============================================================ */
.qual.qual--light{ background:#ffffff; }

/* photos: lighter shadow; drop the frame around the overlapping photo entirely */
.qual--light .qm{ box-shadow:0 22px 44px rgba(33,29,24,.16); }
.qual--light .qm-b{ border:0; }   /* box-shadow alone keeps the layering */

/* badge chip: glassy-black → solid brand red on white */
.qual--light .qm-badge{
  background:var(--brass); color:#fff; border-color:transparent; backdrop-filter:none;
}
.qual--light .qm-badge::before{ background:#fff; }

/* copy + stats */
.qual--light .eyebrow{ color:var(--brass-d); }
.qual--light .qual-copy h2{ color:var(--ink); }
.qual--light .qual-lead{ color:#5c574e; }
.qual--light .qual-stat{ border-top-color:rgba(33,29,24,.14); }
.qual--light .qual-stat b{ color:var(--ink); }
.qual--light .qual-stat span{ color:#6b665c; }

/* ============================================================
   NEWS (Aktuelles) + NEWSLETTER — white SECTION bg, but the
   cards/panel stay DARK (dark cards float on white). Only the
   section background + the heading text ABOVE the cards flip.
   ============================================================ */
/* --- News: white section, dark .ncard cards kept --- */
.news5-sec--light{ background:#ffffff; }
.news5-sec--light .news5-head .eyebrow{ color:var(--brass-d); }
.news5-sec--light .news5-head h2{ color:var(--ink); }
.news5-sec--light .news5-all{ color:var(--ink); }
.news5-sec--light .news5-all .arr{ color:var(--brass); }
/* lift the dark cards off the white with a soft neutral shadow */
.news5-sec--light .ncard{ box-shadow:0 10px 30px rgba(33,29,24,.10); }
.news5-sec--light .ncard:hover{ box-shadow:0 22px 46px rgba(33,29,24,.22); }

/* --- Newsletter: white section, dark .nl5 panel kept as-is --- */
.nl-sec--light{ background:#ffffff; }

/* ============================================================
   NEWSLETTER CTA — gentle attention pulse on "Abonnieren".
   Expanding brand-red ring; respects reduced-motion.
   ============================================================ */
@keyframes felixPulse{
  0%{   box-shadow:0 0 0 0 rgba(195,22,34,.5); }
  70%{  box-shadow:0 0 0 14px rgba(195,22,34,0); }
  100%{ box-shadow:0 0 0 0 rgba(195,22,34,0); }
}
.nl5 button{ animation:felixPulse 2.2s var(--ease) infinite; }
.nl5 button:hover{ animation-play-state:paused; }
@media(prefers-reduced-motion:reduce){ .nl5 button{ animation:none; } }

/* ============================================================
   CATEGORY PAGE (category.html, body.catpage) — WHITE page,
   product .card's kept DARK (dark cards float on white).
   Everything else (header, toolbar, filters, chips, sort,
   mobile drawer) flips to light. Sticky nav forced solid dark
   so its white text stays readable over the white page.
   Footer stays dark (shared across the site).
   ============================================================ */
body.v5.catpage.catpage--light{ background:#ffffff; }

/* sticky nav: force solid dark (at rest it's transparent → invisible on white) */
.catpage--light .h5-nav{
  background:rgba(46,46,46,.92); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
}

/* header — pure white, NO hairline under it, more top room below the fixed
   nav, and full-width (inner no longer capped at --boxw) */
.catpage--light .cat-header{
  background:#ffffff;
  border-bottom:none;
  padding:clamp(9rem,12vh,11.5rem) 0 clamp(2rem,3.5vw,3rem);
}
.catpage--light .cat-header-inner{
  max-width:none;
  padding-left:clamp(1.5rem,3vw,3rem); padding-right:clamp(1.5rem,3vw,3rem);
}

/* --- FULL-WIDTH catalog + 5-up product grid --- */
.catpage--light .catalog{
  max-width:none;
  padding-left:clamp(1.5rem,3vw,3rem); padding-right:clamp(1.5rem,3vw,3rem);
}
.catpage--light .grid{ grid-template-columns:repeat(3,1fr); } /* FELIX: three products per row, larger pictures */
@media(max-width:1040px){ .catpage--light .grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:820px){  .catpage--light .grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){  .catpage--light .grid{ grid-template-columns:repeat(2,1fr); } }

/* --- filter sidebar: floating white panel that pops off the page (desktop) --- */
@media(min-width:821px){
  .catpage--light .facets{
    background:#ffffff; border:1px solid rgba(33,29,24,.06); border-radius:16px;
    box-shadow:0 2px 10px rgba(33,29,24,.045); padding:1.1rem 1.3rem 1.4rem;
  }
}
.catpage--light .cat-header h1{ color:var(--ink); }
.catpage--light .cat-header .lead{ color:#5c574e; }
.catpage--light .crumbs, .catpage--light .crumbs a{ color:#7a756c; }
.catpage--light .crumbs a:hover{ color:var(--ink); }
.catpage--light .crumbs .here{ color:var(--ink); }

/* toolbar */
.catpage--light .toolbar{ border-bottom-color:rgba(33,29,24,.12); }
.catpage--light .result-count{ color:#5c574e; }
.catpage--light .result-count b, .catpage--light .result-count strong{ color:var(--ink); }
.catpage--light .filter-toggle{ background:#fff; border-color:rgba(33,29,24,.18); color:var(--ink); }
.catpage--light .filter-toggle:hover{ background:rgba(33,29,24,.05); }
.catpage--light .sort-field label{ color:#7a756c; }
.catpage--light .sort-field select{ background-color:#fff; border-color:rgba(33,29,24,.18); color:var(--ink); } /* background-color only: the shorthand wiped the chevron */
.catpage--light .sort-field select option{ background:#fff; color:var(--ink); }

/* active-filter chips */
.catpage--light .chips .fchip{ background:rgba(33,29,24,.05); border-color:rgba(33,29,24,.16); color:var(--ink); }
.catpage--light .chips .fchip button{ color:#7a756c; }
.catpage--light .clear-all,
.catpage--light .facets-head .clear-all{ color:var(--brass-d); }

/* facets sidebar */
.catpage--light .facets-head, .catpage--light .facets-head *{ color:var(--ink); }
.catpage--light .facets-head{ border-bottom-color:rgba(33,29,24,.12); }
.catpage--light .facet{ border-bottom-color:rgba(33,29,24,.10); }
.catpage--light .facet-title{ color:var(--ink); }
.catpage--light .facet-title svg, .catpage--light .facet-title .chev{ color:#7a756c; }
.catpage--light .facet-body{ color:#5c574e; }
.catpage--light .opt{ color:#5c574e; }
.catpage--light .opt:hover{ color:var(--ink); }
.catpage--light .opt .count{ color:#a29b90; }
.catpage--light .price-range .slider{ background:transparent; }  /* kill the grey band; real track = .slider .track (var(--line) #e7e9eb) */
.catpage--light .range-vals{ color:#6b665c; }
.catpage--light .range-vals b{ color:var(--ink); }

/* empty state */
.catpage--light .empty{ color:#5c574e; }
.catpage--light .empty h3{ color:var(--ink); }

/* mobile filter drawer → white too (so the now-dark facet text stays readable) */
@media(max-width:900px){ .catpage--light .facets{ background:#ffffff; } }

/* PRODUCT CARDS → LIGHT (white cards on the white page). Border defines them;
   no heavy shadow — just a light lift on hover. */
.catpage--light .grid .card{ background:#ffffff; border-color:rgba(33,29,24,.10); box-shadow:none; }
.catpage--light .grid .card:hover{ border-color:rgba(33,29,24,.16); box-shadow:0 8px 22px rgba(33,29,24,.10); }
/* knife media: neutral GREY backdrop (not cream) — matches the landing
   category hover wash; splash removed, softer grounding shadow */
.catpage--light .card-media{ background:radial-gradient(120% 100% at 50% 0%, #f4f1ec, #e6e0d7); } /* FELIX: warm stone instead of hard white-grey */
.catpage--light .card-media::before{ display:none; }
.catpage--light .card-media img{ filter:drop-shadow(0 16px 20px rgba(33,29,24,.22)); }
.catpage--light .card-media img.is-photo{ filter:none; }
/* length badge: dark glass → light glass */
.catpage--light .badge.len{ background:rgba(255,255,255,.82); border-color:rgba(33,29,24,.14); color:var(--ink); }
/* card text */
.catpage--light .card-series{ color:var(--brass-d); }
.catpage--light .card-title{ color:var(--ink); }
.catpage--light .card-title:hover{ color:var(--brass); }
.catpage--light .card-art{ color:#6b6157; } /* WCAG AA (was #8a857c) */
.catpage--light .card-price .now{ color:var(--ink); }
.catpage--light .card.on-sale .card-price .now{ color:var(--brass); }
.catpage--light .card-price .was{ color:#6f6a62; }
.catpage--light .card-tax{ color:#8a857c; }
/* .badge (ANGEBOT sale tag) + .card-cart stay brass-red — they read on light */

/* ============================================================
   SINGLE PRODUCT PAGE (produkt-v5.html, body.pdp--light):
   • "Design & Serie" (.pv-design) → WHITE
   • related "Das könnte Ihnen gefallen" (.pv-related) stays DARK,
     but its 4-up grid breaks FULL-WIDTH (bigger knives) while the
     heading stays inside the contained .pv-related-in.
   ============================================================ */
/* Design & Serie → white */
.pdp--light .pv-design{ background:#ffffff; }
.pdp--light .pv-design-head .eyebrow{ color:var(--brass-d); }
.pdp--light .pv-design-head h2{ color:var(--ink); }
.pdp--light .pv-design-head p{ color:#5c574e; }
.pdp--light .pv-dcard h3{ color:var(--ink); }
.pdp--light .pv-dcard p{ color:#6b665c; }
/* .pv-design-feat figcaption rides on the photo — left as-is */

/* related grid → full-bleed 4-up (heading stays contained in .pv-related-in) */
.pdp--light .pv-related{ overflow-x:clip; }
.pdp--light .pv-rel-grid{
  width:100vw; margin-left:calc(50% - 50vw);
  box-sizing:border-box; padding:0 clamp(1.5rem,3vw,3rem);
  grid-template-columns:repeat(3,1fr);
  /* big rotated knives overshoot their media box upward → keep them clear of the heading */
  margin-top:clamp(4.5rem,7vw,7rem);
}
.pdp--light .pv-rel-media{ height:clamp(180px,15vw,260px); }  /* bigger knives */
/* the oversized knife PNG's transparent box overflows upward toward the heading;
   stop it (and the glow) capturing pointer events so hovering the heading doesn't
   trigger a product hover. The card still reacts when you hover its media/text box. */
.pdp--light .pv-rel-media img,
.pdp--light .pv-rel-media .g{ pointer-events:none; }
@media(max-width:820px){
  .pdp--light .pv-rel-grid{ width:auto; margin-left:0; padding:0; grid-template-columns:1fr 1fr; }
}

/* ============================================================
   SECTION SPACING — now that light/dark bands alternate, give the
   white sections more air so content sits well off the hard color
   line. Where two white sections are adjacent (sel↔qual, news↔nl)
   the shared edge is trimmed so the gap between them isn't double.
   ============================================================ */
/* --- PDP --- */
.pdp--light .pv-design{ padding-top:clamp(5.5rem,8vw,8rem); padding-bottom:clamp(5.5rem,8vw,8rem); }
.pdp--light .pv-related{ padding-top:clamp(5.5rem,8vw,8rem); padding-bottom:clamp(5.5rem,8vw,8rem); }

/* --- home: category grid (dark both sides → generous top + bottom) --- */
.kl.kl--light{ padding-top:clamp(5.5rem,8vw,8rem); }
.kl--light .kl-all{ padding-bottom:clamp(5.5rem,8vw,8rem); }

/* --- home: selected products (dark above, white qual below) --- */
.sel.sel--light{ padding-top:clamp(5.5rem,8vw,8rem); padding-bottom:clamp(4.5rem,7vw,7rem); } /* more air under the product grid (Khalil 2026-10-29) */
/* --- home: Qualität (white sel above, dark evo below) --- */
.qual.qual--light{ padding-top:clamp(4.5rem,7vw,7rem); padding-bottom:clamp(5.5rem,8vw,8rem); } /* more air above "Qualität aus Solingen" */

/* --- home: news (dark above, white newsletter below) --- */
.news5-sec--light{ padding-top:clamp(5.5rem,8vw,8rem); padding-bottom:clamp(3rem,5vw,4.5rem); }
/* --- home: newsletter (white news above, dark social below) --- */
.nl-sec--light{ padding-top:clamp(2.5rem,4vw,3.5rem); padding-bottom:clamp(5.5rem,8vw,8rem); }

/* --- A/B compare label (only shown on the duplicated preview band) --- */
.kl-variant-tag{
  display:block; text-align:center; font:600 .62rem/1 var(--sans);
  letter-spacing:.22em; text-transform:uppercase; padding:1.4rem 1rem .2rem;
}
.kl-variant-tag.is-dark{ color:#6a6e75; background:#333333; }
.kl-variant-tag.is-light{ color:#a9a396; background:#f4f1ea; }


/* ===== cart.css ===== */
/* ============================================================
   FELIX Solingen — Slide-in cart drawer (V2 light)
   Shared across home-v2 / category / produkt. Uses v2.css tokens.
   ============================================================ */

.cart-scrim{
  position:fixed; inset:0; background:rgba(30,20,10,.42); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:.35s var(--ease); z-index:120;
}
.cart-scrim.show{ opacity:1; visibility:visible; }

.cart-drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(420px,92vw); z-index:125;
  background:var(--paper-2); box-shadow:var(--shadow-lg);
  border-radius:var(--r-xl) 0 0 var(--r-xl);
  transform:translateX(105%); transition:transform .42s var(--ease);
  display:flex; flex-direction:column;
}
.cart-drawer.open{ transform:none; }

.cart-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem 1.5rem; border-bottom:1px solid var(--line);
}
.cart-head h3{ font-size:1.35rem; }
.cart-head h3 span{ color:var(--brass-d); }
.cart-close{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--white);
  cursor:pointer; font-size:1.05rem; color:var(--ink); transition:.25s var(--ease);
}
.cart-close:hover{ background:var(--ink); color:var(--paper-2); border-color:var(--ink); }

/* "added" toast banner */
.cart-toast{
  display:flex; align-items:center; gap:.6rem; margin:1rem 1.5rem 0;
  background:var(--sage); border:1px solid rgba(0,0,0,.05); color:var(--ink);
  border-radius:var(--r-md); padding:.7rem .9rem; font-size:.86rem; font-weight:500;
  max-height:0; opacity:0; overflow:hidden; padding-top:0; padding-bottom:0; margin-top:0;
  transition:.4s var(--ease);
}
.cart-toast.show{ max-height:70px; opacity:1; padding-top:.7rem; padding-bottom:.7rem; margin-top:1rem; }
.cart-toast .chk{ flex:none; width:22px; height:22px; border-radius:50%; background:var(--forest); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.7rem; }

/* free-shipping progress */
.cart-ship{ margin:1rem 1.5rem .2rem; }
.cart-ship p{ font-size:.78rem; color:var(--muted); margin-bottom:.5rem; }
.cart-ship p b{ color:var(--brass-d); font-weight:600; }
.cart-ship .bar{ height:6px; border-radius:var(--pill); background:var(--line); overflow:hidden; }
.cart-ship .bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--brass),var(--brass-d));
  border-radius:var(--pill); width:0; transition:width .5s var(--ease); }

/* items list */
.cart-items{ flex:1; overflow-y:auto; padding:1rem 1.5rem; display:flex; flex-direction:column; gap:.9rem; }
.cart-empty{ text-align:center; padding:3rem 1rem; color:#6b6157; } /* ≥ 4.5:1 on the drawer grey (BFSG) */
.cart-empty .ic-big{ display:block; margin:0 auto 1rem; opacity:.4; }
.cart-empty .btn{ display:block; width:fit-content; margin:1.6rem auto 0; }

.cart-item{ display:grid; grid-template-columns:74px 1fr auto; gap:.9rem; align-items:center;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); padding:.7rem; position:relative; }
.cart-item.flash{ animation:flashIn .8s var(--ease); }
@keyframes flashIn{ 0%{ background:var(--sage); } 100%{ background:var(--white); } }
.cart-item .ci-img{ width:74px; height:74px; border-radius:var(--r-sm); background:var(--paper); display:flex; align-items:center; justify-content:center; padding:6px; }
.cart-item .ci-img img{ max-width:100%; max-height:100%; object-fit:contain; }
.cart-item .ci-series{ font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brass-d); }
.cart-item .ci-title{ font-family:var(--serif); font-size:.98rem; color:var(--ink); line-height:1.15; margin:.15rem 0 .5rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cart-item .ci-row{ display:flex; align-items:center; gap:.8rem; }
.cart-item .ci-price{ font-family:var(--serif); font-size:1rem; color:var(--ink); font-variant-numeric:tabular-nums; }
.cart-item.sale .ci-price{ color:var(--brass-d); }
.qty{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:var(--pill); background:var(--paper-2); }
.qty button{ width:26px; height:26px; border:none; background:none; cursor:pointer; color:var(--ink); font-size:.95rem; border-radius:50%; transition:.2s; }
.qty button:hover{ background:var(--paper-2); }
.qty span{ min-width:22px; text-align:center; font-size:.85rem; font-variant-numeric:tabular-nums; }
.ci-remove{ position:absolute; top:.5rem; right:.5rem; width:22px; height:22px; border:none; background:none; cursor:pointer;
  color:var(--muted); font-size:.95rem; border-radius:50%; transition:.2s; }
.ci-remove:hover{ color:#b23; background:var(--paper-2); }

/* footer */
.cart-foot{ border-top:1px solid var(--line); padding:1.2rem 1.5rem 1.5rem; background:var(--paper-2); }
.cart-sub{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:.3rem; }
.cart-sub .lbl{ font-size:.9rem; color:var(--ink-2); }
.cart-sub .val{ font-family:var(--serif); font-size:1.6rem; color:var(--ink); font-variant-numeric:tabular-nums; }
.cart-vat{ font-size:.72rem; color:#6b6157; margin-bottom:1.1rem; }
.cart-foot .btn{ width:100%; }
.cart-foot .cart-cont{ display:block; text-align:center; margin-top:.8rem; font-size:.82rem; color:#6b6157; cursor:pointer; }
.cart-foot .cart-cont:hover{ color:var(--ink); }

/* header badge pulse */
[data-cart-count].pulse{ animation:badgePulse .5s var(--ease); }
@keyframes badgePulse{ 0%{ transform:scale(1);} 40%{ transform:scale(1.5);} 100%{ transform:scale(1);} }

@media(max-width:540px){
  .cart-drawer{ border-radius:0; width:100vw; }
}


/* ===== theme.css ===== */
/* ============================================================
   FELIX theme: inner pages (block-editor content) on the V5 base.
   ============================================================ */

/* Inner pages have no dark hero behind the fixed nav: keep it solid. */
.felix-inner .h5-nav{ background:#2e2e2e; }

.felix-page{ background:#fff; color:var(--ink-2); padding:clamp(9.5rem,16vh,12rem) clamp(1.25rem,4vw,3rem) clamp(4rem,8vw,6rem); }
.felix-page__inner{ max-width:760px; margin:0 auto; }
.felix-entry__title{ font-size:clamp(2rem,4vw,3rem); margin:0 0 1.5rem; }
.felix-entry__content > * + *{ margin-top:1.1em; }
.felix-entry__content a{ color:var(--brass-d); }
.felix-entry__content img{ max-width:100%; height:auto; }
.felix-entry__sep{ border:0; border-top:1px solid var(--line, #e7e9eb); margin:3rem 0; }

/* Accessibility: visible keyboard focus everywhere. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--brass, #c31622); outline-offset:2px;
}

/* Skip link (keyboard / screen reader users) */
.felix-skip{ position:absolute; left:-9999px; top:0; z-index:300; background:#fff; color:#211d18; padding:.75rem 1rem; font:600 .9rem/1 var(--sans); }
.felix-skip:focus{ left:1rem; top:1rem; }

/* Footer legal links separated by a dot */
.ftr5-copy a + a::before{ content:" · "; color:#6f7177; }

/* EU withdrawal button (Germanized) under the legal links: quiet outline pill, clearly a button */
.ftr5-withdraw{ margin:1.1rem 0 0; }
.ftr5 .ftr5-withdraw-btn{ display:inline-flex; align-items:center; min-height:40px; padding:0 1.15rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.32); color:#e6e7ea !important; font:600 .8rem/1 var(--sans); letter-spacing:.02em;
  text-decoration:none; transition:background .2s, border-color .2s, color .2s; }
.ftr5 .ftr5-withdraw-btn:hover{ background:#fff; border-color:#fff; color:#3d3d3d !important; }

/* ===== Mobile menu: button + drawer (same main menu as desktop) ===== */
.h5-burger{ display:none; }
@media (max-width:1199px){ .h5-burger{ display:inline-flex; } } /* same breakpoint as the menu (v5.css) */

.felix-drawer{ position:fixed; inset:0; z-index:200; }
.felix-drawer[hidden]{ display:none; }
.felix-drawer__backdrop{ position:absolute; inset:0; background:rgba(8,9,11,.6); opacity:0; transition:opacity .25s ease; }
.felix-drawer__panel{ position:absolute; top:0; right:0; bottom:0; width:min(88vw,400px); background:#2e2e2e; color:#fff;
  display:flex; flex-direction:column; overflow-y:auto; transform:translateX(100%); transition:transform .25s ease;
  padding:1.25rem 1.5rem 2rem; box-shadow:-20px 0 50px rgba(0,0,0,.4); }
.felix-drawer.is-open .felix-drawer__backdrop{ opacity:1; }
.felix-drawer.is-open .felix-drawer__panel{ transform:none; }
.felix-drawer-open, .felix-drawer-open body{ overflow:hidden; }

.felix-drawer__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; }
.felix-drawer__logo img{ height:42px; width:auto; display:block; }
.felix-drawer__close{ background:none; border:0; color:#fff; padding:.5rem; cursor:pointer; display:inline-flex; }

.felix-drawer__list, .felix-drawer__sub{ list-style:none; margin:0; padding:0; }
.felix-drawer__list > li{ border-bottom:1px solid rgba(255,255,255,.1); }
.felix-drawer__list a{ display:block; color:#fff; text-decoration:none; font:500 1.15rem/1.3 var(--serif); padding:1rem 0; }
.felix-drawer__row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.felix-drawer__row a{ flex:1; }
.felix-drawer__toggle{ background:none; border:0; color:#fff; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.felix-drawer__toggle .caret{ width:9px; height:9px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(45deg); transition:transform .2s ease; margin-top:-4px; }
.felix-drawer__toggle[aria-expanded="true"] .caret{ transform:rotate(-135deg); margin-top:4px; }
.felix-drawer__sub{ padding:0 0 .75rem .25rem; }
.felix-drawer__sub a{ font:400 .98rem/1.3 var(--sans); color:rgba(255,255,255,.75); padding:.55rem 0; }
.felix-drawer__sub a:hover, .felix-drawer__list a:hover{ color:var(--brass-br, #dc3a46); }

@media (prefers-reduced-motion: reduce){
  .felix-drawer__backdrop, .felix-drawer__panel{ transition:none; }
}

/* Mega menus open for keyboard users too (BFSG): same states as :hover */
.h5-nav:has(.has-mega:focus-within){ background:rgba(46,46,46,.9); backdrop-filter:blur(14px); border-bottom-color:rgba(255,255,255,.08); }
.h5-nav .has-mega:focus-within > a{ color:#fff; }
.h5-nav .has-mega:focus-within > a .caret{ transform:rotate(-135deg) translateY(1px); }
.h5-nav .has-mega:focus-within .mega{ opacity:1; visibility:visible; transform:none; }

/* Touch targets: at least 44 px on mobile */
@media (max-width:1199px){ .h5-icon{ width:44px; height:44px; } }
.felix-drawer__close{ width:44px; height:44px; align-items:center; justify-content:center; padding:0; }
.felix-drawer__sub a{ padding:.75rem 0; }

/* Any inner page main (e.g. WooCommerce) clears the fixed nav */
.felix-inner main:not(.felix-page):not(.felix-blocks):not(.fb-page):not(.felix-pdp):not(.catalog):not(.felix-single):not(.fwd){ padding-top:clamp(7.5rem,12vh,9rem); }
.h5-nav .has-mega.mega-dismissed:focus-within .mega{ opacity:0; visibility:hidden; transform:translateY(-10px); }

/* Visually hidden, still read by screen readers */
.screen-reader-text{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Pages that open with a full-width image: nav transparent at the top, like the home page */
.felix-no-title .h5-nav:not(.scrolled):not(:has(.has-mega:hover)):not(:has(.has-mega:focus-within)):not(:has(.has-mega.open)){ background:transparent; }

/* News overview / archive / search (V5 news cards on white) */
.felix-list .news5-sec--light{ padding-top:clamp(8rem,13vh,9.5rem); }
.felix-list__title{ font-family:var(--serif); font-weight:500; color:var(--ink); margin:0; font-size:clamp(2rem,3.6vw,3rem); line-height:1.05; }
.felix-list__empty{ color:var(--ink-2); font-size:1.1rem; }
.felix-list .nav-links{ display:flex; gap:.5rem; justify-content:center; margin-top:2.5rem; flex-wrap:wrap; }
.felix-list .page-numbers{ display:inline-flex; min-width:44px; height:44px; align-items:center; justify-content:center; padding:0 .9rem; border:1px solid var(--line,#e7e9eb); border-radius:999px; color:var(--ink); text-decoration:none; font:600 .86rem/1 var(--sans); }
.felix-list .page-numbers.current{ background:var(--ink); color:#fff; border-color:var(--ink); }
.felix-list .ncard{ min-height:220px; }

/* News pictures are social posts with text in them: never cropped, the whole picture sits on a blurred copy */
.ncard-img{ position:relative; aspect-ratio:4/3; background:#3a3a3a; isolation:isolate; }
.ncard-img::before, .nsingle-media::before{ content:""; position:absolute; inset:-24px; z-index:-1; background:var(--bg) center/cover no-repeat; filter:blur(22px) brightness(.55) saturate(1.1); }
.ncard-img img{ object-fit:contain; }
.ncard-img--none{ display:none; }
.ncard--product .ncard-img{ aspect-ratio:16/10; } /* wide knife cut-outs in search results */

/* Single news post: dark band continuing the nav (picture | title + text, centred on each other), then the light
   "Weitere Beiträge" section. Everything shares the footer's container width (--boxw) so the page lines up. */
.felix-single{ --nw:var(--boxw,1700px); --npad:var(--boxpad,clamp(1rem,3vw,2rem)); background:#fff; color:var(--ink-2); }
.nsingle-band{ background:#2e2e2e; background-image:radial-gradient(60% 90% at 22% 40%, rgba(195,22,34,.13), transparent 70%), radial-gradient(70% 60% at 85% 0%, #3d3d3d 0%, transparent 70%); color:#c9ccd1; }
.nsingle{ max-width:var(--nw); margin:0 auto; padding:calc(128px + var(--wp-admin--admin-bar--height,0px) + clamp(2rem,5vw,4rem)) var(--npad) clamp(2.5rem,5vw,4rem); /* band runs up behind the fixed nav: no gap while it shrinks */
  display:grid; grid-template-columns:minmax(0,1fr); grid-template-areas:"head" "media" "body"; gap:clamp(1.5rem,3vw,2rem); }
.nsingle-head{ grid-area:head; }
.nsingle-media{ grid-area:media; margin:0; position:relative; overflow:hidden; isolation:isolate; border-radius:18px; background:#3a3a3a; box-shadow:0 30px 70px -30px rgba(0,0,0,.8); border:1px solid rgba(255,255,255,.08); }
.nsingle-media img{ display:block; width:100%; height:auto; max-height:min(76vh,720px); object-fit:contain; }
.nsingle-body{ grid-area:body; max-width:38rem; font-size:1.06rem; line-height:1.75; }
.nsingle-back{ display:inline-flex; align-items:center; gap:.5rem; min-height:44px; color:#e9eaec; text-decoration:none; font:600 .72rem/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; }
.nsingle-back .arr{ color:#ff8088; transition:transform .25s; }
.nsingle-back:hover .arr{ transform:translateX(-4px); }
.nsingle-back:focus-visible, .nsingle-pn__link:focus-visible{ outline:2px solid #ff8088; outline-offset:4px; border-radius:4px; }
.nsingle-kicker{ margin:1.2rem 0 .8rem; font:600 .7rem/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:#ff8088; }
.nsingle-title{ margin:0; font-family:var(--serif); font-weight:500; color:#fff; font-size:clamp(2rem,3.2vw,3rem); line-height:1.08; text-wrap:balance; overflow-wrap:break-word; hyphens:manual; }
.nsingle-body > :first-child{ margin-top:0; }
.nsingle-body > :last-child{ margin-bottom:0; }
.nsingle-body p{ margin:0 0 1.05em; }
.nsingle-body b, .nsingle-body strong{ color:#fff; font-weight:700; }
.nsingle-body a{ color:#ff8088; text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }
.nsingle-body a:hover{ color:#fff; }
.nsingle-body img{ max-width:100%; height:auto; border-radius:12px; }
.nsingle-body table{ width:100%; border-collapse:collapse; }
.nsingle-body td{ padding:.4rem .6rem; border-bottom:1px solid rgba(255,255,255,.12); vertical-align:top; }
@media (min-width:900px){
  .nsingle{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); grid-template-rows:auto auto; grid-template-areas:"media head" "media body"; column-gap:clamp(2.5rem,5vw,5rem); row-gap:1.6rem; align-content:center; }
  .nsingle-media{ align-self:center; }
  .nsingle-head{ align-self:end; }
  .nsingle-body{ align-self:start; }
  .nsingle--text{ grid-template-columns:minmax(0,46rem); grid-template-areas:"head" "body"; justify-content:center; }
}

/* previous / next: bottom of the dark band, full container width */
.nsingle-pn{ max-width:var(--nw); margin:0 auto; padding:0 var(--npad) clamp(2rem,4vw,3rem); display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,3vw,2.5rem); }
.nsingle-pn__link{ display:flex; flex-direction:column; gap:.55rem; padding-top:1.3rem; border-top:1px solid rgba(255,255,255,.12); text-decoration:none; color:#fff; transition:border-color .25s; }
.nsingle-pn__link:hover{ border-top-color:#ff8088; }
.nsingle-pn__link--prev{ grid-column:2; text-align:right; }
.nsingle-pn__dir{ font:600 .68rem/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:#b8bcc2; }
.nsingle-pn__title{ font-family:var(--serif); font-weight:500; font-size:1.15rem; line-height:1.3; }
.nsingle-pn__link:hover .nsingle-pn__title{ color:#ff8088; }
@media (max-width:600px){ .nsingle-pn{ grid-template-columns:1fr; } .nsingle-pn__link--prev{ grid-column:auto; text-align:left; } }
.nsingle-more.news5-sec--light{ padding-top:clamp(3.5rem,6vw,5rem); }

/* News overview: title + newest post as a feature in the dark band, then the card grid */
.nlist{ max-width:var(--nw); margin:0 auto; padding:calc(128px + var(--wp-admin--admin-bar--height,0px) + clamp(2rem,5vw,4rem)) var(--npad) clamp(2.5rem,5vw,4rem); }
.nlist-head .nsingle-kicker{ display:block; margin-top:0; }
.nlist-page{ margin:.8rem 0 0; color:#b8bcc2; font:600 .72rem/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; }
.nfeat{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(1.5rem,3vw,2rem); margin-top:clamp(2rem,4vw,3rem); text-decoration:none; color:#c9ccd1; }
.nfeat-media{ display:block; grid-area:auto; } /* shares .nsingle-media look, not its grid area */
.nfeat-media img{ transition:transform .5s var(--ease); }
.nfeat:hover .nfeat-media img{ transform:scale(1.02); }
.nfeat-body{ display:flex; flex-direction:column; gap:.9rem; }
.nfeat-kicker{ font:600 .7rem/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:#ff8088; }
.nfeat-title{ font-family:var(--serif); font-weight:500; color:#fff; font-size:clamp(1.6rem,2.6vw,2.4rem); line-height:1.12; text-wrap:balance; }
.nfeat-text{ font-size:1.06rem; line-height:1.7; max-width:36rem; }
.nfeat .ncard-link{ color:#fff; margin-top:.4rem; }
.nfeat:hover .nfeat-title{ color:#ff8088; }
.nfeat:focus-visible{ outline:2px solid #ff8088; outline-offset:6px; border-radius:20px; }
@media (min-width:900px){
  .nfeat{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); column-gap:clamp(2.5rem,5vw,5rem); align-items:center; }
  .nfeat--text{ grid-template-columns:minmax(0,46rem); }
}
.felix-news .news5-sec--light{ padding-top:clamp(3rem,5vw,4.5rem); }
@media (min-width:600px) and (max-width:860px){ .felix-news .news5-grid, .nsingle-more .news5-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:none; } } /* tablets: 2 columns at full width, not one narrow centred column */
.felix-news .nav-links{ display:flex; gap:.5rem; justify-content:center; margin-top:2.5rem; flex-wrap:wrap; }
.felix-news .page-numbers{ display:inline-flex; min-width:44px; height:44px; align-items:center; justify-content:center; padding:0 .9rem; border:1px solid var(--line,#e7e9eb); border-radius:999px; color:var(--ink); text-decoration:none; font:600 .86rem/1 var(--sans); }
.felix-news .page-numbers.current{ background:var(--ink); color:#fff; border-color:var(--ink); }
.felix-news .page-numbers:focus-visible{ outline:2px solid #c31622; outline-offset:2px; }
.nsingle-more .news5{ max-width:var(--nw); padding:0 var(--npad); }

/* 404 search */
.felix-search{ display:flex; gap:.6rem; margin:1.75rem 0; flex-wrap:wrap; }
.felix-search input{ flex:1; min-width:220px; padding:.9rem 1.2rem; border:1px solid #d0d3d8; border-radius:999px; font:400 1rem/1.2 var(--sans); }
.felix-search input:focus-visible{ outline:2px solid #c31622; outline-offset:2px; }

/* Accessibility (BFSG / WCAG 2.1 AA contrast ≥ 4.5:1, axe scan 2026-10-26):
   small red lines on dark use the lighter brand red, small grey text one step darker. */
.mfk-head .eyebrow, .ig-head .eyebrow, .ncard-cat{ color:#ff8088; }
.news5-sec--light .ncard-cat{ color:#ff8088; }

/* Payment methods actually offered (felix_payment_methods_html): light badges, readable on dark and light */
.felix-pay{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }
.felix-pay__label{ font:600 .62rem/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:#b8bcc2; }
.felix-pay__list{ display:flex; flex-wrap:wrap; gap:.4rem; margin:0; padding:0; list-style:none; }
.felix-pay__m{ display:inline-flex; align-items:center; min-height:30px; padding:.3rem .7rem; border-radius:7px; background:#fff; color:#211d18; font:600 .78rem/1 var(--sans); }
.felix-pay__m img{ display:block; height:18px; width:auto; }
.pv-pay.felix-pay{ margin:1.8rem 0 0; padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.08); }
@media (min-width:721px){ .ftr5-pay.felix-pay{ margin-right:76px; } } /* clear of the floating cart button at the page end */

/* Category pages (WooCommerce): card states the prototype had no data for, description below the products */
.card-cart--more{ text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
.card-stock{ font:600 .72rem/1.2 var(--sans); color:#c4c6cb; }
.card-tax a{ color:inherit; text-decoration:underline; text-underline-offset:.15em; }
.cat-about{ margin-top:clamp(2.5rem,5vw,4rem); padding-top:clamp(1.5rem,3vw,2.2rem); border-top:1px solid rgba(33,29,24,.12); max-width:52rem; color:#5c574e; font-size:.98rem; line-height:1.7; }
.cat-about p{ margin:0 0 1em; }
.cat-about h2, .cat-about h3{ color:var(--ink); font-family:var(--serif); font-weight:500; margin:1.2em 0 .5em; }
.catalog--empty .facets, .catalog--empty .toolbar, .catalog--empty .chips{ display:none; } /* nothing to filter yet */
.catalog--empty{ grid-template-columns:1fr; }
.catalog--empty .catalog-main{ grid-column:1 / -1; }
.added_to_cart.wc-forward{ display:none !important; } /* WooCommerce's "Warenkorb anzeigen" link: the side cart confirms instead */
.sel-price small a{ color:inherit; text-decoration:underline; text-underline-offset:.15em; }
/* Category pages, WCAG AA on the white cards/page (axe): shipping note, stock note, empty-state text */
.catpage--light .card-tax, .catpage--light .card-tax a, .catpage--light .card-stock, .catpage--light .empty p{ color:#6b6157; }
@media (max-width:820px){ .facets:not(.open){ visibility:hidden; transition:transform .35s ease, visibility 0s .35s; } .facets.open{ visibility:visible; transition:transform .35s ease; } } /* closed drawer out of the tab order */

/* Filter counts: AA contrast (prototype grey #8a7f70 is 3.9:1 on white) */
.catpage .opt .cnt { color: #6b6157; }

/* Desktop filter sidebar: sticky but taller than the window → scroll inside it, so the last filters are reachable */
@media (min-width:821px){ .catpage .facets { max-height: calc(100vh - 96px - 1rem); overflow-y: auto; overscroll-behavior: contain; } }
/* Mobile filter drawer above the fixed nav (z 100): otherwise the nav covers its heading and close button */
.catpage .scrim { z-index: 101; }
.catpage .facets.open { z-index: 102; }
@media (max-width:820px){
	.catpage .facets { padding-top: calc(1.5rem + var(--bar, 0px)); align-self: stretch; } /* grid child: start would keep it content-tall, so it never scrolled */
	.catpage .facets-close { top: calc(1rem + var(--bar, 0px)); }
	.catpage .facets-head { padding-right: 3.2rem; } /* "Zurücksetzen" clear of the close button */
	.facets-open .cv-side-cart-trigger { visibility: hidden; } /* floating cart sat on the last filter */
}

/* Real sale prices ("59,90 € 239,90 €") pushed the + button out of narrow cards: let the price wrap */
.catpage .card-priceblock { min-width: 0; flex: 1 1 auto; }
.catpage .card-price { flex-wrap: wrap; column-gap: .45rem; row-gap: 0; }
/* Toolbar at 360: count + Filter + Sortieren did not fit in one row */
@media (max-width:420px){ .catpage .toolbar { flex-wrap: wrap; row-gap: .6rem; } .catpage .toolbar-right { flex: 1 1 100%; justify-content: space-between; } .catpage .sort-field { min-width: 0; } .catpage .sort-field select { max-width: 11rem; min-width: 0; }
	.catpage .sort-field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* still names the select */ }
/* Narrow cards: "ANGEBOT" and the length chip collided → length goes to the bottom corner on sale cards */
.catpage .card.on-sale .badge.len { top: auto; bottom: .7rem; }
/* Keyboard in the scrolling sidebar: the checkbox is 0x0, so give its row room when scrolled into view */
.catpage .facets .opt input { scroll-margin-block: 1.5rem; }
@media (max-width:420px){ .catpage .sort-field { flex: 0 1 auto; } .catpage .sort-field select { max-width: 100%; width: 100%; } }

/* Header shrinks with the scroll (like Uncode): nav.js sets --shrink from 0 (top) to 1 (140px down), so logo and bar
   follow the scroll position instead of jumping. .h5-nav .h5-logo beats WooCommerce's ".woocommerce-page img{height:auto}",
   which showed the logo at full size on shop pages only. */
.h5-nav, .h5-nav.scrolled { padding-top: calc(1.6rem - .9rem * var(--shrink, 0)); padding-bottom: calc(1.6rem - .9rem * var(--shrink, 0)); }
.h5-nav .h5-logo { height: calc(76px - 32px * var(--shrink, 0)); width: auto; transition: none; } /* follows the scroll frame by frame; a transition made a page opened mid-scroll animate from the big logo */
.h5-nav { transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
@media (max-width: 860px) {
	.h5-nav, .h5-nav.scrolled { padding-top: calc(1.6rem - 1.05rem * var(--shrink, 0)); padding-bottom: calc(1.6rem - 1.05rem * var(--shrink, 0)); }
	.h5-nav .h5-logo { height: calc(58px - 18px * var(--shrink, 0)); }
}
/* Shadow under the bar: was 0 12px 34px at 45 % black. Now a soft, short shadow (negative spread keeps it off the sides)
   that fades in with the scroll, plus a light hairline */
.h5-nav.scrolled { box-shadow: 0 10px 22px -16px rgba(0,0,0,.32), 0 1px 0 rgba(255,255,255,.04); /* browsers without calc() in colours keep this */
	box-shadow: 0 10px 22px -16px rgba(0,0,0, calc(.32 * var(--shrink, 1))), 0 1px 0 rgba(255,255,255,.04); }
@media (prefers-reduced-motion: reduce) { .h5-nav { transition: none; } }
/* Logged-in staff: the fixed bar sat under the WordPress admin bar (logo cut off at the top) */
@media (min-width: 601px) { .admin-bar .h5-nav { top: var(--wp-admin--admin-bar--height, 32px); } }

/* Engraving on the knife (inc/engraving.php): optional block between price and quantity + button */
.pv-buy:has(.pv-engr) { flex-wrap: wrap; }
.pv-engr { order: -1; flex: 1 1 100%; min-width: 0; border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); padding: .9rem 0; margin: 0 0 .3rem; }
.pv-engr-toggle { display: flex; align-items: center; gap: .7rem; color: #fff; font: 500 1rem/1.3 var(--sans); cursor: pointer; }
.pv-engr-toggle input { width: 20px; height: 20px; margin: 0; accent-color: var(--brass); flex: none; }
.pv-engr-toggle small { color: #a9acb3; font-size: .88rem; font-weight: 400; }
.pv-engr-body { padding: .3rem 0 0 calc(20px + .7rem); }
.pv-engr:not(:has(.pv-engr-toggle input:checked)) .pv-engr-body { display: none; } /* no JS needed */
.pv-engr-field { margin: .9rem 0 0; display: flex; flex-direction: column; gap: .4rem; }
.pv-engr-field > label, .pv-engr-label { color: #e4e5e8; font: 500 .9rem/1.3 var(--sans); }
.pv-engr input[type=text] { width: 100%; min-width: 0; padding: .8rem 1rem; border-radius: 12px; background: #3d3d3d; color: #fff; border: 1px solid rgba(255,255,255,.18); font: 400 1rem/1.3 var(--sans); }
.pv-engr input[type=text]::placeholder { color: #8d9097; }
.pv-engr input[type=text]:focus { outline: 2px solid var(--brass); outline-offset: 1px; border-color: transparent; }
.pv-engr-hint { color: #a9acb3; font: 400 .8rem/1.4 var(--sans); }
.pv-engr-pills { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; }
.pv-engr-pills .pv-engr-label { flex: 1 1 100%; }
.pv-engr-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .95rem; border: 1px solid rgba(255,255,255,.18); border-radius: var(--pill); color: #fff; cursor: pointer; }
.pv-engr-pill:has(input:checked) { border-color: var(--brass); background: rgba(195,22,34,.14); }
.pv-engr-pill:has(input:focus-visible) { outline: 2px solid var(--brass); outline-offset: 2px; }
.pv-engr-pill input { accent-color: var(--brass); margin: 0; }
.pv-engr-font--schreib span { font-family: "Segoe Script", "Brush Script MT", cursive; font-size: 1.05rem; }
.pv-engr-note { flex: 1 1 100%; order: -1; margin: 0 0 .4rem; color: #c9cbd0; font-size: .95rem; line-height: 1.5; }
.pv-engr-note a { color: #fff; }
/* engraving details under the item name in the side cart (felix-checkout) */
.cv-side-cart__item-meta { margin: .25rem 0 .35rem; font-size: .78rem; line-height: 1.4; color: #6b6157; }
.cv-side-cart__item-meta dl, .cv-side-cart__item-meta dd, .cv-side-cart__item-meta p { margin: 0; }
.cv-side-cart__item-meta dt { float: left; clear: left; margin-right: .3rem; font-weight: 600; }
/* Checkout replaced by WooCommerce's "cart errors" message (no form): it sat behind the fixed header */
.woocommerce-checkout main.felix-blocks:not(:has(form.checkout)) { padding: calc(128px + 3rem) clamp(1rem, 4vw, 3rem) 5rem; min-height: 55vh; }
/* item details (engraving) in the checkout order summary (felix-checkout, dark panel) */
.cv-checkout__product-meta { margin: .3rem 0 .4rem; font-size: .8rem; line-height: 1.4; color: #c9cbd0; }
.cv-checkout__product-meta dl, .cv-checkout__product-meta dd, .cv-checkout__product-meta p { margin: 0; }
.cv-checkout__product-meta dt { float: left; clear: left; margin-right: .3rem; font-weight: 600; color: #fff; }
/* Sale price on the dark product page: price stays white (red text on near-black read dull), old price grey and
   crossed out, the saving as a small red pill — the usual sale pattern, calmer on dark */
.pv-detail.sale .pv-price .now { color: #fff; }
.pv-price .was { text-decoration-color: currentColor; }
.pv-price .save { align-self: center; border-radius: var(--pill); padding: .38rem .7rem; font-size: .78rem; letter-spacing: .02em; }

/* Product hero: cut-outs are trimmed to the knife now (tools/oxid-to-wc.py), so size by WIDTH — long thin blades
   get big; chunky products (cleavers, blocks, HORL) stop at the height cap and keep their proportions */
.pv-hero:not(.pv-hero--photo) .pv-hero-img { width: auto; height: auto; max-width: min(74vw, 1120px); max-height: clamp(170px, 28vh, 320px); }
@media (max-width: 600px) { .pv-hero:not(.pv-hero--photo) .pv-hero-img { max-width: 90vw; max-height: 220px; } }
/* Trimmed cut-outs (transparent border removed): the knife used to fill ~81 % of its picture, now ~94 %.
   These spots were tuned for the padded files, so their widths are scaled by 0.86 to keep the same knife size. */
.sel-knife { width: 100%; }
@media (max-width: 1100px) { .sel-knife { width: 107%; } }
.pv-rel-media img { width: 103%; }
.pv-rel--photo .pv-rel-media img { width: 100%; }
.card-media img:not(.is-photo) { max-width: 86%; max-height: 86%; }
.card-media img.is-compact, .card:hover .card-media img.is-compact { transform: none; max-width: 78%; max-height: 74%; }
.card:hover .card-media img.is-compact { transform: scale(1.04); }
/* Review 0.16.0: the home knife printed with width/height attributes and no height:auto → stretched 2.5× */
.sel-knife { height: auto; }
/* compact cut-outs (sets, blocks, boards, HORL) upright and contained on home and in related products */
.sel-knife.is-compact { width: auto; max-width: 70%; max-height: 90%; transform: translate(-50%,-50%); }
.sel-item:hover .sel-knife.is-compact { transform: translate(-50%,-50%) scale(1.04); }
.sel-knife.is-set { width: auto; max-width: 86%; max-height: 100%; transform: translate(-50%,-50%); } /* a whole set chosen in the block: shown larger than a single compact knife */
.sel-item:hover .sel-knife.is-set { transform: translate(-50%,-50%) scale(1.04); }
.pv-rel-media img.is-compact { width: auto; max-width: 62%; max-height: 100%; transform: translate(-50%,-50%); }
.pv-rel:hover .pv-rel-media img.is-compact { transform: translate(-50%,-50%) scale(1.04); }
/* hero height follows the (now trimmed, shorter) knife: no big empty band under it */
.pv-hero:not(.pv-hero--photo) { min-height: clamp(460px, 60vh, 620px); display: flex; flex-direction: column; justify-content: safe center;
	padding: calc(160px + var(--wp-admin--admin-bar--height, 0px)) 0 clamp(44px, 6vh, 72px); box-sizing: border-box; } /* room for the nav on top, a fixed gap at the bottom, knife centred between */
.pv-hero:not(.pv-hero--photo) .pv-hero-stage { position: relative; left: auto; top: auto; transform: none; margin: 0 auto; }
@media (max-width: 600px) { .pv-hero:not(.pv-hero--photo) { min-height: 400px; padding-top: 136px; } }
/* long thin knives are low: a lower hero so the space under the blade matches the space above */
.pv-hero--long:not(.pv-hero--photo) { min-height: clamp(380px, 42vh, 500px); }
@media (max-width: 600px) { .pv-hero--long:not(.pv-hero--photo) { min-height: 330px; } }

/* Hero thumbnail switcher (products with more than one picture) */
.pv-hero-frame { display: flex; align-items: center; justify-content: center; width: 100%; }
.pv-hero-img.is-photo { border-radius: 14px; filter: none; box-shadow: 0 24px 50px rgba(0,0,0,.5); }
.pv-thumbs { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: clamp(1rem, 2.4vh, 1.6rem); }
.pv-thumb { width: 58px; height: 58px; padding: 6px; border-radius: 12px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05); cursor: pointer; transition: border-color .2s, background .2s; }
.pv-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pv-thumb--photo { padding: 0; overflow: hidden; }
.pv-thumb--photo img { object-fit: cover; }
.pv-thumb:hover { border-color: rgba(255,255,255,.4); }
.pv-thumb[aria-pressed="true"] { border-color: var(--brass); background: rgba(195,22,34,.14); }
.pv-thumb:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
@media (max-width: 600px) { .pv-thumb { width: 50px; height: 50px; } }


/* ===== Vertrag widerrufen (tpl-withdrawal.php): dark band as the news pages, Germanized form in a white card ===== */
.fwd{ --nw:var(--boxw,1700px); --npad:var(--boxpad,clamp(1rem,3vw,2rem)); }
.fwd-band{ color:#c9ccd1; }
.fwd-in{ max-width:var(--nw); margin:0 auto; /* footer width, as every page */
  padding:calc(128px + var(--wp-admin--admin-bar--height,0px) + clamp(2rem,5vw,4rem)) var(--npad) clamp(3rem,6vw,5.5rem); }
.fwd-head{ max-width:40rem; margin-bottom:clamp(1.8rem,3.5vw,2.8rem); }
.fwd-head .nsingle-kicker{ margin-top:0; }
.fwd-lead{ margin:1rem 0 0; font-size:1.06rem; line-height:1.65; color:#c9ccd1; }
.fwd-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(1.5rem,3vw,2.5rem); align-items:start; }
@media (min-width:900px){ .fwd-grid{ grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); } }

/* card */
.fwd-card{ background:#fff; color:var(--ink-2); border-radius:20px; padding:clamp(1.4rem,3.5vw,2.6rem);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.8); }
.fwd-card form.order-withdrawal-request{ margin:0; transition:opacity .2s; }
.fwd-card form.loading{ opacity:.55; pointer-events:none; }
.fwd-card .eu-owb-form-fields{ display:grid; grid-template-columns:minmax(0,1fr); gap:1.1rem 1rem; }
@media (min-width:560px){ .fwd-card .eu-owb-form-fields{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .fwd-card .eu-owb-form-fields > .form-row-full, .fwd-card .eu-owb-form-fields > .eu-owb-order-item-select-wrapper{ grid-column:1 / -1; } }
.fwd-card .clear{ display:none; }
.fwd .fwd-card form .form-row{ float:none; width:auto; margin:0; padding:0; } /* WooCommerce: first/last name 47% floats */
.fwd-card .form-row label{ display:block; margin:0 0 .45rem; font:600 .86rem/1.35 var(--sans); color:var(--ink); }
.fwd-card .form-row .required{ color:var(--brass,#c31622); text-decoration:none; border:0; }
.fwd-card .woocommerce-input-wrapper{ display:block; }
/* .fwd .fwd-card form .form-row … outweighs WooCommerce's own .woocommerce form .form-row rules */
.fwd .fwd-card form .form-row input.input-text, .fwd .fwd-card form .form-row select, .fwd .fwd-card form .form-row textarea{ width:100%; box-sizing:border-box; min-height:50px; margin:0;
  padding:13px 16px; border:1px solid #948d84; /* 3:1 against the white card (WCAG 1.4.11) */ border-radius:12px; background:#fbfaf8; color:var(--ink);
  font:400 1rem/1.3 var(--sans); transition:border-color .2s, box-shadow .2s, background .2s; }
.fwd .fwd-card form .form-row textarea{ min-height:110px; resize:vertical; }
.fwd .fwd-card form .form-row select{ appearance:none; padding-right:42px; cursor:pointer;
  background:#fbfaf8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; }
.fwd .fwd-card form .form-row input.input-text:hover, .fwd .fwd-card form .form-row select:hover{ border-color:#6f685f; }
.fwd .fwd-card form .form-row input.input-text:focus, .fwd .fwd-card form .form-row select:focus, .fwd .fwd-card form .form-row textarea:focus{ outline:none; background:#fff;
  border-color:var(--brass,#c31622); box-shadow:0 0 0 1px var(--brass,#c31622); }
.fwd .fwd-card form .form-row.woocommerce-invalid input.input-text, .fwd .fwd-card form .form-row.woocommerce-invalid select{ border-color:#c31622; background:#fff6f6; }
.fwd .fwd-card form .form-row.woocommerce-validated input.input-text{ border-color:#948d84; }
.fwd .fwd-card form .form-row.woocommerce-invalid label{ color:#b0141f; }
.fwd-card .withdrawal-inline-error-message, .fwd-card .checkout-inline-error-message{ margin:.4rem 0 0; color:#b0141f; font-size:.84rem; }
/* order details + item choice (logged-in customers) */
.fwd-card .eu-owb-woocommerce-withdrawal-order-details{ margin:.2rem 0 1rem; color:var(--ink-2); }
.fwd-card mark{ background:none; color:var(--ink); font-weight:700; }
.fwd-card input[type=checkbox]{ width:18px; height:18px; accent-color:var(--brass,#c31622); vertical-align:-3px; margin:0 .5rem 0 0; }
.fwd-card .woocommerce-form__label-for-checkbox, .fwd-card .form-row.order-withdrawal-manually-select-items-checkbox label{ display:flex; align-items:center; gap:.2rem; font-weight:500; cursor:pointer; }
.fwd-card table.order-withdrawal-request-items-table{ width:100%; margin:1rem 0 0; border:1px solid #e6e1da; border-radius:12px; border-collapse:separate; border-spacing:0; overflow:hidden; }
.fwd-card .order-withdrawal-request-items-table th, .fwd-card .order-withdrawal-request-items-table td{ padding:.75rem .9rem; text-align:left; vertical-align:middle; border-bottom:1px solid #eee9e2; font-size:.92rem; }
.fwd-card .order-withdrawal-request-items-table th{ background:#f6f4f1; font:600 .72rem/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:#6b635a; }
.fwd-card .order-withdrawal-request-items-table tr:last-child td{ border-bottom:0; }
.fwd-card .order-withdrawal-request-items-table a{ color:var(--ink); }
.fwd-card .order-withdrawal-request-items-table .quantity input{ width:4.5rem; min-height:40px; padding:6px 8px; border:1px solid #d5d0c9; border-radius:10px; }
/* submit */
.fwd .fwd-card form .form-row-submit{ margin-top:1.8rem; }
.fwd .fwd-card form .form-row-submit:has(.button[style*="none"]){ margin:0; } /* after success the plugin hides the button */
.fwd-card .eu-owb-notice-wrapper:has(.woocommerce-message){ margin-bottom:0; }
.fwd-card .eu-owb-order-item-select-wrapper{ overflow-x:auto; } /* items table on 320px phones */
.fwd-card .eu-owb-notice-wrapper .woocommerce-error + .woocommerce-error{ margin-top:-.4rem; } /* several messages read as one group */
.fwd-card .form-row-submit .button{ display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 2rem; border:0; border-radius:999px;
  background:var(--brass,#c31622); color:#fff; font:600 1rem/1 var(--sans); letter-spacing:.01em; cursor:pointer;
  box-shadow:0 12px 26px -12px rgba(195,22,34,.7); transition:background .2s, transform .2s; }
.fwd-card .form-row-submit .button:hover{ background:#a8121c; transform:translateY(-1px); }
.fwd-card .form-row-submit .button:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.fwd-card .form-row-submit .button:disabled{ opacity:.6; cursor:wait; transform:none; }
@media (max-width:559px){ .fwd-card .form-row-submit .button{ width:100%; } }
/* messages (Germanized adds them by JS: .woocommerce-error.notice / .woocommerce-message) */
.fwd-card .eu-owb-notice-wrapper:empty{ display:none; }
.fwd-card .eu-owb-notice-wrapper{ margin:0 0 1.2rem; scroll-margin-top:calc(90px + var(--wp-admin--admin-bar--height,0px)); } /* the plugin scrolls the message into view: not under the fixed nav */
.fwd-card .eu-owb-notice-wrapper .woocommerce-error, .fwd-card .eu-owb-notice-wrapper .woocommerce-message,
:is(.fwd-card,.fac-body) .woocommerce-error, :is(.fwd-card,.fac-body) .woocommerce-message, :is(.fwd-card,.fac-body) .woocommerce-info{
  position:relative; margin:0 0 .8rem; padding:1rem 1.1rem 1rem 3.1rem; list-style:none; border:0; border-radius:12px;
  font:500 .95rem/1.5 var(--sans); }
:is(.fwd-card,.fac-body) .woocommerce-error{ background:#fff1f1; color:#8f0f19; box-shadow:inset 3px 0 0 #c31622; }
:is(.fwd-card,.fac-body) .woocommerce-message{ background:#f1f7f2; color:#1f4d2c; box-shadow:inset 3px 0 0 #2f7a45; }
:is(.fwd-card,.fac-body) .woocommerce-info{ background:#f6f4f1; color:var(--ink-2); box-shadow:inset 3px 0 0 #b0b4ba; }
.fwd-card .eu-owb-form-fields > .woocommerce-info, .fwd-card .eu-owb-form-fields > p{ grid-column:1 / -1; margin:0; }
:is(.fwd-card,.fac-body) .woocommerce-error::before, :is(.fwd-card,.fac-body) .woocommerce-message::before, :is(.fwd-card,.fac-body) .woocommerce-info::before{
  content:""; position:absolute; left:1.05rem; top:1.05rem; width:20px; height:20px; border-radius:50%; font-family:inherit;
  background:no-repeat center/12px; }
:is(.fwd-card,.fac-body) .woocommerce-error::before{ background-color:#c31622;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M12 6v8M12 18.5v.5'/%3E%3C/svg%3E"); }
:is(.fwd-card,.fac-body) .woocommerce-info::before{ background-color:#b0b4ba;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M12 11v7M12 5.5v.5'/%3E%3C/svg%3E"); }
:is(.fwd-card,.fac-body) .woocommerce-message::before{ background-color:#2f7a45;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.fwd-card .eu-owb-notice-wrapper .woocommerce-message{ margin:0; padding:1.4rem 1.3rem 1.4rem 3.4rem; font-size:1.05rem; }

/* help beside the card */
.fwd-aside{ display:grid; gap:1rem; }
.fwd-note{ padding:1.2rem 1.3rem; border:1px solid rgba(255,255,255,.1); border-radius:16px; background:rgba(255,255,255,.03); }
.fwd-note h2{ margin:0 0 .45rem; font:600 .72rem/1.2 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:#fff; }
.fwd-note p{ margin:0; font-size:.95rem; line-height:1.6; color:#b9bcc2; }
.fwd-note a{ color:#e9eaec; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(255,255,255,.35); }
.fwd-note a:hover{ color:#fff; text-decoration-color:#ff8088; }
.fwd-note a:focus-visible{ outline:2px solid #ff8088; outline-offset:3px; border-radius:3px; }
.fwd-note .fwd-link{ text-decoration:none; font-weight:600; }
.fwd-note .fwd-link .arr{ color:#ff8088; display:inline-block; transition:transform .25s; }
.fwd-note .fwd-link:hover .arr{ transform:translateX(4px); }


/* ===== Mein Konto (tpl-account.php): band + cards as the withdrawal page; signed in = menu beside the card ===== */
.fac .fwd-head{ max-width:44rem; }
.fac-body > .woocommerce{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(1.2rem,2.5vw,2rem); align-items:start; }
.fac-body > .woocommerce > .woocommerce-notices-wrapper:empty{ display:none; }
.fac-body > .woocommerce::before, .fac-body > .woocommerce::after{ display:none; } /* WooCommerce clearfix would take grid cells */
.fac-body > .woocommerce > .woocommerce-notices-wrapper{ grid-column:1 / -1; max-width:44rem; }
.fac-body > .woocommerce > .woocommerce-notices-wrapper > :last-child{ margin-bottom:0; }
.fac [role=alert]:focus, .fac .woocommerce-error:focus, .fac .woocommerce-message:focus, .fac .woocommerce-info:focus{ outline:none; } /* WooCommerce moves focus to the message for screen readers; no frame needed */
.fac .lost_reset_password > p:first-child{ margin:0 0 1.3rem; color:var(--ink-2); }
.fac .fwd-card{ min-width:0; }
.fac .fwd-card > :first-child{ margin-top:0; }
.fac .fwd-card > :last-child{ margin-bottom:0; }
.fac .fwd-card .woocommerce-notices-wrapper:empty{ display:none; }
.fac .fwd-card .woocommerce-notices-wrapper > :last-child{ margin-bottom:1.2rem; }
.fac .fwd-card p{ line-height:1.6; }
.fac .fwd-card a:not(.button):not(.fac-btn){ color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(195,22,34,.5); }
.fac .fwd-card a:not(.button):not(.fac-btn):hover{ color:var(--brass,#c31622); }
.fac .fwd-card a:focus-visible, .fac .fwd-card button:focus-visible{ outline:2px solid var(--brass,#c31622); outline-offset:3px; border-radius:4px; }
.fac .fwd-card h2, .fac .fwd-card h3{ margin:0 0 1rem; font-family:var(--serif); font-weight:500; font-size:clamp(1.3rem,2vw,1.55rem); line-height:1.2; color:var(--ink); }
.fac .fwd-card form .form-row{ margin:0 0 1.1rem; }
.fac .fwd-card form .form-row label{ display:block; margin:0 0 .45rem; font:600 .86rem/1.35 var(--sans); color:var(--ink); }
.fac .fwd-card form .form-row .required{ color:var(--brass,#c31622); text-decoration:none; border:0; }
.fac .fwd-card .clear{ display:none; }
.fac .fwd-card fieldset{ grid-column:1 / -1; margin:1.2rem 0 0; padding:0; border:0; min-width:0; }
.fac .fwd-card legend + *{ clear:left; }
.fac .fwd-card legend{ float:left; width:100%; margin:0 0 1rem; padding:1.4rem 0 0; border-top:1px solid #eee9e2; font-family:var(--serif); font-weight:500; font-size:1.25rem; color:var(--ink); }
.fac .fwd-card em{ display:block; margin-top:.4rem; font-style:normal; font-size:.84rem; color:#6b635a; }
/* fields: as the withdrawal form (3:1 border, red focus) */
.fac .fwd-card form .form-row input.input-text, .fac .fwd-card form .form-row select, .fac .fwd-card form .form-row textarea{ width:100%; box-sizing:border-box; min-height:50px; margin:0;
  padding:13px 16px; border:1px solid #948d84; border-radius:12px; background:#fbfaf8; color:var(--ink); font:400 1rem/1.3 var(--sans); transition:border-color .2s, box-shadow .2s, background .2s; }
.fac .fwd-card form .form-row input.input-text:hover{ border-color:#6f685f; }
.fac .fwd-card form .form-row input.input-text:focus, .fac .fwd-card form .form-row select:focus, .fac .fwd-card form .form-row textarea:focus{ outline:none; background:#fff;
  border-color:var(--brass,#c31622); box-shadow:0 0 0 1px var(--brass,#c31622); }
.fac .fwd-card form .form-row.woocommerce-invalid input.input-text{ border-color:#c31622; background:#fff6f6; }
.fac .fwd-card form .form-row.woocommerce-validated input.input-text{ border-color:#948d84; }
.fac .fwd-card .password-input{ position:relative; display:block; }
.fac .fwd-card .password-input input.input-text{ padding-right:52px; }
.fac .fwd-card .show-password-input{ position:absolute; top:50%; right:6px; transform:translateY(-50%); width:40px; height:40px; margin:0; padding:0;
  border:0; border-radius:10px; background:transparent; color:#6b635a; cursor:pointer; display:grid; place-items:center; }
.fac .fwd-card .show-password-input:hover{ background:#f1eee9; color:var(--ink); }
.fac .fwd-card .show-password-input::after{ position:static; margin:0; }
/* country select (selectWoo) looks like the inputs */
.fac .fwd-card .select2-container{ width:100% !important; }
.fac .fwd-card .select2-container .select2-selection--single{ height:50px; border:1px solid #948d84; border-radius:12px; background:#fbfaf8; }
.fac .fwd-card .select2-container .select2-selection--single .select2-selection__rendered{ line-height:48px; padding:0 42px 0 16px; color:var(--ink); font:400 1rem/48px var(--sans); }
.fac .fwd-card .select2-container .select2-selection--single .select2-selection__arrow{ height:48px; right:10px; }
.fac .fwd-card .select2-container--focus .select2-selection--single, .fac .fwd-card .select2-container--open .select2-selection--single{ border-color:var(--brass,#c31622); box-shadow:0 0 0 1px var(--brass,#c31622); background:#fff; }
/* two-up fields (first/last name, postcode/city) */
.fac .fwd-card .woocommerce-address-fields__field-wrapper, .fac .fwd-card form.edit-account{ display:grid; grid-template-columns:minmax(0,1fr); column-gap:1rem; }
@media (min-width:560px){
  .fac .fwd-card .woocommerce-address-fields__field-wrapper, .fac .fwd-card form.edit-account{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .fac .fwd-card .woocommerce-address-fields__field-wrapper > *, .fac .fwd-card form.edit-account > *{ grid-column:1 / -1; }
  .fac .fwd-card .woocommerce-address-fields__field-wrapper > .form-row-first, .fac .fwd-card form.edit-account > .form-row-first{ grid-column:1; }
  .fac .fwd-card .woocommerce-address-fields__field-wrapper > .form-row-last, .fac .fwd-card form.edit-account > .form-row-last{ grid-column:2; }
}
.fac .fwd-card form .form-row-first, .fac .fwd-card form .form-row-last, .fac .fwd-card form .form-row-wide{ float:none; width:auto; }
/* checkbox (Angemeldet bleiben, Germanized) */
.fac .fwd-card input[type=checkbox]{ width:18px; height:18px; margin:0; accent-color:var(--brass,#c31622); flex:none; }
.fac .fwd-card .woocommerce-form__label-for-checkbox{ display:inline-flex; align-items:center; gap:.55rem; font:500 .92rem/1.4 var(--sans); color:var(--ink-2); cursor:pointer; }
/* buttons */
.fac .fwd-card .button, .fac .fac-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:52px; padding:0 1.8rem; border:0; border-radius:999px;
  background:var(--brass,#c31622); color:#fff; font:600 1rem/1 var(--sans); letter-spacing:.01em; text-decoration:none; cursor:pointer;
  box-shadow:0 12px 26px -12px rgba(195,22,34,.7); transition:background .2s, transform .2s; }
.fac .fwd-card .button:hover, .fac .fac-btn:hover{ background:#a8121c; color:#fff; transform:translateY(-1px); }
.fac .fwd-card .button:focus-visible, .fac .fac-btn:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
@media (max-width:559px){ .fac .fwd-card form .button{ width:100%; } }
.fac .fac-more{ display:inline-flex; align-items:center; gap:.4rem; min-height:44px; font-weight:600; color:var(--ink); text-decoration:none !important; }
.fac .fac-more .arr{ color:var(--brass,#c31622); transition:transform .25s; }
.fac .fac-more:hover .arr{ transform:translateX(4px); }

/* signed out: login + register */
.fac-login{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(1.2rem,2.5vw,2rem); align-items:start; }
@media (min-width:900px){ .fac-login{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); } }
.fac .fac-body .fac-login::before, .fac .fac-body .fac-login::after{ display:none; } /* WooCommerce clearfix (.woocommerce .col2-set) */
.fac .fac-body .fac-login > .fwd-card{ float:none; width:auto; } /* WooCommerce: .woocommerce .col2-set .col-1 = 48% float */
.fac .fac-card-title{ margin-bottom:1.3rem; }
.fac-login form.login{ margin:0; padding:0; border:0; }
.fac-login form.login .form-row:has(.woocommerce-form-login__rememberme){ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.4rem; }
.fac-login form.login .woocommerce-form-login__rememberme{ order:2; margin:0; }
.fac-login form.login .form-row::before, .fac-login form.login .form-row::after{ display:none; } /* WooCommerce clearfix would sit between button and checkbox */
.fac-login form.login .woocommerce-form-login__submit{ order:1; float:none; margin:0; }
.fac-login .lost_password{ margin:1.2rem 0 0; font-size:.94rem; }
.fac-register{ background:#f6f4f1; box-shadow:none; }
.fac-register form.register{ margin:0; padding:0; border:0; }
.fac-register form.register > p:not(.form-row){ font-size:.9rem; color:#6b635a; }
.fac-perks{ margin:0 0 1.4rem; padding:0; list-style:none; display:grid; gap:.55rem; }
.fac-perks li{ position:relative; padding-left:1.6rem; font-size:.97rem; line-height:1.5; color:var(--ink-2); }
.fac-perks li::before{ content:""; position:absolute; left:0; top:.32em; width:16px; height:16px; border-radius:50%;
  background:var(--brass,#c31622) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center/10px; }
.fac-guest{ margin:1.3rem 0 0; padding-top:1.1rem; border-top:1px solid #e3ddd5; font-size:.9rem; color:#6b635a; }
.fac-register form .button{ background:var(--ink); box-shadow:none; }
.fac-register form .button:hover{ background:#000; }

/* signed in: menu beside the card */
@media (min-width:900px){ .fac--in .fac-body > .woocommerce{ grid-template-columns:220px minmax(0,1fr); gap:clamp(1.5rem,3vw,3rem); } }
.fac .woocommerce-MyAccount-navigation, .fac .woocommerce-MyAccount-content{ float:none; width:auto; }
.fac .woocommerce-MyAccount-navigation ul{ margin:0; padding:0; list-style:none; display:grid; gap:.25rem; }
.fac .woocommerce-MyAccount-navigation a{ display:flex; align-items:center; min-height:46px; padding:0 1rem; border-radius:12px; color:#c9ccd1;
  font:500 .98rem/1.2 var(--sans); text-decoration:none; transition:background .2s, color .2s; }
.fac .woocommerce-MyAccount-navigation a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.fac .woocommerce-MyAccount-navigation .is-active a{ background:rgba(255,255,255,.08); color:#fff; box-shadow:inset 3px 0 0 #ff8088; }
.fac .woocommerce-MyAccount-navigation a:focus-visible{ outline:2px solid #ff8088; outline-offset:2px; }
.fac .woocommerce-MyAccount-navigation-link--customer-logout{ margin-top:.6rem; padding-top:.6rem; border-top:1px solid rgba(255,255,255,.1); }
.fac .woocommerce-MyAccount-navigation-link--customer-logout a{ color:#9a9ea6; }
@media (max-width:899px){ /* phones/tablets: one row that scrolls sideways */
  .fac .woocommerce-MyAccount-navigation{ margin:0 calc(-1 * var(--npad)); padding:0 var(--npad); overflow-x:auto; scrollbar-width:none; }
  .fac .woocommerce-MyAccount-navigation::-webkit-scrollbar{ display:none; }
  .fac .woocommerce-MyAccount-navigation ul{ display:flex; gap:.4rem; width:max-content; }
  .fac .woocommerce-MyAccount-navigation a{ min-height:42px; padding:0 1rem; border:1px solid rgba(255,255,255,.14); border-radius:999px; white-space:nowrap; font-size:.92rem; }
  .fac .woocommerce-MyAccount-navigation .is-active a{ box-shadow:none; background:#fff; color:var(--ink); border-color:#fff; }
  .fac .woocommerce-MyAccount-navigation-link--customer-logout{ margin:0; padding:0; border:0; }
}

/* overview tiles */
.fac-tiles{ display:grid; grid-template-columns:minmax(0,1fr); gap:1rem; }
@media (min-width:640px){ .fac-tiles{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .fac-tile--wide{ grid-column:1 / -1; } }
.fac-tile{ display:flex; flex-direction:column; padding:1.3rem 1.4rem; border:1px solid #e6e1da; border-radius:16px; background:#fbfaf8; }
.fac .fwd-card .fac-tile-h{ margin:0 0 .8rem; font:600 .72rem/1.2 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:#6b635a; }
.fac .fwd-card .fac-tile address.fac-tile-text{ padding:0; border:0; border-radius:0; background:none; } /* not the boxed order/address-page style */
.fac-tile-text{ margin:0; font-style:normal; line-height:1.6; color:var(--ink-2); overflow-wrap:anywhere; }
.fac-tile-links{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.4rem; margin:auto 0 0; padding-top:1rem; }
.fac-last-no{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .8rem; margin:0; font-family:var(--serif); font-size:1.5rem; color:var(--ink); }
.fac-last-meta{ margin:.3rem 0 0; color:var(--ink-2); }
.fac-help{ margin:1.4rem 0 0; font-size:.92rem; color:#6b635a; }

/* status label */
.fac-status{ display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .7rem; border-radius:999px; font:600 .78rem/1.2 var(--sans); white-space:nowrap; vertical-align:middle; }
.fac-status::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.fac-status--open{ background:#fdf3e1; color:#8a5a00; }
.fac-status--done{ background:#e9f4ec; color:#1f6a37; }
.fac-status--off{ background:#f1f1f2; color:#5c5f66; }

/* tables (orders, order details) */
.fac .fwd-card table.shop_table{ width:100%; margin:0 0 1.5rem; border:1px solid #e6e1da; border-radius:14px; border-collapse:separate; border-spacing:0; overflow:hidden; }
.fac .fwd-card table.shop_table th, .fac .fwd-card table.shop_table td{ padding:.9rem 1rem; border:0; border-bottom:1px solid #eee9e2; text-align:left; vertical-align:middle; font-size:.95rem; line-height:1.45; }
.fac .fwd-card table.shop_table thead th{ background:#f6f4f1; font:600 .72rem/1.2 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:#6b635a; }
.fac .fwd-card table.shop_table tbody tr:last-child > *, .fac .fwd-card table.shop_table tfoot tr:last-child > *{ border-bottom:0; }
.fac .fwd-card table.shop_table tfoot th, .fac .fwd-card table.shop_table tfoot td{ background:#fbfaf8; font-weight:500; }
.fac .fwd-card table.shop_table .product-total, .fac .fwd-card table.shop_table tfoot td{ text-align:right; }
.fac .fwd-card table.shop_table .product-total{ white-space:nowrap; }
.fac .fwd-card .woocommerce-order-details{ overflow-x:auto; } /* never wider than the card */
.fac .fwd-card table.shop_table .wc-item-meta{ margin:.5rem 0 0; padding:0; list-style:none; font-size:.88rem; color:#6b635a; }
.fac .fwd-card table.shop_table .wc-item-meta li{ margin:.15rem 0; }
.fac .fwd-card table.shop_table .wc-item-meta p{ display:inline; margin:0; }
.fac .fwd-card table.shop_table .wc-item-meta strong{ color:var(--ink-2); font-weight:600; }
.fac .fwd-card .woocommerce-orders-table__cell-order-actions{ text-align:right; }
.fac .fwd-card .woocommerce-orders-table .button{ min-height:40px; padding:0 1.1rem; font-size:.9rem; box-shadow:none; background:var(--ink); }
.fac .fwd-card .woocommerce-orders-table .button:hover{ background:#000; }
.fac .fwd-card .woocommerce-orders-table__cell-order-number a{ font-weight:700; }
.fac .fwd-card .woocommerce-orders-table__cell-order-actions .button + .button{ margin-left:.4rem; }
/* withdrawal (Germanized): available, but never the loudest button */
.fac .fwd-card .button.withdrawal_link{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px #948d84; }
.fac .fwd-card .order-actions-button{ min-height:44px; padding:0 1.2rem; font-size:.92rem; } /* order page: same size as the list buttons */
.fac .fwd-card .button.withdrawal_link:hover{ background:#f1eee9; color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.fac .fwd-card .woocommerce-info .button{ float:none; order:2; min-height:40px; margin:.7rem 0 0; padding:0 1.1rem; font-size:.88rem; box-shadow:none; }
.fac .fwd-card .woocommerce-info:has(.button){ display:flex; flex-direction:column; align-items:flex-start; }
.fac .fwd-card .woocommerce-pagination{ display:flex; gap:.6rem; }
@media (max-width:767px){ /* orders list: one card per order */
  .fac .fwd-card table.woocommerce-orders-table, .fac .fwd-card table.woocommerce-orders-table tbody{ display:block; width:100%; border:0; overflow:visible; }
  .fac .fwd-card table.woocommerce-orders-table thead{ display:none; }
  .fac .fwd-card table.woocommerce-orders-table tr{ display:block; margin:0 0 .8rem; padding:.4rem 0; border:1px solid #e6e1da; border-radius:14px; }
  .fac .fwd-card table.woocommerce-orders-table tr > *{ display:flex; flex-wrap:wrap; min-width:0; justify-content:space-between; align-items:center; gap:.3rem 1rem; padding:.5rem 1rem; border:0; text-align:right; }
  .fac .fwd-card table.woocommerce-orders-table tr > *::before{ content:attr(data-title); float:none; font:600 .72rem/1.2 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:#6b635a; text-align:left; }
  .fac .fwd-card table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions::before{ content:none; }
  .fac .fwd-card table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions{ flex-direction:column; gap:.5rem; }
  .fac .fwd-card table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button{ width:100%; }
  .fac .fwd-card .woocommerce-orders-table__cell-order-actions .button + .button{ margin-left:0; }
}
/* single order */
.fac .fwd-card > p:first-of-type mark, .fac .fwd-card mark{ background:none; color:var(--ink); font-weight:700; }
.fac .fwd-card .woocommerce-order-details, .fac .fwd-card .woocommerce-customer-details{ margin:1.6rem 0 0; }
.fac .fwd-card .woocommerce-customer-details .woocommerce-columns{ display:grid; grid-template-columns:minmax(0,1fr); gap:1rem; }
@media (min-width:640px){ .fac .fwd-card .woocommerce-customer-details .woocommerce-columns{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.fac .fwd-card .woocommerce-columns::before, .fac .fwd-card .woocommerce-columns::after, .fac .fwd-card .col2-set::before, .fac .fwd-card .col2-set::after{ display:none; }
.fac .fwd-card .woocommerce-columns > .woocommerce-column, .fac .fwd-card .col2-set > div{ float:none; width:auto; max-width:none; }
.fac .fwd-card .woocommerce-column__title, .fac .fwd-card .woocommerce-Address-title h2{ margin:0 0 .7rem; font:600 .72rem/1.2 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:#6b635a; }
.fac .fwd-card address{ margin:0; padding:1.1rem 1.2rem; border:1px solid #e6e1da; border-radius:14px; background:#fbfaf8; font-style:normal; line-height:1.6; color:var(--ink-2); overflow-wrap:anywhere; }
.fac .fwd-card address p{ margin:.4rem 0 0; }
.fac .fwd-card address p::before{ display:none; }
.fac .fwd-card .woocommerce-customer-details--email, .fac .fwd-card .woocommerce-customer-details--phone{ padding-left:0; }
.fac .fwd-card .woocommerce-OrderUpdates{ margin:0; padding:0; list-style:none; }
.fac .fwd-card .woocommerce-OrderUpdate{ padding:.9rem 1rem; border-left:3px solid #e6e1da; }
.fac .fwd-card .woocommerce-OrderUpdate-meta{ margin:0; font-size:.82rem; color:#6b635a; }
/* addresses overview */
.fac .fwd-card .woocommerce-Addresses{ display:grid; grid-template-columns:minmax(0,1fr); gap:1rem; margin-top:1rem; }
@media (min-width:640px){ .fac .fwd-card .woocommerce-Addresses{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.fac .fwd-card .woocommerce-Address{ display:flex; flex-direction:column; }
.fac .fwd-card .woocommerce-Address-title{ display:contents; } /* title, address, then the edit link */
.fac .fwd-card .woocommerce-Address-title h2{ order:1; }
.fac .fwd-card .woocommerce-Address address{ order:2; flex:1; }
.fac .fwd-card .woocommerce-Address-title .edit{ order:3; float:none; align-self:flex-start; display:inline-flex; align-items:center; min-height:44px; margin-top:.3rem; font-weight:600; }
body:has(main.fac) .select2-dropdown{ border-color:#948d84; border-radius:12px; overflow:hidden; } /* the open country/state list is appended to <body>, outside .fac */
body:has(main.fac) .select2-results__option--highlighted[aria-selected], body:has(main.fac) .select2-results__option--highlighted[data-selected]{ background:var(--brass,#c31622); color:#fff; }


/* ===== Home 2026-10 (Camly texts): fixed H1, hero short text, 8 series, 4 production stages ===== */
/* hero: one H1 = small search line + large claim (Google reads it as one title) */
.slider-home .h5-title--fixed, .slider-home .h5 .h5-title--fixed{ min-height:0; transition:none; }
.h5-title .h1-klein{ display:block; margin:0 0 .75rem; font:600 clamp(.95rem,1.35vw,1.15rem)/1.4 var(--sans); letter-spacing:.01em; color:#eceef0;
  text-shadow:0 1px 2px rgba(0,0,0,.55); }
.h5-lead{ max-width:36rem; margin:1.3rem 0 0; color:#dfe2e6; font-size:clamp(.98rem,1.25vw,1.1rem); line-height:1.6; text-shadow:0 1px 3px rgba(0,0,0,.6); }
.h5-lead p{ margin:0; }
.h5-lead a{ color:#fff; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(255,255,255,.5); }
.h5-lead a:hover{ text-decoration-color:#ff8088; }
.h5-lead a:focus-visible{ outline:2px solid #fff; outline-offset:3px; border-radius:3px; }
.h5-center:not(.slider-home .h5-center) .h5-lead{ margin-left:auto; margin-right:auto; }

/* series: 3 per row on desktop (FELIX: three per row, larger pictures), 2 per row on tablets, a swipe row on phones */
@media (min-width:1101px){
  .kl-grid--4 .kl-col{ min-height:clamp(600px,70vh,780px); } /* wider tiles = longer diagonal blade: room above the text */
  .kl--light .kl-grid .kl-col:last-child{ border-right:0; } /* short last row: no line into the empty cell */
}
@media (min-width:901px) and (max-width:1100px){
  .kl-grid--4{ grid-template-columns:repeat(2,1fr); }
  .kl--light .kl-grid--4 .kl-col:nth-child(3n){ border-right:1px solid rgba(33,29,24,.09); }
  .kl--light .kl-grid--4 .kl-col:nth-child(2n){ border-right:0; }
  .kl--light .kl-grid--4 .kl-col:nth-last-child(-n+3){ border-bottom:1px solid rgba(33,29,24,.09); }
  .kl--light .kl-grid--4 .kl-col:nth-last-child(-n+2){ border-bottom:0; }
}
@media (max-width:900px){
  .kl-grid{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; }
  .kl-grid::-webkit-scrollbar{ display:none; }
  .kl-grid .kl-col{ flex:0 0 min(80vw,420px); min-height:clamp(440px,62vh,560px); scroll-snap-align:center; }
  .kl--light .kl-grid .kl-col{ border-bottom:0; border-right:1px solid rgba(33,29,24,.09); }
  .kl--light .kl-grid .kl-col:last-child{ border-right:0; }
}

/* production: several stages along the blade (dot, title, label), one line through all */
.evo-head .evo-lead + .evo-lead{ margin-top:.9rem; }
.evo-steps{ position:relative; list-style:none; margin:clamp(1.6rem,3vw,2.4rem) 0 0; padding:0 clamp(.5rem,2vw,2rem);
  display:grid; grid-template-columns:repeat(var(--evo-n,4),minmax(0,1fr)); gap:1rem; }
.evo-steps::before{ content:""; position:absolute; top:5px; height:1px; left:calc(clamp(.5rem,2vw,2rem) + (100% - 2 * clamp(.5rem,2vw,2rem)) / (2 * var(--evo-n,4)));
  right:calc(clamp(.5rem,2vw,2rem) + (100% - 2 * clamp(.5rem,2vw,2rem)) / (2 * var(--evo-n,4)));
  background:linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.3), rgba(255,255,255,.12)); }
.evo-step{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.25rem; }
.evo-dot{ width:11px; height:11px; margin-bottom:.7rem; border-radius:50%; background:#333333; box-shadow:inset 0 0 0 2px rgba(255,255,255,.5); }
.evo-step--now .evo-dot{ background:var(--brass-br); box-shadow:0 0 0 4px rgba(255,128,136,.18); }
.evo-step b{ font-family:var(--sans); font-weight:600; color:#fff; font-size:.92rem; letter-spacing:.01em; }
.evo-step--now b{ color:var(--brass-br); }
.evo-step span{ max-width:15rem; font:500 .74rem/1.4 var(--sans); letter-spacing:.03em; color:#9a9ea6; text-transform:uppercase; }
@media (max-width:640px){
  .evo-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:1.6rem; }
  .evo-steps::before{ display:none; }
}

/* ===== "Messer aus Solingen" (v5_wissen): only the home page's own pieces; a few joints below ===== */
.qual.wis-craft{ padding-top:clamp(5.5rem,8vw,8rem); padding-bottom:clamp(4rem,6vw,5.5rem); }
.wis-rich p{ margin:0; }
.wis-rich p + p{ margin-top:1.1em; }
.qual--light .wis-rich a, .qual--light .wis-mats a{ color:var(--ink); text-decoration:underline; text-decoration-color:rgba(195,22,34,.5); text-underline-offset:3px; }
.qual--light .wis-rich a:hover, .qual--light .wis-mats a:hover{ color:var(--brass,#c31622); }
.wis-rich a:focus-visible, .wis-mats a:focus-visible, .wis-card .ncard-link:focus-visible{ outline:2px solid var(--brass,#c31622); outline-offset:3px; border-radius:3px; }
/* origin: the Service card, on white between the two light blocks */
.wis-origin{ background:#fff; }
.wis-origin .svc-card{ min-height:clamp(440px,40vw,580px); }
.wis-origin .svc-card img{ object-position:72% 62%; filter:none; }
.wis-origin .svc-lead{ max-width:34rem; margin-bottom:0; }
/* material */
.qual.wis-mat{ padding-top:clamp(5.5rem,8vw,8rem); }
.wis-mat .wis-qm{ width:100%; aspect-ratio:4/3.4; }
.wis-awards{ display:flex; align-items:center; gap:1.4rem; margin-top:clamp(1.8rem,3vw,2.4rem); padding-top:1.6rem; border-top:1px solid rgba(33,29,24,.14); max-width:36rem; }
.wis-chips{ display:flex; gap:.7rem; flex:none; }
.wis-awards .h5-chip{ width:84px; height:84px; padding:10px; border-radius:16px; background:#fff; box-shadow:0 0 0 1px rgba(33,29,24,.1); display:flex; align-items:center; justify-content:center; }
.wis-awards .h5-chip img{ height:58px; width:auto; max-width:100%; }
.wis-awards p{ margin:0; color:#5c574e; font-size:.95rem; line-height:1.55; }
/* handle materials: intro tile + one card per handle (close-up of the real knife handle) */
.wis-mats-row{ max-width:var(--boxw); margin:clamp(3.5rem,6vw,5rem) auto 0; padding:0 var(--boxpad); }
.wis-mats{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1rem,1.6vw,1.4rem); }
.wis-mat-intro{ display:flex; flex-direction:column; justify-content:center; padding:clamp(.5rem,1.5vw,1.2rem) clamp(.5rem,1.5vw,1.5rem) clamp(.5rem,1.5vw,1.2rem) 0; }
.wis-mat-intro .eyebrow{ display:block; margin-bottom:.9rem; }
.wis-mat-intro p{ margin:0; font-family:var(--serif); font-weight:500; font-size:clamp(1.2rem,1.6vw,1.45rem); line-height:1.35; color:var(--ink); }
.wis-mat-card{ display:flex; flex-direction:column; border-radius:18px; overflow:hidden; background:#fff; box-shadow:0 0 0 1px rgba(33,29,24,.08); transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.wis-mat-card:hover{ transform:translateY(-2px); box-shadow:0 0 0 1px rgba(33,29,24,.12), 0 10px 24px -18px rgba(33,29,24,.25); }
.wis-mat-img{ position:relative; display:block; aspect-ratio:16/8; overflow:hidden; background:#f2f3f4; }
.wis-mat-img img{ position:absolute; top:50%; left:50%; width:84%; height:auto; max-height:70%; object-fit:contain; transform:translate(-50%,-50%) rotate(-10deg); filter:drop-shadow(0 6px 8px rgba(33,29,24,.14)); transition:transform .5s var(--ease); } /* the whole knife, diagonal as the series tiles */
.wis-mat-card:hover .wis-mat-img img{ transform:translate(-50%,-50%) rotate(-7deg) scale(1.04); }
.wis-mat-card b{ display:block; padding:1.1rem 1.2rem 0; font-family:var(--serif); font-weight:500; font-size:1.12rem; line-height:1.25; color:var(--ink); }
.wis-mat-card .wis-mat-rest{ display:block; padding:.35rem 1.2rem 1.2rem; font-size:.9rem; color:#6b665c; }
/* card with a series link: the whole card is the link (first link stretched), a visible "Zur Serie →" line, hover only here */
.wis-mat-card{ position:relative; }
.wis-mat-card.is-link .wis-mat-rest a:first-of-type::after{ content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; }
.wis-mat-card.is-link .wis-mat-rest a:not(:first-of-type){ position:relative; z-index:2; }
.wis-mat-card.is-link .wis-mat-rest{ padding-bottom:.2rem; }
.wis-mat-go{ display:flex; align-items:center; gap:.4rem; margin-top:auto; padding:.7rem 1.2rem 1.15rem; font:600 .84rem/1 var(--sans); letter-spacing:.02em; color:var(--brass,#c31622); }
.wis-mat-go .arr{ transition:transform .25s var(--ease); }
.wis-mat-card.is-link{ cursor:pointer; }
.wis-mat-card.is-link:hover .wis-mat-go .arr, .wis-mat-card.is-link:focus-within .wis-mat-go .arr{ transform:translateX(4px); }
.wis-mat-card.is-link:focus-within{ box-shadow:0 0 0 2px var(--brass,#c31622); }
.wis-mat-card.is-link .wis-mat-rest a:focus-visible{ outline:none; }
.wis-mat-card:not(.is-link):hover{ transform:none; box-shadow:0 0 0 1px rgba(33,29,24,.08); }
.wis-mat-card:not(.is-link):hover .wis-mat-img img{ transform:translate(-50%,-50%) rotate(-10deg); }
/* forever + visit: the Fertigung band, news cards */
.evo.wis-dark{ padding:clamp(5.5rem,8vw,8rem) 0; }
.wis-ever{ position:relative; z-index:1; }
.wis-ever .news5-head{ margin-bottom:clamp(1.4rem,2.4vw,2rem); }
.wis-ever-cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.6rem,2.6vw,2.4rem); } /* same columns and gap as the cards below (news5-grid) */
.wis-ever-cols .evo-lead{ margin:0; max-width:none; text-align:left; padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.14); }
@media (max-width:760px){ .wis-ever-cols{ grid-template-columns:1fr; } }
.wis-card .ncard-img img{ object-fit:cover; width:100%; height:100%; } /* photos fill the frame (news cards use contain) */
.wis-visit{ position:relative; z-index:1; margin-top:clamp(4.5rem,8vw,7rem); }
.wis-visit .news5-head{ margin-bottom:clamp(1.6rem,3vw,2.4rem); }
.wis-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.wis-card:hover{ transform:none; }
.wis-card .ncard-img{ aspect-ratio:16/8; }
.wis-card .ncard-body{ padding:clamp(1.4rem,2.4vw,2rem); }
.wis-card h3{ margin-top:0; font-size:clamp(1.3rem,1.8vw,1.6rem); }
.wis-card .ncard-body > p{ font-size:.98rem; color:#a9adb4; }
.wis-facts{ margin:0 0 1.4rem; padding:.9rem 0; border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); }
.wis-facts p{ margin:0; color:#cfd2d7; font-size:.94rem; line-height:1.6; }
.wis-facts strong{ color:#fff; font-weight:600; }
.wis-card .ncard-link{ font-size:.9rem; }
.wis-bye{ margin:1.4rem 0 0; text-align:left; font:400 .95rem/1.5 var(--sans); color:#9a9ea6; } /* Camly's sign-off: kept, but quiet, under the cards */
@media (max-width:760px){ .wis-cards{ grid-template-columns:1fr; } }
@media (max-width:1100px){ .wis-mats{ grid-template-columns:repeat(2,minmax(0,1fr)); } .wis-mat-intro{ grid-column:1 / -1; padding:0 0 .4rem; }
  .wis-mats > .wis-mat-card:last-child:nth-child(even){ grid-column:1 / -1; } /* 7 cards in 2 columns: the last one runs full width */
  .wis-mats > .wis-mat-card:last-child:nth-child(even) .wis-mat-img{ aspect-ratio:16/6; }
  .wis-mats > .wis-mat-card:last-child:nth-child(even) .wis-mat-img img{ width:auto; height:auto; max-width:70%; max-height:72%; } }
.wis-mat-card b{ overflow-wrap:break-word; hyphens:auto; }
@media (max-width:600px){ .wis-awards{ flex-wrap:wrap; } .wis-awards .h5-chip{ width:72px; height:72px; } }
@media (max-width:420px){ .wis-mat-card b{ padding:.9rem .9rem 0; font-size:1rem; } .wis-mat-card > span:last-child{ padding:.3rem .9rem 1rem; font-size:.84rem; } }
@media (max-width:860px){
  .wis-origin .svc-veil{ background:linear-gradient(180deg, rgba(8,9,11,.25) 0%, rgba(8,9,11,.75) 38%, rgba(8,9,11,.95) 62%); }
  .wis-origin .svc-card{ align-items:flex-end; padding-top:14rem; }
}


/* mega cards: tall product photos (knife blocks, HORL, sharpening stones) fit like the knives, never over the label */
.mega-hero img{ width:auto; height:auto; max-height:56%; object-fit:contain; }

/* Service section without a picture (e.g. Service page "Leistungen"): plain dark card, heading left | services 2×2 */
.svc-card--plain{ min-height:0; background:transparent; border:0; border-radius:0; overflow:visible; } /* no picture: an open white section like the other light blocks */
.svc-card--plain .svc-inner{ padding:clamp(1rem,3vw,2rem) 0; color:var(--ink-2); }
.svc-card--plain .svc-inner .kicker{ color:var(--brass-d,#9e1119); }
.svc-card--plain .svc-inner h2{ color:var(--ink); }
.svc-card--plain .svc-lead{ color:#5c574e; }
.svc-card--plain .svc-list b{ color:var(--ink); }
.svc-card--plain .svc-list .d{ color:#5c574e; }
.svc-card--plain .svc-list .ic{ background:rgba(195,22,34,.08); color:var(--brass,#c31622); border-color:rgba(195,22,34,.18); }
.svc-card--plain .svc-inner{ max-width:none; width:100%; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(2rem,5vw,5rem); align-items:start; }
.svc-card--plain .svc-inner > .kicker, .svc-card--plain .svc-inner > h2, .svc-card--plain .svc-inner > .svc-lead{ grid-column:1; align-self:start; }
.svc-card--plain .svc-inner{ grid-template-rows:auto auto 1fr; row-gap:0; }
.svc-card--plain .svc-inner > h2{ margin-top:.6rem; }
.svc-card--plain .svc-inner > .svc-lead{ margin-top:1.1rem; }
.svc-card--plain .svc-list{ grid-column:2; grid-row:1 / span 3; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.4rem,2.4vw,2.2rem); }
.svc-card--plain .svc-list li{ flex-direction:column; gap:.9rem; padding-top:1.4rem; border-top:1px solid rgba(33,29,24,.14); }
@media (max-width:900px){ .svc-card--plain .svc-inner{ grid-template-columns:1fr; } .svc-card--plain .svc-list{ grid-column:1; grid-row:auto; } }
@media (max-width:560px){ .svc-card--plain .svc-list{ grid-template-columns:1fr; } }

/* own cards in the news layout (e.g. Service page): photos fill the frame, all black and white, so they share one mood */
.news5-sec--cards .ncard-img img{ width:100%; height:100%; object-fit:cover; object-position:60% 50%; filter:grayscale(1) contrast(1.05); }
.news5-sec--cards .ncard-img{ background:#3a3a3a; }

/* Service section without a picture: no extra air below (the next light block brings its own) */
.svc-sec:has(.svc-card--plain):not(:last-child){ padding-bottom:0; } /* only when a section follows (Service page); as last section it keeps its bottom space (Lasergravur) */
.svc-sec:has(.svc-card--plain) + .qual.qual--light{ padding-top:clamp(3rem,5vw,4.5rem); }

/* Fertigung head: optional buttons and clickable phone / e-mail */
.evo-cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem; margin-top:clamp(1.6rem,3vw,2.2rem); }
.evo-lead a{ color:#fff; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(255,128,136,.6); }
.evo-lead a:hover{ text-decoration-color:#ff8088; }
.evo-lead a:focus-visible, .evo-cta .btn:focus-visible{ outline:2px solid #ff8088; outline-offset:3px; border-radius:4px; }

/* overlapping photo pairs (Qualität layout): always black and white, so a tinted photo never breaks the pair */
.qual .qm img{ filter:grayscale(1); }
.qual--color .qm img{ filter:none; } /* product photos keep their colour */

/* ===== quick fixes 2026-10-29 ===== */
/* hero on phones: text runs over the whole photo there, so darken the whole picture, strongest behind the text */
@media (max-width:860px){
  .slider-home .h5-veil{ background:linear-gradient(to bottom, rgba(8,9,11,.55) 0%, rgba(8,9,11,.72) 35%, rgba(8,9,11,.6) 70%, rgba(8,9,11,.85) 100%); }
  .slider-home .h5-center .h5-title, .slider-home .h5-lead{ text-shadow:0 1px 3px rgba(0,0,0,.7), 0 0 18px rgba(0,0,0,.5); }
}
/* slider dots: 24px tap target around the small visible dot (WCAG 2.5.8) */
.h5-dot{ position:relative; }
.h5-dot::before{ content:""; position:absolute; left:50%; top:50%; width:max(24px,100%); height:24px; transform:translate(-50%,-50%); }
.h5-dots{ gap:.9rem; }
/* series swipe row on phones: a card that gets keyboard focus scrolls fully into view */
.kl-grid .kl-col{ scroll-margin-inline:16px; }

/* ===== designed category pages (inc/category-content.php) ===== */
.facets-head .facets-title{ margin:0; font-family:var(--serif); font-weight:500; font-size:1.3rem; color:var(--ink); }
.empty .empty-title{ margin:0 0 .6rem; font-family:var(--serif); font-weight:500; font-size:1.7rem; color:var(--ink); }
.cat-kicker{ margin:0 0 .9rem; font:600 .72rem/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--brass-d,#9e1119); }
.cat-header .cat-lead{ max-width:44rem; }
.cat-header .cat-lead p{ margin:0; }
.cat-header .cat-lead p + p{ margin-top:.8em; }
/* header with the category picture (WooCommerce category thumbnail): text left, the knife diagonal on the right */
.cat-header--visual .cat-header-inner{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(1.5rem,4vw,4rem); align-items:center; }
.cat-visual{ position:relative; min-height:clamp(180px,20vw,300px); }
.cat-visual::before{ content:""; position:absolute; inset:5% 8%; background:radial-gradient(closest-side, rgba(33,29,24,.07), transparent); border-radius:50%; }
.cat-visual-knife{ position:absolute; left:50%; top:50%; width:100%; max-width:640px; height:auto; transform:translate(-50%,-50%) rotate(-14deg); filter:drop-shadow(0 18px 22px rgba(33,29,24,.22)); }
@media (max-width:820px){ .cat-header--visual .cat-header-inner{ grid-template-columns:1fr; } .cat-visual{ display:none; } } /* phones: straight to the text and the products */
/* content below the products: full width, first section with air to the grid */
.cat-content{ margin-top:clamp(3rem,6vw,5rem); }

/* Qualität layout on dark (category texts) */
.qual.qual--dark .eyebrow{ color:var(--brass-br); }
.qual.qual--dark .qual-lead a{ color:#fff; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(255,128,136,.6); }
.qual.qual--dark .qual-lead a:hover{ text-decoration-color:#ff8088; }
.qual.qual--dark .qual-lead a:focus-visible{ outline:2px solid #ff8088; outline-offset:3px; border-radius:3px; }
/* Aktuelles / cards: optional lead under the heading */
.news5-lead{ margin:.9rem 0 0; max-width:40rem; font-size:1.02rem; line-height:1.6; color:#b8bcc2; }
.news5-sec--light .news5-lead{ color:#5c574e; }
.news5-lead a{ color:inherit; text-decoration:underline; text-decoration-color:var(--brass, #c31622); text-underline-offset:.2em; }
.news5-lead a:hover{ color:var(--brass, #c31622); }
/* Service without picture: odd number of items → one column list */
.svc-card--plain .svc-list.svc-list--odd{ grid-template-columns:1fr; }
.svc-card--plain .svc-list.svc-list--odd li{ flex-direction:row; align-items:flex-start; gap:1.1rem; padding-top:1.1rem; }
/* Service: optional sentence + linked cards under it */
.svc-more{ padding:0 0 clamp(1rem,3vw,2rem); margin-top:clamp(2.2rem,4vw,3rem); } /* space above the cards also when there is no outro line */
.svc-outro{ margin:0 0 1.2rem; font-family:var(--serif); font-weight:500; font-size:clamp(1.2rem,1.8vw,1.45rem); color:var(--ink); }
.svc-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr)); gap:clamp(1.6rem,2.6vw,2.4rem); } /* same gap as the news cards */
.svc-mcard{ display:flex; flex-direction:column; gap:.55rem; padding:clamp(1.4rem,2.6vw,2rem); border-radius:18px; background:#3a3a3a; color:#a9adb4; text-decoration:none; border:1px solid rgba(255,255,255,.07); transition:transform .3s var(--ease), border-color .3s var(--ease); }
.svc-mcard b{ font-family:var(--serif); font-weight:500; font-size:1.3rem; color:#fff; }
.svc-mcard > span{ font-size:.96rem; line-height:1.6; }
.svc-mcard .svc-mcard-go{ margin-top:auto; padding-top:.8rem; color:#fff; font:600 .88rem/1 var(--sans); }
.svc-mcard .arr{ color:var(--brass-br); transition:transform .25s; display:inline-block; }
.svc-mcard:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.18); }
.svc-mcard:hover .arr{ transform:translateX(4px); }
.svc-mcard:focus-visible{ outline:2px solid var(--brass,#c31622); outline-offset:3px; }

/* own cards: four in a row when there are four */
@media (min-width:1101px){ .news5-sec--cards .news5-grid:has(> :nth-child(4):last-child){ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (min-width:640px) and (max-width:1100px){ .news5-sec--cards .news5-grid:has(> :nth-child(4):last-child){ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ===== designed category pages: not an archive (dark header with the knife, series chips, filter in a drawer, full-width grid) ===== */
.catpage--light .cat-header--designed{ background:#2e2e2e; background-image:radial-gradient(55% 90% at 75% 45%, rgba(195,22,34,.16), transparent 70%), radial-gradient(60% 70% at 15% 0%, #3d3d3d, transparent 70%);
  padding:calc(128px + clamp(2rem,4vw,3.2rem)) 0 clamp(2.6rem,5vw,4rem); overflow:hidden; }
.cat-header--designed .cat-header-inner{ max-width:var(--boxw,1700px) !important; margin:0 auto; padding-left:var(--boxpad) !important; padding-right:var(--boxpad) !important; }
.catpage--light .cat-header--designed .crumbs, .catpage--light .cat-header--designed .crumbs a{ color:#b0b4ba; }
.catpage--light .cat-header--designed .crumbs a:hover{ color:#fff; }
.cat-header--designed .crumbs .here{ color:#c9ccd1; }
.cat-header--designed .cat-kicker{ margin-top:1.4rem; color:#ff8088; }
.catpage--light .cat-header--designed h1{ color:#fff; font-size:clamp(2.4rem,5vw,4.2rem); line-height:1.02; letter-spacing:-.02em; margin:.2rem 0 1.1rem; }
.catpage--light .cat-header--designed .lead{ color:#c9ccd1; font-size:clamp(1rem,1.2vw,1.1rem); line-height:1.7; max-width:38rem; }
.cat-header--designed .cat-visual::before{ background:radial-gradient(closest-side, rgba(255,249,240,.12), transparent); inset:0 2%; }
.cat-header--designed .cat-visual{ min-height:clamp(240px,26vw,400px); }
.cat-header--designed .cat-visual-knife{ width:100%; max-width:none; transform:translate(-50%,-50%) rotate(-22deg); filter:drop-shadow(0 34px 40px rgba(0,0,0,.7)); }
@media (max-width:820px){ .catpage--light .cat-header--designed{ padding-top:calc(100px + 1.6rem); } }

/* products: full width, filter as a drawer at every width */
.catpage--light .catalog--designed{ display:block; max-width:var(--boxw,1700px); margin:0 auto; padding:clamp(1.8rem,3vw,2.6rem) var(--boxpad) clamp(2rem,4vw,3rem); }
.catalog--designed .toolbar{ border-bottom:0; margin-bottom:1rem; padding-bottom:0; }
.catalog--designed .filter-toggle{ display:inline-flex; align-items:center; gap:.5rem; min-height:44px; padding:0 1.2rem; border:1px solid rgba(33,29,24,.18); border-radius:999px; background:#fff; color:var(--ink);
  font:600 .82rem/1 var(--sans); letter-spacing:.02em; text-transform:none; cursor:pointer; }
.catalog--designed .filter-toggle:hover{ border-color:var(--ink); }
.catalog--designed .facets{ position:fixed; top:0; left:0; bottom:0; width:88%; max-width:380px; z-index:102; border-radius:0 var(--r-xl,22px) var(--r-xl,22px) 0; background:#fff; box-shadow:0 30px 80px rgba(0,0,0,.35);
  padding:calc(1.5rem + var(--bar,0px)) 1.5rem 2.5rem; overflow-y:auto; max-height:none; transform:translateX(-100%); transition:transform .35s ease, visibility 0s .35s; visibility:hidden; }
.catalog--designed .facets.open{ transform:none; visibility:visible; transition:transform .35s ease; }
.catalog--designed .facets-close{ display:block; position:absolute; top:calc(1rem + var(--bar,0px)); right:1.2rem; width:38px; height:38px; border-radius:50%; background:#fff; border:1px solid rgba(33,29,24,.14); color:var(--ink); cursor:pointer; }
.catalog--designed .facets-head{ padding-right:3.2rem; }
.catalog--designed .grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } /* FELIX: three products per row, larger pictures */
@media (max-width:1040px){ .catalog--designed .grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:820px){ .catalog--designed .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* series quick chips */
.quick-series{ display:flex; gap:.5rem; overflow-x:auto; scrollbar-width:none; padding:.2rem 0 1.4rem; margin-bottom:.4rem; }
.quick-series::-webkit-scrollbar{ display:none; }
.qchip{ flex:none; display:inline-flex; align-items:center; gap:.45rem; min-height:42px; padding:0 1.1rem; border-radius:999px; border:1px solid rgba(33,29,24,.16); background:#fff; color:var(--ink);
  font:500 .9rem/1 var(--sans); cursor:pointer; transition:background .2s, border-color .2s, color .2s; white-space:nowrap; }
.qchip span{ font-size:.76rem; color:#8a847b; }
.qchip:hover{ border-color:var(--ink); }
.qchip.is-on{ background:var(--ink); border-color:var(--ink); color:#fff; }
.qchip.is-on span{ color:rgba(255,255,255,.65); }
.qchip:disabled{ opacity:.4; cursor:default; }
.qchip:focus-visible, .catalog--designed .filter-toggle:focus-visible{ outline:2px solid var(--brass,#c31622); outline-offset:2px; }
@media (max-width:820px){ .quick-series{ margin:0 calc(-1 * var(--boxpad)); padding-left:var(--boxpad); padding-right:var(--boxpad); } }

/* category hero (shared v5 hero): breadcrumb above the red line, products anchor clear of the nav */
.h5-center .crumbs{ display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 1.4rem; font:600 .66rem/1.4 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:#b9bcc2; text-shadow:0 1px 3px rgba(0,0,0,.7); }
.h5-center .crumbs a{ color:#e3e5e8; text-decoration:none; }
.h5-center .crumbs a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.h5-center .crumbs .here{ color:#b9bcc2; }
.h5-center .crumbs a:focus-visible{ outline:2px solid #fff; outline-offset:3px; border-radius:3px; }
.slider-home .catalog--designed{ scroll-margin-top:80px; }

/* filter drawer: sticky result button at the bottom (the grid is behind the drawer), no blur so the page stays readable */
.facets-foot{ position:sticky; bottom:-2.5rem; margin:1.4rem -1.5rem -2.5rem; padding:1rem 1.5rem calc(1rem + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid rgba(33,29,24,.1); }
.facets-apply{ width:100%; min-height:50px; border:0; border-radius:999px; background:var(--ink); color:#fff; font:600 .95rem/1 var(--sans); cursor:pointer; transition:background .2s; }
.facets-apply:hover{ background:#000; }
.facets-apply:disabled{ background:#8a847b; cursor:default; }
.facets-apply:focus-visible{ outline:2px solid var(--brass,#c31622); outline-offset:3px; }
@media (min-width:821px){ .catpage:not(:has(.catalog--designed)) .facets-foot{ display:none; } } /* desktop sidebar on plain categories: results are visible already */
.catpage .scrim{ backdrop-filter:none; background:rgba(46,46,46,.45); }
/* the drawer always fits the screen, so the result button is always reachable */
.catalog--designed .facets{ height:100vh; height:100dvh; max-height:none !important; bottom:auto; box-sizing:border-box; }
/* rows scroll clear of the sticky result button (scrollIntoView and keyboard focus too) */
.catalog--designed .facets{ scroll-padding-bottom:6rem; }
.catalog--designed .facets .facet:last-of-type{ margin-bottom:1rem; }

/* scroll lock (filter drawer, side cart, mobile menu) hides the scrollbar: keep its space, so nothing jumps sideways */
html{ scrollbar-gutter:stable; }
/* the reserved scrollbar strip shows the root background while scrolling is locked: dark, like the overlay and the nav */
html{ background:#2e2e2e; }

/* product page "Design & Serie": heading left, text right (all products) */
@media (min-width:901px){
  .pv-design-head{ max-width:none; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); grid-template-rows:auto 1fr; column-gap:clamp(2.5rem,6vw,6rem); align-items:start; } /* rows: red line, then headline right under it; the text spans both */
  .pv-design-head .eyebrow{ grid-column:1; grid-row:1; }
  .pv-design-head h2{ grid-column:1; grid-row:2; margin:0; }
  .pv-design-head p{ grid-column:2; grid-row:1 / span 2; margin:0; padding-top:1.9rem; max-width:44rem; }
}

/* Herkunft with a film: full-bleed picture, copy left, big play button; the player takes the stage on click */
.wis-film{ background:#2e2e2e; color:#fff; }
.wis-film-stage{ position:relative; overflow:hidden; display:flex; align-items:center; min-height:clamp(600px,50vw,820px); }
.wis-film-poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:72% 62%; }
.wis-film-veil{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(8,9,11,.92) 0%, rgba(8,9,11,.72) 38%, rgba(8,9,11,.18) 72%, rgba(8,9,11,.35) 100%); }
.wis-film-in{ position:relative; z-index:2; width:100%; max-width:var(--boxw); margin:0 auto; padding:clamp(4rem,7vw,6.5rem) var(--boxpad);
  display:grid; grid-template-columns:minmax(0,40rem) 1fr; align-items:center; gap:clamp(2rem,5vw,5rem); }
.wis-film-copy .kicker{ color:var(--brass-br); }
.wis-film-copy h2{ font-family:var(--serif); font-weight:500; color:#fff; margin:.6rem 0 0; font-size:clamp(1.9rem,3.4vw,2.7rem); letter-spacing:-.01em; } /* same as the other picture-card headings */
.wis-film-copy .svc-lead{ color:rgba(255,255,255,.82); margin:1.1rem 0 0; max-width:36rem; }
.wis-film-play{ justify-self:center; display:flex; flex-direction:column; align-items:center; gap:1.1rem; background:none; border:0; padding:.5rem; color:#fff; cursor:pointer; font:inherit; }
.wis-film-btn{ position:relative; display:grid; place-items:center; width:clamp(88px,8vw,112px); aspect-ratio:1; border-radius:50%;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background .25s, transform .25s, border-color .25s; }
.wis-film-btn::after{ content:""; position:absolute; inset:-10px; border-radius:50%; border:1px solid rgba(255,255,255,.28); animation:wisPulse 2.6s ease-out infinite; }
.wis-film-btn svg{ width:34%; height:34%; margin-left:6%; }
.wis-film-label{ display:flex; flex-direction:column; align-items:center; gap:.3rem; font:600 .95rem/1.2 var(--sans); letter-spacing:.02em; }
.wis-film-label small{ font-weight:400; font-size:.76rem; opacity:.66; letter-spacing:0; }
.wis-film-play:hover .wis-film-btn, .wis-film-play:focus-visible .wis-film-btn{ background:var(--brass,#c31622); border-color:var(--brass,#c31622); transform:scale(1.05); }
.wis-film-play:focus-visible{ outline:2px solid #fff; outline-offset:6px; border-radius:12px; }
@keyframes wisPulse{ 0%{ transform:scale(.92); opacity:.9; } 100%{ transform:scale(1.25); opacity:0; } }
@media (prefers-reduced-motion:reduce){ .wis-film-btn::after{ animation:none; opacity:.5; } }
/* playing: a framed 16:9 player inside the footer width (like the 360° tour), small enough to sit fully below the nav */
.wis-film.is-playing .wis-film-stage{ display:block; min-height:0; padding:clamp(2.5rem,5vw,4.5rem) var(--boxpad); }
.wis-film.is-playing .wis-film-poster, .wis-film.is-playing .wis-film-veil, .wis-film.is-playing .wis-film-in{ display:none; }
.wis-film-frame{ display:block; margin:0 auto; border:0; border-radius:16px; background:#000; aspect-ratio:16/9; height:auto;
  width:min(100%, calc(var(--boxw,1700px) - 2 * var(--boxpad,2rem)), calc((100vh - 9rem) * 16 / 9)); }
@media (max-width:820px){ .wis-film.is-playing .wis-film-stage{ padding:1.6rem var(--boxpad); } .wis-film-frame{ border-radius:12px; } }
@media (max-width:820px){
  .wis-film-stage{ min-height:0; align-items:flex-end; }
  .wis-film-veil{ background:linear-gradient(180deg, rgba(8,9,11,.2) 0%, rgba(8,9,11,.7) 34%, rgba(8,9,11,.96) 58%); }
  .wis-film-in{ grid-template-columns:1fr; gap:1.6rem; padding-top:9rem; padding-bottom:3.2rem; }
  .wis-film-play{ order:-1; justify-self:start; flex-direction:row; gap:1rem; padding:0; }
  .wis-film-label{ align-items:flex-start; text-align:left; }
  .wis-film-btn{ width:72px; }
}

/* ============================================================
   Mega menus LIGHT (Khalil 2026-11-03: site felt too dark / too close to another Solingen shop).
   White panel, light-grey cards like the home "Griffmaterialien", dark text; the nav bar itself stays dark.
   ============================================================ */
.h5-nav .mega{ background:#fff; border-top:1px solid rgba(33,29,24,.08); box-shadow:0 30px 60px -10px rgba(20,16,12,.22); }
.h5-nav .mega .mega-hero, .h5-nav .mega .ms-feat, .h5-nav .mega .ms-card, .h5-nav .mega .mm-row{ background:#f2f3f4; border:1px solid rgba(33,29,24,.07); }
.h5-nav .mega .mega-hero:hover, .h5-nav .mega .ms-feat:hover, .h5-nav .mega .ms-card:hover, .h5-nav .mega .mm-row:hover{ background:#eef0f1; border-color:rgba(33,29,24,.16); box-shadow:0 18px 36px -20px rgba(33,29,24,.4); }
.h5-nav .mega .mega-hero-glow, .h5-nav .mega .ms-feat-glow, .h5-nav .mega .ms-card-img .g{ display:none; }
.h5-nav .mega .mega-hero img, .h5-nav .mega .ms-feat img, .h5-nav .mega .ms-card-img img{ filter:drop-shadow(0 12px 14px rgba(33,29,24,.2)); }
.h5-nav .mega .mega-hero-meta{ background:linear-gradient(to top, rgba(242,243,244,.96) 30%, rgba(242,243,244,0)); }
.h5-nav .mega .mega-hero-meta .k, .h5-nav .mega .ms-feat .k, .h5-nav .mega .ms-card .k, .h5-nav .mega .mc-side .sub{ color:var(--brass-d,#9e1119); }
.h5-nav .mega .mega-hero-meta b, .h5-nav .mega .ms-feat h3, .h5-nav .mega .ms-card b, .h5-nav .mega .mc-side h4, .h5-nav .mega .mc-card-body h5, .h5-nav .mega .mm-row-tx b{ color:var(--ink,#1d1b18); }
.h5-nav .mega .mega-hero-meta .arr, .h5-nav .mega .ms-feat .go, .h5-nav .mega .mc-card-body .more{ color:var(--ink,#1d1b18); }
.h5-nav .mega .mega-hero:hover .mega-hero-meta .arr{ color:var(--brass,#c31622); }
.h5-nav .mega .ms-feat::after{ background:linear-gradient(to top, #f2f3f4 14%, rgba(242,243,244,.78) 48%, rgba(242,243,244,0)); }
.h5-nav .mega .ms-feat p, .h5-nav .mega .mc-card-body p, .h5-nav .mega .mm-row-tx span{ color:#5c574e; }
.h5-nav .mega .ms-card.all{ background:transparent; border:1px dashed rgba(33,29,24,.22); }
.h5-nav .mega .ms-card.all:hover{ background:#f7f8f8; border-color:var(--brass,#c31622); box-shadow:none; }
.h5-nav .mega .ms-card.all span{ color:var(--ink,#1d1b18); }
.h5-nav .mega .mega-cat-foot{ border-top-color:rgba(33,29,24,.1); }
.h5-nav .mega .mega-cat-foot a{ color:#5c574e; }
.h5-nav .mega .mega-cat-foot a:hover{ color:var(--ink,#1d1b18); }
.h5-nav .mega .mega-cat-foot a.hot{ color:var(--brass,#c31622); }
.h5-nav .mega .mega-cat-foot a.all{ color:var(--ink,#1d1b18); }
.h5-nav .mega .mc-nav a{ color:#5c574e; }
.h5-nav .mega .mc-nav a:hover{ color:var(--ink,#1d1b18); }
.h5-nav .mega .mc-card{ background:#fff; border:1px solid rgba(33,29,24,.08); }
.h5-nav .mega .mc-card:hover{ border-color:rgba(33,29,24,.16); box-shadow:0 18px 36px -20px rgba(33,29,24,.4); }
.h5-nav .mega .mm-tour{ border-color:rgba(33,29,24,.08); }
.h5-nav .mega .mm-row-ic{ background:rgba(195,22,34,.08); color:var(--brass,#c31622); border-color:rgba(195,22,34,.18); }
.h5-nav .mega a:focus-visible{ outline:2px solid var(--brass,#c31622); outline-offset:3px; }

/* "Passt dazu": tall shapes (Chinese cleaver, blocks) were scaled by the column width only and ran over their name;
   now the picture is capped by height too, compact shapes tilt less, and the text sits above the picture layer */
.pv-rel-media{ height:clamp(150px,14vw,240px); margin-bottom:1.4rem; }
.pv-rel-media img{ width:auto; height:auto; max-width:88%; max-height:70%; transform:translate(-50%,-50%) rotate(-12deg); }
.pv-rel:hover .pv-rel-media img{ transform:translate(-50%,-50%) rotate(-9deg) scale(1.04); }
.pv-rel-media img.is-compact{ max-height:86%; transform:translate(-50%,-50%) rotate(-8deg); }
.pv-rel:hover .pv-rel-media img.is-compact{ transform:translate(-50%,-50%) rotate(-5deg) scale(1.04); }
.pv-rel-k, .pv-rel-t, .pv-rel-p{ position:relative; z-index:2; }
.pv-rel--photo .pv-rel-media img{ max-height:none; }

/* filter drawer layout: head + close stay at the top, only the groups scroll, result button fixed at the bottom
   (before, the whole drawer scrolled: header scrolled away, scrollbar ran past the button and the rounded corner) */
.catalog--designed .facets{ display:flex; flex-direction:column; overflow:hidden; padding:calc(1.5rem + var(--bar,0px)) 0 0; }
.catalog--designed .facets-head{ flex:none; margin:0 1.5rem; }
.catalog--designed .facets-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:0 1.5rem; scrollbar-width:thin; scroll-padding-block:1rem; }
.catalog--designed .facets-foot{ position:static; flex:none; margin:0; }
@media (max-width:820px){
	.catpage .facets{ display:flex; flex-direction:column; overflow:hidden; height:100vh; height:100dvh; padding:calc(1.5rem + var(--bar,0px)) 0 0; box-sizing:border-box; }
	.catpage .facets-head{ flex:none; margin:0 1.5rem; }
	.catpage .facets-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:0 1.5rem; scrollbar-width:thin; scroll-padding-block:1rem; }
	.catpage .facets-foot{ position:static; flex:none; margin:0; }
}

/* sort field: same chevron as the filter groups, same height as "Alle Filter" */
.catpage .sort-field select{ min-height:44px; padding:0 2.6rem 0 1.2rem; background-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23211d18' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; background-size:13px 13px; }
.catpage .sort-field select:hover{ border-color:var(--ink); }
/* phone: plain category pages get the same filter button as the designed ones */
@media (max-width:820px){ .catpage .filter-toggle{ display:inline-flex; align-items:center; gap:.5rem; min-height:44px; padding:0 1.2rem; border:1px solid rgba(33,29,24,.18); border-radius:999px; background:#fff; color:var(--ink);
  font:600 .82rem/1 var(--sans); letter-spacing:.02em; text-transform:none; cursor:pointer; } }

/* photo-pair section with one picture: it takes the whole media column */
.qual-media--single .qm-a{ width:100%; aspect-ratio:4/3; }
/* links inside the icon list (phone, e-mail on Kontakt) */
.svc-list .d a{ color:inherit; text-decoration:underline; text-decoration-color:var(--brass,#c31622); text-underline-offset:.2em; }
.svc-list .d a:hover{ color:var(--brass,#c31622); }

/* Discreet scrollbars in inner scroll areas (filter column, filter drawer, menu, side cart): thin, no track,
   faint thumb that darkens on hover. Standard properties for Chrome/Firefox, ::-webkit-scrollbar for Safari. */
:is(.catpage .facets, .facets-scroll, .felix-drawer, .felix-drawer__panel, .mc-panel, .fc-cart, .side-cart){ scrollbar-width:thin; scrollbar-color:rgba(33,29,24,.18) transparent; }
:is(.catpage .facets, .facets-scroll, .felix-drawer, .felix-drawer__panel, .mc-panel, .fc-cart, .side-cart):hover{ scrollbar-color:rgba(33,29,24,.38) transparent; }
:is(.catpage .facets, .facets-scroll, .felix-drawer, .felix-drawer__panel, .mc-panel, .fc-cart, .side-cart)::-webkit-scrollbar{ width:6px; height:6px; }
:is(.catpage .facets, .facets-scroll, .felix-drawer, .felix-drawer__panel, .mc-panel, .fc-cart, .side-cart)::-webkit-scrollbar-track{ background:transparent; }
:is(.catpage .facets, .facets-scroll, .felix-drawer, .felix-drawer__panel, .mc-panel, .fc-cart, .side-cart)::-webkit-scrollbar-thumb{ background:rgba(33,29,24,.18); border-radius:6px; }
:is(.catpage .facets, .facets-scroll, .felix-drawer, .felix-drawer__panel, .mc-panel, .fc-cart, .side-cart):hover::-webkit-scrollbar-thumb{ background:rgba(33,29,24,.38); }

/* Product hero with a cut-out (FELIX feedback 8): taller band, the background picture fills it completely,
   only a short fade into the content at the very bottom (no dark strip under the knife). */
.pv-hero:not(.pv-hero--photo){ min-height:clamp(500px,62vh,700px); justify-content:flex-end; padding-bottom:clamp(18px,3vh,32px); } /* knife sits low, just above the solid area */
.pv-hero--long:not(.pv-hero--photo){ min-height:clamp(470px,56vh,640px); }
.pv-hero:not(.pv-hero--photo) .pv-hero-bg{ height:100%; }
@media (max-width:600px){
  .pv-hero:not(.pv-hero--photo){ min-height:400px; padding-bottom:16px; }
  .pv-hero--long:not(.pv-hero--photo){ min-height:360px; }
}

/* "5 Jahre Garantie" ribbon from the old shop (FELIX feedback 9): hangs from the top edge beside the logo, shrinks with the bar.
   Silver like the old label, rebuilt as CSS so it stays sharp. Links to the warranty page. */
.h5-badge{ position:relative; align-self:flex-start; margin:calc(-1.6rem + .9rem * var(--shrink, 0)) auto 0 clamp(1rem,2vw,1.8rem);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:.15rem;
  width:calc(58px - 12px * var(--shrink, 0)); height:calc(84px - 26px * var(--shrink, 0)); padding-top:calc(12px - 4px * var(--shrink, 0));
  background:linear-gradient(180deg,#9a9da2 0%,#c9cbcf 38%,#8d9095 100%); color:#fff; text-decoration:none;
  clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%); box-shadow:inset 3px 0 0 rgba(255,255,255,.25), inset -3px 0 0 rgba(0,0,0,.12);
  text-shadow:0 1px 2px rgba(0,0,0,.45); transition:filter .2s; }
.h5-badge:hover{ filter:brightness(1.08); }
.h5-badge:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.h5-badge-n{ font:700 calc(1.5rem - .35rem * var(--shrink, 0))/1 var(--serif); }
.h5-badge-t{ font:700 calc(.5rem - .06rem * var(--shrink, 0))/1.15 var(--sans); letter-spacing:.12em; text-transform:uppercase; text-align:center; }
@media (max-width:860px){
  .h5-badge{ margin-top:calc(-1.6rem + 1.05rem * var(--shrink, 0)); width:calc(46px - 8px * var(--shrink, 0)); height:calc(66px - 16px * var(--shrink, 0)); padding-top:8px; margin-left:.8rem; }
  .h5-badge-n{ font-size:1.15rem; } .h5-badge-t{ font-size:.42rem; }
}

/* Header search panel (FELIX feedback 12) */
.h5-nav.search-open{ background:rgba(46,46,46,.96); backdrop-filter:blur(14px); }
.h5-search{ position:absolute; left:0; right:0; top:100%; background:rgba(46,46,46,.97); backdrop-filter:blur(14px); border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); padding:1rem clamp(1.5rem,4vw,3rem); }
.h5-search[hidden]{ display:none; }
.h5-search-form{ display:flex; align-items:center; gap:.8rem; max-width:860px; margin:0 auto; background:#fff; border-radius:999px; padding:.35rem .4rem .35rem 1.1rem; }
.h5-search-ico{ color:#6b6f75; flex:none; }
.h5-search-input{ flex:1; min-width:0; border:0; outline:0; background:transparent; font:400 1rem/1.4 var(--sans); color:#211d18; padding:.6rem 0; }
.h5-search-input::-webkit-search-cancel-button{ display:none; }
.h5-search-go{ flex:none; border:0; border-radius:999px; background:var(--brass,#c31622); color:#fff; font:600 .9rem/1 var(--sans); padding:.85rem 1.4rem; cursor:pointer; }
.h5-search-go:hover{ background:#a8121c; }
.h5-search-close{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:0; border-radius:50%; background:transparent; color:#6b6f75; cursor:pointer; }
.h5-search-close:hover{ background:#f1eee9; color:#211d18; }
.h5-search-form:focus-within{ box-shadow:0 0 0 3px rgba(255,255,255,.35); }
@media (max-width:600px){ .h5-search{ padding:.75rem 1rem; } .h5-search-go{ padding:.75rem 1rem; } .h5-search-form{ gap:.4rem; padding-left:.9rem; } }
.h5-search .h5-search-input:focus, .h5-search .h5-search-input:focus-visible{ outline:0; box-shadow:none; border:0; } /* the ring sits on the whole pill */

/* Live search suggestions */
.h5-sr{ max-width:860px; margin:.7rem auto 0; background:#fff; border-radius:20px; box-shadow:0 24px 60px rgba(0,0,0,.35); overflow:hidden; color:#211d18;
  max-height:min(70vh,620px); overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(33,29,24,.18) transparent; }
.h5-sr[hidden]{ display:none; }
.h5-sr.is-loading{ opacity:.75; transition:opacity .15s; }
.h5-sr-grid{ display:grid; grid-template-columns:minmax(0,1fr) 220px; }
.h5-sr-col{ padding:1.1rem 1.1rem .6rem; }
.h5-sr-col--cats{ background:#f6f4f1; border-left:1px solid #eee9e2; }
.h5-sr-h{ margin:0 0 .5rem .4rem; font:600 .64rem/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:#8a7f70; }
.h5-sr-list, .h5-sr-cats{ list-style:none; margin:0; padding:0; }
.h5-sr-item{ display:grid; grid-template-columns:92px minmax(0,1fr) auto; align-items:center; gap:1rem; padding:.55rem .6rem; border-radius:14px; text-decoration:none; color:inherit; }
.h5-sr-item:hover, .h5-sr-item.is-active{ background:#f6f4f1; }
.h5-sr-img{ display:flex; align-items:center; justify-content:center; width:92px; height:56px; border-radius:10px; background:#f1eee9; overflow:hidden; }
.h5-sr-img img{ max-width:86%; max-height:80%; object-fit:contain; filter:drop-shadow(0 4px 6px rgba(33,29,24,.18)); }
.h5-sr-txt{ display:flex; flex-direction:column; gap:.18rem; min-width:0; }
.h5-sr-ser{ font:600 .6rem/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:#9e1119; }
.h5-sr-name{ font:500 .98rem/1.25 var(--serif); color:#211d18; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.h5-sr-sku{ font:400 .74rem/1 var(--sans); color:#8a7f70; }
.h5-sr mark{ background:none; color:inherit; font-weight:700; text-decoration:underline; text-decoration-color:rgba(195,22,34,.45); text-underline-offset:3px; }
.h5-sr-price{ font:600 .92rem/1 var(--sans); color:#211d18; white-space:nowrap; }
.h5-sr-price.is-sale{ color:#9e1119; }
.h5-sr-cat{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.6rem .7rem; border-radius:12px; text-decoration:none; color:#211d18; font:500 .92rem/1.2 var(--sans); }
.h5-sr-cat em{ font-style:normal; font-size:.75rem; color:#8a7f70; background:#fff; border-radius:999px; padding:.2rem .5rem; }
.h5-sr-cat:hover, .h5-sr-cat.is-active{ background:#fff; }
.h5-sr-all{ display:flex; align-items:center; justify-content:center; gap:.5rem; padding:1rem; border-top:1px solid #eee9e2; background:#fff; color:#9e1119; font:600 .92rem/1 var(--sans); text-decoration:none; }
.h5-sr-all:hover, .h5-sr-all.is-active{ background:#9e1119; color:#fff; }
.h5-sr-empty{ display:flex; flex-direction:column; gap:.35rem; padding:1.4rem 1.6rem; font:400 .92rem/1.5 var(--sans); color:#5c574e; }
.h5-sr-empty b{ color:#211d18; font-weight:600; }
.h5-sr-load{ display:flex; gap:.4rem; justify-content:center; padding:1.6rem; }
.h5-sr-load span{ width:8px; height:8px; border-radius:50%; background:#c9c3ba; animation:h5srdot 1s infinite ease-in-out; }
.h5-sr-load span:nth-child(2){ animation-delay:.15s; } .h5-sr-load span:nth-child(3){ animation-delay:.3s; }
@keyframes h5srdot{ 0%,80%,100%{ opacity:.3; transform:scale(.8); } 40%{ opacity:1; transform:scale(1); } }
@media (prefers-reduced-motion:reduce){ .h5-sr-load span{ animation:none; } }
@media (max-width:700px){
  .h5-sr{ border-radius:16px; max-height:calc(100vh - 170px); }
  .h5-sr-grid{ grid-template-columns:1fr; }
  .h5-sr-col--cats{ border-left:0; border-top:1px solid #eee9e2; }
  .h5-sr-item{ grid-template-columns:68px minmax(0,1fr) auto; gap:.7rem; }
  .h5-sr-img{ width:68px; height:44px; }
  .h5-sr-sku{ display:none; }
}
/* the panel lives inside .h5-nav: undo the nav's ul/a rules (row layout, hidden lists below 1200px, white link text) */
.h5-nav .h5-sr ul{ display:block; gap:0; }
.h5-nav .h5-sr a{ font:inherit; color:#211d18; white-space:normal; }
.h5-nav .h5-sr a.h5-sr-cat{ font:500 .92rem/1.2 var(--sans); }
.h5-nav .h5-sr a.h5-sr-all{ color:#9e1119; font:600 .92rem/1 var(--sans); }
.h5-nav .h5-sr a.h5-sr-all:hover, .h5-nav .h5-sr a.h5-sr-all.is-active{ color:#fff; }
@media (max-width:700px){ .h5-sr-name{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-size:.92rem; } }

/* Usercentrics (V1) cookie banner in FELIX style: anthracite, Museo Sans, equal-size Ablehnen/Akzeptieren */
#uc-banner-modal #uc-main-banner, #uc-banner-modal #uc-main-banner .uc-banner-content{ background:#2e2e2e !important; color:#e9e6e1 !important; font-family:var(--sans) !important; }
#uc-banner-modal #uc-main-banner{ border-top:1px solid rgba(255,255,255,.08) !important; box-shadow:0 -12px 40px rgba(0,0,0,.35) !important; }
#uc-banner-modal #uc-main-banner .uc-banner-content{ max-width:1180px !important; margin:0 auto !important; padding:22px 24px 14px !important; }
#uc-banner-modal #uc-banner-text, #uc-banner-modal #uc-banner-text *{ color:#e9e6e1 !important; font:400 .9rem/1.55 var(--sans) !important; text-align:left !important; }
#uc-banner-modal .uc-btn-footer-container .btn-list{ display:flex !important; flex-wrap:wrap !important; gap:12px !important; align-items:center !important; justify-content:flex-start !important; margin-top:14px !important; }
#uc-banner-modal .btn-list .uc-btn{ flex:0 0 auto !important; width:auto !important; min-width:190px !important; height:46px !important; margin:0 !important; padding:0 26px !important; border-radius:999px !important; font:600 .8rem/1 var(--sans) !important; letter-spacing:.08em !important; text-transform:uppercase !important; box-shadow:none !important; cursor:pointer !important; }
#uc-banner-modal .btn-list #uc-btn-accept-banner{ order:2 !important; background:#c31622 !important; border:1px solid #c31622 !important; color:#fff !important; }
#uc-banner-modal .btn-list #uc-btn-accept-banner:hover{ background:#9e1119 !important; border-color:#9e1119 !important; }
#uc-banner-modal .btn-list #uc-btn-deny-banner{ order:1 !important; background:transparent !important; border:1px solid rgba(255,255,255,.75) !important; color:#fff !important; }
#uc-banner-modal .btn-list #uc-btn-deny-banner:hover{ background:#fff !important; color:#2e2e2e !important; }
#uc-banner-modal .btn-list #uc-btn-more-info-banner{ order:3 !important; min-width:0 !important; padding:0 8px !important; background:transparent !important; border:0 !important; color:#c9c5bf !important; text-decoration:underline !important; text-underline-offset:3px !important; }
#uc-banner-modal .btn-list #uc-btn-more-info-banner:hover{ color:#fff !important; }
#uc-banner-modal .uc-powered-by-footer{ margin-top:12px !important; opacity:.55 !important; }
#uc-banner-modal .uc-powered-by-footer *, #uc-banner-modal .uc-banner-links a{ color:#c9c5bf !important; font-family:var(--sans) !important; }
#uc-banner-modal .uc-btn:focus-visible{ outline:2px solid #fff !important; outline-offset:2px !important; }
@media (max-width:640px){
  #uc-banner-modal #uc-main-banner .uc-banner-content{ padding:18px 16px 12px !important; }
  #uc-banner-modal .btn-list .uc-btn{ flex:1 1 100% !important; min-width:0 !important; }
  #uc-banner-modal .btn-list #uc-btn-accept-banner{ order:1 !important; }
  #uc-banner-modal .btn-list #uc-btn-deny-banner{ order:2 !important; }
}