/* ============================================================
   ELETINKER · ELETAG — Gemeinsames Site-Chrome
   Wird von allen Seiten geladen. Enthält Layout-Grundgerüst,
   Navbar (Nutzer-Pille), Hero, Stat-Zeile und Section-Head.
   Seiten-spezifisches CSS bleibt in der jeweiligen Seite.
   Voraussetzung: brand/tokens.css ist davor eingebunden.
   ============================================================ */

* { box-sizing: border-box; }
/* Seitlicher Seitenabstand (navbar.md §1 / seitenaufbau.md §1: 2rem) —
   EIN Wert für Navbar, Inhalt, Breadcrumb, Sektionen und Footer,
   damit alles bündig steht. */
:root { --page-x: 2rem; }
/* hidden muss jede display-Regel schlagen: Klassen mit eigenem display
   (z. B. .tool-card = flex) würden das browsereigene [hidden] sonst
   aushebeln und versteckte Elemente trotzdem anzeigen. */
[hidden] { display: none !important; }
/* Seitengerüst (seitenaufbau.md §1): Footer klebt bei wenig Inhalt unten,
   der Inhalt wächst dazwischen. */
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
/* Volle Browserbreite ohne Seitenränder — nur der 2-rem-Innenabstand (--page-x)
   bleibt, damit der Inhalt bündig mit Navbar/Breadcrumb-Text steht.
   padding-bottom = Freiraum zwischen letztem Abschnitt und dunklem Footer. */
.wrap { margin: 0; padding: 0 var(--page-x) var(--space-8); flex: 1 0 auto; }

/* Navbar-Tokens (--nav-*) liegen zentral in brand/tokens.css (komplettes Set,
   hell + dunkel) — siehe brand/navbar.md §9. Hier nicht mehr duplizieren. */
/* Einzige Ausnahme: Logo und Wortmarke stehen immer in der Logofarbe dieses
   Dienstes, im Dunkeln ein aufgehellter Ton (derselbe wie in logo-dunkel.png). */
:root { --nav-brand: #1AA8A8; }
html.theme-dark { --nav-brand: #62D0D0; }

/* Zentrales Site-Chrome: <et-header>/<et-footer> (site-chrome.js) rendern
   Navbar/Footer aus EINER Quelle. Der Sticky-Job wandert auf den Wrapper,
   da .site-header innerhalb des exakt gleich hohen Hosts nicht kleben kann. */
et-header, et-footer { display: block; }
et-header { position: sticky; top: 0; z-index: 20; }

/* ---------- Header / Navbar (64 px hoch, Logo 40 px — brand/navbar.md §1) ---------- */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; padding: 0 var(--page-x);   /* navbar.md §1: 0 2rem */
  background: var(--nav-bg);
  border-bottom: var(--bw-hair) solid var(--nav-border);
  box-shadow: 0 1px 3px rgba(10,15,31,0.05);
  position: sticky; top: 0; z-index: 20;
}
html.theme-dark .site-header {
  border-bottom-color: rgba(255,255,255,0.14);
  box-shadow: 0 6px 24px -10px rgba(0,0,0,0.7);
}
.site-header::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--nav-topline);
}
.brandmark { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: inherit; }   /* navbar.md §2 */
.brandmark:hover { text-decoration: none; }

/* ---------- Rechte Item-Gruppe: Logo links, ALLES andere rechtsbündig ----------
   (navbar.md §1: keine mittig zentrierten Menüpunkte; Gruppe via margin-left:auto) */
.nav-right { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; }   /* navbar.md §1: 0.25rem */
.nav-divider-v { width: 1px; height: 20px; background: var(--nav-divider); margin: 0 0.4rem; }   /* navbar.md §6 */

/* Menüpunkte (.nav-menu-btn-Look): ruhend muted, Hover neutrale Fläche,
   aktiv/offen Cobalt-Tint — Sentence-case, 0.875rem/500 (navbar.md §4). */
