/* ND3.1 — die Teile des Designs „Edles Dunkel“, die NUR auf Modul- und
   Verwaltungsseiten stehen: Glas-Auswahlfeld (ND2.2a Baustein 1),
   Kern-Bedienelemente Schnellwahl und Datei-Feld (ND2.2a, vorher
   nachtglas.css Abschnitt 10c) und die Zusammenfassung im Kopf der
   Einstellungen-Klappkarten (ND2.1.1 Punkt 13).

   WARUM eine eigene Datei: In ND3.1 gilt der Rahmen (css/nachtglas.css)
   in beiden Themen (html.edel); die Modulseiten bleiben bis ND3.2, wie sie
   sind — sie hängen weiter an `html.edel` (seit ND3.2 beide Themen) und zeigen im Tag-Thema noch das
   alte Design. Diese Blöcke standen am Ende bzw. in Abschnitt 3 von
   nachtglas.css und kommen hier wortgleich, direkt nach nachtglas.css
   geladen (gleiche Reihenfolge vor den Modul-Dateien, Dunkel Pixel für
   Pixel). ND3.2 (13.10.2026) hat sie wie den Rahmen von html.nacht gelöst:
   jede Regel hängt an html.edel (beide Themen), Farben nur aus Token. */

/* ND2.2a Baustein 1 — Glas-Auswahlfeld (Merkposten Vahid 04.10.2026). Die
   Zeile unter dem Mauszeiger in der Liste des Browsers bleibt Chrome-Blau
   und lässt sich nicht färben — deshalb klappt jedes select der Büro-Seiten
   im Dunkeln als eigenes Glasblatt auf (js/kern/kern.js, `glasAuswahl`):
   Glas wie das Drei-Punkte-Menü des Posteingangs, Zeilen 4 px rund; die
   gewählte Zeile Tönung 18 % + 2-px-Kante links in --m, Schrift weiß und
   fett; die Zeile unter dem Mauszeiger bzw. der Tastatur-Markierung Tönung
   14 % + 0,5-px-Rahmen in --m (wie die gewählte Tabellenzeile). Geschlossen
   bleibt das select, wie es ist; offen trägt es Rand + Schein des Fokus.
   Seit ND3.2 in beiden Themen (Farben aus den Token). */
html.edel .glas-auswahl[hidden] { display: none; }
html.edel .glas-auswahl {
  position: fixed;
  z-index: 120;
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  border: 1px solid var(--glas-rand);
  border-radius: var(--r-kachel);
  background-color: var(--glas-fenster);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 var(--glas-kante), 0 18px 40px var(--schatten-tief);
  color: var(--glas-text);
  font-family: "Tinos", "Times New Roman", serif;
  font-size: var(--fs-body);
  line-height: 1.35;
  text-align: left;
}
html.edel .glas-auswahl-zeile {
  padding: 8px 12px;
  border-radius: var(--r-feld);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background-color 0.12s ease;
}
html.edel .glas-auswahl-zeile[aria-selected="true"] {
  color: var(--text-stark);
  font-weight: 700;
  background: color-mix(in srgb, var(--m) 18%, transparent);
  box-shadow: inset 2px 0 0 var(--m);
}
html.edel .glas-auswahl-zeile.aktiv {
  background: color-mix(in srgb, var(--m) 14%, transparent);
  box-shadow: inset 0 0 0 0.5px var(--m);
}
html.edel .glas-auswahl-zeile.aktiv[aria-selected="true"] {
  background: color-mix(in srgb, var(--m) 22%, transparent);
  box-shadow: inset 2px 0 0 var(--m), inset 0 0 0 0.5px var(--m);
}
html.edel .glas-auswahl-zeile[aria-disabled="true"] { color: var(--glas-leise); cursor: default; }
html.edel .glas-auswahl-gruppe {
  padding: 8px 12px 4px;
  color: var(--glas-leise);
  font-size: var(--fs-small);
  font-weight: 700;
}
html.edel select.glas-offen {
  border-color: var(--m);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--m) var(--leucht-fokus), transparent);
}


