:root{
      --green-900:#204E41; /* dunkler Grünbalken oben */
      --green-800:#2D5F4F; /* Hauptgrün */
      --green-700:#3D6F5F; /* Verlauf Mitte */
      --green-400:#7FB5A5; /* Verlauf hell */
      --sand-50:#FBF7EC;   /* helle Sektion */
      --sand-100:#F6EEC8;  /* (nicht mehr verwendet) */
      --sand-cta:#f1e9d6;  /* Beige wie im Footer */
      --ink-900:#111827;   /* Text dunkel */
      --ink-700:#374151;   /* Text */
      --ink-600:#4B5563;   /* Text hell */
      --border:#E5E7EB;    /* Linie hell */
      --radius-1:12px;     /* Karten Standard */
      --radius-2:18px;     /* große Karten / Werdegang */
      --shadow-1:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);
      --shadow-2:0 14px 30px -6px rgba(0,0,0,.18),0 8px 18px -12px rgba(0,0,0,.12);
    }
    html{scroll-behavior:smooth}
    *{box-sizing:border-box}
    body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans',sans-serif;color:var(--ink-900);line-height:1.5;background:#fff;overflow-wrap: break-word;word-wrap: break-word;}
    img{max-width:100%;display:block}
    a{color:inherit;text-decoration:none}

    /* Layout helpers */
    .container{max-width:1180px;margin:0 auto;padding:0 24px}
    .grid{display:grid;gap:24px}
    .grid-2{grid-template-columns:1fr}
    .grid-3{grid-template-columns:1fr}
    .grid-75-25 {display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: center;}
    @media(min-width:900px){.grid-2{grid-template-columns:1.25fr 1fr}}
    @media(min-width:980px){.grid-3{grid-template-columns:repeat(3,1fr)}}
    @media(max-width:900px){.grid-75-25 {grid-template-columns: 1fr;}}

    /* Buttons */
    .pill{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;background:#fff;color:var(--green-800);border-radius:9999px;box-shadow:var(--shadow-1);transition:transform .18s ease, box-shadow .18s ease, background .18s ease}
    .pill:hover{transform:translateY(-1px) scale(1.03);box-shadow:var(--shadow-2)}

    /* Cards */
    .card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-1);padding:24px;transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease}
    .card:hover{border-color:var(--green-800);box-shadow:var(--shadow-2);transform:translateY(-2px)}
    .card.soft{background:#fff;border-color:#e9ecef}
    .card.soft:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)}
    .card.beige{background:var(--sand-cta);border-color:#E8E4D8}
    .card.beige:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)}
    .card h3{font-size:18px;font-weight:500;color:var(--green-800)}
    .card.soft:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)}
    .card h3{font-size:18px;font-weight:500;color:var(--green-800)}

    /* Top Notice */
    .notice{background:var(--green-800);color:#fff;text-align:center;padding:8px 16px;font-size:14px;position:relative;z-index:5}
    .notice p{margin:0}

    /* NAV */
    nav{position:relative;z-index:5}
    .nav-wrap{display:flex;justify-content:center}
    .nav{display:flex;gap:28px;align-items:center;padding-top:18px}
    .nav a{color:2D5B46;opacity:.95;padding:8px 14px;border-radius:999px}
    .nav a:hover{opacity:.8}
    .nav .pill{color:var(--green-800) !important;background:#fff}

    /* Mobile Navigation */
    .mobile-nav{display:none}
    @media (max-width: 899px){
      .nav{display:none}
      .mobile-nav{display:block;position:relative;z-index:6}
      .hamburger{position:absolute;left:50%;transform:translateX(-50%);top:12px;width:42px;height:42px;border-radius:9999px;background:rgba(255,255,255,.2);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;box-shadow:var(--shadow-1)}
      .hamburger span{display:block;width:20px;height:2px;background:#fff;position:relative}
      .hamburger span::before,.hamburger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:#fff}
      .hamburger span::before{top:-6px}
      .hamburger span::after{top:6px}
      .mobile-panel{position:absolute;left:50%;transform:translateX(-50%);top:64px;width:min(92vw,520px);background:#f7f8f8;border:1px solid rgba(0,0,0,.06);border-radius:22px;box-shadow:var(--shadow-2);padding:18px 18px 18px 18px;display:none}
      .mobile-panel.open{display:block}
      .mobile-panel a{display:block;padding:12px 12px;border-radius:12px;color:#243b38}
      .mobile-panel a:hover{background:rgba(0,0,0,.04)}
      .mobile-panel .cta{margin-top:10px}
      .mobile-panel .cta .pill{width:100%;justify-content:center;background:var(--green-800);color:#fff}
    }

    /* HERO */
    /*.hero{position:relative;min-height:740px;background:linear-gradient(135deg,var(--green-800) 0%,var(--green-700) 55%,var(--green-400) 100%);overflow:hidden}*/
    .hero{position:relative;background:var(--sand-cta);overflow:hidden}
    .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,0),transparent)}
    .hero-inner{position:relative;z-index:2}
    .hero-center{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:90px 0 80px}
    .logo-placeholder{width:min(900px,92vw);height:320px;border-radius:18px;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
    .hero-location{color:#2D5B46;font-size:18px;margin-top:20px;margin-bottom:16px}
    /* Logo immer proportional skalieren */
    .hero-logo{
      width: min(30vw);  /* auf Mobil schmal, auf Desktop gedeckelt */
      height: auto;             /* << sorgt für korrektes Seitenverhältnis */
      display: block;
    }

    /* Section spacing */
    /* Typografie-Vorgaben */
    h2{font-size:48px;font-weight:400;line-height:1.15;margin:0 0 10px}
    @media(max-width:400px){h2{font-size: 32px;}}
    p{font-size:18px}
    section{padding:72px 0}

    /* Willkommen */
    .muted-eyebrow{font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#5F927B;margin-bottom:10px}
    .feature-grid{display:grid;gap:18px;grid-template-columns:1fr}
    @media(min-width:900px){.feature-grid{grid-template-columns:repeat(4,1fr)}}

    .img-placeholder{display:flex;align-items:center;justify-content:center;height:260px;border-radius:16px;border:1px solid rgba(0,0,0,.1);background:linear-gradient(135deg,rgba(0,0,0,.18),rgba(255,255,255,.06));color:#cbd5e1}
    .img-rounded{border-radius:16px}

    .slider-wrapper {
  max-width: 1180px;
  margin: 40px auto 0;
  position: relative;
}

.custom-slider {
  position: relative;
  width: 100%;
  height: 800px; /* Adjust height as needed */
  overflow: hidden;
  border-radius: 20px; /* Modern rounded corners */
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  background: #f0f0f0;
}

.slider-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease-in-out; /* Clean blend transition */
}

.slider-img.active {
  opacity: 1;
}

/* Navigation Arrows */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.8);
  border: none;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  font-size: 18px;
  transition: background 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider-arrow:hover { background: #fff; }
.prev { left: 20px; }
.next { right: 20px; }

/* Control Dots */
.slider-dots {
  text-align: center;
  margin-top: 15px;
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background: #ccc;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s;
}

.dot.active { background: var(--ink-700, #333); }

    /* Beige Sektionen wie Footer */
    .sand{background:var(--sand-cta)}

    /* Steps (Therapieplatz) */
    .steps{display:grid;gap:16px;grid-template-columns:1fr}
    @media(min-width:900px){.steps{grid-template-columns:repeat(4,1fr)}}
    .steps.vertical{grid-template-columns:1fr}
    .step-card{background:var(--sand-cta);border:1px solid #E8E4D8;border-radius:18px;padding:22px;transition:box-shadow .15s ease, transform .15s ease}
    .step-card-white{background:white;border:1px solid #E8E4D8;border-radius:18px;padding:22px;transition:box-shadow .15s ease, transform .15s ease}
    .step-card:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)}
    .step-nr{font-size:28px;font-weight:600;color:#7ea697;margin-bottom:8px}

    /* Leistungen */
    .check{display:flex;gap:10px;align-items:center}
    .check i{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px}
    .check i::before{content:"✓";font-weight:900;color:var(--green-800);font-size:18px;line-height:1}

    /* Therapieablauf (eigenes Layout, keine Hover-Interaktivität) */
    .therapy-flow{margin-top:40px;background:white;border:1px solid #E8E4D8;border-radius:26px;padding:32px}
    .therapy-flow h3{font-size:28px;margin-bottom:24px}
    .flow-grid{display:grid;gap:24px;grid-template-columns:1fr}
    @media(min-width:900px){.flow-grid{grid-template-columns:repeat(4,1fr)}}
    .flow-step{display:flex;flex-direction:column;gap:6px}
    .flow-step .nr{font-size:56px;line-height:1;color:#9EB7AA;font-weight:600;letter-spacing:2px}
    .flow-step h4{margin:6px 0 0;font-size:16px;font-weight:700;color:#0f172a}
    .flow-step p{margin:4px 0 0;color:#2a3b43}

    /* Über mich / Werdegang */
    .resume-list{display:grid;gap:18px;margin-top:8px}
    .resume-item{background:white;border:1px solid #e9ecef;border-radius:var(--radius-2);padding:18px 22px;display:flex;gap:24px;align-items:flex-start;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
    .resume-item:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)}
    .resume-year{min-width:140px;font-weight:600;color:#6b6b6b}
    .resume-body{display:flex;flex-direction:column;gap:6px}
    .resume-title{font-weight:600;color:#0f172a}
    .resume-sub{color:#435b63}
    @media(max-width:600px){.resume-year{min-width: auto;}}

    /* Kontakt */
    .contact-list{display:grid;gap:18px}
    .contact-item{display:flex;gap:16px;align-items:center}
    .contact-icon{width:48px;height:48px;border-radius:50%;background:var(--sand-cta);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
    .contact-icon img{width:24px;height:24px;opacity:.6}
    .contact-cta{background:linear-gradient(135deg,var(--green-800),var(--green-400));color:#fff;border-radius:24px;padding:40px;box-shadow:var(--shadow-2);text-align:center}
    .contact-cta h3{font-size:24px;margin-bottom:18px}
    .contact-cta p{font-size:17px;margin-bottom:32px;color:rgba(255,255,255,.92)}
    .contact-cta .pill{width:100%;justify-content:center;font-size:17px}

    /* Footer */
    footer{background:var(--sand-cta);border-top:1px solid #E8E4D8;color:#6b6b6b}

    /* Utilities */
    .center{text-align:center}
    .muted{color:var(--ink-600)}
    .mb-0{margin-bottom:0}
    .mt-8{margin-top:32px}
    .mt-12{margin-top:48px}
    .mt-16{margin-top:64px}
    .mb-6{margin-bottom:24px}
    .mb-10{margin-bottom:40px}
    .lead{font-size:18px}

    /* Info-Punkte unter dem Bild (Dentosophie) */
.info-points{ 
  margin-top:12px; 
  display:grid; 
  gap:10px; 
}
.info-point{
  display:flex; 
  align-items:flex-start; 
  gap:10px;
}
.info-point .badge{
  display: flex;                  /* statt inline-flex → stabiler */
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;                   /* explizit gesetzt → perfekte 1x1-Proportion */
  border-radius: 50%;
  background: var(--sand-cta);
  color: #0f172a;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12);
  flex-shrink: 0;                 /* verhindert Zusammenstau bei flex-Layouts */
}
.info-point p{ 
  margin:0; 
  font-size:16px; 
  line-height:1.45;
}


.contact-flex {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  margin-top: 16px;
}

.contact-map {
  margin-left: auto;
  flex-shrink: 0;
}

.contact-map img {
  width: 220px;
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

@media (max-width: 768px) {
  .contact-flex {
    flex-direction: column;
  }
  .contact-map img {
    width: 100%;
    margin-top: 16px;
  }
  .slider-wrapper {
    width: 85%;      /* Set the width to 85% of the viewport */
    margin-left: auto;  /* Combined with margin-right, this centers the block */
    margin-right: auto;
  }
  .custom-slider {
    height: 50vh;   /* Optional: Reduce height for better mobile proportions */
    border-radius: 15px; /* Optional: Slightly smaller corners for smaller screens */
  }
}