/* ==========================================================================
   Sektionen 1: Header (Hauptnavi) und Hero
   Mapping: header.php  |  template-parts/hero.php

   Die Topbar ist auf Kundenwunsch entfallen. Ihre fuenf Ziele
   (Unternehmen, Karriere, Handel, FAQ, Blog) stehen vollstaendig im
   Footer - siehe .footer__col. Damit tragen Unternehmen und Karriere
   allerdings keinen Weg mehr im Kopf; das ist als offener Punkt notiert.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hauptnavi – Markenwelt, Herstellung, Rezepte, Kontakt
   Steht in Markenblau und bleibt beim Scrollen oben stehen. Der Balken
   fuehrt keine eigene Kante: gegen die helle Seite trennt ihn die Farbe,
   gescrollt kommt ein Schatten dazu (siehe .is-compact).
   -------------------------------------------------------------------------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg-nav);
  transition: box-shadow var(--dur-nav) var(--ease-nav);
}
.masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  min-height: var(--h-nav);
  transition: min-height var(--dur-nav) var(--ease-nav);
}

/* --- Kompakter Zustand nach dem Scrollen ------------------------------
   Klasse wird per JS gesetzt (siehe Script am Dokumentende).
   Statt der Wortmarke steht dann nur die Muehle.

   Frueher waren das zwei SVGs, die per display umgeschaltet wurden -
   display laesst sich nicht animieren, deshalb sprang das Logo. Jetzt
   liegt nur noch ein SVG im Markup: die Wortmarke, in der die Muehle
   ohnehin steckt (gemessen belegt sie darin x 0 bis 278,98 bei Hoehe
   222,28 - genau der viewBox der frueheren Bildmarke).
   Der Uebergang ist damit rein geometrisch:
   - der Kasten faehrt von Wortmarkenbreite auf Bildmarkenbreite zu und
     schiebt die Schrift nach rechts aus dem Bild,
   - das SVG verkleinert sich ueber die Hoehe, die Muehle skaliert also
     mit, statt zu springen,
   - die Schrift blendet dabei aus, sonst saehe man die Kante mitten
     durch die Buchstaben laufen.
   -------------------------------------------------------------------- */
/* ------------------------------------------------------------------
   WORDPRESS WICKELT TEMPLATE-TEILE EIN - und nimmt dem Kopf damit den
   Halt. Der Block-Editor setzt um jeden Template-Teil ein
   div.wp-block-template-part. Dieses div wird zum umgebenden Block fuer
   position: sticky, und weil es genau so hoch ist wie der Kopf selbst,
   hat der nichts, worin er kleben koennte - er scrollt weg.

   GEMESSEN am 16.09.2026, nach 2000 px Scrollen bei 1440 px Fenster:
     Prototyp   /, /handel/, /gold/     Kopf steht bei top = 0
     Theme      /, /handel/, /gold/     Kopf steht bei top = -1963
   Also nicht eine Seite, sondern alle sechzig. Aufgefallen ist es erst
   bei der Frage, ob die Aktionsflaschen einen Link zur Produktseite
   brauchen - die Antwort "die Produkte stehen ja oben im Menue" stimmte
   nur, solange das Menue auch oben steht.

   display: contents nimmt dem div seinen Kasten, ohne den Inhalt
   anzutasten. Der Kopf haengt dann wieder an .wp-site-blocks, das ueber
   die ganze Seitenhoehe laeuft - genau wie am <body> im Prototyp.
   Gemessen traegt das div weder Rand noch Polster noch eine eigene Lage,
   es ist eine reine Huelle; es geht dabei also nichts verloren.

   DIESE REGEL GREIFT NUR IM THEME. Im Prototyp gibt es kein
   .wp-block-template-part, der Selektor trifft dort nichts - deshalb
   steht sie hier und nicht in einer theme-eigenen Datei, und deshalb
   bleiben beide Fassungen byteidentisch.

   MIT DEM KOPF KOMMT AUCH DER LOGOUEBERGANG ZURUECK: .is-compact wurde
   auch vorher gesetzt, nur sah es niemand. Die Blende, das mitskalierende
   SVG und die ausblendende Wortmarke stehen unveraendert weiter unten.
   ------------------------------------------------------------------ */
.wp-block-template-part { display: contents; }

.masthead.is-compact .masthead__inner { min-height: var(--h-nav-compact); }
.masthead.is-compact .mainnav__sub { top: calc(100% + var(--nav-drop-compact) - var(--nav-overlap)); }
/* Erst gescrollt schiebt sich Seiteninhalt unter den Balken. Dann traegt
   der Schatten die Ebene. Im Ruhezustand ganz oben braucht er keinen. */
.masthead.is-compact { box-shadow: var(--shadow-3); }

.masthead__logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  /* Der Kasten ist die Blende. Das eigene :focus-visible bleibt
     sichtbar - overflow beschneidet Nachfahren, nicht die eigene
     Outline. */
  width: var(--logo-w);
  overflow: hidden;
  transition: width var(--dur-nav) var(--ease-nav);
}
.masthead__logo .logo {
  display: block;
  /* Breite explizit, Hoehe ueber das Seitenverhaeltnis. width:auto
     loest sich bei einem SVG-Flexitem auf die Containerbreite auf -
     das SVG wuerde mit der Blende schrumpfen statt aus ihr
     herauszuragen. flex-shrink 0 haelt es ebenfalls davon ab. */
  width: var(--logo-svg-w);
  height: auto;
  aspect-ratio: 775.031 / 222.288;
  /* Der globale Reset setzt img/svg auf max-width:100%. Genau das darf
     hier nicht gelten: das SVG MUSS breiter sein duerfen als seine
     Blende, sonst wird es mitgeschrumpft statt beschnitten. */
  max-width: none;
  flex: 0 0 auto;
  /* TOEM-Gold auf Markenblau: 7.4:1. Genau hier traegt das Gold, auf
     hellem Grund waere es 1.9:1 gewesen. */
  fill: var(--toem-gold);
  transition: width var(--dur-nav) var(--ease-nav),
              opacity var(--dur) var(--ease);
}
.masthead.is-compact .masthead__logo { width: var(--logo-w-compact); }
.masthead.is-compact .masthead__logo .logo { width: var(--logo-svg-w-compact); }

/* Ausblenden schnell und sofort, damit die zufahrende Kante nicht durch
   die Buchstaben schneidet. Einblenden verzoegert, damit die Schrift
   erst erscheint, wenn wieder Platz fuer sie da ist. */
.logo__wort {
  opacity: 1;
  transition: opacity 180ms var(--ease-nav) 140ms;
}
.masthead.is-compact .logo__wort {
  opacity: 0;
  transition: opacity 120ms var(--ease-nav) 0ms;
}

/* Hover ueber Deckkraft, nicht ueber einen zweiten Goldwert: das Logo
   wird kurz durchscheinender und nimmt damit einen Hauch Blau auf. Der
   Wert bleibt exakt TOEM-Gold. Bei 0.78 sind es noch 5.4:1. */
.masthead__logo:hover .logo,
.masthead__logo:focus-visible .logo { opacity: 0.78; }

/* Der globale Fokusring ist dunkelgold - auf blauem Grund zu schwach. */
.masthead :focus-visible { outline-color: var(--toem-gold); }

/* --------------------------------------------------------------------------
   Hauptnavigation
   Hover: die Flaeche reagiert, nicht nur die Schrift. Ein Pill mit weichem
   Cream-Grund plus feiner Goldlinie unten - das haelt die Marke und gibt
   dem Dropdown eine sichtbare Verankerung.
   Punkte mit Untermenue tragen einen Chevron und oeffnen per Hover UND
   per Tastatur (aria-expanded, siehe Script).
   -------------------------------------------------------------------------- */
.mainnav { margin-left: auto; }
.mainnav > ul {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.mainnav__item { position: relative; }
.mainnav__item[data-open="true"] { z-index: 70; }
/* Der Link ist in der Navbar vertikal zentriert, das Panel sitzt an der
   Header-Unterkante. Dazwischen liegt Header-Flaeche, die nicht zum
   Listenelement gehoert - dort riss der Hover ab. Dieses Pseudo schliesst die Luecke,
   unsichtbar und nur wenn offen, damit es keine Nachbarklicks abfaengt. */
.mainnav__item[data-dropdown]::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  /* Bleibt bei der vollen Strecke bis zur Kopfkante, obwohl das Panel sie
     jetzt um --nav-overlap verkuerzt. Zu hoch ist unschaedlich: der
     Ueberstand liegt hinter dem Panel. Zu niedrig waere es nicht - dann
     reisst der Hover auf dem Weg zum Panel ab. */
  height: var(--nav-drop);
  pointer-events: none;
}
.mainnav__item[data-dropdown][data-open="true"]::after { pointer-events: auto; }

.mainnav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  /* Eigener Wert statt --fs-300. Die Punkte stehen in Versalien, dort
     zaehlt die Versalhoehe. In V3 trug Ofelia bei 14px eine Versalhoehe von
     10,50px; Figtree braucht dafuer 15px (15 x 0,700 = 10,50). Damit sieht
     die Zeile genauso gross aus wie in der freigegebenen Fassung. */
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-on-dark);
  transition: color var(--dur) var(--ease);
}
/* Auf Blau kehrt sich die Logik um: der Ruhezustand ist weiss, der
   Hover geht in reines TOEM-Gold. Dort traegt es mit 7.4:1 - der
   abgedunkelte Textgoldton waere hier zu dunkel gegen den Grund. */
