/*
Theme Name: HTH-Theme
Theme URI: https://www.farn.de
Author: FARN digital brand design
Author URI: https://www.farn.de
Version: 1.0.0
Text Domain: hth-theme
*/

@import url('assets/css/hth-icons.css');

html {
    box-sizing:border-box;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: antialiased;
    text-rendering: optimizeLegibility;
    word-wrap: normal;
    font-variant-ligatures: common-ligatures;
    -webkit-font-feature-settings: "liga", "clig";
    -moz-font-feature-settings: "liga", "clig";
    font-feature-settings: "liga", "clig";
    -webkit-font-feature-settings: "liga", "lnum";
    -moz-font-feature-settings: "liga", "lnum";
    font-feature-settings: "liga", "lnum";
    position: relative;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    height: 100%;
    margin-top: 0 !important;
    overflow-x: hidden;
}
html.menuopen {
  overflow: hidden;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}
body {
    margin: 0;
    padding: 0;
    /* color: var(--wp--preset--color--blue-dark); */
    font-size: 16px;
    overflow-x: hidden;
}

/* Headings --------------------------------------------------------------------------------------------------------------------- */
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: inherit;
    text-decoration: none !important;
}

p {
  line-height: 1.7;
}

p+p {
  margin-top: 1rem;
}

strong,
b {
  font-weight: 900;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0.6em;
}


/* header --------------------------------------------------------------------------------------------------------------------- */
header {
  position: fixed;
  top: 0;
  z-index: 10;
  width: 100%;
  background-color: #fff;
  transition: box-shadow 0.3s;
}
header.scrolled {
  box-shadow: 0 0 40px rgba(0,0,0,0.15);
}
.logged-in header {
  top: var(--wp-admin--admin-bar--height);
}
.wp-block-site-logo img.custom-logo {
  width: 250px !important;
}

header + .entry-content {
  margin-top: 90px;
}

/* main menu --------------------------------------------------------------------------------------------------------------------- */
.burgerbutton-menu {
  padding: 0;
  position: fixed;
  top: 0;
  right: 0;
}
.wp-block-group.header-inner {
  width: 90%;
  margin: 0 auto;
  height: 90px;
}
.burgerbutton-menu .link_wrapper {
  display: flex;
  flex-direction: column;
  gap: 0;
  justify-content: center;
  height: 100%;
  padding: 1rem 1.5rem;
}
.burgerbutton-menu .link_wrapper .wp-block-heading {
  margin-bottom: 0;
}
.wp-block-group.header-inner .burgerbutton-menu>.wp-block-columns>.wp-block-column {
  scrollbar-width: none;
}
.wp-block-group.header-inner .burgerbutton-menu>.wp-block-columns>.wp-block-column::-webkit-scrollbar {
  display: none;
}
.wp-block-group.header-inner:has(.burgerbutton-menu) .wp-block-column.has-blue-dark-background-color {
  padding: 2rem 0 !important;
}
.burgerbutton-menu>.wp-block-columns .wp-block-column:first-child  .wp-block-button__link {
  font-size: 1rem;
  padding: 1rem 1.125rem 1rem 0; 
}

.burgerbutton-menu>.wp-block-columns .wp-block-column:first-child .wp-block-button__link:hover {
  border-color: var(--wp--preset--color--blue-dark) !important;
  color: var(--wp--preset--color--blue-light) !important;
  background-color: white !important;
}

