@charset "UTF-8";
/*
@include max($tablet) {
	height: 60px;
}
*/
/*
Beispiel:
@include default_text_specs(
    $css-variable-prepend: "kc-teaser-title",
    $font-weight: 700,
    $line-height: 1,
    $text-align: "center"
);
*/
/*
Beispiel:
@include default_h1_specs(
    $css-variable-prepend: "",
    $font-weight: 700,
    $line-height: 1,
    $text-align: "center"
);
*/
/*
Beispiel:
@include default_h2_specs(
    $css-variable-prepend: "",
    $font-weight: 700,
    $line-height: 1,
    $text-align: "center"
);
*/
/*
Beispiel:
@include css_variable_prepend(
    $property: "font-size",
    $prepend-string: 'kc-teaser-title',
    $default-value: 20px
);
*/
/*
@extend %transition;
*/
/*
@extend %transition-timing;
*/
/*
@include max($tablet) {
	height: 60px;
}
*/
body.kc-start {
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
}

body.kc-start article#wrapper {
  flex: 1 1 auto;
  min-height: 0;
}

.hero-slider-container {
  width: var(--hero-slider-width, var(--kc-block-default-width, calc(var(--text-width) + 2 * var(--global-padding))));
  max-width: var(--hero-slider-max-width, 100%);
}
.hero-slider-container.align-wide {
  width: var(--kc-block-wide-width, calc(var(--content-width) + 2 * var(--global-padding)));
}
.hero-slider-container.align-full {
  max-width: 100%;
  width: 100%;
}
.hero-slider-container {
  padding-left: var(--hero-slider-padding-left, var(--kc-block-default-padding-left, var(--global-padding)));
  padding-right: var(--hero-slider-padding-right, var(--kc-block-default-padding-right, var(--global-padding)));
}
.hero-slider-container.align-wide {
  padding-left: var(--hero-slider-wide-padding-left, var(--kc-block-wide-padding-left, var(--global-padding)));
  padding-right: var(--hero-slider-wide-padding-right, var(--kc-block-wide-padding-right, var(--global-padding)));
}
.hero-slider-container.align-full {
  padding-left: var(--hero-slider-full-padding-left, var(--kc-block-full-padding-left, var(--global-padding)));
  padding-right: var(--hero-slider-full-padding-right, var(--kc-block-full-padding-right, var(--global-padding)));
}
.hero-slider-container.align-full .wp-block-group__inner-container > .container {
  padding-left: var(--hero-slider-full-inner-padding-left, 0);
  padding-right: var(--hero-slider-full-inner-padding-right, 0);
}
.hero-slider-container {
  --hero-slider-full-padding-left: 0;
  --hero-slider-full-padding-right: 0;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.hero-buehne {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--primary-color-dark);
  overflow: hidden;
}

.hero-bilder {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.6s var(--weich), transform 8s linear;
}

.hero-bild.aktiv {
  opacity: 1;
  transform: scale(1);
}

.hero-schleier {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 31, 68, 0.62) 0%, rgba(8, 31, 68, 0.52) 45%, rgba(8, 31, 68, 0.8) 100%);
}

.hero-punkte {
  position: absolute;
  right: var(--global-padding);
  bottom: 17px;
  z-index: 4;
  display: flex;
  gap: 8px;
}

.hero-punkt {
  width: 12px;
  height: 12px;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.25);
  transition: background-color 0.3s var(--weich), transform 0.3s var(--weich);
}

.hero-punkt:hover {
  background: rgba(255, 255, 255, 0.6);
}

.hero-punkt.aktiv {
  background: var(--white);
  transform: scale(1.1);
}

.hero {
  position: relative;
  z-index: 3;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(10px, 1.8vh, 18px);
  max-width: var(--content-width);
  margin: 0 auto;
  width: 100%;
  padding: clamp(12px, 4.6vh, 96px) var(--global-padding) 17px;
}

.hero-marke {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(6px, 1.4vh, 14px);
  padding-bottom: clamp(8px, 3.4vh, 40px);
  container-type: inline-size;
}

