/* ══════════════════════════════════════════════════════════════════
   MARKETING-CHROME — marketing-chrome.css
   Gemeinsamer Rahmen der fuenf Marketing-Domains: Seitenbreite, Nav, Footer.

   Quelle: shared-marketing/marketing-chrome.css (ausserhalb aller Domain-Ordner).
   Kopien:  finanzbuch.li, marcher.li, marcherlab.com, reisebuch.li, starterkit.li,
            je unter <domain>/shared/marketing-chrome.css, byte-identisch.
   Nie in einer Kopie aendern: Quelle anpassen, dann `node tools/sync-shared.mjs`.
   Derselbe Lauf setzt in jeder Seite, die diese Datei laedt, ?v=<Hash des Inhalts>.
   `node tools/sync-shared.mjs --check` (fachchecks.yml) meldet jede Abweichung,
   auch einen veralteten ?v=.

   Was hier steht, ist fuer alle Seiten gleich. Das Thema einer Seite (Farben,
   Hero, Inhalt, Wortmarke) bleibt in der Seite; Farbe laeuft ueber tokens.css
   und die Variablen --mc-* unten, die eine Seite ueberschreiben darf
   (--mc-nav-bg, --mc-menu-bg, --mc-gold/--mc-gold-dark/--mc-cta-ink fuer
   den CTA, --mc-footer-bg). Masse und Aufbau ueberschreibt keine Seite.

   Masse (bei 1440px Viewport): Inhalt von x=52 bis x=1388.
     Container 1400px, Innenabstand 32px, mobil (<=600px) 20px.
     Nav sticky, 70px plus 1px Border, ueberall.

   Nav-Aufbau (Markup statisch in jeder Seite):
     <nav class="mc-nav [mc-nav--menu]">
       <div class="nav-inner">
         <a class="nav-logo">WORTMARKE<span>.</span></a>
         <div class="nav-right" id="navRight">
           <ul class="nav-links">…</ul>              optional
           <div class="nav-lang">…</div>              optional, Sprachwahl
           <a class="nav-secondary">…</a>             optional, auch mehrere
           <a class="nav-cta">…</a>                   ein goldener Primaer-CTA
         </div>
         <button class="nav-toggle" id="navToggle">   nur mit mc-nav--menu
       </div>
     </nav>
   mc-nav--menu: unter 1080px klappt .nav-right zum Menue unter der Leiste,
   geoeffnet ueber .is-open (setzt das Toggle-Skript der Seite). Ohne
   mc-nav--menu bleibt .nav-right auch mobil in der Leiste (kurze Navs).

   Footer: <footer class="marcher-footer" data-variant="…">, Markup aus
   MarketingFooter.vue (shared-marketing-vue/) bzw. dem statischen Block.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --mc-max: 1400px;
  --mc-pad: 2rem;
  --mc-nav-h: 70px;
  --mc-nav-bg: rgba(22, 32, 57, 0.94);
  --mc-nav-border: rgba(255, 255, 255, 0.08);
  --mc-gold: #F5C518;
  --mc-gold-dark: #D4A800;
  --mc-ink: #162039;
  --mc-cta-ink: var(--mc-ink);
  --mc-menu-bg: #162039;
  --mc-footer-bg: #0e1524;
  /* Platz unter der Footer-Unterzeile, damit Access-Widget (links) und
     Back-to-top (rechts) am Seitenende nichts verdecken. Beide sitzen
     24px vom Rand und sind bis 50px hoch. */
  --mc-float-clear: 6rem;
}
@media (max-width: 600px) {
  :root { --mc-pad: 20px; --mc-float-clear: 5.5rem; }
}

/* ── CONTAINER ─────────────────────────────────────────────────── */
.mc-container {
  max-width: var(--mc-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--mc-pad);
  padding-right: var(--mc-pad);
}

/* Geteilte Kontakt-Sektion (contact-section.css / KontaktForm.vue): mobil im
   selben Seitenabstand wie Nav, Footer und Seiteninhalt. */
@media (max-width: 600px) {
  .ml-kontakt .ml-kontakt-head,
  .ml-kontakt .ml-kontakt-grid { padding-left: var(--mc-pad); padding-right: var(--mc-pad); }
}

