/* AutoRestwert Designsystem — Grundlagen
 * Reset, Typografie, Fokus, Layout-Primitive, Hilfsklassen.
 * Setzt die generierten Tokens aus dist/tokens.css voraus.
 */

/* ---------------------------------------------------------------- Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--ar-font-family-sans);
  font-size: var(--ar-font-size-base);
  line-height: var(--ar-font-line-height-normal);
  color: var(--ar-text-default);
  background: var(--ar-surface-page);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }
a { color: var(--ar-text-brand); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
[hidden] { display: none !important; }

/* Zahlen in Tabellen, Betraegen und Countdown stehen untereinander (vergleichbar). */
.ar-num, .ar-money, .ar-countdown, td.ar-num, th.ar-num {
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}

/* ------------------------------------------------------------ Fokus/A11y */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--ar-accessibility-focus-ring-width) solid var(--ar-border-focus);
  outline-offset: 2px;
  border-radius: var(--ar-radius-sm);
}
/* Fokus auch bei Mausbedienung sichtbar, wenn per Skript gesetzt (Modale, Dialoge). */
.ar-focus-ring:focus { outline: var(--ar-accessibility-focus-ring-width) solid var(--ar-border-focus); outline-offset: 2px; }
.ar-skip-link {
  position: absolute; left: var(--ar-space-2); top: -3rem;
  z-index: var(--ar-layout-z-index-toast);
  background: var(--ar-surface-raised); color: var(--ar-text-default);
  padding: var(--ar-space-2) var(--ar-space-4); border: 1px solid var(--ar-border-default);
  border-radius: var(--ar-radius-md); text-decoration: none;
}
.ar-skip-link:focus { top: var(--ar-space-2); }
.ar-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Nur fuer Screenreader, aber als Beschriftung wirksam. */
.ar-required-marker { color: var(--ar-text-danger); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ----------------------------------------------------------- Typografie */
.ar-h1, .ar-h2, .ar-h3, .ar-h4 { font-weight: var(--ar-font-weight-semibold); line-height: var(--ar-font-line-height-tight); letter-spacing: var(--ar-font-tracking-tight); }
/* Lange deutsche Zusammensetzungen ("Restwertverfahren", "Fahrzeugakte") brechen
 * in grossen Ueberschriften sonst nicht um und ziehen die Seite in die Breite. */
.ar-h1, .ar-h2, .ar-h3, .ar-h4, .ar-lead { overflow-wrap: break-word; hyphens: auto; }
.ar-h1 { font-size: var(--ar-font-size-3xl); }
.ar-h2 { font-size: var(--ar-font-size-2xl); }
.ar-h3 { font-size: var(--ar-font-size-xl); }
.ar-h4 { font-size: var(--ar-font-size-lg); line-height: var(--ar-font-line-height-snug); }
.ar-lead { font-size: var(--ar-font-size-md); color: var(--ar-text-muted); line-height: var(--ar-font-line-height-relaxed); }
.ar-text-sm { font-size: var(--ar-font-size-sm); }
.ar-text-xs { font-size: var(--ar-font-size-xs); }
.ar-muted { color: var(--ar-text-muted); }
.ar-subtle { color: var(--ar-text-subtle); }
.ar-danger-text { color: var(--ar-text-danger); }
.ar-eyebrow {
  font-size: var(--ar-font-size-xs); font-weight: var(--ar-font-weight-semibold);
  text-transform: uppercase; letter-spacing: var(--ar-font-tracking-caps); color: var(--ar-text-muted);
}
.ar-code { font-family: var(--ar-font-family-mono); font-size: var(--ar-font-size-sm); background: var(--ar-surface-sunken); padding: 0 var(--ar-space-1); border-radius: var(--ar-radius-sm); }

/* ------------------------------------------------------------- Layout */
.ar-stack { display: flex; flex-direction: column; }
/* Breite Inhalte (Tabellen, Code) duerfen ihre Spalte nicht aufziehen. */
.ar-stack > *, .ar-grid > *, .ar-row > * { min-width: 0; }
.ar-stack-1 { gap: var(--ar-space-1); } .ar-stack-2 { gap: var(--ar-space-2); }
.ar-stack-3 { gap: var(--ar-space-3); } .ar-stack-4 { gap: var(--ar-space-4); }
.ar-stack-6 { gap: var(--ar-space-6); } .ar-stack-8 { gap: var(--ar-space-8); }
.ar-row { display: flex; align-items: center; }
.ar-row-2 { gap: var(--ar-space-2); } .ar-row-3 { gap: var(--ar-space-3); } .ar-row-4 { gap: var(--ar-space-4); }
.ar-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--ar-space-4); flex-wrap: wrap; }
.ar-row-end { display: flex; align-items: center; justify-content: flex-end; gap: var(--ar-space-3); flex-wrap: wrap; }
.ar-grow { flex: 1 1 auto; min-width: 0; }
.ar-wrap { flex-wrap: wrap; }
.ar-grid { display: grid; gap: var(--ar-space-4); }
.ar-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ar-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ar-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ar-grid-auto { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
@media (max-width: 48rem) {
  .ar-grid-2, .ar-grid-3, .ar-grid-4 { grid-template-columns: minmax(0, 1fr); }
}
.ar-container { width: 100%; max-width: var(--ar-layout-container-default); margin-inline: auto; padding-inline: var(--ar-space-4); }
.ar-container--narrow { max-width: var(--ar-layout-container-narrow); }
.ar-container--wide { max-width: var(--ar-layout-container-wide); }
.ar-divider { border: 0; border-top: 1px solid var(--ar-border-divider); margin-block: var(--ar-space-4); }

/* ------------------------------------------------------------ Flaeche */
.ar-card {
  background: var(--ar-surface-raised); border: 1px solid var(--ar-border-subtle);
  border-radius: var(--ar-radius-lg); box-shadow: var(--ar-shadow-xs);
}
.ar-card__header { padding: var(--ar-space-4) var(--ar-space-5); border-bottom: 1px solid var(--ar-border-divider); }
.ar-card__body { padding: var(--ar-space-5); }
.ar-card__footer { padding: var(--ar-space-3) var(--ar-space-5); border-top: 1px solid var(--ar-border-divider); background: var(--ar-surface-sunken); border-radius: 0 0 var(--ar-radius-lg) var(--ar-radius-lg); }
.ar-panel { background: var(--ar-surface-raised); border: 1px solid var(--ar-border-subtle); border-radius: var(--ar-radius-md); padding: var(--ar-space-4); }
.ar-well { background: var(--ar-surface-sunken); border-radius: var(--ar-radius-md); padding: var(--ar-space-4); }
.ar-brand-surface { background: var(--ar-surface-brand); border: 1px solid var(--ar-color-brand-200); border-radius: var(--ar-radius-md); padding: var(--ar-space-4); }