/* ============================================================
   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 {
  /* content-box mit Absicht: die Vorlage schreibt 44px Leistenhoehe vor, und
     die sollen dem Inhalt gehoeren. Bei border-box frisst die Haarlinie einen
     Pixel davon, und die Links landen bei 43px statt der geforderten 44. */
  box-sizing: content-box;
  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%; height: 100%; max-width: var(--dt-measure-grid); margin: 0 auto;
  display: flex; align-items: center; gap: var(--dt-space-lg);
}
.dt-nav a {
  /* Volle Leistenhoehe als Trefferflaeche. Ohne das ist der Link nur so
     hoch wie seine 12px-Schrift und auf dem Handy kaum zu treffen. */
  display: inline-flex; align-items: center; align-self: stretch;
  padding-inline: var(--dt-space-xxs);
  margin-inline: calc(var(--dt-space-xxs) * -1);
  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;
  /* min-height, nicht height: ein langer Titel bricht auf schmalen Schirmen
     um und lief bei fester Hoehe aus dem Kasten heraus hinter die Kopfleiste. */
  min-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: var(--dt-space-xs) var(--dt-space-lg);
}
.dt-subnav__inner {
  width: 100%; max-width: var(--dt-measure-grid); margin: 0 auto;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--dt-space-xs) 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; flex-wrap: wrap;
  gap: var(--dt-space-xs) 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));
}
.dt-grid--rows {
  grid-template-columns: repeat(auto-fill, minmax(min(520px, 100%), 1fr));
}
.dt-grid--tiles {
  /* min() haelt die Spur auf schmalen Geraeten im Rahmen, sonst laeuft
     das Raster bei unter 300px Breite aus dem Bild. */
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 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; }

/* Karte mit Bild: das Bild sitzt randlos an der Oberkante, der Text bekommt
   die Innenraender. Deshalb faellt die Polsterung der Karte weg und wandert
   in den Koerper. Weiterhin kein Schatten — die Haarlinie traegt. */
.dt-card--media { padding: 0; overflow: hidden; }
.dt-card__media {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  object-fit: cover; background: var(--dt-line);
}
.dt-card__body { padding: var(--dt-space-lg); }

/* Querformat: Bild links, Text rechts. Das Bild gibt sein festes
   Seitenverhaeltnis auf und fuellt die Hoehe, die der Text vorgibt. */
.dt-card--row {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: stretch; padding: 0; overflow: hidden;
}
.dt-card--row .dt-card__media {
  height: 100%; min-height: 150px; aspect-ratio: auto; align-self: stretch;
}
.dt-card--row .dt-card__body {
  display: flex; flex-direction: column; justify-content: center;
}
/* Unterhalb dieser Breite bleibt vom Text nichts Lesbares uebrig —
   dann wieder uebereinander, Bild oben. */
@media (max-width: 559px) {
  .dt-card--row { grid-template-columns: minmax(0, 1fr); }
  .dt-card--row .dt-card__media { aspect-ratio: 16 / 9; height: auto; min-height: 0; }
}

/* ---------- 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 {
  position: relative;
  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); }
/* Kompakt gezeichnet, voll greifbar: ein mittig gesetztes, unsichtbares Band
   in Zielhoehe. Unabhaengig davon, wie hoch die Schaltflaeche selbst ist.
   Nur vertikal, damit nebeneinander liegende sich nichts wegnehmen. */
.dt-btn--utility::after,
.dt-btn--pearl::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  /* Breite Schaltflaechen behalten ihre Breite, schmale — etwa reine
     Symbolknoepfe — werden auf die Zielgroesse aufgefuellt. Das Band waechst
     dabei um hoechstens ein paar Pixel je Seite und kollidiert nicht mit
     dem Nachbarn. */
  width: max(100%, var(--dt-touch-target));
  height: var(--dt-touch-target);
}

