/*
 * gfp-team.css
 * Team-Auflistung: Über-uns-Seite ([gfp_lernarchitektinnen] /
 * [gfp_berater_trainerinnen] / [gfp_netzwerkpartnerinnen]) und Startseite
 * ([gfp_team_startseite]).
 *
 * ── Gestaltung (Vorgabe des Users nach einer Design-Vorlage) ──
 * Jede Kachel ist ein Hochformat-Foto (3:4), das die Kachel vollständig füllt.
 * Über dem Foto liegt eine Inhaltsebene mit Name + Rolle am unteren Rand
 * (dunkler Verlauf für Lesbarkeit). Bei Mouseover / Antippen / Tastaturfokus
 * erscheinen darüber bis zu drei SCHLAGWÖRTER und darunter der Knopf
 * „Mehr über …"; das Foto dahinter wird weichgezeichnet und leicht
 * hineingezoomt. Der Knopf klappt das Feld .gfp-team-panel auf — über die volle
 * Rasterbreite, unter der Zeile der Kachel (Stufe 2, siehe unten und
 * PROJECT.md, Architektur 9). Bis 18.9.2026 stand in der Überlagerung statt der
 * Schlagwörter die ganze Kurzbiografie; sie steht jetzt im Ausklappfeld.
 * Die Überschrift der Gruppe („Lernarchitekt*innen") ist selbst eine Kachel
 * (erste Position im Raster) — auf der Startseite dagegen eine normale
 * Überschrift über dem Raster, damit die dortige 4er-Reihe intakt bleibt
 * (siehe gfp_team_render_grid() in inc/shortcode-team.php).
 *
 * ── Warum kein Hover allein ──
 * Hover-Regeln stehen in @media (hover: hover): auf Touchgeräten führt Hover
 * sonst zu Zuständen, die bis zum nächsten Tap „kleben" bleiben. Dort (und für
 * die Tastatur) übernimmt die Klasse .gfp-team-card--open, gesetzt von
 * assets/js/gfp-team.js über die unsichtbare Schaltfläche .gfp-team-card__hit.
 * Dieselbe Klasse nutzt der Deeplink von den Kursdetailseiten
 * (/uber-uns/#vorname-nachname).
 *
 * ── Kapselung + Typografie ──
 * Läuft auf normalen (Lay-gebauten) Seiten, nicht auf den Kurs-Templates —
 * daher eigenständig unter .gfp-team gekapselt (statt .gfp-programm), mit
 * eigenen lokalen Variablen. Die Typografie folgt denselben Lay-Textformaten
 * wie der Rest des Plugins: inc/shortcode-team.php ruft
 * gfp_kurse_bind_textformate('.gfp-team', 'gfp-team') auf. Rollen-Zuordnung:
 *   Überschrift → H2      Name → BodyLg      Rolle/Bio → Small
 * Ändert man ein Format in Lay, ziehen diese Kacheln automatisch mit.
 */

.gfp-team, .gfp-team *, .gfp-team *::before, .gfp-team *::after { box-sizing: border-box; }

.gfp-team {
  --gfp-team-lime:     #CAD55A;
  --gfp-team-radius:   1rem;
  --gfp-team-intro-bg: #f5f5f3;
  /* Fläche des Ausklappfelds — bewusst dieselbe wie bei Titel- und
     Abschluss-Kachel, damit das Raster eine Handschrift behält. */
  --gfp-team-panel-bg: #f5f5f3;
  /* Innenabstand in ALLEN Kacheln — angeglichen an die übrigen Kästchen der
     Seite (Vorgabe: 20 px zum Rand). Nur an dieser Stelle ändern. */
  --gfp-team-pad:      20px;
  /* Bezugsbreite für den prozentualen Abstand zwischen den Kacheln (s. Raster):
     ohne container-type löst ein prozentualer row-gap in einem Raster mit
     automatischer Höhe zu 0 auf. */
  container-type: inline-size;
  padding: 2rem 0;
}

.gfp-team__title {
  font-family: var(--font-h2, var(--font-headline, 'League Gothic', 'Arial Narrow', sans-serif));
  font-size: var(--fs-h2, clamp(1.5rem, 3vw, 2.5rem));
  line-height: var(--lh-h2, 1.05);
  letter-spacing: var(--ls-h2, 0.01em);
  font-weight: var(--fw-h2, 400);
  text-transform: var(--tt-h2, uppercase);
  font-style: var(--fsty-h2, normal);
  font-variation-settings: var(--fvs-h2, normal);
  /* Farbe der umgebenden Lay-Zeile erben statt hart #111: auf der Startseite
     sitzt der Shortcode in einer DUNKLEN Zeile, dort war die Überschrift
     schwarz auf schwarz praktisch unsichtbar. Die Überschrift IN der hellen
     Titel-Kachel setzt ihre Farbe weiter unten selbst (--intro-titel). */
  color: inherit;
  margin: 0 0 1.5rem;
}

/* ── Titelkachel bleibt groß, die Personen stehen zweizeilig daneben ──
   Vorgabe 18.9.2026: Die Kachel mit Überschrift und Einleitungstext soll auch
   in den flachen Gruppen ihre gewohnte Größe behalten. Sie spannt deshalb zwei
   Rasterzeilen — und weil eine flache Kachel genau halb so hoch ist, ergibt das
   dieselbe Höhe wie in den übrigen Gruppen (2 × 247 px + Zeilenabstand). Daneben
   füllen die Personen zwei Reihen.
   Gilt nicht am Handy: Dort liegt die Titelkachel ohnehin über die volle Breite
   (Regel in der Mobil-Media-Query), eine Zeilenspanne ergäbe dort keinen Sinn.
   Sind es weniger Personen, als für zwei Reihen nötig, bleibt neben der
   Titelkachel eine Lücke — dann lohnt die flache Darstellung ohnehin kaum. */
.gfp-team__grid--flach .gfp-team-card--intro { grid-row: span 2; }

/* ── Halb hohe Kacheln für nachgeordnete Kategorien ──
   Vorgabe 18.9.2026: Netzwerkpartner*innen und Kooperationspartner sollen auf
   der Seite weniger Gewicht haben. Sie behalten Breite und Rasterlogik, werden
   aber quer statt hochkant (3:2 statt 3:4) und brauchen damit rund die halbe
   Fläche. Gesteuert wird das über 'flach' in gfp_team_gruppen(), nicht hier.

   Der Bildausschnitt braucht dabei eine eigene Angabe: Aus einem Hochformat
   schneidet `object-fit: cover` bei 3:2 oben und unten je ein Viertel weg —
   mittig zentriert wäre bei Porträts genau der Kopf betroffen. `center 20%`
   hält den oberen Bildbereich und zeigt Kopf und Schultern. */
.gfp-team__grid--flach .gfp-team-card::before { padding-top: 66.666%; }

.gfp-team__grid--flach .gfp-team-card__photo img,
.gfp-team-panel--flach .gfp-team-panel__karte-foto img {
  object-position: center 20%;
}

.gfp-team-panel--flach .gfp-team-panel__karte::before { padding-top: 66.666%; }

/* ── Der Verlauf muss den Text tragen, nicht die halbe Kachel ──
   Er ist in Prozent der Kachelhöhe angegeben; in der halben Höhe sind 40 % nur
   noch rund 99 px, und ein zweizeiliger Name mit Rolle braucht gut 110 px. Der
   Name stand dadurch im hellen Teil des Fotos und war auf hellen Porträts nicht
   mehr zu lesen (gemeldet 18.9.2026). In flachen Kacheln reicht der Verlauf
   deshalb weiter nach oben. Die hohen Kacheln bleiben unverändert bei 40 % —
   dort war „höher" ausdrücklich unerwünscht, weil das Foto absäuft. */
.gfp-team__grid--flach .gfp-team-card__inhalt,
.gfp-team-panel--flach .gfp-team-panel__karte-text {
  background: linear-gradient(to top,
              rgba(0, 0, 0, .85) 0%,
              rgba(0, 0, 0, .6) 28%,
              rgba(0, 0, 0, .22) 48%,
              rgba(0, 0, 0, 0) 70%);
}

/* In der flachen Kachel ist oben weniger Luft — das ×-Icon rückt näher an die
   Ecke, und die Inhaltsebene braucht entsprechend weniger Vorhalt. Ohne das
   bliebe für Schlagwörter und Knopf zu wenig übrig. */
.gfp-team__grid--flach .gfp-team-card__hit-icon {
  width: 1.7rem;
  height: 1.7rem;
  top: .6rem;
  right: .6rem;
  font-size: 1.15rem;
}

