/* Block «Karten in Gruppen» — Figma «kacheln-team», «kacheln-alp», «kacheln-mietobjekte», «kacheln-waermeverbund» */

.gw-gruppen { padding-block: var(--sektion); background: var(--hellgrau); }
.gw-gruppen--gruen { background: var(--verlauf-gruen); }
/* Wärmeverbund «Vorteile» 2204:6731: Verlauf 114.42° statt 120° des Tokens (Startseite 2214:3141 bleibt 120°) */
.gw-gruppen--gruen.gw-gruppen--info { background: linear-gradient(114.42deg, var(--hellgruen-500) 0%, var(--dunkelgruen-500) 81.712%); }
/* Alpbewirtschaftung 2134:5990: Verlauf 123.35° */
.gw-gruppen--gruen.gw-gruppen--personen { background: linear-gradient(123.35deg, var(--hellgruen-500) 0%, var(--dunkelgruen-500) 81.712%); }
/* Einfarbig dunkelgrün statt Verlauf (Anschluss & Kosten «Ihre Vorteile», Célines Feedback 21.10.) */
.gw-gruppen.gw-gruppen--gruen.gw-gruppen--dunkel { background: var(--dunkelgruen-500); }

/* Trennung erst ab 15 Zeichen, Rest mindestens 11: «Liegenschaf-/ten», «…kom-/mission» und
   «Genossenge-/schlechter» nicht, «Genossen-/geschlechter» schon (320–392 px);
   balance: keine Waise («Fernwärme bietet viele / Vorteile») */
.gw-gruppen__titel {
  margin-bottom: var(--abstand-3xl);
  hyphenate-limit-chars: 15 6 11;
  -webkit-hyphenate-limit-after: 11;
  text-wrap: balance;
}
.gw-gruppen--gruen .gw-gruppen__titel { color: var(--weiss); }

.gw-gruppen__liste { display: flex; flex-direction: column; gap: var(--abstand-7xl); }
.gw-gruppe { display: flex; flex-direction: column; gap: var(--abstand-xxl); }

/* Zwischentitel h3 mit auslaufender Linie hellgrün 1 px, Abstand 24; balance gegen Waisen («Liegenschaften / zu vermieten»);
   span min-width 0: ohne Silbentrennung (WebKit) bricht ein langes Wort in der Box, statt abgeschnitten zu werden */
.gw-gruppe__titel { display: flex; align-items: center; gap: var(--abstand-lg); text-wrap: balance; }
.gw-gruppe__titel > span { min-width: 0; }
.gw-gruppe__titel::after { content: ""; flex: 1; height: 1px; background: var(--hellgruen-500); }
.gw-gruppen--gruen .gw-gruppe__titel { color: var(--weiss); }

.gw-gruppe__karten { display: flex; flex-wrap: wrap; gap: var(--abstand-lg); }
.gw-gruppen--breit .gw-gruppe__karten,
.gw-gruppen--info .gw-gruppe__karten { flex-direction: column; gap: var(--abstand-xxl); }
/* Genossenrat 2204:5833: Ratskarten mit Zeilenabstand 40, GPK und Team 24 */
.gw-gruppen--personen .gw-gruppe:first-child .gw-gruppe__karten { row-gap: var(--abstand-xxl); }
/* Ratskarten 2204:5851: Text → Link 25 statt 32, sonst wird die Karte bei zweizeiliger Funktion 298 statt 290 hoch */
@media (min-width: 1101px) {
  .gw-gruppen--personen .gw-gruppe:first-child .gw-karte__inhalt:has(> .gw-textlink) { gap: var(--abstand-lg); }
}

/* Karte: weiss, Oberkante 7 px über Bild und Inhalt */
.gw-karte {
  --kante: var(--dunkelgruen-500);
  display: flex;
  flex: 1 1 300px;
  min-width: 300px;
  background: var(--weiss);
}
.gw-gruppen--gruen .gw-karte { --kante: var(--hellgruen-500); }
.gw-gruppen--breit .gw-karte,
.gw-gruppen--info .gw-karte { flex-basis: auto; width: 100%; }
/* personen: zwei je Zeile, 2 × 507 mit Abstand 24 (2128:5688, 2204:5833) */
.gw-gruppen--personen .gw-karte { flex: 0 0 calc((100% - var(--abstand-lg)) / 2); min-width: 0; }

