/****************************************************************************
 * Stoerer am Section-Ende
 *
 * INFO: Wird ueber das Feld "Stoerer anzeigen" (typo_show_stoerer) einer
 *       Section aktiviert (functions.php -> \Typo\Section::decorate).
 *       Rendert als eigene, hoehenlose Row am Ende der Section. Der Stoerer
 *       haengt rechts zur Haelfte ueber die Section-Kante, bleibt dabei
 *       innerhalb des Inhaltsbereichs (Section-Padding).
 *
 * HTML: .content_section
 *          > .content_row ...
 *          > .stoerer_row
 *              > .stoerer_wrapper
 *                  > a.stoerer | div.stoerer  > img
 ****************************************************************************/
.stoerer_row {
    position: relative;
    height: 0;
    z-index: 900;
    pointer-events: none;
}

.stoerer_row .stoerer_wrapper {
    position: absolute;
    right: 1rem;
    bottom: 0;
    left: auto;
    top: auto;
    width: auto;
    max-width: none;
    margin: 0;
    text-align: right;
    transform: translateY(50%);
}

.stoerer_row .stoerer_wrapper .stoerer {
    display: inline-block;
    width: 7rem;
    max-width: 45vw;
    pointer-events: auto;
    transition: transform 0.25s ease;
}
.stoerer_row .stoerer_wrapper .stoerer:hover {
    transform: scale(1.05);
}

/* Rotation wird per JS (stoerer.js) scrollabhaengig gesetzt;
   der Wert hier ist der Fallback ohne JS. */
.stoerer_row .stoerer_wrapper .stoerer img {
    display: block;
    width: 100%;
    height: auto;
    transform: rotate(10deg);
    will-change: transform;
}

@media screen and (min-width: 40em) {
    .stoerer_row .stoerer_wrapper {
        right: 2rem;
    }
    .stoerer_row .stoerer_wrapper .stoerer {
        width: 9rem;
    }
}

@media screen and (min-width: 64em) {
    .stoerer_row .stoerer_wrapper {
        right: 3rem;
    }
    .stoerer_row .stoerer_wrapper .stoerer {
        width: 12rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .stoerer_row .stoerer_wrapper .stoerer {
        transition: none;
    }
}