/* ============================================================
   Lumis Redesign-Skin — wird NACH main.css/Komponenten-CSS geladen.
   Vereinheitlicht Schrift, Logo, Buttons, Header & Farbe mit der Startseite.
   ============================================================ */
:root{
  --font-display:"Bricolage Grotesque",system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --off-white:#FAF8F5;
}
html,body{overflow-x:clip}
body{background:#FAF8F5;max-width:100%}

/* Buttons: Pill + Display-Schrift (wie Startseite) */
.btn{border-radius:999px;font-family:var(--font-display);font-weight:700}

/* Header hell statt navy (wie Startseite) */
.site-header{background:rgba(250,248,245,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.nav-links a:not(.btn){color:var(--muted)}
.nav-links a:not(.btn):hover{color:var(--navy);background:rgba(18,31,59,.05)}
.nav-toggle span{background:var(--navy)}

/* Logo-Lockup: navy Kachel + Poppins „Energie", eng am Logo */
.nav-logo{gap:7px}
.logo-img{border-radius:10px;height:46px}
.logo-word{font-family:"Poppins",system-ui,sans-serif;font-weight:700;font-size:1.5rem;letter-spacing:-.01em;line-height:1;color:var(--navy)}
.mobile-menu-head .logo-word,.footer-brand .logo-word{color:#fff}
.footer-brand{gap:9px}
.footer-brand .logo-img{height:50px;box-shadow:0 0 0 1px rgba(255,255,255,.16)}
.footer-brand .logo-word{font-size:1.6rem}
@media(max-width:560px){.logo-img{height:42px}.logo-word{font-size:1.35rem}}

/* Zahlen dezent in Mono */
.sp-num,.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}