.hero-marke-name {
  margin: 0;
  font-family: var(--primary-font);
  font-weight: 700;
  color: var(--white);
  line-height: 1.02;
  letter-spacing: 0.01em;
  white-space: nowrap;
  font-size: min(76px, 5.8cqw);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.hero-marke-zusatz {
  margin: 0;
  font-family: var(--primary-font);
  font-size: clamp(19.5px, 1.85cqw, 21px);
  letter-spacing: 0.09em;
  color: var(--secondary-color);
  line-height: 1.45;
  max-width: 52em;
}

.hero-marke-logo {
  display: block;
  color: var(--white);
  width: clamp(78px, 19vh, 180px);
  height: auto;
  aspect-ratio: 180/151;
  margin: clamp(4px, 1vh, 10px) 0;
  filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.35));
}

h1.claim {
  margin: 0;
  white-space: nowrap;
  font-family: var(--primary-font);
  font-weight: 700;
  color: var(--white);
  line-height: 1.05;
  letter-spacing: 0.015em;
  font-size: calc((min(1200px, 100vw) - 68px) / 32);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

.dibt {
  margin: 0;
  font-size: clamp(19.5px, 1.85cqw, 21px);
  line-height: 1.5;
  color: var(--secondary-color-light);
  max-width: 44em;
  text-wrap: pretty;
}

.hero-kontaktzeile {
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  padding-top: clamp(9px, 1.6vh, 15px);
  font-family: var(--primary-font);
  font-size: clamp(16px, 1.3vw, 17.5px);
  color: var(--secondary-color-light);
  text-align: center;
}
.hero-kontaktzeile a {
  color: var(--white);
  text-decoration: none;
}

.hero-kont::before {
  content: "·";
}

.hero-rechtliches {
  margin: 0;
  font-family: var(--primary-font);
  font-size: 16px;
  text-align: center;
}
.hero-rechtliches a {
  color: var(--secondary-color-dark);
  text-decoration: none;
  transition: color 0.3s var(--weich);
}
.hero-rechtliches a:hover {
  color: var(--white);
}

@media (max-width: 900px) {
  .hero {
    gap: clamp(8px, 1.6vh, 16px);
  }
  .hero-punkte {
    display: none;
  }
  .hero-marke-logo {
    display: none;
  }
  .hero-marke {
    align-self: stretch;
    width: 100%;
    padding-bottom: 0;
    margin: 0 0 clamp(6px, 1.4vh, 14px);
    gap: 6px;
    container-type: normal;
  }
  .hero-marke-name {
    line-height: 1.05;
    font-size: min(clamp(24px, 6.8vw, 32px), (100vw - 2 * var(--global-padding)) / 8.6);
  }
  .hero-marke-zusatz {
    font-size: clamp(14px, 3.5vw, 14.5px);
    letter-spacing: 0.03em;
    max-width: 24em;
    text-wrap: balance;
  }
  h1.claim {
    white-space: normal;
    text-wrap: balance;
    font-size: clamp(26px, 8vw, 40px);
    line-height: 1.08;
    margin-top: clamp(8px, 2vh, 18px);
  }
  .dibt {
    font-size: clamp(14px, 3.5vw, 14.5px);
    line-height: 1.5;
    -webkit-hyphens: auto;
    hyphens: auto;
    text-wrap: balance;
  }
  .hero-kontaktzeile {
    padding-top: 10px;
    font-size: 15.5px;
    line-height: 1.6;
  }
  .hero-kont {
    display: block;
  }
  .hero-kont::before {
    content: none;
  }
  .hero-rechtliches {
    font-size: 15px;
    text-align: left;
    word-spacing: -1px;
  }
  .hero-rechtliches a {
    white-space: nowrap;
  }
}
@media (max-width: 900px) and (max-height: 720px) {
  .hero-marke {
    gap: 3px;
  }
  h1.claim {
    font-size: clamp(24px, 7.2vw, 34px);
  }
}
@media (max-height: 450px) {
  body.kc-start {
    overflow: auto;
    height: auto;
    min-height: 100vh;
  }
  .hero-buehne {
    min-height: 100vh;
    min-height: 100dvh;
    flex: none;
  }
  .hero {
    flex: none;
  }
  .hero-marke {
    flex: none;
    padding: 16px 0;
  }
  .hero-marke-logo {
    display: none;
  }
}
.hero-buehne-editor {
  min-height: 640px;
}
.hero-buehne-editor .hero {
  min-height: 640px;
}
.hero-buehne-editor .hero-editor-hinweis {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
}
.hero-buehne-editor [data-rich-text-placeholder]::after {
  color: rgba(255, 255, 255, 0.55);
}
.hero-buehne-editor .hero-marke-logo {
  width: clamp(78px, 19vh, 180px);
}

/*# sourceMappingURL=hero-slider.css.map*/