/* Hero-Postkarte adaptiv — additive Overrides zu design-system.css, gescopt unter .sol-detail.
   Spaeter geladen als design-system.css → bei gleicher Spezifitaet (0,2,0) gewinnt diese Quelle. */

/* ── Breiten-Skala (Stufe 1: Loesungs-Detailseiten) — tunebar ───────────────
   Inline-Wrapper auf den 6 Seiten referenzieren diese Variablen via var(--w-*). */
.sol-detail { --w-section: 1200px; --w-prose: 720px; --w-prose-wide: 880px; --w-edge: 1440px; }
.sol-detail .usecase-lead { max-width: var(--w-prose); }   /* war 660px */
.sol-detail .usecase-text { max-width: var(--w-prose); }   /* war 680px */

/* ── Edge-Alignment: Content teilt die Hero-Buehne (--w-edge, zentriert); die Lese-Spalten
   sind darin linksbuendig (max-width bleibt, margin:0 = Default) → beginnen an der Hero-Linie.
   --w-edge muss zur hero-grid-Kappung (1280px) passen. */
.sol-detail .vor-list  { max-width: var(--w-prose-wide); }  /* 880, linksbuendig in der Buehne */
.sol-detail .step-grid { max-width: var(--w-section); }     /* 1200, linke Kante = Hero */


/* Container fuer proportionale Rueckseiten-Skalierung: hero-visual-Breite == Kartenbreite,
   nicht 3D-transformiert → kein Konflikt mit der Flip-Mechanik. */
.sol-detail .hero-visual { max-width: 660px; container-type: inline-size; }

/* Postkarte adaptiv: waechst mit dem Viewport (40vw) zwischen 340px (Mobile-Floor) und 660px.
   width:100% bindet an die Hero-Spalte → kein Overflow. */
.sol-detail .pcard-flip { width: 100%; max-width: clamp(340px, 40vw, 660px); }

/* Hero-Buehne (1280 → 1440), damit die Visual-Spalte die Karte hosten kann; --w-edge zieht mit
   (Edge-Alignment: Hero-Kante = Content-Kante). Inline max-width:1200 → !important.
   Spalten-Verhaeltnis bleibt design-system-Default (1.05fr .95fr). */
.sol-detail .hero-grid { max-width: 1440px !important; }

/* Rueckseiten-Text proportional zur Kartenbreite (cqw). Koeffizienten so gewaehlt, dass die
   gerenderten Groessen bei 440px Karte ≈ den heutigen Werten entsprechen → keine Regression,
   nur Skalierung nach oben; Floors sichern Mobile. */
.sol-detail .pcard-script    { font-size: clamp(1rem, 4.2cqw, 1.4rem); }
.sol-detail .pcard-back-addr { font-size: clamp(0.7rem, 2.7cqw, 1rem); }
.sol-detail .pcard-back-stamp { width: clamp(34px, 10cqw, 56px); }