/* --- Querverweis (epi/querverweis) ------------------------------------------
   Schmales Band vor dem Footer, das auf einen anderen Auftritt verweist. Die
   breite Schwester der Markenebene im Mega-Menü (global.css, mega_card_brand):
   Fläche in der Farbe des Ziels, Stimmkarten als Motiv, Pille wie die Buttons
   der Ziel-Website. Die Markenfarbe ist bewusst kein Token dieses Hauses, sie
   hängt am Modifier (--wahlen). Die Karten sind Pseudoelemente, damit sie im
   contentOnly-Pattern nicht gelöscht werden. Sie heben sich, wenn das Band
   Hover oder Fokus hat. */
.epi-querverweis {
    --qv-marke: var(--color-dark);
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "text beleg"
        "text link";
    column-gap: clamp(2rem, 6vw, 6rem);
    row-gap: 1rem;
    align-items: center;
    padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.5rem, 5vw, 3.5rem);
    border-radius: var(--radius-lg);
    background-color: var(--qv-marke);
    color: var(--color-base);
    /* clip statt hidden: schneidet die Karten ab, der Fokus der Pille liegt
       weit genug innen. */
    overflow: clip;
}

.epi-querverweis--wahlen {
    --qv-marke: var(--epi-marke-wahlen);
}

.epi-querverweis > *,
.epi-querverweis__text > *,
.epi-querverweis__beleg > * {
    position: relative;
    z-index: 1;
    margin-block: 0;
}

.epi-querverweis__text {
    grid-area: text;
    display: grid;
    gap: 0.75rem;
}

.epi-querverweis .epi-querverweis__titel {
    color: var(--color-base);
    font-family: var(--font-secondary);
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
}

.epi-querverweis__body {
    max-inline-size: 60ch;
    font-size: 1rem;
    line-height: 1.6;
}

.epi-querverweis__beleg {
    grid-area: beleg;
    align-self: end;
}

.epi-querverweis__zahl {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1;
}

.epi-querverweis__zahl strong {
    margin-inline-end: 0.35rem;
    font-family: var(--font-secondary);
    font-size: 3.5rem;
    font-variant-numeric: tabular-nums;
}

.epi-querverweis__zahltext {
    max-inline-size: 16rem;
    margin-block-start: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.4;
}

.epi-querverweis__link {
    grid-area: link;
    align-self: start;
}

/* Standard-Button in Groesse und Schrift, umgefaerbt und voll gerundet wie
   die Buttons der Ziel-Website. */
.epi-querverweis .wp-block-button__link,
.epi-querverweis .wp-block-button__link:is(:hover, :active, :focus-visible) {
    border-radius: 999px;
    border-color: var(--color-base);
    background-color: var(--color-base);
    color: var(--qv-marke);
}

.epi-querverweis .wp-block-button__link:hover {
    background-color: var(--color-primary-light);
    border-color: var(--color-primary-light);
}

.epi-querverweis .wp-block-button__link:focus-visible {
    outline-color: var(--color-base);
}

/* Externes Ziel: Pfeil als Icon (Quicksand hat keinen), der Hinweis fuer
   Screenreader steht als Alternativtext des generierten Inhalts. Gilt fuer
   jeden Button mit externem Ziel, nicht nur im Querverweis. */
.wp-block-button__link[target="_blank"]::after {
    content: "\f35d" / "(externe Website, öffnet in neuem Tab)";
    margin-inline-start: 0.5em;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.75em;
}

/* Stimmkarten, hochgehalten hinter dem Beleg */
.epi-querverweis::before,
.epi-querverweis::after,
.epi-querverweis__beleg::after {
    content: "";
    position: absolute;
    z-index: 0;
    border-radius: 6px;
    background-color: rgb(255 255 255 / 0.16);
    transform-origin: 50% 100%;
    rotate: var(--qv-neigung);
    transition: translate 500ms cubic-bezier(0.34, 1.56, 0.64, 1) var(--qv-versatz), rotate 500ms ease-out var(--qv-versatz);
}

