/* ============================================================
   Datei:        assets/css/shared/layout.css
   Seite:        alle Seiten
   Zweck:        Seitenrahmen, zentrierte Hülle, Bereiche und Raster-Grundlagen
   Abhängig von: assets/css/shared/variablen.css
   Genutzt von:  alle HTML-Seiten
   ============================================================ */

/* --- 1. Seitenrahmen --- */
.seite {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.seite > main {
  flex: 1 0 auto;
}

main:focus {
  outline: none;
}

/* --- 2. Zentrierte Hülle (max. 1200 px) --- */
.huelle {
  width: 100%;
  max-width: var(--inhalt-breite);
  margin-inline: auto;
  padding-inline: var(--abstand-3);
}

/* --- 3. Bereiche --- */
.bereich {
  padding-block: clamp(3rem, 6vw, 5.5rem);
}

.bereich + .bereich {
  border-top: 1px solid color-mix(in srgb, var(--farbe-rahmen) 55%, transparent);
}

.bereich__label {
  margin-bottom: var(--abstand-2);
  color: var(--akzent-1);
  font-family: var(--schrift-mono);
  font-size: var(--schrift-klein);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bereich__kopf {
  display: grid;
  gap: var(--abstand-2);
  margin-bottom: var(--abstand-4);
}

.bereich__titel {
  font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem);
  letter-spacing: -0.01em;
}

.bereich__einleitung {
  color: var(--farbe-text-gedaempft);
}

/* --- 4. Größere Bildschirme --- */
@media (min-width: 1024px) {
  .huelle {
    padding-inline: var(--abstand-4);
  }
}