/* =========================================================================
   360°-Rundgang – Sektion und Einbindung (Aktionshaus-Seiten)
   Gehört zu shared/rundgang-embed.js. Farben ausschließlich aus dem
   Designsystem: Navy-Verlauf wie Hero/Vertrauensband, Button-Orange.
   ========================================================================= */

/* ------------------------- Sektion (volle Breite) ------------------------- */
.ah-rg {
  position: relative;
  padding: clamp(56px, 7vw, 88px) 0;
  color: #fff;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(255, 255, 255, .06) 0%, transparent 48%),
    linear-gradient(145deg, var(--lp-navy-soft, #1E2F51) 0%, var(--lp-navy-2, #183054) 50%, var(--lp-navy, #0F172A) 100%);
}
.ah-rg__inner {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  gap: clamp(36px, 4.5vw, 64px);
}
.ah-rg .lp-trust-band__label { margin-bottom: 16px; }
.ah-rg__titel { color: #fff; margin: 0; text-wrap: balance; }
.ah-rg__lead { margin: 16px 0 0; font-size: 1.02rem; line-height: 1.7; color: rgba(255, 255, 255, .78); }

.ah-rg__merkmale {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  margin: 28px 0 0; padding: 0; list-style: none;
}
.ah-rg__merkmal { display: flex; align-items: center; gap: 12px; padding-right: 14px; }
.ah-rg__merkmal + .ah-rg__merkmal { padding: 0 0 0 14px; border-left: 1px solid rgba(255, 255, 255, .16); }
.ah-rg__icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12);
  color: #fff; font-size: 22px;
}
.ah-rg__merkmal strong { display: block; font-size: .95rem; font-weight: 700; color: #fff; white-space: nowrap; }
.ah-rg__merkmal strong + span { display: block; margin-top: 2px; font-size: .84rem; line-height: 1.45; color: rgba(255, 255, 255, .7); }

.ah-rg__start {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 30px; min-height: 54px; padding: 0 30px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--mz-cta-orange, #d97706); color: #fff;
  font: inherit; font-size: 1rem; font-weight: 700;
  box-shadow: 0 6px 20px rgba(180, 83, 9, .32);
  transition: background .2s, box-shadow .2s;
}
.ah-rg__start:hover { background: #b45309; box-shadow: 0 8px 24px rgba(180, 83, 9, .4); }
.ah-rg__start .material-symbols-outlined { font-size: 22px; }
.ah-rg :is(.ah-rg__start, .rg__cover, .rg__full, .rg__retry):focus-visible,
.rg__fs-close:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
[data-rg-start].is-busy { cursor: progress; opacity: .8; }

/* ------------------------------ Medienkarte ------------------------------ */
.rg {
  position: relative;
  border-radius: var(--lp-radius, 22px);
  overflow: hidden;
  background: #0F172A;
  box-shadow: 0 24px 60px rgba(4, 10, 24, .45);
  border: 1px solid rgba(255, 255, 255, .08);
}
.rg__stage { position: relative; aspect-ratio: 16 / 9; width: 100%; background: #0F172A; }
.rg__stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.rg__stage iframe.is-laedt { visibility: hidden; }

.rg__cover {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center; padding: 24px;
  border: 0; width: 100%; cursor: pointer;
  background: none; font: inherit; color: #fff; text-align: center;
}
.rg__cover[hidden] { display: none; }
.rg__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; display: block; }
.rg__cover::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, .12) 0%, rgba(15, 23, 42, .5) 100%);
  transition: background .3s;
}
.rg__cover:hover::after { background: linear-gradient(180deg, rgba(15, 23, 42, .2) 0%, rgba(15, 23, 42, .6) 100%); }
.rg__cover-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.rg__play {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 28px; min-height: 54px; border-radius: 999px;
  background: #fff; color: var(--lp-navy-2, #183054);
  font-size: 1.02rem; font-weight: 700;
  box-shadow: 0 8px 26px rgba(8, 15, 34, .34);
  transition: transform .2s, box-shadow .2s;
}
.rg__cover:hover .rg__play { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(8, 15, 34, .42); }
.rg__play .material-symbols-outlined { font-size: 22px; }
.rg__caption { font-size: .9rem; font-weight: 500; color: rgba(255, 255, 255, .9); text-shadow: 0 1px 12px rgba(15, 23, 42, .5); text-wrap: balance; }

