/* Halo · Header & Hauptnavigation — Markup kommt aus Halo.renderHeader()
 * (assets/halo.js). Bewusst eine eigene Datei, damit Seiten mit eigenem
 * Seiten-CSS (index.html, check.html) denselben Header bekommen, ohne die
 * komplette halo.css gegen ihre Inline-Regeln stellen zu müssen.
 * halo.css bindet diese Datei per @import ein — App-Seiten ändern nichts.
 *
 * Farben ausschließlich über Tokens (assets/tokens.css).
 */

header.top {
  background: var(--c-navy-deep);
  color: var(--c-surface);
  padding: 18px 0;
  border-bottom: 1px solid rgba(var(--c-green-rgb), 0.25);
}
/* Sticky nur mit In-Page-Navigation (Dashboard) — Nav bleibt sichtbar. */
header.top.has-nav {
  position: sticky; top: 0; z-index: 50;
  padding: 12px 0;
  box-shadow: 0 4px 24px rgba(var(--c-navy-deep-rgb), 0.28);
}
.header-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 24px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
}

/* Zentrales Menüband (Dashboard) */
.header-nav {
  display: flex; gap: 4px; flex: 1; justify-content: center;
  flex-wrap: wrap;
}
/* EINE Box für alle Einträge der Kopfzeile — Links, Dropdown-Knöpfe und das
 * Konto-Menü. Ohne das laufen sie auseinander: ein <a> erbt die
 * line-height: 1.6 des Bodys, ein <button> bekommt vom Browser-Stylesheet
 * `normal` — gleiche Schriftgröße, trotzdem unterschiedlich hohe Kästen und
 * damit unterschiedliche Textlagen. Feste line-height und min-height binden
 * alle auf dieselbe Grundlinie. */
.header-nav a,
.header-drop-btn {
  display: inline-flex; align-items: center;
  font-size: 14px; font-weight: 500; line-height: 1;
  letter-spacing: 0.01em;
  padding: 0 15px; min-height: 38px;
  border-radius: 999px;
  transition: color .15s, background .15s;
}
.header-nav a {
  color: rgba(var(--c-white-rgb), 0.78);
  text-decoration: none;
}
.header-nav a:hover {
  color: var(--c-surface); background: rgba(var(--c-white-rgb), 0.08);
}
.header-nav a.active {
  color: var(--c-navy-deep); background: var(--c-green); font-weight: 600;
}

/* ---- Dropdown „Dokumente erstellen" (Desktop) --------------------------
 * Bewusst klick- statt hover-gesteuert: auf Touch-Geräten mit Zeigegerät
 * (iPad + Maus) ist Hover unzuverlässig, und ein Button ist per Tastatur
 * bedienbar. Öffnen/Schließen steuert halo.js über .open + aria-expanded. */
.header-drop { position: relative; }
.header-drop-btn {
  gap: 6px;
  background: none; border: none; cursor: pointer;
  font-family: inherit;
  color: rgba(var(--c-white-rgb), 0.78);
}
.header-drop-btn:hover,
.header-drop.open .header-drop-btn {
  color: var(--c-surface); background: rgba(var(--c-white-rgb), 0.08);
}
.header-drop-btn .chev {
  width: 10px; height: 10px; flex-shrink: 0;
  transition: transform .18s ease;
}
.header-drop.open .header-drop-btn .chev { transform: rotate(180deg); }

.header-drop-panel {
  display: none;
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%);
  min-width: 300px; z-index: 60;
  background: var(--c-surface);
  border: 1px solid var(--c-track);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 44px rgba(var(--c-navy-deep-rgb), 0.22);
  padding: 8px;
}
.header-drop.open .header-drop-panel { display: block; }
.header-drop-panel a {
  display: block; padding: 10px 12px; border-radius: var(--radius-md);
  text-decoration: none; color: var(--c-text);
  transition: background .15s ease;
}
.header-drop-panel a:hover { background: var(--c-surface-soft); }
.header-drop-title {
  display: block; font-size: 15px; font-weight: 600;
  color: var(--c-navy-deep); line-height: 1.35;
}
.header-drop-text {
  display: block; font-size: 13px; line-height: 1.45;
  color: var(--c-text-muted); margin-top: 2px;
}
.header-drop-soon {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--c-amber-soft); color: var(--c-amber-deep);
  border-radius: 999px; padding: 2px 7px; margin-left: 6px; vertical-align: 1px;
}
.header-drop-foot {
  border-top: 1px solid var(--c-track); margin-top: 6px; padding-top: 6px;
}
.header-drop-foot a .header-drop-title { color: var(--c-green-deep); }

/* Mobil: Nav + Textlinks kollabieren ins Burger-Menü → Header bleibt einzeilig */
@media (max-width: 860px) {
  header.top .header-nav { display: none; }
  header.top .header-meta.menu-collapsed { display: none; }
  .header-burger.enabled { display: inline-flex; }
}
/* Wort-Bild-Marke als Datei (assets/icons/), nicht mehr als nachgezeichnetes
   SVG plus Textknoten. Damit steht überall dieselbe Marke — und sie lässt sich
   austauschen, ohne CSS anzufassen. Hover färbt nichts mehr um (eine Bilddatei
   kennt keine Tokens), sondern hellt leicht auf. */
