/* AROMICA – Übergangswebsite */ @font-face { font-family: 'Yaldevi'; src: url('fonts/Yaldevi-VariableFont_wght.ttf') format('truetype'); font-weight: 200 700; font-style: normal; font-display: swap; } :root { --brown-dark: #CDAC89; --brown-light: #e6d5c4; --text: #5A5A5D; } * { margin: 0; padding: 0; box-sizing: border-box; } body { max-width: 1920px; margin: 0 auto; font-family: 'Yaldevi', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--text); background-color: #fff; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; height: auto; } /* ---------- Header ---------- */ .site-header { background-color: var(--brown-dark); padding: 32px 16px; text-align: center; } .logo { width: clamp(190px, 16vw, 300px); margin: 0 auto; } /* ---------- Hero ---------- */ .hero img { width: 100%; height: clamp(220px, 28.5vw, 460px); object-fit: cover; object-position: center; } /* ---------- Intro ---------- */ .intro { max-width: 640px; margin: 0 auto; padding: 72px 20px 0; text-align: center; font-size: 15px; } .intro h1 { font-size: 28px; font-weight: 700; color: var(--brown-dark); margin-bottom: 32px; } .intro h2 { font-size: 23px; font-weight: 700; color: var(--brown-dark); margin: 46px 0 28px; } .intro p { margin-bottom: 28px; } .intro .contact, .intro .team { font-size: 16.5px; } .intro .contact { margin-bottom: 32px; } .intro .team { margin-bottom: 0; } .button { display: inline-block; background-color: var(--brown-dark); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; padding: 8px 30px; border-radius: 6px; } .button:hover, .button:focus-visible { background-color: #b99774; } .button:focus-visible { outline: 3px solid var(--brown-light); outline-offset: 2px; } /* ---------- Produkte ---------- */ .products { padding: 0 20px 96px; } .products h2 { text-align: center; font-size: 24px; font-weight: 700; color: var(--brown-dark); margin: 60px auto 30px; } .grid { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 17px; } .card { background-color: var(--brown-light); /*border-radius: 12px;*/ padding: 24px 24px 40px; text-align: center; } .card img { width: 54%; margin: 0 auto 24px; } .card h3 { font-size: 15px; font-weight: 700; color: var(--text); max-width: 200px; min-height: 2.7em; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; } .card p { font-size: 13px; line-height: 1.45; } /* ---------- Footer ---------- */ footer { background-color: var(--brown-dark); color: var(--text); text-align: center; padding: 42px 20px 46px; font-size: 15px; line-height: 1.45; } footer .company { font-size: 21px; font-weight: 700; line-height: 1.4; margin-bottom: 12px; } footer p { margin-bottom: 18px; } footer .legal { margin-bottom: 0; } /* ---------- Responsive ---------- */ @media (max-width: 1024px) { .grid { grid-template-columns: repeat(2, 1fr); max-width: 720px; } .hero img { height: clamp(200px, 30vw, 380px); } } @media (max-width: 620px) { .intro { padding-top: 48px; font-size: 14.5px; } .intro h1, .products h2 { font-size: 19px; } .products { padding-bottom: 64px; } .grid { grid-template-columns: 1fr; max-width: 400px; } .card img { width: 45%; } }