/* Peptikon — dunkel und cinematisch.
   Die Seite übernimmt die Welt der Produktfotos: tiefes Nachtblau, kaltes
   Cyan-Leuchten, Glasflächen. Zahlen stehen in Mono und dominieren.
   Titel: Archivo 700. Text: IBM Plex Sans. Zahlen: IBM Plex Mono. */

:root {
  color-scheme: dark;

  --nacht:      #050a11;
  --tiefe:      #0a121d;
  --glas:       #101b29;
  --glasrand:   rgba(120, 180, 230, .13);
  --linie:      rgba(120, 180, 230, .10);

  --text:       #e9eff7;
  --leise:      #94a7bb;
  --fein:       #7589a3;

  --cyan:       #3ec8f2;
  --cyan-hell:  #8fdffa;
  --marine:     #12365f;
  --auf-akzent: #04121c;

  --gruen:      #4fc99f;
  --bernstein:  #e0a558;
  --karmin:     #f0776a;

  --titel: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --text-schrift: "IBM Plex Sans", -apple-system, system-ui, sans-serif;
  --zahl: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --spalte: 36rem;
  --breit: 68rem;
  --schatten: 0 24px 60px -30px rgba(0, 0, 0, .9);
  --glut: 0 0 60px -12px rgba(62, 200, 242, .30);
}

/* Helle Fassung: kein Nachbau des Leuchtens, sondern eine eigene,
   ruhige Tagvariante in denselben Markenfarben. */
:root[data-theme="light"] {
  color-scheme: light;
  --nacht: #eef1f5;
  --tiefe: #ffffff;
  --glas: #ffffff;
  --glasrand: rgba(15, 45, 85, .14);
  --linie: rgba(15, 45, 85, .10);
  --text: #08111d;
  --leise: #46586b;
  --fein: #5d6d82;
  --cyan: #0b5c93;
  --cyan-hell: #094a78;
  --auf-akzent: #ffffff;
  --gruen: #1d7a5a;
  --bernstein: #8b5f1a;
  --karmin: #a5322a;
  --schatten: 0 18px 44px -30px rgba(10, 30, 60, .5);
  --glut: none;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--nacht);
  color: var(--text);
  font-family: var(--text-schrift);
  font-size: 1rem;
  line-height: 1.68;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}

/* Kaltes Licht im Hintergrund, wie hinter den Vials */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 78% -8%, rgba(62, 200, 242, .13), transparent 62%),
    radial-gradient(48rem 34rem at 6% 4%, rgba(18, 54, 95, .40), transparent 60%);
}
:root[data-theme="light"] body::before { opacity: .16; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* ─────────────────────────────────────────────────────────────── Kopfzeile */

.kopf {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--nacht) 76%, transparent);
  backdrop-filter: saturate(1.5) blur(18px);
  border-bottom: 1px solid var(--linie);
  padding-top: env(safe-area-inset-top);
}

.kopf-in {
  max-width: var(--breit);
  margin-inline: auto;
  padding: .75rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.marke { display: flex; align-items: center; gap: .55rem; text-decoration: none; }
.marke img { display: block; width: 30px; height: auto; }
.marke span {
  font-family: var(--titel);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -.02em;
  color: var(--text);
}
.marke em { font-style: normal; color: var(--cyan); }

.kopf nav {
  margin-left: auto;
  display: flex;
  gap: .25rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.kopf nav::-webkit-scrollbar { display: none; }

.kopf nav a {
  font-size: .875rem;
  color: var(--leise);
  text-decoration: none;
  padding: .4rem .7rem;
  border-radius: 6px;
  white-space: nowrap;
  transition: color .18s, background .18s;
}
.kopf nav a:hover { color: var(--text); background: var(--glas); }
.kopf nav a[aria-current] { color: var(--cyan); }

.thema {
  flex: none;
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border: 1px solid var(--glasrand);
  border-radius: 8px;
  background: var(--glas);
  color: var(--leise);
  cursor: pointer;
  font-size: .8125rem;
  padding: 0;
}
.thema:hover { color: var(--cyan); border-color: var(--cyan); }

/* ───────────────────────────────────────────────────────────────── Gerüst */

.bahn { max-width: var(--breit); margin-inline: auto; padding: 2.5rem 1.5rem 6rem; }
.spalte { max-width: var(--spalte); }

h1, h2, h3 {
  font-family: var(--titel);
  font-weight: 700;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}

h1 {
  font-size: clamp(2.5rem, 9vw, 5.25rem);
  line-height: .96;
  letter-spacing: -.04em;
  margin: .5rem 0 .75rem;
}
h1 .zusatz {
  display: block;
  font-family: var(--zahl);
  font-size: clamp(.875rem, 2.4vw, 1.0625rem);
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--cyan);
  margin-top: .875rem;
}

h2 {
  font-size: clamp(1.5rem, 4vw, 2.125rem);
  line-height: 1.1;
  letter-spacing: -.03em;
  margin: 0 0 1rem;
}

h3 {
  font-family: var(--text-schrift);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -.005em;
  margin: 2rem 0 .625rem;
  color: var(--text);
}

p { margin: 0 0 1.125rem; }
a { color: var(--cyan); text-underline-offset: 3px; }

.teil { padding-top: 4rem; }
.teil > h2 { scroll-margin-top: 6rem; }

/* Abschnittsmarke: Mono in Cyan, ohne Versalien und Haarlinie */
.marke-klein {
  font-family: var(--zahl);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--cyan);
  margin-bottom: .625rem;
}
.marke-klein::before { content: "// "; opacity: .5; }

.vorspann {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--leise);
  max-width: var(--spalte);
}

.klassifikation {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  font-family: var(--zahl);
  font-size: .75rem;
  color: var(--fein);
}
.klassifikation span + span::before { content: "/ "; opacity: .4; }
.klassifikation .ev { --f: var(--fein); }
.klassifikation .ev.gut { --f: var(--gruen); }
.klassifikation .ev.mittel { --f: var(--bernstein); }
.klassifikation .ev.schwach { --f: var(--karmin); }
.klassifikation .ev a {
  color: var(--f);
  border: 1px solid color-mix(in srgb, var(--f) 40%, transparent);
  background: color-mix(in srgb, var(--f) 12%, transparent);
  border-radius: 999px;
  padding: .0625rem .5rem;
  text-decoration: none;
  font-weight: 600;
}
.klassifikation .ev + span::before,
.klassifikation span + .ev::before { content: none; }

/* ─────────────────────────────────────────────────────────── Vialumschalter

   Ein Peptid, eine Seite. Die Vialgröße ist eine Einstellung - alles darunter
   rechnet sich neu. Deshalb sitzt der Umschalter direkt über den Kennwerten
   und nicht in der Navigation. */

.vialwahl {
  background: var(--glas);
  border: 1px solid var(--glasrand);
  border-radius: 14px;
  padding: 1rem 1.25rem 1.125rem;
  margin: 1.75rem 0 -.5rem;
}
.vialwahl .marke-klein { margin-bottom: .5rem; }
.vialwahl .knoepfe { margin: 0 0 .625rem; }
.vialwahl .verweis { margin: 0; }
.vialknopf[aria-pressed="true"] {
  background: var(--cyan);
  color: var(--auf-akzent);
  border-color: var(--cyan);
  box-shadow: var(--glut);
}

/* ────────────────────────────────────────────────────────────── Datenlage

   Die Stufe sagt, wie gut untersucht ein Stoff ist - nicht wie gut er wirkt.
   Deshalb wird die Leiter A-E vollständig gezeigt, mit der eigenen Stufe
   hervorgehoben, statt nur einer Note ohne Maßstab. */

.evidenz {
  background: var(--glas);
  border: 1px solid var(--glasrand);
  border-radius: 14px;
  padding: 1.25rem;
}
.evidenz-kopf { display: flex; gap: 1rem; align-items: center; }
.evidenz .titel {
  font-family: var(--titel);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.evidenz .verweis { margin: .125rem 0 0; }
.evidenz .grund {
  margin: 1rem 0 .75rem;
  padding-left: .875rem;
  border-left: 2px solid var(--cyan);
  color: var(--text);
}
.stufe {
  flex: none;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 12px;
  font-family: var(--titel);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--auf-akzent);
  background: var(--fein);
}
.stufe.gut { background: var(--gruen); }
.stufe.mittel { background: var(--bernstein); }
.stufe.schwach { background: var(--karmin); }
.stufe.offen {
  background: transparent;
  border: 1px dashed var(--glasrand);
  color: var(--fein);
}
.leiter {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  margin-top: 1rem;
}
.leiter span {
  height: 1.5rem;
  display: grid;
  place-items: center;
  font-family: var(--zahl);
  font-size: .6875rem;
  color: var(--fein);
  background: color-mix(in srgb, var(--fein) 14%, transparent);
  border-radius: 4px;
}
.leiter span.an { color: var(--auf-akzent); font-weight: 600; }
.leiter .a.an, .leiter .b.an { background: var(--gruen); }
.leiter .c.an { background: var(--bernstein); }
.leiter .d.an, .leiter .e.an { background: var(--karmin); }

/* Kleines Stufenzeichen für Listen und Treffer */
.ministufe {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 6px;
  font-family: var(--titel);
  font-size: .8125rem;
  font-weight: 700;
  color: var(--auf-akzent);
  background: var(--fein);
}
.ministufe.gut { background: var(--gruen); }
.ministufe.mittel { background: var(--bernstein); }
.ministufe.schwach { background: var(--karmin); }
.ministufe.offen {
  background: transparent;
  border: 1px dashed var(--glasrand);
  color: var(--fein);
}

/* ───────────────────────────────────────────────────────── Suche am Start

   Die Trefferliste hängt unter dem Feld und überdeckt den Rest - sonst
   springt die Seite bei jedem Tastendruck. */

.startsuche { position: relative; max-width: 34rem; margin: 2rem 0 1.75rem; }
.startsuche input {
  width: 100%;
  padding: 1rem 1.125rem;
  font-size: 1.0625rem;
  font-family: inherit;
  color: var(--text);
  background: var(--glas);
  border: 1px solid var(--glasrand);
  border-radius: 12px;
  outline: none;
}
.startsuche input:focus {
  border-color: var(--cyan);
  box-shadow: var(--glut);
}
.startsuche input::placeholder { color: var(--fein); }

