/* ============================================================
   Marken-Schriften — lokal eingebunden (SIL OFL), kein Google-Abruf
   ============================================================ */
@font-face{
  font-family:'Bitter'; font-style:normal; font-weight:400;
  font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  src:url(fonts/bitter-400.woff2) format('woff2');
}
@font-face{
  font-family:'Bitter'; font-style:normal; font-weight:700;
  font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  src:url(fonts/bitter-700.woff2) format('woff2');
}
@font-face{
  font-family:'Bitter'; font-style:normal; font-weight:800;
  font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  src:url(fonts/bitter-800.woff2) format('woff2');
}
@font-face{
  font-family:'Caveat'; font-style:normal; font-weight:600;
  font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  src:url(fonts/caveat-600.woff2) format('woff2');
}
@font-face{
  font-family:'Source Sans 3'; font-style:normal; font-weight:400;
  font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  src:url(fonts/sourcesans3-400.woff2) format('woff2');
}
@font-face{
  font-family:'Source Sans 3'; font-style:normal; font-weight:500;
  font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  src:url(fonts/sourcesans3-500.woff2) format('woff2');
}
@font-face{
  font-family:'Source Sans 3'; font-style:normal; font-weight:600;
  font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  src:url(fonts/sourcesans3-600.woff2) format('woff2');
}
@font-face{
  font-family:'Source Sans 3'; font-style:normal; font-weight:700;
  font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  src:url(fonts/sourcesans3-700.woff2) format('woff2');
}

/* ============================================================
   Comté im Wandel der Zeit — B2B-Aktionsseite
   Design-Tokens & Komponenten gemäß „Bartke Styleguide" (CD-Handoff 07/2026)
   ============================================================ */

:root{
  /* Klammer — Marke & UI */
  --graublau:#424F5C;
  --hellblau:#5389B9;
  --preisblau:#3F6491;
  /* Gruppenfarben */
  --gruppe-kaese:#EEA842;
  --gruppe-wein:#D7432C;
  --gruppe-wurst:#A93148;
  --gruppe-antipasti:#6A5476;
  --gruppe-service:#5389B9;
  /* Akzent */
  --salbei:#7C8B6F;          /* Markenfläche, nicht hinter kleiner Schrift */
  --salbei-dunkel:#5C6B51;
  --ocker-text:#87621F;      /* Styleguide 08 · AA */
  /* Neutrale */
  /* Flächen-Hierarchie laut Styleguide (hell → zurückgesetzt).
     Die Seite ruht auf der Seitenfläche, Karten heben sich heller ab,
     der Well-Ton markiert bewusst eingesenkte Bereiche — nie den Seitenhintergrund. */
  --papier:#FBF8F1;   /* Karte / Fläche */
  --panel:#F4EEE2;    /* Seitenfläche · Haupt-BG */
  --well:#E9E2D2;     /* zurückgesetzt */
  --bild-sand:#F1E8D8;
  --kartenrand:#EBE2CC;
  --kartenrand-stark:#E2D5B8;   /* Kartenkante — trägt auch auf heller Fläche */
  --text-head:#424F5C;
  --text-body:#5a5246;
  --text-sek:#6F6349;        /* Styleguide 08 · AA (alt #8a7d68 nur ab 16 px) */
  --text-altpreis:#a09377;
  --weiss:#FBFBF7;
  /* Typo */
  --font-head:'Bitter', Georgia, 'Times New Roman', serif;
  --font-text:'Source Sans 3', 'Source Sans Pro', -apple-system, 'Segoe UI', sans-serif;
  --font-hand:'Caveat', cursive;
  /* Schatten */
  --shadow-karte:0 10px 28px -18px rgba(40,49,64,.30);
  --shadow-hero:0 14px 40px -22px rgba(40,49,64,.35);
  --shadow-produkt:0 2px 9px -3px rgba(40,34,24,.16), 0 1px 2px rgba(40,34,24,.05);
}

/* Die Seite ist bewusst einfarbig hell (Markenwelt) — kein Dunkelmodus.
   Verhindert, dass eine Betrachter-Umgebung mit Dark Theme den Untergrund umfärbt. */
:root{color-scheme:only light;}
html{background:var(--panel);}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--panel);
  color:var(--text-body);
  font-family:var(--font-text);
  font-size:15px;
  line-height:1.6;
}
img{max-width:100%; display:block;}
a{color:var(--preisblau);}

