/* byRichard Design System v1 — erzeugt von _bin/build-ui am 25.08.2026 23:05.
   NICHT von Hand bearbeiten. Quellen: tokens.css, ui.css. */

/* ============================================================
   byRichard Design System · v1 · Tokens
   Die einzige Stelle, an der Werte definiert werden.
   Nichts anderes im System schreibt je einen Hex-Wert hin.
   ============================================================ */

@font-face {
  font-family: "Inter var";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/InterVariable.woff2") format("woff2");
}

:root {
  /* ---------- Farbe: Interaktion ----------
     Genau ein Akzent. Eine zweite Akzentfarbe gibt es bewusst nicht. */
  --dt-primary:          #0066cc;  /* Standard auf hellen Flaechen        */
  --dt-primary-focus:    #0071e3;  /* Fokusring, ausgewaehlte Controls     */
  --dt-primary-on-dark:  #2997ff;  /* NUR auf dunklen Flaechen            */

  /* ---------- Farbe: Text ---------- */
  --dt-ink:              #1d1d1f;
  --dt-body:             #1d1d1f;
  --dt-body-on-dark:     #ffffff;
  --dt-body-muted:       #cccccc;  /* gedaempft auf dunkel                */
  --dt-ink-muted-80:     #333333;
  --dt-ink-muted-48:     #7a7a7a;

  /* ---------- Farbe: Linien ---------- */
  --dt-divider-soft:     #f0f0f0;
  --dt-hairline:         #e0e0e0;

  /* ---------- Farbe: Flaechen ---------- */
  --dt-canvas:           #ffffff;
  --dt-canvas-parchment: #f5f5f7;
  --dt-surface-pearl:    #fafafc;
  --dt-surface-tile-1:   #272729;
  --dt-surface-tile-2:   #2a2a2c;
  --dt-surface-tile-3:   #252527;
  --dt-surface-black:    #000000;
  --dt-surface-chip:     rgba(210, 210, 215, 0.64);
  --dt-surface-card:     #ffffff;  /* Karte auf heller Sektion            */
  --dt-nav-border:       transparent; /* im Hellen traegt Schwarz selbst  */
  --dt-utility-bg:       #1d1d1f;  /* Werkzeug-Button                     */
  --dt-utility-fg:       #ffffff;
  --dt-on-primary:       #ffffff;
  --dt-on-dark:          #ffffff;

  /* ---------- Farbe: Status ----------
     Kein zweiter Akzent, sondern Systemsemantik: diese Farben stehen
     ausschliesslich fuer Maschinenzustand (Container laeuft / gestoppt /
     unklar) und niemals fuer Interaktion. Werte aus Apples Systempalette
     in den Varianten, die auf Weiss AA erreichen.                        */
  --dt-status-ok:        #1a7f37;
  --dt-status-warn:      #b25000;
  --dt-status-err:       #d70015;
  --dt-status-ok-on-dark:   #30d158;
  --dt-status-warn-on-dark: #ff9f0a;
  --dt-status-err-on-dark:  #ff453a;

  /* ---------- Typografie: Familien ---------- */
  --dt-font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont,
                     "Inter var", system-ui, sans-serif;
  --dt-font-text:    "SF Pro Text", -apple-system, BlinkMacSystemFont,
                     "Inter var", system-ui, sans-serif;
  --dt-font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* ---------- Typografie: Gewichte ----------
     300 nur fuer bewusst luftige, grosse Flaechen. 500 existiert nicht. */
  --dt-weight-light:   300;
  --dt-weight-regular: 400;
  --dt-weight-semi:    600;

  /* ---------- Typografie: Skala (size / line-height / tracking) ---------- */
  --dt-hero-display-size:   56px;  --dt-hero-display-lh:  1.07; --dt-hero-display-ls: -0.28px;
  --dt-display-lg-size:     40px;  --dt-display-lg-lh:    1.10; --dt-display-lg-ls:  0;
  --dt-display-md-size:     34px;  --dt-display-md-lh:    1.47; --dt-display-md-ls:  -0.374px;
  --dt-lead-size:           28px;  --dt-lead-lh:          1.14; --dt-lead-ls:         0.196px;
  --dt-lead-airy-size:      24px;  --dt-lead-airy-lh:     1.50; --dt-lead-airy-ls:    0;
  --dt-tagline-size:        21px;  --dt-tagline-lh:       1.19; --dt-tagline-ls:      0.231px;
  --dt-body-size:           17px;  --dt-body-lh:          1.47; --dt-body-ls:        -0.374px;
  --dt-body-strong-lh:      1.24;
  --dt-dense-link-lh:       2.41;
  --dt-button-large-size:   18px;
  --dt-caption-size:        14px;  --dt-caption-lh:       1.43; --dt-caption-ls:     -0.224px;
  --dt-caption-strong-lh:   1.29;
  --dt-fine-print-size:     12px;  --dt-fine-print-lh:    1;    --dt-fine-print-ls:  -0.12px;
  --dt-micro-legal-size:    10px;  --dt-micro-legal-lh:   1.30; --dt-micro-legal-ls: -0.08px;
  --dt-nav-link-size:       12px;  --dt-nav-link-lh:      1;    --dt-nav-link-ls:    -0.12px;

  /* ---------- Radius ----------
     Werte ausserhalb dieser Skala kommen nicht vor. */
  --dt-radius-none: 0px;
  --dt-radius-xs:   5px;
  --dt-radius-sm:   8px;   /* kompakte Utility-Controls */
  --dt-radius-md:   11px;
  --dt-radius-lg:   18px;  /* Karten                    */
  --dt-radius-pill: 9999px;/* primaere Aktionen, Chips  */
  --dt-radius-full: 50%;

  /* ---------- Abstand: 8px-Rhythmus ---------- */
  --dt-space-xxs:     4px;
  --dt-space-xs:      8px;
  --dt-space-sm:     12px;
  --dt-space-md:     17px;
  --dt-space-lg:     24px;
  --dt-space-xl:     32px;
  --dt-space-xxl:    48px;
  --dt-space-section:80px;

  /* ---------- Tiefe ----------
     Genau ein Schatten, und der gehoert der Bildflaeche, nicht der UI. */
  --dt-hairline-border: 1px solid rgba(0, 0, 0, 0.08);
  --dt-product-shadow:  3px 5px 30px 0 rgba(0, 0, 0, 0.22);
  --dt-frosted:         saturate(180%) blur(20px);

  /* ---------- Layout ---------- */
  --dt-measure-text: 980px;   /* textlastige Inhalte */
  --dt-measure-grid: 1440px;  /* Raster              */
  --dt-nav-height:   44px;
  --dt-subnav-height:52px;
  --dt-touch-target: 44px;

  color-scheme: light;
}

