/*
 * layout.css — Seitengerüst: Container, Header, Footer, Raster-Utilities.
 * Keine Farb-/Abstandswerte außer über Variablen aus tokens.css.
 */

.container {
  width: 100%;
  max-width: var(--breite-inhalt);
  margin-inline: auto;
  padding-inline: var(--abstand-4);
}

.container--text {
  max-width: var(--breite-text);
}

/* Kopfbereich */
.kopfbereich {
  background-color: var(--farbe-kopf-hintergrund);
  border-bottom: 1px solid var(--farbe-kopf-rahmen);
  /* Koralle hätte auf dem Flyerblau nur 1,33:1, siehe tokens.css. */
  --fokus-ring: var(--fokus-ring-auf-blau);
}

.kopfbereich__leiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-4);
  padding-block: var(--abstand-3);
}

.kopfbereich__logo {
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
  color: var(--farbe-kopf-text);
  text-decoration: none;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--scale-h3);
}

.kopfbereich__logo:hover {
  color: var(--farbe-kopf-logo-hover);
  text-decoration: var(--kopf-logo-hover-dekoration);
}

/* Hauptbereich */
.hauptbereich {
  /* Fließend statt starr: 2 rem waren mobil zu viel Leerlauf und auf dem
     Desktop zu wenig Luft. */
  padding-block: clamp(1.5rem, 1rem + 2vw, 3rem);
}

.hauptbereich > .container > section + section,
.hauptbereich > .container > * + section {
  /* Starre 4 rem standen mobil in keinem Verhältnis zum Absatzabstand
     (1 rem) und waren auf dem Desktop kaum davon zu unterscheiden. */
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}

/* Fußbereich */
.fussbereich {
  margin-top: var(--abstand-16);
  padding-block: var(--abstand-12);
  background-color: var(--farbe-fuss-hintergrund);
  border-top: 1px solid var(--farbe-fuss-rahmen);
  color: var(--farbe-fuss-text);
  /* Wie im Kopf: Koralle-Ring wäre auf dem Flyerblau unsichtbar. */
  --fokus-ring: var(--fokus-ring-auf-blau);
}

/* Eigene Klasse statt der geborgten .karte__titel: eine kuenftige
   Anpassung der Karten soll den Fussbereich nicht mitverändern.
   Werte bewusst identisch zum bisherigen Erscheinungsbild. */
.fussbereich__titel {
  margin: 0;
  font-size: var(--scale-h3);
  color: var(--farbe-fuss-titel);
}

.fussbereich__raster {
  display: grid;
  gap: var(--abstand-8);
}

.fussbereich a {
  /* Rotbraun auf Flyerblau: 5,73:1. Die Links sind nicht nur an der
     Farbe, sondern auch an der Unterstreichung erkennbar. */
  color: var(--farbe-fuss-link);
}

/* Die Beschriftungen im Fuß erben die Fußfarbe, statt die allgemeine
   leise Textfarbe zu ziehen - auf einem gefärbten Fuß wäre sie falsch. */
.fussbereich .kontaktblock__label {
  color: inherit;
}

.fussbereich__rechtliches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-4);
  margin-top: var(--abstand-8);
  padding-top: var(--abstand-4);
  border-top: 1px solid var(--farbe-fuss-rahmen);
  font-size: .9375em;
}

/*
 * Eine getönte Sektion je Seite. Die drei Grundflächen (Hintergrund, Weiß,
 * Fläche-alt) liegen so dicht beieinander, dass die Seite wie eine einzige
 * Fläche wirkt; das kräftigere Blau bricht das, ohne eine neue Farbe
 * einzuführen. Textkontrast darauf: 8,39:1, leiser Text 5,10:1.
 * Bewusst ein Feld im Container, kein randloses Band: dafür müsste die
 * Sektion aus dem Container ausbrechen, was das Seitengerüst aller sechs
 * Seiten beträfe.
 */
.sektion--getoent {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background-color: var(--farbe-sektion-getoent);
  border-radius: var(--radius-gross);
}

/*
 * Zeilenlänge des Fließtextes. Der Container ist 68rem breit, damit
 * Galerien volle Breite haben - Absätze liefen darin über rund 110 Zeichen.
 * Gilt nur für direkte Kinder einer Sektion, Karten und Raster bleiben
 * unberührt.
 */
.hauptbereich > .container > section > :is(p, ul, ol) {
  max-width: var(--breite-text);
}

/* Zwischenüberschrift im Fließtext einer Sektion: Abstand nach oben, damit
   sie zum folgenden Text gehört und nicht zum vorigen. */
.hauptbereich > .container > section > :is(p, ul, ol, blockquote) + h3 {
  margin-top: var(--abstand-8);
}

/* Raster-Utilities */
.raster-2,
.raster-3 {
  display: grid;
  gap: var(--abstand-6);
}

@media (min-width: 40rem) {
  .raster-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .fussbereich__raster {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 60rem) {
  .raster-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .fussbereich__raster {
    grid-template-columns: repeat(4, 1fr);
  }
}