/* =====================================================================
   SEITE „WOBEI ICH HELFE“ (/leistungen/)
   Baut auf style.css auf: .page-hero, .service-card, .review, .newsletter
   Kachelraster mit den Werten der Vorlage (Henbo „Services“, post-97.css)
   ===================================================================== */

/* Kopfband mit eigenem Foto, Überschrift links, Einleitung rechts */
.leistungen-hero { background-image: url("../img/leistungen/kopf.webp"); background-position: center 35%; }
.leistungen-hero-inner {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 40px;
  align-items: end;
}
.leistungen-hero h1 { margin: 10px 0 0; max-width: 680px; }
.leistungen-hero p { font-size: 1.125rem; }

/* Raster zeilenweise, Kacheln oben bündig; der Versatz entsteht über negative Außenabstände */
.leistungen-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
}

/* Foto füllt die ganze Kachel; Verlauf ab 40 % bis volle Grundfarbe */
.leistungen .leistung {
  min-height: var(--h);
  margin: var(--mt, 0) 0 var(--mb, 0);
  padding: 30px;
  justify-content: flex-start;
  background: var(--primary) center/cover no-repeat;
}
.leistungen .leistung::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0) 40%, var(--primary) 100%);
}
.leistungen .leistung > * { position: relative; }

/* Abzeichen oben links im Kachelfluss */
.leistungen .review {
  position: relative; top: auto; left: auto; right: auto;
  align-self: flex-start;
  padding: 3px 8px 3px 3px;
  font-size: 14px; line-height: 1;
  background: var(--secondary);
}
.leistungen .review svg { color: var(--accent); }

/* Text unten: Titel 24px, Beschreibung kursiv, Link klein in Großbuchstaben */
.leistungen .leistung .service-body { flex: 0 0 auto; margin-top: auto; padding: 0; }
/* Unsere Texte sind länger als in der Vorlage und reichen in den hellen Bildteil: Schatten hält sie lesbar */
.leistungen .leistung:not(.leistung-anruf) .service-body h2,
.leistungen .leistung:not(.leistung-anruf) .service-body h3,
.leistungen .leistung:not(.leistung-anruf) .service-body p { text-shadow: 0 1px 2px rgba(15, 23, 42, .9), 0 0 12px rgba(15, 23, 42, .6); }
.leistungen .leistung h2, .leistungen .leistung h3 { font-size: 24px; font-weight: 600; line-height: 1.2; margin-bottom: 5px; }
.leistungen .leistung p { font-size: 1rem; font-style: italic; color: var(--white); margin: 0 0 20px; }
.leistungen .leistung .link-more {
  font-size: 14px; text-transform: uppercase;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--white);
}

/* Abschlusskachel ohne Foto: Anruf statt weiterer Leistung */
.leistungen .leistung-anruf { background: var(--accent); }
.leistungen .leistung-anruf::before { content: none; }
.leistungen .leistung-anruf p { font-style: normal; }
.leistung-anruf .btn { background: var(--white); color: var(--primary); }
.leistung-anruf .btn:hover { background: var(--primary); color: var(--white); }

/* Höhe und Versatz je Platz (Zeile 1: 1–3, Zeile 2: 4–6, Zeile 3: 7–9) */
.leistungen .p1 { --h: 550px; }
.leistungen .p2 { --h: 450px; }
.leistungen .p3 { --h: 500px; }
.leistungen .p4 { --h: 450px; }
.leistungen .p5 { --h: 600px; --mt: -100px; --mb: -50px; }
.leistungen .p6 { --h: 500px; --mt: -50px; }
.leistungen .p7 { --h: 500px; }
.leistungen .p8 { --h: 450px; --mt: 50px; }
.leistungen .p9 { --h: 500px; }

