/* /css/pages/index.css */
@layer pages {
  :root{
    --hero-bg: url('/img/landing/hero-2048-opt.jpg');
    --hero-bg-pos: 70% 50%;
    --hero-scrim: linear-gradient(0deg, rgba(10,10,16,.62), rgba(10,10,16,.62));
    --hero-tint:  linear-gradient(0deg, rgba(0,0,0,.22),  rgba(0,0,0,.22));
    --hero-min-h: 100vh;
    --hero-pad: clamp(16px, 4vw, 48px);
    --benefits-h: 56px;
  }

  html, body { height: 100%; overflow-x: hidden; }
  body.page-index{
    min-height: var(--hero-min-h);
    color: #fff;
    background-image: var(--hero-tint), var(--hero-scrim), var(--hero-bg);
    background-size: cover, cover, cover;
    background-position: center, center, var(--hero-bg-pos);
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
  @media (max-width: 1024px){
    body.page-index{ background-attachment: scroll; }
  }
  body.page-index.no-scroll { overflow: hidden; }

  .landing-topbar{
    position: fixed; inset-block-start: 0; inset-inline: 0;
    display:flex; justify-content:space-between; align-items:center;
    padding-inline: var(--hero-pad); padding-block: 12px;
    z-index: 5; pointer-events:none;
  }
  .landing-topbar .landing-logo,
  .landing-topbar .landing-login{ pointer-events:auto; }

  .landing-logo img{ width: clamp(120px, 12vw, 180px); height:auto; display:block; }
  .landing-login{
    display:inline-flex; align-items:center; gap:8px;
    padding: clamp(6px, .9vw, 10px) clamp(10px, 1.3vw, 14px);
    border-radius: clamp(10px, 1.2vw, 12px);
    font-size: clamp(12px, 1.1vw, 16px);
    background:#5e17cb; color:#fff; text-decoration:none;
    border:1px solid rgb(255 255 255 / 65%);
    box-shadow: 0 4px 18px rgba(0,0,0,.25);
  }

  .page-index .container{
    width: min(1280px, 100%);
    margin-inline: auto;
    padding-inline: var(--hero-pad);
    padding-block: var(--hero-pad) calc(var(--hero-pad) + var(--benefits-h));
    display:grid; place-items:center; gap:24px;
    min-height: calc(100vh - 2 * var(--hero-pad) - var(--benefits-h));
    text-align:center;
  }
  @supports (height: 100dvh){
    .page-index .container{ min-height: calc(100dvh - 2 * var(--hero-pad) - var(--benefits-h)); }
    body.page-index{ min-height: 100dvh; }
  }

  .hero-copy{ max-width: min(1100px, 92vw); transform: translateY(clamp(48px, 12vh, 180px)); }
  .hero-copy h1{
    font-size: clamp(24px, 7.2vw, 64px);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.06; font-weight: 900; letter-spacing: -.02em; margin:0 0 12px 0; color:#f8fafc;
  }
  .hero-copy .accent{ background:#5e17cb; -webkit-background-clip:text; background-clip:text; color:transparent; }
  .hero-subtitle{ font-size: clamp(12px, 2.6vw, 18px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color: rgba(255,255,255,.92); margin:0 0 18px 0; }

  .cta-row{ display:grid; gap:8px; align-items:center; width:fit-content; margin-inline:auto; }
  .cta-primary{
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 22px; border-radius:14px; font-size:clamp(13px,1.4vw,18px);
    font-weight:800; background:#5e17cb; color:#fff; border:0; cursor:pointer;
    box-shadow:0 18px 40px rgb(0 0 0 / 32%), 0 3px 6px rgba(0,0,0,.28);
  }
  .cta-primary .chev{ width:18px; height:18px; opacity:.9; }
  .cta-note{ font-size:13px; color: rgba(255,255,255,.85); }
  .cta-note a{ color:#fff; text-decoration:underline; font-weight:700; }

  .hero-benefits{
    position: fixed; left:0; right:0; bottom:0; z-index:4;
    display:grid; grid-auto-flow:column; justify-content:center; gap:28px;
    padding:10px 16px; background: rgba(0,0,0,.45);
    border-top:1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px);
    list-style:none; margin:0; color: rgba(255,255,255,.92);
    font-size:14px; font-weight:600;
  }
  .hero-benefits .dot{ display:inline-block; inline-size:10px; block-size:10px; border-radius:999px; background:#b4236d; margin-right:8px; transform: translateY(1px); }

  /* ===== Modal ===== */
  #registerOverlay{
    position: fixed; inset:0; background: rgba(0,0,0,.55);
    opacity:0; pointer-events:none; z-index:20; transition: opacity .2s ease;
  }
  body.register-open #registerOverlay{ opacity:1; pointer-events:auto; }

  .modal-card{
    position: fixed; left:50%; top:50%; transform: translate(-50%,-50%);
    z-index:30; width: clamp(520px, 54vw, 760px); max-width: 92vw;
    height:auto; max-height:none; overflow:visible;
    background:#fff; color:#111827; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.35);
    padding:5px; display:none;
    --modal-pad:18px; --modal-radius:16px;
  }
  body.register-open .modal-card{ display:block; }

  .modal-card .modal-head{
    display:flex; align-items:center; justify-content:space-between;
    margin: calc(-1 * var(--modal-pad)) calc(-1 * var(--modal-pad)) 12px;
    padding: 12px 16px; background:#5e17cb; color:#fff;
    border-top-left-radius: var(--modal-radius);
    border-top-right-radius: var(--modal-radius);
  }
  .modal-card .modal-title{ margin:0; font-weight:800; }

  /* Phone: Modal „eingelegt“, eigener Scroll nur bei Bedarf */
  @media (max-width: 760px){
  /* Nur die iFrame-Variante soll auf "eingelassen + scroll" gehen */
  .modal-card--iframe{
    /* Zentrierung aus, Karte mit sicheren Abständen „einlegen“ */
    left:auto; right:auto; top:auto; bottom:auto;
    transform:none !important;

    /* Abstände inkl. Notch/Softkeys */
    --v-gap: clamp(24px, 6vh, 48px);
    --h-gap: clamp(16px, 4vw, 22px);
    inset:
      calc(env(safe-area-inset-top)    + var(--v-gap))
      var(--h-gap)
      calc(env(safe-area-inset-bottom) + var(--v-gap))
      var(--h-gap);

    /* In sichtbare Höhe einpassen und nur bei Bedarf scrollen */
    max-height: calc(100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - (2 * var(--v-gap)));
    overflow: auto;
    -webkit-overflow-scrolling: touch;

    /* kompaktere Card-Werte */
    --modal-pad: clamp(14px, 2.5vh, 18px);
    --modal-radius: clamp(14px, 2vw, 16px);
    padding: var(--modal-pad);
    padding-bottom: calc(var(--modal-pad) + env(safe-area-inset-bottom) + 8px);
    border-radius: var(--modal-radius);
  }

  /* Inline-Wizard: wie Desktop (zentriert + auto-Höhe), nur schmaler */
  .modal-card--inline{
    left: 50%;
    top: 50%;
    right: auto; bottom: auto;
    transform: translate(-50%, -50%) !important;
    width: min(94vw, 560px);
    height: auto;
    max-height: none;
    overflow: visible;
    padding: 5px; /* behalte deinen Standard-Pad */
  }
}}