/* ===========================
   main.css
   =========================== */

/* Hero */
.hero{
  padding:32px 0 40px;
  background:var(--bordo-dark);
}
.hero-inner{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:28px;
  align-items:center;
}
.hero-image{
  height:170px;
  background:#5e1c22;
  overflow:hidden;
}
.hero-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 9px;
  border-radius:999px;
  background:rgba(0,0,0,0.2);
  border:1px solid rgba(249,250,251,0.35);
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--accent-soft);
  margin-bottom:8px;
}
.hero-title{
  font-size:2rem;
  line-height:1.15;
  margin-bottom:8px;
}
.hero-lead{
  font-size:0.98rem;
  color:var(--muted);
  margin-bottom:14px;
  line-height:1.5;
}
.hero-badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:16px;
  font-size:0.8rem;
}
.badge{
  padding:4px 10px;
  border-radius:999px;
  background:rgba(0,0,0,0.18);
  border:1px solid rgba(249,250,251,0.35);
  color:var(--accent-soft);
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:18px;
}
.hero-note{
  font-size:0.8rem;
  color:var(--muted);
}

/* Hero Card */
.hero-card{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  background:var(--bordo-card);
  border:1px solid rgba(249,250,251,0.35);
  box-shadow:0 20px 55px rgba(0,0,0,0.6);
}
.hero-card-body{padding:14px 14px 16px;}
.hero-card h2{
  font-size:1.1rem;
  margin-bottom:6px;
}
.hero-card ul{
  list-style:none;
  font-size:0.86rem;
  line-height:1.6;
}
.hero-card li{margin-bottom:3px;}
.hero-card .highlight{
  color:var(--accent);
  font-weight:600;
}
.hero-tag{
  position:absolute;
  top:10px;
  right:10px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(0,0,0,0.65);
  font-size:0.72rem;
  color:var(--accent-soft);
}

/* Sections */
.section{
  padding:32px 0;
  animation:fadeIn .5s ease-out;
}
.section h2{
  font-size:1.5rem;
  text-align:center;
  margin-bottom:8px;
}
.section-intro{
  max-width:600px;
  margin:0 auto 22px;
  text-align:center;
  font-size:0.95rem;
  color:var(--muted);
  line-height:1.6;
}

/* Features */
.feature-grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.feature-item{
  background:var(--bordo-card);
  border-radius:14px;
  padding:12px 12px 13px;
  border:1px solid rgba(249,250,251,0.28);
}
.feature-item h3{
  font-size:0.98rem;
  margin-bottom:4px;
}
.feature-item p{
  font-size:0.86rem;
  color:var(--muted);
  line-height:1.5;
}

/* VIP Banner */
.vip-banner{padding:0 0 32px;}
.vip-inner{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:24px;
  align-items:center;
}
.vip-inner img{
  border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,0.6);
}
.vip-text h3{
  font-size:1.25rem;
  margin-bottom:6px;
}
.vip-text p{
  font-size:0.9rem;
  color:var(--muted);
  margin-bottom:8px;
  line-height:1.5;
}
.vip-list{
  list-style:none;
  font-size:0.9rem;
}
.vip-list li{
  margin-bottom:4px;
  line-height:1.5;
}
.vip-list .highlight{
  color:var(--accent);
  font-weight:600;
}

/* FAQ */
.faq-grid{
  max-width:820px;
  margin:0 auto;
  display:grid;
  gap:14px;
}
.faq-item{
  background:var(--bordo-card);
  border-radius:14px;
  padding:10px 12px;
  border:1px solid rgba(249,250,251,0.28);
}
.faq-item h3{
  font-size:0.98rem;
  margin-bottom:4px;
}
.faq-item p{
  font-size:0.86rem;
  color:var(--muted);
  line-height:1.5;
}
.faq-cta{
  text-align:center;
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid rgba(249,250,251,0.25);
}
.faq-cta p{
  font-size:0.95rem;
  margin-bottom:10px;
  color:var(--muted);
}

