/* Block «Kacheln» — Figma «kacheln» 2214:3063 und «wir-bewirtschaften» 2214:3141 */

.gw-kacheln { padding-block: var(--sektion); background: var(--hellgrau); }
.gw-kacheln--gruen { background: var(--verlauf-gruen); }
/* Zwei graue Kacheln hintereinander (Beiträge nach Monaten) teilen sich den Abstand wie text.css */
.gw-kacheln--grau + .gw-kacheln--grau { padding-top: 0; }

/* Ausgeglichen statt Waise («… UND / KALENDER»); nur weiche Trennstellen aus dem Inhalt */
.gw-kacheln__titel { margin-bottom: var(--abstand-3xl); text-wrap: balance; hyphens: manual; }
.gw-kacheln--gruen .gw-kacheln__titel { color: var(--weiss); }

.gw-kacheln__raster { display: grid; gap: var(--abstand-lg); }
.gw-kacheln__raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gw-kacheln__raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 2 Spalten: Abstand 56 waagrecht und senkrecht (2121:3055), 3.25vw erreicht bei 1728 die 56 */
.gw-kacheln__raster--2 { gap: clamp(var(--abstand-lg), 3.25vw, var(--abstand-3xl)); }
/* Grüne Karten gestapelt: Plakette ragt 18 über die Karte, darüber trotzdem 24 Luft */
.gw-kacheln--gruen .gw-kacheln__raster { row-gap: calc(var(--abstand-lg) + 18px); }

.gw-kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--weiss);
}

/* Ohne Bild: hellgrüne Oberkante 7 px auf der Karte, Text 56 ab Kartenoberkante inkl. Strich,
   Text → Knöpfe mindestens 16 (2214:3144/3160/3170) */
.gw-kachel:not(.gw-kachel--bild) { border-top: 7px solid var(--hellgruen-500); }
.gw-kachel:not(.gw-kachel--bild) .gw-kachel__inhalt { padding-top: calc(var(--abstand-3xl) - 7px); gap: var(--abstand-s); }

/* Bild 240 hoch (2 Spalten 300, 2121:3057), Oberkante 7 px dunkelgrün */
.gw-kachel__bild {
  position: relative;
  height: 240px;
  border-top: 7px solid var(--dunkelgruen-500);
  background: var(--hellgrau);
}
.gw-kacheln__raster--2 .gw-kachel__bild { height: 300px; }
/* Nur das Kachelbild, nicht das Play-Icon (24 im Ring 56, 2214:3070) */
.gw-kachel__bild > img { width: 100%; height: 100%; object-fit: cover; }
/* Schnipsel deckt das Bild ab; bei «Bewegung reduzieren» bleibt das Bild sichtbar */
.gw-kachel__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .gw-kachel__video { display: none; } }

/* Ring mittig aufs Bild inkl. 7-px-Strich (y 92, 2214:3069) */
.gw-kachel__play {
  position: absolute;
  top: calc(50% - 3.5px);
  left: 50%;
  transform: translate(-50%, -50%);
}
.gw-kachel__play:hover { transform: translate(-50%, -50%) scale(1.08); }

/* Icon-Plakette: rechts 40, 25 über der Kante */
.gw-kachel__plakette {
  position: absolute;
  top: -25px;
  right: var(--abstand-xxl);
}

/* Inhalt: oben 32, seitlich und unten 40, Knöpfe unten bündig */
.gw-kachel__inhalt {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--abstand-xl);
  padding: var(--abstand-xl) var(--abstand-xxl) var(--abstand-xxl);
}
/* Inhalt fest hoch: 3 Spalten 510 (2214:3072), 2 Spalten 400 (2121:3061). Nur Karten mit Knöpfen
   (unten bündig) bzw. mit Einträgen (Landwirtschaft); reine Titelkarten bleiben ohne Leerfläche */
@media (min-width: 1341px) {
  .gw-kacheln__raster--3 .gw-kachel--bild:has(.gw-knoepfe) .gw-kachel__inhalt { min-height: 510px; }
}
@media (min-width: 701px) {
  .gw-kacheln__raster--2 .gw-kachel:has(.gw-knoepfe, .gw-zeilen) .gw-kachel__inhalt { min-height: 400px; }
}

.gw-kachel__text { display: flex; flex-direction: column; gap: var(--abstand-xl); }
.gw-kachel__text > p { margin: 0; }
.gw-kachel__kern { display: flex; flex-direction: column; gap: var(--abstand-md); }
.gw-kachel:not(.gw-kachel--bild) .gw-kachel__kern { gap: var(--abstand-s); }

