/*
 * b'steuern — Teamseite
 * team-page.css
 *
 * Enthält NUR, was Webflow nativ nicht (sauber) kann:
 *   1. 3D-Kartendrehung (backface-visibility, preserve-3d)
 *   2. Farbsystem über CMS-Feld (--k-akzent), Kontrast vom Script
 *   3. Styles für JS-generierte Elemente (Filter-Chips)
 *   4. Ecken-Button mit Icon-Wechsel per Hover
 *   5. „neu mischen"-Button (Rotation + Hard Shadow)
 *   6. „nach oben"-Pille
 *   7. Join-Karten-Vorlage (versteckt bis Script-Start)
 *
 * Layout, Typografie, Abstände: alles im Webflow Designer.
 * Alle @media-Queries konsolidiert am Dateiende (absteigend).
 *
 * 15.10.2026: Champagne #F9F4EC statt Altwert #F5EFE3,
 *             Handy (≤ 479 px) zweispaltig mit kompakter Karte.
 * 19.10.2026: Abschnitt 9, Agenten-Karte mit KI-Zeichen.
 */

/* ─────────────────────────────────────────────
   1. FARBSYSTEM  (Weg B)
   Akzentfarbe kommt pro Person aus dem CMS-Feld
   „Akzent-Hex" → Custom Attribute style="--k-akzent:#…"
   am .team-item. Kontrastfarbe (Text auf der Rück-
   seite) wählt das JS anhand der Helligkeit und setzt
   --k-kontrast. Fallback: Indigo auf Champagne.
   Das Portrait bringt seine Hintergrundfarbe selbst
   mit (ins Foto eingebrannt) — CSS färbt es nicht.
   ───────────────────────────────────────────── */

.team-page .team-item {
  --k-akzent:   #3D2BD5;
  --k-kontrast: #F9F4EC;
}

/* Bildfläche: neutral, das Foto trägt die Farbe */
.team-page .karte-bild {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;          /* zwingt Quadrat — Bild wird nie angeschnitten */
  overflow: hidden;
  background: #F9F4EC;
}
/* Bauhaus-Formen: liegen im Hintergrund, füllen das Quadrat */
.team-page .karte-bild > svg,
.team-page .karte-bild .karte-form-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Portrait: quadratisch, formatgleich, davor — nie beschnitten */
.team-page .karte-portrait,
.team-page .karte-bild img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;          /* ganzes 1000×1000 sichtbar, kein Anschnitt */
  object-position: bottom center;
}

/* Rückseite + Ecke: Akzent aus dem CMS */
.team-page .karte-hinten { background: var(--k-akzent); }
/* Verhindert, dass ein einzelnes Zeichen (z. B. das Euro-
   Zeichen) allein in die letzte Zeile rutscht. */
.team-page .rueck-tipp {
  text-wrap: pretty;
  hyphens: auto;
}

.team-page .karte-hinten .rueck-label,
.team-page .karte-hinten .rueck-name  { color: var(--k-kontrast); opacity: 0.6; }
.team-page .karte-hinten .rueck-tipp  { color: var(--k-kontrast); }

