/* ============================================================
   separatus.ch Rebuild — gemeinsames Stylesheet (Lauf 1)
   Token-Block zuerst: dieser :root-Block ist auf allen Seiten
   identisch und wird unverändert ins Build-Designsystem übernommen.
   Schrift: Poppins — nur Gewichte 400 (Fliesstext) und 600
   (Titel, Buttons, Werte). Keine weiteren Familien oder Gewichte.
   ============================================================ */
:root{
  /* Farben — extrahiert aus separatus.ch (Core Framework) */
  --primary:#49a462;
  --primary-10:#49a4621a; --primary-20:#49a46233; --primary-90:#49a462e6;
  --primary-d-1:#428f56; --primary-d-3:#31633d; --primary-d-6:#19291c;
  --primary-l-5:#bcdcc1; --primary-l-6:#d3e8d6; --primary-l-7:#e7f3e9;
  --primary-hover:var(--primary-d-1);
  --base:#193522;
  --light:#ffffff;
  --light-20:#ffffff33; --light-60:#ffffff99; --light-80:#ffffffcc;
  --dark-10:#1935221a; --dark-20:#19352233; --dark-60:#19352299;
  --bg-body:#ffffff;
  --bg-surface:#F7FCF8;
  --text-body:var(--primary-d-3);
  --text-light:#F7FCF8;
  --text-title:#193522;
  --success:#4ea26a;
  --error:#a24e4e;
  /* Typografie — fluide Skala, 62.5%-Root (1rem = 10px) */
  --font-body:'Poppins',sans-serif;
  --text-xs:clamp(1.11rem,calc(0.04vw + 1.1rem),1.15rem);
  --text-s:clamp(1.33rem,calc(0.1vw + 1.3rem),1.44rem);
  --text-m:clamp(1.6rem,calc(0.19vw + 1.54rem),1.8rem);
  --text-l:clamp(1.92rem,calc(0.32vw + 1.82rem),2.25rem);
  --text-xl:clamp(2.3rem,calc(0.49vw + 2.15rem),2.81rem);
  --text-2xl:clamp(2.76rem,calc(0.72vw + 2.54rem),3.52rem);
  --text-3xl:clamp(3.32rem,calc(1.03vw + 2.99rem),4.4rem);
  --text-4xl:clamp(3.98rem,calc(1.45vw + 3.52rem),5.49rem);
  /* Abstände & Radien — fluide Skala */
  --space-3xs:clamp(0.66rem,calc(0.04vw + 0.64rem),0.7rem);
  --space-2xs:clamp(0.82rem,calc(0.16vw + 0.77rem),0.99rem);
  --space-xs:clamp(1.02rem,calc(0.36vw + 0.91rem),1.4rem);
  --space-s:clamp(1.28rem,calc(0.67vw + 1.07rem),1.98rem);
  --space-m:clamp(1.6rem,calc(1.15vw + 1.23rem),2.8rem);
  --space-l:clamp(2rem,calc(1.87vw + 1.4rem),3.96rem);
  --space-xl:clamp(2.5rem,calc(2.96vw + 1.55rem),5.6rem);
  --space-2xl:clamp(3.13rem,calc(4.58vw + 1.66rem),7.92rem);
  --space-3xl:clamp(3.91rem,calc(6.97vw + 1.68rem),11.19rem);
  --radius-xs:0.4rem;
  --radius-s:clamp(0.6rem,calc(0.19vw + 0.54rem),0.8rem);
  --radius-m:clamp(1rem,calc(0.19vw + 0.94rem),1.2rem);
  --radius-l:clamp(1.6rem,calc(0.38vw + 1.48rem),2rem);
  --radius-full:999rem;
  --content-width:1180px;
  /* Effekte */
  --shadow-s:0 1.5px 3px var(--dark-20);
  --shadow-m:0 2px 6px var(--dark-20);
  --shadow-l:0 3px 12px var(--dark-20);
  --transition-base:all .2s ease;
  --press-scale:scale3d(.94,.94,1.01);
}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{font-size:62.5%;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--text-m);
  font-weight:400;
  line-height:1.6;
  color:var(--text-body);
  background:var(--bg-body);
  text-wrap:pretty;
}
h1,h2,h3,h4{color:var(--text-title);font-weight:600;line-height:1.2;margin:0 0 var(--space-s);text-wrap:balance;}
h1{font-size:var(--text-3xl);letter-spacing:-0.02em;}
h2{font-size:var(--text-2xl);letter-spacing:-0.015em;}
h3{font-size:var(--text-l);}
h4{font-size:var(--text-m);}
p{margin:0 0 var(--space-s);}
p:last-child{margin-bottom:0;}
a{color:var(--text-title);transition:var(--transition-base);}
a:hover{color:var(--primary);}
img{max-width:100%;height:auto;display:block;}
ul,ol{margin:0 0 var(--space-s);padding-left:2.2rem;}
li{margin-bottom:var(--space-3xs);}
strong{font-weight:600;color:var(--text-title);}
:focus-visible{outline:1px solid var(--primary);outline-offset:2px;}

