/* ============================================================
   Team-Profil / -Übersicht
   Pages: #team-profile (/team/{slug}), #team (/team)
   ============================================================ */

/* Profil (einfach, ohne Makler-Ansicht): Foto neben Kopfdaten (ab Tablet), darunter Vita + Kontakt. */
#team-profile .team-profile > header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-block);
  align-items: center;
  margin-block-end: var(--gap-section);
}
/* Foto im Kreis wie im Ansprechpartner-Kasten der Objektseite (.avatar, 02-base.css). */
#team-profile .team-profile .avatar {
  width: 12rem;
  height: 12rem;
  flex: none;
}
#team-profile .meta { display: grid; gap: var(--space-2); }
#team-profile .location { color: var(--color-text-muted); }
#team-profile .vita { margin-block-end: var(--gap-section); }
#team-profile address {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-style: normal;
}
#team-profile .back { margin-block-start: var(--gap-block); }

/* Übersicht /team: GENAU die Team-SECTION (sections/team.css, View\TeamIndex seit 30.09.2026) — kein eigenes CSS mehr. */
#team-profile .eyebrow { margin: 0; }
/* Social-Links (runde Knöpfe) über „Profil ansehen" — gleiche Bauform wie im Ansprechpartner-Kasten */

/* ============================================================
   Makler-Profilseite (Schalter agent_profiles) — .agent-profile
   Aufbau nach Vorlage: Kopf (+ Kennzahlen) · Über mich/Eckdaten | Kontakt · Objekte · Bewertungen
   ============================================================ */
#team-profile .agent-profile { display: grid; gap: var(--gap-section); }
/* Grid-Kinder dürfen schmaler als ihr Inhalt werden — sonst wuchs der Bewertungsblock (Karten-Liste) über die Spalte
   hinaus und die ganze Seite scrollte waagerecht (gemessen 28.09.2026: 1520 px Block in 1363 px Spalte). */
#team-profile .agent-profile > *,
#team-profile .ap-grid > * { min-width: 0; }

/* --- Kopf -------------------------------------------------------------------------------------- */
#team-profile .ap-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-5) var(--space-3);   /* Handy knapp (Nutzer 28.09.2026: zu viel verschenkter Platz); ab 48rem großzügig */
  border-radius: var(--radius-xl);
  background: var(--color-bg-alt);
  text-align: center;
}
@media (min-width: 48rem) {
  #team-profile .ap-head {
    grid-template-columns: auto 1fr;
    text-align: start;
    padding: var(--space-10) var(--space-10) var(--space-6);   /* unten knapper: die Kennzahlen-Karten schließen ab */
    column-gap: var(--space-10);
  }
}
#team-profile .ap-photo { margin: 0; justify-self: center; }
/* Foto und Platzhalter: gleicher Kreis wie im Ansprechpartner-Kasten, nur größer. */
#team-profile .ap-photo .avatar,
#team-profile .ap-photo .contact-avatar {
  width: 14rem;
  height: 14rem;
  box-shadow: var(--shadow-lg);
  border: 0.375rem solid var(--color-bg);
}
#team-profile .ap-photo .avatar:hover { transform: none; }
#team-profile .ap-photo .contact-avatar {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-text-muted);
}
@media (min-width: 64rem) {
  #team-profile .ap-photo .avatar,
  #team-profile .ap-photo .contact-avatar { width: 16rem; height: 16rem; }
}

#team-profile .ap-head .meta { gap: var(--space-3); justify-items: center; }
@media (min-width: 48rem) { #team-profile .ap-head .meta { justify-items: start; } }
/* Name: am Handy eine Stufe kleiner (sonst Umbruch schon bei „Tom Test Makler") */
#team-profile .ap-head h1 { margin: 0; font-size: var(--text-3xl); line-height: var(--leading-tight); }
@media (min-width: 48rem) { #team-profile .ap-head h1 { font-size: var(--text-4xl); } }
/* Kernaussage (Team-Modul, Migration 5056) — auf beiden Profil-Ansichten */
/* Am Handy zentriert ohne Balken (wie der übrige Kopf), ab Tablet linksbündig mit Balken */
#team-profile .ap-quote {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-style: italic;
  color: var(--color-text);
  text-align: center;
}
@media (min-width: 48rem) {
  #team-profile .ap-quote {
    padding-inline-start: var(--space-4);
    border-inline-start: 0.1875rem solid var(--color-primary);
    font-size: var(--text-lg);
    text-align: start;
  }
}
#team-profile .ap-quote p { margin: 0; }
#team-profile .ap-quote p::before { content: '„'; }
#team-profile .ap-quote p::after { content: '“'; }

/* Zeilen Firma/Büro/Registrierung: Ui::icon_lines(…, 'center-sm') — Stil in components/ui.css */
#team-profile .ap-head .icon-lines { color: var(--color-text-muted); }
/* Bewertung + Social im Kopf: am Handy zentriert (wie der Kopf), ab Tablet linksbündig */
#team-profile .ap-head .rating,
#team-profile .ap-head .social { justify-content: center; }
@media (min-width: 48rem) {
  #team-profile .ap-head .rating,
  #team-profile .ap-head .social { justify-content: flex-start; }
}
#team-profile .ap-head .icon-lines .muted { color: var(--color-text-light); }

