/* ==========================================================================
   NotivaX - Produktseite
   Alle eigenen Klassen tragen den Vorsatz nx-.

   Farbwelt aus NotivaX_Logo_Web_Kit ("Red X", 23.08.2026).
   Bewusster Unterschied zur Anwendung: Dort ist Rot Warnfarbe und
   destruktiven Aktionen vorbehalten. Auf einer Werbeseite gibt es keine
   destruktiven Aktionen - hier darf Rot Akzentfarbe sein.

   Zwei harte Regeln, die den Rest tragen:
   - Rot ist keine Fliesstextfarbe. #FF111D auf #080B11 ergibt 5,0:1 -
     genug fuer Ueberschriften und Knoepfe, zu wenig fuer Absaetze.
   - Fliesstext ist nicht reinweiss. Weiss bleibt den Ueberschriften
     vorbehalten; daraus entsteht die Hierarchie ohne weitere Groessen.
   ========================================================================== */

:root {
  --nx-grund:         #080B11;
  --nx-grund-erhoben: #0E131C;
  --nx-grund-tief:    #05070B;
  --nx-linie:         rgba(255, 255, 255, .08);
  --nx-linie-stark:   rgba(255, 255, 255, .16);

  --nx-text:          #FFFFFF;
  --nx-text-lauf:     #B4BDCC;
  --nx-text-leise:    #7C8697;

  --nx-rot:           #FF111D;
  --nx-rot-hell:      #FF4A53;
  --nx-rot-hauch:     rgba(255, 17, 29, .14);
  --nx-rot-schein:    rgba(255, 17, 29, .30);

  --nx-navy:          #1B2B4B;

  --nx-bahn:          1180px;
  --nx-bahn-weit:     1400px;
  --nx-rand:          24px;
  --nx-radius:        12px;

  --nx-kopf:  "Saira", system-ui, sans-serif;
  --nx-lauf:  "Source Sans 3", system-ui, sans-serif;

  --nx-luft:  clamp(72px, 9vw, 128px);
}

/* --------------------------------------------------------------- Grundlage */

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

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  background: var(--nx-grund);
  color: var(--nx-text-lauf);
  font-family: var(--nx-lauf);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 1100px) { body { font-size: 19px; } }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--nx-kopf);
  color: var(--nx-text);
  line-height: 1.15;
  font-weight: 600;
  margin: 0 0 .6em;
  letter-spacing: -.01em;
}

h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }

p { margin: 0 0 1.1em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

strong { color: var(--nx-text); font-weight: 600; }

a { color: var(--nx-rot-hell); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--nx-rot); }

:focus-visible {
  outline: 2px solid var(--nx-rot-hell);
  outline-offset: 3px;
  border-radius: 4px;
}

