/* ============================================================
   inner.css — Prose, InnerPage, CTA-Row
   PHASE 2 + !important-Sweep: Konsumenten kanonisch, lokaler :root entfernt,
   .btn--*-Overrides ohne !important (Workaround gegen die alte Kaskade ist mit
   dem Refactor obsolet). inner.css lädt NACH styles.css → die Regeln gewinnen
   weiterhin per Quell-Reihenfolge, wertgleich → Δ=0 erwartet gegen v3.
   Hinweis: dieser .btn--*-Block ist jetzt wertgleich zu styles.css und damit
   strenggenommen redundant — könnte in einem späteren Tidy ganz entfallen.
   Eigentümer: Claude Design (Schicht 1)
   ============================================================ */

.btn--navy {
  background: var(--color-navy);
  color: var(--color-warm);
  border-color: var(--color-navy);
}
.btn--navy:hover {
  background: var(--color-navy-700);
  color: var(--color-warm);
}
.btn--gold {
  background: var(--color-gold);
  color: var(--color-white);
}
.btn--gold:hover {
  background: var(--color-gold-dark);
  color: var(--color-white);
}
.btn--text {
  color: var(--color-navy);
  background: transparent;
}
.btn--text:hover {
  color: var(--color-gold-dark);
}

/* ── Prose ───────────────────────────────────────────────────
   Stand: Button-Drift-Fix (Brief #10). .prose a → .prose a:not(.btn),
   damit Buttons in Prose vom Link-Styling unberührt bleiben. Die .btn--*
   bleiben ohne !important (Sweep aus Brief #8). */
.prose {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-navy);
  max-width: 760px;
}

.prose h2 {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
  font-weight: 600;
  color: var(--color-navy);
  margin: 2.5rem 0 0.75rem;
  line-height: 1.25;
}

.prose h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-navy);
  margin: 2rem 0 0.5rem;
}

.prose p {
  margin: 0 0 1.1rem;
}

.prose p.body-lg {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--color-navy);
  font-weight: 400;
  margin-bottom: 1.5rem;
}

.prose ul,
.prose ol {
  padding-left: 1.5rem;
  margin: 0 0 1.25rem;
}

.prose li {
  margin-bottom: 0.4rem;
  line-height: 1.65;
}

.prose strong {
  font-weight: 600;
  color: var(--color-navy);
}

/* :not(.btn) — Prose-Link-Styling darf NICHT auf Button-Anker greifen, die in
   .prose stecken (z.B. .cta-row > a.btn.btn--navy). Fixt sowohl die Farbe
   (navy-auf-navy → unsichtbar) als auch den geleakten text-decoration:underline.
   Spezifizität (0,2,1) — gewinnt weiterhin gegen Browser-Defaults für echte Links. */
.prose a:not(.btn) {
  color: var(--color-navy);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--color-gold);
}

.prose a:not(.btn):hover {
  color: var(--color-gold);
}

.prose figure.prose-figure {
  margin: 2rem 0;
  border-radius: 4px;
  overflow: hidden;
  max-width: 480px;
}

.prose figure.prose-figure img {
  width: 100%;
  height: auto;
  display: block;
}

.prose figure.prose-figure figcaption {
  font-size: 0.8rem;
  color: var(--color-navy-70);
  padding: 0.5rem 0 0;
  font-style: italic;
}

.prose blockquote {
  border-left: 3px solid var(--color-gold);
  margin: 1.5rem 0;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--color-navy);
  background: var(--color-warm);
}

/* ── CTA-Row ────────────────────────────────────────────────── */
.cta-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}

/* ── Mobile Nav Toggle ──────────────────────────────────────── */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  margin-left: auto;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-navy);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
}

.site-header.is-scrolled .nav-toggle span {
  background: var(--color-navy);
}

