/* ==========================================================================
   Bausteine — übernommen von der Nexview-Projektseite
   (`nexapps-website/public/assets/css/components.css`), auf das gekürzt, was
   ein Einseiter braucht: Knöpfe, Karten, Etiketten, Kopfzeile, Abschnitte,
   Bildrahmen, Kacheln, Ablauf, Installationsblock, Tabelle, Fußzeile, Suche.

   ⚠️ **Werte unverändert, bis auf drei Stellen** — sie stehen mit Begründung
   daneben. Alles andere zieht seine Farben aus `tokens.css` und wird damit
   von selbst nexmail-grün.
   ========================================================================== */

/* Sprungmarke für Tastatur und Vorlesefunktion */
.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:var(--auf-akzent);font-size:.875rem;font-weight:600}
.nv-skip:focus{left:0;color:var(--auf-akzent)}

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

/* Knöpfe ------------------------------------------------------------------
   ⚠️ **Änderung 1 von 3: `#fff` → `var(--auf-akzent)`.** Nexviews Rot trägt
   weiße Schrift. Auf nexmails Grün wäre Weiß nicht zu lesen — die Anwendung
   setzt dort Dunkles, und der Knopf hier muss aussehen wie der Knopf dort. */
.nv-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border-radius:var(--radius-full);padding:.625rem 1.25rem;
  font:600 .875rem/1.2 var(--font-sans);border:1px solid transparent;cursor:pointer;
  transition:background-color var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast);
  text-decoration:none}
.nv-btn--primary{background:var(--accent-500);color:var(--auf-akzent);box-shadow:var(--shadow-accent)}
.nv-btn--primary:hover{background:var(--accent-400);color:var(--auf-akzent)}
.nv-btn--ghost{border-color:var(--ink-700);background:var(--ink-850);color:var(--mist-300)}
.nv-btn--ghost:hover{background:var(--ink-800);color:var(--mist-100)}
.nv-btn:disabled{cursor:not-allowed;opacity:.6}
.nv-btn:active{transform:translateY(1px)}

/* Karte */
.nv-card{border-radius:var(--radius-xl);border:1px solid var(--ink-700);
  background:rgb(var(--ink-850-rgb)/.8);padding:1.5rem;box-shadow:var(--shadow-card);
  backdrop-filter:blur(8px)}

/* Hinweiskästen */
.nv-warning{border-radius:var(--radius-lg);border:1px solid rgb(var(--warn-500-rgb)/.4);
  background:rgb(var(--warn-500-rgb)/.1);padding:.5rem .75rem;font-size:.875rem;color:var(--warn-500)}

/* Etiketten */
.nv-badge{display:inline-flex;align-items:center;border-radius:var(--radius-full);
  padding:.25rem .625rem;font-size:var(--text-2xs);font-weight:600;
  box-shadow:inset 0 0 0 1px var(--ink-600);background:rgb(var(--ink-900-rgb)/.85);
  color:var(--mist-300);white-space:nowrap}
.nv-badge--ok{background:rgb(var(--ok-500-rgb)/.18);color:var(--ok-500);
  box-shadow:inset 0 0 0 1px rgb(var(--ok-500-rgb)/.4)}
.nv-badge--warn{background:rgb(var(--warn-500-rgb)/.18);color:var(--warn-500);
  box-shadow:inset 0 0 0 1px rgb(var(--warn-500-rgb)/.4)}

/* Navigation (Kopfzeile) */
.nv-navpill{border-radius:var(--radius-full);padding:.375rem .875rem;font-size:.875rem;
  font-weight:500;color:var(--mist-500);text-decoration:none;white-space:nowrap;
  transition:background-color var(--dur-fast),color var(--dur-fast)}
.nv-navpill:hover{background:var(--ink-850);color:var(--mist-100)}
.nv-navpill--active{background:rgb(var(--accent-500-rgb)/.15);color:var(--accent-500)}
.nv-navpill--active:hover{background:rgb(var(--accent-500-rgb)/.15);color:var(--accent-500)}

/* Website-Bausteine ------------------------------------------------------- */
.nx-container{max-width:var(--page-max);margin:0 auto;
  padding-left:var(--page-pad);padding-right:var(--page-pad)}
@media(min-width:640px){.nx-container{padding-left:var(--page-pad-sm);padding-right:var(--page-pad-sm)}}
.nx-header{position:sticky;top:0;z-index:20;border-bottom:1px solid rgb(var(--ink-700-rgb)/.8);
  background:rgb(var(--ink-950-rgb)/.8);backdrop-filter:blur(24px)}
