/*
Theme Name: Möckelhaus-Theme
Theme URI: https://www.moeckelhaus.de
Author: FARN digital brand design
Author URI: https://www.farn.de
Version: 1.0.0
Text Domain: moeckelhaus-theme
*/

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;
}
*,
*::before,
*::after {
    box-sizing: inherit;
}
body {
    margin: 0;
    padding: 0;
}

/* Headings */
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color:inherit;
    text-decoration: none !important;
}
[data-metafield-name="stichzeile"] + h1 {
  margin-top: clamp(0.7rem, 2vw, 24px);
}
.page-template-wp-custom-template-einfacher-header .wp-block-post-title {
  width: 90%;
}
h1 + .is-style-vorspanntext {
  margin-top: 0.7rem;
}
h2 + p, h3 + p {
  margin-block-start: 1rem !important;
}
p + p {
  margin-block-start: 0.8rem !important;
}
.wp-block-post-excerpt__more-text {
  margin-block-start: 0.5rem !important;
}
a[target="_blank"]::after {
  content: url("data:image/svg+xml,%3Csvg id='Ebene_2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8.7686 8.6758'%3E%3Cg id='Ebene_1-2'%3E%3Cpolygon points='2.0986 0 2.0986 1 6.9692 1 0 7.9688 .707 8.6758 7.7686 1.6147 7.7686 6.6699 8.7686 6.6699 8.7686 0 2.0986 0' fill='%23bd1616'/%3E%3C/g%3E%3C/svg%3E");
  width: 11px;
  display: inline-block;
  height: 21px;
  margin-left: 5px;
}
a[target="_blank"]:hover::after {
  content: url("data:image/svg+xml,%3Csvg id='Ebene_2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8.7686 8.6758'%3E%3Cg id='Ebene_1-2'%3E%3Cpolygon points='2.0986 0 2.0986 1 6.9692 1 0 7.9688 .707 8.6758 7.7686 1.6147 7.7686 6.6699 8.7686 6.6699 8.7686 0 2.0986 0' fill='%23255274'/%3E%3C/g%3E%3C/svg%3E");
}
.entry-content :not(.taxonomy-category) > a {
  font-weight: 600;
}
/* Kategorie Allgemein ausblenden */
a[href="https://www.moeckelhaus.de/aktuelles/kategorie/allgemein"] {
  display: none;
}
strong {
  font-weight: 600;
}
[data-metafield-name="stichzeile"] {
  font-weight: 600;
  color: var(--wp--preset--color--blau);
}

a:hover > img,
a:hover > figure {
  opacity: 0.8;
}

/* 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);
}
.head-logo a {
  display: inline-block;
}
.head-logo img {
  margin: 6px 10px 12px 5vw;
}

/* Headerbild */
.headerbild {
  margin-top: 0;
}
.headerbild > img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
.headerbild > .headerbild_mobile {
  aspect-ratio: 16/9;
}
.headerbild > .headerbild_desktop {
  aspect-ratio: 8/3;
  display: none;
}
.headerbild-16-9 img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* menu */
.wp-block-navigation {
  flex-direction: column;
  width: 100%;
  align-items: flex-start;
}
.wp-block-navigation ul:not(.wp-block-navigation__submenu-container) {
    gap:0;
    flex-direction: column;
}
.wp-block-navigation .wp-block-navigation-item {
  width: 100%;
}
.wp-block-navigation ul:not(.wp-block-navigation__submenu-container) > li.has-child {
    flex-wrap: wrap;
    justify-content: center;
}
.wp-block-navigation ul > li > a {
    padding: 0.9rem 5vw 1.1rem 5vw;
    width: 100%;
    font-weight: 600;
}
header .wp-block-navigation ul > li > a {
    color: var(--wp--preset--color--blau) !important;
    border-top: 1px solid #ddd;
}
.wp-block-navigation ul:not(.wp-block-navigation__submenu-container) > li.has-child > a{
    padding:0.9rem 5vw 1.1rem 5vw;
}
.wp-block-navigation ul:not(.wp-block-navigation__submenu-container) > li.has-child > .wp-block-navigation__submenu-icon svg path{
    stroke-width:1.2;
}
.wp-block-navigation-submenu .wp-block-navigation__submenu-icon svg {
  stroke: var(--wp--preset--color--blau);
}
.wp-block-navigation-submenu:hover .wp-block-navigation__submenu-icon svg {
  stroke: var(--wp--preset--color--rot);
}
.wp-block-navigation ul.wp-block-navigation__submenu-container {
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    border:none !important;
    padding:0;
    position: relative !important;
}
.wp-block-navigation ul.wp-block-navigation__submenu-container > li > a{
    padding:1.05rem 10vw 1.2rem;
    font-size: 0.9em;
}
header .wp-block-navigation ul > li:last-child > a {
  border-bottom: 1px solid #ddd;
}
.wp-block-navigation ul.wp-block-navigation__submenu-container > li:last-child > a{
    border-bottom: none;
}