.mainnav__link:hover,
.mainnav__link:focus-visible,
.mainnav__item[data-open="true"] > .mainnav__link {
  color: var(--toem-gold);
}
/* Beide Werte gestalten. Der Elternpunkt eines Produktes traegt
   aria-current="true" (Vorfahr der aktuellen Seite), nur die Seite selbst
   traegt "page". Vorher stand hier allein "page" - dadurch war auf einer
   Produktseite kein Menuepunkt hervorgehoben. */
.mainnav__link[aria-current="page"],
.mainnav__link[aria-current="true"] { color: var(--toem-gold); }
/* Der Unterlink zur aktuellen Seite: Gold plus etwas mehr Gewicht, damit er
   sich im Panel auch ohne Farbunterscheidung abhebt. */
.mainnav__sub a[aria-current="page"] {
  color: var(--toem-gold);
  font-weight: 600;
}

/* Die Knoepfe der zweiten Ebene gibt es nur im Mobilmenue. Auf dem Desktop
   oeffnet der Hover das Panel; ein Aufklappknopf waere dort ein zweiter Weg
   zum selben Ziel und ein zusaetzlicher Tabstop. */
.mainnav__auf,
.mainnav__zurueck,
.navrecht { display: none; }

.mainnav__chev {
  width: var(--zeichen-mini); height: var(--zeichen-mini);
  /* Das Zeichen gibt nie nach (25.09.2026): im Engpass schrumpfte es vor
     der Schrift bis auf 0 px. */
  flex-shrink: 0;
  transition: transform var(--dur-nav) var(--ease-nav);
}
.mainnav__item[data-open="true"] .mainnav__chev { transform: rotate(180deg); }

/* --- Dropdown ----------------------------------------------------------- */
.mainnav__sub {
  position: absolute;
  /* Setzt oberhalb der Kopfkante an: --nav-drop bringt es genau auf die
     Kante, --nav-overlap zieht es wieder darauf. Das Panel liegt damit
     mit seiner Oberkante noch im Blau und wirkt als Karte darueber. */
  top: calc(100% + var(--nav-drop) - var(--nav-overlap));
  left: 0;
  z-index: 60;
  min-width: 13rem;
  padding: 0;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.mainnav__item[data-open="true"] > .mainnav__sub {
  opacity: 1;
  visibility: visible;
}
/* SICHERHEITSVENTIL, derzeit ungenutzt.
   Alle Panels stehen linksbuendig unter ihrem Menuepunkt. Frueher hing
   "Ueber uns" an der rechten Kante, weil sein Panel sonst aus dem Viewport
   lief. Das ist erledigt: Kontakt kam dahinter dazu und rueckt den Punkt
   nach links, und die Navigationslinks sind von 16 auf 14px geschrumpft.
   Nachgemessen von 1024 bis 1920px bleibt selbst im knappsten Fall
   ("Ueber uns" bei 1024px) noch 90px Luft zur rechten Kante.
   Die Regel bleibt stehen, weil sie ein Attribut im Markup genuegt, falls
   spaeter ein Punkt oder ein laengerer Eintrag dazukommt. Wer sie braucht,
   setzt data-align="right" auf das betreffende Listenelement. */
.mainnav__item[data-align="right"] > .mainnav__sub {
  left: auto;
  right: 0;
}

/* ==========================================================================
   MEGAMENUE PRODUKTE - das Panel mit Bildern
   Angelegt am 29.08.2026. Das alte einspaltige Panel liegt gesichert in
   header.css.vor-megamenue, das Markup in dropdown-alt.md.

   AN DER UNTERKANTE DER NAVBAR, nicht darueber. Das schmale Textpanel durfte
   ins Blau hineinragen und wirkte dadurch als Karte darueber; ein Panel mit
   fuenf Bildern, das dasselbe tut, sieht aus wie ein Fehler. Deshalb setzt
   --nav-overlap hier aus: top ist exakt 100% plus --nav-drop.

   ZWEI FALLEN, beide gemessen und beide hier geloest:

   1. SPEZIFITAET. Die Grundregel .mainnav__sub a setzt display: flex und
      schlaegt ein blosses .navprod - Klasse plus Element gewinnt gegen Klasse
      allein. Gemessen stand .navprod dadurch auf flex, die Bildhuelle auf
      0 x 0. Deshalb hier ueberall .mainnav__sub davor.

   2. BEZUGSRAHMEN. Das Panel richtet sich am KOPF aus, nicht am Menuepunkt.
      Die Kette ist li.mainnav__item (relative) -> ul -> nav -> div ->
      header.masthead (sticky, und sticky bildet einen Bezugsrahmen). Ohne
      position: static am Menuepunkt stand das Panel bei x 37 bis 1253 statt
      mittig, weil es am Punkt bei x 575 haengt.
   ========================================================================== */
.mainnav__item:has(> .mainnav__sub--breit) { position: static; }
.mainnav__sub--breit {
  /* top: 100% OHNE Zuschlag. Seit der Menuepunkt static ist, bezieht sich
     100% auf den KOPF - das ist exakt seine Unterkante, wie gewuenscht.
     --nav-drop und --nav-overlap gelten nur fuer die schmalen Panels, die am
     Menuepunkt haengen; hier addierten sie gemessen 27 px Luft. Aus demselben
     Grund braucht die kompakte Kopfhoehe keine eigene Regel: 100% folgt der
     Hoehe von selbst. */
  /* WEISSE FLAECHE UEBER DIE GANZE BREITE, Inhalt in der Containerbahn.
     Das Panel spannt also das Fenster, .navprod__inner traegt .wrap und
     begrenzt den Inhalt auf dieselbe Bahn wie der Seiteninhalt darunter. */
  top: 100%;
  left: 0;
  right: 0;
  translate: none;
  width: auto;
}
/* IM KOMPAKTEN KOPF greift sonst die aeltere Regel
   .masthead.is-compact .mainnav__sub - drei Klassen schlagen meine eine, und
   sie zieht das Panel um --nav-drop-compact minus --nav-overlap nach oben.
   Gemessen stand es dadurch 5 px ueber der Unterkante. Diese Regel ist
   gleichrangig und steht spaeter, also gewinnt sie. */
.masthead.is-compact .mainnav__sub--breit { top: 100%; }

/* GAR KEINE RUNDEN ECKEN. Oben schliesst das Panel buendig an die blaue
   Leiste an, eine Rundung dort risse eine Luecke ins Blau. Unten waren 8 px
   auf 1440 px Breite kaum zu erkennen - auf Kundenwunsch jetzt auch dort
   eckig. Gilt fuer beide breiten Panels, Produkte wie Unternehmen: sie
   tragen dieselbe Huelle. */
.mainnav__sub .navprod__panel {
  padding: var(--sp-6) 0;
  border-radius: 0;
}
.mainnav__sub .navprod__inner { width: 100%; }
.mainnav__sub .navprod__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-5);
  /* align-content: start - der Fehler, der in diesem Projekt viermal
     entstanden ist. */
  align-content: start;
}
.mainnav__sub a.navprod {
  display: grid;
  /* --sp-3 statt --sp-2: die Verwendungszeile steht ueber dem Bild und
     braucht dort mehr Luft als zwischen Bild und Name, sonst klebt sie an
     der Bildkante. Der groessere Abstand steht deshalb einzeln unten. */
  gap: var(--sp-2);
  align-content: start;
  /* Die geerbten Werte aus .mainnav__sub a ausdruecklich zuruecknehmen. */
  padding: 0;
  white-space: normal;
  border-radius: var(--r-card);
  text-decoration: none;
  transition: transform var(--dur-hover) var(--ease-hover);
}
.mainnav__sub a.navprod:hover,
.mainnav__sub a.navprod:focus-visible { transform: translateY(-2px); }
/* Mehr Luft nach oben, zur Verwendungszeile - auf Kundenwunsch. Nach
   unten bleibt der Rasterabstand, damit Bild und Name zusammengehoeren. */
/* PACKSHOTS SEIT DEM 03.09.2026. Bis dahin standen hier die
   Lifestyle-Aufnahmen, weil im Bestand genau ein freigestellter Packshot lag -
   als offener Beschaffungspunkt in der Screendesign-Mail vermerkt. Der Kunde
   hat die fuenf freigestellten Flaschen geliefert, damit ist der Punkt erledigt.

   Drei Anpassungen, dieselben wie bei der Kartenvariante:
   3:4 statt 4:3, weil die Packshots hochkant sind (1086x1448);
   contain statt cover, weil eine Flasche nicht beschnitten werden darf;
   weisser Grund statt --bg-soft, weil die Packshots auf Weiss freigestellt
   sind und keine Transparenz tragen - ein andersfarbiger Kasten ergaebe eine
   sichtbare Kante. */
.mainnav__sub .navprod__media {
  margin-top: var(--sp-2);
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--surface);
}
.mainnav__sub .navprod__media img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: var(--sp-3);
  box-sizing: border-box;
  display: block;
}
/* ZWEIZEILIG. Einzeilig waere "Bio Sonnenblumenkernöl heiß braten" in einer
   200-px-Spalte an beliebiger Stelle umgebrochen. So steht die Produktfamilie
   oben und die Sorte darunter - dieselbe Gliederung wie auf der Flasche. */
