@charset "UTF-8";
/* build: 6a26ce7a */
/* =========================================================
   plisseeaufmass.de · Stylesheet
   00 Tokens · 01 Reset · 02 Utilities · 03 Buttons · 04 Platzhalter
   05 Topbar · 06 Header · 07 Nav/Mega · 08 Drawer · 09 Hero
   10 Schnelleinstieg · 11 Produktwelten · 12 USP · 13 Intro
   14 Karten/Rails · 15 Media · 16 Steps · 17 Ratgeber
   18 Hersteller · 19 Trustbar · 20 CTA · 21 Footer · 22 Misc
   ========================================================= */

/* ---------- 00 · TOKENS ------------------------------------ */
:root{
  --build:"6a26ce7a";
  /* Flächen */
  --c-bg:        #ffffff;
  --c-bg-alt:    #f5f3ee;
  --c-surface:   #ffffff;
  --c-line:      #e4e0d7;
  --c-line-soft: #efece5;

  /* Schrift */
  --c-ink:       #1f2723;
  --c-ink-2:     #4e5751;
  --c-muted:     #838b85;

  /* Dunkelflächen */
  --c-dark:      #1b2a24;
  --c-dark-2:    #223229;
  --c-dark-3:    #2e4238;
  --c-on-dark:   #ffffff;
  --c-on-dark-2: #b4c2ba;

  /* Akzent: Kupferton aus dem Logo, gemessen #C27F44 */
  --c-accent:      #C27F44;
  --c-accent-dark: #A4692F;
  --c-accent-soft: #F3E7DA;
  --c-accent-ink:  #ffffff;

  /* Signale */
  --c-ok:   #2f7d52;
  --c-warn: #a8761d;
  --c-sale: #b23a2e;

  /* Typo */
  --f-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-head: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --fs-xs:  .75rem;
  --fs-sm:  .8125rem;
  --fs-md:  .9375rem;
  --fs-lg:  1.0625rem;
  --fs-h2:  clamp(1.4rem, 1.05rem + 1.2vw, 2.05rem);
  --fs-h1:  clamp(1.55rem, 1.1rem + 1.7vw, 2.35rem);

  /* Maße */
  --wrap:     1600px;
  --gut:      20px;
  --r-sm:     3px;
  --r:        5px;
  --r-lg:     8px;
  --h-header: 80px;
  --h-nav:    46px;
  /* Hoehe des klebenden Kopfbereichs: Kopfzeile plus Navigation.
     Die Topbar scrollt weg und zaehlt deshalb nicht mit. */
  --h-fix:    calc(var(--h-header) + var(--h-nav));
  --h-qsbox:  165px;   /* Bauhoehe der Konfiguratorbox im Hero */

  --sh-1: 0 1px 2px rgba(27,42,36,.06);
  --sh-2: 0 4px 16px rgba(27,42,36,.10);
  --sh-3: 0 14px 38px rgba(27,42,36,.18);

  --t: .18s ease;
}

/* ---------- 01 · RESET ------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* Waagerechtes Ueberlaufen ist auf schmalen Geraeten der haeufigste
   Fehler: Ein einzelnes zu breites Element schiebt die ganze Seite.
   overflow-x am body faengt das ab, loest die Ursache aber nicht. */
body{
  margin:0;background:var(--c-bg);color:var(--c-ink);
  font:400 var(--fs-md)/1.62 var(--f-body);
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0 0 .85em}
h1,h2,h3,h4{margin:0 0 .5em;font-family:var(--f-head);font-weight:600;line-height:1.2}
s{color:var(--c-muted)}
hr{border:0;border-top:1px solid var(--c-line);margin:14px 0}
:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* svh statt vh: beruecksichtigt die eingeblendete Adressleiste auf
   Mobilgeraeten und vermeidet Sprunghoehen beim Scrollen. */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--c-accent);color:#fff;padding:10px 16px}
.skip:focus{left:0}

/* ---------- 02 · UTILITIES --------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:clamp(34px,4.2vw,62px)}
.section--alt{background:var(--c-bg-alt)}
.section--tight{padding-block:clamp(22px,2.6vw,34px)}
.h2{font-size:var(--fs-h2);letter-spacing:-.005em}
.h2 strong{font-weight:600;color:var(--c-accent-dark)}
.h2--center{text-align:center;margin-bottom:1.2em}

.sectionhead{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.sectionhead .h2{margin:0}
.sectionhead__nav{display:none}   /* Rails brechen um, Pfeile entfallen */
.sectionhead__more{
  font-size:var(--fs-sm);font-weight:600;color:var(--c-accent);
  border-bottom:1px solid currentColor;padding-bottom:2px;
}

/* ---------- 03 · BUTTONS ----------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 22px;border-radius:var(--r);
  font-family:var(--f-body);font-size:var(--fs-md);font-weight:600;line-height:1.2;
  border:1px solid transparent;cursor:pointer;
  transition:background var(--t),color var(--t),border-color var(--t);
}
.btn--primary{background:var(--c-accent);color:var(--c-accent-ink)}
.btn--primary:hover{background:var(--c-accent-dark)}
.btn--ghost{background:transparent;color:var(--c-ink);border-color:var(--c-line)}
.btn--ghost:hover{border-color:var(--c-accent);color:var(--c-accent)}
.btn--onDark{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn--onDark:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn--lg{padding:14px 30px;font-size:var(--fs-lg)}
.btn--sm{padding:9px 14px;font-size:var(--fs-sm)}
.btn--block{width:100%}

.railbtn{
  width:38px;height:38px;border:1px solid var(--c-line);border-radius:var(--r);
  background:var(--c-surface);display:grid;place-items:center;
  transition:border-color var(--t),background var(--t),color var(--t);
}
.railbtn svg{width:18px;height:18px}
.railbtn:hover{border-color:var(--c-dark);background:var(--c-dark);color:#fff}

/* ---------- 04 · PLATZHALTER (Plissee-Falte) --------------- */
.ph{
  position:relative;display:block;width:100%;overflow:hidden;
  background:
    repeating-linear-gradient(180deg,
      #eeece5 0 5px,
      #e5e2d9 5px 6px,
      #f3f1eb 6px 11px,
      #e5e2d9 11px 12px);
  border-radius:var(--r-sm);
}
.ph::after{
  content:attr(data-ph);
  position:absolute;inset:0;display:grid;place-items:center;
  padding:8px;text-align:center;
  font-size:var(--fs-xs);letter-spacing:.05em;text-transform:uppercase;
  color:#8d938a;font-weight:600;
}
.ph--sq{aspect-ratio:1/1}
.ph--4x3{aspect-ratio:4/3}
.ph--16x9{aspect-ratio:16/9}
.ph--hero{height:calc(100svh - var(--h-fix));min-height:460px;border-radius:0}
.ph--ico{width:34px;height:34px;border-radius:50%}
.ph--pay{width:58px;height:34px;flex:0 0 auto}

/* ---------- 04b · BILDER ----------------------------------- */
/* .fig ersetzt .ph, sobald echte Assets vorliegen.
   Hintergrund + aspect-ratio verhindern Layoutsprünge beim Laden (CLS). */
.fig{
  display:block;width:100%;height:auto;
  object-fit:cover;object-position:center;
  background:var(--c-line-soft);
  border-radius:var(--r-sm);
}
.fig--sq{aspect-ratio:1/1}
.fig--4x3{aspect-ratio:4/3}
.fig--16x9{aspect-ratio:16/9}
.fig--hero{display:block;border-radius:0;background:none}
img.fig--hero,
.fig--hero img{
  display:block;width:100%;
  height:calc(100svh - var(--h-fix));
  min-height:460px;
  object-fit:cover;background:var(--c-dark-2);
}

/* Social-Icons */
.socico{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--c-dark-3);color:#fff;transition:background var(--t),color var(--t);
}
.socico svg{width:17px;height:17px}
.footer__social a:hover .socico{background:var(--c-accent)}

