/* --------------------------------------------------------------------------
   Koepfe der Unterseiten, fuer das Karussell der Startseite
   ERZEUGT von werkzeug/herokoepfe-bauen.py - NICHT VON HAND BEARBEITEN.
   Quelle sind die Seiten-Stylesheets; geaendert wird dort.
   -------------------------------------------------------------------------- */

/* --- aus css/pages/gold.css ------------------------------- */
/* ==========================================================================
   pages/gold.css
   Die Gewinnspielseite /gold/ – „Deckel finden, Gold gewinnen".

   EINE KAMPAGNENSEITE, KEINE INHALTSSEITE. Sie hat eine einzige Aufgabe:
   den Gewinncode entgegennehmen. Alles andere – Flaschen, Anleitung,
   Pflichttext – dient dieser einen Handlung und steht in der Reihenfolge,
   in der das Briefing sie aufzählt.

   OHNE NEUE FARBE UND OHNE NEUE SCHRIFT. Die Kampagne bringt ihr eigenes
   Gold mit, aber es steckt im Bildmaterial: Goldbarren und Sonderetikett
   sind Teil der Packshots. Die Seite selbst arbeitet mit genau den Token,
   die jede andere Seite trägt – ein zweites Gold für die Aktion wäre der
   Fehler, den das Projekt seit dem 28.08.2026 vermeidet (siehe
   --toem-gold in tokens.css).

   OHNE JAVASCRIPT. Es gibt nichts aufzuklappen, umzuschalten oder
   nachzuladen; die Pflichtfelder prüft der Browser selbst.
   ========================================================================== */

/* --- Seitenkopf ----------------------------------------------------------
   ZWEI SPALTEN STATT VOLLFLÄCHIGEM MOTIV. .bogenhero legt sein Bild
   normalerweise absolut hinter den Text und deckt es mit einem Weißverlauf
   ab. Das Aktionsvisual ist ein Freisteller im Hochformat (998 × 1400) und
   zeigt genau die drei Flaschen, die im Regal wiedererkannt werden sollen –
   hinter Text und Verlauf wäre davon die Hälfte weg.
   .gokopf__inner bricht deshalb aus dem Muster aus und stellt Bild und Text
   nebeneinander. Bogen, Label und Titel bleiben die der Komponente. */
.gokopf {
  /* Die Fläche unter dem Bogen muss der Grund der FOLGENDEN Sektion sein,
     sonst reißt der Übergang – siehe components/schwung.css. Das war einmal
     die graue Flaschensektion; seit „So geht's" (weiß, ohne eigenen Grund)
     dazwischen steht, blieb hier ein grauer Streifen stehen (gemeldet
     24.09.2026). Deshalb jetzt Weiß. Wer die Reihenfolge ändert, ändert
     diese Zeile mit. */
  --schwung-grund: var(--bg-page);
  /* SO HOCH WIE DER HERO DER STARTSEITE, Wunsch vom 16.09.2026.
     NICHT ALS ZAHL ABGESCHRIEBEN, sondern als dieselbe Regel: die
     Startseite setzt in sections/hero.css `min-height: max(32rem,
     calc(95vh - var(--h-nav)))` und 64 px Polster oben wie unten. Eine
     nachgetragene Zahl wie „751 px" stimmte nur auf dem Schirm, auf dem
     sie gemessen wurde - der Hero der Startseite ist bildschirmhoch und
     wächst mit dem Fenster.
     Gemessen vorher bei 900 px Fensterhöhe: Startseite 751, /gold/ 852,5.
     Zu hoch waren beide Polster (96/128 statt 64/64) und das Motiv, das
     die Höhe allein bestimmte. */
  --hero-hoehe: max(32rem, calc(95vh - var(--h-nav)));
  --hero-polster: var(--sp-8);
  --hero-polster-fuss: var(--sp-8);
}

.gokopf__inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 28rem);
  gap: var(--sp-7);
  align-items: center;
}

