#portalLoader{
  position:fixed;
  inset:0;
  z-index:999999;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#080808;
  color:#fff;
  font-family:Inter,Arial,Helvetica,sans-serif;
  opacity:1;
  visibility:visible;
  transition:
    opacity .75s cubic-bezier(.22,.61,.36,1),
    visibility .75s ease,
    transform .75s cubic-bezier(.22,.61,.36,1),
    filter .75s ease;
}

#portalLoader.isHidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:scale(1.025);
  filter:blur(8px);
}

.portalBackdrop{
  position:absolute;
  inset:-10%;
  background:
    radial-gradient(
      circle at 50% 32%,
      rgba(230,66,49,.28),
      transparent 31%
    ),
    radial-gradient(
      circle at 14% 70%,
      rgba(166,42,57,.14),
      transparent 32%
    ),
    radial-gradient(
      circle at 84% 20%,
      rgba(255,120,104,.08),
      transparent 24%
    ),
    linear-gradient(
      145deg,
      #160807,
      #070707 55%,
      #170908
    );
  animation:portalBackdropMove 9s ease-in-out infinite alternate;
}

.portalGrid{
  position:absolute;
  inset:-20%;
  opacity:.13;
  background-image:
    linear-gradient(
      rgba(255,255,255,.055) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.055) 1px,
      transparent 1px
    );
  background-size:80px 80px;
  transform:
    perspective(700px)
    rotateX(64deg)
    translateY(35%);
  mask-image:
    linear-gradient(
      to bottom,
      transparent,
      rgba(0,0,0,.8),
      transparent
    );
  animation:portalGridDrift 14s linear infinite;
}

.portalLoaderGlow{
  position:absolute;
  width:650px;
  height:650px;
  border-radius:50%;
  background:
    radial-gradient(
      circle,
      rgba(236,72,55,.22),
      rgba(148,29,31,.08) 42%,
      transparent 69%
    );
  filter:blur(22px);
  animation:portalGlowPulse 3.4s ease-in-out infinite;
}

.portalLoaderCard{
  position:relative;
  z-index:5;
  width:min(560px,88vw);
  text-align:center;
}

.portalLogoWrap{
  position:relative;
  width:214px;
  height:214px;
  margin:0 auto 32px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.portalLogoRing{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:5px solid rgba(255,120,108,.82);
  box-shadow:
    0 0 36px rgba(229,66,51,.34),
    inset 0 0 38px rgba(229,66,51,.13);
}

.portalLogoOrbit{
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:5px solid transparent;
  border-top-color:#ffaea8;
  border-right-color:rgba(255,255,255,.22);
  animation:portalOrbit 1.55s linear infinite;
}

.portalLogoMark{
  position:relative;
  width:118px;
  height:128px;
  filter:
    drop-shadow(0 0 18px rgba(234,73,56,.38));
}

.portalLogoMark .markTop{
  position:absolute;
  top:4px;
  left:50%;
  width:106px;
  height:24px;
  transform:translateX(-50%);
  border-radius:58% 58% 42% 42%;
  background:#e14a38;
  clip-path:
    polygon(
      0 18%,
      42% 0,
      50% 36%,
      58% 0,
      100% 18%,
      82% 62%,
      58% 40%,
      50% 100%,
      42% 40%,
      18% 62%
    );
}

.portalLogoMark .markStem{
  position:absolute;
  top:24px;
  left:50%;
  width:34px;
  height:104px;
  transform:translateX(-50%);
  background:
    linear-gradient(
      180deg,
      #ea513f,
      #d93e30
    );
  clip-path:
    polygon(
      18% 0,
      82% 0,
      65% 100%,
      50% 94%,
      35% 100%
    );
}

.portalLogoMark .markWing{
  position:absolute;
  top:18px;
  width:44px;
  height:26px;
  border-top:9px solid #e14a38;
}

.portalLogoMark .markWing.left{
  left:0;
  transform:rotate(-13deg);
  border-radius:70% 0 0 0;
}

.portalLogoMark .markWing.right{
  right:0;
  transform:rotate(13deg);
  border-radius:0 70% 0 0;
}

.portalLoaderTitle{
  margin:0;
  font-size:72px;
  line-height:1;
  font-weight:950;
  letter-spacing:-4px;
  background:
    linear-gradient(
      180deg,
      #ffffff,
      #ffd6d1 46%,
      #eb685d 100%
    );
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:
    0 0 36px rgba(255,87,69,.15);
}

.portalLoaderTitle span{
  margin-left:3px;
  color:#e44a3b;
  background:none;
  -webkit-text-fill-color:#e44a3b;
  text-shadow:
    0 0 24px rgba(228,74,59,.28);
}

.portalLoaderSubtitle{
  margin-top:18px;
  color:rgba(255,255,255,.38);
  font-size:18px;
  font-weight:750;
  letter-spacing:10px;
  text-transform:uppercase;
}

.portalLoaderStatus{
  min-height:32px;
  margin-top:62px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:#91a6ff;
  font-size:21px;
  font-weight:800;
  transition:
    opacity .22s ease,
    transform .22s ease;
}

.portalLoaderStatus.isChanging{
  opacity:.35;
  transform:translateY(4px);
}

.portalLoaderStatusIcon{
  min-width:28px;
}

.portalProgressRow{
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:30px;
}

.portalProgressTrack{
  position:relative;
  flex:1;
  height:10px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.13);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.04);
}

