/* ============================================================
   Marken-Schriften — lokal eingebunden (SIL OFL), kein Google-Abruf
   ============================================================ */
@font-face{
  font-family:'Bitter'; font-style:normal; font-weight:400;
  font-display:block; 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:block; 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:block; 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:block; 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:block; 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:block; 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:block; 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:block; 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');
}

/* ============================================================
   Herkunft und Handwerk — 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:#778C64;          /* Markenfläche, nicht hinter kleiner Schrift */
  --salbei-dunkel:#5C6B51;
  --bandblau:#4E5A66;        /* Beschluss 10.08. · Bandflächen der Seiten */
  --ocker-text:#9A5C00;      /* Beschluss 10.08. · 36°, Logo-Winkel, AA */
  --icon-gelb:#C37500;       /* nur Symbole, nie Text · 3,01 gegen Well */
  /* 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:#FCFAF5;   /* Karte / Fläche · Aufhellung 10.08. */
  --panel:#F7F3EB;    /* Seitenfläche · Haupt-BG · Aufhellung 10.08. */
  --well:#F0EBE0;     /* zurückgesetzt · Aufhellung 10.08. */
  --bild-sand:#F5EFE4;   /* Bildbühne · Aufhellung 10.08. */
  --kartenrand:#EBE2CD;
  --text-head:#424F5C;
  --text-body:#5a5246;
  --text-sek:#6A6360;        /* Beschluss 10.08. · verlässt die Gelbachse (alt #6F6349) */
  --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;}
/* Die Navigation steht klebend und ist je nach Breite 85–98 px hoch. Ein
   Ankersprung setzt den Sektionsanfang sonst genau darunter: gemessen lagen
   Rubrik und Überschrift 27–60 px hinter der Leiste, bei „Ihr Angebot" die
   ganzen 94 px. Der Sprungabstand hält die Überschrift frei — 110 px deckt
   auch die höchste Leiste plus etwas Luft. */
section[id], header[id]{scroll-margin-top:110px;}
/* Struktur auf der Fläche — Korn und Verlauf (Styleguide 07).
   Die Flächen des Systems liegen nur rund drei Prozent Helligkeit auseinander;
   das trennt die Ebenen, ergibt aber eine sehr glatte, technische Seite. Ein
   feines Korn und ein flacher Verlauf brechen das, ohne die Stufen anzutasten.
   Das Korn ist die erste Ebene und liegt damit über dem Verlauf. Die Deckung 16
   steckt bereits im Alphakanal der Kachel — kein opacity, kein Pseudo-Element.
   Die Kachel stammt unverändert aus dem Systemhandbuch; sie wird übernommen,
   nicht nachgebaut. Korn und Verlauf liegen allein auf der Seitenfläche:
   Bildbühnen, Senken und Karten bleiben glatt, denn die glatte Karte hebt sich
   von einer strukturierten Fläche deutlicher ab als von einer glatten. */
