/*
 * leistungen.css – Stile für Leistungsübersicht & Detailseite
 * Ergänzt style.css (nicht ersetzen) – immer beide einbinden.
 * ─────────────────────────────────────────────────────────────
 * Inhalt:
 *   0.  CSS Custom Properties (Seiten-spezifisch)
 *   1.  Breadcrumb
 *   2.  Hero – Übersichtsseite (.lp-hero)
 *   3.  Chip-Navigation (.lp-chip)
 *   4.  Leistungs-Übersichtskarten (.lov-card)
 *   5.  CTA-Banner Übersichtsseite
 *   6.  Hero – Detailseite (.ld-hero)
 *   7.  Vorteile-Raster Detailseite (.ld-vorteile)
 *   8.  Content-Layout: Artikel + Sidebar
 *   9.  Prosa-Inhalt (.ld-prose)
 *   10. Ablauf-Schritte (.ld-steps)
 *   11. FAQ-Accordion (.ld-faq)
 *   12. Sidebar-Karten
 *   13. Verwandte Leistungen
 *   14. Prev/Next Navigation
 *   15. Shared Utilities
 *   16. Responsive (1024px → 600px)
 * ─────────────────────────────────────────────────────────────
 */

/* ══════════════════════════════════════════════════════════════
   0. CSS CUSTOM PROPERTIES
══════════════════════════════════════════════════════════════ */
:root {
  --ld-radius:       14px;
  --ld-gap:          2rem;
  --ld-sidebar-w:    320px;
  --ld-transition:   .28s cubic-bezier(.4,0,.2,1);
  --ld-shadow-card:  0 4px 24px rgba(123,24,24,.09);
  --ld-shadow-hover: 0 12px 40px rgba(123,24,24,.18);
}

/* ══════════════════════════════════════════════════════════════
   1. BREADCRUMB
══════════════════════════════════════════════════════════════ */
.lp-breadcrumb {
  display:     flex;
  align-items: center;
  gap:         .5rem;
  margin-bottom: 2rem;
  font-size:   .8rem;
  flex-wrap:   wrap;
}
.lp-breadcrumb a {
  color:      rgba(255,255,255,.55);
  transition: color var(--ld-transition);
}
.lp-breadcrumb a:hover { color: var(--clr-accent); }
.lp-breadcrumb span {
  color: rgba(255,255,255,.3);
  font-size: .75rem;
}
.lp-breadcrumb [aria-current="page"] { color: var(--clr-accent); }

/* ══════════════════════════════════════════════════════════════
   2. HERO – ÜBERSICHTSSEITE
══════════════════════════════════════════════════════════════ */
.lp-hero {
  position:   relative;
  min-height: 520px;
  padding:    var(--header-height, 130px) 0 0;
  display:    flex;
  align-items: center;
  overflow:   hidden;
  background: var(--clr-dark-section);
}
.lp-hero-bg {
  position:   absolute;
  inset:      -10%;
  background: radial-gradient(ellipse 80% 60% at 70% 50%,
                rgba(123,24,24,.35) 0%,
                rgba(10,3,3,.9) 60%,
                #0e0404 100%);
  will-change: transform;
}
.lp-hero-overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(135deg, rgba(0,0,0,.45) 0%, transparent 100%);
}
.lp-hero .container  { position: relative; z-index: 2; padding: 3.5rem 1.5rem 2rem; }
.lp-hero-content h1  {
  font-family: var(--font-display);
  font-size:   clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 600;
  color:       var(--clr-white);
  line-height: 1.15;
  margin:      1rem 0 1.2rem;
}
.lp-hero-sub {
  color:      rgba(255,255,255,.7);
  font-size:  1rem;
  max-width:  600px;
  line-height: 1.7;
  margin-bottom: 2rem;
}

/* Wave unterhalb Hero */
.lp-hero-wave {
  position:    absolute;
  bottom:      -1px; left: 0; right: 0;
  z-index:     3;
  line-height: 0;
}
.lp-hero-wave svg { width: 100%; height: 80px; }