#startergebnis, #startsuche-status {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + .375rem);
  max-height: 22rem;
  overflow-y: auto;
  background: var(--tiefe);
  border: 1px solid var(--glasrand);
  border-radius: 12px;
  box-shadow: var(--schatten);
}
#startergebnis:empty { display: none; }
#startergebnis a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .125rem .75rem;
  align-items: center;
  padding: .75rem 1rem;
  text-decoration: none;
  color: var(--text);
  border-bottom: 1px solid var(--linie);
}
#startergebnis a:last-child { border-bottom: 0; }
#startergebnis a b { font-weight: 600; }
#startergebnis a span {
  grid-column: 1;
  font-family: var(--zahl);
  font-size: .75rem;
  color: var(--fein);
}
#startergebnis a .ministufe { grid-row: 1 / 3; grid-column: 2; }
#startergebnis a:hover,
#startergebnis a[aria-selected="true"] {
  background: color-mix(in srgb, var(--cyan) 12%, transparent);
}
.leer-klein { margin: 0; padding: 1rem; color: var(--leise); }

/* Filterknöpfe für die Datenlage im Verzeichnis */
.knopf.ev span {
  font-family: var(--zahl);
  font-size: .6875rem;
  opacity: .6;
  margin-left: .1875rem;
}
.knopf.ev[aria-pressed="true"] {
  background: var(--cyan);
  color: var(--auf-akzent);
  border-color: var(--cyan);
}
#evleiste .feld { margin: 0 .25rem 0 0; align-self: center; }

/* Peptide, die zu einer Quelle gehören */
.quelle-peptide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;   /* sonst dehnen sich die Chips auf die Zeilenhöhe */
  gap: .375rem .5rem;
  margin-top: .5rem;
  font-size: .8125rem;
  line-height: 1.4;
}
.quelle-peptide .verweis { margin: 0; }
.quelle-peptide a {
  color: var(--leise);
  text-decoration: none;
  border: 1px solid var(--linie);
  border-radius: 999px;
  padding: .0625rem .5rem;
}
.quelle-peptide a:hover { color: var(--cyan); border-color: var(--cyan); }

/* ──────────────────────────────────────────────── Kopfbereich mit Produkt */

.kopfbereich { display: grid; gap: 2rem; }

.produktbild { margin: 0; position: relative; isolation: isolate; }
.produktbild img {
  display: block;
  width: 100%;
  height: auto;
  --rand-x: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  --rand-y: linear-gradient(to bottom, transparent 0%, #000 8%, #000 86%, transparent 100%);
  -webkit-mask-image: var(--rand-x), var(--rand-y);
  -webkit-mask-composite: source-in;
          mask-image: var(--rand-x), var(--rand-y);
          mask-composite: intersect;
}
.produktbild::before {
  content: "";
  position: absolute;
  inset: 4%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 52%, rgba(62, 200, 242, .22), transparent 68%);
  filter: blur(18px);
}
.produktbild figcaption {
  font-family: var(--zahl);
  font-size: .6875rem;
  color: var(--fein);
  text-align: center;
  margin-top: .25rem;
}

@media (min-width: 52rem) {
  .kopfbereich.mit-bild {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: center;
    gap: 3rem;
  }
  .produktbild { margin-right: -3rem; }
}

/* ──────────────────────────────────────────────────────────── Der Kennwert */

.kennwert {
  margin: 2rem 0 0;
  border: 1px solid var(--glasrand);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .045), transparent 40%),
    var(--tiefe);
  box-shadow: var(--schatten), var(--glut);
  overflow: hidden;
}

.kennwert-haupt { padding: 1.5rem 1.75rem 1.375rem; }
.kennwert-haupt .k {
  font-family: var(--zahl);
  font-size: .75rem;
  color: var(--fein);
  margin-bottom: .5rem;
}
.kennwert-haupt .v {
  font-family: var(--zahl);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.25rem, 8vw, 4rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.045em;
  color: var(--cyan);
  text-shadow: 0 0 34px rgba(62, 200, 242, .35);
}
:root[data-theme="light"] .kennwert-haupt .v { text-shadow: none; }
.kennwert-haupt .v small {
  font-family: var(--text-schrift);
  font-size: 1rem;
  font-weight: 400;
  color: var(--leise);
  letter-spacing: 0;
  margin-left: .5rem;
  text-shadow: none;
}
.kennwert-haupt .kennwert-fuss {
  font-family: var(--zahl);
  font-size: .8125rem;
  color: var(--leise);
  margin-top: .75rem;
}

.kennwert-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  border-top: 1px solid var(--linie);
}
.kennwert-reihe > div { padding: .875rem 1.75rem 1rem; border-right: 1px solid var(--linie); }
.kennwert-reihe > div:last-child { border-right: 0; }
.kennwert-reihe .k { font-family: var(--zahl); font-size: .6875rem; color: var(--fein); }
.kennwert-reihe .v {
  font-family: var(--zahl);
  font-variant-numeric: tabular-nums;
  font-size: 1.0625rem;
  margin-top: .25rem;
  letter-spacing: -.02em;
}

/* ──────────────────────────────────────────────────────────────── Tabellen */

.tabelle { margin: 1.25rem 0; }
.mobilsort { display: none; }

table { width: 100%; border-collapse: collapse; font-size: .9375rem; }

thead th {
  text-align: left;
  font-family: var(--zahl);
  font-size: .6875rem;
  font-weight: 400;
  color: var(--fein);
  padding: 0 1.25rem .625rem 0;
  border-bottom: 1px solid var(--glasrand);
  white-space: nowrap;
}

tbody td {
  padding: .9375rem 1.25rem .9375rem 0;
  border-bottom: 1px solid var(--linie);
  vertical-align: baseline;
  font-variant-numeric: tabular-nums;
}
tbody td:last-child, thead th:last-child { padding-right: 0; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .16s; }
tbody tr:hover { background: rgba(62, 200, 242, .045); }

td.zahl { font-family: var(--zahl); color: var(--text); }
td.phase { font-weight: 600; white-space: nowrap; color: var(--leise); }
td.phase a.zeilen-link { color: inherit; text-decoration: none; }
td.phase a.zeilen-link:hover,
td.phase a.zeilen-link:focus-visible { color: var(--cyan); text-decoration: underline; }

@media (max-width: 46rem) {
  .karten thead { display: none; }
  .karten, .karten tbody, .karten tr, .karten td { display: block; width: 100%; }
  .karten tr {
    border: 1px solid var(--glasrand);
    border-radius: 12px;
    background: var(--tiefe);
    padding: 1rem 1.125rem;
    margin-bottom: .75rem;
  }
  .karten td {
    padding: 0;
    border: 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    /* Ohne min-width:0 nimmt eine Zelle die Breite ihres laengsten Wortes
       als Mindestmass - die Karte wird dann breiter als der Bildschirm. */
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .karten td + td { margin-top: .5rem; }
  .karten td::before {
    content: attr(data-k);
    font-family: var(--zahl);
    font-size: .6875rem;
    color: var(--fein);
    flex: none;
  }
  .karten td.phase {
    display: block;
    font-family: var(--titel);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text);
    padding-bottom: .625rem;
    margin-bottom: .625rem;
    border-bottom: 1px solid var(--linie);
    /* Am Rechner steht der Peptidname in einer Zeile. Als Kartenueberschrift
       am Handy muss er umbrechen duerfen: "CJC-1295 DAC (2 mg) + Ipamorelin
       (5 mg) Stack" ist breiter als jedes Telefon. */
    white-space: normal;
  }
  .karten td.phase::before { display: none; }
  .karten td.phase a.zeilen-link { display: block; min-width: 0; }

  /* Ohne sichtbaren Tabellenkopf gibt es keinen Klick-Sortierkopf mehr —
     dafür steht hier die Auswahl. */
  .mobilsort { display: block; margin: .625rem 0 0; }

  /* Sticky Filterleiste knapper: hier zaehlt jeder Zentimeter Bildhöhe. */
  .filter { padding: .625rem 0 .5rem; }
  .filter .knoepfe { gap: .375rem; margin-top: .5rem; }
  .filter .knopf { padding: .375rem .625rem; font-size: .8125rem; }
  .filter input[type=search] { padding: .625rem .75rem; }
  .evidenz-erklaerung { margin-top: .5rem; font-size: .6875rem; }
  .zaehler-zeile .zaehler { margin: .625rem 0; }
}

.rollen { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rollen table { min-width: 32rem; }

/* ──────────────────────────────────────────────────────────────── Hinweise */

.hinweis {
  border-left: 2px solid var(--cyan);
  background: linear-gradient(90deg, rgba(62, 200, 242, .10), transparent 70%);
  padding: 1rem 1.25rem;
  border-radius: 0 10px 10px 0;
  font-size: .9375rem;
  line-height: 1.6;
  margin: 1.25rem 0;
}
.hinweis b { display: block; margin-bottom: .25rem; color: var(--text); }
.hinweis.gut     { border-color: var(--gruen);     background: linear-gradient(90deg, rgba(79, 201, 159, .10), transparent 70%); }
.hinweis.achtung { border-color: var(--bernstein); background: linear-gradient(90deg, rgba(224, 165, 88, .10), transparent 70%); }
.hinweis.ernst   { border-color: var(--karmin);    background: linear-gradient(90deg, rgba(240, 119, 106, .11), transparent 70%); }

ul.punkte { margin: .875rem 0 1.25rem; padding-left: 0; list-style: none; }
ul.punkte li { position: relative; padding-left: 1.375rem; margin-bottom: .625rem; max-width: var(--spalte); }
ul.punkte li::before {
  content: "";
  position: absolute;
  left: .1875rem; top: .75rem;
  width: .375rem; height: .375rem;
  background: var(--cyan);
  transform: rotate(45deg);
}

ol.schritte { margin: .875rem 0 1.25rem; padding-left: 0; list-style: none; counter-reset: s; }
ol.schritte li { counter-increment: s; position: relative; padding-left: 2.5rem; margin-bottom: .875rem; max-width: var(--spalte); }
ol.schritte li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute;
  left: 0; top: .125rem;
  font-family: var(--zahl);
  font-size: .8125rem;
  color: var(--cyan);
}

/* ────────────────────────────────────────────────────────── Inhalt, Kacheln */

.inhalt { border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); margin: 2.5rem 0 0; }
.inhalt summary {
  cursor: pointer;
  padding: .875rem 0;
  font-family: var(--zahl);
  font-size: .75rem;
  color: var(--fein);
  list-style: none;
}
.inhalt summary::-webkit-details-marker { display: none; }
.inhalt summary::after { content: " ↓"; }
.inhalt[open] summary::after { content: " ↑"; }
.inhalt ol { margin: 0 0 1.25rem; padding-left: 0; list-style: none; columns: 2; column-gap: 2.5rem; font-size: .9375rem; }
@media (max-width: 36rem) { .inhalt ol { columns: 1; } }
.inhalt li { margin: .375rem 0; break-inside: avoid; }
.inhalt a { color: var(--leise); text-decoration: none; }
.inhalt a:hover { color: var(--cyan); }