/* HIER steckte der Ueberhang im Mobilmenue. GEMESSEN bei 320 px: die Kachel
   ist 104 px breit, ihre Rasterspur aber 145 - und die Spur bemisst sich am
   laengsten Wort ihres breitesten Kindes. Das ist der Name:
   "Buttergeschmack" braucht 205 px, "Sonnenblumenkernöl" 182. Die
   Verwendungszeile darueber wurde nur auf die zu breite Spur gedehnt und sah
   deshalb wie die Ursache aus.
   Die Seite traegt lang="de", der Browser trennt also nach deutschen Regeln.
   min-width: 0 muss dazu: ein Rasterelement hat min-width: auto, also die
   Breite seines laengsten Wortes, und overflow-wrap allein senkt diesen Wert
   nicht. */
.mainnav__sub .navprod__name {
  display: grid;
  gap: 0.1em;
  font-size: var(--fs-200);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--toem-blau);
  hyphens: auto;
  overflow-wrap: break-word;
  min-width: 0;
}
.mainnav__sub .navprod__name span { font-weight: 400; color: var(--text-body); }
/* DIE GANZE SPALTE ZENTRIERT, Nachtrag vom 04.09.2026. Die Flasche stand
   schon mittig, die Anwendungszeile kam dazu - dann muessen Name und
   Sortenbezeichnung mit, sonst hat der Eintrag zwei Achsen.
   Am Element, nicht an jeder Zeile: eine Regel statt drei, und eine vierte
   Zeile im Theme erbt es von allein. */
.mainnav__sub .navprod { text-align: center; }

.mainnav__sub .navprod__use {
  font-size: var(--fs-100);
  letter-spacing: var(--ls-wide);
  /* ZWEI ZEILEN RESERVIERT. Die Anwendungszeile steht UEBER dem Packshot;
     bricht sie zweizeilig, schiebt sie Bild und Name des ganzen Eintrags nach
     unten, und die Reihe steht nicht mehr auf einer Linie.
     GEMESSEN bei 1440 px, nachdem die Kundentexte vom 04.09.2026 eingesetzt
     waren: "Backen, braten & verfeinern" braucht zwei Zeilen (35 statt 18 px),
     dadurch begann das Bild 17 px und der Name 18 px tiefer als bei den vier
     anderen. Bei 222 px Spaltenbreite passt der Text nicht in eine Zeile.
     Also den Platz fuer zwei Zeilen immer freihalten. Kostet bei den
     einzeiligen Eintraegen eine Zeile Luft und haelt dafuer die Reihe.
     lh IST DIE GENAUE EINHEIT (eine Zeilenhoehe); die em-Zeile darueber ist
     der Rueckfall fuer aeltere Browser und mit 2.7em auf denselben Wert
     gerechnet - gemessene Zeilenhoehe 17,55 px bei 13 px Schrift.
     KEIN subgrid, obwohl es hier naheliegt: die Zeilenabstaende kaemen dann
     aus dem Elternraster, und das setzt --sp-5 zwischen den Spalten. Innen
     stehen --sp-2. Man muesste row-gap und column-gap trennen, und auf
     Tablet, wo das Raster zwei Reihen hat, waere der Abstand zwischen den
     Reihen dann zu klein. */
  min-height: 2.7em;
  min-height: calc(2 * 1lh);
  text-transform: uppercase;
  /* Sortenfarbe als Inline-Custom-Property, wie bei den Produktkarten. */
  color: var(--sorte, var(--text-muted));
  /* ZENTRIERT, Wunsch vom 04.09.2026. Der Packshot darunter steht mittig in
     der Spalte, die Zeile stand links - dadurch sass sie sichtbar neben der
     Flasche statt ueber ihr.
     ERST NUR DIESE ZEILE, seit dem Nachtrag vom selben Tag die GANZE Spalte -
     siehe .navprod weiter unten. Meine Begruendung fuer "nur diese Zeile"
     war, zwei zentrierte Zeilen unter einer zentrierten Flasche waeren ein
     Plakat. Am Bildschirm gesehen stimmt das nicht: mit zentrierter Zeile
     oben, zentrierter Flasche in der Mitte und linksbuendigem Namen unten
     sah der Name aus wie vergessen, nicht wie gesetzt. */
  text-align: center;
  /* Vorsorglich, nicht ursaechlich: die Verwendungszeile bricht an ihren
     Leerzeichen (min-content 40 bis 73 px) und war NIE der Grund fuer den
     Ueberhang. Der steckt im Namen darunter, siehe .navprod__name. */
  overflow-wrap: break-word;
  min-width: 0;
}
/* DIE TRENNLINIE SITZT AM FUSS DER PRODUKTREIHE, nicht am Link darunter.
   Wunsch vom 04.09.2026: sie soll ueber die ganze Breite gehen.
   Vorher trug sie der Link selbst als border-top - und der ist inline-flex,
   also nur so breit wie sein Text. Die Linie endete damit mitten unter der
   ersten Spalte und sah aus wie ein Rest.
   AM RASTER STATT AM LINK, und ohne ein zusaetzliches Element: das Raster
   spannt ueber alle fuenf Spalten, seine Unterkante ist genau die Stelle, an
   der die Linie hingehoert. Ein vollbreiter Link waere die Alternative
   gewesen, haette aber eine 1300 px breite Trefferflaeche ergeben, von der
   nur die linken 220 px wie ein Link aussehen. */
.mainnav__sub .navprod__grid {
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.mainnav__sub a.navprod__alle {
  /* inline-flex mit gap statt inline-block: der Pfeil soll bei einem
     Umbruch an seiner Zeile bleiben. */
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  font-size: var(--fs-200);
  font-weight: 600;
  color: var(--toem-blau);
}
.mainnav__sub a.navprod__alle svg {
  flex: none;
  width: var(--zeichen-inline);
  height: var(--zeichen-inline);
  transition: translate var(--dur-hover) var(--ease-hover);
}
.mainnav__sub a.navprod__alle:hover,
.mainnav__sub a.navprod__alle:focus-visible { color: var(--toem-gold); }
.mainnav__sub a.navprod__alle:hover svg { translate: var(--sp-2) 0; }

/* AUF DEM DESKTOP GIBT ES DIE UEBERSICHTSZEILE NICHT. Dort fuehrt der
   Elternpunkt selbst auf /produkte/, /unternehmen/, /karriere/ - eine zweite
   Zeile mit demselben Ziel waere eine Dublette. Gebraucht wird sie erst im
   Vollbildmenue, wo die Zeile die Ebene oeffnet statt zu navigieren.
   .mainnav__sub a.mainnav__ueber, nicht .mainnav__ueber allein: .mainnav__sub a
   setzt oben display: flex und traegt (0,1,1). GEMESSEN stand die Zeile
   deshalb bei 1440 px mit display: flex im Produktpanel - zum zweiten Mal
   dieselbe Falle an derselben Klasse. */
.mainnav__sub a.mainnav__ueber { display: none; }

/* --- Menue Unternehmen: dieselbe Flaeche, ohne Bilder -------------------- */
/* VIER LINKS NEBENEINANDER, nicht untereinander. Untereinander waere die
   vollbreite Flaeche zu neunzig Prozent leer - das liest sich als Fehler.
   So fuellt der Inhalt die Bahn, und der Kopf klappt immer gleich auf. */
.mainnav__sub .navorg__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5);
  align-content: start;
}
/* KEINE TRENNLINIE. Sie sollte die vier Spalten fassen, teilte das Panel aber
   optisch in vier Kaesten - auf Kundenwunsch entfallen. Die Rueckmeldung
   kommt jetzt allein ueber die Schriftfarbe. */