/* ---------- Layout ---------- */
.container{max-width:var(--content-width);margin:0 auto;padding-left:var(--space-m);padding-right:var(--space-m);}
section{position:relative;}
.section{padding-top:var(--space-2xl);padding-bottom:var(--space-2xl);}
.section--surface{background:var(--bg-surface);}
.section--dark{background:var(--base);color:var(--text-light);}
.section--dark h2,.section--dark h3,.section--dark strong{color:var(--light);}
.section--dark p{color:var(--light-80);}

/* Eyebrow — Signatur aus der Design-Referenz: Label zwischen Schrägstrichen */
.eyebrow{
  display:block;
  font-size:var(--text-s);
  font-weight:600;
  letter-spacing:0.08em;
  color:var(--primary);
  margin-bottom:var(--space-2xs);
}
.section-header{max-width:76rem;margin-bottom:var(--space-l);}
.section-header--center{margin-left:auto;margin-right:auto;text-align:center;}
.section-header p{color:var(--text-body);}
.section--dark .section-header p{color:var(--light-80);}

/* ---------- Buttons — Pill, ein Primärstil, überall gleich ---------- */
.btn{
  display:inline-flex;align-items:center;gap:1rem;
  font-family:var(--font-body);font-size:var(--text-m);font-weight:600;
  padding:var(--space-xs) var(--space-m);
  border-radius:var(--radius-full);
  border:1px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:var(--transition-base);
}
.btn:hover{transform:var(--press-scale);}
.btn--primary{background:var(--primary);color:var(--light);}
.btn--primary:hover{background:var(--primary-hover);color:var(--light);}
.btn--outline{background:transparent;color:var(--text-title);border-color:var(--dark-20);}
.btn--outline:hover{border-color:var(--primary);color:var(--primary-d-3);}
.btn--light{background:var(--light);color:var(--base);}
.btn--light:hover{background:var(--primary-l-7);color:var(--base);}
.btn .btn__arrow{width:1.8rem;height:1.8rem;flex:none;}

/* Inline-Link mit Pfeil — Muster für interne Verweise (auch auf künftige Wissens-Artikel) */
.inline-link{font-weight:600;color:var(--primary-d-3);text-decoration:none;border-bottom:1px solid var(--primary-l-5);padding-bottom:0.2rem;}
.inline-link::after{content:" →";}
.inline-link:hover{color:var(--primary);border-color:var(--primary);}

