/*
 * BRG – Vorlage „Leistung erweitert“ (page-leistung-erweitert.php)
 * Wird nur auf Seiten mit dieser Vorlage geladen. Alle Regeln sind auf .ls-page beschränkt,
 * bestehende Seiten bleiben unberührt. Farben und Schrift aus css/style.css des Themes.
 *
 * Version 1.1 (22.10.2026)
 *   - Hero: Text 60 % / Bild 40 %, Abstand zwischen Text und Bild, kein einzelnes Wort allein in der letzten H1-Zeile
 *   - Ansprechpartner: Karten mittig unter der Überschrift
 *   - FAQ: auf dem Desktop 20 % schmaler, mittig
 */

.ls-page {
  --ls-navy: #26234B;
  --ls-blue: #2939A8;
  --ls-text: #313131;
  --ls-muted: #696190;
  --ls-line: #C5C5C5;
  --ls-line-soft: #E3E3E8;
  --ls-bg-light: #FAFAFC;
  --ls-sticky-top: 120px;
  --ls-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2326234B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  --ls-check-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

/* Sprungmarken nicht unter dem Header verstecken */
.ls-page [id^="ls-"] {
  scroll-margin-top: var(--ls-sticky-top);
}

/* ---------- Allgemein ---------- */

/* Lange deutsche Wörter (z. B. „Rechtsdienstleistungen“) mobil umbrechen statt abschneiden */
.ls-page h1,
.ls-page h2,
.ls-page h3,
.ls-page .h2,
.ls-page .ls-stat-label,
.ls-page .card-topic h3,
.ls-page .serv-card .h4 {
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
}
/* Flex-Kinder dürfen schmaler als das längste Wort werden, damit der Umbruch greift */
.ls-page .card-topic h3,
.ls-page .serv-card .h4 {
  min-width: 0;
  max-width: 100%;
}
/* Kachel-Titel passen sich der Kachelbreite an (lange Wörter wie
   „Wirtschaftsstrafrecht“ oder „Kündigungsschutzklage“ bleiben ganz) */
.ls-page .card-topic,
.ls-page .serv-card {
  container-type: inline-size;
}
.ls-page .card-topic h3 {
  font-size: min(30px, calc(100cqi / 13.8));
}
.ls-page .serv-card .h4 {
  font-size: min(22px, calc(100cqi / 12.6));
}
@media (max-width: 1280px) {
  .ls-page .serv-card {
    padding: 16px 24px;
  }
}

.ls-page .ls-richtext > *:last-child {
  margin-bottom: 0;
}
.ls-page .ls-richtext p,
.ls-page .ls-richtext li {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ls-text);
}
.ls-page .ls-richtext p {
  margin-bottom: 16px;
}
.ls-page .ls-richtext ul,
.ls-page .ls-richtext ol {
  margin: 0 0 16px;
  padding-left: 22px;
}
.ls-page .ls-richtext li {
  margin-bottom: 8px;
}
.ls-page .ls-richtext a,
.ls-page .ls-more-link {
  color: var(--ls-blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ls-page .ls-richtext a:hover,
.ls-page .ls-more-link:hover {
  color: var(--ls-navy);
}
.ls-page .ls-more-link {
  display: inline-block;
  margin-top: 12px;
}

/* Abschnitte mit Hintergrund */
.ls-page .ls-dark,
.ls-page .ls-light {
  padding: 80px 0;
}
.ls-page .ls-dark {
  background: var(--ls-navy);
}
.ls-page .ls-light {
  background: var(--ls-bg-light);
}
.ls-page .ls-dark h2,
.ls-page .ls-dark p,
.ls-page .ls-dark li {
  color: #fff;
}
.ls-page .ls-dark h2 {
  border-bottom-color: #fff;
}

/* ---------- Zweispalter (Einleitung, Leistungen, Kosten) ---------- */

.ls-page .ls-twocol {
  align-items: start;
}
/* Größerer Spaltenabstand nur ab Tablet (11 Rasterlücken würden mobil zu breit) */
@media (min-width: 769px) {
  .ls-page .ls-twocol {
    column-gap: 48px;
  }
}
.ls-page .ls-twocol-head h2 {
  font-size: 36px;
  line-height: 1.25;
  margin: 0;
  padding: 0 0 12px;
  width: 100%;
  text-align: left;
}
.ls-page .ls-twocol-head h3,
.ls-page .ls-cost h3,
.ls-page .ls-audience h3 {
  font-size: 22px;
  line-height: 1.35;
  text-align: left;
  color: var(--ls-navy);
  margin-bottom: 0;
}
.ls-page .ls-cost h3,
.ls-page .ls-audience h3 {
  margin-bottom: 12px;
}

/* Mitschwebende Überschriften (optional, nur große Bildschirme) */
@media (min-width: 1025px) {
  .ls-page.ls-sticky .ls-twocol-head {
    position: sticky;
    top: var(--ls-sticky-top);
  }
}

/* ---------- 1 · Hero ---------- */

/* Desktop: Text 60 %, Bild 40 % und ein Abstand dazwischen
   (unter 1025 px blendet das Theme das Bild ohnehin aus) */
@media (min-width: 1025px) {
  .ls-page .first-banner .block-banner .col-6 {
    grid-column: 1 / span 7;
    padding-right: 48px;
  }
  .ls-page .first-banner .block-banner .image-banner {
    left: 60%;
    width: 40%;
  }
}
/* H1: kein einzelnes Wort allein in der letzten Zeile */
.ls-page .first-banner h1 {
  text-wrap: pretty;
}

.ls-page .ls-hero-bullets {
  list-style: none;
  margin: -24px 0 40px;
  padding: 0;
}
.ls-page .ls-hero-bullets li {
  color: #fff;
  font-size: 17px;
  line-height: 1.5;
  padding-left: 30px;
  margin-bottom: 8px;
  background: var(--ls-check-white) no-repeat 0 3px / 20px 20px;
}
.ls-page .ls-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}
.ls-page .ls-hero-actions .white-btn.btn-new {
  margin-top: 0;
}
.ls-page .ls-hero-phone {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ls-page .ls-hero-phone:hover {
  color: #fff;
  opacity: 0.85;
}
.ls-page .ls-hero-rating {
  color: #fff;
  font-size: 14px;
  margin-top: 24px;
}
.ls-page .ls-stars {
  color: #F2C94C;
  letter-spacing: 2px;
}

/* ---------- 2 · Hinweisleiste ---------- */

.ls-page .ls-notice .col-12 {
  text-align: center;
}
.ls-page .ls-notice p {
  color: #fff;
  font-size: 22px;
  line-height: 1.35;
  text-transform: uppercase;
  max-width: 900px;
  margin: 0 auto;
}
.ls-page .ls-notice .ls-notice-link {
  display: inline-block;
  margin-top: 8px;
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 3 · Zielgruppen-Weiche ---------- */

.ls-page .ls-audiences {
  margin-top: 56px;
}
.ls-page .ls-audience {
  border: 2px solid var(--ls-navy);
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.ls-page .ls-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ls-muted);
  margin-bottom: 8px;
}
.ls-page .ls-audience ul,
.ls-page .ls-checklist {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}
.ls-page .ls-audience li,
.ls-page .ls-checklist li {
  padding-left: 30px;
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ls-text);
  background: var(--ls-check) no-repeat 0 2px / 20px 20px;
}
.ls-page .ls-audience .accent-btn {
  margin-top: auto;
  width: auto;
  max-width: 100%;
}

/* ---------- 4 · Leistungen ---------- */

.ls-page .ls-services .heading-block {
  margin-bottom: 8px;
}
.ls-page .ls-service-list {
  border-bottom: 1px solid var(--ls-line);
}
.ls-page .ls-service {
  padding-top: 32px;
  padding-bottom: 32px;
  border-top: 1px solid var(--ls-line);
}
.ls-page .ls-service-image {
  width: 100%;
  height: auto;
  margin-bottom: 16px;
}
.ls-page .ls-services-2 {
  background: var(--ls-bg-light);
  padding: 80px 0;
}

/* ---------- 5 · Warum wir ---------- */

.ls-page .ls-stats {
  margin-bottom: 40px;
}
.ls-page .ls-stat {
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 24px;
}
.ls-page .ls-stat-value {
  font-size: 48px;
  font-weight: 300;
  line-height: 1;
  margin-bottom: 8px;
}
.ls-page .ls-stat-label {
  font-size: 16px;
  opacity: 0.9;
}
.ls-page .ls-dark .ls-checklist {
  columns: 2;
  column-gap: 48px;
  margin: 0;
}
.ls-page .ls-dark .ls-checklist li {
  break-inside: avoid;
  color: #fff;
  font-size: 17px;
  background-image: var(--ls-check-white);
}

/* ---------- 6 · Ansprechpartner ---------- */

/* Karten mittig unter der Überschrift – bei jeder Anzahl, Breite wie bisher (3 pro Reihe) */
.ls-page .ls-team .ls-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.ls-page .ls-team .ls-person {
  flex: 0 1 calc((100% - 40px) / 3);
  min-width: 0;
}
@media (max-width: 1024px) {
  .ls-page .ls-team .ls-person {
    flex-basis: calc((100% - 20px) / 2);
  }
}
@media (max-width: 768px) {
  .ls-page .ls-team .ls-person {
    flex-basis: 100%;
  }
}

.ls-page .ls-person {
  border: 1px solid var(--ls-line-soft);
  display: flex;
  flex-direction: column;
}
.ls-page .ls-person-photo {
  display: block;
  aspect-ratio: 4 / 3;
  background: #EDEDED;
  overflow: hidden;
}
.ls-page .ls-person-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ls-page .ls-person-text {
  padding: 20px;
}
.ls-page .ls-person-name {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 4px;
}
.ls-page .ls-person-name a {
  color: var(--ls-navy);
}
.ls-page .ls-person-role,
.ls-page .ls-person-langs {
  font-size: 15px;
  margin-bottom: 2px;
}
.ls-page .ls-person-langs {
  color: var(--ls-muted);
}

/* ---------- 7 · Bewertungen ---------- */

.ls-page .ls-review-summary,
.ls-page .ls-review {
  background: #fff;
  border: 1px solid var(--ls-line-soft);
  padding: 28px;
  margin: 0;
}
.ls-page .ls-review-summary .ls-stars {
  font-size: 22px;
  margin-bottom: 8px;
}
.ls-page .ls-review-score {
  font-size: 18px;
  color: var(--ls-navy);
  font-weight: 600;
}
.ls-page .ls-review-embed {
  margin-top: 16px;
}
.ls-page .ls-review blockquote {
  margin: 0;
}
.ls-page .ls-review blockquote p {
  font-size: 17px;
  line-height: 1.6;
}
.ls-page .ls-review figcaption {
  margin-top: 14px;
  font-size: 14px;
  color: var(--ls-muted);
}

/* ---------- 8 · Ablauf ---------- */

.ls-page .ls-steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--ls-steps, 4), minmax(0, 1fr));
  gap: 24px;
}
.ls-page .ls-steps-list li {
  border-top: 3px solid var(--ls-navy);
  padding-top: 18px;
}
.ls-page .ls-step-no {
  display: block;
  font-size: 40px;
  font-weight: 300;
  line-height: 1;
  color: var(--ls-blue);
}
.ls-page .ls-steps-list h3 {
  font-size: 20px;
  text-align: left;
  margin: 12px 0 8px;
  color: var(--ls-navy);
}
.ls-page .ls-steps-list p {
  line-height: 1.6;
}

