/* ════════════════════════════════════════════════════════════════════════════
   dreifive UI — die gemeinsame Oberfläche aller Tools

   Stand 25.09.2026. ENTWURF zur Abnahme: noch kein Tool benutzt diese Datei.
   Befund und Begründung stehen in UI-STANDARD.md.

   Herkunft: der verbindliche dreifive-UI-Standard. Farbrollen, Abstandsraster,
   Schriftgrössen und Klassennamen sind von dort übernommen, nicht erfunden.

   ── Wie das hier gedacht ist ──────────────────────────────────────────────
   Zwei Sorten Variablen, und die Trennung ist der ganze Trick:

   1. FESTE WERTE  (Marke, Raster, Schriftgrössen). Die stehen nicht zur
      Debatte. Petrol ist Petrol.
   2. STELLSCHRAUBEN (unter «Entscheidbar»). Das sind die offenen Fragen aus
      UI-STANDARD.md Abschnitt 9. Sie hängen an EINER Stelle, damit man eine
      Richtung ausprobieren kann, ohne ein einziges Bauteil anzufassen.
      Genau das macht `ui-muster.html`.

   ── Regeln ────────────────────────────────────────────────────────────────
   - Kein Hex-Wert in einem Bauteil. Nur Rollen.
   - Eine Primäraktion je Bildschirm. Rot heisst Primäraktion oder echter
     Fehler, nie Deko.
   - Zahlen in Spalten rechtsbündig und tabellarisch.
   - Status nie nur über Farbe: Badge UND Zeilenstreifen.
   - Hell als Standard. Dunkel nur auf Seiten mit <html data-df-dunkel> (siehe unten).
   - Was nur ein Tool braucht, bleibt im Tool.
   - Die Kopfleiste gehört NICHT hierher, die ist `shared/df-shell.js`.
   ════════════════════════════════════════════════════════════════════════ */

/* Platz fuer die Scrollleiste immer freihalten. Sonst springt die ganze
   Seite um deren Breite, sobald eine Unterseite laenger als der Bildschirm
   ist und die naechste nicht (Befund Philip im Kosten-Alarm, 25.09.2026).
   `scrollbar-gutter: stable` allein griff im eingebetteten Chromium nicht;
   eine immer sichtbare Leiste wirkt ueberall. */
html { overflow-y: scroll; }

:root {
  /* ── Marke: nicht verhandelbar ─────────────────────────────────────────── */
  --df-petrol:    #003845;
  --df-red:       #EA4450;
  --df-beere:     #891F53;
  --df-teal-700:  #194756;
  --df-teal-600:  #2B5565;
  --df-slate-500: #527589;
  --df-slate-400: #7990A0;
  --df-grey-300:  #C4CCD2;
  --df-grey-200:  #EAEDEE;
  --df-grey-100:  #F2F5F6;
  --df-grey-050:  #F8FAFA;
  /* Eine Stufe HELLER als die hellste des verbindlichen Standards. Angelegt,
     weil Philip den Seitengrund am 05.10.2026 heller wollte; #F8FAFA las sich
     ihm noch als grau. Der Standard wird dadurch nicht ueberschrieben, 050
     bleibt unveraendert verfuegbar. */
  --df-grey-025:  #FBFCFC;

  /* ── Zustände. Abgeleitet, nicht Teil der offiziellen CI.
        Nur für Zustände, nie als Gestaltungsfarbe. ─────────────────────────── */
  --df-ok:        #1F7A5F;  --df-ok-soft:   #E6F2EE;
  --df-warn:      #A9701F;  --df-warn-soft: #FAF1E1;
  --df-crit:      var(--df-red);       --df-crit-soft: #FDECEE;
  --df-info:      var(--df-teal-600);  --df-info-soft: #E8EFF2;

  /* ── Text ──────────────────────────────────────────────────────────────── */
  --df-ink:        var(--df-petrol);
  --df-ink-2:      var(--df-teal-600);
  --df-ink-muted:  var(--df-slate-500);
  --df-ink-faint:  var(--df-slate-400);
  --df-ink-inverse:#FFFFFF;
  /* Schrift und Symbole auf FESTEN dunklen oder farbigen Flaechen: Bilder,
     Videos, Medienansichten, Avatare in Markenfarben. Bleibt in beiden Designs
     weiss, anders als --df-ink-inverse, das im dunklen Design dunkel wird
     (dort liegt es auf der hellen Hauptaktion). Ergaenzt 16.10.2026. */
  --df-ink-on-color: #FFFFFF;

  /* ── Schrift ───────────────────────────────────────────────────────────── */
  --df-font:      'DM Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --df-font-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --df-text-xs:   12px;
  --df-text-sm:   13px;
  --df-text-base: 15px;
  --df-text-md:   17px;
  --df-text-lg:   20px;
  --df-text-xl:   24px;
  --df-text-2xl:  30px;

  /* ── Raster: 4 px, nichts dazwischen ───────────────────────────────────── */
  --df-1: 4px;  --df-2: 8px;  --df-3: 12px; --df-4: 16px; --df-5: 20px;
  --df-6: 24px; --df-8: 32px; --df-10: 40px; --df-12: 48px; --df-16: 64px;

  /* ── Schatten und Fokus ────────────────────────────────────────────────── */
  --df-shadow-sm: 0 1px 2px rgba(0,56,69,.07);
  --df-shadow:    0 1px 3px rgba(0,56,69,.08), 0 6px 16px rgba(0,56,69,.05);
  --df-shadow-lg: 0 16px 40px rgba(0,56,69,.16);
  --df-focus:     var(--df-teal-600);
  --df-ring:      0 0 0 3px rgba(43,85,101,.26);

  --df-content-max: 1440px;
  --df-prose-max:   68ch;
  --df-transition:  140ms cubic-bezier(.4,0,.2,1);
  --df-shell-h:     64px;   /* Höhe der gemeinsamen Kopfleiste */

  /* ══ ENTSCHIEDEN am 25.09.2026, nachgezogen am 28.09.2026 ════════════════
     Philip hat die Richtung an `ui-muster.html` durchgeklickt und gewaehlt:
     Karte weiss · Seite fast weiss · Rundung MITTEL · Betonung 700 ·
     Kante Linie UND leichter Schatten · Hauptaktion Petrol · Dichte normal.
     (Am 28.09.2026 von kantig 2/4/6 auf mittel 4/8/12 geaendert.)

     Was das zusammen ergibt: ruhig und hell. Massvolle Rundung, klare Kanten,
     kraeftige Beschriftungen, und die Hauptaktion traegt Petrol statt Rot.
     Rot bleibt damit frei fuer das, was wirklich weh tut.

     Aendern heisst: hier aendern, nirgends sonst. ═══════════════════════ */

  /* 1 · Flächen */
  --df-bg:             var(--df-grey-025);  /* Seite, heller seit 05.10.2026 */
  --df-surface:        #FFFFFF;             /* Karte */
  --df-surface-2:      var(--df-grey-100);  /* eingelassen, Tabellenkopf */
  --df-surface-sunken: var(--df-grey-200);
  --df-border:         var(--df-grey-200);
  --df-border-strong:  var(--df-grey-300);

  /* 2 · Rundung */
  --df-radius-sm:   4px;
  --df-radius:      8px;
  --df-radius-lg:   12px;
  --df-radius-pill: 999px;

  /* 3 · Betonung: welcher Schnitt trägt Namen, Werte, Überschriften */
  --df-weight-strong: 700;
  --df-weight-head:   700;

  /* 4 · Kante: Linie oder Schatten. «Clean» heisst meist Linie. */
  --df-card-border: 1px solid var(--df-border);
  --df-card-shadow: var(--df-shadow-sm);

  /* 5 · Primärfarbe der Hauptaktion */
  --df-primary:       var(--df-petrol);
  --df-primary-hover: var(--df-teal-700);

  /* 6 · Dichte */
  --df-control-h:     34px;
  --df-control-h-lg:  40px;
  --df-control-h-sm:  28px;
  --df-cell-pad:      10px var(--df-3);
  --df-card-pad:      var(--df-4);
  --df-section-gap:   var(--df-8);

  /* 6b · Eingabefelder GEFUELLT statt umrandet (Entscheid Philip 16.10.2026,
     zuerst im AI Feed erprobt): hellgraue Flaeche ohne Rand, Rand erst beim
     Darueberfahren, beim Bearbeiten weiss mit Rand in der Fokusfarbe. Grund:
     weisse Felder auf weissen Karten brauchen eine Linie, um sichtbar zu sein,
     und genau diese vielen Linien machen eine Oberflaeche unruhig.
     Auf grauem Grund bleiben Felder weiss (.df-auf-grau, Kartenfuss). */
  --df-field-bg:      var(--df-surface-2);
  --df-field-border:  transparent;
  /* 6c · Nebenknoepfe ebenso gefuellt (Entscheid Philip 16.10.2026): grau
     statt weiss mit Rand. Die Hauptaktion bleibt Petrol, still bleibt still. */
  --df-btn-bg:        var(--df-surface-2);
  --df-btn-border:    transparent;
  --df-btn-bg-hover:  var(--df-surface-sunken);

  /* 7 · Rundung des Schalters, getrennt von --df-radius.
     Wunsch Philip 05.10.2026: das gewaehlte Feld runder. Der Schalter ist der
     einzige Ort, an dem die Rundung aus der Reihe faellt — bei allem anderen
     gilt weiter «mittel». Hier stimmt es, weil der Schalter eine Schiene mit
     einem gleitenden Feld ist und keine Karte. */
  --df-segment-radius: var(--df-radius-pill);
}