/* --- Dunkel: Systemvorgabe, sofern nicht ausdruecklich hell gewaehlt --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
/* ============================================================
   byRichard Design System · v1 · Dunkle Palette
   NUR die Werte, die sich gegenueber tokens.css aendern.
   Diese Datei enthaelt bewusst KEINEN Selektor — _bin/build-ui
   setzt sie in beide Kontexte ein (Systemvorgabe und Umschalter),
   damit der Wert trotzdem nur einmal existiert.

   Grundgedanke: die Rollen bleiben, die Helligkeiten wandern.
   Was hell "Leinwand" hiess, ist dunkel die tiefste Flaeche; was
   hell "dunkle Sektion" hiess, ist dunkel die angehobene. Der
   Wechsel hell/dunkel als Gliederung bleibt damit erhalten.
   ============================================================ */

  color-scheme: dark;

  /* ---------- Interaktion ----------
     Das helle Blau traegt auf dunklem Grund nicht; es weicht dem
     helleren Systemblau. Es bleibt genau ein Akzent.            */
  --dt-primary:          #0a84ff;
  --dt-primary-focus:    #0a84ff;
  --dt-primary-on-dark:  #2997ff;

  /* ---------- Text ----------
     Die Namen beschreiben die Rolle, nicht die Helligkeit —
     darum kippen die Werte, ohne dass ein Name falsch wird.     */
  --dt-ink:              #f5f5f7;
  --dt-body:             #f5f5f7;
  --dt-body-on-dark:     #f5f5f7;
  --dt-body-muted:       #98989d;
  --dt-ink-muted-80:     #c7c7cc;
  --dt-ink-muted-48:     #8e8e93;

  /* ---------- Linien ---------- */
  --dt-divider-soft:     #2c2c2e;
  --dt-hairline:         #38383a;
  --dt-hairline-border:  1px solid rgba(255, 255, 255, 0.12);

  /* ---------- Flaechen ---------- */
  --dt-canvas:           #000000;
  --dt-canvas-parchment: #1c1c1e;
  --dt-surface-card:     #1c1c1e;
  --dt-surface-pearl:    #1c1c1e;
  --dt-surface-tile-1:   #1c1c1e;
  --dt-surface-tile-2:   #2c2c2e;
  --dt-surface-tile-3:   #161618;
  --dt-surface-black:    #000000;
  --dt-surface-chip:     rgba(72, 72, 74, 0.72);

  /* Die Navigation ist schwarz wie die Leinwand — ohne Haarlinie
     verloere sie ihre Kante. Im Hellen ist die Linie unsichtbar. */
  --dt-nav-border:       rgba(255, 255, 255, 0.14);

  --dt-utility-bg:       rgba(255, 255, 255, 0.16);
  --dt-utility-fg:       #f5f5f7;

  /* ---------- Status ----------
     Die gedeckten Varianten verlieren auf Schwarz den Kontrast. */
  --dt-status-ok:        #30d158;
  --dt-status-warn:      #ff9f0a;
  --dt-status-err:       #ff453a;
  }
}