.mainnav__sub a.navorg {
  display: grid;
  gap: var(--sp-1);
  align-content: start;
  /* Die geerbten Werte aus .mainnav__sub a zuruecknehmen. */
  padding: 0;
  white-space: normal;
  border-radius: 0;
  text-decoration: none;
}
.mainnav__sub a.navorg:hover .navorg__name,
.mainnav__sub a.navorg:focus-visible .navorg__name { color: var(--toem-gold); }
.mainnav__sub .navorg__name {
  font-size: var(--fs-400);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--toem-blau);
  transition: color var(--dur) var(--ease);
}
.mainnav__sub .navorg__text {
  font-size: var(--fs-200);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
@media (max-width: 68rem) {
  .mainnav__sub .navorg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tablet quer: drei Spalten statt fuenf. Darunter greift das Mobilmenue. */
@media (max-width: 68rem) {
  .mainnav__sub .navprod__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Handy: ZWEI Spalten. GEMESSEN waren die Kacheln dreispaltig 93 px breit bei
   414 px Fenster, 75 bei 360 und 61 bei 320 - ein Produktbild von 61 px mit
   zweizeiligem Namen und Verwendungszeile darueber ist keine Navigation mehr,
   sondern ein Muster. Zweispaltig sind es 148 / 128 / 112 px. */
@media (max-width: 30rem) {
  .mainnav__sub .navprod__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Helles Panel unter dem blauen Kopf. Vorher lag es im Markenblau und
   wirkte damit wie eine zweite Kopfleiste - zu schwer fuer ein Untermenue.
   Weiss ist ausserdem schon die Kartenfarbe der Seite, das Panel liest
   sich damit als dieselbe Art Flaeche und nicht als eigenes Bauteil.
   Die feine graue Haarlinie grenzt es dort ab, wo darunter ein hellerer
   Bildbereich liegt; der Schatten allein traegt das nicht zuverlaessig.
   Kompakt gesetzt: Innenabstand und Schriftgroesse eine Stufe kleiner als
   zuvor - das Produkte-Panel schrumpft damit von 348 auf rund 265px
   Breite und die Zeilen von 45 auf 33px. */
.mainnav__sub__panel {
  padding: var(--sp-3);
  background: var(--surface);
  border: none;
  border-radius: var(--r-card);
  /* Ohne Kante traegt der Schatten die Abgrenzung allein. Oben ist das
     unkritisch, dort liegt Weiss auf Blau. Unten und seitlich steht das
     Panel oft ueber dem hellen Herobild - deshalb wenig Streuung dicht
     am Rand fuer die Kante und ein weiter Wurf darunter fuer die Hoehe.
     Zusammen leichter als die blaue Schattenstufe, aber deutlich sichtbar. */
  box-shadow: 0 1px 3px rgba(29, 29, 27, 0.10),
              0 16px 36px rgba(29, 29, 27, 0.20);
}
.mainnav__sub a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: 0;
  font-size: var(--fs-200);
  line-height: 1.35;
  white-space: nowrap;
  color: var(--toem-blau);
  transition: color var(--dur) var(--ease);
}
/* Hover wechselt allein die Schriftfarbe: keine Flaeche, kein Balken,
   keine Kante. Auf Kundenwunsch in reinem TOEM-Gold. Gemessen sind das auf
   dem weissen Panel 1.9:1 - der Eintrag wird beim Hover damit schlechter
   lesbar als im Ruhezustand (14.4:1). */
.mainnav__sub a:hover,
.mainnav__sub a:focus-visible {
  color: var(--toem-gold);
}

/* Sortenpunkte und Bio-Zeichen im Produkte-Panel
   Das Panel ist wieder einspaltig - zweispaltig wurde es mit Ofelia 711px
   breit und damit breiter als die halbe Navigation.
   Der Punkt traegt die Sortenfarbe der Verpackungsdeckel. Er wiederholt
   keine Textaussage, sondern stellt die Wiedererkennung aus dem Regal her -
   deshalb aria-hidden, der Screenreader liest den Produktnamen und nichts
   sonst.
   -------------------------------------------------------------------- */

/* Das gruene Bio-Zeichen (.mainnav__badge) ist auf Kundenwunsch entfallen,
   zusammen mit dem gleichnamigen Stoerer auf den Produktkarten. Die
   Aussage geht dabei nicht verloren: beide Eintraege heissen bereits
   "Bio ...", und der Punkt links traegt weiter den gruenen Deckelton. */
/* AKTUELL UNGENUTZT. Die farbigen Sortenpunkte sind am 28.08.2026 aus der
   Navigation genommen worden. Grund: zwei der fuenf waren identisch gruen -
   beide Bio-Sorten -, eine Farbcodierung, die zwei verschiedene Produkte
   gleich einfaerbt, codiert nichts. Dazu stehen die Namen vollstaendig
   daneben, und der Punkt war aria-hidden, trug also auch fuer Screenreader
   nichts.
   Die Regeln bleiben stehen, falls der Kunde sie zurueckhaben will. Zum
   Wiederherstellen braucht es im Markup je Unterlink
   style="--sorte: var(--c-sorte-raps|braten|butter|bio)" und darin
   <span class="mainnav__dot" aria-hidden="true"></span>. */
.mainnav__dot {
  flex: 0 0 auto;
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--sorte, var(--toem-blau));
}

/* --------------------------------------------------------------------------
   Soziale Netze im Kopf
   Stehen rechts neben der Navigation. Umrissicons statt Flaechen, damit sie
   dieselbe Strichstaerke tragen wie die Pfeile und Chevrons der Seite und
   sich nicht als Fremdkoerper vordraengen.
   Gold auf Markenblau haelt 7.39 - hier traegt das Gold, anders als auf den
   hellen Bahnen.
   Trefferflaeche 44px, obwohl das Icon nur 22px misst: das Quadrat um das
   Icon herum ist Klickflaeche, nicht Bild.
   -------------------------------------------------------------------------- */
.social {
  display: flex;
  align-items: center;
  /* Kein Abstand zwischen den Icons: die Trefferquadrate sind 44px breit,
     das Icon darin nur 22px - es liegen also ohnehin 11px Luft zwischen den
     sichtbaren Marken. Gemessen fehlten bei 1024px sonst 4px und die
     Navigation brach in zwei Zeilen um. */
  gap: 0;
  margin-left: var(--sp-4);
}

/* SOZIALE NETZE NUR NOCH IM MOBILMENUE UND IN DER FUSSZEILE, 10.09.2026.
   Anlass ist der fuenfte Navipunkt (Karriere, Kundenkorrektur). Die Frage des
   Kunden war: "Hast du eine Idee wie wir die Social Icons rausbekommen, die
   aber trotzdem praesent bleiben!"

   GEMESSEN, DASS ES NICHT OPTIONAL IST. Mit dem fuenften Punkt scrollt die
   Seite waagerecht, und zwar zwischen 960 und 1060 px:
     1060 px  12 px Querscroll
     1024 px  46 px
      980 px  88 px
   Gegenprobe je Breite: den fuenften Punkt ausblenden -> 0. Die Icons
   ausblenden -> ebenfalls 0. Beides behebt es allein, der Kunde will den
   Punkt, also gehen die Icons.

   UND SIE BLEIBEN TROTZDEM PRAESENT, ohne einen einzigen Handgriff im Markup:
   die <ul class="social"> liegt INNERHALB von .masthead__panel. Unter 64rem
   ist dieses Panel das Vollbildmenue - dort sind alle drei Icons weiter
   sichtbar, gemessen. Und in der Fusszeile stehen sie auf jeder Seite ein
   zweites Mal, mit denselben drei Zielen (.footer__social__link).
   Deshalb greift die Regel nur oberhalb des Mobilmenues. Kein Markup
   geaendert, kein Ziel verloren.

   WARUM NICHT AB EINER SCHMALEREN BREITE EINBLENDEN: ein Element, das bei
   1200 px erscheint und bei 1100 px verschwindet, ist fuer den Kunden nicht
   verlaesslich - er sieht es auf seinem Schirm und der Besucher nicht. Ganz
   oder gar nicht ist die ehrlichere Regel.

   DIESE QUERY MUSS HINTER .social STEHEN. Sie stand zuerst davor und tat
   nichts: .social setzt display: flex, beide Selektoren haben dieselbe
   Spezifitaet (0,1,0), und eine Media Query erhoeht sie nicht - es gewinnt,
   was spaeter in der Datei steht. Gemessen blieb der Querscroll unveraendert
   bei 12/31/50/69/88 px. Genau der Fallstrick, der als Nummer 17 in
   theme-notizen.md steht, und ich bin am selben Tag zweimal hineingelaufen. */
@media (min-width: 64.0625rem) {
  .social { display: none; }
}

.social__link {
  display: grid;
  place-items: center;
  /* 36px statt 44px. Der Kopf ist eng: Logo, vier Menuepunkte und drei
     Icons brauchen bei 1024px gemessen 62px mehr, als zur Verfuegung steht.
     36px bleiben deutlich ueber den 24px, die WCAG 2.5.8 verlangt, und mit
     der Maus ist das reichlich. Auf Touch-Geraeten geht es zurueck auf
     44px, siehe den Block "Trefferflaechen auf Touch" weiter unten. */
  width: 2.25rem; height: 2.25rem;
  /* Weiss im Ruhezustand, Gold beim Hover - dieselbe Bewegung wie bei den
     Menuepunkten daneben. Vorher war es umgekehrt, dadurch sprachen Text
     und Icons im selben Kopf zwei verschiedene Sprachen.
     Gemessen auf Markenblau: Weiss 14.77, Gold 7.39. */
  color: var(--on-blau-1);
  transition: color var(--dur) var(--ease);
}
/* 24 statt 22px. Das Trefferquadrat bleibt bei 36px, es aendert sich nur
   das Icon darin - die Breite des Kopfes ist davon unberuehrt. */
.social__link svg { width: var(--zeichen-marke); height: var(--zeichen-marke); }
.social__link:hover,
.social__link:focus-visible { color: var(--toem-gold); }

.navtoggle { display: none; }

/* Auf dem Desktop ist der Container durchsichtig fuer das Layout:
   display: contents nimmt ihn aus dem Kastenbaum, .mainnav und .social
   bleiben die Flex-Kinder von .masthead__inner. Damit aendert der neue
   Container am freigegebenen Kopf nichts - unter 64rem wird derselbe
   Container zum Vollbildmenue. */
.masthead__panel { display: contents; }

/* --------------------------------------------------------------------------
   Burger und Vollbildmenue
   Der Knopf steht auch auf dem Desktop im Markup, ist dort aber ausgeblendet.
   Die drei Balken liegen als eigene Elemente vor, damit sie sich drehen
   koennen - ein SVG-Pfad laesst sich am d-Attribut nicht animieren.
   -------------------------------------------------------------------------- */
.navtoggle { display: none; }

/* UMSCHALTEN BEI 64rem (1024 px), nicht mehr bei 60rem. Thorsten am
   25.09.2026: "ab ca. 1012 px werden die Pfeile zum Dropdown kleiner und
   verschwinden fast". GEMESSEN: bis 1012 px 16 px breit, bei 1000 px 13, bei
   980 px 5, bei 961 px 0-2 - die fuenf Punkte passen dort nicht mehr neben
   das Logo, und das Zeichen gibt als erstes nach. Bei 1024 px bleiben 12 px
   Luft; das ist zu knapp fuer andere Schriftglaettung und Zoom, deshalb
   uebernimmt das Burger-Menue schon dort. Dieselbe Grenze steht in
   js/main.js (matchMedia) und in tokens.css. */
@media (max-width: 64rem) {
  :root {
    --h-nav: 5rem;
    --nav-drop: 1rem;
    /* Nur die Breiten setzen - die Hoehen leiten sich daraus ab. */
    --logo-w: 10.5rem;
    --logo-w-compact: 2.25rem;
  }

  /* --- Das Panel verlaesst den Fluss der Kopfzeile --------------------- */
  /* Damit enthaelt .masthead__inner nur noch Logo und Burger. Vorher standen
     dort zusaetzlich die sozialen Netze mit 132 px; zusammen mit dem Logo
     (168 px) sprengte das die 350 px Innenbreite und schob den Burger AUS DEM
     VIEWPORT: gemessen iPhone 13 um 24 px, Pixel 5 um 21 px, iPhone SE und
     Galaxy S9+ um 94 px. Der Knopf war dort nicht antippbar, das Menue also
     gar nicht zu oeffnen. Die sozialen Netze stehen jetzt im Panel. */
  .masthead__panel {
    /* Groesse der Social-Zeichen. Steht HIER und nicht an .social, weil auch
       .navrecht damit rechnet - Geschwister erben nicht voneinander.
       GROESSER auf Kundenwunsch, 15.09.2026: 32 px standen unter Zeilen mit
       22 px und einem 22-px-Pfeil zu leise da. --zeichen-kreis-xl sind 36 px.
       Das Trefferquadrat waechst mit: bei 44 px blieben um ein 36-px-Zeichen
       nur 4 px Luft, die Marken sassen dann Kante an Kante. 48 px lassen 6 px
       je Seite - dieselbe Luft wie vorher. */
    --sm-zeichen: var(--zeichen-kreis-xl);
    --sm-feld: 3rem;
    /* Zurueck auf einen echten Kasten - contents kann nicht positioniert
       werden. */
    display: flex;
    position: fixed;
    inset: 0;
    /* Innerhalb des Stapelkontexts von .masthead (z-index 50). Logo und
       Burger liegen mit z-index 2 darueber und bleiben sichtbar. */
    z-index: 1;
    flex-direction: column;
    /* flex-start, nicht center: bei 320 px Hoehe ist die Liste laenger als
       der Schirm, zentriert wuerde der Anfang abgeschnitten und waere durch
       Scrollen nicht erreichbar. */
    justify-content: flex-start;
    gap: var(--sp-6);
    padding: calc(var(--h-nav) + var(--sp-5)) var(--sp-5) var(--sp-6);
    background: var(--toem-blau);
    /* BEIDE Achsen deklarieren. Stuende nur overflow-y, rechnet der Browser
       overflow-x von visible auf auto hoch - dieselbe Falle wie beim
       Slider. */
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    /* Geschlossen nicht nur unsichtbar, sondern auch nicht fokussierbar:
       visibility nimmt die Links aus der Tabreihenfolge. display: none
       koennte das auch, liesse aber keinen Uebergang zu. */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-0.75rem);
    transition: opacity var(--dur-nav) var(--ease-nav),
                transform var(--dur-nav) var(--ease-nav),
                visibility var(--dur-nav);
  }
  .masthead[data-nav="offen"] .masthead__panel {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

  /* Logo und Burger ueber dem Panel: die Kopfzeile bleibt stehen, das Menue
     fuellt die Flaeche darunter. */
  .masthead__logo,
  .navtoggle { position: relative; z-index: 2; }

  /* DECKENDE BAHN HINTER LOGO UND SCHLIESSKNOPF, solange das Menue offen
     ist. Beide liegen mit z-index 2 ueber dem Panel (z-index 1), haben aber
     keinen eigenen Grund - der Panelinhalt scrollte deshalb SICHTBAR durch
     sie hindurch. Auf der Aufnahme lag "KALT, WARM & HEISS" mitten in der
     Wortmarke.

     Als ::before von .masthead__inner: Pseudoelemente stehen im Kastenbaum
     VOR ihren Geschwistern, bei gleichem z-index gewinnt also das spaetere
     Element. Die Bahn liegt damit ueber dem Panel und unter Logo und Knopf -
     genau dazwischen, ohne dass es eine Stufe zwischen 1 und 2 braucht.

     Volle Breite ueber 100vw statt inset: 0, weil .masthead__inner die
     Wrap-Innenabstaende traegt; sonst bliebe links und rechts ein Streifen,
     durch den der Inhalt weiter durchliefe.

     Die Hoehe kommt aus dem Kasten selbst (inset-block: 0), damit sie dem
     kompakten Zustand folgt - beim Scrollen schrumpft die Leiste von 80 auf
     68 px. */
  .masthead[data-nav="offen"] .masthead__inner { position: relative; }
  .masthead[data-nav="offen"] .masthead__inner::before {
    content: "";
    position: absolute;
    inset-block: 0;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    background: var(--toem-blau);
    z-index: 2;
  }

  /* --- Navigation im Panel -------------------------------------------- */
  .mainnav { margin-left: 0; }
  .mainnav > ul {
    display: block;
    margin: 0;
    padding: 0;
  }
  .mainnav__item { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
  .mainnav__item:first-child { border-top: 1px solid rgba(255, 255, 255, 0.14); }
  .mainnav__link {
    display: flex;
    padding: var(--sp-5) 0;
    /* GROESSER auf Kundenwunsch: 16 px waren fuer eine Vollbildnavigation zu
       klein, die Zeilen lasen sich wie eine Fussleiste. --fs-500 sind bei
       360 px 22 px. */
    font-size: var(--fs-500);
  }
  /* Der Chevron hat hier keine Aufgabe: die Untermenues stehen offen, es
     gibt nichts aufzuklappen. */
  .mainnav__chev { display: none; }
  /* Die Luecken-Pseudos des Desktop-Hovers weg, sonst legen sie sich als
     unsichtbare Flaechen ueber die Unterlinks. */
  .mainnav__item[data-dropdown]::after { content: none; }

  /* UNTERMENUES STEHEN IMMER OFFEN. Auf Touch gibt es kein Hover, und ein
     Tipp auf den Elternlink navigiert - gemessen waren im geschlossenen
     Zustand 0 von 5 Unterlinks sichtbar, die Produktseiten also aus dem
     Menue nicht erreichbar. Offen stehend ist beides moeglich: der
     Elternlink fuehrt auf die Uebersicht, die Unterlinks auf ihre Seiten. */
  /* --- ZWEITE EBENE ----------------------------------------------------
     Bis zum 30.08.2026 standen die Untermenues hier offen untereinander.
     Auf Kundenwunsch sind sie jetzt eine eigene Ebene, die von rechts
     hereinfaehrt; die erste Ebene faehrt gleichzeitig nach links hinaus.

     DER ELTERNLINK BLEIBT EIN LINK und fuehrt auf die Uebersichtsseite. Die
     Ebene oeffnet der Chevron-Knopf daneben. Ein <a>, das nicht navigiert,
     waere fuer Tastatur und Screenreader falsch ausgezeichnet.

     Die Hoehe der Bahn setzt js/main.js: das Untermenue liegt absolut und
     traegt deshalb nichts zur Hoehe bei. Ohne das waere die zweite Ebene auf
     die Hoehe der ersten beschnitten. */
  /* flex: none IST NOETIG. Das Panel ist ein Flexcontainer; ohne diese Zeile
     schrumpft es die Navigation unter die gesetzte Hoehe - GEMESSEN stand
     nav.style.height auf 886px, gerendert wurden 572, und die zweite Ebene
     war um 313 px abgeschnitten. */
  /* SENKRECHT MITTIG, auf Kundenwunsch. margin-block: auto statt
     justify-content: center am Panel: bei zu langem Inhalt zentriert center
     ueber die Kante hinaus und der Anfang waere nicht mehr erreichbar -
     genau davor warnt der Kommentar am Panel. Automatische Ränder verteilen
     nur den ÜBRIGEN Platz und werden bei Platzmangel zu 0. */
  /* overflow-x: clip SCHNEIDET DIE AUSFAHRENDE EBENE AB.
     GEMESSEN, 390 px Schirm: das Panel ist 390 breit, die Liste 342 - die
     24 px Wrap-Polsterung je Seite gehoeren nicht zur Liste. Die Liste
     faehrt um ihre EIGENE Breite nach links, steht damit aber immer noch
     24 px im Panel. Sichtbar blieben dadurch bis 300 ms nach dem Klick die
     Chevrons der ersten Ebene (gemessen x = -19..25) und die Trennlinien
     ihrer Zeilen. visibility raeumte das erst am Ende der Bewegung weg -
     also genau dann, wenn es nicht mehr stoerte.
     clip STATT hidden: hidden macht die Bahn zu einem Scrollcontainer und
     zwingt die zweite Achse mit; clip schneidet nur und laesst
     overflow-y: visible zu. Wichtig, weil das Panel senkrecht scrollt.
     Beschnitten wird an der Kante der Bahn - und die ist genau die Strecke,
     um die die Liste faehrt. Was hinausfaehrt, ist damit weg, nicht nur
     unsichtbar geschaltet.

     HOEHE MIT UEBERGANG. GEMESSEN sprang die Bahn beim Oeffnen der zweiten
     Ebene in 60 ms von 342 auf 1192 px, waehrend der Inhalt 420 ms lang
     hereinfuhr - das war der eigentliche Ruck. js/main.js schreibt die
     Hoehe jetzt immer in px (nie auto), sonst gibt es nichts zu
     interpolieren. Nur bei offenem Menue, damit das Aufklappen selbst
     nicht animiert wird. */
  .mainnav {
    position: relative;
    flex: none;
    margin-block: auto;
    overflow-x: clip;
  }
  .mainnav > ul {
    transition: transform var(--dur-ebene) var(--ease-ebene), visibility 0s 0s;
  }
  /* AUSBLENDEN, NICHT NUR VERSCHIEBEN. Die Liste faehrt um ihre EIGENE
     Breite nach links, nicht um die Panelbreite - der Wrap-Innenabstand
     bleibt also stehen. GEMESSEN lugten dadurch die Chevrons der ersten
     Ebene mit 24 px am linken Rand ins Bild. visibility raeumt sie weg und
     nimmt sie zugleich aus der Tabreihenfolge; die Verzoegerung laesst sie
     erst verschwinden, wenn sie ausgefahren sind. */
  .masthead__panel[data-ebene="2"] .mainnav > ul {
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--dur-ebene) var(--ease-ebene),
                visibility 0s var(--dur-ebene);
  }

  /* GESCHLOSSEN GAR NICHT GERENDERT. GEMESSEN: mit visibility: hidden zaehlt
     das Untermenue weiter zur Scrollhoehe des Panels - der Inhalt mass 989 px
     bei einem 900 px hohen Schirm, obwohl die erste Ebene nur 239 px braucht.
     Das Menue scrollte also, ohne dass es etwas zu scrollen gab.
     display: none loest das. Beim Schliessen setzt js/main.js zuerst
     data-ebene2="zu" - dann bleibt das Untermenue gerendert, faehrt sauber
     aus und verschwindet erst danach. Ohne diesen Zwischenschritt waere es
     beim Zurueck schlagartig weg. */
  .masthead[data-nav="offen"] .mainnav {
    transition: height var(--dur-ebene) var(--ease-ebene);
  }

  /* DIE TRENNLINIEN DER ERSTEN EBENE GEHEN MIT.
     Sie sitzen an .mainnav__item, also am Listenpunkt - und der traegt beim
     offenen Punkt das Untermenue in sich. Den Punkt ausblenden geht deshalb
     nicht, das naehme die zweite Ebene mit. Also nur die Linienfarbe.
     WARUM UEBERHAUPT: nach dem Beschneiden waren die Chevrons weg, aber die
     Linien blieben. GEMESSEN im linken Streifen (x 0..30) 180 ms nach dem
     Klick: 12 Pixel in rgb(46,67,89) - genau der Linienton auf Markenblau.
     Als Striche am Rand sahen sie aus wie Reste, nicht wie eine Bewegung.
     160 ms, nicht --dur-ebene: die Linien sollen verschwinden, WAEHREND die
     Ebene faehrt, nicht mit ihr zusammen ankommen. Auf dem Rueckweg sind
     sie damit auch schon wieder da, bevor die erste Ebene steht. */
  .mainnav__item {
    transition: border-color 160ms var(--ease);
  }
  .masthead__panel[data-ebene="2"] .mainnav__item {
    border-top-color: transparent;
    border-bottom-color: transparent;
  }

  .mainnav__sub { display: none; }
  .mainnav__item[data-ebene2] > .mainnav__sub { display: block; }

  .mainnav__sub,
  .mainnav__item[data-open="true"] > .mainnav__sub {
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    width: 100%;
    min-width: 0;
    z-index: auto;
    opacity: 1;
    /* DAUERHAFT UM EINE BREITE NACH RECHTS. Das Untermenue liegt IM <ul>
       und wird von dessen Verschiebung mitgenommen - das war beim ersten
       Anlauf der Fehler: mit translateX(0) im offenen Zustand landete es
       GEMESSEN bei x = -342 statt bei 24. Bleibt es dagegen immer bei
       +100%, faehrt es genau dann ins Bild, wenn die erste Ebene um
       -100% hinausfaehrt. Es bewegt sich also nichts relativ zur Bahn,
       und es gibt nur eine Bewegung statt zweier gegenlaeufiger. */
    transform: translateX(100%);
    visibility: hidden;
    /* VERZOEGERT AUSBLENDEN, sofort einblenden. Mit einer laufenden
       Ueberblendung schaltet visibility erst am ENDE um - GEMESSEN war der
       Zurueckknopf 100 ms nach dem Klick noch hidden und liess sich deshalb
       nicht fokussieren. Beim Schliessen ist die Verzoegerung dagegen
       erwuenscht, sonst verschwindet die Ebene, bevor sie ausgefahren ist. */
    transition: visibility 0s var(--dur-ebene);
  }
  .mainnav__item[data-ebene2="auf"] > .mainnav__sub {
    visibility: visible;
    transition: visibility 0s 0s;
  }

  /* Der Aufklappknopf sitzt rechts in der Zeile, der Link fuellt den Rest.
     44 px Tap-Target, wie alle Schaltflaechen im Projekt. */
  .mainnav__auf {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex: none;
    margin-left: auto;
    padding: 0;
    background: none;
    border: 0;
    color: var(--text-on-dark);
    cursor: pointer;
  }
  .mainnav__auf:hover,
  .mainnav__auf:focus-visible { color: var(--toem-gold); }
  /* DIE GANZE ZEILE REAGIERT, nicht nur der Teil unter dem Finger. Seit dem
     15.09.2026 oeffnen Link und Knopf dieselbe Ebene; die Rueckmeldung muss
     das zeigen, sonst sieht es beim Tippen auf das Wort weiter nach zwei
     Zielen aus. :active statt :hover - auf Touch gibt es kein Hover. */
  .mainnav__item[data-dropdown]:active > .mainnav__link,
  .mainnav__item[data-dropdown]:active > .mainnav__auf { color: var(--toem-gold); }
  /* GROESSER auf Kundenwunsch. --zeichen-inline misst 18 px und passt neben
     16-px-Text; die erste Ebene laeuft jetzt aber mit 22 px, daneben wirkte
     der Pfeil verloren. --zeichen-klein ist mit 22 px genau so gross wie die
     Zeile daneben. NICHT --zeichen-gross: das sind 44 px und damit die
     ganze Trefferflaeche. Das Quadrat bleibt bei 44. */
  .mainnav__auf__zeichen { width: var(--zeichen-klein); height: var(--zeichen-klein); }
  .mainnav__item[data-dropdown] { display: flex; align-items: center; flex-wrap: wrap; }
  .mainnav__item[data-dropdown] > .mainnav__link { flex: 1 1 auto; }
  .mainnav__item[data-dropdown] > .mainnav__sub { flex-basis: 100%; }

  /* Zurueckzeile der zweiten Ebene. Sie traegt den Namen der Ebene darueber -
     "Zurueck" allein sagt nicht, wohin. */
  .mainnav__zurueck {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    width: 100%;
    min-height: 2.75rem;
    margin-bottom: var(--sp-3);
    padding: var(--sp-2) 0;
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    font: inherit;
    font-size: var(--fs-200);
    font-weight: 600;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--text-on-dark);
    cursor: pointer;
  }
  .mainnav__zurueck:hover,
  .mainnav__zurueck:focus-visible { color: var(--toem-gold); }
  .mainnav__zurueck__zeichen { width: var(--zeichen-klein); height: var(--zeichen-klein); flex: none; }

  /* DIE ELTERNSEITE ALS ERSTE ZEILE DER EBENE.
     Sie ist der Ersatz fuer den Tipp auf das Wort in der ersten Ebene: dort
     oeffnet die Zeile jetzt die Ebene, hierher wandert das Ziel.
     Ganz oben und nicht unten, weil sie die Ebene ueberschreibt, die man
     gerade betreten hat - unten stuende sie hinter fuenf Produkten.
     GOLD, nicht weiss: sie ist die einzige Zeile der Ebene, die aus der
     Gliederung herausfuehrt statt tiefer hinein. Gold haelt auf Markenblau
     7,39:1. */
  /* .mainnav__sub a.mainnav__ueber, NICHT .mainnav__ueber allein. GEMESSEN
     stand die Zeile nach dem ersten Anlauf in rgba(255,255,255,0.82) und
     15 px statt Gold und 18 px: .mainnav__sub a traegt (0,1,1) und schlaegt
     eine einzelne Klasse. Derselbe Fall wie bei den Produktnamen weiter
     oben - im selben Block, zum zweiten Mal. */
  .mainnav__sub a.mainnav__ueber {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    width: 100%;
    min-height: 2.75rem;
    /* DEUTLICH ABGESETZT VOM ZURUECK-LINK, Kundenwunsch 15.09.2026. Vorher
       lagen GEMESSEN 12 px dazwischen - zwei volle Zeilen so dicht
       untereinander lasen sich als ein Block, obwohl sie
       gegenlaeufige Wege sind: eine Ebene zurueck und eine Seite vorwaerts.
       GEMESSEN UEBRIGENS NICHT ADDIERT: die beiden senkrechten Margen
       stossen aneinander und fallen zusammen, es gilt die groessere. Mit
       --sp-5 kamen deshalb 24 px heraus, nicht 36. Also gleich der Wert,
       der gelten soll: 32. */
    margin: var(--sp-6) 0 var(--sp-4);
    padding: var(--sp-2) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    font-size: var(--fs-400);
    font-weight: 600;
    color: var(--toem-gold);
  }
  .mainnav__sub a.mainnav__ueber:hover,
  .mainnav__sub a.mainnav__ueber:focus-visible { color: var(--text-on-dark); }
  .mainnav__ueber__zeichen {
    flex: none;
    width: var(--zeichen-klein);
    height: var(--zeichen-klein);
    transition: translate var(--dur-hover) var(--ease-hover);
  }
  .mainnav__sub a.mainnav__ueber:hover .mainnav__ueber__zeichen { translate: var(--sp-2) 0; }

  /* --- SCHRIFTGROESSEN DER ZWEITEN EBENE, Kundenwunsch 30.08.2026 --------
     Vorher lief die zweite Ebene mit 13 bis 18 px, waehrend die erste auf
     22 px angehoben wurde - der Sprung war zu gross.

     UNTERNEHMEN geht auf Listenniveau: der Name so gross wie ein Punkt der
     ersten Ebene, denn die zweite Ebene ERSETZT die erste, sie steht nicht
     darunter.

     PRODUKTE bleibt eine Stufe darunter. Die Kacheln sind bei 414 px nur
     151 px breit; mit 22 px waere "Sonnenblumenkernöl" nicht mehr
     unterzubringen. Gemessen wird das nach jeder Aenderung, siehe den
     Ueberhang-Kommentar bei .navprod__name. */
  .mainnav__sub a { font-size: var(--fs-300); }
  .mainnav__zurueck { font-size: var(--fs-400); }

  .mainnav__sub .navprod__use { font-size: var(--fs-200); }
  .mainnav__sub .navprod__name { font-size: var(--fs-400); }
  .mainnav__sub .navprod__name span { font-size: var(--fs-300); }

  /* DREI ZEILEN RESERVIERT, nicht zwei. Die Grundregel haelt zwei Zeilen frei
     (siehe dort), und bei 1440 px reicht das. Im Vollbildmenue stehen die
     Kacheln aber zweispaltig und sind schmal - GEMESSEN Zeilen je Eintrag:
       320 px  Kachel 104 px   3, 2, 4, 3, 2     Versatz 20 px
       360 px  Kachel 124 px   2, 2, 3, 2, 2     Versatz 21 px
       390 px  Kachel 139 px   2, 2, 3, 2, 2     Versatz 17 px
       414 px  Kachel 151 px   2, 2, 2, 2, 2     Versatz  0
     "Backen, braten & verfeinern" braucht also bis 414 px drei Zeilen und
     schiebt Flasche und Namen seines Eintrags nach unten, waehrend der
     Nachbar daneben oben steht. Mit drei reservierten Zeilen messen alle
     fuenf gleich und die Reihe steht wieder auf einer Linie - gemessen
     Versatz 0 bei 320, 340 und 360 px.
     BIS 37,5rem, nicht bis 26rem und nicht bis 60rem. Die Grenze ist
     gemessen, nicht gesetzt: das Raster wechselt bei rund 480 px von zwei
     auf drei Spalten, und dabei wird die Kachel WIEDER SCHMALER -
     184 px bei 480, dann 121 bei 500 und 140 bei 560. Genau dort kam der
     Versatz von 20 px zurueck, obwohl er bei 414 schon behoben war. Ab
     600 px traegt die Kachel 152 px und zwei Zeilen reichen wieder;
     gemessen bis 960 px ohne Versatz. */
  @media (max-width: 37.5rem) {
    .mainnav__sub .navprod__use { min-height: calc(3 * 1lh); }
  }

  /* UND UNTER 22,5rem EINE STUFE KLEINER. Bei 320 px ist die Kachel 104 px
     breit; "ALLROUNDER" misst bei 15 px rund 105 px und brach deshalb MITTEN
     IM WORT um - auf dem Schirm stand "NATIVER / ALLROUND / ER". Dasselbe bei
     "Backen, braten & verfeinern", dort mit vier Zeilen.
     Mit --fs-100 (13 px) passt jedes Wort in seine Zeile, gemessen 2, 2, 3,
     2, 2 statt 3, 2, 4, 3, 2. Die Namen darunter bleiben unveraendert - der
     Sprung zur ersten Ebene, den der Kunde am 30.08.2026 gemeldet hat,
     betraf sie, nicht diese Zeile. */
  @media (max-width: 22.5rem) {
    .mainnav__sub .navprod__use { font-size: var(--fs-100); }
  }

  .mainnav__sub .navorg__name { font-size: var(--fs-500); }
  .mainnav__sub .navorg__text { font-size: var(--fs-300); }

  /* UNTERNEHMEN UNTEREINANDER, auf Kundenwunsch. Zweispaltig waren die
     Karten bei 360 px 148 px breit; als Liste liest sich die zweite Ebene
     wie die erste. Die Produktkacheln bleiben zweispaltig - dort traegt das
     Bild die Information, nicht die Zeile. */
  .mainnav__sub .navorg__grid { grid-template-columns: minmax(0, 1fr); }
  .mainnav__sub a.navorg { padding-block: var(--sp-3); }

  /* Rechtliches am Fuss des Menues. Kleiner und ruhiger als die
     Hauptpunkte - es sind Pflichtseiten, keine Ziele. */
  .navrecht {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3) var(--sp-5);
    /* NAEHER AN DIE TRENNLINIE, auf Kundenwunsch. GEMESSEN lagen zwischen
       dem sichtbaren Zeichen und der Linie 62 px: 32 aus der Panel-Luecke,
       24 aus dieser Marge und dem Leerraum, den das Trefferquadrat unter
       dem Zeichen laesst - beide Groessen stehen als --sm-feld und
       --sm-zeichen am Panel, die Rechnung geht deshalb auch nach dem
       Vergroessern vom 15.09.2026 auf.
       Die Rechnung nennt den gewuenschten SICHTBAREN Abstand (--sp-4) und
       zieht ab, was ohnehin schon da ist. Aendert sich die Zeichengroesse,
       stimmt der Abstand weiter. */
    margin: calc(var(--sp-4) - (var(--sm-feld) - var(--sm-zeichen)) / 2 - var(--sp-6)) 0 0;
    padding: var(--sp-5) 0 0;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }
  .navrecht a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    font-size: var(--fs-200);
    text-decoration: none;
    color: rgba(255, 255, 255, 0.72);
    transition: color var(--dur-hover) var(--ease-hover);
  }
  .navrecht a:hover,
  .navrecht a:focus-visible { color: var(--toem-gold); }
  .mainnav__sub__panel {
    padding: 0 0 var(--sp-4) var(--sp-4);
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }
  .mainnav__sub a {
    padding: var(--sp-3) 0;
    /* Kein nowrap: "Bio Sonnenblumenkernoel heiss braten" braucht bei
       320 px zwei Zeilen, sonst laeuft es aus dem Panel. */
    white-space: normal;
    font-size: var(--fs-200);
    color: rgba(255, 255, 255, 0.82);
  }
  .mainnav__sub a:hover,
  .mainnav__sub a:focus-visible { color: var(--toem-gold); }

  /* DIE PANELS SIND FUER DIE WEISSE DESKTOPFLAECHE GEBAUT, hier liegen sie
     auf Blau. Ihre Textfarben muessen deshalb ausdruecklich umgestellt
     werden, denn .mainnav__sub .navprod__name (0,2,0) schlaegt die helle
     Grundfarbe von .mainnav__sub a (0,1,1).
     GEMESSEN vor dieser Regel: Produktname rgb(12,36,62) auf Grund
     rgb(12,36,62) - Kontrast 1,00:1, also buchstaeblich unsichtbar. Dasselbe
     galt fuer die Verwendungszeile ohne Sortenfarbe und fuer "Alle Oele im
     Ueberblick". Der Kommentar zu den Sortenpunkten weiter unten warnt vor
     genau diesem Fall; beim Mega-Panel ist es mir trotzdem passiert. */
  .mainnav__sub .navprod__name,
  .mainnav__sub .navorg__name { color: var(--text-on-dark); }
  .mainnav__sub .navprod__name span,
  .mainnav__sub .navorg__text { color: rgba(255, 255, 255, 0.72); }
  /* Die Sortenfarben halten auf Blau nicht - dieselbe Feststellung wie bei
     den Sortenpunkten. Neutral hell statt Sortenton. */
  .mainnav__sub .navprod__use { color: rgba(255, 255, 255, 0.68); }
  /* NUR NOCH EINMAL JE EBENE. "Alle Öle im Überblick" steht seit dem
     15.09.2026 als .mainnav__ueber ganz oben; unten waere es derselbe Link
     ein zweites Mal, nach fuenf Produktkacheln.
     Mit ihm faellt die Trennlinie des Rasters: sie trennte das Raster von
     genau dieser Zeile und stuende sonst als Strich unter der letzten
     Kachel. */
  .mainnav__sub a.navprod__alle { display: none; }
  .mainnav__sub .navprod__grid { padding-bottom: 0; border-bottom: 0; }
  .mainnav__sub a.navprod:hover .navprod__name,
  .mainnav__sub a.navprod:focus-visible .navprod__name { color: var(--toem-gold); }
  /* AKTUELL UNGENUTZT, siehe oben.
     Die Sortenpunkte tragen die Farbe der Verpackungsdeckel. Auf dem weissen
     Desktop-Panel funktioniert das, auf dem blauen Grund hier nicht:
     gemessen gegen rgb(12,36,62) haelt raps 1,00:1 - es IST das Panelblau -,
     braten 1,54:1 und bio 1,97:1. Nur butter traegt mit 4,85:1.
     Ein heller Ring rettet alle vier, ohne die Farbcodierung aufzugeben; er
     selbst haelt 5,64:1. box-shadow statt border, damit der Punkt seine
     0,5rem behaelt. */
  .mainnav__dot { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55); }

  /* --- Soziale Netze am Fuss des Panels ------------------------------- */
  /* LINKSBUENDIG MIT DEN UEBRIGEN LINKS, auf Kundenwunsch. Zwei Dinge
     standen dem im Weg:
     1. margin-left: var(--sp-4) aus der Grundregel - dort schiebt es die
        Icons von der Navigation weg, hier stehen sie darunter. GEMESSEN
        begann die Liste bei 40 px, die Menuepunkte bei 24.
     2. Das Trefferquadrat ist 44 px breit, das Zeichen darin nur 24. Auch
        buendig gesetzt saesse das SICHTBARE Zeichen 10 px weiter rechts als
        der Text. Der negative Rand gleicht genau diese Haelfte aus, damit
        nicht der Kasten, sondern das Zeichen an der Textkante steht. */
  .social {
    /* EIN WERT FUER ALLES DREI: Zeichengroesse, Buendigkeits-Ausgleich und
       der Abstand zur Trennlinie haengen zusammen. Alle drei rechnen mit
       --sm-zeichen, das am Panel steht - sonst laufen sie beim naechsten
       Groessenwechsel auseinander. Der negative Rand ist immer die Haelfte
       dessen, was das Trefferquadrat groesser ist als das Zeichen darin. */
    margin-top: auto;
    margin-left: calc((var(--sm-feld) - var(--sm-zeichen)) / -2);
    padding-top: var(--sp-5);
  }
  .social__link svg { width: var(--sm-zeichen); height: var(--sm-zeichen); }
  /* 44 px UNABHAENGIG von (hover: none). feinschliff.css hebt die Icons dort
     schon auf 44, aber nur auf Touch-Geraeten. Das Mobilmenue gibt es auch
     auf einem schmal gezogenen Desktopfenster und auf Laptops mit Touch UND
     Maus - dort blieben GEMESSEN 36 px stehen. Im Menue ist der Platz da,
     also gilt hier immer 44. */
  .social__link { width: var(--sm-feld); height: var(--sm-feld); }

  /* --- Burger ---------------------------------------------------------- */
  .navtoggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    /* Kein Rand, Kundenwunsch vom 27.08.2026. Die Trefferflaeche bleibt bei
       2,75rem - das sind 44 px und damit die Schwelle aus WCAG 2.5.5. */
    width: 2.75rem;
    height: 2.75rem;
    border: none;
    border-radius: 0;
    background: none;
    color: var(--text-on-dark);
    /* Der Knopf liegt an der rechten Aussenkante. Ohne das negative Polster
       stehen die Balken weiter innen als die Logokante links. */
    margin-right: -0.375rem;
    cursor: pointer;
  }
  .navtoggle__icon {
    position: relative;
    display: block;
    width: 1.375rem;
    height: 1rem;
  }
  .navtoggle__icon i {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition: transform var(--dur-nav) var(--ease-nav),
                opacity var(--dur-nav) var(--ease-nav);
  }
  .navtoggle__icon i:nth-child(1) { top: 0; }
  .navtoggle__icon i:nth-child(2) { top: calc(50% - 1px); }
  .navtoggle__icon i:nth-child(3) { bottom: 0; }

  /* Zum Kreuz: erst schieben die aeusseren Balken in die Mitte, dann drehen
     sie. Zwei Schritte in einer Transformkette, deshalb die Reihenfolge
     translate vor rotate. Der mittlere Balken blendet aus, ohne ihn stuenden
     drei Striche im Kreuz. */
  .masthead[data-nav="offen"] .navtoggle__icon i:nth-child(1) {
    transform: translateY(calc(0.5rem - 1px)) rotate(45deg);
  }
  .masthead[data-nav="offen"] .navtoggle__icon i:nth-child(2) {
    opacity: 0;
    transform: scaleX(0.4);
  }
  .masthead[data-nav="offen"] .navtoggle__icon i:nth-child(3) {
    transform: translateY(calc(-0.5rem + 1px)) rotate(-45deg);
  }

  /* Wer Bewegung abbestellt hat, bekommt das Kreuz ohne Weg dorthin. Das
     Ergebnis bleibt dasselbe, nur die Strecke faellt weg. */
  @media (prefers-reduced-motion: reduce) {
    .masthead__panel,
    .navtoggle__icon i { transition: none; }
  }
}