/* ---------- Header ---------- */
.site-header{border-bottom:1px solid var(--dark-10);background:var(--bg-body);}
.site-header__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-m);padding-top:var(--space-s);padding-bottom:var(--space-s);}
.site-header__logo img{height:3.6rem;width:auto;}
.site-nav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-m);}
.site-nav a{font-size:var(--text-s);font-weight:600;text-decoration:none;color:var(--text-title);}
.site-nav a:hover{color:var(--primary);}
.site-nav a[aria-current="page"]{color:var(--primary);}
/* Sprachumschalter — Utility, bewusst leiser als die Hauptnavigation */
.lang-switch{display:flex;gap:0.6rem;align-items:center;font-size:var(--text-xs);}
.lang-switch a{text-decoration:none;color:var(--dark-60);font-weight:600;letter-spacing:.04em;padding:0.3rem 0.7rem;border-radius:var(--radius-xs);}
.lang-switch a:hover{color:var(--primary);}
.lang-switch a[aria-current="true"]{color:var(--text-title);background:var(--primary-l-7);}
.site-header .btn{font-size:var(--text-s);padding:var(--space-2xs) var(--space-s);}

/* Lauf 19: Marktvarianten. Entwurf zeigt den CH-Markt; der Build rendert je Domain genau eine Variante und entfernt die andere */
[data-market="eu"]{display:none;}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{padding-top:var(--space-s);}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:0.8rem;margin:0;padding:0;font-size:var(--text-xs);}
.breadcrumbs li{margin:0;display:flex;gap:0.8rem;color:var(--dark-60);}
.breadcrumbs li + li::before{content:"/";color:var(--primary-l-5);}
.breadcrumbs a{color:var(--dark-60);text-decoration:none;}
.breadcrumbs a:hover{color:var(--primary);}
.breadcrumbs [aria-current="page"]{color:var(--text-title);font-weight:600;}

/* ---------- Hero ---------- */
.hero{padding-top:var(--space-xl);padding-bottom:var(--space-2xl);overflow:hidden;}
.hero__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-xl);align-items:center;}
.hero h1{margin-bottom:var(--space-s);overflow-wrap:anywhere;}
.hero__lead{font-size:var(--text-l);line-height:1.5;max-width:58rem;}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-s);margin-top:var(--space-m);align-items:center;}
.hero__media img{border-radius:var(--radius-l);width:100%;object-fit:cover;}
.hero__note{font-size:var(--text-xs);color:var(--dark-60);margin-top:var(--space-2xs);}

/* Dekorative Eckform — als SVG, nie als Rasterbild */
.corner-shape{position:absolute;color:var(--primary-l-7);pointer-events:none;}
.corner-shape--tr{top:0;right:0;}
.corner-shape--bl{bottom:0;left:0;transform:rotate(180deg);}
.section--dark .corner-shape{color:var(--light-20);opacity:.35;}

/* ---------- Drei-Spalten-Vorteilsblock mit Linien-Icon ---------- */
.benefit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-m);}
.benefit{background:var(--bg-body);border:1px solid var(--dark-10);border-radius:var(--radius-m);padding:var(--space-m);}
.benefit__icon{display:block;width:4.4rem;height:4.4rem;color:var(--primary);margin-bottom:var(--space-s);}
.benefit__icon svg{width:100%;height:100%;}
.benefit h3{font-size:var(--text-m);margin-bottom:var(--space-3xs);}
.benefit p{font-size:var(--text-s);margin:0;}

/* ---------- Kennzahlen-Block (Kanonwerte: Label, Wert, Vergleichsbasis) ---------- */
.figure-band{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-m);}
.figure-block{border-left:1px solid var(--primary-l-5);padding-left:var(--space-s);}
.figure-block__label{font-size:var(--text-s);font-weight:600;color:var(--text-title);margin-bottom:0.4rem;}
.figure-block__value{font-size:var(--text-3xl);font-weight:600;color:var(--primary);line-height:1.05;}
.figure-block__basis{font-size:var(--text-xs);color:var(--dark-60);margin-top:0.6rem;}
.section--dark .figure-block{border-color:var(--light-20);}
.section--dark .figure-block__label{color:var(--light);}
.section--dark .figure-block__basis{color:var(--light-60);}