/* ── Der Knopf muss in der Kachel bleiben ──
   In der halben Höhe reicht der Platz nicht für beliebig lange Schlagwörter:
   Gemessen mit den längsten aus dem echten Bestand (drei ganze Sätze) rutschte
   der Knopf „Mehr über …" 12 px (1600 px Fenster) bis 38 px (1100 px) unter die
   Kachelunterkante und wurde dort abgeschnitten — das Feld ließ sich dann nicht
   mehr öffnen. Zwei Maßnahmen zusammen:

   1. Die Schlagwörter enden in flachen Kacheln nach zwei Zeilen (mit …). Was
      abgeschnitten wird, steht vollständig im Ausklappfeld.
   2. Als Notnagel darf ihr Bereich schrumpfen, Label und Knopf dagegen nicht —
      so wird bei unvorhergesehener Enge immer zuerst der Text gestaucht und nie
      die Schaltfläche verdrängt. */
.gfp-team__grid--flach .gfp-team-card__tags {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.gfp-team__grid--flach .gfp-team-card__tags-wrap { flex: 0 1 auto; min-height: 0; }
.gfp-team__grid--flach .gfp-team-card__mehr-wrap { flex: 0 0 auto; }

.gfp-team__grid--flach .gfp-team-card--open .gfp-team-card__inhalt,
.gfp-team__grid--flach .gfp-team-card:focus-within .gfp-team-card__inhalt {
  padding: 2.6rem var(--gfp-team-pad) var(--gfp-team-pad);
}

@media (hover: hover) and (pointer: fine) {
  .gfp-team__grid--flach .gfp-team-card--mit-mehr:hover .gfp-team-card__inhalt {
    padding: 2.6rem var(--gfp-team-pad) var(--gfp-team-pad);
  }
}

/* ── Raster ──
   auto-fill (nie auto-fit, s. PROJECT.md Fallstrick 6): gleiche Kachelbreite bei
   gleicher Fensterbreite, auch wenn eine Reihe nicht voll wird. */
.gfp-team__grid {
  display: grid;
  /* 300 statt 260 px Mindestbreite: dadurch passen weniger Kacheln in eine
     Zeile und jede einzelne wird größer — die Fotos wirkten in der 260er-
     Staffelung zu klein. */
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  /* 0,5 % der Zeilenbreite — dieselbe Vorgabe wie bei den Lay-Kästchen weiter
     oben auf der Seite. cqi statt % , damit auch der Zeilenabstand (row-gap)
     korrekt rechnet: prozentuale row-gaps lösen in Rastern mit automatischer
     Höhe zu 0 auf, cqi bezieht sich dagegen immer auf die Breite von
     .gfp-team (container-type dort gesetzt). */
  gap: 0.5cqi;
  align-items: stretch;
}

/* Startseite: fest 2 Spalten (Handy/Tablet) bzw. 4 (Desktop) für die max. 4
   Personen — statt auto-fill, damit es keinen 3er-Zwischenschritt gibt.
   1025px = direkt oberhalb von Lays Tablet-Breakpoint (s. PROJECT.md). */
/* minmax(0, 1fr) statt 1fr: "1fr" bedeutet minmax(auto, 1fr), und dieses auto
   ist die min-content-Breite des Inhalts — eine Kachel mit langem Wort (z. B.
   die Überschrift der Titel-Kachel) zieht die Spalte dann breiter als ihren
   Anteil, und das Raster läuft seitlich aus dem Bildschirm. Am Handy passiert. */
.gfp-team__grid--home { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 1025px) {
  /* Kachelbreite gedeckelt statt 4 × 1fr: Der Shortcode sitzt auf der
     Startseite in einer Lay-Zeile über die volle Fensterbreite (alte Vorgabe
     aus dem früheren 16:9-Design). Mit den Hochformat-Kacheln wurden daraus
     riesige Bilder — gemessen bei 1600 px Fensterbreite: 362 × 483 px auf der
     Startseite gegenüber 285 × 380 px auf der Über-uns-Seite.
     minmax(0, 300px) hält sie auf demselben Maß wie dort (die Über-uns-Kacheln
     liegen je nach Breite zwischen 250 und 300 px) und lässt sie auf schmalen
     Fenstern trotzdem mitschrumpfen.
     Ausrichtung mittig — ausdrücklich nur hier (Vorgabe); die Über-uns-Seite
     füllt ihre Zeile ohnehin mit so vielen Kacheln, wie hineinpassen. */
  /* Volle Zeilenbreite (Vorgabe): die Spalten teilen sich die Lay-Zeile, statt
     auf eine Höchstbreite gedeckelt und mittig gesetzt zu werden. Mit der
     Abschluss-Kachel sind es fünf statt vier Spalten — dadurch bleiben die
     Kacheln trotz voller Breite in der Größenordnung der Über-uns-Seite
     (bei 1600 px Fenster: 291 px gegenüber 285 px dort). */
  .gfp-team__grid--home {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Mit Abschluss-Kachel sind es fünf Kacheln — sonst rutscht sie in eine
     zweite Zeile, statt rechts neben den Personen zu stehen. */
  .gfp-team__grid--home.gfp-team__grid--mit-cta {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ── Kachel ── */
.gfp-team-card {
  position: relative;
  border-radius: var(--gfp-team-radius);
  overflow: hidden;
  background: #ececec;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .09);
  /* Eigener Stacking-Kontext: die absolut positionierten Ebenen (Foto,
     Inhalt, Schaltfläche) bleiben dadurch in dieser Kachel und legen sich
     nicht über Nachbarkacheln. */
  isolation: isolate;
}

/* ── Kachelformat 3:4 über einen Abstandhalter im Textfluss ──
   NICHT per aspect-ratio auf der Kachel: Foto, Inhaltsebene und Schaltfläche
   sind alle absolut positioniert, die Kachel hat also keinerlei Inhalt im Fluss.
   Ihre Höhe hängt damit ausschließlich an aspect-ratio — und die löst Safari bei
   gestreckten Grid-Elementen (align-items: stretch) anders auf als Chrome, was
   die Kachel auf Höhe 0 zusammenfallen lassen kann: das Raster war auf der
   Startseite in Safari leer. Der padding-top-Trick (Prozent bezieht sich auf die
   BREITE des Elements: 4/3 = 133.333 %) erzeugt echte Höhe im Fluss und
   funktioniert in jedem Browser gleich. */
.gfp-team-card::before {
  content: "";
  display: block;
  padding-top: 133.333%;
}

/* ── Foto: füllt die Kachel ── */
.gfp-team-card__photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.gfp-team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Oberkante statt Mitte: bei 3:4-Zuschnitt bleibt der Kopf im Bild, auch wenn
     das Original quer oder sehr hoch ist. */
  object-position: center top;
  display: block;
  /* Fotos in Farbe — bis 27.10.2026 stand hier grayscale(100%), auf
     User-Vorgabe entfernt (auch in den beiden blur-Zuständen unten). */
  transition: filter .35s ease, transform .35s ease;
}

.gfp-team-card__photo-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-headline, 'League Gothic', 'Arial Narrow', sans-serif);
  font-size: 4rem;
  color: rgba(0, 0, 0, .38);
}

/* ── Inhaltsebene über dem Foto ── */
.gfp-team-card__inhalt {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  /* BEWUSST NICHT justify-content: flex-end, obwohl der Inhalt unten sitzen
     soll: Läuft der Text in einem Scroll-Container mit flex-end über, schiebt
     er sich oben aus dem Kasten heraus — und dorthin kann man nicht scrollen
     (scrollTop kann nicht negativ werden). Eine lange Kurzbiografie war dadurch
     oben abgeschnitten und der Scrollbalken wirkungslos.
     margin-top: auto am Label (s. u.) erzeugt dieselbe Optik, lässt den Text
     bei Überlänge aber ganz normal nach UNTEN laufen — also scrollbar. */
  padding: var(--gfp-team-pad);
  /* Verlauf nur unten, und bewusst flach: er soll Name und Rolle tragen, nicht
     die halbe Kachel abdunkeln. Höhere Werte (Verlauf bis 62 % Kachelhöhe)
     ließen das Foto wie abgesoffen wirken — im Rendering geprüft. */
  background: linear-gradient(to top,
              rgba(0, 0, 0, .8) 0%,
              rgba(0, 0, 0, .42) 15%,
              rgba(0, 0, 0, 0) 40%);
  transition: background .35s ease;
  /* Geschlossen gibt es nichts zu scrollen (die Bio ist zusammengeklappt) —
     Scrollen wird erst im geöffneten Zustand eingeschaltet, s. u. */
  overflow: hidden;
  /* KEIN overscroll-behavior hier. Diese Ebene liegt mit inset: 0 über der
     GANZEN Kachel, also auch über dem Foto. Ein Element mit overflow: hidden
     gilt im Browser trotzdem als Scroll-Container — mit
     "overscroll-behavior: contain" schluckt es deshalb das Mausrad, ohne selbst
     etwas zu scrollen: Auf der Startseite (Kacheln ohne Bio) stand die Seite
     still, sobald der Zeiger über einem Teamfoto war. Begrenzt wird das
     Weiterscrollen dort, wo wirklich gescrollt wird — im Bio-Bereich (s. u.). */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .55) transparent;
}

