/* Dorfleben: seitenspezifische Regeln (Gestaltungswelle 2026-09).
   Nutzt nur die Tokens aus styles.css; Bausteine (.hero-page, .card,
   .list-rows, .button) kommen von dort. */

/* Hero: bis zur zweispaltigen Anordnung flacheres Foto, damit die Termine im ersten Bildschirm beginnen */
@media (max-width: 1023px) {
  .page-dorfleben .hero-photo img {
    aspect-ratio: 16 / 9;
  }
}

/* ---- Dorf-Termine als Listenzeilen ---- */
.dl-termine {
  border-top: 1px solid var(--line);
  max-width: 52rem;
}
.dl-termin {
  align-items: flex-start;
  padding: var(--sp-3) 0;
}
.dl-termin-main {
  flex: 1 1 320px;
  min-width: 0;
  display: grid;
  gap: var(--sp-2);
}
.dl-termin-main > * {
  margin: 0;
}
.dl-termin-when {
  font-size: var(--fs-md);
  color: var(--muted);
}
.dl-termin-when strong {
  color: var(--ink);
  font-weight: var(--fw-bold);
}
.dl-termin-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: 0;
  color: var(--ink);
}
.dl-termin-where,
.dl-termin-desc {
  font-size: var(--fs-md);
  line-height: var(--lh-copy);
  color: var(--muted);
  max-width: 60ch;
}
.dl-termin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp-5);
  font-size: var(--fs-md);
}
.dl-termin-actions a {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
}
.dl-termine-source {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-copy);
  color: var(--ink-soft);
  max-width: 60ch;
}

/* ---- WhatsApp-Block (ohne Karte, liegt direkt auf dem Sektionsgrund) ---- */
.dl-wa {
  display: grid;
  gap: var(--sp-4);
  justify-items: start;
  max-width: 40rem;
}
.dl-wa p {
  margin: 0;
  max-width: 60ch;
}

/* ---- Neuigkeiten (nur mit Eintraegen) ---- */
.dl-news {
  display: grid;
  gap: var(--sp-4);
}
@media (min-width: 768px) {
  .dl-news {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.dl-news-item h3 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}
.dl-news-item p {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-md);
  line-height: var(--lh-copy);
}
.dl-news-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

/* ---- Warum der Laden alle braucht ---- */
.dl-warum {
  display: grid;
  gap: var(--sp-5);
  margin: 0 0 var(--sp-6);
}
@media (min-width: 768px) {
  .dl-warum {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-6);
  }
}
.dl-warum-item h3 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}
.dl-warum-item p,
.dl-warum-item ul {
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-copy);
  color: var(--muted);
}
.dl-warum-item ul {
  padding-left: 1.2em;
}
.dl-warum-item li + li {
  margin-top: var(--sp-1);
}

/* Kennzahlen: nur echte Zahlen, ohne Boxen, ohne Farbverlauf */
.dl-zahlen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  margin: 0 0 var(--sp-5);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.dl-zahlen > div {
  display: grid;
  gap: var(--sp-1);
}
.dl-zahlen dt {
  order: 2;
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  color: var(--muted);
}
.dl-zahlen dd {
  order: 1;
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.dl-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
}
.dl-cta p {
  margin: 0;
  font-weight: var(--fw-medium);
  color: var(--ink);
}