/* ==========================================================================
   Cleio Press – responsive Feinschliff
   Ergaenzt bootstrap_theme/bootstrap.css und blocks.css (zuletzt geladen).
   ========================================================================== */

/* Nichts darf horizontal aus dem Viewport laufen. */
body {
    overflow-x: hidden;
}

/* Nur die Breite deckeln - ein globales height:auto wuerde Grafiken mit
   bewusst gesetztem height-Attribut (z.B. das Logo im Kontaktblock) skalieren. */
img {
    max-width: 100%;
}

.site-logo img,
.hero-mark img,
.carousel-item img {
    height: auto;
}

/* --- Navigation ------------------------------------------------------- */
/* Das Logo ist mit 343px fix ausgezeichnet und sprengt schmale Displays. */
.site-logo img {
    width: 343px;
    max-width: 100%;
}

@media (max-width: 575.98px) {
    .site-logo img {
        width: 230px;
    }
}

/* --- Hero ------------------------------------------------------------- */
/* Der negative Rand gleicht nur im zweispaltigen Layout aus. */
.hero-copy {
    margin-top: -27px;
}

.hero-mark img {
    max-width: 440px;
}

@media (max-width: 991.98px) {
    .hero-copy {
        margin-top: 0;
    }

    /* Untereinander gestapelt wirkt das Signet sonst uebergross. */
    .hero-mark img {
        max-width: 260px;
    }
}

/* --- Buchvorstellung -------------------------------------------------- */
/* Gestapelt (unter 768px) wuerde das Cover sonst die volle Breite einnehmen. */
.book-media .carousel {
    margin-left: auto;
    margin-right: auto;
    max-width: 320px;
}

@media (min-width: 768px) {
    .book-media .carousel {
        max-width: none;
    }
}

/* Zwischen 768 und 991px ist die Textspalte so schmal, dass das "New"-Badge
   in eine eigene Zeile rutscht - eine Stufe kleiner haelt es in der Titelzeile. */
@media (max-width: 991.98px) {
    .book-title,
    .book-author {
        font-size: 1.35rem;
    }
}

/* Die Pfeile liegen auf hellem Cover sonst kaum sichtbar auf. */
.book-media .carousel-control-prev-icon,
.book-media .carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.45);
    border-radius: 50%;
    padding: 0.75rem;
    background-size: 50% 50%;
}

/* --- Kontakt ---------------------------------------------------------- */
/* w-75 laesst den Block auf dem Handy unnoetig schmal werden. */
@media (max-width: 991.98px) {
    .contact-row.w-75 {
        width: 100% !important;
    }
}

/* --- Abstaende -------------------------------------------------------- */
/* pt-5/pb-5 addieren sich auf kleinen Schirmen zu sehr langen Leerraeumen. */
@media (max-width: 575.98px) {
    /* Ohne das Signet steht unter dem Manifest-Text sonst viel Schwarz. */
    .hero .container.pb-5 {
        padding-bottom: 0 !important;
    }

    section.pt-5 {
        padding-top: 2rem !important;
    }

    section.pb-5 {
        padding-bottom: 2rem !important;
    }

    .container.pt-4 {
        padding-top: 1rem !important;
    }

    .container.pb-4 {
        padding-bottom: 0.5rem !important;
    }

    .container.pb-5 {
        padding-bottom: 1.5rem !important;
    }
}