/* JCself – Startseite oben, Fassung 02.10.2026 (c): Starenschwarm statt Fluss.
   Auf dem Schwarmfilm stehen nur der Name, eine Zeile Erklärung und zwei Knöpfe
   („Anhören“ spielt Fofonie, „Herunterladen“ führt zum Download).
   Der Text sitzt unten links, damit der Schwarm darüber Raum hat.
   Im Hochformat ist der Filmbereich niedriger, damit mehr vom Bild zu sehen ist.
   Die ausführliche Erklärung beginnt unter dem Film bei „Das Prinzip“.
   Wird nach style-fluss-overlay-20261001.css geladen und ergänzt sie nur. */

.hero {
  display: grid;
  align-content: end;
  min-height: clamp(32rem, 78vh, 48rem);
  padding-block: calc(4.5rem + var(--s-5)) var(--s-6);
}
.hero > .hero-inner { width: 100%; gap: var(--s-3); }

/* Abdunklung nur so weit, dass die Schrift lesbar bleibt: links und unten,
   wo der Text steht; oben und rechts bleibt der Fluss hell */
.hero::after {
  background:
    linear-gradient(180deg, rgb(18 14 10 / .55) 0, rgb(18 14 10 / 0) 8rem),
    linear-gradient(90deg, rgb(18 14 10 / .62) 0%, rgb(18 14 10 / .3) 50%, rgb(18 14 10 / .08) 100%),
    linear-gradient(0deg, rgb(18 14 10 / .6) 0, rgb(18 14 10 / 0) 50%);
}

/* der Name */
.hero .statement {
  font-size: clamp(3.4rem, 9vw, 6.75rem);
  line-height: .95;
  max-width: none;
}

/* eine Zeile Erklärung */
.hero .subline {
  font: 500 clamp(1.45rem, 2.6vw, 2.1rem)/1.25 var(--f-display);
  color: var(--on-plate);
  max-width: 30ch;
  text-wrap: balance;
  text-shadow: 0 2px 14px rgb(0 0 0 / .55);
}

/* zwei Knöpfe */
.hero .hero-foot { margin-top: var(--s-3); gap: var(--s-3); }
.btn.line { background: rgb(18 14 10 / .3); color: var(--on-plate); border-color: rgb(226 192 122 / .7); }
.btn.line:hover { background: rgb(246 239 226 / .14); border-color: var(--on-plate); color: var(--on-plate); }
@media (max-width: 30rem) {
  .hero .hero-foot .btn { flex: 1 1 auto; justify-content: center; }
}

/* Abschnitt „Das Prinzip“ unter dem Film */
.split-head { display: grid; gap: var(--s-2); align-content: start; }

/* Schwarmfilm: Bildmitte etwas oberhalb der Mitte, damit der Schwarm nicht
   unter dem Text verschwindet */
.hero .bg { object-position: 50% 40%; }

/* Hochformat (Handy): niedriger, sonst wird aus dem breiten Film nur ein
   schmaler, stark vergrößerter Streifen */
@media (orientation: portrait) {
  .hero { min-height: clamp(26rem, 58vh, 36rem); }
}

/* der Himmel ist hell: Text unten links etwas kräftiger abdunkeln */
.hero::after {
  background:
    linear-gradient(180deg, rgb(18 14 10 / .5) 0, rgb(18 14 10 / 0) 8rem),
    linear-gradient(90deg, rgb(18 14 10 / .66) 0%, rgb(18 14 10 / .34) 50%, rgb(18 14 10 / .1) 100%),
    linear-gradient(0deg, rgb(18 14 10 / .7) 0, rgb(18 14 10 / 0) 55%);
}