/* ═══════════════════════════════════════════════════════════════
   NEVANU Design System — Einheitliche Komponentenbibliothek
   ═══════════════════════════════════════════════════════════════
   Zentrale UI-Komponenten mit .nv- Prefix.
   Basiert auf den besten bestehenden Patterns aus:
   - keeva-ui.css (.k-btn, .k-input, .k-empty, .k-search)
   - style.css (.nv-card, .nv-badge, .nv-page-header)
   - kasse.css (.kasse-btn, .kasse-input)
   - berichte.css (.ber-table, .ber-chip)

   Module NICHT migrieren — nur die Bibliothek bereitstellen.
   Alte Klassen bleiben bestehen und funktionieren weiter.

   Inhalt:
   1. Buttons (.nv-btn)
   2. Cards (.nv-card-ds)
   3. Inputs (.nv-input, .nv-select, .nv-textarea)
   4. Tables (.nv-table)
   5. Badges (.nv-badge-ds)
   6. Empty States (.nv-empty-state)
   7. Skeleton Loading (.nv-skeleton)
   8. Search Bar (.nv-searchbar)
   9. Page Header (.nv-page-header-ds)
   ═══════════════════════════════════════════════════════════════ */


/* ─── 1. Buttons ─── */
/* Basis: .k-btn (keeva-ui.css) + .kasse-btn (kasse.css)
   Ersetzt langfristig: .kasse-btn, .kb-btn, .dok-btn,
   .tel-banner-btn, .ber-btn-primary, .ber-btn-sm */

.nv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--k-sp-sm, 8px);
  padding: 14px 28px;
  border: none;
  border-radius: var(--k-r-full, 9999px);
  font-family: var(--k-font, 'Outfit', sans-serif);
  font-size: var(--k-fs-body, .88rem);
  font-weight: var(--k-fw-bold, 700);
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--k-dur-fast, .15s) var(--k-ease, cubic-bezier(.32,.72,0,1)),
    color var(--k-dur-fast, .15s) var(--k-ease, cubic-bezier(.32,.72,0,1)),
    border-color var(--k-dur-fast, .15s) var(--k-ease, cubic-bezier(.32,.72,0,1)),
    box-shadow var(--k-dur-fast, .15s) var(--k-ease, cubic-bezier(.32,.72,0,1)),
    transform var(--k-dur-fast, .15s) var(--k-ease, cubic-bezier(.32,.72,0,1)),
    opacity var(--k-dur-fast, .15s) var(--k-ease, cubic-bezier(.32,.72,0,1));
}
.nv-btn:active { transform: scale(.96); }
.nv-btn:disabled, .nv-btn[disabled] {
  opacity: .4;
  pointer-events: none;
}

