/* ==========================================================================
   Seitenspezifisches. Farben, Radien und Abstände kommen ausschließlich aus
   `tokens.css`; hier steht kein einziger neuer Farbwert.
   ========================================================================== */

/* 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}
/* Die Wortmarke wie in der Anwendung: „nex" in der Textfarbe, „deck" in
   Cyan. Space Grotesk, weit gesperrt, Versalien — dieselbe Behandlung wie
   dort. */
.nv-brand__word{font-family:var(--font-display);font-size:1.0625rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase}
.nv-brand__word b{color:var(--accent-500);font-weight:600}

/* ⚠️ **`min-width:0` gehoert an BEIDE.** Ein Flex-Kind schrumpft ohne das
   nicht unter die Breite seines Inhalts. Die Leiste stand deshalb auf 430 px
   siebzehn Pixel ueber dem Rand, und zwar erst, seit der Sprachschalter dazu
   kam: „Funktionen Anbindungen Installation" plus DE/EN passt nicht mehr.
   Auf Englisch fiel es nicht auf, die Woerter sind kuerzer. Genau so eine
   Stelle findet man im Entwurf am grossen Bildschirm nie. */
.nv-nav{display:flex;flex:1;min-width:0;justify-content:flex-end;align-items:center;gap:.25rem}
.nv-nav__links{display:flex;min-width:0;align-items:center;gap:.25rem}

/* Sprachumschalter -------------------------------------------------------
   ⚠️ **Zwei Buchstaben, keine Flagge.** Die nexmail-Seite nimmt Flaggen;
   das geht dort auf, weil es genau zwei sind. Eine Flagge ist aber ein Staat
   und keine Sprache (welche fuer Englisch? welche fuer Spanisch?), und bei
   einer dritten wird die Reihe breiter als der Platz in der Kopfzeile.
   Kuerzel wachsen mit und sagen genau das, was sie sagen sollen.

   Gebaut wie der Helligkeitsschalter daneben, damit die beiden in der
   Kopfzeile als ein Paar auftreten und nicht als zwei Einfaelle. */
.nv-sprache{display:flex;align-items:center;gap:1px;margin-left:.5rem;padding:2px;
  border-radius:var(--radius-full);border:1px solid var(--ink-700);background:var(--ink-900)}
.nv-sprache a{display:flex;align-items:center;line-height:1;
  font-family:var(--font-sans);font-size:.6875rem;font-weight:600;letter-spacing:.04em;
  padding:.22rem .5rem;border-radius:var(--radius-full);color:var(--mist-600);
  transition:background-color var(--dur-fast),color var(--dur-fast)}
.nv-sprache a:hover{color:var(--mist-100)}
.nv-sprache a[aria-current="true"]{background:rgb(var(--accent-500-rgb)/.18);
  color:var(--accent-500);box-shadow:inset 0 0 0 1px rgb(var(--accent-500-rgb)/.4)}

/* Hell / Dunkel — drei Stellungen in einer Pille, wie der Sprachumschalter
   daneben. Bewusst Text statt Symbolen: Sonne und Mond sind eindeutig, ein
   Symbol für „richte dich nach meinem Rechner" ist es nicht. */
.nv-fassung{display:flex;align-items:center;gap:1px;margin-left:.5rem;padding:2px;
  border-radius:var(--radius-full);border:1px solid var(--ink-700);background:var(--ink-900)}
.nv-fassung[hidden]{display:none}
.nv-fassung button{font:inherit;font-size:.6875rem;font-weight:600;letter-spacing:.02em;
  padding:.22rem .5rem;border:0;border-radius:var(--radius-full);background:transparent;
  color:var(--mist-600);cursor:pointer;white-space:nowrap;
  transition:background-color var(--dur-fast),color var(--dur-fast)}
.nv-fassung button:hover{color:var(--mist-100)}
.nv-fassung button[aria-pressed="true"]{background:rgb(var(--accent-500-rgb)/.18);
  color:var(--accent-500);box-shadow:inset 0 0 0 1px rgb(var(--accent-500-rgb)/.4)}
.nv-fassung button:focus-visible{outline:2px solid var(--accent-500);outline-offset:1px}