/* ---------- Wechselband Bild/Text ---------- */
.band{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-xl);align-items:center;}
.band + .band{margin-top:var(--space-2xl);}
.band--reverse .band__media{order:2;}
.band__media img{border-radius:var(--radius-l);width:100%;}
.band__content h2{font-size:var(--text-xl);}

/* ---------- Nummerierte Prozessschritte ---------- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-m);counter-reset:step;}
.step{counter-increment:step;border-top:1px solid var(--dark-10);padding-top:var(--space-s);}
.step::before{content:"0" counter(step);display:block;font-size:var(--text-xl);font-weight:600;color:var(--primary);margin-bottom:var(--space-2xs);}
.step h3{font-size:var(--text-m);margin-bottom:var(--space-3xs);}
.step p{font-size:var(--text-s);margin:0;}

/* ---------- Einstiegs-Karten ---------- */
.entrances{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-m);}
.entrance{display:block;text-decoration:none;border:1px solid var(--dark-10);border-radius:var(--radius-l);padding:var(--space-l);background:var(--bg-body);transition:var(--transition-base);}
.entrance:hover{border-color:var(--primary);box-shadow:var(--shadow-m);}
.entrance--primary{grid-column:1 / -1;background:var(--primary-l-7);border-color:var(--primary-l-5);}
.entrance .eyebrow{margin-bottom:var(--space-3xs);}
.entrance h3{margin-bottom:var(--space-3xs);}
.entrance p{margin-bottom:var(--space-s);}
.entrance__cta{font-weight:600;color:var(--primary-d-3);}
.entrance__cta::after{content:" →";}

/* ---------- Spezifikationsblock (sichtbare, beschriftete Werte) ---------- */
.product-specs{background:var(--bg-surface);border:1px solid var(--primary-l-6);border-radius:var(--radius-l);padding:var(--space-l);}
.product-specs dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:var(--space-m);margin:0;}
.product-specs dt{font-size:var(--text-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--dark-60);margin-bottom:0.4rem;}
.product-specs dd{margin:0;font-size:var(--text-xl);font-weight:600;color:var(--text-title);}
.product-specs dd small{display:block;font-size:var(--text-xs);font-weight:400;color:var(--dark-60);margin-top:0.4rem;}

/* ---------- Vergleichstabelle ---------- */
.comparison-table{width:100%;border-collapse:collapse;font-size:var(--text-s);background:var(--bg-body);border:1px solid var(--dark-10);border-radius:var(--radius-m);overflow:hidden;}
.comparison-table caption{caption-side:bottom;text-align:left;font-size:var(--text-xs);color:var(--dark-60);padding-top:var(--space-2xs);}
.comparison-table th,.comparison-table td{text-align:left;padding:var(--space-xs) var(--space-s);border-bottom:1px solid var(--dark-10);vertical-align:top;}
.comparison-table thead th{background:var(--base);color:var(--light);font-weight:600;border-bottom:none;}
.comparison-table tbody th{font-weight:600;color:var(--text-title);width:32%;}
.comparison-table tbody tr:last-child th,.comparison-table tbody tr:last-child td{border-bottom:none;}
.comparison-table td.is-highlight{color:var(--primary-d-3);font-weight:600;}
.table-scroll{overflow-x:auto;}
#sondentyp h2,#passiv-kuehlen h2{overflow-wrap:anywhere;}

/* ---------- FAQ — <details open>, ohne JavaScript vollständig lesbar ---------- */
.faq{max-width:82rem;}
.faq details{border-bottom:1px solid var(--dark-10);padding:var(--space-s) 0;}
.faq summary{font-size:var(--text-m);font-weight:600;color:var(--text-title);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--space-s);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"–";color:var(--primary);font-weight:600;flex:none;}
.faq details:not([open]) summary::after{content:"+";}
.faq details p{margin-top:var(--space-2xs);font-size:var(--text-s);}

