@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Inter:wght@300;400;500;600&display=swap');

:root{
  --black:#070707;
  --dark:#0d0d0d;
  --gold:#d8b477;
  --gold2:#b88c4b;
  --text:#ffffff;
  --muted:#cfcfcf;
  --border:rgba(255,255,255,.13);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--text);font-family:Inter,Arial,sans-serif}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

.nav{position:fixed;top:0;left:0;width:100%;z-index:1000;display:flex;align-items:center;justify-content:space-between;padding:18px 6%;background:rgba(5,5,5,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:14px;color:var(--gold);text-transform:uppercase;letter-spacing:3px;font-size:14px;font-weight:600}
.brand img{width:62px;height:40px;object-fit:contain}
.navlinks{display:flex;gap:32px;font-size:14px;font-weight:500}
.navlinks a{position:relative;opacity:.92}
.navlinks a::after{content:"";position:absolute;left:0;bottom:-8px;width:0;height:1px;background:var(--gold);transition:.3s}
.navlinks a:hover::after{width:100%}
.menu-btn{display:none;background:none;border:1px solid var(--border);color:#fff;font-size:22px;padding:8px 12px}
.btn{display:inline-block;background:linear-gradient(135deg,var(--gold),#e8c894);color:#090909;border:none;padding:15px 28px;border-radius:2px;font-weight:700;cursor:pointer;transition:.25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(216,180,119,.22)}
.ghost-btn{display:inline-block;border:1px solid var(--border);padding:14px 26px;color:#fff}

.hero{min-height:100vh;background:url('Bilder/villa.jpg') center/cover no-repeat;position:relative;display:flex;align-items:center;padding:130px 6% 80px;overflow:hidden}
.overlay{position:absolute;inset:0;background:linear-gradient(90deg,#050505 0%,rgba(5,5,5,.86) 35%,rgba(5,5,5,.25) 100%)}
.hero-content{position:relative;max-width:620px}
.eyebrow{color:var(--gold);text-transform:uppercase;letter-spacing:4px;font-size:12px;font-weight:700;margin:0 0 16px}
h1,h2{font-family:'Cormorant Garamond',serif;font-weight:700;margin:0;color:#fff}
h1{font-size:clamp(52px,7vw,92px);line-height:.92}
h2{font-size:clamp(38px,5vw,58px);line-height:1.02}
p{line-height:1.85;color:var(--muted)}
.gold-line{width:90px;height:2px;background:var(--gold);margin:28px 0}
.hero-actions{display:flex;gap:18px;align-items:center;margin-top:32px;flex-wrap:wrap}

.section{padding:110px 6%;background:var(--black)}
.split{display:grid;grid-template-columns:1fr 1.15fr;gap:70px;align-items:center}
.text{max-width:560px}
.image-frame{height:560px;overflow:hidden;border:1px solid var(--border);background:#111}
.image-frame img{width:100%;height:100%;object-fit:cover;transition:1.2s}
.image-frame:hover img{transform:scale(1.04)}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:38px}
.section-head p{max-width:560px}
.text-link{color:var(--gold);font-weight:600}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{background:#111;border:1px solid var(--border);overflow:hidden;transition:.3s}
.card:hover{transform:translateY(-7px);border-color:rgba(216,180,119,.45)}
.card img{width:100%;height:270px;object-fit:cover}
.card div{padding:24px}
.card h3{margin:0 0 10px;font-size:21px}
.card strong{color:var(--gold)}

.services-section{background:linear-gradient(180deg,#080808,#0d0d0d)}
.center{text-align:center;max-width:720px;margin:0 auto}
.services{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:55px}
.service{border:1px solid var(--border);padding:38px 28px;background:rgba(255,255,255,.03);min-height:230px;transition:.3s}
.service:hover{border-color:rgba(216,180,119,.5);transform:translateY(-5px)}
.service span{color:var(--gold);letter-spacing:3px;font-size:12px;font-weight:700}
.service h3{font-size:22px;margin:18px 0 10px}

.contact{position:relative;background:url('Bilder/fernsehturm.jpg') center/cover no-repeat;padding:120px 6%}
.contactbox{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.contact-data{margin-top:28px}
form{display:grid;gap:14px;background:rgba(5,5,5,.45);border:1px solid var(--border);padding:26px;backdrop-filter:blur(10px)}
input,textarea{width:100%;padding:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;outline:none;font-family:inherit}
textarea{height:150px;resize:none}
input::placeholder,textarea::placeholder{color:#bbb}
footer{padding:28px 6%;display:flex;justify-content:space-between;gap:20px;background:#050505;color:#888;border-top:1px solid var(--border)}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

@media(max-width:980px){
  .nav{padding:16px 5%}.navlinks,.nav-btn{display:none}.menu-btn{display:block}.nav.open .navlinks{display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;background:#070707;padding:24px 6%;border-bottom:1px solid var(--border)}
  .split,.cards,.services,.contactbox{grid-template-columns:1fr}
  .section{padding:82px 5%}.hero{padding:130px 5% 70px}.image-frame{height:420px}.section-head{display:block}footer{flex-direction:column}
}