/* Kartentitel ausgeglichen; getrennt werden nur lange Wörter, nie «WAN-GEN» oder «BRÜ-SCHALP» */
.gw-kachel .gw-h3 {
  text-wrap: balance;
  hyphenate-limit-chars: 10 5 7;
  -webkit-hyphenate-limit-before: 5;
  -webkit-hyphenate-limit-after: 7;
}

/* Lauftext Kachel: auf Rubrikkarten 20 / #4b5563 (schmal wie der übrige Lauftext bis 17), sonst 16 */
.gw-kachel__lauftext { margin: 0; font-size: var(--text-xs); line-height: 1.5; color: #111827; }
.gw-kachel:not(.gw-kachel--bild) .gw-kachel__lauftext { font-size: clamp(1.0625rem, 1rem + 0.3vw, var(--text-s)); color: #4b5563; }
/* Graue Kacheln ohne Bild (Beitrag ohne Foto) sind News-Karten, keine Rubrikkarten: wie die Bildkarten,
   nur ohne Bildfläche — dunkelgrüne Oberkante 7, Polster 32, Abstände 32/20, Lauftext 16 #111827 */
.gw-kacheln--grau .gw-kachel:not(.gw-kachel--bild) { border-top-color: var(--dunkelgruen-500); }
.gw-kacheln--grau .gw-kachel:not(.gw-kachel--bild) .gw-kachel__inhalt { padding-top: var(--abstand-xl); gap: var(--abstand-xl); }
.gw-kacheln--grau .gw-kachel:not(.gw-kachel--bild) .gw-kachel__kern { gap: var(--abstand-md); }
.gw-kacheln--grau .gw-kachel:not(.gw-kachel--bild) .gw-kachel__lauftext { font-size: var(--text-xs); color: #111827; }
/* Kurztext vor Einträgen: Trennlinie wie ein Eintrag, 16 / Linie / 16 (2121:3068) */
.gw-kachel--bild .gw-kachel__lauftext:has(+ .gw-zeilen) {
  padding-bottom: var(--abstand-s);
  border-bottom: 1px solid var(--hellgruen-500);
  margin-bottom: calc(var(--abstand-s) - var(--abstand-md));
}

/* Zeilen mit Trennlinie hellgrün 1 px, Abstand 16 */
.gw-zeilen {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-s);
  margin: 0;
  padding: 0;
  list-style: none;
}
.gw-zeilen li {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-xxs);
  padding-bottom: var(--abstand-s);
  border-bottom: 1px solid var(--hellgruen-500);
  font-size: var(--text-xs);
}
/* Titel Kachel: Inter Bold 16, 1.2, Sperrung 1 % */
.gw-zeilen strong { font-weight: 700; line-height: 1.2; letter-spacing: var(--sperrung-klein); color: var(--dunkelgruen-500); }
.gw-zeilen span { line-height: 1.5; color: #111827; }

/* 3 Spalten erst ab 1341, 2 ab 881: Erst dort passt die längste Figma-Beschriftung
   («Wohnungen und Gewerbe», Knopf 301) mit Figma-Polstern (Karte 40, Knopf 32) einzeilig */
@media (max-width: 1340px) {
  .gw-kacheln__raster--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Ungerade letzte Karte über beide Spalten statt einer halbleeren Zeile */
@media (min-width: 881px) and (max-width: 1340px) {
  .gw-kacheln__raster--3 > .gw-kachel:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 880px) {
  .gw-kacheln__raster--3 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  .gw-kacheln__raster--2 { grid-template-columns: minmax(0, 1fr); }
  .gw-kachel__inhalt { padding: var(--abstand-xl) var(--abstand-lg) var(--abstand-lg); }
  .gw-kachel:not(.gw-kachel--bild) .gw-kachel__inhalt { padding-top: calc(var(--abstand-xxl) - 7px); }
}
/* Handy: Knopfpolster 16, damit die Beschriftungen ab 360 einzeilig bleiben */
@media (max-width: 400px) {
  .gw-kachel .gw-button { padding-inline: var(--abstand-s); }
}

/* ------------------------------------------------------------------ Weitere Bilder (Feld «galerie») */

/* Das Kartenbild öffnet die Bilder mit der Maus (Schatten und Zoom aus bewegung.css wie bei jedem Kartenlink) */
.gw-kachel__bildlink { position: absolute; inset: 0; cursor: zoom-in; }

/* «n weitere Bilder →» unter dem Text: dunkelgrün statt hellgrün (Kontrast auf Weiss 5.0:1), Klickziel 44 */
.gw-kachel__galerie { margin: 0; }
.gw-kachel__galerie .gw-textlink {
  --gw-strich-unten: 10px;
  padding-block: 10px;
  margin-block: -10px;
  color: var(--dunkelgruen-500);
}
.gw-kachel__galerie .gw-textlink:hover { color: var(--dunkelgruen-700); }

/* Bild-Dialog (galerie.js) im Stil des Video-Dialogs (film.css): ganze Fläche, Schliessen oben rechts,
   Bild höchstens 1200 breit und so hoch wie Platz ist, darunter Zurück · Zähler · Weiter */
.gw-galerie {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: var(--abstand-3xl) var(--rand) var(--abstand-lg);
  border: 0;
  background: transparent;
  color: var(--weiss);
  overflow: hidden;
}
.gw-galerie[open] {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--abstand-lg);
}
/* Dichter als beim Video (0.85): Zähler und Knöpfe stehen auf dem Grund, die Seite soll nicht durchscheinen */
.gw-galerie::backdrop { background: rgba(0, 31, 53, 0.96); }
.gw-galerie [hidden] { display: none; }
/* Fokus auf dem Dialog selbst (nach Maus- oder Tippöffnung, galerie.js) ohne Rahmen; die Knöpfe zeigen ihn */
.gw-galerie:focus { outline: none; }

.gw-galerie__zu {
  position: absolute;
  top: 6px;
  right: max(6px, var(--rand) - 6px);
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: url("../../img/icons/schliessen.svg") center / 32px no-repeat;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Flex statt Grid: nur so löst max-height: 100% des Bildes gegen die Höhe der Zeile auf */
.gw-galerie__figur {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  height: 100%;
  margin: 0;
}
.gw-galerie__figur img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 1200px);
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.06);
}

