/* Dominic Euringer – Medienproduktion
   Referenz-Unterseiten: Kopfbalken, Fußzeile, Seitenkopf.
   Die Video-Kacheln und das Modal stehen in style.css – sie werden auch auf
   der Startseite gebraucht und gehören deshalb nicht hierher. */

/* ---- Kopfbalken dunkel ----
   Nur auf den Referenzseiten; Startseite und Rechtsseiten behalten den hellen
   Balken. Deckend im selben Ton wie der Footer, damit Kopf und Fuß die Seite
   gleich einrahmen – mit Transparenz wirkte der Kopf heller als der Fuß.
   Der Blur des hellen Balkens entfällt hier, er hätte auf deckendem Grund
   keine Wirkung und kostet nur Rendering. */
.site-header--dunkel {
  background: var(--ink);
  backdrop-filter: none;
  border-bottom-color: var(--line-2);
}
.site-header--dunkel .brand__name { color: var(--paper); }
.site-header--dunkel .brand__desc { color: #A9A9AE; }

/* ---- Fußzeile hell ----
   Ebenfalls nur auf den Referenzseiten. Die Hairline oben ist tragend: der
   Seitenhintergrund ist derselbe Ton, ohne sie würde die Fußzeile im Inhalt
   verschwinden. Die Schriftfarben (graphite, Akzent im Hover) stimmen auf
   hellem Grund bereits und werden nicht überschrieben. */
.site-footer--hell {
  background: var(--paper);
  color: var(--ink);
  border-top: 1px solid var(--line);
}

/* ---- Seitenkopf ---- */
.ref { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.ref__head { margin-top: 1.5rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.ref__head h1 {
  margin-top: 0.7rem;
  font-size: clamp(2.1rem, 6vw, 3.6rem);
}
/* Unter dem Titel steht nur die Tätigkeit – die Projektbeschreibung steht
   bereits auf der Startseite und wird hier nicht wiederholt. */
.ref__role {
  margin-top: 1.1rem;
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite);
}