/* Tablet Styles (min-width: 768px) */

body {
    /* Hintergrund könnte hier leicht angepasst werden, wenn gewünscht */
}

/* Header und Hero */
.main-header {
    height: 75vh; /* Etwas höher auf Tablets */
}

.cta-button {
    font-size: calc(1rem + 0.1vw);
    padding: 14px 30px;
}

/* Content Sections */
main {
    padding: 0 30px; /* Mehr seitlicher Abstand */
    max-width: 1100px; /* Maximale Breite für bessere Lesbarkeit */
}

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

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

/* Verbesserte Bildplatzierung neben Text */
/* (Die float-Implementierung aus styles.css funktioniert oft schon, */
/* aber hier könnten auch Grid oder Flexbox verwendet werden) */

.inline-image-left,
.inline-image-right {
    max-width: 40%; /* Etwas weniger Platz auf Tablets */
}

/* Karussell - Mehr Items sichtbar machen */
.carousel {
    /* Ggf. Scrollbar verstecken, wenn Pfeile hinzugefügt werden */
    /* -ms-overflow-style: none; */ /* IE and Edge */
    /* scrollbar-width: none; */ /* Firefox */
}

/* .carousel::-webkit-scrollbar { */ /* Chrome, Safari, Opera */
/*     display: none; */
/* } */

.carousel-item {
    flex: 0 0 45%; /* 2 Items pro Reihe */
    min-height: 400px; /* Etwas höhere Mindesthöhe für Tablets */
    padding: 6px !important; /* Minimaler weißer Rahmen */
}

/* Konsistente Stile für Tablet-Ansicht */
@media (min-width: 768px) {
    .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;
    }
}

.modal-content {
    max-width: 80%;
    border-radius: 15px; /* Stärker abgerundete Ecken */
}

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

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

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

.content-container {
    padding: 70px 40px;
    max-width: 90%;
}

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

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

.content-container p {
    font-size: 1.2em;
    max-width: 85%;
    margin: 0 auto;
}

/* Fazit-Bereich für Tablet */
#fazit {
    padding: 80px 0;
    margin: 60px 0;
}

#fazit h3 {
    font-size: 2.2em;
    margin-bottom: 30px;
    max-width: 80%;
    padding: 20px;
}

#fazit p {
    font-size: 1.3em;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
}

/* Wirkungsprofile für Tablet */
#wirkung-frauen,
#wirkung-maenner {
    padding: 60px 30px;
    margin: 30px 0;
}

/* Bilder und Inhalte */
.content-image {
    max-width: 85%; /* Etwas kleinere Bilder für bessere Proportion */
    border-radius: 12px; /* Stärker abgerundete Ecken */
}

/* Zurücksetzen der speziellen Mobilansicht für das Hormonelles-Gleichgewicht-Bild auf Tablets */
@media (min-width: 768px) {
    img[src*="Hormonelles-Gleichgewicht-und-Menopause.png"] {
        max-width: 45% !important; /* Anpassung auf Standardwert für inline-Bilder */
        width: auto !important;
        margin: 0 0 1em 15px !important; /* Abstand wie bei inline-image-right */
        float: right !important; /* Wieder rechts floaten lassen */
        clear: none !important;
    }
}

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

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

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