// ────────────────────────────────────────────────────────────────
// Layout · Bühne
//
// Die Flaeche der Startseite: links · Mitte · rechts. Aus
// johannesbrunner.de uebernommen, damit dieselbe Buehne auch die Anmeldung
// traegt — sonst sehen die zwei Seiten derselben Domain aus wie zwei Projekte.
//
// Die Flaeche selbst (Radial-Glows, feines Raster) liegt schon auf `body`
// (`foundation/base`). Hier steht nur das Gitter. Die Randspalten bleiben fuer
// Panels frei und halten die Mitte schmal, damit Marke und Inhalt nicht ueber
// die ganze Bildschirmbreite laufen.
//
// AUFBAU
//   <main class="stage">
//     <aside class="stage__side">… <div class="panel"> …</aside>
//     <div class="stage__core">Marke, Inhalt</div>
//     <aside class="stage__side">…</aside>
//   </main>
//
// Die Randspalten dürfen breiter werden (bis 340px): sie tragen Panels und
// Notizen, deren Text sonst zu schmal bricht. Damit die Mitte dabei nicht
// zerquetscht wird, stapelt die Bühne früher — dreispaltig erst ab 1100px.
// ────────────────────────────────────────────────────────────────

.stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(200px, 340px) minmax(0, 1fr) minmax(200px, 340px);
  gap: clamp(16px, 2.5vw, 44px);
  align-items: stretch;
  min-height: 100vh;
  padding: clamp(18px, 3vh, 36px) clamp(18px, 2.5vw, 44px);
}

// Die Mitte: Marke und Inhalt, senkrecht zentriert. `gap` haelt Marke und
// Inhalt auseinander, ohne dass jemand Hunderte von Margin-Werten setzt.
.stage__core {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 5vh, 56px);
  min-height: 0;
  min-width: 0;
  text-align: center;
}

// Eine Randspalte. Ohne Inhalt bleibt sie leer — das ist gewollt und hält die
// Mitte schmal.
.stage__side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

@media (max-width: 1100px) {
  .stage {
    grid-template-columns: 1fr;
    gap: clamp(20px, 4vh, 40px);
    padding: clamp(20px, 4vh, 40px) clamp(18px, 5vw, 40px);
  }

  // Die Mitte zuerst, Randspalten darunter — das Wichtigste steht oben.
  .stage__core {
    grid-column: auto;
    order: 1;
  }

  .stage__side {
    grid-column: auto;
    order: 2;
  }
}