/* Zeitmechanik Landingpage: Tablet und Smartphone.
   Alle Regeln liegen in max-width-Media-Queries; ab 1241px Breite bleibt
   die Desktop-Darstellung unverändert. Die Seiten nutzen Inline-Styles,
   deshalb überschreiben die Regeln hier mit !important. */

@media (max-width: 1240px) {
  .zm-seite { min-width: 0 !important; }
  .zm-hero { height: auto !important; }
}

@media (max-width: 900px) {
  .zm-wrap { padding: 64px 20px !important; }
  .zm-wrap-x { padding-left: 20px !important; padding-right: 20px !important; }
  .zm-2col { grid-template-columns: 1fr !important; gap: 28px !important; }
  .zm-h1 { font-size: 36px !important; max-width: none !important; }
  .zm-h2 { font-size: 30px !important; max-width: none !important; }
  .zm-shot { height: auto !important; aspect-ratio: 16 / 10; }
  .zm-card { padding: 24px 20px !important; }
  .zm-card-fuss { padding: 16px 20px !important; }
  .zm-big { font-size: 64px !important; }
  .zm-big span { font-size: 32px !important; }

  /* Hero */
  .zm-hero { grid-template-columns: 1fr !important; gap: 44px !important; padding: 132px 20px 60px !important; height: auto !important; }
  .zm-hero > div > p { font-size: 16px !important; }
  .zm-hero-cta { flex-wrap: wrap; }
  .zm-stats { grid-template-columns: 1fr 1fr !important; }
  .zm-stats > div { padding: 18px 20px !important; }
  .zm-stats > div:nth-child(3) { border-left: none !important; }
  .zm-stats > div:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.11); }

  /* Methode */
  .zm-pills-wrap { padding: 0 20px; }
  .zm-pills { flex-wrap: wrap; justify-content: center; border-radius: 22px !important; }
  .zm-methode-grid { grid-template-columns: 1fr !important; gap: 32px !important; padding: 40px 20px 64px !important; }
  .zm-methode-bild { border-right: 1px solid #D5DEEC !important; border-radius: 12px !important; }
  .zm-badge { left: 12px !important; right: 12px !important; bottom: 12px !important; }

  /* Kundenstimme */
  .zm-zitat { font-size: 26px !important; }
  .zm-zitat-autor { border-left: none !important; padding-left: 0 !important; border-top: 1px solid #E4E9F2; padding-top: 20px; }

  /* Ein ganz normaler Dienstag */
  .zm-tag-inner { padding: 24px 20px 32px !important; }
  .zm-tag-kopf { grid-template-columns: 1fr !important; gap: 12px !important; margin-bottom: 22px !important; }
  .zm-tag-kopf h2 { font-size: 24px !important; }
  .zm-tag-kopf p { display: none !important; }
  .zm-rail-wrap { margin-bottom: 22px !important; }
  .zm-rail { gap: 2px !important; }
  .zm-rail > div { padding-right: 0 !important; }
  .zm-rail-zeit { font-size: 9px !important; margin-top: 10px !important; }
  .zm-rail-kurz { display: none !important; }
  .zm-tag-karte { grid-template-columns: 1fr !important; gap: 14px !important; padding: 16px !important; }
  .zm-tag-karte > div:last-child { order: -1; }
  .zm-tag-bild { min-height: 0 !important; height: 160px; }
  .zm-tag-titel { font-size: 20px !important; margin-bottom: 10px !important; }
  .zm-tag-text { font-size: 14.5px !important; margin-bottom: 0 !important; }

  /* Vertrauen */
  .zm-portrait { height: auto !important; aspect-ratio: 600 / 374; }
  .zm-chips { gap: 12px 20px !important; padding: 18px 20px !important; }

  /* Integrationen */
  .zm-diagramm { grid-template-columns: 1fr !important; }
  .zm-diagramm > div { padding-left: 0 !important; padding-right: 0 !important; }
  .zm-diagramm > div:last-child > div:first-child { text-align: left !important; }
  .zm-diagramm-mitte { padding-top: 0 !important; }
  .zm-diagramm-box { width: 100% !important; height: 110px !important; }
  .zm-diagramm-box svg, .zm-diagramm-box > span { display: none !important; }
  .zm-diagramm-box > div { top: 55px !important; }
  .zm-dms { flex-direction: column; align-items: stretch !important; gap: 14px !important; }
  .zm-dms > span { max-width: none !important; }

  /* Häufige Fragen */
  #fragen [role="button"] { gap: 16px !important; }
  #fragen [role="button"] > span:first-child { font-size: 16.5px !important; }
  #fragen p { padding-right: 0 !important; }

  /* Kostenlos testen */
  .zm-cta-spalte { min-width: 0 !important; }

  /* Kopfzeile */
  .zm-banner { padding: 10px 16px !important; white-space: normal !important; flex-wrap: wrap; text-align: center; gap: 6px 10px !important; font-size: 12.5px !important; }
  .zm-kopf { padding: 14px 16px !important; gap: 12px !important; min-height: 79px; }
  .zm-logo { width: 160px !important; height: 33px !important; }
  .zm-logo img.zm-wortmarke { width: 160px !important; height: 33px !important; }
  .zm-kopf-rechts { gap: 12px !important; }
  .zm-kopf-cta { padding: 9px 14px !important; font-size: 13.5px !important; }

  /* Fußzeile */
  .zm-fuss-grid { grid-template-columns: 1fr !important; gap: 28px !important; padding: 48px 20px 32px !important; }
  .zm-fuss-leiste { flex-wrap: wrap; padding: 18px 20px !important; gap: 10px 18px !important; }
  .zm-fuss-leiste > span { width: 100%; }
  .zm-fuss-leiste a { margin-left: 0 !important; }

  /* Rechtliches */
  .zm-seitenleiste { position: static !important; max-height: none !important; }

  /* Login */
  .zm-login { padding: 32px 16px !important; }
  .zm-login-karte { padding: 28px 22px 26px !important; }
}

@media (max-width: 520px) {
  .zm-banner-mehr { display: none; }
  .zm-logo { width: 36px !important; height: 36px !important; }
  .zm-wortmarke { display: none !important; }
  .zm-logo-icon { display: block !important; }
  .zm-h1 { font-size: 32px !important; }
  .zm-h2 { font-size: 27px !important; }
  .zm-stats > div > div:first-child { font-size: 22px !important; }
  .zm-login-logo { width: 200px !important; height: 41px !important; }
}