.gitter { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); margin: 1.25rem 0; }
.gitter.drei { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }

.kachel {
  display: block;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), transparent 45%), var(--tiefe);
  border: 1px solid var(--glasrand);
  border-radius: 12px;
  padding: 1.125rem 1.25rem;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.kachel:hover {
  border-color: rgba(62, 200, 242, .5);
  transform: translateY(-2px);
  box-shadow: var(--glut);
}
.kachel b { display: block; font-family: var(--titel); font-size: 1.125rem; font-weight: 700; letter-spacing: -.025em; }
.kachel span { display: block; font-family: var(--zahl); font-size: .75rem; color: var(--fein); margin-top: .375rem; }

.kachel.weg { padding: 1.5rem; }
.kachel.weg b { font-size: 1.375rem; margin-bottom: .625rem; }
.kachel.weg span { font-family: var(--text-schrift); font-size: .9375rem; line-height: 1.55; color: var(--leise); }
.kachel.weg::after { content: "→"; display: block; margin-top: 1rem; color: var(--cyan); }

/* ───────────────────────────────────────────────────────── Bedienelemente */

label.feld { display: block; font-family: var(--zahl); font-size: .6875rem; color: var(--fein); margin-bottom: .5rem; }

input[type=number], input[type=search], input[type=text], input[type=email], select {
  width: 100%;
  font-family: var(--zahl);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  padding: .75rem .875rem;
  border: 1px solid var(--glasrand);
  border-radius: 10px;
  background: var(--nacht);
  color: var(--text);
  -webkit-appearance: none;
  appearance: none;
}
input[type=search], input[type=text], input[type=email] { font-family: var(--text-schrift); }
select { font-family: var(--text-schrift); padding-right: 2rem; }
input:focus, select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(62, 200, 242, .16); outline: none; }
input[aria-invalid="true"], input.ungueltig { border-color: var(--karmin); }
input[aria-invalid="true"]:focus, input.ungueltig:focus { box-shadow: 0 0 0 3px rgba(240, 119, 106, .18); }

.feldfehler {
  margin: .375rem 0 0;
  font-family: var(--zahl);
  font-size: .75rem;
  color: var(--karmin);
}
.feldfehler:empty { display: none; }

.paar { display: grid; gap: 1.25rem; margin-bottom: 1.25rem; }
@media (min-width: 36rem) { .paar.zwei { grid-template-columns: 1fr 1fr; } }

.knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .625rem; }
.knoepfe.gross { margin-top: 2rem; gap: .75rem; }

.knopf {
  font-family: var(--text-schrift);
  font-size: .875rem;
  font-weight: 600;
  padding: .5rem .875rem;
  border-radius: 8px;
  border: 1px solid var(--glasrand);
  background: var(--glas);
  color: var(--leise);
  cursor: pointer;
  text-decoration: none;
  transition: border-color .18s, color .18s;
}
.knopf:hover { border-color: var(--cyan); color: var(--cyan); }
.knopf[aria-pressed=true] { background: var(--cyan); border-color: var(--cyan); color: var(--auf-akzent); }
.knopf:disabled { opacity: .45; cursor: not-allowed; }
.knopf:disabled:hover { border-color: var(--glasrand); color: var(--leise); }

.knopf.haupt {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--auf-akzent);
  padding: .75rem 1.375rem;
  font-size: .9375rem;
  box-shadow: var(--glut);
}
.knopf.haupt:hover { background: var(--cyan-hell); border-color: var(--cyan-hell); color: var(--auf-akzent); }
.knoepfe.gross .knopf:not(.haupt) { padding: .75rem 1.375rem; font-size: .9375rem; }

.wahl { display: flex; gap: .25rem; background: var(--nacht); border: 1px solid var(--glasrand); padding: .25rem; border-radius: 10px; }
.wahl button {
  flex: 1;
  font-family: var(--text-schrift);
  font-size: .875rem;
  font-weight: 600;
  padding: .5rem;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--leise);
  cursor: pointer;
}
/* Spritzenwahl trägt zwei Zeilen: Fassungsvermögen und Skala. Beides steht
   auf der Packung, also soll man auch nach beidem greifen können. */
.wahl button small {
  display: block;
  font-family: var(--zahl);
  font-size: .625rem;
  font-weight: 400;
  opacity: .7;
  margin-top: .0625rem;
}
.wahl button[aria-pressed=true] { background: var(--glas); color: var(--cyan); }

.tafel {
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), transparent 40%), var(--tiefe);
  border: 1px solid var(--glasrand);
  border-radius: 14px;
  padding: 1.5rem;
  margin: 1.25rem 0;
  box-shadow: var(--schatten);
}
.tafel > :first-child { margin-top: 0; }
.tafel > :last-child { margin-bottom: 0; }

.spritze { width: 100%; height: auto; display: block; margin: 1.25rem 0 .25rem; }

/* ───────────────────────────────────────────────────────────────── Quellen */

.quellen { list-style: none; padding: 0; margin: 1.25rem 0; counter-reset: q; }
.quellen li {
  counter-increment: q;
  position: relative;
  padding: .875rem 0 .875rem 2.75rem;
  border-bottom: 1px solid var(--linie);
  font-size: .9375rem;
  line-height: 1.55;
}
.quellen li:last-child { border-bottom: 0; }
.quellen li::before {
  content: counter(q, decimal-leading-zero);
  position: absolute; left: 0; top: 1rem;
  font-family: var(--zahl);
  font-size: .75rem;
  color: var(--cyan);
  opacity: .7;
}
.quellen b { font-weight: 600; }
.quellen b { display: block; }
.quellen .wo { display: block; color: var(--leise); font-size: .875rem; }
/* Der Verweis gehört auf eine eigene Zeile - sonst klebt er ohne Beschreibung
   direkt hinter dem Titel. */
.quellen > li > a { display: inline-block; font-size: .8125rem; margin-top: .125rem; }

.fuss {
  border-top: 1px solid var(--linie);
  margin-top: 5rem;
  padding: 2.25rem 1.5rem 3.5rem;
  color: var(--fein);
  font-size: .8125rem;
  line-height: 1.65;
}
.fuss > div { max-width: var(--breit); margin-inline: auto; }
.fuss p { margin: 0 0 .625rem; max-width: var(--spalte); }
.fuss a { color: var(--leise); }

