/* AutoRestwert Designsystem — Komponenten
 * Setzt dist/tokens.css, dist/status.css und components/base.css voraus.
 * Alle Bedienelemente: sichtbarer Fokus, Tastaturbedienbar, Groesse >= 24px (WCAG 2.2 "Target Size").
 */

/* ============================================================ Schaltflaechen */
.ar-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ar-space-2);
  min-height: var(--ar-layout-control-height-md); padding: 0 var(--ar-space-4);
  border: 1px solid transparent; border-radius: var(--ar-radius-md);
  font-size: var(--ar-font-size-base); font-weight: var(--ar-font-weight-medium);
  text-decoration: none; cursor: pointer; background: none;
  transition: background var(--ar-motion-duration-fast) var(--ar-motion-easing-standard),
              border-color var(--ar-motion-duration-fast) var(--ar-motion-easing-standard),
              color var(--ar-motion-duration-fast) var(--ar-motion-easing-standard);
}
.ar-btn:disabled, .ar-btn[aria-disabled='true'] { cursor: not-allowed; background: var(--ar-surface-disabled); color: var(--ar-text-on-disabled); border-color: var(--ar-border-divider); }
.ar-btn--primary { background: var(--ar-interactive-primary-bg); color: var(--ar-interactive-primary-text); }
.ar-btn--primary:hover:not(:disabled) { background: var(--ar-interactive-primary-bg-hover); }
.ar-btn--secondary { background: var(--ar-interactive-secondary-bg); color: var(--ar-interactive-secondary-text); border-color: var(--ar-interactive-secondary-border); }
.ar-btn--secondary:hover:not(:disabled) { background: var(--ar-surface-sunken); }
.ar-btn--ghost { color: var(--ar-text-default); }
.ar-btn--ghost:hover:not(:disabled) { background: var(--ar-interactive-ghost-hover-bg); }
.ar-btn--danger { background: var(--ar-interactive-danger-bg); color: var(--ar-interactive-primary-text); }
.ar-btn--danger:hover:not(:disabled) { background: var(--ar-interactive-danger-bg-hover); }
.ar-btn--sm { min-height: var(--ar-layout-control-height-sm); padding-inline: var(--ar-space-3); font-size: var(--ar-font-size-sm); }
.ar-btn--lg { min-height: var(--ar-layout-control-height-lg); padding-inline: var(--ar-space-6); font-size: var(--ar-font-size-md); }
.ar-btn--block { display: flex; width: 100%; }
.ar-btn--icon { padding: 0; width: var(--ar-layout-control-height-md); }
.ar-btn--icon.ar-btn--sm { width: var(--ar-layout-control-height-sm); }
.ar-btn[aria-busy='true'] { cursor: progress; }
.ar-btn[aria-busy='true']::before {
  content: ''; width: 0.875rem; height: 0.875rem; border-radius: var(--ar-radius-full);
  border: 2px solid currentColor; border-right-color: transparent;
  animation: ar-spin var(--ar-motion-duration-slow) linear infinite;
}
@keyframes ar-spin { to { transform: rotate(360deg); } }

.ar-segmented { display: inline-flex; border: 1px solid var(--ar-border-default); border-radius: var(--ar-radius-md); overflow: hidden; background: var(--ar-surface-raised); }
.ar-segmented__item { min-height: var(--ar-layout-control-height-md); padding: 0 var(--ar-space-4); display: inline-flex; align-items: center; border: 0; background: none; cursor: pointer; font-size: var(--ar-font-size-sm); }
.ar-segmented__item + .ar-segmented__item { border-left: 1px solid var(--ar-border-divider); }
.ar-segmented__item[aria-pressed='true'] { background: var(--ar-color-brand-50); color: var(--ar-text-brand); font-weight: var(--ar-font-weight-semibold); }

