/* ════════════════════════════════════════════════════════════════
   Variante B · „Portrait-Cards / refined classic"
   Founding Team als 3-Spalten-Kartenraster mit feiner 1px-Linie,
   dezentem Hover-Lift; das „Mehr über"-Panel klappt INNERHALB der
   Karte auf. Netzwerk als volle-Breite Faktenband mit Kennzahl 15+.
   Scope: body.tm.tm-b — beeinflusst A & C–F nicht.
   Nur transform / opacity / grid-rows animiert.
   ════════════════════════════════════════════════════════════════ */

/* ── Mission-Auftakt: ruhig, linksbündig, etwas kompakter ── */
.tm-b .tm-mission{padding:72px 0 8px;}
/* „Unsere Mission" als klare Headline-Marke (Blau statt blassem Silber) */
.tm-b .tm-mission__eyebrow{color:var(--blue);}

/* ── Founding Team ── */
.tm-b .tm-founders{padding:44px 0 8px;}
.tm-b .tm-flag-row{padding:24px 0 30px;}
.tm-b .tm-flag-row .tm-flag{font-family:var(--font-serif); font-weight:400; text-transform:none; letter-spacing:-.01em; font-size:clamp(1.6rem,3.4vw,2.6rem); line-height:1.1;}

/* Kartenraster: 3 nebeneinander via Flex-Wrap — so kann eine geöffnete
   Karte sauber auf volle Breite umbrechen, ohne Raster-Lücken. */
.tm-b .tm-cards{display:flex; flex-wrap:wrap; gap:24px; align-items:start;}

/* Einzelkarte: feine 1px-Linie, eckig (statische Info), dezenter Lift */
.tm-b .tm-card{
  flex:1 1 calc(33.333% - 16px); min-width:0;
  display:flex; flex-direction:column;
  padding:28px 26px 30px;
  background:var(--paper-pure);
  border:1px solid rgba(26,26,26,.14);
  transition:transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.tm-b .tm-card:hover{
  transform:translateY(-3px);
  border-color:rgba(0,0,254,.28);
  box-shadow:0 14px 32px -22px rgba(26,26,26,.45);
}

/* Identitäts-Kopf (Foto/Kicker/Name/Bio/Button) — füllt die Karte,
   Button sitzt am Fuß, damit geschlossene Karten gleich hoch wirken. */
.tm-b .tm-card__head{display:flex; flex-direction:column; flex:1 1 auto; min-width:0;}

/* Portrait klein, oben in der Karte */
.tm-b .tm-card .tm-photo{max-width:120px; margin:0 0 20px;}

/* Bio etwas breiter laufen lassen — innerhalb der schmalen Karte */
.tm-b .tm-card .tm-bio{max-width:none;}

/* „Mehr über"-Link an den Kartenfuß schieben, damit Karten gleich wirken */
.tm-b .tm-card .tm-more{margin-top:auto;}

/* Panel-Texte innerhalb der schmaleren Karte nicht zu breit deckeln */
.tm-b .tm-card .tm-more__inner p{max-width:none;}

/* ── Geöffnete Person nutzt die VOLLE BREITE ──────────────────────
   :has() erkennt den offenen Zustand: die Karte bricht auf 100% um
   (order:-1 hebt sie über die geschlossenen) und legt Identität links /
   Bio rechts. Die Bio fließt mehrspaltig — füllt die Breite statt einer
   langen dünnen Spalte. Ohne :has()-Support bleibt das alte In-Karte-
   Verhalten als Fallback. */
.tm-b .tm-card:has(.tm-more[aria-expanded="true"]){
  order:-1; flex-basis:100%;
  flex-direction:row; gap:0 52px; align-items:flex-start;
}
.tm-b .tm-card:has(.tm-more[aria-expanded="true"]):hover{transform:none; box-shadow:none;}
/* Panel öffnen: Button (im .tm-card__head) und Panel sind keine direkten
   Geschwister mehr, daher greift der Basis-Nachbarselektor nicht. In B
   öffnen wir das Panel über den :has()-Zustand der Karte. */
.tm-b .tm-card:has(.tm-more[aria-expanded="true"]) .tm-more__panel{grid-template-rows:1fr;}
.tm-b .tm-card:has(.tm-more[aria-expanded="true"]) .tm-card__head{flex:0 0 240px;}
.tm-b .tm-card:has(.tm-more[aria-expanded="true"]) .tm-more__panel{flex:1 1 auto;}
.tm-b .tm-card:has(.tm-more[aria-expanded="true"]) .tm-more__inner{
  padding-top:2px; columns:340px 2; column-gap:48px;
}
.tm-b .tm-card:has(.tm-more[aria-expanded="true"]) .tm-more__inner h4{column-span:all; break-after:avoid; margin-top:14px;}
.tm-b .tm-card:has(.tm-more[aria-expanded="true"]) .tm-more__inner h4:first-child{margin-top:0;}
.tm-b .tm-card:has(.tm-more[aria-expanded="true"]) .tm-more__inner p{break-inside:avoid;}
.tm-b .tm-card:has(.tm-more[aria-expanded="true"]) .tm-more__stations{column-span:all;}

/* Founder-Karten erst ~760px einspaltig (vorher 880): hält das 3-Spalten-Raster
   („Drei Blickwinkel") auf dem Tablet, statt früh in zerdehnte Vollbreite-Karten
   zu kippen. Darunter gestapelt (Mobile: Foto oben, Text darunter). */
@media (max-width:760px){
  .tm-b .tm-card{flex-basis:100%; padding:26px 24px 28px;}
  .tm-b .tm-card .tm-photo{max-width:110px;}
  .tm-b .tm-card .tm-more{margin-top:18px;}
  /* Mobil: geöffnete Karte bleibt einspaltig, Bio ohne Textspalten */
  .tm-b .tm-card:has(.tm-more[aria-expanded="true"]){flex-direction:column; gap:0;}
  .tm-b .tm-card:has(.tm-more[aria-expanded="true"]) .tm-card__head{flex:1 1 auto;}
  .tm-b .tm-card:has(.tm-more[aria-expanded="true"]) .tm-more__inner{columns:auto;}
}

/* ── LinkedIn-Icon je Profil (Footer-Glyph wiederverwendet) ── */
.tm-b .tm-li{position:relative; display:inline-flex; width:19px; height:19px; margin:0 0 14px; color:var(--silver); transition:color .2s var(--ease), transform .2s var(--ease);}
/* Transparente Trefferfläche ~39px (Touch), ohne Icon/Layout zu verändern (border-box) */
.tm-b .tm-li::before{content:""; position:absolute; inset:-10px;}
.tm-b .tm-li svg{width:100%; height:100%; display:block;}
.tm-b .tm-li:hover{color:var(--blue); transform:translateY(-1px);}

/* ── Kundenliste / Referenzen — Chips wie die Disziplinen ── */
.tm-b .tm-clients{padding:8px 0 80px;}
.tm-b .tm-clients__h{font-family:var(--font-serif); font-weight:400; font-size:clamp(1.4rem,2.8vw,2.1rem); line-height:1.15; letter-spacing:-.01em; margin:6px 0 26px; max-width:26ch;}
.tm-b .tm-clients__list{gap:10px;}

/* ── Netzwerk-Band — volle Breite, Faktenband-Optik ── */
.tm-b .tm-net{background:var(--bone); margin-top:44px; padding:72px 0;}
.tm-b .tm-net__grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:56px; align-items:center;}
.tm-b .tm-net__aside{display:flex; flex-direction:column; gap:30px;}

