/* ============================================================================
   DIAMOND SOLUTION, Landingpage
   ----------------------------------------------------------------------------
   Layout-Schicht fuer die Webseite. Farben, Schrift, Form und Timing kommen
   ausschliesslich aus css/tokens.css (dieselbe Datei wie in der
   STIG-ROCK-Praesentation), die Bewegung aus css/animations.css.

   Verbindliche Vorgaben der Marke, die hier eingehalten werden:
     · genau drei Markenfarben, Kupfer ist der einzige Akzent und nie Flaeche
     · eine Schrift: Montserrat 400 / 600 / 700
     · kein Border-Radius, keine Schatten, keine Verlaeufe
       (Ausnahme: Scrim-Flaechen ueber Fotos, wie auf den Folien)
     · Bewegung nur ueber Position, Deckkraft und Haarlinien

   Die Praesentation ist eine feste 1920er Buehne, die Seite ist fliessend.
   Die Schriftgroessen sind deshalb als clamp() nachgebaut, die Verhaeltnisse
   der vier Stufen bleiben erhalten.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-weight: var(--w-regular);
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---- Hintergrund-Wasserzeichen, laeuft ueber die ganze Seite ------------- */
#bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.bg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

main, nav, footer { position: relative; z-index: 1; }

/* ---- Grundbausteine ------------------------------------------------------ */

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }

section { padding: clamp(72px, 9vh, 150px) 0; position: relative; }
section + section { border-top: var(--hairline) solid var(--line); }

.eyebrow {
  font-size: clamp(11px, 0.78vw, 14px);
  font-weight: var(--w-semi);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: clamp(16px, 2vw, 26px);
}
.eyebrow--muted { color: var(--text-muted); }

h1, h2, h3 { font-weight: var(--w-bold); line-height: var(--lh-tight); letter-spacing: var(--track-h1); }

