@charset "UTF-8";
/**
* Table of Contents
*
* 1.0 Variables
* 2.0 Mixins & Functions
* 3.0 General
* 4.0 WooCommerce
* 5.0 Plugin Styling
**/
/************ 1.0 Variables *********** */
/************ 2.0 Mixins & Functions *********** */
/************ 3.0 General *********** */
html {
  scroll-padding-top: 200px;
}

a {
  text-underline-offset: 2px;
  text-decoration-color: #a7aaad;
  text-decoration-thickness: 1px;
  text-decoration-style: dotted;
}

.main-nav .wp-block-navigation__responsive-container {
  padding-top: 10px;
  padding-bottom: 8px;
}
.main-nav ul.wp-block-navigation__submenu-container li:hover span.wp-block-navigation-item__label, .main-nav ul.wp-block-navigation__submenu-container .current-menu-item span.wp-block-navigation-item__label {
  color: white !important;
}
.main-nav ul.wp-block-navigation__submenu-container span.wp-block-navigation-item__label {
  color: black !important;
}

/* Menü */
.wp-block-navigation__submenu-container li.current-menu-item {
  background-color: var(--wp--preset--color--primary);
}
.wp-block-navigation__submenu-container li.has-large-font-size.wp-block-navigation-item.wp-block-navigation-link a span {
  text-transform: initial;
  font-weight: lighter;
}
.wp-block-navigation__submenu-container li.has-large-font-size.wp-block-navigation-item.wp-block-navigation-link:hover {
  background-color: var(--wp--preset--color--primary);
}

/* Mobiles Menü */
.mobile-popover li.current-menu-item {
  background-color: white;
}
.mobile-popover .wp-block-navigation__container > li {
  text-transform: uppercase;
  margin-bottom: 10px;
}
.mobile-popover .wp-block-navigation__container > li ul.wp-block-navigation__submenu-container li {
  text-transform: none;
  margin-bottom: 0;
  font-size: 14px;
}
.mobile-popover .wp-block-navigation__submenu-container > li::before {
  content: "";
  display: inline-block;
  width: 0.5em; /* Breite des Strichs */
  height: 1px; /* Höhe des Strichs */
  background-color: #333; /* Farbe des Strichs */
  margin-right: 0.5em; /* Abstand zum Text */
  vertical-align: middle; /* Vertikal zentrieren */
}

/* Rechtecke */
div.wp-block-greyd-box.rechteck {
  box-shadow: 2px 10px 19px 1px rgba(115, 115, 115, 0.5);
  background: linear-gradient(135deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--mediumlight) 100%) !important;
  z-index: 5;
}

div.rechteck-sehrklein.greyd-content-box {
  min-width: 50px;
  min-height: 50px !important;
}

div.rechteck-klein.greyd-content-box {
  min-width: 80px;
  min-height: 80px !important;
}

div.rechteck-mittel.greyd-content-box {
  min-width: 100px;
  min-height: 100px !important;
}

div.rechteck-gross.greyd-content-box {
  min-width: 150px;
  min-height: 150px !important;
}

/* Unterseiten Header */
h1 {
  font-family: "Montserrat", sans-serif;
  text-shadow: 0px 0px 40px rgba(255, 255, 255, 0.5);
}

.subpage-header-small-heading {
  color: var(--wp--preset--color--primary);
  font-size: clamp(2rem, 2.5rem + (1vw - 0.2rem) * 1.8, 4rem);
  font-family: nexa, sans-serif;
  text-transform: lowercase;
  font-weight: lighter;
}
@media (max-width: 768px) {
  .subpage-header-small-heading {
    line-height: 80px;
  }
}

