/* styles.css */
:root{
  --bg: #f8f5e9; /* warmes Hellbeige */
  --accent: #d4b483; /* warmer Goldton */
  --accent2: #e8e1d1; /* helles Beige */
  --text: #333;
  --maxw: 1100px;
  --radius: 10px;
}
*{box-sizing:border-box}
body{
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  margin:0;
  line-height:1.6;
}
.container{max-width:var(--maxw); margin:0 auto; padding:0 1rem;}
.site-header{background:var(--accent2); border-bottom:1px solid #d0c4b6; position:sticky; top:0; z-index:10;}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:0.75rem 0;}
.logo{font-family:'Cormorant Garamond', serif; font-size:1.25rem; color:var(--text); text-decoration:none;}
.main-nav{display:flex; gap:1rem;}
.main-nav a{color:var(--text); text-decoration:none; padding:0.5rem;}
.menu-toggle{display:none; background:none; border:none; font-size:1.25rem;}
.hero{
  background-color:var(--accent2);
  background-image:url('../images/hero.png');
  background-size:cover;
  background-position:center;
  padding:4rem 0;
  color:#111;
  text-align:center;
}
.hero .lead{max-width:700px; margin:0.5rem auto 1.5rem;}
.btn{background:var(--accent); padding:0.75rem 1.1rem; border-radius:999px; color:#fff; text-decoration:none; display:inline-block;}
.services .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1rem;}
article{background:#fff; padding:1rem; border-radius:var(--radius); box-shadow:0 4px 10px rgba(0,0,0,0.05);}
.center{text-align:center;}
.site-footer{padding:1.5rem 0; background:var(--accent2); border-top:1px solid #d0c4b6; margin-top:2rem; text-align:center;}
.muted{color:#666;}
.link{color:var(--text); text-decoration:underline;}
.contact-form{max-width:700px; margin:1rem 0;}
.contact-form label{display:block; margin-bottom:0.75rem;}
.contact-form input, .contact-form textarea{width:100%; padding:0.6rem; border:1px solid #ddd; border-radius:6px; font-size:1rem;}
.contact-form button{margin-top:0.5rem;}
@media (max-width:900px){
  .services .grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:600px){
  .main-nav{display:none; flex-direction:column;}
  .menu-toggle{display:block;}
  .services .grid{grid-template-columns:1fr;}
  .hero{padding:3rem 0;}
}