/* --------------------------------------------------------------------------
   Hero
   Text liegt im Bild (links), Motiv ungeschnitten dahinter.
   Beim Sortiment-Motiv sitzt die Familie links, die Flaschen rechts.
   Der Verlauf deckt die linke Zone daher kraeftiger ab als beim
   Vorgaengermotiv - halb sichtbare Gesichter hinter Schrift wirken unruhig.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  /* Muss unter dem Sticky-Header liegen, sonst deckt die Hero das
     Dropdown-Panel ab und der Hover reisst an der Header-Kante ab. */
  z-index: 0;
  /* Weiss, nicht --bg-soft: die Wellenfront am Fuss der Hero laeuft in
     --bg-page aus und die anschliessende USP-Bahn steht ebenfalls darauf. */
  background: var(--bg-page);
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
}
.hero__media video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 54% 48%;
  /* Ein Video bringt eigene Kanten mit. display: block verhindert die
     Grundlinienluecke, die es als Inline-Element unten erzeugen wuerde. */
  display: block;
  background: var(--bg-platzhalter);
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Deckfarbe ist Weiss, wie die Sektion darunter. Der Verlauf muss
     dieselbe Farbe fuehren, sonst sieht man an der Schwungkante zwei
     Toene aufeinandertreffen. */
  /* Seit dem 29.09.2026 ein Verlauf fuer alle Koepfe, siehe tokens.css. */
  background: var(--motiv-schleier);
}

/* --------------------------------------------------------------------------
   Langsames Ranzoomen - jetzt nur noch als ERSATZ
   Solange kein Videofile liegt, zeigt das <video> sein poster und stuende
   voellig still. Dann traegt der Ken Burns die Bewegung, damit die Hero
   nicht tot wirkt. Laeuft ein echtes Video, bleibt der Zoom aus: die
   Bewegung kommt dann aus dem Material und beides zusammen waere zu viel.
   Welcher Fall vorliegt, entscheidet das Skript am Dokumentende, nicht das
   CSS - es fragt, ob das <video> Daten bekommen hat.

   Zurueckhaltend dosiert: 6 % auf 20 Sekunden sind rund 0,3 % pro Sekunde.
   Die Bewegung ist zu spueren, ohne dass man ihr zusieht, und sie zieht
   keine Aufmerksamkeit von der Headline weg. Linear, weil jede
   Beschleunigung die Bewegung sichtbar macht; genau das soll sie nicht sein.
   Laeuft einmal und bleibt stehen. Ein Alternate-Loop wuerde wieder
   herausfahren und den Kopf dauerhaft unruhig machen.
   transform-origin liegt auf demselben Punkt wie object-position, damit der
   Fokus des Motivs beim Zoomen an seiner Stelle bleibt und nicht wandert.
   overflow: hidden braucht die Media-Box selbst: mobil steht sie im Fluss
   ueber dem Text, dort wuerde das skalierte Motiv sonst darueber laufen.
   -------------------------------------------------------------------------- */
.hero__media { overflow: hidden; }
.hero__media video { transform-origin: 54% 48%; }
.hero__media video.is-zooming { animation: hero-zoom 20s linear forwards; }

@keyframes hero-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

/* Der globale Reduced-Motion-Block setzt nur die Dauer auf 0,01ms - das
   wuerde hier sofort auf den Endzustand springen und das Motiv ohne Grund
   beschneiden. Also die Animation ganz abschalten. Und das Video anhalten:
   ein Autoplay-Loop ist genau die Bewegung, die hier abbestellt wurde.
   Uebrig bleibt das poster, also ein stehendes Bild. */
@media (prefers-reduced-motion: reduce) {
  .hero__media video.is-zooming { animation: none; }
}


.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 34rem) 1fr;
  align-items: center;
  /* Ziel: Navbar plus Hero ergeben zusammen 95vh. Der Kopf steht im Fluss
     ueber der Hero, also wird seine Hoehe abgezogen - ueber --h-nav, damit
     der kompaktere Kopf des Breakpoints unter 60rem automatisch mitgerechnet
     wird und der Wert nicht an zwei Stellen gepflegt werden muss.
     Die 5vh Rest sind Absicht: darunter blitzt die naechste Sektion durch
     und zeigt, dass die Seite weitergeht.
     max() statt clamp(): auf flachen Schirmen (Notebook im Querformat,
     geteilte Fenster) waeren 95vh weniger als der Textblock braucht. Die
     32rem sind der Boden, darunter faellt die Sektion nicht. Nach oben
     bleibt sie offen, denn eine Deckelung wuerde die Zusage auf hohen
     Schirmen genau dort brechen, wo sie am sichtbarsten waere. */
  min-height: max(32rem, calc(95vh - var(--h-nav)));
  padding-block: var(--sp-8);
}
.hero__body { max-width: 34rem; }


.hero__title {
  font-family: var(--font-accent);
  font-size: var(--fs-800);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.02;
  color: var(--toem-blau);
  /* Schreibschrift: Ober- und Unterlaengen ragen ~9px aus der Box.
     Padding verhindert Beschnitt und Kollision mit Nachbarelementen. */
  padding-block: 0.06em 0.1em;
  margin-bottom: var(--sp-5);
  max-width: 18ch;
}

/* Ein Wort der Headline in Gold.
   ACHTUNG, gemessen: reines TOEM-Gold haelt auf dem Hero-Grund (#f2f2f2
   bei 0.98 Deckung) nur 1.79:1. Das reisst auch die gelockerte Schwelle
   fuer Grossschrift (3:1) deutlich und laesst das Wort ausgewaschen
   aussehen statt hochwertig. Auf dem Etikett traegt das Gold, weil es
   dort auf dunklem Blau sitzt - hier liegt es auf Hell.
   Der Ton haengt an einer eigenen Variablen. Ein Wechsel auf
   var(--toem-gold) bringt 5.48:1 und liest bei dieser Schriftgroesse
   immer noch als Gold, nur waermer und dunkler. Eine Zeile, ein Wert. */
.hero__title__gold {
  --hero-gold: var(--toem-gold);
  color: var(--hero-gold);
}

/* Drei feste Zeilen. Die Umbrueche stehen im Markup, damit die Aussage
   in drei Schritten liest - die Breite richtet sich nach der laengsten
   Zeile, kein max-width-Reflow. */
.hero__lead {
  font-size: var(--fs-400);
  color: var(--text-muted);
  margin: 0 0 var(--sp-6);
  max-width: none;
  text-wrap: pretty;
}
.hero__lead strong { font-weight: 500; color: var(--c-ink); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
}
/* Textlink statt Button, auf Kundenwunsch. Dieselbe Sprache wie die
   Weiterwege der Sektionen (.prod__all, .rez__all, .herst__all): kein
   Unterstrich, der Pfeil markiert den Link, beim Hover wandert er.
   Eine Stufe groesser als jene, weil es der einzige Weg aus der Hero ist
   und ohne Buttonflaeche sonst zu leicht uebersehen wird.
   min-height haelt die Trefferflaeche bei 44px, obwohl die Flaeche fehlt. */