/* ================================================================= Formular */
.ar-field { display: flex; flex-direction: column; gap: var(--ar-space-1); }
.ar-label { font-size: var(--ar-font-size-sm); font-weight: var(--ar-font-weight-medium); }
.ar-hint { font-size: var(--ar-font-size-xs); color: var(--ar-text-muted); }
.ar-error-text { font-size: var(--ar-font-size-xs); color: var(--ar-text-danger); display: flex; gap: var(--ar-space-1); align-items: center; }
.ar-input, .ar-textarea, .ar-select {
  width: 100%; min-height: var(--ar-layout-control-height-md);
  padding: var(--ar-space-2) var(--ar-space-3);
  background: var(--ar-surface-raised); color: var(--ar-text-default);
  border: 1px solid var(--ar-border-default); border-radius: var(--ar-radius-md);
  font-size: var(--ar-font-size-base);
}
.ar-textarea { min-height: 5.5rem; resize: vertical; }
.ar-input:disabled, .ar-textarea:disabled, .ar-select:disabled { background: var(--ar-surface-disabled); color: var(--ar-text-on-disabled); }
.ar-input[aria-invalid='true'], .ar-textarea[aria-invalid='true'], .ar-select[aria-invalid='true'] { border-color: var(--ar-border-danger); }
.ar-select { appearance: none; padding-right: var(--ar-space-8);
  background-image: linear-gradient(45deg, transparent 50%, var(--ar-text-muted) 50%), linear-gradient(135deg, var(--ar-text-muted) 50%, transparent 50%);
  background-position: right var(--ar-space-4) center, right var(--ar-space-3) center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.ar-input-group { display: flex; }
.ar-input-group .ar-input { border-radius: var(--ar-radius-md) 0 0 var(--ar-radius-md); }
.ar-input-group__suffix {
  display: inline-flex; align-items: center; padding: 0 var(--ar-space-3);
  background: var(--ar-surface-sunken); border: 1px solid var(--ar-border-default); border-left: 0;
  border-radius: 0 var(--ar-radius-md) var(--ar-radius-md) 0; font-size: var(--ar-font-size-sm); color: var(--ar-text-muted);
}
.ar-search { position: relative; }
.ar-search .ar-input { padding-left: var(--ar-space-8); }
.ar-search__icon { position: absolute; left: var(--ar-space-3); top: 50%; transform: translateY(-50%); color: var(--ar-text-muted); pointer-events: none; }
.ar-choice { display: flex; align-items: flex-start; gap: var(--ar-space-2); }
.ar-choice input { width: 1.125rem; height: 1.125rem; margin-top: 0.125rem; accent-color: var(--ar-interactive-primary-bg); flex: none; }
.ar-choice__text { font-size: var(--ar-font-size-base); }
.ar-fieldset { border: 1px solid var(--ar-border-subtle); border-radius: var(--ar-radius-md); padding: var(--ar-space-4); }
.ar-fieldset > legend { padding-inline: var(--ar-space-2); font-size: var(--ar-font-size-sm); font-weight: var(--ar-font-weight-semibold); }

/* ================================================================= Tabellen */
.ar-table-wrap { overflow-x: auto; border: 1px solid var(--ar-border-subtle); border-radius: var(--ar-radius-md); background: var(--ar-surface-raised); }
.ar-table { font-size: var(--ar-font-size-sm); }
.ar-table caption { text-align: left; padding: var(--ar-space-3) var(--ar-space-4); color: var(--ar-text-muted); font-size: var(--ar-font-size-xs); }
.ar-table th, .ar-table td { padding: var(--ar-space-3) var(--ar-space-4); text-align: left; border-bottom: 1px solid var(--ar-border-divider); vertical-align: middle; }
.ar-table th { background: var(--ar-surface-sunken); font-weight: var(--ar-font-weight-semibold); white-space: nowrap; }
.ar-table--sticky th { position: sticky; top: 0; z-index: var(--ar-layout-z-index-sticky); }
.ar-table tbody tr:hover { background: var(--ar-color-brand-50); }
.ar-table td.ar-num, .ar-table th.ar-num { text-align: right; }
.ar-table--dense th, .ar-table--dense td { padding: var(--ar-space-2) var(--ar-space-3); }
.ar-table__sort { display: inline-flex; align-items: center; gap: var(--ar-space-1); background: none; border: 0; cursor: pointer; font: inherit; font-weight: var(--ar-font-weight-semibold); padding: 0; }
.ar-table__sort[aria-sort]::after { content: '▲'; font-size: 0.6em; }
.ar-table__sort[aria-sort='descending']::after { content: '▼'; }

/* ================================================================== Status */
.ar-status-legend { display: flex; flex-wrap: wrap; gap: var(--ar-space-2) var(--ar-space-4); font-size: var(--ar-font-size-xs); color: var(--ar-text-muted); }
.ar-tag { display: inline-flex; align-items: center; gap: var(--ar-space-1); border: 1px solid var(--ar-border-divider); background: var(--ar-surface-sunken); border-radius: var(--ar-radius-sm); padding: 0 var(--ar-space-2); font-size: var(--ar-font-size-xs); }
.ar-masked { font-family: var(--ar-font-family-mono); letter-spacing: 0.05em; color: var(--ar-text-muted); background: var(--ar-surface-sunken); border-radius: var(--ar-radius-sm); padding: 0 var(--ar-space-1); }
.ar-masked-notice { display: flex; align-items: center; gap: var(--ar-space-1); font-size: var(--ar-font-size-xs); color: var(--ar-text-subtle); }

/* ================================================================= Hinweise */
.ar-alert { display: flex; gap: var(--ar-space-3); padding: var(--ar-space-3) var(--ar-space-4); border: 1px solid; border-radius: var(--ar-radius-md); font-size: var(--ar-font-size-sm); }
.ar-alert__title { font-weight: var(--ar-font-weight-semibold); }
.ar-alert--info { background: var(--ar-color-info-50); border-color: var(--ar-color-info-100); color: var(--ar-color-info-700); }
.ar-alert--success { background: var(--ar-color-success-50); border-color: var(--ar-color-success-100); color: var(--ar-color-success-700); }
.ar-alert--warning { background: var(--ar-color-warning-50); border-color: var(--ar-color-warning-100); color: var(--ar-color-warning-700); }
.ar-alert--danger { background: var(--ar-color-danger-50); border-color: var(--ar-color-danger-100); color: var(--ar-color-danger-700); }
.ar-alert--legal { background: var(--ar-surface-sunken); border-color: var(--ar-border-divider); color: var(--ar-text-muted); font-size: var(--ar-font-size-xs); }

.ar-empty { text-align: center; padding: var(--ar-space-8) var(--ar-space-4); border: 1px dashed var(--ar-border-default); border-radius: var(--ar-radius-lg); background: var(--ar-surface-raised); }
.ar-empty__title { font-weight: var(--ar-font-weight-semibold); margin-bottom: var(--ar-space-1); }

.ar-skeleton { background: linear-gradient(90deg, var(--ar-surface-sunken), var(--ar-color-neutral-200), var(--ar-surface-sunken)); background-size: 200% 100%; animation: ar-shimmer 1.2s infinite linear; border-radius: var(--ar-radius-sm); height: 0.875rem; }
@keyframes ar-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.ar-progress { height: 0.5rem; background: var(--ar-surface-sunken); border-radius: var(--ar-radius-full); overflow: hidden; }
.ar-progress__bar { height: 100%; background: var(--ar-interactive-primary-bg); }
.ar-progress__bar--success { background: var(--ar-color-success-600); }
.ar-progress__bar--warning { background: var(--ar-color-warning-500); }
.ar-progress__bar--danger { background: var(--ar-color-danger-600); }

.ar-toast { display: flex; gap: var(--ar-space-3); align-items: flex-start; min-width: 18rem; max-width: 26rem; padding: var(--ar-space-3) var(--ar-space-4); background: var(--ar-surface-inverse); color: var(--ar-text-inverse); border-radius: var(--ar-radius-md); box-shadow: var(--ar-shadow-lg); font-size: var(--ar-font-size-sm); }

/* ============================================================== Navigation */
.ar-topbar { display: flex; align-items: center; gap: var(--ar-space-4); min-height: 3.5rem; padding: 0 var(--ar-space-5); background: var(--ar-surface-inverse); color: var(--ar-text-inverse); }
.ar-topbar a { color: inherit; text-decoration: none; }
.ar-app { display: grid; grid-template-columns: 15rem minmax(0, 1fr); min-height: 100vh; }
.ar-app__side { background: var(--ar-surface-raised); border-right: 1px solid var(--ar-border-divider); padding: var(--ar-space-4); }
.ar-app__main { min-width: 0; padding: var(--ar-space-6); }
@media (max-width: 64rem) { .ar-app { grid-template-columns: minmax(0, 1fr); } .ar-app__side { display: none; } }
.ar-nav { display: flex; flex-direction: column; gap: var(--ar-space-1); }
.ar-nav__group-label { font-size: var(--ar-font-size-xs); text-transform: uppercase; letter-spacing: var(--ar-font-tracking-caps); color: var(--ar-text-subtle); padding: var(--ar-space-3) var(--ar-space-2) var(--ar-space-1); }
.ar-nav__link { display: flex; align-items: center; gap: var(--ar-space-2); min-height: var(--ar-layout-control-height-md); padding: 0 var(--ar-space-3); border-radius: var(--ar-radius-md); color: var(--ar-text-default); text-decoration: none; font-size: var(--ar-font-size-base); }
.ar-nav__link:hover { background: var(--ar-surface-sunken); }
.ar-nav__link[aria-current='page'] { background: var(--ar-color-brand-50); color: var(--ar-text-brand); font-weight: var(--ar-font-weight-semibold); }
.ar-nav__count { margin-left: auto; font-size: var(--ar-font-size-xs); background: var(--ar-surface-sunken); border-radius: var(--ar-radius-full); padding: 0 var(--ar-space-2); }

.ar-breadcrumb { display: flex; flex-wrap: wrap; gap: var(--ar-space-1); align-items: center; font-size: var(--ar-font-size-xs); color: var(--ar-text-muted); list-style: none; padding: 0; }
.ar-breadcrumb li + li::before { content: '/'; margin-right: var(--ar-space-1); color: var(--ar-color-neutral-400); }

.ar-tabs { display: flex; gap: var(--ar-space-1); border-bottom: 1px solid var(--ar-border-divider); overflow-x: auto; }
.ar-tabs__item { padding: var(--ar-space-2) var(--ar-space-4); border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer; font-size: var(--ar-font-size-base); color: var(--ar-text-muted); white-space: nowrap; }
.ar-tabs__item[aria-selected='true'] { color: var(--ar-text-brand); border-bottom-color: var(--ar-color-brand-600); font-weight: var(--ar-font-weight-semibold); }

.ar-pagination { display: flex; gap: var(--ar-space-1); align-items: center; list-style: none; padding: 0; font-size: var(--ar-font-size-sm); }
.ar-pagination__item { min-width: var(--ar-layout-control-height-md); min-height: var(--ar-layout-control-height-md); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ar-border-divider); border-radius: var(--ar-radius-md); background: var(--ar-surface-raised); text-decoration: none; color: var(--ar-text-default); }
.ar-pagination__item[aria-current='page'] { background: var(--ar-interactive-primary-bg); color: var(--ar-interactive-primary-text); border-color: var(--ar-interactive-primary-bg); }

