/* Produktabschnitte der Landingpage · 0.6.26
   Kacheln und Dialog unverändert aus dem Stufe-3-Modul eingebunden. */
.landingpage {
    position: relative;
    isolation: isolate;
}
.landingpage__inhalte {
    position: relative;
    display: flow-root;
}
.landingpage::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: url("../img/beton-gekachelt.svg") center top / 3840px auto repeat;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .07) 0%, #000 100%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .07) 0%, #000 100%);
}
.landingpage__inhalte > .ars-navigation {
    width: min(calc(100% - 40px), 1140px);
    margin: 0 auto 38px;
}
.landingpage__empfehlungen,
.landingpage__woche,
.landingpage__kategorie {
    width: min(calc(100% - 40px), 1140px);
    margin: 0 auto;
    padding: 48px 0;
    text-align: center;
}
.landingpage__empfehlungen .empfehlungenSlider { display: block; }
.landingpage__empfehlungen .empfehlungenSlider[hidden],
.landingpage__woche [hidden] { display: none; }
.landingpage__empfehlungen .empfehlungenSlider__spur {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    overflow: visible;
    margin: 0;
    padding: 0;
    scroll-snap-type: none;
}
.landingpage__empfehlungen .empfehlungenKachel { min-width: 0; }
.landingpage__empfehlungen .empfehlungenKachel:nth-child(n + 5) { display: none; }
.landingpage__empfehlungen .empfehlungenKachel:focus-visible,
.landingpage__woche a:focus-visible,
.landingpage__kategorie a:focus-visible {
    outline: 3px solid var(--monster-red);
    outline-offset: 4px;
}
.landingpage__woche { padding-top: 24px; }
.landingpage__produkthinweis {
    width: min(calc(100% - 40px), 1140px);
    margin: 24px auto;
    text-align: center;
}
.landingpage__woche > h2 { margin: 0 0 28px; }
.landingpage__wocheninhalt {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-areas: "text produkt" "link produkt";
    grid-template-rows: max-content 1fr;
    gap: 16px 36px;
    align-items: start;
    text-align: left;
}
.landingpage__wochenbild {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border: 0;
    background: var(--monster-white);
}
.landingpage__wochentext { grid-area: text; min-width: 0; }
.landingpage__wochentext h3 { margin: 0 0 12px; }
.landingpage__wochentext p { margin: 0 0 16px; }
.landingpage__wochentext #wochenText { white-space: pre-line; margin-bottom: 0; }
.landingpage__wochenprodukt { grid-area: produkt; min-width: 0; text-align: center; }
.landingpage__wochenlink { grid-area: link; justify-self: start; max-width: 100%; }

.landingpage__kategorie > h2 { margin: 0 0 28px; }
.landingpage__kategorieprodukte {
    --kategorie-spalten: 5;
    --kategorie-abstand: 28px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px var(--kategorie-abstand);
}
.landingpage__kategorie [hidden] { display: none; }
.landingpage__mehrspecials {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}
.landingpage__kategorieprodukt {
    flex: 0 0 calc((100% - (var(--kategorie-spalten) - 1) * var(--kategorie-abstand)) / var(--kategorie-spalten));
    min-width: 0;
    color: var(--monster-black);
    text-decoration: none;
}
.landingpage__kategorieprodukt img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    border: 0;
    background: var(--monster-white);
}
.landingpage__kategorieprodukt h3 {
    margin: 12px 0 8px;
    font-family: var(--ars-font-body-bold);
    font-size: 1.15rem;
    line-height: 1.15;
    overflow-wrap: anywhere;
}
.landingpage__kategorieprodukt:hover h3,
.landingpage__kategorieprodukt:focus-visible h3 { color: var(--monster-red); }
.landingpage__kategoriepreis {
    margin: 0;
    font-family: var(--ars-font-body-bold);
    font-size: 1.1rem;
}
.landingpage__kategoriestatus {
    margin: 8px 0 0;
    font-family: var(--ars-font-body);
    font-size: 1rem;
    color: var(--monster-grey);
}

