/* Desktop Styles (min-width: 1024px) */

body {
    /* Optional: Anderer Hintergrund oder feine Textur für Desktop */
    /* background-image: url('../images/subtle-background.png'); */
}

/* Header und Hero */
.main-header {
    height: 80vh; /* Noch etwas mehr Höhe */
}

/* Entferne alle .hero-text Stile, da er jetzt nicht mehr angezeigt werden soll */
/* .hero-text {
    width: 70%;
    max-width: 900px;
}

.hero-text h2 {
     font-size: 1.8em;
}

.hero-text p {
    font-size: 1.3em;
} */

/* Hero Content Anpassungen */
.hero-content-wrapper {
    padding: 40px;
}

/* Intro-Content-Bereich */
.intro-content {
    padding: 40px;
}

.content-container {
    padding: 90px 60px;
    max-width: 1000px;
}

.content-container h2 {
    font-size: 2.4em;
}

.content-container h3 {
    font-size: 1.9em;
}

.content-container p {
    font-size: 1.3em;
    max-width: 800px;
    margin: 25px auto;
}

/* Content Sections */
main {
    padding: 0 40px; /* Noch mehr seitlicher Abstand */
    max-width: 1400px; /* Größere maximale Breite für Desktop */
}

.content-section {
    padding: 80px 0;
}

/* Container für den Inhalt in Content-Sections */
.content-section > h2,
.content-section > h3,
.content-section > p,
.content-section > article {
    width: 100%;
    box-sizing: border-box;
}

/* Karussell mit fester Anzahl an Items */
.carousel {
    flex-wrap: nowrap; /* Kein Umbruch */
    justify-content: flex-start;
    gap: 30px;
    padding: 30px 20px;
}

.carousel-item {
    flex: 0 0 30%; /* 3 Items pro Reihe */
    max-width: 350px; /* Maximale Breite begrenzen */
    border-radius: 15px; /* Stärker abgerundete Ecken */
    min-height: 450px; /* Höhere Mindesthöhe für Desktop */
    padding: 6px !important; /* Minimaler weißer Rahmen */
}

.carousel-item img {
    min-height: 350px; /* Größere Bilder */
    max-height: 450px; /* Höhere maximale Höhe für größere Screens */
    height: auto; /* Automatische Höhe für Responsivität */
    padding: 2px; /* Minimaler weißer Rahmen */
}

/* Feinere Steuerung der Bildplatzierung */
.inline-image-left,
.inline-image-right {
    max-width: 35%; /* Bilder können etwas kleiner sein im Verhältnis zum Text */
    border-radius: 12px; /* Stärker abgerundete Ecken */
}

/* Artikel nebeneinander darstellen (optional, wenn sinnvoll) */
/* Beispiel: Wirkung Mann/Frau nebeneinander */
/* #wirkungsprofile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
} */

/* #wirkungsprofile > article {
    border-right: 1px solid #eee;
    padding-right: 40px;
} */

/* #wirkungsprofile > article:last-child {
    border-right: none;
    padding-right: 0;
} */

/* Konsistente Stile für Desktop-Ansicht */
@media (min-width: 1024px) {
    .carousel-item img,
    html body main .carousel-section .carousel .carousel-item img,
    #wirkstoffCarousel .carousel-item img,
    div.carousel div.carousel-item img {
        min-height: 350px !important; /* Konsistente Mindesthöhe */
        border-radius: 30px !important;
        padding: 2px !important;
    }
}

/* Responsivere Anpassung für sehr große Bildschirme */
@media (min-width: 1600px) {
    main {
        max-width: 1600px; /* Extra breite für sehr große Bildschirme */
    }
    
    .carousel-item {
        flex: 0 0 23%; /* 4 Items pro Reihe bei sehr großen Bildschirmen */
        max-width: 400px; /* Größere maximale Breite für große Screens */
        padding: 6px !important; /* Minimaler weißer Rahmen */
    }
    
    .carousel-item img,
    html body main .carousel-section .carousel .carousel-item img,
    #wirkstoffCarousel .carousel-item img,
    div.carousel div.carousel-item img {
        min-height: 400px !important; /* Größere Mindesthöhe für sehr große Bildschirme */
        border-radius: 30px !important;
        padding: 2px !important;
    }
}

/* Bei sehr großen Bildschirmen die Schriftgröße zusätzlich leicht erhöhen */
@media (min-width: 1800px) {
    html {
        font-size: calc(18px + 0.3vw); /* Noch größere Basis für sehr große Screens */
    }
    
    main {
        max-width: 1600px; /* Maximale Content-Breite begrenzen */
    }
}

.modal-content {
    max-width: 70%;
    border-radius: 18px; /* Stärker abgerundete Ecken auf Desktop */
}

/* Footer */
.main-footer {
    padding: 50px 40px;
}

/* Fazit-Bereich für Desktop */
#fazit {
    width: 100%;
    max-width: 100%;
    padding: 100px 0;
    margin: 80px 0;
    background-attachment: fixed;
    filter: brightness(1.15); /* Bild noch etwas heller auf großen Bildschirmen */
}

#fazit::before {
    background-color: rgba(44, 62, 80, 0.25); /* Noch transparentere Überlagerung auf großen Bildschirmen */
}

#fazit h3 {
    font-size: 2.8em;
    margin-bottom: 40px;
    padding: 25px;
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
}

#fazit p {
    font-size: 1.5em;
    max-width: 70%;
    margin-bottom: 30px;
    padding: 25px;
    margin-left: auto;
    margin-right: auto;
}

#fazit .cta-button {
    padding: 18px 40px;
    font-size: 1.2em;
}

/* Wirkungsprofile für Desktop */
#wirkung-frauen,
#wirkung-maenner {
    padding: 80px 40px;
    margin: 40px 0;
}

#wirkung-frauen::before,
#wirkung-maenner::before {
    opacity: 0.2; /* Etwas stärkere Darstellung auf größeren Bildschirmen */
    background-attachment: fixed; /* Parallax-Effekt auf Desktop */
}

/* Überschriften für Desktop */
h1 {
    font-size: calc(2.2rem + 1vw);
}

h2 {
    font-size: calc(1.8rem + 0.5vw);
}

h3 {
    font-size: calc(1.6rem + 0.3vw);
}

/* CTA-Button für Desktop */
.cta-button {
    font-size: calc(1.1rem + 0.1vw);
    padding: 16px 35px;
}