/* ═══════════════════════════════════════════════════════════════
   Scroll-Animationen und seitenspezifische Feinheiten
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   Einblenden beim Scrollen — nach Möglichkeit rein in CSS
   über eine View-Timeline, ohne JavaScript und ohne Beobachter.
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 26%;
    }

    .reveal-stagger > * {
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 22%;
    }
  }

  /* Browser ohne View-Timelines bekommen die Klasse per JavaScript gesetzt. */
  @supports not (animation-timeline: view()) {
    .reveal, .reveal-stagger > * {
      opacity: 0;
      transform: translateY(1.75rem);
      transition: opacity var(--duration-slow) var(--ease-out),
                  transform var(--duration-slow) var(--ease-out);
    }
    .reveal.is-visible,
    .reveal-stagger.is-visible > * {
      opacity: 1;
      transform: none;
    }
    .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; }
    .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; }
    .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }
    .reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; }
  }
}

@keyframes reveal-in {
  from { opacity: 0; transform: translateY(2rem); }
  to   { opacity: 1; transform: none; }
}

/* Der Fortschrittsbalken oben zeigt die Leseposition. */
@supports (animation-timeline: scroll()) {
  .read-progress {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--highlight));
    transform-origin: 0 50%;
    z-index: 200;
    animation: progress linear;
    animation-timeline: scroll(root block);
  }
}
@keyframes progress { from { scale: 0 1; } to { scale: 1 1; } }

/* ─────────────────────────────────────────────
   Startseite
   ───────────────────────────────────────────── */
.intro__text p + p { margin-block-start: var(--space-md); }

.offers { display: grid; gap: var(--space-md); }

/* Das Angebotsraster mischt große und kleine Kacheln. */
.offer-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.offer {
  position: relative;
  display: grid;
  align-content: end;
  gap: var(--space-2xs);
  min-height: 15rem;
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  overflow: clip;
  color: #fff;
  isolation: isolate;
}
.offer img,
.offer .img-placeholder {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale var(--duration-slow) var(--ease-out);
}
.offer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, oklch(16% 0.04 228 / 0.88), oklch(16% 0.04 228 / 0.15) 65%);
}
.offer:hover img { scale: 1.06; }
.offer__title { font-size: var(--step-1); font-family: var(--font-display); font-weight: 700; }
.offer__text { font-size: var(--step--1); color: color-mix(in oklab, #fff 80%, transparent); }
.offer--wide { grid-column: span 2; }
@media (max-width: 48rem) { .offer--wide { grid-column: span 1; } }

/* ─────────────────────────────────────────────
   Anfahrt
   ───────────────────────────────────────────── */
.travel { display: grid; gap: var(--space-lg); }
.travel__card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-md);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  border: 1px solid var(--border);
}
.travel__icon {
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 1.5rem;
}
.lines { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-block-start: var(--space-xs); }
.line {
  display: grid;
  place-items: center;
  min-width: 2.9rem;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Statische Karte statt eingebettetem Fremddienst — kein Datenabfluss. */
.map-static {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 18rem;
  border-radius: var(--radius-lg);
  overflow: clip;
  background:
    repeating-linear-gradient(45deg, transparent 0 22px, oklch(50% 0.02 150 / 0.05) 22px 24px),
    linear-gradient(160deg, oklch(88% 0.05 150), oklch(80% 0.06 180));
  border: 1px solid var(--border);
}
.map-static__pin {
  display: grid;
  gap: var(--space-2xs);
  place-items: center;
  text-align: center;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--bg-raised) 92%, transparent);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(8px);
}

/* ─────────────────────────────────────────────
   Sponsoring-Pakete
   ───────────────────────────────────────────── */
.packages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-lg);
  align-items: start;
}
.package {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}
.package:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.package--featured { border-color: var(--accent); border-width: 2px; }
.package__name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--accent);
}
.package__price {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 800;
  line-height: 1;
}
.package__price small { font-size: 0.35em; font-weight: 600; color: var(--text-muted); display: block; margin-block-start: 0.4em; }
/* "netto" klein und inline direkt hinter dem großen Preis. */
.package__unit { font-size: 0.3em; font-weight: 600; color: var(--text-muted); vertical-align: 0.35em; margin-inline-start: 0.25em; }

/* ─────────────────────────────────────────────
   Beitragsdetail
   ───────────────────────────────────────────── */
.article__head { display: grid; gap: var(--space-sm); }
.article__meta { font-size: var(--step--1); color: var(--text-muted); font-weight: 600; letter-spacing: 0.05em; }
.article__hero {
  border-radius: var(--radius-lg);
  overflow: clip;
  margin-block: var(--space-xl);
  box-shadow: var(--shadow-lg);
}
.article__hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.article-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  margin-block-start: var(--space-2xl);
  padding-block-start: var(--space-lg);
  border-block-start: 1px solid var(--border);
}

/* ─────────────────────────────────────────────
   404
   ───────────────────────────────────────────── */
.notfound {
  display: grid;
  place-items: center;
  gap: var(--space-md);
  text-align: center;
  padding-block: var(--space-3xl);
}
.notfound__code {
  font-family: var(--font-display);
  font-size: var(--step-6);
  font-weight: 800;
  line-height: 1;
  color: var(--accent-soft);
  letter-spacing: -0.05em;
}