/* ============================================================
   ITIVARA — Basis & geteilte Primitive (A · B · C)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Ankersprünge dürfen nicht unter der fixierten Kapitelleiste landen */
:target, section[id], article[id] { scroll-margin-top: 4.75rem; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

body {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  color: var(--c-ink-soft);
  background: var(--c-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-xs); }

::selection { background: var(--brand-accent-wash); color: var(--c-ink); }

/* ---------- Typografische Primitive ---------- */

.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--c-ink);
}
.d1 { font-size: var(--t-d1); }
.d2 { font-size: var(--t-d2); }
.d3 { font-size: var(--t-d3); }
.d4 { font-size: var(--t-d4); }

.eyebrow {
  font-size: var(--t-2xs);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-ink-muted);
}
.eyebrow--accent { color: var(--brand-accent-deep); }
.eyebrow--night  { color: var(--c-on-night-mut); }

.lede {
  font-size: var(--t-lg);
  line-height: 1.7;
  color: var(--c-ink-soft);
  max-width: var(--measure);
}
.muted { color: var(--c-ink-muted); }
.faint { color: var(--c-ink-faint); }
/* Cormorant setzt per Default Mediävalziffern — für Daten, Zeiten und
   Kennzahlen erzwingen wir Versalziffern, sonst liest „12“ sich als „I2“. */
.num, .display, .d1, .d2, .d3, .d4,
.cd-unit__n, .tl-date__d, .stat__n, .stop__n, .wx__t, .kpi__n {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

/* [hidden] muss display:flex/grid schlagen */
[hidden] { display: none !important; }

/* Feine Trennlinie mit optionalem Rautenmarker */
.rule { height: 1px; background: var(--c-rule); border: 0; }
.rule--marked {
  display: flex; align-items: center; gap: var(--s-4);
  height: auto; background: none;
}
.rule--marked::before, .rule--marked::after {
  content: ""; flex: 1; height: 1px; background: var(--c-rule);
}
.rule--marked > .mark {
  width: 5px; height: 5px; transform: rotate(45deg);
  background: var(--brand-accent); flex: none;
}

/* ---------- Layout ---------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.shell--narrow { max-width: 54rem; }
.section { padding-block: var(--section-y); }
.stack > * + * { margin-top: var(--s-4); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-size: var(--t-sm); font-weight: 500; letter-spacing: .01em;
  padding: 0.6875rem 1.125rem; border-radius: var(--r-sm);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
  border: 1px solid transparent; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--c-ink); color: var(--c-paper); }
.btn--primary:hover { background: #000; }

.btn--accent { background: var(--brand-accent); color: #fff; }
.btn--accent:hover { background: var(--brand-accent-deep); }

.btn--ghost { border-color: var(--c-rule-strong); color: var(--c-ink); background: var(--c-paper-raised); }
.btn--ghost:hover { border-color: var(--c-ink); }

.btn--quiet { color: var(--c-ink-muted); padding-inline: var(--s-2); }
.btn--quiet:hover { color: var(--c-ink); }

.btn--night { border-color: rgba(242,237,228,.28); color: var(--c-on-night); }
.btn--night:hover { border-color: var(--c-on-night); background: rgba(242,237,228,.08); }

.btn--sm { padding: 0.4375rem 0.75rem; font-size: var(--t-xs); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* ---------- Badges / Pills ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 0.375rem;
  font-size: var(--t-2xs); font-weight: 500; letter-spacing: .04em;
  padding: 0.1875rem 0.5rem; border-radius: var(--r-xs);
  background: var(--c-paper-sunk); color: var(--c-ink-muted);
  text-transform: uppercase;
}
.badge .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.badge--draft   { background: var(--c-paper-sunk);   color: var(--c-ink-muted); }
.badge--live    { background: var(--c-success-wash); color: var(--c-success); }
.badge--running { background: var(--c-info-wash);    color: var(--c-info); }
.badge--archive { background: transparent; color: var(--c-ink-faint); box-shadow: inset 0 0 0 1px var(--c-rule); }
.badge--ai      { background: var(--brand-accent-wash); color: var(--brand-accent-deep); }
.badge--warn    { background: var(--c-warning-wash); color: var(--c-warning); }

/* ---------- Karten ---------- */
.card {
  background: var(--c-paper-raised);
  border: 1px solid var(--c-rule);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
}

/* ---------- Icons ---------- */
.i { width: 1rem; height: 1rem; flex: none; stroke: currentColor; fill: none;
     stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.i--lg { width: 1.25rem; height: 1.25rem; }
.i--xl { width: 1.5rem; height: 1.5rem; }

/* ---------- Hilfsklassen ---------- */
.row { display: flex; align-items: center; gap: var(--s-3); }
.row--between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.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;
}
.hide-mobile { display: none; }
@media (min-width: 60rem) { .hide-mobile { display: revert; } .hide-desktop { display: none; } }

/* Sanftes Einblenden beim Scrollen */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }

/* ============================================================
   PROTOTYP-STEUERUNG (nicht Teil des Produkts)
   ============================================================ */
.proto {
  position: fixed; right: var(--s-4); bottom: var(--s-4); z-index: 300;
  background: var(--c-night-solid); color: var(--c-on-night);
  border-radius: var(--r-md); box-shadow: var(--sh-3); overflow: hidden;
  font-size: var(--t-2xs); max-width: calc(100vw - 2rem);
}
.proto__head { display: flex; align-items: center; gap: var(--s-2); padding: .5rem .75rem; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: #8E8578; cursor: pointer; }
.proto__body { display: none; padding: 0 .75rem .75rem; }
.proto.is-open .proto__body { display: block; }
.proto__row + .proto__row { margin-top: .625rem; }
.proto__lbl { color: #8E8578; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .3125rem; }
.seg { display: flex; background: #2A2723; border-radius: var(--r-sm); padding: 2px; gap: 2px; }
.seg button { flex: 1; padding: .3125rem .5rem; border-radius: 3px; color: #A9A296; white-space: nowrap; font-size: var(--t-2xs); }
.seg button[aria-pressed="true"] { background: var(--brand-accent); color: #fff; }