/* ── Alles sitzt unten ──
   Der Auto-Abstand gehört an das ERSTE Kind, nicht an jedes: Bekämen mehrere
   Kinder margin-top: auto, teilte sich der freie Platz zwischen ihnen auf und
   die Schlagwörter schwebten in der Kachelmitte. Welches Kind das erste ist,
   hängt vom Inhalt ab (Kachel ohne Schlagwörter beginnt beim Namen) — deshalb
   die Auswahl über :first-child statt über den Klassennamen.
   In einem Scroll-Container wäre das heikel (s. die alte Warnung zu
   justify-content: flex-end); in dieser Kachel wird nichts mehr gescrollt,
   seit die Biografie im Ausklappfeld steht. */
.gfp-team-card__inhalt > :first-child { margin-top: auto; }

.gfp-team-card__label { flex: 0 0 auto; }

.gfp-team-card__name {
  font-family: var(--font-body-lg, var(--font-body, 'Host Grotesk', system-ui, sans-serif));
  font-size: var(--fs-body-lg, 1.125rem);
  line-height: var(--lh-body-lg, 1.3);
  letter-spacing: var(--ls-body-lg, 0);
  font-weight: var(--fw-body-lg, 400);
  text-transform: var(--tt-body-lg, none);
  font-style: var(--fsty-body-lg, normal);
  font-variation-settings: var(--fvs-body-lg, normal);
  color: #ffffff;
  margin: 0;
  /* ── Warum ein Schatten und nicht nur ein Verlauf ──
     Auf sehr hellen Porträts (weißer Studiohintergrund) liegt der Name selbst
     mit kräftigem Verlauf noch auf einer fast weißen Fläche — weiß auf weiß.
     Ein Verlauf, der das auffängt, würde alle anderen Fotos absaufen lassen.
     Der Schatten wirkt dagegen nur dort, wo es hell ist: Auf dunklen Fotos ist
     er praktisch unsichtbar. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 2px 14px rgba(0, 0, 0, .55);
  /* Notbremse: Namen umbrechen normal an Leerzeichen (s. gfp_text_umbruch()).
     Passt ein EINZELNES Wort trotzdem nicht in die Kachel, ist ein harter
     Umbruch besser als ein Name, der rechts aus der Kachel läuft. */
  overflow-wrap: break-word;
}

.gfp-team-card__role,
.gfp-team-card__tags {
  font-family: var(--font-small, var(--font-body, 'Host Grotesk', system-ui, sans-serif));
  letter-spacing: var(--ls-small, 0);
  font-weight: var(--fw-small, 400);
  text-transform: var(--tt-small, none);
  font-style: var(--fsty-small, normal);
  font-variation-settings: var(--fvs-small, normal);
}

.gfp-team-card__role {
  font-size: var(--fs-small, 0.875rem);
  line-height: var(--lh-small, 1.4);
  color: rgba(255, 255, 255, .82);
  margin: .25rem 0 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 2px 14px rgba(0, 0, 0, .55);
  /* Sicherheitsnetz: Rollen ohne "|" haben laut gfp_text_with_wbr() keine
     erlaubte Umbruchstelle (alle Leerzeichen →  ) und würden sonst über
     den Kartenrand hinauslaufen. */
  overflow-wrap: break-word;
}

/* ── Stufe 1: Schlagwörter und „Mehr über …"-Knopf ──
   Aufklappen per grid-template-rows 0fr → 1fr (dieselbe Technik wie zuvor bei
   der Kurzbiografie: kein JS-Höhenmessen nötig, und im geschlossenen Zustand
   ist der Inhalt wirklich 0 Pixel hoch — auch für die Maus, s. u. beim Knopf).
   Zwei getrennte Wrapper, weil zwischen ihnen Name und Rolle stehen bleiben. */
.gfp-team-card__tags-wrap,
.gfp-team-card__mehr-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
}

/* Schneidet den Inhalt im geschlossenen Zustand ab — die halbe Miete der
   0fr→1fr-Technik. */
.gfp-team-card__tags-inner,
.gfp-team-card__mehr-inner { overflow: hidden; }

/* Schlagwörter in der Kachel sind **Fließtext**, keine Chips (Vorgabe
   18.9.2026: „in der gleichen Schrift wie vorher die Biografie"). Sie stehen
   deshalb auch an derselben Stelle wie früher die Bio: unter Name und Rolle.
   Die Liste bleibt eine <ul> — für Vorleseprogramme ist „Liste, 3 Einträge"
   die richtige Ansage —, sieht aber wie eine Textzeile aus. */
.gfp-team-card__tags {
  list-style: none;
  font-size: var(--fs-small, 0.875rem);
  line-height: var(--lh-small, 1.55);
  color: rgba(255, 255, 255, .92);
  margin: .85rem 0 0;
  padding: 0;
  opacity: 0;
  transition: opacity .25s ease;
  overflow-wrap: break-word;
}

/* ── Warum die Schlagwörter wie ein Satz fließen ──
   Als Flex-Elemente war jedes Schlagwort ein eigener Block: Ein zu langes
   brach als GANZES in die nächste Zeile, und das Trennzeichen stand dann
   allein am Zeilenanfang („· Selbstorganisiertes & soziales Lernen") — live
   gemeldet am 18.9.2026. Als Inline-Elemente brechen sie wie normaler Text an
   den Leerzeichen um. Das Komma hängt per ::after ohne Leerzeichen direkt am
   Wort, kann also nie an den Zeilenanfang rutschen. Im Markup bleibt es eine
   Liste (Vorleseprogramme sagen „Liste, 3 Einträge"); das Leerzeichen zwischen
   den Einträgen liefert der Zeilenumbruch im HTML. */
.gfp-team-card__tag { display: inline; }
.gfp-team-card__tag:not(:last-child)::after { content: ","; }

/* ── Der Knopf, der das Ausklappfeld öffnet ──
   Bewusst ein <button> und kein <a>: Lays „Link Styles" färben jeden Link im
   Plugin mit !important um (PROJECT.md, Fallstrick 15) — Knöpfe fasst Lay nicht
   an, der Farb-Wettlauf entfällt damit ganz. */
.gfp-team-card__mehr {
  font-family: var(--font-small, var(--font-body, 'Host Grotesk', system-ui, sans-serif));
  font-size: var(--fs-small, 0.875rem);
  line-height: 1.2;
  font-weight: 600;
  /* Ausdrücklich none: Hier steht ein Vorname, und Namen gehören nicht in
     Versalien (Vorgabe 18.9.2026). Lays Textformate können text-transform
     vererben — deshalb hier festschreiben statt sich darauf zu verlassen,
     dass nichts kommt. */
  text-transform: none;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: .85rem 0 0;
  padding: .55rem 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--gfp-team-lime);
  color: #111111;
  cursor: pointer;
  opacity: 0;
  transition: opacity .25s ease, background .2s ease, transform .2s ease;
  /* Der Knopf liegt UNTER der unsichtbaren Schaltfläche (.gfp-team-card__hit,
     z-index 2) — die Inhaltsebene bildet mit z-index 1 einen eigenen
     Stapelkontext, aus dem ihn auch ein höherer z-index nicht heraushebt.
     Klickbar wird er dadurch, dass die Schaltfläche im geöffneten Zustand auf
     pointer-events: none schaltet (am Desktop ohnehin immer, s. u.). */
}

