/* ════════════════════════════════════════════════════════════════════
   GUIDE-LEISTEN - eine Quelle fuer beide Guides
   Gehoert zusammen mit assets/guide-nav.js. Beides einbinden oder keines.

   Was hier drin steht: die klebende Anker-Leiste, ihre Chips, der
   Nach-oben-Knopf und die Sprungziel-Abstaende. Bis zum 27.08.2026
   standen diese ~30 Zeilen zweimal im Repo (supp-guide + bluttestliste)
   und waren bereits auseinandergelaufen - die Bluttestliste hatte die
   ausblendende rechte Kante (.hat-mehr), der Supp-Guide nicht.
   Dasselbe Muster wie assets/footer.js: nicht zwei Kopien angleichen,
   sondern die Kopie abschaffen.

   ── EINBINDEN: VOR dem seiten-eigenen <style> ────────────────────────
     <link rel="stylesheet" href="../assets/guide-nav.css">
     <style> ... seiten-eigene Regeln ... </style>

   🔑 DIE REIHENFOLGE IST DER GANZE TRICK, nicht Kosmetik. Diese Datei
   haelt nur den GEMEINSAMEN Nenner; wo eine Seite bewusst abweicht
   (bis 29.09.2026 z. B. Supp-Guide: Chips in Grossbuchstaben - seit C-320 B weg), steht die Abweichung lokal
   und gewinnt bei gleicher Spezifitaet - aber NUR, weil sie spaeter
   kommt. Waere das hier in hub-theme.css gewandert, waere es
   umgekehrt: hub-theme.css laedt auf allen sechs Seiten NACH dem
   Inline-<style> (gemessen 27.08.2026 an allen sechs Dateien), haette
   die lokalen Ausnahmen also stillschweigend ueberschrieben.

   ⚠️ NICHT nach hub-theme.css verschieben. Zweiter Grund: `section[id]`
   ist dort NICHT inert - der Trainingsplan hat ein `<section id>` ohne
   eigenes scroll-margin und wuerde einen Abstand erben, den niemand
   bestellt hat.

   Seiten-eigen bleibt bewusst:
     supp-guide     .picks-basics-lbl + #gewinnspiel (weitere Sprungziele,
                    #gewinnspiel ist keine <section>), body.cart-open
                    .back-top (hebt den Knopf ueber die Warenkorb-Leiste),
                    (Chip-Typografie bis 29.09.2026, C-320 B)
     bluttestliste  nichts - sie faehrt den gemeinsamen Nenner
     beide          die @media print-Listen (sie zaehlen seiten-eigene
                    Elemente mit auf)
   ════════════════════════════════════════════════════════════════════ */

/* ── Klebende Anker-Leiste ──────────────────────────────────────────
   Klebt an der Unterkante der Topbar. Deren Hoehe misst guide-nav.js
   in --topbar-h; der Rueckfall 0px ist der sichere Ruhezustand, falls
   das Skript nicht ankommt (Leiste klebt dann oben statt unter der
   Topbar - unschoen, aber nichts bricht). */
