:root{
  --bg1:#061522;
  --bg2:#01060b;
  --panel:#07131d;
  --panel2:#02090f;
  --line:#173246;
  --cyan:#0cbdf2;
  --orange:#f4a000;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
}

body{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:32px;
  background:
    radial-gradient(circle at 50% 0%, rgba(0,135,200,.16), transparent 42%),
    linear-gradient(145deg,var(--bg1),var(--bg2) 62%,#000307);
  font-family:Arial,Helvetica,sans-serif;
}

/* 2 Kästen je 300x300, Abstand 50, Außenrahmen 10 */
.logo-frame{
  position:relative;
  display:grid;
  grid-template-columns:300px 300px;
  gap:50px;
  width:max-content;
  padding:20px;
  border:10px solid #0a1721;
  border-radius:22px;
  background:linear-gradient(150deg,rgba(8,26,39,.98),rgba(1,8,13,.98));
  box-shadow:
    0 30px 65px rgba(0,0,0,.78),
    0 10px 24px rgba(0,0,0,.58),
    inset 0 0 0 1px rgba(71,124,158,.22),
    inset 0 0 34px rgba(0,0,0,.72);
}



.running-border{
  position:absolute;
  inset:-10px;
  z-index:4;
  width:calc(100% + 20px);
  height:calc(100% + 20px);
  overflow:visible;
  pointer-events:none;
}

.border-track,
.border-runner{
  fill:none;
  vector-effect:non-scaling-stroke;
  stroke-width:4;
  stroke-linecap:round;
  stroke-dasharray:46 2074;
  animation:border-walk 7s linear infinite;
}

.border-track{
  stroke:rgba(30,59,78,.68);
  stroke-width:10;
}

.border-runner{
  stroke-width:5;
  stroke-linecap:round;
  stroke-dasharray:82 2038;
  animation:border-walk 7s linear infinite;
  filter:drop-shadow(0 0 7px currentColor);
}

.border-runner-cyan{
  color:#0cbdf2;
  stroke:#0cbdf2;
  animation-delay:-3.5s;
}

.border-runner-orange{
  color:#f4a000;
  stroke:#f4a000;
}

@keyframes border-walk{
  from{stroke-dashoffset:0}
  to{stroke-dashoffset:-2120}
}



.logo-frame:hover .border-runner{
  opacity:1;
}

@media(prefers-reduced-motion:reduce){
  .border-runner{
    animation:none;
  }
}

.logo-card{
  position:relative;
  width:300px;
  height:300px;
  display:grid;
  place-items:center;
  overflow:hidden;
  text-decoration:none;
  border:1px solid rgba(70,119,148,.34);
  border-radius:16px;
  background:
    radial-gradient(circle at 50% 42%,rgba(23,80,111,.17),transparent 56%),
    linear-gradient(150deg,#0a2030,#020a11 74%);
  box-shadow:
    0 18px 34px rgba(0,0,0,.72),
    0 5px 12px rgba(0,0,0,.52),
    inset 0 0 0 1px rgba(255,255,255,.02),
    inset 0 0 28px rgba(0,0,0,.62);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    filter .18s ease;
}

.logo-card::after{
  content:"";
  position:absolute;
  left:24px;
  right:24px;
  bottom:12px;
  height:2px;
  opacity:.72;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
}

.logo-card:nth-child(2)::after{
  background:linear-gradient(90deg,transparent,var(--orange),transparent);
}

.logo-card:hover,
.logo-card:focus-visible{
  z-index:2;
  transform:translateY(-8px);
  border-color:rgba(12,189,242,.92);
  filter:none;
  box-shadow:
    0 28px 48px rgba(0,0,0,.84),
    0 0 22px rgba(12,189,242,.68),
    0 0 48px rgba(12,189,242,.22),
    inset 0 0 30px rgba(12,189,242,.06);
  outline:none;
}

.logo-card:nth-child(2):hover,
.logo-card:nth-child(2):focus-visible{
  border-color:rgba(244,160,0,.92);
  box-shadow:
    0 28px 48px rgba(0,0,0,.84),
    0 0 22px rgba(244,160,0,.64),
    0 0 48px rgba(244,160,0,.20),
    inset 0 0 30px rgba(244,160,0,.06);
}

.logo-card img{
  display:block;
  width:286px;
  height:286px;
  object-fit:contain;
  object-position:center;
  filter:
    drop-shadow(0 15px 16px rgba(0,0,0,.82))
    drop-shadow(0 4px 5px rgba(0,0,0,.58));
  transition:transform .18s ease,filter .18s ease;
}

.logo-card-ingo img{
  width:282px;
  height:274px;
  max-width:282px;
  max-height:274px;
  object-fit:contain;
  object-position:center;
}

.logo-card-panda img{
  width:270px;
  height:270px;
  max-width:none;
  max-height:none;
}

.logo-card:hover img,
.logo-card:focus-visible img{
  transform:none;
  filter:
    drop-shadow(0 17px 18px rgba(0,0,0,.84))
    drop-shadow(0 0 8px rgba(12,189,242,.26));
}

.logo-card-panda:hover img,
.logo-card-panda:focus-visible img{
  filter:
    drop-shadow(0 17px 18px rgba(0,0,0,.84))
    drop-shadow(0 0 8px rgba(244,160,0,.24));
}

/* Sicherstellen, dass niemals IP-Texte angezeigt werden */
.ip-label,
.server-ip,
[data-ip-label]{
  display:none !important;
}

@media(max-width:760px){
  body{place-items:start center;padding:18px}
  .logo-frame{transform:scale(.82);transform-origin:top center}
}

@media(max-width:610px){
  .logo-frame{transform:scale(.66)}
}

@media(max-width:490px){
  .logo-frame{transform:scale(.52)}
}