/* ==========================================================================
   Servus Gelting — Sorten-Detail (/sorten/…)

   1:1 nach dem Canvas-Rendering. Quelle:
   canvas/roesterei/seite-sorten-detail-fusion.jsx

   Template für sechs CMS-Einträge, gebaut mit Luigi. Die Sortenwelt
   steckt in --world / --world-mark / --world-text — für eine andere
   Sorte reicht die Klasse am body.

   ABWEICHUNG: Die Weltkarte holt im Canvas d3, topojson und die
   Geodaten zur Laufzeit von einem CDN. Hier liegt sie als vorgerendertes
   SVG (assets/img/weltkarte-luigi.svg, erzeugt von
   design-export/html/_weltkarte-erzeugen.mjs) — gleiche Projektion,
   gleiche Geometrie, aber ohne Internet und ohne Laufzeit-JS.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Bänder — Abschnitte mit eigener Fläche laufen randlos durch,
   der Inhalt bleibt im Container.
   -------------------------------------------------------------------------- */

.band--karte {
  background: var(--flaeche-karte);
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}

.band--karte-oben {
  background: var(--flaeche-karte);
  border-top: 1px solid var(--linie);
}

.band--dunkel {
  background: var(--espresso);
  color: var(--cream);
}

/* Mono-Auszeichnung, wie monoK in der Vorlage */

/* --------------------------------------------------------------------------
   1. Hero — L3 · Hero, Abschnitt 820px
   -------------------------------------------------------------------------- */

.detail-hero {
  position: relative;
  overflow: hidden;
}

.detail-hero > .container {
  position: relative;
  height: 820px;
}

.detail-hero__mark {
  position: absolute;
  /* Zentriert über die Fläche statt über eine Verschiebung — dieselbe
     Technik wie beim Wasserzeichen der Startseite.

     Weder transform noch translate: GSAP animiert dieses Element (es ist
     Teil der Ladesequenz und trägt die Parallaxe) und setzt dabei
     translate auf none. Eine Zentrierung, die daran hängt, wäre in dem
     Moment weg. */
  left: 0;
  right: 0;
  text-align: center;
  top: 214px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 340px;
  line-height: .8;
  letter-spacing: -.03em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--world);
  opacity: .24;
  user-select: none;
  pointer-events: none;
}

.detail-hero__leiste {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 34px 96px 0;
}

.detail-hero__zurueck {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted-brown);
}
.detail-hero__zurueck:hover { color: var(--espresso); }
.detail-hero__zurueck:hover svg { stroke: var(--espresso); }

.detail-hero__fahrzeug {
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-brown);
}

.detail-hero__kopf {
  position: relative;
  margin-top: 26px;
  text-align: center;
}

.detail-hero__kennung {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Farbtupfer vor der Kennung */
.detail-hero__tupfer {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--world);
}

.detail-hero__titel {
  margin-top: 16px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 96px;
  line-height: .94;
  letter-spacing: .012em;
  text-transform: uppercase;
  color: var(--espresso);
}

.detail-hero__claim {
  margin-top: 16px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 30px;
  line-height: 1.2;
  color: var(--world-text);
}

.detail-hero__vorspann {
  max-width: 520px;
  margin: 14px auto 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--muted-brown);
}

.detail-hero__bild {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 112px;
  height: 440px;
  width: auto;
  filter: drop-shadow(0 40px 44px rgba(30, 12, 0, .3));
}

.detail-hero__knoepfe {
  position: absolute;
  right: 96px;
  bottom: 150px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
}

/* Specs-Leiste am Fuß des Heros.

   ABWEICHUNG VON DER VORLAGE, auf Wunsch: Der Canvas legt hier die
   Zweitfläche (#F9F2E4) unter, was gegen die Seitenfläche (#F1E8D6)
   als leicht abgesetzter Kasten wirkt. Die Leiste läuft stattdessen
   transparent mit dem Seitenhintergrund; nur die Trennlinie bleibt. */
.detail-hero__specs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 96px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  padding: 0 96px;
  background: transparent;
  border-top: 1px solid var(--linie);
}

.statzelle {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 28px;
  border-left: 1px solid var(--linie);
}

.statzelle dt {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-brown);
  line-height: 1;
}

.statzelle dd {
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--espresso);
}


/* --------------------------------------------------------------------------
   2. Geschmack
   -------------------------------------------------------------------------- */

.geschmack {
  padding-block: 88px 96px;
  border-bottom: 1px solid var(--linie);
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 72px;
  align-items: start;
}

