/* Home and news hero/list blocks */


/* ============================================================
   CAROUSEL CROSSFADE + KEN BURNS — Fullscreen Hero
   ============================================================ */

@keyframes ed-kenburns {
  from { transform: scale(1.0); }
  to   { transform: scale(1.12); }
}

.carousel-fullscreen .carousel-item {
  float: none !important;
  margin-right: 0 !important;
  position: absolute !important;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100% !important;
  opacity: 0;
  overflow: hidden;
  transition: opacity 0.85s ease-in-out !important;
  z-index: 0;
  will-change: opacity;
}
.carousel-fullscreen .carousel-item.active {
  position: absolute !important;
  opacity: 1;
  z-index: 1;
}
.carousel-fullscreen .carousel-item-next.carousel-item-start,
.carousel-fullscreen .carousel-item-prev.carousel-item-end {
  opacity: 1; z-index: 1;
}
.carousel-fullscreen .active.carousel-item-start,
.carousel-fullscreen .active.carousel-item-end {
  opacity: 0; z-index: 0;
}

/* Ken Burns: aktives Bild langsam einzoomen */
.ed-hero-carousel .carousel-item.active .ed-hero-img {
  animation: ed-kenburns 8s ease-out forwards;
  transform-origin: center center;
}
/* Eingehendes Bild sofort starten, damit Zoom beim Einblenden sichtbar ist */
.ed-hero-carousel .carousel-item-next.carousel-item-start .ed-hero-img,
.ed-hero-carousel .carousel-item-prev.carousel-item-end .ed-hero-img {
  animation: ed-kenburns 8s ease-out forwards;
  transform-origin: center center;
}


/* ============================================================
   SPORT-TICKER — roter Lauftext unterhalb des Heros
   ============================================================ */

.ed-ticker {
  background: var(--ed-red);
  color: #fff;
  overflow: hidden;
  height: 5rem;
  display: flex;
  align-items: center;
  /* Break out of Bootstrap container/column */
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.ed-ticker__track {
  display: flex;
  white-space: nowrap;
  animation: ed-ticker-scroll 8s linear infinite;
  will-change: transform;
}
.ed-ticker__track span {
  font-family: 'Bebas Neue', Impact, Arial Narrow, sans-serif;
  font-size: 3rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-right: 0;
  flex-shrink: 0;
}
@keyframes ed-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ============================================================
   NEWS-KARTEN
   ============================================================ */

.ed-news-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.75rem;
}
body.page-1 .ed-news-list {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.ed-news-card {
  background: var(--ed-card);
  border-radius: var(--ed-radius);
  box-shadow: var(--ed-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--ed-transition), box-shadow var(--ed-transition);
  border: 0;
}
.ed-news-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ed-shadow-hover);
}
.ed-news-card__image {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
}
.ed-news-card__image-placeholder {
  width: 100%; aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--ed-red) 0%, var(--ed-red-dark) 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem;
}
.ed-news-card__body {
  padding: 1.25rem 1.5rem 1.5rem;
  flex: 1; display: flex; flex-direction: column;
}
.ed-news-card__category {
  font-size: 0.68rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ed-red); margin-bottom: 0.4rem;
}
.ed-news-card__title {
  font-family: 'Bebas Neue', Impact, Arial Narrow, sans-serif;
  font-size: 1.25rem; font-weight: 400; line-height: 1.25;
  letter-spacing: 0.03em;
  color: var(--ed-dark); margin: 0 0 0.6rem;
}
.ed-news-card__title a { color: inherit; text-decoration: none; }
.ed-news-card__title a:hover { color: var(--ed-red); }
.ed-news-card__teaser {
  font-size: 0.875rem; color: var(--ed-muted);
  line-height: 1.55; margin-bottom: 1.1rem; flex: 1;
}
.ed-news-card__footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem; border-top: 1px solid rgba(0,0,0,.06);
  padding-top: 0.85rem; margin-top: auto;
}
.ed-news-card__date { font-size: 0.78rem; color: var(--ed-muted); }
.ed-news-card__link {
  font-size: 0.82rem; font-weight: 700; color: var(--ed-red);
  text-decoration: none; display: inline-flex; align-items: center;
  gap: 0.25rem; transition: gap var(--ed-transition);
}
.ed-news-card__link:hover { color: var(--ed-red-dark); gap: 0.5rem; }