.portalProgressBar{
  width:0;
  height:100%;
  border-radius:999px;
  background:
    linear-gradient(
      90deg,
      #ffaaa4,
      #ef7669 50%,
      #df493f
    );
  box-shadow:
    0 0 20px rgba(228,61,48,.44);
  transition:
    width .55s cubic-bezier(.22,.61,.36,1);
}

.portalProgressShine{
  position:absolute;
  top:0;
  bottom:0;
  width:90px;
  left:-120px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.5),
      transparent
    );
  transform:skewX(-20deg);
  animation:portalShine 1.8s linear infinite;
}

.portalProgressValue{
  min-width:56px;
  color:rgba(255,255,255,.5);
  font-size:18px;
  font-variant-numeric:tabular-nums;
  text-align:right;
}

.portalLoaderReady{
  margin-top:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:#9be18c;
  font-size:15px;
  font-weight:800;
  opacity:0;
  transform:translateY(8px);
  transition:
    opacity .35s ease,
    transform .35s ease;
}

.portalLoaderReady.isVisible{
  opacity:1;
  transform:translateY(0);
}

.readyDot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#78d76a;
  box-shadow:
    0 0 14px rgba(120,215,106,.7);
}

.portalLoaderVersion{
  margin-top:26px;
  color:rgba(255,255,255,.22);
  font-size:12px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
}

.portalParticle{
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(255,255,255,.42);
  animation:portalFloat 4.5s ease-in-out infinite;
}

.portalParticle.p1{
  left:9%;
  top:50%;
  animation-delay:.2s;
}

.portalParticle.p2{
  right:8%;
  top:17%;
  animation-delay:1.1s;
}

.portalParticle.p3{
  right:18%;
  bottom:10%;
  animation-delay:1.8s;
}

.portalParticle.p4{
  left:24%;
  bottom:20%;
  animation-delay:2.4s;
}

.portalParticle.p5{
  right:31%;
  top:46%;
  animation-delay:3.1s;
}

@keyframes portalOrbit{
  to{
    transform:rotate(360deg);
  }
}

@keyframes portalBackdropMove{
  from{
    transform:scale(1) translate3d(0,0,0);
  }

  to{
    transform:scale(1.06) translate3d(0,-1.2%,0);
  }
}

@keyframes portalGridDrift{
  from{
    background-position:0 0,0 0;
  }

  to{
    background-position:0 160px,160px 0;
  }
}

@keyframes portalGlowPulse{
  0%,
  100%{
    transform:scale(.96);
    opacity:.75;
  }

  50%{
    transform:scale(1.05);
    opacity:1;
  }
}

@keyframes portalShine{
  to{
    left:115%;
  }
}

@keyframes portalFloat{
  0%,
  100%{
    transform:translateY(0) scale(.85);
    opacity:.28;
  }

  50%{
    transform:translateY(-18px) scale(1.05);
    opacity:.82;
  }
}

@media(max-width:700px){
  .portalLogoWrap{
    width:160px;
    height:160px;
  }

  .portalLogoMark{
    width:88px;
    height:96px;
  }

  .portalLogoMark .markTop{
    width:80px;
    height:18px;
  }

  .portalLogoMark .markStem{
    top:19px;
    width:26px;
    height:78px;
  }

  .portalLogoMark .markWing{
    width:34px;
    height:20px;
    border-top-width:7px;
  }

  .portalLoaderTitle{
    font-size:48px;
    letter-spacing:-2px;
  }

  .portalLoaderSubtitle{
    font-size:14px;
    letter-spacing:6px;
  }

  .portalLoaderStatus{
    margin-top:44px;
    font-size:17px;
  }

  .portalLoaderVersion{
    font-size:10px;
  }
}


