/* Gruppen — Figma „💼 Ministries" (/gruppen, Node 2001:26530) und „📋 Ministry Single"
   (/gruppen/[slug], Node 2004:24861). Klassen-Präfix groups-. */

/* Header V2 liegt auf einem weißen 106px-Streifen, darunter beginnt der dunkle Hero */
.groups-page { padding-top: 106px; }

/* ── Hero Section ─────────────────────────────────────── */
.groups-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Bezugsgröße für den Hintergrund (100cqw = Section-Breite). Nicht 100vw: vw ignoriert den
     Seiten-Zoom (styles/skalierung.css) – bei Zoom 0,8 war die Fläche nur 80 % breit (weiße Ränder),
     bei Zoom 1,333 um ein Drittel zu breit und die Textur entsprechend vergrößert. */
  container-type: inline-size;
  padding-top: clamp(64px, 8.33vw, 120px);
}
.groups-hero--single { padding-top: clamp(64px, 9.72vw, 140px); }
.groups-hero__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  color: var(--f-n100);
  margin-bottom: clamp(40px, 5vw, 72px);
}
.groups-hero--single .groups-hero__top { margin-bottom: clamp(40px, 4.86vw, 70px); }
.groups-hero__text { display: flex; flex-direction: column; max-width: 1074px; }
.groups-hero__text .f-p { max-width: 624px; }
.groups-hero__text--single { gap: 6px; max-width: 856px; }
.groups-hero__text--single .f-p { max-width: 656px; }
.groups-hero__top > .f-btn { flex: none; }

/* Title Wrapper: Handschrift größer (Caveat Bold 68/76) über Display 1 */
.groups-title .f-script {
  font-size: clamp(40px, 4.72vw, 68px);
  line-height: 1.1176;
}
.groups-hero .groups-title .f-d1 { max-width: 897px; text-wrap: wrap; }
/* Figma-Title-Wrapper hat über der Handschrift mehr Luft (Übersicht 16px, Einzelseite 32px) */
.groups-title { padding-top: clamp(0px, 1.11vw, 16px); }
.groups-hero__text--single .groups-title { padding-top: clamp(0px, 2.2vw, 31.7px); }

/* Dunkler Hintergrund (Neutral 800) mit Grunge-Textur. Er endet in Figma mitten in der
   Karten-/Bildreihe: Übersicht 226 von 555 px Kartenhöhe, Einzelseite 294,5 von 739 px. */
.groups-hero__grid,
.groups-single__media { position: relative; }
.groups-hero__bg {
  position: absolute;
  z-index: -1;
  left: 50%;
  width: 100cqw;
  transform: translateX(-50%);
  bottom: 59.27%;
  height: 1600px;
  background: var(--f-n800);
  overflow: hidden;
  pointer-events: none;
}
.groups-single__media .groups-hero__bg { bottom: 60.14%; }
/* Figma-Frame „Background" (1440 × 790) sitzt unten bündig; darüber reicht die Fläche nur als
   Neutral 800 weiter (verdeckt durch overflow der Section). Deckkraft nach Sichtvergleich mit dem Figma-Screenshot. */
.groups-hero__tex {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  aspect-ratio: 1440 / 790.25;
}
.groups-hero__tex img { object-fit: cover; opacity: 0.55; }

/* Kartenraster (Ministry Card V1, 620 × 555) */
.groups-hero__grid,
.groups-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 25px 28px;
}
.groups-hero__grid { gap: 27px; }
.groups-grid--more { gap: 25px; }
/* Technik (Mischpult): Originalfoto sehr dunkel, daher aufgehellt. Ausschnitt auf das Mischpult
   gezoomt; unten endet er immer über dem Herstellerschriftzug am Pult (bei etwa 88 % der Bildhöhe).
   Karte (620:555, volle Bildhöhe): sichtbar etwa 32 bis 87 % der Höhe. Großes Bild (1268:739, zeigt
   nur die oberen 87 % des Fotos): sichtbar etwa 31 bis 86 %. Bildstil bleibt. */
