/* ===================================================================
   VORLAGE aus dem Skill edles-dunkel-design — WOERTLICH uebernommen aus
   AccelNexus frontend/css/nachtglas.css (Stand AccelNexus 063be7f, 10.10.2026 — nach R1 Design-Rückgrat; Datei selbst unverändert seit aff6c87). Nichts im Code unten
   ist veraendert; die AccelNexus-spezifischen Namen sind HIER als
   Platzhalter gekennzeichnet und werden beim Uebernehmen ersetzt
   (Checkliste: referenz/umstell-checkliste.md).
   PLATZHALTER:
     · /assets/fonts/Tinos-*.woff2                → Pfad der eigenen App (Dateien: vorlagen/fonts/)
     · html.edel[data-m="call|conbono|crew|deals|inbox|memory|publish"] → <modul-slug> der eigenen App
     · --modul-<slug> in .pwa-body details.kachel / .nd-hk → dieselben Slugs
     · .sidebar .nav-* / [data-nav-gruppe=kern|stamm|verwaltung] → Klassen der eigenen Seitenleiste
     · .kopfzeile .kopf-* .rg-k                   → Kopfzeile der eigenen App (nur Symbole)
     · #dash-kacheln details.dash-kz .kz-*        → Kachel-Behaelter und Kachel-Klassen der eigenen Uebersicht
     · #page-dashboard .onb-* #onb-fertig         → Startseite / Onboarding der eigenen App
     · #page-settings .klapp-status               → Einstellungen-Seite der eigenen App
     · .overlay .modal .modal-head/-body/-foot    → Dialog-Klassen der eigenen App
     · [data-i18n="common.cancel"]                → Merkmal des Abbrechen-Knopfs der eigenen App
     · .login-* .nd-accel .nd-nexus               → Anmeldeseite + Schriftzug <Produkt> (zwei Farbteile)
     · .sperre-overlay .sperre-karte-pc #pc-sperre-ok #pc-sperre-abmelden → Sperrfenster der eigenen App
     · .pwa-body .pwa-head .kachel .nd-hk-*       → Handy-Startseite der eigenen App
     · #3f9fff / #1e6fd9 (Markenblau Nexus)       → Markenfarbe <Produkt> (Fuellung Weiss ≥ 4,5:1 nachrechnen)
     · .glas-auswahl* (Blatt aus js/kern/kern.js glasAuswahl) → bleibt; braucht den Waechter aus bauteile.md §4
     · .dl-* (Datumsleiste 10b) .schnellwahl (10c)  → Klassen der eigenen Datumsleiste / Schnellwahl
   =================================================================== */
/* ND1 (U38) — Design „Edles Dunkel“ (Nachtglas), Pilot.
   Kanonisches Konzept: docs/DESIGN-NACHTGLAS.md (Freigabe Vahid 03.10.2026).

   REGEL DIESER DATEI (seit ND3.1, Hell-Modus „Tag“): Jede Regel hängt an
   `html.edel` — die Klasse setzt js/theme.js IMMER, in beiden Themen. Das
   Design ist hell und dunkel dasselbe; nur die Token-Werte wechseln: Blöcke
   `html.nacht { --… }` (dunkel) und `html:not(.nacht) { --… }` (hell)
   setzen ausschließlich Token (und `color-scheme`). Kein Farbwert steht in
   einer Regel. Bis ND2.3 hing jede Regel an `html.nacht`; die Spezifität
   von `html.edel` ist dieselbe, deshalb bleibt Dunkel Pixel für Pixel
   (Wächter selftest_nd3.py). Die Teile, die nur auf Modulseiten stehen
   (Glas-Auswahlfeld, Schnellwahl, Datei-Feld, Einstellungen), liegen bis
   ND3.2 in css/nachtglas-module.css und hängen dort weiter an html.nacht.
   Farben aus den Token in css/app.css (Spiegel pwa.css) und css/tokens.css,
   Schriftgrößen nur aus css/tokens.css (Wächter D7).

   Inhalt: 1 Schrift · 2 Modulfarbe der Seite · 3 Grund · 4 Seitenleiste ·
   5 Kopfzeile · 6 Übersicht (Glaskacheln, Ring) · 7 Übergänge und Dialoge ·
   8 Anmeldung · 9 Sperrfenster · 10 Handy-Startseite · 11 Ruhe
   (prefers-reduced-motion). */

/* ------------------------------------------------------------ 1 Schrift
   Tinos (Steve Matteson, metrisch gleich mit Times New Roman), SIL Open Font
   License 1.1 — Lizenz: assets/fonts/OFL.txt. Eingebettet, KEIN Abruf bei
   Google zur Laufzeit (CSP font-src 'self'). Geladen wird eine Datei erst,
   wenn eine Regel unten die Familie wirklich benutzt (seit ND3.1 in beiden
   Themen). */