.ar-stepper { display: flex; flex-wrap: wrap; gap: var(--ar-space-3); list-style: none; padding: 0; counter-reset: step; }
.ar-stepper__item { display: flex; align-items: center; gap: var(--ar-space-2); font-size: var(--ar-font-size-sm); color: var(--ar-text-muted); }
.ar-stepper__item::before {
  counter-increment: step; content: counter(step);
  width: 1.5rem; height: 1.5rem; border-radius: var(--ar-radius-full); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ar-surface-sunken); border: 1px solid var(--ar-border-default); font-size: var(--ar-font-size-xs);
}
.ar-stepper__item[aria-current='step'] { color: var(--ar-text-default); font-weight: var(--ar-font-weight-semibold); }
.ar-stepper__item[aria-current='step']::before { background: var(--ar-color-brand-600); border-color: var(--ar-color-brand-600); color: var(--ar-text-inverse); }
.ar-stepper__item[data-state='done']::before { content: '✓'; background: var(--ar-color-success-600); border-color: var(--ar-color-success-600); color: var(--ar-text-inverse); }

.ar-modal-backdrop { position: fixed; inset: 0; background: rgba(16, 20, 26, 0.55); display: flex; align-items: center; justify-content: center; padding: var(--ar-space-4); }
.ar-modal { background: var(--ar-surface-raised); border-radius: var(--ar-radius-lg); box-shadow: var(--ar-shadow-lg); width: min(34rem, 100%); max-height: 90vh; overflow: auto; }
.ar-modal__header { padding: var(--ar-space-4) var(--ar-space-5); border-bottom: 1px solid var(--ar-border-divider); }
.ar-modal__body { padding: var(--ar-space-5); }
.ar-modal__footer { padding: var(--ar-space-4) var(--ar-space-5); border-top: 1px solid var(--ar-border-divider); display: flex; justify-content: flex-end; gap: var(--ar-space-3); }

.ar-drawer { position: fixed; inset: 0 0 0 auto; width: min(22rem, 100%); background: var(--ar-surface-raised); box-shadow: var(--ar-shadow-lg); padding: var(--ar-space-5); overflow: auto; }
.ar-facets { display: flex; flex-direction: column; gap: var(--ar-space-4); }
.ar-facet { border: 0; padding: 0; }
.ar-facet > legend { font-size: var(--ar-font-size-sm); font-weight: var(--ar-font-weight-semibold); padding: 0 0 var(--ar-space-2); }
.ar-facet__options { display: flex; flex-direction: column; gap: var(--ar-space-2); max-height: 12rem; overflow: auto; }
.ar-facet__count { margin-left: auto; color: var(--ar-text-subtle); font-size: var(--ar-font-size-xs); }

/* =========================================================== Datenanzeige */
.ar-kpi { display: flex; flex-direction: column; gap: var(--ar-space-1); }
.ar-kpi__value { font-size: var(--ar-font-size-2xl); font-weight: var(--ar-font-weight-semibold); font-variant-numeric: tabular-nums; }
.ar-kpi__label { font-size: var(--ar-font-size-xs); text-transform: uppercase; letter-spacing: var(--ar-font-tracking-caps); color: var(--ar-text-muted); }
.ar-dl { display: grid; grid-template-columns: minmax(9rem, auto) minmax(0, 1fr); gap: var(--ar-space-2) var(--ar-space-4); }
.ar-dl dt { font-size: var(--ar-font-size-sm); color: var(--ar-text-muted); }
.ar-dl dd { margin: 0; font-size: var(--ar-font-size-base); }
@media (max-width: 40rem) { .ar-dl { grid-template-columns: minmax(0, 1fr); gap: var(--ar-space-1); } .ar-dl dd { margin-bottom: var(--ar-space-2); } }

