/* Leitkante Skalierungs-Standard (Ultrawide bis 32:9). Stand 2026-10-24.
   Prinzip: alles in rem, die Wurzelgröße wächst ab ~1440 px sanft und begrenzt (bis +19 %) mit. So bleibt die
   Komposition auf 1920, 2560, 3440 und 5120 px proportional, statt als kleine Insel
   in der Mitte zu stehen. Handy bleibt bei 16 px. */

:root {
  --root-min: 16px;
  --root-max: 19px;   /* Wachstum begrenzt (~+19 %), wie bei Rosen Baehr xxl.css (max. ~+20 %) */
  --content-max: 84rem;   /* Hauptinhalt */
  --prose-max: 68ch;      /* Fließtext, nie breiter */
  --gutter: clamp(1rem, 4vw, 6rem);
  --section-gap: clamp(4rem, 3rem + 6vw, 11rem);
  --h1: min(clamp(2.5rem, 1rem + 3.4vw, 6.5rem), 20svh);  /* hoehenbewusst: nie hoeher als 20 % der Bildschirmhoehe */
  --h2: min(clamp(1.9rem, 1rem + 1.8vw, 4rem), 12svh);
  --body: clamp(1rem, 0.94rem + 0.3vw, 1.4rem);
}

html {
  font-size: clamp(var(--root-min), calc(10px + 0.4vw), var(--root-max));
  -webkit-text-size-adjust: 100%;
}

/* Randloser Hintergrund, begrenzter Inhalt (kein overflow-x an body/html!) */
.bleed   { width: 100%; }
.content { width: min(100% - 2 * var(--gutter), var(--content-max)); margin-inline: auto; }
.prose   { max-width: var(--prose-max); }
.section { padding-block: var(--section-gap); }

/* Raster: wächst mit, bleibt auf max. 6 Spalten */
.grid {
  display: grid;
  gap: clamp(1rem, 0.5rem + 1.6vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.grid[data-max="3"] { --cols: 3; }
@media (min-width: 120rem) { .grid:not([data-max]) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); } }

/* Hero: füllt die Höhe, aber nie höher als eine sinnvolle Komposition */
.hero { min-height: min(100svh, 70rem); display: grid; align-items: center; position: relative; overflow: clip; }
.hero > .hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Medien füllen, verzerren nie */
img, video, canvas { max-width: 100%; height: auto; }
.cover { width: 100%; height: 100%; object-fit: cover; }
svg[data-fill] { width: 100%; height: 100%; }  /* im SVG: preserveAspectRatio="xMidYMid slice" */

/* Randzonen: Dekor an den Bildschirmrand verankern, damit breite Seiten nicht leer wirken */
.edge-left, .edge-right { position: absolute; top: 0; bottom: 0; width: clamp(0px, (100vw - var(--content-max)) / 2, 40rem); pointer-events: none; }
.edge-left { left: 0; } .edge-right { right: 0; }

/* Sehr breit und flach (21:9, 32:9): Höhen begrenzen, Inhalt nicht strecken */
@media (min-aspect-ratio: 21/9) {
  .hero { min-height: min(100svh, 60rem); }
}

/* Bewegung: Wege in rem, nicht in px, und für Nutzer ohne Bewegung aus */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}