.site-nav { display: flex; align-items: center; gap: var(--space-1); }
.site-nav a {
  font-family: var(--font-body); font-size: 0.875rem; font-weight: 500;   /* navbar.md §4 */
  color: var(--nav-fg); text-decoration: none;
  padding: 0.45rem 0.9rem; border-radius: 0.5rem;   /* navbar.md §4: 0.5rem, nicht --radius-2 (4px) */
  transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
/* Kein Sonderstil für die aktive Seite (keine weiße/hervorgehobene Markierung). */
/* Hover (nur hover-fähige Geräte): volle Textfarbe + Cobalt-Tint-Fläche (navbar.md §4/§9).
   Die html.theme-dark-Variante ist nötig, um die spezifischere globale a:hover-Regel
   aus tokens.css zu schlagen — sonst wird der Text im Darkmode blau (brand-100). */
@media (hover: hover) {
  .site-nav a:hover,
  html.theme-dark .site-nav a:hover { color: var(--nav-fg-hover); background: var(--nav-hover-bg); }
}
/* ---------- Mobil-Navigation (navbar.md §8, Breakpoint 768 px) ----------
   Desktop-Nav weicht dem Hamburger; das Menü läuft als Vollbild-Panel
   unter der 64px hohen Kopfzeile. */
.nav-hamburger {
  display: none; width: 38px; height: 38px; flex: none;
  align-items: center; justify-content: center;
  background: transparent; color: var(--nav-fg-strong);
  border: var(--bw-hair) solid var(--nav-control-border); border-radius: 0.5rem;
  cursor: pointer;
}
.nav-hamburger svg { width: 20px; height: 20px; }
.nav-hamburger .ico-close { display: none; }
.nav-hamburger[aria-expanded="true"] { background: var(--nav-soft-bg); }
.nav-hamburger[aria-expanded="true"] .ico-menu { display: none; }
.nav-hamburger[aria-expanded="true"] .ico-close { display: block; }

.mobile-nav {
  position: fixed; top: 64px; left: 0; right: 0; bottom: 0; z-index: 49;
  background: var(--nav-panel-bg); backdrop-filter: blur(20px);
  border-top: var(--bw-hair) solid var(--nav-panel-border);
  overflow-y: auto;
  animation: navSlideDown var(--dur-2, 0.18s) var(--ease-out);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav-label {
  display: block; padding: var(--space-4) 1.25rem var(--space-2);
  font-family: var(--font-mono); font-size: var(--fs-12);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-muted);
}
.mobile-nav a {
  display: block; padding: 0.9rem 1.25rem;
  font-family: var(--font-body); font-size: 0.9rem; font-weight: 500;
  color: var(--nav-item-fg); text-decoration: none;
  border-bottom: var(--bw-hair) solid var(--nav-item-border);
}
.mobile-nav a:first-of-type { border-top: var(--bw-hair) solid var(--nav-item-border); }
.mobile-nav a:active { background: rgba(43,79,199,0.08); }
/* Konto-Zeilen (navbar.md §8 Punkt 5): gleiche Zeilen-Optik, Einstellungen mit
   Zahnrad-Icon, Abmelden in Rot; der Button braucht die a-Optik explizit. */
.mobile-nav .mobile-nav-konto {
  display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left;
  background: none; border: 0; border-bottom: var(--bw-hair) solid var(--nav-item-border);
  padding: 0.9rem 1.25rem; cursor: pointer;
  font-family: var(--font-body); font-size: 0.9rem; font-weight: 500;
  color: var(--nav-item-fg); text-decoration: none;
}
.mobile-nav .mobile-nav-konto svg { opacity: 0.85; flex: none; }
.mobile-nav .mobile-nav-konto:active { background: rgba(43,79,199,0.08); }
.mobile-nav .mobile-nav-logout,
html.theme-dark .mobile-nav .mobile-nav-logout { color: #f87171; }
.mobile-nav .mobile-nav-logout:active { background: rgba(239,68,68,0.06); }
@keyframes navSlideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 768px){
  .site-nav, .nav-divider-v { display: none; }
  .nav-right { gap: var(--space-3); }              /* navbar.md §8: 0.75rem */
  .nav-hamburger { display: inline-flex; }
  .brandmark span { display: none; }                    /* nur Logo (navbar.md §8) */
  /* Nutzer-Pille wird zum blanken Avatar-Kreis 30 px (navbar.md §8).
     .site-header-Präfix nötig: die Basis-Regeln stehen WEITER UNTEN in der
     Datei und würden diese Mobil-Regeln bei gleicher Spezifität überschreiben. */
  .site-header .user-menu { margin-left: 0; }
  .site-header .user-pill { padding: 0; border: 0; background: none; }
  .site-header .user-pill[aria-expanded="true"] { background: none; }
  .site-header .user-avatar { width: 30px; height: 30px; font-size: 0.75rem; }
  .site-header .user-name, .site-header .user-chev { display: none; }
}
.brandmark img { width: 40px; height: 40px; }   /* navbar.md §2 */
.brandmark img.logo-dark { display: none; }
html.theme-dark .brandmark img.logo-light { display: none; }
html.theme-dark .brandmark img.logo-dark { display: block; }
/* Navbar-Wortmarke: Nerko One (Script), wie auf EletinkerLab */
.brandmark span {
  font-family: var(--font-script);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1;
  color: var(--nav-brand);
}

/* ---------- Nutzer-Pille + Nutzer-Menü (navbar.md §7) ----------
   Avatar-Kreis 26 px + Name + Chevron; das einzige voll gerundete Element
   der Leiste. KEIN eigener Hover — nur Offen-Zustand (§9). */
.user-menu { position: relative; margin-left: 0.5rem; }
.user-pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.35rem 0.7rem 0.35rem 0.45rem;
  background: var(--nav-control-bg);
  border: var(--bw-hair) solid var(--nav-control-border); border-radius: 999px;
  cursor: pointer; font-family: var(--font-body);
  transition: background var(--dur-1) var(--ease-out);
}
.user-pill[aria-expanded="true"] { background: var(--nav-control-bg-hover); }
.user-avatar {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(43,79,199,0.25); border: 1px solid rgba(107,134,218,0.35);
  font-size: 0.72rem; font-weight: 700; color: #6A86DA;
}
.user-name { font-size: 0.875rem; font-weight: 500; color: var(--nav-fg-strong); }
.user-chev { flex: none; opacity: 0.5; color: var(--nav-fg-strong); transition: transform var(--dur-1) var(--ease-out); }
.user-pill[aria-expanded="true"] .user-chev { transform: rotate(180deg); }
/* Dropdown: Panel-Look (navbar.md §5/§7), 0.5rem unter der Pille, rechtsbündig */
.user-panel {
  position: absolute; top: calc(100% + 0.5rem); right: 0; min-width: 180px;
  background: var(--nav-panel-bg); border: var(--bw-hair) solid var(--nav-panel-border);
  border-radius: 0.75rem; box-shadow: var(--nav-panel-shadow);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  padding: 0.3rem 0; z-index: 30; overflow: hidden;
}
.user-panel[hidden] { display: none; }
.user-role {
  padding: 0.5rem 0.9rem 0.3rem; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--nav-panel-label);
}
.user-item {
  display: flex; align-items: center; gap: 0.5rem; width: 100%;
  padding: 0.65rem 0.9rem; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-body); font-size: 0.875rem; font-weight: 500;
  color: var(--nav-item-fg); text-decoration: none; transition: background 0.15s;
}
/* auch die globale a:hover-Farbregel aus tokens.css neutralisieren */
.user-item:hover, html.theme-dark .user-item:hover { background: var(--nav-item-hover-bg); color: var(--nav-item-fg); text-decoration: none; }
.user-item svg { opacity: 0.85; flex: none; }
.user-arrow { opacity: 0.8; }
.user-logout { border-top: var(--bw-hair) solid var(--nav-item-border); color: #f87171; }
.user-logout:hover, html.theme-dark .user-logout:hover { background: rgba(239,68,68,0.06); color: #f87171; }

/* Segmented Control (Tab-Bar-Standard) — Bauart wie .tool-tabbar/.tool-tab auf
   EletinkerLab: heller ink-200-Rahmen statt schwarzer Hairline, Flaechenfarbe
   statt transparent, Fliesstext-Schrift in Versalien statt Mono. */
.seg { display: flex; border: var(--bw-hair) solid var(--ink-200); border-radius: var(--radius-3); overflow: hidden; }
.seg-btn {
  flex: 1; font-size: 0.82rem; font-weight: 500;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  padding: 0.75rem 0.5rem; border: 0; border-right: var(--bw-hair) solid var(--ink-200);
  background: var(--bg-surface); color: var(--text-muted); cursor: pointer;
  transition: all 0.15s;
}
.seg-btn:last-child { border-right: none; }
.seg-btn.is-active { background: var(--brand-500); color: #fff; font-weight: 700; }
.seg-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Der Umschalter steht als erstes im Editor und trägt den Rest des
   Formulars: er entscheidet, welche Felder überhaupt sichtbar sind. Er ist
   ein eigenes Flex-Kind von .editor, nicht Teil von .editor-koerper, damit
   der Bildlauf des Körpers unter ihm beginnt und ihn nicht mehr über die
   obere Kante schieben kann. flex: 0 0 auto, damit er bei knappem Platz
   nicht gestaucht wird. */
.editor-art { flex: 0 0 auto; margin-bottom: var(--space-2); }
/* Hinweistext, wenn der Umschalter gesperrt ist (Datensatz einer Reihe):
   neutral statt der roten .hinweis-Farbe, es ist kein Fehler. */
.editor-art-hinweis { flex: 0 0 auto; margin: 0 0 var(--space-4); color: var(--text-muted); font-size: var(--fs-14); }
/* Der Hinweis erscheint nur bei einem Datensatz einer Reihe. Außerhalb des
   Bildlaufs würde sein Erscheinen den Dialog um seine Zeile wachsen lassen,
   damit wäre ein Datensatz einer Reihe höher als einer ohne und die feste
   Höhe gälte nicht mehr für alle Fassungen. Sein Platz bleibt deshalb immer
   stehen, nur die Sichtbarkeit fällt weg. Das ist derselbe Weg wie beim
   Erledigt-Knopf im Fuß, deshalb auch dieselbe Klasse statt des
   hidden-Attributs: hidden trägt die globale Regel display: none !important
   und ließe den Platz einfallen. visibility: hidden nimmt den Hinweis
   zugleich aus der Vorlesereihenfolge. */
.editor-art-hinweis.ist-leerstelle { visibility: hidden; }

/* ---------- Hero (Startseite/Landing) — Cobalt-Blueprint, zentriert (seitenaufbau.md §2) ----------
   Nur die Startseite nutzt den vollen Hero; Unterseiten den schlanken .page-head. */
.hero {
  position: relative; overflow: hidden;
  /* seitenaufbau.md §2: 82vh — dort überdeckt aber die FIXE Navbar die oberen
     64px des Heros. Unser Header ist sticky (im Fluss), der Hero beginnt
     darunter; für die gleiche sichtbare Blaufläche also 64px abziehen. */
  min-height: calc(82vh - 64px); padding: 5rem var(--page-x);
  border-bottom: 2px solid #0A0F1F;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.hero::after {   /* Tiefen-Overlay */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 90% 60% at 50% 110%, rgba(10,15,31,0.40) 0%, transparent 70%);
}
.hero .inner {
  position: relative; z-index: 1; max-width: 680px; margin: 0 auto; padding: 0;
  display: flex; flex-direction: column; align-items: center;
}
.hero-logo { position: relative; width: 180px; height: 180px; margin-bottom: var(--space-5); }   /* seitenaufbau.md §2: 180px */
.hero-logo img { position: relative; z-index: 1; width: 100%; height: 100%; }
.hero-logo::before {   /* pulsierender Glow hinter dem Logo (Kreis 220px, glowPulse) */
  content: ""; position: absolute; inset: -20px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.22) 0%, transparent 70%); filter: blur(28px);
  animation: glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1.15); }
}
.hero h1 {
  font-family: var(--font-script); font-weight: 400;
  font-size: clamp(var(--fs-64), 10vw, var(--fs-120));
  line-height: 0.98; color: #fff; margin: 0 0 1.5rem; letter-spacing: 0.005em;   /* seitenaufbau.md §2 */
}
.hero .eyebrow { color: #fff; opacity: 0.85; }
.hero p.lede {
  font-family: var(--font-body); font-size: var(--fs-18); max-width: 52ch;
  color: rgba(255,255,255,0.9); margin: 0 auto;
}
/* Typewriter-Zeile (seitenaufbau.md §2): rotierende Phrasen, kein Springen dank min-height */
.hero-type {
  font-family: var(--font-body); font-size: clamp(1.05rem, 2.5vw, 1.3rem);
  color: rgba(255,255,255,0.82); max-width: 46ch; min-height: 2.2em; margin: 0 auto;
}
.hero-cursor {
  display: inline-block; width: 2px; height: 1em; margin-left: 2px;
  vertical-align: -0.12em; background: rgba(255,255,255,0.75);
  animation: heroBlink 0.9s step-end infinite;
}
@keyframes heroBlink { 50% { opacity: 0; } }

/* ---------- Stat row ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bw-hair);
  background: var(--border); border: var(--bw-hair) solid var(--border);
  margin: var(--space-8) 0; }
.stat { background: var(--bg-surface); padding: var(--space-5); }
/* Fluid: 48px reißen „100 %“ in einer halben Handybreite in drei Zeilen. */
.stat .num { font-family: var(--font-display); font-weight: 900; line-height: 1;
  font-size: clamp(var(--fs-24), 6vw, var(--fs-48)); }
.stat .lbl { font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--text-muted); margin-top: var(--space-2); }
@media (max-width: 800px){ .stats { grid-template-columns: repeat(2,1fr); } }
/* Steht die Kennzahlenreihe in einem Abschnitt, liefert section.block die
   Abstaende bereits — sonst doppelt sich der Rand. */
