/* INREMA Redesign 2026 — Base (Reset, Global, Keyframes, Layout-Utilities)
   Laedt nach tokens.css + fonts.css. Verbindlich: docs/composition-spec.md */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--pa);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
  overflow-x: hidden;  /* Schutz gegen horizontales Verschieben auf Mobil */
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hov); }
h1, h2, h3 { margin: 0; }
img { max-width: 100%; display: block; }
input, textarea, button, select { font-family: var(--font-sans); }
::selection { background: var(--sel); color: var(--nv); }

/* Layout-Utilities */
/* EINE feste Content-Achse: JEDE Sektion nutzt .container (1200). Nie per-Sektion
   die Container-Breite aendern — sonst driftet die Inhaltsbreite (verboten). */
.container { max-width: var(--container); margin: 0 auto; padding-left: var(--sec-pad-x); padding-right: var(--sec-pad-x); }
.container--narrow { max-width: var(--container-narrow); margin: 0 auto; padding-left: var(--sec-pad-x); padding-right: var(--sec-pad-x); }
/* Lese-Breite fuer Fliesstext (LINKS-buendig, startet an der Container-Kante). */
.measure { max-width: 680px; }
/* Zentrierte Sektion (CTA/Teaser): EINE feste Breite, im Container zentriert. */
.center-col { max-width: 720px; margin-left: auto; margin-right: auto; text-align: center; }

.section { padding-top: var(--sec-pad-y); padding-bottom: var(--sec-pad-y); }
.section--pa   { background: var(--pa); color: var(--ink); }
.section--pa2  { background: var(--pa-2); color: var(--ink); }
.section--nv   { background: var(--nv); color: var(--on-nv); }
.section--nv-deep { background: var(--nv-deep); color: var(--on-nv); }

/* Auto-fit-Grid (mobil ohne Media Queries) */
.grid-auto { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* Content-Breite (VERBINDLICH): Inhalt fuellt bis 1200px. Text NIE als schmale
   400/600-Spalte. Lange Lesetexte -> Content + Seitenleiste (fuellt die Breite). */
.layout { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr) var(--sidebar); align-items: start; }
.layout__main { min-width: 0; }
.layout__aside { min-width: 0; }
.prose { max-width: var(--reading); }   /* nur IM .layout neben einer Seitenleiste */
@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
}

/* Mobil: Sektions-Abstände reduzieren (kein horizontales Überlaufen) */
@media (max-width: 640px) {
  :root { --sec-pad-x: 22px; --sec-pad-y: 72px; }
}

/* Bewegung nur, wenn erlaubt */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* Keyframes (Bestand aus Prototyp) */
@keyframes sweep { 0%{transform:translateX(-30%) rotate(8deg);opacity:0} 20%{opacity:.5} 80%{opacity:.5} 100%{transform:translateX(130%) rotate(8deg);opacity:0} }
@keyframes dash  { to { stroke-dashoffset:-1000; } }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }
@keyframes creep { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes caret { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes fadein{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }