/* =====================================================================
   About-Hero — Vanilla-Port (Tailark) für die Über-uns-Seite
   Blur-In-Stagger + gerahmtes Bild-Mockup. Gekapselt unter .about-hero.
   ===================================================================== */
.about-hero {
  position: relative;
  padding: clamp(130px, 16vw, 175px) 0 0;
  overflow: hidden;
}
.about-hero::before { display: none; } /* falls page-hero-Reste */
.about-hero .ah-bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 55% at 50% 0%, rgba(30,155,240,.12), transparent 62%);
}
.about-hero .ah-wrap { max-width: 1040px; }

.about-hero .crumbs { margin-bottom: 20px; }

.ah-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.0;
  font-size: clamp(2.6rem, 6vw, 4.7rem);
  margin: 8px 0 0;
  max-width: 18ch;
  text-wrap: balance;
}
.about-hero .lead { margin-top: 24px; max-width: 60ch; }

.ah-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }

.ah-frame {
  position: relative;
  margin: clamp(34px, 5vw, 72px) auto 0;
  max-width: 1000px;
  border-radius: 22px;
  border: 1px solid var(--line-d-strong);
  background: linear-gradient(165deg, var(--panel-2), var(--panel));
  padding: 10px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.ah-frame img {
  display: block; width: 100%; aspect-ratio: 15 / 8; object-fit: cover;
  border-radius: 14px; border: 1px solid var(--line-d);
  filter: saturate(.92) contrast(1.03);
}
.ah-frame-fade {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: 22px;
  background: linear-gradient(to bottom, transparent 36%, var(--night));
}

/* Blur-In-Reveal (staggered über --d) */
.ah-i { opacity: 0; }
@keyframes ahIn {
  from { opacity: 0; filter: blur(12px); transform: translateY(14px); }
  to   { opacity: 1; filter: blur(0);    transform: none; }
}
.about-hero .ah-i { animation: ahIn .9s var(--ease-out) var(--d, 0s) both; }

@media (prefers-reduced-motion: reduce) {
  .about-hero .ah-i { animation: none; opacity: 1; filter: none; transform: none; }
}

/* =====================================================================
   Über-uns Hero-Video (uu-hero-video.js) — kinoreifer Vanilla-Player.
   ===================================================================== */
.uu-video-hero {
  position: relative;
  padding: clamp(104px, 14vw, 148px) 0 clamp(8px, 2vw, 22px);
  overflow: hidden;
}
.uu-video-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(74% 60% at 50% 10%, rgba(30,155,240,.16), transparent 64%);
}
.uu-video-hero + .about-hero { padding-top: clamp(48px, 7vw, 90px); }
/* Reuse auf ki-automationen/leistungen: Video steht vor .page-hero; deren 190px-
   Header-Freiraum ist dann doppelt (Video-Section räumt den fixen Header schon
   frei) -> Top-Padding reduzieren. */
.uu-video-hero + .page-hero { padding-top: clamp(40px, 6vw, 76px); }

/* Tonlose Videos (data-silent, z.B. KI-Automationen/Leistungen): kein Stumm-
   Knopf, kein „Ton einschalten"-Prompt. Big-Play ist reine Play-Affordanz —
   sichtbar nur wenn pausiert, beim Abspielen komplett aus (kein Puls). */
.uu-video-hero[data-silent] .uuv-mute,
.uu-video-hero[data-silent] .uuv-bigplay .bp-sound { display: none; }
.uu-video-hero[data-silent].is-playing .uuv-bigplay {
  opacity: 0; transform: scale(.9); pointer-events: none; animation: none;
}

.uuv-shell { max-width: 1120px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); }

.uuv-frame {
  position: relative;
  border-radius: 22px;
  border: 1px solid var(--line-d-strong);
  background: linear-gradient(165deg, var(--panel-2), var(--panel));
  padding: 10px;
  box-shadow: var(--shadow-card), 0 44px 120px -46px rgba(30,120,220,.55);
  overflow: hidden;
  outline: none;
}
.uuv-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(190,220,255,.14);
}
.uuv-video {
  display: block; width: 100%; aspect-ratio: 16 / 9; height: auto;
  object-fit: cover; border-radius: 14px; border: 1px solid var(--line-d);
  background: #04070f; cursor: pointer;
}

/* Großer Center-Button: Play (pausiert) bzw. „Ton an" (spielt stumm) */
.uuv-bigplay {
  position: absolute; z-index: 4; inset: 0; margin: auto;
  width: max-content; height: max-content;
  display: inline-flex; align-items: center; gap: 11px;
  padding: 14px 24px 14px 19px; border-radius: 999px;
  border: 1px solid rgba(160,205,255,.5);
  background: rgba(10,20,38,.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #eaf3ff; font: 600 .92rem/1 var(--font-display, sans-serif); letter-spacing: .01em; cursor: pointer;
  box-shadow: 0 18px 50px -16px rgba(20,110,220,.7);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out), background .3s, border-color .3s;
}
.uuv-bigplay:hover { background: rgba(20,40,74,.8); border-color: rgba(190,220,255,.85); transform: scale(1.04); }
.uuv-bigplay svg { width: 25px; height: 25px; flex: none; }
.uuv-bigplay .bp-sound { display: none; }
.uu-video-hero.is-playing.is-muted .uuv-bigplay .bp-play { display: none; }
.uu-video-hero.is-playing.is-muted .uuv-bigplay .bp-sound { display: inline-flex; align-items: center; gap: 11px; }
.uu-video-hero.is-playing:not(.is-muted) .uuv-bigplay { opacity: 0; transform: scale(.9); pointer-events: none; }
@keyframes uuvPulse { 0%,100% { box-shadow: 0 18px 50px -16px rgba(20,110,220,.7); } 50% { box-shadow: 0 20px 66px -12px rgba(44,146,255,.95); } }
.uu-video-hero.is-playing.is-muted .uuv-bigplay { animation: uuvPulse 2.6s var(--ease-out) infinite; }

