/*
Theme Name: Happytime Child
Theme URI: https://happytime-smue.de/
Description: Individuell entwickeltes Child Theme für Happytime Schwabmünchen. Enthält die responsive Startseite mit Hero-Slider, Hüpfburgen- und Eventzubehör-Darstellung, Kinderkarussell, Kinderbetreuung, Kontaktfunktionen sowie eine zentrale Pflege der Inhalte über WordPress und ACF.
Author: Bieber Dienstleistungscenter
Author URI: https://bieber-dc.de/
Template: blocksy
Version: 3.0
Text Domain: happytime-child
*/

/* =========================================================
   HAPPYTIME CHILD – FINALE CLEAN-STRUKTUR

   BASIS / KOMPONENTEN
   01 Topbar / Header
   02 Footer
   03 Hero
   04 Hero-Auswahlleiste
   05 Hüpfburgen / Produktkarten
   06 Startseiten-Inhalte / Vorteile
      06A Warum Happytime / Vorteile
      06B So funktioniert es / Ablauf
      06C Eventzubehör
   07 Wetter
   08 FAQ
   09 Abschluss-CTA
   10 Hero-Slider / interaktive Medien
   11 Bedienung / Scroll-to-top / Accessibility

   RESPONSIVE
   12 Responsive-Matrix: Tablet / Mobil / Orientierung

   ========================================================= */


/* =========================================================
   01 – TOPBAR / HEADER
   ========================================================= */
.ht-topbar {
  width: 100%;
  min-height: 36px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  color: #ffffff;
}

.ht-topbar__item {
  min-width: 0;
  display: flex;
  align-items: center;
}

.ht-topbar__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ffffff !important;
  text-decoration: none !important;
  transition: opacity .2s ease, transform .2s ease;
}

.ht-topbar__link:hover, .ht-topbar__link:focus-visible {
  color: #ffffff !important;
  opacity: 0.82;
}

.ht-topbar__icon {
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 1;
}

.ht-topbar__left {
  justify-content: flex-start;
  text-align: left;
}

.ht-topbar__center {
  justify-content: center;
  gap: 8px;
  text-align: center;
  white-space: nowrap;
  color: #ffffff;
}

.ht-topbar__center strong {
  color: #ffb800;
  font-weight: 800;
}

.ht-topbar__right {
  justify-content: flex-end;
  text-align: right;
}

[data-id="html"] .ct-header-html, .ct-header-html {
  width: 100%;
}

@media (max-width: 1024px) {
  .ht-topbar {
    gap: 16px;
    font-size: 12px;
  }

  .ht-topbar__icon {
    font-size: 12px;
  }
}


/* =========================================================
   02 – FOOTER
   ========================================================= */
.ht-global-footer-wrap {
  width: 100%;
  padding: 60px 24px 26px;
  background: #232a35;
}

.ht-footer {
  color: #98a3b2;
}

.ht-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 36px;
  margin-bottom: 40px;
}

.ht-footer-brand {
  max-width: 360px;
}

.ht-footer-logo {
  margin-bottom: 14px;
  color: #ffffff;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.ht-footer-brand p {
  margin: 0 !important;
  color: #98a3b2;
  font-size: 14px;
  line-height: 1.7;
}

.ht-footer-column h3 {
  margin: 0 0 14px !important;
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
}

.ht-footer-nav {
  display: grid;
  gap: 7px;
}

.ht-footer-nav a {
  color: #98a3b2 !important;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none !important;
  transition: color .2s ease, transform .2s ease;
}

.ht-footer-nav a:hover, .ht-footer-nav a:focus-visible {
  color: #ffb800 !important;
  transform: translateX(3px);
}

.ht-footer-contact {
  display: grid;
  gap: 10px;
}

.ht-footer-contact a, .ht-footer-contact > div {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #98a3b2 !important;
  font-size: 14px;
  line-height: 1.5;
  text-decoration: none !important;
}

.ht-footer-contact a:hover {
  color: #ffffff !important;
}

.ht-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 22px;
  border-top: 1px solid #333d4b;
  color: #7f8a99;
  font-size: 13px;
}

.ht-footer-bottom nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.ht-footer-bottom a {
  color: #98a3b2 !important;
  text-decoration: none !important;
}

.ht-footer-bottom a:hover {
  color: #ffb800 !important;
}


/* =========================================================
   03 – STARTSEITE / HERO
   ========================================================= */
.ht-home {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.ht-hero {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 0 72px;
  overflow: hidden;
}

.ht-hero__media {
  position: relative;
  width: 100%;
  height: 560px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #202733;
}

.ht-hero__image {
  position: absolute;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  left: 0;
  top: 50%;
  margin: 0;
  padding: 0;
  transform: translateY(-50%);
  filter: none;
  opacity: 1;
  visibility: visible;
  object-fit: initial;
  object-position: initial;
  -webkit-mask-image: none;
  mask-image: none;
}

.ht-hero__curve {
  position: absolute;
  top: -1px;
  left: 0;
  z-index: 2;
  width: 100%;
  height: clamp(95px, 10.5vw, 190px);
  pointer-events: none;
}

.ht-hero__curve svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ht-hero__curve path {
  fill: #fffdf9;
}

@media (min-width: 1001px) {
  #header [data-row="middle"] > div, #header [data-row="middle"] .ct-container, #header [data-row="middle"] .ct-container-fluid {
    min-height: calc(var(--height, 120px) + 25px) !important;
  }
}

.ht-hero__shade {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(
            90deg,
            rgba(7, 20, 34, .92) 0%,
            rgba(7, 20, 34, .80) 24%,
            rgba(7, 20, 34, .42) 43%,
            rgba(7, 20, 34, .08) 61%,
            rgba(7, 20, 34, 0) 72%
        );
  pointer-events: none;
}

.ht-hero__content {
  position: absolute;
  left: max(40px, calc((100vw - 1440px) / 2 + 48px));
  top: 50%;
  transform: translateY(-38%);
  width: min(590px, 45vw);
  color: #ffffff;
  z-index: 30 !important;
  pointer-events: auto !important;
}

.ht-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  margin: 0 0 15px;
  padding: 8px 13px;
  border-radius: 6px;
  background: #20b8b0;
  color: #ffffff;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.ht-hero__title {
  margin: 0;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-size: clamp(48px, 4vw, 72px);
  line-height: .92;
  font-weight: 900;
  letter-spacing: -.035em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 3px 12px rgba(0, 0, 0, .22);
  transform: rotate(-1.4deg);
  transform-origin: left center;
}

.ht-hero__title-line.is-accent {
  color: #ff5860;
  transform: translateX(18px) translateY(2px) skewX(-2deg);
}

@media (max-width: 1200px) {
  .ht-hero__media {
    height: 520px;
  }

  .ht-hero__curve {
    height: clamp(80px, 11vw, 135px);
  }

  .ht-hero__content {
    left: 32px;
    width: min(540px, 52vw);
  }

  .ht-hero__title {
    font-size: clamp(42px, 5vw, 60px);
  }
}


.ht-hero__title-line {
  display: table;
  position: relative;
  width: fit-content;
}

.ht-hero__title-line:first-child {
  transform: translateX(0) skewX(-2deg);
}

.ht-hero__text {
  max-width: 430px;
  margin-top: 2px;
  color: rgba(255, 255, 255, .96);
  font-size: 15px;
  line-height: 1.45;
  font-weight: 500;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .24);
}

.ht-hero__text p {
  margin: 0;
}

.ht-hero__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 46px;
  margin-top: 18px;
  padding: 0 22px;
  border: 0;
  border-radius: 12px;
  background: #ffd317;
  color: #111111 !important;
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-decoration: none !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .20);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.ht-hero__button:hover, .ht-hero__button:focus-visible {
  background: #ffe04d;
  color: #111111 !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .26);
}

.ht-hero__button-arrow {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 19px !important;
  line-height: 1 !important;
  font-weight: 900;
  transform: translateY(-1px) !important;
}

.ht-hero__polaroids {
  position: absolute;
  z-index: 4;
  right: clamp(55px, 7vw, 145px);
  top: 53%;
  width: clamp(330px, 29vw, 500px);
  height: clamp(300px, 34vw, 520px);
  transform: translateY(-50%);
  pointer-events: none;
}

.ht-hero__polaroid {
  position: absolute;
  width: clamp(130px, 11vw, 190px);
  aspect-ratio: 4 / 5;
  padding: 8px 8px 22px;
  background: #ffffff;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .24),
        0 3px 8px rgba(0, 0, 0, .12);
  transform-origin: center center;
}

.ht-hero__polaroid-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  margin: 0;
  padding: 0;
}

.ht-hero__polaroid--1 {
  z-index: 1;
  left: 1%;
  top: 29%;
  transform: rotate(-8deg);
}

.ht-hero__polaroid--2 {
  z-index: 3;
  left: 35%;
  top: 8%;
  transform: rotate(5deg);
}

.ht-hero__polaroid--3 {
  z-index: 2;
  right: 0;
  top: 43%;
  transform: rotate(9deg);
}

/* ==========================================================
   HERO POLAROIDS – 901px bis 1200px
   proportional zur Bildschirmbreite verkleinern
   ========================================================== */

@media screen and (min-width: 901px) and (max-width: 1200px) {

    .ht-hero__polaroids {
        right: clamp(14px, 2.3vw, 28px);

        width: clamp(245px, 29.2vw, 350px);
        height: clamp(275px, 32.5vw, 390px);

        top: 53%;
        transform: translateY(-50%);
    }

    .ht-hero__polaroid {
        width: clamp(96px, 11.25vw, 135px);
        padding:
            clamp(5px, .58vw, 7px)
            clamp(5px, .58vw, 7px)
            clamp(13px, 1.5vw, 18px);
    }
}


/* =========================================================
   04 – HERO-AUSWAHLLEISTE
   ========================================================= */
.ht-hero-selector-wrap {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 18px;
  width: min(1180px, calc(100% - 48px));
  transform: translateX(-50%);
}

.ht-hero-selector {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1fr 1.05fr;
  align-items: stretch;
  min-height: 96px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(19, 33, 49, .08);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(13, 28, 44, .18),
        0 3px 10px rgba(13, 28, 44, .08);
}

.ht-hero-selector__intro, .ht-hero-selector__item, .ht-hero-selector__all {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 18px 22px;
}

.ht-hero-selector__intro::after, .ht-hero-selector__item::after {
  content: "";
  position: absolute;
  top: 18px;
  right: 0;
  bottom: 18px;
  width: 1px;
  background: rgba(19, 33, 49, .10);
}

.ht-hero-selector__intro {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
}

.ht-hero-selector__kicker {
  color: #1c2733;
  font-size: 12px;
  line-height: 1.05;
  font-weight: 800;
  text-transform: uppercase;
}

.ht-hero-selector__title {
  color: #ff5860;
  font-size: clamp(21px, 1.8vw, 31px);
  line-height: .95;
  font-weight: 900;
  letter-spacing: -.035em;
  text-transform: uppercase;
  transform: rotate(-2deg);
  transform-origin: left center;
}

.ht-hero-selector__item {
  gap: 14px;
  color: #1d2732 !important;
  text-decoration: none !important;
  transition: background-color .18s ease,
        transform .18s ease;
}

.ht-hero-selector__item:hover, .ht-hero-selector__item:focus-visible {
  background: #f7fafb;
  color: #1d2732 !important;
}

.ht-hero-selector__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  font-weight: 900;
}

.ht-hero-selector__icon.is-coral {
  color: #ff5860;
}

.ht-hero-selector__icon.is-turquoise {
  color: #20b8b0;
}

.ht-hero-selector__icon.is-yellow {
  color: #f4bf14;
}

.ht-hero-selector__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ht-hero-selector__copy span {
  color: #68717a;
  font-size: 11px;
  line-height: 1.1;
  font-weight: 800;
  text-transform: uppercase;
}

.ht-hero-selector__copy strong {
  color: #16212d;
  font-size: 13px;
  line-height: 1.15;
  font-weight: 900;
}

.ht-hero-selector__all {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  background: #111821;
  color: #ffffff !important;
  text-decoration: none !important;
  transition: background-color .18s ease,
        transform .18s ease;
}

.ht-hero-selector__all:hover, .ht-hero-selector__all:focus-visible {
  background: #1c2733;
  color: #ffffff !important;
}

.ht-hero-selector__all span {
  font-size: 11px;
  line-height: 1.05;
  font-weight: 800;
  text-transform: uppercase;
}

.ht-hero-selector__all strong {
  color: #ffd317;
  font-size: 13px;
  line-height: 1.05;
  font-weight: 900;
  text-transform: uppercase;
}

html {
  scroll-behavior: smooth;
}

#huepfburgen-alle {
  scroll-margin-top: 120px;
}


/* =========================================================
   05 – HÜPFBURGEN / PRODUKTKARTEN
   ========================================================= */
.ht-bounces {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 76px 24px 82px;
  background: #ffffff;
}

.ht-bounces__inner {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.ht-bounces__heading {
  margin: 0 0 30px;
  text-align: center;
}

.ht-bounces__eyebrow {
  display: block;
  margin-bottom: 7px;
  color: #20b8b0;
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
}

.ht-bounces__title {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin: 0;
  color: #101317;
  font-size: clamp(34px, 3vw, 50px);
  line-height: .94;
  font-weight: 950;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.ht-bounces__heart {
  color: #ff5860;
  font-size: 1em;
  line-height: 1;
  transform: rotate(-10deg);
}

.ht-bounces__catalog {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
}

.ht-bounce-product {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(185px, .85fr);
  min-width: 0;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 24, 34, .13),
        0 2px 7px rgba(15, 24, 34, .07);
}

.ht-bounce-product__media {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 220px;
  background: #dce6ea;
}

.ht-bounce-product__image-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(20, 27, 35, .28);
  font-size: 17px;
  font-weight: 900;
  text-transform: uppercase;
  background: linear-gradient(135deg, rgba(255,255,255,.3), rgba(255,255,255,0)),
        #d9e4e8;
}

.ht-bounce-product__gallery {
  position: absolute;
  z-index: 4;
  left: 12px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 5px;
  background: rgba(0, 0, 0, .86);
  color: #ffffff;
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
}

.ht-bounce-product__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 18px 18px 16px;
}

.ht-bounce-product__title {
  margin: 0 0 14px;
  margin-top: 0 !important;
  color: #111111;
  font-size: clamp(21px, 1.55vw, 27px);
  line-height: .94;
  font-weight: 950;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

.ht-bounce-product__facts {
  display: grid;
  gap: 7px;
  margin-bottom: 15px;
}

.ht-bounce-product__facts > div {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #5e6670;
  font-size: 12px;
  line-height: 1.15;
  font-weight: 700;
}

.ht-bounce-product__fact-icon {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 9px;
}

.ht-bounce-product__price {
  display: flex;
  flex-direction: column;
  margin-top: auto;
  margin-bottom: 12px;
  color: #111111;
}

.ht-bounce-product__price strong {
  font-size: 20px;
  line-height: 1;
  font-weight: 950;
}

.ht-bounce-product__price span {
  margin-top: 2px;
  font-size: 9px;
  line-height: 1;
  font-weight: 800;
}

.ht-bounce-product__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  padding: 0 13px;
  border-radius: 6px;
  color: #ffffff !important;
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
  text-decoration: none !important;
}

.ht-bounce-product--coral .ht-bounce-product__button {
  background: #ff5860;
}

.ht-bounce-product--turquoise .ht-bounce-product__button {
  background: #20b8b0;
}

.ht-bounce-product--yellow .ht-bounce-product__button {
  background: #f1bd12;
  color: #111111 !important;
}

.ht-bounces__more {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

.ht-bounces__more-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 42px;
  padding: 0 22px;
  border-radius: 7px;
  background: #111111;
  color: #ffffff !important;
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
  text-decoration: none !important;
}

.ht-bounces__more-button span:last-child {
  color: #ffd317;
  font-size: 16px;
}

@media (max-width: 980px) {
  .ht-bounces__catalog {
    grid-template-columns: 1fr;
  }
}

.ht-bounce-product__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  margin: 0;
  padding: 0;
  image-rendering: auto;
}

.ht-bounces__intro {
  max-width: 720px;
  margin: 14px auto 0;
  color: #68717a;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 500;
}

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

.ht-bounces__intro > :last-child {
  margin-bottom: 0;
}

#huepfburgen-klein, #huepfburgen-mittel, #huepfburgen-gross {
  scroll-margin-top: 130px;
}

.ht-bounce-product-shell[hidden],
.ht-bounce-product__category,
.ht-bounce-product__description,
.ht-hero-selector__item.is-active, .ht-hero-selector__all.is-active, .ht-hero__button.is-active, .ht-bounces__more-button.is-active {
  outline: 3px solid rgba(255, 211, 23, .65);
  outline-offset: 3px;
}

.ht-bounces[data-active-filter="klein"] .ht-bounces__more, .ht-bounces[data-active-filter="mittel"] .ht-bounces__more, .ht-bounces[data-active-filter="gross"] .ht-bounces__more {
  display: flex;
}

.ht-bounces[data-active-filter="alle"] .ht-bounces__more {
  display: none;
}

.ht-bounces[data-active-filter="initial"] .ht-bounces__more {
  display: flex;
}

