/* ═══════════════════════════════════════════════════════════
   Pinnwand mit Polaroids – Beflockungsbeispiele
   Die Bilder haben unterschiedliche Seitenverhaeltnisse. Statt sie
   zu beschneiden (was Namen abschneiden wuerde), behalten sie ihre
   Hoehe: feste Breite, Spaltenumbruch. Wie echte Fotos an der Wand.
   ═══════════════════════════════════════════════════════════ */

.pinnwand {
  position:relative;
  background:
    /* feines Korkraster */
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.035) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 70%, rgba(0,0,0,.20) 0 1px, transparent 1px),
    linear-gradient(160deg, #1b2a0e 0%, #111a08 55%, #16220b 100%);
  background-size:7px 7px, 11px 11px, 100% 100%;
  padding:3.5rem 0 4rem;
  overflow:hidden;
}
/* Rahmen wie eine echte Wandtafel */
.pinnwand::before {
  content:''; position:absolute; inset:14px; pointer-events:none;
  border:1px solid rgba(255,255,255,.07);
}

.pinnwand-inner { max-width:1400px; margin:0 auto; padding:0 2rem; position:relative; z-index:2; }
.pinnwand .label { color:var(--gruen); }
.pinnwand .label::before { background:var(--gruen); }
.pinnwand .titel { color:#fff; }
.pinnwand .titel em { color:var(--gruen); }
.pinnwand .einleitung { color:rgba(255,255,255,.62); }


/* Spaltenumbruch statt Raster – so behaelt jedes Bild seine Hoehe */
.polaroids { columns:5 200px; column-gap:1.6rem; }
.polaroid {
  break-inside:avoid; margin:0 0 1.9rem; display:block; text-decoration:none;
  background:#fbfaf6; padding:.7rem .7rem 0; border-radius:2px;
  box-shadow:0 6px 18px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.3);
  transition:transform .25s ease, box-shadow .25s ease;
  position:relative;
}
.polaroid img { display:block; width:100%; height:auto; background:#e9e7e0; }
.polaroid figcaption { padding:.55rem .15rem .75rem; text-align:center; }
.polaroid .p-verein {
  font-family:'Caveat', 'Barlow', cursive; font-weight:600; font-size:1.18rem;
  color:#2b2b26; line-height:1.15;
}
.polaroid .p-detail { font-size:.72rem; letter-spacing:.06em; color:#8d8b82; margin-top:.1rem; }

/* Pinnadel */
.polaroid::before {
  content:''; position:absolute; top:-7px; left:50%; width:14px; height:14px;
  border-radius:50%; transform:translateX(-50%);
  background:radial-gradient(circle at 34% 32%, #ff6b5e 0 38%, #c8241a 62%, #8c120c 100%);
  box-shadow:0 2px 4px rgba(0,0,0,.5);
  z-index:3;
}
.polaroid:nth-child(3n)::before   { background:radial-gradient(circle at 34% 32%, #a8d85e 0 38%, #6a9a1a 62%, #3d5c0c 100%); }
.polaroid:nth-child(5n)::before   { background:radial-gradient(circle at 34% 32%, #ffffff 0 38%, #cfcfc6 62%, #8f8f86 100%); }

/* leichte Schraeglage, damit es nicht nach Tabelle aussieht */
.polaroid:nth-child(4n+1) { --dreh:-1.4deg; }
.polaroid:nth-child(4n+2) { --dreh:.9deg; }
.polaroid:nth-child(4n+3) { --dreh:-.5deg; }
.polaroid:nth-child(4n)   { --dreh:1.6deg; }
.polaroid { transform:rotate(var(--dreh, 0deg)); }

/* Einblenden beim Scrollen. Der Ausgangszustand wird per JavaScript
   gesetzt, nicht im Stylesheet – ohne JavaScript bleibt alles sichtbar,
   statt unsichtbar auf einen Beobachter zu warten. */
.polaroid.aufblenden { opacity:0; transform:rotate(var(--dreh, 0deg)) translateY(22px); }
.polaroid.sichtbar   { opacity:1; transform:rotate(var(--dreh, 0deg)); transition:opacity .55s ease, transform .55s ease; }

/* Kein Hover-Effekt, der nach Schaltflaeche aussieht – die Bilder sind
   Anschauungsmaterial, nicht anklickbar. */

.pinnwand-mehr { text-align:center; margin-top:1rem; }
.pinnwand-zahl { color:rgba(255,255,255,.45); font-size:.88rem; margin:1.8rem 0 1.4rem; }
.pinnwand-mehr { text-align:center; margin-top:.6rem; }
.pinnwand-mehr.fertig { display:none; }
.pinnwand-mehr button {
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.95rem;
  letter-spacing:.11em; text-transform:uppercase; cursor:pointer;
  background:transparent; color:#fff; border:2px solid rgba(255,255,255,.3);
  border-radius:2px; padding:.8rem 2.2rem; transition:border-color .2s, background .2s;
}
.pinnwand-mehr button:hover { border-color:var(--gruen); background:rgba(135,179,52,.16); }
.pinnwand-mehr button:focus-visible { outline:3px solid var(--gruen); outline-offset:3px; }


@media (prefers-reduced-motion: reduce) {
  .polaroid, .polaroid:hover { transform:none !important; transition:none; }
  .polaroid.aufblenden { opacity:1 !important; }
}
@media (max-width:1000px) {
  .polaroids { columns:2 140px; column-gap:1rem; }
  .polaroid { margin-bottom:1.3rem; }
  .pinnwand-inner { padding:0 1.25rem; }
  .pinnwand { padding:2.5rem 0 3rem; }
}