/* ==========================================================================
   Seitenspezifisches — alles, was im Entwurf als style="…" an den Abschnitten
   hing, hier als benannte Klassen. Farben, Radien und Abstaende kommen
   ausschliesslich aus tokens.css; hier steht kein einziger neuer Farbwert.
   ========================================================================== */

/* Sprungmarke fuer Tastatur und Screenreader */
.nv-skip{position:absolute;left:-9999px;top:0;z-index:60;padding:.625rem 1rem;border-radius:0 0 var(--radius-lg) 0;background:var(--accent-500);color:#fff;font-size:.875rem;font-weight:600}
.nv-skip:focus{left:0;color:#fff}

/* Symbole ---------------------------------------------------------------- */
.nv-i{width:1.125rem;height:1.125rem;flex-shrink:0;display:block}
.nv-i--sm{width:1rem;height:1rem}
.nv-i--lg{width:1.25rem;height:1.25rem}

/* Kopfzeile -------------------------------------------------------------- */
.nv-brand{flex-shrink:0;display:flex;align-items:center;gap:.5rem;color:var(--mist-100)}
.nv-brand:hover{color:var(--mist-100)}
.nv-brand__mark{width:2rem;height:2rem;display:block}
.nv-brand__word{font-size:1.0625rem;font-weight:700;letter-spacing:var(--tracking-tight)}
.nv-nav{display:flex;flex:1;justify-content:flex-end;align-items:center;gap:.25rem}
.nv-nav__links{display:flex;align-items:center;gap:.25rem}
@media(max-width:1060px){.nv-nav__links{display:none}}

/* Sprachumschalter: zwei echte Verweise, damit beide Fassungen auffindbar sind */
.nv-lang{display:flex;align-items:center;gap:.1875rem;margin-left:.5rem;padding:.1875rem;border-radius:var(--radius-full);border:1px solid var(--ink-700);background:var(--ink-900)}
.nv-lang a{display:flex;align-items:center;line-height:1;border-radius:var(--radius-full);padding:.25rem .375rem;filter:grayscale(1);opacity:.55;transition:opacity var(--dur-fast),filter var(--dur-fast),box-shadow var(--dur-fast)}
.nv-lang a:hover{filter:none;opacity:.85}
.nv-lang a[aria-current="true"]{filter:none;opacity:1;background:rgb(225 29 47/.18);box-shadow:inset 0 0 0 1px rgb(225 29 47/.45)}
.nv-lang svg{display:block;border-radius:2px}
.nv-header__github{margin-left:.5rem;padding:.4rem .875rem}

/* Aufmacher -------------------------------------------------------------- */
.nv-hero{position:relative;padding-top:4.5rem;padding-bottom:1rem}
.nv-hero__bg{position:absolute;inset:-6rem -50vw 0;overflow:hidden}
.nv-hero__bg img{width:100%;height:100%;object-fit:cover;display:block}
.nv-hero__veil{position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 70% at 50% 40%,rgb(11 11 15/.35),rgb(11 11 15/.82) 70%),linear-gradient(to bottom,rgb(11 11 15/.65),rgb(11 11 15/.25) 35%,var(--ink-950) 96%)}
.nv-hero__inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.25rem;max-width:46rem;margin:0 auto}
.nv-hero__mark{width:4rem;height:4rem}
.nv-hero__title{font-size:var(--text-display);font-weight:700}
.nv-hero__lede{font-size:1.125rem;line-height:var(--leading-relaxed);color:var(--mist-500);text-wrap:pretty;max-width:38rem}
.nv-hero__free{color:var(--accent-400);font-weight:600}
.nv-hero__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:.25rem}
.nv-hero__meta{color:var(--mist-600);margin-top:.25rem}

/* Video ------------------------------------------------------------------ */
.nv-video{max-width:64rem;margin:0 auto;padding-top:2.5rem}
.nv-video__stage{position:relative;aspect-ratio:16/9;background:var(--ink-950)}
.nv-video__stage video{width:100%;height:100%;display:block;object-fit:cover;background:var(--ink-950)}
.nv-video__caption{margin-top:.75rem;text-align:center;font-size:var(--text-2xs);color:var(--mist-600)}

/* Warum ------------------------------------------------------------------ */
.nv-why{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.75rem;max-width:64rem}
.nv-why__item{display:flex;flex-direction:column;gap:.625rem}
.nv-why__num{font-size:var(--text-2xs);font-weight:700;letter-spacing:var(--tracking-wide);color:var(--accent-500)}
.nv-why__text{font-size:1.0625rem;line-height:var(--leading-relaxed);color:var(--mist-300);text-wrap:pretty}