/* --- Dunkel: ausdruecklich per Umschalter gewaehlt --- */
:root[data-theme="dark"] {
/* ============================================================
   byRichard Design System · v1 · Dunkle Palette
   NUR die Werte, die sich gegenueber tokens.css aendern.
   Diese Datei enthaelt bewusst KEINEN Selektor — _bin/build-ui
   setzt sie in beide Kontexte ein (Systemvorgabe und Umschalter),
   damit der Wert trotzdem nur einmal existiert.

   Grundgedanke: die Rollen bleiben, die Helligkeiten wandern.
   Was hell "Leinwand" hiess, ist dunkel die tiefste Flaeche; was
   hell "dunkle Sektion" hiess, ist dunkel die angehobene. Der
   Wechsel hell/dunkel als Gliederung bleibt damit erhalten.
   ============================================================ */

  color-scheme: dark;

  /* ---------- Interaktion ----------
     Das helle Blau traegt auf dunklem Grund nicht; es weicht dem
     helleren Systemblau. Es bleibt genau ein Akzent.            */
  --dt-primary:          #0a84ff;
  --dt-primary-focus:    #0a84ff;
  --dt-primary-on-dark:  #2997ff;

  /* ---------- Text ----------
     Die Namen beschreiben die Rolle, nicht die Helligkeit —
     darum kippen die Werte, ohne dass ein Name falsch wird.     */
  --dt-ink:              #f5f5f7;
  --dt-body:             #f5f5f7;
  --dt-body-on-dark:     #f5f5f7;
  --dt-body-muted:       #98989d;
  --dt-ink-muted-80:     #c7c7cc;
  --dt-ink-muted-48:     #8e8e93;

  /* ---------- Linien ---------- */
  --dt-divider-soft:     #2c2c2e;
  --dt-hairline:         #38383a;
  --dt-hairline-border:  1px solid rgba(255, 255, 255, 0.12);

  /* ---------- Flaechen ---------- */
  --dt-canvas:           #000000;
  --dt-canvas-parchment: #1c1c1e;
  --dt-surface-card:     #1c1c1e;
  --dt-surface-pearl:    #1c1c1e;
  --dt-surface-tile-1:   #1c1c1e;
  --dt-surface-tile-2:   #2c2c2e;
  --dt-surface-tile-3:   #161618;
  --dt-surface-black:    #000000;
  --dt-surface-chip:     rgba(72, 72, 74, 0.72);

  /* Die Navigation ist schwarz wie die Leinwand — ohne Haarlinie
     verloere sie ihre Kante. Im Hellen ist die Linie unsichtbar. */
  --dt-nav-border:       rgba(255, 255, 255, 0.14);

  --dt-utility-bg:       rgba(255, 255, 255, 0.16);
  --dt-utility-fg:       #f5f5f7;

  /* ---------- Status ----------
     Die gedeckten Varianten verlieren auf Schwarz den Kontrast. */
  --dt-status-ok:        #30d158;
  --dt-status-warn:      #ff9f0a;
  --dt-status-err:       #ff453a;
}

/* ============================================================
   byRichard Design System · v1 · Komponenten
   Setzt ausschliesslich Tokens ein — keine eigenen Werte.
   ============================================================ */

/* ---------- Grundlage ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--dt-canvas);
  color: var(--dt-body);
  font-family: var(--dt-font-text);
  font-size: var(--dt-body-size);
  font-weight: var(--dt-weight-regular);
  line-height: var(--dt-body-lh);
  letter-spacing: var(--dt-body-ls);
  -webkit-font-smoothing: antialiased;
}

/* Kontextvariablen: die Sektion entscheidet, was Text, Linie und Link
   bedeuten. Dadurch funktioniert dieselbe Karte auf hell wie auf dunkel,
   und "primary-on-dark auf heller Flaeche" kann gar nicht erst passieren. */
:root,
.dt-on-light,
.dt-section--light,
.dt-section--parchment,
.dt-footer,
.dt-dialog {
  --dt-fg:        var(--dt-ink);
  --dt-fg-muted:  var(--dt-ink-muted-48);
  --dt-link:      var(--dt-primary);
  --dt-surface:   var(--dt-surface-card);
  --dt-line:      var(--dt-hairline);
  --dt-status-ok-ctx:   var(--dt-status-ok);
  --dt-status-warn-ctx: var(--dt-status-warn);
  --dt-status-err-ctx:  var(--dt-status-err);
}
.dt-on-dark,
.dt-nav,
.dt-section--dark,
.dt-section--dark-alt,
.dt-section--black {
  --dt-fg:        var(--dt-body-on-dark);
  --dt-fg-muted:  var(--dt-body-muted);
  --dt-link:      var(--dt-primary-on-dark);
  --dt-surface:   var(--dt-surface-tile-2);
  --dt-line:      rgba(255, 255, 255, 0.14);
  --dt-status-ok-ctx:   var(--dt-status-ok-on-dark);
  --dt-status-warn-ctx: var(--dt-status-warn-on-dark);
  --dt-status-err-ctx:  var(--dt-status-err-on-dark);
}