/* ── Dunkles Design (Wunsch Philip 09.10.2026) ───────────────────────────────
   Greift NUR, wenn die Seite es erlaubt (<html data-df-dunkel>) und die Person es
   im Menue der Kopfleiste gewaehlt hat: dann setzt shared/df-shell.js
   data-theme="dark" am <html>. Ein Tool, das noch eigene feste Farben hat, setzt
   data-df-dunkel nicht und bleibt hell, statt halb dunkel zu werden.

   Umgestellt werden nur Rollen und die Grautoene, die Bauteile wissen von nichts.
   Richtung «Graphit, Akzent Weiss» (Entscheid Philip 09.10.2026, gegen ein
   aufgehelltes Petrol, das zu Hellblau wurde): neutrale Flaechen ohne Farbstich,
   die Hauptaktion hell mit dunkler Schrift. Rot bleibt Rot. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --df-grey-300:  #3A4045;
  --df-grey-200:  #2C3135;
  --df-grey-100:  #24282B;
  --df-grey-050:  #1D2023;
  --df-grey-025:  #141618;

  --df-ok:   #5FC3A0;  --df-ok-soft:   rgba(31,122,95,.25);
  --df-warn: #E0A54F;  --df-warn-soft: rgba(169,112,31,.28);
  --df-crit-soft: rgba(234,68,80,.18);
  --df-info: #B0B8BD;  --df-info-soft: rgba(255,255,255,.08);

  --df-ink:        #ECEDEE;
  --df-ink-2:      #C9CDD0;
  --df-ink-muted:  #9A9FA4;
  --df-ink-faint:  #7C8287;
  --df-ink-inverse:#141618;

  --df-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --df-shadow:    0 1px 3px rgba(0,0,0,.4), 0 6px 16px rgba(0,0,0,.3);
  --df-shadow-lg: 0 16px 40px rgba(0,0,0,.55);
  --df-focus:     #ECEDEE;
  --df-ring:      0 0 0 3px rgba(255,255,255,.22);

  --df-bg:             var(--df-grey-025);
  --df-surface:        var(--df-grey-050);
  --df-surface-2:      var(--df-grey-100);
  --df-surface-sunken: #101213;
  --df-border:         var(--df-grey-200);
  --df-border-strong:  var(--df-grey-300);

  --df-primary:       #ECEDEE;
  --df-primary-hover: #FFFFFF;
}

/* ── Grundgerüst ─────────────────────────────────────────────────────────── */
.df-root, body.df-root {
  font-family: var(--df-font);
  font-size: var(--df-text-sm);
  line-height: 1.45;
  color: var(--df-ink);
  background: var(--df-bg);
  -webkit-font-smoothing: antialiased;
}
.df-root *, .df-root *::before, .df-root *::after { box-sizing: border-box; }
/* Links im Fliesstext: Textfarbe mit leiser Linie, beim Darueberfahren Primaerfarbe.
   :where haelt die Regel so schwach, dass jede Bauteil-Klasse (df-btn, df-menu__item …)
   und jede eigene Link-Regel eines Tools gewinnt. Vorher stand hier nichts, und Links
   erschienen im Browser-Blau. */
:where(.df-root) a { color: inherit; text-decoration: underline; text-decoration-color: var(--df-border-strong);
                     text-underline-offset: 3px; text-decoration-thickness: 1px; }
:where(.df-root) a:hover { color: var(--df-primary); text-decoration-color: currentColor; }
.df-content { max-width: var(--df-content-max); margin: 0 auto; padding: var(--df-6) var(--df-8); }
.df-section { margin-bottom: var(--df-section-gap); }
.df-section__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--df-4);
  flex-wrap: wrap; margin-bottom: var(--df-3);
}
.df-section__head h2 { font-size: var(--df-text-md); font-weight: var(--df-weight-head); letter-spacing: -.1px; }

.df-page-head { margin-bottom: var(--df-6); }
.df-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--df-ink-faint); margin-bottom: var(--df-1);
}
.df-page-head h1 { font-size: var(--df-text-2xl); font-weight: var(--df-weight-head); letter-spacing: -.4px; }
.df-lead { font-size: var(--df-text-base); color: var(--df-ink-muted); margin-top: var(--df-2); max-width: var(--df-prose-max); }

/* ── Raster ──────────────────────────────────────────────────────────────── */
.df-grid { display: grid; gap: var(--df-3); }
.df-grid--2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.df-grid--3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
/* 210 statt 180: eine Kennzahl wie «CHF 48'250.00» braucht die Breite, sonst
   bricht sie um und die Zeile steht nicht mehr auf einer Linie. */
.df-grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.df-row   { display: flex; align-items: center; gap: var(--df-2); flex-wrap: wrap; }
.df-stack { display: flex; flex-direction: column; gap: var(--df-3); }

/* ── Aktionen ────────────────────────────────────────────────────────────── */
.df-btn {
  font: inherit; font-size: var(--df-text-sm); font-weight: var(--df-weight-strong);
  height: var(--df-control-h); padding: 0 var(--df-4);
  border-radius: var(--df-radius); border: 1px solid var(--df-btn-border);
  background: var(--df-btn-bg); color: var(--df-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--df-2);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background var(--df-transition), border-color var(--df-transition), color var(--df-transition);
}
.df-btn:hover:not(:disabled) { background: var(--df-btn-bg-hover); }
.df-btn:focus-visible { outline: none; box-shadow: var(--df-ring); }
.df-btn:disabled { opacity: .5; cursor: default; }

