/* Seitenrahmen: Kopf und Fuß */
.header { background: var(--color-background); border-bottom: 1px solid var(--color-border); }
.header__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding-block: 0.9rem; }

.brand { display: inline-flex; align-items: flex-end; min-height: var(--touch); padding-bottom: 0.5rem; font-size: clamp(1.375rem, 2.3vw, 1.875rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; text-decoration: none; text-transform: lowercase; }
.brand::after { content: ""; width: 0.36em; height: 0.36em; margin-left: 0.08em; margin-bottom: 0.06em; background: var(--color-accent); }

.nav-link { display: flex; align-items: center; min-height: var(--touch); font-size: 0.9375rem; font-weight: 500; text-decoration: none; }
.nav-link:hover { color: var(--color-text); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }

.header__cta { margin-left: auto; padding-inline: 1rem; font-size: 0.9375rem; }
.header__cta .btn__arrow { display: none; }

/* Kein JavaScript: details klappt das Menü mobil auf, ab 1000 px gilt die feste Navigation. */
.menu { order: 3; width: 100%; }
.menu summary { list-style: none; display: flex; align-items: center; width: fit-content; min-height: var(--touch); font-family: var(--font-mono); font-size: var(--text-small); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: "+"; margin-left: 0.6rem; color: var(--color-accent-text); }
.menu[open] summary::after { content: "–"; }
.menu nav { padding-bottom: 0.5rem; border-top: 1px solid var(--color-border); }
.menu .nav-link { border-bottom: 1px solid var(--color-border); }
.nav { display: none; }

@media (min-width: 1000px) {
  .menu { display: none; }
  .nav { display: flex; gap: 2rem; margin-left: auto; }
  .header__cta { margin-left: 1rem; }
  .header__cta .btn__arrow { display: inline; }
}

.footer { padding-block: 3.5rem 1.5rem; }
.footer__brand { color: var(--color-on-dark); }
.footer__about p { margin-top: 0.75rem; max-width: 26rem; }
.footer__vendor { display: flex; align-items: center; gap: 0.75rem; color: var(--color-on-dark-2); font-size: var(--text-small); }
.footer__col { display: grid; align-content: start; font-size: var(--text-small); }
.footer__col a { display: flex; align-items: center; min-height: 32px; }
.footer__col span { margin-bottom: 0.25rem; color: var(--color-on-dark-2); font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.1em; text-transform: uppercase; }
.footer__legal { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--color-border-dark); color: var(--color-on-dark-2); font-size: var(--text-small); }

@media (min-width: 900px) {
  .footer__about { grid-column: 1 / span 6; }
  .footer__col { grid-column: span 3; }
}