a { color: var(--dt-link); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--dt-primary-focus);
  outline-offset: 2px;
}

img, svg { max-width: 100%; }

/* ---------- Typografie ---------- */
.dt-hero-display {
  font-family: var(--dt-font-display); font-size: var(--dt-hero-display-size);
  font-weight: var(--dt-weight-semi);   line-height: var(--dt-hero-display-lh);
  letter-spacing: var(--dt-hero-display-ls); margin: 0;
}
.dt-display-lg {
  font-family: var(--dt-font-display); font-size: var(--dt-display-lg-size);
  font-weight: var(--dt-weight-semi);   line-height: var(--dt-display-lg-lh);
  letter-spacing: var(--dt-display-lg-ls); margin: 0;
}
.dt-display-md {
  font-family: var(--dt-font-text);    font-size: var(--dt-display-md-size);
  font-weight: var(--dt-weight-semi);   line-height: var(--dt-display-md-lh);
  letter-spacing: var(--dt-display-md-ls); margin: 0;
}
.dt-lead {
  font-family: var(--dt-font-display); font-size: var(--dt-lead-size);
  font-weight: var(--dt-weight-regular); line-height: var(--dt-lead-lh);
  letter-spacing: var(--dt-lead-ls); margin: 0;
}
.dt-lead-airy {
  font-family: var(--dt-font-text);    font-size: var(--dt-lead-airy-size);
  font-weight: var(--dt-weight-light);  line-height: var(--dt-lead-airy-lh);
  letter-spacing: var(--dt-lead-airy-ls); margin: 0;
}
.dt-tagline {
  font-family: var(--dt-font-display); font-size: var(--dt-tagline-size);
  font-weight: var(--dt-weight-semi);   line-height: var(--dt-tagline-lh);
  letter-spacing: var(--dt-tagline-ls); margin: 0;
}
.dt-body { font-size: var(--dt-body-size); line-height: var(--dt-body-lh); margin: 0; }
.dt-body-strong {
  font-size: var(--dt-body-size); font-weight: var(--dt-weight-semi);
  line-height: var(--dt-body-strong-lh); letter-spacing: var(--dt-body-ls); margin: 0;
}
.dt-dense-link { font-size: var(--dt-body-size); line-height: var(--dt-dense-link-lh); }
.dt-caption {
  font-size: var(--dt-caption-size); line-height: var(--dt-caption-lh);
  letter-spacing: var(--dt-caption-ls); margin: 0;
}
.dt-caption-strong {
  font-size: var(--dt-caption-size); font-weight: var(--dt-weight-semi);
  line-height: var(--dt-caption-strong-lh); letter-spacing: var(--dt-caption-ls); margin: 0;
}
.dt-fine-print {
  font-size: var(--dt-fine-print-size); line-height: var(--dt-fine-print-lh);
  letter-spacing: var(--dt-fine-print-ls); margin: 0;
}
.dt-micro-legal {
  font-size: var(--dt-micro-legal-size); line-height: var(--dt-micro-legal-lh);
  letter-spacing: var(--dt-micro-legal-ls); margin: 0;
}
.dt-muted { color: var(--dt-fg-muted); }
.dt-mono  { font-family: var(--dt-font-mono); font-variant-numeric: tabular-nums; }

/* ---------- Globale Navigation ----------
   Duenn, schwarz, leise — der Inhalt darunter fuehrt. */
.dt-nav {
  height: var(--dt-nav-height);
  background: var(--dt-surface-black);
  border-bottom: 1px solid var(--dt-nav-border);
  color: var(--dt-on-dark);
  display: flex; align-items: center; gap: var(--dt-space-lg);
  padding: 0 var(--dt-space-lg);
}
.dt-nav__inner {
  width: 100%; max-width: var(--dt-measure-grid); margin: 0 auto;
  display: flex; align-items: center; gap: var(--dt-space-lg);
}
.dt-nav a {
  color: var(--dt-on-dark); opacity: .88;
  font-size: var(--dt-nav-link-size); line-height: var(--dt-nav-link-lh);
  letter-spacing: var(--dt-nav-link-ls);
}
.dt-nav a:hover { opacity: 1; text-decoration: none; }
.dt-nav__brand { font-weight: var(--dt-weight-semi); }
.dt-nav__spacer { margin-left: auto; }