/* Aufzaehlung mit Symbol ------------------------------------------------- */
.nv-list{display:flex;gap:.875rem;align-items:flex-start}
.nv-list__icon{color:var(--accent-400);flex-shrink:0;display:flex;margin-top:.25rem}
.nv-list__text{font-size:.875rem;line-height:var(--leading-snug);color:var(--mist-500)}
.nv-list__text b{color:var(--mist-100);font-weight:600}
.nv-list--roomy{gap:.875rem}
.nv-list--roomy .nv-list__text{font-size:.9375rem;line-height:var(--leading-relaxed)}
.nv-list--tight{gap:.75rem}
.nv-list--tight .nv-list__text{font-size:.8125rem}

.nv-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1.25rem;margin-top:1.75rem;padding-top:1.75rem;border-top:1px solid rgb(38 38 47/.6)}

/* Kleines Etikett ueber einer Ueberschrift - wird noch von der
   Rollen-Tabelle benutzt. */
.nv-row__kicker{font-size:var(--text-2xs);font-weight:600;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--mist-600)}

/* Zwei-Spalten-Bloecke ---------------------------------------------------- */
.nv-duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:1rem;margin-top:1rem}
.nv-duo--wide{grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:2.5rem;align-items:center;margin-top:0}
.nv-duo__text{display:flex;flex-direction:column;gap:1.25rem;max-width:30rem}
.nv-card--stack{padding:1.25rem;display:flex;flex-direction:column;gap:1.125rem}
.nv-card--stack h3{font-size:1.25rem;font-weight:700}
.nv-card--stack .nv-lede{font-size:.875rem}
.nv-shell{border-radius:var(--radius-xl);border:1px solid var(--ink-700);overflow:hidden;background:var(--ink-900);min-height:18rem;position:relative}

.nv-quote{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-radius:var(--radius-full);border:1px solid var(--ink-700);background:var(--ink-900);align-self:flex-start}
.nv-quote__text{font-size:.8125rem;color:var(--mist-500)}

.nv-cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1rem;margin-top:2.5rem}
.nv-card--mini{padding:1.25rem;display:flex;flex-direction:column;gap:.625rem}
.nv-card--mini h3{font-size:.9375rem;font-weight:600}
.nv-card--mini p{font-size:.8125rem;line-height:var(--leading-snug);color:var(--mist-500)}

/* Screenshots ------------------------------------------------------------ */
.nv-shots{display:flex;flex-direction:column;gap:4rem}
.nv-shot{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:2.5rem;align-items:center}
.nv-shot__copy{display:flex;flex-direction:column;gap:.875rem;max-width:30rem}
.nv-shot__label{font-size:var(--text-2xs);font-weight:700;letter-spacing:var(--tracking-wide);color:var(--accent-500)}
.nv-shot__h3{font-size:1.375rem;font-weight:700}
.nv-shot__p{font-size:.9375rem;line-height:var(--leading-relaxed);color:var(--mist-500);text-wrap:pretty}
.nv-shot__p2{font-size:.875rem;line-height:var(--leading-relaxed);color:var(--mist-600)}
/* Bei schmalen Bildschirmen faellt das Raster ohnehin auf eine Spalte; damit
   Bild und Text dann in der gelesenen Reihenfolge stehen, wandert das Bild
   in den umgekehrten Zeilen nach oben. */
@media(max-width:calc(40rem + 2.5rem)){.nv-shot--flip .nv-shot__copy{order:2}}
.nv-shot__stage{position:relative;aspect-ratio:16/9}

/* Am Telefon ------------------------------------------------------------- */
.nv-phone-block{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:2.5rem;align-items:start;margin-top:2.5rem;padding-top:2.5rem;border-top:1px solid rgb(38 38 47/.6)}
.nv-phone-block__copy{display:flex;flex-direction:column;gap:1rem;max-width:30rem}
.nv-phone-block__copy h3{font-size:1.375rem;font-weight:700}
.nv-phone-block__copy p{font-size:.9375rem;line-height:var(--leading-relaxed);color:var(--mist-500);text-wrap:pretty}
.nv-phone-block__list{display:flex;flex-direction:column;gap:.875rem;margin-top:.25rem}
.nv-phones{display:flex;gap:1.25rem;overflow-x:auto;padding-bottom:.5rem}
.nv-phones figure{margin:0;width:11rem;flex-shrink:0;display:flex;flex-direction:column;gap:.625rem}
.nv-phones figcaption{font-size:var(--text-2xs);color:var(--mist-600);text-align:center}
.nv-phone__stage{position:relative;aspect-ratio:9/19}

