/* ==========================================================
   ELEVON · Navigation, Unterseiten, Erklärvideos
   ========================================================== */

/* ---------- Navigation: luftig, Kontakt als eigener Knopf ---------- */
@media (min-width: 901px) {
  .menu { gap: clamp(1.4rem, 2.4vw, 2.4rem); }
  .menu-contact { display: none !important; }
}
.nav-cta {
  display: inline-flex; align-items: center; min-height: 40px; margin-left: 0.6rem;
  padding: 0 1.15rem; border-radius: 999px;
  border: 1px solid rgba(111, 195, 255, 0.55); color: var(--ion);
  font-size: 0.8125rem; letter-spacing: 0.02em; font-variation-settings: "wdth" 104, "wght" 500;
  transition: background 260ms var(--ease), color 260ms var(--ease), box-shadow 260ms var(--ease);
}
.nav-cta:hover { background: var(--ion); color: var(--void); box-shadow: 0 0 26px rgba(111, 195, 255, 0.35); }
.nav-cta:focus-visible { outline: 2px solid var(--ion); outline-offset: 3px; }

/* ---------- Navigation: Hinweis «Neu» ---------- */
.nav-mg { gap: 0.45rem; }
.nav-new {
  display: inline-flex; align-items: center;
  padding: 0.22rem 0.42rem; border-radius: 999px;
  font-family: var(--micro); font-size: 0.5rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--void); background: var(--ion);
  box-shadow: 0 0 14px rgba(111, 195, 255, 0.45);
}

/* ---------- Preise mit «ab» ---------- */
.plan-price .from {
  align-self: flex-start; margin-top: 0.45rem;
  font-size: 0.875rem; color: var(--haze);
  font-variation-settings: "wdth" 100, "wght" 450;
}

/* ---------- Abschnitt ---------- */
.mg { position: relative; padding-block: 0 clamp(4rem, 10vh, 7rem); overflow: hidden; }

/* Boden-Raster wie im Video: verbindet Website und Videos optisch */
.mg::before {
  content: ""; position: absolute; left: -25%; right: -25%; top: 22%; height: 70%;
  pointer-events: none; z-index: 0;
  background:
    repeating-linear-gradient(90deg, rgba(111, 195, 255, 0.09) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg, rgba(111, 195, 255, 0.09) 0 1px, transparent 1px 80px);
  transform: perspective(700px) rotateX(68deg);
  transform-origin: 50% 0%;
  -webkit-mask-image: radial-gradient(60% 70% at 50% 0%, #000 0%, transparent 75%);
          mask-image: radial-gradient(60% 70% at 50% 0%, #000 0%, transparent 75%);
}
.mg::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 70%;
  pointer-events: none; z-index: 0;
  background: radial-gradient(45% 50% at 70% 32%, rgba(30, 99, 184, 0.2), transparent 70%);
}
.mg > * { position: relative; z-index: 1; }

/* ---------- Hinweis «Neu» ---------- */
.mg-new {
  padding: 0.35rem 0.6rem; border-radius: 999px;
  color: var(--void); background: var(--ion);
  box-shadow: 0 0 18px rgba(111, 195, 255, 0.5);
}

/* ---------- Einzelvideo ---------- */
.mg-single { padding-top: clamp(4rem, 10vh, 6.5rem); }
.mg-single-card { --tx: 0; --ty: 0; margin-top: clamp(1rem, 3vw, 2rem); perspective: 1600px; }
.mg-single-in {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center;
  padding: clamp(1.8rem, 4vw, 3.25rem);
  border-radius: 28px; border: 1px solid rgba(111, 195, 255, 0.55);
  background:
    radial-gradient(520px circle at var(--mx, 78%) var(--my, 30%), rgba(111, 195, 255, 0.16), transparent 50%),
    linear-gradient(160deg, #0d1826 0%, #060a11 100%);
  box-shadow: 0 0 0 1px rgba(111, 195, 255, 0.15), 0 40px 90px -30px rgba(30, 99, 184, 0.55);
  transform: rotateX(calc(var(--tx) * 0.5deg)) rotateY(calc(var(--ty) * 0.5deg));
}
.mg-single-copy .plan-badge { position: static; transform: none; display: inline-flex; margin-bottom: var(--s3); }
.mg-single-copy .lede { margin-top: var(--s3); max-width: 34rem; }
.mg-single-copy .cta { margin-top: var(--s4); }
.mg-single-deal { display: flex; flex-direction: column; align-items: center; text-align: center; }
.mg-single-vids { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.25rem); }
.mg-single-v {
  display: grid; place-items: center; gap: 0.2rem;
  width: clamp(76px, 9vw, 100px); aspect-ratio: 9 / 16; border-radius: 14px;
  border: 1px solid rgba(111, 195, 255, 0.35); background: rgba(111, 195, 255, 0.05);
  align-content: center;
}
.mg-single-v b { font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1; font-variation-settings: "wdth" 120, "wght" 600; }
.mg-single-v small { font-family: var(--micro); font-size: 0.5625rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--haze); }
.mg-single-v.is-free {
  color: var(--void); border-color: transparent;
  background: linear-gradient(160deg, var(--ion-pale) 0%, var(--ion) 45%, var(--ion-mid) 100%);
  box-shadow: 0 0 28px rgba(111, 195, 255, 0.5);
}
.mg-single-v.is-free small { color: rgba(0, 0, 0, 0.7); }
.mg-single-plus { font-size: 1.6rem; color: var(--ion); }
.mg-single-deal .plan-price { justify-content: center; }

