:root{
  --bg:#ffffff;
  --beige:#faf7f0;
  --text:#1f1f1f;
  --muted:#6f6f6f;
  --gold:#b8941e;
  --gold2:#d0aa2f;
  --line:#e7e1d4;
  --shadow: 0 18px 45px rgba(0,0,0,.12);
  --serif: "Playfair Display", serif;
  --sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:1180px;margin:0 auto;padding:0 20px}
.beige{background:var(--beige)}
.gold{color:var(--gold)}
.muted{color:var(--muted)}
.big{font-size:22px;font-weight:700}

/* Topbar */
.topbar{background:#fff;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.topbar-inner{display:flex;justify-content:space-between;gap:12px;padding:10px 0}
.top-left{display:flex;gap:18px;flex-wrap:wrap}

/* Header */
.header{position:sticky;top:0;background:#fff;z-index:50;border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0}
.logo{font-family:var(--serif);font-size:22px;font-weight:700}
.logo span{color:var(--gold)}
.nav{display:flex;gap:22px;align-items:center}
.nav a{font-size:14px;color:#3a3a3a}
.nav a:hover{color:var(--gold)}
.header-actions{display:flex;gap:10px;align-items:center}
.burger{display:none;border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px 12px;cursor:pointer}

/* Home (Hero slider) overlay header/topbar
   Removes the white band above the slider by placing the whole header inside the slider area. */
.site-head{position:relative}
.site-head.is-overlay{position:absolute;left:0;right:0;top:0;z-index:100;pointer-events:none}
.site-head.is-overlay .topbar,
.site-head.is-overlay .header{pointer-events:auto}

.site-head.is-overlay .topbar{background:transparent;border-bottom:0;color:rgba(255,255,255,.92)}
.site-head.is-overlay .header{position:relative;top:auto;background:transparent;border-bottom:0}

.site-head.is-overlay .logo,
.site-head.is-overlay .nav a,
.site-head.is-overlay .top-left span,
.site-head.is-overlay .top-right{color:#fff}

.site-head.is-overlay .nav a{opacity:.92}
.site-head.is-overlay .nav a:hover{opacity:1;color:var(--gold2)}

.site-head.is-overlay .burger{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}

/* Give the text some readability on very bright hero images */
.site-head.is-overlay .logo,
.site-head.is-overlay .nav a,
.site-head.is-overlay .topbar{ text-shadow: 0 2px 14px rgba(0,0,0,.45); }

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:0;border:1px solid transparent;font-weight:700;font-size:13px;letter-spacing:.3px;padding:14px 20px}
.btn.small{padding:12px 18px}
.btn.full{width:100%}
.btn-gold{background:var(--gold);color:#fff}
.btn-gold:hover{background:var(--gold2)}
.btn-outline{border-color:var(--gold);color:var(--gold);background:transparent}
.btn-outline:hover{background:rgba(184,148,30,.08)}

/* Hero */
.hero{background:linear-gradient(180deg, var(--beige), #fff);padding:52px 0 30px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:center}
.hero-badge{display:inline-block;background:#efe7d7;color:#6b5a2a;font-weight:700;font-size:12px;padding:10px 14px;letter-spacing:.8px}
.hero h1{font-family:var(--serif);font-size:54px;line-height:1.05;margin:18px 0 14px}
.hero-text{color:#4e4e4e;line-height:1.7;margin:0 0 22px;max-width:560px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:10px}
.stat-num{font-size:28px;font-weight:800;color:var(--gold)}
.stat-label{font-size:12px;color:var(--muted);line-height:1.35}

/* Hero image + floating card */
.hero-image{position:relative;border-radius:0;overflow:hidden;box-shadow:var(--shadow)}
.hero-image img{height:460px;object-fit:cover;width:100%}
.hero-card{position:absolute;left:22px;bottom:22px;background:#fff;padding:16px 16px 14px;width:260px;box-shadow:var(--shadow);border:1px solid var(--line)}
.hero-card-top{display:flex;gap:12px;align-items:center}
.medal{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#f2ead8;border:1px solid var(--line)}
.hero-card-title{font-size:26px;font-weight:900}
.hero-stars{color:var(--gold);margin:10px 0 6px}

/* Sections */
.section{padding:70px 0}
.title{text-align:center;font-family:var(--serif);font-size:40px;margin:0 0 10px}
.subtitle{text-align:center;color:var(--muted);max-width:760px;margin:0 auto 34px;line-height:1.7}

/* Service cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:#fff;border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.06)}
.card-img{position:relative}
.card-img img{height:210px;object-fit:cover;width:100%}
.card-icon{position:absolute;right:14px;top:14px;width:38px;height:38px;border-radius:999px;background:#fff;border:1px solid var(--line);display:grid;place-items:center}
.card-body{padding:18px}
.card-body h3{font-family:var(--serif);margin:0 0 10px;font-size:18px}
.card-body p{margin:0 0 12px;color:#4f4f4f;line-height:1.6;font-size:13px}
.mini{display:grid;gap:6px;color:#616161;font-size:12px}
.card hr{border:0;border-top:1px solid var(--line);margin:14px 0}
.card ul{margin:0;padding:0;list-style:none;color:#4f4f4f;font-size:12px;display:grid;gap:8px}
.more{display:inline-flex;gap:10px;align-items:center;margin-top:14px;color:var(--gold);font-weight:800;font-size:12px}
.center-cta{text-align:center;margin-top:35px}
.center-cta p{color:var(--muted);margin:0 0 12px}

/* Before/After */
.ba-wrap{max-width:860px;margin:0 auto}
.ba-box{position:relative;box-shadow:var(--shadow);border:1px solid var(--line);background:#fff}
.ba-img{width:100%;height:420px;object-fit:cover}
.ba-before{position:absolute;left:0;top:0;height:100%;width:50%;overflow:hidden;pointer-events:none}
.ba-label{position:absolute;top:16px;background:#000;color:#fff;font-size:11px;font-weight:800;padding:6px 10px;pointer-events:none}
.ba-label-left{left:16px}
.ba-label-right{right:16px}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:var(--gold);transform:translateX(-50%);pointer-events:none}
.ba-handle:after{
  content:"↔";
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);box-shadow:0 10px 22px rgba(0,0,0,.12);
  color:var(--gold);font-weight:900;
}
.ba-range{position:absolute;left:0;bottom:10px;width:100%;opacity:0;height:40px;cursor:pointer}
.ba-meta{display:flex;justify-content:space-between;gap:16px;padding:18px 10px 0}
.ba-meta > div{background:#fff;border:1px solid var(--line);box-shadow:0 10px 25px rgba(0,0,0,.06);padding:14px 18px;min-width:220px;text-align:center}

/* Doctors */
.doc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:980px;margin:0 auto}
.doc{background:#fff;border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.06)}
.doc-img{position:relative}
.doc-img img{height:230px;object-fit:cover;width:100%}
.tag{position:absolute;right:12px;top:12px;background:#fff;border:1px solid var(--line);font-size:11px;padding:6px 10px;color:var(--gold);font-weight:900}
.doc-body{padding:16px}
.doc-body h3{margin:0;font-family:var(--serif);font-size:18px}
.doc-sub{color:var(--muted);font-size:12px;margin:6px 0 12px}
.doc-row{font-size:12px;color:#4f4f4f;margin:6px 0}
.doc-body p{font-size:12px;color:#4f4f4f;line-height:1.7;margin:12px 0 0}

.trust{margin:45px auto 0;max-width:860px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.06);padding:26px}
.trust h3{text-align:center;font-family:var(--serif);margin:0 0 18px}
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.trust-icon{width:56px;height:56px;border-radius:50%;background:#f2ead8;border:1px solid var(--line);display:grid;place-items:center;margin:0 auto 10px;color:var(--gold);font-size:22px}
.trust-item{text-align:center}
.trust-item p{margin:8px 0 0;color:var(--muted);font-size:12px;line-height:1.6}

/* Reviews */
.rating-box{max-width:420px;margin:0 auto 28px;text-align:center;background:#fff;border:1px solid var(--line);padding:20px;box-shadow:0 10px 30px rgba(0,0,0,.06)}
.rating-num{font-size:44px;font-weight:900;color:var(--gold);font-family:var(--serif)}
.rating-stars{color:var(--gold);font-size:16px;margin-top:6px}
.rating-link{display:inline-block;margin-top:10px;color:var(--gold);font-weight:800;font-size:12px}
.reviews{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:920px;margin:0 auto}
.review{background:#fff;border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.06);padding:18px;position:relative}
.quote{position:absolute;left:-10px;top:-12px;background:#f2ead8;border:1px solid var(--line);width:44px;height:44px;display:grid;place-items:center;font-weight:900;color:var(--gold);font-size:22px}
.review-stars{color:var(--gold);margin:4px 0 10px}
.review p{margin:0 0 14px;color:#444;line-height:1.7;font-size:12.5px}
.review-foot{display:flex;justify-content:space-between;gap:10px;align-items:flex-end;font-size:12px}
.mini-stats{display:flex;justify-content:center;gap:clamp(18px,6vw,70px);flex-wrap:wrap;margin-top:34px;font-family:var(--serif);font-size:24px}

/* FAQ */
.faq{max-width:820px;margin:0 auto;display:grid;gap:12px}
.faq-item{border:1px solid var(--line);background:#fff}
.faq-q{width:100%;text-align:left;background:#fff;border:0;padding:18px 18px;font-family:var(--serif);font-size:15px;display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;padding:0 18px}
.faq-a > div{padding:0 0 16px;color:#4f4f4f;line-height:1.7;font-size:12.5px}
.faq-item.open .faq-a{max-height:220px}
.chev{color:var(--gold);font-weight:900}

.faq-cta{max-width:920px;margin:36px auto 0;display:grid;grid-template-columns:12px 1fr;gap:20px;align-items:center}
.faq-cta-line{height:100%;background:var(--gold)}
.faq-cta-box{padding:18px}
.faq-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}

/* Contact */
.notice{max-width:980px;margin:0 auto 18px;padding:14px 16px;border:1px solid var(--line);background:#fff}
.notice.ok{border-left:6px solid #2e9b57}
.notice.bad{border-left:6px solid #c0392b}

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:980px;margin:0 auto}
.what{background:#fff;border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.06);padding:18px}
.what h3{font-family:var(--serif);margin:0 0 10px}
.what-item{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}
.what-item:last-child{border-bottom:0}
.what-ic{width:28px;height:28px;border-radius:50%;background:#f2ead8;border:1px solid var(--line);display:grid;place-items:center;color:var(--gold);font-weight:900}
.direct{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);display:grid;gap:6px}

.form{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);padding:18px}
.form h3{margin:0 0 12px;font-family:var(--serif)}
label{display:block;font-size:12px;color:#444;margin:10px 0 6px}
input,select,textarea{width:100%;border:1px solid var(--line);padding:10px 12px;font-family:var(--sans);font-size:13px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gdpr{font-size:11px;color:var(--muted);margin:10px 0 12px;line-height:1.5}

/* Footer */
.footer{padding:46px 0 22px;border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:22px}
.footer-grid b{display:block;margin-bottom:10px}
.footer-grid a{display:block;color:#4b4b4b;font-size:13px;margin:8px 0}
.footer-logo{font-family:var(--serif);font-weight:800;font-size:18px}
.social{display:flex;gap:10px;margin-top:10px}
.social a{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--gold)}
.footer-bottom{margin-top:22px;padding-top:14px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:12px}
.footer-links{display:flex;gap:14px}

/* Responsive */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .hero h1{font-size:40px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:1fr}
  .doc-grid{grid-template-columns:1fr}
  .reviews{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);padding:10px 20px}
  .nav.open{display:grid;gap:10px}
  .burger{display:inline-block}

  /* Mobile menu on homepage hero overlay */
  .site-head.is-overlay .nav{background:rgba(0,0,0,.55);border-bottom-color:rgba(255,255,255,.18);backdrop-filter:blur(10px)}
  .site-head.is-overlay .nav a{color:#fff}
}

/* --- Before/After cards (no drag) --- */
.ba-cards, .ba-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:18px;
}
@media (max-width: 980px){
  .ba-cards, .ba-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .ba-cards, .ba-grid{ grid-template-columns: 1fr; }
}
.ba-card{
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.ba-card-media{ position:relative; }
.ba-card-img{
  width:100%;
  height:240px;
  object-fit:cover;
  display:block;
}
@media (max-width: 640px){
  .ba-card-img{ height:220px; }
}
.ba-tabs{
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  display:flex;
  gap:8px;
  background:rgba(0,0,0,.35);
  padding:6px;
  border-radius:999px;
  backdrop-filter: blur(6px);
}
.ba-tab{
  flex:1;
  border:0;
  cursor:pointer;
  padding:10px 12px;
  border-radius:999px;
  font-weight:700;
  color:#fff;
  background:transparent;
}
.ba-tab.is-active{
  background:rgba(255,255,255,.18);
}
.ba-card-title{
  padding:12px 14px 14px;
  font-weight:800;
}



/* ---------- Premium Vorher/Nachher Case Gallery ---------- */
.case-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:22px;
}
@media (max-width: 980px){
  .case-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .case-grid{ grid-template-columns: 1fr; }
}

.case-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  overflow:hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.case-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,.10);
}

.case-media{
  position:relative;
  aspect-ratio: 4 / 3;
  background:#f3f3f3;
}
.case-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.case-chip{
  position:absolute;
  left:14px;
  top:14px;
  padding:8px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
  letter-spacing:.2px;
  background:rgba(12,12,12,.55);
  color:#fff;
  backdrop-filter: blur(8px);
}

.case-zoom{
  position:absolute;
  right:12px;
  top:12px;
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(12,12,12,.40);
  color:#fff;
  cursor:pointer;
  backdrop-filter: blur(8px);
}
.case-zoom:hover{ background:rgba(12,12,12,.55); }

.case-body{
  padding:16px 16px 18px;
}
.case-title{
  font-weight:900;
  font-size:16px;
  line-height:1.25;
}
.case-sub{
  margin-top:6px;
  font-size:13px;
  opacity:.75;
}

.case-toggle{
  margin-top:14px;
  display:flex;
  align-items:center;
  gap:10px;
}
.case-toggle-label{
  font-size:12px;
  font-weight:800;
  opacity:.85;
}
.case-actions{ margin-top:14px; }

.btn-sm{ padding:10px 12px; font-size:13px; }

/* Switch */
.switch{
  position:relative;
  display:inline-block;
  width:54px;
  height:30px;
}
.switch input{ opacity:0; width:0; height:0; }
.switch-ui{
  position:absolute;
  cursor:pointer;
  inset:0;
  background:rgba(0,0,0,.12);
  border-radius:999px;
  transition: background .2s ease;
}
.switch-ui:before{
  content:"";
  position:absolute;
  height:24px;
  width:24px;
  left:3px;
  top:3px;
  border-radius:999px;
  background:#fff;
  box-shadow:0 6px 14px rgba(0,0,0,.18);
  transition: transform .2s ease;
}
.switch input:checked + .switch-ui{
  background: linear-gradient(90deg, rgba(200,160,80,.95), rgba(160,120,60,.95));
}
.switch input:checked + .switch-ui:before{
  transform: translateX(24px);
}

/* Modal */
.case-modal[hidden]{ display:none; }
.case-modal{
  position:fixed;
  inset:0;
  z-index:9999;
}
.case-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
}
.case-modal-dialog{
  position:relative;
  margin: 5vh auto;
  width:min(960px, 92vw);
  background:#fff;
  border-radius:22px;
  overflow:hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.case-modal-close{
  position:absolute;
  right:12px;
  top:12px;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.9);
  cursor:pointer;
  font-size:26px;
  line-height:1;
}
.case-modal-media{
  position:relative;
  aspect-ratio: 16 / 9;
  background:#f3f3f3;
}
.case-modal-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.case-modal-chip{
  position:absolute;
  left:14px;
  top:14px;
  padding:8px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  background:rgba(12,12,12,.55);
  color:#fff;
  backdrop-filter: blur(8px);
}
.case-modal-body{
  padding:16px 18px 22px;
}
.case-modal-title{
  font-weight:950;
  font-size:18px;
}
.case-toggle--modal{ margin-top:12px; }


/* --- Results Slider (Vorher/Nachher combined images) --- */
.results-slider{position:relative; display:flex; align-items:center; gap:10px; margin-top:18px;}
.results-viewport{overflow:hidden; width:100%;}
.results-track{display:flex; transition:transform .35s ease; will-change:transform;}
.results-slide{flex:0 0 100%; padding:10px; display:flex; justify-content:center;}
.results-slide img{width:100%; max-width:820px; border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.08); border:1px solid rgba(0,0,0,.06); object-fit:cover;}
.results-nav{width:42px; height:42px; border-radius:999px; border:1px solid rgba(0,0,0,.12); background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.08); display:flex; align-items:center; justify-content:center; font-size:26px; line-height:1; cursor:pointer; user-select:none;}
.results-nav:hover{transform:translateY(-1px);}
.results-dots{display:flex; gap:8px; justify-content:center; margin-top:14px;}
.results-dot{width:9px; height:9px; border-radius:999px; background:rgba(0,0,0,.22); cursor:pointer;}
.results-dot.is-active{background:rgba(0,0,0,.55);}
@media (max-width: 768px){
  .results-nav{display:none;}
  .results-slide{padding:6px;}
  .results-slide img{max-width:100%;}
}

/* --- Vorher/Nachher Horizontal Carousel (multi-image strip) --- */
.ba-carousel{position:relative; display:flex; align-items:center; gap:14px; margin-top:18px;}
.ba-nav{width:44px; height:44px; border-radius:999px; border:1px solid rgba(0,0,0,.14); background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.08); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:26px; line-height:1; user-select:none;}
.ba-nav:hover{transform:translateY(-1px);}
.ba-viewport{overflow:hidden; flex:1 1 auto;}
.ba-track{display:flex; gap:14px; padding:6px 2px; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none;}
.ba-track::-webkit-scrollbar{display:none;}
.ba-item{flex:0 0 auto; width:280px; border-radius:16px; overflow:hidden; background:#fff; border:1px solid rgba(0,0,0,.06); box-shadow:0 10px 26px rgba(0,0,0,.10);}
.ba-item img{display:block; width:100%; height:200px; object-fit:cover;}
@media (min-width: 1200px){
  .ba-item{width:340px;}
  .ba-item img{height:230px;}
}
@media (max-width: 768px){
  .ba-nav{display:none;}
  /* Make the carousel feel truly mobile: swipe + snap + full-card width */
  .ba-viewport{overflow:hidden;}
  .ba-track{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:16px;
    padding:6px 16px;
    gap:14px;
  }
  .ba-item{
    width:calc(100vw - 64px);
    max-width:460px;
    scroll-snap-align:center;
  }
  .ba-item img{height:240px;}
}

/* =========================================================
   MOBILE STABILITY + PERFORMANCE FIXES
   - Prevent horizontal overflow / "kayma" on small screens
   - Keep layout/design intact, only constrain edge cases
   ========================================================= */

/* Avoid horizontal scrollbars while keeping content readable */
html, body{max-width:100%; overflow-x:hidden;}

/* Make key statistic rows wrap naturally even if a breakpoint is missed */
.stats, .stats-grid{grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));}

/* Allow grid/flex children to shrink properly (prevents overflow) */
.header-inner, .topbar-inner, .footer-bottom,
.hero-grid, .stats, .cards, .doc-grid, .reviews,
.trust-grid, .contact-grid, .footer-grid,
.ba-meta, .mini-stats{min-width:0;}

/* Wrap long rows safely on mobile */
.topbar-inner, .header-inner, .footer-bottom, .footer-links{flex-wrap:wrap;}

/* Prevent long text/URLs from pushing the viewport */
.nav a, .footer-grid a, .review p, .card-body p, .faq-q, .what-item, .direct{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Critical: allow hero paragraph to wrap/hyphenate on very small screens */
.hero-grid > *{min-width:0;}
.hero-left, .hero-right{min-width:0;}
.hero-text{overflow-wrap:anywhere; word-break:break-word; hyphens:auto;}

/* Fix Before/After meta boxes causing horizontal overflow */
@media (max-width: 640px){
  .ba-meta{flex-direction:column; padding:14px 0 0;}
  .ba-meta > div{min-width:0; width:100%;}
}

/* Hero floating card can overflow on very small devices */
@media (max-width: 480px){
  .hero-card{left:12px; right:12px; width:auto; max-width:none;}
  .hero-image img{height:360px;}
}

/* Avoid large gaps that can create overflow */
@media (max-width: 640px){
  .mini-stats{gap:22px; flex-wrap:wrap;}
}




/* =========================================================
   MOBILE HERO IMAGE / CARD COMPACT FIX (assets/css/style.css)
   - Prevents the white stats card from covering too much
   - Makes the hero/slider image feel more horizontal on mobile
   ========================================================= */
@media (max-width: 1024px){
  .hero-image img{
    height:320px !important;
    object-fit:cover !important;
  }
  .hero-card{
    padding:10px 12px !important;
    width:auto !important;
    max-width:90% !important;
    border-radius:10px !important;
  }
  .hero-card-title{
    font-size:20px !important;
    line-height:1.15 !important;
  }
  .hero-stars{
    margin:6px 0 4px !important;
  }
}


/* ===== Fullscreen Hero Slider (with form overlay) ===== */
.hero-slider{position:relative;min-height:100vh;min-height:100svh;min-height:100dvh;background:#000;overflow:hidden}
.hero-slides{position:absolute;inset:0;z-index:1}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.02);transition:opacity .6s ease, transform 1.2s ease}
.hero-slide.is-active{opacity:1;transform:scale(1)}
/* soft overlay for readability */
.hero-slides::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.15) 100%);pointer-events:none}
.hero-slider-content{position:relative;z-index:2;min-height:100vh;min-height:100svh;min-height:100dvh;display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:36px;padding-top:110px;padding-bottom:50px}
.hero-slider .hero-badge{display:inline-block}
.hero-slider .hero-text{color:rgba(255,255,255,.85);max-width:56ch}
.hero-slider h1{color:#fff}
.hero-slider h1 .gold{color:var(--gold2)}
.hero-slider .stats .stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);backdrop-filter: blur(6px)}
.hero-slider .stat-num{color:var(--gold2)}
.hero-form{background:rgba(255,255,255,.96);border-radius:18px;box-shadow:0 18px 45px rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.55)}
.hero-form h3{margin-top:0}
.hero-form .gdpr{font-size:.85rem;color:#555}
.hero-form textarea{resize:vertical}
/* slider controls */
.hero-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;border:0;background:rgba(0,0,0,.35);color:#fff;width:44px;height:44px;border-radius:999px;display:grid;place-items:center;font-size:26px;cursor:pointer}
.hero-nav:hover{background:rgba(0,0,0,.5)}
.hero-prev{left:18px}
.hero-next{right:18px}
.hero-dots{position:absolute;left:0;right:0;bottom:18px;z-index:3;display:flex;gap:10px;justify-content:center;align-items:center}
.hero-dot{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.45)}
.hero-dot.is-active{background:rgba(255,255,255,.9)}
/* responsive */
@media (max-width: 980px){
  .hero-slider-content{grid-template-columns:1fr;align-content:start;padding-top:86px}
  .hero-slider .hero-text{max-width:none}
  .hero-nav{display:none}
  .hero-form{margin-top:10px}
}
@media (max-width: 480px){
  .hero-slider-content{padding-top:76px;padding-bottom:34px}
  .hero-form{border-radius:14px}
}
/* ========================= */
/* MOBILE FULLSCREEN FIX */
/* ========================= */

@media (max-width: 991px) {

    /* Gerçek fullscreen */
    .hero-slider,
    .swiper-slide {
        height: 100dvh !important;
        min-height: 100dvh !important;
    }

    /* Header mobil düzen */
    .header-area {
        position: absolute !important;
        top: 0;
        width: 100%;
        background: transparent !important;
        padding: 15px 20px !important;
    }

    .header-area .main-menu {
        display: none !important;
    }

    .header-area .mobile-toggle {
        display: block !important;
    }

    /* Topbar küçült */
    .topbar-area {
        font-size: 12px !important;
        padding: 5px 10px !important;
    }

    /* Slider text ortala */
    .banner-three-wrapper {
        text-align: center !important;
        padding-top: 140px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .banner-three-wrapper h1 {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }

    .banner-three-wrapper .desc {
        font-size: 14px !important;
    }

    /* Buton full genişlik */
    .button-area-banner a {
        display: block !important;
        width: 100%;
        margin-bottom: 10px;
    }

    /* İstatistik kutuları alt alta */
    .banner-counter-area {
        flex-direction: column !important;
        gap: 10px;
    }

    .banner-counter-area .counter-item {
        width: 100% !important;
    }

}
/* ========================= */
/* MOBILE HEADER CLEANUP */
/* ========================= */
@media (max-width: 991px){

  /* TOPBAR: mobilde kalabalığı kaldır */
  .topbar-area,
  .topbar,
  .header-top,
  .header-top-area,
  .topbar-wrapper{
    display:none !important;
  }

  /* Header: tek satır, düzgün hizalama */
  .header-area,
  header{
    position:absolute !important;
    top:0; left:0; right:0;
    width:100%;
    background:rgba(0,0,0,.35) !important; /* hafif şeffaf */
    backdrop-filter: blur(6px);
    z-index:9999;
  }

  /* Logo + Klinik adı tek satır */
  .logo-area,
  .logo,
  .header-logo{
    max-width: 70% !important;
  }

  .logo-area img,
  .logo img{
    max-height: 28px !important;
    width:auto !important;
  }

  /* Klinik adı yazıysa */
  .site-title,
  .brand-title,
  .logo-area .title,
  .header-area .title,
  .logo-area a{
    font-size: 14px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display:block !important;
    max-width: 100% !important;
  }

  /* Termin Buchen butonu küçültsün */
  .header-area .btn,
  .header-area .btn-primary,
  .header-area a.tmp-btn,
  .header-area a.rts-btn{
    padding: 8px 10px !important;
    font-size: 12px !important;
  }

  /* Slider içerik üst padding (header sabit oldu) */
  .banner-three-wrapper{
    padding-top: 105px !important;
  }
}

/* Mobile menu contact block */
.nav-contact{display:none;}
@media (max-width: 991px){
  .nav-contact{
    display:block;
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid rgba(255,255,255,.18);
  }
  .nav-contact-item{
    display:block;
    padding:10px 0;
    font-size:13px;
    color:#fff !important;
    opacity:.95;
  }
}
/* ========================= */
/* MOBILE: Termin right-top  */
/* ========================= */
@media (max-width: 991px){

  /* Header tek satır, logo solda - aksiyonlar sağda */
  header.header .header-inner{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px;
    flex-wrap:nowrap !important;
  }

  /* Logo taşmasın */
  header.header .logo{
    max-width:58% !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    font-size:14px !important;
    line-height:1.1 !important;
  }

  /* Sağ taraf: Termin + burger yan yana */
  header.header .header-actions{
    display:flex !important;
    align-items:center !important;
    gap:8px;
    flex:0 0 auto !important;
    white-space:nowrap !important;
  }

  /* Termin butonu küçük, sağ üstte premium dursun */
  header.header .header-actions .btn-termin{
    padding:8px 10px !important;
    font-size:12px !important;
    line-height:1 !important;
    border-radius:10px !important;
  }

  /* Burger buton */
  header.header .header-actions .burger{
    width:36px !important;
    height:36px !important;
    border-radius:10px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
}