.df-btn--primary {
  background: var(--df-primary); border-color: var(--df-primary); color: var(--df-ink-inverse);
}
.df-btn--primary:hover:not(:disabled) { background: var(--df-primary-hover); border-color: var(--df-primary-hover); color: var(--df-ink-inverse); }

.df-btn--secondary { background: var(--df-btn-bg); border-color: var(--df-btn-border); }
.df-btn--ghost { background: transparent; border-color: transparent; color: var(--df-ink-muted); }
.df-btn--ghost:hover:not(:disabled) { background: var(--df-surface-2); color: var(--df-ink); border-color: transparent; }
.df-btn--danger { background: var(--df-red); border-color: var(--df-red); color: #fff; }
.df-btn--danger:hover:not(:disabled) { background: #D5343F; border-color: #D5343F; }

.df-btn--sm { height: var(--df-control-h-sm); padding: 0 var(--df-3); font-size: var(--df-text-xs); }
.df-btn--lg { height: var(--df-control-h-lg); padding: 0 var(--df-5); font-size: var(--df-text-base); }
.df-btn--icon { width: var(--df-control-h); padding: 0; }
.df-btn--block { width: 100%; }

.df-btn-group { display: inline-flex; }
.df-btn-group .df-btn { border-radius: 0; margin-left: -1px; }
.df-btn-group .df-btn:first-child { border-radius: var(--df-radius) 0 0 var(--df-radius); margin-left: 0; }
.df-btn-group .df-btn:last-child  { border-radius: 0 var(--df-radius) var(--df-radius) 0; }

/* ── Formulare ───────────────────────────────────────────────────────────── */
.df-field { display: flex; flex-direction: column; gap: var(--df-1); margin-bottom: var(--df-3); }
.df-label { font-size: var(--df-text-xs); font-weight: var(--df-weight-strong); color: var(--df-ink-2); }
.df-hint  { font-size: var(--df-text-xs); color: var(--df-ink-faint); }
.df-error { font-size: var(--df-text-xs); color: var(--df-crit); font-weight: var(--df-weight-strong); }

.df-input, .df-select, .df-textarea {
  font: inherit; font-size: var(--df-text-sm); color: var(--df-ink);
  height: var(--df-control-h); padding: 0 var(--df-3);
  border: 1px solid var(--df-field-border); border-radius: var(--df-radius);
  background-color: var(--df-field-bg); outline: none; width: 100%;
  transition: border-color var(--df-transition), box-shadow var(--df-transition), background-color var(--df-transition);
}
.df-input:hover:not(:disabled), .df-select:hover:not(:disabled), .df-textarea:hover:not(:disabled) { border-color: var(--df-border-strong); }
/* Felder auf grauem Grund: weiss mit Linie, sonst verschwaenden sie */
.df-auf-grau, .df-card__foot, .df-datum__fuss { --df-field-bg: var(--df-surface); --df-field-border: var(--df-border-strong);
  --df-btn-bg: var(--df-surface); --df-btn-border: var(--df-border-strong); --df-btn-bg-hover: var(--df-surface-2); }
.df-textarea { height: auto; min-height: 84px; padding: var(--df-2) var(--df-3); resize: vertical; line-height: 1.5; }
.df-input:focus, .df-select:focus, .df-textarea:focus { background-color: var(--df-surface); border-color: var(--df-focus); box-shadow: var(--df-ring); }
.df-input::placeholder, .df-textarea::placeholder { color: var(--df-ink-faint); }
.df-input[aria-invalid="true"] { border-color: var(--df-crit); }
.df-select { appearance: none; padding-right: var(--df-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23527589' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--df-3) center; background-size: 15px; }

/* Aufgeklappte Auswahlliste im eigenen Design (Entscheid Philip 16.10.2026:
   «Dropdowns immer in unserem Design», nie die eckige Systemliste).
   Browser mit anpassbarem <select> (appearance: base-select, Chrome und Edge
   seit 2025) zeigen Liste und Eintraege in df-Optik: gerundet, mit Schatten,
   Eintrag hinterlegt beim Zeigen, gewaehlter Eintrag fett mit Haken. Andere
   Browser fallen auf die Systemliste zurueck, ohne dass etwas bricht.
   Gilt fuer JEDES .df-select in jedem Tool; kein Tool baut eigene Listen. */
@supports (appearance: base-select) {
  .df-select, .df-select::picker(select) { appearance: base-select; }
  /* Der Pfeil ist hier ein eigenes Element NEBEN dem Text (::picker-icon),
     nicht mehr ein Hintergrundbild unter dem Polster. Sonst lief langer Text
     («Wettbewerber» in schmalen Tabellenspalten) in den Pfeil (16.10.2026).
     Text bricht nie um; das Feld ist mindestens so breit wie Text und Pfeil. */
  .df-select {
    display: inline-flex; align-items: center; justify-content: space-between; gap: var(--df-2);
    padding-right: var(--df-3); background-image: none; white-space: nowrap; min-width: max-content;
  }
  .df-select::picker-icon {
    content: ''; flex-shrink: 0; width: 15px; height: 15px; background-color: var(--df-ink-muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 15px no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 15px no-repeat;
    transition: transform var(--df-transition);
  }
  .df-select:open::picker-icon { transform: rotate(180deg); }
  .df-select::picker(select) {
    margin-top: var(--df-1); padding: var(--df-1);
    background: var(--df-surface); color: var(--df-ink);
    border: 1px solid var(--df-border); border-radius: var(--df-radius);
    box-shadow: var(--df-shadow-lg);
    font-family: var(--df-font); font-size: var(--df-text-sm);
    max-height: min(60vh, 360px); overflow-y: auto;
  }
  .df-select option {
    display: flex; align-items: center; gap: var(--df-2);
    min-height: var(--df-control-h-sm); padding: var(--df-1) var(--df-3);
    border-radius: var(--df-radius-sm); cursor: pointer;
  }
  .df-select option:hover, .df-select option:focus, .df-select option:focus-visible { background: var(--df-surface-2); outline: none; }
  .df-select option:checked { background: none; font-weight: var(--df-weight-strong); }
  .df-select option:checked:hover, .df-select option:checked:focus, .df-select option:checked:focus-visible { background: var(--df-surface-2); }
  .df-select option::checkmark { order: 1; margin-left: auto; color: var(--df-primary); }
  .df-select option:disabled { color: var(--df-ink-faint); cursor: default; }
  .df-select optgroup { font-weight: var(--df-weight-strong); color: var(--df-ink-faint); font-size: var(--df-text-xs); }
  .df-select optgroup option { font-weight: 400; color: var(--df-ink); font-size: var(--df-text-sm); }
}

.df-check { display: inline-flex; align-items: center; gap: var(--df-2); font-size: var(--df-text-sm); cursor: pointer; }
.df-check input { width: 17px; height: 17px; accent-color: var(--df-primary); cursor: pointer; }

.df-switch { display: inline-flex; align-items: center; gap: var(--df-2); cursor: pointer; font-size: var(--df-text-sm); }
.df-switch input { position: absolute; opacity: 0; pointer-events: none; }
.df-switch__track {
  width: 38px; height: 22px; border-radius: 999px; background: var(--df-grey-300);
  position: relative; transition: background var(--df-transition); flex-shrink: 0;
}
.df-switch__track::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: transform var(--df-transition);
  box-shadow: var(--df-shadow-sm);
}
.df-switch input:checked + .df-switch__track { background: var(--df-primary); }
.df-switch input:checked + .df-switch__track::after { transform: translateX(16px); }
.df-switch input:focus-visible + .df-switch__track { box-shadow: var(--df-ring); }

/* ── Filterzeile ─────────────────────────────────────────────────────────── */
.df-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--df-4);
  flex-wrap: wrap; margin-bottom: var(--df-3);
}
.df-search { position: relative; min-width: 220px; }
.df-search .df-input { padding-left: var(--df-8); }
.df-search::before {
  content: ''; position: absolute; left: var(--df-3); top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; opacity: .55; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23527589' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.df-chip {
  font: inherit; font-size: var(--df-text-xs); font-weight: var(--df-weight-strong);
  height: var(--df-control-h-sm); padding: 0 var(--df-3); border-radius: var(--df-radius-pill);
  border: 1px solid var(--df-border-strong); background: var(--df-surface); color: var(--df-ink-muted);
  cursor: pointer; display: inline-flex; align-items: center; gap: var(--df-1); white-space: nowrap;
  transition: background var(--df-transition), border-color var(--df-transition), color var(--df-transition);
}
.df-chip:hover { border-color: var(--df-primary); color: var(--df-ink); }
.df-chip[aria-pressed="true"] { background: var(--df-primary); border-color: var(--df-primary); color: var(--df-ink-inverse); }
.df-chip:focus-visible { outline: none; box-shadow: var(--df-ring); }
.df-chip__n { font-size: 10px; font-weight: 700; opacity: .7; }

/* ── Container ───────────────────────────────────────────────────────────── */
.df-card {
  background: var(--df-surface); border: var(--df-card-border); border-radius: var(--df-radius-lg);
  box-shadow: var(--df-card-shadow); overflow: hidden;
}
.df-card__head {
  padding: var(--df-3) var(--df-card-pad); border-bottom: 1px solid var(--df-border);
  display: flex; align-items: center; justify-content: space-between; gap: var(--df-3);
  font-weight: var(--df-weight-strong);
}
.df-card__body { padding: var(--df-card-pad); }
.df-card__foot {
  padding: var(--df-3) var(--df-card-pad); border-top: 1px solid var(--df-border);
  background: var(--df-surface-2); display: flex; justify-content: flex-end; gap: var(--df-2);
}

.df-stat {
  background: var(--df-surface); border: var(--df-card-border); border-radius: var(--df-radius-lg);
  box-shadow: var(--df-card-shadow); padding: var(--df-card-pad);
}
.df-stat__label {
  font-size: 10px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--df-ink-faint); margin-bottom: var(--df-1);
}
.df-stat__value {
  font-size: var(--df-text-xl); font-weight: var(--df-weight-head); color: var(--df-ink);
  letter-spacing: -.4px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.df-delta { font-size: var(--df-text-xs); font-weight: var(--df-weight-strong); margin-top: var(--df-1);
  display: inline-flex; align-items: center; gap: var(--df-1); }
.df-delta--up   { color: var(--df-ok); }
.df-delta--down { color: var(--df-crit); }
.df-delta--flat { color: var(--df-ink-faint); }

/* ── Tabelle ─────────────────────────────────────────────────────────────── */
/* Der Rahmen ist Pflicht: eine Tabelle scrollt in sich, nie die Seite. */
.df-table-wrap {
  overflow-x: auto; background: var(--df-surface);
  border: var(--df-card-border); border-radius: var(--df-radius-lg); box-shadow: var(--df-card-shadow);
}
/* Der weisse Grund sitzt AUCH auf der Tabelle selbst, nicht nur auf dem Rahmen.
   Grund: beim Umstellen des Kosten-Alarms habe ich 19 Tabellen die Klasse
   gegeben und den Rahmen vergessen. Dadurch sassen sie durchsichtig auf dem
   Seitengrund und wirkten grau neben den weissen Karten (gemeldet Philip
   05.10.2026). Mit dieser Zeile kann das keinem Tool mehr passieren; der
   Rahmen bleibt trotzdem Pflicht, er bringt Rand, Radius und das Scrollen. */
.df-table { width: 100%; border-collapse: collapse; font-size: var(--df-text-sm);
  background: var(--df-surface); }
.df-table th {
  text-align: left; font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--df-ink-faint); padding: var(--df-cell-pad); background: var(--df-surface-2);
  border-bottom: 1px solid var(--df-border); white-space: nowrap;
  /* top: 0 bezieht sich auf den Rahmen, nicht auf das Fenster: der Rahmen ist
     durch overflow-x der Scrollbereich. Sichtbar wird das Kleben erst, wenn ein
     Tool dem Rahmen eine Höhe gibt (.df-table-wrap[style*="max-height"]).
     Ohne Rahmen klebte der Kopf ans Fensteroberteil und damit HINTER die
     Kopfleiste — anders als Parameter- und Reiterleiste, die mit
     --df-shell-h rechnen. */
  position: sticky; top: 0; z-index: 1;
}
.df-table td { padding: var(--df-cell-pad); border-bottom: 1px solid var(--df-border); vertical-align: middle; }
.df-table tbody tr:last-child td { border-bottom: 0; }
.df-table tbody tr:hover td { background: var(--df-surface-2); }
.df-table--zebra tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--df-surface-2) 55%, transparent); }
.df-table--compact th, .df-table--compact td { padding: var(--df-1) var(--df-2); }
.df-num, th.df-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.df-mono { font-family: var(--df-font-mono); font-size: var(--df-text-xs); }
.df-actions { text-align: right; white-space: nowrap; }