.gfp-team-card__mehr:hover { background: #ffffff; }
.gfp-team-card__mehr:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

.gfp-team-card__mehr-pfeil {
  font-size: 1.1em;
  line-height: 1;
  transition: transform .2s ease;
}

.gfp-team-card__mehr[aria-expanded="true"] .gfp-team-card__mehr-pfeil {
  transform: rotate(180deg);
}

/* ── Silbentrennung nach deutschen Regeln ──
   Betrifft die längeren Fließtexte: die Kurzbiografie im Ausklappfeld und den
   Einleitungstext der Titel-Kachel. Ohne
   Trennung reißen Wörter wie „Kommunikationswissenschaftlerin" große Löcher in
   den Flattersatz.
   NICHT für Name und Rolle — „Marti-nek" oder „Consul-tant" wäre schlechter als
   ein Umbruch an der Wortgrenze (die Rolle steuert ohnehin gfp_text_with_wbr()).
   Voraussetzung ist lang="de": das setzt inc/shortcode-team.php fest am
   Wrapper, weil die Browser sonst nach ihrer Standardsprache trennen
   (PROJECT.md, Fallstrick 10).
   hyphenate-limit-chars: erst Wörter ab 8 Zeichen trennen, mind. 4 Zeichen vor
   und 3 nach dem Trennstrich — verhindert Schnipsel wie „ge-“ am Zeilenende.
   text-wrap: pretty glättet zusätzlich die letzten Zeilen (Browser ohne
   Unterstützung ignorieren beide Angaben). */
.gfp-team-panel__text,
.gfp-team-card__intro-text {
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 8 4 3;
  text-wrap: pretty;
}

/* ── Unsichtbare Schaltfläche über der ganzen Kachel ──
   Macht Antippen und Tastaturbedienung möglich und trägt aria-expanded.
   Der Text darin ist für Screenreader da, nicht fürs Auge. */
.gfp-team-card__hit {
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  /* Das Plus unten rechts als Hinweis, dass hier mehr steckt. */
  display: block;
}

.gfp-team-card__hit-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.gfp-team-card__hit-icon {
  position: absolute;
  top: .9rem;
  right: .9rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gfp-team-lime);
  color: #111111;
  font-family: var(--font-headline, 'League Gothic', 'Arial Narrow', sans-serif);
  font-size: 1.4rem;
  line-height: 1;
  transition: transform .3s ease;
}

/* ── Warum die Klickfläche zeitweise "durchlässig" wird ──
   .gfp-team-card__hit liegt über der ganzen Kachel. Damit landen Mausrad und
   Wischgeste auf dem Button statt in der scrollbaren Inhaltsebene darunter —
   eine lange Kurzbiografie ließ sich dadurch nicht scrollen (gemeldet:
   "sehe einen Scrollbalken, kann ihn aber nicht bedienen").
   Deshalb: sobald die Kachel offen ist (und am Desktop generell, dort öffnet
   ohnehin der Hover), schaltet die Fläche auf pointer-events: none — Scrollen
   und Textmarkieren gehen dann direkt in die Inhaltsebene. Das Plus/×-Icon
   bleibt ausdrücklich klickbar, damit sich die Kachel per Tap wieder schließen
   lässt. Tastaturfokus funktioniert unabhängig von pointer-events weiter. */
.gfp-team-card--open .gfp-team-card__hit { pointer-events: none; }

@media (hover: hover) and (pointer: fine) {
  .gfp-team-card__hit { pointer-events: none; }
}

.gfp-team-card__hit-icon { pointer-events: auto; }

.gfp-team-card__hit:focus-visible {
  outline: 3px solid var(--gfp-team-lime);
  outline-offset: -3px;
}

/* ── Geöffneter Zustand (Stufe 1) ──
   Drei Auslöser mit identischer Wirkung:
   .gfp-team-card--open  → Klick/Tap oder Deeplink (JS)
   :focus-within         → Tastaturfokus auf der Schaltfläche oder dem Knopf
   :hover                → weiter unten, aber nur auf Geräten mit echtem Zeiger
   Bei Änderungen IMMER alle drei Blöcke anfassen. Seit die Biografie im
   Ausklappfeld steht, ist hier nichts mehr scrollbar: Schlagwörter, Name, Rolle
   und Knopf passen immer in die Kachel. Die gesamte frühere Scroll-Mechanik
   (Scroll-Container im Bio-Bereich, min-height: 0, overscroll-behavior,
   gestylte Scrollbalken) ist damit entfallen. */
.gfp-team-card--open .gfp-team-card__inhalt,
.gfp-team-card:focus-within .gfp-team-card__inhalt {
  background: linear-gradient(to top, rgba(17, 17, 17, .78), rgba(17, 17, 17, .62));
}

.gfp-team-card--open .gfp-team-card__photo img,
.gfp-team-card:focus-within .gfp-team-card__photo img {
  filter: blur(7px);
  /* Leichtes Hineinzoomen: sonst werden beim Weichzeichnen die Bildkanten
     durchscheinend und man sieht den Kachelhintergrund durchblitzen. */
  transform: scale(1.08);
}

/* Oben Platz für das ×-Icon; seitlich und unten der normale Innenabstand. */
.gfp-team-card--open .gfp-team-card__inhalt,
.gfp-team-card:focus-within .gfp-team-card__inhalt {
  padding: 3.4rem var(--gfp-team-pad) var(--gfp-team-pad);
}

.gfp-team-card--open .gfp-team-card__tags-wrap,
.gfp-team-card--open .gfp-team-card__mehr-wrap,
.gfp-team-card:focus-within .gfp-team-card__tags-wrap,
.gfp-team-card:focus-within .gfp-team-card__mehr-wrap {
  grid-template-rows: 1fr;
}

.gfp-team-card--open .gfp-team-card__tags,
.gfp-team-card--open .gfp-team-card__mehr,
.gfp-team-card:focus-within .gfp-team-card__tags,
.gfp-team-card:focus-within .gfp-team-card__mehr {
  opacity: 1;
  /* Erst einblenden, wenn die Fläche fast offen ist. */
  transition-delay: .12s;
}

.gfp-team-card--open .gfp-team-card__hit-icon,
.gfp-team-card:focus-within .gfp-team-card__hit-icon {
  transform: rotate(45deg);   /* + wird zu × */
}

/* ── Kachel verschwindet aus der Reihe, solange ihr Feld offen ist ──
   Vorgabe 18.9.2026: Sie stünde sonst doppelt da — einmal in der Reihe und
   einmal im Feld darunter, wo sie in voller Größe wiederholt wird. Die übrigen
   Kacheln rücken nach; die Bewegung dorthin animiert gfp-team.js (FLIP), weil
   Raster-Positionen selbst nicht übergehen können. `display: none` und nicht
   `visibility: hidden`: Ein reservierter, leerer Platz mitten in der Reihe sähe
   nach Fehler aus. */
.gfp-team-card--weg { display: none; }

/* ── Hover: nur auf Geräten mit echtem Zeiger ── */
@media (hover: hover) and (pointer: fine) {
  .gfp-team-card--mit-mehr:hover .gfp-team-card__inhalt {
    background: linear-gradient(to top, rgba(17, 17, 17, .78), rgba(17, 17, 17, .62));
    padding: 3.4rem var(--gfp-team-pad) var(--gfp-team-pad);
  }

  .gfp-team-card--mit-mehr:hover .gfp-team-card__photo img {
    filter: blur(7px);
    transform: scale(1.08);
  }

  .gfp-team-card--mit-mehr:hover .gfp-team-card__tags-wrap,
  .gfp-team-card--mit-mehr:hover .gfp-team-card__mehr-wrap {
    grid-template-rows: 1fr;
  }

  .gfp-team-card--mit-mehr:hover .gfp-team-card__tags,
  .gfp-team-card--mit-mehr:hover .gfp-team-card__mehr {
    opacity: 1;
    transition-delay: .12s;
  }

  .gfp-team-card--mit-mehr:hover .gfp-team-card__hit-icon { transform: rotate(45deg); }
}

/* ── Stufe 2: das Ausklappfeld ──
   Liegt im Markup direkt hinter seiner Kachel; assets/js/gfp-team.js schiebt es
   beim Öffnen hinter die letzte Kachel DERSELBEN Zeile, damit es unter der
   ganzen Zeile aufgeht und nicht mitten hinein. Geschlossen trägt es das
   hidden-Attribut und belegt gar keine Rasterzelle — das ist zugleich die
   Voraussetzung dafür, dass die Zeilenberechnung im JS stimmt (sie misst die
   Kachel-offsetTop, als gäbe es das Feld nicht).
   Ohne JavaScript bleibt es zu; der Knopf in der Kachel tut dann nichts. */
.gfp-team-panel {
  grid-column: 1 / -1;
  display: none;
}

/* Das hidden-Attribut muss stärker sein als die Anzeige-Klasse weiter unten:
   die UA-Regel [hidden] { display: none } wiegt weniger als eine Klasse, ein
   geschlossenes Feld bliebe sonst sichtbar, sobald --aktiv noch dransteht.
   Das JS setzt hidden beim Messen kurzzeitig — genau darauf kommt es an. */
.gfp-team-panel[hidden] { display: none; }

