/* ==========================================================
   HERO – GRUNDAUFBAU
   Gilt für alle Hero-Bereiche der Website
   ========================================================== */

.onkologie-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: #b8b8b8;
}


/* ==========================================================
   DUNKLER VERLAUF FÜR BESSERE TEXTLESBARKEIT
   ========================================================== */

.onkologie-hero::before {
  content: "";
  position: absolute;
  inset: 0;

  z-index: 2;
  pointer-events: none;

  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.62) 28%,
    rgba(0, 0, 0, 0.42) 52%,
    rgba(0, 0, 0, 0.18) 75%,
    rgba(0, 0, 0, 0.06) 100%
  );
}


/* ==========================================================
   INHALTSZEILE MIT TEXT
   ========================================================== */

/*
 * Alle normalen Inhaltszeilen liegen über Bildern
 * und Verlauf.
 */
.onkologie-hero > .et_pb_row:not(.onkologie-hero-background-row) {
  position: relative;
  z-index: 3;
}


/* ==========================================================
   SEPARATE HINTERGRUNDZEILE
   ========================================================== */

.onkologie-hero > .onkologie-hero-background-row {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1;

  width: 100% !important;
  max-width: none !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  pointer-events: none;
}


/* ==========================================================
   DIVI-HÜLLEN AUF VOLLE FLÄCHE SETZEN
   ========================================================== */

.onkologie-hero-background-row > .et_pb_column,
.onkologie-hero-background-row .onkologie-hero-code,
.onkologie-hero-background-row .et_pb_code_inner,
.onkologie-hero-background-row .onkologie-hero-media {
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  max-width: none !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* ==========================================================
   HERO-TYPOGRAFIE – GLOBAL
   ========================================================== */

/* Hauptüberschrift */
.onkologie-hero h1,
.onkologie-hero .et_pb_text h1 {
  margin-top: 0;
  margin-bottom: 18px;

  font-size: 44px;
  line-height: 1.15 !important;

  color: #ffffff !important;

  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.55),
    0 6px 18px rgba(0, 0, 0, 0.25);
}


/* Kleine Zeile innerhalb der H1,
   z. B. „Über uns“, „Wissenswertes“ */
.onkologie-hero h1 .kleiner,
.onkologie-hero .et_pb_text h1 .kleiner {
  display: block;

  margin-bottom: -6px !important;

  font-size: 22px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.3;

  color: rgba(255, 255, 255, 0.96);

  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.55),
    0 4px 12px rgba(0, 0, 0, 0.20);
}


/* Untertitel */
.onkologie-hero .hero-subtitle {
  font-size: 20px !important;
  line-height: 1.55;

  color: #ffffff !important;

  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.65),
    0 4px 14px rgba(0, 0, 0, 0.28);
}


/* Fallback für Hero-Absätze ohne eigene Klasse */
.onkologie-hero .et_pb_text p:not(.hero-subtitle) {
  font-size: 20px;
  line-height: 1.55;

  color: #ffffff !important;

  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.55),
    0 4px 12px rgba(0, 0, 0, 0.22);
}

/* ==========================================================
   HERO-TYPOGRAFIE – TABLET
   ========================================================== */

@media only screen and (max-width: 980px) {

  .onkologie-hero h1,
  .onkologie-hero .et_pb_text h1 {
    font-size: 34px !important;
    line-height: 1.18 !important;

    margin-bottom: 16px;
  }

  .onkologie-hero h1 .kleiner,
  .onkologie-hero .et_pb_text h1 .kleiner {
    font-size: 20px !important;
    line-height: 1.3 !important;

    margin-bottom: -4px !important;
  }

  .onkologie-hero .hero-subtitle,
  .onkologie-hero .et_pb_text p:not(.hero-subtitle) {
    font-size: 17px;
    line-height: 1.5;
  }
}


/* ==========================================================
   HERO-TYPOGRAFIE – SMARTPHONE
   ========================================================== */

