/* ══════════════════════════════════════════════════════════════════════════
   Die Startseite: Bausteine und Bewegung
   Einer von vier Teilen neben startseite.css (Aufbau), startseite-gravur.css
   (Kontrast) und startseite-schrift.css (die Schriftgrade). Alle werden von
   onboarding/landing.html geladen, NACH tailwind.css.

   Hier stehen die Gegenstaende, die eine Flaeche haben duerfen, und die
   Bewegung, die ohne JavaScript auskommen muss.

   ── Die eine Frage, die diese Datei jedes Mal stellt ─────────────────────

   **Diese Seite hat keine Flaeche** - kein Schleier, kein Kasten, kein Band
   (startseite-gravur.css). Wer hier trotzdem eine einbaut, braucht denselben
   Satz wie die zwei, die es gibt: **der Gegenstand STELLT etwas DAR, er
   deckt nichts zu.** Die Ticketkarte ist ein Erzeugnis des Produkts, die
   Preistafel ist der Rahmen um ein Angebot. Alles andere bleibt nackt.
   ══════════════════════════════════════════════════════════════════════════ */


/* ── Der eine Gegenstand der Seite ───────────────────────────────────────
   Die Ticketkarte ist das Einzige, was eine Flaeche haben darf, und das ist
   kein Widerspruch zur Gravur: **sie stellt etwas dar, sie deckt nichts zu.**
   Sie ist ein Erzeugnis des Produkts, kein Hilfsmittel gegen den Grund.

   Die Status-Toene sind in tailwind-input.css gegen `bg-card` gemessen - auf
   dem Feld waeren es andere Zahlen. Eine Karte ist hier also genau der Ort,
   an dem die bekannten Werte gelten. */
.c-karte {
  width: 100%;
  max-width: 51.25rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  overflow: hidden;
}

.c-karte-kopf {
  display: flex;
  gap: 0.4375rem;
  padding: 0.9375rem 1.375rem;
  border-bottom: 1px solid var(--color-border);
}

.c-karte-kopf i {
  width: 0.5625rem;
  height: 0.5625rem;
  border-radius: 50%;
  background: var(--color-border-strong);
  display: block;
}

.c-reihe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem;
  padding: clamp(0.875rem, 0.6rem + 0.8vw, 1.3125rem) clamp(1rem, 0.6rem + 1.2vw, 1.625rem);
  border-bottom: 1px solid var(--color-border);
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  line-height: 1.35;
}

.c-reihe:last-child {
  border-bottom: 0;
}

.c-chip {
  flex: 0 0 auto;
  font-size: 0.78125rem;
  font-weight: 600;
  padding: 0.375rem 0.8125rem;
  border-radius: 999px;
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* Der eine Chip, der sich bewegt. Sein Endzustand steht im Markup, nicht im
   Skript - ohne JavaScript liest man "In Arbeit", und das ergibt fuer sich
   Sinn. */
.c-chip-fertig {
  background: color-mix(in srgb, var(--color-success) 17%, transparent);
  color: var(--color-success);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-success) 34%, transparent),
              0 0 30px color-mix(in srgb, var(--color-success) 25%, transparent);
}

/* ── Die zweite Flaeche: die Preistafel ──────────────────────────────────
   **Dieselbe Begruendung wie bei `.c-karte` darueber, und keine neue.** Die
   Ticketkarte darf eine Flaeche haben, weil sie etwas DARSTELLT statt etwas
   zuzudecken. Drei Angebote, die man nebeneinander vergleichen soll, sind
   genau derselbe Fall: die Kante gehoert zum Angebot, sie ist kein Schleier
   gegen den Grund.

   Adrian am 2026-08-23 zur nackten Fassung: *"Die Preise duerfen schon einen
   schoenen Hintergrund bekommen, dass sie besser ins Auge fallen. Heisst ja
   nicht, dass jetzt gar nichts mehr einen Hintergrund bekommen darf."* Vorher
   standen dort drei Textspalten mit einer Welle mittendurch, und man sah
   nicht, dass es drei getrennte Angebote sind.

   **Der Rest der Seite bleibt ohne.** Wer hier eine dritte Flaeche anhaengen
   will, braucht denselben Satz: dieser Gegenstand STELLT etwas DAR.

   ── Deckend, nie durchscheinend ──────────────────────────────────────────

   `--color-bg-card` voll. Eine Flaeche mit Deckkraft 0,9 ueber einem
   bewegten Feld hat in jeder Wellenlage einen anderen Kontrast; genau daran
   ist der alte Schleier gescheitert, und keine Messung dieser Seite waere
   danach mehr wiederholbar.

   ── Die Gravur bleibt im MARKUP und wird auf der Flaeche abgeschaltet ────

   Der Hof ist `--gr-ton` (#050506), die Tafel `--color-bg-card` (#0c0d0f):
   sieben Stufen von 255 Unterschied, also nicht zu sehen. Bis zum 2026-08-23
   stand hier *"er kostet nichts"* - **und das war die eine Zeile in dieser
   Datei, die gemessen falsch ist.** Nicht zu sehen heisst nicht umsonst: 25
   gestapelte Textschatten werden bei jedem Bildlauf mitgemalt, ob man sie
   erkennt oder nicht. Die Zahlen stehen in startseite-gravur.css bei
   `.c-karte .gr`.

   Deshalb bleiben die `gr`-Klassen im Markup - sie sind das Netz fuer den
   Fall, dass jemand die Tafel wieder herausnimmt - und der Hof wird von der
   FLAECHE abgeschaltet. Faellt die Flaeche weg, faellt die Abschaltung mit
   ihr weg, und der Text steht sofort wieder geschuetzt auf dem Feld. */