.hero__more {
  /* Hoverfarbe an einer Variablen, weil hier ein Konflikt steckt.
     Auf Kundenwunsch steht reines TOEM-Gold. Gemessen liegt es auf dem
     Hero-Grund bei 1.4:1 - der Link wird beim Hover also SCHLECHTER
     lesbar als im Ruhezustand (12.4:1). Er wirkt dadurch, als blende er
     weg, statt zu reagieren. Fuer 18px-Schrift verlangt AA 4.5:1.
     Alternativen, jeweils eine Zeile:
       #7d5c21  ->  6.1:1, liest waermer statt heller
       Blau beibehalten und nur den Pfeil vergolden (siehe unten)
     Alle Textlinks der Seite hovern inzwischen ebenfalls auf TOEM-Gold,
     der Hero-Link weicht also nicht mehr ab. */
  --more-hover: var(--toem-gold);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 2.75rem;
  padding: var(--sp-2) 0;
  font-size: var(--fs-400);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--toem-blau);
  transition: color var(--dur) var(--ease);
}
.hero__more:hover,
.hero__more:focus-visible { color: var(--more-hover); }
.hero__more svg {
  width: var(--zeichen-klein); height: var(--zeichen-klein);
  flex: 0 0 auto;
  transition: transform var(--dur-hover) var(--ease-hover);
}
.hero__more:hover svg,
.hero__more:focus-visible svg { transform: translateX(4px); }


/* --- Hinweis nach unten ---------------------------------------------------
   Kundenwunsch vom 04.09.2026: ein Hinweis, dass es weitergeht, mit einer
   kleinen Bewegung.

   ES GAB SCHON EINEN, aber einen stillen: die Hero rechnet sich auf
   95vh minus Kopf, damit unten 5vh der naechsten Sektion durchblitzen
   (siehe die Notiz an .hero__inner). Das ist ein Hinweis fuer den, der ihn
   kennt. Dieser hier ist einer fuer alle anderen.

   MITTIG, auf Kundenwunsch vom 04.09.2026. Er stand zuerst links, in der
   Textspalte, weil dort ein messbarer Grund ist. Mittig liegt er ueber dem
   Video, und das ist ein Grund, der sich bewegt.
   GEMESSEN, sechs Videobilder an genau dieser Stelle: der Grund laeuft von
   rgb(92,92,92) bis rgb(249,247,247). Keine einzige Textfarbe haelt darauf
   AA - Weiss kommt schlechtestens auf 1.07:1, Blau auf 2.35:1, das Grau
   der Nebentexte auf 1.43:1. Ein Hinweis, der je nach Videobild
   verschwindet, ist kein Hinweis.
   DREI FASSUNGEN AN EINEM TAG, jede auf Zuruf:
     1. Feld mit dem Wort "Weiter", 119 x 38 px
     2. nur das Chevron, in einer weissen Scheibe von 34 px
     3. nur das Chevron, ohne Scheibe - diese hier
   OHNE SCHEIBE BLEIBT DAS KONTRASTPROBLEM. Es ist nicht geloest, es ist
   verschoben: statt einer Flaeche traegt das Chevron jetzt einen weissen
   Hof (drop-shadow, dreimal versetzt). Der Hof ist kein WCAG-Mittel - man
   kann ihn nicht als Kontrastwert angeben. Messbar ist er trotzdem, und
   zwar am gerenderten Bild: unten steht, was gemessen wurde.
   Vertretbar ist das, weil der Hinweis KEIN Bedienelement ist: er ist
   aria-hidden und zeigt auf dasselbe Ziel wie der Textlink darueber, der
   auf weissem Grund bei 12.4:1 steht. Faellt der Hinweis auf einem
   Videobild schwach aus, geht keine Funktion verloren.

   TIEFER, derselbe Zuruf: der Abstand ist jetzt negativ - der Hinweis
   steht IM oberen Bereich des Bogens. Das geht, weil der Bogen dort nichts
   zeichnet: oberhalb der Goldlinie ist das SVG durchsichtig. Gemessen bei
   1440 px liegt die Goldlinie in der Mitte 75 von 90 px unter der
   Bogenkante, es bleiben also rund 44 px Luft zur Linie.
   Der Bogen ist min(6.25vw, 6rem) hoch - der Abstand rechnet mit demselben
   Ausdruck, damit der Hinweis mitwandert, wenn der Bogen waechst.

   TREFFERFLAECHE 44 px ueber ::before: die Projektregel verlangt 44,
   sichtbar sind aber nur 18.

   BLAU, NICHT GOLD. Das Chevron traegt die Aussage "es geht weiter", ist
   also keine reine Zierde; fuer bedeutungstragende Grafik gelten 3:1. Gold
   auf dem weissen Feld haelt gemessen 2.0:1 und faellt damit aus.

   KEIN JAVASCRIPT. Ausblenden muss sich der Hinweis nicht: beim Scrollen
   laeuft er mit der Hero aus dem Bild. */
.heroab {
  position: absolute;
  /* Mitte der Hero, nicht Mitte der Textspalte: der Bezugsrahmen
     .hero__inner ist die .wrap und laeuft ueber die ganze Breite. */
  left: 50%;
  translate: -50% 0;
  /* Der Bogen ist min(6.25vw, 6rem) hoch, darueber Luft. Mit --sp-2 blieben
     gemessen 9 px bis zur Bogenkante - der Hinweis saeumte den Bogen. */
  /* IN EINER ZEILE, nicht uebereinander. Gestapelt war der Hinweis 47 px
     hoch und stand damit gemessen nur 18 px unter dem Textlink - zwei
     Zeilen so dicht untereinander lesen sich als Liste von zwei Links,
     nicht als Link und Hinweis. In einer Zeile ist er 20 px hoch und sitzt
     mit rund 55 px Abstand deutlich am Fuss. */
  bottom: calc(min(6.25vw, 6rem) - var(--sp-5));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--toem-blau);
  transition: color var(--dur) var(--ease);
}
.heroab:hover { color: var(--toem-gold); }
.heroab::before {
  content: "";
  position: absolute;
  inset: -13px;
}
.heroab__pfeil {
  width: 1.125rem;
  height: 1.125rem;
  /* Der weisse Hof. Dreimal versetzt statt einmal breit: ein einzelner
     Schatten mit grossem Radius wird blass, drei kurze legen sich zu einer
     geschlossenen Kante zusammen. */
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.9))
    drop-shadow(0 1px 3px rgba(255, 255, 255, 0.85));
  /* 2.6s und eine lange Ruhephase: die Bewegung soll auffallen, wenn man
     hinsieht, und nicht stoeren, wenn man liest. Deshalb sinkt das Chevron
     nur in den ersten 35 Prozent des Takts und steht den Rest still. */
  animation: heroab-sinken 2.6s var(--ease) infinite;
}
@keyframes heroab-sinken {
  0%   { transform: translateY(0);   opacity: 0.55; }
  18%  { transform: translateY(5px); opacity: 1; }
  35%  { transform: translateY(0);   opacity: 0.55; }
  100% { transform: translateY(0);   opacity: 0.55; }
}
/* Der globale Block setzt nur die Dauer auf 0.01ms. Hier wuerde das den
   Endzustand einfrieren - das ist zufaellig der Ruhezustand, aber darauf
   soll sich niemand verlassen muessen. Also ganz abschalten. */
@media (prefers-reduced-motion: reduce) {
  .heroab__pfeil { animation: none; opacity: 1; }
}

/* 59.999rem WIE UEBERALL IM STARTBILD (25.09.2026). Hier stand 60rem, die
   Steuerung und die Koepfe schalten bei 59.999rem: bei genau 960 px lag der
   schmale Aufbau unter der breiten Steuerung, die Pfeile auf dem Text. */
