/* Smartphone refinements. Desktop rules remain unchanged. */
@media (max-width: 767px) {
  html {
    scroll-padding-top: 112px;
  }

  body {
    overflow-x: hidden;
  }

  /* Compact header and language selector */
  body.dark-home > header > div:first-child {
    min-height: 34px;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  body.dark-home > header > div:first-child > div > span:nth-of-type(3),
  body.dark-home > header > div:first-child > div > span:nth-of-type(4) {
    display: none !important;
  }

  body > header > nav,
  body > header > div > nav,
  body > nav > div {
    min-height: 62px !important;
    height: auto !important;
    padding: 8px 14px !important;
    gap: 10px !important;
  }

  header .brand-logo,
  .logo {
    height: 40px !important;
    max-width: 78px;
    object-fit: contain;
  }

  [data-contact-open] {
    min-height: 42px;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  [data-mobile-menu-button],
  .menu-button {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px;
    padding: 0 !important;
  }

  .mobile-menu-panel,
  .mobile-menu {
    max-height: calc(100vh - 96px);
    overflow-y: auto;
  }

  .mobile-menu-link,
  .mobile-menu a {
    min-height: 48px;
    padding: 13px 18px !important;
  }

  /* Consistent mobile spacing and typography */
  main section {
    scroll-margin-top: 104px;
  }

  main section.py-xl,
  #support.py-xl {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  main section.py-lg {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  .px-gutter {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .text-display-lg,
  h1.text-display-lg {
    font-size: clamp(34px, 10vw, 44px) !important;
    line-height: 1.06 !important;
  }

  .text-headline-lg,
  h2.text-headline-lg {
    font-size: clamp(28px, 8vw, 36px) !important;
    line-height: 1.12 !important;
  }

  .text-body-lg {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  /* Homepage hero */
  body.dark-home main > section:first-child {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    padding-top: 0;
    padding-bottom: 38px;
  }

  body.dark-home main > section:first-child > .absolute {
    position: relative !important;
    inset: auto !important;
    width: 100%;
    height: clamp(260px, 78vw, 370px);
    background: #050505 !important;
  }

  body.dark-home main > section:first-child > .absolute::after {
    content: none;
  }

  body.dark-home main > section:first-child img {
    object-fit: contain !important;
    object-position: center !important;
    opacity: 1;
    filter: brightness(1.32) contrast(.94) saturate(1.08);
  }

  body.dark-home main > section:first-child > .relative {
    padding-top: 26px;
  }

  body.dark-home main > section:first-child .max-w-2xl {
    max-width: 100%;
  }

  body.dark-home main > section:first-child .inline-flex {
    max-width: calc(100vw - 32px);
    margin-left: 0 !important;
    padding: 6px 12px !important;
    font-size: 14px !important;
    white-space: normal;
  }

  body.dark-home main > section:first-child p {
    max-width: 34rem;
    margin-bottom: 22px !important;
  }

  body.dark-home main > section:first-child a {
    width: min(100%, 240px) !important;
    height: 46px !important;
  }

  /* Benefits as compact, easy-to-scan cards */
  #garantie .grid {
    gap: 10px !important;
  }

  #garantie .grid > div {
    display: grid !important;
    grid-template-columns: 42px 1fr;
    column-gap: 12px !important;
    row-gap: 3px !important;
    align-items: center;
    padding: 14px !important;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .08);
  }

  #garantie .grid > div > div {
    width: 42px !important;
    height: 42px !important;
    grid-row: 1 / span 2;
  }

  #garantie .grid > div h3 {
    margin: 0 !important;
    font-size: 19px !important;
  }

  #garantie .grid > div p {
    margin: 0 !important;
    font-size: 14px;
    line-height: 1.4;
  }

  /* Delivery and product presentation */
  .delivery-feature {
    border-radius: 18px !important;
  }

  .delivery-feature > div {
    padding: 24px 20px !important;
  }

  .delivery-image-wrap {
    min-height: 190px !important;
    margin: 0 10px 10px !important;
    border-radius: 14px !important;
  }

  #modelle .text-center.mb-xl,
  #e1-details .text-center.mb-xl {
    margin-bottom: 28px !important;
  }

  #modelle > div > div:last-child {
    border-radius: 18px !important;
  }

  #modelle .lg\:col-span-7.bg-white {
    min-height: 310px !important;
    padding: 12px !important;
  }

  #e1-main-image {
    max-height: 300px !important;
    transform: scale(1.22) !important;
  }

  .e1-stock-badge {
    top: 12px !important;
    right: 10px !important;
    max-width: 170px !important;
    padding: 8px 11px !important;
    border-width: 1px !important;
    border-radius: 9px !important;
    font-size: 14px !important;
  }

  #modelle .lg\:col-span-5 {
    padding: 22px 18px 20px !important;
  }

  #modelle .e1-keyfacts {
    gap: 5px !important;
  }

  #modelle .e1-keyfacts > div {
    min-width: 0;
    padding: 8px 4px !important;
  }

  #modelle .e1-keyfacts strong {
    font-size: 16px !important;
  }

  #modelle .e1-keyfacts span:last-child {
    font-size: 10px !important;
    overflow-wrap: anywhere;
  }

  #modelle .e1-price strong {
    font-size: 36px !important;
  }

  #modelle .e1-extra-battery {
    padding: 12px !important;
  }

  #modelle .e1-color {
    width: 46px;
    height: 46px;
  }

  #modelle .flex.flex-col.sm\:flex-row a {
    min-height: 48px;
    padding: 12px 14px !important;
  }

  /* Specifications and image gallery */
  #e1-details .grid {
    gap: 12px !important;
  }

  #e1-details .spec-card {
    padding: 18px !important;
    border-radius: 16px !important;
  }

  #e1-details .spec-card > .material-symbols-outlined {
    width: 42px;
    height: 42px;
    margin-bottom: 10px !important;
  }

  #e1-details .spec-card h3 {
    font-size: 20px !important;
    padding-bottom: 9px;
    margin-bottom: 9px !important;
  }

  #e1-details .feature-image-button {
    height: 280px !important;
  }

  #e1-details article {
    border-radius: 16px !important;
  }

  #e1-details article > div.p-md {
    padding: 16px !important;
  }

  .feature-dialog {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
    border-radius: 16px;
  }

  #feature-dialog-image {
    max-height: 72dvh !important;
  }

  /* Forms and contact dialog */
  #probefahrt > div {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #probefahrt > div > div {
    border-radius: 18px !important;
    padding: 20px 14px !important;
  }

  #probefahrt form .grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

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

  input,
  select,
  textarea {
    min-height: 46px;
  }

  .contact-dialog {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
    border-radius: 17px;
  }

  .contact-dialog > div {
    padding: 24px 18px !important;
    max-height: calc(100dvh - 20px);
    overflow-y: auto;
  }

  /* Spare parts, support and footer */
  #ersatzteile > div > div {
    height: 330px !important;
  }

  #ersatzteile .p-lg {
    padding: 20px !important;
  }

  #support .bg-white {
    padding: 24px 18px !important;
    border-radius: 18px !important;
  }

  #support .text-\[32px\] {
    font-size: clamp(21px, 6.5vw, 28px) !important;
    white-space: nowrap;
  }

  #support .material-symbols-outlined.text-\[40px\] {
    font-size: 32px !important;
  }

  footer {
    margin-top: 48px !important;
  }

  footer .flex {
    gap: 18px !important;
  }

  /* Legal and about pages */
  main.max-w-\[800px\],
  main.max-w-container-max {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  aside + div,
  .lg\:col-span-9 {
    min-width: 0;
  }

  .hero {
    padding-top: 42px !important;
    padding-bottom: 42px !important;
  }

  .hero-grid {
    gap: 28px !important;
  }

  .hero h1 {
    font-size: clamp(38px, 12vw, 52px) !important;
  }

  .lead {
    font-size: 17px !important;
  }

  .photo {
    border-radius: 18px !important;
  }

  .cards {
    gap: 12px !important;
  }

  .card {
    padding: 21px !important;
  }

  .promise {
    padding: 46px 0 !important;
  }

  .promise-box {
    padding: 26px 20px !important;
  }
}

@media (max-width: 380px) {
  [data-contact-open] {
    display: none;
  }

  body > header > nav,
  body > header > div > nav,
  body > nav > div {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  #modelle .e1-keyfacts strong {
    font-size: 14px !important;
  }

  #modelle .e1-color {
    width: 43px;
    height: 43px;
  }
}