/* ---------- Abos ---------- */
.mg-abos { padding-top: clamp(4rem, 10vh, 6.5rem); }
.mg-plans {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 0.8fr);
  gap: 22px; margin-top: clamp(1rem, 3vw, 2rem);
  perspective: 1600px;
}
.mg-plan { --tx: 0; --ty: 0; transform-style: preserve-3d; will-change: transform; }
.mg-plan:hover .plan-in { border-color: rgba(111, 195, 255, 0.4); }
.mg-plan.is-pro .plan-in {
  border-color: rgba(111, 195, 255, 0.55);
  background:
    radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(111, 195, 255, 0.16), transparent 45%),
    linear-gradient(170deg, #0d1826 0%, #060a11 100%);
  box-shadow: 0 0 0 1px rgba(111, 195, 255, 0.15), 0 40px 90px -30px rgba(30, 99, 184, 0.55);
}
.mg-plan .plan-badge { transform: none; }
.mg-plan-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.mg-rhythm { color: var(--haze); font-size: 0.875rem; }

/* Monatsraster: 4 Wochen, je 2 Plätze. Leuchtet beim Hineinscrollen auf. */
.mg-month { margin-top: var(--s4); padding: 1rem; border-radius: 16px; border: 1px solid var(--line-soft); background: rgba(111, 195, 255, 0.025); }
.mg-month-label { font-family: var(--micro); font-size: 0.5rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dim); margin-bottom: 0.75rem; }
.mg-weeks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mg-week { display: grid; gap: 6px; }
.mg-week b { font-family: var(--micro); font-weight: 400; font-size: 0.5rem; letter-spacing: 0.18em; color: var(--dim); text-align: center; }
.mg-week i {
  display: block; height: 26px; border-radius: 7px;
  border: 1px dashed rgba(111, 195, 255, 0.18);
  position: relative; overflow: hidden;
}
.mg-week i.on::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(160deg, var(--ion-pale) 0%, var(--ion) 45%, var(--ion-mid) 100%);
  box-shadow: 0 0 18px rgba(111, 195, 255, 0.55);
  opacity: 0; transform: scale(0.6);
  transition: opacity 420ms var(--ease), transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: var(--d, 0ms);
}
.mg-week i.on::before {
  content: ""; position: absolute; z-index: 1; left: 50%; top: 50%;
  border-style: solid; border-width: 4.5px 0 4.5px 7px; border-color: transparent transparent transparent rgba(0, 0, 0, 0.7);
  transform: translate(-35%, -50%) scale(0); opacity: 0;
  transition: transform 360ms var(--ease), opacity 360ms var(--ease);
  transition-delay: calc(var(--d, 0ms) + 160ms);
}
.mg-plans.is-lit .mg-week i.on::after { opacity: 1; transform: none; }
.mg-plans.is-lit .mg-week i.on::before { opacity: 1; transform: translate(-35%, -50%) scale(1); }

