/* =========================
   Base
========================= */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  --bg: #0b0b0c;
  --panel: #141416;
  --panel2: #1b1b1e;
  --text: #ffffff;
  --muted: rgba(255,255,255,.82);
  --muted2: rgba(255,255,255,.68);
  --line: rgba(255,255,255,.10);
  --line2: rgba(255,255,255,.14);
  --brand: #f2b705;
  --brand2: rgba(242,183,5,.28);
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
}

html, body { height: 100%; }

body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  line-height: 1.6;
  scroll-behavior: smooth;
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(1, 1, 1, 0.12), transparent 60%),
    radial-gradient(900px 600px at 80% 20%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(to right, rgba(0,0,0,.65), rgba(0,0,0,.30)),
    url('images/background.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.container{
  width: 92%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Better selection */
::selection { background: rgba(242,183,5,.35); }

/* =========================
   Header + Nav
========================= */
.header{
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(10,10,11,.55);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 0;
  gap: 16px;
}

.logo{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 220px;
}
.logo strong{ letter-spacing: .2px; }
.logo small{ color: var(--muted2); }

.logo-box{
  background: var(--brand);
  color:#000;
  font-weight: 900;
  padding: 10px 14px;
  border-radius: 10px;
}

.nav-wrap{ display:block; }
.nav{
  list-style:none;
  display:flex;
  gap: 18px;
  align-items:center;
  flex-wrap:wrap;
}
.nav a{
  text-decoration:none;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 10px;
  border-radius: 10px;
  transition: .2s ease;
}
.nav a:hover{
  color: #000;
  background: var(--brand);
}

/* Mobile toggle */
.menu-toggle{
  display:none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line2);
  background: rgba(0,0,0,.22);
  border-radius: 12px;
  cursor:pointer;
  padding: 10px;
  transition:.2s;
}
.menu-toggle:hover{ transform: translateY(-1px); }
.menu-toggle span{
  display:block;
  height: 2px;
  margin: 5px 0;
  background: #fff;
  border-radius: 2px;
}

/* =========================
   Hero
========================= */
.hero{
  min-height: 100vh;
  display:flex;
  align-items:center;
  position:relative;
  padding-top: 120px;
  padding-bottom: 60px;
}

.hero-overlay{
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(1000px 600px at 25% 25%, rgba(10, 10, 10, 0.245), transparent 60%),
    linear-gradient(to right, rgba(0,0,0,.92), rgba(0,0,0,.45));
}

.hero-content{ max-width: 760px; }

.hero-tag{
  display:inline-flex;
  gap: 8px;
  align-items:center;
  color: var(--brand);
  border: 1px solid var(--brand2);
  background: rgba(0,0,0,.22);
  padding: 8px 14px;
  margin-bottom: 20px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 999px;
}

.hero h1{
  font-size: clamp(38px, 6vw, 72px);
  line-height: 1.05;
  margin-bottom: 18px;
  letter-spacing: .2px;
}
.hero h1 span{ color: var(--brand); }

.hero p{
  font-size: 18px;
  color: var(--muted);
  max-width: 650px;
  margin-bottom: 28px;
}

.hero-buttons{
  display:flex;
  gap: 14px;
  flex-wrap:wrap;
  margin-top: 6px;
}

/* =========================
   Buttons
========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 14px;
  font-weight: 800;
  letter-spacing: .2px;
  text-decoration: none;
  transition: .2s ease;
  user-select: none;
}
.btn-primary{
  background: var(--brand);
  color:#000;
  box-shadow: 0 4px 15px rgba(242,183,5,.22);
}
.btn-primary:hover{
  transform: translateY(-2px);
  filter: brightness(1.03);
}
.btn-outline{
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
  color: var(--text);
}
.btn-outline:hover{
  transform: translateY(-2px);
  border-color: rgba(242,183,5,.45);
  box-shadow: 0 16px 50px rgba(0,0,0,.35);
}

/* =========================
   Sections
========================= */
.section{
  padding: 90px 0;
  scroll-margin-top: 95px;
}

.section-dark{
  background:
    linear-gradient(to bottom, rgba(20,20,22,.92), rgba(20,20,22,.92)),
    radial-gradient(900px 500px at 15% 10%, rgba(242,183,5,.08), transparent 60%);
  border-top: 1px solid rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.04);
}

.section-header{
  margin-bottom: 38px;
  max-width: 820px;
}
.section-header h2{
  font-size: 36px;
  margin-bottom: 10px;
  letter-spacing: .2px;
}
.section-header h2::after{
  content:'';
  display:block;
  width: 56px;
  height: 4px;
  background: var(--brand);
  border-radius: 999px;
  margin-top: 12px;
}
.section-header p{
  color: var(--muted);
}

/* =========================
   Grid + Cards
========================= */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}

.card{
  background: rgba(20,20,22,.92);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  transition: .22s ease;
}
.card:hover{
  transform: translateY(-6px);
  border-color: rgba(242,183,5,.22);
  box-shadow: var(--shadow);
}
.highlight-card{
  border-color: rgba(242,183,5,.28);
  box-shadow: 0 22px 80px rgba(242,183,5,.10);
}

.card img{
  width:100%;
  height: 220px;
  object-fit: cover;
  filter: contrast(1.02) saturate(1.02);
}

.card-content{ padding: 26px; }