h1,h2,h3,h4{font-family:var(--font-head); color:var(--text-head); line-height:1.2;}
h1{font-size:clamp(30px,4.5vw,44px); font-weight:800; letter-spacing:-.015em;}
h2{font-size:clamp(22px,3vw,28px); font-weight:700;}
h3{font-size:18px; font-weight:700;}

.eyebrow{
  font-family:var(--font-text); font-weight:600; font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ocker-text);
}
.eyebrow--kaese{color:var(--ocker-text);}
.hand{
  font-family:var(--font-hand); font-weight:600; color:var(--gruppe-wurst);
  font-size:clamp(20px,2.6vw,26px); line-height:1.2;
}

.container{max-width:1360px; margin:0 auto; padding:0 34px;}
.container--text{max-width:980px;}
section{padding:60px 0;}

/* ---------- B2B-Band ---------- */
/* Utility-Band: heller Graublau-Ton statt Well-Sand. Graublau ist im CD die
   technisch-neutrale Farbe (Navigation, Footer, Schrittzahlen) und passt damit
   zur Aussage „Arbeitsunterlage". Hell genug, um nicht zu dominieren — der Ton
   ist sogar heller als der bisherige Sand, wirkt aber durch den kühlen Stich
   als eigene Ebene über der warmen Seitenfläche. */
