/* ═══════════════════════════════════════════════════════════════
   NEVANU — nv-consistency.css (Design-Overhaul 2026-07-17)
   ═══════════════════════════════════════════════════════════════
   Zweck: EIN konsistentes, modernes Erscheinungsbild über alle
   Module — mobile UND desktop. Wird als LETZTES Stylesheet geladen
   (index.php) und normalisiert Komponenten token-basiert.
   Stefan-Auftrag 2026-07-17: "Design-System muss zwingend
   konsistent sein, modern, sexy, intuitiv — mobile wie desktop".

   Regeln:
   - NUR bestehende Klassen stylen (kein Markup-Zwang, kein Feature-Removal)
   - Token-basiert (--k-* / --nv-*), theme-aware light+dark
   - !important nur dort, wo JS-injizierte Styles (bottom-sheet.js)
     oder Alt-!important-Regeln (style.css) überschrieben werden müssen
   Verlinkung: css/design-tokens.css (Tokens), js/bottom-sheet.js
   (Sheet-Markup), js/form.js _injectDesktopSidebar (Desktop-Shell),
   DEVLOG 2026-07-17.
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
   1. BASIS — Rendering & Rhythmus
   ─────────────────────────────────────────────────────────────── */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { text-rendering: optimizeLegibility; }

/* Einheitliche, dezente Scrollbars (Desktop) */
* { scrollbar-width: thin; scrollbar-color: var(--k-border-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--k-border-strong); border-radius: var(--nv-r-marke); }
*::-webkit-scrollbar-thumb:hover { background: var(--k-text4); }

/* Bewegung ist Teil des abgenommenen Rosé-Designs (Atmen, Puls, Glanz,
   Lade-Ringe). Der fruehere globale .01ms-Killer bei «Bewegung reduzieren»
   schaltete auf iPhones mit dieser Einstellung ALLE Animationen ab — die
   Demo tat das nie, deshalb wirkte die App daneben tot (Stefan-Befunde
   Runden 3-5). Bewusst entfernt am 2026-08-25. */

/* ───────────────────────────────────────────────────────────────
   2. BUTTONS — eine Sprache (nv-btn Familie)
   ─────────────────────────────────────────────────────────────── */
/* Die dritte `.nv-btn`-Definition stand hier (min-height 44, padding 0/20,
   font-size .9rem) und stritt sich mit design-system.css und style.css.
   Aufgeloest 2026-08-03: es gibt nur noch die in design-system.css.
   Die Farb-Varianten unten bleiben — sie sagen etwas ueber die Bedeutung
   eines Knopfes, nicht ueber seine Form. */

/* Knopf-Aussehen und Fokus-Ring standen hier bis 2026-08-28. Beides ist
   in den Katalog gewandert (css/system.css §11 KNOPF) — der Knopf war in
   sechs Dateien definiert, das war der Kern des Befundes «fuenf
   konkurrierende Systeme». Nichts ergaenzen: es faengt sonst von vorne an.
   Waechter: tools/katalog-abdeckung.cjs. */

/* ───────────────────────────────────────────────────────────────
   3. FORMULARE — Inputs/Labels einheitlich
   ─────────────────────────────────────────────────────────────── */



/* Suchfelder mit Lupe-Icon: padding-left NICHT plattmachen — §3 überschrieb
   .nv-search input (42px) → Icon lag auf dem Placeholder (Telefon-Panel u.a.) */





/* ───────────────────────────────────────────────────────────────
   4. KARTEN & FLÄCHEN — ein Radius-/Schatten-System
   ─────────────────────────────────────────────────────────────── */



/* `.k-glass-card` raus 2026-08-29 (Paket A1) — (0,1,0) ohne
   `!important` gegen die Katalogregel mit `!important`: tot.
   `.profil-glass-card` bleibt, sie ist noch nicht im Katalog. */
.profil-glass-card {
  /* Nacht 3 (07.09.2026, Punkt 4): `border-radius: 18px` ist raus — jede
     Karte traegt `k-glass-card` (gemessen 26 px, E5), der Wert kam nie an. */
  border: 1px solid var(--k-glass-border);
  /* E2.2 (2026-09-01): Inhaltskarte im Scroller — deckende Flaeche statt
     Glas (Pruefbedingung 1: Glas nie auf Inhalt). Der Name bleibt, bis die
     Karte in den Katalog wandert. */
  background: var(--k-surface-solid);
}

/* ───────────────────────────────────────────────────────────────
   5. SHEETS — warmes Dark statt kaltem Violett + Desktop-Modal
   ─────────────────────────────────────────────────────────────── */
/* Palette-Fix: k-bsheet dunkel war kalt-violett (rgba(30,23,48)) —
   auf warme App-Palette (#181411-Familie) normalisiert. */
[data-theme="dark"] .k-bsheet {
  background: rgba(15, 15, 15, .94) !important;
  border-color: var(--k-glass-border) !important;
}
[data-theme="dark"] .bottom-sheet { background: rgba(15, 15, 15, .94) !important; }