section.block > .stats { margin: 0; }

/* ---------- Section head (brand-konform, vgl. .ds-section-head aus globals.css) ----------
   Kanonisches Muster: Eyebrow (Mono-Caps) OBEN · H2 (Archivo 800) · optionale .lede ·
   verlaufende Haarlinie unten (ink → transparent). Wiederverwendbar auf allen Seiten.
   Basisstile für .eyebrow/.lede liefert brand/tokens.css.
   Markup:
     <div class="sec-head">
       <span class="eyebrow"><span class="num">01</span><span class="sep">—</span> Label</span>
       <h2>Titel</h2>
       <p class="lede">Optionaler Beschreibungstext …</p>
     </div>                                                                            */
/* Sektions-Bänder (seitenaufbau.md §1): Abschnitte laufen auf volle Breite
   (Negativ-Margin gegen das .wrap-Padding) und wechseln den Hintergrund
   var(--bg) ⇄ var(--brand-50) ab, jeweils mit Haarlinie oben. Beide Tokens
   sind theme-aware — funktioniert in Hell und Dunkel. */
section.block {
  margin: 0 calc(-1 * var(--page-x));
  padding: var(--space-7) var(--page-x);
  background: var(--bg);
  border-top: var(--bw-hair) solid var(--border);
}
section.block:nth-of-type(even) { background: var(--brand-50); }
/* Erster Abschnitt: keine Haarlinie — der harte Strich des .page-head/.sec-head
   darüber reicht, sonst entstehen zwei Linien direkt untereinander. */
section.block:first-of-type { border-top: 0; }
.sec-head { margin: 0 0 var(--space-6); }
.sec-head .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: var(--space-3); }
.sec-head .eyebrow .num { color: var(--ink-500); }
.sec-head .eyebrow .sep { color: var(--ink-300); }
.sec-head h2 { font-size: var(--fs-38); }
.sec-head .lede { margin-top: var(--space-3); }
/* Abschnittskopf mit einer Aktion rechts. Der Knopf steht auf Hoehe der
   Beschreibung, nicht der Ueberschrift, damit die Typo-Achse ruhig bleibt.
   Muster wie in EletinkerLab: tool-btn-primary tool-btn-sm im Abschnittskopf. */
.sec-head-aktion { display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap; }
.sec-head-aktion > div { flex: 1 1 320px; min-width: 0; }
.sec-head-aktion > .tool-btn { flex: 0 0 auto; }
.sec-head::after {
  content: ""; display: block; margin-top: var(--space-4);
  border-bottom: var(--bw-rule) solid var(--text);   /* harter Strich, theme-aware (hell=ink-900, dunkel=hell) */
}
.lede-block { max-width: 70ch; color: var(--text-muted); font-size: var(--fs-18); margin-bottom: var(--space-6); }

/* ---------- Breadcrumb (Unterseiten-Navigation, .tool-breadcrumb — seitenaufbau.md §9) ----------
   Volle-Breite-Leiste OHNE Seitenränder: steht im Markup außerhalb von .wrap,
   sticky unter der 64-px-Navbar, eigener Hintergrund (Seitenfarbe, 97 %) + Blur
   (erlaubte Sticky-Ausnahme), Haarlinie unten. Letzter Eintrag in --primary. */
.breadcrumb {
  position: sticky; top: 64px; z-index: 15;
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
  font-family: var(--font-body); font-size: 0.85rem;
  color: var(--text-muted);
  padding: 0.6rem var(--page-x); margin-bottom: var(--space-5);
  background: rgba(250,248,243,0.97);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: var(--bw-hair) solid var(--ink-200);
}
html.theme-dark .breadcrumb { background: rgba(10,15,31,0.97); }
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
/* Kein Hover-Effekt in der Pfadangabe — neutralisiert auch die globale
   a:hover-Farbregel aus tokens.css (deren theme-dark-Variante ist spezifischer). */
.breadcrumb a:hover, html.theme-dark .breadcrumb a:hover { color: var(--text-muted); text-decoration: none; }
.breadcrumb .sep { color: var(--ink-300); }
.breadcrumb .current { color: var(--primary); }

/* ---------- Unterseiten-Kopf (CatHero) ----------
   Seitentitel OHNE den vollen Blueprint-Hero — Eyebrow + H1 (Archivo, nicht Script)
   + optionale Lede + harter Strich. Nur die Startseite nutzt den vollen .hero. */
.page-head { margin: var(--space-4) 0 var(--space-6); }
/* Beschreibungen laufen über die volle Seitenbreite (62ch-Limit aus tokens.css aufgehoben) */
.page-head .lede, .sec-head .lede { max-width: none; }
.page-head .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: var(--space-3); }
.page-head .eyebrow .num { color: var(--ink-500); }
.page-head .eyebrow .sep { color: var(--ink-300); }
.page-head h1 { font-family: var(--font-display); font-weight: 800;
  font-size: clamp(var(--fs-38), 5vw, var(--fs-64)); letter-spacing: var(--tracking-tight); }
.page-head .lede { margin-top: var(--space-4); }
.page-head::after {
  content: ""; display: block; margin-top: var(--space-5);
  border-bottom: var(--bw-rule) solid var(--text);
}

/* ---------- Navigations-Karten (Startseite: Einstieg in die Bereiche) ----------
   .glass-card-Bauart (kacheln.md §2): hell/fast flach ruhend, harter Blueprint-
   Offset bei Hover. */
.nav-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-5); }
.nav-card {
  display: flex; flex-direction: column; gap: var(--space-2); position: relative;
  border: var(--bw-hair) solid var(--ink-200); border-radius: var(--radius-3);
  box-shadow: 0 1px 0 0 rgba(10,15,31,0.05); background: var(--bg-surface); padding: var(--space-5);
  text-decoration: none; color: var(--text);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.nav-card:hover { transform: translateY(-2px); border-color: var(--ink-900); box-shadow: 0 3px 0 0 var(--ink-900); }
.nav-card:focus-visible { outline: var(--bw-bold) solid var(--focus-ring); outline-offset: 3px; }
.nav-card .k { font-family: var(--font-mono); font-size: var(--fs-12); font-weight: 600;
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--primary);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.nav-card h3 { font-size: var(--fs-24); }
.nav-card p { font-size: var(--fs-14); color: var(--text-muted); line-height: var(--lh-normal); }
/* CTA in Spark-Orange (kacheln.md §3 „Öffnen →“) */
.nav-card .go { margin-top: var(--space-2); font-family: var(--font-mono); font-size: var(--fs-12);
  font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--spark-500);
  display: inline-flex; align-items: center; gap: 7px; }
.nav-card.is-soon { opacity: 0.92; cursor: default; }
/* Nicht klickbar → trotzdem ein (weicherer, grauer) Hover-Offset statt Schwarz */
.nav-card.is-soon:hover { transform: translateY(-2px); border-color: var(--ink-400); box-shadow: 0 3px 0 0 var(--ink-400); }
.nav-card.is-soon .go { color: var(--text-muted); }   /* „In Arbeit“ ist keine CTA */
.badge-soon { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600;
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted);
  border: var(--bw-hair) solid var(--border); border-radius: var(--radius-1); padding: 1px 6px; }

