/* =========================================================================
   ByteBerater · Wissen-Artikel „Umzug nach Monheim am Rhein“ (03.11.2026)
   Gänsefuß-Motiv – eigene, frei gezeichnete Spuren (kein Stadtlogo).
   Geladen nur auf /wissen/ und /wissen/umzug-monheim-am-rhein/.
   ========================================================================= */

/* Hintergrund: kleine blaue Gänsefußspuren hinter dem Artikeltext */
.section--gans {
  background: url("../img/gaensespuren.svg") center top / 960px 1280px repeat, var(--card);
}
@media (max-width: 700px) {
  .section--gans { background-size: 720px 960px; }
}

/* Kopfbereich: Eine Gans läuft unten einmal quer durchs Bild */
.page-hero--gans { padding-bottom: calc(clamp(64px, 8vw, 110px) + 24px); }
.gans-walk {
  position: absolute;
  left: 0;
  bottom: clamp(6px, 1.4vw, 20px);
  z-index: 0;
  width: 100%;
  height: 64px;
  color: var(--brand-400);
  opacity: 0.5;
  pointer-events: none;
}
@keyframes gans-step { from { opacity: 0; } to { opacity: 1; } }

/* Adresskarte */
.move-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(22px, 3vw, 32px);
  padding-right: clamp(96px, 16vw, 170px);
  border-radius: var(--radius-l);
  background: linear-gradient(145deg, #f3fbff, #e2f3fc);
  border: 1px solid #c9e7f8;
  box-shadow: var(--shadow-card);
}
.move-card__art {
  position: absolute;
  z-index: -1;
  right: -6px;
  top: 50%;
  translate: 0 -50%;
  width: clamp(110px, 17vw, 168px);
  height: auto;
  color: var(--brand-500);
  opacity: 0.4;
}
.move-card__label { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-700); }
.prose .move-card address { margin-top: 10px; font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); }
.move-card__hint { margin-top: 12px; font-size: 0.98rem; color: var(--ink-3); }

/* Karte: Spur von Pulheim nach Monheim am Rhein */
.prose .route-map { margin-top: 0.9em; }
@media (min-width: 900px) {
  .prose .route-map { float: right; width: 320px; margin: 0.35em 0 1.2em 36px; }
}
@media (max-width: 899px) {
  .prose .route-map { max-width: 420px; margin-inline: auto; }
}
.prose--gans h2 { clear: both; }

/* Wissen-Übersicht: hervorgehobene Karte */
.article-card--featured {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
  min-height: 0;
}
.article-card--featured .article-card__body { display: flex; flex-direction: column; gap: 14px; flex: 1 1 56%; min-width: 0; align-self: stretch; }
.article-card__art { flex: 1 1 44%; max-width: 400px; }
.article-card__art svg { display: block; width: 100%; height: auto; color: var(--brand-500); }
.card-trail { opacity: 0.85; }
@media (max-width: 800px) {
  .article-card--featured { flex-direction: column; align-items: stretch; }
  .article-card__art { width: 100%; max-width: 300px; align-self: center; margin-top: -4px; }
}

/* Animationen nur, wenn Bewegung erwünscht ist */
@media (prefers-reduced-motion: no-preference) {
  .gans-walk use { animation: gans-step 0.5s var(--ease-out) both; }
  .gans-walk use:nth-of-type(1) { animation-delay: 0.350s; }
  .gans-walk use:nth-of-type(2) { animation-delay: 0.425s; }
  .gans-walk use:nth-of-type(3) { animation-delay: 0.500s; }
  .gans-walk use:nth-of-type(4) { animation-delay: 0.575s; }
  .gans-walk use:nth-of-type(5) { animation-delay: 0.650s; }
  .gans-walk use:nth-of-type(6) { animation-delay: 0.725s; }
  .gans-walk use:nth-of-type(7) { animation-delay: 0.800s; }
  .gans-walk use:nth-of-type(8) { animation-delay: 0.875s; }
  .gans-walk use:nth-of-type(9) { animation-delay: 0.950s; }
  .gans-walk use:nth-of-type(10) { animation-delay: 1.025s; }
  .gans-walk use:nth-of-type(11) { animation-delay: 1.100s; }
  .gans-walk use:nth-of-type(12) { animation-delay: 1.175s; }
  .gans-walk use:nth-of-type(13) { animation-delay: 1.250s; }
  .gans-walk use:nth-of-type(14) { animation-delay: 1.325s; }
  .gans-walk use:nth-of-type(15) { animation-delay: 1.400s; }
  .gans-walk use:nth-of-type(16) { animation-delay: 1.475s; }
  .gans-walk use:nth-of-type(17) { animation-delay: 1.550s; }
  .gans-walk use:nth-of-type(18) { animation-delay: 1.625s; }
  .gans-walk use:nth-of-type(19) { animation-delay: 1.700s; }
  .gans-walk use:nth-of-type(20) { animation-delay: 1.775s; }
  .gans-walk use:nth-of-type(21) { animation-delay: 1.850s; }
  .gans-walk use:nth-of-type(22) { animation-delay: 1.925s; }
  .gans-walk use:nth-of-type(23) { animation-delay: 2.000s; }
  .gans-walk use:nth-of-type(24) { animation-delay: 2.075s; }
  .gans-walk use:nth-of-type(25) { animation-delay: 2.150s; }
  .gans-walk use:nth-of-type(26) { animation-delay: 2.225s; }
  .gans-walk use:nth-of-type(27) { animation-delay: 2.300s; }
  .gans-walk use:nth-of-type(28) { animation-delay: 2.375s; }
  .gans-walk use:nth-of-type(29) { animation-delay: 2.450s; }
  .gans-walk use:nth-of-type(30) { animation-delay: 2.525s; }

  @supports (animation-timeline: view()) {
    .route-map { view-timeline-name: --route; }
    .route-map__steps use { animation: gans-step linear both; animation-timeline: --route; }
    .route-map__steps g:nth-of-type(1) use { animation-range: cover 12% cover 17%; }
    .route-map__steps g:nth-of-type(2) use { animation-range: cover 16% cover 21%; }
    .route-map__steps g:nth-of-type(3) use { animation-range: cover 20% cover 25%; }
    .route-map__steps g:nth-of-type(4) use { animation-range: cover 24% cover 29%; }
    .route-map__steps g:nth-of-type(5) use { animation-range: cover 28% cover 33%; }
    .route-map__steps g:nth-of-type(6) use { animation-range: cover 32% cover 37%; }
    .route-map__steps g:nth-of-type(7) use { animation-range: cover 36% cover 41%; }
    .route-map__steps g:nth-of-type(8) use { animation-range: cover 40% cover 45%; }
    .route-map__steps g:nth-of-type(9) use { animation-range: cover 44% cover 49%; }
  }
}