.burgerbutton-menu .monstergroup {
  container-type: inline-size;
  container-name: monstergroup;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.burgerbutton-menu .monstergroup > .wp-block-group:first-child{
  flex:1 1 250px;
}
.burgerbutton-menu .monstergroup .wp-block-image{
  margin-right: -5vw;
  margin-left: 0;
  text-align: right;
  flex:0 0 auto;
}
.burgerbutton-menu .monstergroup .wp-block-image img{
  width: 100%;
  max-width: 200px;
}
@container monstergroup (min-width: calc(400px - 10vw)) {
  .burgerbutton-menu .monstergroup .wp-block-image img{
    max-width: 120px;
  }
}
@container monstergroup (min-width: calc(600px - 10vw)) {
  .burgerbutton-menu .monstergroup .wp-block-image img{
    max-width: 200px;
  }
}


/* hovers ---------------------------------------------------------------------------------------- */
.teaser.has-white-background-color:hover,
.link_wrapper.has-white-background-color:hover,
.wp-block-button__link.has-white-background-color:hover {
  background-color: var(--wp--preset--color--white-hover) !important;
}
.teaser.has-blue-light-background-color:hover,
.link_wrapper.has-blue-light-background-color:hover,
.wp-block-button__link.has-blue-light-background-color:hover {
  background-color: var(--wp--preset--color--blue-light-hover) !important;
}
.teaser.has-blue-lighter-background-color:hover,
.link_wrapper.has-blue-lighter-background-color:hover,
.wp-block-button__link.has-blue-lighter-background-color:hover {
  background-color: var(--wp--preset--color--blue-lighter-hover) !important;
}
.teaser.has-blue-mid-background-color:hover,
.link_wrapper.has-blue-mid-background-color:hover,
.wp-block-button__link.has-blue-mid-background-color:hover {
  background-color: var(--wp--preset--color--blue-mid-hover) !important;
}
.teaser.has-blue-dark-background-color:hover,
.link_wrapper.has-blue-dark-background-color:hover,
.wp-block-button__link.has-blue-dark-background-color:hover {
  background-color: var(--wp--preset--color--blue-dark-hover) !important;
}
.teaser.has-turquoise-background-color:hover,
.link_wrapper.has-turquoise-background-color:hover,
.wp-block-button__link.has-turquoise-background-color:hover {
  background-color: var(--wp--preset--color--turquoise-hover) !important;
}
.teaser.has-turquoise-dark-background-color:hover,
.link_wrapper.has-turquoise-dark-background-color:hover,
.wp-block-button__link.has-turquoise-dark-background-color:hover {
  background-color: var(--wp--preset--color--turquoise-dark-hover) !important;
}

.link_wrapper {
  transition: padding 0.3s;
}

.wp-block-button__link.has-turquoise-background-color {
  color: var(--wp--preset--color--blue--dark);
  border-color: var(--wp--preset--color--blue--dark);
}

/* slider ------------------------------------------------------------------------------------ */
.wp-block-group.header-inner .swiper-container-wrapper.slider {
  max-width: none !important;
  width: 100vw;
}
.wp-block-group.header-inner .swiper-wrapper {
  align-items: stretch;
}
.wp-block-group.header-inner .swiper-slide {
  height: auto !important;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 350px;
}
.wp-block-group.header-inner .swiper-slide .wp-block-button__link {
  font-size: 1rem; 
  padding: 1rem 0.625rem;
}
.wp-block-group.header-inner .swiper-slide>.wp-block-columns {
  height: 100%;
  width: 100%;
  max-width: 350px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.wp-block-group.header-inner .swiper-slide .wp-block-column {
  flex-basis: 0 !important;
}
.wp-block-group.header-inner .swiper-slide:first-child {
  margin-left: 5vw;
}
.wp-block-group.header-inner .swiper-slide:last-child {
  margin-right: 5vw !important;
}
.wp-block-group.header-inner .swiper.swiper-container {
  width: 100%;
  overflow-x: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.wp-block-group.header-inner .swiper.swiper-container::-webkit-scrollbar {
  display: none;
}
.wp-block-group.header-inner .burgerbutton-menu > .wp-block-columns {
  flex-direction: column;
  margin-bottom: 0;
}
.wp-block-group.header-inner .swiper-slide .wp-block-columns .wp-block-column:nth-child(3) {
  display: none;
}
.wp-block-group.header-inner .swiper-buttons .swiper-button-prev,
.wp-block-group.header-inner .swiper-buttons .swiper-button-next {
    height: 30px;
    background-color: none;
    border: none;
}
.wp-block-group.header-inner .swiper-buttons .swiper-button-prev::after,
.wp-block-group.header-inner .swiper-buttons .swiper-button-next::after {
  height: 30px;
  background-color: var(--wp--preset--color--white);
}

/* about-meta-group */
.wp-block-group:has(>.about-meta-group) > p {
  flex:1 1 500px;
}
/* how we work tiles ------------------------------------------------------------------------------------ */

.how_we_work {
  container-type: inline-size;
  container-name: hth_wie_wir_arbeiten_query_container;
}
.how_we_work summary {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.how_we_work>.wp-block-columns {
  width: 100%;
  flex-direction: column;
  container-type: inline-size;
  container-name: hth_wie_wir_arbeiten_ubersicht_container;
}
.how_we_work>.wp-block-columns>.wp-block-column:nth-child(1),
.how_we_work>.wp-block-columns>.wp-block-column:nth-child(3) {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.625rem 1.5rem !important;
  container-type: inline-size;
  container-name: hth_wie_wir_arbeiten_ubersicht_aeussere_container;
}
.how_we_work>.wp-block-columns>.wp-block-column:nth-child(2) {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.625rem 1.5rem !important;
  container-type: inline-size;
  container-name: hth_wie_wir_arbeiten_ubersicht_innerer_container;
}
.how_we_work>.wp-block-columns>.wp-block-column>.wp-block-columns {
  display: flex;
  flex-direction: column;
  gap: 0.625rem 1.5rem !important;
}
.how_we_work>.wp-block-columns>.wp-block-column>.wp-block-group {
  width: 100% !important;
}
.how_we_work>.wp-block-columns>.wp-block-column>.wp-block-columns>.wp-block-column>.wp-block-group {
  min-height: 9.5rem;
  max-height: 9.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  transition: max-height 0.3s ease-in-out;
}
.how_we_work>.wp-block-columns>.wp-block-column>.wp-block-columns>.wp-block-column>.wp-block-group:has(details[open]) {
  max-height: 100rem;
}
.how_we_work>.wp-block-columns>.wp-block-column>.wp-block-columns>.wp-block-column>.wp-block-group>.wp-block-group {
  margin: 0 !important;
  display: flex !important;
  flex-direction: column;
  }
.how_we_work>.wp-block-columns>.wp-block-column>.wp-block-columns>.wp-block-column>.wp-block-group>details {
  margin: 0 !important;
}
.how_we_work>.wp-block-columns>.wp-block-column>.wp-block-columns>.wp-block-column>.wp-block-group>details>h5 {
  margin: 0 !important;
}
.how_we_work>.wp-block-columns>.wp-block-column>.wp-block-columns>.wp-block-column>.wp-block-group>details[open] {
  margin-top: 0.25rem !important;
  padding-bottom: 2.5rem;
}
.how_we_work>.wp-block-columns>.wp-block-column>.wp-block-columns>.wp-block-column>.wp-block-group>details[open]>summary {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
}
.how_we_work>.wp-block-columns>.wp-block-column>.wp-block-columns>.wp-block-column>.wp-block-group>details>summary::marker {
  content: "";
}
.how_we_work>.wp-block-columns>.wp-block-column>.wp-block-columns>.wp-block-column>.wp-block-group>details>summary::after {
  content: "Mehr erfahren";
}
.how_we_work>.wp-block-columns>.wp-block-column>.wp-block-columns>.wp-block-column>.wp-block-group>details[open]>summary::after {
  content: "Details schließen";
}
.how_we_work>.wp-block-columns>.wp-block-column>.wp-block-columns>.wp-block-column>.wp-block-group>.wp-block-group>p {
  line-height: 1.2;
  margin: 0 !important;
  margin-top: 0.25rem !important;
}
.how_we_work>.wp-block-columns>.wp-block-column>.wp-block-columns>.wp-block-column>.wp-block-group>.wp-block-group>h4 {
    margin: 0 !important;
}
.how_we_work>.wp-block-columns>.wp-block-column>.wp-block-columns>.wp-block-column>.wp-block-group:has(details[open])>.wp-block-group>p {
  display: none;
}

/* how we work tiles container queries START ---------------------------------------------------------------------------------------- */

@container hth_wie_wir_arbeiten_ubersicht_aeussere_container (min-width: 400px) {
  .how_we_work>.wp-block-columns>.wp-block-column>.wp-block-columns {
    flex-direction: row;
  }
}
@container hth_wie_wir_arbeiten_ubersicht_innerer_container (min-width: 400px) {
  .how_we_work>.wp-block-columns>.wp-block-column>.wp-block-columns {
      flex-direction: row;
  }
}
@container hth_wie_wir_arbeiten_query_container (min-width: 600px) {
  .how_we_work>.wp-block-columns {
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: nowrap !important;
  }
}
@container hth_wie_wir_arbeiten_ubersicht_container (min-width: 600px) {
  .how_we_work>.wp-block-columns>.wp-block-column:nth-child(1),
  .how_we_work>.wp-block-columns>.wp-block-column:nth-child(3) {
    flex-basis: 33.33% !important;
    flex-wrap: wrap;
  }
  .how_we_work>.wp-block-columns>.wp-block-column:nth-child(2) {
    flex-basis: 33.33% !important;
    flex-wrap: wrap;
  }
}
@container hth_wie_wir_arbeiten_ubersicht_container (min-width: 800px) {
  .how_we_work>.wp-block-columns>.wp-block-column:nth-child(1),
  .how_we_work>.wp-block-columns>.wp-block-column:nth-child(3) {
    flex-basis: calc(25% - (3rem / 3)) !important;
  }
  .how_we_work>.wp-block-columns>.wp-block-column:nth-child(2) {
    flex-basis: calc(50% - (3rem / 3))  !important;
    flex-wrap: nowrap;
  }
  .how_we_work>.wp-block-columns>.wp-block-column:nth-child(2)>.wp-block-columns {
    flex-direction: row;
  }
  .how_we_work>.wp-block-columns>.wp-block-column:nth-child(2)>.wp-block-columns>.wp-block-column {
    background-color: black;
    height: fit-content;
  }
}

/* how we work tiles contaier queries END ---------------------------------------------------------------------------------------- */

/* team */

.hth_team ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
}
.hth_team li {
  flex-basis: calc(25% - (6rem / 4));
  display: flex; 
  justify-content: center;
  text-align: center;
  line-height: 1.5;
}
.hth_team li div {
  gap: 0;
}
.hth_team li div h4 {
  padding-bottom: 0.25rem;
}

/* widths ---------------------------------------------------------------------------------------- */
.alignfull {
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    margin-top: 3rem;
}
.alignwide {
   width:90%;
   margin-left:auto;
   margin-right:auto;
 }
.wp-block-cover.alignfull > .wp-block-cover__inner-container,
.wp-block-group.alignfull {
   width:100%;
 }
.entry-content > :not(.alignwide):not(.alignfull),
.wp-block-cover.alignfull > .wp-block-cover__inner-container > :not(.alignwide):not(.alignfull),
.wp-block-group.alignfull > :not(.alignwide):not(.alignfull) {
    width:90%;
    margin-left:auto;
    margin-right:auto;
}
.is-layout-constrained>.alignright,
.is-layout-constrained>.alignleft {
  margin-bottom: 1rem !important;
  float: none !important;
}


/* paddings and margins for alignfull blocks ------------------------------------------------------- */
.wp-block-group.alignfull.has-background,
.wp-block-cover.alignfull{
    padding:3rem 0;
}
.alignfull + * {
    margin-top: 3rem;
}
.alignfull + .alignfull,
.alignfull + footer {
    margin-top: 0 !important;
}
.entry-content > *:last-child:not(.alignfull) {
    margin-bottom:3rem;
}
.alignfull[style*="background-color"] {
  padding: 3rem;
}

/* padding for background-color-boxes ------------------------------------------------------- */
.entry-content .wp-block-group.has-background:not(.alignfull),
.wp-block-media-text.has-background .wp-block-media-text__content {
    padding:2em;
    box-sizing: border-box;
}
.entry-content .wp-block-group.has-background:not(.alignfull) + .wp-block-group.has-background:not(.alignfull) {
    margin-top:2em;
} 

/* cover-blocks */
.wp-block-cover.alignfull.has-custom-content-position {
  padding:2rem !important;
}

/* header narrative and story pages */
.entry-content > .wp-block-media-text.alignfull .wp-block-media-text__content {
  padding:2rem 5vw;
}

/* columns stretch */
.wp-block-columns .wp-block-column.is-vertically-aligned-stretch > .wp-block-group.has-background{
  height:100%;
}

/* Footer ----------------------------------------------------------------------------- */
footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
footer ul li {
  margin-bottom: 7px;
}
footer a {
  text-decoration: none !important;
}

.logged-in {
  padding-top: var(--wp-admin--admin-bar--height);
}

/* media queries -------------------------------------------------------------------------------------------------------------------------------------------- */
@media only screen and (min-width: 600px) {
  .wp-block-site-logo img.custom-logo {
    width: 320px !important;
  }
  .is-layout-constrained>.alignright {
    width: auto !important;
    margin-left: 1rem !important;
    margin-right: 5vw !important;
    float: right !important;
  }

  .is-layout-constrained>.alignleft {
    width: auto !important;
    margin-right: 1rem !important;
    margin-left: 5vw !important;
    float: left !important;
  }
}
@media only screen and (min-width: 782px) {
  .entry-content > .wp-block-columns.alignfull:first-child,
  .entry-content > .videoohnecookie.alignfull:first-child,
  .entry-content > .videoohnecookie.alignfull:first-child .videoohnecookie-thumbnail,
  .entry-content > .videoohnecookie.alignfull:first-child .videoohnecookie-content,
  .entry-content > .videoohnecookie.alignfull:first-child .videoohnecookie-content iframe {
    min-height: calc(100vh - 90px);
  }
  .entry-content > .wp-block-columns.alignfull:first-child .wp-block-video,
  .entry-content > .wp-block-columns.alignfull:first-child .wp-block-video video,
  .entry-content > .wp-block-columns.alignfull:first-child .videoohnecookie,
  .entry-content > .wp-block-columns.alignfull:first-child .videoohnecookie .videoohnecookie-thumbnail,
  .entry-content > .wp-block-columns.alignfull:first-child .videoohnecookie .videoohnecookie-content,
  .entry-content > .wp-block-columns.alignfull:first-child .videoohnecookie .videoohnecookie-content iframe {
    height: 100%;
  }
  .entry-content > .videoohnecookie.alignfull:first-child .videoohnecookie-content iframe {
    box-sizing: border-box;
    width: 177.77777778vh;
    height: 56.25vw;
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .entry-content > .wp-block-columns.alignfull:first-child .wp-block-cover {
    height: 100%;
    aspect-ratio:unset !important;
  }
  .parent-pageid-373 .entry-content > .wp-block-columns.alignfull:first-child {
    min-height: calc(90vh - 90px);
  }

}

@media only screen and (min-width: 990px) {

    .header-inner {
      margin: 0 auto;
    }

    /* cover-blocks */
    .wp-block-cover.alignfull.has-custom-content-position {
        padding:8rem !important;
    }

    /* paddings and margins for alignfull blocks */
    .alignfull {
        margin-top:6rem;
    }
    .wp-block-group.alignfull.has-background,
    .wp-block-cover.alignfull{
        padding:6rem 0;
    }
    .alignfull + * {
        margin-top: 6rem;
    }
    .entry-content > *:last-child:not(.alignfull) {
        margin-bottom:6rem;
    }
    .is-layout-constrained>.alignright {
      margin-right: calc((100vw - 900px) / 2) !important;
    }
    .is-layout-constrained>.alignleft {
      margin-left: calc((100vw - 900px) / 2) !important;
    }
}

@media only screen and (min-width: 1024px) {
  .wp-block-group.header-inner:has(.burgerbutton-menu) .wp-block-column.has-blue-dark-background-color .wp-block-group.is-vertical {
      display: flex;
    }

  .wp-block-group.header-inner:has(.burgerbutton-menu) .wp-block-column.has-blue-dark-background-color {
    padding: var(--wp--preset--spacing--two) 5vw !important;
  }

  .wp-block-group.header-inner .burgerbutton-menu > .wp-block-columns {
    flex-direction: row !important;
  }

  .wp-block-group.header-inner .burgerbutton-menu > .wp-block-columns > .wp-block-column:first-child {
    flex-basis: 33.33% !important;
  }

  .wp-block-group.header-inner .burgerbutton-menu > .wp-block-columns > .wp-block-column:last-child {
    flex-basis: 66.67% !important;
  }

  .wp-block-group.header-inner .burgerbutton-menu > .wp-block-columns > .wp-block-column {
    height: 100vh;
    overflow-y: auto;
  }

  .swiper-container[data-init-only-mobile="1"]+.swiper-buttons {
    display: none !important;
  }

  .swiper-container[data-init-only-mobile="1"] .swiper-slide {
    width: 100% !important;
  }

  .swiper-container[data-init-only-mobile="1"] .swiper-slide .wp-block-columns {
    flex-direction: row;
    max-width: none;
  }

  .swiper-container[data-init-only-mobile="1"] .swiper-slide .wp-block-column:nth-of-type(1) {
    flex-basis: calc((100% - 170px) * 0.55) !important;
  }

  .swiper-container[data-init-only-mobile="1"] .swiper-slide .wp-block-column:nth-of-type(2) {
    flex-basis: calc((100% - 170px) * 0.45) !important;
  }

  .swiper-container[data-init-only-mobile="1"] .swiper-slide .wp-block-column:nth-of-type(3) {
    flex-basis: 170px !important;
  }

  .swiper-container[data-init-only-mobile="1"] .swiper-slide,
  .swiper-container[data-init-only-mobile="1"] .swiper-slide:last-child {
    margin: 0 !important;
  }

  .swiper-container-wrapper.slider:has(.swiper-container[data-init-only-mobile="1"]) {
    width: 100%;
  }

  .swiper-container[data-init-only-mobile="1"] .swiper-wrapper {
    display: flex;
    flex-direction: column;
    gap: 3rem;
  }

  .swiper-container[data-init-only-mobile="1"] .wp-block-image img {
    height: 220px;
  }

  .wp-block-group.header-inner .swiper-slide .wp-block-columns .wp-block-column:nth-child(3) {
    display: block;
  }

}

@media only screen and (min-width: 1400px) {
  .wp-block-group.header-inner .wp-block-column.has-blue-dark-background-color h2 {
    font-size: var(--wp--preset--font-size--x-large) !important;
  }

  .wp-block-group.header-inner .wp-block-column.has-blue-dark-background-color .link_wrapper {
    padding: 2rem 1.5rem 2rem 3rem;
    transition: padding 0.3s;
  }
}

/* special media query for content width plus 10vw */
@media only screen and (min-width: calc(1200px + 10vw)) {
   
}