img.groups-bild--technik {
  object-fit: cover;
  object-position: 0% 0%;
  transform: scale(1.8);
  transform-origin: 20% 71%;
  filter: var(--f-bildstil) brightness(1.7) contrast(1.05);
}
.groups-single__image img.groups-bild--technik { transform: scale(1.6); transform-origin: 20% 95%; }
/* Vorlagenfotos in voller Auflösung mit viel Himmel: auf den Karten näher an die Personen (wie der frühere Figma-Ausschnitt) */
.f-ministry-card img.groups-bild--nah { transform: scale(1.4); transform-origin: 50% 92%; }
/* Ungerade Zahl an Karten: die letzte läuft breit über die ganze Zeile */
.groups-grid > .f-ministry-card:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 1268 / 555.45; }
/* gleiche Höhe wie die halben Karten; Ausschnitt etwas höher, damit Gesichter ganz zu sehen sind */
.groups-grid > .f-ministry-card:last-child:nth-child(odd) > img { object-position: 50% 35%; }
/* Text auf derselben Linie wie in den halben Karten (7,74 % einer halben Breite) */
.groups-grid > .f-ministry-card:last-child:nth-child(odd) .f-ministry-card__content { left: calc(7.74% * 620 / 1268); }
/* Bereiche Kleingruppen und Mitarbeit: Abstand und Sprungziel unter dem festen Header */
.groups-bereich { scroll-margin-top: 110px; }
.groups-bereich + .groups-bereich { margin-top: clamp(96px, 11.1vw, 160px); }
/* Figma: Kartentitel-Block immer zweizeilig hoch, Text oben (z. B. „Männerwerk“ auf Höhe von „Offener“) */
.groups-page .f-ministry-card .f-d3 { min-height: calc(2em * var(--f-d3-lh)); }
/* Kategorie-Karten: lange Einzelwörter (z. B. „Kommunikation“) ohne Trennung in einer Zeile */
.groups-grid .f-ministry-card .f-d3 { max-width: none; hyphens: manual; }

/* ── Ministries Section (Übersicht) ───────────────────── */
.groups-list {
  padding: clamp(96px, 13.9vw, 200px) 0 clamp(96px, 15.3vw, 220px);
  scroll-margin-top: 24px;
}
.groups-list__title { max-width: 885px; margin: 0 auto; text-align: center; }
.groups-list__title + .groups-grid { margin-top: clamp(48px, 6.7vw, 96.6px); }
.groups-list__untertitel { max-width: 640px; margin: clamp(16px, 1.7vw, 24px) auto 0; text-align: center; }
.groups-list__untertitel + .groups-grid { margin-top: clamp(48px, 6.7vw, 96.6px); }

/* ── Kategorie-Seiten (/gruppen/kinder usw.) ──────────── */
/* Hero wie die Einzelseite; Liste auf hellem Grund, nummerierte Karten */
.groups-kategorie__liste { padding: clamp(64px, 6.9vw, 100px) 0 var(--f-section-y); }
/* Weitere Kategorien des Bereichs: heller Grund vor der dunklen CTA */
.groups-more--hell { background: var(--f-n200); }
.groups-kategorie__titel { margin-bottom: clamp(40px, 4.2vw, 60px); }
.groups-kacheln {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.groups-kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  box-sizing: border-box;
  padding: clamp(28px, 2.8vw, 40px);
  border-radius: var(--f-r-card);
  background: var(--f-n200);
  color: var(--f-n800);
  text-decoration: none;
  overflow: hidden;
}
.groups-kachel__nr {
  font-size: var(--f-d3-size);
  line-height: 1;
  font-weight: 800;
  color: var(--f-script-farbe, var(--f-accent-text));
  margin-bottom: clamp(8px, 1.1vw, 16px);
}
.groups-kachel h2,
.groups-kachel h3 { margin: 0; }
/* Hover wie die Textkarten beim Förderverein */
.groups-kachel--link { transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease; }
.groups-kachel--link:hover,
.groups-kachel--link:focus-visible { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08); }
.groups-kachel__pfeil { margin-top: auto; padding-top: 8px; font-weight: 700; }
.groups-kachel--link:hover .groups-kachel__pfeil { color: var(--f-accent); }