/* Contact */
.contact{
  padding:28px 0 30px;
  background:var(--bordo-dark);
}
.contact-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}
.contact-text{max-width:520px;}
.contact-text h2{
  font-size:1.35rem;
  margin-bottom:8px;
}
.contact-text p{
  font-size:0.9rem;
  color:var(--muted);
  line-height:1.6;
  margin-bottom:10px;
}
.contact-warning{
  margin:10px 0 14px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(0,0,0,0.18);
  border:1px solid rgba(249,250,251,0.35);
  font-size:0.85rem;
  display:flex;
  gap:8px;
  align-items:flex-start;
}
.contact-pill{
  padding:3px 8px;
  border-radius:999px;
  background:#dc2626;
  font-size:0.75rem;
  font-weight:600;
  white-space:nowrap;
}
.contact-list{
  list-style:none;
  margin:6px 0 0;
  padding:0;
  font-size:0.9rem;
}
.contact-list li{
  margin-bottom:6px;
  line-height:1.6;
}
.contact-list strong{color:var(--text);}
.contact-list a{
  color:var(--accent-soft);
  text-decoration:none;
  transition:color .2s ease;
}
.contact-list a:hover{text-decoration:underline;}

.contact-actions{
  flex:1;
  min-width:280px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.contact-cards{display:grid;gap:10px;}
.contact-card{
  padding:10px 12px;
  border-radius:14px;
  background:var(--bordo-card);
  border:1px solid rgba(249,250,251,0.3);
  font-size:0.86rem;
}
.contact-card h3{
  font-size:0.95rem;
  margin-bottom:4px;
}
.contact-card p{
  font-size:0.82rem;
  color:var(--muted);
  margin-bottom:6px;
  line-height:1.5;
}
.contact-card-light{background:rgba(0,0,0,0.12);}
.contact-note{
  font-size:0.82rem;
  color:var(--muted);
  line-height:1.5;
}
.contact-response-time{
  font-size:0.8rem;
  color:var(--accent-soft);
  margin-top:8px;
}

/* Footer */
.site-footer{
  background:var(--bordo-footer);
  color:#e5e7eb;
  padding:28px 0 10px;
  margin-top:40px;
  border-top:1px solid rgba(249,250,251,0.15);
}
.footer-inner{
  display:flex;
  flex-direction:column;
  gap:20px;
}
.footer-content{
  display:grid;
  grid-template-columns:repeat(4,minmax(200px,1fr));
  gap:20px;
}
.footer-section h4{
  font-size:0.95rem;
  margin-bottom:8px;
  color:var(--white);
  font-weight:600;
}
.footer-section p{
  font-size:0.82rem;
  color:#cbd5e1;
  line-height:1.6;
  margin-bottom:6px;
}
.footer-section ul{
  list-style:none;
  padding:0;
  font-size:0.82rem;
}
.footer-section li{margin-bottom:4px;}
.footer-section a{
  color:#cbd5e1;
  text-decoration:none;
  transition:color .2s ease;
}
.footer-section a:hover{color:var(--accent-soft);}
.footer-social{
  display:flex;
  gap:8px;
  margin-top:8px;
}
.footer-social a{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:6px;
  background:rgba(0,0,0,0.2);
  font-size:0.78rem;
  transition:background .2s ease;
}
.footer-social a:hover{background:rgba(0,0,0,0.35);}
.footer-bottom{
  border-top:1px solid rgba(249,250,251,0.15);
  padding-top:16px;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  font-size:0.8rem;
}
.footer-badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.badge-small{
  padding:3px 8px;
  border-radius:6px;
  background:rgba(0,0,0,0.2);
  font-size:0.75rem;
  color:#cbd5e1;
}
.footer-top-link{margin-left:auto;}
.footer-top-link a{
  color:var(--accent-soft);
  text-decoration:none;
  transition:color .2s ease;
}
.footer-top-link a:hover{color:var(--accent);}

/* Fix: Klassenname sauber (falls du ihn nutzt) */
.footer-copyright{color:#94a3b8;}
