/* ==========================================================================
   Servus Gelting — Startseite

   1:1 nach dem Canvas-Rendering. Quellen:
   canvas/roesterei/variant-h2.jsx       — Aufbau, Über uns, Stores, Instagram
   canvas/roesterei/variant-h.jsx        — Hero, B2B, Buttons, Grundpalette
   canvas/roesterei/sorten-versionen.jsx — Sorten-Bühne (S2d)

   Alle Zahlenwerte stammen aus diesen Dateien. Nicht schätzen,
   nicht glätten — bei Änderungen dort nachschlagen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero — HeroH, Abschnitt 800px
   -------------------------------------------------------------------------- */

/* Der Hero füllt den Schirm — auf jedem Gerät.

   Das Artboard kann das nicht ausdrücken (feste 800px, keine
   vh-Einheiten im ganzen Canvas), zeigt die Absicht aber deutlich:
   748 von 800px auf Desktop, 640px auf Mobil — jeweils praktisch die
   volle Schirmhöhe. svh statt vh, damit die Adressleiste mobiler
   Browser die Höhe nicht springen lässt. */
.hero {
  /* --hero-rand steht in basis.css, weil beide Kopfzeilen ihn nutzen. */
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 640px;
  padding: 26px;
}

.hero__buehne {
  position: relative;
  height: 100%;
  border-radius: 12px;
  background: #180F09;
}

/* Der Hero ist bewusst NICHT auf --maxw-page begrenzt — anders als die
   regulären Abschnitte. Er nutzt die volle Schirmbreite; der seitliche
   Abstand wächst stattdessen mit (siehe --hero-rand). */
.hero__inhalt {
  position: absolute;
  inset: 0;
  width: 100%;
}

.hero__schleier {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(
    180deg,
    rgba(16, 9, 5, .5) 0%,
    rgba(16, 9, 5, .1) 40%,
    rgba(16, 9, 5, .7) 100%
  );
}

.hero__text {
  position: absolute;
  left: var(--hero-rand);
  right: var(--hero-rand);
  bottom: 64px;
  max-width: 860px;
  color: #F6EEDF;
}

.hero__eyebrow { display: block; margin-bottom: 20px; }

.hero__titel {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 82px;
  line-height: .98;
  letter-spacing: .005em;
  text-transform: uppercase;
}

.hero__subline {
  max-width: 520px;
  margin: 24px 0 32px;
  font-size: 18px;
  line-height: 1.65;
  color: rgba(246, 238, 223, .82);
}


/* --------------------------------------------------------------------------
   2. Sorten-Bühne — S2d in S2Frame, Abschnitt 900px

   S2Frame läuft mit open=true: die Bühne hat bewusst keine Kartenfläche,
   keinen Rahmen und keine Rundung.
   -------------------------------------------------------------------------- */

.sorten {
  height: 900px;
  padding-top: 66px;
  display: flex;
  flex-direction: column;
}

.sorten__pfeile { display: flex; gap: 10px; }

.sorten__pfeil {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid rgba(30, 22, 16, .4);
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.sorten__pfeil:hover { background: var(--espresso); border-color: var(--espresso); }
.sorten__pfeil:hover svg { stroke: #F6EEDF; }

.sorten__buehne {
  position: relative;
  flex: 1;
  margin-top: 30px;
  overflow: hidden;
}

/* Wasserzeichen — 380px in der Sortenfarbe bei 10 % */
.sorten__wasserzeichen {
  position: absolute;
  left: 0;
  right: 0;
  top: 64px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-watermark);
  line-height: 1;
  letter-spacing: var(--tr-watermark);
  color: var(--world);
  opacity: .1;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}

.sorten__bild {
  position: absolute;
  left: 50%;
  top: 36px;
  transform: translateX(-50%);
  height: 470px;
  width: auto;
  filter: drop-shadow(0 30px 34px rgba(45, 22, 5, .28));
}

.sorten__spalte {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

.sorten__spalte--links  { left: 44px;  width: 300px; }
.sorten__spalte--rechts { right: 44px; width: 320px; }

.sorten__spec { margin-bottom: 26px; }

.sorten__spec dt {
  margin-bottom: 7px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--amber);
  opacity: .8;
}

.sorten__spec dd {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--espresso);
}

.sorten__kennung {
  margin-bottom: 14px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--amber);
}