/* ───────────────────────────────────────────────────────────────
   6. DESKTOP (≥1024px) — echte Software statt gestrecktem Handy
   ─────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  /* Inhalt: angenehme Lesebreite, zentriert */
  #dash-content { max-width: 1240px; margin-left: auto; margin-right: auto; }
  body.has-sidebar #dash-content { max-width: 1240px; }

  /* Sheets werden zentrierte Modals (statt full-width Bottom-Sheet) */
  .k-bsheet {
    left: 50% !important; right: auto !important; bottom: 32px !important;
    width: min(640px, 92vw) !important;
    max-height: 86vh !important;
    /* Nacht 4 (Stefan 23, 06.09.2026): das Blatt hat EINE Rundung, 32 aus dem
       Katalog — hier stand 24 px mit Vorrang, nur am Bildschirm wirksam. */
    border-bottom: 1px solid var(--k-glass-border) !important;
    transform: translate(-50%, calc(100% + 40px)) !important;
  }
  .k-bsheet-backdrop.active .k-bsheet { transform: translate(-50%, 0) !important; }
  /* Sidebar-Offset-Zentrierung: siehe §10d (left-basiert, kein margin-Shift) */

  /* Listen-Karten: Hover-Feedback wie moderne Desktop-Software */
  
  

  /* Modul-Suchfelder & Seiteninhalt mit Luft */
  .nv-page-content { padding-bottom: 48px; }

  /* Tabellen/Listen: Zeilen-Hover */
  .bottom-sheet-item:hover, .k-search-item:hover { background: var(--k-fill-hover); }
}

/* Großer Desktop */
@media (min-width: 1440px) {
  #dash-content { max-width: 1360px; }
}

/* ───────────────────────────────────────────────────────────────
   7. MOBILE-FEINSCHLIFF — Touch-Ziele & Abstände
   ─────────────────────────────────────────────────────────────── */
/* Die Knopf-Hoehen fuer kleine Bildschirme sind mit der Zusammenfuehrung
   entfallen: 52px bzw. 40px sind auf dem Handy so gut wie am Rechner, und
   eine vierte Stelle mit Knopf-Groessen war genau das Problem. */

/* ───────────────────────────────────────────────────────────────
   8. STATUS-BADGES — eine Form
   ─────────────────────────────────────────────────────────────── */
