/* =========================================================================
   „How It Works" (.khw-) — 12.10.2026

   Vorher: drei gruene Symbolkacheln mit „STEP 1/2/3" darunter. Jetzt tragen
   drei Illustrationen den Abschnitt, und aus der Textzeile „STEP 1" wird ein
   Kreis mit der Ziffer (Inhaber).

   Ausdrueckliche Vorgabe: **keine Box um die Bilder** — kein Rahmen, keine
   Flaeche, kein Radius und vor allem kein Link. Eine Karte, die wie ein Ziel
   aussieht aber keines ist, erzeugt nur tote Klicks. Die drei Spalten sind
   reiner Inhalt.

   Die Vorlagen stehen auf nahezu weissem Grund (#FDFEFE) und der Abschnitt
   ist weiss — deshalb ist kein Freistellen noetig, die Flaeche verschwindet
   von selbst. Beschnitten sind sie trotzdem: die leeren Raender sind weg,
   damit alle drei gleich viel Bildflaeche zeigen.

   Reines CSS mit eigenem Namensraum — das Tailwind-Bundle ist eingefroren.
   ========================================================================= */

.khw {
    --khw-green: var(--ksa-green, #006C35);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
    max-width: 1040px;
    margin-inline: auto;
}

.khw-schritt { text-align: center; }

/* Feste Buehne: die drei Vorlagen haben leicht verschiedene Seitenverhaeltnisse
   (1,40 / 1,30 / 1,49). Gleiche Hoehe plus `contain` stellt die Ziffernkreise
   darunter auf eine Linie, ohne ein Bild zu verzerren. */
.khw-buehne { height: 190px; display: grid; place-items: center; }
.khw-buehne img {
    display: block;
    max-width: 100%;
    max-height: 190px;
    width: auto; height: auto;
}

.khw-zahl {
    display: grid; place-items: center;
    width: 40px; height: 40px;
    margin: 16px auto 12px;
    border-radius: 999px;
    background: var(--khw-green);
    color: #fff;
    font-size: 16px; font-weight: 700; line-height: 1;
    font-variant-numeric: tabular-nums;
}

.khw-h { margin: 0; font-size: 18px; line-height: 24px; font-weight: 700; color: #18181b; }
.khw-p { margin: 8px auto 0; max-width: 300px; font-size: 14px; line-height: 22px; color: #5b6269; }

@media (max-width: 1023px) {
    .khw { gap: 28px; }
    .khw-buehne, .khw-buehne img { height: 160px; max-height: 160px; }
}

@media (max-width: 767px) {
    .khw { grid-template-columns: minmax(0, 1fr); gap: 36px; max-width: 420px; }
    .khw-buehne, .khw-buehne img { height: 180px; max-height: 180px; }
}