/*******************************************************
*
Theme Name:     Hamburger Hüft & Kniemanufaktur
Theme URI:      dr-gatzka.de
Description:    Arztpraxis
Version:        2
Author:         Tina Hoeke
License:        none (public domain)
*
*******************************************************/

/*******************************************************
    1 Global Settings
*******************************************************/

/*** horizontal navigation ***/
.inline {
  margin: 0;
  padding: 0;
  text-align: center;
}
.inline li,
.inline div {
  display: inline-block;
  list-style: none;
  padding: 0 0.5rem;
}

/*** text-align ***/
.center {
  text-align: center;
}
.right {
  text-align: right;
}
.left {
  text-align: left;
}

/*******************************************************
    1 Font-Settings
*******************************************************/

@font-face {
  font-family: Barlow;
  font-display: swap;
  src: url('/fonts/barlow-regular-webfont.woff2') format('woff2'),
    url('/fonts/barlow-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: Barlow;
  font-display: swap;
  src: url('/fonts/barlow-italic-webfont.woff2') format('woff2'),
    url('/fonts/barlow-italic-webfont.woff') format('woff');
  font-weight: normal;
  font-style: italic;
}
/*@font-face {
  font-family: Barlow;
  font-display: swap;
  src: url('/fonts/barlow-medium-webfont.woff2') format('woff2'),
    url('/fonts/barlow-medium-webfont.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}*/
@font-face {
  font-family: Barlow;
  font-display: swap;
  src: url('/fonts/barlow-semibold-webfont.woff2') format('woff2'),
    url('/fonts/barlow-semibold-webfont.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: Barlow;
  font-display: swap;
  src: url('/fonts/barlow-semibolditalic-webfont.woff2') format('woff2'),
    url('/fonts/barlow-semibolditalic-webfont.woff') format('woff');
  font-weight: 600;
  font-style: italic;
}

body {
  font: normal normal 1em/1.4 Barlow, 'Segoe UI', 'Lucida Sans', Arial, Geneva,
    sans-serif;
  /*hyphens: auto;*/
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
dt,
dd {
  padding: 0;
  margin: 0 0 0.8rem 0;
}

/* *** Headlines *** */
h1 {
  font-size: 1.4rem;
  line-height: 1.14;
  hyphens: manual;
}
h2 {
  font-size: 1.2rem;
  line-height: 1.2;
}
.txt h2,
.txt-legal h2 {
  margin-top: 2.1rem;
}

h3 {
  font-size: 1.2rem;
  line-height: 1.8;
  margin-bottom: 0;
}
h4 {
  font-size: .9rem;
  line-height: 1.2;
  font-weight: 400;
  margin-bottom: 0;
}

/* *** Text *** */
.txt, dd, dt {
  font-size: 1.2rem;
  line-height: 1.6;
}
.txt-intro {
  font-weight: 600;
}
.txt-big {
  font-weight: 600;
  font-size: 1.2rem;
}

.txt ul {
  list-style-type: disc;
  padding-left: 2.33rem;
}
.txt li {
  padding: 0 0 0.34rem 0;
}

/* *** Links *** */
a {
  color: #4471b5;
}
a:hover,
a:focus {
  text-decoration: none;
}

.txt a {
  font-weight: 600;
}
.before {
  font-size: .8rem;
}

.before:before {
  content: "";
  display: block;
  background: url("/media/img/youtube.svg") no-repeat;
  width: 20px;
  height: 14px;
  float: left;
  margin: 7px 6px 0 0;
}

/*******************************************************
    2 Layout
*******************************************************/

body {
  margin: 0;
  padding: 0;
  text-align: center;
  background-color: rgb(233, 239, 241);
  color: rgb(24, 26, 27);
}

.wrapper,
.menue,
.txt,
footer {
  margin: 0 auto;
  width: 92%;
  max-width: 65rem;
}
.fullwidth {
  width: 100%;
  max-width: 100% !important;
}

/* *** Header *** */
header {
  padding: 10vh 0 1vh 0;
  background: rgb(255, 255, 255);
}

.logo {
  margin-bottom: 7vh;
  width: 15rem;
}

.primumnilnocere {
  font: italic normal 1.2rem/1.2 Palatino, 'Times New Roman', Times, serif;
}
h2.primumnilnocere { /* Header */
  margin-bottom: 10vh;
}
  h3.primumnilnocere { /* Content (Philo) */
    margin: 2.1rem 0;
    text-align: center;
  }
  h3.primumnilnocere span {
    font-size: 1rem;
  }

.bold {
  font-weight: 600;
}

/* Navigation */
.mainmenue {
  display: flex;
  justify-content: space-between;
  list-style: none;
}
.mainmenue a,
.footermenue a,
.active {
  color: rgb(24, 26, 27);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.02rem;
}
.mainmenue a:hover,
.mainmenue a:focus,
.footermenue a:hover,
.footermenue a:focus {
  text-decoration: underline;
}
.active {
  font-weight: 600;
}

/* *** Burger *** */
.mobilemenue, .news {
  display: none;
}
.burger {
  background: none;
  border: none;
  display: block;
  width: 40px;
  height: 30px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.line {
  position: absolute;
  left: 0;
  height: 2px;
  width: 40px;
  background: rgb(147, 154, 156);
  display: block;
  transition: 0.5s;
  transform-origin: center;
}
.line:nth-child(1) {
  top: 0px;
}
.line:nth-child(2) {
  top: 8px;
}
.line:nth-child(3) {
  top: 16px;
}

.menu-open .burger .line:nth-child(1) {
  transform: translateY(8px) rotate(-45deg);
}

.menu-open .burger .line:nth-child(2) {
  opacity: 0;
}

.menu-open .burger .line:nth-child(3) {
  transform: translateY(-8px) rotate(45deg);
}

/* *** Sections *** */
.txt {
  text-align: left;
  margin: 0 auto 0 0;
  max-width: 50rem;
  padding: 3.4rem 0 1.3rem 0;
  padding-top: 2.4rem;
}
  .sknd-p {
    padding-top: 0;
  }
.kontakt {
  border-top: 1px solid rgb(216,227,229);
  margin-top: 2.1rem;
  padding-top: 2.1rem;
}
.vita {
  width: 100%;
  max-width: 65rem;
}

.txt-legal {
  text-align: left;
  padding: 3.4rem 0 1.3rem 0;
}

.bg-white {
  padding: 3.4vw 0;
  background: rgb(255, 255, 255);
}

/* *** Footer *** */
footer {
  padding: 3.4rem 0 2.1rem 0;
}
.logo-small {
  width: 12rem;
  margin-bottom: 1.3vh;
}

/*******************************************************
    3 Module
*******************************************************/
.bt_sprechstunde-online {
  border-top: 1px solid rgb(216,227,229);
  border-bottom: 1px solid rgb(216,227,229);
  margin: 2.1rem 0;
  padding: 2.1rem 0;
  text-align: center;
  font-weight: 600;
}
.bt_sprechstunde-online a {
  display: block;
  margin-top: 1rem;
}
.bt_sprechstunde-online img {
  width: 80%;
  max-width: 300px;
}

/* *** double column *** */
.twocols {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;

  display: -ms-flexbox;
  -ms-flex-wrap: wrap;
  text-align: left;
}
  .colone-img {
    width: 33%;
  }
  .coltwo-img {
    width: 61%;
  }
  .colone-img img {
    width: 100%;
  }

  .coltwo-img h2,
  .coltwo-img h3 {
    margin: 0;
  }
  .coltwo-img p {
    line-height: 1.4rem;
    margin: 0 0 0.8rem 0;
  }

.colone-txt {
  width: 65%;
  padding-bottom: 0;
}
.coltwo-txt {
  width: 25%;
  border-left: 1px solid rgb(216,227,229);
  padding-left: 3vw;
}

  .coltwo-txt h2 {
    margin-top: 0;
  }
  .coltwo-txt h3 {
    line-height: 1.2;
    margin-top: 1rem;
  }
  .events p {
    margin: .4rem auto 0 auto;
  }
  .events img {
    width: 100%;
    max-width: 480px;
    border: 1px solid rgb(216,227,229);
  }

  .border {
    border-bottom: 1px solid rgb(216,227,229);
    padding-bottom: 1rem;
  }
  .preview {
    display: none;
    border-top: 1px solid rgb(216,227,229);
    border-bottom: 1px solid rgb(216,227,229);
    padding: 1rem 0;
    margin-bottom: 1rem;
  }
  .buttons {
    display: flex;
  }
  .buttons a {
      display: block;
      width: 100%;
      max-width: 480px;
      text-align: center;
      border: 1px solid #4471b5;
      border-radius: 4px;
      padding: 4px 12px;
      text-decoration: none;
    }
    .buttons a:hover, .buttons a:active {
      color: white;
      background:#4471b5;
    }


  .buttons a {
    display: block;
    padding: 4px 12px;
    border: 1px solid #4471b5;
    margin-right: 12px;
  }

/* *** blockquote *** */
.blockquote {
  margin: 1.3em 0 1em 0;
  padding-left: 0.67rem;
  font-style: italic;
  list-style: none;
  line-height: 1.6;
  border-left: 4px solid rgb(24, 26, 27);
}

dl.grid {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;

  display: -ms-flexbox;
  -ms-flex-wrap: wrap;
}

.grid dt,
.grid dd,
.grid ul,
.grid li {
  padding: 0;
}
.grid li {
  padding-bottom: 0.3rem;
  list-style: none;
}
.grid ol {
  padding-left: 1rem;
}
  .grid ol li {
    list-style: circle;
  }

dt {
  width: calc(33% - 15px);
  min-width: 200px;
}
/*dt::after {
  content: ': ';
}*/
  dt.gridheader:after {
    content: '';
  }
dd {
  width: 66%;
}

dd.level-2 {
  width: 100%;
}
.level-2,
.level-2 dd,
.level-2 dt {
  font-weight: 400;
}
.level-2 li {
  margin-left: 1rem;
  padding-bottom: 0.1rem;
}

.behandlung {
  font-size: .9rem;
}
.behandlung dt,
.behandlung dd {
  padding-top: 20px;
}
.behandlung dt {
  font-weight: 700;
  padding-right: 15px;
}
.behandlung .gridheader {
  font-weight: 700;
  text-transform: uppercase;
  border-top: 0;
  border-bottom: 1px solid rgb(147,154,156);
}

table {
  margin-bottom: 3rem;
}
th, td {
  padding: 20px 20px 20px 0;
  vertical-align: top;
  border-top: 1px solid rgb(147,154,156);
  hyphens: manual;
}
.table-header {
  border-bottom: 1px solid rgb(24, 26, 27);
  text-transform: uppercase;
}
th {
  padding: 20px 20px 20px 0;
}
td {
  padding: 20px 0;
}

/*** Refugees ***/

.refugees {
  display: block;
  width: 90%;
  border: 1px solid #4471b5;
  border-radius: 4px;
  padding: 20px;
  text-align: center;
  margin: 0 auto 2rem;
  text-decoration: none;
}
.refugees:hover, 
.refugees:active {
  color: white;
  background:#4471b5;
}


/*** Vita New ***/
.vita h2 {
  border-bottom: 1px solid rgb(24, 26, 27);
  margin: 2rem 0;
}
.flex {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap; 
  margin-bottom: 1.5rem;   
  }
  .name {
      width: calc(25% - 20px);
      margin-right: 20px;
      font-weight: 600;
  }
  .content {
      width: 75%;
      margin-bottom: 0;   
  }
      .date {
          width: calc(25% - 20px);
          margin-right: 20px;
      } 
      .description {
          width: 75%;
          margin-bottom: .5rem;
      }
      .number {
          width: calc(7% - 20px);
          margin-right: 20px;
          text-align: right;
          font-weight: 600;
          text-align: right;
      }
      .descr-short {
          width: 93%;
      }

    .txt .content ul, .txt .content li {
          margin: 0;
          padding: 0 0 .2rem 0;
          list-style: none;
      }

    .level-two li {
      padding-left: 1rem !important;
    }

  @media (max-width: 1060px) {
    .vita h2 {
      border-bottom: none;
    }

      .name, .content, .date, .description {
      width: 100%;
      margin-right: 0;
      }
          .flex .name {
          border-bottom: 1px solid rgb(24, 26, 27);
          margin-bottom: .75rem;
          }
          .flex .description {
          margin-bottom: 1rem;
          }

          .txt .content ul, .txt .content li {
          list-style-type:circle;
          padding-left: 1rem;
      }
  }


  /*** 04-2024 ***/
  .multi-clmn {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
  }

   /*** BOX ***/
   .box {
    box-sizing: border-box;
    background-color: #fff;
    padding: 30px;
    width: calc(50% - 5px);
    text-align: left;
    margin-bottom: 10px;
  }
    .box h2, .box p {
      margin-bottom: 30px;
    }
    .box p {
      margin-top: -20px;
    }
  
  
    .box ul {
      padding-left: 20px;
    }
    .box li {
      margin-top: 10px;
    }



/*******************************************************
    4 Media Queries
*******************************************************/

@media (max-width: 1060px) {
.wrapper,
.menue,
.txt,
footer {
  width: calc(100% - 20px);
  margin: 0 10px;
}
dt,
dd {
  width: 100%;
}

dt {
  border-bottom: 1px solid rgb(24, 26, 27);
}

.level-2 dt {
  border-bottom: none;
  width: 20%;
  min-width: 85px;
}

.level-2 dd {
  width: calc(100% - 22%);
}

.gridheader {
  display: none;
}

.behandlung dd {
  padding-top: 0px;
}

.german dd:before {
  content: "Behandlung:";
  font-weight: 700;
  padding-bottom: 0.1rem;
  display: block;
  text-transform: uppercase;
}
.english dd:before {
  content: "Treatment:";
  font-weight: 700;
  padding-bottom: 0.1rem;
  display: block;
  text-transform: uppercase;
}
}

/*** Mobile (smaller 870px) ***/

@media (max-width: 870px) {

  header {
    padding-top: 9vh;
  }

  .logo {
    width: 12em;
    margin-bottom: 7vh;
  }
  h2.primumnilnocere { /* Header */
    margin-bottom: 9vh;
  }



.news {
  display:block;
  border-bottom: 1px solid rgb(216,227,229);
  margin-bottom: 10px;
}
.news img {
  width: 100%;
  margin-bottom: 5px;
}
.preview {
  display: block;
}

  /* change menue view */
  .mainmenue {
    flex-direction: column;
    justify-content: start;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 80vw;
    background: #fff;
    transform: translateX(-100%);
    transition: 0.5s;
  }
  .menu-open .mainmenue {
    transform: translateX(0%);
  }
  .mainmenue a {
    display: block;
    text-align: left;
    padding: 1rem;
  }
  .mobilemenue {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;

    display: -ms-flexbox;
    -ms-flex-wrap: wrap;
  }

    /* twocols > onecol */
    .bg-white,
    .twocols h2 {
      padding-top: 2.1vh;
    }
    .twocols > div {
      width: 100%;
    }
      .coltwo-txt {
        border: 0;
        padding: 0;
      }
       .twocols-mbl {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;
  
        display: -ms-flexbox;
        -ms-flex-wrap: wrap;
        text-align: left;
      }

       /*** Zweispalter ***/
       .box,
  .multi-clmn {
    width: 100%;
  }
}

/*** Mobile (smaller 640px) ***/

@media (max-width: 640px) {

  /* text smaller*/
  .txt {
      font-size: 1.1rem;
      line-height: 1.5;
    }
  table {
    font-size: .9rem;
    line-height: 1.5;
  }
  .footermenue {
    font-size: 0.9rem;
    letter-spacing: 0;
  }

    /*.events {
      width: 47%;
    }*/
}

/*** small Mobile (smaller 480px) ***/

@media (max-width: 480px) {
  .level-2 dt,
  .level-2 dd {
    width: 100%;
  }
}


.tabs {
  display: flex;
  margin-bottom: 1rem;
  border-bottom: solid 1px rgb(216, 227, 229);
}
.tabs a {
  text-align: center;
  padding: 5px 0 3px 0;
  width: 50%;
  text-decoration: none;
}
.tabs .tab-active {
  color: rgb(24, 26, 27);
  background: rgb(216,227,229);
}


.tab {
  transition: 0.3s opacity;
  max-height: 200rem;
  opacity: 1;
  overflow: hidden;
}
.tab > h3 {
  display: none;
}
.tab-closed {
  max-height: 0;
  opacity: 0;
}