/*
 * Gemeinsame Kopf- und Fusszeile aller Landing-Seiten.
 * Markup: apps/landing-partials/*.html – eingesetzt per `node deploy/build-landing.mjs`.
 * Alles ist mit site- vorangestellt, damit die Seiten-Styles (legal.css,
 * Inline-CSS der Startseite und der Preisseite) nicht hineinwirken.
 * Die Umbruchstufen sind ausgemessen (DE/EN, 300–1000 px). Unter 601 px Menue-Knopf.
 */
html{ scroll-padding-top:76px }

.site-nav, .site-foot{
  --s-blue:#2563EB; --s-blue-600:#1D4ED8; --s-ink:#0F172A; --s-slate:#475569;
  --s-line:#E5E7EB; --s-soft:#F5F7FA; --s-surface:#FFFFFF;
  font-family:system-ui,-apple-system,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
.site-nav *, .site-foot *{ box-sizing:border-box }
.site-nav a, .site-foot a{ text-decoration:none }
.site-wrap{ max-width:1120px; margin:0 auto; padding:0 24px }

/* ---------- Kopfzeile (durchscheinendes Material) ---------- */
.site-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid rgba(15,23,42,.06);
}
.site-nav .site-wrap{ display:flex; align-items:center; justify-content:space-between; gap:10px; height:64px }
.site-brand{ display:flex; align-items:center; gap:10px; color:var(--s-ink); font-weight:700; font-size:18px;
  letter-spacing:-.01em; white-space:nowrap }
.site-logo{ width:32px; height:32px; border-radius:9px; background:var(--s-blue); display:grid; place-items:center;
  flex:none; box-shadow:0 10px 40px rgba(37,99,235,.18) }
.site-actions{ display:flex; align-items:center; gap:8px }
.site-link{ padding:8px 10px; border-radius:999px; font-size:14px; font-weight:600; color:var(--s-slate); transition:color .15s }
.site-link:hover, .site-link[aria-current="page"]{ color:var(--s-ink) }
.site-btn{ display:inline-flex; align-items:center; justify-content:center; padding:9px 16px; border-radius:999px;
  border:1px solid transparent; font-size:14px; font-weight:600; white-space:nowrap;
  transition:transform .1s ease-out, background .2s, border-color .2s }
