/* =====================================================================
   /mitarbeitergewinnung/: Landingpage im Look der Startseite.
   Baut auf start.css auf; hier nur, was es dort nicht gibt.
   Seitenakzent: --seite (Farbe der Leistungskarte, #0891B2), Grundakzent bleibt Violett.
   ===================================================================== */

.seite-leistung { --seite-dunkel: color-mix(in srgb, var(--seite) 72%, #17102B); }

/* ---------- Hero: links Text, rechts Vergleich ---------- */
.lp-hero { text-align: left; }
.lp-hero-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; align-items: center; }
.lp-hero h1 { font-size: clamp(38px, 5.2vw, 64px); max-width: 12em; margin: 0 0 22px; }
.lp-hero .lead { margin: 0; max-width: 32em; }
.lp-hero .hero-knoepfe { justify-content: flex-start; }
.lp-hero .kicker { color: var(--seite-dunkel); }
.lp-hero .unterstrichen svg { color: var(--seite); }
.brotkrumen { display: flex; gap: 8px; margin-bottom: 18px; font-size: 14px; color: var(--ink-3); }
.brotkrumen a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }

.vergleich { position: relative; display: grid; gap: 12px; }
.vergleich-alt, .vergleich-neu { padding: 22px 24px; border-radius: var(--r-big); }
.vergleich-alt { background: var(--paper); border: 1px dashed var(--line-mid); color: var(--ink-3); }
.vergleich-alt li { text-decoration: line-through; text-decoration-color: rgba(107, 99, 121, .55); }
.vergleich-neu { position: relative; border: 2px solid var(--seite); background: radial-gradient(ellipse 80% 100% at 100% 0%, color-mix(in srgb, var(--seite) 18%, transparent) 0, transparent 70%), var(--paper); color: var(--ink); box-shadow: 0 40px 70px -50px color-mix(in srgb, var(--seite) 80%, transparent); }
.vergleich-titel { font: 600 13px/1.3 Manrope, sans-serif; letter-spacing: .02em; margin-bottom: 12px; color: var(--ink-3); }
.vergleich-neu .vergleich-titel { color: var(--seite-dunkel); }
.vergleich ul { list-style: none; display: grid; gap: 8px; font-size: 16px; }
.vergleich-neu ul { font: 500 19px/1.35 var(--head); letter-spacing: -.01em; }
.vergleich-neu li { display: flex; gap: 10px; align-items: baseline; }
.vergleich-neu li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--seite); transform: translateY(-2px); }
.vergleich-notiz { position: absolute; right: 22px; top: -16px; padding: 4px 12px 6px; border-radius: 10px; background: var(--seite-dunkel); color: #fff; font: 600 22px/1 Caveat, cursive; transform: rotate(-4deg); }

/* ---------- Problem ---------- */
.schmerzen { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: clamp(28px, 4vw, 44px); }
.schmerz { display: flex; gap: 14px; align-items: flex-start; padding: 20px 22px; border-radius: var(--r-card); background: var(--paper); border: 1px solid var(--line-mid); }
.schmerz p { font-size: 16.5px; color: var(--ink); }
.schmerz-ic { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #FDECEC; color: #B42318; }
.schmerz-ic .ic { width: 15px; height: 15px; }

/* ---------- Verstaerken ---------- */
.folgen { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
.folge { display: flex; gap: 16px; align-items: flex-start; }
.folge .mm-kachel { width: 44px; height: 44px; border-radius: 12px; }
.folge .mm-kachel .ic { width: 20px; height: 20px; }
.folge h3 { font-size: 20px; margin-bottom: 6px; }
.folge p { font-size: 15.5px; max-width: 30em; }

/* ---------- Loesung ---------- */
.bausteine { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }

/* ---------- Beweis ---------- */
.beweis-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; }
.zitat--gross blockquote { font: 500 clamp(20px, 2vw, 24px)/1.4 var(--head); letter-spacing: -.01em; color: var(--ink); }
.zitat--gross .zitat-ergebnis { color: var(--seite-dunkel); }

/* ---------- Angebot ---------- */
.angebot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding: clamp(26px, 4vw, 48px); border-radius: var(--r-big); border: 2px solid var(--accent); background: radial-gradient(ellipse 60% 90% at 100% 0%, color-mix(in srgb, var(--seite) 14%, transparent) 0, transparent 70%), var(--paper); }
.angebot h2 { margin-bottom: 14px; }
.angebot p { font-size: 17px; max-width: 26em; margin-bottom: 24px; }
.angebot-liste { list-style: none; display: grid; gap: 12px; align-content: start; }
.angebot-liste li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: var(--ink); }
.haken { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--seite) 14%, #fff); }
.haken svg { width: 15px; height: 15px; fill: none; stroke: var(--seite-dunkel); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

@media (min-width: 760px) {
  .schmerzen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schmerz:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .bausteine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .folgen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .lp-hero-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; }
  .schmerzen { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .schmerz { grid-column: span 2; }
  .schmerz:nth-child(4), .schmerz:last-child:nth-child(odd) { grid-column: span 3; }
  .beweis-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
  .angebot { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
}
@media (max-width: 759px) {
  .vergleich { margin-top: 8px; }
}

/* Schluss-CTA: laengere Ueberschrift als auf der Startseite, daher etwas kleiner */
.seite-leistung .kontakt h2 { font-size: clamp(34px, 4.4vw, 52px); }