/* Komponenten-CSS — nur Tokens (§2.2). Komponiert, nie Pro-Seite-CSS.
 * Modernes Look-&-Feel über Tokens, color-mix und relative Einheiten.
 */

/* — Header (transluzent, Blur, dezenter Scroll-Schatten) — */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(0.75rem) saturate(1.4);
  backdrop-filter: blur(0.75rem) saturate(1.4);
  border-bottom: var(--bw-thin) solid var(--header-border);
  transition: box-shadow var(--dur-base) var(--ease-standard);
}
.site-header.is-scrolled { box-shadow: var(--shadow-md); }
.site-header__inner {
  display: flex;
  flex-wrap: wrap;            /* Mobil: Nav-Panel bricht in eigene Zeile um (kein Overflow) */
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  padding-block: var(--sp-sm);
}
.brand {
  font-family: var(--font-headline);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-tight);
  color: var(--c-text);
  text-decoration: none;
}

/* Hamburger — nur mobil sichtbar (Media-Query weiter unten). */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;          /* Balken horizontal zentriert -> symmetrisches X */
  gap: var(--sp-2xs);
  width: 2.75rem;
  height: 2.75rem;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-burger span {
  width: 1.5rem;
  height: var(--bw-base);
  background: var(--c-text);
  border-radius: var(--r-full);
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-standard);
}
/* Exakte Mitte = Abstand + Balkenhöhe -> sauberes, gerades Kreuz (kein Versatz). */
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(calc(var(--sp-2xs) + var(--bw-base))) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(calc(-1 * (var(--sp-2xs) + var(--bw-base)))) rotate(-45deg); }

/* — Nav mit animiertem Unterstrich — */
.nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(var(--sp-sm), 1.5vw, var(--sp-lg));
  list-style: none;
  padding: 0;
}
.nav__item { display: flex; align-items: center; }
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--c-text);
  text-decoration: none;
  font-weight: var(--fw-medium);
  padding: var(--sp-2xs) 0;
  line-height: var(--lh-snug);
  transition: color var(--dur-fast) var(--ease-standard);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: calc(-1 * var(--sp-2xs));
  width: 0;
  height: var(--bw-base);
  background: var(--c-primary);
  border-radius: var(--r-full);
  transition: width var(--dur-base) var(--ease-out);
}
.nav__link:hover { color: var(--c-primary); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { width: 100%; }

/* Dropdown — rein über aria-expanded (Klick/Tap/Tastatur), kein Hover-Loch. */
.nav__item--has-children { position: relative; }
.nav__toggle {
  font: inherit;
  font-weight: var(--fw-medium);
  color: var(--c-text);
  background: none;
  border: none;
  cursor: pointer;
}
.nav__toggle::after { content: " \25BE"; font-size: var(--fs-xs); margin-left: var(--sp-2xs); }
.nav__submenu {
  position: absolute;
  left: 0;
  top: calc(100% + var(--sp-xs));
  min-width: 13rem;
  display: none;
  flex-direction: column;
  gap: var(--sp-3xs);
  background: var(--c-surface-raised);
  border: var(--bw-thin) solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-xs);
  z-index: var(--z-dropdown);
  list-style: none;
}
.nav__submenu .nav__link { padding: var(--sp-xs) var(--sp-sm); border-radius: var(--r-sm); width: 100%; }
.nav__submenu .nav__link:hover { background: var(--c-surface); }
.nav__submenu .nav__link::after { content: none; }
.nav__toggle[aria-expanded="true"] + .nav__submenu { display: flex; }

/* Backdrop für das mobile Slide-over (dezent abgedunkelt + leichter Blur). */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--c-text) 38%, transparent);
  -webkit-backdrop-filter: blur(0.25rem);
  backdrop-filter: blur(0.25rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-standard), visibility var(--dur-base) var(--ease-standard);
  z-index: var(--z-overlay);
}
.nav-backdrop.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

