/* ═══════════════════════════════════════════════════════════════════
   Pojana v2 — Startseite
   docs/design-spec.md Abschnitt 8.1: Hero → Band → Register →
   waagerechte Reihe → Anfragesatz + Formular → Fuß

   Setzt css/base.css und css/komponenten.css voraus. Hier steht nur,
   wie die Abschnitte der Startseite zueinander liegen — die Bausteine
   selbst (Kopf, Knopf, Chips, Satz, Register, Tafel, Fuß) stehen in
   komponenten.css und werden auf den Unterseiten wiederverwendet.

   Schritt 2 der Baureihenfolge: KEINE Bewegung. Kein GSAP, kein Lenis,
   kein Shader, kein Pin. Die Seite steht vollständig ohne JavaScript;
   Schritt 3 und 4 hängen sich an dieselben Klassen.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Hero ────────────────────────────────────────────────────────
   Volle Fläche, Bild randlos, Satz unten links darüber. Das Bild ist
   hier die klare Fassung: der Wisch aus Abschnitt 6.2 legt in Schritt 4
   eine stumpfe Ebene darüber, die der Besucher wegwischt. Ohne Skript
   ist das Bild einfach sauber — das ist die ruhige Fassung aus 6.5 und
   kein Notbehelf.                                                     */

.hero {
  position: relative;
  min-height: 100svh;              /* svh, sonst springt es auf iOS */
  display: flex;
  align-items: flex-end;
  padding: 7rem var(--pad) clamp(5rem, 12vh, 8rem);
  overflow: hidden;
}

.hero__bild { position: absolute; inset: 0; }
.hero__bild img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: var(--grade-ruhig);
}

/* Der Schleier macht den Satz lesbar, ohne das Bild abzudunkeln, wo
   nichts steht: aus --ink in Transparenz, nach oben und nach rechts
   auslaufend. Kein Verlauf als Farbträger (Spec 2). */
.hero__schleier {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, var(--ink) 2%, color-mix(in srgb, var(--ink) 75%, transparent) 34%, color-mix(in srgb, var(--ink) 10%, transparent) 72%),
    linear-gradient(to right, color-mix(in srgb, var(--ink) 80%, transparent), color-mix(in srgb, var(--ink) 0%, transparent) 62%);
}

.hero__satz { position: relative; z-index: 10; max-width: 56rem; }
.hero__vor { margin: 0 0 var(--raum-1); }
.hero__h1 { margin: 0 0 var(--raum-2); }
.hero__lead { margin: 0 0 var(--raum-3); max-width: var(--spalte); color: var(--cream); }
.hero__tun { display: flex; flex-wrap: wrap; gap: .7rem; }

/* ── 2. Band ────────────────────────────────────────────────────────
   Steht seit „Über uns" (Spec 8.3) in komponenten.css: die Seite trägt
   dasselbe Band mit derselben Messingkante und demselben wortweisen
   Aufdecken, nur mit anderem Satz. Hier bleibt nichts davon liegen.   */

/* Weiterlink unter der Querreihe. Die Startseite hat bewusst keine
   Navigationsleiste — der Weg auf eine Unterseite steht dort, wo er
   inhaltlich hingehört, und noch einmal im Fuß. Dieselbe Auszeichnung
   wie .band__mehr (komponenten.css). */
.quer__alle {
  margin: var(--raum-2) 0 0;
  padding: 0 var(--pad);
  font-family: var(--disp);
  font-size: .96rem;
  font-weight: 600;
  font-stretch: 104%;
}
.quer__alle a { text-underline-offset: .3em; }
.quer__alle a:hover { color: var(--signal); }