.logo {
  display: flex; align-items: center;
  text-decoration: none;
  transition: opacity .15s ease;
}
.logo .logo-lockup {
  display: block; height: 34px; width: auto;
}
.logo:hover { opacity: 0.82; }
/* Kleinere Höhe auf Mobil: weiter unten im Media-Query-Block dieser Datei. */
.logo-tag {
  font-family: 'Inter', sans-serif; font-size: 12px; color: var(--c-green);
  letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
  margin-left: 16px; opacity: 0.9;
}
.header-meta {
  font-size: 12px; color: rgba(var(--c-white-rgb), 0.65);
  letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500;
  white-space: nowrap;
}
.header-meta a { color: var(--c-green-bright); text-decoration: none; }
.header-meta a:hover { color: var(--c-surface); }

/* ---- Konto-Menü (rechts) ------------------------------------------------
 * Bündelt Einstellungen, Haushalt, Preise und Abmelden. Erbt Verhalten und
 * Panel-Optik von .header-drop; hier stehen nur die Unterschiede: es hängt
 * am rechten Rand statt mittig, und der Button trägt ein Icon. */
.header-acct .header-drop-panel {
  left: auto; right: 0; transform: none;
  min-width: 232px;
}
/* Bewusst dieselbe Schrift wie die Nav-Links (14px, kein Versal): der
   Konto-Knopf steht in derselben Zeile und soll auch so gelesen werden. */
.header-acct .header-drop-btn {
  gap: 8px; color: rgba(var(--c-white-rgb), 0.82);
  /* .header-meta setzt Versalien für den „Anmelden"-Knopf — text-transform
     vererbt sich, deshalb hier ausdrücklich zurücknehmen. */
  text-transform: none; letter-spacing: 0.01em;
}
.header-acct .header-drop-btn:hover,
.header-acct.open .header-drop-btn { color: var(--c-surface); }
.header-acct .header-drop-btn .ico { font-size: 18px; opacity: .9; }
/* Im Panel ist der Text wieder normal gesetzt — Versalien gehören in den
   Header, nicht in eine Liste von Zielen. */
.header-acct .header-drop-panel a {
  letter-spacing: normal; text-transform: none; color: var(--c-text);
}
.header-acct .header-drop-panel a:hover { color: var(--c-text); }
/* Abmelden abgesetzt: es ist die einzige Aktion hier, die etwas beendet. */
.header-acct .header-drop-panel a.halo-signout {
  border-top: 1px solid var(--c-track);
  margin-top: 6px; padding-top: 12px; border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.header-acct .header-drop-panel a.halo-signout .header-drop-title {
  color: var(--c-text-muted); font-weight: 500;
}

/* Anmelde-Button: auf allen Seiten identisch (auch Landing Page) */
.header-login {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-surface); background: transparent;
  border: 2px solid var(--c-green);
  padding: 10px 18px; border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s ease;
  white-space: nowrap;
}
.header-login:hover { background: var(--c-green); color: var(--c-surface); }

/* Burger-Button (nur Mobile) */
.header-burger {
  display: none; background: none; border: none; cursor: pointer;
  width: 40px; height: 40px; border-radius: var(--radius-md);
  align-items: center; justify-content: center; flex-shrink: 0;
  color: var(--c-surface);
}
.header-burger:hover { background: rgba(var(--c-white-rgb), 0.08); }

/* Aufklappbares Mobile-Menü unter dem Header */
.header-menu {
  display: none;
  max-width: 1180px; margin: 0 auto;
  padding: 4px 24px 12px;
}
.header-menu.open { display: block; }
.header-menu a {
  display: block; padding: 12px 4px;
  color: rgba(var(--c-white-rgb), 0.88); text-decoration: none;
  font-size: 15px; font-weight: 500;
  border-bottom: 1px solid rgba(var(--c-white-rgb), 0.08);
}
.header-menu a:last-child { border-bottom: none; }
.header-menu a.active { color: var(--c-green-bright); }

/* Mobil bleibt der Header einzeilig: Logo · Burger · Anmelden. Der
   „Anmelden"-Button ist die wichtigste Aktion für Ausgeloggte und bleibt
   deshalb sichtbar — nur enger gesetzt. */
@media (max-width: 720px) {
  .logo .logo-lockup { height: 30px; }
  .logo-tag { display: none; }
  .header-login { padding: 8px 14px; font-size: 12px; letter-spacing: 0.06em; }
}
@media (max-width: 380px) {
  .header-inner { padding: 0 16px; gap: 10px; }
  .header-login { padding: 7px 11px; font-size: 12px; }
}
/* Gruppen-Überschrift + eingerückte Einträge (Dropdown-Ersatz auf Mobile) */
.header-menu .menu-group {
  display: block; padding: 14px 4px 6px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--c-green-bright);
}
.header-menu a.menu-sub { padding-left: 16px; }
/* Der Fuß der Gruppe (eingeloggt die Checkliste, sonst die Dokument-Übersicht)
   ist kein weiteres Dokument, sondern der Weg zum Überblick — deshalb abgesetzt
   und in Akzentfarbe, wie sein Gegenstück im Desktop-Dropdown. */
.header-menu a.menu-sub.is-fuss {
  color: var(--c-green-bright); font-weight: 600;
}
.header-menu a.menu-sub.is-fuss:after { content: " →"; }