/*
 * Layout-Primitive (ARCHITEKTUR-DESIGN.md §6) — genau drei, kein Utility-Wildwuchs:
 * .container, .stack, .grid-auto. Plus .skip-link und .visually-hidden (§7.5).
 * Breakpoints sind KEINE Tokens (Media Queries lesen keine Custom Properties) — hier
 * ungenutzt: .grid-auto bricht per `auto-fit` OHNE Media Query um (§6), Navigation
 * (die einzige Stelle mit echten Breakpoints, §7.11) ist Item 2.2 (NICHT anfassen).
 */

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

/* Vertikaler Fluss ueber `> * + *`-Margin statt Einzel-margin je Kindelement
   (§6) — Abstand nur ZWISCHEN Geschwistern, nicht vor dem ersten/nach dem letzten. */
.stack > * + * {
  margin-block-start: var(--space-md);
}

.stack--sm > * + * {
  margin-block-start: var(--space-sm);
}

.stack--lg > * + * {
  margin-block-start: var(--space-lg);
}

/* `min(100%, …)` verhindert Overflow unter 288px (§6, Reflow §7.8). */
.grid-auto {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

/* Skip-Link (§7.5): erstes fokussierbares Element, visuell nur bei Fokus sichtbar. */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-md);
  z-index: 100;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.skip-link:focus {
  top: var(--space-md);
}

/* Nur fuer Screenreader sichtbar (§7.6 Honeypot, §7.11 Icon-Beschriftungen). Bewusst
   NICHT `display:none` (das entfernt es auch aus dem Accessibility-Tree). */
.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;
}