/* Mobile homepage final layer – single authoritative rule set.
   Scope: homepage hero panel, hero background and direct-call button only. */
@media (max-width: 720px) {
  /* Mobile hero: 20% zoom-out from the previous 125% scale; lower edge stays anchored. */
  .sk-home-hero {
    background-image: url('/assets/hero-home-1280.webp') !important;
    background-size: auto 100% !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
    background-color: #071426 !important;
  }

  .sk-home-hero > .sk-home-hero-grid {
    width: min(calc(100% - 20px), 600px) !important;
    min-height: auto !important;
    padding: 58px 0 22px !important;
    gap: 12px !important;
    align-items: start !important;
  }

  /* About 30% more compact than the previous mobile panel. */
  .sk-home-hero-content {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 10px 11px !important;
    overflow: visible !important;
    border-radius: 16px !important;
    background-color: rgba(5, 13, 25, .288) !important;
    background-image: linear-gradient(135deg, rgba(7, 20, 38, .224), rgba(7, 20, 38, .128)) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .07) !important;
    transform: none !important;
    contain: none !important;
    backdrop-filter: blur(11px) saturate(112%) !important;
    -webkit-backdrop-filter: blur(11px) saturate(112%) !important;
  }

  /* Android fallback when backdrop-filter is unsupported or unstable. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .sk-home-hero-content {
      background-color: rgba(5, 13, 25, .432) !important;
      background-image: none !important;
    }
  }

  .sk-home-hero-content,
  .sk-home-hero-content * {
    box-sizing: border-box !important;
  }

  .sk-home-hero-content .sk-hero-copy {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  .sk-home-hero-content .sk-eyebrow {
    margin: 0 0 4px !important;
    font-size: 12px !important;
    line-height: 1.28 !important;
    letter-spacing: .13em !important;
    overflow-wrap: anywhere !important;
  }

  .sk-home-hero-content h1 {
    max-width: 100% !important;
    margin: 0 0 6px !important;
    font-size: clamp(28px, 8.4vw, 34px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.032em !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  .sk-home-hero-content .sk-lead {
    max-width: 100% !important;
    margin: 0 0 8px !important;
    font-size: 15px !important;
    line-height: 1.30 !important;
    overflow-wrap: anywhere !important;
  }

  .sk-home-hero-content .sk-hero-actions {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
  }

  .sk-home-hero-content .sk-hero-actions > .sk-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 10px !important;
    font-size: 15px !important;
    line-height: 1 !important;
  }

  /* Modern round call action, vertically centred at the right edge. */
  a[aria-label="Jetzt anrufen"] {
    position: fixed !important;
    top: 50% !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: auto !important;
    left: auto !important;
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid rgba(255, 255, 255, .42) !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: translateY(-50%) !important;
    background: linear-gradient(145deg, #25c7ee 0%, #069bc7 100%) !important;
    box-shadow: 0 9px 24px rgba(0, 0, 0, .30), 0 0 0 4px rgba(12, 184, 226, .13) !important;
    color: #fff !important;
    opacity: .97 !important;
    z-index: 1200 !important;
  }

  a[aria-label="Jetzt anrufen"] svg {
    width: 24px !important;
    height: 24px !important;
    color: #fff !important;
    stroke: currentColor !important;
  }

  a[aria-label="Jetzt anrufen"]:active {
    transform: translateY(-50%) scale(.94) !important;
  }
}

/* Extra narrow Android devices. */
@media (max-width: 380px) {
  .sk-home-hero > .sk-home-hero-grid {
    width: min(calc(100% - 14px), 600px) !important;
    padding-top: 54px !important;
  }

  .sk-home-hero-content {
    padding: 9px !important;
  }

  .sk-home-hero-content h1 {
    font-size: clamp(26px, 8.1vw, 31px) !important;
  }

  .sk-home-hero-content .sk-lead {
    font-size: 14px !important;
  }
}

/* 2026-07-25 – mobile vehicle-brand bar compacting only.
   Requested: vertical text clearance -50%, brand spacing -40%, text size -15%. */
@media (max-width: 720px) {
  :root {
    --sk-fixed-brand-height: 30px !important;
  }

  html,
  body {
    scroll-padding-top: calc(var(--sk-fixed-header-height) + 30px) !important;
  }

  body {
    padding-top: calc(var(--sk-fixed-header-height) + 30px) !important;
  }

  .sk-brand-strip,
  body > .sk-brand-strip,
  .sk-brand-strip[data-sk-fixed-brand-strip="true"],
  .sk-header + .sk-brand-strip,
  .top + .sk-brand-strip {
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .sk-brand-strip .sk-brand-marquee,
  .sk-brand-strip .sk-brand-track,
  .sk-brand-strip .sk-container,
  .sk-brand-strip-track,
  .sk-brand-strip-inner {
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: center !important;
  }

  .sk-brand-strip .sk-brand-track {
    gap: 19.2px !important;
    padding-left: 9.6px !important;
    padding-right: 9.6px !important;
  }

  .sk-brand-strip .sk-brand-track span {
    font-size: 13.6px !important;
    line-height: 1 !important;
  }

  .sk-brand-strip .sk-brand-track span::after {
    margin-left: 19.2px !important;
  }
}