@media (max-width: 767px) {
    .landingpage__inhalte .ars-headline {
        font-size: clamp(1.55rem, 7.7vw, 2.1rem);
        line-height: 1.1;
    }
    .landingpage__inhalte > .ars-navigation {
        width: min(calc(100% - 24px), 680px);
        margin: 0 auto 30px;
    }
    .landingpage__empfehlungen,
    .landingpage__woche,
    .landingpage__kategorie {
        width: min(calc(100% - 24px), 680px);
        padding: 36px 0;
    }
    .landingpage__empfehlungen .empfehlungenSlider__spur {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
    .landingpage__empfehlungen .empfehlungenKachel:nth-child(n + 5) { display: none; }
    .landingpage__wocheninhalt {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "text" "produkt" "link";
        grid-template-rows: auto;
        gap: 24px;
    }
    .landingpage__wochentext { text-align: center; }
    .landingpage__wochenbild { width: 100%; }
    .landingpage__wochenlink { width: 100%; }
    .landingpage__kategorieprodukte {
        --kategorie-spalten: 2;
        --kategorie-abstand: 14px;
    }
    .landingpage__kategorieprodukt h3 { font-size: 1.05rem; }
}

/* Glow am äußeren Rahmen; der innere Kachel-Flip bleibt unabhängig. */
.landingpage__entrance .landingpage__flip,
.landingpage__inhalte .empfehlungenKachel,
.landingpage__wochenbild,
.landingpage__kategorieprodukt img {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3),
                0 0 12px 2px rgba(0, 0, 0, .12),
                0 0 24px 8px rgba(255, 255, 255, .9);
}

@keyframes landingpageKachelZappeln {
    0%, 100% { transform: translateY(0) rotate(0); }
    25% { transform: translateY(-2px) rotate(-.7deg); }
    50% { transform: translateY(-1px) rotate(.6deg); }
    75% { transform: translateY(-2px) rotate(-.3deg); }
}

@media (min-width: 768px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .landingpage__inhalte .empfehlungenKachel:hover,
    .landingpage__wochenbild:hover,
    .landingpage__kategorieprodukt:hover img {
        animation: landingpageKachelZappeln 480ms ease-in-out;
    }
}

/* Sofort ausblenden beim Flip, danach weich zurückkehren. */
.landingpage__entrance .landingpage__flip,
.landingpage__inhalte .empfehlungenKachel {
    transition: box-shadow 450ms ease-out;
}
.landingpage__entrance .landingpage__flip.is-drehend,
.landingpage__inhalte .empfehlungenKachel.is-drehend {
    transition: none;
    box-shadow: none;
}

/* Konturlose Bildkacheln nur auf dieser Landingpage; Buttonregeln bleiben separat. */
.landingpage__entrance .landingpage__flip-front,
.landingpage__entrance .landingpage__flip-back,
.landingpage__inhalte .empfehlungenKachel__seite,
#empfehlungenDialog .empfehlungenDialog__karte {
    border: 0;
}

/* Zentrierte Trennung zwischen den unteren Inhaltsabschnitten. */
.landingpage__abschnittstrenner {
    width: 71%;
    height: 0;
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-top: 1px solid var(--monster-red);
}

/* Produkt zuerst: bestehender Empfehlungsslider, ohne dessen Rasterbegrenzung. */
.landingpage__produktauswahl {
    width: min(calc(100% - 40px), 1140px);
    margin: 0 auto;
    padding: 8px 0 20px;
}
.landingpage__produktauswahl[hidden] { display: none; }
.landingpage__produktauswahl .empfehlungenSlider__spur {
    padding-block: 24px;
    margin-block: -18px;
}
.produktwahlKachel { container-type: inline-size; display: block; }
.produktwahlKachel .empfehlungenKachel__rueckseite { padding: 0; }
.produktwahlKachel__bild {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}
.produktwahlKachel .empfehlungenKachel__rueckseite .produktwahlKachel__bild {
    opacity: .1;
    transform: scaleX(-1);
}
.produktwahlKachel__aktion {
    position: relative;
    color: var(--monster-red);
    font-family: var(--ars-font-display);
    font-weight: 400;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
    font-size: clamp(8px, 14cqw, 28px);
    line-height: 1.12;
    text-align: center;
}
.produktwahlKachel__aktion > span { display: block; white-space: nowrap; }
/* Zustand unabhängig von Hover-CSS: Touch/Keyboard müssen zuerst bewusst drehen. */
.produktwahlKachel .empfehlungenKachel__innen { transform: rotateY(0); }
.produktwahlKachel .empfehlungenKachel__vorderseite { visibility: visible; }
.produktwahlKachel.is-flipped .empfehlungenKachel__innen { transform: rotateY(180deg); }
.produktwahlKachel.is-flipped .empfehlungenKachel__vorderseite { visibility: hidden; }
.produktwahlKachel:focus-visible { outline: 3px solid var(--monster-red); outline-offset: 3px; }
@media (max-width: 767px) {
    .landingpage__produktauswahl { width: min(calc(100% - 24px), 680px); padding-bottom: 12px; }
}

