/* ═════════════════════════════════════════════════════════════════════════
   Startseite — Hero und typografische Hervorhebungen

   Der Hero zeigt Nutzen, Person und Vertrauen. Die Systemgrafik ist bewusst
   nicht mehr hier: im ersten Bildschirm soll man verstehen, was es gibt,
   nicht wie es funktioniert.

   Die Hervorhebungen folgen dem typografischen Prinzip der Referenz, aber
   ausschließlich in acessio-Farben — helles Grün, warmes Creme, ein sehr
   zurückhaltender Terrakotta. Alle drei sind bereits im System vorhanden
   (--ergebnis, --canvas-2, --anfrage); es kommt keine neue Farbe dazu.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Hero ────────────────────────────────────────────────────────────────
   56 zu 44 Prozent, wie vorgegeben. Höhe 88svh statt 100: der Hero soll den
   Bildschirm füllen, aber sichtbar machen, dass darunter etwas weitergeht. */
.hero--start {
  max-width: var(--max);
  margin: 0 auto;
  padding: calc(var(--kopf-hoehe) + clamp(16px, 3vh, 40px)) var(--gutter) clamp(32px, 5vh, 64px);
  display: grid;
  gap: clamp(24px, 3vw, 56px);
  align-items: center;
  min-height: 88svh;
}
@media (min-width: 980px) {
  .hero--start { grid-template-columns: minmax(0, 0.56fr) minmax(0, 0.44fr); }
}