/* ---------- Panel (umrandeter Inhalts-Block) + Schritt-Liste ----------
   Ruhiges Inhalts-Panel im glass-card-Ruhezustand (hell, fast flach). */
.panel { border: var(--bw-hair) solid var(--ink-200); border-radius: var(--radius-3);
  box-shadow: 0 1px 0 0 rgba(10,15,31,0.05); background: var(--bg-surface); padding: var(--space-6);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
/* nicht klickbar → grauer ink-400-Offset (klickbare Kacheln: ink-900) */
.panel:hover { transform: translateY(-2px); border-color: var(--ink-400); box-shadow: 0 3px 0 0 var(--ink-400); }
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-5); }
.steps li { position: relative; padding-left: 3.25rem; }
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0; width: 2.1rem; height: 2.1rem;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-14);
  color: #fff; background: var(--brand-500); border-radius: var(--radius-2);
}
.steps li h4 { font-size: var(--fs-18); margin-bottom: var(--space-2); }
.steps li p { color: var(--text-muted); font-size: var(--fs-14); line-height: var(--lh-relaxed); }

/* ---------- Erfassungs-UI: Buttons, Formulare, Tabellen, Hinweise ----------
   Gemeinsame Bausteine der Erfassungs-Seiten (Spielerliste, Spiel, Statistik). */

/* Tool-Karten (Tool-Seiten-Muster, Regeln aus globals.css):
   kompakte Inhalts-Boxen statt großer Sektions-Bänder. .glass-card-Basis
   (ruhend hell/fast flach) + Mono-Caps-Titel mit Cobalt-Balken.
   Hover-Regel (siehe kacheln.md): klickbar = harter ink-900-Offset,
   NICHT klickbar (wie diese Karten) = derselbe Offset in Grau (ink-400). */
.tool-card {
  background: var(--bg-surface);
  border: var(--bw-hair) solid var(--ink-200);
  box-shadow: 0 1px 0 0 rgba(10, 15, 31, 0.05);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  border-radius: 6px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.tool-card:hover { border-color: var(--ink-400); transform: translateY(-2px); box-shadow: 0 3px 0 0 var(--ink-400); }
@media (hover: none) { .tool-card:hover { transform: none; } }
html.theme-dark .tool-card { box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.35); }
/* Dark braucht eine EIGENE Hover-Regel (kacheln.md): die Dark-Ruheregel oben
   ist spezifischer als .tool-card:hover und würde den Offset-Schatten schlucken. */
html.theme-dark .tool-card:hover { border-color: var(--ink-400); box-shadow: 0 3px 0 0 var(--ink-400); }
.tool-card-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink-900);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.2;
}
.tool-card-title::before {
  content: "";
  flex: 0 0 auto;
  width: 3px;
  height: 0.95em;
  background: var(--brand-500);
  border-radius: 1px;
}
/* Zusatz-Info rechts im Kartentitel (z. B. Anzahl) */
.tool-card-title .meta {
  margin-left: auto;
  font-weight: 500;
  letter-spacing: var(--tracking-normal);
  text-transform: none;
  color: var(--text-muted);
  font-size: 0.8rem;
}
/* Mobil: die Zusatz-Info rutscht unter den Titel statt sich daneben zu quetschen */
@media (max-width: 640px){
  .tool-card-title { flex-wrap: wrap; }
  .tool-card-title .meta { flex-basis: 100%; margin-left: 0; padding-left: calc(3px + 0.55rem); }
}
/* Karten-Layouts */
.tool-stack { display: grid; gap: 1.5rem; }
.tool-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 900px) { .tool-grid-2col { grid-template-columns: 1fr; } }

/* Buttons: verbindliches Button-System des Design-Systems — Regeln wörtlich
   aus brand/globals.css übernommen (dort Quelle der Wahrheit):
     .tool-btn          neutral/tertiär (Zurück, Ablehnen, Import)
     .tool-btn-primary  Haupt-CTA, Cobalt gefüllt + harter ink-900-Offset
     .tool-btn-soft     sekundär mit Cobalt-Bezug (Laden, Kopieren, Export)
     .tool-reset-btn    großer Danger (Zurücksetzen/aufheben)
     .tool-danger-btn   Kontext-Danger (einzelne Einträge löschen)
     .tool-btn-sm       Größen-Modifier, kombinierbar
     .tool-link-btn     rahmenloser Inline-Link-Button
   Einzige Ergänzung: text-decoration:none, damit auch <a> als Button taugt. */
.tool-btn,
.tool-btn-primary,
.tool-btn-soft {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.1rem;
  border-radius: 4px;
  border: 1px solid transparent;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  font-family: var(--font-body);
  text-decoration: none;
}
.tool-btn:hover, .tool-btn-primary:hover, .tool-btn-soft:hover { text-decoration: none; }
/* <a> als Button („Öffnen", „Zurück zur Liste"): die globale a:hover-Farbregel
   aus tokens.css neutralisieren — die html.theme-dark-Variante dort ist
   spezifischer als .tool-btn:hover und würde den Text blau färben. */
.tool-btn:hover,           html.theme-dark .tool-btn:hover           { color: var(--text); }
.tool-btn-soft:hover,      html.theme-dark .tool-btn-soft:hover      { color: var(--primary); }
.tool-btn-primary:hover,   html.theme-dark .tool-btn-primary:hover   { color: #fff; }

/* Hover einheitlich (globals.css, Export 2026-07-12): ink-900-Rand +
   harter Offset-Schatten — kein Farbtint, kein Anheben. */

/* Primär gefüllt (Cobalt) — Haupt-CTA */
.tool-btn-primary {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #fff;
  font-weight: 700;
}
.tool-btn-primary:hover:not(:disabled) { border-color: var(--ink-900); box-shadow: 0 3px 0 0 var(--ink-900); }
.tool-btn-primary:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 0 var(--ink-900); }

/* Soft-Akzent (hellblau) — sekundäre Aktion mit Cobalt-Bezug */
.tool-btn-soft {
  background: var(--brand-50);
  border-color: var(--brand-100);
  color: var(--primary);
}
.tool-btn-soft:hover:not(:disabled) { border-color: var(--ink-900); box-shadow: 0 3px 0 0 var(--ink-900); }

/* Neutral (Ghost) — tertiäre Aktion */
.tool-btn {
  background: var(--bg-surface);
  border-color: var(--border);
  color: var(--text);
}
.tool-btn:hover:not(:disabled) { border-color: var(--ink-900); box-shadow: 0 3px 0 0 var(--ink-900); }

.tool-btn:disabled, .tool-btn-primary:disabled, .tool-btn-soft:disabled { opacity: 0.45; cursor: not-allowed; }

/* Großer Danger — dezenter roter Look.
   display/line-height ergänzt, damit er exakt gleich hoch ist wie die
   .tool-btn-Familie (gleiche Padding-/Font-Werte, aber andere Basis). */
