/*
 * layout -- das Grundgerüst jeder Seite. Der Block sitzt am <body>; header,
 * main und footer sind seine Elemente. layout__inner setzt die Inhaltsbreite
 * und sitzt innerhalb dieser drei.
 * Zustände: layout__inner--flush für Inhalte, die bis an die Spaltenkante
 * laufen (randlose Bilder, bildschirmhohe Bereiche), und layout--wide für die
 * Verwaltung, die zwei Spalten nebeneinander stellt und dafür mehr Breite
 * braucht.
 *
 * Gast und Teilnehmer (layouts/main.php) bauen jede Seite aus Abschnitten über die
 * volle Breite (trail-style.md): layout__main--bands nimmt dem main seinen Abstand,
 * layout__band ist ein Abschnitt mit eigenem Grund, grau; --bright weiß, --tint mint
 * (höchstens einmal je Seite). Zwei Nachbarn haben nie denselben Grund. Jeder setzt
 * --color-band und --color-card neu, damit Karten darin mitziehen: auf Grau weiß, auf
 * Weiß grau. layout__title ist die Überschrift der Seite, layout__intro der Satz
 * darunter, layout__heading die Überschrift eines Abschnitts, layout__lead ein
 * hervorgehobener Satz. layout__inner--narrow ist die schmale Spalte der Formularseiten. Die Verwaltung nutzt das alles nicht.
 */

.layout {
  display: flex;
  flex-direction: column;
  /* svh statt vh: vh springt auf Mobilgeräten mit der Adressleiste */
  min-height: 100svh;
  /* Trefferflächen von Symbolknöpfen dürfen über die Inhaltskante ragen */
  overflow-x: clip;
}

.layout--wide {
  --content-max: var(--content-max-wide);
}

.layout__header {
  position: sticky;
  inset-block-start: 0;
  z-index: 5;
  flex: none;
  display: flex;
  align-items: center;
  min-height: var(--header-height);
  border-block-end: var(--border-width) solid var(--color-border);
  background-color: var(--color-background);
}

.layout__main {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding-block: var(--space-5);
}

/* Die Abschnitte bringen ihre Luft selbst mit und laufen bis an Kopf und Fuß */
.layout__main--bands {
  padding-block: 0;
}

.layout__footer {
  flex: none;
  padding-block: var(--space-4);
  border-block-start: var(--border-width) solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.layout__inner {
  width: 100%;
  min-width: 0;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.layout__inner--flush {
  padding-inline: 0;
}

/* ---------- Abschnitte ---------- */

.layout__band {
  padding-block: var(--space-7);
  background-color: var(--color-band);
}

.layout__band--bright {
  --color-band: oklch(100% 0 0);
  --color-card: oklch(94.5% 0.014 var(--accent-hue));
}

.layout__band--tint {
  --color-band: oklch(93% 0.035 115);
  --color-card: oklch(100% 0 0);
}

@media (prefers-color-scheme: dark) {
  .layout__band--bright {
    --color-band: oklch(21% 0.014 var(--accent-hue));
    --color-card: oklch(27% 0.014 var(--accent-hue));
  }

  .layout__band--tint {
    --color-band: oklch(26% 0.04 118);
    --color-card: oklch(31% 0.04 118);
  }
}

@media (min-width: 48rem) {
  .layout__band {
    padding-block: var(--space-8);
  }
}

/* ---------- Formularseite ---------- */

/* Kurze Seiten mit einem Formular (layouts/main.php, $isFormPage): eine schmale Spalte
   in der Mitte, Überschrift, Felder, Knopf und Verweise auf ihrer linken Kante, ohne
   Karte. Am Handy ist sie die volle Breite. */
.layout__inner--narrow {
  max-width: calc(28rem + 2 * var(--page-gutter));
}

/* In der schmalen Spalte die Überschrift eine Stufe kleiner */
.layout__inner--narrow .layout__title {
  font-size: min(clamp(2rem, 1.5rem + 2.5vw, 3rem), calc((100vw - 2rem) / 10));
}

/* Der Knopf füllt die Spalte */
.layout__inner--narrow form .cluster > .button,
.layout__inner--narrow form > .button {
  flex: 1 1 auto;
}

/* Weitere Verweise untereinander statt in einer Reihe, unter einer Linie */
.layout__inner--narrow > nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding-block-start: var(--space-4);
  border-block-start: var(--border-width) solid var(--color-border);
}

.layout__inner--narrow > nav a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap-target);
  font-weight: var(--font-weight-bold);
}

/* Ein hervorgehobener Satz, etwa die Frage beim Anschließen an eine Gruppe */
.layout__lead {
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-heavy);
  line-height: var(--line-height-tight);
}

@media (min-width: 36rem) {
  .layout__lead {
    font-size: var(--font-size-title);
  }
}

/* ---------- Textseite ---------- */

/* Seiten aus Text (layouts/main.php, $isTextPage): linksbündig in der breiten Spalte, der
   Text in Lesebreite */
.layout__inner--text > :not(.layout__title) {
  max-inline-size: 70ch;
}

.layout__inner--text > nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.layout__inner--text > nav a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap-target);
  font-weight: var(--font-weight-bold);
}

/* ---------- Überschrift der Seite ---------- */

/* Im Verlauf Mittelgrün nach Dunkelgrün, im dunklen Schema Hellgrün nach Mittelgrün.
   Die Größe hat zwei Grenzen: das Maß für Überschriften und die Breite der Spalte --
   „Sehenswürdigkeiten" ist etwa zehnmal so breit wie die Schrift hoch und muss bei
   300px in eine Zeile passen (Seitenrand je 1rem). padding-block-end, weil
   background-clip die Unterlängen sonst abschneidet. */
.layout__title {
  padding-block-end: 0.12em;
  background-image: linear-gradient(170deg, var(--color-brand-medium), var(--color-brand-dark));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-size: min(var(--font-size-hero), calc((100vw - 2rem) / 10));
  font-weight: var(--font-weight-heavy);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

@media (prefers-color-scheme: dark) {
  .layout__title {
    background-image: linear-gradient(170deg, var(--color-brand-light), var(--color-brand-medium));
  }
}

/* Der Satz unter der Überschrift: größer und gedämpft, in Lesebreite */
.layout__intro {
  max-inline-size: 48ch;
  color: var(--color-text-muted);
  font-size: var(--font-size-large);
}

/* Die Überschrift eines Abschnitts. Untere Grenze so, dass „Sehenswürdigkeiten" bei
   300px in eine Zeile passt */
.layout__heading {
  font-size: clamp(1.5rem, 0.9rem + 3vw, 3rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

/* Ohne Hintergrundbild (Kontrastmodus) bliebe transparente Schrift unsichtbar */
@media (forced-colors: active) {
  .layout__title {
    color: CanvasText;
  }
}