@charset "UTF-8";

/*
  Global mobile overrides loaded LAST.
  Goal: prevent horizontal overflow and make core layout utilities stack on small screens.
*/

/* === Icon styling (SVG sprite + inline) === */
svg.icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

/* Dark mode: ensure icons are visible */
[data-theme="dark"] svg.icon {
  color: var(--text-primary, #e0e0e0);
}

/* Light mode */
[data-theme="light"] svg.icon,
html:not([data-theme]) svg.icon {
  color: var(--text-primary, #333);
}

/* Better sizing behavior across the app */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent common mobile horizontal scrolling */
html,
body {
  max-width: 100%;
}

body {
  overflow-x: hidden;
}

img,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

/* === Core layout utilities: stack on mobile === */
@media (max-width: 768px) {
  /* Many pages use CSS grid for these containers; enforce single-column layout */
  .lp-main-wrapper {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Common 2-column patterns (sidebar + content) */
  .lp-quarter,
  .lp-threequarter {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0;
  }

  /* Generic grid rows used across pages */
  .lp-row,
  .lp-row-padding {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .lp-row > .lp-quarter,
  .lp-row > .lp-threequarter,
  .lp-row > .lp-third,
  .lp-row > .lp-half,
  .lp-row > .lp-full,
  .lp-row-padding > .lp-quarter,
  .lp-row-padding > .lp-threequarter,
  .lp-row-padding > .lp-third,
  .lp-row-padding > .lp-half,
  .lp-row-padding > .lp-full {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0;
  }

  /* Forms: avoid tiny quarter-width inputs */
  input.lp-input,
  select.lp-input,
  textarea.lp-input,
  .lp-input.lp-quarter,
  .lp-input.lp-half,
  .lp-input.lp-third,
  .lp-input.lp-threequarter {
    width: 100% !important;
  }

  /* Header search: turn 6-column grid into vertical stack */
  .lp-grid-header-search-container {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 0 10px !important;
  }

  .lp-grid-header-search-btn .lp-button {
    margin-top: 0 !important;
  }
}

/* === Mobile Header Navigation === */
@media (max-width: 640px) {
  /* Logo kleiner */
  .header-logo a img {
    height: 32px !important;
  }

  /* Header-Buttons: nur Icons, Text ausblenden */
  .header-buttons .btn-label,
  .header-nav-btn .nav-label {
    display: none !important;
  }

  .header-buttons a,
  .header-buttons button,
  .header-nav-btn {
    min-width: 40px !important;
    padding: 6px 8px !important;
    gap: 0 !important;
  }

  .header-actions {
    gap: 4px !important;
  }

  .header-wrapper {
    gap: 6px !important;
  }

  /* Badge kleiner, aber sichtbar */
  .badge {
    font-size: 10px !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 2px 4px !important;
  }
}

/* === Kleinanzeigen auf Mobile: 1 Spalte === */
@media (max-width: 600px) {
  .classifieds-grid,
  .classifieds-grid[data-cols="2"],
  .classifieds-grid[data-cols="3"],
  .classifieds-grid[data-cols="4"],
  .classifieds-grid[data-cols="5"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .classified-box {
    min-height: 180px !important;
  }
}

@media (max-width: 480px) {
  .lp-main-wrapper,
  .container,
  header,
  footer {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}