.tool-reset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  padding: 0.65rem 1.1rem;
  border-radius: 4px;
  border: 1px solid rgba(220, 38, 38, 0.45);
  background: rgba(220, 38, 38, 0.10);
  color: #dc2626;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  font-family: var(--font-body);
}
.tool-reset-btn:hover:not(:disabled) { border-color: var(--ink-900); box-shadow: 0 3px 0 0 var(--ink-900); }
.tool-reset-btn:disabled { opacity: 0.45; cursor: not-allowed; }
html.theme-dark .tool-reset-btn { color: #FCA5A5; }   /* Rot auch auf Dunkel lesbar */

/* Kontext-Danger (Rot) — einzelne Einträge löschen/entfernen */
.tool-danger-btn {
  padding: 0.4rem 0.9rem;
  border-radius: 4px;
  border: 1px solid rgba(248, 113, 113, 0.25);
  background: rgba(248, 113, 113, 0.06);
  color: #f87171;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  font-family: var(--font-body);
}
.tool-danger-btn:hover:not(:disabled) { border-color: var(--ink-900); box-shadow: 0 3px 0 0 var(--ink-900); }
.tool-danger-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Kontext-OK (Grün) — positive Einzel-Aktion (z. B. Leben +1);
   analog zu .tool-warn-btn/.tool-danger-btn aus globals.css ergänzt */
.tool-ok-btn {
  padding: 0.4rem 0.9rem;
  border-radius: 4px;
  border: 1px solid rgba(34, 197, 94, 0.30);
  background: rgba(34, 197, 94, 0.08);
  color: var(--success-500);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  font-family: var(--font-body);
}
.tool-ok-btn:hover:not(:disabled) { border-color: var(--ink-900); box-shadow: 0 3px 0 0 var(--ink-900); }
.tool-ok-btn:disabled { opacity: 0.5; cursor: not-allowed; }
html.theme-dark .tool-ok-btn { color: var(--note-ok-text); }

/* Größen-Modifier für kompakte Buttons */
.tool-btn-sm { padding: 0.35rem 0.8rem; font-size: 0.8rem; border-radius: 4px; }

/* Inline-Link-Button (rahmenlos) */
.tool-link-btn {
  background: none; border: none; padding: 0;
  font-size: 0.78rem; font-weight: 500; color: var(--text-muted);
  cursor: pointer; transition: color 0.2s; font-family: var(--font-body);
}
.tool-link-btn:hover:not(:disabled) { color: var(--primary); }
.tool-link-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* Formularfelder */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-family: var(--font-mono); font-size: var(--fs-12); font-weight: 600;
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted);
}
.field input[type="text"], .field input[type="password"] {
  font-family: var(--font-body); font-size: var(--fs-16); color: var(--text);
  background: var(--bg-surface); border: var(--bw-hair) solid var(--ink-300);
  border-radius: var(--radius-2); padding: 10px 12px; min-width: 0;
}
.field input:focus-visible { outline: var(--bw-bold) solid var(--focus-ring); outline-offset: 2px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); }

/* Auswahl-Chips (z. B. Spieler fürs neue Spiel) */
.check-grid { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.check-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-14); color: var(--text); cursor: pointer;
  background: var(--bg-surface); border: var(--bw-hair) solid var(--ink-300);
  border-radius: var(--radius-2); padding: 8px 12px;
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.check-chip:has(input:checked) {
  border-color: var(--brand-500); box-shadow: inset 0 0 0 1px var(--brand-500);
  background: var(--bg-surface-hover);
}
.check-chip input { accent-color: var(--brand-500); }

/* Daten-Tabellen (Kopf = Section-Head-Strich, Zeilen = Haarlinien) */
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-14); }
.data-table th {
  font-family: var(--font-mono); font-size: var(--fs-12); font-weight: 600;
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted);
  text-align: left; padding: 10px 12px; white-space: nowrap;
  border-bottom: var(--bw-rule) solid var(--text);
}
.data-table td { padding: 10px 12px; border-bottom: var(--bw-hair) solid var(--border); vertical-align: middle; }
.data-table tbody tr:hover { background: var(--bg-surface-hover); }
.data-table td.num, .data-table th.num { font-family: var(--font-mono); text-align: right; }

/* Status-Badges + Hinweis-Boxen */
.badge {
  display: inline-block; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  border: var(--bw-hair) solid var(--border); border-radius: var(--radius-1);
  padding: 2px 8px; color: var(--text-muted); white-space: nowrap;
}
.badge-open { color: var(--brand-500); border-color: var(--brand-300); }
.badge-done { color: var(--success-500); border-color: var(--success-500); }
/* Dark: brand-500/success-500 haben keine Dark-Variante in den Tokens —
   auf helle, lesbare Töne ausweichen (primary bzw. note-ok). */
html.theme-dark .badge-open { color: var(--primary); }
html.theme-dark .badge-done { color: var(--note-ok-text); border-color: var(--note-ok-border); }
.note {
  border: var(--bw-hair) solid var(--note-warn-border); background: var(--note-warn-bg);
  color: var(--note-warn-text); border-radius: var(--radius-2);
  padding: var(--space-4) var(--space-5); font-size: var(--fs-14); line-height: var(--lh-normal);
}
.note-ok { border-color: var(--note-ok-border); background: var(--note-ok-bg); color: var(--note-ok-text); }
.note-error { border-color: var(--note-error-border); background: var(--note-error-bg); color: var(--note-error-text); }

/* ---------- Confirm-Dialog (overlays.md §3) ----------
   Ersetzt window.confirm komplett — aufgerufen über etConfirm() aus app.js.
   Overlays sind die dokumentierte Ausnahme vom flachen Blueprint-Register:
   weicher Schatten, Radius 12 px. */
