/* layout: Grundgerüst des Dokuments. Übernommen aus der Vorlage; dort hängt
   die äußere Hülle an .theme, hier an body.layout — es gibt keinen zweiten
   Wrapper. Header und Footer behalten ihre Höhe, main füllt den Rest. */
.layout {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  overflow-x: clip;
}

.layout__header {
  position: sticky;
  top: 0;
  z-index: 20;
  flex: none;
  min-height: var(--header-height);
  background: var(--color-surface);
  border-bottom: var(--border-width) solid var(--color-border);
}

.layout__main {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.layout__footer {
  flex: none;
  background: var(--color-surface);
  border-top: var(--border-width) solid var(--color-border);
}

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

/* page: der Seitenkörper zwischen Header und Footer */
.page {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-block: var(--space-5) var(--space-7);
}

.page__title {
  margin: 0;
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  font-weight: var(--weight-semibold);
}

.page__lead {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

/* page-link: ein Link, der allein in seiner Zeile steht — der Weg eine Ebene
   zurück über dem Titel, oder ein Nebenweg unter einem Formular. Kein Symbol
   davor, der Text sagt selbst, wohin er führt. Volle Trefferhöhe, damit er
   sich am Handy treffen lässt. */
.page-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
}

@media (hover: hover) {
  .page-link:hover { color: var(--color-text); text-decoration: underline; }
}

.page-link:active { color: var(--color-text); text-decoration: underline; }

/* Fließtext im Seitenkörper — mehrzeilige Angaben wie eine Zubereitung. */
.page__text {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.section__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}

/* header: die Leiste oben. Symbolknöpfe bringen ihre unsichtbare
   Trefferfläche mit; der Abstand wird an ihnen ausgeglichen, nicht hier. */
.header {
  display: flex;
  align-items: center;
  gap: 0;
  min-height: var(--header-height);
  padding-block: var(--space-2);
}

.header__brand {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  gap: var(--space-2);
  min-width: 0;
  margin-right: auto;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  text-decoration: none;
}

.header__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* footer: Linkzeile und Zeile darunter, beide mittig */
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-5);
  padding-bottom: max(var(--space-5), env(safe-area-inset-bottom));
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
}

/* keine Zeilenlücke: die 44px Höhe der Links sind der Abstand */
.footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--space-4);
}

.footer__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--color-text-muted);
  text-decoration: none;
}

@media (hover: hover) {
  .footer__link:hover { color: var(--color-text); }
}

.footer__link:active { color: var(--color-text); }

.footer__copy {
  margin: 0;
}