/* Kennzahl prominent als Anker des Faktenbands */
.tm-b .tm-stat{align-items:baseline;}

@media (max-width:760px){
  .tm-b .tm-net__grid{grid-template-columns:1fr; gap:34px; align-items:start;}
}

/* ── Falt-Sektionen (Woher/Wie/Worauf/Was uns leitet) — NUR Mobile ≤600.
   Desktop/Tablet: alles offen, Button = statische Überschrift (nicht klickbar). ── */
.tm-b .tm-fold__h{margin:0;}
.tm-b .tm-fold__btn{font:inherit; color:inherit; letter-spacing:inherit; background:none;
  border:0; padding:0; margin:0; cursor:default; text-align:left; pointer-events:none;}
.tm-b .tm-fold__ico{display:none;}

@media (max-width:600px){
  .tm-b .tm-fold.section{padding:24px 0;}
  .tm-b .tm-fold__btn{display:flex; width:100%; align-items:center; justify-content:space-between;
    gap:18px; cursor:pointer; pointer-events:auto; padding:4px 0;}
  /* CSS-Chevron: zu = nach unten, offen = nach oben */
  .tm-b .tm-fold__ico{display:block; flex:0 0 auto; width:9px; height:9px;
    border-right:2.5px solid var(--blue); border-bottom:2.5px solid var(--blue);
    transform:translateY(-2px) rotate(45deg); transition:transform .3s var(--ease);}
  .tm-b .tm-fold__btn[aria-expanded="true"] .tm-fold__ico{transform:translateY(2px) rotate(-135deg);}
  .tm-b .tm-fold__panel{display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--ease);}
  .tm-b .tm-fold__panel.is-open{grid-template-rows:1fr;}
  .tm-b .tm-fold__inner{overflow:hidden;}
  .tm-b .tm-fold__panel.is-open .tm-fold__inner{padding-top:12px;}
}