/* ==========================================================================
   /herstellung/ - Imageseite zur Herstellung
   Angelegt am 29.08.2026. Fuehrt die beiden Liveseiten /verfahren/ und
   /aussaat-bis-abfuellung/ zusammen.

   KEINE NEUE FORMENSPRACHE. Jede Bauform hier ist die Ableitung einer
   bestehenden, damit die Seite sich nicht wie ein Fremdkoerper anfuehlt:
     .hekopf    von .kakopf   (Bogen-Hero mit Motiv, /karriere/)
     .heweg     von .herst__steps (Startseite) - dort nebeneinander als
                Ueberblick, hier abwechselnd als Kette mit Platz zum Erklaeren
     .heschael  von .pschael  (blaues Band mit gerichtetem Verlauf, Produktseiten)
     .hezahlen  von .hiheute__zahlen (/unternehmen/historie/)
     .hesicher  von .kabereich (/karriere/)
   ========================================================================== */

/* --- Kopf ---------------------------------------------------------------- */
/* Die Bauform steht in components/bogenhero.css. Hier bleibt, was nur diese
   Seite hat. */
.hekopf {
  --hero-hoehe: 38rem;
  --schwung-grund: var(--surface);
}
/* --- Der Weg ------------------------------------------------------------- */
.heweg { background: var(--surface); padding-block: var(--sp-sektion); }
.heweg__ueber { margin-bottom: var(--sp-8); }
/* Platzhalter fuer die zwei Schritte ohne Aufnahme. Gekennzeichnet, nicht
   kaschiert - der Kunde soll sehen, was fehlt. */
.heweg__platz {
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--sp-2);
  color: var(--toem-blau);
}
.heweg__platz svg { width: var(--zeichen-flaeche); height: var(--zeichen-flaeche); opacity: 0.55; }
.heweg__platz span {
  font-size: var(--fs-100);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
/* Die Ziffer kommt aus dem Zaehler, nicht aus dem Text: wer einen Schritt
   einschiebt, muss nicht alle folgenden umschreiben. Figtree, nicht Grafolita
   - die Schreibschrift setzt Ziffern mit wechselnder Grundlinie, siehe die
   Notiz bei .abweg__schritt in pages/karriere.css. */

@media (max-width: 56rem) {  }

/* --- Das Patent ---------------------------------------------------------- */
/* Bauform von .pschael in pages/produkt.css. DUPLIKAT, gemeldet: dieselbe
   Bauform steht dort und als .kaabbinder in pages/karriere.css. Drei Kopien
   sind zwei zu viel - das gehoert in components/, sobald eine Runde dafuer
   da ist. */
.heschael {
  position: relative;
  overflow: hidden;
  background: var(--toem-blau);
  padding-block: clamp(var(--sp-8), 9vw, var(--sp-9));
  color: var(--on-blau-2);
}
.heschael__media { position: absolute; inset: 0; }
.heschael__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
  display: block;
}
.heschael__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(96deg,
      rgba(12, 36, 62, 0.95) 0%,
      rgba(12, 36, 62, 0.92) 40%,
      rgba(12, 36, 62, 0.76) 62%,
      rgba(12, 36, 62, 0.58) 100%);
}
/* Kein max-width hier: das Element traegt auch .wrap. Die Begrenzung gehoert
   an die Kinder - dieselbe Falle wie bei .pschael__inner. */
.heschael__inner { position: relative; }
.heschael__title,
.heschael__sub { max-width: 46rem; }
.heschael__title { color: var(--on-blau-1); }
.heschael__title em { color: var(--toem-gold); }
.heschael__sub {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-400);
  color: var(--on-blau-2);
}
.heschael__text {
  margin: var(--sp-6) 0 0;
  max-width: 46rem;
  font-size: var(--fs-300);
  line-height: var(--lh-body);
}

/* --- Zahlen -------------------------------------------------------------- */
/* Bauform von .hiheute__zahlen, aber auf hellem Grund: zwei blaue Baender
   hintereinander waeren eine Wand. */
.hezahlen { background: var(--bg-soft); padding-block: var(--sp-sektion); }
.hezahlen__reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: var(--sp-6) var(--sp-7);
  align-content: start;
}
.hezahlen__zahl { display: grid; gap: var(--sp-1); margin: 0; align-content: start; }
.hezahlen__zahl b {
  font-size: var(--fs-600);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--toem-blau);
}
.hezahlen__zahl span { font-size: var(--fs-200); color: var(--text-muted); }

/* --- Was dahinter steht -------------------------------------------------- */
.hesicher { background: var(--surface); padding-block: var(--sp-sektion); }
.hesicher__ueber { margin-bottom: var(--sp-8); }
.hesicher__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: clamp(var(--sp-5), 3vw, var(--sp-6));
  /* align-content: start - der Fehler, der in diesem Projekt viermal
     entstanden ist. Ohne ihn verteilt das Raster ueberschuessige Hoehe auf
     alle Zeilen und die Ueberschriften springen. */
  align-content: start;
}
.hesicher__karte {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  padding: var(--sp-5);
  background: var(--bg-soft);
  border-radius: var(--r-card);
}
.hesicher__zeichen { margin: 0; color: var(--toem-gold); }
.hesicher__zeichen svg { width: var(--zeichen-gross); height: var(--zeichen-gross); }
.hesicher__titel {
  margin: 0;
  font-size: var(--fs-400);
  font-weight: 700;
  color: var(--toem-blau);
}
.hesicher__text { margin: 0; font-size: var(--fs-300); line-height: var(--lh-body); color: var(--text-muted); }

/* --- Weiter -------------------------------------------------------------- */
.hewege { background: var(--bg-soft); padding-block: var(--sp-sektion); }
.hewege__title { margin-bottom: var(--sp-8); }
.hewege__grid {
  display: grid;
  /* AUTO-FIT STATT repeat(2): seit dem 14.09.2026 kann der Kunde eine dritte
     Wege-Karte anhaengen. Mit einer festen Zweierspalte waere sie in eine
     zweite Zeile gerutscht und haette die Haelfte der Breite freigelassen.
     30rem sind 480 px - bei 1320 px Inhaltsbreite passen genau zwei Spalten,
     die Seite sieht also aus wie vorher; bei drei Karten werden es drei.
     Nachgemessen gegen den Entwurf, nicht geschaetzt. */
  grid-template-columns: repeat(auto-fit, minmax(min(30rem, 100%), 1fr));
  gap: clamp(var(--sp-5), 3vw, var(--sp-6));
  align-content: start;
}

@media (max-width: 56rem) {
  .hewege__grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- Wechselzeile: was NUR /herstellung/ braucht ------------------------- */
/* Die Grundform steht in components/wechselzeile.css. Hier bleibt, was diese
   Seite als einzige hat: die Zaehlung. Die Schritte folgen aufeinander,
   deshalb <ol> und ein Ziffernkreis - Marken und Saeulen haben beides nicht. */
.heweg__liste { counter-reset: schritt; }
.heweg__schritt { counter-increment: schritt; }
.heweg__schritt .wzeile__body::before {
  content: counter(schritt);
  display: grid;
  place-content: center;
  width: var(--zeichen-kreis-xl);
  height: var(--zeichen-kreis-xl);
  border-radius: 50%;
  border: 1px solid var(--toem-gold);
  font-size: var(--fs-300);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--toem-gold);
}