/* ═══════════════════════════════════════════════════════
   SOHTest.de – Mobile CSS (max-width: 768px)
   Alles auf eine Spalte, Text vor Bild
   ═══════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Nav ── */
  #main-nav {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .nav-br { display: block !important; }

  #nav-links-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    padding: 8px 0.5rem !important;
    box-sizing: border-box !important;
  }

  #nav-links-wrap a {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 3px !important;
  }

  /* ── Globales ── */
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }

  .page-wrap {
    padding: 0 1rem;
    box-sizing: border-box;
  }

  .section    { padding: 48px 0; }
  .section-sm { padding: 32px 0; }

  /* ── Header / Nav ── */
  header {
    padding: 10px 1rem !important;
  }

  header a > img {
    height: 36px !important;
  }

  header a > div > div:first-child {
    font-size: 1.6rem !important;
  }

  header a > div > div:last-child {
    font-size: 0.9rem !important;
    white-space: normal !important;
  }



  nav a {
    font-size: 13px !important;
    padding: 7px 12px !important;
  }

  /* ── Hero: Text zuerst, dann Bild ── */
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding-right: 0 !important;
  }

  .hero-grid > div:last-child {
    order: 2;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .hero-grid > div:first-child {
    order: 1;
    padding: 32px 1rem 24px !important;
  }

  .hero-grid img {
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
    height: 260px !important;
    object-fit: cover;
    display: block;
  }

  /* Floating card im Hero */
  .hero-grid > div:last-child > div[style*="position:absolute"] {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 0 1rem;
    border-radius: 12px;
  }

  /* ── Alle Grids -> 1 Spalte ── */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* ── Zwei-Spalten Layouts (inline style) ── */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 480px"],
  [style*="grid-template-columns:1fr 420px"],
  [style*="grid-template-columns: 1fr 480px"],
  [style*="grid-template-columns: 1fr 420px"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* ── Stat-Row (3 Spalten -> 3 Spalten bleibt, aber kleiner) ── */
  .stat-row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }

  .stat-cell .val {
    font-size: 0.85rem !important;
  }

  /* ── Footer ── */
  .footer-inner {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .footer-bottom {
    flex-direction: column !important;
    gap: 0.5rem !important;
    text-align: center !important;
  }

  /* ── Typografie ── */
  h1 {
    font-size: 2.2rem !important;
    line-height: 1.15 !important;
  }

  h2 {
    font-size: 1.6rem !important;
  }

  /* ── Buttons nebeneinander -> untereinander ── */
  .hero-actions {
    flex-direction: column !important;
    gap: 0.8rem !important;
  }

  .hero-actions a {
    text-align: center !important;
    width: 100% !important;
  }

  /* ── Trust-Bar ── */
  section [style*="display:flex"][style*="justify-content:center"],
  .trust-bar [style*="display:flex"][style*="justify-content:center"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    padding: 1rem !important;
  }

  /* ── Tabellen ── */
  .table-wrap {
    overflow-x: auto !important;
  }

  table {
    font-size: 13px !important;
  }

  /* ── Karten ── */
  .card {
    padding: 1.2rem !important;
  }

  /* ── Steps ── */
  .steps {
    grid-template-columns: 1fr !important;
    gap: 1px !important;
  }

  /* ── SOH-Meter ── */
  .soh-big {
    font-size: 3.5rem !important;
  }

  /* ── FIN Input ── */
  #fin-input {
    font-size: 14px !important;
    letter-spacing: 0.06em !important;
  }

  /* ── Kontakt-Grid ── */
  .grid-2 {
    grid-template-columns: 1fr !important;
  }
}