.ht-bounce-product__internal-title {
  margin: 0 0 3px;
  color: #8a929a;
  font-size: 10px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.ht-bounces .ht-bounces__more, .ht-bounces[data-active-filter="initial"] .ht-bounces__more, .ht-bounces[data-active-filter="alle"] .ht-bounces__more, .ht-bounces[data-active-filter="klein"] .ht-bounces__more, .ht-bounces[data-active-filter="mittel"] .ht-bounces__more, .ht-bounces[data-active-filter="gross"] .ht-bounces__more {
  display: flex !important;
}

.ht-bounces__more-button[hidden] {
  display: none !important;
}

.ht-bounces__more-button--less {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

.ht-bounce-product__letter, .ht-bounce-product__media .ht-bounce-product__letter {
  position: absolute !important;
  z-index: 8 !important;
  top: 0 !important;
  left: 0 !important;
  width: 74px !important;
  height: 86px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
  clip-path: polygon(
        0 0,
        100% 0,
        98% 64%,
        94% 78%,
        82% 88%,
        66% 91%,
        50% 100%,
        34% 91%,
        18% 88%,
        6% 78%,
        2% 64%
    ) !important;
  filter: drop-shadow(2px 3px 0 rgba(17,24,33,.07)) !important;
}

.ht-bounce-product__letter > span {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  color: #ffffff;
  font-size: 54px;
  line-height: 1;
  font-weight: 950;
  text-align: center;
  transform: translateY(-2px);
}

.ht-bounce-product--coral .ht-bounce-product__letter {
  background: #ff5860 !important;
}

.ht-bounce-product--turquoise .ht-bounce-product__letter {
  background: #20b8b0 !important;
}

.ht-bounce-product--yellow .ht-bounce-product__letter {
  background: #f1bd12 !important;
}

.ht-bounce-product--yellow .ht-bounce-product__letter > span {
  color: #ffffff !important;
}

@media (max-width: 980px) and (min-width: 641px) {
  .ht-bounce-product:nth-child(odd) {
    transform: rotate(-1.4deg) !important;
  }

  .ht-bounce-product:nth-child(even) {
    transform: rotate(1.4deg) !important;
  }

  .ht-bounce-product {
    clip-path: polygon(
              .7% 1.2%, 20% .7%, 40% 1.3%, 60% .7%, 80% 1.2%, 99.2% .8%,
              98.8% 25%, 99.3% 50%, 98.8% 75%, 99.1% 98.7%,
              80% 99.2%, 60% 98.6%, 40% 99.2%, 20% 98.6%, .8% 98.9%,
              1.2% 75%, .7% 50%, 1.3% 25%
          ) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: drop-shadow(0 10px 15px rgba(17, 24, 33, .12));
  }

  .ht-bounce-product-shell:nth-child(odd) {
    transform: rotate(-.35deg) !important;
  }

  .ht-bounce-product-shell:nth-child(even) {
    transform: rotate(.35deg) !important;
  }

  .ht-bounce-product__letter {
    width: 72px !important;
    height: 84px !important;
    display: grid !important;
    place-items: center !important;
    font-size: 54px !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  .ht-bounce-product-shell:hover {
    transform: inherit !important;
  }

  .ht-bounce-product-shell {
    filter: none !important;
    box-shadow: 4px 5px 0 rgba(17,24,33,.04),
              0 10px 16px rgba(17,24,33,.13) !important;
  }

  .ht-bounce-product-shell::before {
    box-shadow: 4px 5px 0 rgba(17,24,33,.04),
              0 10px 16px rgba(17,24,33,.13) !important;
  }

  .ht-bounces__catalog {
    gap: 8px !important;
    row-gap: 10px !important;
  }

  .ht-bounce-product__letter, .ht-bounce-product__media .ht-bounce-product__letter {
    width: 70px !important;
    height: 82px !important;
  }

  .ht-bounce-product__letter > span {
    font-size: 51px;
    transform: translateY(-2px);
  }
}


/* =========================================================
   06 – STARTSEITEN-INHALTE / VORTEILE / EVENTZUBEHÖR
   ========================================================= */

/* 06A – WARUM HAPPYTIME / VORTEILE */
.ht-why {
  position: relative;
  width: 100%;
  padding: 34px 24px 88px;
  background: #ffffff;
}

.ht-why__rustic-back {
  position: absolute;
  z-index: 0;
  top: 8px;
  right: -10px;
  bottom: -8px;
  left: 12px;
  background: radial-gradient(circle at 8% 12%, rgba(255,255,255,.11) 0 1px, transparent 1.6px),
        radial-gradient(circle at 22% 86%, rgba(255,255,255,.08) 0 1px, transparent 1.5px),
        radial-gradient(circle at 48% 10%, rgba(255,255,255,.09) 0 1px, transparent 1.5px),
        radial-gradient(circle at 70% 91%, rgba(255,255,255,.08) 0 1px, transparent 1.5px),
        radial-gradient(circle at 91% 22%, rgba(255,255,255,.10) 0 1px, transparent 1.5px),
        #0e1d32;
  background-size: 19px 21px,
        27px 23px,
        31px 19px,
        23px 29px,
        21px 25px,
        auto;
  clip-path: polygon(
        0 3%, 8% 1.2%, 17% 2.2%, 27% .8%, 38% 2%, 49% .7%,
        61% 2.2%, 72% .9%, 83% 2.1%, 94% .8%, 100% 3%,
        99% 15%, 100% 28%, 99.2% 41%, 100% 54%, 99% 67%, 100% 80%, 98.7% 97%,
        89% 99.4%, 77% 98.5%, 65% 99.5%, 53% 98.6%, 41% 99.5%, 29% 98.4%, 17% 99.4%, 1% 98%,
        1.5% 84%, .5% 69%, 1.4% 53%, .4% 38%, 1.4% 21%
    );
  box-shadow: 8px 10px 0 rgba(14, 29, 50, .08),
        0 18px 34px rgba(14, 29, 50, .20);
}

.ht-why__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.06) 0 1px, transparent 1.5px);
  background-size: 13px 13px;
  opacity: .18;
}

.ht-why__heading, .ht-why__items {
  position: relative;
  z-index: 1;
}

.ht-why__title {
  margin: 0;
  color: #ff5860;
  font-size: clamp(32px, 3vw, 48px);
  line-height: .92;
  font-weight: 950;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.ht-why__items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ht-why__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 0;
  bottom: 8px;
  width: 1px;
  background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,.18) 0 3px,
        transparent 3px 7px
    );
}

.ht-why__item--1 .ht-why__icon {
  color: #ff5860;
}

.ht-why__item--2 .ht-why__icon {
  color: #f4bf14;
}

.ht-why__item--3 .ht-why__icon {
  color: #20b8b0;
}

.ht-why__item--4 .ht-why__icon {
  color: #4fd0b9;
}


.ht-why__title--reference {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  font-size: clamp(32px, 2.8vw, 46px) !important;
  line-height: .88 !important;
  font-weight: 950 !important;
  letter-spacing: -.035em !important;
  text-transform: uppercase;
}

.ht-why__title-white {
  display: block;
  color: #ffffff;
}

.ht-why__title-coral {
  display: block;
  color: #ff5860;
}

.ht-why__intro {
  margin: 11px 0 0;
  color: rgba(255,255,255,.74);
  font-weight: 500;
  max-width: 330px !important;
  margin-top: 14px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

.ht-why__icon {
  display: grid;
  place-items: center;
  line-height: 1;
  filter: saturate(1.15);
  width: 54px !important;
  height: 54px !important;
  font-size: 35px !important;
}

.ht-why__item-title {
  color: #ffffff;
  text-transform: uppercase;
  margin: 2px 0 8px !important;
  font-size: 16px !important;
  line-height: 1.08 !important;
  font-weight: 900 !important;
}

.ht-why__item-text {
  margin: 0;
  color: rgba(255,255,255,.74);
  font-weight: 500;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.ht-why__scribble {
  display: block;
  background: #f4bf14;
  clip-path: polygon(
        0 45%, 13% 26%, 28% 39%, 42% 18%, 58% 36%, 73% 17%, 88% 32%, 100% 15%,
        100% 50%, 88% 58%, 72% 49%, 57% 64%, 41% 48%, 26% 65%, 12% 52%, 0 66%
    );
  transform: rotate(-3deg);
  width: 132px !important;
  height: 11px !important;
  margin-top: 18px !important;
}

.ht-why__outer {
  position: relative;
  margin: 0 auto;
  isolation: isolate;
  width: min(1460px, calc(100% - 16px)) !important;
}

.ht-why__panel {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  padding: 30px 38px;
  border-radius: 22px;
  background: radial-gradient(circle at 28% 20%, rgba(255,255,255,.03), transparent 24%),
        linear-gradient(105deg, #0d1b2f 0%, #0e2036 50%, #10253e 100%);
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(9, 23, 40, .18);
  overflow: hidden;
  min-height: 210px !important;
  padding-top: 34px !important;
  padding-bottom: 34px !important;
  grid-template-columns: minmax(230px, .78fr) minmax(0, 3.35fr) !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
}

.ht-why__heading {
  padding-right: 24px !important;
}

.ht-why__item {
  position: relative;
  display: grid;
  align-items: start;
  min-width: 0;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  gap: 15px !important;
  padding: 5px 24px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

@media (min-width: 1500px) {
  .ht-why__outer {
    width: min(1500px, calc(100% - 32px)) !important;
  }
}

@media (max-width: 1080px) {
  .ht-why__heading {
    max-width: 650px;
    padding-right: 0;
  }

  .ht-why__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 0;
  }

  .ht-why__item:nth-child(2)::after {
    display: none;
  }

  .ht-why__title--reference {
    font-size: clamp(32px, 5vw, 44px) !important;
  }


  .ht-why__outer {
    width: min(100%, 960px) !important;
  }

  .ht-why__panel {
    gap: 24px;
    padding: 30px;
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .ht-hero-selector-wrap {
    width: calc(100% - 24px);
    margin-top: -18px;
  }

  .ht-hero-selector {
    grid-template-columns: 1fr;
    border-radius: 10px;
  }

  .ht-hero-selector__intro, .ht-hero-selector__item, .ht-hero-selector__all {
    min-height: 72px;
    padding: 14px 16px;
  }

  .ht-hero-selector__item {
    border-top: 1px solid rgba(19, 33, 49, .08);
  }

  .ht-hero-selector__all {
    border-radius: 0 0 10px 10px;
  }

  .ht-hero-selector__title {
    font-size: 24px;
  }

  #huepfburgen-alle {
    scroll-margin-top: 90px;
  }

  .ht-bounces {
    padding: 58px 14px 64px;
  }

  .ht-bounces__title {
    font-size: clamp(29px, 9vw, 40px);
  }

  .ht-bounce-product__media {
    min-height: 230px;
  }

  .ht-bounce-product {
    grid-template-columns: 1fr;
    transform: none !important;
    clip-path: polygon(
              .5% 1%, 25% .6%, 50% 1%, 75% .6%, 99.4% 1%,
              99% 50%, 99.4% 99%,
              75% 99.4%, 50% 99%, 25% 99.4%, .6% 99%,
              1% 50%
          ) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: drop-shadow(0 8px 12px rgba(17, 24, 33, .10));
  }

  #huepfburgen-klein, #huepfburgen-mittel, #huepfburgen-gross {
    scroll-margin-top: 90px;
  }

  .ht-bounce-product__category {
    left: 58px !important;
    max-width: calc(100% - 70px) !important;
  }

  .ht-bounce-product__letter {
    width: 68px !important;
    height: 80px !important;
    display: grid !important;
    place-items: center !important;
    font-size: 50px !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  .ht-bounce-product-shell:hover {
    transform: none !important;
  }

  .ht-bounce-product-shell {
    transform: none !important;
    filter: none !important;
    box-shadow: 3px 4px 0 rgba(17,24,33,.035),
              0 8px 13px rgba(17,24,33,.11) !important;
  }

  .ht-bounce-product-shell::before {
    box-shadow: 3px 4px 0 rgba(17,24,33,.035),
              0 8px 13px rgba(17,24,33,.11) !important;
  }

  .ht-bounces__catalog {
    gap: 10px !important;
    row-gap: 12px !important;
  }

  .ht-bounce-product__letter, .ht-bounce-product__media .ht-bounce-product__letter {
    width: 66px !important;
    height: 78px !important;
  }

  .ht-bounce-product__letter > span {
    font-size: 48px;
    transform: translateY(-1px);
  }

  .ht-why {
    padding: 26px 14px 62px;
  }

  .ht-why__rustic-back {
    top: 6px;
    right: -4px;
    bottom: -6px;
    left: 6px;
  }

  .ht-why__title {
    font-size: clamp(30px, 10vw, 40px);
  }

  .ht-why__items {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .ht-why__item:not(:last-child)::after {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: 1px;
    background: repeating-linear-gradient(
              to right,
              rgba(255,255,255,.18) 0 3px,
              transparent 3px 7px
          );
  }

  .ht-why__title--reference {
    font-size: clamp(30px, 11vw, 42px) !important;
  }

  .ht-why__intro {
    font-size: 12.5px !important;
  }

  .ht-why__item {
    padding: 16px 0;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    gap: 13px !important;
  }

  .ht-why__icon {
    width: 48px !important;
    height: 48px !important;
    font-size: 31px !important;
  }

  .ht-why__item-title {
    font-size: 15px !important;
  }

  .ht-why__item-text {
    font-size: 12.5px !important;
  }

  .ht-why__outer {
    width: 100% !important;
  }

  .ht-why__panel {
    gap: 22px;
    padding: 24px 20px;
    border-radius: 18px;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}


/* 06B – SO FUNKTIONIERT ES / ABLAUF */
.ht-process {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: #fff;
  padding: 52px 20px 58px;
}

.ht-process::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(1180px, 82vw);
  height: 3px;
  background: #ff5d67;
  transform: translateX(-50%) rotate(-.15deg);
  border-radius: 999px;
}

.ht-process__inner {
  width: min(1320px, 100%);
  margin: 0 auto;
}

.ht-process__heading {
  margin: 0 auto 34px;
  text-align: center;
}

.ht-process__title {
  margin: 0;
  color: #111;
  font-size: clamp(28px, 2.45vw, 42px);
  font-weight: 900;
  line-height: .98;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

.ht-process__scribble {
  display: block;
  width: 54px;
  height: 9px;
  margin: 9px auto 0;
  border-top: 4px solid #ff5d67;
  border-radius: 50%;
  transform: rotate(-5deg) skewX(-18deg);
}

.ht-process__subtitle {
  margin: 16px 0 0;
  color: #202020;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
}

.ht-process__intro {
  margin: 7px auto 0;
  max-width: 720px;
  color: #656565;
  font-size: 14px;
  line-height: 1.55;
}

.ht-process__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 54px;
  align-items: center;
}

.ht-process__step {
  position: relative;
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  min-width: 0;
}

.ht-process__visual {
  position: relative;
  width: 118px;
  height: 88px;
}

.ht-process__visual::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 7px;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #f7f3f0;
}

.ht-process__number {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 12px;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #ff5d67;
  color: #fff;
  font-size: 25px;
  font-weight: 900;
  line-height: 1;
}

.ht-process__step--2 .ht-process__number {
  background: #27a8a4;
}

.ht-process__step--3 .ht-process__number {
  background: #f5bd00;
  color: #111;
}

.ht-process__icon {
  position: absolute;
  z-index: 2;
  right: 4px;
  top: 23px;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  font-size: 38px;
  line-height: 1;
  filter: grayscale(1) contrast(1.25);
}

.ht-process__copy {
  min-width: 0;
}

.ht-process__step-title {
  margin: 0 0 8px;
  color: #171717;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.15;
  text-transform: uppercase;
}

.ht-process__step-text {
  margin: 0;
  color: #4d4d4d;
  font-size: 12.5px;
  line-height: 1.5;
}

.ht-process__arrow {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: -41px;
  color: #f4bd13;
  font-size: 34px;
  font-weight: 300;
  line-height: 1;
  transform: translateY(-50%);
}

@media (max-width: 820px) {
  .ht-topbar {
    grid-template-columns: 1fr 1fr;
  }

  .ht-topbar__center {
    display: none;
  }

  .ht-process {
    padding: 44px 22px 50px;
  }

  .ht-process__heading {
    margin-bottom: 28px;
  }

  .ht-process__steps {
    grid-template-columns: 1fr;
    gap: 22px;
    width: min(560px, 100%);
    margin: 0 auto;
  }

  .ht-process__step {
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 18px;
  }

  .ht-process__visual {
    width: 118px;
    transform: none;
  }

  .ht-process__arrow {
    top: auto;
    right: auto;
    left: 48px;
    bottom: -24px;
    transform: rotate(90deg);
    font-size: 26px;
  }
}


/* 06C – EVENTZUBEHÖR */
.ht-event-strip {
  position: relative;
  padding: 12px 22px 76px;
  overflow: hidden;
}

.ht-event-strip__inner {
  position: relative;
  width: min(1490px, 100%);
  min-height: 210px;
  margin: 0 auto;
  padding: 28px 34px 24px;
  display: grid;
  grid-template-columns: minmax(230px, .85fr) minmax(0, 3.15fr);
  gap: 32px;
  align-items: center;
  background: #ff5363;
  clip-path: polygon(
        0 5%, 1.2% 3%, 2.3% 5%, 3.7% 2.5%, 5.3% 4%, 7% 2%, 8.6% 4%, 10.2% 2.4%,
        12% 4%, 14% 2.5%, 16% 4.2%, 18% 2.7%, 20% 4%, 22% 2.6%, 24% 4.2%, 26% 2.5%,
        28% 4%, 30% 2.4%, 32% 4%, 34% 2.6%, 36% 4.2%, 38% 2.5%, 40% 4%, 42% 2.8%,
        44% 4%, 46% 2.5%, 48% 4.2%, 50% 2.5%, 52% 4%, 54% 2.6%, 56% 4.2%, 58% 2.5%,
        60% 4%, 62% 2.8%, 64% 4%, 66% 2.5%, 68% 4.2%, 70% 2.5%, 72% 4%, 74% 2.6%,
        76% 4.2%, 78% 2.5%, 80% 4%, 82% 2.8%, 84% 4%, 86% 2.5%, 88% 4.2%, 90% 2.5%,
        92% 4%, 94% 2.6%, 96% 4.2%, 98% 2.5%, 100% 4%,
        99.2% 12%, 100% 20%, 99.2% 28%, 100% 36%, 99.2% 44%, 100% 52%, 99.2% 60%, 100% 68%, 99.2% 76%, 100% 84%, 99.2% 92%, 100% 100%,
        0 100%, .8% 92%, 0 84%, .8% 76%, 0 68%, .8% 60%, 0 52%, .8% 44%, 0 36%, .8% 28%, 0 20%, .8% 12%
    );
}

.ht-event-strip__intro {
  position: relative;
  z-index: 2;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 8px 0 8px 10px;
}

.ht-event-strip__title {
  margin: 0;
  max-width: 255px;
  color: #fff;
  font-size: clamp(27px, 2.1vw, 39px);
  font-weight: 950;
  line-height: .98;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

.ht-event-strip__spark {
  position: absolute;
  right: 6px;
  top: 22px;
  color: #ffd51a;
  font-size: 34px;
  line-height: 1;
  transform: rotate(-17deg);
}

.ht-event-strip__button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding: 12px 18px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .12);
  transition: transform .18s ease, background .18s ease;
}

.ht-event-strip__button:hover, .ht-event-strip__button:focus-visible {
  color: #fff;
  background: #000;
  transform: translateY(-2px);
}

.ht-event-strip__cards {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: center;
}

.ht-event-strip__card {
  display: block;
  min-width: 0;
  padding: 8px 8px 12px;
  background: #fff;
  color: #151515;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(77, 13, 21, .20);
  transform: rotate(-2.4deg);
  transition: transform .18s ease, box-shadow .18s ease;
}

.ht-event-strip__card--2 {
  transform: rotate(1.5deg);
}

.ht-event-strip__card--3 {
  transform: rotate(-1.2deg);
}

.ht-event-strip__card--4 {
  transform: rotate(2deg);
}

.ht-event-strip__card:hover, .ht-event-strip__card:focus-visible {
  color: #151515;
  transform: translateY(-4px) rotate(0deg);
  box-shadow: 0 12px 24px rgba(77, 13, 21, .27);
}

.ht-event-strip__photo {
  display: block;
  width: 100%;
  aspect-ratio: 1.32 / 1;
  overflow: hidden;
  background: #efefef;
}

.ht-event-strip__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ht-event-strip__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255,83,99,.15), rgba(0,0,0,.08));
}