.ed-news-section-header { margin-bottom: 2rem; }
.ed-news-section-header h2 {
  font-family: 'Bebas Neue', Impact, Arial Narrow, sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 400; margin-bottom: 0.25rem;
}
.ed-news-section-header p { color: var(--ed-muted); font-size: 1rem; }


/* ============================================================
   HERO CAROUSEL — Vollbild-Nachrichtenslider
   ============================================================ */

.ed-hero-carousel {
  position: relative;
  height: 100vh;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  background: #0d0d0d;
}

.ed-hero-carousel .carousel-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.ed-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ed-hero-img--fallback {
  height: 100%;
  background: linear-gradient(160deg, #0f2a45 0%, var(--ed-red-dark) 100%);
}

/* Persistentes Gradient am unteren Rand des Carousel-Containers (z-index 2 =
   über den Slides z:0/1, unter den Indicators z:3). Verhindert schwarzen
   Flash im Indicator-Bereich während Transitions — unabhängig vom Slide-Opacity-Verlauf.
   Höhe 70px = unterhalb der 5rem Caption-Padding-Zone, damit kein Caption-Content verdeckt wird. */
.ed-hero-carousel::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70px;
  background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 100%);
  z-index: 2;
  pointer-events: none;
}

/* Dunkles Gradient-Overlay auf jedem Slide — innerhalb des Stacking Context,
   damit die Caption darüber bleibt.
   Die verlassende Slide faded ihren Gradient auf 0, um Double-Stacking zu verhindern. */
.ed-hero-carousel .carousel-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.08) 30%, rgba(0,0,0,.62) 100%);
  z-index: 1;
  transition: opacity 0.85s ease-in-out;
}
/* Verlassende Slide: Gradient sofort ausfaden → kein doppelter schwarzer Overlay */
.ed-hero-carousel .active.carousel-item-start::after,
.ed-hero-carousel .active.carousel-item-end::after {
  opacity: 0;
}

/* Caption — mittig ausgerichtet wie Netzio */
.ed-hero-caption {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 2rem 5rem;
  z-index: 2;
}

.ed-hero-caption__meta {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.9rem;
}
.ed-hero-caption__meta-cat {
  color: var(--ed-red);
}
.ed-hero-caption__meta-sep {
  color: rgba(255, 255, 255, 0.4);
  margin: 0 0.2em;
}
.ed-hero-caption__meta-date {
  color: rgba(255, 255, 255, 0.65);
}

.ed-hero-caption__title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 400; line-height: 1.05;
  color: #fff; margin-bottom: 0.85rem;
  letter-spacing: 0.03em;
  text-shadow: 0 2px 16px rgba(0,0,0,.45);
}
.ed-hero-caption__title a { color: inherit; text-decoration: none; }
.ed-hero-caption__title a:hover { text-decoration: underline; }

.ed-hero-caption__teaser {
  font-size: 1.05rem;
  color: rgba(255,255,255,.88);
  line-height: 1.55; margin-bottom: 1.5rem;
  max-width: 580px;
  text-align: center;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}

.ed-hero-caption__btn {
  background: #ff2c2c;
  color: #fff;
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  border-radius: 0 !important;
  padding: 0.85rem 3rem;
  font-size: 1.25rem;
  text-shadow: none;
  transition: background 0.2s;
}
.ed-hero-caption__btn:hover, .ed-hero-caption__btn:focus {
  background: #cc2020;
  color: #fff;
}

/* BP setzt auf Mobile (< 576px) 20px links/rechts Padding auf .carousel-item →
   Das erzeugt die schwarzen Streifen. Für den Hero-Carousel aufheben.
   will-change: opacity → Browser erstellt GPU-Layer proaktiv vor der Transition,
   verhindert schwarzen Flash-Frame beim Transition-Start. */