/* Social-Links als runde Knöpfe */

#team-profile .ap-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 0; justify-content: center; }
@media (min-width: 48rem) { #team-profile .ap-actions { justify-content: flex-start; } }

/* Kennzahlen unter Foto + Kopfdaten — je eine Karte mit Icon (heben sich vom Kopf ab). */
#team-profile .ap-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(7.5rem, 100%), 1fr));   /* Handy: 2 je Reihe, Desktop: 4 */
  gap: var(--space-3);
  margin: 0;
  padding: 0;                          /* global hat dl ein padding-block */
  text-align: center;
}
/* global ist dl > div ein rechtsbündiges Flex-Paar mit Unterlinie — hier Karte: Icon, Wert, Begriff untereinander */
#team-profile .ap-stats > div {
  display: flex;
  flex-direction: column;              /* Markup: Icon, dd (Wert), dt (Begriff) */
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-2);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
}
#team-profile .ap-stats > div > svg { color: var(--color-primary); }
#team-profile .ap-stats > div:hover { background: var(--color-bg); }
#team-profile .ap-facts > div:hover { background: var(--color-bg); }
#team-profile .ap-stats dd {
  margin: 0;
  text-align: center;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  overflow-wrap: anywhere;
  line-height: var(--leading-tight);
  color: var(--color-text);
}
#team-profile .ap-stats dd a { color: inherit; text-decoration: none; }
#team-profile .ap-stats dt { font-size: var(--text-sm); color: var(--color-text-muted); }

/* --- Über mich + Eckdaten | Kontakt ---------------------------------------------------------- */
#team-profile .ap-grid {
  display: grid;
  gap: var(--gap-block);
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  align-items: stretch;                /* Über mich + Kontakt gleich hoch (Nutzerwunsch 28.09.2026) */
}
@media (min-width: 64rem) {
  #team-profile .ap-grid:has(.ap-about) { grid-template-columns: 2fr 1fr; }
}
#team-profile .ap-grid .panel { padding: var(--space-4) var(--space-3); border-radius: var(--radius-lg); }
/* Ab Tablet: großzügige Innenabstände wie bisher (Kennzahlen-Karten ebenso; Eckdaten-Karten s. dort) */
@media (min-width: 48rem) {
  #team-profile .ap-grid .panel { padding: var(--space-6); }
  #team-profile .ap-stats > div { padding: var(--space-5) var(--space-4); }
}
/* Mindesthöhe nur, wenn „Über mich" und Kontakt nebeneinander stehen — untereinander erzeugte sie leeren Raum */
@media (min-width: 64rem) {
  #team-profile .ap-grid .panel { min-height: 22rem; }
}
#team-profile .ap-about h2,
#team-profile .ap-contact h2 { margin-block-start: 0; }
#team-profile .ap-about .vita { margin-block-end: var(--space-6); }
#team-profile .ap-about h3 { font-size: var(--text-lg); }
#team-profile .ap-about .tags { margin-block-end: var(--space-6); }   /* Schlagworte: Ui::tags (.pill) */
#team-profile .ap-facts {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  margin: 0;
}
/* global ist dl > div ein Flex-Paar — hier Karte mit Icon, Begriff, Wert untereinander */
#team-profile .ap-facts > div {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-3);
  row-gap: var(--space-1);
  align-items: start;
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--color-bg);
}
#team-profile .ap-facts svg { grid-row: span 2; color: var(--color-primary); margin-block-start: 0.1rem; }
#team-profile .ap-facts dt { font-weight: 600; }
#team-profile .ap-facts dd { margin: 0; text-align: start; color: var(--color-text-muted); }
@media (min-width: 48rem) { #team-profile .ap-facts > div { padding: var(--space-4); } }

#team-profile .ap-contact .icon-lines { gap: var(--space-3); margin-block-end: var(--space-6); }   /* Stil: components/ui.css */
/* Kontaktbox: Liste oben, „Nachricht senden" (öffnet das Modal) unten bündig — Box ist so hoch wie „Über mich". */
#team-profile .ap-contact { display: flex; flex-direction: column; }
#team-profile .ap-contact > .btn { width: 100%; justify-content: center; margin-block-start: auto; }

/* --- Meine Objekte ----------------------------------------------------------------------------- */
#team-profile .ap-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block: var(--space-2) var(--gap-block); }
#team-profile .ap-tabs .is-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverse); }
#team-profile .ap-card[hidden] { display: none; }
#team-profile .ap-more { text-align: center; margin-block-start: var(--gap-block); }

/* --- Bewertungen ------------------------------------------------------------------------------- */
/* Die Section-Basis setzt .testimonials auf max-width:none (Startseite: volle Breite) — hier im Raster begrenzen,
   sonst wuchs der Block auf die Breite seiner Karten-Spalten (1520 px in 1363 px) und die Seite scrollte waagerecht. */
#team-profile .ap-reviews { max-width: 100%; }
/* Summen-Bewertung über den Karten: Abstand zur Kartenreihe (Ui::rating hat global keinen Außenabstand) */
#team-profile .ap-reviews > .rating { margin-block-end: var(--gap-block); }
#team-profile .ap-review-list {
  display: grid; gap: var(--gap-block);
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
}