/* ---------- Karten: Referenzen & Artikel ---------- */
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-m);}
.card{border:1px solid var(--dark-10);border-radius:var(--radius-m);background:var(--bg-body);padding:var(--space-m);display:flex;flex-direction:column;gap:var(--space-2xs);}
.card__meta{font-size:var(--text-xs);color:var(--dark-60);letter-spacing:.04em;}
.card h3{font-size:var(--text-m);margin:0;}
.card h3 a{text-decoration:none;}
.card p{font-size:var(--text-s);margin:0;}
.card .inline-link{margin-top:auto;align-self:flex-start;font-size:var(--text-s);}

/* ---------- Preisbeispiel / Kostenblöcke ---------- */
.cost-blocks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-s);margin:var(--space-m) 0;}
.cost-block{border:1px solid var(--dark-10);border-radius:var(--radius-m);padding:var(--space-s) var(--space-m);}
.cost-block__label{font-size:var(--text-s);font-weight:600;color:var(--text-title);}
.cost-block__value{font-size:var(--text-l);font-weight:600;color:var(--primary-d-3);}
.cost-block__note{font-size:var(--text-xs);color:var(--dark-60);}
.source-note{font-size:var(--text-xs);color:var(--dark-60);border-left:2px solid var(--primary-l-5);padding-left:var(--space-s);margin:var(--space-s) 0;}
.revision-note{display:inline-block;font-size:var(--text-xs);color:var(--dark-60);background:var(--primary-l-7);border-radius:var(--radius-xs);padding:0.4rem 1rem;margin-top:var(--space-2xs);}

/* ---------- CTA-Band ---------- */
.cta-band{background:var(--base);border-radius:var(--radius-l);padding:var(--space-xl);text-align:center;position:relative;overflow:hidden;}
.cta-band h2{color:var(--light);}
.cta-band p{color:var(--light-80);max-width:64rem;margin-left:auto;margin-right:auto;}
.cta-band .btn{margin-top:var(--space-s);}

/* Rechner-Button: startet die Anwendung — bewusst als Handlung gestaltet */
.btn--calculator{background:var(--primary);color:var(--light);font-size:var(--text-m);padding:var(--space-s) var(--space-l);box-shadow:var(--shadow-m);}
.btn--calculator:hover{background:var(--primary-hover);color:var(--light);}
.calculator-hint{font-size:var(--text-xs);color:var(--dark-60);margin-top:var(--space-3xs);}

/* ---------- Footer ---------- */
.site-footer{background:var(--base);color:var(--text-light);margin-top:var(--space-3xl);}
.site-footer a{color:var(--light-80);text-decoration:none;}
.site-footer a:hover{color:var(--light);}
.site-footer__inner{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--space-l);padding-top:var(--space-xl);padding-bottom:var(--space-xl);}
.site-footer__logo img{height:3.2rem;width:auto;margin-bottom:var(--space-s);}
.site-footer h4{color:var(--light);font-size:var(--text-s);margin-bottom:var(--space-2xs);}
.site-footer address{font-style:normal;font-size:var(--text-s);color:var(--light-80);line-height:1.7;}
.site-footer ul{list-style:none;margin:0;padding:0;font-size:var(--text-s);}
.site-footer li{margin-bottom:var(--space-3xs);}
.site-footer__legal{border-top:1px solid var(--light-20);padding-top:var(--space-s);padding-bottom:var(--space-s);font-size:var(--text-xs);color:var(--light-60);display:flex;flex-wrap:wrap;gap:var(--space-s);justify-content:space-between;}