h2 {
  font-size: clamp(27px, 3.6vw, 56px);
  text-transform: uppercase;
  max-width: 22em;
}
h3 {
  font-size: clamp(17px, 1.45vw, 25px);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lead {
  margin-top: clamp(18px, 2.2vw, 30px);
  font-size: clamp(16px, 1.25vw, 22px);
  color: var(--text-muted);
  max-width: 42em;
}
.gold { color: var(--accent); }

/* Kupfer-Haarlinie, zeichnet sich beim Erscheinen (data-draw) */
.rule {
  width: clamp(120px, 14vw, 240px);
  height: 1px;
  background: var(--accent);
  margin: clamp(26px, 3.4vw, 48px) 0 0;
  transform-origin: left center;
}

.foot-note {
  margin-top: clamp(24px, 3vw, 44px);
  font-size: clamp(11px, 0.76vw, 14px);
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 68em;
}

/* ---- Schaltflaechen ------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: clamp(15px, 1.5vw, 22px) clamp(24px, 2.6vw, 42px);
  border: var(--hairline) solid var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  font-size: clamp(12px, 0.92vw, 16px);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn:hover, .btn:focus-visible { background: transparent; color: var(--accent); outline: none; }
.btn .arrow { transition: translate var(--t-fast) var(--ease); }
.btn:hover .arrow { translate: 5px 0; }

.btn--ghost { background: transparent; color: var(--accent); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--accent); color: var(--on-accent); }

.btn-row { display: flex; flex-wrap: wrap; gap: clamp(14px, 1.6vw, 22px); align-items: center; margin-top: clamp(30px, 4vw, 52px); }
.btn-note { font-size: clamp(11px, 0.78vw, 14px); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }

/* ---- Kopfzeile ----------------------------------------------------------- */

nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  background: rgba(10, 10, 10, 0.92);
  border-bottom: var(--hairline) solid var(--line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nav-in {
  max-width: 1240px; margin: 0 auto;
  padding: clamp(12px, 1.2vw, 18px) clamp(20px, 4vw, 56px);
  display: flex; align-items: center; gap: clamp(12px, 2vw, 32px);
}
.nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; min-width: 0; }
.nav-logo img { display: block; width: clamp(44px, 4.2vw, 56px); height: auto; }
.nav-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav-name b {
  font-size: clamp(13px, 1.1vw, 18px);
  font-weight: var(--w-bold);
  letter-spacing: 0.14em;
  color: var(--text);
}
.nav-name i {
  font-style: normal;
  font-size: clamp(8px, 0.62vw, 11px);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
@media (max-width: 640px) { .nav-name i { display: none; } }

/* Sprachwahl: Kuerzel in einer Reihe, kein Dropdown, keine Emoji-Flaggen */
.langs { display: flex; gap: 2px; }
.lang {
  border: var(--hairline) solid var(--line-strong);
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: clamp(10px, 0.72vw, 13px);
  font-weight: var(--w-semi);
  letter-spacing: 0.1em;
  padding: 7px clamp(7px, 0.7vw, 11px);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.lang:hover { color: var(--text); border-color: var(--accent-line); }
.lang[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }

.nav-cta {
  border: var(--hairline) solid var(--accent);
  color: var(--accent);
  font-size: clamp(10px, 0.74vw, 13px);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: none;
  padding: 11px clamp(13px, 1.3vw, 22px);
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav-cta:hover, .nav-cta:focus-visible { background: var(--accent); color: var(--on-accent); }
@media (max-width: 520px) { .nav-cta { display: none; } }

/* ---- Titelbild ----------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: clamp(120px, 16vh, 190px) 0 clamp(72px, 10vh, 120px);
  border-top: 0;
  overflow: hidden;
}
.hero-img { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }
.hero-rain {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.22; mix-blend-mode: screen; pointer-events: none;
}
.hero-scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10,10,10,.95) 0%, rgba(10,10,10,.86) 34%, rgba(10,10,10,.42) 60%, rgba(10,10,10,0) 86%),
    linear-gradient(0deg, rgba(10,10,10,.82) 0%, rgba(10,10,10,0) 34%);
}
@media (max-width: 860px) {
  .hero-scrim {
    background:
      linear-gradient(90deg, rgba(10,10,10,.95) 0%, rgba(10,10,10,.8) 62%, rgba(10,10,10,.55) 100%),
      linear-gradient(0deg, rgba(10,10,10,.9) 0%, rgba(10,10,10,0) 52%);
  }
}
.hero-in { position: relative; z-index: 3; }
.hero-hello {
  font-size: clamp(13px, 1.25vw, 22px);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: clamp(16px, 2vw, 26px);
}
.hero-title {
  font-size: clamp(34px, 5.6vw, 92px);
  line-height: 1.0;
  text-transform: uppercase;
}
.hero-sub {
  margin-top: clamp(20px, 2.6vw, 34px);
  font-size: clamp(13px, 1.3vw, 24px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 24em;
}

/* Ecken-Facetten wie auf der Titelfolie */
.hero-corner { position: absolute; z-index: 2; width: clamp(180px, 24vw, 420px); height: clamp(180px, 24vw, 420px); opacity: 0.245; pointer-events: none; }
.hero-corner path { fill: none; stroke: var(--accent); stroke-width: 1; }
.hero-corner--tl { left: -30px; top: -30px; }
.hero-corner--br { right: -30px; bottom: -30px; transform: rotate(180deg); }

/* ---- Die Frage ----------------------------------------------------------- */

.question { overflow: hidden; }
.question-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 4vw, 70px);
  align-items: center;
}
.question-q {
  font-size: clamp(26px, 3.9vw, 62px);
  font-weight: var(--w-bold);
  line-height: 1.06;
  text-transform: uppercase;
}
/* Lichtschein hinter der Produktbox, wie auf der Folie: die schwarze Box
   waere auf schwarzem Grund sonst nicht zu erkennen */
.question-box { position: relative; }
.question-box::before {
  content: "";
  position: absolute; left: -18%; right: -18%; top: -22%; bottom: 10%;
  z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 46%,
              rgba(184,149,111,.42) 0%, rgba(184,149,111,.16) 42%, rgba(184,149,111,0) 72%);
}
.question-box img { position: relative; z-index: 1; }
:root[data-theme="light"] .question-box::before { opacity: .5; }
.question-box img { width: 100%; height: auto; display: block; }
/* Spiegelung: nur ein schmaler Streifen des unteren Bildrands, sonst waere
   die Spalte doppelt so hoch wie der Text daneben */
.question-box .refl {
  width: 100%;
  aspect-ratio: 1263 / 230;
  object-fit: cover;
  object-position: center bottom;
  transform: scaleY(-1);
  margin-top: 4px;
  opacity: 0.16;
  -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 100%);
          mask-image: linear-gradient(0deg, transparent 0%, #000 100%);
}
.spark { position: absolute; z-index: 2; width: 4px; height: 4px; background: var(--accent); opacity: 0; animation: spark 5s var(--ease-soft) infinite; }
@keyframes spark { 0%, 100% { opacity: 0; scale: .6; } 50% { opacity: .9; scale: 1; } }
@media (max-width: 860px) {
  .question-grid { grid-template-columns: minmax(0, 1fr); }
  .question-box { max-width: 420px; margin: 0 auto; }
}

/* ---- Die beiden Praesentationen ------------------------------------------ */

.videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: clamp(22px, 2.6vw, 40px); margin-top: clamp(34px, 4vw, 56px); }
.video-card { border: var(--hairline) solid var(--line-strong); background: var(--surface); display: flex; flex-direction: column; }
.video-card:hover { border-color: var(--accent-line); }
.video-frame { position: relative; aspect-ratio: 16 / 9; background: var(--bg-deep); overflow: hidden; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Standbild mit Abspielknopf: das Vimeo-Fenster laedt erst beim Klick */
.video-poster { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: var(--bg-deep); cursor: pointer; display: grid; place-items: center; }
.video-poster::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(10,10,10,.72) 0%, rgba(10,10,10,.1) 60%);
  pointer-events: none;
}
.video-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.video-play { position: relative; z-index: 1; width: clamp(62px, 6vw, 86px); height: clamp(62px, 6vw, 86px); border: var(--hairline) solid var(--accent); background: rgba(10,10,10,.5); color: var(--accent); display: grid; place-items: center; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.video-play svg { width: 42%; height: 42%; }
.video-poster:hover .video-play, .video-poster:focus-visible .video-play { background: var(--accent); color: var(--on-accent); }
.video-text { padding: clamp(20px, 2.2vw, 34px); display: flex; flex-direction: column; gap: 12px; flex: 1; }
.video-no { font-size: clamp(11px, 0.78vw, 14px); font-weight: var(--w-semi); letter-spacing: var(--track-label); color: var(--accent); }
.video-desc { font-size: clamp(14px, 1vw, 17px); color: var(--text-muted); }
.video-meta { margin-top: auto; padding-top: 12px; font-size: clamp(11px, 0.76vw, 13px); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }

/* ---- Kostenbalken -------------------------------------------------------- */

.bars { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: clamp(16px, 2vw, 34px); margin-top: clamp(40px, 5vw, 70px); align-items: end; }
/* feste Hoehe, nicht min-height: die Fuellung rechnet in Prozent und braucht
   dafuer eine Hoehe, die wirklich feststeht */
.bar { display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; height: clamp(190px, 22vw, 320px); }
.bar-name { font-size: clamp(13px, 0.95vw, 17px); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.bar-val { font-size: clamp(26px, 2.9vw, 48px); font-weight: var(--w-bold); color: var(--accent); line-height: 1; }
.bar-fill { height: var(--bh, 40%); min-height: 3px; border-top: 2px solid var(--accent); background: var(--accent-soft); transform-origin: bottom center; }
body.is-ready .bar-fill { animation: barRise 1000ms var(--ease) backwards; animation-delay: calc(240ms + var(--i, 0) * 120ms); }

/* ---- Aufzaehlung mit Nummern (01 / 02 / 03) ------------------------------ */

.numbered { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(22px, 2.8vw, 48px); margin-top: clamp(40px, 5vw, 70px); }
.num-item { border-top: var(--hairline) solid var(--accent-line); padding-top: clamp(18px, 2vw, 28px); }
.num-no { font-size: clamp(13px, 0.95vw, 17px); font-weight: var(--w-bold); letter-spacing: var(--track-label); color: var(--accent); margin-bottom: 12px; }
.num-title { font-size: clamp(16px, 1.3vw, 23px); font-weight: var(--w-semi); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 10px; }
.num-text { font-size: clamp(14px, 1vw, 17px); color: var(--text-muted); }

/* ---- Karten (6 Gruende, Sicherheit, Optionen) ---------------------------- */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: clamp(16px, 1.8vw, 28px); margin-top: clamp(40px, 5vw, 70px); }
.card { border: var(--hairline) solid var(--line-strong); background: var(--surface); padding: clamp(22px, 2.4vw, 38px); display: flex; flex-direction: column; gap: 14px; transition: border-color var(--t-fast) var(--ease); }
.card:hover { border-color: var(--accent-line); }
.card-ic { width: clamp(42px, 4vw, 58px); height: clamp(42px, 4vw, 58px); border: var(--hairline) solid var(--accent-line); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin-bottom: 4px; }
.card-ic svg { width: 56%; height: 56%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card-t { font-size: clamp(15px, 1.2vw, 21px); font-weight: var(--w-semi); text-transform: uppercase; letter-spacing: 0.03em; }
.card-x { font-size: clamp(14px, 1vw, 17px); color: var(--text-muted); }
.card--accent { border-color: var(--accent); }
/* vier Karten sollen in einer Reihe stehen, nicht drei und eine */
.cards--vier { grid-template-columns: repeat(auto-fit, minmax(min(100%, 232px), 1fr)); }

/* ---- Rechenbeispiel, drei Stufen ----------------------------------------- */

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(2px, 0.2vw, 2px); margin-top: clamp(40px, 5vw, 70px); }
.step { border: var(--hairline) solid var(--line-strong); background: var(--surface); padding: clamp(24px, 2.6vw, 40px); display: flex; flex-direction: column; gap: 10px; }
.step-no { font-size: clamp(11px, 0.78vw, 14px); font-weight: var(--w-semi); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-muted); }
.step-big { font-size: clamp(34px, 3.8vw, 64px); font-weight: var(--w-bold); color: var(--accent); line-height: 1; letter-spacing: -0.01em; }
.step-sub { font-size: clamp(13px, 0.95vw, 16px); color: var(--text-muted); }
.step-plus { font-size: clamp(15px, 1.2vw, 20px); font-weight: var(--w-semi); color: var(--text); }
.step--final { border-color: var(--accent); background: var(--accent-soft); }