@font-face {
  font-family: "Tinos";
  src: url("/assets/fonts/Tinos-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Tinos";
  src: url("/assets/fonts/Tinos-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Tinos";
  src: url("/assets/fonts/Tinos-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Tinos";
  src: url("/assets/fonts/Tinos-BoldItalic.woff2") format("woff2");
  font-weight: 700; font-style: italic; font-display: swap;
}

/* Lichtstärke des Mausflecks als echte Zahl, damit sie weich ein- und
   ausblendet (eine Hintergrund-Grafik selbst lässt sich nicht überblenden). */
@property --nd-licht {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

/* ------------------------------------------- 2 Modulfarbe der Seite --m
   js/kopfzeile.js setzt html[data-m="<modul>"] beim Seitenwechsel; Kern-
   Seiten behalten das Markenblau aus den Token. */
html.edel[data-m="call"] { --m: var(--modul-call); }
html.edel[data-m="conbono"] { --m: var(--modul-conbono); }
html.edel[data-m="crew"] { --m: var(--modul-crew); }
html.edel[data-m="deals"] { --m: var(--modul-deals); }
html.edel[data-m="inbox"] { --m: var(--modul-inbox); }
html.edel[data-m="memory"] { --m: var(--modul-memory); }
html.edel[data-m="publish"] { --m: var(--modul-publish); }

/* ------------------------------------------- 2b Leucht-Stärken (ND1.1)
   Vahid nach der Vorschau: jeder Schein und Lichtfleck war einen Tick zu
   schwach — alle Leucht-Stärken hier EINMAL, je etwa um ein Drittel
   angehoben (Deckkraft × 4/3, Weite × 4/3, gleiche Farbe). Die Regeln
   unten lesen nur diese Token. Tabelle vorher/nachher:
   docs/DESIGN-NACHTGLAS.md §6. Mindestwerte: selftest_nd1.py E1.
   Lesbarkeit: unter dem stärkeren Lichtfleck reichen --glas-leise und
   --rot-nacht an der hellsten Stelle nicht mehr für 4,5:1 — Texte in der
   Kachel unter der Maus nehmen dann --glas-leise-licht bzw. --rot-licht
   (gerechnet in selftest_nd1.py E3). */
html.nacht {
  --leucht-fleck: 32%;                /* Lichtfleck der Kachel (24 %) */
  --leucht-kachel-rand: 80%;          /* Rand der Kachel unter der Maus (60 %) */
  --leucht-kachel-saum: 33%;          /* Leuchtrand 1 px außen (25 %) */
  --leucht-kachel-schein: 29%;        /* Schein unter der Kachel (22 %) */
  --leucht-kachel-weite: 45px;        /* … dessen Weite (34 px) */
  --leucht-ring: 93%;                 /* Klick-Lichtring (70 %) */
  --leucht-bernstein: 29%;            /* Schein des Sperrfensters (22 %) */
  --leucht-bernstein-weite: 80px;     /* … Weite (60 px) */
  --leucht-entsperren: 40%;           /* Schein „Entsperren“ (30 %) */
  --leucht-entsperren-weite: 27px;    /* … Weite (20 px) */
  --leucht-fokus: 29%;                /* Fokus-Schein der Felder (22 %) */
  --leucht-kopf: 47%;                 /* aktives Kopfzeilen-Symbol (35 %) */
  --leucht-kopf-weite: 16px;          /* … Weite (12 px) */
  --leucht-haupt: 37%;                /* Hauptaktion in Ruhe (28 %) */
  --leucht-haupt-weite: 24px;         /* … Weite (18 px) */
  --leucht-haupt-hover: 53%;          /* Hauptaktion beim Darüberfahren (40 %) */
  --leucht-haupt-hover-weite: 32px;   /* … Weite (24 px) */
  --leucht-glas: 47%;                 /* Glas-Knopf beim Darüberfahren (35 %) */
  --leucht-glas-weite: 19px;          /* … Weite (14 px) */
  --leucht-gruppe: 21%;               /* Gruppen-Leuchten, Darüberfahren (16 %) */
  --leucht-gruppe-aktiv: 29%;         /* Gruppen-Leuchten, aktive Zeile (22 %) */
  --leucht-gruppe-weite: 19px;        /* … Weite (14 px) */
  --glas-leise-licht: #d6dbe4;        /* leiser Text unter dem Lichtfleck (ND2.1.2: über --glas-leise) */
  --rot-licht: #ff9999;               /* roter Text unter dem Lichtfleck */
  /* ND2.1 (Baustein 0 c, Baustein 1): Glasfenster der Dialoge, Felder und
     die Hauptaktion außerhalb einer Modulseite — als Token, damit Büro und
     Handy (css/nachtglas-handy.css trägt denselben Satz) gleich aussehen.
     Kontraste gerechnet in selftest_nd21.py K. */
  --glas-fenster: rgba(16, 18, 25, 0.92);   /* Dialogfenster über der Abdunklung */
  --glas-fenster-schatten: rgba(0, 0, 0, 0.55);
  --feld-grund: rgba(255, 255, 255, 0.04);  /* Eingabefeld auf Glas */
  --haupt-blau: #1e6fd9;                    /* Hauptaktion ohne Modul (Weiß 4,85:1) */
  --haupt-blau-licht: #3f9fff;              /* … ihr Schein */
  --linie-haar: rgba(255, 255, 255, 0.07);  /* 0,5-px-Linie zwischen Zeilen */
  /* ND2.2a: die Status-Schriftfarben der Modulseiten (Vorlage inbox.css a)
     und die Schrift auf gefüllter Modulfarbe als Token — keine Modul-Datei
     trägt einen Hex-Wert (Skill edles-dunkel-design, token.md). */
  --status-blau: #6cb2ff;
  --status-gruen: #34d399;
  --status-orange: #f0b45e;
  --schrift-voll: #ffffff;
}
/* ND3.1 (Hell-Modus „Tag“): dieselben Token im hellen Thema — Leuchten
   und Lichtflecke deutlich schwächer als dunkel (etwa ein Drittel bis die
   Hälfte: auf hellem Grund wirkt Farbe stärker, und ein Schein ist dort
   kein Licht, sondern ein Fleck); Schrift-Token dunkel, gerechnet in
   selftest_nd3.py K1 (≥ 4,5:1). Unter dem Lichtfleck wird der Grund im
   Hellen DUNKLER, die „Licht“-Varianten der leisen und roten Schrift sind
   deshalb eine Spur dunkler statt heller. */
html:not(.nacht) {
  --leucht-fleck: 12%;
  --leucht-kachel-rand: 55%;
  --leucht-kachel-saum: 18%;
  --leucht-kachel-schein: 14%;
  --leucht-kachel-weite: 30px;
  --leucht-ring: 55%;
  --leucht-bernstein: 14%;
  --leucht-bernstein-weite: 50px;
  --leucht-entsperren: 22%;
  --leucht-entsperren-weite: 18px;
  --leucht-fokus: 20%;
  --leucht-kopf: 22%;
  --leucht-kopf-weite: 10px;
  --leucht-haupt: 22%;
  --leucht-haupt-weite: 16px;
  --leucht-haupt-hover: 32%;
  --leucht-haupt-hover-weite: 22px;
  --leucht-glas: 22%;
  --leucht-glas-weite: 12px;
  --leucht-gruppe: 10%;
  --leucht-gruppe-aktiv: 14%;
  --leucht-gruppe-weite: 12px;
  --glas-leise-licht: #3c4760;
  --rot-licht: #9c1424;
  --glas-fenster: rgba(250, 252, 255, 0.94);
  --glas-fenster-schatten: rgba(15, 30, 60, 0.18);
  --feld-grund: rgba(255, 255, 255, 0.7);
  --haupt-blau: #1e6fd9;
  --haupt-blau-licht: #3f9fff;
  --linie-haar: rgba(15, 35, 70, 0.1);
  --status-blau: #0e5ba1;
  --status-gruen: #006836;
  --status-orange: #834d00;
  --schrift-voll: #ffffff;
}

/* ---------------------------------------------------------------- 3 Grund
   Pur + zwei Ebenen: Leiste tiefschwarz, Inhalt eine Stufe heller, ein Hauch
   Licht von oben. Kein Muster, keine Wolken, keine Sterne, keine Linien. */
html.edel body {
  font-family: "Tinos", "Times New Roman", serif;
  color: var(--glas-text);
  background-color: var(--grund-inhalt);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 0%, var(--licht-oben), transparent 70%),
    linear-gradient(180deg, var(--grund-inhalt), var(--grund-inhalt-2));
  background-attachment: fixed;
}
html.edel button,
html.edel input,
html.edel select,
html.edel textarea { font-family: inherit; }

/* ND2.1.1 Punkt 9 (Fehler aus Vahids Sichtprüfung): aufgeklappte
   Auswahlfelder waren im Dunkeln weiß mit weißer Schrift — der Browser malt
   die Liste nach seinem eigenen Farbschema. `color-scheme: dark` sagt ihm,
   dass die Seite dunkel ist; die Einträge bekommen dazu feste Farben:
   schwarzes Glas, Schrift weiß, der gewählte Eintrag Bernstein-Tönung statt
   Windows-Blau. Gilt für JEDES select der App (Büro und Handy-Seiten). */
html.nacht { color-scheme: dark; }
html:not(.nacht) { color-scheme: light; }
html.edel select option,
html.edel select optgroup {
  background-color: var(--grund-inhalt-2);
  color: var(--glas-text);
}
html.edel select option:checked {
  background-color: color-mix(in srgb, var(--bernstein) 30%, var(--grund-inhalt-2));
  color: var(--text-stark);
}
html.edel select option:disabled { color: var(--glas-leise); }

/* ---------------------------------------------------------- 4 Seitenleiste */
html.edel .sidebar {
  background: var(--grund-leiste);
  border-right: 1px solid var(--linie-leiste);
}
html.edel .sidebar .logo { font-weight: 700; letter-spacing: 0.01em; }
/* ND1.1 (Vahid nach der Vorschau): Schrift je eine Stufe höher in der
   Treppe aus tokens.css — Gruppentitel --fs-small → --fs-leiste, Einträge
   --fs-leiste → --fs-body. Die Fußzeile („Angemeldet als …“, „Abmelden“)
   bleibt, wie sie ist. */
html.edel .nav-gruppe {
  color: var(--glas-leise);
  border-top-color: var(--linie-leiste);
  font-size: var(--fs-leiste);
}
html.edel .nav-item {
  font-size: var(--fs-body);
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--glas-text);
  position: relative;
  transition: background-color 0.2s ease, color 0.2s ease;
}
html.edel .nav-item svg { width: 16px; height: 16px; color: var(--glas-leise); }
html.edel .nav-item[data-modul] svg { color: var(--kz-farbe, var(--glas-leise)); }
/* ND1.1 (Vahid nach der Vorschau): eine Farbe je Gruppe statt immer Blau.
   Kern Blau, Stammdaten Türkis, Verwaltung Bernstein — Titel und Pfeil in
   der Gruppenfarbe; Module: Titel neutral, jede Zeile in ihrer Modulfarbe
   (--kz-farbe = --modul-<slug>, die --m-Werte aus DESIGN-NACHTGLAS §1).
   Kontrast gerechnet in selftest_nd1.py D1 (Titel auf --grund-leiste,
   Text auf der Tönung). */
html.nacht {
  --nav-kern: #3f9fff;
  --nav-stamm: #2dd4bf;
  --nav-verwaltung: #ffb84d;
}
/* ND3.1: die Gruppenfarben im Hellen — derselbe Farbton, abgedunkelt auf
   ≥ 4,5:1 als Schrift auf der Leiste und auf ihrer Tönung 14 %. */
html:not(.nacht) {
  --nav-kern: #0057b1;
  --nav-stamm: #006656;
  --nav-verwaltung: #894900;
}
html.edel [data-nav-gruppe="kern"] { --ng: var(--nav-kern); }
html.edel [data-nav-gruppe="stamm"] { --ng: var(--nav-stamm); }
html.edel [data-nav-gruppe="verwaltung"] { --ng: var(--nav-verwaltung); }
html.edel .nav-item[data-modul] { --ng: var(--kz-farbe, var(--m)); }
html.edel button.nav-gruppe { color: var(--ng, var(--glas-leise)); }
html.edel button.nav-gruppe:enabled:hover { border-color: var(--linie-leiste); }
/* ND2.1 Baustein 0 (a): Punkt im zugeklappten Gruppenkopf mit aktiver Seite
   in der Gruppenfarbe; Module haben keine Gruppenfarbe → Farbe des aktiven
   Moduls (--m, von kopfzeile.js über html[data-m] gesetzt), leiser Schein. */
html.edel button.nav-gruppe[data-aktiv-zu="true"] .nav-gruppe-punkt {
  background: var(--ng, var(--m));
  box-shadow: 0 0 6px color-mix(in srgb, var(--ng, var(--m)) 60%, transparent);
}
/* ND1.2 Punkt 12: Fokusrahmen der Gruppen-Köpfe nur bei Tastatur und in
   der runden Form einer Zeile (8 px wie .nav-item) — gezeichnet als Ring
   auf einem Pseudo-Element unter der Trennlinie, nicht als eckiger Umriss
   um den ganzen Titel. Nach Maus/Finger (html.zeiger, js/effekte.js) gar
   keiner. */
html.edel button.nav-gruppe { position: relative; }
html.edel button.nav-gruppe:focus-visible { outline: none; }
html.edel button.nav-gruppe:focus-visible::after {
  content: "";
  position: absolute;
  inset: 5px 0 -3px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px var(--ng, var(--m));
  pointer-events: none;
}
html.edel .nav-scroll > button.nav-gruppe:first-child:focus-visible::after { top: -5px; }
html.edel.zeiger button.nav-gruppe:focus-visible::after { content: none; }
/* … und genauso die Knöpfe in Dialogen („Abbrechen“ in „Änderungen nicht
   gespeichert“ usw.): Ring in der Rundung des Knopfs, nur bei Tastatur. */
html.edel .overlay .modal button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--grund-inhalt-2), 0 0 0 4px var(--m);
}
html.edel.zeiger .overlay .modal button:focus-visible { box-shadow: none; }
/* ND1.2 Punkt 12: gescrollt laufen die Einträge weich unter den festen
   Logo-Bereich (14 px Maske, js/nav_gruppen.js setzt die Klasse) — keine
   dünne Leuchtlinie der halb verdeckten aktiven Zeile mehr. */
html.edel .sidebar.leiste-gescrollt .nav-scroll {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 14px);
}
/* Darüberfahren und aktive Zeile: Tönung 14 % + leiser Schein in der
   Gruppenfarbe (innen, damit die Scroll-Fläche der Leiste ihn nicht
   abschneidet). Aktiv zusätzlich die 2-px-Kante links und weiße Schrift. */
html.edel .nav-item:hover {
  background: color-mix(in srgb, var(--ng, var(--m)) 14%, transparent);
  color: var(--glas-text);
  box-shadow: inset 0 0 var(--leucht-gruppe-weite) color-mix(in srgb, var(--ng, var(--m)) var(--leucht-gruppe), transparent);
}
html.edel .nav-item.active {
  background: color-mix(in srgb, var(--ng, var(--m)) 14%, transparent);
  color: var(--text-stark);
  box-shadow: inset 2px 0 0 var(--ng, var(--m)),
              inset 0 0 var(--leucht-gruppe-weite) color-mix(in srgb, var(--ng, var(--m)) var(--leucht-gruppe-aktiv), transparent);
}
html.edel .nav-item.active svg { color: var(--ng, var(--m)); }
html.edel .nav-item:focus-visible { outline: 2px solid var(--ng, var(--m)); outline-offset: -2px; }
/* Zurück/Vor/Verlauf stehen im Dunkeln in der Kopfzeile. */
html.edel .sidebar .nav-verlauf { display: none; }
/* ND1.2 Punkt 7: „Angemeldet als …“, Rolle und „Abmelden“ stehen im Dunkeln
   im Blatt des Initialen-Kreises der Kopfzeile — der Fuß der Leiste fällt
   weg. Der Knopf #session-logout bleibt im Dokument: das Blatt ruft genau
   ihn auf (js/kopfzeile.js). */