/* ---------- 9 · Kosten ---------- */

.ls-page .ls-cost + .ls-cost {
  margin-top: 28px;
}

/* ---------- 10 · FAQ ---------- */

.ls-page .ls-faq-list {
  border-top: 1px solid var(--ls-line);
}
/* Desktop: Akkordeon 20 % schmaler und mittig */
@media (min-width: 1025px) {
  .ls-page .ls-faq-list {
    width: 80%;
    justify-self: center;
  }
}
.ls-page .ls-faq-item {
  border-bottom: 1px solid var(--ls-line);
}
.ls-page .ls-faq-item summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 22px 44px 22px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--ls-navy);
}
.ls-page .ls-faq-item summary::-webkit-details-marker {
  display: none;
}
.ls-page .ls-faq-item summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
}
.ls-page .ls-faq-item[open] summary::after {
  content: "\2212";
}
.ls-page .ls-faq-item summary:focus-visible {
  outline: 2px solid var(--ls-blue);
  outline-offset: 4px;
}
.ls-page .ls-faq-item .ls-richtext {
  padding: 0 44px 24px 0;
  max-width: 900px;
}

/* ---------- 11 · Abschluss-CTA ---------- */

.ls-page .ls-cta {
  padding: 64px 0;
}
.ls-page .ls-cta .wrapper {
  align-items: center;
}
.ls-page .ls-cta h2 {
  margin: 0 0 12px;
  padding: 0;
  border-bottom: none;
  width: auto;
  text-align: left;
  font-size: 36px;
  line-height: 1.25;
}
.ls-page .ls-cta-text p {
  font-size: 18px;
}
.ls-page .ls-cta-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.ls-page .ls-cta-phone {
  color: #fff;
  font-weight: 600;
}
.ls-page .ls-cta-phone:hover {
  color: #fff;
  opacity: 0.85;
}