@media only screen and (max-width: 767px) {

  .onkologie-hero h1,
  .onkologie-hero .et_pb_text h1 {
    font-size: 26px !important;
    line-height: 1.18 !important;

    margin-bottom: 14px;
  }

  .onkologie-hero h1 .kleiner,
  .onkologie-hero .et_pb_text h1 .kleiner {
    font-size: 18px !important;
    line-height: 1.2 !important;

    margin-bottom: -8px !important;
  }

  .onkologie-hero .hero-subtitle,
  .onkologie-hero .et_pb_text p:not(.hero-subtitle) {
    font-size: 16px !important;
    line-height: 1.45 !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    color: #ffffff !important;
  }
    .onkologie-hero .onkologie-hero-content .et_pb_text {
      transform: translateY(-20px);
  }
}

/* ==========================================================
   HERO LEISTUNGSSPEKTRUM
   Etwas kräftigerer Verlauf wegen wechselnder Bilder
   ========================================================== */

.onkologie-hero.leistung-hero::before {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.76) 0%,
    rgba(0, 0, 0, 0.68) 24%,
    rgba(0, 0, 0, 0.50) 46%,
    rgba(0, 0, 0, 0.25) 70%,
    rgba(0, 0, 0, 0.08) 100%
  );
}


/* ==========================================================
   BREITERER TEXTBEREICH IM HERO LEISTUNGSSPEKTRUM
   ========================================================== */

.onkologie-hero.leistung-hero
.onkologie-hero-content
.et_pb_text {
  max-width: 900px;
}

.onkologie-hero.leistung-hero .hero-subtitle {
  max-width: 900px;
}

@media (max-width: 980px) {

  .onkologie-hero.leistung-hero
  .onkologie-hero-content
  .et_pb_text,
  .onkologie-hero.leistung-hero .hero-subtitle {
    max-width: 100%;
  }
}


/* ==========================================================
   SLIDES UND WEICHE ÜBERBLENDUNG
   ========================================================== */

.onkologie-hero-slide {
  position: absolute !important;
  inset: 0 !important;

  z-index: 1;
  opacity: 0;
  visibility: hidden;

  transition:
    opacity 2.6s ease-in-out,
    visibility 0s linear 2.6s;

  will-change: opacity;
}

.onkologie-hero-slide.is-active {
  z-index: 3;
  opacity: 1;
  visibility: visible;

  transition:
    opacity 2.6s ease-in-out,
    visibility 0s linear 0s;
}

/*
 * Das ausblendende Bild bleibt während des Crossfades
 * sichtbar und behält seine aktuelle Transformationsposition.
 */
.onkologie-hero-slide.is-leaving {
  z-index: 2;
  opacity: 0;
  visibility: visible;

  transition:
    opacity 2.6s ease-in-out,
    visibility 0s linear 2.6s;
}

.onkologie-hero-slide img {
  position: absolute;
  inset: 0;

  display: block;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;

  object-fit: cover;
  object-position: center center;

  transform-origin: center center;
  backface-visibility: hidden;
  will-change: transform;
}


/* ==========================================================
   KEN-BURNS-EFFEKT
   ========================================================== */

/*
 * Die Animation wird ausschließlich über die Klasse
 * ".is-animating" gestartet. Dadurch bleibt das Bild während
 * des Ausblendens in seiner aktuellen Position und springt
 * nicht sichtbar zurück.
 */

/* Startzustand des ersten Hero-Bildes vor der JS-Initialisierung */
.onkologie-hero-slide:first-child img {
  transform: scale(1.02) translate3d(-0.5%, 0.5%, 0);
}

.onkologie-hero-slide:nth-child(1).is-animating img {
  animation: onko-kenburns-01 21s linear forwards;
}

.onkologie-hero-slide:nth-child(2).is-animating img {
  animation: onko-kenburns-02 21s linear forwards;
}

.onkologie-hero-slide:nth-child(3).is-animating img {
  animation: onko-kenburns-03 21s linear forwards;
}

.onkologie-hero-slide:nth-child(4).is-animating img {
  animation: onko-kenburns-04 21s linear forwards;
}


/* ==========================================================
   KEYFRAMES
   ========================================================== */

