/* 1. LÖSCHT DIE RÄNDER OBEN, LINKS UND RECHTS KOMPLETT */

html, body {

    margin: 0 !important;

    padding: 0 !important;

    width: 100%;

}



/* 2. BOX-MODE FÜR PRÄZISION */

* {

    box-sizing: border-box;

}



/* 3. DER HEADER-STAPEL */

.main-header {

    display: flex;

    flex-direction: column; /* Weiß oben, Schwarz unten */

    width: 100%;

    position: sticky;

    top: 0;

    z-index: 1000;

}



/* 4. DIE WEISSE LEISTE (BÜNDIG OBEN) */

.top-bar {

    background-color: #ffffff;

    width: 100%;

    display: flex;

    justify-content: space-between;

    align-items: center;

       padding: 0 0px;

           height: 50px;  

    border-bottom: 1px solid #ccc;

    margin: 0; /* Sicherheitshalber */

}


.ds-link {

    color: green;

}



/*240226 Symbole größer*/
.icon-zoom {
    display: inline-block;
    font-size: 1.5em;       /* Symbol +50%  */
    vertical-align: middle; /* Damit es nicht "nach oben rutscht" */
    margin-right: 10px;    /* Abstand zum Text */
    line-height: 1;         /* Verhindert, dass die Zeile zu hoch wird */
}

/*Start 20.02.2026*/

/* Der Container, der alles umschließt */
.top-bar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* WICHTIG: Das Padding sorgt für den Sicherheitsabstand zum Rand */
    /* 0 oben/unten, 30px links/rechts */
    padding: 0 30px; 
    
    /* Sorgt dafür, dass das Padding die 100% Breite nicht vergrößert */
    box-sizing: border-box; 
    
    height: 60px; /* Oder deine gewünschte Höhe */
    background-color: #fff;
}

