/* =========================================================================
   KOPFZEILE UND NAVIGATION — die einzige Quelle
   -------------------------------------------------------------------------
   WARUM ES DIESE DATEI GIBT

   „Wissen" sah anders aus als die übrigen Punkte. Nicht weil es ein
   <button> ist, sondern weil drei Stylesheets nacheinander dieselben
   Eigenschaften gesetzt haben:

     css/style.css   .main-nav a  →  0,88rem · 0,02em · --anthracite
     css/brand.css   .main-nav a  →  0,83rem · 0,04em · #5F4E42   ← gewinnt
     css/wissen.css  .mega-toggle →  0,88rem · 0,02em · --anthracite ← gewinnt

   Ergebnis: Die Links standen auf 0,83rem, „Wissen" auf 0,88rem. Dazu
   unterschiedliche Laufweite und Farbe. Ich hatte den Ausgleich vorher in
   style.css geschrieben — also ausgerechnet in die Datei, die als erste
   geladen wird und deshalb immer verliert.

   Konsequenz: Alles zur Kopfzeile steht jetzt hier. Die drei anderen
   Dateien enthalten dazu keine einzige Regel mehr.

   -------------------------------------------------------------------------
   DIESE DATEI MUSS ALS LETZTE GELADEN WERDEN

       <link rel="stylesheet" href="css/style.css">
       <link rel="stylesheet" href="css/brand.css">
       …
       <link rel="stylesheet" href="css/navigation.css">   ← immer zuletzt

   Bitte keine Navigationsregeln in andere Dateien schreiben. Wenn etwas
   am Header geändert werden soll, wird es hier geändert.

   -------------------------------------------------------------------------
   DER KERNGEDANKE

   Es gibt genau eine Regel für die Typografie der Navigationspunkte, und
   sie gilt für <a> und <button> gleichermaßen. Deshalb kann es keinen
   sichtbaren Unterschied zwischen beiden geben.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1 · Die Kopfzeile
   ------------------------------------------------------------------------- */

/* Die Kopfhöhe steht als Variable da. Der Header ist fixiert; alles,
   was sich darunter festheften soll (etwa der Fortschritt im Selbstcheck),
   braucht denselben Wert — und darf ihn nicht abschreiben. */
:root { --kopf-hoehe: 84px; }

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  background: rgba(253, 238, 225, 0.92);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
.site-header.is-compact { background: rgba(253, 238, 225, 0.96); }

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 32px);
  height: 84px;
  transition: height 0.3s cubic-bezier(.4, 0, .2, 1);
}
.site-header.is-compact .container { height: 72px; }

.logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding-right: clamp(8px, 1.6vw, 24px);
}
.logo img {
  height: 52px; width: auto;
  transition: height 0.3s cubic-bezier(.4, 0, .2, 1);
}
.site-header.is-compact .logo img { height: 42px; }

/* -------------------------------------------------------------------------
   2 · Die Navigationsleiste
   ------------------------------------------------------------------------- */

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.6vw, 40px);
}
.main-nav > ul {
  display: flex;
  align-items: stretch;          /* alle Punkte gleich hoch */
  gap: clamp(18px, 2.2vw, 32px);
  margin: 0; padding: 0; list-style: none;
}
.main-nav > ul > li {
  display: flex;
  align-items: stretch;
  margin: 0;
}

/* =========================================================================
   3 · DIE EINE REGEL

   Frühere Fassung: Ich habe versucht, die Werte für <a> und <button>
   anzugleichen. Das ging zweimal schief, weil andere Stylesheets
   dazwischenfunkten und weil ein <button> Eigenschaften nicht erbt, an
   die man nicht denkt.

   Jetzt anders herum gelöst: Der sichtbare Text steht in beiden Fällen
   in demselben Element, einem <span class="nav-text">. Der Text wird
   also von genau einer Regel gestaltet.

       <li><a href="…"><span class="nav-text">Über mich</span></a></li>
       <li><button …><span class="nav-text">Wissen</span><span class="mt-caret"></span></button></li>

   Ein Unterschied ist damit nicht mehr unwahrscheinlich, sondern
   ausgeschlossen. Das Elternelement steuert nur noch Klickfläche und
   Ausrichtung — Dinge, die man nicht sieht.
   ========================================================================= */

