/* ══════════════════════════════════════════════════════════════════════════
   Die Startseite: die Gegenstaende
   Einer von fuenf Teilen neben startseite.css (Aufbau),
   startseite-schrift.css (die Schriftgrade), startseite-inhalt.css
   (Bausteine und Bewegung) und startseite-gravur.css (Kontrast). Geladen von
   onboarding/landing.html.
   ══════════════════════════════════════════════════════════════════════════

   ── Warum es diese Datei gibt ────────────────────────────────────────────

   Adrian am 2026-08-23 ueber die Fassung ohne sie: *"Das was wir jetzt haben
   erzaehlt keine Geschichte mit Elementen, Grafiken, irgendwas. Es sind
   einfach nur langweilige Textpassagen."* Die Seite trug einen einzigen
   sichtbaren Gegenstand, die Ticketkarte.

   ── Die drei Regeln, an denen hier alles haengt ──────────────────────────

   **1. Nur Striche, keine Flaechen.** Eine gefuellte Karte waere genau das,
   was am 2026-08-23 abgelehnt wurde: *"Das Dunkle hinter allen Layern wie im
   Hero gefaellt mir eh nicht."* Jeder Gegenstand steht als Umriss auf dem
   Partikelfeld.

   **2. Kein Gegenstand traegt Text, und keiner liegt unter welchem.** Sie
   stehen in der freien Haelfte des Abschnitts. Das ist nicht Geschmack: der
   Kontrastnachweis mass Schrift gegen ihren Grund, und ein heller Strich
   unter einem Buchstaben waere ein Grund, den niemand eingeplant hat. Die
   Messung blendete `.c-obj` deshalb aus - und was sie ausblendet, darf
   keinen Buchstaben verdecken. **Der Nachweis dazu
   (tests/test_startseite_kontrast.py) ist am 2026-08-24 entfallen; die Regel
   gilt weiter und wird zurzeit von nichts gemessen.**

   **3. Keine eigene CSS-Bewegung.** Was sich bewegt, bewegt der Ebenen-Aufbau
   am Bildlauf entlang (static/js/startseite-film.js). Eine dauerhaft
   laufende Animation waere in jeder Standbildmessung eine Fehlerquelle - die
   Startseite lieferte an derselben Textstelle einmal 4,90 und einmal 3,67,
   weil zwei Ebenen im Leerlauf weiterliefen.

   ── Und die vierte, die keine Regel ist, sondern eine Zusage ─────────────

   Ohne JavaScript steht jeder Gegenstand fertig da. Er wird nie versteckt,
   nur verschoben.

   ── Kein `transform` in dieser Datei ─────────────────────────────────────

   Nirgends, auch nicht zum Ausrichten. Der Ebenen-Aufbau schreibt `transform`
   als style-Attribut, und die zweite Angabe gewinnt: ein `translateY(-50%)`
   zum Zentrieren waere nach dem ersten Bild weg und der Gegenstand saesse um
   seine halbe Hoehe zu tief. Ausgerichtet wird mit `inset`, Flexbox und
   `aspect-ratio`. Die Neigungen der Blaetter stehen im SVG.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Der Platz eines Gegenstands ─────────────────────────────────────────
   **Zwei Fassungen, und die schmale ist nicht der Rest.** Auf breiten
   Schirmen steht der Gegenstand in der freien Haelfte, die der Satzspiegel
   uebrig laesst - dort ist er das, wofuer er gebaut ist. Unter 900 px gibt es
   diese Haelfte nicht: der Text ist so breit wie der Schirm. Dann steht er
   ueber der Ueberschrift, kleiner, im Fluss - eine Vignette statt einer
   Bildhaelfte. Weggeschaltet wird er nirgends. */
.c-obj {
  position: relative;
  width: 100%;
  max-width: 12rem;
  margin-bottom: clamp(1.75rem, 1rem + 2.4vw, 2.75rem);
}

/* Rechtsbuendige Abschnitte richten alles nach rechts aus. Der Gegenstand
   nicht: er ist ein Bild und kein Satz. */
