/* ============================================================
   Platin-Profilseite — die „zweite Website“ eines Sachverständigen
   (templates/expert-profile-platin.php, partials/expert-platin-*.php).
   Leitmotiv wie auf den Platin-Seiten: dunkles Petrol mit goldenen
   Linien. Dazu ein Punktraster — die Reihen der Injektionspacker,
   als ruhige Struktur auch für jedes andere Fachgebiet tragfähig.
   Das Zeichen der Gutachter-Gesellschaft trägt seine drei Sterne in
   Schwarz, Rot und Gold; dieselben drei Farben stehen als Streifen an
   den Kanten von Kopf und Kontaktabschluss.
   Diese Datei: Kopf, Titelbild, Siegel, Eckdaten, Themenliste und
   Kontakt; Abschnitte, Bildfolge und Einsatzgebiet stehen in
   expert-platin-content.css.
   Farben und Schriften aus dem Theme (tailwind/input.css), Präfix xp-.
   ============================================================ */

:root {
  /* Die Sternfarben des Logos (img/logo.svg). */
  --gg-black: #000;
  --gg-red: #f00;
  --gg-gold: #fc0;
  --gg-stripe: linear-gradient(90deg, var(--gg-black) 0 33.34%, var(--gg-red) 0 66.67%, var(--gg-gold) 0);
}

/* ---------- Gemeinsam: dunkle Flächen mit Punktraster ---------- */
.xp-hero,
.xp-gallery,
.xp-contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-primary-950);
  color: #fff;
}
.xp-hero::before,
.xp-gallery::before,
.xp-contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle, color-mix(in oklch, var(--color-accent-500) 40%, transparent) 1.4px, transparent 2px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(110deg, transparent 35%, #000 85%);
          mask-image: linear-gradient(110deg, transparent 35%, #000 85%);
  opacity: 0.5;
}
.xp-gallery::before {
  -webkit-mask-image: linear-gradient(250deg, transparent 45%, #000 100%);
          mask-image: linear-gradient(250deg, transparent 45%, #000 100%);
  opacity: 0.35;
}
/* Streifen in den Sternfarben an der Unterkante des Kopfs und der Oberkante des Kontakts */
.xp-hero::after,
.xp-contact::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gg-stripe);
}
.xp-hero::after { bottom: 0; }
.xp-contact::after { top: 0; }

.xp-kicker {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-300);
}
.xp-caption {
  margin-top: 0.75rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: color-mix(in oklch, #fff 78%, var(--color-primary-200));
}
.xp-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

/* ---------- Zeichen der Gutachter-Gesellschaft ---------- */
.xp-brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.95rem 0.6rem 0.8rem;
  border-radius: 0.65rem;
  background: #fff;
  box-shadow: 0 12px 26px -14px rgb(0 0 0 / 0.6);
  overflow: hidden;
}
.xp-brand::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--gg-stripe);
}
.xp-brand-logo { display: block; width: 5.75rem; height: auto; }
.xp-brand-tier {
  white-space: nowrap;
  padding-left: 0.7rem;
  border-left: 1px solid color-mix(in oklch, var(--color-primary-900) 22%, transparent);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary-900);
}

