/* WHITEGOAT MAIN
   Inhalt der Startseite (Rotburg-Carousel). Grundstruktur, Tokens, Header/Footer: whitegoat-base.css */

/**************************************************************/
/* MAIN (vor Footer, Mudd-Layer und Dust) */
/**************************************************************/
main {
    position: relative;
    z-index: 80;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 48px;
    pointer-events: none; /* main reicht bis unter den Footer, Footer-Links bleiben klickbar */
}

main .carousel {
    pointer-events: auto;
}

.kicker {
    margin-top: 11px;
    letter-spacing: 0.22em;
    font-size: 18px;
    font-weight: 700;
    color: #d7d7dc;
    margin-bottom: 35px;
}

/**************************************************************/
/* CAROUSEL */
/**************************************************************/
.carousel {
    position: relative;
    width: min(1120px, calc(100vw - 120px));
    max-width: 1120px;
    height: 680px;
    margin-bottom: 3rem;
    margin-top: -2rem;
    overflow: visible;
}

.card {
    position: absolute;
    top: 24px;
    width: 360px;
    height: 540px;
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: transform 0.45s ease, opacity 0.45s ease, border-color 0.45s ease;
    overflow: hidden;
}

.card.prev {
    left: 56px;
    transform: translateY(16px);
    z-index: 1;
    opacity: 0.92;
}

.card.next {
    right: 56px;
    transform: translateY(16px);
    z-index: 1;
    opacity: 0.92;
}

/* Schatten-Puls im Rhythmus von ambient-puls (9.6s) + subtiles Flackern (9s ist teilerfremd) */
.card.current {
    left: 50%;
    top: 0;
    transform: translateX(-50%) translateY(-10px);
    z-index: 3;
    box-shadow: 0 0 0 2px rgba(211, 19, 27, 0.35), 0 30px 60px rgba(0, 0, 0, 0.6);
    cursor: pointer;
    animation:
        current-shadow-puls 9.6s ease-in-out infinite,
        current-flicker 9s linear infinite;
}

.card[aria-disabled="true"] {
    cursor: default;
}

.cover {
    height: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
    background: #0b0b0d;
    color: #fff;
}