.ar-timeline { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--ar-space-4); }
.ar-timeline__item { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: var(--ar-space-3); position: relative; }
.ar-timeline__item::before { content: ''; width: 0.625rem; height: 0.625rem; margin-top: 0.3rem; border-radius: var(--ar-radius-full); background: var(--ar-color-neutral-400); }
.ar-timeline__item--success::before { background: var(--ar-color-success-600); }
.ar-timeline__item--danger::before { background: var(--ar-color-danger-600); }
.ar-timeline__item--brand::before { background: var(--ar-color-brand-600); }
.ar-timeline__meta { font-size: var(--ar-font-size-xs); color: var(--ar-text-muted); }

/* ================================================================ Upload */
.ar-dropzone {
  border: 2px dashed var(--ar-border-default); border-radius: var(--ar-radius-lg);
  background: var(--ar-surface-raised); padding: var(--ar-space-6); text-align: center;
  transition: border-color var(--ar-motion-duration-fast) var(--ar-motion-easing-standard), background var(--ar-motion-duration-fast) var(--ar-motion-easing-standard);
}
.ar-dropzone[data-state='dragover'] { border-color: var(--ar-color-brand-600); background: var(--ar-color-brand-50); }
.ar-dropzone[data-state='error'] { border-color: var(--ar-border-danger); background: var(--ar-color-danger-50); }
.ar-filelist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--ar-space-2); }
.ar-file { display: flex; align-items: center; gap: var(--ar-space-3); padding: var(--ar-space-2) var(--ar-space-3); border: 1px solid var(--ar-border-divider); border-radius: var(--ar-radius-md); }
.ar-file__thumb { width: 2.5rem; height: 2.5rem; border-radius: var(--ar-radius-sm); background: var(--ar-surface-sunken); flex: none; display: grid; place-items: center; font-size: var(--ar-font-size-xs); color: var(--ar-text-muted); overflow: hidden; }
.ar-file__name { font-size: var(--ar-font-size-sm); }

.ar-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--ar-space-2); }
.ar-gallery__item { position: relative; aspect-ratio: 4 / 3; border-radius: var(--ar-radius-md); overflow: hidden; background: var(--ar-surface-sunken); border: 1px solid var(--ar-border-divider); }
.ar-gallery__item figcaption { position: absolute; inset: auto 0 0 0; background: rgba(16, 20, 26, 0.7); color: var(--ar-text-inverse); font-size: var(--ar-font-size-xs); padding: var(--ar-space-1) var(--ar-space-2); }

/* ========================================================= Gebot & Auktion */
.ar-countdown { display: inline-flex; align-items: baseline; gap: var(--ar-space-1); font-weight: var(--ar-font-weight-semibold); }
.ar-countdown--warning { color: var(--ar-color-warning-600); }
.ar-countdown--danger { color: var(--ar-text-danger); }
.ar-bid-box { border: 1px solid var(--ar-border-subtle); border-radius: var(--ar-radius-lg); background: var(--ar-surface-raised); overflow: hidden; }
.ar-bid-box__head { padding: var(--ar-space-4) var(--ar-space-5); background: var(--ar-surface-inverse); color: var(--ar-text-inverse); }
.ar-bid-box__amount { font-size: var(--ar-font-size-3xl); font-weight: var(--ar-font-weight-bold); font-variant-numeric: tabular-nums; }
.ar-bid-box__body { padding: var(--ar-space-5); display: flex; flex-direction: column; gap: var(--ar-space-4); }
.ar-sealed-note { display: flex; gap: var(--ar-space-2); align-items: flex-start; font-size: var(--ar-font-size-xs); color: var(--ar-text-muted); }
.ar-own-bid { display: flex; align-items: center; justify-content: space-between; gap: var(--ar-space-3); padding: var(--ar-space-3); border: 1px solid var(--ar-border-divider); border-radius: var(--ar-radius-md); }
.ar-own-bid--top { border-color: var(--ar-color-success-500); background: var(--ar-color-success-50); }
.ar-money { font-weight: var(--ar-font-weight-semibold); white-space: nowrap; }
.ar-money--muted { color: var(--ar-text-muted); font-weight: var(--ar-font-weight-regular); }

.ar-consent { position: fixed; inset: auto var(--ar-space-4) var(--ar-space-4) var(--ar-space-4); z-index: var(--ar-layout-z-index-toast); max-width: var(--ar-layout-container-narrow); margin-inline: auto; background: var(--ar-surface-raised); border: 1px solid var(--ar-border-default); border-radius: var(--ar-radius-lg); box-shadow: var(--ar-shadow-lg); padding: var(--ar-space-5); }

/* =========================================================== Marke & Motiv */
/* Die "Wertkante" ist das wiederkehrende Formelement der Marke: eine
 * aufsteigende 45-Grad-Kante. Sie steht fuer den Restwert, der im Verfahren
 * steigt, und nimmt zugleich die Dachlinie eines Fahrzeugs auf. Sie erscheint
 * als Akzentlinie unter Abschnittsueberschriften, als Kartenkante und im
 * Kopfbereich – nie als Dekoration ohne Bezug. */
.ar-logo { display: inline-flex; align-items: center; gap: var(--ar-space-3); text-decoration: none; color: inherit; }
.ar-logo__mark { width: 2rem; height: 2rem; flex: none; border-radius: var(--ar-radius-md); display: block; }
.ar-logo__mark--lg { width: 2.5rem; height: 2.5rem; }
.ar-logo__word { font-size: var(--ar-font-size-lg); font-weight: var(--ar-font-weight-semibold); letter-spacing: var(--ar-font-tracking-tight); line-height: 1; }
.ar-logo__word small { display: block; font-size: var(--ar-font-size-xs); font-weight: var(--ar-font-weight-regular); letter-spacing: var(--ar-font-tracking-normal); color: var(--ar-text-muted); margin-top: 0.15rem; }

.ar-edge { display: block; width: 3rem; height: 0.1875rem; background: var(--ar-color-brand-500); transform: skewX(-45deg); border-radius: 1px; }
.ar-edge--wide { width: 5rem; }
.ar-edge--muted { background: var(--ar-color-neutral-300); }
/* Kartenkante: die Marke als feine Linie am oberen Rand einer hervorgehobenen Karte. */
.ar-card--edge { position: relative; overflow: hidden; }
.ar-card--edge::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 0.1875rem; background: var(--ar-color-brand-500); }
/* Abschnittsueberschrift mit Markenkante statt Trennlinie. */
.ar-heading { display: flex; flex-direction: column; gap: var(--ar-space-2); }
.ar-heading--center { align-items: center; text-align: center; }