.c-tafel {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 1.125rem;
  /* Auf 320 px sind das 18 statt 36 Punkte je Seite. Der Preis ist die
     laengste unteilbare Zeile der Tafel ("149 € / Monat"), und jeder Punkt
     Innenabstand geht ihm direkt ab. */
  padding: clamp(1.125rem, 0.7rem + 1.6vw, 2.25rem);
}

/* ── Die dritte Flaeche: die drei Schritte ───────────────────────────────
   **Wieder derselbe Satz und keine neue Begruendung:** 01, 02 und 03 sind
   drei nummerierte Gegenstaende und keine Fliesstext-Passage. Wer sie
   vergleichen soll - und genau darum geht es in "Der Unterschied" -, braucht
   eine Kante, an der eine Spalte aufhoert und die naechste anfaengt.

   Adrian am 2026-08-23: *"hier koennen die 3 Steps auch einen Hintergrund
   bekommen wie die Preise."* Vorher standen sie nackt auf dem Partikelfeld,
   drei Spalten mit einer Welle mittendurch.

   **Damit ist die Liste der Flaechen voll: Ticketkarte, Preistafel, Stufe.**
   Jede stellt etwas dar. Der Rest der Seite bleibt ohne, und wer eine vierte
   will, braucht denselben Satz und nicht denselben Wunsch.

   Die Werte sind die der Tafel - eine zweite Kantenform waere eine zweite
   Sprache auf derselben Seite. Nur der Innenabstand ist etwas kleiner: eine
   Stufe traegt drei kurze Zeilen, keine Preisliste mit fuenf Merkmalen. */
.c-stufe {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 1.125rem;
  padding: clamp(1.125rem, 0.75rem + 1.3vw, 1.875rem);
}

/* ── Die mittlere Tafel ──────────────────────────────────────────────────
   `:nth-child(2):nth-last-child(2)` trifft die Mitte **nur bei genau drei
   Tafeln**. Kommt ein vierter Plan dazu, gibt es keine Mitte mehr, und die
   Hervorhebung faellt von selbst weg, statt willkuerlich auf Platz zwei
   sitzen zu bleiben.

   **Der Ton ist gemischtes Teal und nicht das volle, und dafuer gibt es eine
   Zahl.** test_startseite_kontrast.py baute seine Buchstabenmaske aus einer
   Aufnahme ohne Partikelfeld und las darin **jeden Bildpunkt ueber 170
   Helligkeit als Buchstaben** (die Datei ist am 2026-08-24 entfallen, die
   Zahl bleibt der Grund fuer den gemischten Ton). `--color-aurora-teal` misst 188. Ein Rahmen
   aus dem vollen Ton gaebe sich in der Maske also fuer Schrift aus - und der
   Ring, den die Messung dann um ihn legt, liegt zur Haelfte auf dem
   Partikelfeld neben der Tafel. Der Wert waere schlecht, ohne dass ein
   einziger Buchstabe ein Problem haette.

   Die Mischung bei 60 % misst 125 und ist damit eindeutig Flaeche. Bis 80 %
   (157) bliebe Luft; wer weiter geht, misst nach.

   **Der erste Versuch stand bei 34 % (85) und war auf der Aufnahme nicht zu
   sehen** - eine Hervorhebung, die niemand bemerkt, ist keine.

   Der Schein daneben liegt ausserhalb der Tafel und deckt deshalb nichts zu.
   Er ist der einzige Grund, warum die Mitte auch dann auffaellt, wenn der
   Wellenkamm gerade hinter den drei Tafeln steht. */
.c-preise > [data-lage]:nth-child(2):nth-last-child(2) > .c-tafel {
  border-color: color-mix(in srgb, var(--color-aurora-teal) 60%,
                          var(--color-border));
  background: var(--color-bg-surface);
  box-shadow: 0 0 34px -6px color-mix(in srgb, var(--color-aurora-teal) 26%,
                                      transparent);
}

