/* ===========================
   Module-Erweiterungen (Video, Logo-Banderole, Animationen, Schreibschrift)
   Bewusst als eigene CSS-Datei neben styles.css (CodeKit), damit kein SCSS-Build nötig ist.
============================ */

/* ---------- Videos ---------- */
.kleve-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #000;
}

/* Wrapper: Video + Poster-Bild darüber (Überblendung, siehe js/modules.js) */
.kleve-video-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.kleve-video__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  opacity: 1;
  transition: opacity .6s ease-in-out; /* FADE_MS in js/modules.js */
}
.kleve-video-wrap.is-playing .kleve-video__poster {
  opacity: 0;
}

/* Metro Grid: Video füllt die Ratio-Kachel wie das Bild */
.grid-item [class*="customratio-"] > .kleve-video-wrap {
  position: absolute;
  inset: 0;
}

/* Text + Bild: gleiche 4:3-Fläche wie custom-1000x750 */
.text-image-video {
  aspect-ratio: 4 / 3;
}

/* Bild Vollbreite: 3:4 mobil, 2:1 ab 768px (wie die Bildausgabe) */
.fullimage-video {
  aspect-ratio: 3 / 4;
}
@media (min-width: 768px) {
  .fullimage-video {
    aspect-ratio: 2 / 1;
  }
}

/* ---------- Pause-/Play-Button (Autoplay) ---------- */
.kleve-autoplay-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bs-primary, #0c4270);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  cursor: pointer;
  transition: transform .2s ease-in-out;
}
.kleve-autoplay-toggle:hover {
  transform: scale(1.08);
}
.kleve-autoplay-toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--bs-primary, #0c4270);
}

/* Icon: zwei Balken (Pause) morphen per clip-path in die zwei Hälften eines Dreiecks (Play) */
.kleve-autoplay-toggle__icon {
  position: relative;
  width: 14px;
  height: 16px;
  transition: transform .3s ease-in-out;
}
.kleve-autoplay-toggle__icon span {
  position: absolute;
  inset: 0;
  background: currentColor;
  transition: clip-path .3s ease-in-out;
}
.kleve-autoplay-toggle__icon span:first-child {
  clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%);
}
.kleve-autoplay-toggle__icon span:last-child {
  clip-path: polygon(65% 0, 100% 0, 100% 100%, 65% 100%);
}
.kleve-autoplay-toggle.is-paused .kleve-autoplay-toggle__icon {
  transform: translateX(2px); /* Dreieck optisch zentrieren */
}
.kleve-autoplay-toggle.is-paused .kleve-autoplay-toggle__icon span:first-child {
  clip-path: polygon(0 0, 50% 25%, 50% 75%, 0 100%);
}
.kleve-autoplay-toggle.is-paused .kleve-autoplay-toggle__icon span:last-child {
  clip-path: polygon(50% 25%, 100% 50%, 100% 50%, 50% 75%);
}
@media (prefers-reduced-motion: reduce) {
  .kleve-autoplay-toggle,
  .kleve-autoplay-toggle__icon,
  .kleve-autoplay-toggle__icon span {
    transition: none;
  }
}

/* Unter Karussells und Logo-Banderole */
.kleve-autoplay-bar {
  display: flex;
  justify-content: flex-end;
  margin-top: .75rem;
}

/* Über Videos und Slideshow */
.kleve-video-wrap > .kleve-autoplay-toggle,
.grid-item > .kleve-autoplay-toggle,
.carousel > .kleve-autoplay-toggle {
  position: absolute;
  z-index: 3;
}
.kleve-video-wrap > .kleve-autoplay-toggle {
  right: .75rem;
  bottom: .75rem;
}
/* Metro Grid: neben dem Link, innerhalb der Spalte (Gutter beachten) */
.grid-item > .kleve-autoplay-toggle {
  right: calc(var(--bs-gutter-x) * .5 + .75rem);
  top: calc(1rem + .75rem);
}
.carousel > .kleve-autoplay-toggle {
  left: 1rem;
  bottom: 1rem;
}

