News

* { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; background: #f5f7fa; color: #111; padding: 60px 20px; } .news-section { max-width: 1300px; margin: auto; } .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } /* News Card */ .news-card { background: white; border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 4px 15px rgba(0,0,0,0.06); transition: all 0.4s; display: flex; flex-direction: column; } .news-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(21,33,69,0.15); } /* Bild-Bereich */ .news-image { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: rgb(21,33,69); } .news-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; } .news-card:hover .news-image img { transform: scale(1.05); } /* Kategorie-Tag */ .news-category { position: absolute; top: 15px; left: 15px; background: rgb(246,195,70); color: rgb(21,33,69); font-size: 11px; font-weight: 800; padding: 6px 14px; border-radius: 20px; text-transform: uppercase; letter-spacing: 1px; z-index: 2; box-shadow: 0 4px 10px rgba(0,0,0,0.15); } /* Text-Bereich */ .news-content { padding: 25px 25px 30px 25px; flex-grow: 1; display: flex; flex-direction: column; } .news-title { font-size: 19px; font-weight: 800; color: rgb(21,33,69); margin: 0 0 12px 0; line-height: 1.3; transition: color 0.3s; } .news-card:hover .news-title { color: rgb(246,195,70); } .news-excerpt { font-size: 14px; color: #555; line-height: 1.6; margin: 0 0 20px 0; flex-grow: 1; } .news-meta { display: flex; align-items: center; justify-content: space-between; padding-top: 15px; border-top: 1px solid #eee; font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; } .news-date { display: flex; align-items: center; gap: 6px; } .news-arrow { color: rgb(246,195,70); font-size: 18px; transition: transform 0.3s; } .news-card:hover .news-arrow { transform: translateX(5px); } /* Responsive */ @media (max-width: 1000px) { .news-grid { grid-template-columns: repeat(2, 1fr); gap: 25px; } } @media (max-width: 650px) { .news-grid { grid-template-columns: 1fr; gap: 20px; } body { padding: 40px 15px; } }