/* Mobile Vorschau V1, 22.09.2026. Nach den bestehenden Stylesheets laden.
   Nur Hauptseiten mit data-visual; Beitragstemplate und Desktop bleiben unberuehrt. */
@media (max-width: 700px) {
  html[data-visual] {
    --sec-y: 48px;
  }

  html[data-visual][data-look][data-page] body {
    font-size: 1rem;
  }

  html[data-visual][data-look][data-page] .hero-inner {
    min-height: 0;
    padding-block: 40px 56px;
  }

  html[data-visual][data-look][data-page] .hero h1 {
    font-size: 2rem;
    line-height: 1.12;
    max-width: 100%;
  }

  html[data-visual][data-look][data-page] .hero-text {
    font-size: 1rem;
    line-height: 1.6;
    margin-top: 18px;
  }

  html[data-visual][data-look][data-page] .hero-aktionen {
    margin-top: 24px;
    gap: 10px;
  }

  html[data-visual][data-look][data-page] .btn {
    min-height: 48px;
    padding: 10px 18px;
    line-height: 1.4;
  }

  html[data-visual][data-look][data-page] .sec-kopf {
    margin-bottom: 24px;
  }

  [data-look=feinschliff] #bewertungen {
    padding-block: 48px;
  }

  html[data-visual][data-look][data-page] main > .sec:not(#online-wertanalyse, #angebote) {
    padding-block: 48px;
  }

  html[data-visual][data-look][data-page] .sec-kopf .lead {
    font-size: 1rem;
    line-height: 1.6;
    margin-top: 18px;
  }

  html[data-visual][data-look][data-page] .hero-kacheln {
    margin-top: 24px;
    gap: 10px;
  }

  html[data-visual][data-look][data-page] .hero-kachel {
    min-height: 48px;
    padding: 12px 16px;
  }

  html[data-visual][data-look][data-page] .hero-kachel-titel {
    font-size: 1rem;
    margin-top: 4px;
  }

  /* Freiraum fuer die vorhandene Bildkennzeichnung unter den Aktionen. */
  html[data-visual][data-look][data-page=selling] .hero-inner {
    padding-bottom: 64px;
  }

  /* Hauptaktion und zwei gleichwertige Zusatzwege, ohne Textkuerzung. */
  html[data-visual][data-look][data-page=home] .hero-aktionen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 8px 12px;
  }

  html[data-visual][data-look][data-page=home] .hero-aktionen > .btn:first-child {
    grid-column: 1 / -1;
  }

  html[data-visual][data-look][data-page=home] .hero-aktionen > .btn {
    min-width: 0;
    width: 100%;
  }

  html[data-visual][data-look][data-page=home] .hero-aktionen > .btn--linie-hell {
    min-height: 48px;
    padding: 4px 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    font-size: .875rem;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: #ffffff8c;
  }

  html[data-visual][data-look][data-page=home] .hero-aktionen > .btn--linie-hell:hover {
    background: #ffffff12;
    text-decoration-color: #fff;
  }
}