/* Leistungsseiten: Einleitung und Abschnitte als Karten im Stil der Dienstleistungs-Karten */
/* Akzent für Text etwas heller: #62cbe0 = 4.8:1 auf dem hellsten Verlaufsteil (Original #3bb8d0 nur 3.9:1) */
.leistung { --akzent: #62cbe0; }
.leistung-lead { max-width: 900px; margin-top: 28px; font-family: var(--schrift-light); font-size: 20px; line-height: 1.6; }
.leistung-abschnitte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px; max-width: calc(1612 * var(--e)); margin-top: calc(60 * var(--e)); }
.leistung-abschnitt { padding: calc(36 * var(--e)) calc(36 * var(--e)) calc(40 * var(--e)); border: 1px solid #fff; }
.leistung-abschnitt .klein-titel { margin-bottom: 18px; overflow-wrap: anywhere; }
.leistung-abschnitt p { margin-top: 12px; font-family: var(--schrift-light); font-size: 18px; line-height: 1.6; }
.leistung-abschnitt .klein-titel + p { margin-top: 0; }
.leistung-liste { margin: 14px 0 0; padding: 0; list-style: none; counter-reset: schritt; }
.leistung-liste li { position: relative; margin-top: 8px; padding-left: 30px; font-family: var(--schrift-book); font-size: 16px; line-height: 1.5; }
ul.leistung-liste li::before { content: ""; position: absolute; left: 0; top: .7em; width: 18px; height: 2px; background: var(--akzent); }
ol.leistung-liste li { counter-increment: schritt; }
ol.leistung-liste li::before { content: counter(schritt); position: absolute; left: 0; top: 0; color: var(--akzent); font-family: var(--schrift-bold); }
.leistung-link a { color: var(--akzent); }
.leistung-abschnitt .anfrage-knoepfe { margin-top: 22px; }

@media (max-width: 1000px) {
  .leistung-abschnitte { grid-template-columns: 1fr; max-width: none; margin-top: calc(40 * var(--t)); }
  .leistung-abschnitt { padding: calc(28 * var(--t)); }
}
@media (max-width: 750px) {
  .leistung-lead { font-size: 17px; }
  .leistung-abschnitt { padding: calc(20 * var(--h)); }
  .leistung-abschnitt p { font-size: 16px; }
}

/* Die vier Schritte des Schwimmbadbaus. */
.bauablauf, .bauablauf + .leistung-abschnitt { grid-column: 1 / -1; }
.bauablauf { border-inline: 0; border-color: rgba(98, 203, 224, .45); }
.bauablauf ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 28px;
}
.bauablauf ol li { margin: 0; padding: 52px 20px 0 0; }
.bauablauf ol li::before {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--akzent);
  border-radius: 50%;
  background: var(--dunkel);
  line-height: 1;
}
.bauablauf ol li:not(:last-child)::after {
  content: "";
  position: absolute;
  inset: 16px 4px auto 36px;
  height: 1px;
  background: rgba(98, 203, 224, .65);
}
@media (max-width: 750px) {
  .bauablauf ol { grid-template-columns: 1fr; }
  .bauablauf ol li { min-height: 52px; padding: 3px 0 24px 48px; }
  .bauablauf ol li:last-child { padding-bottom: 0; min-height: 32px; }
  .bauablauf ol li:not(:last-child)::after { inset: 36px auto 4px 16px; width: 1px; height: auto; }
}

/* Referenzen: Projektdaten, Instagram-Hinweis, Einblicke (3 Fotos 3:4) */
.projekt-daten { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 0; }
.projekt-daten dt { color: var(--akzent); font-family: var(--schrift-book); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.6; }
.projekt-daten dd { margin: 0; font-family: var(--schrift-light); font-size: 18px; line-height: 1.5; }
.leistung-hinweis { max-width: calc(1612 * var(--e)); margin-top: 28px; font-family: var(--schrift-light); font-size: 18px; line-height: 1.6; }
.leistung-hinweis a { color: var(--akzent); }
.einblicke { max-width: calc(1612 * var(--e)); margin-top: calc(80 * var(--e)); }
.einblicke .klein-titel { margin-bottom: 24px; }
.einblicke-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; }
.einblick { margin: 0; }
.einblick img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }

@media (max-width: 1000px) {
  .einblicke, .leistung-hinweis { max-width: none; }
  .einblicke { margin-top: calc(50 * var(--t)); }
  .einblicke-raster { gap: 16px; }
}
@media (max-width: 750px) {
  .projekt-daten { grid-template-columns: 1fr; gap: 2px; }
  .projekt-daten dd { margin-bottom: 10px; font-size: 16px; }
  .leistung-hinweis { font-size: 16px; }
  .einblicke { margin-top: calc(36 * var(--h)); }
  .einblicke-raster { grid-template-columns: 1fr; }
}