/* AccelCura — css/nachtglas.css (V5.3·ND1, Design „Edles Dunkel“).
   Übernommen aus dem Skill edles-dunkel-design, vorlagen/nachtglas.css
   (Stand AccelNexus 063be7f, Freigabe Vahid 03.10.2026, Hell „Tag“ ND3.1).
   KEIN Code neu erfunden: die Abschnitte 1, 2b, 3, 7, 11 stehen WORTGLEICH
   wie in der Vorlage (Kommentare nennen dort AccelNexus-Stellen als
   Herkunft); die übrigen Abschnitte sind auf die Struktur von AccelCura
   umgestellt (Platzhalter-Liste der Vorlage), Regeln und Werte unverändert:
     · 2  Rubrikfarbe der Seite: html.edel[data-m="planen|pflege|zeiten|
          organisation|abrechnung"] (js/app.js setzt data-m beim Seitenwechsel,
          nachweise.html trägt „abrechnung“ fest).
     · 4  Seitenleiste: Gruppen als data-nav-gruppe (kern/stamm/verwaltung)
          an Überschrift und Einträgen, Tagesgeschäft neutral mit Zeilen in
          ihrer Rubrikfarbe (data-modul) — AccelCura hat keine zuklappbaren
          Gruppen (Entscheidung V5.3·R5). Seit ND1.1 (N57) fällt der Fuß der
          Leiste (Angemeldet als …, Abmelden) weg, sobald die Kopfzeile steht.
     · 5  Kopfzeile nur Symbole (ND1.1, Fund N57, js/kopfzeile.js): Regeln
          wortgleich aus der Vorlage für die Teile, die AccelCura hat —
          Rückgängig · Wiederholen · Verlauf (R12, .rg-verlauf, links),
          Nacht/Tag · Sprache · Initialen-Kreis mit Blatt (rechts). Ohne
          Gegenstück (weggelassen): Seite zurück/vor, Tag, Suche,
          Erinnerungen, Sperren, Menü-Knopf ☰. Die schwebende Leiste
          bleibt als Rückfall, falls keine Kopfzeile gebaut wird.
     · 6  Übersicht: Kennzahl-Kachel aus D2 als Glaskachel; seit D2 mit
          Fortschrittsring statt 7-Tage-Balken (Entscheidung Vahid
          21.10.2026) — die Ring-Regeln stehen EINMAL in css/app.css, hier
          nur die Rubrikfarbe; Abschnitte ohne Gegenstück in AccelCura
          (Erste Schritte, „bald“, Zahl im zugeklappten Kopf) entfallen.
     · 8  Anmeldung: Schriftzug „Accel“ + „Cura“ (.nd-cura), große Marke
          ohne Kranz (AccelCura hat keine Module als eigene Apps).
     · 9  Sperrfenster entfällt (AccelCura hat noch keins — kommt mit der
          PC-Sperre der Rechte-Welle V5.5, Bauteil bauteile.md §12).
     · 10 Handy-Startseite: nur Grund, Kopf, Meldung und Stand-Texte —
          die Modul-Kacheln von AccelNexus gibt es in „Meine Tour“ nicht.
     · 10b/10c (Datumsleiste, Schnellwahl) sind Modulseiten-Teile und
          folgen mit dem Umbau nach dem Konzeptgespräch (N53).
   REGEL wie in der Vorlage: jede Regel hängt an html.edel (js/theme.js,
   beide Themen); html.nacht { --… } und html:not(.nacht) { --… } setzen
   nur Token. Schriftgrößen nur aus css/tokens.css. */

/* ------------------------------------------------------------ 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 Rubrikfarbe der Seite --m
   js/app.js setzt html[data-m="<rubrik>"] beim Seitenwechsel (Büro),
   nachweise.html trägt sie fest; Seiten ohne Rubrik behalten das
   Markenblau aus den Token (css/app.css). */
html.edel[data-m="planen"] { --m: var(--modul-planen); }
html.edel[data-m="pflege"] { --m: var(--modul-pflege); }
html.edel[data-m="zeiten"] { --m: var(--modul-zeiten); }
html.edel[data-m="organisation"] { --m: var(--modul-organisation); }
html.edel[data-m="abrechnung"] { --m: var(--modul-abrechnung); }

/* ------------------------------------------- 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; }
/* Schriftzug + kleine Marke sind ein Link zur Übersicht (Skill
   anmeldung-und-bildmarke.md §3): Hand-Zeiger, nicht markierbar. */
