/* Shared styles for all Leistungen detail pages */

.hero { padding: 56px 0 40px; }
.hero .breadcrumb {
  font-size: .8rem; color: var(--muted); margin-bottom: 16px;
  display: flex; align-items: center; gap: 6px;
}
.hero .breadcrumb a { color: var(--muted); text-decoration: none; }
.hero .breadcrumb a:hover { color: var(--accent); }
.hero .breadcrumb span { color: var(--border); }
.hero h1 {
  font-family: 'Sora', sans-serif; font-weight: 700;
  font-size: 3.2rem; line-height: 1.12; letter-spacing: -.5px;
  margin: 18px 0 22px;
}
.hero h1 em { color: var(--accent); font-style: normal; }
.hero .lead { color: var(--muted); font-size: 1.05rem; max-width: 640px; }
.hero .lead p { margin-bottom: 8px; }

.highlight-box {
  background: var(--accent); border-radius: var(--radius);
  padding: 28px; color: #fff; margin-top: 8px;
}
.highlight-box p { opacity: .9; font-size: .97rem; line-height: 1.7; }
.highlight-box strong { opacity: 1; font-weight: 600; }

.cta { text-align: center; margin-top: 40px; }
.cta .card { padding: 48px 28px; }
.cta h2 {
  font-family: 'Sora', sans-serif; font-weight: 700;
  font-size: 2rem; margin-bottom: 24px;
}
.cta h2 em { color: var(--accent); font-style: normal; }

/* ---------- Hero with image ---------- */
.hero-split { display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: center; }
.hero-split .hero-text { min-width: 0; }
.hero-media { border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; background: var(--surface2); }
.hero-media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }

/* ---------- Pricing box ---------- */
.price-box { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
.price-box .price-label { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; margin-bottom: 10px; }
.price-box .amount { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 2.3rem; color: var(--accent); margin-bottom: 4px; }
.price-box .amount span { font-family: 'IBM Plex Sans', sans-serif; font-weight: 500; font-size: .9rem; color: var(--muted); }
.price-box ul { list-style: none; margin: 0; }
.price-box ul li { color: var(--muted); font-size: .92rem; line-height: 1.8; padding-left: 20px; position: relative; }
.price-box ul li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 600; }
.price-box .price-note { font-size: .85rem; color: var(--muted); margin-top: 16px; grid-column: 1 / -1; border-top: 1px solid var(--border); padding-top: 16px; }

@media (max-width: 860px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-media { order: -1; max-width: 380px; }
}

@media (max-width: 640px) {
  .hero { padding: 40px 0 28px; }
  .hero h1 { font-size: 2.2rem; }
  .cta h2 { font-size: 1.5rem; }
  .cta .card { padding: 34px 20px; }
  .price-box { grid-template-columns: 1fr; }
}