/* Rollen ------------------------------------------------------------------ */
.nv-roles-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1rem;margin-bottom:1.5rem}
.nv-role{padding:1.25rem;display:flex;flex-direction:column;gap:.5rem}
.nv-role p{font-size:.875rem;line-height:var(--leading-snug);color:var(--mist-500)}
.nv-scroll-x{overflow-x:auto}

/* Installation ------------------------------------------------------------ */
.nv-install-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:2rem;align-items:start}
.nx-copy--ok{border-color:rgb(34 197 94/.5);color:var(--ok-500)}

/* Sicherheit, Fragen, Abschluss ------------------------------------------- */
.nv-card--wide{max-width:48rem;display:flex;flex-direction:column;gap:1.125rem}
.nv-sec__text{font-size:.9375rem;line-height:var(--leading-relaxed);color:var(--mist-300)}
.nv-faq{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:1.75rem 2.5rem;max-width:64rem}
.nv-faq__item{display:flex;flex-direction:column;gap:.5rem}
.nv-faq__q{font-size:.9375rem;font-weight:600;color:var(--mist-100)}
.nv-faq__a{font-size:.875rem;line-height:var(--leading-relaxed);color:var(--mist-500);text-wrap:pretty}
.nv-final{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.25rem}
.nv-final h2{font-size:1.75rem}
.nv-final .nx-lede{max-width:34rem}
.nv-tmdb{max-width:40rem;margin:0 auto;text-align:center;font-size:.75rem;line-height:var(--leading-relaxed);color:var(--mist-600)}

/* Einblenden beim Scrollen. Ohne JavaScript bleibt alles sichtbar — die
   Klasse wird erst von site.js gesetzt. */
.js .nv-reveal{opacity:0;transform:translateY(1.25rem)}
.js .nv-reveal.is-in{opacity:1;transform:none;transition:opacity var(--dur-rise) var(--ease-soft),transform var(--dur-rise) var(--ease-soft)}
@media(prefers-reduced-motion:reduce){.js .nv-reveal{opacity:1;transform:none}}

/* Textseiten (Datenschutz, 404) ------------------------------------------- */
.nv-prose{max-width:46rem;margin:0 auto;display:flex;flex-direction:column;gap:1.5rem}
.nv-prose h1{font-size:var(--text-h1);font-weight:700}
.nv-prose h2{font-size:1.125rem;font-weight:700;margin-top:1rem}
.nv-prose h3{font-size:.9375rem;font-weight:600;color:var(--mist-100)}
.nv-prose p,.nv-prose li{font-size:.9375rem;line-height:var(--leading-relaxed);color:var(--mist-500);text-wrap:pretty}
.nv-prose ul{margin:0;padding-left:1.125rem;display:flex;flex-direction:column;gap:.5rem}
.nv-prose address{font-style:normal;color:var(--mist-300)}
.nv-prose dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.375rem 1rem;font-size:.9375rem}
.nv-prose dt{color:var(--mist-600)}
.nv-prose dd{margin:0;color:var(--mist-300)}
.nv-404{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1.25rem}

/* Kinoaufruf ---------------------------------------------------------------
   Der einzige Kasten der Seite mit einer getoenten Flaeche. Bewusst so: er
   soll aus der Reihe fallen, weil er als einziger nicht vom Produkt handelt.
   Rot bleibt trotzdem Toenung + Ring, keine volle Flaeche. */
.nv-kino{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));border-radius:var(--radius-2xl);overflow:hidden;background:linear-gradient(135deg,rgb(225 29 47/.15),rgb(143 15 28/.05) 60%,rgb(11 11 15/0));box-shadow:inset 0 0 0 1px rgb(225 29 47/.3),var(--shadow-card)}
.nv-kino__bild{position:relative;min-height:20rem;background:var(--ink-950)}
.nv-kino__bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.nv-kino__text{padding:2.75rem;display:flex;flex-direction:column;gap:1rem;justify-content:center}
@media(max-width:640px){.nv-kino__text{padding:1.75rem}.nv-kino__bild{min-height:15rem}}
.nv-kino__text h2{font-size:var(--text-h1);font-weight:700}
.nv-kino__text p{font-size:1rem;line-height:var(--leading-relaxed);color:var(--mist-300);text-wrap:pretty}
.nv-kino__pointe{border-left:2px solid var(--accent-500);padding-left:1.125rem;margin-top:.375rem;color:var(--mist-100);font-weight:600}

/* Abschnitte voneinander absetzen -------------------------------------------
   Jeder zweite Abschnitt bekommt eine Spur mehr Helligkeit und eine Haarlinie
   oben und unten. Bewusst durchscheinend (rgb .5), damit der Rotschimmer im
   Hintergrund weiterhin durchkommt - eine deckende Flaeche wuerde ihn
   abschneiden. Der Unterschied betraegt keine drei Prozent Helligkeit; das
   reicht, um Abschnitte zu trennen, ohne dass es nach Streifen aussieht. */