/* Der Text. Eine Regel, ein Element, kein Sonderfall. */
.main-nav .nav-text {
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.03em;
  line-height: 1;
  color: inherit;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  display: block;
}

/* Die Hülle. Sie trägt Farbe, Klickfläche und Ausrichtung — alles
   Eigenschaften, die bei beiden Elementarten gleich wirken. */
.main-nav > ul > li > a,
.main-nav > ul > li > button {
  /* Button-Rücksetzung: alles, was ein <button> nicht von selbst erbt */
  font: inherit;
  background: none;
  border: none;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  margin: 0;
  padding: 0;
  color: #5F4E42;
  text-decoration: none;
  text-align: left;

  /* Gleiche Höhe, gleiche Grundlinie, 44 px Klickfläche */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  position: relative;
}

.main-nav > ul > li > a:hover,
.main-nav > ul > li > button:hover,
.main-nav > ul > li > a:focus-visible,
.main-nav > ul > li > button:focus-visible {
  color: var(--charcoal);
  outline: none;
}

/* Der orange Unterstrich. Er sitzt an der Textbreite, nicht an der
   Elementbreite — deshalb liegt er am .nav-text und nicht am Elternteil.
   Damit ist er bei „Wissen" genauso lang wie bei „Über mich" und endet
   vor dem Pfeil statt darunter. */
.main-nav .nav-text::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -7px;
  height: 1.5px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s cubic-bezier(.4, 0, .2, 1);
}
.main-nav .nav-text { position: relative; }
.main-nav > ul > li > a:hover .nav-text::after,
.main-nav > ul > li > button:hover .nav-text::after,
.main-nav > ul > li.ist-offen > button .nav-text::after { transform: scaleX(1); }

/* Aktive Seite */
.main-nav > ul > li.ist-aktiv > a,
.main-nav > ul > li.ist-aktiv > button { color: var(--charcoal); }
.main-nav > ul > li.ist-aktiv .nav-text { font-weight: 600; }
.main-nav > ul > li.ist-aktiv .nav-text::after { transform: scaleX(1); }

/* -------------------------------------------------------------------------
   4 · Der Dropdown-Pfeil

   Er steht NICHT absolut, sondern als normales Flex-Geschwister neben
   dem Text. Grund: Absolut positioniert hing seine Lage von der
   Elementbreite ab, und die ist bei „Beratung" und „Wissen"
   unterschiedlich. Als Flex-Geschwister hat er bei beiden denselben
   Abstand zum Wort — nämlich genau den, der hier steht.

   Gezeichnet wird ein Winkel aus zwei Rahmenlinien statt eines
   Schriftzeichens. Schriftzeichen sitzen je nach Schriftart
   unterschiedlich hoch.
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   MENÜPUNKT MIT EIGENER SEITE

   „Beratung" und „Finanzwissen" führen selbst auf eine Seite und haben
   trotzdem ein Menü. Deshalb zwei Elemente: das Wort als Link, der Pfeil
   als eigener Knopf. Sie sitzen direkt nebeneinander und sehen aus wie
   ein Punkt.

   Der Pfeilknopf ist bewusst 44 px breit, obwohl der Pfeil nur 8 px
   misst. Auf dem Handy muss man ihn mit dem Daumen treffen können.
   ------------------------------------------------------------------------- */

