/* SUBSTNTL — Stile für die vom Renderer erzeugten Elemente. Additiv gedacht: greift nur auf .sub-* Klassen, lässt bestehendes CSS unberührt. Einbindung im NACH dem bestehenden Stylesheet. */ :root{ --sub-cream:#FFF8F0; --sub-coral:#FF6B4A; --sub-yellow:#FFD639; --sub-teal:#2DD4A8; --sub-black:#1a1a1a; --sub-line:3px solid var(--sub-black); --sub-shadow:5px 5px 0 var(--sub-black); } /* ── Produktraster ─────────────────────────────────────── */ .sub-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:24px; } .sub-card{ border:var(--sub-line); border-radius:18px; background:#fff; box-shadow:var(--sub-shadow); overflow:hidden; transition:transform .12s ease, box-shadow .12s ease; } .sub-card:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--sub-black); } .sub-card__link{ display:block; color:inherit; text-decoration:none; } .sub-card__media{ position:relative; background:var(--sub-cream); } .sub-card__img{ display:block; width:100%; aspect-ratio:1; object-fit:cover; } .sub-card__img--empty{ display:block; width:100%; aspect-ratio:1; background:repeating-linear-gradient(45deg,var(--sub-cream),var(--sub-cream) 12px,#f2e7db 12px,#f2e7db 24px); } .sub-badge{ position:absolute; top:12px; left:12px; background:var(--sub-yellow); border:2px solid var(--sub-black); border-radius:999px; padding:3px 12px; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; } .sub-badge--out{ background:#eee; color:#666; } .sub-card__body{ padding:16px; border-top:var(--sub-line); } .sub-designer{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; border-bottom:3px solid var(--accent,var(--sub-black)); padding-bottom:1px; margin-bottom:8px; } .sub-card__title{ margin:0 0 4px; font-size:18px; line-height:1.25; } .sub-card__sub{ margin:0 0 12px; font-size:14px; opacity:.75; } .sub-card__foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; } .sub-card__price{ font-weight:700; } .sub-card__cta{ font-size:14px; font-weight:700; } /* ── Kollektionen ──────────────────────────────────────── */ .sub-colls{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px; } .sub-coll{ border:var(--sub-line); border-radius:18px; background:#fff; box-shadow:var(--sub-shadow); overflow:hidden; } .sub-coll__img{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-bottom:var(--sub-line); } .sub-coll__body{ padding:20px; } .sub-coll__title{ margin:0 0 4px; font-size:24px; } .sub-coll__sub{ margin:0 0 10px; font-weight:700; color:var(--sub-coral); } .sub-coll__meta{ font-size:13px; opacity:.7; } .sub-btn{ display:inline-block; border:2px solid var(--sub-black); border-radius:10px; padding:10px 18px; background:var(--sub-yellow); color:var(--sub-black); font-weight:700; text-decoration:none; box-shadow:2px 2px 0 var(--sub-black); } .sub-btn:hover{ transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--sub-black); } /* ── Lookbook ──────────────────────────────────────────── */ .sub-looks{ columns:3 260px; column-gap:20px; } .sub-look{ break-inside:avoid; margin:0 0 20px; } .sub-look img{ display:block; width:100%; border:var(--sub-line); border-radius:14px; box-shadow:var(--sub-shadow); } .sub-look figcaption{ font-size:13px; margin-top:8px; opacity:.8; } /* ── Personen ──────────────────────────────────────────── */ .sub-people{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:24px; } .sub-person{ border:var(--sub-line); border-radius:18px; background:#fff; padding:20px; box-shadow:var(--sub-shadow); border-top:10px solid var(--accent,var(--sub-black)); } .sub-person__img{ width:88px; height:88px; border-radius:50%; object-fit:cover; border:3px solid var(--sub-black); } .sub-person__name{ margin:12px 0 2px; font-size:20px; } .sub-person__role{ margin:0 0 10px; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; opacity:.7; } /* ── Vertrauensleiste ──────────────────────────────────── */ .sub-usp{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:center; font-size:14px; font-weight:700; } .sub-usp li::before{ content:"✓ "; color:var(--sub-teal); } /* ── Werte ─────────────────────────────────────────────── */ .sub-values{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:24px; } .sub-value{ border:var(--sub-line); border-radius:18px; background:#fff; padding:22px; box-shadow:var(--sub-shadow); } .sub-value h3{ margin:0 0 8px; font-size:20px; } /* ── FAQ ───────────────────────────────────────────────── */ .sub-faq{ max-width:760px; margin:0 auto; } .sub-faq__item{ border:var(--sub-line); border-radius:14px; background:#fff; margin-bottom:12px; } .sub-faq__item>summary{ cursor:pointer; padding:16px 20px; font-weight:700; list-style:none; } .sub-faq__item>summary::-webkit-details-marker{ display:none; } .sub-faq__item>summary::after{ content:"+"; float:right; font-size:22px; line-height:1; } .sub-faq__item[open]>summary::after{ content:"–"; } .sub-faq__item>div{ padding:0 20px 18px; } /* ── Filter ────────────────────────────────────────────── */ .sub-filter{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:28px; } .sub-filter__btn{ border:2px solid var(--sub-black); border-radius:999px; padding:8px 18px; background:#fff; font:inherit; font-weight:700; cursor:pointer; box-shadow:2px 2px 0 var(--sub-black); } .sub-filter__btn.is-active{ background:var(--accent,var(--sub-yellow)); } /* ── Leerzustand ───────────────────────────────────────── */ .sub-empty{ border:2px dashed var(--sub-black); border-radius:14px; padding:28px; text-align:center; opacity:.75; max-width:520px; margin:0 auto; } @media (max-width:640px){ .sub-looks{ columns:2 150px; } .sub-grid{ grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:16px; } .sub-card__body{ padding:12px; } .sub-card__title{ font-size:16px; } }