.dt-btn--pearl {
  position: relative;
  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 {
  position: relative; padding: 12px 16px;
  min-height: var(--dt-touch-target); cursor: pointer;
  /* Von Anfang an 2px, sonst springt der Chip beim Auswaehlen um einen Pixel. */
  border-width: 2px;
}
/* Der Chip IST das Bedienelement. Ein natives Kaestchen daneben zeigt denselben
   Zustand ein zweites Mal und bringt Systemoptik in eine gestaltete Flaeche.
   Es bleibt bedienbar und fuer Screenreader vorhanden — nur unsichtbar. */
.dt-chip--selectable input[type="radio"],
.dt-chip--selectable input[type="checkbox"] {
  position: absolute; width: 1px; height: 1px; margin: 0;
  opacity: 0; appearance: none; -webkit-appearance: none;
}
.dt-chip[aria-selected="true"],
.dt-chip--selectable:has(input:checked) { border-color: var(--dt-primary-focus); }
.dt-chip--selectable:has(input:focus-visible) {
  outline: 2px solid var(--dt-primary-focus); outline-offset: 2px;
}

/* ---------- 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;
}

/* ---------- Kontrollkaestchen ----------
   Das Browser-Standardkaestchen ist 13x13px und auf dem Handy nicht zu
   treffen. Hier traegt das Label die 44px, das Kaestchen selbst ist 22px. */
.dt-check {
  display: inline-flex; align-items: center; gap: var(--dt-space-sm);
  min-height: var(--dt-touch-target); cursor: pointer;
}
.dt-check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 22px; height: 22px; flex: none; margin: 0;
  display: grid; place-content: center; cursor: pointer;
  background: var(--dt-surface-card);
  border: 1px solid var(--dt-hairline);
  border-radius: var(--dt-radius-xs);
  transition: background-color .12s ease, border-color .12s ease;
}
.dt-check input[type="checkbox"]::before {
  content: ""; width: 12px; height: 12px;
  background: var(--dt-on-primary);
  transform: scale(0); transition: transform .12s ease;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.dt-check input[type="checkbox"]:checked {
  background: var(--dt-primary); border-color: var(--dt-primary);
}
.dt-check input[type="checkbox"]:checked::before { transform: scale(1); }
.dt-check input[type="checkbox"]:disabled { opacity: .45; cursor: default; }

/* ---------- 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; }
/* Der Scrollbehaelter muss selbst schrumpfen duerfen. Als Flex- oder
   Rasterkind haelt ihn min-width:auto sonst auf Tabellenbreite — dann
   scrollt nicht die Tabelle, sondern die ganze Seite. */
.dt-table-scroll { overflow-x: auto; min-width: 0; max-width: 100%; }

/* ---------- 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-xs) var(--dt-space-sm); }
}
@media (max-width: 640px) {
  /* Umgebrochen waere die klebende Leiste hier ein Bildschirmfresser —
     auf dem Telefon scrollt sie mit dem Inhalt weg. relative statt static,
     damit darin aufgehaengte Klappmenues weiter einen Bezugspunkt haben. */
  .dt-subnav { position: relative; }
  .dt-subnav__links { margin-left: 0; width: 100%; }
}
@media (max-width: 735px) {
  .dt-section { padding-block: var(--dt-space-xxl); }
  .dt-nav__inner { gap: var(--dt-space-md); }
}
@media (max-width: 560px) {
  /* Der optische Ausgleich des Umschalters (negativer Aussenabstand) setzt
     voraus, dass die Leiste genug Polsterung hat, die ihn aufnimmt. Auf
     schmalen Schirmen ist die weg — dann ragt er hinaus. */
  .dt-theme-toggle { margin-inline: 0; }
  /* Vier Links plus Umschalter brauchen bei 24px Abstand und 24px Rand
     rund 390px — mehr als ein 320er-Telefon hat, und die Leiste lief
     ueber. Enger gestellt passt dieselbe Leiste ab 375px. */
  .dt-nav { padding-inline: var(--dt-space-sm); }
  .dt-nav__inner { gap: var(--dt-space-sm); }
}
@media (max-width: 380px) {
  /* Letzte Reserve fuer alte 320er-Geraete. Die Trefferflaechen bleiben
     unangetastet — es schrumpft nur der Abstand dazwischen. Die Links
     tragen ihre eigene Polsterung, optisch bleibt also Luft. */
  .dt-nav { padding-inline: var(--dt-space-xs); }
  .dt-nav__inner { gap: var(--dt-space-xxs); }
}
@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); }