/* Keep the original desktop design; stack the layout on phones. */
@media (max-width: 700px) {
  body { margin: 16px 10px; font-size: 16px; line-height: 1.5; }
  body > br { display: none; }
  table#layout { display: block; width: 100%; max-width: 100%; margin: 0; }
  #layout > tbody, #layout > tbody > tr, #layout > tbody > tr > td { display: block; box-sizing: border-box; width: 100%; }
  tr#header { position: sticky; top: 0; z-index: 20; box-shadow: 0 2px 5px #0002; }
  html { scroll-padding-top: 64px; }
  tr#header td#headerHtml {
    height: auto;
    min-height: 52px;
    max-width: 100%;
    padding: 4px 8px;
    background: linear-gradient(#e5e5e5, #b6b6b6);
    border-radius: 0;
  }
  tr#header a.logo-home {
    position: absolute;
    display: block;
    top: 4px;
    bottom: auto;
    left: 8px;
    width: 44px;
    height: 44px;
    margin: 0;
    background: url('/images/logo-transparent-184.webp') no-repeat center;
    background-size: auto 42px;
  }
  .site-menu { margin-left: 52px; }
  .site-menu > summary { display: flex; justify-content: flex-end; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px; cursor: pointer; font-size: 15px; list-style: none; }
  .site-menu > summary::-webkit-details-marker { display: none; }
  .site-menu > summary:focus-visible { outline: 2px solid #a61921; }
  nav[aria-label="Hauptnavigation"] { flex-direction: column; align-items: stretch; gap: 0; margin-top: 4px; border-top: 1px solid #888; }
  tr#header nav a { margin: 0; padding: 0 12px; min-height: 44px; font-size: 15px; }
  .site-menu[open] { max-height: calc(100dvh - 20px); overflow-y: auto; }
  #layout > tbody > tr > td#abschluss { display: none; }
  .submenu { text-align: center; margin-top: 8px; line-height: 2; }
  tr#header .submenu a { display: inline-block; padding: 4px 6px; }
  tr#content > td { padding: 18px 14px; }
  tr#content:has(.blog-list) > td { padding-top: 10px; }
  main { min-width: 0; overflow-wrap: anywhere; }
  main h1 { font-size: 1.25rem; }
  main h2 { font-size: 1.125rem; }
  main img, .blog-entry img[align="left"], .blog-post img[align="left"] {
    display: block;
    float: none !important;
    max-width: 100% !important;
    height: auto;
    margin: 12px 0 !important;
  }
  main iframe { max-width: 100%; height: auto; aspect-ratio: 16 / 9; }
  main table { display: block; max-width: 100%; overflow-x: auto; }
  main ul, main ol { padding-left: 24px; }
  .blog-entry { margin-bottom: 24px; padding-bottom: 18px; }
  .blog-entry .blog-full { display: none; }
  .blog-mobile-preview { display: block; }
  .blog-mobile-preview img { max-height: 320px; width: auto; object-fit: contain; }
  .read-more { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid #888; border-radius: 4px; background: #f7f7f7; text-decoration: none; }
  .read-more:hover, .read-more:focus-visible { background: #fff; text-decoration: underline; }
  .photo-gallery { gap: 10px; }
  .photo-gallery a { max-width: 100%; }
  tr#footer td#footer { height: auto; padding: 10px 12px; line-height: 1.8; background: #b6b6b6; border-radius: 0 0 6px 6px; }
}