:root{
  /* Grundfarbe: das Beige des Footers */
  --beige:#F4EFE4;
  --beige-2:#EDE7D9;
  --white:#faf9f6;

  /* Akzente aus dem Logo */
  --petrol:#1D4E5C;
  --petrol-deep:#123640;
  --petrol-soft:#5A8391;
  --gold:#C49A5C;
  --gold-soft:#DFCBAA;

  --ink:#16292F;
  --muted:#5C6B70;
  --line:rgba(29,78,92,.16);
  --line-strong:rgba(29,78,92,.32);
  --shadow:0 30px 60px -30px rgba(18,54,64,.45);
  --radius:16px;
  --radius-btn:999px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--beige);color:var(--ink);
  font-family:"Manrope",system-ui,sans-serif;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;margin:0;letter-spacing:.005em}
p{margin:0}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
::selection{background:var(--petrol);color:#fff}

.wrap{width:min(1120px,90vw);margin-inline:auto}

.eyebrow{
  font-size:.68rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  color:var(--petrol);display:inline-flex;align-items:center;gap:.9em;
}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--gold)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.65em;font-weight:600;font-size:.9rem;
  letter-spacing:.02em;padding:.85em 1.6em;border:1px solid transparent;cursor:pointer;
  border-radius:var(--radius-btn);
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.btn svg{width:17px;height:17px}
.btn-primary{background:var(--petrol);color:#fff}
.btn-primary:hover{background:var(--petrol-deep)}
.btn-gold{background:var(--gold);color:var(--petrol-deep)}
.btn-gold:hover{background:#B0873F}
.btn-ghost{background:transparent;color:var(--petrol);border-color:var(--line-strong)}
.btn-ghost:hover{background:var(--petrol);border-color:var(--petrol);color:#fff}
.btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn-ghost-light:hover{background:rgba(255,255,255,.12)}

/* ---------- Header ---------- */
header{
  position:sticky;top:0;z-index:50;background:var(--white);
  border-bottom:1px solid transparent;transition:border-color .3s ease;
}
header.scrolled{border-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand .logo-img{height:40px;width:auto}
.menu{display:flex;align-items:center;gap:38px}
.menu nav{display:flex;gap:30px}
.menu nav a{
  font-size:.82rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);position:relative;padding:4px 0;
}
.menu nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);transition:width .3s ease}
.menu nav a:hover{color:var(--petrol)}
.menu nav a:hover::after{width:100%}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;color:var(--petrol)}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:min(88vh,860px);display:flex;align-items:center;
  overflow:hidden;background:var(--beige);
}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.hero-bg img.loaded{opacity:1}
/* Neutraler Untergrund: Textur nur als leiser Ton, kein Motiv */
.hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,rgba(244,239,228,.94) 0%,rgba(244,239,228,.80) 55%,rgba(237,231,217,.88) 100%),
    radial-gradient(70% 90% at 78% 50%,rgba(244,239,228,.30),rgba(237,231,217,.75) 100%);
}
.hero-inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.02fr .98fr;gap:64px;align-items:center;padding:80px 0;
}
.hero-text{max-width:34rem}
.hero-text .eyebrow{margin-bottom:20px}
.hero h1{font-size:clamp(2.5rem,4.6vw,4rem);line-height:1.08;color:var(--petrol)}
.hero h1 em{font-family:"Allura",cursive;font-style:normal;color:var(--gold);font-size:1.2em;line-height:.8}
.hero .lead{margin-top:22px;font-size:1.02rem;color:var(--muted);max-width:40ch}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}

/* Logo-Spalte, durch eine goldene Haarlinie abgesetzt */
.hero-mark{
  display:flex;align-items:center;justify-content:center;
  padding-left:64px;border-left:1px solid rgba(196,154,92,.45);
}
.hero-logo{width:min(100%,400px);height:auto}

/* ---------- Sections ---------- */
section{padding:110px 0}
.sec-head{max-width:660px;margin-bottom:60px}
.sec-head h2{font-size:clamp(2.1rem,3.8vw,3.1rem);color:var(--petrol);margin:18px 0 0;line-height:1.12;text-wrap:balance}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .eyebrow::before{display:none}

/* ---------- Behandlungen: reine Liste ---------- */
.leistungen{background:var(--beige-2)}
.leistungen ul{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(5,auto);
  grid-auto-flow:column;column-gap:64px;
  border-top:1px solid var(--line);
}
.leistungen li{
  display:flex;align-items:center;gap:16px;padding:20px 4px;
  border-bottom:1px solid var(--line);
  font-size:1.06rem;font-weight:500;color:var(--ink);
}
.leistungen li svg{
  width:20px;height:20px;flex:none;stroke:var(--petrol);stroke-width:2.2;
  fill:none;stroke-linecap:round;stroke-linejoin:round;
}