/* SCROLLSPERRE ENTFERNT am 30.08.2026, und zwar ersatzlos.
   Sie stand als .nav-offen { overflow: hidden } am <html> und hat einen
   Fehler verursacht, der nur bei gescrollter Seite auftrat: overflow: hidden
   am Wurzelelement nimmt der klebenden Kopfleiste ihren Scrollbezug. Die
   Leiste rutschte damit auf ihre Dokumentposition zurueck - GEMESSEN bei
   414 px und Scrollstand 888 auf y = -476. Schliessknopf und Logo standen
   also ausserhalb des Bildes, und das Menue liess sich nicht mehr schliessen.

   Die Sperre wird nicht gebraucht: das Panel ist position: fixed ueber dem
   ganzen Sichtfeld und traegt overscroll-behavior: contain. GEMESSEN mit
   echten Radereignissen ueber dem Panel, in beiden Faellen blieb die Seite
   dahinter stehen:
     Panelinhalt laenger als der Schirm  (1536 in 800)   Seite 488 -> 488
     Panelinhalt kuerzer als der Schirm  (1700 in 1700)  Seite 0 -> 0
   Ein programmatisches window.scrollBy kommt weiterhin durch - das ist kein
   Nutzereingriff und war auch mit der Sperre so.

   NICHT GEPRUEFT: aeltere iOS-Versionen ohne overscroll-behavior. Sollte dort
   die Seite mitscrollen, ist die Loesung NICHT die alte Sperre, sondern eine
   fixierte Kopfleiste waehrend das Menue offen ist. */

