/* graswachstum.ch: Ergaenzungen zum Typhoon-Theme (Startseite, Cookie-Hinweis, Beitragsvorschau) */

/* Knoepfe im Bildkopf: umbrechen statt seitlich aus dem Bild laufen; am Handy 2 x 2 */
.hero-knoepfe { display: flex; flex-wrap: wrap; gap: .75rem 1rem; }
@media (min-width: 640px) { .hero-knoepfe { width: max-content; max-width: calc(100vw - 4rem); } }
@media (max-width: 639px) {
  .hero-knoepfe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; padding-left: 0 !important; padding-right: 0 !important; width: min(22rem, calc(100vw - 2.5rem)); }
  .hero-knoepfe a { padding: .65rem .4rem !important; font-size: .95rem !important; white-space: nowrap; }
}

/* Cookie-Hinweis: kompakte Leiste statt halber Bildschirm */
.cc-window { font-size: .85rem !important; line-height: 1.35 !important; }
.cc-window.cc-banner { padding: .55rem 1rem !important; }
.cc-window .cc-btn { font-size: .85rem !important; padding: .35rem .9rem !important; min-width: 0 !important; }
@media (max-width: 640px) {
  .cc-window.cc-floating { flex-direction: row !important; align-items: center !important; gap: .6rem; padding: .6rem .8rem !important; max-width: none !important; left: .5rem !important; right: .5rem !important; bottom: .5rem !important; border-radius: .5rem; }
  .cc-window.cc-floating .cc-message { margin: 0 !important; }
  .cc-window.cc-banner { flex-direction: row !important; align-items: center !important; gap: .6rem; }
  .cc-window .cc-message { margin: 0 !important; font-size: .78rem !important; }
  .cc-window .cc-compliance { flex: 0 0 auto !important; }
}

/* Beitragsvorschau: Ueberschriften im Lead nicht groesser als der Titel */
.blog-item .prose h1, .blog-item .prose h2, .blog-item .prose h3 { font-size: 1rem !important; line-height: 1.35 !important; margin: .5rem 0 .3rem !important; font-weight: 600 !important; }

/* Startseite: Kacheln «Graswachstum aktuell» und «Nächste Anlässe» */
.gw-aktuell { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1rem; margin: 1rem 0 1.5rem; }
.gw-kachel { display: flex; flex-direction: column; gap: .5rem; background: #fff; border-radius: .5rem; box-shadow: 0 4px 14px rgba(0, 0, 0, .08); padding: .9rem 1rem; color: inherit; text-decoration: none; min-width: 0; }
.gw-kachel-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.gw-kachel-titel { font-weight: 700; font-size: 1.05rem; }
.gw-kachel-kw { font-size: .85rem; color: #2f6b62; font-weight: 600; white-space: nowrap; }
.gw-kachel--karte img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 45%; border-radius: .35rem; background: #f4f6f5; }
.gw-kachel--karte:hover .gw-kachel-fuss { text-decoration: underline; }
.gw-kachel-fuss { margin-top: auto; font-size: .9rem; font-weight: 600; color: #2f6b62; text-decoration: none; }
.gw-anlaesse { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.gw-anlaesse li { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: .7rem; align-items: center; }
.gw-blatt { display: grid; justify-items: center; line-height: 1.1; padding: .3rem 0; border-radius: .4rem; background: rgba(47, 107, 98, .1); color: #2f6b62; font-size: .72rem; }
.gw-blatt b { font-size: 1.25rem; }
.gw-anlaesse a { color: inherit; text-decoration: none; display: grid; }
.gw-anlaesse a:hover .gw-anlass-titel { text-decoration: underline; }
.gw-anlass-titel { font-weight: 600; line-height: 1.3; }
.gw-anlass-ort { font-size: .82rem; color: #666; }
.gw-leer { color: #666; font-size: .9rem; }
.dark .gw-kachel { background: rgba(55, 65, 81, .4); }
@media (max-width: 767px) { .gw-aktuell { grid-template-columns: 1fr; } }

/* Galerie in Beitraegen (post.html.twig, Kopf gallery.items, Platzhalter [galerie]) */
.post-galerie { margin: 1rem 0 1.5rem; }
.post-galerie-raster { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)) !important; gap: .6rem !important; }
.post-galerie-raster > div:not(.hidden) { display: block !important; border-radius: .4rem; overflow: hidden; background: #f3f5f4; box-shadow: 0 1px 4px rgba(0, 0, 0, .1); }
.post-galerie-raster a { display: block; }
.post-galerie-raster img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin: 0 !important; }
.post-galerie--ganz .post-galerie-raster img { aspect-ratio: 3 / 4; object-fit: contain; background: #fff; }   /* ohne Zuschnitt, z.B. Flyer-Seiten */
.magic-content .post-galerie-raster img { max-width: none; }