.ht-event-strip__card-title {
  display: block;
  margin-top: 10px;
  min-height: 2.2em;
  color: #181818;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.08;
  text-transform: uppercase;
}

@media (min-width: 901px) {
  .ht-event-strip__inner {
    grid-template-columns: minmax(205px, .72fr) minmax(0, 3.28fr);
    gap: 28px;
  }

  .ht-event-strip__title {
    max-width: 220px;
    font-size: clamp(23px, 1.65vw, 32px);
    line-height: 1;
  }

  .ht-event-strip__spark {
    right: 2px;
    top: 24px;
    font-size: 29px;
  }

  .ht-event-strip__button {
    gap: 11px;
    margin-top: 18px;
    padding: 10px 15px;
    font-size: 11px;
  }

  .ht-event-strip__card {
    padding: 7px 7px 10px;
  }

  .ht-event-strip__card-title {
    margin-top: 8px;
    min-height: 2.1em;
    font-size: 11px;
    line-height: 1.06;
  }

  .ht-event-strip__cards {
    width: min(880px, 100%);
    gap: 16px;
    justify-self: center;
    margin-inline: auto;
  }
}


/* =========================================================
   07 – SCHLECHTWETTER / WETTERLEISTE
   ========================================================= */
.ht-weather-strip {
  position: relative;
  padding: 0 22px 72px;
  overflow: hidden;
}

.ht-weather-strip__inner {
  position: relative;
  width: min(1490px, 100%);
  min-height: 142px;
  margin: 0 auto;
  padding: 22px 160px 20px 250px;
  display: grid;
  grid-template-columns: minmax(300px, .9fr) minmax(330px, 1.1fr);
  gap: 54px;
  align-items: center;
  color: #101010;
  background: #22b9ad;
  clip-path: polygon(
        0 17%, 2% 10%, 5% 12%, 8% 8%, 12% 11%, 16% 7%, 20% 10%, 25% 6%, 30% 9%,
        36% 5%, 42% 8%, 48% 5%, 54% 8%, 60% 4%, 66% 7%, 72% 5%, 78% 8%, 84% 5%,
        90% 9%, 95% 7%, 100% 14%, 99% 29%, 100% 43%, 99% 58%, 100% 72%, 98% 86%,
        94% 92%, 88% 94%, 80% 92%, 72% 95%, 64% 92%, 56% 95%, 48% 92%, 40% 95%,
        32% 92%, 24% 95%, 16% 92%, 9% 95%, 4% 90%, 0 82%
    );
}

.ht-weather-strip__headline {
  position: relative;
  z-index: 2;
  align-self: center;
}

.ht-weather-strip__kicker, .ht-weather-strip__title {
  display: block;
  margin: 0;
  text-transform: uppercase;
}

.ht-weather-strip__kicker {
  font-size: clamp(23px, 2vw, 34px);
  font-weight: 950;
  line-height: .95;
  letter-spacing: -.04em;
}

.ht-weather-strip__title {
  margin-top: 4px;
  color: #fff;
  font-family: "Arial Black", Arial, Helvetica, sans-serif;
  font-size: clamp(35px, 3.15vw, 57px);
  font-weight: 950;
  font-style: italic;
  line-height: .88;
  letter-spacing: -.055em;
  transform: rotate(-2deg);
  transform-origin: left center;
  text-shadow: 0 1px 0 rgba(0,0,0,.05);
}

.ht-weather-strip__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ht-weather-strip__text {
  max-width: 390px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

.ht-weather-strip__text p {
  margin: 0;
}

.ht-weather-strip__button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 17px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 3px 0 rgba(0,0,0,.12);
  transition: transform .18s ease, background .18s ease;
}

.ht-weather-strip__button:hover, .ht-weather-strip__button:focus-visible {
  color: #fff;
  background: #000;
  transform: translateY(-2px);
}

.ht-weather-strip__decor {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.ht-weather-strip__decor--left {
  left: 60px;
  top: 18px;
  width: 150px;
  height: 100px;
}

.ht-weather-strip__cloud {
  position: absolute;
  left: 10px;
  top: 8px;
  width: 58px;
  height: 29px;
  border: 3px solid #ff5262;
  border-radius: 30px;
  transform: rotate(-9deg);
}

.ht-weather-strip__cloud::before, .ht-weather-strip__cloud::after {
  content: "";
  position: absolute;
  border: 3px solid #ff5262;
  background: #22b9ad;
  border-radius: 50%;
}

.ht-weather-strip__cloud::before {
  width: 26px;
  height: 26px;
  left: 8px;
  top: -15px;
}

.ht-weather-strip__cloud::after {
  width: 20px;
  height: 20px;
  left: 29px;
  top: -10px;
}

.ht-weather-strip__rain {
  position: absolute;
  left: 67px;
  top: 36px;
  font-size: 47px;
  line-height: 1;
  transform: rotate(11deg);
}

.ht-weather-strip__decor--right {
  right: 60px;
  top: 26px;
  width: 130px;
  height: 90px;
}

.ht-weather-strip__heart {
  position: absolute;
  left: 0;
  bottom: 1px;
  color: #ff5262;
  font-size: 54px;
  line-height: 1;
  transform: rotate(-10deg);
}

.ht-weather-strip__umbrella {
  position: absolute;
  right: 0;
  top: 0;
  color: #fff;
  font-size: 64px;
  line-height: 1;
  transform: rotate(10deg);
}

@media (max-width: 520px) {
  .ht-process {
    padding-left: 18px;
    padding-right: 18px;
  }

  .ht-process__title {
    font-size: 30px;
  }

  .ht-process__subtitle {
    font-size: 15px;
  }

  .ht-process__intro {
    font-size: 13px;
  }

  .ht-process__step {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
  }

  .ht-process__visual {
    width: 96px;
    transform: scale(.88);
    transform-origin: left center;
  }

  .ht-process__step-title {
    font-size: 14px;
  }

  .ht-process__step-text {
    font-size: 12px;
  }

  .ht-process__arrow {
    left: 38px;
  }

  .ht-event-strip {
    padding-left: 14px;
    padding-right: 14px;
  }

  .ht-event-strip__inner {
    padding: 30px 20px 34px;
  }

  .ht-event-strip__cards {
    grid-template-columns: 1fr 1fr;
    gap: 13px;
  }

  .ht-event-strip__card {
    padding: 6px 6px 9px;
  }

  .ht-event-strip__card-title {
    margin-top: 8px;
    font-size: 10px;
  }

  .ht-weather-strip {
    padding-left: 14px;
    padding-right: 14px;
  }

  .ht-weather-strip__inner {
    padding: 36px 22px 38px;
  }

  .ht-weather-strip__kicker {
    font-size: 22px;
  }

  .ht-weather-strip__title {
    font-size: 38px;
  }

  .ht-weather-strip__text {
    font-size: 13px;
  }

  .ht-weather-strip__decor {
    display: none;
  }
}


/* =========================================================
   08 – FAQ
   ========================================================= */
.ht-faq-strip {
  padding: 28px 28px 58px;
  background: #fff;
}

.ht-faq-strip__inner {
  width: min(100%, 1540px);
  margin: 0 auto;
}

.ht-faq-strip__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 24px;
}

.ht-faq-strip__title {
  position: relative;
  margin: 0;
  color: #101010;
  font-size: clamp(24px, 2vw, 38px);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

.ht-faq-strip__title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 54px;
  height: 5px;
  border-radius: 999px;
  background: #ff394b;
  transform: translateX(-50%) rotate(-4deg);
}

.ht-faq-strip__all {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: #111;
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .18s ease, opacity .18s ease;
}

.ht-faq-strip__all:hover, .ht-faq-strip__all:focus-visible {
  color: #111;
  opacity: .68;
  transform: translateX(2px);
}

.ht-faq-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}

.ht-faq-strip__item {
  min-width: 0;
  border: 0;
}

.ht-faq-strip__summary {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  cursor: pointer;
  list-style: none;
}

.ht-faq-strip__summary::-webkit-details-marker {
  display: none;
}

.ht-faq-strip__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: #fff;
  font-size: 21px;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 5px 11px rgba(0, 0, 0, .08);
}

.ht-faq-strip__number--1, .ht-faq-strip__number--4 {
  background: #ff3b4d;
}

.ht-faq-strip__number--2 {
  background: #28b9ae;
}

.ht-faq-strip__number--3 {
  background: #ffbd00;
  color: #111;
}

.ht-faq-strip__question {
  color: #111;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.22;
}

.ht-faq-strip__plus {
  position: relative;
  width: 25px;
  height: 25px;
  justify-self: end;
}

.ht-faq-strip__plus::before, .ht-faq-strip__plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: #111;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  transition: transform .2s ease, opacity .2s ease;
}

.ht-faq-strip__plus::before {
  width: 22px;
  height: 3px;
}

.ht-faq-strip__plus::after {
  width: 3px;
  height: 22px;
}

.ht-faq-strip__item[open] .ht-faq-strip__plus::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

.ht-faq-strip__answer {
  margin: 4px 0 0 68px;
  padding: 0 32px 2px 0;
  color: #4c4c4c;
  font-size: 13px;
  line-height: 1.55;
}

.ht-faq-strip__answer p {
  margin: 0;
}

@media (max-width: 1150px) {
  .ht-faq-strip__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 34px;
  }
}

@media (max-width: 460px) {
  .ht-faq-strip__head {
    display: block;
  }
}

.ht-faq-strip__all-arrow {
  display: inline-block;
  transition: transform .2s ease;
}

.ht-faq-strip__all[aria-expanded="true"] .ht-faq-strip__all-arrow {
  transform: rotate(90deg);
}

.ht-faq-strip__item[hidden] {
  display: none !important;
}

.ht-faq-strip__item--extra {
  animation: htFaqReveal .22s ease both;
}