body{
  background-color:#F7F3EB;   /* = --panel */
  background-image:
    url(putz-korn-256-16.png),
    linear-gradient(90deg,#F9F6EF 0%,#F7F3EB 46%,#F5F1E8 74%,#F3EFE6 100%);
  background-size:256px 256px, auto;
  background-repeat:repeat, no-repeat;
  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:10px;   /* Skala Abschnitt 03 */
  letter-spacing:.2em; text-transform:uppercase; color:var(--ocker-text);
}
.eyebrow--kaese{color:var(--ocker-text);}
.hand{
  /* Styleguide 03: Schriftton der Warengruppe, derselbe Ton wie der Eyebrow —
     auf Käse-Seiten Ocker. Vorher lief die Zeile im Wurst-Rot. */
  font-family:var(--font-hand); font-weight:600; color:var(--ocker-text);
  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. */
/* Bandfläche (Beschluss 10.08.): Bandblau statt des blassen #E4EAEF. Das blasse
   Blau wirkte über der warmen Sandfläche wie ein Fremdkörper und stand quer zur
   Regel, dass die Bandflächen der Seiten einen Ton führen. Schrift 5,58,
   hervorgehoben 6,76. Die Trennlinie entfällt — das dunkle Band trennt selbst. */
.b2b-band{
  background:var(--bandblau); color:#DCE6F0; text-align:center;
  font-size:12px; padding:9px 12px;
}
.b2b-band strong{color:#FCFAF5; 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;
}
/* ---------- Die vier Regionsfarben ----------
   Kategorial, keine Skala: vier verschiedene Farbwinkel, keine Helligkeitsreihe.
   Alle vier sind bestehende Systemtöne. Styleguide 04 weist der Fläche einer
   Gruppe „Punkte, Kanten und Bänder" zu — genau diese drei Rollen bedient
   --regionfarbe: den Punkt auf der Achse, den Punkt im Alpenbogen und das
   Regions-Band. Wer eine Region einfärbt, setzt die Klasse, nicht den Wert. */
.region--allgaeu{--regionfarbe:#A93148;}   /* Bordeaux      · weiß darauf 6,29 */
/* Nicht Salbei: Styleguide 02 führt Salbei als freie Akzentfarbe für Bio- und
   kbA-Badges. Als Regionsfarbe stand es auf der Allgäu-Karte direkt neben dem
   Bio-Chip — zwei gleiche Grüntöne, die Verschiedenes meinen. */
.region--savoyen{--regionfarbe:#3F6491;}   /* Preisblau     · weiß darauf 5,88 */
.region--tirol  {--regionfarbe:#424F5C;}   /* Graublau      · weiß darauf 8,08 */
.region--waadt  {--regionfarbe:#9A5C00;}   /* Ocker         · weiß darauf 5,18 */

.badge--bio{background:var(--salbei-dunkel); color:var(--panel);}
.badge--aktion{background:var(--gruppe-wurst); color:var(--panel);}
/* Regions-Badge auf dem Produktfoto und auf der Achse. Es trug lange bei allen
   vier denselben Markenton, damit keine Rangfolge behauptet wird. Das war gegen
   eine *Skala* gedacht — und dagegen gilt es weiter. Vier verschiedene
   Farbwinkel sind aber keine Skala: Salbei, Blau, Graublau und Ocker ordnen
   nichts, sie unterscheiden nur. Und sie sind dasselbe Zeichen, das die Punkte
   im Alpenbogen und auf der Achse tragen — vorher lief die Farbe nur im
   6-px-Punkt mit, während daneben vier gleiche gelbe Bänder standen.
   Bewusst ohne Landesflagge: Ein Nationalzeichen, das mit einem Regionsnamen
   beschriftet ist, sagt etwas anderes als die Beschriftung. Das Land steht in der
   Herkunfts-Liste unter dem Foto; im Badge führt die Region allein. */
.badge--region{
  background:var(--regionfarbe, var(--gruppe-kaese)); color:#FBFBF7;
  letter-spacing:.05em;
}

/* ---------- Platzhalter ---------- */
.ph{
  background:#FCF3E1; border:1px dashed var(--gruppe-kaese); color:var(--ocker-text);
  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{
  /* Styleguide 06: Scheibe 19 px im Vollton Salbei dunkel, Glyphe 11,5 px/700 in
     der Kartenfläche — 5,48 : 1. Die frühere 17-%-Tönung stand nur 1,20 : 1 von der
     Karte ab, auf der aufgehellten Basis noch weniger; die Häkchen waren als
     Zeichen kaum wahrnehmbar. Die getönte Variante bleibt langen Listen vorbehalten. */
  content:"✓"; flex:none; width:19px; height:19px; margin-top:1px;
  border-radius:50%; background:var(--salbei-dunkel); color:var(--papier);
  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-bottom:.45em;}

/* ---------- 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 Flagge sitzt davor am Fuß.
   Die Freisteller sind schattenlos beschnitten — sie stehen exakt auf bottom:0. */
.timeline__buehne{position:relative; height:130px; margin-bottom:44px;}
.timeline__foto{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  max-width:100%; max-height:130px; width:auto; height:auto;
}
/* Auf der Achse steht die Landesflagge, nicht mehr eine Reifezahl: Diese
   Etappe vergleicht vier Herkünfte, und die Flagge sagt das ohne ein Wort.
   Der helle Ring trennt sie vom Well-Ton, damit auch die weißen Flaggenteile
   (F, A, CH) eine sichtbare Kante behalten. */
/* ---------- Regionszeichen: schematischer Alpenbogen ----------
   Ersetzt die Länderflaggen als Hauptzeichen. Gründe gegen Regionalflaggen:
   das Allgäu ist keine Gebietskörperschaft und führt kein eigenes Wappen;
   Savoyens weißes Kreuz auf Rot ist vom Schweizer Kreuz kaum zu unterscheiden,
   Tirols Weiß-Rot nicht von Rot-Weiß-Rot. Die Karte erfindet nichts, behandelt
   alle vier gleich und sagt zugleich, worum es geht: die Lage im Alpenbogen.
   Unter etwa 60 px zerfällt sie — darum nie kleiner einsetzen. */
.karte-alpen{width:100%; height:auto; display:block; overflow:visible;}
.karte__flaeche{fill:#DCD2BE;}
.karte__nachbar{fill:#B6A98C;}
/* Der Punkt trennt sich mit einem schmalen Ring in der Flächenfarbe vom Bogen.
   Ein gefüllter Hof dahinter war bei 74 px so groß, dass er den Bogen aufriss. */
.karte__punkt{fill:var(--regionfarbe, var(--ocker-text)); stroke:var(--well); stroke-width:2.6;}
.section--hell .karte__punkt, .karte-alpen--auf-karte .karte__punkt{stroke:var(--papier);}

/* Die Karte sitzt auf der Achslinie und unterbricht sie — dieselbe Lösung wie
   die Reifestufen-Ellipse auf der Comté-Seite: Die Linie verbindet die vier
   Stationen und läuft sichtbar auf das Regionszeichen zu. Der Well-Grund
   hinter dem Bogen übernimmt dabei die Rolle des Rings.
   78 px Breite: Unter etwa 60 px zerfällt der Bogen, größer stößt er an die
   Käse darüber. */
/* Auf der Achse stand der Alpenbogen in 78 px — die dokumentierte Untergrenze.
   Vier Miniaturen nebeneinander lasen sich trotzdem als heller Fleck, und ihr
   aktiver Punkt trug in allen vier denselben Ocker, sagte also gerade nicht,
   welche Region gemeint ist. Jetzt steht dort das Zeichen, das die Seite
   ohnehin durchzieht: der Regionspunkt in seiner Farbe. Der Ring in der
   Flächenfarbe unterbricht die Achslinie — dieselbe Lösung wie die
   Reifestufen-Ellipse auf der Comté-Seite. Der Bogen bleibt dort, wo er groß
   genug ist: im Regionsporträt (82 px) und auf dem Infoblatt. */
.timeline__punkt{
  position:absolute; left:50%; bottom:-9px; transform:translateX(-50%);
  width:18px; height:18px; border-radius:50%; z-index:2;
  background:var(--regionfarbe); box-shadow:0 0 0 5px var(--well);
}

/* Die Achse trägt dasselbe Regions-Badge wie die Produktkarten weiter unten —
   ein Marken-Baustein statt eines Sonderelements. */
.timeline__marke{display:inline-block; white-space:nowrap;}
.flagge-mini{width:13px; height:8.7px; border-radius:1px; flex:none;
  box-shadow:0 0 0 1px rgba(40,34,24,.2);}
.timeline__fuss{
  margin-top:20px; padding-top:14px; border-top:1px solid var(--kartenrand);
  font-size:12.5px; color:var(--text-sek); text-align:center;
}
.timeline__label{font-size:14px; font-weight:600; color:var(--text-head); margin-top:7px;}
/* Geschmacks-Tagline in der Handschrift. Styleguide 03: Caveat 600 im Schriftton
   der Warengruppe — auf einer Käse-Seite Ocker. 4,52 : 1 auf dem Well. */
.timeline__note{
  font-family:var(--font-hand); font-weight:600; font-size:18px; line-height:1.3;
  color:var(--ocker-text); margin-top:1px;
}

/* ---------- 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);
}
/* Augenbraue, Titel, Caveat (Styleguide 03).
   Die Augenbraue sitzt näher am Titel als der Caveat: Sie ist klein, halbfett
   und weit gesperrt, hat also kaum Fläche — ein metrischer Abstand wirkt bei so
   wenig Gewicht optisch größer, als er ist. Der Caveat ist eine vollwertige
   Zeile mit Präsenz und braucht seinen Abstand. Getrennt werden die drei durch
   den Kontrast der Schriften, nicht durch Zwischenraum.
       Augenbraue → Titel     0,14 × Titelgröße
       Titel      → Caveat    0,16 × Titelgröße
       Titel      → Fließtext 0,45 × Titelgröße (wenn kein Caveat folgt)
   Als em am Titel notiert: Dort bezieht sich em auf die Titelgröße selbst, die
   Werte wandern also mit der clamp()-Skalierung mit. */
.eyebrow + h1, .eyebrow + h2, .eyebrow + h3{margin-top:.14em;}
.section-head h2{margin-bottom:.45em;}
.section-head h2:has(+ .hand){margin-bottom:.16em;}
.section-head .hand{margin-top:0;}
.section-head{margin-bottom:30px;}
.section-head p{max-width:72ch; margin-top:0;}
.section-head .hand + p{margin-top:.6em;}

.karte{
  background:var(--papier); border:1px solid var(--kartenrand); 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;
  /* Satzform-Regel: Versalien tragen Struktur oder Warengruppe, nie den
     Sekundärton. Warengruppen-Kenner → Gruppenfarbe, auf Käse-Seiten Ocker. */
  color:var(--ocker-text);
}
.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;}
/* Punkt wie im Logo (Entwurf 2a, 11.08.2026): gefüllte Ellipse in der Fläche
   der Warengruppe, Glyphe weiß ausgespart. Vorher war die Marke ein
   abgerundetes Quadrat mit Radius 11 — die einzige Stelle im System, an der
   eine vierte Form auftauchte; die Bildsprache der Marke ist der Kreis.
   Die Logo-Ellipse misst rx 22,4 / ry 24 auf 48, ist also leicht hochoval und
   nicht kreisrund: 38 px hoch entspricht 35,5 breit.
   Zur Kontrastfrage: Weiß auf dem Logo-Gelb trägt 1,96. Die 3-:-1-Schwelle aus
   Styleguide 08 gilt für weiße *Schrift* — die Glyphe im Punkt ist eine
   ausgesparte Silhouette, für sie gilt die Regel aus Abschnitt 04: nicht unter
   34 px, nur geschlossene Formen, keine Haarlinien. Beides ist erfüllt. */
.angebot-kachel__marke{
  flex:none; width:35.5px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--gruppe-kaese); color:var(--weiss);
}
/* 76 % des Glyphenrahmens. Randfüllende Motive wie ic4-zahnrad stoßen
   bei voller Größe an die Ellipsenkante. */
.angebot-kachel__marke .icon{width:29px; height:29px;}
.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 & Handel" ist eine eigene Warengruppe und trägt
   deshalb ihr Hellblau — nicht das Preis-Blau, das ist die Preisfarbe des
   Systems. Weiß darauf: 3,59. */
.angebot-kachel--service .angebot-kachel__marke{
  background:var(--gruppe-service);
}

/* 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--region{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);}
/* Einzige Ergänzung zur Satzform-Regel: die Artikelnummer trägt halbfett den
   Schriftton ihrer Warengruppe, auch mitten in einer sonst grauen Meta-Zeile.
   Sie ist die Fundhilfe beim Bestellen. Der Rest der Zeile bleibt Sekundärton. */
.produkt__meta .art{font-weight:600; color:var(--ocker-text);}
.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;}
/* Rasterfelder dürfen nicht breiter werden als ihre Spalte. Ohne min-width:0
   nimmt ein Feld die Mindestbreite seines Inhalts an — hier die 361 px der
   Sensoriktabelle. Die schob unter 383 px die ganze Seite auf: Auf jedem
   Telefon mit 320–375 px lag der rechte Rand außerhalb des Bildschirms, und
   .table-scroll konnte nie scrollen, weil es dazu erst schmaler sein muss als
   sein Inhalt. Gilt für alle Raster, die Tabellen, Bilder oder pre-Blöcke
   tragen. */
.verkostung-grid > *, .wissen-grid > *, .copy-grid > *,
.hero__grid > *, .affineure > *, .dl-hero > *{min-width:0;}
.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;}
/* Die Kante rechts sagt „hier geht es weiter". Ohne sie sieht eine abgeschnittene
   Spalte nach Fehler aus statt nach scrollbarem Inhalt. Die zweite Ebene liegt
   `local` und schiebt beim Scrollen mit — die Andeutung verschwindet also am Ende. */
.table-scroll{
  overflow-x:auto; border-radius:8px; border:1px solid var(--kartenrand);
  box-shadow:var(--shadow-produkt);
  background:
    linear-gradient(to left, rgba(90,82,70,.16), rgba(90,82,70,0)) right center / 18px 100% no-repeat scroll,
    linear-gradient(to left, var(--papier), var(--papier)) right center / 18px 100% no-repeat local;
}

/* Wissen / Comté */
.wissen-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:start;}
/* Sechs Zahlen, je eine Zeile Erklärung — das trug vorher sechs gerahmte
   Karten mit 26-px-Ziffern über die halbe Bildschirmhöhe. Viel Fläche für
   wenig Inhalt, und sie klebten unmittelbar unter dem Aufklapper darüber.
   Jetzt ein Band: drei Spalten, keine Rahmen, nur feine Trennlinien, und
   die Zahl führt in ihrer Größe die Zeile an, statt eine Karte zu füllen. */
.wissen-fakten{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px 26px;
  margin-top:28px; border-top:1px solid var(--kartenrand);
}
.fakt{
  padding:13px 0 12px; background:none; border:0; border-radius:0; box-shadow:none;
  border-bottom:1px solid var(--kartenrand);
}
/* Die untere Zeile schließt das Band ab — dort keine zweite Linie über dem
   Folgeabschnitt. */
.wissen-fakten .fakt:nth-last-child(-n+3){border-bottom:0;}
.fakt .zahl{font-family:var(--font-head); font-weight:800; font-size:19px;
  color:var(--preisblau); line-height:1.15;}
.fakt .lab{font-size:12.5px; color:var(--text-sek); line-height:1.4; margin-top:2px;}
@media (max-width:820px){
  .wissen-fakten{grid-template-columns:1fr 1fr; gap:2px 20px;}
  .wissen-fakten .fakt:nth-last-child(-n+3){border-bottom:1px solid var(--kartenrand);}
  .wissen-fakten .fakt:nth-last-child(-n+2){border-bottom:0;}
}
/* Ein Streifen statt fünf Kacheln — dasselbe Bild wie auf dem Infoblatt.
   Fünf Füllflächen und vier Pfeile lasen sich als lose Punkte, obwohl die
   Aussage eine Kette ist. Wer die Seite und das Blatt nebeneinander legt,
   soll dieselbe Grafik sehen. */
.wirkmodell{
  display:grid; align-items:center; margin:18px 0 20px;
  grid-template-columns:auto 1fr auto 1fr auto 1fr auto 1fr auto;
  background:var(--well); border-radius:10px; padding:13px 22px;
}
.wirkmodell span{
  color:var(--text-head); font-weight:700; font-size:13px; line-height:1.2;
  white-space:nowrap;
}
.wirkmodell b{justify-self:center;}
/* --ocker gibt es in diesem System nicht; der Schriftton der Warengruppe
   heißt --ocker-text (4,86 : 1, Styleguide 03). Mit --ocker blieben die
   Pfeile ungefärbt. */
.wirkmodell b{color:var(--ocker-text); font-family:var(--font-head); font-size:20px;}
@media (max-width:700px){
  .wirkmodell{grid-template-columns:1fr; gap:4px; padding:14px 16px; justify-items:center;}
  .wirkmodell span{white-space:normal; text-align:center;}
  .wirkmodell b{transform:rotate(90deg); line-height:1;}
}
/* Die drei Absätze der Antwort trugen keinen Abstand: Der globale p-Reset
   nimmt ihn weg, und für diese beiden Klassen gab es nie eine Regel — gedruckt
   wie am Bildschirm lasen sie sich als ein Block. Abstand in em, wie im
   Styleguide 03 für Fließtext vorgesehen. */
.antwort__spalten p + p{margin-top:.55em;}
.antwort__einschraenkung{margin-top:.55em;}

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);}
/* Styleguide 05: Der Verlauf trägt die Bildunterschrift, er darf das Foto nicht
   abdunkeln. rgba(30,36,44,.82) über 22 px ist ausdrücklich zurückgezogen —
   gültig ist die warme Sandfamilie #332F28 bei 78 % über 13 px Anlauf: 12,83 : 1
   statt 15,06. Doppelt so viel Kontrast wie nötig war zu viel Bild-Abdunklung. */
.affineur__hero figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:13px 16px 10px;
  font-size:12px; color:#FBFBF7;
  background:linear-gradient(rgba(51,47,40,0), rgba(51,47,40,.78));
}
.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;
}
/* Salbei ist laut Styleguide 02 „nur Fläche" (3,09) — weiße Schrift darauf
   trägt nur 3,54. Der Erfolgszustand nimmt deshalb Salbei dunkel: 5,51. */