.nx-nur-vorlesen {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ Bahnen */

.nx-bahn {
  width: min(var(--nx-bahn), 100% - 2 * var(--nx-rand));
  margin-inline: auto;
}

.nx-bahn--weit { width: min(var(--nx-bahn-weit), 100% - 2 * var(--nx-rand)); }

.nx-abschnitt { padding-block: var(--nx-luft); position: relative; }
.nx-abschnitt--tief    { background: var(--nx-grund-tief); }
.nx-abschnitt--erhoben { background: var(--nx-grund-erhoben); }
.nx-abschnitt--navy    { background: linear-gradient(180deg, var(--nx-grund) 0%, #0B1220 50%, var(--nx-grund) 100%); }

/* Der einzige wiederkehrende rote Akzent: ein kurzer Strich ueber dem Titel.
   Er haelt die Kapitel zusammen, ohne dass Rot in den Text muss. */
.nx-marke {
  font-family: var(--nx-kopf);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nx-text-leise);
  margin: 0 0 1.1rem;
  display: flex; align-items: center; gap: .9rem;
}
.nx-marke::before {
  content: ""; width: 48px; height: 1px;
  background: var(--nx-rot); flex: none;
}

.nx-vorspann {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--nx-text-lauf);
  max-width: 62ch;
}

/* ------------------------------------------------------------------- Kopf */

.nx-kopfleiste {
  position: sticky; top: 0; z-index: 40;
  background: rgba(8, 11, 17, .88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--nx-linie);
}
.nx-kopfleiste-inhalt {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 64px; flex-wrap: wrap;
}
.nx-zurueck {
  font-family: var(--nx-kopf); font-size: .9rem; font-weight: 500;
  color: var(--nx-text-leise); text-decoration: none; white-space: nowrap;
}
.nx-zurueck:hover { color: var(--nx-text); }
.nx-kopf-nav {
  display: flex; gap: 1.4rem; margin-left: auto;
  font-family: var(--nx-kopf); font-size: .9rem; flex-wrap: wrap;
}
.nx-kopf-nav a { color: var(--nx-text-leise); text-decoration: none; white-space: nowrap; }
.nx-kopf-nav a:hover { color: var(--nx-text); }

/* Auf dem Telefon rutscht die Navigation in eine zweite Zeile ueber die
   volle Breite. Sie ausblenden waere hier falsch: Seit die Seite in drei
   Teile zerfaellt, ist sie der einzige Weg zwischen ihnen. */
@media (max-width: 860px) {
  /* Die Kopfleiste wird zweizeilig - Sprungziele muessen weiter runter. */
  html { scroll-padding-top: 112px; }
  .nx-kopfleiste-inhalt { padding-block: .5rem; }
  .nx-kopf-nav {
    order: 3; width: 100%; margin-left: 0;
    gap: 1.1rem; font-size: .85rem;
    padding-top: .5rem; border-top: 1px solid var(--nx-linie);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
}

/* ------------------------------------------------------------------- Hero */

.nx-hero { padding-top: clamp(56px, 8vw, 104px); padding-bottom: 0; text-align: center; overflow: hidden; }
.nx-hero-inhalt { position: relative; z-index: 1; }

/* Der weiche rote Schein greift das leuchtende X auf, ohne dass ein
   zweites rotes Element noetig waere. */
.nx-hero::before {
  content: ""; position: absolute;
  top: -80px; left: 50%; transform: translateX(-50%);
  width: min(720px, 90vw); height: 420px;
  background: radial-gradient(ellipse at center, var(--nx-rot-schein) 0%, transparent 68%);
  filter: blur(80px); pointer-events: none;
}

.nx-hero-logo { width: min(360px, 76vw); margin: 0 auto 2.2rem; }
.nx-hero h1 { margin-bottom: .35em; }
.nx-hero-unterzeile {
  font-family: var(--nx-kopf); font-weight: 500;
  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
  color: var(--nx-text); margin: 0 auto 1.4em; max-width: 30ch;
}
.nx-hero p.nx-hero-satz { margin-inline: auto; max-width: 56ch; }

.nx-knopfreihe { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }

.nx-knopf {
  font-family: var(--nx-kopf); font-weight: 600; font-size: 1rem;
  padding: .8rem 1.7rem; border-radius: 999px;
  text-decoration: none; border: 1px solid transparent;
  transition: background .18s, border-color .18s, color .18s;
  display: inline-block;
  /* Ohne das scheint bei <button> der helle Standardknopf des Browsers
     durch - bei <a> faellt es nicht auf, weil Verweise keinen Grund
     haben. Beides nutzt dieselbe Klasse, also gehoert es hierher. */
  background: transparent;
  cursor: pointer;
}
.nx-knopf--haupt { background: var(--nx-rot); color: #fff; }
.nx-knopf--haupt:hover { background: var(--nx-rot-hell); color: #fff; }
.nx-knopf--rand { border-color: var(--nx-linie-stark); color: var(--nx-text); }
.nx-knopf--rand:hover { border-color: var(--nx-text); color: var(--nx-text); }

.nx-beleg {
  display: flex; gap: .6rem 1.6rem; justify-content: center; flex-wrap: wrap;
  margin-top: 2.4rem; font-size: .92rem; color: var(--nx-text-leise);
}
.nx-beleg span { display: flex; align-items: center; gap: .55rem; }
.nx-beleg span::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--nx-rot); flex: none;
}

/* Das angeschnittene Bild laedt zum Weiterrollen ein. */
.nx-hero-bild {
  margin-top: clamp(48px, 6vw, 80px);
  max-height: 46vh; overflow: hidden;
  border-top-left-radius: var(--nx-radius);
  border-top-right-radius: var(--nx-radius);
  border: 1px solid var(--nx-navy); border-bottom: 0;
  box-shadow: 0 -8px 60px rgba(0, 0, 0, .6);
}

/* ------------------------------------------------------------------ Bilder */

.nx-bild {
  border: 1px solid var(--nx-navy);
  border-radius: var(--nx-radius);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  background: var(--nx-grund-erhoben);
  padding: 0; margin: 0; display: block; width: 100%;
  cursor: zoom-in;
}
.nx-bild img { width: 100%; }

.nx-bildunterschrift {
  font-size: .88rem; color: var(--nx-text-leise);
  margin: .8rem 0 0; max-width: none;
}
.nx-bildunterschrift--mitte { text-align: center; }

.nx-bild-gruppe { display: grid; gap: 1.4rem; }
@media (min-width: 760px) { .nx-bild-gruppe--zwei { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .nx-bild-gruppe--vier { grid-template-columns: 1fr 1fr; } }

/* ----------------------------------------------------------------- Kapitel */

.nx-kapitel { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 940px) {
  .nx-kapitel { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  /* Im Wechsel: jedes zweite Kapitel spiegelt sich. */
  .nx-kapitel--gespiegelt > .nx-kapitel-text { order: 2; }
}
.nx-kapitel + .nx-kapitel { margin-top: var(--nx-luft); }

.nx-hervor {
  font-family: var(--nx-kopf); font-weight: 600;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  color: var(--nx-text); line-height: 1.35;
  border-left: 2px solid var(--nx-rot);
  padding-left: 1.1rem; margin: 1.8rem 0; max-width: 40ch;
}

/* --------------------------------------------------------------- Ebenenbild
   Die vier Eintragungsebenen als gestapelte Streifen: Das Bild der
   "Schichten" traegt hier mehr als eine Zeilenliste. */

.nx-ebenen { display: grid; gap: .7rem; margin: 1.6rem 0; }
.nx-ebene {
  background: var(--nx-grund-erhoben);
  border: 1px solid var(--nx-linie);
  border-left: 3px solid var(--nx-ebene-farbe, var(--nx-text-leise));
  border-radius: 8px; padding: .85rem 1.1rem;
  display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap;
}
.nx-ebene b { font-family: var(--nx-kopf); color: var(--nx-text); min-width: 8.5rem; }
.nx-ebene span { font-size: .95rem; color: var(--nx-text-leise); }

/* ----------------------------------------------------------------- Kacheln */

.nx-raster { display: grid; gap: 1.4rem; }
@media (min-width: 700px)  { .nx-raster--vier { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .nx-raster--vier { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 700px)  { .nx-raster--drei { grid-template-columns: repeat(3, 1fr); } }

.nx-karte {
  background: var(--nx-grund-erhoben);
  border: 1px solid var(--nx-linie);
  border-radius: var(--nx-radius);
  overflow: hidden; display: flex; flex-direction: column;
}
.nx-karte-bild { border-bottom: 1px solid var(--nx-linie); aspect-ratio: 16 / 10; overflow: hidden; }
.nx-karte-bild img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.nx-karte-text { padding: 1.3rem 1.4rem 1.5rem; }
.nx-karte-text h3 { margin-bottom: .45em; }
.nx-karte-text p { font-size: .96rem; margin: 0; }

/* ------------------------------------------------------------- Kennzahlen */

.nx-kennzahlen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1.6rem; margin: 2.4rem 0 0; text-align: center;
}
.nx-kennzahl b {
  display: block; font-family: var(--nx-kopf); font-weight: 600;
  font-size: clamp(2rem, 4vw, 2.8rem); color: var(--nx-rot); line-height: 1;
}
.nx-kennzahl span { display: block; margin-top: .5rem; font-size: .9rem; color: var(--nx-text-leise); }

/* ------------------------------------------------------------- Datenblatt */

.nx-datenblatt {
  border: 1px solid var(--nx-linie); border-radius: var(--nx-radius);
  background: var(--nx-grund-erhoben); overflow: hidden;
}
.nx-datenblatt dl { margin: 0; display: grid; }
@media (min-width: 620px) { .nx-datenblatt dl { grid-template-columns: minmax(9rem, 14rem) 1fr; } }
.nx-datenblatt dt {
  font-family: var(--nx-kopf); font-weight: 600; color: var(--nx-text);
  padding: .8rem 1.3rem; border-top: 1px solid var(--nx-linie);
}
.nx-datenblatt dd {
  margin: 0; padding: .8rem 1.3rem; color: var(--nx-text-lauf);
}
@media (min-width: 620px) { .nx-datenblatt dd { border-top: 1px solid var(--nx-linie); } }
.nx-datenblatt dl > :is(dt, dd):first-of-type { border-top: 0; }
@media (min-width: 620px) { .nx-datenblatt dl > dd:first-of-type { border-top: 0; } }

/* --------------------------------------------------------- Serviervorschlag */

.nx-vorschlag { display: flex; flex-direction: column; }
.nx-vorschlag--empfohlen { border-color: var(--nx-rot); }
.nx-vorschlag-zeichnung {
  background: var(--nx-grund-tief); border-bottom: 1px solid var(--nx-linie);
  padding: 1.6rem 1.4rem; display: flex; justify-content: center;
}
.nx-vorschlag-zeichnung svg { width: 100%; max-width: 220px; height: auto; }
.nx-vorschlag-preis {
  font-family: var(--nx-kopf); font-weight: 600;
  font-size: 1.5rem; color: var(--nx-rot);
  margin-top: auto; padding: 0 1.4rem 1.5rem;
}
/* Der Hinweis sitzt INNERHALB der Karte. Auf dem Rand liegend wuerde ihn
   das overflow:hidden der Karte zur Haelfte abschneiden. */
.nx-empfehlung-marke {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  background: var(--nx-rot); color: #fff;
  font-family: var(--nx-kopf); font-weight: 600; font-size: .7rem;
  letter-spacing: .09em; text-transform: uppercase;
  padding: .28rem .7rem; border-radius: 999px;
  line-height: 1.3;
}
.nx-vorschlag { position: relative; }

/* ---------------------------------------------------------------- Fahrplan */

/*
 * Zwei Zeilen statt drei Spalten.
 *
 * „Fertig“ ist auf 24 Punkte gewachsen, „Als Nächstes“ und „Später“ haben
 * je sechs. Drei gleich breite Spalten ergäben 853 px neben 149 px — das
 * sieht nach einem Fehler aus, obwohl es die Wahrheit ist. Also bekommt
 * das Fertige die ganze Breite und teilt sich innen auf; darunter stehen
 * die beiden kurzen Listen nebeneinander.
 */
.nx-fahrplan { display: grid; gap: 1.4rem; margin-top: 2.4rem; }
@media (min-width: 900px) {
  .nx-fahrplan { grid-template-columns: repeat(2, 1fr); }
  .nx-fahrplan-spalte--fertig { grid-column: 1 / -1; }
  /* Die Gruppen fließen in zwei Säulen. `break-inside` hält eine
     Zwischenüberschrift bei ihrer Liste - sonst steht „Am Pult“ unten in
     der linken Säule und seine Punkte oben in der rechten. */
  .nx-fahrplan-spalte--fertig > h4,
  .nx-fahrplan-spalte--fertig > ul { break-inside: avoid; }
  .nx-fahrplan-spalte--fertig { column-count: 2; column-gap: 2.4rem; }
  .nx-fahrplan-spalte--fertig > h3 { column-span: all; }
}
.nx-fahrplan-spalte {
  background: var(--nx-grund-erhoben); border: 1px solid var(--nx-linie);
  border-radius: var(--nx-radius); padding: 1.4rem;
}
.nx-fahrplan-spalte h3 { font-size: 1.05rem; margin-bottom: .9em; }
/* Zwischenüberschrift in der ersten Spalte. Sie ist auf 19 Punkte
   gewachsen; ohne Gliederung liest sie niemand zu Ende. */
.nx-fahrplan-spalte h4 {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--nx-text-leise); margin: 1.5em 0 .6em;
}
.nx-fahrplan-spalte h4:first-of-type { margin-top: 0; }
.nx-fahrplan-spalte ul { margin: 0; padding-left: 1.1rem; }
.nx-fahrplan-spalte li { margin-bottom: .5em; font-size: .96rem; }
.nx-fahrplan-spalte--fertig  { border-left: 3px solid var(--nx-rot); }
.nx-fahrplan-spalte--naechst { border-left: 3px solid var(--nx-text-leise); }
.nx-fahrplan-spalte--spaeter { border-left: 3px solid var(--nx-linie-stark); }

/* ------------------------------------------------------------------ Kasten */

.nx-kasten {
  border: 1px solid var(--nx-linie-stark); border-radius: var(--nx-radius);
  background: var(--nx-grund-erhoben); padding: clamp(1.4rem, 3vw, 2.2rem);
}
.nx-kasten h3 { margin-bottom: .6em; }

/* -------------------------------------------------------------- Aufklapper */

.nx-warum {
  border: 1px solid var(--nx-linie); border-radius: 8px;
  background: var(--nx-grund-erhoben); margin: 1.6rem 0; max-width: 52ch;
}
.nx-warum summary {
  cursor: pointer; padding: .8rem 1.1rem; list-style: none;
  font-family: var(--nx-kopf); font-weight: 600; color: var(--nx-text);
  display: flex; align-items: center; gap: .6rem;
}
.nx-warum summary::-webkit-details-marker { display: none; }
.nx-warum summary::before {
  content: "?"; width: 1.4rem; height: 1.4rem; flex: none;
  border-radius: 50%; background: var(--nx-rot-hauch); color: var(--nx-rot);
  display: grid; place-items: center; font-size: .85rem;
}
.nx-warum[open] summary { border-bottom: 1px solid var(--nx-linie); }
.nx-warum-inhalt { padding: .9rem 1.1rem 1.1rem; font-size: .96rem; }

/* -------------------------------------------------------------------- Fuss */

.nx-fuss { border-top: 1px solid var(--nx-linie); padding-block: clamp(48px, 6vw, 72px); background: var(--nx-grund-tief); }
.nx-fuss-raster { display: grid; gap: 2rem; }
@media (min-width: 800px) { .nx-fuss-raster { grid-template-columns: 2fr 1fr 1fr; } }
.nx-fuss-wortmarke { width: 180px; margin-bottom: 1rem; }
.nx-fuss h4 {
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--nx-text-leise); margin-bottom: .9em;
}
.nx-fuss p, .nx-fuss li { font-size: .94rem; }
.nx-fuss ul { list-style: none; margin: 0; padding: 0; }
.nx-fuss li { margin-bottom: .4em; }
.nx-fuss a { color: var(--nx-text-lauf); text-decoration: none; }
.nx-fuss a:hover { color: var(--nx-text); text-decoration: underline; }

/* ------------------------------------------------------------------- Lupe */

.nx-lupe {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(3, 5, 8, .93);
  border: 0; padding: clamp(1rem, 4vw, 3rem); margin: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
}
.nx-lupe::backdrop { background: rgba(3, 5, 8, .93); }
.nx-lupe[open] { display: grid; place-items: center; }
.nx-lupe img {
  max-width: 100%; max-height: 82vh; object-fit: contain;
  border-radius: var(--nx-radius); border: 1px solid var(--nx-navy);
}
.nx-lupe figcaption { margin-top: 1rem; text-align: center; color: var(--nx-text-leise); font-size: .92rem; }
.nx-lupe-zu {
  position: absolute; top: 1rem; right: 1.4rem;
  background: none; border: 0; color: var(--nx-text-leise);
  font-size: 2rem; line-height: 1; cursor: pointer; padding: .3rem .6rem;
}
.nx-lupe-zu:hover { color: var(--nx-text); }

/* ------------------------------------------------------- Seitentitel schmal */

.nx-abschnitt--schmal { padding-bottom: clamp(40px, 5vw, 64px); }
.nx-titel-mittel { font-size: clamp(2rem, 4.4vw, 3rem); }

/* Sprungliste innerhalb einer Seite */
.nx-inhalt {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin-top: 2.2rem;
}
.nx-inhalt a {
  font-family: var(--nx-kopf); font-size: .92rem;
  color: var(--nx-text-lauf); text-decoration: none;
  border: 1px solid var(--nx-linie); border-radius: 999px;
  padding: .45rem 1rem; background: var(--nx-grund-erhoben);
  transition: border-color .18s, color .18s;
}
.nx-inhalt a:hover { border-color: var(--nx-rot); color: var(--nx-text); }

/* Gruppenbeschriftung in der Sprungliste - bricht die Zeile um */
.nx-inhalt-gruppe {
  flex-basis: 100%; margin-top: .4rem;
  font-family: var(--nx-kopf); font-size: .78rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--nx-text-leise);
}
.nx-inhalt-gruppe:first-child { margin-top: 0; }

/* ------------------------------------------- Seitennavigation (Einbau)
   Ersetzt in der Einbaufassung die Kopfleiste. Bewusst NICHT klebend -
   die Website hat ihre eigene Navigation oben, ein zweites Band darunter
   waere eines zu viel. */

.nx-seitennav {
  border-bottom: 1px solid var(--nx-linie);
  background: var(--nx-grund-erhoben);
}
.nx-seitennav-inhalt {
  display: flex; align-items: center; gap: 1.4rem;
  flex-wrap: wrap; min-height: 56px;
  font-family: var(--nx-kopf); font-size: .95rem;
}
.nx-seitennav-marke {
  font-weight: 600; color: var(--nx-text);
  letter-spacing: .04em; margin-right: .4rem;
}
.nx-seitennav a { color: var(--nx-text-leise); text-decoration: none; white-space: nowrap; }
.nx-seitennav a:hover { color: var(--nx-text); }
.nx-seitennav a[aria-current="page"] {
  color: var(--nx-text);
  box-shadow: inset 0 -2px 0 var(--nx-rot);
  padding-bottom: 3px;
}

/* ------------------------------------------------------------- Wortmarke */

.nx-wortmarke { display: flex; align-items: center; }
.nx-wortmarke img { height: 22px; width: auto; }

/* Der aktive Reiter bekommt den einzigen roten Akzent der Kopfleiste. */
.nx-kopf-nav a[aria-current="page"] {
  color: var(--nx-text);
  box-shadow: inset 0 -2px 0 var(--nx-rot);
  padding-bottom: 3px;
}

/* ------------------------------------------------------------- Geraeterahmen
   Echter Screenshot in einem gezeichneten Tabletrahmen. Der Rahmen ist
   Beiwerk - der Inhalt darin ist unveraendert das, was die Anwendung
   wirklich anzeigt. */

.nx-geraet { display: flex; justify-content: center; }
.nx-geraet--tablet {
  --nx-rahmen: 14px;
}
.nx-geraet--tablet img {
  width: min(420px, 80%);
  border-radius: 10px;
  border: var(--nx-rahmen) solid #10151F;
  outline: 1px solid var(--nx-linie-stark);
  box-shadow:
    0 0 0 2px #05070B,
    0 30px 70px rgba(0, 0, 0, .6);
  background: var(--nx-grund);
}

/* ------------------------------------------------------------ Ausbaustufen */

.nx-stufe { position: relative; }
.nx-stufe-kopf {
  display: flex; align-items: center; gap: .9rem;
  padding: 1.3rem 1.4rem .2rem;
}
.nx-stufe-kopf h3 { margin: 0; font-size: 1.15rem; }
.nx-stufe-zahl {
  flex: none; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--nx-rot-hauch); color: var(--nx-rot);
  font-family: var(--nx-kopf); font-weight: 600;
  display: grid; place-items: center;
}
.nx-stufe-fuer {
  color: var(--nx-text-leise); font-style: italic;
  font-size: .94rem; margin-bottom: 1rem;
}
.nx-stufe-hinweis {
  font-size: .9rem; color: var(--nx-text-leise);
  border-top: 1px solid var(--nx-linie); padding-top: .9rem; margin-top: 1rem;
}

.nx-liste-ja, .nx-liste-nein { list-style: none; margin: 0 0 1rem; padding: 0; }
.nx-liste-ja li, .nx-liste-nein li {
  position: relative; padding-left: 1.5rem; margin-bottom: .4em; font-size: .95rem;
}
.nx-liste-ja li::before {
  content: ""; position: absolute; left: 2px; top: .55em;
  width: 8px; height: 4px; border-left: 2px solid var(--nx-rot);
  border-bottom: 2px solid var(--nx-rot); transform: rotate(-45deg);
}
.nx-liste-nein li { color: var(--nx-text-leise); }
.nx-liste-nein li::before {
  content: "—"; position: absolute; left: 0; top: 0; color: var(--nx-text-leise);
}

/* Waagrechtes Band auf der Ueberblicksseite */
.nx-stufen-band { display: grid; gap: 1.2rem; margin: 2.4rem 0; }
@media (min-width: 860px) { .nx-stufen-band { grid-template-columns: repeat(3, 1fr); } }
.nx-stufen-schritt {
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--nx-grund-erhoben);
  border: 1px solid var(--nx-linie);
  border-radius: var(--nx-radius); padding: 1.2rem;
}
.nx-stufen-schritt h3 { font-size: 1.05rem; margin-bottom: .4em; }
.nx-stufen-schritt p { font-size: .94rem; margin: 0; }