/* Status doppelt codiert: Streifen links, dazu das Badge in der Zeile. */
.df-row--ok   td:first-child { box-shadow: inset 3px 0 0 var(--df-ok); }
.df-row--warn td:first-child { box-shadow: inset 3px 0 0 var(--df-warn); }
.df-row--crit td:first-child { box-shadow: inset 3px 0 0 var(--df-crit); }

.df-pagination {
  display: flex; align-items: center; justify-content: space-between; gap: var(--df-3);
  padding: var(--df-2) var(--df-3); border-top: 1px solid var(--df-border);
  font-size: var(--df-text-xs); color: var(--df-ink-muted);
}

/* ── Status ──────────────────────────────────────────────────────────────── */
.df-badge {
  display: inline-flex; align-items: center; gap: var(--df-1);
  font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  padding: 3px var(--df-2); border-radius: var(--df-radius-sm);
  background: var(--df-surface-2); color: var(--df-ink-muted); white-space: nowrap;
}
.df-badge--ok   { background: var(--df-ok-soft);   color: var(--df-ok); }
.df-badge--warn { background: var(--df-warn-soft); color: var(--df-warn); }
.df-badge--crit { background: var(--df-crit-soft); color: var(--df-crit); }
.df-badge--info { background: var(--df-info-soft); color: var(--df-info); }
.df-badge--solid{ background: var(--df-primary);   color: var(--df-ink-inverse); }

.df-alert {
  display: flex; gap: var(--df-3); padding: var(--df-3) var(--df-4);
  border-radius: var(--df-radius); font-size: var(--df-text-sm);
  background: var(--df-info-soft); color: var(--df-ink); border-left: 3px solid var(--df-info);
}
.df-alert--ok   { background: var(--df-ok-soft);   border-left-color: var(--df-ok); }
.df-alert--warn { background: var(--df-warn-soft); border-left-color: var(--df-warn); }
.df-alert--crit { background: var(--df-crit-soft); border-left-color: var(--df-crit); }
.df-alert b { font-weight: var(--df-weight-strong); }