/* ------------------------------------------------- 10c Kern-Bedienelemente
   ND2.2a: zwei Bauteile des Formular-Kerns, die jede Modulseite benutzt —
   im Dunkeln wie überall: die Schnellwahl unter einem Zahlenfeld („15 ·
   30 · 45 Min.“, aria-pressed) sind Umschalt-Knöpfe (Pille, aktiv Tönung
   18 % + Rand + Schein in --m, Text weiß und fett), der Knopf eines
   Datei-Felds ist ein Glas-Knopf statt des grauen Browser-Knopfs. */
html.edel .schnellwahl button {
  min-height: 32px;
  padding: 5px 12px;
  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);
}
html.edel .schnellwahl button:enabled:hover {
  background: var(--glas);
  border-color: color-mix(in srgb, var(--m) 70%, transparent);
}
html.edel .schnellwahl button[aria-pressed="true"],
html.edel .schnellwahl button[aria-pressed="true"]: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);
}


/* ND2.1.1 Punkt 13 — Einstellungen: die Zusammenfassung im Kopf einer
   Klappkarte („English · Dunkel“, „Musterhoff … · Rechtstexte fehlen“) ist
   reine farbige Schrift ohne Pille (Regel Vahid: Zahlen und Status nie mit
   Fläche) — der Rest in der Farbe der Seite (--m), ein Hinweis rot; bei
   schmaler Breite bleibt nur der Hinweis. */
html.edel #page-settings .klapp-status,
html.edel #page-settings .klapp-status.ok,
html.edel #page-settings .klapp-status.warn,
html.edel #page-settings details.klapp > summary:hover .klapp-status {
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--m);
}
html.edel #page-settings .klapp-status.warn,
html.edel #page-settings .klapp-status .klapp-status-hinweis { color: var(--rot-nacht); }
html.edel #page-settings .klapp-status.warn .klapp-status-rest { color: var(--m); }
@media (max-width: 600px) {
  html.edel #page-settings .klapp-status .klapp-status-rest { display: none; }
}

/* NÜ3 (U35, Entscheidung Vahid 01.10.2026) — die Kachel „Auf einen Blick“
   der Modul-Startseiten Termine, Buchhaltung, Dienstplan (EIN Bauteil im
   Kern: js/kern/blick.js). Beide Themen, nur Token; die Karte selbst ist
   eine Klappkarte (Glas, Kontur und Schein in --m nach R-D aus app.css).
     Kopf    Zeitraum-Knöpfe 7 · 30 · 90 oben rechts als Umschalt-Knöpfe
             (Pille, aktiv Tönung 18 % + Rand + Schein in --m, fett)
     Körper  drei Spalten Heute · Zeitraum · Offen mit Zeilen „Bezeichnung
             links, Wert rechts“ (Option C) — jede Zeile ist ein Link; Rot nur
             bei überfällig, unbesetzt, Verstoß, Warnhinweis Bernstein (R-J),
             Zahlen nur als farbige Schrift, nie Fläche (Grundsatz 6)
     Unten   das breite Diagramm (Linie 2 px + Punkte 8 px, kein Balken —
             Grundsatz 10) und daneben der Ring (Bauteil .kz-ring aus
             nachtglas.css). Unter 760 px eine Spalte, Ring unter 600 px aus
             (wie auf der Übersicht). */
html.edel details.blick { margin-bottom: 18px; }
html.edel details.blick > summary .klapp-aktionen { margin-left: auto; }
/* Die Zahl im Kopf (zugeklappt) steht rechts NEBEN den Zeitraum-Knöpfen —
   ohne eigenes margin-left: auto, sonst teilten sich zwei Ränder den Platz
   und die Knöpfe stünden in der Mitte. Offen nimmt sie keinen Platz. */
html.edel details.blick > summary > .klapp-zahl { margin-left: 12px; }
html.edel details.blick[open] > summary > .klapp-zahl { display: none; }
html.edel .blick-zeitraum { display: inline-flex; gap: 6px; flex-wrap: wrap; }
/* Seiten-ID in der Regel des Bauteils (bauteile.md §18 n): die Knopf-
   Sammelregel jeder Modulseite (#page-<modul> button:where(…)) überstimmte
   sonst Tönung und Rand des aktiven Zeitraums. */
