/* ============================================================
   Müller Garten- und Landschaftsbau — WASSER-CINEMATIC
   site.css = Brand tokens + fonts + base + nav + footer + buttons
   ============================================================ */

/* ---- Self-hosted fonts ---- */
@font-face { font-family:'Fraunces'; src:url('../fonts/fraunces-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Fraunces'; src:url('../fonts/fraunces-400-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Fraunces'; src:url('../fonts/fraunces-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Fraunces'; src:url('../fonts/fraunces-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../fonts/inter-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../fonts/inter-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../fonts/inter-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }

:root {
  --c-teal:#14464a;
  --c-teal-dark:#0d2f32;
  --c-teal-deep:#0a2528;
  --c-moss:#5a7a52;
  --c-moss-dark:#3f5a39;
  --c-stone:#cfc6b8;
  --c-cream:#f5f1e8;
  --c-cream-soft:#ece5d6;
  --c-cream-text:#d8cdb2;
  --c-ink:#1a201d;
  --c-ink-soft:#3a443e;
  --c-gold:#c9a24b;
  --c-line:rgba(26,32,29,0.12);

  --f-display:'Fraunces', Georgia, serif;
  --f-body:'Inter', system-ui, sans-serif;

  --shell:1240px;
  --gap-xs:.5rem;
  --gap-sm:1rem;
  --gap:2rem;
  --gap-lg:4rem;
  --gap-xl:7rem;

  --ease:cubic-bezier(.22,.61,.36,1);
  --r:14px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--f-body);
  color:var(--c-ink);
  background:var(--c-cream);
  line-height:1.65;
  font-size:17px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }

h1,h2,h3,h4 { font-family:var(--f-display); font-weight:500; line-height:1.08; letter-spacing:-.01em; }
h2 { font-size:clamp(2rem,4.5vw,3.4rem); }
h3 { font-size:clamp(1.4rem,2.6vw,2rem); }
p { max-width:68ch; }

.shell { max-width:var(--shell); margin-inline:auto; padding-inline:clamp(1.2rem,5vw,3rem); }
.eyebrow {
  font-family:var(--f-body); font-weight:600; font-size:.74rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--c-moss);
}
.eyebrow.on-dark { color:var(--c-gold); }

/* ---- Scroll progress ---- */
.scroll-progress {
  position:fixed; top:0; left:0; height:3px; width:100%;
  background:linear-gradient(90deg,var(--c-teal),var(--c-moss),var(--c-gold));
  transform:scaleX(0); transform-origin:0 50%; z-index:2000;
}

/* ---- Buttons ---- */
.btn {
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--f-body); font-weight:600; font-size:.95rem;
  padding:.95rem 1.8rem; border-radius:999px;
  border:1.5px solid transparent; cursor:pointer;
  transition:transform .4s var(--ease), background .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease);
  letter-spacing:.01em;
}
.btn-primary { background:var(--c-gold); color:var(--c-teal-deep); box-shadow:0 10px 30px -12px rgba(201,162,75,.7); }
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 18px 40px -14px rgba(201,162,75,.85); }
.btn-ghost { border-color:currentColor; color:var(--c-cream); }
.btn-ghost:hover { background:var(--c-cream); color:var(--c-teal-deep); transform:translateY(-3px); }
.btn-dark { background:var(--c-teal); color:var(--c-cream); }
.btn-dark:hover { background:var(--c-teal-dark); transform:translateY(-3px); }
.btn .arrow { transition:transform .4s var(--ease); }
.btn:hover .arrow { transform:translateX(4px); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center;
  transition:background .5s var(--ease), box-shadow .5s var(--ease), padding .5s var(--ease);
  padding:1.3rem 0;
}
.nav-inner {
  max-width:var(--shell); margin-inline:auto; width:100%;
  padding-inline:clamp(1.2rem,5vw,3rem);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.nav.scrolled { background:rgba(245,241,232,.92); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--c-line); padding:.85rem 0; }
.nav-brand { display:flex; align-items:center; gap:.7rem; }
.nav-logo { height:46px; width:auto; transition:height .5s var(--ease); }
.nav.scrolled .nav-logo { height:40px; }
/* white-knockout logo treatment when over dark hero */
.nav:not(.scrolled) .nav-logo {
  filter:brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0,0,0,.4));
}

