/* 1. Basis-Setup & Reset */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 14px; background-color: #BCC5CE; color: #333; line-height: 1.6; } /* 2. Haupt-Layout-Container */ .wrapper { max-width: 1000px; margin: 20px auto; padding: 0 15px; } .main-container { display: flex; flex-wrap: wrap; gap: 20px; } /* 3. Header-Bereich (Full-Width Logo & Banner darunter) */ .listing-header { display: flex; flex-direction: column; /* Stapelt Logo und Banner untereinander */ align-items: center; justify-content: center; background-color: #ffffff; padding: 0; /* Padding auf 0, damit das Logo bis zum Rand gehen kann */ border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.03); margin-bottom: 20px; overflow: hidden; /* Sorgt dafür, dass das Logo nicht über die Ecken der Rundung ragt */ } .logo-wrapper { width: 100%; /* Nimmt die volle Breite des Headers ein */ text-align: center; line-height: 0; /* Verhindert unschöne Lücken unter dem Bild */ } .logo-img { width: 100%; /* Skaliert das Logo auf die volle Breite des Containers */ max-width: 100%; /* Verhindert das Überlappen */ height: auto; /* Behält das Seitenverhältnis bei */ max-height: none; /* Entfernt die alte Begrenzung von 110px */ display: block; } .header-banner-wrapper { width: 100%; display: flex; justify-content: center; /* Zentriert den kleinen Banner unter dem Logo */ padding: 15px 0; /* Abstand für den kleinen Banner */ } .banner-img { height: auto; max-height: 60px; /* Der kleine Banner bleibt dezent */ width: auto; } /* Anpassung für Mobile */ @media (max-width: 768px) { .listing-header { padding: 0; } .header-banner-wrapper { padding: 10px 0; } } /* 4. Sidebar & Kategorien-Menü */ .sidebar { flex: 1 1 250px; background-color: #ffffff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.03); align-self: flex-start; } .left_menu, .left_menu ul { list-style-type: none !important; /* Entfernt die Aufzählungspunkte sicher */ padding: 0; margin: 0; } .left_menu li { border-bottom: 1px solid #f0f0f0; position: relative; } .left_menu li a { color: #444; text-decoration: none; display: block; padding: 10px 5px; transition: all 0.2s ease-in-out; } .left_menu li a:hover { background-color: #f4f0f8; color: #5b4282; padding-left: 10px; border-radius: 4px; } /* Untermenü-Logik (Hover) */ .children { display: none; /* Standardmäßig ausblenden */ background-color: #fcfcfc; padding-left: 15px !important; } .left_menu li:hover > .children { display: block; /* Einblenden beim Drüberfahren */ } .child-level a { font-size: 13px; color: #666 !important; } /* 5. Hauptinhalt (Produktinfos) */ .listing-content { flex: 3 1 600px; background-color: #ffffff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.03); } .listing-content h1 { font-size: 24px; color: #222; margin-bottom: 5px; } .item-data { color: #999; font-size: 12px; display: block; margin-bottom: 20px; } .custom-promo-banner, .product-image { text-align: center; margin: 20px 0; } .custom-promo-banner img { max-width: 100%; height: auto; } /* 6. Preis & Info-Blöcke */ .price-block { font-size: 16px; text-align: right; padding: 15px 20px; background-color: #faf8fc; border-left: 4px solid #5b4282; margin: 25px 0; border-radius: 4px; } .price-block span { font-size: 24px; font-weight: bold; color: #5b4282; margin-left: 10px; } .info { background-color: #f8f9fa; border: 1px solid #e2e8f0; border-left: 4px solid #5b4282; padding: 12px 15px; margin: 20px 0; border-radius: 4px; } hr { border: none; border-bottom: 1px solid #eaeaea; margin: 20px 0; } /* 7. Clearfix (für Plenty-Listen) */ .clearfix:after { content: " "; display: table; clear: both; } /* 8. Responsive Design (Mobile) */ @media (max-width: 768px) { .listing-header { flex-direction: column; text-align: center; padding: 15px; } .logo-wrapper { flex: 0 0 auto; margin-bottom: 15px; } .header-banner-wrapper { justify-content: center; padding-right: 0; width: 100%; } .main-container { flex-direction: column; } .sidebar { order: 2; /* Sidebar rutscht unter den Content */ width: 100%; } .children { display: block; /* Auf Mobile Unterpunkte direkt zeigen */ } .listing-content { order: 1; width: 100%; padding: 20px; } .price-block { text-align: left; } .price-block span { display: block; margin-left: 0; margin-top: 5px; } } /* Moderne Spezifikations-Tabelle */ /* Moderne Spezifikations-Tabelle */ .modern-spec-table { width: 100%; border-collapse: collapse; margin: 20px 0; background-color: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.05); } .modern-spec-table tr { border-bottom: 1px solid #f4f4f4; } .modern-spec-table tr:nth-child(even) { background-color: #fafafa; } /* Der Zaubertrick für Links/Rechts */ .spec-content { padding: 15px 20px; display: flex; /* Aktiviert Flexbox */ justify-content: space-between; /* Drückt Inhalt an die Ränder */ align-items: center; } /* Styling für die Namen (links) */ .spec-content b, .spec-content strong, .spec-content span:first-child { color: #5b4282; /* Dein Lila */ font-weight: bold; font-size: 14px; margin-bottom: 0; /* Entfernt den Umbruch nach unten */ } /* Styling für die Werte (rechts) */ .spec-content span:last-child, .spec-content div:last-child { color: #333; font-weight: normal; text-align: right; } /* Trust-Banner mit markanten Linien in Hausfarbe (#5b4282) */ .shipping-trust-banner { width: 100%; padding: 25px 0; border-top: 4px solid #5b4282; /* Jetzt im Lila des Preis-Blocks */ border-bottom: 4px solid #5b4282; /* Jetzt im Lila des Preis-Blocks */ background-color: #ffffff; margin: 35px 0; display: flex; justify-content: center; align-items: center; } .trust-text { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 16px; font-weight: bold; color: #333; letter-spacing: 1px; text-transform: uppercase; text-align: center; } .trust-checkmark { color: #5b4282; font-size: 20px; margin-right: 12px; }