/* Basis Layout-Helfer (nur Klassen, keine globalen Tag-Styles) */
.layout-box-sizing-all { box-sizing: border-box; }

/* Hero-Sektion */
.hero { padding: 64px 16px; text-align: center; background: linear-gradient(135deg, rgba(57,181,74,0.15), rgba(0,0,0,0)); }

/* Kategorien-Abschnitt */
.categories { padding: 32px 16px; }

/* Grid-Layout f?r Karten */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }

/* Karten-Element */
.card { display: block; padding: 16px; border-radius: 12px; background: var(--color-surface); color: var(--color-text); }

/* Newsletter-Sektion */
.newsletter { padding: 32px 16px; }
.newsletter-form { display: flex; gap: 8px; justify-content: center; }
.newsletter-input-email { padding: 10px 12px; border-radius: 8px; border: 1px solid #2a2f36; background: #0f1317; color: var(--color-text); }

/* Footer-Abstand (falls ben?tigt) */
.site-footer-spacer { padding: 24px 16px; text-align: center; color: var(--color-muted); }

@media (min-width: 768px) {
  .grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
}