/* Die Lesenavigation: ein Baustein für die Artikel der Neuigkeiten und die
   drei Rechtsseiten, nach der Leinwand „Honeypod Lesenavigation“ (Claude
   Design, 25.10.2026). Oben ein Ring mit dem Fortschritt und der Lesezeit,
   die noch bleibt. Darunter die Abschnitte mit einer Spur, die sich beim
   Lesen füllt. Dann „Link kopieren“, die nächsten Ziele und „Nach oben“.

   Breit klebt sie rechts neben dem Text. Schmal steht unter dem Kopf eine
   Leiste aus Glas. „Inhalt“ öffnet dort denselben Baustein als Blatt von
   unten. Gebaut wird alles von js/lesenavigation.js, in der Seite steht nur
   <aside class="lesenav">.

   Die Linien und Punkte tragen die Ränder der App: --border als Spur,
   --border-2 als Punkt, der noch nicht gelesen ist. */

:root {
  --ln-spur: #303439;
  --ln-punkt: #3c4147;
  --ln-zeile: rgba(234, 180, 74, 0.10);
  --ln-hinterlegt: rgba(234, 180, 74, 0.08);
  --ln-schleier: rgba(0, 0, 0, 0.5);
  --ln-blatt-schatten: 0 -24px 60px rgba(0, 0, 0, 0.45);
  /* Der Grund hinter dem Baustein. Die Punkte stanzen sich mit ihm aus der Spur. */
  --ln-grund: var(--grund);
}
:root[data-thema="hell"] {
  --ln-spur: #e3e3e6;
  --ln-punkt: #c9cace;
  --ln-zeile: rgba(234, 180, 74, 0.14);
  --ln-hinterlegt: rgba(234, 180, 74, 0.12);
  --ln-schleier: rgba(0, 0, 0, 0.24);
  --ln-blatt-schatten: 0 -24px 60px rgba(24, 24, 27, 0.16);
  --ln-grund: var(--grund);
}

/* ── Der Baustein ────────────────────────────────────────── */
.ln { display: flex; flex-direction: column; gap: 22px; color: var(--text); }

.ln-kopf { display: flex; align-items: center; gap: 12px; }
.ln-ring { flex: none; width: 30px; height: 30px; transform: rotate(-90deg); overflow: visible; }
.ln-ring circle { fill: none; stroke-width: 3; }
.ln-ring-spur { stroke: var(--ln-spur); }
.ln-ring-wert { stroke: var(--honig); stroke-linecap: round; transition: opacity 200ms var(--kurve); }
.ln-ring-wert[data-leer] { opacity: 0; }
.ln-kopf-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ln-titel { font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.ln-rest { font-size: 13.5px; color: var(--text-2); white-space: nowrap; }
.ln-prozent { margin-left: auto; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Die Abschnitte. Jede Zeile trägt ihr Stück der Spur, gefüllt bis
   --fuell. Der Punkt steht auf der ersten Zeile des Namens. */
.ln-abschnitte { list-style: none; display: flex; flex-direction: column; padding-left: 16px; }
.ln-zeile { position: relative; }
.ln-zeile::before {
  content: ""; position: absolute; left: -12px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(var(--honig), var(--honig)) top left / 100% var(--fuell, 0%) no-repeat, var(--ln-spur);
}
.ln-zeile::after {
  content: ""; position: absolute; left: -15px; top: 14px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ln-punkt); box-shadow: 0 0 0 3px var(--ln-grund);
  transition: background-color 200ms var(--kurve);
}
.ln-zeile[data-zustand="vorbei"]::after, .ln-zeile[data-zustand="jetzt"]::after { background: var(--honig); }
.ln-verweis {
  display: flex; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px;
  background: transparent; font: inherit; text-align: left; color: var(--text-2); cursor: pointer;
  transition: background-color 200ms var(--kurve), color 200ms var(--kurve);
}
.ln-verweis:hover { color: var(--text); }
.ln-zeile[data-zustand="vorbei"] .ln-verweis { color: var(--text); }
.ln-zeile[data-zustand="jetzt"] .ln-verweis { color: var(--text); background: var(--ln-zeile); }
.ln-nr { flex: none; min-width: 14px; font-size: 13.5px; line-height: 1.45; font-variant-numeric: tabular-nums; color: var(--text-2); }
.ln-zeile[data-zustand="jetzt"] .ln-nr { color: var(--verweis); }
.ln-name { font-size: 14.5px; line-height: 1.45; text-wrap: pretty; }
.ln-zeile[data-zustand="jetzt"] .ln-name { font-weight: 600; }

/* „Link kopieren“ mit der Sprungmarke daneben. Ein Klick auf die Adresse
   markiert sie ganz, falls der Browser das Kopieren verweigert. */
.ln-link { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; }
.ln-kopieren {
  flex: none; height: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 0 11px;
  border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--kante);
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; cursor: pointer;
  transition: background-color 200ms var(--kurve), box-shadow 200ms var(--kurve);
}
.ln-kopieren:hover { background: var(--glas); }
.ln-kopieren svg { width: 13px; height: 13px; flex: none; }
.ln-kopieren[data-kopiert] { box-shadow: inset 0 0 0 1px var(--verweis); color: var(--verweis); }
.ln-adresse {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; color: var(--text-2);
  -webkit-user-select: all; user-select: all;
  /* Die Auslassung steht vorn, die Sprungmarke bleibt zu sehen. */
  direction: rtl; text-align: left;
}
.ln-adresse-text { direction: ltr; unicode-bidi: isolate; }
.ln-status { margin-top: -12px; font-size: 13px; line-height: 1.45; color: var(--text-2); text-wrap: pretty; }
.ln-status:empty { display: none; }