@media(max-width:64rem){
  .nv-navpill{padding:.375rem .625rem;font-size:.8125rem}
  .nv-header__github span{display:none}
}
@media(max-width:60rem){
  /* Wird es eng, fällt „System" weg. Wer es braucht, hat es am Rechner
     gesetzt — und die Seite folgt ihm dann ohnehin, solange niemand wählt. */
  .nv-fassung button[data-fassung="system"]{display:none}
}
@media(max-width:40rem){
  .nx-header__row{gap:.5rem}
  .nv-brand__word{display:none}
  .nv-nav{gap:.125rem}
  /* ⚠️ `min-width:0` gehört dazu. Ohne das schrumpft ein Flex-Kind nicht
     unter die Breite seines Inhalts, `overflow-x:auto` greift nie, und die
     Reihe schiebt Suche, Helligkeit und GitHub aus dem Bild. Auf 430 px war
     genau das der Fall. */
  .nv-nav__links{gap:.125rem;min-width:0;overflow-x:auto;scrollbar-width:none}
  .nv-nav__links::-webkit-scrollbar{display:none}
  .nv-navpill{padding:.3125rem .5rem;font-size:.75rem}
  .nv-sprache{margin-left:.25rem}
}
@media(max-width:30rem){.nv-fassung{display:none}}

/* Der Aufmacher -----------------------------------------------------------
   Derselbe Folien-Streifen wie auf der Nexview-Startseite: Das Bild liegt
   großflächig hinter dem Text, ein Schleier davor, rechts dasselbe Bild noch
   einmal gerahmt. Ohne JavaScript fährt das Band per CSS-Animation (die
   letzte Folie ist eine Kopie der ersten, damit die Schleife nahtlos bleibt);
   mit JavaScript übernimmt `site.js` Takt und Punkte. */
.nv-fokus{position:relative;overflow:hidden;
  border-block:1px solid rgb(var(--accent-500-rgb)/.35);background:var(--ink-950);
  box-shadow:inset 0 1px 0 rgb(var(--accent-400-rgb)/.12),inset 0 -1px 0 rgb(var(--accent-400-rgb)/.12)}
.nv-fokus--start{border-top:0}
/* --folien = Folien IM BAND, also echte plus die Kopie der ersten. */
.nv-fokus__band{display:flex;width:calc(var(--folien,5) * 100%)}
.nv-fokus__folie{position:relative;width:calc(100% / var(--folien,5));
  min-height:min(46rem,94vh);display:flex;align-items:center;overflow:hidden}
.nv-fokus__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.nv-fokus__schleier{position:absolute;inset:0;background:
  radial-gradient(70% 90% at 74% 52%,rgb(var(--accent-500-rgb)/.14),transparent 62%),
  /* Links fast deckend: Bei hellen Bildschirmfotos stünde der Text sonst AUF
     dem Bild statt davor. */
  linear-gradient(90deg,rgb(var(--ink-950-rgb)/.985) 0%,rgb(var(--ink-950-rgb)/.96) 42%,rgb(var(--ink-950-rgb)/.68) 70%,rgb(var(--ink-950-rgb)/.82) 100%),
  linear-gradient(0deg,rgb(var(--ink-950-rgb)/.92),transparent 50%)}
.nv-fokus__lage{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,32rem) minmax(0,1fr);gap:3rem;align-items:center;
  width:100%;padding-block:3.5rem}
.nv-fokus__inhalt{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.nv-fokus__inhalt .nx-h2{display:flex;flex-wrap:wrap;align-items:center;gap:.625rem;
  font-size:clamp(1.75rem,3vw,2.5rem)}
.nv-fokus__vorschau{margin:0;justify-self:end;width:min(100%,38rem);
  border-radius:var(--radius-xl);border:1px solid rgb(var(--accent-400-rgb)/.35);overflow:hidden;
  background:var(--ink-900);
  box-shadow:0 1.5rem 3.5rem rgb(var(--schatten-rgb)/calc(.55 * var(--schatten-staerke))),
             0 0 2.5rem rgb(var(--accent-500-rgb)/.18)}
/* ⚠️ `:where(img)` statt `img`: Die Regel darf nicht schwerer wiegen als
   `.nv-hell` / `.nv-dunkel` weiter unten. Mit gewöhnlichem `img` gewinnt sie
   deren `display:none` und beide Aufnahmen stehen übereinander im Rahmen. */
.nv-fokus__vorschau :where(img){width:100%;height:auto;display:block}

.nv-hero__mark{width:3.5rem;height:3.5rem;margin-bottom:.25rem}
.nv-hero__title{font-family:var(--font-display);font-size:var(--text-display);font-weight:600;
  line-height:1.02;margin:0;letter-spacing:.02em;text-transform:lowercase}
.nv-hero__title b{color:var(--accent-500);font-weight:600}
.nv-hero__lede{font-size:1.0625rem;max-width:34rem}
.nv-hero__frei{color:var(--accent-500);font-weight:600;display:block;margin-top:.5rem}
.nv-hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.5rem}
.nv-hero__meta{color:var(--mist-600);margin-top:.35rem;text-transform:none;letter-spacing:0;
  font-weight:400;font-family:var(--font-sans);font-size:.8125rem}

