/* Loesungsseiten — Content-Zentrierung. Gescopt unter .sol-detail.
   NACH design-system.css + sol-detail.css laden -> gewinnt bei gleicher Spezifitaet (0,2,0).
   Vorerst nur in loesungen/neukundenakquise/index.html verlinkt; spaeter fuer alle 6 Seiten nutzbar.
   Aendert ausschliesslich Breite + horizontale Zentrierung; text-align bleibt unberuehrt (Default links). */

/* Prosa-Spalte: einheitlich 720px, mittig (Text linksbuendig innerhalb der Spalte) */
.sol-detail .usecase-lead,
.sol-detail .usecase-text { max-width: 720px; margin-inline: auto; }

/* Sektions-Ueberschriften auf dieselbe zentrierte Spalte begrenzen.
   CTA-H2 (aurora-subtle) nutzt KEINE .h2-Klasse -> bleibt unberuehrt. */
.sol-detail .h2 { max-width: 720px; margin-inline: auto; }

/* FAQ-Liste auf dieselbe Spalte ziehen (war 880px via --w-prose-wide) */
.sol-detail .vor-list { max-width: 720px; margin-inline: auto; }

/* Step-Grid: auf denselben Frame wie sec-2col (1120px) angleichen, zentriert */
.sol-detail .step-grid { max-width: 1120px; margin-inline: auto; }

/* Steps-Ueberschrift steht ueber dem 1120px-Grid, NICHT ueber der 720px-Prosaspalte.
   Die globale .h2-Regel (720px, mittig, Text links) liesse den Titel ~200px rechts vom
   Karten-Rand beginnen -> weder links noch zentriert. Hier 720px-Bindung aufheben und
   mittig ueber dem Grid zentrieren. Spezifitaet (0,3,0) > (0,2,0). */
.sol-detail .steps-section .h2 { max-width: none; margin-inline: 0; text-align: center; }

/* ── Zwei-Spalten-Textsektionen ────────────────────────────────────────────
   Kopf (Ueberschrift + Subline) links, Fliesstext rechts. text-align bleibt links. */
.sol-detail .sec-2col {
  max-width: 1120px; margin-inline: auto;
  display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr);
  gap: clamp(2rem,5vw,5rem); align-items: start;
}
.sol-detail .sec-2col .sec-body { max-width: 640px; }   /* lesbare Zeile rechts */

/* 720px-Zentrierung der inneren Elemente INNERHALB des Frames neutralisieren
   (Breitenkontrolle liegt jetzt bei den Spalten). Spezifitaet (0,3,0) > (0,2,0). */
.sol-detail .sec-2col .h2,
.sol-detail .sec-2col .usecase-lead,
.sol-detail .sec-2col .usecase-text,
.sol-detail .sec-2col .vor-list { max-width: none; margin-inline: 0; }

/* Mobile: stapeln (Ueberschrift ueber Text) */
@media (max-width: 860px) {
  .sol-detail .sec-2col { grid-template-columns: 1fr; gap: 1rem; }
}

/* ── Step-Sektion: Liquid Glass ─────────────────────────────────────────────
   Dezenter warmer Aurora-Wash hinter der Sektion (--aurora-* existiert nicht im
   System -> Apricot-Fallback). !important schlaegt das inline background:#fff. */
.sol-detail .steps-section {
  background: radial-gradient(120% 120% at 50% 0%, rgba(255,180,120,0.18) 0%, transparent 55%) !important;
}

/* Glass-Cards: ersetzt den flachen grauen Rahmen-Look.
   transition + position:relative erben aus design-system.css (nicht ueberschrieben). */
.sol-detail .step-card {
  background: var(--glass-bg, rgba(255,255,255,0.55));
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border, rgba(255,255,255,0.6));
  border-radius: 20px;
  padding: clamp(1.5rem,2.5vw,2.25rem);
  box-shadow: 0 8px 30px rgba(26,26,31,0.08);
}

/* Hover: staerkerer Schatten auf Zeigegeraeten; Lift nur wenn Bewegung erlaubt
   (respektiert die reduced-motion-Regel des Systems). */
@media (hover: hover) {
  .sol-detail .step-card:hover { box-shadow: 0 16px 40px rgba(26,26,31,0.12); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .sol-detail .step-card:hover { transform: translateY(-4px); }
}

/* Grosse Akzent-Nummer (Geist Mono beibehalten, nur skaliert + Akzentfarbe) */
.sol-detail .step-num {
  font: 700 clamp(3rem,5vw,4.5rem)/1 'Geist Mono', monospace;
  color: var(--accent);
  opacity: 0.9;
  letter-spacing: -.02em;
  margin-bottom: 0.5rem;
}

/* 2-Karten-Variante der Step-Sektion: zentriert, ausgewogen (3-Karten-Default unberuehrt).
   Spalten nur ab 760px -> Mobile-Stacking des Systems bleibt erhalten. */
.sol-detail .step-grid.steps-2 { max-width: 780px; margin-inline: auto; }
@media (min-width: 760px) {
  .sol-detail .step-grid.steps-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* 5-Karten-Variante: ausgewogene 5er-Reihe (Desktop), responsiv gestaffelt.
   <600px 1-spaltig (Default), 600-999px 2-spaltig, ab 1000px 5-spaltig. */
.sol-detail .step-grid.steps-5 { max-width: 1180px; margin-inline: auto; }
@media (min-width: 1000px) {
  .sol-detail .step-grid.steps-5 { grid-template-columns: repeat(5, minmax(0,1fr)); gap: 1rem; }
}
@media (min-width: 600px) and (max-width: 999px) {
  .sol-detail .step-grid.steps-5 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}