/* ---- Rechnung in einer Zeile (einmal kaufen / Rabatt / effektiv) --------- */

.sum { margin-top: clamp(40px, 5vw, 70px); border: var(--hairline) solid var(--line-strong); background: var(--surface); }
.sum-row { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: clamp(18px, 2vw, 30px) clamp(20px, 2.4vw, 38px); flex-wrap: wrap; }
.sum-row + .sum-row { border-top: var(--hairline) solid var(--line); }
.sum-k { font-size: clamp(13px, 1vw, 18px); color: var(--text-muted); letter-spacing: 0.04em; text-transform: uppercase; }
.sum-v { font-size: clamp(22px, 2.3vw, 40px); font-weight: var(--w-bold); white-space: nowrap; }
.sum-row--result { background: var(--accent-soft); border-top: 2px solid var(--accent) !important; }
.sum-row--result .sum-k { color: var(--text); font-weight: var(--w-semi); }
.sum-row--result .sum-v { color: var(--accent); }

/* ---- Fixkosten, gedeckt -------------------------------------------------- */

.costs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: clamp(2px, 0.2vw, 2px); margin-top: clamp(40px, 5vw, 70px); }
.cost { border: var(--hairline) solid var(--line-strong); background: var(--surface); padding: clamp(20px, 2.2vw, 32px); display: flex; flex-direction: column; gap: 10px; }
.cost-ic { color: var(--accent); width: 34px; height: 34px; }
.cost-ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cost-n { font-size: clamp(13px, 1vw, 17px); letter-spacing: 0.06em; text-transform: uppercase; }