@media (max-width: 59.999rem) {
  .hero { display: flex; flex-direction: column; }
  /* HOEHER UND WEICHER, Kundenwunsch vom 10.09.2026: "Kann das
     Startseiten-Video auf Mobile auch in der Hoehe groesser werden und der
     Verlauf kann weicher sein!"

     HOEHE: vorher 64vw, gemessen 250 px bei 390x844 - also nur 30 Prozent der
     Fensterhoehe. Fuer ein Hero-Video ist das wenig, es liest sich wie ein
     Kopfbild. Jetzt min(96vw, 46svh): bei 390x844 sind es 374 px und damit
     44 Prozent.
     ZWEI MASSE MIT min(), NICHT EINES. 96vw allein waere auf einem quer
     gehaltenen Telefon absurd hoch (bei 844x390 waeren es 810 px auf 390 px
     Fensterhoehe). 46svh allein waere auf einem sehr langen, schmalen Schirm
     zu schmal fuer das Motiv. min() nimmt jeweils das kleinere - die Hoehe
     bleibt in beiden Lagen im Rahmen. svh und nicht vh, damit die
     Adressleiste des Telefons nicht mitrechnet.

     VERLAUF: vorher drei Stopps, der erste bei 74 Prozent - die Blende lag
     also im letzten Viertel und sprang bei 90 Prozent auf 0,6. Gemessen war
     der groesste Helligkeitssprung zwischen zwei Bildzeilen 58 bis 89 Stufen.
     Jetzt sieben Stopps ab 30 Prozent, jeder Schritt klein: die Blende
     verteilt sich ueber mehr als zwei Drittel der Hoehe statt ueber ein
     Viertel. */
  .hero__media {
    position: relative;
    /* GROESSER, Zuruf vom 21.09.2026. Vorher min(96vw, 46svh): bei 390 px
       waren das 374 px, gut ein Drittel des Bildschirms. Jetzt reicht das
       Motiv weiter, ohne den Text zu verdraengen - bei 390 x 844 sind es
       460 px statt 374. */
    height: var(--motiv-hoehe);
    min-height: var(--motiv-hoehe-min);
  }
  .hero__media video { object-position: 62% 48%; transform-origin: 62% 48%; }
  /* Der Verlauf steht als --motiv-verlauf in tokens.css: ihn benutzen
     auch die Bogen-Koepfe der Unterseiten. */
  .hero__media::after { background: var(--motiv-verlauf); }
  .hero__inner {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-block: var(--sp-6) var(--sp-8);
  }
  .hero__body { max-width: none; }
  /* Schmal ist die Hero eine Spalte und der Bogen sitzt direkt unter dem
     Text - am Fuss kleben waere hier ein Uebereinander. Also zurueck in den
     Fluss, unter den Link. */
  /* translate: none IST PFLICHT. Im Fluss gibt es kein left: 50% mehr, das
     die Verschiebung ausgleicht - der Hinweis stand gemessen bei x=3 statt
     mittig. Zentriert wird hier ueber margin-inline: auto, und dafuer muss
     das Element ein Block sein. */
  .heroab {
    position: static;
    translate: none;
    display: flex;
    width: fit-content;
    margin: var(--sp-6) auto 0;
  }
  /* Damit die drei Zeilen auch schmal drei Zeilen bleiben: die laengste
     Zeile braucht bei 18px rund 393px, auf kleinen Schirmen also kleiner. */
  .hero__lead { font-size: 1rem; }
}


/* --- Soziale Netze als Leiste im Hero ---------------------------------
   Vorschlag des Kunden vom 10.09.2026: "als Sidebar in der HeroSection?",
   Vorbild zerhusen.de. Anlass: die Icons sind aus der Kopfleiste heraus,
   weil dort der fuenfte Navipunkt (Karriere) sonst waagerechtes Scrollen
   verursacht - gemessen 12 bis 88 px zwischen 960 und 1060 px.

   IM HERO UND NICHT AM FENSTERRAND, und das ist gemessen entschieden. Bei
   Zerhusen sitzt die Leiste fest am Fensterrand (position: fixed,
   right: 8px). Bei uns geht das nicht: der Wrap ist auf 1320 px gedeckelt
   und zentriert, der freie Rand rechts betraegt
     1920 px Fenster -> 300 px    1440 -> 60 px
     1600 px         -> 140 px    1366 -> 23 px
     ab 1280 px      ->   0 px
   Eine feste Leiste wuerde ab 1280 px Inhalt ueberdecken, und zwar auf
   jeder Seite. Im Hero ist rechts dagegen Platz: der Inhalt endet
   gemessen bei 585 bis 660 px, frei bleiben 439 px bei 1024 und 780 px
   bei 1440.

   DIE KACHEL LOEST DAS KONTRASTPROBLEM. Der Hero liegt auf einem Video,
   dessen Helligkeit von rgb(92) bis rgb(249) reicht - dort haelt keine
   Schriftfarbe. Zerhusen macht es richtig: jedes Icon sitzt auf einer
   eigenen hellen Kachel, bei ihnen #f2f2f2 - zufaellig genau unser
   --c-grau-100. Damit haengt die Lesbarkeit an der Kachel und nicht am
   Video.
   ---------------------------------------------------------------------- */
.hero__sozial {
  position: absolute;
  right: var(--wrap-pad);
  top: 50%;
  translate: 0 -50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* MARKENBLAU MIT GOLDENEM ZEICHEN, Kundenkorrektur vom 10.09.2026: "Die
   Sidebar sollte schon blau sein mit goldenen Icons und der Hover ist dann
   nur ein nach links ruecken. Die Cards in der Sidebar und die Icons koennen
   ruhig groesser!"
   Erst war es umgekehrt - helle Kachel, blaues Zeichen -, weil Zerhusen es so
   macht. Blau mit Gold ist die Hausfarbe und traegt hier genauso gut:
   GEMESSEN 7,85:1 fuer Gold #d7b35f auf Markenblau #0c243e. Verlangt sind
   3:1 fuer grafische Elemente (WCAG 1.4.11), fuer Text waeren es 4,5 - beides
   erfuellt. Und der Kontrast haengt weiter an der Kachel, nicht am Video
   darunter, das von rgb(92) bis rgb(249) reicht.

   GROESSER: Kachel von 2.75rem auf 3.5rem (44 -> 56 px), Zeichen von
   --zeichen-klein auf --zeichen-kreis (22 -> 32 px). Das Verhaeltnis bleibt
   aehnlich (0,50 auf 0,57), der Rand um das Zeichen betraegt 12 px.
   Die Projektregel "Tap-Targets ab 44 px" ist damit uebererfuellt. */
.hero__sozial__link {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--r-sm);
  background: var(--toem-blau);
  color: var(--accent);
  transition: translate var(--dur-hover) var(--ease-hover);
}
.hero__sozial__link svg {
  width: var(--zeichen-kreis);
  height: var(--zeichen-kreis);
}
/* HOVER IST NUR EINE BEWEGUNG, keine Farbaenderung - so verlangt. Nach links,
   also aus dem Rand heraus in Richtung Inhalt; das ist die Richtung, in die
   der Blick ohnehin geht. 4 px, etwas mehr als die 3 px der Pfeile, weil die
   Flaeche groesser ist.
   AM LINK, NICHT AM LISTENELEMENT: die Liste selbst traegt translate: 0 -50%
   fuer die senkrechte Mitte, das darf nicht ueberschrieben werden. */
.hero__sozial__link:hover,
.hero__sozial__link:focus-visible { translate: -0.25rem 0; }

@media (prefers-reduced-motion: reduce) {
  .hero__sozial__link { transition: none; }
  .hero__sozial__link:hover,
  .hero__sozial__link:focus-visible { translate: none; }
}