html.edel .sidebar .nav-fuss { display: none; }
html.edel .nav-schalter {
  background: var(--grund-leiste);
  color: var(--glas-text);
  border: 1px solid var(--glas-rand);
  border-radius: var(--r-knopf);
}

/* ------------------------------------------------------------ 5 Kopfzeile
   52 px, nur Symbole: 15-px-Symbol in 30-px-Kreis, alle gleich groß
   (ND1.1, Vahid: vorher 46/13/26 — einen Tick zu klein; Abstände anteilig
   4 → 5 px, Trenner 6 → 7 px).
   Inaktiv grau, aktiv mit Schein + Tönung 16 % + Rand in der Modulfarbe,
   nicht verfügbar 30 %. Darunter 1 px, der von der Modulfarbe ausläuft. */
html.edel body:has(> .sidebar) > main { padding-top: 0; }
html.edel .kopfzeile {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  min-height: 52px;
  margin: 0 0 22px;
  padding: 0 2px;
  background: var(--kopf-grund);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
html.edel .kopfzeile::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--m), transparent 75%);
  opacity: 0.8;
  pointer-events: none;
}
html.edel .kopf-gruppe { display: flex; align-items: center; gap: 5px; min-width: 0; }
html.edel .kopf-rechts { margin-left: auto; }
/* ND2.1.2 (N15): bricht die Kopfzeile im schmalen Fenster in zwei Zeilen
   um, stehen BEIDE linksbündig (Zeile 1 Seite/Verlauf/Tag, Zeile 2 Suche ·
   Thema · Erinnerungen · Sprache · Sperren · Initialen) mit denselben
   Abständen; bei voller Breite bleibt die rechte Gruppe rechts. Den Umbruch
   misst js/kopfzeile.js (Klasse kopf-zweizeilig). */
html.edel .kopfzeile.kopf-zweizeilig .kopf-rechts { margin-left: 0; }
/* ND2.1 Baustein 0 (b): Seite zurück/vor links neben Rückgängig/Wiederholen,
   eine halbe Lücke mehr, damit die zwei Paare lesbar getrennt stehen. */
html.edel .kopf-seiten { margin-right: 5px; }
html.edel .kopf-trenner {
  width: 1px; height: 18px; margin: 0 7px;
  background: var(--kopf-trenner);
}
html.edel .kopf-knopf,
html.edel .kopfzeile .rg-k,
html.edel .kopf-ich {
  position: relative;
  flex: 0 0 30px;
  width: 30px; height: 30px; min-height: 30px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--glas-leise);
  box-shadow: none;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Trefferfläche größer als der sichtbare Kreis. */
html.edel .kopf-knopf::before,
html.edel .kopfzeile .rg-k::before {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
}
html.edel .kopf-knopf svg,
html.edel .kopfzeile .rg-k svg { width: 15px; height: 15px; }
html.edel .kopf-knopf [data-icon] { display: inline-flex; }
html.edel .kopfzeile .rg-k .rg-k-text { display: none; }
html.edel .kopfzeile .rg-knoepfe { gap: 5px; }
html.edel .kopfzeile .rg-k[aria-disabled="true"] { border-style: solid; border-color: transparent; }
html.edel .kopf-knopf:hover:not([aria-disabled="true"]),
html.edel .kopfzeile .rg-k:hover:not([aria-disabled="true"]),
html.edel .kopf-knopf.kopf-aktiv,
html.edel .kopf-knopf[aria-expanded="true"],
html.edel .kopfzeile .rg-k[aria-expanded="true"] {
  color: var(--m);
  background: color-mix(in srgb, var(--m) 16%, transparent);
  border-color: color-mix(in srgb, var(--m) 55%, transparent);
  box-shadow: 0 0 var(--leucht-kopf-weite) color-mix(in srgb, var(--m) var(--leucht-kopf), transparent);
}
html.edel .kopf-knopf[aria-disabled="true"],
html.edel .kopfzeile .rg-k[aria-disabled="true"] { opacity: 0.3; cursor: default; }
html.edel .kopf-knopf:focus-visible,
html.edel .kopfzeile .rg-k:focus-visible,
html.edel .kopf-ich:focus-visible { outline: 2px solid var(--m); outline-offset: 2px; }
html.edel .kopf-tag-zahl {
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
html.edel .kopf-tag.kopf-aktiv { color: var(--m); }
html.edel .kopf-punkt {
  position: absolute; top: 2px; right: 2px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--rot-nacht);
  box-shadow: 0 0 6px var(--rot-nacht);
}
html.edel .kopf-ich {
  margin-left: 5px;
  color: var(--glas-text);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.02em;
  background: color-mix(in srgb, var(--m) 22%, transparent);
  border-color: color-mix(in srgb, var(--m) 55%, transparent);
  cursor: pointer;
}
html.edel .kopf-ich:hover,
html.edel .kopf-ich[aria-expanded="true"] {
  color: var(--text-stark);
  background: color-mix(in srgb, var(--m) 30%, transparent);
  border-color: var(--m);
  box-shadow: 0 0 var(--leucht-kopf-weite) color-mix(in srgb, var(--m) var(--leucht-kopf), transparent);
}
/* ND1.2 Punkt 7: das Blatt unter dem Initialen-Kreis — Glas wie die Listen
   der Kopfzeile: oben Name (weiß) und Rolle (leise), eine feine Linie,
   darunter „Abmelden“ mit Symbol. */
html.edel .kopf-ich-huelle { position: relative; display: flex; align-items: center; }
html.edel .kopf-ich-blatt {
  position: absolute; top: 40px; right: 0; z-index: 35;
  min-width: 220px; max-width: 300px;
  padding: 6px;
  background: color-mix(in srgb, var(--grund-inhalt-2) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glas-rand);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 var(--glas-kante), 0 16px 40px var(--schatten-tief);
  font-size: var(--fs-body);
  animation: nd-blatt-auf 0.16s ease-out;
}
html.edel .kopf-ich-blatt[hidden] { display: none; }
@keyframes nd-blatt-auf { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
html.edel .kopf-ich-wer { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 9px; min-width: 0; }
html.edel .kopf-ich-name {
  color: var(--glas-text); font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html.edel .kopf-ich-rolle { color: var(--glas-leise); font-size: var(--fs-small); }
html.edel .kopf-ich-linie { height: 1px; margin: 0 4px 4px; background: var(--glas-rand); }
html.edel .kopf-ich-blatt .kopf-ich-eintrag {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 0;
  margin: 0; padding: 8px 10px;
  border: 0; border-radius: 8px;
  background: transparent; color: var(--glas-text);
  box-shadow: none;
  font-size: var(--fs-body); font-weight: 400; text-align: left;
  cursor: pointer;
}
html.edel .kopf-ich-blatt .kopf-ich-eintrag svg { flex: 0 0 auto; color: var(--glas-leise); }
html.edel .kopf-ich-blatt .kopf-ich-eintrag:hover,
html.edel .kopf-ich-blatt .kopf-ich-eintrag:focus-visible {
  background: color-mix(in srgb, var(--m) 18%, transparent);
  color: var(--text-stark);
  outline: none;
}
html.edel .kopf-ich-blatt .kopf-ich-eintrag:focus-visible { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--m) 70%, transparent); }
html.edel .kopf-ich-blatt .kopf-ich-eintrag:hover svg,
html.edel .kopf-ich-blatt .kopf-ich-eintrag:focus-visible svg { color: var(--m); }
/* Suche: die Lupe klappt zum Feld auf. */
html.edel .kopf-suche,
html.edel .kopf-sprache { position: relative; display: flex; align-items: center; gap: 5px; }
html.edel .kopf-suche-feld {
  width: 220px; height: 30px; margin: 0;
  padding: 0 12px;
  border-radius: 15px;
  border: 1px solid color-mix(in srgb, var(--m) 55%, transparent);
  background: var(--feld-grund);
  color: var(--glas-text);
  font-size: var(--fs-body);
  outline: none;
  animation: nd-feld-auf 0.2s ease-out;
}
html.edel .kopf-suche-feld::placeholder { color: var(--glas-leise); }
@keyframes nd-feld-auf { from { width: 30px; opacity: 0; } to { width: 220px; opacity: 1; } }
html.edel .kopf-liste {
  position: absolute; top: 38px; right: 0; z-index: 35;
  min-width: 220px; max-height: 320px; overflow-y: auto;
  margin: 0; padding: 6px; list-style: none;
  background: var(--grund-inhalt-2);
  border: 1px solid var(--glas-rand);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 var(--glas-kante), 0 16px 40px var(--schatten-tief);
  font-size: var(--fs-body);
}
html.edel .kopf-liste li[role="option"],
html.edel .kopf-liste li > button {
  display: block; width: 100%;
  padding: 8px 10px; margin: 0;
  border: 0; border-radius: 6px;
  background: transparent; color: var(--glas-text);
  font-size: var(--fs-body); font-weight: 400; text-align: left;
  cursor: pointer; min-height: 0;
}
html.edel .kopf-liste li[aria-selected="true"],
html.edel .kopf-liste li[role="option"]:hover,
html.edel .kopf-liste li > button:hover,
html.edel .kopf-liste li > button:focus-visible {
  background: color-mix(in srgb, var(--m) 18%, transparent);
  outline: none;
}
html.edel .kopf-liste li > button[aria-checked="true"] { color: var(--m); font-weight: 700; }
html.edel .kopf-liste .kopf-leer { padding: 8px 10px; color: var(--glas-leise); }

/* Unter 900 px steht der Menü-Knopf (☰) fest oben links — die Kopfzeile
   lässt ihm Platz und bricht bei Bedarf in eine zweite Reihe um. */
@media (max-width: 899.98px) {
  html.edel .kopfzeile { padding: 9px 0 9px 54px; min-height: 62px; row-gap: 6px; }
  html.edel .kopf-suche-feld { width: 160px; }
  @keyframes nd-feld-auf { from { width: 30px; opacity: 0; } to { width: 160px; opacity: 1; } }
}
/* ND2.1.1 Punkt 13: im schmalen Fenster (Handy-Breite, 390 px) stapelte die
   Kopfzeile auf DREI Reihen (120 px). Engere Abstände (5 → 3 px) und ohne
   den senkrechten Trenner passen Seite/Verlauf/Tag in die erste Reihe, die
   Symbole rechts in die zweite — zwei Reihen. */