/* ── Einzelseite: Bild + Info Wrapper ─────────────────── */
.groups-single__image {
  position: relative;
  aspect-ratio: 1268 / 739;
  border-radius: var(--f-r-card);
  overflow: hidden;
  background: var(--f-n700);
}
.groups-single__image img { object-fit: cover; }
.groups-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 40px clamp(40px, 7.43vw, 107px);
  margin: clamp(48px, 5vw, 72px) 0 0;
}
.groups-info__item { display: flex; flex-direction: column; gap: 18px; }
.groups-info dt {
  font-size: var(--f-t200-size);
  line-height: var(--f-t200-lh);
  color: var(--f-n600);
}
.groups-info dd {
  margin: 0;
  display: flex;
  /* Text neben Icon bzw. Avatar vertikal mittig, alle Angaben gleich hoch (Stakeholder 25.09.2026) */
  align-items: center;
  min-height: 40px;
  gap: 12px;
  color: var(--f-n800);
}
.groups-info__icon { width: 24px; height: 24px; flex: none; }
.groups-info dd.groups-info__leader { align-items: center; gap: 16px; height: 40px; } /* Avatar 54px ragt oben/unten 7px über */
.groups-info__avatar {
  width: 54px;
  height: 54px;
  flex: none;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  background: var(--f-n-e8);
}
.groups-info__avatar img { object-fit: cover; }
.groups-divider {
  height: 1px;
  border: 0;
  margin: clamp(40px, 4.93vw, 71px) 0 0;
  background: var(--f-n400);
}

/* ── Rich Text Section ────────────────────────────────── */
.groups-rich { padding: clamp(64px, 8.33vw, 120px) 0 clamp(96px, 13.9vw, 200px); }
.groups-rich__body { display: flex; flex-direction: column; gap: 38px; }
.groups-rich__intro { display: flex; flex-direction: column; gap: 24px; }
.groups-rich__block { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 24px; }
.groups-rich__block--narrow { max-width: 789px; }
.groups-rich .f-h3 { margin: 0; }
.groups-rich__strong { font-weight: 700; color: var(--f-n800); }
.groups-rich__em { color: var(--f-n800); }
.groups-h4 { font-size: 22px; line-height: 28px; font-weight: 900; margin: 0; }
.groups-rich__list {
  margin: 0;
  padding: 0 0 0 24px;
  list-style: none;
  counter-reset: groups-num;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.groups-rich__list li { display: flex; gap: 15px; }
.groups-rich__list li::before {
  counter-increment: groups-num;
  content: counter(groups-num) ".";
  flex: none;
  min-width: 17px;
}
.groups-rich__figure { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.groups-rich__figure figcaption { text-align: center; }
/* Figma: Bild (1262 breit, nach links/oben verschoben) füllt den 1269er-Rahmen rechts nicht ganz;
   der Export enthält nur den sichtbaren Teil (1240 × 470) → in dieser Größe, nicht vergrößert. */
.groups-rich__image {
  position: relative;
  aspect-ratio: 1269 / 469.55;
  border-radius: 22px;
  overflow: hidden;
}
.groups-rich__photo { position: absolute; inset: 0 auto 0 0; width: 97.68%; }
.groups-rich__photo img { object-fit: cover; }
/* Figma: Textblock „Wie werde ich Teil…" hat feste Absatzhöhe 98px, der Wrapper endet 60px unter
   dem letzten Absatz, der Button sitzt 46,7px darunter */
.groups-rich__block--join .f-p { min-height: 98px; }
.groups-rich__cta { margin-top: clamp(48px, 7.41vw, 106.7px); }

/* ── Ministries Section (Einzelseite, dunkel) ─────────── */
.groups-more { padding: var(--f-section-y) 0; }
.groups-more__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: clamp(32px, 3.1vw, 44.7px);
}

/* Ab 2560px: Textur bleibt 1920 CSS-px breit in der Mitte und blendet seitlich aus
   (wie die Hintergrund-Ebenen in styles/skalierung.css) */
@media (min-width: 2560px) {
  .groups-hero__tex {
    left: calc(50% - 960px);
    right: auto;
    width: 1920px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  }
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 860px) {
  .groups-hero__top,
  .groups-more__top { flex-direction: column; align-items: flex-start; }
  .groups-hero__grid,
  .groups-grid { grid-template-columns: 1fr; }
  .groups-grid > .f-ministry-card:last-child:nth-child(odd) { aspect-ratio: 620 / 555.45; }
  .groups-grid > .f-ministry-card:last-child:nth-child(odd) .f-ministry-card__content { left: 7.74%; }
  .groups-kacheln { grid-template-columns: minmax(0, 1fr); }
  /* gestapelte Karten: Hintergrund reicht nur in die erste Karte */
  .groups-hero__grid .groups-hero__bg { bottom: calc(100% - 140px); }
  .groups-info { justify-content: flex-start; }
}
@media (max-width: 480px) {
  .groups-hero__top > .f-btn,
  .groups-more__top > .f-btn { width: 100%; white-space: normal; }
}

@media (min-width: 701px) and (max-width: 1100px) {
  .groups-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .groups-kachel--link { transition: none; }
  .groups-kachel--link:hover,
  .groups-kachel--link:focus-visible { transform: none; }
}

/* ── Kategorie-Seiten: ausgebaute Abschnitte ──────────── */
.kat-intro { padding: clamp(80px, 9.7vw, 140px) 0 clamp(64px, 6.9vw, 100px); }
.kat-intro__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(40px, 6.9vw, 100px);
  align-items: start;
}
.kat-intro__text .f-title { margin-bottom: 24px; }
.kat-schwerpunkte { list-style: none; margin: 0; padding: 0; display: grid; }
.kat-schwerpunkt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--f-n400);
}
.kat-schwerpunkt:last-child { border-bottom: 1px solid var(--f-n400); }
.kat-schwerpunkt__nr { font-size: var(--f-d4-size); line-height: 1; font-weight: 800; color: var(--f-script-farbe, var(--f-accent-text)); }
.kat-schwerpunkt h3 { margin: 0 0 6px; }
.kat-schwerpunkt .f-p { margin: 0; }

