/* Seitenspezifische Ergänzungen für unser-team —
   aus dem Prototyp übernommen. Die Grundlagen stehen in site.css. */

:root{
  --gold-main:#EBC35F;--gold-light:#FBF4D8;--gold-mid:#F9E9B4;--gold-dark:#C49A28;--gold-deeptext:#7A5800;
  --green-main:#5C8A3C;--green-light:#EAF3DE;--green-mid:#C8E0B0;--green-dark:#3A5A22;--green-deepest:#2A3A1A;--green-text:#1E3A10;
  --peach-main:#F8DCC4;--peach-light:#FDF5EF;--peach-dark:#C47A3A;
  --cream-bg:#F9F6F0;--cream-border:#EDE7DC;
  --text-primary:#2C2C2C;--text-mid:#555;--text-muted:#888;--white:#FFF;
  --radius-btn:24px;--max:1320px;--header-h:66px;
  /* Hub-Seite: Kids-Basispalette Gruen/Gold (neutral) */
  --cat-main:#5C8A3C;--cat-dark:#3A5A22;--cat-light:#EAF3DE;--cat-mid:#C8E0B0;--cat-deeptext:#1E3A10;
  /* Therapie-Farben (Wayfinding-Legende dieser Seite) */
  --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-intensiv:#C47A3A;--t-intensiv-d:#9A5623;--t-intensiv-l:#FDF5EF;
  --t-apart:#6587B7;--t-apart-d:#3F5E8C;--t-apart-l:#E7EDF6;
  --t-preise:#C49A28;--t-preise-d:#7A5800;--t-preise-l:#FBF4D8;
  --t-ablauf:#5C8A3C;--t-ablauf-d:#3A5A22;--t-ablauf-l:#EAF3DE;
}
.nav-item::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px}
.nav-item:focus-within>.dropdown{opacity:1;pointer-events:all;transform:translateY(0)}
/* LOCATIONS */
.location-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:960px){
  .nav-main,.nav-right{display:none!important}
  .hamburger{display:flex!important}
  .hero{padding:56px 0 44px}
  .ansatz-grid,.warum-intro-grid{grid-template-columns:1fr}
  .card-grid,.subtherapy-grid{grid-template-columns:repeat(2,1fr)}
  .warum-grid{grid-template-columns:1fr}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .intensiv-band{grid-template-columns:1fr}
  .diag-grid{grid-template-columns:repeat(3,1fr)}
  .price-grid{grid-template-columns:1fr}
  .testimonial-grid,.location-grid{grid-template-columns:1fr}
  /* Fußzeile: die Regeln für kleine Schirme stehen in site.css.
     Hier standen sie doppelt und haben die dortigen überschrieben, weil
     diese Datei später geladen wird — dadurch sah die Fußzeile auf jeder
     Unterseite anders aus als auf der Startseite, die keine eigene
     Datei hat. */
}
/* ===== 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;position:relative;display:flex;flex-direction:column;
    transition:transform .3s,box-shadow .3s,border-color .3s}
/* `flex-shrink:0`: das Foto ist ein Flex-Element in der Karte und darf nie
   zusammengedrückt werden. Wurde der Text einer Karte höher als gedacht,
   schrumpfte das Foto — bis auf null, und die Karte begann ohne Bild beim
   Namen. */
.pc-photo{aspect-ratio:1/1;overflow:hidden;flex-shrink:0;
          background:linear-gradient(135deg,var(--tcl),var(--cream-bg))}
.pc-photo img{width:100%;height:100%;object-fit:cover}
/* Schweben gibt es nur, wo ein Zeiger schwebt. Am Telefon blieb eine Karte
   nach dem Antippen angehoben stehen, und die dafuer noetige eigene
   Grafikebene liess die Schrift beim Scrollen flimmern. */
@media (hover:hover){
  .pc:hover{transform:translateY(-6px);box-shadow:0 16px 34px -10px var(--tc);border-color:var(--tc)}
  .pc-photo img{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}
/* Im Raster sind alle Karten einer Zeile gleich hoch — die laengste gibt
   das Mass vor. Ohne diese Regel endete der Text jeder Karte auf einer
   anderen Hoehe und darunter stand eine unterschiedlich grosse Leere.
   Jetzt fuellt der Textteil die Karte und „Profil ansehen" sitzt bei allen
   Karten unten auf gleicher Linie. */
/* `flex:1 0 auto` und nicht `flex:1`: der Textteil wächst in die freie Höhe
   der Karte, damit „Profil ansehen" bei allen Karten einer Zeile unten auf
   gleicher Linie sitzt — aber er schrumpft nie unter seinen Inhalt. Mit dem
   kürzeren `flex:1` war die Grundhöhe null; reichte der Platz nicht, rutschte
   der Verweis unter den Rand der Karte und wurde abgeschnitten. */
.pc-body{padding:12px 13px 0;text-align:center;flex:1 0 auto;display:flex;flex-direction:column}
.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:auto;padding-top:9px}
/* 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}
/* margin-top bleibt `auto` (siehe .pc-more), sonst sitzt der Verweis auf
   den Gruenderkarten wieder auf halber Hoehe. */