/* ---------- Responsiv (Breakpoints wie im Theme) ---------- */

@media (max-width: 1180px) {
  .ls-page .ls-twocol-head h3 {
    font-size: 20px;
  }
}

@media (max-width: 1024px) {
  /* Tablet: Zweispalter untereinander, damit die linke Spalte nicht zu schmal wird */
  .ls-page .ls-twocol {
    row-gap: 12px;
  }
  .ls-page .ls-twocol > .ls-twocol-head,
  .ls-page .ls-twocol > .ls-twocol-body {
    grid-column: span 12;
  }
  /* Kacheln „Weitere Leistungen“: 2 statt 3 pro Reihe */
  .ls-page .ls-more .col-4 {
    grid-column: span 6;
  }
  .ls-page .ls-steps-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ls-page .ls-team .col-4,
  .ls-page .ls-reviews .col-4,
  .ls-page .ls-stats .col-3 {
    grid-column: span 6;
  }
  .ls-page .ls-cta .col-8,
  .ls-page .ls-cta .col-4 {
    grid-column: span 12;
  }
}

@media (max-width: 768px) {
  .ls-page .ls-more .col-4 {
    grid-column: span 12;
  }
  .ls-page .ls-twocol-head h2,
  .ls-page .ls-cta h2 {
    font-size: 30px;
  }
  /* Überschriften wachsen mit der Bildschirmbreite, damit lange Wörter wie
     „Rechtsdienstleistungen“ in eine Zeile passen (sonst Silbentrennung) */
  .ls-page h2,
  .ls-page .h2 {
    font-size: clamp(18px, calc((100vw - 80px) / 13.2), 40px);
    line-height: 1.25;
  }
  .ls-page .ls-dark,
  .ls-page .ls-light,
  .ls-page .ls-services-2 {
    padding: 56px 0;
  }
  .ls-page .ls-stats .col-3 {
    grid-column: span 6;
  }
  .ls-page .ls-dark .ls-checklist {
    columns: 1;
  }
  .ls-page .ls-team .col-4,
  .ls-page .ls-reviews .col-4 {
    grid-column: span 12;
  }
  .ls-page .ls-audiences {
    margin-top: 40px;
  }
  .ls-page .ls-audience {
    padding: 24px;
  }
  .ls-page .ls-notice p {
    font-size: 18px;
  }
}

@media (max-width: 545px) {
  .ls-page .ls-steps-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .ls-page .ls-stat-value {
    font-size: 36px;
  }
  .ls-page .ls-richtext p,
  .ls-page .ls-richtext li {
    font-size: 16px;
  }
  .ls-page .ls-hero-actions .white-btn {
    width: 100%;
    max-width: 100%;
  }
  .ls-page .ls-stats .col-3 {
    grid-column: span 12;
  }
  .ls-page .ls-twocol-head h2,
  .ls-page .ls-cta h2 {
    font-size: clamp(20px, calc((100vw - 80px) / 13.2), 26px);
  }
}

@media (max-width: 400px) {
  .ls-page .first-banner h1 {
    font-size: 32px;
    line-height: 40px;
  }
}