:root{
  --bg:#f7fbfa;
  --fg:#0f1f1c;
  --muted:#eef5f3;
  --brand:#2e7f72;
  --brand-2:#89bdb2;
  --card:#ffffff;
  --ring: rgba(46,127,114,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,ui-sans-serif;
  color:var(--fg); background:var(--bg); line-height:1.6}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.site-header{position:sticky;top:0;background:#fff9;backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid #e6eeec;z-index:10}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px}
.logo-circle{width:36px;height:36px;border-radius:999px;background:linear-gradient(135deg,var(--brand),var(--brand-2))}
.brand-text{display:flex;flex-direction:column;font-size:14px}
.brand-text strong{font-weight:600}
.nav{display:flex;gap:18px;align-items:center}
.nav a{color:var(--fg);text-decoration:none;font-weight:500}
.nav a.cta{padding:8px 12px;border-radius:12px;background:var(--brand);color:#fff}
.hero{padding:72px 0}
.hero-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:center}
.hero-text h1{line-height:1.1;margin:0 0 8px 0;font-size:44px}
.hero-text p{opacity:.9;margin:0 0 16px 0}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 16px;border-radius:12px;text-decoration:none;border:1px solid #d8e7e3}
.btn-primary{background:var(--brand);color:#fff;border-color:transparent}
.btn-secondary{background:#fff;color:var(--fg)}
.hero-card{min-height:280px;border-radius:20px;background:linear-gradient(135deg,#dfeeea,#f7fbfa);box-shadow:0 1px 0 rgba(0,0,0,.03),0 10px 30px rgba(46,127,114,.12)}
.section{padding:56px 0}
.section h2{margin:0 0 18px 0;font-size:32px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--card);border:1px solid #e6eeec;border-radius:16px;padding:18px;box-shadow:0 1px 0 rgba(0,0,0,.02)}
.note{margin-top:14px;font-size:14px;opacity:.8}
.muted{background:var(--muted)}
.about{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
.about-card{min-height:220px;border-radius:16px;background:radial-gradient(120% 120% at 0 0, #ffffff 0, #e9f3f1 55%, #cfe5e0 100%);border:1px solid #e2ece9}
.ticks{padding:0;margin:14px 0 0 0;list-style:none}
.ticks li{padding-left:26px;position:relative;margin:8px 0}
.ticks li:before{content:'✓';position:absolute;left:0;top:0.2rem;color:var(--brand);font-weight:600}
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:start}
.map{width:100%;min-height:300px;border:1px solid #dbe7e4;border-radius:12px}
.cta-bar{display:flex;gap:12px;margin-top:10px;flex-wrap:wrap}
.site-footer{padding:20px 0;border-top:1px solid #e6eeec;background:#fff}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.footer-links a{color:var(--fg);text-decoration:none;opacity:.8}
.footer-links a[aria-disabled="true"]{pointer-events:none;opacity:.55}

/* Responsiveness */
@media (max-width: 920px){
  .hero-inner, .about, .contact-grid{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr}
  .hero{padding:48px 0}
  .hero-text h1{font-size:36px}
}
@media (max-width: 580px){
  .grid{grid-template-columns:1fr}
  .nav{gap:12px}
  .brand-text{display:none}
}

/* Über-mich Bild */
/* Über-mich Bild – kompakter */
.about-image {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e2ece9;
  max-width: 260px;         /* Desktop kleiner */
  justify-self: center;
}

.about-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Handy: noch kleiner */
@media (max-width: 600px) {
  .about-image {
    max-width: 180px;
    margin-top: 16px;
  }
}



.hero-inner {
  grid-template-columns: 1fr;
}

.hero {
  padding-bottom: 20px; /* vorher ca. 72px → jetzt kompakt */
}

.hero {
  padding-top: 50px; /* optional, angenehm für Handy */
}


/* === Leistungen-Carousel (Desktop: 3 Karten, Mobile: 1 Karte) === */

.services-carousel {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  margin-top: 10px;
}

.services-window {
  overflow: hidden;
}

.services-track {
  display: flex !important;       /* erzwingt Flex-Layout */
  flex-wrap: nowrap !important;   /* keine zweite Zeile */
  gap: 18px;
}

/* Karten-Stil (eigenständig, ohne .card-Konflikte) */
.service-slide {
  flex: 0 0 calc(33.333% - 12px) !important;  /* 3 nebeneinander */
  max-width: calc(33.333% - 12px);
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e0ece7;
  padding: 18px 18px 16px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}

.service-slide h3 {
  margin-top: 0;
  margin-bottom: 6px;
  font-size: 18px;
}

.service-slide p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

/* Pfeile (Desktop) */
.services-arrow {
  border: 1px solid #8a9099;
  background: #d3d6de;
  border-radius: 999px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 22px;
  color: #262a31;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.services-arrow:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.22);
  background: #c3c7d0;
}

/* Mobile: 1 Karte + größere Pfeile */
@media (max-width: 800px) {

  .service-slide {
    flex: 0 0 100% !important;
    max-width: 100%;
  }

  .services-carousel {
    grid-template-columns: 60px 1fr 60px;
  }

  .services-arrow {
    width: 56px;
    height: 56px;
    font-size: 26px;
  }
}


/* Google Maps Responsive Fix (Android Samsung Bug) */
.map-container {
  position: relative;
  width: 100%;
  padding-bottom: 56%;   /* Standard 16:9 Seitenverhältnis */
  border-radius: 16px;
  overflow: hidden;
  background: #d6e1dc;
}

.map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


.nav-logo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}