/* Originalmotive aus kachel3ai.pdf; natürliche Höhe ohne iframe. */
.halloween-flyer-background {
    position: relative;
    isolation: isolate;
    background: #050705;
}

/* Eigenes Gartenmotiv in der Farbwelt des Halloween-Banners. */
.halloween-flyer-background::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(to bottom, #050705 0%, rgb(5 7 5 / 12%) 18%, rgb(5 7 5 / 8%) 78%, #050705 100%),
        url("../images/halloween-kacheln/garten-hintergrund.png") center bottom / cover no-repeat;
}

.halloween-flyer-background::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 0% 45%, rgb(132 166 42 / 10%), transparent 50%),
        radial-gradient(ellipse at 100% 65%, rgb(255 111 0 / 15%), transparent 50%);
}

.halloween-tiles {
    display: grid;
    grid-template-columns: 2258fr 2502fr 2252fr;
    align-items: start;
    gap: 24px;
    width: 100%;
    max-width: 1120px;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 28px 24px 64px;
}

.halloween-tile {
    position: relative;
    min-width: 0;
    margin: 0;
    box-shadow: 0 16px 40px rgb(0 0 0 / 65%), 0 0 0 1px rgb(255 211 163 / 16%);
}

.halloween-tile > img {
    display: block;
    width: 100%;
    height: auto;
}

.halloween-hotspot {
    position: absolute;
    display: block;
    border-radius: 4px;
}

.halloween-hotspot:hover {
    background: rgb(255 128 0 / 10%);
    box-shadow: inset 0 0 0 2px #f38a21;
}

.halloween-hotspot:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -3px;
    background: rgb(255 128 0 / 18%);
}

.halloween-hotspot--beratung { left: 1%; top: 57%; width: 35%; height: 16%; border-radius: 50%; }
.halloween-hotspot--termin { left: 6%; top: 28%; width: 88%; height: 52%; }
.halloween-hotspot--adresse { left: 5%; top: 81.5%; width: 53%; height: 6%; }
.halloween-hotspot--telefon { left: 5%; top: 87.5%; width: 53%; height: 3.7%; }
.halloween-hotspot--email { left: 5%; top: 91.2%; width: 53%; height: 3.6%; }
.halloween-hotspot--website { left: 5%; top: 94.8%; width: 53%; height: 3.7%; }
.halloween-hotspot--besuch { left: 60%; top: 79%; width: 40%; height: 21%; border-radius: 50%; }

@media (max-width: 899px) {
    .halloween-flyer-background::before {
        background-size: 100% 100%, auto 1000px;
    }

    .halloween-tiles {
        grid-template-columns: minmax(0, 380px);
        justify-content: center;
        gap: 28px;
        padding: 24px 20px 48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .halloween-hotspot { transition: none; }
}