/* ══════════════════════════════════════════════════════════════
   3. CHIP-NAVIGATION
══════════════════════════════════════════════════════════════ */
.lp-hero-chips {
  display:   flex;
  flex-wrap: wrap;
  gap:       .6rem;
}
.lp-chip {
  display:       inline-flex;
  align-items:   center;
  gap:           .45rem;
  padding:       .4rem 1rem;
  background:    rgba(255,255,255,.07);
  border:        1px solid rgba(201,169,110,.22);
  border-radius: 999px;
  color:         rgba(255,255,255,.78);
  font-size:     .78rem;
  font-weight:   700;
  letter-spacing:.04em;
  transition:    all var(--ld-transition);
  white-space:   nowrap;
}
.lp-chip:hover, .lp-chip:focus-visible {
  background: rgba(201,169,110,.18);
  border-color: var(--clr-accent);
  color:       var(--clr-accent);
  transform:   translateY(-2px);
}
.lp-chip i { font-size: .75rem; }

/* ══════════════════════════════════════════════════════════════
   4. LEISTUNGS-ÜBERSICHTSKARTEN
══════════════════════════════════════════════════════════════ */
#leistungen-grid {
  background: var(--clr-off-white);
  padding:    var(--section-py) 0 calc(var(--section-py) * 1.2);
}

/* 3-Spalten-Raster, flexibel */
.lov-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap:                   2rem;
}

/* Karte */
.lov-card {
  background:    var(--clr-white);
  border-radius: var(--ld-radius);
  border:        1px solid var(--clr-border);
  overflow:      hidden;
  display:       flex;
  flex-direction: column;
  box-shadow:    var(--ld-shadow-card);
  transition:    transform var(--ld-transition), box-shadow var(--ld-transition);
}
.lov-card:hover {
  transform:  translateY(-7px);
  box-shadow: var(--ld-shadow-hover);
}
.lov-card:focus-within {
  outline: 3px solid var(--clr-primary);
  outline-offset: 3px;
}

/* Karten-Header (Icon + Badges) */
.lov-card-header {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  padding:     1.4rem 1.6rem 0;
  gap:         .75rem;
}
.lov-icon-wrap {
  width:           52px; height: 52px;
  border-radius:   14px;
  background:      linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-primary-light) 100%);
  display:         flex;
  align-items:     center;
  justify-content: center;
  box-shadow:      0 6px 18px rgba(123,24,24,.25);
  flex-shrink:     0;
}
.lov-icon-wrap i  { color: #fff; font-size: 1.3rem; }
.lov-meta         { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; }

/* Badges */
.lov-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           .3rem;
  font-size:     .65rem;
  font-weight:   900;
  letter-spacing:.08em;
  text-transform: uppercase;
  padding:       .22rem .6rem;
  border-radius: 999px;
}
.lov-badge--kasse {
  background: rgba(34,139,34,.1);
  color:      #226b22;
  border:     1px solid rgba(34,139,34,.22);
}
.lov-badge--privat {
  background: rgba(123,24,24,.08);
  color:      var(--clr-primary);
  border:     1px solid rgba(123,24,24,.16);
}
.lov-dauer {
  font-size:  .72rem;
  color:      var(--clr-text-muted);
  display:    flex;
  align-items: center;
  gap:        .3rem;
  white-space: nowrap;
}

/* Bild-Platzhalter */
.lov-img-placeholder {
  width:           100%;
  height:          180px;
  background:      linear-gradient(135deg, var(--clr-light) 0%, var(--clr-mid) 100%);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             .6rem;
  position:        relative;
  margin-top:      1.2rem;
}
.lov-img-placeholder i {
  font-size: 3rem;
  color:     var(--clr-primary);
  opacity:   .22;
}
.lov-img-label {
  font-size:      .62rem;
  font-weight:    700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          var(--clr-text-muted);
  background:     rgba(255,255,255,.7);
  padding:        .2rem .6rem;
  border-radius:  4px;
}