/* Falls du eine maximale Breite für 4K-Monitore nutzt: */
.header-content-limit {
    max-width: 1800px;
    width: 100%;
    margin: 0 auto; /* Zentriert den Inhalt bei extrem breiten Schirmen */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Für die nav-right Elemente */
.nav-right {
    display: flex;
    align-items: center;
    gap: 20px; /* Abstand zwischen den Icons */
}

/*Ende 20.02.2026


/* Container für das gesamte Shop-Element */

.shop-container {

    display: flex;

    align-items: center;

    gap: 8px;

    text-decoration: none;

    color: #28a745; /* Dein Grün */

    font-weight: bold;

}











/* Wrapper für Icon + Zahl */

.cart-wrapper {

    position: relative;

    display: inline-block;

}



.cart-icon {

    width: 24px;

    height: auto;

    /* Macht das schwarze Icon grün (wer es mag)

    filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);*/

}



/* Die kleine Zahl oben rechts */

.cart-badge {

    position: absolute;

    top: -5px;

    right: -8px;

    background-color: #ff0000; /* Alarm-Rot für die Zahl */

    color: white;

    font-size: 10px;

    padding: 2px 5px;

    border-radius: 50%;

    font-weight: bold;

    min-width: 10px;

    text-align: center;

    border: 1px solid white;

}





/*Ende 260126*/

       






/* Die Flagge oben */





.lang-current {

   

   

    display: flex;

    align-items: center;

    line-height: 1; /* Verhindert, dass unsichtbare Texthöhen den Raum verzerren */

    cursor: pointer;

    padding: 5px 15px;

}



.lang-current img {

    margin-top: 0px; /* Der "letzte Schubs", falls es optisch noch nicht 100% passt */

    margin-bottom: 4px;

    height: 20x;

    border: 1px solid #ccc;

    width: 24px;   /* Einheitliche Breite */

    height: 17px;  /* Einheitliche Höhe */

    object-fit: cover; /* Schneidet Überstände (wie bei GB) einfach ab */

}





/* Container */

.lang-dropdown {

    position: relative; /* Anker für die Liste */

    display: inline-block;

}



/* Die schwebende Liste */

.lang-list {

    display: none;

    position: absolute; /* Zwingt die Liste zum Schweben */

    top: 100%;          /* Direkt unter die weiße Bar */

    right: 0;           /* Rechtsbündig */

    background: #fff;

    min-width: 100px;

    border: 1px solid #ccc;

    box-shadow: 0 4px 12px rgba(0,0,0,0.2);

    z-index: 9999;      /* Immer im Vordergrund */

}



/* Zeigen beim Drüberfahren */

.lang-dropdown:hover .lang-list {

    display: flex;

    flex-direction: column; /* Flaggen untereinander */

}



/*Styling der einzelnen Zeilen */

.lang-list a {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 8px 12px;

    text-decoration: none;

    color: #333;

    font-size: 13px;

    border-bottom: 1px solid #eee;

}



.lang-list a:last-child { border-bottom: none; }



.lang-list a:hover {

    background-color: #f5f5f5;

}



.lang-list img {

    width: 24px;   /* Einheitliche Breite */

    height: 16px;  /* Einheitliche Höhe */

    object-fit: cover; /* Schneidet Überstände (wie bei GB) einfach ab */

    border-radius: 2px;

    box-shadow: 0 0 1px rgba(0,0,0,0.5); /* Hilft bei weißen Flaggenrändern */

}





.nav-left {

    padding-left: 30px;

    display: flex;

    align-items: center;

    gap: 40px;



    }



.register-link {

color: green;

  font-weight: bold;

 

    }



.nav-right {

color: black;

 font-weight: bold;





    }



/* Ende 200126 <<<<*/




.flag-group {

padding: 15px ;

    }





.flag-group img {

    top: 0px !important;    

    width: 30px !important;

    height: 18px !important;

    display: inline-block !important;    

    border: 1px solid #999 !important;  

    object-fit: cover !important;    

    margin: 0 1px !important;

    vertical-align: middle !important;

   

}













.color-h {

    color: #007bff; /* Ein kräftiges Blau */

}



.color-it {

    color: #ff0000; /* Ein klares Rot */

}



.text-small {

    font-size: 28px;

    color: white; /* irgendwas */

    font-weight: normal;

}







/* Base */



body {

    margin: 0;

    font-family: Georgia, "Times New Roman", serif;

    color: #111;

    background: #fff;

}





/* Topbar */




/* 5. DER SCHWARZE LOGO-BEREICH (NAHTLOS DARUNTER) */

.logo-area {

    font-family: 'Inter', sans-serif;

    background-color: #000000;

    width: 100%;

    padding: 5px 0;

    text-align: center;

     color: white;

    margin: 0; /* Verhindert Spalten zwischen den Balken */

}














.language-switcher a::after {

    content: "" !important;

    display: none !important;

}



.language-switcher img {

    top: 0px !important;    

    width: 30px !important;

    height: 18px !important;

    display: inline-block !important;

   

   

    border: 1px solid #999 !important;

   

   

    object-fit: cover !important;

   

   

    margin: 0 5px !important;

    vertical-align: middle !important;

}







.flag-link img {

    width: 30px;        

    height: 20px;      

    object-fit: cover;  

   

   

    border: 1px solid #333;

    border-radius: 2px;    

   

    display: block;

    transition: all 0.2s ease-in-out;

}





.flag-link:hover img {

    border-color: #1e90ff;

    transform: scale(1.05);

    box-shadow: 0 2px 4px rgba(0,0,0,0.2);

}







.flag-link img {

    width: 28px;

    height: auto;

    border: 1px solid #eee;

    display: block;

    cursor: pointer;

    transition: transform 0.2s;

}









.flag-link:hover img {

    transform: scale(1.1);

    border-color: #bbb;

}



.pipe {

    color: #999;

    margin: 0 5px;

    font-size: 1.2rem;

    user-select: none; /* Nicht markierbar */

}



a {

    color: #000;

    text-decoration: underline;

}



.star {

    font-size: 1.4rem;

    margin-bottom: 10px;

}







/* Hero */



.hero {

    text-align: center;

    max-width: 900px;

    margin: 20px auto;

    padding: 3px 20px;

}



.hero h1 {

    font-size: 2.2rem;

    margin-bottom: 10px;

}



.hero p {

    font-size: 0.95rem;

    line-height: 1.6;

}



/* Two column sections */









/* Der Stern/Haken bekommt eine feste Breite, damit er nicht schrumpft */

.star {

    flex-shrink: 0;

    width: 20px;           /* Breite des Icons/Sterns */

    text-align: center;

}



/* Der Link-Text bekommt seinen eigenen Block */

.h2-link {

    display: block;        /* Sorgt dafür, dass der Link den restlichen Platz einnimmt */

    text-decoration: none;

    color: inherit;        /* Übernimmt die Farbe vom H2 */

    line-height: 1.3;      /* Optimale Lesbarkeit bei Umbrüchen */

}


/* --- 1. DAS ALIGNMENT (STERN LINKS, TEXT RECHTS) --- */

.two-col h2 {
    display: flex;            /* Macht Stern und Text zu Spalten */
    align-items: flex-start;  /* Stern bleibt oben an der ersten Zeile kleben */
    gap: 15px;                /* Abstand zwischen Stern und Text */
    margin-bottom: 20px;
    text-align: left;         /* Wichtig für Desktop */
}

.star {
    flex-shrink: 0;           /* Stern darf nicht schrumpfen */
    width: 25px;              /* Feste Breite für die "Stern-Spalte" */
    font-size: 1.5rem;
    color: #c5a059;           /* Dein Gold/Grün Ton */
    line-height: 1;           /* Zentriert den Stern optisch zur ersten Textzeile */
}

.h2-link {
    display: block;           /* Erzeugt einen eigenen Textblock */
    text-decoration: none;
    color: inherit;
    line-height: 1.2;
    /* Falls der Text umbricht, bleibt er nun sauber in seiner Spalte! */
}

/* --- 2. DIE FLUIDE SKALIERUNG (4K & MOBILE) --- */

.two-col {
    display: flex;
    align-items: center;
    gap: 60px;
    margin: 80px auto;
    width: 90%;               /* Nutzt auf 4K fast die ganze Breite */
    max-width: 1400px;        /* Aber begrenzt es auf ein gesundes Maß */
    padding: 0 20px;
}

/* Flex-Basis für 50/50 Aufteilung */
.two-col .text, 
.two-col .image {
    flex: 1;
}

.two-col .image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
    object-fit: cover;
}