/* Geöffnet: erst sichtbar machen (--aktiv), im nächsten Frame aufklappen
   (--offen). Zwei Klassen, weil ein Übergang von display: none aus nicht
   animiert — dieselbe 0fr→1fr-Technik wie in der Kachel. */
.gfp-team-panel--aktiv {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s ease;
}

.gfp-team-panel--offen { grid-template-rows: 1fr; }

.gfp-team-panel__inner { overflow: hidden; min-height: 0; }

.gfp-team-panel__box {
  position: relative;
  /* ── Breite: drei Kacheln, nicht die ganze Zeile ──
     Vorgabe 18.9.2026: „die volle Breite könnte zu viel sein". Das Feld belegt
     weiterhin die ganze Rasterzeile (grid-column: 1 / -1) — sonst würden die
     nachfolgenden Kacheln rechts daneben rutschen —, aber der sichtbare Kasten
     ist auf drei Kachelbreiten gedeckelt und beginnt links am Raster. Den Wert
     misst gfp-team.js (drei Kacheln + zwei Rasterlücken), weil die Spaltenzahl
     an der Breite der Lay-Zeile hängt. Ohne Skript bleibt es bei voller Breite,
     was auch stimmt. */
  max-width: var(--gfp-panel-breite, 100%);
  /* .6rem statt der Rasterlücke (0.5cqi ≈ 7,6 px): der Pfeil nach oben ist 8 px
     hoch und ragt in diesen Abstand hinein — bei weniger würde ihn das
     overflow: hidden des Wrappers oben abschneiden. */
  margin-top: .6rem;
  background: var(--gfp-team-panel-bg);
  border-radius: var(--gfp-team-radius);
  padding: calc(var(--gfp-team-pad) * 1.5) var(--gfp-team-pad);
  color: #111111;
  /* Zwei Bereiche nebeneinander: links die Kachel in ihrer normalen Größe,
     rechts alles Übrige untereinander. Flex statt Raster, weil die Kachel eine
     feste Breite hat und der Rest schlicht den verbleibenden Platz nimmt. */
  display: flex;
  /* stretch, damit der rechte Bereich so hoch wird wie die Kachel — nur so
     lässt sich Kontakt/Kurse unten anlegen (margin-top: auto weiter unten) und
     das Feld wirkt nicht oben vollgeschrieben und unten leer. Die Kachel selbst
     darf NICHT mitwachsen (align-self), sonst zerrt ein langer Text ihr 3:4
     auseinander. */
  align-items: stretch;
  gap: calc(var(--gfp-team-pad) * 1.5);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .3s ease, transform .3s ease;
}

.gfp-team-panel--offen .gfp-team-panel__box {
  opacity: 1;
  transform: none;
  transition-delay: .12s;
}

/* Einen Pfeil auf die Kachel braucht es nicht mehr: Die Kachel IST im Feld,
   und aus der Reihe darüber ist sie verschwunden.

   ── Spalte 1: die Kachel selbst ──
   Gleiche Bauweise wie .gfp-team-card: Abstandhalter im Fluss statt
   aspect-ratio (Safari, s. PROJECT.md Architektur 9), Foto absolut darüber,
   Name und Rolle auf einem flachen Verlauf am unteren Rand. Die Breite kommt
   gemessen aus dem Raster (--gfp-panel-foto-breite), damit das Foto exakt so
   groß ist wie oben in der Reihe. */
.gfp-team-panel__karte {
  position: relative;
  align-self: flex-start;
  /* flex: 0 0 auto ist hier PFLICHT, nicht Kosmetik: Ohne das gilt der
     Standard flex-shrink: 1, und die Kachel wird schmaler, sobald der Text
     daneben viel Platz braucht. Live sah man dadurch bei Personen mit langer
     Biografie eine deutlich kleinere Kachel als bei den anderen, und der Name
     darauf brach mitten im Wort um („Reinhar / d Bacher") — gemeldet 18.9.2026.
     Die Kachel im Feld muss exakt so groß sein wie die in der Reihe, sonst
     stimmt die ganze Idee „die Kachel zieht um" nicht mehr. */
  flex: 0 0 auto;
  width: var(--gfp-panel-foto-breite, 280px);
  max-width: 100%;
  border-radius: var(--gfp-team-radius);
  overflow: hidden;
  background: #ececec;
  isolation: isolate;
  /* Landet mit — als käme sie aus der Reihe darüber. Bewusst ein ÜBERGANG und
     keine @keyframes-Animation mit fill-mode: both: Eine Animation, die aus
     irgendeinem Grund nicht startet, ließe die Kachel dauerhaft im Anfangsbild
     stehen, also unsichtbar. Ein Übergang setzt beim Klassenwechsel sofort den
     Zielwert und interpoliert nur dorthin — läuft er nicht, ist die Kachel
     einfach sofort da (s. PROJECT.md, Fallstrick 24). */
  opacity: 0;
  transform: translateY(-14px) scale(.97);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2, .7, .3, 1);
}

.gfp-team-panel--offen .gfp-team-panel__karte {
  opacity: 1;
  transform: none;
  transition-delay: .06s;
}

.gfp-team-panel__karte::before {
  content: "";
  display: block;
  padding-top: 133.333%;   /* 3:4 wie die Kachel */
}

.gfp-team-panel__karte-foto {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gfp-team-panel__karte-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gfp-team-panel__karte-text {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--gfp-team-pad);
  background: linear-gradient(to top,
              rgba(0, 0, 0, .8) 0%,
              rgba(0, 0, 0, .42) 15%,
              rgba(0, 0, 0, 0) 100%);
}

/* Name und Rolle stehen auch im geöffneten Feld — ausdrückliche Vorgabe.
   Hier liegen sie auf dem Foto, deshalb weiß wie auf der Kachel. */
.gfp-team-panel__name {
  font-family: var(--font-body-lg, var(--font-body, 'Host Grotesk', system-ui, sans-serif));
  font-size: var(--fs-body-lg, 1.125rem);
  line-height: var(--lh-body-lg, 1.3);
  letter-spacing: var(--ls-body-lg, 0);
  font-weight: var(--fw-body-lg, 400);
  text-transform: var(--tt-body-lg, none);
  color: #ffffff;
  margin: 0;
  overflow-wrap: break-word;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 2px 14px rgba(0, 0, 0, .55);
}

.gfp-team-panel__role {
  font-family: var(--font-small, var(--font-body, 'Host Grotesk', system-ui, sans-serif));
  font-size: var(--fs-small, 0.875rem);
  line-height: var(--lh-small, 1.4);
  color: rgba(255, 255, 255, .82);
  margin: .25rem 0 0;
  overflow-wrap: break-word;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 2px 14px rgba(0, 0, 0, .55);
}

/* ── Rechts daneben: alles Übrige untereinander ──
   min-width: 0, sonst verhindert ein langer Kurstitel oder eine lange
   E-Mail-Adresse, dass der Bereich schmaler wird als sein Inhalt, und das Feld
   wächst über seine drei Kachelbreiten hinaus. */
.gfp-team-panel__daten {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  /* Platz für die beiden Symbole oben rechts. */
  padding-right: 4.6rem;
}