.team-page .karte-thema  { color: #3D2BD5; }

/* „Mehr“-Link auf der Rueckseite (Link-Element mit Attribut data-mehr,
   CMS-Felder Mehr-Link, Mehr-Linktext). Bewusst ohne eigene Webflow-Klasse.
   Leere Felder bekommen von Webflow .w-dyn-bind-empty: dann ausblenden. */
.team-page [data-mehr] {
  display: inline-block;
  margin-top: 0.875rem;          /* 14px */
  font-size: 0.8125rem;          /* 13px */
  font-weight: 500;
  line-height: 1.3;
  color: var(--k-kontrast);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: opacity 150ms ease;
}
.team-page [data-mehr]:hover { opacity: 0.75; }
.team-page [data-mehr]:focus-visible {
  outline: 2px solid var(--k-kontrast);
  outline-offset: 2px;
}
.team-page [data-mehr].w-dyn-bind-empty,
.team-page [data-mehr]:empty { display: none; }

/* -----------------------------------------------
   1b. THEMEN
   Vorderseite: umrandete Badges, max. 2 sichtbar,
                darunter "+N weitere" (vom JS gefuellt).
   Rueckseite:  alle Themen als Badges.
   Sechs Option-Felder Thema 1-6 rendern als
   .thema-name. Leere Felder werden ausgeblendet.
   ----------------------------------------------- */

/* --- VORDERSEITE: Badges --- */
.team-page .karte-thema {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;                 /* 6px */
  margin-top: 0.5625rem;         /* 9px */
  padding-right: 2.875rem;       /* 46px - Platz fuer Ecken-Button */
}

.team-page .karte-thema .thema-name {
  overflow-wrap: break-word;
  min-width: 0;
  font-size: 0.75rem;            /* 12px */
  font-weight: 500;
  line-height: 1;
  padding: 0.375rem 0.5625rem;   /* 6px 9px */
  border: 1px solid rgba(14, 12, 28, 0.14);
  border-radius: 0;
  color: var(--k-badge, #3D2BD5);
}

/* leere Felder verschwinden */
.team-page .thema-name:empty,
.team-page .thema-name.w-dyn-bind-empty { display: none; }

/* nur die ersten zwei Badges zeigen */
.team-page .karte-thema .thema-name:nth-child(n+3) { display: none; }

/* "+N weitere" */
.team-page .thema-mehr {
  height: 1.125rem;              /* 18px */
  margin-top: 0.25rem;           /* 4px */
  padding-right: 2.875rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.125rem;
  color: rgba(14, 12, 28, 0.45);
}
.team-page .thema-mehr:empty { height: 1.125rem; }

/* "folgt in Kuerze", wenn keine Themen */
.team-page .thema-leer {
  font-size: 0.8125rem;          /* 13px */
  color: rgba(14, 12, 28, 0.4);
}

/* --- RUECKSEITE: Badges wie vorne, alle Themen --- */
.team-page .rueck-unten {
  padding: 0 1.5rem 1.25rem;     /* 0 24px 20px */
}

.team-page .rueck-themen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;                 /* 6px */
  margin-top: 0.3125rem;         /* 5px */
  padding-right: 2.75rem;        /* 44px - Platz fuer Ecken-Button */
}

.team-page .rueck-themen .thema-name {
  font-size: 0.75rem;            /* 12px */
  font-weight: 500;
  line-height: 1;
  padding: 0.375rem 0.5625rem;   /* 6px 9px */
  border: 1px solid var(--k-rand, rgba(249, 244, 236, 0.35));
  border-radius: 0;
  color: var(--k-kontrast);
}

/* Hinweis: Die "nur zwei Badges"-Regel ist auf .karte-thema
   gescoped und greift hier bewusst nicht - die Rueckseite
   zeigt alle Themen. Leere Felder blendet die globale
   :empty-Regel weiter oben aus. */

/* Name unter den Badges - Padding kommt von rueck-unten,
   Reste aus der alten Struktur neutralisieren */
.team-page .rueck-unten .rueck-name {
  padding: 0;
  margin-top: 0.75rem;           /* 12px */
  font-size: 0.75rem;
  color: var(--k-kontrast);
  opacity: 0.6;
}

/* ─────────────────────────────────────────────
   2. 3D-KARTENDREHUNG
   .team-item        → Perspektive
   .karte-flip       → dreht sich (Klasse .ist-offen)
   .karte-vorne → relativ, bestimmt die Kartenhoehe
   .karte-hinten → absolut darueber
   Keine feste Kartenhoehe: Bild ist quadratisch,
   Textblock 194px. Gilt auf allen Breakpoints.
   ───────────────────────────────────────────── */

.team-page .team-item { perspective: 1400px; }

.team-page .karte-flip {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
  cursor: pointer;
}
.team-page .karte-flip.ist-offen { transform: rotateY(180deg); }

/* Vorderseite steht im normalen Fluss und bestimmt die Kartenhoehe:
   quadratisches Bild + fester Textblock. KEINE feste Kartenhoehe. */
.team-page .karte-vorne {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: #FFFFFF;
  border: 1px solid rgba(14, 12, 28, 0.09);
}

/* Rueckseite liegt absolut ueber der Vorderseite */
.team-page .karte-hinten {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Textblock der Vorderseite: MINDESThoehe 194px.
   Waechst mit dem Inhalt (lange Zeile, mehrere Badges),
   damit nichts abgeschnitten wird. */
.team-page .karte-text {
  min-height: 12.125rem;         /* 194px */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.team-page .karte-meta { margin-top: auto; }

/* Raster im CSS - Spaltenzahl deterministisch pro Breakpoint. */
.team-page .team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

/* min-width:0 in der ganzen Kette.
   Ohne das koennen Grid-/Flex-Elemente nicht unter ihre
   Inhaltsbreite schrumpfen und laufen aus dem Container. */
.team-page .team-item {
  display: flex;
  min-width: 0;
}
.team-page .karte-flip {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}
.team-page .karte-vorne {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}
/* Bild bleibt quadratisch, wird nie gestaucht */
.team-page .karte-bild { flex: 0 0 auto; }

/* Ausgeblendete Items (Filter) */
.team-page .team-item.ist-verborgen { display: none; }

/* ─────────────────────────────────────────────
   3. ECKEN-BUTTON  (? → ! bei Hover, × hinten)
   Div mit role="button" — Webflow-Buttons können
   keine Kind-Elemente tragen.
   ───────────────────────────────────────────── */

.team-page .karte-ecke {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 3.125rem;               /* 50px */
  height: 3.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;           /* 22px */
  line-height: 1;
  background: var(--k-akzent);
  color: var(--k-kontrast);
  transition: filter 240ms ease;
}
.team-page .karte-ecke::before { content: "?"; }
.team-page .karte-vorne .karte-ecke:hover,
.team-page .karte-vorne .karte-ecke:focus-visible {
  filter: brightness(0.88);
}
.team-page .karte-vorne .karte-ecke:hover::before { content: "!"; }

.team-page .karte-hinten .karte-ecke {
  background: var(--k-akzent);
  color: var(--k-kontrast);
  filter: brightness(0.82);
}
.team-page .karte-hinten .karte-ecke::before { content: "×"; }
.team-page .karte-hinten .karte-ecke:hover { filter: brightness(0.72); }

/* ─────────────────────────────────────────────
   4. FILTER-CHIPS  (vom Script erzeugt)
   ───────────────────────────────────────────── */

/* Layout der Filterzeile - im CSS statt im Designer,
   damit es nicht von Panel-Einstellungen abhaengt. */
.team-page .filter-zeile {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem;                  /* 20px */
}

.team-page .chip-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;                   /* 8px */
  flex: 1 1 auto;
  min-width: 0;
}

/* Mischen-Button darf nicht schrumpfen oder umbrechen */
.team-page .btn-mischen { flex: 0 0 auto; }

.team-page .chip {
  flex: 0 0 auto;
  font-family: 'General Sans', system-ui, sans-serif;
  font-size: 0.8125rem;          /* 13px */
  font-weight: 500;
  line-height: 1.4;
  padding: 0.5rem 0.875rem;      /* 8px 14px - exakt wie Prototyp */
  margin: 0;
  border-radius: 0;
  border: 1px solid rgba(14, 12, 28, 0.18);
  background: transparent;
  color: #0E0C1C;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.team-page .chip:hover { border-color: rgba(14, 12, 28, 0.45); }
.team-page .chip.ist-aktiv {
  background: #3D2BD5;
  border-color: #3D2BD5;
  color: #F9F4EC;
}

/* ─────────────────────────────────────────────
   5. „NEU MISCHEN"-BUTTON
   ───────────────────────────────────────────── */

.team-page .btn-mischen {
  font-family: 'General Sans', system-ui, sans-serif;
  font-size: 0.875rem;           /* 14px */
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #0E0C1C;
  background: #F6DF35;
  border: none;
  padding: 0.786em 1.43em;       /* ≈ 11px / 20px bei 14px Schrift */
  border-radius: 0;
  cursor: pointer;
  transform: rotate(-2.5deg);
  box-shadow: 4px 4px 0 #0E0C1C;
  transition: transform 240ms cubic-bezier(0.2, 0.9, 0.25, 1.4), box-shadow 240ms ease;
}
.team-page .btn-mischen:hover {
  transform: rotate(2.5deg) scale(1.06);
  box-shadow: 6px 6px 0 #0E0C1C;
}
.team-page .btn-mischen:active {
  transform: rotate(0deg) scale(0.95);
  box-shadow: 2px 2px 0 #0E0C1C;
}

/* ─────────────────────────────────────────────
   6. „NACH OBEN"-PILLE
   Standard versteckt; JS setzt .ist-sichtbar
   ───────────────────────────────────────────── */

/* position: fixed statt sticky - sticky bricht, sobald ein
   uebergeordnetes Element overflow:hidden hat (in Webflow
   haeufig auf page-wrapper). fixed ist davon unabhaengig. */
.team-page .pille-oben {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: calc(100% - 2.5rem);
  margin: 0;
  padding: 0.625rem 1.125rem;    /* 10px 18px - wie Prototyp */
  font-family: 'General Sans', system-ui, sans-serif;
  font-size: 0.8125rem;          /* 13px */
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  background: #0E0C1C;
  color: #F9F4EC;
  border: none;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(14, 12, 28, 0.35);
  cursor: pointer;
}
.team-page .pille-oben.ist-sichtbar { display: flex; }

/* ─────────────────────────────────────────────
   7. JOIN-KARTE  "Deine Kachel ist noch frei."
   Versteckt, bis das Script sie an Position 8
   ins Raster setzt. Aufbau wie eine Personen-
   karte, aber ohne Formen und ohne Flip.
   ───────────────────────────────────────────── */

.team-page .ist-vorlage { display: none; }

.team-page .karte-join {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  background: #FFFFFF;
  border: 1px solid rgba(14, 12, 28, 0.09);
  border-radius: 0;
  overflow: hidden;
  text-decoration: none;
}

/* Lemon-Flaeche statt Portrait - quadratisch, keine Formen */
.team-page .join-flaeche {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #F6DF35;
  flex: 0 0 auto;
}

/* Textblock: gleiche Mindesthoehe wie bei Personenkarten */
.team-page .join-text {
  min-height: 12.125rem;         /* 194px */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  background: rgba(246, 223, 53, 0.3);
  padding: 1rem;                 /* 16px */
}

.team-page .join-rollen {
  font-size: 0.875rem;           /* 14px */
  color: #0E0C1C;
  margin-top: 0.1875rem;         /* 3px */
}

.team-page .join-ecke {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 3.125rem;               /* 50px */
  height: 3.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F6DF35;
  color: #0E0C1C;
  font-size: 1.375rem;           /* 22px */
  line-height: 1;
}
.team-page .join-ecke::before { content: "!"; }

/* ─────────────────────────────────────────────
   8. STATEMENT-BANNER
   Illustration links, Text rechts. Bricht auf
   schmalen Screens untereinander um.
   Layout im CSS, damit die Breite der Illustration
   nicht versehentlich auf die ganze Zeile landet.
   ───────────────────────────────────────────── */

.team-page .statement-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  gap: 3.5rem;
}

/* Illustration: feste Breite, schrumpft nicht */
.team-page .statement-shape {
  flex: 0 0 auto;
  width: 18.75rem;
}
.team-page .statement-shape img,
.team-page .statement-shape svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Text: waechst, bricht aber um statt sich zu quetschen.
   flex-basis 18rem = Mindestbreite, ab der umgebrochen wird. */
.team-page .statement-text {
  flex: 1 1 18rem;
  min-width: 0;
}

.team-page .statement-satz {
  font-size: 2.125rem;
  line-height: 1.1;
  letter-spacing: -0.03em;
  max-width: 35rem;
  margin-top: 0.875rem;
}

/* ─────────────────────────────────────────────
   9. AGENTEN-KARTE  (19.10.2026)
   Vorlage #karte-agent-vorlage mit data-typ="agent",
   Aufbau wie eine Personenkarte (gleiche Klassen,
   gleicher Flip). Unterschiede:
   - Bildfläche Indigo 50 mit KI-Zeichen 3 × 3
     (aus dem KI-Hilfe-Katalog) statt Porträt
   - Hover oder Fokus auf die Karte: Welle läuft zweimal
     diagonal durch, dann Ruhe. Gesteuert aus team-page.js
     (initKiWelle), damit sie immer zu Ende läuft und
     ohne Zwischenstopp schwingt. Keine Endlosschleife.
   - Ecke verhält sich wie bei allen Personen.
   Versteckt bis Script-Start über .ist-vorlage (Abschnitt 7).
   ───────────────────────────────────────────── */

.team-page [data-typ="agent"] {
  --k-akzent:   #3D2BD5;
  --k-kontrast: #F9F4EC;
}

/* Name »b’steuern KI«: Span mit data-nowrap im Webflow-Namen
   (style-Attribut ist gesperrt). Hält zusammengesetzte Begriffe
   mit Bindestrich zusammen, falls der Name später wechselt. */
.team-page [data-typ="agent"] [data-nowrap] { white-space: nowrap; }

.team-page [data-typ="agent"] .karte-bild {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ECEBFF;           /* Indigo 50 */
}

/* KI-Zeichen: skaliert mit der Kachel. Bei ca. 290 px
   Bildbreite ergibt das 131 px Zeichen mit 35-px-Feldern
   und 13-px-Abstand wie im Prototyp. */
.team-page .ki-zeichen {
  width: 45%;
  aspect-ratio: 1 / 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 10%;
}

.team-page .ki-feld {
  background: #3D2BD5;
  border-radius: 0;
  opacity: var(--o, 1);
  will-change: opacity;          /* eigene Ebene: kein Neuzeichnen der 3D-Karte */
}

/* Grund-Deckkraft je Feld: diagonal von oben links heller nach
   unten rechts. Die Welle liest diese Werte und endet wieder darauf. */
.team-page .ki-feld:nth-child(1) { --o: 1;    }
.team-page .ki-feld:nth-child(2) { --o: 0.7;  }
.team-page .ki-feld:nth-child(3) { --o: 0.4;  }
.team-page .ki-feld:nth-child(4) { --o: 0.7;  }
.team-page .ki-feld:nth-child(5) { --o: 0.4;  }
.team-page .ki-feld:nth-child(6) { --o: 0.16; }
.team-page .ki-feld:nth-child(7) { --o: 0.4;  }
.team-page .ki-feld:nth-child(8) { --o: 0.16; }
.team-page .ki-feld:nth-child(9) { --o: 0.16; }

/* ─────────────────────────────────────────────
   RESPONSIVE (absteigend)
   ───────────────────────────────────────────── */

@media (max-width: 991px) {
  .team-page .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .team-page .statement-zeile { gap: 2.75rem; }
  .team-page .statement-shape { width: 15rem; }
  .team-page .statement-satz { font-size: 1.875rem; }
}

@media (max-width: 767px) {
  .team-page .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-page .statement-zeile { gap: 2rem; }
  .team-page .statement-shape { width: 13rem; }
  .team-page .statement-satz { font-size: 1.625rem; }
  .team-page .filter-zeile { gap: 1rem; }
  .team-page .chip-liste { gap: 0.375rem; }
  .team-page .chip {
    font-size: 0.75rem;          /* 12px */
    padding: 0.4375rem 0.75rem;  /* 7px 12px */
  }
}

@media (max-width: 479px) {
  /* Zwei Spalten mit kompakter Karte (Karte ca. 163 px breit).
     Vorderseite: Bild, Name, Charakterzeile. Die Themen-Badges
     wandern auf die Rueckseite, dort als ruhige Textzeile mit ·.
     Ergebnis: Raster ca. 5.700 px statt 20.000 px Scrollstrecke,
     kein Ueberlauf auf der Rueckseite (geprueft mit 36 Karten). */
  .team-page .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;               /* 10px */
  }

  /* Vorderseite */
  .team-page .karte-text {
    min-height: 0;
    padding: 0.75rem 0.75rem 3rem;  /* unten Platz fuer Ecken-Button */
  }
  .team-page .karte-name {
    font-size: 1.0625rem;        /* 17px */
    line-height: 1.15;
  }
  .team-page .karte-zeile {
    font-size: 0.8125rem;        /* 13px */
    line-height: 1.35;
    margin-top: 0.25rem;
  }
  .team-page .karte-meta { display: none; }
  .team-page .karte-ecke {
    width: 2.5rem;               /* 40px */
    height: 2.5rem;
    font-size: 1.125rem;
  }

  /* Rueckseite */
  .team-page .karte-hinten .rueck-oben { padding: 0.75rem; }
  .team-page .karte-hinten .rueck-label { font-size: 0.625rem; }
  .team-page .karte-hinten .rueck-tipp {
    font-size: 0.75rem;          /* 12px */
    line-height: 1.35;
  }
  .team-page [data-mehr] {
    margin-top: 0.5rem;
    font-size: 0.6875rem;        /* 11px */
  }
  .team-page .rueck-unten { padding: 0 0.75rem 0.75rem; }
  .team-page .rueck-unten .rueck-label,
  .team-page .rueck-unten .rueck-name { display: none; }
  .team-page .rueck-themen {
    display: block;
    margin-top: 0;
    padding-right: 2.5rem;
    line-height: 1.35;
    hyphens: manual;
  }
  .team-page .rueck-themen .thema-name {
    display: inline;
    padding: 0;
    border: 0;
    font-size: 0.6875rem;        /* 11px */
    white-space: nowrap;
  }
  .team-page .rueck-themen .thema-name:not(.w-dyn-bind-empty):not(:empty)
    ~ .thema-name:not(.w-dyn-bind-empty):not(:empty)::before {
    content: " \00B7  ";
  }
  .team-page .rueck-themen .thema-name.w-dyn-bind-empty,
  .team-page .rueck-themen .thema-name:empty { display: none; }

  /* Agenten-Karte: fünf Badges passen nicht in eine Textzeile
     mit ·. Bei ca. 134 px steht ohnehin eines pro Zeile, daher
     als ruhige Liste ohne Trennpunkte. */
  .team-page [data-typ="agent"] .rueck-themen .thema-name {
    display: block;
    line-height: 1.4;
  }
  .team-page [data-typ="agent"] .rueck-themen .thema-name::before {
    content: none !important;
  }

  /* Join-Karte passend zur kompakten Karte */
  .team-page .join-text {
    min-height: 0;
    padding: 0.75rem 0.75rem 3rem;
  }
  .team-page .join-ecke {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.125rem;
  }

  /* Statement und Filter */
  .team-page .statement-zeile { gap: 1.5rem; }
  .team-page .statement-shape { width: 11.25rem; }
  .team-page .statement-satz { font-size: 1.5rem; }
  .team-page .chip {
    font-size: 0.6875rem;        /* 11px */
    padding: 0.375rem 0.625rem;  /* 6px 10px */
  }
  .team-page .btn-mischen {
    font-size: 0.8125rem;
    padding: 0.7em 1.2em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .team-page .karte-flip { transition: none; }
  .team-page .btn-mischen { transition: none; }
  .team-page .ki-feld { animation: none !important; }
}