/*
 * Lumen Layout - Shell (App-Grundgerüst)
 * Zweispaltiges Grid: Sidebar-Rail + Hauptbereich. Rail ein-/ausklappbar.
 */
.app {
  display: grid;
  grid-template-columns: var(--rail-open) 1fr;
  min-height: 100vh; /* Fallback für Browser ohne svh */
  /* svh = kleiner Viewport (iOS: Safari-Toolbar sichtbar), damit der Footer
     nicht hinter der eingeblendeten Toolbar unter die Falz rutscht */
  min-height: 100svh;
}

/* Eingeklappte Rail (nur Desktop, Umschalten über js/shell/railcollapse.js):
   schmale Icon-Spalte (--rail) statt der vollen Breite (--rail-open). Die
   Regel steht bewusst in einer min-width-Media-Query, damit sie die mobile
   1fr-Spalte (max-width: 64em, s. u.) nicht per Spezifität übersteuert. */
@media (min-width: 64.0625em) {
  .app {
    transition: grid-template-columns 0.22s ease;
  }

  .app.rail-collapsed {
    grid-template-columns: var(--rail) 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app {
    transition: none;
  }
}

.main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.content {
  width: 100%;
  max-width: 100rem;
  padding: 24px 28px 44px;
}

#main-content {
  display: block;
  flex: 1 0 auto;
  width: 100%;
  /* max-width in rem: nutzt auf großen Bildschirmen mehr Breite (Datenportal:
     Tabellen, mehrspaltige Panels, Detailseiten profitieren), während Text-/
     Formular-Komponenten ihre eigene, schmalere Maximalbreite behalten (z. B.
     .validate_form). In rem, damit der Bereich auch der Schriftgröße folgt. */
  max-width: 100rem;
  padding: 22px 28px 40px;
}

@media (max-width: 64em) {
  /* Bis 64em (1024px) ist die Rail ein fixiertes Off-Canvas-Menü (außerhalb des
     Grids); der Hauptbereich nimmt die volle Breite ein. So bekommen im mittleren
     Breitenbereich (Tablet/kleiner Laptop) Inhalte wie breite Tabellen den Platz,
     den sonst die dauerhaft angedockte Rail (252px) wegnehmen würde. Die Navigation
     ist dort per Hamburger erreichbar. */
  .app {
    grid-template-columns: 1fr;
  }

  .content,
  #main-content {
    padding: 18px 16px 32px;
  }
}