:root {
    --bg-color: #fff;
    --text-color: #1d1d1f;
    --link-color: #0066cc;
    --nav-bg: rgba(0, 0, 0, 0.8);
    --nav-text: #f5f5f7;
    --card-bg: #fbfbfd;
    --border-color: #d2d2d7;
    --max-width: 1600px; /* Erhöht für breitere Darstellung */
    --content-padding: 95%;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden; /* Verhindert horizontales Scrollen */
}

/* Navigation */
nav {
    background-color: var(--nav-bg);
    backdrop-filter: saturate(180%) blur(20px);
    height: 44px;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 9999;
    display: flex;
    justify-content: center; /* Inhalt zentrieren, aber wir nutzen max-width */
    align-items: center;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 24px;
    align-items: center;
    width: var(--content-padding); /* Volle Breite nutzen */
    max-width: var(--max-width);
    overflow-x: auto; /* Scrollbar auf sehr kleinen Screens erlauben */
    white-space: nowrap;
}

/* Erstes Element (Logo) nach links schieben, Rest bleibt */
nav ul li:first-child {
    margin-right: auto; /* Schiebt alles andere nach rechts */
}

/* Oder wenn wir wollen, dass der Rest zentriert ist und das Logo links:
   Das ist mit Flexbox tricky in einer Liste.
   Einfacher: Logo links, Rest rechtsbündig oder mittig.
   Mit margin-right: auto beim ersten Element schieben wir den Rest nach rechts.
   Wenn der Rest zentriert sein soll, bräuchten wir eine andere Struktur.
   Ich nehme an "linksbündig" für das Logo und der Rest "kann bleiben" (also zentriert wie vorher oder rechts).
   Da vorher alles zentriert war (`justify-content: center`), und jetzt das Logo links sein soll:

   Option A: Logo ganz links, Menüpunkte ganz rechts -> margin-right: auto beim Logo.
   Option B: Logo ganz links, Menüpunkte zentriert -> Geht nur mit absoluter Positionierung oder Grid.

   Ich wähle Option A (Logo links, Menü rechts), das ist Standard.
*/

nav a { color: var(--nav-text); text-decoration: none; font-size: 12px; opacity: 0.8; transition: opacity 0.3s; }
nav a:hover { opacity: 1; }

/* Search Bar */
.search-container { margin-top: 20px; display: flex; justify-content: center; width: 100%; }
.search-input { width: 100%; max-width: 600px; padding: 12px 20px; border-radius: 980px; border: 1px solid var(--border-color); font-size: 17px; outline: none; background-color: rgba(255,255,255,0.8); transition: all 0.3s; }
.search-input:focus { border-color: #0071e3; box-shadow: 0 0 0 4px rgba(0,113,227,0.15); }

/* Filter Container */
.filter-container {
    flex-wrap: wrap;
}

/* Hero Section */
.hero { margin-top: 44px; text-align: center; padding: 80px 20px; background-color: var(--card-bg); border-bottom: 1px solid var(--border-color); }
.hero h1 { font-size: 56px; font-weight: 600; margin-bottom: 10px; letter-spacing: -0.005em; line-height: 1.1; }
.hero h2 { font-size: 28px; font-weight: 400; margin-bottom: 30px; }
.hero .cta-links { font-size: 21px; color: var(--link-color); margin-top: 20px; }
.hero .cta-links a { color: var(--link-color); text-decoration: none; margin: 0 15px; display: inline-block; margin-bottom: 10px; }
.hero .cta-links a:hover { text-decoration: underline; }

/* Section Headers */
.section-header { text-align: center; font-size: 40px; font-weight: 600; margin: 60px 0 40px; padding: 0 20px; }

/* Product Grid */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    padding: 20px;
    width: var(--content-padding);
    max-width: var(--max-width);
    margin: 0 auto;
}

.product-card {
    background-color: var(--card-bg);
    padding: 40px 30px;
    text-align: center;
    border-radius: 18px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    box-sizing: border-box;
}

