@charset "UTF-8";
@import url("https://use.typekit.net/zcl7wuo.css");
/* Breakpoints */
/* Colors */
/* Body, Html */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-snap-type: y proximity; overflow-x: hidden; }

body { font-size: 18px; letter-spacing: 0.5px; color: #282828; margin: 0 auto; padding: 5% 0 0 0; position: relative; }

section { max-width: 100%; scroll-snap-align: start; scroll-padding: 68px; }

/* Typo */
.soleil, body { font-family: soleil, sans-serif; font-weight: 400; font-style: normal; line-height: 180%; }

.soleil-bold, h2, p.bold, ul.bold li { font-family: soleil, sans-serif; font-weight: 700; font-style: normal; line-height: 180%; }

.baskerville-urw, h1, .zitat, footer a.mail { font-family: baskerville-urw, serif; font-weight: 300; font-style: normal; line-height: 120%; letter-spacing: 0.5px; }

h1 { font-size: 55px; width: 100%; hyphens: auto; }

h2 { font-size: 18px; margin: auto 0 -5px 0; color: #963ca0; }

ul { padding: 0 0 15px 18px; margin: 0; list-style: none; }
ul li { margin: 0; }
ul li:before { content: "•"; width: 20px; display: inline-block; color: #da4c78; margin-left: -19px; }

ul.bold { padding: 40px 0 15px 18px; }
ul.bold li { letter-spacing: 1px; }

a { text-decoration: none; word-wrap: none; color: #282828; transition: all 300ms ease; letter-spacing: 0.5px; cursor: pointer; }
a:hover { animation-name: glow; animation-duration: 2s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }

.zitat { font-size: 35px; line-height: 150%; color: #282828; margin: 0; }

.zitat-autor { text-align: right; letter-spacing: 1px; margin: 40px 0 0 0; }

@media all and (max-width: 1440px) { body { font-size: 16px; }
  .soleil, body { line-height: 180%; }
  .soleil-bold, h2, p.bold, ul.bold li { line-height: 180%; } }
@media all and (max-width: 667px) { body { overflow-x: hidden; }
  h1 { font-size: 50px; }
  .zitat { font-size: 30px; } }
/* Header */
header { top: 0; left: 0; right: 0; position: fixed; display: flex; justify-content: center; background-color: #FFFFFF; transition: all 300ms ease; z-index: 9999; }
header .topnav { width: 100%; height: 110px; max-width: 1440px; padding: 0 40px 15px 40px; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; overflow: hidden; background: #FFFFFF; transition: all 300ms ease; }
header .topnav.shrink { height: 70px; padding: 20px 40px 15px 40px; }
header .topnav .logo { width: 400px; transition: all 300ms ease; }
header .topnav .logo.shrink { width: 340px; }
header .topnav nav { display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-end; }
header .topnav nav a { font-size: 20px; color: #963ca0; margin: 0 15px; }
header .topnav .subnav { margin: 0 0 -4px 0; }
header .topnav .subnav a { font-size: 14px; margin: 4px 10px; }
header .topnav .icon { width: 30px; height: 22px; display: none; position: absolute; right: 20px; top: 21px; transition: all 300ms ease; z-index: 999999; }

@media all and (max-width: 1440px) { header .topnav { height: 70px; padding: 20px 40px 15px 40px; align-items: flex-start; }
  header .topnav .logo { width: 340px; } }
@media all and (max-width: 1300px) { header .topnav nav { display: none; }
  header .topnav .subnav { display: none; }
  header .topnav .icon { display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; cursor: pointer; }
  header .topnav .icon .bar { height: 2px; background: #963ca0; }
  header .topnav .icon:hover .bar { animation-name: glow-icon; animation-duration: 2s; animation-iteration-count: infinite; }
  header .topnav.responsive { height: 90vh; flex-direction: column; justify-content: flex-start; align-items: stretch; }
  header .topnav.responsive nav { padding: 20% 0 0 0; display: flex; flex-direction: column; justify-content: center; align-items: center; animation-name: fade-in; animation-duration: 1s; animation-iteration-count: 1; animation-timing-function: ease-in-out; }
  header .topnav.responsive nav a { padding: 10px 0; }
  header .topnav.responsive nav a:after { content: ""; margin: 0; }
  header .topnav.responsive .subnav { padding: 10% 0 20% 0; display: flex; flex-direction: column; justify-content: center; align-items: center; animation-name: fade-in; animation-duration: 1s; animation-iteration-count: 1; animation-timing-function: ease-in-out; }
  header .topnav.responsive .subnav a:after { content: ""; margin: 0; }
  header .topnav.responsive .icon .bar { background: #da4c78; animation-name: none; }
  header .topnav.responsive .icon .bar.bar1 { transform: rotate(45deg) translate(7px, 7px); transition: all 300ms ease; }
  header .topnav.responsive .icon .bar.bar2 { display: none; transition: all 300ms ease; }
  header .topnav.responsive .icon .bar.bar3 { transform: rotate(-45deg) translate(7px, -7px); transition: all 300ms ease; } }
@media (orientation: landscape) and (max-width: 1140px) { header .topnav.responsive nav { padding: 12% 0 0 0; flex-direction: row; }
  header .topnav.responsive nav a { padding: 10px 0; }
  header .topnav.responsive nav a:after { content: "/"; margin: 0 10px 0 12px; }
  header .topnav.responsive nav a:last-child:after { content: ""; margin: 0; }
  header .topnav.responsive .subnav { padding: 5% 0 0 0; flex-direction: row; }
  header .topnav.responsive .subnav a:after { content: "/"; margin: 0 4px 0 8px; }
  header .topnav.responsive .subnav a:last-child:after { content: ""; margin: 0; } }
@media all and (max-width: 667px) { header .topnav { padding: 20px 20px 15px 20px; }
  header .topnav.shrink { padding: 20px 20px 15px 20px; }
  header .topnav .logo { width: 280px; }
  header .topnav .logo.shrink { width: 280px; } }
@media all and (max-width: 320px) { header .topnav .logo { width: 230px; }
  header .topnav .logo.shrink { width: 230px; } }
/* Main Content */
.wrapper { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 40px 0 40px; display: flex; transition: all 300ms ease; }
.wrapper.left { flex-direction: row; justify-content: flex-start; align-items: flex-start; }
.wrapper.right { flex-direction: row; justify-content: flex-end; align-items: flex-start; }
.wrapper.service { flex-direction: column; align-items: flex-start; flex-wrap: wrap; }
.wrapper.overlay-service { display: none; }
.wrapper.subsite { flex-direction: column; justify-content: flex-start; align-items: flex-start; margin: 3vh auto 10vh auto; }

.header-image { width: 100%; height: 100vh; padding: 0 0 10vh 0; display: flex; align-items: center; }
.header-image img { width: 100%; height: auto; transform: none; transition: all 300ms ease; }
.header-image.subsite { height: auto; margin: 40px 0 0 0; padding: 0; }
.header-image.subsite img { transform: none; }

.image-container { margin: 0 auto; width: 100%; padding: 20vw 0; position: relative; background-size: cover; background-repeat: no-repeat; }
.image-container.container-1 { background-image: url("../img/home/dr_martina_hilse.jpg"); }
.image-container.container-2 { background-image: url("../img/home/dr_martina_hilse-2.jpg"); background-position: 20%; }
.image-container .container-left { width: 450px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-end; }
.image-container .container-left.en { width: 480px; }
.image-container .container-right { width: 50%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }

#coaching { background: #f5f4f1; }

.service-container { margin: 0 auto; width: 100%; padding: 15vw 0; position: relative; display: flex; flex-direction: row; justify-content: space-between; align-items: center; overflow: hidden; }
.service-container .container-left { width: 80%; }
.service-container .container-right { width: 80%; }
.service-container .sidebutton { width: 40vh; height: 40vh; padding: 0 0 0 23vh; position: absolute; left: -20vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; background: #282828; border-radius: 100%; transition: all 300ms ease; cursor: pointer; z-index: 999; after-content: ""; after-padding-bottom: 100%; after-display: block; }
.service-container .sidebutton .story { margin: 0; padding: 0; font-size: 3vh; line-height: 200%; color: #FFFFFF; }
.service-container .sidebutton .story:after { content: ""; height: 4px; display: block; background: linear-gradient(90deg, #963ca0 0%, #82e6d2 100%); }
.service-container .sidebutton:hover .story { animation-name: glow; animation-duration: 2s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.service-container .sidebutton.active { width: 100vw; height: 100vh; margin: 0; padding: 40px 0; position: fixed; left: 0; right: 0; bottom: 0; background: #f5f4f1; border-radius: 0; overflow: scroll; z-index: 999999; animation-name: fade-in-beige; animation-duration: 0.7s; animation-timing-function: ease-in; animation-iteration-count: 1; }
.service-container .sidebutton.active .story { display: none; }
.service-container .sidebutton.active .overlay-service { width: 40%; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; animation-name: fade-in; animation-duration: 1s; animation-timing-function: ease-in; animation-iteration-count: 1; }

.close { width: 30px; height: 22px; position: fixed; right: 20px; top: 21px; transition: all 300ms ease; }
.close .bar { height: 2px; background: #da4c78; }
.close .bar.bar1 { transform: rotate(45deg) translate(7px, 7px); }
.close .bar.bar2 { transform: rotate(-45deg) translate(-6px, 5px); }
.close:hover .bar { animation-name: glow-icon; animation-duration: 2s; animation-iteration-count: infinite; }

.gradient-box { width: 100%; height: 15px; bottom: 0; position: absolute; background: linear-gradient(90deg, #963ca0 0%, #82e6d2 100%); }

@media all and (max-width: 2000px) { .header-image img { transform: rotate(0deg) scale(0.8); }
  .wrapper.service { padding: 0 40px 0 30vh; } }
@media all and (max-width: 1440px) { .service-container .sidebutton.active .overlay-service { width: 60%; } }
@media all and (max-width: 1024px) { .wrapper.right { flex-direction: row; justify-content: flex-start; }
  .wrapper.service { padding: 0 40px 50vw 40px; }
  .image-container { padding: 15vw 0 120vw 0; background-position: center bottom; }
  .image-container.container-1 { background-image: url("../img/home/dr_martina_hilse-mobile.jpg"); }
  .image-container.container-2 { background-position: center bottom; background-image: url("../img/home/dr_martina_hilse-2-mobile.jpg"); }
  .image-container .container-right { width: 100%; }
  .service-container { padding: 10vw 0 0 0; flex-direction: row; justify-content: flex-end; align-items: center; flex-wrap: wrap-reverse; }
  .service-container .container-left { width: 100%; }
  .service-container .container-right { width: 100%; }
  .service-container .sidebutton { width: 60vw; height: 60vw; padding: 0 0 37vw 0; bottom: -30vw; left: 50%; transform: translate(-50%, 0%); justify-content: flex-end; align-items: center; }
  .service-container .sidebutton.active { bottom: 0; left: 50%; justify-content: center; }
  .service-container .sidebutton.active .overlay-service { width: 100%; }
  .service-container .sidebutton .story { font-size: 4vw; } }
@media all and (max-width: 667px) { .wrapper { padding: 0 20px 0 20px; }
  .wrapper.service { padding: 0 20px 30vh 20px; }
  .header-image img { transform: rotate(90deg) scale(1.3); }
  .image-container { padding: 30vw 0 150vw 0; }
  .image-container.container-2 { padding: 30vw 0 190vw 0; }
  .service-container { padding: 15vw 0 0 0; }
  .service-container .sidebutton { width: 80vw; height: 80vw; padding: 0 0 50vw 0; bottom: -40vw; left: 50%; transform: translate(-50%, 0%); }
  .service-container .sidebutton.active { justify-content: flex-start; }
  .service-container .sidebutton .story { font-size: 5vw; } }
@media (orientation: landscape) and (max-width: 667px) { .header-image { padding: 0; }
  .header-image img { transform: rotate(0deg) scale(0.8); } }
@media all and (max-width: 320px) { .image-container.container-2 { padding: 30vw 0 250vw 0; } }
/* Footer */
footer { width: 100%; padding: 40px 0 400px 0; position: relative; background: #282828; }
footer .gradient-box { top: 0; }
footer .wrapper { flex-direction: row; justify-content: space-between; align-items: center; }
footer .contact { margin: 40px 0 40px 0; display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap; }
footer a { margin: 15px 60px 15px 0; }
footer a.mail { font-size: 30px; white-space: nowrap; color: #82e6d2; /*&:before content: '' background: url("../img/basics/mail-icon.svg") background-repeat: no-repeat width: 40px height: 30px margin: 13px 20px 0 0 display: block float: left */ }
footer a.xing { background: url("../img/basics/xing-icon.svg"); background-repeat: no-repeat; width: 30px; height: 35px; }
footer a.skype { background: url("../img/basics/skype-icon.svg"); background-repeat: no-repeat; width: 35px; height: 35px; }
footer .subnav a { color: #FFFFFF; margin: 0 15px; }
footer .subnav a:first-child { margin: 0 15px 0 0; }
@media all and (max-width: 1440px) { footer .wrapper { flex-direction: column; justify-content: center; align-items: center; }
  footer .wrapper a { margin: 15px 30px; }
  footer .wrapper .subnav a:last-child { margin: 0 0 0 15px; } }
@media all and (max-width: 667px) { footer a { width: 100%; }
  footer a.mail { font-size: 25px; text-align: center; /*&:before margin: 5px 20px 0 0 */ } }

/* Animations */
@keyframes glow { 0% { color: #963ca0; }
  50% { color: #82e6d2; }
  100% { color: #963ca0; } }
@keyframes glow-icon { 0% { background: #963ca0; }
  50% { background: #82e6d2; }
  100% { background: #963ca0; } }
@keyframes fade-in { 0% { opacity: 0; }
  50% { opacity: 0; }
  100% { opacity: 1; } }
@keyframes fade-in-beige { 0% { background: #282828; }
  75% { background: #282828; }
  100% { background: #f5f4f1; } }