.main-nav > ul > li.hat-seite {
  display: inline-flex;
  align-items: center;
}
.main-nav > ul > li > button.mt-pfeil {
  font: inherit;
  background: none;
  border: none;
  -webkit-appearance: none; appearance: none;
  cursor: pointer;
  margin: 0;
  padding: 0 4px;
  min-width: 28px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #5F4E42;
}
.main-nav > ul > li.hat-seite .mt-caret { margin-left: 0; }

@media (max-width: 1000px) {
  /* Im aufgeklappten Menü auf dem Handy braucht der Pfeilknopf eine
     größere Fläche, weil dort mit dem Daumen getippt wird. */
  .main-nav > ul > li > button.mt-pfeil { min-width: 44px; }
}

.mt-caret {
  flex: none;
  width: 8px; height: 8px;
  margin-left: 7px;          /* der einzige Abstand zum Wort */
  position: relative;
  color: inherit;
  opacity: 0.5;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(.4, 0, .2, 1), opacity 0.3s ease;
}
.mt-caret::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 5.5px; height: 5.5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transform-origin: center;
}
.main-nav > ul > li > button:hover .mt-caret { opacity: 0.85; }
.main-nav > ul > li.ist-offen > button .mt-caret {
  transform: rotate(180deg);
  opacity: 1;
  color: var(--orange);
}

/* -------------------------------------------------------------------------
   5 · Der Finanz-Check bleibt der stärkste Punkt
   ------------------------------------------------------------------------- */

.main-nav > .btn-primary {
  flex: none;
  padding: 12px 24px;
  font-size: 0.85rem;
  font-weight: 600;
  min-height: 44px;
}

/* =========================================================================
   6 · DAS AUFKLAPPENDE MENÜ — ein Baustein für beide

   „Beratung" und „Wissen" verwenden dieselben Klassen und werden von
   derselben Funktion erzeugt. Radius, Schatten, Innenabstände,
   Typografie, Hover und Übergänge sind deshalb zwangsläufig gleich —
   nicht abgeglichen, sondern identisch.

   Die Breite ist nach unten begrenzt, damit ein Menü mit wenigen
   Einträgen nicht schmal und verloren wirkt, und nach oben, damit eines
   mit vielen nicht die halbe Seite einnimmt. Beide landen dadurch im
   selben Größenbereich.
   ========================================================================= */

.has-menue { position: relative; }

.menue-panel {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);

  /* Gleicher Größenbereich für beide Menüs */
  width: max-content;
  min-width: 420px;
  max-width: min(660px, calc(100vw - 48px));

  background: var(--white);
  border-radius: var(--r);
  border: 1px solid rgba(90, 60, 35, 0.09);
  box-shadow: 0 24px 60px -26px rgba(90, 60, 35, 0.38);
  padding: 22px;

  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.24s cubic-bezier(.4, 0, .2, 1),
              transform 0.24s cubic-bezier(.4, 0, .2, 1),
              visibility 0.24s;
  z-index: 200;
}
li.ist-offen > .menue-panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Unsichtbare Brücke zwischen Auslöser und Panel. Ohne sie schließt das
   Menü, sobald der Zeiger den Zwischenraum überquert. */
.menue-panel::before {
  content: "";
  position: absolute;
  top: -16px; left: 0; right: 0;
  height: 16px;
}

/* Ein Menü, das am Fensterrand anstoßen würde, rückt nach innen. */
.menue-panel.ist-links  { left: 0;    transform: translateX(0) translateY(-6px); }
.menue-panel.ist-rechts { left: auto; right: 0; transform: translateX(0) translateY(-6px); }
li.ist-offen > .menue-panel.ist-links,
li.ist-offen > .menue-panel.ist-rechts { transform: translateX(0) translateY(0); }

/* ---------- Die Spalten ----------
   Eine Spalte je Gruppe. Bei einer einzigen Gruppe füllt sie die ganze
   Breite, bei zweien teilen sie sich. */

.menue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 6px 18px;
  align-items: start;
}

.menue-col { min-width: 0; }

