/* =============================================================
   FIXES TO THE PILOT'S OWN STYLESHEET
   css/site.css stays byte for byte as Martin delivered it; the two
   places where his pilot scrolled sideways are corrected here instead
   (Rolf, 24.09.2026, spec K23). Part of the site, not of the Pronta
   tool layer, so it is loaded right after site.css and stays when
   tool.css and tool.js are removed. Each rule acts only below the
   width at which the pilot overflows (measured); above it the page is
   pixel-identical to the pilot.
   ============================================================= */

/* Über mich: below 760px the portrait figure has aspect-ratio 1/.94
   and a min-height of 430px. A grid item with a ratio is not stretched
   but sized from its height, so it came out 430 / .94 = 457.44px wide:
   narrower phones got a page wider than the screen. Capped at its
   column it stays 430px tall (min-height wins over the ratio), and
   object-fit: cover keeps the picture filling it. */
@media (max-width: 457.44px) {
  .profile-hero figure {
    max-width: 100%;
  }
}

/* Datenschutz: the heading "Datenschutzerklärung" is one word 338.6px
   wide at 43px; below a 352.59px viewport it ran past the screen. It
   may break there, with a hyphen where the browser knows German
   hyphenation. */
@media (max-width: 352.59px) {
  .legal-page h1 {
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
  }
}

/* Ortsbild on the start page: a fixed 3:2 on wider screens (Martin #114,
   decision 178). The pilot sized it by min-height 690px and the card, so
   its crop changed with every window. Where the title card needs more
   height than 3:2 gives, the band grows with it (aspect-ratio is a
   minimum for content). The card moves from the middle to the top of the
   picture, so title and buttons stay on the first screen (1440 x 900:
   the picture is 960px tall). Below 761px it stays the backdrop of the
   card, as in the pilot. */
@media (min-width: 761px) {
  .landscape-hero {
    min-height: 0;
    aspect-ratio: 3 / 2;
  }
  .landscape-hero__inner {
    align-items: start;
  }
}