/* AutoRestwert — anwendungsspezifische Ergaenzungen zum Designsystem.
 *
 * Regel: hier steht nur, was das Designsystem nicht abdeckt. Alle Werte kommen
 * aus Design Tokens, nie als fester Farb-, Groessen- oder Abstandswert.
 * Anwendungsuebergreifende Bausteine gehoeren nach design-system/components/.
 */

/* ------------------------------------------------------------------ Kopfzeile
   Der oeffentliche Kopf (.ar-header) und der Anwendungsrahmen (.ar-shell) sind
   vollstaendig im Designsystem definiert. Hier bleibt nur, was beide verbindet. */
.ar-header__inner, .ar-shell__top { container-type: inline-size; }

/* --------------------------------------------------------------- Seitenkopf */
.ar-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ar-space-4); flex-wrap: wrap; margin-bottom: var(--ar-space-5); }
.ar-actions { display: flex; align-items: center; gap: var(--ar-space-2); flex-wrap: wrap; }
.ar-actions--end { justify-content: flex-end; }

/* ------------------------------------------------------------------ Formular */
.ar-formgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--ar-space-4); }

/* ------------------------------------------------------------------ Abschnitt */
.ar-section { margin-top: var(--ar-space-6); }
.ar-section__title { margin-bottom: var(--ar-space-3); }
.ar-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--ar-space-2); }
.ar-list__item { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ar-space-3); flex-wrap: wrap; }

/* -------------------------------------------------------------------- Fuss */
.ar-footer { border-top: 1px solid var(--ar-border-divider); margin-top: var(--ar-space-12); padding: var(--ar-space-8) 0; color: var(--ar-text-muted); font-size: var(--ar-font-size-sm); }
.ar-footer a { color: inherit; }

/* -------------------------------------------------------------- Anmeldung */
.ar-auth__foot { margin-top: var(--ar-space-5); font-size: var(--ar-font-size-sm); color: var(--ar-text-muted); }

/* ------------------------------------------------------------- Einmalcodes */
.ar-codes { list-style: none; padding: 0; margin: 0; font-family: var(--ar-font-family-mono); display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--ar-space-2); }
.ar-codes span { display: block; background: var(--ar-surface-sunken); border: 1px solid var(--ar-border-divider); border-radius: var(--ar-radius-sm); padding: var(--ar-space-2) var(--ar-space-3); letter-spacing: 0.08em; text-align: center; }

/* --------------------------------------------------------------- Bildbereich */
.ar-gallery__item img { width: 100%; height: 100%; object-fit: cover; }

/* -------------------------------------------------------------- Rechtstexte */
.ar-recht { max-width: 46rem; }
.ar-recht h2 { margin-top: var(--ar-space-8); }
.ar-recht h2:first-child { margin-top: 0; }
.ar-recht p, .ar-recht li { line-height: var(--ar-font-line-height-relaxed); }
.ar-recht ul { padding-left: var(--ar-space-5); }
.ar-recht li { margin-bottom: var(--ar-space-2); }
.ar-recht p + ul { margin-top: var(--ar-space-3); }

/* -------------------------------------------------------------- Hilfsklassen */
.ar-table__actions { white-space: nowrap; text-align: right; }
.ar-mono-list { font-family: var(--ar-font-family-mono); font-size: var(--ar-font-size-xs); word-break: break-all; }
.ar-flash { padding-top: var(--ar-space-4); }
.ar-flash .ar-alert + .ar-alert { margin-top: var(--ar-space-3); }

/* Sprungziele der Abschnittsnavigation nicht unter der Kopfzeile verstecken. */
[id] { scroll-margin-top: calc(var(--ar-layout-topbar) + var(--ar-space-4)); }

/* Die Bildmarke im Marken-Lockup traegt ihre Groesse selbst. */
.ar-logo__mark { display: block; }
.ar-logo svg { flex: none; }