: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;
  }
}


/* =========================================
   V2.2 – MOBILE FEINSCHLIFF TEIL 2
   ========================================= */

@media (max-width: 700px) {

  /* HERO */
  .hero {
    min-height: 58vh;
  }

  .hero .inner {
    padding-top: 34px;
    padding-bottom: 34px;
  }

  .hero-copy p {
    font-size: .96rem;
    line-height: 1.55;
  }

  /* VORHER / NACHHER */
  .before-after {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  .before-after > * {
    width: 100%;
  }

  .before-after img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* TERMINBEREICH */
  .booking-wrap {
    display: grid;
    grid-template-columns: 1fr !important;
  }

  .booking-wrap > * {
    width: 100%;
    min-width: 0;
  }

  .notice {
    font-size: .88rem;
    line-height: 1.5;
  }

  form {
    margin-top: 6px;
  }

  .form-grid {
    display: grid;
    grid-template-columns: 1fr !important;
  }

  .field,
  .field.full {
    grid-column: 1 !important;
  }

  .field label {
    display: block;
    margin-bottom: 6px;
    font-size: .9rem;
  }

  .field input,
  .field select,
  .field textarea {
    max-width: 100%;
  }

  .field textarea {
    resize: vertical;
  }

  /* Datenschutz-Zeile */
  .field.full > label:has(input[type="checkbox"]) {
    display: grid !important;
    grid-template-columns: 20px 1fr;
    gap: 10px !important;
    align-items: start !important;
  }

  .field.full > label:has(input[type="checkbox"]) input {
    width: 18px !important;
    height: 18px !important;
    min-height: 0 !important;
    margin: 2px 0 0 !important;
  }

  /* KONTAKT */
  .contact-box p {
    word-break: break-word;
  }

  /* Footer */
  footer .container {
    text-align: center;
  }

}



/* =========================================
   MOBILE CLEAN FIX
   ========================================= */

@media (max-width: 700px) {

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  * {
    box-sizing: border-box;
  }

  body {
    padding-bottom: 68px;
  }

  .container {
    width: calc(100% - 28px);
    max-width: 100%;
  }

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

  header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(8,10,13,.96);
  }

  .nav {
    min-height: 68px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .brand img {
    width: 165px;
    height: 52px;
  }

  .menu-btn {
    display: block;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    position: relative;
    z-index: 1002;
  }

  .navlinks {
    display: none;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    width: 100%;
    padding: 12px 14px 18px;
    background: #0b0e12;
    border-bottom: 1px solid #242b33;
  }

  .navlinks.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .navlinks a {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 12px;
    text-align: left;
    background: transparent;
  }

  .navlinks a.btn {
    display: none;
  }

  .hero {
    min-height: 390px;
    height: auto;
    background-size: cover;
    background-position: 65% center;
    display: flex;
    align-items: center;
    position: relative;
    touch-action: pan-y;
  }

  .hero .inner {
    min-height: 390px;
    width: 100%;
    max-width: 100%;
    padding: 28px 14px;
    display: flex;
    align-items: center;
  }

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

  .hero h1 {
    font-size: clamp(1.8rem, 8.5vw, 2.6rem);
    line-height: 1;
    margin: 18px 0 20px;
  }

  .hero p {
    font-size: .96rem;
    line-height: 1.5;
  }

  .hero-actions {
    gap: 10px;
    margin-top: 22px;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .section {
    padding: 48px 0;
  }

  .cards,
  .extras,
  .split,
  .booking-wrap,
  .form-grid,
  .contact-grid {
    grid-template-columns: 1fr !important;
  }

  .cards {
    gap: 18px;
  }

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

  .vehicle-switch {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    overflow: visible;
  }

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

  .checks {
    grid-template-columns: 1fr;
  }

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

  input,
  select,
  textarea {
    font-size: 16px;
  }

  .call-strip .container,
  .footer-row {
    flex-direction: column;
    align-items: stretch;
  }

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

  img,
  video,
  iframe {
    max-width: 100%;
  }

  .mobile-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    width: 100%;
    height: 62px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 6px;
    background: rgba(8,12,16,.97);
    border-top: 1px solid rgba(255,255,255,.10);
  }

  .mobile-actions a {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #171e25;
    color: #fff;
    text-decoration: none;
    font-size: .78rem;
    font-weight: 700;
  }

  .mobile-actions a:last-child {
    background: #2f8dff;
  }
}

@media (min-width: 701px) {
  .mobile-actions {
    display: none;
  }
}


/* =========================================
   MOBILE DESIGN POLISH
   ========================================= */

@media (max-width: 700px) {

  /* Doppelte Anruf-Leiste auf Mobil ausblenden */
  .call-strip {
    display: none;
  }

  /* HERO kompakter und ruhiger */
  .hero {
    min-height: 350px;
    background-position: 70% center;
  }

  .hero .inner {
    min-height: 350px;
    padding: 24px 18px;
  }

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

  .hero .eyebrow {
    font-size: .68rem;
    letter-spacing: .14em;
  }

  .hero h1 {
    font-size: clamp(1.65rem, 7.3vw, 2.25rem);
    line-height: 1.02;
    letter-spacing: -.025em;
    margin: 14px 0 16px;
  }

  .hero p {
    max-width: 330px;
    font-size: .9rem;
    line-height: 1.5;
  }

  .hero-actions {
    margin-top: 18px;
  }

  /* Auf Mobil reicht ein Hauptbutton im Hero */
  .hero-actions .btn.secondary {
    display: none;
  }

  /* Allgemein modernere Karten */
  .card,
  .package-card,
  .extra,
  .booking-panel,
  .contact-box,
  .ba,
  .about-points span,
  .more-services {
    border-radius: 18px;
  }

  .card,
  .package-card,
  .extra,
  .booking-panel,
  .contact-box {
    border-color: rgba(255,255,255,.09);
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
  }

  /* Paketbilder */
  .package-card {
    overflow: hidden;
  }

  .package-image {
    margin: 8px;
    border-radius: 14px;
  }

  .package-image img {
    height: 190px;
    border-radius: 14px;
  }

  .card-body {
    padding: 16px 18px 20px;
  }

  /* Zusatzleistungen */
  .extra {
    display: grid;
    grid-template-columns: 105px 1fr;
    align-items: stretch;
    overflow: hidden;
  }

  .extra img {
    width: 105px;
    height: 100%;
    min-height: 105px;
    object-fit: cover;
  }

  .extra div {
    padding: 16px;
  }

  /* Formulare ebenfalls weicher */
  .field input,
  .field select,
  .field textarea,
  .checks label,
  .slot {
    border-radius: 10px;
  }

  /* Fahrzeugauswahl */
  .vehicle-switch button {
    border-radius: 12px;
  }

  /* Buttons */
  .btn {
    border-radius: 11px;
  }

  /* Untere Mobile-Leiste etwas eleganter */
  .mobile-actions {
    height: 64px;
    padding: 7px;
  }

  .mobile-actions a {
    border-radius: 12px;
    font-size: .76rem;
    letter-spacing: .01em;
  }

}

/* GLOBAL DESIGN REFINEMENT */

.card,
.package-card,
.extra,
.booking-panel,
.contact-box,
.ba {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
}

.package-image {
  margin: 0;
  border-radius: 0;
  overflow: hidden;
}

.package-image img {
  border-radius: 0;
}

.card,
.package-card {
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.card:hover,
.package-card:hover {
  transform: translateY(-3px);
  border-color: rgba(47,141,255,.30);
  box-shadow: 0 16px 38px rgba(0,0,0,.25);
}

.extra {
  transition: transform .2s ease, border-color .2s ease;
}

.extra:hover {
  transform: translateY(-2px);
  border-color: rgba(47,141,255,.30);
}


/* Fahrzeugklasse */

.vehicle-switch {
  display: inline-grid;
  grid-template-columns: repeat(3, auto);
  gap: 5px;
  padding: 5px;
  margin: 28px 0 36px;
  background: #10151b;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 15px;
}

.vehicle-switch button {
  border: 0;
  border-radius: 11px;
  padding: 13px 20px;
  min-height: 46px;
  background: transparent;
  color: #aeb7c3;
  font-weight: 700;
  transition: .2s ease;
}

.vehicle-switch button:hover {
  background: rgba(255,255,255,.05);
  color: #fff;
}

.vehicle-switch button.active {
  background: #2f8dff;
  color: #fff;
  border: 0;
  box-shadow: 0 5px 16px rgba(47,141,255,.22);
}


/* MOBILE */

@media (max-width: 700px) {

  .hero {
    min-height: 360px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #080a0d;
  }

  .hero .inner {
    min-height: 360px;
  }

  .vehicle-switch {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    padding: 6px;
    gap: 5px;
  }

  .vehicle-switch button {
    width: 100%;
    text-align: center;
  }

  .package-card,
  .extra,
  .booking-panel,
  .contact-box {
    border-radius: 18px;
  }
}