/* Landingpage home.kidlog.de — Ergänzung zu kidlog.css (Farben, Karte, Knöpfe). */
main { flex-direction: column; gap: 20px; }
.card.wide { max-width: 720px; }
.card p.lead { font-size: 18px; }
.hero h1 { font-size: 32px; }
.nutzen { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 640px) { .nutzen { grid-template-columns: repeat(3, 1fr); } }
.nutzen li { border: 1px solid var(--hairline); border-radius: 16px; padding: 16px; background: var(--card); }
.nutzen .icon { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; margin-bottom: 10px; color: #fff; font-weight: 800; background: linear-gradient(135deg, var(--brand-start), var(--brand-end)); }
.nutzen h2 { font-size: 17px; margin: 0 0 6px; }
.nutzen p { margin: 0; font-size: 15px; }
.reihe { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 8px; }
.reihe .btn { flex: 1 1 200px; }
.kontakt dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; }
.kontakt dt { font-weight: 600; }
.kontakt dd { margin: 0; color: var(--text-2); }
footer nav a + a::before { content: " · "; color: var(--text-2); }