/* Einblicke: ein großes, zwei kleine Bilder */
.kat-galerie { padding-bottom: clamp(80px, 9.7vw, 140px); }
.kat-galerie__raster {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: repeat(2, clamp(180px, 18vw, 260px));
  gap: 24px;
}
.kat-galerie__bild { position: relative; overflow: hidden; border-radius: var(--f-r-card); }
.kat-galerie__bild img { object-fit: cover; transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.kat-galerie__bild:hover img { transform: scale(1.04); }
.kat-galerie__bild--1 { grid-row: 1 / 3; }

/* Ablauf auf dunklem Grund: drei Schritte mit Verbindungslinie */
.kat-ablauf { padding: var(--f-section-y) 0; }
.kat-ablauf .f-title { margin-bottom: clamp(48px, 5.5vw, 80px); }
.kat-schritte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3.3vw, 48px);
  counter-reset: schritt;
}
.kat-schritt { position: relative; padding-top: 88px; }
.kat-schritt::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 72px;
  right: calc(-1 * clamp(24px, 3.3vw, 48px));
  height: 1px;
  background: rgba(253, 253, 253, 0.25);
}
.kat-schritt:last-child::before { display: none; }
.kat-schritt__nr {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--f-accent);
  color: var(--f-n800);
  font-weight: 800;
  font-size: 22px;
}
.kat-schritt h3 { margin: 0 0 10px; }
.kat-schritt .f-p { margin: 0; color: rgba(253, 253, 253, 0.75); }

/* Mitbringen / Erwartet */
.kat-passt { padding: 0 0 clamp(80px, 9.7vw, 140px); }
.kat-passt__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.kat-passt__karte {
  padding: clamp(32px, 3.9vw, 56px);
  border-radius: var(--f-r-card);
  background: var(--f-n200);
}
.kat-passt__karte--dunkel { background: var(--f-n800); color: var(--f-n100); }
.kat-passt__script { font-size: clamp(28px, 2.5vw, 36px); color: var(--f-script-farbe, var(--f-accent-text)); margin: 0 0 20px; transform: rotate(-3deg); transform-origin: left; }
.kat-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.kat-liste li { position: relative; padding-left: 28px; margin: 0; }
.kat-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--f-accent);
}