.gfp-team-panel__haupt {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

/* Wie auf der Kachel Fließtext mit Komma (s. dort), nur dunkel auf hellem Grund. */
.gfp-team-panel__tags {
  list-style: none;
  font-family: var(--font-small, var(--font-body, 'Host Grotesk', system-ui, sans-serif));
  font-size: var(--fs-small, 0.875rem);
  line-height: var(--lh-small, 1.55);
  color: rgba(0, 0, 0, .55);
  margin: 0;
  padding: 0;
  overflow-wrap: break-word;
}

.gfp-team-panel__tag { display: inline; }
.gfp-team-panel__tag:not(:last-child)::after { content: ","; }

/* ── Biografie ── */
.gfp-team-panel__text {
  font-family: var(--font-small, var(--font-body, 'Host Grotesk', system-ui, sans-serif));
  font-size: var(--fs-small, 0.875rem);
  line-height: var(--lh-small, 1.6);
  letter-spacing: var(--ls-small, 0);
  font-weight: var(--fw-small, 400);
  /* Variable-Font-Regler aus „Small" (z. B. "wght" 500) — fehlte bis
     27.10.2026, der Text stand dadurch dünner als eingestellt und der
     Abstand zu Fett (Lay: "wght" 800) wirkte nicht wie gewollt. */
  font-variation-settings: var(--fvs-small, normal);
  color: rgba(0, 0, 0, .78);
  overflow-wrap: break-word;
  /* Deckel auf die ZEILENLÄNGE, nicht auf die Spalte: Die mittlere Spur ist ein
     fr-Anteil und hat damit keine Obergrenze — auf einem 2560-px-Bildschirm
     stünden sonst weit über hundert Zeichen in einer Zeile, und das Auge
     verliert am Zeilenende die nächste Zeile. 62ch ist die übliche Obergrenze
     für Fließtext. */
  max-width: 62ch;
}

.gfp-team-panel__text p { margin: 0; }

/* Fett (**Text** im Profil → <strong>). font-weight allein reicht nicht: Seit
   die Schrift in WordPress liegt statt bei Google (27.10.2026), meldet ihr
   @font-face nur EIN Gewicht — der Browser wählt dann keinen fetten Schnitt,
   und eine aus dem Format geerbte "wght"-Achse würde ihn ohnehin überstimmen.
   Die Achse muss mit (wie .kurs-body strong in gfp-kurse.css). Hat Lay für
   „Small" einen eigenen Fett-Stil, gewinnt der: gfp_kurse_fett_css() hängt ihn
   mit höherer Spezifität (.gfp-team …) ans Inline-CSS. */
.gfp-team-panel__text strong {
  font-weight: 700;
  font-variation-settings: "wght" 700;
}

/* ── Spalte 3: Kontakt, Kurse, Weiterleiten ── */
/* Kontakt und Kurse stehen nebeneinander, solange Platz ist — untereinander
   wären es bei kurzen Listen zwei fast leere Blöcke. Und sie sitzen unten,
   auf Höhe der Kachelunterkante. */
.gfp-team-panel__meta {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
}

.gfp-team-panel__block { min-width: 0; }

.gfp-team-panel__block-titel {
  font-family: var(--font-small, var(--font-body, 'Host Grotesk', system-ui, sans-serif));
  font-size: calc(var(--fs-small, 0.875rem) * .88);
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(0, 0, 0, .5);
  margin: 0 0 .5rem;
}

/* Kontakt und Kurse stehen als KOMMAZEILE, nicht untereinander (Vorgabe
   18.9.2026). Gleiche Bauweise wie bei den Schlagwörtern: Liste im Markup,
   Inline-Darstellung, Komma aus ::after — so bricht die Zeile wie Fließtext
   um und kein Trennzeichen landet am Zeilenanfang. */
.gfp-team-panel__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-small, 0.875rem);
  line-height: var(--lh-small, 1.55);
}

.gfp-team-panel__liste > li { display: inline; }
.gfp-team-panel__liste > li:not(:last-child)::after { content: ","; }

/* ── Diese Links gehören Lay, nicht dem Plugin ──
   Sie tragen im Markup die Klasse `laylink2`, also Lays „Link Style 2"
   (Lay Options → Links in Texts). Farbe, Schriftstärke, Unterstreichung und
   Mouseover stellt die Redaktion dort ein — das Plugin darf hier deshalb
   NICHTS davon festschreiben.

   Das ist die bewusste Ausnahme von Fallstrick 15: Bei der Abschluss-Kachel
   wird Lays Linkfarbe mit -webkit-text-fill-color abgewehrt, weil dort lime auf
   lime stünde. Hier ist Lays Stil das Ziel, also fällt jede Abwehr weg — ein
   stehengebliebenes -webkit-text-fill-color würde Link Style 2 unsichtbar
   machen, ohne dass irgendwo ein Fehler erschiene.

   Was bleibt, ist nur, was Link Style 2 gar nicht regelt: Schriftfamilie und
   -größe (Lays Textformat „Small") und das Umbruchverhalten.

   Die Farbe steht als Notnagel mit EINER Klasse (also niedrigster Spezifität)
   dabei: Greift Lays Regel aus irgendeinem Grund nicht, stünde hier sonst ein
   blau unterstrichener Browser-Standardlink. Jeder Lay-Selektor für laylink2
   ist spezifischer und gewinnt. */
.gfp-team-panel__link {
  color: #111111;
}

.gfp-team .gfp-team-panel__link {
  font-family: var(--font-small, var(--font-body, 'Host Grotesk', system-ui, sans-serif));
  font-size: var(--fs-small, 0.875rem);
  line-height: var(--lh-small, 1.55);
  overflow-wrap: break-word;
}

/* Telefonnummern nicht umbrechen: „+43 1 234 56 78" würde sonst mitten in der
   Nummer über zwei Zeilen laufen. */
.gfp-team .gfp-team-panel__link--tel { white-space: nowrap; }

.gfp-team-panel__teilen-status {
  font-family: var(--font-small, var(--font-body, 'Host Grotesk', system-ui, sans-serif));
  font-size: calc(var(--fs-small, 0.875rem) * .92);
  line-height: 1.2;
  color: rgba(0, 0, 0, .6);
  white-space: nowrap;
}

/* ── Werkzeuge oben rechts: Link kopieren + Schließen ──
   Beide gleich groß, beide nur ein Symbol. Der Kasten ist rechts verankert und
   wächst nach LINKS — die Rückmeldung „Link kopiert." kann dadurch neben den
   Symbolen erscheinen, ohne irgendetwas zu verschieben. */
.gfp-team-panel__werkzeuge {
  position: absolute;
  top: .7rem;
  right: .7rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.gfp-team-panel__schliessen,
.gfp-team-panel__teilen-knopf {
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .06);
  color: #111111;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: background .2s ease;
}

.gfp-team-panel__schliessen {
  font-family: var(--font-headline, 'League Gothic', 'Arial Narrow', sans-serif);
  font-size: 1.4rem;
}

.gfp-team-panel__schliessen:hover,
.gfp-team-panel__teilen-knopf:hover { background: var(--gfp-team-lime); }

/* Beschriftung nur für Vorleseprogramme — sichtbar ist das Symbol, und der
   title-Text erscheint beim Verweilen mit der Maus. */
.gfp-team-panel__knopf-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Kein Fokusrahmen um das Feld selbst: Es bekommt beim Öffnen den Fokus (die
   Kachel, auf der er lag, ist ja gerade verschwunden), und ein lime Rahmen um
   die ganze Rasterzeile sah aus wie ein Fehler. Die Knöpfe darin behalten ihren
   Rahmen — dort ist er die einzige Anzeige, wo man gerade steht. */
.gfp-team-panel:focus,
.gfp-team-panel:focus-visible { outline: none; }

.gfp-team-panel__schliessen:focus-visible,
.gfp-team-panel__teilen-knopf:focus-visible {
  outline: 3px solid var(--gfp-team-lime);
  outline-offset: 2px;
}

/* ── Ausklappfeld auf mittleren Breiten ──
   Ab hier wird die dreispaltige Aufteilung zu eng für die Biografie: Person und
   Biografie nebeneinander, Kontakt/Kurse darunter über die volle Breite. */
@media (max-width: 760px) {
  /* Kachel oben, alles andere darunter. */
  .gfp-team-panel__box { flex-direction: column; }
  .gfp-team-panel__daten { width: 100%; padding-right: 0; }
}

/* ── Titel-Kachel (erste Position im Raster) ── */
.gfp-team-card--intro {
  /* Bezugsgröße für die Schrift der Überschrift (cqi-Einheiten unten). */
  container-type: inline-size;
  background: var(--gfp-team-intro-bg);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  /* Titel oben, Text unten — wie in der Vorlage. */
  justify-content: space-between;
  padding: var(--gfp-team-pad);
  height: auto;
}

/* Kein Abstandhalter: diese Kachel hat echten Inhalt im Fluss (Titel + Text),
   der Abstandhalter käme oben DRAUF und würde sie zu hoch machen. Ihre Höhe
   kommt stattdessen vom Raster selbst (align-items: stretch → so hoch wie die
   Personen-Kacheln der Zeile); steht sie allein in einer Zeile (Handy,
   einspaltig), ist sie so hoch wie ihr Inhalt. */
.gfp-team-card--intro::before { content: none; }