.hero--start .hero__title {
  margin-top: clamp(14px, 1.8vw, 22px);
  font-size: clamp(30px, 3.3vw, 50px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  max-width: 20ch;
  text-wrap: balance;
}
.hero--start .hero__lead {
  margin-top: clamp(16px, 2vw, 24px);
  max-width: 52ch;
  font-size: clamp(15.5px, 1.15vw, 18px);
  line-height: 1.55;
  color: var(--ink-2);
}
.hero--start .hero__actions { margin-top: clamp(20px, 2.6vw, 30px); flex-wrap: wrap; }
.hero--start .hero__trust { margin-top: clamp(16px, 2vw, 22px); }

/* ── Portrait ────────────────────────────────────────────────────────────
   Groß und freigestellt, kein Kartenrahmen. Die Beschriftung steht darunter,
   nicht als Auflage im Bild. */
.hero__portraet { margin: 0; display: grid; justify-items: center; align-content: end; }
.hero__portraet img { width: 100%; max-width: clamp(240px, 32vw, 420px); height: auto; display: block; }
.hero__portraet figcaption { margin-top: 12px; text-align: center; }
.hero__portraet figcaption b {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: clamp(18px, 1.5vw, 22px); letter-spacing: -0.02em; color: var(--ink);
}
.hero__portraet figcaption span {
  display: block; margin-top: 2px; font-size: clamp(13px, 1vw, 14.5px); color: var(--muted);
}

/* Am Phone zuerst der Text, darunter das Porträt — und keine leere Fläche
   dazwischen, weil die Systemgrafik hier nicht mehr steht. */
@media (max-width: 979px) {
  .hero--start { min-height: 0; }
  .hero__portraet img { max-width: 260px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero--start * { animation: none !important; transition: none !important; }
}

/* ── Derselbe Stil in den übrigen Sektionen ──────────────────────────────
   Je Überschrift höchstens eine Markierung, die Farben wechseln über die
   Seite durch. Mehr wäre Ausschlag statt Rhythmus.

   Die vier Vorteilsfelder tragen bisher grüne Schrift. Grün steht nach dem
   Farbwechsel neben Cyan, Lavendel und Lime schief in der Reihe — sie
   bekommen deshalb dieselbe Markierung, rotierend, damit die Kacheln
   untereinander nicht identisch aussehen. */
.bsp__satz em {
  font-style: italic;
  color: var(--ink);
  padding: 0.04em 0.22em;
  margin-inline: -0.04em;
  border-radius: 0.22em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.bsp__szene:nth-child(1) .bsp__satz em { background: #DDF8FA; }
.bsp__szene:nth-child(2) .bsp__satz em { background: #EAE7FF; }
.bsp__szene:nth-child(3) .bsp__satz em { background: #ECF9DB; }
.bsp__szene:nth-child(4) .bsp__satz em { background: #DDF8FA; }

/* Der Schlusssatz der Systemsektion trug ebenfalls Grün. */
.bsp__schluss em { background: #ECF9DB; color: var(--ink); padding: 0.04em 0.22em; border-radius: 0.22em; }

/* ── „acessio?" ──────────────────────────────────────────────────────────
   Der Kapitelauftakt: ein großes Wort, darunter der Satz, der das System
   erklärt. Rechts die Systemgrafik, die vorher im Hero stand. */
.wasist { padding-block: clamp(64px, 9vw, 130px); }
.wasist__raster { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (min-width: 980px) {
  .wasist__raster { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
}
.wasist__marke {
  font-family: var(--serif); font-weight: 400; font-style: normal;
  font-size: clamp(52px, 7.5vw, 108px);
  line-height: 0.95; letter-spacing: -0.04em; color: var(--ink);
}
.wasist__frage { color: #22C7D6; }
.wasist__satz {
  margin-top: clamp(20px, 2.6vw, 32px);
  max-width: 44ch;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(19px, 1.9vw, 27px);
  line-height: 1.42; letter-spacing: -0.015em; color: var(--ink);
}
.wasist__bild .qu__buehne { margin-top: 0; }

/* Am Phone zuerst der ganze Text, dann die Grafik — und keine reservierte
   Leerfläche davor. */
@media (max-width: 979px) {
  .wasist__bild { margin-top: clamp(20px, 5vh, 40px); }
}

/* ── Schluss als Gegenstück zu „acessio?" ───────────────────────────────── */
.final__marke {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(52px, 7.5vw, 108px);
  line-height: 0.95; letter-spacing: -0.04em; max-width: none;
}
.final__ruf { color: #22C7D6; }

/* ── Trust-Band ──────────────────────────────────────────────────────────
   Auf Heroweite begrenzt, nicht randlos: die Schiene gehört optisch zum
   ersten Bildschirm und nicht zur Seite als Ganzes.

   Links die Aussage, rechts die laufende Spur. Die Bewegung ist bewusst
   langsam — 46 Sekunden für einen Durchlauf. Schneller wird sie zum Karussell
   und zieht Aufmerksamkeit vom Hero ab.

   Die Marken sind zweimal gesetzt und der Versatz beträgt -50 %: der Schnitt
   liegt damit auf einer Gruppengrenze und die Schleife ist nahtlos. Die
   zweite Gruppe ist für Screenreader ausgeblendet. */
.band { padding-block: clamp(22px, 3vw, 38px); border-block: 1px solid var(--line); }
.band__raster { display: grid; gap: clamp(16px, 2.4vw, 34px); align-items: center; }
@media (min-width: 760px) {
  .band__raster { grid-template-columns: auto minmax(0, 1fr); }
}
.band__titel {
  margin: 0; font-size: 13px; line-height: 1.35; color: var(--muted);
  font-weight: 500; letter-spacing: 0.01em;
}

.band__schiene {
  overflow: hidden;
  /* Weiche Kanten, damit die Marken nicht abgeschnitten auftauchen. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.band__spur {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center;
  gap: clamp(34px, 5vw, 72px);
  width: max-content;
  animation: bandLauf 46s linear infinite;
}
.band__schiene:hover .band__spur { animation-play-state: paused; }
@keyframes bandLauf { to { transform: translateX(-50%); } }

.band__item { flex: 0 0 auto; }
.band__item img {
  display: block; width: auto;
  height: clamp(20px, 2.2vw, 27px);
  max-width: 132px; object-fit: contain;
  filter: grayscale(1); opacity: 0.5;
  transition: filter var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
@media (hover: hover) { .band__item img:hover { filter: none; opacity: 1; } }
.band__item img[alt="VFEHB"] { height: clamp(28px, 3vw, 38px); }

@media (prefers-reduced-motion: reduce) {
  .band__spur { animation: none; flex-wrap: wrap; width: auto; }
}

/* ── Schluss als großer Textblock ────────────────────────────────────────
   Wie in der Vorlage: ein einziger großer Satz, mittig, mit drei
   Markierungen. Keine Überschrift plus Fließtext — der Satz IST die
   Überschrift. */
.final__gross {
  max-width: 22ch;
  margin: 0 auto;
  font-size: clamp(30px, 4.4vw, 62px);
  line-height: 1.12;
  letter-spacing: -0.035em;
  font-weight: 700;
  color: var(--ink);
  text-wrap: balance;
}
.final .btn--primary { margin-top: clamp(26px, 3.4vw, 42px); }
.final__hinweis { margin-top: 16px; font-size: 13.5px; color: var(--muted); }

/* ── Vom Fragezeichen zum Ausrufezeichen ─────────────────────────────────
   Beide Zeichen liegen übereinander im selben Kasten. Nach einigen Sekunden
   auf der Seite wechselt die Anzeige und bleibt dann auf dem Ausrufezeichen
   stehen — die Sektion beantwortet ihre eigene Frage.

   Kein Dauerwechsel: er würde bei jedem Blick nach oben neu ablenken.
   Für Screenreader steht das Zeichen als eigener Text daneben, die Kachel
   selbst ist aria-hidden. */
.wasist__zeichen {
  display: inline-grid;
  vertical-align: baseline;
}
.wasist__zeichen > i {
  grid-area: 1 / 1;
  font-style: normal;
  color: #22C7D6;
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}
.wasist__ruf { opacity: 0; transform: translateY(0.14em) rotate(-6deg); }
/* Der Wechsel darf man sehen: das Fragezeichen dreht sich weg und schrumpft,
   das Ausrufezeichen fällt von oben herein und federt einmal nach. */
.wasist__zeichen > i { transform-origin: 50% 80%; }
.wasist__ruf { opacity: 0; transform: translateY(-0.42em) scale(0.6); }
.wasist__zeichen.is-ruf .wasist__frage {
  opacity: 0; transform: translateY(0.22em) rotate(18deg) scale(0.7);
  transition: opacity 300ms var(--ease), transform 340ms cubic-bezier(0.55, 0, 0.85, 0.4);
}
.wasist__zeichen.is-ruf .wasist__ruf {
  opacity: 1; transform: none;
  transition: opacity 260ms 200ms var(--ease),
              transform 620ms 200ms cubic-bezier(0.18, 1.5, 0.42, 1);
}

@media (prefers-reduced-motion: reduce) {
  .wasist__zeichen > i { transition: none; }
}

/* ── Systemgrafik neben dem Text ─────────────────────────────────────────
   Die Mitte der Grafik muss auf der Mitte des Textblocks liegen. Das SVG
   bringt oben und unten Leerraum mit, deshalb wird die Fläche selbst
   zentriert und darf nach rechts über die Spalte hinauslaufen. */
.wasist__bild { display: grid; align-items: center; justify-items: center; min-width: 0; }
.wasist__bild .qu__buehne { margin-top: 0; width: 100%; }
@media (min-width: 1200px) {
  .wasist__bild { margin-right: calc(var(--gutter) * -0.6); }
}

/* Die Grafik trägt die neuen Farben: Cyan für Signale, Lavendel für
   Verbindungen, Lime für das Ergebnis. */
.wasist {
  --sicht-fl: #22C7D6;
  --sicht: #0E8A97;
  --anfrage: #8B7CF6;
  --ablauf: #8B7CF6;
  --ergebnis: #6FBF3A;
}

/* ── Ort: Wortmarke groß, Ortsangabe darunter ───────────────────────────── */
.of__titel { display: grid; justify-items: start; gap: 0.06em; }
/* Die Wortmarke trägt die Zeile, nicht die Ortsangabe darunter. Ihr Kasten
   misst 1,45 em; davon sind rund 55 % Versalhöhe, also 0,80 em gegen 0,72 em
   der Textzeile — sichtbar größer, ohne die Zeile zu sprengen.
   `flex-end` plus 15 % der Kastenhöhe hebt den Punkt von der Unterkante des
   Bildes auf die Schriftgrundlinie; im viewBox liegen dazwischen 12 von 80
   Einheiten. Bei `baseline` säße er auf der Bildunterkante und damit zu
   tief. */
.of__marke { display: inline-flex; align-items: flex-end; }
.of__marke .marke-inline { height: var(--marke-h); }
.of__marke .marke__punkt {
  width: calc(var(--marke-h) * 0.205); height: calc(var(--marke-h) * 0.205);
  margin-bottom: calc(var(--marke-h) * 0.15);
}
.of__ort-zeile { font-weight: 700; letter-spacing: -0.035em; }