@keyframes htFaqReveal {
  from {
    opacity: 0;
    transform: translateY(-7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =========================================================
   09 – ABSCHLUSS-CTA
   ========================================================= */
.ht-final-cta {
  position: relative;
  margin: 36px auto 0;
  padding: 0 20px 34px;
  overflow: hidden;
}

.ht-final-cta__inner {
  position: relative;
  width: min(100%, 1540px);
  min-height: 154px;
  margin: 0 auto;
  padding: 28px 118px 28px 150px;
  display: grid;
  grid-template-columns: minmax(330px, 1.05fr) minmax(310px, .9fr) minmax(250px, .65fr);
  align-items: center;
  gap: 46px;
  color: #fff;
  background: #07182e;
  clip-path: polygon(
        2.2% 10%, 7% 4%, 13% 7%, 20% 3%, 29% 6%, 39% 2%, 49% 5%, 59% 2%, 68% 5%, 78% 2%, 87% 6%, 97.5% 3%,
        98.4% 18%, 97.7% 32%, 98.6% 47%, 97.8% 62%, 98.5% 78%, 97.3% 94%,
        88% 97%, 78% 94%, 68% 98%, 58% 95%, 48% 98%, 38% 95%, 28% 98%, 18% 94%, 9% 98%, 2.5% 93%,
        1.8% 78%, 2.5% 63%, 1.6% 48%, 2.4% 33%, 1.6% 18%
    );
}

.ht-final-cta__headline {
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
}

.ht-final-cta__title {
  margin: 0;
  font-size: clamp(25px, 2.05vw, 38px);
  line-height: .98;
  font-weight: 900;
  letter-spacing: -.03em;
  text-transform: uppercase;
}

.ht-final-cta__title span, .ht-final-cta__title strong {
  display: block;
}

.ht-final-cta__title span {
  color: #fff;
}

.ht-final-cta__title strong {
  margin-top: 6px;
  color: #ff3652;
  font-weight: 900;
}

.ht-final-cta__heart {
  flex: 0 0 auto;
  margin-top: 12px;
  color: #ff3652;
  font-size: 48px;
  line-height: 1;
  font-family: Arial, sans-serif;
  transform: rotate(-8deg);
}

.ht-final-cta__copy {
  max-width: 395px;
  font-size: 15px;
  line-height: 1.42;
  font-weight: 650;
  color: rgba(255, 255, 255, .96);
}

.ht-final-cta__copy p {
  margin: 0;
}

.ht-final-cta__button {
  position: relative;
  z-index: 2;
  min-height: 58px;
  padding: 0 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border-radius: 8px;
  background: #ffc318;
  color: #07121f;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .01em;
  box-shadow: 0 7px 18px rgba(0, 0, 0, .16);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.ht-final-cta__button:hover, .ht-final-cta__button:focus-visible {
  color: #07121f;
  background: #ffd044;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
}

.ht-final-cta__button-arrow {
  font-size: 22px;
  line-height: 1;
}

.ht-final-cta__button > span:first-child {
  white-space: nowrap;
}

.ht-final-cta__title-line2 {
  display: block;
  margin-top: 6px;
  color: #fff;
  white-space: nowrap;
}

.ht-final-cta__title-line2 strong {
  display: inline;
  margin-top: 0;
  color: #ff3652;
}

.ht-final-cta__decor, .ht-final-cta__crown, .ht-final-cta__dots {
  position: absolute;
  pointer-events: none;
}

.ht-final-cta__decor--star {
  left: 62px;
  top: 48px;
  color: #ff3652;
  font-size: 38px;
  line-height: 1;
  transform: rotate(-15deg);
}

.ht-final-cta__crown {
  left: 42.5%;
  top: 14px;
  color: #ffc318;
  font-size: 34px;
  line-height: 1;
  transform: rotate(12deg);
}

.ht-final-cta__dots {
  right: 40px;
  bottom: 26px;
  width: 58px;
  height: 44px;
  opacity: .9;
  background-image: radial-gradient(circle, #ff3652 1.7px, transparent 2px);
  background-size: 11px 11px;
  transform: rotate(-4deg);
}

@media (max-width: 1180px) {
  .ht-event-strip__inner {
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 22px;
    padding-left: 26px;
    padding-right: 26px;
  }

  .ht-event-strip__cards {
    gap: 12px;
  }

  .ht-event-strip__card-title {
    font-size: 11px;
  }

  .ht-weather-strip__inner {
    padding-left: 190px;
    padding-right: 120px;
    grid-template-columns: minmax(250px, .9fr) minmax(280px, 1.1fr);
    gap: 34px;
  }

  .ht-weather-strip__decor--left {
    left: 34px;
    transform: scale(.85);
    transform-origin: left top;
  }

  .ht-weather-strip__decor--right {
    right: 25px;
    transform: scale(.82);
    transform-origin: right top;
  }

  .ht-final-cta__inner {
    padding: 28px 70px 28px 105px;
    grid-template-columns: 1fr 1fr auto;
    gap: 28px;
  }

  .ht-final-cta__decor--star {
    left: 42px;
  }

  .ht-final-cta__heart {
    display: none;
  }

  .ht-final-cta__button {
    min-width: 225px;
  }
}

@media (min-width: 981px) {
  .ht-bounce-product__media {
    overflow: hidden;
  }

  .ht-bounce-product__info {
    position: relative;
    background: linear-gradient(
                  180deg,
                  #fffefb 0%,
                  #fbfaf6 100%
              ) !important;
  }

  .ht-bounce-product__button {
    border-radius: 7px 5px 8px 5px /
              5px 8px 5px 7px !important;
    box-shadow: 2px 3px 0 rgba(17, 24, 33, .09) !important;
  }

  .ht-bounce-product:hover {
    z-index: 20 !important;
    transform: translateY(-5px)
              rotate(0deg)
              scale(1.006) !important;
    box-shadow: 6px 8px 0 rgba(17, 24, 33, .05),
              0 20px 34px rgba(17, 24, 33, .16) !important;
  }

  .ht-bounce-product__media,
  .ht-bounce-product__info {
    border-radius: 0 !important;
  }

  .ht-bounce-product:nth-child(1) {
    z-index: 3 !important;
    transform: translate(2px, 1px) rotate(-.75deg) !important;
  }

  .ht-bounce-product:nth-child(2) {
    z-index: 2 !important;
    clip-path: polygon(
              0.8% 1.0%, 13% 1.8%, 26% .7%, 39% 1.4%, 53% .8%, 67% 1.6%, 82% .7%, 99% 1.5%,
              98.6% 18%, 99.3% 34%, 98.7% 50%, 99.4% 67%, 98.8% 83%, 99.1% 98.6%,
              84% 99.1%, 69% 98.5%, 54% 99.3%, 39% 98.6%, 24% 99.2%, .9% 98.4%,
              1.4% 82%, .6% 66%, 1.2% 50%, .5% 34%, 1.3% 17%
          ) !important;
    transform: translate(-2px, 0) rotate(.55deg) !important;
  }

  .ht-bounce-product:nth-child(3) {
    z-index: 2 !important;
    clip-path: polygon(
              .5% 1.7%, 14% .8%, 29% 1.5%, 44% .7%, 58% 1.4%, 73% .6%, 87% 1.5%, 99.4% .9%,
              98.8% 16%, 99.4% 31%, 98.7% 47%, 99.3% 63%, 98.9% 79%, 99.2% 98.3%,
              86% 99.1%, 71% 98.4%, 56% 99.3%, 41% 98.5%, 26% 99.2%, .7% 98.6%,
              1.2% 82%, .5% 66%, 1.3% 49%, .6% 33%, 1.4% 17%
          ) !important;
    transform: translate(2px, -1px) rotate(.45deg) !important;
  }

  .ht-bounce-product:nth-child(4) {
    z-index: 4 !important;
    clip-path: polygon(
              .9% .8%, 16% 1.6%, 31% .7%, 47% 1.4%, 63% .6%, 79% 1.5%, 99.1% .8%,
              98.5% 15%, 99.4% 30%, 98.7% 45%, 99.3% 61%, 98.8% 77%, 99.2% 98.8%,
              82% 99.2%, 65% 98.5%, 49% 99.3%, 33% 98.4%, 17% 99.1%, .8% 98.5%,
              1.4% 81%, .6% 65%, 1.2% 49%, .5% 33%, 1.1% 16%
          ) !important;
    transform: translate(-2px, -2px) rotate(-.6deg) !important;
  }

  .ht-bounce-product:nth-child(5) {
    z-index: 3 !important;
    clip-path: polygon(
              .6% 1.4%, 12% .7%, 25% 1.5%, 38% .8%, 51% 1.6%, 64% .7%, 78% 1.5%, 99.3% .9%,
              98.7% 17%, 99.4% 33%, 98.8% 50%, 99.3% 66%, 98.6% 82%, 99.1% 98.5%,
              87% 99.2%, 73% 98.5%, 59% 99.3%, 45% 98.6%, 31% 99.2%, 17% 98.4%, .7% 98.8%,
              1.3% 83%, .5% 67%, 1.2% 51%, .6% 35%, 1.4% 18%
          ) !important;
    transform: translate(2px, -3px) rotate(-.5deg) !important;
  }

  .ht-bounce-product:nth-child(6) {
    z-index: 2 !important;
    clip-path: polygon(
              .8% .9%, 15% 1.7%, 30% .7%, 46% 1.5%, 62% .6%, 78% 1.4%, 99.1% .8%,
              98.5% 16%, 99.3% 32%, 98.7% 48%, 99.4% 64%, 98.8% 80%, 99.2% 98.7%,
              84% 99.1%, 68% 98.5%, 52% 99.2%, 36% 98.4%, 20% 99.1%, .9% 98.5%,
              1.4% 82%, .6% 66%, 1.2% 50%, .5% 34%, 1.3% 17%
          ) !important;
    transform: translate(-2px, -3px) rotate(.65deg) !important;
  }

  .ht-bounce-product-shell:nth-child(1),
  .ht-bounce-product-shell:nth-child(2),
  .ht-bounce-product-shell:nth-child(3),
  .ht-bounce-product-shell:nth-child(4),
  .ht-bounce-product-shell:nth-child(5),
  .ht-bounce-product-shell:nth-child(6),
  .ht-bounce-product-shell:hover {
    will-change: auto !important;
  }

  .ht-bounce-product-shell:nth-child(odd)::after {
    clip-path: polygon(
              .4% 1.8%,
              18% .7%,
              37% 1.3%,
              57% .5%,
              78% 1.2%,
              99.5% .4%,
              99% 24%,
              99.6% 49%,
              98.9% 73%,
              99.4% 99%,
              77% 98.6%,
              56% 99.5%,
              34% 98.7%,
              14% 99.4%,
              .5% 98.8%,
              1.1% 75%,
              .4% 51%,
              1.2% 26%
          ) !important;
  }

  .ht-bounce-product-shell:nth-child(even)::after {
    clip-path: polygon(
              .8% .5%,
              20% 1.4%,
              41% .6%,
              62% 1.3%,
              82% .5%,
              99.1% 1.5%,
              98.6% 26%,
              99.5% 51%,
              98.7% 76%,
              99.2% 98.6%,
              80% 99.5%,
              59% 98.7%,
              38% 99.4%,
              18% 98.6%,
              .8% 99.3%,
              1.4% 74%,
              .5% 49%,
              1.3% 24%
          ) !important;
  }

  .ht-bounce-product::before,
  .ht-bounce-product::after {
    content: none !important;
    display: none !important;
  }

  .ht-bounce-product__letter {
    filter: drop-shadow(2px 3px 0 rgba(0,0,0,.07));
    width: 78px !important;
    height: 90px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    font-size: 58px !important;
    line-height: 1 !important;
    text-align: center !important;
    clip-path: polygon(
              0 0,
              100% 0,
              95% 70%,
              88% 84%,
              72% 90%,
              56% 88%,
              43% 96%,
              27% 90%,
              13% 93%,
              4% 82%,
              0 68%
          ) !important;
  }

  .ht-bounces__catalog {
    margin-bottom: -8px;
    position: relative;
    padding: 8px 10px 22px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start;
    column-gap: 34px !important;
    row-gap: 0 !important;
    gap: 0 34px !important;
    overflow: visible !important;
  }

  .ht-bounce-product-shell::before {
    opacity: .86;
    inset: -4px !important;
    padding: 4px;
    border: 1px solid rgba(17,24,33,.12);
    -webkit-mask: linear-gradient(#000 0 0) content-box,
              linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box,
              linear-gradient(#000 0 0);
    mask-composite: exclude;
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: -1 !important;
    top: -5px !important;
    right: -6px !important;
    bottom: -6px !important;
    left: -5px !important;
    pointer-events: none !important;
    background: radial-gradient(circle at 5% 10%, rgba(24,30,36,.22) 0 1.2px, transparent 1.8px),
              radial-gradient(circle at 16% 96%, rgba(24,30,36,.16) 0 1.1px, transparent 1.7px),
              radial-gradient(circle at 29% 3%, rgba(24,30,36,.17) 0 1.1px, transparent 1.7px),
              radial-gradient(circle at 44% 98%, rgba(24,30,36,.18) 0 1.2px, transparent 1.8px),
              radial-gradient(circle at 61% 2%, rgba(24,30,36,.16) 0 1.1px, transparent 1.7px),
              radial-gradient(circle at 77% 97%, rgba(24,30,36,.17) 0 1.1px, transparent 1.7px),
              radial-gradient(circle at 95% 17%, rgba(24,30,36,.20) 0 1.2px, transparent 1.8px),
              radial-gradient(circle at 98% 71%, rgba(24,30,36,.17) 0 1.1px, transparent 1.7px),
              radial-gradient(circle at 2% 56%, rgba(24,30,36,.18) 0 1.1px, transparent 1.7px),
              #fffdf6 !important;
    background-size: 17px 19px,
              23px 21px,
              29px 17px,
              19px 25px,
              31px 18px,
              21px 27px,
              27px 20px,
              18px 24px,
              24px 19px,
              auto !important;
    clip-path: polygon(
              0.2% 2.2%,
              7% .8%,
              15% 1.8%,
              24% .6%,
              34% 1.6%,
              44% .5%,
              55% 1.7%,
              66% .6%,
              77% 1.6%,
              88% .7%,
              99.8% 1.7%,
              99.1% 12%,
              99.8% 23%,
              99.2% 35%,
              99.9% 47%,
              99.1% 59%,
              99.8% 71%,
              99.0% 83%,
              99.6% 98.8%,
              88% 99.5%,
              76% 98.8%,
              64% 99.6%,
              52% 98.9%,
              40% 99.7%,
              28% 98.8%,
              16% 99.5%,
              .5% 98.8%,
              1.2% 87%,
              .4% 75%,
              1.3% 63%,
              .4% 51%,
              1.2% 39%,
              .5% 27%,
              1.4% 14%
          ) !important;
    box-shadow: 7px 8px 0 rgba(17,24,33,.055),
              0 13px 22px rgba(17,24,33,.18) !important;
  }

  .ht-bounce-product-shell::after {
    inset: -2px !important;
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 3 !important;
    top: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    left: -2px !important;
    pointer-events: none !important;
    background: transparent !important;
    border: 1px solid rgba(31,37,42,.17) !important;
    clip-path: polygon(
              .5% 1.5%,
              12% .7%,
              25% 1.4%,
              38% .6%,
              51% 1.4%,
              64% .6%,
              77% 1.5%,
              90% .7%,
              99.5% 1.4%,
              99% 25%,
              99.6% 50%,
              99% 75%,
              99.5% 98.8%,
              85% 99.5%,
              70% 98.8%,
              55% 99.5%,
              40% 98.8%,
              25% 99.5%,
              10% 98.8%,
              .6% 99%,
              1.2% 74%,
              .5% 49%,
              1.3% 24%
          ) !important;
    box-shadow: none !important;
    filter: none !important;
  }

  .ht-bounce-product {
    transition: transform .2s ease,
              box-shadow .2s ease,
              z-index .2s ease;
    transform-origin: center center !important;
    will-change: transform;
    border: 0 !important;
    border-radius: 0 !important;
    clip-path: polygon(
              0.6% 2.0%,
              8% 1.1%,
              17% 1.8%,
              27% 0.8%,
              38% 1.5%,
              49% 0.6%,
              61% 1.4%,
              73% 0.7%,
              85% 1.6%,
              99.2% 0.9%,
              98.7% 12%,
              99.4% 24%,
              98.9% 37%,
              99.5% 51%,
              98.8% 64%,
              99.3% 77%,
              98.6% 89%,
              99.1% 98.5%,
              89% 99.2%,
              78% 98.4%,
              66% 99.3%,
              54% 98.6%,
              42% 99.4%,
              30% 98.5%,
              18% 99.2%,
              0.8% 98.7%,
              1.3% 88%,
              0.6% 76%,
              1.2% 64%,
              0.5% 52%,
              1.1% 39%,
              0.7% 26%,
              1.4% 14%
          ) !important;
    isolation: isolate;
    transform: none !important;
    position: relative !important;
    z-index: 2 !important;
    overflow: hidden !important;
    filter: none !important;
    box-shadow: none !important;
  }

  .ht-bounce-product-shell:nth-child(1) {
    transform: translate(2px, 1px) rotate(-.72deg) !important;
  }

  .ht-bounce-product-shell:nth-child(2) {
    transform: translate(-2px, 0) rotate(.56deg) !important;
  }

  .ht-bounce-product-shell:nth-child(3) {
    transform: translate(2px, -1px) rotate(.48deg) !important;
  }

  .ht-bounce-product-shell:nth-child(4) {
    transform: translate(-2px, -1px) rotate(-.62deg) !important;
  }

  .ht-bounce-product-shell:nth-child(5) {
    transform: translate(2px, -2px) rotate(-.50deg) !important;
  }

  .ht-bounce-product-shell:nth-child(6) {
    transform: translate(-2px, -2px) rotate(.64deg) !important;
  }

  .ht-bounce-product-shell:nth-child(7) {
    transform: translate(2px, -1px) rotate(.42deg) !important;
  }

  .ht-bounce-product-shell:nth-child(8) {
    transform: translate(-2px, -2px) rotate(-.54deg) !important;
  }

  .ht-bounce-product-shell:nth-child(9) {
    transform: translate(2px, -1px) rotate(-.46deg) !important;
  }

  .ht-bounce-product-shell:nth-child(10) {
    transform: translate(-2px, -2px) rotate(.58deg) !important;
  }

  .ht-bounces__more {
    margin-top: 12px !important;
    min-height: 42px;
  }

  .ht-bounce-product-shell:nth-child(n/**/+3) {
    margin-top: -16px !important;
  }

  .ht-bounce-product-shell:hover::before {
    box-shadow: 9px 10px 0 rgba(17,24,33,.07),
              0 18px 28px rgba(17,24,33,.23) !important;
  }

  .ht-bounce-product-shell:hover::after {
    filter: drop-shadow(6px 7px 0 rgba(17, 24, 33, .06))
              drop-shadow(0 15px 20px rgba(17, 24, 33, .20)) !important;
    border-color: rgba(31,37,42,.24) !important;
  }

  .ht-bounce-product-shell {
    min-width: 0;
    will-change: transform;
    position: relative !important;
    z-index: 1 !important;
    isolation: isolate !important;
    overflow: visible !important;
    filter: none !important;
    box-shadow: none !important;
    transform-origin: center center !important;
    transition: transform .16s ease !important;
  }

  .ht-bounce-product-shell:hover {
    transform: none !important;
    box-shadow: 7px 9px 0 rgba(17, 24, 33, .06),
              0 16px 24px rgba(17, 24, 33, .20) !important;
    z-index: 20 !important;
    filter: none !important;
  }

  .ht-bounce-product-shell:nth-child(1):hover {
    transform: translate(2px, -1px) rotate(-.95deg) !important;
  }

  .ht-bounce-product-shell:nth-child(2):hover {
    transform: translate(-2px, -2px) rotate(.84deg) !important;
  }

  .ht-bounce-product-shell:nth-child(3):hover {
    transform: translate(2px, -3px) rotate(.76deg) !important;
  }

  .ht-bounce-product-shell:nth-child(4):hover {
    transform: translate(-2px, -3px) rotate(-.90deg) !important;
  }

  .ht-bounce-product-shell:nth-child(5):hover {
    transform: translate(2px, -4px) rotate(-.78deg) !important;
  }

  .ht-bounce-product-shell:nth-child(6):hover {
    transform: translate(-2px, -4px) rotate(.92deg) !important;
  }

  .ht-bounce-product-shell:nth-child(7):hover {
    transform: translate(2px, -3px) rotate(.70deg) !important;
  }

  .ht-bounce-product-shell:nth-child(8):hover {
    transform: translate(-2px, -4px) rotate(-.82deg) !important;
  }

  .ht-bounce-product-shell:nth-child(9):hover {
    transform: translate(2px, -3px) rotate(-.74deg) !important;
  }

  .ht-bounce-product-shell:nth-child(10):hover {
    transform: translate(-2px, -4px) rotate(.86deg) !important;
  }

  .ht-bounces__inner {
    width: min(1370px, 100%) !important;
    max-width: 1370px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (min-width: 981px) and (max-width: 1417px) {
  .ht-bounces__inner {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .ht-event-strip__inner {
    grid-template-columns: 205px minmax(0, 1fr);
    gap: 20px;
  }

  .ht-event-strip__cards {
    width: min(760px, 100%);
    gap: 11px;
  }

  .ht-event-strip__card-title {
    font-size: 10px;
  }

  .ht-final-cta__button {
    min-width: 260px;
    padding-left: 22px;
    padding-right: 22px;
    gap: 20px;
  }

  .ht-final-cta__crown {
    display: none;
  }
}

@media (max-width: 680px) {
  .ht-final-cta__inner {
    padding: 38px 34px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    clip-path: polygon(2% 3%, 98% 1%, 99% 97%, 1% 99%);
  }

  .ht-final-cta__title {
    font-size: clamp(27px, 8vw, 38px);
  }

  .ht-final-cta__copy {
    max-width: 100%;
    font-size: 14px;
  }

  .ht-final-cta__button {
    width: 100%;
    min-width: 0;
  }

  .ht-final-cta__button > span:first-child,
  .ht-final-cta__title-line2 {
    white-space: normal;
  }
}

@media (min-width: 850px) and (max-width: 1100px) {
  .ht-hero-selector-wrap {
    width: min(940px, calc(100% - 48px));
    margin: -22px auto 20px;
  }

  .ht-hero-selector {
    grid-template-columns: 1.2fr repeat(3, 1fr) .95fr;
    min-height: 72px;
    border-radius: 10px;
  }

  .ht-hero-selector__intro, .ht-hero-selector__item, .ht-hero-selector__all {
    min-height: 72px;
    padding: 10px 12px;
  }

  .ht-hero-selector__intro::after, .ht-hero-selector__item::after {
    display: block;
    top: 12px;
    bottom: 12px;
  }

  .ht-hero-selector__kicker {
    font-size: 9px;
  }

  .ht-hero-selector__title {
    font-size: 18px;
    line-height: .95;
  }

  .ht-hero-selector__item {
    gap: 8px;
  }

  .ht-hero-selector__icon {
    width: 32px;
    height: 32px;
    border-width: 1.5px;
    font-size: 15px;
  }

  .ht-hero-selector__copy {
    gap: 2px;
  }

  .ht-hero-selector__copy span {
    font-size: 8px;
  }

  .ht-hero-selector__copy strong {
    font-size: 10px;
    line-height: 1.12;
  }

  .ht-hero-selector__all {
    gap: 3px;
  }

  .ht-hero-selector__all span {
    font-size: 8px;
  }

  .ht-hero-selector__all strong {
    font-size: 10px;
  }
}

@media (min-width: 641px) and (max-width: 849px) {
  .ht-hero-selector-wrap {
    width: calc(100% - 28px);
    margin: -18px auto 18px;
  }

  .ht-hero-selector {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 0;
    border-radius: 9px;
  }

  .ht-hero-selector__intro, .ht-hero-selector__item, .ht-hero-selector__all {
    min-height: 58px;
    padding: 8px 10px;
  }

  .ht-hero-selector__intro {
    gap: 0;
  }

  .ht-hero-selector__kicker {
    font-size: 7px;
    line-height: 1;
  }

  .ht-hero-selector__title {
    font-size: 16px;
    line-height: .92;
  }

  .ht-hero-selector__item {
    gap: 7px;
    border-top: 0;
  }

  .ht-hero-selector__icon {
    width: 28px;
    height: 28px;
    border-width: 1.5px;
    font-size: 13px;
  }

  .ht-hero-selector__copy {
    gap: 1px;
  }

  .ht-hero-selector__copy span, .ht-hero-selector__all span {
    font-size: 7px;
    line-height: 1.05;
  }

  .ht-hero-selector__copy strong, .ht-hero-selector__all strong {
    font-size: 9px;
    line-height: 1.08;
  }

  .ht-hero-selector__all {
    gap: 2px;
    border-radius: 0;
  }
}

@media (min-width: 901px) and (max-width: 1200px) {
  .ht-hero__content {
    left: clamp(92px, 12vw, 125px) !important;
    width: min(350px, 38vw) !important;
    top: 58% !important;
  }

  .ht-hero__eyebrow {
    font-size: 10px !important;
    padding: 6px 9px 5px !important;
    margin-bottom: 8px !important;
  }

  .ht-hero__title {
    font-size: clamp(28px, 3.15vw, 36px) !important;
    line-height: .91 !important;
    padding-bottom: 10px !important;
  }

  .ht-hero__title::after {
    width: 135px !important;
    height: 9px !important;
    margin-top: 6px !important;
  }

  .ht-hero__text {
    max-width: 325px !important;
    margin-top: 8px !important;
    margin-left: 4px !important;
    font-size: 12px !important;
    line-height: 1.38 !important;
  }

  .ht-hero__button {
    min-height: 42px !important;
    margin-top: 13px !important;
    padding: 0 17px !important;
    gap: 13px !important;
    font-size: 11px !important;
  }
}


/* =========================================================
   10 – HERO-SLIDER UND INTERAKTIVE MEDIEN
   ========================================================= */
.ht-bounce-product__image-link {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  color: inherit !important;
  text-decoration: none !important;
}

.ht-bounce-product__image-link .ht-bounce-product__image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.ht-bounce-product__image-link:focus-visible {
  outline: 3px solid #ff5860 !important;
  outline-offset: -3px !important;
}

.ht-hero-slider {
  position: relative !important;
}

.ht-hero-slider__slides {
  position: relative !important;
  min-height: inherit !important;
}

.ht-hero-slider__slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity var(--ht-hero-fade-duration, .65s) ease, visibility var(--ht-hero-fade-duration, .65s) ease !important;
}

.ht-hero-slider__slide.is-active {
  position: relative !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 2 !important;
}

.ht-hero-slider .ht-hero__polaroids {
  z-index: 6 !important;
}

.ht-hero-slider__arrow {
  position: absolute !important;
  top: 47% !important;
  z-index: 12 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 46px !important;
  height: 46px !important;
  padding: 0 0 4px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.94) !important;
  color: #0d2035 !important;
  box-shadow: 0 6px 20px rgba(13,32,53,.18) !important;
  font: 400 34px/1 Arial, Helvetica, sans-serif !important;
  cursor: pointer !important;
  transform: translateY(-50%) !important;
}

.ht-hero-slider__arrow--prev {
  left: 22px !important;
}

.ht-hero-slider__arrow--next {
  right: 22px !important;
}

.ht-hero-slider__dot {
  width: 9px !important;
  height: 9px !important;
  padding: 0 !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: 0 1px 5px rgba(0,0,0,.18) !important;
  cursor: pointer !important;
  transition: width .2s ease, border-radius .2s ease, background .2s ease !important;
}

.ht-hero-slider__dot.is-active {
  width: 28px !important;
  border-radius: 999px !important;
  background: #fff !important;
}

.ht-hero-slider__dots {
  position: absolute !important;
  left: 50% !important;
  z-index: 12 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  transform: translateX(-50%) !important;
  bottom: 48px !important;
}

@media (max-width: 900px) {
  .ht-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
  }

  .ht-hero__polaroids {
    display: none;
  }

  .ht-event-strip {
    padding-bottom: 58px;
  }

  .ht-event-strip__inner {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 34px 28px 40px;
  }

  .ht-event-strip__intro {
    align-items: center;
    text-align: center;
    padding-left: 0;
  }

  .ht-event-strip__title {
    max-width: none;
  }

  .ht-event-strip__spark {
    display: none;
  }

  .ht-event-strip__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(650px, 100%);
    margin: 0 auto;
    gap: 20px;
  }

  .ht-weather-strip {
    padding-bottom: 56px;
  }

  .ht-weather-strip__inner {
    min-height: 0;
    padding: 40px 34px 42px;
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
  }

  .ht-weather-strip__headline, .ht-weather-strip__copy {
    justify-self: center;
    align-items: center;
  }

  .ht-weather-strip__title {
    transform-origin: center center;
  }

  .ht-weather-strip__text {
    max-width: 560px;
  }

  .ht-weather-strip__decor {
    opacity: .45;
  }

  .ht-weather-strip__decor--left {
    left: 20px;
    top: 14px;
    transform: scale(.65);
  }

  .ht-weather-strip__decor--right {
    right: 18px;
    top: 18px;
    transform: scale(.62);
  }

  .ht-final-cta {
    margin-top: 28px;
    padding-inline: 16px;
  }

  .ht-final-cta__inner {
    padding: 34px 54px;
    grid-template-columns: 1fr auto;
    gap: 22px 32px;
  }

  .ht-final-cta__headline, .ht-final-cta__copy {
    grid-column: 1;
  }

  .ht-final-cta__button {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }

  .ht-final-cta__decor--star, .ht-final-cta__crown, .ht-final-cta__dots {
    display: none;
  }

  .ht-hero-slider__arrow {
    width: 40px !important;
    height: 40px !important;
    font-size: 30px !important;
  }

  .ht-hero-slider__arrow--prev {
    left: 10px !important;
  }

  .ht-hero-slider__arrow--next {
    right: 10px !important;
  }

  .ht-hero-slider__dots {
    bottom: 42px !important;
  }
}

@media (max-width: 600px) {
  .ht-topbar {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 4px;
    padding: 5px 0;
    font-size: 11px;
  }

  .ht-topbar__left, .ht-topbar__right {
    justify-content: center;
    text-align: center;
  }

  .ht-global-footer-wrap {
    padding: 44px
      			20px
      			24px;
  }

  .ht-footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .ht-footer-brand {
    max-width: 100%;
  }

  .ht-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .ht-hero-slider__arrow {
    top: 50% !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 27px !important;
  }

  .ht-hero-slider__dots {
    bottom: 36px !important;
  }
}

.ht-hero__button > span:first-child {
  display: inline-block !important;
  line-height: 1.2 !important;
}

.ht-hero__shade, .ht-hero__curve, .ht-hero__image, .ht-hero__polaroids, .ht-hero__polaroid {
  pointer-events: none !important;
}

/* Hero CTA – konsolidierte Basis */
.ht-hero__content .ht-hero__button {
  position: relative !important;
  z-index: 100 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 56px !important;
  margin-top: 18px !important;
  padding: 14px 26px !important;
  gap: 10px !important;
  border-radius: 12px !important;
  text-align: center !important;
  cursor: pointer !important;
  transform: none !important;
  transform-origin: center !important;
  text-transform: none !important;
  white-space: nowrap !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  font-style: normal !important;
  font-stretch: normal !important;
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
  text-rendering: auto !important;
  -webkit-font-smoothing: auto !important;
  -moz-osx-font-smoothing: auto !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-tap-highlight-color: transparent;
}

.ht-hero__content .ht-hero__button-arrow {
  margin: 0 0 0 2px !important;
  font: 700 18px/1 Arial, Helvetica, sans-serif !important;
  line-height: 1 !important;
  transform: none !important;
}

.ht-hero-slider__arrow, .ht-hero-slider__dot {
  pointer-events: auto !important;
}

@media (max-width: 380px) {
  .ht-topbar {
    font-size: 10.5px;
  }

  .ht-hero__content .ht-hero__button {
    white-space: normal !important;
    font-size: 12px !important;
  }
}

.ht-hero__content .ht-hero__button:hover, .ht-hero__content .ht-hero__button:focus-visible {
  transform: translateY(-2px) !important;
}

.ht-hero__content .ht-hero__button > span:first-child {
  font: inherit !important;
  letter-spacing: inherit !important;
  transform: none !important;
}

.ht-hero-slider__slide.is-active .ht-hero__content {
  pointer-events: auto !important;
}

.ht-hero-slider__slide.is-active .ht-hero__button {
  position: relative !important;
  z-index: 1000 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 56px !important;
  padding: 14px 27px !important;
  gap: 10px !important;
  border-radius: 12px !important;
  transform: rotate(-10deg) !important;
  transform-origin: center center !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  font-style: normal !important;
  font-stretch: normal !important;
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
  text-transform: none !important;
  text-rendering: geometricPrecision !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
}

.ht-hero-slider__slide.is-active .ht-hero__button > span:first-child {
  font: inherit !important;
  letter-spacing: 0 !important;
  transform: none !important;
}

.ht-hero-slider__slide.is-active .ht-hero__button-arrow {
  margin-left: 3px !important;
  font: 700 18px/1 Arial, Helvetica, sans-serif !important;
  transform: none !important;
}

.ht-hero-slider__slide.is-active .ht-hero__button:hover, .ht-hero-slider__slide.is-active .ht-hero__button:focus-visible {
  transform: rotate(-10deg) translateY(-2px) !important;
}

.ht-hero-slider.ht-hero-content-position-locked .ht-hero__content {
  top: var(--ht-hero-content-top) !important;
  transform: none !important;
}

@media (min-width: 768px) {
  .ht-hero__title-line {
    display: block;
    width: max-content;
    max-width: none;
    white-space: nowrap;
  }

  .ht-hero__eyebrow {
    box-shadow: 0 4px 10px rgba(0, 0, 0, .14);
    line-height: 1;
    transform-origin: left bottom;
    font-size: clamp(10px, .72vw, 13px);
    padding: 7px 11px 6px;
    margin-left: 0;
    margin-bottom: 11px;
    transform: none;
  }

  .ht-hero__title-line:first-child {
    transform: none;
  }

  .ht-hero__title-line.is-accent {
    transform: translateX(7px) translateY(2px);
  }

  .ht-hero__title {
    transform-origin: left top;
    font-size: clamp(33px, 2.5vw, 48px);
    line-height: .91;
    letter-spacing: -.02em;
    transform: none;
    position: relative;
    padding-bottom: 18px;
  }

  .ht-hero__title::after {
    content: "";
    display: block;
    width: 185px;
    height: 12px;
    margin-top: 10px;
    margin-left: 8px;
    background: linear-gradient(
                  168deg,
                  transparent 0 36%,
                  #ffd317 38% 51%,
                  transparent 53% 100%
              ),
              linear-gradient(
                  174deg,
                  transparent 0 44%,
                  #ffd317 46% 59%,
                  transparent 61% 100%
              );
    transform: skewX(-10deg) rotate(1deg);
    transform-origin: left center;
    pointer-events: none;
  }


  .ht-hero__text {
    transform-origin: left top;
    margin-left: 6px;
    font-size: clamp(13px, .92vw, 16px);
    line-height: 1.42;
    transform: none;
    margin-top: 14px !important;
  }

  .ht-hero__button {
    margin-top: 18px !important;
  }

  .ht-hero__content {
    left: calc(clamp(92px, calc(6.6vw + 50px), 175px) + 100px) !important;
    bottom: auto !important;
    width: min(575px, 42vw) !important;
    top: 60% !important;
    transform: translateY(-50%) !important;
    transform-origin: left center !important;
  }

  .ht-hero__copy {
    transform: rotate(-17deg) !important;
    transform-origin: left center !important;
  }

  .ht-hero-slider__slide .ht-hero__button, .ht-hero-slider__slide.is-active .ht-hero__button {
    width: auto !important;
    min-width: 0 !important;
    min-height: 48px !important;
    margin-left: 68px !important;
    padding: 10px 20px !important;
    gap: 10px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    position: relative !important;
    top: -20px !important;
    transform: rotate(-17deg) scale(.86) !important;
    transform-origin: left center !important;
    transition: background-color .18s ease, box-shadow .18s ease !important;
  }

  .ht-hero-slider__slide .ht-hero__button-arrow, .ht-hero-slider__slide.is-active .ht-hero__button-arrow {
    font-size: 17px !important;
  }

  .ht-hero-slider__slide .ht-hero__button:hover, .ht-hero-slider__slide .ht-hero__button:focus-visible, .ht-hero-slider__slide.is-active .ht-hero__button:hover, .ht-hero-slider__slide.is-active .ht-hero__button:focus-visible {
    transform: rotate(-17deg) scale(.86) !important;
  }
}

.ht-hero-selector__icon.is-coral, .ht-hero-selector__icon.is-turquoise {
  position: relative !important;
  display: block !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

.ht-hero-selector__icon.is-coral::before, .ht-hero-selector__icon.is-turquoise::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  margin-left: -6px;
  margin-top: -5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 9px 0 0 currentColor;
}

.ht-hero-selector__icon.is-coral::after, .ht-hero-selector__icon.is-turquoise::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 7px;
  transform: translate(-50%, -1px);
  border: 0;
  border-bottom: 2px solid currentColor;
  border-radius: 0 0 13px 13px;
  box-sizing: border-box;
}

@media (max-width: 999px) {
  body.home #offcanvas .mobile-menu a,
  body.home .ct-panel-content .mobile-menu a,
  body.home #offcanvas [data-id="menu"] a,
  body.home .ct-panel-content [data-id="menu"] a,
  body.home #offcanvas .mobile-menu button,
  body.home .ct-panel-content .mobile-menu button,
  body.home #offcanvas .mobile-menu .ct-toggle-dropdown-desktop,
  body.home .ct-panel-content .mobile-menu .ct-toggle-dropdown-desktop,
  body.home #offcanvas .mobile-menu .ct-sub-menu-parent,
  body.home .ct-panel-content .mobile-menu .ct-sub-menu-parent {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  body.home #offcanvas ul.mobile-menu > li:first-child > a, body.home .ct-panel-content ul.mobile-menu > li:first-child > a, body.home #offcanvas .mobile-menu > ul > li:first-child > a, body.home .ct-panel-content .mobile-menu > ul > li:first-child > a {
    color: #ff5964 !important;
    -webkit-text-fill-color: #ff5964 !important;
  }
}


/* =========================================================
   11 – BEDIENUNG / SCROLL-TO-TOP / ACCESSIBILITY
   ========================================================= */
.ht-scroll-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #13aeb5;
  color: #ffffff;
  font: inherit;
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(11, 31, 53, .22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity .22s ease, transform .22s ease, background-color .2s ease, visibility .22s ease;
}

.ht-scroll-top span {
  display: block;
  line-height: 1;
  transform: translateY(-1px);
}

.ht-scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.ht-scroll-top:hover, .ht-scroll-top:focus-visible {
  background: #0b9198;
  color: #ffffff;
}

.ht-scroll-top:focus-visible {
  outline: 3px solid #ffdf55;
  outline-offset: 3px;
}

@media (max-width: 700px) {
  .ht-faq-strip {
    padding: 34px 20px 46px;
  }

  .ht-faq-strip__head {
    align-items: flex-start;
    margin-bottom: 26px;
  }

  .ht-faq-strip__title::after {
    left: 0;
    transform: rotate(-4deg);
  }

  .ht-faq-strip__all {
    font-size: 10px;
    gap: 8px;
  }

  .ht-faq-strip__grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .ht-faq-strip__item {
    border-bottom: 1px solid #ededed;
  }

  .ht-faq-strip__summary {
    grid-template-columns: 48px minmax(0, 1fr) 26px;
    min-height: 68px;
  }

  .ht-faq-strip__number {
    width: 46px;
    height: 46px;
    font-size: 18px;
  }

  .ht-faq-strip__question {
    font-size: 14px;
  }

  .ht-faq-strip__answer {
    margin-left: 62px;
    padding: 0 12px 16px 0;
  }

  .ht-scroll-top {
    right: 16px;
    bottom: 16px;
    width: 46px;
    height: 46px;
    font-size: 25px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ht-hero-slider__slide {
    transition: none !important;
  }

  .ht-scroll-top {
    transition: none;
  }
}


/* =========================================================
   12 – RESPONSIVE-MATRIX / TABLET / MOBIL / ORIENTIERUNG
   ========================================================= */

/* Tablet / kompakte Desktopbreiten */
@media (min-width: 821px) and (max-width: 1100px) {
  .ht-topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    min-height: 46px;
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  .ht-topbar__item, .ht-topbar__left, .ht-topbar__center, .ht-topbar__right {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    width: auto !important;
    flex: 0 1 auto !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }

  .ht-topbar__left {
    justify-content: flex-start !important;
  }

  .ht-topbar__center {
    justify-content: center !important;
    text-align: center !important;
  }

  .ht-topbar__right {
    justify-content: flex-end !important;
    text-align: right !important;
  }

  .ht-topbar__link {
    gap: 5px !important;
    white-space: nowrap !important;
  }

  .ht-topbar__icon {
    font-size: 11px !important;
  }
}

@media (min-width: 601px) and (max-width: 1199px) {
  [data-id="html"] .ct-header-html, .ct-header-html {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  [data-id="html"] .ht-topbar, .ct-header-html .ht-topbar, .ht-topbar {
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr) max-content !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    justify-items: stretch !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 46px !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 10px !important;
    font-size: 10.5px !important;
    line-height: 1.15 !important;
  }

  .ht-topbar > .ht-topbar__item, .ht-topbar > .ht-topbar__left, .ht-topbar > .ht-topbar__center, .ht-topbar > .ht-topbar__right {
    display: flex !important;
    position: static !important;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }

  .ht-topbar > .ht-topbar__left {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  .ht-topbar > .ht-topbar__center {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
    overflow: hidden !important;
  }

  .ht-topbar > .ht-topbar__right {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-content: flex-end !important;
    text-align: right !important;
  }

  .ht-topbar .ht-topbar__link {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    gap: 4px !important;
    font-size: inherit !important;
  }

  .ht-topbar .ht-topbar__icon {
    flex: 0 0 auto !important;
    font-size: 10.5px !important;
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  [data-id="html"] .ht-topbar, .ct-header-html .ht-topbar, .ht-topbar {
    gap: 7px !important;
    font-size: 9.5px !important;
  }

  .ht-topbar .ht-topbar__icon {
    font-size: 9.5px !important;
  }
}

@media (min-width: 1000px) {
  header [data-id="menu"] .sub-menu, header .menu > .menu-item > .sub-menu {
    min-width: 230px !important;
    padding: 8px 0 !important;
    background: #232d3b !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0 0 12px 12px !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22) !important;
    overflow: hidden !important;
  }

  header [data-id="menu"] .sub-menu > li, header .menu > .menu-item > .sub-menu > li {
    margin: 0 !important;
    border: 0 !important;
  }

  header [data-id="menu"] .sub-menu > li + li, header .menu > .menu-item > .sub-menu > li + li {
    border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
  }

  header [data-id="menu"] .sub-menu a, header .menu > .menu-item > .sub-menu a {
    min-height: 48px !important;
    padding: 14px 20px !important;
    display: flex !important;
    align-items: center !important;
    color: #ffffff !important;
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    opacity: 1 !important;
    text-decoration: none !important;
    transition: background-color .18s ease, color .18s ease, padding-left .18s ease !important;
  }

  header [data-id="menu"] .sub-menu a:hover, header [data-id="menu"] .sub-menu a:focus-visible, header .menu > .menu-item > .sub-menu a:hover, header .menu > .menu-item > .sub-menu a:focus-visible {
    color: #ffffff !important;
    background: rgba(255, 89, 100, 0.18) !important;
    padding-left: 24px !important;
  }

  header [data-id="menu"] .sub-menu .current-menu-item > a, header [data-id="menu"] .sub-menu .current-menu-ancestor > a, header .menu > .menu-item > .sub-menu .current-menu-item > a, header .menu > .menu-item > .sub-menu .current-menu-ancestor > a {
    color: #ff5964 !important;
    background: rgba(255, 255, 255, 0.07) !important;
    font-weight: 700 !important;
  }

  header [data-id="menu"] .menu > .menu-item > .sub-menu, header .menu > .menu-item > .sub-menu {
    overflow: visible !important;
  }

  header [data-id="menu"] .menu > .menu-item > .sub-menu > li:last-child > a, header .menu > .menu-item > .sub-menu > li:last-child > a {
    border-radius: 0 0 11px 11px !important;
  }

  header [data-id="menu"] .sub-menu .menu-item-has-children, header .menu .sub-menu .menu-item-has-children {
    position: relative !important;
  }

  header [data-id="menu"] .sub-menu li:hover > .sub-menu, header [data-id="menu"] .sub-menu li:focus-within > .sub-menu, header .menu > .menu-item > .sub-menu li:hover > .sub-menu, header .menu > .menu-item > .sub-menu li:focus-within > .sub-menu {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
  }

  body.home header [data-id="menu"] .menu > .menu-item:not(.current-menu-item) > a, body.home header .menu > .menu-item:not(.current-menu-item) > a {
    color: var(--theme-link-initial-color, #0b1f35) !important;
  }

  body.home header [data-id="menu"] .menu > .menu-item:not(.current-menu-item) > a:hover, body.home header [data-id="menu"] .menu > .menu-item:not(.current-menu-item) > a:focus-visible, body.home header .menu > .menu-item:not(.current-menu-item) > a:hover, body.home header .menu > .menu-item:not(.current-menu-item) > a:focus-visible {
    color: #ff5964 !important;
  }

  header [data-id="menu"] .sub-menu .sub-menu > li > a, header .menu > .menu-item > .sub-menu .sub-menu > li > a, header [data-id="menu"] .sub-menu .sub-menu > li > a:hover, header [data-id="menu"] .sub-menu .sub-menu > li > a:focus-visible, header .menu > .menu-item > .sub-menu .sub-menu > li > a:hover, header .menu > .menu-item > .sub-menu .sub-menu > li > a:focus-visible {
    padding-left: 20px !important;
    padding-right: 20px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
  }

  body.home header [data-id="menu"] .menu > .menu-item > a, body.home header .menu > .menu-item > a {
    color: var(--theme-link-initial-color, #0b1f35) !important;
  }

  body.home header [data-id="menu"] .menu > .menu-item:first-child > a,
  body.home header .menu > .menu-item:first-child > a,
  body.home header [data-id="menu"] .menu > .menu-item:not(:first-child) > a:hover,
  body.home header [data-id="menu"] .menu > .menu-item:not(:first-child) > a:focus-visible,
  body.home header .menu > .menu-item:not(:first-child) > a:hover,
  body.home header .menu > .menu-item:not(:first-child) > a:focus-visible {
    color: #ff5964 !important;
  }

  header [data-id="menu"] .sub-menu .sub-menu, header .menu > .menu-item > .sub-menu .sub-menu {
    position: absolute !important;
    top: -9px !important;
    left: 100% !important;
    right: auto !important;
    margin: 0 !important;
    z-index: 99999 !important;
    overflow: visible !important;
    border-radius: 0 12px 12px 12px !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(8px) !important;
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease !important;
    min-width: 330px !important;
    width: 330px !important;
  }
}

/* Smartphone / kleine Viewports */
@media (max-width: 767px) {
  .ht-hero__media {
    height: 390px;
  }

  .ht-hero__image {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transform: none;
    object-fit: cover;
    object-position: center 46%;
  }

  .ht-hero__curve {
    height: 48px;
  }

  .ht-hero__shade {
    background: linear-gradient(
                  180deg,
                  rgba(7, 20, 34, .08) 0%,
                  rgba(7, 20, 34, .28) 42%,
                  rgba(7, 20, 34, .82) 100%
              );
  }

  .ht-hero__title-line {
    width: max-content;
    max-width: 100%;
    white-space: nowrap;
  }

  .ht-hero__title-line.is-accent {
    transform: translateX(5px) translateY(2px);
  }

  .ht-hero__eyebrow {
    margin-left: 1px;
    margin-bottom: 9px;
    font-size: 10px;
    padding: 6px 9px 5px;
    transform: rotate(-4deg);
    transform-origin: left bottom;
  }

  .ht-hero__eyebrow, .ht-hero__title {
    transform: rotate(-3deg);
  }

  .ht-hero__title {
    font-size: clamp(26px, 7.7vw, 34px);
    line-height: .92;
    transform: rotate(-4deg);
    transform-origin: left top;
    position: relative;
    padding-bottom: 12px;
  }

  .ht-hero__title::after {
    content: "";
    display: block;
    width: 120px;
    height: 9px;
    margin-top: 7px;
    margin-left: 4px;
    background: linear-gradient(
                  168deg,
                  transparent 0 36%,
                  #ffd317 38% 51%,
                  transparent 53% 100%
              ),
              linear-gradient(
                  174deg,
                  transparent 0 44%,
                  #ffd317 46% 59%,
                  transparent 61% 100%
              );
    transform: skewX(-8deg);
    transform-origin: left center;
  }

  .ht-hero__text {
    max-width: 320px;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.4;
  }

  .ht-hero__button {
    min-height: 42px;
    margin-top: 14px;
    padding: 0 17px;
    border-radius: 10px;
    font-size: 11px;
  }

  .ht-hero__eyebrow, .ht-hero__title, .ht-hero__text, .ht-hero__button {
    transform: none !important;
  }

  .ht-hero__content {
    width: auto;
    left: 20px !important;
    right: 20px !important;
    top: auto !important;
    /* Mobile Hero: Text + CTA bewusst oberhalb der Slider-Punkte halten. */
    bottom: 64px !important;
    transform: none !important;
    z-index: 30 !important;
  }

  .ht-hero__button-arrow {
    font-size: 18px !important;
  }

  .ht-hero__content .ht-hero__button-arrow {
    font-size: 14px !important;
  }

  .ht-hero__copy {
    transform: none !important;
  }

  .ht-hero__content .ht-hero__button {
    width: fit-content !important;
    gap: 8px !important;
    border-radius: 11px !important;
    font-family: Roboto, Arial, Helvetica, sans-serif !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    min-height: 54px !important;
    max-width: calc(100vw - 32px) !important;
    margin-top: 15px !important;
    padding: 13px 22px !important;
    font-size: 14px !important;
    transform: none !important;
  }

  .ht-hero__content .ht-hero__button:hover, .ht-hero__content .ht-hero__button:focus-visible {
    transform: none !important;
  }

  .ht-hero-slider__slide.is-active .ht-hero__content {
    z-index: 100 !important;
    pointer-events: auto !important;
  }

  .ht-hero-slider__slide.is-active .ht-hero__button {
    z-index: 1000 !important;
    min-height: 54px !important;
    max-width: calc(100vw - 32px) !important;
    padding: 13px 23px !important;
    font-size: 14px !important;
    transform: rotate(-8deg) !important;
    pointer-events: auto !important;
  }

  .ht-hero-slider__slide.is-active .ht-hero__button:hover, .ht-hero-slider__slide.is-active .ht-hero__button:focus-visible {
    transform: rotate(-8deg) !important;
  }

  .ht-hero-slider__slide .ht-hero__button, .ht-hero-slider__slide.is-active .ht-hero__button {
    min-height: 48px !important;
    padding: 10px 18px !important;
    gap: 9px !important;
    font-size: 13px !important;
    transform: rotate(-4deg) scale(.98) !important;
    transform-origin: left center !important;
    transition: background-color .18s ease, box-shadow .18s ease !important;
  }

  .ht-hero-slider__slide .ht-hero__button:hover, .ht-hero-slider__slide .ht-hero__button:focus-visible, .ht-hero-slider__slide.is-active .ht-hero__button:hover, .ht-hero-slider__slide.is-active .ht-hero__button:focus-visible {
    transform: rotate(-4deg) scale(.98) !important;
  }

  .ht-hero-slider .ht-hero-slider__slide .ht-hero__button > span:first-child, .ht-hero-slider .ht-hero-slider__slide.is-active .ht-hero__button > span:first-child {
    font: inherit !important;
    line-height: 1.2 !important;
    transform: none !important;
  }

  .ht-hero-slider.has-slider-nav .ht-hero__content, .ht-hero-slider.has-slider-nav.ht-hero-content-position-locked .ht-hero__content, .ht-hero-slider.has-slider-nav .ht-hero-slider__slide .ht-hero__content, .ht-hero-slider.has-slider-nav .ht-hero-slider__slide.is-active .ht-hero__content {
    left: 58px !important;
    right: 50px !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  .ht-hero-slider.has-slider-nav .ht-hero__title {
    max-width: 100% !important;
    font-size: clamp(28px, 8.2vw, 34px) !important;
  }

  .ht-hero-slider.has-slider-nav .ht-hero__text,
  .ht-hero-slider.has-slider-nav .ht-hero__button,
  .ht-hero-slider.has-slider-nav .ht-hero-slider__slide .ht-hero__button,
  .ht-hero-slider.has-slider-nav .ht-hero-slider__slide.is-active .ht-hero__button {
    max-width: 100% !important;
  }

  .ht-hero-slider .ht-hero-slider__slide .ht-hero__title, .ht-hero-slider .ht-hero-slider__slide.is-active .ht-hero__title {
    position: relative !important;
    left: -3px !important;
  }

  .ht-hero-slider .ht-hero-slider__slide .ht-hero__button, .ht-hero-slider .ht-hero-slider__slide.is-active .ht-hero__button, .ht-hero-slider .ht-hero-slider__slide .ht-hero__button:hover, .ht-hero-slider .ht-hero-slider__slide .ht-hero__button:focus, .ht-hero-slider .ht-hero-slider__slide .ht-hero__button:focus-visible, .ht-hero-slider .ht-hero-slider__slide .ht-hero__button:active, .ht-hero-slider .ht-hero-slider__slide.is-active .ht-hero__button:hover, .ht-hero-slider .ht-hero-slider__slide.is-active .ht-hero__button:focus, .ht-hero-slider .ht-hero-slider__slide.is-active .ht-hero__button:focus-visible, .ht-hero-slider .ht-hero-slider__slide.is-active .ht-hero__button:active {
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100vw - 32px) !important;
    height: auto !important;
    box-sizing: border-box !important;
    line-height: 1.2 !important;
    transition: background-color .18s ease, box-shadow .18s ease !important;
    animation: none !important;
    margin-left: 0 !important;
    min-height: 36px !important;
    padding: 6px 11px !important;
    gap: 5px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
    transform: none !important;
    transform-origin: center center !important;
  }

  .ht-hero-slider .ht-hero-slider__slide .ht-hero__button-arrow, .ht-hero-slider .ht-hero-slider__slide.is-active .ht-hero__button-arrow {
    line-height: 1 !important;
    transform: none !important;
    font-size: 13px !important;
  }
}

/* Tablet Hochformat */
@media (min-width: 768px) and (max-width: 900px) and (orientation: portrait) {
  #header [data-row="middle"], #header [data-row="middle"] > div, #header [data-row="middle"] .ct-container, #header [data-row="middle"] .ct-container-fluid {
    min-height: 150px !important;
    height: 150px !important;
  }

  #header [data-id="logo"] img, #header .site-logo-container img, #header .custom-logo {
    max-height: 105px !important;
    width: auto !important;
  }

  .ht-hero__media {
    height: 520px !important;
  }

  .ht-hero-slider.has-slider-nav .ht-hero__content, .ht-hero-slider.has-slider-nav .ht-hero-slider__slide.is-active .ht-hero__content {
    left: 74px !important;
    right: 74px !important;
    top: 55% !important;
    width: auto !important;
    max-width: 620px !important;
    transform: translateY(-50%) rotate(-3deg) !important;
    transform-origin: left center !important;
  }

  .ht-hero__eyebrow {
    font-size: 11px !important;
    margin-bottom: 9px !important;
  }

  .ht-hero__title {
    font-size: 42px !important;
    line-height: .91 !important;
  }

  .ht-hero__text {
    max-width: 610px !important;
    margin-top: 12px !important;
    margin-left: 4px !important;
    font-size: 15px !important;
    line-height: 1.38 !important;
  }

  .ht-hero__button {
    min-height: 42px !important;
    margin-top: 15px !important;
    padding: 0 18px !important;
    gap: 10px !important;
    transform: none !important;
  }

  #header [data-row="top"], .ct-header [data-row="top"] {
    --height: 42px !important;
  }

  #header [data-row="top"] .ct-container, #header [data-row="top"] .ct-container-fluid, .ct-header [data-row="top"] .ct-container, .ct-header [data-row="top"] .ct-container-fluid {
    min-height: 42px !important;
    height: 42px !important;
  }

  [data-id="html"] .ht-topbar, .ct-header-html .ht-topbar, .ht-topbar {
    min-height: 42px !important;
    height: 42px !important;
    grid-template-columns: max-content minmax(0, 1fr) max-content !important;
    gap: 8px !important;
    font-size: 9.5px !important;
    line-height: 1.05 !important;
  }

  .ht-topbar__center, .ht-topbar__center strong, .ht-topbar__link {
    white-space: nowrap !important;
  }

  #header [data-row="middle"], .ct-header [data-row="middle"] {
    --height: 125px !important;
    min-height: 125px !important;
    height: 125px !important;
  }

  #header [data-row="middle"] > div, #header [data-row="middle"] .ct-container, #header [data-row="middle"] .ct-container-fluid, .ct-header [data-row="middle"] > div, .ct-header [data-row="middle"] .ct-container, .ct-header [data-row="middle"] .ct-container-fluid {
    min-height: 125px !important;
    height: 125px !important;
    max-height: 125px !important;
  }

  #header [data-id="logo"] img, #header .site-logo-container img, #header .custom-logo, .ct-header [data-id="logo"] img, .ct-header .site-logo-container img, .ct-header .custom-logo {
    max-height: 88px !important;
    width: auto !important;
  }

  .ht-hero-slider .ht-hero__content, .ht-hero-slider .ht-hero-slider__slide .ht-hero__content, .ht-hero-slider .ht-hero-slider__slide.is-active .ht-hero__content {
    left: 72px !important;
    right: 72px !important;
    top: 55% !important;
    width: auto !important;
    max-width: 624px !important;
    transform: translateY(-50%) !important;
  }


  .ht-hero-slider .ht-hero__button, .ht-hero-slider .ht-hero-slider__slide .ht-hero__button, .ht-hero-slider .ht-hero-slider__slide.is-active .ht-hero__button, .ht-hero-slider .ht-hero__button:hover, .ht-hero-slider .ht-hero__button:focus-visible {
    margin-left: 20px !important;
    top: 0 !important;
    transform: none !important;
  }
}

/* Tablet / kompakter Desktop Querformat */
@media (min-width: 901px) and (max-width: 1100px) and (orientation: landscape) {
  #header [data-row="middle"], #header [data-row="middle"] > div, #header [data-row="middle"] .ct-container, #header [data-row="middle"] .ct-container-fluid {
    min-height: 125px !important;
    height: 125px !important;
  }

  #header [data-id="logo"] img, #header .site-logo-container img, #header .custom-logo {
    max-height: 88px !important;
    width: auto !important;
  }

  .ht-hero__curve {
    height: 88px !important;
  }

  .ht-hero-slider.has-slider-nav .ht-hero__content, .ht-hero-slider.has-slider-nav .ht-hero-slider__slide.is-active .ht-hero__content {
    left: 92px !important;
    right: 92px !important;
    top: 55% !important;
    width: auto !important;
    max-width: 650px !important;
    transform: translateY(-50%) rotate(-2.5deg) !important;
    transform-origin: left center !important;
  }

  .ht-hero__eyebrow {
    font-size: 11px !important;
    padding: 7px 11px 6px !important;
    margin-bottom: 9px !important;
  }

  .ht-hero__title {
    font-size: 44px !important;
    line-height: .91 !important;
  }

  .ht-hero__title-line.is-accent {
    transform: translateX(7px) translateY(2px) !important;
  }

  .ht-hero__title::after {
    width: 155px !important;
    margin-top: 8px !important;
  }

  .ht-hero__text {
    max-width: 600px !important;
    margin-top: 10px !important;
    margin-left: 4px !important;
    font-size: 15px !important;
    line-height: 1.38 !important;
    transform: none !important;
  }

  .ht-hero__button, .ht-hero__button:hover, .ht-hero__button:focus-visible {
    min-height: 42px !important;
    margin-top: 14px !important;
    padding: 0 18px !important;
    gap: 10px !important;
    font-size: 12px !important;
    transform: none !important;
  }

  #header [data-row="top"], .ct-header [data-row="top"] {
    --height: 40px !important;
  }

  #header [data-row="top"] .ct-container, #header [data-row="top"] .ct-container-fluid, .ct-header [data-row="top"] .ct-container, .ct-header [data-row="top"] .ct-container-fluid {
    min-height: 40px !important;
    height: 40px !important;
  }

  [data-id="html"] .ht-topbar, .ct-header-html .ht-topbar, .ht-topbar {
    min-height: 40px !important;
    height: 40px !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }

  #header [data-row="middle"], .ct-header [data-row="middle"] {
    --height: 105px !important;
    min-height: 105px !important;
    height: 105px !important;
  }

  #header [data-row="middle"] > div, #header [data-row="middle"] .ct-container, #header [data-row="middle"] .ct-container-fluid, .ct-header [data-row="middle"] > div, .ct-header [data-row="middle"] .ct-container, .ct-header [data-row="middle"] .ct-container-fluid {
    min-height: 105px !important;
    height: 105px !important;
    max-height: 105px !important;
  }

  #header [data-id="logo"] img, #header .site-logo-container img, #header .custom-logo, .ct-header [data-id="logo"] img, .ct-header .site-logo-container img, .ct-header .custom-logo {
    max-height: 72px !important;
    width: auto !important;
  }

  .ht-hero__media {
    height: 500px !important;
  }

  .ht-hero-slider .ht-hero__content, .ht-hero-slider .ht-hero-slider__slide .ht-hero__content, .ht-hero-slider .ht-hero-slider__slide.is-active .ht-hero__content {
    left: 105px !important;
    right: 105px !important;
    top: 56% !important;
    width: auto !important;
    max-width: 690px !important;
    transform: translateY(-50%) !important;
  }

  .ht-hero-slider .ht-hero__copy, .ht-hero-slider .ht-hero-slider__slide .ht-hero__copy, .ht-hero-slider .ht-hero-slider__slide.is-active .ht-hero__copy {
    transform: rotate(-4deg) !important;
    transform-origin: left center !important;
  }

  .ht-hero-slider .ht-hero__title {
    font-size: 46px !important;
    line-height: .91 !important;
  }

  .ht-hero-slider .ht-hero__text {
    max-width: 630px !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  .ht-hero-slider .ht-hero__button, .ht-hero-slider .ht-hero-slider__slide .ht-hero__button, .ht-hero-slider .ht-hero-slider__slide.is-active .ht-hero__button, .ht-hero-slider .ht-hero__button:hover, .ht-hero-slider .ht-hero__button:focus-visible {
    margin-left: 24px !important;
    top: 0 !important;
    min-height: 42px !important;
    padding: 9px 17px !important;
    font-size: 12px !important;
    transform: none !important;
  }
}