/* ---------- Praxis ---------- */
.praxis{background:var(--beige)}
.praxis-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.praxis-info h2{font-size:clamp(2.1rem,3.8vw,3.1rem);color:var(--petrol);margin:18px 0 20px;line-height:1.12}
.praxis-info .claim{
  font-family:"Cormorant Garamond",Georgia,serif;font-size:1.5rem;line-height:1.45;
  color:var(--muted);max-width:26ch;
}
.sprachen{margin-top:30px;display:flex;align-items:center;gap:14px}
.sprachen svg{width:22px;height:22px;flex:none;stroke:var(--gold)}
.sprachen .s-label{
  display:block;font-size:.66rem;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted);margin-bottom:4px;
}
.sprachen p{font-size:1.02rem;font-weight:600;color:var(--petrol);letter-spacing:.01em}

.hours{margin-top:34px;border-top:1px solid var(--line)}
.hours .row{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.hours .row span:first-child{color:var(--muted)}
.hours .row span:last-child{font-weight:600;color:var(--petrol)}
.contact-line{margin-top:30px;display:flex;flex-direction:column;gap:13px}
.contact-line a,.contact-line span{display:flex;align-items:center;gap:13px;color:var(--muted);font-size:.95rem}
.contact-line svg{width:17px;height:17px;stroke:var(--gold);stroke-width:1.8;fill:none;flex:none}
.contact-line a:hover{color:var(--petrol)}
.praxis-cta{margin-top:32px}

/* ---------- Karussell ---------- */
.carousel{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--beige-2);box-shadow:var(--shadow)}
.car-viewport{overflow:hidden;border-radius:var(--radius)}
.car-track{display:flex;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.slide{position:relative;margin:0;flex:0 0 100%;aspect-ratio:4/5;overflow:hidden}
.slide img{width:100%;height:100%;object-fit:cover}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(18,54,64,.6) 100%)}
.slide figcaption{
  position:absolute;left:20px;bottom:18px;z-index:2;color:#fff;
  font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
}
.car-btn{
  position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;border-radius:50%;
  background:rgba(244,239,228,.92);color:var(--petrol);font-size:1.4rem;line-height:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .2s ease;z-index:3;
}
.car-btn:hover{background:#fff}
.car-prev{left:14px}
.car-next{right:14px}
.car-dots{position:absolute;left:0;right:0;bottom:18px;display:flex;gap:7px;justify-content:center;z-index:3}
.car-dots button{width:7px;height:7px;border:0;border-radius:999px;background:rgba(255,255,255,.5);cursor:pointer;padding:0;transition:width .3s ease,background .3s ease}
.car-dots button.active{background:var(--gold);width:22px}

/* ---------- Bewertungen (Elfsight-Widget) ---------- */
.reviews{background:var(--beige-2)}
/* reserviert Platz, solange das Widget lädt – verhindert Layout-Sprung */
.reviews [class^="elfsight-app-"]{min-height:280px}
.review-cta{margin-top:40px;text-align:center}

/* ---------- Footer ---------- */
footer{background:var(--white);padding:80px 0 40px;border-top:1px solid var(--line)}
.foot-grid{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap;align-items:flex-start}
.foot-brand{max-width:300px}
.foot-logo{height:120px;width:auto;margin-bottom:14px}
.foot-brand p{color:var(--muted);font-size:.9rem}
.foot-col h4{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--petrol);margin:0 0 16px;font-weight:600}
.foot-col a,.foot-col p{display:block;color:var(--muted);font-size:.9rem;margin-bottom:9px}
.foot-col a:hover{color:var(--petrol)}
.copyright{
  margin-top:56px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.78rem;color:var(--muted);
}

.legal-links{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.legal-links a:hover{color:var(--petrol)}
.linkish{
  background:none;border:0;padding:0;cursor:pointer;color:inherit;
  font:inherit;font-size:inherit;
}
.linkish:hover{color:var(--petrol)}

/* ---------- Consent-Gate für das Bewertungs-Widget ---------- */
.consent-gate{
  border:1px dashed var(--line-strong);border-radius:var(--radius);
  padding:40px 32px;text-align:center;max-width:600px;margin-inline:auto;
}
.consent-gate p{color:var(--muted);font-size:.95rem;line-height:1.6;margin-bottom:22px}
.consent-gate a{color:var(--petrol);text-decoration:underline;text-underline-offset:3px}

/* ---------- Cookie-Banner ---------- */
.cookie{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:var(--white);border-top:1px solid var(--line);
  box-shadow:0 -18px 44px -28px rgba(18,54,64,.5);
}
.cookie[hidden]{display:none}
.cookie-inner{
  width:min(1120px,90vw);margin-inline:auto;padding:24px 0;
  display:flex;align-items:center;justify-content:space-between;gap:36px;
}
.cookie h3{
  font-family:"Manrope",sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--petrol);margin:0 0 8px;
}
.cookie p{font-size:.88rem;line-height:1.6;color:var(--muted);max-width:74ch}
.cookie p a{color:var(--petrol);text-decoration:underline;text-underline-offset:3px}
.cookie-actions{display:flex;gap:12px;flex:none}

