/* =====================================
   Intro Hero 2
   - Aurora version
   - isolated component
   - trees always black
   - logo always white
===================================== */

.intro-hero-2.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: none;
}

.intro-hero-2 {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: #000;
  overflow: hidden;

  --intro-hero-2-glade-height: clamp(220px, 34vh, 430px);
  --intro-hero-2-glade-ellipse-width: 165%;
  --intro-hero-2-glade-ellipse-height: 78%;
  --intro-hero-2-glade-ellipse-bottom: 22%;
  --intro-hero-2-glade-rect-top: calc(
    var(--intro-hero-2-glade-ellipse-bottom) + (var(--intro-hero-2-glade-ellipse-height) * 0.5)
  );

  --intro-hero-2-logo-top: 56px;
}

@media (max-width: 699px) {
  .intro-hero-2 {
    --intro-hero-2-glade-height: 40vh;
    --intro-hero-2-glade-ellipse-width: 195%;
    --intro-hero-2-glade-ellipse-height: 96%;
    --intro-hero-2-glade-ellipse-bottom: 26%;
    --intro-hero-2-glade-rect-top: calc(
      var(--intro-hero-2-glade-ellipse-bottom) + (var(--intro-hero-2-glade-ellipse-height) * 0.46)
    );

    --intro-hero-2-logo-top: 40px;
  }
}

@media (min-width: 700px) and (max-width: 1099px) {
  .intro-hero-2 {
    --intro-hero-2-glade-height: clamp(250px, 32vh, 460px);
    --intro-hero-2-glade-ellipse-width: 150%;
    --intro-hero-2-glade-ellipse-height: 80%;
    --intro-hero-2-glade-ellipse-bottom: 22%;
    --intro-hero-2-glade-rect-top: calc(
      var(--intro-hero-2-glade-ellipse-bottom) + (var(--intro-hero-2-glade-ellipse-height) * 0.5)
    );
  }
}

@media (min-width: 1100px) {
  .intro-hero-2 {
    --intro-hero-2-glade-height: clamp(280px, 34vh, 500px);
    --intro-hero-2-glade-ellipse-width: 132%;
    --intro-hero-2-glade-ellipse-height: 74%;
    --intro-hero-2-glade-ellipse-bottom: 24%;
    --intro-hero-2-glade-rect-top: calc(
      var(--intro-hero-2-glade-ellipse-bottom) + (var(--intro-hero-2-glade-ellipse-height) * 0.5)
    );
  }
}

@media (orientation: landscape) {
  .intro-hero-2 {
    min-height: 115svh;
  }
}

@media (orientation: landscape) and (min-width: 900px) {
  .intro-hero-2 {
    min-height: 125svh;
  }
}

/* =====================================
   Scene
===================================== */

.intro-hero-2__scene {
  position: relative;
  min-height: inherit;
}

.intro-hero-2__base {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #02070d;
}

/* =====================================
   Aurora
===================================== */

/* =====================================
   Aurora
   - stronger / richer / calmer swirl
===================================== */

.intro-hero-2__aurora {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;

  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,1) 12%,
    rgba(0,0,0,1) 72%,
    rgba(0,0,0,0) 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,1) 12%,
    rgba(0,0,0,1) 72%,
    rgba(0,0,0,0) 100%
  );
}

.intro-hero-2__band {
  position: absolute;
  left: 50%;
  top: -12%;
  width: 170vw;
  height: 62vh;
  transform: translateX(-50%);
  filter: blur(30px);
  mix-blend-mode: screen;
  opacity: 0.42;
  will-change: transform, opacity, filter;
}

/* äußere Form */
.intro-hero-2__band::before,
/* innere Lichtader */
.intro-hero-2__band::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}

.intro-hero-2__band::after {
  inset: 10% 12% 18% 12%;
  filter: blur(18px);
  opacity: 0.85;
}

/* Band 1 */
.intro-hero-2__band--1 {
  top: -6%;
  width: 152vw;
  height: 56vh;
  opacity: 0.50;
}

.intro-hero-2__band--1::before {
  background: linear-gradient(
    to bottom,
    rgba(0, 102, 51, 0.00) 0%,
    rgba(0, 102, 51, 0.22) 14%,
    rgba(144, 186, 77, 0.34) 32%,
    rgba(144, 186, 77, 0.42) 46%,
    rgba(116, 166, 255, 0.28) 68%,
    rgba(116, 166, 255, 0.00) 100%
  );
}

.intro-hero-2__band--1::after {
  background: linear-gradient(
    to bottom,
    rgba(144, 186, 77, 0.00) 0%,
    rgba(144, 186, 77, 0.18) 18%,
    rgba(243, 236, 1, 0.10) 38%,
    rgba(116, 166, 255, 0.16) 68%,
    rgba(116, 166, 255, 0.00) 100%
  );
}

/* Band 2 */
.intro-hero-2__band--2 {
  top: -11%;
  width: 138vw;
  height: 60vh;
  opacity: 0.42;
}

.intro-hero-2__band--2::before {
  background: linear-gradient(
    to bottom,
    rgba(116, 166, 255, 0.00) 0%,
    rgba(116, 166, 255, 0.24) 16%,
    rgba(116, 166, 255, 0.28) 34%,
    rgba(238, 114, 158, 0.20) 56%,
    rgba(253, 99, 80, 0.16) 74%,
    rgba(253, 99, 80, 0.00) 100%
  );
}

.intro-hero-2__band--2::after {
  background: linear-gradient(
    to bottom,
    rgba(116, 166, 255, 0.00) 0%,
    rgba(255, 255, 255, 0.10) 24%,
    rgba(238, 114, 158, 0.14) 52%,
    rgba(253, 170, 2, 0.10) 74%,
    rgba(253, 170, 2, 0.00) 100%
  );
}

