h1.wp-block-heading:has( + h2.wp-block-heading) {
    margin-bottom: 0 !important;
} 

.komp-2-cols {
    h3.wp-block-heading {
        margin-top: 0;
    }

    /* Break out of the ~1060px content column, centered, without exceeding the viewport */
    @media (min-width: 1200px) {
        /* 110px free per side: sticky flaps (~58px + 14px hover slide) + scrollbar never overlap */
        --komp-2-cols-width: min(1500px, 100vw - 220px);

        width: var(--komp-2-cols-width);
        max-width: none;
        margin-inline: calc((100% - var(--komp-2-cols-width)) / 2);
    }

    /* Stack earlier than core's 782px breakpoint (core forces nowrap with !important) */
    @media (max-width: 1199px) {
        &.wp-block-columns {
            flex-wrap: wrap !important;
        }

        > .wp-block-column {
            flex-basis: 100% !important;
        }
    }
}

/*
 * Dark edge at the bottom/right of videos at some viewport widths (e.g. 1218px, Chrome/Windows):
 * Chrome hands opaque playing videos to the GPU as a hardware overlay plane, which is
 * snapped to whole pixels and comes up ~1px short at fractional sizes. Overlays are
 * composed by the display hardware, so screenshots never show the gap.
 * Fix: a not-quite-opaque video is not eligible for an overlay and gets drawn normally.
 */
