/* ==========================================================================
   HOF BERGMANN - Header / Hero
   ==========================================================================
   Ziel:
   - Das Hero-Bild ist die HINTERGRUNDEBENE des oberen Seitenbereichs
   - Logo, Navigation und Seitentitel liegen als Ebene DARAUF
   - Beim Scrollen schrumpft der Bereich

   Warum das CSS so aussieht:
   Simple gibt im Template erst den Textblock (.hero__content mit dem
   Seitentitel) und danach das Bild (.hero__image) aus - also
   untereinander im normalen Textfluss. Damit das Bild zur Hintergrund-
   ebene wird, wird .hero__image absolut positioniert und fuellt den
   gesamten .hero-Bereich. Der Textblock bekommt eine hoehere Ebene
   (z-index) und liegt damit darueber.

   Hoehen anpassen: die beiden Werte unter --hb-hero-height weiter unten.
   ========================================================================== */

:root {
  --hb-hero-height: 20vh;
  --hb-hero-height-scrolled: 8vh;

  /* Abdunkelung des Bildes, damit heller Text darauf lesbar bleibt.
     Flaeche, kein Verlauf. Auf 0 setzen, um sie ganz abzuschalten. */
  --hb-hero-scrim: rgba(46, 42, 34, 0.38);
}

/* --------------------------------------------------------------------------
   1. Der Hero-Bereich als Buehne
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Titel sitzt unten im Bild */
  overflow: hidden;
}

/* Hoehe ueber min-height: Der Bereich ist so hoch wie gewuenscht,
   waechst aber mit, wenn ein langer Titel zwei Zeilen braucht -
   abgeschnitten wird also nie etwas.

   Das Schrumpfen funktioniert, weil beim Scrollen auch der
   Innenabstand des Titelblocks kleiner wird (siehe Abschnitt 3).
   Ohne das wuerde der Titel die Mindesthoehe blockieren. */
.hero:not(.hero--noimage) {
  min-height: var(--hb-hero-height);
  transition: min-height 0.35s ease;
}

/* Beim Scrollen (Klasse kommt von hb-header.js) */
.hero:not(.hero--noimage).hb-hero-scrolled {
  min-height: var(--hb-hero-height-scrolled);
}

/* --------------------------------------------------------------------------
   2. Das Bild als Hintergrundebene
   -------------------------------------------------------------------------- */

.hero__image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  z-index: 0;
}

.hero__image-wrapper {
  height: 100%;
  width: 100%;
  border-radius: 0;
  background: var(--lighter);
}

.hero__image-wrapper img {
  height: 100%;
  width: 100%;
  border-radius: 0;
  object-fit: cover;
  display: block;
}

/* Abdunkelung als eigene Ebene zwischen Bild und Text */
.hero:not(.hero--noimage) .hero__image::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--hb-hero-scrim);
  z-index: 1;
}

/* Bildunterschrift aus dem Weg raeumen - sie wuerde sonst
   mitten im Bild stehen */
.hero:not(.hero--noimage) .hero__image > figcaption {
  position: absolute;
  right: var(--page-margin);
  bottom: 0.4rem;
  z-index: 2;
  margin: 0;
  padding: 0;
  background: none;
  color: var(--white);
  opacity: 0.75;
  text-align: right;
}

/* --------------------------------------------------------------------------
   3. Seitentitel liegt auf dem Bild
   -------------------------------------------------------------------------- */

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Nur wenn ein Bild da ist: Platz fuer die Navigation freihalten,
   damit Logo und Titel sich nicht ueberlagern, und heller Text */
.hero:not(.hero--noimage) .hero__content {
  padding-top: calc(var(--navbar-height) + var(--baseline) * 4);
  padding-bottom: calc(var(--baseline) * 6);
  transition: padding 0.35s ease;
}

/* Beim Schrumpfen rueckt der Titel nach oben, indem der reservierte
   Raum ueber ihm kleiner wird. Er bleibt dabei sichtbar. */
.hero:not(.hero--noimage).hb-hero-scrolled .hero__content {
  padding-top: calc(var(--navbar-height) * 0.6);
  padding-bottom: calc(var(--baseline) * 3);
}

.hero:not(.hero--noimage) .hero__content,
.hero:not(.hero--noimage) .hero__content h1,
.hero:not(.hero--noimage) .hero__content h1 > sup,
.hero:not(.hero--noimage) .hero__content p,
.hero:not(.hero--noimage) .hero__content a,
.hero:not(.hero--noimage) .hero__content .content__meta,
.hero:not(.hero--noimage) .hero__content .feed__meta {
  color: var(--white);
}