.zaehler { font-family: var(--zahl); font-size: .8125rem; color: var(--fein); margin: 1rem 0; }
.zaehler-zeile { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.zaehler-zeile .zaehler { margin: 1rem 0; }
.leer { padding: 4rem 1rem; color: var(--leise); }
.leer b { font-family: var(--titel); font-size: 1.375rem; display: block; margin-bottom: .5rem; }
.filter { position: sticky; top: 4.375rem; z-index: 30; background: var(--nacht); padding: 1rem 0 .625rem; }
.verweis { font-family: var(--zahl); font-size: .75rem; color: var(--fein); margin-top: 2.5rem; }
.evidenz-erklaerung { margin: .75rem 0 0; line-height: 1.5; }

/* ──────────────────────────────────────────────────────────── Startseite */

.auftakt { padding: 1.5rem 0 1rem; }
.auftakt h1 { font-size: clamp(2.75rem, 10vw, 6rem); letter-spacing: -.045em; max-width: 15ch; }
.vorspann.gross { font-size: clamp(1.0625rem, 2.6vw, 1.25rem); max-width: 34rem; }

.logo-block { padding: 0 0 2rem; }
.logo-gross { display: block; width: clamp(13rem, 34vw, 20rem); height: auto; margin: 0 0 .625rem; }
.logo-unter { font-family: var(--zahl); font-size: .6875rem; color: var(--fein); margin-top: .5rem; }

/* Die Sperrmarke ist deutlich breiter als hoch. Sie sitzt neben dem Auftakt,
   sobald Platz ist, und darueber, solange keiner da ist. */

/* Logo neben den Auftakt, sobald Platz ist.

   Vorher stand es mit position:fixed im linken Fensterrand. Das ging schief:
   der Rand ist (Fenster − 68rem Satzbreite) ÷ 2 breit, bei einem 1400er
   Laptop also schmaler als das Logo selbst — es lag dann über der
   Überschrift. Als Rasterspalte ist der Platz reserviert, eine Überlappung
   kann nicht mehr entstehen. sticky hält es beim Scrollen oben, ohne es
   aus dem Fluss zu nehmen. */
@media (min-width: 62rem) {
  .auftakt {
    display: grid;
    /* Die Spalte traegt die Sperrmarke, die deutlich breiter als hoch ist.
       Fuer das frueher hier stehende hochformatige Zeichen reichten 9.5rem. */
    grid-template-columns: 14rem minmax(0, 1fr);
    column-gap: 2.5rem;
    align-items: start;
    padding-top: 2.5rem;
  }
  .auftakt > :not(.logo-block) { grid-column: 2; }
  .auftakt .logo-block {
    grid-column: 1;
    grid-row: 1 / span 4;
    position: sticky;
    top: 6.5rem;
    margin: 0;
    padding: 0;
  }
  .auftakt .logo-gross { width: 100%; }
}

@media print {
  .kopf, .filter, .fuss, .inhalt, .thema { display: none; }
  body { background: #fff; color: #000; }
  body::before { display: none; }
}

/* ═══════════════════════════════════════════════════ App-Anmutung ═══════ */

/* Web-Eigenheiten abstellen, die sofort verraten, dass es kein Programm ist */
html, body { overscroll-behavior-y: none; }
body { -webkit-tap-highlight-color: transparent; }

/* Bedienelemente lassen sich nicht markieren, Inhalte schon */
.kopf, .tableiste, .knopf, .wahl, .thema, .marke-klein,
.klassifikation, thead th, .inhalt summary { -webkit-user-select: none; user-select: none; }

/* Sanftes Erscheinen beim Seitenwechsel */
@keyframes auftauchen { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
main.bahn { animation: auftauchen .28s ease-out both; }
@media (prefers-reduced-motion: reduce) { main.bahn { animation: none; } }

/* ───────────────────────────────── Navigationsleiste unten (nur am Handy) */

.tableiste { display: none; }

@media (max-width: 52rem) {
  .kopf nav { display: none; }              /* oben weg, unten hin */
  .kopf-in { gap: .75rem; }

  .tableiste {
    display: grid;
    /* Zaehlt automatisch mit, wenn ein Navigationspunkt dazukommt - fest
       auf vier Spalten gesetzt brach die Leiste beim fuenften um. */
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 70;
    background: color-mix(in srgb, var(--nacht) 86%, transparent);
    backdrop-filter: saturate(1.6) blur(22px);
    border-top: 1px solid var(--linie);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .tableiste a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .1875rem;
    padding: .5rem 0 .4375rem;
    color: var(--fein);
    text-decoration: none;
    font-size: .625rem;
    letter-spacing: .01em;
    transition: color .16s;
    min-width: 0;         /* fuenf Spalten: Text darf kuerzen statt zu drücken */
  }
  .tableiste a span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tableiste a svg {
    width: 22px; height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .tableiste a:active { color: var(--cyan-hell); }
  .tableiste a[aria-current] { color: var(--cyan); }

  /* Platz schaffen, damit die Leiste nichts verdeckt.

     Die Leiste ist rund 3,6rem hoch. Mit 3.75rem blieben davon zwei Pixel
     Luft - der letzte Knopf einer Seite klebte an der Navigation. --unten
     haelt Abstand und Sprungziel zusammen, damit beides nicht auseinander
     laeuft. */
  :root { --unten: calc(4.75rem + env(safe-area-inset-bottom)); }
  body { padding-bottom: var(--unten); }
  html { scroll-padding-bottom: var(--unten); }
  .fuss { padding-bottom: 2rem; }
  .filter { top: 4.125rem; }
}

/* Als installierte App: Kopfzeile unter die Statusleiste schieben */
@media (display-mode: standalone) {
  .kopf { padding-top: max(env(safe-area-inset-top), .5rem); }
  .bahn { padding-top: 1.75rem; }
}

/* ─────────────────────────────────────────────────────────── Sprungmarken

   Eine Peptidseite ist rund zwölf Bildschirmseiten lang. Die Leiste steht
   offen im Kopf und erscheint zusätzlich als mitlaufendes Band am oberen
   Rand, sobald man zu scrollen anfängt - nicht erst, wenn man die Stelle im
   Kopf hinter sich gelassen hat. Die Marke des gerade gelesenen Abschnitts
   ist hervorgehoben und ersetzt so zugleich eine Fortschrittsanzeige.

   Die Höhe der Kopfzeile steckt in --kopf, damit beides nicht auseinander
   läuft, wenn sich oben etwas ändert. */

:root { --kopf: 4.3125rem; }

.sprungmarken { margin: 2rem 0 0; }

.marken-bahn {
  display: flex;
  gap: .375rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: .625rem 0;
  scroll-behavior: smooth;
}
.marken-bahn::-webkit-scrollbar { display: none; }

.sprungmarken a {
  flex: none;
  font-family: var(--zahl);
  font-size: .75rem;
  letter-spacing: .01em;
  color: var(--leise);
  text-decoration: none;
  padding: .375rem .75rem;
  border: 1px solid var(--glasrand);
  border-radius: 999px;
  background: var(--glas);
  white-space: nowrap;
  transition: color .16s, border-color .16s, background .16s;
}
.sprungmarken a:hover { color: var(--text); border-color: var(--cyan); }
.sprungmarken a[aria-current] {
  color: var(--auf-akzent);
  background: var(--cyan);
  border-color: var(--cyan);
}

/* Die Fassung im Kopf wird unsichtbar, sobald das mitlaufende Band übernimmt -
   ihr Platz bleibt erhalten, damit nichts springt. Die Lücke fällt nicht auf,
   weil dort ohnehin der Abstand zum ersten Abschnitt beginnt. */
.sprungmarken.verdeckt { visibility: hidden; }

/* Mitlaufendes Band. Hängt an body, nicht in .bahn - dort liegt eine
   Einblend-Animation mit transform, die für fixed positionierte Elemente
   einen eigenen Bezugsrahmen aufspannt. */
.sprungmarken.schwebend {
  position: fixed;
  top: var(--kopf);
  left: 0;
  right: 0;
  z-index: 50;
  margin: 0;
  padding: 0 1.5rem;
  /* Deutlich deckender als der Seitengrund, dazu ein enger Schatten: das
     Band soll erkennbar ueber dem Text liegen und nicht in ihm verschwimmen.
     Vorher war es fast durchsichtig - man sah nicht, dass es aufgetaucht war. */
  background: color-mix(in srgb, var(--tiefe) 96%, transparent);
  backdrop-filter: saturate(1.6) blur(22px);
  border-bottom: 1px solid var(--glasrand);
  box-shadow: 0 12px 26px -18px rgba(0, 0, 0, .95);
  opacity: 0;
  transform: translateY(-.75rem);
  pointer-events: none;
  transition: opacity .22s ease-out, transform .22s ease-out;
}
:root[data-theme="light"] .sprungmarken.schwebend {
  box-shadow: 0 12px 26px -20px rgba(10, 30, 60, .55);
}
.sprungmarken.schwebend.an {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Fortschrittslinie an der Oberkante, direkt unter der Kopfzeile: zeigt, wie
   weit die Seite gelesen ist, und macht nebenbei unmissverstaendlich, dass
   hier ein Band liegt. */
.marken-fortschritt {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .12s linear;
}
.sprungmarken.schwebend .marken-bahn {
  max-width: var(--breit);
  margin-inline: auto;
  padding: .5rem 0;
}

/* Sprungziele dürfen nicht unter dem Band verschwinden */
:root:has(.sprungmarken) { scroll-padding-top: 8.75rem; }

@media (max-width: 52rem) {
  :root { --kopf: 3.5rem; }
  :root:has(.sprungmarken) { scroll-padding-top: 7.25rem; }
}


/* ────────────────────────────────────────────────────────────────── Wofür

   Einstieg über das Ziel. Jedes Ziel trägt ein eigenes Sinnbild, und die
   Farbe der Karte kommt aus der Datenlage - grün nur dort, wo tatsächlich
   am Menschen geforscht wurde. Die Gliederung soll dieselbe Aussage tragen
   wie der Text: erst was belegt ist, dann was nicht. */

.zielgitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
  gap: .875rem;
  margin-top: 1.5rem;
}

.ziel {
  --f: var(--fein);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.25rem 1.125rem;
  background:
    radial-gradient(22rem 12rem at 100% 0,
      color-mix(in srgb, var(--f) 9%, transparent), transparent 70%),
    var(--glas);
  border: 1px solid var(--glasrand);
  border-radius: 16px;
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.ziel.gut { --f: var(--gruen); }
.ziel.mittel { --f: var(--bernstein); }
.ziel.schwach { --f: var(--karmin); }

/* Schmaler Streifen oben: die Datenlage als erstes sichtbares Merkmal */
.ziel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--f);
  opacity: .85;
}
.ziel:hover {
  border-color: var(--f);
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -26px rgba(0, 0, 0, .95);
}

.ziel-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: .875rem;
}
.zielbild {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--f);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.zielbild.gross { width: 58px; height: 58px; stroke-width: 1.25; flex: none; }

.ziel h3 {
  font-family: var(--titel);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 0;
  color: var(--text);
}
.ziel-frage {
  margin: .375rem 0 0;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--leise);
}

.ziel-fuss {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: auto;
  padding-top: 1rem;
  font-family: var(--zahl);
  font-size: .6875rem;
  color: var(--fein);
}
.ziel-fuss .anzahl {
  font-size: 1.375rem;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ziel-fuss .leiter { margin: 0 0 0 auto; width: 5.5rem; }

/* Kleine Fassung der Evidenzleiter für Karten und Streifen */
.leiter.klein { grid-template-columns: repeat(5, 1fr); gap: 2px; }
.leiter.klein span { height: .75rem; font-size: .5rem; border-radius: 2px; }

/* ── Kopf einer Themenseite ──────────────────────────────────────────── */

.zielkopfbereich {
  --f: var(--fein);
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}
.zielkopfbereich.gut { --f: var(--gruen); }
.zielkopfbereich.mittel { --f: var(--bernstein); }
.zielkopfbereich.schwach { --f: var(--karmin); }
.zielkopfbereich h1 { font-size: clamp(2.25rem, 6.5vw, 4rem); }

.lagestreifen {
  --f: var(--fein);
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  background: color-mix(in srgb, var(--f) 8%, var(--glas));
  border: 1px solid color-mix(in srgb, var(--f) 28%, transparent);
  border-radius: 14px;
}
.lagestreifen.gut { --f: var(--gruen); }
.lagestreifen.mittel { --f: var(--bernstein); }
.lagestreifen.schwach { --f: var(--karmin); }
.lagestreifen b {
  display: block;
  font-family: var(--titel);
  font-size: .9375rem;
}
.lagestreifen span { font-size: .875rem; line-height: 1.5; color: var(--leise); }
.lagestreifen .leiter { flex: none; width: 7rem; margin: 0; }

/* ── Aufklappbarer Hinweis statt Warnkasten ──────────────────────────── */

.haftung {
  margin: 1.75rem 0 0;
  border: 1px solid color-mix(in srgb, var(--karmin) 30%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--karmin) 7%, transparent);
}
.haftung summary {
  cursor: pointer;
  padding: .75rem 1.125rem;
  font-family: var(--titel);
  font-size: .9375rem;
  font-weight: 700;
  color: var(--karmin);
  list-style: none;
}
.haftung summary::-webkit-details-marker { display: none; }
.haftung summary::after { content: "  ↓"; font-family: var(--zahl); opacity: .7; }
.haftung[open] summary::after { content: "  ↑"; }
.haftung p {
  margin: 0;
  padding: 0 1.125rem 1rem;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--leise);
}

/* ── Peptidkarten innerhalb eines Themas ─────────────────────────────── */

.pgitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
  gap: .75rem;
  margin-top: 1.25rem;
}
.pkarte {
  display: block;
  padding: .9375rem 1.0625rem 1.0625rem;
  background: var(--glas);
  border: 1px solid var(--glasrand);
  border-radius: 13px;
  text-decoration: none;
  color: var(--text);
  transition: border-color .16s, transform .16s;
}
.pkarte:hover { border-color: var(--cyan); transform: translateY(-2px); }
.pkarte-kopf { display: flex; align-items: center; gap: .5rem; }
.pkarte-kopf .rang {
  font-family: var(--zahl);
  font-size: .6875rem;
  color: var(--cyan);
  opacity: .75;
}
.pkarte-kopf b {
  font-family: var(--titel);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.015em;
  margin-right: auto;
}
.pkarte-art {
  font-family: var(--zahl);
  font-size: .6875rem;
  color: var(--fein);
  margin-top: .25rem;
}
.pkarte p {
  margin: .5rem 0 0;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--leise);
}

