.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--container-pad);
}
.container--narrow {
  max-width: 1000px;
  margin: 0 auto;
  padding-inline: var(--container-pad);
}

.section { padding-block: var(--section-pad-y); }
.section--top-only { padding-block: var(--section-pad-y) 0; }
.section--bottom-only { padding-block: 0 var(--section-pad-y); }
/* Warme Sektion — leichter, waermerer Ton als die Standardcreme, um die
 * Sektion nach dem Hero optisch abzusetzen (Befund 2026-08-18: Hero und
 * naechste Sektion liefen ineinander). Kein harter Bruch, nur genug
 * Kontrast, damit das Auge die Grenze findet. */
.section--warm {
  background: color-mix(in srgb, var(--c-bg) 88%, #C79066 12%);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-header);
  background: rgba(250, 246, 240, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-border);
}
.site-header__bar {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--container-pad);
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.site-header__brand {
  display: flex;
  align-items: center;
  gap: 11px;
}
.site-header__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* R5-G1-1: Logo exakt 1,5x (32px → 48px), Schriftzug entfernt. */
.site-header__logo svg,
.site-header__logo img {
  width: 48px;
  height: 48px;
}
.site-header__brand-name {
  font: 500 18px/1 var(--font-display);
  letter-spacing: -0.01em;
}
@media (max-width: 768px) {
  /* Mobile: minimal kleiner, aber Touch-Target bleibt ≥44px */
  .site-header__logo svg,
  .site-header__logo img { width: 44px; height: 44px; }
}
.site-header__nav {
  display: none;
  align-items: center;
  gap: 28px;
}
.site-header__nav a {
  font: 400 15px var(--font-body);
  color: var(--c-ink);
  transition: color .15s;
}
.site-header__nav a:hover { color: var(--c-red); }
.site-header__nav a[aria-current="page"] { color: var(--c-red); }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.site-header__menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: transparent;
  border: 1px solid var(--c-input-border);
  border-radius: var(--r-md);
  cursor: pointer;
}

/* Mobile-Nav als Overlay (Vorgabe 08.09.): vorher stand die Nav
 * im Layout-Flow und schob den Body-Content beim Oeffnen nach unten
 * (das machte Sprung-Effekte auf iPhone-Safari und stoerte den
 * darunterliegenden Text). Jetzt: position:absolute unter dem
 * sticky Header, nimmt keinen Layout-Platz weg, ueberlagert den
 * Content mit vollem Background. */
.site-header__mobile-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--c-bg);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  padding: 8px var(--container-pad) 18px;
  display: flex;
  flex-direction: column;
  z-index: calc(var(--z-sticky-header) - 1);
  max-height: calc(100dvh - 72px);
  overflow-y: auto;
}
.site-header__mobile-nav a {
  font: 400 17px var(--font-body);
  padding: 13px 0;
  border-bottom: 1px solid var(--c-border-soft);
}
.site-header__mobile-nav a:last-child { border-bottom: 0; }

/* 2026-07-08: Desktop-Nav erst ab 1080px. Die 7-Item-Nav passt auf iPad
 * (768-1024) nicht sauber neben Logo + „Platz buchen"-Button, deshalb bekommt
 * der gesamte Tablet-Bereich das Hamburger-Menü statt der gequetschten Leiste. */
@media (min-width: 1080px) {
  .site-header__nav { display: flex; }
  .site-header__menu-button { display: none; }
}

.site-footer {
  background: var(--c-bg);
  border-top: 1px solid var(--c-border);
  margin-top: auto;
}
.site-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: clamp(48px, 7vw, 72px) var(--container-pad) 32px;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
}
.site-footer__col h3 {
  font: 500 11px/1 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 14px;
}
.site-footer__col a {
  font: 400 15px var(--font-body);
  display: block;
  margin-bottom: 10px;
}
.site-footer__col a:hover { color: var(--c-red); }
.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 14px;
}
/* R4-3: Footer-Logo 4x (24px → 96px), Schriftzug entfernt. */
.site-footer__brand--large svg,
.site-footer__brand--large img {
  width: 96px;
  height: 96px;
}
@media (max-width: 768px) {
  .site-footer__brand--large svg,
  .site-footer__brand--large img { width: 72px; height: 72px; }
}
.site-footer__brand-name {
  font: 500 17px/1 var(--font-display);
}
.site-footer__tag {
  font: 400 14px/1.5 var(--font-body);
  color: var(--c-muted);
}
/* Footer-CTAs unter Logo + Subline in der ersten Spalte (2026-07-14).
 * Primär „Platz buchen", sekundär/dezenter „Mitglied werden". */
.site-footer__cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.site-footer__contact {
  font: 400 15px/1.7 var(--font-body);
  color: rgba(26, 26, 26, 0.8);
}
.site-footer__members {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 22px;
  align-self: start;
}
.site-footer__members p {
  font: 500 11px/1 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 10px;
}
.site-footer__members a {
  font: 500 16px var(--font-body);
  color: var(--c-red);
}
.site-footer__members a:hover { text-decoration: underline; }

.site-footer__legal {
  border-top: 1px solid var(--c-border);
  margin-top: 40px;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.site-footer__credit {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .18s ease, color .18s ease;
}
.site-footer__credit:hover {
  color: var(--c-red);
  border-bottom-color: var(--c-red);
}
.site-footer__legal p {
  font: 500 11px/1.5 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(107, 107, 107, 0.7);
}
/* R5-G5-18: dezenter Vorstands-Login-Link bei den Legal-Links. */
.site-footer__admin-link {
  font: 500 11px/1.5 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(107, 107, 107, 0.7);
  transition: color .15s;
}
.site-footer__admin-link:hover { color: var(--c-red); }

/* R5-G5-19 Mobile-UX-Pass: Footer-Links kriegen auf Touch-Geräten größere
 * Tap-Targets (≥44px), damit Nachbar-Links nicht versehentlich getroffen werden. */
@media (max-width: 768px) {
  .site-footer__col a {
    padding: 11px 0;
    margin-bottom: 2px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .site-footer__grid { gap: 28px; }
}