.nv-badge, .bsi-badge, .nv-sidebar-badge {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* Leere-Zustände einheitlich */
.nv-empty, [class*="empty-state"] { color: var(--k-text3); }

/* ───────────────────────────────────────────────────────────────
   9. WARM-DARK-VEREINHEITLICHUNG — Altlasten mit kalt-violettem
   Dunkel (rgba(25/30,20,35/48)) auf die warme App-Palette (#181411-
   Familie) gezogen. Betrifft Tab-Bar, Module-Header-Dropdown,
   Panel-Header. (k-bsheet + bottom-sheet: siehe §5.)
   ─────────────────────────────────────────────────────────────── */
/* ⚠ HIER STANDEN ZWEI k-tab-bar-REGELN, entfernt 2026-08-30 (D1).
   Der Kommentar erklaerte, warum sie noetig waren: `style.css` trug
   MEHRERE Generationen `[data-theme] body.k-ui .k-tab-bar{…}!important`
   uebereinander, und die letzte machte die Pille fast unsichtbar.
   Diese Regel hat sie ueberstimmt.
   Der ganze Streit war gegenstandslos: die Leiste wird seit dem
   Umbau auf `js/app-chrome.js` GAR NICHT MEHR GEBAUT. Gemessen in
   allen drei Themen — kein `.k-tab-bar` im Dokument. Zusammen mit den
   sieben Fassungen in `style.css` und dreien in `ios-grouped.css` und
   `keeva-ui.css` sind alle 21 Regeln weg.
   Die Lehre steht im Kanon: eine Erwaehnung im Code ist kein Beweis,
   dass etwas auf dem Bildschirm erscheinen kann. */
[data-theme="dark"] .k-mh-dropdown {
  background: rgba(15, 15, 15, .94) !important;
  border-color: var(--k-glass-border) !important;
}
[data-theme="dark"] .nv-panel-header { background: rgba(10, 10, 10, .8); }
[data-theme="dark"] .nv-panel-header.scrolled { background: rgba(10, 10, 10, .92); }

/* ───────────────────────────────────────────────────────────────
   10. DESIGN-REBOOT v2 (2026-07-17, Screenshot-verifiziert) —
   Beschlossen nach visueller IST-Analyse der lokalen Instanz
   (Sandbox-MariaDB + Playwright, mobile 390 + desktop 1440,
   dark + light). Referenz: DEVLOG 2026-07-17 Teil 3.
   ─────────────────────────────────────────────────────────────── */

/* 10a. NEON-WORDMARK HINTER CONTENT ENTFERNT.
   #k-tab-brand (glühendes NEVANU-Logo fix über der Tab-Bar) blutete
   durch halbtransparente Karten mitten im Content — auf JEDEM Screen
   der dominanteste Störfaktor. Reversibel: Regel löschen. */
#k-tab-brand { display: none !important; }

/* 10b. AI-FAB BERUHIGT. Conic-Blur-Spin + Puls-Glow wirkten wie ein
   roter Klecks (und Dauer-GPU-Last — vgl. iPhone-Hitze-Lesson §10
   CLAUDE.md). Jetzt: ruhiger Brand-Gradient-Kreis mit statischem
   Schatten. */
.k-ai-fab-glow { display: none !important; }
.k-ai-fab-ring {
  animation: none !important;
  box-shadow: 0 6px 20px rgba(236, 72, 153, .35) !important;
}

/* 10c. HOME-HERO RHYTHMUS. 48px Top-Luft + 47px-Titel sind auf
   Mobile ok, aber der Leerraum unter dem Datum war doppelt so hoch
   wie jede Karte. Straffer vertikaler Takt. */
/* Leere Notification-Liste erzeugte 56+12px Phantom-Lücke unter dem Hero */
.k-notif-list:empty { margin: 0 !important; }

/* 10d. DESKTOP-SHELL FEINSCHLIFF (Sidebar seit v2 wirklich sichtbar —
   keeva-ui @layer overrides versteckte sie mit layered !important). */
@media (min-width: 1024px) {
  /* Topbar-Icons nicht an den äussersten Rand kleben lassen */
  /* Freischwebendes Desktop-Suchfeld kollidierte mit den runden
     Topbar-Buttons (Suche/Bell) — die Buttons öffnen dieselbe globale
     Suche, das Feld ist redundant. */
  body.has-sidebar .nv-desktop-search { display: none !important; }
  /* Sheets/Modals über dem CONTENT-Bereich zentrieren (Sidebar-Offset
     284px expanded / 96px collapsed → halber Offset als Verschiebung).
     margin-left aus §6 ersetzt durch left-Berechnung (kein Doppel-Shift). */
  body.has-sidebar .k-bsheet { margin-left: 0; left: calc(50% + 48px) !important; }
  body.has-sidebar.sidebar-expanded .k-bsheet { margin-left: 0; left: calc(50% + 142px) !important; }
  /* Backdrop deutlicher abdunkeln — Desktop-Modal braucht Fokus-Trennung */
  .k-bsheet-backdrop.active { background: rgba(0, 0, 0, .55) !important; }
}

/* 10e. LIGHT MODE: WEISSE KARTEN STATT ROSA WASCHUNG.
   style.css gab allen Home-Karten im Light-Mode einen Pink-Gradient
   ("sonst unsichtbar auf Creme") — Resultat war Candy-Rosa flächig
   über das GANZE Dashboard. Sichtbarkeit kommt jetzt aus Weiss +
   warmer Border + weichem Schatten (premium statt zuckrig). */
[data-theme="light"] body.k-ui .k-home-progress-card,
[data-theme="light"] body.k-ui .k-home-stat-box,
[data-theme="light"] body.k-ui .k-home-today-card,
[data-theme="light"] body.k-ui .k-home-msg-card,
[data-theme="light"] body.k-ui .k-mini-card,
/* `.k-notif-row` stand hier — und gewann mit `!important` gegen jede
   Farbregel. Seit die Alarm-Zeilen vollflaechig farbig sind (2026-08-02,
   Stefan: „evtl vollflaechig in farbe"), waeren sie damit wieder weisse
   Karten geworden. Ihre Farbe steht in css/style.css bei `.k-notif-row`. */
[data-theme="light"] body.k-ui .k-home-tasks-card,
[data-theme="light"] body.k-ui .k-me-action-card {
  /* ⚠ RAUS (N2, 2026-09-02): das ist die ZWEITE woertlich gleiche
     Fassung dieser Regel — dieselben sieben Klassen, dieselben drei
     Angaben, dieselben drei `!important`, noch einmal in
     css/style.css:7059. Welche von beiden ankam, entschied allein die
     Ladereihenfolge. Beide zusammen waren eine dritte Karten-Form
     neben dem Katalog; die Flaeche kommt jetzt aus der einen Regel in
     css/system.css §DIE KARTE.
     Der leere Selektor bleibt stehen, weil die Kommentare darin
     erklaeren, warum `.k-notif-row` NICHT dazugehoert — die
     Begruendung ist mehr wert als die drei gesparten Zeilen. */
}

/* ───────────────────────────────────────────────────────────────
   11. /NEU-DESIGN-SYSTEM-ANGLEICH (2026-07-17, Stefan-Direktive:
   "color modell von nevanu.ch/neu … erfinde keine neuen farben,
   icons berücksichtigen, schriften") — Quelle:
   website/neu/assets/css/design-system.css v1.0.
   Farb-/Token-Werte: css/design-tokens.css + keeva-ui.css Themes.
   Icons: Material Symbols OUTLINED (index.php + style.css).
   ─────────────────────────────────────────────────────────────── */

/* 11a. EROS-DISPLAY — die /neu-Brand-Serif für grosse Titel
   (Audit-B7-Regel: Eros NIE klein, weight 400, kein negatives
   Letter-Spacing — Serif braucht Luft). */
/* ⚠ EROS-MINDESTGROESSE: 30px. Stefan 2026-08-25: «eros muss grösser sein
   so ist es nicht gut lesbar aktuell.» Die Serife traegt bei 24px nicht —
   duenne Strichstaerken verschwimmen auf dem Telefon. Wer Eros irgendwo
   einsetzt: nie unter 30px, sonst Instrument der Haus-Sans. */
.k-bsheet-title {
  font-family: var(--nv-font-display, 'Eros', Georgia, serif) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  font-size: 30px !important;
  line-height: 1.15 !important;
}

/* 11c. KALENDER-GRIDLINES — Stundenraster war unsichtbar (var(--border)
   = 10%-Weiss × opacity .5 = 5%). Eigene Tokens, damit das Raster in
   beiden Themes klar lesbar ist (UX-Sweep 2026-07-17, Stefan:
   "kalender muss funktionieren"). */

/* 11d. TERMIN-ERSTELLEN — Desktop-UX: Wizard-Inhalt zentriert in
   Lesebreite statt 1440px-Volltextzeilen; Bottom-Bar-Buttons ebenso.
   (UX-Sweep 2026-07-17, Stefan: "unterseiten wie termin hinzufügen
   stimmt ux nicht"). Mobile bleibt full-width. */
@media (min-width: 1024px) {
  #termin-erstellen-overlay > div:not([style*="position:fixed"]) {
    max-width: 760px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #termin-erstellen-overlay > div[style*="position:fixed"] > button {
    max-width: 372px;
  }
  #termin-erstellen-overlay > div[style*="position:fixed"] {
    justify-content: center;
  }
}

