:root {
  --bg:#050814; 
  --text:#e5e7eb; 
  --muted:#9aa3b2; 
  --card:rgba(255,255,255,.05); 
  --border:rgba(255,255,255,.12); 
}

*{
  box-sizing:border-box
}

html,body{
  height:100%
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.6 system-ui,Segoe UI,Roboto,Inter,Arial
}
a{
  color:inherit;
  text-decoration:none
}
.wrap{
  max-width:1120px;
  margin:0 auto;
  padding:0 16px
}

.hdr{
  position:sticky;
  top:0;
  inset-inline:0;
  backdrop-filter:blur(6px);
  background:rgba(0,0,0,.3);
  z-index:10;
}
.hdr .inner{
  padding:10px 0;
}

@media (max-width: 480px){
  .wrap{ padding: 0 14px; }
  .card .body{ padding: 12px; }
  .card h3{ font-size: 17px; margin-bottom: 6px; }
}



.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:#fff;color:#111;padding:12px 16px; /* größer */
  min-height:44px; min-width:44px;
  border-radius:16px;border:1px solid #0002;
  touch-action: manipulation;
}

.btn:active{
  transform: translateY(1px);
}


.stars{
  position:fixed;
  inset:0;
  z-index:-1;
  background:#050814
}
.stars svg{
  width:100%;
  height:100%
}

.hero{
  min-height:92svh;
  display:grid;
  grid-template-columns: 1fr;
  align-items:center;
  gap:28px;
  padding-top:88px
}

.hero h1{
  font-size: clamp(28px, 4.5vw, 48px);
  line-height: 1.12;
  margin: 0;
}

.hero p{
  margin:.75rem 0;
  color:#c7d0dd
}

.astro{
  display:flex;
  justify-content:center
}

.astro img{
  width: min(70vw, 420px);
  height: auto;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.6));
  animation: float 9s ease-in-out infinite;
  will-change: transform;
}

@media (max-width: 480px){
  .hero{ gap: 20px; padding-top: 76px; }
}

.sec{
  padding:64px 0
}

.sec h2{
  font-size:32px;
  margin:0 0 16px
}
.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px
}
@media (min-width:700px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1020px){ .grid{grid-template-columns:repeat(3,1fr)} }

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  transition:transform .2s ease
}

.card:hover{
  transform:translateY(-3px)
}

.card .img{
  aspect-ratio:16/9;
  background:#0b1224;
  border-bottom:1px solid var(--border);
  display:grid;
  place-items:center
}

.card .img img{
  width:100%;
  height:100%;
  object-fit:cover
}

.card .body{
  padding:14px
}
.card h3{
  margin:0 0 8px;
  font-size:18px
}
.muted{
  color:var(--muted)
}

footer{
  border-top:1px solid var(--border);
  padding:36px 0;
  text-align:center;
  background:rgba(0,0,0,.15)
}

@keyframes float {
  0%   { transform: translate(0, 0) rotate(0.6deg); }
  50%  { transform: translate(6px, -12px) rotate(-0.6deg); }
  100% { transform: translate(0, 0) rotate(0.6deg); }
}
@media (prefers-reduced-motion: reduce) {
  .astro img { animation: none !important; }
}

html, body {
  width: 100%;
  overflow-x: hidden;
}

.wrap {
  max-width: 1120px;
  width: 100%;
}

img, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

.stars svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.hero {
  overflow-x: clip;
}
@supports not (overflow: clip) {
  .hero { overflow-x: hidden; }
}