/* =============================================================
   home.css – Startseite (nur seiteneigene Komponenten)
   ============================================================= */

/* Vergleich Standard-Tracking vs. Offline-Conversion-Tracking */
.compare_grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.compare_card{padding:3rem;border-radius:var(--radius-large);background:var(--surface-card);border:1px solid var(--line)}
.compare_card.is-highlight{border-color:var(--marine);box-shadow:inset 0 0 0 .5px var(--marine)}
.compare_list{color:var(--text-muted)}
@media (max-width:640px){.compare_grid{grid-template-columns:1fr;gap:1.5rem}.compare_card{padding:2rem}}

/* Hero: Angebot in drei Punkten + Hinweis unter den Buttons */
.hero_offer{gap:.75rem;color:var(--marine);font-weight:500}
.hero_note{font-size:.875rem;color:var(--text-soft)}

/* Für wen: typische Situationen + Passt / Passt nicht */
.pain_grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.pain_card{padding:2rem;border-radius:var(--radius-large);background:var(--surface-card);border:1px solid var(--line)}
.pain_text{color:var(--text-muted)}
.fit_grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.fit_card-no{background:transparent}
.fit_card-no .check_list{color:var(--text-muted)}
@media (max-width:991px){.pain_grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.pain_grid,.fit_grid{grid-template-columns:1fr;gap:1rem}.pain_card{padding:1.5rem}}

/* Warum jetzt (dunkle Fläche) */
.jetzt_grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.jetzt_card{padding:2rem;border-radius:var(--radius-large);background:var(--surface-card);border:1px solid var(--line)}
.jetzt_text{color:var(--muted-on-surface)}
@media (max-width:991px){.jetzt_grid{grid-template-columns:1fr;gap:1rem}}
@media (max-width:640px){.jetzt_card{padding:1.5rem}}

/* Weitere B2B-Ergebnisse */
.results_grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.results_card{padding:2rem;border-radius:var(--radius-large);background:var(--surface-card);border:1px solid var(--line)}
.results_number{font-family:var(--font-display);letter-spacing:-.035em;font-weight:800;font-size:3.5rem;line-height:1;color:var(--marine)}
.results_label{margin-top:.5rem;color:var(--text-muted)}
.results_client{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.875rem;font-weight:600;color:var(--marine)}
@media (max-width:640px){.results_grid{grid-template-columns:1fr;gap:1rem}.results_card{padding:1.5rem}.results_number{font-size:2.75rem}}

/* Kontakt (CTA-Fläche Limette, Formular als helle Karte) */
.kontakt_component{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.kontakt_list{color:var(--muted-on-surface)}
.kontakt_steps{color:var(--text-on-surface)}
.kontakt_card{padding:3rem;border-radius:var(--radius-large);background:var(--weiss)}
.kontakt_success{outline:none}
.kontakt_cal-card{margin-top:4rem;padding:1.5rem}
.kontakt_cal{width:100%;min-height:40rem;overflow:auto}
.kontakt_success-icon{display:flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;border-radius:var(--radius-medium);background:var(--limette);color:var(--marine)}
.kontakt_success-icon svg{width:1.5rem;height:1.5rem}
@media (max-width:991px){.kontakt_component{grid-template-columns:1fr;gap:3rem}}
@media (max-width:640px){.kontakt_card{padding:1.5rem}.kontakt_cal-card{margin-top:2.5rem;padding:.5rem}}