.nx-section{position:relative}
.nx-section--band{background:linear-gradient(180deg,rgb(24 24 32/.85),rgb(17 17 23/.6) 60%,rgb(13 13 18/.75));
  border-top:1px solid rgb(46 46 58/.7);border-bottom:1px solid rgb(8 8 11/.9);
  box-shadow:inset 0 1px 0 rgb(255 255 255/.025)}

/* Was es ist, was es nicht ist ---------------------------------------------- */
.nv-zwei{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:1rem}
.nv-spalte{padding:1.5rem;display:flex;flex-direction:column;gap:1rem}
.nv-spalte__kopf{display:flex;align-items:center;gap:.625rem;font-size:.9375rem;font-weight:700;color:var(--mist-100)}
.nv-spalte__zeichen{display:flex;width:1.75rem;height:1.75rem;align-items:center;justify-content:center;border-radius:var(--radius-full);flex-shrink:0}
.nv-spalte--ja .nv-spalte__zeichen{background:rgb(34 197 94/.15);color:var(--ok-500);box-shadow:inset 0 0 0 1px rgb(34 197 94/.35)}
.nv-spalte--nein .nv-spalte__zeichen{background:rgb(225 29 47/.13);color:var(--accent-400);box-shadow:inset 0 0 0 1px rgb(225 29 47/.32)}
.nv-punkte{display:flex;flex-direction:column;gap:.875rem;margin:0;padding:0;list-style:none}
.nv-punkte li{display:flex;gap:.75rem;align-items:flex-start;font-size:.875rem;line-height:var(--leading-snug);color:var(--mist-500)}
.nv-punkte li b{color:var(--mist-100);font-weight:600}
.nv-punkte__marke{flex-shrink:0;margin-top:.4rem;width:.375rem;height:.375rem;border-radius:var(--radius-full)}
.nv-spalte--ja .nv-punkte__marke{background:var(--ok-500);opacity:.7}
.nv-spalte--nein .nv-punkte__marke{background:var(--accent-500);opacity:.75}
.nv-einordnung{margin-top:1.25rem;font-size:.9375rem;line-height:var(--leading-relaxed);color:var(--mist-500);max-width:44rem;text-wrap:pretty}
.nv-einordnung b{color:var(--mist-100);font-weight:600}

/* Der Hintergrund lebt ------------------------------------------------------
   Zwei feste Schimmerflaechen: eine oben, eine unten. Beim Scrollen blendet
   die obere aus und die untere ein (`--nv-scroll` kommt aus site.js), dazu
   driften beide ganz langsam von selbst. Zusammen wirkt es, als bewege man
   sich durch einen Raum, dessen Licht sich aendert - statt auf einer Flaeche
   zu scrollen, die ueberall gleich aussieht.

   Bewegt werden nur `transform` und `opacity`; beides laeuft in der
   Grafikkarte, kostet also kein Layout und kein Neuzeichnen. Ohne JavaScript
   bleibt `--nv-scroll` bei 0 und man sieht den oberen Schimmer wie bisher. */
.nv-glow::before,
.nv-glow::after{content:'';position:fixed;pointer-events:none;z-index:0;will-change:transform,opacity}

.nv-glow::before{
  inset:-22% -12% auto -12%;height:72vh;
  background:var(--glow-page);
  opacity:calc(1 - var(--nv-scroll,0) * .55);
}
.nv-glow::after{
  inset:auto -12% -25% -12%;height:70vh;
  background:
    radial-gradient(40rem 24rem at 76% 100%,rgb(225 29 47/.15),transparent 68%),
    radial-gradient(34rem 21rem at 14% 88%,rgb(143 15 28/.19),transparent 72%);
  opacity:calc(var(--nv-scroll,0) * .95);
}

@media (prefers-reduced-motion:no-preference){
  @keyframes nv-treiben-a{
    from{transform:translate3d(-2.5%,0,0) scale(1.04)}
    to{transform:translate3d(2.5%,2.5%,0) scale(1.1)}
  }
  @keyframes nv-treiben-b{
    from{transform:translate3d(2%,1.5%,0) scale(1.06)}
    to{transform:translate3d(-2%,-1%,0) scale(1.02)}
  }
  .nv-glow::before{animation:nv-treiben-a 38s var(--ease-soft) infinite alternate}
  .nv-glow::after{animation:nv-treiben-b 47s var(--ease-soft) infinite alternate}
}

/* Die Klarstellung im Aufmacher: sagt sofort, was Nexview NICHT tut, ohne dass
   die Seite mit einer Verneinung anfangen muss. Der ausfuehrliche Block dazu
   steht weiter unten bei den Einwaenden. */
