:root{
  --bg:#b8d4c4;        /* dunkleres Grün für den Hintergrund */
  --fg:#0d1b12;        /* Text bleibt dunkelgrün */
  --muted:#3d5145;     /* etwas kräftiger gedämpfter Grünton */
  --brand:#3ba36c;     /* Akzentgrün */
  --brand-700:#2b7a51; /* dunkleres Grün für Hover */
  --card:#f0f8f4;       /* Karten weiterhin weiß */
  --ring: rgba(59,163,108,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji', 'Segoe UI Symbol';
  color:var(--fg);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
.container{width:min(1100px, 92%); margin-inline:auto}
.site-header{
  position:sticky; top:0; z-index:10; background:rgba(240,248,244,.7);
  backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid rgba(0,0,0,.05);
}
.site-header[data-shadow]{box-shadow:0 0 0 rgba(0,0,0,0)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:.8rem 0}
.brand{font-weight:700; letter-spacing:.2px; text-decoration:none; color:var(--fg); font-size:1.15rem}
.brand span{color:var(--brand)}
.menu{display:flex; gap:1rem; align-items:center}
.menu a{color:var(--fg); text-decoration:none; padding:.5rem .6rem; border-radius:.5rem}
.menu a:hover{background:rgba(59,163,108,.12)}
.hamburger{display:none; background:none; border:0; padding:.5rem; cursor:pointer}
.hamburger span{display:block; width:24px; height:2px; background:var(--fg); margin:5px 0; border-radius:1px}

.hero{padding:5rem 0}
.hero-inner{display:grid; grid-template-columns: 1.2fr .8fr; align-items:center; gap:2rem}
.hero-copy h1{font-size:clamp(2rem, 3.5vw, 3rem); line-height:1.15; margin:0 0 .6rem}
.hero-copy p{color:var(--muted); max-width:52ch}
.cta{display:flex; gap:.8rem; margin-top:1rem}
.btn{display:inline-block; padding:.8rem 1rem; border-radius:.8rem; text-decoration:none; border:1px solid rgba(0,0,0,.08)}
.btn.primary{background:var(--brand); color:white; border-color:var(--brand)}
.btn.primary:hover{background:var(--brand-700)}
.btn.ghost{background:transparent; color:var(--fg)}
.btn:hover{transform:translateY(-1px)}

.blocks{display:grid; gap:1rem; grid-template-columns: repeat(3, 1fr); margin:3rem auto}
.card{background:var(--card); border:1px solid rgba(0,0,0,.06); border-radius:1rem; padding:1.2rem; box-shadow:0 10px 22px -20px rgba(0,0,0,.5)}
.card h3{margin-top:.2rem}
.grid-3{display:grid; grid-template-columns: repeat(3,1fr); gap:1rem}

.split{display:grid; gap:2rem; grid-template-columns: 1fr 1fr; align-items:center; margin:4rem auto}
.split .split-copy p{color:var(--muted)}
.checklist{padding-left:1.2rem}
.checklist li{margin:.4rem 0}

.page-hero.small{padding:3.5rem 0 1.5rem}
.page-hero .container p{color:var(--muted)}

.two-col{display:grid; grid-template-columns: .9fr 1.1fr; gap:2rem; align-items:start; margin:2rem auto}
.round{border-radius:1rem}

.contact{display:grid; grid-template-columns: 1fr .9fr; gap:1.5rem; align-items:start; margin:2rem auto}
label{display:block; font-weight:500; margin:.6rem 0}
input, textarea{width:100%; padding:.8rem; border-radius:.7rem; border:1px solid rgba(0,0,0,.15); outline:none; background:white}
input:focus, textarea:focus{box-shadow:0 0 0 4px var(--ring); border-color:var(--brand)}
.form-row{display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:.6rem}
.checkbox{font-weight:400}
iframe{width:100%; height:300px; border:0; border-radius:1rem}

.site-footer{margin-top:4rem; padding:2rem 0; background:#f0f8f4; border-top:1px solid rgba(0,0,0,.06)}
.site-footer h4{margin:.2rem 0 .6rem}
.site-footer ul{list-style:none; padding:0; margin:0}
.site-footer li{margin:.3rem 0}
.legal{margin-top:1rem; display:flex; justify-content:center; color:var(--muted)}

.legal-text{background:white; padding:1.2rem; border-radius:1rem; border:1px solid rgba(0,0,0,.06); margin-bottom: 1.5rem;}

.price p{color:var(--muted)}

/* Über uns: Split-Layout */
.about-split {
  display: grid;
  grid-template-columns: 1fr 1.2fr; /* Desktop: Bild links, Text rechts */
  gap: 2rem;
  align-items: stretch;
  margin: 3rem auto;
}

.about-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* Bild füllt die komplette Spalte */
  border-radius: 1rem;
}

.about-text {
  max-width: 800px;
}

/* Responsive */
@media (max-width: 900px){
  .hero-inner{grid-template-columns: 1fr}
  .blocks{grid-template-columns: 1fr}
  .split{grid-template-columns: 1fr}
  .two-col{grid-template-columns: 1fr}
  .grid-3{grid-template-columns: 1fr}
  .contact{grid-template-columns: 1fr}
  .menu{
    display:none;
    position:absolute;
    top:64px;
    right:4%;
    background:white;
    border:1px solid rgba(0,0,0,.08);
    padding:.6rem;
    border-radius:.8rem;
    flex-direction:column;
    min-width:220px
  }
  .hamburger{display:block}
  .menu.open{display:flex}

  /* Mobile-Layout für Über uns */
  .about-split {
    grid-template-columns: 1fr;   /* nur eine Spalte */
  }
  .about-image {
    grid-row: 1;   /* Bild nach oben */
  }
  .about-text {
    grid-row: 2;   /* Text darunter */
  }
  .about-image img {
    width: 100%;
    aspect-ratio: 1/1;   /* quadratisch */
    object-fit: cover;
    border-radius: 1rem;
  }
}
.saama-box {
  margin: 3rem auto;
  padding: 2rem;
  font-size: 1.05rem;
  line-height: 1.7;
}

.saama-box h2 {
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--brand-700);
}

.saama-box p {
  margin-bottom: 1.2rem;
}
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--brand);
  color: white;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
}
.cookie-banner p {
  margin: 0;
  font-size: 0.9rem;
}
.cookie-banner a {
  color: white;
  text-decoration: underline;
}
.cookie-buttons {
  display: flex;
  gap: .5rem;
}
.cookie-banner button {
  background: white;
  color: var(--brand);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: .5rem;
  cursor: pointer;
}
.cookie-banner button:hover {
  background: var(--brand-700);
  color: white;
}