/* ── Bewegung ─────────────────────────────────────────────────────────────
   **Der Ausgangszustand ist SICHTBAR.** Versteckt wird erst, wenn
   startseite.js die Klasse `st-bewegt` gesetzt vorfindet - und die setzt ein
   winziges Skript im <head> nur, wenn der Besucher keine reduzierte Bewegung
   verlangt hat. Ohne JavaScript, ohne GSAP, mit abgeschaltetem Skript steht
   die Seite vollstaendig da.

   Der umgekehrte Weg (im CSS verstecken, per JS zeigen) ist der bekannteste
   Weg, eine Seite fuer einen Teil der Besucher leer auszuliefern. Er kommt
   hier nicht vor. */
html.st-bewegt [data-auf] {
  opacity: 0;
}

/* ── Der Aufmacher bewegt sich OHNE JavaScript ────────────────────────────
   **Das ist der wichtigste Unterschied auf dieser Seite.** GSAP haengt an
   requestAnimationFrame, und wo der Takt nicht laeuft - gedrosselter Reiter,
   kopfloser Browser, altes Geraet unter Last -, bliebe der erste Bildschirm
   leer.

   **Und die Animation fasst die Deckkraft ueberhaupt nicht an.** Im hellen
   Modus haelt keine Rechenschleife des Partikelfeldes den Zeichentakt am
   Laufen; eine Blende stand dort am 2026-08-22 nach drei Sekunden immer noch
   auf 0. Deshalb bewegt sich hier nur die Lage: der Text steht in JEDEM
   Augenblick auf voller Deckkraft und hoechstens 20 Punkte zu tief. Bleibt
   die Animation stehen, sitzt eine Zeile ein wenig falsch - sie ist nicht
   weg. */
html.st-bewegt [data-sofort] {
  animation: st-herein 0.72s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: var(--st-verzug, 0s);
}

/* **Der Aufmacher kommt seit dem 2026-08-23 nicht mehr nur von unten.**
   Adrian: *"Nicht immer alle Elemente wie immer von unten nach oben."* Der
   Rest der Seite loest das mit dem Ebenen-Aufbau; hier geht das nicht, denn
   der erste Bildschirm darf an keiner Zeile JavaScript haengen. Statt dessen
   nennt jedes Stueck seine eigene Richtung als drei Zahlen, und der
   Aufmacher setzt sich damit genauso aus Richtungen zusammen wie die
   Abschnitte darunter.

   `--st-z` braucht die Perspektive an `.c-aufmacher` (startseite.css). Ohne
   sie ist eine Verschiebung in der Tiefe wirkungslos - nicht falsch, nur
   nicht zu sehen.

   Die Vorgabewerte sind die alte Geste: 20 Punkte von unten. Wer ein
   `data-sofort` ohne Angaben hinschreibt, bekommt also weiterhin genau das,
   was vorher da war. */
@keyframes st-herein {
  from {
    transform: translate3d(var(--st-x, 0), var(--st-y, 1.25rem), var(--st-z, 0))
               rotate(var(--st-dreh, 0deg));
  }
  to { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html.st-bewegt [data-auf],
  html.st-bewegt [data-sofort] {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* Der Pfeil nickt zweimal in der Minute. Bewusst sehr wenig - und
   startseite.js haelt ihn an, sobald jemand gescrollt hat. */
.c-pfeil svg {
  animation: st-nicken 3.2s ease-in-out infinite;
}

@keyframes st-nicken {
  0%, 62%, 100% { transform: translateY(0); }
  76%           { transform: translateY(0.3rem); }
}

@media (prefers-reduced-motion: reduce) {
  .c-pfeil svg { animation: none; }
}

/* Die zweite Zeile von "Bauen kann jeder. / Danach wird es kompliziert."
   rueckt ein: der Satz knickt an derselben Stelle, an der die Aussage knickt.
   Erst ab 1000 px - darunter bricht die Ueberschrift ohnehin um, und eine
   Einrueckung wuerde sie an einer zufaelligen Stelle aufreissen. */
.c-einzug { display: inline-block; }

@media (min-width: 1000px) {
  .c-einzug { margin-left: clamp(3rem, 1rem + 8vw, 11.25rem); }
}

/* Die vier Fragen sind <h3> und keine Absaetze: sie gliedern den Abschnitt,
   und ein Screenreader soll sie in seiner Ueberschriften-Liste finden. Die
   Groesse kommt aus .c-satz - eine Ueberschrift muss nicht groesser aussehen
   als das, was sie ist. */
.c-frage {
  margin: 0;
}