/* Sortenname — hier ausdrücklich NICHT in Versalien, anders als
   sonst beim Display-Einsatz. So zeigt es S2d. */
.sorten__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 84px;
  line-height: .95;
  color: var(--espresso);
}

.sorten__beschreibung {
  margin: 16px 0 14px;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.42;
  color: #B0521F;
}

.sorten__claim {
  margin-bottom: 26px;
  font-size: 14.5px;
  color: var(--muted-brown);
}

.sorten__shophinweis {
  margin-top: 14px;
  font-size: 12px;
  color: var(--muted-brown);
}

/* S2Selector — Auswahlreihe der sechs Sorten */
.sorten__auswahl {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 16px 0 18px;
}

.sorten__knopf {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 18px 7px 8px;
  border-radius: 10px;
  border: 1px solid var(--linie);
  opacity: .7;
  transition: opacity var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.sorten__knopf:hover { opacity: 1; }
.sorten__knopf { cursor: pointer; }

/* Die Pfeile sind Knöpfe, keine Grafik. */
.sorten__pfeil { cursor: pointer; }

.sorten__knopf.ist-aktiv {
  border-color: var(--amber);
  background: #FBF4E6;
  opacity: 1;
}

.sorten__knopf img { height: 56px; width: auto; }

.sorten__knopf span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--espresso);
}


/* --------------------------------------------------------------------------
   3. Über uns — UeberUnsH2, Abschnitt 720px
   -------------------------------------------------------------------------- */

.ueberuns {
  height: 720px;
  padding-block: 80px;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: center;
}

.ueberuns .eyebrow { display: block; margin-bottom: 14px; }
.ueberuns .h2 { font-size: 42px; }

.ueberuns__text p { max-width: 430px; }
.ueberuns__text p:nth-of-type(1) { margin: 22px 0 12px; }
.ueberuns__text p:nth-of-type(2) { margin: 0 0 32px; }

.ueberuns__hinweis {
  margin-top: 14px;
  font-size: 12px;
  color: var(--muted-brown);
}

.ueberuns__bilder {
  display: grid;
  grid-template-columns: 8fr 5fr;
  grid-template-rows: 1fr 1fr;
  gap: 18px;
  height: 520px;
}

.ueberuns__bilder .platzhalter { border-radius: 10px; }
.ueberuns__bilder .platzhalter:first-child { grid-row: 1 / span 2; }


/* --------------------------------------------------------------------------
   4. Café & Stores — ErhaeltlichH2, Abschnitt 760px
   -------------------------------------------------------------------------- */

.stores {
  height: 760px;
  padding-top: 76px;
}

.stores .abschnitt__kopf { margin-bottom: 34px; }

.stores__raster {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 24px;
  height: 480px;
}

.stores__cafe {
  display: grid;
  grid-template-columns: 5fr 6fr;
  border-radius: 12px;
  border: 1px solid var(--linie);
  background: #FFFCF4;
  overflow: hidden;
}

.stores__cafetext {
  padding: 34px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stores__cafetext .marke { margin-bottom: 16px; }

.stores__cafename {
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  text-transform: uppercase;
  color: var(--espresso);
}

.stores__cafetext > p {
  margin-bottom: 22px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted-brown);
}

.stores__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }

.stores__liste {
  display: flex;
  flex-direction: column;
  padding: 30px 34px;
  border-radius: 12px;
  border: 1px solid var(--linie);
  background: var(--flaeche-karte);
}

.stores__liste .eyebrow { display: block; margin-bottom: 6px; }

.stores__vorspann {
  margin-bottom: 8px;
  font-size: 13.5px;
  color: var(--muted-brown);
}

.stores__zeile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px 0;
  border-bottom: 1px solid var(--linie);
}
/* Die letzte Store-Zeile traegt keine Trennlinie — darunter folgt schon
   die des Haendler-Verweises. „:last-of-type" griff nie: .stores__fuss
   ist ebenfalls ein div und damit das letzte seiner Art. Ergebnis waren
   zwei Linien dicht untereinander, auf Desktop wie auf dem Telefon.
   Die Zeile vor dem Fuss ist das vorletzte Kind der Liste. */
.stores__zeile:nth-last-child(2),
.stores__zeile:last-child { border-bottom: none; }
.stores__zeile > div { flex: 1; }