/* ------------------------------------------------------------------- Ruf */

.nx-kasten--ruf { border-left: 3px solid var(--nx-rot); }
.nx-kasten--ruf .nx-marke { margin-top: 0; }
.nx-kasten--ruf h2 { margin-top: 0; }
.nx-kasten--ruf h3 { font-size: 1rem; margin-bottom: .6em; }
.nx-kasten--ruf ul { margin: 0; padding-left: 1.1rem; }
.nx-kasten--ruf li { font-size: .95rem; margin-bottom: .4em; }

/* ------------------------------------------- Impressum und Datenschutz
   Langer Rechtstext in einem Dialog: heller Fliesstext, ruhige Breite,
   Kopf und Fuss bleiben stehen, der Inhalt rollt. */

.nx-rechtsdialog {
  border: 1px solid var(--nx-linie-stark);
  border-radius: var(--nx-radius);
  background: var(--nx-grund-erhoben);
  color: var(--nx-text-lauf);
  padding: 0;
  width: min(860px, 100% - 2rem);
  max-width: none;
  max-height: 86vh;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .7);
}
.nx-rechtsdialog::backdrop { background: rgba(3, 5, 8, .82); }
.nx-rechtsdialog[open] { display: flex; flex-direction: column; }

.nx-rechtsdialog-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--nx-linie);
  background: var(--nx-grund-tief);
  flex: none;
}
.nx-rechtsdialog-kopf h2 { margin: 0; font-size: 1.3rem; }
.nx-rechtsdialog-zu {
  background: none; border: 0; color: var(--nx-text-leise);
  font-size: 1.9rem; line-height: 1; cursor: pointer; padding: 0 .3rem;
}
.nx-rechtsdialog-zu:hover { color: var(--nx-text); }