.gw-galerie__leiste {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-lg);
}
.gw-galerie__zaehler {
  min-width: 4.5em;
  margin: 0;
  font-weight: 500;
  font-size: var(--text-xs);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* Weisser Kreis 56 wie der Abspielknopf (.gw-play), Pfeil 24 dunkelgrün */
.gw-galerie__knopf {
  display: grid;
  place-items: center;
  width: var(--abstand-3xl);
  height: var(--abstand-3xl);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--weiss);
  color: var(--dunkelgruen-500);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gw-galerie__knopf::before {
  content: "";
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: url("../../img/icons/pfeil-rechts.svg") center / contain no-repeat;
          mask: url("../../img/icons/pfeil-rechts.svg") center / contain no-repeat;
}
.gw-galerie__knopf--zurueck::before { rotate: 180deg; }
.gw-galerie__knopf:hover { color: var(--dunkelgruen-700); }

/* Niedrige Fenster (Handy quer): weniger Rand, kleinere Knöpfe */
@media (max-height: 500px) {
  .gw-galerie { padding-block: var(--abstand-xl) var(--abstand-xs); }
  .gw-galerie[open] { gap: var(--abstand-xs); }
  .gw-galerie__zu { top: 0; }
  .gw-galerie__knopf { width: 44px; height: 44px; }
}

/* Auftritt wie der Video-Dialog (bewegung.css, Abschnitt 6); jedes neue Bild blendet ein */
@media (prefers-reduced-motion: no-preference) {
  .gw-galerie,
  .gw-galerie::backdrop {
    transition: opacity 0.2s var(--gw-ein, ease-in);
    transition:
      opacity 0.2s var(--gw-ein, ease-in),
      overlay 0.2s var(--gw-ein, ease-in) allow-discrete,
      display 0.2s var(--gw-ein, ease-in) allow-discrete;
  }
  .gw-galerie:not([open]),
  .gw-galerie:not([open])::backdrop { opacity: 0; }
  .gw-galerie[open],
  .gw-galerie[open]::backdrop {
    transition-duration: 0.45s;
    transition-timing-function: var(--gw-aus, ease-out);
  }
  @starting-style {
    .gw-galerie[open],
    .gw-galerie[open]::backdrop { opacity: 0; }
  }

  .gw-galerie__figur img { animation: gw-galerie-bild 0.35s var(--gw-aus, ease-out) both; }
  @keyframes gw-galerie-bild { from { opacity: 0; } }
}