.nx-header__row{display:flex;align-items:center;gap:1rem;padding-top:.75rem;padding-bottom:.75rem}
.nx-kicker{font-family:var(--font-display);font-size:.75rem;font-weight:600;
  letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--accent-500)}
.nx-section{padding:5rem 0}
@media(max-width:640px){.nx-section{padding:3.5rem 0}}
.nx-section__head{max-width:38rem;display:flex;flex-direction:column;gap:.75rem;margin-bottom:2.5rem}
.nx-h2{font-family:var(--font-display);font-size:var(--text-h2);font-weight:600}
.nx-h3{font-family:var(--font-display);font-size:var(--text-h3);font-weight:600}
.nx-lede{color:var(--mist-500);font-size:var(--text-body);
  line-height:var(--leading-relaxed);text-wrap:pretty}

/* Bildschirmfoto-Rahmen
   ⚠️ **Änderung 2 von 3: der Schimmer ist grün statt rot** — er kommt aus
   `--accent-500-rgb` und dreht damit von selbst mit. Hier steht er nur, weil
   der Wert im Original fest eingetippt war. */
.nx-frame{border-radius:var(--radius-xl);border:1px solid var(--ink-700);background:var(--ink-900);
  box-shadow:var(--shadow-card),0 0 80px -20px rgb(var(--accent-500-rgb)/.15);overflow:hidden}
.nx-frame__bar{display:flex;align-items:center;gap:.5rem;border-bottom:1px solid var(--ink-700);
  background:var(--ink-850);padding:.625rem .875rem}
.nx-frame__dot{width:.625rem;height:.625rem;border-radius:var(--radius-full);background:var(--ink-600)}
.nx-frame__url{margin-left:.5rem;flex:1;max-width:20rem;border-radius:var(--radius-full);
  background:var(--ink-900);padding:.25rem .75rem;font-size:var(--text-2xs);color:var(--mist-600);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nx-frame__body{background:var(--ink-950)}

/* Funktions-Kacheln */
.nx-feature-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1rem}
.nx-feature{display:flex;flex-direction:column;gap:.625rem;border-radius:var(--radius-xl);
  border:1px solid var(--ink-700);background:rgb(var(--ink-850-rgb)/.8);padding:1.25rem;
  transition:background-color var(--dur-fast),border-color var(--dur-fast)}
.nx-feature:hover{background:var(--ink-800);border-color:var(--ink-600)}
.nx-feature__icon{display:flex;width:2.25rem;height:2.25rem;align-items:center;justify-content:center;
  border-radius:var(--radius-lg);background:rgb(var(--accent-500-rgb)/.12);color:var(--accent-500);
  box-shadow:inset 0 0 0 1px rgb(var(--accent-500-rgb)/.25)}
.nx-feature__title{font-family:var(--font-display);font-size:.9375rem;font-weight:600;color:var(--mist-100)}
.nx-feature__text{font-size:.8125rem;line-height:var(--leading-snug);color:var(--mist-500)}

/* Ablauf */
.nx-flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1rem}
.nx-flow__step{display:flex;flex-direction:column;gap:.5rem;border-radius:var(--radius-xl);
  border:1px solid var(--ink-700);background:rgb(var(--ink-850-rgb)/.8);padding:1.25rem}
.nx-flow__num{display:flex;width:1.75rem;height:1.75rem;align-items:center;justify-content:center;
  border-radius:var(--radius-full);background:rgb(var(--accent-500-rgb)/.15);color:var(--accent-500);
  font-family:var(--font-mono);font-size:.75rem;font-weight:700;
  box-shadow:inset 0 0 0 1px rgb(var(--accent-500-rgb)/.35)}
.nx-flow__title{font-family:var(--font-display);font-size:.9375rem;font-weight:600}
.nx-flow__text{font-size:.8125rem;line-height:var(--leading-snug);color:var(--mist-500)}

/* Installations-Block */
.nx-install{border-radius:var(--radius-xl);border:1px solid var(--ink-700);
  background:var(--ink-900);overflow:hidden}
.nx-install__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  border-bottom:1px solid var(--ink-700);background:var(--ink-850);padding:.5rem .625rem .5rem 1rem}
.nx-install__label{font-size:var(--text-2xs);font-weight:600;letter-spacing:var(--tracking-wide);
  text-transform:uppercase;color:var(--mist-600)}
