/* Kopf und Fuß, auf jeder Seite.
 *
 * Eigene Datei, weil app.css an der Grenze von 800 Zeilen steht und Kopf und
 * Fuß mit den Komponenten darin nichts teilen außer den Tokens.
 */

/* --------------------------------------------------------------- Kopf */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgb(255 255 255 / 88%);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--c-border);
}

.site-header__inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--s-3) var(--s-4);
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  text-decoration: none;
  flex: none;
}

.brand__mark { width: 2rem; height: 2rem; display: block; }

.brand__name {
  font-weight: 720;
  font-size: var(--t-lg);
  letter-spacing: -0.025em;
  color: var(--c-brand);
  margin: 0;
}

.brand__name span { color: var(--c-accent); }

.site-nav {
  display: flex;
  gap: var(--s-1);
  margin-right: auto;
}

.site-nav a,
.site-header__actions > a:not(.btn),
.site-menu nav a {
  color: var(--c-ink-soft);
  text-decoration: none;
  font-size: var(--t-sm);
  font-weight: 520;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius);
}

.site-nav a:hover,
.site-header__actions > a:not(.btn):hover {
  color: var(--c-ink);
  background: var(--c-surface-sunk);
}

.site-nav a[aria-current],
.site-header__actions > a[aria-current] {
  color: var(--c-brand);
  background: var(--c-brand-tint);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.btn--sm { padding: var(--s-2) var(--s-4); font-size: var(--t-sm); }

/* Das Menü gibt es nur auf schmalen Bildschirmen. */
.site-menu { display: none; }

@media (max-width: 60rem) {
  .site-header__inner { gap: var(--s-3); }
  .site-nav,
  .site-header__actions > a:not(.btn) { display: none; }
  .site-header__actions { margin-left: auto; }

  .site-menu { display: block; }

  .site-menu > summary {
    list-style: none;
    cursor: pointer;
    padding: var(--s-2) var(--s-3);
    font-size: var(--t-sm);
    font-weight: 600;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius);
  }

  .site-menu > summary::-webkit-details-marker { display: none; }

  .site-menu[open] > summary { background: var(--c-surface-sunk); }

  .site-menu nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: grid;
    padding: var(--s-2) var(--s-4) var(--s-4);
    background: var(--c-paper);
    border-bottom: 1px solid var(--c-border);
    box-shadow: 0 12px 24px rgb(23 34 46 / 8%);
  }

  .site-menu nav a {
    font-size: var(--t-base);
    padding: var(--s-3);
  }

  .site-menu nav a[aria-current] { color: var(--c-brand); background: var(--c-brand-tint); }
}

@media (max-width: 26rem) {
  .brand__name { font-size: var(--t-md); }
  .site-header__actions .btn { padding-inline: var(--s-3); }
}

/* ---------------------------------------------------------------- Fuß */

.site-footer {
  background: var(--c-ink);
  color: rgb(255 255 255 / 70%);
  font-size: var(--t-sm);
  padding: var(--s-7) 0 var(--s-5);
}

.site-footer__inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 var(--s-4);
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
}

.site-footer .brand__name { color: #fff; margin-bottom: var(--s-3); }
.site-footer .brand__name span { color: #e0b06c; }
.site-footer__brand p { max-width: 32ch; }

.site-footer nav { display: grid; align-content: start; gap: var(--s-2); }

.site-footer__title {
  margin: 0 0 var(--s-1);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgb(255 255 255 / 50%);
}

.site-footer a { color: rgb(255 255 255 / 85%); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.site-footer__legal {
  max-width: 72rem;
  margin: var(--s-6) auto 0;
  padding: var(--s-4) var(--s-4) 0;
  border-top: 1px solid rgb(255 255 255 / 12%);
  font-size: var(--t-xs);
  color: rgb(255 255 255 / 55%);
}

@media (max-width: 52rem) {
  .site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: 1 / -1; }
}