/* ---------- Milchglas-Subnavigation ---------- */
.dt-subnav {
  position: sticky; top: 0; z-index: 20;
  height: var(--dt-subnav-height);
  background: color-mix(in srgb, var(--dt-canvas-parchment) 82%, transparent);
  -webkit-backdrop-filter: var(--dt-frosted);
  backdrop-filter: var(--dt-frosted);
  border-bottom: var(--dt-hairline-border);
  display: flex; align-items: center; padding: 0 var(--dt-space-lg);
}
.dt-subnav__inner {
  width: 100%; max-width: var(--dt-measure-grid); margin: 0 auto;
  display: flex; align-items: center; gap: var(--dt-space-md);
}
.dt-subnav__title {
  font-family: var(--dt-font-display); font-size: var(--dt-tagline-size);
  font-weight: var(--dt-weight-semi); letter-spacing: var(--dt-tagline-ls);
}
.dt-subnav__links {
  margin-left: auto; display: flex; align-items: center; gap: var(--dt-space-lg);
  font-size: var(--dt-caption-size); letter-spacing: var(--dt-caption-ls);
}

/* ---------- Sektionen ----------
   Volle Breite, kein Abstand dazwischen. Der Farbwechsel ist der Trenner. */
.dt-section { padding-block: var(--dt-space-section); }
.dt-section--light     { background: var(--dt-canvas);           color: var(--dt-fg); }
.dt-section--parchment { background: var(--dt-canvas-parchment); color: var(--dt-fg); }
.dt-section--dark      { background: var(--dt-surface-tile-1); color: var(--dt-fg); }
.dt-section--dark-alt  { background: var(--dt-surface-tile-3); color: var(--dt-fg); }
.dt-section--black     { background: var(--dt-surface-black);  color: var(--dt-fg); }

.dt-container      { max-width: var(--dt-measure-text); margin: 0 auto; padding-inline: var(--dt-space-lg); }
.dt-container--wide{ max-width: var(--dt-measure-grid); margin: 0 auto; padding-inline: var(--dt-space-lg); }
.dt-center { text-align: center; }

/* ---------- Raster ---------- */
.dt-grid {
  display: grid; gap: var(--dt-space-lg);
  grid-template-columns: repeat(var(--dt-cols, 3), minmax(0, 1fr));
}
.dt-grid--4 { --dt-cols: 4; }
.dt-grid--5 { --dt-cols: 5; }
.dt-grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* ---------- Utility-Karte ----------
   Flach. Kein Schatten. Die Haarlinie traegt die Abgrenzung. */
.dt-card {
  display: block;
  background: var(--dt-surface);
  color: var(--dt-fg);
  border: 1px solid var(--dt-line);
  border-radius: var(--dt-radius-lg);
  padding: var(--dt-space-lg);
  box-shadow: none;
  text-decoration: none;
}
a.dt-card:hover { text-decoration: none; border-color: var(--dt-link); }
.dt-card__title { font-size: var(--dt-body-size); font-weight: var(--dt-weight-semi);
                  line-height: var(--dt-body-strong-lh); letter-spacing: var(--dt-body-ls);
                  margin: 0 0 var(--dt-space-xxs); }
.dt-card__text  { color: var(--dt-fg-muted); margin: 0; }
.dt-card__link  { color: var(--dt-link); margin-top: var(--dt-space-sm); display: inline-block; }

/* ---------- Schaltflaechen ---------- */
.dt-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--dt-font-text); font-size: var(--dt-body-size);
  font-weight: var(--dt-weight-regular); line-height: 1;
  min-height: var(--dt-touch-target);
  border: 0; cursor: pointer; text-decoration: none;
  transition: transform .12s ease, background-color .12s ease, color .12s ease;
}
.dt-btn:hover  { text-decoration: none; }
.dt-btn:active { transform: scale(0.95); }

.dt-btn--primary {
  background: var(--dt-primary); color: var(--dt-on-primary);
  border-radius: var(--dt-radius-pill); padding: 11px 22px;
}
.dt-btn--primary:hover { background: var(--dt-primary-focus); }

.dt-btn--secondary {
  background: transparent; color: var(--dt-link);
  border: 1px solid currentColor;
  border-radius: var(--dt-radius-pill); padding: 11px 22px;
}

.dt-btn--utility {
  background: var(--dt-utility-bg); color: var(--dt-utility-fg);
  font-size: var(--dt-caption-size); line-height: var(--dt-caption-strong-lh);
  letter-spacing: var(--dt-caption-ls);
  border-radius: var(--dt-radius-sm); padding: 8px 15px; min-height: 0;
}
.dt-on-dark .dt-btn--utility { background: rgba(255, 255, 255, 0.16); }

.dt-btn--pearl {
  background: var(--dt-surface-pearl); color: var(--dt-ink-muted-80);
  border: 3px solid var(--dt-divider-soft);
  font-size: var(--dt-caption-size); line-height: var(--dt-caption-lh);
  letter-spacing: var(--dt-caption-ls);
  border-radius: var(--dt-radius-md); padding: 8px 14px; min-height: 0;
}

.dt-btn--large {
  background: var(--dt-primary); color: var(--dt-on-primary);
  font-size: var(--dt-button-large-size); font-weight: var(--dt-weight-light);
  border-radius: var(--dt-radius-pill); padding: 14px 28px;
}

