/* Grundstil der Suite — baut auf tokens.css auf. */
*, *::before, *::after { box-sizing: border-box; }
html, body, #wurzel { height: 100%; }
body {
  margin: 0;
  font-family: var(--schrift);
  font-size: var(--grund-groesse);
  line-height: var(--grund-zeile);
  color: var(--tinte);
  background: var(--flaeche);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
h1 { font-size: var(--titel1-groesse); line-height: var(--titel1-zeile); font-weight: var(--gewicht-extrafett); letter-spacing: var(--titel1-laufweite); }
h2 { font-size: var(--titel2-groesse); line-height: var(--titel2-zeile); font-weight: var(--gewicht-fett); letter-spacing: var(--titel2-laufweite); }
h3 { font-size: var(--titel3-groesse); line-height: var(--titel3-zeile); font-weight: var(--gewicht-halbfett); }
a { color: var(--wirkung); text-decoration: none; }
:focus-visible { outline: none; box-shadow: var(--fokus-schein); border-radius: var(--rund-klein); }

/* Seitenlayout: 12 Spalten, 16px Rinne, Seitenrand aus den Tokens */
.seite { padding: var(--r4) var(--seitenrand) var(--r8); }
.gitter { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--rinne); }

/* sanftes Einblenden beim Seitenwechsel */
@keyframes einblenden { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* „backwards“, nicht „both“ (Doc, 18.09.2026: Prompt-Fenster abgeschnitten): Eine
   Bewegung, die nach dem Ende stehen bleibt, macht die Fläche zum Bezugsrahmen
   für jedes aufspringende Fenster (position: fixed) — es mittete sich an der
   langen Seite statt am Bildschirm. So endet die Bewegung wirklich. */
.einblenden { animation: einblenden .22s ease backwards; }