html.edel #page-call .blick-tage,
html.edel #page-conbono .blick-tage,
html.edel #page-crew .blick-tage {
  font-family: inherit;
  font-size: var(--fs-small);
  min-height: 30px;
  padding: 4px 12px;
  border-radius: 14px;
  border: 1px solid var(--glas-rand);
  background: var(--glas);
  color: var(--glas-text);
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
html.edel #page-call .blick-tage[aria-pressed="true"],
html.edel #page-conbono .blick-tage[aria-pressed="true"],
html.edel #page-crew .blick-tage[aria-pressed="true"],
html.edel #page-call .blick-tage[aria-pressed="true"]:enabled:hover,
html.edel #page-conbono .blick-tage[aria-pressed="true"]:enabled:hover,
html.edel #page-crew .blick-tage[aria-pressed="true"]:enabled:hover {
  background: color-mix(in srgb, var(--m) 18%, transparent);
  border-color: var(--m);
  box-shadow: 0 0 12px color-mix(in srgb, var(--m) 30%, transparent);
  color: var(--text-stark);
  font-weight: 700;
}
@media (hover: hover) {
  html.edel #page-call .blick-tage:enabled:hover,
  html.edel #page-conbono .blick-tage:enabled:hover,
  html.edel #page-crew .blick-tage:enabled:hover { border-color: var(--m); }
}
html.edel .blick-tage:focus-visible,
html.edel .blick-zahl:focus-visible,
html.edel .blick-diagramm:focus-visible {
  outline: 2px solid var(--m);
  outline-offset: 2px;
}
html.edel .blick-spalten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 28px;
}
@media (max-width: 760px) {
  html.edel .blick-spalten { grid-template-columns: minmax(0, 1fr); }
}
html.edel .blick-spalte { min-width: 0; }
html.edel .blick-spalte-titel {
  margin: 0 0 4px;
  font-size: var(--fs-body);
  font-weight: 700;
  color: color-mix(in srgb, var(--m) 85%, var(--m-misch));
}
html.edel .blick-zeilen { list-style: none; margin: 0; padding: 0; }
html.edel .blick-leer { color: var(--glas-leise); font-size: var(--fs-body); padding: 6px 0; }
html.edel .blick-zahl {
  display: flex; align-items: baseline; gap: 10px;
  min-height: 32px; padding: 6px 0;
  border-bottom: 0.5px solid var(--linie-haar);
  color: var(--glas-text);
  text-decoration: none;
}
html.edel .blick-l {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--fs-body);
  color: var(--glas-leise);
  overflow-wrap: anywhere;
}
html.edel .blick-w {
  flex: 0 0 auto;
  font-size: var(--fs-ui);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-stark);
  white-space: nowrap;
}
html.edel .blick-zahl.rot .blick-w { color: var(--rot-nacht); }
html.edel .blick-zahl.bernstein .blick-w { color: var(--bernstein); }
html.edel .blick-pfeil {
  flex: 0 0 auto;
  font-size: var(--fs-body);
  color: var(--m);
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
@media (hover: hover) {
  html.edel .blick-zahl:hover .blick-l { color: var(--glas-text); }
  html.edel .blick-zahl:hover .blick-pfeil { opacity: 1; transform: translateX(2px); }
}
html.edel .blick-zahl:focus-visible .blick-pfeil { opacity: 1; }
html.edel .blick-unten {
  display: flex; align-items: flex-end; gap: 24px;
  margin-top: 14px;
}
html.edel .blick-diagramm {
  position: relative;
  flex: 1 1 auto; min-width: 0;
  margin: 0;
  border-radius: 4px;
}
html.edel .blick-diagramm-titel {
  font-size: var(--fs-small);
  color: var(--glas-leise);
  margin-bottom: 6px;
}
html.edel .blick-flaeche { position: relative; height: 96px; margin: 0 6px; }
html.edel .blick-linie-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
html.edel .blick-grund { stroke: var(--linie-haar); stroke-width: 1; }
html.edel .blick-linie {
  fill: none;
  stroke: var(--m);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
html.edel .blick-punkt {
  position: absolute;
  width: 8px; height: 8px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  border: 2px solid var(--m);
  background: var(--grund-inhalt);
  transition: transform 0.15s ease;
}
html.edel .blick-punkt.heute { background: var(--m); }
html.edel .blick-punkt.gewaehlt {
  transform: scale(1.35);
  box-shadow: 0 0 0 2px var(--grund-inhalt), 0 0 10px color-mix(in srgb, var(--m) 45%, transparent);
}
html.edel .blick-wert-heute {
  position: absolute;
  transform: translate(-100%, -150%);
  padding-right: 8px;
  font-size: var(--fs-small);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-stark);
  white-space: nowrap;
  pointer-events: none;
}
html.edel .blick-achse { position: relative; height: 20px; margin: 4px 6px 0; }
html.edel .blick-marke {
  position: absolute; top: 0;
  transform: translateX(-50%);
  font-size: var(--fs-small);
  color: var(--glas-leise);
  white-space: nowrap;
}
html.edel .blick-marke.links { transform: none; }
html.edel .blick-marke.rechts { transform: translateX(-100%); }
html.edel .blick-tipp {
  position: absolute; top: 18px; z-index: 2;
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--glas-rand);
  background: var(--glas-fenster);
  box-shadow: 0 6px 18px var(--schatten-toast);
  font-size: var(--fs-small);
  color: var(--glas-text);
  white-space: nowrap;
  pointer-events: none;
}
html.edel .blick-tipp.rechts { transform: translateX(-100%); }
html.edel .blick-tipp[hidden] { display: none; }
/* Dieselben Werte als Tabelle für Vorleseprogramme — unsichtbar, nicht weg. */
html.edel .blick-tabelle {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
html.edel .blick-ring { flex: 0 0 auto; max-width: 240px; padding-right: 0; margin-top: 0; }
@media (max-width: 600px) {
  html.edel .blick-unten { display: block; }
  html.edel .blick-flaeche { height: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  html.edel details.blick, html.edel details.blick *, html.edel details.blick *::before,
  html.edel details.blick *::after { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------- NÜ4 „Auf einen Blick“ (U35 Teil 2)
   Dieselbe Kachel (js/kern/blick.js) auf den Startseiten Angebote,
   Posteingang, Firmengedächtnis und Social Media — kein neues Muster, nur
   die Seiten-IDs der vier Module in der Regel der Zeitraum-Knöpfe (die
   Knopf-Sammelregel jeder Modulseite überstimmte sonst Tönung und Rand des
   aktiven Zeitraums, bauteile.md §18 n; Seiten-IDs ausgeschrieben, kein
   :is() — Lehre NÜ3 d). Dazu die Zeile des Sprung-Filters
   (AccelBlick.filterZeile): Klartext in der Modulfarbe, × als leiser Knopf,
   nie Fläche (Grundsatz 6). Beide Themen, nur Token. */
html.edel #page-deals .blick-tage,
html.edel #page-inbox .blick-tage,
html.edel #page-memory .blick-tage,
html.edel #page-publish .blick-tage {
  font-family: inherit;
  font-size: var(--fs-small);
  min-height: 30px;
  padding: 4px 12px;
  border-radius: 14px;
  border: 1px solid var(--glas-rand);
  background: var(--glas);
  color: var(--glas-text);
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
html.edel #page-deals .blick-tage[aria-pressed="true"],
html.edel #page-inbox .blick-tage[aria-pressed="true"],
html.edel #page-memory .blick-tage[aria-pressed="true"],
html.edel #page-publish .blick-tage[aria-pressed="true"],
html.edel #page-deals .blick-tage[aria-pressed="true"]:enabled:hover,
html.edel #page-inbox .blick-tage[aria-pressed="true"]:enabled:hover,
html.edel #page-memory .blick-tage[aria-pressed="true"]:enabled:hover,
html.edel #page-publish .blick-tage[aria-pressed="true"]:enabled:hover {
  background: color-mix(in srgb, var(--m) 18%, transparent);
  border-color: var(--m);
  box-shadow: 0 0 12px color-mix(in srgb, var(--m) 30%, transparent);
  color: var(--text-stark);
  font-weight: 700;
}
@media (hover: hover) {
  html.edel #page-deals .blick-tage:enabled:hover,
  html.edel #page-inbox .blick-tage:enabled:hover,
  html.edel #page-memory .blick-tage:enabled:hover,
  html.edel #page-publish .blick-tage:enabled:hover { border-color: var(--m); }
}
html.edel .blick-filter {
  display: flex; align-items: center; gap: 8px;
  margin: 8px 0;
  font-size: var(--fs-body);
  font-weight: 600;
  color: color-mix(in srgb, var(--m) 85%, var(--m-misch));
}
html.edel .blick-filter-text { min-width: 0; overflow-wrap: anywhere; }
html.edel #page-deals .blick-filter-weg,
html.edel #page-memory .blick-filter-weg,
html.edel #page-publish .blick-filter-weg {
  flex: 0 0 auto;
  min-height: 0;
  width: 26px; height: 26px;
  padding: 0;
  border: 1px solid var(--glas-rand);
  border-radius: 13px;
  background: transparent;
  box-shadow: none;
  color: var(--glas-text);
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: 1;
  cursor: pointer;
}
@media (hover: hover) {
  html.edel #page-deals .blick-filter-weg:hover,
  html.edel #page-memory .blick-filter-weg:hover,
  html.edel #page-publish .blick-filter-weg:hover { border-color: var(--m); color: var(--text-stark); }
}
html.edel .blick-filter-weg:focus-visible { outline: 2px solid var(--m); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  html.edel #page-deals .blick-tage, html.edel #page-inbox .blick-tage,
  html.edel #page-memory .blick-tage, html.edel #page-publish .blick-tage,
  html.edel .blick-filter-weg { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------- NS4.1 Datumsfeld (U16)
   EIN Datumsfeld im App-Stil (js/kern/datumsfeld.js, AccelDatumsfeld): der
   Rahmen .df sieht aus wie jedes Eingabefeld (4 px, --feld-grund, Fokus Rand
   + Schein in --m, Fehler rot), darin das Textfeld ohne eigenen Rahmen und
   der Kalender-Knopf (Symbol in --m). Der Kalender selbst ist das Glasfenster
   .dw-wahl (app.css „R2 Baustein 4“); schmal (≤ 600 px) ein Blatt von unten
   mit Griff über einer Abdunklung. Nur Token, beide Themen; keine Bewegung
   (das Blatt erscheint ohne Übergang). Vorrang-Muster (#nx-vorrang) gegen
   die Feldregel der Dialoge und die Knopf-Sammelregel der Modulseiten. */
html.edel .df {
  display: flex;
  align-items: center;
  gap: 2px;
  box-sizing: border-box;
  width: 100%;
  min-height: 38px;
  padding: 0 3px 0 0;
  border: 1px solid var(--glas-rand);
  border-radius: var(--r-feld);
  background: var(--feld-grund);
  color: var(--glas-text);
}
html.edel .df:focus-within {
  border-color: var(--m);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--m) var(--leucht-fokus), transparent);
}
html.edel .df.df-ungueltig,
html.edel input.feld-fehler + .df {
  border-color: var(--rot-nacht);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rot-nacht) 18%, transparent);
}
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .df .df-text {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: 7px 10px;
  border: 0;
  border-radius: var(--r-feld);
  background: transparent;
  box-shadow: none;
  outline: none;
  color: var(--glas-text);
  font: inherit;
  font-size: var(--fs-body);
  font-variant-numeric: tabular-nums;
}
html.edel .df .df-text::placeholder { color: var(--glas-leise); opacity: 1; }
html.edel .df .df-text:disabled { opacity: 0.6; }
html.edel .df .df-uhr-wert { color: var(--glas-text); font-size: var(--fs-body); white-space: nowrap; font-variant-numeric: tabular-nums; }
html.edel .df .df-uhr-wert[hidden] { display: none; }
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .df .df-knopf {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-feld);
  background: transparent;
  box-shadow: none;
  color: var(--m);
  cursor: pointer;
}
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .df .df-knopf:focus-visible { outline: 2px solid var(--m); outline-offset: 1px; }
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .df .df-knopf:disabled { opacity: 0.6; cursor: default; }
html.edel .df .df-knopf [data-icon] { display: inline-flex; }
html.edel .df .df-knopf svg { width: 16px; height: 16px; }
@media (hover: hover) {
  html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .df .df-knopf:enabled:hover {
    border-color: var(--m);
    background: color-mix(in srgb, var(--m) 14%, transparent);
  }
}
html.edel .df-fehler { margin: 4px 0 0; color: var(--rot-nacht); font-size: var(--fs-small); font-weight: 600; }
html.edel .df-fehler[hidden] { display: none; }
/* In Filterzeilen (Buchhaltung › Belege: Monat) so breit wie sein Inhalt und
   so hoch wie die Auswahlfelder daneben (34 px), damit die Beschriftungen auf
   einer Linie stehen. */
html.edel .cb-werkzeuge .df { width: 9.5em; min-height: 34px; }
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .cb-werkzeuge .df .df-text { padding-top: 5px; padding-bottom: 5px; }
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .cb-werkzeuge .df .df-knopf { width: 28px; height: 28px; }
/* Schmal: Blatt von unten über die volle Breite, mit Griff (Regel 6). */
html.edel .df-abdunkeln { position: fixed; inset: 0; z-index: 79; background: var(--abdunkeln-blatt); }
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .dw-wahl.df-blatt {
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  width: 100%;
  max-width: none;
  max-height: 90vh;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 4px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  border-bottom: 0;
  border-radius: var(--r-kachel) var(--r-kachel) 0 0;
}
html.edel .dw-wahl.df-blatt .dw-tag { height: 42px; }
html.edel .df-griff {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 24px;
  margin: 0 0 6px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: grab;
  touch-action: none;
}
html.edel .df-griff span { width: 40px; height: 4px; border-radius: 2px; background: var(--glas-leise); }
html.edel .df-griff:focus-visible { outline: 2px solid var(--m); outline-offset: -2px; border-radius: var(--r-feld); }
html.edel.df-blatt-offen { overscroll-behavior-y: none; }

/* ------------------------------------------------- NS4.1 S4 „Individuell“
   Von/Bis direkt in der Datumsleiste (js/kern/datumsleiste.js): statt der
   Angabe zwischen den Pfeilen zwei Datumsfelder (AccelDatumsfeld) mit leiser
   Beschriftung davor. Schmal (Container-Abfrage der Leiste, wie Regel 7)
   stehen Pfeile und Felder in einer eigenen Zeile über die volle Breite, die
   Beschriftung über dem Feld — kein waagerechtes Scrollen. */
