/* Die Neuigkeiten auf honeypod.io, nach der Leinwand „Honeypod Website
   Neuigkeiten“ (Claude Design, 25.10.2026). Farben, Leiter und Knöpfe
   kommen aus seite.css, die Lesenavigation aus lesenavigation.css.

   Die Übersicht ist eine Reihe von Karten: die vordere groß und deckend,
   die übrigen treten zurück und stehen rechts angeschnitten. Darunter die
   Versionsleiste. Ein geöffneter Artikel liegt als Blatt auf dem Grund, mit
   eigenem Rand und Schatten. Er beschneidet nichts, die Rundung liegt nur
   am Rand des Blatts.

   Mit Skript (Klasse nk-js, gesetzt im Kopf der Seite) steht immer nur
   eines da: die Übersicht oder genau ein Artikel. Ohne Skript stehen alle
   Artikel als Blätter unter der Übersicht. */

.nk {
  --nk-spur: #2a2d31;
  --nk-rahmen-bg: rgba(255, 255, 255, 0.06);
  --nk-rahmen-kante: rgba(255, 255, 255, 0.12);
  --nk-schraffur: rgba(255, 255, 255, 0.05);
  --nk-karten-schatten: 0 30px 80px -30px rgba(0, 0, 0, 0.7);
  --nk-blatt-schatten: 0 40px 120px -40px rgba(0, 0, 0, 0.8);
  --nk-tapete: radial-gradient(60% 70% at 0% 0%, rgba(228, 105, 58, 0.32), transparent 70%),
               radial-gradient(50% 60% at 100% 10%, rgba(234, 180, 74, 0.14), transparent 70%);

  /* Die Leiter dieser Seite, gleitend zwischen Telefon (390) und 1440. */
  --nk-h1: clamp(44px, 33.6px + 2.667vw, 72px);
  --nk-titel: clamp(34px, 25.83px + 2.095vw, 56px);
  --nk-fliess: clamp(16.5px, 15.94px + 0.143vw, 18px);
  --nk-ort: clamp(18px, 16.51px + 0.381vw, 22px);
  /* Rand des Blatts zum Fenster und Polster darin. */
  --nk-blatt-rand: clamp(8px, 3.048vw - 3.89px, 40px);
  --nk-blatt-r: clamp(24px, 21.77px + 0.571vw, 30px);
  --nk-blatt-seite: clamp(20px, 6.63px + 3.429vw, 56px);
  --kurve-blatt: var(--kurve);

  /* Die Seite endet über dem Fuß mit ihrer Rundung (seite.css). */
  padding-bottom: var(--rug);
}
:root[data-thema="hell"] .nk {
  --nk-spur: #e3e3e6;
  --nk-rahmen-bg: rgba(255, 255, 255, 0.5);
  --nk-rahmen-kante: rgba(27, 28, 30, 0.08);
  --nk-schraffur: rgba(27, 28, 30, 0.05);
  --nk-karten-schatten: 0 30px 80px -30px rgba(24, 24, 27, 0.25);
  --nk-blatt-schatten: 0 40px 120px -40px rgba(24, 24, 27, 0.22);
  --nk-tapete: radial-gradient(60% 70% at 0% 0%, rgba(228, 105, 58, 0.22), transparent 70%),
               radial-gradient(50% 60% at 100% 10%, rgba(234, 180, 74, 0.22), transparent 70%);
}
.nk [hidden] { display: none !important; }

/* Gemeinsam: Version als Pille, Tag, Lesezeit */
.nk-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
  font-size: 13.5px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.nk-version {
  font-weight: 600; color: var(--verweis);
  border-radius: 999px; padding: 2px 9px; box-shadow: inset 0 0 0 1px var(--verweis);
}

