/* Weiss statt Markenblau. Die Sektion ist damit die hellste der Seite und
   setzt sich als Ruhepunkt zwischen Produkten und Rezepten ab.
   Kantenwerte gemessen: gegen die dunkle Bahn darueber 1.271, gegen die
   helle darunter 1.119. Die zweite ist die schwaechste Kante der Seite,
   liegt aber praktisch auf dem Standardschritt der Bahnen (1.136).
   ACHTUNG: Weiss ist zugleich die Kartenfarbe (--surface). In dieser
   Sektion stehen keine Karten, deshalb kein Konflikt - kaeme spaeter eine
   dazu, waere sie hier unsichtbar und braeuchte eine eigene Flaeche.
   Alle Textfarben kehren sich gegenueber der frueheren blauen Flaeche um:
   was weiss war, ist jetzt Markenblau, das gedaempfte Blauweiss wird zum
   Grauton der Seite. */
.herst {
  /* Weisse Bahn zwischen den grauen von Produkte und Rezepte. */
  background: var(--bg-page);
  color: var(--text-muted);
  padding-block: var(--sp-sektion);
}

/* Kopf zweispaltig wie bei Produkten und Rezepten: Text links, Weiterweg
   rechts auf Grundlinie. Vorher stand der Link mittig UNTER den vier
   Schritten und war damit die einzige Sektion, die ihn nicht im Kopf
   anbietet. */
.herst__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--sp-5);
  margin: 0 0 clamp(var(--sp-7), 5vw, var(--sp-8));
}
.herst__intro { max-width: 46rem; }

/* Gleiche Werte wie .prod__all und .rez__all. */
.herst__all {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.75rem;
  padding: var(--sp-3) 0;
  font-size: var(--fs-200);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--toem-blau);
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.herst__all:hover,
.herst__all:focus-visible { color: var(--toem-gold); }
.herst__all svg {
  width: var(--zeichen-inline); height: var(--zeichen-inline);
  flex: 0 0 auto;
  transition: transform var(--dur-hover) var(--ease-hover);
}
.herst__all:hover svg,
.herst__all:focus-visible svg { transform: translateX(3px); }
.herst__label {
  font-size: var(--fs-100);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--toem-gold);
  margin: 0 0 var(--sp-4);
}
/* Sachliche Sektion: keine Schreibschrift. Sie wirkt nur, wenn sie
   nicht in jeder Sektion steht - hier traegt die Aussage allein. */

/* Vier Schritte, vier Bilder, vier Spalten - kein Slider.
   Der Slider zeigte 1,5 Karten und versteckte Schritt 3 und 4 hinter
   einer Bedienung. Eine Prozesskette traegt ihre Aussage aber erst als
   Ganzes: "vom Feld in die Flasche" muss man in einem Blick sehen.
   Vierspaltig sind die Karten schmal genug, dass alle vier zusammen
   flacher bauen als vorher 1,5 im Band.
   Kein JavaScript, keine Bedienelemente, kein Fallback noetig.
   -------------------------------------------------------------------- */
.herst__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(var(--sp-4), 2vw, var(--sp-5));
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: schritt;
}
/* <ol>, weil die Reihenfolge Teil der Aussage ist. */
.herst__step {
  counter-increment: schritt;
  margin: 0;
}

/* Text neben statt im Bild: bei rund 284px Spaltenbreite braeuchte die
   Textflaeche zwei Drittel der Karte und das Motiv waere nicht mehr zu
   erkennen. Im Slider war die Karte 761px breit, dort ging es. */
.herst__step__media {
  position: relative;
  aspect-ratio: 4 / 3;
  margin-bottom: var(--sp-4);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--bg-platzhalter);
}
.herst__step__media img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-media) var(--ease-media);
}
/* Die Schritte sind keine Links - der Zoom haengt deshalb am Listenpunkt,
   nicht an einem Ankerelement. Reine Rueckmeldung, dass hinter dem Bild
   etwas steckt; der Weg dahin ist der Textlink unter der Reihe. */