.pc.wide .pc-more{padding-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){
  /* Der Kasten wird zur Spalte, damit sich die Reihenfolge seiner Teile
     festlegen laesst: „Zur Fachrichtung" stand ueber den Personen und
     draengte sich vor den Inhalt. Unten gelesen ist es das, was es ist —
     ein Weiterfuehren, nachdem man die Gesichter gesehen hat. */
  .grp{padding:34px 18px 22px; display:flex; flex-direction:column}
  .grp-badge{left:18px}
  .ppl{order:1; grid-template-columns:repeat(2,1fr)}
  .grp-link{order:2; position:static; align-self:flex-start;
            flex:0 0 auto; margin:16px 0 0}
  .ppl.founders{grid-template-columns:repeat(2,minmax(0,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%}
}
@media(max-width:560px){
  /* Zwei Fotos je Zeile statt einem: einspaltig war die Seite sehr lang und
     die Fotos unnötig groß. Die Gründerkarten stehen jetzt ebenso zu zweit —
     sie tragen zwar mehr Text, untereinander schoben sie die Seite aber
     unnötig in die Länge. */
  .ppl{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
  .ppl.founders{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pc h3{font-size:14px}
  .pc-role{font-size:11.5px}
  .pc-more{font-size:11.5px}
  /* Die breite Karte nahm hier die ganze Zeile ein — damit standen die
     Gruenderkarten wieder untereinander, egal wie viele Spalten das Raster
     hat. Sie bleibt jetzt in ihrer Spalte. */
  .pc.wide{grid-column:auto}
  /* Hochkant (4:5) war das Foto hier fast so hoch wie der Schirm, die
     Gruenderkarten schoben alles Weitere nach unten. Quadratisch wie bei
     allen anderen Karten. */
  .pc.wide .pc-photo{aspect-ratio:1/1;border-radius:12px}
  .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}
}
/* ── Eine Fachrichtung: Karten und ihre Teams ────────────────────────────────
   Jede Person steht als breite weisse Karte da, ihr Team eine Stufe kleiner
   eingerueckt darunter. Dieselbe Form in zwei Groessen — die Ordnung liest
   sich damit ohne jede Beschriftung, und eine Pille „Leitung" braucht es
   nicht: der Kopf „Team von …" sagt schon, wer wen fuehrt.

   Vorher war es andersherum. Die Leitung war eine flache Zeile mit kleinem
   Bild, ihr Team darunter grosse Kacheln mit Foto — rund doppelt so hoch wie
   die Karte darueber. Das Team wirkte dadurch wichtiger als seine Leitung.

   Und eine Leitung ohne eingetragenes Team fiel ins Raster zurueck und sah aus
   wie eine Mitarbeiterin. Deshalb bekommt jede Person dieselbe Karte, ob mit
   Team oder ohne; die Regeln dazu stehen bei nach_leitung_ordnen() in
   pages/team-liste.php. */
.pc.leitung{flex-direction:row;align-items:center;gap:16px;padding:16px;text-align:left}
.pc.leitung + .pc.leitung{margin-top:12px}
.pc.leitung .pc-photo{width:104px;flex:0 0 104px;border-radius:14px}
.pc.leitung .pc-body{padding:0;text-align:left}
.pc.leitung .pc-body h3{font-size:18px}
.pc.leitung .pc-role{font-size:13px}
.pc.leitung .pc-more{font-size:12px;padding-top:7px}
.pc.leitung .pc-ph{font-size:30px}

/* Die Linie links ist die Verbindung zur Karte darueber. Sie traegt die Farbe
   der Fachrichtung, damit sie zum Kasten gehoert und nicht wie ein Rahmen um
   etwas Eigenes wirkt. */
.unterteam{margin-top:14px;padding-left:18px;border-left:3px solid var(--tc)}
.unterteam + .pc.leitung{margin-top:22px}
.unterteam-kopf{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:10px}
.unterteam-kopf b{font-size:12px;font-weight:700;color:var(--tcd);
                  letter-spacing:.04em;text-transform:uppercase}
.unterteam-kopf .zahl{background:var(--tc);color:var(--white);font-size:10.5px;font-weight:700;
                      border-radius:12px;padding:2px 9px;line-height:1.5}

/* Das Team: dieselbe Karte, eine Stufe kleiner — drei in der Reihe. */
.ppl.klein{grid-template-columns:repeat(3,1fr);gap:12px}
.ppl.klein .pc{flex-direction:row;align-items:center;gap:12px;padding:10px 12px;
               border-radius:13px;text-align:left}
.ppl.klein .pc-photo{width:52px;flex:0 0 52px;border-radius:11px}
.ppl.klein .pc-body{padding:0;text-align:left}
.ppl.klein .pc-body h3{font-size:14.5px;margin-bottom:2px}
.ppl.klein .pc-role{font-size:11.5px}
.ppl.klein .pc-more{font-size:11.5px;padding-top:5px}
.ppl.klein .pc-ph{font-size:17px}

@media (max-width:900px){
  .ppl.klein{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .ppl.klein{grid-template-columns:1fr;gap:10px}
  .unterteam{padding-left:12px}
  .pc.leitung{gap:13px;padding:13px}
  .pc.leitung .pc-photo{width:76px;flex:0 0 76px}
  .pc.leitung .pc-body h3{font-size:16px}
  .pc.leitung .pc-ph{font-size:23px}
}