/* ══ Übersicht ═════════════════════════════════════════════ */
.nk-uebersicht {
  position: relative; overflow-x: clip;
  padding-top: clamp(96px, 82.63px + 3.429vw, 132px);
  /* Unter der Leiste so viel Luft wie unter der letzten Karte jeder
     Unterseite (.f-weiter in funktion.css), zusammen mit --rug unter .nk.
     Vorher stand sie mit gut 100 Pixeln fast am Fuß (Tim, 28.10.2026). */
  padding-bottom: var(--abstand);
  background: var(--nk-tapete);
}
.nk-kopfzeile { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.nk-einleitung { display: flex; flex-direction: column; gap: 14px; max-width: 660px; min-width: 0; }
.nk-h1 { font-size: var(--nk-h1); line-height: 1.04; font-weight: 600; letter-spacing: -0.022em; }
.nk-leit { font-size: var(--leit); line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
/* Der Changelog erscheint online erst mit 1.0. Bis dahin steht der Knopf
   ausgegraut da und führt nirgends hin (Tim, 22.10.2026). */
.knopf.nk-changelog {
  align-self: flex-start; height: 36px; padding: 0 15px; font-size: 14px;
  color: var(--text-2); background: none; box-shadow: inset 0 0 0 1px var(--kante); opacity: 0.5;
}

.nk-blaettern { display: none; flex: none; align-items: center; gap: 10px; }
.nk-zaehler { margin-right: 6px; font-size: 14px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nk-pfeil {
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--glas); box-shadow: inset 0 0 0 1px var(--glas-kante); color: var(--text); cursor: pointer;
  transition: background-color 200ms var(--kurve), opacity 200ms var(--kurve), transform 300ms var(--kurve);
}
.nk-pfeil:hover { background: var(--glas-hover); }
.nk-pfeil:active { transform: scale(0.96); }
.nk-pfeil:disabled { opacity: 0.45; cursor: default; background: var(--glas); transform: none; }
.nk-pfeil svg { width: 16px; height: 16px; }

/* ── Die Reihe ───────────────────────────────────────────── */
/* Sie reicht rechts bis an den Fensterrand. Ohne Skript rollt sie selbst,
   mit Skript schiebt js/neuigkeiten.js die Spur und die Abschnitte
   beschneiden waagerecht, als Rechteck. */
.nk-reihe {
  margin-top: clamp(28px, 22.06px + 1.524vw, 44px);
  margin-right: calc(50% - 50vw);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-bottom: 8px;
}
.nk-reihe::-webkit-scrollbar { display: none; }
.nk-spur {
  list-style: none; display: flex; align-items: flex-end;
  gap: var(--nk-luecke, 12px); padding-right: 16px;
}
.nk-karte {
  --w: var(--nk-w, min(460px, 100vw - 2 * var(--rand) - 20px));
  position: relative; flex: none; width: var(--w);
  display: flex; flex-direction: column;
  border-radius: 26px; background: var(--flaeche);
  box-shadow: inset 0 0 0 1px var(--kante);
  scroll-snap-align: start;
}
.nk-karte[data-vorn] { box-shadow: inset 0 0 0 1px var(--kante), var(--nk-karten-schatten); }

.nk-karte-bild { padding: 10px 10px 0; }
.nk-karte-rahmen {
  position: relative; aspect-ratio: 16 / 10; padding: 8px;
  border-radius: 18px; background: var(--nk-rahmen-bg); box-shadow: inset 0 0 0 1px var(--nk-rahmen-kante);
}
/* Die Fläche der Abbildung. js/neuigkeiten.js wählt von den Abbildungen des
   Artikels die mit der besten Füllung und passt sie ein (--abb-w, --abb-s). */
.nk-karte-flaeche {
  position: relative; height: 100%;
  border-radius: 12px; background: var(--grund);
}
/* Mit Skript passt die Abbildung immer hinein, beschnitten wird nur ohne,
   damit keine gerundete Beschneidung mit der Reihe gleitet. */
:root:not(.nk-bereit) .nk-karte-flaeche { overflow: hidden; }
.nk-karte-abb { padding: 12px; }
.nk-karte-abb + .nk-karte-abb { display: none; }
.nk-bereit .nk-karte-abb {
  position: absolute; left: 50%; top: 50%; padding: 0;
  width: var(--abb-w, 400px);
  transform: translate(-50%, -50%) scale(var(--abb-s, 1));
}
.nk-neu {
  position: absolute; left: 20px; top: 20px; height: 26px;
  display: inline-flex; align-items: center; padding: 0 11px; border-radius: 999px;
  background: var(--honig); color: var(--auf-honig); font-size: 13px; font-weight: 650;
}

.nk-karte-text { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px 20px; }
.nk-karte-titel {
  font-size: 24px; line-height: 1.15; font-weight: 600; letter-spacing: -0.015em; text-wrap: balance;
  min-height: 2.3em;
}
.nk-karte-titel a { color: var(--text); }
/* Die ganze Karte ist die Fläche des Verweises. */
.nk-karte-titel a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 26px; }
.nk-karte-titel a:focus-visible { outline: none; }
.nk-karte-titel a:focus-visible::after { outline: 2px solid var(--fokus); outline-offset: 3px; }
.nk-karte-unter { font-size: 15.5px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; min-height: 4.5em; }
/* Unten in der Karte, mit 4 Pixeln Luft als Polster und nicht als Rand.
   So ist eine Karte vorn und hinten gleich hoch, wenn kein Platz übrig ist. */
.nk-lesen { margin-top: auto; padding-top: 4px; font-size: 15px; font-weight: 600; color: var(--verweis); }

/* Breit: die vordere Karte groß, die übrigen kleiner und zurückgenommen. */
@media (min-width: 900px) {
  .nk-karte-text { padding: 18px 24px 26px; }
  .nk-karte-titel { font-size: 24px; }
  .nk-karte-unter { font-size: 15px; min-height: 0; }
  .nk-karte[data-vorn] .nk-karte-titel { font-size: 34px; min-height: 0; }
  .nk-karte[data-vorn] .nk-karte-unter { font-size: 17px; }
}

/* Mit Skript: Die Spur gleitet, die Karten rasten ein. Breite, Schrift und
   Deckkraft wandern mit derselben Kurve wie die Spur. */
.nk-bereit .nk-reihe { overflow: visible; scroll-snap-type: none; padding-bottom: 0; touch-action: pan-y; }
.nk-bereit .nk-spur {
  padding-right: 0;
  transform: translate3d(var(--nk-x, 0px), 0, 0);
  transition: transform 560ms var(--kurve);
}
.nk-bereit .nk-karte {
  width: var(--nk-w); opacity: 0.5;
  transition: width 560ms var(--kurve), opacity 400ms var(--kurve), box-shadow 400ms var(--kurve);
}
.nk-bereit .nk-karte[data-vorn] { width: var(--nk-w-vorn, var(--nk-w)); opacity: 1; }
/* Feste Höhe der Spur und ein Textblock gleicher Höhe für die Karte vorn,
   gemessen in js/neuigkeiten.js (hoeheFestlegen). So bleiben Unterkante und
   Versionsleiste beim Blättern stehen. Die Höhe
   ist fest und kein Mindestmaß: Im Übergang braucht der wachsende Titel
   kurz eine Zeile mehr, und die Linie rückte um 4 Pixel. */
.nk-bereit .nk-spur { height: var(--nk-spur-h, auto); }
.nk-bereit .nk-karte[data-vorn] .nk-karte-text { min-height: var(--nk-text-vorn, 0px); }
.nk-bereit .nk-karte:not([data-vorn]):hover { opacity: 0.75; }
.nk-bereit .nk-karte-titel, .nk-bereit .nk-karte-unter { transition: font-size 560ms var(--kurve); }
@media (min-width: 900px) { .nk-bereit .nk-karte { opacity: 0.55; } }
.nk-bereit .nk-spur.nk-sofort, .nk-bereit .nk-spur.nk-sofort .nk-karte,
.nk-bereit .nk-spur.nk-sofort .nk-karte-titel, .nk-bereit .nk-spur.nk-sofort .nk-karte-unter { transition: none; }
.nk-ziehen, .nk-ziehen * { -webkit-user-select: none; user-select: none; cursor: grabbing; }

/* ── Die Versionsleiste ──────────────────────────────────── */
/* Jede Version ein Punkt auf einer Linie, der neueste links. Der Punkt des
   Artikels, der vorn steht, ist groß und in Honig. Ein Klick blättert. */
.nk-leiste { margin-top: clamp(26px, 20.8px + 1.333vw, 40px); max-width: 760px; }
.nk-leiste ol {
  position: relative; list-style: none; display: grid;
  grid-template-columns: repeat(var(--nk-anzahl, 8), minmax(0, 1fr));
}
.nk-leiste ol::before {
  content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 2px; border-radius: 1px;
  background: var(--nk-spur);
}
.nk-punkt {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding-bottom: 2px; font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.nk-punkt:hover { color: var(--text); }
.nk-punkt:focus-visible { border-radius: 8px; }
.nk-punkt-kreis {
  width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--nk-spur);
  transition: width 300ms var(--kurve), height 300ms var(--kurve), margin 300ms var(--kurve), background-color 300ms var(--kurve), box-shadow 300ms var(--kurve);
}
.nk-punkt:hover .nk-punkt-kreis { background: var(--text-3); }
.nk-punkt[aria-current] { color: var(--text); font-weight: 650; }
.nk-punkt[aria-current] .nk-punkt-kreis {
  width: 14px; height: 14px; margin-top: 3px; background: var(--honig); box-shadow: 0 0 0 4px rgba(234, 180, 74, 0.22);
}
/* Wird es eng, stehen nur der erste, der letzte und der gewählte Name. */
.nk-leiste[data-eng] .nk-punkt:not([aria-current]) .nk-punkt-name { visibility: hidden; }
.nk-leiste[data-eng] li:first-child .nk-punkt .nk-punkt-name,
.nk-leiste[data-eng] li:last-child .nk-punkt .nk-punkt-name { visibility: visible; }

.nk-tastatur { display: none; margin-top: 18px; font-size: 13px; color: var(--text-2); }
.nk-hinweis-fehler {
  margin-top: 36px; max-width: 620px; padding: 16px 18px; border-radius: 16px;
  background: var(--glas); box-shadow: inset 0 0 0 1px var(--glas-kante); font-size: 15px; line-height: 1.6;
}
@media (min-width: 900px) {
  .nk-bereit .nk-blaettern { display: flex; }
  .nk-bereit .nk-tastatur { display: block; }
}

/* ══ Ein Artikel ═══════════════════════════════════════════ */
/* Oben bleibt die Versionsleiste als Ort, kleiner. */
.nk-ort {
  display: none;
  padding-top: clamp(96px, 90.06px + 1.524vw, 112px);
  padding-bottom: clamp(14px, 11.03px + 0.762vw, 22px);
}
.nk-ort-zeile { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.nk-ort-name { font-size: var(--nk-ort); font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.nk-ort-name:hover { color: var(--text); }
.nk-leiste-klein { display: none; flex: none; width: min(520px, 55%); margin-top: 0; }
.nk-leiste-klein .nk-punkt { gap: 6px; font-size: 11.5px; }
@media (min-width: 900px) { .nk-leiste-klein { display: block; } }

/* Ohne Skript stehen die Artikel untereinander, jeder als Blatt. */
.nk-artikel { padding-top: 48px; }
.nk-artikel + .nk-artikel { padding-top: 32px; }

.nk-blatt {
  width: calc(100% - 2 * var(--nk-blatt-rand)); max-width: 1360px; margin-inline: auto;
  border-radius: var(--nk-blatt-r); background: var(--flaeche);
  box-shadow: inset 0 0 0 1px var(--kante), var(--nk-blatt-schatten);
}
.nk-blatt-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: clamp(16px, 13.77px + 0.571vw, 22px) clamp(16px, 10.06px + 1.524vw, 32px) 0 var(--nk-blatt-seite);
  min-height: 38px;
}
.nk-zurueck { font-size: 14px; font-weight: 600; color: var(--text-2); }
.nk-zurueck:hover { color: var(--text); }
.nk-zu-gruppe { display: none; align-items: center; gap: 10px; }
.nk-esc {
  display: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-2);
  border-radius: 6px; padding: 2px 6px; box-shadow: inset 0 0 0 1px var(--kante);
}
.nk-zu {
  width: 38px; height: 38px; border: 0; border-radius: 50%; background: none;
  display: flex; align-items: center; justify-content: center; color: var(--text);
  box-shadow: inset 0 0 0 1px var(--kante); cursor: pointer;
  transition: background-color 200ms var(--kurve);
}
.nk-zu:hover { background: var(--glas); }
.nk-zu svg { width: 14px; height: 14px; }
@media (min-width: 900px) { .nk-esc { display: inline-block; } }

.nk-blatt-raster {
  display: grid; grid-template-columns: minmax(0, 1fr);
  padding: clamp(22px, 17.54px + 1.143vw, 34px) var(--nk-blatt-seite) clamp(32px, 20.11px + 3.048vw, 64px);
}
/* Die Lesespalte ist höchstens so breit wie neben der Navigation bei 1440. */
.nk-spalte { display: flex; flex-direction: column; gap: 22px; min-width: 0; max-width: 860px; }
.nk-meta-artikel { font-size: 14px; }
.nk-meta-artikel .nk-version { padding: 2px 10px; }
.nk-titel {
  font-size: var(--nk-titel); line-height: 1.05; font-weight: 600; letter-spacing: -0.022em; text-wrap: balance;
  scroll-margin-top: 120px;
}
.nk-titel:focus { outline: none; }
.nk-unter { font-size: var(--leit); line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.nk-trenner { height: 1px; border: 0; margin: 6px 0; background: var(--kante); }

.nk-text { display: flex; flex-direction: column; gap: 22px; }
.nk-absatz { font-size: var(--nk-fliess); line-height: 1.7; color: var(--text-2); text-wrap: pretty; }
.nk-absatz strong, .nk-verworfen strong { color: var(--text); font-weight: 600; }

/* Die Abbildungen der App im Rahmen der Stufe 4. Ihr Inneres bleibt, wie es
   die App zeichnet. Sie stehen etwas breiter als der Text. */
.nk-abb {
  display: flex; flex-direction: column; gap: 12px;
  margin: clamp(6px, 4.51px + 0.381vw, 10px) calc(-1 * clamp(8px, 3.54px + 1.143vw, 20px));
}
/* Der Rahmen liegt um die Fläche der Abbildung, mit 10 Pixeln Abstand. Seine
   Rundung ist die der Fläche plus dieser Abstand, mal dem Zoom der Fläche, so
   laufen beide Ecken ineinander. Mit fest 22 Pixeln stand um eine Fläche mit
   9 Pixeln Rundung ein Rahmen mit sichtbar anderer Ecke (26.10.2026). */
.nk-abb-rahmen {
  --luft: 10px;
  padding: var(--luft); border-radius: calc(var(--radius-control, 9px) * var(--abb-zoom, 1) + var(--luft));
  background: var(--nk-rahmen-bg); box-shadow: inset 0 0 0 1px var(--nk-rahmen-kante);
}
/* Als Ganzes größer, in breiten Spalten bis 1,4fach (js/neuigkeiten.js). */
.nk-abb-bild { zoom: var(--abb-zoom, 1); }
/* Die Fläche der Abbildung ist gerundet und hält Abstand zu ihrem Inhalt, wie
   auf den Karten der Übersicht. Eine Abbildung ohne eigene Fläche, etwa der
   Vergleich der Grundtöne, stand sonst bis an die Kante und die Fläche hatte
   eckige Ecken im runden Rahmen (26.10.2026). Die Rundung ist die, mit der der
   Rahmen rechnet. */
.nk-abb-rahmen > .nk-abb-bild { padding: 12px; border-radius: var(--radius-control, 9px); }
/* Am Telefon zählt jeder Pixel Breite, Rahmen und Fläche rücken zusammen.
   Zusammen stehen sie dort 14 statt 22 Pixel vom Rand. */
@media (max-width: 520px) {
  .nk-abb-rahmen { --luft: 6px; }
  .nk-abb-rahmen > .nk-abb-bild { padding: 8px; }
}
/* Die Abbildungen tragen ihre Abstände als Klassen von Tailwind, und die
   stehen in einer Ebene (abbildungen.css). `* { margin: 0; padding: 0 }` aus
   seite.css steht ohne Ebene und schlug jede davon. Bis zum 26.10.2026 lag
   der Inhalt deshalb ohne Polster an den Kanten seiner Fläche. revert-layer
   gibt jedem Element zurück, was die Ebenen sagen, also dasselbe wie in der
   App. Gilt auch für die Karten der Übersicht. */
.nk-abb-bild *, .nk-karte-abb * { margin: revert-layer; padding: revert-layer; }
.nk-abb figcaption { padding: 0 6px; font-size: 14px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }

/* Die Abbildung zum Abgleich (0.39.0) mit den Geräten der Datenkontrolle,
   gebaut in neuigkeiten/index.php (syncFuerDieWebsite). Die Geräte sind die
   aus start.css im Maßstab 0,7, in Einheiten ihres eigenen Kastens. Der
   Strich läuft hinter den Geräten durch, beide liegen über ihm. */
.abb-sync {
  display: grid; align-items: end; column-gap: 10px; row-gap: 6px;
  grid-template-columns: minmax(0, 238fr) clamp(104px, 30%, 160px) minmax(0, 224fr);
}
.abb-geraet { position: relative; z-index: 1; container-type: inline-size; }
.abb-geraet i { position: absolute; display: block; }
.abb-schirm {
  background: linear-gradient(150deg, rgba(228, 105, 58, 0.22) 0%, transparent 42%), linear-gradient(180deg, #1d1f23, #101113);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 18px 36px -16px rgba(0, 0, 0, 0.65);
}
.abb-geraet .abb-schirm-bild {
  position: static; width: 100%; height: 100%;
  background: var(--geraet-bild) center / cover no-repeat, var(--tapete);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45);
}
/* Laptop: 238 × 150 Einheiten, 1cqw sind 2,38. */
.abb-laptop { aspect-ratio: 238 / 150; }
.abb-laptop .abb-schirm {
  left: 5.88%; top: 2.67%; width: 88.24%; height: 90.67%; padding: 2.65cqw;
  border-radius: 4.12cqw 4.12cqw 1.18cqw 1.18cqw;
}
.abb-laptop .abb-schirm-bild { border-radius: 1.76cqw; }
.abb-sockel {
  left: 0; top: 93.33%; width: 100%; height: 6.53%;
  border-radius: 0.59cqw 0.59cqw 4.12cqw 4.12cqw;
  background: linear-gradient(180deg, #2c2f34, #131416);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 12px 20px -10px rgba(0, 0, 0, 0.55);
}
.abb-kerbe { left: 41.18%; top: 93.33%; width: 17.65%; height: 2.33%; border-radius: 0 0 1.76cqw 1.76cqw; background: #0b0c0d; }
/* Bürorechner: 224 × 196 Einheiten, 1cqw sind 2,24. */
.abb-monitor { aspect-ratio: 224 / 196; }
.abb-monitor .abb-schirm { left: 0; top: 0; width: 100%; height: 74.29%; padding: 3.13cqw; border-radius: 5cqw; }
.abb-monitor .abb-schirm-bild { border-radius: 2.19cqw; }
.abb-hals { left: 41.56%; top: 74.29%; width: 16.88%; height: 20.71%; background: linear-gradient(90deg, #131416, #2a2d32 50%, #131416); }
.abb-fuss {
  left: 28.13%; top: 95%; width: 43.75%; height: 3.57%;
  border-radius: 1.88cqw 1.88cqw 1.25cqw 1.25cqw;
  background: linear-gradient(180deg, #2c2f34, #131416);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 18px -8px rgba(0, 0, 0, 0.55);
}
/* Die Dienste im Fünfeck um das Zeichen, in den Maßen der App: Kreise zu 26 %
   des Rings auf 33 % Abstand, das Zeichen zu 24 %. Mit 34 % stieß es an die
   unteren Kreise (26.10.2026). */
.abb-sync-ring { position: relative; align-self: center; aspect-ratio: 1; }
.abb-sync-ring::before {
  content: ""; position: absolute; top: 50%; left: -80%; right: -80%;
  border-top: 2px dashed var(--border-2); transform: translateY(-1px);
}
.abb-dienst {
  position: absolute; width: 26%; height: 26%;
  left: calc(50% + var(--x) * 33% - 13%); top: calc(50% + var(--y) * 33% - 13%);
  display: grid; place-items: center; border-radius: 50%;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-2);
}
.abb-dienst > svg, .abb-dienst > img { width: 50%; height: 50%; }
.abb-sync-mitte { position: absolute; left: 50%; top: 50%; width: 24%; height: 24%; transform: translate(-50%, -50%); }
.abb-sync-name { grid-row: 2; grid-column: 1; text-align: center; font-size: 10px; color: var(--text-3); }
.abb-sync-name-rechts { grid-column: 3; }

/* Ein Vorspann „Verworfen“ steht als Kasten: oft der lehrreichste Teil. */
.nk-verworfen {
  display: flex; flex-direction: column; gap: 8px; padding: 20px 22px;
  border-radius: 16px; box-shadow: inset 0 0 0 1px var(--kante);
  background-image: repeating-linear-gradient(135deg, var(--nk-schraffur) 0 1px, transparent 1px 9px);
}
.nk-verworfen-name { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.nk-verworfen p:not(.nk-verworfen-name) { font-size: var(--nk-fliess); line-height: 1.65; color: var(--text); text-wrap: pretty; }

/* Die Navigation steht rechts auf dem Blatt, durch eine Linie getrennt. */
.nk-nav { --ln-grund: var(--flaeche); }
@media (min-width: 1100px) {
  .nk-bereit .nk-blatt-raster {
    grid-template-columns: minmax(0, 1fr) 300px;
    column-gap: clamp(48px, 11.765vw - 81.41px, 88px);
  }
  .nk-nav { padding-top: 8px; padding-left: 28px; box-shadow: inset 1px 0 0 var(--kante); }
}

/* Am Ende: voriger und nächster Artikel, dann „Beta anfragen“. */
.nk-ende {
  display: flex; flex-direction: column; gap: 24px;
  padding: clamp(24px, 21.03px + 0.762vw, 32px) var(--nk-blatt-seite) clamp(28px, 23.54px + 1.143vw, 40px);
  box-shadow: inset 0 1px 0 var(--kante);
}
.nk-nachbarn { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.nk-nachbar {
  display: flex; flex-direction: column; gap: 8px; padding: 18px 20px;
  border-radius: 18px; box-shadow: inset 0 0 0 1px var(--kante); color: var(--text);
  transition: background-color 200ms var(--kurve), box-shadow 200ms var(--kurve);
}
a.nk-nachbar:hover { color: var(--text); background: var(--glas); box-shadow: inset 0 0 0 1px var(--glas-kante); }
a.nk-nachbar:focus-visible { border-radius: 18px; }
.nk-nachbar-nach { align-items: flex-end; text-align: right; }
.nk-nachbar-art { font-size: 13px; color: var(--text-2); }
.nk-nachbar-v { font-size: 13px; font-weight: 600; color: var(--verweis); font-variant-numeric: tabular-nums; }
.nk-nachbar-titel { font-size: 18px; line-height: 1.3; font-weight: 600; text-wrap: balance; }
.nk-nachbar-leer { background-image: repeating-linear-gradient(135deg, var(--nk-schraffur) 0 1px, transparent 1px 9px); }
.nk-nachbar-leer .nk-nachbar-titel { color: var(--text-2); }
.nk-beta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.nk-beta p { font-size: var(--leit); font-weight: 600; text-wrap: balance; }
.nk-beta .knopf { height: 46px; padding: 0 22px; font-size: 15.5px; }

/* ══ Mit Skript: eines zur Zeit ════════════════════════════ */
.nk-js .nk-artikel { display: none; padding-top: 0; scroll-margin-top: 100vh; }
.nk-js .nk-zu-gruppe { display: flex; }
.nk-js .nk[data-nk-ansicht="artikel"] .nk-uebersicht { display: none; }
.nk-js .nk[data-nk-ansicht="artikel"] .nk-ort { display: block; }
.nk-js .nk-artikel.nk-offen { display: block; padding-bottom: clamp(40px, 28.11px + 3.048vw, 80px); }
/* Bevor das Skript steht, zeigt die Sprungmarke in der Adresse schon den
   richtigen Artikel, damit die Übersicht nicht aufblitzt. */
.nk-js:not(.nk-bereit) .nk-artikel:target { display: block; }
.nk-js:not(.nk-bereit) .nk:has(.nk-artikel:target) .nk-uebersicht { display: none; }
.nk-js:not(.nk-bereit) .nk:has(.nk-artikel:target) .nk-ort { display: block; }

/* Ein Klick legt den Artikel als Blatt über die Übersicht. */
@keyframes nk-blatt-kommt {
  from { opacity: 0; transform: translateY(32px); }
  to { opacity: 1; transform: none; }
}
.nk-kommt .nk-blatt { animation: nk-blatt-kommt 560ms var(--einblenden) both; }
@keyframes nk-uebersicht-kommt { from { opacity: 0; } to { opacity: 1; } }
.nk-zurueckgekehrt .nk-uebersicht { animation: nk-uebersicht-kommt 360ms var(--kurve) both; }

@media (prefers-reduced-motion: reduce) {
  .nk-bereit .nk-spur, .nk-bereit .nk-karte, .nk-bereit .nk-karte-titel, .nk-bereit .nk-karte-unter,
  .nk-punkt-kreis, .nk-pfeil { transition: none; }
  .nk-kommt .nk-blatt, .nk-zurueckgekehrt .nk-uebersicht { animation: none; }
}