body{
  margin:0;
  font-family:Arial, sans-serif;
  background:#eee;
  color:#111;
}
.wrapper{
  max-width:1200px;
  margin:auto;
  padding:40px;
}
.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
}
.logo-area{
  display:flex;
  gap:15px;
  align-items:center;
}
.logo{width:50px;}
.credit{font-size:18px;color:#555;}
.credit a{color:#2563eb;text-decoration:none;}
.credit a:hover{text-decoration:underline;}
.lang button{
  padding:12px 20px;
  border:1px solid #ccc;
  background:white;
  margin-left:10px;
  cursor:pointer;
  border-radius:8px;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.lang button:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,.08);}
.lang button.active{background:black;color:white;}

.hero{
  display:flex;
  gap:50px;
  margin-top:40px;
  align-items:center;
}

.hero2{
  display:flex;
  gap:50px;
  margin-top:40px;
  align-items:center;
  text-align:center;
}


.hero-img{
  width:320px;
  max-width:100%;
  animation:floatLogo 4s ease-in-out infinite;
}
@keyframes floatLogo{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-6px);}
}

.hero-text h1{font-size:48px;margin:0 0 10px;}
.hero-text h2{font-size:32px;margin:0 0 20px;}

.hero-text p{font-size:20px;color:#444;line-height:1.6;text-align:justify;}
.magic p{font-size:26px;color:#ff0000;line-height:1.6;text-align:justify;font-weight: bold;font-style: italic;}
.impressum p{font-size:16px;color:#675d5d;line-height:1.6;text-align:center;}
.feature-block{margin:24px 0 28px;}
.feature-block h3{font-size:24px;margin:0 0 12px;}
.feature-block ul{margin:0;padding-left:24px;color:#333;}
.feature-block li{font-size:20px;line-height:1.6;margin-bottom:8px;}

.btn{
  background:#2563eb;
  color:white;
  padding:15px 25px;
  border-radius:12px;
  text-decoration:none;
  display:inline-block;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{
  background:#1d4ed8;
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(37,99,235,.25);
}

.info{margin-top:60px;}
.info h2{font-size:34px;margin-bottom:15px;}
.info p{font-size:20px;color:#444;line-height:1.6;}

.screenshots{margin-top:80px;}
.screenshots-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:24px;
}
.screenshots h2{margin:0;}
.carousel-controls{
  display:flex;
  gap:10px;
}
.carousel-btn{
  border:1px solid #cfcfcf;
  background:white;
  border-radius:999px;
  width:42px;
  height:42px;
  cursor:pointer;
  font-size:22px;
  line-height:1;
  transition:transform .15s ease, box-shadow .15s ease;
}
.carousel-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(0,0,0,.08);
}
.shots-wrap{
  overflow:hidden;
}
.shots{
  display:flex;
  gap:20px;
  transition:transform .35s ease;
  will-change:transform;
  touch-action:pan-y;
}
.shot{
  flex:0 0 calc(33.333% - 14px);
}
.shots img{
  display:block;
  width:100%;
  cursor:pointer;
  border-radius:12px;
  box-shadow:0 8px 22px rgba(0,0,0,.16);
  transition:transform .2s ease, box-shadow .2s ease;
}
.shots img:hover{
  transform:scale(1.02);
  box-shadow:0 12px 28px rgba(0,0,0,.2);
}

#lightbox{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.92);
  justify-content:center;
  align-items:center;
  z-index:9999;
  overflow:hidden;
}
#lightbox-img{
  max-width:88vw;
  max-height:88vh;
  user-select:none;
  cursor:grab;
  transform-origin:center center;
  transition:transform .08s linear;
}
#lightbox-img.dragging{cursor:grabbing;}
.close,.nav{
  position:absolute;
  color:white;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  width:52px;
  height:52px;
  cursor:pointer;
  font-size:28px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.close{top:18px;right:24px;}
.nav{top:50%;transform:translateY(-50%);}
.left{left:18px;}
.right{right:18px;}

.lightbox-hint{
  position:absolute;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  color:#ddd;
  font-size:14px;
  background:rgba(0,0,0,.35);
  padding:8px 12px;
  border-radius:999px;
}

@media (max-width: 980px){
  .shot{flex:0 0 calc(50% - 10px);}
}

@media (max-width: 900px){
  .wrapper{padding:24px;}
  .header{flex-direction:column;align-items:flex-start;}
  .hero{flex-direction:column;align-items:flex-start;gap:24px;}
  .hero-img{width:220px;}
  .hero-text h1{font-size:38px;}
  .hero-text h2{font-size:28px;}
  .hero-text p,.info p,.feature-block li{font-size:18px;}
  .magic p,.info p,.feature-block li{font-size:24px;font-weight:bold;}
  .impressum p,.info p,.feature-block li{font-size:18px;}
  .info h2{font-size:30px;}
  .feature-block h3{font-size:22px;}
}

@media (max-width: 640px){
  .shot{flex:0 0 100%;}
  .screenshots-head{align-items:flex-start;flex-direction:column;}
}

.#highlights-list {
  list-style: none;
  padding-left: 0;
  margin-top: 10px;
}

.highlights-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 8px;
}


#highlights {
  list-style: none;
}


#highlights li {
  position: relative;
  padding-left: 32px;
}

#highlights li::before {
  content: "✅";
  margin-right: 10px;
}