.mg-plan .plan-cta { margin-top: var(--s4); }

/* In beiden Abos enthalten */
.mg-incl {
  align-self: stretch;
  padding: clamp(1.8rem, 3vw, 2.5rem);
  border-radius: 24px; border: 1px dashed var(--line);
  display: flex; flex-direction: column;
}
.mg-incl-tag { color: var(--haze); }
.mg-incl .plan-list { margin-top: var(--s3); padding-top: var(--s3); flex: none; }

/* ---------- Ablauf des Abos ---------- */
.mg-steps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(3.5rem, 8vw, 5.5rem); padding-top: var(--s4);
  border-top: 1px solid var(--line-soft);
}
.mg-steps li { display: grid; gap: 0.6rem; align-content: start; }
.mg-step-no { font-family: var(--micro); font-size: 0.625rem; letter-spacing: 0.22em; color: var(--ion); }
.mg-steps p { color: var(--haze); font-size: 0.9375rem; line-height: 1.55; max-width: 34ch; }

/* ---------- Seitenkopf der Unterseiten: zentriert, füllt den ersten Bildschirm ---------- */
.page-hero {
  position: relative; overflow: hidden;
  min-height: min(88svh, 880px);
  display: flex; align-items: center;
  padding: calc(78px + clamp(2.5rem, 8vh, 5rem)) 0 clamp(4rem, 10vh, 6.5rem);
  text-align: center;
}
.page-hero::before {
  content: ""; position: absolute; left: -25%; right: -25%; top: 56%; height: 80%;
  pointer-events: none; z-index: 0;
  background:
    repeating-linear-gradient(90deg, rgba(111, 195, 255, 0.09) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg, rgba(111, 195, 255, 0.09) 0 1px, transparent 1px 80px);
  transform: perspective(700px) rotateX(70deg); transform-origin: 50% 0%;
  -webkit-mask-image: radial-gradient(55% 75% at 50% 0%, #000 0%, transparent 75%);
          mask-image: radial-gradient(55% 75% at 50% 0%, #000 0%, transparent 75%);
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(38% 42% at 50% 56%, rgba(30, 99, 184, 0.3), transparent 70%),
    radial-gradient(70% 50% at 50% 0%, rgba(111, 195, 255, 0.07), transparent 70%);
}
.page-hero-in { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; align-items: center; }
.page-eyebrow { display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin-bottom: var(--s3); }
.page-eyebrow .mg-new { color: var(--void); }
.page-title {
  font-size: clamp(2.7rem, 7vw, 6.2rem);
  font-variation-settings: "wdth" 116, "wght" 500;
  letter-spacing: -0.015em; line-height: 1.02; text-wrap: balance; max-width: 15ch;
}
.page-lede { margin: var(--s4) auto 0; max-width: 54ch; }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2rem; margin-top: var(--s5); }
.page-actions .cta-glow { align-self: center; }
.page-link { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; color: var(--haze); font-size: 0.9375rem; transition: color 240ms var(--ease); }
.page-link:hover { color: var(--ion); }
/* ---------- Start: Leistungen ---------- */
.svc { padding-block: clamp(5rem, 13vh, 8rem) 0; }
.svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; perspective: 1600px; }
.svc-card { --tx: 0; --ty: 0; display: block; transform-style: preserve-3d; color: inherit; }
.svc-in {
  position: relative; height: 100%; display: flex; flex-direction: column; gap: 0.9rem;
  padding: clamp(1.8rem, 3.4vw, 2.8rem); border-radius: 24px;
  background:
    radial-gradient(460px circle at var(--mx, 50%) var(--my, 0%), rgba(111, 195, 255, 0.12), transparent 45%),
    linear-gradient(170deg, #0a111b 0%, #05080d 100%);
  border: 1px solid var(--line);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9);
  transform: rotateX(calc(var(--tx) * 1deg)) rotateY(calc(var(--ty) * 1deg));
  transition: border-color 300ms var(--ease);
}
.svc-card:hover .svc-in { border-color: rgba(111, 195, 255, 0.45); }
.svc-card:focus-visible { outline: none; }
.svc-card:focus-visible .svc-in { border-color: var(--ion); box-shadow: 0 0 0 2px var(--ion); }
.svc-top { display: flex; align-items: center; min-height: 1.4rem; }
.svc-kind { color: var(--haze); font-size: 0.5625rem; }
.svc-kind .mg-new { font-size: 0.5rem; }
.svc-ic { width: 44px; height: 44px; color: var(--ion); margin-top: 0.6rem; }
.svc-name { font-size: clamp(1.7rem, 3vw, 2.4rem); font-variation-settings: "wdth" 116, "wght" 500; line-height: 1.1; }
.svc-text { color: var(--haze); font-size: 0.9375rem; line-height: 1.55; max-width: 38ch; }
.svc-go { margin-top: auto; padding-top: 1.4rem; display: inline-flex; gap: 0.5rem; color: var(--ion); font-size: 0.9375rem; }
.svc-go span[aria-hidden] { transition: transform 280ms var(--ease); }
.svc-card:hover .svc-go span[aria-hidden] { transform: translateX(5px); }