.gw-karte__bild { flex: none; border-top: 7px solid var(--kante); background: var(--hellgrau); }
.gw-karte__bild img { width: 100%; height: 100%; object-fit: cover; }
.gw-karte__bild--leer { background: #cfcfcf; }

/* personen: Bild 217 breit, füllt die Kartenhöhe (290, Alp mit Button 340: 2204:5835, 2134:6261) */
.gw-gruppen--personen .gw-karte__bild { position: relative; width: 217px; min-height: 290px; }
.gw-gruppen--personen .gw-karte__bild img { position: absolute; inset: 0; }
.gw-gruppen--personen .gw-karte:has(.gw-button) .gw-karte__bild { min-height: 340px; }
/* breit: Bild 506, volle Kartenhöhe; das Foto bestimmt die Höhe nicht mit (2143:7632) */
.gw-gruppen--breit .gw-karte__bild { position: relative; width: 506px; align-self: stretch; }
.gw-gruppen--breit .gw-karte__bild img { position: absolute; inset: 0; }
/* info, eingepasst: Bildfläche 638 auf #edf3e3, Bild ganz sichtbar; ein hohes Bild (Netzplan) lässt die Spalte wachsen.
   Breite höchstens die Hälfte der Karte, sonst bleibt bei 1001–1420 zu wenig Platz für den Text (1440 und 1728 bleiben 638); ≤ 1000 gilt 100 % unten */
.gw-gruppen--info .gw-karte { border-top: 7px solid var(--kante); }
.gw-gruppen--info .gw-karte__bild { display: grid; place-items: center; width: min(638px, 50%); border-top: 0; background: #edf3e3; }
.gw-gruppen--info .gw-karte__bild img { height: auto; object-fit: contain; }
.gw-karte__bildlink { display: block; width: 100%; cursor: zoom-in; }
/* info, füllend: Foto vollflächig auf der ganzen Spaltenhöhe (2234:10862) */
.gw-gruppen--info .gw-karte--fuellen .gw-karte__bild { display: block; position: relative; background: none; }
.gw-gruppen--info .gw-karte--fuellen .gw-karte__bild img { position: absolute; inset: 0; height: 100%; object-fit: cover; }

.gw-karte__inhalt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--abstand-xl);
  padding: var(--abstand-xl) var(--abstand-xxl) var(--abstand-xxl);
  border-top: 7px solid var(--kante);
}
.gw-gruppen--breit .gw-karte__inhalt { justify-content: flex-start; padding: var(--abstand-xxl); }
.gw-gruppen--info .gw-karte__inhalt { justify-content: flex-start; padding: var(--abstand-xxl); border-top: 0; }
/* personen mit Textlink: unten 16, den Rest bringt das Polster des Links (2128:5536) */
.gw-gruppen--personen .gw-karte__inhalt:has(> .gw-textlink) { padding-bottom: var(--abstand-s); }

.gw-karte__text { display: flex; flex-direction: column; gap: var(--abstand-xl); width: 100%; }
.gw-karte__text > p { margin: 0; }
.gw-karte__kern { display: flex; flex-direction: column; gap: var(--abstand-lg); }
/* Vorteile: Titel → Liste 32 (2204:6745) */
.gw-karte__kern:has(> .gw-zeilen--plus) { gap: var(--abstand-xl); }
/* Kartentitel an Wortgrenzen umbrechen, sobald die Spalte das längste Wort fasst (ab 328; Firefox trennt sonst «Tiefgaragenplät-/ze», «un-/sere Wärmever-/sorgung»);
   darunter nur lange Wörter trennen (sonst «Etap-/pe», «Woh-/nen») */
.gw-gruppen--breit .gw-karte .gw-h3,
.gw-gruppen--info .gw-karte .gw-h3 { hyphenate-limit-chars: 10 4 4; }
@media (min-width: 328px) {
  .gw-gruppen--breit .gw-karte .gw-h3,
  .gw-gruppen--info .gw-karte .gw-h3 { hyphens: manual; }
}

.gw-karte__lauftext { font-size: var(--text-xs); line-height: 1.5; }
.gw-karte__lauftext > * { margin: 0; }
.gw-karte__lauftext > * + * { margin-top: 1.5em; }