.geschmack .eyebrow { display: block; margin-bottom: 16px; }

.geschmack__vorspann {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--muted-brown);
}

.geschmack__phase {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 32px;
  align-items: baseline;
  padding: 22px 0;
  border-top: 1px solid var(--linie);
}
.geschmack__phase:last-of-type { border-bottom: 1px solid var(--linie); }

.geschmack__phase dt {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--world-text);
}

.geschmack__phase dd {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 44px;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--espresso);
}

.geschmack__aromen {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.geschmack__aromen > .mono {
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-brown);
  margin-right: 4px;
}

.aroma {
  padding: 8px 14px;
  border: 1.5px solid var(--world);
  border-radius: 4px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--espresso);
}


/* --------------------------------------------------------------------------
   3. Im Charakter
   -------------------------------------------------------------------------- */

.charakter {
  padding-block: 88px 92px;
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 80px;
  align-items: start;
}

.charakter .eyebrow { display: block; margin-bottom: 16px; }
.charakter .h2 { font-size: 46px; }

.charakter__text {
  max-width: 660px;
  font-size: 19px;
  line-height: 1.7;
  color: var(--muted-brown);
}


/* --------------------------------------------------------------------------
   4. Herkunft & Röstprofil
   -------------------------------------------------------------------------- */

.herkunft {
  padding-block: 92px 96px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 88px;
}

.herkunft .eyebrow { display: block; margin-bottom: 16px; }
.herkunft .h2 { font-size: 40px; max-width: 420px; }

.herkunft__vorspann {
  max-width: 460px;
  margin: 18px 0 34px;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--muted-brown);
}

.herkunft__liste { border-top: 1px solid var(--linie); }

.herkunft__land {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--linie);
}

.herkunft__landname {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  text-transform: uppercase;
  color: var(--espresso);
}

.herkunft__landnote {
  font-size: 11.5px;
  color: var(--muted-brown);
}

/* Röstprofil-Balken */
.profil {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 34px;
  max-width: 520px;
}

.profil__zeile {
  display: grid;
  grid-template-columns: 96px 1fr 30px;
  gap: 16px;
  align-items: center;
}

.profil__label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-brown);
}

.profil__balken { display: flex; gap: 5px; }

.profil__balken span {
  flex: 1;
  height: 8px;
  border-radius: 2px;
  background: rgba(30, 22, 16, .1);
}
.profil__balken span.ist-voll { background: var(--world); }

.profil__wert {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11.5px;
  text-align: right;
  color: var(--espresso);
}

.roestnotiz {
  max-width: 520px;
  margin-top: 40px;
  padding: 22px 24px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 6px;
}

.roestnotiz .mono {
  font-size: 11.5px;
  color: var(--muted-brown);
}

.roestnotiz .roestgrad {
  display: inline-flex;
  vertical-align: middle;
  margin: 0 6px;
}


/* --------------------------------------------------------------------------
   5. Von der Farm
   -------------------------------------------------------------------------- */

.farm {
  padding-block: 92px 96px;
  display: grid;
  grid-template-columns: 440px minmax(0, 1fr);
  gap: 80px;
  align-items: center;
}

.farm .eyebrow { display: block; margin-bottom: 16px; }
.farm .h2 { font-size: 44px; max-width: 520px; }

.farm__bild {
  aspect-ratio: 4 / 5;
  border-radius: 6px;
}

.farm__text {
  max-width: 560px;
  margin-top: 20px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--muted-brown);
}

.kennwerte {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  margin-top: 36px;
}

.kennwerte dt {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-brown);
}

.kennwerte dd {
  margin-top: 5px;
  font-size: 17px;
  font-weight: 700;
  color: var(--espresso);
}


/* --------------------------------------------------------------------------
   6. Weltkarte
   -------------------------------------------------------------------------- */

.weltkarte {
  padding-block: 92px 96px;
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}

.weltkarte .eyebrow { display: block; margin-bottom: 16px; }
.weltkarte .h2 { font-size: 44px; }

.weltkarte__vorspann {
  max-width: 400px;
  margin: 18px 0 24px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--muted-brown);
}

.weltkarte__liste { border-top: 1px solid var(--linie); }

.weltkarte__land {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--linie);
}

.weltkarte__nr {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .16em;
  line-height: 1.2;
  color: var(--world-text);
}

.weltkarte__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--espresso);
}