@media (max-width: 479.98px) {
  html.edel .kopfzeile,
  html.edel .kopf-gruppe,
  html.edel .kopfzeile .rg-knoepfe { gap: 3px; }
  html.edel .kopfzeile { row-gap: 6px; }
  html.edel .kopf-trenner { display: none; }
  html.edel .kopf-seiten { margin-right: 0; }
}

/* -------------------------------------------------------------- 6 Übersicht */
html.edel #page-dashboard > h1 { font-size: var(--fs-page); font-weight: 700; }
html.edel #page-dashboard > p.muted { color: var(--glas-leise); }
html.edel #dash-kacheln { gap: 16px; }
/* Glas: Weiß 3,5 %, 1 px Rand Weiß 9 %, Lichtkante oben. Darunter liegt der
   Lichtfleck (radial 240 px, Modulfarbe bis 24 %) als zweite Ebene. */
html.edel #dash-kacheln > details.card {
  --nd-farbe: var(--kz-farbe, var(--m));
  background-color: transparent;
  background-image:
    radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%),
                    color-mix(in srgb, var(--nd-farbe) var(--nd-licht), transparent), transparent 70%),
    linear-gradient(var(--glas), var(--glas));
  border: 1px solid var(--glas-rand);
  border-radius: var(--r-kachel);
  box-shadow: inset 0 1px 0 var(--glas-kante), 0 10px 30px var(--schatten-kachel);
  overflow: hidden;
  transition: --nd-licht 0.25s ease, transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
html.edel #dash-kacheln > details.dash-kz:hover {
  --nd-licht: var(--leucht-fleck);
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--nd-farbe) var(--leucht-kachel-rand), transparent);
  box-shadow: inset 0 1px 0 var(--glas-kante),
              0 0 0 1px color-mix(in srgb, var(--nd-farbe) var(--leucht-kachel-saum), transparent),
              0 14px var(--leucht-kachel-weite) color-mix(in srgb, var(--nd-farbe) var(--leucht-kachel-schein), transparent);
}
/* Unter dem Lichtfleck: leise und rote Texte eine Spur heller (≥ 4,5:1 an
   der hellsten Stelle, selftest_nd1.py E3). */
html.edel #dash-kacheln > details.dash-kz:hover .kz-wort,
html.edel #dash-kacheln > details.dash-kz:hover .kz-l,
html.edel #dash-kacheln > details.dash-kz:hover .kz-ring-satz,
html.edel #dash-kacheln > details.dash-kz:hover .kz-bald { color: var(--glas-leise-licht); }
html.edel #dash-kacheln > details.dash-kz:hover .kz-zeile.kz-rot .kz-w,
html.edel #dash-kacheln > details.dash-kz:hover .kz-hinweis.kz-rot,
html.edel #dash-kacheln > details.dash-kz.kz-fehler:hover .kz-wort { color: var(--rot-licht); }
html.edel #dash-kacheln > details.dash-kz.nd-druck {
  transform: translateY(-2px) scale(0.985);
  transition-duration: 0.08s;
}
html.edel #dash-kacheln > details.card > summary { background: transparent; }
html.edel #dash-kacheln > details.card > summary:hover { background: var(--glas-hauch); }
/* ND1.1 (Vahid nach der Vorschau): Kachel-Überschriften eine Stufe höher in
   der Treppe (--fs-leiste → --fs-body), das Symbol davor wächst im selben
   Verhältnis mit (Modul-Symbol 1 em statt 13 px; das größere Symbol von
   „Erste Schritte“ 20/13 em statt 20 px). Griff, Zuklapp-Pfeil und die
   Pfeile rechts bleiben, wie sie sind. */
html.edel #dash-kacheln > details.card > summary h2 {
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: 0.02em;
  display: inline-flex; align-items: center; gap: 8px;
}
html.edel #dash-kacheln .klapp-pfeil,
html.edel #dash-kacheln .klapp-griff { color: var(--glas-leise); }
html.edel #dash-kacheln .klapp-griff:hover {
  color: var(--glas-text); background: var(--glas-hauch-2);
}
/* ND1.2 Punkt 13 (Vahid): die Hoch-/Runter-Pfeile rechts im Kopf jeder
   Kachel und Klappkarte fallen im Dunkeln weg — verschoben wird per
   Festhalten am Griff ⋮⋮ links. Die Tastatur bleibt, nur unsichtbar: der
   Griff ist ein Knopf (Tab), sein aria-label nennt die Kachel, Pfeil hoch/
   runter verschiebt um eine Stelle mit derselben Speicherung (helpers.js,
   NH2). ND3.1: in beiden Themen. */
html.edel .klapp-pfeile { display: none; }
html.edel .klapp-griff:focus-visible { outline: 2px solid var(--m); outline-offset: -4px; color: var(--glas-text); }
html.edel #dash-kacheln details.klapp[open] > summary { border-bottom-color: transparent; }
html.edel .kz-kopf-symbol { display: inline-flex; color: var(--kz-farbe, var(--m)); }
html.edel .kz-kopf-symbol svg { width: 1em; height: 1em; }
html.edel #dash-kacheln > details.onb-karte > summary h2 [data-icon] svg {
  width: calc(20em / 13); height: calc(20em / 13);
}
/* Inhalt: Zahl 30 px · Wort 14 px · Zeilen 12,5 px · Ring · Pfeil. */
html.edel .kz-link { color: var(--glas-text); gap: 8px; }
html.edel .kz-link::after { border-radius: var(--r-kachel); }
html.edel .kz-link:focus-visible::after { outline-color: var(--nd-farbe); }
/* ND2.1.2 (N14): der Fokusring an Kacheln und ihren Knöpfen (Kopf, Griff,
   Pfeile, Knöpfe im Körper) trägt die Modulfarbe der Kachel — Kernblau nur
   bei Kern-Kacheln (ohne --kz-farbe, z. B. Aufgaben). PC und Handy. */
html.edel #dash-kacheln > details.card > summary:focus-visible,
html.edel #dash-kacheln > details.card .klapp-griff:focus-visible,
html.edel #dash-kacheln > details.card button:focus-visible,
html.edel #dash-kacheln > details.card a:focus-visible,
html.edel #dash-kacheln > details.card select:focus-visible,
html.edel #dash-kacheln > details.card input:focus-visible {
  outline-color: var(--nd-farbe);
}
html.edel .pwa-body details.kachel > summary:focus-visible,
html.edel .pwa-body details.kachel .klapp-griff:focus-visible,
html.edel .pwa-body details.kachel button:focus-visible,
html.edel .pwa-body details.kachel a:focus-visible {
  outline-color: var(--kz-farbe, var(--m));
}
html.edel .kz-zahl { font-size: var(--fs-display); font-weight: 700; color: var(--text-stark); }
html.edel .kz-wort { font-size: var(--fs-body); font-weight: 400; color: var(--glas-leise); }
html.edel .kz-zeile {
  font-size: var(--fs-small);
  border-top: 1px solid var(--linie-haar);
}
html.edel .kz-l { color: var(--glas-leise); }
html.edel .kz-w { color: var(--text-stark); }
html.edel .kz-zeile.kz-rot .kz-w { color: var(--rot-nacht); }
/* ND2.1.2 (N6, N9): „2 unbekannte Absender“ in der Modulfarbe (aufgehellt
   wie --m-hell, damit sie auch unter dem Lichtfleck trägt), „1 Postfach
   nicht erreichbar“ rot — nur Schrift. */
html.edel .kz-hinweis { font-size: var(--fs-small); font-weight: 700;
                         color: color-mix(in srgb, var(--nd-farbe) 85%, var(--m-misch)); }
html.edel .kz-hinweis.kz-rot { color: var(--rot-nacht); }
/* Keine Balkendiagramme (Konzept §3) — der Ring. ND3.1: das alte Diagramm
   ist aus Markup (js/dashboard.js) und app.css ausgebaut. */
html.edel .kz-ring-zeile {
  display: flex; align-items: center; gap: 12px;
  margin-top: 6px; padding-right: 26px;
}
html.edel .kz-ring-zeile:has(.kz-ring:empty) { display: none; }
/* Schmal (unter 600 px) wie bisher ohne Diagramm — also auch ohne Ring. */
@media (max-width: 600px) { html.edel .kz-ring-zeile { display: none; } }
html.edel .kz-ring {
  position: relative; flex: 0 0 44px; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
html.edel .kz-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
html.edel .kz-ring circle { fill: none; stroke-width: 4; }
html.edel .kz-ring-rest { stroke: var(--kz-farbe, var(--m)); opacity: 0.22; }
html.edel .kz-ring-voll {
  stroke: var(--kz-farbe, var(--m));
  stroke-linecap: round;
  transition: stroke-dasharray 0.8s ease-out;
}
html.edel .kz-ring-zahl {
  position: relative;
  font-size: var(--fs-small); font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--text-stark);
}
html.edel .kz-ring-satz { font-size: var(--fs-small); color: var(--glas-leise); line-height: 1.35; }
html.edel .kz-pfeil {
  color: var(--kz-farbe, var(--m));
  font-size: var(--fs-body);
  transition: transform 0.25s ease;
}
html.edel .dash-kz:hover .kz-pfeil { color: var(--kz-farbe, var(--m)); transform: translateX(3px); }
/* Module ohne Zahlen: Symbol, Name, „bald“, Pfeil. */
html.edel .dash-schlicht .kz-symbol { opacity: 0.85; }
html.edel .kz-bald { font-size: var(--fs-small); color: var(--glas-leise); letter-spacing: 0.04em; }
/* Fehler (Zahlen nicht verfügbar): roter Schein, einmal schütteln. */
html.edel #dash-kacheln > details.dash-kz.kz-fehler {
  border-color: color-mix(in srgb, var(--rot-nacht) 45%, transparent);
  box-shadow: inset 0 1px 0 var(--glas-kante),
              0 0 32px color-mix(in srgb, var(--rot-nacht) 22%, transparent);
}
html.edel .kz-fehler .kz-wort { color: var(--rot-nacht); }
/* Laden: schimmernde Platzhalter statt Nullen. */
html.edel details.kz-laedt .kz-zahl,
html.edel details.kz-laedt .kz-w {
  color: transparent;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--schimmer-a) 0%, var(--schimmer-b) 50%,
                              var(--schimmer-a) 100%);
  background-size: 200% 100%;
  animation: nd-schimmer 1.3s linear infinite;
}
@keyframes nd-schimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
/* Übrige Kacheln (Heute fällig, Erste Schritte, Leerzustand): Glas ohne
   Anheben. */