.btn--copy.ok{background:var(--salbei-dunkel);}
.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 */
/* Maße wie auf der Wein-Reise. Nur der Ton bleibt der dunklere: Auf der
   Salbei-Fläche #778C64 kommt die helle Schrift nur auf 3,54 — zu wenig für
   12 px. #5C6B51 hält 4,8. */
.kba-band{background:var(--salbei-dunkel); color:#F7F3EB; text-align:center;
  font:600 12px/1.4 var(--font-text), sans-serif; letter-spacing:.03em; padding:11px 24px;}

/* Footer · Styleguide „Der Fuß und sein Farbrücken", Variante C (Website).
   Fest sind drei Dinge: Die Marke steht links mit dem Farbrücken davor, Kontakt
   und Angaben stehen rechts auf derselben Oberkante, und die Pflichtzeile sitzt
   unten im Band, durch eine Linie abgesetzt. */
/* Bandfläche (Beschluss 10.08.): Bandblau, nicht das Logo-Blau. */
/* Maße und Schriftgrade eins zu eins von der Wein-Reise übernommen: dort ist
   der Fuß luftiger (36/34 statt 30/22), der Fließtext eine Stufe größer und die
   Wortmarke *kleiner* als bei uns bisher. Genau diese Umkehr macht den
   Unterschied — vorher stand eine 19-px-Wortmarke über 13-px-Text und riss den
   Block auseinander; jetzt tragen alle drei Spalten dasselbe Gewicht. */