/* ══ NAV ══════════════════════════════════════════════════════════ */
nav.mc-nav {
  position: sticky;
  top: 0;
  left: auto;
  right: auto;
  z-index: 1000;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  background: var(--mc-nav-bg);
  -webkit-backdrop-filter: saturate(1.8) blur(14px);
  backdrop-filter: saturate(1.8) blur(14px);
  border: 0;
  border-bottom: 1px solid var(--mc-nav-border);
  box-shadow: none;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  transform: none;
}
.mc-nav .nav-inner {
  max-width: var(--mc-max);
  height: var(--mc-nav-h);
  margin: 0 auto;
  padding: 0 var(--mc-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
/* Safe-Area (iPhone-Notch, Landscape): nie naeher an den Rand als der Inset. */
@supports (padding: max(0px)) {
  .mc-nav .nav-inner {
    padding-left: max(var(--mc-pad), env(safe-area-inset-left));
    padding-right: max(var(--mc-pad), env(safe-area-inset-right));
  }
}

/* Wortmarke: Groesse, Gewicht und Schrift ueberall gleich. Zusatzteile
   (z.B. "| STARTERKIT.", Icon) gestaltet die Seite selbst. */
/* Kein Flex: in einem Flex-Container verschluckt das Leerzeichen nach dem Punkt-Span
   ("FINN. HOME" wuerde zu "FINN.HOME", siehe tools/golden-check.mjs, LAYOUT). */
.mc-nav .nav-logo {
  display: inline-block;
  flex-shrink: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #fff;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.mc-nav .nav-logo:hover { opacity: 0.85; }
.mc-nav .nav-logo img { display: inline-block; width: 26px; height: 26px; border-radius: 6px; margin-right: 0.6rem; vertical-align: middle; }
.mc-nav .nav-logo > svg { display: inline-block; vertical-align: middle; margin-right: 0.7rem; }
.mc-nav .nav-logo > span:not([class]),
.mc-nav .nav-logo .nav-logo-dot { color: var(--mc-gold, #F5C518); }

.mc-nav .nav-right {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-width: 0;
}

/* Links */
.mc-nav .nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mc-nav .nav-links li { margin: 0; padding: 0; }
.mc-nav .nav-links a {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}
.mc-nav .nav-links a:hover,
.mc-nav .nav-links a:focus-visible { color: var(--mc-gold); }
.mc-nav .nav-links a .gold { color: var(--mc-gold, #F5C518); }
/* Aktive Sektion (Scrollspy einer Seite setzt .active) */
.mc-nav .nav-links a.active { color: #fff; }

/* Sprachwahl: Flagge 22x15, ohne Rahmen */
.mc-nav .nav-lang {
  display: inline-flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mc-nav .nav-lang a,
.mc-nav .nav-lang button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.mc-nav .nav-lang a:hover,
.mc-nav .nav-lang button:hover { opacity: 1; }
.mc-nav .nav-lang svg {
  display: block;
  width: 22px;
  height: 15px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.mc-nav .nav-lang svg[hidden] { display: none; }
/* Text-Variante (DE / EN / FR) */
.mc-nav .nav-lang-text { gap: 0.25rem; }
.mc-nav .nav-lang-text a {
  min-width: 32px;
  padding: 0 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  opacity: 1;
}
.mc-nav .nav-lang-text a:hover { color: #fff; }
.mc-nav .nav-lang-text a[aria-current="true"] { color: var(--mc-gold); background: rgba(245, 197, 24, 0.12); }

/* Sekundaer-Link: schlichter Textlink (Anmelden, Rueckweg, "Marcher Lab. ↗") */
.mc-nav .nav-secondary {
  display: inline-block;
  min-width: 44px;
  line-height: 44px;
  text-align: center;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: rgba(255, 255, 255, 0.75);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}
.mc-nav .nav-secondary:hover,
.mc-nav .nav-secondary:focus-visible { color: var(--mc-gold); }
.mc-nav .nav-secondary .gold { color: var(--mc-gold, #F5C518); }
.mc-nav .nav-secondary svg { display: inline-block; vertical-align: -2px; margin-right: 0.25rem; }
/* Langer Linktext, der mobil auf das Icon schrumpft: <span class="full">…</span> */
@media (max-width: 600px) {
  .mc-nav .nav-secondary .full { display: none; }
  .mc-nav .nav-secondary svg { margin-right: 0; }
}

/* Primaer-CTA: ein goldener Button pro Nav */
.mc-nav .nav-cta {
  display: inline-block;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--mc-cta-ink);
  background: var(--mc-gold);
  border: 0;
  border-radius: 4px;
  padding: 0.6rem 1.1rem;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s;
}
.mc-nav .nav-cta .gold { color: inherit; }   /* Marken-Punkt auf goldenem Grund in Textfarbe */
.mc-nav .nav-cta:hover,
.mc-nav .nav-cta:focus-visible { background: var(--mc-gold-dark); color: var(--mc-cta-ink); }

/* Hamburger (nur mc-nav--menu) */
.mc-nav .nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-right: -11px;
  padding: 11px;
  color: #fff;
  background: none;
  border: 0;
  cursor: pointer;
}
.mc-nav .nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
.mc-nav .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mc-nav .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mc-nav .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1080px) {
  .mc-nav--menu .nav-toggle { display: flex; }
  .mc-nav--menu .nav-right {
    display: none;
    position: absolute;
    top: calc(var(--mc-nav-h) + 1px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    max-height: calc(100vh - var(--mc-nav-h) - 1px);
    max-height: calc(100dvh - var(--mc-nav-h) - 1px);
    overflow-y: auto;
    padding: 1rem var(--mc-pad) 1.5rem;
    background: var(--mc-menu-bg);
    border-bottom: 1px solid var(--mc-nav-border);
  }
  .mc-nav--menu .nav-right.is-open { display: flex; }
  .mc-nav--menu .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }
  /* Block statt Flex: sonst faellt das Leerzeichen nach einem Punkt-Span weg
     ("Wo Finn. lebt", "Marcher Lab. ↗") */
  .mc-nav--menu .nav-links a {
    display: block;
    text-align: center;
    line-height: 44px;
    font-size: 0.95rem;
  }
  .mc-nav--menu .nav-right > .nav-secondary {
    display: block;
    text-align: center;
    line-height: 44px;
    font-size: 0.95rem;
  }
  .mc-nav--menu .nav-lang { justify-content: center; min-height: 44px; }
  .mc-nav--menu .nav-cta {
    align-self: center;
    text-align: center;
    margin-top: 0.75rem;
    padding: 0.75rem 1.5rem;
  }
}

/* Kurze Navs ohne Menue: alles bleibt in der Leiste. Unter 600px fallen die
   Sekundaer-Links weg, die auf eine andere Domain zeigen (der Rueckweg zu
   Marcher Lab. steht dann im Footer), damit Wortmarke und CTA Platz haben. */
@media (max-width: 600px) {
  .mc-nav:not(.mc-nav--menu) .nav-right { gap: 1rem; }
  .mc-nav:not(.mc-nav--menu) .nav-secondary--ext { display: none; }
  .mc-nav:not(.mc-nav--menu) .nav-cta { padding: 0.55rem 0.85rem; }
}
/* Unter 480px: Sekundaer-Links mit Icon schrumpfen auf das Icon (<span class="full">
   faellt weg, siehe oben), damit Wortmarke, Rueckweg und CTA in die Leiste passen. */
@media (max-width: 480px) {
  .mc-nav:not(.mc-nav--menu) .nav-inner { gap: 0.75rem; }
  .mc-nav:not(.mc-nav--menu) .nav-right { gap: 0.25rem; }
  .mc-nav:not(.mc-nav--menu) .nav-cta { padding: 0.5rem 0.7rem; letter-spacing: 0.03em; }
}

/* ══ FOOTER ═══════════════════════════════════════════════════════ */
/* Textfarben auf #0e1524 mit mind. 4.5:1 Kontrast (WCAG AA), Tap-Targets bis
   Tablet 44px -- uebernommen aus marcher.li, wo das schon galt. */
.marcher-footer {
  background: var(--mc-footer-bg);
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 3.5rem 0 0;
  font-family: 'Inter', system-ui, sans-serif;
}

/* ── GRID ──────────────────────────────────────────────────────── */
.mf-grid {
  max-width: var(--mc-max);
  margin: 0 auto;
  padding: 0 var(--mc-pad);
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem;
}

/* ── BRAND COL ─────────────────────────────────────────────────── */
.mf-logo {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  letter-spacing: -0.01em;
  display: inline-block;
  margin-bottom: 0.75rem;
}
.mf-logo span { color: #F5C518; }

.mf-tagline {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.62);
  line-height: 1.6;
  max-width: 220px;
  margin-bottom: 1.25rem;
}

.mf-socials {
  display: flex;
  gap: 10px;
}
.mf-social {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: rgba(255,255,255,0.65);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.mf-social:hover {
  background: #F5C518;
  border-color: #F5C518;
  color: #1E2A4A;
}

/* ── COLUMNS ───────────────────────────────────────────────────── */
.mf-col-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #F5C518;
  margin-bottom: 1rem;
}
.mf-col-label .wm-dot { color: inherit; }

.mf-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.mf-links a {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.62);
  text-decoration: none;
  transition: color 0.2s;
}
.mf-links a:hover { color: #fff; }
.mf-links a .mf-dot { color: #F5C518; }

/* ── KONTAKT COL ───────────────────────────────────────────────── */
.mf-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 0.6rem;
}
.mf-contact-icon {
  color: #F5C518;
  flex-shrink: 0;
  margin-top: 2px;
}
.mf-contact-text {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.62);
  line-height: 1.5;
  overflow-wrap: break-word;
  min-width: 0;
}
.mf-contact-text a {
  display: inline-block;
  padding: 0.2rem 0;
  margin: -0.2rem 0;
  color: rgba(255,255,255,0.62);
  text-decoration: none;
  transition: color 0.2s;
}
.mf-contact-text a:hover { color: #fff; }

/* ── BOTTOM BAR (Copyright + Legal-Zeile, auf allen Seiten gleich) ── */
.mf-bottom {
  max-width: var(--mc-max);
  margin: 2.5rem auto 0;
  padding: 1.25rem var(--mc-pad) var(--mc-float-clear);
  border-top: 1px solid rgba(255,255,255,0.07);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}
/* Footer, der nur aus der Unterzeile besteht (Landingpages, Token-Seiten) */
.marcher-footer.mf-minimal { padding-top: 0; }
.marcher-footer.mf-minimal .mf-bottom { margin-top: 0; border-top: 0; }

.mf-copy {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.55);
}
.mf-copy > span:first-child { color: #F5C518; }

.mf-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.mf-legal a {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color 0.2s;
}
.mf-legal a:hover { color: #fff; }

@supports (padding: max(0px)) {
  .mf-grid, .mf-bottom {
    padding-left: max(var(--mc-pad), env(safe-area-inset-left));
    padding-right: max(var(--mc-pad), env(safe-area-inset-right));
  }
}

/* Tap-Targets bis Tablet: 44px hoch/breit, lange Adressen duerfen umbrechen. */
@media (max-width: 1024px) {
  .mf-links { gap: 0; }
  .mf-links a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .mf-legal { gap: 0.25rem 0.5rem; }
  .mf-legal a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 6px; }
  .mf-legal li:first-child a { padding-left: 0; }
  .mf-socials { flex-wrap: wrap; }
  .mf-logo { display: inline-block; line-height: 44px; margin-bottom: 0.25rem; }
  .mf-contact-text a { display: inline-block; max-width: 100%; min-height: 44px; padding: 11px 0; margin: 0; overflow-wrap: anywhere; }
  .mf-contact-item { margin-bottom: 0.2rem; }
}

/* ── RESPONSIVE (4 Spalten: Brand, Navigation, Buecher, Kontakt) ── */
@media (max-width: 1024px) {
  .mf-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "brand  kontakt"
      "nav    buecher";
    gap: 2rem;
  }
  .mf-grid > div:nth-child(1) { grid-area: brand; }
  .mf-grid > div:nth-child(2) { grid-area: nav; }
  .mf-grid > div:nth-child(3) { grid-area: buecher; }
  .mf-grid > div:nth-child(4) { grid-area: kontakt; }
}
@media (max-width: 600px) {
  .marcher-footer { padding: 2.5rem 0 0; }
  .mf-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.75rem 1.5rem;
  }
  .mf-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-top: 2rem;
  }
  .mf-col-label { margin-bottom: 0.75rem; }
  .mf-links a { font-size: 0.85rem; }
  .mf-tagline { font-size: 0.85rem; max-width: 100%; }
  .mf-copy, .mf-legal a { font-size: 0.78rem; }
  .mf-social { width: 30px; height: 30px; }
}

/* ── VARIANTE 3 SPALTEN (marcher.li: Brand, Marcher Lab., Kontakt) ── */
.mf-grid.mf-grid-3 {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
}
.mf-grid.mf-grid-3 .mf-tagline { max-width: none; }
@media (max-width: 1024px) {
  .mf-grid.mf-grid-3 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "brand kontakt"
      "lab   lab";
  }
  .mf-grid.mf-grid-3 > div:nth-child(2) { grid-area: lab; }
  .mf-grid.mf-grid-3 > div:nth-child(3) { grid-area: kontakt; }
}
@media (max-width: 600px) {
  .mf-grid.mf-grid-3 {
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "lab"
      "kontakt";
    gap: 1.75rem;
  }
}

/* ── VARIANTE 5 SPALTEN (starterkit.li: Wissen + Branchen statt Buecher) ── */
.mf-grid.mf-grid-5 {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.85fr) minmax(0, 0.85fr) minmax(0, 0.85fr) minmax(0, 0.85fr);
}
@media (max-width: 1024px) {
  .mf-grid.mf-grid-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: none;
    gap: 2rem 1.75rem;
  }
  .mf-grid.mf-grid-5 > div:nth-child(1) { grid-area: auto; grid-column: 1 / -1; }
  .mf-grid.mf-grid-5 > div:nth-child(2) { grid-area: auto; }
  .mf-grid.mf-grid-5 > div:nth-child(3) { grid-area: auto; }
  .mf-grid.mf-grid-5 > div:nth-child(4) { grid-area: auto; }
  .mf-grid.mf-grid-5 > div:nth-child(5) { grid-area: auto; grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .mf-grid.mf-grid-5 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.75rem 1.5rem;
  }
  .mf-grid.mf-grid-5 > div:nth-child(1),
  .mf-grid.mf-grid-5 > div:nth-child(5) { grid-column: 1 / -1; }
}