/* ==========================================================================
   fliegengittermacher.de — Screendesign-Entwurf 2026
   Autor: maxonline · Alle Farben/Abstände als CSS-Variablen, keine Inline-Styles
   ========================================================================== */

:root{
  /* Farben – abgeleitet aus dem bestehenden Auftritt (Orange + warmes Sand) */
  --c-ink:            #17181a;
  --c-ink-soft:       #33363b;
  --c-body:           #55595f;
  --c-muted:          #7c8188;
  --c-line:           #e3ded3;
  --c-line-strong:    #cfc8b8;

  --c-sand:           #f7f4ec;
  --c-sand-deep:      #efe9dc;
  --c-white:          #ffffff;

  --c-accent:         #e2610d;
  --c-accent-hover:   #c4520a;
  --c-accent-soft:    #fdf1e7;
  --c-accent-line:    #f3d3b7;

  --c-forest:         #1f2a2e;   /* dunkle Sektionsfläche */
  --c-star:           #f0a500;

  /* Typografie – System-Fonts, keine externen Webfonts */
  --f-sans: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md:   1.1875rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.125rem;
  --fs-3xl:  2.75rem;
  --fs-4xl:  3.5rem;

  /* Raster */
  --wrap:      1220px;
  --wrap-slim: 860px;
  --gap:       clamp(1.25rem, 2.4vw, 2rem);
  --sec-y:     clamp(3.5rem, 7vw, 6.5rem);
  --radius:    14px;
  --radius-sm: 9px;

  --shadow-sm: 0 1px 2px rgba(23,24,26,.05), 0 6px 18px -12px rgba(23,24,26,.22);
  --shadow-md: 0 2px 4px rgba(23,24,26,.04), 0 22px 46px -28px rgba(23,24,26,.35);

  --header-h: 76px;
}

/* --------------------------------------------------------- Reset / Basis */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  overflow-x:clip;
  font-family:var(--f-sans);
  font-size:var(--fs-base);
  line-height:1.65;
  color:var(--c-body);
  background:var(--c-white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{
  margin:0 0 .55em;
  color:var(--c-ink);
  font-weight:800;
  line-height:1.12;
  letter-spacing:-.022em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.25rem, 5.2vw, var(--fs-4xl)); }
h2{ font-size:clamp(1.75rem, 3.6vw, var(--fs-3xl)); }
h3{ font-size:var(--fs-lg); }
h4{ font-size:var(--fs-md); }

p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
a{ color:inherit; }
img,svg{ max-width:100%; height:auto; display:block; }
ul,ol{ margin:0 0 1.1em; padding-left:1.25em; }
li{ margin-bottom:.4em; }
strong{ color:var(--c-ink-soft); font-weight:700; }
hr{ border:0; border-top:1px solid var(--c-line); margin:2.5rem 0; }