/* 11e. KALENDER — ALLES FIX, KEIN H-SCROLL (Stefan 2026-08-22: «es lässt
   sich immer noch rumziehen … es soll alles fix sein ausser zoom»).
   Die fruehere 128px-Mindestbreite machte den Kalender breiter als den
   Schirm — genau daher kam das «wackelige» Rumziehen. Jetzt teilen sich
   ALLE Spalten immer die volle Breite (Namen ellipsieren). */
@media (max-width: 1023px) {
  #kal-grid { min-width: 0; }
  #kal-grid .kal-team-col { min-width: 0 !important; }
  .kal-col-header .kal-col-person { min-width: 0 !important; }
  #kal-hscroll { overflow-x: hidden !important; }
  /* Die Datumszeile steht seit 2026-08-02 vollstaendig in
     css/kalender-kopf.css. Hier stand zuletzt ein `transform: scale(.9)`, der
     Hoehe sparen sollte und dabei die TIPPFLAECHEN mitverkleinerte: die Pfeile
     massen im Aufbau 44 px und auf dem Bildschirm 40. Eine Verkleinerung per
     transform ist bei Bedienelementen die falsche Sparmassnahme — sie macht
     jede Messung unwahr. */
  /* Scroll-Affordance: sanfter rechter Fade zeigt "da kommt mehr" */
  #kal-hscroll { scrollbar-width: none; }
}
/* Kein horizontales Rumziehen UND kein Gummiband nach unten
   (inline-Style braucht !important) */
#kal-hscroll { overflow-x: hidden !important; overscroll-behavior-x: none !important; overscroll-behavior-y: contain !important; }

/* 11e-2. VOLLE BREITE auf JEDER Groesse (Stefan 2026-08-22: «rechts komplett
   leerer raum anstatt kalender auf volle breite»). Der Kalender-Behaelter und
   das Raster fuellen immer die verfuegbare Breite; die Spalten teilen sie sich
   (flex:1, kein max-width). Ohne das blieb auf breiten Schirmen rechts Platz
   frei und die Jetzt-Linie lief ins Leere. */
/* WICHTIG: die Kopfzeile NICHT auf width:100% zwingen — sie hat margin-left:34px
   (Zeit-Spalten-Breite). 100% + 34px Margin liefe rechts 34px ueber und schnitt
   die Reserve-Spalte ab (Stefan 2026-08-22: «kalender rechts abgeschnitten»).
   Ohne feste Breite fuellt der Block die Restbreite exakt (auto = 100% - Margin). */
/* VOLLE BREITE auf grossen Schirmen (Stefan 2026-08-22: «kalender nach rechts
   nicht full screen»). #dash-content ist ab 1024px auf max-width:1180px +
   28px Polster gedeckelt (desktop-layout.css) — richtig fuer Lese-Module wie
   Kunden, falsch fuer den Kalender, der die ganze Breite braucht. Nur wenn der
   Kalender aktiv ist (body.kal-fest) faellt der Deckel weg. */