.weltkarte__zone {
  margin-left: auto;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--muted-brown);
}

.weltkarte__karte {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: var(--espresso);
}

.weltkarte__karte img { width: 100%; height: auto; }


/* --------------------------------------------------------------------------
   7. Zubereitung
   -------------------------------------------------------------------------- */

.zubereitung {
  padding-block: 96px 100px;
  display: grid;
  grid-template-columns: 440px minmax(0, 1fr);
  gap: 80px;
  align-items: center;
}

.zubereitung .eyebrow { display: block; margin-bottom: 16px; color: var(--tan); }

.zubereitung .h2 {
  font-size: 46px;
  max-width: 560px;
  color: var(--cream);
}

.zubereitung__bild {
  aspect-ratio: 3 / 4;
  border-radius: 6px;
}

.zubereitung__vorspann {
  max-width: 520px;
  margin: 20px 0 40px;
  font-size: 16.5px;
  line-height: 1.65;
  color: rgba(246, 238, 223, .72);
}

.rezept {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  max-width: 640px;
}

.rezept > div { border-top: 1px solid rgba(246, 238, 223, .28); padding-top: 14px; }

.rezept dt {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(246, 238, 223, .6);
}

/* Ein Wert bricht nie um. Resis „90–96 °C" ist 143px breit, die Spalte
   139 — ohne nowrap stand „°C" allein in der zweiten Zeile. So ragt der
   Wert 4px in die 28px Lücke daneben. */
.rezept dd {
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--world-hell, var(--tan));
}



/* --------------------------------------------------------------------------
   8. Zitat
   -------------------------------------------------------------------------- */

.zitat {
  padding-block: 96px 100px;
  text-align: center;
}

.zitat__strich {
  width: 44px;
  height: 3px;
  margin: 0 auto 34px;
  border-radius: 2px;
  background: var(--world);
}

.zitat__satz {
  max-width: 900px;
  margin: 0 auto;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 44px;
  line-height: 1.25;
  color: var(--espresso);
}

.zitat__quelle {
  margin-top: 28px;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-brown);
}


/* --------------------------------------------------------------------------
   9. Weiterschmecken
   -------------------------------------------------------------------------- */

.weiter { padding-block: 80px 96px; }

.weiter .abschnitt__kopf { margin-bottom: 38px; }
.weiter .eyebrow { display: block; margin-bottom: 14px; }
.weiter .h2 { font-size: 38px; }

.weiter__raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.sortenkarte {
  position: relative;
  height: 320px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--flaeche);
  border: 1px solid var(--linie);
}

.sortenkarte__mark {
  position: absolute;
  left: -12px;
  bottom: -24px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 120px;
  line-height: .8;
  text-transform: uppercase;
  color: var(--karte-welt);
  opacity: .24;
  user-select: none;
  pointer-events: none;
}

.sortenkarte__bild {
  position: absolute;
  right: 20px;
  bottom: 0;
  height: 250px;
  width: auto;
  filter: drop-shadow(0 20px 24px rgba(30, 12, 0, .22));
}

.sortenkarte__inhalt {
  position: relative;
  padding: 26px 26px 0;
}

.sortenkarte__kennung {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--karte-text);
}

.sortenkarte__name {
  margin: 10px 0 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--espresso);
}

.sortenkarte__text {
  max-width: 180px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--muted-brown);
}

.sortenkarte__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--espresso);
}
.sortenkarte__link:hover { text-decoration: underline; }


