/* Reset / Base */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:#000; color:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  overflow:hidden;
}

/* Final Screen Layout */
.final{
  position:relative;
  min-height:100vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:min(6vh,48px);
  padding:6vh 4vw;
}

/* ✅ Logo zuverlässig klein halten (auch gegen Inline-SVG-Pixelgrößen) */
.final-logo,
.final-logo img,
.final-logo svg{
  display:block !important;
  width:min(280px,30vw) !important;    /* ~30% Breite, max 280px */
  max-width:30vw !important;
  height:auto !important;
  max-height:32vh !important;          /* nie mehr als ca. 1/3 Höhe */
  margin:0 auto !important;
  opacity:.96 !important;
  transform:translateY(-8vh) !important;
  filter: drop-shadow(0 0 10px rgba(255,255,255,.08));
}
.final-logo[width], .final-logo[height]{ width:auto !important; height:auto !important; }

/* Kontakt-Gürtel */
.belt{
  list-style:none;
  display:flex; align-items:center; justify-content:center;
  gap:min(4vw,34px);
  padding:0; margin:0;
  will-change: transform;
}

/* Grundgröße der Icons */
:root{
  --icon-box: 48px;       /* Desktop-Basis */
  --fit-fill: 84%;
  --fit-stroke: 96%;
}

/* Icon-Links */
.belt li{ display:flex }
.belt a{
  width:var(--icon-box);
  height:var(--icon-box);
  display:flex; align-items:center; justify-content:center;
  text-decoration:none;
  transform: translateZ(0) scale(1);
  transition: transform .18s ease, filter .18s ease;
  will-change: transform, filter;
  -webkit-tap-highlight-color: transparent;
}
.belt a img{
  display:block; height:auto; object-fit:contain; pointer-events:none;
  width:var(--fit-fill);                 /* default */
  filter:none; -webkit-filter:none;
  -webkit-font-smoothing: antialiased; image-rendering:auto;
}
.belt a.is-stroke img{ width:var(--fit-stroke); }

/* Glow-Stärken (werden per JS gesetzt, hier nur Fallback) */
.belt a[data-role="center"] img{
  filter: drop-shadow(0 0 16px rgba(255,255,255,.55))
          drop-shadow(0 0 28px rgba(255,255,255,.35));
}
.belt a[data-role="near"] img{
  filter: drop-shadow(0 0 10px rgba(255,255,255,.38));
}
.belt a[data-role="far"] img{
  filter: drop-shadow(0 0 4px rgba(255,255,255,.15));
}

/* Mobile Tweaks */
@media (max-width:900px){
  :root{
    --icon-box: 40px;      /* etwas kleiner, damit alles passt */
    --fit-fill: 86%;
    --fit-stroke: 98%;
  }
  .final{ gap: 6vh }
  .final-logo{ transform: translateY(-6vh) !important; }
}

/* Leichte Vignette, um Fokus in die Mitte zu lenken (optional) */
.final::after{
  content:""; pointer-events:none;
  position:absolute; inset:0;
  background:
    radial-gradient(
      circle at 50% 55%,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 35%,
      rgba(0,0,0,.18) 58%,
      rgba(0,0,0,.34) 75%,
      rgba(0,0,0,.55) 100%
    );
  z-index:0;
}
.final > *{ position:relative; z-index:1; }

/* Für ältere Safari-Engines: stelle sicher, dass Filter gerendert werden */
@supports (-webkit-touch-callout:none){
  .belt a{ transform: translateZ(0); }
}