/**
 * Beauftragte Korrekturen für die schmale Website-Ausgabe.
 *
 * Der übernommene Stil bleibt unangetastet. Diese Regeln greifen nur dort,
 * wo seine Desktopmaße auf einem Telefon Text und Planerinhalt verdecken.
 */
@media (max-width: 767px) {
  /* 3rem je Seite ließen in einer 336-px-Spalte nur 240 px für den Text. */
  .content .row.no-gutters.g-0 .frame-type-text {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .content h1,
  .content h2,
  .content h3,
  .content .accordion-button,
  .content .planer-gruppentitel,
  .content .planer-position {
    hyphens: auto;
    overflow-wrap: break-word;
  }

  /* Ein 200-px-Bild ließ dem Antworttext rechts daneben nur rund 94 px. */
  .content .ce-accordion-body .ce-textpic.ce-intext .ce-gallery {
    float: none;
    width: 100%;
    margin: 0 0 1rem;
  }

  .content .ce-accordion-body .ce-textpic.ce-intext .ce-gallery figure {
    display: table;
    margin-right: auto;
    margin-left: auto;
  }

  .content .ce-accordion-body .ce-textpic.ce-intext .ce-bodytext {
    clear: both;
  }

  .content table {
    width: 100%;
    table-layout: fixed;
  }

  .content td,
  .content th {
    overflow-wrap: break-word;
  }

  /* Hohe Inventarlisten beginnen am oberen Fensterrand und bleiben scrollbar. */
  .invmodal .modal-dialog.modal-dialog-centered {
    align-items: flex-start;
  }

  .invmodal .modal-content {
    max-height: calc(100vh - 1rem);
  }

  .invmodal .modal-header,
  .invmodal .modal-footer {
    flex: 0 0 auto;
  }

  .invmodal .modal-body {
    min-height: 0;
  }

  /* Bootstrap-Zeilengutter ragten im schmalen Dialog in die Scrollkante. */
  .invmodal .modal-body .container-fluid > .row {
    margin-right: 0;
    margin-left: 0;
  }

  .invmodal .inventarname {
    display: block;
    max-width: 100%;
    white-space: normal;
  }
}