/* ── 3. Register ────────────────────────────────────────────────────
   Fünf Flächen, jede ganzflächig mit eigenem Bild. Eintrag und
   Anordnung stehen vollständig in komponenten.css (5.7) — seit die
   Leistungen dieselbe Folge tragen (Spec 8.2), ist beides Baustein und
   nicht mehr Startseite.

   Was die Startseite allein mitbringt, ist die Kopfzeile: nur ihr
   Register trägt eine Überschrift, das der Leistungen nicht. Dieselben
   Abstände wie .quer__kopf darunter, damit „Fünf Flächen" und „Vier
   Arbeiten" als Paar stehen und nicht als zwei verschiedene Bausteine.
   Sie liegt bewusst außerhalb von .register__buehne — gepinnt wird die
   Bühne, die Überschrift scrollt davor vorbei.                        */
.register__kopf { padding: var(--luft) var(--pad) var(--raum-3); }
.register__h2 { margin: 0; }

/* ── 4. Die waagerechte Reihe ───────────────────────────────────────
   Vier Arbeiten, seitwärts gefahren. Ohne Skript ist die Spur eine
   ganz normale scrollbare Fläche — mit tabindex und aria-label, damit
   sie auch per Tastatur erreichbar ist (Spec 9). Schritt 3 pinnt sie
   und fährt sie am Scroll entlang; die Spur bleibt dieselbe.          */

/* Die Fläche klemmt ihre Spur selbst ab. Gefahren wird die Spur mit
   einem Transform (js/bewegung.js), und ein Transform überläuft den
   Rand, ohne dass irgendwer ihn fragt — die Reihe ist absichtlich
   breiter als der Bildschirm. Das Containment gehört deshalb hierher,
   an die Fläche, und gilt in jedem Fahrzustand: ob die Spur selbst
   scrollt (ohne Skript, unter 62 rem) oder gefahren wird.
   `overflow-x: clip` mit `overflow-y: visible` ist die einzige
   Paarung, die waagerecht abschneidet, ohne senkrecht einen
   Scrollcontainer aufzumachen — `hidden` würde beides tun. */
.quer {
  padding: var(--luft) 0 clamp(3rem, 8vh, 6rem);
  overflow-x: clip;
  overflow-y: visible;
}
.quer__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .6rem var(--raum-2);
  padding: 0 var(--pad) var(--raum-3);
}
.quer__h2 { margin: 0; }
.quer__hin { margin: 0; color: var(--neben); }
.quer__blatt {
  margin: 0;
  font-family: var(--disp);
  font-size: var(--t-etikett);
  font-weight: 700;
  font-stretch: 104%;
  letter-spacing: .06em;
  color: var(--signal);
}

.quer__spur {
  display: flex;
  gap: var(--raum-1);
  padding: 0 var(--pad);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.quer__spur::-webkit-scrollbar { display: none; }
/* Der Ring liegt innen, sonst schneidet ihn die überlaufende Fläche ab. */
.quer__spur:focus-visible { outline-offset: -4px; }

/* ── 5. Anfrage ─────────────────────────────────────────────────────
   Der Satz mit austauschbaren Stellen, darunter das Blatt, das ihn
   füllt — und daneben der Weg für die, die lieber sprechen.

   Der ganze Baustein steht in komponenten.css: seit der Kontaktseite
   (Spec 8.4) tragen ihn zwei Seiten. Die Startseite braucht daran
   nichts zu ändern — hier steht deshalb nichts mehr.                  */

/* ── 6. Fuß ─────────────────────────────────────────────────────────
   Das Raster steht in komponenten.css; die Startseite bringt nur den
   zusätzlichen Block mit den Seitenverweisen mit.                     */

.fuss__block nav { display: contents; }

/* ═══ Breite Bildschirme ═══════════════════════════════════════════ */

@media (min-width: 62rem) {
  .hero { align-items: center; padding-top: 8rem; }
  .hero__satz { max-width: 62rem; }
}

/* ═══ Die ruhige Fassung ═══════════════════════════════════════════
   Diese Datei bewegt von sich aus nichts. Was die Startseite bewegt,
   steht in css/bewegung.css und wird dort für
   prefers-reduced-motion zurückgenommen; die Übergänge der Bausteine
   nimmt komponenten.css zurück. Hier bleibt deshalb nichts.          */