.footer{background:var(--bandblau); color:#DCE6F0; padding:36px 0 34px; font-size:14px;}
.footer__raster{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px; align-items:start;}
.footer__marke{display:flex; gap:14px;}
/* Der Farbrücken trägt immer alle fünf Logofarben in der Reihenfolge des Logos.
   Nie die Farbe der gezeigten Warengruppe: Dann wäre er eine Aussage über den
   Inhalt und müsste auf jeder Seite gepflegt werden — als festes Signet ist er
   wartungsfrei. Er gehört zur Marke, nicht zur Seitenkante, und ist deshalb so
   hoch wie der Markenblock, nicht so breit wie die Seite.
   5 px, nicht 4: Auf dem dunklen Band liegt das Antipasti-Violett #6A5476 dem
   Bandton am nächsten und wird bei vier Pixeln fast ein Loch in der Reihe. */
.footer__ruecken{
  width:5px; flex:none; align-self:stretch; border-radius:1px;
  background:linear-gradient(to bottom, #EEA842 0 20%, #D7432C 20% 40%,
    #A93148 40% 60%, #6A5476 60% 80%, #5389B9 80% 100%);
}
/* Mit .footer p davor: Die Sammelregel .footer p ist spezifischer als eine
   einzelne Klasse und hat Größe und Farbe hier bisher überschrieben — die
   Wortmarke lief in 14 px im Fließtextton, nur Schnitt und Schriftart kamen
   durch. Deshalb tragen Wortmarke, Unterzeile und Spaltenkopf denselben
   Selektoraufbau. */
.footer p.footer__wortmarke{font-family:var(--font-head); font-weight:700;
  font-size:16px; line-height:1.3; color:#FCFAF5;}
.footer p{font-size:14px; line-height:1.7; color:#DCE6F0; margin:0;}
/* Die Unterzeile der Marke steht auf einer eigenen Zeile und etwas größer als
   der Fließtext, leicht gesperrt und im helleren Blau — sie gehört zur
   Wortmarke, nicht zur Anschrift. Darunter die Adresse zweizeilig statt mit
   Mittelpunkt getrennt: Das macht den Markenblock etwas breiter und gibt ihm
   das Gewicht, das er gegenüber den zwei schmalen Spalten rechts braucht. */
.footer p.footer__unterzeile{font-weight:600; font-size:12.5px; letter-spacing:.06em;
  color:#9DB0C2; margin:1px 0 6px;}
/* Spaltenetiketten: Versalien, gesperrt — Struktur, nicht Information. */
.footer p.footer__label{font-weight:600; font-size:11.5px; line-height:1.2;
  letter-spacing:.16em; text-transform:uppercase; color:#DCE6F0; margin:0 0 8px;}
.footer a{color:#FCFAF5;}   /* 6,76 — heller als der Fließtext */
/* Die drei Rechtslinks stehen als Liste untereinander: ohne Unterstreichung,
   damit die Spalte ruhig bleibt — die Unterstreichung kommt beim Überfahren.
   Datenschutz zeigt bewusst auf dieselbe Adresse wie das Impressum: Auf
   geraldbartke.de steht die Datenschutzerklärung als Abschnitt in der
   Impressumsseite, einen eigenen Pfad oder Anker gibt es dort nicht. */
.footer__recht a{text-decoration:none;}
.footer__recht a:hover, .footer__recht a:focus-visible{text-decoration:underline;}
.footer p.footer__pflicht{font-size:12.5px; line-height:1.6; color:#B4C4D3;
  margin-top:26px; padding-top:14px; border-top:1px solid rgba(220,230,240,.28);}
@media (max-width:760px){
  .footer__raster{grid-template-columns:1fr; gap:24px;}
}

/* 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:0;
}
.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;
}

/* ---------- Ebenen-Trenner ----------
   Ersetzt die gestrichene Sektion „Eine Aktion, zwei Ebenen": Statt eines eigenen
   Abschnitts, der ankündigt was folgt, sagen zwei Zeilen an Ort und Stelle, in
   welcher Ebene man gerade liest. Die Sektionen liegen dafür schon richtig —
   Stufen bis Affineure ist Endkundenmaterial, Textbausteine und Downloads sind
   der Werkzeugkasten.
   Bewusst kein getöntes Band über die volle Breite: Styleguide 07 hält fest, dass
   der Well-Ton „nie über eine ganze Sektionsbreite gezogen" wird. Zwei Haarlinien
   und Schrift kommen ohne eigene Fläche aus. */
/* Der Trenner stand als eigener Streifen zwischen zwei Abschnitten. Wo beide
   hell sind, blieb dazwischen ein zwei Zentimeter hoher Sandstreifen stehen —
   der sah nach Fehler aus, nicht nach Zäsur. Er gehört jetzt in den Abschnitt,
   den er ankündigt, und liegt damit auf dessen Fläche. Sichtbar bleibt allein
   die Linie mit dem Text darauf. */
.ebenen-trenner{
  display:flex; align-items:center; gap:18px;
  padding:26px 0 4px; font-size:13px;
}
.ebenen-trenner--kopf{padding:0; margin:-14px 0 40px;}
.ebenen-trenner::before, .ebenen-trenner::after{
  content:""; flex:1; border-top:1px solid var(--kartenrand);
}
/* flex:0 1 auto, nicht flex:none — sonst schrumpft der Text nie und schiebt
   unter 520 px die ganze Seite auf. */
.ebenen-trenner span{flex:0 1 auto; max-width:72ch; text-align:center; color:var(--text-sek);}
.ebenen-trenner strong{color:var(--text-head); font-weight:600;}
@media (max-width:700px){
  .ebenen-trenner{gap:12px; font-size:12.5px;}
  .ebenen-trenner::before, .ebenen-trenner::after{flex:0 0 14px;}
  .ebenen-trenner span{text-align:left;}
}

/* ---------- Schnellstart: drei Ergebnisse nebeneinander ----------
   Jeder der drei Schritte zeigt, was am Ende dasteht. Vorher stand hier eine
   Schrittliste mit einem einzigen Mockup daneben — die drei Schritte waren
   gleichrangig formuliert, aber nur einer hatte ein Bild.
   Durchgehende Regel: was gestrichelt-gelb markiert ist (.ph),
   setzt die Kiste selbst ein. Alles andere kommt fertig aus dem Paket. */
/* Die drei Spalten teilen sich dieselben Grid-Zeilen: Abbildung, Schrittkopf,
   Text. Dadurch fluchten Schrittzahlen und Texte über alle drei Spalten, ohne
   dass die Abbildungszeile eine feste Höhe braucht.
   Vorher stand dort height:330px. Zwischen 1000 und rund 1240 px Fensterbreite
   wurde Schritt 2 (Mockup + zwei Vorschaubildchen) höher als dieses Maß und
   stand 9 px in seine eigene Schrittzeile hinein. Die Zeile wächst jetzt mit
   dem höchsten Inhalt, die Fluchtlinie bleibt. */
/* dieselbe Marke wie die Schrittzahlen der Verkostung */
/* Deutlich abgesetzt: direkt unter dem Schritttext gelesen wirkte die Legende
   wie dessen Fortsetzung. Die Haarlinie trennt sie von den drei Spalten. */

/* Schritt 1 — Quelle hinten, Ergebnis vorn. Das Stapeln ersetzt den Pfeil. */

/* Kopier-Karte — bewusst dasselbe Bauteil wie in der Textbibliothek weiter
   unten, damit die Kiste es dort wiedererkennt. */

/* Schritt 2 — die beiden anderen Verwendungen derselben Bilder */

/* Schritt 3 — beide Blätter gestaffelt */

/* leerer Bildplatz in Schritt 1 — füllt sich in Schritt 2 */
@media (max-width:1000px){
  /* Einspaltig gibt es nichts mehr zu fluchten: zurück auf drei eigenständige
     Blöcke, sonst legte der Spaltenfluss die Schritte in Zusatzspalten. */
}

/* ---------- 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);
}
/* Zwei Spalten über die volle Breite lassen die Kacheln deutlich breiter
   wirken als in den drei- und vierspaltigen Gruppen darüber — dieselbe Zeile
   sah dort halb so lang aus. Die Spalten bekommen deshalb die Breite, die sie
   in einer dreispaltigen Liste hätten; die Liste endet dann nach zwei Dritteln,
   statt die Kacheln auseinanderzuziehen. */
[data-gruppe="freigestellt"] .dl-liste--spalten{--dl-spalten:2; --dl-zeilen:4;}
[data-gruppe="bilder"] .dl-liste--spalten[style*="--dl-spalten:2"],
[data-gruppe="freigestellt"] .dl-liste--spalten{
  grid-template-columns:repeat(2, minmax(0, calc((100% - 16px) / 3)));
}
@media (max-width:1000px){
  [data-gruppe="bilder"] .dl-liste--spalten[style*="--dl-spalten:2"],
  [data-gruppe="freigestellt"] .dl-liste--spalten{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
[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-head); padding:0 0 3px 2px; align-self:end;   /* Beschluss 10.08. · Spaltenkopf = Struktur */
}
@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); 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;}
  .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){
  /* Fünf Spalten in 333 px: mit dem Desktop-Padding standen 361 px im Weg und die
     letzte Spalte brach mitten im Wort ab. Engeres Zellenmaß bringt 30 px zurück —
     damit passt die Notiztabelle, ohne dass jemand seitwärts wischen muss. */
  table.vk{font-size:11.5px;}
  table.vk th, table.vk td{padding:6px 6px;}
  table.vk th{font-size:11px;}
  table.vk td em, table.vk td i{font-size:11px;}
  .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;}
}

/* ---------- Regionenvergleich ----------
   Die zentrale Vergleichsstruktur der Seite: sechs gleiche Fragen an vier
   Regionen. Als Tabelle, weil nur dort das zeilenweise Lesen quer über die
   Regionen funktioniert — genau darum geht es. Auf schmalen Fenstern scrollt
   sie waagerecht im .table-scroll, wie die Verkostungstabelle auch. */
.rv{width:100%; border-collapse:collapse; min-width:900px;}
.rv th, .rv td{border:1px solid var(--kartenrand); vertical-align:top; text-align:left;}
.rv thead th{
  background:var(--well); padding:16px 14px 14px; width:22%;
  border-bottom:2px solid #D8CDB2;
}
.rv thead th:first-child{width:12%; background:var(--panel);}
.rv__ecke{
  font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-sek); display:block; padding-top:4px;
}
.rv__karte{display:block; width:94px; margin:0 0 9px;}
.rv__region{
  display:block; font-family:var(--font-head); font-weight:700; font-size:16px;
  color:var(--text-head); line-height:1.15;
}
.rv__land{
  display:flex; align-items:center; gap:5px; margin-top:4px;
  font-size:11.5px; color:var(--text-sek); font-weight:400;
}
/* Zeilenkopf trägt die Frage, darum dieselbe Behandlung wie in der
   Verkostungstabelle: getönt, damit die Zeile als Einheit lesbar bleibt. */
.rv tbody th{
  background:var(--panel); padding:13px 14px; font-size:13px; font-weight:600;
  color:var(--text-head); width:12%;
}
.rv tbody td{
  background:var(--papier); padding:13px 14px; font-size:13.5px; line-height:1.5;
}
.rv tbody tr:last-child td{background:#FBF6EA;}   /* Sensorik-Zeile leicht abgesetzt */
.rv__fuss{
  margin-top:14px; font-size:12.5px; color:var(--text-sek); line-height:1.6;
  max-width:96ch;
}
@media (max-width:700px){
  .rv__karte{width:76px;}
  .rv thead th{padding:12px 10px 10px;}
  .rv tbody th, .rv tbody td{padding:10px; font-size:12.5px;}
}

/* Zwei helle Sektionen, die inhaltlich ein Kapitel bilden (Leitfrage + Vergleich),
   dürfen keine Naht dazwischen zeigen — sonst liest sich der Zusammenhang als Bruch. */
.section--fortsetzung{border-top:0; padding-top:6px;}

/* ---------- Produktkarte: die drei Herkunftsfragen ----------
   Dieselben drei Zeilen auf allen vier Karten. Vorher stand hier eine freie
   Sensorik-Zeile je Käse — die las sich schöner, ließ sich aber nicht
   vergleichen, und genau darum geht es auf dieser Seite. */
.produkt__herkunft{margin:12px 0 4px; display:grid; gap:2px;}
.produkt__herkunft dt{
  font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-sek); margin-top:8px;
}
.produkt__herkunft dt:first-child{margin-top:0;}
.produkt__herkunft dd{font-size:13.5px; line-height:1.45; color:var(--text-body);}
.produkt__herkunft-region{
  font-family:var(--font-head); font-weight:700; font-size:15px !important;
  color:var(--text-head);
}

/* ---------- Regionen-Porträts ----------
   Ersetzt die früheren Betriebsporträts. Jede Karte beginnt mit der Region,
   der Betrieb folgt als deren konkreter Träger — die Reihenfolge trägt die
   Aussage der Seite. */
.regionen{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px;}
.region{overflow:hidden; display:flex; flex-direction:column;}
/* Je Region ein Bildpaar in derselben Ordnung: links, wo der Käse herkommt —
   rechts, wie er gemacht wird. Vier gleich gebaute Paare, damit der Vergleich
   auch optisch gleichwertig ist und nicht eine Region als Landschaft und die
   nächste als Werkstatt erscheint. Der 1px-Spalt zeigt die Kartenlinie. */
.region__bilder{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--kartenrand); border-bottom:1px solid var(--kartenrand);
}
.region__bild{margin:0; display:flex; flex-direction:column; background:var(--well);}
.region__bild img{width:100%; height:190px; object-fit:cover; display:block;}
.region__bild figcaption{
  background:var(--well); flex:1;
  padding:8px 14px 10px; font-size:11px; line-height:1.42; color:var(--text-sek);
}
.region__body{padding:20px 22px 22px;}
.region__kopf{display:flex; align-items:center; gap:14px; margin-bottom:14px;}
/* Die Karte wiederholt hier die Lage — dieselbe Marke wie in der Achse und im
   Vergleich, damit die vier Abschnitte als eine Erzählung lesbar bleiben. */
.region__karte{width:82px; flex:none;}
.region__kopf h3{font-size:20px; line-height:1.1;}
.region__kopf .sub{
  display:flex; align-items:center; gap:5px; margin-top:4px;
  font-size:12px; color:var(--text-sek);
}
.region__body p{font-size:14px; line-height:1.62; margin-bottom:10px;}
.region__body p strong:first-child{color:var(--text-head);}
.region__fazit{
  margin-top:14px; padding-top:12px; border-top:1px solid var(--kartenrand);
  font-size:13.5px !important; color:var(--text-body);
}
@media (max-width:900px){
  .regionen{grid-template-columns:1fr;}
  .region__bild img{height:170px;}
}

/* ============================================================
   Etappe „Zeit" — was nur die Comté-Seite braucht
   ============================================================
   Die Reifestufen sind das eine Ordnungsprinzip im ganzen Paket, das
   wirklich eine *Skala* ist: 4 → 6–9 → 20–22 → 30+ Monate. Deshalb hier
   eine Helligkeitsreihe im Käseton und nicht, wie bei den Regionen der
   Etappe „Herkunft und Handwerk", vier verschiedene Farbwinkel. Eine
   Reihe behauptet eine Steigerung — und die gibt es hier. */
:root{
  --reife-1:#F7B95E; --reife-2:#EEA945; --reife-3:#E09A35; --reife-4:#D08A2A;
}
.badge--stufe{background:var(--reife-2); color:#3D2A0B; letter-spacing:.05em;}
.produkt--1 .badge--stufe{background:var(--reife-1);}
.produkt--2 .badge--stufe{background:var(--reife-2);}
.produkt--3 .badge--stufe{background:var(--reife-3);}
.produkt--4 .badge--stufe{background:var(--reife-4);}
.produkt__bild .badge--stufe{position:absolute; top:10px; right:10px;}
/* Ellipse statt Kreis: rund 7 Prozent höher als breit, damit die Monatszahl
   nicht gedrückt wirkt. Der Ring in der Flächenfarbe unterbricht die Achse —
   dieselbe Lösung wie der Regionspunkt der Schwesteretappe. */
.timeline__dot{
  width:52px; height:56px; 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--1 .timeline__dot{background:var(--reife-1);}
.timeline__step--2 .timeline__dot{background:var(--reife-2);}
.timeline__step--3 .timeline__dot{background:var(--reife-3);}
.timeline__step--4 .timeline__dot{background:var(--reife-4);}
.timeline__meta{font-size:12px; color:var(--text-sek); margin-top:1px;}

/* Etappenfuß: zurück zur Übersicht, weiter zur nächsten Etappe. Zwei gleich
   große Karten, damit keine Richtung wichtiger aussieht als die andere — die
   Reise hat keine Vorzugsrichtung, man steigt ein, wo man mag. */
.etappen-fuss{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:6px 0 56px;}
.etappen-fuss__karte{
  display:block; padding:20px 24px; text-decoration:none;
  background:var(--papier); border:1px solid var(--kartenrand); border-radius:10px;
  transition:border-color .14s ease, background .14s ease;
}
.etappen-fuss__karte:hover, .etappen-fuss__karte:focus-visible{
  border-color:var(--hellblau); background:#FFFDF8;
}
.etappen-fuss__karte--weiter{text-align:right;}
.etappen-fuss__weg{
  display:block; font-weight:600; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ocker-text); margin-bottom:5px;
}
.etappen-fuss__titel{
  display:block; font-family:var(--font-head); font-weight:700; font-size:19px;
  line-height:1.2; color:var(--text-head);
}
@media (max-width:700px){
  .etappen-fuss{grid-template-columns:1fr; gap:12px;}
  .etappen-fuss__karte--weiter{text-align:left;}
}

/* ============================================================
   Schnellstart der Übersichtsseite — „So funktioniert die Käse-Reise"
   ============================================================
   Übernommen von der Comté-Etappe, wo dieser Ablauf bisher auf jeder
   Etappenseite doppelt stand. Er gehört auf die Übersicht: Wie man das
   Material einsetzt, ist für alle Etappen dasselbe, gezeigt wird es an
   einer. */
.mockup{margin:0; width:100%; border:1px solid var(--kartenrand); 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:11.5px; color:var(--text-sek);}
.mockup__body{padding:17px 18px 18px; background:#FFFFFF;}
.mockup__body img{width:108px; float:right; margin:0 0 8px 13px; border-radius:3px; outline:1.4px dashed var(--gruppe-kaese); outline-offset:2px;}
.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:16px; color:var(--text-head); margin:10px 0 5px;}
.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;}
/* ---------- Schnellstart: drei Ergebnisse nebeneinander ----------
   Jeder der drei Schritte zeigt, was am Ende dasteht. Vorher stand hier eine
   Schrittliste mit einem einzigen Mockup daneben — die drei Schritte waren
   gleichrangig formuliert, aber nur einer hatte ein Bild.
   Durchgehende Regel: was gestrichelt-gelb markiert ist (.ph, .mockup__logo),
   setzt die Kiste selbst ein. Alles andere kommt fertig aus dem Paket. */
/* Die drei Spalten teilen sich dieselben Grid-Zeilen: Abbildung, Schrittkopf,
   Text. Dadurch fluchten Schrittzahlen und Texte über alle drei Spalten, ohne
   dass die Abbildungszeile eine feste Höhe braucht.
   Vorher stand dort height:330px. Zwischen 1000 und rund 1240 px Fensterbreite
   wurde Schritt 2 (Mockup + zwei Vorschaubildchen) höher als dieses Maß und
   stand 9 px in seine eigene Schrittzeile hinein. Die Zeile wächst jetzt mit
   dem höchsten Inhalt, die Fluchtlinie bleibt. */
.sst-grid{display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:auto auto auto; grid-auto-flow:column; row-gap:12px; column-gap:46px; align-items:start; /* 24 war zu wenig: die drei Bereiche liefen ineinander */}
.sst-sp{display:contents;}
.sst-buehne{display:grid; place-items:start center; padding:2px 4px 0;}
.sst-buehne > *{width:92%;}
.sst-kopf{display:flex; align-items:center; gap:11px;}
.sst-kopf h3{font-size:15px;}
.sst-text{font-size:13px; color:var(--text-body); line-height:1.55; max-width:44ch;}
/* dieselbe Marke wie die Schrittzahlen der Verkostung */
.sst-nr{flex:none; width:30px; height:32px; border-radius:50%; background:var(--graublau); color:var(--weiss); font-family:var(--font-head); font-weight:700; font-size:14px; display:grid; place-items:center;}
/* Deutlich abgesetzt: direkt unter dem Schritttext gelesen wirkte die Legende
   wie dessen Fortsetzung. Die Haarlinie trennt sie von den drei Spalten. */
.sst-legende{margin-top:34px; padding-top:18px; border-top:1px solid var(--kartenrand); font-size:12.5px; color:var(--text-body); display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
/* Schritt 1 — Quelle hinten, Ergebnis vorn. Das Stapeln ersetzt den Pfeil. */
.sst-fluss{position:relative; height:300px;}
.sst-fluss__quelle{position:absolute; left:0; top:0; width:74%; z-index:1;}
.sst-fluss__ziel{position:absolute; right:0; bottom:0; width:82%; z-index:2;}
/* Schritt 2 — die beiden anderen Verwendungen derselben Bilder */
.sst-neben{display:flex; gap:8px; margin-top:11px;}
.sst-neben__k{flex:1; display:flex; flex-direction:column; gap:4px; align-items:center;}
.sst-neben__k img{width:100%; height:52px; object-fit:cover; border-radius:4px; border:1px solid var(--kartenrand); background:var(--papier);}
.sst-neben__k img.contain{object-fit:contain; background:var(--bild-sand); padding:1px;}
.sst-neben__k span{font-size:10.5px; color:var(--text-sek);}
/* Schritt 3 — beide Blätter gestaffelt */
.sst-blaetter{position:relative; width:100%; max-width:290px; height:300px; margin:0 auto;}
.sst-blatt{position:absolute; border:1px solid var(--kartenrand); border-radius:3px; overflow:hidden; box-shadow:var(--shadow-karte); background:var(--papier);}
.sst-blatt img{width:100%; display:block;}
.sst-blatt--hinten{right:0; top:0; width:162px; transform:rotate(4.5deg);}
.sst-blatt--vorn{left:0; bottom:0; width:196px; z-index:2;}
.sst-blatt .ph, .sst-blatt .mockup__logo{position:absolute; z-index:3;}
.sst-blatt .mockup__logo{top:6px; left:6px;}
.sst-blatt .ph{right:6px; bottom:8px;}
/* leerer Bildplatz in Schritt 1 — füllt sich in Schritt 2 */
.mockup__slot{float:right; width:108px; height:80px; margin:0 0 8px 13px; display:grid; place-items:center; text-align:center; background:#FCF3E1; border:1.4px dashed var(--gruppe-kaese); border-radius:4px; color:var(--ocker-text); font-size:9px; font-weight:600; letter-spacing:.08em;}

/* ============================================================
   Übersichtsseite — Etappenraster und Paketkarten
   ============================================================ */
/* Zwei fertige Etappen mit Bild, fünf geplante als schlanke Karten. Der
   Unterschied liegt im Gewicht, nicht in einem Etikett: Was man schon nutzen
   kann, hat ein Bild und einen Weg hinein; was noch kommt, steht ruhig da. */
.etappen{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:26px;}
.etappe{
  background:var(--papier); border:1px solid var(--kartenrand); border-radius:10px;
  overflow:hidden; display:flex; flex-direction:column;
}
.etappe--fertig{box-shadow:var(--shadow-produkt);}
.etappe__bild{display:block; aspect-ratio:3/2; overflow:hidden; background:var(--well);}
.etappe__bild img{width:100%; height:100%; object-fit:cover; display:block;}
.etappe__text{padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; gap:6px;}
.etappe__thema{
  font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ocker-text);
}
.etappe h3{font-size:21px; line-height:1.18; margin:0;}
.etappe h3 a{color:inherit; text-decoration:none;}
.etappe h3 a:hover, .etappe h3 a:focus-visible{text-decoration:underline;}
.etappe__antwort{font-weight:600; color:var(--text-head); margin:2px 0 0;}
.etappe__zeile{font-size:13.5px; color:var(--text-sek); margin:0;}
.etappe__weg{margin-top:auto; padding-top:12px; font-weight:600; font-size:13.5px;
  color:var(--preisblau);}
/* Geplante Etappen: keine Schatten, kein Rahmen zum Anfassen — sie sollen
   erkennbar noch nicht klickbar sein, ohne ausgegraut zu wirken. */
.etappe--geplant{background:transparent; border-style:dashed; box-shadow:none;}
.etappe--geplant h3{font-size:18px; color:var(--text-head);}
.etappen__fuss{margin-top:24px; font-size:13.5px; color:var(--text-sek);}
@media (max-width:820px){.etappen{grid-template-columns:1fr;}}

.paket-raster{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:24px;}
.paket{padding:24px 26px 26px;}
.paket__thema{
  display:block; font-weight:600; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ocker-text); margin-bottom:6px;
}
.paket h3{font-size:20px; line-height:1.2; margin-bottom:8px;}
.paket__cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px;}
.paket__hinweis{margin-top:22px; font-size:13.5px; color:var(--text-sek);}
@media (max-width:820px){.paket-raster{grid-template-columns:1fr;}}

/* Die Quellkarte in Schritt 1 — sie steht hinter dem Shop-Mockup und zeigt,
   woher der Text kommt. Kam mit dem Schnellstart von der Comté-Seite und
   stand ohne diese Regeln als loser Textblock in der Ecke. */
.kopierkarte{border:1px solid var(--kartenrand); border-radius:8px; background:var(--papier);
  box-shadow:var(--shadow-karte); overflow:hidden;}
.kopierkarte__kopf{display:flex; align-items:center; gap:9px; padding:9px 12px;
  border-bottom:1px solid var(--kartenrand);}
.kopierkarte__kopf b{flex:1; font-family:var(--font-head); font-size:12.5px; color:var(--text-head);}
.kopierkarte__kopf span{font-size:10px; color:var(--text-sek);}
.kopierkarte__text{margin:0; padding:10px 12px; background:#FFFDF8; border-top:1px solid #F3EBDA;
  font-family:var(--font-text); font-size:10.5px; line-height:1.6; color:var(--text-body);
  white-space:pre-wrap;}
.kopierkarte__fuss{padding:8px 12px 10px; background:var(--well);
  border-top:1px solid var(--kartenrand); display:flex; align-items:center; gap:8px;}
.kopierkarte__btn{background:var(--salbei-dunkel); color:var(--weiss); font-size:11px;
  font-weight:600; padding:6px 12px; border-radius:4px;}
.kopierkarte__meta{margin-left:auto; font-size:9.5px; color:var(--text-body);}



/* ============================================================
   Bestellplaner und Produktdaten (Übersichtsseite)
   ============================================================ */
.planer{margin-top:26px;}
.planinfo{
  background:var(--well); border-radius:8px; padding:16px 20px; font-size:14px;
  line-height:1.6; color:var(--text-body);
}
.planzeile{
  display:grid; grid-template-columns:1.5fr 1.3fr .9fr 1fr; gap:18px; align-items:end;
  padding:18px 0; border-bottom:1px solid var(--kartenrand);
}
.planzeile.aktiv .pl-titel b{color:var(--preisblau);}
.pl-titel b{display:block; font-family:var(--font-head); font-size:17px; color:var(--text-head);}
.pl-titel span{display:block; font-size:13.5px; color:var(--text-sek); margin-top:2px;}
.pl-feld{display:block;}
.pl-label{
  display:block; font-weight:600; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-sek); margin-bottom:6px;
}
.pl-feld select, .pl-feld input, .pl-feld textarea{
  width:100%; font:inherit; font-size:14px; color:var(--text-body);
  background:var(--papier); border:1px solid var(--kartenrand); border-radius:6px;
  padding:9px 11px;
}
.pl-feld select:focus-visible, .pl-feld input:focus-visible, .pl-feld textarea:focus-visible{
  outline:2px solid var(--preisblau); outline-offset:1px;
}
.pl-mengenfeld{display:flex; align-items:center; gap:8px;}
.pl-mengenfeld input{max-width:88px;}
.pl-einheit{font-size:14px; color:var(--text-sek);}
.pl-rechnung{font-size:13.5px; color:var(--text-sek); padding-bottom:9px;}
.planzeile.aktiv .pl-rechnung{color:var(--text-head); font-weight:600;}
/* Portionierung war früher eine eigene Kachel im Angebotsblock. Sie gehört
   dorthin, wo man sie entscheidet — in die Bestellung. */