.nav-menu { display:flex; align-items:center; gap:2rem; }
.nav-menu a {
  font-family:var(--f-body); font-weight:500; font-size:.95rem;
  color:var(--c-cream); position:relative; padding:.2rem 0;
  transition:color .35s var(--ease);
}
.nav.scrolled .nav-menu a { color:var(--c-ink-soft); }
.nav-menu a::after {
  content:''; position:absolute; left:0; bottom:-3px; height:2px; width:0;
  background:var(--c-gold); transition:width .35s var(--ease);
}
.nav-menu a:hover::after, .nav-menu a.active::after { width:100%; }
.nav-menu a.nav-cta {
  background:var(--c-gold); color:var(--c-teal-deep); padding:.6rem 1.4rem;
  border-radius:999px; font-weight:600;
}
.nav-menu a.nav-cta::after { display:none; }
.nav-menu a.nav-cta:hover { transform:translateY(-2px); box-shadow:0 12px 26px -12px rgba(201,162,75,.8); }

.nav-burger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; z-index:1100; }
.nav-burger span { width:26px; height:2px; background:var(--c-cream); transition:.35s var(--ease); border-radius:2px; }
.nav.scrolled .nav-burger span { background:var(--c-ink); }
.nav-mobile { display:none; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background:var(--c-teal-deep); color:var(--c-cream-text); padding:var(--gap-xl) 0 2rem; position:relative; }
.footer::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--c-gold),transparent); opacity:.5;
}
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:3rem; padding-bottom:3rem; }
.footer-brand h3 { color:var(--c-cream); font-size:1.6rem; margin-bottom:.4rem; }
.footer-brand .tag { font-style:italic; color:var(--c-gold); font-family:var(--f-display); }
.footer-brand p { font-size:.92rem; margin-top:.8rem; line-height:1.8; }
.footer-col h4 { color:var(--c-cream); font-family:var(--f-body); font-weight:600; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; margin-bottom:1rem; }
.footer-col a { display:block; font-size:.92rem; padding:.3rem 0; color:var(--c-cream-text); transition:color .3s, padding-left .3s; }
.footer-col a:hover { color:var(--c-gold); padding-left:6px; }
.footer-bottom {
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  padding-top:2rem; border-top:1px solid rgba(245,241,232,.14);
  font-size:.82rem; color:rgba(216,205,178,.7);
}
.footer-bottom a:hover { color:var(--c-gold); }
.footer .nocookie { font-size:.78rem; opacity:.6; margin-top:.6rem; }

/* ============================================================
   DEMO NOTICE PILL
   ============================================================ */
.demo-notice {
  position:fixed; left:16px; bottom:16px; z-index:1500;
  background:rgba(13,47,50,.92); color:var(--c-cream-text);
  font-family:var(--f-body); font-size:.72rem; line-height:1.4;
  padding:.6rem .9rem; border-radius:10px; max-width:260px;
  backdrop-filter:blur(8px); border:1px solid rgba(201,162,75,.3);
  box-shadow:0 8px 24px -10px rgba(0,0,0,.5);
}
.demo-notice strong { color:var(--c-gold); }

/* ============================================================
   REVEALS
   ============================================================ */
.reveal { opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in-view { opacity:1; transform:none; }
.reveal.d1 { transition-delay:.1s; }
.reveal.d2 { transition-delay:.2s; }
.reveal.d3 { transition-delay:.3s; }
.reveal.d4 { transition-delay:.4s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition-duration:.001s !important; }
  .reveal { opacity:1 !important; transform:none !important; }
  html { scroll-behavior:auto; }
}

/* ============================================================
   RESPONSIVE NAV
   ============================================================ */
@media (max-width:920px) {
  .nav-menu { display:none; }
  .nav-burger { display:flex; }
  .nav-mobile {
    display:flex; flex-direction:column; gap:.2rem;
    position:fixed; top:0; right:0; height:100vh; width:min(82vw,360px);
    background:var(--c-teal-deep); padding:6rem 2rem 2rem;
    transform:translateX(100%); transition:transform .5s var(--ease);
    z-index:1050; box-shadow:-20px 0 60px -20px rgba(0,0,0,.6);
  }
  .nav-mobile.open { transform:translateX(0); }
  .nav-mobile a {
    color:var(--c-cream); font-family:var(--f-display); font-size:1.3rem;
    padding:.8rem 0; border-bottom:1px solid rgba(245,241,232,.1);
  }
  .nav-mobile a.nav-cta { color:var(--c-gold); }
  .nav.menu-open .nav-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); background:var(--c-cream); }
  .nav.menu-open .nav-burger span:nth-child(2){ opacity:0; }
  .nav.menu-open .nav-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); background:var(--c-cream); }
  .footer-grid { grid-template-columns:1fr 1fr; gap:2rem; }
}
@media (max-width:560px) {
  .footer-grid { grid-template-columns:1fr; }
  body { font-size:16px; }
}