/* ============================================================
   r19: Rückmeldung Lucas Fichter 21.10.2026 („Website Rückmeldung-3.docx“)
   Eingebunden auf allen drei Auftritten als letzte Datei (bauen.py R15_CSS).
   U  Über uns (physiopark.berlin)
   K  Karriere (karriere.physiopark.berlin)
   ============================================================ */

/* ---------- U1  Bühne Über uns: Dreierfoto ----------
   Das Familienfoto ist quer. Im 4:5-Rahmen fehlte rechts oder links ein
   Gesicht. Ab 961 px ist der Rahmen quadratisch wie auf /team/
   (r12-ueberuns-team.css T1), darunter bleibt er 4:3 wie überall. */
@media (min-width: 961px) {
  body[data-seite="/ueber-physiopark-berlin/"] .seite-hero.buehne .buehne-bild { aspect-ratio: 1 / 1; }
  body[data-seite="/ueber-physiopark-berlin/"] .seite-hero.buehne .buehne-rahmen { aspect-ratio: 1 / 1; }
}
body[data-seite="/ueber-physiopark-berlin/"] .seite-hero.buehne .buehne-rahmen img { object-position: 50% 35%; }

/* ---------- U2  Geschichte als Chronik ----------
   Drei Kapitel an einer feinen Linie, im mittleren ein Porträt in
   Schwarz-Weiß (Wunsch des Kunden), aus dem Familienfoto geschnitten.
   Am Handy steht das Porträt über dem Text. */
.ut-chronik {
  list-style: none;
  margin: var(--m8) 0 0;
  padding: 0;
  max-width: 880px;
  position: relative;
}
.ut-chronik::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: var(--linie);
}
.ut-kapitel {
  position: relative;
  padding: 0 0 var(--m10) 44px;
}
.ut-kapitel:last-child { padding-bottom: 0; }
.ut-kapitel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--gruen-dunkel);
  box-sizing: border-box;
}
.ut-kapitel h3 {
  margin: 0 0 var(--m3);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--tinte);
  text-wrap: balance;
}
.ut-kapitel p { margin: 0; max-width: 62ch; }
.ut-kapitel-bild {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--m8);
  align-items: start;
}
.ut-gestern { margin: 0; }
.ut-gestern img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--bogen-gross);
  filter: grayscale(1) contrast(1.05);
}
.ut-gestern figcaption {
  margin-top: var(--m2);
  font-family: var(--font-sub);
  font-style: italic;
  font-size: .9rem;
  color: var(--gruen-dunkel);
}
@media (max-width: 760px) {
  .ut-kapitel { padding-left: 34px; padding-bottom: var(--m8); }
  .ut-kapitel h3 { font-size: 1.1rem; }
  .ut-kapitel-bild { grid-template-columns: minmax(0, 1fr); gap: var(--m4); }
  .ut-gestern { max-width: 200px; }
}

/* ---------- U3  „Wo Sie uns finden“ ---------- */
.ut-heute-zeile {
  margin: var(--m3) 0 0;
  font-family: var(--font-sub);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--gruen-dunkel);
}

/* ---------- K1  Karriere-Bühne: zweiter Absatz der Beizeile ---------- */
.seite-hero .subline + .subline-zwei { margin-top: var(--m3); }

/* ---------- K2  Familie auf der Karriere: ein Foto statt zwei ---------- */
.k-familie { align-items: center; }
.k-familie-bild { margin: 0; }
.k-familie-bild img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 7 / 6;
  object-fit: cover;
  object-position: 50% 40%;
  border-radius: var(--bogen-gross);
}
.k-stimmen-kopf { margin-top: var(--m10); }

/* ---------- K3  kununu-Karte: Sterne und Profil-Link ----------
   Fünf Sterne als Text, die gefüllte Lage auf 82 Prozent (4,1 von 5)
   beschnitten. Der Link zum Profil liegt über der ganzen Karte. */
.beleg-kununu { position: relative; }
.beleg-sterne {
  position: relative;
  display: inline-block;
  margin: 6px auto 4px;
  font-size: 1.15rem;
  line-height: 1;
  letter-spacing: 2px;
  color: #CFD8BF;
  white-space: nowrap;
}
.beleg-sterne::before { content: "★★★★★"; }
.beleg-sterne-voll {
  position: absolute;
  inset: 0 auto 0 0;
  width: 82%;
  overflow: hidden;
  color: #E9A21A;
}
.beleg-sterne-voll::before { content: "★★★★★"; }
.beleg-link {
  display: inline-block;
  margin-top: var(--m2);
  font-weight: 700;
  color: var(--gruen-dunkel);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.beleg-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.beleg-kununu:hover { box-shadow: 0 10px 26px rgba(36, 57, 10, .14); }
.beleg-link:focus-visible { outline: 2px solid var(--gruen-dunkel); outline-offset: 3px; }

/* ---------- U4  Absätze im Kopf der Abschnitte ----------
   Lucas' Texte haben zwei Absätze, wo vorher einer stand. */
body[data-seite="/ueber-physiopark-berlin/"] .abschnitt-kopf p + p { margin-top: var(--m4); }

/* ---------- U5  Schlussband Über uns hell ----------
   Seit 21.10. steht die grüne Karriere-Tafel direkt davor (Lucas: „Erst
   jetzt den Recruiting-Teil“). Zwei dunkelgrüne Flächen untereinander
   wirkten wie ein Block, deshalb hell wie auf /team/ (r12-ueberuns-team.css). */
body[data-seite="/ueber-physiopark-berlin/"] .cta-band { background: var(--flaeche-creme); color: var(--tinte); border-top: 1px solid var(--linie); }
body[data-seite="/ueber-physiopark-berlin/"] .cta-band h2 { color: var(--tinte); }
body[data-seite="/ueber-physiopark-berlin/"] .cta-band .headline .zeile-gruen { color: var(--gruen-dunkel); }
body[data-seite="/ueber-physiopark-berlin/"] .cta-band .sub-strich { background: var(--gruen); }
body[data-seite="/ueber-physiopark-berlin/"] .cta-band p { color: var(--tinte-weich); }
body[data-seite="/ueber-physiopark-berlin/"] .cta-band .btn-primary { color: #fff; }
body[data-seite="/ueber-physiopark-berlin/"] .cta-band :focus-visible { outline-color: var(--gruen-dunkel); }
.k-familie .abschnitt-kopf p + p { margin-top: var(--m4); }