*{
  margin: 0;
  padding: 0;
}
body {
  overflow-x: hidden;
}
:root {
  /* Colors */
  --gradient-form: linear-gradient(36deg, rgba(188,208,219,1) 0%, rgba(220,232,239,1) 86%);
  --it-gradient: linear-gradient(0deg, rgba(16,77,199,1) 0%, rgba(0,157,226,1) 100%);
  --it-white: #E7F0F5;
  --it-blue: #009DE2;
  --it-grey: #3A4856;
  --it-grey-200: #58697a;
  --it-hover: #037CB1;

  
  /* Elements */
  --arrow-slide-100: url(/wp-content/themes/itaerzte/images/arrow_slide_100.svg);
  --arrow-slide-40: url(/wp-content/themes/itaerzte/images/arrow_slide_40.svg);
  --arrow-secondary-arrow: url(/wp-content/themes/itaerzte/images/btn-secondary-arrow.svg);
  --radius: 100px; 

  /* Breakpoints */
  --breakpoint-laptop: 1380px; 
  --breakpoint-mobile: 870px; 

  /* Layout */
  --layout-screen: 1300px;
  --layout-inner: 860px;
 
  /* Margin */
  --margin-top-screen: 100px;
  --margin-top-mobile: 40px;
  --margin-bottom-screen: 150px;
  --margin-bottom-mobile: 50px;
  --padding: 0 2rem;
  
  /* Fonts */
  --font-family: 'MontserratRegular', sans-serif; 
  --fs-bottom: 0.825rem;
}  

/* Montserrat Light */
@font-face {
  font-family: 'MontserratLight';
  src: url('https://itfuerpraxis.de/wp-content/themes/itaerzte/fonts/Montserrat-Light.woff2') format('woff2'),
       url('https://itfuerpraxis.de/wp-content/themes/itaerzte/fonts/Montserrat-Light.woff') format('woff');
  font-weight: 300; /* Light */
  font-style: normal;
  font-display: swap;
}

/* Montserrat Regular */
@font-face {
  font-family: 'MontserratRegular';
  src: url('https://itfuerpraxis.de/wp-content/themes/itaerzte/fonts/Montserrat-Regular.woff2') format('woff2'),
       url('https://itfuerpraxis.de/wp-content/themes/itaerzte/fonts/Montserrat-Regular.woff') format('woff');
  font-weight: 400; /* Regular */
  font-style: normal;
  font-display: swap;
}

/* Montserrat SemiBold */
@font-face {
  font-family: 'MontserratSemiBold';
  src: url('https://itfuerpraxis.de/wp-content/themes/itaerzte/fonts/Montserrat-SemiBold.woff2') format('woff2'),
       url('https://itfuerpraxis.de/wp-content/themes/itaerzte/fonts/Montserrat-SemiBold.woff') format('woff');
  font-weight: 600; /* SemiBold */
  font-style: normal;
  font-display: swap;
}

li {
  list-style: none;
}

h1, h2, h3, h4, h5, h6, p {
  max-width: 70%;
  margin-bottom: var(--fs-bottom); 
  font-family: var(--font-family);
  text-transform: none; 
  word-break: break-word;
  hyphens: auto;
  font-weight: 400;
} 

h1 { 
  font-size: calc(24px + (80 - 24) * ((100vw - 300px) / (3840 - 300)));
  line-height: 1.2; 
}

h2 { 
  font-size: calc(23px + (60 - 23) * ((100vw - 300px) / (3840 - 300)));
  line-height: 1.35; 
}

h3 { 
  font-size: calc(52px + (60 - 52) * ((100vw - 300px) / (3840 - 300)));
  line-height: 1.2; 
}

h4 { 
  font-size: calc(21px + (36 - 21) * ((100vw - 300px) / (3840 - 300)));
  line-height: 1.75; 
}

h5 { 
  font-size: calc(18px + (32 - 18) * ((100vw - 300px) / (3840 - 300)));
  line-height: 1.4; 
}

