/* =============================================================
   layout.css — Container, Kopf- und Fußzeile
   ============================================================= */

/* ---------- Container ----------
   Desktop: bis 1300px breit, ohne Innenabstand (wie im Original).
   Tablet: 30px, Mobil: 20px seitlich.                            */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}
@media (max-width: 1024px) { .container { padding-inline: 30px; } }
@media (max-width: 767px)  { .container { padding-inline: 20px; } }

/* Container mit Innenabstand auch auf Desktop (für Textseiten) */
.container--padded { padding-inline: 20px; }

.section { padding-block: var(--space-lg); }
.section--tight { padding-block: var(--space-md); }
.section--flush { padding-block: 0; }
.section--surface { background: var(--c-surface); }

/* =============================================================
   Kopfzeile
   ============================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding-block: 20px;
  background: var(--c-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: box-shadow var(--dur) var(--ease);
}
.site-header.is-pinned { box-shadow: var(--shadow-header); }

.site-header__inner {
  display: flex;
  align-items: center;
}

/* Spaltenbreiten wie im Original: 24,3 % Logo, 75 % Navigation.
   Die verbleibenden 0,7 % sind der Rand rechts neben dem Button. */
.site-header__logo { flex: 0 0 24.3%; line-height: 0; }
.site-header__logo img { width: 60%; }

.site-header__nav { flex: 0 0 75%; }


/* ---------- Navigation (Desktop) ---------- */
.nav__list {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.nav__item { margin-right: var(--space-sm); }
.nav__item:last-child { margin-right: 0; }

.nav__link {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  color: var(--c-text-strong);
  font-family: var(--f-display);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1;
}
.nav__link:hover,
.nav__link:focus,
.nav__link[aria-current="page"] { color: var(--c-accent); }

/* Call-to-Action im Menü */
.nav__link--cta {
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--c-accent);
  box-shadow: var(--shadow-btn);
  color: var(--c-text-strong);
  text-transform: uppercase;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__link--cta:hover,
.nav__link--cta:focus,
.nav__link--cta[aria-current="page"] {
  background: var(--c-gold);
  color: var(--c-bg);
}

/* ---------- Menü-Umschalter (nur Mobil) ---------- */
.nav__toggle {
  display: none;
  width: 40px;
  height: 44px;
  padding: 7px;
  margin-left: auto;
  color: var(--c-text);
}
.nav__toggle svg { width: 25px; height: 25px; margin-inline: auto; fill: currentColor; }

/* ---------- Kopfzeile — Tablet (≤1024px) ---------- */
@media (max-width: 1024px) {
  .site-header { padding-block: 0; }
  .nav__item { margin-right: 0; }
  .nav__link { padding: 10px 25px; }
}

/* =============================================================
   Kopfzeile — Mobil (≤767px)
   ============================================================= */
@media (max-width: 767px) {
  .site-header__logo { flex: 0 0 50%; }
  .site-header__nav  { flex: 0 0 50%; position: relative; }
  .nav__toggle { display: block; }

  .nav__list {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 20;
    display: none;
    flex-direction: column;
    align-items: stretch;
    min-width: 220px;
    background: var(--c-bg);
    box-shadow: var(--shadow-btn);
  }
  .nav.is-open .nav__list { display: flex; }

  .nav__item { margin-right: 0; }

  .nav__link {
    padding: 15px 25px;
    background: var(--c-bg);
    text-transform: uppercase;
  }
  .nav__link--cta { box-shadow: none; border-radius: 0; }
}

/* =============================================================
   Fußzeile
   ============================================================= */
.site-footer {
  padding: 50px 0 20px;
  background: var(--c-surface);
  color: var(--c-text-strong);
}

.site-footer__grid {
  grid-template-columns: 1fr 1fr 1fr 1.4fr; /* war 25% 25% 5% 45% wie im Original — die 5%-Spalte
                                                lief nur unauffällig über, weil "Kontakt/Impressum/
                                                Datenschutz" kurz genug sind; jetzt bekommt jede
                                                Spalte den Platz, den ihr Inhalt tatsächlich braucht */
  display: grid;
  align-items: start;
  margin-top: 50px;
}

/* Das Logo ragt oben aus der Spalte heraus. */
.site-footer__brand img { width: 60%; margin-top: -60px; }

.site-footer__heading {
  margin-bottom: var(--space-sm);
  font-family: var(--f-display);
  font-size: var(--fs-h5);
  font-weight: 600;
  color: var(--c-text-strong);
}
.site-footer__links li { margin-bottom: 5px; line-height: 24px; }
.site-footer__links a { color: var(--c-text-strong); }
.site-footer__links a:hover { color: var(--c-accent); }

.site-footer__claim {
  margin: 0;
  padding: 27px var(--space-sm) 0 0;
  font-family: var(--f-heading);
  font-size: 2rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.3;
  text-align: right;
}
.site-footer__claim a { color: var(--c-text-strong); }

.site-footer__copyright {
  margin-top: 12px;
  text-align: center;
  font-size: var(--fs-body);
  color: var(--c-text);
}

@media (max-width: 1024px) {
  .site-footer__brand img { margin-top: -40px; }
  .site-footer__claim { padding-top: 0; font-size: var(--fs-h5); }
}

@media (max-width: 767px) {
  .site-footer__grid { grid-template-columns: 1fr; row-gap: var(--space-sm); text-align: center; }
  .site-footer__brand img { width: 192px; margin: 0 auto; }
  .site-footer__claim { padding: 0; text-align: center; }
}