@media(prefers-reduced-motion:no-preference){
  .nv-fokus--f4 .nv-fokus__band{animation:nv-fokus-f4 27s ease-in-out infinite}
  .nv-fokus--f5 .nv-fokus__band{animation:nv-fokus-f5 32s ease-in-out infinite}
  @keyframes nv-fokus-f4{
    0%,22.5%{transform:translateX(0)}
    25%,47.5%{transform:translateX(-25%)}
    50%,72.5%{transform:translateX(-50%)}
    75%,97.5%{transform:translateX(-75%)}
    100%{transform:translateX(-75%)}
  }
  @keyframes nv-fokus-f5{
    0%,17.8%{transform:translateX(0)}
    20%,37.8%{transform:translateX(-20%)}
    40%,57.8%{transform:translateX(-40%)}
    60%,77.8%{transform:translateX(-60%)}
    80%,97.8%{transform:translateX(-80%)}
    100%{transform:translateX(-80%)}
  }
}
.js .nv-fokus__band{animation:none;transition:transform .7s var(--ease-soft)}
.nv-fokus--stumm .nv-fokus__band{transition:none}
.nv-fokus__punkte{position:absolute;left:50%;bottom:1.125rem;transform:translateX(-50%);
  z-index:2;display:none;gap:.5rem}
.js .nv-fokus__punkte{display:flex}
.nv-fokus__punkt{width:.625rem;height:.625rem;border-radius:50%;border:1px solid var(--mist-500);
  background:transparent;cursor:pointer;padding:0}
.nv-fokus__punkt[aria-selected="true"]{background:var(--accent-500);border-color:var(--accent-500)}
.nv-fokus__punkt:focus-visible{outline:2px solid var(--accent-500);outline-offset:2px}
@media(max-width:56rem){
  .nv-fokus__folie{min-height:0}
  .nv-fokus__lage{grid-template-columns:1fr;gap:1.5rem;padding-block:2.25rem;padding-bottom:3.25rem}
  .nv-fokus__vorschau{justify-self:start;width:100%}
}

/* Hell und dunkel im Bild -------------------------------------------------
   ⚠️ **Wo es beide Aufnahmen gibt, wird die Datei getauscht.** Nexview hellt
   seine 72 dunklen Bilder im hellen Modus per `filter` auf, weil es sie in
   hell gar nicht gibt. Von der Mail-Ansicht liegen hier beide Fassungen aus
   derselben Kulisse, und ein aufgehelltes dunkles Bild sieht nun einmal aus
   wie ein aufgehelltes dunkles Bild.

   Für die übrigen Aufnahmen bleibt es beim Filter. Sie liegen großflächig
   hinter Text; ein dunkles Bild unter einem hellen Schleier wird sonst grau
   und matschig. Die gerahmte Vorschau daneben bleibt unangetastet: In einem
   Rahmen mit Schatten steht ein dunkles Bild wie ein Bildschirm auf einem
   Schreibtisch. */
.nv-hell{display:none}
:root[data-theme="light"] .nv-dunkel{display:none}
:root[data-theme="light"] .nv-hell{display:block}
:root[data-theme="light"] .nv-fokus__bild:not(.nv-hell){
  filter:saturate(.2) brightness(2.15) contrast(.5)}
/* Gerahmte Bilder bekommen im Hellen einen sichtbaren Rand — ohne ihn
   schwimmt ein Bild auf hellem Grund. */
:root[data-theme="light"] .nv-fokus__vorschau,
:root[data-theme="light"] .nx-frame{
  box-shadow:0 1px 2px rgb(var(--schatten-rgb)/.1),0 12px 28px -14px rgb(var(--schatten-rgb)/.3)}

/* Die Klarstellungen unter dem Aufmacher ----------------------------------
   Beide beantworten eine Frage, die sonst offenbleibt und im Forum als Erstes
   gestellt wird. */
.nv-klar{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));
  padding-top:1.75rem;padding-bottom:.5rem}
.nv-klar__satz{margin:0;font-size:.875rem;line-height:var(--leading-snug);color:var(--mist-500);
  border:1px solid var(--ink-700);border-radius:var(--radius-full);padding:.7rem 1.1rem;
  background:var(--ink-850)}
@media(max-width:640px){.nv-klar__satz{border-radius:var(--radius-lg)}}

/* Abschnitt mit Streifenband im Rücken */
.nx-section--band{background:
  linear-gradient(180deg,var(--band-oben),transparent 6rem),
  linear-gradient(180deg,transparent,var(--band-unten)),
  linear-gradient(120deg,var(--band-1),var(--band-2) 45%,var(--band-3));
  border-block:1px solid rgb(var(--ink-700-rgb)/.6)}

