/* assets/css/styles.css — modern minimalist theme (fixed) */
:root{
  --ink:#0b0d0f;
  --muted:#64748b;
  --line:#e5e7eb;
  --brand:#2563eb;
  --brand-ink:#e6f0ff;
  --bg:#ffffff;
  --radius:16px;
  --container:1100px;

  --fs-0:12px;
  --fs-1:14px;
  --fs-2:18px;
  --fs-3:22px;
  --fs-4:36px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, -apple-system, Segoe UI, Roboto, Helvetica, Arial, system-ui;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto}

.container{max-width:var(--container); margin:0 auto; padding:0 20px}
.measure{max-width:780px}

.site-header{position:sticky; top:0; background:#fff; border-bottom:1px solid var(--line); z-index:20}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:18px 0}
.logo{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:12px; background:var(--ink); color:#fff;
  font-weight:800; letter-spacing:.04em;
}
.nav{list-style:none; margin:0; padding:0; display:flex; gap:12px}
.nav a{display:inline-block; padding:8px 12px; border-radius:10px; color:var(--ink)}
.nav a.active{background:var(--ink); color:#fff}

.section{padding:36px 0}
.section.alt{background:#f8fafc}

.btn{appearance:none; border:1px solid var(--ink); background:var(--ink); color:#fff;
  padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:600}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn:hover{opacity:.95}

.hero-slim{
  background:linear-gradient(180deg,#f8fafc,#fff);
  border-bottom:1px solid var(--line);
  padding:36px 0 18px;
}
.eyebrow{ text-transform:uppercase; letter-spacing:.12em; color:var(--muted); font-weight:600; font-size:12px; margin:0 0 6px 0 }
.lead{color:var(--muted); font-size:var(--fs-2)}

.badge-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px }
.badge{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px;
  border:1px solid var(--line); border-radius:999px; background:#fff }

.service-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:16px }
.card{ position:relative; border-radius:20px; background:#fff; padding:18px; border:1px solid var(--line) }
.service-card h3{ margin-top:6px }
.klist{ padding-left:18px; margin:8px 0 0 0 }
.klist li{ margin:6px 0 }
.mini{ font-size:var(--fs-1); color:var(--muted) }

.banner{ margin:24px 0; background:#0b0d0f; color:#fff; border-radius:16px; padding:18px }
.banner .row{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap }
.banner .btn{ background:#fff; color:#0b0d0f; border-color:#fff }

.footer-grid{display:grid; grid-template-columns: 1fr 1fr; gap:24px; padding:28px 0}
.list-plain{list-style:none; padding:0; margin:0}
.contact-form label{display:block; margin:10px 0}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea{width:100%; padding:12px 12px; border:1px solid var(--line); border-radius:12px; outline: none}
.contact-form input:focus, .contact-form textarea:focus{border-color:#3b82f6; box-shadow:0 0 0 3px #3b82f633}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.checkbox{display:flex; gap:8px; align-items:flex-start}
.checkbox input{transform:translateY(3px)}
.small{font-size:var(--fs-1)}
.muted{color:var(--muted)}
.hp{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.legal{display:flex; gap:16px; border-top:1px solid var(--line); padding:12px 0; margin-top:10px}

@media (max-width: 900px){
  .footer-grid{grid-template-columns: 1fr}
  .grid-2{grid-template-columns:1fr}
}

/* Projekte-Link verstecken, solange keine Referenzen veröffentlicht sind */
.nav a[href$="projekte.html"]{ display:none !important; }

/* Brand logo image */
.brand{display:inline-flex; align-items:center}
.brand-logo{width:40px; height:40px; border-radius:8px; display:block}

/* Lighter buttons */
.btn{border:1px solid #B59E86; background:#B59E86; color:#fff;}
.btn.ghost{background:transparent; color:#B59E86; border-color:#B59E86}
.btn.ghost:hover{background:#E6D7C4}

/* Banner tone */
.banner{ background:#E6D7C4; color:#3A3630 }
.banner .btn{ background:#B59E86; color:#fff; border-color:#B59E86 }

/* Sand/Beige Theme */
:root{
  --bg:#F4EEE6;
  --surface:#EFE5D8;
  --sand:#E6D7C4;
  --taupe:#C9B39B;
  --accent:#B59E86;
  --ink:#3A3630;
  --muted:#6F6A62;
  --line:#E6DCCF;
  --brand:#B59E86;
  --brand-ink:#F7F2EC;
}
body{background:var(--bg); color:var(--ink)}
.section{background:var(--surface)}
.card{background:#fff; border:1px solid var(--line)}
.hero, .hero-slim{
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(181,158,134,0.12), transparent 60%),
    radial-gradient(1000px 500px at 120% 20%, rgba(201,179,155,0.08), transparent 60%),
    var(--bg);
}
.site-header{background:rgba(244,238,230,.85); backdrop-filter:saturate(1.1) blur(8px); border-bottom:1px solid var(--line)}
.site-footer{background:var(--surface); border-top:1px solid var(--line)}