.confirm-overlay {
  position: fixed; inset: 0; z-index: 2147483000;
  background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-5);
  animation: confirm-overlay-in 0.16s ease;
}
.confirm-box {
  background: var(--bg-surface); border: var(--bw-hair) solid var(--border);
  border-radius: 12px; padding: 1.5rem;
  width: 100%; max-width: min(430px, 94vw);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
  animation: confirm-box-in 0.18s ease;
}
.confirm-kopf { display: flex; gap: 0.9rem; align-items: flex-start; }
.confirm-ico {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--primary);
}
.confirm-box.is-danger .confirm-ico {
  background: rgba(220, 38, 38, 0.10); border-color: rgba(220, 38, 38, 0.25); color: #dc2626;
}
html.theme-dark .confirm-box.is-danger .confirm-ico { color: #FCA5A5; }
.confirm-titel { font-size: 1.1rem; font-weight: 700; color: var(--text); margin: 0 0 0.35rem; }
.confirm-text { font-size: 0.92rem; line-height: 1.55; color: var(--text-muted); white-space: pre-line; }
.confirm-btns { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1.5rem; }
@keyframes confirm-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes confirm-box-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Footer (immer dunkel, modusunabhängig — seitenaufbau.md §8) ----------
   Muss AUSSERHALB von .wrap stehen (volle Breite); Inhalt via .footer-inner zentriert. */
footer { background: #0A0F1F; border-top: var(--bw-hair) solid rgba(255,255,255,0.08);
  margin-top: 0; padding: var(--space-7) var(--page-x); }   /* Sektions-Bänder laufen direkt in den Footer */
.footer-inner { max-width: 1280px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }
footer p { font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(255,255,255,0.55); max-width: 74ch; line-height: var(--lh-relaxed); }
footer p a { color: rgba(255,255,255,0.75); }
footer p a:hover { color: #fff; }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); }
.footer-nav a {
  font-family: var(--font-mono); font-size: var(--fs-12); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.7); text-decoration: none;
  transition: color var(--dur-1) var(--ease-out);
}
.footer-nav a:hover { color: #fff; }

/* ============================================================
   Diagramme (js/diagramm.js) — Farben aus den Tokens,
   dadurch automatisch theme-aware
   ============================================================ */
.dia { position: relative; }
.dia-grid { stroke: var(--border); stroke-width: 1; }
.dia-line { stroke: var(--brand-500); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.theme-dark .dia-line { stroke: var(--brand-300, #7c9bff); }
.dia-area { fill: var(--brand-500); opacity: 0.07; }
.dia-punkt { fill: var(--spark-500); }
.dia-fokus { stroke: var(--ink-400); stroke-width: 1; stroke-dasharray: 3 3; }
.dia-tick { fill: var(--text-muted); font-family: var(--font-mono); font-size: var(--fs-12); }
.dia-tip {
  position: absolute; top: 6px; pointer-events: none; white-space: nowrap;
  font-family: var(--font-mono); font-size: var(--fs-12); font-variant-numeric: tabular-nums;
  color: var(--text); background: var(--bg-surface); border: var(--bw-hair) solid var(--border);
  border-radius: var(--radius-2); padding: 4px 8px; box-shadow: 0 1px 0 0 rgba(10,15,31,0.05);
}
.dia-leer { color: var(--text-muted); font-size: var(--fs-14); padding: var(--space-5) 0; }

/* ============================================================
   Navbar-Dropdown (js/eletag.js): ein Menüpunkt „Ansicht", im Panel
   darunter die einzelnen Geräte. Button im .site-nav-a-Look,
   Panel wie die Navbar-Panels (navbar.md §4/§7).
   ============================================================ */
.nav-dd { position: relative; }
.nav-dd-btn {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  background: transparent; border: 0;
  font-family: var(--font-body); font-size: 0.875rem; font-weight: 500;   /* navbar.md §4 */
  color: var(--nav-fg); padding: 0.45rem 0.9rem; border-radius: 0.5rem;
  transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
@media (hover: hover) {
  .nav-dd-btn:hover { color: var(--nav-fg-hover); background: var(--nav-hover-bg); }
}
.nav-dd-btn[aria-expanded="true"] { color: var(--nav-fg-hover); background: var(--nav-hover-bg); }
.nav-dd-chev { flex: none; transition: transform var(--dur-1) var(--ease-out); }
.nav-dd-btn[aria-expanded="true"] .nav-dd-chev { transform: rotate(180deg); }
.nav-dd-panel {
  position: absolute; top: calc(100% + var(--space-2)); left: 0; min-width: 180px;
  background: var(--nav-panel-bg); border: var(--bw-hair) solid var(--nav-panel-border);
  border-radius: var(--radius-4); box-shadow: var(--nav-panel-shadow);
  padding: var(--space-2); z-index: 30;
}
.nav-dd-panel[hidden] { display: none; }
.nav-dd-panel a {
  display: block; padding: 0.4rem 0.7rem; border-radius: var(--radius-2);
  font-size: 0.875rem; font-weight: 500; color: var(--text);
  text-decoration: none; white-space: nowrap;
}
@media (hover: hover) {
  .nav-dd-panel a:hover,
  html.theme-dark .nav-dd-panel a:hover { color: var(--nav-fg-hover); background: var(--nav-hover-bg); }
}

/* ---------- Einstellungen-Seite (Design wie EletinkerLab /einstellungen) ----------
   Kopf: H1 + Untertitel; Karten mit Kategorie-Label; Zeilen aus Icon-Kachel,
   Titel/Beschreibung links und Schalter/Aktionen rechts. */
.set-kopf { margin-bottom: 2.5rem; }
.set-kopf h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.6rem, 4vw, 2.4rem); letter-spacing: -0.02em;
  color: var(--ink-900); margin: 0 0 0.5rem;
}
.set-kopf p { color: var(--text-muted); margin: 0; font-size: 1rem; }
.set-stack { display: flex; flex-direction: column; gap: 1.5rem; }   /* volle Seitenbreite (Nutzerwunsch) */
.set-card {
  background: var(--bg-surface); border: var(--bw-hair) solid var(--ink-200);
  border-radius: 1rem; padding: 1.75rem;
  box-shadow: 0 1px 0 0 rgba(10,15,31,0.05);
  display: flex; flex-direction: column; gap: 1.5rem;
}
html.theme-dark .set-card { box-shadow: 0 1px 0 0 rgba(0,0,0,0.35); }
/* Karten-Ueberschrift: tool-card-title aus dem Design-System (Cobalt-Strich,
   Versalien), dieselbe wie auf den Tool-Seiten. Der eigene graue set-card-label
   war die Beschriftung eines Eingabefeldes, keine Ueberschrift. */
.set-trenn { height: 1px; background: var(--ink-200); }
.set-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem; }
.set-row-left { display: flex; gap: 0.9rem; align-items: flex-start; min-width: 0; }
.set-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none; border-radius: 0.6rem;
  background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--primary);
}
.set-titel { font-weight: 600; font-size: 0.98rem; color: var(--text); }
.set-desc { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.2rem; line-height: 1.55; }
/* Ein/Aus-Schalter (Cobalt aktiv), Bauart wie EletinkerLab */
.set-switch {
  position: relative; width: 48px; height: 28px; flex: none; padding: 0;
  border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg-surface-hover); cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.set-switch[aria-checked="true"] { background: var(--brand-500); }
.set-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(10,15,31,0.35);
  transition: left 0.2s;
}
.set-switch[aria-checked="true"]::after { left: 22px; }
@media (max-width: 560px){
  /* Auf dem Handy fressen 2 rem Seitenrand + 1,75 rem Kartenrand die halbe
     Textbreite; --page-x global (gilt auch fuer Navbar/Breadcrumb, sonst
     springen die linken Kanten auseinander). */
  :root { --page-x: 1.25rem; }

  /* Startseite: Hero kuerzer (5 rem Polsterung + 180-px-Logo schieben die
     Live-Werte unter die Falz), Abschnitte und Kacheln enger gepolstert. */
  .hero { padding: 3rem var(--page-x); }
  .hero-logo { width: 130px; height: 130px; margin-bottom: var(--space-4); }
  .stats { margin: var(--space-6) 0; }
  .stat { padding: var(--space-4); }
  section.block { padding: var(--space-6) var(--page-x); }
  .sec-head { margin-bottom: var(--space-5); }
  .sec-head h2 { font-size: var(--fs-30); }
  .panel { padding: var(--space-4); }
  .nav-card { padding: var(--space-4); }
  .nav-grid { gap: var(--space-4); }

  .set-kopf { margin-bottom: 1.75rem; }
  .set-card { padding: 1.25rem; gap: 1.25rem; }
  .set-row { flex-wrap: wrap; gap: 0.9rem; }
  .set-row-left { flex: 1 1 100%; }        /* Schalter in die zweite Zeile */
  .set-switch { margin-left: 52px; }       /* buendig unter Titel/Text (Icon 38 + 14 Gap) */
}

/* ---- Eletag: Akzent der iOS-App -------------------------------------------
   Das Blau des Design-Systems bleibt unangetastet (Links, Buttons, Zahlen).
   Dieses Tuerkis ist die Farbe der App (Theme .teal) und wird ausschliesslich
   dort verwendet, wo die App wiedererkennbar sein soll: Marke, Erledigt-Haken,
   Kategoriepunkte. */