p { 
  font-size: calc(21px + (28 - 21) * ((100vw - 300px) / (3840 - 300)));
  line-height: 1.5; 
  hyphens: none;
}

p > em {
  font-size: calc(12px + (80 - 42) * ((100vw - 300px) / (3840 - 300)));
  line-height: 1.2;
  font-style: italic;
}

p > strong {
  font-family: var(--font-family);
  color: #000000;
}

p > a {
  text-decoration: none;
  color: var(--it-blue);
  font-family: 'MontserratSemiBold', sans-serif;
  transition: 0.5s color ease;
}

p > a:hover {
  color: var(--it-hover);
}

a {
  font-family: var(--font-family);
  text-transform: none;
  list-style: none;
  text-decoration: none;
}

.wrapper {
  max-width: var(--layout-screen);
  margin: 0 auto!important;
}

.layout {
  max-width: var(--layout-screen);
  margin: 0 auto;
  padding: 0 2rem;
  padding-top: var(--margin-top-screen);
  padding-bottom: var(--margin-bottom-screen);
  box-sizing: border-box;
}

.layout-s {
  max-width: var(--layout-inner);
  margin: 0 auto;
  padding: 0 2rem;
  padding-top: var(--margin-top-screen);
  padding-bottom: var(--margin-bottom-screen);
  box-sizing: border-box;
}


ul {
  list-style: none; 
  padding: 0; 
  margin: 0;  
}

ul li {
  position: relative; 
  margin-bottom: 15px;  
  padding-left: 20px;  
}

ul li:last-of-type {  
  margin-bottom: 0px;   
}

ul li::before {
  content: '';  
  position: absolute;
  left: 0;  
  top: 9px;  
  width: 10px; 
  height: 0.5px;  
  background-color: #000;  
  transform: translateY(-50%); 
}

ul li strong {
  font-weight: bold;  
  color: #000000;  
}

.layout.no-margin,
.layout-s.no-margin {
  padding-bottom: 0;
}

.wrapper > .margin-top {
  margin-top: 50px;
}

/* Buttons */
.button-primary-wrapper {
  position: relative;
  width: fit-content;
}

.button-primary {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-width: fit-content;
  min-height: 56px;
  font-family: var(--font-family);
  border: none;
  border-radius: 100px;
  cursor: pointer; 
  text-decoration: none;
  transition: all 0.5s linear;
  margin-top: 40px;
  position: relative;
}

.button-primary > span {
  font-size: 30px; 
  text-transform: lowercase;
  padding: 0 10px 0 0;
  z-index: 10;
  transform: translateX(30px);
  color: #ffffff;
}

.button-primary.black > span {
 color: var(--it-grey); 
}

.button-primary.black:hover > span {
  color: #ffffff; 
 }


.button-primary > .icon {
  font-size: 2em;
  transition: all 0.5s linear;
  width: 30px;
  height: 30px;
  margin-left: 40px;
  padding-right: 30px;
  width: auto;
  display: block;
}

.button-primary:hover > .icon {
  transform: rotate(-90deg); 
}

.button-.button-primary.blue {
  background: none;
  color: #000000; 
}

.button-primary.blue::before {
  content: "";
  display: block;
  width: 56px;
  height: 56px;
  background-color: var(--it-blue);
  position: absolute;
  border-radius: 100px;
  left: 0;
  z-index: 0;
  transition: all 600ms ease;
}

.button-primary.blue:hover::before {
  width: 100%;
  background-color: var(--it-hover);
}

.button-primary.black.blue:hover::before {
  width: 100%;
  color: #ffffff;
  background-color: var(--it-hover);
}

.button-primary.blue:hover .icon {
  transform: translateX(10px);
  display: block;
  width: auto;
} 



/* Button Secondary */
.button-secondary {
  background-color: var(--it-blue);
  padding: 12px 25px;
  box-sizing: border-box;
  color: #ffffff;
  display: flex;
  align-items: center;
}