html.edel .sidebar a.logo { color: var(--glas-text); text-decoration: none; cursor: pointer; user-select: none; }
html.edel .sidebar a.logo:focus-visible { outline: 2px solid var(--m); outline-offset: 2px; border-radius: 8px; }
/* 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. */
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.
   AccelCura: Übersicht und Cockpit Markenblau (kern), Stammdaten Türkis,
   Verwaltung Bernstein — Titel in der Gruppenfarbe; Tagesgeschäft: Titel
   neutral, jede Rubrik-Zeile in ihrer Rubrikfarbe (--kz-farbe =
   --modul-<rubrik>). Kontrast im Selbsttest gerechnet (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="planen"] { --kz-farbe: var(--modul-planen); }
html.edel .nav-item[data-modul="pflege"] { --kz-farbe: var(--modul-pflege); }
html.edel .nav-item[data-modul="zeiten"] { --kz-farbe: var(--modul-zeiten); }
html.edel .nav-item[data-modul="organisation"] { --kz-farbe: var(--modul-organisation); }
html.edel .nav-item[data-modul="abrechnung"] { --kz-farbe: var(--modul-abrechnung); }
html.edel .nav-item[data-modul] { --ng: var(--kz-farbe, var(--m)); }
html.edel .nav-gruppe[data-nav-gruppe] { color: var(--ng, var(--glas-leise)); }
/* 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; }
/* Der Fuß der Leiste („Angemeldet als …“, „Abmelden“) trägt die leisen
   Glas-Farben, solange es keine Kopfzeile gibt (Rückfall). */
html.edel .sidebar :is(.nav-fuss, .sidebar-user) { border-top-color: var(--linie-leiste); }
html.edel .sidebar :is(.nav-fuss, .sidebar-user) .muted { color: var(--glas-leise); }
html.edel .sidebar :is(.nav-fuss, .sidebar-user) .linklike { color: var(--glas-leise); }
html.edel .sidebar :is(.nav-fuss, .sidebar-user) .linklike:hover:not(:disabled) { color: var(--glas-text); background: var(--glas-hauch-2); }
/* ND1.1 (N57, Skill bauteile.md §14): „Angemeldet als …“, Rolle und
   „Abmelden“ stehen 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 body:has(> main > .kopfzeile) > .sidebar :is(.nav-fuss, .sidebar-user) { display: none; }
/* V5.3·D2.1 (N61): Menü-Knopf der Schublade unter 600 px (css/app.css) im
   Glas der Leiste, mittig in der ersten Reihe der Kopfzeile (52 px). */
html.edel .nav-schalter {
  background: var(--grund-leiste);
  color: var(--glas-text);
  border: 1px solid var(--glas-rand);
  border-radius: var(--r-knopf);
}
@media (max-width: 600px) { html.edel .nav-schalter { top: 4px; } }

/* ------------------------------------------------------------ 5 Kopfzeile
   ND1.1 (Fund N57, Skill bauteile.md §13, Vorlage nachtglas.css §5): 52 px,
   nur Symbole: 15-px-Symbol in 30-px-Kreis, alle gleich groß, Abstände
   5 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. Gebaut von js/kopfzeile.js als erstes Kind von
   main; die drei Symbole Zurück · Vor · Verlauf (js/rueckgaengig.js)
   sitzen links in .kopf-links. */
html.edel body:has(> .sidebar) > main:has(> .kopfzeile) { 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; }
/* Bricht die Kopfzeile im schmalen Fenster in zwei Zeilen um, stehen BEIDE
   linksbündig (Klasse kopf-zweizeilig, gemessen von js/kopfzeile.js). */
html.edel .kopfzeile.kopf-zweizeilig .kopf-rechts { margin-left: 0; }
/* Die Leiste Zurück · Vor · Verlauf schwebt in der Kopfzeile nicht mehr:
   kein eigenes Glas, kein Umfließen, kein Kleben — die Kopfzeile klebt. */
