.itn-sequence{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  text-decoration:none;
  color:inherit;
  line-height:1;
  white-space:nowrap;
}

.itn-sequence .phase{
  transition:opacity .25s ease, transform .25s ease;
}

.itn-sequence .phase-2,
.itn-sequence .phase-3{
  opacity:0;
  transform:translateY(4px);
}

/* Phase 2 sichtbar */
.itn-sequence.show-phase-2 .phase-1{
  opacity:0;
  transform:translateY(-4px);
}
.itn-sequence.show-phase-2 .phase-2{
  opacity:1;
  transform:translateY(0);
}

/* Phase 3 (Logo) sichtbar */
.itn-sequence.show-logo .phase-2{
  opacity:0;
  transform:translateY(-4px);
}
.itn-sequence.show-logo .phase-3{
  opacity:1;
  transform:translateY(0);
}

/* Logo (img fallback) */
.itn-logo-img{
  width:28px;
  height:28px;
  display:block;
  transform:scale(.96);
  transition:transform .25s ease, filter .25s ease;
}
.itn-sequence.show-logo .itn-logo-img{
  transform:scale(1);
}

/* Inline SVG Basis */
.itn-logo-wrap svg{
  width:28px;
  height:28px;
  display:block;
}

/* Draw-Animation nur, wenn du im SVG Pfade mit .stroke versiehst */
.itn-logo-wrap .stroke{
  fill:none;
  stroke:currentColor;
  stroke-width:10;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:1200;
  stroke-dashoffset:1200;
  transition:stroke-dashoffset 1s ease;
}
.itn-sequence.show-logo .itn-logo-wrap .stroke{
  stroke-dashoffset:0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .itn-sequence .phase,
  .itn-logo-img,
  .itn-logo-wrap .stroke{
    transition:none !important;
  }
}


/* --- Draw-like Reveal für exaktes (filled) SVG --- */
/* Nutzt eine animierte Mask (Wipe) + minimalen Glow. Fallback bleibt opacity/scale. */
.itn-logo-wrap{
  display:block;
  /* start hidden for wipe */
  -webkit-mask-size: 220% 100%;
  mask-size: 220% 100%;
  -webkit-mask-position: 110% 0;
  mask-position: 110% 0;
}