@media (max-width: 1100px) and (orientation: landscape) {
  body #header [data-row="top"], body .ct-header [data-row="top"] {
    --height: 36px !important;
    min-height: 36px !important;
    height: 36px !important;
  }

  body #header [data-row="top"] .ct-container, body #header [data-row="top"] .ct-container-fluid, body .ct-header [data-row="top"] .ct-container, body .ct-header [data-row="top"] .ct-container-fluid {
    min-height: 36px !important;
    height: 36px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  body .ht-topbar {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }

  body #header [data-row="middle"], body .ct-header [data-row="middle"] {
    --height: 88px !important;
    min-height: 88px !important;
    height: 88px !important;
    max-height: 88px !important;
  }

  body #header [data-row="middle"] > div, body #header [data-row="middle"] .ct-container, body #header [data-row="middle"] .ct-container-fluid, body .ct-header [data-row="middle"] > div, body .ct-header [data-row="middle"] .ct-container, body .ct-header [data-row="middle"] .ct-container-fluid {
    min-height: 88px !important;
    height: 88px !important;
    max-height: 88px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  body #header [data-id="logo"] img, body #header .site-logo-container img, body #header .custom-logo, body .ct-header [data-id="logo"] img, body .ct-header .site-logo-container img, body .ct-header .custom-logo {
    max-height: 62px !important;
    width: auto !important;
  }

  body .ht-hero__media, body .ht-hero-slider .ht-hero__media {
    height: min(430px, 75svh) !important;
    min-height: 300px !important;
  }

  body .ht-hero__curve {
    height: clamp(65px, 9vw, 100px) !important;
  }

  body .ht-hero-slider .ht-hero__content, body .ht-hero-slider .ht-hero-slider__slide .ht-hero__content, body .ht-hero-slider .ht-hero-slider__slide.is-active .ht-hero__content {
    left: 9.5% !important;
    right: 9.5% !important;
    top: 55% !important;
    width: auto !important;
    max-width: 680px !important;
    transform: translateY(-50%) !important;
  }

  body .ht-hero-slider .ht-hero__copy, body .ht-hero-slider .ht-hero-slider__slide .ht-hero__copy, body .ht-hero-slider .ht-hero-slider__slide.is-active .ht-hero__copy {
    transform: rotate(-3deg) !important;
    transform-origin: left center !important;
  }

  body .ht-hero-slider .ht-hero__title {
    font-size: clamp(30px, 4.2vw, 43px) !important;
    line-height: .92 !important;
  }

  body .ht-hero-slider .ht-hero__text {
    max-width: 590px !important;
    font-size: clamp(12px, 1.5vw, 15px) !important;
    line-height: 1.3 !important;
  }

  body .ht-hero-slider .ht-hero__button, body .ht-hero-slider .ht-hero-slider__slide .ht-hero__button, body .ht-hero-slider .ht-hero-slider__slide.is-active .ht-hero__button {
    min-height: 38px !important;
    padding: 7px 14px !important;
    font-size: 11px !important;
    margin-left: 18px !important;
    transform: none !important;
  }
}

