/* ══════════════════════════════════════════════════════════════════════════ GRUND.CSS — die gemeinsame Unterlage aller 12 Vorlagen. 🔴 WAS HIER NICHT HINEINGEHÖRT: Farben, Schriftwahl, Abstandsskalen, Radien, Schatten. Das ist die Handschrift der einzelnen Vorlage und steht in deren eigener stil.css. Wer hier eine Markenfarbe einträgt, macht aus 12 Handschriften eine. WAS HIER HINEINGEHÖRT: Dinge, die in jeder Vorlage gleich richtig sind — Box-Modell, Medien-Grundlagen, Tastaturbedienung, Bewegungsverzicht. ══════════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* 🔴 KEIN scroll-behavior:smooth hier. Das Sanftscrollen macht Lenis in buehne.js. Beides zusammen kämpft gegeneinander und ruckelt. */ } body { margin: 0; min-height: 100svh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis-weight: none; text-rendering: optimizeLegibility; } h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; } ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; } /* Medien: nie breiter als ihr Kasten, und `display:block` gegen den 4-px-Spalt, den `inline` unter Bildern erzeugt. */ img, picture, video, canvas, svg { display: block; max-width: 100%; } img, video { height: auto; } /* 🩸 Bilder OHNE Seitenverhältnis sind die häufigste CLS-Quelle. Jede Vorlage setzt width/height ODER aspect-ratio an jedem . */ input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } /* Tastatur: sichtbarer Fokus, aber nicht bei Mausklick. Die Vorlage darf --fokus überschreiben; ohne Angabe nimmt sie ihre eigene Textfarbe. */ :focus-visible { outline: 3px solid var(--fokus, currentColor); outline-offset: 3px; border-radius: 4px; } :focus:not(:focus-visible) { outline: none; } /* Sprunglink — Pflicht in jeder Vorlage, erstes Element im . */ .sprung { position: absolute; left: 1rem; top: -4rem; z-index: 999; padding: .75rem 1.25rem; border-radius: 6px; background: var(--sprung-grund, #111); color: var(--sprung-schrift, #fff); text-decoration: none; font-weight: 600; transition: top .2s cubic-bezier(.22,1,.36,1); } .sprung:focus { top: 1rem; } /* Nur für Screenreader — sichtbar für Vorlesesoftware, unsichtbar am Schirm. */ .nur-vorlesen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ── Auftritte ──────────────────────────────────────────────────────────── 🔴 FAIL-SAFE: Elemente mit [data-auftritt] sind hier NICHT versteckt. Das Verstecken macht buehne.js erst, NACHDEM Motion nachweislich geladen ist. Bleibt das JS aus (Fehler, Blocker, altes Gerät), steht die Seite vollständig da — statt leer. Genau andersherum als üblich, mit Absicht. */ [data-auftritt] { will-change: auto; } /* ── Bewegungsverzicht ──────────────────────────────────────────────────── Pflicht. Wer „reduzierte Bewegung" eingestellt hat, sieht den ruhigen Endzustand — nicht eine schnellere Fassung derselben Animation. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } [data-auftritt] { opacity: 1 !important; transform: none !important; filter: none !important; } } /* ── Browser-Flächen, die zu keinem Designsystem gehören ────────────────── Textmarkierung, Cursor und Scrollbalken kommen sonst vom Betriebssystem und verraten sofort, dass eine Seite zusammengesetzt statt gebaut wurde. Die Vorlage setzt --wahl-grund / --wahl-schrift / --balken-*. */ ::selection { background: var(--wahl-grund, #111); color: var(--wahl-schrift, #fff); } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: var(--balken-bahn, transparent); } ::-webkit-scrollbar-thumb { background: var(--balken-griff, rgba(128,128,128,.42)); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--balken-griff-hover, rgba(128,128,128,.68)); background-clip: content-box; } html { scrollbar-width: thin; scrollbar-color: var(--balken-griff, rgba(128,128,128,.42)) var(--balken-bahn, transparent); } /* Zahlen in Tabellen/Preisen laufen sonst unterschiedlich breit. */ .zahlen { font-variant-numeric: tabular-nums; }