.herst__step:hover .herst__step__media img { transform: scale(var(--zoom-media)); }
/* Ziffer aus dem CSS-Zaehler statt aus dem Markup: sie kann nicht aus
   dem Tritt geraten, wenn per ACF ein Schritt dazukommt. Die <ol>
   nummeriert fuer Screenreader bereits, die sichtbare Ziffer ist
   deshalb dekorativ.
   Sie steht neben dem Titel, nicht auf dem Bild: gemessen faellt der
   Goldkreis in hellen Bildpartien auf Kontrast 1,0 gegen das Motiv, und
   die Motive tauscht die Redaktion spaeter selbst. Auf der blauen
   Sektionsflaeche sind es verlaesslich 7,39 - unabhaengig davon, welches
   Foto eingesetzt wird. Inline im Titel kostet das keine eigene Zeile. */
.herst__step h3 {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-400);
  font-weight: 700;
  color: var(--toem-blau);
  margin: 0 0 var(--sp-2);
}
/* ZIFFERNKREIS WIE AUF /herstellung/. Kundenwunsch vom 02.09.2026,
   Feedback-Folie 1: "Uns gefallen die Zahlen auf der Herstellung-Seite sehr
   gut, können wir diese doch auch für die Startseite übernehmen? (statt
   Tropfen.)"

   Hier stand ein goldener Tropfen mit blauer Ziffer, als Daten-URI im
   Hintergrund. Das Motiv kam vom Etikett, wo der Tropfen das Siegel
   "Nativ / 1. Kaltpressung" traegt - eine huebsche Herleitung, aber der Kunde
   will die Kreise, und die haben zwei sachliche Vorteile: das Gold steckt
   nicht mehr im Datenpfad einer URL (dort konnte kein Token stehen, bei einer
   Farbaenderung musste es von Hand mitgezogen werden), und beide Seiten
   zeigen dieselbe Prozesskette jetzt in derselben Form.

   WORTGLEICH ZU pages/herstellung.css uebernommen: --zeichen-kreis-xl,
   1 px goldene Kontur, --fs-300 in Gold, Gewicht 600. Eine gemeinsame
   Bauteildatei waere der naechste Schritt - es ist die sechste Stelle mit
   einem Ziffernkreis. Erst wenn die Blockeditor-Zuordnung steht, siehe
   checkliste-livegang.md Abschnitt 5.

   Die Platzierung bleibt INLINE vor der Ueberschrift. Auf /herstellung/ steht
   der Kreis ueber dem Titel, weil dort eine ganze Zeile Platz hat; hier sind
   die Karten 284 px breit, und eine eigene Zeile fuer eine Ziffer waere
   Verschwendung. Der Kunde hat die Ziffern gewuenscht, nicht eine andere
   Anordnung. */
.herst__step h3::before {
  content: counter(schritt);
  flex: 0 0 auto;
  display: grid;
  place-content: center;
  width: var(--zeichen-kreis-xl);
  height: var(--zeichen-kreis-xl);
  border-radius: 50%;
  border: 1px solid var(--toem-gold);
  color: var(--toem-gold);
  font-size: var(--fs-300);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.herst__step p {
  font-size: var(--fs-300);
  color: var(--text-muted);
  margin: 0;
}

/* BILD UEBER DIE BREITE, TEXT DARUNTER, Kundenwunsch vom 10.09.2026:
   "Herstellung > Mobile bitte untereinander! Also Bild ueber Breite und Texte
   unter das Bild".

   HIER STAND EINE ZEILE MIT VORSCHAUBILD, und die Begruendung war dieselbe
   wie bei den Produktkarten: vier gestapelte Karten waeren rund 1000 px hoch,
   als Zeile mit 96-px-Bild sind es 430. Der Kunde entscheidet anders, und die
   Abwaegung ist nachvollziehbar - ein 96 px kleines Motiv zeigt von einer
   Muehle wenig.

   3:2 UND NICHT 4:3, damit der Preis bezahlbar bleibt. Bei 350 px Breite:
     4:3 waeren 263 px je Bild, vier Schritte also 1052 px nur Motive
     3:2 sind 233 px je Bild, vier Schritte 932 px
     16:9 waeren 197 px - aber dann ist von einem hochkant angelegten
          Motiv kaum noch etwas zu sehen
   3:2 ist derselbe Wert, den die Rezeptbilder heute bekommen haben und den
   die Rezeptliste schon trug. Ein Verhaeltnis fuer alle mobilen Vollbreiten-
   Motive, kein drittes.

   DIE DREI PLATZIERUNGSREGELN FALLEN WEG. Sie gab es nur, weil der
   Zweispalter drei Kinder hatte und das <p> sonst unter das Bild in Spalte 1
   floss. Einspaltig ist genau das jetzt gewollt, also braucht es sie nicht
   mehr - Bild, Titel, Text in Dokumentreihenfolge. */
@media (max-width: 48rem) {
  .herst__steps {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }
}

/* TABLET BEHAELT DIE ZEILE MIT VORSCHAUBILD. Gemessen war die Sektion bei
   768 px Fensterbreite mit Vollbreitenmotiven 2326 px hoch, und ein 707 px
   breites Bild je Schritt ist auf einem Tablet keine Aufzaehlung mehr. Der
   Kunde hat "Mobile" gesagt, und Mobil endet hier bei 37.5rem - dieselbe
   Grenze wie bei den Produktkarten und den Rezeptmotiven von heute. */
@media (min-width: 37.5625rem) and (max-width: 48rem) {
  .herst__step {
    display: grid;
    grid-template-columns: 6rem 1fr;
    grid-auto-rows: min-content;
    column-gap: var(--sp-4);
    align-content: start;
  }
  /* Der Zweispalter hat drei Kinder - ohne diese drei Regeln fliesst das <p>
     in Zeile 2 Spalte 1, also unter das Bild. */
  .herst__step__media {
    grid-column: 1;
    grid-row: 1 / span 2;
    aspect-ratio: 1 / 1;
    margin-bottom: 0;
  }
  .herst__step h3 { grid-column: 2; grid-row: 1; }
  .herst__step p  { grid-column: 2; grid-row: 2; }
}

/* TELEFON: Bild ueber die Breite, Text darunter - wie verlangt.
   16:9 STATT 3:2, zweiter Kundenwunsch: "Die Höhe des Bildes kann auch ruhig
   reduzierter sein, damit die Section nicht zu hoch wird!"
   Gerechnet bei 350 px Breite: 3:2 waren 233 px, 16:9 sind 197 px, 2:1 waeren
   175 und 21:9 nur 150.
   16:9 IST DIE GRENZE DES ZUSCHNITTS. Die Motive liegen als 600 x 450 vor,
   also 4:3. 3:2 schneidet ein Viertel der Hoehe weg, 16:9 zwei Fuenftel,
   2:1 die Haelfte - bei einem Motiv aus der Muehle ist ab dort das Thema
   selbst in Gefahr, nicht nur der Rand. Deshalb hier 16:9 und nicht weiter. */
@media (max-width: 37.5rem) {
  .herst__steps { gap: var(--sp-5); }
  .herst__step__media { aspect-ratio: 16 / 9; }
}

/* Weiterleitung als Textlink, mittig unter der Reihe. Kein gefuellter
   Knopf: die Sektion teasert an, sie fordert nichts. Die Unterstreichung
   traegt die Erkennbarkeit, nicht die Farbe allein. */

/* Keine Fokus-Ausnahme mehr. Sie war noetig, solange die Sektion blau war -
   dort trug der blaue Ring nicht. Auf der grauen Bahn haelt er 10.16, Gold
   nur 1.38. Die Ausnahme haette den Ring hier also unsichtbar gemacht. */