/* ============================================================
   Platin-Profilseite, Inhalt: eigene Abschnitte mit Listen,
   Schritten, Zwischenüberschriften, Zitaten, Tabellen und
   Anfrage-Knöpfen, die
   Bildfolge „Aus der Praxis“, das Einsatzgebiet mit Karte und die
   aufklappbaren Bewertungen. Kopf und Kontakt: expert-platin.css
   (dort auch die Sternfarben --gg-*). Präfix xp-.
   ============================================================ */

/* ---------- Abschnitte ---------- */
.xp-section { padding-block: clamp(2.75rem, 2rem + 3vw, 4.75rem); }
.xp-section + .xp-section { border-top: 1px solid color-mix(in oklch, var(--color-primary-900) 9%, transparent); }
.xp-section-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; max-width: 72rem; margin-inline: auto; }
.xp-section-head { display: flex; flex-direction: column; gap: 0.6rem; }
.xp-section-no,
.xp-region-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: var(--color-accent-800);
}
/* Die Linie hinter der Nummer in den Sternfarben des Logos */
.xp-section-no::after,
.xp-region-kicker::after { content: ""; width: 2.75rem; height: 2px; background: var(--gg-stripe); }
.xp-section-title {
  font-size: clamp(1.45rem, 1.15rem + 1.1vw, 2rem);
  line-height: 1.16;
  color: var(--color-primary-950);
  /* Lange Komposita („Mauerwerkstrockenlegung“) trennen statt überlaufen */
  -webkit-hyphens: auto;
          hyphens: auto;
  overflow-wrap: break-word;
}
.xp-section-body > * + * { margin-top: 1.1rem; }
.xp-section-body > .xp-subhead { margin-top: 2.4rem; }
.xp-section-body > .xp-subhead:first-child { margin-top: 0; }
.xp-section-body > .xp-subhead + * { margin-top: 0.8rem; }
.xp-text { max-width: 65ch; font-size: 1.06rem; line-height: 1.75; color: var(--color-primary-950); }
.xp-subhead {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);
  line-height: 1.25;
  color: var(--color-primary-900);
}
@media (min-width: 56rem) {
  .xp-section-grid { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.42fr); gap: 3.5rem; }
  /* Die Überschrift bleibt beim Lesen langer Abschnitte stehen. */
  .xp-section-head { position: sticky; top: 6.5rem; align-self: start; }
}

/* Leistungen: jede Zeile mit einem Punkt wie ein Packerkopf */
.xp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.xp-list li {
  position: relative;
  padding: 0.8rem 1rem 0.8rem 2.75rem;
  border-radius: 0.85rem;
  background: var(--color-sand);
  border: 1px solid color-mix(in oklch, var(--color-primary-900) 7%, transparent);
  line-height: 1.5;
  color: var(--color-primary-950);
}
.xp-list li::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 1.12rem;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-accent-700) 0 32%, transparent 36%);
  box-shadow: inset 0 0 0 2px var(--color-primary-700);
}
@media (min-width: 40rem) {
  .xp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem 0.9rem; }
  .xp-list--long { grid-template-columns: minmax(0, 1fr); }
}

/* Ablauf: nummerierte Schritte an einer gepunkteten Linie */
.xp-steps { list-style: none; margin: 0; padding: 0; counter-reset: xp-step; }
.xp-steps li {
  counter-increment: xp-step;
  position: relative;
  min-height: 2.4rem;
  padding: 0.2rem 0 1.5rem 3.6rem;
  font-size: 1.04rem;
  line-height: 1.6;
  color: var(--color-primary-950);
}
.xp-steps li:last-child { padding-bottom: 0; }
.xp-steps li::before {
  content: counter(xp-step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--color-primary-950);
  color: var(--color-accent-300);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
}
.xp-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(1.2rem - 1px);
  top: 2.75rem;
  bottom: 0.35rem;
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--color-accent-700) 0 3px, transparent 3px 8px);
}

