/* Erzeugt von scripts/naehrstoffseiten-bauen.mjs — nicht von Hand ändern.
   Jede Farbe stammt aus src/styles/tokens.css.

   Die Systemschrift statt der Webschriften der Anwendung: Diese Seiten
   stehen für sich und sollen ohne das Bündel dastehen. Wer über eine Suche
   hereinkommt, wartet sonst auf ein Megabyte, um einen Text zu lesen. */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: #f4f6f9;
  color: #0b1220;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.6;
}
article { margin: 0; }
/* **Die Mitte ist ein Element und keine Auswahl von Kindern.** Bis zum
   26.08.2026 stand hier ".kopfband > *", und zwei Kinder haben dagegen
   angewonnen: ".pfad" mit derselben Spezifität weiter unten und "ul.zahlen"
   mit einer höheren. Beide taten es über eine Kurzschreibweise — "margin:
   22px 0 0" setzt links und rechts auf 0 und löscht das "auto" gleich mit.
   Sichtbar wurde es erst am Ergebnis: drei Fluchtlinien in einem Kopf. Jetzt
   zentriert **ein** Element, und kein Kind kann mehr dagegen an. */
.mitte, .rumpf, footer, .stand { max-width: 62rem; margin-left: auto; margin-right: auto; }
nav { font-size: 0.92rem; }
nav a, footer a { color: #3b37e0; }

/* ——————————————————————————————————————————————— Das Kopfband

   **Die Markenfarbe statt des grünen Verlaufs**, entschieden am 25.08.2026.
   Der Verlauf war laut tokens.css „die einzige Stelle, an der Farbe schmückt
   statt zu bedeuten" — und stand damit neben einem Kranz, in dem Grün „im
   Ziel" heißt. Blau bedeutet „Mikrolot" und sonst nichts. */
.kopf {
        display: flex; align-items: center; justify-content: space-between; gap: 14px;
        padding: 16px 20px; background: #3b37e0; color: #fff;
      }
      .marke { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 18px;
        color: #fff; text-decoration: none;
        font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
      .marke svg { width: 26px; height: 26px; display: block; }
      .kopf nav { display: flex; gap: 18px; font-size: 14px; margin: 0; }
      .kopf a { color: rgba(255, 255, 255, 0.9); text-decoration: none; }
      .kopf a:hover { color: #fff; }
      /* Der eine Eintrag, der kein Link ist — blasser, denn er führt
         nirgendwohin. */
      .kopf nav span { color: rgba(255, 255, 255, 0.62); }
      @media (min-width: 900px) {
        .kopf { padding: 20px 44px; }
      }

/* **Die Trennlinie sitzt am Kopfband und nicht am Balken** — Punkt 46,
   27.08.2026, Ansage des Betreibers: derselbe Kopfbalken wie überall.

   Genau das war der Einwand, der den Punkt aufgemacht hat: Der Balken trägt
   die Markenfarbe, und das Kopfband trägt seit dem 25.08.2026 dasselbe Blau. Zwei
   gleiche Flächen übereinander verschmelzen zu einem Block, in dem niemand
   mehr sieht, wo die Seite anfängt.

   **Gelöst, ohne den Balken anzufassen.** Die Linie gehört der Seite, die
   anfängt, und nicht der Leiste, die überall gleich aussehen soll — eine
   Linie am Balken wäre eine zweite Erscheinung desselben Bauteils, und die
   vergessene wäre irgendwann die ärmere. Dieselbe Regel wie bei den zwei
   Auszeichnungen des Registers.

   **0,34 und nicht 0,18, und die Zahl ist gerechnet und nicht gewählt.** Der
   erste Anlauf nahm 0,18; auf dem Blau ergibt das rgb(94, 91, 230) und einen
   Kontrast von **1,47 : 1** — eine Linie, die man sucht statt sieht. 0,34
   ergibt rgb(126, 123, 235) und **2,11 : 1**: immer noch ein Haarstrich, aber
   einer, der die Kante zeigt. **Weiss mit Anteil ist dabei kein erfundener
   Wert** — dieselbe Familie wie der Anriss (0,84), die Brotkrume (0,72) und
   die Links im Balken (0,9). */
.kopfband {
  background: #3b37e0;
  color: #ffffff;
  padding: 30px 22px 34px;
  border-top: 1px solid rgba(255, 255, 255, 0.34);
}
.kopfband h1 { color: #ffffff; }
.kopfband .anriss { color: rgba(255, 255, 255, 0.84); }
.pfad { color: rgba(255, 255, 255, 0.72); margin: 0 0 6px; }
.pfad a { color: rgba(255, 255, 255, 0.86); }
.pfad span::before { content: " · "; }

/* Die Zahlenkarten. **Am Telefon untereinander, nicht nebeneinander** — der
   Bezug („Einzelpräparate, Männer, über Jahre") ist länger als die Zahl, und
   er darf nicht wegfallen, nur weil der Bildschirm schmal ist. */
ul.zahlen {
  display: grid;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
ul.zahlen li {
  margin: 0;
  padding: 13px 15px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
ul.zahlen .titel {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
ul.zahlen li.marke .titel::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: #e02f45;
}
ul.zahlen strong { display: block; margin-top: 5px; font-size: 1.5rem; line-height: 1.15; }
ul.zahlen .dazu { display: block; margin-top: 5px; color: rgba(255, 255, 255, 0.72); font-size: 0.86rem; }

/* ——————————————————————————————————————————————— Das Register

   **Eine Auszeichnung, zwei Erscheinungen:** am Telefon ein Streifen über
   dem Text, am Schreibtisch eine Spalte daneben. Zwei getrennte
   Auszeichnungen wären zwei Texte, und einer von beiden wäre irgendwann der
   ärmere — genau so ist am 25.08.2026 in einem handgezeichneten Entwurf der
   Zusatz „Einzelpräparate über Jahre" aus der mobilen Fassung gefallen. */
.rumpf { padding: 0 22px; }
.register {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 -22px 20px;
  padding: 10px 22px;
  background: #ffffff;
  border-bottom: 1px solid #e3e8ef;
}
.register .titel { display: none; }
.register ul { display: flex; gap: 7px; overflow-x: auto; margin: 0; padding: 0; list-style: none; }
.register li { margin: 0; }
.register a {
  display: block;
  white-space: nowrap;
  padding: 5px 11px;
  border: 1px solid #e3e8ef;
  border-radius: 999px;
  background: #f4f6f9;
  color: #48546a;
  font-size: 0.84rem;
  text-decoration: none;
}

/* ——————————————————————————————————————————————— Das Band am Fuß */
.band {
  margin-top: 44px;
  padding: 38px 22px;
  background: #3b37e0;
  color: #ffffff;
  text-align: center;
}
.band h2 { margin: 0; color: #ffffff; font-size: 1.4rem; }
.band p { color: rgba(255, 255, 255, 0.84); max-width: 46rem; margin-left: auto; margin-right: auto; }
.knopf {
  display: inline-block;
  margin-top: 18px;
  padding: 13px 26px;
  border-radius: 14px;
  background: #ffffff;
  color: #31357a;
  font-weight: 600;
  text-decoration: none;
}
h1 { margin: 6px 0 0; font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.6rem); letter-spacing: -0.02em; }
h2 { margin: 44px 0 12px; font-size: 1.22rem; letter-spacing: -0.01em; }
h3 { margin: 26px 0 10px; font-size: 1rem; color: #48546a; }
p { margin: 12px 0 0; }
.kategorie { margin: 0; color: #8a94a6; font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.08em; }
.anriss { color: #48546a; font-size: 1.06rem; }
.kennzahl { font-size: 1.24rem; }
.kennzahl strong { color: #31357a; }
.klein { color: #8a94a6; font-size: 0.86rem; }
.dazu { color: #8a94a6; }
ul, ol { margin: 12px 0 0; padding-left: 1.2rem; }
li { margin-top: 10px; }
ul.wirkung, ul.marken, ul.traeger, ul.regeln, ul.uebersicht { list-style: none; padding-left: 0; }
ul.wirkung > li, ul.marken > li, ul.traeger > li, ul.regeln > li {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid #d8dcfb;
  border-radius: 12px;
  background: #ffffff;
}
ul.wirkung p { margin: 0; }
ul.wirkung p + p { margin-top: 8px; }
.etiketten { display: flex; flex-wrap: wrap; gap: 8px; }
.richtung, .evidenz, .marke {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.richtung, .marke { background: #eef0fe; color: #31357a; }
.evidenz { background: #f4f6f9; color: #48546a; border: 1px solid #d8dcfb; }
a.beleg {
  white-space: nowrap;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #eef0fe;
  color: #31357a;
  font-size: 0.76rem;
  text-decoration: none;
}
span.beleg { margin-left: 6px; color: #8a94a6; font-size: 0.76rem; }
a.beleg:hover { background: #d8dcfb; }
/* ——————————————————————————————————————————————— Das Register der Übersicht

   Kürzel als Chip, Name, und bei sieben das Etikett „Grenze". Die Zahl der
   Belege stand hier bis zum 25.08.2026 und ist heraus: Sie sagt etwas über
   die Recherche und nichts über den Nährstoff. */
.rumpf--liste h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 26px 0 4px;
  padding: 11px 14px;
  border-radius: 14px;
  background: #eef0fe;
  border: 1px solid #d8dcfb;
  color: #31357a;
}
.rumpf--liste h2 .dazu { margin-left: auto; color: #31357a; opacity: 0.7; font-size: 0.8rem; }
ul.uebersicht { display: grid; gap: 0; }
ul.uebersicht li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 9px 4px;
  border-bottom: 1px solid #eef1f6;
}
ul.uebersicht a { font-weight: 500; color: #0b1220; text-decoration: none; }
ul.uebersicht a:hover { color: #3b37e0; text-decoration: underline; }
.kuerzel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 38px;
  height: 26px;
  padding: 0 6px;
  border-radius: 8px;
  background: #eef0fe;
  color: #31357a;
  font-size: 0.72rem;
  font-weight: 600;
}
.grenzmarke {
  padding: 1px 6px;
  border-radius: 5px;
  background: #fbe3e6;
  color: #e02f45;
  font-size: 0.7rem;
  font-weight: 600;
}
ol.quellen li { color: #48546a; font-size: 0.94rem; }
footer {
  margin-top: 44px;
  padding: 24px 22px 0;
  border-top: 1px solid #d8dcfb;
  color: #48546a;
}
.stand { padding: 0 22px 40px; }

/* ——————————————————————————————————————————————— Ab hier der Schreibtisch

   Das Register wandert von oben nach links. **Der Text ändert sich dabei
   nicht** — er steht einmal in der Datei, und nur seine Anordnung ist eine
   andere. */
@media (min-width: 900px) {
  .kopfband { padding: 46px 22px 50px; }
  ul.zahlen { grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 48rem; }
  .rumpf { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 3rem; align-items: start; padding-top: 8px; }
  .rumpf--liste { display: block; }
  .register {
    position: sticky;
    top: 24px;
    margin: 34px 0 0;
    padding: 0;
    background: none;
    border-bottom: 0;
  }
  .register .titel {
    display: block;
    margin: 0 0 10px;
    font-size: 0.72rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #8a94a6;
  }
  .register ul { display: block; overflow: visible; }
  .register a {
    border: 0;
    border-left: 2px solid #e3e8ef;
    border-radius: 0;
    background: none;
    padding: 6px 0 6px 12px;
    white-space: normal;
    font-size: 0.86rem;
  }
  .text > section:first-child h2 { margin-top: 34px; }
  /* **Das display block gehoert dazu.** Die Liste ist oben ein Grid, und
     columns wirkt auf einem Grid-Container nicht — die Regel stand da und tat
     nichts, gefunden beim Nachmessen im Browser und nicht im Testlauf. */
  .rumpf--liste ul.uebersicht { display: block; columns: 2; column-gap: 2.5rem; }
  .rumpf--liste ul.uebersicht li { break-inside: avoid; }
}