.stores__ladenname { font-size: 15.5px; font-weight: 700; color: var(--espresso); }
.stores__ort { margin-top: 2px; font-size: 13px; color: var(--muted-brown); }

.stores__fuss { margin-top: auto; }

.stores__haendler {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--linie);
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--amber);
}
.stores__haendler:hover { text-decoration: underline; }

.stores__fussnote {
  margin-top: 12px;
  font-size: 11.5px;
  color: var(--muted-brown);
}


/* --------------------------------------------------------------------------
   5. B2B & Führungen — B2bH, Abschnitt 360px
   -------------------------------------------------------------------------- */

.b2b {
  height: 360px;
  display: flex;
  align-items: center;
}

.b2b__kasten {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 52px;
  padding: 46px 52px;
  border-radius: 14px;
  background: var(--espresso);
  color: #F6EEDF;
}

.b2b__trenner { background: rgba(246, 238, 223, .18); }

.b2b .eyebrow { display: block; margin-bottom: 12px; }

.b2b__titel {
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 29px;
  text-transform: uppercase;
}

.b2b__kasten p {
  margin-bottom: 24px;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(246, 238, 223, .7);
}


/* --------------------------------------------------------------------------
   6. Instagram — InstaH2, Abschnitt 560px
   -------------------------------------------------------------------------- */

.insta {
  height: 560px;
  padding-top: 72px;
}

.insta .abschnitt__kopf { margin-bottom: 32px; }
.insta .h2 { font-size: 40px; }

.insta__raster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.insta__post { height: 298px; border-radius: 10px; }

.insta__zeichen { position: absolute; top: 14px; right: 14px; z-index: 2; }


/* --------------------------------------------------------------------------
   7. Schmalere Fenster

   Zwei Stufen: bis 1200px bricht die Desktop-Fassung sauber um, damit
   auf schmalen Fenstern nichts zerläuft. Ab 767px gilt das eigene
   Mobil-Layout der Vorlage (Artboard „01 · Startseite — Mobile 390",
   VariantHMobile) — eigene Maße, nicht nur ein Umbruch.
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  .sorten, .ueberuns, .stores, .b2b, .insta { height: auto; }
  .stores__raster { height: auto; }

  .ueberuns,
  .stores__raster,
  .b2b__kasten { grid-template-columns: 1fr; }
  /* Die Café-Karte stapelt erst auf dem Telefon, nicht schon hier. Bis zum
     15.09.2026 tat sie es ab 1200px — und das Foto fiel zwischen 768 und
     1200px auf null Höhe, die 190px bekam es nur mobil. Neben dem Text
     nimmt es dessen Höhe an, wie am Desktop. Vom Kunden so gewählt. */

  /* Sobald der Kasten stapelt, wird aus der senkrechten Trennlinie eine
     waagerechte zwischen den beiden Themen — so zeigt es die
     Mobil-Vorlage. Ganz ausblenden ließ die beiden unvermittelt
     aneinanderstoßen. Der Rasterabstand muss dafür weichen, sonst
     umrahmt er die 1px-Linie ein zweites Mal. */
  .b2b__trenner {
    height: 1px;
    margin: 26px 0;
  }
  .b2b__kasten { gap: 0; }
  .b2b { padding-block: 60px; }
  .ueberuns { padding-block: 60px; }
  .stores, .insta { padding-bottom: 60px; }
  .ueberuns__text p { max-width: none; }

  .insta__raster { grid-template-columns: repeat(2, 1fr); }

  /* Die Sorten-Bühne ist absolut positioniert — hier wird ein Fluss daraus */
  .sorten__buehne {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding-bottom: 32px;
  }

  .sorten__wasserzeichen { position: static; }
  .sorten__bild { position: static; transform: none; height: 340px; }

  .sorten__spalte {
    position: static;
    transform: none;
    width: 100%;
    max-width: 420px;
  }
}

