.zeitportal {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  overflow: hidden; visibility: hidden; opacity: 0; pointer-events: none;
  isolation: isolate; color: #fff3d3; font-family: Georgia, serif; text-align: center;
  background: radial-gradient(ellipse at center, #173e71 0, #091b39 48%, #020714 85%);
}
.zeitportal::before, .zeitportal::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.zeitportal::before { background: radial-gradient(circle, transparent 15%, rgb(1 5 17 / .85) 80%); }
.zeitportal::after { z-index: 5; opacity: 0; background: radial-gradient(circle, #fffef0 0 8%, #9bdcff 26%, rgb(15 57 117 / 0) 72%); }
.zeitportal--abflug { visibility: visible; animation: zeitportal-abflug 2.1s ease-out forwards; }
.zeitportal--ankunft { visibility: visible; animation: zeitportal-ankunft 1.55s ease-in forwards; }
.zeitportal--abflug::after { animation: zeitportal-lichtblitz 2.1s ease-in forwards; }
.zeitportal--ankunft::after { animation: zeitportal-lichtblitz-zurueck 1.55s ease-out forwards; }
.zeitportal__strahlen, .zeitportal__funken, .zeitportal__ring, .zeitportal__mitte { grid-area: 1 / 1; }
.zeitportal__strahlen {
  width: 130vmax; aspect-ratio: 1; border-radius: 50%; opacity: .45;
  background: repeating-conic-gradient(from 4deg, transparent 0deg 9deg, rgb(118 196 255 / .32) 9.4deg 9.8deg, transparent 10.3deg 18deg);
  -webkit-mask: radial-gradient(circle, transparent 0 15%, #000 32%, transparent 64%);
  mask: radial-gradient(circle, transparent 0 15%, #000 32%, transparent 64%);
  animation: zeitportal-strahlen 12s linear infinite;
}
.zeitportal__funken {
  width: min(105vmin, 950px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 8% 47%, #fff3bf 0 2px, transparent 5px),
    radial-gradient(circle at 20% 16%, #8ed7ff 0 3px, transparent 6px),
    radial-gradient(circle at 36% 91%, #fff3bf 0 2px, transparent 5px),
    radial-gradient(circle at 76% 7%, #fff3bf 0 3px, transparent 6px),
    radial-gradient(circle at 91% 36%, #8ed7ff 0 2px, transparent 5px),
    radial-gradient(circle at 77% 81%, #8ed7ff 0 3px, transparent 6px);
  filter: drop-shadow(0 0 9px #87cbff); animation: zeitportal-funken 8s linear infinite;
}
.zeitportal__ring {
  position: relative; width: min(74vmin, 660px); aspect-ratio: 1;
  border: clamp(8px, 1.7vmin, 17px) ridge #c69b55; border-radius: 50%;
  background: radial-gradient(circle at 39% 38%, rgb(242 254 255 / .7), transparent 7%),
    radial-gradient(circle at 60% 67%, #112956 0, #276fbd 25%, #5fbcf0 43%, #153e78 65%, #061a3e 79%);
  box-shadow: 0 0 0 3px #5b3a1d, 0 0 0 10px rgb(235 198 124 / .23),
    0 0 65px 16px rgb(81 166 255 / .8), 0 0 125px 35px rgb(38 108 219 / .45),
    inset 0 0 35px 8px #ffe2a1, inset 0 0 95px 16px #68befe;
}
.zeitportal__ring::before, .zeitportal__ring::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.zeitportal__ring::before {
  inset: -13%;
  background: repeating-conic-gradient(from 0deg, #f7dfa2 0deg 1.5deg, transparent 2deg 14deg, #f7dfa2 14.5deg 16deg, transparent 16.5deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 0 43%, #000 44% 48%, transparent 49%);
  mask: radial-gradient(circle, transparent 0 43%, #000 44% 48%, transparent 49%);
  filter: drop-shadow(0 0 8px #f2d18a); animation: zeitportal-runen 13s linear infinite;
}
.zeitportal__ring::after {
  inset: 9%; border: 3px dashed rgb(255 233 173 / .9);
  box-shadow: 0 0 22px #ffe2a1, inset 0 0 25px #87caff;
  animation: zeitportal-runen 8s linear infinite reverse;
}
.zeitportal__wirbel {
  position: absolute; inset: 19%; border-radius: 50%;
  background: conic-gradient(from 10deg, transparent, rgb(199 239 255 / .75), transparent 25%, #285fa5 38%, rgb(234 250 255 / .9) 52%, transparent 71%, #4ca4e6 88%, transparent);
  filter: blur(13px); mix-blend-mode: screen; animation: zeitportal-wirbel 2.7s linear infinite;
}
.zeitportal__blitz {
  position: absolute; inset: 24%; border-radius: 50%; opacity: .85;
  background: radial-gradient(ellipse 3px 48% at 32% 50%, #eaf9ff 0, transparent 100%),
    radial-gradient(ellipse 4px 43% at 72% 48%, #eaf9ff 0, transparent 100%);
  filter: drop-shadow(0 0 9px #b9e9ff); animation: zeitportal-blitze 1.2s steps(2, end) infinite;
}
.zeitportal__mitte { z-index: 2; display: grid; gap: .5em; padding: 18px; text-shadow: 0 3px 14px #07152b, 0 0 32px #5cb6ff; }
.zeitportal__text { font-size: clamp(1rem, 2.8vmin, 1.7rem); letter-spacing: .11em; text-transform: uppercase; }
.zeitportal__ziel { color: #ffe2a1; font-size: clamp(1.6rem, 4.5vmin, 3rem); font-weight: bold; letter-spacing: .06em; }
.zeitportal__text, .zeitportal__ziel { display: none; }
.zeitportal[data-ziel="classic"] .zeitportal__text--classic,
.zeitportal[data-ziel="classic"] .zeitportal__ziel--classic,
.zeitportal[data-ziel="original-2006"] .zeitportal__text--original-2006,
.zeitportal[data-ziel="original-2006"] .zeitportal__ziel--original-2006,
.zeitportal[data-ziel="forever"] .zeitportal__text--forever,
.zeitportal[data-ziel="forever"] .zeitportal__ziel--forever { display: block; }
.zeitportal--abflug .zeitportal__ring { animation: zeitportal-oeffnen 2.1s cubic-bezier(.14,.7,.23,1) forwards; }
.zeitportal--ankunft .zeitportal__ring { animation: zeitportal-schliessen 1.55s cubic-bezier(.72,0,.95,.57) forwards; }
.zeitportal--abflug .zeitportal__mitte { animation: zeitportal-schrift 2.1s ease-out forwards; }
@keyframes zeitportal-runen { to { transform: rotate(360deg); } }
@keyframes zeitportal-wirbel { to { transform: rotate(-360deg); } }
@keyframes zeitportal-strahlen { to { transform: rotate(360deg); } }
@keyframes zeitportal-funken { to { transform: rotate(-360deg); } }
@keyframes zeitportal-blitze { 0%, 48% { opacity: .16; transform: rotate(19deg); } 50%, 100% { opacity: .95; transform: rotate(-20deg); } }
@keyframes zeitportal-abflug { 0% { opacity: 0; } 13%, 100% { opacity: 1; } }
@keyframes zeitportal-ankunft { 0%, 72% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
@keyframes zeitportal-oeffnen { 0% { opacity: .25; transform: scale(.13) rotate(-44deg); filter: blur(16px); } 37% { opacity: 1; filter: blur(0); } 77% { transform: scale(1) rotate(7deg); } 100% { transform: scale(1.75) rotate(27deg); } }
@keyframes zeitportal-schliessen { 0% { transform: scale(1.75) rotate(27deg); } 100% { opacity: .1; transform: scale(.13) rotate(90deg); filter: blur(15px); } }
@keyframes zeitportal-schrift { 0%, 20% { opacity: 0; transform: translateY(14px); } 38%, 72% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes zeitportal-lichtblitz { 0%, 73% { opacity: 0; transform: scale(.2); } 91% { opacity: .65; } 100% { opacity: 1; transform: scale(1.5); } }
@keyframes zeitportal-lichtblitz-zurueck { 0% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (max-width: 600px) {
  .zeitportal__ring { width: 82vmin; }
  .zeitportal__strahlen { width: 170vmax; }
  .zeitportal__text { font-size: .82rem; letter-spacing: .06em; }
}