/* ---------- 05 · TOPBAR ------------------------------------ */
.topbar{background:var(--c-dark-2);color:var(--c-on-dark-2);font-size:var(--fs-xs)}
.topbar__in{display:flex;align-items:center;gap:20px;min-height:34px}
.topbar__rating{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.topbar__rating strong{color:#fff;font-weight:600}
.topbar__rating:hover{color:#fff}
.stars{color:var(--c-accent);letter-spacing:1px}
.topbar__rating-src{opacity:.75}
.topbar__usp{display:flex;gap:20px;margin-inline:auto}
.topbar__usp li{position:relative;padding-left:13px;white-space:nowrap}
.topbar__usp li::before{
  content:"";position:absolute;left:0;top:50%;width:5px;height:5px;
  margin-top:-2.5px;transform:rotate(45deg);background:var(--c-accent);
}
.topbar__link{white-space:nowrap}
.topbar__link:hover{color:#fff}
@media (max-width:1099px){.topbar__usp{display:none}.topbar__link{margin-left:auto}}
@media (max-width:479px){.topbar__rating-src{display:none}}

/* ---------- 06 · HEADER ------------------------------------ */
.header{
  position:sticky;top:0;z-index:80;
  background:var(--c-dark);color:var(--c-on-dark);box-shadow:var(--sh-2);
}
.header__in{display:flex;align-items:center;gap:18px;min-height:var(--h-header)}

.logo{display:flex;align-items:center;flex:0 0 auto}
.logo img{
  display:block;
  height:56px;                /* Bildhoehe im Kopfbereich */
  width:auto;
  aspect-ratio:900/245;
}
@media (max-width:1099px){.logo img{height:44px}}
@media (max-width:479px){.logo img{height:38px}}

.search{flex:1 1 auto;display:flex;max-width:620px;background:#fff;border-radius:var(--r);overflow:hidden}
.search__input{flex:1;min-width:0;border:0;padding:12px 16px;font-size:var(--fs-md);color:var(--c-ink);background:transparent}
.search__input:focus{outline:none}
.search__btn{flex:0 0 auto;width:52px;display:grid;place-items:center;background:var(--c-accent);color:#fff;transition:background var(--t)}
.search__btn:hover{background:var(--c-accent-dark)}
.search__btn svg{width:19px;height:19px}

.actions{display:flex;align-items:center;gap:6px;margin-left:auto;flex:0 0 auto}
.actions__item{position:relative}

.phone{display:flex;flex-direction:column;line-height:1.25;padding-right:12px;margin-right:6px;border-right:1px solid rgba(255,255,255,.15)}
.phone__label{font-size:var(--fs-xs);color:var(--c-on-dark-2)}
.phone__no{font-family:var(--f-head);font-size:1.02rem;font-weight:600;white-space:nowrap}
.phone:hover .phone__no{color:var(--c-accent)}

.iconbtn{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:8px 12px;border-radius:var(--r);font-size:var(--fs-xs);color:var(--c-on-dark);
  transition:background var(--t);
}
.iconbtn:hover{background:var(--c-dark-3)}
.iconbtn svg{width:22px;height:22px}
.iconbtn__label{white-space:nowrap}
.badge{
  position:absolute;top:2px;right:6px;min-width:18px;height:18px;padding:0 5px;
  border-radius:9px;background:var(--c-accent);color:#fff;
  font-size:11px;font-weight:700;line-height:18px;text-align:center;
}

.flyout{
  position:absolute;top:calc(100% + 10px);right:0;z-index:90;width:290px;padding:18px;
  background:var(--c-surface);color:var(--c-ink);
  border:1px solid var(--c-line);border-radius:var(--r-lg);box-shadow:var(--sh-3);
}
.flyout[hidden]{display:none}
.flyout__eyebrow{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.07em;color:var(--c-muted);margin-bottom:8px}
.flyout__sep{margin:16px 0}
.flyout__note{font-size:var(--fs-xs);color:var(--c-muted);margin:10px 0 0}

.burger{display:none;width:40px;height:40px;padding:9px;flex-direction:column;justify-content:space-between}
.burger span{display:block;height:2px;background:#fff;border-radius:2px}

@media (max-width:1099px){
  /* Die Navileiste ist hier ausgeblendet und darf deshalb nicht mehr
     von der Hero-Hoehe abgezogen werden. */
  :root{--h-nav:0px}
  .burger{display:flex}

  /* Festes Raster statt Flexbox-Umbruch. Damit ist die Aufteilung
     eindeutig, unabhaengig davon, wie breit die Suche gerade ist:
       Reihe 1:  Burger | Logo
       Reihe 2:  Suche  | Konto | Warenkorb                       */
  .header__in{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto auto;
    grid-template-rows:auto auto;
    align-items:center;
    gap:8px 8px;
    padding-block:8px;
    min-height:0;
  }
  .burger{grid-column:1;grid-row:1;margin-left:-6px}
  /* Das Logo endet an derselben Kante wie das Suchfeld: beide reichen
     bis zum Beginn der dritten Spalte, in der Konto und Warenkorb
     stehen. Es fuellt seine Zelle, die Hoehe folgt dem Seitenverhaeltnis. */
  .logo{grid-column:2 / 3;grid-row:1;justify-self:stretch}
  .logo img{width:100%;height:auto;max-width:none}
  .search{grid-column:1 / 3;grid-row:2;min-width:0;max-width:none}
  .actions{grid-column:3;grid-row:2;margin-left:0;gap:0;justify-self:end}

  .iconbtn__label{display:none}
  .iconbtn{padding:6px 8px}
  .iconbtn svg{width:24px;height:24px}
  .search__input{padding:10px 12px;font-size:var(--fs-sm)}
  .search__btn{width:44px}
  .badge{top:0;right:2px}
}
@media (max-width:600px){.phone{display:none}}

/* Zwischenbreiten, etwa Handy im Querformat: alles in eine Zeile.
   Das Raster aus zwei Reihen ist erst unter 600 px sinnvoll. */
@media (min-width:601px) and (max-width:1099px){
  .header__in{
    grid-template-columns:auto auto minmax(0,1fr) auto auto;
    grid-template-rows:auto;
    gap:14px;
    padding-block:10px;
  }
  .burger{grid-column:1;grid-row:1}
  .logo{grid-column:2;grid-row:1;justify-self:start}
  .logo img{width:auto;height:52px;max-width:none}
  .search{grid-column:3;grid-row:1;min-width:0;max-width:460px}
  .phone{grid-column:4;grid-row:1;display:flex}
  .actions{grid-column:5;grid-row:1;justify-self:end;gap:2px}
}
@media (min-width:601px) and (max-width:820px){
  /* Ohne Telefonnummer bleibt der Suche genug Breite. */
  .header__in{grid-template-columns:auto auto minmax(0,1fr) auto}
  .phone{display:none}
  .actions{grid-column:4}
  .logo img{height:46px}
}

/* ---------- 07 · NAV + MEGA -------------------------------- */
.mainnav{position:relative;background:var(--c-dark-3);border-top:1px solid rgba(255,255,255,.07)}
.mainnav__list{display:flex;align-items:stretch;gap:2px}
.mainnav__item{display:flex}
.mainnav__item--right{margin-left:auto}
.mainnav__link{
  display:inline-flex;align-items:center;gap:6px;padding:0 16px;min-height:var(--h-nav);
  color:var(--c-on-dark);font-size:var(--fs-md);font-weight:600;
  transition:background var(--t),color var(--t);
}
.mainnav__link:hover,.mainnav__item.is-open > .mainnav__link{background:rgba(255,255,255,.09)}
.mainnav__link--accent{color:var(--c-accent)}
.caret{width:15px;height:15px;transition:transform var(--t)}
.mainnav__item.is-open .caret{transform:rotate(180deg)}

.mega{
  position:absolute;top:100%;left:0;right:0;z-index:70;
  max-height:calc(100vh - var(--h-header) - var(--h-nav) - 40px);overflow-y:auto;
  background:var(--c-surface);color:var(--c-ink);
  border-top:3px solid var(--c-accent);box-shadow:var(--sh-3);
}
.mega[hidden]{display:none}
.mega__in{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) 290px;
  gap:28px;padding-block:28px 32px;
}
.mega__head{
  font-family:var(--f-body);font-size:var(--fs-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;color:var(--c-muted);
  padding-bottom:8px;margin-bottom:10px;border-bottom:1px solid var(--c-line);
}
.mega__list li + li{margin-top:2px}
.mega__list a{
  display:block;padding:5px 8px;margin-left:-8px;border-radius:var(--r-sm);
  color:var(--c-ink-2);transition:background var(--t),color var(--t);
}
.mega__list a:hover{background:var(--c-bg-alt);color:var(--c-accent-dark)}
.mega__promo{background:var(--c-bg-alt);border-radius:var(--r-lg);padding:16px}
.mega__promo .ph,
.mega__promo .fig{margin-bottom:12px}
.mega__promo-title{font-family:var(--f-head);font-weight:600;font-size:1.02rem;margin-bottom:4px}
.mega__promo-text{font-size:var(--fs-sm);color:var(--c-ink-2);margin-bottom:12px}

@media (max-width:1099px){.mainnav{display:none}}

/* ---------- 08 · DRAWER ------------------------------------ */
.drawer-backdrop{position:fixed;inset:0;z-index:95;background:rgba(20,30,25,.55)}
.drawer-backdrop[hidden]{display:none}
.drawer{
  position:fixed;top:0;left:0;bottom:0;z-index:96;width:min(320px,86vw);
  background:var(--c-surface);box-shadow:var(--sh-3);
  display:flex;flex-direction:column;animation:slideIn .2s ease;
}
.drawer[hidden]{display:none}
@keyframes slideIn{from{transform:translateX(-100%)}to{transform:none}}
.drawer__top{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:var(--c-dark);color:#fff}
.drawer__title{font-family:var(--f-head);font-weight:600}
.drawer__close{font-size:28px;line-height:1;color:#fff;padding:0 4px}
.drawer__nav{padding:10px 0;overflow-y:auto}
.drawer__nav a{display:block;padding:13px 18px;font-weight:600;border-bottom:1px solid var(--c-line-soft)}
.drawer__nav a:hover{background:var(--c-bg-alt);color:var(--c-accent-dark)}
.drawer__nav hr{margin:10px 18px}

/* ---------- 09 · HERO -------------------------------------- */
.hero{position:relative;background:var(--c-dark);isolation:isolate}
/* Kategorieseiten: gleicher Aufbau wie die Startseite, nur ohne
   Konfiguratorbox - der Klebebereich darf deshalb bis unten laufen. */
/* Klebebereich endet oberhalb der Buttonleiste, damit die Textkachel
   am Bildende von ihr nach oben geschoben wird - wie auf der
   Startseite von der Konfiguratorbox. */
.hero--kat .slide__sticky{inset:0 0 var(--h-qsbox) 0}
/* Seiten ohne Buttonleiste: Klebebereich bis zum Bildende */
.hero--kat:not(:has(.katchips)) .slide__sticky{inset:0}

/* Buttonleiste klebt am unteren Bildrand, gleiches Prinzip wie die
   Konfiguratorbox auf der Startseite. */
/* Eigene Ebene ueber dem Bild. Ein negativer Aussenabstand wuerde den
   Hero um seinen Betrag verkuerzen - der folgende Abschnitt startete
   dann zu frueh und ueberlappte das Bild. */
.katchips{
  position:absolute;inset:0;z-index:7;
  display:flex;align-items:flex-end;
  pointer-events:none;
}
.katchips > .wrap{position:sticky;bottom:10px;width:100%}
.katchips .chips{
  pointer-events:auto;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.5);
  border-top:3px solid var(--c-accent);
  margin-top:0;
}
@media (max-width:1023px){
  .katchips{position:static;display:block;padding-block:18px;background:var(--c-dark-2);pointer-events:auto}
  .katchips > .wrap{position:static}
  .katchips .chips{
    background:var(--c-surface);backdrop-filter:none;
    border:1px solid var(--c-line);border-top:3px solid var(--c-accent);
    box-shadow:var(--sh-2);
  }
  .hero--kat .slide__sticky{inset:0}
}
/* ---- Kopfbereich ohne Bild ------------------------------
   Ohne Bild hat der Hero keine eigene Hoehe. Die absolut
   positionierte Textkachel stuende dann ausserhalb des Flusses und
   wuerde den folgenden Abschnitt ueberlagern. Deshalb hier alles
   im normalen Fluss, mit eigenem Innenabstand. */
.hero--ohnebild{padding:38px 0 34px}
.hero--ohnebild .slide__overlay{display:none}
.hero--ohnebild .slide__sticky{
  position:static;inset:auto;height:auto;display:block;
}
.hero--ohnebild .slide__box{padding-bottom:0}
/* Chips sitzen unter der Textkachel, nicht darueber */
.hero--ohnebild .katchips{
  position:static;inset:auto;margin-top:24px;
}
@media (max-width:639px){
  .hero--ohnebild{padding:24px 0 24px}
  .hero--ohnebild .katchips{margin-top:18px}
}

.hero--kat .crumb{color:rgba(255,255,255,.72);margin-bottom:12px}
.hero--kat .crumb a{color:rgba(255,255,255,.72)}
.hero--kat .crumb a:hover{color:#fff}
.hero--kat .kat__title{color:#fff;margin-bottom:.35em}
.hero--kat .kat__lead{color:#e2e8e4}
.hero__track{position:relative}
.slide{display:none;position:relative}
.slide.is-active{display:block;animation:fade .4s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
/* Kein Farbverlauf mehr ueber dem Bild. Er war noetig, solange der
   Text direkt darauf lag. Seit er in einer eigenen Kachel mit
   Weichzeichner sitzt, verdunkelt er das Bild ohne Nutzen. */
.slide__overlay{position:absolute;inset:0;pointer-events:none}
/* Hoehenneutrale Ebene ueber dem Bild. Sie traegt die klebende
   Textkachel, ohne die Hoehe des Hero zu beeinflussen. */
.slide__sticky{
  position:absolute;z-index:6;
  /* Unten frei bleiben fuer die Konfiguratorbox. Dadurch klebt die
     Textkachel nur bis dorthin und wird am Bildende von der Box
     nach oben geschoben, statt darunter zu verschwinden. */
  inset:0 0 var(--h-qsbox) 0;
  pointer-events:none;
  /* Der Abstand zur Menueleiste muss hier stehen, nicht als top am
     klebenden Element. Sticky misst top vom Fensterrand aus - und
     weil der Kopfbereich hoeher ist als jeder sinnvolle Abstand,
     wuerde die Kachel dort immer an den Containeranfang geklemmt. */
  padding-top:calc(var(--h-nav) * 2);
}
.slide__box{
  position:sticky;
  /* Klebt beim Scrollen direkt unter dem Kopfbereich. */
  top:calc(var(--h-fix) + 12px);
  pointer-events:auto;
  display:inline-block;
  max-width:min(46rem,100%);
  padding:24px 28px;
  color:#fff;
  background:rgba(20,31,25,.55);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg);
}
.slide__eyebrow{
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.16em;
  color:var(--c-accent);font-weight:700;margin-bottom:12px;
}
.slide__title{
  font-size:clamp(1.7rem,1rem + 2.6vw,3.1rem);
  margin-bottom:.38em;letter-spacing:-.01em;font-weight:600;
}
.slide__text{font-size:var(--fs-lg);color:#dbe2dd;margin-bottom:1.5em}


.hero__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.9);color:var(--c-ink);
  display:grid;place-items:center;transition:background var(--t);
}
.hero__nav:hover{background:#fff}
.hero__nav svg{width:22px;height:22px}
.hero__nav--prev{left:16px}
.hero__nav--next{right:16px}

.hero__dots{position:absolute;left:0;right:0;bottom:150px;z-index:5;display:flex;justify-content:center;gap:8px}
.hero__dots button{width:30px;height:3px;background:rgba(255,255,255,.45);transition:background var(--t)}
.hero__dots button.is-active{background:var(--c-accent)}

@media (max-width:767px){
  .ph--hero{height:calc(100svh - var(--h-fix));min-height:460px;border-radius:0}
  .hero__nav{display:none}
}

/* ---------- 10 · SCHNELLEINSTIEG --------------------------- */
/* Klebt am unteren Bildschirmrand, solange das Hero sichtbar ist.
   Die negative Aussenhoehe haelt sie aus dem Hoehenfluss heraus. */
.quickstart{
  position:absolute;inset:0;z-index:7;
  display:flex;align-items:flex-end;
  padding-block:0;
  pointer-events:none;
}
.quickstart > .wrap{position:sticky;bottom:10px;width:100%}
  
.qs{
  display:grid;
  grid-template-columns:minmax(150px,1fr) 1.1fr .75fr .75fr 1.1fr auto;
  gap:14px;align-items:end;
  padding:18px 20px;
  pointer-events:auto;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.5);
  border-top:3px solid var(--c-accent);border-radius:var(--r-lg);
  box-shadow:0 10px 34px rgba(15,24,20,.35);
}
.qs__lead{align-self:center}
.qs__eyebrow{
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.09em;
  color:var(--c-accent-dark);font-weight:700;margin:0 0 2px;
}
.qs__title{font-family:var(--f-head);font-size:1.12rem;font-weight:600;margin:0;line-height:1.25}
.qs__field{display:flex;flex-direction:column;gap:5px;min-width:0}
.qs__field label{font-size:var(--fs-xs);font-weight:600;color:var(--c-ink-2)}
.qs__field select,
.qs__field input{
  width:100%;padding:10px 12px;background:var(--c-bg);
  border:1px solid var(--c-line);border-radius:var(--r);
  font-size:var(--fs-md);
}
.qs__field select:focus,.qs__field input:focus{outline:none;border-color:var(--c-accent)}
.qs__unit{position:relative}
.qs__unit input{padding-right:38px}
.qs__unit span{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  font-size:var(--fs-sm);color:var(--c-muted);pointer-events:none;
}
.qs__submit{height:42px;white-space:nowrap}
.qs__hint{grid-column:1/-1;margin:2px 0 0;font-size:var(--fs-xs);color:var(--c-muted)}
.qs__hint a{color:var(--c-accent);border-bottom:1px solid currentColor}
.qs__hint.is-error{color:var(--c-sale);font-weight:600}

@media (max-width:1099px){
  .qs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qs__lead{grid-column:1/-1}
  .qs__submit{grid-column:1/-1}
}

@media (max-width:1023px){
  /* Der Konfigurator entfaellt auf schmalen Schirmen komplett.
     Zum Konfigurieren fuehrt der Button in der Textkachel. */
  /* Konfigurationsbox bleibt sichtbar, in zwei Reihen:
     Reihe 1  Produkt | Montage
     Reihe 2  Breite  | Höhe     */
  .qs{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
  .qs__lead{grid-column:1/-1}
  .qs__f--produkt{order:1}
  .qs__f--montage{order:2}
  .qs__f--breite {order:3}
  .qs__f--hoehe  {order:4}
  .qs__submit{order:5;grid-column:1/-1;height:46px}
  .qs__hint{order:6;grid-column:1/-1}
  /* Textkachel klebt nicht mehr. Sonst bleibt sie beim Scrollen stehen
     und schiebt sich ueber die Inhalte darunter. */
  .slide__sticky{padding-top:14px}
  .slide__box{position:static;padding:18px 20px}
  /* Auf schmalen Schirmen wuerde die Kachel das halbe Bild verdecken. */
  .quickstart{position:static;display:block;padding-block:18px;background:var(--c-dark-2);pointer-events:auto}
  .quickstart > .wrap{position:static}
  .qs{background:var(--c-surface);backdrop-filter:none;border-color:var(--c-line);box-shadow:var(--sh-2)}
  .hero__dots{bottom:16px}
  .slide__box{max-width:100%}
}
@media (max-width:639px){
  /* Der Konfigurator ist hier ausgeblendet, das Hero darf also die
     volle sichtbare Hoehe nutzen. Abgezogen werden nur Topbar und die
     beiden Kopfreihen. */
  /* Kopfbereich ist hier hoeher: Topbar plus Logoreihe plus Suchreihe.
     Der Wert folgt der tatsaechlichen Bauhoehe von rund 150 px. */
  img.fig--hero,.fig--hero img,.ph--hero{height:calc(100svh - 34px - 152px);min-height:420px}
}

/* ---------- 11 · PRODUKTWELTEN ----------------------------- */
.worlds{display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr))}
@media (min-width:1400px){.worlds{gap:20px}}
.world{
  display:flex;flex-direction:column;height:100%;
  background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);
  overflow:hidden;transition:border-color var(--t),box-shadow var(--t),transform var(--t);
}
.world:hover{border-color:var(--c-accent);box-shadow:var(--sh-2);transform:translateY(-3px)}
.world .ph,
.world .fig{border-radius:0}
.world__body{display:flex;flex-direction:column;flex:1;padding:16px 18px 18px}
.world__title{font-family:var(--f-head);font-size:1.12rem;font-weight:600;margin-bottom:5px}
.world__text{font-size:var(--fs-sm);color:var(--c-ink-2);margin-bottom:14px}
.world__cta{
  margin-top:auto;font-size:var(--fs-sm);font-weight:600;color:var(--c-accent);
  display:inline-flex;align-items:center;gap:6px;
}
.world__cta::after{content:"\2192";transition:transform var(--t)}
.world:hover .world__cta::after{transform:translateX(4px)}
@media (max-width:1023px){.worlds{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:479px){.worlds{grid-template-columns:minmax(0,1fr)}}

/* ---------- 12 · USP --------------------------------------- */
.usps{background:var(--c-bg-alt);border-block:1px solid var(--c-line)}
.usps__in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;padding-block:26px}
.usp{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-sm);color:var(--c-ink-2)}
.usp strong{color:var(--c-ink)}
.usp__ico{color:var(--c-accent-dark);font-size:1.05rem;line-height:1.35}
@media (max-width:900px){.usps__in{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:479px){.usps__in{grid-template-columns:minmax(0,1fr)}}

/* ---------- 13 · INTRO ------------------------------------- */
/* Ueberschrift und Fliesstext nebeneinander. Vorher stand beides
   untereinander und der Text lief nur ueber die halbe Rasterbreite -
   rechts blieb eine grosse leere Flaeche. */
.intro{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);
  align-items:start;
}
.intro__title{font-size:var(--fs-h1);font-weight:600;margin:0}
.intro__title strong{font-weight:600;color:var(--c-accent-dark)}
.intro__text{color:var(--c-ink-2)}
.intro__text p{margin-top:0}
.intro__text strong{color:var(--c-ink)}
@media (max-width:1023px){.intro{grid-template-columns:minmax(0,1fr);gap:20px}}

/* ---------- 14 · KARTEN + RAIL ----------------------------- */
/* Kein horizontaler Scroller mehr: Die Karten brechen um.
   Bei sechs Artikeln passen sie auf breiten Schirmen in eine Reihe. */
.rail{display:grid;gap:14px;grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:1399px){.rail{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1023px){.rail{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:767px){.rail{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}

.card{
  display:flex;flex-direction:column;background:var(--c-surface);
  border:1px solid var(--c-line);border-radius:var(--r-lg);overflow:hidden;
  transition:border-color var(--t),box-shadow var(--t);
}
.card:hover{border-color:var(--c-accent-dark);box-shadow:var(--sh-2)}
.card__media{position:relative;display:block;padding:12px}
.card__media .ph,
.card__media .fig{border-radius:var(--r-sm)}
/* Produktbilder flach halten: 4:3 statt 1:1 und Höhe deckeln,
   sonst wird die Karte im Raster unnötig hoch. */
.card__media .fig,
.card__media .ph{
  aspect-ratio:4/3;
  max-height:190px;
  object-fit:contain;
  background:var(--c-bg-alt);
}
.flag{
  position:absolute;top:10px;left:10px;z-index:2;padding:4px 9px;border-radius:var(--r-sm);
  background:var(--c-dark);color:#fff;font-size:var(--fs-xs);font-weight:700;
}
.flag--sale{background:var(--c-sale)}
.flag--new{background:var(--c-accent)}
.card__body{display:flex;flex-direction:column;flex:1;padding:0 16px 16px}
.card__cat{font-size:var(--fs-xs);color:var(--c-muted);margin-bottom:4px}
.card__title{font-family:var(--f-head);font-size:1.05rem;font-weight:600;line-height:1.3;margin-bottom:10px}
.card__title a:hover{color:var(--c-accent)}
.card__specs{font-size:var(--fs-sm);color:var(--c-ink-2);margin-bottom:12px}
.card__specs li{position:relative;padding-left:15px;margin-bottom:3px}
.card__specs li::before{
  content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;
  transform:rotate(45deg);background:var(--c-accent-soft);border:1px solid var(--c-accent);
}
.card__price{margin:auto 0 2px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.card__from{font-size:var(--fs-sm);color:var(--c-muted)}
.card__price-old{font-size:var(--fs-sm)}
.card__price-now{font-family:var(--f-head);font-size:1.3rem;font-weight:600}
.card__unit{font-size:var(--fs-xs);color:var(--c-muted)}
.card__vat{font-size:11px;color:var(--c-muted);line-height:1.35;margin-bottom:12px}

/* ---------- 15 · MEDIA + PARTNER --------------------------- */
.media{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.media--reverse .media__figure{order:-1}
.media__body p{color:var(--c-ink-2)}
.media__figure .ph,
.media__figure .fig{border-radius:var(--r-lg)}
@media (max-width:767px){.media{grid-template-columns:minmax(0,1fr)}.media--reverse .media__figure{order:0}}

.partner{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;
  padding:clamp(24px,3vw,40px);background:var(--c-bg-alt);border-radius:var(--r-lg);
}
.partner__figure .ph,
.partner__figure .fig{border-radius:var(--r)}
.partner__eyebrow{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.09em;color:var(--c-accent-dark);font-weight:700;margin-bottom:6px}
.partner__body p{color:var(--c-ink-2)}
.partner__facts{margin:0 0 20px;font-size:var(--fs-sm);color:var(--c-ink-2)}
.partner__facts li{padding:7px 0;border-bottom:1px solid var(--c-line)}
.partner__facts strong{color:var(--c-ink)}
@media (max-width:767px){.partner{grid-template-columns:minmax(0,1fr)}}

/* ---------- 16 · STEPS ------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;counter-reset:s}
.step{position:relative;padding-top:14px;border-top:2px solid var(--c-line)}
.step__no{
  display:grid;place-items:center;width:34px;height:34px;margin-bottom:12px;
  background:var(--c-accent-dark);color:#fff;border-radius:50%;
  font-family:var(--f-head);font-size:1rem;font-weight:600;
}
.step__title{font-size:1.08rem;margin-bottom:6px}
.step p{font-size:var(--fs-sm);color:var(--c-ink-2);margin:0}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:479px){.steps{grid-template-columns:minmax(0,1fr)}}

/* ---------- 17 · RATGEBER ---------------------------------- */
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.post{
  display:flex;flex-direction:column;height:100%;background:var(--c-surface);
  border:1px solid var(--c-line);border-radius:var(--r-lg);overflow:hidden;
  transition:border-color var(--t),box-shadow var(--t);
}
.post:hover{border-color:var(--c-accent-dark);box-shadow:var(--sh-2)}
.post .ph,
.post .fig{border-radius:0;max-height:200px;object-fit:cover}
.post__body{display:flex;flex-direction:column;padding:16px 18px 20px}
.post__tag{
  align-self:flex-start;margin-bottom:9px;padding:3px 9px;
  background:var(--c-accent-soft);color:var(--c-accent-dark);
  font-size:var(--fs-xs);font-weight:700;border-radius:var(--r-sm);
}
.post__title{font-family:var(--f-head);font-size:1.1rem;font-weight:600;line-height:1.3;margin-bottom:7px}
.post__text{font-size:var(--fs-sm);color:var(--c-ink-2)}
@media (max-width:900px){.posts{grid-template-columns:minmax(0,1fr)}}

/* ---------- 18 · TRUSTBAR ---------------------------------- */
.trustbar{background:var(--c-bg-alt);border-block:1px solid var(--c-line)}
.trustbar__in{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-block:16px}
.trustbadge{
  display:flex;align-items:baseline;gap:8px;padding:8px 13px;
  background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r);
  font-size:var(--fs-xs);
}
.trustbadge__src{color:var(--c-muted)}
.trustbadge__grade{font-weight:700;color:var(--c-ok)}
.trustbadge__score{font-family:var(--f-head);font-weight:600;font-size:var(--fs-lg)}
.trustbadge__score small{font-weight:400;font-size:var(--fs-xs);color:var(--c-muted)}
.trustbar__info{margin-left:auto;font-size:var(--fs-xs);color:var(--c-ink-2);text-decoration:underline;text-underline-offset:3px}
.trustbar__panel{padding:0 0 16px;font-size:var(--fs-sm);color:var(--c-ink-2)}
.trustbar__panel[hidden]{display:none}
.trustbar__panel a{color:var(--c-accent);text-decoration:underline}
@media (max-width:767px){.trustbar__info{margin-left:0;flex-basis:100%}}

/* ---------- 19 · CTA --------------------------------------- */
.cta{background:var(--c-dark);color:#fff}
.cta__in{
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  padding-block:clamp(30px,4vw,48px);
}
.cta__title{font-size:var(--fs-h2);margin-bottom:.3em}
.cta__text{color:var(--c-on-dark-2);margin:0}
.cta__actions{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:767px){
  /* Beide Buttons nebeneinander, je zur Haelfte. Kein Umbruch, dafuer
     etwas engere Innenabstaende und kleinere Schrift. */
  .cta__actions{flex-wrap:nowrap;gap:10px;width:100%}
  .cta__actions .btn{flex:1 1 0;min-width:0;padding:13px 10px;
                     font-size:var(--fs-md);text-align:center;white-space:nowrap}
}
@media (max-width:419px){
  /* "Rückruf vereinbaren" braucht bei 15px rund 164 px, verfuegbar
     sind auf 412px Breite nur 181 px je Button. Knapp, deshalb hier
     kleinere Schrift. */
  .cta__actions .btn{font-size:var(--fs-sm);padding:12px 8px}
}

/* ---------- 20 · FOOTER ------------------------------------ */
.footer{background:var(--c-dark);color:var(--c-on-dark-2);font-size:var(--fs-sm);border-top:1px solid rgba(255,255,255,.09)}
.footer__grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:32px;
  padding-block:40px 32px;
}
.footer__head{font-family:var(--f-head);color:#fff;font-weight:600;font-size:1.02rem;margin-bottom:12px}
.footer__list li + li{margin-top:6px}
.footer__list a{transition:color var(--t)}
.footer__list a:hover{color:var(--c-accent)}

/* Firmenspalte */
.footer__brand p{margin:0 0 4px}
.footer__firma-name{font-family:var(--f-head);color:#fff;font-weight:600;font-size:1.02rem}
.footer__firma-line{color:var(--c-on-dark-2)}
.footer__firma-adr{font-style:normal;color:var(--c-on-dark-2);margin:0 0 14px;line-height:1.5}
.footer__daten{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;
  margin:0 0 16px;font-size:var(--fs-xs);
}
.footer__daten dt{color:var(--c-on-dark-2);opacity:.75;white-space:nowrap}
.footer__daten dd{margin:0;color:#fff}
.footer__daten a{transition:color var(--t)}
.footer__daten a:hover{color:var(--c-accent)}
.footer__social{display:flex;gap:8px}
.footer__social .ph{background:var(--c-dark-3)}
.footer__social .ph::after{color:#fff}

@media (max-width:1099px){
  .footer__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
  .footer__brand{grid-column:1/-1}
  /* Firmendaten im schmalen Layout zweispaltig, spart Höhe */
  .footer__daten{grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);column-gap:14px}
}
@media (max-width:767px){
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
}
@media (max-width:479px){
  .footer__daten{grid-template-columns:auto minmax(0,1fr)}
}

.footer__pay{border-top:1px solid rgba(255,255,255,.09)}
.footer__pay-in{display:flex;flex-wrap:wrap;gap:26px 44px;padding-block:20px;align-items:flex-start}
/* Textfassung auf Unterseiten: dieselbe Aussage ohne zwoelf Bildanfragen */
.footer__pay-in--text{display:block;padding-block:16px}
.footer__pay-in--text p{
  margin:0;color:var(--c-on-dark-2);font-size:var(--fs-sm);line-height:1.6;
}
.footer__pay-in--text a{color:var(--c-accent);text-decoration:underline;text-underline-offset:2px}
.footer__pay-in--text a:hover{color:#fff}
.footer__pay-gruppe{display:flex;flex-direction:column;gap:9px}
.footer__pay-titel{
  font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--c-on-dark-2);opacity:.8;
}
.footer__pay-liste{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.footer__pay-liste img{
  display:block;height:30px;width:auto;
  background:#fff;border-radius:var(--r-sm);
  padding:5px 7px;
}
/* Das Apple-Pay-Zeichen ist rein weiss und waere auf weissem Grund
   unsichtbar. Es bekommt deshalb die dunkle Flaeche der Fusszeile. */
.footer__pay-liste img[src*="apple-pay"]{background:var(--c-dark-3)}
@media (max-width:479px){
  .footer__pay-in{gap:18px}
  .footer__pay-liste img{height:26px;padding:4px 6px}
}
.footer__pay .ph{background:var(--c-dark-3);border-radius:var(--r-sm)}
.footer__pay .ph::after{color:var(--c-on-dark-2)}

.footer__bottom{border-top:1px solid rgba(255,255,255,.09);background:rgba(0,0,0,.18)}
.footer__bottom-in{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-block:16px;font-size:var(--fs-xs)}
.footer__bottom p{margin:0}
.footer__legalnav{display:flex;flex-wrap:wrap;gap:16px}
.footer__legalnav a:hover{color:var(--c-accent)}
.footer__legal{opacity:.7}

@media (max-width:900px){.footer__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}}
@media (max-width:479px){.footer__cols{grid-template-columns:minmax(0,1fr)}}

/* ---------- 22 · KATEGORIESEITEN --------------------------- */
.kat__head{padding-block:clamp(22px,3vw,38px) 0}
.crumb{font-size:var(--fs-xs);color:var(--c-muted);margin-bottom:14px}
.crumb a:hover{color:var(--c-accent)}
.crumb span{margin-inline:2px}
.kat__title{font-size:var(--fs-h1);margin-bottom:.4em;font-weight:600}
.kat__lead{color:var(--c-ink-2);font-size:var(--fs-lg);margin-bottom:0}
.kat__leer{color:var(--c-muted);font-size:var(--fs-sm)}
.kat__leer code{background:var(--c-bg-alt);padding:1px 5px;border-radius:var(--r-sm)}
.kat__seo p{color:var(--c-ink-2)}

.chips{
  margin-top:22px;padding:16px 18px;
  background:var(--c-bg-alt);border:1px solid var(--c-line);border-radius:var(--r-lg);
}
.chips__label{
  display:block;margin:0 0 10px;
  font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--c-muted);
}
.chips__list{
  display:flex;gap:8px;flex-wrap:wrap;
}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 15px;border-radius:99px;
  border:1px solid var(--c-line);background:var(--c-surface);
  font-size:var(--fs-sm);font-weight:600;line-height:1.25;color:var(--c-ink);
  white-space:nowrap;
  transition:border-color var(--t),color var(--t),background var(--t),box-shadow var(--t);
}
.chip::before{
  content:"";width:6px;height:6px;flex:0 0 auto;transform:rotate(45deg);
  background:var(--c-accent-soft);border:1px solid var(--c-accent);
  transition:background var(--t),border-color var(--t);
}
.chip:hover{border-color:var(--c-accent);color:var(--c-accent);box-shadow:var(--sh-1)}
.chip.is-active{
  background:var(--c-dark);border-color:var(--c-dark);color:#fff;cursor:default;
}
.chip.is-active::before{background:var(--c-accent);border-color:var(--c-accent)}

@media (max-width:639px){
  /* Kein waagerechtes Scrollen: die Chips brechen um. */
  .chips{padding:14px}
  .chips__label{padding-right:0}
  .chips__list{flex-wrap:wrap;overflow:visible;padding:0}
  .chip{white-space:normal;padding:8px 13px;font-size:var(--fs-xs);line-height:1.3}
}

.katgrid{display:grid;gap:14px;grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1399px){.katgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1023px){.katgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:767px){.katgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
/* Auch auf schmalen Displays zweispaltig – einspaltig wird die Karte zu hoch. */
@media (max-width:419px){
  .katgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card__media{padding:8px}
  .card__media .fig,.card__media .ph{max-height:130px}
  .card__body{padding:0 10px 12px}
  .card__title{font-size:.95rem}
  .card__specs{display:none}
  .card__price-now{font-size:1.08rem}
}

/* Zwei gleiche Spalten wie beim Textblock darueber, damit alle
   Bereiche der Seite dieselbe Kante und dieselbe Breite haben. */
.faq{
  column-count:2;
  column-gap:clamp(32px,4vw,64px);
}
.faq details{break-inside:avoid}
@media (max-width:1023px){.faq{column-count:1}}
.faq details{border-bottom:1px solid var(--c-line)}
.faq summary{
  padding:15px 30px 15px 0;cursor:pointer;position:relative;
  font-family:var(--f-head);font-size:1.05rem;font-weight:600;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);
  color:var(--c-accent-dark);font-size:1.3rem;line-height:1;
}
.faq details[open] summary::after{content:"\2013"}
.faq details p{padding:0 0 16px;color:var(--c-ink-2);margin:0}
.faq a{color:var(--c-accent);text-decoration:underline;text-underline-offset:2px}

/* ---------- 22a · SEITENBILDER ----------------------------- */
@media (max-width:767px){}

.katbild img{
  display:block;width:100%;
  aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--r);background:var(--c-bg-alt);
}

/* ---------- 22b · TEXTELEMENTE ----------------------------- */
/* Lesebreite begrenzen, aber linksbuendig im Raster stehen bleiben.
   Frueher lag .kat__seo zusammen mit .wrap auf einem Element - dessen
   margin-inline:auto hat den schmalen Block mittig gesetzt. */
/* Lesespalte und Seitenspalte.
   Zwei Textspalten waeren bei 1600 px rund 90 Zeichen je Zeile -
   deutlich ueber den 60 bis 75, die gut lesbar sind, und man muesste
   nach unten lesen und wieder hochspringen. Der Text bekommt deshalb
   eine ruhige Lesebreite, die freie Flaeche eine Seitenspalte mit
   Sprungmarken und Bildern. */
.kat__seo{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:clamp(32px,4vw,72px);
  align-items:start;
}
/* Ohne feste Zuweisung verteilt das Raster automatisch: Die
   Ueberschrift landet in Spalte 1, der Text in der schmalen Spalte 2
   und die Seitenspalte rutscht in die naechste Zeile. */
.kat__seo > h2{grid-column:1 / -1}
/* Fuellt seine Spalte. Damit die Zeilen trotz der groesseren Breite
   angenehm bleiben, etwas groessere Schrift und mehr Zeilenabstand. */
.kat__text{grid-column:1;min-width:0;font-size:1.12rem;line-height:1.72}
.kat__neben{grid-column:2}
.kat__block{margin-bottom:2em;scroll-margin-top:150px}
.kat__block > *:last-child{margin-bottom:0}

/* Seitenspalte laeuft beim Scrollen mit */
.kat__neben{position:sticky;top:150px;display:grid;gap:18px}
.kat__inhalt{
  padding:18px 20px;background:var(--c-bg-alt);
  border:1px solid var(--c-line);border-radius:var(--r-lg);
}
.kat__inhalt-titel{
  margin:0 0 10px;font-size:var(--fs-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--c-muted);
}
.kat__inhalt ul{display:grid;gap:2px}
.kat__inhalt a{
  display:block;padding:6px 8px;margin-left:-8px;border-radius:var(--r-sm);
  font-size:var(--fs-sm);font-weight:600;color:var(--c-ink-2);
  transition:background var(--t),color var(--t);
}
.kat__inhalt a:hover{background:var(--c-surface);color:var(--c-accent)}

.katbild{margin:0}
.kat__block .tabwrap{overflow-x:auto}

@media (max-width:1199px){
  .kat__seo{grid-template-columns:minmax(0,1fr)}
  .kat__seo > h2,.kat__text,.kat__neben{grid-column:1}
  .kat__text{max-width:none}
  .kat__neben{position:static;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:767px){
  .kat__neben{grid-template-columns:minmax(0,1fr)}
}

.kat__h3{
  font-size:1.22rem;font-weight:600;margin-top:1.9em;margin-bottom:.45em;
  padding-top:.6em;border-top:1px solid var(--c-line);
}
.kat__seo > .kat__h3:first-of-type{border-top:0;padding-top:0}
.kat__liste{margin:0 0 1.1em;color:var(--c-ink-2)}
.kat__liste li{position:relative;padding-left:18px;margin-bottom:6px}
.kat__liste li::before{
  content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;
  transform:rotate(45deg);background:var(--c-accent-soft);border:1px solid var(--c-accent);
}

.tabwrap{overflow-x:auto;margin:1.2em 0 1.6em}
.tab{width:100%;border-collapse:collapse;font-size:var(--fs-sm);min-width:520px}
@media (max-width:639px){
  /* Kein waagerechtes Scrollen: Die Tabelle wird zur Liste. Jede Zeile
     ist ein Block, jede Zelle traegt ihre Spaltenbeschriftung als
     data-label. Die Kopfzeile entfaellt, sie waere doppelt. */
  .tabwrap,.kat__block .tabwrap{overflow:visible}
  .tab{min-width:0;display:block}
  .tab caption{display:block}
  .tab thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .tab tbody,.tab tr,.tab td{display:block;width:auto}
  .tab tr{
    border:1px solid var(--c-line);border-radius:var(--r);
    margin-bottom:12px;padding:4px 0;background:var(--c-surface);
  }
  .tab td{border-bottom:1px solid var(--c-line-soft);padding:9px 14px}
  .tab tr td:last-child{border-bottom:0}
  .tab td::before{
    content:attr(data-label);
    display:block;margin-bottom:2px;
    font-size:var(--fs-xs);font-weight:700;color:var(--c-muted);
    text-transform:uppercase;letter-spacing:.04em;
  }
  .tab td:first-child{
    background:var(--c-bg-alt);font-weight:700;
    border-radius:var(--r) var(--r) 0 0;
  }
}
.tab caption{
  caption-side:top;text-align:left;font-size:var(--fs-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--c-muted);padding-bottom:8px;
}
.tab th,.tab td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--c-line)}
.tab thead th{
  background:var(--c-bg-alt);font-weight:700;color:var(--c-ink);
  border-bottom:2px solid var(--c-accent);
}
.tab tbody tr:last-child td{border-bottom:0}
.tab td:first-child{font-weight:600;color:var(--c-ink)}

/* ---------- 22c · VERWANDTE SEITEN ------------------------- */
.rel{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
.rel a{
  display:block;height:100%;padding:14px 16px;
  background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);
  transition:border-color var(--t),box-shadow var(--t);
}
.rel a:hover{border-color:var(--c-accent);box-shadow:var(--sh-1)}
.rel__t{display:block;font-family:var(--f-head);font-weight:600;font-size:1.02rem;margin-bottom:4px}
.rel__d{display:block;font-size:var(--fs-sm);color:var(--c-ink-2);line-height:1.45}
.rel a:hover .rel__t{color:var(--c-accent)}
@media (max-width:900px){.rel{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:519px){.rel{grid-template-columns:minmax(0,1fr)}}

/* ---------- 22d · RECHTSSEITEN ----------------------------- */
.legal{padding-block:clamp(30px,4vw,54px)}
.legal__crumb{font-size:var(--fs-xs);color:var(--c-muted);margin-bottom:18px}
.legal__crumb a:hover{color:var(--c-accent)}
/* Einspaltig ueber die volle Breite. Zweispaltig zwingt am Spaltenende
   zum Zurueckscrollen nach ganz oben - bei langen Rechtstexten
   unzumutbar. */
.legal__body h1{font-size:var(--fs-h1);margin-bottom:.6em}
.legal__body h2{
  font-size:1.22rem;margin-top:1.8em;margin-bottom:.4em;
}
.legal__body h3{
  font-size:1.02rem;margin-top:1.3em;margin-bottom:.35em;color:var(--c-ink);
}
.legal__body ul{margin:0 0 1em 1.1em;color:var(--c-ink-2)}
.legal__body li{margin-bottom:.3em;line-height:1.65}
.legal__body hr{
  border:0;border-top:1px solid var(--c-line);margin:2.4em 0 1.6em;
}
.legal__meta{
  font-size:var(--fs-sm);color:var(--c-muted);margin-top:-.3em;margin-bottom:2em;
}
.legal__body p{color:var(--c-ink-2)}
.legal__body a{color:var(--c-accent);text-decoration:underline;text-underline-offset:2px}
.legal__body address{font-style:normal;color:var(--c-ink-2)}
.legal__body strong{color:var(--c-ink)}
.legal__body dl{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 20px;
  margin:0 0 1em;color:var(--c-ink-2);
}
.legal__body dt{font-weight:600;color:var(--c-ink)}
.legal__body dd{margin:0}
.legal__form{
  margin:1.2em 0;padding:18px 20px;background:var(--c-bg-alt);
  border:1px dashed var(--c-line);border-radius:var(--r);
  font-size:var(--fs-sm);color:var(--c-ink-2);break-inside:avoid;
}
.legal__form p:last-child{margin-bottom:0}
.legal__stand{margin-top:2.2em;font-size:var(--fs-sm);color:var(--c-muted)}
@media (max-width:479px){
  .legal__body dl{grid-template-columns:minmax(0,1fr);gap:2px 0}
  .legal__body dd{margin-bottom:8px}
}

/* ---------- 23 · MISC -------------------------------------- */
.totop{
  position:fixed;right:18px;bottom:18px;z-index:60;width:44px;height:44px;border-radius:50%;
  background:var(--c-dark);color:#fff;display:grid;place-items:center;
  box-shadow:var(--sh-2);transition:background var(--t);
}
.totop[hidden]{display:none}
.totop:hover{background:var(--c-accent)}
.totop svg{width:20px;height:20px}

body.is-locked{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
}


/* ---------- 25 · SUCHSEITE ------------------------------- */
.suche{margin-bottom:26px}
.suche__label{
  display:block;font-size:var(--fs-xs);font-weight:700;color:var(--c-muted);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;
}
.suche__feld{position:relative;max-width:640px}
.suche__feld input{
  width:100%;padding:15px 46px 15px 18px;font:inherit;font-size:var(--fs-lg);
  border:2px solid var(--c-line);border-radius:var(--r);background:#fff;
  transition:border-color var(--t);
}
.suche__feld input:focus{outline:none;border-color:var(--c-accent)}
.suche__feld button{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border:0;border-radius:50%;background:var(--c-bg-alt);
  color:var(--c-ink-2);font-size:20px;line-height:1;cursor:pointer;
}
.suche__feld button:hover{background:var(--c-line)}
.suche__hinweis{margin:8px 0 0;font-size:var(--fs-sm);color:var(--c-muted)}
.suche__zaehler{margin:0 0 14px;font-weight:600;color:var(--c-ink-2)}
.suche__treffer{display:grid;gap:12px}
.suchtreffer{border:1px solid var(--c-line);border-radius:var(--r);background:#fff;transition:border-color var(--t),box-shadow var(--t)}
.suchtreffer:hover{border-color:var(--c-accent);box-shadow:var(--sh-1)}
.suchtreffer a{display:block;padding:16px 18px}
.suchtreffer__gruppe{
  display:block;font-size:var(--fs-xs);font-weight:700;color:var(--c-muted);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px;
}
.suchtreffer__titel{font-size:1.12rem;margin:0 0 5px;color:var(--c-ink)}
.suchtreffer__text{margin:0;color:var(--c-ink-2);font-size:var(--fs-sm);line-height:1.6}
.suchtreffer mark{background:var(--c-accent-soft);color:inherit;padding:0 2px;border-radius:2px}
.suche__leer{color:var(--c-ink-2)}
.suche__leer a{color:var(--c-accent-dark);text-decoration:underline}
.suche__vorschlaege{margin-top:26px}
.suche__vorschlaege-titel{
  font-size:var(--fs-xs);font-weight:700;color:var(--c-muted);
  text-transform:uppercase;letter-spacing:.06em;margin:0 0 10px;
}
.suche__vorschlaege ul{display:flex;flex-wrap:wrap;gap:8px}
.suche__vorschlaege a{
  display:inline-block;padding:8px 14px;border:1px solid var(--c-line);
  border-radius:99px;font-size:var(--fs-sm);font-weight:600;color:var(--c-ink-2);
  background:#fff;transition:border-color var(--t),color var(--t);
}
.suche__vorschlaege a:hover{border-color:var(--c-accent);color:var(--c-accent-dark)}


/* ---------- 26 · FEHLERSEITE ----------------------------- */
.fehler__sprachen{display:flex;gap:8px;margin-bottom:22px}
.fehler__sprache{
  padding:8px 16px;border:1px solid var(--c-line);border-radius:99px;
  background:#fff;color:var(--c-ink-2);font:inherit;font-size:var(--fs-sm);
  font-weight:600;cursor:pointer;transition:all var(--t);
}
.fehler__sprache:hover{border-color:var(--c-accent);color:var(--c-accent-dark)}
.fehler__sprache.is-aktiv{
  background:var(--c-dark);border-color:var(--c-dark);color:#fff;cursor:default;
}
.fehler__lead{font-size:var(--fs-lg);color:var(--c-ink-2);margin-bottom:1.4em}
.fehler__bereiche{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;margin:0 0 2em;
}
.fehler__bereiche a{
  display:block;padding:16px 18px;background:#fff;
  border:1px solid var(--c-line);border-radius:var(--r);
  transition:border-color var(--t),box-shadow var(--t);
}
.fehler__bereiche a:hover{border-color:var(--c-accent);box-shadow:var(--sh-1)}
.fehler__bereiche strong{display:block;margin-bottom:4px;color:var(--c-ink)}
.fehler__bereiche span{font-size:var(--fs-sm);color:var(--c-ink-2);line-height:1.5}
.fehler__hilfe{color:var(--c-ink-2)}
.fehler__hilfe a{color:var(--c-accent-dark);text-decoration:underline;text-underline-offset:2px}
@media (max-width:639px){
  .fehler__bereiche{grid-template-columns:minmax(0,1fr)}
}


/* ---------- 27 · SPRACHUMSCHALTER ------------------------ */
.sprachwahl{position:relative}
.sprachwahl__btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 12px;border:1px solid rgba(255,255,255,.22);
  background:none;cursor:pointer;
  color:var(--c-on-dark-2);font:inherit;font-size:var(--fs-sm);font-weight:600;
  border-radius:var(--r);transition:color var(--t),background var(--t),border-color var(--t);
}
.sprachwahl__btn:hover{color:#fff;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4)}
.sprachwahl__btn[aria-expanded="true"]{color:#fff;background:rgba(255,255,255,.12)}
.sprachwahl__btn svg{
  width:20px;height:20px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.6;
}
.sprachwahl__liste{
  /* Standardmaessig zu. z-index ueber dem Kopfbereich, sonst laege
     die Liste darunter und waere unsichtbar. */
  display:none;
  position:absolute;top:calc(100% + 6px);right:0;z-index:120;
  min-width:150px;padding:6px;
  background:#fff;border:1px solid var(--c-line);
  border-radius:var(--r);box-shadow:var(--sh-2);
}
.sprachwahl__liste[hidden]{display:none}
/* Ohne JavaScript: Die Liste oeffnet sich, sobald die Schaltflaeche
   oder ein Eintrag den Fokus hat. Damit funktioniert der Umschalter
   auch dann, wenn das Skript nicht laedt oder ein Fehler es stoppt.
   Das JavaScript darunter ist nur noch Komfort. */
.sprachwahl:focus-within .sprachwahl__liste,
.sprachwahl:focus-within .sprachwahl__liste[hidden],
.sprachwahl:hover .sprachwahl__liste,
.sprachwahl:hover .sprachwahl__liste[hidden]{display:block}
.sprachwahl__liste a{
  display:block;padding:8px 10px;border-radius:var(--r-sm);
  font-size:var(--fs-sm);color:var(--c-ink-2);
  transition:background var(--t),color var(--t);
}
.sprachwahl__liste a:hover{background:var(--c-bg-alt);color:var(--c-ink)}
.sprachwahl__liste a[aria-current]{font-weight:700;color:var(--c-accent-dark)}
/* Im Kopfbereich rechts, auf einer Hoehe mit dem Logo */
.header__in .sprachwahl{margin-left:auto}
@media (max-width:1099px){
  /* Reihe 1: Burger, Logo, dann rechtsbuendig der Umschalter */
  .header__in .sprachwahl{grid-column:3 / -1;grid-row:1;justify-self:end;margin-left:0}
  .sprachwahl__btn span{display:none}
  .sprachwahl__btn{padding:10px}
  .sprachwahl__btn svg{width:22px;height:22px}
}


/* ---------- 28 · WIDERRUFSFUNKTION ----------------------- */
/* Die Schaltflaeche muss gut lesbar und dauerhaft erreichbar sein,
   ohne Anmeldung. Deshalb im Fussbereich, optisch abgesetzt. */
.footer__widerruf{
  display:inline-block;padding:5px 12px;
  border:1px solid rgba(255,255,255,.34);border-radius:99px;
  font-weight:600;
}
.footer__widerruf:hover{border-color:var(--c-accent);color:var(--c-accent)}

.hinweis{
  margin:1.6em 0;padding:16px 18px;border-radius:var(--r);
  background:var(--c-bg-alt);border:1px solid var(--c-line);
}
.hinweis p{margin:0 0 .7em}
.hinweis p:last-child{margin-bottom:0}
.hinweis--warnung{
  background:#fdf6ec;border-color:#e6c9a0;
}

.wform{margin:1.6em 0 2em;max-width:640px}
.wform h2{margin-top:1.8em}
.wform__feld{margin-bottom:18px}
.wform__feld label{
  display:block;margin-bottom:6px;font-weight:600;color:var(--c-ink);
  font-size:var(--fs-sm);
}
.wform__feld input,
.wform__feld textarea{
  width:100%;padding:11px 13px;font:inherit;font-size:var(--fs-base);
  border:1px solid var(--c-line);border-radius:var(--r-sm);background:#fff;
  color:var(--c-ink);transition:border-color var(--t);
}
.wform__feld input:focus,
.wform__feld textarea:focus{outline:none;border-color:var(--c-accent)}
.wform__feld textarea{resize:vertical;line-height:1.55}
.wform__feld--paar{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.wform__hilfe{margin:6px 0 0;font-size:var(--fs-xs);color:var(--c-muted);line-height:1.5}
.wform__opt{font-weight:400;color:var(--c-muted);font-size:var(--fs-xs)}
.wform__pflicht{font-size:var(--fs-xs);color:var(--c-muted);margin:0 0 1.4em}
@media (max-width:479px){
  .wform__feld--paar{grid-template-columns:minmax(0,1fr)}
}