.df-progress { height: 6px; border-radius: 999px; background: var(--df-surface-sunken); overflow: hidden; }
.df-progress > span { display: block; height: 100%; background: var(--df-primary); border-radius: 999px; }

/* ── Reiter ──────────────────────────────────────────────────────────────── */
.df-tabs { display: flex; gap: var(--df-1); border-bottom: 1px solid var(--df-border); margin-bottom: var(--df-4); }
.df-tab {
  font: inherit; font-size: var(--df-text-sm); font-weight: var(--df-weight-strong);
  padding: var(--df-2) var(--df-3); border: 0; background: none; color: var(--df-ink-muted);
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: var(--df-2);
}
.df-tab:hover { color: var(--df-ink); }
.df-tab[aria-selected="true"] { color: var(--df-ink); border-bottom-color: var(--df-primary); }
.df-tab:focus-visible { outline: none; box-shadow: var(--df-ring); border-radius: var(--df-radius-sm); }
.df-tab__count {
  font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px;
  background: var(--df-surface-sunken); color: var(--df-ink-muted);
}

/* ── Leerzustand ─────────────────────────────────────────────────────────── */
/* Drei verschiedene Dinge, die heute gleich aussehen: noch nichts da,
   weggefiltert, Abruf gescheitert. Jedes bekommt seinen eigenen Satz. */
.df-empty {
  text-align: center; padding: var(--df-12) var(--df-6); color: var(--df-ink-muted);
  background: var(--df-surface); border: 1px dashed var(--df-border-strong); border-radius: var(--df-radius-lg);
}
.df-empty h3 { font-size: var(--df-text-base); font-weight: var(--df-weight-strong); color: var(--df-ink); margin-bottom: var(--df-1); }
.df-empty p { font-size: var(--df-text-sm); max-width: 46ch; margin: 0 auto var(--df-4); }

/* ── Warten ──────────────────────────────────────────────────────────────── */
/* Platzhalter in der Form des Erwarteten statt eines Kreisels in der Mitte. */
.df-skeleton {
  background: linear-gradient(90deg, var(--df-surface-2) 25%, var(--df-grey-200) 37%, var(--df-surface-2) 63%);
  background-size: 400% 100%; border-radius: var(--df-radius-sm);
  animation: df-schimmer 1.4s ease-in-out infinite; height: 1em;
}
@keyframes df-schimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .df-skeleton { animation: none; } }

/* ── Dialog ──────────────────────────────────────────────────────────────── */
.df-scrim { position: fixed; inset: 0; background: rgba(0,56,69,.42); z-index: 800; }
.df-modal {
  position: fixed; inset: 0; z-index: 801; display: flex; align-items: center; justify-content: center;
  padding: var(--df-4);
}
.df-modal__box {
  background: var(--df-surface); border-radius: var(--df-radius-lg); box-shadow: var(--df-shadow-lg);
  width: 520px; max-width: 100%; max-height: 86vh; overflow: auto;
}
/* Wiederkehrende Falle: Felder im Dialog brauchen IMMER seitliches Polster.
   Deshalb sitzt das Polster hier an der Wurzel und nicht je Dialog. */
.df-modal__head { padding: var(--df-5) var(--df-5) var(--df-3); }
.df-modal__head h3 { font-size: var(--df-text-md); font-weight: var(--df-weight-head); }
.df-modal__body { padding: 0 var(--df-5) var(--df-4); }
.df-modal__foot { padding: var(--df-3) var(--df-5) var(--df-5); display: flex; justify-content: flex-end; gap: var(--df-2); }

/* ── Toast ───────────────────────────────────────────────────────────────── */
.df-toast-stack { position: fixed; right: var(--df-5); bottom: var(--df-5); z-index: 900;
  display: flex; flex-direction: column; gap: var(--df-2); }
.df-toast {
  background: var(--df-petrol); color: #fff; font-size: var(--df-text-sm); font-weight: var(--df-weight-strong);
  padding: var(--df-3) var(--df-4); border-radius: var(--df-radius); box-shadow: var(--df-shadow-lg);
  display: flex; align-items: center; gap: var(--df-2);
}
.df-toast--ok   { background: var(--df-ok); }
.df-toast--crit { background: var(--df-crit); }

/* ── Menüs ───────────────────────────────────────────────────────────────────
   Erhoben am 25.09.2026: acht Tools haben eine eigene Seitennavigation, zwölf
   haben Reiter, zehn eine Art Klappmenü. Nach dem Knopf ist das Menü das am
   zweithäufigsten neu erfundene Bauteil.

   NICHT hier drin: die Burger-Schublade und das Personenmenü oben rechts. Die
   gehören zur gemeinsamen Kopfleiste (`shared/df-shell.js`) und sind in jedem
   Tool schon gleich. Hier geht es nur um Menüs INNERHALB eines Tools. */

/* Klappmenü an einem Knopf: Zeilenaktionen, Export, Spaltenwahl. */
.df-menu { position: relative; display: inline-block; }
.df-menu__panel {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 40;
  min-width: 200px; padding: var(--df-1);
  background: var(--df-surface); border: 1px solid var(--df-border-strong);
  border-radius: var(--df-radius); box-shadow: var(--df-shadow-lg);
}
.df-menu__panel[hidden] { display: none; }
.df-menu__item {
  display: flex; align-items: center; gap: var(--df-2); width: 100%;
  font: inherit; font-size: var(--df-text-sm); text-align: left; color: var(--df-ink);
  padding: var(--df-2) var(--df-3); border: 0; border-radius: var(--df-radius-sm);
  background: none; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.df-menu__item:hover { background: var(--df-surface-2); }
.df-menu__item:focus-visible { outline: none; box-shadow: var(--df-ring); }
.df-menu__item:disabled { opacity: .45; cursor: default; }
.df-menu__item--danger { color: var(--df-crit); }
.df-menu__item--danger:hover { background: var(--df-crit-soft); }
.df-menu__sep { height: 1px; background: var(--df-border); margin: var(--df-1) 0; }
.df-menu__label {
  font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--df-ink-faint); padding: var(--df-2) var(--df-3) var(--df-1);
}

/* Parameterleiste: das Kennzeichen unserer Datenwerkzeuge. Erst einstellen,
   was geholt werden soll, dann holen. Google Analyse, Keyword Volume, FeedX,
   Morning Check und der Kosten-Alarm haben je eine, alle verschieden gebaut.

   Sie klebt unter der Kopfleiste, damit man die Einstellung sieht, zu der die
   Zahlen darunter gehören. Beschriftung immer ÜBER dem Feld: die Leiste bricht
   auf schmalen Fenstern um, und nebeneinander stehende Beschriftungen rutschen
   dabei von ihren Feldern weg. */
.df-parambar {
  position: sticky; top: var(--df-shell-h); z-index: 30;
  background: var(--df-surface); border-bottom: 1px solid var(--df-border-strong);
}
.df-parambar__inner {
  max-width: var(--df-content-max); margin: 0 auto; padding: var(--df-2) var(--df-8);
  display: flex; align-items: flex-end; gap: var(--df-3); flex-wrap: wrap;
}
.df-parambar .df-field { margin-bottom: 0; min-width: 150px; }
.df-parambar .df-field--breit { flex: 1; min-width: 240px; }
/* Die Beschriftung darf eine kleine Nebenaktion tragen, etwa «Liste neu laden». */
.df-parambar .df-label { display: flex; align-items: center; gap: var(--df-1); }
.df-parambar .df-label button {
  font: inherit; font-size: var(--df-text-xs); line-height: 1; padding: 0 2px;
  border: 0; background: none; color: var(--df-ink-faint); cursor: pointer;
}
.df-parambar .df-label button:hover { color: var(--df-primary); }