.c-rechts .c-obj {
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

/* Das Feld ist der Kasten, in dem die Ebenen eines Gegenstands liegen. Es
   traegt das Seitenverhaeltnis, damit die absolut gesetzten Ebenen darin
   ueberhaupt eine Hoehe haben. */
.c-obj-feld {
  position: relative;
  width: 100%;
}

/* **`> *` und nicht `> div`.** Die Versaetze der einzelnen Ebenen stehen
   weiter unten als einfache Klassen (`.c-blatt-1`, `.c-netz-a`). Mit
   `.c-obj-feld > div` waere diese Regel spezifischer als sie und
   ueberschriebe jeden Versatz mit `inset: 0` - gemessen am 2026-08-23: alle
   drei Blaetter lagen exakt uebereinander und die zwei Haelften des Netzes
   auch. Der Universalselektor hat die Spezifitaet 0 und laesst jede Klasse
   gewinnen. */
.c-obj-feld > * {
  position: absolute;
  inset: 0;
}

.c-obj svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

@media (min-width: 900px) {
  .c-obj {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: 0;
    max-width: none;
    /* **Spalte und nicht Zeile.** In einer Zeile ist `.c-obj-feld` ein
       Flex-Element quer zur Hauptachse: seine Breite wird aus dem Inhalt
       gerechnet und `aspect-ratio` bekommt nie eine Breite, aus der es eine
       Hoehe machen koennte. Gemessen am 2026-08-23: der Papierstapel stand
       270 breit und 200 hoch statt 3:4, und die drei Blaetter lagen
       uebereinander statt hintereinander. In einer Spalte streckt sich das
       Feld quer auf die volle Breite, und das Verhaeltnis greift. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Ein Bild, kein Bedienelement. */
    pointer-events: none;
  }
}

/* ── Die Striche ─────────────────────────────────────────────────────────
   Drei Staerken, und jede hat ihren Grund. Der Umriss traegt die Form, die
   Zeilen sind Andeutung und duerfen nicht mitlesen wollen, der eine farbige
   Strich ist die Aussage. `--color-aurora-teal` ist derselbe Ton wie die
   Augenbraue - der Gegenstand gehoert zur Seite und nicht zu sich selbst.

   ── `color-mix` und kein `rgba(255,255,255,...)` ─────────────────────────

   Der erste Entwurf schrieb die Striche als weisse rgba-Werte hin und
   darunter einen zweiten Block mit dunklen fuer den hellen Modus.
   `test_farben_ausserhalb.py` hat die zehn Farben gefunden, und der Test hat
   recht: das waren zehn Werte, die beim naechsten Palettenwechsel still
   falsch geworden waeren, plus eine zweite Liste daneben, die genauso still
   auseinanderlaeuft.

   `color-mix` auf `--color-text-primary` loest beides auf einmal. Die
   Striche sind damit die Schriftfarbe in verduennter Form - im Dunkeln hell,
   im Hellen dunkel -, und der zweite Block ist ersatzlos weg. Dasselbe
   Muster wie bei `.c-chip-fertig` in startseite-inhalt.css. */
.s-kante,
.s-kasten {
  stroke: color-mix(in srgb, var(--color-text-primary) 60%, transparent);
  stroke-width: 1.6;
}

.s-zeile {
  stroke: color-mix(in srgb, var(--color-text-primary) 34%, transparent);
  stroke-width: 2.6;
  stroke-linecap: round;
}

.s-kaestchen {
  stroke: color-mix(in srgb, var(--color-text-primary) 52%, transparent);
  stroke-width: 1.5;
}

.s-haken,
.s-faden,
.s-bogen {
  stroke: var(--color-aurora-teal);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.s-haken { stroke-width: 2.6; }
.s-faden { stroke-width: 1.8; }
.s-bogen { stroke-width: 4; }

.s-knoten { fill: var(--color-aurora-teal); }

.s-ring {
  stroke: color-mix(in srgb, var(--color-text-primary) 28%, transparent);
  stroke-width: 4;
}

.s-skala {
  stroke: color-mix(in srgb, var(--color-text-primary) 40%, transparent);
  stroke-width: 2;
  stroke-linecap: round;
}

/* ── Der Papierstapel (_freiheit) ────────────────────────────────────────
   Drei Blaetter uebereinander, jedes eine eigene Ebene. Die Versaetze sind
   klein: ein Stapel, der weit auseinanderfaellt, ist kein Stapel mehr. */
.c-obj-blaetter .c-obj-feld { aspect-ratio: 3 / 4; }

/* Beide Seiten werden verschoben, nicht nur eine: sonst waechst der Kasten
   mit dem Versatz, und das hinterste Blatt waere zugleich das groesste. */
.c-blatt-3 { left: -13%; right: 13%; top: -7%; bottom: 7%; }
.c-blatt-2 { left: -5%; right: 5%; top: -1%; bottom: 1%; }
.c-blatt-1 { left: 9%; right: -9%; top: 8%; bottom: -8%; }

/* Die zwei hinteren Blaetter sind schwaecher gezeichnet. Ein Stapel, in dem
   alle drei gleich stark stehen, ist kein Stapel, sondern ein Gitter -
   Tiefe entsteht hier durch den Strich und nicht nur durch die Lage. */
.s-fern { opacity: 0.5; }

@media (min-width: 900px) {
  .c-obj-blaetter {
    left: clamp(1.25rem, 0.4rem + 4vw, 7.25rem);
    width: 24%;
    max-width: 17rem;
  }
}

/* ── Website gegen Ablauf (_merksatz) ────────────────────────────────────
   Der Satz lautet: "Das ist der Unterschied zwischen einer Website und einem
   Ablauf, den es vorher nicht gab." Links ein einzelnes Rechteck, rechts
   sechs Knoten, die sich verbinden - der Unterschied als Bild, und zwar
   genau der, den der Satz behauptet.

   Er steht **rechts** und nicht links: dieser Abschnitt ist linksbuendig, die
   freie Haelfte ist also die andere. */
.c-obj-netz .c-obj-feld { aspect-ratio: 218 / 150; }

.c-netz-a { right: 63%; }
.c-netz-b { left: 45%; }

@media (min-width: 900px) {
  .c-obj-netz {
    right: clamp(1.25rem, 0.4rem + 4vw, 7.25rem);
    width: 30%;
    max-width: 24rem;
  }
}

/* ── Der Bogen, der nie zumacht (_ehrlich) ───────────────────────────────
   "Keine Website in 60 Sekunden." Der Bogen zeichnet sich am Bildlauf entlang
   und bleibt bei einem guten Drittel stehen - **er kommt mit Absicht nie an**.
   Das ist die Aussage des Abschnitts als Bild, und es ist der einzige
   Gegenstand der Seite, dessen Unfertigkeit gewollt ist.

   Die Skala dahinter ist voll und ruhig: sie zeigt, wie weit es waere. */
.c-obj-bogen .c-obj-feld { aspect-ratio: 1 / 1; }

@media (min-width: 900px) {
  .c-obj-bogen {
    left: clamp(1.25rem, 0.4rem + 4vw, 7.25rem);
    width: 20%;
    max-width: 15rem;
  }
}