Vorlage:Home/styles.css

Aus City ABC

/* HERO */ .home-hero { position: relative; min-height: 60vh; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; border-radius: 24px; overflow: hidden; margin: 0 auto; max-width: 1200px; } .home-hero::after { /* Abdunklung */ content: ""; position: absolute; top:0; right:0; bottom:0; left:0; background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.35)); } .home-hero__inner { position: relative; z-index: 1; text-align: center; color: #fff; padding: 6rem 2rem; width: 100%; font-family: Georgia, "Times New Roman", serif; } .home-hero__title { font-weight: 700; margin: 0 0 .25rem 0; font-size: 2.4rem; } @media (min-width: 700px) { .home-hero__title { font-size: 3.2rem; } } @media (min-width: 1100px){ .home-hero__title { font-size: 4rem; } }

.home-hero__subtitle { margin: 0 0 1.5rem 0; opacity: .95; font-size: 1.05rem; } @media (min-width: 700px) { .home-hero__subtitle { font-size: 1.25rem; } } @media (min-width: 1100px){ .home-hero__subtitle { font-size: 1.45rem; } }

/* Buttons (Wiki-Link im Wrapper .btnlink) */ .btnlink a { display:inline-block; padding:.9rem 1.3rem; border-radius:999px; text-decoration:none; font-weight:700; box-shadow:0 8px 24px rgba(0,0,0,.18); transition:transform .15s ease, filter .15s ease; } .btnlink a:hover { transform: translateY(-1px); filter: brightness(1.03); } .btn--light a { background:#fff; color:#1d1d1f; } .btn--brand a, .btn--pill a { background:#800000; color:#fff; }

/* KARTEN-GRID */ .home-cards { display:grid; gap: 1.1rem; grid-template-columns: repeat(3, 1fr); margin: -70px auto 2.5rem; /* Überlappung */ max-width:1200px; padding: 0 2rem; } @media (max-width: 980px) { .home-cards { grid-template-columns: 1fr