/* Reiterzeile mit etwas am rechten Rand, etwa einem Umschalter ROAS/CPA. */
.df-tabs--bar { justify-content: space-between; align-items: center; }
.df-tabs--bar > .df-tabs__gruppe { display: flex; gap: var(--df-1); }
.df-tabs--bar > .df-tabs__extra { padding-bottom: var(--df-1); }

/* Seitennavigation: die Liste, aus der man das Ding wählt, um das es geht.
   Zwei Verwendungen, ein Bauteil:
     a) WELCHER Bereich des Tools  (Übersicht, Auslieferung, Setup, Logs)
     b) WELCHE Sache darin         (Kunde, Profil, Konto)
   Der Unterschied ist der Zweck, nicht das Aussehen. Deshalb gibt es hier ein
   Bauteil mit optionalem Icon und optionalen Gruppen, nicht zwei.
   Sie bleibt beim Scrollen stehen und scrollt in sich selbst. */
.df-listnav {
  background: var(--df-surface); border: var(--df-card-border); border-radius: var(--df-radius-lg);
  box-shadow: var(--df-card-shadow); overflow: hidden;
  position: sticky; top: calc(var(--df-shell-h) + var(--df-4));
  display: flex; flex-direction: column; max-height: calc(100vh - var(--df-shell-h) - var(--df-8));
}
.df-listnav__head {
  padding: var(--df-3); border-bottom: 1px solid var(--df-border);
  display: flex; align-items: center; justify-content: space-between; gap: var(--df-2);
  font-weight: var(--df-weight-strong); font-size: var(--df-text-sm);
}
.df-listnav__filter { display: flex; gap: var(--df-1); padding: var(--df-2) var(--df-3); flex-wrap: wrap;
  border-bottom: 1px solid var(--df-border); }
.df-listnav__list { overflow-y: auto; padding: var(--df-1); }
.df-listnav__item {
  display: flex; align-items: center; gap: var(--df-2); width: 100%;
  font: inherit; font-size: var(--df-text-sm); text-align: left; color: var(--df-ink);
  padding: var(--df-2) var(--df-3); border: 0; border-left: 2px solid transparent;
  border-radius: var(--df-radius-sm); background: none; cursor: pointer;
}
.df-listnav__item:hover { background: var(--df-surface-2); }
.df-listnav__item:focus-visible { outline: none; box-shadow: var(--df-ring); }
.df-listnav__item[aria-current="true"] {
  background: var(--df-surface-2); border-left-color: var(--df-primary);
  font-weight: var(--df-weight-strong);
}
.df-listnav__icon {
  width: 17px; height: 17px; flex-shrink: 0; color: var(--df-ink-muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.df-listnav__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.df-listnav__item[aria-current="true"] .df-listnav__icon { color: var(--df-primary); }
/* Gruppentrenner, wenn die Navigation zwei Sorten Einträge mischt: die Arbeit
   oben, das Nachschlagen unten. */
.df-listnav__group { border-top: 1px solid var(--df-border); margin: var(--df-2) var(--df-2); }
.df-listnav__group-label {
  font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--df-ink-faint); padding: var(--df-3) var(--df-3) var(--df-1);
}
.df-listnav__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.df-listnav__n { font-size: 10px; font-weight: 700; color: var(--df-ink-faint); font-variant-numeric: tabular-nums; }
.df-listnav__foot { padding: var(--df-2) var(--df-3); border-top: 1px solid var(--df-border);
  font-size: var(--df-text-xs); color: var(--df-ink-faint); }

/* Segment: zwei bis vier sich ausschliessende Ansichten derselben Sache. */
.df-segment { display: inline-flex; padding: 2px; background: var(--df-surface-sunken);
  border-radius: var(--df-segment-radius); }
.df-segment button {
  font: inherit; font-size: var(--df-text-xs); font-weight: var(--df-weight-strong);
  height: calc(var(--df-control-h) - 6px); padding: 0 var(--df-3);
  border: 0; border-radius: var(--df-segment-radius); background: none;
  color: var(--df-ink-muted); cursor: pointer; white-space: nowrap;
}
/* ZWEI Markierungen fuer dasselbe, mit Absicht: `aria-pressed` ist die
   richtige, weil sie auch der Screenreader vorliest. Ein Tool, das seine
   Leiste als Vorlagen-String neu zeichnet, setzt aber eine Klasse, kein
   Attribut (so der Kosten-Alarm an elf Stellen). Beides zu akzeptieren kostet
   eine Zeile und erspart elf Umbauten. Wer neu baut, nimmt `aria-pressed`. */
.df-segment button[aria-pressed="true"],
.df-segment button.on { background: var(--df-surface); color: var(--df-ink); box-shadow: var(--df-shadow-sm); }
.df-segment button:disabled { color: var(--df-border-strong); cursor: default; box-shadow: none; background: none; }
.df-segment button:focus-visible { outline: none; box-shadow: var(--df-ring); }

/* Schnellwahl: die haeufigen Zeitraeume als Schalterleiste, der Rest hinter
   dem letzten Feld, das denselben Kalender oeffnet (DFDatum.schnellwahl).

   Zwei Zeilen, die beide noetig sind:
   - Der Waehler-Wirt steht auf `static`, damit sein Panel an der GANZEN
     Leiste haengt. Auf `relative` haenge es an einem unsichtbaren Punkt
     rechts neben der Leiste und klappte dort auf.
   - Sein eigener Knopf muss hier verschwinden. Das Attribut `hidden` reicht
     nicht: `.df-datum__knopf` setzt `display: inline-flex`, und eine Regel aus
     diesem Stylesheet schlaegt das `hidden` des Browsers. */
.df-schnellwahl { position: relative; display: inline-flex; }
.df-schnellwahl .df-datum { position: static; }
.df-schnellwahl .df-datum__knopf { display: none; }

/* Aufklappbarer Abschnitt. Sechs Tools benutzen dafür heute <details>. */
.df-collapse { border: var(--df-card-border); border-radius: var(--df-radius-lg);
  background: var(--df-surface); box-shadow: var(--df-card-shadow); overflow: hidden; }
.df-collapse > summary {
  padding: var(--df-3) var(--df-4); cursor: pointer; font-weight: var(--df-weight-strong);
  font-size: var(--df-text-sm); display: flex; align-items: center; gap: var(--df-2);
  list-style: none;
}
.df-collapse > summary::-webkit-details-marker { display: none; }
.df-collapse > summary::before {
  content: '▸'; color: var(--df-ink-faint); transition: transform var(--df-transition);
}
.df-collapse[open] > summary::before { transform: rotate(90deg); }
.df-collapse > summary:focus-visible { outline: none; box-shadow: var(--df-ring); }
.df-collapse__body { padding: 0 var(--df-4) var(--df-4); }

/* ── Zeitraumwahl ────────────────────────────────────────────────────────────
   Gehört zu `shared/df-datum.js`. Ein Feld statt zwei, Vorgaben zuerst,
   Kalender als Ausnahme, unreife Tage gekennzeichnet. */
.df-datum { position: relative; display: inline-block; }
.df-datum__knopf {
  display: inline-flex; align-items: center; gap: var(--df-2); justify-content: space-between;
  text-align: left; cursor: pointer; min-width: 240px;
}
.df-datum__text { font-weight: var(--df-weight-strong); white-space: nowrap; }
.df-datum__zusatz {
  font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--df-ink-faint); background: var(--df-surface-2);
  padding: 2px var(--df-2); border-radius: var(--df-radius-sm); white-space: nowrap;
}
.df-datum__panel {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 60;
  background: var(--df-surface); border: 1px solid var(--df-border-strong);
  border-radius: var(--df-radius-lg); box-shadow: var(--df-shadow-lg);
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'vorgaben kalender' 'fuss fuss';
}
.df-datum__panel[hidden] { display: none; }
/* Gesetzt von df-datum.js, wenn das Feld rechts aus dem Fenster ragen wuerde. */
.df-datum__panel--rechts { left: auto; right: 0; }
.df-datum__vorgaben {
  grid-area: vorgaben; display: flex; flex-direction: column; gap: 2px;
  padding: var(--df-2); border-right: 1px solid var(--df-border); min-width: 150px;
}
.df-datum__vorgabe {
  font: inherit; font-size: var(--df-text-sm); text-align: left; white-space: nowrap;
  padding: var(--df-2) var(--df-3); border: 0; border-radius: var(--df-radius-sm);
  background: none; color: var(--df-ink); cursor: pointer;
}
.df-datum__vorgabe:hover { background: var(--df-surface-2); }
.df-datum__vorgabe[aria-current="true"] { background: var(--df-primary); color: var(--df-ink-inverse); font-weight: var(--df-weight-strong); }
.df-datum__kalender { grid-area: kalender; padding: var(--df-3); }
.df-datum__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--df-2); margin-bottom: var(--df-2); }
.df-datum__monate { font-size: var(--df-text-sm); font-weight: var(--df-weight-strong); }
.df-datum__gitter { display: flex; gap: var(--df-4); }
.df-datum__wochentage, .df-datum__tage { display: grid; grid-template-columns: repeat(7, 30px); }
.df-datum__wochentage span {
  font-size: 10px; font-weight: 700; color: var(--df-ink-faint); text-align: center; padding-bottom: var(--df-1);
}
.df-datum__tage button {
  font: inherit; font-size: var(--df-text-xs); height: 28px; border: 0; background: none;
  color: var(--df-ink); cursor: pointer; border-radius: var(--df-radius-sm); font-variant-numeric: tabular-nums;
}
.df-datum__tage button:hover { background: var(--df-surface-2); }
.df-datum__tage button.drin { background: var(--df-info-soft); border-radius: 0; }
.df-datum__tage button.rand { background: var(--df-primary); color: var(--df-ink-inverse); font-weight: var(--df-weight-strong); }
.df-datum__tage button.rand--von { border-radius: var(--df-radius-sm) 0 0 var(--df-radius-sm); }
.df-datum__tage button.rand--bis { border-radius: 0 var(--df-radius-sm) var(--df-radius-sm) 0; }
.df-datum__tage button.heute { box-shadow: inset 0 0 0 1px var(--df-border-strong); }
/* Unreife Tage: sichtbar, aber erkennbar unfertig. Nicht verstecken, sonst
   sucht man sie. */
