/* Rahmen/Struktur, Header, Hero, Footer */
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}

/* Header */
header{padding:40px 0 8px; text-align:center}
.brand{display:inline-flex; flex-direction:column; align-items:center; gap:8px; color:inherit; text-decoration:none}
.emblem{width:50px; height:50px}
@media (max-width:600px){ .emblem{width:40px; height:40px} }

.wordmark{line-height:1.05; text-align:center}
.wordmark .name{
  font-family:var(--font-brand);
  font-weight:700;
  font-size:20px;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.wordmark .claim{
  font-size:11px;
  letter-spacing:.08em;
  color:var(--muted);
  text-transform:uppercase;
}

/* Hero */
.hero{padding:32px 0 14px; text-align:center}
.hero-title{font-size:34px; margin:18px 0 28px; font-weight:700; line-height:1.15}
.hero-sub{color:var(--muted); font-size:16px; margin:0 auto 30px; max-width:60ch}

/* Footer */
footer{max-width:var(--content); margin:18px auto 40px; color:var(--muted); text-align:center}

/* Footer – rechtliche Angaben */
.footer-legal {
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  margin: 2rem auto 0 auto;
  border-top: 1px solid var(--muted);
  padding-top: 1rem;
  max-width: var(--wrap); /* gleiche Breite wie andere Inhalte */
}

.footer-legal a {
  color: inherit;
  text-decoration: none;
}

.footer-legal a:hover {
  text-decoration: underline;
}