@media (max-width: 1200px) {
  .leistungen .p1 { --h: 500px; }
  .leistungen .p2 { --h: 400px; }
  .leistungen .p3 { --h: 450px; }
  .leistungen .p4 { --h: 400px; }
  .leistungen .p5 { --h: 500px; }
  .leistungen .p6, .leistungen .p7, .leistungen .p8, .leistungen .p9 { --h: 450px; }
}
@media (max-width: 1024px) {
  .leistungen-hero-inner { grid-template-columns: 1fr; gap: 16px; }
  .leistungen-grid { grid-template-columns: repeat(2, 1fr); }
  .leistungen .leistung { padding: 20px; }
  .leistungen .p1, .leistungen .p5 { --h: 400px; }
  .leistungen .p2, .leistungen .p4 { --h: 350px; }
  .leistungen .p3, .leistungen .p6, .leistungen .p7, .leistungen .p8, .leistungen .p9 { --h: 375px; }
  .leistungen .p5 { --mt: -50px; --mb: 0px; }
  .leistungen .p6, .leistungen .p7, .leistungen .p8, .leistungen .p9 { --mt: -25px; }
}
@media (max-width: 880px) {
  .leistungen .leistung { --h: 400px; --mt: 0px; --mb: 0px; }
}
@media (max-width: 767px) {
  .leistungen-grid { grid-template-columns: 1fr; }
  .leistungen .leistung { min-height: var(--h); padding: 20px; }
}

/* =====================================================================
   LEISTUNGS-DETAILSEITEN (/leistungen/<leistung>/)
   Werte der Vorlage (Henbo „Service Details“, post-71.css)
   ===================================================================== */
.dienst { padding: 60px 0; }
.dienst-layout {
  display: grid;
  grid-template-columns: 7fr 3fr;   /* Inhalt 70 %, Seitenleiste 30 % */
  gap: 40px;
  align-items: start;
}
.dienst-inhalt h2 { margin-bottom: 20px; }
.dienst-inhalt h2:not(:first-child) { margin-top: 30px; }
.dienst-inhalt p { margin-bottom: 10px; }

/* Zwei Fotos nebeneinander, 15 px Abstand, Radius 15 px */
.dienst-bilder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin: 30px 0 0;
}
.dienst-bilder img {
  width: 100%; height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 15px;
}

/* Leistungspunkte: zwei Spalten, senkrechte Linie links */
.dienst-punkte {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 40px;
  margin: 20px 0 30px;
}
.dienst-punkt { padding-left: 20px; border-left: 1px solid var(--line); }
.dienst-punkt h3 { font-size: 20px; font-weight: 600; line-height: 1.2; margin-bottom: 5px; color: var(--primary); }
.dienst-punkt p { margin: 0; }

/* Seitenleiste: Leistungs-Kacheln wie auf /leistungen/ */
.dienst-seite { display: flex; flex-direction: column; gap: 20px; }
.dienst-seite .leistung { border: 1px solid #EEEEEE; }
.dienst + .steps-wrap { padding-top: 20px; }

/* „So funktioniert es“ als getöntes Band, damit es sich vom weißen Textteil abhebt */
.dienst + .steps-wrap {
  padding: 80px 0;
  background: #E3EEF5;               /* helles Blau aus der Akzentfarbe */
}
.dienst + .steps-wrap .section-card { background: transparent; padding-top: 0; padding-bottom: 0; }
.dienst + .steps-wrap .step { background: var(--white); }
@media (max-width: 1024px) { .dienst + .steps-wrap { padding: 60px 0; } }

@media (max-width: 1200px) and (min-width: 768px) {
  .dienst-layout { grid-template-columns: 65fr 35fr; }
}
@media (max-width: 1024px) {
  .dienst-layout { grid-template-columns: 6fr 4fr; }
  .dienst { padding: 40px 0; }
  .dienst-punkte { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .dienst-layout { grid-template-columns: 1fr; }
  .dienst-bilder { grid-template-columns: 1fr; }
}

/* Platz für die Welle oben am hellblauen Band (Wellen-CSS selbst in style.css) */
.dienst + .steps-wrap { position: relative; padding-top: 130px; }
@media (max-width: 767px) { .dienst + .steps-wrap { padding-top: 84px; } }