/* ---------- Impressum / Datenschutz ---------- */
.legal{background:var(--beige);padding:76px 0 100px}
.legal .wrap{max-width:760px}
.legal h1{font-size:clamp(2.2rem,4vw,3.1rem);color:var(--petrol);margin:16px 0 0;line-height:1.12}
.legal h2{
  font-size:1.5rem;color:var(--petrol);margin:52px 0 14px;
  padding-top:22px;border-top:1px solid var(--line);
}
.legal h3{font-size:1.18rem;color:var(--ink);margin:28px 0 8px}
.legal p,.legal li{color:var(--muted);font-size:.98rem;line-height:1.75}
.legal p+p{margin-top:12px}
.legal ul{margin:12px 0 0;padding-left:20px}
.legal li{margin-bottom:7px}
.legal a{color:var(--petrol);text-decoration:underline;text-underline-offset:3px}
.legal .lead-text{font-size:1.06rem;margin-top:18px}
.legal address{font-style:normal;line-height:1.8;color:var(--muted);margin-top:12px}
.legal .todo{
  display:block;background:rgba(196,154,92,.16);border-left:3px solid var(--gold);
  padding:14px 18px;margin:14px 0;font-size:.9rem;color:var(--ink);border-radius:0 8px 8px 0;
}
.legal .back{margin-top:64px}

.float-call{
  position:fixed;right:20px;bottom:20px;z-index:60;display:none;width:54px;height:54px;border-radius:50%;
  background:var(--petrol);color:#fff;align-items:center;justify-content:center;box-shadow:var(--shadow);
}
.float-call svg{width:23px;height:23px}

/* ---------- Responsive ---------- */
@media(max-width:940px){
  .menu nav{display:none}
  .call-cta{display:none}
  .burger{display:block}
  header.nav-open nav{
    display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:var(--white);border-bottom:1px solid var(--line);padding:8px 0;
  }
  header.nav-open nav a{padding:15px 5vw;border-top:1px solid var(--line)}
  .float-call{display:flex}
  .hero{min-height:auto}
  .hero-inner{grid-template-columns:1fr;gap:34px;justify-items:center;text-align:center;padding:56px 0}
  /* Logo unter den Text und deutlich kleiner – hält die Hero kurz */
  .hero-mark{
    padding-left:0;border-left:0;width:100%;
    padding-top:32px;border-top:1px solid rgba(196,154,92,.45);
  }
  .hero-logo{width:min(58%,170px)}
  .hero-text{max-width:none}
  .hero .eyebrow::before{display:none}
  .hero .lead{margin-inline:auto}
  .hero-actions{justify-content:center}
  .hero-overlay{
    background:linear-gradient(180deg,rgba(244,239,228,.90) 0%,rgba(244,239,228,.84) 50%,rgba(237,231,217,.92) 100%);
  }
  .cookie-inner{flex-direction:column;align-items:stretch;gap:20px;padding:20px 0}
  .cookie-actions{flex-direction:column}
  .cookie-actions .btn{justify-content:center}
  .praxis-grid{grid-template-columns:1fr;gap:44px}
  .leistungen ul{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}
  section{padding:84px 0}
}
@media(orientation:portrait) and (min-width:601px) and (max-width:1180px){
  .hero{min-height:min(74vh,780px)}
}
@media(orientation:landscape) and (max-width:1180px) and (max-height:820px){
  .hero{min-height:auto}
  .hero-inner{padding:60px 0}
}
@media(max-width:600px){
  section{padding:66px 0}
  .sec-head{margin-bottom:40px}
  .hero-inner{padding:40px 0;gap:26px}
  .hero-mark{padding-top:26px}
  .hero-logo{width:min(46%,130px)}
  .hero .lead{font-size:.95rem}
  .hero-actions{margin-top:28px;width:100%;flex-direction:column}
  .hero-actions .btn{justify-content:center}
  .leistungen li{font-size:1rem;padding:17px 2px}
  .slide{aspect-ratio:4/3}
  .foot-logo{height:96px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto}
  .hero-bg img{opacity:1}
}