/* ---------- Responsiv ---------- */
@media (max-width:960px){
  .hero__grid,.band,.entrances{grid-template-columns:1fr;}
  .band--reverse .band__media{order:0;}
  .figure-band,.product-specs dl{grid-template-columns:repeat(2,minmax(0,1fr));}
  .benefit-grid,.steps,.card-grid{grid-template-columns:1fr;}
  .site-footer__inner{grid-template-columns:1fr 1fr;}
  .entrance--primary{grid-column:auto;}
}
@media (max-width:560px){
  .form{grid-template-columns:1fr;}
  .figure-band,.product-specs dl,.cost-blocks,.site-footer__inner{grid-template-columns:1fr;}
  .site-header__inner{flex-wrap:wrap;}
}

/* ---------- Lauf 2: Wissens-Hub & Artikel ---------- */
.article-meta{display:flex;flex-wrap:wrap;gap:var(--space-s);font-size:var(--text-xs);color:var(--dark-60);margin-top:var(--space-s);}
.article-meta strong{font-weight:600;color:var(--text-title);}
.article-lead{max-width:76rem;}
.article-body{max-width:76rem;}
.article-body h2{font-size:var(--text-xl);margin-top:var(--space-xl);}
.article-body h2:first-child{margin-top:0;}
.article-body h3{margin-top:var(--space-l);}
.article-body figure{margin:0 0 var(--space-l);}
.article-body figure img{border-radius:var(--radius-l);}
.article-body figcaption{font-size:var(--text-xs);color:var(--dark-60);margin-top:var(--space-2xs);}
.lead-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-m);}
.card--lead{padding:var(--space-l);background:var(--primary-l-7);border-color:var(--primary-l-5);}
.card--lead h3{font-size:var(--text-l);}
.group-head{font-size:var(--text-l);margin:var(--space-l) 0 var(--space-s);padding-top:var(--space-s);border-top:1px solid var(--dark-10);}
.group-head__count{font-size:var(--text-s);font-weight:400;color:var(--dark-60);}

