@charset "UTF-8";
/* Allgemein */
body,
html {
  background-color: #fff;
}

.bg-wadergreen {
  background-color: #008B8A;
}

.bg-waderyellow {
  background-color: #FFE400;
}

.bg-waderred {
  background-color: #E64D35;
  color: #fff;
}

.text-waderred {
  color: #E64D35;
}

.text-waderyellow {
  color: #FFE400;
}

.waderline-17 {
  width: 17%;
}

.waderline-66 {
  width: 66%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
}

h2 {
  font-size: 3.8rem;
}

h3 {
  font-size: 2rem;
}

h4 {
  font-size: 1.8rem;
}

h5 {
  font-size: 1.6rem;
}

#cardContainer {
  z-index: 9999;
  background-color: #fff;
}

#cardContainer ul.menu {
  margin-left: 0;
}

#cardContainer ul.menu a {
  font-size: 1.2rem;
  color: #E64D35;
  font-weight: 600;
}

#cardContainer ul.menu a.is-active {
  color: #008B8A;
}

.badges img {
  max-width: 100px;
}

#cardContainer .block h2 {
  display: none;
}

.field__label {
  color: #E64D35;
  font-weight: 300;
  text-transform: uppercase;
}

.field--name-field-standinfo-nummer .field__item {
  background-color: #FFE400;
  color: #E64D35;
  font-size: 3.2rem;
  padding: 1rem;
}

p > svg > path {
  fill: darkcyan;
}

.region-teaser1headline .text-formatted p {
  font-weight: 700;
}

footer h2 {
  font-size: 1.2rem;
  color: #FFE400;
}

footer ul.menu {
  margin-left: 0;
}

/* Webform */
.js-form-item label {
  display: block;
}

.js-form-item select,
.js-form-item input,
.js-form-item textarea {
  display: block;
  border: 1px solid #008B8A;
  padding: 0.5rem;
}

.webform-progress {
  display: none;
}

.js-form-submit {
  background-color: #E64D35;
  color: #fff;
  padding: 1rem;
  border-radius: 2rem;
}

/* Listenpunkte Text */
.text-formatted ul {
  margin: 2rem 0;
  list-style: square;
  padding-left: 1rem;
}

/* Menü */
.menu .menu-item a.is-active {
  color: #008B8A;
}

.menu .menu-item a {
  color: #E64D35;
  font-weight: bold;
}

footer .menu .menu-item a {
  color: #fff;
}

footer .menu .menu-item a.is-active {
  color: #FFE400;
}

/* Views */
.views-field-title a {
  background-color: #E64D35;
  color: #fff;
  padding: 0.725rem 0.525rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 5.5rem;
  font-size: 1.2rem;
  line-height: normal;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: left;
}