.nv-hero__klar{font-size:.9375rem;line-height:var(--leading-snug);color:var(--mist-500);max-width:34rem;padding:.625rem 1.125rem;border-radius:var(--radius-full);border:1px solid var(--ink-700);background:rgb(16 16 22/.6)}
@media(max-width:640px){.nv-hero__klar{border-radius:var(--radius-lg)}}

/* Sicherheit: drei versetzte Karten -----------------------------------------
   Vorher waren es drei gleich lange Zeilen in einem Kasten - korrekt, aber
   einschlaefernd. Jetzt drei einzelne Karten, die treppenartig nach unten
   versetzt sind. Der Versatz ist der ganze Trick: er nimmt der Reihe das
   Lineal, ohne dass etwas schief oder zufaellig wirkt.

   Dazu in jeder Karte ein grosses, fast unsichtbares Symbol als Wasserzeichen.
   Das gibt Tiefe, ohne eine einzige neue Farbe einzufuehren - alles bleibt bei
   Rot als Toenung, wie im Design-System vorgesehen. */
.nv-lager{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;align-items:start}
.nv-lager__karte{position:relative;overflow:hidden;padding:1.5rem;display:flex;flex-direction:column;gap:.75rem;
  transition:transform var(--dur-fast),border-color var(--dur-fast),box-shadow var(--dur-fast)}
/* Die Treppe. Zweite Karte eine halbe Kartenhoehe tiefer, dritte noch tiefer. */
.nv-lager__karte:nth-child(2){margin-top:2.75rem}
.nv-lager__karte:nth-child(3){margin-top:5.5rem}
.nv-lager__karte:hover{transform:translateY(-4px);border-color:var(--accent-600);box-shadow:var(--shadow-card),var(--glow-hover)}

/* Wasserzeichen: dasselbe Symbol gross, sehr blass, unten rechts angeschnitten. */
.nv-lager__schatten{position:absolute;right:-1.25rem;bottom:-1.5rem;width:7.5rem;height:7.5rem;
  color:var(--accent-500);opacity:.07;pointer-events:none}
.nv-lager__zeichen{display:flex;width:2.5rem;height:2.5rem;align-items:center;justify-content:center;
  border-radius:var(--radius-lg);background:rgb(225 29 47/.12);color:var(--accent-400);
  box-shadow:inset 0 0 0 1px rgb(225 29 47/.25);flex-shrink:0}
.nv-lager__titel{font-size:1rem;font-weight:700;letter-spacing:var(--tracking-tight);color:var(--mist-100);position:relative}
.nv-lager__text{font-size:.875rem;line-height:var(--leading-relaxed);color:var(--mist-500);position:relative;text-wrap:pretty}

/* Auf schmalen Bildschirmen faellt die Treppe weg - untereinander versetzt zu
   stapeln waere nur verschwendeter Platz. */
@media(max-width:64rem){
  .nv-lager{grid-template-columns:1fr;gap:1rem}
  .nv-lager__karte:nth-child(2),
  .nv-lager__karte:nth-child(3){margin-top:0}
}
@media(prefers-reduced-motion:reduce){.nv-lager__karte:hover{transform:none}}

/* Verlauf: Zeitleiste --------------------------------------------------------
   Bewusst eine andere Form als die Karten daneben und die Schritte im Ablauf -
   drei Kachelraster hintereinander waeren eintoenig. Eine senkrechte Linie mit
   Punkten liest sich sofort als Zeitverlauf, und der oberste Punkt ist der
   einzige rote: das ist die Fassung, die gerade aktuell ist.

   Gebaut von tools/changelog.py aus den GitHub-Releases. */
.nv-verlauf{list-style:none;margin:0;padding:0 0 0 1.75rem;position:relative;max-width:52rem}
/* Die Linie. Laeuft nicht bis ganz unten aus, sondern blendet aus - der
   Verlauf geht ja weiter, er wird hier nur nicht mehr gezeigt. */
.nv-verlauf::before{content:'';position:absolute;left:.3125rem;top:.55rem;bottom:0;width:1px;
  background:linear-gradient(to bottom,var(--ink-600),var(--ink-700) 65%,transparent)}
.nv-verlauf__punkt{position:relative;padding-bottom:2rem}
.nv-verlauf__punkt:last-child{padding-bottom:0}
.nv-verlauf__punkt::before{content:'';position:absolute;left:-1.75rem;top:.5rem;width:.6875rem;height:.6875rem;
  border-radius:var(--radius-full);background:var(--ink-950);box-shadow:inset 0 0 0 2px var(--ink-600)}
