:root {
    --shadow-xs: 0 0.1px 0.3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12);
    --shadow-sm: 0 0.3px 0.4px rgba(0, 0, 0, 0.025), 0 0.9px 1.5px rgba(0, 0, 0, 0.05), 0 3.5px 6px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 0.9px 1.5px rgba(0, 0, 0, 0.03), 0 3.1px 5.5px rgba(0, 0, 0, 0.08), 0 14px 25px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 1.2px 1.9px -1px rgba(0, 0, 0, 0.014), 0 3.3px 5.3px -1px rgba(0, 0, 0, 0.038), 0 8.5px 12.7px -1px rgba(0, 0, 0, 0.085), 0 30px 42px -1px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 1.5px 2.1px -6px rgba(0, 0, 0, 0.012), 0 3.6px 5.2px -6px rgba(0, 0, 0, 0.035), 0 7.3px 10.6px -6px rgba(0, 0, 0, 0.07), 0 16.2px 21.9px -6px rgba(0, 0, 0, 0.117), 0 46px 60px -6px rgba(0, 0, 0, 0.2);
}

.campaign--online-version {
    --clr-neutral-100: hsl(0, 0%, 100%);
    --clr-neutral-200: hsl(0, 0%, 95%);
    --clr-neutral-500: hsl(0, 0%, 70%);
    --clr-neutral-800: hsl(0, 0%, 20%);
    --clr-neutral-900: hsl(0, 0%, 0%);
}

body {
    color: light-dark( var(--clr-neutral-900), var(--clr-neutral-200) );
    background-color: light-dark( var(--clr-neutral-200), var(--clr-neutral-800) );
}

/* Sticky */
.campaign__sticky-container {
    position: sticky;
    z-index: 10;
    inset-block-start: 0;
}
.campaign__sticky-child {
    border-block-end: 1px solid var(--clr-neutral-500);
    padding: min(3vw, 1em);
    background-color: light-dark( var(--clr-neutral-100), var(--clr-neutral-900) );
}

@supports (container-type: scroll-state) {
    .campaign__sticky-container {
        container-type: scroll-state;
    }

    .campaign__sticky-child {
        transition: box-shadow 0.2s ease-out;

        @container scroll-state(stuck: top) {
            box-shadow: var(--shadow-md);
            backdrop-filter: blur(10px);
            background-color: color-mix(in srgb, light-dark( var(--clr-neutral-100), var(--clr-neutral-900) ) 100%, transparent 30%);
        }
    }
}

.campaign__wrapper {
    padding: min(3vw, 1.5em);
}
.campaign__wrapper > *:first-child {
    margin-top: 0;
}
.campaign__wrapper > *:last-child {
    margin-bottom: 0;
}

.campaign__content .campaign__wrapper {
    padding-inline: 0;
}

/* Meta: Haupttitel, Versanddatum */
.campaign__meta {
    background-color: light-dark(var(--clr-neutral-200), var(--clr-neutral-800));
}
.campaign__meta .main__title {
    font-size: clamp(1.25rem, 0.708rem + 1.667vi, 1.75rem);
    text-wrap: balance;
}

/* Backlink mit Icon */
.link-hasicon {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    color: var(--clr-primary, currentColor);
    fill: var(--clr-primary, currentColor);
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
}
.link-hasicon:is(:hover, :focus) {
    text-decoration: underline
}

.link-hasicon .icon {
    font-size: inherit;
    width: 1em;
    height: 1em;
    fill: inherit;
    flex: none;
    font-size: 20px;
    transition: transform .2s
}
.link-hasicon:is(:hover, :focus) .icon {
    transform: translateX(-0.25em);
}

/* Helper */
.reverse {
	display: flex;
	flex-direction: column;
}
.reverse > .reverse__child,
.reverse > .date,
.reverse > .visuallyfirst,
.reverse > .mod-entry-meta {
	order: -1;
}