/* Zitate aus den Bewertungen */
.xp-quotes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.xp-quote {
  position: relative;
  height: 100%;
  margin: 0;
  padding: 1.35rem 1.35rem 1.25rem;
  border-radius: 1rem;
  background: var(--color-primary-950);
  color: #fff;
  overflow: hidden;
}
.xp-quote::before {
  content: "";
  position: absolute;
  left: 1.35rem;
  top: 0;
  width: 2.25rem;
  height: 3px;
  background: var(--color-accent-500);
}
.xp-quote blockquote { margin: 0; }
.xp-quote p { max-width: 60ch; font-family: var(--font-display); font-size: 1.08rem; line-height: 1.55; color: #fff; }
.xp-quote figcaption { margin-top: 0.85rem; font-size: 0.86rem; font-weight: 650; line-height: 1.4; color: var(--color-accent-300); }

/* Tabellen: Regelwerk und Vergleich */
.xp-table-wrap {
  overflow-x: auto;
  border-radius: 1rem;
  border: 1px solid color-mix(in oklch, var(--color-primary-900) 12%, transparent);
  background: #fff;
}
.xp-table-wrap:focus-visible { outline: 3px solid var(--color-accent-600); outline-offset: 2px; }
.xp-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; line-height: 1.5; }
/* Ab drei Spalten scrollt die Tabelle auf schmalen Displays seitlich, statt Wörter zu zerreißen. */
.xp-table--wide { min-width: 34rem; }
.xp-table thead th,
.xp-table thead td {
  padding: 0.75rem 1rem;
  background: var(--color-primary-950);
  color: #fff;
  font-size: 0.84rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-align: left;
  vertical-align: bottom;
}
.xp-table tbody th,
.xp-table tbody td {
  padding: 0.8rem 1rem;
  border-top: 1px solid color-mix(in oklch, var(--color-primary-900) 9%, transparent);
  text-align: left;
  vertical-align: top;
  color: var(--color-primary-950);
}
.xp-table tbody th { width: 1%; white-space: nowrap; font-weight: 700; color: var(--color-primary-900); }
.xp-table tbody tr:nth-child(even) { background: var(--color-sand); }