/* GANZ RAUS, Kundenwunsch vom 15.09.2026: "Die Social Icons als Sidebar
   sollen in der Desktop-Ansicht raus. Im Mobile Menue koennen die bleiben!"

   UNTER 60rem STAND SIE OHNEHIN SCHON AUS - die Grenze war gemessen, nicht
   geschaetzt: bei 960 px geht der Hero in den gestapelten Aufbau, der Inhalt
   fuellt die Breite, und 38 px freier Rand tragen keine 56-px-Kachel. Damit
   ist "in der Desktop-Ansicht raus" gleichbedeutend mit "raus".

   Die drei Ziele gehen NICHT verloren. Sie stehen weiter im Vollbildmenue
   (ul.social in .masthead__panel) und in der Fusszeile jeder Seite
   (.footer__social__link) - also zweimal, mit denselben drei Adressen.

   ALS CSS-REGEL UND NICHT DURCH LOESCHEN DES MARKUPS: dieselbe Entscheidung
   wie bei den Sortenpunkten in der Navigation. Der Entwurf bleibt
   unveraendert, und ein "doch wieder" ist eine Zeile, kein Umbau.
   display: none nimmt die Liste auch aus dem Zugaenglichkeitsbaum - ein
   Vorleseprogramm liest sie also nicht als unsichtbare Dublette mit. */
.hero__sozial { display: none; }

/* TREFFERFLAECHE DES SCROLLHINWEISES, 10.09.2026. Gemessen 18x18 px - das ist
   das Zeichen selbst. Vergroessert wird die Flaeche, NICHT das Zeichen: der
   Hinweis soll dezent bleiben, das war der ausdrueckliche Wunsch vom 09.09.
   ("Hinweis ohne Kreis und etwas weiter nach unten"). padding traegt die
   Flaeche, das Zeichen behaelt seine 18 px.
   Der Link ist ein Zusatz und kein einziger Weg: dasselbe Ziel steht als
   "Entdecken Sie unsere Oele" darueber. Deshalb 44 px und keine Diskussion
   ueber die Gestaltung. */
.heroab {
  box-sizing: content-box;
  padding: 0.8125rem;
}

/* --------------------------------------------------------------------------
   Karussell
   Kundenwunsch vom 21.09.2026: vier Startbilder statt einem. Die Bedenken
   dazu stehen im Dokument "Karussell auf der Startseite" und im Markup.

   GESTAPELT IM RASTER, nicht absolut. Alle Slides liegen in derselben
   Rasterzelle. Damit bestimmt das hoechste die Hoehe der Sektion, und beim
   Wechsel springt nichts - genau der Fehler, den eine absolute Positionierung
   erzeugt, sobald ein Slide zwei Zeilen Lead hat und das naechste drei.

   SICHTBAR IST IMMER GENAU EINES. visibility: hidden statt display: none,
   weil display die Rasterzelle raeumt und die Hoehe mit ihr; ausserdem nimmt
   visibility das Slide aus dem Tabulator-Fluss, ohne dass die Ueberblendung
   verloren geht. Das inert-Attribut setzt js/heroslider.js zusaetzlich - es
   wirkt auch dort, wo visibility durch eine Animation kurz sichtbar bleibt.
   -------------------------------------------------------------------------- */
.hero__buehne {
  display: grid;
}

/* DIE KOEPFE DER UNTERSEITEN KOMMEN 1:1, NUR DIE HOEHE NICHT.
   Kundenwunsch vom 21.09.2026. Jede Unterseite bringt ihre eigene Hoehe mit
   (.hekopf 38rem, .kakopf 72vh, .gokopf 95vh); nebeneinander im selben
   Karussell waere das ein Springen bei jedem Wechsel. Hier gilt fuer alle
   die Hoehe des Startbilds.
   Die Angabe steht auf dem Slide und nicht auf .bogenhero__inner: so
   ueberschreibt sie die Kopfklassen (0,2,0 gegen 0,1,0) und laesst alles
   andere - Bildfokus, Polsterung, Textbau - unberuehrt. */
/* NUR AB 60rem. Unter dieser Breite setzt das Startbild selbst
   min-height: 0 und laesst den Inhalt die Hoehe bestimmen; die Unterseiten
   tun dasselbe (/gold/ etwa mit --hero-hoehe: 0 ab 48rem). Eine erzwungene
   Hoehe waere auf dem Telefon leerer Raum unter dem Text. Gleich hoch sind
   die Slides dort trotzdem: sie liegen in derselben Rasterzelle, und die
   ist so hoch wie das hoechste. */
@media (min-width: 60rem) {
  .hero--slides .hero__slide {
    --hero-hoehe: max(32rem, calc(95vh - var(--h-nav)));
  }
}

/* ABSTAND VOR EINEM NACHGETRAGENEN VERWEIS. Im Startbild traegt
   .hero__lead den Abstand nach unten; der Vorspann eines uebernommenen
   Kopfes tut das nicht, er ist dort das letzte Element. GEMESSEN am
   21.09.2026: Video-Slide 32 px, Herstellung 0 - der Link klebte am Text.
   Derselbe Wert, damit beide Slides gleich aussehen: --sp-6 sind 2rem. */
.hero__slide .bogenhero__body .hero__actions {
  margin-top: var(--sp-6);
}

/* Die Fussnote zum Sternchen steht im Slide dicht unter dem Knopf - auf
   /gold/ traegt ihre eigene Bahn den Abstand, hier nicht. GEMESSEN am
   21.09.2026: 7 px zwischen Knopf und Text. */
.hero__slide .gostern__text {
  margin-top: var(--sp-5);
}

/* Der Bogen steht einmal an der Sektion. Der eigene Bogen der Unterseite
   ist beim Uebernehmen entfernt worden; diese Regel faengt den Fall ab,
   dass im Theme ein Kopf mit Bogen hereinkommt. */
.hero__slide > .schwung {
  display: none;
}
.hero__slide {
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-lang, 600ms) var(--ease);
}
.hero__slide.is-an {
  opacity: 1;
  visibility: visible;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--bg-platzhalter);
}

/* --- Steuerung ------------------------------------------------------------
   ZWEITE FASSUNG, 21.09.2026. Die erste stellte Pfeile, Punkte und Pause in
   eine Reihe unten links. Am fertigen Bild gesehen: sieben Elemente
   nebeneinander nehmen die halbe Textspalte ein und ziehen mehr
   Aufmerksamkeit als die Headline. Jetzt stehen die Pfeile an den Seiten und
   die Punkte mittig am Fuss - die Aufteilung, die jeder von Karussells kennt.

   DIE FLAECHE FAENGT KEINE KLICKS. Die Steuerung liegt ueber dem ganzen
   Hero, damit die Pfeile an den Rand koennen; pointer-events: none laesst
   alles durch, nur die Knoepfe selbst nehmen wieder an.

   KONTRAST HAENGT AM KNOPF, nicht am Motiv. Jeder Knopf traegt eine eigene
   helle Flaeche - darauf haelt das Blau, egal was dahinter liegt. Gemessen
   wurde das beim Scrollhinweis: der Grund im Hero laeuft von rgb(92) bis
   rgb(249), darauf haelt keine Schriftfarbe allein.
   -------------------------------------------------------------------------- */