.card-content h3{
  color: var(--brand);
  margin-bottom: 12px;
  font-size: 18px;
}

.card-content ul{ list-style:none; }
.card-content li{
  margin-bottom: 9px;
  font-size: 15px;
  color: var(--muted);
}
.card-content li::before{
  content:"→";
  color: var(--brand);
  margin-right: 10px;
}

/* =========================
   Contact
========================= */
.contact-wrapper{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 26px;
  align-items:start;
}

.contact-form{
  background: rgba(20,20,22,.92);
  border: 1px solid rgba(255,255,255,.06);
  padding: 28px;
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,.30);
}

.form-group{ margin-bottom: 18px; }

.form-group label{
  display:block;
  margin-bottom: 7px;
  color: rgba(242,183,5,.92);
  font-weight: 700;
  font-size: 14px;
}

.form-group input,
.form-group textarea{
  width:100%;
  padding: 12px 14px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  color:#fff;
  font-family: inherit;
  font-size: 15px;
  transition: .2s ease;
}
.form-group input::placeholder,
.form-group textarea::placeholder{ color: rgba(255,255,255,.45); }

.form-group input:focus,
.form-group textarea:focus{
  outline:none;
  border-color: rgba(242,183,5,.55);
  box-shadow: 0 0 0 4px rgba(242,183,5,.12);
}

.form-group textarea{ resize: vertical; }

.btn-submit{
  width:100%;
  border:none;
  cursor:pointer;
}

/* Contact info cards */
.contact-info{
  display:flex;
  flex-direction:column;
  gap: 14px;
}

.info-card{
  background: rgba(20,20,22,.92);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px;
  padding: 22px;
  text-align:left;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  position: relative;
  overflow:hidden;
}
.info-card::before{
  content:'';
  position:absolute;
  inset: -40px -40px auto auto;
  width: 120px;
  height: 120px;
  background: rgba(242,183,5,.12);
  filter: blur(10px);
  border-radius: 999px;
}
.info-icon{
  font-size: 26px;
  margin-bottom: 10px;
}
.info-card h3{
  color: var(--brand);
  margin-bottom: 6px;
  font-size: 16px;
}
.info-card p{ color: var(--muted); }

/* =========================
   Alerts
========================= */
.alert{
  padding: 16px 18px;
  border-radius: 16px;
  margin-bottom: 18px;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.08);
}
.alert-success{
  background: rgba(16,185,129,.10);
  border-color: rgba(16,185,129,.30);
  color: rgba(16,185,129,.95);
}
.alert-error{
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.30);
  color: rgba(239,68,68,.95);
}

/* =========================
   Honeypot
========================= */
.hp-field{
  position:absolute;
  left:-9999px;
  width:1px;height:1px;
  overflow:hidden;
}

/* =========================
   Footer
========================= */
.footer{
  padding: 40px 0;
  background: rgba(10,10,11,.85);
  border-top: 1px solid var(--line);
  font-size: 14px;
}

.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap:wrap;
}

.footer p{ color: var(--muted2); }

.footer-links{
  display:flex;
  gap: 14px;
  flex-wrap:wrap;
}

.footer-links a{
  color: var(--muted);
  text-decoration:none;
  font-weight: 700;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.16);
  transition: .2s ease;
}
.footer-links a:hover{
  background: rgba(242,183,5,.15);
  border-color: rgba(242,183,5,.35);
  color: #fff;
}

/* =========================
   Pages (Impressum/Datenschutz)
========================= */
.page{
  padding-top: 120px; /* fixed header */
  padding-bottom: 80px;
}

.page-card{
  background: rgba(20,20,22,.92);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 12px 40px rgba(0,0,0,.30);
}

.page-card h1{
  font-size: 34px;
  margin-bottom: 12px;
}

.page-card h2{
  margin-top: 22px;
  margin-bottom: 10px;
  color: var(--brand);
}

.page-card p, .page-card li{
  color: var(--muted);
}

.page-card a{
  color: var(--brand);
  font-weight: 800;
  text-decoration: none;
}
.page-card a:hover{ text-decoration: underline; }

/* =========================
   Mobile
========================= */
@media (max-width: 900px){
  .contact-wrapper{ grid-template-columns: 1fr; }
}

@media (max-width: 768px){
  .menu-toggle{ display:inline-block; }

  .nav-wrap{
    position:absolute;
    right: 4%;
    top: 70px;
    width: min(360px, 92vw);
    background: rgba(10,10,11,.92);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    padding: 10px;
    display:none;
    box-shadow: 0 22px 80px rgba(0,0,0,.55);
  }

  .nav{
    display:flex;
    flex-direction:column;
    gap: 6px;
  }

  .nav a{
    padding: 12px 12px;
    border-radius: 14px;
  }

  body.nav-open .nav-wrap{ display:block; }

  .hero{ text-align:center; }
  .hero-content{ margin: 0 auto; }
  .hero-buttons{ justify-content:center; width:100%; }
  .btn{ width: 100%; }

  .section{ padding: 70px 0; }
}
.header-start-btn{
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1;
}

/* Start-Link im Menü (optional hübscher) */
.nav-start{
  border: 1px solid rgba(242,183,5,.35);
}

.nav-start:hover{
  background: rgba(242,183,5,.15);
}

/* Optional: Start Button auf Handy ausblenden */
@media (max-width:768px){
  .header-start-btn{ display:none; }
}