@keyframes onko-kenburns-01 {
  from {
    transform: scale(1.02) translate3d(-0.5%, 0.5%, 0);
  }

  to {
    transform: scale(1.09) translate3d(1%, -1%, 0);
  }
}

@keyframes onko-kenburns-02 {
  from {
    transform: scale(1.09) translate3d(1%, -0.5%, 0);
  }

  to {
    transform: scale(1.02) translate3d(-1%, 0.5%, 0);
  }
}

@keyframes onko-kenburns-03 {
  from {
    transform: scale(1.02) translate3d(0, 1%, 0);
  }

  to {
    transform: scale(1.08) translate3d(0, -1%, 0);
  }
}

@keyframes onko-kenburns-04 {
  from {
    transform: scale(1.08) translate3d(-0.5%, -0.5%, 0);
  }

  to {
    transform: scale(1.02) translate3d(1%, 0.5%, 0);
  }
}


/* ==========================================================
   HERO-INHALT POSITIONIEREN
   ========================================================== */

.onkologie-hero .onkologie-hero-content {
  position: relative;
  z-index: 3;

  width: 80%;
  max-width: 1280px;

  display: flex;
  align-items: center;

  margin: 0 auto;
  padding-top: 20px;
  padding-bottom: 20px;
}

/* Linke Textspalte */
.onkologie-hero .onkologie-hero-content .et_pb_column:first-child {
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding-left: 2%;
}

/* Textmodul */
.onkologie-hero .onkologie-hero-content .et_pb_text {
  margin-left: 0;
  max-width: 720px;
}


/* ==========================================================
   HERO-INHALT – TABLET UND SMARTPHONE
   ========================================================== */

@media (max-width: 980px) {

  .onkologie-hero h1 {
    opacity: 0;
    transform: translateY(20px);

    animation: heroHeadline 0.8s ease forwards;
    animation-delay: 1.2s;
  }

  .onkologie-hero p {
    opacity: 0;
    transform: translateY(20px);

    animation: heroHeadline 0.8s ease forwards;
    animation-delay: 1.5s;
  }
}

@keyframes heroHeadline {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ==========================================================
   KEN-BURNS-EFFEKT – SMARTPHONE
   ========================================================== */

@media only screen and (max-width: 767px) {

  .onkologie-hero-slide:nth-child(1).is-animating img {
    animation-name: onko-kenburns-mobile-01;
  }

  .onkologie-hero-slide:nth-child(2).is-animating img {
    animation-name: onko-kenburns-mobile-02;
  }

  .onkologie-hero-slide:nth-child(3).is-animating img {
    animation-name: onko-kenburns-mobile-03;
  }

  .onkologie-hero-slide:nth-child(4).is-animating img {
    animation-name: onko-kenburns-mobile-04;
  }
}


/* ==========================================================
   KEYFRAMES – SMARTPHONE
   ========================================================== */

@keyframes onko-kenburns-mobile-01 {
  from {
    transform: scale(1.03);
  }

  to {
    transform: scale(1.07) translate3d(0.5%, -0.5%, 0);
  }
}

@keyframes onko-kenburns-mobile-02 {
  from {
    transform: scale(1.07);
  }

  to {
    transform: scale(1.03) translate3d(-0.5%, 0, 0);
  }
}

@keyframes onko-kenburns-mobile-03 {
  from {
    transform: scale(1.03);
  }

  to {
    transform: scale(1.07) translate3d(0, -0.5%, 0);
  }
}

@keyframes onko-kenburns-mobile-04 {
  from {
    transform: scale(1.07);
  }

  to {
    transform: scale(1.03) translate3d(0.5%, 0.5%, 0);
  }
}


/* ==========================================================
   REDUZIERTE BEWEGUNG
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  .onkologie-hero-slide,
  .onkologie-hero-slide.is-active,
  .onkologie-hero-slide.is-leaving {
    transition: none !important;
  }

  .onkologie-hero-slide img,
  .onkologie-hero-slide.is-animating img,
  .onkologie-hero h1,
  .onkologie-hero p {
    animation: none !important;
    transform: none;
  }

  .onkologie-hero h1,
  .onkologie-hero p {
    opacity: 1;
  }
}