/* Aufbau und Klassen aus assets/css/unser-team.css des Kids-Projekts,
   unveraendert uebernommen (.grp, .grp-badge, .grp-link, .ppl, .pc,
   .chip-row, .jobs-box). Die Farben kommen aus der Themenschicht der
   Erwachsenensite; die Fachbereichsfarben stehen unten als --t-*. */
/* ===== TEAM-HUB ===== */
.info-row{display:flex;flex-wrap:wrap;gap:9px 24px;margin-top:22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.16)}
.info-item{display:inline-flex;align-items:baseline;gap:8px;font-size:13px;color:rgba(255,255,255,.62)}
.info-item b{color:var(--white);font-weight:700}
/* filter */
.chip-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.chip.active:first-child{background:var(--green-deepest);border-color:var(--green-deepest);color:var(--gold-main)}
.chip .d{width:9px;height:9px;border-radius:50%;background:var(--tc);flex-shrink:0}
.chip.active .d{background:var(--white)}
/* discipline panel — tinted, badge overlaps the edge, no divider line */
.grp{position:relative;margin-bottom:20px;padding:30px 22px 22px;border:2px solid var(--tc);border-radius:22px;
     background:linear-gradient(135deg,var(--tcl) 0%,var(--white) 58%);box-shadow:0 16px 40px -16px var(--tc)}
.grp.is-hidden{display:none}
.grp-badge{position:absolute;top:-14px;left:24px;display:inline-flex;align-items:center;gap:8px;background:var(--tc);
           color:var(--white);font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
           padding:7px 16px;border-radius:20px;box-shadow:0 4px 12px -2px var(--tc)}
.grp-badge a{color:var(--white)}
.sr-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.grp-badge .e{font-size:14px}
.grp-link{position:absolute;top:-11px;right:22px;background:var(--white);border:1.5px solid var(--tc);
          color:var(--tcd);font-size:12.5px;font-weight:700;padding:6px 14px;border-radius:20px;
          display:inline-flex;align-items:center;gap:5px;transition:all .22s}
.grp-link:hover{background:var(--tc);color:var(--white);gap:9px}
/* person card */
.ppl{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ppl.founders{grid-template-columns:repeat(2,1fr);gap:18px}
.pc{background:var(--white);border:1px solid var(--cream-border);border-radius:16px;
    padding:0 0 14px;overflow:hidden;transition:all .3s;position:relative;display:flex;flex-direction:column}
.pc:hover{transform:translateY(-6px);box-shadow:0 16px 34px -10px var(--tc);border-color:var(--tc)}
.pc-photo{aspect-ratio:1/1;overflow:hidden;background:linear-gradient(135deg,var(--tcl),var(--cream-bg))}
.pc-photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.pc:hover .pc-photo img{transform:scale(1.05)}
.pc-ph{display:flex;align-items:center;justify-content:center;height:100%;font-family:'Playfair Display',serif;
       font-size:34px;font-weight:700;color:var(--tcd);opacity:.4}
.pc-body{padding:12px 13px 0;text-align:center}
.pc-body h3{font-size:14.5px;margin:0 0 3px;line-height:1.28}
.pc-role{font-size:11.5px;color:var(--text-muted);line-height:1.4}
.pc-tag{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.94);color:var(--tcd);font-size:10.5px;
        font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:20px;z-index:2}
.pc-more{display:block;font-size:11.5px;font-weight:700;color:var(--tcd);margin-top:9px;transition:gap .2s}
/* founders: wide layout */
.pc.wide{flex-direction:row;padding:18px;gap:18px;align-items:center}
.pc.wide .pc-photo{width:110px;flex-shrink:0;border-radius:14px;aspect-ratio:4/5}
.pc.wide .pc-body{padding:0;text-align:left}
.pc.wide .pc-body h3{font-size:18px}
.pc.wide .pc-more{margin-top:12px}
/* jobs box */
.jobs-box{background:linear-gradient(135deg,var(--gold-light) 0%,var(--white) 58%);border:2px solid var(--gold-main);
          border-radius:22px;padding:34px 36px;position:relative;overflow:visible;box-shadow:0 16px 40px rgba(196,154,40,.15)}