/* Zielchips auf der Startseite: der zweite Einstieg neben der Namenssuche */
.zielchips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.zielchip {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  font-family: var(--zahl);
  font-size: .75rem;
  color: var(--leise);
  text-decoration: none;
  padding: .4375rem .8125rem;
  border: 1px solid var(--glasrand);
  border-radius: 999px;
  background: var(--glas);
  transition: color .16s, border-color .16s;
}
.zielchip svg { width: 15px; height: 15px; fill: none; stroke: currentColor;
                stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.zielchip:hover { color: var(--cyan); border-color: var(--cyan); }

@media (max-width: 40rem) {
  .zielkopfbereich { gap: 1rem; }
  .zielbild.gross { width: 40px; height: 40px; }
  .lagestreifen { flex-wrap: wrap; }
  .lagestreifen .leiter { width: 100%; }
}

/* Im Flexstreifen darf das Stufenzeichen nicht schrumpfen */
.lagestreifen .ministufe, .ziel-kopf .ministufe, .pkarte-kopf .ministufe { flex: none; }
/* .lagestreifen span faerbte auch das Stufenzeichen ein - das braucht seine
   eigene Schriftfarbe, sonst steht der Buchstabe kontrastarm auf der Flaeche. */
.lagestreifen .ministufe { color: var(--auf-akzent); font-size: .875rem; }
.lagestreifen .ministufe.offen { color: var(--fein); }

/* Acht Kacheln sollen aufgehen, nicht als 3+3+2 ausfransen: zwei Spalten am
   Handy, vier ab Tabletbreite - immer volle Reihen. */
.gitter.acht { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 56rem) { .gitter.acht { grid-template-columns: repeat(4, 1fr); } }

/* ═══════════════════════════════════ Neue Bausteine ══════════════════════

   Alles hier folgt den vorhandenen Variablen. Es gibt nur ein Design;
   die frueheren Varianten in marken.css sind mit der Umstellung auf eine
   Marke entfallen. */

/* ─────────────────────────────────── In 30 Sekunden verstanden */

.kurzfassung {
  margin: 1.75rem 0 0;
  border: 1px solid var(--glasrand);
  border-radius: var(--radius, 14px);
  background: var(--tiefe);
  padding: 1.25rem 1.375rem 1.375rem;
}
.kurzfassung h2 {
  font-family: var(--zahl);
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 .875rem;
}
.kurz-liste {
  margin: 0;
  display: grid;
  gap: .75rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.kurz-punkt { display: grid; gap: .125rem; min-width: 0; }
.kurz-punkt dt {
  font-family: var(--zahl);
  font-size: .6875rem;
  color: var(--fein);
  letter-spacing: .02em;
}
.kurz-punkt dd {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* ─────────────────────────────────── Evidenzprofil */

.evidenzprofil { margin-top: 1rem; }
.evidenzprofil > summary {
  cursor: pointer;
  font-family: var(--zahl);
  font-size: .75rem;
  color: var(--leise);
  padding: .5rem 0;
  list-style: none;
}
.evidenzprofil > summary::-webkit-details-marker { display: none; }
.evidenzprofil > summary::before { content: "\25B8 "; color: var(--cyan); }
.evidenzprofil[open] > summary::before { content: "\25BE "; }
.evidenzprofil > summary:hover { color: var(--text); }
.evidenzprofil > summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }

.profil-leiter { list-style: none; margin: .5rem 0 1rem; padding: 0; display: grid; gap: .375rem; }
.profil-sprosse {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: .75rem;
  align-items: start;
  padding: .5rem .625rem;
  border-radius: 8px;
  border: 1px solid transparent;
}
.ps-buchstabe {
  font-family: var(--zahl);
  font-size: .875rem;
  text-align: center;
  color: var(--fein);
  border: 1px solid var(--glasrand);
  border-radius: 6px;
  padding: .0625rem 0;
}
.ps-text { min-width: 0; font-size: .8125rem; line-height: 1.45; }
.ps-text b { display: block; color: var(--leise); font-weight: 600; }
.ps-text span { display: block; color: var(--fein); }
.profil-sprosse.ist {
  background: color-mix(in srgb, var(--cyan) 10%, transparent);
  border-color: color-mix(in srgb, var(--cyan) 40%, transparent);
}
.profil-sprosse.ist .ps-buchstabe {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--auf-akzent);
}
.profil-sprosse.ist .ps-text b { color: var(--text); }

.profil-fehlt { margin: 0; font-size: .875rem; line-height: 1.55; color: var(--leise); max-width: var(--spalte); }
.pf-marke {
  display: block;
  font-family: var(--zahl);
  font-size: .6875rem;
  letter-spacing: .04em;
  color: var(--fein);
  margin-bottom: .25rem;
}

/* ─────────────────────────────────── Quellenmerkmale */

.q-merkmale { display: inline-flex; flex-wrap: wrap; gap: .3125rem; margin: .25rem .5rem .125rem 0; vertical-align: middle; }
.q-typ, .q-jahr {
  font-family: var(--zahl);
  font-size: .625rem;
  letter-spacing: .04em;
  padding: .0625rem .375rem;
  border-radius: 4px;
  border: 1px solid var(--glasrand);
  color: var(--fein);
  white-space: nowrap;
}
.q-jahr { font-variant-numeric: tabular-nums; }

/* ─────────────────────────────────── Merken und Vergleichen */

.merkleiste { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.125rem; align-items: center; }
.merkknopf[aria-pressed="true"], .vergleichknopf[aria-pressed="true"] {
  background: color-mix(in srgb, var(--cyan) 16%, transparent);
  border-color: var(--cyan);
  color: var(--cyan-hell);
}
.merk-meldung {
  flex-basis: 100%;
  margin: .25rem 0 0;
  font-size: .8125rem;
  color: var(--bernstein);
}
.knopf.klein { padding: .3125rem .625rem; font-size: .75rem; }

/* ─────────────────────────────────── Rechnersprung an der Vialgröße */

.rechnersprung { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem .875rem; margin: 1rem 0 0; }
.rs-hinweis { font-family: var(--zahl); font-size: .6875rem; color: var(--fein); }

/* ─────────────────────────────────── Externe Produkte */

.partner-sprung { margin: .875rem 0 0; font-size: .875rem; }
.partner-sprung a { color: var(--cyan); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--cyan) 35%, transparent); }
.partner-sprung a:hover { border-bottom-color: var(--cyan); }

.partnerkasten {
  border: 1px solid var(--glasrand);
  border-radius: var(--radius, 14px);
  background: var(--tiefe);
  padding: 1.25rem 1.375rem 1.375rem;
  margin: .5rem 0 0;
}
.partnerkasten > h2 { margin: 0 0 .5rem; font-size: 1.25rem; }
.partner-kennung {
  display: inline-block;
  margin: 0 0 .625rem;
  font-family: var(--zahl);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bernstein);
  border: 1px solid color-mix(in srgb, var(--bernstein) 45%, transparent);
  border-radius: 4px;
  padding: .125rem .4375rem;
}
.partner-vorspann { margin: 0 0 1rem; font-size: .9375rem; color: var(--leise); max-width: var(--spalte); }

.partnerliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.partnerkarte {
  display: grid;
  gap: .25rem;
  align-content: start;
  min-width: 0;
  border: 1px solid var(--glasrand);
  border-radius: 10px;
  background: var(--glas);
  padding: .875rem 1rem 1rem;
}
.pk-form {
  font-family: var(--zahl);
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cyan);
}
.pk-name { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.pk-staerke { font-family: var(--zahl); font-size: .75rem; color: var(--fein); font-variant-numeric: tabular-nums; }
.pk-link {
  margin-top: .625rem;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .8125rem;
  color: var(--cyan);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.pk-link:hover { text-decoration: underline; }
.pk-link:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
svg.extern { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.partner-mehr { margin-top: .75rem; }
.partner-mehr > summary {
  cursor: pointer;
  font-family: var(--zahl);
  font-size: .75rem;
  color: var(--leise);
  padding: .375rem 0;
  list-style: none;
}
.partner-mehr > summary::-webkit-details-marker { display: none; }
.partner-mehr > summary::before { content: "+ "; color: var(--cyan); }
.partner-mehr[open] > summary::before { content: "\2013 "; }
.partner-mehr > summary:hover { color: var(--text); }
.partner-mehr > summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
.partner-mehr .partnerliste { margin-top: .625rem; }

.partner-zwischen {
  margin: 1.5rem 0 .75rem;
  font-family: var(--zahl);
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fein);
  padding-top: 1rem;
  border-top: 1px solid var(--linie);
}
.partner-fuss { margin: 1.125rem 0 0; font-size: .8125rem; line-height: 1.55; color: var(--fein); max-width: var(--spalte); }

/* ─────────────────────────────────── Ähnliche Peptide */

.aehnliche { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin: .5rem 0 0; }
.aehnlich-karte {
  display: grid;
  gap: .3125rem;
  align-content: start;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--glasrand);
  border-radius: 10px;
  background: var(--tiefe);
  padding: .9375rem 1rem;
  transition: border-color .18s, transform .18s;
}
.aehnlich-karte:hover { border-color: color-mix(in srgb, var(--cyan) 50%, transparent); transform: translateY(-2px); }
.aehnlich-karte:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.ae-name { font-family: var(--titel); font-size: 1.0625rem; font-weight: 700; letter-spacing: -.02em; overflow-wrap: anywhere; }
.ae-stufe { font-family: var(--zahl); font-size: .6875rem; color: var(--cyan); }
.ae-stufe.offen { color: var(--fein); }
.ae-grund { font-size: .8125rem; line-height: 1.45; color: var(--leise); }

/* ─────────────────────────────────── Forschungs-Zeitleiste */

.zeitleiste { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: 0; }
.zl-punkt {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0 1.125rem;
  padding: 0 0 1.25rem;
  position: relative;
}
.zl-punkt::before {
  content: "";
  position: absolute;
  left: 4.5rem;
  top: .5rem; bottom: 0;
  width: 1px;
  background: var(--linie);
  transform: translateX(-.5625rem);
}
.zl-punkt:last-child::before { display: none; }
.zl-jahr {
  font-family: var(--zahl);
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
  color: var(--cyan);
  text-align: right;
  position: relative;
}
.zl-jahr::after {
  content: "";
  position: absolute;
  right: -1.1875rem; top: .4375rem;
  width: .4375rem; height: .4375rem;
  border-radius: 50%;
  background: var(--cyan);
}
.zl-inhalt { display: grid; gap: .1875rem; min-width: 0; }
.zl-art { font-family: var(--zahl); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fein); }
.zl-text { font-size: .9375rem; line-height: 1.55; }
.zl-quelle { display: inline-flex; align-items: center; gap: .3125rem; font-size: .8125rem; color: var(--cyan); text-decoration: none; width: fit-content; }
.zl-quelle:hover { text-decoration: underline; }

/* ─────────────────────────────────── Lesefortschritt */

