@keyframes gbTrIn {
  from { opacity: 0; transform: translateY(8px) scale(0.995); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes gbTrOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes gbBar {
  0% { transform: scaleX(0); }
  60% { transform: scaleX(1); }
  100% { transform: scaleX(1); }
}

.gb-transition{
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: none;
  place-items: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(63,116,181,0.18) 0, transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(21,53,88,0.30) 0, transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(5,8,22,0.55) 0, rgba(5,8,22,0.78) 55%, rgba(5,8,22,0.90) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.gb-transition.is-active{ display: grid; }

.gb-transition__card{
  width: min(520px, 92vw);
  border-radius: 22px;
  border: 1px solid rgba(221,230,243,0.16);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 26px 70px rgba(0,0,0,0.35);
  padding: 18px 18px 16px;
  text-align: center;
  transform: translateZ(0);
}

.gb-transition.is-enter .gb-transition__card{
  animation: gbTrIn .42s ease-out both;
}
.gb-transition.is-leave .gb-transition__card{
  animation: gbTrOut .36s ease-out both;
}

.gb-transition__icon{
  width: 68px;
  height: 68px;
  margin: 0 auto 10px;
  display: grid;
  place-items: center;
}
.gb-transition__svg{ width: 100%; height: 100%; }

.gb-transition__stroke{
  fill: none;
  stroke: rgba(221,230,243,0.92);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gb-transition__stroke--accent{
  stroke: rgba(63,116,181,0.95);
  stroke-width: 2.6;
}

.gb-transition__brand{
  font-family: "widescreen", sans-serif;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: rgba(249,250,251,0.96);
  font-size: 18px;
  margin-bottom: 4px;
}

.gb-transition__sub{
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(221,230,243,0.78);
  margin-bottom: 12px;
  font-family: "widescreen", sans-serif;
  font-weight: 200;
}

.gb-transition__bar{
  height: 3px;
  border-radius: 999px;
  background: rgba(221,230,243,0.16);
  overflow: hidden;
  position: relative;
}
.gb-transition__bar::after{
  content:"";
  position:absolute;
  inset: 0;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(63,116,181,0.10), rgba(221,230,243,0.42), rgba(63,116,181,0.10));
  animation: gbBar .62s ease-out both;
}
/* ==========================================
   Transition Overlay: Weißes Premium-Panel + Lesbarkeit
   ========================================== */

/* Hintergrund des Overlays: hell wie Index */
.gb-transition{
  background:
    radial-gradient(circle at 22% 18%, rgba(63,116,181,0.14) 0, transparent 55%),
    radial-gradient(circle at 86% 78%, rgba(221,230,243,0.18) 0, transparent 60%),
    linear-gradient(155deg, #f6f8fc 0%, #e8eef7 45%, #dde6f3 100%) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Card selbst: weiß/glasig, nicht dunkel */
.gb-transition__card{
  background: rgba(255,255,255,0.78) !important;
  border: 1px solid rgba(148,163,184,0.40) !important;
  box-shadow: 0 26px 70px rgba(15,23,42,0.18) !important;
}

/* Icon-Linien: dunkel statt weiß */
.gb-transition__stroke{
  stroke: rgba(21,53,88,0.88) !important;
}
.gb-transition__stroke--accent{
  stroke: rgba(63,116,181,0.95) !important;
}

/* Subline: dunkler, damit lesbar */
.gb-transition__sub{
  color: rgba(21,53,88,0.70) !important;
}

/* Progress-Bar: helles Styling */
.gb-transition__bar{
  background: rgba(21,53,88,0.10) !important;
}
.gb-transition__bar::after{
  background: linear-gradient(
    90deg,
    rgba(21,53,88,0.10),
    rgba(63,116,181,0.45),
    rgba(21,53,88,0.10)
  ) !important;
}