/* Warum: drei nummerierte Sätze */
.nv-why{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.75rem}
.nv-why__item{display:flex;flex-direction:column;gap:.5rem}
.nv-why__num{font-family:var(--font-mono);font-size:.8125rem;font-weight:500;color:var(--accent-500)}
.nv-why__text{color:var(--mist-300);font-size:.9375rem;line-height:var(--leading-snug);text-wrap:pretty}

/* Text neben Bild, abwechselnd -------------------------------------------
   Auf einer Erklärseite steht der Text in Lesebreite — das lässt die halbe
   Seite leer, wenn er allein steht. Das Bild gehört daneben, nicht darunter:
   Man liest den Satz und sieht im selben Blick, wovon er handelt. */
.nv-block{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:2.5rem;
  align-items:center;margin-top:1rem}
.nv-block__text{display:flex;flex-direction:column;gap:.75rem;max-width:34rem}
.nv-block--gedreht .nv-block__text{order:2}
.nv-block--gedreht .nv-figur{order:1}
@media(max-width:56rem){
  .nv-block{grid-template-columns:1fr;gap:1.5rem}
  .nv-block--gedreht .nv-block__text,.nv-block--gedreht .nv-figur{order:0}
  .nv-block__text{max-width:none}
}

/* Bild mit Unterschrift — die Erklärung steht UNTER dem Bild, nicht darin.
   Eingezeichnete Pfeile sähen hübscher aus, müssten aber bei jeder
   Oberflächenänderung neu gezeichnet werden, für jede Sprache einzeln, und
   eine Vorlesefunktion liest sie nicht vor. */
.nv-figur{margin:0;display:flex;flex-direction:column;gap:.75rem}
.nv-figur img{width:100%;height:auto;display:block}
.nv-figur__text{font-size:.875rem;line-height:var(--leading-snug);color:var(--mist-500);
  text-wrap:pretty;padding-left:.125rem}
.nv-figur__text b{color:var(--mist-300);font-weight:600}

/* Dreier-Streifen ---------------------------------------------------------
   ⚠️ **Gleiche Höhe, egal welches Bild.** Richtet sich jedes Bild nach seinem
   eigenen Seitenverhältnis, stehen die drei Unterschriften auf drei Höhen und
   der Streifen sieht verrutscht aus. `object-position:top`, weil bei
   Bildschirmfotos oben steht, worum es geht. */
.nv-streifen{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:1.75rem;margin-top:2.5rem}
.nv-streifen .nx-frame{aspect-ratio:16/11;display:block}
.nv-streifen .nx-frame img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.nv-streifen .nv-figur__text{font-size:.8125rem;margin-top:.25rem}

/* Kleiner Hinweiskasten im Text — für Bedingungen und Grenzen */
.nv-notiz{margin-top:1.25rem;padding:.875rem 1.125rem;border-radius:var(--radius-lg);
  border:1px solid var(--ink-700);background:var(--flaeche-hauch);font-size:.875rem;
  line-height:var(--leading-snug);color:var(--mist-500)}
.nv-notiz b{color:var(--mist-200)}
.nv-notiz--warn{border-color:rgb(var(--warn-500-rgb)/.35);background:rgb(var(--warn-500-rgb)/.06)}

/* Was es nicht ist — dieselbe Kachel, andere Haltung. Ein Projekt, das seine
   Lücken selbst nennt, muss sie später nicht erklären. */
.nv-nicht{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1rem}
.nv-nicht__item{border-radius:var(--radius-xl);border:1px dashed var(--ink-700);
  background:rgb(var(--ink-900-rgb)/.5);padding:1.25rem;display:flex;flex-direction:column;gap:.5rem}
.nv-nicht__titel{font-family:var(--font-display);font-size:.9375rem;font-weight:600;color:var(--mist-300)}
.nv-nicht__text{font-size:.8125rem;line-height:var(--leading-snug);color:var(--mist-500)}

/* Aufklappbare Fragen -----------------------------------------------------
   <details> statt eines Checkbox-Tricks: dafür gedacht, mit der Tastatur
   bedienbar, von der Vorlesefunktion als aufklappbar angesagt — und die Suche
   im Browser findet auch zugeklappten Text. */
.nv-faq{display:flex;flex-direction:column;gap:.875rem;max-width:48rem}
details.nv-faq__item{display:block;border-bottom:1px solid rgb(var(--ink-700-rgb)/.7);
  padding-bottom:.875rem}
