/* ============================================================
   Download-Seiten der Apps (/desktop-app, /kasse-app/download)
   Ergänzt home-neu.css um Raster + Karten (die Klassen fehlten dort)
   ============================================================ */
.hn .hn-grid { display: grid; gap: 18px; }
.hn .hn-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .hn .hn-grid--3 { grid-template-columns: minmax(0, 1fr); } }
.hn .hn-card { min-width: 0; overflow-wrap: anywhere; }
.hn .hn-cta [data-pxapp] { width: 100%; max-width: 100%; }

/* Karten auf hellem Grund ("So funktioniert es") */
.hn .hn-card {
    background: #fff;
    border: 1px solid #ece7df;
    border-radius: 18px;
    padding: 22px 22px 20px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 10px 26px -14px rgba(15,23,42,.18);
}
.hn .hn-card h3 { margin: 0 0 8px; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.hn .hn-card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: #5d586f; }

/* Download-Kacheln im dunklen Kasten */
.hn .hn-cta .hn-card {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: none;
    color: #eef0ff;
}
.hn .hn-cta .hn-card h3 { color: #fff; }
.hn .hn-cta .hn-card p { color: #c9cde6; }
.hn .hn-cta .hn-card .hn-btn { width: 100%; justify-content: center; text-align: center; }
.hn .hn-cta .hn-card .hn-btn:not(.hn-btn--primary) {
    background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.22);
}
.hn .hn-cta .hn-card[style*="outline"] { outline-offset: 3px; border-radius: 18px; }