.ln-trenner { height: 1px; border: 0; background: var(--kante); }

/* Die nächsten Ziele: weitere Artikel oder die drei Rechtsseiten. */
.ln-weitere { display: flex; flex-direction: column; gap: 4px; }
.ln-weitere ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.ln-gruppe { margin-bottom: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.ln-artikel { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; color: var(--text); }
.ln-artikel:hover { color: var(--text); }
.ln-artikel:hover .ln-artikel-t { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--linie); }
.ln-artikel-v { flex: none; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-2); }
.ln-artikel-t { font-size: 14px; line-height: 1.4; text-wrap: pretty; }
.ln-alle { align-self: flex-start; margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--verweis); }
.ln-rechtsseite {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0;
  font-size: 14px; color: var(--text-2);
}
.ln-rechtsseite:hover { color: var(--text); }
.ln-rechtsseite[aria-current] { color: var(--text); font-weight: 600; }
.ln-stand { flex: none; font-size: 12px; font-weight: 400; color: var(--text-2); white-space: nowrap; }

.ln-oben {
  align-self: flex-start; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-2);
}
.ln-oben:hover { color: var(--text); }

/* ── Breit: die Spalte rechts neben dem Text ─────────────── */
/* Unter 1100 Pixeln steht die Navigation nicht daneben, sondern in der
   Leiste unter dem Kopf. Dieselbe Grenze wie die Navigation im Kopf. */