/* ======================================================== Fahrzeug & Auktion */
.ar-vehicle { display: flex; flex-direction: column; background: var(--ar-surface-raised); border: 1px solid var(--ar-border-subtle); border-radius: var(--ar-radius-lg); overflow: hidden; transition: box-shadow var(--ar-motion-duration-base) var(--ar-motion-easing-standard), border-color var(--ar-motion-duration-base) var(--ar-motion-easing-standard); }
.ar-vehicle:hover { box-shadow: var(--ar-shadow-md); border-color: var(--ar-color-neutral-300); }
.ar-vehicle__media { position: relative; aspect-ratio: 16 / 10; background: var(--ar-surface-sunken); display: grid; place-items: center; overflow: hidden; }
.ar-vehicle__media img { width: 100%; height: 100%; object-fit: cover; }
.ar-vehicle__placeholder { font-size: var(--ar-font-size-xs); color: var(--ar-text-subtle); letter-spacing: var(--ar-font-tracking-caps); text-transform: uppercase; }
.ar-vehicle__badge { position: absolute; inset: var(--ar-space-3) var(--ar-space-3) auto auto; }
.ar-vehicle__body { padding: var(--ar-space-4); display: flex; flex-direction: column; gap: var(--ar-space-3); flex: 1; }
.ar-vehicle__title { font-size: var(--ar-font-size-md); font-weight: var(--ar-font-weight-semibold); line-height: var(--ar-font-line-height-snug); }
.ar-vehicle__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ar-space-2) var(--ar-space-3); font-size: var(--ar-font-size-sm); }
.ar-vehicle__meta dt { color: var(--ar-text-muted); font-size: var(--ar-font-size-xs); }
.ar-vehicle__meta dd { margin: 0; font-weight: var(--ar-font-weight-medium); }
.ar-vehicle__foot { margin-top: auto; padding-top: var(--ar-space-3); border-top: 1px solid var(--ar-border-divider); display: flex; align-items: center; justify-content: space-between; gap: var(--ar-space-3); flex-wrap: wrap; }

.ar-auction-card { display: flex; flex-direction: column; gap: var(--ar-space-3); padding: var(--ar-space-4) var(--ar-space-5); background: var(--ar-surface-raised); border: 1px solid var(--ar-border-subtle); border-radius: var(--ar-radius-lg); }
.ar-auction-card--ending { border-color: var(--ar-color-warning-500); background: var(--ar-color-warning-50); }
.ar-price { font-family: var(--ar-font-family-mono); font-size: var(--ar-font-size-xl); font-weight: var(--ar-font-weight-medium); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.ar-price--lg { font-size: var(--ar-font-size-2xl); font-weight: var(--ar-font-weight-semibold); }
.ar-bidlist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.ar-bidlist li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ar-space-3); padding: var(--ar-space-2) 0; border-bottom: 1px solid var(--ar-border-divider); font-size: var(--ar-font-size-sm); }
.ar-bidlist li:last-child { border-bottom: 0; }

/* ============================================================= Kennzahlen */
.ar-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--ar-space-4); }
.ar-metric { display: flex; flex-direction: column; gap: var(--ar-space-2); padding: var(--ar-space-4) var(--ar-space-5); background: var(--ar-surface-raised); border: 1px solid var(--ar-border-subtle); border-radius: var(--ar-radius-lg); }
.ar-metric__head { display: flex; align-items: center; gap: var(--ar-space-2); color: var(--ar-text-muted); }
.ar-metric__label { font-size: var(--ar-font-size-xs); text-transform: uppercase; letter-spacing: var(--ar-font-tracking-caps); }
.ar-metric__value { font-family: var(--ar-font-family-mono); font-size: var(--ar-font-size-2xl); font-weight: var(--ar-font-weight-semibold); font-variant-numeric: tabular-nums; line-height: 1; }
.ar-metric__note { font-size: var(--ar-font-size-xs); color: var(--ar-text-muted); }

/* ============================================================ Bedienleiste */
.ar-filterbar { display: flex; align-items: center; gap: var(--ar-space-3); flex-wrap: wrap; padding: var(--ar-space-3) var(--ar-space-4); background: var(--ar-surface-raised); border: 1px solid var(--ar-border-subtle); border-radius: var(--ar-radius-lg); }
.ar-filterbar__group { display: flex; align-items: center; gap: var(--ar-space-2); }
.ar-filterbar__spacer { margin-left: auto; }
.ar-chip { display: inline-flex; align-items: center; gap: var(--ar-space-1); min-height: var(--ar-layout-control-height-sm); padding: 0 var(--ar-space-3); border: 1px solid var(--ar-border-default); border-radius: var(--ar-radius-full); background: var(--ar-surface-raised); color: var(--ar-text-default); font-size: var(--ar-font-size-sm); text-decoration: none; cursor: pointer; }
.ar-chip:hover { background: var(--ar-surface-sunken); }
.ar-chip[aria-pressed='true'], .ar-chip--active { background: var(--ar-color-brand-700); border-color: var(--ar-color-brand-700); color: var(--ar-text-inverse); font-weight: var(--ar-font-weight-medium); }
.ar-chip__count { font-family: var(--ar-font-family-mono); opacity: 0.75; }

.ar-avatar { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--ar-radius-full); background: var(--ar-color-brand-700); color: var(--ar-text-inverse); font-size: var(--ar-font-size-xs); font-weight: var(--ar-font-weight-semibold); flex: none; letter-spacing: 0.02em; }
.ar-avatar--lg { width: 2.5rem; height: 2.5rem; font-size: var(--ar-font-size-sm); }

.ar-dropdown { position: relative; display: inline-block; }
.ar-dropdown__panel { position: absolute; inset: auto 0 auto auto; margin-top: var(--ar-space-2); min-width: 14rem; background: var(--ar-surface-raised); border: 1px solid var(--ar-border-subtle); border-radius: var(--ar-radius-lg); box-shadow: var(--ar-shadow-lg); padding: var(--ar-space-2); z-index: var(--ar-layout-z-index-modal); }
.ar-dropdown__item { display: flex; align-items: center; gap: var(--ar-space-2); width: 100%; padding: var(--ar-space-2) var(--ar-space-3); border: 0; background: none; border-radius: var(--ar-radius-md); font-size: var(--ar-font-size-sm); color: var(--ar-text-default); text-decoration: none; cursor: pointer; text-align: left; }
.ar-dropdown__item:hover { background: var(--ar-surface-sunken); }