html.edel #dash-kacheln .onb-karte { border-color: color-mix(in srgb, var(--m) 45%, transparent); }
/* ND1.1 (Vahid nach der Vorschau): Knöpfe NUR auf der Übersicht — in
   „Erste Schritte“ und im Leerzustand („Heute fällig“ hat keine Knöpfe,
   nur Zeilen-Links). Alle anderen Seiten behalten ihre Knöpfe (ND2).
   · Nebenaktion („Ansehen“, „Zu den Einstellungen“) = Glas-Knopf: --glas,
     1 px --glas-rand, Rundung --r-knopf; beim Darüberfahren Rand und Schein
     in --m.
   · Hauptaktion („Einrichten“, „Fertig — Assistent schließen“) = gefüllt
     #1e6fd9 wie „Anmelden“ (Weiß darauf 4,85:1), Schein beim Darüberfahren.
   · „Passt so“, „Doch noch offen“, „Später weitermachen“ bleiben leise
     Text-Links in --m.
   · Zählmarke „3 von 5“ = Glas-Pille, Text in --bernstein. */
html.edel #page-dashboard .onb-fertig .btn-tinted,
html.edel #page-dashboard .leer-zustand button:not(.primary):not(.linklike) {
  background: var(--glas);
  border: 1px solid var(--glas-rand);
  border-radius: var(--r-knopf);
  color: var(--glas-text);
  box-shadow: inset 0 1px 0 var(--glas-kante);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
html.edel #page-dashboard .onb-fertig .btn-tinted:enabled:hover,
html.edel #page-dashboard .leer-zustand button:not(.primary):not(.linklike):enabled:hover {
  background: var(--glas);
  border-color: var(--m);
  color: var(--glas-text);
  box-shadow: inset 0 1px 0 var(--glas-kante),
              0 0 var(--leucht-glas-weite) color-mix(in srgb, var(--m) var(--leucht-glas), transparent);
}
html.edel #page-dashboard .onb-zeile:not(.onb-fertig) .btn-tinted,
html.edel #page-dashboard #onb-fertig {
  background: var(--haupt-blau);
  border: 1px solid var(--haupt-blau);
  border-radius: var(--r-knopf);
  color: var(--schrift-voll);
  box-shadow: 0 6px var(--leucht-haupt-weite) color-mix(in srgb, var(--haupt-blau-licht) var(--leucht-haupt), transparent);
  transition: filter 0.2s ease, box-shadow 0.2s ease;
}
html.edel #page-dashboard .onb-zeile:not(.onb-fertig) .btn-tinted:enabled:hover,
html.edel #page-dashboard #onb-fertig:enabled:hover {
  background: var(--haupt-blau);
  border-color: var(--haupt-blau);
  color: var(--schrift-voll);
  filter: brightness(1.1);
  box-shadow: 0 8px var(--leucht-haupt-hover-weite) color-mix(in srgb, var(--haupt-blau-licht) var(--leucht-haupt-hover), transparent);
}
html.edel #page-dashboard .onb-karte .linklike { color: var(--m); }
html.edel #page-dashboard .onb-karte .linklike:hover:not(:disabled) {
  color: var(--m);
  background: color-mix(in srgb, var(--m) 12%, transparent);
}
/* ND2.1 Baustein 0 (k), Regel Vahid 03.10.2026: Zahlen und Status nie mit
   Fläche oder Pille hinter der Schrift — nur farbige Schrift. Die Zählmarke
   „3 von 5“ von „Erste Schritte“ steht deshalb als Bernstein-Schrift ohne
   Glas-Pille (vorher ND1.1: Glas-Pille), die Kernzahl jeder anderen Karte
   der Übersicht („Heute fällig“) in der Seitenfarbe. Tönung bleibt allein
   an Knöpfen, Umschalt-Knöpfen und Symbol-Kacheln. */
html.edel #page-dashboard .klapp-status,
html.edel #page-dashboard details.klapp > summary:hover .klapp-status {
  background: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  color: var(--m);
}
html.edel #page-dashboard .klapp-status.warn { color: var(--bernstein); }
html.edel #page-dashboard #onb-karte > summary .klapp-status,
html.edel #page-dashboard #onb-karte > summary:hover .klapp-status {
  background: none;
  color: var(--bernstein);
  box-shadow: none;
}
/* ND2.1 Baustein 0 (k): Hauptzahl + Kurzwort im Kopf einer ZUGEKLAPPTEN
   Kachel (helpers.js AccelKlapp.zahlImKopf) — reine farbige Schrift in der
   Modulfarbe, rot nur bei überfällig/unbesetzt/Verstoß; Ein- und
   Ausblenden 180 ms; ein Link ins Modul. Übersicht am PC und Handy-
   Startseite (beide laden diese Datei). ND3.1: in beiden Themen. */
html.edel .pwa-body details.kachel[data-modul="call"] { --kz-farbe: var(--modul-call); }
html.edel .pwa-body details.kachel[data-modul="conbono"] { --kz-farbe: var(--modul-conbono); }
html.edel .pwa-body details.kachel[data-modul="crew"] { --kz-farbe: var(--modul-crew); }
html.edel .pwa-body details.kachel[data-modul="deals"] { --kz-farbe: var(--modul-deals); }
html.edel .pwa-body details.kachel[data-modul="inbox"] { --kz-farbe: var(--modul-inbox); }
html.edel .pwa-body details.kachel[data-modul="memory"] { --kz-farbe: var(--modul-memory); }
html.edel .pwa-body details.kachel[data-modul="publish"] { --kz-farbe: var(--modul-publish); }
html.edel .klapp-zahl {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: var(--fs-body);
  font-weight: 400;
  white-space: nowrap;
  text-decoration: none;
  color: var(--kz-farbe, var(--m));
  background: none;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}
html.edel .klapp-zahl-n { font-weight: 700; font-variant-numeric: tabular-nums; }
html.edel .klapp-zahl.klapp-zahl-rot { color: var(--rot-nacht); }
html.edel .klapp-zahl:hover { text-decoration: underline; }
html.edel .klapp-zahl:focus-visible { outline: 2px solid var(--kz-farbe, var(--m)); outline-offset: 2px; border-radius: 4px; }
html.edel details[open] > summary > .klapp-zahl { opacity: 0; visibility: hidden; }
html.edel summary > .klapp-zahl + span[data-klapp-status] { margin-left: 8px; }