.dt-icon-btn {
  width: var(--dt-touch-target); height: var(--dt-touch-target);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--dt-surface-chip); color: var(--dt-ink);
  border: 0; border-radius: var(--dt-radius-full); cursor: pointer;
}
.dt-icon-btn:active { transform: scale(0.95); }

/* ---------- Chip ---------- */
.dt-chip {
  display: inline-flex; align-items: center;
  background: var(--dt-surface); color: var(--dt-fg);
  border: 1px solid var(--dt-line);
  font-size: var(--dt-caption-size); line-height: var(--dt-caption-lh);
  letter-spacing: var(--dt-caption-ls);
  border-radius: var(--dt-radius-pill); padding: 4px 12px;
}
.dt-chip--selectable { padding: 12px 16px; min-height: var(--dt-touch-target); cursor: pointer; }
.dt-chip[aria-selected="true"] { border: 2px solid var(--dt-primary-focus); }

/* ---------- Eingabefeld ---------- */
.dt-field {
  height: var(--dt-touch-target);
  background: var(--dt-canvas); color: var(--dt-ink);
  font-family: var(--dt-font-text); font-size: var(--dt-body-size);
  border: var(--dt-hairline-border);
  border-radius: var(--dt-radius-pill);
  padding: 12px 20px;
}

/* ---------- Kennzahl ---------- */
.dt-stat { display: flex; flex-direction: column; gap: var(--dt-space-xxs); }
.dt-stat__label {
  font-size: var(--dt-caption-size); font-weight: var(--dt-weight-semi);
  line-height: var(--dt-caption-strong-lh); letter-spacing: var(--dt-caption-ls);
  color: var(--dt-fg-muted);
}
.dt-stat__value {
  font-family: var(--dt-font-display); font-size: var(--dt-display-md-size);
  font-weight: var(--dt-weight-semi); line-height: var(--dt-display-md-lh);
  letter-spacing: var(--dt-display-md-ls); font-variant-numeric: tabular-nums;
}
.dt-stat__meta { font-size: var(--dt-caption-size); line-height: var(--dt-caption-lh); color: var(--dt-fg-muted); }

.dt-meter {
  height: 4px; background: var(--dt-line);
  border-radius: var(--dt-radius-pill); overflow: hidden; margin-top: var(--dt-space-xs);
}
.dt-meter > i { display: block; height: 100%; background: var(--dt-primary); transition: width .4s ease, background-color .4s ease; }
.dt-spark { width: 100%; height: 34px; display: block; margin-top: var(--dt-space-xs); }

/* ---------- Tabelle ---------- */
.dt-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--dt-surface); color: var(--dt-fg);
  border: 1px solid var(--dt-line); border-radius: var(--dt-radius-lg);
  overflow: hidden; box-shadow: none;
}
.dt-table th, .dt-table td {
  text-align: left; padding: var(--dt-space-md) var(--dt-space-lg);
  border-bottom: 1px solid var(--dt-line);
}
.dt-table th {
  font-size: var(--dt-caption-size); font-weight: var(--dt-weight-semi);
  line-height: var(--dt-caption-strong-lh); letter-spacing: var(--dt-caption-ls);
  color: var(--dt-fg-muted);
}
.dt-table td { font-size: var(--dt-body-size); }
.dt-table tr:last-child td { border-bottom: 0; }
.dt-table-scroll { overflow-x: auto; }

/* ---------- Status ---------- */
.dt-status { display: inline-flex; align-items: center; gap: var(--dt-space-xs); }
.dt-status::before {
  content: ""; width: 8px; height: 8px; border-radius: var(--dt-radius-full);
  background: var(--dt-fg-muted); flex: none;
}
.dt-status--running::before { background: var(--dt-status-ok-ctx);   }
.dt-status--exited::before  { background: var(--dt-status-err-ctx);  }
.dt-status--paused::before,
.dt-status--created::before,
.dt-status--missing::before { background: var(--dt-status-warn-ctx); }

/* ---------- Dialog ---------- */
.dt-dialog {
  background: var(--dt-canvas); color: var(--dt-ink);
  border: var(--dt-hairline-border); border-radius: var(--dt-radius-lg);
  max-width: min(900px, 92vw); width: 100%; padding: 0; box-shadow: none;
}
.dt-dialog::backdrop { background: rgba(0, 0, 0, 0.45); -webkit-backdrop-filter: var(--dt-frosted); backdrop-filter: var(--dt-frosted); }
.dt-dialog__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--dt-space-md); padding: var(--dt-space-md) var(--dt-space-lg);
  border-bottom: 1px solid var(--dt-hairline);
}
.dt-dialog__body {
  margin: 0; padding: var(--dt-space-lg); max-height: 65vh; overflow: auto;
  font-family: var(--dt-font-mono); font-size: var(--dt-caption-size); line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
}