.komp-section .wp-block-video video {
    display: block;
    width: 100%;
    height: auto;
    background: var(--komp-section-bg, #fff3cc);
    opacity: 0.999;
}

.komp-section:has( > .komp-2-cols) {
    margin-bottom: 0 !important;
}

/*
 * Animated arrow pointing at the donation form, in the normal flow of the video figure:
 * above the video pointing right while the columns sit side by side, below the video
 * pointing down once they stack (the form is then below the video).
 * The drawing animation lives inside the SVG files.
 */
.komp-2-cols .wp-block-video {
    /* Clickable: scrolls to and focuses the donation form (assets/main.js) */
    &.komp-form-trigger {
        cursor: pointer;
    }

    &:focus-visible {
        outline: 3px solid #aada91;
        outline-offset: 6px;
        border-radius: 4px;
    }

    &::before,
    &::after {
        display: block;
        background: no-repeat center / contain;
    }

    @media (min-width: 1200px) {
        /* Arrow + video follow the scroll next to the (taller) form, below the fixed header */
        position: sticky;
        top: 180px; /* scrolled desktop header ends at ~148px */

        &::before {
            content: '';
            width: 140px;
            aspect-ratio: 240 / 170;
            margin: 0 0 10px auto;
            background-image: url('arrow-right-animated.svg');
        }
    }

    @media (max-width: 1199px) {
        margin-bottom: 0;

        &::after {
            content: '';
            width: 70px;
            aspect-ratio: 170 / 240;
            /* Negative: the SVG has empty space around the arrow, the video below the map */
            margin: -16px auto -8px;
            background-image: url('arrow-down-animated.svg');
        }
    }
}

/* Stacked: map, arrow and donation form closer together (core default gap: 2em) */
@media (max-width: 1199px) {
    .komp-2-cols.wp-block-columns {
        gap: 12px;
    }
}

/*
 * The theme's `.main-content { overflow-x: hidden }` makes the wrapper a scroll container,
 * which silently disables position: sticky (sticky video/arrow below). `clip` still hides
 * horizontal overflow without creating a scroll container.
 */
.komp-campagne .main-content {
    overflow-x: clip;
}

/* Scroll target of the video click: keep clear of the fixed header (and the mobile tab switch) */
.komp-2-cols > .wp-block-column {
    scroll-margin-top: 200px;
}

/* Twingle donation form: rounded like its own purple header bar */
.komp-2-cols iframe[id^="twingleframe-"] {
    border-radius: 16px;
}

/* Short green pulse around the donation form (Twingle iframe) after the video was clicked */
.komp-form-highlight {
    border-radius: 16px;
    animation: komp-form-highlight 1.4s ease-out;
}

@keyframes komp-form-highlight {
    0% { box-shadow: 0 0 0 0 rgba(170, 218, 145, 0.9); }
    100% { box-shadow: 0 0 0 24px rgba(170, 218, 145, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .komp-form-highlight {
        animation: none;
    }
}

/*
 * Giving Tuesday flaps (privat / unternehmen): outlined green, filled when active.
 * Scoped via the body classes from inc/campagne.php; the active flap is
 * detected by its link target, so no theme markup is required.
 */
.komp-campagne .flap {
    --komp-flap-green: #aada91;

    background: #fff;
    border: 2px solid var(--komp-flap-green);
    border-right: 0;
    transition: transform 160ms ease-out, background-color 160ms ease-out;

    > a {
        color: #3f535c !important;
        font-weight: 700;
        text-transform: none;
        /* Shorter than the theme (50px, 31px below 1400px) */
        padding-top: var(--komp-flap-pad);
        padding-bottom: var(--komp-flap-pad);
    }
}

/*
 * Shorter flaps would leave a gap, so move the second one up by the saved padding.
 * Theme positions (layouts/app.blade.php): 285px / 515px, above 1400px 210px / 490px.
 */
.komp-campagne .flap {
    --komp-flap-pad: 32px;
    --komp-flap-gap: 16px;
    /*
     * Center of the first flap. Up to 1400px both flaps are centered in the viewport as a pair:
     * 50vh minus half of (second flap ≈ 174px text + padding + gap). Never higher than 350px,
     * so short viewports cannot push the flaps into the header.
     */
    --komp-flap-top: max(350px, 50vh - 87px - var(--komp-flap-pad) - var(--komp-flap-gap) / 2);

    top: var(--komp-flap-top);

    @media (min-width: 1401px) {
        --komp-flap-top: 270px;
    }
}

.komp-campagne .flap + .flap {
    top: calc(var(--komp-flap-top) + 180px + 2 * var(--komp-flap-pad) + var(--komp-flap-gap));
}

.komp-campagne-privat .flap:has(> a[href*="/kinderzimmer/privat"]),
.komp-campagne-unternehmen .flap:has(> a[href*="/kinderzimmer/unternehmen"]) {
    background: var(--komp-flap-green);

    /* Active tab: no slide-out on hover (theme: translateX(-14px)) */
    &:hover {
        transform: translateY(-50%);
    }

    > a {
        cursor: default;
    }
}

/* Smaller buttons in the whole main content of both campaign pages (theme default: 35px / 62px high) */
.komp-campagne main .wp-block-button__link:not(.add_media) {
    height: auto;
    padding: 14px 32px;
    font-size: 20px;
    line-height: 1.2;

    @media screen and (max-width: 1000px) {
        padding: 12px 26px !important; /* theme uses !important here */
        font-size: 17px;
    }
}

/*
 * Mobile campaign tab switch (templates/campagne-tabs.view.php), shown where the theme
 * hides the sticky flaps. Sits below the fixed header and follows it via assets/main.js.
 */
.komp-campagne-tabs {
    display: none;
}

@media screen and (max-width: 1000px) {
    .komp-campagne-tabs {
        --komp-tabs-green: #aada91;
        --komp-tabs-header: 90px;
        --komp-tabs-spacing: 10px;

        position: fixed;
        top: calc(var(--komp-tabs-header) + var(--komp-tabs-spacing));
        left: 50%;
        z-index: 501; /* above the theme header (500), whose transparent box would catch the taps */
        display: flex;
        gap: 4px;
        width: max-content;
        max-width: calc(100vw - 32px);
        padding: 4px;
        background: #fff;
        border: 2px solid var(--komp-tabs-green);
        border-radius: 999px;
        box-shadow: 0 2px 12px rgba(63, 83, 92, 0.12);
        transform: translateX(-50%);
        transition: transform 420ms ease-out; /* same timing as the theme header */

        &.komp-header-hidden {
            transform: translateX(-50%) translateY(calc(-1 * var(--komp-tabs-header)));
        }

        &.komp-menu-open {
            visibility: hidden;
        }
    }

    /* "Jetzt spenden" / "Pat:in werden" buttons above the header, mobile only */
    .komp-campagne header.banner .sub-header.top-header .right-mobile {
        display: none !important; /* theme layout sets display: flex !important inline */
    }

    .komp-campagne-tabs__tab {
        padding: 8px 18px;
        border-radius: 999px;
        color: #3f535c !important;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.2;
        text-align: center;
        text-decoration: none !important;
        white-space: nowrap;
        transition: background-color 160ms ease-out;

        &:hover {
            background: #f1f9ec;
        }

        &.komp-active {
            background: var(--komp-tabs-green);
            cursor: default;
        }
    }

    /* Keep the page content clear of the tab switch */
    .komp-campagne main {
        padding-top: 60px;
    }
}

@media screen and (max-width: 380px) {
    .komp-campagne-tabs__tab {
        padding: 8px 12px;
        font-size: 13px;
    }
}

@media screen and (max-width: 960px) {
    .breadcrumbs-wrapper .breadcrumbs, .sub-page-content {
        padding-bottom: 0 !important; 
    }
}


/*
 * Thank-you video after a finished Twingle donation (templates/donation-thanks.view.php).
 * Fades + scales in via .komp-open, which assets/main.js toggles around showModal()/close().
 */
.komp-donation-thanks {
    width: min(900px, 100vw - 32px);
    max-width: none;
    max-height: none;
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: #fff3cc;
    box-shadow: 0 20px 60px rgba(63, 83, 92, 0.35);
    overflow: visible;
    opacity: 0;
    transform: translateY(16px) scale(0.94);
    transition: opacity 350ms ease-out, transform 350ms cubic-bezier(0.2, 0.9, 0.3, 1.2);

    &::backdrop {
        background: rgba(63, 83, 92, 0.6);
        opacity: 0;
        transition: opacity 350ms ease-out;
    }

    &.komp-open {
        opacity: 1;
        transform: none;

        &::backdrop {
            opacity: 1;
        }
    }

    &.komp-closing {
        transition-timing-function: ease-in;
    }
}

.komp-donation-thanks__inner {
    position: relative;
}

.komp-donation-thanks__video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    border-radius: 16px;
    background: #fff3cc;
    opacity: 0.999; /* no GPU overlay plane, see .komp-section video above */
}

.komp-donation-thanks__close {
    position: absolute;
    top: -14px;
    right: -14px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid #aada91;
    border-radius: 50%;
    background: #fff;
    color: #3f535c;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(63, 83, 92, 0.2);
    transition: background-color 160ms ease-out, transform 160ms ease-out;

    &:hover {
        background: #aada91;
        transform: rotate(90deg);
    }

    &:focus-visible {
        outline: 3px solid #aada91;
        outline-offset: 3px;
    }

    @media (max-width: 600px) {
        top: 8px;
        right: 8px;
        width: 36px;
        height: 36px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .komp-donation-thanks,
    .komp-donation-thanks::backdrop,
    .komp-donation-thanks__close {
        transition: none;
    }
}