/* Ergänzungen zu main.min.css für js/site.js (Ersatz der Webflow-Laufzeit) */

/* Dropdowns im Menü: Startzustand zu (nur mit JS, sonst bleibt das Menü bedienbar) */
.w-mod-js .dropdown-content {
  height: 0;
  transition: height 500ms ease;
}

/* Produktboxen: unsichtbar bis im Bild, dann von 100px unten einblenden */
.w-mod-js .product-box.animation-fade-up,
.w-mod-js .product-box.animation-fade-up-delay-1,
.w-mod-js .product-box.animation-fade-up-delay-2 {
  opacity: 0;
}

.w-mod-js .product-box.is-visible {
  animation: gf-fade-up 1000ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
}

.w-mod-js .product-box.animation-fade-up-delay-1.is-visible {
  animation-delay: 250ms;
}

.w-mod-js .product-box.animation-fade-up-delay-2.is-visible {
  animation-delay: 500ms;
}

@keyframes gf-fade-up {
  from {
    opacity: 0;
    transform: translate3d(0, 100px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .w-mod-js .product-box.is-visible {
    animation: none;
    opacity: 1;
  }
}

/* Tastaturbedienung für Menü-Icons und Dropdowns */
.navigation-icon-container:focus-visible,
.dropdown-trigger:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Rechtstexte aus site/inhalte/ (Impressum, Datenschutz) */
.rechtstext {
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* Grundgrößen wie die Überschriften der übrigen Seiten (h1 wie h2, h2 wie h3).
   :where() hält die Gewichtung niedrig, damit die responsiven Größen von
   .heading-2/.heading-3 aus main.min.css weiter greifen. */
:where(.rechtstext) h1 {
  font-size: 50px;
  line-height: 50px;
  font-weight: 500;
  text-transform: uppercase;
}

:where(.rechtstext) h2 {
  font-size: 32px;
  line-height: 36px;
}

.rechtstext > :first-child {
  margin-top: 0;
}

.rechtstext .heading-2 {
  margin-bottom: 50px;
}

.rechtstext .heading-3 {
  margin-top: 60px;
  margin-bottom: 20px;
}

.rechtstext .heading-4 {
  margin-top: 35px;
  margin-bottom: 10px;
}

.rechtstext .rechtstext-h4 {
  margin-top: 25px;
  font-size: 20px;
  line-height: 28px;
}

.rechtstext .paragraph-content {
  margin-bottom: 20px;
}

.rechtstext ul.paragraph-content,
.rechtstext ol.paragraph-content {
  padding-left: 25px;
}

.rechtstext a {
  font-size: inherit;
  color: inherit;
  overflow-wrap: anywhere;
}