/* ---- Heller Abschnitt, wie die hellen Folien ----------------------------- */

section[data-theme="light"] { background: var(--bg); color: var(--text); }
section[data-theme="light"] .card { background: var(--surface); }

/* ---- Abschluss ----------------------------------------------------------- */

.closing { text-align: center; }
.closing h2 { max-width: none; margin: 0 auto; font-size: clamp(28px, 4.4vw, 76px); }
.closing .rule { margin-left: auto; margin-right: auto; }
.closing .btn-row { justify-content: center; }
.closing .lead { margin-left: auto; margin-right: auto; }
.closing .foot-note { margin-left: auto; margin-right: auto; text-align: center; }

/* ---- Rechtlicher Hinweis ------------------------------------------------- */

.legal { background: var(--bg-soft); }
.legal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: clamp(18px, 2.2vw, 34px); margin-top: clamp(34px, 4vw, 56px); }
.legal-item { border-left: 2px solid var(--accent-line); padding-left: clamp(14px, 1.4vw, 22px); }
.legal-t { font-size: clamp(13px, 1vw, 17px); font-weight: var(--w-semi); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.legal-x { font-size: clamp(13px, 0.92vw, 16px); color: var(--text-muted); }

/* ---- Fusszeile ----------------------------------------------------------- */

footer { border-top: var(--hairline) solid var(--line); padding: clamp(46px, 6vw, 82px) 0 clamp(34px, 4vw, 56px); background: var(--bg-deep); }
.foot-top { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); flex-wrap: wrap; }
.foot-top img { width: clamp(96px, 9vw, 124px); height: auto; display: block; }
.foot-adresse {
  font-size: clamp(11px, 0.82vw, 14px);
  line-height: 1.7;
  color: var(--text-muted);
}
.foot-adresse b {
  display: block;
  font-size: clamp(12px, 0.9vw, 15px);
  font-weight: var(--w-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 4px;
}
.foot-adresse a { color: var(--accent); text-decoration: none; }
.foot-adresse a:hover { text-decoration: underline; }
.foot-legal--stark { color: var(--text-muted); border-left: 2px solid var(--accent-line); padding-left: clamp(12px, 1.2vw, 18px); }
.foot-legal { margin-top: clamp(26px, 3vw, 42px); font-size: clamp(11px, 0.78vw, 14px); line-height: 1.7; color: var(--text-dim); max-width: 80em; }
.foot-copy { margin-top: clamp(18px, 2vw, 28px); padding-top: clamp(16px, 1.8vw, 24px); border-top: var(--hairline) solid var(--line); font-size: clamp(11px, 0.76vw, 13px); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); display: flex; gap: 18px; flex-wrap: wrap; justify-content: space-between; }

