/* ==========================================================================
   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; }