.ed-hero-carousel .carousel-item {
  padding-left: 0 !important;
  padding-right: 0 !important;
  will-change: opacity;
}

/* Controls & Indicators über dem Overlay */
.ed-hero-carousel .carousel-control-prev,
.ed-hero-carousel .carousel-control-next,
.ed-hero-carousel .carousel-indicators { z-index: 3; }

.ed-hero-carousel .carousel-indicators button {
  flex: 0 0 auto;        /* flex-basis: auto → width steuert die Größe */
  width: 24px;
  height: 3px !important;        /* Bootstrap Package setzt 4px, !important überschreibt */
  border-radius: 0;
  border: none !important;       /* Bootstrap's border-top/bottom 10px transparent entfernen */
  background: rgba(255, 255, 255, 0.22) !important;
  background-clip: border-box !important;
  padding: 0;
  margin: 0 3px !important;      /* einheitlicher Abstand ohne Bootstrap-Override */
  opacity: 1 !important;
  filter: none !important;       /* Bootstrap .carousel-dark filter: invert(1) verhindern */
  transition: background 0.25s ease, width 0.3s ease;
}
.ed-hero-carousel .carousel-indicators button.active {
  background: var(--ed-red) !important;
  width: 38px;
  height: 3px !important;        /* Bootstrap Package setzt 8px für active, !important überschreibt */
}
.ed-hero-carousel .carousel-indicators button:hover:not(.active) {
  background: rgba(255, 255, 255, 0.5) !important;
}