/* KURZE SCHIRME. GEMESSEN bei 360x640 mit der neuen Schriftgroesse: das
   Menue brauchte 695 px und scrollte um 55. Statt ueberall die Tap-Targets
   zu verkleinern, wird nur hier enger gesetzt - die 44 px Mindesthoehe der
   Links bleiben, nur die Luft dazwischen geht weg. Ab 42rem Hoehe (672 px)
   greift wieder die normale Staffelung.

   DIESE QUERY STEHT AM DATEIENDE, nicht im Mobilblock. Beim ersten Versuch
   hatte ich sie mittendrin eingefuegt und dafuer den Mobilblock vorzeitig
   geschlossen - alles danach, bis hin zu den Regeln fuer den Menueknopf,
   landete dadurch in der Kurzschirm-Query. Bei 414x800 war der Knopf
   daraufhin unsichtbar. */
@media (max-width: 64rem) and (max-height: 42rem) {
  .masthead__panel {
    padding-block: calc(var(--h-nav) + var(--sp-3)) var(--sp-4);
    gap: var(--sp-4);
  }
  .mainnav__link { padding-block: var(--sp-3); font-size: var(--fs-400); }
  /* Die zweite Ebene muss mitgehen. Ohne diese Zeile stuende der Name auf
     Level 2 mit 22 px GROESSER da als der Menuepunkt auf Level 1, der hier
     auf 18 px gesetzt ist - die Hierarchie waere umgedreht. */
  .mainnav__sub .navorg__name { font-size: var(--fs-400); }
  .mainnav__zurueck { font-size: var(--fs-300); }
  /* Dieselbe Rechnung wie oben, nur mit den engeren Werten dieser Query:
     die Panel-Luecke ist hier --sp-4 statt --sp-6, der gewuenschte sichtbare
     Abstand --sp-3. Ohne die Rechnung stuende hier wieder der rohe Wert und
     der Abstand waere GEMESSEN 34 statt 12 px. */
  .navrecht {
    margin-top: calc(var(--sp-3) - (var(--sm-feld) - var(--sm-zeichen)) / 2 - var(--sp-4));
    padding-top: var(--sp-3);
  }
}