/* ==========================================================================
   Timeless Motors · Responsive Overrides (Mobile-First Polish)
   Standard-Breakpoints: 480 (small), 760 (mobile), 1100 (tablet/laptop), 1080+ (desktop)
   Diese Datei zuletzt einbinden, überschreibt Page-Inline-Styles.
   ========================================================================== */

/* ---------------- Anchor-Sprung: nav-aware scroll-padding (alle Seiten) ---------------- */
html{scroll-padding-top:110px !important;scroll-behavior:smooth}
@media (max-width:760px){html{scroll-padding-top:84px !important}}

/* ---------------- NAV · Global Anti-Overlap (alle Größen) ---------------- */
.nav-brand{flex-shrink:0;min-width:0}
.nav-cta{white-space:nowrap;flex-shrink:0}
.nav-dropdown-trigger{white-space:nowrap}
.nav-inner > .nav-links,
.nav-inner > div{min-width:0}

/* ---------------- MID-RANGE Tablet/kleines Laptop (761-1100px) ----------------
   Hier kollidieren Wordmark + Leistungen-Dropdown auf der bisherigen Nav.
   Lösung: Wordmark verstecken, Logo etwas kleiner, Nav-Links kompakter. */
@media (min-width:761px) and (max-width:1100px){
  .nav-brand-text{display:none !important}
  .nav-logo{height:52px !important;width:52px !important}
  .nav-inner{padding:10px 22px !important;gap:14px !important;height:auto !important}
  .nav-links{gap:18px !important;align-items:center}
  .nav-links a,
  .nav-link,
  .nav-dropdown-trigger{
    font-size:12px !important;
    letter-spacing:.1em !important;
  }
  .nav-cta{
    padding:10px 16px !important;
    font-size:12px !important;
    letter-spacing:.1em !important;
  }
  .nav-burger,
  .nav-inner > a.nav-burger{display:none !important} /* Desktop-Burger weg, Mobile-Nav greift erst <=760 */
}