summary.nv-faq__q{cursor:pointer;list-style:none;display:flex;align-items:flex-start;
  gap:.625rem;padding:.25rem 0;font-weight:500}
summary.nv-faq__q::-webkit-details-marker{display:none}
summary.nv-faq__q::before{content:'';flex-shrink:0;width:.5rem;height:.5rem;margin-top:.4375rem;
  border-right:2px solid var(--accent-500);border-bottom:2px solid var(--accent-500);
  transform:rotate(-45deg);transition:transform var(--dur-fast)}
details[open] > summary.nv-faq__q::before{transform:rotate(45deg)}
summary.nv-faq__q:hover{color:var(--accent-500)}
summary.nv-faq__q:focus-visible{outline:2px solid var(--accent-500);outline-offset:3px;
  border-radius:var(--radius-sm)}
.nv-faq__a{margin-top:.5rem;padding-left:1.125rem;color:var(--mist-500);
  font-size:.9375rem;line-height:var(--leading-relaxed)}
@media(prefers-reduced-motion:reduce){summary.nv-faq__q::before{transition:none}}

/* Einblenden beim Scrollen — ohne JavaScript steht alles sofort da. */
.js .nv-reveal{opacity:0;transform:translateY(1.25rem);
  transition:opacity var(--dur-fade) var(--ease-soft),transform var(--dur-fade) var(--ease-soft)}
.js .nv-reveal.ist-da{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js .nv-reveal{opacity:1;transform:none;transition:none}
}

/* Bildschirmfotos vergrößern ----------------------------------------------
   Die Aufnahmen sind 1600 px breit, auf der Seite stehen sie je nach Stelle
   in 380 bis 800 px. Lesen lässt sich darin fast nichts. Ein Klick legt das
   Bild deshalb groß über die Seite.

   Übernommen von der Nexview-Projektseite, samt der Fallstricke, die dort
   teuer gelernt wurden. Sie stehen als Kommentar an ihrer Stelle. */

/* Der Rahmen wird zum Knopf. `cursor:zoom-in` sagt das ohne ein Wort. */
.js .nx-frame--lupe,
.js .nv-fokus__vorschau--lupe{cursor:zoom-in}
.js .nx-frame--lupe:hover,
.js .nv-fokus__vorschau--lupe:hover{border-color:var(--accent-600)}
.js .nx-frame--lupe:focus-visible,
.js .nv-fokus__vorschau--lupe:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}

/* ⚠️ **Die Überlagerung ist von sich aus sichtbar** und wird nur eingeblendet,
   wenn der Browser die Bewegung ohnehin zeichnet. An eine Einblendung
   gekoppelt, die erst laufen muss, hieße: läuft sie nicht, bleibt ein
   unsichtbarer Kasten über der Seite liegen, und die Seite wäre blockiert,
   ohne dass man sieht, warum. */
.nv-lupe{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;gap:.875rem;
  padding:clamp(1rem,3vw,2.5rem);background:var(--grund-fenster);
  overflow:auto;overscroll-behavior:contain}
/* ⚠️ **Ohne diese Zeile schließt die Überlagerung nicht.** `hidden` wirkt nur
   über `display:none` aus dem Browser-Stil, und die Regel darüber setzt
   `display:flex`, was jede Klassenregel gewinnt. Übrig bliebe ein leerer
   Kasten über der Seite. */
.nv-lupe[hidden]{display:none}
/* ⚠️ **Die Bewegung darf NICHT an der Deckkraft hängen.** In einem Tab, den
   der Browser gerade nicht zeichnet, laufen Animationen nicht an: Die
   Überlagerung bliebe auf ihrem Anfangsbild stehen, also unsichtbar, und
   läge trotzdem über der Seite. Animiert wird deshalb nur eine Größe, deren
   Anfangsbild schon sichtbar ist. */
@media(prefers-reduced-motion:no-preference){
  .nv-lupe img{animation:nv-lupe-auf .2s ease-out}
  @keyframes nv-lupe-auf{from{transform:scale(.985)}to{transform:none}}
}
/* Breite vor Höhe: Das Bild ist 1600 px breit, und genau darum geht es hier,
   die Schrift darin soll lesbar werden. Wäre die Höhe begrenzt, bliebe auf
   einem 1280er Fenster kaum mehr übrig als auf der Seite selbst. Ein hohes
   Bild rollt man stattdessen durch. */
.nv-lupe img{width:min(100%,1600px);height:auto;border-radius:var(--radius-lg);
  border:1px solid var(--ink-700);box-shadow:var(--shadow-pop);background:var(--ink-900)}
.nv-lupe__text{max-width:60rem;margin:0;text-align:center;font-size:.875rem;
  line-height:var(--leading-snug);color:var(--mist-500);text-wrap:pretty}
