/**
 * @file layout.css
 * Seitengerüst, Container und Regionen-Layout. Mobile-first:
 * eine Spalte als Default, Sidebar erst ab Breakpoint daneben.
 */

/* Zentrierter, begrenzter Inhaltscontainer. */
.container {
  width: 100%;
  max-width: var(--layout-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.container--narrow {
  max-width: var(--layout-width-narrow);
}

/* Vertikaler Aufbau der Seite. */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page__main {
  flex: 1 0 auto;
  padding-block: var(--space-lg);
}

/* Hervorgehobener Bereich / Hilfe. */
.region-highlighted,
.region-help {
  padding-block: var(--space-sm);
}

/* Hero-Region: volle Breite, eigener Innen-Container nach Bedarf. */
.hero {
  width: 100%;
}

/* ========================================================================
   Inhalt + Sidebar: mobile-first eine Spalte, ab lg nebeneinander.
   ======================================================================== */

.page__content-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

@media (min-width: 1024px) {
  .page__content-layout.has-sidebar {
    flex-direction: row;
    align-items: flex-start;
  }

  .page__content-layout.has-sidebar .layout-content {
    flex: 1 1 auto;
    min-width: 0;
  }

  .page__content-layout.has-sidebar .layout-sidebar {
    flex: 0 0 320px;
  }
}