/* Eigene Korrekturen nach dem Theme-CSS (nutriform.min.css bleibt unangetastet).

   Kopfbereich auf dem Desktop (todos A28, gemessen 21.09.2026 im Chrome):
   Seit die Desktop-Regeln greifen (992px statt 99200px, PR 5), lief das Theme
   erstmals mit ausgeklapptem Menü. Dabei kam der endgültige Zustand erst vom
   Theme-Skript: data-menu-padding="14" am #header wird per JavaScript gesetzt,
   das CSS gibt den Menülinks 39px mit transition: padding .4s. Erstes Bild:
   #header-wrap fest positioniert und 580px hoch, der Platzhalter #header 1px,
   der Seitenanfang samt Kapitelzeile lag verdeckt darunter; nach dem Laden der
   Skripte schrumpfte das Menü animiert auf 330px und der Inhalt rutschte nach.

   Deshalb steht der Endzustand hier im CSS, und der Kopfbereich läuft auf dem
   Desktop im Seitenfluss mit (Entscheidung User 21.09.: mitscrollen, fünf
   Menüzeilen fest oben kosten den halben Bildschirm). Dann braucht es keinen
   per Skript gemessenen Platzhalter und nichts kann verdeckt sein. Unter 992px
   bleibt alles beim Theme: Hamburger, fester Kopf. */
@media (min-width: 992px) {
  #header-wrap,
  .sticky-header #header-wrap {
    position: relative !important;
    height: auto !important;
    box-shadow: none !important;
  }
  /* Das Skript setzt die gemessene Höhe inline; im Seitenfluss gilt die natürliche. */
  #header { height: auto !important; }
  /* Platzhalter, den das Skript hinter #header-wrap einfügt und auf dessen Höhe
     setzt, damit ein fester Kopf keinen Sprung erzeugt. Im Seitenfluss zählte er
     doppelt: gemessen 331, dann 392, dann 661px. */
  .header-wrap-clone { display: none !important; }
  /* Menüzeilen 26px hoch (User 24.09.2026: erst 18px wie im Browser
     eingestellt, dann etwas mehr Luft), dazu etwas Luft bis zum Strich unter dem Kopf. Der Strich ist
     der untere Rand von #header und folgt der Höhe von selbst, seit die
     Skript-Höhen aus sind. */
  #header .menu-link {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 26px;
    -webkit-transition: none;
    transition: none;
  }
  #header .primary-menu { padding-bottom: 8px; }
  /* Schrägstrich als Trenner zwischen den Menüpunkten (User 24.09.2026); der
     letzte einer Zeile trägt ihn wie in den Linkzeilen des Kunden, der letzte
     insgesamt nicht. */
  #header .menu-container > .menu-item { position: relative; }
  #header .menu-container > .menu-item:not(:last-child)::after {
    content: "/";
    position: absolute;
    right: -4px;
    top: 0;
    line-height: 26px;
    font-size: 13px;
    font-weight: 400;
    color: #999;
  }

}

/* Leiste «Bestellanfrage» unten: der Text aus den Einstellungen kommt aus dem
   Editor in einem Absatz, und Absätze haben im Theme 30px Abstand nach unten.
   Damit war die Leiste doppelt so hoch (59 statt 29px, gemessen 24.09.2026).
   Auf der alten Seite lag der Link ohne Absatz in der Leiste. */
.myfooter p { margin: 0; }

/* Sprungmarken im Seiteninhalt: der Kunde setzt <p id="Name">&nbsp;</p> als
   Anker im Editor. Der nbsp-Inhalt erzeugt Zeilenhöhe und Absatzabstand; mit
   diesen Regeln bleibt der Anker erreichbar, frisst aber keinen Platz.
   Nur p[id] ohne Klasse, damit Theme-Elemente nicht betroffen sind. */
p[id]:not([class]) {
  font-size: 0;
  line-height: 0;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* Kapitelnavigation: Masse der h4 aus dem Theme (2.1rem, 400, Saira), damit
   die Zeile aussieht wie die frueher von Hand gesetzte h4. Die H1 laeuft im
   Text mit. Farben je Farbwelt kommen aus /css/farbwelten.css.
   Hier statt in Grid.astro, damit auch die Suchseite sie bekommt (15.10.2026). */
.chapter-nav { display: block; font-family: "Saira", sans-serif; font-size: 2.1rem; font-weight: 400; line-height: 1.5; margin: 0 0 30px; text-align: center; }
.chapter-nav h1 { display: inline; font: inherit; margin: 0; }
@media (max-width: 767.98px) { .chapter-nav { font-size: 1.5rem; } }

/* Punktlinien (Impressum, Produktdaten): das Theme legt dot.png mittig in die
   Zeile. Gemessen 15.10.2026 (alte und neue Seite gleich): Zeile 24px,
   Grundlinie 17px unter der Oberkante, Punkt 5px, also Mitte der Punkte 5px
   ueber der Grundlinie. Der Kunde will die Punkte auf der Grundlinie wie den
   Satzpunkt: Unterkante der Punkte 4.5px ueber der Zeilenunterkante. */
ul.ul-with-filler > li { background-position: left 0 bottom 4.5px; }

/* Bildblock mit Verweis (A35): Link um das Bild, kein Hover-Effekt, keine
   Linkfarbe oder Unterstreichung am Bild. */
a.image-link { display: inline-block; text-decoration: none; border: 0; }
a.image-link img { transition: none; opacity: 1; }
a.image-link:hover img { opacity: 1; transform: none; }

/* Handybreite: das Theme nimmt dem .container unter 768px das Polster, die
   Bootstrap-Zeilen (.row, Rand -15px) ragen dann 15px über beide Seiten.
   Gemessen 16.10.2026 bei 360px: Seite 376px breit, Querscrollen auf jeder
   Seite; Täter sind die Container ausserhalb von #content (Adresszeile,
   Fusszeile) und die Zeile in .myfooter ohne Container. Innerhalb von
   #content fängt .content-wrap (overflow hidden) das ab. */
@media (max-width: 767.98px) {
  #wrapper > .container, #footer > .container { padding-left: 15px; padding-right: 15px; }
  .myfooter > .row { margin-left: 0; margin-right: 0; }
}

/* Produktseite: eine Zeile Luft unter dem blauen Produktkopf, immer, auch vor
   dem Bestellknopf. Theme setzt dort überall margin-bottom 0, und die Zeile
   mit dem Herobild beginnt ohne Abstand, darum klebte es (Kunde 19.10.2026,
   todos A51). 1.5rem entspricht einer Zeile der 1.2rem-Schrift. */
.productHeader { margin-bottom: 1.5rem; }