/*
 * Mobile Umbruchkorrektur fuer die KI-Bildhinweise.
 * Jeder Hinweis waechst mit seinem Text im normalen Seitenfluss. Der folgende
 * Textkasten beginnt erst nach der vollstaendigen Hinweiszeile.
 */
@media (max-width: 720px) {
  .hero-visual {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .hero-visual::before {
    min-height: 0;
    height: auto;
    padding-top: 13px;
    padding-bottom: 13px;
    line-height: 1.55;
    white-space: normal;
    overflow: visible;
  }

  /* Kein negativer Abstand: Der Kanzlei-Textkasten darf den Hinweis nicht
     mehr ueberlagern, auch wenn dieser auf mehrere Zeilen umbricht. */
  .hero > .hero-copy {
    margin-top: 16px;
  }

  .topic-grid .topic-card,
  .topic-grid .topic-card:nth-child(2) {
    grid-template-rows: 220px minmax(min-content, auto);
  }

  .topic-grid .ai-image-notice--topic {
    display: block;
    align-self: stretch;
    min-height: 0;
    height: auto;
    padding-top: 13px;
    padding-bottom: 13px;
    line-height: 1.55;
    white-space: normal;
    overflow: visible;
  }
}