/* ============================================
   PROPERUS — Leistungen Luxury V2
   Visuelles Upgrade für: Cinematic Hero,
   Prozess, Vergleichstabelle, Qualitätsstandards
   ============================================ */

/* ============================================
   01 — CINEMATIC HERO REFINEMENT
   Weniger überladen, ruhigere Komposition
   ============================================ */

/* Hintergrund: weniger intensive Orbs */
.ch__orb {
  opacity: 0.5 !important;
  filter: blur(120px) saturate(1.2) !important;
}

/* Grid-Pattern dezenter */
.ch__grid {
  opacity: 0.25 !important;
}

/* Tagline: klarer, mehr Atemraum */
.ch__tagline {
  letter-spacing: -0.04em;
  font-weight: 600;
  line-height: 1.05;
}

.ch__tagline-1,
.ch__tagline-2 {
  display: block;
}

.ch__tagline-2 {
  background: linear-gradient(135deg, #E8C9A8, #D4976F 60%, #B87E5F);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 500;
  font-style: italic;
}

.ch__scroll-cue {
  font-size: 0.65rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(212, 151, 111, 0.5);
  font-weight: 500;
}

/* Premium Card — refined edges */
.ch__card {
  border: 1px solid rgba(212, 151, 111, 0.18) !important;
  background: linear-gradient(145deg, rgba(20, 16, 13, 0.92), rgba(14, 11, 9, 0.95)) !important;
  backdrop-filter: blur(40px) saturate(1.4) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 50px 100px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(212, 151, 111, 0.06) !important;
}

.ch__card-heading {
  letter-spacing: -0.03em;
  font-weight: 600;
  line-height: 1.1;
}

.ch__card-desc {
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(250, 250, 250, 0.7);
}

.ch__card-desc em {
  color: var(--c-magenta);
  font-style: italic;
  font-weight: 500;
}

.ch__card-desc strong {
  color: var(--c-text-primary);
  font-weight: 600;
}

.ch__brand {
  font-family: var(--font-display);
  letter-spacing: 0.42em;
  font-weight: 700;
  font-size: 0.7rem;
  color: rgba(212, 151, 111, 0.55);
}

/* Floating Badges — softer, more luxurious */
.ch__badge {
  background: rgba(20, 16, 13, 0.85) !important;
  border: 1px solid rgba(212, 151, 111, 0.22) !important;
  backdrop-filter: blur(24px) saturate(1.3) !important;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(212, 151, 111, 0.05) !important;
}

.ch__badge-title {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ch__badge-sub {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: rgba(212, 151, 111, 0.7);
}

.ch__badge-ico {
  background: linear-gradient(135deg, rgba(212, 151, 111, 0.15), rgba(184, 126, 95, 0.08));
  border: 1px solid rgba(212, 151, 111, 0.3);
  color: var(--c-magenta);
}

/* CTA — refined */
.ch__cta-heading {
  letter-spacing: -0.03em;
  font-weight: 600;
}

.ch__cta-desc {
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(250, 250, 250, 0.65);
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================
   03 — PROZESS — Visual Upgrade
   ============================================ */

.leistungen-process {
  background: linear-gradient(180deg,
    var(--c-bg-deep) 0%,
    rgba(14, 11, 9, 0.98) 50%,
    var(--c-bg-deep) 100%);
}

.leistungen-process__overline {
  font-size: 0.65rem;
  letter-spacing: 0.32em;
  font-weight: 600;
  color: var(--c-magenta);
}

.leistungen-process__title {
  letter-spacing: -0.03em;
  font-weight: 600;
}

.leistungen-process__title em {
  font-style: italic;
  background: linear-gradient(135deg, #E8C9A8, #D4976F);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Verbesserte Step Badges */
.leistungen-process__badge {
  background: linear-gradient(145deg, rgba(28, 22, 18, 0.98), rgba(18, 14, 11, 0.99)) !important;
  border: 1px solid rgba(212, 151, 111, 0.35) !important;
  font-family: var(--font-display) !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.02em !important;
  width: 3.25rem !important;
  height: 3.25rem !important;
  box-shadow:
    0 0 0 6px var(--c-bg-deep),
    0 0 0 7px rgba(212, 151, 111, 0.12),
    0 12px 32px rgba(184, 126, 95, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  position: relative;
  transition: transform 0.3s var(--ease-out), border-color 0.3s ease, box-shadow 0.3s ease;
}

.leistungen-process__badge::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(212, 151, 111, 0.18);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.leistungen-process__step:hover .leistungen-process__badge::before {
  opacity: 1;
}

.leistungen-process__step:hover .leistungen-process__badge {
  transform: scale(1.05);
  border-color: rgba(212, 151, 111, 0.6) !important;
  box-shadow:
    0 0 0 6px var(--c-bg-deep),
    0 0 0 7px rgba(212, 151, 111, 0.25),
    0 16px 48px rgba(184, 126, 95, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Timeline — sichtbarer */
.leistungen-process__timeline svg line,
.leistungen-process__timeline svg path {
  stroke: url(#process-line-gradient) !important;
}

.leistungen-process__timeline {
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(212, 151, 111, 0.35) 8%,
    rgba(212, 151, 111, 0.55) 50%,
    rgba(212, 151, 111, 0.35) 92%,
    transparent 100%);
  filter: drop-shadow(0 0 8px rgba(212, 151, 111, 0.2));
}

/* Step Content Cards */
.leistungen-process__content {
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, rgba(22, 18, 15, 0.5), rgba(16, 13, 11, 0.4));
  border: 1px solid rgba(212, 151, 111, 0.06);
  transition: border-color 0.3s ease, transform 0.3s var(--ease-out), background 0.3s ease;
}

.leistungen-process__step:hover .leistungen-process__content {
  border-color: rgba(212, 151, 111, 0.2);
  background: linear-gradient(145deg, rgba(26, 21, 17, 0.7), rgba(20, 16, 13, 0.6));
  transform: translateX(4px);
}

/* ============================================
   05 — VERGLEICHSTABELLE — Luxury Upgrade
   ============================================ */

.leistungen-compare {
  background: linear-gradient(180deg,
    var(--c-bg-deep) 0%,
    rgba(12, 10, 9, 0.98) 100%);
}

.leistungen-compare__wrap {
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, rgba(22, 18, 15, 0.7), rgba(14, 11, 9, 0.85));
  border: 1px solid rgba(212, 151, 111, 0.12);
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(212, 151, 111, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  overflow: hidden;
  padding: 0;
}

.leistungen-compare__table {
  border-collapse: collapse;
  width: 100%;
}

/* Header */
.leistungen-compare__table thead {
  background: linear-gradient(180deg, rgba(28, 22, 18, 0.9), rgba(20, 16, 13, 0.6));
}

.leistungen-compare__table th {
  padding: 1.75rem 1.25rem 1.5rem !important;
  font-family: var(--font-body) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  text-align: center;
  border-bottom: 1px solid rgba(212, 151, 111, 0.18) !important;
  color: rgba(250, 250, 250, 0.55);
  vertical-align: bottom;
  position: relative;
}

.leistungen-compare__table th:first-child {
  text-align: left;
  padding-left: 1.75rem !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(212, 151, 111, 0.55);
  font-weight: 600 !important;
}

.leistungen-compare__pkg-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--c-text-primary);
  margin-bottom: 0.4rem;
}

.leistungen-compare__pkg-name--featured {
  background: linear-gradient(135deg, #E8C9A8, #D4976F);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Featured column — glow */
.leistungen-compare__table th.is-featured {
  background: linear-gradient(180deg,
    rgba(212, 151, 111, 0.12),
    rgba(184, 126, 95, 0.04));
  position: relative;
}

.leistungen-compare__table th.is-featured::before {
  content: 'EMPFOHLEN';
  position: absolute;
  top: 0.6rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.55rem;
  letter-spacing: 0.3em;
  font-weight: 700;
  color: var(--c-magenta);
  background: rgba(184, 126, 95, 0.12);
  padding: 0.18rem 0.6rem;
  border-radius: 100px;
  border: 1px solid rgba(212, 151, 111, 0.3);
}

.leistungen-compare__table th.is-featured::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(212, 151, 111, 0.7), transparent);
}

/* Body */
.leistungen-compare__table td {
  padding: 1.1rem 1.25rem !important;
  text-align: center;
  font-size: 0.88rem !important;
  color: rgba(250, 250, 250, 0.78);
  border-bottom: 1px solid rgba(212, 151, 111, 0.06);
  vertical-align: middle;
  transition: background 0.2s ease;
}

.leistungen-compare__table tbody tr:last-child td {
  border-bottom: none;
}

.leistungen-compare__table td:first-child {
  text-align: left;
  padding-left: 1.75rem !important;
  font-weight: 500;
  color: var(--c-text-primary);
  font-size: 0.92rem !important;
}

/* Featured column body cells */
.leistungen-compare__table tbody td:nth-child(3) {
  background: linear-gradient(180deg,
    rgba(212, 151, 111, 0.05),
    rgba(184, 126, 95, 0.02));
  border-left: 1px solid rgba(212, 151, 111, 0.08);
  border-right: 1px solid rgba(212, 151, 111, 0.08);
  font-weight: 500;
  color: rgba(250, 250, 250, 0.92);
}

/* Row hover */
.leistungen-compare__table tbody tr {
  transition: background 0.2s ease;
}

.leistungen-compare__table tbody tr:hover td {
  background: rgba(212, 151, 111, 0.04);
}

.leistungen-compare__table tbody tr:hover td:nth-child(3) {
  background: rgba(212, 151, 111, 0.08);
}

/* Yes/No Icons */
.leistungen-compare__yes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(212, 151, 111, 0.18), rgba(184, 126, 95, 0.06));
  border: 1px solid rgba(212, 151, 111, 0.3);
  color: var(--c-magenta);
}

.leistungen-compare__yes svg {
  width: 0.85rem;
  height: 0.85rem;
}

.leistungen-compare__no {
  color: rgba(250, 250, 250, 0.18);
  font-size: 1.2rem;
  font-weight: 300;
}

/* Mobile — make table scrollable */
@media (max-width: 880px) {
  .leistungen-compare__wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .leistungen-compare__table {
    min-width: 720px;
  }
}

/* ============================================
   07 — QUALITÄTSSTANDARDS — Trust Upgrade
   ============================================ */

/* leistungen-quality block — handled fully in inline <style> for the pledge editorial layout */

/* ============================================
   FAQ + Footer-CTA — minor refinements
   ============================================ */

.leistungen-footer-cta__title {
  letter-spacing: -0.03em !important;
  font-weight: 300 !important;
}

.leistungen-footer-cta__title em {
  font-style: italic;
  font-weight: 500;
  background: linear-gradient(135deg, #E8C9A8, #D4976F);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Mobile refinements */
@media (max-width: 640px) {
  .leistungen-compare__table th,
  .leistungen-compare__table td {
    padding: 0.85rem 0.75rem !important;
    font-size: 0.82rem !important;
  }
}