/* Band 3 */
.intro-hero-2__band--3 {
  top: -3%;
  width: 176vw;
  height: 52vh;
  opacity: 0.28;
}

.intro-hero-2__band--3::before {
  background: linear-gradient(
    to bottom,
    rgba(243, 236, 1, 0.00) 0%,
    rgba(243, 236, 1, 0.10) 10%,
    rgba(253, 170, 2, 0.14) 22%,
    rgba(238, 114, 158, 0.18) 42%,
    rgba(116, 166, 255, 0.18) 60%,
    rgba(144, 186, 77, 0.14) 78%,
    rgba(0, 102, 51, 0.00) 100%
  );
}

.intro-hero-2__band--3::after {
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.00) 0%,
    rgba(255,255,255,0.08) 24%,
    rgba(116,166,255,0.12) 52%,
    rgba(144,186,77,0.10) 76%,
    rgba(144,186,77,0.00) 100%
  );
}

@media (max-width: 699px) {
  .intro-hero-2__band {
    width: 205vw;
    height: 44vh;
    filter: blur(22px);
    opacity: 0.38;
  }

  .intro-hero-2__band--1 {
    width: 220vw;
    height: 42vh;
    opacity: 0.46;
  }

  .intro-hero-2__band--2 {
    width: 190vw;
    height: 45vh;
    opacity: 0.38;
  }

  .intro-hero-2__band--3 {
    width: 226vw;
    height: 40vh;
    opacity: 0.24;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-hero-2__band {
    transform: translateX(-50%) !important;
    filter: blur(24px);
    opacity: 0.26;
  }
}

/* =====================================
   Content
===================================== */

.intro-hero-2__content {
  position: relative;
  min-height: inherit;
}

/* =====================================
   Logo
   - fixed
   - always white
===================================== */

.intro-hero-2__logo {
  position: fixed;
  top: var(--intro-hero-2-logo-top);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;

  display: flex;
  justify-content: center;
  pointer-events: none;
}

.intro-hero-2__logo svg {
  width: clamp(220px, 34vw, 520px);
  height: auto;
  display: block;
}

.intro-hero-2__logo .path-rh,
.intro-hero-2__logo .path-lh,
.intro-hero-2__logo .branding-title {
  fill: #fff !important;
  animation: none !important;
}

/* =====================================
   Trees
   - always black
===================================== */

.intro-hero-2__layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.intro-hero-2__layer--trees {
  z-index: 20;
}

.intro-hero-2__layer--trees > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}



/* =====================================
   Intro Hero 2
   Trees wirklich hart auf schwarz zwingen
   -> ganz ans Ende der Datei setzen
===================================== */

.intro-hero-2__layer--trees,
.intro-hero-2__layer--trees svg,
.intro-hero-2__layer--trees g,
.intro-hero-2__layer--trees path,
.intro-hero-2__layer--trees use {
  animation: none !important;
  transition: none !important;
}

/* alle bekannten Tree-Klassen */
.intro-hero-2__layer--trees .trees_green_bright,
.intro-hero-2__layer--trees .trees_green,
.intro-hero-2__layer--trees .trees_green_dark,
.intro-hero-2__layer--trees .layer--trees .trees_green_bright,
.intro-hero-2__layer--trees .layer--trees .trees_green,
.intro-hero-2__layer--trees .layer--trees .trees_green_dark {
  fill: #000 !important;
  stroke: none !important;
}

/* Fallback: alle Tree-Pfade im Trees-Layer schwarz */
.intro-hero-2__layer--trees svg path[class*="trees_"],
.intro-hero-2__layer--trees svg [class*="trees_"] {
  fill: #000 !important;
  stroke: none !important;
}

/* Falls das Trees-SVG über currentColor oder color arbeitet */
.intro-hero-2__layer--trees {
  color: #000 !important;
}

/* =====================================
   Glade
===================================== */

.intro-hero-2__glade {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 30;
  overflow: hidden;
  pointer-events: none;
}

.intro-hero-2__glade-shape {
  position: relative;
  width: 100%;
  height: var(--intro-hero-2-glade-height);
}

.intro-hero-2__glade-shape::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: var(--intro-hero-2-glade-ellipse-bottom);
  transform: translateX(-50%);

  width: var(--intro-hero-2-glade-ellipse-width);
  height: var(--intro-hero-2-glade-ellipse-height);
  border-radius: 50%;
  background: #fff;
}

.intro-hero-2__glade-shape::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  top: var(--intro-hero-2-glade-rect-top);
  background: #fff;
}

/* =====================================
   Tagline
===================================== */

.intro-hero-2__tagline {
  position: absolute;
  left: 50%;
  bottom: calc(var(--intro-hero-2-glade-height) * 0.5);
  transform: translate(-50%, 50%);

  z-index: 40;

  width: min(720px, 70vw);
  padding: 0 16px;

  font-family: var(--font-dyslexic, "OpenDyslexic", system-ui, sans-serif);
  font-size: clamp(14px, 1.5vw, 18px);
  line-height: 1.75;
  letter-spacing: 0.01em;
  text-align: center;
  color: #000;

  pointer-events: none;
}

@media (max-width: 699px) {
  .intro-hero-2__tagline {
    width: calc(100vw - 32px);
  }
}

@media (min-width: 900px) {
  .intro-hero-2__tagline {
    width: min(760px, 60vw);
  }
}

/* =====================================
   Reduced motion
===================================== */

@media (prefers-reduced-motion: reduce) {
  .intro-hero-2__band {
    animation: none !important;
    transform: translateX(-50%) !important;
    opacity: 0.18;
    filter: blur(24px);
  }
}