/* Wipe Maske: von links nach rechts, mit weicher Kante */
@supports (-webkit-mask-image: linear-gradient(#000, transparent)) or (mask-image: linear-gradient(#000, transparent)) {
  .itn-logo-wrap{
    -webkit-mask-image: linear-gradient(90deg,
      transparent 0%,
      #000 18%,
      #000 82%,
      transparent 100%
    );
    mask-image: linear-gradient(90deg,
      transparent 0%,
      #000 18%,
      #000 82%,
      transparent 100%
    );
  }

  .itn-sequence.show-logo .itn-logo-wrap{
    animation: itnLogoWipe 0.95s ease forwards;
    filter: drop-shadow(0 0 6px rgba(77,163,255,.22));
  }
}

@keyframes itnLogoWipe{
  from{
    -webkit-mask-position: 110% 0;
    mask-position: 110% 0;
    transform: scale(.98);
  }
  to{
    -webkit-mask-position: -10% 0;
    mask-position: -10% 0;
    transform: scale(1);
  }
}


/* Pulse Sync (läuft einmal kurz passend zum Logo-Reveal) */
.itn-logo-wrap .itn-pulse-sync{
  fill:none;
  stroke:currentColor;
  stroke-width:18;
  stroke-linecap:round;
  stroke-linejoin:round;

  opacity:0;
  stroke-dasharray:520;
  stroke-dashoffset:520;
}

.itn-sequence.show-logo .itn-logo-wrap .itn-pulse-sync{
  animation: itnPulseRun .85s ease .12s both;
  filter: drop-shadow(0 0 8px rgba(77,163,255,.28));
}

@keyframes itnPulseRun{
  0%   { opacity:0; stroke-dashoffset:520; }
  12%  { opacity:1; }
  70%  { opacity:1; stroke-dashoffset:0; }
  100% { opacity:0; stroke-dashoffset:0; }
}

/* Reduced motion: keine Pulse-Animation */
@media (prefers-reduced-motion: reduce){
  .itn-sequence.show-logo .itn-logo-wrap .itn-pulse-sync{
    animation:none !important;
    opacity:0 !important;
  }
}


/* --- Loader + Center Overlay --- */
.itn-sequence .phase-loading{
  opacity:0;
  transform:translateY(4px);
  transition:opacity .25s ease, transform .25s ease;
}

.itn-sequence.show-loading .phase-2{
  opacity:0;
  transform:translateY(-4px);
}
.itn-sequence.show-loading .phase-loading{
  opacity:1;
  transform:translateY(0);
}

.itn-loader{
  position:relative;
  width:110px;
  height:8px;
  border-radius:999px;
  background: rgba(255,255,255,.12);
  overflow:hidden;
}

.itn-loader-bar{
  position:absolute;
  inset:0;
  width:0%;
  background: currentColor;
  border-radius:999px;
}

.itn-sequence.is-loading .itn-loader-bar{
  animation: itnLoadTo100 var(--itn-load-duration, .9s) ease forwards;
}

@keyframes itnLoadTo100{
  from{ width:0%; }
  to{ width:100%; }
}

/* Modal overlay (fixed, centered) */


.itn-sequence.show-modal 



.itn-modal-logo{
  display:block;
  width:180px;
  height:180px;
}

.itn-modal-logo svg,
.itn-modal-logo img{
  width:100%;
  height:100%;
  display:block;
}

.itn-modal-loader{
  display:flex;
  align-items:center;
  gap:10px;
}

.itn-loader--modal{
  width:220px;
  height:10px;
}

.itn-loader-text{
  font-size:12px;
  opacity:.85;
}

@media (prefers-reduced-motion: reduce){
  
  .itn-sequence.is-loading .itn-loader-bar{ animation:none !important; width:100% !important; }
}


/* --- v1.2 Layout: Text + Loader darunter, Switch bei 50%, Logo bei 100% --- */
.itn-stack{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}

.itn-text{
  transition: opacity .2s ease, transform .2s ease;
  line-height:1.05;
}

.itn-text-2{ opacity:0; transform: translateY(2px); }
.itn-logo-big{ opacity:0; transform: translateY(6px) scale(.98); transition: opacity .25s ease, transform .25s ease; }

.itn-loader--undertext{
  width: 180px;
  height: 8px;
}

/* Loading starts immediately on hover */
.itn-sequence.is-loading .itn-loader-bar{
  animation: itnLoadTo100 var(--itn-load-duration, .9s) linear forwards;
}

/* At 50%: swap text */
.itn-sequence.at-half .itn-text-1{
  opacity:0; transform: translateY(-2px);
}
.itn-sequence.at-half .itn-text-2{
  opacity:1; transform: translateY(0);
}

/* At 100%: show logo above loader, keep IT-Nordheide visible */
.itn-sequence.at-done .itn-logo-big{
  opacity:1; transform: translateY(0) scale(1);
}

/* Make the big logo actually big but not insane */
.itn-logo-big svg,
.itn-logo-big img{
  width: 160px;
  height: 160px;
  display:block;
}

/* Wipe reveal for filled SVG remains (applies to logo inside .itn-logo-wrap).
   Ensure modal rules (if any) don't interfere: */


/* Reduced motion: no animations, immediate states on hover */
@media (prefers-reduced-motion: reduce){
  .itn-sequence.is-loading .itn-loader-bar{ animation:none !important; width:100% !important; }
}


/* --- v1.2.1: Loader direkt unter Text; IT-Nordheide erscheint rechts daneben; Logo als Overlay --- */
.itn-stack{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}

.itn-row{
  display:inline-flex;
  align-items:baseline;
  gap:10px;
}

.itn-text{
  transition: opacity .2s ease, transform .2s ease;
  line-height:1.05;
}

.itn-text-2{
  opacity:0;
  transform: translateY(1px);
}

/* At 50% show IT-Nordheide to the right (text1 stays) */
.itn-sequence.at-half .itn-text-2{
  opacity:1;
  transform: translateY(0);
}

.itn-loader--undertext{
  width: 240px;
  height: 8px;
}

/* --- Overlay modal (enabled again) --- */


.itn-sequence.at-done 



.itn-modal-logo{
  display:block;
  width:min(42vw, 240px);
  height:min(42vw, 240px);
}

.itn-modal-logo svg,
.itn-modal-logo img{
  width:100%;
  height:100%;
  display:block;
}

/* Keep wipe reveal for filled SVG inside itn-logo-wrap (modal uses same markup). */
@supports (-webkit-mask-image: linear-gradient(#000, transparent)) or (mask-image: linear-gradient(#000, transparent)) {
  .itn-sequence.at-done .itn-modal-logo .itn-logo-wrap{
    animation: itnLogoWipe 0.95s ease forwards;
    filter: drop-shadow(0 0 10px rgba(77,163,255,.28));
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  
}


/* --- v1.2.3 fixes --- */
/* Some earlier versions disabled the modal; force-enable it here. */


/* Ensure loader bar is visible and animates from 0 */
.itn-loader-bar{
  width:0%;
}


/* --- Boot Complete Glow-Peak (subtil) --- */

.itn-sequence.at-done .itn-modal-logo{
  animation: itnLogoPop 420ms ease-out both;
  filter: drop-shadow(0 0 4px rgba(77,163,255,.12));
}

  55%  { filter: drop-shadow(0 0 4px rgba(77,163,255,.14)); }
  100% { filter: drop-shadow(0 0 2px rgba(77,163,255,.08)); }
}

@keyframes itnLogoPop{
  0%   { transform: scale(.985); opacity: 0.0; }
  35%  { opacity: 1.0; }
  100% { transform: scale(1); opacity: 1.0; }
}

@media (prefers-reduced-motion: reduce){
  .itn-sequence.at-done .itn-loader,
  .itn-sequence.at-done .itn-modal-logo{
    animation:none !important;
    filter:none !important;
  }
}


/* Loading complete text */
.itn-complete{
  font-size: 12px;
  opacity: .82;
  letter-spacing: .02em;
  transform: translateY(-2px);
}


/* --- v1.2.6 overlay cleanup (no overglow) --- */




.itn-modal-logo{
  /* ensure crisp edges */
  filter: none !important;
}

.itn-complete{
  margin-top: 6px;
  font-size: 12px;
  opacity: .78;
  letter-spacing: .02em;
}


/* --- v1.2.7 Clean Light Overlay --- */

.itn-modal{
  pointer-events:none;
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity .2s ease;
  z-index:99999;
  background: rgba(255,255,255,.82);
}

.itn-sequence.at-done .itn-modal{
  opacity:1;
}

.itn-modal-card{
  background:#ffffff;
  border-radius:22px;
  padding:26px 30px 22px;
  box-shadow:0 20px 60px rgba(0,0,0,.12);
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Force logo lines to CI blue */
.itn-modal-logo svg{
  color:#4da3ff !important;
}

.itn-modal-logo svg path,
.itn-modal-logo svg circle{
  stroke:#4da3ff !important;
  fill:none !important;
}

.itn-modal-logo{
  width:min(44vw,260px);
  height:min(44vw,260px);
  margin-bottom:10px;
}

.itn-complete{
  font-size:13px;
  color:#4da3ff;
  opacity:.75;
  letter-spacing:.04em;
  text-transform:uppercase;
}


/* --- v1.2.8 Stage @80% and @100%, remove uneven mask overexposure --- */

/* Overlay: no white wash; subtle dark scrim only */
.itn-modal{
  background: rgba(0,0,0,.18) !important;
}

/* Show overlay from 80% onward */
.itn-sequence.at-80 .itn-modal,
.itn-sequence.at-done .itn-modal{
  opacity:1 !important;
}

/* Disable any mask wipe inside modal to avoid one-sided "overglow"/wash */
.itn-modal-logo .itn-logo-wrap{
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-mask-position: 0 0 !important;
  mask-position: 0 0 !important;
}

/* Color staging */
:root{
  --itn-blue-light: #9fc8ff;
  --itn-blue-dark:  #2f73d6;
}

/* Default: light blue at 80% */
.itn-sequence.at-80 .itn-modal-logo svg{
  color: var(--itn-blue-light) !important;
}
.itn-sequence.at-80 .itn-modal-logo svg path,
.itn-sequence.at-80 .itn-modal-logo svg circle{
  stroke: var(--itn-blue-light) !important;
}

/* At 100%: darker blue */
.itn-sequence.at-done .itn-modal-logo svg{
  color: var(--itn-blue-dark) !important;
}
.itn-sequence.at-done .itn-modal-logo svg path,
.itn-sequence.at-done .itn-modal-logo svg circle{
  stroke: var(--itn-blue-dark) !important;
}

/* Status lines: show "Loading" at 80%, switch to "Loading complete" at 100% */
.itn-status{
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.78;
}

.itn-status-loading{ display:none; color: var(--itn-blue-light); }
.itn-status-complete{ display:none; color: var(--itn-blue-dark); }

.itn-sequence.at-80 .itn-status-loading{ display:block; }
.itn-sequence.at-done .itn-status-loading{ display:none; }
.itn-sequence.at-done .itn-status-complete{ display:block; }

/* Ensure logo stays crisp */
.itn-modal-logo{
  filter:none !important;
}


/* --- v1.3.0: No logo overlay, only loader + text sequence --- */
.itn-modal{ display:none !important; }

.itn-text-2{
  opacity:0;
  transform: translateY(1px);
  transition: opacity .2s ease, transform .2s ease;
}

.itn-sequence.at-half .itn-text-2{
  opacity:1;
  transform: translateY(0);
}

.itn-complete{
  margin-top: 4px;
  font-size: 12px;
  opacity: 0;
  transition: opacity .2s ease;
}

.itn-sequence.at-done .itn-complete{
  opacity: .78;
}


/* --- v1.3.1: "Öffnen" Button (safe) --- */
.itn-sequence{
  cursor: default;
}

.itn-open-btn{
  display:inline-block;
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  text-decoration:none;
  font-size: 12px;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translateY(2px);
  transition: opacity .18s ease, transform .18s ease;
  color: inherit;
  background: rgba(255,255,255,.55);
}

.itn-sequence.at-done .itn-open-btn{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}


/* Loading complete color configurable */
.itn-complete{ color: var(--itn-complete-color, currentColor); }