.jobs-box h3{font-size:23px;margin-bottom:9px}
.jobs-box p{color:var(--text-mid);font-size:14px;line-height:1.6;margin-bottom:18px;max-width:760px}
.no-hit{display:none;text-align:center;padding:36px 20px;background:var(--white);border:1px dashed var(--cream-border);
        border-radius:16px;color:var(--text-mid);font-size:14px}
.no-hit.show{display:block}
@media(max-width:900px){
  .grp{padding:34px 18px 22px}
  .grp-badge{left:18px}
  .grp-link{position:static;margin:0 0 16px;align-self:flex-start}
  .ppl{grid-template-columns:repeat(2,1fr)}
  .ppl.founders{grid-template-columns:repeat(2,1fr)}
  .pc.wide{flex-direction:column;align-items:flex-start}
  .pc.wide .pc-photo{width:100%}
  .pc.wide .pc-body{text-align:center;width:100%}
  .grp-link{margin-left:0;flex-basis:100%}
}
@media(max-width:560px){
  /* Zwei Fotos je Zeile statt einem: einspaltig war die Seite sehr lang und
     die Fotos unnötig groß.

     AUCH DIE GESCHÄFTSFÜHRUNG. Sie stand bis 29.09.2026 einspaltig, weil die
     Karten mehr Text tragen — auf dem Telefon füllte eine davon fast den
     Bildschirm (Foto über die ganze Breite im Verhältnis 4:5). Zwei Karten
     nebeneinander, Foto quadratisch: derselbe Massstab wie bei allen anderen.
     Gemeldet von Alex. */
  .ppl{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
  .ppl.founders{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
  .ppl.founders .pc.wide{grid-column:auto; padding:0}
  .ppl.founders .pc.wide .pc-photo{width:100%; aspect-ratio:1/1; border-radius:0}
  .ppl.founders .pc.wide .pc-body{padding:12px 12px 14px; text-align:center}
  .ppl.founders .pc.wide .pc-body h3{font-size:14px}
  .pc h3{font-size:14px}
  .pc-role{font-size:11.5px}
  .pc-more{font-size:11.5px}
  .grp{padding:28px 14px 18px}
}
@media(min-width:1280px){
  .hero{min-height:420px;display:flex;align-items:center;padding-top:40px;padding-bottom:36px}
  .hero > .wrap{width:100%}
}
@media(min-width:1600px){
  .hero{min-height:450px}
}
/* Farben der Fachbereiche als Legende dieser Seite — Werte aus dem
   Farbsystem der Erwachsenensite. Die Klassen aus dem Kids-Projekt lesen
   sie über --t-<marke>. */
:root{
  --t-physio:#91ABDA;--t-physio-d:#4A6FA5;--t-physio-l:#E6EBF2;
  --t-ergo:#597C57;--t-ergo-d:#3E5A3C;--t-ergo-l:#E2EDE8;
  --t-logo:#F3A69C;--t-logo-d:#B05A4E;--t-logo-l:#FCE2E3;
  --t-neuro:#958FB7;--t-neuro-d:#665E8A;--t-neuro-l:#EAE5F0;
  --t-recoverix:#6587B7;--t-recoverix-d:#3F5E8C;--t-recoverix-l:#EAF0F8;
  /* Geschaeftsfuehrung: das Orange der Marke statt des Kids-Golds */
  --t-preise:#EC7E41;--t-preise-d:#C4571B;--t-preise-l:#FDF0E7;
}

/* ══════════════════════════════════════════════════════════════
   /ueber-uns/team-alle — Übersicht des Teams.
   Farbe: die neutrale Markenfarbe. Die Gruppen tragen die Farbe ihres
   Fachbereichs über --tc / --tcd / --tcl.
   ══════════════════════════════════════════════════════════════ */

.hero h1{font-size:clamp(28px,3.6vw,44px);line-height:1.2;max-width:1200px}
.hero-lede{max-width:1200px}

/* Das Hinweisband oben: oranger Text auf dunklem Grund. */
.hinweis-band{background:#3A4053;color:var(--gold-main)}
.hinweis-band a{color:var(--gold-main)}
.hinweis-band a:hover{color:#FFFFFF}

/* ── Karten der Personen ─────────────────────────────────────────────── */
/* Rechteck mit weichen Ecken — keine ovalen Porträts auf der
   Erwachsenensite. Das Foto füllt die Karte oben, Name und Rolle darunter
   auf Weiss. */
.tm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tm-karte{display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--cream-border);border-radius:16px;overflow:hidden;
  transition:transform .25s,border-color .25s,box-shadow .25s}
.tm-karte:hover{transform:translateY(-5px);border-color:var(--tc,var(--cat-main));
  box-shadow:0 16px 34px -18px rgba(58,64,83,.45)}
.tm-foto{aspect-ratio:3/4;overflow:hidden;background:var(--cat-light)}
.tm-foto img{width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform .5s}
.tm-karte:hover .tm-foto img{transform:scale(1.04)}
.tm-leib{padding:16px 18px 18px}
.tm-name{font-family:'Playfair Display',serif;font-size:16.5px;font-weight:600;
  color:var(--green-deepest);line-height:1.3;margin-bottom:4px}
.tm-rolle{font-size:12.5px;color:var(--text-mid);line-height:1.45}
.tm-ort{margin-top:8px;font-size:11.5px;color:var(--text-muted)}

/* Geschäftsführung: nur zwei Personen, deshalb breitere Karten mit
   Bild im Querformat — sonst stehen zwei schmale Karten verloren neben
   einer leeren Fläche. */
.tm-grid-fuehrung{grid-template-columns:repeat(2,1fr);max-width:720px}
.tm-gross .tm-foto{aspect-ratio:4/3}
.tm-gross .tm-name{font-size:19px}
.tm-gross .tm-rolle{font-size:13.5px}

@media(max-width:1000px){.tm-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){
  .tm-grid{grid-template-columns:repeat(2,1fr)}
  .tm-grid-fuehrung{grid-template-columns:repeat(2,1fr);max-width:none}

  /* Die Geschäftsführung hat absichtlich grössere Karten — am Schreibtisch.
     Auf dem Telefon füllte eine davon den halben Bildschirm: Foto im
     Verhältnis 4:3 plus grössere Schrift. Hier gilt dasselbe Maß wie bei den
     übrigen Karten. Gemeldet von Alex am 29.09.2026. */
  .tm-gross .tm-foto{aspect-ratio:1/1}
  .tm-gross .tm-name{font-size:15px}
  .tm-gross .tm-rolle{font-size:12px}
  .tm-karte{border-radius:12px}
}
/* Die Regeln für `.tm-*` sind hier entfallen: die Teamseite benutzt `.ppl`
   und `.pc` (aus dem Baustein), kein einziges `tm-`-Element. Zwei Anläufe am
   29.09.2026 gingen deshalb ins Leere — geändert wurde eine Klasse, die auf
   dieser Seite nicht vorkommt. Gemeldet von Alex.
   MERKE: erst im Markup nachsehen, welche Klasse das Element wirklich trägt. */

/* ── Gruppen nach Fachbereich ────────────────────────────────────────── */
.tm-gruppe{margin-bottom:40px}
.tm-gruppe:last-child{margin-bottom:0}
.tm-gruppe-kopf{display:inline-flex;align-items:center;gap:10px;
  margin-bottom:18px;font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tcd,var(--cat-dark));
  background:var(--tcl,var(--cat-light));border:1px solid var(--tc,var(--cat-main));
  border-radius:22px;padding:8px 18px;transition:all .22s}
.tm-gruppe-kopf:hover{background:var(--tc,var(--cat-main));color:#fff}
.tm-punkt{width:9px;height:9px;border-radius:50%;background:var(--tc);
  flex-shrink:0;transition:background .22s}
.tm-gruppe-kopf:hover .tm-punkt{background:#fff}
.tm-gruppe-pfeil{font-size:13px;letter-spacing:0}

/* Eine einzelne Person in einer Gruppe soll nicht auf Viertelbreite
   schrumpfen — die Reihe bricht um und bleibt links ausgerichtet. */
.tm-gruppe .tm-grid{grid-template-columns:repeat(auto-fill,minmax(0,232px));
  justify-content:start}
/* `repeat(auto-fill,minmax(0,1fr))` ergibt EINE Spalte, nicht mehrere —
   auto-fill braucht eine feste Mindestbreite. Deshalb hier zwei Spalten. */
@media(max-width:760px){
  .tm-gruppe .tm-grid{grid-template-columns:repeat(2,1fr)}
}

/* ── Jobs ────────────────────────────────────────────────────────────── */
.tm-jobs{display:flex;align-items:center;justify-content:space-between;
  gap:26px;flex-wrap:wrap;background:var(--white);
  border:1px solid var(--cream-border);border-left:5px solid var(--gold-main);
  border-radius:0 18px 18px 0;padding:28px 32px}
.tm-jobs h3{font-size:21px;margin-bottom:6px}
.tm-jobs p{color:var(--text-mid);font-size:14px}
@media(max-width:700px){
  .tm-jobs{padding:24px 20px;border-radius:0 14px 14px 0}
  .tm-jobs .btn{width:100%}
}


/* ── Karten einer Zeile gleich hoch ──────────────────────────────────────
   Umgekehrt zur früheren Entscheidung: `align-items:start` liess jede Karte so
   hoch sein wie ihr Inhalt — bei Florian und Martin unterscheiden sich die
   Rollenbezeichnungen um eine Zeile, und die Karten standen ungleich hoch
   nebeneinander. Gemeldet von Alex am 29.09.2026.

   Damit dabei keine leere Fläche entsteht, wächst nicht der weisse Grund,
   sondern der Abstand VOR dem unteren Rand: der Textblock schiebt sich mit
   `margin-top:auto` nach unten, das Foto bleibt oben.

   Die Sorge von damals bleibt berechtigt, wenn ein Text sehr viel länger ist —
   deshalb gilt die gleiche Höhe je ZEILE (Standard im Raster), nicht über die
   ganze Liste. */
.ppl{align-items:stretch}
.tm-grid{align-items:stretch}
.pc{height:100%}
.pc-body{display:flex; flex-direction:column; flex:1}
.pc-more{margin-top:auto}
/* Die Gründerkarten liegen als Zeile nebeneinander (Foto links, Text rechts) —
   dort schiebt `margin-top:auto` am Verweis den Text auseinander. Deshalb dort
   nur gleiche Höhe, ohne Verschiebung. */
.pc.wide{height:100%}
.pc.wide .pc-more{margin-top:12px}

/* ── „Zur Fachrichtung →" auf dem Telefon unter die Karten ───────────────
   Am Schreibtisch sitzt der Verweis als Plakette auf der oberen Kante des
   Kastens. Eingeklappt stand er über den Karten und trennte die Überschrift
   von den Personen. Unten gelesen ergibt er mehr Sinn: erst die Menschen,
   dann der Weg zur Fachrichtung. Gewünscht von Alex am 29.09.2026.

   `.grp` ist kein Flex-Behälter, deshalb geht es nicht über `order`; der
   Verweis steht im Markup nach dem Kartenraster und braucht darum nur noch
   seine statische Lage und etwas Abstand. */
@media(max-width:900px){
  .grp{display:flex; flex-direction:column}
  .ppl{order:1}
  .grp-link{order:2; position:static; align-self:flex-start;
    margin:18px 0 0; flex-basis:auto}
}

/* ──────────────────────────────────────────────────────────────────────────
   „PROFIL ANSEHEN →" AUF EINER LINIE — ZWEITER ANLAUF

   Erster Versuch: feste Mindesthöhen für Name und Rolle. Das hielt den
   Verweis zwar auf Linie, liess aber unter kurzen Namen eine Lücke stehen
   und wirkte gebaut. Bei den Gründerkarten griff es gar nicht, weil der Text
   dort neben dem Foto steht. Gemeldet von Alex am 29.09.2026.

   Jetzt der einfache Weg: die Karten einer Zeile sind gleich hoch (im Raster
   der Normalfall), und der Verweis sitzt am unteren Rand. Kein festes Mass,
   keine Lücke mitten in der Karte — der Unterschied von einer Textzeile
   verteilt sich auf den Abstand über dem Verweis.

   Gilt für beide Bauarten: die schmale Karte (Foto oben) und die breite der
   Gründer (Foto links).
   ────────────────────────────────────────────────────────────────────────── */
.ppl{align-items:stretch}
.pc{height:100%}
.pc-body{display:flex; flex-direction:column; flex:1}
.pc-more{margin-top:auto; padding-top:9px}

.pc.wide{height:100%}
.pc.wide .pc-body{display:flex; flex-direction:column; flex:1}
.pc.wide .pc-more{margin-top:auto; padding-top:12px}