@media (min-width: 700px) and (max-width: 1100px) {
  body .ht-topbar, body [data-id="html"] .ht-topbar, body .ct-header-html .ht-topbar {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    gap: 8px !important;
    font-size: 9.5px !important;
    line-height: 1 !important;
  }

  body .ht-topbar > .ht-topbar__left, body .ht-topbar > .ht-topbar__right {
    position: relative !important;
    z-index: 2 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    white-space: nowrap !important;
  }

  body .ht-topbar > .ht-topbar__center {
    position: absolute !important;
    z-index: 1 !important;
    left: 50% !important;
    top: 50% !important;
    width: max-content !important;
    max-width: 42% !important;
    transform: translate(-50%, -50%) !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  body #header [data-row="top"], body .ct-header [data-row="top"], body #header [data-row="top"] .ct-container, body #header [data-row="top"] .ct-container-fluid, body .ct-header [data-row="top"] .ct-container, body .ct-header [data-row="top"] .ct-container-fluid {
    --height: 34px !important;
    min-height: 34px !important;
    height: 34px !important;
    max-height: 34px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

@media (min-width: 700px) and (max-width: 1100px) and (orientation: landscape) {
  body #header [data-row="middle"], body .ct-header [data-row="middle"], body #header [data-row="middle"] > div, body #header [data-row="middle"] .ct-container, body #header [data-row="middle"] .ct-container-fluid, body .ct-header [data-row="middle"] > div, body .ct-header [data-row="middle"] .ct-container, body .ct-header [data-row="middle"] .ct-container-fluid {
    --height: 72px !important;
    min-height: 72px !important;
    height: 72px !important;
    max-height: 72px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  body #header [data-id="logo"] img, body #header .site-logo-container img, body #header .custom-logo, body .ct-header [data-id="logo"] img, body .ct-header .site-logo-container img, body .ct-header .custom-logo {
    max-height: 54px !important;
    width: auto !important;
  }

  body .ht-hero__media, body .ht-hero-slider .ht-hero__media {
    height: 340px !important;
    min-height: 0 !important;
    max-height: 340px !important;
  }

  body .ht-hero__curve {
    height: 58px !important;
  }

  body .ht-hero-slider .ht-hero__media, body .ht-hero .ht-hero__media {
    height: 360px !important;
    min-height: 360px !important;
    max-height: 360px !important;
  }

  body .ht-hero-slider .ht-hero__image, body .ht-hero .ht-hero__image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  body .ht-hero-slider .ht-hero__curve, body .ht-hero .ht-hero__curve {
    height: 54px !important;
  }

  body .ht-hero-slider .ht-hero__eyebrow {
    display: inline-flex !important;
    margin: 0 0 8px 0 !important;
    padding: 5px 10px !important;
    font-size: 9px !important;
    line-height: 1.05 !important;
    transform: none !important;
  }

  body .ht-hero-slider .ht-hero__title {
    margin: 0 !important;
    padding: 0 0 9px !important;
    font-size: 36px !important;
    line-height: .91 !important;
    letter-spacing: -.7px !important;
    transform: none !important;
  }

  body .ht-hero-slider .ht-hero__title-line, body .ht-hero-slider .ht-hero__title-line:first-child {
    display: block !important;
    margin-left: 0 !important;
    transform: none !important;
  }

  body .ht-hero-slider .ht-hero__title-line.is-accent {
    margin-left: 12px !important;
    transform: none !important;
  }

  body .ht-hero-slider .ht-hero__title::after {
    width: 145px !important;
    height: 8px !important;
    margin: 5px 0 0 42px !important;
    transform: rotate(-4deg) !important;
  }

  body .ht-hero-slider .ht-hero__text p {
    margin: 0 !important;
  }

  body .ht-hero-slider__arrow {
    top: 53% !important;
  }

  body .ht-hero-slider .ht-hero__content, body .ht-hero-slider .ht-hero-slider__slide .ht-hero__content, body .ht-hero-slider .ht-hero-slider__slide.is-active .ht-hero__content {
    left: 9% !important;
    right: auto !important;
    top: 51% !important;
    width: 600px !important;
    max-width: calc(100% - 18%) !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  body .ht-hero-slider .ht-hero__copy, body .ht-hero-slider .ht-hero-slider__slide .ht-hero__copy, body .ht-hero-slider .ht-hero-slider__slide.is-active .ht-hero__copy {
    transform: none !important;
    transform-origin: left center !important;
    display: block !important;
    width: 100% !important;
  }

  body .ht-hero-slider .ht-hero__text {
    width: 500px !important;
    max-width: 82% !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    transform: none !important;
    position: relative !important;
    display: block !important;
    margin: 10px 0 0 14px !important;
  }

  body .ht-hero-slider .ht-hero__button, body .ht-hero-slider .ht-hero-slider__slide .ht-hero__button, body .ht-hero-slider .ht-hero-slider__slide.is-active .ht-hero__button {
    min-height: 38px !important;
    padding: 8px 14px !important;
    gap: 8px !important;
    border-radius: 9px !important;
    font-size: 11px !important;
    transform: none !important;
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    margin: 16px 0 0 14px !important;
  }

  body .ht-hero-slider__dots {
    bottom: 30px !important;
  }
}

@media (max-width: 1100px) {
  .ht-hero {
    padding-bottom: 0;
  }

  .ht-hero-selector-wrap {
    position: relative;
    left: auto;
    bottom: auto;
    width: calc(100% - 32px);
    margin: -28px auto 24px;
    transform: none;
  }

  .ht-hero-selector {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ht-hero-selector__intro, .ht-hero-selector__all {
    min-height: 86px;
  }

  .ht-hero-selector__intro::after, .ht-hero-selector__item::after {
    display: none;
  }

  .ht-process__steps {
    gap: 36px;
  }

  .ht-process__step {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
  }

  .ht-process__visual {
    width: 96px;
    transform: scale(.9);
    transform-origin: left center;
  }

  .ht-process__arrow {
    right: -30px;
    font-size: 28px;
  }

  body #header [data-id="logo"] img, body #header .site-logo-container img, body #header .custom-logo, body .ct-header [data-id="logo"] img, body .ct-header .site-logo-container img, body .ct-header .custom-logo {
    transform: scale(1.5) !important;
    transform-origin: left center !important;
  }
}

/* Smartphone Querformat */
@media (max-width: 699px) and (orientation: landscape) {
  body .ht-hero-slider .ht-hero__media, body .ht-hero .ht-hero__media, body .ht-hero__media {
    height: 255px !important;
    min-height: 255px !important;
    max-height: 255px !important;
  }

  body .ht-hero-slider .ht-hero__curve, body .ht-hero .ht-hero__curve, body .ht-hero__curve {
    height: 42px !important;
  }

  body .ht-hero-slider .ht-hero__content, body .ht-hero-slider .ht-hero-slider__slide .ht-hero__content, body .ht-hero-slider .ht-hero-slider__slide.is-active .ht-hero__content {
    top: 51% !important;
    bottom: auto !important;
  }

  body .ht-hero-slider__dots {
    bottom: 12px !important;
  }
}

/* Hochformat-Spezialfälle */
@media (max-width: 1100px) and (orientation: portrait) {
  body #header [data-id="logo"] img, body #header .site-logo-container img, body #header .custom-logo, body .ct-header [data-id="logo"] img, body .ct-header .site-logo-container img, body .ct-header .custom-logo {
    transform: none !important;
    transform-origin: left center !important;
    width: auto !important;
  }
}

@media (min-width: 700px) and (max-width: 900px) and (orientation: portrait) {
  body #header [data-row="top"], body .ct-header [data-row="top"] {
    --height: 38px !important;
  }

  body #header [data-row="top"] .ct-container, body #header [data-row="top"] .ct-container-fluid, body .ct-header [data-row="top"] .ct-container, body .ct-header [data-row="top"] .ct-container-fluid {
    min-height: 38px !important;
    height: 38px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  body .ht-topbar {
    display: grid !important;
    grid-template-columns: max-content minmax(0,1fr) max-content !important;
    align-items: center !important;
    column-gap: 12px !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }

  body .ht-topbar > *, body .ht-topbar__center, body .ht-topbar__center strong, body .ht-topbar__link {
    margin: 0 !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }

  body #header [data-row="middle"], body .ct-header [data-row="middle"] {
    --height: 112px !important;
    min-height: 112px !important;
    height: 112px !important;
  }

  body #header [data-row="middle"] > div, body #header [data-row="middle"] .ct-container, body #header [data-row="middle"] .ct-container-fluid, body .ct-header [data-row="middle"] > div, body .ct-header [data-row="middle"] .ct-container, body .ct-header [data-row="middle"] .ct-container-fluid {
    min-height: 112px !important;
    height: 112px !important;
    max-height: 112px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  body .ht-hero__media, body .ht-hero-slider .ht-hero__media {
    height: 470px !important;
    min-height: 0 !important;
    max-height: 470px !important;
  }

  body #header [data-id="logo"] img, body #header .site-logo-container img, body #header .custom-logo, body .ct-header [data-id="logo"] img, body .ct-header .site-logo-container img, body .ct-header .custom-logo {
    max-height: 88px !important;
    width: auto !important;
    transform: none !important;
  }

  body #header [data-row="middle"], body .ct-header [data-row="middle"], body #header [data-row="middle"] > div, body #header [data-row="middle"] .ct-container, body #header [data-row="middle"] .ct-container-fluid, body .ct-header [data-row="middle"] > div, body .ct-header [data-row="middle"] .ct-container, body .ct-header [data-row="middle"] .ct-container-fluid {
    --height: 96px !important;
    min-height: 96px !important;
    height: 96px !important;
    max-height: 96px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  body .ht-topbar > .ht-topbar__center {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    left: 50% !important;
    top: 50% !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    font-size: 8px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    transform: translate(-50%, -50%) !important;
  }

  body .ht-topbar > .ht-topbar__center br {
    display: none !important;
  }

  body .ht-topbar > .ht-topbar__center *, body .ht-topbar > .ht-topbar__center strong, body .ht-topbar > .ht-topbar__center a, body .ht-topbar > .ht-topbar__center span {
    display: inline !important;
    width: auto !important;
    max-width: none !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  body .ht-topbar > .ht-topbar__left, body .ht-topbar > .ht-topbar__right {
    max-width: 27% !important;
    font-size: 8px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  body .ht-topbar .ht-topbar__link {
    gap: 4px !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 900px) and (orientation: portrait) {
  body #header, body .ct-header {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  body #header [data-row="middle"], body .ct-header [data-row="middle"] {
    --height: 78px !important;
    --header-height: 78px !important;
    height: 78px !important;
    min-height: 78px !important;
    max-height: 78px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body #header [data-row="middle"] > div, body #header [data-row="middle"] .ct-container, body #header [data-row="middle"] .ct-container-fluid, body .ct-header [data-row="middle"] > div, body .ct-header [data-row="middle"] .ct-container, body .ct-header [data-row="middle"] .ct-container-fluid {
    --height: 78px !important;
    height: 78px !important;
    min-height: 78px !important;
    max-height: 78px !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  body.home main, body.home #main, body.home .site-main, body.home .ht-hero-slider, body.home .ht-hero {
    margin-top: 0 !important;
  }

  body #header [data-row="middle"], body .ct-header [data-row="middle"], body #header [data-row="middle"] > div, body #header [data-row="middle"] .ct-container, body #header [data-row="middle"] .ct-container-fluid, body .ct-header [data-row="middle"] > div, body .ct-header [data-row="middle"] .ct-container, body .ct-header [data-row="middle"] .ct-container-fluid {
    overflow: visible !important;
  }

  body #header [data-id="logo"], body .ct-header [data-id="logo"], body #header .site-logo-container, body .ct-header .site-logo-container {
    display: flex !important;
    align-items: center !important;
    --logo-max-width: 260px !important;
    --logo-max-height: 86px !important;
    width: 260px !important;
    max-width: 260px !important;
    min-width: 260px !important;
    height: 86px !important;
    max-height: 86px !important;
    overflow: visible !important;
  }

  body #header [data-id="logo"] img, body #header .site-logo-container img, body #header .custom-logo, body .ct-header [data-id="logo"] img, body .ct-header .site-logo-container img, body .ct-header .custom-logo {
    width: 260px !important;
    max-width: 260px !important;
    height: auto !important;
    max-height: 86px !important;
    object-fit: contain !important;
    transform: none !important;
  }
}

