/* === App-Rahmen === */
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg);
  transition: background-color var(--transition-std);
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4); /* Abstand zwischen .page-section-Boxen */
}
@media (min-width: 1024px){
  .main{
    padding-top: var(--nav-height);
  }
}

/* Onepager-Sections: Vollbreite-Karte */
.page-section {
  width: 100%;
  padding: var(--space-4);
  position: relative;
}
/* Onepager-Sections: Divider zwischen den Sections */
.page-section + .page-section::before {
  content: "";
  position: absolute;
  top: calc(-0.5 * var(--space-4));
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--max-width-std), calc(100% - 2*var(--space-4)));
  height: 1px;
  background: var(--color-text);
  opacity: 0.1;
}

/* Innerer Container: einheitliche Breite für Inhalt */
.page-section__inner {
  margin: 0 auto;
  max-width: var(--max-width-std);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Standalone-Seiten (Impressum, Privacy, Download, 404) */
.page {
  margin: 0 auto;
  width: 100%;
  padding: var(--space-8) var(--space-4);
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-4);
  max-width: var(--max-width-std);
}