.nx-install__pre{margin:0;padding:1rem 1.25rem;font-size:.8125rem;line-height:1.7;
  color:var(--mist-100);overflow-x:auto}
.nx-install__pre .c{color:var(--mist-600)}
.nx-install__pre .k{color:var(--accent-500)}
.nx-install__hint{margin-top:.75rem;font-size:.8125rem;color:var(--mist-500)}
.nx-copy{display:inline-flex;align-items:center;gap:.375rem;border-radius:var(--radius-full);
  border:1px solid var(--ink-700);background:var(--ink-900);padding:.3125rem .75rem;
  font:500 .75rem var(--font-sans);color:var(--mist-300);cursor:pointer;
  transition:border-color var(--dur-fast),color var(--dur-fast)}
.nx-copy:hover{border-color:var(--accent-500);color:var(--mist-100)}

/* Tabelle */
.nx-roles{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--ink-700);
  border-radius:var(--radius-xl);overflow:hidden;background:rgb(var(--ink-850-rgb)/.8);font-size:.875rem}
.nx-roles th{padding:.875rem 1.25rem;text-align:left;font-weight:600;color:var(--mist-100);
  background:var(--ink-850);border-bottom:1px solid var(--ink-700)}
.nx-roles td{padding:.75rem 1.25rem;color:var(--mist-300);
  border-bottom:1px solid rgb(var(--ink-700-rgb)/.6)}
.nx-roles tr:last-child td{border-bottom:none}
.nx-roles td:first-child{color:var(--mist-500)}
.nx-roles .yes{color:var(--ok-500)}
.nx-roles .no{color:var(--mist-600)}
.nx-roles .part{color:var(--warn-500)}

/* Fußzeile */
.nx-footer{border-top:1px solid rgb(var(--ink-700-rgb)/.6);margin-top:2rem}
.nx-footer__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.5rem 1rem;padding:1.25rem 1rem;font-size:.75rem;color:var(--mist-600)}
.nx-footer__row a{color:var(--mist-600)}
.nx-footer__row a:hover{color:var(--mist-300)}

/* Suche -------------------------------------------------------------------
   Ein Knopf in der Kopfzeile, eine Überlagerung darüber.

   ⚠️ **Änderung 3 von 3: Der Index wird aus der Seite gebaut, nicht geladen.**
   Nexview holt `suche-de.json` — dort gibt es zwanzig Seiten. Hier gibt es
   eine, und eine Indexdatei daneben wäre eine zweite Wahrheit, die beim
   nächsten Absatz veraltet, ohne dass es jemand merkt. Siehe `site.js`. */
.nv-suchknopf{padding-inline:.625rem}
.nv-suche{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-start;
  justify-content:center;padding:min(12vh,7rem) 1rem 1rem}
.nv-suche[hidden]{display:none}
.nv-suche__grund{position:absolute;inset:0;background:var(--grund-schleier);backdrop-filter:blur(3px)}
.nv-suche__fenster{position:relative;width:min(46rem,100%);max-height:76vh;display:flex;
  flex-direction:column;border-radius:var(--radius-xl);border:1px solid var(--ink-700);
  background:var(--surface-raised);box-shadow:var(--shadow-card);overflow:hidden}
.nv-suche__kopf{display:flex;align-items:center;gap:.625rem;padding:.75rem .875rem;
  border-bottom:1px solid var(--border-default)}
.nv-suche__kopf .nv-i{flex:none;color:var(--text-faint)}
.nv-suche__feld{flex:1;min-width:0;border:none;background:none;outline:none;
  font:inherit;font-size:var(--text-body);color:var(--text-body);padding:.25rem 0}
.nv-suche__feld::placeholder{color:var(--text-faint)}
.nv-suche__treffer{overflow-y:auto;padding:.375rem}
.nv-suche__leer{padding:1.25rem .875rem;color:var(--text-dim);font-size:var(--text-sm)}
.nv-treffer{display:block;padding:.625rem .75rem;border-radius:var(--radius-md);
  text-decoration:none;color:inherit}
.nv-treffer:hover,.nv-treffer:focus-visible{background:var(--surface-card-hover);outline:none}
.nv-treffer__wo{font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:.04em;
  color:var(--accent-500)}
.nv-treffer__was{display:block;margin-top:.125rem;font-weight:600;color:var(--text-body)}
.nv-treffer__auszug{display:block;margin-top:.1875rem;font-size:var(--text-sm);color:var(--text-dim);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.nv-treffer mark{background:none;color:var(--accent-500);font-weight:600}