html.edel .dl-angabe[hidden],
html.edel .dl-bereich[hidden] { display: none; }
html.edel .dl-bereich { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 0 4px; }
html.edel .dl-bfeld {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--glas-leise);
  font-size: var(--fs-small);
  font-weight: 600;
}
html.edel .dl-bfeld .df-rahmen { display: block; min-width: 0; }
html.edel .dl-bfeld .df { width: 11em; }
html.edel .dl-bfeld .df-fehler { max-width: 16em; white-space: normal; }
/* Kontrast (Messung im Belege-Lauf NS4.1, Stand vorher wie nachher): der
   heutige Tag im Kalender der Leiste, wenn er im gewählten Zeitraum liegt —
   --m auf der eigenen Tönung 18 % trug dunkel nur 4,42:1; die lesbarere
   Mischung wie --m-hell (85 % mit --m-misch, Tabellenkopf) trägt ≥ 4,5:1 in
   beiden Themen; --m-hell selbst setzt nicht jede Seite mit Leiste. */
html.edel .dl-kal-tag.heute.gewaehlt { color: color-mix(in srgb, var(--m) 85%, var(--m-misch)); }
@container datumsleiste (max-width: 560px) {
  html.edel .datumsleiste[data-dl-modus="bereich"] .dl-mitte { flex: 1 1 100%; }
  html.edel .datumsleiste[data-dl-modus="bereich"] .dl-kern { display: flex; flex: 1 1 100%; min-width: 0; }
  html.edel .dl-bereich { flex: 1 1 auto; gap: 6px; padding: 0; }
  html.edel .dl-bfeld { flex: 1 1 0; flex-direction: column; align-items: stretch; gap: 2px; }
  html.edel .dl-bfeld .df { width: 100%; }
  html.edel .dl-bfeld .df-fehler { max-width: none; }
}