html.edel .kopfzeile .rg-verlauf {
  float: none;
  position: static;
  margin: 0;
  padding: 0;
  gap: 5px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html.edel .kopf-knopf,
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 {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
}
html.edel .kopf-knopf svg { width: 15px; height: 15px; }
html.edel .kopf-knopf [data-icon] { display: inline-flex; }
html.edel .kopf-knopf:hover:not([aria-disabled="true"]),
html.edel .kopf-knopf.kopf-aktiv,
html.edel .kopf-knopf[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"] { opacity: 0.3; cursor: default; }
html.edel .kopf-knopf:focus-visible,
html.edel .kopf-ich:focus-visible { outline: 2px solid var(--m); outline-offset: 2px; }
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[hidden] { display: none; }
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);
}
/* 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; }
/* Blatt und Sprachliste hängen fest im Fenster (am body, Lage aus
   js/kopfzeile.js) — main scrollt selbst und schnitte sie sonst ab;
   über der Kopfzeile (30) und der Verlauf-Liste (40), unter Dialogen (50). */
html.edel .kopf-ich-blatt {
  position: fixed; top: 60px; right: 8px; z-index: 45;
  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 [data-icon] { display: inline-flex; }
html.edel .kopf-ich-blatt .kopf-ich-eintrag svg { flex: 0 0 auto; width: 15px; height: 15px; 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); }
/* Sprache: die Liste DE · EN · ES klappt unter dem Symbol auf. */
html.edel .kopf-sprache { position: relative; display: flex; align-items: center; gap: 5px; }
html.edel .kopf-liste {
  position: fixed; top: 60px; right: 8px; z-index: 45;
  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[hidden] { display: none; }
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);
  box-shadow: none;
  font-size: var(--fs-body); font-weight: 400; text-align: left;
  cursor: pointer; min-height: 0;
}
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-pressed="true"] { color: var(--m); font-weight: 700; }
/* Im schmalen Fenster (Handy-Breite) engere Abstände (5 → 3 px). */
@media (max-width: 479.98px) {
  html.edel .kopfzeile,
  html.edel .kopf-gruppe,
  html.edel .kopfzeile .rg-verlauf { gap: 3px; }
  html.edel .kopfzeile { row-gap: 6px; padding-block: 11px; }
}
/* V5.3·D2.1 (N61): unter 600 px steht der Menü-Knopf fest oben links —
   die Kopfzeile lässt ihm Platz (44 px + 10 px Luft). */
@media (max-width: 600px) {
  html.edel .kopfzeile { padding-left: 54px; }
}
@media print { html.edel .kopfzeile { display: none; } }

/* Rückfall ohne Kopfzeile: die schwebende Leiste Rückgängig · Wiederholen ·
   Verlauf (R12) trägt das Bauteil der Kopfzeile — Glas über dem Inhalt,
   15-px-Symbol im 30-px-Kreis, inaktiv grau, beim Darüberfahren und
   geöffnet Tönung 16 % + Rand + Schein in --m, nicht verfügbar 30 %;
   die Trefferfläche bleibt größer als der Kreis. */
html.edel .rg-verlauf {
  gap: 5px;
  padding: 5px 7px;
  background: var(--kopf-grund);
  border: 1px solid var(--glas-rand);
  border-radius: var(--r-knopf);
  box-shadow: inset 0 1px 0 var(--glas-kante), 0 10px 30px var(--schatten-kachel);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
html.edel .rg-verlauf button {
  position: relative;
  flex: 0 0 30px;
  width: 30px; height: 30px; min-width: 30px; min-height: 30px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--glas-leise);
  box-shadow: none;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
html.edel .rg-verlauf button::before {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
}
html.edel .rg-verlauf button svg { width: 15px; height: 15px; }
html.edel .rg-verlauf button:hover:enabled,
html.edel .rg-verlauf .rg-v-liste[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 .rg-verlauf button:disabled { color: var(--glas-leise); opacity: 0.3; }
html.edel .rg-verlauf button:focus-visible { outline: 2px solid var(--m); outline-offset: 2px; }
/* Die Liste darunter und die Rückgängig-Meldung unten: Glas wie die Blätter
   der Kopfzeile (Skill §5, ND1.2 Punkt 7). */
html.edel .rg-liste {
  background: var(--glas-fenster);
  color: var(--glas-text);
  border: 1px solid var(--glas-rand);
  border-radius: var(--r-kachel);
  box-shadow: inset 0 1px 0 var(--glas-kante), 0 18px 40px var(--schatten-tief);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* -------------------------------------------------------------- 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; }
/* Die Rubrik der Kennzahl-Kachel trägt ihre Rubrikfarbe (Schrift-tauglich,
   ≥ 4,6:1) — Kontur, Lichtfleck, Pfeil und Ring. */
html.edel .dash-kz[data-gruppe="planen"] { --kz-farbe: var(--modul-planen); }
html.edel .dash-kz[data-gruppe="pflege"] { --kz-farbe: var(--modul-pflege); }
html.edel .dash-kz[data-gruppe="zeiten"] { --kz-farbe: var(--modul-zeiten); }
html.edel .dash-kz[data-gruppe="organisation"] { --kz-farbe: var(--modul-organisation); }
html.edel .dash-kz[data-gruppe="abrechnung"] { --kz-farbe: var(--modul-abrechnung); }
/* 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 { 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.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). Griff und Zuklapp-Pfeil
   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; }
/* 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 .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); }
/* Seit D2 (Entscheidung Vahid 21.10.2026) trägt die Kachel einen
   Fortschrittsring statt der 7-Tage-Balken. Seine Regeln stehen EINMAL in
   css/app.css und färben über --kz-farbe — hier gibt es keine zweite
   Fassung, die Rubrikfarbe oben reicht. */
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); }
/* 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); }
/* AccelCura: der Schnellzugriff der Übersicht — Nebenaktionen als Glas-
   Knopf (Skill §6 „Knöpfe NUR auf der Übersicht“), die Hauptaktion als Glas
   im Stil des aktiven Umschalt-Knopfs mit Symbol (Regel R-E, bauteile.md
   §22 b; Markenblau, die Übersicht hat keine Rubrikfarbe). */