.nv-lupe__text b{color:var(--mist-300);font-weight:600}
.nv-lupe__zu{position:fixed;top:clamp(.75rem,2vw,1.5rem);right:clamp(.75rem,2vw,1.5rem);
  display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;
  padding:0;border-radius:var(--radius-full);border:1px solid var(--ink-600);
  background:rgb(var(--ink-900-rgb)/.9);color:var(--mist-300);font-size:1.25rem;
  line-height:1;cursor:pointer;
  transition:color var(--dur-fast),border-color var(--dur-fast)}
.nv-lupe__zu:hover{color:var(--mist-100);border-color:var(--accent-600)}
.nv-lupe__zu:focus-visible{outline:var(--focus-ring);outline-offset:2px}
/* Solange die Überlagerung offen ist, darf die Seite dahinter nicht mitrollen. */
.nv-lupe-offen{overflow:hidden}
@media(max-width:40rem){.nv-lupe__text{font-size:.8125rem}}

/* Text-Seiten (Danke, Datenschutz) ----------------------------------------
   Keine eigene Gestaltung, nur Lesebreite und Luft zwischen den Absätzen. */
.nv-text{max-width:52rem}
.nv-text h2{margin:2.5rem 0 .75rem;font-size:var(--text-h2)}
.nv-text h3{margin:1.75rem 0 .5rem;font-size:var(--text-h3)}
.nv-text p{margin:0 0 .875rem;color:var(--mist-300);line-height:var(--leading-relaxed);
  text-wrap:pretty}
.nv-text ul{margin:0 0 .875rem;padding-left:1.25rem;color:var(--mist-300);
  line-height:var(--leading-relaxed)}
.nv-text li{margin-bottom:.25rem}
.nv-text .nx-roles{margin:1rem 0 1.5rem}
.nv-text .nx-roles td:first-child{color:var(--mist-100);white-space:nowrap}
.nv-text address{font-style:normal;color:var(--mist-300);line-height:var(--leading-relaxed);
  margin-bottom:.875rem}

/* ==========================================================================
   Was nur nexdeck hat
   ========================================================================== */

/* ⚠️ **Der Hauptknopf wird im Hover dunkler, nicht heller.** Die übernommene
   Regel greift auf --accent-400, und das ist hier ein sehr helles Cyan; ein
   Knopf, der beim Zeigen fast weiß wird, sieht kaputt aus. Die Anwendung
   nimmt an derselben Stelle --nd-accent-strong, also unser --accent-600. */
.nv-btn--primary:hover{background:var(--accent-600);color:var(--auf-akzent)}

/* Zahlenband ---------------------------------------------------------------
   Vier Zahlen unter dem Aufmacher. Sie beantworten die erste Frage vor jedem
   Text: Wie viel ist das eigentlich? */
.nd-zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:1px;margin-top:2rem;border:1px solid var(--ink-700);border-radius:var(--radius-xl);
  background:var(--ink-700);overflow:hidden}
.nd-zahl{display:flex;flex-direction:column;gap:.25rem;padding:1.25rem 1.375rem;
  background:var(--ink-950)}
.nd-zahl__wert{font-family:var(--font-mono);font-size:1.75rem;font-weight:400;
  line-height:1;color:var(--accent-500);font-variant-numeric:tabular-nums}
.nd-zahl__was{font-size:.8125rem;color:var(--mist-500);line-height:var(--leading-snug)}

/* Welten-Kacheln -----------------------------------------------------------
   Die Einstiege in die vier Funktionsseiten. Groß, mit Bild, weil das Produkt
   über das Bild verkauft: eine Zeile Text neben einem Kasten wäre ein
   Inhaltsverzeichnis, und ein Inhaltsverzeichnis klickt niemand. */
/* ⚠️ **Zwei mal zwei, nicht drei plus eins.** Mit `auto-fit` standen bei
   1440 px drei Kacheln oben und eine allein darunter. Vier Einstiege sind ein
   Quadrat; die vierte allein sieht aus wie ein Nachtrag. Und grosse Bilder
   sind hier der Punkt. */