@media (max-width: 767px) {

  /* --- Hero ------------------------------------------------------- */
  /* Rahmen 14px statt 26, Ecken 14px statt 12. Die Höhe bleibt bei
     100svh: Das Artboard nennt feste 640px, aber der Hero soll laut
     Absprache auf jedem Gerät den Schirm füllen. */
  .hero { padding: 14px; }
  .hero__buehne,
  .hero__schleier { border-radius: 14px; }

  .hero__text { left: 24px; right: 24px; bottom: 36px; }
  .hero__eyebrow { font-size: 10.5px; letter-spacing: .26em; margin-bottom: 14px; }
  .hero__titel { font-size: 40px; line-height: .98; overflow-wrap: break-word; }
  .hero__subline { font-size: 15px; margin: 16px 0 22px; }
  .hero__text .btn { display: flex; width: 100%; justify-content: center; }

  /* --- Abschnitte ------------------------------------------------- */
  .abschnitt { padding-inline: 24px; }
  .sorten { padding-block: 48px 36px; }
  .ueberuns { padding-block: 44px; }
  .stores { padding-block: 44px; }
  .b2b { padding: 8px 24px 44px; }
  .insta { padding: 0 24px 44px; }

  .h2 { font-size: 30px; line-height: 1.04; }
  .eyebrow { font-size: 10.5px; letter-spacing: .26em; }
  /* Vorlage: 10px unter dem Versal-Label, nicht 12. */
  .abschnitt__kopf .eyebrow,
  .sorten .eyebrow, .ueberuns .eyebrow,
  .stores .eyebrow, .insta .eyebrow { margin-bottom: 10px; }

  /* Knöpfe nach BtnM der Mobil-Vorlage. Mit den Desktop-Maßen waren
     „Ins Café" und „Route planen" zusammen zu breit und brachen auf
     zwei Zeilen um — 120px statt 53. */
  /* .hero__text statt .hero: Die Kopfzeile liegt im Hero, und .hero .btn
     hätte die Shop-Pille mitgenommen. */
  .hero__text .btn, .sorten .btn, .ueberuns .btn,
  .stores .btn, .b2b .btn, .insta .btn {
    padding: 15px 26px;
    font-size: 13px;
    letter-spacing: .1em;
    border-radius: 8px;
    gap: 9px;
  }
  .sorten .btn--pille { border-radius: 999px; }

  /* --- Sorten-Bühne ----------------------------------------------- */
  /* Die Pfeile der Bühne entfallen; auf dem Telefon wird gewischt. */
  .sorten__pfeile { display: none; }

  /* Die Bühne ist auch auf dem Telefon eine Bühne, kein Stapel: Das
     Wasserzeichen liegt hinter dem Bild, nicht darüber. Der 1200er-Block
     löst beides in den Fluss auf — hier wird das zurückgenommen.
     Artboard: Bühne genau 360px hoch, so hoch wie das Bild. */
  .sorten__buehne {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Vorlage: 26px zwischen Überschrift und Bühne. Die Grundregel
       setzt 30, dazu kam der Abstand des Abschnittskopfes. */
    margin-top: 26px;
    /* Der 1200er-Block zentriert die Kinder. Im Artboard steht alles
       linksbündig an der Abschnittskante — Kennung, Name, Beschreibung,
       Claim. Ohne dieses stretch sitzen sie mittig. */
    align-items: stretch;
    gap: 0;
    padding-bottom: 0;
  }

  .sorten__wasserzeichen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 150px;
  }

  .sorten__bild {
    position: relative;
    /* Die Desktop-Regel setzt left:50% für die absolute Bühne. Mit
       position:relative wirkt das als Verschiebung um die halbe
       Containerbreite — das Bild lief 120px über die rechte Kante. */
    left: auto;
    right: auto;
    height: 360px;
    margin: 0 auto 22px;
  }

  /* Reihenfolge des Artboards: Kennung, Name, Beschreibung, Claim,
     dann die Angaben, dann der Knopf. Im Desktop-Markup liegen die
     Angaben in einer eigenen Spalte davor. Beide Spalten werden
     aufgelöst, dann greift die Ordnung. */
  .sorten__buehne { display: flex; flex-direction: column; }

  /* Nur die rechte Spalte wird aufgelöst. Die linke ist das
     Angaben-Raster selbst und muss ein Kasten bleiben. */
  .sorten__spalte--rechts { display: contents; }
  .sorten__spalte { max-width: none; }

  .sorten__bild               { order: 1; }
  .sorten__kennung            { order: 2; }
  .sorten__name               { order: 3; }
  .sorten__beschreibung       { order: 4; }
  .sorten__claim              { order: 5; }
  .sorten__spalte--links      { order: 6; }
  .sorten__spalte--rechts .btn,
  /* Bei Bruno steht statt des Knopfes die Marke — gleiche Stelle. */
  .sorten__spalte--rechts .marke { order: 7; }
  .sorten__shophinweis        { order: 8; }

  .sorten__kennung { font-size: 11.5px; letter-spacing: .26em; }
  .sorten__name { font-size: 56px; line-height: .92; }
  .sorten__beschreibung { font-size: 18px; line-height: 1.4; }
  .sorten__claim { font-size: 13.5px; margin-bottom: 22px; }

  /* Vier Angaben im Zweierraster statt untereinander */
  .sorten__spalte--links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 24px;
    padding-block: 22px;
    /* Ohne den unteren Abstand klebt „Luigi entdecken" an der
       Trennlinie. Die Vorlage lässt 22px. */
    margin-bottom: 22px;
    border-top: 1px solid var(--linie);
    border-bottom: 1px solid var(--linie);
  }

  .sorten__spalte--rechts .btn { display: flex; width: 100%; justify-content: center; }

  /* Sortenauswahl wird zur wischbaren Leiste */
  .sorten__auswahl {
    display: flex;
    /* Die Grundregel umbricht — hier soll die Leiste stattdessen
       seitlich hinauslaufen und wischbar sein. */
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 10px;
    overflow-x: auto;
    padding-block: 22px 4px;
    scrollbar-width: none;
  }
  .sorten__auswahl::-webkit-scrollbar { display: none; }
  .sorten__knopf {
    flex-shrink: 0;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
  }
  .sorten__knopf img { height: 54px; }

  /* --- Über uns --------------------------------------------------- */
  /* Die Vorlage stellt die Bilder zwischen die Absätze und den Knopf.
     Im Markup stecken Knopf und Hinweis im Textblock, die Bilder sind
     ein Geschwister danach — deshalb standen sie unter dem Knopf.
     Der Textblock wird aufgelöst, dann greift die Ordnung. */
  /* gap:0 — der Rasterabstand von 64px wirkt im Flex-Container weiter
     und hätte zwischen sieben Elementen 384px eingezogen. Die Vorlage
     arbeitet stattdessen mit Außenabständen je Element. */
  /* align-items:stretch gegen das center der Grundregel: Im Flex-Container
     zentriert das nicht nur, es lässt die Kinder auch auf Inhaltsbreite
     schrumpfen — das Bilderraster fiel zu einem schmalen Streifen
     zusammen. Dieselbe Falle wie bei der Sorten-Bühne. */
  .ueberuns {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .ueberuns__text { display: contents; }

  .ueberuns__text p:nth-of-type(1) { margin: 18px 0 10px; }
  .ueberuns__text p:nth-of-type(2) { margin: 0 0 24px; }
  .ueberuns__bilder { margin-bottom: 24px; }
  .ueberuns__hinweis { margin-top: 12px; }

  .ueberuns .eyebrow       { order: 1; }
  .ueberuns .h2            { order: 2; }
  .ueberuns .fliesstext    { order: 3; }
  .ueberuns__bilder        { order: 4; }
  .ueberuns__text .btn     { order: 5; }
  .ueberuns__hinweis       { order: 6; }

  .ueberuns__bilder {
    /* Ohne height:auto bleibt die feste Desktop-Höhe von 520px stehen
       und das Raster legt eine dritte Reihe für den Rest an. */
    height: auto;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 150px 110px;
    gap: 12px;
  }
  /* Ausdrücklich gesetzt statt über span: Mit reiner Selbstverteilung
     legte das Raster eine leere dritte Reihe an und hängte 12px an. */
  /* Mit .platzhalter im Selektor, sonst gewinnt
     „.ueberuns__bilder .platzhalter:first-child { grid-row: 1 / span 2 }"
     aus der Desktop-Fassung auf der Zeilenachse. Das erste Bild spannte
     dadurch über beide Zeilen und die zwei kleinen lagen darauf — die
     Kästen wirkten ineinandergeschoben. */
  .ueberuns__bilder .platzhalter:nth-child(1) { grid-area: 1 / 1 / 2 / 3; }
  .ueberuns__bilder .platzhalter:nth-child(2) { grid-area: 2 / 1 / 3 / 2; }
  .ueberuns__bilder .platzhalter:nth-child(3) { grid-area: 2 / 2 / 3 / 3; }
  .ueberuns__text .btn { display: flex; width: 100%; justify-content: center; }
  .ueberuns__hinweis { text-align: center; }

  /* --- Café und Stores -------------------------------------------- */
  /* Auf dem Desktop steht das Bild neben dem Text, auf dem Telefon
     darüber. Beim Umbruch verliert der Platzhalter seine Höhe aus der
     Rasterzeile und fällt auf null zusammen — das Bild verschwand
     ganz. Das Artboard gibt ihm 190px. */
  /* Vorlage: 22px zwischen Überschrift und Café-Karte, nicht 34. */
  .stores .abschnitt__kopf { margin-bottom: 22px; }
  /* „Zu allen Partnern" (14.09.2026) bricht unter die Überschrift und
     läuft über die volle Breite, wie „Folgen" unter den Instagram-Kacheln. */
  .stores .abschnitt__kopf { row-gap: 18px; }
  .stores .abschnitt__kopf > .btn { display: flex; width: 100%; justify-content: center; }
  .b2b .eyebrow { margin-bottom: 10px; }

  /* 18px zwischen Café-Karte und Store-Liste, nicht 24. */
  .stores__raster { gap: 18px; }
  .stores__cafe { grid-template-columns: 1fr; border-radius: 12px; overflow: hidden; }
  .stores__cafe > .platzhalter { height: 190px; }

  /* Im Artboard liegt die Marke oben links auf dem Bild, nicht über
     dem Namen. Die Karte wird dafür zum Bezugsrahmen. */
  .stores__cafe { position: relative; }
  .stores__cafetext { padding: 24px 22px; }
  .stores__cafetext > .marke {
    position: absolute;
    top: 14px;
    left: 14px;
    margin-bottom: 0;
    z-index: 2;
  }
  .stores__cafename { font-size: 25px; }
  .stores__knoepfe { display: flex; gap: 10px; margin-top: 18px; }

  .stores__liste { border-radius: 12px; padding: 24px 22px; }
  .stores__zeile { padding: 13px 0; gap: 12px; }
  .stores__haendler { padding-top: 16px; font-size: 13px; }

  /* --- Nachlauf 07.09.2026 -----------------------------------------
     Die Seite war vor dem Abgleichwerkzeug gebaut und nur nach
     Abschnittshöhen geprüft. Was folgt, hat erst die Baustein-Prüfung
     gefunden: Schriftgrade, Zeilenhöhen, Sperrung und Innenmaße, die
     einzeln unauffällig sind und sich auf 221px summiert haben. */

  /* Über dem Hero ist die Shop-Pille im Artboard eine Spur größer als
     auf den Unterseiten. Nur der durchsichtige Zustand — kompakt trägt
     sie dieselben Maße wie überall. */
  .kopfzeile:not(.ist-kompakt) .kopfzeile__nav--rechts .btn { padding: 9px 16px; }

  .hero__subline { line-height: 1.6; }

  /* Sortenwelt */
  .sorten .h2, .ueberuns .h2, .stores .h2, .insta .h2 { letter-spacing: .01em; }
  .sorten__kennung { margin-bottom: 8px; }
  .sorten__beschreibung { margin: 14px 0 10px; }
  .sorten__claim { line-height: 1.6; }
  .sorten__spec dd { letter-spacing: normal; }
  .sorten__knopf .btn, .sorten .btn { font-weight: 800; }

  /* Über uns — beide Absätze standen auf 16px statt 15px und liefen
     deshalb eine Zeile länger. Das allein waren 39px. */
  .ueberuns .fliesstext { font-size: 15px; line-height: 1.6; }
  .ueberuns__hinweis { font-size: 11.5px; line-height: 1.55; }

  /* Café-Karte. Block statt Flex, damit die Ränder wie in der Vorlage
     zusammenfallen — sonst zählt der Abstand zwischen Öffnungszeiten
     und Knöpfen doppelt. */
  .stores__cafetext { display: block; }
  .stores__cafetext > .marke { padding: 6px 12px; }
  .stores__cafetext > .stores__cafename { line-height: 1.55; margin-bottom: 8px; }
  .stores__cafetext > p { font-size: 14px; line-height: 1.6; margin-bottom: 18px; }
  .stores__cafetext .icon-zeile { gap: 12px; margin-bottom: 11px; }

  /* Store-Liste */
  .stores__liste .eyebrow { margin-bottom: 4px; }
  .stores__vorspann { margin-bottom: 4px; }
  .stores__zeile .marke { padding: 4px 10px; }
  .stores__ort { margin-top: 1px; }
  .stores__fuss { margin-top: 4px; }
  .stores__haendler { padding-top: 16px; }

  /* --- B2B und Führungen ------------------------------------------ */
  /* Auf dem Desktop ist der Kasten ein Zweispaltenraster mit 52px
     Abstand. Auf dem Telefon stapelt die Vorlage beides in einem
     einfachen Block — der Rasterabstand hätte den Trenner doppelt
     umrahmt und 104px zu viel gebracht. */
  .b2b__kasten { border-radius: 14px; padding: 30px 26px; gap: 0; }

  .b2b__kasten p { line-height: 1.6; }
  .b2b__kasten .btn { display: flex; width: 100%; justify-content: center; }

  /* --- Schriftgrade nach Artboard ---------------------------------
     Drei Überschriften griffen gar nicht: „.ueberuns .h2" wiegt
     schwerer als „.h2", und „.stores__cafetext > p" bzw.
     „.b2b__kasten p" schlagen die Klassen der beiden Titel. Deshalb
     hier mit gleichem Gewicht dagegengehalten. */
  .ueberuns .h2 { font-size: 30px; }

  .stores__cafetext > .stores__cafename {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 25px;
    text-transform: uppercase;
    color: var(--espresso);
  }

  .b2b__kasten .b2b__titel {
    margin-bottom: 10px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 26px;
    line-height: 1.55;
    text-transform: uppercase;
    color: #F6EEDF;
  }

  /* Angaben, Sortenleiste und Store-Liste sind auf dem Telefon
     durchgehend eine Spur kleiner als auf dem Desktop. */
  /* Der Außenabstand der Grundregel addiert sich auf den Rasterabstand
     und machte das Angabenraster 235px hoch statt 183. */
  .sorten__spec { margin-bottom: 0; }
  .sorten__spec dt { font-size: 9.5px; letter-spacing: .28em; margin-bottom: 5px; }
  .sorten__spec dd { font-size: 15px; }
  .sorten__knopf span { font-size: 10.5px; letter-spacing: .1em; }

  .stores__cafetext .marke { font-size: 9.5px; letter-spacing: .18em; }
  .stores__cafetext .icon-zeile { font-size: 14.5px; }
  .b2b__kasten p:not(.b2b__titel) {
    /* Vorlage: 14px, Deckkraft .72, 20px Abstand nach unten. */
    font-size: 14px;
    margin-bottom: 20px;
    color: rgba(246, 238, 223, .72);
  }
  .stores__vorspann { font-size: 12.5px; }
  .stores__ladenname { font-size: 14.5px; }
  .stores__ort { font-size: 12.5px; }
  .stores__liste .marke--kontur { font-size: 9.5px; letter-spacing: .14em; }
  .stores__haendler { font-size: 13px; }

  /* --- Instagram --------------------------------------------------- */
  /* Die Vorlage setzt diese eine Überschrift auf 28px statt 30 — ein
     Wort, das nirgends umbrechen kann. Bei 390px passt es damit in eine
     Zeile. Auf noch schmaleren Geräten, die das Artboard nicht mehr
     abdeckt, bricht es lieber um als die Seite breiter zu machen. */
  .insta .h2 {
    font-size: 28px;
    overflow-wrap: anywhere;
  }

  /* Im Artboard steht „Folgen" ganz unten über die volle Breite, nicht
     rechts im Abschnittskopf. display:contents löst den Kopf auf, damit
     seine beiden Kinder zu Geschwistern des Rasters werden und sich
     ordnen lassen — ohne das Markup zu verdoppeln. */
  .insta { display: flex; flex-direction: column; }
  .insta .abschnitt__kopf { display: contents; }
  .insta .abschnitt__kopf > div { order: 1; }
  .insta__raster { order: 2; grid-template-columns: 1fr 1fr; gap: 10px; }
  .insta .abschnitt__kopf > .btn { order: 3; }
  /* Vorlage: 22px unter der Überschrift, 18px über „Folgen". Das
     margin-bottom des Abschnittskopfes wirkt nicht, er ist aufgelöst. */
  .insta .abschnitt__kopf > div { margin-bottom: 22px; }
  .insta__raster { margin-bottom: 18px; }
  .insta__post { height: 165px; border-radius: 10px; }
  .insta .btn--ghost { display: flex; width: 100%; justify-content: center; }
}