/* ---------- Leerzustand ---------- */
.dt-empty {
  color: var(--dt-fg-muted); text-align: center;
  padding: var(--dt-space-xxl);
  border: 1px solid var(--dt-line); border-radius: var(--dt-radius-lg);
}

/* ---------- Schwebende Leiste ---------- */
.dt-stickybar {
  position: sticky; bottom: var(--dt-space-lg);
  height: 64px; display: flex; align-items: center; gap: var(--dt-space-md);
  background: color-mix(in srgb, var(--dt-canvas-parchment) 80%, transparent);
  -webkit-backdrop-filter: var(--dt-frosted); backdrop-filter: var(--dt-frosted);
  color: var(--dt-ink); border-radius: var(--dt-radius-lg);
  padding: var(--dt-space-sm) var(--dt-space-xl);
}

/* ---------- Fusszeile ---------- */
.dt-footer {
  background: var(--dt-canvas-parchment); color: var(--dt-ink-muted-80);
  padding-block: 64px;
  font-size: var(--dt-fine-print-size); line-height: var(--dt-fine-print-lh);
  letter-spacing: var(--dt-fine-print-ls);
}
.dt-footer__cols { display: grid; gap: var(--dt-space-xl); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.dt-footer__head {
  font-size: var(--dt-caption-size); font-weight: var(--dt-weight-semi);
  line-height: var(--dt-caption-strong-lh); letter-spacing: var(--dt-caption-ls);
  color: var(--dt-ink); margin: 0 0 var(--dt-space-xs);
}
.dt-footer__links { list-style: none; margin: 0; padding: 0; font-size: var(--dt-body-size); line-height: var(--dt-dense-link-lh); }
.dt-footer__links a { color: var(--dt-ink-muted-80); }
.dt-footer__legal {
  margin-top: var(--dt-space-xl); padding-top: var(--dt-space-lg);
  border-top: 1px solid var(--dt-hairline); color: var(--dt-ink-muted-48);
}

/* ---------- Umschalter hell/dunkel ----------
   Sitzt in der Navigation und erbt deren Farbe. Kein Rahmen: die Leiste
   soll leise bleiben. Das Zeichen ist ein SVG, kein Textglyph — Glyphen
   sitzen je nach System anders in der Zeile und lassen sich im Kreis nicht
   zuverlaessig zentrieren; manche Plattformen ersetzen sie durch Emoji. */
.dt-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--dt-touch-target); height: var(--dt-touch-target); flex: none;
  /* Volle Trefferflaeche, aber optisch buendig mit dem Leistenrand. */
  margin-inline: calc(var(--dt-space-sm) * -1);
  background: transparent; color: inherit;
  border: 0; border-radius: var(--dt-radius-full);
  padding: 0; cursor: pointer; opacity: .7;
  transition: opacity .15s ease, background-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.dt-theme-toggle:hover {
  opacity: 1;
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.dt-theme-toggle:active { transform: scale(0.95); }

/* Das SVG als Block, damit keine Zeilenmetrik mitredet — dadurch sitzt
   das Zeichen exakt mittig statt auf der Grundlinie. */
.dt-theme-toggle svg {
  display: block; width: 18px; height: 18px;
  fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* Gezeigt wird, wohin der Klick fuehrt: im Hellen der Mond, im Dunkeln die Sonne. */
.dt-theme-toggle [data-icon="sun"]  { display: none; }
.dt-theme-toggle [data-icon="moon"] { display: block; }
.dt-theme-toggle[data-mode="dark"] [data-icon="sun"]  { display: block; }
.dt-theme-toggle[data-mode="dark"] [data-icon="moon"] { display: none; }

/* ---------- Bildflaeche ---------- */
   Der einzige Ort, an dem ein Schatten vorkommt. */
.dt-product-image { border-radius: var(--dt-radius-lg); box-shadow: var(--dt-product-shadow); display: block; }
.dt-product-image--flat { box-shadow: none; }

/* ============================================================
   Responsives Verhalten
   ============================================================ */
@media (max-width: 1068px) {
  .dt-grid--5 { --dt-cols: 3; }
  .dt-grid--4 { --dt-cols: 3; }
  .dt-hero-display { font-size: var(--dt-display-lg-size); }
}
@media (max-width: 1023px) {
  .dt-grid, .dt-grid--4, .dt-grid--5 { --dt-cols: 2; }
}
@media (max-width: 833px) {
  .dt-subnav__links { gap: var(--dt-space-sm); }
}
@media (max-width: 735px) {
  .dt-section { padding-block: var(--dt-space-xxl); }
  .dt-nav__inner { gap: var(--dt-space-md); }
}
@media (max-width: 640px) {
  .dt-grid, .dt-grid--4, .dt-grid--5, .dt-grid--auto { --dt-cols: 1; grid-template-columns: minmax(0, 1fr); }
  .dt-hero-display { font-size: var(--dt-display-md-size); }
  .dt-lead { font-size: var(--dt-lead-airy-size); }
}
@media (max-width: 419px) {
  .dt-hero-display { font-size: var(--dt-lead-size); }
  .dt-container, .dt-container--wide { padding-inline: var(--dt-space-md); }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------- Fliesstext mit Gliederung ----------
   Fuer lange Texte mit Zwischenueberschriften und Listen: Impressum,
   Datenschutzerklaerung, Dokumentation. Ohne diesen Baustein muesste jede
   einzelne Ueberschrift eine Typo-Klasse tragen — in einem Rechtstext sind
   das Dutzende, und beim naechsten Absatz vergisst sie jemand.
   Rein additiv: bestehende Seiten benutzen .dt-prose nicht und aendern sich
   dadurch nicht.

   Zur Reihenfolge: die Ruecksetzung der Browser-Abstaende steht in :where(),
   traegt also keine Spezifitaet. Sonst schlaegt sie den Fluss-Abstand weiter
   unten — ".dt-prose p" waere staerker als ".dt-prose > * + *", und der Text
   klebte zusammen. */
.dt-prose { max-width: var(--dt-measure-text); }

.dt-prose :where(p, ul, ol, dl, address) {
  font-size: var(--dt-body-size); line-height: var(--dt-body-lh); margin: 0;
}

.dt-prose h1 {
  font-family: var(--dt-font-display); font-size: var(--dt-display-lg-size);
  font-weight: var(--dt-weight-semi);  line-height: var(--dt-display-lg-lh);
  letter-spacing: var(--dt-display-lg-ls); margin: 0;
}
.dt-prose h2 {
  font-family: var(--dt-font-text);   font-size: var(--dt-display-md-size);
  font-weight: var(--dt-weight-semi); line-height: var(--dt-display-md-lh);
  letter-spacing: var(--dt-display-md-ls);
  margin: var(--dt-space-xxl) 0 0;
}
.dt-prose h3 {
  font-size: var(--dt-body-size);        font-weight: var(--dt-weight-semi);
  line-height: var(--dt-body-strong-lh); letter-spacing: var(--dt-body-ls);
  margin: var(--dt-space-xl) 0 0;
}

/* Der Fluss: jedes Geschwisterelement bekommt Luft nach oben. Die
   Ueberschriften oben sind spezifischer und behalten ihren groesseren
   Abstand — so entsteht die Gliederung ohne Trennlinien. */
.dt-prose > * + * { margin-top: var(--dt-space-md); }
.dt-prose > h1:first-child,
.dt-prose > h2:first-child { margin-top: 0; }

.dt-prose ul,
.dt-prose ol { padding-left: var(--dt-space-lg); }
.dt-prose li + li { margin-top: var(--dt-space-xs); }

/* Definitionsliste: die Form fuer "Feld — Wert", wie sie das Impressum und
   die Auflistung der Betroffenenrechte braucht. */
.dt-prose dt { font-weight: var(--dt-weight-semi); }
.dt-prose dd { margin: 0; }
.dt-prose dd + dt { margin-top: var(--dt-space-md); }

/* Anschriften sind keine Zitate — die Kursive des Browsers stoert hier. */
.dt-prose address { font-style: normal; }

.dt-prose a { text-decoration: underline; }

/* Der Stand-Vermerk am Fuss eines Rechtstextes. */
.dt-prose__stand {
  margin-top: var(--dt-space-xxl); padding-top: var(--dt-space-lg);
  border-top: 1px solid var(--dt-line); color: var(--dt-fg-muted);
  font-size: var(--dt-fine-print-size); line-height: var(--dt-fine-print-lh);
}

/* Die leise Grundzeile der Fusszeile: Marke, Domain und die Pflichtlinks in
   einer Reihe. Eigene Klasse statt Inline-Abstaenden — die Zeile steht auf
   jeder Seite des Servers, und ein Abstand an drei Stellen laeuft auseinander.
   Kein Trennstrich darueber: sie steht allein, da gibt es nichts zu trennen.

   Leise wird sie ueber Groesse und Platz, nicht ueber Kontrast. Die Links
   bleiben deshalb auf --dt-ink-muted-80 und damit deutlich lesbarer als der
   Text um sie herum: ein Impressum muss "leicht erkennbar" bleiben, und
   ausgegraute 10px waeren auch fuer jeden anderen Leser eine Zumutung.

   Zeilenhoehe --dt-body-lh statt --dt-fine-print-lh: auf schmalen Schirmen
   bricht die Zeile um, und bei 1.0 wuerden die Zeilen ineinanderlaufen. */
.dt-footer__base {
  margin: 0; color: var(--dt-ink-muted-48);
  font-size: var(--dt-fine-print-size); line-height: var(--dt-body-lh);
  letter-spacing: var(--dt-fine-print-ls);
}
.dt-footer__base a { color: var(--dt-ink-muted-80); }