/* Mobile-first optimizations */
@media (max-width: 768px) {

  /* Header / Logo */
  .navbar {
    padding-bottom: 12px !important;
  }
  .navbar img {
    height: 48px !important;
    top: 0 !important;
    position: relative !important;
  }

  /* Hero */
  .hero {
    padding-top: 32px !important;
  }
  .hero h1 {
    font-size: 2rem !important;
    line-height: 1.2 !important;
  }
  .hero p {
    font-size: 1rem !important;
  }
  .hero .row {
    flex-direction: column-reverse;
    text-align: center;
  }
  .hero .card {
    margin-bottom: 24px;
  }

  /* Buttons */
  .btn-lg {
    width: 100%;
  }

  /* Tarifrechner */
  .wizard-card {
    border-radius: 20px !important;
    padding: 16px !important;
  }

  /* Forms */
  input, select, textarea {
    font-size: 16px !important; /* prevent iOS zoom */
  }

  /* Cards spacing */
  .card {
    margin-bottom: 16px;
  }
}