.ar-tooltip { position: relative; }
.ar-tooltip__text { position: absolute; inset: auto auto 100% 50%; transform: translate(-50%, -0.5rem); background: var(--ar-surface-inverse); color: var(--ar-text-inverse); font-size: var(--ar-font-size-xs); padding: var(--ar-space-1) var(--ar-space-2); border-radius: var(--ar-radius-sm); white-space: nowrap; z-index: var(--ar-layout-z-index-tooltip); box-shadow: var(--ar-shadow-md); }

.ar-toast-host { position: fixed; inset: auto var(--ar-space-4) var(--ar-space-4) auto; display: flex; flex-direction: column; gap: var(--ar-space-2); z-index: var(--ar-layout-z-index-toast); }

/* ==================================================== Mobile Datencards */
/* Breite Tabellen werden auf kleinen Geraeten zu Karten. Die Beschriftung
 * kommt aus data-label am Feld, nicht aus einer zweiten Tabelle. */
@media (max-width: 48rem) {
  .ar-table--cards { border: 0; background: none; }
  .ar-table--cards thead { display: none; }
  .ar-table--cards tbody { display: flex; flex-direction: column; gap: var(--ar-space-3); }
  .ar-table--cards tr { display: block; border: 1px solid var(--ar-border-subtle); border-radius: var(--ar-radius-lg); background: var(--ar-surface-raised); padding: var(--ar-space-2) var(--ar-space-4); }
  .ar-table--cards td { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ar-space-4); border-bottom: 1px solid var(--ar-border-divider); padding: var(--ar-space-2) 0; text-align: right; }
  .ar-table--cards td:last-child { border-bottom: 0; }
  .ar-table--cards td::before { content: attr(data-label); flex: none; text-align: left; font-size: var(--ar-font-size-xs); text-transform: uppercase; letter-spacing: var(--ar-font-tracking-caps); color: var(--ar-text-muted); }
  .ar-table--cards td[data-label='']::before, .ar-table--cards td:not([data-label])::before { content: none; }
  .ar-table--cards td.ar-table__actions { justify-content: flex-end; }
}

/* ==================================================== Marken-Lockup (Logo) */
/* Die Bildmarke wird als Inline-SVG eingebettet; die Farben kommen aus den
 * Design Tokens. Die hell/dunkel-Variante setzt nur die drei Flaechen um. */
.ar-logo__mark rect:first-child { fill: var(--ar-color-neutral-950); }
.ar-logo__mark path { fill: var(--ar-color-brand-500); }
.ar-logo__mark rect:last-child { fill: var(--ar-color-neutral-0); }
.ar-logo--inverse .ar-logo__mark rect:first-child { fill: var(--ar-color-neutral-0); }
.ar-logo--inverse .ar-logo__mark path { fill: var(--ar-color-brand-700); }
.ar-logo--inverse .ar-logo__mark rect:last-child { fill: var(--ar-color-neutral-950); }

/* ===================================================== Oeffentlicher Kopf */
.ar-header { position: sticky; top: 0; z-index: var(--ar-layout-z-index-sticky); background: var(--ar-surface-raised); border-bottom: 1px solid var(--ar-border-divider); }
.ar-header__inner { display: flex; align-items: center; gap: var(--ar-space-6); min-height: var(--ar-layout-topbar); }
.ar-header__nav { display: flex; align-items: center; gap: var(--ar-space-1); }
.ar-header__link { padding: var(--ar-space-2) var(--ar-space-3); border-radius: var(--ar-radius-md); color: var(--ar-text-muted); text-decoration: none; font-size: var(--ar-font-size-sm); font-weight: var(--ar-font-weight-medium); white-space: nowrap; }
.ar-header__link:hover { color: var(--ar-text-default); background: var(--ar-surface-sunken); }
.ar-header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--ar-space-2); }
.ar-header__menu { display: none; margin-left: auto; position: relative; }
.ar-header__toggle { list-style: none; display: inline-flex; align-items: center; gap: var(--ar-space-2); min-height: var(--ar-layout-control-height-md); padding: 0 var(--ar-space-3); border: 1px solid var(--ar-border-default); border-radius: var(--ar-radius-md); cursor: pointer; font-size: var(--ar-font-size-sm); }
.ar-header__toggle::-webkit-details-marker { display: none; }
.ar-header__panel { position: absolute; inset: calc(100% + var(--ar-space-2)) 0 auto auto; min-width: 15rem; background: var(--ar-surface-raised); border: 1px solid var(--ar-border-subtle); border-radius: var(--ar-radius-lg); box-shadow: var(--ar-shadow-lg); padding: var(--ar-space-2); z-index: var(--ar-layout-z-index-modal); }
@media (max-width: 64rem) {
  .ar-header__nav, .ar-header__actions { display: none; }
  .ar-header__menu { display: block; }
}

/* =========================================================== Landingpage */
.ar-hero { padding: var(--ar-space-16) 0 var(--ar-space-12); background: linear-gradient(180deg, var(--ar-color-brand-50) 0%, var(--ar-surface-page) 100%); border-bottom: 1px solid var(--ar-border-subtle); }
.ar-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: var(--ar-space-12); align-items: center; }
@media (max-width: 64rem) { .ar-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--ar-space-8); } }
.ar-hero__title { font-size: var(--ar-font-size-4xl); font-weight: var(--ar-font-weight-semibold); line-height: var(--ar-font-line-height-tight); letter-spacing: var(--ar-font-tracking-tight); }
@media (max-width: 64rem) { .ar-hero__title { font-size: var(--ar-font-size-3xl); } }
@media (max-width: 40rem) { .ar-hero__title { font-size: var(--ar-font-size-2xl); } }
.ar-hero__lead { font-size: var(--ar-font-size-md); color: var(--ar-text-muted); line-height: var(--ar-font-line-height-relaxed); max-width: 34rem; }
.ar-hero__actions { display: flex; gap: var(--ar-space-3); flex-wrap: wrap; margin-top: var(--ar-space-6); }
.ar-hero__facts { display: flex; gap: var(--ar-space-6); flex-wrap: wrap; margin-top: var(--ar-space-8); padding-top: var(--ar-space-6); border-top: 1px solid var(--ar-border-divider); }
.ar-fact__value { font-family: var(--ar-font-family-mono); font-size: var(--ar-font-size-lg); font-weight: var(--ar-font-weight-semibold); display: block; }
.ar-fact__label { font-size: var(--ar-font-size-xs); color: var(--ar-text-muted); }

