/* ============================================================
   PROJ-12 — Öffentliche AIO-Profilseite (/f/<slug>)
   ------------------------------------------------------------
   Fassung 03.09. („Runde 3", Entwurf Freelancerseite Public
   PROJ-12.dc.html): EINE Karte auf --surface (r 1.5rem) mit
   eingerückter Cover-Fläche, überlappendem Avatar mit Ring,
   Stat-Reihe mit Haarlinien und den Code-Panels des
   Talent-Fensters (--surface-2-Rahmen → Innenkasten --surface,
   Mono-Kopf). Werte stehen als Fließtext, nicht als Chips.

   Token-Basis wie die App (tokens.css/base.css). Wird
   ausschließlich vom serverseitig gerenderten HTML der Netlify
   Function geladen; die Seite hat kein JavaScript — es gibt
   hier also keine Klappmechanik, die Panels stehen offen.
   ============================================================ */

.pp-page {
  min-height: 100dvh;
  background: var(--bg);
  display: flex;
  justify-content: center;
  padding: 3rem 1.25rem 5rem;
}

.pp {
  width: 100%;
  max-width: 47rem;
  display: flex;
  flex-direction: column;
}

/* ---- Kopfzeile: Logo → Wortmarke → Link in die App ---- */
.pp-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
}
.pp-head .pb-logo {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.56rem;
  display: block;
}
.pp-head .word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: var(--track-body);
  color: var(--text);
  text-decoration: none;
}
.pp-head .word span {
  font-weight: 500;
  color: var(--text-soft);
}
.pp-head .back {
  margin-left: auto;
  font-size: 0.875rem;
  color: var(--text-soft);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.pp-head .back:hover { color: var(--text); }

/* ---- Die Karte ---- */
.pp-card {
  background: var(--surface);
  border-radius: 1.5rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

/* Cover: rein dekorative Fläche, eingerückt wie ein Passepartout.
   Bewusst OHNE Nutzerbild — das Profil-Banner ist laut Feature-
   Entscheidung nie Teil des öffentlichen Feldsets. */
.pp-cover {
  position: relative;
  height: 6.5rem;
  margin: 0.75rem 0.75rem 0;
  border-radius: 0.875rem;
  overflow: hidden;
  background:
    radial-gradient(140% 150% at 22% 18%, #a6c0b4 0%, #e6ddec 52%, #f2cd78 100%);
}
/* Profil-Banner (03.09.): der 5:1-Ausschnitt aus dem Editor füllt das
   Cover; der Verlauf darunter bleibt als Platzhalter bis zum Laden. */
.pp-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Hero: Avatar überlappt das Cover, Ring in Kartenfarbe ---- */
.pp-hero {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  padding: 0 2rem;
}
.pp-avatar {
  width: 4.75rem;
  height: 4.75rem;
  flex: none;
  /* Überlappung wie im Entwurf („Runde 3"): dort steht margin-top
     -2.375rem in einer flex-end-Zeile — das zieht NICHT nach oben,
     sichtbar überlappt der Avatar nur um die Differenz zu seinem
     zweizeiligen Textblock (4.75 − 3.47 ≈ 1.25rem). Hier steht der
     Entwurfswert ausdrücklich, am oberen Rand verankert — unabhängig
     von der Texthöhe (Mathias, 03.09.). */
  align-self: flex-start;
  margin-top: -1.25rem;
  /* Das Cover ist positioniert (position: relative fürs Banner-Bild) und
     läge sonst über dem Avatar — eigene Ebene wie .td2-ava. */
  position: relative;
  z-index: 2;
  border-radius: 1.4375rem;
  object-fit: cover;
  background: var(--avatar);
  box-shadow: 0 0 0 0.25rem var(--surface);
}
/* Kein Bild (oder Avatar-Baustein aus): Initialen auf dem Avatar-Ton */
.pp-avatar--initials {
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: var(--track-body);
  color: var(--text-soft);
}
.pp-hero-id {
  min-width: 0;
  flex: 1;
  padding-top: 0.625rem;
  display: flex;
  flex-direction: column;
}
.pp-hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: var(--track-display);
  line-height: 1.05;
  margin: 0;
}
.pp-jobtitle {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  color: var(--text-soft);
  margin: 0.125rem 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Knopf (Hero + Fuß der Karte) ---- */
.pp-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 1.75rem;
  padding: 0 0.625rem;
  background: var(--primary);
  color: var(--primary-text);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  border-radius: var(--r-xs);
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--dur) var(--ease);
}
.pp-btn:hover { background: var(--primary-hover); }
.pp-hero .pp-btn {
  align-self: flex-start;
  margin-top: 0.5rem;
}

/* ---- Stat-Reihe: gleich breite Spalten, Haarlinien als Trenner ---- */
.pp-stats {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  margin: 1.75rem 2rem 0;
  padding-bottom: 0.5rem;
  list-style: none;
}
.pp-stat {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0 1rem 0 0;
}
.pp-stat + .pp-stat {
  padding: 0 1rem;
  border-left: 1px solid var(--hairline);
}
.pp-stat-k {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
  line-height: 1;
  margin-bottom: 0.375rem;
}
.pp-stat-v {
  font-size: 1rem;
  font-weight: 600;
  /* Der Entwurf hält die Zeile mit nowrap+Ellipse kurz; hier darf sie
     umbrechen: „München · Germany · Remote" schnitt sonst genau die
     Arbeitsweise ab, die ein Auftraggeber sucht. */
  line-height: 1.25;
  overflow-wrap: break-word;
  font-variant-numeric: tabular-nums;
}
.pp-stat-v span {
  color: var(--text-soft);
  font-weight: 500;
}

/* ---- Panels: der Kasten-im-Kasten des Talent-Fensters ---- */
.pp-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 2rem 1.5rem;
}
.pp-panel {
  background: var(--surface-2);
  border-radius: 0.875rem;
  overflow: hidden;
}
.pp-panel h2 {
  margin: 0;
  padding: 0.5rem 0.875rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-faint);
}
.pp-panel-in {
  margin: 0 0.4375rem 0.4375rem;
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 0.0625rem rgb(var(--tint) / 0.05);
  padding: 0.875rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style: none;
}
.pp-panel-in p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
  text-wrap: pretty;
}

