/* =========================================================
   Layout
   ---------------------------------------------------------
   Reine Struktur: Seitengerüst, Container, Raster, Platzierung.
   Keine Gestaltung (Farben/Typo) – die liegt in theme.css.
   ========================================================= */

/* Seitengerüst: Header oben, Footer immer unten ----------- */
.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-main {
  flex: 1;
  width: 100%;
}

/* Container (zentriert Inhalt, begrenzt Breite) ----------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Header / Navigationsleiste (Logo links, Nav rechts) ----- */
.site-header {
  padding-block: var(--space-md);
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-md);
  flex-wrap: wrap;
  padding-block: 0.4rem;
}

.brand-logo {
  height: clamp(3.5rem, 6.5vw, 5.25rem);
  width: auto;
}

.main-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-xs) var(--space-md);
}

@media (max-width: 40rem) {
  .navbar {
    justify-content: center;
  }
  .main-nav ul {
    justify-content: center;
  }
}

/* Hero: zwei Spalten (Text | Bild) ----------------------- */
.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: center;
  padding-block: var(--space-lg) var(--space-xl);
}

/* Feature: zwei Spalten (Bild | Text), alternierend ------ */
.feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: center;
  padding-block: var(--space-md) var(--space-xl);
}

@media (min-width: 56rem) {
  .hero {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-xl);
  }
  .feature {
    grid-template-columns: 0.95fr 1.05fr;
    gap: var(--space-xl);
  }
}

/* Media-Kacheln (Seitenverhältnis reservieren) ----------- */
.media-tile {
  margin: 0;
  width: 100%;
  overflow: hidden;
}

.media-tile--portrait {
  aspect-ratio: 4 / 5;
}

.media-tile--landscape {
  aspect-ratio: 4 / 3;
}

.media-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Newsletter-Formular ------------------------------------ */
.newsletter {
  margin-top: var(--space-md);
}

.newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.newsletter-input {
  flex: 1 1 14rem;
}

/* Buttons (Grundmaße) ------------------------------------ */
.btn {
  display: inline-block;
  padding: 0.85rem 1.75rem;
  margin-top: var(--space-md);
}

/* Footer / Navigation (Copyright links, Links rechts) ----- */
.site-footer {
  margin-top: auto;
  padding-block: var(--space-md);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
}

.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
}

@media (max-width: 40rem) {
  .footer-inner {
    justify-content: center;
    text-align: center;
  }
  .footer-nav ul {
    justify-content: center;
  }
}

/* Rechtliche Seiten -------------------------------------- */
.legal {
  max-width: 46rem;
  padding-block: var(--space-lg) var(--space-xl);
}

.legal h2 {
  margin-top: var(--space-md);
}

.legal h3 {
  margin-top: var(--space-md);
}

.legal h4 {
  margin-top: var(--space-sm);
}

.legal p {
  margin-top: var(--space-sm);
}

.legal-source {
  margin-top: var(--space-lg);
}