.b2b-band{
  background:#E4EAEF; color:#42505F; text-align:center;
  font-size:12px; padding:9px 12px; border-bottom:1px solid #D2DCE4;
}
.b2b-band strong{color:#33404E; font-weight:600;}

/* ---------- Navigation ---------- */
.nav{
  background:var(--papier); border-bottom:1px solid var(--kartenrand);
  position:sticky; top:0; z-index:50;
}
.nav__inner{display:flex; align-items:center; gap:26px; padding:14px 34px; max-width:1360px; margin:0 auto;}
.nav__logo img{width:150px; height:auto;}
.nav__links{display:flex; gap:22px; margin-left:auto; flex-wrap:wrap;}
.nav__links a{
  font-size:13px; font-weight:500; color:var(--graublau); text-decoration:none;
}
.nav__links a:hover{color:var(--preisblau);}
.nav__cta{
  background:var(--preisblau); color:var(--papier)!important; font-weight:600; font-size:13px;
  padding:9px 16px; border-radius:4px; text-decoration:none; white-space:nowrap;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; font-family:var(--font-text); font-weight:600; font-size:14px;
  padding:13px 22px; border-radius:4px; text-decoration:none; cursor:pointer; border:0;
}
/* muss nach .btn stehen: sonst gewinnt display:inline-block gegen das hidden-Attribut */
[hidden]{display:none!important;}
.btn--primaer{background:var(--preisblau); color:var(--papier);}
.btn--primaer:hover{background:#35577e;}
.btn--sekundaer{
  background:transparent; color:var(--preisblau);
  box-shadow:inset 0 0 0 1.5px var(--preisblau);
}
.btn--konversion{background:var(--gruppe-wurst); color:var(--panel); font-size:13px;}

/* ---------- Badges ---------- */
.badge{
  display:inline-block; font-weight:700; font-size:11px; letter-spacing:.08em;
  border-radius:3px; padding:6px 11px; text-transform:uppercase;
}
.badge--bio{background:var(--salbei-dunkel); color:var(--panel);}
.badge--aktion{background:var(--gruppe-wurst); color:var(--panel);}
.badge--stufe{background:var(--gruppe-kaese); color:#523A0E; letter-spacing:.05em;}

/* ---------- Platzhalter ---------- */
.ph{
  background:#FCF3E1; border:1px dashed var(--gruppe-kaese); color:#86631F;
  padding:1px 7px; border-radius:3px; font-size:.92em; white-space:normal;
}
.ph::before{content:"✎ "; font-size:.9em;}

/* ---------- Hero ---------- */
.hero{padding:56px 0 46px;}
.hero__grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:40px; align-items:center;}
.hero__sub{font-size:17px; margin:16px 0 6px; max-width:56ch;}
/* Vier Merkmale als 2×2-Block. Als Flex-Zeile brachen sie je nach Textlänge
   3+1 um — ein Rest, der aussieht wie ein Versehen. Das feste Raster stellt
   sie immer als geschlossenen Block; die Beschriftungen stehen dabei auf einer
   gemeinsamen linken Kante, weil das Häkchen ein eigenes Kästchen bekommt. */
.hero__checks{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px 26px; margin:22px 0 26px; font-size:14px; color:var(--text-body);
  max-width:520px;
}
.hero__checks span{display:flex; align-items:flex-start; gap:9px; line-height:1.45;}
.hero__checks span::before{
  content:"✓"; flex:none; width:19px; height:19px; margin-top:1px;
  border-radius:50%; background:rgba(124,139,111,.17); color:#4F5C45;
  font-size:11.5px; font-weight:700; line-height:19px; text-align:center;
}
.hero__cta{display:flex; gap:14px; flex-wrap:wrap; align-items:center;}
.hero__img{
  border-radius:8px; box-shadow:var(--shadow-hero); overflow:hidden; background:var(--bild-sand);
}
.hero h1{margin-top:12px;}

/* ---------- Zeitachse (Hero-Strip + Sektion) ---------- */
.timeline{margin:46px 0 0; background:var(--well); border-radius:8px; padding:24px 20px 20px;}
.timeline__track{
  display:grid; grid-template-columns:repeat(4,1fr); position:relative; gap:12px;
}
.timeline__track::before{
  /* Achse auf Standlinie der Käse = Mitte der Monats-Ellipse */
  content:""; position:absolute; top:130px; left:12%; right:12%;
  border-top:2px solid #D6CBB2;
}
.timeline__step{text-align:center; position:relative;}
/* Bühne: die freigestellten Käse stehen auf der Achse, die Monatsangabe sitzt davor am Fuß.
   Die Bilder tragen unter dem Käsefuß exakt 10 px Schatten — daher bottom:-10px. */
.timeline__buehne{position:relative; height:130px; margin-bottom:40px;}
.timeline__foto{
  position:absolute; left:50%; bottom:-10px; transform:translateX(-50%);
  max-width:100%; height:auto;
}
.timeline__dot{
  width:52px; height:56px; /* Ellipse: ~7 % höher als breit */
  border-radius:50%; background:var(--gruppe-kaese); color:#3D2A0B;
  font-family:var(--font-head); font-weight:800; font-size:14px;
  display:flex; align-items:center; justify-content:center;
  position:absolute; left:50%; bottom:-28px; transform:translateX(-50%); z-index:2;
  box-shadow:0 2px 10px -3px rgba(40,34,24,.4), 0 0 0 3px var(--well);
}
.timeline__step--3 .timeline__dot{background:#D89230;}
.timeline__step--4 .timeline__dot{background:#D08A2A;}
.timeline__label{font-size:13px; font-weight:600; color:var(--text-head);}
.timeline__meta{font-size:12px; color:var(--text-body);}  /* auf Well-Fläche — Sekundärton wäre zu schwach */

/* ---------- Sektionen / Karten ---------- */
/* Abgesetzte Sektionen werden HELLER als die Seitenfläche, nicht dunkler —
   so bleibt der Rhythmus erhalten, ohne die Seite wieder abzudunkeln.
   Die Haarlinie macht auch den feinen Tonschritt eindeutig lesbar. */
.section--hell{
  background:var(--papier);
  border-top:1px solid var(--kartenrand);
  border-bottom:1px solid var(--kartenrand);
}
.section-head{margin-bottom:30px;}
.section-head h2{margin-top:8px;}
.section-head p{max-width:72ch; margin-top:10px;}

.karte{
  background:var(--papier); border:1px solid var(--kartenrand-stark); border-radius:8px;
  box-shadow:var(--shadow-produkt);
}

/* Angebot in 30 Sekunden */
/* Angebot in 30 Sekunden — sechs Kacheln, aber nicht sechs gleichrangige.
   Vorher schwebte in jeder ein 24-px-Icon allein in der Ecke und alle sechs
   sahen gleich aus: „Das ist drin" wog optisch so viel wie „Technischer
   Support". Jetzt trennen zwei Reihenüberschriften das Angebot von allem
   Drumherum — dieselbe Machart wie die Spaltenköpfe im Downloadbereich —,
   und das Icon sitzt in einer getönten Kachel neben der Überschrift, warm
   für das Angebot, kühl für den Service. */
.angebot-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px 20px;
  grid-auto-rows:min-content;
}
.angebot-reihenkopf{
  grid-column:1/-1; margin-top:6px;
  font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-sek);
}
.angebot-reihenkopf:first-child{margin-top:0;}
.angebot-kachel{padding:18px 20px 20px; display:flex; flex-direction:column; gap:9px;}
.angebot-kachel__kopf{display:flex; align-items:center; gap:13px;}
.angebot-kachel__marke{
  flex:none; width:42px; height:42px; border-radius:11px;
  display:grid; place-items:center;
  background:rgba(238,168,66,.20); color:#8A5B14;
}
.angebot-kachel__marke .icon{width:25px; height:25px;}
.angebot-kachel h3{font-size:15.5px; line-height:1.3;}
.angebot-kachel p{font-size:13.5px; color:var(--text-body);}
/* zweite Reihe: Service statt Ware — kühl getönt */
.angebot-kachel--service .angebot-kachel__marke{
  background:rgba(63,100,145,.13); color:var(--preisblau);
}

/* Produktkarten */
.produkte{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; align-items:stretch;}
.produkt{display:flex; flex-direction:column; overflow:hidden;}
.produkt__bild{position:relative; background:var(--bild-sand);}
.produkt__bild img{aspect-ratio:4/3; object-fit:cover; width:100%;}
.produkt__bild .badge--bio{position:absolute; top:10px; left:10px;}
.produkt__bild .badge--stufe{position:absolute; top:10px; right:10px;}
.produkt__body{padding:18px 20px 20px; display:flex; flex-direction:column; gap:10px; flex:1;}
.produkt__body h3{font-size:17px;}
.produkt__meta{font-size:12.5px; color:var(--text-sek);}
.produkt__sensorik{font-size:13.5px;}
/* Der ganze Kartenfuß hängt unten, nicht nur die Linkzeile. Vorher richtete
   sich nur `.produkt__links` unten aus, die Pflichtangaben darüber schwammen
   mit der Textlänge — bei vier nebeneinanderliegenden Karten standen sie um bis
   zu 21 px versetzt, weil eine Überschrift umbricht und die Sensorikzeilen
   unterschiedlich lang sind. Jetzt entsteht die Luft über der Sensorikzeile
   statt darunter, und Pflichtangaben, Produktblatt und Fotozeile liegen in
   allen vier Karten auf einer Linie. */
.produkt__links{display:flex; flex-direction:column; gap:6px; font-size:13px;}
.produkt details{margin-top:auto; font-size:12.5px; border-top:1px solid var(--kartenrand); padding-top:10px;}
.produkt details summary{cursor:pointer; font-weight:600; color:var(--graublau);}
.produkt details p{margin-top:8px; color:var(--text-body);}

/* Meta-Zeile mit Icon */
.meta-icon{display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; color:var(--text-body);}
.meta-icon .icon{width:22px; height:22px; color:var(--graublau); flex:none;}

/* Verkostung */
.verkostung-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:26px; align-items:start;}
.schritte{counter-reset:schritt; display:flex; flex-direction:column; gap:14px;}
.schritt{display:flex; gap:14px; align-items:flex-start;}
.schritt::before{
  counter-increment:schritt; content:counter(schritt);
  width:30px; height:32px; flex:none; border-radius:50%;
  background:var(--graublau); color:var(--weiss);
  font-family:var(--font-head); font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center;
}
.schritt strong{color:var(--text-head);}

table.vk{
  width:100%; border-collapse:collapse; font-size:12.5px; background:var(--papier);
}
table.vk th, table.vk td{
  border:1px solid var(--kartenrand); padding:8px 9px; text-align:left; vertical-align:top;
}
table.vk th{background:var(--well); font-family:var(--font-text); font-weight:600; color:var(--text-head); font-size:12px;}
table.vk td em{color:var(--text-sek); font-size:11.5px;}
table.vk td{height:34px;}
.table-scroll{overflow-x:auto; border-radius:8px; border:1px solid var(--kartenrand); box-shadow:var(--shadow-produkt);}

/* Wissen / Comté */
.wissen-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:start;}
.wissen-fakten{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.fakt{padding:16px 18px;}
.fakt .zahl{font-family:var(--font-head); font-weight:800; font-size:26px; color:var(--preisblau);}
.fakt .lab{font-size:12.5px; color:var(--text-sek);}
details.mehr{margin-top:18px;}
details.mehr summary{
  cursor:pointer; font-weight:600; color:var(--preisblau); font-size:14px;
}
details.mehr[open] summary{margin-bottom:10px;}

/* Affineure */
.affineure{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
/* Beide Häuser haben unterschiedlich lange Fließtexte. Karte und Body sind
   deshalb Flex-Spalten, die Galerie bekommt margin-top:auto — so sitzen die
   vier kleinen Bilder in beiden Karten auf derselben Höhe und enden bündig. */
.affineur{overflow:hidden; display:flex; flex-direction:column;}
.affineur__hero{margin:0; position:relative;}
.affineur__hero img{aspect-ratio:16/9; object-fit:cover; width:100%; display:block; background:var(--bild-sand);}
.affineur__hero figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:22px 16px 10px;
  font-size:12px; color:#FBFBF7;
  background:linear-gradient(rgba(30,36,44,0), rgba(30,36,44,.82));
}
.affineur__body{padding:22px 24px; display:flex; flex-direction:column; flex:1;}
.affineur__body h3{font-size:19px; margin-bottom:2px;}
.affineur__body .sub{font-size:12.5px; color:var(--text-sek); margin-bottom:12px;}
.affineur__body p{font-size:14px; margin-bottom:10px;}
.affineur__galerie{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
  margin:auto 0 12px;   /* auto oben: schiebt die Galerie an den Kartenfuß */
}
.affineur__galerie a{
  display:block; text-decoration:none; border:1px solid var(--kartenrand);
  border-radius:6px; overflow:hidden; background:var(--papier);
  transition:border-color .16s ease, transform .16s ease;
}
.affineur__galerie a:hover{border-color:var(--hellblau); transform:translateY(-2px);}
.affineur__galerie img{aspect-ratio:4/3; object-fit:cover; width:100%; display:block; background:#fff;}
.affineur__galerie span{
  display:block; padding:7px 10px; font-size:11.5px; line-height:1.35; color:var(--text-sek);
  min-height:45px;   /* Platz für zwei Zeilen — sonst wären die Kacheln ungleich hoch */
}
.bildcredit{font-size:11.5px!important; color:var(--text-sek); margin:0!important;}
/* zwei Zeilen reserviert: der Arnaud-Nachweis ist länger als der von Petite,
   ohne feste Höhe säßen die Galerien der beiden Karten unterschiedlich hoch */
.affineur .bildcredit{min-height:3.2em;}  /* 2 × Zeilenhöhe (1,6em) */

/* Textbibliothek */
.copy-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.copycard{display:flex; flex-direction:column;}
.copycard__head{
  display:flex; align-items:center; gap:10px; padding:14px 18px;
  border-bottom:1px solid var(--kartenrand);
}
.copycard__head h3{font-size:14.5px; flex:1;}
.copycard__head .len{font-size:11.5px; color:var(--text-sek); white-space:nowrap;}
/* Der Text selbst ist die Vorschau: was hier steht, wird 1:1 kopiert. */
.copycard__text{
  margin:0; flex:1; padding:15px 18px;
  font-family:'Source Sans 3','Source Sans Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:13.2px; line-height:1.62; color:var(--text-body);
  background:#FFFDF8; border-top:1px solid #F3EBDA;
  white-space:pre-wrap; overflow-wrap:anywhere;
  max-height:300px; overflow:hidden;
}
/* Der Schnitt bei 300 px trennt mitten in der Zeile — das sieht nach Fehler aus,
   nicht nach „hier geht es weiter". Ein weicher Auslauf über die letzten 22 %
   sagt dasselbe ohne den Fehlereindruck. Die Klasse setzt das Skript und zwar
   aus derselben Messung, die auch den Knopf einblendet: Auslauf und Knopf
   erscheinen immer gemeinsam. Browser ohne mask-image zeigen weiterhin die
   harte Kante — also den heutigen Stand, nichts bricht. */
.copycard.beschnitten:not(.offen) .copycard__text{
  -webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 78%,transparent 100%);
}
.copycard.offen .copycard__text{max-height:none;}
.copycard__foot{
  padding:12px 18px 14px; display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  border-top:1px solid var(--kartenrand); background:var(--well);
}
.copycard__meta{margin-left:auto; font-size:11.5px; color:var(--text-body); font-variant-numeric:tabular-nums;}
.btn--copy{
  background:var(--graublau); color:var(--weiss); font-size:13px; padding:9px 16px;
}
.btn--copy.ok{background:var(--salbei);}
.btn--mehr{
  background:transparent; color:var(--preisblau); font-size:12.5px; padding:8px 12px;
  box-shadow:inset 0 0 0 1.4px var(--preisblau);
}
.btn--mehr:hover{background:rgba(63,100,145,.07);}
.btn:focus-visible, .copycard__text:focus-visible, .affineur__galerie a:focus-visible{
  outline:2.5px solid var(--preisblau); outline-offset:2px;
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important; scroll-behavior:auto!important;}
}