/* --- 3. HANDY HANDLING (RESPONSIVE) --- */

@media (max-width: 768px) {
    .two-col, .two-col.reverse {
        flex-direction: column !important; 
        gap: 30px;
        text-align: left;     /* Behält Linksbündigkeit bei */
    }

    .two-col.reverse .image {
        order: 2;             /* Bild nach unten */
    }

    .two-col .text {
        order: 1;             /* Text nach oben */
    }

    .two-col h2 {
        font-size: 1.5rem;    /* Kleinere Schrift auf Handy */
    }
}

/* --- 4. LIST-STYLING (HAKEN) --- */

.two-col ul {
    list-style: none;
    padding: 0;
}

.two-col li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 15px;
    font-size: 1rem;
    line-height: 1.4;
}

.two-col li::before {
    content: "\2713";         /* Der Haken */
    color: #c5a059;
    font-weight: bold;
    flex-shrink: 0;
}









/* Quote */



.quote {

    background: linear-gradient(90deg, #000, #111);

    color: #fff;

    padding: 90px 20px;

    text-align: center;

}



.quote p {

    font-size: 1.3rem;

    font-style: italic;

    max-width: 900px;

    margin: auto;

}



.quote span {

    display: block;

    margin-top: 20px;

    font-size: 0.8rem;

}



/* CTA */



.cta {

    max-width: 600px;

    max-height: 250px;

    margin: auto ;

    background: #fff;

    border-radius: 16px;

    padding: 200px 200px;

    text-align: center;

    box-shadow: 0 1px 1px rgba(0,0,0,0.05);

}



.cta h2 {

    font-size: 1.2rem;

    margin-bottom: 10px;

}



.cta img {

    width: 200px;

    margin-top: 20px;

}



/* Footer */



footer {

    background: #000;

    color: #fff;

    padding: 50px 20px;

}



.footer-grid {

    max-width: 1000px;

    margin: auto;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 40px;

    font-size: 0.85rem;

}













/* Container für die Nebeneinander-Ansicht */

.cta-container {

    margain: auto;

    padding: 30px ;

    display: flex;

    justify-content: center;

    gap: 20px;

    flex-wrap: wrap; /* Umbruch auf dem Handy */

    background-color: white; /* Falls der Hintergrund der Seite schon passt */

}



/* Die Boxen-Stile */

.cta {

    flex: 1;

   

    background: #fff;

    border-radius: 16px;

    padding: 0px;

    text-align: center;

    box-shadow: 0 0px 0px rgba(0, 0, 0, 0);

}



/* --- GETRENNTE LOGO-PARAMETER --- */



/* YouTube Logo Größe */

.yt-link img {

    height: 65px !important; /* Hier nur für YouTube ändern */

    width: auto !important;

    margin: 0 auto;

}



/* Catawiki Logo Größe */

.catawiki-link img {

    height: 50px !important; /* Hier nur für Catawiki ändern */

    width: auto !important;

    margin: 0 auto;

}



/* Hover-Effekt für beide */

.cta a:hover img {

    transform: scale(1.05);

    transition: transform 0.2s ease;

}

/* 31.03.2026 */

/* ============================================================
   MOBILE-READY PAKET (Smartphone-Liga)
   ============================================================ */

@media (max-width: 768px) {
    
    /* 1. Header & Logo: Platz sparen */
    header {
        padding: 10px 0 !important;
    }
    .logo-area img {
        height: 35px !important; /* Logo kleiner, damit mehr Content sichtbar ist */
        width: auto;
    }
    .top-header-bar {
        font-size: 11px; /* Kleinere Schrift für Home/Shop/Flaggen */
        padding: 5px;
    }

    /* 2. Kategorien: Horizontaler Swipe statt Quetschung */
    /* Ersetze .collection-nav durch deine tatsächliche Klasse */
    .collection-nav, .category-bar { 
        display: flex !important;
        overflow-x: auto; 
        white-space: nowrap;
        gap: 10px;
        padding: 10px 15px !important;
        background: #f8fafc;
        -webkit-overflow-scrolling: touch; /* Flüssiges Scrollen auf iPhone */
        scrollbar-width: none; /* Versteckt Scrollbar auf Firefox */
    }
    .collection-nav::-webkit-scrollbar { display: none; } /* Versteckt Scrollbar auf Chrome */

    /* 3. Titel & Sortierung: Untereinander statt nebeneinander */
    .collection-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 20px 15px !important;
    }
    .collection-header h1 {
        font-size: 24px !important;
        margin-bottom: 10px;
    }
    .sort-box, .filter-select {
        width: 100% !important; /* Volle Breite für einfaches Tippen */
        max-width: none !important;
    }

    /* 4. Produkt-Grid: 2 Spalten wirken oft edler als 1 */
    .product-grid {
        grid-template-columns: 1fr 1fr !important; /* Zwei Produkte nebeneinander */
        gap: 10px !important;
        padding: 10px !important;
    }

    /* 5. Produkt-Karten: Texte anpassen */
    .product-card {
        padding: 10px !important;
    }
    .product-card h3 {
        font-size: 14px !important; /* Name etwas kleiner */
        height: 40px; /* Einheitliche Höhe für Symmetrie */
        overflow: hidden;
    }
    .product-card .price {
        font-size: 16px !important;
        font-weight: 800;
    }

    /* 6. Buttons: "Dicke Daumen" freundlich */
    .buy-button, .btn-primary {
        width: 100% !important;
        padding: 15px !important;
        font-size: 16px !important;
        text-align: center;
    }

    /* 7. Abstände generell reduzieren */
    section {
        padding: 20px 0 !important;
    }
}