/* mobile-fixes.css — Mobile UX corrections (Mai 2026)
 * - Prevent horizontal overflow from off-canvas drawer menu
 * - Min 16px body font-size on homepage (prevents iOS auto-zoom)
 * - Reduce column-count on A-Z hub lists at mobile breakpoint
 * - Tap-target padding for inline auto-glossary links in dense areas
 */

/* === Fix #1: Prevent horizontal scroll from off-canvas drawer menu === */
html, body {
  overflow-x: hidden;
}

/* === Fix #2: Homepage body font-size — match other pages === */
body.home {
  font-size: 16px;
}

/* === Fix #3: Multi-column A-Z lists at mobile breakpoint === */
/* The hub completeness sections, related-software, related-dienstleister,
 * sibling-subbranchen, and glossar A-Z lists all use columns:2 or columns:3
 * which becomes unreadable on mobile. Override at mobile breakpoint. */
@media (max-width: 600px) {
  .aa-hub-az,
  .aa-glossar-az,
  .aa-related-topics ul,
  .aa-related-software ul,
  .aa-related-dienstleister ul,
  .aa-vergleich-triangle ul,
  .aa-subbranche-list ul,
  .aa-sibling-subbranchen ul {
    columns: 1 !important;
  }
  /* Increase line-height + padding for better tap targets in lists */
  .aa-hub-az li,
  .aa-glossar-az li {
    padding: 6px 0 !important;
  }
  .aa-related-topics ul li a,
  .aa-related-software ul li a,
  .aa-related-dienstleister ul li a,
  .aa-vergleich-triangle ul li a,
  .aa-subbranche-list ul li a,
  .aa-sibling-subbranchen ul li a {
    display: inline-block;
    padding: 4px 0;
    min-height: 24px;
  }
}

/* === Fix #4: Tap-target padding for inline auto-glossary links === */
/* Auto-injected glossary links inside paragraphs are inline by nature,
 * but adding small vertical padding gives them more tap area without
 * breaking text flow. */
.aa-link-glossary {
  padding: 2px 0;
}

/* === Fix #5: Marquee on mobile — ensure proper containment === */
@media (max-width: 600px) {
  .aa-logo-marquee {
    overflow-x: hidden;
  }
}

/* === Fix #6: Scaled headlines on small screens === */
/* Some H1s render at 32px+ which can be too large on a 320px viewport */
@media (max-width: 480px) {
  main h1 {
    font-size: clamp(24px, 6vw, 32px);
    line-height: 1.2;
  }
  main h2 {
    font-size: clamp(20px, 5vw, 28px);
    line-height: 1.25;
  }
}