.lesefortschritt {
  position: fixed;
  left: 0; right: 0; top: 0;
  height: 2px;
  z-index: 90;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s;
}
.lesefortschritt.sichtbar { opacity: 1; }
.lesefortschritt i {
  display: block;
  height: 100%;
  background: var(--cyan);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
@media (prefers-reduced-motion: reduce) {
  .lesefortschritt { transition: none; }
}

/* ─────────────────────────────────── Vergleichsseite */

.zaehler-knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; }

.vgl-sucher { position: relative; max-width: 32rem; }
#vgl-treffer {
  position: absolute;
  z-index: 40;
  left: 0; right: 0;
  top: calc(100% + .375rem);
  max-height: 22rem;
  overflow-y: auto;
  background: var(--tiefe);
  border: 1px solid var(--glasrand);
  border-radius: 12px;
  box-shadow: var(--schatten);
}
#vgl-treffer:empty { display: none; }
#vgl-treffer button {
  display: grid;
  width: 100%;
  gap: .125rem;
  text-align: left;
  padding: .75rem 1rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--linie);
  color: var(--text);
  font-family: inherit;
  font-size: .9375rem;
  cursor: pointer;
}
#vgl-treffer button:last-child { border-bottom: 0; }
#vgl-treffer button span { font-family: var(--zahl); font-size: .75rem; color: var(--fein); }
#vgl-treffer button:hover:not(:disabled) { background: color-mix(in srgb, var(--cyan) 12%, transparent); }
#vgl-treffer button:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
#vgl-treffer button:disabled { cursor: default; opacity: .55; }
.vgl-schon { color: var(--cyan) !important; }

.vgl-gewaehlt { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 .5rem; }
.vgl-marke {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid var(--glasrand);
  background: var(--tiefe);
  border-radius: 999px;
  padding: .375rem .5rem .375rem .875rem;
  font-size: .875rem;
}
.vgl-marke button {
  border: 0;
  background: none;
  color: var(--fein);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: .125rem .3125rem;
  border-radius: 50%;
}
.vgl-marke button:hover { color: var(--karmin); background: color-mix(in srgb, var(--karmin) 15%, transparent); }
.vgl-marke button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.vgl-nichts { margin: 0; color: var(--fein); font-size: .9375rem; }

.vgl-rahmen { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: .5rem 0 0; }
table.vgl-tafel { min-width: 34rem; border-collapse: collapse; }
table.vgl-tafel th, table.vgl-tafel td {
  text-align: left;
  vertical-align: top;
  padding: .75rem 1rem .75rem 0;
  border-bottom: 1px solid var(--linie);
  font-size: .875rem;
  line-height: 1.5;
}
table.vgl-tafel thead th { border-bottom: 1px solid var(--glasrand); padding-top: 0; }
table.vgl-tafel thead th a { font-family: var(--titel); font-size: 1.0625rem; font-weight: 700; letter-spacing: -.02em; color: var(--text); text-decoration: none; }
table.vgl-tafel thead th a:hover { color: var(--cyan); }
table.vgl-tafel tbody th {
  font-family: var(--zahl);
  font-size: .6875rem;
  font-weight: 400;
  color: var(--fein);
  width: 10rem;
  padding-right: 1.25rem;
}
table.vgl-tafel ul { margin: 0; padding-left: 1rem; display: grid; gap: .25rem; }
.vgl-leer { color: var(--fein); font-family: var(--zahl); font-size: .75rem; }
.vgl-stufe { font-family: var(--zahl); }
.vgl-form { font-family: var(--zahl); font-size: .6875rem; color: var(--fein); }

.vgl-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.vgl-eintrag {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--glasrand);
  border-radius: 10px;
  background: var(--tiefe);
  padding: .75rem .9375rem;
}
.ve-name { text-decoration: none; color: var(--text); font-weight: 600; min-width: 0; }
.ve-name span { display: block; font-family: var(--zahl); font-size: .6875rem; font-weight: 400; color: var(--fein); margin-top: .125rem; }
.ve-name:hover { color: var(--cyan); }
.ve-tun { display: flex; gap: .375rem; flex-wrap: wrap; }
.vgl-tun { margin: .875rem 0 0; }

@media (max-width: 46rem) {
  .kurz-liste { gap: .625rem 1.25rem; }
  .partnerkasten, .kurzfassung { padding: 1rem 1.0625rem 1.125rem; }
  .partnerliste { grid-template-columns: 1fr; }
  .aehnliche { grid-template-columns: 1fr; }
  .zl-punkt { grid-template-columns: 3.25rem minmax(0, 1fr); gap: 0 .875rem; }
  .zl-punkt::before { left: 3.25rem; }
  table.vgl-tafel tbody th { width: 8rem; }
}

/* ═══════════════════════ Ruhigerer Seitenrhythmus ═══════════════════════

   Bis eben standen auf einer Peptidseite bis zu 17 Hinweiskaesten, davon
   vier Sorten auf praktisch jeder Seite gleich. Was davon zur Sache gehoert,
   sitzt jetzt dort, wo es hingehoert - in der Tabelle, im Fliesstext, in der
   Fusszeile. Als Kasten bleibt nur, was wirklich eine Warnung ist. */

/* Sachinformation im Fliesstext statt im Kasten. */
p.notiz {
  font-size: .875rem;
  line-height: 1.6;
  color: var(--leise);
  border-left: 2px solid var(--linie);
  padding-left: .875rem;
  margin: 1rem 0;
}

/* ─────────────────────────────────── Dosierungstabelle mit Kopfzeile */

.schemablock {
  border: 1px solid var(--glasrand);
  border-radius: var(--radius, 14px);
  overflow: hidden;
  margin: 1.25rem 0;
  background: var(--tiefe);
}
.schemablock .tabelle { margin: 0; padding: 0 1.125rem 1rem; }
.schemablock table { font-size: .875rem; }

.tabellenkopf {
  background: color-mix(in srgb, var(--cyan) 7%, transparent);
  border-bottom: 1px solid var(--glasrand);
  padding: .75rem 1.125rem;
  display: grid;
  gap: .375rem;
}
.tk-zeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: .375rem .75rem; }
.tk-art {
  font-family: var(--zahl);
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cyan);
  border: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent);
  border-radius: 4px;
  padding: .0625rem .375rem;
  flex: none;
}
.tk-wert {
  font-size: .8125rem;
  color: var(--leise);
  overflow-wrap: anywhere;
}
.tk-rechnung {
  font-family: var(--zahl);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.tk-rechnung::before { content: "Berechnungsgrundlage: "; color: var(--fein); }
.tk-beleg { padding-top: .3125rem; border-top: 1px dashed var(--linie); }
.tk-quellen { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3125rem .5rem; }
.tk-marke {
  font-family: var(--zahl);
  font-size: .625rem;
  letter-spacing: .06em;
  color: var(--fein);
}
.tk-quellen a {
  font-family: var(--zahl);
  font-size: .6875rem;
  color: var(--cyan);
  text-decoration: none;
  border: 1px solid var(--glasrand);
  border-radius: 4px;
  padding: .0625rem .375rem;
}
.tk-quellen a:hover { border-color: var(--cyan); }
.tk-quellen a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* Das Sprungziel einer Quelle kurz hervorheben, sonst sucht man in einer
   Liste aus zwanzig Eintraegen. */
.quellen li:target {
  background: color-mix(in srgb, var(--cyan) 10%, transparent);
  border-radius: 8px;
  box-shadow: 0 0 0 .5rem color-mix(in srgb, var(--cyan) 10%, transparent);
}

/* ─────────────────────────────────── Partnerleiste im Seitenkopf */

.partnerleiste {
  display: flex;
  align-items: center;
  gap: .875rem;
  flex-wrap: wrap;
  margin: 1.125rem 0 0;
  padding: .875rem 1rem;
  border: 1px solid color-mix(in srgb, var(--cyan) 38%, transparent);
  border-radius: var(--radius, 14px);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--cyan) 12%, transparent), transparent 72%),
    var(--tiefe);
}
.pl-symbol { display: flex; flex: none; color: var(--cyan); }
.pl-symbol svg.extern { width: 18px; height: 18px; }
.pl-text { display: grid; gap: .125rem; min-width: 0; flex: 1 1 12rem; }
.pl-text b { font-size: .9375rem; line-height: 1.3; }
.pl-text span { font-size: .8125rem; color: var(--leise); overflow-wrap: anywhere; }
.pl-knopf {
  flex: none;
  display: inline-block;
  padding: .5rem .9375rem;
  border-radius: 999px;
  background: var(--cyan);
  color: var(--auf-akzent);
  font-size: .8125rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--cyan);
  transition: filter .16s;
}
.pl-knopf:hover { filter: brightness(1.12); }
.pl-knopf:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* ─────────────────────────────────── Partnerkasten deutlicher */

.partnerkasten {
  border-width: 1px;
  border-color: color-mix(in srgb, var(--cyan) 30%, var(--glasrand));
  padding: 1.5rem 1.5rem 1.625rem;
  box-shadow: var(--schatten);
}
.pk-anbieter {
  font-family: var(--zahl);
  font-size: .6875rem;
  color: var(--fein);
  margin-top: .1875rem;
}
.partnerkarte { padding: 1.125rem 1.25rem 1.25rem; }
.pk-name { font-family: var(--titel); font-size: 1.125rem; font-weight: 700; letter-spacing: -.02em; }
.pk-form {
  align-self: start;
  border: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent);
  border-radius: 4px;
  padding: .0625rem .4375rem;
  margin-bottom: .25rem;
}
/* Aus dem Textlink wird eine echte Schaltflaeche - der Weg nach draussen
   soll als solcher erkennbar sein. */
.pk-link {
  margin-top: .875rem;
  justify-content: center;
  padding: .5625rem .875rem;
  border-radius: 8px;
  background: var(--cyan);
  color: var(--auf-akzent);
  font-weight: 600;
  font-size: .875rem;
  transition: filter .16s;
}
.pk-link:hover { filter: brightness(1.12); text-decoration: none; }

/* ─────────────────────────────────── Einordnung auf der Startseite */

.nutzungshinweis .spalte { max-width: 46rem; }
.einordnung {
  display: grid;
  gap: 1.25rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linie);
}
.einordnung > div { display: grid; gap: .3125rem; align-content: start; min-width: 0; }
.einordnung b {
  font-family: var(--titel);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.015em;
}
.einordnung span { font-size: .9375rem; line-height: 1.55; color: var(--leise); }

/* Fusszeile: der Hinweis ist Text, keine Meldung - also normal lesbar. */
.fuss p:first-child { font-size: .875rem; color: var(--leise); max-width: 58rem; }
.fuss p:first-child a { color: var(--cyan); text-decoration: none; border-bottom: 1px solid var(--linie); }
.fuss p:first-child a:hover { border-bottom-color: var(--cyan); }

