@charset "UTF-8";

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  src: url(../../fonts/opensans.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  src: url(../../fonts/opensans.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  src: url(../../fonts/opensans.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  src: url(../../fonts/opensans.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  src: url(../../fonts/opensans.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  src: url(../../fonts/opensans.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(../../fonts/roboto.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../../fonts/roboto.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(../../fonts/roboto.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  --text:#364854;
  --text-soft:#5b6b74;
  --blue:#899dab;
  --blue-dark:#6f8796;
  --rose:#ddaca1;
  --rose-light:#f6e8e5;
  --red:#a7270a;
  --white:#fff;
  --light:#f3f4f4;
  --border:rgba(54,72,84,.22);
  --border-light:rgba(255,255,255,.42);
  --shadow:0 2px 14px rgba(20,35,42,.12);
  --radius:4px;
  --max:1080px;
  --narrow:820px;
  --nav-height:54px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-height) + 12px);overflow-x:clip}
body{margin:0;color:var(--text);background:var(--white);font-family:"Roboto",sans-serif;font-size:16px;font-weight:300;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--red);text-decoration:none;text-underline-offset:3px}
a:hover,a:focus-visible{text-decoration:underline}
p{margin:.65rem 0 1.05rem}strong,b{font-weight:700}
ul{margin:.6rem 0 1rem;padding-left:1.2rem}li{margin:.35rem 0}
button,input,textarea,select{font:inherit}
:focus-visible{outline:3px solid rgba(167,39,10,.42);outline-offset:3px}

h1,h2,h3,h4{margin:0 0 1rem;font-weight:300;line-height:1.25}
h1{font-size:1.4rem}
h2{font-size:1.2rem;text-align:center;text-transform:uppercase;letter-spacing:.02em}
h3{font-size:1rem;text-transform:uppercase;letter-spacing:.02em}
h4{font-size:1rem;font-weight:500}

.container,.narrow{width:calc(100% - 28px);margin-inline:auto}
.container{max-width:var(--max)}
.narrow{max-width:var(--narrow)}
.center{text-align:center}
.skip-link{position:fixed;left:12px;top:10px;z-index:200;transform:translateY(-160%);padding:.6rem 1rem;background:#fff;color:var(--text);box-shadow:var(--shadow)}
.skip-link:focus{transform:none}

/* Hero */
.hero{position:relative;min-height:calc(100vh - 50px);display:grid;place-items:center;overflow:hidden;background:#6f8796 url("../../media/wellen.jpg") center/cover no-repeat}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(1.25);}
.hero::after{content:"";position:absolute;inset:0;background:rgba(20,35,42,.24)}
.hero-content{position:relative;z-index:1;width:min(100% - 28px,1000px);padding:64px 0 100px;color:#fff;text-align:center;top:15%}
.hero-logo{width:120px;margin:0 auto 18px}
.hero h1{margin-inline:auto;}
.hero h1 span{display:block;margin-top:.4rem;font-size:.75em;line-height:1.35;font-weight:300}
.hero h2{text-transform:none;font-weight: 300}

/* Navigation: mobile first */
.nav-sentinel{height:0;overflow:hidden}
.site-nav{position:-webkit-sticky;position:sticky;top:0;z-index:100;background:var(--blue);box-shadow:var(--shadow)}
.site-nav.is-stuck{box-shadow:0 4px 18px rgba(20,35,42,.22)}
.site-nav.is-fixed{position:fixed;top:0;left:0;right:0;width:100%;}
body.nav-is-fixed{padding-top:var(--nav-height);}
.nav-inner{width:100%;max-width:none}
.mobile-menu{display:flex;align-items:center;justify-content:center;gap:.7rem;width:100%;min-height:var(--nav-height);padding:.65rem 1rem;border:0;background:transparent;color:#fff;cursor:pointer;text-transform:uppercase;letter-spacing:.05em;font-size:.9rem;font-weight:500}
.menu-icon{display:grid;gap:4px;width:21px}
.menu-icon span{display:block;height:2px;background:#fff;border-radius:2px;transition:transform .2s,opacity .2s}
.site-nav.is-open .menu-icon span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.site-nav.is-open .menu-icon span:nth-child(2){opacity:0}
.site-nav.is-open .menu-icon span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-list{display:none;flex-direction:column;gap:0;margin:0;padding:0;list-style:none;background:var(--blue);max-height:calc(100svh - var(--nav-height));overflow-y:auto;overscroll-behavior:contain}
.site-nav.is-open .nav-list{display:flex}
.nav-list li{margin:0}
.nav-list a{display:block;padding:.82rem 1rem;border-top:1px solid rgba(255,255,255,.16);color:#fff;font-size:.92rem;font-weight:500;line-height:1.35;text-align:center;text-transform:uppercase;white-space:normal}
.nav-list a:hover,.nav-list a:focus-visible{background:rgba(255,255,255,.1);text-decoration:none}

/* Sections */
.section{padding:48px 0;background:#fff}
.section--spacer{height:50px; background-color:#efefef;}
.section--compact{padding:34px 0;}
.section--rose{background:var(--rose);color:#fff}
.section--blue{background:var(--blue);color:#fff}
.section--light{background:var(--light)}
.section--soft{background:var(--rose-light)}
.columns,.contact-grid{display:grid;grid-template-columns:1fr;gap:30px}
.contact-block table{border-collapse:collapse}
.contact-block td{padding:.05rem .7rem .05rem 0;vertical-align:top}
.intro{max-width:820px;margin-inline:auto;font-size:1.1rem;text-align:center}
.attention{max-width:820px;box-sizing: border-box;border: 1px solid #fff;margin-inline:auto;font-size:1.1rem;text-align:center;padding: 1em;}
.half-logo{width:110px;margin:1.8rem auto 0}

/* Doctor */
.doctor{width:calc(100% - 28px);max-width:820px;margin-inline:auto;padding-inline:0}
.doctor-photo{width:100%;max-height:720px;object-fit:cover;margin:1.2rem auto 1.5rem}

/* Team */
.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 16px}
.team-card{min-width:0}
.team-card img{width:100%;aspect-ratio:1/1.5;object-fit:cover;margin-bottom:.8rem}
.team-card p{margin-top:0}
.team-card strong{display:inline-block;margin-bottom:.15rem;font-size:1.2rem;text-transform:uppercase;font-weight:300;}

/* Accordions */
.accordion{border-top:1px solid var(--border)}
.section--blue .accordion{border-color:var(--border-light)}
.accordion-item{border-bottom:1px solid var(--border)}
.section--blue .accordion-item{border-color:var(--border-light)}
.accordion-trigger{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;min-height:54px;padding:.9rem 0;border:0;background:transparent;color:inherit;font:inherit;font-size:1rem;font-weight:300;line-height:1.35;text-align:left;text-transform:uppercase;cursor:pointer}
.accordion-trigger::after{content:"+";flex:0 0 auto;font-size:1.55rem;font-weight:300;line-height:1}
.accordion-trigger[aria-expanded="true"]::after{content:"−"}
.accordion-panel{display:none;padding:0 0 .8rem;color:inherit}
.accordion-panel.is-open{display:block}
.accordion-panel p:last-child,.accordion-panel ul:last-child{margin-bottom:.2rem}

/* Gallery / content media */
.gallery{display:grid;grid-template-columns:1fr;gap:18px}
.gallery img{width:100%;height:auto}
.hormone-image{width:100%;margin:1rem 0 1.6rem}
.service-link{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.7rem 1.25rem;background:var(--blue);color:#fff;text-transform:uppercase;font-weight:500;text-align:center}
.service-link:hover,.service-link:focus-visible{background:var(--blue-dark);color:#fff;text-decoration:none}
.is-stuck.is-fixed .bubble.bubble-top {display: none;}
#leistungen .bubble {left: 200px;padding-top:65px;}
.bubble.bubble-top {right: 50px;top: -135px;z-index: -1;color: #fff;background-color: rgba(255, 255, 255, 0.2);padding-top: 4em;}
.bubble.bubble-top a {color: #fff;}
.bubble {display: none;width: 180px;height: 180px;border-radius: 50%;background-color: rgba(172, 51, 24, 0.3);font-weight: 400;color: #a7270a;padding: 2.75em 2.75em;box-sizing: border-box;position: absolute;}
.bubble::before {content: '+';display: block;margin: -.85em 0 0 -.5em;float: left;width: .5em;font-size: 1.75em;color: #fff;}

/* Contact */
.map-image{width:100%;border:0}
.instagram{display:inline-flex;align-items:center;gap:10px}
.instagram img{width:30px;height:30px}

/* Legal pages */
.page-header{padding:28px 0;background:var(--blue);color:#fff}
.page-header-logo img{width:70px;margin:0 auto 12px}
.page-header h1{font-size:clamp(1.55rem,6vw,2.7rem);margin:0}
.legal{min-height:60vh;padding:42px 0}
.legal h1{text-align:left;text-transform:uppercase;margin-bottom:2rem}
.legal h2{text-align:left;font-size:1.45rem;margin-top:2.5rem}
.legal h3{margin-top:1.8rem}
.legal h4{margin-top:1.3rem}
.legal .entry-content{max-width:820px;margin:auto}

/* Footer */
.site-footer{padding:24px 0;background:var(--blue);color:#fff;text-align:center;font-size:.9rem}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:.55rem}
.site-footer a{color:#fff}
.footer-links{display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem 1.2rem}

/* Tablet */
@media (min-width:600px){
.container,.narrow{width:calc(100% - 48px)}
.doctor{width:calc(100% - 48px)}
.hero-content{width:min(100% - 48px,1000px)}
.section{padding:60px 0}
.section--compact{padding:42px 0}
.intro{font-size:1.22rem}
.columns,.contact-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:42px}
.gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.team-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
h1{font-size:2.5rem}
h2{font-size:2rem;text-align:center;text-transform:uppercase;letter-spacing:.02em}
h3{font-size:1.4rem;text-transform:uppercase;letter-spacing:.02em}
h4{font-size:1.2rem;font-weight:500}
}

/* iPad / tablet portrait and landscape: keep compact navigation until desktop width */
@media (min-width:1100px){
:root{--nav-height:58px}
.mobile-menu{display:none}
.nav-inner{width:min(100%,1200px)}
.nav-list{display:flex;flex-direction:row;align-items:stretch;justify-content:center;max-height:none;overflow:visible}
.nav-list a{padding:1.08rem .62rem;font-size:.78rem;white-space:nowrap;border-top:0}
h1{font-size:3.375em}
}

@media (min-width:1250px){
.nav-list{gap:.15rem}
.nav-list a{padding-inline:.72rem;font-size:1rem}
.bubble {display: block;}
}
@media (min-width::1631px){
#leistungen .bubble {left: 200px;}
}

@media (min-width:1401px) and (max-width:1630px){
#leistungen .bubble {left: 100px;}
.bubble.bubble-top {opacity: 0;pointer-events: none}
}

@media (min-width:1250px) and (max-width:1400px){
#leistungen .bubble {left: 25px;}
.bubble.bubble-top {opacity: 0;pointer-events: none}
}

@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.menu-icon span{transition:none}
}