/* Mobile Navigation: ruhiges Slide-over-Panel von rechts (Apple-Anmutung). */
@media (max-width: 767px) {
  .nav-burger { display: inline-flex; position: relative; z-index: calc(var(--z-modal) + 1); }
  .nav {
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    width: min(82vw, 22rem);
    transform: translateX(100%);
    transition: transform var(--dur-slow) var(--ease-out);
    background: var(--c-surface-raised);
    box-shadow: var(--shadow-xl);
    padding: var(--sp-4xl) var(--sp-lg) var(--sp-xl);
    z-index: var(--z-modal);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav.is-open { transform: translateX(0); }
  .nav__list { flex-direction: column; align-items: stretch; gap: var(--sp-xs); }
  .nav__link { padding-block: var(--sp-sm); font-size: var(--fs-md); }
  .nav__link::after { content: none; }
  .nav__submenu {
    position: static;
    display: flex;
    box-shadow: none;
    border: none;
    padding-left: var(--sp-md);
    min-width: 0;
  }
  .nav__toggle { width: 100%; text-align: left; }
  /* Body-Scroll sperren, wenn das Menü offen ist. */
  body.nav-open { overflow: hidden; }
}

.lang-switcher { display: flex; gap: var(--sp-2xs); }
.lang-switcher a {
  text-decoration: none;
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  padding: var(--sp-3xs) var(--sp-xs);
  border-radius: var(--r-sm);
  transition: background var(--dur-fast) var(--ease-standard);
}
.lang-switcher a:hover { background: var(--c-surface); }
.lang-switcher a[aria-current="true"] { color: var(--c-on-primary); background: var(--c-primary); }

/* — Footer (mehrspaltig, ruhig) — */
.site-footer {
  background: var(--c-surface);
  border-top: var(--bw-thin) solid var(--c-border);
  padding-block: var(--sp-2xl);
  color: var(--c-text-muted);
}
.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-lg);
}
.site-footer a { color: var(--c-text-muted); text-decoration: none; }
.site-footer a:hover { color: var(--c-primary); }

/* — Hero — */
.hero { padding-block: var(--section-y); }
.hero__title { font-size: var(--fs-hero); letter-spacing: var(--ls-tighter); margin-bottom: var(--sp-sm); max-width: 16ch; }
.hero__lead { font-size: var(--fs-md); color: var(--c-text-muted); max-width: 54ch; }

.hero--vollflaeche { color: var(--c-on-primary); background: var(--gradient-brand); }
.hero--vollflaeche .hero__title,
.hero--vollflaeche .hero__lead { color: var(--c-on-primary); }
.hero--vollflaeche .hero__lead { opacity: 0.92; }

/* Full-Bleed-Hero mit Bild + Scrim (modern). */
.hero--image {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(26rem, 70vh, 44rem);
  padding-block: var(--sp-3xl);
  color: var(--c-on-primary);
  isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim { position: absolute; inset: 0; z-index: -1; background: var(--c-overlay); }
.hero--image .hero__title,
.hero--image .hero__lead { color: var(--c-on-primary); }
.hero--image .hero__lead { opacity: 0.95; }

/* Bild direkt unter dem Farb-Hero, leicht überlappend. */
.hero-media { margin-top: calc(-1 * var(--sp-2xl)); position: relative; z-index: 1; }
.hero-media img { width: 100%; max-height: 32rem; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }

/* — Button (primär/sekundär/ghost/link × Größen) — */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xs);
  font: inherit;
  font-weight: var(--fw-semibold);
  line-height: 1;
  border-radius: var(--r-full);
  border: var(--bw-base) solid transparent;
  padding: var(--sp-sm) var(--sp-lg);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.btn:hover { transform: translateY(-0.125rem); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--gradient-brand); color: var(--c-on-primary); box-shadow: var(--shadow-sm); }
.btn--primary:hover { box-shadow: var(--shadow-md); color: var(--c-on-primary); }
.btn--secondary { background: var(--c-accent); color: var(--c-on-accent); box-shadow: var(--shadow-sm); }
.btn--secondary:hover { background: var(--c-accent-hover); box-shadow: var(--shadow-md); }
.btn--ghost { border-color: var(--c-border); color: var(--c-text); background: transparent; }
.btn--ghost:hover { border-color: var(--c-primary); color: var(--c-primary); transform: none; }
.btn--link { padding: 0; border: none; color: var(--c-primary); background: none; }
.btn--link:hover { transform: none; text-decoration: underline; }
.btn--sm { padding: var(--sp-2xs) var(--sp-md); font-size: var(--fs-sm); }
.btn--lg { padding: var(--sp-md) var(--sp-xl); font-size: var(--fs-md); }