.epi-querverweis::before {
    --qv-neigung: -14deg;
    --qv-versatz: 0ms;
    inline-size: 96px;
    block-size: 128px;
    inset-inline-end: 27%;
    inset-block-end: 22px;
}

.epi-querverweis::after {
    --qv-neigung: 9deg;
    --qv-versatz: 80ms;
    inline-size: 72px;
    block-size: 96px;
    inset-inline-end: 35%;
    inset-block-end: -24px;
    background-color: rgb(255 255 255 / 0.1);
}

.epi-querverweis__beleg::after {
    --qv-neigung: 22deg;
    --qv-versatz: 160ms;
    inline-size: 56px;
    block-size: 76px;
    inset-inline-end: -5.5rem;
    inset-block-start: -3rem;
    background-color: rgb(255 255 255 / 0.22);
}

.epi-querverweis:is(:hover, :focus-within)::before,
.epi-querverweis:is(:hover, :focus-within)::after,
.epi-querverweis:is(:hover, :focus-within) .epi-querverweis__beleg::after {
    translate: 0 -14px;
    rotate: calc(var(--qv-neigung) + 6deg);
}

/* Helle Fassung (--hell): fuer den Querverweis innerhalb einer Sektion,
   etwa unter der Produktuebersicht der Startseite, wo die volle Markenflaeche
   zu stark heraussticht. Rand und Button tragen die Markenfarbe, die Flaeche
   bleibt hell, die Stimmkarten in einem hellen Ton der Marke. */
.epi-querverweis--hell {
    border: 1px solid var(--qv-marke);
    background-color: color-mix(in srgb, var(--qv-marke) 4%, var(--color-base));
    color: var(--color-text);
}

.epi-querverweis--hell .epi-querverweis__titel {
    color: var(--color-text);
}

.epi-querverweis--hell .epi-querverweis__zahl strong {
    color: var(--qv-marke);
}

.epi-querverweis--hell .wp-block-button__link,
.epi-querverweis--hell .wp-block-button__link:is(:hover, :active, :focus-visible) {
    border-color: var(--qv-marke);
    background-color: var(--qv-marke);
    color: var(--color-base);
}

.epi-querverweis--hell .wp-block-button__link:hover {
    border-color: color-mix(in srgb, var(--qv-marke) 85%, black);
    background-color: color-mix(in srgb, var(--qv-marke) 85%, black);
}

.epi-querverweis--hell .wp-block-button__link:focus-visible {
    outline-color: var(--qv-marke);
}

.epi-querverweis--hell::before,
.epi-querverweis--hell::after,
.epi-querverweis--hell .epi-querverweis__beleg::after {
    background-color: color-mix(in srgb, var(--qv-marke) 12%, var(--color-base));
}

.epi-querverweis--hell::after {
    background-color: color-mix(in srgb, var(--qv-marke) 8%, var(--color-base));
}

/* In einer bestehenden Sektion unter einer Uebersicht: etwas Luft davor. */
.epi-stack > .epi-querverweis {
    margin-block-start: var(--wp--preset--spacing--lg);
}

@media (prefers-reduced-motion: reduce) {
    .epi-querverweis::before,
    .epi-querverweis::after,
    .epi-querverweis__beleg::after {
        transition: none;
    }

    .epi-querverweis:is(:hover, :focus-within)::before,
    .epi-querverweis:is(:hover, :focus-within)::after,
    .epi-querverweis:is(:hover, :focus-within) .epi-querverweis__beleg::after {
        translate: none;
        rotate: var(--qv-neigung);
    }
}

@media screen and (max-width: 768px) {
    .epi-querverweis {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "text"
            "beleg"
            "link";
        row-gap: 1.5rem;
    }

    .epi-querverweis::before {
        inset-inline-end: -24px;
        inset-block-end: 96px;
    }

    .epi-querverweis::after {
        inset-inline-end: 18%;
        inset-block-end: -40px;
    }

    .epi-querverweis__beleg::after {
        inset-inline-end: -3rem;
    }
}