@media (max-width: 699px) and (orientation: portrait) {
  body #header [data-row="middle"], body .ct-header [data-row="middle"], body #header [data-row="middle"] > div, body #header [data-row="middle"] .ct-container, body #header [data-row="middle"] .ct-container-fluid, body .ct-header [data-row="middle"] > div, body .ct-header [data-row="middle"] .ct-container, body .ct-header [data-row="middle"] .ct-container-fluid {
    --height: 70px !important;
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
  }

  body #header [data-id="logo"], body .ct-header [data-id="logo"], body #header .site-logo-container, body .ct-header .site-logo-container {
    --logo-max-width: 225px !important;
    --logo-max-height: 76px !important;
    width: 225px !important;
    max-width: 225px !important;
    min-width: 225px !important;
    height: 76px !important;
    max-height: 76px !important;
  }

  body #header [data-id="logo"] img, body #header .site-logo-container img, body #header .custom-logo, body .ct-header [data-id="logo"] img, body .ct-header .site-logo-container img, body .ct-header .custom-logo {
    width: 225px !important;
    max-width: 225px !important;
    max-height: 76px !important;
  }
}

@media (min-width: 700px) and (max-width: 820px) and (orientation: portrait) {
  body .ht-topbar > .ht-topbar__center, body .ht-topbar > .ht-topbar__center strong, body .ht-topbar > .ht-topbar__center a, body .ht-topbar > .ht-topbar__center span {
    white-space: nowrap !important;
  }

  body .ht-topbar, body [data-id="html"] .ht-topbar, body .ct-header-html .ht-topbar {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
    overflow: visible !important;
  }

  body .ht-topbar > .ht-topbar__left, body .ht-topbar > .ht-topbar__right {
    position: relative !important;
    z-index: 2 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 28% !important;
    font-size: 8.5px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  body .ht-topbar > .ht-topbar__center {
    position: absolute !important;
    z-index: 3 !important;
    left: 50% !important;
    top: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translate(-50%, -50%) !important;
    font-size: 8px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  body .ht-topbar > .ht-topbar__center *, body .ht-topbar > .ht-topbar__center strong, body .ht-topbar > .ht-topbar__center a, body .ht-topbar > .ht-topbar__center span {
    display: inline !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  body #header [data-row="top"], body .ct-header [data-row="top"], body #header [data-row="top"] > div, body #header [data-row="top"] .ct-container, body #header [data-row="top"] .ct-container-fluid, body .ct-header [data-row="top"] > div, body .ct-header [data-row="top"] .ct-container, body .ct-header [data-row="top"] .ct-container-fluid {
    --height: 34px !important;
    min-height: 34px !important;
    height: 34px !important;
    max-height: 34px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  body #header .ht-topbar, body .ct-header .ht-topbar, body [data-id="html"] .ht-topbar, body .ct-header-html .ht-topbar {
    position: static !important;
    display: grid !important;
    grid-template-columns: 132px minmax(0, 1fr) 170px !important;
    grid-template-rows: 34px !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 34px !important;
    height: 34px !important;
    gap: 5px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 8px !important;
    line-height: 1 !important;
  }

  body #header .ht-topbar > .ht-topbar__left, body .ct-header .ht-topbar > .ht-topbar__left {
    position: static !important;
    grid-column: 1 !important;
    width: auto !important;
    max-width: none !important;
    justify-content: flex-start !important;
    font-size: 8px !important;
    transform: none !important;
  }

  body #header .ht-topbar > .ht-topbar__center, body .ct-header .ht-topbar > .ht-topbar__center {
    position: static !important;
    grid-column: 2 !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: stretch !important;
    text-align: center !important;
    font-size: 7.5px !important;
    line-height: 1 !important;
    letter-spacing: -0.08px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    transform: none !important;
  }

  body #header .ht-topbar > .ht-topbar__right, body .ct-header .ht-topbar > .ht-topbar__right {
    position: static !important;
    grid-column: 3 !important;
    width: auto !important;
    max-width: none !important;
    justify-content: flex-end !important;
    text-align: right !important;
    font-size: 8px !important;
    transform: none !important;
  }

  body #header .ht-topbar .ht-topbar__link, body .ct-header .ht-topbar .ht-topbar__link {
    gap: 3px !important;
    font-size: inherit !important;
    white-space: nowrap !important;
  }

  body #header .ht-topbar .ht-topbar__icon, body .ct-header .ht-topbar .ht-topbar__icon {
    font-size: 8px !important;
  }

  body #header [data-row="middle"], body .ct-header [data-row="middle"], body #header [data-row="middle"] > div, body #header [data-row="middle"] .ct-container, body #header [data-row="middle"] .ct-container-fluid, body .ct-header [data-row="middle"] > div, body .ct-header [data-row="middle"] .ct-container, body .ct-header [data-row="middle"] .ct-container-fluid {
    --height: 84px !important;
    min-height: 84px !important;
    height: 84px !important;
    max-height: 84px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  body #header [data-id="logo"], body .ct-header [data-id="logo"], body #header .site-logo-container, body .ct-header .site-logo-container {
    width: 182px !important;
    max-width: 182px !important;
  }

  body #header [data-id="logo"] img, body #header .site-logo-container img, body #header .custom-logo, body .ct-header [data-id="logo"] img, body .ct-header .site-logo-container img, body .ct-header .custom-logo {
    width: 182px !important;
    max-width: 182px !important;
    height: auto !important;
    max-height: 76px !important;
    transform: none !important;
  }

  body #header .ht-topbar > .ht-topbar__center, body .ct-header .ht-topbar > .ht-topbar__center, body #header [data-row="top"] .ht-topbar__center, body .ct-header [data-row="top"] .ht-topbar__center {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    width: 116% !important;
    max-width: none !important;
    margin-left: -8% !important;
    font-size: 7.2px !important;
    line-height: 1 !important;
    letter-spacing: -0.12px !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    transform: none !important;
  }

  body #header .ht-topbar > .ht-topbar__center br, body .ct-header .ht-topbar > .ht-topbar__center br {
    display: none !important;
  }

  body #header .ht-topbar > .ht-topbar__center *, body .ct-header .ht-topbar > .ht-topbar__center * {
    display: inline !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }
}

