/* ===========================================================================
   KOPF UND MENUE, PORTIERT AUS DEM WIREFRAME V3 am 17.09.2026
   Quelle: .../hh-wireframe_V3/shared/css/05-header.css

   NACHGEZOGEN, nachdem der Auftraggeber bemerkt hat, dass «das Menue voellig
   ein anderes» ist. Er hatte recht, und die Erhebung bestaetigte es:

     Wireframe   Kopf 81 px, im Kopf nur der Spendenknopf sichtbar, Menue
                 hinter dem Burger als Overlay in drei Spalten mit Icon und
                 Beschreibung je Punkt.
     Theme bis   Kopf 101 px, sechs Punkte waagrecht, Overlay ohne Spalten.
     dahin

   Das eigene .hh-header-CSS in custom.css bleibt vorerst liegen: Es gehoert
   zur alten Kopfzeile und wird entfernt, sobald sicher ist, dass es niemand
   mehr braucht. Solange beide Bausteine nebeneinander stehen, gewinnt dieser
   hier — er laedt spaeter.
   =========================================================================== */

/* ==========================================================================
   HEADER & NAVIGATION
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--hh-white);
  transition: all 0.3s ease;
  border-bottom: 1px solid transparent;
}

.site-header.header--scrolled {
  box-shadow: var(--hh-shadow-md);
  border-bottom-color: var(--hh-blue-10);
}

.site-header.header--scrolled 

/* ── Logo ── */
.header-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.header-logo img,
.header-logo svg {
  height: 48px;
  width: auto;
  transition: height 0.3s ease;
}

.site-header.header--scrolled .header-logo img,
.site-header.header--scrolled .header-logo svg {
  height: 36px;
}

/* Text-basiertes Logo (SVG Fallback) */
.logo-text {
  font-weight: 700;
  font-size: var(--hh-text-xl);
  color: var(--hh-blue);
  text-decoration: none;
  line-height: 1.1;
}

.logo-text span {
  display: block;
}

.logo-claim {
  font-size: var(--hh-text-xs);
  color: var(--hh-blue-70);
  font-weight: 400;
  margin-top: 2px;
}

/* ── Navigation ── */
.main-nav {
  display: flex;
  align-items: center;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--hh-space-lg);
}

.nav-list a {
  font-size: var(--hh-text-sm);
  font-weight: 600;
  color: var(--hh-text);
  text-decoration: none;
  padding: var(--hh-space-sm) 0;
  position: relative;
  transition: color var(--hh-transition);
}

.nav-list a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--hh-blue);
  transition: width var(--hh-transition);
}

.nav-list a:hover,
.nav-list a.active {
  color: var(--hh-blue);
}

.nav-list a:hover::after,
.nav-list a.active::after {
  width: 100%;
}

/* ── Spenden-Button im Header ── */
.header-donate {
  margin-left: var(--hh-space-lg);
  flex-shrink: 0;
}

/* ── Hamburger Menu Toggle ── */

/* Hamburger → X Animation */

/* ── Hero (Startseite) ── */
.section-hero {
  position: relative;
  /* 2026-09-06: von 80vh auf 65vh, angeglichen an main.css. Der Inhalt ist
     mittig zentriert, darunter blieb ein leerer Streifen unter den Knoepfen. */
  min-height: 65vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hh-blue);
  overflow: hidden;
}

.section-hero .hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--hh-blue) 0%, var(--hh-blue-90) 50%, var(--hh-blue-70) 100%);
  opacity: 0.9;
}

.section-hero .hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: var(--hh-container-narrow);
  padding: var(--hh-space-5xl) var(--hh-space-xl);
}

.section-hero h1 {
  font-size: var(--hh-text-hero);
  color: var(--hh-white);
  margin-bottom: var(--hh-space-lg);
  text-shadow: 0 2px 20px rgba(42, 50, 135, 0.3);
}

.section-hero p {
  font-size: var(--hh-text-xl);
  color: var(--hh-white);
  font-weight: 300;
  margin-bottom: var(--hh-space-xl);
  opacity: 0.9;
}

.hero-breadcrumb {
  font-size: var(--hh-text-sm);
  color: var(--hh-blue-50);
}

.hero-breadcrumb a {
  color: var(--hh-blue-30);
}

.hero-breadcrumb a:hover {
  color: var(--hh-white);
}



/* ══════════════════════════════════════════════════════════════════════
   MENUE: GLEICHE SPALTEN, ZAEHLERSCHILD IN DER TITELZEILE
   Gemessen am 2026-09-13, vor dieser Regel:
     Entdecken 235px, Bewirken 299px, Verbinden 235px
   Die Spalten sind Flex-Kinder ohne Breitenvorgabe, also bestimmte der
   laengste Eintrag die Spalte. "Wirkung schenken, direkt und unkompliziert"
   machte Bewirken um 64 Pixel breiter als die Nachbarn.

   `flex: 1 1 0` gibt allen dieselbe Grundbreite, unabhaengig vom Inhalt.
   Die Null am Ende ist der Punkt: Mit `flex-basis: auto` fliesst die
   Inhaltsbreite wieder ein und die Spalten laufen erneut auseinander.
   ══════════════════════════════════════════════════════════════════════ */
#hh-nav-overlay .nav-col {
  flex: 1 1 0;
  min-width: 0;
}

/* Das Zaehlerschild stand neben dem Textblock und nahm ihm mit
   `margin-left: auto` die Breite: 102 statt 199 Pixel. Die Beschreibung
   brach dadurch auf zwei Zeilen, waehrend alle anderen einzeilig blieben,
   und der Eintrag stand schief in der Reihe.

   Es steht jetzt neben dem Titel. Der Titel braucht die Breite nicht, die
   Beschreibung schon. */
/* `.nav-link-kopf` gab es zwischen dem 2026-09-13 vormittags und
   nachmittags: Damals stand das Schild neben dem Titel. Es steht jetzt
   unter der Beschreibung, der Wrapper ist entfallen. */
.nav-link-badge {
  flex-shrink: 0;
}

/* Die Beschreibung soll umbrechen duerfen, aber nicht muessen. */
.nav-link-desc {
  text-wrap: pretty;
}

/* Das Zaehlerschild steht neu unter dem Erklaertext, 2026-09-13.
   `.nav-link-text` ist eine Spalte, also stapelt es sich von selbst unter
   Titel und Beschreibung. Zwei Dinge braucht es trotzdem:

   `align-self: flex-start` haelt es auf seiner Inhaltsbreite. Ohne das
   zieht es sich als Flex-Kind ueber die volle Spaltenbreite und sieht aus
   wie ein Balken statt wie ein Schild.

   Der Abstand nach oben trennt es von der Beschreibung, zu der es nicht
   gehoert. Die Regel fuer den Wrapper nav-link-kopf entfaellt, es gibt
   ihn nicht mehr. */
.nav-link-text > .nav-link-badge {
  align-self: flex-start;
  margin-top: var(--hh-space-sm);
  margin-left: 0;
}