/* ═══════════════════════════════════════════════════════════════════
 * Hiddin Website — Mobile Responsiveness & iOS-Safari Zoom Fix
 * A-Team-Pattern [WEB-CRIT-002 v3o9wi + WEB-CRIT-003 wginq8] 2026-04-21
 *
 * Inkludiert in: formular-*.html, scout-*.html, privacy-policy.html,
 *                terms-of-service.html, impressum.html, data-deletion.html
 *
 * Zweck:
 *  1. iOS-Safari zoomt automatisch auf Inputs mit font-size < 16px →
 *     Fix via 16px Minimum auf allen form-controls.
 *  2. Formular/Legal-Seiten waren nicht responsive <768px → Content
 *     ragt über Viewport, Touch-Targets kaputt. Grundregeln hier zentral.
 * ═══════════════════════════════════════════════════════════════════ */

/* iOS-Safari Zoom-Bug Fix — Inputs IMMER mind. 16px */
input, textarea, select, button {
  font-size: max(16px, 1rem);
}

/* viewport-meta ergänzt sich — wenn nicht gesetzt, Browser-Default */

/* Base Mobile Reset */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Container shouldn't exceed viewport */
  .container, .wrapper, main, section, article, form, .content {
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }

  /* Typography-Rhythm scale down */
  h1 { font-size: clamp(28px, 6vw, 40px); line-height: 1.15; }
  h2 { font-size: clamp(22px, 5vw, 30px); line-height: 1.2; }
  h3 { font-size: clamp(18px, 4vw, 22px); line-height: 1.3; }
  p, li { font-size: 16px; line-height: 1.55; }

  /* Grid → Column Stack */
  .grid, .two-col, .cols-2, .cols-3, [class*="grid-cols"] {
    grid-template-columns: 1fr !important;
  }

  /* Form fields full width */
  input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
  input[type="number"], input[type="password"], input[type="search"],
  input[type="date"], input[type="time"], textarea, select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    min-height: 44px; /* WCAG Touch-Target */
  }

  /* Buttons min 44x44 for touch (WCAG 2.5.5) */
  button, [role="button"], input[type="submit"], input[type="button"], .btn {
    min-height: 44px;
    padding: 12px 20px;
    width: 100%;
    max-width: 100%;
  }

  /* Tables → horizontal scroll (don't break layout) */
  table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
  }

  /* Images should not overflow */
  img, svg, video, iframe {
    max-width: 100%;
    height: auto;
  }
}

/* Extra small <380px */
@media (max-width: 380px) {
  .container, .wrapper, main, section, article, form, .content {
    padding-left: 12px;
    padding-right: 12px;
  }
  h1 { font-size: 26px; }
  h2 { font-size: 20px; }
  p, li { font-size: 15px; }
}