.wp-block-navigation .wp-block-navigation__submenu-icon {
  width: 29px;
  height: 58px;
  margin: 0;
  box-sizing: content-box;
  position: absolute;
  right: 0;
  padding: 0 5vw 0 20px;
  z-index: 100;
  align-self: start;
}
.wp-block-navigation .wp-block-navigation__submenu-icon svg {
  height: 16px;
  margin-top: 3px;
}

.wp-block-navigation-item__content:hover{
    color: var(--wp--preset--color--rot)!important;
}
.wp-block-navigation .wp-block-buttons {
  margin-left: 5vw;
  margin-bottom: 25px;
}


    @media only screen and (max-width: 989px) {
      /* HOVER DISABLE */
      .wp-block-navigation-submenu__toggle.visible svg {
        transform: rotate(180deg);
      }
      .wp-block-navigation-item.wp-block-navigation-submenu:hover > ul {
        display: none;
      }
      .wp-block-navigation-submenu__toggle.visible + ul {
        display: block;
      }
    }



main {
  margin-top: 67px;
}


/* Main Information */
.page-template-default .main-information {
  margin: -10rem auto 4rem;
  max-width: calc(1300px + 10vw);
  padding: 0 5vw;
}
.page-template-default .main-information > .wp-block-column:nth-child(2) {
  margin-top: 4rem;
}
.main-information :not(.taxonomy-category) > a {
  font-weight: 600;
}

.oeffnungszeiten-winter {display: none;}
body.winter .oeffnungszeiten-sommer {display: none;}
body.winter .oeffnungszeiten-winter {display: block;}

/* 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;
}

/* 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;
}

/* 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;
} */

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

.taxonomy-category + h3 {
  margin-block-start: 0;
}
.wp-block-post-excerpt__more-text {
  font-weight: 600;
}
.wp-element-caption {
  font-style: italic;
  padding-left: 1rem;
  font-size: 0.9em;
  padding-top: 0.4rem;
}



/* FORM */
.acf-fields > .acf-field {
  border: 0 !important;
  min-height: 80px !important;
  padding: 0 0 25px !important;
}
.acf-field[data-width="50"] {
  width: 100% !important;
}
.acf-field .acf-label {
  margin-bottom: 6px;
}
.acf-field .acf-label label {
  font-size: 1.1rem;
  margin-bottom: 0;
}
input, textarea, select {
  border: 0;
  appearance: none;
  background-color: #f2f2f4;
  border-top: 2px solid #dddde1;
  font-family: "Myriad Pro", sans-serif;
  font-size: var(--wp--preset--font-size--medium) !important;
  padding: 10px 17px !important;
}
.acf-field[data-name="thema"] .acf-input::after {
  content: "";
  position: absolute;
  right: 21px;
  border-right: 1.5px solid var(--wp--preset--color--schwarz);
  border-bottom: 1.5px solid var(--wp--preset--color--schwarz);
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  top: 16px;
}
.acf-field input:focus-visible, .acf-field select:focus-visible, .acf-field textarea:focus-visible {
  outline: 0;
  border-top-color: var(--wp--preset--color--blau);
}
.acf-required {
  color: var(--wp--preset--color--rot);
}
.entry-content [type="submit"], .entry-content button {
  background-color: var(--wp--preset--color--blau);
  color: #fff;
  font-weight: 600;
  border: 0;
  appearance: none;
  padding: 14px 23px 12px !important;
  cursor: pointer;
}
.entry-content [type="submit"]:hover, .entry-content button:hover{
  opacity: 0.8;
}


/* Footer */
footer {
  margin-top: 0;
}
footer .wp-block-navigation ul:not(.wp-block-navigation__submenu-container) {
  flex-direction: column;
}
footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
footer ul li {
  margin-bottom: 10px;
  width: 100% !important;
  display: block !important;
}
footer a {
  font-weight: 600;
  color: var(--wp--preset--color--rot) !important;
  padding: 0 !important;
}
footer a:hover,
footer .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--blau) !important;
}
footer .wp-block-navigation__submenu-container {
  display: none !important;
}
footer .wp-block-navigation.items-justified-right.is-vertical a {
  text-align: right;
}


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

