/* Zweck: Enthält Styles für wiederverwendbare UI-Komponenten (z. B. Buttons, Karten, Badges). Verantwortung: Kapselt visuelle Komponenten, die auf mehreren Seiten identisch genutzt werden. Einbindung: In allen HTML-Seiten im `` nach `base.css` und `layout.css` eingebunden. Zusammenarbeit: - Nutzt Variablen und Grundregeln aus `base.css`. - Wird von seiten-spezifischen Styles in `css/pages/*.css` bei Bedarf überschrieben. */ /* Buttons */ .btn { /* Basis-Button-Stil, später konkret ausdefinieren */ display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 1rem; border: none; cursor: pointer; } /* Karten (z. B. Produktkarten) */ .card { /* Grundstruktur für Kartenlayout */ border-radius: 0.25rem; overflow: hidden; } /* Badges / Labels */ .badge { /* Platzhalter für kleine Status-Labels */ display: inline-block; padding: 0.125rem 0.5rem; border-radius: 999px; } /* ===== Header Components ===== */ .brand { text-decoration: none; color: inherit; font-weight: 700; filter: none; } .main-nav__list { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; } .main-nav__link { text-decoration: none; color: #414141; padding: 0.45rem 0.65rem; border-radius: 999px; transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } .main-nav__link:hover, .cart-link:hover { text-decoration: none; } .main-nav__link:hover, .main-nav__link:focus-visible { color: #111111; background: #f2f2f2; box-shadow: inset 0 0 0 1px #d8d8d8; outline: none; } .cart-link { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: #111111; padding: 0.45rem 0.7rem; border-radius: 999px; border: 1px solid #cfcfcf; background: #ffffff; transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .cart-link:hover, .cart-link:focus-visible { background: #f7f7f7; border-color: #a9a9a9; transform: translateY(-1px); outline: none; } .cart-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.35rem; border-radius: 999px; font-size: 0.75rem; line-height: 1; background: #3665f3; color: #ffffff; font-weight: 800; } /* Wiederverwendbarer Utility-Helfer fuer Screenreader-only Labels */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Abstrakter Sprachumschalter fuer Header-Bereiche */ .language-switcher { display: inline-flex; align-items: center; } .language-switcher__select { min-width: 4.6rem; height: 2.1rem; padding: 0 0.65rem; border: 1px solid #cfcfcf; border-radius: 999px; background: #ffffff; color: #111111; font-size: 0.85rem; font-weight: 700; cursor: pointer; } .language-switcher__select:hover, .language-switcher__select:focus-visible { border-color: #a9a9a9; background: #f7f7f7; outline: none; } .brand__logo { height: 64px; width: auto; display: block; } @media (max-width: 520px) { .brand__logo { height: 28px; } } /* Aktionspreis: durchgestrichener Listenpreis, reduzierter Preis und Rabatt in % */ .promo-price { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.65rem; direction: ltr; } .promo-price__original { order: 2; color: #111111; text-decoration: line-through; text-decoration-color: #c62828; text-decoration-thickness: 2px; font-weight: 600; font-size: 0.95rem; } .promo-price__sale { order: 3; color: #b71c1c; font-weight: 800; font-size: 1rem; } .promo-price__discount { order: 1; color: #c62828; font-weight: 800; white-space: nowrap; font-size: 1rem; } /* Wie Produktdetail: groesserer Aktionspreis (Uebersicht + Detail + verwandte Produkte) */ .promo-price--hero .promo-price__sale { font-size: clamp(1.5rem, 3vw, 2rem); } .promo-price--hero .promo-price__original { font-size: clamp(1rem, 2vw, 1.2rem); } .promo-price--hero .promo-price__discount { font-size: clamp(1.2rem, 2.8vw, 1.75rem); } /* Nur Warenkorb-Popup: kleiner */ .promo-price--compact .promo-price__sale { font-size: 1rem; } .promo-price--compact .promo-price__original { font-size: 0.85rem; } .promo-price--compact .promo-price__discount { font-size: 0.9rem; }