/* ---------- Lauf 2: Katalog ---------- */
.price-note{display:inline-block;font-size:var(--text-xs);color:var(--dark-60);background:var(--bg-surface);border:1px solid var(--primary-l-6);border-radius:var(--radius-xs);padding:0.6rem 1.2rem;margin-top:var(--space-s);}
.type-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(28rem,1fr));gap:var(--space-m);}
.type-card{display:block;text-decoration:none;border:1px solid var(--dark-10);border-radius:var(--radius-m);background:var(--bg-body);padding:var(--space-m);transition:var(--transition-base);}
.type-card:hover{border-color:var(--primary);box-shadow:var(--shadow-m);}
.type-card img{border-radius:var(--radius-s);margin-bottom:var(--space-s);}
.type-card h3{font-size:var(--text-m);margin-bottom:var(--space-3xs);}
.type-card p{font-size:var(--text-s);margin:0;}
.type-card__count{font-size:var(--text-xs);color:var(--dark-60);margin-top:var(--space-2xs);}
.family{border-top:1px solid var(--dark-20);}
.family>summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-s);padding:var(--space-s) 0;}
.family>summary::-webkit-details-marker{display:none;}
.family>summary::after{content:"+";font-size:var(--text-l);font-weight:600;color:var(--primary);margin-left:auto;}
.family[open]>summary::after{content:"–";}
.family__name{font-size:var(--text-l);font-weight:600;color:var(--text-title);margin:0;}
.family__meta{font-size:var(--text-xs);color:var(--dark-60);}
.article-rows{margin:0 0 var(--space-s);}
.article-row{display:grid;grid-template-columns:14rem minmax(0,1fr) auto;gap:var(--space-s);padding:var(--space-s) 0;border-top:1px solid var(--dark-10);}
.article-row__num{font-size:var(--text-xs);color:var(--dark-60);margin:0;}
.article-row__name{font-size:var(--text-s);font-weight:600;color:var(--text-title);margin:0;overflow-wrap:anywhere;}
.article-row__spec{margin:var(--space-3xs) 0 0;padding-left:1.8rem;font-size:var(--text-xs);}
.article-row__spec li{margin-bottom:0.2rem;}
.article-row__price{font-size:var(--text-s);font-weight:600;color:var(--text-title);margin:0;text-align:right;white-space:nowrap;}
.article-row__price small{display:block;font-size:var(--text-xs);font-weight:400;color:var(--dark-60);}
.stock{display:inline-block;font-size:var(--text-xs);color:var(--success);}
.stock::before{content:"";display:inline-block;width:0.7rem;height:0.7rem;border-radius:50%;background:var(--success);margin-right:0.5rem;}
.stock--out{color:var(--error);}
.stock--out::before{background:var(--error);}
.option-list{list-style:none;margin:var(--space-2xs) 0 0;padding:0;}
.option{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2xs) var(--space-s);font-size:var(--text-xs);padding:0.6rem 0 0.6rem var(--space-s);border-top:1px dashed var(--dark-10);}
.option__name{font-weight:600;color:var(--text-title);}
.option__price{font-weight:600;color:var(--primary-d-3);margin-left:auto;white-space:nowrap;}
.chip{display:inline-block;font-size:var(--text-xs);font-weight:600;border-radius:var(--radius-xs);padding:0.2rem 0.9rem;background:var(--primary-l-7);color:var(--primary-d-3);}
.chip--crosstype{background:var(--bg-surface);border:1px solid var(--primary-l-5);}
.expand{margin:var(--space-s) 0;}
.expand>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:0.8rem;font-size:var(--text-s);font-weight:600;color:var(--primary-d-3);border-bottom:1px solid var(--primary-l-5);padding-bottom:0.2rem;}
.expand>summary::-webkit-details-marker{display:none;}
.expand>summary::after{content:"+";color:var(--primary);}
.expand[open]>summary::after{content:"–";}
/* ---------- Lauf 2, Nachtrag: Katalogtabelle — verwendet NUR auf katalog-verteilersysteme.html (Familienvergleich); alle anderen Typseiten behalten .article-row ---------- */
.catalog-table{width:100%;border-collapse:collapse;font-size:var(--text-s);}
.catalog-table th,.catalog-table td{text-align:left;padding:var(--space-xs) var(--space-s) var(--space-xs) 0;border-top:1px solid var(--dark-10);vertical-align:top;}
.catalog-table thead th{font-size:var(--text-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--dark-60);border-top:none;padding-top:0;}
.catalog-table__num{font-size:var(--text-xs);color:var(--dark-60);white-space:nowrap;}
.catalog-table__name{font-weight:600;color:var(--text-title);overflow-wrap:anywhere;}
.catalog-table .article-row__spec{margin:0;}
.catalog-table__price{font-weight:600;color:var(--text-title);text-align:right;white-space:nowrap;}
.catalog-table__empty{color:var(--dark-20);}
.catalog-table__options>td{padding:0 0 var(--space-2xs);border-top:none;}
.catalog-table__options .option-list{margin-top:0;}

/* ---------- Lauf 3: Formulare, Galerie, Partner-Anker, Rechtstexte ---------- */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-s) var(--space-m);}
.form__field{display:flex;flex-direction:column;gap:0.6rem;}
.form__field--full{grid-column:1 / -1;}
.form label{font-size:var(--text-s);font-weight:600;color:var(--text-title);}
.form label small{font-weight:400;color:var(--dark-60);}
.form input,.form select,.form textarea{font-family:var(--font-body);font-size:var(--text-s);color:var(--text-title);background:var(--bg-body);border:1px solid var(--dark-20);border-radius:var(--radius-s);padding:var(--space-2xs) var(--space-xs);width:100%;transition:var(--transition-base);}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--primary);outline:none;}
.form textarea{min-height:14rem;resize:vertical;}
.form__hint{font-size:var(--text-xs);color:var(--dark-60);margin:0;}
.contact-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;}
.form__status{min-height:2.6rem;margin:0;}
.form__status--success{color:var(--primary-d-3);font-weight:600;}
.form__status--error{color:var(--error);font-weight:600;}
.form button[disabled]{cursor:wait;opacity:.7;}
.form .btn{justify-self:start;margin-top:var(--space-2xs);}
@media (max-width:640px){.form{grid-template-columns:1fr;}.form__field--full{grid-column:auto;}}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(24rem,1fr));gap:var(--space-s);}
.gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;border-radius:var(--radius-m);}
.gallery--single{grid-template-columns:minmax(0,1fr);}
.gallery--single img{aspect-ratio:16/9;}
.card[id]{scroll-margin-top:var(--space-l);}
.legal-body{max-width:72rem;line-height:1.75;}
.legal-body h2{font-size:var(--text-l);margin-top:var(--space-xl);}
.legal-body h3{font-size:var(--text-m);margin-top:var(--space-l);}