.nd-welten{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media(min-width:56rem){.nd-welten{grid-template-columns:repeat(2,minmax(0,1fr))}}
.nd-welt{display:flex;flex-direction:column;border-radius:var(--radius-xl);
  border:1px solid var(--ink-700);background:rgb(var(--ink-850-rgb)/.8);overflow:hidden;
  text-decoration:none;color:inherit;
  transition:border-color var(--dur-fast),transform var(--dur-fast),box-shadow var(--dur-fast)}
.nd-welt:hover{border-color:var(--accent-600);color:inherit;transform:translateY(-2px);
  box-shadow:var(--glow-hover)}
.nd-welt__bild{aspect-ratio:16/9;overflow:hidden;background:var(--ink-900);
  border-bottom:1px solid var(--ink-700)}
.nd-welt__bild img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.nd-welt__text{display:flex;flex-direction:column;gap:.5rem;padding:1.25rem}
.nd-welt__titel{font-family:var(--font-display);font-size:1.0625rem;font-weight:600;
  color:var(--mist-100);display:flex;align-items:center;gap:.5rem}
.nd-welt__titel::after{content:'\2192';color:var(--accent-500);font-weight:400;
  transition:transform var(--dur-fast)}
.nd-welt:hover .nd-welt__titel::after{transform:translateX(.25rem)}
.nd-welt__lede{font-size:.875rem;line-height:var(--leading-snug);color:var(--mist-500)}
.nd-welt__liste{margin:.25rem 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.375rem}
.nd-welt__liste li{font-size:var(--text-2xs);color:var(--mist-300);
  border:1px solid var(--ink-700);border-radius:var(--radius-full);padding:.1875rem .5rem}

/* Die Anbindungen ----------------------------------------------------------
   Neunundsiebzig Namen und einer, den man sucht. Eine Liste in Spalten liest
   sich schneller als Kacheln, und das Feld darüber filtert sie im Browser. */
.nd-suchfeld{display:flex;align-items:center;gap:.625rem;max-width:26rem;
  border:1px solid var(--ink-700);border-radius:var(--radius-full);background:var(--ink-900);
  padding:.5rem .875rem;margin-bottom:2rem}
/* ⚠️ **Ohne diese Zeile wirkt das hidden im Markup nicht.** Das `hidden` des
   Browsers ist nur ein `display:none` aus dem Standardstil, und jede
   Klassenregel mit `display` gewinnt dagegen. Das Feld stand deshalb auch
   ohne JavaScript da und tat nichts: ein Suchfeld, in das man tippt und in
   dem nichts passiert. Gefunden hat das erst eine Mutationsprobe, der
   Prüflauf selbst war an der Stelle hohl. */
.nd-suchfeld[hidden]{display:none}
.nd-suchfeld .nv-i{color:var(--mist-500);flex:none}
.nd-suchfeld input{flex:1;min-width:0;border:0;background:none;outline:none;font:inherit;
  font-size:.9375rem;color:var(--mist-100)}
.nd-suchfeld input::placeholder{color:var(--mist-600)}
.nd-gruppe{margin-bottom:2.5rem}
.nd-gruppe[hidden]{display:none}
.nd-gruppe__kopf{display:flex;align-items:baseline;gap:.625rem;margin-bottom:1rem;
  padding-bottom:.5rem;border-bottom:1px solid rgb(var(--ink-700-rgb)/.8)}
.nd-gruppe__name{font-family:var(--font-display);font-size:1.0625rem;font-weight:600}
.nd-gruppe__zahl{font-family:var(--font-mono);font-size:.75rem;color:var(--mist-600)}
.nd-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.5rem}
.nd-dienst{display:flex;align-items:flex-start;gap:.625rem;padding:.625rem .75rem;
  border-radius:var(--radius-md);border:1px solid transparent;
  transition:background-color var(--dur-fast),border-color var(--dur-fast)}
.nd-dienst:hover{background:rgb(var(--ink-850-rgb)/.8);border-color:var(--ink-700)}
.nd-dienst[hidden]{display:none}
.nd-dienst__punkt{flex:none;width:.4375rem;height:.4375rem;margin-top:.5rem;border-radius:50%;
  background:var(--accent-500)}
.nd-dienst--beta .nd-dienst__punkt{background:var(--warn-500)}
/* Das Logo des Dienstes, dieselbe Sammlung, aus der nexdeck seine holt.
   Beim Bauen heruntergeladen, im Browser kommt nichts von einem CDN. */
.nd-dienst__logo{flex:none;width:1.25rem;height:1.25rem;margin-top:.0625rem;
  object-fit:contain;display:block}
/* Einfarbige Strichzeichnungen als Maske: so tragen sie die Akzentfarbe und
   sind in hell wie dunkel zu sehen. Als <img> waeren sie schwarz auf schwarz. */
.nd-dienst__logo--zeichnung{background:var(--accent-500);
  -webkit-mask:var(--symbol) center/contain no-repeat;
  mask:var(--symbol) center/contain no-repeat}
.nd-dienst__text{display:flex;flex-direction:column;gap:.125rem;min-width:0}
.nd-dienst__name{font-size:.9375rem;font-weight:500;color:var(--mist-100);
  display:flex;align-items:center;gap:.4375rem;flex-wrap:wrap}