/* DAS MOTIV STEHT IN DER HÜLLE DER KOMPONENTE, damit das Feld „Motiv" in
   der Seitenleiste auch hier greift (inc/seitenkopf.php sucht wörtlich nach
   <div class="bogenhero__media">). Die Komponente legt diese Hülle sonst
   absolut hinter den Text und deckt sie mit einem Weißverlauf ab - beides
   muss hier weg, sonst verschwindet der Freisteller dahinter.
   Drei Regeln, nicht eine: Lage und overflow am Kasten, der Verlauf am
   ::after, die Bildmaße am img. Wer eine davon vergisst, sieht es erst,
   wenn das Bild fehlt. */
.gokopf .bogenhero__media {
  /* relative statt static, seit der Goldbarren daran haengt - beides holt
     die Huelle aus der absoluten Lage der Komponente zurueck, relative gibt
     zusaetzlich den Anker fuer das Kind. inset: auto daneben ist Pflicht,
     sonst zieht das inset der Komponente die Huelle weg. */
  position: relative;
  inset: auto;
  overflow: visible;
  /* DIE HUELLE MUSS AUF DAS BILD SCHRUMPFEN, sonst sitzt der Barren neben
     den Flaschen statt darauf. Gemessen am 16.09.2026: unterhalb von 66rem
     fuellt die Huelle die ganze Spalte (bei 390 px 350 breit), das Bild
     darin misst nur 297 und steht zentriert. Ein Kind mit right: 0 haette
     also 26 px rechts vom Motiv gelegen.
     Rechnung statt fit-content: die Breite des Freistellers ergibt sich aus
     seiner gedeckelten Hoehe mal dem Seitenverhaeltnis 998/1400 = 0,713.
     fit-content hilft hier nicht - es fragt die Eigenbreite des Bildes ab
     (998 px) und nicht die, auf die max-height es herunterrechnet. */
  --gokopf-bildhoehe: max(18rem, calc(95vh - var(--h-nav) - 2 * var(--sp-8)));
  width: min(100%, calc(var(--gokopf-bildhoehe) * 0.713));
  margin-inline: auto;
}

/* Der Goldbarren im Hero. Prozente, keine festen Masse: die Huelle ist jetzt
   genau das Bild, also bezieht sich jeder Wert hier auf den Freisteller
   selbst und sitzt auf jeder Breite an derselben Stelle des Motivs.
   max-width: none gegen die globale Bildregel aus base.css, die sonst bei
   440 px Eigenbreite zuschlaegt. */
.gokopf .bogenhero__media img.gokopf__barren {
  /* SO LANG WIE NOETIG: .gokopf .bogenhero__media img weiter oben setzt
     Breite, Deckel und Rand fuer den Freisteller und ist spezifischer als
     eine einzelne Klasse - gemessen stand der Barren sonst auf seinen
     eigenen 440 px und fuellte die ganze Huelle. */
  position: absolute;
  right: 0;
  bottom: 6%;
  width: 32%;
  height: auto;
  max-width: none;
  max-height: none;
  margin-inline: 0;
}
.gokopf .bogenhero__media::after { content: none; }
.gokopf .bogenhero__media img {
  display: block;
  /* HÖHE ZUERST, Breite danach. Solange das Bild die Breite seiner Spalte
     füllte, bestimmte es die Höhe des Heros - und die soll jetzt der
     Bildschirm bestimmen. Mit width/height auf auto und einer Deckelung in
     beide Richtungen passt sich der Freisteller in das ein, was übrig ist:
     dieselbe Rechnung wie oben, abzüglich der beiden Polster.
     Die Untergrenze von 18rem hält das Motiv auf einem flachen Fenster
     erkennbar - lieber ein etwas höherer Hero als drei Flaschen von
     Daumennagelgröße. */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: max(18rem, calc(95vh - var(--h-nav) - 2 * var(--sp-8)));
  margin-inline: auto;
  object-fit: fill;
  background: none;
}