.nx-rechtsdialog-inhalt {
  overflow-y: auto; padding: 1.4rem;
  font-size: .95rem; line-height: 1.62;
  overscroll-behavior: contain;
  /* Die helle Standard-Bildlaufleiste faellt auf dunklem Grund auf wie
     ein Fremdkoerper. */
  scrollbar-width: thin;
  scrollbar-color: var(--nx-linie-stark) transparent;
}
.nx-rechtsdialog-inhalt::-webkit-scrollbar { width: 10px; }
.nx-rechtsdialog-inhalt::-webkit-scrollbar-track { background: transparent; }
.nx-rechtsdialog-inhalt::-webkit-scrollbar-thumb {
  background: var(--nx-linie-stark); border-radius: 5px;
  border: 2px solid var(--nx-grund-erhoben);
}
.nx-rechtsdialog-inhalt::-webkit-scrollbar-thumb:hover {
  background: var(--nx-text-leise);
}
.nx-rechtsdialog-inhalt h3 {
  font-size: 1.05rem; margin: 1.8em 0 .5em;
}
.nx-rechtsdialog-inhalt h3:first-child { margin-top: 0; }
.nx-rechtsdialog-inhalt p { max-width: none; margin-bottom: .9em; }
.nx-rechtsdialog-inhalt ul { margin: 0 0 1em; padding-left: 1.2rem; }
.nx-rechtsdialog-inhalt li { margin-bottom: .45em; }
.nx-rechtsdialog-inhalt ul ul { margin-top: .45em; }
.nx-rechtsdialog-inhalt address {
  font-style: normal; color: var(--nx-text);
  margin: 0 0 1em; padding-left: .9rem;
  border-left: 2px solid var(--nx-rot);
}

.nx-rechtsdialog-fuss {
  padding: 1rem 1.4rem; border-top: 1px solid var(--nx-linie);
  background: var(--nx-grund-tief); text-align: right; flex: none;
}
/* In einem Rechtstext ist der Schliessen-Knopf kein Hauptweg - reinweiss
   waere hier das hellste Element auf dem Schirm. */
.nx-rechtsdialog-fuss .nx-knopf--rand { color: var(--nx-text-lauf); }
.nx-rechtsdialog-fuss .nx-knopf--rand:hover { color: var(--nx-text); }

/* Knopf in der Fusszeile, sieht aus wie ein Verweis.
   Bewusst leiser als die Kontaktverweise darueber: Rechtliches gehoert
   erreichbar, aber nicht betont - genau wie die Zeile "© 2026" daneben. */
.nx-fuss-knopf {
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--nx-text-leise);
  cursor: pointer; text-align: left;
}
.nx-fuss-knopf:hover { color: var(--nx-text-lauf); text-decoration: underline; }

/* ---------------------------------------------------------------- Bewegung */

.nx-auf { opacity: 0; transform: translateY(12px); transition: opacity .4s ease, transform .4s ease; }
.nx-auf.nx-da { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nx-auf { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}