:focus-visible{ outline:3px solid var(--c-accent); outline-offset:3px; border-radius:4px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1rem,3.5vw,2rem); }
.wrap-slim{ max-width:var(--wrap-slim); }
.section{ padding-block:var(--sec-y); }
.section + .section-cta{ padding-top:0; }
.section-sand{ background:var(--c-sand); }
.section-dark{ background:var(--c-forest); color:#c9ccd0; }
.section-dark h2,.section-dark h3,.section-dark h4{ color:#fff; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--c-ink); color:#fff; padding:.75rem 1.25rem; border-radius:0 0 var(--radius-sm) 0;
}
.skip-link:focus{ left:0; }

/* ------------------------------------------------------------- Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font:inherit; font-weight:700; font-size:var(--fs-sm);
  letter-spacing:-.01em;
  padding:.95em 1.6em;
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  text-decoration:none;
  cursor:pointer;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:none; }
.btn-primary{ background:var(--c-accent); color:#fff; }
.btn-primary:hover{ background:var(--c-accent-hover); }
.btn-dark{ background:var(--c-ink); color:#fff; }
.btn-dark:hover{ background:#000; }
.btn-ghost{ background:transparent; color:var(--c-ink); border-color:var(--c-line-strong); }
.btn-ghost:hover{ border-color:var(--c-ink); background:var(--c-white); }
.btn-light{ background:#fff; color:var(--c-ink); }
.btn-light:hover{ background:var(--c-sand); }
.btn-lg{ font-size:var(--fs-base); padding:1.05em 1.9em; }
.btn-block{ width:100%; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.45em;
  font-weight:700; font-size:var(--fs-sm); color:var(--c-ink);
  text-decoration:none; text-underline-offset:4px;
}
.link-arrow::after{ content:"→"; transition:transform .18s ease; }
.link-arrow:hover{ color:var(--c-accent); }
.link-arrow:hover::after{ transform:translateX(3px); }

/* ------------------------------------------------------- Eyebrow / Kopf */
.eyebrow{
  display:block;
  font-size:var(--fs-xs); font-weight:800;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--c-accent);
  margin-bottom:.9rem;
}
.section-dark .eyebrow{ color:#f0a06a; }
.section-head{ max-width:44rem; margin-bottom:clamp(2rem,4vw,3.25rem); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head p{ font-size:var(--fs-md); color:var(--c-body); }
.section-dark .section-head p{ color:#aeb4b8; }

/* ============================================================== TOPBAR */
.topbar{
  background:var(--c-ink);
  color:#c3c6ca;
  font-size:var(--fs-xs);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  min-height:38px; flex-wrap:wrap;
}
.topbar ul{ display:flex; gap:1.5rem; list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.topbar li{ margin:0; display:flex; align-items:center; gap:.45em; }
.topbar .ico{ width:14px; height:14px; flex:none; color:var(--c-accent); }
.topbar-contact{ display:flex; gap:1.25rem; }
.topbar-contact a{ text-decoration:none; }
.topbar-contact a:hover{ color:#fff; }
@media (max-width:900px){ .topbar li.topbar-extra, .topbar .topbar-extra{ display:none; } }

/* ============================================================== HEADER */
.header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--c-line);
}
.header-inner{
  display:flex; align-items:center; gap:clamp(1rem,2.5vw,2.25rem);
  min-height:var(--header-h);
}
.logo{ flex:none; display:block; }
.logo img{ width:190px; height:56px; object-fit:contain; }

.nav{ margin-inline-start:auto; }
.nav > ul{ display:flex; align-items:center; gap:clamp(.25rem,1.4vw,1.1rem); list-style:none; margin:0; padding:0; }
.nav > ul > li{ margin:0; position:relative; }
.nav-link{
  display:inline-flex; align-items:center; gap:.35em;
  padding:.65rem .55rem;
  font-size:var(--fs-sm); font-weight:600; color:var(--c-ink-soft);
  text-decoration:none; white-space:nowrap;
  border-radius:6px;
}
.nav-link:hover,.nav-link:focus-visible{ color:var(--c-accent); }
.nav-link .chev{ width:11px; height:11px; opacity:.55; }

/* Dropdown – reines CSS (hover + focus-within) */
.submenu{
  position:absolute; top:calc(100% + 6px); left:-.75rem;
  min-width:290px;
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  padding:.6rem;
  list-style:none; margin:0;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.has-sub:hover .submenu,
.has-sub:focus-within .submenu{ opacity:1; visibility:visible; transform:none; }
.submenu li{ margin:0; }
.submenu a{
  display:block; padding:.6rem .75rem; border-radius:var(--radius-sm);
  text-decoration:none; font-size:var(--fs-sm); font-weight:600; color:var(--c-ink);
}
.submenu a span{ display:block; font-weight:400; font-size:var(--fs-xs); color:var(--c-muted); margin-top:.1rem; }
.submenu a:hover{ background:var(--c-sand); }

.header-actions{ display:flex; align-items:center; gap:.35rem; flex:none; }
.icon-btn{
  display:inline-flex; align-items:center; gap:.4em;
  padding:.55rem .6rem;
  font-size:var(--fs-xs); font-weight:600; color:var(--c-ink-soft);
  text-decoration:none; border-radius:8px; white-space:nowrap;
}
.icon-btn:hover{ background:var(--c-sand); color:var(--c-ink); }
.icon-btn .ico{ width:19px; height:19px; }
.cart-count{
  background:var(--c-accent); color:#fff;
  font-size:11px; font-weight:800; line-height:1;
  padding:.2em .45em; border-radius:20px; margin-left:-.15em;
}
@media (max-width:1180px){ .icon-btn .label{ display:none; } }
@media (max-width:768px){
  .header-actions .icon-btn:not([href="/warenkorb"]){ display:none; }
  .header-actions .btn{ display:none; }
  .logo img{ width:150px; height:44px; }
  .nav-burger{ order:-1; margin-inline-end:.25rem; }
  .header-inner{ gap:.5rem; }
}

/* Mobile Navigation – Checkbox-Toggle, funktioniert ohne JavaScript */
.nav-toggle{ position:absolute; opacity:0; pointer-events:none; }
.nav-burger{
  display:none; align-items:center; gap:.5em;
  padding:.6rem .75rem; margin-inline-start:auto;
  border:1px solid var(--c-line-strong); border-radius:8px;
  font-size:var(--fs-xs); font-weight:700; color:var(--c-ink); cursor:pointer;
}
.nav-burger .ico{ width:18px; height:18px; }
.nav-toggle:focus-visible + .nav-burger{ outline:3px solid var(--c-accent); outline-offset:2px; }

@media (max-width:1024px){
  /* Kein backdrop-filter: sonst wird der Header zum Bezugsrahmen für die
     position:fixed Navigation und das Menü kollabiert. */
  .header{ backdrop-filter:none; background:#fff; }
  .nav-burger{ display:inline-flex; order:3; margin-inline-start:0; }
  .header-actions{ order:2; margin-inline-start:auto; }
  .nav{
    position:fixed; inset:calc(var(--header-h) + 38px) 0 0 auto;
    width:min(400px,100%);
    background:#fff; border-left:1px solid var(--c-line);
    padding:1.25rem clamp(1rem,4vw,1.75rem) 3rem;
    overflow-y:auto;
    transform:translateX(105%);
    visibility:hidden;
    transition:transform .25s ease, visibility .25s;
    box-shadow:var(--shadow-md);
  }
  .nav-toggle:checked ~ .nav{ transform:none; visibility:visible; }
  .nav > ul{ flex-direction:column; align-items:stretch; gap:.15rem; }
  .nav-link{ padding:.85rem .25rem; font-size:var(--fs-md); border-bottom:1px solid var(--c-line); border-radius:0; }
  .nav-link .chev{ display:none; }
  .submenu{
    position:static; opacity:1; visibility:visible; transform:none;
    border:0; box-shadow:none; padding:.35rem 0 .9rem .9rem; min-width:0;
  }
  .submenu a{ padding:.5rem .25rem; font-weight:500; }
  .submenu a:hover{ background:transparent; color:var(--c-accent); }
}

/* Mobiler Dauer-CTA – der wichtigste Weg bleibt immer erreichbar */
.mobile-cta{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  align-items:center; justify-content:center; gap:.5em;
  background:var(--c-accent); color:#fff;
  font-size:var(--fs-sm); font-weight:800; text-decoration:none;
  padding:1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
  box-shadow:0 -8px 24px -14px rgba(23,24,26,.55);
}
@media (max-width:768px){
  .mobile-cta{ display:flex; }
  body{ padding-bottom:4.5rem; }
}

/* ================================================================ HERO */
.hero{
  background:var(--c-sand);
  padding-block:clamp(2.5rem,5vw,4.5rem) clamp(2.5rem,5vw,4.5rem);
  overflow:hidden;
}
.hero-grid{
  display:grid; gap:clamp(1.75rem,4vw,3.5rem);
  grid-template-columns:minmax(0,1fr);
  align-items:center;
}
@media (min-width:960px){
  .hero-grid{ grid-template-columns:minmax(0,1.06fr) minmax(0,1fr); }
}
.hero-copy{ padding-bottom:0; }
.hero h1{ margin-bottom:.35em; }
.hero-lead{ font-size:clamp(1.0625rem,1.6vw,var(--fs-md)); color:var(--c-ink-soft); max-width:36rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin:1.9rem 0 1.5rem; }
.hero-actions .btn{ flex:0 1 auto; }
.hero-actions .btn-lg{ padding:1.05em 1.45em; }

.hero-badges{ display:flex; flex-wrap:wrap; gap:.55rem 1.4rem; list-style:none; margin:0; padding:0; }
.hero-badges li{ display:flex; align-items:center; gap:.45em; margin:0; font-size:var(--fs-sm); font-weight:600; color:var(--c-ink-soft); }
.hero-badges .ico{ width:17px; height:17px; color:var(--c-accent); flex:none; }

.hero-media{ position:relative; align-self:center; }
.hero-media img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--radius); box-shadow:var(--shadow-md);
}
.hero-price{
  position:absolute; left:clamp(-1.25rem,-1vw,-.5rem); bottom:clamp(1rem,2.5vw,1.75rem);
  background:#fff; border:1px solid var(--c-line);
  border-radius:var(--radius); box-shadow:var(--shadow-md);
  padding:.85rem 1.1rem; max-width:13.5rem;
}
.hero-price .tag{
  display:inline-block; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--c-accent); background:var(--c-accent-soft); border-radius:20px; padding:.25em .7em; margin-bottom:.5rem;
}
.hero-price .amount{ font-size:var(--fs-lg); font-weight:800; color:var(--c-ink); line-height:1.1; letter-spacing:-.03em; }
.hero-price p{ font-size:var(--fs-xs); line-height:1.45; color:var(--c-muted); margin:.25rem 0 0; }
@media (max-width:620px){ .hero-price{ position:static; margin-top:1rem; margin-inline:0; max-width:none; } }

/* ======================================================= USP-Leiste */
.usp{ border-block:1px solid var(--c-line); background:#fff; }
.usp ul{
  display:grid; gap:1.5rem clamp(1.5rem,3vw,2.75rem);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  list-style:none; margin:0; padding:clamp(1.75rem,3vw,2.5rem) 0;
}
.usp li{ display:flex; gap:.85rem; margin:0; }
.usp .ico{ width:26px; height:26px; flex:none; color:var(--c-accent); margin-top:.15rem; }
.usp strong{ display:block; color:var(--c-ink); font-size:var(--fs-sm); font-weight:800; margin-bottom:.15rem; }
.usp span{ font-size:var(--fs-sm); line-height:1.5; display:block; }

/* ============================================== Kategorien / Einstieg */
.cat-grid{
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
}
.cat-card{
  position:relative;
  display:flex; flex-direction:column;
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:var(--radius);
  overflow:hidden;
  text-decoration:none;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.cat-card:hover{ border-color:var(--c-line-strong); box-shadow:var(--shadow-md); transform:translateY(-3px); }
.cat-card img{ width:100%; aspect-ratio:5/4; object-fit:cover; }
.cat-card-body{ padding:1.15rem 1.25rem 1.35rem; display:flex; flex-direction:column; flex:1; }
.cat-card h3{ font-size:var(--fs-md); margin-bottom:.3rem; }
.cat-card p{ font-size:var(--fs-sm); margin-bottom:1rem; }
.cat-card .count{
  font-size:var(--fs-xs); font-weight:700; color:var(--c-muted);
  letter-spacing:.02em; margin-bottom:.55rem;
}
.cat-card .link-arrow{ margin-top:auto; }

.cat-extra{
  display:grid; gap:var(--gap); margin-top:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.cat-mini{
  display:flex; align-items:flex-start; gap:1rem;
  background:#fff; border:1px solid var(--c-line); border-radius:var(--radius);
  padding:1.1rem 1.25rem; text-decoration:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.cat-mini:hover{ border-color:var(--c-line-strong); box-shadow:var(--shadow-sm); }
.cat-mini .ico{ width:28px; height:28px; flex:none; color:var(--c-accent); margin-top:.15rem; }
.cat-mini strong{ display:block; color:var(--c-ink); font-size:var(--fs-sm); }
.cat-mini span{ display:block; font-size:var(--fs-xs); line-height:1.5; color:var(--c-muted); margin-top:.1rem; }

/* ================================================= Konfigurator-Teaser */
.konfig{
  display:grid; gap:clamp(1.75rem,4vw,3.5rem);
  grid-template-columns:minmax(0,1fr);
  align-items:center;
}
@media (min-width:940px){ .konfig{ grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); } }

.konfig-steps{ list-style:none; margin:1.75rem 0 0; padding:0; counter-reset:kstep; }
.konfig-steps li{
  display:flex; gap:1rem; padding:1rem 0;
  border-top:1px solid rgba(255,255,255,.13);
}
.konfig-steps li:first-child{ border-top:0; padding-top:0; }
.konfig-steps li::before{
  counter-increment:kstep; content:counter(kstep);
  flex:none; width:30px; height:30px; border-radius:50%;
  background:var(--c-accent); color:#fff;
  font-size:var(--fs-xs); font-weight:800;
  display:grid; place-items:center;
}
.konfig-steps strong{ display:block; color:#fff; font-size:var(--fs-sm); margin-bottom:.1rem; }
.konfig-steps span{ font-size:var(--fs-sm); color:#a9afb3; }

/* Mock des Konfigurators */
.konfig-mock{
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-md);
  padding:clamp(1.25rem,2.5vw,1.75rem); color:var(--c-body);
}
.konfig-mock-head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-bottom:.9rem; margin-bottom:1.1rem; border-bottom:1px solid var(--c-line);
}
.konfig-mock-head strong{ color:var(--c-ink); font-size:var(--fs-sm); }
.konfig-mock-head .model{
  font-size:11px; font-weight:800; letter-spacing:.08em;
  background:var(--c-ink); color:#fff; border-radius:5px; padding:.3em .6em;
}
.mock-label{ font-size:var(--fs-xs); font-weight:800; color:var(--c-ink); text-transform:uppercase; letter-spacing:.09em; margin-bottom:.5rem; }
.mock-row{ margin-bottom:1.15rem; }
.mock-fields{ display:grid; grid-template-columns:1fr 1fr; gap:.65rem; }
.mock-field{
  border:1px solid var(--c-line-strong); border-radius:var(--radius-sm);
  padding:.6rem .8rem; background:var(--c-sand);
}
.mock-field span{ display:block; font-size:11px; color:var(--c-muted); }
.mock-field b{ font-size:var(--fs-base); color:var(--c-ink); }
.mock-swatches{ display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; margin:0; padding:0; }
.mock-swatches li{ margin:0; }
.mock-swatches span{
  display:block; width:30px; height:30px; border-radius:50%;
  border:1px solid rgba(0,0,0,.16);
}
.mock-swatches .is-active span{ box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--c-accent); }
.sw-9016{ background:#f2f2ec; } .sw-7016{ background:#383e42; } .sw-8003{ background:#734222; }
.sw-9005{ background:#0d0d0d; } .sw-e6{ background:#c9ccce; } .sw-9007{ background:#8f8f8c; }
.mock-chips{ display:flex; flex-wrap:wrap; gap:.4rem; list-style:none; margin:0; padding:0; }
.mock-chips li{ margin:0; }
.mock-chips span{
  display:block; font-size:var(--fs-xs); font-weight:600;
  border:1px solid var(--c-line-strong); border-radius:20px; padding:.35em .8em; color:var(--c-ink-soft);
}
.mock-chips .is-active span{ background:var(--c-ink); border-color:var(--c-ink); color:#fff; }
.konfig-mock-foot{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  border-top:1px solid var(--c-line); padding-top:1rem; margin-top:.35rem;
}
.konfig-mock-foot span{ font-size:var(--fs-xs); color:var(--c-muted); display:block; }
.konfig-mock-foot b{ font-size:var(--fs-xl); color:var(--c-ink); letter-spacing:-.03em; }

/* ================================================================ Ablauf */
.steps{
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  counter-reset:step;
}
.step{ display:flex; flex-direction:column; }
.step img{ width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:var(--radius); margin-bottom:1.05rem; }
.step-no{
  counter-increment:step;
  display:inline-flex; align-items:center; gap:.5em;
  font-size:var(--fs-xs); font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--c-muted); margin-bottom:.45rem;
}
.step-no::before{
  content:counter(step,decimal-leading-zero);
  color:var(--c-accent); font-size:var(--fs-sm); letter-spacing:0;
}
.step h3{ font-size:var(--fs-md); margin-bottom:.35rem; }
.step p{ font-size:var(--fs-sm); }

/* ========================================================== Vorher/Nachher */
.compare{
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.compare figure{ margin:0; }
.compare img{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:var(--radius); }
.compare figcaption{
  display:flex; align-items:baseline; gap:.6rem;
  margin-top:.85rem; font-size:var(--fs-sm);
}
.compare figcaption b{
  font-size:var(--fs-xs); font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background:var(--c-ink); border-radius:4px; padding:.25em .6em; flex:none;
}
.compare .is-after figcaption b{ background:var(--c-accent); }

/* ============================================================== Gewebe */
.fabric-grid{
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
}
@media (min-width:1080px){ .fabric-grid{ grid-template-columns:repeat(5,1fr); } }
.fabric{
  background:#fff; border:1px solid var(--c-line); border-radius:var(--radius);
  padding:1.35rem 1.4rem;
}
.fabric .mesh{
  width:44px; height:44px; border-radius:9px; margin-bottom:.9rem;
  border:1px solid var(--c-line-strong);
}
.mesh-standard{ background-color:#4a4f52; background-image:linear-gradient(#0000 50%, rgba(255,255,255,.22) 50%), linear-gradient(90deg,#0000 50%, rgba(255,255,255,.22) 50%); background-size:5px 5px; }
.mesh-pet{ background-color:#1f2224; background-image:linear-gradient(#0000 50%, rgba(255,255,255,.18) 50%), linear-gradient(90deg,#0000 50%, rgba(255,255,255,.18) 50%); background-size:8px 8px; }
.mesh-air{ background-color:#5a6063; background-image:linear-gradient(#0000 50%, rgba(255,255,255,.3) 50%), linear-gradient(90deg,#0000 50%, rgba(255,255,255,.3) 50%); background-size:4px 4px; }
.mesh-pollen{ background-color:#2b2e30; background-image:linear-gradient(#0000 50%, rgba(255,255,255,.14) 50%), linear-gradient(90deg,#0000 50%, rgba(255,255,255,.14) 50%); background-size:3px 3px; }
.mesh-inox{ background-color:#6d7276; background-image:linear-gradient(#0000 50%, rgba(255,255,255,.35) 50%), linear-gradient(90deg,#0000 50%, rgba(255,255,255,.35) 50%); background-size:6px 6px; }
.fabric h3{ font-size:var(--fs-base); margin-bottom:.3rem; }
.fabric p{ font-size:var(--fs-sm); margin-bottom:.85rem; }
.fabric .for{ font-size:var(--fs-xs); color:var(--c-muted); border-top:1px solid var(--c-line); padding-top:.7rem; }
.fabric .for b{ color:var(--c-ink-soft); }

/* ========================================================== Bewertungen */
.rating-head{
  display:grid; gap:1.5rem 3rem; align-items:end;
  grid-template-columns:minmax(0,1fr);
  margin-bottom:clamp(1.75rem,3vw,2.5rem);
}
@media (min-width:860px){ .rating-head{ grid-template-columns:minmax(0,1fr) auto; } }
.rating-head .section-head{ margin-bottom:0; }
.rating-score{
  display:flex; align-items:center; gap:.85rem;
  background:#fff; border:1px solid var(--c-line); border-radius:var(--radius);
  padding:1rem 1.35rem;
}
.rating-score .num{ font-size:var(--fs-3xl); font-weight:800; color:var(--c-ink); letter-spacing:-.04em; line-height:1; }
.stars{ display:flex; gap:2px; }
.stars .ico{ width:19px; height:19px; color:var(--c-star); }
.rating-score p{ font-size:var(--fs-xs); color:var(--c-muted); margin:.25rem 0 0; }

.reviews{
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
}
.review{
  background:#fff; border:1px solid var(--c-line); border-radius:var(--radius);
  padding:1.35rem 1.4rem; display:flex; flex-direction:column;
}
.review .stars{ margin-bottom:.8rem; }
.review blockquote{ margin:0 0 1rem; font-size:var(--fs-sm); color:var(--c-ink-soft); line-height:1.6; }
.review cite{ font-style:normal; font-size:var(--fs-xs); font-weight:700; color:var(--c-ink); margin-top:auto; }

/* ============================================================== Service */
.service{
  display:grid; gap:clamp(1.75rem,4vw,3.25rem);
  grid-template-columns:minmax(0,1fr);
  align-items:center;
}
@media (min-width:940px){ .service{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); } }
.service img{ width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:var(--radius); }
.service-list{ list-style:none; margin:1.5rem 0 1.75rem; padding:0; }
.service-list li{ display:flex; gap:.8rem; padding:.75rem 0; border-top:1px solid var(--c-line); }
.service-list li:first-child{ border-top:0; padding-top:0; }
.service-list .ico{ width:20px; height:20px; flex:none; color:var(--c-accent); margin-top:.2rem; }
.service-list strong{ display:block; color:var(--c-ink); font-size:var(--fs-sm); }
.service-list span{ font-size:var(--fs-sm); }

/* ============================================================= SEO-Text */
.prose h2{ font-size:clamp(1.5rem,2.6vw,var(--fs-xl)); margin-top:2.5rem; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:var(--fs-md); margin-top:1.85rem; }
.prose ul{ padding-left:1.15em; }
.prose li{ font-size:var(--fs-base); }
.prose li::marker{ color:var(--c-accent); }

/* ================================================================== FAQ */
.faq{ max-width:56rem; margin-inline:auto; }
.faq details{
  border-bottom:1px solid var(--c-line);
  background:transparent;
}
.faq summary{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1.25rem;
  padding:1.25rem 0;
  font-size:var(--fs-md); font-weight:700; color:var(--c-ink);
  cursor:pointer; list-style:none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; flex:none;
  font-size:1.5rem; font-weight:400; line-height:1; color:var(--c-accent);
  transition:transform .2s ease;
}
.faq details[open] summary::after{ content:"−"; }
.faq summary:hover{ color:var(--c-accent); }
.faq .answer{ padding:0 0 1.4rem; max-width:52rem; }
.faq .answer p{ font-size:var(--fs-sm); }
.faq-more{ margin-top:1.5rem; }

/* ============================================================ Schluss-CTA */
.cta-final{
  background:var(--c-accent);
  color:#fff;
  border-radius:var(--radius);
  padding:clamp(2rem,4.5vw,3.5rem);
  display:grid; gap:1.75rem; align-items:center;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:860px){ .cta-final{ grid-template-columns:minmax(0,1.35fr) auto; } }
.cta-final h2{ color:#fff; margin-bottom:.4rem; }
.cta-final p{ color:rgba(255,255,255,.9); font-size:var(--fs-md); margin:0; max-width:38rem; }
.cta-final .actions{ display:flex; flex-wrap:wrap; gap:.75rem; }

/* =============================================================== Footer */
.footer{ background:var(--c-ink); color:#9ba1a7; padding-block:clamp(3rem,5vw,4.5rem) 0; font-size:var(--fs-sm); }
.footer a{ color:#c5cad0; text-decoration:none; }
.footer a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.footer-grid{
  display:grid; gap:clamp(2rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  padding-bottom:clamp(2.5rem,4vw,3.5rem);
}
.footer h3{ color:#fff; font-size:var(--fs-sm); letter-spacing:.03em; margin-bottom:1rem; }
.footer ul{ list-style:none; margin:0; padding:0; }
.footer li{ margin-bottom:.55rem; }
.footer-brand img{ width:180px; height:53px; object-fit:contain; background:#fff; border-radius:8px; padding:.5rem .65rem; margin-bottom:1.1rem; }
.footer-brand p{ font-size:var(--fs-sm); max-width:24rem; }
.footer-contact li{ display:flex; gap:.6rem; align-items:flex-start; }
.footer-contact .ico{ width:17px; height:17px; flex:none; color:var(--c-accent); margin-top:.25rem; }

.footer-pay{
  border-top:1px solid rgba(255,255,255,.11);
  padding-block:1.75rem;
  display:grid; gap:1.5rem 3rem;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.footer-pay h4{ color:#fff; font-size:11px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.85rem; }
.pay-logos{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; list-style:none; margin:0; padding:0; }
.pay-logos li{ margin:0; }
.pay-logos img{
  height:26px; width:auto; background:#fff; border-radius:5px; padding:.28rem .5rem;
}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.11);
  padding-block:1.35rem 1.75rem;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
  font-size:var(--fs-xs);
}
.footer-bottom ul{ display:flex; flex-wrap:wrap; gap:1.25rem; }
.footer-bottom li{ margin:0; }

/* =========================================== Sanfte Einblend-Effekte (CSS-only) */
/* Bewusst OHNE Opazität: der Inhalt ist in jedem Kontext zu 100 % sichtbar und
   lesbar – auch beim Rendern ohne Scroll (Screenshots, Print, Crawler). Die
   Einblendung entsteht allein aus der sanften Bewegung von unten. */
@keyframes rise{
  from{ transform:translateY(26px); }
  to  { transform:none; }
}
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .reveal{
      animation:rise linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 65%;
    }
  }
}

/* ============================================================== Print */
@media print{
  .header,.topbar,.cta-final,.nav-burger{ display:none; }
  body{ font-size:11pt; color:#000; }
}

/* ==========================================================================
   KATEGORIESEITE
   ========================================================================== */

/* ---------------------------------------------------------- Breadcrumb */
.crumbs{ background:var(--c-sand); border-bottom:1px solid var(--c-line); }
.crumbs ol{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  list-style:none; margin:0; padding:.85rem 0;
  font-size:var(--fs-xs); color:var(--c-muted);
}
.crumbs li{ margin:0; display:flex; align-items:center; gap:.5rem; }
.crumbs li + li::before{ content:"/"; color:var(--c-line-strong); }
.crumbs a{ text-decoration:none; color:var(--c-body); }
.crumbs a:hover{ color:var(--c-accent); }
.crumbs [aria-current]{ color:var(--c-ink); font-weight:600; }

.nav-link.is-current{ color:var(--c-accent); }

/* -------------------------------------------------------- Kategorie-Hero */
.cat-hero{ background:var(--c-sand); padding-block:clamp(2.25rem,4.5vw,4rem); }
.cat-hero-grid{
  display:grid; gap:clamp(1.75rem,4vw,3.5rem);
  grid-template-columns:minmax(0,1fr);
  align-items:center;
}
@media (min-width:960px){ .cat-hero-grid{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); } }
.cat-hero h1{ margin-bottom:.45em; }
.cat-hero-media img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--radius); box-shadow:var(--shadow-md);
}

/* ------------------------------------------------------------- Bauarten */
.bauart-grid{
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
@media (min-width:1280px){ .bauart-grid{ grid-template-columns:repeat(5,1fr); } }
.bauart{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--c-line); border-radius:var(--radius);
  padding:1.35rem 1.35rem 1.5rem;
  cursor:pointer;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.bauart:hover{ border-color:var(--c-line-strong); box-shadow:var(--shadow-md); transform:translateY(-3px); }
.bauart-ico{ display:block; color:var(--c-ink-soft); margin-bottom:1rem; }
.bauart-ico svg{ width:74px; height:59px; }
.bauart-count{
  display:block; font-size:var(--fs-xs); font-weight:700; color:var(--c-muted);
  margin-bottom:.35rem;
}
.bauart h3{ font-size:var(--fs-base); margin-bottom:.4rem; }
.bauart p{ font-size:var(--fs-sm); margin-bottom:.9rem; }
.bauart ul{ list-style:none; margin:0 0 1.15rem; padding:0; }
.bauart li{
  position:relative; padding-left:1.15rem; margin-bottom:.3rem;
  font-size:var(--fs-xs); color:var(--c-ink-soft);
}
.bauart li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:6px; height:6px; border-radius:50%; background:var(--c-accent);
}
.bauart-pick{
  margin-top:auto;
  font-size:var(--fs-sm); font-weight:700; color:var(--c-accent);
}
.bauart-pick::after{ content:" ↓"; }

/* --------------------------------------------------- Modelle mit Filter */
.f-input{
  position:absolute; width:1px; height:1px; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
.filterbar{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin-bottom:clamp(1.5rem,3vw,2.25rem);
}
.filterbar label{
  display:inline-flex; align-items:center; gap:.5em;
  background:#fff; border:1px solid var(--c-line-strong); border-radius:30px;
  padding:.55em 1.05em;
  font-size:var(--fs-sm); font-weight:600; color:var(--c-ink-soft);
  cursor:pointer;
  transition:background-color .16s ease, border-color .16s ease, color .16s ease;
}
.filterbar label b{ font-size:var(--fs-xs); color:var(--c-muted); font-weight:700; }
.filterbar label:hover{ border-color:var(--c-ink); }

.f-input:checked + .f-input + .f-input + .f-input + .f-input + .f-input ~ .filterbar label[for="f-all"],
#f-all:checked ~ .filterbar label[for="f-all"],
#f-se:checked ~ .filterbar label[for="f-se"],
#f-sf:checked ~ .filterbar label[for="f-sf"],
#f-df:checked ~ .filterbar label[for="f-df"],
#f-pl:checked ~ .filterbar label[for="f-pl"],
#f-ro:checked ~ .filterbar label[for="f-ro"]{
  background:var(--c-ink); border-color:var(--c-ink); color:#fff;
}
#f-all:checked ~ .filterbar label[for="f-all"] b,
#f-se:checked ~ .filterbar label[for="f-se"] b,
#f-sf:checked ~ .filterbar label[for="f-sf"] b,
#f-df:checked ~ .filterbar label[for="f-df"] b,
#f-pl:checked ~ .filterbar label[for="f-pl"] b,
#f-ro:checked ~ .filterbar label[for="f-ro"] b{ color:rgba(255,255,255,.65); }

.f-input:focus-visible + .f-input ~ .filterbar label,
.f-input:focus-visible ~ .filterbar label{ outline:none; }
#f-all:focus-visible ~ .filterbar label[for="f-all"],
#f-se:focus-visible ~ .filterbar label[for="f-se"],
#f-sf:focus-visible ~ .filterbar label[for="f-sf"],
#f-df:focus-visible ~ .filterbar label[for="f-df"],
#f-pl:focus-visible ~ .filterbar label[for="f-pl"],
#f-ro:focus-visible ~ .filterbar label[for="f-ro"]{ outline:3px solid var(--c-accent); outline-offset:3px; }

#f-se:checked ~ .model-grid .model:not([data-group="se"]),
#f-sf:checked ~ .model-grid .model:not([data-group="sf"]),
#f-df:checked ~ .model-grid .model:not([data-group="df"]),
#f-pl:checked ~ .model-grid .model:not([data-group="pl"]),
#f-ro:checked ~ .model-grid .model:not([data-group="ro"]){ display:none; }

.model-grid{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(265px,1fr));
}
.model{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--c-line); border-radius:var(--radius);
  padding:1.2rem 1.25rem 1.3rem;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.model:hover{ border-color:var(--c-line-strong); box-shadow:var(--shadow-sm); }
.model-top{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  margin-bottom:.8rem;
}
.model-code{
  font-size:var(--fs-sm); font-weight:800; letter-spacing:.02em;
  background:var(--c-ink); color:#fff; border-radius:5px; padding:.28em .6em;
}
.model-badge{
  font-size:11px; font-weight:700; color:var(--c-accent);
  background:var(--c-accent-soft); border-radius:20px; padding:.3em .7em;
  white-space:nowrap;
}
.model h3{ font-size:var(--fs-base); line-height:1.25; margin-bottom:.35rem; }
.model-fit{ font-size:var(--fs-xs); color:var(--c-muted); margin-bottom:.9rem; }
.model-specs{ list-style:none; margin:0 0 1.1rem; padding:0; border-top:1px solid var(--c-line); }
.model-specs li{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.45rem 0; margin:0;
  font-size:var(--fs-xs); border-bottom:1px solid var(--c-line);
}
.model-specs span{ color:var(--c-muted); }
.model-specs b{ color:var(--c-ink-soft); text-align:right; }
.model-cta{
  margin-top:auto;
  font-size:var(--fs-sm); font-weight:700; color:var(--c-ink);
  text-decoration:none;
}
.model-cta:hover{ color:var(--c-accent); }
.model-cta span{ display:inline-block; transition:transform .18s ease; }
.model-cta:hover span{ transform:translateX(3px); }

.filter-note{
  margin-top:1.75rem; font-size:var(--fs-sm); color:var(--c-body);
}
.filter-note a{ color:var(--c-ink); font-weight:600; text-underline-offset:3px; }

/* ------------------------------------------------------------- Aufmaß */
.measure{
  display:grid; gap:clamp(1.75rem,4vw,3.25rem);
  grid-template-columns:minmax(0,1fr);
  align-items:center;
}
@media (min-width:960px){ .measure{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); } }
.measure img{ width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:var(--radius); }
.measure-cols{
  display:grid; gap:1.5rem 2.5rem; margin:1.75rem 0;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.measure-cols h3{ font-size:var(--fs-base); margin-bottom:.6rem; }
.check,.cross{ list-style:none; margin:0; padding:0; }
.check li,.cross li{
  position:relative; padding-left:1.75rem; margin-bottom:.45rem;
  font-size:var(--fs-sm);
}
.check li::before{
  content:"✓"; position:absolute; left:0; top:-.05em;
  color:var(--c-accent); font-weight:800;
}
.cross li::before{
  content:"×"; position:absolute; left:.1em; top:-.15em;
  color:var(--c-muted); font-weight:800; font-size:1.15em;
}

/* --------------------------------------------------------- Ausstattung */
.equip{
  display:grid; gap:clamp(1.75rem,4vw,3rem);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:860px){ .equip{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.equip-block h3{ font-size:var(--fs-md); margin-bottom:1rem; }
.colorlist{ list-style:none; margin:0; padding:0; columns:2; column-gap:1.5rem; }
@media (max-width:520px){ .colorlist{ columns:1; } }
.colorlist li{
  display:flex; align-items:center; gap:.6rem;
  font-size:var(--fs-xs); color:#b9bfc3; margin-bottom:.6rem;
  break-inside:avoid;
}
.colorlist em{ font-style:normal; color:#8f979c; }
.sw{ width:20px; height:20px; border-radius:5px; flex:none; border:1px solid rgba(255,255,255,.22); }
.sw-9016{ background:#f2f2ec; } .sw-7016{ background:#383e42; } .sw-8003{ background:#734222; }
.sw-8001{ background:#8e5c2b; } .sw-8014{ background:#4a3527; } .sw-8077{ background:#33261d; }
.sw-9005{ background:#0d0d0d; } .sw-9006{ background:#a5a5a5; } .sw-9007{ background:#8f8f8c; }
.sw-e6{ background:#c9ccce; } .sw-db703{ background:#565a5c; }
.equip-note{ font-size:var(--fs-xs); color:#8f979c; margin-top:1rem; }

.fabriclist{ list-style:none; margin:0; padding:0; }
.fabriclist li{
  display:flex; gap:.85rem;
  align-items:flex-start;
  padding:.75rem 0; margin:0;
  font-size:var(--fs-sm); color:#aeb4b8;
  border-top:1px solid rgba(255,255,255,.11);
}
.fabriclist li:first-child{ border-top:0; padding-top:0; }
.fabriclist b{ display:block; color:#fff; font-size:var(--fs-sm); }
.fabriclist .mesh{ width:34px; height:34px; flex:none; border-radius:7px; margin:0; border:1px solid rgba(255,255,255,.2); }
.fabriclist .fab-txt{ flex:1; line-height:1.5; }

/* Compact CMS footer: navigation link padding must not leak into footer lists. */
.footer {padding-top:32px;}
.footer .footer-grid {gap:24px 28px;align-items:start;padding-bottom:24px;}
.footer h3 {margin:0 0 10px;line-height:1.3;}
.footer li {margin:0 0 6px;line-height:1.45;}
.footer .shop-menu-link,.footer .nav-link {display:inline;padding:0;min-height:0;font-size:inherit;line-height:1.45;}
.footer .shop-menu-section {margin-top:12px;}
.footer .shop-menu-section > ul {margin-top:6px;}
.footer-brand p {margin:12px 0 0;line-height:1.5;}
.footer .shop-footer-copyright {border-top:1px solid #ffffff24;padding:14px 0;font-size:13px;line-height:1.4;color:#b4b8bd;}
@media(max-width:600px){.footer .footer-grid {gap:24px;grid-template-columns:1fr;}.footer{padding-top:24px;}}

.booking-section {padding-block:28px 48px;background:var(--c-sand,#f7f4ec);}
#shop-booking {max-width:860px;margin-inline:auto;padding:28px;border:1px solid #e5ded1;border-radius:20px;background:#fff;box-shadow:0 12px 32px #2f291009;}
#shop-booking h1 {font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.2;margin:0 0 12px;}
#shop-booking .booking-intro {font-size:1rem;line-height:1.6;margin:0 0 20px;}
#shop-booking .booking-steps {display:flex;flex-wrap:wrap;gap:12px 28px;padding:16px 16px 16px 36px;margin:0 0 24px;border-radius:12px;background:#fff5eb;font-size:.875rem;}
#shop-booking label {display:grid;gap:7px;margin-bottom:16px;font-weight:600;font-size:.9375rem;}
#shop-booking select,#shop-booking input:not([type=checkbox]),#shop-booking textarea {width:100%;min-height:46px;padding:10px 12px;border:1px solid #d8d1c6;border-radius:10px;background:#fff;font:inherit;color:#25221f;box-sizing:border-box;}
#shop-booking label:has(input[type=checkbox]) {display:block;font-weight:400;}
#shop-booking input[type=checkbox] {margin-right:8px;}
#shop-booking h2 {font-size:1.2rem;margin:24px 0 8px;}
#shop-booking [data-booking-slots] {display:flex;flex-wrap:wrap;gap:10px;margin:12px 0;}
#shop-booking [data-booking-slots] button {padding:10px 16px;border:1px solid #ea580c;border-radius:10px;background:#fff8f1;color:#9a3412;cursor:pointer;}
#shop-booking [data-booking-slots] button[aria-pressed=true] {background:#ea580c;color:#fff;}
#shop-booking :focus-visible {outline:3px solid #ea580c;outline-offset:3px;}
#shop-booking [role=status] {font-size:.9375rem;}
@media(max-width:600px){#shop-booking{padding:20px 16px;}#shop-booking .booking-steps{gap:10px;display:grid;}}

/* Ergänzungen zur vorhandenen Originalgestaltung; keine neue Farb- oder Schriftdefinition. */
html { scroll-padding-top: var(--nrw-header-offset, 96px); }
[id] { scroll-margin-top: var(--nrw-header-offset, 96px); }
[hidden] { display: none !important; }
.logo img, .footer-brand img { height: auto; object-fit: contain; }
.nrw-technical-image { object-fit: contain; max-height: 560px; width: 100%; }
.nrw-card-image { object-fit: contain; }
.nrw-inhalt { padding-top: 24px; padding-bottom: 24px; }
.nrw-inhalt ul { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-left: 20px; }
.nrw-inhalt a { text-decoration: underline; text-underline-offset: .2em; }
.nrw-cards { margin-top: 24px; margin-bottom: 24px; }
.nrw-cards > .cat-card { min-width: 0; }
.nrw-cards .cat-card-body { display: flex; flex-direction: column; height: 100%; }
.nrw-cards .cat-card-body > .btn, .nrw-cards .link-arrow { margin-top: auto; }
.nrw-table-wrap { max-width: 100%; overflow-x: auto; margin: 24px 0; }
.nrw-table { width: 100%; border-collapse: collapse; font: inherit; color: inherit; }
.nrw-table th, .nrw-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid; border-color: color-mix(in srgb, currentColor 20%, transparent); }
.nrw-table caption { text-align: left; margin-bottom: 12px; }
.nrw-form { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.nrw-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nrw-field-wide { grid-column: 1 / -1; }
.nrw-field input, .nrw-field select, .nrw-field textarea, .nrw-result textarea { font: inherit; color: inherit; background: transparent; width: 100%; padding: 10px 12px; border: 1px solid; border-color: color-mix(in srgb, currentColor 35%, transparent); border-radius: 8px; box-sizing: border-box; }
.nrw-field textarea, .nrw-result textarea { resize: vertical; }
button.btn { cursor: pointer; font-family: inherit; }
.nrw-result { margin-top: 24px; padding: 20px; border: 1px solid; border-color: color-mix(in srgb, currentColor 25%, transparent); border-radius: 12px; }
.nrw-result .hero-actions { margin-top: 16px; }
.nrw-result ul { padding-left: 22px; }
.nrw-plan-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.nrw-review-heading { margin-bottom: 16px; }
.nrw-result textarea:focus, .nrw-form :is(input,select,textarea,button):focus-visible, .nrw-table-wrap:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.nav .has-sub:focus-within > .submenu { display: block; opacity: 1; visibility: visible; pointer-events: auto; }
.nav .has-sub::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 14px; }
@media (max-width: 700px) { .nrw-form { grid-template-columns: minmax(0,1fr); } .nrw-inhalt ul { display: block; } .nrw-inhalt li { margin: 8px 0; } .nrw-result { padding: 14px; } }
@media print { .topbar, .header, .footer, .mobile-cta, .nrw-inhalt, .nrw-plan-actions, .hero-actions, button, form { display: none !important; } .reveal { opacity: 1 !important; transform: none !important; } details > * { display: block !important; } .section { break-inside: auto; } h2,h3 { break-after: avoid; } .nrw-table-wrap { overflow: visible; } }

/* Produktgrafiken im Hero vollständig und mittig anzeigen. */
.hero .hero-media > img.nrw-technical-image {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    object-position: center;
    padding: clamp(16px, 2vw, 32px);
    background-color: #fff;
    transform: none;
}

/* Anwendungsfotos in den Karten behalten ihre flächige Darstellung. */
.cat-card > img.nrw-card-image {
    object-fit: cover;
    object-position: center;
}

/* Technische Produktbilder in Karten nicht beschneiden oder vergrößern. */
.cat-card > img.nrw-card-image:is(
    [src$="-technik.webp"],
    [src$="-detail.webp"],
    [src$="/fenster-rollo.webp"],
    [src$="/lichtschacht-auflieger.webp"],
    [src$="/gittersafe-regenschutz.webp"]
) {
    box-sizing: border-box;
    object-fit: contain;
    object-position: center;
    padding: 12px;
    background-color: #fff;
    transform: none;
}

@media (max-width: 700px) {
    .hero .hero-media > img.nrw-technical-image {
        padding: 16px;
    }

    .cat-card > img.nrw-card-image:is(
        [src$="-technik.webp"],
        [src$="-detail.webp"],
        [src$="/fenster-rollo.webp"],
        [src$="/lichtschacht-auflieger.webp"],
        [src$="/gittersafe-regenschutz.webp"]
    ) {
        padding: 10px;
    }
}

/* Zusätzliche Wissensbereiche nutzen Typografie und Farben des vorhandenen Designs. */
.nrw-wissen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: 24px;
}
.nrw-wissen-card { min-width: 0; }
.nrw-wissen-card .cat-card-body { height: 100%; box-sizing: border-box; }
.nrw-wissen-card h3 a { color: inherit; }
.nrw-wissen-card dl { margin: 0 0 1.25rem; }
.nrw-wissen-card dt { margin-top: 1rem; font-weight: bold; }
.nrw-wissen-card dd { margin: .25rem 0 0; overflow-wrap: anywhere; }
.nrw-wissen-filter .nrw-form { margin-bottom: 1.5rem; }
.nrw-wissen-pagination { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: center; margin-top: 2rem; }
.nrw-wissen-pagination button:disabled { opacity: .5; cursor: default; }
.nrw-wissen-figure { margin: 2rem 0; }
.nrw-wissen-figure > img { display: block; width: 100%; height: auto; max-height: 700px; object-fit: contain; }
.nrw-wissen-figure figcaption { margin-top: .75rem; }
.nrw-image-link { display: inline-block; margin-top: .75rem; }
.cat-card > img.nrw-technical-image { box-sizing: border-box; object-fit: contain; object-position: center; padding: 12px; transform: none; }
.nrw-wissen-menu > .submenu { max-height: min(70vh, 660px); overflow-y: auto; }
@media (max-width: 1150px) and (min-width: 901px) {
    .header-actions .icon-btn .label { display: none; }
}
@media (max-width: 700px) {
    .nrw-wissen-grid { grid-template-columns: 1fr; gap: 20px; }
    .nrw-wissen-filter .nrw-form { grid-template-columns: 1fr; }
}

/* Bildberatung: nutzt unverändert die vorhandenen Schrift- und Farbvariablen. */
.nrw-bildraster,.nrw-wegkarten,.nrw-profilraster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);align-items:start}
.nrw-bildkarte{margin:0;min-width:0;border:1px solid var(--c-line);border-radius:var(--radius);overflow:hidden;background:var(--c-white)}
.nrw-bildzoom{display:block;position:relative;background:var(--c-white);text-decoration:none}
.nrw-bildzoom>img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;object-position:center;padding:1rem;transform:none}
.nrw-zoom-label{position:absolute;right:.75rem;bottom:.75rem;padding:.2rem .45rem;border-radius:var(--radius-sm);background:var(--c-white);border:1px solid var(--c-line);color:var(--c-ink)}
.nrw-bildkarte figcaption{padding:1.25rem;border-top:1px solid var(--c-line)}
.nrw-bildkarte figcaption>strong{display:block;margin-bottom:.65rem}
.nrw-bildkarte figcaption p{margin:0}
.nrw-wegkarte{display:flex;flex-direction:column;align-self:stretch;min-width:0;padding:1.5rem;border:1px solid var(--c-line);border-radius:var(--radius);text-decoration:none;background:var(--c-white)}
.nrw-wegkarte img{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;margin-bottom:1.25rem}
.nrw-wegkarte .link-arrow{margin-top:auto;padding-top:.6rem}
.nrw-wegkarte:hover{border-color:var(--c-accent);box-shadow:var(--shadow-sm)}
.nrw-profilfeld{border:0;padding:0;margin:0 0 1.5rem;min-width:0}
.nrw-profilfeld>legend{padding:0;margin:0 0 1rem}
.nrw-profilwahl{display:grid;grid-template-columns:auto 1fr;gap:.65rem;padding:1.25rem;border:2px solid var(--c-line);border-radius:var(--radius);cursor:pointer;align-self:stretch;background:var(--c-white);min-width:0}
.nrw-profilwahl input{align-self:center;accent-color:var(--c-accent);width:1.2em;height:1.2em;margin:0}
.nrw-profilwahl img{grid-column:1/-1;grid-row:1;aspect-ratio:4/3;object-fit:contain;width:100%;padding:.75rem}
.nrw-profilwahl>span{grid-column:1/-1}
.nrw-profilwahl:has(input:checked){border-color:var(--c-accent);background:var(--c-accent-soft)}
.nrw-profilwahl:has(input:focus-visible){outline:3px solid var(--c-accent);outline-offset:3px}
.nrw-profilresult{padding:1.5rem;margin:1.5rem 0;border:1px solid var(--c-line);border-radius:var(--radius);background:var(--c-sand)}
.nrw-variantenbeispiele{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;list-style:none;padding:0;margin:1.5rem 0}
.nrw-variantenbeispiele>li{margin:0;padding:1rem;border:1px solid var(--c-line);background:var(--c-white);border-radius:var(--radius-sm);min-width:0}
.nrw-variantenbeispiele>li p{margin:.5rem 0 0}
.nrw-geweberaster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);margin-top:2rem}
.nrw-materialkarte{display:grid;grid-template-columns:minmax(75px,.7fr) minmax(0,2fr);border:1px solid var(--c-line);border-radius:var(--radius);overflow:hidden;background:var(--c-white)}
.nrw-gewebebild{display:block;border-right:1px solid var(--c-line);padding:1rem;background:var(--c-sand)}
.nrw-gewebebild img{width:100%;height:auto;max-height:360px;object-fit:contain;position:sticky;top:100px}
.nrw-materialtext{padding:1.25rem;min-width:0}
.nrw-materialtext h3 a{color:inherit;text-decoration:none}
.nrw-fakten{margin:1rem 0}
.nrw-fakten>div{padding:.55rem 0;border-top:1px solid var(--c-line)}
.nrw-fakten dt{font-weight:600}
.nrw-fakten dd{margin:0}
.nrw-auswahl{display:flex;gap:.55rem;align-items:baseline;margin:1.25rem 0;cursor:pointer}
.nrw-auswahl input{accent-color:var(--c-accent);width:1.1em;height:1.1em;flex:none}
.nrw-vergleichbox{margin:2rem 0 0;padding:1.5rem;border:1px solid var(--c-line);border-radius:var(--radius);background:var(--c-sand)}
.nrw-vergleichbox table{min-width:520px}
.nrw-materialfokus{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--gap);align-items:center}
.nrw-materialfokus .nrw-bildzoom>img{aspect-ratio:1/1;max-height:440px}
.nrw-model-skizze{margin:1.2rem 0 0;border-top:1px solid var(--c-line);padding-top:1rem}
.nrw-model-skizze summary{cursor:pointer;font-weight:600;color:var(--c-ink)}
.nrw-model-skizze .nrw-bildzoom>img{padding:.35rem;aspect-ratio:auto;max-height:250px}
.nrw-model-skizze p{margin:.75rem 0}
.nrw-zoomdialog{width:min(1150px,95vw);max-width:95vw;max-height:92vh;max-height:92dvh;margin:auto;padding:1rem;border:1px solid var(--c-line);border-radius:var(--radius);background:var(--c-white);color:var(--c-ink);box-shadow:var(--shadow-md)}
.nrw-zoomdialog::backdrop{background:rgba(0,0,0,.68)}
.nrw-zoomkopf{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.nrw-zoomdialog img{display:block;max-width:100%;max-height:72vh;max-height:72dvh;object-fit:contain;margin:auto;background:var(--c-white)}
.nrw-zoomdialog button{flex:none;min-width:44px;min-height:44px}
.nrw-zoomdialog p{margin:.75rem 0 0}
.nrw-bildraster :is(a,figcaption),.nrw-profilresult,.nrw-materialtext{overflow-wrap:anywhere}
@media(min-width:1025px){.nav>.has-sub::after{height:14px}.header-inner{min-width:0}.nrw-wissen-menu>.submenu{left:auto;right:0}}
@media(max-width:1024px){.header .nav{top:var(--nrw-nav-top,114px)}.nrw-wissen-menu>.submenu{max-height:none;overflow:visible}.nav .has-sub::after{display:none}.nrw-bildraster,.nrw-wegkarten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.nrw-profilraster{grid-template-columns:1fr}.nrw-profilwahl{grid-template-columns:auto minmax(0,1fr);gap:.75rem}.nrw-profilwahl img{grid-row:auto;max-height:170px}.nrw-geweberaster{grid-template-columns:1fr}.nrw-variantenbeispiele{grid-template-columns:1fr}.nrw-materialfokus{grid-template-columns:1fr}.nrw-profilresult,.nrw-vergleichbox{padding:1rem}}
@media(max-width:560px){.nrw-bildraster,.nrw-wegkarten{grid-template-columns:1fr}.nrw-bildzoom>img{max-height:320px}.nrw-materialkarte{grid-template-columns:minmax(60px,.55fr) minmax(0,2fr)}.nrw-materialtext{padding:1rem}.nrw-gewebebild{padding:.5rem}.nrw-zoomdialog{padding:.75rem}}
@media(prefers-reduced-motion:reduce){.nrw-bildberatung *{scroll-behavior:auto}}
@media print{.nrw-bildzoom .nrw-zoom-label,.nrw-zoomdialog,.nrw-auswahl,#gewebe-reset{display:none!important}.nrw-bildkarte{break-inside:avoid}.nrw-geweberaster{display:block}.nrw-materialkarte{break-inside:avoid;margin:1rem 0}}

/* Variantenverzeichnis: Strukturergänzungen, vorhandene Typografie und Farben bleiben erhalten. */
.nrw-v-languagebar { display: flex; justify-content: flex-end; padding-top: 1rem; padding-bottom: .5rem; }
.nrw-v-languages { display: flex; flex-wrap: wrap; gap: .5rem; }
.nrw-v-languages a { min-width: 44px; min-height: 44px; justify-content: center; }
.nrw-v-languages a[aria-current="page"] { border-color: var(--c-accent); background: var(--c-accent-soft); }
.nrw-v-languages a:focus-visible, .nrw-v-image:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.nrw-model-schnitte { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; margin-top: 1rem; align-items: start; }
.nrw-schnitt-card { margin: 0; min-width: 0; border: 1px solid var(--c-line); border-radius: var(--radius-sm); background: var(--c-white); overflow: hidden; }
.nrw-schnitt-card figcaption { padding: .75rem; border-bottom: 1px solid var(--c-line); overflow-wrap: anywhere; }
.nrw-model-skizze .nrw-v-image { padding-bottom: 2.4rem; }
.nrw-model-skizze .nrw-v-image > img { box-sizing: border-box; width: 100%; max-width: 100%; height: 160px; max-height: none; aspect-ratio: auto; padding: .5rem; object-fit: contain; object-position: center; transform: none; }
.nrw-model-skizze .nrw-v-image > img[data-v-axis="vertikal"] { height: 320px; }
.nrw-schnitt-card > p { padding: 0 .75rem; }
.nrw-v-de { white-space: nowrap; }
.nrw-v-explain, .nrw-v-legend dl { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: .5rem 1rem; margin: 1.5rem 0; }
.nrw-v-explain dt, .nrw-v-legend dt { min-width: 0; overflow-wrap: anywhere; }
.nrw-v-explain dd, .nrw-v-legend dd { margin: 0; min-width: 0; }
.nrw-v-legend { border: 1px solid var(--c-line); border-radius: var(--radius); padding: 1rem; margin: 1.5rem 0; }
.nrw-v-legend summary { cursor: pointer; }
.nrw-v-external-note { padding-top: 1rem; padding-bottom: 1rem; }
[data-varianten-app] [aria-disabled="true"] { opacity: .5; cursor: default; }
[data-varianten-app] .nrw-model-card { min-width: 0; }
[data-varianten-app] .cat-card-body { overflow-wrap: anywhere; }
.nrw-v-zoom { width: min(1180px, 96vw); max-width: 96vw; max-height: 94vh; max-height: 94dvh; margin: auto; padding: 1rem; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-white); color: inherit; box-shadow: var(--shadow-md); overflow: auto; }
.nrw-v-zoom::backdrop { background: rgba(0,0,0,.68); }
.nrw-v-zoomhead, .nrw-v-zoomtools { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; }
.nrw-v-zoomhead strong { min-width: 0; overflow-wrap: anywhere; }
.nrw-v-zoomhead button, .nrw-v-zoomtools button { min-height: 44px; }
.nrw-v-zoomtools { justify-content: flex-start; }
.nrw-v-zoomtools [aria-pressed="true"] { background: var(--c-accent-soft); border-color: var(--c-accent); }
.nrw-v-canvas { overflow: auto; max-width: 100%; max-height: 65vh; max-height: 65dvh; border: 1px solid var(--c-line); background: var(--c-white); }
.nrw-v-canvas img { display: block; margin: auto; width: auto; height: auto; max-width: 100%; max-height: 63vh; max-height: 63dvh; object-fit: contain; }
.nrw-v-canvas[data-original="true"] img { max-width: none; max-height: none; }
.nrw-v-zoom p { margin: .75rem 0; }
.nrw-v-zoom a { overflow-wrap: anywhere; }
@media (max-width: 640px) {
 .nrw-v-languagebar { justify-content: center; }
 .nrw-v-explain, .nrw-v-legend dl { grid-template-columns: minmax(0,1fr); }
 .nrw-v-explain dd, .nrw-v-legend dd { margin-bottom: .75rem; }
 .nrw-v-zoom { padding: .75rem; }
 .nrw-v-zoomhead { align-items: flex-start; }
 .nrw-v-zoomhead strong { flex: 1; }
 .nrw-v-zoomtools button { flex: 1 1 auto; }
}
@media print { .nrw-v-languages, .nrw-v-zoom { display: none !important; } .nrw-schnitt-card { break-inside: avoid; } }

/* Geöffnete Modellkarten erhalten Platz für beide tatsächlichen Schnitte. */
[data-varianten-app] .nrw-wissen-grid { align-items: start; }
[data-varianten-app] .nrw-model-card:has(details[open]) { grid-column: 1 / -1; }
@media (min-width: 900px) {
 .nrw-model-card:has(details[open]) .nrw-model-schnitte { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
 .nrw-model-card:has(details[open]) .nrw-v-image > img,
 .nrw-model-card:has(details[open]) .nrw-v-image > img[data-v-axis="vertikal"] { height: 380px; }
}

/* Public CMS adapter. Never imported into cft. */
.shop-preview{padding:.55rem 1rem;background:#fff0ba;color:#3e3217;text-align:center;font-size:.8rem}
.shop-hero{padding:clamp(2.5rem,6vw,6rem) 0}.shop-hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:3rem;align-items:center}.shop-hero-image img{width:100%;border-radius:var(--radius)}
.shop-lead{font-size:clamp(1.0625rem,1.6vw,var(--fs-md))}.shop-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.5rem}
.shop-grid{display:grid;gap:var(--gap);align-items:center}.shop-grid-one{grid-template-columns:1fr}.shop-grid-two{grid-template-columns:repeat(2,minmax(0,1fr))}.shop-grid-one-two{grid-template-columns:1fr 2fr}.shop-grid-two-one{grid-template-columns:2fr 1fr}.shop-grid-three{grid-template-columns:repeat(3,minmax(0,1fr))}.shop-grid-four{grid-template-columns:repeat(4,minmax(0,1fr))}
.shop-grid-one-three-one{grid-template-columns:minmax(0,1fr) minmax(0,3fr) minmax(0,1fr)}.shop-faq details{padding:1rem 0;border-bottom:1px solid var(--c-line)}.shop-faq summary{cursor:pointer;font-weight:700}.shop-faq .shop-copy{padding-top:.8rem}
.shop-cell{min-width:0}.shop-section:nth-child(even){background:var(--c-sand)}.shop-image{margin:0}.shop-image img{width:100%;border-radius:var(--radius)}.shop-copy{overflow-wrap:anywhere}.shop-copy h2:empty,.shop-copy h3:empty,.shop-copy p:empty{display:none}.shop-feature{background:white;border:1px solid var(--c-line);border-radius:var(--radius);overflow:hidden}.shop-feature img{width:100%;aspect-ratio:16/10;object-fit:cover}.shop-feature-copy{padding:1.5rem}.shop-feature-copy h2{font-size:var(--fs-xl)}.shop-comparison{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.shop-comparison p{grid-column:1/-1}.shop-copy table{width:100%;border-collapse:collapse}.shop-copy td,.shop-copy th{padding:.5rem;border:1px solid var(--c-line)}
@media(max-width:900px){.shop-grid-four{grid-template-columns:repeat(2,minmax(0,1fr))}.shop-hero-grid{grid-template-columns:1fr}.header-inner{flex-wrap:wrap;padding-block:.7rem}.nav{margin:0;width:100%}.nav>ul{flex-wrap:wrap}.logo img{width:170px}}
@media(max-width:600px){.shop-grid{grid-template-columns:1fr}.shop-hero{padding:2rem 0}.shop-comparison{grid-template-columns:1fr}.topbar-inner ul{gap:.5rem 1rem}}
/* CMS hierarchy navigation; native details works with mouse, keyboard and touch. */
.shop-cms-nav .shop-menu-group>summary{cursor:pointer;font-size:var(--fs-sm);font-weight:600;padding:.75rem;list-style-position:inside}
.shop-cms-nav .shop-menu-panel{padding:1rem;background:var(--c-white,#fff);border:1px solid var(--c-line);border-radius:var(--radius,12px)}
.shop-cms-nav>ul>li>details>.shop-menu-panel{position:absolute;z-index:30;left:0;right:0;max-height:70vh;overflow:auto;box-shadow:0 12px 30px #0002}
.shop-cms-nav{position:relative}.shop-cms-nav .shop-menu-panel>ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.75rem;list-style:none;padding:0}
.shop-cms-nav .shop-menu-panel .shop-menu-panel{border:0;padding:.5rem}.shop-cms-nav .shop-menu-panel .shop-menu-panel>ul{display:block}
.shop-menu-link{display:block;padding:.5rem}.shop-cms-nav summary:focus-visible,.shop-cms-nav a:focus-visible{outline:3px solid var(--c-accent,#e96305);outline-offset:3px}
.shop-public-form{display:grid;gap:1rem;max-width:48rem;margin:2rem auto}.shop-public-form label{display:grid;gap:.4rem}.shop-public-form input:not([type=checkbox]),.shop-public-form select,.shop-public-form textarea{width:100%;padding:.8rem;border:1px solid var(--c-line);border-radius:8px;background:white;color:inherit;font:inherit}.shop-public-form input[type=checkbox]{width:1.25rem;height:1.25rem}.shop-public-form button:disabled{opacity:.6}
@media(max-width:1024px){.shop-cms-nav{position:fixed}.shop-cms-nav>ul>li>details>.shop-menu-panel{position:static;max-height:none;box-shadow:none}.shop-cms-nav .shop-menu-panel>ul{grid-template-columns:1fr}}
/* Public checkout: scoped form styles do not affect cft or other modules. */
#shop-checkout{max-width:52rem;margin:0 auto}#shop-checkout form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}#shop-checkout label{display:grid;gap:.45rem}#shop-checkout input:not([type=checkbox]),#shop-checkout select,#shop-checkout textarea{box-sizing:border-box;width:100%;min-width:0;padding:.8rem;border:1px solid var(--c-line,#ccc);border-radius:8px;background:#fff;color:inherit;font:inherit}#shop-checkout label:has(input[type=checkbox]),#shop-checkout label:has(textarea),#shop-checkout output,#shop-checkout [role=status],#shop-checkout button{grid-column:1/-1}#shop-checkout label:has(input[type=checkbox]){display:block}#shop-checkout input[type=checkbox]{margin-right:.6rem}#shop-checkout button{padding:1rem;background:var(--c-accent,#e96305);color:#fff;border:0;border-radius:8px;font:inherit;font-weight:700}#shop-checkout :disabled{opacity:.6}#shop-checkout :focus-visible{outline:3px solid currentColor;outline-offset:3px}@media(max-width:600px){#shop-checkout form{grid-template-columns:1fr}}

/* Existing variant overview in the isolated public design. */
#shop-public-catalog .shop-catalog-categories{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0}
#shop-public-catalog .shop-catalog-categories [aria-pressed="true"]{background:var(--c-accent);color:#fff}
#shop-public-catalog .shop-catalog-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:24px}
#shop-public-catalog .shop-feature{display:flex;flex-direction:column}
#shop-public-catalog .shop-feature>img{width:100%;height:220px;object-fit:contain;background:#fff}
#shop-booking [data-booking-slots]{display:flex;flex-wrap:wrap;gap:12px}
#shop-booking [aria-pressed="true"]{background:var(--c-accent);color:#fff}
#shop-booking select,#shop-booking input{min-width:0;max-width:100%;box-sizing:border-box}
#shop-booking form:not([hidden]),#shop-booking [data-booking-questions]{display:grid;gap:1rem}
#shop-booking fieldset{min-width:0;padding:1rem;border:1px solid var(--c-line);border-radius:8px}
#shop-booking label:has(input[type=checkbox]){display:block}
#shop-booking input[type=checkbox]{margin-right:.5rem}

/* Main categories on one dedicated row; panels use the entire navigation width. */
.shop-cms-nav>ul>li{position:static}
.shop-cms-nav .shop-menu-group>summary{display:flex;align-items:center;gap:.6rem;list-style:none;white-space:nowrap}
.shop-cms-nav .shop-menu-group>summary::-webkit-details-marker{display:none}
.shop-cms-nav .shop-menu-group>summary::after{content:'⌄';font-size:.85em;color:var(--c-accent)}
.shop-cms-nav .shop-menu-group[open]>summary{color:var(--c-accent);background:var(--c-sand);border-radius:8px}
.shop-cms-nav .shop-menu-overview{border-bottom:1px solid var(--c-line);padding-bottom:.75rem;margin-bottom:1rem}
.shop-cms-nav .shop-menu-overview>a{display:inline-block;padding:.35rem 0;color:var(--c-accent);font-weight:700}
.shop-cms-nav .shop-menu-panel>ul{grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem 1.5rem;align-items:start}
.shop-cms-nav .shop-menu-panel li{min-width:0;list-style:none}
.shop-cms-nav .shop-menu-link{padding:.65rem .75rem;line-height:1.4;border-radius:6px;overflow-wrap:anywhere}
.shop-cms-nav .shop-menu-link:hover{background:var(--c-sand);color:var(--c-accent)}
.shop-cms-nav .shop-menu-section> a{font-weight:700}
.shop-cms-nav .shop-menu-section>ul{padding:0 0 0 .75rem;margin:0;border-left:2px solid var(--c-line)}
@media(min-width:1025px){
 .header-inner:has(.shop-cms-nav){flex-wrap:wrap;gap:.5rem 1.5rem;padding-top:.75rem}
 .header-inner:has(.shop-cms-nav)>.header-actions{margin-left:auto}
 .header-inner>.shop-cms-nav{order:10;flex:0 0 100%;margin:0;position:relative;border-top:1px solid var(--c-line)}
 .shop-cms-nav>ul{gap:.25rem;justify-content:space-between}
 .shop-cms-nav>ul>li>details>.shop-menu-panel{top:100%;left:0;right:0;padding:1.5rem;max-height:65vh}
}
@media(max-width:1024px){
 .shop-cms-nav .shop-menu-panel>ul{grid-template-columns:1fr;gap:.25rem}
 .shop-cms-nav .shop-menu-group>summary{justify-content:space-between;padding:.85rem .25rem}
 .shop-cms-nav .shop-menu-panel{padding:.75rem;border-radius:8px}
}

/* Keep all shop USPs visible, including in narrow desktop panels and on mobile. */
@media screen and (max-width:900px){
 .topbar ul>li.topbar-extra{display:flex}
 .topbar-inner{padding-block:.6rem;gap:.5rem}
 .topbar-inner>ul{width:100%;gap:.5rem 1.25rem}
}
@media screen and (max-width:480px){
 .topbar-inner>ul{display:grid;grid-template-columns:minmax(0,1fr);gap:.4rem}
}

/* Center the USP group independently of the contact links. */
@media screen{
 .topbar-inner{justify-content:center}
 .topbar-inner>ul{flex:1 1 100%;justify-content:center;text-align:center}
 .topbar-inner>ul>li{justify-content:center}
 .topbar-contact{justify-content:center}
}

/* Isolated adaptation of ch-dach's cascade, featured panel and typography. */
.shop-cms-nav>ul>li>details>.shop-mega-panel{padding:0;background:linear-gradient(135deg,#fffdfa,#faf7f0 46%,#f6ead8);border:1px solid #e5ddd1;border-radius:24px;box-shadow:0 34px 90px -42px #211d198c;overflow:auto;overscroll-behavior:contain}
.shop-mega-panel.has-featured{display:grid;grid-template-columns:minmax(0,1fr) 32%}
.shop-mega-content{min-width:0;padding:24px;background:radial-gradient(circle at 14% 8%,#f26b1a12,transparent 30%)}
.shop-mega-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:16px;border-bottom:1px solid #e6ddd0}
.shop-mega-heading small{display:block;color:var(--c-accent);font-size:var(--fs-xs);font-weight:800;letter-spacing:.14em;margin-bottom:6px}
.shop-mega-heading strong{display:block;font-size:var(--fs-lg);line-height:1.12;font-weight:800;letter-spacing:-.022em}
.shop-cms-nav .shop-mega-heading>a{font-size:var(--fs-sm);font-weight:600;text-decoration:none;color:#65605a;white-space:nowrap}
.shop-cascade{display:grid;grid-template-columns:minmax(170px,29%) minmax(0,1fr);gap:20px;margin-top:20px;min-width:0;min-height:330px}
.shop-cascade-main{display:grid;gap:5px;align-content:start;padding:6px;background:#ffffff94;border-radius:18px;box-shadow:inset 0 0 0 1px #211d190d}
.shop-cascade-scroll{min-width:0;overflow-x:auto;scrollbar-width:thin}
.shop-cascade-columns{display:flex;gap:16px;align-items:flex-start;min-width:100%}
.shop-cascade-column{flex:1 0 245px;min-width:245px;display:grid;gap:5px;align-content:start;padding:6px 6px 6px 16px;border-left:1px solid #f26b1a2e}
.shop-cms-nav .shop-cascade-link{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;width:100%;box-sizing:border-box;min-height:44px;padding:11px 13px;border:1px solid transparent;border-radius:16px;color:#2f2b24;text-decoration:none;font-size:var(--fs-sm);font-weight:600;line-height:1.65;white-space:normal;overflow-wrap:anywhere}
.shop-cms-nav .shop-cascade-link.has-children::after{content:'→';flex:none}
.shop-cms-nav .shop-cascade-link:hover,.shop-cms-nav .shop-cascade-link:focus-visible,.shop-cms-nav .shop-cascade-link.is-active{background:#fff;color:var(--c-accent);border-color:#f26b1a38}
.shop-cascade-main .is-active::before{content:'';position:absolute;left:-6px;top:11px;bottom:11px;width:4px;border-radius:8px;background:var(--c-accent)}
.shop-cms-nav .shop-mega-feature{position:relative;display:block;min-height:390px;overflow:hidden;background:#211d19;color:white;text-decoration:none;border-left:1px solid #211d190f}
.shop-cms-nav .shop-mega-feature[hidden]{display:none}
.shop-mega-feature>img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.shop-mega-feature::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#211d1914,#211d192e 36%,#211d19db);pointer-events:none}
.shop-mega-feature::before{content:'';position:absolute;inset:16px;border:1px solid #ffffff42;border-radius:22px;z-index:1;pointer-events:none}
.shop-mega-caption{position:absolute;left:20px;right:20px;bottom:20px;z-index:2;padding:16px;border-radius:20px;background:#211d196b;backdrop-filter:blur(10px)}
.shop-mega-caption small{display:block;font-size:var(--fs-xs);font-weight:800;letter-spacing:.14em;margin-bottom:8px;color:#ffffffd1}
.shop-mega-caption strong{display:block;font-size:var(--fs-lg);font-weight:800;line-height:1.12;letter-spacing:-.022em;color:white;white-space:normal}
.shop-node-image{display:none}
.shop-cascade-source{list-style:none;padding:0}.shop-cascade-source ul{list-style:none;padding-left:16px}
@media(min-width:1500px){
 .topbar .topbar-inner{max-width:1840px;display:grid;grid-template-columns:1fr auto 1fr;gap:18px;min-height:44px}
 .topbar-inner>ul{grid-column:2;flex:none;width:auto;gap:22px;white-space:nowrap}
 .topbar-contact{grid-column:3;justify-self:end;gap:16px;white-space:nowrap}
}
.topbar-contact a{color:#fff;font-size:inherit;font-weight:inherit}
@media(min-width:1025px) and (max-width:1499px){
 .topbar .topbar-inner{flex-wrap:nowrap;gap:16px;min-height:44px}
 .topbar-inner>ul{flex:1 1 auto;gap:12px}
 .topbar-contact{flex:none;gap:12px}
}
@media(max-width:1024px){
 .shop-mega-panel.has-featured{grid-template-columns:1fr}
 .shop-mega-content{padding:16px}
 .shop-cascade{grid-template-columns:1fr;min-height:0;gap:12px}
 .shop-cascade-main{grid-template-columns:repeat(2,minmax(0,1fr))}
 .shop-cascade-column{flex-basis:220px;min-width:220px}
 .shop-cms-nav .shop-mega-feature{min-height:240px}

 .topbar-contact{gap:20px;padding-bottom:6px}
}

/* NRW mobile navigation uses the same fs-md token for all first-level entries. */
@media(max-width:1024px){.shop-cms-nav .shop-menu-group>summary{font-size:var(--fs-md)}}

/* Independent channel overrides; intentionally empty until design approval. */
/* Original channel logo; preserve the complete image and its aspect ratio. */
[data-channel="ch-fgm-de"] .logo img{width:240px;height:80px;object-fit:contain}
[data-channel="ch-fgm-de"] .footer-brand .fgm-original-logo{width:240px;height:auto;background:#fff;border-radius:10px;padding:10px;box-sizing:content-box}
@media(max-width:600px){[data-channel="ch-fgm-de"] .logo img{width:180px;height:60px}}

/* Compact start-page spacing requested by the shop owner. */
[data-channel="ch-fgm-de"] .hero{padding-top:16px}