/* --------------------------------------------------------------------------
   10. Schmalere Fenster

   ACHTUNG: Das Mobil-Artboard „03 · Sorten-Detail — Mobile 390"
   (SeiteSortenDetailFusionMobile) ist hier NICHT umgesetzt. Es hat unter
   anderem einen eigenen Kartenausschnitt über dem Atlantik. Was folgt,
   bricht nur die Desktop-Fassung sauber um.
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  .geschmack,
  .charakter,
  .herkunft,
  .farm,
  .weltkarte,
  .zubereitung {
    grid-template-columns: 1fr;
    gap: 44px;
  }

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

  .detail-hero > .container { height: auto; padding-bottom: 96px; }
  .detail-hero__mark { font-size: clamp(120px, 24vw, 340px); }
  .detail-hero__bild { position: static; transform: none; margin: 32px auto 0; height: 340px; }
  .detail-hero__knoepfe {
    position: static;
    flex-direction: row;
    justify-content: center;
    margin-top: 28px;
  }
  .detail-hero__specs { position: static; height: auto; padding: 24px 96px; }
}

@media (max-width: 900px) {
  .detail-hero__titel { font-size: clamp(48px, 11vw, 96px); }
  .detail-hero__specs { grid-template-columns: repeat(2, 1fr); gap: 20px; padding-inline: 0; }
  .statzelle { padding-left: 20px; }
  .geschmack__phase { grid-template-columns: 1fr; gap: 8px; }
  .geschmack__phase dd { font-size: clamp(28px, 6vw, 44px); }
  .rezept { grid-template-columns: repeat(2, 1fr); }
  .weiter__raster { grid-template-columns: 1fr; }
  .zitat__satz { font-size: clamp(26px, 5.5vw, 44px); }
  .kennwerte { gap: 28px; }
}


/* --------------------------------------------------------------------------
   Mobil — Artboard „03 · Sorten-Detail — Mobile 390"
   Gemessen gegen die eigenständige Artboard-Ausgabe des Kunden.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

  /* --- Abschnittsmaße ---------------------------------------------- */
  /* Die Vorlage fährt durchgehend 44/24/46; nur Zubereitung, Zitat und
     Weiterschmecken weichen leicht ab. */
  /* gap je Abschnitt, nicht pauschal 0. Mit 0 stießen die beiden Blöcke
     hart aneinander — bei „Von der Farm" und „Zubereitung" klebte der
     Text ohne Abstand am Bild. Die Werte stammen aus der Vorlage. */
  .geschmack,
  .charakter,
  .herkunft,
  .farm,
  .weltkarte { padding: 44px 24px 46px; }

  .geschmack  { gap: 24px; }
  .charakter  { gap: 16px; }
  .herkunft   { gap: 36px; }
  .farm       { gap: 24px; }
  .weltkarte  { gap: 22px; }
  .zubereitung { padding: 44px 24px 48px; gap: 26px; }

  /* Rasterfelder dürfen unter ihre Inhaltsbreite: Sonst hält ein langes
     Wort wie „Vollmilchschokolade" die Spalte auf und die Seite läuft
     über. Betrifft nur Geräte unter 390px, die das Artboard nicht mehr
     abdeckt — dort bricht das Wort lieber um. */
  .geschmack > *, .charakter > *, .herkunft > *,
  .farm > *, .weltkarte > *, .zubereitung > * { min-width: 0; }

  .geschmack__phase dd { overflow-wrap: anywhere; }
  .zitat       { padding: 48px 24px 52px; }
  .zitat__strich { width: 40px; margin: 0 auto 24px; }
  .zitat__satz { font-size: 25px; line-height: 1.3; }
  .zitat__quelle { margin-top: 20px; font-size: 10.5px; line-height: 1.9; }
  .weiter      { padding: 44px 24px 48px; }

  /* --- Hero --------------------------------------------------------- */
  .detail-hero > .container { height: auto; padding: 24px 24px 0; }
  .detail-hero__mark { top: 188px; font-size: 150px; }
  .detail-hero__titel { margin-top: 12px; font-size: 52px; line-height: .95; }
  .detail-hero__claim { margin-top: 12px; }
  .detail-hero__vorspann { margin: 12px auto 0; }
  .detail-hero__bild { margin: 10px auto 4px; height: 290px; }

  /* Das Fahrzeug steht auf dem Telefon in der Kennung mit („№ 01 ·
     Espresso · 1964 · Fiat 500"), die Rückzeile trägt nur den Verweis.
     Der Rückverweis steht linksbündig am Seitenrand, ohne den
     Innenabstand der Desktop-Leiste. */
  .detail-hero__fahrzeug { display: none; }
  .detail-hero__leiste { display: block; padding: 0; }
  .detail-hero__zurueck { font-size: 11px; line-height: 1.9; }
  .detail-hero__kopf { margin-top: 22px; }
  .detail-hero__knoepfe { flex-direction: column; gap: 10px; margin: 0 0 28px; }
  .detail-hero__knoepfe .btn {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 15px 26px;
    font-size: 13px;
    letter-spacing: .1em;
    border-radius: 8px;
  }

  /* --- Specs -------------------------------------------------------- */
  /* Im Artboard eine Liste aus fünf Zeilen: Beschriftung 104px, Wert
     daneben, je 13px Innenabstand — kein Raster wie auf dem Desktop. */
  /* Die Angabenliste läuft im Artboard über die volle Schirmbreite und
     setzt ihren eigenen 24px-Rand. Im Container gefangen blieben der
     Wertspalte nur 174px — „Uganda · Brasilien · Costa Rica" brach dann
     um und die Liste wuchs um 40px. */
  .detail-hero__specs {
    display: block;
    height: auto;
    margin-inline: -24px;
    padding: 20px 24px 22px;
  }

  .statzelle {
    display: grid;
    grid-template-columns: 104px 1fr;
    align-items: baseline;
    gap: 16px;
    padding: 13px 0;
    border-left: none;
  }

  .statzelle dt { font-size: 10.5px; }
  .statzelle dd { font-size: 14.5px; }

  /* --- Überschriften ------------------------------------------------ */
  /* Alle Abschnittsüberschriften stehen im Artboard auf 30px. Mit
     Abschnittsklasse davor, sonst gewinnen deren eigene Regeln —
     „.charakter .h2" steht auf 46px. */
  .geschmack .h2, .charakter .h2, .herkunft .h2, .farm .h2,
  .weltkarte .h2, .zubereitung .h2, .weiter .h2 {
    font-size: 30px;
    line-height: 1.04;
  }

  .geschmack .eyebrow, .charakter .eyebrow, .herkunft .eyebrow,
  .farm .eyebrow, .weltkarte .eyebrow, .zubereitung .eyebrow,
  .weiter .eyebrow { font-size: 10.5px; letter-spacing: .26em; }

  .charakter__text { font-size: 16px; line-height: 1.65; }

  /* Innenabstände der Vorlage. Meine lagen durchgehend 4 bis 16px
     darüber — in Summe war das der Großteil des verbliebenen
     Unterschieds. */
  .geschmack .eyebrow, .charakter .eyebrow, .herkunft .eyebrow,
  .farm .eyebrow, .weltkarte .eyebrow, .zubereitung .eyebrow,
  .weiter .eyebrow { margin-bottom: 12px; }

  /* Der Vorspann steht nur dort mit 14px Abstand, wo eine Überschrift
     über ihm sitzt. Im Geschmack folgt er direkt auf die Marke und
     rückt nicht ab. */
  .herkunft__vorspann,
  .weltkarte__vorspann,
  .zubereitung__vorspann,
  .farm__text { font-size: 15px; line-height: 1.6; margin: 14px 0 0; }

  .geschmack__vorspann { font-size: 15px; line-height: 1.6; margin-top: 0; }


  /* --- Bausteine: Schriftgrade und Innenpolster ---------------------
     Die Abstände zwischen den Blöcken stimmten schon, die Bausteine
     darin standen aber noch auf den Desktop-Werten — vier bis acht
     Punkt zu groß. Das summierte sich über eine Seite zu hundert
     Pixeln je Abschnitt. Alle Werte aus dem Artboard gemessen. */

  /* Angaben unter dem Hero: zwei Spalten, 104px für die Beschriftung */
  .statzelle dt { font-size: 10.5px; line-height: 1.5; }
  .statzelle dd { font-size: 14.5px; line-height: 1.45; }

  /* Geschmack — Phasen und Aromen */
  .geschmack__phase { gap: 0; padding: 16px 0; }
  .geschmack__phase dt {
    font-size: 10.5px;
    line-height: 1.9;
    margin-bottom: 6px;
  }
  .geschmack__phase dd { font-size: 26px; line-height: 1.1; }

  /* „Aromen" steht in der Vorlage über den Marken, nicht daneben. */
  .geschmack__aromen {
    flex-wrap: wrap;
    column-gap: 12px;
    row-gap: 0;
    margin-top: 22px;
  }
  .geschmack__aromen > .mono {
    flex: 0 0 100%;
    margin: 0 0 10px;
    font-size: 10px;
    line-height: 1.9;
  }
  .aroma { padding: 7px 12px; font-size: 11.5px; line-height: 1.55; }

  .charakter__text { line-height: 1.6; }

  /* Herkunft — Länderliste, Röstprofil, Notiz */
  .herkunft__liste { margin-top: 22px; }
  .herkunft__land { gap: 12px; padding: 13px 0; }
  .herkunft__landname { font-size: 20px; line-height: 1.55; }
  .herkunft__landnote { font-size: 10.5px; line-height: 1.9; }

  .profil { gap: 18px; margin: 24px 0; }
  .profil__label, .profil__wert { font-size: 10.5px; line-height: 1.9; }

  .roestnotiz { margin-top: 0; padding: 18px; }
  .roestnotiz .mono { font-size: 10.5px; }

  /* Farm — Kennwerte als zwei Spalten, nicht als Reihe */
  .kennwerte {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-top: 22px;
  }
  .kennwerte > div { padding-top: 12px; border-top: 1px solid var(--linie); }
  .kennwerte dt { font-size: 10px; line-height: 1.9; }
  .kennwerte dd { font-size: 15px; line-height: 1.55; margin-top: 5px; }

  /* Weltkarte — Länderliste */
  .weltkarte__liste { margin-top: 22px; }

  /* „Woher Luigi kommt." steht mobil in einer Zeile — der Umbruch aus
     der Desktop-Fassung faellt weg. */
  .weltkarte .h2 br { display: none; }
  .weltkarte__land { gap: 12px; padding: 12px 0; }
  .weltkarte__nr { font-size: 10.5px; line-height: 1.9; }
  .weltkarte__name { font-size: 19px; line-height: 1.55; }
  .weltkarte__zone { font-size: 10px; line-height: 1.9; }

  /* Zubereitung — Rezept als zwei Spalten */
  .rezept {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 26px;
  }
  .rezept > div { padding-top: 12px; }
  .rezept dt { font-size: 10px; line-height: 1.9; }
  .rezept dd { font-size: 26px; line-height: 1.1; margin-top: 5px; }

  /* Weiterschmecken — Karten */
  .sortenkarte__inhalt { padding: 20px 20px 0; }
  .sortenkarte__name { margin: 8px 0 6px; font-size: 26px; }
  .sortenkarte__link { margin-top: 12px; font-size: 11.5px; }
  .sortenkarte__kennung { font-size: 10px; line-height: 1.9; }
  .sortenkarte__text { max-width: 170px; font-size: 13.5px; line-height: 1.6; }

  /* --- Sperrung und Spaltenmaße --------------------------------------
     Vom Abgleich gefunden, nicht mit bloßem Auge: Die Laufweite lag an
     mehreren Stellen zwei Hundertstel em über der Vorlage, und die
     Beschriftungsspalte des Röstprofils war 14px zu breit. Beides
     ändert keine Abschnittshöhe und wäre ohne Messung durchgerutscht. */
  .detail-hero__kennung { letter-spacing: .26em; }
  .statzelle dt { letter-spacing: .14em; }

  .geschmack .h2, .charakter .h2, .herkunft .h2, .farm .h2,
  .weltkarte .h2, .zubereitung .h2, .weiter .h2 { letter-spacing: .01em; }

  .profil__zeile { grid-template-columns: 82px 1fr 28px; gap: 12px; }
  .profil__wert { letter-spacing: .02em; }

  .weltkarte__nr { letter-spacing: .14em; }
  .weltkarte__zone { letter-spacing: .12em; }

  /* --- Hero-Typografie ----------------------------------------------- */
  .detail-hero__kennung { font-size: 10.5px; }
  .detail-hero__claim { font-size: 20px; line-height: 1.25; }
  .detail-hero__vorspann { font-size: 15px; line-height: 1.6; }

  /* --- Weiterschmecken ----------------------------------------------- */
  /* Im Artboard steht „Alle Sorten" unter den Karten über die volle
     Breite, nicht rechts im Abschnittskopf. Der Kopf wird aufgelöst,
     dann greift die Ordnung — dasselbe Mittel wie bei Instagram auf
     der Startseite. */
  .weiter { display: flex; flex-direction: column; gap: 0; }
  .weiter .abschnitt__kopf { display: contents; }
  .weiter .abschnitt__kopf > div { order: 1; margin-bottom: 24px; }
  .weiter__raster { order: 2; margin-bottom: 20px; }
  .weiter .abschnitt__kopf > .btn { order: 3; }

  /* Drei flache Karten untereinander, je 196px, 14px dazwischen —
     nicht die hohen Karten des umgebrochenen Desktop-Rasters. */
  .weiter__raster {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .sortenkarte { height: 196px; }
  .sortenkarte__mark { font-size: 84px; }
  .sortenkarte__bild { height: 168px; }

  /* --- Knöpfe in den Abschnitten ------------------------------------ */
  .geschmack .btn, .charakter .btn, .herkunft .btn,
  .farm .btn, .weltkarte .btn, .zubereitung .btn, .weiter .btn {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 15px 26px;
    font-size: 13px;
    letter-spacing: .1em;
    border-radius: 8px;
  }
}