.nv-verlauf__punkt--jetzt::before{box-shadow:inset 0 0 0 2px var(--accent-500),0 0 0 5px rgb(225 29 47/.12)}

.nv-verlauf__kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:.625rem;margin-bottom:.625rem}
.nv-verlauf__marke{font:700 1.0625rem/1 var(--font-sans);letter-spacing:var(--tracking-tight);color:var(--mist-100)}
.nv-verlauf__punkt--jetzt .nv-verlauf__marke{color:var(--accent-400)}
.nv-verlauf__kopf time{font-size:var(--text-2xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--mist-600)}

.nv-verlauf__liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.nv-verlauf__liste li{font-size:.875rem;line-height:var(--leading-snug);color:var(--mist-500);text-wrap:pretty}
/* Das Etikett laeuft im Text mit, statt eine eigene Spalte zu bekommen -
   sonst entstuende wieder das Lineal, das hier gerade vermieden werden soll. */
.nv-verlauf__art{display:inline-block;margin-right:.5rem;padding:.0625rem .4375rem;border-radius:var(--radius-full);
  font-size:var(--text-2xs);font-weight:600;color:var(--mist-300);
  background:rgb(16 16 22/.9);box-shadow:inset 0 0 0 1px var(--ink-700);vertical-align:.05rem}
.nv-verlauf__mehr{color:var(--mist-600);font-style:italic}
.nv-verlauf__hinweis{margin-top:1.25rem;font-size:.8125rem;color:var(--mist-600)}
.nv-verlauf__fuss{margin-top:1rem;font-size:.875rem}

/* Puls-Herz + Verlauf-Schublade ---------------------------------------------
   Das Herz pocht am linken Rand und macht neugierig; ein Klick faehrt die
   Schublade mit dem Aenderungsverlauf herein. Umgeschaltet wird ueber eine
   versteckte Checkbox (#nv-puls-schalter) - so oeffnet und schliesst es auch
   ohne JavaScript. site.js legt nur Esc, Tastatur und den Fokus darueber.
   Der Verlauf lebt jetzt HIER statt als eigener Abschnitt: das spart der Seite
   rund tausend Pixel Laenge. */

/* --- das pochende Herz --- */
.nv-puls{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:45;
  display:flex;align-items:center;justify-content:center;width:2.75rem;height:3.25rem;
  padding-left:.25rem;border:1px solid var(--ink-700);border-left:none;
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  background:rgb(22 22 29/.92);backdrop-filter:blur(8px);color:var(--accent-500);
  cursor:pointer;box-shadow:2px 0 20px -6px rgb(225 29 47/.4);
  transition:width var(--dur-fast),color var(--dur-fast),background-color var(--dur-fast)}
.nv-puls:hover,.nv-puls:focus-visible{width:3.25rem;color:var(--accent-400);background:var(--ink-800);outline:none}
.nv-puls:focus-visible{box-shadow:2px 0 20px -6px rgb(225 29 47/.4),0 0 0 2px var(--accent-500)}
.nv-puls .nv-i{position:relative;z-index:1;animation:nv-poch 1.8s var(--ease-soft) infinite}
/* der Ring, der nach aussen laeuft und verblasst */
.nv-puls__ring{position:absolute;left:50%;top:50%;width:1.5rem;height:1.5rem;margin:-.75rem 0 0 -.75rem;
  border-radius:var(--radius-full);background:var(--accent-500);opacity:0;
  animation:nv-poch-ring 1.8s var(--ease-soft) infinite}
@keyframes nv-poch{0%,100%{transform:scale(1)}15%{transform:scale(1.22)}30%{transform:scale(1)}45%{transform:scale(1.14)}}
@keyframes nv-poch-ring{0%{transform:scale(.6);opacity:.5}70%,100%{transform:scale(2.4);opacity:0}}

/* --- Schleier hinter der Schublade --- */
.nv-puls-schleier{position:fixed;inset:0;z-index:55;background:rgb(11 11 15/.7);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity var(--dur-fast),visibility var(--dur-fast);cursor:pointer}

/* --- die Schublade --- */
.nv-verlauf-panel{position:fixed;left:0;top:0;z-index:60;display:flex;flex-direction:column;
  width:min(27rem,94vw);height:100dvh;background:var(--ink-950);border-right:1px solid var(--ink-700);
  box-shadow:var(--shadow-pop),0 0 90px -20px rgb(225 29 47/.25);
  transform:translateX(-100%);transition:transform var(--dur-rise) var(--ease-soft);
  will-change:transform}
.nv-verlauf-panel__kopf{position:relative;padding:1.75rem 1.75rem 1.375rem;border-bottom:1px solid var(--ink-700);
  background:linear-gradient(135deg,rgb(225 29 47/.14),transparent 70%)}