html.edel #page-dashboard .ai-actions 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 .ai-actions 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 .ai-actions button.primary {
  background: color-mix(in srgb, var(--m) 18%, transparent);
  border: 1px solid var(--m);
  border-radius: var(--r-knopf);
  color: var(--text-stark);
  font-weight: 700;
  box-shadow: inset 0 1px 0 var(--glas-kante),
              0 0 var(--karte-schein-weite) color-mix(in srgb, var(--m) var(--karte-schein-aktiv), transparent);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
html.edel #page-dashboard .ai-actions button.primary:enabled:hover {
  background: color-mix(in srgb, var(--m) 18%, transparent);
  border-color: var(--m);
  color: var(--text-stark);
  box-shadow: inset 0 1px 0 var(--glas-kante),
              0 0 var(--leucht-haupt-hover-weite) color-mix(in srgb, var(--m) var(--leucht-haupt-hover), transparent);
}
html.edel #page-dashboard .ai-actions button.primary svg { color: var(--m); }
/* 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. (AccelCura hat keine
   „Erste Schritte“-Karte; die Regel gilt für jeden Stand-Text der Übersicht.) 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); }

/* --------------------------------------------- 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 „AccelCura“ (Tinos
   46 px, „Accel“ weiß, „Cura“ #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-cura { 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; }
}

/* Feldfehler (AccelFeldfehler) in der Anmeldung: rot wie im übrigen Design,
   auch gegen die Glas-Regeln für Felder oben. */
html.edel .login-card 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 {
  color: var(--rot-nacht); font-size: var(--fs-body); font-weight: 400;
}

/* --------------------------------------------- 10 Handy-Startseite
   Konzept §9: Grund dunkel OHNE Effekt (kein Licht von oben, kein
   Lichtfleck). AccelCura: „Meine Tour“ (pwa.html) — Kopf, Meldung und die
   Stand-Texte der Kartenköpfe; die Tour-Karten selbst sind Modul-Inhalt
   und folgen dem Umbau nach dem Konzeptgespräch (N53). */
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);
}
/* Der Name der Pflegekraft (.head-name) bleibt sichtbar — anders als in
   AccelNexus steht er in „Meine Tour“ für sich und ersetzt die Begrüßung. */