/* Einstieg in drei Schritten */
.kat-einstieg { padding: var(--f-section-y) 0; background: var(--f-n100); }
.kat-einstieg .f-title { margin-bottom: clamp(48px, 5.5vw, 80px); }
.kat-einstieg__schritte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.kat-einstieg__schritt {
  padding: clamp(28px, 2.8vw, 40px);
  border-radius: var(--f-r-card);
  border: 1px solid var(--f-n400);
  text-align: center;
}
.kat-einstieg__nr {
  display: block;
  font-size: var(--f-d2-size);
  line-height: 1;
  font-weight: 800;
  color: var(--f-accent);
  margin-bottom: 16px;
}
.kat-einstieg__schritt h3 { margin: 0 0 8px; }
.kat-einstieg__schritt .f-p { margin: 0; }
.kat-einstieg__kontakt { text-align: center; margin-top: 40px; }

@media (max-width: 1100px) {
  .kat-intro__raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .kat-galerie__raster { grid-template-columns: 1fr 1fr; grid-template-rows: clamp(200px, 50vw, 320px) clamp(140px, 30vw, 220px); }
  .kat-galerie__bild--1 { grid-row: auto; grid-column: 1 / -1; }
  .kat-schritte,
  .kat-einstieg__schritte,
  .kat-passt__raster { grid-template-columns: minmax(0, 1fr); }
  .kat-schritt { padding-top: 0; padding-left: 80px; min-height: 56px; }
  .kat-schritt::before { top: 64px; bottom: calc(-1 * clamp(24px, 3.3vw, 48px)); left: 28px; right: auto; width: 1px; height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .kat-galerie__bild img { transition: none; }
  .kat-galerie__bild:hover img { transform: none; }
}

/* #HimmelKreis / #HimmelCrew als Handschriftzeile: das Rautezeichen steht hoch, daher mehr Luft zur
   Überschrift als beim Standard-Titel (Übersicht und Kopf der Kategorie-Seiten) */
.groups-list__title.f-title .f-script,
.groups-kategorie .groups-title.f-title .f-script { margin-bottom: calc(var(--f-script-gap) - 0.5lh + 0.75em); }

/* ── Dienst-Seiten (Next Generation) ──────────────────── */
.kat-passt--oben { padding-top: clamp(80px, 9.7vw, 140px); }
.dienst-kontakt-abschnitt { padding: 0 0 clamp(80px, 9.7vw, 140px); scroll-margin-top: 110px; }
.dienst-kontakt {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  overflow: hidden;
  border-radius: var(--f-r-card);
  background: var(--f-n200);
}
.dienst-kontakt__bild { position: relative; min-height: 360px; }
.dienst-kontakt__bild img { object-fit: cover; object-position: 50% 20%; }
.dienst-kontakt__text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: clamp(32px, 4vw, 56px); }
.dienst-kontakt__text .kat-liste { margin: 4px 0 12px; }
@media (max-width: 860px) {
  .dienst-kontakt { grid-template-columns: minmax(0, 1fr); }
  .dienst-kontakt__bild { min-height: 0; aspect-ratio: 4 / 3; }
}

/* Personen aus ChurchTools (Leitung, Organisation): Foto oder Personen-Icon, mehrere nebeneinander */
.groups-info__avatar--icon { display: grid; place-items: center; background: var(--f-n200); border: 1px solid var(--f-n400); }
.groups-info__avatar--icon img { width: 26px; height: 26px; }
.groups-info dd.groups-info__personen { flex-wrap: wrap; height: auto; min-height: 40px; row-gap: 12px; }
.groups-info__person { display: inline-flex; align-items: center; gap: 16px; }
.groups-info__name { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.groups-info__name:hover { text-decoration-thickness: 2px; }
.groups-rich__text { white-space: pre-line; max-width: 820px; }