/* ==========================================================================
   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, „mail" grün.
   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}

.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}

/* Sprachumschalter — zwei Flaggen, die aktuelle hervorgehoben. */
.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(var(--accent-500-rgb)/.18);
  box-shadow:inset 0 0 0 1px rgb(var(--accent-500-rgb)/.45)}
.nv-lang svg{display:block;border-radius:2px}

/* 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-lang{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}