/* ---------- Kopf ---------- */
.xp-hero { padding-block: clamp(2.25rem, 1.5rem + 3.5vw, 4.75rem) clamp(4.25rem, 3rem + 5vw, 7rem); }
.xp-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.25rem; align-items: center; max-width: 72rem; margin-inline: auto; }
.xp-name {
  margin-top: 0.65rem;
  font-family: var(--font-display);
  font-weight: 650;
  font-size: clamp(2.3rem, 1.6rem + 3.4vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: #fff;
}
.xp-lead {
  margin-top: 1.1rem;
  max-width: 40ch;
  font-size: clamp(1.12rem, 1rem + 0.55vw, 1.4rem);
  line-height: 1.5;
  color: color-mix(in oklch, #fff 90%, var(--color-primary-200));
}
.xp-badges { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.xp-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.38rem 0.9rem;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1.3;
  color: #fff;
  border: 1px solid color-mix(in oklch, #fff 32%, transparent);
  background: color-mix(in oklch, #fff 8%, transparent);
}
.xp-badge svg { width: 0.95rem; height: 0.95rem; flex: none; color: var(--color-accent-400); }
.xp-badge--register { color: var(--color-accent-300); border-color: color-mix(in oklch, var(--color-accent-500) 70%, transparent); }

.xp-rating { margin-top: 1.4rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.9rem; }
.xp-hero .rev-stars-base svg { fill: color-mix(in oklch, #fff 24%, transparent); }
.xp-hero .rev-stars-fill svg { fill: var(--color-accent-500); }
.xp-rating-link { font-size: 1rem; color: #fff; }
a.xp-rating-link { text-decoration: underline; text-decoration-color: color-mix(in oklch, #fff 45%, transparent); text-underline-offset: 4px; }
a.xp-rating-link:hover { text-decoration-color: var(--color-accent-400); }
.xp-rating-link strong { font-family: var(--font-display); font-size: 1.4rem; font-weight: 650; color: inherit; }
.xp-rating-source { font-size: 0.88rem; color: color-mix(in oklch, #fff 78%, var(--color-primary-200)); }
.xp-note { margin-top: 0.85rem; font-size: 0.88rem; color: color-mix(in oklch, #fff 78%, var(--color-primary-200)); }

/* Kopf ohne Titelbild: erstes Bild neben dem Namen, das Siegel darauf */
.xp-hero-figure { margin: 0; }
.xp-hero-frame { position: relative; }
.xp-hero-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: 1.25rem;
  outline: 1px solid color-mix(in oklch, var(--color-accent-500) 60%, transparent);
  outline-offset: 6px;
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.65);
}
.xp-seal {
  position: absolute;
  right: -0.4rem;
  bottom: -1.6rem;
  width: clamp(7.5rem, 5rem + 6vw, 11rem);
  height: auto;
  filter: drop-shadow(0 12px 22px rgb(0 0 0 / 0.4)) drop-shadow(0 0 22px color-mix(in oklch, var(--color-accent-400) 40%, transparent));
}
.xp-hero-figure .xp-caption { margin-top: 1rem; padding-right: 8.5rem; }
.xp-hero-seal { margin: 0; justify-self: start; }
.xp-hero-seal img { width: clamp(9rem, 7rem + 5vw, 13rem); height: auto; }

@media (min-width: 64rem) {
  .xp-hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: 4rem; }
  .xp-hero--text .xp-hero-grid { grid-template-columns: minmax(0, 1fr) auto; }
  .xp-hero-img { aspect-ratio: 4 / 5; }
  .xp-seal { left: -3.5rem; right: auto; bottom: 2.25rem; }
  .xp-hero-figure .xp-caption { padding-right: 0; }
}

/* ---------- Titelbild: auf dem Smartphone ganz oben, am Desktop rechts neben dem Namen ----------
   Das Bild verläuft nach links, rechts und unten in das Petrol des Kopfs. Der
   Ausschnitt hält die Messstelle mit dem Schimmel frei; der Text steht immer auf
   dem Petrol, nie auf dem Bild. */
.xp-hero--banner { padding-top: 0; }
.xp-hero--banner > .container-x { position: relative; }
.xp-banner-frame {
  --xp-fade: 12%;
  position: relative;
  width: min(100%, 96rem);
  height: clamp(15rem, 9rem + 22vw, 26rem);
  margin-inline: auto;
}
.xp-banner-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 45%;
}
.xp-banner-frame::after {
  content: "";
  position: absolute;
  inset: -1px;
  background:
    linear-gradient(90deg,
      var(--color-primary-950) 0,
      color-mix(in oklch, var(--color-primary-950) 55%, transparent) calc(var(--xp-fade) * 0.5),
      transparent var(--xp-fade),
      transparent calc(100% - var(--xp-fade)),
      color-mix(in oklch, var(--color-primary-950) 55%, transparent) calc(100% - var(--xp-fade) * 0.5),
      var(--color-primary-950) 100%),
    linear-gradient(180deg,
      color-mix(in oklch, var(--color-primary-950) 30%, transparent) 0,
      transparent 14%,
      transparent 64%,
      color-mix(in oklch, var(--color-primary-950) 70%, transparent) 84%,
      var(--color-primary-950) 98%);
}
@media (min-width: 48rem) {
  .xp-banner-frame { --xp-fade: 18%; }
}

/* Siegel groß im Kopf, mit dem Zeichen der Gutachter-Gesellschaft */
.xp-plaque {
  order: -1;
  margin: -3.5rem 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.xp-plaque-seal {
  order: 2;
  flex: none;
  width: clamp(9.5rem, 6rem + 13vw, 17rem);
  height: auto;
  border-radius: 50%;
  filter: drop-shadow(0 18px 28px rgb(0 0 0 / 0.5)) drop-shadow(0 0 34px color-mix(in oklch, var(--color-accent-400) 45%, transparent));
}
.xp-plaque-caption { order: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; padding-bottom: 0.35rem; }
.xp-plaque-text {
  max-width: 20ch;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.4;
  color: color-mix(in oklch, #fff 84%, var(--color-primary-200));
}
.xp-hero--banner .xp-hero-grid { gap: 1.25rem; }
/* Schmal: Logo und Partnerstufe untereinander, damit das Siegel daneben groß bleibt */
@media (max-width: 29.99rem) {
  .xp-plaque .xp-brand { flex-direction: column; align-items: flex-start; gap: 0.4rem; padding-bottom: 0.7rem; }
  .xp-plaque .xp-brand-tier {
    padding: 0.4rem 0 0;
    border-left: 0;
    border-top: 1px solid color-mix(in oklch, var(--color-primary-900) 22%, transparent);
  }
}
/* Smartphone: wie eine Visitenkarte — Name, gleich darunter die Anfrage, dann
   Leitsatz, Bestellung und Note. Nur Text wandert, die Tab-Reihenfolge bleibt. */
@media (max-width: 47.99rem) {
  .xp-hero--banner .xp-hero-main { display: flex; flex-direction: column; }
  .xp-hero--banner .xp-lead,
  .xp-hero--banner .xp-badges,
  .xp-hero--banner .xp-rating { order: 1; }
  .xp-hero--banner .xp-actions { margin-top: 1.4rem; }
  .xp-hero--banner .xp-lead { margin-top: 1.5rem; }
}

/* Desktop: Text links auf dem Petrol, das Bild rechts über die volle Höhe des
   Kopfs. Das Siegel steht auf der unteren Bildkante, dort wo das Bild nur noch
   Hose und Fußboden zeigt — Messgerät, Schimmel und Gesicht bleiben frei. */
@media (min-width: 64rem) {
  .xp-hero--banner { padding-top: clamp(2rem, 0.5rem + 2.4vw, 3.5rem); }
  .xp-hero--banner .xp-banner {
    position: absolute;
    z-index: -1;
    inset-block: 0;
    left: max(31rem, 50% - 7rem);
    right: max(0rem, 50% - 52rem);
  }
  .xp-hero--banner .xp-banner-frame { --xp-fade: 30%; width: 100%; height: 100%; }
  .xp-hero--banner .xp-banner-img { object-position: 62% 50%; }
  .xp-hero--banner .xp-banner-frame::after {
    background:
      linear-gradient(90deg,
        var(--color-primary-950) 0,
        color-mix(in oklch, var(--color-primary-950) 72%, transparent) calc(var(--xp-fade) * 0.4),
        transparent var(--xp-fade),
        transparent 90%,
        var(--color-primary-950) 100%),
      linear-gradient(180deg,
        color-mix(in oklch, var(--color-primary-950) 35%, transparent) 0,
        transparent 12%,
        transparent 66%,
        color-mix(in oklch, var(--color-primary-950) 72%, transparent) 88%,
        var(--color-primary-950) 100%);
  }
  .xp-hero--banner .xp-hero-grid {
    grid-template-columns: minmax(0, 36rem) minmax(0, 1fr);
    align-items: end;
    gap: 2.5rem;
  }
  .xp-plaque {
    order: 0;
    margin: 0 calc(-1 * clamp(0rem, 50vw - 38rem, 6rem)) -1.5rem 0;
    justify-self: end;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  .xp-plaque-seal { order: 0; width: clamp(13rem, 4rem + 11vw, 16rem); }
  .xp-plaque-caption { position: relative; align-items: center; text-align: center; }
  /* Die Zeile unter dem Zeichen steht auf dem Bild: ein weicher Petrol-Schatten hält sie lesbar */
  .xp-plaque-caption::before {
    content: "";
    position: absolute;
    inset: 30% -2.5rem -1.5rem;
    z-index: -1;
    background: radial-gradient(closest-side, color-mix(in oklch, var(--color-primary-950) 88%, transparent) 55%, transparent);
  }
  .xp-plaque-text { max-width: 24ch; }
}

/* ---------- Eckdaten, über der Kante des Kopfs ---------- */
.xp-facts-wrap { position: relative; z-index: 1; margin-top: clamp(-3.5rem, -2rem - 2vw, -2.25rem); }
.xp-facts {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 72rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: color-mix(in oklch, var(--color-primary-900) 12%, #fff);
  border: 1px solid color-mix(in oklch, var(--color-primary-900) 12%, transparent);
  border-radius: var(--radius-xl2);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.xp-fact { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.1rem 1.15rem 1.25rem; background: #fff; }
.xp-fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
.xp-fact-value {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem);
  line-height: 1.1;
  color: var(--color-primary-900);
}
.xp-fact-value::before {
  content: "";
  display: block;
  width: 1.75rem;
  height: 3px;
  margin-bottom: 0.7rem;
  border-radius: 2px;
  background: var(--color-accent-600);
}
.xp-fact-label { font-size: 0.93rem; line-height: 1.45; color: var(--color-primary-800); }
@media (min-width: 64rem) {
  .xp-facts { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
  .xp-fact { padding: 1.4rem 1.5rem 1.5rem; }
  .xp-fact:last-child:nth-child(odd) { grid-column: auto; }
}

/* ---------- Themen der Seite ---------- */
.xp-toc { padding-top: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); }
.xp-toc-inner { max-width: 72rem; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.xp-toc-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary-700);
}
.xp-toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.xp-toc-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--color-primary-600) 30%, transparent);
  background: #fff;
  color: var(--color-primary-800);
  font-size: 0.93rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.xp-toc-link:hover { border-color: var(--color-accent-700); background: var(--color-sand); color: var(--color-primary-950); }
.xp-toc-link:focus-visible { outline: 3px solid var(--color-accent-600); outline-offset: 2px; }

/* ---------- Kontaktabschluss ---------- */
.xp-contact { padding-block: clamp(2.75rem, 2rem + 3vw, 4.75rem); }
.xp-contact-grid { display: grid; gap: 2rem; max-width: 72rem; margin-inline: auto; }
.xp-contact-title { margin-top: 0.55rem; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem); line-height: 1.1; color: #fff; }
.xp-contact-text { margin-top: 0.9rem; max-width: 52ch; font-size: 1.05rem; line-height: 1.65; color: color-mix(in oklch, #fff 88%, var(--color-primary-200)); }
.xp-contact-brand {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: color-mix(in oklch, #fff 80%, var(--color-primary-200));
}
.xp-contact-brand > span:last-child { max-width: 34ch; }
.xp-card {
  font-style: normal;
  padding: 1.5rem 1.6rem 1.6rem;
  border-radius: var(--radius-xl2);
  background: #fff;
  color: var(--color-primary-950);
  outline: 1px solid color-mix(in oklch, var(--color-accent-600) 60%, transparent);
  outline-offset: -7px;
  box-shadow: 0 24px 48px -28px rgb(0 0 0 / 0.6);
}
.xp-card-name { font-family: var(--font-display); font-weight: 650; font-size: 1.25rem; line-height: 1.2; color: var(--color-primary-950); }
.xp-card-line { margin-top: 0.4rem; line-height: 1.55; }
.xp-card-list { margin: 1rem 0 0; display: grid; gap: 0.4rem; }
.xp-card-list div { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); gap: 0.5rem; align-items: baseline; }
.xp-card-list dt { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-primary-700); }
.xp-card-list dd { margin: 0; overflow-wrap: anywhere; }
.xp-card a { font-weight: 650; color: var(--color-primary-700); text-decoration: underline; text-underline-offset: 3px; }
.xp-card a:hover { color: var(--color-primary-900); }
.xp-card-links { margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; }
@media (min-width: 56rem) {
  .xp-contact-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: center; gap: 3.5rem; }
}