.nd-dienst__was{font-size:.8125rem;line-height:var(--leading-snug);color:var(--mist-500)}
.nd-beta{font-size:var(--text-2xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--warn-500);border:1px solid rgb(var(--warn-500-rgb)/.4);
  background:rgb(var(--warn-500-rgb)/.1);border-radius:var(--radius-full);padding:.0625rem .375rem}
.nd-leer{color:var(--mist-500);font-size:.9375rem;padding:1rem 0}
.nd-leer[hidden]{display:none}

/* Unterleiste auf den Funktionsseiten --------------------------------------
   Vier Geschwister nebeneinander, das aktuelle hervorgehoben. Wer auf einer
   Unterseite landet, sieht damit sofort, wo er ist und was daneben liegt. */
.nd-unterleiste{border-bottom:1px solid rgb(var(--ink-700-rgb)/.7);
  background:rgb(var(--ink-900-rgb)/.55)}
.nd-unterleiste__row{display:flex;align-items:center;gap:.375rem;overflow-x:auto;
  padding-top:.625rem;padding-bottom:.625rem;scrollbar-width:none}
.nd-unterleiste__row::-webkit-scrollbar{display:none}

/* Karte im Text — was eine Karte auf einem Brett kann, als Beispiel */
.nd-beispiel{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.875rem;
  margin-top:1.5rem}
.nd-beispiel__karte{border-radius:var(--radius-xl);border:1px solid var(--ink-700);
  background:rgb(var(--ink-850-rgb)/.85);padding:1rem 1.125rem;display:flex;
  flex-direction:column;gap:.5rem;box-shadow:var(--shadow-card)}
.nd-beispiel__kopf{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;color:var(--mist-600)}
.nd-beispiel__wert{font-family:var(--font-mono);font-size:1.375rem;color:var(--mist-100);
  font-variant-numeric:tabular-nums;line-height:1.1}
.nd-beispiel__fuss{font-size:.8125rem;color:var(--mist-500);line-height:var(--leading-snug)}
.nd-punkt{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:var(--ok-500)}
.nd-punkt--warn{background:var(--warn-500)}
.nd-punkt--bad{background:var(--bad-500)}

/* Tabellen auf schmalen Bildschirmen -------------------------------------
   ⚠️ **Eine Tabelle schrumpft nicht.** Drei Spalten Text brauchen ihre
   Breite, und auf 430 px stand die Variablentabelle 71 Pixel ueber dem Rand:
   Die ganze SEITE liess sich dann seitwaerts schieben, nicht nur die Tabelle.
   Sie bekommt deshalb ihr eigenes Rollfeld. `display:block` ist noetig, damit
   `overflow-x` an einem <table> ueberhaupt wirkt.

   Der Rahmen wandert dabei nach aussen: An einer rollenden Tabelle sieht man
   sonst die rechte Kante nie und haelt sie fuer abgeschnitten. */
@media(max-width:52rem){
  .nx-roles{display:block;overflow-x:auto;max-width:100%;
    -webkit-overflow-scrolling:touch}
  .nx-roles th,.nx-roles td{white-space:nowrap}
  /* Die letzte Spalte ist die einzige mit ganzen Saetzen. Sie darf umbrechen,
     sonst wird die Tabelle unnoetig breit und rollt weiter als noetig. */
  .nx-roles td:last-child{white-space:normal;min-width:14rem}
}

/* Zwei Spalten für Fließtext neben einer Liste */
.nd-paar{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:2.5rem;
  align-items:start}

/* Aufzählung mit Häkchen — für „was drin ist" */
.nd-haken{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.625rem}
/* ⚠️ **Das Haekchen liegt daneben, es steht nicht davor.** Mit
   `display:flex` am <li> wird jedes Kind zu einem Flex-Element: Aus
   „<b>Medien.</b> Plex, Jellyfin … und <a>Nexview</a>" wurden drei Spalten,
   das fette Wort stand allein links und der Verweis rechts am Rand. Das
   sieht wie ein Umbruchfehler aus, und man sucht ihn im Text. */
.nd-haken li{position:relative;padding-left:1.25rem;font-size:.9375rem;
  line-height:var(--leading-snug);color:var(--mist-300)}
.nd-haken li::before{content:'';position:absolute;left:.125rem;top:.4375rem;
  width:.5rem;height:.5rem;
  border-right:2px solid var(--accent-500);border-bottom:2px solid var(--accent-500);
  transform:rotate(45deg)}
.nd-haken b{color:var(--mist-100);font-weight:600}