/* Echtes Bild (sobald Foto hochgeladen) */
.lov-img {
  width:      100%;
  height:     180px;
  object-fit: cover;
  display:    block;
  margin-top: 1.2rem;
}

/* Karten-Body */
.lov-body {
  padding:    1.4rem 1.6rem 1rem;
  flex:       1;
}
.lov-body h3 {
  font-family:   var(--font-display);
  font-size:     1.35rem;
  font-weight:   600;
  color:         var(--clr-text-dark);
  margin-bottom: .55rem;
  line-height:   1.25;
}
.lov-body p {
  color:       var(--clr-text-body);
  font-size:   .9rem;
  line-height: 1.65;
}

/* Bullets */
.lov-bullets {
  list-style: none;
  margin-top: 1rem;
  display:    flex;
  flex-direction: column;
  gap:        .4rem;
}
.lov-bullets li {
  display:     flex;
  align-items: center;
  gap:         .5rem;
  font-size:   .82rem;
  color:       var(--clr-text-muted);
}
.lov-bullets li i {
  color:     var(--clr-primary);
  font-size: .75rem;
  flex-shrink: 0;
}

/* Aktions-Bereich */
.lov-actions {
  display:       flex;
  gap:           .65rem;
  padding:       1rem 1.6rem 1.6rem;
  border-top:    1px solid var(--clr-border);
  margin-top:    .5rem;
}
.lov-btn-detail {
  flex:        1;
  justify-content: center;
  font-size:   .85rem;
  padding:     .7rem 1rem;
  gap:         .45rem;
}
.lov-btn-termin {
  padding:         .7rem 1.1rem;
  border:          2px solid var(--clr-primary);
  border-radius:   var(--radius-sm);
  color:           var(--clr-primary);
  font-size:       .82rem;
  font-weight:     700;
  display:         inline-flex;
  align-items:     center;
  gap:             .4rem;
  transition:      all var(--ld-transition);
  white-space:     nowrap;
  background:      transparent;
  text-decoration: none;
}
.lov-btn-termin:hover {
  background:  var(--clr-primary);
  color:       var(--clr-white);
  box-shadow:  0 4px 14px rgba(123,24,24,.28);
}