/* ---------- Start: Was uns wichtig ist ---------- */
.home-promise { padding-block: clamp(1rem, 4vh, 2rem) clamp(5rem, 12vh, 8rem); }

/* ---------- Erklärvideos: Text links, Beispielvideo rechts ---------- */
.mg-hero { position: relative; overflow: hidden; padding: calc(78px + clamp(3rem, 9vh, 5.5rem)) 0 clamp(3rem, 8vh, 5rem); }
.mg-hero::before {
  content: ""; position: absolute; left: -25%; right: -25%; top: 52%; height: 80%; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(111, 195, 255, 0.08) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg, rgba(111, 195, 255, 0.08) 0 1px, transparent 1px 80px);
  transform: perspective(700px) rotateX(70deg); transform-origin: 50% 0%;
  -webkit-mask-image: radial-gradient(55% 75% at 70% 0%, #000 0%, transparent 75%);
          mask-image: radial-gradient(55% 75% at 70% 0%, #000 0%, transparent 75%);
}
.mg-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40% 50% at 74% 40%, rgba(30, 99, 184, 0.26), transparent 70%); }
.mg-hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.mg-hero .page-eyebrow { justify-content: flex-start; }
.mg-hero .page-title { font-size: clamp(2.5rem, 5.4vw, 4.8rem); max-width: 13ch; }
.mg-hero .page-lede { margin: var(--s4) 0 0; max-width: 48ch; }
.mg-hero .page-actions { justify-content: flex-start; margin-top: var(--s4); }

.mg-shows { margin-top: var(--s4); }
.mg-shows-tag { color: var(--haze); margin-bottom: 0.9rem; }
.mg-shows-list { border-top: 1px solid var(--line-soft); max-width: 40rem; }
.mg-shows-list li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); align-items: baseline; padding: 0.85rem 0; border-bottom: 1px solid var(--line-soft); color: var(--ice); font-size: 0.9375rem; line-height: 1.5; }
.mg-shows-no { font-family: var(--micro); font-size: 0.5625rem; letter-spacing: 0.2em; color: var(--ion); }

.mg-film { margin: 0; justify-self: center; display: flex; flex-direction: column; align-items: center; gap: var(--s3); perspective: 1400px; }
.mg-film figcaption { color: var(--haze); text-align: center; font-size: 0.5625rem; }
.mg-phone { width: min(100%, 340px, calc(74svh * 9 / 16 + 18px)); }
.mg-phone video { object-fit: cover; }
.mg-sound {
  position: absolute; right: 20px; bottom: 20px; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 40px; padding: 0 0.95rem 0 0.75rem; border-radius: 999px;
  font: inherit; font-size: 0.8125rem; color: var(--ice); cursor: pointer;
  background: rgba(4, 8, 14, 0.62); border: 1px solid rgba(111, 195, 255, 0.35);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: border-color 240ms var(--ease), background 240ms var(--ease);
}
.mg-sound[hidden] { display: none; }
.mg-sound.is-hint { border-color: var(--ion); animation: mg-hint 1.6s var(--ease) infinite; }
@keyframes mg-hint { 0%, 100% { box-shadow: 0 0 0 0 rgba(111, 195, 255, 0.55); } 60% { box-shadow: 0 0 0 12px rgba(111, 195, 255, 0); } }
.mg-sound:hover { border-color: var(--ion); background: rgba(10, 20, 34, 0.75); }
.mg-sound:focus-visible { outline: 2px solid var(--ion); outline-offset: 3px; }
.mg-sound svg { width: 18px; height: 18px; color: var(--ion); }
.mg-sound .mg-wave { display: none; }
.mg-sound[aria-pressed="true"] .mg-wave { display: inline; }
.mg-sound[aria-pressed="true"] .mg-mute { display: none; }