/* --------------------------------------------- 7 Übergänge und Dialoge */
html.edel main > .page.nd-seite-rein { animation: nd-seite 0.18s ease-out backwards; }
@keyframes nd-seite { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* ND2.1 Baustein 1: Modul → Modul — hinaus 16 px nach rechts, zurück in der
   neuen Modulfarbe (180 ms); die aktive Zeile der Seitenleiste zieht ihre
   farbige Kante mit (die Kante wächst in derselben Zeit von oben herein). */
html.edel main > .page.nd-seite-quer { animation: nd-quer 0.18s ease-out backwards; }
@keyframes nd-quer {
  0% { opacity: 1; transform: translateX(0); }
  45% { opacity: 0; transform: translateX(16px); }
  55% { opacity: 0; transform: translateX(16px); }
  100% { opacity: 1; transform: none; }
}
html.edel .nav-item.active { animation: nd-kante 0.18s ease-out; }
@keyframes nd-kante {
  from { box-shadow: inset 0 0 0 var(--ng, var(--m)), inset 0 0 0 transparent; }
}
html.edel .overlay {
  background: var(--abdunkeln);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
html.edel .overlay:not([hidden]) > .modal { animation: nd-heben 0.22s ease-out; }
@keyframes nd-heben { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* ND2.1 Baustein 0 (c): Dialoge im Glas (Konzept §6): Hintergrund
   abgedunkelt 55 % und unscharf 6 px (oben), das Fenster ist Glas mit
   Lichtkante und hebt sich in 220 ms. Knöpfe wie auf der Übersicht:
   Hauptaktion gefüllt --haupt-blau (auf einer Modulseite in der Modulfarbe,
   Baustein 1), Nebenaktion Glas, Abbrechen leise, Löschen rot umrandet.
   Fokusrahmen rund und nur bei Tastatur (Regel oben, html.zeiger). Das
   Sperrfenster (.sperre-overlay) behält seinen Bernstein (Abschnitt 9). */
html.edel .overlay:not(.sperre-overlay) > .modal {
  background: var(--glas-fenster);
  border: 1px solid var(--glas-rand);
  border-radius: var(--r-kachel);
  box-shadow: inset 0 1px 0 var(--glas-kante), 0 24px 64px var(--glas-fenster-schatten);
  color: var(--glas-text);
}
html.edel .overlay:not(.sperre-overlay) .modal-head h2 { color: var(--glas-text); }
html.edel .overlay:not(.sperre-overlay) .modal-head .linklike { color: var(--glas-leise); border-radius: 50%; }
html.edel .overlay:not(.sperre-overlay) .modal-head .linklike:hover:not(:disabled) {
  color: var(--glas-text); background: var(--glas);
}
html.edel .overlay:not(.sperre-overlay) .modal-body { color: var(--glas-text); }
html.edel .overlay:not(.sperre-overlay) .modal-body .muted,
html.edel .overlay:not(.sperre-overlay) .modal-body label { color: var(--glas-leise); }
html.edel .overlay:not(.sperre-overlay) .modal-foot { border-top-color: var(--linie-haar); }
html.edel .overlay:not(.sperre-overlay) .modal-body input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
html.edel .overlay:not(.sperre-overlay) .modal-body select,
html.edel .overlay:not(.sperre-overlay) .modal-body textarea {
  background: var(--feld-grund);
  border: 1px solid var(--glas-rand);
  border-radius: var(--r-feld);
  color: var(--glas-text);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
html.edel .overlay:not(.sperre-overlay) .modal-body input:focus-visible,
html.edel .overlay:not(.sperre-overlay) .modal-body select:focus-visible,
html.edel .overlay:not(.sperre-overlay) .modal-body textarea:focus-visible {
  outline: none;
  border-color: var(--m);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--m) var(--leucht-fokus), transparent);
}
html.edel .overlay:not(.sperre-overlay) .modal-body input.feld-fehler,
html.edel .overlay:not(.sperre-overlay) .modal-body select.feld-fehler,
html.edel .overlay:not(.sperre-overlay) .modal-body textarea.feld-fehler {
  border-color: var(--rot-nacht);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rot-nacht) 18%, transparent);
}
html.edel .overlay:not(.sperre-overlay) .modal-body .feld-fehlerzeile { color: var(--rot-nacht); }
html.edel .overlay:not(.sperre-overlay) .modal-foot button {
  border-radius: var(--r-knopf);
  transition: filter 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
html.edel .overlay:not(.sperre-overlay) .modal-foot button:not(.primary):not(.danger):not(.linklike):not([data-i18n="common.cancel"]) {
  background: var(--glas);
  border: 1px solid var(--glas-rand);
  color: var(--glas-text);
  box-shadow: inset 0 1px 0 var(--glas-kante);
}
html.edel .overlay:not(.sperre-overlay) .modal-foot button:not(.primary):not(.danger):not(.linklike):not([data-i18n="common.cancel"]):enabled:hover {
  background: var(--glas);
  border-color: var(--m);
  box-shadow: inset 0 1px 0 var(--glas-kante),
              0 0 var(--leucht-glas-weite) color-mix(in srgb, var(--m) var(--leucht-glas), transparent);
}
/* Abbrechen: leise, ohne Rahmen und Fläche. */
html.edel .overlay:not(.sperre-overlay) .modal-foot button[data-i18n="common.cancel"],
html.edel .overlay:not(.sperre-overlay) .modal-foot button[data-i18n="common.cancel"]:enabled:hover {
  background: none;
  border-color: transparent;
  box-shadow: none;
  color: var(--glas-leise);
}
html.edel .overlay:not(.sperre-overlay) .modal-foot button[data-i18n="common.cancel"]:enabled:hover { color: var(--glas-text); }
html.edel .overlay:not(.sperre-overlay) .modal-foot button.primary {
  background: var(--haupt-blau);
  border: 1px solid var(--haupt-blau);
  color: var(--schrift-voll);
  box-shadow: 0 6px var(--leucht-haupt-weite) color-mix(in srgb, var(--haupt-blau-licht) var(--leucht-haupt), transparent);
}
html.edel .overlay:not(.sperre-overlay) .modal-foot button.primary:enabled:hover {
  background: var(--haupt-blau);
  border-color: var(--haupt-blau);
  filter: brightness(1.1);
  box-shadow: 0 8px var(--leucht-haupt-hover-weite) color-mix(in srgb, var(--haupt-blau-licht) var(--leucht-haupt-hover), transparent);
}
/* Löschen / gefährliche Hauptaktion: rot umrandet, keine Fläche. */
html.edel .overlay:not(.sperre-overlay) .modal-foot button.danger,
html.edel .overlay:not(.sperre-overlay) .modal-foot button.danger:enabled:hover {
  background: transparent;
  border: 1px solid var(--rot-nacht);
  color: var(--rot-nacht);
  filter: none;
}
html.edel .overlay:not(.sperre-overlay) .modal-foot button.danger:enabled:hover {
  background: color-mix(in srgb, var(--rot-nacht) 10%, transparent);
  box-shadow: 0 0 var(--leucht-glas-weite) color-mix(in srgb, var(--rot-nacht) 30%, transparent);
}
/* Fokusrahmen der Dialog-Knöpfe: die Knopf-Regeln oben setzen eigene
   Schatten — der Ring kommt deshalb als runder Umriss (folgt der Rundung),
   nur bei Tastatur; nach Maus/Finger (html.zeiger) keiner. */
html.edel .overlay:not(.sperre-overlay) .modal-foot button:focus-visible {
  outline: 2px solid var(--m);
  outline-offset: 2px;
}
html.edel.zeiger .overlay:not(.sperre-overlay) .modal-foot button:focus-visible { outline: none; }
/* Klick-Lichtring (js/effekte.js): läuft 18 px nach außen und verlischt. */
html.edel .nd-ring {
  position: fixed; z-index: 90; pointer-events: none;
  border: 2px solid var(--ring, var(--m));
  animation: nd-ring 0.6s ease-out forwards;
}
/* Der Ring ist ein Schatten mit wachsender Ausdehnung — genau 18 px nach
   außen, unabhängig von der Größe der Kachel. */
@keyframes nd-ring {
  from { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--ring, var(--haupt-blau-licht)) var(--leucht-ring), transparent); }
  to { opacity: 0; box-shadow: 0 0 0 18px color-mix(in srgb, var(--ring, var(--haupt-blau-licht)) 0%, transparent); }
}
/* Fehler: schütteln (400 ms) und rot leuchten. */
html.edel .nd-schuetteln { animation: nd-schuetteln 0.4s ease-in-out; }
@keyframes nd-schuetteln {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}

/* ------------------------------------------------------- 8 Anmeldung
   Konzept §8: Grund wie die App; oben der Schriftzug „AccelNexus“ (Tinos
   46 px, „Accel“ weiß, „Nexus“ #3f9fff, kein Schatten) und rechts daneben
   die Bildmarke (76 px, inline-SVG in login.html). Beide schwanken als EINE
   Einheit langsam um die senkrechte Achse (8 s, ±12°). Darunter das
   Glasfenster (300 px), „Anmelden“ in Markenblau, Sprachen DE · EN · ES.
   Fehler: Fenster schüttelt (js/effekte.js), roter Schein, Passwortfeld rot,
   Hinweis mit Restversuchen (js/login.js). */
html.edel .login-body { padding: 24px 16px; }
html.edel .login-wrap {
  max-width: 340px;
  display: flex; flex-direction: column; align-items: center; gap: 26px;
}
html.edel .nd-marke-zeile { perspective: 900px; }
html.edel .nd-einheit {
  display: flex; align-items: center; gap: 14px;
  transform-style: preserve-3d;
  animation: nd-schwanken 8s ease-in-out infinite alternate;
}
@keyframes nd-schwanken {
  from { transform: rotateY(-12deg); }
  to { transform: rotateY(12deg); }
}
html.edel .nd-schriftzug {
  font-size: var(--fs-marke); line-height: 1; font-weight: 400;
  letter-spacing: -0.01em; white-space: nowrap;
}
html.edel .nd-accel { color: var(--text-stark); }
html.edel .nd-nexus { color: var(--marke-blau); }
html.edel .nd-marke { width: 76px; height: 76px; flex: 0 0 auto; overflow: visible; }
/* ND3.1: dieselbe Marke im Hellen — die dunklen Scheiben werden weiß, die
   weißen Striche des AI-Zeichens und die Lichtimpulse dunkel (Token
   --marke-scheibe/--marke-strich in css/tokens.css; dunkel wortgleich die
   Werte aus login.html, die CSS-Angabe überstimmt das SVG-Attribut). */
html.edel .nd-marke [fill="#0d1322"] { fill: var(--marke-scheibe); }
html.edel .nd-marke [fill="#eaf2fb"] { fill: var(--marke-strich); }
html.edel .nd-marke [stroke="#eaf2fb"] { stroke: var(--marke-strich); }
/* Lichtimpuls: läuft auf jeder Spur von der Scheibe zur Mitte (2,4 s);
   die Verzögerung je Spur steht am Element (login.html). */
html.edel .nd-impuls {
  opacity: 0;
  animation: nd-impuls 2.4s ease-in infinite;
}
@keyframes nd-impuls {
  0% { opacity: 0; transform: translateY(0); }
  15% { opacity: 1; }
  80% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(16px); }
}
/* Das Glasfenster */
html.edel .login-card {
  width: 300px; max-width: 100%;
  padding: 22px 22px 18px;
  background: var(--glas);
  border: 1px solid var(--glas-rand);
  border-radius: var(--r-kachel);
  box-shadow: inset 0 1px 0 var(--glas-kante), 0 20px 50px var(--schatten-fenster);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
/* Der Schriftzug ist die Überschrift; „Anmeldung“ bleibt für Vorleser. */
html.edel .login-card .login-logo { display: none; }
html.edel .login-card #login-titel {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
/* Tinos hat eine kleinere x-Höhe: Etiketten und Hinweise in 14 px. */
html.edel .login-card #login-sub { color: var(--glas-leise); margin: 0 0 4px; font-size: var(--fs-body); }
html.edel .login-card form label { color: var(--glas-leise); font-size: var(--fs-body); font-weight: 400; }
html.edel .login-card input {
  background: var(--feld-grund);
  border: 1px solid var(--glas-rand);
  border-radius: var(--r-feld);
  color: var(--glas-text);
}
html.edel .login-card input:focus-visible {
  outline: none;
  border-color: var(--marke-blau);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--marke-blau) var(--leucht-fokus), transparent);
}
/* „Anmelden“ in Markenblau: Füllung #1e6fd9 (Weiß darauf 4,85:1 — auf
   #3f9fff wären es nur 2,76:1), Schein in #3f9fff. */
html.edel .login-card button.primary {
  background: var(--haupt-blau); border-color: var(--haupt-blau); color: var(--schrift-voll);
  border-radius: var(--r-knopf);
  box-shadow: 0 6px var(--leucht-haupt-weite) color-mix(in srgb, var(--haupt-blau-licht) var(--leucht-haupt), transparent);
  transition: filter 0.2s ease, box-shadow 0.2s ease;
}
html.edel .login-card button.primary:enabled:hover {
  background: var(--haupt-blau); border-color: var(--haupt-blau);
  filter: brightness(1.1);
  box-shadow: 0 8px var(--leucht-haupt-hover-weite) color-mix(in srgb, var(--haupt-blau-licht) var(--leucht-haupt-hover), transparent);
}
html.edel .login-card .linklike { color: var(--glas-leise); }
html.edel .login-card .linklike:hover { color: var(--glas-text); }
/* Fehler: roter Schein am Fenster, Passwortfeld rot, Hinweise in Rot/leise. */
html.edel .login-card.nd-fehler {
  border-color: color-mix(in srgb, var(--rot-nacht) 55%, transparent);
  box-shadow: inset 0 1px 0 var(--glas-kante),
              0 0 0 1px color-mix(in srgb, var(--rot-nacht) 25%, transparent),
              0 0 42px color-mix(in srgb, var(--rot-nacht) 30%, transparent);
}
html.edel .login-card input[aria-invalid="true"] {
  border-color: var(--rot-nacht);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rot-nacht) 18%, transparent);
}
html.edel .login-card .login-error { color: var(--rot-nacht); }
html.edel .nd-rest { color: var(--glas-leise); margin: 0; font-size: var(--fs-body); }
/* Sprachen DE · EN · ES (ND3.1: in beiden Themen; die Auswahlliste des
   alten Hell-Designs ist ausgeblendet). */