/* ─────────────────────────────────── Hinweis beim ersten Besuch */

dialog.infohinweis {
  max-width: 34rem;
  width: calc(100% - 2rem);
  border: 1px solid var(--glasrand);
  border-radius: var(--radius, 14px);
  background: var(--tiefe);
  color: var(--text);
  padding: 1.75rem 1.75rem 1.5rem;
  box-shadow: var(--schatten);
  max-height: calc(100dvh - 3rem);
  overflow-y: auto;
}
dialog.infohinweis::backdrop { background: rgba(2, 6, 12, .72); backdrop-filter: blur(3px); }
dialog.infohinweis h2 {
  margin: 0 0 .75rem;
  font-size: 1.375rem;
  letter-spacing: -.02em;
}
dialog.infohinweis p {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--leise);
}
.ih-tun {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
  margin-top: 1.375rem;
}
.ih-tun .knopf.haupt { font-size: .9375rem; }
.ih-weg { font-size: .8125rem; color: var(--fein); text-decoration: none; border-bottom: 1px solid var(--linie); }
.ih-weg:hover { color: var(--leise); }
.ih-weg:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  dialog.infohinweis[open] { animation: ih-auf .22s ease-out; }
  @keyframes ih-auf { from { opacity: 0; transform: translateY(8px); } }
}

@media (max-width: 46rem) {
  .schemablock .tabelle { padding: 0 .875rem .875rem; }
  .tabellenkopf { padding: .625rem .875rem; }
  .partnerkasten { padding: 1.125rem 1.125rem 1.25rem; }
  .partnerleiste { padding: .8125rem .875rem; gap: .625rem .75rem; }
  .pl-knopf { flex: 1 1 100%; text-align: center; }
  dialog.infohinweis { padding: 1.25rem 1.25rem 1.125rem; }
  dialog.infohinweis h2 { font-size: 1.1875rem; }
  .ih-tun .knopf.haupt { flex: 1 1 100%; text-align: center; }
}

/* ═══════════════════ Startseite: Nutzen zuerst, dann die Wege ═══════════

   Die Ueberschrift war "Welches Peptid?" - eine Frage, die schon voraussetzt,
   dass man eine Antwort hat. Jetzt steht dort, wozu die Sammlung gut ist.
   Das ist ein laengerer Satz, also braucht er andere Masse als die alte
   Zweiwortzeile: kleinere Schrift, mehr Zeilenbreite, ausgeglichener Umbruch. */

.auftakt h1 {
  font-size: clamp(1.875rem, 5.2vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -.035em;
  max-width: 22ch;
  text-wrap: balance;
}
.auftakt h1 br { display: none; }
@media (min-width: 48rem) { .auftakt h1 br { display: inline; } }

/* Die alte Frage bleibt - als Beschriftung des Suchfelds, wo sie hingehoert. */
.suchfrage {
  display: block;
  font-family: var(--titel);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
  margin-bottom: .5rem;
}

/* ─────────────────────────────────── Direkteinstiege */

.einstiegsbahn {
  display: flex;
  gap: .625rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: .25rem .25rem .75rem;
  margin: 1rem -.25rem 0;
  scrollbar-width: thin;
}
.einstieg {
  flex: 0 0 auto;
  min-width: 0;
  max-width: 15rem;
  display: grid;
  gap: .1875rem;
  align-content: start;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--glasrand);
  border-radius: 999px;
  background: var(--tiefe);
  padding: .5rem 1rem .5625rem;
  transition: border-color .18s, transform .18s;
}
.einstieg:hover { border-color: color-mix(in srgb, var(--cyan) 50%, transparent); transform: translateY(-1px); }
.einstieg:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.einstieg b { font-size: .875rem; font-weight: 600; white-space: nowrap; }
.einstieg span { font-family: var(--zahl); font-size: .6875rem; color: var(--fein); white-space: nowrap; }

/* ─────────────────────────────────── Themenkarten */

.themenraster {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  margin: 1.25rem 0 1rem;
}
.themenkarte {
  display: grid;
  gap: .375rem;
  align-content: start;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--glasrand);
  border-radius: 12px;
  background: var(--tiefe);
  padding: 1rem 1.125rem 1.125rem;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.themenkarte:hover { border-color: color-mix(in srgb, var(--cyan) 50%, transparent); transform: translateY(-2px); box-shadow: var(--glut); }
.themenkarte:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
svg.themenbild {
  width: 26px; height: 26px;
  fill: none; stroke: var(--cyan); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  margin-bottom: .125rem;
}
.themenkarte b {
  font-family: var(--titel);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.thk-anzahl { font-family: var(--zahl); font-size: .6875rem; color: var(--fein); }

/* ─────────────────────────────────── Verlauf und Merkliste */

.lokalraster {
  display: grid;
  gap: .625rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin-top: .875rem;
}
.lokalkarte {
  display: grid;
  gap: .1875rem;
  align-content: start;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--glasrand);
  border-radius: 10px;
  background: var(--tiefe);
  padding: .75rem .9375rem .8125rem;
  transition: border-color .18s, transform .18s;
}
.lokalkarte:hover { border-color: color-mix(in srgb, var(--cyan) 50%, transparent); transform: translateY(-1px); }
.lokalkarte:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.lokalkarte b { font-size: .9375rem; font-weight: 600; overflow-wrap: anywhere; }
.lokalkarte span { font-family: var(--zahl); font-size: .6875rem; color: var(--fein); }
.lokal-tun { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: .875rem; }

/* ─────────────────────────────────── Suchtreffer mit mehr Aussage */

#startergebnis a {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .1875rem .75rem;
  align-items: start;
}
.tr-kopf { grid-column: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: .375rem; min-width: 0; }
.tr-kopf b { font-weight: 600; }
.tr-auch { font-family: var(--zahl); font-size: .6875rem; color: var(--fein); }
#startergebnis a .ministufe { grid-row: 1; grid-column: 2; }
.tr-neben { grid-column: 1; font-family: var(--zahl); font-size: .75rem; color: var(--fein); overflow-wrap: anywhere; }
.tr-extern {
  grid-column: 1;
  justify-self: start;
  margin-top: .25rem;
  font-family: var(--zahl);
  font-size: .625rem;
  letter-spacing: .04em;
  color: var(--cyan);
  border: 1px solid color-mix(in srgb, var(--cyan) 38%, transparent);
  border-radius: 4px;
  padding: .0625rem .375rem;
}
#startergebnis a.tr-alle {
  display: block;
  font-family: var(--zahl);
  font-size: .8125rem;
  color: var(--cyan);
  text-align: center;
  border-top: 1px solid var(--glasrand);
}
#startsuche-status a { color: var(--cyan); }

/* ─────────────────────────────────── "Mehr" in der unteren Navigation */

.mehrknopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1875rem;
  padding: .5rem 0 .4375rem;
  background: none;
  border: 0;
  color: var(--fein);
  font-family: inherit;
  font-size: .625rem;
  letter-spacing: .01em;
  cursor: pointer;
  min-width: 0;
}
.mehrknopf svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.mehrknopf[aria-expanded="true"], .mehrknopf[aria-current] { color: var(--cyan); }
.mehrknopf:focus-visible { outline: 2px solid var(--cyan); outline-offset: -3px; }

.mehrmenue {
  position: absolute;
  right: .5rem;
  bottom: calc(100% + .5rem);
  min-width: 13rem;
  background: var(--tiefe);
  border: 1px solid var(--glasrand);
  border-radius: 12px;
  box-shadow: var(--schatten);
  padding: .375rem;
  display: grid;
  gap: .125rem;
}
.mehrmenue[hidden] { display: none; }
/* Das Menue liegt innerhalb von .tableiste und erbt sonst deren
   Spaltenausrichtung - die Symbole staenden dann ueber dem Text wie in der
   Leiste selbst. Hier gehoert beides nebeneinander. */
.mehrmenue a {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: .625rem;
  padding: .625rem .75rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  font-size: .9375rem;
  letter-spacing: normal;
}
.mehrmenue a svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: var(--fein); }
.mehrmenue a:hover { background: var(--glas); }
.mehrmenue a:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.mehrmenue a[aria-current] { color: var(--cyan); }
.mehrmenue a[aria-current] svg { color: var(--cyan); }

/* ─────────────────────────────────── Quellenbilanz */

.quellenbilanz {
  display: grid;
  gap: .75rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  margin: 0 0 1.5rem;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--glasrand);
  border-radius: var(--radius, 14px);
  background: var(--tiefe);
}
.qb-zahl { display: grid; gap: .125rem; min-width: 0; }
.qb-zahl b {
  font-family: var(--zahl);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--cyan);
}
.qb-zahl span { font-size: .75rem; color: var(--leise); line-height: 1.35; }
.qb-zahl.gesamt b { color: var(--text); }
.quellenbilanz .verweis { grid-column: 1 / -1; margin: .25rem 0 0; }

@media (max-width: 46rem) {
  .themenraster { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: .625rem; }
  .themenkarte { padding: .875rem .9375rem 1rem; }
  .lokalraster { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
  .quellenbilanz { padding: .9375rem 1rem; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); }
  .qb-zahl b { font-size: 1.25rem; }
}

/* ═══════════════════════ Statusmarken, Fokus, Werkzeuge ═════════════════

   Eine Statusmarke traegt Symbol UND Text. Die Farbe ist Zugabe, nie die
   Aussage - wer sie nicht unterscheiden kann, liest denselben Satz. Und es
   gibt keinen gruenen Haken: ein Haken liest sich wie eine Freigabe, und
   freigegeben ist hier gar nichts. */

.statusleiste { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: 1rem; }
.statusmarke {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .75rem;
  line-height: 1.3;
  padding: .25rem .5rem .25rem .4375rem;
  border: 1px solid var(--glasrand);
  border-radius: 999px;
  color: var(--leise);
  background: var(--tiefe);
}
.statusmarke svg {
  width: 14px; height: 14px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--fein);
}
.statusmarke.gut { border-color: color-mix(in srgb, var(--gruen) 42%, transparent); }
.statusmarke.gut svg { color: var(--gruen); }
.statusmarke.mittel { border-color: color-mix(in srgb, var(--bernstein) 42%, transparent); }
.statusmarke.mittel svg { color: var(--bernstein); }
.statusmarke.schwach { border-color: color-mix(in srgb, var(--karmin) 34%, transparent); }
.statusmarke.schwach svg { color: var(--karmin); }

/* ─────────────────────────────────── Im Fokus */