/* — Card (Hover-Lift + Bild-Zoom) — */
.card {
  display: flex;
  flex-direction: column;
  background: var(--c-surface-raised);
  border: var(--bw-thin) solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.card:hover { transform: translateY(-0.375rem); box-shadow: var(--shadow-lg); }
.card__body { padding: var(--sp-lg); display: flex; flex-direction: column; gap: var(--sp-xs); }
.card__title { font-size: var(--fs-lg); }
.card__meta { color: var(--c-text-muted); font-size: var(--fs-sm); }
.card__media { overflow: hidden; }
.card__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.card:hover .card__media img { transform: scale(1.06); }

/* — Figure (eigenständiges, gerundetes Bild) — */
.figure { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.figure img { width: 100%; max-height: 26rem; object-fit: cover; }

/* — CTA-Block — */
.cta {
  background: var(--gradient-brand);
  color: var(--c-on-primary);
  border-radius: var(--r-xl);
  padding: clamp(var(--sp-xl), 4vw, var(--sp-3xl));
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.cta :is(h2, p) { color: var(--c-on-primary); }

/* — Accordion (FAQ, GEO §9) — */
.accordion__item { border-bottom: var(--bw-thin) solid var(--c-border); }
.accordion__summary { cursor: pointer; padding: var(--sp-md) 0; font-weight: var(--fw-semibold); }
.accordion__panel { padding-bottom: var(--sp-md); color: var(--c-text-muted); }

/* — Timeline (Historie) — */
.timeline { list-style: none; padding-left: var(--sp-lg); border-left: var(--bw-base) solid var(--c-border); }
.timeline__item { padding-bottom: var(--sp-lg); }
.timeline__year { font-weight: var(--fw-bold); color: var(--c-primary); }

/* — Badge / Tag — */
.badge {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  color: var(--c-primary);
  background: color-mix(in srgb, var(--c-primary) 10%, transparent);
  border-radius: var(--r-full);
  padding: var(--sp-3xs) var(--sp-sm);
}

/* — Formular — */
.field { display: flex; flex-direction: column; gap: var(--sp-2xs); margin-bottom: var(--sp-md); }
.field label { font-weight: var(--fw-medium); }
.field input, .field textarea {
  font: inherit;
  color: var(--c-text);
  background: var(--c-bg);
  border: var(--bw-thin) solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-sm) var(--sp-md);
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.field input:focus, .field textarea:focus {
  border-color: var(--c-focus);
  box-shadow: 0 0 0 var(--ring-width) color-mix(in srgb, var(--c-focus) 25%, transparent);
  outline: none;
}

/* — Gallery / Lightbox — */
.gallery { display: grid; gap: var(--sp-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r-md); }

/* — Map-Embed (consent-gated) — */
.map-embed { aspect-ratio: 16 / 9; background: var(--c-surface); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.map-embed iframe { width: 100%; height: 100%; border: 0; }
.consent-placeholder { display: grid; place-items: center; height: 100%; padding: var(--sp-lg); text-align: center; }

/* — Cookie-Banner (schwebende Karte) — */
.cookie-banner {
  position: fixed;
  inset-inline: var(--sp-md);
  bottom: var(--sp-md);
  max-width: 42rem;
  margin-inline: auto;
  background: var(--c-surface-raised);
  border: var(--bw-thin) solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--sp-lg);
  z-index: var(--z-overlay);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md);
  align-items: center;
  justify-content: space-between;
}

/* — Social-Icons — */
.social-icons { display: flex; gap: var(--sp-sm); list-style: none; padding: 0; }
.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-full);
  color: var(--c-text-muted);
  background: color-mix(in srgb, var(--c-text) 6%, transparent);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-out);
}
.social-icons a:hover {
  color: var(--c-on-primary);
  background: var(--c-primary);
  transform: translateY(-0.125rem);
}