html.edel .login-card .login-lang { display: none; }
html.edel .nd-sprachen {
  display: flex; justify-content: center; align-items: center; gap: 6px;
  margin-top: 10px; color: var(--glas-leise); font-size: var(--fs-body);
}
html.edel .nd-sprachen button {
  background: none; border: 0; padding: 4px 6px; min-height: 0;
  color: var(--glas-leise); font-size: var(--fs-body); letter-spacing: 0.06em;
  border-radius: 6px; cursor: pointer;
}
html.edel .nd-sprachen button:hover { color: var(--glas-text); }
html.edel .nd-sprachen button[aria-pressed="true"] { color: var(--marke-blau); font-weight: 700; }
@media (max-width: 380px) {
  html.edel .nd-einheit { gap: 10px; }
  html.edel .nd-marke { width: 62px; height: 62px; }
}

/* ---------------------------------------------------- 9 Sperrfenster
   Konzept §8: mittig über der abgedunkelten, unscharfen Seite; eigener
   Bernstein-Schein #ffb84d, Schloss und „Entsperren“ in Bernstein, der Satz,
   wohin man zurückkehrt; „Abmelden“ leise. Die Seite dahinter bleibt
   unlesbar (Abdunklung + starker Weichzeichner, wie bisher). */
html.edel .overlay.sperre-overlay {
  background: var(--sperre-abdunkeln);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
html.edel .sperre-karte-pc {
  background: var(--sperre-karte);
  border: 1px solid color-mix(in srgb, var(--bernstein) 38%, transparent);
  border-radius: var(--r-kachel);
  box-shadow: inset 0 1px 0 var(--glas-kante),
              0 0 var(--leucht-bernstein-weite) color-mix(in srgb, var(--bernstein) var(--leucht-bernstein), transparent),
              0 24px 60px var(--schatten-tief);
}
html.edel .sperre-karte-pc .modal-head { border-bottom-color: var(--linie-leiste); }
html.edel .sperre-karte-pc .modal-head h2 { color: var(--glas-text); }
html.edel .sperre-karte-pc .modal-head [data-icon] { color: var(--bernstein); }
html.edel .sperre-karte-pc .modal-body p { color: var(--glas-leise); }
html.edel .sperre-karte-pc .modal-body label {
  color: var(--glas-leise); font-weight: 400; margin-top: 10px; font-size: var(--fs-body);
}
html.edel .sperre-karte-pc input {
  background: var(--feld-grund);
  border: 1px solid var(--glas-rand);
  border-radius: var(--r-feld);
  color: var(--glas-text);
}
html.edel .sperre-karte-pc input:focus-visible {
  outline: none;
  border-color: var(--bernstein);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bernstein) var(--leucht-fokus), transparent);
}
html.edel .sperre-karte-pc .modal-foot { border-top-color: var(--linie-leiste); }
/* Feldfehler (AccelFeldfehler) in Anmeldung und Sperrfenster: rot wie im
   übrigen Design, auch gegen die Glas-Regeln für Felder oben. */
html.edel .login-card input.feld-fehler,
html.edel .sperre-karte-pc input.feld-fehler {
  border-color: var(--rot-nacht);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rot-nacht) 18%, transparent);
}
html.edel .login-card .feld-fehlerzeile,
html.edel .sperre-karte-pc .modal-body .feld-fehlerzeile {
  color: var(--rot-nacht); font-size: var(--fs-body); font-weight: 400;
}
html.edel #pc-sperre-ok {
  background: var(--bernstein); border-color: var(--bernstein);
  color: var(--schrift-auf-bernstein); border-radius: var(--r-knopf); font-weight: 700;
  box-shadow: 0 6px var(--leucht-entsperren-weite) color-mix(in srgb, var(--bernstein) var(--leucht-entsperren), transparent);
}
html.edel #pc-sperre-ok:enabled:hover { filter: brightness(1.06); }
html.edel #pc-sperre-abmelden {
  background: none; border-color: transparent; color: var(--glas-leise);
}
html.edel #pc-sperre-abmelden:enabled:hover { color: var(--glas-text); }

/* --------------------------------------------- 10 Handy-Startseite
   Konzept §9: Grund dunkel OHNE Effekt (kein Licht von oben, kein
   Lichtfleck), Datum und Begrüßung, Kacheln gestapelt mit getöntem Symbol
   links, großer Zahl + einer kleinen Zahl, Pfeil rechts, kein Ring.
   Antippen: eindrücken + Lichtring (js/effekte.js), die Modulseite gleitet
   von rechts herein (pwa.css). Das Drei-Punkte-Menü ist ein Glasblatt von
   unten, sein Inhalt bleibt wie in NH2. Gilt nur für pwa.html — die
   Modulseiten laden diese Datei nicht (ND4). */
html.edel body.pwa-body {
  font-family: "Tinos", "Times New Roman", serif;
  background: var(--grund-inhalt);
  background-image: none;
  color: var(--glas-text);
}
html.edel .pwa-head {
  background: var(--grund-inhalt);
  border-bottom: 1px solid var(--linie-leiste);
}
html.edel .pwa-head .head-marke { letter-spacing: 0.01em; }
html.edel .pwa-head .head-name { display: none; }
html.edel .nd-datum { font-size: var(--fs-small); color: var(--glas-leise); }
html.edel .nd-gruss { font-size: var(--fs-card); font-weight: 700; color: var(--glas-text); }
html.edel .nd-datum:empty,
html.edel .nd-gruss:empty { display: none; }
html.edel .pwa-body .kachel {
  background: var(--glas);
  border: 1px solid var(--glas-rand);
  border-left-width: 1px;
  border-radius: var(--r-kachel);
  box-shadow: inset 0 1px 0 var(--glas-kante);
  transition: transform 0.12s ease;
}
html.edel .pwa-body details.kachel.nd-druck { transform: scale(0.985); }
/* ND2.1 Baustein 0 (h): Überschrift eine Stufe größer (--fs-body →
   --fs-ui), der Griff wächst mit (16 → 18 px); der Klapp-Pfeil bekommt
   keine eigene Schriftgröße (Wächter selftest_nd1 U1), er wird skaliert. */
/* ND2.1.1 (H2, Handy-Sichtung Vahid): Überschrift, Klapp-Pfeil, Zahl im
   Ring, die Zeilen der Kachel und die Zahl im zugeklappten Kopf je EINE
   weitere Stufe (--fs-ui → --fs-card, Pfeil 1,15 → 1,25); große Zahl und
   Symbol wachsen im selben Verhältnis mit (30 → 32 px über die neue Stufe
   --fs-handy-gross, Symbol-Kachel 36 → 38 px, Ring 44 → 47 px). */
html.edel .pwa-body .kachel > summary h2 { font-size: var(--fs-card); font-weight: 700; }
html.edel .pwa-body .kachel > summary .klapp-pfeil { scale: 1.25; }
html.edel .pwa-body .klapp-zahl { font-size: var(--fs-card); }
html.edel .nd-hk .kz-ring-zahl { font-size: var(--fs-body); }
html.edel .nd-hk-ring svg { width: 47px; height: 47px; }
html.edel .pwa-body .kachel > summary .klapp-griff svg { width: 18px; height: 18px; }
html.edel .pwa-body .kachel .klapp-pfeil,
html.edel .pwa-body .kachel .klapp-griff { color: var(--glas-leise); }
html.edel .pwa-body .leise { color: var(--glas-leise); }
/* Die alte Modul-Kachel (Text + „Öffnen“) weicht der einen Zeile. */
html.edel .pwa-body .kachel[data-modul] .klapp-koerper > p.leise,
html.edel .pwa-body .kachel[data-modul] .klapp-koerper > .kachel-link { display: none; }
html.edel .pwa-body .kachel-link { color: var(--m); }
html.edel .nd-hk[data-modul="call"] { --nd-f: var(--modul-call); }
html.edel .nd-hk[data-modul="conbono"] { --nd-f: var(--modul-conbono); }
html.edel .nd-hk[data-modul="crew"] { --nd-f: var(--modul-crew); }
html.edel .nd-hk[data-modul="deals"] { --nd-f: var(--modul-deals); }
html.edel .nd-hk[data-modul="inbox"] { --nd-f: var(--modul-inbox); }
html.edel .nd-hk[data-modul="memory"] { --nd-f: var(--modul-memory); }
html.edel .nd-hk[data-modul="publish"] { --nd-f: var(--modul-publish); }
html.edel .nd-hk {
  display: flex; align-items: center; gap: 14px;
  min-height: 64px; padding: 4px 2px;
  color: var(--glas-text); text-decoration: none;
  border-radius: 10px;
  -webkit-tap-highlight-color: transparent;
}
html.edel .nd-hk:focus-visible { outline: 2px solid var(--nd-f, var(--m)); outline-offset: 2px; }
/* ND2.1 Baustein 0 (m): offene Handy-Kachel — Symbol-Kachel kleiner (36 px),
   Mitte große Zahl + Wort + zweite Zeile, rechts der Fortschrittsring
   (44 px, Zahl darin, „Woche“ darunter) wie am PC; der Pfeil steht im Kopf
   (.klapp-rechts: offen Pfeil, zugeklappt die Zahl aus k). „bald“ ohne Ring.
   Bei 390 px in EN/ES bricht nur die zweite Zeile um (Wort und Zahl nicht). */