.pl-option{
  margin-top:20px; background:var(--panel); border:1px solid var(--kartenrand);
  border-radius:8px; padding:14px 18px; font-size:14px; line-height:1.55;
}
.pl-option__kopf{display:flex; gap:11px; align-items:flex-start; cursor:pointer;}
.pl-option__kopf input{margin-top:3px; width:17px; height:17px; accent-color:var(--preisblau); flex:none;}
/* Klappt mit dem Häkchen auf: Stückgröße und die Erklärung, wie Sets und
   Kilogramm zusammenhängen. */
.pl-option__rechnung{margin:0; font-size:13.5px; color:var(--text-sek); line-height:1.55;}
.planzeile{grid-template-columns:1.5fr 1.3fr .9fr .9fr 1fr;}
.pl-feld--sets[hidden]{display:none;}
@media (max-width:1000px){.planzeile{grid-template-columns:1fr 1fr;}}
@media (max-width:640px){.planzeile{grid-template-columns:1fr;} .pl-option--oben{grid-template-columns:1fr;}}
.plan-felder{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:24px;}
/* Die Anmerkung bekommt bewusst die volle Breite und einen eigenen Rahmen:
   Was hier steht, geht in der Mail nach oben und in den Betreff. */
.pl-feld--anmerkung{margin-top:18px;}
.pl-feld--anmerkung textarea{resize:vertical; min-height:74px;}
.plan-abschluss{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:22px;}
.pl-status{font-size:13.5px; color:var(--ocker-text);}
.pl-hinweis{margin-top:12px; font-size:12.5px; color:var(--text-sek);}
@media (max-width:1000px){
  .planzeile{grid-template-columns:1fr 1fr; gap:14px;}
  .plan-felder{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .planzeile{grid-template-columns:1fr;}
  .plan-felder{grid-template-columns:1fr;}
}

.wege-raster{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:24px;}
.weg-karte{padding:22px 24px 24px;}
.weg-karte h3{font-size:18px; margin-bottom:8px;}
.weg-karte p{font-size:14px; line-height:1.6;}
.weg-karte__links{display:flex; flex-direction:column; gap:4px; margin-top:10px;}
@media (max-width:900px){.wege-raster{grid-template-columns:1fr;}}

.artikelbox{margin-top:26px; border-top:1px solid var(--kartenrand); padding-top:16px;}
.artikelbox summary{cursor:pointer; font-weight:600; color:var(--preisblau); font-size:14px;}
.artikelbox__hinweis{margin-top:12px; font-size:13.5px; line-height:1.6; color:var(--text-body); max-width:80ch;}
.artikel{width:100%; border-collapse:collapse; margin-top:14px; font-size:13.5px;}
.artikel th, .artikel td{text-align:left; padding:9px 14px; border-bottom:1px solid var(--kartenrand);}
.artikel th{
  font-weight:600; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-head); background:var(--well);
}
.artikel tbody tr:nth-child(even){background:var(--panel);}

