*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
}

.wrapper{
    max-width: 100%;
    background-color: #fff;
    overflow-x: hidden; /* Verhindert horizontales Scrollen generell */
}

.container{
    max-width: 540px;
    margin: 0 auto;
    padding-top: 8rem;
    padding-bottom: 5vh; /* Fügt 5% des Viewport-Platzes unten hinzu */
    text-wrap: balance;
}

/* NEU: Abstand zwischen Sektionen im Container (erfüllt die Anforderung des Abstands zwischen Intro und Hero) */
/* Dieser Abstand ahmt den Rand nach (margin: auto wirkt hier nicht, padding wird genutzt) */
.container section {
    margin-bottom: 0; /* Feste Abstände zwischen den Hauptsektionen */
    /* Der Abstand orientiert sich am padding-top von 8rem für Konsistenz */
}

li{
    color: #12121266; /* Ihre gewünschte Farbe */
    line-height: 160%; /* Ihre gewünschte Zeilenhöhe */
    font-size: 1rem; /* Ihre gewünschte Schriftgröße */
    font-weight:400;
}

p{
    color: #12121266; /* Ihre gewünschte Farbe */
    line-height: 160%; /* Ihre gewünschte Zeilenhöhe */
    font-size: 1rem; /* Ihre gewünschte Schriftgröße */
    font-weight:400;
}

a{
    color: #12121266;
    text-underline-offset: 0.2rem;
    font-size: 1rem;
    text-decoration-color: #12121211;
    text-decoration-thickness: 1px;
}

a:hover{
    color: #121212;
}

.light{
    font-size: 14px;
    color: #12121266;
    line-height: 160%;
    font-weight:400;
}

/* ********** intro ******** */

.intro{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1.01rem;
    color: #12121266;
    overflow: hidden; 
    
}

.intro>p{
    line-height: 1.5rem;
    font-size: 1rem;
    font-weight: 400;}

.intro>ul{
    display: flex;
    gap: 0.5rem;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

.white {
    color: #fff;
    font-size: 1rem;
    font-weight: 400;
}

.black {
    color: #121212;
    font-size: 1rem;
    font-weight: 400;
}

/* ********** headline (Ihr spezifischer Bereich) ******** */

.headline{
    margin: 2rem 0 0 0; 
    background-image: url('https://sexlicht.de/images/sexlicht_005.jpg'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 670px;
}

.headline>p{
    font-weight: 400;
    color: #12121266;
    line-height: 1.6rem;
}


/* ********** FINAL KONSOLIDIERTES CSS ********* */

/* 1. Der Flex-Container (Berücksichtigt die Gesamtbreite und den Abstand) */
.product-widget {
    display: flex;
    gap: 10px; /* Abstand zwischen den Feldern */
    width: 100%; 
    
    /* Setzt die Gesamtbreite auf max. 540px und zentriert */
    max-width: 540px; 
    margin: 0 auto;
    padding: 10px 0;
}

/* 1. Textfeld (Info-Bereich: 40% Breite, inkl. Höhenanpassung) */
.widget-info {
    /* Breitenberechnung 40% */
    width: calc(40% - 7px);
    flex-shrink: 0; 
    flex-grow: 0;
    
    background-color: white;
    color: #12121266;
    /* Vertikales Padding zur Höhenangleichung (Höhe ca. 40px) */
    padding: 8px 10px; 
    border: 1px solid #12121266; 
    border-radius: 30px; 
    
    display: flex; 
    justify-content: space-between;
    align-items: center;
}

/* 2. Mengenauswahl-Feld (20% Breite) */
.widget-quantity {
    /* Breitenberechnung 20% */
    width: calc(20% - 6px);
    flex-shrink: 0; 
    flex-grow: 0;
    
    display: flex;
    align-items: center;
    justify-content: center; 
    
    background-color: white;
    border: 1px solid #12121266;
    border-radius: 30px; 
    height: 40px; /* Einheitliche Höhe */
}

/* Style für das Label ("Anzahl:") */
.widget-quantity label {
    font-size: 14px;
    margin-right: 5px;
    color: #12121266; /* Leicht graue Schriftfarbe */
}

/* Style für das Dropdown-Element selbst */
.widget-quantity select {
    padding: 4px 0px;
    border: none;
    background-color: white; /* Weißer Hintergrund des Dropdowns */
    max-width: 80%; 
    color: #12121266; /* Schwarze Schriftfarbe des ausgewählten Wertes */
    font-size: 1rem;
}

/* 3. PayPal-Button (40% Breite, Gelber Hintergrund und Umrandung) */
.widget-paypal {
    /* Breitenberechnung 40% */
    width: calc(40% - 7px); 
    flex-shrink: 0; 
    flex-grow: 0;
    
    /* Umrandung und abgerundete Ecken */
    border: 1px solid #12121266; 
    border-radius: 30px; 
    
    /* Zentriert den Inhalt (Logo/Text) */
    display: flex;
    align-items: center; 
    justify-content: center;
    
    height: 40px; /* Einheitliche Höhe */
    padding: 0 10px; 
    
    /* Der Gelbe Hintergrund kommt von .paypal-button-yellow */
}

/* Style für den Gelben PayPal-Hintergrund (muss von Ihnen bereitgestellt werden) */
.paypal-button-yellow {
    background-color: #FFC439 !important; /* PayPal Gelb */
}
.paypal-button-yellow:hover {
    background-color: #FFB719; 
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* Logo-Anpassung im PayPal-Button */
.widget-paypal .logo-icon {
    max-height: 25px; 
    width: auto;
    margin-right: 0; 
}
/* ********** projects ******** */

.projects{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.1rem;
    width: 100%;
    background-color: white;
}

.projects>div{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin: 0.5rem 0 0.5rem 0;
}

.projects>p{
    color: #12121266;
    line-height: 160%;
    font-size: 1rem;
    font-weight:400;
    margin: 0 0 1rem 0;
}

.projects>div>p:first-child{
    color: #121212;
    font-size: 1rem;
    font-weight: 400;
    line-height: 160%;
    margin: 0 0 1rem 0;
}

.projects>img{
    width: 100%;
    margin-top: 2rem;
}

/* Der Footer-Container, der die Links und das Copyright umschließt */
.footer {
    max-width: 540px; 
    margin: 4rem auto 0 auto; /* Positioniert den Footer unter dem Inhalt */
    padding: 0;
    display: flex;
    flex-direction: column; 
}

/* Die Liste der Links im Footer */
.footer ul {
    display: flex;
    justify-content: flex-start;
    gap: 20px;                 
    list-style: none;
    padding: 0;
    margin: 0; 
}

/* Standardfarbe für alle Links im Footer festlegen */
/* Wir erzwingen die Farbe mit !important */
footer ul li a {
    color: #12121266 !important;
    transition: color 0.3s ease; 
}

.footer ul li a:visited {
    color: #12121266 !important;
}

.footer ul li a:hover,
.footer ul li a:active,
.footer ul li a:focus,
.footer ul li a.active-link { 
    color: #121212 !important;
}

/* ********** imprint & contact Sektionen ******** */

/* Zusammenfassung der Styles für beide Sektionen (#imprint, #contact) */
#imprint, #contact {
    display: none; /* Standardmäßig versteckt */
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2rem;
    margin-top: 0.5rem;
    margin-bottom: 4rem;
    max-width: 540px; /* Stellt sicher, dass sie die gleiche Breite wie der Footer haben */
    margin-left: auto;
    margin-right: auto;
}

#imprint.expanded, #contact.expanded {
  display: flex;
}

/* Allgemeine Typografie-Styles für beide Sektionen (zusammengefasst) */
#imprint > div > :first-child, 
#contact > div > :first-child {
    color: #121212;
    font-weight: 400;
    line-height: 160%;
    font-size: 1rem;
}