html.edel .nd-hk-symbol {
  flex: 0 0 38px; width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  color: var(--nd-f, var(--m));
  background: color-mix(in srgb, var(--nd-f, var(--m)) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nd-f, var(--m)) 30%, transparent);
}
html.edel .nd-hk-mitte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html.edel .nd-hk-gross { display: flex; align-items: baseline; flex-wrap: nowrap; gap: 0 8px; min-width: 0; }
html.edel .nd-hk-symbol svg { width: 19px; height: 19px; }
html.edel .nd-hk-wort { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
html.edel .nd-hk-rechts {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
html.edel .nd-hk-rechts:has(.nd-hk-ring:empty) { display: none; }
html.edel .nd-hk-ring-wort { font-size: var(--fs-body); color: var(--glas-leise); line-height: 1.2; }
html.edel .klapp-rechts {
  margin-left: auto;
  flex: 0 0 auto;
  display: grid;
  align-items: center;
  justify-items: end;
}
html.edel .klapp-rechts > * { grid-area: 1 / 1; }
html.edel .klapp-rechts > .klapp-zahl { margin-left: 0; }
html.edel .nd-kopf-pfeil {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; margin: -10px -8px -10px 0;
  color: var(--kz-farbe, var(--m));
  font-size: var(--fs-card);
  text-decoration: none;
  opacity: 1; visibility: visible;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}
html.edel .nd-kopf-pfeil:focus-visible { outline: 2px solid var(--kz-farbe, var(--m)); outline-offset: -6px; border-radius: 10px; }
html.edel details:not([open]) > summary .nd-kopf-pfeil { opacity: 0; visibility: hidden; }
html.edel details[open] > summary .klapp-rechts > .klapp-zahl { opacity: 0; visibility: hidden; }
/* ND2.1 Baustein 0 (i): Text der Handy-Kachel je eine Stufe größer —
   Wort neben der Zahl --fs-body → --fs-ui, zweite Zeile und „bald“
   --fs-small → --fs-body, die große Zahl mit (--fs-handy-zahl →
   --fs-display, 26 → 30 px). */
html.edel .nd-hk-zahl {
  font-size: var(--fs-handy-gross); font-weight: 700; line-height: 1.1;
  color: var(--text-stark); font-variant-numeric: tabular-nums;
}
html.edel .nd-hk-zahl:empty { display: none; }
html.edel .nd-hk-wort { font-size: var(--fs-card); color: var(--glas-leise); }
html.edel .nd-hk-klein { font-size: var(--fs-ui); color: var(--glas-leise); overflow-wrap: anywhere; }
html.edel .nd-hk-klein:empty { display: none; }
html.edel .nd-hk-klein.nd-rot { color: var(--rot-nacht); }
html.edel .nd-hk-hinweise { display: flex; flex-direction: column; gap: 2px; }
html.edel .nd-hk-hinweise:empty { display: none; }
html.edel .nd-hk-hinweis { font-size: var(--fs-ui); font-weight: 700; overflow-wrap: anywhere;
                            color: color-mix(in srgb, var(--nd-f, var(--m)) 85%, var(--m-misch)); }
html.edel .nd-hk-hinweis.nd-rot { color: var(--rot-nacht); }
/* Reiter-Leiste unten und Meldung im dunklen Glas. */
html.edel .pwa-toast {
  background: var(--grund-inhalt-2);
  color: var(--glas-text);
  border: 1px solid var(--glas-rand);
  box-shadow: inset 0 1px 0 var(--glas-kante), 0 12px 30px var(--schatten-toast);
}
html.edel .nd-hk-bald .nd-hk-wort { font-size: var(--fs-ui); letter-spacing: 0.04em; }
/* Die Reiter-Leiste unten steht seit ND2.1 (Baustein 0 g) als Glas in
   css/nachtglas-handy.css — für alle Handy-Seiten gleich. */
/* Das Drei-Punkte-Menü als Glasblatt von unten steht seit ND2.1
   (Baustein 0 l) in css/nachtglas-handy.css — für alle Handy-Seiten gleich,
   mit Umschalt-Knöpfen statt Kippschalter und Sprach-Blockleiste. */

/* Zahl im Kartenkopf (NH2, AccelKlapp.status) — ND2.1 Baustein 0 (k),
   Regel Vahid: reine farbige Schrift statt Kreis/Pille („0“ bei „Meine
   Aufgaben“); offen Fälliges in Bernstein. */
html.edel .pwa-body .klapp-status,
html.edel .pwa-body .klapp-status.ok,
html.edel .pwa-body .klapp-status.warn {
  background: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  color: var(--m);
}
html.edel .pwa-body .klapp-status.warn { color: var(--bernstein); }
/* ND3.1: „Abhaken“ in „Meine Aufgaben“ der Startseite — dunkel wie bisher
   (Werte wortgleich aus pwa.css), hell ein Glas-Knopf statt der weißen
   Fläche des alten Designs. */
html.edel .pwa-body .aufgabe-haken {
  background: var(--handy-knopf-grund);
  border-color: var(--handy-knopf-rand);
  color: var(--handy-knopf-text);
}

/* ------------------------------------------------- 10b Datumsleiste
   ND2.2a (Skill edles-dunkel-design, bauteile.md §15): die seitenweite
   Leiste „Tag · Woche · Monat“ (js/kern/datumsleiste.js, app.css NS3) im
   Dunkeln — Termine und Dienstplan benutzen sie. Das Segment sind
   Umschalt-Knöpfe (Pille, aktiv Tönung 18 % + Rand + Schein in --m, Text
   weiß und fett), die Pfeile Glas-Kreise wie die Handy-Tagwahl (.ix-pfeil:
   1 px Glasrand, Glas, Pfeil in --m), die Angabe weiß. Abseits der
   Gegenwart keine warme Fläche mehr: das Abzeichen „Letzte Woche“ steht als
   Schrift in Bernstein, „Diese Woche“ als Schrift in --m — nie als Pille.
   Der eigene Kalender ist ein Glasfenster. */
html.edel .dl-segment {
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
}
html.edel .dl-seg {
  min-height: 34px;
  padding: 6px 14px;
  border: 1px solid var(--glas-rand);
  border-radius: var(--r-knopf);
  background: var(--glas);
  color: var(--glas-text);
  font-weight: 400;
  box-shadow: inset 0 1px 0 var(--glas-kante);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
html.edel .dl-seg:enabled:hover {
  background: var(--glas);
  border-color: color-mix(in srgb, var(--m) 70%, transparent);
}
html.edel .dl-seg.aktiv,
html.edel .dl-seg.aktiv:enabled:hover {
  background: color-mix(in srgb, var(--m) 18%, transparent);
  border-color: var(--m);
  color: var(--glas-text);
  font-weight: 700;
  box-shadow: inset 0 1px 0 var(--glas-kante),
              0 0 var(--leucht-glas-weite) color-mix(in srgb, var(--m) var(--leucht-glas), transparent);
}
html.edel .dl-kern,
html.edel .datumsleiste.dl-anders .dl-kern {
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
}
html.edel .dl-pfeil {
  width: 36px;
  height: 36px;
  min-height: 36px;
  border: 1px solid var(--glas-rand);
  border-radius: 50%;
  background: var(--glas);
  color: var(--m);
  box-shadow: inset 0 1px 0 var(--glas-kante);
}
html.edel .dl-pfeil:enabled:hover,
html.edel .datumsleiste.dl-anders .dl-pfeil:enabled:hover {
  background: var(--glas);
  border-color: var(--m);
  box-shadow: inset 0 1px 0 var(--glas-kante),
              0 0 var(--leucht-glas-weite) color-mix(in srgb, var(--m) var(--leucht-glas), transparent);
}
html.edel .dl-angabe {
  border: 0;
  border-radius: var(--r-knopf);
  background: none;
  color: var(--glas-text);
}
html.edel .dl-angabe:enabled:hover,
html.edel .datumsleiste.dl-anders .dl-angabe:enabled:hover {
  background: color-mix(in srgb, var(--m) 9%, transparent);
}
html.edel .dl-abzeichen,
html.edel .dl-abzeichen.dl-gegenwart,
html.edel .dl-abzeichen.dl-vergangen,
html.edel .dl-abzeichen.dl-zukunft {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-weight: 700;
}
html.edel .dl-abzeichen.dl-gegenwart { color: var(--m); }
html.edel .dl-abzeichen.dl-vergangen,
html.edel .dl-abzeichen.dl-zukunft { color: var(--bernstein); }
html.edel .dl-pfeil:focus-visible,
html.edel .dl-seg:focus-visible,
html.edel .dl-angabe:focus-visible { outline: 2px solid var(--m); outline-offset: 2px; }
html.edel.zeiger .dl-pfeil:focus-visible,
html.edel.zeiger .dl-seg:focus-visible,
html.edel.zeiger .dl-angabe:focus-visible { outline: none; }
html.edel .dl-kal {
  background: var(--glas-fenster);
  color: var(--glas-text);
  border: 1px solid var(--glas-rand);
  border-radius: var(--r-kachel);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 var(--glas-kante), 0 18px 40px var(--schatten-tief);
}
html.edel .dl-kal-wt,
html.edel .dl-kal-titel,
html.edel .dl-kal-tag.fremd { color: var(--glas-leise); }
html.edel .dl-kal-tag {
  border-radius: var(--r-feld);
  color: var(--glas-text);
  box-shadow: none;
}
html.edel .dl-kal-tag.gewaehlt {
  background: color-mix(in srgb, var(--m) 18%, transparent);
  border-color: var(--m);
  font-weight: 700;
}
html.edel .dl-kal-tag.heute { border-color: var(--m); color: var(--m); }
html.edel .dl-kal-tag:enabled:hover { background: color-mix(in srgb, var(--m) 14%, transparent); border-color: var(--m); }
html.edel .dl-kal-schnell,
html.edel .dl-kal-bereich { border-top-color: var(--linie-haar); }
html.edel .dl-kal-felder input {
  background: var(--feld-grund);
  border: 1px solid var(--glas-rand);
  border-radius: var(--r-feld);
  color: var(--glas-text);
}
html.edel .dl-kal-felder input:focus-visible {
  outline: none;
  border-color: var(--m);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--m) var(--leucht-fokus), transparent);
}
html.edel .dl-kal-fehler { color: var(--rot-nacht); }

/* ------------------------------------------------- 11 Ruhe
   prefers-reduced-motion schaltet ALLE Bewegung dieses Designs ab — auch
   die Übergänge, die der Rest der App selbst mitbringt, solange das Design
   aktiv ist. Dazu die Weiche `ruhig()` in js/effekte.js. */
@media (prefers-reduced-motion: reduce) {
  html.edel *,
  html.edel *::before,
  html.edel *::after {
    animation: none !important;
    transition: none !important;
  }
  html.edel #dash-kacheln > details.dash-kz:hover,
  html.edel #dash-kacheln > details.dash-kz.nd-druck { transform: none; }
  html.edel .nd-ring { display: none; }
}