/* Desktop: zwei Spalten statt einer schmalen Mobile-Spalte.
   Links bleibt, was man ständig braucht (Kontostand, Rad, Jahresgespräch), rechts scrollt der Rest.
   Unterhalb von 1024px ändert sich nichts: die Spalten-Wrapper lösen sich dort auf. */

.col { display: contents; }

@media (min-width: 1024px) {
  .app {
    display: grid; grid-template-columns: repeat(2, minmax(0, 540px)); column-gap: 64px;
    justify-content: center; align-items: start; max-width: 1200px;
  }
  /* Briefkopf, Titel und dicke Linie über beiden Spalten */
  .app > .letterhead, .app > h1, .app > .sub, .app > .rule-thick { grid-column: 1 / -1; }
  .col { display: block; min-width: 0; }

  /* Linke Spalte bleibt beim Scrollen stehen; das Rad wächst mit der Fensterhöhe, damit sie ohne Scrollen passt */
  .col-left { position: sticky; top: 20px; }
  .col-left .stage { max-width: min(400px, 42vh); }

  /* Rechts beginnt der erste Abschnitt auf Höhe des Kontostands, ohne doppelte Linie unter der dicken */
  .col-right .sec:first-child { border-top: 0; padding-top: 16px; }
}

/* Niedrige Fenster: die Spalte würde unten abgeschnitten, also scrollt dann alles mit */
@media (min-width: 1024px) and (max-height: 720px) {
  .col-left { position: static; }
  .col-left .stage { max-width: 300px; }
}