@media (min-width: 1024px) {
  body.kal-fest #dash-content {
    max-width: none !important;
    margin-left: 0 !important; margin-right: 0 !important;
    padding-left: 0 !important; padding-right: 0 !important;
    /* GLEICHE Kopf-Hoehe wie alle anderen Module (Stefan 2026-08-22: «bei
       kalender alles zu weit oben, kunden richtige hoehe»). style.css setzt
       fuer kal-fest padding-top:0 (richtig am Telefon: dort zaehlt jeder
       Pixel Kalender) — am Bildschirm bekommt der Kalender denselben oberen
       Abstand wie Kunden & Co. (Basis-padding 24px). UI-Standard §3. */
    padding-top: 24px !important;
  }
  /* Datum-Leiste unten: neben der SCHWEBENDEN Seitenleiste wirkte die harte
     eckige Kante «seltsam abgeschnitten» (Stefan 2026-08-22). Runde obere
     Ecken lassen sie als eigenes Element enden statt als abgeschnittenen
     Streifen. Nur am Bildschirm — am Telefon laeuft sie randlos durch. */
  #kal-tagbar { border-top-left-radius: 14px; border-top-right-radius: 14px; }
}
#kal-hscroll, #kal-grid { width: 100% !important; box-sizing: border-box; }
.kal-col-header { box-sizing: border-box; }
#kal-grid .kal-team-col:not([data-col-team-id="reserve"]) { flex: 1 1 0 !important; min-width: 0 !important; max-width: none !important; }
.kal-col-header .kal-col-person:not([data-col-id="reserve"]) { flex: 1 1 0 !important; min-width: 0 !important; max-width: none !important; }

/* 11f. KUNDENPROFIL — Alt-UI modernisiert (UX-Sweep 2026-07-17,
   Stefan: "kundenprofil noch altes UX UI schmal, schrift chips
   mangelhaft"). Desktop nutzt die Breite; Tabs = moderne Segmente.
   UI-Standard 2026-08-22: Breite = --nv-page-max (1180) wie der REST der App
   statt eigener 1040 — Stefan «links und rechts zu viel leerraum … deckt sich
   nicht mit dem restlichen». Siehe docs/UI-STANDARD.md §1. */
@media (min-width: 1024px) {
  .kp-container { max-width: var(--nv-page-max, 1180px) !important; margin-left: auto; margin-right: auto; }
  /* Echtes Desktop-Layout statt "aufgeblasen": Karten fliessen in
     2 Spalten (CSS columns — kein Markup-Umbau, Mobile bleibt 1-spaltig). */
  .kp-content { columns: 2; column-gap: var(--nv-s4); }
  .kp-content > * { break-inside: avoid; margin-bottom: var(--nv-s3); }
  

  /* Elegante KARTE statt hart abgeschnittenem Vollbild (Stefan 2026-08-22:
     «kundenfoto oben abgeschnitten … eleganter wenn die seiten oben abgerundet
     wären und nicht einfach abgeschnitten. unten auch»). Kleiner Abstand zu
     den Rändern + runde Ecken; das Foto (erstes Kind) clippt an der Rundung.
     App-Gefühl (iPad): schwebende Karte statt randlose Fläche. */
  body.has-sidebar #kunden-profil-overlay {
    top: 12px; bottom: 12px; right: 12px;
    border-radius: var(--nv-r-lg, 24px);
    overflow-x: hidden; overflow-y: auto;
  }
  /* ⚠ Die Regel, die hier stand, ist mit dem Hero entfallen (2026-08-30,
     Katalog §30). Sie rundete die oberen Ecken des randlosen Bildes, weil
     das Bild `position:absolute` war und dem Clip des Overlays entkam
     (Stefan 2026-08-22: «doch foto noch abgeschnitten»). Der Profilkopf
     hat kein randloses Bild mehr — das runde Bild ist 120 px und rundet
     sich selbst. Der Fall kann so nicht wiederkehren. */
  /* Kopf-Buttons (Zurück / Kamera / Bearbeiten) folgen der Rundung nach innen,
     damit sie nicht in der abgeschnittenen Ecke kleben. */
  body.has-sidebar #kunden-profil-overlay .kp-hero-actions { top: calc(var(--k-sp-md) + 4px); }
}
/* ⚠ ENTFERNT 2026-08-30 (Stefan-Freigabe A2): der Reiter stand hier
   mit 13 x !important und war damit die einzige Fassung, die ankam.
   Er steht jetzt im Katalog (css/system.css §34) — ungelayert, ohne
   !important, Werte unveraendert. system.css laedt spaeter als diese
   Datei, gleiche Spezifitaet, also gewinnt der Katalog ohne Zwang.
   Die Begruendungen zu Groesse, Polsterung und Kontrast sind mit
   umgezogen und stehen dort. */


/* Rezeptur-Tab: hardcodiertes Violett #5856D6 → Brand (kein Violett im
   /neu-System). Betrifft section-card-Akzente in _renderKundenRezepturTab. */

/* ⚠ Auch diese Regel ist mit dem Hero entfallen (2026-08-30, §30). Sie
   deckelte den 55-vh-Hero am Desktop auf 340-420 px — sie war der
   Beleg dafuer, dass der Hero zu hoch war, nicht seine Heilung. Der
   Profilkopf misst jetzt ueberall dasselbe. */