/* Carousel bricht aus dem Bootstrap-Container heraus → 100% content-width */
body.page-1 .news:has(> .ed-hero-carousel) {
  width: 100%;
  margin: 0;
  padding: 0;
}
/* Alle Vorfahren-Container auf volle Breite setzen (inkl. BP .container und Section) */
body.page-1 .frame-inner:has(.ed-hero-carousel),
body.page-1 .frame-group-inner:has(.ed-hero-carousel),
body.page-1 .frame-group-container:has(.ed-hero-carousel),
body.page-1 .frame-container:has(.ed-hero-carousel),
body.page-1 .section:has(.ed-hero-carousel) > .container,
body.page-1 .section:has(.ed-hero-carousel) > .container-fluid,
body.page-1 .section:has(.ed-hero-carousel) > .container-xxl {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
/* BP setzt padding-top auf .frame → für den Hero-Frame aufheben */
body.page-1 .frame:has(.ed-hero-carousel) {
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ---- FALLBACK ohne :has() (für ältere Mobile-Browser) ----
   Greift auf frame-type-news_pi1 – auf der Startseite immer der Hero-Block */
body.page-1 .frame-type-news_pi1 {
  padding: 0 !important;
  width: 100% !important;
  /* Keine grauen Ränder sichtbar – Hintergrund schwarz wie Hero */
  background: #000 !important;
}
body.page-1 .frame-type-news_pi1 .frame-group-container,
body.page-1 .frame-type-news_pi1 .frame-group-inner,
body.page-1 .frame-type-news_pi1 .frame-container,
body.page-1 .frame-type-news_pi1 .frame-container-default,
body.page-1 .frame-type-news_pi1 .frame-inner,
body.page-1 .frame-type-news_pi1 .news {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  /* CSS-Variable überschreiben die BP für den Abstand nutzt */
  --frame-spacing: 0px;
  --frame-spacing-xs: 0px;
  --bs-gutter-x: 0px;
}
/* Section selbst soll keine seitlichen Abstände haben */
body.page-1 .section-light {
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: visible !important;
}
/* Full-Bleed-Notfall: Carousel springt aus verbliebenem Padding heraus
   Nur auf Mobile – Desktop hat Scrollbar (100vw ≠ clientWidth) */
@media (max-width: 991.98px) {
  body.page-1 .ed-hero-carousel {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
  }
}
/* Verhindert horizontalen Scrollbalken falls trotzdem leichtes Overflow */
body.page-1 { overflow-x: hidden; }

/* Mobile */
@media (max-width: 767.98px) {
  .ed-hero-caption {
    padding: 0 1.25rem 3.5rem;
    max-width: 100%;
    align-items: center;
  }
  .ed-hero-caption__teaser { display: none; }
}

/* ============================================================
   HERO CAROUSEL — Text-Einblend-Animation beim Slide-Wechsel
   ============================================================
   Ablauf je Slide:
   · t=0        → .active gesetzt, Bild faded von opacity 0→1 (0.85s)
   · t=0.30s    → Kategorie-Tag fährt von unten ein
   · t=0.50s    → Headline fährt von unten ein
   · t=0.70s    → Teaser fährt von unten ein
   · t=0.88s    → CTA-Button fährt von unten ein
   animation-fill-mode:both → Startzustand (opacity 0) gilt auch
   während der Verzögerung (kein Aufblitzen beim Slide-Wechsel)
   ============================================================ */

@keyframes ed-captionIn {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Standardmäßig versteckt — verhindert Aufblitzen vor dem Einfahren */
.ed-hero-carousel .carousel-item .ed-hero-caption__meta,
.ed-hero-carousel .carousel-item .ed-hero-caption__title,
.ed-hero-carousel .carousel-item .ed-hero-caption__teaser,
.ed-hero-carousel .carousel-item .ed-hero-caption__btn {
  opacity: 0;
}

.carousel-item.active .ed-hero-caption__meta {
  animation: ed-captionIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.30s both;
}
.carousel-item.active .ed-hero-caption__title {
  animation: ed-captionIn 0.60s cubic-bezier(0.22, 1, 0.36, 1) 0.50s both;
}
.carousel-item.active .ed-hero-caption__teaser {
  animation: ed-captionIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.70s both;
}
.carousel-item.active .ed-hero-caption__btn {
  animation: ed-captionIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.88s both;
}

/* Kein Underline auf dem Titel-Link */
.ed-hero-caption__title a,
.ed-hero-caption__title a:hover,
.ed-hero-caption__title a:focus {
  text-decoration: none;
  color: inherit;
}

/* ============================================================
   Startseiten-List-Box
   ============================================================ */

.ed-news-box {
  background: #0d0d0d;
  padding: 6rem 0 1.5rem;        /* schwarze Freiräume oben + unten */
}

/* BP fügt ::before/::after Gradient-Overlay auf .carousel-item hinzu → entfernen */
.ed-news-box .carousel-item::before,
.ed-news-box .carousel-item::after {
  display: none !important;
  content: none !important;
}

/* Keine Bootstrap-Slide-Transition – wir machen Custom-Morph */
.ed-news-box .carousel-item {
  transition: none !important;
}

/* Morph-Overlay-Bild: wird per JS animiert */
.ed-news-box__morph-img {
  display: none;
  position: absolute;
  z-index: 50;
  object-fit: cover;
  pointer-events: none;
  margin: 0;
  border-radius: 0;
  will-change: top, left, width, height, opacity;
}

/* Carousel-Steuerung */
.ed-news-box .carousel-control-prev,
.ed-news-box .carousel-control-next {
  width: 8%;
  opacity: 0.45;
  pointer-events: auto;
  z-index: 10;
  transition: opacity 0.2s;
  background: none;
}

.ed-news-box .carousel-control-prev:hover,
.ed-news-box .carousel-control-next:hover {
  opacity: 0.9;
}
.ed-news-box__slide {
  display: flex;
  align-items: stretch;
  height: 500px;          /* feste Höhe verhindert Layout-Shift beim Bildladen */
  max-height: 500px;
}

/* Linke Spalte: Hauptbild */
.ed-news-box__left {
  flex: 0 0 44%;
  max-width: 44%;
  position: relative;
  overflow: hidden;
  height: 100%;           /* füllt die fixe Slide-Höhe */
}

.ed-news-box__main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  flex-shrink: 0;
}

.ed-news-box__main-img--fallback {
  background: #1c1c1c;
  height: 100%;
}

/* Rechte Spalte: Inhalt */
.ed-news-box__right {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 2.5rem 3rem;
}

/* Preview nächste News: oben rechts */
.ed-news-box__preview-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  min-height: 200px;
  cursor: pointer;
}

.ed-news-box__preview-img {
  width: 280px;
  height: 175px;
  object-fit: cover;
  object-position: center;
  display: block;
}

.ed-news-box__preview-title {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  max-width: 280px;
  text-align: right;
}

/* Hauptinhalt: nach unten drücken */
.ed-news-box__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: auto;
}