/* ---------- FAQ: Frage stellen ---------- */
.ask { position: relative; overflow: hidden; padding-block: clamp(5rem, 13vh, 8rem); border-top: 1px solid var(--line-soft); }
.ask::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40% 50% at 50% 30%, rgba(30, 99, 184, 0.2), transparent 70%); }
.ask-in { position: relative; }
.ask-head { display: flex; flex-direction: column; align-items: center; gap: var(--s3); text-align: center; margin-bottom: var(--s5); }
.ask-head .lede { margin-inline: auto; }
.ask-card { max-width: 46rem; margin-inline: auto; }

/* ---------- Über uns: Bildschirmfoto von Finanzwissen ---------- */
.work-body .work-shot { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* ---------- Abschluss der Unterseiten ---------- */
.page-cta { position: relative; overflow: hidden; padding-block: clamp(6rem, 16vh, 10rem); border-top: 1px solid var(--line-soft); text-align: center; }
.page-cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(40% 60% at 50% 55%, rgba(30, 99, 184, 0.22), transparent 70%);
}
.page-cta-in { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s3); }
.page-cta-mark { perspective: 900px; margin-bottom: var(--s2); }
.page-cta-mark img { width: clamp(72px, 9vw, 104px); height: auto; filter: drop-shadow(0 0 30px rgba(111, 195, 255, 0.45)); }
.page-cta-title { max-width: 16ch; }
.page-cta .lede { margin-inline: auto; }
.page-cta .cta-glow { align-self: center; margin-top: var(--s2); }

/* ---------- Fusszeile ---------- */
.site-foot .foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 0.6fr)); gap: var(--s4); align-items: start; }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; }
.foot-col .micro { color: var(--dim); font-size: 0.5625rem; letter-spacing: 0.22em; margin-bottom: 0.4rem; }
.foot-col a { display: inline-flex; align-items: center; min-height: 40px; color: var(--haze); font-size: 0.875rem; transition: color 240ms var(--ease); }
.foot-col a:hover { color: var(--ion); }
.foot-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s3); margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line-soft); font-size: 0.8125rem; color: var(--dim); }
.foot-legal a { display: inline-flex; align-items: center; min-height: 44px; transition: color 240ms var(--ease); }
.foot-legal a:hover { color: var(--ion); }

/* ---------- Tablet und Handy ---------- */
@media (max-width: 1100px) {
  .mg-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mg-incl { grid-column: 1 / -1; }
  .mg-incl .plan-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .nav-cta { display: none; }
  .svc-grid { grid-template-columns: 1fr; }
  .site-foot .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .page-hero { min-height: min(84svh, 760px); padding-top: calc(78px + 2rem); }
  .page-actions { flex-direction: column; gap: 1.2rem; }
  .page-eyebrow { flex-direction: column; gap: 0.7rem; }
  /* Erklärvideos: Video direkt nach dem Einstiegstext */
  .mg-hero { padding-top: calc(78px + 2rem); }
  .mg-hero-in { grid-template-columns: 1fr; gap: 0; }
  .mg-hero-copy { display: contents; }
  .mg-hero .page-eyebrow { align-items: flex-start; }
  .mg-film { order: 1; margin-top: var(--s4); }
  .mg-shows { order: 2; }
  .mg-hero-actions { order: 3; }
  .mg-phone { width: min(80vw, 320px); }
  .mg-plans { grid-template-columns: 1fr; gap: 28px; }
  .mg-single-in { grid-template-columns: 1fr; }
  .mg-single-deal { order: -1; }
  .mg-incl .plan-list { grid-template-columns: 1fr; }
  .mg-steps { grid-template-columns: 1fr; }
  .nav-new { margin-left: 0.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mg-week i.on::after, .mg-week i.on::before { transition: none; }
}