.ar-band { padding: var(--ar-space-12) 0; }
.ar-band--sunken { background: var(--ar-surface-raised); border-block: 1px solid var(--ar-border-subtle); }
.ar-band__head { max-width: 44rem; margin-bottom: var(--ar-space-8); }

.ar-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--ar-space-5); counter-reset: arstep; list-style: none; padding: 0; margin: 0; }
.ar-steps__item { display: flex; flex-direction: column; gap: var(--ar-space-2); padding-top: var(--ar-space-4); border-top: 2px solid var(--ar-color-brand-500); }
.ar-steps__item::before { counter-increment: arstep; content: '0' counter(arstep); font-family: var(--ar-font-family-mono); font-size: var(--ar-font-size-xs); color: var(--ar-text-brand); letter-spacing: var(--ar-font-tracking-wide); }
.ar-steps__title { font-size: var(--ar-font-size-md); font-weight: var(--ar-font-weight-semibold); }

.ar-audiences { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--ar-space-5); }
.ar-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--ar-space-2); font-size: var(--ar-font-size-sm); }
.ar-checklist li { display: flex; gap: var(--ar-space-2); align-items: flex-start; }
.ar-checklist li::before { content: ''; flex: none; width: 0.9rem; height: 0.9rem; margin-top: 0.25rem; border-radius: var(--ar-radius-sm); background: var(--ar-color-brand-500); }

/* Produktvorschau im Kopfbereich: zeigt das tatsaechliche Funktionsprinzip
 * (Fahrzeugakte, Auktion, verdeckte Gebote, Restwert) statt einer Stockgrafik. */
.ar-preview { background: var(--ar-surface-raised); border: 1px solid var(--ar-border-subtle); border-radius: var(--ar-radius-xl); box-shadow: var(--ar-shadow-lg); overflow: hidden; }
.ar-preview__bar { display: flex; align-items: center; gap: var(--ar-space-2); padding: var(--ar-space-3) var(--ar-space-4); background: var(--ar-surface-sunken); border-bottom: 1px solid var(--ar-border-divider); font-size: var(--ar-font-size-xs); color: var(--ar-text-muted); }
.ar-preview__dots { display: flex; gap: var(--ar-space-1); }
.ar-preview__dots span { width: 0.5rem; height: 0.5rem; border-radius: var(--ar-radius-full); background: var(--ar-color-neutral-300); }
.ar-preview__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
@media (max-width: 40rem) { .ar-preview__body { grid-template-columns: minmax(0, 1fr); } }
.ar-preview__media { position: relative; background: repeating-linear-gradient(135deg, var(--ar-surface-sunken) 0 0.75rem, var(--ar-color-neutral-200) 0.75rem 1.5rem); min-height: 11rem; display: grid; place-items: center; padding: var(--ar-space-4); }
.ar-preview__side { padding: var(--ar-space-4) var(--ar-space-5); display: flex; flex-direction: column; gap: var(--ar-space-3); border-left: 1px solid var(--ar-border-divider); }
@media (max-width: 40rem) { .ar-preview__side { border-left: 0; border-top: 1px solid var(--ar-border-divider); } }
.ar-preview__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ar-space-3); font-size: var(--ar-font-size-sm); }
.ar-preview__row dt { color: var(--ar-text-muted); }
.ar-preview__row dd { margin: 0; font-weight: var(--ar-font-weight-medium); }

/* ================================================================ Fuss */
.ar-footer-brand { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--ar-space-8); }
@media (max-width: 64rem) { .ar-footer-brand { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .ar-footer-brand { grid-template-columns: minmax(0, 1fr); } }
.ar-footer-col__title { font-size: var(--ar-font-size-xs); text-transform: uppercase; letter-spacing: var(--ar-font-tracking-caps); color: var(--ar-text-subtle); margin-bottom: var(--ar-space-3); }
.ar-footer-col a { display: block; padding: var(--ar-space-1) 0; color: var(--ar-text-muted); text-decoration: none; font-size: var(--ar-font-size-sm); }
.ar-footer-col a:hover { color: var(--ar-text-default); }

/* ============================================================ Anmeldung */
/* Zweispaltig: links das Formular, rechts die Markenflaeche. Auf schmalen
 * Geraeten entfaellt die Markenflaeche, das Formular bleibt vollstaendig. */
.ar-authpage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); min-height: calc(100vh - var(--ar-layout-topbar)); }
@media (max-width: 64rem) { .ar-authpage { grid-template-columns: minmax(0, 1fr); } .ar-authpage__aside { display: none; } }
.ar-authpage__form { display: flex; align-items: flex-start; justify-content: center; padding: var(--ar-space-10) var(--ar-space-4); }
.ar-authpage__inner { width: 100%; max-width: 27rem; }
.ar-authpage__inner--wide { max-width: 44rem; }
.ar-authpage__aside { background: var(--ar-surface-inverse); color: var(--ar-text-inverse); padding: var(--ar-space-10) var(--ar-space-8); display: flex; flex-direction: column; gap: var(--ar-space-6); }
.ar-authpage__aside .ar-checklist li::before { background: var(--ar-color-brand-400); }
.ar-authpage__aside .ar-checklist { color: var(--ar-color-neutral-200); }
.ar-authpage__aside-title { font-size: var(--ar-font-size-xl); font-weight: var(--ar-font-weight-semibold); line-height: var(--ar-font-line-height-snug); }
.ar-authpage__policy { display: flex; gap: var(--ar-space-2); align-items: flex-start; font-size: var(--ar-font-size-sm); }
.ar-step-dots { display: flex; align-items: center; gap: var(--ar-space-2); font-size: var(--ar-font-size-xs); color: var(--ar-text-muted); }
.ar-step-dots span { display: inline-flex; align-items: center; gap: var(--ar-space-1); }
.ar-step-dots span::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: var(--ar-radius-full); background: var(--ar-color-neutral-300); }
.ar-step-dots span[aria-current='step'] { color: var(--ar-text-brand); font-weight: var(--ar-font-weight-semibold); }
.ar-step-dots span[aria-current='step']::before { background: var(--ar-color-brand-600); }

