/* ============================================================
   Platin-Profilseite: Kopf mit Porträt und mehrzeiligem Leitsatz
   (partials/expert-platin-hero.php — .xp-hero--portrait, .xp-lead--title).
   Ein Bild im Hochformat steht am Smartphone oben rechts neben dem
   Namen, am Tablet neben Name und Leitsatz: Der Besucher sieht sofort,
   mit wem er es zu tun hat, und Leitsatz und Anfrage bleiben im ersten
   Bildschirm. Am Desktop steht es groß rechts neben dem Text.
   Ergänzt expert-platin.css, Präfix xp-.
   ============================================================ */

/* ---------- Mehrzeiliger Leitsatz: erste Zeile groß, weitere als Absatz ---------- */
.xp-lead--title {
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.15rem);
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
}
.xp-lead-more {
  margin-top: 0.7rem;
  max-width: 52ch;
  font-size: clamp(1.02rem, 0.96rem + 0.3vw, 1.15rem);
  line-height: 1.55;
  color: color-mix(in oklch, #fff 86%, var(--color-primary-200));
}
/* Die zweite Zeile nennt die Anlässe — im Gold der Linien hervorgehoben */
.xp-lead--title + .xp-lead-more { font-weight: 650; color: var(--color-accent-300); }
/* Mit Titelbild wandert der Leitsatz am Smartphone hinter die Anfrage
   (expert-platin.css) — mit allen seinen Zeilen, nicht nur der ersten. */
@media (max-width: 47.99rem) {
  .xp-hero--banner .xp-lead-more { order: 1; }
}

/* ---------- Porträt im Kopf ----------
   Ohne Rahmen: Das Foto verläuft oval in das Petrol des Kopfs, oben knapp,
   an den Seiten und unten weich, ohne sichtbare Bildkante. Das Gesicht
   bleibt voll deckend. */
.xp-hero--portrait .xp-hero-img {
  aspect-ratio: 4 / 5;
  object-position: 50% 22%;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
  -webkit-mask-image:
    radial-gradient(ellipse 50% 56% at 50% 42%, #000 62%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 9%);
  -webkit-mask-composite: source-in;
          mask-image:
    radial-gradient(ellipse 50% 56% at 50% 42%, #000 62%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 9%);
          mask-composite: intersect;
}

/* Smartphone und Tablet: Kennzeile und Name links, das Porträt daneben;
   alles Weitere darunter über die volle Breite. Der verlaufende Rand des
   Fotos darf in den Seitenrand und an den Leitsatz heranreichen, so bleibt
   das Gesicht groß, ohne die Spalte für den Namen zu verengen. Nur die
   Anordnung ändert sich, Lese- und Tab-Reihenfolge bleiben. */
@media (max-width: 63.99rem) {
  .xp-hero--portrait .xp-hero-grid {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 0.5rem;
    row-gap: 0;
    align-items: start;
  }
  .xp-hero--portrait .xp-hero-main { display: contents; }
  .xp-hero--portrait .xp-hero-main > * { grid-column: 1 / -1; }
  .xp-hero--portrait .xp-hero-main > .xp-kicker { grid-column: 1; grid-row: 1; }
  .xp-hero--portrait .xp-hero-main > .xp-name { grid-column: 1; grid-row: 2; align-self: start; }
  .xp-hero--portrait .xp-hero-figure {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: clamp(7.5rem, 40vw, 10rem);
    margin: -1rem -1rem -1rem 0;
  }
  .xp-hero--portrait .xp-seal { width: 3.4rem; right: auto; left: -1.1rem; bottom: -0.9rem; }
  .xp-hero--portrait .xp-hero-figure .xp-caption { padding-right: 0; font-size: 0.78rem; }
}
/* Smartphone mit Siegel: Das Siegel hängt unten links über die Bildkante.
   Ist der Name kürzer als das Foto, hält das Foto Abstand zum Leitsatz,
   damit das Siegel nicht auf dem Text liegt. */
@media (max-width: 47.99rem) {
  .xp-hero--portrait .xp-hero-figure:has(.xp-seal) { margin-bottom: 1rem; }
}
/* Tablet: Das Porträt steht neben Name und Leitsatz; der Leitsatz bleibt in
   der linken Spalte, alles in voller Breite folgt unter dem Foto. */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .xp-hero--portrait .xp-hero-grid { column-gap: 1.5rem; }
  .xp-hero--portrait .xp-hero-main > .xp-lead,
  .xp-hero--portrait .xp-hero-main > .xp-lead-more { grid-column: 1; }
  .xp-hero--portrait .xp-hero-figure { grid-row: 1 / span 4; width: 15rem; margin-bottom: 0; }
  .xp-hero--portrait .xp-seal { width: 4.4rem; left: -1.6rem; }
}
@media (min-width: 64rem) {
  .xp-hero--portrait .xp-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, clamp(24rem, 33vw, 30rem)); column-gap: 3rem; }
  .xp-hero--portrait .xp-hero-figure { justify-self: end; width: 100%; }
}