.hero__steuerplatz {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.hero__steuerung > * {
  pointer-events: auto;
}
.hero__knopf {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--auf-motiv-linie);
  border-radius: var(--r-sm);
  background: var(--auf-motiv);
  color: var(--toem-blau);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.hero__knopf svg {
  width: 1.125rem;
  height: 1.125rem;
}
.hero__knopf:hover {
  background: var(--toem-blau);
  color: var(--accent);
}
.hero__knopf:focus-visible {
  outline: 2px solid var(--toem-blau);
  outline-offset: 2px;
}

/* Die Pfeile an den Seiten, auf halber Hoehe. Innerhalb der Polsterung des
   Wraps, damit sie auf schmalen Schirmen nicht am Fensterrand kleben. */
.hero__knopf--zurueck,
.hero__knopf--vor {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
}
.hero__knopf--zurueck { left: var(--wrap-pad); }
.hero__knopf--vor { right: var(--wrap-pad); }

/* BEIDE PFEILE RECHTS, WO LINKS KEIN RAND IST (25.09.2026). Links stehen die
   Pfeile am Rand des Rasters - dort, wo auch der Text beginnt. Das geht nur,
   solange neben dem Raster Platz ist. GEMESSEN ueber alle vier Slides: ab
   1410 px frei, von 961 bis 1400 px lag der linke Pfeil auf ein bis fuenf
   Textzeilen, auch auf den ueblichen Notebookbreiten 1280 und 1366.
   Rechts steht in jedem Slide das Motiv, nie Text. Also dort zusammen,
   nebeneinander, auf halber Hoehe wie bisher. */
@media (min-width: 60rem) and (max-width: 88rem) {
  .hero__knopf--zurueck { left: auto; right: calc(var(--wrap-pad) + 2.75rem + var(--sp-2)); }
  .hero__knopf--vor { right: var(--wrap-pad); left: auto; }
}

/* Punkte mittig am Fuss, im oberen Bereich des Bogens. Genau dort sass bis
   zum 21.09.2026 der Scrollhinweis; mit ihm ist der Platz frei geworden,
   und die Punkte ruecken hinein - Zuruf "weiter unten". Die Stelle ist
   nicht geraten: oberhalb der Goldlinie zeichnet das Bogen-SVG nichts, und
   bei 1440 px liegt die Linie gemessen 75 von 90 px unter der Bogenkante.
   Der Ausdruck ist derselbe, mit dem der Hinweis dort stand. */
.hero__punktzeile {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  bottom: calc(min(6.25vw, 6rem) - var(--sp-5));
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.hero__punkte {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* TREFFERFLAECHE 44 px, sichtbar sind 10 - und die Flaechen stossen
   aneinander, statt sich zu ueberlappen.
   GEMESSEN am 21.09.2026: zuerst trug der Punkt selbst die Flaeche ueber ein
   ::before mit inset: -17px. Bei 10 px Punkt und 8 px Abstand ragt so jede
   Flaeche 9 px in die des Nachbarn. Der Klicktest landete daraufhin
   reproduzierbar auf dem falschen Punkt - Playwright meldete, der Nachbar
   fange den Zeiger ab. Jetzt traegt das Listenelement die 44 px und der
   Punkt sitzt mittig darin: die Flaechen beruehren sich, keine ueberlappt.
   -------------------------------------------------------------------------- */
/* ENGER AM RECHNER, VOLL AM FINGER. Die Zelle traegt die Trefferflaeche,
   der Punkt bleibt 10 px. Am Rechner zielt eine Maus; 1.75rem (28 px)
   ruecken die Punkte dicht zusammen und liegen weiter ueber dem Mindestmass
   der WCAG von 24 px. Zweimal nachgeschaerft am 21.09.2026 auf Zuruf.
   Unter 60rem gilt die Projektregel von 44 px, siehe weiter unten. */
.hero__punkte li {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 2.75rem;
}
/* DER KNOPF FUELLT DIE ZELLE, der Punkt ist nur das, was man sieht.
   GEMESSEN am 21.09.2026, nachdem die Zelle die 44 px bekommen hatte: die
   Flaeche lag am Listenelement, angeklickt wird aber der Knopf - und der war
   10 px gross. Ein Klick 8 px neben der Mitte ging daneben, geprueft bei
   390 px mit echten Mausklicks auf 0, 8, 14 und 20 px Abstand. WCAG 2.5.8
   verlangt 24 px; 10 sind es nicht.
   WARUM NICHT WIEDER ::before MIT inset: -17px am Knopf: genau daran ist der
   erste Versuch gescheitert, die Flaechen ragten 9 px ineinander und der
   Klicktest landete auf dem Nachbarn. Die Zelle begrenzt die Flaeche, der
   Knopf fuellt sie aus - so stossen sie aneinander, ohne sich zu ueberlappen. */
.hero__punkt {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.hero__punkt::before {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  border: 1px solid var(--toem-blau);
  border-radius: 50%;
  /* KEIN HOF. Er stammte aus dem Moment, als der Verlauf am Motiv nicht
     wirkte und unter der Steuerung 1.53:1 ankamen. Seit der Verlauf sitzt,
     liegen dort gemessen ueber 14:1 - der Hof traegt nichts mehr und ist
     am 21.09.2026 auf Zuruf wieder raus. */
  /* Deckend, nicht durchscheinend: der Punkt ist 10 px gross und liegt auf
     wechselnden Motiven. */
  background: var(--auf-motiv);
  transition: background var(--dur) var(--ease);
}
.hero__punkt[aria-current="true"]::before {
  background: var(--toem-blau);
}
/* Der Ring liegt jetzt um die Zelle und nicht um den Punkt. Nach innen
   versetzt, damit er die Nachbarzelle nicht beruehrt. */
.hero__punkt:focus-visible {
  outline: 2px solid var(--toem-blau);
  outline-offset: -4px;
  border-radius: 50%;
}

/* PAUSENKNOPF, 25.09.2026 - mit dem Selbstlauf zurueck (WCAG 2.2.2).
   Dieselbe Zelle wie ein Punkt, damit die Reihe ruhig bleibt: sichtbar ist
   ein kleines Zeichen, getroffen wird die ganze Zelle. Pause, solange es
   laeuft; Abspielen, wenn es steht. */
.hero__pause {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 2.75rem;
  margin-left: var(--sp-1);
  padding: 0;
  border: 0;
  background: none;
  color: var(--toem-blau);
  cursor: pointer;
}
/* display: grid schlaegt das hidden-Attribut - also ausdruecklich. */
.hero__pause[hidden] { display: none; }
.hero__pause svg { width: 0.875rem; height: 0.875rem; }
.hero__pause-aus,
.hero__pause[aria-pressed="true"] .hero__pause-an { display: none; }
.hero__pause[aria-pressed="true"] .hero__pause-aus { display: block; }
.hero__pause:hover { color: var(--toem-gold); }
.hero__pause:focus-visible {
  outline: 2px solid var(--toem-blau);
  outline-offset: -4px;
  border-radius: var(--r-sm);
}


/* --- Schmal ---------------------------------------------------------------
   AUF DEM BILD, NICHT DARUNTER. Zweiter Anlauf, 21.09.2026: zuerst fiel die
   Steuerung hier in den Fluss - sie stand dann unter dem Motiv auf weisser
   Flaeche und lief in den Bogen. Am Geraet gesehen, nicht in der Emulation.
   Jetzt liegt sie wie am Rechner ueber dem Motiv, nur in einer Reihe statt
   an drei Stellen: die Pfeile wandern aus den Seitenraendern in die Mitte,
   weil sie dort sonst auf dem Text laegen - der fuellt schmal die ganze
   Breite.
   UEBER DEM BOGEN: der ist hier min(6.25vw, 6rem) hoch, bei 390 px also
   24 px. Ein Abstand von --sp-5 haelt die Reihe darueber.
   -------------------------------------------------------------------------- */
/* --- Die Sternchen-Fussnote am Rechner ------------------------------------
   SIE DARF KEINE RASTERZEILE KOSTEN. GEMESSEN am 21.09.2026 bei 1440 px:
   als drittes Kind des zweispaltigen Goldrasters machte sie das Slide
   844 px hoch statt 751 - und weil alle Slides so hoch sind wie das
   hoechste, wuchs die ganze Sektion um 93 px mit. Vorher lag die Zeile
   innerhalb des Motivs und kostete nichts; dort kann sie nicht bleiben,
   weil das Motiv am Telefon oben steht und gedeckelt ist.
   Absolut am Fuss geloest kostet sie wieder nichts. Der Knopf endet
   gemessen bei 699 px, die Zeile beginnt bei 863 - sie beruehren sich
   nicht.
   NUR IM KARUSSELL: auf /gold/ steht die Fussnote in einer eigenen Bahn
   unter dem Kopf und wird von hier nicht angefasst. */
@media (min-width: 60rem) {
  /* DIE VIDEO-UEBERSCHRIFT STAND TIEFER ALS DIE ANDEREN, Zuruf vom
     21.09.2026. GEMESSEN bei 1440 px, Abstand zur Oberkante der Sektion:
     Goldaktion 156 px, Karriere 161, Herstellung 171 - und das Video 225.
     Der Unterschied ist der Vorabstand der Ueberschrift von 92 px; die drei
     anderen beginnen mit einem Eyebrow ohne Vorabstand. Gekuerzt auf
     1.75rem stehen alle vier im selben Bereich.
     NICHT AUF NULL wie am Telefon: hier steht die Zeile im Bild, und ohne
     jeden Vorabstand klebte sie an der Oberkante der Sektion. */
  .hero--slides .hero__title { margin-top: 1.75rem; }

  .hero--slides .gokopf__inner { position: relative; }
  /* IM FLUSS UNTER DEM KNOPF, 25.09.2026 (siehe inc/startbild.php). Die
     absolute Lage darunter bleibt nur als Rueckweg stehen und ist
     ausgeschaltet: der Knopf haengt an der Ueberschrift, die Unterkante an
     der Fensterhoehe - in flachen Fenstern lag die Zeile auf dem Knopf
     (Kundenmeldung aus Edge, gemessen 1280x720: 39 px). */
  .hero--slides .gostern__text {
    position: static !important;
  }
  .hero--slides .gostern__text--alt {
    position: absolute;
    left: 0;
    /* UEBER DEM BOGEN, nicht darin. GEMESSEN am 21.09.2026: mit bottom: 0
       sass die Zeile bei 834 px in einer 855 px hohen Sektion - genau in
       den letzten 21 px, durch die der Goldbogen laeuft. Sie war da, aber
       niemand sah sie. Der Bogen ist min(6.25vw, 6rem) hoch; darueber steht
       sie frei. */
    right: 0;
    bottom: calc(min(6.25vw, 6rem) + var(--sp-2));
    margin: 0;
    /* LINKSBUENDIG MIT DEM TEXT. Die Zeile haengt am Rahmen, der Text steht
       um dessen Innenabstand weiter rechts - gemessen 56 px bei 1440 und
       51 px bei 1280, also kein fester Wert. inherit nimmt genau den
       Abstand des Rahmens und folgt ihm auf jeder Breite. */
    padding-inline: inherit;
  }
}

@media (max-width: 59.999rem) {
  /* PFEILE AN DIE RAENDER, PUNKTE AN DEN FUSS - wie am Rechner, Zuruf vom
     21.09.2026. Ein Zwischenstand desselben Tages stellte alles in eine
     Reihe; das war richtig, solange die Steuerung unter dem Motiv auf
     weisser Flaeche stand. Seit sie im Bild liegt, ist Platz fuer beides,
     und die Fusszeile wird ruhiger.
     DIE STEUERUNG SPANNT UEBER DAS MOTIV und dient nur als Rahmen - sie
     faengt keine Klicks ab, sonst laege sie ueber dem Bild wie eine Scheibe. */
  .hero__steuerung {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--slide-motiv, auto);
    display: block;
    pointer-events: none;
  }
  .hero__steuerung > * { pointer-events: auto; }

  .hero__knopf--zurueck,
  .hero__knopf--vor {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
  }
  .hero__knopf--zurueck { left: var(--sp-3); right: auto; }
  .hero__knopf--vor { right: var(--sp-3); left: auto; }

  /* Am Fuss des Motivs, im dichten Teil des Verlaufs. */
  .hero__punktzeile {
    position: absolute;
    left: 50%;
    translate: -50% 0;
    bottom: var(--sp-3);
  }

  /* VOLLE TREFFERFLAECHE AM FINGER: die Projektregel verlangt 44 px, und am
     Telefon zielt niemand mit der Maus. GEMESSEN am 21.09.2026 auf 360, 390
     und 414 px. */
  /* ENGER, Zuruf vom 21.09.2026. 2.75rem hielten die Punkte 44 px
     auseinander; mit 2.25rem sind es 36. Die Trefferflaeche bleibt
     36 x 44 px und damit deutlich ueber dem Mindestmass der WCAG von
     24 px - unter die Projektregel von 44 px in der Breite geht sie
     bewusst, weil die Zellen aneinanderstossen und daneben nichts liegt,
     was man versehentlich trifft. */
  .hero__punkte li {
    width: 2.25rem;
  }
  /* Der Pausenknopf teilt die Zellbreite der Punkte (25.09.2026). */
  .hero__pause { width: 2.25rem; }

  /* KEIN HOCHZIEHEN DES MOTIVS IM SLIDE. Der Kopf von /gold/ zieht die
     Flaschen schmal mit margin-top: -96px unter den Textblock - dort endet
     er mit dem Knopf, und das Motiv schiebt sich huebsch darunter. Im Slide
     steht darunter noch die Fussnote zum Sternchen, und die lag damit unter
     den Flaschen: GEMESSEN am 21.09.2026 bei 390 px, 64 px Ueberlappung,
     die letzten Worte verdeckt. Innerhalb des Karussells also kein Zug nach
     oben; auf /gold/ selbst bleibt alles, wie es ist. */
  /* WENIGER FUSSPOLSTER IM KARUSSELL. Jeder Kopf bringt seine eigene mit -
     gemessen bei 390 px: Herstellung 128 px, Karriere 72, Gold und Video
     je 64. Auf der Unterseite tragen sie den Abstand zum naechsten
     Abschnitt; im Slide steht darunter die Steuerung, und der Abstand
     dorthin war zu gross (Video-Slide gemessen 107 px). --sp-5 sind 24. */
  /* LUFT ZWISCHEN INHALT UND BOGEN, Zuruf vom 21.09.2026. Erst trugen alle
     Slides dieselbe Hoehe und unter dem kuerzesten standen 212 px Leere;
     seit nur das sichtbare Slide die Hoehe traegt, klebte der Bogen am
     Text. Der Bogen ist hier min(6.25vw, 6rem) hoch, bei 390 px also 24 px
     - das Polster kommt obendrauf. */
  .hero--slides .hero__slide {
    --hero-polster-fuss: var(--sp-7);
  }

  /* ZENTRIEREN HILFT HIER NICHT, gemessen am 21.09.2026. Der Gedanke lag
     nahe: alle Slides sind so hoch wie das hoechste, das kurze Video-Slide
     klebt oben und laesst unten Luft. Zentriert stiess sein Inhalt aber auf
     die Steuerung (3 px Ueberlappung), und mit reserviertem Fuss wuchs die
     Sektion auf 1066 px und die Luecke auf 73 - beides schlechter als der
     Ausgangswert. Bleibt also oben ausgerichtet. */
  /* Das Video-Slide steht im Aufbau des Startbilds und liest die Variable
     nicht; sein Polster steht fest in .hero__inner. Derselbe Wert von Hand,
     damit die vier Slides gleich tief sitzen. */
  .hero--slides .hero__slide .hero__inner {
    padding-bottom: var(--sp-7);
  }

  /* --- Ein Aufbau fuer alle vier Slides ----------------------------------
     KUNDENWUNSCH VOM 21.09.2026: oben das Motiv, darunter die Steuerung,
     darunter der Text - und das Motiv bei jedem Slide gleich hoch.
     WARUM UEBERHAUPT: die vier Slides waren am Telefon drei verschiedene
     Bauarten. Beim Video endete das Motiv gemessen bei 454 px, bei
     Herstellung und Karriere fuellte es den ganzen Slide bis 990 px, beim
     Goldkopf stand es unter dem Text. Die Steuerung sitzt aber an einer
     Stelle: sie lag damit auf drei Slides im Bild und auf einem auf weisser
     Flaeche. Jetzt endet das Motiv ueberall auf derselben Hoehe.
     DAS MASS KOMMT VOM VIDEO-SLIDE, damit sich dort nichts aendert: es ist
     dieselbe Rechnung wie in .hero__media weiter oben.
     NUR IM KARUSSELL. Auf /herstellung/, /karriere/ und /gold/ bleibt der
     Kopf, wie er abgenommen ist - dort gibt es keine Steuerung, die eine
     feste Kante braucht. */
  .hero--slides {
    --slide-motiv: var(--motiv-hoehe);
    --slide-motiv-min: var(--motiv-hoehe-min);
  }

  /* NUR DAS SICHTBARE SLIDE TRAEGT DIE HOEHE, Zuruf vom 21.09.2026 („der
     Bogen koennte auch etwas naeher am Inhalt liegen"). Vorher lagen alle
     vier uebereinander im selben Raster und waren so hoch wie das hoechste:
     gemessen bei 390 px endete der Inhalt des Video-Slides bei 850 px, die
     Sektion aber erst bei 1062 - 212 px Luft ueber dem Bogen. Bei
     Herstellung waren es null. Jetzt folgt die Sektion dem Slide, das man
     sieht.
     DER PREIS: die Seite springt in der Hoehe, wenn man blaettert. Am
     Telefon faellt das weniger auf als am Rechner, weil ohnehin gescrollt
     wird - und 212 px Leere unter dem ersten Slide fielen mehr auf.
     Das Ueberblenden entfaellt damit; ohne Selbstlauf wechselt ohnehin nur,
     wer selbst blaettert. */
  /* SENKRECHT GEHOERT DEM BROWSER, WAAGERECHT UNS. Ohne pan-y faengt der
     Browser auch die Querbewegung ab und das Wischen kommt nie an; ohne die
     Angabe ueberhaupt wuerde unser Skript das Scrollen stoeren. */
  .hero--slides .hero__buehne { display: block; touch-action: pan-y; }
  .hero--slides .hero__slide {
    position: relative;
    grid-area: auto;
    opacity: 1;
    visibility: visible;
    transition: none;
  }
  .hero--slides .hero__slide:not(.is-an) { display: none; }

  /* --- Der Wechsel, Zuruf vom 22.09.2026 ---------------------------------
     Am Telefon traegt nur das sichtbare Slide die Hoehe, deshalb liegt es
     nicht im Stapel und kann nicht ueberblenden - der Wechsel war ein
     Sprung. Statt einer Ueberblendung kommt das neue Slide jetzt aus der
     Richtung herein, in die geblaettert wurde. Das liest sich als Bewegung
     und nicht als Austausch.
     3 % STATT MEHR: der Weg soll spuerbar sein, nicht vorgefuehrt. Bei
     390 px sind das 12 px.
     --dur-hover UND NICHT --dur-media: 600 ms sind die Zeit fuer eine
     Ueberblendung zwischen Bildern, bei der niemand wartet. Hier antwortet
     die Seite auf einen Wisch, und eine Antwort, die eine halbe Sekunde
     braucht, fuehlt sich traege an. 300 ms sind die Zeit, die das Projekt
     fuer Bewegungen von Flaechen gesetzt hat - genau dieser Fall. */
  .hero--slides .hero__slide.is-an {
    animation: hero-slide-vor var(--dur-hover, 300ms) var(--ease-hover) both;
  }
  .hero--slides[data-richtung="zurueck"] .hero__slide.is-an {
    animation-name: hero-slide-zurueck;
  }
  @keyframes hero-slide-vor {
    from { opacity: 0; translate: 3% 0; }
    to   { opacity: 1; translate: 0 0; }
  }
  @keyframes hero-slide-zurueck {
    from { opacity: 0; translate: -3% 0; }
    to   { opacity: 1; translate: 0 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero--slides .hero__slide.is-an { animation: none; }
  }

  /* Bogen-Koepfe: das Motiv lag hinter dem Text und fuellte den Slide.
     Hier wird es zum Block oben. */
  .hero--slides .bogenhero__media {
    /* RELATIVE, NICHT STATIC. Beides holt das Motiv aus dem absoluten
       Vollflaechen-Modus in den Fluss - aber static nimmt ihm auch den
       Bezugsrahmen, und daran haengt der Verlauf: ::after mit inset: 0
       spannte dann ueber das ganze Slide statt ueber das Motiv. GEMESSEN am
       21.09.2026: unter der Steuerung kamen dadurch 1.53:1 an, weil der
       Verlauf sich auf 1068 px statt auf 460 verteilte. */
    position: relative;
    height: var(--slide-motiv);
    min-height: var(--slide-motiv-min);
    margin-top: 0;
  }

  /* --- Der Text beginnt bei jedem Slide auf derselben Hoehe -------------
     Zuruf vom 21.09.2026, mit dem Karriere-Slide als Vorbild. GEMESSEN bei
     390 px, Abstand der ersten Zeile zur Motivkante: Goldaktion 24 px,
     Karriere 61, Video 76, Herstellung 128. Die Spanne kommt nicht vom
     Polster - das war bei Herstellung und Karriere dasselbe -, sondern von
     der Zentrierung im Rahmen: ueberschuessige Hoehe verteilt sich oben und
     unten, und wie viel uebrig bleibt, haengt an der Laenge des Textes.
     Dieselbe Falle wie schon viermal in diesem Projekt.
     align-content: start nimmt die Zentrierung heraus, das Polster setzt
     den Abstand - eine Zahl fuer alle vier. */
  .hero--slides {
    --slide-textluft: var(--sp-7);
  }
  .hero--slides .bogenhero__inner,
  .hero--slides .hero__inner {
    align-content: start;
    align-items: start;
    padding-top: var(--slide-textluft);
  }
  /* DAS VIDEO-SLIDE HAT KEIN EYEBROW, sondern beginnt mit der Ueberschrift -
     und die traegt einen Vorabstand von einem Geviert, gemessen 49.6 px bei
     49.6 px Schrift. Damit stand ihre Oberkante 98 px unter der Motivkante,
     waehrend die Labels der anderen drei bei 48 px sitzen. Am Telefon faellt
     die Luft ganz weg; am Rechner wird sie nur gekuerzt, siehe unten. */
  .hero--slides .hero__title { margin-top: 0; }

  /* --- Der Goldkopf ist am Telefon andersherum gebaut --------------------
     AUF /gold/ MIT GRUND: dort stehen Text und Knopf oben, das Motiv haengt
     mit negativem Rand darunter, sodass die Flaschenhaelse hinter dem Knopf
     verschwinden. Im Karussell braucht die Steuerung aber bei jedem Slide
     dieselbe Kante, und dafuer muss das Motiv nach oben.
     ORDER STATT column-reverse: ein erster Versuch drehte die Reihenfolge
     um und nahm die Sternchen-Fussnote mit - sie landete zwischen Motiv und
     Ueberschrift und lag auf ihr. Mit order steht jedes der drei Stuecke
     dort, wo es hingehoert.
     WAS HIER ZURUECKGENOMMEN WIRD, steht in css/components/bogenhero-koepfe.css
     und gilt auf /gold/ unveraendert weiter. */
  .hero--slides .gokopf__inner {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 0;
  }
  .hero--slides .gokopf .bogenhero__media {
    order: -1;
    /* Der Zug nach oben und die Lage hinter dem Knopf gelten nur dort, wo
       ein Knopf darueber steht. Hier steht keiner. */
    margin-top: 0;
    z-index: auto;
    height: var(--slide-motiv);
    min-height: var(--slide-motiv-min);
  }
  /* FREISTELLER, KEIN FOTO: die Flaschen stehen auf Weiss. cover wuerde sie
     beschneiden, contain haelt sie ganz im Bild. */
  .hero--slides .gokopf .bogenhero__media img {
    max-height: 100%;
    height: 100%;
    object-fit: contain;
  }
  /* DER BARREN GEHOERT DAZU, Zuruf vom 21.09.2026. Bei 374 px Motivhoehe
     lief er ueber den Text darunter, deshalb stand er kurzzeitig auf
     display:none. Mit 460 px ist Platz; er sitzt unten rechts neben den
     Flaschen, innerhalb des Motivs. */
  .hero--slides .gokopf .bogenhero__media img.gokopf__barren {
    display: block;
    position: absolute;
    right: 0;
    bottom: var(--gokopf-fussraum);
    width: 38%;
    height: auto;
    max-height: 34%;
    object-fit: contain;
  }
  .hero--slides .gokopf .bogenhero__media { position: relative; }
  /* Der Goldkopf traegt sein Polster am Textblock, weil der Rahmen darum
     auch das Motiv enthaelt. */
  .hero--slides .gokopf__inner { padding-top: 0; }
  .hero--slides .gokopf__body {
    order: 1;
    padding-top: var(--slide-textluft);
  }
  .hero--slides .gostern__text { order: 2; }

  /* DERSELBE ABSCHLUSS WIE BEIM VIDEO. Auf den Unterseiten liegt ueber dem
     Motiv ein seitlicher Weissverlauf (96deg), damit der Text darauf lesbar
     bleibt - dort steht er ja im Bild. Im Karussell steht der Text am
     Telefon unter dem Motiv; der seitliche Schleier nimmt dem Foto dann nur
     Kraft, und die Unterkante blieb hart. Also hier der Verlauf nach unten,
     in dem auch die Steuerung liegt. */
  .hero--slides .bogenhero__media::after { background: var(--motiv-verlauf); }

  /* FUSSRAUM IM GOLDMOTIV. Die Flaschen reichten bis zur Unterkante, und
     die Steuerung lag darauf - der aktive Punkt gemessen mitten auf dem
     Goldbarren. Der Goldkopf hat keinen Verlauf (weisser Grund), also muss
     das Motiv selbst Platz lassen. */
  /* DER BARREN MUSS BEI DEN FLASCHEN BLEIBEN. Er haengt unten rechts am
     Motivkasten, das Flaschenbild steht mit object-fit: contain oben darin -
     und weil das Bild hochformatig ist (998 x 1400), fuellt es einen breiten
     Kasten nicht in der Hoehe. GEMESSEN am 22.09.2026 bei 768 px: Flaschen
     bis 495, Barren ab 517; auf einem hoeheren Tablet lief die Luecke weiter
     auf. Der Kasten bekommt deshalb genau die Breite, die das Bild bei
     dieser Hoehe einnimmt - dann sitzt der Barren wieder an den Flaschen.
     0.72 ist das Seitenverhaeltnis des Motivs, gerundet. */
  .hero--slides .gokopf .bogenhero__media {
    --gokopf-fussraum: calc(2.75rem + var(--sp-3));
    width: min(100%, calc((var(--slide-motiv) - var(--gokopf-fussraum)) * 0.72));
    margin-inline: auto;
  }
  .hero--slides .gokopf .bogenhero__media img {
    height: calc(100% - var(--gokopf-fussraum));
    object-position: center top;
  }

  /* IN EINE ZEILE, Zuruf vom 21.09.2026. GEMESSEN bei 390 px: „Wir
     vergolden Weihnachten:" braucht bei 32 px Schrift 405 px und hat 350 -
     es fehlen vier Pixel Schriftgroesse, nicht vierzig. Mit 1.6875rem
     (27 px) passt die Zeile mit etwas Luft.
     NICHT WEGLASSEN: die Zeile ordnet die Kampagne ein. Ohne sie steht
     „Deckel finden, Gold gewinnen" ohne Bezug und der Doppelpunkt haengt. */
  .hero--slides .gokopf .bogenhero__title { font-size: 1.6875rem; }

  /* DIE STEUERUNG SITZT AN DER MOTIVKANTE, nicht mehr am Fuss der Sektion.
     Sie zaehlt von oben, weil das Motiv von oben misst; vom Fuss aus haengt
     ihre Lage an der Texthoehe und damit am Slide. */
}

/* Ohne Bewegung: kein Ueberblenden, nur umschalten. Der selbsttaetige
   Wechsel bleibt in js/heroslider.js ohnehin aus. */
@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; }
}

/* --- Der Goldkopf mit Video oder eigenem Querbild (30.09.2026) -------------
   OHNE VIDEO steht sein Motiv als Freisteller NEBEN dem Text, auf Weiss -
   so ist er gebaut (components/bogenhero-koepfe.css). EIN FILM IST ABER KEIN
   FREISTELLER: Er füllt die Fläche hinter dem Text wie bei jedem anderen
   Bogen-Kopf, mit demselben Schleier. Dasselbe gilt für ein im Slide
   gewähltes Bild (etwa den Aktionsheader im Querformat). inc/startbild.php
   setzt die Hülle dafür vor den Text und gibt dem Slide .hat-motiv.
   VIER KLASSEN, damit diese Regeln die des Goldkopfs in jeder Breite
   schlagen (dort drei). */
.hero--slides .hat-motiv.gokopf .bogenhero__media {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  z-index: auto;
  order: 0;
}
.hero--slides .hat-motiv.gokopf .bogenhero__media::after {
  content: "";
  background: var(--motiv-schleier);
}
.hero--slides .hat-motiv.gokopf .gokopf__inner { grid-template-columns: minmax(0, 1fr); }
/* Das Bild wie in jedem Bogen-Kopf: füllend, um den Fokuspunkt beschnitten.
   Die Regeln des Freistellers (Breite nach Höhe, contain, oben bündig)
   gelten hier nicht. */
.hero--slides .hat-motiv.gokopf .bogenhero__media img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  object-fit: cover;
  object-position: var(--hero-fokus, 64% 42%);
  background: var(--bg-platzhalter);
}
@media (max-width: 59.999rem) {
  /* Am Telefon oben, so hoch wie jedes Slide-Motiv - wie beim Video-Slide. */
  .hero--slides .hat-motiv.gokopf .bogenhero__media {
    position: relative;
    inset: auto;
    height: var(--slide-motiv);
    min-height: var(--slide-motiv-min);
  }
  .hero--slides .hat-motiv.gokopf .bogenhero__media::after { background: var(--motiv-verlauf); }
}