@media (max-width:760px){
  .article-row{grid-template-columns:1fr;gap:var(--space-3xs);}
  .article-row__price{text-align:left;}
  .lead-cards{grid-template-columns:1fr;}
}

/* Locale navigation and clearly marked translation fallbacks. */
.language-switcher{position:relative;font-size:var(--text-s);z-index:30}.language-switcher__trigger{display:flex;align-items:center;gap:.35rem;border:0;border-radius:var(--radius-s);background:transparent;color:var(--dark-60);min-width:4.4rem;min-height:4.4rem;padding:.35rem .55rem;font:inherit;font-weight:600;cursor:pointer;transition:var(--transition-base)}.language-switcher__trigger:hover,.language-switcher__trigger:focus-visible{background:var(--primary-l-7);color:var(--primary-d-3);outline:none}.language-switcher__chevron{display:block;width:.75rem;height:.5rem;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;transform-origin:center;transition:transform .2s ease}.language-switcher.is-open .language-switcher__chevron{transform:rotate(180deg)}.language-switcher__menu{position:absolute;right:0;top:calc(100% + .35rem);min-width:14rem;padding:.5rem;background:var(--bg-body);border:1px solid var(--dark-10);border-radius:var(--radius-m);box-shadow:var(--shadow-m)}.language-switcher__menu[hidden]{display:none}.language-switcher__option{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1rem;border-radius:var(--radius-s);color:var(--text-title);text-decoration:none;font-weight:400}.language-switcher__option:hover,.language-switcher__option:focus-visible,.language-switcher__option.is-active{background:var(--primary-l-7);color:var(--primary-d-3)}.language-switcher__check{color:var(--primary-d-3);font-weight:700}.error-page{max-width:72rem;margin:10vh auto;padding:var(--space-l)}
@media(max-width:560px){.language-switcher__menu{position:fixed;left:1rem;right:1rem;top:5.5rem;min-width:0;max-height:calc(100vh - 7rem);overflow:auto}}

/* ============================================================
   Selbst gehostete Poppins (Lauf 6, Punkt 8) — ersetzt Google Fonts.
   Dateien liegen im Designsystem-Paket unter _ds/…/assets/fonts/.
   ============================================================ */
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url('_ds/separatus-design-system-402fe8ed-ebb7-422e-bc11-c0c487757d8c/assets/fonts/poppins-300.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('_ds/separatus-design-system-402fe8ed-ebb7-422e-bc11-c0c487757d8c/assets/fonts/poppins-400.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('_ds/separatus-design-system-402fe8ed-ebb7-422e-bc11-c0c487757d8c/assets/fonts/poppins-500.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('_ds/separatus-design-system-402fe8ed-ebb7-422e-bc11-c0c487757d8c/assets/fonts/poppins-600.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('_ds/separatus-design-system-402fe8ed-ebb7-422e-bc11-c0c487757d8c/assets/fonts/poppins-700.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:italic;font-weight:400;font-display:swap;src:url('_ds/separatus-design-system-402fe8ed-ebb7-422e-bc11-c0c487757d8c/assets/fonts/poppins-italic-400.woff2') format('woff2');}