/* Downloads */
.dl-hero{
  display:grid; grid-template-columns:1.2fr .8fr; gap:26px; padding:26px;
  align-items:center;
}
.dl-liste{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:18px;}
.dl-item{
  display:flex; gap:12px; align-items:center; padding:12px 14px; text-decoration:none;
}

/* Schnellstart */
.schnellstart{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.schnellstart .karte{padding:20px;}
.schnellstart .num{
  font-family:var(--font-head); font-weight:800; font-size:22px; color:var(--gruppe-kaese);
}

/* kbA-Band */
.kba-band{background:var(--salbei-dunkel); color:var(--panel); text-align:center; font-size:12px; padding:9px 14px;}

/* Footer */
.footer{background:var(--graublau); color:#9DB0C2; padding:30px 0;}
.footer__wortmarke{font-family:var(--font-head); font-weight:700; font-size:17px; color:var(--papier);}
.footer p{font-size:12.5px; margin-top:6px;}
.footer a{color:#CBD8E6;}
.footer p{color:#B4C4D3;}   /* Styleguide 08 · AA */

/* Hinweiskasten */
.hinweis{
  background:var(--well); border-left:4px solid var(--gruppe-kaese);
  padding:14px 18px; font-size:13.5px; border-radius:0 6px 6px 0; margin-top:18px;
}


/* ---------- B2B-Schärfung: Hero-Aktionszeile, Schnellstart oben, Mockup, Ebenen ---------- */
.hero__aktion{
  font-family:var(--font-head); font-weight:700; font-size:clamp(16px,2vw,20px);
  color:var(--text-head); margin-top:10px;
}
.schnellstart-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:34px; align-items:start;}
.schritte-mini{list-style:none; counter-reset:sm; display:flex; flex-direction:column; gap:16px;}
.schritte-mini li{display:flex; gap:14px; align-items:flex-start; font-size:14.5px;}
.schritte-mini li::before{
  counter-increment:sm; content:counter(sm);
  width:30px; height:32px; flex:none; border-radius:50%;
  background:var(--graublau); color:var(--weiss);
  font-family:var(--font-head); font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center;
}
.mockup{margin:0; border:1px solid var(--kartenrand-stark); border-radius:8px; background:var(--papier); box-shadow:var(--shadow-karte); overflow:hidden;}
.mockup__bar{display:flex; gap:5px; align-items:center; background:var(--well); border-bottom:1px solid var(--kartenrand); padding:8px 12px;}
.mockup__bar > span{width:9px; height:9px; border-radius:50%; background:#CFC5AC;}
.mockup__url{margin-left:8px; flex:1; text-align:center; background:var(--papier); border:1px solid var(--kartenrand); border-radius:20px; padding:3px 12px; font-size:11px; color:var(--text-sek);}
.mockup__body{padding:16px 18px 14px; background:#FFFFFF;}
.mockup__body img{width:118px; float:right; margin:0 0 8px 14px;}
.mockup__logo{display:inline-block; border:1.5px dashed var(--gruppe-kaese); color:var(--ocker-text); background:#FCF3E1; font-size:9px; font-weight:600; letter-spacing:.14em; padding:6px 10px; border-radius:4px; margin-bottom:12px;}
.mockup__titel{font-family:var(--font-head); font-weight:700; font-size:15px; color:var(--text-head); margin-bottom:6px;}
.mockup__body p{font-size:12px; line-height:1.55; color:var(--text-body);}
.mockup__row{display:flex; align-items:center; gap:14px; margin-top:14px; clear:none;}
.mockup__btn{background:#D9D9D4; color:#44443F; font-size:12px; font-weight:600; padding:8px 14px; border-radius:4px; cursor:default;}
.mockup figcaption{padding:9px 14px; font-size:11.5px; color:var(--text-sek); border-top:1px solid var(--kartenrand);}
/* Zwei Ebenen — die Sektion heißt so, also sollen die beiden Seiten auch
   verschieden aussehen. Vorher standen dort zwei gleiche blasse Karten mit
   zwei gleichen Listen; dass die eine dem Endkunden gehört und die andere der
   Kiste, stand nur im Kleingedruckten. Jetzt trägt jede Karte einen eigenen
   Kopf: die Endkundenseite warm im Sandton der Marke, die Handelsseite kühl im
   Graublau — dieselbe Farbe, die das B2B-Band ganz oben schon führt. Das Icon
   sitzt in einer Kachel statt frei in der Überschrift, damit es Halt hat. */
.zwei-ebenen{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start;}
.ebene{padding:0; overflow:hidden;}
.ebene__kopf{
  display:flex; align-items:center; gap:15px;
  padding:17px 22px; border-bottom:1px solid var(--kartenrand);
}
.ebene__marke{
  flex:none; width:48px; height:48px; border-radius:13px;
  display:grid; place-items:center;
}
.ebene__marke .icon{width:29px; height:29px;}
.ebene__titel .eyebrow{display:block; font-size:10px; margin-bottom:3px;}
.ebene__titel h3{font-size:18px; margin:0;}
.ebene ul{
  list-style:none; display:flex; flex-direction:column; gap:12px;
  font-size:14px; padding:19px 22px 22px;
}
.ebene li{display:flex; align-items:flex-start; gap:10px; line-height:1.5;}
.ebene li::before{
  content:"✓"; flex:none; width:19px; height:19px; margin-top:1px;
  border-radius:50%; font-size:11.5px; font-weight:700; line-height:19px; text-align:center;
}
/* Endkundenseite — grün. Das Kopfband trug zuerst den Sandton, also eine
   Farbe, die zu keiner der beiden Akzentfarben gehörte: rechts stimmten
   Band und Akzent überein (blau/blau), links nicht (sand/grün). Jetzt
   führt jede Seite ihre eigene Farbe durch.
   #E7EFDF ist nicht nach HSL zum Blauband gerechnet, sondern nach
   Leuchtdichte: bei gleichem HSL-L wirkt Grün heller (0,878 gegen 0,840),
   das Band hätte optisch leichter gewogen als das blaue. Bei gleicher
   Leuchtdichte ergeben sich sogar dieselben Kontrastwerte — Überschrift
   7,11:1, Eyebrow 4,69:1 auf beiden Seiten. Der Rahmen ist genauso
   abgeleitet (#D8E4CD ↔ #D8E1EA, beide 0,744).
   Das Grün der Häkchen ist etwas dunkler als --salbei-dunkel: sie stehen
   auf getönter Scheibe und sind nur 11,5 px groß, mit #5C6B51 kamen sie
   auf der Seitenfläche auf 4,19:1 statt der nötigen 4,5. */
.ebene--kunden .ebene__kopf{background:#E7EFDF; border-bottom-color:#D8E4CD;}
.ebene--kunden .ebene__marke{background:rgba(124,139,111,.20); color:var(--salbei-dunkel);}
.ebene--kunden li::before{background:rgba(124,139,111,.17); color:#4F5C45;}
/* Handelsseite — kühl, wie das B2B-Band */
.ebene--handel .ebene__kopf{background:#E7EDF3; border-bottom-color:#D8E1EA;}
.ebene--handel .ebene__marke{background:rgba(63,100,145,.15); color:var(--preisblau);}
.ebene--handel li::before{background:rgba(63,100,145,.14); color:var(--preisblau);}


/* ---------- Downloadbereich: kompakte Zeilen mit kleiner Vorschau ---------- */
.dl-anleitung{font-size:13.5px; color:var(--text-body); background:var(--well);
  border-radius:6px; padding:12px 16px; margin-top:22px;}
.dl-gruppe{margin-top:30px;}
.dl-kopf{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:3px;}
.dl-kopf h3{flex:1; min-width:200px; font-size:17px;}
.dl-werkzeuge{display:flex; align-items:center; gap:12px;}
.dl-alle{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--text-body); cursor:pointer;}
.dl-alle input{width:16px; height:16px; accent-color:var(--preisblau); cursor:pointer;}
.btn--sammel{background:var(--preisblau); color:var(--papier); font-size:12.5px; padding:8px 14px;}
.btn--sammel:disabled{opacity:.38; cursor:not-allowed;}
.dl-info{font-size:12.5px; color:var(--text-sek); max-width:80ch; margin-bottom:12px;}

.dl-liste{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:8px;}
/* Spaltenweise Downloadlisten: eine Spalte je Sachgruppe, darin die Varianten
   untereinander — bei den Produktbildern je Hintergrund-Art die vier Stufen
   jung → alt, bei den Endkundenblättern je Blatt seine Formate, bei den
   Kellerbildern je Affineurhaus seine Aufnahmen. grid-auto-flow:column füllt
   spaltenweise, die Reihenfolge im HTML ist deshalb Spalte für Spalte mit dem
   Spaltenkopf jeweils vorneweg. Weil alle Spalten dieselben Grid-Zeilen teilen,
   stehen die Kacheln über die Spalten hinweg auf einer Linie, auch wenn eine
   Beschreibung zweizeilig umbricht. Zeilen- und Spaltenzahl kommen von der
   Gruppe; die letzte Spalte darf kürzer sein, dort endet der Fluss einfach.
   Unter 1000 px kippt alles auf Zeilenfluss; da die Köpfe im HTML vor ihren
   Kacheln stehen, bleibt die Gliederung erhalten. */
.dl-liste--spalten{
  grid-auto-flow:column;
  grid-template-columns:repeat(var(--dl-spalten,4),minmax(0,1fr));
  grid-template-rows:auto repeat(var(--dl-zeilen,4),auto);
}
[data-gruppe="freigestellt"] .dl-liste--spalten{--dl-spalten:2; --dl-zeilen:4;}
[data-gruppe="affineure"] .dl-liste--spalten{--dl-spalten:2; --dl-zeilen:3;}
[data-gruppe="endkunde"] .dl-liste--spalten{--dl-spalten:3; --dl-zeilen:3;}
.dl-spaltenkopf{
  font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-sek); padding:0 0 3px 2px; align-self:end;
}
@media (max-width:1000px){
  .dl-liste--spalten{grid-auto-flow:row; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:none;}
  .dl-liste--spalten .dl-spaltenkopf{grid-column:1/-1; margin-top:10px;}
}
.dl-item{
  display:flex; align-items:center; gap:11px; padding:7px 11px 7px 9px;
  background:var(--papier); border:1px solid var(--kartenrand-stark); border-radius:6px;
  transition:border-color .14s ease, background .14s ease;
}
.dl-item:hover{border-color:var(--hellblau); background:#FFFDF8;}
.dl-item:has(.dl-check:checked){border-color:var(--preisblau); background:#F7FAFD;}
.dl-check{width:17px; height:17px; flex:none; accent-color:var(--preisblau); cursor:pointer;}
.dl-link{display:flex; align-items:center; gap:11px; flex:1; min-width:0; text-decoration:none; color:inherit;}
.dl-thumb{
  width:52px; height:40px; flex:none; object-fit:contain; object-position:center;
  background:var(--bild-sand); border:1px solid var(--kartenrand); border-radius:3px; padding:1px;
}
.dl-thumb--text{
  width:52px; height:40px; flex:none; overflow:hidden; padding:3px 4px;
  background:#FFFDF8; border:1px solid var(--kartenrand); border-radius:3px;
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:3.4px; line-height:1.5;
  color:var(--text-sek); white-space:pre-wrap; overflow-wrap:anywhere; display:block;
}
.dl-text{min-width:0;}
.dl-link .t{display:block; font-size:13px; font-weight:600; color:var(--graublau); line-height:1.3;}
.dl-link .s{display:block; font-size:11px; color:var(--text-sek); line-height:1.35; margin-top:1px;}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .produkte{grid-template-columns:repeat(2,1fr);}
  .angebot-grid{grid-template-columns:repeat(2,1fr);}
  .dl-liste{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:820px){
  .dl-liste{grid-template-columns:1fr;}
  .schnellstart-grid{grid-template-columns:1fr;}
  .zwei-ebenen{grid-template-columns:1fr;}
  .container{padding:0 20px;}
  .nav__inner{padding:12px 20px; gap:14px;}
  .nav__links{display:none;}
  .hero__grid,.verkostung-grid,.wissen-grid,.affineure,.copy-grid,.dl-hero{grid-template-columns:1fr;}
  .timeline__track{grid-template-columns:repeat(2,1fr); gap:20px 12px;}
  .timeline__track::before{display:none;}
  .schnellstart{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .produkte,.angebot-grid,.dl-liste{grid-template-columns:1fr;}
  /* Zwei Spalten wären hier keine 160 px breit — „komplette Textbibliothek"
     bräche dann mitten im Wort um. Untereinander ist schmal immer richtig. */
  .hero__checks{grid-template-columns:1fr; gap:9px; max-width:none;}
  section{padding:26px 0;}
}

/* ---------- Print ---------- */
@media print{
  .nav,.b2b-band,.btn,.copycard__foot,.dl-hero,.dl-liste{display:none!important;}
  body{background:#fff;}
  .karte{box-shadow:none;}
}