/* Makrona Globals — site-wide reset, fonts, and shared chrome primitives. * * Loaded by every page after tokens.css. Per-feature stylesheets follow this * in the cascade and may override anything here. * * Keep this file small and stable. New patterns belong in feature-level styles.css * until they're proven to be reused across 3+ features. */ /* ── Reset ─────────────────────────────────────────────────── */ * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html { scroll-behavior: smooth; } body { font-family: var(--mk-font-sans); color: var(--mk-text); background: var(--mk-white); line-height: var(--mk-leading-relaxed); overflow-x: hidden; max-width: 100vw; } img { max-width: 100%; height: auto; display: block; } a { text-decoration: none; color: inherit; } /* ── Layout ───────────────────────────────────────────────── */ .container { max-width: var(--mk-container-max); margin: 0 auto; padding: 0 var(--mk-space-6); } /* ── Nav (used by every page) ─────────────────────────────── */ .nav { position: sticky; top: 0; z-index: var(--mk-z-sticky); background: var(--mk-white); padding: 0 var(--mk-space-6); box-shadow: 0 2px 12px rgba(4, 41, 42, 0.08); border-bottom: 1px solid var(--mk-border); } .nav-inner { max-width: var(--mk-container-max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 64px; } .nav-logo img { height: 44px; } .nav-links { display: flex; align-items: center; gap: 28px; } .nav-links a { color: var(--mk-text); font-weight: var(--mk-weight-medium); font-size: 0.95rem; transition: color 0.2s; } .nav-links a:hover, .nav-links a.active { color: var(--mk-orange); } /* Active-link styling driven by + . * Set on each page so the shared nav partial doesn't need to know which page * it's on. Pages can pick the active key per route. */ body[data-active="home"] .nav-links a[data-key="home"], body[data-active="komponenten"] .nav-links a[data-key="komponenten"], body[data-active="projekte"] .nav-links a[data-key="projekte"], body[data-active="konto"] .nav-links a[data-key="konto"], body[data-active="warenkorb"] .nav-links a[data-key="warenkorb"] { color: var(--mk-orange); } .nav-links a.btn-primary { background: var(--mk-orange); color: var(--mk-green); } .nav-links a.btn-primary:hover { background: var(--mk-green); color: var(--mk-white); } /* ── Buttons ──────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: var(--mk-space-2); padding: var(--mk-space-3) var(--mk-space-6); border-radius: var(--mk-radius-md); font-weight: var(--mk-weight-semibold); font-size: 0.95rem; border: none; cursor: pointer; transition: all 0.2s; } .btn-primary { background: var(--mk-orange); color: var(--mk-white); } .btn-primary:hover { background: var(--mk-green); color: var(--mk-white); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(240, 123, 73, 0.35); } .btn-dark { background: var(--mk-green); color: var(--mk-white); } /* ── Hamburger (mobile nav) ───────────────────────────────── */ .hamburger { display: none; cursor: pointer; } .hamburger span { display: block; width: 24px; height: 2px; background: var(--mk-green); margin: 5px 0; transition: 0.3s; } @media (max-width: 768px) { .nav-links { display: none; } .nav-links.open { display: flex; flex-direction: column; position: absolute; top: 64px; left: 0; right: 0; background: var(--mk-white); padding: var(--mk-space-6); box-shadow: var(--mk-shadow-md); gap: var(--mk-space-4); } .hamburger { display: block; } } /* ── Inline-SVG icons (Lucide-style) ──────────────────────── */ /* All icons use width="1em" height="1em" — they inherit font-size from * their parent and currentColor follows the parent's color. */ svg[aria-hidden="true"] { flex-shrink: 0; }