/* 11g. BERATUNGSFORMULAR-MODUS — keeva-ui versteckt .app-header global
   (Hide-Liste), damit war im Alt-Formular (#app) der Kopf inkl.
   "← Dashboard"-Button unsichtbar → Protokoll aus Kalender wirkte tot.
   switchToForm() setzt body.nv-form-mode, goBackToDashboard entfernt ihn. */
body.k-ui.nv-form-mode #app .app-header {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  background: var(--k-bg2);
  border-bottom: 1px solid var(--k-border);
  padding: var(--nv-s3) var(--nv-s4);
}

/* 10f→11b. SIDEBAR: /neu-Neutral (Light weiss/rosé-Border via Tokens,
   Dark Near-Black — kein kalt-violett, kein warm-braun mehr). */
[data-theme="dark"] .nv-sidebar {
  background: rgba(15, 15, 15, .97) !important;
  border-color: var(--k-glass-border) !important;
}

/* ───────────────────────────────────────────────────────────────
   12. ROSÉ ATELIER — Verlaeufe und Tiefe im hellen Theme
   (Stefan-Entscheid 2026-08-25: Richtung 1, «aber arbeite mit
   gradients und blurs»). NUR [data-theme="light"] — das dunkle
   Theme bleibt unangetastet, bis der Pilot abgenommen ist.

   Grundsatz: EIN leuchtendes Element pro Bildschirm. Der Verlauf
   gehoert auf das, was gerade zaehlt (Primaer-Knopf, aktives
   Segment) — nicht auf jede Flaeche. Genau das macht die
   Referenz-Screens ruhig: alles zart, eines satt.
   ─────────────────────────────────────────────────────────────── */

/* 12a. Primaer-Knoepfe: jetzt im Katalog (§11b). Die Theme-Praefixe waren
   hier nur da, um Spezifitaet zu gewinnen — genau der Trick, der spaeter
   `--sm` und `--icon` geschlagen hat. */
[data-theme="light"] .k-btn-primary,
[data-theme="light"] .btn-primary {
  background: var(--nv-gradient, linear-gradient(135deg, #d94f60, #F27182)) !important;
  border: none !important;
  color:var(--k-text-auf-marke) !important;
  box-shadow: 0 6px 18px rgba(217, 79, 96, .28);
}

/* 12b. Aktive Segmente: dunkle Pille als ruhiger Anker (Referenz-Muster
   «schwarze Pillen geben Halt») — kein Verlauf, absichtlich.
   ⚠ `.nv-segment-opt.is-aktiv` STAND HIER UND IST RAUS (2026-08-29, A2
   Teil 1). Der Baustein steht im Katalog (system.css §23) und stellt
   denselben Wert ueber seine Schrauben: `--seg-aktiv-bg` liest
   `--nv-pill`, im hellen Thema #28242B, `--seg-aktiv-farbe` liest
   `--nv-pill-ink`, im hellen Thema #FFFFFF. Zwei Ausfuehrungen mit
   demselben Ergebnis, gemessen von tools/bauteil-probe.cjs in beiden
   Themen. `.k-seg-btn` ist ein anderes Bauteil und bleibt stehen, bis
   es an die Reihe kommt — gleiche Trennung wie in system.css:808. */

/* 12c. ⚠ TEILWEISE RAUS 2026-08-29 (P3). `.k-module-header` ist hier
   gestrichen: diese Regel und `system.css:1675` widersprachen sich
   direkt (Glas gegen transparent), beide mit `!important` und gleicher
   Spezifitaet — es entschied der Ladeplatz, und system.css gewann. Auf
   dem Bildschirm war der Kopf also seit R13 (2026-08-26) transparent;
   dieser Teil der Regel war tot. Der Wert steht jetzt im Katalog (§22).
   `.k-tabbar` bleibt: dort gibt es keinen Gegenspieler, und das Glas
   ist dort sichtbar. */

/* 12d. Karten atmen: der hauchwarme Kartenverlauf aus den Tokens. */

[data-theme="light"] .nv-group,
[data-theme="light"] .hub-karte {
  background: var(--k-card-gradient, var(--nv-flaeche-erhoben));
}

/* ══ 13. GRAMM-RAST-BAND (Stefan 2026-08-25) ═════════════════════════════
   «so einen regler bei grammatur der rezeptur von 1 gramm bis oben offen» —
   das Band zum nvGrammBand-Bauteil (js/form.js): zieht man daran, rastet es
   je Gramm und tickt spuerbar (Spez §6 Haptik). Nur Tokens — kein Wert hart. */
.nv-gramm-band {
  position: relative;
  height: 64px;
  overflow: hidden;
  touch-action: none;
  border-radius: var(--nv-r-s, var(--k-r-md));
  background: var(--k-fill, rgba(120, 120, 128, .08));
  cursor: ew-resize;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.nv-gband-strip { position: absolute; top: 0; bottom: 0; left: 0; will-change: transform; }
.nv-gband-tick {
  position: absolute; top: 12px;
  width: 1px; height: 14px;
  background: var(--k-border-strong, var(--k-border));
}
.nv-gband-tick.mittel { height: 20px; }
.nv-gband-tick.gross  { height: 26px; background: var(--k-brand); width: 2px; }
.nv-gband-tick b {
  position: absolute; top: 30px; left: 0; transform: translateX(-50%);
  font-size: var(--k-fs-caption); font-weight: 600; font-style: normal;
  color: var(--k-text3);
  font-variant-numeric: tabular-nums;
}
.nv-gband-mitte {
  position: absolute; left: 50%; top: 6px; bottom: 6px;
  width: 2px; z-index: 2;
  background: var(--k-brand);
  border-radius: var(--k-r-full, 999px);
  box-shadow: 0 0 8px rgba(var(--k-brand-rgb), .5);
}

/* ══ 14. PULS-RAHMEN & GEBURTSTAGS-GLANZ (Stefan 2026-08-25) ═════════════
   «termine die unbearbeitet sind … sollen in der eingangsliste der termine
   pulsieren und auch im kalender pulsieren. daher ramen soll pulsieren.» —
   der RAHMEN atmet in der Markenfarbe, der Inhalt bleibt ruhig lesbar.
   Dauer aus den Motion-Tokens (system.css) — kein Wert hart. */
.nv-puls-rahmen {
  animation: nvPulsRahmen var(--m-puls, var(--m-atmen)) ease-in-out infinite;
}
@keyframes nvPulsRahmen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--k-brand-rgb), 0); }
  45%      { box-shadow: 0 0 0 2.5px rgba(var(--k-brand-rgb), .55), 0 0 14px rgba(var(--k-brand-rgb), .25); }
}