.hero:not(.hero--noimage) .hero__content h1 {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   4. Navigation liegt auf dem Bild
   -------------------------------------------------------------------------- */

.top.js-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: transparent;
  z-index: 10;
}

/* Sobald gescrollt wird, setzt scripts.js die Klasse .sticky.
   Dann klebt die Leiste oben und braucht einen Hintergrund,
   weil sie ab da ueber normalem Seiteninhalt liegt. */
.top.js-header.sticky {
  position: fixed;
  background: var(--page-bg);
  box-shadow: 0 1px 0 var(--light);
}

/* Transparent ueber dem Bild: heller Text.
   Wichtig: nur die OBERSTE Menueebene (> li >), denn die Klappmenues
   sind im HTML in diesen Listen verschachtelt und haben einen hellen
   Hintergrund - weisser Text waere dort unlesbar. */
.top.js-header:not(.sticky) .logo,
.top.js-header:not(.sticky) .navbar .navbar__menu > li > a,
.top.js-header:not(.sticky) .navbar .navbar__menu > li > span[role=button],
.top.js-header:not(.sticky) .navbar .navbar__menu > li > span:not([role=button]) {
  color: var(--white);
}

.top.js-header:not(.sticky) .navbar .navbar__menu > li > a:hover,
.top.js-header:not(.sticky) .navbar .navbar__menu > li > a:focus,
.top.js-header:not(.sticky) .navbar .navbar__menu > li > span[role=button]:hover {
  color: var(--hb-terrakotta-hell);
}

/* Suchen-Knopf, falls aktiviert */
.top.js-header:not(.sticky) .search__btn {
  border-color: rgba(255, 255, 255, 0.6);
}
.top.js-header:not(.sticky) .search__btn svg {
  fill: var(--white);
}

/* --------------------------------------------------------------------------
   4b. Klappmenues (Untermenues)
   --------------------------------------------------------------------------
   Eigene Ebene mit hellem Hintergrund (--lighter, Papier gedaempft).
   Die Farbe wird hier bewusst unabhaengig vom Zustand der Leiste gesetzt -
   ob gescrollt oder nicht, ob mit Bild oder ohne: das Klappmenue hat
   immer denselben hellen Hintergrund und braucht darum dunklen Text.

   #453F35 ist ein dunkles Warmgrau (Kontrast 8,6:1 auf dem Hintergrund).
   Bewusst kein Schwarz - das waere zu hart fuer die warme Palette.
   Aendern: --hb-submenu-text unten anpassen. */

:root {
  --hb-submenu-text: #453F35;
  --hb-submenu-text-hover: var(--hb-tinte);
}

.top.js-header .navbar .navbar__submenu li a,
.top.js-header .navbar .navbar__submenu li span[role=button] {
  color: var(--hb-submenu-text);
}

/* Diese eine Regel braucht !important, weil das Theme sie selbst
   mit !important setzt (main.css, .navbar__submenu li span). */
.top.js-header .navbar .navbar__submenu li span:not([role=button]) {
  color: var(--hb-submenu-text) !important;
}

.top.js-header .navbar .navbar__submenu li a:hover,
.top.js-header .navbar .navbar__submenu li a:focus,
.top.js-header .navbar .navbar__submenu li a:active,
.top.js-header .navbar .navbar__submenu li span[role=button]:hover,
.top.js-header .navbar .navbar__submenu li:hover > a,
.top.js-header .navbar .navbar__submenu li:focus-within > a {
  color: var(--hb-submenu-text-hover);
  background: var(--page-bg);
}

/* --------------------------------------------------------------------------
   5. Seiten OHNE Bild
   --------------------------------------------------------------------------
   Ohne Bild gibt es keine Buehne, auf der die Navigation liegen koennte.
   Dann verhaelt sich alles wie gewohnt: Leiste im Fluss, dunkler Text. */

.hero--noimage {
  display: block;
  min-height: 0;
  overflow: visible;
}

body:has(.hero--noimage) .top.js-header:not(.sticky) {
  position: relative;
  background: var(--page-bg);
}

body:has(.hero--noimage) .top.js-header:not(.sticky) .logo,
body:has(.hero--noimage) .top.js-header:not(.sticky) .navbar .navbar__menu > li > a,
body:has(.hero--noimage) .top.js-header:not(.sticky) .navbar .navbar__menu > li > span[role=button] {
  color: var(--nav-link-color);
}

body:has(.hero--noimage) .top.js-header:not(.sticky) .search__btn {
  border-color: var(--light);
}
body:has(.hero--noimage) .top.js-header:not(.sticky) .search__btn svg {
  fill: var(--dark);
}