/* BOO-397 Intentron Hero Overlay — OWLIST-Header mit Eulen-Matrix
   Quelle: intentron-owlist-header-prototype.html (QA pass1-pass8 gruen)
   v4 2026-07-09: Blend-Bild ohne Gebaeudestreifen (rechts 190px beschnitten); v3: Owlist-Rezept 1:1 — Foto ungecrusht, Blend voll, 50%-Schwarz-Layer entfernt
   Mapping: .ow-* -> Live-Struktur .itn-apple-hero / .itn-hero-copy / .itn-b397-*
   Spezifitaet bewusst hoch (html body ...), damit Overrides gegen
   intentron-hero-cls-guard-css und Shared-CSS gewinnen. */

/* == Hero-Rahmen ==================================================== */
html body .itn-page .itn-apple-hero {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  min-height: 100svh !important;
  padding: 0 !important;
  background: #080604 !important;
  background-image: none !important;
  color: #f7f1e6 !important;
}

/* Alte Visuals hart aus (V3/V4/Produkt-Stage) */
html body .itn-page .itn-apple-hero .itn-product-stage,
html body .itn-page .itn-apple-hero .itn-hero-motion,
html body .itn-page .itn-apple-hero .itn-cinematic-field,
html body .itn-page .itn-apple-hero .itn-v3-abstract-field,
html body .itn-page .itn-apple-hero .itn-v4-alpine-field {
  display: none !important;
}

/* == Hintergrund-Ebenen ============================================= */
html body .itn-page .itn-b397-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #080604;
  display: block !important;
}

html body .itn-page .itn-b397-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  filter: saturate(.9) contrast(1.03) brightness(.98);
  transform: scale(1.015);
}

html body .itn-page .itn-b397-photo img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center bottom !important;
}

html body .itn-page .itn-b397-effect {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .16;
  isolation: isolate;
  will-change: transform;
  background-color: #000;
  background-image: url("https://cdn.prod.website-files.com/6a4aa985e86b0a4d387695e2/6a4f836cc5f01ddbd84e4991_intentron-owlist-index-bg-v2.avif");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  mix-blend-mode: hard-light;
}

@supports not (mix-blend-mode: hard-light) {
  html body .itn-page .itn-b397-effect {
    opacity: .14;
    filter: saturate(.7) brightness(1.02) contrast(1.03);
  }
}

html body .itn-page .itn-b397-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(rgba(0,0,0,.20),rgba(0,0,0,.20)), linear-gradient(180deg, rgba(0,0,0,.04), transparent 44%, rgba(0,0,0,.46));
}

html body .itn-page .itn-b397-keywords {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: screen;
}

