/* =========================================================================
   seite.css — Der gemeinsame Kopf der Unterseiten
   -------------------------------------------------------------------------
   Reys Vorgabe vom 26.08. fuer Kontakt und Nachweise: "den gleichen Kopf wie
   Portfolio, also Gitternetz als Hintergrund, nav, titel, kurzer Text. Nicht
   die Dekorbilder."

   DAS GITTERNETZ STEHT HIER NICHT. Es haengt global an body::after
   (base.css) und gilt damit fuer jede Seite von selbst — es hier zu
   wiederholen waere eine zweite Quelle fuer dieselbe Aussage.

   WARUM EIGENE KLASSEN UND NICHT .portfolio-kopf: Der Portfolio-Kopf traegt
   seine Masze schon, und die Seite ist von Rey abgenommen. Sie umzubenennen
   haette die abgenommene Seite angefasst, um zwei neue zu bauen. Die vier
   Regeln hier sind dieselben Werte; wer sie spaeter zusammenlegt, aendert
   portfolio.html mit und sieht sich das Ergebnis an.
   ========================================================================= */

.seite {
  /* Die Kopfzeile schwebt ueber dem Inhalt — ohne diesen Vorlauf staende
     der Titel darunter. Derselbe Wert wie bei .portfolio. */
  padding-block-start: calc(var(--kopf-hoehe-frei) + var(--raum-7));
  padding-block-end: var(--raum-9);

  /* Bezugspunkt fuer alles, was spaeter absolut daneben liegt (Dekor kommt
     je Seite eigenes, siehe Reys Ansage). */
  position: relative;
  isolation: isolate;
}

.seite-kopf {
  margin-block-end: var(--raum-6);
}

.seite-titel {
  color: var(--hero-titel);
  font-size: var(--schrift-seitentitel);
  font-weight: var(--gewicht-schwer);
  line-height: var(--zeile-eng);
  letter-spacing: var(--sperrung-eng);
}

/* Der Schlusspunkt in Gruen-Tuerkis — dieselbe Klammer wie bei der Hero,
   der Wortmarke und dem Portfolio-Titel. */
.seite-punkt { color: var(--hero-punkt); }

/* Der kurze Text unter dem Titel. Gedeckelt auf Lesbarkeit, nicht auf eine
   runde Zahl — die Regel aus CLAUDE.md: Fliesstext bekommt --breite-text,
   Raster und Formulare darunter nehmen die volle Breite. */
.seite-vorspann {
  margin-block-start: var(--raum-4);
  max-inline-size: var(--breite-text);
  color: var(--text-leise);
  font-size: var(--schrift-l);
  line-height: var(--zeile-fliess);
}