/* personen: Name → Funktion 4, Trennlinie hellgrün 16 darunter (Item Row 2128:5544, 2204:5845) */
.gw-gruppen--personen .gw-karte__kern { gap: var(--abstand-xxs); padding-bottom: var(--abstand-s); border-bottom: 1px solid var(--hellgruen-500); }
/* Name: Titel Kachel, Inter Bold 16, 1.2, Sperrung 1 %, normale Schreibung (2204:5847); Namen nie trennen («Rogenmo-/ser» in Firefox) */
.gw-gruppen--personen .gw-karte__kern > .gw-h3 {
  font-family: var(--schrift-text);
  font-weight: 700;
  font-size: var(--text-xs);
  line-height: 1.2;
  letter-spacing: var(--sperrung-klein);
  text-transform: none;
  hyphens: manual;
}
/* Funktion #111827 wie .gw-zeilen span; lange Wörter brechen statt überzulaufen */
.gw-gruppen--personen .gw-karte__lauftext { color: #111827; overflow-wrap: break-word; }

/* Namen in Personenkarten schwarz statt grün */
.gw-gruppen--personen .gw-zeilen strong { color: var(--schwarz); }

/* Textlink in Karten: hellgrün 600, Pfeil 24, Abstand 10, Polster 16 → 56 hoch (2128:5633) */
.gw-karte__inhalt > .gw-textlink {
  gap: 10px;
  padding-block: var(--abstand-s);
  line-height: 1.5;
  letter-spacing: var(--sperrung-klein);
  color: var(--hellgruen-600);
}
.gw-karte__inhalt > .gw-textlink:hover { color: var(--dunkelgruen-500); }
.gw-karte__inhalt > .gw-textlink::after { width: 24px; height: 24px; }

/* Vorteile: Plus 20 statt Linie oben, Text bei 36, Linie unten bleibt (2204:7160) */
.gw-zeilen--plus li { position: relative; padding-left: 36px; }
.gw-zeilen--plus li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  background: var(--hellgruen-500);
  -webkit-mask: url("../../img/icons/plus.svg") center / contain no-repeat;
          mask: url("../../img/icons/plus.svg") center / contain no-repeat;
}
/* Lauftext Vorteile schwarz (2204:7149), sonst #111827 aus kacheln.css */
.gw-gruppen .gw-zeilen--plus span { color: var(--schwarz); }

/* personen: ab hier eine Karte je Zeile, sonst wird die Textspalte zu schmal */
@media (max-width: 1100px) {
  .gw-gruppen--personen .gw-karte { flex-basis: 100%; }
  .gw-gruppen--personen .gw-gruppe:first-child .gw-gruppe__karten { row-gap: var(--abstand-lg); }
}
/* personen 821–1100: weiter zwei je Zeile mit schmalerem Bild, sonst steht eine 990 breite Karte halb leer */
@media (min-width: 821px) and (max-width: 1100px) {
  .gw-gruppen--personen .gw-karte { flex-basis: calc((100% - var(--abstand-lg)) / 2); }
  .gw-gruppen--personen .gw-karte__bild { width: 38%; }
  .gw-gruppen--personen .gw-karte__inhalt { padding: var(--abstand-xl) var(--abstand-lg) var(--abstand-lg); }
  .gw-gruppen--personen .gw-karte__inhalt:has(> .gw-textlink) { padding-bottom: var(--abstand-xs); }
  .gw-gruppen--personen .gw-karte__inhalt .gw-button { max-width: 100%; padding-inline: var(--abstand-s); }
}

@media (max-width: 1000px) {
  .gw-gruppen--breit .gw-karte,
  .gw-gruppen--info .gw-karte { flex-direction: column; }
  .gw-gruppen--breit .gw-karte__bild,
  .gw-gruppen--info .gw-karte__bild { width: 100%; aspect-ratio: 16 / 9; }
  .gw-gruppen--info .gw-karte__bild { aspect-ratio: auto; padding: var(--abstand-lg); }
  .gw-gruppen--info .gw-karte--fuellen .gw-karte__bild { aspect-ratio: 16 / 9; padding: 0; }
  .gw-gruppen--breit .gw-karte__inhalt { border-top: 0; }
}

@media (max-width: 640px) {
  .gw-karte { min-width: 0; flex-basis: 100%; }
  /* Textspalte mindestens 152 (Polster 2 × 24), damit «E-Mail senden →» einzeilig bleibt; das Bild schrumpft stufenlos */
  .gw-gruppen--personen .gw-karte__bild { width: min(38%, 100% - 200px); height: auto; min-height: 220px; }
  .gw-gruppen--personen .gw-karte:has(.gw-button) .gw-karte__bild { min-height: 220px; }
  .gw-karte__inhalt,
  .gw-gruppen--breit .gw-karte__inhalt,
  .gw-gruppen--info .gw-karte__inhalt { padding: var(--abstand-lg); }
  .gw-gruppen--personen .gw-karte__inhalt:has(> .gw-textlink) { padding-bottom: var(--abstand-xs); }
  .gw-karte__inhalt .gw-button { max-width: 100%; padding-inline: var(--abstand-s); }
  /* Linie immer in voller Breite unter dem Titel: kein Stummel, alle Zwischentitel einer Seite gleich */
  .gw-gruppe__titel { flex-wrap: wrap; }
  .gw-gruppe__titel::after { flex-basis: 100%; }
}