.menue-head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--sans);
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--warm-grey);
  padding: 4px 10px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(90, 60, 35, 0.12);
}
.menue-head .menue-emoji { font-size: 0.88rem; flex: none; line-height: 1; }
.menue-head .menue-titel { min-width: 0; line-height: 1.3; }

.menue-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.menue-col li { margin: 0; min-width: 0; }

/* Ein Eintrag. Genau eine Regel, für beide Menüs. */
.menue-col li a {
  display: flex; align-items: center; gap: 8px;
  padding: 10px;
  min-height: 44px;
  border-radius: var(--r-sm);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 0.89rem; font-weight: 500;
  color: var(--charcoal);
  line-height: 1.35;
  transition: background 0.2s ease, color 0.2s ease;
}
.menue-eintrag { flex: 1; min-width: 0; }

/* Deutlicher Hover: Fläche, Farbe, Pfeil und eine kleine Bewegung nach
   rechts. Alle drei zusammen machen ohne Zweifel klar, dass hier etwas
   anklickbar ist. */
.menue-col li a:hover,
.menue-col li a:focus-visible {
  background: var(--cream);
  color: var(--orange-dark);
  outline: none;
}
.menue-col li a:focus-visible { box-shadow: inset 0 0 0 2px var(--orange); }
.menue-col li a:hover .menue-eintrag { transform: translateX(2px); }
.menue-eintrag { transition: transform 0.2s ease; }
.menue-col li a .btn-arrow {
  flex: none; color: var(--orange);
  opacity: 0; transform: translateX(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.menue-col li a:hover .btn-arrow { opacity: 1; transform: translateX(0); }

.menue-tag {
  flex: none;
  font-family: var(--sans);
  font-size: 0.56rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--orange-dark);
  background: var(--peach);
  padding: 3px 7px;
  border-radius: 100px;
  white-space: nowrap;
}

/* ---------- Der Abschluss ---------- */

.menue-foot {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(90, 60, 35, 0.12);
  display: flex; flex-direction: column; gap: 10px;
}
.menue-foot p {
  font-family: var(--sans); font-size: 0.8rem;
  color: var(--warm-grey); line-height: 1.6;
  margin: 0;
}
.menue-fuss-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  background: var(--peach);
  border-radius: var(--r-sm);
  font-family: var(--sans);
  font-size: 0.85rem; font-weight: 600;
  color: var(--orange-dark);
  text-decoration: none;
  transition: background 0.2s ease;
}
.menue-fuss-link:hover { background: var(--orange); color: var(--white); }
.menue-fuss-link .btn-arrow { transition: transform 0.22s ease; }
.menue-fuss-link:hover .btn-arrow { transform: translateX(3px); }

