/* Verged · Beispielkacheln auf Loesungsseiten (assets/sections/solution-examples.jsx).
   Eigene Datei neben page-solution.css, damit die Chatbots-Seite unberuehrt
   bleibt.
   Nach Design System (README, Layout und Borders): Kopf ist der kanonische
   .v-section__head, zentriert, mit .v-rule. Karten sind flach, off-white auf
   Stone, Radius 8 px, 32 px Innenabstand, keine Schatten, keine farbige
   Akzentkante. Zitat und Forderung in der Display-Schrift, Label in Mono wie .v-brief__date.
   Keine eigene Hervorhebung ueber das DS hinaus (Korrektur 2026-09-30). */

/* Die Karten teilen sich die Zeilen des Rasters (Subgrid): Zitat, Label,
   Forderung und Text stehen in allen drei Karten auf gleicher Hoehe, egal wie
   viele Zeilen das laengste Zitat braucht. Inhalt zentriert wie der
   Sektionskopf, damit die Eyebrow mit ihren beiden Linien mittig sitzt. */
.v-solex__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: auto; column-gap: 32px; row-gap: 0;
}
.v-solex__card {
  display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0;
  align-content: start; text-align: center;
  background: var(--verge-off-white); border-radius: var(--radius, 8px);
  padding: 32px;
}
.v-solex__card .v-eyebrow { justify-self: center; margin-bottom: 18px; }
.v-solex__quote {
  font-family: var(--font-display); font-weight: 700;
  font-size: 24px; line-height: 1.25; letter-spacing: -0.018em;
  color: var(--verge-ink); margin: 0 0 24px; text-wrap: balance; align-self: start;
}
.v-solex__unit {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-2); margin: 0 0 8px; align-self: end;
}
.v-solex__demand {
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px; line-height: 1.35; letter-spacing: -0.01em;
  color: var(--verge-navy); margin: 0 0 24px; text-wrap: balance; align-self: start;
}
.v-solex__unit--cost { align-self: start; }
.v-solex__d { font-size: 16px; line-height: 1.6; color: var(--fg-2); margin: 0; text-wrap: balance; }
/* Gleiche Lesespalte wie .v-container.v-solblock__inner der Prosa-Sektionen:
   820 px breit, mittig, mit deren 32 px Innenabstand. */
.v-solex__after { max-width: 820px; margin: 64px auto 0; padding: 0 32px; text-align: left; }

@media (max-width: 900px) {
  .v-solex__grid { grid-template-columns: 1fr; row-gap: 24px; }
  .v-solex__card { grid-row: auto; grid-template-rows: none; }
  .v-solex__quote { font-size: 22px; }
  .v-solex__after { padding: 0; }
}

/* Karte ohne Ziel (services.jsx, Item ohne href): "Coming soon" steht als
   Text, nicht als Link. Grau statt Orange, keine Linie, kein Zeiger, weil
   Orange nach DS nur fuer Eyebrow, Tag und CTA steht. */
.v-svc__cta--soon { color: var(--fg-2); border-bottom-color: transparent; text-decoration: none; cursor: default; }
.v-svc__cta--soon:hover { color: var(--fg-2); border-bottom-color: transparent; }

/* Drei Karten nebeneinander statt 2 + 1 (services.jsx, content.columns 3). */
.v-svc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .v-svc-grid--3 { grid-template-columns: 1fr; } }

/* Kartentext in mehreren Absaetzen (services.jsx, body als Array): der Block
   fuellt den freien Raum der Karte wie sonst der einzelne Absatz, die Absaetze
   selbst wachsen nicht mit. */
.v-svc__body { flex: 1 1 auto; }
.v-svc__body .v-svc__d { flex: none; margin: 0; }
.v-svc__body .v-svc__d + .v-svc__d { margin-top: 12px; }

/* Drei Karten auf gleichen Zeilen (Subgrid, wie die Beispielkacheln): Titel,
   Text und Fuss stehen in allen Karten auf gleicher Hoehe, auch wenn ein
   Titel umbricht und ein anderer nicht. */
@media (min-width: 901px) {
  .v-svc-grid--3 { grid-auto-rows: auto; row-gap: 0; }
  .v-svc-grid--3 .v-svc { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; margin-bottom: 32px; }
  .v-svc-grid--3 .v-svc__head { align-self: start; margin-bottom: 16px; }
  .v-svc-grid--3 .v-svc__foot { align-self: end; margin-top: 24px; }
}

/* Wartelisten-Formular (solution-waitlist.jsx): eigene Flaeche wie die Karten,
   off-white auf Stone, Mindesthoehe gegen Springen beim Laden des Embeds. */
.v-solwait__form { margin-top: 32px; padding: 32px; background: var(--verge-off-white); border-radius: var(--radius, 8px); min-height: 240px; }
@media (max-width: 900px) { .v-solwait__form { padding: 20px; } }
.v-solwait__alt { margin-top: 20px; }

/* Dunkles Band, Variante "balanced" (solution-partner.jsx, content.layout).
   Linke Spalte breiter, damit Ueberschrift und Text weniger Zeilen brauchen;
   Karte vertikal mittig zur linken Spalte statt oben angeschlagen. Das
   Chatbots-Band setzt kein layout und bleibt 5:6, oben ausgerichtet. */
@media (min-width: 901px) {
  .v-solpartner--balanced .v-solpartner__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; }
}