/* ============================================================
   dondus theme v1 — Struktur-Styles auf Token-Basis.
   Erwartet, dass tokens.css VORHER geladen ist:
   <link rel="stylesheet" href="https://theme.dondus.com/v1/tokens.css">
   <link rel="stylesheet" href="https://theme.dondus.com/v1/theme.css">
   Quelle: theme/ in dondus-infra · Werte editierbar: theme.dondus.com/admin
   ============================================================ */

/* ---------- Fonts (selbst gehostet, DSGVO-sauber) ---------- */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("/fonts/archivo-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("/fonts/archivo-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/plexmono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/plexmono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/plexmono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/plexmono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Basis ---------- */
.ds, .ds body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-main);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}
.ds *, .ds *::before, .ds *::after { box-sizing: border-box; }

.ds h1, .ds .ds-h1 {
  font-size: var(--text-h1);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-5);
}
.ds h2, .ds .ds-h2 {
  font-size: var(--text-h2);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: var(--space-7) 0 var(--space-4);
}
.ds h3, .ds .ds-h3 {
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
  margin: var(--space-6) 0 var(--space-3);
}
.ds-display {
  font-size: var(--text-display);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
}
.ds-lead { font-size: var(--text-lead); color: var(--text-muted); }
.ds-small { font-size: var(--text-small); color: var(--text-muted); }
.ds-meta, .ds-mono-label {
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--text-muted);
}
.ds-mono { font-family: var(--font-mono); }
.ds a { color: var(--link); text-decoration: none; }
.ds a:hover { color: var(--link-hover); }
.ds hr { border: none; border-top: var(--border-w) solid var(--border-default); margin: var(--space-6) 0; }

/* Sektions-Label im Styleguide-Stil (Mono, Hairline darunter) */
.ds-section-label {
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: var(--weight-medium);
  border-bottom: var(--border-w) solid var(--border-default);
  padding-bottom: var(--space-2);
  margin: var(--space-8) 0 var(--space-5);
}

/* ---------- Layout / Responsive ---------- */
.ds-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.ds-section { padding-top: var(--space-9); padding-bottom: var(--space-9); }
@media (min-width: 1100px) {
  .ds-section { padding-top: var(--space-10); padding-bottom: var(--space-10); }
}
.ds-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 768px)  { .ds-grid.cols-2, .ds-grid.cols-3, .ds-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ds-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .ds-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } }
.ds-row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }

/* ---------- Buttons ---------- */
.ds-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-sans); font-weight: var(--weight-medium);
  font-size: var(--text-body); line-height: 1;
  padding: 12px 26px; border-radius: var(--radius-pill);
  border: var(--border-w) solid transparent; cursor: pointer;
  background: var(--ink); color: var(--invert-ink); text-decoration: none;
  transition: background var(--dur-fast) var(--ease-snap), color var(--dur-fast) var(--ease-snap);
}
.ds-btn:hover { background: var(--accent); color: var(--accent-ink); }
/* Als <a> verwendete Buttons: ".ds a"-Linkfarbe schlägt sonst die Button-Schriftfarbe
   (Spezifität) — Links als Primär-Button wären schwarz auf schwarz. */
.ds a.ds-btn { color: var(--invert-ink); }
.ds a.ds-btn:hover { color: var(--accent-ink); }
.ds-btn.sec, .ds a.ds-btn.sec { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.ds-btn.sec:hover, .ds a.ds-btn.sec:hover { background: var(--ink); color: var(--invert-ink); }
.ds-btn.ghost, .ds a.ds-btn.ghost { background: transparent; color: var(--ink); }
.ds-btn.ghost:hover, .ds a.ds-btn.ghost:hover { background: var(--bg-section); color: var(--accent); }
.ds-btn.sm { padding: 8px 18px; font-size: var(--text-small); }
.ds-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.ds-iconbtn {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); border: var(--border-w) solid var(--border-default);
  background: transparent; font-size: 18px; cursor: pointer; color: var(--text-main);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.ds-iconbtn:hover { background: var(--ink); color: var(--invert-ink); }

/* ---------- Formulare ---------- */
.ds-field { display: flex; flex-direction: column; gap: var(--space-2); }
.ds-field > .ds-meta, .ds-field > label { margin-bottom: 0; }
.ds-input, .ds-field input, .ds-field select, .ds-field textarea {
  padding: 12px 14px; font-size: var(--text-body); color: var(--text-main);
  background: var(--surface); border: var(--border-w) solid var(--border-default);
  border-radius: var(--radius-s); outline: none; font-family: var(--font-sans);
  transition: border-color var(--dur-fast) var(--ease-snap);
}
.ds-input:focus, .ds-field input:focus, .ds-field select:focus, .ds-field textarea:focus {
  border-color: var(--border-focus);
}

/* ---------- Badges / Tags / Tabs ---------- */
.ds-badge {
  display: inline-flex; padding: 4px 12px; border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-meta);
  text-transform: uppercase; line-height: 1.4;
  background: var(--bg-section); color: var(--text-muted);
}
.ds-badge.ok { background: var(--ok-soft); color: var(--ok); }
.ds-badge.accent { background: var(--accent); color: var(--accent-ink); }
.ds-badge.danger { background: var(--danger-soft); color: var(--danger); }
.ds-badge.invert { background: var(--ink); color: var(--invert-ink); }
.ds-tag {
  display: inline-flex; padding: 7px 16px; border-radius: var(--radius-pill);
  border: var(--border-w) solid var(--line-strong); background: transparent;
  font-size: var(--text-small); cursor: pointer; font-family: var(--font-sans); color: var(--text-main);
}
.ds-tag:hover, .ds-tag.on { background: var(--ink); color: var(--invert-ink); }
.ds-tabs { display: flex; gap: 28px; border-bottom: var(--border-w) solid var(--border-default); }
.ds-tabs button {
  background: none; border: none; padding: 10px 0 12px; cursor: pointer;
  font-size: 15px; font-family: var(--font-sans); color: var(--text-muted); margin-bottom: -1px;
}
.ds-tabs button:hover { color: var(--accent); }
.ds-tabs button.on { color: var(--text-main); font-weight: var(--weight-medium); box-shadow: inset 0 -2px 0 var(--ink); }

/* ---------- Karten / Feedback ---------- */
.ds-card {
  background: var(--surface-card);
  border: var(--border-w) solid var(--border-default);
  border-radius: var(--radius-0);
  padding: var(--space-6);
}
.ds-dialog {
  background: var(--surface-card); box-shadow: var(--shadow-float);
  padding: 28px 32px 32px; max-width: 420px;
}
.ds-toast {
  max-width: 380px; background: var(--invert-bg); color: var(--invert-ink);
  box-shadow: var(--shadow-pop); padding: 14px 18px;
  display: flex; gap: var(--space-3); align-items: flex-start;
  font-size: 15px; line-height: 1.45;
}

/* ---------- Motion-Utilities ---------- */
.ds-reveal { animation: ds-reveal var(--dur-slow) var(--ease-out) both; }
.ds-rise-line { overflow: hidden; }
.ds-rise-line > * { animation: ds-rise var(--dur-hero) var(--ease-out) both; }
.ds-rise-line:nth-child(2) > * { animation-delay: 80ms; }
.ds-unmask { animation: ds-unmask var(--dur-hero) var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) {
  .ds-reveal, .ds-rise-line > *, .ds-unmask { animation: none; }
}