:root{
  --bg:#060910;
  --bg2:#0b1326;
  --panel:#11141d;
  --line:#2a3142;
  --text:#f2f4f8;
  --muted:#c8ced9;
  --accent:#ff4b4b;
  --accent-dark:#d63a3a;
  --ok:#33d17a;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;background:
radial-gradient(circle at 20% 20%, rgba(255,75,75,.12), transparent 25%),
radial-gradient(circle at 80% 70%, rgba(40,90,255,.14), transparent 30%),
linear-gradient(180deg,var(--bg),var(--bg2));color:var(--text)}
a{color:inherit}
img{max-width:100%;display:block}
.container{width:min(1180px, calc(100% - 32px)); margin:0 auto}
.topbar{position:sticky;top:0;z-index:50;background:rgba(5,8,14,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:20px 0;gap:20px}
.brand{font-size:2rem;font-weight:800;text-decoration:none;white-space:nowrap}
.brand span{color:var(--accent);text-shadow:0 0 18px rgba(255,75,75,.25)}
.menu{display:flex;gap:22px;flex-wrap:wrap;justify-content:flex-end}
.menu a{text-decoration:none;font-weight:700;color:#e7ebf3}
.menu a:hover,.menu a.active{color:var(--accent)}
.hero{padding:46px 0 18px}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:24px;align-items:stretch}
.card{background:rgba(17,20,29,.9);border:1px solid var(--line);border-radius:28px;padding:26px;box-shadow:0 20px 55px rgba(0,0,0,.22)}
.eyebrow{font-size:.9rem;letter-spacing:.16em;color:#d8dde8;text-transform:uppercase}
h1{font-size:4rem;line-height:1.02;margin:10px 0 10px}
h2{font-size:2.15rem;margin:0 0 14px}
h3{font-size:1.3rem;margin:0 0 10px}
.subtitle{font-size:1.2rem;line-height:1.55;color:var(--muted)}
.lead{font-size:1.13rem;line-height:1.75;color:#dbe1ea}
.redline{color:#ff6161;font-weight:800;line-height:1.35}
.btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}
.btn{display:inline-block;padding:15px 22px;border-radius:14px;text-decoration:none;font-weight:800;border:1px solid var(--line)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dark)}
.btn-secondary{background:transparent}
.btn-secondary:hover{border-color:#8d97a8;color:#fff}
.btn-success{background:var(--ok);border-color:var(--ok);color:#0e1a10}
.btn-success:hover{filter:brightness(.94)}
.hero-media{
  min-height:580px;border-radius:28px;border:1px solid var(--line);overflow:hidden;
  background:linear-gradient(135deg,#2d2222 0%,#15171f 42%,#0d111c 100%);
  position:relative;
}
.hero-media img{
  width:100%;height:100%;object-fit:cover;object-position:center top;
}
.kicker{margin:24px 0}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:22px 0 30px}
.grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin:22px 0 40px}
.section{padding:8px 0 30px}
.list{margin:12px 0 0 0;padding-left:20px;color:#dbe1ea;line-height:1.8}
.notice{margin-top:18px;padding:14px 16px;border:1px solid rgba(255,130,130,.45);background:rgba(115,28,28,.15);color:#ffd9d9;border-radius:14px}
.small{font-size:.95rem;color:#d3d9e4}
.footer{border-top:1px solid var(--line);padding:24px 0 40px;margin-top:26px;color:#d7dbe4;text-align:center}
.footer-links{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.page-head{padding:34px 0 10px}
.page-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.page-grid-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:stretch}
.product-groups{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}
.tag{display:inline-block;background:rgba(255,100,100,.18);color:#ffd4d4;border:1px solid rgba(255,100,100,.34);padding:6px 10px;border-radius:999px;font-weight:700;font-size:.78rem}
.price{font-size:2rem;font-weight:800;margin:14px 0 10px}
.product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.product-card{background:rgba(20,24,34,.94);border:1px solid var(--line);border-radius:22px;padding:22px}
.meta{font-size:.95rem;color:#cfd6e2}
.berserker-banner{
  background:linear-gradient(90deg, rgba(255,75,75,.15), rgba(255,75,75,.05));
  border:1px solid rgba(255,75,75,.28);
}
.photo-card{padding:0;overflow:hidden}
.photo-card img{width:100%;height:100%;object-fit:cover;object-position:center top;min-height:560px}
@media (max-width: 1100px){
  .grid-5{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 980px){
  .hero-grid,.page-grid,.page-grid-hero,.grid-4,.product-grid,.product-groups,.grid-5{grid-template-columns:1fr}
  h1{font-size:2.9rem}
  .hero-media,.photo-card img{min-height:420px}
  .nav{align-items:flex-start}
}


.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-group{display:flex;flex-direction:column;gap:8px}
label{font-weight:700;color:#f0f3f8}
input,select,textarea{
  width:100%;padding:14px 14px;border-radius:14px;border:1px solid var(--line);
  background:rgba(12,15,23,.95);color:#fff;font:inherit
}
textarea{min-height:140px;resize:vertical}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.shop-cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.badge{
  display:inline-block;padding:6px 10px;border-radius:999px;font-size:.78rem;font-weight:800;
  background:rgba(255,75,75,.16);border:1px solid rgba(255,75,75,.3);color:#ffd8d8
}
.table-like{display:grid;grid-template-columns:1.1fr 1fr;gap:14px;margin-top:10px}
.mini-card{
  background:rgba(18,22,31,.95);border:1px solid var(--line);border-radius:18px;padding:18px
}
@media (max-width: 980px){
  .form-grid,.info-grid,.shop-cat-grid,.table-like{grid-template-columns:1fr}
}


/* --- Version 10 Mobile Optimierung --- */
.menu-toggle{
  display:none;
  background:transparent;
  border:1px solid var(--line);
  color:#fff;
  border-radius:12px;
  padding:10px 14px;
  font-weight:800;
  cursor:pointer;
}
@media (max-width: 900px){
  .topbar{position:sticky;top:0;z-index:1000}
  .nav{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:12px;
  }
  .brand{font-size:2.6rem;line-height:1}
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center}
  .menu{
    grid-column:1/-1;
    display:none !important;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    width:100%;
    padding:10px 0 4px 0;
  }
  .menu.open{display:flex !important}
  .menu a{
    width:100%;
    font-size:1.15rem;
    line-height:1.3;
    padding:10px 0;
  }
  .hero{padding-top:18px}
  .hero-grid{
    grid-template-columns:1fr !important;
    gap:18px;
  }
  .hero-grid .hero-media{order:2}
  .hero-grid .card{order:1}
  h1{font-size:3.2rem !important;line-height:1.02}
  h2{font-size:2.2rem !important;line-height:1.08}
  h3{font-size:1.45rem !important;line-height:1.15}
  .subtitle,.redline{font-size:1.05rem !important;line-height:1.35}
  .lead{font-size:1.05rem !important;line-height:1.6}
  .btns{
    flex-direction:column;
    align-items:stretch;
  }
  .btn{
    width:100%;
    justify-content:center;
    text-align:center;
    min-height:52px;
  }
  .container{
    width:min(100% - 24px, 1180px) !important;
  }
  .card,.mini-card{
    padding:22px !important;
    border-radius:20px !important;
  }
  .grid-4,.grid-5{
    grid-template-columns:1fr !important;
  }
  .footer{
    padding-bottom:28px;
  }
  .footer .container{
    gap:10px;
  }
}
@media (max-width: 560px){
  .brand{font-size:2.1rem}
  h1{font-size:2.65rem !important}
  h2{font-size:1.9rem !important}
  .card,.mini-card{padding:18px !important}
}


/* --- Version 11 Mobile Menü & Feinschliff --- */
.menu-toggle{
  gap:10px;
}
.menu-toggle .burger{
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
}
.menu-toggle .burger span{
  display:block;
  width:18px;
  height:2px;
  border-radius:2px;
  background:#fff;
}
.menu-toggle .label{
  font-weight:800;
}
@media (max-width: 900px){
  .topbar{
    backdrop-filter: blur(10px);
    background:rgba(5,8,15,.94);
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .menu{
    background:rgba(9,12,20,.96);
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    padding:10px 14px 12px 14px !important;
    box-shadow:0 18px 40px rgba(0,0,0,.28);
  }
  .menu a{
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .menu a:last-child{
    border-bottom:none;
  }
  .hero-media img{
    border-radius:24px !important;
  }
  .kicker.card.small,
  .berserker-banner{
    margin-top:18px;
  }
  .footer-links{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:14px;
  }
}
@media (max-width: 560px){
  .brand{
    font-size:1.85rem !important;
  }
  .menu-toggle{
    padding:9px 12px;
    border-radius:10px;
  }
  .hero-media img{
    max-height:none;
    object-fit:cover;
  }
}


/* --- Version 13 Shop-Produkte & Gürtelprüfung --- */
.product-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.product-card{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.product-meta{
  font-size:.92rem;
  color:#c9ced8;
}
.product-price{
  font-size:1.35rem;
  font-weight:800;
  color:#fff;
}
.product-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:auto;
}
.notice-box{
  padding:18px 20px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.03);
}
.form-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}
.form-card{
  padding:22px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(15,18,28,.88);
}
.form-list{
  padding-left:20px;
  line-height:1.7;
}
.inline-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:10px 0 0 0;
}
@media (max-width: 980px){
  .product-grid,.form-grid{grid-template-columns:1fr;}
}


/* --- Version 14 Gürtelprüfung Formular-Upgrade --- */
.form-shell{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:22px;
}
.form-panel{
  padding:24px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(15,18,28,.9);
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.form-title{
  margin-bottom:14px;
}
.application-form{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}
.application-form .full{
  grid-column:1 / -1;
}
.field{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.field label{
  font-weight:700;
  color:#eef2f7;
}
.field input,
.field select,
.field textarea{
  width:100%;
  padding:14px 15px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:#fff;
  font:inherit;
}
.field input::placeholder,
.field textarea::placeholder{
  color:#aeb7c5;
}
.field textarea{
  min-height:140px;
  resize:vertical;
}
.field small{
  color:#bfc7d4;
}
.info-stack{
  display:grid;
  gap:16px;
}
.info-box{
  padding:18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.03);
}
.checklist{
  padding-left:20px;
  line-height:1.7;
}
.form-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:8px;
}
@media (max-width: 980px){
  .form-shell{grid-template-columns:1fr;}
  .application-form{grid-template-columns:1fr;}
}