.df-datum__tage button.unreif { color: var(--df-ink-faint); background-image:
  repeating-linear-gradient(45deg, transparent, transparent 3px, var(--df-surface-2) 3px, var(--df-surface-2) 6px); }
.df-datum__tage button:disabled { color: var(--df-grey-300); cursor: default; background: none; }
.df-datum__reife { font-size: var(--df-text-xs); color: var(--df-ink-faint); margin-top: var(--df-2); }
/* Waehrend eine Spanne offen ist, ist diese Zeile eine Anweisung und kein
   Kleingedrucktes. */
.df-datum__reife--aktiv { color: var(--df-primary); font-weight: var(--df-weight-strong); }
.df-datum__fuss {
  grid-area: fuss; display: flex; align-items: center; justify-content: space-between; gap: var(--df-3);
  padding: var(--df-2) var(--df-3); border-top: 1px solid var(--df-border); background: var(--df-surface-2);
}
@media (max-width: 720px) {
  .df-datum__panel { grid-template-columns: 1fr; grid-template-areas: 'vorgaben' 'kalender' 'fuss'; }
  .df-datum__vorgaben { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--df-border); }
  .df-datum__gitter { flex-direction: column; }
}

/* ── Prozessleiste ───────────────────────────────────────────────────────────
   Ein Ablauf mit Reihenfolge und Zustaenden: erledigt, jetzt, wartet, gesperrt,
   Problem. Kein Reiter: Reiter sind gleichwertige Ansichten. Erster Nutzer FeedX
   (09.10.2026), zweiter absehbar die Spesen (.stepper in spesen-v2.html).
   Gesperrte Schritte sind disabled und nennen ihren Grund in .df-step__sub,
   statt nur blass zu werden. Markup: UI-STANDARD.md, Muster: ui-muster.html.

   Zustand nie nur ueber Farbe: erledigt zeigt ein Haekchen statt der Nummer,
   Problem ein Ausrufezeichen, und jede Unterzeile sagt es in Worten. Problem
   sitzt auf dem aktiven Schritt und schlaegt dort dessen Farbe (eigene Regel
   mit aria-current, sonst gewinnt die Regel des aktiven Schritts). */