/* Lade- und Fehlerzustand über der Vorschau */
.rg__status {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 24px; text-align: center; color: #fff;
  background: rgba(15, 23, 42, .82);
}
.rg__status[hidden] { display: none; }
.rg__status p { margin: 0; font-size: .98rem; font-weight: 600; }
.rg__spinner {
  width: 38px; height: 38px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .22); border-top-color: #fff;
  animation: rg-dreh 0.9s linear infinite;
}
@keyframes rg-dreh { to { transform: rotate(360deg); } }
.rg__retry {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 22px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--mz-cta-orange, #d97706); color: #fff; font: inherit; font-weight: 700;
}
.rg__retry .material-symbols-outlined { font-size: 20px; }

/* Kontrollleiste */
.rg__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap;
  padding: 14px 20px;
  background: rgba(8, 15, 34, .55);
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.rg__meta { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .84rem; color: rgba(255, 255, 255, .78); }
.rg__meta .material-symbols-outlined { font-size: 18px; color: rgba(255, 255, 255, .78); }
.rg__full {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 18px; min-height: 44px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .35); background: transparent; color: #fff;
  font-size: .86rem; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: border-color .2s, background .2s;
}
.rg__full:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.rg__full .material-symbols-outlined { font-size: 18px; }

/* ------------------------------ Vollbild ------------------------------ */
.rg__fs-kopf { display: none; }
.rg.is-voll {
  display: flex; flex-direction: column;
  width: 100vw; height: 100vh; height: 100dvh; max-width: none;
  border: 0; border-radius: 0; box-shadow: none; background: #0B1222;
}
.rg.is-overlay { position: fixed; inset: 0; z-index: 2147483000; }
html.rg-offen, html.rg-offen body { overflow: hidden; }
.rg.is-voll .rg__fs-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex: none; padding: 10px 12px 10px 20px;
  background: #0B1222; border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.rg__fs-titel { font-size: .9rem; font-weight: 600; color: rgba(255, 255, 255, .85); }
.rg__fs-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .14); color: #fff;
}
.rg__fs-close:hover { background: rgba(255, 255, 255, .26); }
.rg.is-voll .rg__stage { flex: 1; aspect-ratio: auto; min-height: 0; }
.rg.is-voll .rg__bar { display: none; }
.rg:fullscreen { width: 100vw; height: 100vh; }

/* ------------------------------ Responsive ------------------------------ */
@media (max-width: 1180px) {
  .ah-rg__inner { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); gap: 36px; }
  .ah-rg__merkmale { grid-template-columns: 1fr; gap: 14px; }
  .ah-rg__merkmal + .ah-rg__merkmal { padding: 0; border-left: 0; }
}
@media (max-width: 900px) {
  .ah-rg__inner { grid-template-columns: 1fr; gap: 32px; }
  .ah-rg__merkmale { grid-template-columns: 1fr 1fr; gap: 0; }
  .ah-rg__merkmal + .ah-rg__merkmal { padding: 0 0 0 14px; border-left: 1px solid rgba(255, 255, 255, .16); }
}
@media (max-width: 560px) {
  .ah-rg { padding: 52px 0; }
  .ah-rg__merkmale { grid-template-columns: 1fr; gap: 14px; }
  .ah-rg__merkmal + .ah-rg__merkmal { padding: 0; border-left: 0; }
  .ah-rg__start { width: 100%; }
  .rg__stage { aspect-ratio: 4 / 5; }
  .rg__bar { flex-direction: column; align-items: stretch; }
  .rg__full { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .rg__play, .rg__cover::after, .ah-rg__start { transition: none; }
  .rg__spinner { animation-duration: 2.4s; }
}

/* ======================= Coming soon (Status "comingSoon") ======================= */
.ah-rg__aktion { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; margin-top: 30px; }
.ah-rg__aktion .ah-rg__start { margin-top: 0; }
.rg-bald__marke {
  display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06);
  font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .85);
}