/* MEHR LUFT ZWISCHEN GERADER ZEILE UND SCHWUNGZEILE, Wunsch vom
   16.09.2026. components/sektionstitel.css setzt margin-top: 0.02em an das
   <em> - bei 76,8 px sind das 1,5 px, also praktisch nichts. Hier trägt die
   gerade Zeile einen Doppelpunkt und kündigt die Schwungzeile an; sie
   braucht den Absatz.
   In em, nicht in rem: die Überschrift läuft von 32 px auf dem Telefon bis
   76,8 px am Schirm, und ein fester Abstand säße auf beiden falsch. */
.gokopf .bogenhero__title em {
  /* SO GROSS WIE DIE SCHREIBSCHRIFT DER STARTSEITE, Frage vom 16.09.2026.
     Gemessen stand die Startseite bei 1440 px auf 92,0 px und /gold/ auf
     76,8 - die Unterseiten setzen ihre Schwungzeile als 1,6em der
     Seitenüberschrift (--fs-600), die Startseite hat mit --fs-800 eine
     eigene, größere Staffel.
     /gold/ bekommt hier bewusst die Staffel der Startseite, nicht die der
     Unterseiten: der Hero folgt seit derselben Runde auch deren Höhenregel,
     und die Seite wird aus Anzeigen und vom Neckhänger direkt angesprungen.
     Eine halbe Übernahme wäre die schlechtere von beiden Lösungen. */
  font-size: var(--fs-800);
  margin-top: 0.16em;
}

/* .bogenhero__body deckelt auf 34rem. In einer eigenen Spalte ist das zu
   eng – die Spalte ist selbst schon die Begrenzung. */
.gokopf__body { max-width: 38rem; }

/* DIE GEWINNZEILE IST DIE AUSSAGE DER KAMPAGNE, nicht ihr Vorspann.
   --fs-500 statt --fs-400 (Lead): sie steht auf jedem Plakat, jedem
   Neckhänger und in jeder Anzeige und darf auf der Landingpage nicht
   kleiner sein als ein gewöhnlicher Einleitungssatz. */
.gokopf .bogenhero__lead {
  margin: var(--sp-4) 0 0;
  max-width: none;
  font-size: var(--fs-500);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--toem-blau);
}
/* Das Sternchen führt zum Pflichttext am Seitenfuß. Gold, weil es
   Verweiszeichen ist und keine Aussage trägt – die Angabe steht dort, wohin
   es zeigt. Die Trefferfläche ist klein; deshalb padding statt nur Schrift,
   damit auf dem Telefon überhaupt getroffen werden kann. */
/* BLAU SEIT 25.09.2026, Kundenwunsch („Das Sternchen können wir blau
   einfärben, oder?"). Gold auf Weiß hielt 1,99:1; Gold bleibt die Farbe
   beim Überfahren. */
.gokopf__stern {
  color: var(--toem-blau);
  font-weight: 700;
  /* LINKS KEIN INNENABSTAND: mit 0,15em auf beiden Seiten stand zwischen
     „gewinnen" und dem Sternchen eine sichtbare Lücke, und das liest sich
     wie ein Tippfehler. Die Trefferfläche wächst deshalb nach rechts, oben
     und unten - dorthin, wo sie niemandem im Weg ist. */
  padding: 0.3em 0.35em 0.3em 0;
  transition: color var(--dur) var(--ease);
}
.gokopf__stern:hover,
.gokopf__stern:focus-visible { color: var(--toem-gold); }

.gokopf__aktion { margin: var(--sp-6) 0 0; }
/* Die Fussnote zum Sternchen unter dem Knopf, 25.09.2026 - derselbe Abstand
   wie im Slide der Startseite (.hero__slide .gostern__text). */