.views-field-field-position a {
  background-color: #008B8A;
  color: #fff;
  padding: 0.725rem 0.525rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 3rem;
  font-size: 1rem;
  line-height: normal;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.views-field-view-node a {
  background-color: #008B8A;
  color: #fff;
  padding: 0.725rem 0.125rem;
  display: block;
}

.views-field-created {
  background-color: #FFE400;
  color: #008B8A;
  padding: 0.725rem 0.125rem;
  display: block;
  width: 100%;
}

.views-field-field-veranstaltungszeitpunkt {
  background-color: #FFE400;
  color: black;
  padding: 1rem;
  font-size: 1.6rem;
}

@media (min-width: 341px) and (max-width: 967px) {
  .mobile-top-padding {
    padding-top: 8rem;
  }
  header > nav {
    background: none;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  #toggleButton {
    position: relative;
    left: -2rem;
  }
  .region-bigteasertext h2 {
    font-size: 1.6rem;
  }
  .bg-waderred h2 {
    font-size: 1.6rem;
  }
  .bg-waderred h4 {
    font-size: 1.2rem;
  }
}
/* ------------------------------------------------------------------ */
/* Mobile-only Layout-Fixes                                           */
/* Greift unterhalb des Tailwind lg-Breakpoints (1024px), also dort   */
/* wo auch das Hamburger-Menü sichtbar ist.                           */
/* ------------------------------------------------------------------ */
@media (max-width: 1023.98px) {
  /* Globale Anti-Overflow-Sicherung: nichts darf horizontal scrollen */
  html,
  body {
    overflow-x: hidden;
    max-width: 100%;
  }
  /* Bilder/Medien dürfen die Viewport-Breite nicht sprengen */
  img,
  svg,
  video,
  iframe {
    max-width: 100%;
    height: auto;
  }
  /* Grid-/Flex-Container nie breiter als der Viewport */
  .mx-auto {
    max-width: 100%;
  }
  /* Headlines schrumpfen, damit sie keine Container sprengen */
  h1 {
    font-size: 2.25rem;
    line-height: 1.15;
    word-wrap: break-word;
  }
  h2 {
    font-size: 1.875rem;
    line-height: 1.2;
    word-wrap: break-word;
  }
  h3 {
    font-size: 1.5rem;
    line-height: 1.25;
  }
  /* Sektionen: einheitlicher, ruhiger Vertikalabstand */
  section {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  section > div,
  section > .relative {
    padding-top: 0;
  }
  /* Header / Logo */
  header > nav {
    padding: 1rem;
  }
  .mainlogo {
    height: 3rem;
  }
  /* Großer Teaser oben (rote Box mit grossem Padding) */
  .teaser .py-48 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
  .teaser .px-12 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .teaser .bg-waderred {
    padding: 0;
  }
  /* News-/Inhaltscontainer: gleichmaessiger Innenabstand */
  .news-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  /* Generische "px-6" Container kleiner halten */
  section .px-6,
  footer .px-6 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  /* Riesige py-24/py-32/py-40 Inner-Wrappers entschaerfen */
  section .py-24,
  section .py-32,
  section .py-40,
  section .pt-14 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  /* Vertikale mt-* Abstaende auf Mobile zaehmen */
  section .mt-10,
  section .mt-16,
  section .mt-24 {
    margin-top: 1.25rem;
  }
  /* Teaser-CTA Buttons sollen nicht ueberlaufen */
  section .flex.items-center.gap-x-6 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 0.75rem;
  }
  /* Sponsoren-Logos gleichmaessig auf Mobile */
  .badges,
  .badges img {
    max-width: 100%;
  }
  /* Footer: 2-spaltiges Grid auf Mobile zu einer Spalte machen */
  footer .grid.grid-cols-2 {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  footer .md\:grid.md\:grid-cols-2 {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
  footer .mt-16 {
    margin-top: 2rem;
  }
  footer .pt-16 {
    padding-top: 2.5rem;
  }
  /* ------- Mobile Menue (Sidebar) ------- */
  #cardContainer {
    max-width: 100vw;
  }
  /* Wenn das Menue offen ist (Inline-Style setzt width auf 350px),
     darf es bei schmalen Phones nicht ueber den Rand hinausgehen */
  #cardContainer[style*="width: 350px"] {
    width: min(350px, 90vw) !important;
  }
  #cardContainer > div {
    padding: 1.25rem 1.5rem;
  }
  #cardContainer .mainlogo {
    height: 3.5rem;
  }
  /* Menue-Eintraege: groesser, klickfreundlicher, klarer getrennt */
  #cardContainer ul.menu {
    list-style: none;
    padding-left: 0;
    margin-top: 1rem;
  }
  #cardContainer ul.menu li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }
  #cardContainer ul.menu li:last-child {
    border-bottom: none;
  }
  #cardContainer ul.menu a {
    display: block;
    padding: 0.85rem 0;
    font-size: 1.05rem;
    line-height: 1.2;
  }
  /* Buttonizer-Kontakt-Button im Menue */
  #cardContainer .buttonizer {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-top: 1.5rem;
  }
  /* Sozial-Icon im Menue muss sichtbar sein (Hintergrund ist hell) */
  #cardContainer a[href*="instagram.com"] {
    color: #E64D35;
    margin-top: 1rem;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
  }
  /* Cookie-Hinweis Bereich darf nicht ueberlaufen */
  .cookie-area {
    max-width: 100%;
    overflow-x: hidden;
  }
}