/* Steuerleiste */
.uuv-controls {
  position: absolute; z-index: 5; left: 10px; right: 10px; bottom: 10px;
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 14px;
  background: linear-gradient(to top, rgba(6,11,22,.88), rgba(6,11,22,.48));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(150,190,255,.16);
  opacity: 0; transform: translateY(12px);
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.uuv-frame:hover .uuv-controls,
.uuv-frame:focus-within .uuv-controls,
.uu-video-hero:not(.is-playing) .uuv-controls,
.uu-video-hero.show-controls .uuv-controls { opacity: 1; transform: none; }

.uuv-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid transparent; background: rgba(255,255,255,.06);
  color: #eaf3ff; cursor: pointer; transition: background .25s, border-color .25s, transform .18s;
}
.uuv-btn:hover { background: rgba(46,123,255,.26); border-color: rgba(150,190,255,.5); }
.uuv-btn:active { transform: scale(.92); }
.uuv-btn svg { width: 19px; height: 19px; }
.uuv-play .ic-pause { display: none; }
.uu-video-hero.is-playing .uuv-play .ic-play { display: none; }
.uu-video-hero.is-playing .uuv-play .ic-pause { display: block; }
.uuv-mute .ic-off { display: none; }
.uu-video-hero.is-muted .uuv-mute .ic-on { display: none; }
.uu-video-hero.is-muted .uuv-mute .ic-off { display: block; }
.uu-video-hero.is-muted .uuv-mute { background: rgba(46,123,255,.32); border-color: rgba(150,190,255,.55); }

.uuv-progress {
  position: relative; flex: 1 1 auto; height: 6px; border-radius: 999px;
  background: rgba(255,255,255,.16); cursor: pointer; outline: none;
}
.uuv-progress:focus-visible { box-shadow: 0 0 0 3px rgba(46,123,255,.5); }
.uuv-fill {
  position: absolute; left: 0; top: 0; height: 100%; width: 0;
  border-radius: 999px; background: linear-gradient(90deg, #3aa0f5, #7cc4ff);
}
.uuv-fill::after {
  content: ""; position: absolute; right: -5px; top: 50%; transform: translateY(-50%);
  width: 12px; height: 12px; border-radius: 50%; background: #eaf3ff;
  box-shadow: 0 0 10px rgba(120,190,255,.9);
}
.uuv-time { flex: none; font: 500 .78rem/1 var(--font-mono, monospace); color: #b9d0ee; letter-spacing: .02em; font-variant-numeric: tabular-nums; }

@keyframes uuvIn { from { opacity: 0; filter: blur(14px); transform: translateY(18px); } to { opacity: 1; filter: none; transform: none; } }
.uuv-shell { animation: uuvIn 1s var(--ease-out) both; }

@media (max-width: 640px) {
  /* Full-bleed: Video randlos & so groß wie möglich */
  .uu-video-hero { padding-left: 0; padding-right: 0; }
  .uuv-shell { max-width: none; padding: 0; }
  .uuv-frame { border-radius: 0; border-left: 0; border-right: 0; padding: 0; box-shadow: 0 26px 60px -30px rgba(30,120,220,.5); }
  .uuv-frame::after { display: none; }
  .uuv-video { border-radius: 0; border: 0; }
  /* Steuerleiste UNTER das Video (verdeckt keinen Video-Inhalt mehr) */
  .uuv-controls {
    position: static; opacity: 1; transform: none;
    border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0;
    background: rgba(6,11,22,.96);
    gap: 10px; padding: 11px 14px;
  }
  .uuv-btn { width: 38px; height: 38px; }
  .uuv-btn svg { width: 19px; height: 19px; }
  .uuv-time { display: inline; }
  /* großer Button auf die VIDEO-Mitte (nicht Frame-Mitte, da Leiste jetzt darunter) */
  .uuv-bigplay {
    inset: auto; top: 28vw; left: 50%; margin: 0;
    transform: translate(-50%, -50%);
    padding: 12px 20px 12px 16px; font-size: .86rem;
  }
  .uu-video-hero.is-playing:not(.is-muted) .uuv-bigplay { transform: translate(-50%, -50%) scale(.9); }
  .uuv-bigplay svg { width: 23px; height: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  .uuv-shell { animation: none; opacity: 1; filter: none; transform: none; }
  .uu-video-hero.is-playing.is-muted .uuv-bigplay { animation: none; }
  .uuv-bigplay, .uuv-controls, .uuv-btn { transition: none; }
}