.gokopf .gostern__text { margin-top: var(--sp-5); }@media (max-width: 66rem) {

  .gokopf {
    /* Untereinander bestimmt der Inhalt die Höhe, nicht der Bildschirm -
       genauso macht es die Startseite unterhalb von 60rem (min-height: 0).
       Mit der Bildschirmregel stünde hier Text UND Bild in 95vh, und beides
       zusammen passt dort nicht hinein. */
    --hero-hoehe: 0;
    --hero-polster: var(--sp-6);
    --hero-polster-fuss: var(--sp-8);
  }
  .gokopf__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
  }
  .gokopf__body { max-width: none; }
  /* Mittig und gedeckelt: über die volle Bahnbreite wäre das Visual auf
     einem Tablet 890 px hoch und schöbe das Formular aus dem Blick.
     GRÖSSER AUF DEM TELEFON, Wunsch vom 16.09.2026: 20rem waren 320 px
     Höhe und damit 228 px Breite - drei Flaschen nebeneinander, von denen
     man die Etiketten nur noch ahnt. 26rem sind 416 px hoch und 297 breit.
     UND ES DARF UNTER DEN KNOPF LAUFEN. Der negative Rand hebt das Motiv
     über den Rasterabstand hinaus an, sodass die Flaschenhälse hinter dem
     Knopf verschwinden - dieselbe Überlappung, die die Produktseiten
     zwischen Packshot und Textblock benutzen. Ohne sie steht zwischen
     Knopf und Motiv eine leere Zeile, die die Seite nur länger macht. */
  .gokopf .bogenhero__media {
    /* --sp-9 und nicht --sp-7: mit 48 px war die Überlappung rechnerisch
       16 px, sichtbar aber null - die Flaschenhälse haben oben
       transparenten Rand, und der überlappt eben nichts. Mit 96 px
       verschwindet der Hals des mittleren Freistellers wirklich hinter dem
       Knopf. Nachgemessen, nicht geschätzt. */
    margin-top: calc(-1 * var(--sp-9));
    /* Der Knopf darf nicht verdeckt werden - er ist der Hauptweg. */
    z-index: -1;
    position: relative;
  }
  .gokopf .bogenhero__media {
    /* Derselbe Deckel wie am Bild darunter, damit die Huelle weiter genau
       auf dem Motiv liegt. */
    --gokopf-bildhoehe: 26rem;
  }
  .gokopf .bogenhero__media img {
    max-width: min(28rem, 100%);
    max-height: 26rem;
  }
}
@media (max-width: 66rem) {

  .gokopf__inner {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .gokopf .bogenhero__media {
    order: -1;
    /* Der Zug nach oben und die Lage hinter dem Knopf gelten nur dort, wo
       ein Knopf darueber steht. */
    margin-top: 0;
    z-index: auto;
    position: relative;
    height: var(--motiv-hoehe-unter);
    min-height: var(--motiv-hoehe-unter-min);
    width: min(100%, calc(var(--motiv-hoehe-unter) * 0.72));
    margin-inline: auto;
  }
  /* FREISTELLER, KEIN FOTO: die Flaschen stehen auf Weiss. */
  .gokopf .bogenhero__media img {
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
  }
  .gokopf .bogenhero__media img.gokopf__barren {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 38%;
    height: auto;
    max-height: 34%;
  }
  .gokopf__body {
    order: 1;
    padding-top: var(--sp-6);
  }
}
@media (max-width: 34rem) {

  .gokopf .bogenhero__title { font-size: calc(7.6vw - 3px); }
}

/* --- aus css/pages/gold.css ------------------------------- */
.gostern {
  padding-block: var(--sp-7) var(--sp-8);
  scroll-margin-top: var(--h-nav-compact);
}
.gostern__text {
  margin: 0;
  max-width: 56rem;
  font-size: var(--fs-100);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
.gostern__weiter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-7);
  margin: var(--sp-4) 0 0;
}
/* WIE JEDER ANDERE TEXTLINK AM BLOCKENDE, Wunsch vom 16.09.2026: Versalien,
   Gewicht 600, Markenblau, Pfeil dahinter, beim Hover Gold und der Pfeil
   drei Pixel nach rechts. Dieselben Werte wie .rzoel__mehr in
   pages/rezept.css - abgeschrieben wird hier nichts, die Werte stehen in
   Token.
   min-height hält die Trefferfläche bei 44 px, obwohl der Link nur eine
   Zeile hoch ist. Der Mittelpunkt zwischen den beiden Links ist entfallen:
   zwei Links mit Pfeil trennen sich selbst. */