/* ---------- Logo-Banderole ---------- */
.logo-banderole {
  --logo-scale: 1;
  --logo-gap: 4rem;
  overflow: hidden;
  /* weiche Kanten links/rechts */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
@media (max-width: 991.98px) {
  .logo-banderole { --logo-scale: .75; --logo-gap: 3rem; }
}
@media (max-width: 575.98px) {
  .logo-banderole { --logo-scale: .55; --logo-gap: 2rem; }
}

.logo-banderole__track {
  display: flex;
  width: max-content;
}

.logo-banderole__set {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: var(--logo-gap);
  /* Abstand nach dem letzten Logo = Abstand zwischen Logos → nahtloser Übergang */
  padding-right: var(--logo-gap);
}

.logo-banderole__item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.logo-banderole__item a {
  display: block;
}

.logo-banderole__img {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(var(--logo-max-w) * var(--logo-scale));
  max-height: calc(var(--logo-max-h) * var(--logo-scale));
}

/* SVGs haben oft keine intrinsische Größe: in die Max.-Box einpassen */
.logo-banderole__img--svg {
  width: calc(var(--logo-max-w) * var(--logo-scale));
  height: calc(var(--logo-max-h) * var(--logo-scale));
  object-fit: contain;
}

.logo-banderole.is-running .logo-banderole__track {
  animation: logo-banderole var(--banderole-duration, 40s) linear infinite;
}
.logo-banderole.is-paused .logo-banderole__track,
.logo-banderole--hover-pause:hover .logo-banderole__track,
.logo-banderole--hover-pause:focus-within .logo-banderole__track {
  animation-play-state: paused;
}

@keyframes logo-banderole {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--banderole-distance, 50%))); }
}

/* „Bewegung reduzieren“: statische, umbrechende Logo-Reihe */
.logo-banderole.is-static {
  -webkit-mask-image: none;
          mask-image: none;
}
.logo-banderole.is-static .logo-banderole__track {
  width: auto;
  justify-content: center;
}
.logo-banderole.is-static .logo-banderole__set {
  flex-wrap: wrap;
  justify-content: center;
  flex-shrink: 1;
  row-gap: 2rem;
  padding: 0 1rem;
}

/* ---------- Einblend-Animation „Gestaffelt“ (inc/animations.php, js/modules.js) ---------- */
/* Startzustand ohne Transition, damit das Zurücksetzen beim Herausscrollen sofort passiert */
.js-anim [data-animate="stagger"]:not(.is-inview) .kleve-stagger-item {
  opacity: 0;
  transform: translateY(60px);
}
/* Endzustand ohne transform, damit keine Stapel-/Positionierungseffekte bleiben */
.js-anim [data-animate="stagger"].is-inview .kleve-stagger-item {
  opacity: 1;
  transform: none;
  transition: opacity 1s ease-out, transform 1s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--stagger-delay, 0ms);
}

/* ---------- Page-Opener „Zoom-out“: Header-Einstieg (inc/animations.php, global_header.php) ---------- */
.page-opener .page-opener__frame {
  overflow: hidden;
  border-radius: var(--bs-border-radius-xl, 1rem);
}
.page-opener .page-opener__frame img,
.page-opener .page-opener__frame video {
  transform-origin: 60% 45%;
}
/* Bild kommt groß und unscharf herein, Titel folgt */
.page-opener--zoom-out .page-opener__frame img,
.page-opener--zoom-out .page-opener__frame video {
  animation: kx-zoom-out 1.8s cubic-bezier(.16, 1, .3, 1) both;
}
.page-opener--zoom-out .page-opener__headline {
  animation: kx-rise 1s cubic-bezier(.16, 1, .3, 1) .9s both;
}

@keyframes kx-zoom-out { from { transform: scale(1.35); opacity: 0; filter: blur(6px); } to { transform: none; opacity: 1; filter: none; } }
@keyframes kx-rise     { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .page-opener * {
    animation: none !important;
  }
}

/* ---------- Schreibschrift „Smoothy“ (inc/fonts.php): Headline (Schreibschrift), Headline auf Bild ---------- */
@font-face {
  font-family: "Smoothy";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/font.woff2") format("woff2"), url("../fonts/font.woff") format("woff");
}

:root {
  --kx-dunkelblau: #0C4270;
  --kx-gruen: #9ABE57;
  --kx-weiss: #fff;
}

.kx-script {
  font-family: "Smoothy", "Lato", cursive;
  font-weight: 400 !important;
  letter-spacing: 0;
  line-height: 1.15;
  text-transform: none;
}

/* Größen (fließend zwischen Smartphone und Desktop) */
.kx-script--l  { font-size: clamp(2.5rem, 1.6rem + 4vw, 4.75rem); }
.kx-script--xl { font-size: clamp(3rem, 1.6rem + 6vw, 6.5rem); }

/* Farben (CI): Dunkelblau, Grün aus dem Logo, Weiß */
.kx-color-dunkelblau { color: var(--kx-dunkelblau) !important; }
.kx-color-gruen      { color: var(--kx-gruen) !important; }
.kx-color-weiss      { color: var(--kx-weiss) !important; }

.kx-script-sub {
  font-size: 1.125rem;
}

/* Headline auf Bild */
.kx-script-bild > picture img {
  display: block;
  width: 100%;
  height: auto;
}
.kx-script-bild__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .45) 100%);
}
.kx-script-bild__content {
  position: absolute;
  inset: 0;
}