.nv-verlauf-panel__titel{font-size:1.375rem;font-weight:700;letter-spacing:var(--tracking-tight);margin-top:.5rem;
  display:flex;align-items:center;gap:.5rem}
.nv-verlauf-panel__titel::before{content:'';width:.55rem;height:.55rem;border-radius:var(--radius-full);
  background:var(--ok-500);box-shadow:0 0 0 3px rgb(34 197 94/.2);flex-shrink:0}
.nv-verlauf-panel__lebt{margin-top:.5rem;font-size:.875rem;line-height:var(--leading-relaxed);color:var(--mist-500);text-wrap:pretty}
.nv-verlauf-panel__zu{position:absolute;top:1rem;right:1rem;display:flex;align-items:center;justify-content:center;
  width:2rem;height:2rem;border-radius:var(--radius-full);border:1px solid var(--ink-700);background:var(--ink-900);
  color:var(--mist-500);font-size:.875rem;line-height:1;cursor:pointer;transition:color var(--dur-fast),border-color var(--dur-fast)}
.nv-verlauf-panel__zu:hover,.nv-verlauf-panel__zu:focus-visible{color:var(--mist-100);border-color:var(--accent-500);outline:none}
.nv-verlauf-panel__koerper{flex:1;overflow-y:auto;padding:1.5rem 1.75rem 2rem}
.nv-verlauf-panel__koerper .nv-verlauf{max-width:none;padding-left:1.5rem}

/* --- geoeffnet --- */
.nv-puls-schalter:checked ~ .nv-puls-schleier{opacity:1;visibility:visible}
.nv-puls-schalter:checked ~ .nv-verlauf-panel{transform:none}
.nv-puls-schalter:checked ~ .nv-puls{opacity:0;pointer-events:none;transition:opacity var(--dur-fast)}

@media(prefers-reduced-motion:reduce){
  .nv-puls .nv-i,.nv-puls__ring{animation:none}
  .nv-verlauf-panel{transition:none}
}

/* Ablauf: gleichmaessig verteilte Karten an einer Linie ---------------------
   Vier Karten gleich breit und gleich hoch, gleichmaessig ueber die Breite
   verteilt. Darueber ein offenes Band mit einer waagerechten Linie und den
   Ziffern 1-4; ein Lichtpunkt wandert dauerhaft von 1 nach 4 (der Zustand, der
   mitwandert). Kurze Verbinder fuehren von jeder Ziffer zur Karte.

   Karten, Ziffern und Linie teilen sich dasselbe 0..100-Raster; das SVG nutzt
   preserveAspectRatio="none" und nicht mitskalierende Striche, damit die Linie
   bei jeder Breite genau durch die Ziffern laeuft. */