@media (max-width: 960px) {
  .nav-toggle {
    display: flex;
    /* Über dem Drawer (z-index 200) halten, damit der Burger als Schließen-Affordance
       tappbar bleibt — sonst verdeckt der von rechts einfahrende Drawer den Button. */
    position: relative;
    z-index: 201;
  }

  /* Burger → X, sobald der Drawer offen ist (gleiche Taste öffnet/schließt). */
  body.nav-open .nav-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  body.nav-open .nav-toggle span:nth-child(2) {
    opacity: 0;
  }
  body.nav-open .nav-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .nav {
    /* display:flex MUSS hier stehen: styles.css setzt im @media (max-width:1100px)
       .nav{display:none} (Desktop-Nav ausblenden). Dieser Drawer-Block (≤960) wird
       NICHT automatisch davon befreit — ohne explizites display bleibt .nav
       display:none, und .nav--open (nur transform) kann es nicht sichtbar machen.
       Spätere Quell-Reihenfolge + gleiche Spezifität → überschreibt das stale none. */
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0 0 0 auto;
    width: min(340px, 88vw);                /* etwas breiter — mehr Luft für lange Labels (Brief #11-R-5) */
    background: var(--color-warm);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 200;
    padding: 6.75rem 1.75rem 2rem;          /* 108px > 100px-Header (ungescrollt) + 8px Luft (Brief #11-R-5b) */
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    box-shadow: -4px 0 24px rgba(15, 39, 71, 0.12);
  }

  /* Drawer-Titel (Wortmarke) — schließt Davids „kein Titel ganz oben" (Brief #11-R-5). */
  .nav::before {
    content: "";
    display: block;
    height: 32px;
    flex: 0 0 auto;
    margin-bottom: 1.1rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--color-navy-10);
    background: url("/assets/fhuj-logo.svg") left center / auto 32px no-repeat;
  }

  /* ANDROID-FIX (Brief #11-R-3): Overlay lag ÜBER dem Drawer und fing alle Taps/Scrolls.
     Ursache: .site-header ist position:sticky;z-index:50 → eigener Stacking-Context.
     Der Drawer (.nav, z-index:200) ist dessen Kind, gilt also nur INNERHALB des Headers;
     das Overlay body.nav-open::before (z-index:199) sitzt im Root-Context und malt damit
     über den ganzen Header-Context (50) — inkl. Drawer. Chrome/Firefox-Android lösen das
     unterschiedlich auf → „geht auf, aber nicht klick-/scrollbar". Fix: Header-Context bei
     offenem Drawer klar über das Overlay heben, dann paint der Drawer (als Kind) darüber. */
  body.nav-open .site-header {
    z-index: 201;
  }

  .nav--open {
    transform: translateX(0);
  }

  .nav ul {
    flex-direction: column;
    gap: 0;
  }

  .nav ul li {
    border-bottom: 1px solid rgba(15, 39, 71, 0.08);
  }

  .nav ul li a {
    display: block;
    padding: 0.9rem 0;
    font-size: 1rem;
    color: var(--color-navy);
  }

  /* Submenu: Inline-Akkordeon statt Flyout — die EIGENTLICHE Ursache der */
  /* „rechts abgeschnitten"-Optik war die NICHT zurückgesetzte Desktop-Breite */
  /* (min-width:320px) + position:absolute aus styles.css (Brief #11-R-5).   */
  .submenu {
    position: static;
    min-width: 0;          /* ← kippt die geerbte 320px-Breite, kein Overflow mehr */
    width: auto;
    background: transparent;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--color-navy-10);   /* dezente Einrück-Kante */
    margin-left: 0.1rem;
    padding: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .has-sub.is-open > .submenu {
    max-height: 60vh;
  }
  .submenu .submenu__inner {
    padding: 0.2rem 0 0.6rem;
  }

  .submenu ul li a {
    padding: 0.5rem 0 0.5rem 1rem;     /* Davids Wunsch „nach links einrücken" als saubere Stufe */
    font-size: 0.9rem;
  }

  body.nav-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(15, 39, 71, 0.4);
    z-index: 199;
    cursor: pointer; /* signalisiert: Tap aufs Overlay schließt (Handler in Base.astro) */
  }

  /* Body-Scroll-Lock: Hintergrund darf unter dem offenen Drawer nicht scrollen. */
  body.nav-open {
    overflow: hidden;
  }
}

/* ── Utility Bar: kein Lang-Switcher ────────────────────────── */
.lang { display: none; }