:root{
  --brand-green:#6a8268;
  --hover-green:#7e9a7a;
  --muted:#6c757d;
}
*{box-sizing:border-box}
body{font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:#222; background:#fff;}
.logo{height:56px; object-fit:contain;}
.brand-title{font-weight:700;}
brand-sub{font-size:0.85rem; color:var(--muted);}
.bg-gradient{background:linear-gradient(120deg, rgba(106,130,104,0.08), rgba(255,255,255,0));}
.hero-img{border-radius:0.75rem; box-shadow:0 8px 24px rgba(0,0,0,0.06);}
.card{border:0; border-radius:0.6rem; background:#fff; box-shadow:0 6px 18px rgba(10,10,10,0.04);}
h1,h2{color:var(--brand-green);}
.btn-primary{background:linear-gradient(180deg,var(--brand-green),#4f6b56); border:none;}
.btn-primary:hover{background:linear-gradient(180deg,var(--hover-green),#5f7d5f);}
.btn-outline-dark{border-color:rgba(0,0,0,0.08); color:#222;}
.social-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;background:transparent;border:1px solid rgba(0,0,0,0.04);color:var(--brand-green);text-decoration:none;}
.social-btn i{font-size:1.1rem;}
.social-btn:hover{background:rgba(106,130,104,0.06);}
.whatsapp-float{position:fixed;right:18px;bottom:18px;width:70px;height:70px;border-radius:50%;background:var(--brand-green);display:flex;align-items:center;justify-content:center;color:#fff;font-size:2rem;text-decoration:none;box-shadow:0 6px 20px rgba(0,0,0,0.15);z-index:1200;}
.whatsapp-float:hover{background:var(--hover-green);}
@media (max-width:767px){.brand-sub{display:none}.logo{height:48px}}

/* === Uniform service card image sizing without cropping === */
.card img {
  width: 100%;
  height: 240px;        /* unified box height */
  object-fit: contain;  /* show full image, no cropping */
  object-position: center;
}

/* =========================================================
   Leistungen: Swipe-Galerie (Pfeile < > im Bild)
   ========================================================= */

.svc-carousel{
  position: relative;
  overflow: hidden;
}

/* Slides: nur das aktive Bild anzeigen */
.svc-carousel .svc-slide{display:none;}
.svc-carousel .svc-slide.is-active{display:block;}

/* Pfeile */
.svc-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 2px solid rgba(255,255,255,0.9);
  padding: 0;
  background: rgba(0,0,0,0.18);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
  user-select: none;
  border-radius: 999px;
}

.svc-nav svg{
  width: 22px;
  height: 22px;
  display: block;
}

.svc-nav svg path{
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.svc-prev{left: 10px;}
.svc-next{right: 10px;}

.svc-nav:hover{
  background: rgba(0,0,0,0.28);
}

.svc-nav:focus-visible{
  outline: 2px solid rgba(255,255,255,0.9);
  outline-offset: 2px;
  border-radius: 999px;
}

t;
}

/* Leistungen: jede Karte als einheitlicher grüner Kasten (original Logo-Grün) */
#leistungen{
  background:#fff; /* Abschnitt selbst bleibt weiß */
}

#leistungen .card{
  background:var(--brand-green) !important;
  border:none !important;
  box-shadow:var(--shadow-soft);
  color:#fff;
}

#leistungen .card h5,
#leistungen .card .card-title,
#leistungen .card p,
#leistungen .card .card-text{
  color:#fff !important;
}

/* Bilder in den Leistungs-Kästen ohne Umrandung/weißes Feld */
#leistungen .card img{
  outline:none !important;
  background:transparent !important;
}

/* =========================================================
   Notdienst CTA (Header + Hero)
   ========================================================= */
:root{
  --notdienst-red:#b63a3a;
  --notdienst-red-dark:#8f1f1f;
  --notdienst-red-hover:#c84a4a;
}


.notdienst-cta{
  /* Mehr optische Trennung im Head (Hero) */
  margin-top: 6.25rem !important;
}

@media (max-width: 767px){
  .notdienst-cta{
    margin-top: 5.5rem !important;
  }
}

.btn-notdienst{
  background: linear-gradient(180deg, var(--notdienst-red), var(--notdienst-red-dark));
  border: none;
  color: #fff;
  border-radius: 999px;
  padding: 0.85rem 1.2rem;
  font-weight: 700;
  box-shadow: 0 10px 26px rgba(0,0,0,0.18);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.btn-notdienst:hover{
  background: linear-gradient(180deg, var(--notdienst-red-hover), var(--notdienst-red-dark));
  color: #fff;
}
.btn-notdienst:focus-visible{
  outline: 3px solid rgba(182,58,58,0.35);
  outline-offset: 2px;
}

.btn-notdienst-sm{
  background: linear-gradient(180deg, var(--notdienst-red), var(--notdienst-red-dark));
  border: none;
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
}
.btn-notdienst-sm:hover{
  background: linear-gradient(180deg, var(--notdienst-red-hover), var(--notdienst-red-dark));
  color: #fff;
}
.btn-notdienst-sm:focus-visible{
  outline: 3px solid rgba(182,58,58,0.35);
  outline-offset: 2px;
}

.notdienst-hint{
  font-size: 0.95rem;
  color: var(--muted);
}

.notdienst-wa{
  color: var(--brand-green);
  font-weight: 700;
  text-decoration: underline;
}
.notdienst-wa:hover{
  color: var(--hover-green);
}

/* Anchor-Offset für Sticky Header (damit Überschriften nicht unter der Navbar verschwinden) */
:root{
  --anchor-offset: 85px;
}
@media (max-width: 767px){
  :root{
    --anchor-offset: 90px;
  }
}
#leistungen::before, #about::before{
  content: "";
  display: block;
  height: var(--anchor-offset);
  margin-top: calc(var(--anchor-offset) * -1);
  visibility: hidden;
}

/* =========================================================
   Google Maps: 2-Klick-Placeholder (DSGVO)
   ========================================================= */
.map-consent{
  background: rgba(0,0,0,0.02);
  border-radius: 0.6rem;
  overflow: hidden;
}
.map-consent__placeholder{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.map-consent__box{
  max-width: 480px;
}


/* Teamfoto – Option B (Card-Style) */
.team-photo-card{
  /* kleiner & „eingebettet“ (wie Karten/Leistungen), ohne Full-Width-Look */
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  /* sichtbarer Rahmen + Abstand, damit das Foto optisch kleiner wirkt */
  padding: 20px;
  border: 6px solid var(--brand-green);
  border-radius: 1rem;
  background: var(--brand-green);
  box-shadow: 0 10px 28px rgba(0,0,0,0.10);
}
.team-photo-card img{
  display:block;
  width:100%;
  height:auto;
  /* kein "weißer Streifen" durch Bootstrap margins */
  margin: 0 !important;
  /* Bild behält abgerundete Ecken, aber innen im Rahmen */
  border-radius: 0.75rem;
}