.df-steps {
  display: flex; gap: var(--df-1); list-style: none; margin: 0 0 var(--df-6); padding: 0;
  counter-reset: df-step; position: sticky; top: var(--df-shell-h); z-index: 20; background: var(--df-bg);
}
.df-step { flex: 1; min-width: 0; counter-increment: df-step; }
.df-step__btn {
  width: 100%; display: flex; align-items: center; gap: var(--df-2); text-align: left;
  font: inherit; font-size: var(--df-text-sm); font-weight: var(--df-weight-strong); color: var(--df-ink-muted);
  padding: var(--df-2) var(--df-3); background: none; border: 0; border-bottom: 2px solid var(--df-border);
  cursor: pointer;
}
.df-step__btn:hover:not(:disabled) { color: var(--df-ink); }
.df-step__btn:disabled { cursor: default; color: var(--df-ink-faint); }
.df-step__btn:focus-visible { outline: none; box-shadow: var(--df-ring); }
.df-step__nr {
  width: 24px; height: 24px; flex: none; border-radius: var(--df-radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--df-text-xs); font-weight: var(--df-weight-strong);
  background: var(--df-surface-sunken); color: var(--df-ink-muted);
}
.df-step__nr::before { content: counter(df-step); }
.df-step__text { min-width: 0; display: flex; flex-direction: column; }
.df-step__sub {
  font-size: var(--df-text-xs); font-weight: 400; color: var(--df-ink-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.df-step[aria-current="step"] .df-step__btn { color: var(--df-ink); border-bottom-color: var(--df-primary); }
.df-step[aria-current="step"] .df-step__nr { background: var(--df-primary); color: var(--df-ink-inverse); }
.df-step--erledigt .df-step__nr { background: var(--df-ok-soft); color: var(--df-ok); }
.df-step--erledigt .df-step__nr::before { content: '\2713'; }
.df-step--wartet .df-step__nr { background: var(--df-info-soft); color: var(--df-info); }
.df-step--problem .df-step__nr,
.df-step--problem[aria-current="step"] .df-step__nr { background: var(--df-crit-soft); color: var(--df-crit); }
.df-step--problem .df-step__nr::before { content: '!'; }
.df-step--problem[aria-current="step"] .df-step__btn { border-bottom-color: var(--df-crit); }
/* Unterzeile in Tinte statt Rot: Rot schafft als 12-px-Text nur 3.9:1. Die Farbe traegt die Nummer. */
.df-step--problem .df-step__sub { color: var(--df-ink); font-weight: var(--df-weight-strong); }
@media (max-width: 720px) {
  /* Kompakt statt gestapelt: eine Zeile mit den Nummern, Text nur beim aktiven Schritt.
     Die anderen Texte bleiben fuer Screenreader im Knopf (visuell versteckt). */
  .df-steps { position: static; gap: 0; }
  .df-step { flex: 0 0 auto; }
  .df-step[aria-current="step"] { flex: 1 1 auto; min-width: 0; }
  .df-step__btn { padding: var(--df-2); }
  .df-step:not([aria-current="step"]) .df-step__text {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* ── Diagrammrollen ──────────────────────────────────────────────────────────
   Diagramme schreiben diese Rollen direkt in SVG-Attribute
   (fill="var(--df-chart-fokus)"); das dunkle Design kommt dadurch von selbst.
   Fokus = die Reihe, um die es geht (z. B. Testgruppe), Vergleich = Bezugsreihe,
   die zuruecktritt (Kontrolle). Urteile (besser, schlechter) tragen die
   Zustandsrollen --df-ok/--df-crit, nie die Reihenfarben. Text traegt nie die
   Reihenfarbe, sondern --df-chart-achse.

   Geprueft am 09.10.2026 mit dem Palettenpruefer (design.md 4.2) und nach WCAG,
   Flaeche Karte (hell weiss, dunkel --df-grey-050) und Band (--df-surface-2):
   - Fokus/Vergleich: CVD-Abstand hell 20.4, dunkel 8.2 (Ziel >= 8); Normalsicht
     26.9 bzw. 19.7. Kontrast Fokus 8.8:1 / 5.3:1, Vergleich 3.3:1 / 3.3:1, auf
     dem Band 3.0:1 (Ziel fuer Linien >= 3:1). Vergleich ist bewusst grau
     (Hervorhebung: eine Reihe farbig, die Bezugsreihe tritt zurueck).
   - Achse ist --df-ink-muted, NICHT --df-ink-faint wie im ersten Entwurf: die
     Achsenwerte sind 12-px-Text und brauchen 4.5:1. ink-faint schafft hell nur
     3.3:1, ink-muted 4.9:1 (dunkel 6.1:1, auf dem Band 4.5 bzw. 5.6).
   - Null/Bezug ist mit 1.6:1 absichtlich leise (eine Bezugslinie, kein Datum);
     ihre Lage traegt die Achsenbeschriftung «0 %» bzw. «100».
   - Raster 1.2:1 und Band 1.1:1 sind Hintergrund und tragen keine Aussage. */
:root {
  --df-chart-fokus:     var(--df-beere);
  --df-chart-vergleich: var(--df-slate-400);
  --df-chart-grid:      var(--df-border);
  --df-chart-achse:     var(--df-ink-muted);
  --df-chart-band:      var(--df-surface-2);
  --df-chart-null:      var(--df-border-strong);
  --df-chart-markiert:  var(--df-warn-soft);
}
:root[data-theme="dark"] {
  --df-chart-fokus:     #D9709F;
  --df-chart-vergleich: #6B7176;
}

/* ── Hilfe und Erklärungen ───────────────────────────────────────────────────
   Neu am 20.10.2026 (dreifive MMM, Phase 5). Verhalten in shared/df-hilfe.js
   (window.DFHilfe), Markup im Tool (MMM: tools/mmm/hilfe.js). Drei Teile:
   .df-hilfe       der runde i-Knopf neben einem Wort. Die Fläche ist 28 px
                   (WCAG 2.5.8), der sichtbare Kreis 18 px; der negative Rand
                   hält die Zeilenhöhe ruhig.
   .df-begriff     ein Wort im Satz, gepunktet unterstrichen, selbst der Knopf.
   .df-hilfe-tip   die eine Blase am body, höchstens 280 px breit.
   Nicht .df-info und .df-tip: --df-info ist schon eine Farbrolle und
   .df-badge--info ein Badge. Nur Rollen, kein Hex-Wert, kein eigenes :root. */
.df-hilfe {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  width: var(--df-control-h-sm); height: var(--df-control-h-sm); margin: -5px 0; padding: 0;
  border: 0; border-radius: var(--df-radius-pill); background: transparent;
  color: var(--df-ink-muted); font: inherit; cursor: help; flex: none;
}
.df-hilfe__i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: var(--df-radius-pill);
  border: 1.5px solid currentColor; font-size: var(--df-text-xs); font-weight: var(--df-weight-strong);
  font-style: italic; line-height: 1;
}
.df-hilfe:hover, .df-hilfe[data-offen] { color: var(--df-ink); }
.df-hilfe:hover .df-hilfe__i, .df-hilfe[data-offen] .df-hilfe__i { background: var(--df-surface-2); }
.df-hilfe:focus-visible { outline: none; box-shadow: var(--df-ring); }

.df-begriff {
  display: inline; padding: 0; margin: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: inherit; cursor: help;
  text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: 3px;
  text-decoration-color: var(--df-ink-faint);
}
.df-begriff:hover, .df-begriff[data-offen] { text-decoration-color: var(--df-ink); }
.df-begriff:focus-visible { outline: none; box-shadow: var(--df-ring); border-radius: var(--df-radius-sm); }

.df-hilfe-tip {
  position: fixed; z-index: 950; top: 0; left: 0;
  max-width: min(280px, calc(100vw - 16px)); padding: var(--df-2) var(--df-3);
  background: var(--df-surface); color: var(--df-ink); border: 1px solid var(--df-border-strong);
  border-radius: var(--df-radius); box-shadow: var(--df-shadow-lg);
  font-family: var(--df-font); font-size: var(--df-text-sm); font-weight: normal; line-height: 1.45;
  text-align: left; white-space: normal; overflow-wrap: break-word;
}
.df-hilfe-tip[hidden] { display: none; }
.df-hilfe-tip p { margin: 0; }
.df-hilfe-tip__fach, .df-hilfe-tip .df-hilfe-tip__fach { margin-top: var(--df-1); font-size: var(--df-text-xs); color: var(--df-ink-muted); }
.df-hilfe-tip__mehr { display: inline-block; min-height: 24px; margin-top: var(--df-1); padding: 0; border: 0; background: none; font: inherit; font-size: var(--df-text-xs); color: inherit; text-decoration: underline; cursor: pointer; }
@media (prefers-reduced-motion: no-preference) {
  .df-hilfe-tip:not([hidden]) { animation: df-hilfe-ein 120ms ease-out; }
  @keyframes df-hilfe-ein { from { opacity: 0; } to { opacity: 1; } }
}
/* Langform von DFHilfe.oeffne(): der gewohnte Dialog (.df-modal), Absätze mit Luft. */
.df-hilfe-dialog__rumpf p { margin: 0 0 var(--df-2); max-width: var(--df-prose-max); }
.df-hilfe-dialog__rumpf p:last-child { margin-bottom: 0; }

/* ── Hilfsklassen ────────────────────────────────────────────────────────── */
.df-muted    { color: var(--df-ink-muted); }
.df-faint    { color: var(--df-ink-faint); }
.df-nums     { font-variant-numeric: tabular-nums; }
.df-mono-txt { font-family: var(--df-font-mono); }
.df-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.df-prose    { max-width: var(--df-prose-max); font-size: var(--df-text-base); color: var(--df-ink-muted); }
.df-sr-only  { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Schmale Fenster ─────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .df-content { padding: var(--df-4) var(--df-4); }
  .df-toolbar { align-items: stretch; }
  .df-search { min-width: 0; width: 100%; }
}