html body .itn-page .itn-b397-canvas {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* == Wordcloud ====================================================== */
html body .itn-page .itn-b397-kw {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity .6s ease .12s;
  color: rgba(255, 242, 194, var(--a));
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(8.5px, .72vw, 12px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .14em;
  white-space: nowrap;
  text-shadow: 0 0 8px rgba(244, 215, 140, .1);
}

html body .itn-page .itn-b397-keywords.is-ready .itn-b397-kw {
  opacity: 1;
}

/* == Content-Block (Live-Elemente, OWLIST-Anordnung unten links) ==== */
html body .itn-page .itn-apple-hero .itn-hero-copy {
  position: relative !important;
  z-index: 10 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-content: end !important;
  width: min(100%, 1440px) !important;
  max-width: none !important;
  min-height: 100svh !important;
  margin: 0 auto !important;
  padding: clamp(112px, 15vh, 168px) clamp(22px, 5vw, 72px) clamp(76px, 9vh, 116px) !important;
  text-align: left !important;
  column-gap: 24px !important;
}

html body .itn-page .itn-apple-hero .itn-hero-logo {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: start;
  display: block !important;
  width: min(226px, 40vw) !important;
  max-height: none !important;
  height: auto !important;
  margin: 0 0 34px !important;
  filter: brightness(1.12) contrast(1.05) saturate(1.06) drop-shadow(0 18px 54px rgba(230, 151, 29, .16)) !important;
}

html body .itn-page .itn-apple-hero .itn-brand-claim {
  grid-column: 1 / -1;
  grid-row: 2;
  display: block !important;
  margin: 0 0 44px !important;
  color: rgba(247, 241, 230, .78) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: clamp(12px, .95vw, 15px) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: .28em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  text-shadow: 0 14px 42px rgba(0, 0, 0, .62) !important;
}

html body .itn-page .itn-apple-hero .itn-b397-heading {
  grid-column: 1 / -1;
  grid-row: 3;
  margin: 0 0 clamp(18px, 2.2vh, 28px) !important;
  max-width: none !important;
  color: #f4d78c !important;
  font-family: "PP Rader", Poppins, Arial, sans-serif !important;
  font-size: clamp(72px, 8.5vw, 132px) !important;
  font-weight: 800 !important;
  line-height: .9 !important;
  letter-spacing: 0 !important;
  text-wrap: balance;
  text-shadow: 0 24px 80px rgba(0, 0, 0, .58) !important;
}

html body .itn-page .itn-apple-hero .itn-b397-heading span {
  display: block !important;
  color: #f7f1e6 !important;
  white-space: nowrap !important;
}

html body .itn-page .itn-apple-hero .itn-b397-divider {
  grid-column: 1 / -1;
  grid-row: 4;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, .3);
  margin: 0 0 clamp(18px, 2.2vh, 28px);
}

html body .itn-page .itn-apple-hero .itn-lead-light {
  grid-column: 2;
  grid-row: 5;
  align-self: start;
  margin: 0 !important;
  max-width: 560px !important;
  color: rgba(247, 241, 230, .8) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: clamp(17px, 1.35vw, 21px) !important;
  line-height: 1.45 !important;
  word-spacing: normal !important;
  text-shadow: 0 20px 60px rgba(0, 0, 0, .62) !important;
}

html body .itn-page .itn-apple-hero .itn-hero-actions {
  grid-column: 1;
  grid-row: 5;
  align-self: start;
  justify-self: start;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 14px !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
}

html body .itn-page .itn-apple-hero .itn-button-primary,
html body .itn-page .itn-apple-hero .itn-button-secondary {
  width: auto !important;
  min-width: 158px !important;
  min-height: 50px !important;
  padding: 0 24px !important;
  white-space: nowrap !important;
}

/* == Flache Viewports (Desktop) ===================================== */
@media (max-height: 780px) and (min-width: 992px) {
  html body .itn-page .itn-apple-hero .itn-hero-copy {
    padding-top: 96px !important;
    padding-bottom: 56px !important;
  }

  html body .itn-page .itn-apple-hero .itn-b397-heading {
    font-size: clamp(68px, 8.2vw, 118px) !important;
  }

  html body .itn-page .itn-apple-hero .itn-lead-light {
    grid-column: 1;
    grid-row: 5;
    font-size: 18px !important;
  }

  html body .itn-page .itn-apple-hero .itn-hero-actions {
    grid-column: 2;
    grid-row: 5;
    justify-self: end;
  }
}

/* == Mobile / Tablet ================================================ */
@media (max-width: 991px) {
  html body .itn-page .itn-apple-hero .itn-hero-copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    padding: 98px 22px 68px !important;
  }

  html body .itn-page .itn-apple-hero .itn-hero-logo {
    order: 1;
    width: min(164px, 46vw) !important;
    margin: 0 0 16px !important;
  }

  html body .itn-page .itn-apple-hero .itn-brand-claim {
    order: 2;
    margin: 0 0 28px !important;
  }

  html body .itn-page .itn-apple-hero .itn-b397-heading {
    order: 3;
    max-width: 540px !important;
    font-size: clamp(52px, 9vw, 86px) !important;
  }

  html body .itn-page .itn-apple-hero .itn-b397-divider {
    order: 4;
    margin: 0 0 18px;
  }

  html body .itn-page .itn-apple-hero .itn-lead-light {
    order: 5;
    max-width: 430px !important;
    margin: 0 0 22px !important;
  }

  html body .itn-page .itn-apple-hero .itn-hero-actions {
    order: 6;
  }

  html body .itn-page .itn-b397-kw {
    font-size: 9px;
    letter-spacing: .08em;
  }
}

@media (max-width: 767px) {
  html body .itn-page .itn-apple-hero .itn-brand-claim {
    font-size: 10px !important;
    letter-spacing: .18em !important;
  }

  html body .itn-page .itn-apple-hero .itn-b397-heading {
    font-size: clamp(50px, 12.6vw, 70px) !important;
  }

  html body .itn-page .itn-apple-hero .itn-lead-light {
    font-size: 15.5px !important;
    line-height: 1.36 !important;
  }

  html body .itn-page .itn-apple-hero .itn-button-primary,
  html body .itn-page .itn-apple-hero .itn-button-secondary {
    flex: 0 1 auto !important;
    min-width: 142px !important;
    min-height: 48px !important;
    padding: 0 17px !important;
    font-size: 11px !important;
  }
}

/* == Reduced Motion ================================================= */
@media (prefers-reduced-motion: reduce) {
  html body .itn-page .itn-b397-kw {
    transition: none;
  }

  html body .itn-page .itn-b397-canvas {
    opacity: .36;
  }
}