/* «kundinnen die geburtstag haben oder kürzlich hatten (1 woche zb) sollen
   wie beim memberclub eine glanz animation haben.» — ein Gold-Schimmer
   laeuft ueber die Karte, wie das Glaenzen der Member-Club-Karte. */
.nv-geb-glanz { position: relative; overflow: hidden; }
.nv-geb-glanz::after {
  content: '';
  position: absolute; top: 0; bottom: 0; left: -60%;
  width: 45%;
  background: linear-gradient(105deg,
    rgba(226, 194, 132, 0) 0%,
    rgba(226, 194, 132, .28) 45%,
    rgba(255, 244, 214, .45) 50%,
    rgba(226, 194, 132, .28) 55%,
    rgba(226, 194, 132, 0) 100%);
  transform: skewX(-18deg);
  pointer-events: none;
  animation: nvGebGlanz var(--m-atmen, var(--m-puls)) ease-in-out infinite;
}
@keyframes nvGebGlanz {
  0%       { left: -60%; opacity: 0; }
  8%       { opacity: 1; }
  38%      { left: 115%; opacity: 1; }
  46%, 100% { left: 115%; opacity: 0; }
}

/* Wer weniger Bewegung will, bekommt sie (Spez §5). */

/* ══ 15. BLATT-KOMPONENTE IM ROSÉ ATELIER (abgenommene Demo 2026-08-25) ══
   Stefans Befund: «karte nachdem menu hamburger getippt wird sieht nicht
   gleich aus wie im demo — buttons, farbe, karte, shadow, icons, groessen».
   Hier steht nur noch die OBERFLAECHE des Blatts (Glas, Rand, Schatten).
   !important, weil bottom-sheet.js seine Styles zur Laufzeit NACH den
   Stylesheets injiziert — sonst gewinnt immer das injizierte Blob.
   Desktop (≥1024) behaelt sein zentriertes Modal aus Sektion 6.

   H1 (Block H, 2026-09-02, Stefan): «nahtlos — das Blatt sitzt buendig
   auf den drei Raendern, untere Ecken 0». Bis dahin stand hier
   `left/right/bottom: 10px` und ein Vollradius als «schwebende
   Glaskarte» — gemessen an 5 Blatt-Instanzen × 5 Breiten: 10/10/10 px
   Rand, 32 px an allen vier Ecken (H1-vorher-lauf1-A). Der Grundriss
   kommt jetzt allein aus js/bottom-sheet.js (0/0/0, Radius oben aus
   `--nv-r-blatt`, Sockel am Rumpf). Das Leisten-Polster am Rumpf ist
   zum Plus-Blatt gewandert (css/system.css §Plus-Blatt) — nur dieses
   Blatt liegt noch unter der Tab-Leiste (R14); alle anderen heben
   ihren Stapel darueber, das Polster war dort 104 px Leere. */