.lesenav { display: none; }
@media (min-width: 1100px) {
  .ln-bereit .lesenav { display: block; }
  .lesenav > .ln {
    position: sticky; top: 108px;
    max-height: calc(100vh - 132px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
    /* Luft für den Fokusrahmen, den die Rolle sonst abschneiden würde. */
    margin: -6px; padding: 6px;
  }
  .lesenav > .ln::-webkit-scrollbar { display: none; }
}

/* ── Schmal: die Leiste unter dem Kopf ───────────────────── */
/* Sobald der Titel unter dem Kopf verschwunden ist, kommt sie. Am Ende des
   Texts geht sie wieder. Lage und Breite übernimmt sie vom Kopf
   (js/lesenavigation.js). Neben dem Kopf ist sie die zweite und letzte
   Unschärfe auf der Seite. */
.ln-leiste {
  position: fixed; z-index: 45;
  top: var(--ln-leiste-oben, 72px); left: var(--ln-leiste-links, 12px); width: var(--ln-leiste-breite, calc(100% - 24px));
  height: 50px; display: flex; align-items: center; gap: 10px; padding: 0 6px 0 16px;
  border-radius: 16px; overflow: hidden;
  background: var(--kopf);
  -webkit-backdrop-filter: blur(40px) saturate(1.6); backdrop-filter: blur(40px) saturate(1.6);
  box-shadow: inset 0 0 0 1px var(--linie);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 250ms var(--kurve), transform 250ms var(--kurve), visibility 0s linear 250ms;
}
.ln-leiste[data-sichtbar] {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 250ms var(--kurve), transform 250ms var(--kurve);
}
.ln-leiste-nr { flex: none; font-size: 13px; font-weight: 600; color: var(--verweis); font-variant-numeric: tabular-nums; }
.ln-leiste-nr:empty { display: none; }
.ln-leiste-name { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ln-leiste-knopf {
  flex: none; height: 38px; display: inline-flex; align-items: center; gap: 6px; padding: 0 13px;
  border: 0; border-radius: 12px; background: var(--glas); box-shadow: inset 0 0 0 1px var(--glas-kante);
  font: inherit; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer;
}
.ln-leiste-knopf svg { width: 14px; height: 14px; flex: none; }
.ln-leiste-strich {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--honig);
  transform-origin: left center; transform: scaleX(var(--g, 0));
}
@media (min-width: 1100px) { .ln-leiste { display: none; } }

/* ── Das Blatt von unten ─────────────────────────────────── */
/* Deckend, der Schleier dahinter ohne Unschärfe. Gerollt wird nur innen,
   in einer Fläche ohne Rundung. */
.ln-schleier {
  position: fixed; inset: 0; z-index: 64; background: var(--ln-schleier);
  opacity: 0; transition: opacity 300ms var(--kurve);
}
.ln-schleier[data-offen] { opacity: 1; }
.ln-blatt {
  --ln-grund: var(--flaeche);
  position: fixed; z-index: 65; left: 0; right: 0; bottom: 0;
  max-height: 78vh; max-height: 78dvh;
  display: flex; flex-direction: column; gap: 10px; padding-top: 10px;
  border-radius: 26px 26px 0 0; background: var(--flaeche);
  box-shadow: inset 0 1px 0 var(--kante), var(--ln-blatt-schatten);
  transform: translateY(100%); transition: transform 380ms var(--kurve);
}
.ln-blatt[data-offen] { transform: translateY(var(--ln-zug, 0px)); }
.ln-blatt[data-ziehen] { transition: none; }
.ln-griff {
  flex: none; align-self: center; width: 72px; height: 22px; margin-bottom: -6px;
  display: flex; align-items: flex-start; justify-content: center;
  border: 0; padding: 0; background: none; cursor: pointer; touch-action: none;
}
.ln-griff span { width: 38px; height: 5px; border-radius: 3px; background: var(--ln-spur); }
.ln-blatt-rolle {
  overflow-y: auto; overscroll-behavior: contain;
  padding: 4px max(20px, env(safe-area-inset-right, 0px)) max(30px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
}
.ln-blatt[hidden], .ln-schleier[hidden], .ln-leiste[hidden] { display: none; }
:root.ln-blatt-offen body { overflow: hidden; }

/* ── Im Text hinterlegt ──────────────────────────────────── */
/* Auf den Rechtsseiten liegt der Abschnitt, den man liest, auch im Text auf
   einer Fläche. Sie liegt hinter dem Text und nimmt keinen Platz. */
.ln-hinterlegt { position: relative; isolation: isolate; }
.ln-hinterlegung {
  position: absolute; z-index: -1; left: -20px; right: -20px; top: 0; height: 0;
  border-radius: 16px; background: var(--ln-hinterlegt); pointer-events: none;
  opacity: 0; transform: translateY(var(--y, 0px));
  transition: transform 350ms var(--kurve), height 350ms var(--kurve), opacity 250ms var(--kurve);
}
.ln-hinterlegung[data-sichtbar] { opacity: 1; }
@media (max-width: 640px) { .ln-hinterlegung { left: -10px; right: -10px; border-radius: 12px; } }

@media (prefers-reduced-motion: reduce) {
  .ln-leiste, .ln-leiste[data-sichtbar], .ln-schleier, .ln-blatt, .ln-hinterlegung,
  .ln-zeile::after, .ln-verweis, .ln-ring-wert { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .ln-leiste { background: var(--kopf-deckend); -webkit-backdrop-filter: none; backdrop-filter: none; }
}