.button-secondary::after {
  content: var(--arrow-secondary-arrow);
  width: 16px;
  height: 15px;
}


/* ++++++++++++++++++++++++++++++++ */
/********** Footer **************/
/* ++++++++++++++++++++++++++++++++ */

.footer-leiste {
  background: var(--it-grey);
  overflow: hidden;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  max-width: 100vw;
  width: 100vw;
  padding: 2rem;
  box-sizing: border-box;
}

.footer-leiste > div {
  max-width: var(--layout-screen);
  margin: 0 auto;
  display: flex; 
  justify-content: space-between;
  align-items: center;
} 

.footer-leiste > div .copyright p {
  font-size: 14px;
  color: #ACB1B5;
  max-width: 100%;
  margin: 0;
} 

.footer-leiste > div .footer-nav ul {
  display: flex;
  margin: 0;
  gap: 20px;
} 

.footer-leiste > div .footer-nav ul li::before {
  content: none;
}

.footer-leiste > div .footer-nav ul li > a {
  color: #ACB1B5;
  font-size: 14px;
}


/* ++++++++++++++++++++++++++++++++ */
/********** Navigation **************/
/* ++++++++++++++++++++++++++++++++ */

nav.navigation ul {
  padding: 0;
  margin-top: 30px;
}

nav.navigation ul li::before {
  display: none;
}

nav.navigation ul li {
  font-size: 24px;
  font-family: var(--font-family);
  text-transform: none;
  list-style: none; 
  display: flex;
  align-items: center;
  position: unset;
  margin: unset;
  padding: unset;
} 

nav.navigation ul li a {
  font-size: 24px;
  font-family: var(--font-family);
  font-weight: 400;
}

nav {
  width: 100%;  
  background-color: transparent;
  position: relative;
  position: fixed;
  z-index: 999; 
  top: 0;
  left: 0;
}

body.page nav {
  background-color: var(--it-grey);
}

nav .wrapper { 
  width: 100%;
  max-width: var(--layout-screen);
  display: flex;
  justify-content: space-between; 
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

nav .wrapper .right-nav {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: flex-end;
}

nav .wrapper .left-nav {
  display: flex;
  gap: 50px; 
}

nav .wrapper .left-nav a {
  display: flex;
  align-items: center;
}

nav .wrapper .left-nav > div {
  display: flex;
  align-items: center;
}

nav .wrapper .left-nav ul {
  display: flex;
  gap: 38px;
  margin-left: 120px; 
  margin-top: 0;
}

nav .wrapper .left-nav ul li {
  display: flex;
  align-items: center;
}

nav .wrapper .left-nav ul li > a {
  color: #ffffff;
  font-family: var(--font-family);
  font-size: 20px;
  text-transform: uppercase;
}

nav a.close,
nav a.open {
  display: none;
  align-items: center;
} 

nav a.close.show {
  display: block;
}

nav .wrapper .left-nav a > img:first-of-type {
  width: 142px;
  height: auto;
} 

nav .close > svg, 
nav .open > svg {
  width: 30px;
  height: 30px;
  color: #ffffff;
}

nav ul#menu-main > li > ul.sub-menu {
  display: none;
}

nav ul#menu-main > li.menu-item-has-children::after {
  content: url(/wp-content/themes/itaerzte/images/arow-slide-white.svg); 
  transform: rotate(90deg) scale(0.4);
  margin-left: 10px;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: block; 
}

nav ul#menu-main > li.menu-item-has-children.active::after {
  content: url(/wp-content/themes/itaerzte/images/arow-slide-grey.svg); 
  transform: rotate(90deg) scale(0.4);
  margin-left: 10px;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: block; 
}

nav a.close.show,
nav > .wrapper.mobile > div.mobile {
  display: none;
}

nav ul#menu-main > li.menu-item-has-children.active > ul.sub-menu {
  display: block;
  position: absolute;
  top: 80px;
  left: 0;
  background: var(--it-grey-200);
  padding: 20px;
  margin: 0;
  gap: 30px;
  display: flex;
  width: 100%;
  justify-content: center;
  opacity: 0; 
} 

