@layer vendor, site;
@layer site {
/* v966 (Wunsch NordFly): „Dein Einstieg“ – Registrierung als geführte Anleitung statt acht Karten.
   Links die acht Schritte mit Fortschrittsleiste („Schritt 3 von 8“); der aktive Schritt klappt seinen Text auf.
   Rechts der passende Screenshot (Discord bzw. OperationCenter) mit Markierung der richtigen Stelle.
   Ohne JavaScript stehen alle Texte offen untereinander und der erste Screenshot ist zu sehen.
   Texte unverändert aus den bisherigen Karten, Schriftgrößen wie bisher (h3 1.18rem, Text .94rem). */
.entry-guide{
  --eg-blue:#0670b3;
  display:grid;
  grid-template-columns:minmax(0,500px) minmax(0,1fr);
  gap:clamp(22px,2.6vw,36px);
  align-items:start;
  margin-top:clamp(18px,2.4vh,24px);
}
.entry-guide-rail{min-width:0}
/* Abstand unter den Einleitungsspalten nicht doppelt zählen */
.entry-registration-section .entry-registration-description > div > p:last-child{margin-bottom:0}
.entry-registration-section .entry-registration-heading{margin-bottom:18px}
.entry-guide-progress{display:flex;align-items:center;gap:14px;margin:0 0 8px;padding:0 4px}
.entry-guide-count{flex:none;color:#33506b;font-size:.86rem;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.entry-guide-count b{color:var(--eg-blue)}
.entry-guide-bar{position:relative;flex:1;height:6px;border-radius:999px;background:#dbe8f3;overflow:hidden}
.entry-guide-bar i{position:absolute;inset:0 auto 0 0;width:var(--eg-p,12.5%);border-radius:inherit;background:linear-gradient(90deg,#0670b3,#18a7e6);transition:width .32s cubic-bezier(.23,1,.32,1)}
.entry-guide-steps{list-style:none;margin:0;padding:0;display:grid;gap:2px;align-content:start;min-height:var(--eg-rail,0)}
.entry-guide-step{border:1px solid transparent;border-radius:16px;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease}
.entry-guide-step h3{margin:0;font-size:1.18rem;line-height:1.18}
.entry-guide-tab{display:flex;align-items:center;gap:14px;width:100%;padding:4px 12px;border:0;border-radius:15px;background:none;color:#40576e;font:inherit;font-weight:inherit;text-align:left;cursor:pointer}
.entry-guide-tab:hover{color:#0b1d34}
.entry-guide-tab:focus-visible{outline:2px solid #18a7e6;outline-offset:2px}
.entry-guide .entry-step-no{position:static;flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;font-size:.76rem;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.entry-guide-step.is-done .entry-step-no,
.entry-guide-step.is-active .entry-step-no{background:var(--eg-blue);border-color:var(--eg-blue);color:#fff;box-shadow:0 6px 14px rgba(11,142,216,.16)}
.entry-guide-text{padding:0 18px 12px 64px}
.entry-guide-text p{margin:0;color:#5a7087;font-size:.94rem;line-height:1.65}
.entry-guide-text a{display:inline-block;margin-top:6px;color:#0789df;font-size:.86rem;font-weight:850}
.entry-guide-step.is-active{border-color:#dce7f1;background:rgba(255,255,255,.92);box-shadow:0 12px 32px rgba(6,34,59,.06)}
.entry-guide-step.is-active .entry-guide-tab{color:#0b1d34;cursor:default}
/* Mit JavaScript: nur der aktive Schritt zeigt seinen Text */
.entry-guide.is-ready .entry-guide-step:not(.is-active) .entry-guide-text{display:none}
.entry-guide.is-ready .entry-guide-step.is-active .entry-guide-text{animation:nf-eg-text .26s cubic-bezier(.23,1,.32,1)}
@keyframes nf-eg-text{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* Bühne mit Screenshot */
.entry-guide-stage{min-width:0;position:sticky;top:calc(var(--header) + 20px)}
.entry-guide-frame{position:relative;display:grid;aspect-ratio:4/3;max-height:calc(100svh - var(--header) - 120px);margin:0 auto;border:1px solid #cfdeeb;border-radius:18px;background:#0b1626;overflow:hidden;box-shadow:0 22px 50px rgba(6,34,59,.14)}
.entry-guide-shot{grid-area:1/1;position:relative;margin:0;opacity:0;visibility:hidden;transition:opacity .22s ease,visibility 0s linear .22s}
.entry-guide-shot.is-active{opacity:1;visibility:visible;transition:opacity .22s ease}
.entry-guide-zoom{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.entry-guide-zoom:focus-visible{outline:3px solid #18a7e6;outline-offset:-3px}
.entry-guide-shot img{width:100%;height:100%;object-fit:cover}
/* Markierung: heller Rahmen, Umgebung leicht abgedunkelt */
.entry-guide-mark{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);border:2px solid #42c9ff;border-radius:10px;box-shadow:0 0 0 9999px rgba(2,10,22,.38),0 0 0 6px rgba(66,201,255,.22);pointer-events:none}
.entry-guide-shot.is-active .entry-guide-mark{animation:nf-eg-mark 2.4s ease-in-out .3s infinite}
@keyframes nf-eg-mark{50%{box-shadow:0 0 0 9999px rgba(2,10,22,.38),0 0 0 11px rgba(66,201,255,.08)}}
.entry-guide-shot figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.entry-guide-nav{display:flex;align-items:center;gap:10px;margin-top:12px}
.entry-guide-where{flex:1;min-width:0;color:#5a7087;font-size:.86rem;font-weight:750;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.entry-guide-where b{color:#0b1d34;font-weight:850}
.entry-guide-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:0 18px;border:1px solid #cfdeeb;border-radius:999px;background:#fff;color:#0b1d34;font-size:.86rem;font-weight:850;cursor:pointer;transition:transform .16s ease-out,background-color .2s ease,border-color .2s ease}
.entry-guide-btn:hover{border-color:#9fcdee}
.entry-guide-btn:active{transform:scale(.97)}
.entry-guide-btn.is-next{background:var(--eg-blue);border-color:var(--eg-blue);color:#fff}
.entry-guide-btn:disabled{opacity:.4;cursor:default;transform:none}
.entry-guide-btn:focus-visible{outline:2px solid #18a7e6;outline-offset:2px}
.entry-guide:not(.is-ready) .entry-guide-nav,
.entry-guide:not(.is-ready) .entry-guide-progress{display:none}

/* Vergrößerung */
.entry-guide-dialog{width:min(1400px,calc(100vw - 32px));max-width:none;max-height:calc(100svh - 32px);padding:0;border:0;border-radius:16px;background:#0b1626;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.entry-guide-dialog::backdrop{background:rgba(2,10,22,.72)}
.entry-guide-dialog img{width:100%;height:auto;max-height:calc(100svh - 32px);object-fit:contain;cursor:zoom-out}
.entry-guide-dialog[open]{animation:nf-eg-dialog .22s cubic-bezier(.23,1,.32,1)}
@keyframes nf-eg-dialog{from{transform:scale(.97)}to{transform:none}}
.entry-guide-close{position:absolute;top:10px;right:10px;width:40px;height:40px;border:0;border-radius:50%;background:rgba(3,18,37,.72);color:#fff;font-size:1.3rem;line-height:1;cursor:pointer}
.entry-guide-close:focus-visible{outline:2px solid #42c9ff;outline-offset:2px}

/* Niedrige Laptop-Bildschirme: kompaktere Zeilen, Schriftgrößen bleiben */
@media (min-width:981px) and (max-height:940px){
  .entry-guide{margin-top:16px;grid-template-columns:minmax(0,560px) minmax(0,1fr)}
  .entry-guide-frame{width:min(100%,calc((100svh - 456px) * 4 / 3))}
  .entry-guide-tab{padding:2px 12px}
  .entry-guide .entry-step-no{width:34px;height:34px}
  .entry-guide-text{padding:0 18px 10px 60px}
  .entry-guide-progress{margin-bottom:6px}
  .entry-guide-nav{margin-top:8px}
}
@media (max-width:980px){
  .entry-guide{grid-template-columns:1fr;gap:18px}
  .entry-guide-rail{display:contents}
  .entry-guide-progress{order:-2;margin-bottom:-6px}
  .entry-guide-stage{position:static;order:-1}
  .entry-guide-frame{max-height:none}
}
@media (max-width:560px){
  .entry-guide-text{padding:0 14px 14px 14px}
  .entry-guide-tab{padding:7px 10px}
  .entry-guide-where{display:none}
  .entry-guide-nav{justify-content:space-between}
  .entry-guide-btn{flex:1}
}
@media (prefers-reduced-motion:reduce){
  .entry-guide-shot.is-active .entry-guide-mark,
  .entry-guide.is-ready .entry-guide-step.is-active .entry-guide-text,
  .entry-guide-dialog[open]{animation:none}
  .entry-guide-bar i,.entry-guide-shot{transition:none}
}
}