/* Welle 7 auf dorfleben.php: Dorfbrett-Zettel zum Anfassen, Himmel im Seitenkopf (GSAP, assets/js/dorfleben-szenen.js).
   Ohne Skript, mit Weniger Bewegung und in Leichter Sprache steht alles ruhig und lesbar da. */

.dl-dorfbrett {
  margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
}
.dl-dorfbrett-titel {
  display: inline-block;
  margin: 0 0 1.4rem;
  padding: .45rem .9rem .5rem;
  border-radius: 3px;
  background: var(--dl-papier);
  color: var(--dl-tinte);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  rotate: -1.2deg;
  box-shadow: 0 8px 14px -8px rgba(0, 0, 0, .6);
}
.dl-dorfbrett-liste {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dl-zz {
  position: relative;
  min-width: 0;
  padding: 1.6rem 1.25rem 1.2rem;
  background: var(--dl-papier);
  color: var(--dl-tinte);
  border-radius: 3px;
  rotate: -1.4deg;
  box-shadow: 0 12px 20px -10px rgba(0, 0, 0, .6);
  touch-action: pan-y;
  cursor: grab;
}
.dl-zz--1 { rotate: 1.2deg; background: color-mix(in srgb, var(--accent-3) 38%, var(--dl-papier)); }
.dl-zz--2 { rotate: -.6deg; background: color-mix(in srgb, var(--accent-2) 14%, var(--dl-papier)); }
.dl-zz-nadel {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: -.55rem;
  width: 1.2rem;
  height: 1.2rem;
  margin-left: -.6rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .75) 0 12%, transparent 30%), var(--accent-fill);
  box-shadow: 0 3px 4px rgba(0, 0, 0, .4);
}
.dl-zz--1 .dl-zz-nadel { background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .7) 0 12%, transparent 30%), #1b6f33; }
.dl-zz-kat {
  display: inline-block;
  margin: 0 0 .5rem;
  padding: .1rem .55rem;
  border-radius: 99px;
  background: var(--dl-tinte);
  color: var(--dl-papier);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: 1.5;
}
.dl-zz-titel {
  margin: 0 0 .4rem;
  padding-right: 3rem;
  font-family: var(--font-display);
  font-size: var(--fs-xl, 1.35rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--dl-tinte);
}
.dl-zz-text {
  margin: 0 0 .6rem;
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  color: var(--dl-tinte-2);
}
.dl-zz-link { margin: 0; }
.page-dorfleben .dl-zz-link a {
  color: var(--dl-link);
  font-weight: var(--fw-bold);
}
.dl-zz-stups {
  position: absolute;
  right: .5rem;
  top: .6rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 2px solid var(--dl-tinte);
  border-radius: 50%;
  background: var(--dl-papier);
  color: var(--dl-tinte);
  cursor: pointer;
}
.dl-zz-stups:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.dl-zz-tipp {
  display: inline-block;
  margin: 1.1rem 0 0;
  padding: .3rem .7rem;
  border-radius: 3px;
  background: var(--dl-papier);
  color: var(--dl-tinte-2);
  font-size: var(--fs-xs);
  box-shadow: 0 6px 10px -6px rgba(0, 0, 0, .55);
}
/* Fotos, Aushang und Neuigkeiten lassen sich ebenfalls anstupsen: senkrecht wischen scrollt die Seite */
.dl-brett .dl-foto,
.dl-brett .dl-aushang,
.dl-brett .dl-news-item { touch-action: pan-y; }
@media (min-width: 700px) {
  .dl-dorfbrett-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.5rem; align-items: start; }
}
html[data-bewegung="ruhig"] .page-dorfleben .dl-zz-tipp,
html[data-leichte-sprache="on"] .page-dorfleben .dl-zz-tipp,
html[data-bewegung="ruhig"] .page-dorfleben .dl-zz-stups,
html[data-leichte-sprache="on"] .page-dorfleben .dl-zz-stups { display: none; }
html[data-bewegung="ruhig"] .page-dorfleben .dl-zz,
html[data-leichte-sprache="on"] .page-dorfleben .dl-zz { cursor: auto; }
@media (prefers-reduced-motion: reduce) {
  .page-dorfleben .dl-zz-tipp, .page-dorfleben .dl-zz-stups { display: none; }
  .page-dorfleben .dl-zz { cursor: auto; }
}

/* Himmel im Seitenkopf: Blaetter, Bluetenblaetter, Flocken, Schmetterlinge im oberen Teil des Fotos */
.dl-himmel {
  position: absolute;
  left: 0;
  right: 0;
  top: 3.25rem;
  height: 48%;
  overflow: hidden;
  pointer-events: none;
}
.dl-himmel-teil {
  position: absolute;
  top: 0;
  opacity: 0;
  will-change: transform;
}
.dl-himmel-teil--falter { opacity: 1; }
html[data-leichte-sprache="on"] .dl-himmel { display: none; }