nav ul#menu-main > li.menu-item-has-children.active > a {
  color: #d6dee7;
  font-weight: 400;
}

nav ul#menu-main > li.menu-item-has-children.active > ul.sub-menu > li > a:hover {
  color: #d6dee7;
}

nav > .wrapper > .left-nav > div.screen-nav > ul#menu-main > li > ul.sub-menu > li > ul  {
  display: none; 
}

div.wp-gr.wpac a.wp-google-name,
div.wp-google-right > .wp-google-powered {
  color: #ffffff!important;
}

div.wp-google-right > .wp-google-powered > img {
  display: none;
}

/* ++++++++++++++++++++++++++++++++ */
/********** Laptop Query ************/
/* ++++++++++++++++++++++++++++++++ */

@media only screen and (max-width: 1380px) { 
    
  h1, h2, h3, h4, h5, h6, p {
    max-width: 85%;   
    word-wrap: break-word;
    word-break: break-word;
  }

  nav.mobile {
    height: 100vh;
    position: fixed;
  }

  nav {
    background-color: var(--it-grey);
  }

  nav .wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  nav .wrapper .left-nav > .screen-nav {
    display: none;
  }

  nav > .wrapper.mobile > div.mobile,
  nav a.close.show,
  nav a.open {
    display: flex;
  }

  nav > .wrapper.mobile > div.mobile > ul li {
    flex-direction: column;
  }

  nav .wrapper .left-nav {
    flex-direction: column;
    gap: 15px;
  }

  nav .wrapper > div.mobile { 
    grid-column-start: 1;
    grid-column-end: 3;
  }

  nav .wrapper > div.mobile ul {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  nav .wrapper > div.mobile ul li a {
    color: #ffffff;
    font-size: 32px;
    font-family: var(--font-family);
  }

  nav .wrapper > div.mobile ul > li > ul.sub-menu {
    margin: 10px;
    gap: 0;
  }

  nav .wrapper.mobile > div.mobile ul > li > ul.sub-menu > li > a {
    font-size: 24px;
  }

  nav .wrapper.mobile > div.mobile ul > li > ul.sub-menu > li > ul.sub-menu {
    display: none;
    gap: 5px;
    margin: 10px;
  }

  nav .wrapper.mobile > div.mobile ul > li > ul.sub-menu > li > ul.sub-menu > li > a {
    font-size: 16px;
  }

  .layout {
    max-width: var(--layout-inner);
    margin: 0 auto; 
  }
} 

@media only screen and (max-width: 768px) {
  h1 {
    font-size: 2rem;
    line-height: 1.2;
    hyphens: none;
  }

  h2 {
    font-size: 2rem;
    line-height: 1.2;
    hyphens: none;
  }

  h3 {
    font-size: 1.8rem;
    line-height: 1.3;
  }

  h4 {
    font-size: 1.2rem;
    line-height: 1.35;
  }

  h5 {
    font-size: 1.2rem;
    line-height: 1.4;
  }

  h1, h2, h3, h4, h5, h6, p { 
    max-width: 100%;
  }

  .footer-leiste > div { 
    flex-direction: column;
  } 

  .footer-leiste > div .footer-nav {
    margin-top: 20px; 
  }

  .footer-leiste > div .footer-nav ul {
    gap: 40px;
  }

  .layout,
  .layout-s {
    padding-top: var(--margin-top-mobile);
    padding-bottom: var(--margin-bottom-mobile);
  }

  .footer-leiste > div .copyright p {
    text-align: center;
  }

  .button-primary > span {
    font-size: 18px;
    font-family: 'MontserratSemiBold', sans-serif; 
  }
  .button-primary > .icon {
    font-size: 2em;   
    margin-left: 30px; 
    transform: scale(0.7);
  }
  .button-primary {
    margin-top: 20px;
  }
  .wrapper > .margin-top {
    margin-top: 35px;
  }
}