/* ==========================================================================
   Startseiten-Slider (Swiperslider Mask-CE): Hero-Zoom + Jahr/Projekt-Pills.
   Beides startet erst mit body.hero-ready (wird von Layouts/Default.html
   genau in dem Moment gesetzt, in dem das Intro-Overlay zu verschwinden
   beginnt) statt sofort beim Laden – sonst läuft die Animation unsichtbar
   hinter dem Intro ab. Bewusst kein AOS hier, weil AOS scroll-/
   viewport-getriggert ist und nicht auf dieses eigene Event warten kann.
   ========================================================================== */

/* #home-slider und .swiper-container nutzen Bootstraps "vh-100"
   (height:100vh). Auf Mobile-Browsern (v.a. Chrome/Safari Android+iOS)
   ist "100vh" die Höhe OHNE die (dynamisch ein-/ausblendende)
   Adressleiste, also größer als der tatsächlich sichtbare Bereich beim
   Laden - das Bild ragt dadurch unten über den sichtbaren Viewport
   hinaus und die Raute (unten rechts positioniert) sitzt nicht mehr im
   sichtbaren Bild. "100dvh" (dynamic viewport height) kennt die
   Adressleiste und passt sich live an. Alte Browser ohne dvh-Support
   ignorieren nur diese eine Zeile und behalten das 100vh-Fallback davor
   - deshalb ganz bewusst beide Zeilen, in dieser Reihenfolge. */
#home-slider,
.swiper-container {
  height: 100vh;
  height: 100dvh;
}
/* TYPO3 croppt das Bild nicht mehr serverseitig hart (siehe
   Swiperslider.html) - der eigentliche Ausschnitt passiert hier,
   responsiv und immer zentriert, egal welches Seitenverhältnis der
   Viewport gerade hat. */
.headerbannerImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* height:100% auf .headerbannerImg braucht eine Vorfahrenkette mit
   DEFINIERTER Höhe, um zu greifen (CSS-Regel: Prozent-Höhe an einem
   height:auto-Vorfahren wird ignoriert -> Bild fällt auf sein
   intrinsisches Seitenverhältnis zurück). .swiper-slide bekommt sein
   height:100% von Swiper selbst, aber .swiper-image/.picture (unsere
   eigenen Wrapper dazwischen) hatten keine explizite Höhe - dadurch war
   das Bild bei hohen/schmalen Viewports (Breite < Höhe*16/9) nicht hoch
   genug für den vh-100-Container, die dunkle Hintergrundfarbe blitzte
   unten durch. */
.swiper-image,
.swiper-image picture {
  display: block;
  height: 100%;
}

.hero-zoom {
  transform: scale(1.12);
  opacity: 0;
  transition: transform 1.6s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 1.1s ease;
  will-change: transform, opacity;
}

body.hero-ready .hero-zoom {
  transform: scale(1);
  opacity: 1;
}

.hero-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

body.hero-ready .hero-reveal {
  opacity: 1;
  transform: translateY(0);
}

.hero-reveal-1 {
  transition-delay: 0.3s;
}

.hero-reveal-2 {
  transition-delay: 0.45s;
}

/* Claim-Overlay (nur beim Video-Slider, siehe Swiperslider.html) - zwei
   Zeilen, gleiches body.hero-ready-Gate wie oben, aber eigene, größere
   Optik statt der kleinen Pills und mit etwas späterem Delay, damit die
   Zeilen sich sichtbar nacheinander von unten einblenden. */
.slider-claim {
  z-index: 1;
  pointer-events: none;
  padding: 0 1.5rem;
  gap: 0.5rem;
}

.slider-claim-line {
  font-family: var(--font-din-2014, sans-serif);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.75rem, 4.5vw, 3.75rem);
  line-height: 1.2;
  text-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

body.hero-ready .slider-claim-line {
  opacity: 1;
  transform: translateY(0);
}

.slider-claim-line-1 {
  transition-delay: 0.4s;
}

.slider-claim-line-2 {
  transition-delay: 0.65s;
}

/* War vorher Bootstraps bg-success (grün) – jetzt fast schwarzes Dunkelblau,
   sichtbar z.B. kurz beim Laden bevor das erste Bild da ist. */
.home-slider-bg {
  background-color: var(--color-gray-100, #0e1729);
}

/* Fix für kaputten Slider (Bild halb abgeschnitten, Rest dunkelblaue
   Fläche): .home-slider-bg ist ein Flex-Container (d-flex), und
   Flex-Kinder haben per Spec ein implizites min-width:auto - dadurch
   durfte .outer-swiper/.swiper-container/.swiper-wrapper NICHT unter die
   Breite seines intrinsischen Inhalts schrumpfen (das Bild hat
   width="2560"). Swiper hat beim Initialisieren die (dadurch viel zu
   große) Breite gemessen, seine Slide-Breite entsprechend gesetzt, was
   den Flex-Container noch weiter wachsen ließ -> Rückkopplungsschleife,
   bis der Browser sie irgendwann abbrach (Slide-Breite > 100.000px).
   min-width:0 durchbricht das: Container darf jetzt normal auf die
   Viewport-Breite schrumpfen, wie bei jedem anderen Block-Element auch. */
.outer-swiper,
.swiper-container,
.swiper-wrapper {
  min-width: 0;
  width: 100%;
}

.slider-meta {
  align-items: center;
  gap: 15px;
}

/* Die beiden Pill-Spalten (Jahr/Projekt) tragen aus dem Markup noch
   Bootstraps "pb-5" (padding-bottom: 3rem/48px) - fällt in der Reihe
   nicht auf, aber sobald sie (schmaler Viewport) untereinander stehen,
   addiert sich das zum "gap" oben und der Abstand wirkt riesig. "gap"
   allein reicht als Abstand zwischen den beiden Spalten. */
.slider-meta > .col-auto {
  padding-bottom: 0;
}

.slider-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background-color: var(--color-steelblue, #1f9cdb);
  color: var(--color-white, #fff);
  /* Eckig-abgerundet statt volle Pill-Form, einheitlich mit .pill-btn */
  border-radius: var(--br-5, 5px);
  padding: 0.6rem 1.5rem;
  font-family: var(--font-figtree, sans-serif);
  font-size: var(--fs-18, 1.125rem);
  font-weight: 400;
  white-space: nowrap;
}

.slider-meta-pill strong {
  font-weight: 700;
}

/* Auf schmalen/Hochformat-Viewports ragen die Pills in die Raute
   (#home-slider::after, unten rechts) hinein - Pills etwas kleiner
   und die ganze Gruppe im Hochformat zusätzlich weiter nach oben
   (mehr Bottom-Padding auf dem Wrapper), damit sie über der Raute statt
   in ihr liegen. ".pb-5" von Bootstrap ist selbst !important, daher
   auch hier nötig. */
@media (max-width: 767px) {
  .slider-meta-pill {
    font-size: 0.95rem;
    padding: 0.5rem 1rem;
  }
}

@media (orientation: portrait) {
  .slider-meta.content-wrapper {
    padding-bottom: 6rem !important;
  }
}