:root{
  --brand: 29,160,64;
  --brand-700: 23,138,53;
  --brand-900: 12,85,33;
  --bg: #f7f8f9;
  --card: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --border: #e5e7eb;
  --radius: 16px;
  --shadow: 0 .5px 1px rgba(0,0,0,.05), 0 10px 24px rgba(0,0,0,.08);
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:var(--text);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;height:auto;display:block} a{color:rgb(var(--brand));text-decoration:none} a:hover{text-decoration:underline}
.container{width:min(1200px,92vw);margin:0 auto} .narrow{width:min(900px,92vw);margin:0 auto}
.h1{font-size:clamp(2rem,1.6rem+1.6vw,3rem);line-height:1.15;margin:0 0 .25em} .h2{font-size:clamp(1.6rem,1.3rem+1vw,2.2rem);line-height:1.2;margin:0 0 .5em} .h3{font-size:1.1rem;margin:0 0 .25em;font-weight:700}
.lead{font-size:1.05rem;color:#374151;max-width:68ch} .small{font-size:.9rem} .muted{color:var(--muted)}
.skip{position:absolute;left:-9999px} .skip:focus{left:1rem;top:1rem;background:#fff;padding:.6rem .8rem;border-radius:10px;outline:3px solid rgba(var(--brand),.6)}

/* Topbar */
.topbar{background:rgb(var(--brand));color:#fff} .topbar__inner{display:flex;align-items:center;justify-content:space-between;padding:.6rem 0} .brand{font-weight:700} .topbar__contacts a{color:#fff;margin-left:1rem;opacity:.95} .topbar__contacts a:hover{opacity:1}

/* Hero */
.hero{position:relative;color:#fff;background:linear-gradient(135deg,rgba(var(--brand),.9),rgba(var(--brand),.86))}
.hero::before{content:"";position:absolute;inset:0;z-index:0;background:var(--hero) center/cover no-repeat;opacity:.2}
.hero__wrap{position:relative;z-index:1;padding:clamp(3rem,6vw,5rem) 0}
.hero__text .lead{color:rgba(255,255,255,.95)} .hero__actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1rem}

/* Nav */
.nav{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--border);transition:box-shadow .2s ease} .nav.scrolled{box-shadow:0 8px 24px rgba(0,0,0,.06)} .nav__inner{display:flex;align-items:center;justify-content:space-between;padding:.85rem 0}
.nav__toggle{display:none;background:transparent;border:1px solid var(--border);padding:.5rem .75rem;border-radius:10px} .nav__menu{display:flex;gap:1rem;flex-wrap:wrap} .nav a{color:#0f172a;font-weight:600;padding:.35rem .55rem;border-radius:10px} .nav a:hover{background:#f3f4f6}
@media (max-width:760px){.nav__toggle{display:block}.nav__menu{display:none;flex-direction:column;gap:.75rem;padding-top:.75rem}.nav__menu.open{display:flex}}

/* Sections & Grid */
.section{padding:clamp(2.6rem,5vw,4.2rem) 0} .section--alt{background:#fff}
.grid{display:grid;gap:clamp(1rem,3vw,2rem);align-items:center} .grid--2{grid-template-columns:repeat(2,1fr)} @media (max-width:900px){.grid--2{grid-template-columns:1fr}}


/* Frames */
.media-frame{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:#fff}

#ueber-uns .media-frame img {
  width: 100%;          /* Bild breiter als Container */
  height: 120%;         /* füllt Containerhöhe */
  object-fit: cover;    /* Zuschneiden ohne weißen Rand */
  transform: translateX(-0%) translateY(0); /* horizontal verschoben, vertikal zentriert */
}

/* Steps */
.steps {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1rem;
  margin-top: 1rem;
}
.step {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem;
  box-shadow: var(--shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  cursor: pointer;
}
.step__num {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(var(--brand),.12);
  color: rgb(var(--brand));
  font-weight: 700;
  margin-bottom: .35rem;
}

/* Hover-Effekt */
.step:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(var(--brand), 0.4);
  box-shadow: 0 12px 28px rgba(0,0,0,0.12), 0 0 0 3px rgba(var(--brand), 0.12) inset;
}
.step:hover .step__num {
  background: rgb(var(--brand));
  color: #fff;
  transform: rotate(6deg) scale(1.1);
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

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




/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.9rem 1.2rem;border-radius:12px;font-weight:700;border:1px solid transparent;transition:transform .12s ease,background .2s ease,border-color .2s ease,color .2s ease}
.btn--primary{background:rgb(var(--brand));color:#fff;border-color:rgba(0,0,0,.02)} .btn--primary:hover{background:rgb(23,138,53);transform:translateY(-1px)}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5);border-width:1px} .btn--ghost:hover{background:rgba(255,255,255,.12)}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem} .step{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem;box-shadow:var(--shadow)}
.step__num{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:8px;background:rgba(var(--brand),.12);color:rgb(var(--brand));font-weight:700;margin-bottom:.35rem}
@media (max-width:900px){.steps{grid-template-columns:1fr}}

/* Map */
.map{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}

/* Forms */
.form{display:grid;gap:1rem;margin-top:1.2rem} .form__group{display:grid;gap:.35rem}
.form input,.form textarea{width:100%;border:1px solid var(--border);background:#fff;border-radius:12px;padding:.85rem .95rem;font:inherit;outline:none;transition:border-color .15s ease,box-shadow .15s ease}
.form input:focus,.form textarea:focus{border-color:#cbd5e1;box-shadow:0 0 0 3px rgba(var(--brand),.14)} .form__check{display:flex;gap:.5rem;align-items:flex-start;font-size:.95rem} .form__check input{margin-top:.25rem}
.hp{position:absolute;left:-50000px;width:1px;height:1px;overflow:hidden}

/* Footer */
.footer{background:#0b1b12;color:#e2e8f0} .footer__grid{display:grid;gap:2rem;grid-template-columns:2fr 1fr 1fr;padding:2.25rem 0} .foot__title{font-weight:700;margin:0 0 .5rem} .foot__list{list-style:none;padding:0;margin:0;display:grid;gap:.35rem}
.footer a{color:#e2e8f0} .footer a:hover{color:#fff;text-decoration:underline} @media (max-width:900px){.footer__grid{grid-template-columns:1fr}}

.footer__grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(4, 1fr); /* jetzt 4 gleich große Spalten */
  padding: 2.25rem 0;
}

@media (max-width: 900px) {
  .footer__grid {
    grid-template-columns: 1fr; /* mobile Ansicht */
  }
}

.footer__grid div {
  display: flex;
  flex-direction: column;
}

.foot__title {
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.foot__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.35rem;
}

.footer a {
  color: #e2e8f0;
  text-decoration: none;
}

.footer a:hover {
  color: #fff;
  text-decoration: underline;
}


/* Leistungen: Scroller + Rich Cards */
.svc{position:relative;margin-top:1rem}
.svc__scroller{display:grid;grid-template-columns:repeat(auto-fit, minmax(260px,1fr));gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.25rem}
@media (min-width:920px){.svc__scroller{grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr)}}
.svc__scroller::-webkit-scrollbar{height:10px} .svc__scroller::-webkit-scrollbar-thumb{background:#d7dde3;border-radius:10px}
.svc__card{position:relative;scroll-snap-align:start;isolation:isolate;background:#fff;border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);min-height:220px;cursor:pointer;transition:transform .14s ease,border-color .2s ease,box-shadow .2s ease}
.svc__card::before{content:"";position:absolute;inset:0;background:var(--bg-img) center/cover no-repeat;opacity:.32;z-index:0;transition:opacity .2s ease}
.svc__card::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom, rgba(255,255,255,.6), rgba(255,255,255,.95));z-index:1;opacity:.95}
.svc__card:hover{transform:translateY(-2px)}
.svc__card.is-active{border-color: rgba(var(--brand), .35); box-shadow: 0 8px 28px rgba(0,0,0,.08), 0 0 0 3px rgba(var(--brand), .12) inset;}
.svc__meta{position:relative;z-index:2;padding:1rem}
.svc__tag{display:inline-block;background:rgba(var(--brand),.1);color:rgb(var(--brand));padding:.35rem .6rem;border-radius:999px;font-weight:700;font-size:.78rem}
.svc__title{margin:.4rem 0 0;font-weight:800;color:#0f172a}
.svc__desc{margin:.35rem 0 0;color:#334155;font-size:.95rem;max-width:50ch}

.media-frame {
  background: #f2faf4; /* hellgrün statt weiß */
}

.svc__card.is-active {
  box-shadow: 0 8px 28px rgba(29,160,64,0.2), 0 0 0 3px rgba(29,160,64,0.12) inset;
}

.svc__arrows{position:absolute;inset-block-start:-2.6rem;inset-inline-end:0;display:flex;gap:.4rem}
.svc__arrow{border:1px solid var(--border);background:#fff;border-radius:10px;padding:.45rem .65rem;cursor:pointer;box-shadow:var(--shadow)}
.svc__arrow:hover{transform:translateY(-1px)}

.svc__detail{margin-top:1.2rem;background:var(--card);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow);overflow:hidden;display:grid;grid-template-columns:1.1fr .9fr}
.svc__detail-img{background:var(--detail-bg) center/cover no-repeat;min-height:320px}
.svc__detail-body{padding:1.2rem 1.2rem 1.3rem}
.svc__bullets{list-style:none;padding:0;margin:.6rem 0 0;display:grid;gap:.35rem}
.svc__bullets li::before{content:'';display:inline-block;width:.6rem;height:.6rem;border-radius:50%;background:rgb(var(--brand));margin-right:.5rem;transform:translateY(-1px)}
.svc__bullets li{display:flex}
@media (max-width:1000px){.svc__detail{grid-template-columns:1fr}}

/* Hintergrund der gesamten Website (außer Hero und Footer) */
body {
  background: linear-gradient(160deg, #d8f5e2 0%, #a3e4a8 50%, #f0f4f2 100%);
  /* Von hellem Mintgrün → mittleres Grün → leichtes Grau */
}

/* Sections: leicht transparent, damit Hintergrund durchscheint */
.section, .section--alt {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16px; /* optional für moderne „Karten“-Optik */
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

/* Optional: feine diagonale Linien für Struktur */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.05),
    rgba(255,255,255,0.05) 2px,
    transparent 2px,
    transparent 25px
  );
}

.footer img {
  display: block;
  margin: 1 auto 1rem; /* zentriert + etwas Abstand nach unten */
  max-width: 200px;
  height: auto;
}


/* Reveal */
.reveal-up{opacity:0;transform:translateY(18px)} .reveal-fade{opacity:0} .reveal-in{opacity:1!important;transform:none!important;transition:opacity .5s ease,transform .5s ease}
.delay-1{transition-delay:.08s} .delay-2{transition-delay:.16s} .delay-3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.reveal-up,.reveal-fade{opacity:1;transform:none}}

/* Legal */
.legal-hero{background:linear-gradient(135deg,rgba(var(--brand),.95),rgba(var(--brand),.85));color:#fff;padding:clamp(2.5rem,5vw,4rem) 0}
.breadcrumbs{display:flex;gap:.5rem;font-size:.95rem;margin-top:.5rem;color:rgba(255,255,255,.9)}
.legal__block{margin-bottom:2.2rem}

/* Galerie: Dienstleistungsbilder ohne Overlay, Hover-Zoom */
#dienstleistungen .svc__card::before,
#dienstleistungen .svc__card::after {
  display: none;
}

#dienstleistungen .svc__card {
  border: none; /* keine Ränder */
  border-radius: 12px; /* optional */
  box-shadow: 0 2px 12px rgba(0,0,0,0.08); /* leichter Schatten */
  min-height: 200px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  background: var(--bg-img) center/cover no-repeat;
}

#dienstleistungen .svc__card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* Pfeile über der Galerie */
#dienstleistungen .svc__arrows {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0.5rem;
  left: 0.5rem;
  display: flex;
  justify-content: space-between;
  z-index: 5;
  gap: 0.5rem;
}

#dienstleistungen .svc__arrow {
  background: rgba(255,255,255,0.9);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.2rem;
}

#dienstleistungen .svc__scroller {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.25rem;
}

#dienstleistungen .svc__card {
  flex: 0 0 320px; /* feste Breite für alle Bilder */
  min-height: 320px; /* Höhe nach Bedarf anpassen */
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  background: var(--bg-img) center/cover no-repeat;
  scroll-snap-align: start;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

@media(min-width: 1024px) {
  #dienstleistungen .svc__card {
    flex: 0 0 380px;
    min-height: 380px;
    border-radius: 16px;
  }
}