/* ══════════════════════════════════════════════════════════════
   5. CTA BANNER (Übersichtsseite)
══════════════════════════════════════════════════════════════ */
.lp-cta-banner {
  position:   relative;
  padding:    5rem 0;
  overflow:   hidden;
}
.lp-cta-bg {
  position:   absolute;
  inset:      0;
  background: linear-gradient(135deg, #0e0404 0%, #3a0a0a 50%, #1a0505 100%);
  z-index:    0;
}
.lp-cta-banner .container { position: relative; z-index: 1; }
.lp-cta-inner {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  gap:         2.5rem;
  flex-wrap:   wrap;
}
.lp-cta-text h2 {
  font-family:   var(--font-display);
  font-size:     clamp(1.6rem, 3vw, 2.4rem);
  color:         var(--clr-white);
  margin-bottom: .6rem;
}
.lp-cta-text p {
  color:     rgba(255,255,255,.6);
  font-size: .95rem;
  max-width: 520px;
}
.lp-cta-actions {
  display:   flex;
  gap:       1rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════
   6. HERO – DETAILSEITE
══════════════════════════════════════════════════════════════ */
.ld-hero {
  position:    relative;
  min-height:  500px;
  padding-top: var(--header-height, 130px);
  display:     flex;
  align-items: center;
  overflow:    hidden;
}
.ld-hero-overlay {
  position: absolute;
  inset:    0;
  background: linear-gradient(135deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 100%);
}
.ld-hero .container    { position: relative; z-index: 2; padding: 3.5rem 1.5rem 2rem; }
.ld-hero-icon {
  width:           80px; height: 80px;
  border-radius:   20px;
  background:      rgba(255,255,255,.08);
  border:          1px solid rgba(201,169,110,.25);
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin-bottom:   1.5rem;
  backdrop-filter: blur(6px);
}
.ld-hero-icon i     { font-size: 2.2rem; color: var(--clr-accent); }
.ld-hero-badges     { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.ld-hero .lov-badge { font-size: .7rem; }
.ld-hero .lov-dauer { color: rgba(255,255,255,.55); }
.ld-hero h1 {
  font-family: var(--font-display);
  font-size:   clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 600;
  color:       var(--clr-white);
  line-height: 1.15;
  margin:      0 0 1.2rem;
  max-width:   800px;
}
.ld-hero-lead {
  color:      rgba(255,255,255,.72);
  font-size:  1.05rem;
  max-width:  620px;
  line-height: 1.7;
  margin-bottom: 2rem;
}
.ld-hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════
   7. VORTEILE-RASTER DETAILSEITE
══════════════════════════════════════════════════════════════ */
.ld-vorteile {
  background: var(--clr-off-white);
  padding:    4.5rem 0;
}
.ld-section-title {
  font-family:   var(--font-display);
  font-size:     clamp(1.7rem, 3vw, 2.4rem);
  font-weight:   600;
  color:         var(--clr-text-dark);
  margin-bottom: 2.8rem;
  text-align:    center;
  position:      relative;
}
.ld-section-title::after {
  content:    '';
  display:    block;
  width:      60px;
  height:     3px;
  background: linear-gradient(to right, var(--clr-primary), var(--clr-accent));
  margin:     .8rem auto 0;
  border-radius: 2px;
}
.ld-vorteile-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap:                   1.5rem;
}
.ld-vorteil-card {
  background:    var(--clr-white);
  border-radius: var(--ld-radius);
  padding:       2rem 1.8rem;
  text-align:    center;
  border:        1px solid var(--clr-border);
  box-shadow:    var(--ld-shadow-card);
  transition:    transform var(--ld-transition), box-shadow var(--ld-transition);
}
.ld-vorteil-card:hover {
  transform:  translateY(-5px);
  box-shadow: var(--ld-shadow-hover);
}
.ld-vorteil-icon {
  width:           64px; height: 64px;
  border-radius:   18px;
  background:      linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-primary-light) 100%);
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:          0 auto 1.2rem;
  box-shadow:      0 8px 24px rgba(123,24,24,.22);
}
.ld-vorteil-icon i { color: #fff; font-size: 1.6rem; }
.ld-vorteil-card h3 {
  font-size:     1rem;
  font-weight:   700;
  color:         var(--clr-text-dark);
  margin-bottom: .5rem;
}
.ld-vorteil-card p {
  font-size:   .875rem;
  color:       var(--clr-text-muted);
  line-height: 1.65;
}

/* ══════════════════════════════════════════════════════════════
   8. CONTENT-LAYOUT: ARTIKEL + SIDEBAR
══════════════════════════════════════════════════════════════ */
.ld-main-section {
  background: var(--clr-off-white);
  padding:    2rem 0 5rem;
}
.ld-content-layout {
  display:     grid;
  grid-template-columns: 1fr var(--ld-sidebar-w);
  gap:         3rem;
  align-items: start;
}

/* Artikel */
.ld-article {
  background:    var(--clr-white);
  border-radius: var(--ld-radius);
  border:        1px solid var(--clr-border);
  overflow:      hidden;
  box-shadow:    var(--ld-shadow-card);
}

/* Artikel-Bild Platzhalter */
.ld-article-img-placeholder {
  width:           100%;
  height:          280px;
  background:      linear-gradient(135deg, var(--clr-light) 0%, var(--clr-mid) 100%);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             .8rem;
}
.ld-article-img-placeholder i {
  font-size: 4rem;
  color:     var(--clr-primary);
  opacity:   .2;
}
.ld-article-img-placeholder span {
  font-size:      .68rem;
  font-weight:    700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          var(--clr-text-muted);
  background:     rgba(255,255,255,.72);
  padding:        .22rem .7rem;
  border-radius:  4px;
}

/* Echtes Hero-Bild (nach Foto-Upload) */
.ld-hero-img {
  width:      100%;
  height:     280px;
  object-fit: cover;
  display:    block;
}

.ld-article-h2 {
  font-family: var(--font-display);
  font-size:   clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 600;
  color:       var(--clr-text-dark);
  padding:     2rem 2.2rem 0;
  margin:      0;
}

/* ══════════════════════════════════════════════════════════════
   9. PROSA-INHALT
══════════════════════════════════════════════════════════════ */
.ld-prose {
  padding:     1.4rem 2.2rem 0;
  color:       var(--clr-text-body);
  font-size:   .95rem;
  line-height: 1.8;
}
.ld-prose p         { margin-bottom: 1.1rem; }
.ld-prose p:last-child { margin-bottom: 0; }
.ld-prose h3 {
  font-family:   var(--font-body);
  font-size:     1rem;
  font-weight:   700;
  color:         var(--clr-primary);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin:        1.8rem 0 .6rem;
}
.ld-prose strong { color: var(--clr-text-dark); font-weight: 700; }
.ld-prose a { color: var(--clr-primary); text-decoration: underline; }
.ld-prose a:hover { color: var(--clr-accent-dark); }

/* Sub-Heading in Artikel */
.ld-sub-heading {
  font-family:   var(--font-body);
  font-size:     1rem;
  font-weight:   900;
  text-transform: uppercase;
  letter-spacing: .1em;
  color:         var(--clr-primary);
  display:       flex;
  align-items:   center;
  gap:           .6rem;
  margin-bottom: 1.2rem;
}

/* ══════════════════════════════════════════════════════════════
   10. ABLAUF-SCHRITTE
══════════════════════════════════════════════════════════════ */
.ld-ablauf {
  padding:       2rem 2.2rem;
  border-top:    1px solid var(--clr-border);
  margin-top:    1.5rem;
}
.ld-steps {
  list-style: none;
  display:    flex;
  flex-direction: column;
  gap:        .1rem;
  position:   relative;
  padding-left: 3.5rem;
}
.ld-steps::before {
  content:    '';
  position:   absolute;
  left:       1.3rem;
  top:        1.5rem;
  bottom:     1.5rem;
  width:      2px;
  background: linear-gradient(to bottom,
                var(--clr-primary) 0%,
                rgba(201,169,110,.3) 100%);
}
.ld-step {
  display:     flex;
  gap:         1rem;
  padding:     1rem 0;
  position:    relative;
  align-items: flex-start;
}
.ld-step-num {
  position:        absolute;
  left:            -3.5rem;
  width:           2.6rem; height: 2.6rem;
  border-radius:   50%;
  background:      var(--clr-primary);
  color:           #fff;
  font-size:       .68rem;
  font-weight:     900;
  letter-spacing:  .06em;
  display:         flex;
  align-items:     center;
  justify-content: center;
  box-shadow:      0 4px 12px rgba(123,24,24,.3);
  flex-shrink:     0;
  top:             .85rem;
}
.ld-step-body {
  display:    flex;
  flex-direction: column;
  gap:        .25rem;
  padding-top: .75rem;
}
.ld-step-body strong {
  font-size:  .95rem;
  font-weight: 700;
  color:       var(--clr-text-dark);
  display:    block;
}
.ld-step-body span {
  font-size:   .875rem;
  color:       var(--clr-text-muted);
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════
   11. FAQ ACCORDION
══════════════════════════════════════════════════════════════ */
.ld-faq {
  padding:    2rem 2.2rem 2.2rem;
  border-top: 1px solid var(--clr-border);
  margin-top: .5rem;
}
.ld-faq-list {
  display:    flex;
  flex-direction: column;
  gap:        .5rem;
}
.ld-faq-item {
  border:        1px solid var(--clr-border);
  border-radius: 10px;
  overflow:      hidden;
  transition:    border-color var(--ld-transition), box-shadow var(--ld-transition);
}
.ld-faq-item:has([aria-expanded="true"]) {
  border-color: rgba(123,24,24,.3);
  box-shadow:   0 4px 16px rgba(123,24,24,.08);
}
.ld-faq-toggle {
  width:       100%;
  background:  transparent;
  border:      none;
  padding:     1.1rem 1.4rem;
  display:     flex;
  align-items: center;
  justify-content: space-between;
  gap:         1rem;
  cursor:      pointer;
  text-align:  left;
  transition:  background var(--ld-transition);
}
.ld-faq-toggle:hover { background: rgba(123,24,24,.03); }
.ld-faq-toggle[aria-expanded="true"] {
  background: rgba(123,24,24,.04);
  border-bottom: 1px solid var(--clr-border);
}
.ld-faq-toggle span {
  font-size:   .92rem;
  font-weight: 700;
  color:       var(--clr-text-dark);
  line-height: 1.4;
}
.ld-faq-toggle i {
  font-size:  .75rem;
  color:      var(--clr-primary);
  flex-shrink: 0;
  transition: transform var(--ld-transition);
}
.ld-faq-toggle[aria-expanded="true"] i {
  transform: rotate(180deg);
  color:     var(--clr-accent-dark);
}
.ld-faq-list dd {
  padding:    1rem 1.4rem 1.2rem;
  font-size:  .9rem;
  color:      var(--clr-text-body);
  line-height: 1.7;
  background: var(--clr-off-white);
}

/* ══════════════════════════════════════════════════════════════
   12. SIDEBAR
══════════════════════════════════════════════════════════════ */
.ld-sidebar {
  display:    flex;
  flex-direction: column;
  gap:        1.2rem;
  position:   sticky;
  top:        calc(var(--header-height, 130px) + 2rem);
}
.ld-sidebar-card {
  background:    var(--clr-white);
  border-radius: var(--ld-radius);
  border:        1px solid var(--clr-border);
  padding:       1.6rem;
  box-shadow:    var(--ld-shadow-card);
}

/* CTA-Karte */
.ld-sidebar-cta { text-align: center; }
.ld-sidebar-cta-icon {
  width:           64px; height: 64px;
  border-radius:   18px;
  background:      linear-gradient(135deg, var(--clr-primary), var(--clr-primary-light));
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:          0 auto 1rem;
  box-shadow:      0 8px 24px rgba(123,24,24,.24);
}
.ld-sidebar-cta-icon i { color: #fff; font-size: 1.7rem; }
.ld-sidebar-cta h3 {
  font-family:   var(--font-display);
  font-size:     1.25rem;
  color:         var(--clr-text-dark);
  margin-bottom: .5rem;
}
.ld-sidebar-cta p {
  font-size:     .85rem;
  color:         var(--clr-text-muted);
  line-height:   1.6;
  margin-bottom: 1.2rem;
}

/* Info-Karte */
.ld-sidebar-title {
  font-size:      .72rem;
  font-weight:    900;
  letter-spacing: .16em;
  text-transform: uppercase;
  color:          var(--clr-accent-dark);
  margin-bottom:  1rem;
  display:        flex;
  align-items:    center;
  gap:            .5rem;
}
.ld-sidebar-info {
  list-style: none;
  display:    flex;
  flex-direction: column;
  gap:        0;
}
.ld-sidebar-info li {
  display:     flex;
  flex-direction: column;
  gap:         .15rem;
  padding:     .65rem 0;
  border-bottom: 1px solid var(--clr-border);
  font-size:   .85rem;
}
.ld-sidebar-info li:last-child { border-bottom: none; }
.ld-info-label {
  font-size:      .7rem;
  font-weight:    700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color:          var(--clr-text-muted);
}
.ld-info-value { color: var(--clr-text-dark); font-weight: 600; }
.ld-closed     { color: var(--clr-text-muted); font-style: italic; font-weight: 400; }

/* Sidebar-Navigation (alle Leistungen) */
.ld-sidebar-nav { list-style: none; }
.ld-sidebar-nav li + li { border-top: 1px solid var(--clr-border); }
.ld-sidebar-nav a {
  display:     flex;
  align-items: center;
  gap:         .65rem;
  padding:     .65rem .5rem;
  font-size:   .875rem;
  color:       var(--clr-text-body);
  transition:  all var(--ld-transition);
  border-radius: 6px;
}
.ld-sidebar-nav a:hover { color: var(--clr-primary); background: rgba(123,24,24,.04); }
.ld-sidebar-nav a.active {
  color:      var(--clr-primary);
  font-weight: 700;
  background: rgba(123,24,24,.06);
}
.ld-sidebar-nav a i:first-child { font-size: .85rem; color: var(--clr-primary); flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════
   13. VERWANDTE LEISTUNGEN
══════════════════════════════════════════════════════════════ */
.ld-related {
  background: var(--clr-light);
  padding:    4rem 0;
}
.ld-related-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap:                   1.5rem;
}
.ld-related-card {
  background:    var(--clr-white);
  border-radius: var(--ld-radius);
  border:        1px solid var(--clr-border);
  padding:       1.8rem;
  display:       flex;
  align-items:   center;
  gap:           1.4rem;
  transition:    all var(--ld-transition);
  text-decoration: none;
  box-shadow:    var(--ld-shadow-card);
}
.ld-related-card:hover {
  transform:   translateX(6px);
  box-shadow:  var(--ld-shadow-hover);
  border-color: rgba(123,24,24,.2);
}
.ld-related-icon {
  width:           52px; height: 52px;
  border-radius:   14px;
  background:      linear-gradient(135deg, var(--clr-primary), var(--clr-primary-light));
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  box-shadow:      0 4px 14px rgba(123,24,24,.22);
}
.ld-related-icon i { color: #fff; font-size: 1.2rem; }
.ld-related-body   { flex: 1; min-width: 0; }
.ld-related-body h3 {
  font-size:   1rem;
  font-weight: 700;
  color:       var(--clr-text-dark);
  margin-bottom: .3rem;
}
.ld-related-body p {
  font-size:   .82rem;
  color:       var(--clr-text-muted);
  line-height: 1.5;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}
.ld-related-arrow {
  color:      var(--clr-primary);
  font-size:  .9rem;
  flex-shrink: 0;
  opacity:    .5;
  transition: transform var(--ld-transition), opacity var(--ld-transition);
}
.ld-related-card:hover .ld-related-arrow {
  transform: translateX(4px);
  opacity:   1;
}

/* ══════════════════════════════════════════════════════════════
   14. PREV / NEXT NAVIGATION
══════════════════════════════════════════════════════════════ */
.ld-pagination {
  background:  var(--clr-white);
  border-top:  1px solid var(--clr-border);
  padding:     2rem 0;
}
.ld-pag-inner {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  gap:         1rem;
}
.ld-pag-btn {
  display:     flex;
  align-items: center;
  gap:         .9rem;
  padding:     .9rem 1.4rem;
  border:      1px solid var(--clr-border);
  border-radius: 10px;
  text-decoration: none;
  transition:  all var(--ld-transition);
  max-width:   240px;
}
.ld-pag-btn:hover {
  border-color: var(--clr-primary);
  background:   rgba(123,24,24,.04);
  box-shadow:   0 4px 14px rgba(123,24,24,.08);
}
.ld-pag-btn i  { color: var(--clr-primary); font-size: 1rem; flex-shrink: 0; }
.ld-pag-label  { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--clr-text-muted); margin-bottom: .2rem; }
.ld-pag-name   { display: block; font-size: .88rem; font-weight: 700; color: var(--clr-text-dark); }
.ld-pag-all {
  display:     flex;
  flex-direction: column;
  align-items: center;
  gap:         .35rem;
  font-size:   .82rem;
  font-weight: 700;
  color:       var(--clr-primary);
  text-decoration: none;
  padding:     .7rem 1.2rem;
  border:      1px solid rgba(123,24,24,.18);
  border-radius: 10px;
  transition:  all var(--ld-transition);
  white-space: nowrap;
}
.ld-pag-all:hover {
  background:  var(--clr-primary);
  color:       #fff;
  border-color: var(--clr-primary);
}
.ld-pag-all i  { font-size: 1.1rem; }

/* ══════════════════════════════════════════════════════════════
   15. SHARED UTILITIES
══════════════════════════════════════════════════════════════ */

/* Title Deco (Übersichts-Section-Header) */
.title-deco {
  display:     flex;
  align-items: center;
  justify-content: center;
  gap:         .8rem;
  margin-bottom: .8rem;
}
.title-deco i    { color: var(--clr-accent); font-size: 1.2rem; }
.title-deco-line {
  width:      50px; height: 1px;
  background: linear-gradient(to right, transparent, var(--clr-accent));
}
.title-deco-line.rev { background: linear-gradient(to left, transparent, var(--clr-accent)); }

/* ══════════════════════════════════════════════════════════════
   16. RESPONSIVE
══════════════════════════════════════════════════════════════ */

/* 1240px – Sidebar schmaler */
@media (max-width: 1240px) {
  :root { --ld-sidebar-w: 280px; }
  .ld-content-layout { gap: 2rem; }
}

/* 1024px – Sidebar unter Artikel */
@media (max-width: 1024px) {
  .ld-content-layout {
    grid-template-columns: 1fr;
  }
  .ld-sidebar {
    position: static;
    display:  grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap:      1rem;
  }
  .ld-sidebar-cta {
    grid-column: 1 / -1;  /* CTA-Karte immer volle Breite */
  }
  .lp-hero-chips { display: none; } /* zu unübersichtlich auf Tablet */
}

/* 768px – Cards auf 2 Spalten */
@media (max-width: 768px) {
  .lov-grid { grid-template-columns: 1fr; }
  .ld-vorteile-grid { grid-template-columns: 1fr 1fr; }
  .lp-cta-inner { flex-direction: column; text-align: center; }
  .lp-cta-text p { max-width: 100%; }
  .lp-cta-actions { justify-content: center; }
  .ld-related-grid { grid-template-columns: 1fr; }
  .ld-pag-btn { max-width: 45%; }
  .ld-pag-name { font-size: .8rem; }
  .ld-hero h1 { font-size: clamp(1.7rem, 5vw, 2.4rem); }
}

/* 600px – Vollständig Mobile */
@media (max-width: 600px) {
  .lov-grid { grid-template-columns: 1fr; gap: 1.2rem; }
  .lov-card-header { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .lov-meta { align-items: flex-start; }
  .lov-actions { flex-direction: column; }
  .lov-btn-detail, .lov-btn-termin { width: 100%; justify-content: center; }

  .ld-vorteile-grid { grid-template-columns: 1fr; }
  .ld-article-h2    { padding: 1.5rem 1.2rem 0; font-size: 1.3rem; }
  .ld-prose         { padding: 1rem 1.2rem 0; }
  .ld-ablauf        { padding: 1.5rem 1.2rem; }
  .ld-faq           { padding: 1.5rem 1.2rem 1.2rem; }

  .ld-pag-inner     { flex-direction: column; }
  .ld-pag-btn       { max-width: 100%; width: 100%; }
  .ld-pag-all       { width: 100%; justify-content: center; }

  .ld-sidebar       { grid-template-columns: 1fr; }

  .ld-hero .container { padding: 2.5rem 1.2rem 1.5rem; }
  .ld-hero-ctas     { flex-direction: column; }
  .ld-hero-ctas .btn { width: 100%; justify-content: center; }
}