.nv-schlange{position:relative;width:100%;aspect-ratio:100/22;margin-top:.5rem}
.nv-schlange__pfad{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.nv-schlange__pfad path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
.nv-schlange__basis{stroke:url(#nv-schlange-farbe);stroke-width:2;opacity:.4}
.nv-schlange__runner{stroke:url(#nv-schlange-farbe);stroke-width:3.5;stroke-dasharray:12 88;
  filter:drop-shadow(0 0 5px rgb(255 59 78/.75));animation:nv-fliessen 3.4s linear infinite}
@keyframes nv-fliessen{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}

/* die Ziffern auf der Linie */
.nv-schlange__ziffern{position:absolute;inset:0;margin:0;pointer-events:none}
.nv-schlange__num{position:absolute;left:calc(var(--x)*1%);top:13%;transform:translate(-50%,-50%);
  display:flex;width:1.9rem;height:1.9rem;align-items:center;justify-content:center;
  border-radius:var(--radius-full);background:var(--ink-950);color:var(--accent-400);
  font-size:.8125rem;font-weight:700;box-shadow:inset 0 0 0 2px var(--accent-500),0 0 0 5px rgb(225 29 47/.12)}

/* die Karten */
.nv-schlange__liste{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.nv-schlange__karte{position:absolute;left:calc(var(--x)*1%);top:30%;bottom:2%;transform:translateX(-50%);
  width:15rem;max-width:23vw;padding:1.125rem 1.25rem;display:flex;flex-direction:column;gap:.5rem;
  border-radius:var(--radius-xl);border:1px solid var(--ink-700);background:rgb(22 22 29/.92);
  box-shadow:var(--shadow-card);backdrop-filter:blur(6px);
  transition:transform var(--dur-fast),border-color var(--dur-fast),box-shadow var(--dur-fast)}
.nv-schlange__karte:hover{border-color:var(--accent-600);box-shadow:var(--shadow-card),var(--glow-hover);
  transform:translateX(-50%) translateY(-5px);z-index:3}
/* Ziffer in der Karte: am Schreibtisch nur fuer Screenreader, am Telefon sichtbar */
.nv-schlange__num-innen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nv-schlange__kopf{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.nv-schlange__titel{font-size:1rem;font-weight:700;letter-spacing:var(--tracking-tight);color:var(--mist-100)}
.nv-schlange__text{font-size:.8125rem;line-height:var(--leading-snug);color:var(--mist-500);text-wrap:pretty}
.nv-schlange__tag{font-size:var(--text-2xs);color:var(--mist-100)}
/* Im Etikett stehen Radarr/Sonarr als Verweise (damit das Verlinkungs-Skript
   nicht kollidiert), sollen aber weiss wie der Titel sein statt rot -
   anklickbar muessen sie hier nicht wirken. */
.nv-schlange__tag a{color:var(--mist-100)}
.nv-schlange__tag a:hover{color:var(--mist-100)}

/* Auf schmalen Bildschirmen wird daraus eine ruhige senkrechte Kette. */
@media(max-width:64rem){
  .nv-schlange{aspect-ratio:auto;display:block;margin-top:1.5rem;padding-left:1.25rem}
  .nv-schlange__pfad,.nv-schlange__ziffern{display:none}
  .nv-schlange::before{content:'';position:absolute;left:.3125rem;top:.5rem;bottom:.5rem;width:2px;
    background:linear-gradient(to bottom,var(--accent-600),var(--accent-700),transparent)}
  .nv-schlange__liste{position:static;display:flex;flex-direction:column;gap:1rem}
  .nv-schlange__karte{position:relative;left:auto;top:auto;bottom:auto;transform:none;width:auto;max-width:none}
  .nv-schlange__karte:hover{transform:none}
  /* Ziffer wird sichtbar und wandert an die Linie */
  .nv-schlange__num-innen{position:absolute;width:1.9rem;height:1.9rem;padding:0;margin:0;overflow:visible;
    clip:auto;left:-1.25rem;top:1.125rem;transform:translateX(-50%);
    display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);
    background:var(--ink-950);color:var(--accent-400);font-size:.8125rem;font-weight:700;
    box-shadow:inset 0 0 0 2px var(--accent-500),0 0 0 5px rgb(225 29 47/.12)}
}
@media(prefers-reduced-motion:reduce){.nv-schlange__runner{display:none}}

/* Puls-Herz auf dem Telefon: fester runder Knopf unten links. */
@media(max-width:40rem){
  .nv-puls{left:1rem;right:auto;top:auto;bottom:1rem;transform:none;
    width:3.25rem;height:3.25rem;padding-left:0;border-radius:var(--radius-full);border:1px solid var(--ink-700)}
  .nv-puls:hover,.nv-puls:focus-visible{width:3.25rem}
}

/* Vergleichstabelle Seerr <-> Nexview: nutzt die Rollen-Tabelle, hebt aber die
   Nexview-Spalte dezent hervor (heller Grund, Kopf im Akzent). */
.nx-roles th.uns{color:var(--accent-400)}
.nx-roles td.uns{background:rgb(255 255 255/.03)}
.nv-vergleich{margin-top:1.25rem}
/* Vergleichstabelle: erste Zeilen immer sichtbar, Rest per Knopf auf -
   ohne JavaScript ueber eine versteckte Checkbox. */
.nv-vergleich-alle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.nv-vergleich__extra{display:none}
.nv-vergleich-alle:checked ~ .nv-scroll-x .nv-vergleich__extra{display:table-row}
.nv-vergleich__auf{display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem;cursor:pointer;
  padding:.5rem 1.125rem;border-radius:var(--radius-full);border:1px solid var(--ink-700);
  background:var(--ink-900);font-size:.875rem;font-weight:600;color:var(--mist-300);
  transition:border-color var(--dur-fast),color var(--dur-fast)}
.nv-vergleich__auf:hover,.nv-vergleich-alle:checked ~ .nv-vergleich__auf{border-color:var(--accent-500);color:var(--mist-100)}
.nv-vergleich-alle:focus-visible ~ .nv-vergleich__auf{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.nv-vergleich__weniger{display:none}
.nv-vergleich-alle:checked ~ .nv-vergleich__auf .nv-vergleich__mehr{display:none}
.nv-vergleich-alle:checked ~ .nv-vergleich__auf .nv-vergleich__weniger{display:inline}
.nv-vergleich__pfeil{transition:transform var(--dur-fast)}
.nv-vergleich-alle:checked ~ .nv-vergleich__auf .nv-vergleich__pfeil{transform:rotate(180deg)}