/* Layout: dunkle Bühne im Ton der ÆC-Seite; oben die Kugel groß mit Text daneben, darunter die Videoliste (Video + Handybild + Text) */
@font-face { font-family: "Bodoni Moda"; src: url("fonts/bodoni.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("fonts/lexend.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  --stage: #292525;
  --raise: #332e2e;
  --line: #4a4444;
  --text: #ece8e6;
  --muted: #b3aca9;
  --red: #e2382f;
  --red-text: #ff6a5c;
  --display: "Bodoni Moda", "Iowan Old Style", Georgia, serif;
  --body: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--stage); color: var(--text); font-family: var(--body); font-weight: 300; line-height: 1.6; font-size: 17px; }
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: 20px; padding-block: 48px 64px; display: grid; gap: 64px; }
header, .sec-head { display: grid; gap: 12px; max-width: 68ch; }
.kicker { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin: 0; }
h1 { font-family: var(--display); font-weight: 600; font-size: clamp(2.3rem, 5.4vw, 3.8rem); line-height: 1.04; margin: 0; text-wrap: balance; }
h1 span { color: var(--red-text); }
h2 { font-family: var(--display); font-weight: 600; font-size: clamp(1.8rem, 3.6vw, 2.5rem); line-height: 1.1; margin: 0; text-wrap: balance; }
header p, .sec-head p { margin: 0; color: var(--muted); }
.answer { border: 1px solid var(--line); background: var(--raise); padding: 16px 20px; display: grid; gap: 4px; }
.answer b { font-weight: 500; color: var(--text); }
.answer span { color: var(--text); }
section { display: grid; gap: 28px; }
.kugel { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 40px; }
@media (max-width: 860px) { .kugel { grid-template-columns: 1fr; } }
.kugel__media { background: #000; aspect-ratio: 1 / 1; max-width: 100%; border: 1px solid var(--line); overflow: hidden; }
.kugel__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.kugel__text { display: grid; gap: 14px; min-width: 0; }
.kugel__text p { margin: 0; color: var(--muted); }
.vorbild { margin: 6px 0 0; display: flex; gap: 14px; align-items: center; }
.vorbild img { width: 72px; height: 72px; border-radius: 50%; display: block; }
.vorbild figcaption { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.opts { display: grid; gap: 32px; }
.opt { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 28px; padding-top: 32px; border-top: 1px solid var(--line); align-items: start; }
@media (max-width: 860px) { .opt { grid-template-columns: 1fr; gap: 16px; } }
.opt__media { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; min-width: 0; }
.opt__media video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; border: 1px solid var(--line); display: block; }
.opt__handy { width: clamp(72px, 13vw, 128px); aspect-ratio: 9 / 16; object-fit: cover; border: 1px solid var(--line); display: block; max-width: 100%; height: auto; }
.opt__text { display: grid; gap: 8px; min-width: 0; }
.opt__text p { margin: 0; font-size: .95rem; }
.opt__text h3 { font-family: var(--display); font-weight: 600; font-size: 1.7rem; line-height: 1.1; margin: 0; }
.opt__text .opt__nr { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--red-text); font-weight: 500; }
.flag { color: var(--text); border: 1px solid var(--line); padding: 1px 7px; margin-left: 8px; letter-spacing: .12em; font-size: .68rem; }
.opt__text .opt__zeit { color: var(--muted); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.opt__text .opt__quelle { color: var(--muted); font-size: .78rem; }
footer { border-top: 1px solid var(--line); padding-top: 24px; }
footer p { margin: 0; font-size: .8rem; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
.kugeln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
@media (max-width: 900px) { .kugeln { grid-template-columns: 1fr; max-width: 520px; } }
.kug { margin: 0; display: grid; gap: 12px; min-width: 0; }
.kug__media { background: #000; aspect-ratio: 1 / 1; max-width: 100%; border: 1px solid var(--line); overflow: hidden; }
.kug__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.kug figcaption { display: grid; gap: 8px; }
.kug figcaption p { margin: 0; font-size: .95rem; color: var(--muted); }
.kug figcaption .opt__nr { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--red-text); font-weight: 500; }
.kug h3 { font-family: var(--display); font-weight: 600; font-size: 1.5rem; line-height: 1.1; margin: 0; }
.speed { font-size: .9rem; color: var(--text); margin-top: 4px; }
.speed output { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--red-text); }
.tempo { width: 100%; accent-color: var(--red); }
.tempo:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.sec-head .vorbild { margin-top: 4px; }