/* Primary — Brand Color (aus .kasse-btn-primary, .kb-btn-primary, .ber-btn-primary) */
.nv-btn--primary {
  background: var(--k-brand, #F27182);
  color: #fff;
}
.nv-btn--primary:active {
  opacity: .85;
}

/* Dark — Invertiert Schwarz/Weiss (aus altem .nv-btn-primary) */
.nv-btn--dark {
  background: var(--k-text, #1A1A1A);
  color: var(--k-bg, #FAFAFA);
  border: none;
  letter-spacing: -.2px;
}
.nv-btn--dark:active {
  opacity: .85;
}

/* Success — Gruen (aus .submit-btn) */
.nv-btn--success {
  background: var(--k-green, #34D399);
  color: #fff;
  box-shadow: 0 8px 30px rgba(45, 138, 78, .3);
}
.nv-btn--success:active {
  box-shadow: none;
  opacity: .85;
}

/* Gradient — Pink zu Coral (warm) */
.nv-btn--gradient {
  background: var(--k-gradient, linear-gradient(135deg, #ec4899, #F27182));
  color: #fff;
  box-shadow: var(--k-gradient-glow, 0 4px 24px rgba(236,72,153,.25));
}
.nv-btn--gradient:active {
  box-shadow: none;
}

/* Secondary — Glass-Look (opak genug ohne Blur) */
.nv-btn--secondary {
  background: var(--nv-glass-bg, rgba(30,30,35,.85));
  border: 1px solid var(--nv-glass-border, rgba(255,255,255,.08));
  color: var(--k-text, #1A1A1A);
}
.nv-btn--secondary:hover {
  background: var(--nv-glass-bg-hover, rgba(40,40,45,.88));
  border-color: var(--k-border-strong, rgba(26,26,26,.15));
}
.nv-btn--secondary:active {
  background: var(--k-fill-active, rgba(26,26,26,.12));
}

/* Danger — Rot (aus .kasse-btn + Status-Pattern) */
.nv-btn--danger {
  background: var(--k-red, #EF4444);
  color: #fff;
}
.nv-btn--danger:active {
  opacity: .85;
}

/* Ghost — Glass-Transparent */
.nv-btn--ghost {
  background: transparent;
  border: 1px solid var(--nv-glass-border, rgba(255,255,255,.08));
  color: var(--k-text2, rgba(26,26,26,.65));
}
.nv-btn--ghost:hover {
  background: var(--k-fill-hover, rgba(255,255,255,.10));
}
.nv-btn--ghost:active {
  background: var(--k-fill-active, rgba(26,26,26,.12));
}

/* Groessen */
.nv-btn--sm {
  padding: 8px 18px;
  min-height: 44px;
  font-size: var(--k-fs-caption, .72rem);
  font-weight: var(--k-fw-semibold, 600);
}
.nv-btn--lg {
  padding: 18px 36px;
  font-size: var(--k-fs-title, 1.1rem);
}
.nv-btn--block {
  width: 100%;
}

/* Icon-Button */
.nv-btn--icon {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: var(--k-fill, rgba(26,26,26,.04));
  color: var(--k-text, #1A1A1A);
}
.nv-btn--icon:active {
  background: var(--k-fill-active, rgba(26,26,26,.12));
}


/* ─── 2. Cards ─── */
/* Basis: .nv-card (style.css) + .k-glass-card (keeva-ui.css)
   Suffix -ds um Kollision mit bestehendem .nv-card zu vermeiden.
   Ersetzt langfristig: .kb-card, .dok-card, .ph-card, .svc-card,
   .ber-card, .section-card */

.nv-card-ds {
  background: var(--nv-glass-bg, var(--k-surface-solid, #fff));
  border: 1px solid var(--nv-glass-border, var(--k-border, rgba(26,26,26,.08)));
  border-radius: var(--nv-r-card, 20px);
  padding: var(--k-sp-md, 16px);
  box-shadow: var(--k-shadow-sm, 0 1px 3px rgba(26,26,26,.04));
  /* Stacking Context fuer korrekte Darstellung */
  position: relative;
  z-index: var(--nv-z-base, 0);
  transition:
    box-shadow var(--k-dur-fast, .15s),
    border-color var(--k-dur-fast, .15s),
    background-color var(--k-dur-fast, .15s);
  /* Kein backdrop-filter — Cards sind scrollbar!
     Background ist opak genug fuer Lesbarkeit ohne Blur. */
}

/* Interaktive Karte — Glow bei Hover/Focus */
.nv-card-ds--interactive {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nv-card-ds--interactive:hover {
  background: var(--nv-glass-bg-hover, var(--k-fill-hover, rgba(26,26,26,.07)));
  border-color: var(--k-border-strong, rgba(26,26,26,.15));
  box-shadow: var(--nv-glow-primary, 0 0 20px rgba(242,113,130,.3));
}
.nv-card-ds--interactive:active {
  transform: scale(.98);
  transition: transform var(--k-dur-fast, .15s) var(--k-ease);
}

/* Flush (kein Padding — fuer Listen-Karten) */
.nv-card-ds--flush {
  padding: 0;
}

/* Elevated (staerkerer Schatten) */
.nv-card-ds--elevated {
  box-shadow: var(--k-shadow-md, 0 4px 16px rgba(26,26,26,.06));
}

/* Glass — halbtransparent mit backdrop-filter Blur.
   Hintergrund-Gradient scheint durch fuer Glasmorphic-Effekt.
   Opacity bewusst niedrig (0.55) damit Blur sichtbar ist. */
.nv-card-ds--glass {
  background: var(--nv-glass-bg, rgba(30,30,35,.55));
  border-color: var(--nv-glass-border, rgba(255,255,255,.10));
  backdrop-filter: var(--nv-glass-blur, blur(24px));
  -webkit-backdrop-filter: var(--nv-glass-blur, blur(24px));
}

/* KPI-Card Varianten — farbige subtile Borders */
.nv-card-ds--kpi-primary {
  border-color: rgba(242, 113, 130, .25);
}
.nv-card-ds--kpi-primary:hover {
  box-shadow: var(--nv-glow-primary);
}
.nv-card-ds--kpi-info {
  border-color: rgba(59, 130, 246, .25);
}
.nv-card-ds--kpi-info:hover {
  box-shadow: var(--nv-glow-info);
}
.nv-card-ds--kpi-gold {
  border-color: rgba(255, 215, 0, .25);
}
.nv-card-ds--kpi-gold:hover {
  box-shadow: var(--nv-glow-warning);
}


/* ─── 3. Inputs ─── */
/* Basis: .k-input (keeva-ui.css) + .kasse-input (kasse.css)
   Ersetzt langfristig: .dok-input, .kasse-input, .ber-input */

.nv-input,
.nv-select,
.nv-textarea {
  width: 100%;
  padding: 14px var(--k-sp-md, 16px);
  border: 1.5px solid var(--k-border, rgba(26,26,26,.08));
  border-radius: var(--k-r-sm, 14px);
  background: var(--k-fill, rgba(26,26,26,.04));
  color: var(--k-text, #1A1A1A);
  font-family: var(--k-font, 'Outfit', sans-serif);
  font-size: var(--k-fs-body, .88rem);
  font-weight: var(--k-fw-medium, 500);
  outline: none;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  transition:
    border-color var(--k-dur-fast, .15s),
    box-shadow var(--k-dur-fast, .15s);
}
.nv-input:focus,
.nv-select:focus,
.nv-textarea:focus {
  border-color: var(--k-brand, #F27182);
  box-shadow: 0 0 0 3px var(--k-brand-glow, rgba(242,113,130,.25));
}
.nv-input::placeholder,
.nv-textarea::placeholder {
  color: var(--k-text3, rgba(26,26,26,.45));
  font-weight: var(--k-fw-regular, 400);
}
.nv-input:disabled,
.nv-select:disabled,
.nv-textarea:disabled {
  opacity: .5;
  pointer-events: none;
}

/* Select — Pfeil-Indikator */
.nv-select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23999' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  cursor: pointer;
}

/* Textarea */
.nv-textarea {
  min-height: 100px;
  resize: vertical;
  line-height: var(--k-lh-normal, 1.5);
}

/* Fehler-Zustand */
.nv-input--error,
.nv-select--error,
.nv-textarea--error {
  border-color: var(--k-red, #EF4444);
}
.nv-input--error:focus,
.nv-select--error:focus,
.nv-textarea--error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .15);
}

/* Label */
.nv-label {
  display: block;
  font-size: var(--k-fs-caption, .72rem);
  font-weight: var(--k-fw-semibold, 600);
  color: var(--k-text2, rgba(26,26,26,.65));
  margin-bottom: 6px;
  letter-spacing: .02em;
}

/* Hilfe-Text */
.nv-input-hint {
  font-size: var(--k-fs-micro, .6rem);
  color: var(--k-text3, rgba(26,26,26,.45));
  margin-top: 4px;
}
.nv-input-hint--error {
  color: var(--k-red, #EF4444);
}


/* ─── 4. Tables ─── */
/* Basis: .ber-table (berichte.css) — beste bestehende Tabelle
   Ersetzt langfristig: alle ad-hoc Tabellen */

.nv-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--k-r-sm, 14px);
  border: 1px solid var(--k-border, rgba(26,26,26,.08));
}

.nv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--k-fs-body, .88rem);
  font-family: var(--k-font, 'Outfit', sans-serif);
}
.nv-table th {
  padding: 10px 14px;
  text-align: left;
  font-size: var(--k-fs-caption, .72rem);
  font-weight: var(--k-fw-semibold, 600);
  color: var(--k-text3, rgba(26,26,26,.45));
  border-bottom: 2px solid var(--k-border-strong, rgba(26,26,26,.15));
  text-transform: uppercase;
  letter-spacing: .3px;
  white-space: nowrap;
}
.nv-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--k-border, rgba(26,26,26,.08));
  color: var(--k-text, #1A1A1A);
}
.nv-table tr:last-child td {
  border-bottom: none;
}
.nv-table tr:active td {
  background: var(--k-fill, rgba(26,26,26,.04));
}

/* Kompakte Variante */
.nv-table--compact th,
.nv-table--compact td {
  padding: 6px 10px;
}

/* Striped */
.nv-table--striped tbody tr:nth-child(even) td {
  background: var(--k-fill, rgba(26,26,26,.04));
}


/* ─── 5. Badges ─── */
/* Basis: .nv-badge + .status-badge (style.css)
   Suffix -ds um Kollision mit bestehendem .nv-badge zu vermeiden.
   Ersetzt langfristig: .task-badge, Ad-hoc Status-Spans */

.nv-badge-ds {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 10px;
  min-width: 20px;
  border-radius: var(--k-r-full, 9999px);
  font-family: var(--k-font, 'Outfit', sans-serif);
  font-size: var(--k-fs-micro, .6rem);
  font-weight: var(--k-fw-bold, 700);
  line-height: 1;
  white-space: nowrap;
  letter-spacing: .02em;
}

/* Dot-Indikator (kleiner Punkt) */
.nv-badge-ds--dot {
  width: 8px;
  height: 8px;
  min-width: 8px;
  padding: 0;
  border-radius: 50%;
}

/* Farb-Varianten */
.nv-badge-ds--success {
  background: var(--k-green, #34D399);
  color: #fff;
}
.nv-badge-ds--success.nv-badge-ds--subtle {
  background: rgba(52, 211, 153, .12);
  color: var(--k-green, #34D399);
}

.nv-badge-ds--warning {
  background: var(--k-yellow, #FBBF24);
  color: #000;
}
.nv-badge-ds--warning.nv-badge-ds--subtle {
  background: rgba(251, 191, 36, .12);
  color: #D97706;
}

.nv-badge-ds--danger {
  background: var(--k-red, #EF4444);
  color: #fff;
}
.nv-badge-ds--danger.nv-badge-ds--subtle {
  background: rgba(239, 68, 68, .12);
  color: var(--k-red, #EF4444);
}

.nv-badge-ds--info {
  background: var(--k-blue, #60A5FA);
  color: #fff;
}
.nv-badge-ds--info.nv-badge-ds--subtle {
  background: rgba(96, 165, 250, .12);
  color: var(--k-blue, #60A5FA);
}

.nv-badge-ds--neutral {
  background: var(--k-fill, rgba(26,26,26,.04));
  color: var(--k-text2, rgba(26,26,26,.65));
}

.nv-badge-ds--brand {
  background: var(--k-brand, #F27182);
  color: #fff;
}


/* ─── 6. Empty States ─── */
/* Basis: .k-empty (keeva-ui.css) — beste bestehende Implementierung
   Ersetzt langfristig: .kasse-empty, inline Empty-HTML */

.nv-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--k-sp-2xl, 64px) var(--k-sp-lg, 24px);
  text-align: center;
}
.nv-empty-state__icon {
  font-size: 48px;
  color: var(--k-text4, rgba(26,26,26,.22));
  font-variation-settings: 'FILL' 0, 'wght' 200;
  margin-bottom: var(--k-sp-md, 16px);
}
.nv-empty-state__title {
  font-family: var(--k-font, 'Outfit', sans-serif);
  font-size: var(--k-fs-title, 1.1rem);
  font-weight: var(--k-fw-bold, 700);
  color: var(--k-text, #1A1A1A);
  margin: 0 0 var(--k-sp-xs, 4px);
}
.nv-empty-state__text {
  font-family: var(--k-font, 'Outfit', sans-serif);
  font-size: var(--k-fs-body, .88rem);
  color: var(--k-text3, rgba(26,26,26,.45));
  max-width: 280px;
  margin: 0;
  line-height: var(--k-lh-normal, 1.5);
}
.nv-empty-state__action {
  margin-top: var(--k-sp-lg, 24px);
}


/* ─── 7. Skeleton Loading ─── */
/* Neues Pattern — existiert noch nicht einheitlich im Projekt */

@keyframes nv-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}

.nv-skeleton {
  background: var(--k-fill, rgba(26,26,26,.04));
  border-radius: var(--k-r-xs, 8px);
  animation: nv-skeleton-pulse 1.5s ease-in-out infinite;
}

/* Vordefinierte Formen */
.nv-skeleton--text {
  height: 14px;
  width: 80%;
  margin-bottom: 8px;
}
.nv-skeleton--title {
  height: 20px;
  width: 60%;
  margin-bottom: 12px;
}
.nv-skeleton--avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
}
.nv-skeleton--card {
  height: 100px;
  border-radius: var(--k-r-sm, 14px);
  margin-bottom: 12px;
}
.nv-skeleton--btn {
  height: 48px;
  width: 140px;
  border-radius: var(--k-r-full, 9999px);
}
.nv-skeleton--image {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--k-r-sm, 14px);
}


/* ─── 8. Search Bar ─── */
/* Basis: .k-search (keeva-ui.css) — Pill-Design mit Focus-Glow
   Ersetzt langfristig: .news-search, .ber-chat-input, Ad-hoc Suchen */

.nv-searchbar {
  display: flex;
  align-items: center;
  gap: var(--k-sp-sm, 8px);
  padding: 12px var(--k-sp-md, 16px);
  border-radius: var(--k-r-full, 9999px);
  background: var(--nv-glass-bg, rgba(255,255,255,.06));
  border: 1.5px solid var(--nv-glass-border, rgba(255,255,255,.08));
  transition:
    border-color var(--k-dur-fast, .15s),
    box-shadow var(--k-dur-fast, .15s),
    background-color var(--k-dur-fast, .15s);
}
.nv-searchbar:focus-within {
  border-color: var(--k-brand, #F27182);
  box-shadow: 0 0 0 3px var(--k-brand-glow, rgba(242,113,130,.25));
}

.nv-searchbar__icon {
  font-size: 20px;
  color: var(--k-text3, rgba(26,26,26,.45));
  font-variation-settings: 'FILL' 0, 'wght' 300;
  flex-shrink: 0;
}

.nv-searchbar__input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--k-text, #1A1A1A);
  font-family: var(--k-font, 'Outfit', sans-serif);
  font-size: var(--k-fs-body, .88rem);
  font-weight: var(--k-fw-medium, 500);
  min-width: 0;
}
.nv-searchbar__input::placeholder {
  color: var(--k-text3, rgba(26,26,26,.45));
}

.nv-searchbar__clear {
  width: 28px;
  height: 28px;
  border: none;
  background: var(--k-fill-hover, rgba(26,26,26,.07));
  border-radius: 50%;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--k-text3, rgba(26,26,26,.45));
  font-size: 16px;
  flex-shrink: 0;
}
.nv-searchbar__input:not(:placeholder-shown) ~ .nv-searchbar__clear {
  display: flex;
}


/* ─── 9. Page Header ─── */
/* Basis: .nv-page-header + .nv-page-title (style.css)
   Suffix -ds um Kollision zu vermeiden.
   Ersetzt langfristig: Ad-hoc Modul-Header */

.nv-page-header-ds {
  padding: var(--k-sp-md, 16px) var(--k-sp-md, 16px) var(--k-sp-sm, 8px);
  display: flex;
  align-items: flex-start;
  gap: var(--k-sp-sm, 8px);
}

.nv-page-header-ds__back {
  width: 36px;
  height: 36px;
  border: none;
  background: var(--k-fill, rgba(26,26,26,.04));
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--k-text, #1A1A1A);
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 4px;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--k-dur-fast, .15s);
}
.nv-page-header-ds__back:active {
  background: var(--k-fill-active, rgba(26,26,26,.12));
}

.nv-page-header-ds__content {
  flex: 1;
  min-width: 0;
}

.nv-page-header-ds__title {
  font-family: var(--k-font, 'Outfit', sans-serif);
  font-size: var(--k-fs-display, clamp(1.8rem, 5vw, 2.5rem));
  font-weight: var(--k-fw-black, 900);
  color: var(--k-text, #1A1A1A);
  letter-spacing: var(--k-ls-tight, -.04em);
  line-height: var(--k-lh-tight, 1.2);
  margin: 0;
}

.nv-page-header-ds__subtitle {
  font-family: var(--k-font, 'Outfit', sans-serif);
  font-size: var(--k-fs-body, .88rem);
  font-weight: var(--k-fw-medium, 500);
  color: var(--k-text3, rgba(26,26,26,.45));
  margin: 4px 0 0;
}

.nv-page-header-ds__actions {
  display: flex;
  align-items: center;
  gap: var(--k-sp-sm, 8px);
  flex-shrink: 0;
}


/* ─── 10. Bottom Navigation — Glass + Blur ─── */
/* backdrop-filter NUR hier erlaubt: fixed Element, nicht scrollbar.
   Performance: GPU-Layer fuer fixed Nav ist akzeptabel. */

.nv-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--nv-z-fixed, 300);
  display: flex;
  align-items: stretch;
  height: var(--nv-tab-bar-h, 64px);
  padding-bottom: var(--nv-safe-bottom, env(safe-area-inset-bottom, 0px));
  background: var(--nv-glass-bg-strong, rgba(30,23,48,.92));
  border-top: 1px solid var(--nv-glass-border, rgba(255,255,255,.08));
  -webkit-backdrop-filter: var(--nv-glass-blur, blur(24px));
  backdrop-filter: var(--nv-glass-blur, blur(24px));
  will-change: backdrop-filter;
}

.nv-bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--nv-text-muted, var(--k-text3));
  font-size: var(--k-fs-micro, .6rem);
  font-weight: var(--k-fw-medium, 500);
  font-family: var(--k-font, 'Outfit', sans-serif);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    color var(--k-dur-fast, .15s),
    text-shadow var(--k-dur-fast, .15s);
  text-decoration: none;
  border: none;
  background: none;
  padding: 0;
}
.nv-bottom-nav__item .material-symbols-outlined,
.nv-bottom-nav__item .material-symbols-rounded {
  font-size: 24px;
  transition: color var(--k-dur-fast, .15s);
}

/* Aktives Item — Glow-Effekt */
.nv-bottom-nav__item--active {
  color: var(--k-brand, #F27182);
}
.nv-bottom-nav__item--active .material-symbols-outlined,
.nv-bottom-nav__item--active .material-symbols-rounded {
  color: var(--k-brand, #F27182);
  text-shadow: var(--nv-glow-primary, 0 0 20px rgba(242,113,130,.3));
}

/* ═══════════════════════════════════════════════════════════════
   BUTTON SYSTEM — Einmal definieren, überall gleich nutzen
   ═══════════════════════════════════════════════════════════════ */

.nv-btn-primary,
.nv-btn-secondary,
.nv-btn-danger,
.nv-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 24px;
  border-radius: var(--k-r-full, 9999px);
  border: 1.5px solid transparent;
  font-family: var(--k-font, 'Outfit', sans-serif);
  font-size: var(--k-fs-body, .88rem);
  font-weight: var(--k-fw-semibold, 600);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s, color .15s, border-color .15s, transform .1s, opacity .15s;
  min-height: 44px;
  white-space: nowrap;
}
.nv-btn-primary:active,
.nv-btn-secondary:active,
.nv-btn-danger:active,
.nv-btn-ghost:active {
  transform: scale(.97);
}

/* Primary: Rosa */
.nv-btn-primary {
  background: var(--k-brand, #F27182);
  color: #fff;
  border-color: var(--k-brand, #F27182);
}
.nv-btn-primary:hover { opacity: .9; }

/* Secondary: Transparent + Border */
.nv-btn-secondary {
  background: transparent;
  color: var(--k-text, #F5F5F5);
  border-color: var(--k-border-strong, rgba(255,255,255,.15));
}
.nv-btn-secondary:hover { background: var(--k-fill, rgba(255,255,255,.08)); }

/* Danger: Rot */
.nv-btn-danger {
  background: var(--k-red, #ff3838);
  color: #fff;
  border-color: var(--k-red, #ff3838);
}
.nv-btn-danger:hover { opacity: .9; }

/* Ghost: Nur Text */
.nv-btn-ghost {
  background: transparent;
  color: var(--k-text2, rgba(255,255,255,.7));
  border: none;
  padding: 12px 16px;
}
.nv-btn-ghost:hover { color: var(--k-text, #F5F5F5); }

/* Small variant */
.nv-btn-sm {
  padding: 8px 16px;
  font-size: var(--k-fs-caption, .8rem);
  min-height: 36px;
}

/* ═══════════════════════════════════════════════════════════════
   PILL-TABS — Einheitliche Filter-Toggles (Aktiv/Alle/Recall etc.)
   ═══════════════════════════════════════════════════════════════ */

.nv-pill-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 16px 12px;
}
.nv-pill-tabs::-webkit-scrollbar { display: none; }

.nv-pill-tab {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: var(--k-r-full, 9999px);
  border: 1.5px solid var(--k-border-strong, rgba(255,255,255,.12));
  background: transparent;
  font-family: var(--k-font, 'Outfit', sans-serif);
  font-size: var(--k-fs-caption, .8rem);
  font-weight: var(--k-fw-semibold, 600);
  color: var(--k-text2, rgba(255,255,255,.7));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s, color .15s, border-color .15s, transform .1s;
  white-space: nowrap;
}
.nv-pill-tab:active { transform: scale(.95); }
.nv-pill-tab.active {
  background: var(--k-brand, #F27182);
  color: #fff;
  border-color: var(--k-brand, #F27182);
}

/* Light mode adjustments */
[data-theme="light"] .nv-btn-secondary {
  color: var(--k-text, #1A1A1A);
  border-color: var(--k-border-strong, #DFE2E8);
}
[data-theme="light"] .nv-btn-ghost {
  color: var(--k-text2, rgba(0,0,0,.6));
}
[data-theme="light"] .nv-pill-tab {
  border-color: var(--k-border-strong, #DFE2E8);
  color: var(--k-text2, rgba(0,0,0,.55));
}

/* ═══════════════════════════════════════════════════════════════
   AVATAR — Zentrale Avatar-Komponente (Kunden + Team)
   ═══════════════════════════════════════════════════════════════ */

.nv-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--k-brand-light, rgba(242,113,130,.15));
  color: var(--k-brand, #F27182);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--k-fw-bold, 700);
  font-size: var(--k-fs-body, .88rem);
  font-family: var(--k-font, 'Outfit', sans-serif);
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}
.nv-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.nv-avatar--sm { width: 32px; height: 32px; font-size: .75rem; }
.nv-avatar--lg { width: 52px; height: 52px; font-size: 1.1rem; }
.nv-avatar__status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--k-bg, #0D0D0F);
}
.nv-avatar__status--online { background: var(--k-green, #22c55e); }
.nv-avatar__status--offline { background: var(--k-text3, #9CA3AF); }

/* ═══════════════════════════════════════════════════════════════
   SEARCHBAR — Einheitlich überall (Kunden, Spaces, Leistungen...)
   ═══════════════════════════════════════════════════════════════ */

.nv-searchbar {
  display: flex;
  align-items: center;
  gap: var(--k-sp-sm, 8px);
  padding: 12px var(--k-sp-md, 16px);
  border-radius: var(--k-r-full, 9999px);
  background: var(--nv-glass-bg, rgba(255,255,255,.06));
  border: 1.5px solid var(--nv-glass-border, rgba(255,255,255,.08));
  transition: border-color .15s, box-shadow .15s, background-color .15s;
  margin: 0 16px 12px;
}
.nv-searchbar:focus-within {
  border-color: var(--k-brand, #F27182);
  box-shadow: 0 0 0 3px var(--k-brand-glow, rgba(242,113,130,.25));
}
.nv-searchbar__icon {
  font-size: 20px;
  color: var(--k-text3, rgba(255,255,255,.45));
  flex-shrink: 0;
}
.nv-searchbar__input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--k-text, #F5F5F5);
  font-family: var(--k-font, 'Outfit', sans-serif);
  font-size: var(--k-fs-body, .88rem);
  font-weight: var(--k-fw-medium, 500);
  min-width: 0;
}
.nv-searchbar__input::placeholder { color: var(--k-text3, rgba(255,255,255,.45)); }
.nv-searchbar__clear {
  width: 28px;
  height: 28px;
  border: none;
  background: var(--k-fill-hover, rgba(255,255,255,.12));
  border-radius: 50%;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--k-text3);
  font-size: 16px;
  flex-shrink: 0;
}
.nv-searchbar__input:not(:placeholder-shown) ~ .nv-searchbar__clear { display: flex; }

[data-theme="light"] .nv-searchbar {
  background: var(--k-bg2, #EFF1F5);
  border-color: var(--k-border-strong, #DFE2E8);
}
[data-theme="light"] .nv-searchbar__icon,
[data-theme="light"] .nv-searchbar__input::placeholder {
  color: var(--k-text3, rgba(0,0,0,.4));
}
[data-theme="light"] .nv-searchbar__input {
  color: var(--k-text, #1A1A1A);
}


/* ─── 10. Module Page Layout (.nv-page) ─── */
/* renderModulePage() erzwingt die korrekte Reihenfolge und Abstände:
   Header → Search → Stats → Content
   Wird von renderModulePage() in form.js generiert. */

.nv-page-search {
  padding: 0 16px;
  margin-top: var(--nv-header-to-search, 16px);
}
.nv-page-search .nv-searchbar {
  margin: 0;
  width: 100%;
}

.nv-page-stats {
  display: flex;
  gap: 8px;
  padding: 0 16px;
  margin-top: var(--nv-search-to-content, 16px);
}
.nv-page-stats:first-child {
  margin-top: var(--nv-header-to-content, 20px);
}

.nv-stat-box {
  flex: 1;
  padding: 12px;
  border-radius: 12px;
  background: var(--k-fill, rgba(255,255,255,.05));
  text-align: center;
  min-width: 0;
}
.nv-stat-box__value {
  font-size: 24px;
  font-weight: 700;
  font-family: var(--k-font, 'Outfit', sans-serif);
  color: var(--k-text, #F5F5F5);
  line-height: 1.2;
}
.nv-stat-box__label {
  font-size: 12px;
  font-weight: 400;
  color: var(--k-text, #F5F5F5);
  opacity: .6;
  margin-top: 2px;
}

[data-theme="light"] .nv-stat-box,
[data-theme="light"] .nv-stat-box {
  background: var(--k-fill, rgba(0,0,0,.03));
}

.nv-page-content {
  padding: 0 16px calc(var(--nv-content-bottom, 80px) + 20px);
  margin-top: var(--nv-search-to-content, 16px);
}
/* When content follows header directly (no search/stats) */
.k-module-header + .nv-page-content {
  margin-top: var(--nv-header-to-content, 20px);
}


/* ─── 11. List Row (.nv-list-row) ─── */
/* Einheitliche Listen-Zeile: Icon links, Text mitte, Meta rechts.
   Ersetzt Cards/Boxen in Listen. */

.nv-list-row {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 12px 0;
  border-bottom: 1px solid var(--k-border, rgba(255,255,255,.08));
  gap: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--k-dur-fast, .15s);
}
.nv-list-row:last-child {
  border-bottom: none;
}
.nv-list-row:active {
  background: var(--k-fill, rgba(255,255,255,.05));
}

.nv-list-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
  font-weight: 700;
  font-family: var(--k-font, 'Outfit', sans-serif);
}
.nv-list-icon .material-symbols-rounded,
.nv-list-icon .material-symbols-outlined {
  font-size: 20px;
}

.nv-list-text {
  flex: 1;
  min-width: 0;
}
.nv-list-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--k-text, #F5F5F5);
  font-family: var(--k-font, 'Outfit', sans-serif);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.nv-list-subtitle {
  font-size: 13px;
  color: var(--k-text, #F5F5F5);
  opacity: .6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  margin-top: 1px;
}

.nv-list-meta {
  text-align: right;
  flex-shrink: 0;
}
.nv-list-meta-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--k-text, #F5F5F5);
  line-height: 1.3;
}
.nv-list-meta-label {
  font-size: 11px;
  color: var(--k-text, #F5F5F5);
  opacity: .5;
  line-height: 1.3;
  margin-top: 1px;
}

.nv-list-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--k-font, 'Outfit', sans-serif);
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nv-list-chevron {
  font-size: 18px !important;
  opacity: .3;
  flex-shrink: 0;
  color: var(--k-text, #F5F5F5);
}

[data-theme="light"] .nv-list-row,
[data-theme="light"] .nv-list-row {
  border-bottom-color: var(--k-border, rgba(0,0,0,.06));
}
[data-theme="light"] .nv-list-row:active,
[data-theme="light"] .nv-list-row:active {
  background: var(--k-fill, rgba(0,0,0,.03));
}


/* ─── 12. Detail Page Layout (.nv-detail) ─── */
/* Sektionen-basierte Detail-Ansicht fuer Bestellung-Detail,
   Aufgaben-Detail, Post-Detail, Kunden-Profil etc. */

.nv-detail-section {
  margin-top: var(--nv-section-gap, 24px);
  padding: 0 16px;
}
.nv-detail-section:first-child {
  margin-top: var(--nv-header-to-content, 20px);
}
.nv-detail-section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--k-brand, #F27182);
  margin-bottom: 12px;
  font-family: var(--k-font, 'Outfit', sans-serif);
  display: flex;
  align-items: center;
}

/* Key-Value Pairs */
.nv-detail-kv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
.nv-detail-kv-item {
  min-width: 0;
}
.nv-detail-kv-label {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  line-height: 1.3;
  margin-bottom: 2px;
  font-family: var(--k-font, 'Outfit', sans-serif);
}
[data-theme="light"] .nv-detail-kv-label { color: rgba(0,0,0,0.5); }
.nv-detail-kv-value {
  font-size: 16px;
  font-weight: 500;
  color: var(--k-text, #F5F5F5);
  line-height: 1.3;
  margin-top: 2px;
  font-family: var(--k-font, 'Outfit', sans-serif);
  word-break: break-word;
}

/* Status Badge inline */
.nv-detail-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--k-font, 'Outfit', sans-serif);
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* Action Buttons Row */
.nv-detail-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}

/* Section Divider */
.nv-detail-divider {
  height: 1px;
  background: var(--k-border, rgba(255,255,255,.08));
  margin: var(--nv-section-gap, 24px) 16px 0;
}


/* ─── 13. Form Page Layout (.nv-form) ─── */
/* Einheitliche Formular-Felder fuer Neue Aufgabe, Neue Kampagne,
   Neue Bestellung, Neues Protokoll etc. */

.nv-form-field {
  margin-bottom: 20px;
}
.nv-form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--k-text, #F5F5F5);
  opacity: .5;
  margin-bottom: 6px;
  font-family: var(--k-font, 'Outfit', sans-serif);
}
.nv-form-input {
  width: 100%;
  height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--k-border, rgba(255,255,255,.08));
  border-radius: 8px;
  background: transparent;
  color: var(--k-text, #F5F5F5);
  font-size: 16px;
  font-family: var(--k-font, 'Outfit', sans-serif);
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  outline: none;
  transition: border-color .15s;
}
.nv-form-input:focus {
  border-color: var(--k-brand, #F27182);
}
.nv-form-input::placeholder {
  color: var(--k-text, #F5F5F5);
  opacity: .3;
}

.nv-form-textarea {
  width: 100%;
  min-height: 120px;
  padding: 12px 16px;
  border: 1px solid var(--k-border, rgba(255,255,255,.08));
  border-radius: 8px;
  background: transparent;
  color: var(--k-text, #F5F5F5);
  font-size: 16px;
  font-family: var(--k-font, 'Outfit', sans-serif);
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  outline: none;
  resize: vertical;
  transition: border-color .15s;
}
.nv-form-textarea:focus {
  border-color: var(--k-brand, #F27182);
}

.nv-form-select {
  width: 100%;
  height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--k-border, rgba(255,255,255,.08));
  border-radius: 8px;
  background: transparent;
  color: var(--k-text, #F5F5F5);
  font-size: 16px;
  font-family: var(--k-font, 'Outfit', sans-serif);
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  outline: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 40px;
  transition: border-color .15s;
}
.nv-form-select:focus {
  border-color: var(--k-brand, #F27182);
}

/* Chip Selection (Typ, Kategorie etc.) */
.nv-form-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.nv-form-chip {
  min-width: 80px;
  padding: 10px 16px;
  border-radius: var(--k-r-full, 9999px);
  border: 1px solid var(--k-border, rgba(255,255,255,.08));
  background: transparent;
  color: var(--k-text, #F5F5F5);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--k-font, 'Outfit', sans-serif);
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, border-color .15s, color .15s;
}
.nv-form-chip.active {
  background: var(--k-brand, #F27182);
  border-color: var(--k-brand, #F27182);
  color: #fff;
}
.nv-form-chip:active {
  transform: scale(.97);
}

/* Weekday Grid (MO-SO) */
.nv-form-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.nv-form-day {
  padding: 10px 0;
  border-radius: 8px;
  border: 1px solid var(--k-border, rgba(255,255,255,.08));
  background: transparent;
  color: var(--k-text, #F5F5F5);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--k-font, 'Outfit', sans-serif);
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, border-color .15s, color .15s;
}
.nv-form-day.active {
  background: var(--k-brand, #F27182);
  border-color: var(--k-brand, #F27182);
  color: #fff;
}

/* Submit Button */
.nv-form-submit {
  margin-top: 24px;
  width: 100%;
}

/* Light mode overrides */
[data-theme="light"] .nv-form-input,
[data-theme="light"] .nv-form-input,
[data-theme="light"] .nv-form-textarea,
[data-theme="light"] .nv-form-textarea,
[data-theme="light"] .nv-form-select,
[data-theme="light"] .nv-form-select {
  border-color: var(--k-border, rgba(0,0,0,.1));
  color: var(--k-text, #1A1A1A);
}
[data-theme="light"] .nv-form-chip,
[data-theme="light"] .nv-form-chip,
[data-theme="light"] .nv-form-day,
[data-theme="light"] .nv-form-day {
  border-color: var(--k-border, rgba(0,0,0,.1));
  color: var(--k-text, #1A1A1A);
}
[data-theme="light"] .nv-detail-divider,
[data-theme="light"] .nv-detail-divider {
  background: var(--k-border, rgba(0,0,0,.08));
}


/* ═══════════════════════════════════════════════════════════════
   UTILITY CLASSES — Ersatz für die häufigsten inline styles
   ═══════════════════════════════════════════════════════════════ */

/* ── Flex Utilities ── */
.nv-flex { display: flex; }
.nv-flex-center { display: flex; align-items: center; }
.nv-flex-between { display: flex; align-items: center; justify-content: space-between; }
.nv-flex-col { display: flex; flex-direction: column; }
.nv-flex-wrap { flex-wrap: wrap; }
.nv-flex-1 { flex: 1; min-width: 0; }

/* ── Gap ── */
.nv-gap-xs { gap: 4px; }
.nv-gap-sm { gap: 8px; }
.nv-gap-md { gap: 12px; }
.nv-gap-lg { gap: 16px; }
.nv-gap-xl { gap: 24px; }

/* ── Padding ── */
.nv-p-0 { padding: 0; }
.nv-p-sm { padding: 8px; }
.nv-p-md { padding: 16px; }
.nv-p-lg { padding: 24px; }
.nv-px-md { padding-left: 16px; padding-right: 16px; }

/* ── Margin ── */
.nv-mt-sm { margin-top: 8px; }
.nv-mt-md { margin-top: 16px; }
.nv-mt-lg { margin-top: 24px; }
.nv-mb-sm { margin-bottom: 8px; }
.nv-mb-md { margin-bottom: 16px; }

/* ── Text ── */
.nv-text-center { text-align: center; }
.nv-text-muted { color: var(--k-text3, rgba(255,255,255,.4)); }
.nv-text-sm { font-size: var(--k-fs-caption, .72rem); }
.nv-text-xs { font-size: var(--k-fs-micro, .6rem); }
.nv-text-bold { font-weight: var(--k-fw-bold, 700); }
.nv-text-semibold { font-weight: var(--k-fw-semibold, 600); }
.nv-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Grid ── */
.nv-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.nv-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.nv-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

/* ── Liquid Glass Section ── */
.nv-glass-section {
  background: var(--k-glass-bg, rgba(30,30,35,.55));
  backdrop-filter: var(--k-glass-blur, blur(24px));
  -webkit-backdrop-filter: var(--k-glass-blur, blur(24px));
  border: 1px solid var(--k-glass-border, rgba(255,255,255,.08));
  border-radius: var(--k-r-lg, 25px);
  padding: var(--k-sp-lg, 24px);
}
.nv-glass-section--compact {
  padding: var(--k-sp-md, 16px);
  border-radius: var(--k-r-md, 16px);
}

/* ── Section Header (Module-intern) ── */
.nv-section-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 16px 8px;
}
.nv-section-hdr__icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nv-section-hdr__icon .material-symbols-outlined,
.nv-section-hdr__icon .material-symbols-rounded {
  font-size: 18px;
  font-variation-settings: 'FILL' 1, 'wght' 400;
}
.nv-section-hdr__title {
  font-size: var(--k-fs-body, .88rem);
  font-weight: var(--k-fw-semibold, 600);
  color: var(--k-text, #F5F5F5);
  flex: 1;
}
.nv-section-hdr__link {
  font-size: var(--k-fs-body, .88rem);
  color: var(--k-brand, #F27182);
  font-weight: var(--k-fw-semibold, 600);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ── Action Row (Button-Reihe) ── */
.nv-action-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.nv-action-row--stack {
  flex-direction: column;
}

/* ── Divider ── */
.nv-divider {
  height: 1px;
  background: var(--k-border, rgba(255,255,255,.08));
  margin: 16px 0;
}

/* ── Light Mode Overrides für Utilities ── */
[data-theme="light"] .nv-text-muted,
[data-theme="light"] .nv-text-muted {
  color: var(--k-text3, rgba(0,0,0,.4));
}
[data-theme="light"] .nv-glass-section,
[data-theme="light"] .nv-glass-section {
  background: var(--k-glass-bg, rgba(255,255,255,.82));
  border-color: var(--k-glass-border, rgba(0,0,0,.06));
}
[data-theme="light"] .nv-divider,
[data-theme="light"] .nv-divider {
  background: var(--k-border, rgba(0,0,0,.08));
}


/* ═══════════════════════════════════════════════════════════════
   UNIFIED LIST COMPONENTS — Einheitliche Listen-Patterns
   Jede Liste in der App nutzt EINES dieser Patterns.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Card Grid (Portrait/Thumbnail Cards — Kollegen, Medien) ── */
.nv-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--k-sp-sm, 8px);
}
.nv-card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.nv-card-grid--auto { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

.nv-card-grid-item {
  background: var(--nv-glass-bg, var(--k-surface-solid));
  border: 1px solid var(--nv-glass-border, var(--k-border, transparent));
  border-radius: var(--k-r-md, 16px);
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--k-dur-fast, .15s), box-shadow var(--k-dur-fast, .15s);
}
.nv-card-grid-item:active {
  transform: scale(.97);
}

.nv-card-grid-thumb {
  width: 100%;
  aspect-ratio: 4/5;
  overflow: hidden;
  position: relative;
}
.nv-card-grid-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nv-card-grid-thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #1a1a2e, #2d2d44);
  font-size: 3rem;
  font-weight: 900;
  color: rgba(255,255,255,.08);
}
.nv-card-grid-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 65%;
  background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,.3) 40%, transparent 100%);
}
.nv-card-grid-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--k-sp-md, 16px);
  z-index: 2;
}
.nv-card-grid-name {
  font-size: 1.2rem;
  font-weight: var(--k-fw-bold, 700);
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
  letter-spacing: -.02em;
}
.nv-card-grid-sub {
  font-size: var(--k-fs-micro, .6rem);
  color: rgba(255,255,255,.6);
  margin-top: 2px;
}
.nv-card-grid-body {
  padding: var(--k-sp-sm, 8px) var(--k-sp-md, 12px);
}

/* Light Mode */
[data-theme="light"] .nv-card-grid-thumb--placeholder,
[data-theme="light"] .nv-card-grid-thumb--placeholder {
  background: linear-gradient(160deg, #e8e8ee, #d0d0d8);
  color: rgba(0,0,0,.08);
}

/* ── 2. Detail Row (Label: Value — Inline Paare) ── */
.nv-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--k-border, rgba(255,255,255,.08));
  gap: 12px;
}
.nv-detail-row:last-child { border-bottom: none; }
.nv-detail-row__label {
  font-size: var(--k-fs-caption, .72rem);
  color: var(--k-text3, rgba(255,255,255,.4));
  flex-shrink: 0;
}
.nv-detail-row__value {
  font-size: var(--k-fs-caption, .72rem);
  font-weight: var(--k-fw-semibold, 600);
  color: var(--k-text, #F5F5F5);
  text-align: right;
  max-width: 60%;
  word-break: break-word;
}

[data-theme="light"] .nv-detail-row,
[data-theme="light"] .nv-detail-row {
  border-color: var(--k-border, rgba(0,0,0,.06));
}

/* ── 3. Feed Card (News/Activity — Title + Excerpt + Meta) ── */
.nv-feed-card {
  background: var(--nv-glass-bg, var(--k-surface-solid));
  border: 1px solid var(--nv-glass-border, var(--k-border, transparent));
  border-radius: var(--k-r-md, 16px);
  padding: var(--k-sp-md, 16px);
  margin-bottom: var(--k-sp-sm, 8px);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--k-dur-fast, .15s);
}
.nv-feed-card:active {
  background: var(--k-fill, rgba(255,255,255,.05));
}
.nv-feed-card.unread {
  border-left: 3px solid var(--k-brand, #F27182);
}
.nv-feed-card__title {
  font-size: var(--k-fs-body, .88rem);
  font-weight: var(--k-fw-bold, 700);
  color: var(--k-text, #F5F5F5);
  line-height: 1.3;
}
.nv-feed-card__excerpt {
  font-size: var(--k-fs-caption, .72rem);
  color: var(--k-text2, rgba(255,255,255,.65));
  line-height: 1.4;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nv-feed-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--k-fs-micro, .6rem);
  color: var(--k-text3, rgba(255,255,255,.4));
  margin-top: 8px;
}
.nv-feed-card__image {
  width: 100%;
  max-height: 160px;
  object-fit: cover;
  border-radius: var(--k-r-sm, 8px);
  margin-top: 8px;
}

/* ── 4. Status Row (Icon + Text + Status Badge + Chevron) ── */
.nv-status-row {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--k-border, rgba(255,255,255,.08));
  gap: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nv-status-row:last-child { border-bottom: none; }
.nv-status-row:active { background: var(--k-fill, rgba(255,255,255,.05)); }

.nv-status-row__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
}
.nv-status-row__text {
  flex: 1;
  min-width: 0;
}
.nv-status-row__title {
  font-size: var(--k-fs-body, .88rem);
  font-weight: var(--k-fw-semibold, 600);
  color: var(--k-text, #F5F5F5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nv-status-row__subtitle {
  font-size: var(--k-fs-caption, .72rem);
  color: var(--k-text3, rgba(255,255,255,.4));
  margin-top: 1px;
}
.nv-status-row__badge {
  flex-shrink: 0;
}
.nv-status-row__chevron {
  font-size: 18px;
  color: var(--k-text4, rgba(255,255,255,.2));
  flex-shrink: 0;
}

[data-theme="light"] .nv-status-row,
[data-theme="light"] .nv-status-row {
  border-color: var(--k-border, rgba(0,0,0,.06));
}
[data-theme="light"] .nv-status-row:active,
[data-theme="light"] .nv-status-row:active {
  background: var(--k-fill, rgba(0,0,0,.03));
}

/* ── 5. Menu List (Settings-style, full-width rows with icons) ── */
.nv-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--k-border, rgba(255,255,255,.08));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--k-dur-fast, .15s);
}
.nv-menu-item:last-child { border-bottom: none; }
.nv-menu-item:active { background: var(--k-fill, rgba(255,255,255,.05)); }

.nv-menu-item__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nv-menu-item__icon .material-symbols-outlined,
.nv-menu-item__icon .material-symbols-rounded {
  font-size: 18px;
}
.nv-menu-item__text {
  flex: 1;
  min-width: 0;
}
.nv-menu-item__title {
  font-size: var(--k-fs-body, .88rem);
  font-weight: var(--k-fw-semibold, 600);
  color: var(--k-text, #F5F5F5);
}
.nv-menu-item__subtitle {
  font-size: var(--k-fs-micro, .6rem);
  color: var(--k-text3, rgba(255,255,255,.4));
  margin-top: 1px;
}
.nv-menu-item__value {
  font-size: var(--k-fs-caption, .72rem);
  color: var(--k-text3, rgba(255,255,255,.4));
  flex-shrink: 0;
}
.nv-menu-item__chevron {
  font-size: 18px;
  color: var(--k-text4, rgba(255,255,255,.2));
  flex-shrink: 0;
}
.nv-menu-item--danger .nv-menu-item__title { color: var(--k-red, #EF4444); }
.nv-menu-item--danger .nv-menu-item__icon { color: var(--k-red, #EF4444); }

[data-theme="light"] .nv-menu-item,
[data-theme="light"] .nv-menu-item {
  border-color: var(--k-border, rgba(0,0,0,.06));
}
[data-theme="light"] .nv-menu-item:active,
[data-theme="light"] .nv-menu-item:active {
  background: var(--k-fill, rgba(0,0,0,.03));
}