/* media queries -------------------------------------------------------------------------------------------------------------------------------------------- */
@media only screen and (min-width: 600px) {

  /* FORM */
  .acf-field[data-width="50"] {
    width:50% !important;
  }
  .acf-field[data-width="50"]:nth-child(2n) {
    padding-right: 15px!important;
  }
  .acf-field[data-width="50"]:nth-child(2n+1) {
    padding-left: 15px!important;
  }
   
}

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

    .header-inner {
      margin: 0 auto;
    }
    .head-logo img {
      margin: 8px 10px 18px 30px;
      width: 184px !important;
    }
    /* Headerbild */
    .headerbild > .headerbild_mobile {
      display: none;
    }
    .headerbild > .headerbild_desktop {
      display: block;
    }

    /* main menu */
    .wp-block-navigation {
      flex-direction: row;
      width: auto;
    }
    .wp-block-navigation .wp-block-navigation-item{
        width: auto;
    }
    header .wp-block-navigation ul > li > a{
        padding: 20px 15px 14px 15px;
        border: 0;
    }
    .wp-block-navigation ul:not(.wp-block-navigation__submenu-container) {
      flex-direction: row;
    }
    .wp-block-navigation ul:not(.wp-block-navigation__submenu-container) > li.has-child {
        flex-wrap: nowrap;
        justify-content: center;
        margin-right: 9px;
    }
    header .wp-block-navigation ul:not(.wp-block-navigation__submenu-container) > li.has-child > a {
        padding: 20px 2px 14px 15px;
        border: 0;
    }
    .wp-block-navigation ul.wp-block-navigation__submenu-container {
        left: -6px !important;
        right: auto !important;
        width: auto !important;
        -webkit-box-shadow: 0px 10px 30px -10px rgba(0,0,0,0.1);
        -moz-box-shadow: 0px 10px 30px -10px rgba(0,0,0,0.1);
        box-shadow: 0px 10px 30px -10px rgba(0,0,0,0.1);
        padding:0;
        min-width: 260px !important;
        position: absolute !important;
    }
    .wp-block-navigation .wp-block-navigation__submenu-icon {
      position: relative;
      padding: 0;
      height: auto;
      top: 23px;
    }
    header .wp-block-navigation-submenu:hover > a {
      color: var(--wp--preset--color--rot)!important;
    }
    .wp-block-navigation-submenu:hover > button > svg > path {
      color: var(--wp--preset--color--rot);
    }
    .wp-block-navigation ul.wp-block-navigation__submenu-container > li > a {
      padding: 16px 22px 20px;
      border-bottom: 1px solid #ddd;
    }
    header .wp-block-navigation ul > li:last-child > a {
      border-bottom: none;
    }
    .wp-block-navigation ul:not(.wp-block-navigation__submenu-container) > li.has-child > .wp-block-navigation__submenu-icon svg path {
      stroke-width: 1;
    }
    .wp-block-navigation .wp-block-buttons {
      margin-left: 0;
      margin-bottom: 0;
    }

    main {
      margin-top: 90px;
    }

    /* 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;
    }
    .wp-block-columns + .wp-block-columns {
      margin-top: 4rem;
    }
    .allgemeine-infos-opener{
      display: none;
    }
    .allgemeine-infos {
      display: block !important;
      margin-top: 0;
    }
}


@media only screen and (min-width: 990px) and (max-width: 1140px) {
  .burgerbutton-menu {
    font-size: 0.9em;
    margin-right: 15px !important;
  }
  header .wp-block-navigation ul > li > a {
    padding: 17px 10px 17px 10px;
  }
  .wp-block-navigation ul:not(.wp-block-navigation__submenu-container) > li.has-child {
    margin-right: 0;
  }
  header .wp-block-navigation ul:not(.wp-block-navigation__submenu-container) > li.has-child > a {
    padding: 17px 2px 17px 9px;
  }
  .wp-block-navigation .wp-block-navigation__submenu-icon svg {
    margin-top: -2px;
  }
}

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



@media only screen and (max-width: 500px) {
}

@media only screen and (max-width: 989px) {
  .single-post .main-information > .wp-block-column:nth-child(2) {
    padding: 21px 5% 30px !important;
  }
  .page-template-default .main-information,
  .post-template-default .main-information {
    flex-direction: column;
    margin: 0 0 2.5rem;
    padding: 0;
  }
  .post-template-default .main-information{
    margin-bottom: 1rem!important;
  }
  .page-template-default .main-information > .wp-block-column:nth-child(1) {
    padding: 1.3rem 5vw 1.5rem !important;
  }
  .page-template-default .main-information > .wp-block-column:nth-child(2) {
    margin: 0;
    flex-basis: auto !important;
    padding: 0!important;
  }

  .allgemeine-infos {
    display: none;
    margin: 0;
    padding: 1.3rem 5vw 1.5rem;
  }
  .allgemeine-infos-opener {
    color: var(--wp--preset--color--rot);
    font-weight: 600;
    padding: 1.2rem 5vw;
    cursor: pointer;
  }
  .allgemeine-infos-opener::after {
    content: "";
    float: right;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid;
    border-right: 2px solid;
    transform: rotate(45deg);
    position: relative;
    top: 3px;
    right: 4px;
  }
  .allgemeine-infos-opener.active::after {
    transform: rotate(225deg);
    top: 8px;
  }
  .page-id-2 .allgemeine-infos-opener {
    display: none;
  }
  .page-id-2 .allgemeine-infos {
    display: block;
  }

  .wp-block-columns.is-style-reverse-on-mobile {
    flex-direction: row-reverse;
  }
  footer > div {
    font-size: 0.9em !important;
  }
  footer > .wp-block-columns > .wp-block-column:last-child > nav > ul {
    flex-direction: row !important;
    gap: 17px;
    justify-content: start;
  }
  footer > .wp-block-columns > .wp-block-column:last-child > nav > ul > li {
    width: auto !important;
    margin: 0;
  }
}


@media only screen and (max-width: 1500px) and (min-width: 990px) {
  .page-template-default .main-information {
    margin-top: -10.5vw;
  }
}

@media only screen and (max-width: 600px) {
  /* Startseite H1 Scale */
  .page-id-2 h1 {
    font-size: 7.65vw;
  }
}