/* ==========================================================================
   WeWa Immobilien-Management – Website
   Design-System: eigenständige Palette (Graphit/Waldgrün/Messing), system-fonts
   ========================================================================== */

:root{
  --ink:         #1c2624;
  --slate:       #435049;
  --muted:       #6d7871;
  --line:        #e2e6e2;
  --bg:          #ffffff;
  --bg-soft:     #f4f6f3;
  --bg-brand:    #eef2ee;

  --green:       #2f6f62;
  --green-600:   #255a4f;
  --green-700:   #1c453d;
  --green-900:   #122b26;
  --gold:        #d9a441;
  --gold-600:    #bd8a2c;

  --radius:      14px;
  --radius-lg:   22px;
  --shadow-sm:   0 1px 3px rgba(18,43,38,.07), 0 1px 2px rgba(18,43,38,.08);
  --shadow:      0 10px 30px -12px rgba(18,43,38,.22);
  --shadow-lg:   0 26px 60px -24px rgba(18,43,38,.32);
  --maxw:        1140px;
  --ease:        cubic-bezier(.22,.61,.36,1);
  --header-h:    78px;

  --font:        system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head:   Georgia, "Times New Roman", serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);
  font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--green-700);text-decoration:none;transition:color .2s var(--ease)}
a:hover{color:var(--gold-600)}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--green-900);line-height:1.18;margin:0 0 .5em;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(2rem,4.8vw,3.2rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.3rem)}
h3{font-size:clamp(1.15rem,1.9vw,1.4rem)}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.1em;padding-left:1.3em}
li{margin:.35em 0}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.1rem,4vw,2rem)}
.section{padding:clamp(3.2rem,6.5vw,6rem) 0}
.section--soft{background:var(--bg-soft)}
.section--brand{background:var(--bg-brand)}
.section--dark{background:linear-gradient(150deg,var(--green-700),var(--green-900));color:#eaf1ee}
.section--dark h1,.section--dark h2,.section--dark h3{color:#fff}
.section--dark p{color:#cfdcd6}
.narrow{max-width:720px}
.eyebrow{display:inline-block;font-weight:700;font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-600);margin-bottom:1rem}
.section--dark .eyebrow{color:var(--gold)}
.lead{font-size:1.15rem;color:var(--slate);line-height:1.7}
.section--dark .lead{color:#d5e2dc}
.center{text-align:center}
.center .eyebrow{display:block}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;font-weight:600;
  font-size:1rem;padding:.85em 1.7em;border-radius:999px;border:2px solid transparent;
  cursor:pointer;transition:all .25s var(--ease);white-space:nowrap;line-height:1;
}
.btn--primary{background:var(--gold);color:#241a06;box-shadow:0 8px 20px -8px rgba(217,164,65,.6)}
.btn--primary:hover{background:var(--gold-600);color:#241a06;transform:translateY(-2px)}
.btn--ghost{border-color:var(--green);color:var(--green-700);background:transparent}
.btn--ghost:hover{background:var(--green);color:#fff;transform:translateY(-2px)}
.btn--light{background:#fff;color:var(--green-800,var(--green-700))}
.btn--light:hover{background:var(--bg-brand)}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--header-h)}
.brand{font-family:var(--font-head);font-weight:700;font-size:1.3rem;color:var(--green-900);display:flex;align-items:center;gap:.5rem}
.brand span{color:var(--gold-600)}
.nav-links{display:flex;align-items:center;gap:.2rem;list-style:none;margin:0;padding:0}
.nav-links a{color:var(--slate);font-weight:500;font-size:.98rem;padding:.6em .9em;border-radius:8px}
.nav-links a:hover{color:var(--green-800,var(--green-700));background:var(--bg-brand)}
.nav-cta{margin-left:.5rem}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:.5rem;color:var(--green-800,var(--green-700))}
.nav-toggle svg{width:26px;height:26px}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(160deg,#fbfcfb 0%,var(--bg-brand) 100%)}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 60% at 85% 0%,rgba(47,111,98,.16),transparent 70%),
             radial-gradient(50% 50% at 0% 100%,rgba(217,164,65,.14),transparent 70%);
}
.hero-inner{position:relative;padding:clamp(3.4rem,8vw,6.5rem) 0 clamp(2.6rem,6vw,4rem);text-align:center}
.hero h1 span{color:var(--green)}
.hero .claims{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:1.6rem 0;padding:0;list-style:none}
.hero .claims li{
  font-weight:600;font-size:.9rem;color:var(--green-800,var(--green-700));
  background:#fff;border:1px solid var(--line);padding:.4em 1.1em;border-radius:999px;box-shadow:var(--shadow-sm);
}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem;margin-top:1.6rem}

/* ---------- Leistungen ---------- */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.4rem;margin-top:2.4rem}
.service-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:2rem 1.7rem;
  box-shadow:var(--shadow-sm);transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.service-card .num{font-family:var(--font-head);font-weight:700;font-size:.9rem;color:var(--gold-600);letter-spacing:.08em}
.service-card h3{margin-top:.4em}
.service-card p{color:var(--slate);margin-bottom:0;font-size:.98rem}

/* ---------- Über uns / Split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(max-width:820px){.split{grid-template-columns:1fr}}
.stat-row{display:flex;gap:2rem;flex-wrap:wrap;margin-top:1.6rem}
.stat b{font-family:var(--font-head);font-size:1.9rem;color:var(--green-900);display:block}
.stat small{color:var(--muted);font-size:.86rem}

/* ---------- Kontakt ---------- */
.contact-box{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.6rem,4vw,2.6rem);
  box-shadow:var(--shadow-sm);
}
.contact-box dl{display:grid;grid-template-columns:auto 1fr;gap:.4em 1em;margin:0}
.contact-box dt{color:var(--muted);font-weight:600}
.contact-box dd{margin:0}

/* ---------- Footer ---------- */
.site-footer{background:var(--green-900);color:#cfdcd6;padding:2.6rem 0}
.site-footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.2rem;align-items:center}
.site-footer a{color:#eaf1ee}
.site-footer a:hover{color:var(--gold)}
.footer-links{display:flex;gap:1.4rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.footer-note{font-size:.85rem;color:#9db3ab}

/* ---------- Notiz-Box (Platzhalter-Hinweis) ---------- */
.draft-note{
  background:#fff7e8;border:1px solid #f0d9a8;color:#6b5416;border-radius:var(--radius);
  padding:1em 1.3em;font-size:.92rem;margin:1.5rem 0;
}

/* ---------- Mobile Nav ---------- */
@media(max-width:900px){
  .nav-links{position:fixed;inset:var(--header-h) 0 0 0;background:#fff;flex-direction:column;align-items:stretch;
    padding:1.2rem;gap:.3rem;overflow-y:auto;transform:translateX(100%);transition:transform .3s var(--ease);}
  .nav-links.open{transform:translateX(0)}
  .nav-links a{padding:.9em 1em;font-size:1.05rem}
  .nav-toggle{display:block}
  .nav-cta{margin:.6rem 0 0}
}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}