:root { --eletag-teal: #1AA8A8; --eletag-teal-weich: rgba(26,168,168,0.12); }
html.theme-dark { --eletag-teal: #3FD1D1; --eletag-teal-weich: rgba(63,209,209,0.16); }

/* ---- Eletag: Aufgabenliste und Editor ---------------------------------------
   Beide Ansichten (nach Datum, nach Kategorie) benutzen dieselben Bausteine,
   damit eine Aufgabe überall gleich aussieht. */

ul.liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.aufgabe { display: flex; align-items: flex-start; gap: var(--space-3);
  padding: 0.7rem 0.9rem; border-radius: var(--radius-3);
  background: var(--bg-surface); border: var(--bw-hair) solid var(--border); }
.aufgabe.is-ueberfaellig { border-color: var(--spark-500); }
.aufgabe.is-fertig { opacity: 0.55; }
.aufgabe.is-fertig .titel { text-decoration: line-through; }

/* Ein Termin traegt keinen Haken und keinen Zustand, sondern seine Zeitspanne
   vorneweg, auf getoenter statt weisser Flaeche. Bewusst kein Balken an der
   Kante (kalender.html verwirft diese Bauart in ihrem eigenen Kommentar). */
.aufgabe.ist-termin { background: var(--eletag-teal-weich); }
/* Haken (22px) und Zeitspanne sind unterschiedlich breit, ohne gemeinsame
   Spalte faengt der Titel je nach Art an einer anderen Stelle an, und in
   einer gemischten Liste steht nichts mehr untereinander. Die Spalte
   bekommt deshalb eine feste Breite fuer beide Arten; 6,5rem reicht fuer
   "gestern 22:00" (13 Zeichen im Mono-Font, das laengste Datum-plus-Uhrzeit-
   Paar aus terminZeitspanne() bei einem mehrtaegigen Termin) mit etwas Luft.
   Eine kuerzere Zeitspanne wie "09:00 bis 10:30" oder ein fernes Datum wie
   "16.09.2026 17:00" ist schmaler bzw. breiter und bricht in der Spalte um,
   siehe .termin-zeit; das ist gewollt, sie darf nur nicht mehr den Titel
   verschieben oder abgeschnitten werden. */
.aufgabe-anfang { flex: 0 0 6.5rem; }
.termin-zeit { margin-top: 2px; font-family: var(--font-mono); overflow-wrap: anywhere;
  font-size: var(--fs-12); font-weight: 700; color: var(--eletag-teal); line-height: 1.35; }

.haken { flex-shrink: 0; width: 22px; height: 22px; margin-top: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; cursor: pointer; color: #fff;
  background: transparent; border: 2px solid var(--border); }
.is-fertig .haken { background: var(--eletag-teal); border-color: var(--eletag-teal); }
.haken-klein { width: 18px; height: 18px; margin-top: 0; }
.haken-klein.is-an { background: var(--eletag-teal); border-color: var(--eletag-teal); }

.aufgabe-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; cursor: pointer; }
/* Titel und Notiz bleiben einzeilig und enden bei zu langem Text mit einer
   Ellipse. Vorher brach ein langer Titel um und eine einzelne Zeile in der
   Liste wurde dreimal so hoch wie ihre Nachbarn, was die Liste unruhig macht.
   Der volle Text steht im title-Attribut und im Editor, dieselbe Bauart wie
   bei einem Block im Kalender. Beide brauchen dafür den min-width: 0 an
   .aufgabe-text darüber, sonst schrumpft ein Flex-Kind nicht unter seinen
   Inhalt und text-overflow greift nie. */
.aufgabe .titel { font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aufgabe .notiz { font-size: var(--fs-12); color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aufgabe .meta { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.chip { font-size: 0.68rem; font-weight: 600; padding: 0.1rem 0.45rem; border-radius: 999px;
  border: var(--bw-hair) solid var(--border); color: var(--text-muted); white-space: nowrap; }
.is-ueberfaellig .chip-datum { color: var(--spark-500); border-color: var(--spark-500); }

/* Der Stern für „wichtig". Er steht überall vor dem Titel, nicht als Chip in
   der Metazeile: dort ging er zwischen Kategorie, Datum und Alarm unter,
   obwohl er das Erste sein soll, was auffällt. Das Markup steht einmal in
   eletag.js als ICON_STERN, damit Liste, Kalender und Brett dasselbe zeigen. */
.stern { display: inline-flex; align-items: center; color: var(--warning-500);
  margin-right: 0.3rem; vertical-align: -1px; }

/* Löschen-Knopf im Hausstandard: das rote × aus EletinkerLab
   (.tool-danger-btn.tool-delete-btn, dort als <DeleteButton> gekapselt).
   Werte wörtlich übernommen, damit ein Entfernen hier genauso aussieht wie
   in der Verlegesystem-Berechnung. */
.tool-danger-btn {
  padding: 0.4rem 0.9rem; border-radius: 4px;
  border: 1px solid rgba(248, 113, 113, 0.25);
  background: rgba(248, 113, 113, 0.06);
  color: #f87171; font-size: 0.82rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
}
.tool-danger-btn:hover:not(:disabled) { border-color: var(--ink-900); box-shadow: 0 3px 0 0 var(--ink-900); }
.tool-danger-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 0 var(--ink-900); }
.tool-danger-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.tool-danger-btn.tool-delete-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.3rem 0.5rem; min-width: 1.95rem;
  font-size: 1.05rem; font-weight: 700; line-height: 1; text-align: center;
}

.gruppe { margin-bottom: var(--space-6); }
.gruppe-kopf { display: flex; align-items: baseline; gap: var(--space-3);
  margin-bottom: var(--space-3); }
.gruppe-kopf h3 { font-size: var(--fs-20); margin: 0; }
.gruppe-kopf .anzahl { font-family: var(--font-mono); font-size: var(--fs-12);
  color: var(--text-muted); }
.gruppe-punkt { width: 10px; height: 10px; border-radius: 999px; flex-shrink: 0; }
.leer { color: var(--text-muted); font-size: var(--fs-14); }
.hinweis { margin-top: var(--space-3); color: var(--danger-500); font-size: var(--fs-14); }

/* Editor als Overlay. Ein Dialog statt einer eigenen Seite, damit die Liste
   im Hintergrund sichtbar bleibt und der Weg zurück kurz ist. */
/* Werte woertlich aus brand/overlays.md §1 (ModalShell), damit das Popup hier
   genauso aussieht wie in EletinkerLab. Abweichend nur die Breite: 1100px ist
   fuer ein Formular mit zwei Spalten zu breit, 720px haelt die Zeilen lesbar.
   Das ist die Stufe "mittel" der Groessenskala aus overlays.md, also kein
   Sonderweg, sondern der vorgesehene Wert fuer ein Formular. */
/* Polster 0.5rem statt 1rem: der Dialog darf bis 96vh hoch werden, mit
   2 x 1rem Polster stünde er auf einem kurzen Fenster über den Rand hinaus
   (96vh + 32px passt erst ab 800px Fensterhöhe, 96vh + 16px ab 400px). */
.editor-hg { position: fixed; inset: 0; z-index: 1000; display: flex;
  align-items: center; justify-content: center; padding: 0.5rem;
  background: rgba(0,0,0,0.55); }
.editor { width: 100%; max-width: min(720px, 96vw); max-height: 96vh; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 1.5rem; border-radius: 8px; background: var(--bg-surface);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.35); }
.editor-kopf { display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-bottom: 1rem; }
.editor-kopf h2 { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--text); }
.editor-zu { font-size: 1.5rem; line-height: 1; cursor: pointer;
  color: var(--text-muted); background: transparent; border: 0; padding: 0; }
.editor-zu:hover { color: var(--text); }
/* Feste Hoehe nach dem Umfang der Aufgabe-Ansicht (Fälligkeitsreihe +
   Teilaufgaben-Gruppe), das ist die groessere der beiden Arten. Eine reine
   Mindesthoehe wirkt nur nach unten: die Aufgabe ist hoeher als sie und
   wuchs darueber hinaus, der Termin blieb genau bei ihr stehen, beide also
   wieder unterschiedlich hoch. min-height und max-height auf denselben Wert
   sperren die Hoehe in beide Richtungen, keine der beiden Fassungen kann
   mehr darueber hinauswachsen; ist der Inhalt hoeher, scrollt er innerhalb
   von .editor-koerper, wie es .editor-koerper mit seinem overflow:auto
   ohnehin schon konnte. Gegen die Sichthoehe bleibt es gedeckelt: 48rem ist
   die feste Größe, calc(96vh - 17rem) das, was neben Kopf, Umschalter,
   Hinweis, Fuß und Polsterung innerhalb der max-height von .editor (96vh)
   noch übrig bleibt, min() nimmt die kleinere der beiden. Der Vorhalt von
   17rem ist die Summe der tatsächlichen Werte in dieser Datei: Polsterung
   von .editor 2 x 1.5rem = 3rem, Kopf 1.5rem Zeilenhöhe des
   Schließen-Knopfes + 1rem Abstand = 2.5rem, Umschalter 2 x 1px Rahmen +
   2 x 0.75rem Polster + 0.82rem x 1.5 Zeile rund 2.85rem + 0.5rem Abstand =
   3.35rem, Hinweiszeile 0.875rem x 1.65 rund 1.45rem + 1rem Abstand =
   2.45rem, Fuß rund 1.9rem Knopfhöhe + 1.5rem Abstand = 3.4rem, zusammen
   rund 14.7rem. Aufgerundet auf 17rem bleibt gut 2rem Reserve für
   Rundungen und für einen Hinweis, der auf einem schmalen Fenster zweizeilig
   umbricht; ohne diese Reserve würde .editor an seine max-height stoßen und
   der Fuß fiele hinter overflow: hidden. So bleibt die Höhe zwischen
   Aufgabe und Termin auf jedem Bildschirm exakt gleich, auf einem kurzen
   insgesamt kleiner. .editor zeichnet mit eigenem overflow:hidden nichts
   mehr ueber den Rand hinaus, nur .editor-koerper scrollt seinen Inhalt;
   scrollbar-gutter haelt dabei den Platz fuer einen Bildlaufbalken immer
   frei, auch wenn nur eine der beiden Fassungen ihn
   gerade braucht, sonst waere ein erscheinender Balken dieselbe Verschiebung
   im Kleinen. Der Fuss (editor-fuss) steht als eigenes Flex-Kind von
   .editor ausserhalb von .editor-koerper und bleibt deshalb unberuehrt vom
   Bildlauf, seit der Dialogrunde gilt dasselbe für den Art-Umschalter und
   seinen Hinweis. */
.editor-koerper { overflow: auto; flex: 1; scrollbar-gutter: stable;
  min-height: min(48rem, calc(96vh - 17rem)); max-height: min(48rem, calc(96vh - 17rem));
  display: flex; flex-direction: column; gap: var(--space-4); }
