/* ═══════════════════════════════════════════════════════════════════════════
   [KOPF-UND-FUSS-AUF-ALLEN-SEITEN 2026-09-23]

   Die Rechts- und Formularseiten trugen nur ein <header><span>Hiddin</span></header>:
   ein Wort ohne Link, ohne Logo, ohne Menü. Wer dort landete, kam nicht zurück zur
   Startseite — es gab keinen Weg ausser der Zurück-Taste des Browsers. Eine Fusszeile
   fehlte ebenfalls, und damit auf mehreren Seiten der Pflichtweg zu Impressum und
   Datenschutz.

   Diese Datei traegt Kopf und Fuss fuer alle Seiten, die keine eigene Navigation
   mitbringen. Die Marketingseiten (index, restaurant, influencer, scout, …) haben
   ihre eigene, aufwendigere Leiste und binden diese Datei nicht ein.

   Praefix `hd-`, damit nichts mit den bestehenden Regeln der einzelnen Seiten
   kollidiert — jede Rechtsseite bringt ihr eigenes <style> mit.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --hd-forest: #0B3D2E;
  --hd-ink: #062018;
  --hd-hell: #E4EAE4;
  --hd-gold: #C9A84C;
  --hd-ember: #FF4D1C;
}

/* ── Kopfzeile ───────────────────────────────────────────────────────────── */
.hd-kopf {
  background: var(--hd-forest);
  border-bottom: 1px solid rgba(228, 234, 228, 0.1);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 50;
}
.hd-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.hd-logo img { display: block; width: auto; }
.hd-logo .hd-logo-icon { height: 30px; }
.hd-logo .hd-logo-text { height: 19px; }
/* Ersatz, solange ein Bild nicht geladen ist — der Weg zurueck darf nicht an
   einer fehlenden Datei haengen. */
.hd-logo span {
  font-size: 17px;
  font-weight: 700;
  color: var(--hd-hell);
  letter-spacing: .01em;
}

.hd-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.hd-nav a {
  color: rgba(228, 234, 228, 0.78);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.2;
  padding: 6px 0;
  transition: color .15s;
}
.hd-nav a:hover { color: var(--hd-hell); text-decoration: none; }
.hd-nav a.hd-cta {
  background: var(--hd-ember);
  color: #fff;
  padding: 9px 16px;
  border-radius: 100px;
  font-weight: 600;
}
.hd-nav a.hd-cta:hover { opacity: .9; color: #fff; }

/* ── Fusszeile ───────────────────────────────────────────────────────────── */
.hd-fuss {
  background: var(--hd-ink);
  border-top: 1px solid rgba(228, 234, 228, 0.1);
  padding: 40px 24px 28px;
  margin-top: 60px;
}
.hd-fuss-innen {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
}
.hd-fuss-logo img { height: 30px; width: auto; display: block; }
.hd-fuss-logo span { font-size: 16px; font-weight: 700; color: var(--hd-hell); }
.hd-fuss-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.hd-fuss-links a {
  color: rgba(228, 234, 228, 0.66);
  text-decoration: none;
  font-size: 13.5px;
  transition: color .15s;
}
.hd-fuss-links a:hover { color: var(--hd-hell); text-decoration: underline; }
.hd-fuss-copy {
  max-width: 900px;
  margin: 24px auto 0;
  text-align: center;
  font-size: 12.5px;
  color: rgba(228, 234, 228, 0.4);
}

/* ── Seiten, die ihren Inhalt mittig stellen ─────────────────────────────── */
/* Die Formular- und Scout-Seiten zentrieren ihre Karte mit `body{display:flex;
   align-items:center}`. Kopf und Fuss wurden dadurch zu zwei weiteren Elementen
   in derselben Zeile — die Seite erschien mehrfach nebeneinander. Statt deren
   Gestaltung anzutasten, kippt `hd-seite` die Achse: Kopf oben, Inhalt mittig
   im verbleibenden Platz, Fuss unten. Die Karte bleibt zentriert wie zuvor. */
body.hd-seite {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
}
body.hd-seite > .hd-inhalt {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Der Innenabstand, den der Rumpf vorher trug, wandert mit. */
  padding: 32px 24px;
}
body.hd-seite > .hd-fuss { margin-top: 0; flex-shrink: 0; }
body.hd-seite > .hd-kopf { position: static; }

/* ── Telefon ─────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .hd-kopf { padding: 12px 16px; }
  /* Die Menuepunkte ruecken unter das Logo und teilen sich die volle Breite,
     statt in einer zu engen Zeile zu brechen. */
  .hd-nav { width: 100%; gap: 14px; justify-content: flex-start; }
  .hd-nav a { font-size: 13.5px; }
  .hd-nav a.hd-cta { padding: 7px 13px; }
  .hd-fuss { padding: 32px 16px 24px; }
  .hd-fuss-innen { flex-direction: column; align-items: flex-start; gap: 16px; }
  .hd-fuss-links { gap: 14px; }
  .hd-fuss-copy { text-align: left; }
}