/* pages/home.css
   Startseite (body.is-home). Karte 20: mehr Abwechslung im Layout, Radien und Glows vereinheitlicht.
   Nur Tokens, keine neuen Farben, keine neuen Partials. Alles hier ist auf body.is-home begrenzt.

   ACHTUNG, EINBINDUNG: Im Prototyp wurde css/pages/<bereich>.css von build.mjs bzw.
   grav/tools/proto_to_twig.py (css_bundle) in main.css gebuendelt. Im Grav-Theme gibt es diese
   Buendelung zur Laufzeit NICHT: templates/partials/layout.html.twig laedt nur css/main.css und
   css/motion.css. Diese Datei wirkt also erst, wenn genau eine der beiden Zeilen ergaenzt wird
   (beides sind geteilte Dateien, deshalb hier bewusst nicht angefasst):
     a) layout.html.twig, nach der main.css-Zeile:
        <link rel="stylesheet" href="{{ theme_url }}/css/pages/home.css?v={{ fv_v|e }}">
     b) oder am Ende von css/main.css:  @import url("pages/home.css");
   Danach assets_version in fvfhe.yaml erhoehen.

   RADIEN-SYSTEM DER STARTSEITE
   Vorgefunden: 3 / 8 / 12 / 16 / 18 / 24 / 28 / 40 / 64 px nebeneinander. Weil .fv-glow::before und
   .fv-glow-Flaechen ihren Radius erben (border-radius: inherit), zieht jeder Sonderradius auch einen
   anders geformten Glow nach sich. Darum gilt auf der Startseite eine Leiter aus vier Stufen:
     Kachel   8 px  (Pfeil-, Check-, Mikrokacheln bis ca. 32 px Kantenlaenge)
     Element 12 px  (Buttons, Tags, Linkkacheln, alles Anfassbare)
     Karte   24 px  (Karten, Panels, Medien innerhalb von Karten)
     Flaeche 40 px  (grosse Bildflaechen)
   Ausgenommen bleiben bewusst die Hero-Bausteine (64 px bzw. 28/16 px in .c-hero__brick--*): das ist
   die Logo-DNA, keine Unachtsamkeit. Ebenso die Mikro-Radien 2 und 3 px an Balken und Verb-Kacheln,
   die bei 12 px zu Kreisen wuerden. */

body.is-home {
  --fvh-r-kachel:  var(--fv-radius-8);
  --fvh-r-element: var(--fv-radius-12);
  --fvh-r-karte:   var(--fv-radius-24);
  --fvh-r-flaeche: var(--fv-radius-40);
}

/* Im Bestand wichen nach der Kaskade genau drei Flaechen von der Leiter ab. Mehr ist nicht noetig:
   Karten (.fv-card 24), Buttons (12), Pfeilkacheln (8) und Bildflaechen (.c-verb__media 40) liegen
   schon richtig, und in der Variante .c-verbs--saeulen setzt main.css die Linkkacheln bewusst auf 0,
   weil die Links dort unterstrichener Text ohne Kachel sind. */

/* Terminzeilen: das Bild war mit 18 px der einzige krumme Wert der Seite */
body.is-home .c-feed .c-event__media { border-radius: var(--fvh-r-karte); }

/* Logokacheln: 16 -> Karte, damit Kachel und Kartenschatten dieselbe Form haben */
body.is-home .c-logos__item { border-radius: var(--fvh-r-karte); }

/* Personenbild in der kompakten Variante: 16 -> Karte */
body.is-home .c-people--kompakt .c-person__mask { border-radius: var(--fvh-r-karte); }
body.is-home .c-people--kompakt .c-person__body-shape { border-radius: var(--fvh-r-karte) var(--fvh-r-karte) 0 0; }

/* ---------------------------------------------------------------------------
   RHYTHMUS
   Die Reihenfolge und die Gruende der Sektionen stehen in user/pages/01.home/default.md.
   Hier nur, was sich ueber Felder nicht sagen laesst. */

/* Zweispaltiger Einstieg: die Ueberschrift bleibt stehen, waehrend der Fliesstext laeuft.
   Dadurch liest sich der Block wie eine Doppelseite und nicht wie zwei gestapelte Spalten. */
@media (min-width: 900px) {
  body.is-home #was-wir-tun .c-text-block__headline {
    position: sticky;
    top: calc(var(--header-h) + var(--fv-space-24));
  }
}

/* Die Zahlenleiste steht bewusst auf derselben Papierflaeche wie der Einstiegstext: beide tragen
   ground: papier, die Abstandsregel in main.css legt sie damit zu einem Block zusammen. Dafuer
   braucht es hier nichts. */

/* Der Zwischenruf auf Nachtblau ist die einzige vollflaechig farbige Sektion der Seite. Er braucht
   ebenfalls keine Zeile hier: .fv-muster und .fv-zwischenruf-sec bringen Flaeche, Abstand, Rosa und
   die Satzbreite von 22 Zeichen schon mit. */