/* ==========================================================
   12Z – HERO RESPONSIVE – BEREINIGTE ABSCHLUSSREGELN
   Stand 18.09.2026

   WICHTIG:
   Dieser Abschlussblock bündelt die Responsive-Korrekturen für den Hero.
   Die zuvor am Dateiende mehrfach vorhandenen 768–900px-Blöcke wurden
   zusammengeführt, damit sich left/transform/rotate/dots nicht gegenseitig
   überschreiben.
   ========================================================== */

/* TABLET 768–900px ------------------------------------------------ */
@media screen and (min-width: 768px) and (max-width: 900px) {

  /* Hero folgt dem Bildformat – keine dunkle Leerfläche oben/unten */
  body .ht-hero-slider .ht-hero__media,
  body .ht-hero .ht-hero__media,
  body .ht-hero__media {
    height: calc(100vw / 3) !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  body .ht-hero-slider .ht-hero__image,
  body .ht-hero .ht-hero__image,
  body .ht-hero__image {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    object-fit: initial !important;
    object-position: initial !important;
  }

  body .ht-hero-slider .ht-hero__curve,
  body .ht-hero .ht-hero__curve,
  body .ht-hero__curve {
    height: clamp(58px, 9vw, 78px) !important;
  }

  /* Textblock: gerade, auf Logo-Flucht */
  body .ht-hero-slider.has-slider-nav .ht-hero__content,
  body .ht-hero-slider .ht-hero-slider__slide .ht-hero__content,
  body .ht-hero-slider .ht-hero-slider__slide.is-active .ht-hero__content,
  body .ht-hero .ht-hero__content {
    left: 120px !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    width: 390px !important;
    max-width: calc(100% - 240px) !important;
    transform: translateY(-50%) !important;
    rotate: 0deg !important;
    transform-origin: left center !important;
  }

  /* Alte Desktop-Rotationen und Versätze vollständig neutralisieren */
  body .ht-hero .ht-hero__copy,
  body .ht-hero .ht-hero__eyebrow,
  body .ht-hero .ht-hero__title,
  body .ht-hero .ht-hero__title-line,
  body .ht-hero .ht-hero__title-line.is-accent,
  body .ht-hero .ht-hero__text {
    transform: none !important;
    rotate: 0deg !important;
  }

  body .ht-hero .ht-hero__button {
    rotate: 0deg !important;
  }

  body .ht-hero-slider .ht-hero__eyebrow {
    margin-bottom: 5px !important;
    padding: 5px 8px !important;
    font-size: 8px !important;
    transform: none !important;
  }

  body .ht-hero-slider .ht-hero__title {
    margin-left: 0 !important;
    margin-right: 0 !important;
    font-size: clamp(27px, 4.2vw, 34px) !important;
    line-height: .90 !important;
    transform: none !important;
  }

  body .ht-hero-slider .ht-hero__title-line,
  body .ht-hero-slider .ht-hero__title-line.is-accent {
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    rotate: 0deg !important;
  }

  /* Dekorative Headline-Elemente ebenfalls ohne Rotation */
  body .ht-hero .ht-hero__title::before,
  body .ht-hero .ht-hero__title::after,
  body .ht-hero .ht-hero__title-line::before,
  body .ht-hero .ht-hero__title-line::after,
  body .ht-hero .ht-hero__title-line.is-accent::before,
  body .ht-hero .ht-hero__title-line.is-accent::after {
    transform: none !important;
    rotate: 0deg !important;
  }

  body .ht-hero-slider .ht-hero__text {
    width: 390px !important;
    max-width: 92% !important;
    margin: 5px 0 0 0 !important;
    font-size: 10.5px !important;
    line-height: 1.25 !important;
    transform: none !important;
  }

  body .ht-hero-slider .ht-hero__button,
  body .ht-hero-slider .ht-hero-slider__slide .ht-hero__button,
  body .ht-hero-slider .ht-hero-slider__slide.is-active .ht-hero__button {
    min-height: 34px !important;
    margin: 8px 0 0 0 !important;
    padding: 6px 12px !important;
    gap: 6px !important;
    font-size: 10px !important;
    transform: none !important;
    rotate: 0deg !important;
  }

  /* Sliderpunkte deutlich oberhalb des Selectors */
  body .ht-hero-slider__dots,
  body .ht-hero .ht-hero-slider__dots {
    left: 50% !important;
    top: auto !important;
    bottom: 70px !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
  }
}

/* SMALL DESKTOP / TABLET QUER 901–1680px ------------------------- */
@media screen and (min-width: 901px) and (max-width: 1680px) {
  body .ht-hero-slider .ht-hero__media,
  body .ht-hero .ht-hero__media,
  body .ht-hero__media {
    height: calc(100vw / 3) !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  body .ht-hero-slider .ht-hero__image,
  body .ht-hero .ht-hero__image,
  body .ht-hero__image {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    object-fit: initial !important;
    object-position: initial !important;
  }
}

/* POLAROIDS 901–1200px ------------------------------------------ */
@media screen and (min-width: 901px) and (max-width: 1200px) {
  body .ht-hero__polaroids {
    right: clamp(12px, 2vw, 24px) !important;
    top: 53% !important;
    width: clamp(215px, 27vw, 324px) !important;
    height: clamp(245px, 30vw, 360px) !important;
    transform: translateY(-50%) !important;
  }

  body .ht-hero__polaroid {
    width: clamp(84px, 10.5vw, 126px) !important;
    padding: clamp(4px, .55vw, 7px) clamp(4px, .55vw, 7px) clamp(11px, 1.4vw, 17px) !important;
  }
}

/* ==========================================================
   HERO TABLET PORTRAIT – 768px bis 900px
   Feinkorrektur: Content mittiger + Dots tiefer
   ========================================================== */
@media screen and (min-width: 768px) and (max-width: 900px) {
    body .ht-hero .ht-hero__content {
        left: 120px !important;
        right: auto !important;
        top: 43% !important;
        width: 390px !important;
        max-width: calc(100% - 240px) !important;
        transform: translateY(-50%) !important;
        rotate: 0deg !important;
    }

    body .ht-hero .ht-hero-slider__dots {
        left: 50% !important;
        top: auto !important;
        bottom: 42px !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
    }
}


/* Barrierefreiheit – global */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}