.gfp-team-card__intro-titel {
  margin: 0;
  color: #111111;
  /* Zeilen gleichmäßig verteilen statt "&" allein auf einer Zeile stehen zu
     lassen (Browser ohne Unterstützung ignorieren es). */
  text-wrap: balance;
  /* ── Größe: so groß wie Lays H2, aber nie breiter als die Kachel ──
     Ein fester Deckel war zu grob (die Vorgabe war ausdrücklich "wieder groß"),
     gar kein Deckel aber auch nicht: „LERNARCHITEKT*INNEN" ist EIN Wort, kann
     also nicht umbrechen und lief in League Gothic quer aus der Kachel heraus.
     10cqi = 10 % der Kachelbreite pro Schriftgrad: kurze Überschriften behalten
     Lays volle H2-Größe, lange schrumpfen nur so weit wie nötig.
     overflow-wrap ist die Notbremse für den Fall, dass ein Wort selbst dann
     noch zu lang ist (sehr schmale Kachel, sehr langes Wort). */
  /* Volle H2-Größe bleibt. Damit ein einzelnes langes Wort
     („LERNARCHITEKT*INNEN") die Kachel nicht sprengt, wird es getrennt statt
     die Schrift zu verkleinern — Silbentrennung nach deutschen Regeln, das
     lang="de" dafür sitzt am .gfp-team-Wrapper.
     KEINE automatische Silbentrennung in Überschriften: Der Browser trennte
     „Lerne unser gesamtes Team kennen" zu „GE-/SAMTES … KEN-/NEN" — in
     League-Gothic-Versalien sieht das nach Fehler aus. Umbrochen wird nur an
     Leerzeichen und an den `|`-Trennstellen, die die Redaktion selbst setzt
     (titel="Netzwerk|partner*innen"). overflow-wrap bleibt als Notbremse für
     den Fall, dass ein einzelnes Wort selbst dann noch breiter ist als die
     Kachel — dann ist ein harter Umbruch immer noch besser als Text, der aus
     der Kachel läuft.

     ── manual, NICHT none ──
     Hier stand bis 18.9.2026 `hyphens: none`, und damit war die `|`-Trennhilfe
     wirkungslos: `none` heißt laut Spezifikation „nicht trennen, AUCH NICHT an
     Stellen, die im Wort ausdrücklich dafür markiert sind" — es schaltet also
     genau das weiche Trennzeichen ab, das `|` erzeugt. Gemeldet mit
     titel="Kooperations|partner", nachgemessen in einem 190-px-Kasten:
     mit `none` eine Zeile und 237 px Inhalt (läuft heraus), mit `manual` sauber
     umbrochen. `manual` trennt ausschließlich an den gesetzten Stellen,
     automatisch wird weiterhin nicht getrennt — die Absicht von damals bleibt
     also erhalten, nur der falsche Wert ist weg. */
  font-size: var(--fs-h2, clamp(1.5rem, 3vw, 2.5rem));
  -webkit-hyphens: manual;
  hyphens: manual;
  overflow-wrap: break-word;
}

.gfp-team-card__intro-text {
  font-family: var(--font-small, var(--font-body, 'Host Grotesk', system-ui, sans-serif));
  font-size: var(--fs-small, 0.875rem);
  line-height: var(--lh-small, 1.6);
  letter-spacing: var(--ls-small, 0);
  font-weight: var(--fw-small, 400);
  text-transform: var(--tt-small, none);
  color: rgba(0, 0, 0, .68);
  margin: 1.5rem 0 0;
  overflow-wrap: break-word;
}

/* ── Abschluss-Kachel („Lerne unser gesamtes Team kennen") ──
   Kommt nur, wenn der Shortcode cta_titel setzt (s. inc/shortcode-team.php).
   Ganze Kachel ist der Link. Kein Abstandhalter: die Höhe liefert die Zeile
   (align-items: stretch), genau wie bei der Titel-Kachel. */
.gfp-team-card--cta {
  container-type: inline-size;
  /* Bewusst dieselbe Optik wie die Titel-Kachel (heller Kasten, dunkler Text),
     nicht lime — Vorgabe des Users: "das von der Startseite soll ausschauen wie
     dieses Kästchen". Oben die Überschrift, unten statt Fließtext ein Pfeil. */
  background: var(--gfp-team-intro-bg);
  color: #111111;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  padding: var(--gfp-team-pad);
  box-shadow: none;
  transition: background .2s ease, transform .25s ease;
}

.gfp-team-card--cta::before { content: none; }

/* Mouseover: nur die Fläche wechselt auf das GfP-Grün. */
.gfp-team-card--cta:hover,
.gfp-team-card--cta:focus-visible {
  background: var(--gfp-team-lime);
  transform: translateY(-3px);
}

/* ── Schriftfarbe gegen Lays Link-Styles durchsetzen ──
   Die Kachel ist ein <a>. Lay hat unter *Lay Options → Link Styles* für
   „Link Style 1" als Mouseover-Textfarbe #cad55a (dasselbe Lime wie unsere
   Hover-Fläche) hinterlegt, mit aktivem **Force Mouseover Styles** — Lay
   schreibt diese Regel also mit !important. Ergebnis live: lime Schrift auf
   limer Fläche, praktisch unlesbar.
   Deshalb hier alle Link-Zustände explizit, mit !important UND zusätzlich über
   den Wrapper .gfp-team qualifiziert: das hebt die Spezifität auf drei Klassen
   und schlägt Lays Regel auch dann, wenn sie selbst über eine Klasse kommt.
   Die Kinder brauchen nichts: Titel und Fußzeile haben keine eigene Farbe und
   erben sie vom <a>. */
.gfp-team .gfp-team-card--cta,
.gfp-team .gfp-team-card--cta:link,
.gfp-team .gfp-team-card--cta:visited,
.gfp-team .gfp-team-card--cta:hover,
.gfp-team .gfp-team-card--cta:focus,
.gfp-team .gfp-team-card--cta:active,
.gfp-team .gfp-team-card--cta .gfp-team-card__cta-titel,
.gfp-team .gfp-team-card--cta .gfp-team-card__cta-fuss,
.gfp-team .gfp-team-card--cta:hover .gfp-team-card__cta-titel,
.gfp-team .gfp-team-card--cta:hover .gfp-team-card__cta-fuss,
.gfp-team .gfp-team-card--cta:focus .gfp-team-card__cta-titel,
.gfp-team .gfp-team-card--cta:focus .gfp-team-card__cta-fuss {
  color: #111111 !important;
  text-decoration: none !important;
}

/* ── Letzte Instanz: -webkit-text-fill-color ──
   Der Spezifitäts-Wettlauf mit Lay ist nicht sicher zu gewinnen: Lays Regel für
   die Link-Styles kann eine ID enthalten und die Kinder mit `*` einschließen —
   dann verliert jede Klassenregel, auch mit !important. Diese Eigenschaft
   bestimmt die tatsächliche FÜLLFARBE des Textes und schlägt `color` beim
   Zeichnen; Lay setzt sie nirgends. Damit ist die Schrift auf der Kachel
   schwarz, ganz gleich welche color-Regel die Kaskade gewinnt.
   Unterstützt von allen aktuellen Browsern (Chrome, Safari, Firefox, Edge). */
.gfp-team .gfp-team-card--cta,
.gfp-team .gfp-team-card--cta *,
.gfp-team .gfp-team-card--cta:hover,
.gfp-team .gfp-team-card--cta:hover *,
.gfp-team .gfp-team-card--cta:focus,
.gfp-team .gfp-team-card--cta:focus * {
  -webkit-text-fill-color: #111111 !important;
}

/* Der gedämpfte Zusatztext (cta_text) behält seinen Ton. */
.gfp-team .gfp-team-card--cta .gfp-team-card__cta-text,
.gfp-team .gfp-team-card--cta:hover .gfp-team-card__cta-text {
  -webkit-text-fill-color: rgba(0, 0, 0, .72) !important;
}

/* Der kleine Zusatztext (cta_text) behält seinen gedämpften Ton, aber ebenfalls
   gegen Lay abgesichert. */
.gfp-team .gfp-team-card--cta .gfp-team-card__cta-text,
.gfp-team .gfp-team-card--cta:hover .gfp-team-card__cta-text {
  color: rgba(0, 0, 0, .72) !important;
}

.gfp-team-card--cta:focus-visible {
  outline: 3px solid #111111;
  outline-offset: -3px;
}

