/* ═══════════════════════════════════════════════════════════════════════════ style.css – Coco Bello Custom Styles Geladen nach Bootstrap → überschreibt gezielt Bootstrap-Defaults. ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1. Globale Bild-Basis ───────────────────────────────────────────────── */ img { max-width: 100%; height: auto; display: block; /* kein Baseline-Gap unter Bildern */ /* KEIN background: hier – würde durch transparente PNGs durchscheinen */ } /* Kleine Icon-Bilder im Navbar / Footer bleiben inline */ .navbar-brand img, nav img, footer img { display: inline-block; } /* ── 2. Produktkarten – einheitliche Bildhöhe (1:1-Verhältnis) ───────────── */ .card-img-wrap { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: #f8f9fa; /* Placeholder-Farbe während der Ladezeit */ border-radius: var(--bs-card-inner-border-radius, calc(0.375rem - 1px)) var(--bs-card-inner-border-radius, calc(0.375rem - 1px)) 0 0; } .card-img-wrap .card-img-top { width: 100%; height: 100%; object-fit: contain; /* Produkt vollständig sichtbar, kein Zuschneiden */ object-position: center; } /* ── 3. Warenkorb-Thumbnails ─────────────────────────────────────────────── */ .cart-thumb { width: 100%; max-height: 180px; object-fit: contain; object-position: center; display: block; } /* ── 4. Banner / Owl Carousel ────────────────────────────────────────────── */ /* Die Bannerbilder sind 1:1 (quadratisch). object-fit:contain zeigt das vollständige Bild ohne Zuschneiden; clamp() hält die Höhe responsiv: min 260px (kleines Mobilgerät) → 40vw (mittelgroße Screens) → max 520px (Desktop). Der dunkle Hintergrund füllt die Letterbox-Bereiche. */ #banner-area .item { background: #1a1a1a; line-height: 0; /* kein Whitespace unter dem Bild */ } #banner-area .item img { width: 100%; height: clamp(260px, 40vw, 520px); /* responsiv: ~260px Mobil → ~512px Desktop */ object-fit: contain; /* Vollbild, kein Zuschneiden */ object-position: center; } /* ── 5. Sterne-Bewertung & Cart-Stile (aus Originalversion) ─────────────── */ .fa-star, .fa-star-half { color: yellowgreen; padding: 3% 0; } #cart_count { text-align: center; padding: 0 0.9rem 0.1rem 0.9rem; border-radius: 3rem; } .shopping-cart { padding: 3% 0; } .cart-items + .cart-items { padding: 2% 0; } .price-details h6 { padding: 3% 2%; } /* ── 6. Footer – Flex statt Float ────────────────────────────────────────── */ footer > div { display: flex; flex-wrap: wrap; gap: 1.5rem; padding: 1.5rem 1rem; } footer .footer-left { float: none !important; /* Float aufheben */ flex: 1 1 160px; min-width: 140px; list-style-type: none; text-align: left; padding-left: 0; margin-bottom: 0; } /* ── 7. Responsive – Mobile-first (iPhone 14/15: 390px, SE: 375px) ───────── */ /* Warenkorb: px-5 ist zu groß auf kleinen Screens */ @media (max-width: 575.98px) { .container-fluid .row.px-5 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; } /* Preis-Details-Block nicht neben Cart-Liste quetschen */ .col-md-4.offset-md-1 { margin-top: 1.5rem !important; } /* Navbar-Suche: volle Breite */ .topnav form { display: flex; flex-wrap: wrap; gap: 0.25rem; } .topnav input[type="text"] { flex: 1 1 0; min-width: 0; height: 2.2rem !important; } .topnav button { height: 2.2rem !important; } /* Footer: schmalere Spalten auf Mobilgeräten */ footer .footer-left { flex: 1 1 100%; } } /* Tablet (576px – 767px): clamp() übernimmt bereits die responsive Höhe */ /* Kein horizontales Scrollen durch überlaufende Inhalte. WICHTIG: overflow-x:hidden darf nicht auf gesetzt werden – das bricht auf iOS Safari die Touch-Event-Propagation und macht Hamburger-Menü-Links unanklickbar. Nur auf anwenden. */ body { overflow-x: hidden; max-width: 100%; } /* ── 8. Mobile-Nav – Touch-Optimierung ──────────────────────────────────── */ /* Entfernt den 300ms Tap-Delay auf iOS (Safari ab iOS 9.3) */ .navbar-toggler, .navbar-nav .nav-link, .navbar-nav .btn { touch-action: manipulation; cursor: pointer; } /* Sicherheits-Mindestgröße für Tap-Target (Apple HIG: 44×44pt) */ .navbar-toggler { min-width: 44px; min-height: 44px; padding: 0.5rem; } /* Collapsed-Menu hat eigenen schwarzen Hintergrund (wie Navbar) */ .navbar-collapse { background: black; /* Stellt sicher, dass der ausgeklappte Bereich über den Seiteninhalt liegt */ position: relative; z-index: 1030; }