/* ---- Hinweis, welcher Empfehlungslink gesetzt wurde ---------------------- */

.ref-note {
  position: fixed; left: 50%; bottom: 20px; translate: -50% 0; z-index: 95;
  border: var(--hairline) solid var(--accent-line);
  background: rgba(10, 10, 10, 0.94);
  color: var(--accent);
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 10px 18px;
  display: none;
}

/* ---- Einblenden beim Scrollen -------------------------------------------
   animations.css ist 1:1 aus der Praesentation uebernommen und startet dort
   jede Einblendung mit body.is-ready, weil immer nur eine Folie im Bild ist.
   Die Seite scrollt: ausserhalb des Titelbilds wartet die Bewegung deshalb,
   bis der Abschnitt im Bild ist (js/site.js setzt .is-shown). Die Bewegung
   selbst bleibt dieselbe.                                                  */

body.is-ready main > section:not(.hero):not(.is-shown) [data-reveal],
body.is-ready main > section:not(.hero):not(.is-shown) [data-reveal-scale],
body.is-ready main > section:not(.hero):not(.is-shown) [data-reveal-stagger] > *,
body.is-ready main > section:not(.hero):not(.is-shown) [data-draw],
body.is-ready main > section:not(.hero):not(.is-shown) .bar-fill {
  animation: none;
}
body.is-ready main > section:not(.hero):not(.is-shown) [data-draw],
body.is-ready main > section:not(.hero):not(.is-shown) .bar-fill {
  transform: scaleX(0);
}
body.is-ready main > section:not(.hero):not(.is-shown) .bar-fill {
  transform: scaleY(0.03);
  opacity: 0;
}

body.is-ready main > section.is-shown [data-reveal] {
  animation: revealUp var(--t-slow) var(--ease) forwards;
  animation-delay: calc(var(--d, 0) * 1ms);
}
body.is-ready main > section.is-shown [data-reveal-scale] {
  animation: revealScale 820ms var(--ease) 180ms forwards;
}
body.is-ready main > section.is-shown [data-draw] {
  animation: drawLine 1000ms var(--ease-soft) 320ms backwards;
}
body.is-ready main > section.is-shown .bar-fill {
  animation: barRise 1000ms var(--ease) backwards;
  animation-delay: calc(240ms + var(--i, 0) * 120ms);
}

@media (prefers-reduced-motion: reduce) {
  body.is-ready main > section:not(.hero):not(.is-shown) [data-reveal],
  body.is-ready main > section:not(.hero):not(.is-shown) [data-reveal-scale],
  body.is-ready main > section:not(.hero):not(.is-shown) [data-draw],
  body.is-ready main > section:not(.hero):not(.is-shown) .bar-fill {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
    transform: none !important;
  }
}

/* ---- Sprunghilfe --------------------------------------------------------- */

.skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--accent); color: var(--on-accent); padding: 12px 20px; }
.skip:focus { left: 12px; top: 12px; }

/* ---- Bildschirmgroessen -------------------------------------------------- */

@media (max-width: 520px) {
  .hero { min-height: auto; }
  .sum-v { font-size: clamp(20px, 7vw, 28px); }
}