.gfp-team-card__cta-titel {
  /* Block, nicht inline: sonst setzt sich die Fußzeile („Zum Team →") in
     dieselbe Zeile wie das Titelende — live so gesehen. */
  display: block;
  font-family: var(--font-h2, var(--font-headline, 'League Gothic', 'Arial Narrow', sans-serif));
  font-size: var(--fs-h2, clamp(1.5rem, 3vw, 2.5rem));
  line-height: var(--lh-h2, 1.05);
  letter-spacing: var(--ls-h2, 0.01em);
  font-weight: var(--fw-h2, 400);
  text-transform: var(--tt-h2, uppercase);
  font-variation-settings: var(--fvs-h2, normal);
  text-wrap: balance;
  /* Gleiche Absicherung wie bei der Titel-Kachel (s. dort). */
  /* Volle H2-Größe bleibt. Damit ein einzelnes langes Wort
     („LERNARCHITEKT*INNEN") die Kachel nicht sprengt, wird es getrennt statt
     die Schrift zu verkleinern — Silbentrennung nach deutschen Regeln, das
     lang="de" dafür sitzt am .gfp-team-Wrapper.
     KEINE automatische Silbentrennung in Überschriften: Der Browser trennte
     „Lerne unser gesamtes Team kennen" zu „GE-/SAMTES … KEN-/NEN" — in
     League-Gothic-Versalien sieht das nach Fehler aus. Umbrochen wird nur an
     Leerzeichen und an den `|`-Trennstellen, die die Redaktion selbst setzt
     (titel="Netzwerk|partner*innen"). overflow-wrap bleibt als Notbremse für
     den Fall, dass ein einzelnes Wort selbst dann noch breiter ist als die
     Kachel — dann ist ein harter Umbruch immer noch besser als Text, der aus
     der Kachel läuft.

     ── manual, NICHT none ──
     Hier stand bis 18.9.2026 `hyphens: none`, und damit war die `|`-Trennhilfe
     wirkungslos: `none` heißt laut Spezifikation „nicht trennen, AUCH NICHT an
     Stellen, die im Wort ausdrücklich dafür markiert sind" — es schaltet also
     genau das weiche Trennzeichen ab, das `|` erzeugt. Gemeldet mit
     titel="Kooperations|partner", nachgemessen in einem 190-px-Kasten:
     mit `none` eine Zeile und 237 px Inhalt (läuft heraus), mit `manual` sauber
     umbrochen. `manual` trennt ausschließlich an den gesetzten Stellen,
     automatisch wird weiterhin nicht getrennt — die Absicht von damals bleibt
     also erhalten, nur der falsche Wert ist weg. */
  font-size: var(--fs-h2, clamp(1.5rem, 3vw, 2.5rem));
  -webkit-hyphens: manual;
  hyphens: manual;
  overflow-wrap: break-word;
}

.gfp-team-card__cta-text {
  font-family: var(--font-small, var(--font-body, 'Host Grotesk', system-ui, sans-serif));
  font-size: var(--fs-small, 0.875rem);
  line-height: var(--lh-small, 1.5);
  color: rgba(0, 0, 0, .72);
  margin-top: -.35rem;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* Fußzeile der Kachel: standardmäßig nur der Pfeil (Vorgabe). Wird im
   Shortcode cta_label gesetzt, steht der Text links daneben. */
.gfp-team-card__cta-fuss {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: auto;
  font-family: var(--font-label, var(--font-headline, 'League Gothic', 'Arial Narrow', sans-serif));
  font-size: var(--fs-label, 1.2rem);
  letter-spacing: var(--ls-label, 0.06em);
  text-transform: var(--tt-label, uppercase);
  font-variation-settings: var(--fvs-label, normal);
}

.gfp-team-card__cta-pfeil {
  font-size: 2.4rem;
  line-height: 1;
  transition: transform .25s ease;
}

.gfp-team-card--cta:hover .gfp-team-card__cta-pfeil { transform: translateX(6px); }

/* ── Mobil ── */
@media (max-width: 600px) {
  /* Zwei Spalten auch am Handy (User-Vorgabe). Geschlossen ist das
     unproblematisch — in der Kachel stehen nur Name und Rolle. Angetippt
     kommen Schlagwörter und Knopf dazu; in einer ~175 px breiten Kachel
     zerfielen die Schlagwörter dabei in einzelne Wortfetzen, deshalb nimmt die
     GEÖFFNETE Kachel unten die volle Breite ein (Regel weiter unten). */
  .gfp-team__grid,
  .gfp-team__grid--home { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .gfp-team__grid,
  .gfp-team__grid--home { gap: .6rem; }

  /* Abschluss-Kachel über beide Spalten — als Abschluss der Aufzählung, nicht
     als halbe Kachel neben einer Person. */
  .gfp-team-card--cta { grid-column: 1 / -1; }

  .gfp-team-card__name { font-size: 1rem; }

  .gfp-team-card__hit-icon {
    width: 1.6rem;
    height: 1.6rem;
    top: .6rem;
    right: .6rem;
    font-size: 1.1rem;
  }

  /* ── Geöffnete Kachel: volle Breite ──
     Angetippt spannt die Kachel beide Spalten, damit Schlagwörter und Knopf
     nebeneinander Platz haben. Die Nachbarn rutschen automatisch weiter —
     reines Grid, kein JS.
     Dazu ein flacheres Format: 3:4 auf voller Breite wäre fast 500 px hoch. */
  .gfp-team__grid .gfp-team-card--open { grid-column: 1 / -1; }

  /* ── Geöffnete Kachel wächst am Handy mit ihrem Inhalt ──
     Der Abstandhalter entfällt und die Inhaltsebene steht im Textfluss
     (position: relative) — die Kachel ist damit genau so hoch wie Schlagwörter,
     Name, Rolle und Knopf zusammen. Das Foto (absolut, inset: 0) füllt die neue
     Höhe automatisch; min-height hält sie trotzdem auf Kachelformat. */
  .gfp-team__grid .gfp-team-card--open::before { padding-top: 0; }

  .gfp-team-card--open .gfp-team-card__inhalt {
    position: relative;
    min-height: 240px;
    overflow: visible;
    /* oben Platz für das (am Handy kleinere) ×-Icon */
    padding: 2.9rem var(--gfp-team-pad) var(--gfp-team-pad);
  }

  /* In der einspaltigen Handy-Ansicht ist die Kachel so breit, dass 3:4 eine
     riesige leere Fläche zwischen Titel und Text erzeugt — hier nur so hoch
     wie ihr Inhalt. */
  /* ── Titel-Kachel am Handy über die volle Breite ──
     In der halben Spalte (~190 px) zerfällt die League-Gothic-Überschrift in
     Fetzen — "&" landet allein auf einer Zeile — und der Text steht bis an den
     Rand. Über beide Spalten gezogen liest sie sich wie eine Sektionsüberschrift
     und braucht trotzdem kaum Höhe (kein Abstandhalter, s. --intro::before). */
  .gfp-team__grid .gfp-team-card--intro { grid-column: 1 / -1; }
  /* Volle Breite statt zwei Zeilen — s. Kommentar bei --flach oben. */
  .gfp-team__grid--flach .gfp-team-card--intro { grid-row: auto; }





  .gfp-team-card__intro-text { margin-top: 1rem; }

  /* ── Ausklappfeld am Handy ──
     Der Innenabstand des Feldes bleibt bei den 20 px der Kacheln; nur oben wird
     weniger gebraucht, weil Foto und Name untereinander stehen. Der Pfeil
     entfällt: bei zwei Spalten ist ohnehin offensichtlich, zu welcher Kachel
     das Feld gehört, und die angetippte Kachel spannt beide Spalten. */
  .gfp-team-panel__box {
    padding: var(--gfp-team-pad);
    gap: 1.25rem;
  }

  .gfp-team-panel__box::before { display: none; }

  .gfp-team-panel__meta { flex-direction: column; gap: 1.25rem; }

  /* Platz für die beiden Symbole oben rechts im Feld. Sie werden dafür etwas
     kleiner — sonst frisst der Freiraum die halbe Namensspalte. */
  .gfp-team-panel__schliessen,
  .gfp-team-panel__teilen-knopf { width: 1.7rem; height: 1.7rem; }
  .gfp-team-panel__schliessen { font-size: 1.2rem; }
  .gfp-team-panel__teilen-knopf svg { width: 14px; height: 14px; }

  /* Die Kachel im Feld bekommt oben rechts Platz für die beiden Symbole,
     indem sie etwas schmaler ist als die Feldbreite. */
  .gfp-team-panel__karte { width: min(var(--gfp-panel-foto-breite, 280px), calc(100% - 4.2rem)); }
  .gfp-team-panel__daten { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .gfp-team-card__photo img,
  .gfp-team-card__tags-wrap,
  .gfp-team-card__mehr-wrap,
  .gfp-team-card__tags,
  .gfp-team-card__mehr,
  .gfp-team-card__inhalt,
  .gfp-team-card__hit-icon,
  .gfp-team-panel--aktiv,
  .gfp-team-panel__box { transition: none; }

  /* Ohne Übergang darf das Feld nicht unsichtbar bleiben: die Deckkraft hängt
     sonst an einer Animation, die nie läuft. Dasselbe gilt für die Kachel im
     Feld — ihre Deckkraft kommt aus einer @keyframes-Animation. */
  .gfp-team-panel__box,
  .gfp-team-panel__karte { opacity: 1; transform: none; transition: none; }

  /* Ohne Bewegung auch nicht hineinzoomen — nur weichzeichnen. */
  .gfp-team-card--open .gfp-team-card__photo img,
  .gfp-team-card:focus-within .gfp-team-card__photo img { transform: none; }
}