/* ---------------- BASE: alle Mobile (<=760px) ---------------- */
@media (max-width:760px){

  /* === HERO === */
  /* Verkleinere überlange Hero-Sektionen auf Mobile */
  .hero{
    min-height:auto !important;
    padding-top:96px !important;
    padding-bottom:48px !important;
  }
  .hero h1{
    font-size:clamp(40px, 11vw, 72px) !important;
    line-height:.92 !important;
  }
  .hero-sub{
    font-size:15px !important;
    line-height:1.6 !important;
    padding-left:14px !important;
    margin-bottom:24px !important;
  }
  .hero-points,.hero-specs,.hero-meta-row{
    gap:8px 18px !important;
    margin-bottom:20px !important;
  }
  .hero-point,.hero-spec{font-size:10px !important;letter-spacing:.18em !important}
  .hero-breadcrumb{margin-bottom:18px !important;font-size:9px !important;letter-spacing:.22em !important}
  .hero-stamp img{height:90px !important;width:90px !important}
  .hero-meta-item strong{font-size:22px !important}
  .hero-note,.hero-badge{font-size:9px !important;letter-spacing:.18em !important;margin-top:14px !important}

  /* === BUTTONS / TOUCH-TARGETS ≥44px === */
  .btn{
    min-height:48px;
    padding:14px 22px !important;
    font-size:13px !important;
    letter-spacing:.12em !important;
  }
  .btn-primary,.btn-ghost,.btn-cream,.btn-phone{min-height:48px}
  .hero-ctas{gap:10px !important;width:100%}
  .hero-ctas .btn{flex:1 1 auto;justify-content:center}
  .nav-cta{
    min-height:44px;
    padding:11px 18px !important;
    font-size:12px !important;
  }
  .btn-buy{min-height:44px !important;padding:12px 18px !important}

  /* === NAV (klassische Nav-Links komplett verstecken, Mobile-Nav übernimmt) === */
  .nav-inner > .nav-links,
  .nav-inner > div:not(.nav-brand):not(.nav-logo):not(.mnav-burger):not(.mnav-panel){
    display:none !important;
  }
  .nav-inner{padding:10px 18px !important;height:auto !important;gap:12px !important}
  .nav-logo{height:48px !important;width:48px !important}
  .nav-brand-text{display:none !important}
  /* Desktop-CTA ausblenden — kommt im Off-Canvas wieder */
  .nav-inner > .nav-cta,
  .nav-inner > a.nav-cta{display:none !important}
  /* Burger sichtbar */
  .mnav-burger{display:inline-flex !important;margin-left:auto}

  /* === SECTIONS · weniger Padding === */
  .sec,section.sec{padding:60px 0 !important}
  .sec-head{margin-bottom:36px !important}
  .sec-head h2,.warum-h2,.featured-h2{
    font-size:clamp(34px, 9vw, 56px) !important;
    line-height:.92 !important;
  }
  .sec-lead{font-size:15px !important;line-height:1.6 !important}
  .container{padding:0 18px !important}

  /* === SEC-HEAD-SPLIT → 1-col === */
  .sec-head-split{
    grid-template-columns:1fr !important;
    gap:24px !important;
  }

  /* === STATS-BAR === */
  .stats-inner{
    grid-template-columns:repeat(2,1fr) !important;
    gap:0 !important;
  }
  .stat{
    padding:18px 16px !important;
    border-right:1px solid rgba(244,235,214,.07) !important;
    border-bottom:1px solid rgba(244,235,214,.07) !important;
  }
  .stat:nth-child(2n){border-right:none !important}
  .stat:nth-last-child(-n+2){border-bottom:none !important}
  .stat-value{font-size:34px !important}
  .stat-label{font-size:9px !important;letter-spacing:.18em !important}

  /* === TILE-GRID === */
  .tile-grid{grid-template-columns:1fr 1fr !important;gap:2px !important}
  .tile{padding:28px 20px !important;min-height:auto !important;gap:14px !important}
  .tile h3{font-size:22px !important}
  .tile p,.tile .tile-p{font-size:12.5px !important;line-height:1.55 !important}
  .tile-icon{width:40px !important;height:40px !important}
  .tile-icon svg{width:20px !important;height:20px !important}

  /* === FOOTER === */
  .footer{padding:48px 0 24px !important}
  .footer-grid{
    grid-template-columns:1fr !important;
    gap:32px !important;
    margin-bottom:32px !important;
  }
  .footer-logo{height:48px !important;width:48px !important}
  .footer-bottom{
    flex-direction:column;
    align-items:flex-start !important;
    gap:8px !important;
    text-align:left;
  }

  /* === KONTAKT-FORM (Mobile-Kompakt: vollständig in Viewport sichtbar) === */
  .kontakt-grid{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  .kontakt-direct,.kontakt-form{padding:18px 16px !important}
  .kontakt-direct{gap:14px !important}
  .kontakt-form{gap:12px !important}
  .kontakt-direct h3,.kontakt-form h3{font-size:22px !important;margin-bottom:2px !important}
  .input-wrap{gap:5px !important}
  .input-row{grid-template-columns:1fr !important;gap:10px !important}
  .input-label{font-size:10px !important;letter-spacing:.1em !important}
  .input-field,.input-area,.input-select{font-size:15px !important;padding:10px 12px !important}
  .input-area{min-height:80px !important}
  .input-hint{font-size:9px !important;line-height:1.5 !important}
  .form-submit{width:100%;justify-content:center;min-height:44px;padding:11px 18px !important;font-size:12px !important;margin-top:4px !important}
  .kontakt-direct-list{gap:6px !important}
  .kontakt-direct-list > a, .kontakt-direct-list > span{padding:9px 0 !important;gap:12px !important;min-height:auto !important;grid-template-columns:20px 1fr auto !important}
  .kontakt-direct-icon{width:20px !important;height:20px !important}
  .kontakt-direct-label{font-size:9px !important;letter-spacing:.18em !important}
  .kontakt-direct-value{font-size:17px !important}
  .kontakt-direct-arrow{font-size:13px !important}

  /* === CTA-STRIPE / SEC-CTA === */
  .cta-stripe,.sec-cta{padding:48px 0 !important}
  .cta-stripe-inner,.cta-inner{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:24px !important;
  }
  .cta-stripe h2,.cta-h2{font-size:clamp(30px,8vw,48px) !important}
  .cta-stripe-right,.cta-actions{
    width:100%;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
  }
  .cta-stripe-right .btn,.cta-actions .btn,.cta-actions .btn-phone{
    width:100%;justify-content:center;
  }
  .sec-cta::before{display:none !important}

  /* === GOOGLE-BEWERTUNGEN · Mobile Swipe-Slider ===
     Stimmen-Karten werden auf Mobile zu einer horizontalen Scroll-Toolbar
     mit Snap-Points. Swipe von rechts nach links wie ein Karussell. */
  .stimmen-grid{
    display:flex !important;
    grid-template-columns:none !important;
    overflow-x:auto !important;
    scroll-snap-type:x mandatory;
    scroll-padding:18px;
    -webkit-overflow-scrolling:touch;
    gap:14px !important;
    padding:4px 18px 24px !important;
    margin:0 -18px !important;
    scrollbar-width:none;
    scroll-behavior:smooth;
  }
  .stimmen-grid::-webkit-scrollbar{display:none}
  .stimmen-grid > .stimme,
  .stimmen-grid > .stimme-empty{
    flex:0 0 86vw !important;
    max-width:340px;
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }
  /* Swipe-Hint: dezenter Schatten am rechten Rand zeigt dass mehr kommt */
  .stimmen-sec{position:relative}
  .stimmen-sec::after{
    content:'';position:absolute;top:0;right:0;bottom:0;width:32px;
    background:linear-gradient(270deg,var(--werkbank-cream,#E3D3BF) 0%,transparent 100%);
    pointer-events:none;opacity:.65;
  }
  /* Mini-Hint-Text falls vorhanden, sonst per JS dynamisch */
  .stimmen-rate-inline{
    flex-wrap:wrap;
    font-size:12px !important;
  }
  .stimmen-rate-inline::after{
    content:'← swipe →';
    font-family:'JetBrains Mono',monospace;
    font-size:10px;letter-spacing:.22em;
    color:rgba(26,24,16,.45);
    margin-left:auto;
    text-transform:uppercase;
  }

  /* === INFO-STRIP / INFO-GRID === */
  .info-grid{
    grid-template-columns:1fr !important;
    gap:32px 0 !important;
  }
  .info-col{grid-column:span 12}
  .info-col h3{font-size:24px !important}

  /* === BUILD / FEATURED === */
  .build-inner,.featured-grid{
    grid-template-columns:1fr !important;
    gap:32px !important;
  }
  .build-img-stack,.featured-images{order:-1}
  .build h2{font-size:clamp(36px,9vw,60px) !important}
  .build-specs,.spec-grid{grid-template-columns:1fr !important}

  /* === WARUM === */
  .warum-grid{
    grid-template-columns:1fr !important;
    gap:32px !important;
  }
  .warum-img-wrap{max-width:100%}
  .warum-img{aspect-ratio:16/12}
  .warum-item{padding:14px 0 !important}

  /* === PAGE-CARDS (site-index) === */
  .pages-grid{grid-template-columns:1fr !important;gap:2px !important}
  .page-card,.page-card.feature,.page-card.half,.page-card.third,.page-card.quarter,.page-card.full{
    grid-column:span 12 !important;
    min-height:340px !important;
    flex-direction:column !important;
  }
  .page-card.full .card-img{min-height:200px !important;flex:0 0 200px !important}
  .page-card.full .card-body{flex:1 1 auto !important;border-left:none !important;border-top:1px solid rgba(26,24,16,.08) !important;padding:24px !important}
  .util-grid{grid-template-columns:1fr !important}
  .util-card{grid-column:span 12 !important;padding:24px !important;min-height:auto !important}
  .card-title{font-size:clamp(28px,7vw,40px) !important}

  /* === TOPBAR (site-index) === */
  .topbar-meta{display:none !important}
  .topbar-inner{padding:12px 18px !important}

  /* === ATM (Lackiererei) === */
  .atm{min-height:auto !important}
  .atm-grid{grid-template-columns:1fr !important;padding:32px 22px !important;min-height:auto !important}
  .atm-vlabel{writing-mode:horizontal-tb !important;transform:none !important;border-left:none !important;border-top:1px solid rgba(192,57,43,.4) !important;padding:8px 0 0 !important;height:auto !important}
  .atm-content h3{font-size:clamp(32px,8vw,52px) !important}

  /* === MARKEN-MARQUEE (US-Cars) === */
  .marken-marquee{padding:14px 0 !important}
  .marken-logo img{height:32px !important}

  /* === TESTIMONIALS (blockquotes) === */
  blockquote{font-size:22px !important;line-height:1.25 !important}
}

/* ---------------- SMALL: <=480px Quetsch-Zone ---------------- */
@media (max-width:480px){

  .container{padding:0 14px !important}

  /* Stats: 1 Spalte */
  .stats-inner{grid-template-columns:1fr !important}
  .stat{
    border-right:none !important;
    border-bottom:1px solid rgba(244,235,214,.07) !important;
    padding:14px 16px !important;
  }
  .stat:last-child{border-bottom:none !important}

  /* Tile-Grid: 1 Spalte */
  .tile-grid{grid-template-columns:1fr !important}

  /* Hero noch kleiner */
  .hero{padding-top:88px !important;padding-bottom:36px !important}
  .hero h1{font-size:clamp(36px, 10.5vw, 56px) !important}
  .hero-stamp img{height:72px !important;width:72px !important}

  /* Sec-Padding kleiner */
  .sec,section.sec{padding:44px 0 !important}
  .sec-head{margin-bottom:28px !important}

  /* Footer-Grid bleibt 1-Spalte (war schon im 760er Block) */
  .footer-grid{gap:24px !important}

  /* Spec-Grid (Inspektion) */
  .build-specs{grid-template-columns:1fr !important}

  /* Buttons */
  .btn{padding:13px 18px !important;font-size:12.5px !important}
}

/* ---------------- IMAGES — Mobile Optimierungen ---------------- */
img{height:auto}
img[loading]{content-visibility:auto}

/* ---------------- A11y · Focus visible ---------------- */
@media (max-width:760px){
  a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
    outline:2px solid var(--werkstatt-rot,#C0392B);
    outline-offset:2px;
  }
}

/* ---------------- Reduce Motion ---------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}