/* Basis: Reset, geteilte Komponenten (Header, Nav, Footer) und Utilities.
   Auf jeder Seite eingebunden – seitenspezifische Regeln stehen in der jeweiligen Seiten-CSS. */

/* --- Reset & Grundlagen --- */
html, body { margin:0; padding:0; background:#faf6f0; }
body { font-family:'Karla', sans-serif; color:#34302b; --accent:#c9744a; }
html { scroll-behavior:smooth; }
* { box-sizing:border-box; }
a { color:#c9744a; text-decoration:none; }
a:hover { color:#a55532; }
input::placeholder, textarea::placeholder { color:#b3a89e; }

/* --- Seiten-Wrapper --- */
.page { min-height:100vh; background:#faf6f0; }
.page--flex { display:flex; flex-direction:column; }

/* --- Utilities --- */
.amber { color:#d99c6a; }
.ink { color:#34302b; }

/* --- Eyebrow (Kicker über Überschriften) --- */
.eyebrow { color:var(--accent); font-weight:700; font-size:14px; letter-spacing:0.1em; text-transform:uppercase; }
.eyebrow--row { display:flex; align-items:center; gap:10px; }
.eyebrow--light { color:#d99c6a; }
.eyebrow-line { width:28px; height:2px; background:var(--accent); border-radius:2px; }

/* --- Header --- */
.site-header { position:sticky; top:0; z-index:50; background:rgba(250,246,240,0.94); backdrop-filter:blur(10px); border-bottom:1px solid rgba(34,29,24,0.08); }
.site-header--plain { position:static; backdrop-filter:none; }
.header-inner { max-width:1140px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.header-inner--start { justify-content:flex-start; gap:10px; }

/* --- Marke / Logo --- */
.brand { display:flex; align-items:center; gap:10px; color:#221d18; }
.brand-logo { width:38px; height:38px; border-radius:11px; background:var(--accent); display:grid; place-items:center; color:#fff; }
.brand-name { font-family:'Bricolage Grotesque', sans-serif; font-weight:700; font-size:20px; }
.brand-name strong { color:var(--accent); }

/* --- Navigation --- */
.main-nav { display:flex; gap:26px; align-items:center; font-size:15px; font-weight:700; }
.navlink { color:#34302b; }
.navlink--active { color:var(--accent); }
.navlink:hover { color:var(--accent) !important; }
.nav-cta { background:#221d18; color:#faf6f0; padding:10px 20px; border-radius:999px; font-weight:700; }
.nav-cta:hover { background:var(--accent) !important; color:#fff !important; }
.back-link { font-weight:700; font-size:15px; }

/* --- Footer --- */
.site-footer { background:#1a1612; color:rgba(250,246,240,0.6); font-size:14px; }
.footer-inner { max-width:1140px; margin:0 auto; padding:28px 24px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.footer-links { display:flex; gap:20px; }
.footer-link { color:rgba(250,246,240,0.6); }
.footer-link:hover { color:#d99c6a !important; }

/* --- Responsive: Nav-Textlinks ausblenden (CTA bleibt sichtbar) --- */
@media (max-width:900px){
  .nav-links { display:none !important; }
}