.fokuskarte {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  border: 1px solid var(--glasrand);
  border-radius: var(--radius, 14px);
  background: var(--tiefe);
  padding: 1.5rem;
  margin-top: .75rem;
}
@media (min-width: 46rem) {
  .fokuskarte { grid-template-columns: minmax(0, 1fr) 15rem; align-items: center; }
}
.fk-text { min-width: 0; display: grid; gap: .625rem; align-content: start; }
.fokuskarte h2 { margin: 0; font-size: clamp(1.5rem, 4vw, 2rem); letter-spacing: -.03em; }
.fokuskarte h2 a { color: inherit; text-decoration: none; }
.fokuskarte h2 a:hover { color: var(--cyan); }
.fk-zweck { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--leise); max-width: 46ch; }
.fk-werte {
  margin: .25rem 0 0;
  display: grid;
  gap: .625rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  padding-top: .875rem;
  border-top: 1px solid var(--linie);
}
.fk-wert { display: grid; gap: .125rem; min-width: 0; }
.fk-wert dt { font-family: var(--zahl); font-size: .625rem; letter-spacing: .06em; text-transform: uppercase; color: var(--fein); }
.fk-wert dd { margin: 0; font-size: .875rem; line-height: 1.4; overflow-wrap: anywhere; }
.fk-tun { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem .875rem; margin: .875rem 0 0; }
.fk-extern {
  font-family: var(--zahl);
  font-size: .6875rem;
  color: var(--cyan);
  border: 1px solid color-mix(in srgb, var(--cyan) 38%, transparent);
  border-radius: 4px;
  padding: .125rem .4375rem;
}
.fk-bild { margin: 0; }
.fk-bild img { display: block; width: 100%; height: auto; border-radius: 12px; }

/* ─────────────────────────────────── Teilen und Drucken */

.werkzeuge { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: .75rem; }
.wz-meldung { font-size: .8125rem; color: var(--gruen); }
.wz-meldung:empty { display: none; }

/* ─────────────────────────────────── Abschnittsanzeige und "Nach oben" */

.abschnittstand {
  margin: .5rem 0 0;
  font-family: var(--zahl);
  font-size: .6875rem;
  color: var(--fein);
  letter-spacing: .02em;
}

.nachoben {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 60;
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--glasrand);
  background: color-mix(in srgb, var(--tiefe) 92%, transparent);
  backdrop-filter: blur(10px);
  color: var(--leise);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(.5rem);
  transition: opacity .22s, transform .22s, color .16s, border-color .16s;
}
.nachoben.sichtbar { opacity: 1; pointer-events: auto; transform: none; }
.nachoben svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nachoben:hover { color: var(--cyan); border-color: var(--cyan); }
.nachoben:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; opacity: 1; pointer-events: auto; transform: none; }

/* Am Handy sitzt unten die Navigation - der Knopf darf sie nicht verdecken. */
@media (max-width: 52rem) {
  .nachoben { bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
}

/* ─────────────────────────────────── Quellenkarte am Tabellenmarker */

.quellenkarte {
  position: relative;
  flex-basis: 100%;
  margin-top: .5rem;
  display: grid;
  gap: .25rem;
  padding: .875rem 2.25rem .875rem 1rem;
  border: 1px solid var(--glasrand);
  border-radius: 10px;
  background: var(--glas);
  box-shadow: var(--schatten);
}
.qk-art { font-family: var(--zahl); font-size: .625rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cyan); }
.quellenkarte b { font-size: .875rem; line-height: 1.35; }
.quellenkarte > span { font-size: .8125rem; line-height: 1.5; color: var(--leise); }
.quellenkarte > a { font-size: .8125rem; color: var(--cyan); text-decoration: none; width: fit-content; }
.quellenkarte > a:hover { text-decoration: underline; }
.qk-zu {
  position: absolute; top: .375rem; right: .5rem;
  width: 1.75rem; height: 1.75rem;
  border: 0; background: none; color: var(--fein);
  font-size: 1.125rem; line-height: 1; cursor: pointer; border-radius: 50%;
}
.qk-zu:hover { color: var(--text); background: var(--tiefe); }
.qk-zu:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }

/* ═══════════════════════════ Mikroanimationen ═══════════════════════════

   Nur dort, wo sie eine Zustandsaenderung begreiflich machen: eine Karte
   hebt sich beim Zeigen, Suchtreffer blenden auf, das Vialbild wechselt
   weich, Knoepfe reagieren. Nichts laeuft dauerhaft, nichts blinkt, nichts
   zoomt. Und bei prefers-reduced-motion faellt alles davon weg - Funktion
   haengt an keiner Stelle daran. */

#startergebnis a { animation: treffer-auf .16s ease-out both; }
@keyframes treffer-auf { from { opacity: 0; transform: translateY(-2px); } }

.produktbild img, .fk-bild img { transition: opacity .2s ease-out; }

.knopf, .pl-knopf, .pk-link { transition: background .16s, border-color .16s, color .16s, transform .12s; }
.knopf:active, .pl-knopf:active, .pk-link:active { transform: translateY(1px); }

.profil-sprosse { transition: background .18s, border-color .18s; }

@media (prefers-reduced-motion: reduce) {
  #startergebnis a { animation: none; }
  .nachoben { transition: none; }
  .kachel, .themenkarte, .lokalkarte, .aehnlich-karte, .einstieg,
  .knopf, .pl-knopf, .pk-link { transition: none; }
  .kachel:hover, .themenkarte:hover, .lokalkarte:hover,
  .aehnlich-karte:hover, .einstieg:hover { transform: none; }
  .knopf:active, .pl-knopf:active, .pk-link:active { transform: none; }
  .produktbild img, .fk-bild img { transition: none; }
}

/* ═══════════════════════════ Druckansicht ═══════════════════════════════

   Papier kennt keine Bedienelemente. Was bleibt, ist der Inhalt: Titel,
   Kurzfassung, Datenlage, Dosierungstabellen, Quellen und der
   Nutzungshinweis. Was verschwindet, ist alles, worauf man klicken wuerde. */

@media print {
  .kopf, .tableiste, .sprungmarken, .inhalt, .filter,
  .wortmarke, .merkleiste, .werkzeuge, .partnerleiste, .partnerkasten,
  .nachoben, .lesefortschritt, .abschnittstand, .vialwahl, .rechnersprung,
  .aehnliche, .statusleiste, dialog.infohinweis, .mehrmenue,
  .startsuche, .knoepfe, .einstiegsbahn, .themenraster, .lokalraster {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
    padding: 0 !important;
    font-size: 11pt;
  }
  body::before { display: none !important; }

  main.bahn { animation: none; max-width: none; padding: 0; }

  h1 { font-size: 20pt; }
  h2 { font-size: 14pt; page-break-after: avoid; }
  h3 { font-size: 12pt; page-break-after: avoid; }

  /* Aufgeklappt drucken - zugeklappte Abschnitte waeren auf Papier verloren. */
  details { display: block !important; }
  details > summary { display: none !important; }

  .kurzfassung, .schemablock, .evidenz, .kennwert, .quellenbilanz {
    border: 1px solid #999 !important;
    background: none !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }
  .tabellenkopf { background: none !important; border-bottom: 1px solid #999 !important; }
  .tk-art { border-color: #999 !important; color: #000 !important; }
  table { page-break-inside: avoid; }
  .vialteil[hidden] { display: none !important; }

  .quellen li { page-break-inside: avoid; }
  .quellen a[href]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #444; }

  .fuss { border-top: 1px solid #999; margin-top: 1.5rem; color: #000 !important; }
  .fuss a::after { content: ""; }
}


/* ═══════════════════════ Wortmarke im Kopf ══════════════════════════════

   Hier sass bis zur Umstellung auf eine Marke ein Aufklappmenue mit drei
   Designs. Geblieben ist die Wortmarke selbst - jetzt als Verweis auf die
   Startseite. Der Schriftzug ist echter Text: "Pepti" in der Textfarbe,
   "kon" im Akzent.

   --radius stand frueher in marken.css, die es nicht mehr gibt. app.css
   nutzt die Variable an sieben Stellen, deshalb steht sie jetzt hier. */

:root { --radius: 14px; }

.wortmarke {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: none;
  padding: .3125rem .5rem .3125rem .375rem;
  margin-left: -.375rem;
  border: 1px solid transparent;
  border-radius: calc(var(--radius) * .75);
  text-decoration: none;
  color: var(--text);
}
.wortmarke:hover { border-color: var(--glasrand); background: var(--glas); }
.wortmarke:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
/* Die Sperrmarke ist ein Bild: Zeichen und Schriftzug gehoeren im gelieferten
   Logo zusammen und werden nicht getrennt nachgebaut. Die Hoehe steuert, die
   Breite folgt dem Seitenverhaeltnis der Datei. */
.wortmarke img { display: block; height: 32px; width: auto; }

@media (max-width: 30rem) {
  .wortmarke img { height: 27px; }
}

/* Harter Zeilenumbruch nur dort, wo die Zeile auch wirklich lang genug ist.
   Auf schmalen Displays bricht die Uberschrift sonst mitten im Satz um und
   "einordnen." und "Mengen" stossen ohne Leerzeichen aneinander. Das
   Leerzeichen steht deshalb im Quelltext hinter dem <br>: am Zeilenanfang
   wird es ohnehin verworfen, beim ausgeblendeten <br> haelt es die Worte
   auseinander. */
@media (max-width: 52rem) {
  br.satzumbruch { display: none; }
}

/* Rechtliche Seiten und ihre unaufdringliche, aber jederzeit erkennbare
   Verlinkung im Footer. */
.rechtslinks {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1rem;
  margin-top: .75rem;
}
.rechtslinks a { color: inherit; text-underline-offset: .2em; }
.rechtslinks a[aria-current="page"] { color: var(--cyan); }
.rechtliches { max-width: 58rem; }
.rechtliches .auftakt.kompakt { min-height: 0; padding-bottom: 1.5rem; }
.rechtliches .teil { max-width: 52rem; }
.anschrift { font-style: normal; line-height: 1.75; }

/* Werbekennzeichnung der Produktlinks in der Vergleichstafel - gleiche Optik
   wie die Formangabe daneben, aber in eigener Zeile direkt am Link. */
.vgl-werbung { display: block; font-family: var(--zahl); font-size: .6875rem; color: var(--fein); }

/* Themenseiten: ein langes Wort in der Ueberschrift (z. B. "Wachstumshormon")
   darf den Flexbereich neben dem Symbol nicht ueber die Bildschirmbreite
   hinaus aufweiten. Ohne min-width: 0 waechst das Flex-Kind mindestens auf
   die Breite seines laengsten unteilbaren Wortes. */
.zielkopfbereich > div { min-width: 0; }
.zielkopfbereich h1 { overflow-wrap: anywhere; }