.gostern__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.75rem;
  font-size: var(--fs-200);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--toem-blau);
  transition: color var(--dur) var(--ease);
}
.gostern__link:hover,
.gostern__link:focus-visible { color: var(--toem-gold); }
.gostern__link svg {
  width: var(--zeichen-inline); height: var(--zeichen-inline);
  transition: transform var(--dur-hover) var(--ease-hover);
}
.gostern__link:hover svg,
.gostern__link:focus-visible svg { transform: translateX(3px); }

/* --- aus css/pages/herstellung.css ------------------------------- */
/* ==========================================================================
   /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);
}

/* --- aus css/pages/karriere.css ------------------------------- */
/* ==========================================================================
   pages/karriere.css
   Der ganze Karrierezweig: Einstiegsseite, Stellenarchiv, Stellendetail.

   DREI SEITENTYPEN, EINE DATEI, weil sie sich Bausteine teilen - die
   Stellenkarte steht auf der Einstiegsseite, im Archiv und am Fuss jeder
   Detailseite.

   ADRESSSCHEMA. Es kommt NICHT von hier, sondern steht seit der freigegebenen
   Startseite fest (siehe Kommentar in index.html an der Karriere-Sektion):
     Einstieg  /karriere/
     Archiv    /karriere/stellen/
     Einzeln   /karriere/stellen/<slug>/
     Typ       /karriere/stellen/typ/<term>/
   In WordPress also register_post_type('stelle', rewrite => array(
   'slug' => 'karriere/stellen', 'with_front' => false)) und die Taxonomie
   stellen_typ mit 'slug' => 'karriere/stellen/typ'.

   DER TYPFILTER IST EINE LISTE VON LINKS, kein Javascript. Anders als beim
   Rezeptfilter existieren die gefilterten Ansichten hier als echte Adressen -
   das Taxonomie-Archiv liefert WordPress von sich aus. Ein Skript daruebe zu
   legen wuerde Adressen verschenken, die in Jobboersen geteilt werden.
   ========================================================================== */

/* --- Kopf ---------------------------------------------------------------- */
/* Bauform in components/bogenhero.css. Fussabstand wie auf /historie/:
   er rechnet die Bogenhoehe mit. */
.kakopf {
  --hero-hoehe: max(26rem, calc(72vh - var(--h-nav)));
  --hero-polster: var(--sp-8);
  --hero-polster-fuss: calc(min(6.25vw, 6rem) + var(--sp-7));
  --schwung-grund: var(--bg-soft);
}

/* ==========================================================================
   1. Einstiegsseite /karriere/
   ========================================================================== */

/* Hero, unter dem eine WEISSE Sektion beginnt. Beim Anlegen einer neuen
   Seite pruefen, welche Sektion auf den Hero folgt, und den Modifier
   entsprechend setzen. */
.kakopf--auf-weiss { --schwung-grund: var(--surface); }
/* Der Weg aus dem Hero benutzt die Pfeilklasse der Stellenkarte. Dort haengt
   der Hover an .stkarte:hover, hier steht der Link allein und braucht ihn
   selbst. */
/* ZWEI WEGE AUS DEM HERO. Vorher fuehrte nur einer zum Stellenarchiv - wer
   eine Ausbildung sucht, landete damit in einer Liste aus vierzehn Anzeigen
   und musste selbst filtern. Beide Gruppen sollen ihren Weg sofort sehen. */
.kakopf__wege {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  margin-top: var(--sp-6);
}
/* FETT, Wunsch der Kundin vom 05.10.2026: „Können wir den Text mit den
   Verlinkungen zu Offene Stellen und Ausbildung im Header fett schreiben?"
   Die Pfeillinks tragen sonst 600 wie auf den Stellenkarten; im Kopf stehen
   sie auf dem Motiv und verloren dort gegen das Bild. */
/* Zwei Klassen: .stkarte__pfeil (components/stellenliste.css) steht später
   in der Liste und setzt 600 - mit einer Klasse allein gewann es. */
.kakopf__wege .kakopf__mehr { font-weight: 700; }
.kakopf__mehr:hover,
.kakopf__mehr:focus-visible { color: var(--toem-gold); }
.kakopf > .schwung { position: absolute; left: 0; right: 0; bottom: -1px; }