*{box-sizing:border-box;margin:0;padding:0}
html,body{
  height:100%;
  width:100%;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

body{
  display:grid;
  place-items:center;
  height:100vh;
  background:radial-gradient(circle at center,
    #f9f4e6 0%, #e7f5e7 60%, #7a4a22 100%);
}

.container{
  height:90vh; /* immer kleiner als Viewport */
  max-width:600px;
  width:90%;
  display:flex;
  flex-direction:column;
  justify-content:space-between; /* verteilt: Titel – Bild – Footer */
  align-items:center;
  text-align:center;
  padding:10px;
}

h1{
  font-size:clamp(20px,4.5vh,42px);
  font-weight:800;
  color:#3a2a1c;
}
.subtitle{
  font-size:clamp(14px,2.5vh,20px);
  margin-top:4px;
  color:#3a2a1c;
}

.chip{
  margin-top:8px;
  padding:6px 14px;
  border-radius:999px;
  font-weight:600;
  font-size:clamp(12px,2vh,16px);
  color:#3a2a1c;
  background:rgba(255,255,255,0.6);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
}

.promo{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  max-height:60%; /* Bild nie höher als 60% vom Bildschirm */
  width:100%;
}
.promo img{
  max-height:100%;
  max-width:100%;
  object-fit:contain;
  -webkit-mask-image: radial-gradient(ellipse 60% 90% at 50% 50%, #000 78%, transparent 100%);
          mask-image: radial-gradient(ellipse 60% 90% at 50% 50%, #000 78%, transparent 100%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center;   mask-position:center;
  -webkit-mask-size:100% 100%;    mask-size:100% 100%;
}

footer{
  font-size:clamp(12px,1.8vh,14px);
  color:#3a2a1c;
  opacity:.95;
  line-height:1.4;
}

.footer-links{
  margin-top:8px;
  font-size:clamp(11px,1.6vh,13px);
}

.footer-links a{
  color:#7a4a22;
  text-decoration:none;
  transition:all 0.3s ease;
}

.footer-links a:hover{
  text-decoration:underline;
  opacity:0.8;
}

.privacy-link{
  color:#7a4a22;
  text-decoration:none;
  transition:all 0.3s ease;
}

.privacy-link:hover{
  text-decoration:underline;
}

/* Beta-Tester Sektion */
.beta-section{
  width:100%;
  max-width:600px;
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-radius:24px;
  padding:clamp(20px,5vh,40px);
  margin:clamp(20px,4vh,30px) 0;
  box-shadow:0 20px 40px rgba(0,0,0,0.1);
  border:1px solid rgba(255,255,255,0.8);
}

.beta-content{
  text-align:center;
}

.beta-icon{
  font-size:clamp(32px,6vh,48px);
  margin-bottom:16px;
  animation:bounce 2s infinite;
}

@keyframes bounce{
  0%, 20%, 50%, 80%, 100%{transform:translateY(0)}
  40%{transform:translateY(-10px)}
  60%{transform:translateY(-5px)}
}

.beta-section h2{
  font-size:clamp(18px,3.5vh,28px);
  font-weight:800;
  color:#3a2a1c;
  margin-bottom:16px;
  line-height:1.2;
}

.beta-description{
  font-size:clamp(14px,2.2vh,18px);
  color:#3a2a1c;
  margin-bottom:24px;
  line-height:1.4;
  opacity:0.9;
}

.beta-features{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  margin:32px 0;
  max-width:1000px;
  margin-left:auto;
  margin-right:auto;
}

.feature-card{
  background:rgba(255,255,255,0.8);
  backdrop-filter:blur(10px);
  border:2px solid rgba(122,74,34,0.1);
  border-radius:16px;
  padding:24px 20px;
  text-align:center;
  transition:all 0.3s ease;
  position:relative;
  overflow:hidden;
}

.feature-card:hover{
  transform:translateY(-4px);
  border-color:rgba(122,74,34,0.3);
  box-shadow:0 12px 30px rgba(122,74,34,0.15);
}

.feature-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg, #7a4a22, #a86328);
  opacity:0;
  transition:opacity 0.3s ease;
}

.feature-card:hover::before{
  opacity:1;
}

.feature-icon{
  width:56px;
  height:56px;
  background:linear-gradient(135deg, #7a4a22, #a86328);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 16px;
  color:white;
  transition:all 0.3s ease;
}

.feature-card:hover .feature-icon{
  transform:scale(1.1);
  box-shadow:0 8px 20px rgba(122,74,34,0.3);
}

.feature-title{
  font-size:clamp(16px,3vh,20px);
  font-weight:700;
  color:#3a2a1c;
  margin:0 0 12px 0;
  line-height:1.3;
}

.feature-description{
  font-size:clamp(13px,2vh,15px);
  color:#5a4a3c;
  line-height:1.5;
  margin:0;
  font-weight:400;
}

.feature{
  font-size:clamp(13px,2vh,16px);
  color:#3a2a1c;
  font-weight:500;
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:center;
}

.beta-motto{
  font-size:clamp(14px,2.2vh,18px);
  color:#3a2a1c;
  font-weight:600;
  margin-bottom:32px;
  font-style:italic;
}

/* Platform Selector */
.platform-selector{
  margin-bottom:32px;
}

.platform-label{
  font-size:clamp(14px,2vh,16px);
  color:#3a2a1c;
  margin-bottom:16px;
  font-weight:600;
}

.platform-container{
  display:flex;
  justify-content:center;
  gap:16px;
  max-width:320px;
  margin:0 auto;
}

.platform-container .platform-card{
  flex:1;
  min-width:0;
}

.platform-card{
  background:rgba(255,255,255,0.9);
  border:3px solid rgba(58,42,28,0.3);
  border-radius:16px;
  padding:20px;
  cursor:pointer;
  transition:all 0.3s ease;
  min-height:120px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
}

.platform-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 25px rgba(0,0,0,0.15);
  border-color:rgba(122,74,34,0.6);
}

.platform-card.active{
  border-color:#7a4a22;
  background:rgba(122,74,34,0.15);
  transform:scale(1.02);
  box-shadow:0 8px 25px rgba(122,74,34,0.2);
}

.platform-icon{
  width:40px;
  height:40px;
  margin-bottom:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#3a2a1c;
  transition:all 0.3s ease;
}

.platform-icon svg{
  width:32px;
  height:32px;
  transition:transform 0.3s ease;
}

.platform-card:hover .platform-icon svg{
  transform:scale(1.1);
}

.platform-card.active .platform-icon{
  color:#7a4a22;
}

.platform-card h3{
  font-size:18px;
  font-weight:700;
  color:#3a2a1c;
  margin:0 0 4px 0;
}

.platform-card p{
  font-size:14px;
  color:#3a2a1c;
  opacity:0.7;
  margin:0;
}

/* Beta Form */
.beta-form{
  width:100%;
}

.message{
  padding:12px 16px;
  border-radius:8px;
  margin-bottom:16px;
  font-size:clamp(14px,2vh,16px);
  font-weight:500;
}

.success-message{
  background:rgba(34,197,94,0.1);
  color:#166534;
  border:1px solid rgba(34,197,94,0.2);
}

.error-message{
  background:rgba(239,68,68,0.1);
  color:#991b1b;
  border:1px solid rgba(239,68,68,0.2);
}

.form-group{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:12px;
  max-width:100%;
}

.form-group input{
  padding:12px 16px;
  border:2px solid rgba(58,42,28,0.2);
  border-radius:12px;
  font-size:clamp(14px,2vh,16px);
  background:rgba(255,255,255,0.9);
  color:#3a2a1c;
  transition:all 0.3s ease;
  outline:none;
  width:100%;
  box-sizing:border-box;
}

.form-group input:focus{
  border-color:#7a4a22;
  background:rgba(255,255,255,1);
  box-shadow:0 0 0 4px rgba(122,74,34,0.1);
}

.form-group input::placeholder{
  color:#3a2a1c;
  opacity:0.6;
}

/* Form Extras - Minimale Captcha und Datenschutz */
.form-extras{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin:12px 0 16px 0;
  padding:12px 16px;
  background:rgba(122,74,34,0.03);
  border-radius:12px;
  border:1px solid rgba(58,42,28,0.08);
}

.captcha-mini{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:clamp(13px,1.8vh,15px);
  color:#3a2a1c;
  font-weight:500;
}

.captcha-mini-input{
  width:70px;
  padding:6px 10px;
  border:1px solid rgba(58,42,28,0.2);
  border-radius:6px;
  font-size:clamp(14px,2vh,15px);
  background:rgba(255,255,255,0.9);
  color:#3a2a1c;
  transition:all 0.3s ease;
  outline:none;
  text-align:center;
  font-weight:600;
}

.captcha-mini-input:focus{
  border-color:#7a4a22;
  background:rgba(255,255,255,1);
  box-shadow:0 0 0 2px rgba(122,74,34,0.1);
}

/* Custom Checkbox */
.privacy-checkbox{
  flex-shrink:0;
}

.checkbox-container{
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  font-size:clamp(12px,1.8vh,14px);
  color:#3a2a1c;
  line-height:1.2;
}

.checkbox-container input[type="checkbox"]{
  display:none;
}

.checkmark{
  width:16px;
  height:16px;
  border:2px solid rgba(58,42,28,0.3);
  border-radius:4px;
  background:rgba(255,255,255,0.9);
  position:relative;
  transition:all 0.3s ease;
  flex-shrink:0;
}

.checkbox-container input[type="checkbox"]:checked + .checkmark{
  background:#7a4a22;
  border-color:#7a4a22;
}

.checkbox-container input[type="checkbox"]:checked + .checkmark::after{
  content:'✓';
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  color:white;
  font-size:10px;
  font-weight:bold;
}

.checkbox-text{
  font-weight:500;
}

/* Responsive für Form Extras */
@media (max-width: 640px){
  .form-extras{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
  
  .captcha-mini{
    justify-content:center;
  }
  
  .privacy-checkbox{
    align-self:center;
  }
}

.beta-button{
  background:linear-gradient(135deg, #7a4a22 0%, #9d6b3a 100%);
  color:white;
  border:none;
  padding:12px 20px;
  border-radius:12px;
  font-size:clamp(14px,2vh,16px);
  font-weight:700;
  cursor:pointer;
  transition:all 0.3s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  position:relative;
  overflow:hidden;
  width:100%;
  box-sizing:border-box;
  margin-top:8px;
}

.beta-button:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 25px rgba(122,74,34,0.3);
}

.beta-button:active{
  transform:translateY(0);
}

.button-icon{
  transition:transform 0.3s ease;
  font-size:18px;
  font-weight:normal;
}

.beta-button:hover .button-icon{
  transform:translateX(4px);
}

.form-note{
  font-size:clamp(12px,1.8vh,14px);
  color:#3a2a1c;
  opacity:0.7;
  margin:0;
  line-height:1.3;
}

/* Success Modal */
.modal-overlay{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1000;
  opacity:0;
  visibility:hidden;
  transition:all 0.3s ease;
  padding:20px;
  box-sizing:border-box;
}

.modal-overlay.show{
  opacity:1;
  visibility:visible;
}

.modal-content{
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-radius:24px;
  max-width:500px;
  width:100%;
  max-height:90vh;
  overflow-y:auto;
  box-shadow:0 20px 40px rgba(0,0,0,0.2);
  border:1px solid rgba(255,255,255,0.8);
  transform:scale(0.9) translateY(20px);
  transition:all 0.3s ease;
}

.modal-overlay.show .modal-content{
  transform:scale(1) translateY(0);
}

.modal-header{
  padding:24px 24px 16px 24px;
  border-bottom:1px solid rgba(58,42,28,0.1);
}

.modal-header h3{
  font-size:clamp(18px,3vh,22px);
  font-weight:800;
  color:#3a2a1c;
  margin:0;
  text-align:center;
  line-height:1.2;
}

.modal-body{
  padding:20px 24px;
  color:#3a2a1c;
  line-height:1.5;
}

.modal-intro{
  font-size:clamp(16px,2.5vh,18px);
  font-weight:600;
  text-align:center;
  margin-bottom:16px;
}

.modal-body p{
  margin-bottom:16px;
  font-size:clamp(14px,2vh,16px);
}

.modal-features{
  background:rgba(122,74,34,0.05);
  padding:16px;
  border-radius:12px;
  margin:20px 0;
}

.modal-features p{
  margin-bottom:12px;
  font-weight:600;
}

.modal-features ul{
  margin:0;
  padding-left:20px;
}

.modal-features li{
  margin-bottom:8px;
  font-size:clamp(14px,2vh,15px);
}

.modal-highlight{
  font-weight:600;
  font-style:italic;
  text-align:center;
  font-size:clamp(15px,2.2vh,17px);
}

.modal-signature{
  text-align:center;
  margin-top:24px;
  margin-bottom:0;
  font-size:clamp(14px,2vh,16px);
}

.modal-footer{
  padding:16px 24px 24px 24px;
  text-align:center;
}

.modal-close-btn{
  background:linear-gradient(135deg, #7a4a22 0%, #9d6b3a 100%);
  color:white;
  border:none;
  padding:12px 32px;
  border-radius:12px;
  font-size:clamp(14px,2vh,16px);
  font-weight:700;
  cursor:pointer;
  transition:all 0.3s ease;
}

.modal-close-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 25px rgba(122,74,34,0.3);
}

/* Responsive Design */
@media (min-width: 640px){
  .form-group{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
  
  .form-group input{
    width:100%;
  }
  
  .beta-button{
    width:100%;
    max-width:none;
  }
}

@media (max-width: 768px){
  .beta-features{
    grid-template-columns:1fr;
    gap:16px;
    margin:24px 0;
  }
  
  .feature-card{
    padding:20px 16px;
  }
  
  .feature-icon{
    width:48px;
    height:48px;
    margin-bottom:12px;
  }
  
  .feature-title{
    font-size:18px;
    margin-bottom:8px;
  }
  
  .feature-description{
    font-size:14px;
  }
}

/* Tablet Range - 2 Columns */
@media (min-width: 769px) and (max-width: 1024px){
  .beta-features{
    grid-template-columns:repeat(2, 1fr);
    gap:20px;
    max-width:800px;
  }
  
  .feature-card:nth-child(3){
    grid-column:1 / 3;
    max-width:400px;
    margin:0 auto;
  }
}

@media (max-width: 480px){
  .platform-container{
    flex-direction:column;
    max-width:200px;
  }
  
  .platform-container .platform-card{
    min-height:100px;
  }
  
  .captcha-mini-input{
    width:80px;
    padding:8px 12px;
    font-size:16px;
  }
  
  .feature-card{
    padding:16px 12px;
    border-radius:12px;
  }
  
  .feature-icon{
    width:40px;
    height:40px;
    margin-bottom:10px;
  }
  
  .feature-icon svg{
    width:20px;
    height:20px;
  }
  
  .feature-title{
    font-size:16px;
    margin-bottom:6px;
  }
  
  .feature-description{
    font-size:13px;
    line-height:1.4;
  }
}