/* Mobile fixes (2026-10-11): solid header, no content wider than the screen, wrapping controls. */
@media (max-width: 900px) {
  /* The gradient header let scrolled text run through logo and buttons on phones. */
  .film-header {
    background: rgba(11, 15, 23, 0.94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
}
@media (max-width: 620px) {
  html, body { overflow-x: hidden; }
  h1, h2, h3 { overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
  /* Wide tables scroll inside their card instead of being cut off. */
  .rules__table, .calc__table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .rules__table td, .rules__table th { white-space: nowrap; }
  .status { white-space: normal; }
  .calc__num, .calc__unit { font-size: clamp(1.25rem, 7vw, 2rem) !important; overflow-wrap: anywhere; }
  .calc__result, .calc__out { flex-wrap: wrap; min-width: 0; }
  .rot-controls { flex-wrap: wrap; row-gap: 0.5rem; }
}
@media (max-width: 380px) {
  /* "Selbstständig" was wider than its grid cell and ran under the pause button. */
  .rot-tab { min-width: 0; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; font-size: 0.8125rem; }
}