:root{--green:#A7C4A0;--beige:#F3E9DD;--grey:#7D8A8F;--ocker:#E5B66C;--bg:white;--text:#222;--muted:#5b666b;--radius:16px;--shadow:0 8px 24px rgba(0,0,0,.08)}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:24px}

header.site{position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:saturate(120%) blur(6px);border-bottom:1px solid #eee;z-index:10}
header .inner{display:flex;align-items:center;gap:20px;justify-content:space-between}
.brand{display:flex;align-items:center;gap:18px}
nav a{padding:10px 12px;border-radius:10px}
nav a:hover{background:#f3f5f7}

/* =========================
   HERO (Desktop/Default)
   ========================= */
.hero{position:relative;min-height:62vh;display:grid;place-items:center;color:#0f1a12;overflow:hidden;border-bottom:1px solid #eee}

.hero .scrim{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(243,233,221,.30) 0%, rgba(255,255,255,.48) 60%);
}

/* Desktop: etwas schmaler, verdeckt weniger Foto */
.hero .content{
  position:relative;
  text-align:center;
  padding:24px;
  max-width:640px;

  background: rgba(255,255,255,.62);
  backdrop-filter: blur(4px) saturate(115%);
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
  z-index:2;
}

.hero h1{
  font-size:clamp(26px,4.2vw,44px);
  margin:0 0 10px 0;
  letter-spacing:.2px
}

.hero p.sub{
  font-size:clamp(15px,2.1vw,18px);
  color: rgba(10,18,12,.78);
  font-weight: 500;
  text-shadow: 0 1px 0 rgba(255,255,255,.65);
  margin:0 0 18px 0;
  line-height:1.45;

  max-width:520px;          /* <- macht den Text enger */
  margin-left:auto;
  margin-right:auto;
}

.buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{padding:12px 18px;border-radius:999px;border:1px solid #ddd;background:white;box-shadow:var(--shadow);font-weight:600}
.btn.primary{background:var(--ocker);border-color:var(--ocker)}
.btn.green{background:var(--green);border-color:var(--green)}

.grid{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.grid{grid-template-columns:1fr}}

.card{background:white;border:1px solid #eee;border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.card h3{margin:0 0 8px 0}
.pill{display:inline-block;background:var(--beige);padding:6px 10px;border-radius:999px;font-size:12px;color:#6a6a6a;border:1px solid #eadbca}
section{padding:44px 0}
.section-title{font-size:22px;margin:0 0 14px 0}
.muted{color:var(--muted)}
footer{background:#0e1511;color:#dfe7e2;padding:28px 0;margin-top:40px}
footer a{color:#dfe7e2;text-decoration:underline}

.site-logo{
  height: clamp(70px, 9vw, 140px);
  width: auto;
  display:block;
}

/* Desktop: Content minimal höher setzen (dezent) */
@media (min-width: 900px){
  .hero .content{ transform: translateY(-22px); }
}

/* =========================
   HERO DIASHOW
   ========================= */
.slideshow{
  position:absolute;
  inset:0;
  z-index:0;
}

.slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transform:scale(1.03);
  animation: heroFade 21s infinite;   /* 3 Bilder x 7s = 21s */
}

.slide.s1{ background-image:url("assets/Hero_Annettes_Landschaft_16x9.jpg"); animation-delay:0s; }
.slide.s2{ background-image:url("assets/Hero_Klima-Pavillon_Holzweg_16x9.jpg"); animation-delay:7s; }
.slide.s3{ background-image:url("assets/Hero_ParkHaus+Logo.jpg"); animation-delay:14s; }

@keyframes heroFade{
  0%   {opacity:0}
  8%   {opacity:1}
  33%  {opacity:1}
  41%  {opacity:0}
  100% {opacity:0}
}

/* Scrim für Lesbarkeit (Diashow-Layer) */
.hero .scrim{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.55) 0%,
    rgba(255,255,255,.35) 45%,
    rgba(255,255,255,.55) 100%
  );
}

/* =========================
   MOBILE (<= 600px)
   Ziel: Header kompakt + Hero unten rechts,
   weniger verdeckend (v.a. 376x667)
   ========================= */
@media (max-width: 600px) {

  /* Header flacher machen */
  .container { padding: 14px; }

  header .inner{
    align-items:flex-start;
    gap:10px;
  }

  .brand{ gap:12px; }

  .site-logo{
    height:50px;
  }

  .brand strong{
    font-size:16px;
    line-height:1.05;
  }

  /* Navigation: 2 Spalten */
  nav{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:6px 10px;
    justify-items:end;
  }

  nav a{
    padding:6px 8px;
    font-size:14px;
    border-radius:8px;
    white-space:nowrap;
  }

  /* HERO: weniger hoch + Inhalt unten rechts */
  .hero{
    min-height: 58vh;
    place-items: end end;            /* <- unten rechts */
    padding: 0 12px 14px 12px;
  }

  /* Box schmaler + niedriger + transparenter */
  .hero .content{
    max-width: 320px;               /* <- statt 92%: weniger Fläche */
    width: 88%;
    padding: 12px 14px;
    border-radius: 14px;

    background: rgba(255,255,255,0.45);  /* <- deutlich weniger verdeckend */
    border: 1px solid rgba(255,255,255,0.35);
    box-shadow: 0 10px 24px rgba(0,0,0,.10);
    backdrop-filter: blur(3px) saturate(115%);

    text-align:left;                /* <- wirkt kompakter */
  }

  .hero h1{
    font-size: 22px;
    line-height: 1.12;
    margin: 0 0 6px 0;
  }

  .hero p.sub{
    font-size: 14px;
    line-height: 1.30;
    margin: 0 0 10px 0;
    max-width: 30ch;                /* <- schmaler Textblock */
  }

  .buttons{
    justify-content:flex-start;
  }

  .btn{
    padding: 9px 12px;
    font-size: 14px;
  }
}

/* =========================
   EXTRA: sehr kleine Geräte (z.B. 375/376px Breite)
   nochmal weniger "Box"
   ========================= */
@media (max-width: 420px) {

  .site-logo{ height:46px; }

  .brand strong{
    font-size:15px;
  }

  .hero{
    min-height: 56vh;
  }

  .hero .content{
    max-width: 300px;
    width: 86%;
    background: rgba(255,255,255,0.40);
  }

  .hero h1{ font-size: 21px; }
  .hero p.sub{ font-size: 13.5px; }
}
.icon{
  width: 22px;
  height: 22px;
  stroke: #5b666b;
  stroke-width: 2;
  fill: none;
  margin-right: 10px;
  vertical-align: -3px;
}

.card h3{
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.muted a{
  color:#4a7f5a;
  border-bottom:1px solid #4a7f5a;
}

.muted a:hover{
  border-bottom:none;
}