/* Blog */
.blog-kategorie-liste {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.blog-kategorie-liste li a {
  color: #333333;
  text-decoration: none;
}

.button-ohne-text a span {
  margin-left: 0 !important;
}

/* Hotspot */
.greyd-hotspot {
  z-index: 1;
}

.greyd-hotspot.is-open {
  z-index: 2 !important;
}

/* Timeline */
.timeline .timeline-year-container {
  position: relative; /* Notwendig für die absolute Positionierung des :before-Elements */
  padding-left: 0px; /* Platz schaffen, damit der Kreis nicht über den Text ragt */
}
.timeline .timeline-year-container:before {
  content: "";
  display: block;
  position: absolute;
  top: 9px;
  left: 0px; /* Am linken Rand positionieren */
  width: 45px; /* Durchmesser des Kreises */
  height: 1px; /* Durchmesser des Kreises */
  background-color: #c7c7c7; /* Wähle deine gewünschte Farbe */
}
.timeline .timeline-year-container::after {
  content: "";
  display: block;
  position: absolute;
  top: 6px; /* Mittig vertikal ausrichten */
  left: 40px;
  width: 7px; /* Durchmesser des Kreises */
  height: 7px; /* Durchmesser des Kreises */
  border-radius: 50%; /* Macht es zum Kreis */
  background-color: #c7c7c7;
}
.timeline article {
  position: relative;
}
.timeline article:before {
  content: "";
  display: block;
  position: absolute;
  top: 9px;
  left: 0px; /* Am linken Rand positionieren */
  width: 1px; /* Durchmesser des Kreises */
  height: 100%; /* Durchmesser des Kreises */
  background-color: #c7c7c7; /* Wähle deine gewünschte Farbe */
}
.timeline article:after {
  content: "";
  display: block;
  position: absolute;
  bottom: -10px; /* Mittig vertikal ausrichten */
  left: -3px;
  width: 7px; /* Durchmesser des Kreises */
  height: 7px; /* Durchmesser des Kreises */
  border-radius: 50%; /* Macht es zum Kreis */
  background-color: #c7c7c7;
}
.timeline .greyd-posts-slider .pgn.arrows.overlap.left {
  position: absolute;
  z-index: 10;
  right: 30px;
  bottom: 0px;
  left: auto;
}
.timeline .greyd-posts-slider .pgn.arrows.overlap.right {
  right: -8px;
}
.timeline .greyd-posts-slider .text-container::after {
  content: "";
  display: block;
  position: absolute;
  top: -70px;
  left: -37px; /* Am linken Rand positionieren */
  width: 80px; /* Durchmesser des Kreises */
  height: 80px; /* Durchmesser des Kreises */
  background-image: url(img/pfeil-timeline-1.png);
  background-size: cover;
  border-radius: 50%;
  border: 1px solid #c7c7c7;
}

.word-break p {
  hyphens: manual;
  word-break: break-all;
}

/* Wohin wir liefern - Karte */
.hromatka-display-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}
@media (max-width: 1063px) {
  .hromatka-display-container {
    flex-direction: column;
  }
}

.hromatka-list-column {
  flex: 0 0 25%;
  min-width: 200px;
}
@media (max-width: 1063px) {
  .hromatka-list-column {
    width: 100%;
    min-width: auto;
    flex: 0 0 100%;
  }
}
.hromatka-list-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.hromatka-list-column li a {
  display: block;
  padding: 8px 5px;
  text-decoration: none;
  cursor: pointer;
  border-bottom: 1px solid #eee;
  transition: background-color 0.2s ease;
  color: white;
  background-color: var(--wp--preset--color--primary);
}
.hromatka-list-column li a:hover {
  background-color: #e0e0e0 !important;
  color: var(--wp--preset--color--primary);
}

.hromatka-image-column {
  flex: 0 0 73%;
  min-width: 200px;
  text-align: center;
}
@media (max-width: 1063px) {
  .hromatka-image-column {
    width: 100%;
    min-width: auto;
    flex: 0 0 100%;
  }
}

#hromatka-image-wrapper {
  position: sticky;
  top: 20px;
  min-height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#hromatka-image-wrapper.has-image #hromatka-image-placeholder {
  display: none;
}
#hromatka-image-wrapper.has-image #hromatka-featured-image {
  display: block;
}

#hromatka-featured-image {
  max-width: 100%;
  height: auto;
  display: none;
}

#hromatka-image-placeholder {
  display: block;
}

.hromatka-list-item.current-item {
  background-color: #e0e0e0 !important;
  color: var(--wp--preset--color--primary) !important;
}

/* Connected List Items */
.custom-connected-greyd-list .wp-block-greyd-list {
  position: relative; /* Notwendig für die absolute Positionierung der Linie */
  padding-left: 1.5em; /* Platz für die Linie schaffen */
}
.custom-connected-greyd-list .wp-block-greyd-list li {
  position: relative; /* Für die absolute Positionierung der Pseudo-Elemente innerhalb des li */
  padding: 0.5em 0; /* Behalte deinen bestehenden vertikalen Abstand */
}
.custom-connected-greyd-list .wp-block-greyd-list li::before {
  content: "";
  position: absolute;
  top: 70px;
  bottom: -47px;
  left: 2.3em; /* Horizontale Position der Linie */
  width: 1px;
  border-left: 2px dotted #ccc; /* Gestrichelte graue Linie */
  z-index: -1; /* Hinter den Icons und Text legen */
}
.custom-connected-greyd-list .wp-block-greyd-list li:first-child::before {
  top: 70px; /* Anpassung für den Startpunkt oberhalb des ersten Icons */
}
.custom-connected-greyd-list .wp-block-greyd-list li:last-child::before {
  bottom: 1.2em; /* Anpassung für den Endpunkt unterhalb des letzten Icons */
  border-left: 0 dotted #ccc; /* Gestrichelte graue Linie */
}

img.custom-logo {
  min-width: 224px;
  height: 100%;
}

/*# sourceMappingURL=main.css.map */