/* Stationen / Ausbildung: Initialen-Kachel + Rolle + Meta */
.pp-panel-in--list { gap: 0.6875rem; }
.pp-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.pp-item-mark {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--r-sm);
  background: var(--surface-warm);
  color: var(--text-soft);
  display: grid;
  place-items: center;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
}
.pp-item-txt {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.pp-item-role {
  font-size: 1rem;
  line-height: 1.5;
}
.pp-item-sub {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--text-faint);
}

/* Kontakt: Key-Value, Label in fester Spalte */
.pp-panel-in--kv { gap: 0.4375rem; }
.pp-kv {
  display: flex;
  gap: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.6;
}
.pp-kv-k {
  flex: none;
  min-width: 6.25rem;
  color: var(--text-faint);
  text-transform: lowercase;
}
.pp-kv a {
  color: var(--text);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color var(--dur) var(--ease);
}
.pp-kv a:hover { color: var(--brand); }

/* ---- Fuß der Karte: Frage + derselbe Knopf ---- */
.pp-cardcta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 2rem 2rem;
}
.pp-cardcta h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: var(--track-heading);
}

/* ---- Fußzeile unter der Karte ---- */
.pp-foot {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  font-size: 0.875rem;
  color: var(--text-soft);
}
.pp-foot a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.pp-foot-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.25rem;
}
.pp-foot-links a:hover { color: var(--text); }

/* Google „Bevorzugte Quellen" — Deeplink statt publisher.js (die
   Seite hat kein Skript); der Punkt trägt Googles vier Farben. */
.pp-gsource {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2rem;
  padding: 0.3125rem 0.8125rem;
  border-radius: var(--r-xs);
  background: var(--surface-warm);
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background var(--dur) var(--ease);
}
.pp-gsource:hover {
  background: color-mix(in srgb, var(--text) 8%, var(--surface-warm));
}
.pp-gdot {
  width: 0.8125rem;
  height: 0.8125rem;
  border-radius: 50%;
  flex: none;
  background: conic-gradient(#ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0);
}
.pp-foot-note {
  font-size: 0.75rem;
  color: var(--text-faint);
  text-align: center;
}

/* ---- 404-Variante: dieselbe Karte, nur ein Satz darin ---- */
.pp-empty {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.pp-empty h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: var(--track-heading);
  margin: 0;
}
.pp-empty p {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-soft);
  margin: 0 0 0.75rem;
}

/* ---- Schmal: Reihen stapeln, Knopf unter die Identität ---- */
@media (max-width: 640px) {
  .pp-page { padding: 1.5rem 1rem 3rem; }

  .pp-hero { padding: 0 1.25rem; flex-wrap: wrap; }
  .pp-jobtitle { white-space: normal; }
  .pp-hero .pp-btn {
    order: 3;
    width: 100%;
    justify-content: center;
    margin-top: 0.875rem;
  }

  .pp-stats {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    margin: 1.25rem 1.25rem 0;
  }
  .pp-stat { padding: 0; }
  .pp-stat + .pp-stat {
    padding: 0.75rem 0 0;
    margin-top: 0.75rem;
    border-left: 0;
    border-top: 1px solid var(--hairline);
  }

  .pp-body { padding: 1rem 1.25rem 1.25rem; }
  .pp-panel-in { padding: 0.75rem 0.875rem; }

  /* Kontakt: Label ÜBER dem Wert (wie im Talent-Fenster schmal) */
  .pp-kv { flex-direction: column; gap: 0; }
  .pp-kv-k { min-width: 0; }

  .pp-cardcta {
    flex-direction: column;
    align-items: flex-start;
    padding: 0.5rem 1.25rem 1.5rem;
  }
}