nav.anchor-nav {
  position: sticky; top: var(--topbar-h, 0px); z-index: 30;
  display: flex; flex-wrap: nowrap; gap: 8px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: rgba(15, 14, 12, .94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  padding: 10px 2px; border-bottom: 1px solid var(--border); margin-bottom: 18px;
  scrollbar-width: none;   /* Chip-Wischzeile bewusst ohne Balken - Ausnahme von der Scrollbar-Regel, waere hier nur Rauschen */
}
nav.anchor-nav::-webkit-scrollbar { display: none; }

nav.anchor-nav a {
  flex-shrink: 0;
  /* 13.09.2026 (Nutzer-Review N-028): Schrift 11 -> 12.5 px, Polsterung groesser -
     die Sprung-Chips waren die kleinste Bedienflaeche der Guides. Farben unveraendert. */
  font-size: 12.5px; letter-spacing: .4px; color: var(--text-dim);
  padding: 9px 14px; min-height: 36px; display: inline-flex; align-items: center;
  border: 1px solid var(--border); border-radius: 999px;
  transition: all .15s;
  position: relative;
}
/* S-2 A (Davids Wahl, 30.09.2026): Tippflaeche 39,5 -> 45,5 px, Aussehen unveraendert -
   ein unsichtbares ::before, wie beim Video-Umschalter des Peptid-Rechners.
   ⚠️ Hoechstens 10 px: die Leiste ist ein Scroll-Container (overflow-x) und schneidet
   alles ab, was ueber ihren Innenabstand (10 px oben und unten) hinausragt.
   -4px, weil das ::before von der Innenkante des 1-px-Rands misst: 3 px ueber den Chip hinaus. */
nav.anchor-nav a::before { content: ''; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
@media (hover: hover) {
  nav.anchor-nav a:hover { color: var(--gold); border-color: var(--gold-dim); }
}

/* 🔴 Der aktive Chip MUSS markiert sein, sonst kostet die Wischleiste mehr,
   als sie bringt: Bei 375px passen nur 4 von 8-9 Chips ins Bild, und der
   Balken ist bewusst ausgeblendet. Ohne Markierung und ohne Mitlaufen saehe
   der Leser drei Woerter und keinen Hinweis, dass mehr existiert. Das
   Scroll-Spy in guide-nav.js schiebt den aktiven Chip in die Mitte; DIESE
   Bewegung ist der eigentliche Hinweis darauf, dass die Leiste wischbar ist. */
nav.anchor-nav a.active { color: var(--gold); border-color: var(--gold-dim); background: var(--gold-soft); }

/* Statischer Zusatzhinweis: die rechte Kante blendet aus, solange rechts noch
   etwas liegt. Die Klasse setzt guide-nav.js. */
nav.anchor-nav.hat-mehr {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
}

/* ── Sprungziele nicht unter den klebenden Leisten verstecken ───────
   ⚠️ topbar.js spritzt bereits `html{scroll-padding-top:45px}` ein - beides
   ADDIERT sich. Mit den urspruenglichen 62px landete die Sektion 53px unter
   der Leiste, mit totem Raum darueber (nachgemessen 26.08.2026, gleicher
   Befund in beiden Guides). Leisten zusammen 88px (Topbar 34 + Nav 54);
   45 + 34 + 17 = 96 laesst 8px Luft. */
section[id] { scroll-margin-top: calc(var(--topbar-h, 0px) + 17px); }

/* ── Nach-oben-Knopf ────────────────────────────────────────────────
   13,5 Bildschirme ohne Rueckweg waren zu viel. 44x44px, also auf Anhieb
   treffbar. Sichtbar wird er erst ab 900px Scroll - das schaltet
   guide-nav.js ueber das hidden-Attribut. */
/* ↩️ C-348: Der Knopf lag mit 44 px und 16 px Abstand genau ueber den
   rechtsbuendigen Grenzwerten der Bluttestliste - also ueber den Zahlen, um
   derentwillen man die Seite ueberhaupt liest. Jetzt 40 px und enger an der Ecke;
   das bleibt ueber dem WCAG-2.2-Mindestmass von 24 px, das dieses Repo auch sonst
   als Grenze fuehrt (siehe assets/tests/guides-layout.js).
   Dazu halbdurchsichtig im Ruhezustand: er ist ein Hilfsmittel, kein Inhalt -
   bei Beruehrung und Tastatur-Fokus steht er wieder voll da. */
/* ↩️ C-323 (14.09.2026): Der Knopf klebte starr am FENSTERrand. Auf einem
   1920er-Bildschirm sass er damit rund 590 px rechts neben der 720-px-Spalte -
   weit weg von dem Text, zu dem er gehoert, und im Blickfeld von niemandem.
   Ab 1180 px rueckt er an die rechte Kante der Inhaltsspalte heran:
   50% ist die Bildmitte, 360 px die halbe Spalte, 12 px Luft daneben.
   Darunter (Tablet, Handy) bleibt es beim Fensterrand - dort IST die Spalte
   das Fenster. Zusammen mit C-348 aus Paket 4, das Groesse und Deckkraft
   gesetzt hat; beides gehoert an dieselbe Regel, nicht in zwei uebereinander. */
.back-top {
  position: fixed; right: 10px; bottom: 12px; z-index: 39;
  width: 40px; height: 40px; border-radius: 50%;
  opacity: .72; transition: opacity .15s;
  border: 1px solid var(--gold-dim); background: rgba(22, 21, 19, .9);
  color: var(--gold); font-size: 18px; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
@media (hover: hover) {
  .back-top:hover { opacity: 1; border-color: var(--gold); }
}
/* Fokus NICHT in den hover-Block: sonst haette die Tastatur-Bedienung auf
   Touch-Geraeten gar keine sichtbare Markierung. */
.back-top:focus-visible { opacity: 1; border-color: var(--gold); outline: 2px solid var(--gold); outline-offset: 2px; }
@media (min-width: 1180px) { .back-top { right: calc(50% - 360px - 52px); } }

/* ── C-311 + C-318: wann der Knopf ueberhaupt dasteht ──────────────────
   C-311: Er stand ab 900 px Scroll DAUERHAFT ueber dem Kartentext - auch beim
   Runterlesen, wo ihn niemand braucht. Jetzt traegt er beim Runterscrollen nur
   noch eine schwache Deckkraft und wird erst beim Hochscrollen wieder voll
   sichtbar: Wer hochscrollt, will nach oben.
   C-318: Sobald der Footer im Bild ist, verschwindet er ganz - dort klebte er
   direkt neben dem Gewinnspiel-Link (Supp-Guide) bzw. den Rechtslinks
   (Blutwerte-Guide), also ausgerechnet neben Pflichtangaben.
   ⚠️ `.back-top[hidden]` braucht kein !important, weil die Regel oben kein
   `display` setzt - der Knopf ist im Ruhezustand ueber das Attribut versteckt.
   Wer hier spaeter ein display ergaenzt, muss das mitdenken. */
.back-top.ist-abwaerts { opacity: .28; }
.back-top.ist-fussnah { opacity: 0; pointer-events: none; }
/* S-5 A (Davids Wahl, 30.09.2026): Tippflaeche 44 px, sichtbar bleibt er 40 px (Groesse aus
   C-348). Das ::before misst von der Innenkante des 1-px-Rands: (44 - 40) / 2 + 1 = 3 px.
   pointer-events erbt es vom Knopf - .ist-fussnah (hier) und .ist-abwaerts (Trainingsplan)
   schalten die Flaeche also mit ab. */
.back-top::before { content: ""; position: absolute; top: -3px; right: -3px; bottom: -3px; left: -3px; }
@media (prefers-reduced-motion: reduce) { .back-top { transition: none; } }