/* ------------------------------------------------- NÜ5 Kachel anpassen (U36)
   Der Stift in der Kopfzeile der Kachel „Auf einen Blick“ (js/kern/blick.js)
   und das Feld „Kachel anpassen“ IN der Kachel. Beide Themen, nur Token.
     Stift   runder Glas-Knopf mit Symbol (Kopfzeile nur Symbole, Grundsatz
             11), offen mit Rand + Schein in --m wie ein aktiver Umschalt-Knopf;
             Seiten-IDs ausgeschrieben (Knopf-Sammelregel, bauteile §18 n).
     Feld    keine Tönung (R-L): oben und unten eine dünne Linie, drei
             Auswahlfelder nebeneinander (schmal untereinander), darunter der
             KI-Satz, eine Hinweis-Zeile (Fehler Rot nur bei Fehlern) und die
             Knöpfe — Übernehmen ist Hauptaktion (Glas, R-E, Klasse primary).
     Haupt   große Zahl in --fs-display (Zahl nur als Schrift, Grundsatz 6;
             Rot/Bernstein wie in der Spalte) bzw. großer Ring; Balken als
             schmale Säulen in --m, vergangene Tage 40 %, heute voll. */
html.edel #page-call .blick-stift-knopf,
html.edel #page-conbono .blick-stift-knopf,
html.edel #page-crew .blick-stift-knopf,
html.edel #page-deals .blick-stift-knopf,
html.edel #page-inbox .blick-stift-knopf,
html.edel #page-memory .blick-stift-knopf,
html.edel #page-publish .blick-stift-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; min-height: 30px;
  margin-right: 4px; padding: 0;
  border-radius: 15px;
  border: 1px solid var(--glas-rand);
  background: var(--glas);
  box-shadow: none;
  color: var(--glas-text);
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
html.edel #page-call .blick-stift-knopf[hidden],
html.edel #page-conbono .blick-stift-knopf[hidden],
html.edel #page-crew .blick-stift-knopf[hidden],
html.edel #page-deals .blick-stift-knopf[hidden],
html.edel #page-inbox .blick-stift-knopf[hidden],
html.edel #page-memory .blick-stift-knopf[hidden],
html.edel #page-publish .blick-stift-knopf[hidden] { display: none; }
html.edel #page-call .blick-stift-knopf[aria-expanded="true"],
html.edel #page-conbono .blick-stift-knopf[aria-expanded="true"],
html.edel #page-crew .blick-stift-knopf[aria-expanded="true"],
html.edel #page-deals .blick-stift-knopf[aria-expanded="true"],
html.edel #page-inbox .blick-stift-knopf[aria-expanded="true"],
html.edel #page-memory .blick-stift-knopf[aria-expanded="true"],
html.edel #page-publish .blick-stift-knopf[aria-expanded="true"] {
  background: color-mix(in srgb, var(--m) 18%, transparent);
  border-color: var(--m);
  box-shadow: 0 0 12px color-mix(in srgb, var(--m) 30%, transparent);
  color: var(--text-stark);
}
@media (hover: hover) {
  html.edel #page-call .blick-stift-knopf:hover,
  html.edel #page-conbono .blick-stift-knopf:hover,
  html.edel #page-crew .blick-stift-knopf:hover,
  html.edel #page-deals .blick-stift-knopf:hover,
  html.edel #page-inbox .blick-stift-knopf:hover,
  html.edel #page-memory .blick-stift-knopf:hover,
  html.edel #page-publish .blick-stift-knopf:hover { border-color: var(--m); color: var(--text-stark); }
}
/* Stift und Zeitraum-Knöpfe in EINER Reihe; schmal bricht die Gruppe der
   Zeitraum-Knöpfe in sich um, der Stift bleibt vorn. */
