/* Hero-Bühne Startseite (Desktop >=768 px), Yusuf 2026-10-04.
   Wechselt: Logo-Video -> Rechenzentrum -> Lager -> Produkt-Bühne (MedMentis, RedMentis, BsMind).
   Gesteuert von js/hero-stage.js. Ersetzt optisch das Netz-Motiv (hero-motif). Entwürfe: reference/hero-ideen-2026-10-04/ */
.hst { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.hst-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.hst-slide.is-on { opacity: 1; }
.hst-bg { position: absolute; inset: 0; background: center right / cover no-repeat; transform: scale(1.0); }
.hst-slide.is-on .hst-bg { animation: hst-zoom var(--hst-dur, 7s) linear forwards; }
@keyframes hst-zoom { from { transform: scale(1.0); } to { transform: scale(1.06); } }
.hst-shade { position: absolute; inset: 0; background:
  linear-gradient(90deg, #0b1c3d 0%, #0b1c3d 32%, rgba(11,28,61,.7) 48%, rgba(11,28,61,.15) 66%, transparent 80%),
  linear-gradient(0deg, #0b1c3d 0%, rgba(11,28,61,.6) 22%, transparent 42%); }
/* Bilder leicht in den Navy-Ton ziehen */
.hst-bg::after { content: ""; position: absolute; inset: 0; background: rgba(11,28,61,.28); }

/* Folie 1: Lichtpartikel formen das GAD-Logo (Canvas), dann blendet das 3D-Logo ein (js/hero-stage.js) */
.hst-logo-box { position: absolute; top: -10px; right: 1%; width: 56%; aspect-ratio: 16 / 9;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 16%), linear-gradient(to top, transparent, #000 18%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 16%), linear-gradient(to top, transparent, #000 18%); mask-composite: intersect; }
.hst-logo-box canvas, .hst-logo-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hst-logo-img { object-fit: cover; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .hst-logo-img { opacity: 1 !important; } .hst-logo-box canvas { display: none; } }

/* Produkt-Bühne: drei Karten, die vordere wechselt. Schärfe (Yusuf 2026-10-06): Karten werden in ihrer
   echten Anzeigegröße gezeichnet (--cw/--ch), die vordere steht gerade ohne 3D und ohne Skalierung,
   nichts wird hochgerechnet. Mitte der vorderen Karte = Mitte des GAD-Logos (14.8cqw - 10px). */
.hst-pb { --cw: 380px; --ch: 247px; position: absolute; left: calc(80% - var(--cw) / 2 - 170px);
  top: calc(14.8cqw - 28px - var(--ch) / 2); width: calc(var(--cw) + 340px); height: calc(var(--ch) + 120px); perspective: 1600px; }
@media (min-width: 1700px) { .hst-pb { --cw: 464px; --ch: 302px; } }
@media (min-width: 2200px) { .hst-pb { --cw: 570px; --ch: 370px; } }
.hst-card { position: absolute; left: 170px; top: 18px; width: var(--cw); height: var(--ch); border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.16); box-shadow: 0 30px 60px rgba(0,0,0,.5);
  -webkit-font-smoothing: antialiased; backface-visibility: hidden;
  transition: transform 1s cubic-bezier(.2,.7,.2,1), opacity 1s ease; }
.hst-card.hst-in { transition: none !important; opacity: 0 !important; }
.hst-card[data-pos="1"] { transition: opacity .55s ease; }
.hst-card > * { width: 100% !important; height: 100% !important; margin: 0 !important; border-radius: 0 !important;
  background: linear-gradient(155deg, #1d4486 0%, #0f2a5c 45%, #0a1a38 100%) !important; }
.hst-card[data-pos="0"] { transform: translateX(calc(var(--cw) * -.34)) translateY(calc(var(--ch) * .1)) rotateY(28deg) scale(.76); opacity: .6; z-index: 1; }
.hst-card[data-pos="1"] { transform: none; opacity: 1; z-index: 3; }
.hst-card[data-pos="2"] { transform: translateX(calc(var(--cw) * .34)) translateY(calc(var(--ch) * .14)) rotateY(-28deg) scale(.76); opacity: .6; z-index: 2; }
.hst-names { position: absolute; left: 0; right: 0; top: -22px; display: flex; justify-content: center; gap: 22px;
  font: 600 12px/1 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.hst-names span { transition: color .6s; }
.hst-names span.is-on { color: #fff; }

.hst-pause { position: absolute; z-index: 6; left: 24px; bottom: 22px; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25); background: rgba(11,28,61,.6); color: rgba(255,255,255,.8);
  font: 600 11px/1 Inter, sans-serif; cursor: pointer; display: grid; place-items: center; padding: 0; }
.hst-pause:focus-visible { outline: 2px solid #2b8aff; outline-offset: 2px; }
@media (hover: hover) { .hst-pause:hover { background: rgba(43,138,255,.35); color: #fff; } }

@media (max-width: 1100px) { .hst-pb { --cw: 320px; --ch: 208px; } }
@media (max-width: 767px) { .hst, .hst-pause { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .hst-slide.is-on .hst-bg { animation: none; }
  .hst-card { transition: opacity .6s ease; }
}

/* A: Kapitel-Leiste unter den Buttons (nur wenn links genug Platz ist), passende Hero-Karte leuchtet mit */
.hst-chapters { display: none; }
@media (min-width: 1360px) {
  body.is-home .hero-content, body.is-home .hero-cards-grid { pointer-events: none !important; }
  body.is-home .hero-cards-grid > * { pointer-events: auto !important; }
  .hst-chapters { display: grid; gap: 10px; width: 280px; margin-top: 44px; position: relative; z-index: 6; }
  .hst-chapters button { all: unset; cursor: pointer; display: grid; gap: 7px; font: 600 13px/1.2 Inter, sans-serif; color: rgba(255,255,255,.5); transition: color .3s; }
  .hst-chapters button span small { font-weight: 400; color: rgba(255,255,255,.4); }
  .hst-chapters button.is-on { color: #fff; }
  .hst-chapters button:focus-visible { outline: 2px solid #2b8aff; outline-offset: 4px; border-radius: 2px; }
  .hst-chapters i { display: block; height: 2px; border-radius: 2px; background: rgba(255,255,255,.15); overflow: hidden; }
  .hst-chapters i::after { content: ""; display: block; height: 100%; width: 0; background: #2b8aff; }
  .hst-chapters button.is-on i::after { animation: hst-prog var(--d, 5s) linear forwards; }
  .hst-chapters.is-paused button.is-on i::after { animation-play-state: paused; }
  @media (hover: hover) { .hst-chapters button:hover { color: #fff; } }
}
@keyframes hst-prog { from { width: 0; } to { width: 100%; } }
.hero-cards-grid .glass-card { transition: box-shadow .5s ease; }
.hero-cards-grid .glass-card.hst-glow { box-shadow: 0 0 0 1.5px #2b8aff, 0 0 36px rgba(43,138,255,.55) !important; }


@media (prefers-reduced-motion: reduce) { .hst-chapters button.is-on i::after { animation: none; width: 100%; } }

/* Studio-Bilder (Rack, Regal) wie das Logo rechts oben im Kasten, nicht bildfüllend */
.hst-bg.hst-bg--box { inset: auto; top: -30px; right: 2%; width: 50%; aspect-ratio: 16 / 9; background-size: cover; background-position: center;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 16%), linear-gradient(to top, transparent, #000 18%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 16%), linear-gradient(to top, transparent, #000 18%); mask-composite: intersect; }
.hst-bg.hst-bg--box::after { display: none; }

/* Bildunterschrift je Szene: macht aus jedem Motiv eine Aussage mit Link (Yusuf 2026-10-05).
   Sitzt unter dem Motiv; Lage per Container-Einheit an die Breite der Bühne gekoppelt. */
.hero-stage--split { container-type: inline-size; }
.hst-caps { position: absolute; left: 56%; right: 4%; top: 22.9cqw; z-index: 7; pointer-events: none; }
.hst-cap { position: absolute; left: 0; top: 0; max-width: 460px; opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .6s ease, transform .6s ease, visibility 0s linear .6s; }
.hst-cap.is-on { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .6s ease .35s, transform .6s ease .35s, visibility 0s; }
.hst-cap.is-on.is-late { transition-delay: 2.6s, 2.6s, 0s; }
.hst-cap b { display: block; font: 700 11.5px/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #6fb2ff; margin-bottom: 7px; }
.hst-cap p { margin: 0; font: 500 15px/1.45 Inter, sans-serif; color: rgba(255,255,255,.88); text-shadow: 0 1px 12px rgba(4,8,20,.8); }
.hst-cap a { margin-left: 6px; white-space: nowrap; font: 600 14px/1 Inter, sans-serif; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); padding-bottom: 2px; }
.hst-cap a:focus-visible { outline: 2px solid #2b8aff; outline-offset: 3px; }
@media (hover: hover) { .hst-cap a:hover { border-color: #fff; } }
@media (max-width: 767px) { .hst-caps { display: none; } }
@media (prefers-reduced-motion: reduce) { .hst-cap, .hst-cap.is-on { transition: none; transform: none; } }

/* Foto mit Motiv rechts: linke Bildhälfte weich in die Navy-Bühne auslaufen lassen (Academy) */
.hst-bg.hst-bg--fade { -webkit-mask-image: linear-gradient(to right, transparent 40%, #000 62%); mask-image: linear-gradient(to right, transparent 40%, #000 62%); }
/* Große Bildschirme: Produkt-Bühne mitwachsen lassen wie das Logo */
/* Grafik-Schrift in den verkleinerten Kacheln exakt setzen (sonst Lücken wie „Webs hop“) */
.hst-card, .hst-card svg, .hst-card svg text { text-rendering: geometricPrecision; }
/* Breite, niedrige Fenster (Laptop mit Windows-Skalierung 125-150 %, Chrome 100 %): die Bildunterschrift
   hängt an der Breite, die Kacheln an der Höhe. Bühne mindestens so hoch, dass beide nicht überlappen (Yusuf 16.10.2026). */
@media (min-width: 1024px) { .hero-pangolin .hero-stage--split { min-height: max(92vh, calc(475px + 23vw)); } }