*{margin:0;padding:0;box-sizing:border-box}
:root{--cyan:#65ddff;--white:#f6fbff;--dark:#020812}
html,body{width:100%;min-height:100%}
body{overflow:hidden;background:var(--dark);color:var(--white);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
.hero{position:relative;width:100vw;height:100vh;overflow:hidden;background:#020812}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;filter:brightness(.78) saturate(.98) contrast(1.02)}
.shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(2,8,18,.46) 0%,rgba(2,8,18,.16) 35%,rgba(2,8,18,.26) 62%,rgba(2,8,18,.68) 100%),linear-gradient(180deg,rgba(2,8,18,.08) 0%,rgba(2,8,18,.18) 58%,rgba(2,8,18,.64) 100%);pointer-events:none}

.language{position:fixed;top:28px;right:38px;z-index:20;display:flex;gap:10px;padding:6px;border:1px solid rgba(255,255,255,.10);border-radius:999px;background:rgba(4,13,25,.46);backdrop-filter:blur(14px)}
.language button{min-width:42px;border:0;border-radius:999px;padding:9px 13px;background:transparent;color:rgba(255,255,255,.68);font-weight:700;font-size:12px;letter-spacing:.08em;cursor:pointer;transition:background .25s ease,color .25s ease,box-shadow .25s ease}
.language button.active{background:rgba(101,221,255,.92);color:#06111c;box-shadow:0 0 22px rgba(101,221,255,.24)}

.intro{position:absolute;left:7vw;top:30vh;z-index:10;width:min(520px,42vw)}
.logo{margin-bottom:26px;color:rgba(255,255,255,.72);font-size:clamp(42px,5vw,70px);font-weight:300;letter-spacing:.28em;text-transform:uppercase;text-shadow:0 0 26px rgba(101,221,255,.10)}
.logo::after{content:"";display:block;width:68px;height:1px;margin-top:20px;background:rgba(101,221,255,.58);box-shadow:0 0 14px rgba(101,221,255,.22)}
.copy{display:none}.copy.active{display:block;animation:textFade .45s ease both}
@keyframes textFade{from{opacity:0;transform:translateY(8px);filter:blur(3px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
h1{margin-bottom:14px;font-size:clamp(34px,3.8vw,54px);font-weight:540;letter-spacing:-.035em;color:rgba(255,255,255,.86);text-shadow:0 0 18px rgba(0,0,0,.34)}
p{color:rgba(255,255,255,.68);font-size:clamp(18px,1.55vw,23px);line-height:1.48;font-weight:360}

.radar{position:absolute;left:58%;top:52%;z-index:4;width:min(74vw,1080px);aspect-ratio:1/1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none}
.radar-grid{position:absolute;inset:0;border-radius:50%;opacity:.62;background:repeating-radial-gradient(circle,rgba(101,221,255,.12) 0 1px,transparent 1px 78px),linear-gradient(rgba(101,221,255,.085),rgba(101,221,255,.085)) center/100% 1px no-repeat,linear-gradient(90deg,rgba(101,221,255,.085),rgba(101,221,255,.085)) center/1px 100% no-repeat;mask:radial-gradient(circle,transparent 0 7%,black 8% 84%,transparent 86%)}
.radar-sweep{position:absolute;inset:0;border-radius:50%;transform:rotate(0deg);transform-origin:50% 50%;background:conic-gradient(from -90deg,rgba(101,221,255,.34) 0deg,rgba(101,221,255,.20) 14deg,rgba(101,221,255,.07) 42deg,transparent 62deg,transparent 360deg);mask:radial-gradient(circle,transparent 0 7%,black 8% 83%,transparent 86%);filter:blur(.45px);opacity:.82;mix-blend-mode:screen;will-change:transform}
.radar-center{position:absolute;left:50%;top:50%;width:7px;height:7px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(202,247,255,.68);box-shadow:0 0 22px rgba(101,221,255,.44)}
.keyword-layer{position:absolute;inset:0;border-radius:50%}
.keyword{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.94);opacity:.16;color:rgba(207,247,255,.52);font-weight:760;letter-spacing:.16em;text-transform:uppercase;text-shadow:0 0 10px rgba(101,221,255,.12);filter:blur(.75px);transition:opacity .12s linear,transform .12s linear,color .12s linear,filter .12s linear,text-shadow .12s linear;white-space:nowrap}

footer{position:fixed;left:24px;bottom:18px;z-index:15;display:flex;gap:8px;color:rgba(255,255,255,.42);font-size:14px}
footer a{color:rgba(255,255,255,.54);text-decoration:none}footer a:hover{color:rgba(255,255,255,.82)}

/* Responsive Optimierung für iPhone / kleine Displays */
@media (max-width: 760px) {
  body{
    overflow:hidden;
  }

  .hero-bg{
    object-position:34% center;
    filter:brightness(.62) saturate(.95) contrast(1.04);
  }

  .shade{
    background:
      linear-gradient(180deg,
        rgba(2,8,18,.36) 0%,
        rgba(2,8,18,.30) 36%,
        rgba(2,8,18,.74) 100%),
      linear-gradient(90deg,
        rgba(2,8,18,.48) 0%,
        rgba(2,8,18,.20) 56%,
        rgba(2,8,18,.62) 100%);
  }

  .language{
    top:18px;
    right:16px;
    gap:6px;
    padding:5px;
  }

  .language button{
    min-width:36px;
    padding:8px 10px;
    font-size:11px;
  }

  .intro{
    left:7vw;
    top:18vh;
    width:82vw;
    max-width:360px;
  }

  .logo{
    font-size:clamp(34px,13vw,48px);
    letter-spacing:.22em;
    margin-bottom:20px;
  }

  .logo::after{
    width:54px;
    margin-top:15px;
  }

  h1{
    font-size:clamp(30px,10vw,42px);
    margin-bottom:10px;
  }

  p{
    font-size:clamp(15px,4.7vw,18px);
    line-height:1.42;
    max-width:310px;
  }

  .radar{
    width:118vw;
    left:72%;
    top:57%;
    opacity:.82;
  }

  .radar-grid{
    opacity:.44;
  }

  .radar-sweep{
    opacity:.62;
  }

  .radar-center{
    width:5px;
    height:5px;
  }

  .keyword{
    font-size:10px !important;
    letter-spacing:.13em;
  }

  footer{
    left:18px;
    bottom:14px;
    font-size:12px;
  }
}

/* Sehr schmale iPhones */
@media (max-width: 430px) {
  .hero-bg{
    object-position:30% center;
  }

  .intro{
    top:20vh;
  }

  .radar{
    width:132vw;
    left:78%;
    top:59%;
  }

  .keyword{
    opacity:.13;
  }
}

/* Querformat auf Smartphones */
@media (max-height: 520px) and (orientation: landscape) {
  .intro{
    top:22vh;
    left:6vw;
    width:42vw;
  }

  .logo{
    font-size:34px;
    margin-bottom:14px;
  }

  h1{
    font-size:30px;
  }

  p{
    font-size:15px;
  }

  .radar{
    width:76vw;
    left:66%;
    top:55%;
  }

  footer{
    display:none;
  }
}


/* ============================================================
   v22 Premium Responsive
   Ziel:
   - Desktop bleibt erhalten
   - iPhone Hochformat bekommt eigene Bild-/Radar-/Text-Komposition
   - iPhone Querformat bleibt sauber
   - keine Weiterleitung, alles über CSS/JS Device-Erkennung
   ============================================================ */

.hero{
  min-height:100svh;
}

@supports (height: 100dvh){
  .hero{
    height:100dvh;
  }
}

/* Tablet / iPad Portrait */
@media (min-width: 761px) and (max-width: 1180px) and (orientation: portrait) {
  .hero-bg{
    object-position:38% center;
    filter:brightness(.66) saturate(.96) contrast(1.03);
  }

  .intro{
    left:6vw;
    top:22vh;
    width:min(500px,56vw);
  }

  .logo{
    font-size:clamp(40px,7vw,62px);
    letter-spacing:.25em;
  }

  h1{
    font-size:clamp(34px,5vw,52px);
  }

  p{
    font-size:clamp(17px,2.4vw,22px);
  }

  .radar{
    left:66%;
    top:54%;
    width:92vw;
  }

  .language{
    right:24px;
    top:24px;
  }
}

/* iPhone / kleine Smartphones Hochformat */
@media (max-width: 760px) and (orientation: portrait) {
  body{
    overflow:hidden;
    background:#020812;
  }

  .hero{
    height:100svh;
    min-height:100svh;
    padding:0;
  }

  .hero-bg{
    object-position:34% center;
    filter:brightness(.62) saturate(.96) contrast(1.05);
  }

  .shade{
    background:
      linear-gradient(180deg,
        rgba(2,8,18,.30) 0%,
        rgba(2,8,18,.20) 28%,
        rgba(2,8,18,.54) 62%,
        rgba(2,8,18,.86) 100%),
      linear-gradient(90deg,
        rgba(2,8,18,.44) 0%,
        rgba(2,8,18,.20) 48%,
        rgba(2,8,18,.62) 100%);
  }

  .language{
    top:calc(14px + env(safe-area-inset-top));
    right:14px;
    gap:5px;
    padding:5px;
    background:rgba(4,13,25,.52);
  }

  .language button{
    min-width:34px;
    padding:8px 9px;
    font-size:11px;
  }

  .intro{
    left:7vw;
    top:18svh;
    width:82vw;
    max-width:360px;
  }

  .logo{
    font-size:clamp(32px,12vw,48px);
    letter-spacing:.22em;
    margin-bottom:18px;
    opacity:.70;
  }

  .logo::after{
    width:52px;
    margin-top:14px;
  }

  h1{
    font-size:clamp(30px,9.8vw,42px);
    margin-bottom:10px;
    color:rgba(255,255,255,.88);
  }

  p{
    font-size:clamp(15px,4.5vw,18px);
    line-height:1.42;
    max-width:310px;
    color:rgba(255,255,255,.72);
  }

  .radar{
    width:122vw;
    left:74%;
    top:60%;
    opacity:.78;
  }

  .radar-grid{
    opacity:.38;
  }

  .radar-sweep{
    opacity:.58;
    filter:blur(.55px);
  }

  .radar-center{
    width:5px;
    height:5px;
  }

  .keyword{
    font-size:10px !important;
    letter-spacing:.13em;
  }

  footer{
    left:18px;
    bottom:calc(14px + env(safe-area-inset-bottom));
    font-size:12px;
  }
}

/* Sehr schmale iPhones */
@media (max-width: 430px) and (orientation: portrait) {
  .hero-bg{
    object-position:31% center;
  }

  .intro{
    top:19svh;
  }

  .radar{
    width:136vw;
    left:80%;
    top:62%;
  }

  .keyword{
    opacity:.12;
  }
}

/* Kleine Geräte mit wenig Höhe */
@media (max-height: 700px) and (max-width: 760px) and (orientation: portrait) {
  .intro{
    top:15svh;
  }

  .logo{
    font-size:36px;
    margin-bottom:14px;
  }

  h1{
    font-size:32px;
  }

  p{
    font-size:15px;
  }

  .radar{
    top:63%;
  }
}

/* Smartphone Querformat */
@media (max-height: 520px) and (orientation: landscape) {
  body{
    overflow:hidden;
  }

  .hero-bg{
    object-position:42% center;
    filter:brightness(.60) saturate(.95) contrast(1.04);
  }

  .intro{
    left:6vw;
    top:23vh;
    width:42vw;
  }

  .logo{
    font-size:34px;
    margin-bottom:13px;
    letter-spacing:.22em;
  }

  .logo::after{
    margin-top:11px;
    width:48px;
  }

  h1{
    font-size:30px;
    margin-bottom:8px;
  }

  p{
    font-size:15px;
    line-height:1.38;
  }

  .radar{
    width:76vw;
    left:67%;
    top:55%;
  }

  .language{
    top:12px;
    right:14px;
  }

  footer{
    display:none;
  }
}


@media (prefers-reduced-motion: reduce) {
  .radar-sweep{
    opacity:.22;
  }
}