/* -------------------------------------------------------------------------
   7 · Der Hamburger
   ------------------------------------------------------------------------- */

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none; border: none; cursor: pointer;
  width: 44px; height: 44px;
  padding: 10px;
  flex: none;
}
.nav-toggle span {
  display: block;
  width: 100%; height: 2px;
  background: var(--charcoal);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* -------------------------------------------------------------------------
   8 · Der spätere Kundenbereich
   ------------------------------------------------------------------------- */

.nav-kundenbereich > a { color: var(--warm-grey); }
.nav-kundenbereich > a:hover { color: var(--orange-dark); }

/* =========================================================================
   9 · MOBIL

   Ab hier ist die Navigation ein Vollbildmenü. Auch dort gilt weiter:
   eine Regel für Links und Buttons gemeinsam.
   ========================================================================= */

@media (max-width: 1000px) {
  :root { --kopf-hoehe: 76px; }
  .site-header .container { height: 76px; }
  .site-header.is-compact .container { height: 72px; }
  .logo img { height: 44px; }
  .site-header.is-compact .logo img { height: 40px; }

  .nav-toggle { display: flex; }

  .main-nav {
    position: fixed;
    top: 76px; left: 0; right: 0; bottom: 0;
    background: var(--cream);
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    padding: 20px clamp(20px, 5vw, 32px) 48px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(.4, 0, .2, 1);
    z-index: 400;
  }
  .main-nav.nav-open { transform: translateX(0); }

  .main-nav > ul { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .main-nav > ul > li { display: block; width: 100%; }

  .main-nav > ul > li > a,
  .main-nav > ul > li > button {
    display: flex;
    width: 100%;
    justify-content: space-between;
    font-size: 1.02rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.35;
    color: var(--charcoal);
    min-height: 56px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(90, 60, 35, 0.12);
    white-space: normal;
  }
  .main-nav > ul > li > button { padding-right: 0; }
  .main-nav > ul > li > a::after,
  .main-nav > ul > li > button::after { display: none; }
  .main-nav > ul > li.ist-aktiv > a,
  .main-nav > ul > li.ist-aktiv > button { color: var(--orange-dark); font-weight: 700; }

  /* Der Pfeil steht mobil rechts in der Zeile, nicht überlappend. */
  .mt-caret { position: static; transform: none; flex: none; opacity: 0.7; }
  .main-nav > ul > li.ist-offen > button .mt-caret { transform: rotate(180deg); }

  /* ---------------------------------------------------------------
     MOBIL IST ES EIN ACCORDION, KEIN MENÜ

     Kein Kasten, kein Schatten, keine absolute Position. Das Untermenü
     klappt in der Zeile auf, direkt unter seinem Punkt — so, wie man es
     von einem Accordion erwartet.
     --------------------------------------------------------------- */

  .menue-panel {
    position: static;
    transform: none;
    width: 100%; min-width: 0; max-width: none;
    background: transparent;
    box-shadow: none; border: none; border-radius: 0;
    padding: 0;
    opacity: 1; visibility: visible; pointer-events: auto;
    max-height: 0; overflow: hidden;
    transition: max-height 0.35s cubic-bezier(.4, 0, .2, 1);
  }
  li.ist-offen > .menue-panel { max-height: 1400px; transform: none; }
  .menue-panel::before { display: none; }

  .menue-grid { grid-template-columns: 1fr; gap: 0; padding: 4px 0 12px; }

  .menue-col { padding: 0; }
  .menue-head {
    border-bottom: none;
    padding: 14px 0 4px;
    margin-bottom: 0;
    font-size: 0.64rem;
    letter-spacing: 0.14em;
  }

  /* Eingerückt, damit auf einen Blick klar ist: Das gehört zum Punkt
     darüber. Ohne Einrückung sieht ein Accordion aus wie eine zweite
     Hauptnavigation. */
  .menue-col ul { padding-left: 12px; border-left: 2px solid rgba(255, 97, 0, 0.22); }

  .menue-col li a {
    padding: 12px 10px;
    min-height: 48px;
    font-size: 0.94rem;
    border-radius: var(--r-sm);
  }
  .menue-col li a:hover { background: transparent; }
  .menue-col li a .btn-arrow { opacity: 0.45; transform: none; }

  .menue-foot {
    margin-top: 10px; padding-top: 12px;
    padding-bottom: 6px;
  }
  .menue-foot p { display: none; }
  .menue-fuss-link { min-height: 48px; }

  .main-nav > .btn-primary {
    margin-top: 26px;
    width: 100%;
    justify-content: center;
    font-size: 0.95rem;
    padding: 16px 24px;
    min-height: 54px;
  }
}

/* Sehr schmale Geräte */
@media (max-width: 380px) {
  :root { --kopf-hoehe: 68px; }
  .logo img { height: 38px; }
  .site-header .container { height: 68px; }
  .main-nav { top: 68px; padding-left: 18px; padding-right: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header, .site-header .container, .logo img,
  .main-nav, .menue-panel, .mt-caret,
  .main-nav > ul > li > a::after,
  .main-nav > ul > li > button::after,
  .nav-toggle span { transition: none; }
}