/* ============================================================
   Lumis Redesign-Skin — wird NACH main.css/Komponenten-CSS geladen.
   Vereinheitlicht Schrift, Logo, Buttons, Header & Farbe mit der Startseite.
   ============================================================ */
:root{
  --font-display:"Poppins",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)}

/* Nav-Links dürfen nie umbrechen — Schrift/Abstand schrumpft stattdessen (wie Startseite) */
.nav{gap:clamp(10px,1.6vw,26px)}
.nav-links{gap:clamp(2px,.6vw,6px)}
.nav-links a:not(.btn){font-size:clamp(.76rem,.5vw + .58rem,.92rem);padding:8px 10px;white-space:nowrap}
.nav-links a.btn{white-space:nowrap;flex-shrink:0}
@media(min-width:1024px) and (max-width:1180px){.nav-links a:not(.btn){padding:8px 7px}}

/* 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}

/* Rechner-Pills mit SVG-Icons (statt Emoji) — auf Unterseiten wie Startseite */
.cw-pill{display:inline-flex;align-items:center;gap:7px}
.cw-pill svg{width:16px;height:16px;flex-shrink:0}