/* Meldung im dunklen Glas; die Reiter-Leiste unten steht in
   css/nachtglas-handy.css (alle Handy-Seiten gleich). */
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);
}
/* 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); }

/* ------------------------------------- 12 Umschalt-Knopf statt Kästchen
   ND1.1 (Fund N60, Skill bauteile.md §6, Grundsatz 10): im Büro gibt es
   kein Kästchen und keinen Kippschalter mehr — Ja/Nein ist ein
   Umschalt-Knopf: Pille mit Haken-Symbol (15 px als Maske in der Farbe),
   aus = Glas mit grauem Haken, an = Tönung 18 % + Rand + Schein in --m,
   Haken in --m, Text fett. Es bleibt dasselbe input (Wert, Tastatur,
   Vorleser, change-Ereignisse unverändert) — nur die Fläche zeichnet die
   App:
     a) Etikett mit Kästchen (label > input): das Etikett wird die Pille,
        das Kästchen ihr Haken (Muster der Vorlage inbox.css „l“).
     b) Kästchen ohne Etikett (Tabellenzellen, Formular-Raster): das
        Kästchen ist selbst die Pille, der Haken sein ::after (wie die
        App-Kästchen der Ersatzsuche seit 29.09.2026).
     c) Kippschalter button.schalter[role=switch]: der Knopf wird die
        Pille, die Spur entfällt.
   Nur Büro (html.handy ausgenommen: die Handy-App hat ihre eigenen
   Bauteile, nachtglas-handy.css). */
html.edel:not(.handy) label:has(> input[type="checkbox"]) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  min-height: 36px;
  margin: 6px 6px 6px 0;
  padding: 6px 14px;
  border: 1px solid var(--glas-rand);
  border-radius: var(--r-knopf);
  background: var(--glas);
  color: var(--glas-text);
  font-size: var(--fs-body);
  font-weight: 400;
  cursor: pointer;
  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:not(.handy) label:has(> input[type="checkbox"])[hidden] { display: none; }
html.edel:not(.handy) label > input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 15px;
  width: 15px;
  min-width: 15px;
  height: 15px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--glas-leise);
  box-shadow: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center / contain no-repeat;
  cursor: pointer;
}
html.edel:not(.handy) label > input[type="checkbox"]::after { content: none; }
html.edel:not(.handy) label:has(> input[type="checkbox"]:checked) {
  background: color-mix(in srgb, var(--m) 18%, transparent);
  border-color: var(--m);
  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:not(.handy) label > input[type="checkbox"]:checked { background: var(--m); }
html.edel:not(.handy) label:has(> input[type="checkbox"]:focus-visible) {
  outline: 2px solid var(--m);
  outline-offset: 2px;
}
html.edel:not(.handy) label:has(> input[type="checkbox"]:disabled) { opacity: 0.5; cursor: not-allowed; }
html.edel:not(.handy) input[type="checkbox"]:not(label > input),
html.edel:not(.handy) button.schalter[role="switch"] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  height: 30px;
  min-height: 30px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--glas-rand);
  border-radius: var(--r-knopf);
  background: var(--glas);
  box-shadow: inset 0 1px 0 var(--glas-kante);
  vertical-align: middle;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
html.edel:not(.handy) input[type="checkbox"]:not(label > input)[hidden] { display: none; }
html.edel:not(.handy) input[type="checkbox"]:not(label > input)::after,
html.edel:not(.handy) button.schalter[role="switch"]::before {
  content: "";
  width: 15px;
  height: 15px;
  border: 0;
  transform: none;
  background: var(--glas-leise);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center / contain no-repeat;
}
html.edel:not(.handy) button.schalter[role="switch"] .schalter-spur { display: none; }
html.edel:not(.handy) input[type="checkbox"]:not(label > input):checked,
html.edel:not(.handy) button.schalter[role="switch"][aria-checked="true"] {
  background: color-mix(in srgb, var(--m) 18%, transparent);
  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:not(.handy) input[type="checkbox"]:not(label > input):checked::after,
html.edel:not(.handy) button.schalter[role="switch"][aria-checked="true"]::before { background: var(--m); }
html.edel:not(.handy) input[type="checkbox"]:not(label > input):focus-visible,
html.edel:not(.handy) button.schalter[role="switch"]:focus-visible {
  outline: 2px solid var(--m);
  outline-offset: 2px;
}
html.edel:not(.handy) input[type="checkbox"]:not(label > input):disabled { opacity: 0.5; cursor: not-allowed; }
@media (hover: hover) {
  html.edel:not(.handy) label:has(> input[type="checkbox"]:not(:disabled)):hover,
  html.edel:not(.handy) input[type="checkbox"]:not(label > input):not(:disabled):hover,
  html.edel:not(.handy) button.schalter[role="switch"]:hover {
    border-color: color-mix(in srgb, var(--m) 55%, var(--glas-rand));
  }
}

/* ------------------------------------------------- 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; }
  html.edel .nav-item.active { animation: none; }
}