/* mobilsale24.de — Mobile Polish & App-Shell
   Globale Responsive-Verbesserungen, App-artige Bottom-Navigation,
   Safe-Area (Notch), Touch-Targets und Händler-/Admin-Mobilmenü. */

/* ---------- Globale Grundlagen ---------- */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}
html,body{overflow-x:clip}            /* horizontales Überlaufen verhindern */
body{overscroll-behavior-y:none}
img,svg,video,canvas{max-width:100%}
/* Volle dynamische Höhe auf mobilen Browsern (Adressleiste) */
@supports (min-height:100dvh){
  body{min-height:100dvh}
}

/* Medien/Tabellen brechen nicht aus dem Viewport */
table{max-width:100%}
pre,code{white-space:pre-wrap;word-break:break-word}

/* Lange Wörter/URLs umbrechen */
.listing-card__title,.magazine-card__title,.loc-hero h1,.hero__title{overflow-wrap:anywhere}

/* iOS: Eingaben mind. 16px → kein Auto-Zoom */
@media (max-width:560px){
  .input,.select,textarea.input,.nl-search__input{font-size:16px}
}

/* ---------- Safe-Area (Notch / iPhone) ---------- */
.site-header__inner{
  padding-left:max(var(--container-pad),env(safe-area-inset-left));
  padding-right:max(var(--container-pad),env(safe-area-inset-right));
}
.cookie-consent__inner{
  padding-left:max(var(--container-pad),env(safe-area-inset-left));
  padding-right:max(var(--container-pad),env(safe-area-inset-right));
}

/* ---------- Touch-Targets (Finger >= ~44px) ---------- */
@media (hover:none) and (pointer:coarse){
  .btn--sm{height:38px}
  .header-actions__btn,.btn--icon{min-width:44px;min-height:44px}
  .dropdown__item{min-height:44px}
  .main-nav__link{min-height:44px}
  .pagination__link{min-width:44px;height:44px}
  .srp__view-btn{width:44px;height:44px}
  .mobile-drawer__link{min-height:48px}
  a,button{touch-action:manipulation}
}

/* ====================================================================
   App-artige Bottom-Navigation (nur App-Layout, nur mobil)
   ==================================================================== */
.app-tabbar{display:none}

