/* ==========================================================================
   HausChat — Abschnitt „Pilotphase“ (Startseite und preise.html)
   Wird nach css/ticket.css geladen. Heller Abschnitt, in
   der Mitte das Pilot-Ticket wie auf „Über uns“. Oben liegt eine ruhige
   Karte „Pilotphase läuft“, unten der Hinweis „Plätze begrenzt“. Beide
   kommen erst, wenn sich die drei Schritte gefüllt haben (is-in aus
   js/ticket.js).
   ========================================================================== */

/* Nur seitlich abschneiden: unten dürfen Schatten und Licht in die Ausblende
   des Preis-Abschnitts laufen, sonst entsteht dort eine Kante. */
.pilot{position:relative;overflow-x:clip}
.pilot .sec-head h2{font-size:40px}

/* Bühne: weiches grünes Licht hinter dem Ticket. Es liegt über der
   Ausblende des Preis-Abschnitts darunter, damit keine Kante entsteht. */
.pilot__buehne{position:relative;max-width:1000px;margin:88px auto 0}
.pilot__buehne::before{content:"";position:absolute;inset:-110px -180px;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--teal-200) 48%,transparent),color-mix(in srgb,var(--teal-200) 0%,transparent))}
@supports not (overflow-x:clip){
  .pilot__buehne::before{inset-inline:0}
}
.pilot .ticket-wrap{z-index:1;margin:0 auto;filter:drop-shadow(0 26px 40px color-mix(in srgb,var(--teal-900) 14%,transparent)) drop-shadow(0 2px 6px color-mix(in srgb,var(--teal-900) 5%,transparent))}

/* Karte „Pilotphase läuft“: halb über der Oberkante. */
.pilot__status{position:absolute;z-index:2;left:36px;top:0;translate:0 calc(-100% + 18px);
  display:flex;align-items:center;gap:12px;margin:0;padding:10px 20px 10px 10px;border-radius:16px;background:#FFFFFF;text-align:left;
  border:1px solid var(--hairline)}
.pilot__status-icon{position:relative;display:grid;place-items:center;flex:0 0 auto;width:42px;height:42px;border-radius:12px;background:var(--teal-50);color:var(--teal-700)}
.pilot__status-icon .icon{width:22px;height:22px}
/* Grüner Punkt mit Welle: es läuft gerade. */
.pilot__status-icon i{position:absolute;right:-4px;top:-4px;width:13px;height:13px;border-radius:50%;background:var(--green-300);border:2px solid #FFFFFF}
.pilot__status-icon i::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--green-300);animation:pilot-welle 2.2s var(--ease-out) infinite}
@keyframes pilot-welle{0%{opacity:.9;scale:1}100%{opacity:0;scale:2.6}}
.pilot__status strong{display:block;font-size:15px;line-height:1.3;color:var(--ink)}
.pilot__status small{display:block;font-size:13.5px;line-height:1.4;color:var(--muted)}

/* Hinweis „Plätze begrenzt“: halb über der Unterkante des Abrisses. */
.pilot__aufkleber{position:absolute;z-index:2;right:44px;bottom:0;translate:0 50%;
  display:inline-flex;align-items:center;gap:8px;height:40px;margin:0;padding:0 18px 0 13px;border-radius:var(--radius-pill);background:#FFFFFF;color:var(--ink);
  border:1px solid var(--hairline);font-size:14px;font-weight:var(--fw-bold);white-space:nowrap}
.pilot__aufkleber .icon{width:18px;height:18px;color:var(--teal-500)}

/* Erst die Schritte (bis 0,9 s), dann die Karte, zuletzt der Hinweis. */
html.js .pilot__status{opacity:0;translate:0 calc(-100% + 34px);
  transition:opacity .5s var(--ease-out) 1.2s,translate .6s cubic-bezier(.22,.61,.36,1) 1.2s}
html.js .ticket-wrap.is-in .pilot__status{opacity:1;translate:0 calc(-100% + 18px)}
html.js .pilot__aufkleber{opacity:0;translate:0 calc(50% + 10px);
  transition:opacity .4s var(--ease-out) 1.6s,translate .5s cubic-bezier(.22,.61,.36,1) 1.6s}
html.js .ticket-wrap.is-in .pilot__aufkleber{opacity:1;translate:0 50%}

/* ── Breiten ───────────────────────────────────────────────────────────── */
@media (max-width:960px){
  .pilot .sec-head h2{font-size:32px}
}
@media (max-width:760px){
  .pilot__aufkleber{right:24px}
}
@media (max-width:640px){
  .pilot .sec-head h2{font-size:30px}
  .pilot__buehne{margin-top:72px}
  .pilot__buehne::before{inset:-70px -60px}
  .pilot__status{left:14px;padding-right:16px}
  .pilot__aufkleber{right:16px}
}
@media (prefers-reduced-motion:reduce){
  .pilot__status-icon i::after{animation:none;opacity:0}
  html.js .pilot__status,html.js .pilot__aufkleber{transition:none}
}