html.edel details.blick > summary .klapp-aktionen {
  display: inline-flex; flex-wrap: nowrap; align-items: flex-start; gap: 2px;
}
html.edel details.blick .blick-zeitraum { flex: 0 1 auto; min-width: 0; }
html.edel .blick-stift-knopf:focus-visible,
html.edel .blick-gross:focus-visible,
html.edel .blick-ring-gross-zeile:focus-visible { outline: 2px solid var(--m); outline-offset: 2px; }
html.edel .blick-stift[hidden] { display: none; }
html.edel .blick-stift {
  margin: 0 0 16px;
  padding: 0 0 16px;
  border-bottom: 0.5px solid var(--linie-haar);
}
html.edel .blick-stift-titel {
  margin: 0 0 10px;
  font-size: var(--fs-body);
  font-weight: 700;
  color: color-mix(in srgb, var(--m) 85%, var(--m-misch));
}
html.edel .blick-felder {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px 16px;
}
@media (max-width: 760px) {
  html.edel .blick-felder { grid-template-columns: minmax(0, 1fr); }
}
html.edel .blick-feld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
html.edel .blick-feld-name { font-size: var(--fs-small); font-weight: 600; color: var(--glas-leise); }
html.edel .blick-feld select,
html.edel .blick-feld input { width: 100%; min-width: 0; box-sizing: border-box; }
html.edel .blick-ki {
  display: flex; align-items: flex-end; gap: 12px;
  margin-top: 12px;
}
html.edel .blick-ki[hidden] { display: none; }
html.edel .blick-ki-feld { flex: 1 1 auto; }
html.edel .blick-ki > button { flex: 0 0 auto; }
@media (max-width: 600px) {
  html.edel .blick-ki { flex-direction: column; align-items: stretch; }
}
html.edel .blick-vorschlaege {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 10px;
}
html.edel .blick-vorschlaege[hidden] { display: none; }
html.edel .blick-hinweis {
  min-height: 1.4em;
  margin: 10px 0 0;
  font-size: var(--fs-small);
  color: var(--glas-leise);
}
html.edel .blick-hinweis:empty { min-height: 0; margin: 0; }
html.edel .blick-hinweis.fehler { color: var(--rot-nacht); }
html.edel .blick-stift-knoepfe {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px;
  margin-top: 12px;
}
/* Das Hauptfeld: große Zahl bzw. großer Ring (Diagramm und Ring wie NÜ3). */
html.edel .blick-diagramm[hidden],
html.edel .blick-haupt[hidden] { display: none; }
html.edel .blick-haupt { flex: 1 1 auto; min-width: 0; }
html.edel .blick-gross {
  display: flex; flex-direction: column; gap: 4px;
  padding: 6px 0;
  color: var(--glas-text);
  text-decoration: none;
}
html.edel .blick-gross-w {
  font-size: var(--fs-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--text-stark);
  overflow-wrap: anywhere;
}
html.edel .blick-gross.rot .blick-gross-w { color: var(--rot-nacht); }
html.edel .blick-gross.bernstein .blick-gross-w { color: var(--bernstein); }
html.edel .blick-gross-l { font-size: var(--fs-body); color: var(--glas-leise); overflow-wrap: anywhere; }
html.edel .blick-gross-u { white-space: nowrap; }
@media (hover: hover) {
  html.edel a.blick-gross:hover .blick-gross-l,
  html.edel a.blick-ring-gross-zeile:hover .blick-gross-l { color: var(--glas-text); }
}
html.edel .blick-ring-gross-zeile {
  display: flex; align-items: center; gap: 18px;
  padding: 6px 0;
  color: var(--glas-text);
  text-decoration: none;
}
html.edel .blick-ring-gross {
  position: relative; flex: 0 0 96px; width: 96px; height: 96px;
  display: inline-flex; align-items: center; justify-content: center;
}
html.edel .blick-ring-gross svg { position: absolute; inset: 0; transform: rotate(-90deg); }
html.edel .blick-ring-gross circle { fill: none; stroke-width: 6; }
html.edel .blick-ring-gross-zahl {
  position: relative;
  font-size: var(--fs-ui); font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--text-stark);
}
html.edel .blick-ring-gross-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* Die Zahl steht schon im Ring — neben dem Ring nur der Satz (Vorleseprogramme
   lesen die Zahl einmal: der Ring selbst ist aria-hidden). */
html.edel .blick-ring-gross-text .blick-gross-w {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: -1px;
}
/* Balken: dieselbe Reihe als schmale Säulen, an der Grundlinie verankert. */
html.edel .blick-saeule {
  position: absolute;
  bottom: 8%;
  max-width: 24px;
  min-height: 0;
  transform: translateX(-50%);
  border-radius: 4px 4px 0 0;
  background: var(--m);
  opacity: 0.4;
  transition: opacity 0.15s ease, box-shadow 0.15s ease;
}
html.edel .blick-saeule.heute,
html.edel .blick-saeule.gewaehlt { opacity: 1; }
html.edel .blick-saeule.gewaehlt { box-shadow: 0 0 10px color-mix(in srgb, var(--m) 45%, transparent); }
html.edel .blick-wert-saeule { transform: translate(-50%, -130%); padding-right: 0; }
@media (prefers-reduced-motion: reduce) {
  html.edel .blick-stift-knopf, html.edel .blick-saeule { animation: none !important; transition: none !important; }
}