/*
 * Die VE-AD-Seite — nach Marçals Skizze vom 12.09.2026: eine Mittelspalte, in der sich Form und
 * Text abwechseln (Form der Gruppe oben, darunter der Text dazu, dann die nächste Form); an
 * beiden Rändern die grauen, neutralen Holo-Atoms, aus denen jede Gruppe mit einem Übergang
 * geformt wird und in die sie zurückkehrt. Zentriert, im 1260er-Kasten, an derselben Kante wie
 * alles andere (marsy-ci). Alles Übrige (Kopf, Knöpfe, Maße, das Feld) kommt aus styles.css.
 */
.seite-vead main .wrap { text-align: center; }
/* Der Einstieg sitzt hoch: näher am Kopf als am Fensterende (Marçal 12.09.: „das muss höher") */
.einstieg { position: relative; min-height: calc(100svh - var(--kopf)); display: grid; align-items: start; padding: 12svh 0 var(--block); }
.einstieg .wrap { display: grid; gap: 22px; justify-items: center; }
.einstieg h1 { font-size: clamp(34px, 4.6vw, 66px); letter-spacing: -0.035em; line-height: 1.02; max-width: 22ch; }
.einstieg .lead { max-width: 60ch; }
.einstieg .hinweis { font-size: 14px; color: var(--paper-mute); max-width: 60ch; }

/* Die Gruppen: oben die Form (das obere Fensterdrittel gehört den Atoms), darunter der Text */
/* Vor jedem Text liegt eine Bühne für die Form: erst wenn der vorige Text oben hinaus ist, formt sich die Gruppe — und sie hat gut ein halbes Fenster Zeit, bevor der eigene Text kommt. */
.gruppe { position: relative; padding: 112svh 0 8svh; }
.gruppe .wrap { display: grid; justify-items: center; }
.gruppe-text { display: grid; justify-items: center; max-width: 62ch; }
.gruppe .eyebrow { color: var(--f, var(--paper-mute)); }
.gruppe h2 { font-size: clamp(32px, 4.2vw, 56px); }
.gruppe .lead { max-width: 60ch; }
.gruppe .mehr { margin-top: 16px; max-width: 62ch; font-size: 16px; line-height: 1.6; color: var(--paper-soft); }
.gruppe .spec { margin-top: calc(var(--luft) * 1.2); width: 100%; text-align: left; }
.gruppe .spec dt { color: var(--paper); }

/* Die Punkte rechts: Navigation zu den Gruppen, mehr nicht */
.leiste-holo { position: fixed; right: 24px; top: 50%; transform: translateY(-50%); z-index: 2; display: grid; gap: 6px; }
.leiste-holo a { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 10px; border-radius: var(--rund-knopf); text-decoration: none; font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--paper-mute); transition: color .3s var(--ease); }
.leiste-holo i { width: 10px; height: 10px; border-radius: 50%; background: var(--f); opacity: .45; transition: opacity .3s var(--ease), box-shadow .3s var(--ease); }
.leiste-holo a.aktiv { color: var(--paper); }
.leiste-holo a.aktiv i { opacity: 1; box-shadow: 0 0 0 5px color-mix(in srgb, var(--f) 25%, transparent), 0 0 18px var(--f); }
@media (hover: hover) and (pointer: fine) { .leiste-holo a:hover { color: var(--paper); } }

/* Ausgang */
.ausgang .wrap { display: grid; justify-items: center; }
.ausgang .lead { max-width: 60ch; }
.ausgang .taten { justify-content: center; }

@media (max-width: 980px) {
  .gruppe { padding-top: 100svh; }
  .gruppe h2 { font-size: clamp(28px, 7vw, 40px); }
  .gruppe .lead { font-size: 16px; }
  .gruppe .spec > div { grid-template-columns: 1fr; gap: 4px; }
  .leiste-holo { right: 6px; gap: 10px; }
  .leiste-holo a { padding: 6px; }
}
@media (max-width: 1400px) {
  /* Die Beschriftung der Punkte braucht Platz, den der 1260er-Kasten nicht hergibt — nur die Punkte */
  .leiste-holo a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
  .leiste-holo a, .leiste-holo i { transition: none; }
}