/* Anfrage im Text: eine Frage aus dem Abschnitt, daneben der Knopf — im Petrol des Kopfs */
.xp-section-body > .xp-cta,
.xp-region-text > .xp-cta { margin-top: 2rem; }
.xp-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  padding: 1.25rem 1.35rem;
  border-radius: 1rem;
  background: var(--color-primary-950);
  border-left: 4px solid var(--color-accent-500);
}
.xp-cta-text { flex: 1 1 18rem; max-width: 52ch; font-size: 1rem; line-height: 1.6; color: color-mix(in oklch, #fff 86%, var(--color-primary-200)); }
.xp-cta-lead { display: block; margin-bottom: 0.2rem; font-family: var(--font-display); font-size: 1.08rem; font-weight: 650; color: #fff; }
/* Lange Beschriftungen („Schimmelgutachten anfragen“) brechen um, statt aus dem Kasten zu ragen. */
.xp-cta-btn { flex: none; min-height: 2.75rem; white-space: normal; text-align: left; line-height: 1.25; }
@media (max-width: 29.99rem) {
  .xp-cta { padding: 1.1rem 1rem; }
  .xp-cta-btn { width: 100%; justify-content: space-between; }
}

/* ---------- Aus der Praxis ---------- */
.xp-gallery { padding-block: clamp(2.75rem, 2rem + 3vw, 5rem); }
.xp-gallery > .container-x > * { max-width: 72rem; margin-inline: auto; }
.xp-gallery-title { font-size: clamp(1.6rem, 1.25rem + 1.4vw, 2.4rem); line-height: 1.1; color: #fff; }
.xp-gallery-title::after {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  margin-top: 0.9rem;
  border-radius: 2px;
  background: var(--color-accent-500);
}
.xp-shots {
  list-style: none;
  margin-top: 1.75rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 0.9rem;
}
.xp-shot { grid-column: span 1; }
.xp-shot:nth-child(-n+2),
.xp-shot:nth-child(n+3):last-child:nth-child(odd) { grid-column: 1 / -1; }
.xp-shot figure { margin: 0; }
.xp-shot-frame { overflow: hidden; border-radius: 1rem; background: color-mix(in oklch, #fff 6%, transparent); }
.xp-shot img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.xp-shot:nth-child(-n+2) img,
.xp-shot:nth-child(n+3):last-child:nth-child(odd) img { aspect-ratio: 4 / 3; }
@media (min-width: 64rem) {
  .xp-shots { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.75rem 1.25rem; }
  .xp-shot,
  .xp-shot:nth-child(n+3):last-child:nth-child(odd) { grid-column: span 2; }
  .xp-shot:nth-child(-n+2) { grid-column: span 3; }
  .xp-shot:nth-child(n+3):last-child:nth-child(odd) img { aspect-ratio: 4 / 5; }
}

/* ---------- Einsatzgebiet ---------- */
.xp-region {
  padding-block: clamp(3rem, 2rem + 3.5vw, 5.5rem);
  background: var(--color-sand);
  border-top: 1px solid color-mix(in oklch, var(--color-primary-900) 9%, transparent);
  border-bottom: 1px solid color-mix(in oklch, var(--color-primary-900) 9%, transparent);
}
.xp-region-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; max-width: 72rem; margin-inline: auto; align-items: start; }
.xp-region-copy .xp-section-title { margin-top: 0.6rem; }
.xp-region-text { margin-top: 1.25rem; }
.xp-region-text > * + * { margin-top: 1rem; }
.xp-rings { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1rem; }
.xp-ring {
  display: grid;
  gap: 0.55rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in oklch, var(--color-primary-900) 12%, transparent);
}
.xp-ring-head { font-family: var(--font-display); font-weight: 650; font-size: 1.02rem; color: var(--color-primary-900); }
.xp-ring-places { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.xp-ring-place {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--color-primary-900) 12%, transparent);
  background: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-primary-950);
}
.xp-ring-place.is-major { border-color: transparent; background: var(--color-primary-950); color: #fff; }
.xp-ring-km { font-size: 0.8rem; font-weight: 600; color: var(--color-primary-700); }
.xp-ring-place.is-major .xp-ring-km { color: var(--color-accent-300); }
.xp-region-note { margin-top: 1rem; font-size: 0.88rem; color: var(--color-primary-700); }
@media (min-width: 40rem) {
  .xp-ring { grid-template-columns: 8rem minmax(0, 1fr); gap: 1rem; align-items: baseline; }
}
@media (min-width: 64rem) {
  .xp-region-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: center; }
}

/* Karte: Entfernungsringe um das Büro, Orte nach Richtung und Luftlinie */
.xp-region-map {
  margin: 0;
  padding: clamp(0.5rem, 0.25rem + 1vw, 1.25rem);
  border-radius: 1.5rem;
  background: var(--color-primary-950);
  box-shadow: 0 30px 60px -34px rgb(0 0 0 / 0.55);
  outline: 1px solid color-mix(in oklch, var(--color-accent-600) 55%, transparent);
  outline-offset: -8px;
}
.xp-map { display: block; width: 100%; height: auto; }
.xp-map-area { fill: color-mix(in oklch, var(--color-primary-800) 40%, transparent); }
.xp-map-ring { fill: none; stroke: color-mix(in oklch, var(--color-accent-500) 50%, transparent); stroke-width: 1.5; stroke-dasharray: 3 7; }
.xp-map-ring-label { font-family: var(--font-sans); font-size: 14px; font-weight: 700; letter-spacing: 0.06em; fill: var(--color-accent-300); }
.xp-map-line { stroke: color-mix(in oklch, var(--color-accent-400) 75%, transparent); stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; }
.xp-map-origin-halo { fill: color-mix(in oklch, var(--color-accent-500) 22%, transparent); }
.xp-map-origin { fill: var(--color-accent-500); stroke: #fff; stroke-width: 3; }
.xp-map-origin-label { font-family: var(--font-display); font-size: 20px; font-weight: 700; fill: #fff; }
.xp-map-dot { fill: #fff; }
.xp-map-dot.is-major { fill: var(--color-accent-400); stroke: #fff; stroke-width: 2; }
.xp-map-dot.is-minor { fill: color-mix(in oklch, #fff 72%, transparent); }
.xp-map-label { font-family: var(--font-sans); fill: #fff; }
.xp-map-label.is-major { font-size: 26px; font-weight: 700; }
.xp-map-label.is-mid { font-size: 19px; font-weight: 650; }
.xp-map-label.is-minor { font-size: 17px; font-weight: 500; fill: color-mix(in oklch, #fff 82%, var(--color-primary-200)); }
@media (max-width: 40rem) {
  /* Schmal: kleine Orte nur als Punkt — die Liste daneben nennt sie alle. */
  .xp-map-label.is-minor { display: none; }
  .xp-map-label.is-mid { font-size: 22px; }
  .xp-map-label.is-major { font-size: 28px; }
  .xp-map-ring-label { font-size: 17px; }
}

/* ---------- Bewertungen: die älteren aufklappbar ---------- */
.rev-more { margin-top: 1.5rem; }
.rev-more-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--color-primary-600) 40%, transparent);
  background: #fff;
  color: var(--color-primary-800);
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}
.rev-more-toggle::-webkit-details-marker { display: none; }
.rev-more-toggle::after {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.15rem) rotate(45deg);
}
.rev-more[open] > .rev-more-toggle::after { transform: translateY(0.15rem) rotate(-135deg); }
.rev-more-toggle:hover { background: var(--color-primary-50); }
.rev-more-toggle:focus-visible { outline: 3px solid var(--color-accent-600); outline-offset: 2px; }

.xp-related { border-top: 1px solid color-mix(in oklch, var(--color-primary-900) 9%, transparent); }