/* .feld traegt normalerweise flex: 1, damit sich mehrere Felder in einer
   .feld-reihe (Zeile) die Breite teilen. Titel und Notiz stehen aber ohne
   umgebende Zeile direkt im spaltenweisen .editor-koerper, dort wuerde
   flex: 1 heissen: waechst in der Hoehe und schluckt den freien Platz, den
   die Mindesthoehe von .editor-koerper uebrig laesst. Je nach Art bleibt
   unterschiedlich viel Platz uebrig, und die beiden Felder wuerden beim
   Umschalten unterschiedlich hoch, alles darunter ruetschte mit. Direkte
   .feld-Kinder von .editor-koerper wachsen deshalb nicht, der freie Platz
   bleibt am Ende des Bildlaufs statt sich zwischen die Felder zu verteilen. */
.editor-koerper > .feld { flex: 0 0 auto; }
.editor-fuss { display: flex; align-items: center; justify-content: flex-end;
  gap: 0.6rem; margin-top: 1.5rem; }
/* Löschen steht links, mit Abstand zu Abbrechen und Speichern. */
.editor-fuss #editorErledigt { margin-right: auto; }
/* Bei einem Termin entfaellt Erledigt, sein Platz bleibt aber stehen, sonst
   ruecken Loeschen/Abbrechen/Speichern zusammen (die margin-right: auto oben
   haengt am editorErledigt-Element, faellt es per hidden ganz aus dem
   Layout, faellt auch der Abstand weg). visibility statt display: das
   Element behaelt seine Flaeche, ist aber nicht anklickbar und wird von
   einem Screenreader nicht mehr vorgelesen, beides ohne weiteres CSS. */
.editor-fuss .ist-leerstelle { visibility: hidden; }

.feld { display: flex; flex-direction: column; gap: 0.35rem; flex: 1; min-width: 0; }
.feld > span { font-size: var(--fs-12); color: var(--text-muted); }
.feld input[type="text"], .feld input[type="date"], .feld input[type="time"],
.feld input[type="datetime-local"], .feld input[type="number"], .feld select, .feld textarea {
  padding: 0.65rem 0.9rem; font-size: 0.95rem; font-family: inherit;
  border-radius: var(--radius-2); color: var(--text);
  background: var(--bg-surface); border: var(--bw-hair) solid var(--border); }
.feld textarea { resize: vertical; line-height: 1.6; }
.feld-schalter { flex: 0 0 auto; }
.feld-schalter input { width: 20px; height: 20px; }
.feld-reihe { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: flex-end; }
.feld-gruppe { border: var(--bw-hair) solid var(--border); border-radius: var(--radius-3);
  padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.feld-gruppe legend { font-size: var(--fs-12); color: var(--text-muted); padding: 0 0.4rem; }

.teil-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.teil-liste li { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-14); }
.teil-liste li > span { flex: 1; overflow-wrap: anywhere; }
.teil-liste .tool-delete-btn { flex-shrink: 0; }
.teil-neu { display: flex; gap: var(--space-3); }
.teil-neu input { flex: 1; padding: 0.65rem 0.9rem; font-size: 0.95rem; font-family: inherit;
  border-radius: var(--radius-2); color: var(--text);
  background: var(--bg-surface); border: var(--bw-hair) solid var(--border); }

/* ---- Eletag: Formularelemente vereinheitlichen -------------------------------
   Drei Dinge, die vorher auseinanderliefen:
   1. Die native Datumsauswahl hob den gewählten Tag im Browser-Blau hervor.
      Das steuert accent-color; ohne Angabe nimmt Chromium sein eigenes Blau,
      das im Dark-Mode grell wirkt.
   2. select und input waren unterschiedlich hoch, weil select eine eigene
      Zeilenhöhe mitbringt. Deshalb hier line-height und height festnageln.
   3. Knöpfe neben Eingabefeldern standen tiefer als das Feld. */

:root { accent-color: var(--brand-500); }
html.theme-dark { accent-color: var(--eletag-teal); }

.feld input[type="text"], .feld input[type="date"], .feld input[type="time"],
.feld input[type="datetime-local"], .feld input[type="number"], .feld select,
.teil-neu input, .kat-neu input[type="text"] {
  height: 42px; line-height: 1.2; box-sizing: border-box;
}
.feld select { appearance: none; padding-right: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%236B7187' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.8rem center; background-size: 12px; }

/* Button-Toggles statt nackter Checkboxen (Hausregel). Wörtlich aus
   brand/globals.css übernommen, weil die Datei hier nicht geladen wird. */
.tool-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.55rem 1rem; border-radius: 4px; border: 1px solid var(--border);
  background: transparent; color: var(--text-muted);
  font-size: 0.85rem; font-weight: 600; cursor: pointer;
  transition: all 0.2s; white-space: nowrap; height: 42px; box-sizing: border-box;
}
.tool-toggle:hover:not(:disabled):not(.is-active) { border-color: var(--brand-300); color: var(--text); }
.tool-toggle.is-active { background: var(--brand-50); border-color: var(--brand-500); color: var(--primary); }
.tool-toggle:disabled { opacity: 0.4; cursor: not-allowed; }

/* Ein Toggle, das in einer Feldreihe neben beschrifteten Feldern steht,
   braucht denselben oberen Abstand wie deren Beschriftung. */
.feld-toggle { display: flex; flex-direction: column; gap: 0.35rem; flex: 0 0 auto; }
.feld-toggle > span { font-size: var(--fs-12); color: var(--text-muted); }

/* Knöpfe, die neben einem Eingabefeld stehen, auf dessen Höhe bringen.
   Betrifft auch die Entfernen-Knöpfe für Fälligkeit und Alarm im Editor:
   die stehen in einer Feldreihe und wären mit der kleinen Knopfhöhe sonst
   deutlich niedriger als das Datumsfeld daneben. Die Zentrierung braucht es
   mit, sonst klebt die Beschriftung oben. */
.teil-neu .tool-btn, .teil-neu .tool-btn-primary,
.kat-neu .tool-btn, .kat-neu .tool-btn-primary,
.feld-reihe .tool-btn, .feld-reihe .tool-btn-primary, .feld-reihe .tool-danger-btn {
  height: 42px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---- Eletag: Fokus auf Eingabefeldern ----------------------------------------
   Ohne eigene Regel zeichnet der Browser seinen Standardring, der weder zur
   Rundung noch zur Farbe passt und im Dark-Mode fremd wirkt. Das Haus macht es
   an .tool-input/.tool-select so: Rahmen in brand-500, dazu ein weicher Ring
   aus brand-100. Genau das hier für die Felder in Editor und Dialogen. */
.feld input:focus, .feld select:focus, .feld textarea:focus,
.teil-neu input:focus, .kat-neu input:focus, .dlg-feld input:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-100);
}
/* Tastaturbedienung bleibt sichtbar: Knöpfe und Toggles behalten den Ring
   des Design-Systems. */
.tool-toggle:focus-visible, .editor-zu:focus-visible, .haken:focus-visible {
  outline: var(--bw-bold) solid var(--focus-ring); outline-offset: 2px;
}

/* ---- Eletag: roter Bestätigungsknopf ----------------------------------------
   Für die Gefahr-Variante des Bestätigungsdialogs schreibt brand/overlays.md §3
   ausdrücklich .tool-reset-btn vor. Werte wörtlich aus EletinkerLab, samt der
   dortigen Dark-Mode-Aufhellung: #dc2626 kommt auf dunkler Fläche nur auf
   3,5:1 und liegt damit unter dem Lesbarkeitsschwellwert, #FCA5A5 auf 8,9:1.
   Der Rahmen bleibt im kräftigen Rot, nur die Schrift wird aufgehellt. */
.tool-reset-btn {
  padding: 0.65rem 1.1rem; border-radius: 4px;
  border: 1px solid rgba(220, 38, 38, 0.45);
  background: rgba(220, 38, 38, 0.10);
  color: #dc2626; font-size: 0.9rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
}
.tool-reset-btn:hover:not(:disabled) { border-color: var(--ink-900); box-shadow: 0 3px 0 0 var(--ink-900); }
.tool-reset-btn:disabled { opacity: 0.45; cursor: not-allowed; }
html.theme-dark .tool-reset-btn { color: #FCA5A5; }