@media (max-width: 1023px) {
  .k-bsheet {
    background: var(--nv-glas, rgba(255, 255, 255, .68)) !important;
    -webkit-backdrop-filter: blur(26px) saturate(170%) !important;
    backdrop-filter: blur(26px) saturate(170%) !important;
    border: 1px solid var(--nv-glas-line, rgba(58, 36, 42, .06)) !important;
    box-shadow: 0 -14px 50px rgba(40, 20, 26, .2) !important;
  }
}
[data-theme="light"] .k-bsheet-backdrop.active,
.k-bsheet-backdrop.active { background: rgba(30, 16, 20, .4) !important; }
.k-bsheet-handle-bar {
  width: 42px !important; height: 5px !important;
  border-radius: var(--k-r-full, 999px) !important;
  background: var(--k-text3) !important; opacity: .35;
}
.k-bsheet-close {
  background: var(--k-fill, rgba(120, 120, 128, .08)) !important;
  color: var(--k-text3) !important;
}

/* ── Chips: organische Form, Tint-Toene (Demo .chip / .c-*) ─────────────
   EIN Bauteil fuer Menue, Plus-Blatt, Meldezeile, Listen. Farbe traegt
   Bedeutung nur im Chip (§2), nie als Flaeche. */
.nv-chip {
  width: 44px; height: 44px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--nv-chip-form, 50%);
  background: var(--nv-tint, rgba(var(--k-brand-rgb), .14));
  color: var(--k-brand);
}
.nv-chip .material-symbols-rounded { font-size: var(--k-fs-titel); font-variation-settings: 'FILL' 1, 'wght' 500; }
.nv-chip.c-rose  { background: var(--c-rose-bg);  color: var(--c-rose); }
.nv-chip.c-blue  { background: var(--c-blue-bg);  color: var(--c-blue); }
.nv-chip.c-amb   { background: var(--c-amb-bg);   color: var(--c-amb); }
.nv-chip.c-teal  { background: var(--c-teal-bg);  color: var(--c-teal); }
.nv-chip.c-pur   { background: var(--c-pur-bg);   color: var(--c-pur); }
.nv-chip.c-slate { background: var(--c-slate-bg); color: var(--c-slate); }
.nv-chip.c-grad  { background: var(--nv-grad); color: var(--k-text-on-brand, rgba(255,255,255,1)); }

/* ── Plus-Blatt: Aktionszeilen wie Demo (.aktion) ───────────────────── */
.ch-aktion {
  display: flex; align-items: center; gap: var(--nv-s4);
  padding: var(--nv-s3) var(--nv-s4); margin-bottom: var(--nv-s2);
  border-radius: var(--nv-r-karte, 24px);
  background: var(--k-surface-solid, var(--k-bg2));
  border: 1px solid var(--k-border);
  box-shadow: var(--nv-sh, var(--k-shadow-sm));
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform var(--m-schnell) var(--m-glatt, ease);
}
.ch-aktion:active { transform: scale(.975); }
.ch-aktion-text { flex: 1; min-width: 0; }
.ch-aktion-text b { display: block; font-size: var(--k-fs-body); font-weight: 700; color: var(--k-text); line-height: 1.25; }
.ch-aktion-text small { display: block; font-size: var(--k-fs-caption); color: var(--k-text3); margin-top: 1px; }
/* Die Haupt-Aktion (Termin) traegt den Verlauf — das EINE leuchtende
   Element des Blatts. */
.ch-aktion.ist-haupt {
  background: var(--nv-grad); background-size: 200% 200%;
  border: none; box-shadow: var(--nv-sh-hot);
  animation: chAtmen var(--m-atmen) ease-in-out infinite alternate;
}
.ch-aktion.ist-haupt .ch-aktion-text b { color: var(--k-text-on-brand, rgba(255,255,255,1)); }
.ch-aktion.ist-haupt .ch-aktion-text small { color: rgba(255, 255, 255, .85); }
.ch-aktion.ist-haupt .nv-chip { background: rgba(255, 255, 255, .24); color: var(--k-text-on-brand, rgba(255,255,255,1)); }

/* H1 (2026-09-02): hier stand der verlaengerte Einfahrweg
   `translateY(calc(100% + 24px))` fuer die 10 px schwebende Karte. Das
   Blatt sitzt jetzt bei 0 — `translateY(100%)` aus js/bottom-sheet.js
   faehrt es vollstaendig hinaus, ein zweiter Weg waere ein zweiter Ort. */

/* Laden (§8): der Spinner traegt Rosé — Skeleton-Karten folgen je Modul. */
.loading-spinner {
  border-color: var(--nv-tint, rgba(242, 113, 130, .2)) !important;
  border-top-color: var(--k-brand) !important;
}

/* Glas auch im HELLEN Blatt — die injizierte Laufzeit-Regel setzt dort
   deckendes Weiss (rgba(255,255,255,.97)); Stefans Befund «glas effekt
   fehlt in light mode bei menu». */
@media (max-width: 1023px) {
  [data-theme="light"] .k-bsheet {
    background: var(--nv-glas, rgba(255, 255, 255, .68)) !important;
    -webkit-backdrop-filter: blur(26px) saturate(170%) !important;
    backdrop-filter: blur(26px) saturate(170%) !important;
    border: 1px solid var(--nv-glas-line, rgba(58, 36, 42, .06)) !important;
    box-shadow: 0 -14px 50px rgba(40, 20, 26, .2) !important;
  }
}