#imprint > div > p, 
#contact > div > p {
    color: #12121266;
    line-height: 160%;
    font-size: 1rem;
    font-weight: 400;
}

#imprint a:hover, 
#contact a:hover {
    text-decoration-color: #12121266;
}


/* ********** responsiveness ******** */

/* Media Query für Viewports bis 600px Breite (Deckung von 600x960dp) */
@media screen and (max-width: 600px) {
    /* Container und Footer nehmen die volle Breite ein und haben Padding */
    .container {
        width: 100%; 
        padding-left: 0.8rem;
        padding-right: 0.8rem;
        box-sizing: border-box; /* Stellt sicher, dass Padding und Breite korrekt berechnet werden */
    }
    
    /* Auf kleinen Screens brauchen Sektionen/Container vielleicht weniger Abstand */
    .container section {
        margin-bottom: 1.5rem; 
    }
}

/* Media Query für sehr kleine Bildschirme (320px x 568dp) */
@media screen and (max-width: 320px) {
    
    .footer ul {
        display: flex;
        flex-wrap: wrap;       /* Erlaubt den Umbruch */
        gap: 20px;              /* Reduzierter Abstand zwischen Elementen */
        width: 100%;           /* Stellt sicher, dass die UL die volle Breite hat */
        justify-content: flex-start; /* **ÄNDERUNG: Richtet Elemente linksbündig aus** */
        padding: 0;            /* Entfernt Standard-Padding von ULs */
        margin: 0;             /* Entfernt Standard-Margin von ULs */
        list-style: none;      /* Entfernt eventuelle Listpunkte */
    }

    /* Setzt die Listenelemente auf eine flexible Basis */
    .footer ul li {
        /* flex-basis ändert sich automatisch, wir brauchen kein fixes flex */
        /* margin-right: 8px; // Wenn Sie gap nicht verwenden wollen */

    }

    /* Eventuelle Padding oder Margins in den Links selbst prüfen und anpassen */
    .footer ul li a {
        padding: 0; /* Kein zusätzliches Padding, um Platz zu sparen */
        white-space: nowrap; /* Verhindert, dass ein einzelner Link umbricht */
    }
  
}


@media only screen and (max-width: 1024px) and (orientation: landscape){
    /* Diese Regel versteckt fast alles im Landscape Modus auf Tablets. */
    .wrapper, .container, .header, .headline, .intro, .carousel, .workinprogress, .projects, .prodcuts, .archive, .footer, .personal-projects, .products-projects, .archive-projects, .footer-projects, .imprint, .imprint-footer, .projects-end, .projects-last, .pinterest-container {
        display: none;
    }
}