.product-card:hover { transform: scale(1.02); box-shadow: 0 10px 30px rgba(0,0,0,0.1); background-color: #fff; z-index: 10; }
.product-card .badge { position: absolute; top: 20px; right: 20px; background: #e8e8ed; color: #1d1d1f; font-size: 10px; font-weight: 600; padding: 4px 8px; border-radius: 4px; text-transform: uppercase; }
.product-card h3 { font-size: 20px; margin-bottom: 10px; font-weight: 600; line-height: 1.3; }
.product-card p { font-size: 15px; color: #86868b; margin-bottom: 20px; line-height: 1.4; flex-grow: 1; }
.product-card .price { font-size: 19px; font-weight: 600; color: #1d1d1f; margin-bottom: 15px; display: block; }
.product-card img { max-width: 100%; height: 200px; object-fit: contain; margin-top: 20px; margin-bottom: 20px; }
.product-card .product-meta { margin-top: auto; padding-top: 15px; border-top: 1px solid #eee; }

/* Shops / Partner Section */
.shops-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    width: var(--content-padding);
    max-width: var(--max-width);
    margin: 0 auto 60px;
}

.shop-item {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 18px;
    color: #555;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    flex: 1 1 150px; /* Flexibel, aber Mindestbreite */
    max-width: 250px;
}

.shop-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-color: #999;
    color: #000;
}

/* Affiliate Info */
.affiliate-note {
    font-size: 11px;
    color: #86868b;
    margin-top: 8px;
    display: block;
    line-height: 1.4;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.affiliate-asterisk {
    color: #86868b;
    font-size: 0.8em;
    vertical-align: top;
}

/* Product Detail Page */
.product-detail {
    width: var(--content-padding);
    max-width: 1400px; /* Etwas breiter als vorher */
    margin: 80px auto;
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
    box-sizing: border-box;
}

.product-detail-image { text-align: center; position: sticky; top: 80px; }
.product-detail-image img#main-image { max-width: 100%; max-height: 600px; height: auto; border-radius: 18px; object-fit: contain; }

.product-detail-info h1 { font-size: 40px; margin-top: 0; line-height: 1.1; }
.product-detail-info .price { font-size: 28px; font-weight: 600; margin-bottom: 20px; }
.product-detail-info .description { font-size: 17px; line-height: 1.6; color: #333; margin-top: 30px; }
.product-detail-info .description img { max-width: 100%; height: auto; } /* Bilder in Beschreibung responsiv */

.btn { display: inline-block; background-color: #0071e3; color: white; padding: 12px 24px; border-radius: 980px; text-decoration: none; font-size: 17px; transition: background-color 0.2s; font-weight: 500; text-align: center; }
.btn:hover { background-color: #0077ed; }

.share-buttons { margin-top: 30px; }
.share-buttons a { display: inline-block; margin-right: 10px; opacity: 0.7; transition: opacity 0.2s; }
.share-buttons a:hover { opacity: 1; }
.share-buttons img { width: 32px; height: 32px; }

/* Static Page (Impressum etc.) */
.static-page { max-width: 800px; margin: 80px auto; padding: 20px; }
.static-page h1 { font-size: 40px; margin-bottom: 30px; }
.static-page p, .static-page li { line-height: 1.6; color: #333; }

/* Footer */
footer { background-color: #f5f5f7; padding: 40px 20px; font-size: 12px; color: #86868b; text-align: center; border-top: 1px solid var(--border-color); margin-top: 60px; }
.footer-nav { list-style: none; padding: 0; margin: 20px 0; display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }
.footer-nav a { color: #555; text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }

/* ---------------------------------------------------------
   RESPONSIVE MEDIA QUERIES
   --------------------------------------------------------- */

@media (max-width: 1024px) {
    .hero h1 { font-size: 48px; }
    .product-detail { gap: 30px; }
}

@media (max-width: 768px) {
    /* Navigation */
    nav ul { gap: 15px; padding: 0 10px; }

    /* Hero */
    .hero { padding: 40px 20px; }
    .hero h1 { font-size: 36px; }
    .hero h2 { font-size: 20px; }

    /* Product Detail: Stack vertically */
    .product-detail {
        grid-template-columns: 1fr;
        margin-top: 60px;
        gap: 30px;
    }

    .product-detail-image { position: static; }
    .product-detail-info h1 { font-size: 32px; }

    /* Filter inputs stack */
    .filter-container input, .filter-container select {
        width: 100% !important; /* Force full width on mobile */
        margin-bottom: 5px;
    }

    .filter-container {
        flex-direction: column;
        align-items: stretch !important;
    }

    .filter-container button {
        width: 100%;
    }

    /* Grid adjustments */
    .product-grid {
        grid-template-columns: repeat(auto-fit, minmax(100%, 1fr)); /* 1 Spalte auf ganz kleinen Screens, sonst 2 */
    }

    @media (min-width: 480px) {
        .product-grid {
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        }
    }
}