/* TESLAPLAY24 DASHBOARD LOADER THEME */

/*
 * Gleiche Farbwelt wie das neue Dashboard:
 * warmes Tesla Orange, Anthrazit und dezente Glasoptik.
 */

#portalLoader{

  background:
    #15191f;

}


/*
 * Hintergrund ähnlich dem Dashboard,
 * aber ohne Bild damit der Loader ruhig bleibt.
 */

.portalBackdrop{

  background:

    radial-gradient(
      circle at 16% 26%,
      rgba(224,126,82,.28),
      transparent 34%
    ),

    radial-gradient(
      circle at 82% 18%,
      rgba(225,111,78,.10),
      transparent 27%
    ),

    linear-gradient(
      145deg,
      #24211e 0%,
      #171a1e 42%,
      #111419 100%
    ) !important;

}


/*
 * Grid deutlich dezenter.
 */

.portalGrid{

  opacity:.075 !important;

}


/*
 * Orange Glow statt kräftigem Rot.
 */

.portalLoaderGlow{

  background:

    radial-gradient(
      circle,
      rgba(224,112,78,.27),
      rgba(199,92,65,.10) 42%,
      transparent 69%
    ) !important;

}


/*
 * Logo-Ring passend zur Startseite.
 */

.portalLogoRing{

  border-color:
    rgba(226,119,86,.82) !important;

  box-shadow:

    0 0 38px
    rgba(221,104,75,.27),

    inset 0 0 38px
    rgba(221,104,75,.10) !important;

}


.portalLogoOrbit{

  border-top-color:
    #efa083 !important;

  border-right-color:
    rgba(255,255,255,.23) !important;

}


.portalLogoMark{

  filter:
    drop-shadow(
      0 0 18px
      rgba(222,105,76,.32)
    ) !important;

}


.portalLogoMark .markTop,
.portalLogoMark .markWing{

  background:
    #dc7153 !important;

  border-top-color:
    #dc7153 !important;

}


.portalLogoMark .markStem{

  background:

    linear-gradient(
      180deg,
      #e27a5a,
      #cf6047
    ) !important;

}


/*
 * TeslaPlay24 Titel.
 */

.portalLoaderTitle{

  background:

    linear-gradient(
      180deg,
      #ffffff,
      #f3eee9 48%,
      #dc7658 100%
    ) !important;

  -webkit-background-clip:
    text !important;

  background-clip:
    text !important;

  color:
    transparent !important;

  text-shadow:

    0 0 34px
    rgba(220,111,81,.12) !important;

}


.portalLoaderTitle span{

  color:
    #df7354 !important;

  -webkit-text-fill-color:
    #df7354 !important;

  text-shadow:

    0 0 22px
    rgba(223,115,84,.24) !important;

}


/*
 * Status nicht mehr blau.
 */

.portalLoaderStatus{

  color:
    #f0a184 !important;

}


/*
 * Progressbar wie Dashboard-Akzent.
 */

.portalProgressBar{

  background:

    linear-gradient(
      90deg,
      #efaa8e,
      #df7959 50%,
      #cf6048
    ) !important;

  box-shadow:

    0 0 20px
    rgba(219,104,76,.38) !important;

}


/*
 * Card etwas kompakter für Tesla Display.
 */

.portalLoaderCard{

  width:
    min(500px,86vw) !important;

}


.portalLogoWrap{

  width:180px !important;

  height:180px !important;

  margin-bottom:
    27px !important;

}


.portalLogoMark{

  transform:
    scale(.86);

}


.portalLoaderTitle{

  font-size:
    62px !important;

}


.portalLoaderSubtitle{

  margin-top:
    14px !important;

  font-size:
    14px !important;

  letter-spacing:
    8px !important;

}


.portalLoaderStatus{

  margin-top:
    44px !important;

  font-size:
    18px !important;

}


.portalProgressRow{

  margin-top:
    24px !important;

}


/*
 * Beim fertigen Laden zusätzlich leicht auszoomen.
 */

#portalLoader.isHidden{

  transform:
    scale(1.04) !important;

}