/* NAME_IM_SHOP_DE (Katalog: name_DE) über der Rückseitenaktion. */
.produktwahlKachel .empfehlungenKachel__rueckseite { gap: clamp(4px, 5cqw, 10px); }
.produktwahlKachel__name {
    position: relative;
    display: block;
    width: 90%;
    color: var(--monster-black);
    font-family: var(--ars-font-body-bold);
    font-size: clamp(8px, 10cqw, 18px);
    font-weight: 700;
    line-height: 1.1;
    overflow-wrap: anywhere;
    text-align: center;
}

/* Portale und Produktleiste kompakter zusammenführen. */
.landingpage__entrance { padding-bottom: 18px; }
@media (max-width: 767px) {
    .landingpage__entrance { padding-bottom: 14px; }
}

/* Kompakte Empfehlungsrückseiten: ausschließlich auf dieser Landingpage. */
.landingpage__empfehlungen .empfehlungenKachel { container-type: inline-size; }
.landingpage__empfehlungen .empfehlungenKachel.is-flipped .empfehlungenKachel__innen { transform: rotateY(180deg); }
.landingpage__empfehlungen .empfehlungenKachel.is-flipped .empfehlungenKachel__vorderseite { visibility: hidden; }
.landingpage__empfehlungen .empfehlungenKachel__rueckseite {
    gap: clamp(4px, 3cqw, 10px);
    padding: clamp(8px, 5cqw, 16px);
}
.landingpage__empfehlungen .empfehlungenKachel__titel {
    font-family: var(--ars-font-body-bold);
    font-size: clamp(.8rem, 7cqw, 1.25rem);
    color: var(--ars-color-black);
    overflow-wrap: anywhere;
}
.landingpage__empfehlungen .empfehlungenKachel__monstername {
    font-family: var(--ars-font-body);
    font-weight: 400;
    font-size: clamp(.75rem, 6cqw, 1.1rem);
    text-transform: none;
    color: var(--ars-color-grey, #777);
    overflow-wrap: anywhere;
}
.landingpage__empfehlungen .empfehlungenKachel__preis {
    font-family: var(--ars-font-body-bold);
    font-size: clamp(1.1rem, 10cqw, 1.8rem);
    line-height: 1.05;
    color: var(--ars-color-black);
}
.landingpage__empfehlungen .empfehlungenKachel__direktkaufen {
    appearance: none;
    width: 100%;
    padding: 6px 10px;
    border: 0;
    background: var(--monster-red, #cf0e12);
    font-family: var(--ars-font-body-bold);
    font-size: clamp(1.1rem, 10cqw, 1.8rem);
    line-height: 1.1;
    color: var(--ars-color-white, #fff);
    cursor: pointer;
}
.landingpage__empfehlungen .empfehlungenKachel__direktkaufen:focus-visible {
    outline: 2px solid var(--monster-red);
    outline-offset: 2px;
}
.empfehlungenDialog--landingpage #empfehlungenDialogKaufen {
    min-height: 56px;
    padding: 12px 20px;
    font-size: clamp(1.4rem, 5vw, 1.8rem);
    line-height: 1.1;
}
.empfehlungenDialog--landingpage .empfehlungenDialog__karte {
    overflow-y: auto;
}
.empfehlungenDialog--landingpage .empfehlungenDialog__inhalt { flex-shrink: 0; }

.landingpage__empfehlungen .empfehlungenKachel__direktkaufen:disabled { opacity: .5; cursor: default; }

/* MONSTERPOST verwendet die vorhandene Kachel und einen eigenen Mehrfachauswahl-Link. */
.produktwahlKachel--monsterpost .empfehlungenKachel__rueckseite { gap: clamp(1px, 2cqw, 4px); }
.produktwahlKachel--monsterpost .produktwahlKachel__name { font-size: clamp(7px, 10cqw, 18px); }
.produktwahlKachel__postzusatz,
.produktwahlKachel__postpreis,
.produktwahlKachel__karten {
    position: relative;
    width: 90%;
    font-family: var(--ars-font-body-bold);
    text-align: center;
}
.produktwahlKachel__postzusatz {
    font-size: clamp(6px, 7cqw, 13px);
    line-height: 1.05;
    color: var(--monster-black);
}
.produktwahlKachel__postpreis {
    font-size: clamp(8px, 11cqw, 20px);
    line-height: 1.05;
    color: var(--monster-black);
}
.produktwahlKachel__karten {
    display: block;
    min-width: 0;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 3cqw 2cqw;
    font-size: clamp(6.25px, 9cqw, 18px);
    line-height: 1.05;
}