/* Der technische Support stand bisher als eigene Kachel im Angebotsblock. Er ist
   ein Service, keine Kondition — in der Kontaktspalte der Fußzeile steht er
   dort, wo man nach Kontakt sucht. */
.footer p.footer__support{margin-top:12px; font-size:12.5px; color:#B4C4D3; line-height:1.6;}

/* Kopfbereich der Übersicht: Das Motiv liegt rechts neben dem Text und blendet
   nach links in die Seitenfläche aus. Das Bild hat links ohnehin nur leeren
   Putz — statt ihn abzuschneiden, lässt die Maske ihn in den Hintergrund
   übergehen, und der Text steht auf ruhigem Grund. Rechts läuft es bis an den
   Fensterrand, damit es ein Kopf ist und kein eingerahmtes Bild. */
.hero--kopf{position:relative; overflow:hidden; padding:64px 0 58px;}
/* Das Bildfeld sitzt im Container, nicht im Fenster: Absolut positionierte
   Kinder beziehen sich auf die Polsterkante des Containers — right:0 endet
   damit genau dort, wo auch der Text endet. Auf breiten Bildschirmen fluchten
   Überschrift und Bildkante. Nach oben und unten greift es über die
   Abschnittspolsterung hinaus, damit es ein Kopf bleibt und kein Bild im Text. */
.hero--kopf > .container{position:relative;}
.hero--kopf .hero__text{position:relative; z-index:1; max-width:56ch;}
.hero__bildfeld{
  position:absolute; top:-64px; right:0; bottom:-58px; width:min(64%, 900px); z-index:0;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 46%);
          mask-image:linear-gradient(to right, transparent 0, #000 46%);
}
.hero__bildfeld img{width:100%; height:100%; object-fit:cover; object-position:66% 50%; display:block;}
/* Unter 1000 px wird daraus wieder ein Band unter dem Text — nebeneinander
   bliebe für keines von beidem genug Platz. */
@media (max-width:1000px){
  .hero--kopf{padding:48px 0 40px;}
  .hero--kopf .hero__text{max-width:none;}
  .hero__bildfeld{
    position:static; width:auto; margin-top:28px; border-radius:12px; overflow:hidden;
    -webkit-mask-image:none; mask-image:none;
  }
  .hero__bildfeld img{height:auto; object-position:center;}
}

/* ============================================================
   Versprechensband der Käse-Reise („Das liegt für euch bereit")
   ============================================================
   Eine getönte Fläche statt vier Kacheln: So liest es sich als Zusage, nicht
   als Navigation. Die Knöpfe stehen im Fuß des Bands — dort, wo nach dem
   Ablauf ohnehin der Impuls kommt, loszugehen. */
.versprechen{
  background:var(--panel); border:1px solid var(--kartenrand); border-radius:12px;
  padding:34px 36px 34px;
}
.versprechen__kopf{margin-bottom:26px;}
.versprechen__kopf h2{margin-bottom:.3em;}
.versprechen__kopf p{color:var(--text-sek); margin:0;}
.zusagen{display:grid; grid-template-columns:repeat(4,1fr); gap:26px;}
.zusage .ipunkt{margin-bottom:14px;}
.zusage h3{font-size:16.5px; line-height:1.2; margin-bottom:6px;}
.zusage p{font-size:13.5px; line-height:1.55; color:var(--text-body); margin:0;}
.versprechen__fuss{
  display:flex; gap:14px; flex-wrap:wrap; align-items:center;
  margin-top:28px; padding-top:24px; border-top:1px solid var(--kartenrand);
}
.versprechen__notiz{font-size:13px; color:var(--text-sek);}
@media (max-width:900px){.zusagen{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.zusagen{grid-template-columns:1fr;} .versprechen{padding:26px 22px;}}

/* Rückweg in der Navigation: eine Stufe nach oben, deshalb leicht abgesetzt. */
.nav__zurueck{color:var(--text-sek) !important; padding-right:14px; margin-right:6px;
  border-right:1px solid var(--kartenrand);}

/* ---------- Navigation auf schmalen Fenstern ----------
   Unter 900 px waren die Links bisher einfach weg. Jetzt klappt ein Knopf die
   Linkliste unter der Kopfzeile auf — ohne Bibliothek, ein Attribut schaltet. */
.nav__menue{display:none; font:600 13px var(--font-text); color:var(--text-head);
  background:var(--panel); border:1px solid var(--kartenrand); border-radius:6px;
  padding:8px 12px; cursor:pointer;}
@media (max-width:900px){
  .nav__inner{flex-wrap:wrap; gap:10px 12px;}
  .nav__menue{display:inline-block; order:2;}
  .nav__cta{order:3;}
  .nav__links{display:none; order:4; flex-basis:100%; flex-direction:column; gap:0;
    border-top:1px solid var(--kartenrand); padding-top:6px;}
  .nav__inner[data-offen="1"] .nav__links{display:flex;}
  .nav__links a{padding:10px 2px; border-bottom:1px solid var(--kartenrand);}
  .nav__links a:last-child{border-bottom:0;}
  .nav__zurueck{border-right:0 !important; margin-right:0 !important;}
}

/* ---------- Schnellstart und Kopf auf schmalen Fenstern ----------
   Die Mobilregeln des Schnellstarts sind beim Zusammenlegen der Stylesheets
   nicht mitgekommen — drei Spalten mit gestapelten Mockups liefen bei 400 px
   um 230 px über den Rand. Jetzt eine Spalte, Bühnen in voller Breite. */
@media (max-width:900px){
  .sst-grid{grid-template-columns:1fr; grid-auto-flow:row; row-gap:8px;}
  .sst-sp{display:contents;}
  .sst-buehne{padding:0; place-items:start stretch;}
  .sst-buehne > *{width:100%;}
  .sst-fluss{height:auto; min-height:0;}
  .sst-fluss__quelle, .sst-fluss__ziel{position:static; width:100%;}
  .sst-fluss__quelle{display:none;}          /* das Ergebnis reicht; die Quelle verdeckte es */
  .sst-blaetter{height:auto;}
  .sst-blatt{position:static; width:100%;}
  .sst-blatt--hinten{display:none;}
  .sst-kopf{margin-top:14px;}
  .sst-text{margin-bottom:22px;}
  /* Kopf der Übersicht: Text zuerst, dann das Bild — im Quelltext steht das
     Bild vorne, weil es auf dem Desktop hinter dem Text liegt. */
  .hero--kopf > .container{display:flex; flex-direction:column;}
  .hero--kopf .hero__bildfeld{order:2;}
}

/* Die Artikelliste stand in einem .table-scroll, der für die Vergleichstabelle
   der Etappe gebaut ist und dort als Inline-Kasten sitzt — hier war er zwei
   Pixel breit, die Tabelle ragte heraus und ließ rechts Rahmenreste stehen.
   Im Aufklapper ist er ein normaler Block, der bei Bedarf waagerecht scrollt. */
.artikelbox .table-scroll{display:block; width:100%; overflow-x:auto; margin:0;
  border:0; box-shadow:none; background:transparent; padding:0; border-radius:0;}


/* ============================================================
   Icons · Systemhandbuch 04, Icon-System v4
   Zwei Formen: der Icon-Punkt (Ellipse rx 22.4/ry 24 in der Gruppenfläche,
   Glyphe weiß #FBFBF7, auf .76 skaliert) für Karten- und Listenköpfe, und
   die frei stehende Glyphe im Iconton der Gruppe. Service & Handel führt
   Hellblau #5389B9 als Fläche und Iconton; Käse führt #EEA842 als Fläche
   und #C37500 als Iconton. Nie mehrfarbig, Farbe kommt über currentColor.
   ============================================================ */
.ipunkt{width:40px; height:40px; flex:none; display:block; --punkt:#5389B9;}
.ipunkt ellipse{fill:var(--punkt);}
.ipunkt__glyphe{color:#FBFBF7;}
.ipunkt--kaese{--punkt:#EEA842;}
.iglyphe{width:24px; height:24px; flex:none; color:#5389B9;}
.iglyphe--kaese{color:#C37500;}

/* Etappenkopf: Punkt und Thema in einer Zeile — der Listenkopf des Handbuchs. */
.etappe__kopf{display:flex; align-items:center; gap:11px; margin-bottom:10px;}
.etappe__kopf .ipunkt{width:34px; height:34px;}

/* ---------- Unser Service (vor dem Planer) ---------- */
.service-raster{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.service{padding:22px 24px 24px;}
.service .ipunkt{margin-bottom:16px;}
.service__fakt{display:block; font-weight:600; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--preisblau); margin-bottom:6px;}   /* Schriftton Service = Preis-Blau */
.service h3{font-size:17px; line-height:1.2; margin:0 0 7px;}
.service p{font-size:13.5px; line-height:1.55; color:var(--text-body); margin:0;}
@media (max-width:900px){.service-raster{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.service-raster{grid-template-columns:1fr;}}

/* ---------- Planer: Portionierung als erster Schritt ----------
   Die Option steht vor den Etappenzeilen und die Stückgröße ist immer sichtbar,
   nur bis zum Häkchen gesperrt — vorher war das Feld erst nach dem Klick da
   und wurde übersehen. */
.pl-option--oben{margin:18px 0 0; display:grid; grid-template-columns:1fr auto; gap:14px 28px; align-items:center;}
.pl-feld.pl-stueck{display:flex; align-items:center; gap:14px; background:var(--papier);
  border:1px solid var(--kartenrand); border-radius:8px; padding:10px 14px; transition:opacity .15s;}
.pl-stueck .pl-label{margin:0; white-space:nowrap;}
.pl-stueck .pl-einheit{white-space:nowrap;}
.pl-stueck input{max-width:80px;}
.pl-stueck:has(input:disabled){opacity:.5;}
.pl-option--oben .pl-option__rechnung{grid-column:1/-1; margin:0; padding-top:12px; border-top:1px solid var(--kartenrand);}
.pl-option--oben + .planzeile{margin-top:18px;}
.pl-g{font-variant-numeric:tabular-nums;}

/* ---------- Seitenende: ein Knopf je Paket, Kontaktzeile statt Knopfreihe ---------- */
.paket__cta{align-items:center; gap:10px 18px;}
.paket__einzeln{font-size:13.5px; font-weight:600; color:var(--preisblau); text-decoration:none;}
.paket__einzeln:hover{text-decoration:underline;}
.kontaktzeile{display:grid; grid-template-columns:1.3fr 1fr; gap:30px 48px; align-items:center;
  background:var(--panel); border:1px solid var(--kartenrand); border-radius:12px; padding:30px 36px;}
.kontaktzeile h2{font-size:24px; margin-bottom:.35em;}
.kontaktzeile p{margin:0; font-size:15px; color:var(--text-body); max-width:60ch;}
.kontaktzeile__wege{display:grid; gap:12px;}
.kontaktzeile__wege a{display:flex; align-items:center; gap:14px; text-decoration:none; background:var(--papier);
  border:1px solid var(--kartenrand); border-radius:8px; padding:12px 16px;}
.kontaktzeile__wege a:hover{border-color:var(--hellblau);}
.kontaktzeile__wege b{display:block; font-family:var(--font-head); font-size:17px; color:var(--preisblau); line-height:1.2;}
.kontaktzeile__wege small{display:block; font-size:12.5px; color:var(--text-sek); margin-top:3px;}
@media (max-width:820px){.kontaktzeile{grid-template-columns:1fr; padding:24px 22px;}}
/* Die Mobilregel muss hinter der Desktopregel stehen — gleiche Spezifität, die
   spätere gewinnt. Vorher stand sie weiter oben und blieb wirkungslos. */
@media (max-width:640px){
  .pl-option--oben{grid-template-columns:1fr;}
  .pl-feld.pl-stueck{justify-content:space-between;}
}

/* Excel-Kachel: dieselbe Textvorschau wie die CSV, nur mit Tabellenlinien statt Semikola. */
.dl-thumb--xlsx{background:#F4F9F4; color:#3E6B44;}

/* Regionsporträts: Der Schlusssatz „Im Käse:“ sitzt in jeder Karte unten auf derselben
   Höhe — die Karten einer Zeile sind gleich hoch (Grid), der Textkörper wird Flex-Spalte
   und schiebt den Schlusssatz ans Ende. Vorher hing er je nach Textlänge verschieden hoch. */
.region__body{display:flex; flex-direction:column; flex:1;}
.region__body > p:not(.region__fazit):last-of-type{margin-bottom:14px;}
.region__fazit{margin-top:auto;}

/* Downloadlisten unter 560 px einspaltig — zwei Spalten à 160 px ließen die Kacheln
   der Herkunft-Seite um 14 px über den Rand laufen (Kästchen + Vorschaubild + Text). */
@media (max-width:560px){
  .dl-liste--spalten{grid-template-columns:1fr;}
}
@media (max-width:560px){
  /* Spaltenköpfe wie „Für euer eigenes Design“ liefen als Einzeiler über den Rand. */
  .dl-spaltenkopf{white-space:normal; overflow-wrap:anywhere;}
  .dl-item, .dl-link{min-width:0;}
}
@media (max-width:560px){
  /* Die Spaltenlisten tragen ihre Spaltenzahl als Inline-Variable, und unter 1000 px setzen
     Attributselektoren ([style*="--dl-spalten:2"]) die Spalten explizit — eine einfache
     Klassenregel kommt dagegen nicht an. Auf dem Telefon gilt: eine Spalte, Punkt. */
  .dl-gruppe .dl-liste--spalten, .dl-gruppe .dl-liste--spalten[style]{grid-template-columns:1fr !important;}
  .dl-link .t, .dl-link .s{overflow-wrap:anywhere;}
}