/* METAMOR Seiten-Muster: gemeinsame Basis. Werte aus DESIGN.md (Entwurf), dunkel zuerst, hell über System oder data-theme.
   Schriften liegen im Repo (OFL), es geht keine Anfrage an Google. */
@font-face { font-family: Inter; src: url(schrift/Inter-Regular.ttf); font-weight: 400; font-display: swap; }
@font-face { font-family: Inter; src: url(schrift/Inter-SemiBold.ttf); font-weight: 600; font-display: swap; }
@font-face { font-family: Inter; src: url(schrift/Inter-Bold.ttf); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Saira Condensed'; src: url(schrift/SairaCondensed-SemiBold.ttf); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Saira Condensed'; src: url(schrift/SairaCondensed-Bold.ttf); font-weight: 700; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url(schrift/IBMPlexMono-Medium.ttf); font-weight: 500; font-display: swap; }

:root {
  color-scheme: dark;
  --onyx: #0b0a09; --nacht-1: #141210; --nacht-2: #1b1816; --nacht-3: #231f1c;
  --rand-deko: #3d352f; --rand-bedien: #70655b;
  --tinte: #f4eee5; --tinte-2: #b8ad9e; --tinte-3: #948a7d;
  --gold: #c9a24b; --glut: #e88630; --glut-tinte: #1a0e03; --signal: #3ddc84; --krit: #e5484d;
  --gold-hauch: rgba(201, 162, 75, .10); --glut-hauch: rgba(232, 134, 48, .12);
  --relief: inset 0 1px 0 rgba(244, 238, 229, .06), 0 10px 24px -14px rgba(0, 0, 0, .8);
  --display: 'Saira Condensed', 'Arial Narrow', sans-serif;
  --text: Inter, system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --r-klein: 8px; --r-mittel: 12px; --r-gross: 16px;
  --rand: max(16px, 4vw);
  --abstand: clamp(64px, 8vw, 112px);
  --kurve: cubic-bezier(.2, .7, .2, 1);
  --dauer: 420ms;
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) {
  color-scheme: light;
  --onyx: #fff9f0; --nacht-1: #ffffff; --nacht-2: #fbf3e8; --nacht-3: #f4e9da;
  --rand-deko: #eadcc9; --rand-bedien: #8a7d70;
  --tinte: #2e2925; --tinte-2: #5c544c; --tinte-3: #70665c;
  --gold: #7d5f1c; --glut: #a8520f; --glut-tinte: #ffffff; --signal: #1d7a45; --krit: #b42318;
  --gold-hauch: rgba(125, 95, 28, .08); --glut-hauch: rgba(168, 82, 15, .08);
  --relief: inset 0 1px 0 rgba(255, 255, 255, .7), 0 10px 24px -16px rgba(46, 41, 37, .35);
} }
:root[data-theme="light"] {
  color-scheme: light;
  --onyx: #fff9f0; --nacht-1: #ffffff; --nacht-2: #fbf3e8; --nacht-3: #f4e9da;
  --rand-deko: #eadcc9; --rand-bedien: #8a7d70;
  --tinte: #2e2925; --tinte-2: #5c544c; --tinte-3: #70665c;
  --gold: #7d5f1c; --glut: #a8520f; --glut-tinte: #ffffff; --signal: #1d7a45; --krit: #b42318;
  --gold-hauch: rgba(125, 95, 28, .08); --glut-hauch: rgba(168, 82, 15, .08);
  --relief: inset 0 1px 0 rgba(255, 255, 255, .7), 0 10px 24px -16px rgba(46, 41, 37, .35);
}
:root[data-theme="dark"] { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--onyx); color: var(--tinte); font: 400 16px/1.6 var(--text); }
img, video, canvas { max-width: 100%; display: block; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; font-family: var(--display); text-transform: uppercase; letter-spacing: .01em; text-wrap: balance; }
h1 { font-size: clamp(44px, 8vw, 112px); font-weight: 700; line-height: .92; }
h2 { font-size: clamp(32px, 4.6vw, 64px); font-weight: 700; line-height: .98; }
h3 { font-size: clamp(20px, 2vw, 26px); font-weight: 600; line-height: 1.15; }
p { margin: 0; max-width: 64ch; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--glut); outline-offset: 3px; }

.rahmen { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--rand); }
.abschnitt { padding-block: var(--abstand); }
.label { font: 500 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--tinte-2); }
.leise { color: var(--tinte-3); font-size: 14px; }

.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 12px 20px;
  border: 0; border-radius: var(--r-mittel); background: var(--glut); color: var(--glut-tinte);
  font: 600 15px/1 var(--text); text-decoration: none; cursor: pointer;
  transition: transform 160ms var(--kurve), filter 160ms var(--kurve); }
.knopf:hover { filter: brightness(1.08); }
.knopf:active { transform: translateY(1px) scale(.98); }
.knopf.leise { background: var(--nacht-2); color: var(--tinte); border: 1px solid var(--rand-bedien); }
.karte { background: var(--nacht-1); border-radius: var(--r-gross); padding: 24px; }
.relief { box-shadow: var(--relief); } /* nur Säulen-Kacheln und Hauptknöpfe (Design-Kern) */

/* Auftritt: Inhalte sind ohne Skript sichtbar. basis.js setzt .bereit erst, wenn Bewegung erlaubt ist. */
.bereit [data-auftritt] { opacity: 0; transform: translateY(24px); transition: opacity var(--dauer) var(--kurve), transform var(--dauer) var(--kurve); transition-delay: calc(var(--i, 0) * 70ms); }
.bereit [data-auftritt].da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; scroll-behavior: auto !important; } }