.site-btn:active{ transform:scale(.97) }
.site-btn-primary{ background:var(--s-blue); color:#fff; box-shadow:0 10px 40px rgba(37,99,235,.18) }
.site-btn-primary:hover{ background:var(--s-blue-600) }
.site-btn-ghost{ background:var(--s-surface); color:var(--s-ink); border-color:var(--s-line) }
.site-btn-ghost:hover{ border-color:#CBD5E1 }
.site-lang{ display:inline-flex; gap:2px; padding:3px; border-radius:999px; background:var(--s-soft); border:1px solid var(--s-line) }
.site-lang a{ padding:5px 11px; border-radius:999px; font-size:12px; font-weight:600; letter-spacing:.03em;
  color:var(--s-slate); transition:color .15s, background .15s, box-shadow .15s }
.site-lang a:hover{ color:var(--s-ink) }
.site-lang a[aria-current="true"]{ background:var(--s-surface); color:var(--s-ink); box-shadow:0 1px 2px rgba(15,23,42,.12) }
.site-nav a:focus-visible, .site-foot a:focus-visible{ outline:2px solid var(--s-blue); outline-offset:2px }

/* ---------- Handy-Menue ---------- */
.site-burger, .site-menu, .site-scrim{ display:none }
.site-burger{ position:relative; width:44px; height:44px; margin-right:-8px; border:0; border-radius:12px;
  background:transparent; color:var(--s-ink); cursor:pointer; -webkit-tap-highlight-color:transparent }
.site-burger span{ position:absolute; left:13px; right:13px; height:2px; border-radius:2px; background:currentColor;
  transition:transform .32s cubic-bezier(.2,.7,.2,1) }
.site-burger span:first-child{ transform:translateY(-4px) }
.site-burger span:last-child{ transform:translateY(4px) }
.menu-open .site-burger span:first-child{ transform:rotate(45deg) }
.menu-open .site-burger span:last-child{ transform:rotate(-45deg) }
.site-burger:focus-visible{ outline:2px solid var(--s-blue); outline-offset:0 }

/* Unter 601 px: Preise, Login und Sprache wandern ins Menue; "Jetzt loslegen" bleibt sichtbar. */
@media (max-width:600px){
  .site-desktop{ display:none }
  .site-burger{ display:block }
  .site-nav .site-wrap{ padding:0 16px }
  .site-actions{ gap:6px }
  .site-menu[hidden], .site-scrim[hidden]{ display:none }
  .site-menu{ display:block; position:absolute; left:0; right:0; top:100%;
    /* Deckend: ein halbtransparentes Feld unter der ebenfalls gefilterten Kopfzeile liess Text durchscheinen. */
    padding:6px 16px 18px; background:var(--s-surface);
    border-bottom:1px solid rgba(15,23,42,.08); box-shadow:0 24px 40px -24px rgba(15,23,42,.35);
    opacity:0; transform:translateY(-8px); pointer-events:none;
    transition:opacity .22s ease, transform .32s cubic-bezier(.2,.7,.2,1) }
  .menu-open .site-menu{ opacity:1; transform:none; pointer-events:auto }
  /* absolute statt fixed: backdrop-filter der Kopfzeile waere sonst der Bezugsrahmen. */
  .site-scrim{ display:block; position:absolute; left:0; right:0; top:100%; height:100vh; height:100dvh; z-index:-1;
    background:rgba(15,23,42,.22); opacity:0; transition:opacity .22s ease }
  .menu-open .site-scrim{ opacity:1 }
  .site-menu-item{ display:flex; align-items:center; justify-content:space-between; min-height:52px;
    border-bottom:1px solid var(--s-line); color:var(--s-ink); font-size:17px; font-weight:600; letter-spacing:-.01em }
  .site-menu-item[aria-current="page"]{ color:var(--s-blue) }
  .site-menu-item svg{ width:18px; height:18px; fill:none; stroke:var(--s-slate); stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
  .site-menu-lang{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:16px;
    color:var(--s-slate); font-size:14px; font-weight:600 }
  .site-menu-lang .site-lang a{ padding:6px 14px; font-size:13px; letter-spacing:0 }
}
/* Schmale Handys: nur Logo, damit "Jetzt loslegen" und der Menue-Knopf Platz haben. */
@media (max-width:399px){ .site-nav .site-wordmark{ display:none } }

/* ---------- Fusszeile ---------- */
.site-foot{ border-top:1px solid var(--s-line); padding:40px 0; color:var(--s-slate); font-size:14px }
.site-foot .site-wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px 24px }
.site-brand-sm .site-logo{ width:26px; height:26px; border-radius:7px; box-shadow:none }
.site-foot-links{ display:flex; gap:8px 18px; flex-wrap:wrap }
.site-foot-links a{ color:var(--s-slate) }
.site-foot-links a:hover{ color:var(--s-ink) }

@media (prefers-reduced-motion: reduce){
  .site-btn:active{ transform:none }
  .site-burger span, .site-menu{ transition-duration:.01s }
  .site-menu{ transform:none }
}
@media (prefers-reduced-transparency: reduce){
  .site-nav{ background:var(--s-surface); backdrop-filter:none; -webkit-backdrop-filter:none }
}
/* Dunkelmodus nur auf Seiten, die selbst einen haben (data-dark setzt der Build). */
@media (prefers-color-scheme: dark){
  .site-nav[data-dark], .site-foot[data-dark]{
    --s-ink:#F3F4F6; --s-slate:#9BA1AC; --s-line:#252B36; --s-soft:#0B0E13; --s-surface:#161A21;
  }
  .site-nav[data-dark]{ background:rgba(11,14,19,.72); border-bottom-color:rgba(255,255,255,.06) }
  .site-nav[data-dark] .site-btn-ghost:hover{ border-color:#3A4250 }
  .site-nav[data-dark] .site-menu{ background:#0B0E13; border-bottom-color:rgba(255,255,255,.08) }
  .site-nav[data-dark] .site-scrim{ background:rgba(0,0,0,.45) }
}