.buch {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.buch-bild {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.label {
    letter-spacing: 0.08em;
    pointer-events: none;
    font-size: clamp(22px, 2vw, 36px);
    font-family: var(--font-family);
    color: var(--color-text-active);
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
    text-shadow: -6px 0 12px #230404;
    position: absolute;
    top: auto;
    bottom: 8px;
    z-index: 39;
}

.label.prev {
    left: 56px;
    width: min(360px, 30%);
}

.label.next {
    right: 56px;
    width: min(360px, 30%);
}

.label.current {
    left: 50%;
    top: 546px; /* 16px unter der aktuellen Card (endet bei 530px), auf allen Breiten gleich */
    bottom: auto;
    margin: 0; /* sonst addiert der Standard-p-Abstand (1em) zum Card-Abstand */
    width: min(360px, 90vw);
    font-size: 28px; /* feste Größe statt clamp() aus .label */
    line-height: 1.15;
    text-wrap: balance; /* lange Titel umbrechen in gleich lange Zeilen */
    transform: translateX(-50%);
    color: var(--text-color-active);
}

.arrow {
    position: absolute;
    top: 300px;
    width: 46px;
    height: 46px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 34px;
    cursor: pointer;
    z-index: 6;
    opacity: 0.55;
}

.arrow:hover {
    opacity: 1;
}

.arrow.prev {
    left: 0;
}

.arrow.next {
    right: 0;
}

.claim {
    position: fixed;
    left: 50%;
    bottom: calc(var(--footer-reserved-height) + 18px);
    z-index: 70;
    display: none;
    width: min(44vw, 15rem);
    max-width: calc(100vw - 32px);
    transform: translateX(-50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.claim.is-active {
    opacity: 1;
}

.claim__image {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 14px rgba(0, 0, 0, 0.55));
}







/**************************************************************/
/* QUOTE (passend zum aktuellen Cover) */
/**************************************************************/
main .quote {
    box-sizing: border-box;
    width: min(32rem, calc(100vw - 48px));
    margin: -125px 0 24px;
    font-family: var(--font-family);
    font-size: clamp(2rem, 1.3vw, 1.35rem);
    line-height: 1.2;
    letter-spacing: 0.035em;
    color: rgba(215, 215, 220, 0.72);
    text-align: center;
    text-transform: uppercase;
    text-wrap: balance;
    overflow-wrap: anywhere;
    transition: opacity 0.22s ease;
}

main .quote[hidden] {
    display: none;
}

main .quote::before {
    content: "„";
    margin-right: 0.08em;
    color: var(--color-button-text-active);
    font-size: 1.35em;
    line-height: 0;
}

main .quote::after {
    content: "“";
    margin-left: 0.08em;
    color: var(--color-button-text-active);
    font-size: 1.35em;
    line-height: 0;
}

main .quote.quote--is-changing {
    opacity: 0;
}
/* =============================================================================
   HOME / KARUSSELL
   ============================================================================= */

@media (max-width: 1400px) {
    main:has(.carousel) {
        box-sizing: border-box;
        min-height: calc(100dvh - var(--bar-height) - var(--footer-reserved-height));
        margin-top: var(--bar-height);
        justify-content: center;
    }
}

@media (max-width: 1180px) and (orientation: landscape) {
    main:has(.carousel) {
        --home-card-width: min(calc(100vw - 120px), 30rem);
        --home-card-height: min(440px, calc(100dvh - 1px));
        --home-carousel-height: calc(var(--home-card-height) + 70px);
        --home-label-top: calc(var(--home-card-height) + 14px);
        padding-top: clamp(32px, 8vh, 54px);
        padding-bottom: calc(var(--footer-reserved-height) + 1rem);
    }

    .kicker {
        margin: 0 0 10px;
        font-size: 13px;
        text-align: center;
    }

    .kicker h1 {
        display: none;
    }

    .carousel {
        width: var(--home-card-width);
        height: var(--home-carousel-height);
        margin-bottom: 0;
    }

    .card {
        top: 0;
        width: var(--home-card-width);
        height: var(--home-card-height);
    }

    .card.prev,
    .card.next,
    .label.prev,
    .label.next {
        display: none;
    }

    .card.current {
        top: 0;
        transform: translateX(-50%);
    }

    .label {
        font-size: clamp(15px, 2vw, 22px);
    }

    .label.current {
        top: var(--home-label-top);
        width: var(--home-card-width);
        font-size: clamp(17px, 1.8vw, 20px);
    }

    .arrow {
        top: calc((var(--home-card-height) - 44px) / 2);
        width: 44px;
        height: 44px;
        font-size: 30px;
    }

    .arrow.prev {
        left: -26px;
    }

    .arrow.next {
        right: -26px;
    }

    .claim {
        display: none;
    }

    .ambientLeuchten {
        width: 86%;
        height: clamp(160px, 28vw, 240px);
        top: 42%;
    }

    main:has(.carousel) .quote {
        width: min(24rem, calc(100vw - 48px));
        margin: 0 0 calc(var(--footer-reserved-height) + 1rem);
        font-size: clamp(0.85rem, 1.8vw, 1.05rem);
        line-height: 1.15;
    }
}

@media (min-width: 1181px) and (max-width: 1400px) and (min-height: 680px) and (max-height: 980px) and (orientation: landscape) {
    main:has(.carousel) {
        padding-top: 48px;
    }

    .kicker h1 {
        display: none;
    }

    .carousel {
        width: min(calc(100vw - 84px), 1040px);
        height: 500px;
    }

    .card {
        top: 12px;
        width: 256px;
        height: 384px;
    }

    .card.prev {
        left: 52px;
    }

    .card.next {
        right: 52px;
    }

    .label {
        font-size: clamp(18px, 1.5vw, 26px);
    }

    .label.prev,
    .label.next {
        width: 256px;
    }

    .label.prev {
        left: 52px;
    }

    .label.next {
        right: 52px;
    }

    .label.current {
        top: 396px;
        width: 256px;
        font-size: 20px;
    }

    .arrow {
        top: 198px;
    }
}

@media (min-width: 1320px) and (max-width: 1395px) and (min-height: 880px) and (max-height: 940px) and (orientation: landscape) {
    main:has(.carousel) {
        padding-top: 28px;
        justify-content: flex-start;
    }

    .kicker {
        margin: 0 0 18px;
        font-size: 18px;
        letter-spacing: 0.2em;
        text-align: center;
    }

    .kicker h1 {
        display: block;
        margin: 0;
        line-height: 1;
    }

    .carousel {
        margin-top: 3rem;
        width: min(calc(100vw - 120px), 1100px);
        height: 620px;
        margin-bottom: 0;
    }

    .card {
        top: 12px;
        width: 294px;
        height: 441px;
    }

    .card.prev,
    .card.next,
    .label.prev,
    .label.next {
        display: block;
    }

    .card.prev {
        left: 120px;
        transform: translateY(14px);
    }

    .card.next {
        right: 120px;
        transform: translateY(14px);
    }

    .card.current {
        top: 0;
        transform: translateX(-50%);
    }

    .label {
        font-size: clamp(21px, 1.9vw, 30px);
    }

    .label.prev,
    .label.next {
        width: 294px;
    }

    .label.prev {
        left: 120px;
    }

    .label.next {
        right: 120px;
    }

    .label.current {
        top: 457px;
        width: 294px;
        font-size: 24px;
    }

    .arrow {
        top: 214px;
        width: 48px;
        height: 48px;
        font-size: 32px;
    }

    .arrow.prev {
        left: 22px;
    }

    .arrow.next {
        right: 22px;
    }

    .ambientLeuchten {
        width: 94%;
        height: clamp(260px, 34vw, 340px);
        top: 41%;
    }

    main:has(.carousel) .quote {
        width: min(36rem, calc(100vw - 96px));
        margin: -84px 0 calc(var(--footer-reserved-height) + 1.25rem);
        font-size: clamp(1.5rem, 2vw, 1.9rem);
        line-height: 1.18;
    }
}

@media (max-width: 900px) {
    main:has(.carousel) {
        --home-card-width: min(calc(100vw - 64px), 18rem);
        --home-card-height: 432px;
        --home-carousel-height: 520px;
        --home-label-top: 442px;
        padding-top: 86px;
    }

    .kicker {
        margin: 14px 0 18px;
        font-size: 16px;
        text-align: center;
    }

    .carousel {
        width: var(--home-card-width);
        height: var(--home-carousel-height);
        margin-bottom: 0;
    }

    .card {
        top: 0;
        width: var(--home-card-width);
        height: var(--home-card-height);
    }

    .card.prev,
    .card.next,
    .label.prev,
    .label.next {
        display: none;
    }

    .card.current {
        transform: translateX(-50%);
    }

    .label.current {
        top: var(--home-label-top);
        width: var(--home-card-width);
        font-size: 21px;
    }

    .arrow {
        top: 198px;
        width: 64px;
        height: 64px;
        font-size: 38px;
    }

    .arrow.prev {
        left: -40px;
    }

    .arrow.next {
        right: -40px;
    }

    .ambientLeuchten {
        width: 92%;
        height: clamp(160px, 52vw, 280px);
    }
}

@media (max-width: 900px) and (orientation: landscape) {
    main:has(.carousel) {
        --home-card-width: min(calc(100vw - 92px), 15rem);
        --home-card-height: min(212px, calc(100dvh - 176px));
        --home-carousel-height: calc(var(--home-card-height) + 44px);
        --home-label-top: calc(var(--home-card-height) + 6px);
        padding-top: 28px;
        padding-bottom: calc(var(--footer-reserved-height) + 1rem);
    }

    .kicker {
        margin: 0 0 8px;
        font-size: 12px;
        letter-spacing: 0.18em;
    }

    .kicker h1 {
        display: none;
    }

    .carousel {
        width: var(--home-card-width);
        height: var(--home-carousel-height);
    }

    .card {
        width: var(--home-card-width);
        height: var(--home-card-height);
    }

    .label.current {
        top: var(--home-label-top);
        font-size: 16px;
    }

    .arrow {
        top: 92px;
        width: 44px;
        height: 44px;
        font-size: 30px;
    }

    .arrow.prev {
        left: -20px;
    }

    .arrow.next {
        right: -20px;
    }

    .ambientLeuchten {
        width: 88%;
        height: clamp(140px, 30vw, 210px);
        top: 42%;
    }

    main:has(.carousel) .quote {
        width: min(22rem, calc(100vw - 48px));
        margin: 0 0 calc(var(--footer-reserved-height) + 1rem);
        font-size: clamp(0.8rem, 2.2vw, 1rem);
        line-height: 1.15;
    }
}

@media (max-width: 649px) {
    main:has(.carousel) {
        --home-card-width: min(calc(100vw - 52px), 16rem);
        --home-card-height: 384px;
        --home-carousel-height: 458px;
        --home-label-top: 392px;
        padding-top: 80px;
    }

    .kicker {
        margin: 12px 0 16px;
        font-size: 15px;
    }

    .label.current {
        font-size: 19px;
    }

    .arrow {
        top: 174px;
        width: 56px;
        height: 56px;
        font-size: 40px;
    }

    .arrow.prev {
        left: -42px;
    }

    .arrow.next {
        right: -42px;
    }

    .ambientLeuchten {
        width: 88%;
        height: 62%;
        top: 40%;
    }
}

@media (max-width: 540px) {
    main:has(.carousel) {
        --home-card-width: min(calc(100vw - 48px), 18.75rem);
        --home-card-height: 450px;
        --home-carousel-height: 522px;
        --home-label-top: 458px;
        padding-top: 74px;
    }

    .kicker {
        margin: 10px 0 14px;
        font-size: 14px;
        letter-spacing: 0.18em;
    }

    .label.current {
        font-size: 17px;
    }

    .arrow {
        top: 206px;
        width: 52px;
        height: 52px;
        font-size: 38px;
    }

    .arrow.prev {
        left: -28px;
    }

    .arrow.next {
        right: -28px;
    }
}

@media (max-width: 400px) {
    main:has(.carousel) {
        --home-card-width: min(calc(100vw - 40px), 20rem);
        --home-card-height: 480px;
        --home-carousel-height: 552px;
        --home-label-top: 488px;
    }

    .arrow {
        top: 222px;
    }

    .arrow.prev {
        left: -18px;
    }

    .arrow.next {
        right: -18px;
    }
}

@media (max-width: 1024px) and (orientation: portrait) {
    main:has(.carousel) {
        --home-card-width: min(calc(100vw - 52px), 23rem);
        --home-card-height: min(calc(var(--home-card-width) * 1.5), calc(100dvh - var(--footer-reserved-height) - 338px));
        --home-carousel-height: calc(var(--home-card-height) + 104px);
        --home-label-top: calc(var(--home-card-height) + 18px);
        padding-top: 68px;
        padding-bottom: calc(var(--footer-reserved-height) + 1.25rem);
    }

    .kicker {
        margin: 4px 0 12px;
        font-size: clamp(14px, 2vw, 16px);
        text-align: center;
    }

    .kicker h1 {
        display: none;
    }

    .carousel {
        width: var(--home-card-width);
        height: var(--home-carousel-height);
        margin-bottom: 0;
    }

    .card {
        top: 0;
        width: var(--home-card-width);
        height: var(--home-card-height);
    }

    .card.prev,
    .card.next,
    .label.prev,
    .label.next {
        display: none;
    }

    .card.current {
        top: 0;
        transform: translateX(-50%);
    }

    .label.current {
        top: var(--home-label-top);
        width: min(calc(var(--home-card-width) - 32px), 17.5rem);
        font-size: clamp(24px, 4.2vw, 32px);
        line-height: 1.02;
    }

    .arrow {
        top: calc((var(--home-card-height) - 56px) / 2);
        width: 56px;
        height: 56px;
        font-size: 38px;
    }

    .arrow.prev {
        left: -34px;
    }

    .arrow.next {
        right: -34px;
    }

    .claim {
        display: none;
    }

    .ambientLeuchten {
        width: 90%;
        height: clamp(180px, 44vw, 300px);
        top: 41%;
    }

    main:has(.carousel) .quote {
        display: block;
        width: min(30rem, calc(100vw - 48px));
        margin: 0 0 calc(var(--footer-reserved-height) + 1.25rem);
        font-size: clamp(1.15rem, 3.8vw, 1.65rem);
        line-height: 1.14;
        letter-spacing: 0.03em;
    }
}

@media (max-width: 649px) and (orientation: portrait) {
    main:has(.carousel) {
        --home-card-width: min(calc(100vw - 44px), 21rem);
        --home-card-height: min(calc(var(--home-card-width) * 1.5), calc(100dvh - var(--footer-reserved-height) - 322px));
        --home-carousel-height: calc(var(--home-card-height) + 98px);
        --home-label-top: calc(var(--home-card-height) + 14px);
        padding-top: 64px;
    }

    .label.current {
        width: min(calc(var(--home-card-width) - 24px), 17rem);
        font-size: clamp(26px, 6.6vw, 32px);
    }

    .arrow {
        width: 52px;
        height: 52px;
        font-size: 36px;
    }

    .arrow.prev {
        left: -28px;
    }

    .arrow.next {
        right: -28px;
    }

    main:has(.carousel) .quote {
        width: min(22rem, calc(100vw - 36px));
        font-size: clamp(1.25rem, 5.1vw, 1.55rem);
        line-height: 1.12;
    }
}

@media (max-width: 540px) and (orientation: portrait) {
    main:has(.carousel) {
        --home-card-width: min(calc(100vw - 36px), 20rem);
        --home-card-height: min(calc(var(--home-card-width) * 1.5), calc(100dvh - var(--footer-reserved-height) - 308px));
        --home-carousel-height: calc(var(--home-card-height) + 92px);
        --home-label-top: calc(var(--home-card-height) + 12px);
        padding-top: 52px;
    }

    .label.current {
        width: min(calc(var(--home-card-width) - 12px), 16.5rem);
        font-size: clamp(24px, 7vw, 30px);
    }

    .ambientLeuchten {
        width: 80%;
        height: clamp(140px, 36vw, 210px);
        top: 39%;
    }

    main:has(.carousel) .quote {
        width: min(20rem, calc(100vw - 28px));
        font-size: clamp(1.2rem, 5.3vw, 1.45rem);
    }
}

@media (max-width: 400px) and (orientation: portrait) {
    main:has(.carousel) {
        --home-card-width: min(calc(100vw - 28px), 19.5rem);
        --home-card-height: min(calc(var(--home-card-width) * 1.5), calc(100dvh - var(--footer-reserved-height) - 298px));
        --home-carousel-height: calc(var(--home-card-height) + 86px);
        --home-label-top: calc(var(--home-card-height) + 10px);
        padding-top: 46px;
    }

    .label.current {
        width: min(calc(var(--home-card-width) - 8px), 15.75rem);
        font-size: clamp(22px, 7.4vw, 28px);
    }

    .arrow {
        width: 48px;
        height: 48px;
        font-size: 34px;
    }

    .arrow.prev {
        left: -18px;
    }

    .arrow.next {
        right: -18px;
    }

    main:has(.carousel) .quote {
        width: min(18.5rem, calc(100vw - 24px));
        font-size: clamp(1.1rem, 5.6vw, 1.35rem);
    }
}


/* =============================================================================
   COVER-PROPORTION (immer 2:3) + iPad-Hochformat mit 3er-Carousel
   Letzte Regeln der Datei: Breite wird aus der Höhe abgeleitet, nie umgekehrt.
   ============================================================================= */
@media (max-width: 1180px) and (orientation: landscape) {
    main:has(.carousel) {
        --home-card-width: calc(var(--home-card-height) / 1.5);
    }
}

@media (max-width: 1024px) and (orientation: portrait) {
    main:has(.carousel) {
        --hc-max-w: min(calc(100vw - 52px), 23rem);
        --hc-budget: calc(100dvh - var(--footer-reserved-height) - 338px);
        --home-card-height: min(calc(var(--hc-max-w) * 1.5), var(--hc-budget));
        --home-card-width: calc(var(--home-card-height) / 1.5);
    }
}

@media (max-width: 649px) and (orientation: portrait) {
    main:has(.carousel) {
        --hc-max-w: min(calc(100vw - 44px), 21rem);
        --hc-budget: calc(100dvh - var(--footer-reserved-height) - 322px);
    }
}

@media (max-width: 540px) and (orientation: portrait) {
    main:has(.carousel) {
        --hc-max-w: min(calc(100vw - 36px), 20rem);
        --hc-budget: calc(100dvh - var(--footer-reserved-height) - 276px);
        --home-carousel-height: calc(var(--home-card-height) + 84px);
        --home-label-top: calc(var(--home-card-height) + 8px);
    }
}

@media (max-width: 400px) and (orientation: portrait) {
    main:has(.carousel) {
        --hc-max-w: min(calc(100vw - 28px), 19.5rem);
        --hc-budget: calc(100dvh - var(--footer-reserved-height) - 258px);
        --home-carousel-height: calc(var(--home-card-height) + 78px);
        --home-label-top: calc(var(--home-card-height) + 7px);
    }

    .ambientLeuchten {
        width: 76%;
        height: clamp(128px, 34vw, 188px);
        top: 38%;
    }
}

/* iPad mini/Air/Pro im Hochformat: Platz seitlich nutzen, Nachbar-Cover sichtbar */
@media (min-width: 700px) and (max-width: 1024px) and (orientation: portrait) {
    main:has(.carousel) {
        --hc-max-w: calc(min(calc(100vw - 48px), 900px) / 2.33);
        --hc-budget: calc(100dvh - var(--footer-reserved-height) - 300px);
        --home-label-top: calc(var(--home-card-height) + 22px);
        --home-carousel-height: calc(var(--home-card-height) + 110px);
    }

    .carousel {
        width: calc(var(--home-card-width) * 2.33);
        max-width: calc(100vw - 48px);
    }

    .card.prev,
    .card.next {
        display: block;
        top: calc(var(--home-card-height) * 0.11);
        width: calc(var(--home-card-width) * 0.78);
        height: calc(var(--home-card-height) * 0.78);
        transform: none;
        opacity: 0.85;
    }

    .card.prev {
        left: 0;
    }

    .card.next {
        right: 0;
    }

    .label.current {
        width: calc(var(--home-card-width) * 1.4);
        font-size: clamp(26px, 3.6vw, 36px);
    }

    .arrow {
        width: 44px;
        height: 44px;
        font-size: 32px;
        top: calc((var(--home-card-height) - 44px) / 2);
    }

    .arrow.prev {
        left: -24px;
    }

    .arrow.next {
        right: -24px;
    }

    main:has(.carousel) .quote {
        width: min(40rem, calc(100vw - 96px));
        font-size: clamp(1.4rem, 3vw, 2rem);
    }
}