/* ================================================================ Symbole */
.ar-icon { width: var(--ar-icon-md); height: var(--ar-icon-md); flex: none; display: inline-block; vertical-align: middle; }
@media (max-width: 40rem) { .ar-icon { width: var(--ar-icon-md); } }
.ar-icon--sm { width: var(--ar-icon-sm); height: var(--ar-icon-sm); }
.ar-icon--lg { width: var(--ar-icon-lg); height: var(--ar-icon-lg); }
.ar-icon--xl { width: var(--ar-icon-xl); height: var(--ar-icon-xl); }
.ar-icon-tile { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--ar-radius-md); background: var(--ar-color-brand-50); color: var(--ar-text-brand); flex: none; }
.ar-icon-tile--neutral { background: var(--ar-surface-sunken); color: var(--ar-text-muted); }

/* ============================================================ Anwendungsrahmen */
.ar-shell { display: grid; grid-template-columns: var(--ar-layout-sidebar) minmax(0, 1fr); min-height: 100vh; }
.ar-shell__side { background: var(--ar-surface-raised); border-right: 1px solid var(--ar-border-divider); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.ar-shell__brand { padding: var(--ar-space-4) var(--ar-space-4); border-bottom: 1px solid var(--ar-border-divider); }
.ar-shell__nav { flex: 1; padding: var(--ar-space-3) var(--ar-space-3) var(--ar-space-4); }
.ar-shell__foot { padding: var(--ar-space-3); border-top: 1px solid var(--ar-border-divider); }
.ar-shell__main { min-width: 0; display: flex; flex-direction: column; }
.ar-shell__top { position: sticky; top: 0; z-index: var(--ar-layout-z-index-sticky); display: flex; align-items: center; gap: var(--ar-space-4); padding: var(--ar-space-2) var(--ar-space-6); background: var(--ar-surface-raised); border-bottom: 1px solid var(--ar-border-divider); min-height: var(--ar-layout-topbar); }
.ar-shell__search { flex: 1; max-width: 26rem; }
.ar-shell__content { flex: 1; padding: var(--ar-space-6); }
@media (max-width: 64rem) {
  .ar-shell { grid-template-columns: minmax(0, 1fr); }
  .ar-shell__side { display: none; }
  .ar-shell__content { padding: var(--ar-space-4); }
  .ar-shell__top { padding-inline: var(--ar-space-4); }
}
.ar-shell__note { font-size: var(--ar-font-size-xs); color: var(--ar-text-muted); }
.ar-userbox { display: flex; align-items: center; gap: var(--ar-space-2); min-width: 0; }
.ar-userbox__name { font-size: var(--ar-font-size-sm); font-weight: var(--ar-font-weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-userbox__meta { font-size: var(--ar-font-size-xs); color: var(--ar-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ================================================== Sprungnavigation (Tabs) */
/* Ohne JavaScript: echte Sprungziele statt vorgetaeuschter Umschaltung.
   Bedienbar per Tastatur, im Browserverlauf, ohne Ladepause. */
a.ar-tabs__item { display: inline-block; text-decoration: none; }
a.ar-tabs__item[aria-current='true'] { color: var(--ar-text-brand); border-bottom-color: var(--ar-color-brand-600); font-weight: var(--ar-font-weight-semibold); }

/* ==================================================== Fahrzeugdetailseite */
.ar-detail { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--ar-space-6); align-items: start; }
@media (max-width: 64rem) { .ar-detail { grid-template-columns: minmax(0, 1fr); } }
.ar-detail__aside { position: sticky; top: calc(var(--ar-layout-topbar) + var(--ar-space-4)); display: flex; flex-direction: column; gap: var(--ar-space-4); }
@media (max-width: 64rem) { .ar-detail__aside { position: static; } }
.ar-heroimg { position: relative; aspect-ratio: 16 / 10; border-radius: var(--ar-radius-lg); overflow: hidden; background: var(--ar-surface-sunken); border: 1px solid var(--ar-border-subtle); display: grid; place-items: center; }
.ar-heroimg img { width: 100%; height: 100%; object-fit: cover; }
.ar-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: var(--ar-space-2); margin-top: var(--ar-space-3); }
.ar-thumbs a { display: block; aspect-ratio: 4 / 3; border-radius: var(--ar-radius-md); overflow: hidden; border: 1px solid var(--ar-border-subtle); background: var(--ar-surface-sunken); }
.ar-thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* ===================================================== Prozess als Zeitleiste */
.ar-progress-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--ar-space-1); }
.ar-progress-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ar-space-3); align-items: start; padding: var(--ar-space-3) var(--ar-space-4); border-radius: var(--ar-radius-md); border: 1px solid var(--ar-border-divider); background: var(--ar-surface-raised); }
.ar-progress-steps li[data-state='done'] { border-color: var(--ar-color-success-100); background: var(--ar-color-success-50); }
.ar-progress-steps li[data-state='current'] { border-color: var(--ar-color-brand-300); background: var(--ar-color-brand-50); }
.ar-progress-steps__mark { width: 1.5rem; height: 1.5rem; border-radius: var(--ar-radius-full); display: grid; place-items: center; font-size: var(--ar-font-size-xs); font-weight: var(--ar-font-weight-semibold); background: var(--ar-surface-sunken); color: var(--ar-text-muted); flex: none; }
.ar-progress-steps li[data-state='done'] .ar-progress-steps__mark { background: var(--ar-color-success-600); color: var(--ar-color-neutral-0); }
.ar-progress-steps li[data-state='current'] .ar-progress-steps__mark { background: var(--ar-color-brand-600); color: var(--ar-color-neutral-0); }
.ar-progress-steps__title { font-weight: var(--ar-font-weight-medium); font-size: var(--ar-font-size-sm); }
.ar-progress-steps__note { font-size: var(--ar-font-size-xs); color: var(--ar-text-muted); }

/* ============================================ Anlegeformular als Abschnitte */
.ar-formstep { display: flex; align-items: baseline; gap: var(--ar-space-3); }
.ar-formstep__no { font-family: var(--ar-font-family-mono); font-size: var(--ar-font-size-xs); color: var(--ar-text-brand); letter-spacing: var(--ar-font-tracking-wide); }

/* Eine Zeile mit vorangestelltem Symbol, als Absatzinhalt (Hinweise, Kurzinfos). */
.ar-notice-strong { display: flex; align-items: center; gap: var(--ar-space-2); font-weight: var(--ar-font-weight-semibold); }