@media (max-width:1024px){
  .app-shell .app-tabbar{
    position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky);
    display:flex;align-items:stretch;justify-content:space-around;
    background:var(--color-surface);
    border-top:1px solid var(--color-border);
    box-shadow:0 -2px 12px rgba(0,0,0,.06);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .app-tabbar__item{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    padding:8px 4px 6px;min-height:56px;
    font-size:10px;font-weight:var(--fw-medium);
    color:var(--color-text-muted);
    transition:color var(--dur) var(--ease);
  }
  .app-tabbar__item svg{width:24px;height:24px;flex:none}
  .app-tabbar__item.is-active{color:var(--color-primary)}
  .app-tabbar__item:active{background:var(--color-surface-2)}
  .app-tabbar__label{line-height:1;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  /* Merklisten-Zähler am Herz-Tab */
  .app-tabbar__icon{position:relative;display:inline-flex}
  .app-tabbar__badge{position:absolute;top:-4px;left:14px;font-size:10px;padding:0 5px;line-height:15px;min-width:15px}
  /* Herz im Header entfällt mobil — die Tabbar übernimmt das */
  .header-actions__parks{display:none}

  /* Zentraler "Inserieren"-Aktionsknopf, hervorgehoben */
  .app-tabbar__sell{position:relative}
  .app-tabbar__sell .app-tabbar__plus{
    display:flex;align-items:center;justify-content:center;
    width:48px;height:48px;margin-top:-18px;border-radius:var(--radius-pill);
    background:var(--color-primary);color:#fff;
    box-shadow:0 4px 14px rgba(var(--color-primary-rgb),.45);
  }
  .app-tabbar__sell .app-tabbar__plus svg{width:26px;height:26px}
  .app-tabbar__sell{color:var(--color-primary)}

  /* Platz schaffen, damit Inhalt nicht hinter der Tabbar verschwindet */
  .app-shell main{padding-bottom:var(--sp-6)}
  .app-shell .site-footer{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  /* Cookie-Banner über der Tabbar platzieren */
  .app-shell .cookie-consent{bottom:calc(60px + env(safe-area-inset-bottom))}
}

/* Tabbar im Querformat sehr niedriger Geräte etwas kompakter */
@media (max-width:1024px) and (max-height:480px){
  .app-tabbar__item{min-height:48px}
}

/* ---------- Hero / Abschnitt: kompakter auf Mobil ---------- */
@media (max-width:768px){
  .hero{padding:var(--sp-8) 0 calc(var(--sp-12) + 30px)}
  .hero__title{font-size:var(--fs-2xl)}
  .hero__subtitle{font-size:var(--fs-md)}
  .section{padding:var(--sp-8) var(--container-pad)}
}
@media (max-width:480px){
  .section.container,.legal-page.container{padding:var(--sp-5)}
  .module{padding:var(--sp-5)}
  h1{font-size:var(--fs-xl)}
}

/* ---------- Footer kompakter ---------- */
@media (max-width:480px){
  .site-footer__newsletter-inner{flex-direction:column;align-items:stretch;text-align:left}
  .site-footer__bottom-inner{flex-direction:column;align-items:flex-start;gap:var(--sp-2)}
}

/* ====================================================================
   Händler-/Admin-Panel: mobiles Menü
   ==================================================================== */
.dealer-menu-toggle{display:none}
.dealer-overlay{display:none}

@media (max-width:1024px){
  .dealer-menu-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;border-radius:var(--radius-md);
    color:var(--color-text);background:var(--color-surface-2);flex:none;
  }
  .dealer-topbar{gap:var(--sp-3);position:sticky;top:0;z-index:var(--z-sticky)}
  .dealer-topbar__title{font-size:var(--fs-lg);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dealer-sidebar{width:min(84vw,300px);box-shadow:var(--shadow-modal)}
  .dealer-overlay{
    position:fixed;inset:0;background:var(--overlay);z-index:calc(var(--z-modal) - 1);
    opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease);
  }
  .dealer-body.dealer-menu-open .dealer-overlay{display:block;opacity:1;pointer-events:auto}
  body.dealer-menu-open,.dealer-body.dealer-menu-open{overflow:hidden}
  .dealer-content{padding:var(--sp-4)}
}
@media (max-width:640px){
  .dealer-topbar{padding:var(--sp-3) var(--sp-4);gap:var(--sp-2)}
  /* Auf schmalen Screens nur das Plus-Symbol zeigen, damit der Titel Platz hat */
  .dealer-topbar__cta-label{display:none}
  .dealer-content{padding:var(--sp-3)}
  /* Inserats-Zeile: Aktionen in eine eigene Zeile */
  .listing-row{grid-template-columns:72px minmax(0,1fr);gap:var(--sp-3)}
  .listing-row__media{width:72px;height:56px}
  .listing-row__kpis,.listing-row__quality{grid-column:1/-1}
  .listing-row__quality{align-items:flex-start}
  .listing-row__actions{grid-column:1/-1;justify-content:flex-end;flex-wrap:wrap}
  .bulk-bar{padding:var(--sp-3)}
  .bulk-bar__actions{margin-left:0;width:100%}
  .bulk-bar__actions .select{flex:1 1 auto;min-width:0}
  .lead-row__actions{width:100%}
  .lead-row__actions .select{width:100%}
}
@media (max-width:560px){
  .dealer-kpis{grid-template-columns:1fr}
  .package-grid{grid-template-columns:1fr}
  .kanban{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Horizontale Scroll-Bereiche elegant ---------- */
.dealer-subnav,.quick-search__tabs,.gallery__thumbs,.loc-cattabs{
  scrollbar-width:thin;-webkit-overflow-scrolling:touch;
}
@media (max-width:768px){
  .dealer-subnav{flex-wrap:nowrap;overflow-x:auto}
  .cmp__scroll,.srp__results{ -webkit-overflow-scrolling:touch}
}

/* ---------- Tabellen auf schmalen Screens ---------- */
@media (max-width:560px){
  .data-table--kv th{width:48%}
  /* Spalten-Tabellen kompakter, damit sie horizontal scrollen statt zu quetschen */
  .table-wrap .data-table{min-width:520px}
}

/* ====================================================================
   Suchergebnis-Toolbar (SRP) — kein seitliches Überlaufen auf Mobil
   ==================================================================== */
@media (max-width:768px){
  .srp__bar{flex-direction:column;align-items:stretch;gap:var(--sp-3)}
  .srp__count{width:100%;flex:none;order:-1}
  .srp__filter-toggle{width:100%;justify-content:center}
  .srp__tools{width:100%;flex-wrap:wrap;gap:var(--sp-2);justify-content:flex-start}
  .srp__view{flex:none}
  .srp__sort,.srp__save{display:flex;align-items:center;gap:var(--sp-2);flex:1 1 100%;min-width:0}
  .srp__sort .field__label{flex:none}
  .srp__sort .select--inline,.srp__save .select--inline{flex:1 1 auto;min-width:0;width:auto}
  .srp__save .btn{flex:none;white-space:nowrap}
}

/* ====================================================================
   Allgemeine Überlauf-Schutzmaßnahmen (Mobil)
   ==================================================================== */
@media (max-width:768px){
  /* Formulare / Grids brechen sicher um statt zu überlaufen */
  .filter-row,.contact-form__row,.form-grid,
  .leasing-row__fields,.dealer-profile .form-grid{grid-template-columns:1fr}
  /* Breite Eingaben/Selects nie über den Container hinaus */
  .input,.select,.btn{max-width:100%}
  /* Sticky-Sidebars im VIP nicht überlappen */
  .vip__sidebar{min-width:0}
}

/* Flex-Kinder dürfen schrumpfen (verhindert horizontales Überlaufen) */
.srp__tools > *,.header-actions > *,.dealer-toolbar > *{min-width:0}

/* Lange Inhalte in Karten sauber kürzen */
.listing-card__specs,.listing-card__title,.listing-card__variant{min-width:0}

/* Breadcrumb auf Mobil umbrechen statt überlaufen */
@media (max-width:560px){
  .breadcrumb{white-space:normal;overflow-wrap:anywhere}
}

/* ====================================================================
   SRP Filter-Modal (mobil) — App-artiges Vollbild mit Kopf & Fußleiste
   ==================================================================== */
.srp__filters-head{display:none}

@media (max-width:1024px){
  .srp__filters{
    display:flex;flex-direction:column;padding:0;overflow:hidden;
    background:var(--color-surface);
  }
  /* Kopfleiste: Titel + Zurücksetzen + Schließen, oben angedockt */
  .srp__filters-head{
    display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
    padding:var(--sp-4);padding-top:calc(var(--sp-4) + env(safe-area-inset-top));
    border-bottom:1px solid var(--color-border);
    position:sticky;top:0;z-index:2;background:var(--color-surface);
  }
  .srp__filters-title{font-size:var(--fs-lg);font-weight:var(--fw-bold)}
  .srp__filters-actions{display:flex;align-items:center;gap:var(--sp-4)}
  .srp__filters-actions .filter-panel__reset{font-size:var(--fs-sm);white-space:nowrap}
  .srp__filters-close{
    display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:40px;border-radius:var(--radius-md);
    color:var(--color-text);background:var(--color-surface-2);flex:none;
  }
  /* Scrollbarer Inhalt; doppelten Panel-Kopf ausblenden */
  .srp__filters .filter-panel{
    flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:var(--sp-4) var(--sp-4) var(--sp-2);gap:0;
  }
  .srp__filters .filter-panel__head{display:none}
  /* "Anwenden"-Button als vollwertige Fußleiste unten andocken */
  .srp__filters .filter-panel__footer{
    position:sticky;bottom:0;z-index:2;
    margin:var(--sp-2) calc(-1 * var(--sp-4)) 0;
    padding:var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom));
    background:var(--color-surface);
    border-top:1px solid var(--color-border);
    box-shadow:0 -8px 20px rgba(0,0,0,.08);
  }
  .srp__filters .filter-panel__footer .btn{width:100%;margin-top:0}
  /* Größere Touch-Flächen in den Filtergruppen */
  .srp__filters .filter-group summary{padding-top:var(--sp-2);padding-bottom:var(--sp-2)}
}