/* Kategorie + Datum */
.ed-news-box__meta {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.85rem;
  color: var(--ed-red);
}

.ed-news-box__meta-sep {
  color: rgba(255, 255, 255, 0.35);
  margin: 0 0.25em;
}

.ed-news-box__meta-cat {
  color: var(--ed-red);
}

.ed-news-box__meta-date {
  color: rgba(255, 255, 255, 0.65);
}

/* Titel */
.ed-news-box__title {
  font-family: 'Bebas Neue', Impact, Arial Narrow, sans-serif !important;
  font-size: clamp(2rem, 4.5vw, 3.75rem);
  font-weight: 400;
  color: #fff !important;
  line-height: 1.0;
  margin-bottom: 1.25rem;
}

.ed-news-box__title a,
.ed-news-box__title a:hover,
.ed-news-box__title a:focus {
  color: #fff !important;
  text-decoration: none;
}

/* Teaser */
.ed-news-box__teaser {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95rem;
  line-height: 1.65;
  margin-bottom: 1.75rem;
  max-width: 520px;
}

/* CTA-Button (neon-rot, Bebas Neue, kein Radius) */
.ed-news-box__btn {
  display: inline-block;
  background: var(--ed-red);
  color: #fff !important;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.65rem 2.25rem;
  text-decoration: none !important;
  border-radius: 0;
  line-height: 1.2;
  transition: background 0.2s;
}

.ed-news-box__btn:hover {
  background: var(--ed-red-dark);
  color: #fff !important;
}

/* Slide: zwei Spalten nebeneinander */
/* Slide-Indikatoren (Dots) */
.ed-nb-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  padding: 3.1rem 0 0;
}

.ed-nb-dot {
  width: 24px;
  height: 3px;
  background: rgba(255, 255, 255, 0.22);
  border: none;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  transition: background 0.25s ease, width 0.3s ease;
  flex-shrink: 0;
}

.ed-nb-dot.active {
  background: var(--ed-red);
  width: 38px;
}

.ed-nb-dot:hover {
  background: rgba(255, 255, 255, 0.5);
}

.ed-nb-dot.active:hover {
  background: var(--ed-red);
}

@media (max-width: 767px) {
  .ed-news-box {
    padding: 2rem 0;
  }

  .ed-news-box__slide {
    flex-direction: column;
    min-height: auto;
  }

  .ed-news-box__left {
    flex: 0 0 260px;
    max-width: 100%;
    height: 260px;
  }

  .ed-news-box__right {
    padding: 1.5rem;
  }

  .ed-news-box__preview-wrap {
    display: none;
  }

  .ed-news-box .carousel-control-prev,
  .ed-news-box .carousel-control-next {
    width: 15%;
    top: 0;
    bottom: 0;
    height: auto;
  }
}

/* Barrierefreiheit: keine Animationen wenn Nutzer das bevorzugt */
@media (prefers-reduced-motion: reduce) {
  .ed-hero-carousel .carousel-item .ed-hero-caption__meta,
  .ed-hero-carousel .carousel-item .ed-hero-caption__title,
  .ed-hero-carousel .carousel-item .ed-hero-caption__teaser,
  .ed-hero-carousel .carousel-item .ed-hero-caption__btn {
    opacity: 1;
  }
  .carousel-item.active .ed-hero-caption__meta,
  .carousel-item.active .ed-hero-caption__title,
  .carousel-item.active .ed-hero-caption__teaser,
  .carousel-item.active .ed-hero-caption__btn {
    animation: none;
    transform: none;
  }
}