:root{
  --bg:#090b0e; --panel:#11151a; --panel2:#161b22; --text:#f5f7fa; --muted:#aab2bd;
  --line:#28313d; --blue:#2d7be8; --silver:#d8dde5; --danger:#c44; --ok:#55b97a;
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;line-height:1.5}
a{color:inherit;text-decoration:none} img{display:block;max-width:100%}
.container{width:min(1180px,92vw);margin:auto}.section{padding:88px 0}.eyebrow{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:#8ea5c5}.section h2{font-size:clamp(2rem,4vw,3.8rem);line-height:1.05;margin:.4rem 0 1rem}.muted{color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:14px 20px;border:1px solid var(--silver);font-weight:800;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;background:var(--text);color:#0b0d10;transition:.2s}.btn:hover{transform:translateY(-1px)}.btn.secondary{background:transparent;color:var(--text);border-color:#46515f}.btn.blue{background:var(--blue);border-color:var(--blue);color:white}.btn.small{padding:9px 12px;font-size:.8rem}.btn.danger{background:#7a2730;color:#fff;border-color:#7a2730}
header{position:sticky;top:0;z-index:30;background:rgba(8,10,13,.9);backdrop-filter:blur(15px);border-bottom:1px solid #20262e}.nav{display:flex;align-items:center;justify-content:space-between;min-height:78px;gap:25px}.brand img{width:245px;height:60px;object-fit:contain;object-position:left center}.navlinks{display:flex;gap:24px;align-items:center;font-size:.92rem}.menu-btn{display:none;background:none;color:#fff;border:0;font-size:1.6rem}
.hero{min-height:700px;background:#080a0d url('/assets/hero.png') center/cover no-repeat;display:flex;align-items:center;position:relative}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,9,12,.15),rgba(7,9,12,.0) 65%)}.hero .inner{position:relative;z-index:1;width:min(1180px,92vw);margin:auto}.hero-copy{width:min(720px,60vw);padding:50px 0}.hero h1{font-size:clamp(3rem,6.4vw,6.9rem);line-height:.91;margin:24px 0 26px;letter-spacing:-.04em}.hero h1 span{color:#949ca8}.hero p{font-size:1.13rem;color:#bbc2cb;max-width:650px}.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}.call-strip{border-top:1px solid #202831;border-bottom:1px solid #202831;background:#0e1217}.call-strip .container{padding:18px 0;display:flex;align-items:center;justify-content:space-between;gap:20px}.call-strip strong{font-size:1.05rem}
.vehicle-switch{display:flex;gap:10px;flex-wrap:wrap;margin:30px 0 38px}.vehicle-switch button{background:#0e1217;color:#c9d0d8;border:1px solid #303844;padding:12px 15px;cursor:pointer}.vehicle-switch button.active{background:#fff;color:#111;border-color:#fff}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.card{background:var(--panel);border:1px solid #202833;overflow:hidden;display:flex;flex-direction:column}.card img{aspect-ratio:4/3;object-fit:cover}.card-body{padding:22px;display:flex;flex-direction:column;gap:10px;height:100%}.card h3{font-size:1.3rem;margin:0}.price{font-size:2rem;font-weight:900;margin-top:auto}.price small{font-size:.78rem;color:var(--muted);font-weight:600}
.extras{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.extra{background:#101419;border:1px solid #202833;overflow:hidden}.extra img{aspect-ratio:1.2/1;object-fit:cover}.extra div{padding:16px}.extra h4{margin:0 0 4px}.extra strong{color:#fff}
.split{display:grid;grid-template-columns:1fr 1fr;gap:22px}.ba{position:relative;overflow:hidden;background:#111;border:1px solid #252c34}.ba img{width:100%;aspect-ratio:16/10;object-fit:cover}.tag{position:absolute;left:16px;top:16px;background:#0b0d10d9;border:1px solid #49515b;padding:7px 10px;font-weight:800;text-transform:uppercase;font-size:.75rem;letter-spacing:.1em}
.booking-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:start}.booking-panel{background:#101419;border:1px solid #232b34;padding:26px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field{display:flex;flex-direction:column;gap:7px}.field.full{grid-column:1/-1}.field label{font-size:.82rem;color:#c8cdd5}.field input,.field select,.field textarea{width:100%;background:#0b0e12;color:#fff;border:1px solid #303944;padding:13px 12px;font:inherit}.field textarea{min-height:100px;resize:vertical}.checks{display:grid;grid-template-columns:1fr 1fr;gap:9px}.checks label{display:flex;align-items:center;gap:8px;background:#0b0f13;border:1px solid #2b323b;padding:9px 10px;font-size:.86rem}.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.slot{padding:11px 8px;background:#0b0f13;border:1px solid #303943;color:#fff;cursor:pointer}.slot.active{background:#fff;color:#111}.slot[disabled]{opacity:.35;cursor:not-allowed}.notice{padding:12px 14px;background:#0d131a;border-left:3px solid var(--blue);color:#b9c2cf;font-size:.9rem}.success{color:#b9f0c8}.error{color:#ffb0b6}
.contact-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}.contact-box{background:#101419;border:1px solid #232b34;padding:24px}.contact-box h4{margin:0 0 8px}
.legal{max-width:900px}.legal h2{font-size:2rem;margin-top:35px}.legal h3{font-size:1.25rem;margin-top:25px}.legal p,.legal li{color:#c0c6ce}.legal a{text-decoration:underline}
footer{border-top:1px solid #202831;padding:35px 0 45px;color:#9da6b2}.footer-row{display:flex;justify-content:space-between;align-items:flex-start;gap:30px}.footer-logo{width:200px}.footer-links{display:flex;gap:18px;flex-wrap:wrap;font-size:.9rem}
.admin{padding:40px 0}.admin h1{font-size:2.5rem}.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.admin-card{background:#11161c;border:1px solid #26303a;padding:18px}.row{display:flex;gap:10px;flex-wrap:wrap}.request{border-top:1px solid #2a333d;padding:14px 0}.status{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;padding:3px 8px;border:1px solid #45505e}.status.confirmed{color:#9be0ad}.status.pending{color:#ffd88b}.status.rejected{color:#f3a3a8}
@media(max-width:980px){.cards{grid-template-columns:repeat(2,1fr)}.extras{grid-template-columns:repeat(2,1fr)}.booking-wrap,.contact-grid,.admin-grid{grid-template-columns:1fr}.hero-copy{width:min(680px,86vw)}.navlinks{display:none;position:absolute;top:78px;left:0;right:0;background:#0b0e12;border-bottom:1px solid #242b33;padding:18px 4vw;flex-direction:column;align-items:flex-start}.navlinks.open{display:flex}.menu-btn{display:block}}
@media(max-width:640px){.section{padding:62px 0}.hero{min-height:640px;background-position:62% center}.hero-copy{width:92vw}.hero h1{font-size:3.2rem}.cards,.extras,.split,.form-grid{grid-template-columns:1fr}.checks{grid-template-columns:1fr}.slots{grid-template-columns:repeat(2,1fr)}.call-strip .container,.footer-row{flex-direction:column;align-items:flex-start}.brand img{width:190px}}

/* V2 – Leistungsbilder & Paketkarten */

.package-image {
  position: relative;
  overflow: hidden;
}

.package-image img {
  display: block;
  width: 100%;
  height: 230px;
  object-fit: cover;
}

.package-overlay {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  line-height: .9;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
  pointer-events: none;
}

.package-overlay span {
  color: #ffffff;
  font-size: clamp(1.3rem, 2vw, 2rem);
  font-weight: 800;
  letter-spacing: .06em;
}

.package-overlay strong {
  color: #2f8dff;
  font-size: clamp(1.55rem, 2.4vw, 2.4rem);
  font-weight: 900;
  letter-spacing: .03em;
}

.service-list {
  margin: 18px 0 22px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.service-list li {
  position: relative;
  padding-left: 20px;
  color: #d7dce2;
  font-size: .92rem;
  line-height: 1.45;
}

.service-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #2f8dff;
  font-weight: 800;
}

.about-section {
  background: #11171d;
}

.services-section {
  background: #171e25;
}

.about-lead {
  max-width: 900px;
  font-size: 1.08rem;
  line-height: 1.7;
}

.about-points {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.about-points span {
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  color: #eef3f7;
  font-size: .9rem;
}

@media (max-width: 700px) {
  .package-image img {
    height: 210px;
  }

  .package-overlay {
    left: 14px;
    bottom: 14px;
  }

  .about-points {
    flex-direction: column;
  }

  .about-points span {
    width: fit-content;
  }
}


/* =========================================
   V2 – MOBILE OPTIMIERUNG
   ========================================= */

html {
  scroll-behavior: smooth;
}

section {
  scroll-margin-top: 85px;
}

/* Tablets */
@media (max-width: 900px) {

  .container {
    width: min(100% - 32px, 1180px);
  }

  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .booking-wrap {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .vehicle-switch {
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 5px;
  }

  .vehicle-switch button {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}


/* Smartphones */
@media (max-width: 700px) {

  body {
    overflow-x: hidden;
  }

  .section {
    padding: 58px 0;
  }

  h1 {
    font-size: clamp(2.1rem, 11vw, 3.4rem);
    line-height: .98;
  }

  h2 {
    font-size: clamp(1.65rem, 7vw, 2.25rem);
    line-height: 1.08;
  }

  h3 {
    line-height: 1.2;
  }

  /* Navigation kompakter */
  header .container {
    gap: 12px;
  }

  .navlinks {
    gap: 8px;
    overflow-x: auto;
    max-width: 100%;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .navlinks::-webkit-scrollbar {
    display: none;
  }

  .navlinks a {
    white-space: nowrap;
    font-size: .82rem;
  }

  /* Hero */
  .hero {
    min-height: 72vh;
  }

  .hero-copy {
    max-width: 100%;
  }

  /* Telefonleiste */
  .call-strip .container {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .call-strip .btn {
    width: 100%;
    text-align: center;
  }

  /* Über uns */
  .about-lead {
    font-size: 1rem;
  }

  .about-points {
    gap: 8px;
  }

  /* Pakete */
  .cards {
    grid-template-columns: 1fr;
  }

  .package-card {
    width: 100%;
  }

  .package-image img {
    height: 220px;
  }

  .card-body {
    padding: 20px;
  }

  .service-list li {
    font-size: .9rem;
  }

  /* Fahrzeugauswahl */
  .vehicle-switch {
    width: 100%;
    display: flex;
    overflow-x: auto;
    gap: 8px;
    margin: 22px 0;
    scrollbar-width: none;
  }

  .vehicle-switch::-webkit-scrollbar {
    display: none;
  }

  .vehicle-switch button {
    min-height: 44px;
  }

  /* Zusatzleistungen */
  .extras {
    grid-template-columns: 1fr;
  }

  .extra {
    width: 100%;
  }

  /* Vorher / Nachher */
  .before-after {
    grid-template-columns: 1fr;
  }

  /* Termin */
  .booking-wrap {
    grid-template-columns: 1fr;
  }

  .booking-wrap input,
  .booking-wrap select,
  .booking-wrap textarea,
  .booking-wrap button {
    width: 100%;
    min-height: 46px;
    font-size: 16px;
  }

  /* verhindert iPhone-Zoom bei Formularfeldern */
  input,
  select,
  textarea {
    font-size: 16px;
  }

  /* Kontakt */
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .contact-box {
    width: 100%;
  }

  .contact-box .btn {
    width: 100%;
    text-align: center;
  }

  /* Buttons allgemein */
  .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

}


/* V2.1 – längere Paketnamen kompakter */
.package-overlay-long span {
  font-size: clamp(1.05rem, 1.5vw, 1.45rem);
}

.package-overlay-long strong {
  font-size: clamp(1.15rem, 1.7vw, 1.65rem);
}

@media (max-width: 700px) {
  .package-overlay-long span {
    font-size: 1.05rem;
  }

  .package-overlay-long strong {
    font-size: 1.15rem;
  }
}


/* V2.1 – Zusatzleistungen im Terminformular sauber ausrichten */

.checks {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.checks label {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: center;
  column-gap: 10px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  cursor: pointer;
}

.checks input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-self: start;
  accent-color: #2f8dff;
}

@media (max-width: 700px) {
  .checks label {
    grid-template-columns: 20px 1fr;
    padding: 11px 10px;
    font-size: .92rem;
  }

  .checks input[type="checkbox"] {
    width: 17px !important;
    height: 17px !important;
  }
}