.rg--bald .rg__stage { background: none; }
.rg-bald {
  position: absolute; inset: 0; overflow: hidden;
  display: grid; place-items: center; padding: 28px; text-align: center; color: #fff;
  background:
    radial-gradient(ellipse at 70% 15%, rgba(255, 255, 255, .10) 0%, transparent 55%),
    linear-gradient(160deg, var(--lp-navy-soft, #1E2F51) 0%, var(--lp-navy-2, #183054) 55%, #13254a 100%);
}
.rg-bald::before {                 /* sehr dezentes Raster wie ein Grundrissblatt */
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
.rg-bald__grafik {
  position: absolute; right: -3%; bottom: -12%; width: 34%; max-width: 300px;
  color: rgba(255, 255, 255, .09);
}
.rg-bald__inhalt { position: relative; max-width: 380px; display: flex; flex-direction: column; align-items: center; }
.rg-bald__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .08);
}
.rg-bald__icon .material-symbols-outlined { font-size: 32px; color: #fff; }
.rg-bald__label { margin: 16px 0 0; font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.rg-bald__titel { margin: 8px 0 0; font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.rg-bald__text { margin: 8px 0 0; font-size: .92rem; line-height: 1.6; color: rgba(255, 255, 255, .75); }
.rg-bald__btn {
  margin-top: 20px; min-height: 46px; padding: 0 24px; border: 0; border-radius: 999px; cursor: pointer;
  background: #fff; color: var(--lp-navy-2, #183054); font: inherit; font-size: .95rem; font-weight: 700;
  box-shadow: 0 8px 22px rgba(8, 15, 34, .3); transition: transform .2s, box-shadow .2s;
}
.rg-bald__btn:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(8, 15, 34, .38); }
.rg-bald__status {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .06); font-size: .84rem; font-weight: 600; color: rgba(255, 255, 255, .8);
}
.rg-bald__status .material-symbols-outlined { font-size: 18px; }
.ah-rg :is(.rg-bald__btn):focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Hinweis-Dialog (nutzt .mzm-* aus contact-modal.css) */
.mzm-dialog--klein { width: min(560px, 100%); }
.mzm-dialog--klein .mzm-kopf { padding-bottom: 38px; }
.rg-bald-dialog__text { margin: 0 0 10px; font-size: .95rem; line-height: 1.65; color: #3f3f46; }
.rg-bald-dialog__aktionen { display: flex; gap: 10px; margin-top: 18px; }
.rg-bald-dialog__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--mz-cta-orange, #d97706); color: #fff; border: 1px solid transparent;
  box-shadow: 0 4px 14px rgba(180, 83, 9, .28);
}
.rg-bald-dialog__cta:hover { background: #b45309; }
.rg-bald-dialog__cta .material-symbols-outlined { font-size: 19px; }
.rg-bald-dialog__link { margin: 16px 0 0; text-align: center; }
.rg-bald-dialog__link a { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; font-weight: 600; color: var(--mz-navy, #183054); }
.rg-bald-dialog__link .material-symbols-outlined { font-size: 18px; }
@media (max-width: 480px) { .rg-bald-dialog__aktionen { flex-direction: column-reverse; } }
@media (max-width: 560px) {
  .rg--bald .rg__stage { aspect-ratio: 4 / 5; }
  .rg-bald__grafik { width: 90%; right: -10%; }
  .ah-rg__aktion .ah-rg__start { width: 100%; }
}

/* KI-Kennzeichnung im Vollbild-Kopf (gleiche Optik wie .mz-ki) */
.rg__fs-ki {
  display: inline-block; margin-left: 10px; padding: 4px 9px; border-radius: 6px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22);
  font-size: 11px; font-weight: 600; color: #fff; vertical-align: 1px;
}
@media (max-width: 560px) { .rg__fs-titel { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .rg__fs-ki { margin-left: 0; font-size: 10px; } }
.rg__fs-ki { background: none; border: 0; padding: 0; font-weight: 400; color: rgba(255,255,255,.7); }