/**
 * Lichter-Netz brand layer.
 *
 * Implements the stylements from the 2024 Styleguide (gradient + grain,
 * Funken-Konfetti, pattern) as utility classes that can be applied to core
 * blocks via the "Additional CSS class" field. Colours are read from the
 * theme.json presets, never hardcoded, so a palette change propagates here.
 *
 * NOTE ON COMBINING STYLEMENTS
 * .ln-grain, .ln-pattern and .ln-konfetti each claim a pseudo-element, so at
 * most one of them may sit on any single block. To layer two, put them on
 * nested groups (outer = gradient + grain, inner = konfetti).
 *
 * NOTE ON CONTRAST
 * The light brand gradient (#67bd9c -> #8672aa) carries no text: white fails
 * on the green end (2.3:1) and anthracite fails on the purple end (2.6:1).
 * Text-bearing surfaces use the deep variant (--ln-verlauf-tief), a solid
 * brand colour, or a core/cover photo section, whose anthracite dim overlay
 * keeps white text above 6:1 no matter what the photograph does (see 4).
 */

:root {
	--ln-radius-sm: 12px;
	--ln-radius: 20px;
	--ln-radius-lg: 32px;
	--ln-shadow-sm: 0 1px 2px rgb(60 60 59 / 6%), 0 8px 24px -14px rgb(60 60 59 / 20%);
	--ln-shadow: 0 2px 6px rgb(60 60 59 / 8%), 0 18px 40px -18px rgb(60 60 59 / 26%);
	--ln-shadow-lg: 0 4px 12px rgb(60 60 59 / 10%), 0 40px 80px -32px rgb(60 60 59 / 38%);
	--ln-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* Height of the sticky header, the basis for where a jump link lands (5).
	   One row: 0.85rem padding top and bottom plus the tallest item, the
	   button at 3.35rem. */
	--ln-header-height: 5.25rem;
}

/* Below this width the logo and the controls no longer fit side by side and
   the header wraps onto a second row, growing by the logo (2.95rem) plus the
   block gap (1.5rem). */
@media (max-width: 27rem) {
	:root {
		--ln-header-height: 9.75rem;
	}
}

/* -------------------------------------------------------------------------
   1. Stylement: Gradient + Grain
   ---------------------------------------------------------------------- */

.ln-grain {
	position: relative;
	isolation: isolate;
}

.ln-grain::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: url("img/ln-grain.svg");
	background-repeat: repeat;
	background-size: 240px 240px;
	opacity: 0.3;
	mix-blend-mode: overlay;
}

.ln-grain-soft::after {
	opacity: 0.14;
	mix-blend-mode: multiply;
}

/* -------------------------------------------------------------------------
   2. Stylement: Pattern (x / +)
   ---------------------------------------------------------------------- */

.ln-pattern {
	position: relative;
	isolation: isolate;
}

.ln-pattern::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: url("img/ln-pattern.svg");
	background-repeat: repeat;
	background-size: 64px 64px;
	opacity: 0.16;
}

.ln-pattern-fade::before {
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
	mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
}

/* -------------------------------------------------------------------------
   3. Stylement: Funken-Konfetti
   ---------------------------------------------------------------------- */

.ln-konfetti {
	position: relative;
	overflow: clip;
}

.ln-konfetti::before,
.ln-konfetti::after {
	content: "";
	position: absolute;
	pointer-events: none;
	background-image: url("img/ln-pattern.svg");
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0.5;
}

.ln-konfetti::before {
	width: 140px;
	height: 140px;
	top: -20px;
	left: -30px;
	transform: rotate(12deg);
}

.ln-konfetti::after {
	width: 200px;
	height: 200px;
	right: -48px;
	bottom: -50px;
	transform: rotate(-8deg);
}

@media (max-width: 781px) {
	.ln-konfetti::before,
	.ln-konfetti::after {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   4. Photo sections (core/cover + .ln-cover-tint)
   Photo sections use a core Cover block so editors can swap the image with
   the normal UI. Contrast is carried entirely by Cover's own dim overlay
   (anthracite at 80%, which keeps white text at >= 6:1 even over a white
   photograph). The two layers added here are decorative only:
     ::before  grain, per the styleguide
     ::after   brand hues via mix-blend-mode: color, which shifts hue but
               leaves luminance — and therefore contrast — untouched.
   ---------------------------------------------------------------------- */

.ln-cover-tint::before,
.ln-cover-tint::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.ln-cover-tint::before {
	background-image: url("img/ln-grain.svg");
	background-size: 240px 240px;
	opacity: 0.24;
	mix-blend-mode: overlay;
}

.ln-cover-tint::after {
	background: linear-gradient(135deg, rgb(47 125 97 / 60%) 0%, rgb(95 77 128 / 60%) 100%);
	mix-blend-mode: color;
}

/* Both pseudo-elements sit at z-index 1 alongside Cover's overlay span and
   come later in the DOM, so the content has to be lifted above them. */
.ln-cover-tint > .wp-block-cover__inner-container {
	z-index: 2;
}

/* Selecting a line of hero text used to drag the background photo and the dim
   overlay into the selection, which tinted the whole section. Neither is
   content, so both are taken out of selection and out of drag. */
.wp-block-cover > .wp-block-cover__image-background,
.wp-block-cover > .wp-block-cover__video-background,
.wp-block-cover > .wp-block-cover__background {
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
}

/* Constrained groups get the root padding from theme.json; a Cover block has
   no padding of its own, so a full-width photo section would otherwise run its
   text into the viewport edge. Same variable, so one value governs both. */
.wp-block-cover.ln-section > .wp-block-cover__inner-container {
	padding-left: var(--wp--style--root--padding-left);
	padding-right: var(--wp--style--root--padding-right);
}

.ln-cover-tint :is(h1, h2, h3, h4, p, li, cite, strong) {
	color: #fff;
}

.ln-cover-tint a:not(.wp-element-button) {
	color: #fff;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* -------------------------------------------------------------------------
   5. Section rhythm, eyebrows, cards
   ---------------------------------------------------------------------- */

/* Where a jump link comes to rest.

   The anchor sits on the section, but what the reader is looking for is its
   headline — and between the two lies the section's own top padding of up to
   7rem. Landing on the section edge therefore parks the headline a third of
   the way down the screen.

   So the scrollport is inset by the header plus a hand's breadth, and the
   section pulls its own padding back off again. Both terms use the same
   clamp(), so they cancel exactly at every viewport width and the headline
   always ends up 1rem below the header.

   The two properties are a pair: scroll-padding on the scroll container and
   scroll-margin on the target add up. Setting both to the header height —
   which is what the earlier version did — offsets it twice. */
html {
	scroll-padding-top: calc(var(--ln-header-height) + 1rem);
}

.ln-section {
	scroll-margin-top: calc(var(--wp--preset--spacing--xx-large) * -1);
}

/* Eyebrow label above a section headline, with the brand spark in front.

   The spark is aligned on the baseline rather than centred in the line box:
   the label is set in caps, whose optical centre sits above the centre of the
   line box, so centring the mark left it visibly low. Baseline alignment puts
   the mark's bottom edge on the baseline, and the nudge below lifts its centre
   onto the cap centre — a ratio, so it holds at every font size. */
.ln-eyebrow {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	font-family: var(--wp--preset--font-family--secondary);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.35;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
}

.ln-eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 0.95em;
	height: 0.95em;
	transform: translateY(0.11em);
	background-color: currentcolor;
	-webkit-mask: url("img/ln-spark.svg") no-repeat center / contain;
	mask: url("img/ln-spark.svg") no-repeat center / contain;
}

.ln-eyebrow.has-text-align-center {
	justify-content: center;
}

.ln-claim {
	font-family: var(--wp--preset--font-family--secondary);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: lowercase;
	opacity: 0.92;
}

/* Headline with one phrase lifted into the brand colour. The dark green, not
   the light one: #67bd9c measures 2.2:1 on white and would be decoration
   rather than a word. On dark surfaces the hero has its own rule (7). */
.ln-title-accent em {
	font-style: normal;
	color: var(--wp--preset--color--primary-accent);
}

.ln-card {
	border-radius: var(--ln-radius);
	transition: transform 0.22s var(--ln-ease), box-shadow 0.22s var(--ln-ease);
	box-shadow: var(--ln-shadow-sm);
}

.ln-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--ln-shadow);
}

/* Numbered cards for the three Beziehungen. */
.ln-card--step {
	position: relative;
	overflow: hidden;
	border: 1px solid rgb(103 189 156 / 30%);
}

.ln-card--step::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg, var(--wp--preset--color--primary), var(--wp--preset--color--primary-alt));
}

.ln-card--step .wp-block-heading {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
}

.ln-card--step .wp-block-heading::before {
	counter-increment: ln-step;
	content: counter(ln-step, decimal-leading-zero);
	font-size: 0.72em;
	font-weight: 800;
	color: var(--wp--preset--color--primary-accent);
	letter-spacing: 0.02em;
}

.ln-steps {
	counter-reset: ln-step;
}

/* Photo sitting beside text rather than behind a section. */
.ln-media-frame img {
	border-radius: var(--ln-radius-lg);
	box-shadow: var(--ln-shadow);
	display: block;
	width: 100%;
	height: auto;
}

/* Photo with a short line tucked over its lower edge — the small overlap is
   what keeps a framed photo from looking pasted in. .ln-photo is the frame of
   reference the badge is positioned against, so the two always travel
   together. On narrow screens the badge drops below the photo instead, where
   there is no room to hang off the edge. */
.ln-photo {
	position: relative;
}

.ln-photo .wp-block-image {
	margin: 0;
}

/* A degree and a half off true: enough that the photo reads as placed rather
   than as a slot filled, not enough to look like a mistake. Same device as
   the hero panel (7). */
.ln-photo--tilt .wp-block-image img {
	transform: rotate(-1.4deg);
}

.ln-photo-badge {
	position: absolute;
	left: -0.75rem;
	bottom: -1.1rem;
	max-width: 15rem;
	margin: 0;
	padding: 0.85rem 1.15rem;
	border-radius: var(--ln-radius);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--main);
	box-shadow: var(--ln-shadow);
	font-family: var(--wp--preset--font-family--secondary);
	font-weight: 700;
	line-height: 1.3;
}

.ln-photo-badge::before {
	content: "";
	display: inline-block;
	width: 1.05em;
	height: 1.05em;
	margin-right: 0.45rem;
	vertical-align: -0.15em;
	background-color: var(--wp--preset--color--primary-accent);
	-webkit-mask: url("img/ln-spark.svg") no-repeat center / contain;
	mask: url("img/ln-spark.svg") no-repeat center / contain;
}

@media (max-width: 781px) {
	.ln-photo-badge {
		position: static;
		max-width: none;
		margin-top: 1rem;
		box-shadow: var(--ln-shadow-sm);
	}
}

/* Glass card for use on photo or gradient sections. */
.ln-card--glass {
	background: rgb(255 255 255 / 10%);
	border: 1px solid rgb(255 255 255 / 22%);
	border-radius: var(--ln-radius);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

@media (prefers-reduced-motion: reduce) {
	.ln-card,
	.ln-card:hover {
		transform: none;
		transition: none;
	}
}

/* -------------------------------------------------------------------------
   6. Spark bullets
   ---------------------------------------------------------------------- */

.ln-list-spark {
	list-style: none;
	padding-left: 0;
}

.ln-list-spark li {
	position: relative;
	padding-left: 2.1rem;
	margin-bottom: 0.85rem;
}

/* Offset derived the same way as the eyebrow mark: the first line box is
   line-height tall, so the mark's top sits at half the leading plus the gap
   between cap centre and mark centre. */
.ln-list-spark li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 1.05rem;
	height: 1.05rem;
	background-color: currentcolor;
	opacity: 0.85;
	-webkit-mask: url("img/ln-spark.svg") no-repeat center / contain;
	mask: url("img/ln-spark.svg") no-repeat center / contain;
}

/* On light sections the spark picks up the brand green. */
.ln-list-spark--gruen li::before {
	background-color: var(--wp--preset--color--primary-accent);
	opacity: 1;
}

/* -------------------------------------------------------------------------
   7. Hero
   ---------------------------------------------------------------------- */

.ln-hero {
	position: relative;
	overflow: clip;
}

.ln-hero .wp-block-heading {
	text-wrap: balance;
}

/* Asymmetric two-column hero: text left, framed photo right. */
.ln-hero__grid {
	align-items: center;
	gap: clamp(2rem, 5vw, 4.5rem);
}

.ln-hero__logo img {
	width: min(230px, 58vw);
	height: auto;
}

.ln-hero__title {
	font-size: clamp(2.6rem, 6.4vw, 4.6rem);
	line-height: 1.02;
	letter-spacing: -0.035em;
	margin-bottom: 0.6rem;
}

/* Second line of the headline picks up the brand green. */
.ln-hero__title em {
	font-style: normal;
	color: var(--wp--preset--color--primary);
}

.ln-hero__lead {
	max-width: 46ch;
	opacity: 0.94;
}

/* Photo panel, tilted a touch so the hero is not a plain grid. */
.ln-hero__media img {
	border-radius: var(--ln-radius-lg);
	box-shadow: var(--ln-shadow-lg);
	transform: rotate(1.6deg);
	transition: transform 0.4s var(--ln-ease);
}

.ln-hero__media:hover img {
	transform: rotate(0deg) scale(1.01);
}

/* Confetti mark tucked behind the photo panel. */
.ln-hero__media {
	position: relative;
	isolation: isolate;
}

.ln-hero__media::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: auto -2.5rem -2.5rem auto;
	width: 190px;
	height: 190px;
	background-image: url("img/ln-pattern.svg");
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0.55;
	transform: rotate(-6deg);
}

/* Scroll cue at the foot of the hero. */
.ln-scroll-cue {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--wp--preset--font-family--secondary);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	/* Not lower: this is x-small text on the dimmed hero photo, where 0.75
	   came to 4.2:1 against the brightest backdrop the dim still allows. */
	opacity: 0.85;
	transition: opacity 0.2s var(--ln-ease);
}

.ln-scroll-cue:hover {
	opacity: 1;
}

.ln-scroll-cue::after {
	content: "";
	width: 1.6rem;
	height: 1px;
	background: currentcolor;
	animation: ln-cue 1.8s var(--ln-ease) infinite;
}

@keyframes ln-cue {
	0%, 100% { transform: translateX(0); opacity: 0.5; }
	50%      { transform: translateX(6px); opacity: 1; }
}

@media (max-width: 781px) {
	.ln-hero__media img {
		transform: none;
	}

	.ln-hero__media::before {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ln-hero__media img,
	.ln-hero__media:hover img {
		transform: none;
		transition: none;
	}

	.ln-scroll-cue::after {
		animation: none;
	}
}

/* -------------------------------------------------------------------------
   8. Header
   ---------------------------------------------------------------------- */

/* The glass surface sits in a pseudo-element, not on the header itself.

   A backdrop-filter other than `none` turns an element into the containing
   block for every position: fixed descendant. Core's overlay menu is exactly
   that (`.wp-block-navigation__responsive-container { position: fixed; inset:
   0 }`), so with the filter on .ln-header the open mobile menu was clipped to
   the height of the header bar instead of covering the viewport. */
.ln-header {
	position: sticky;
	top: 0;
	z-index: 100;
	isolation: isolate;
}

.ln-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: rgb(255 255 255 / 82%);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	transition: box-shadow 0.25s var(--ln-ease), background-color 0.25s var(--ln-ease);
}

/* Raise the header off the page once it starts scrolling. Progressive:
   browsers without scroll-driven animations simply keep the flat header. */
@supports (animation-timeline: scroll()) {
	.ln-header::before {
		animation: ln-header-lift linear both;
		animation-timeline: scroll();
		animation-range: 0 120px;
	}

	@keyframes ln-header-lift {
		to {
			background-color: rgb(255 255 255 / 94%);
			box-shadow: 0 1px 0 rgb(60 60 59 / 8%), 0 12px 28px -20px rgb(60 60 59 / 45%);
		}
	}
}

.ln-header .wp-block-site-logo img {
	transition: transform 0.25s var(--ln-ease);
}

.ln-header .wp-block-site-logo a:hover img {
	transform: scale(1.03);
}

/* Nav links: quiet by default, brand underline that grows on hover. */
.ln-header .wp-block-navigation-item__content {
	position: relative;
	font-weight: 600;
	padding-block: 0.35rem;
	text-decoration: none;
}

.ln-header .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--wp--preset--color--primary), var(--wp--preset--color--primary-alt));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.24s var(--ln-ease);
}

.ln-header .wp-block-navigation-item__content:hover::after,
.ln-header .wp-block-navigation-item__content:focus-visible::after {
	transform: scaleX(1);
}

/* The page currently being viewed keeps its underline. The marker hangs off
   aria-current, which core sets on the entry whose target is the queried page
   — so what is shown and what is announced come from the same place. Weight
   and a line, not a colour: it stays readable without colour vision. */
.ln-header .wp-block-navigation-item__content[aria-current="page"] {
	font-weight: 700;
}

.ln-header .wp-block-navigation-item__content[aria-current="page"]::after {
	transform: scaleX(1);
}

/* The overlay menu on small screens should not inherit the underline trick. */
.ln-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	display: none;
}

/* …so the current page is marked with a real underline there instead. */
.ln-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current="page"] {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

@media (prefers-reduced-motion: reduce) {
	.ln-header::before,
	.ln-header .wp-block-navigation-item__content::after,
	.ln-header .wp-block-site-logo img {
		transition: none;
		animation: none;
	}
}

/* -------------------------------------------------------------------------
   9. Buttons
   ---------------------------------------------------------------------- */

.wp-element-button,
.wp-block-button__link {
	transition: transform 0.18s var(--ln-ease), box-shadow 0.18s var(--ln-ease), background-color 0.18s var(--ln-ease);
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -12px rgb(60 60 59 / 45%);
}

/* Outline buttons on dark surfaces get a readable hover fill. */
.ln-cover-tint .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.has-ln-verlauf-tief-gradient-background .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: rgb(255 255 255 / 16%);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link:hover {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
   10. Events (ln-brand/events block)
   ---------------------------------------------------------------------- */

.ln-events__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.7rem;
}

.ln-event__link {
	display: flex;
	align-items: center;
	gap: 1.15rem;
	padding: 1rem 1.25rem;
	border-radius: var(--ln-radius-sm);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--main);
	text-decoration: none;
	border: 1px solid var(--wp--preset--color--border-light);
	transition: transform 0.18s var(--ln-ease), box-shadow 0.18s var(--ln-ease), border-color 0.18s var(--ln-ease);
}

.ln-event__link:hover,
.ln-event__link:focus-visible {
	transform: translateY(-2px);
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 10px 26px -16px rgb(60 60 59 / 35%);
	text-decoration: none;
}

/* Date chip, built like a torn-off calendar leaf: month band, day, weekday.
   The band uses the deep gradient, not the light one — white clears 4.9:1 on
   the deep variant and only 2.3:1 on the light one. */
.ln-event__date {
	flex: 0 0 auto;
	display: grid;
	width: 3.9rem;
	overflow: hidden;
	border-radius: 14px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border-light);
	box-shadow: 0 6px 14px -10px rgb(60 60 59 / 55%);
	font-family: var(--wp--preset--font-family--secondary);
	line-height: 1;
	text-align: center;
	transition: transform 0.18s var(--ln-ease);
}

.ln-event__month {
	padding: 0.36rem 0 0.32rem;
	background: var(--wp--preset--gradient--ln-verlauf-tief);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ln-event__day {
	padding: 0.4rem 0 0.14rem;
	font-size: 1.6rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--main);
}

.ln-event__weekday {
	padding-bottom: 0.4rem;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--main-accent);
}

.ln-event__link:hover .ln-event__date,
.ln-event__link:focus-visible .ln-event__date {
	transform: translateY(-1px) rotate(-1.5deg);
}

.ln-event__body {
	display: grid;
	gap: 0.15rem;
	min-width: 0;
}

.ln-event__title {
	font-family: var(--wp--preset--font-family--secondary);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.ln-event__meta {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--main-accent);
}

.ln-event__excerpt {
	margin-top: 0.35rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--main-accent);
	line-height: 1.55;
}

/* Card grid for the events archive. */
.ln-events--cards .ln-events__list {
	grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
	gap: 1rem;
}

.ln-events--cards .ln-event__link {
	align-items: flex-start;
	height: 100%;
	padding: 1.35rem 1.4rem;
	border-radius: var(--ln-radius);
}

.ln-events__group + .ln-events__group {
	margin-top: 2.6rem;
}

/* Month label: small caps line with a rule running to the right of it. */
.ln-events__group-title {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0 0 0.9rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-accent);
}

.ln-events__group-title::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--wp--preset--color--border-light);
}

.ln-events--dark .ln-events__group-title {
	color: #fff;
}

.ln-events--dark .ln-events__group-title::after {
	background: rgb(255 255 255 / 30%);
}

.ln-events__more {
	margin-top: 1.1rem;
	font-family: var(--wp--preset--font-family--secondary);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
}

.ln-events__empty {
	margin: 0;
	padding: 1.1rem 1.25rem;
	border-radius: var(--ln-radius-sm);
	border: 1px dashed var(--wp--preset--color--border-light);
	color: var(--wp--preset--color--main-accent);
	font-size: var(--wp--preset--font-size--small);
}

.ln-events--dark .ln-event__link,
.ln-cover-tint .ln-event__link {
	background: rgb(255 255 255 / 12%);
	border-color: rgb(255 255 255 / 22%);
	color: #fff;
	backdrop-filter: blur(3px);
}

.ln-events--dark .ln-event__link:hover,
.ln-cover-tint .ln-event__link:hover {
	background: rgb(255 255 255 / 20%);
	border-color: rgb(255 255 255 / 45%);
}

.ln-events--dark .ln-event__date,
.ln-cover-tint .ln-event__date {
	background: rgb(255 255 255 / 94%);
	border-color: transparent;
}

.ln-events--dark .ln-event__meta,
.ln-cover-tint .ln-event__meta,
.ln-events--dark .ln-event__excerpt,
.ln-cover-tint .ln-event__excerpt {
	color: rgb(255 255 255 / 82%);
}

.ln-events--dark .ln-events__empty {
	color: rgb(255 255 255 / 85%);
	border-color: rgb(255 255 255 / 35%);
}

@media (prefers-reduced-motion: reduce) {
	.ln-event__link,
	.ln-event__link:hover,
	.ln-event__date,
	.ln-event__link:hover .ln-event__date {
		transform: none;
		transition: none;
	}
}

/* -------------------------------------------------------------------------
   11. Event pages (archive and single event)
   ---------------------------------------------------------------------- */

.ln-event-hero__title {
	text-wrap: balance;
	margin-bottom: 0.8rem;
}

/* core/post-terms renders links; on the deep gradient they read as the
   eyebrow's own text rather than as navigation. */
.ln-event-hero .wp-block-post-terms a {
	color: inherit;
	text-decoration: none;
}

.ln-event-hero .wp-block-post-terms a:hover {
	text-decoration: underline;
}

.ln-eventmeta__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	list-style: none;
	margin: 1.4rem 0 0;
	padding: 0;
}

.ln-eventmeta__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.45rem 0.9rem;
	border-radius: 999px;
	background: rgb(255 255 255 / 14%);
	border: 1px solid rgb(255 255 255 / 24%);
	font-family: var(--wp--preset--font-family--secondary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.ln-eventmeta__icon {
	flex: 0 0 auto;
	width: 1.05rem;
	height: 1.05rem;
	opacity: 0.85;
}

/* Detail card beside the description. Deliberately not .ln-card: nothing here
   is clickable as a whole, so it should not lift under the pointer. */
.ln-eventmeta--card {
	padding: 1.75rem 1.6rem;
	border-radius: var(--ln-radius);
	box-shadow: var(--ln-shadow-sm);
	background: var(--wp--preset--color--tertiary);
	border: 1px solid rgb(103 189 156 / 30%);
}

.ln-eventmeta--card .ln-eyebrow {
	color: var(--wp--preset--color--primary-accent);
	margin-bottom: 1.1rem;
}

.ln-eventmeta__list {
	margin: 0;
	display: grid;
	gap: 1.1rem;
}

.ln-eventmeta__row {
	display: grid;
	gap: 0.15rem;
}

.ln-eventmeta__row dt {
	font-family: var(--wp--preset--font-family--secondary);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--main-accent);
}

.ln-eventmeta__row dd {
	margin: 0;
	line-height: 1.5;
}

.ln-eventmeta__map {
	display: inline-block;
	margin-top: 0.35rem;
	font-size: var(--wp--preset--font-size--small);
}

.ln-eventmeta__actions {
	margin: 1.5rem 0 0;
}

.ln-eventmeta__hint {
	margin: 0.65rem 0 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--main-accent);
}

/* Keep the detail card in view while a long description scrolls past. */
@media (min-width: 782px) {
	.ln-event-aside > * {
		position: sticky;
		top: 6.5rem;
	}
}

/* -------------------------------------------------------------------------
   12. Donations (ln-brand/iban block and the Spenden section)
   ---------------------------------------------------------------------- */

.ln-iban {
	position: relative;
	overflow: hidden;
	padding: 1.7rem 1.6rem 1.5rem;
	background: var(--wp--preset--color--base);
	border: 1px solid rgb(103 189 156 / 28%);
}

.ln-iban::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg, var(--wp--preset--color--primary), var(--wp--preset--color--primary-alt));
}

.ln-iban__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
}

.ln-iban__holder {
	margin: 0.3rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--main-accent);
	line-height: 1.5;
}

.ln-iban__data {
	margin: 1.2rem 0 0;
	display: grid;
	gap: 0.85rem;
}

.ln-iban__data dt {
	font-family: var(--wp--preset--font-family--secondary);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--main-accent);
	margin-bottom: 0.1rem;
}

.ln-iban__data dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
}

/* IBAN line: number left, copy button right, wrapping on narrow screens. */
.ln-iban__number dd {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.9rem;
}

.ln-iban__value {
	font-family: var(--wp--preset--font-family--secondary);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	letter-spacing: 0.05em;
}

.ln-iban__copy {
	flex: 0 0 auto;
	cursor: pointer;
	border: 1px solid var(--wp--preset--color--primary-accent);
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--primary-accent);
	font-family: var(--wp--preset--font-family--secondary);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.4rem 0.95rem;
	transition: background-color 0.18s var(--ln-ease), color 0.18s var(--ln-ease);
}

.ln-iban__copy:hover,
.ln-iban__copy.is-copied {
	background: var(--wp--preset--color--primary-accent);
	color: #fff;
}

.ln-iban__note {
	margin: 1.2rem 0 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--main-accent);
	line-height: 1.55;
}

/* Live region for the copy confirmation; never occupies layout space. */
.ln-iban__status {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* The photo-with-badge pair used to live here as .ln-spenden__*. It is a
   general device now and sits with the other media utilities in 5. */

/* -------------------------------------------------------------------------
   13. Map (ln-brand/map block)
   ---------------------------------------------------------------------- */

.ln-map {
	--ln-map-height: 460px;

	position: relative;
	border-radius: var(--ln-radius);
	overflow: hidden;
	box-shadow: var(--ln-shadow-sm);
	background: var(--wp--preset--color--tertiary);
}

.ln-map__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	text-align: center;
	min-height: var(--ln-map-height);
	padding: 2rem 1.5rem;
	background-image: url("img/ln-pattern.svg");
	background-size: 64px 64px;
	background-repeat: repeat;
}

.ln-map__placeholder::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(255 255 255 / 72%);
	pointer-events: none;
}

.ln-map__placeholder > * {
	position: relative;
	z-index: 1;
	margin: 0;
}

.ln-map__notice {
	max-width: 42ch;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--main);
}

.ln-map__actions {
	margin-top: 0.9rem !important;
}

.ln-map__button {
	cursor: pointer;
	border: 0;
	font-family: var(--wp--preset--font-family--secondary);
}

.ln-map__fallback {
	margin-top: 0.5rem !important;
	font-size: var(--wp--preset--font-size--x-small);
}

.ln-map__frame {
	display: block;
	width: 100%;
	height: var(--ln-map-height);
	border: 0;
}

/* -------------------------------------------------------------------------
   14. Forms (Fluent Forms inside brand sections)
   ---------------------------------------------------------------------- */

.ln-form .frm-fluent-form input[type="text"],
.ln-form .frm-fluent-form input[type="email"],
.ln-form .frm-fluent-form textarea {
	border-radius: var(--ln-radius-sm);
	border: 1px solid rgb(255 255 255 / 28%);
	background: rgb(255 255 255 / 10%);
	color: #fff;
	padding: 0.85rem 1rem;
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--base);
	width: 100%;
}

/* Placeholders are text and owe the same 4.5:1 as any other. Over the field
   (10% white on the 84% dimmed cover) 60% white came to 3.1:1; 90% clears it
   with room to spare even if the photograph behind is the brightest possible. */
.ln-form .frm-fluent-form input::placeholder,
.ln-form .frm-fluent-form textarea::placeholder {
	color: rgb(255 255 255 / 90%);
}

.ln-form .frm-fluent-form label {
	color: #fff;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.ln-form .frm-fluent-form input:focus-visible,
.ln-form .frm-fluent-form textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	background: rgb(255 255 255 / 16%);
}

.ln-form .frm-fluent-form .ff-btn-submit {
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--main);
	font-family: var(--wp--preset--font-family--secondary);
	font-weight: 700;
	padding: 0.9rem 1.9rem;
	border: 0;
	cursor: pointer;
	transition: transform 0.18s var(--ln-ease), background-color 0.18s var(--ln-ease);
}

.ln-form .frm-fluent-form .ff-btn-submit:hover {
	background: #7dd0b1;
	transform: translateY(-2px);
}

.ln-form .frm-fluent-form .ff-el-form-check-label,
.ln-form .frm-fluent-form .ff-el-input--label label {
	color: #fff;
}

/* Variant for a mid-dark brand colour rather than a dimmed photograph.

   The translucent fields above rely on how dark the cover is. On the dark
   purple the same 10% white fill lands at #6f5f8d, where the 90% white
   placeholder measures 4.05:1 and the 28% white border 1.66:1 — both fail,
   and no alpha value fixes both at once. So the fields stop being translucent
   and become what a form usually is: white, with dark text. The labels stay
   white, they sit on the purple and not in a field.

   The focus ring changes with them: the light brand green marks a field at
   2.2:1 on white, the dark one at 4.97:1.

   What identifies a field here is its white fill against the purple (7.34:1),
   not the hairline: that border measures 7.50:1 against the fill it encloses
   and next to nothing against the purple outside it, which is fine — it is
   drawing an edge, not carrying the identification. */
.ln-form--hell .frm-fluent-form input[type="text"],
.ln-form--hell .frm-fluent-form input[type="email"],
.ln-form--hell .frm-fluent-form textarea {
	background: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--border-dark);
	color: var(--wp--preset--color--main);
}

.ln-form--hell .frm-fluent-form input::placeholder,
.ln-form--hell .frm-fluent-form textarea::placeholder {
	color: var(--wp--preset--color--main-accent);
}

.ln-form--hell .frm-fluent-form input:focus-visible,
.ln-form--hell .frm-fluent-form textarea:focus-visible {
	background: var(--wp--preset--color--base);
	outline-color: var(--wp--preset--color--primary-accent);
}

/* -------------------------------------------------------------------------
   15. Accessibility
   ---------------------------------------------------------------------- */

/* Safety net for everything the per-component rules above do not reach —
   Ollie, Fluent Forms, The Events Calendar and whatever gets added later.
   Motion is not removed but reduced to nothing: an element still ends up where
   it belongs, it just no longer travels there. Deliberately blunt, because the
   alternative is remembering this at every future hover state. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

.ln-cover-tint :where(a, button, input, textarea):focus-visible,
.has-ln-verlauf-tief-gradient-background :where(a, button):focus-visible {
	outline-color: #fff;
}

/* On the dark brand surfaces a link inherits the white it sits in. The link
   green from theme.json would land at 1.6:1 on the dark purple — invisible,
   not merely tight. The underline carries the link on its own. */
.has-ln-verlauf-gradient-background a:not(.wp-element-button),
.has-ln-verlauf-tief-gradient-background a:not(.wp-element-button),
.has-primary-alt-accent-background-color a:not(.wp-element-button) {
	color: inherit;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* Links and buttons only. A field on this surface is white (14), and a white
   ring around a white field marks nothing. */
.has-primary-alt-accent-background-color :where(a, button):focus-visible {
	outline-color: #fff;
}

/* -------------------------------------------------------------------------
   16. Back to top
   ---------------------------------------------------------------------- */

/* The strip an IntersectionObserver watches (assets/js/back-to-top.js): as
   long as any of it is on screen the reader is still on the first screenful
   and the button keeps out of the way. It is printed at the end of the body
   and only put in place here — see inc/back-to-top.php for why. 90vh puts the
   switch roughly where the hero ends. */
.ln-to-top__sentinel {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 90vh;
	pointer-events: none;
}

.ln-to-top {
	position: fixed;
	right: clamp(1rem, 3vw, 2rem);
	bottom: calc(clamp(1rem, 3vw, 2rem) + env(safe-area-inset-bottom, 0px));
	/* Under the header (100), so the open overlay menu covers the button. */
	z-index: 90;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: var(--wp--preset--color--primary-accent);
	color: var(--wp--preset--color--base);
	box-shadow: var(--ln-shadow);
	cursor: pointer;

	/* visibility rather than opacity alone: while the button is invisible it
	   must also be out of the tab order and out of the accessibility tree.
	   Transitioned, it holds "visible" for the whole fade-out and only then
	   switches, so the button does not vanish mid-animation. */
	visibility: hidden;
	opacity: 0;
	transform: translateY(0.75rem);
	transition: opacity 0.25s var(--ln-ease), transform 0.25s var(--ln-ease),
		visibility 0.25s, background-color 0.2s var(--ln-ease);
}

/* The markup ships with [hidden]; the script clears it. Without this rule the
   author-level `display: grid` above would beat the UA sheet and the attribute
   would do nothing. */
.ln-to-top[hidden] {
	display: none;
}

.ln-to-top.is-visible {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

.ln-to-top:hover,
.ln-to-top:focus-visible {
	background: var(--wp--preset--color--main);
}

.ln-to-top__icon {
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	.ln-to-top {
		transform: none;
		transition: none;
	}
}

@media print {
	.ln-to-top {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   17. Page head (subpages)
   ---------------------------------------------------------------------- */

/* Every page that is not the front page opens with the same band: deep brand
   gradient, the x/+ pattern fading out downwards, the title and the page
   excerpt as a lead. The markup lives in the theme's templates/page.html,
   which is why nothing here may depend on a wrapper the editor could delete.

   The lead is set in full white on purpose. Toned down to 92% it measures
   4.51:1 against the lightest end of the gradient (#2f7d61) — technically a
   pass for its 20px, but with no margin left for a rounding error. */

.ln-pagehead__title {
	text-wrap: balance;
	margin-bottom: 0;
}

/* Accent rule between title and lead, in the two brand colours that carry no
   text anywhere else. Purely decorative, hence no contrast requirement. */
.ln-pagehead__title::after {
	content: "";
	display: block;
	width: 4.5rem;
	height: 4px;
	margin-top: 1.5rem;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--wp--preset--color--primary), var(--wp--preset--color--ln-gelb));
}

.ln-pagehead__lead {
	max-width: 54ch;
	margin-top: 1.2rem;
	margin-bottom: 0;
}

/* core/post-excerpt wraps the text in a paragraph of its own, which brings the
   block gap along as a bottom margin. */
.ln-pagehead__lead .wp-block-post-excerpt__excerpt {
	margin: 0;
}

/* Breathing room for content that does not bring its own.

   Every page assembled from the patterns is a stack of full-width sections,
   and each of those carries its own padding. A page somebody writes by hand in
   the editor is not: it starts with a heading and ends with a paragraph, and
   without this it would butt straight against the dark page head above and the
   footer below. Aligned children are excluded, so the pattern pages keep the
   spacing they already have instead of collecting a second helping. */
.wp-block-post-content > :first-child:not(.alignfull) {
	margin-top: var(--wp--preset--spacing--x-large);
}

.wp-block-post-content > :last-child:not(.alignfull) {
	margin-bottom: var(--wp--preset--spacing--xx-large);
}

/* -------------------------------------------------------------------------
   18. Panels, link cards and card grids
   ---------------------------------------------------------------------- */

/* Card that is not clickable as a whole, so it must not lift under the
   pointer — the lift is what tells a reader that .ln-card is a target. */
.ln-panel {
	border-radius: var(--ln-radius);
	box-shadow: var(--ln-shadow-sm);
	border: 1px solid var(--wp--preset--color--border-light);
}

/* Contact details as typography, not as three boxes.

   The address is what somebody came to the page for, so it is set at headline
   size and the label above it stays out of the way. A hairline between the
   rows does the grouping a card would otherwise do, which keeps the eye on
   the addresses instead of on six borders. */
.ln-contact {
	margin-top: 2.2rem;
}

.ln-contact__row {
	padding: 1.15rem 0;
	border-top: 1px solid var(--wp--preset--color--border-light);
}

.ln-contact__row:last-child {
	border-bottom: 1px solid var(--wp--preset--color--border-light);
}

.ln-contact__label {
	margin: 0 0 0.2rem;
	font-family: var(--wp--preset--font-family--secondary);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--main-accent);
}

/* Allowed to break mid-word: an e-mail address offers nowhere else to wrap
   and would otherwise push the column wider than its share. */
.ln-contact__value {
	margin: 0;
	font-family: var(--wp--preset--font-family--secondary);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.015em;
	overflow-wrap: anywhere;
}

.ln-contact__value a {
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.ln-contact__hint {
	margin: 0.45rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--main-accent);
}

/* Card whose whole area is one link. The link sits in the heading and is
   stretched over the card by the pseudo-element below, so the card gains a
   hit area without gaining entries in the tab order. */
.ln-linkcard {
	position: relative;
	border: 1px solid rgb(103 189 156 / 30%);
}

.ln-linkcard__title {
	margin-bottom: 0.65rem;
}

.ln-linkcard__title a {
	display: inline-flex;
	align-items: baseline;
	gap: 0.55rem;
	color: inherit;
	text-decoration: none;
}

.ln-linkcard__title a::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--ln-radius);
}

/* Aligned like the eyebrow's spark: on the baseline, then nudged up onto the
   cap centre by a ratio, so it holds at every font size. */
.ln-linkcard__title a::after {
	content: "";
	flex: 0 0 auto;
	width: 0.8em;
	height: 0.8em;
	transform: translateY(0.08em);
	background-color: var(--wp--preset--color--primary-accent);
	-webkit-mask: url("img/ln-arrow.svg") no-repeat center / contain;
	mask: url("img/ln-arrow.svg") no-repeat center / contain;
	transition: transform 0.22s var(--ln-ease);
}

.ln-linkcard:hover .ln-linkcard__title a::after {
	transform: translateY(0.08em) translateX(0.3rem);
}

.ln-linkcard:hover .ln-linkcard__title a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The focus ring belongs around the card, not around the few words of the
   heading — the card is what the key press activates. Guarded by @supports so
   that a browser without :has() keeps the ordinary ring on the link instead of
   ending up with none. */
@supports selector(:has(*)) {
	.ln-linkcard:has(a:focus-visible) {
		outline: 2px solid var(--wp--preset--color--primary-accent);
		outline-offset: 3px;
	}

	.ln-linkcard__title a:focus-visible {
		outline: none;
	}
}

/* Spark bullets in the second brand colour, for lists on cards that carry the
   purple eyebrow (6). */
.ln-list-spark--lila li::before {
	background-color: var(--wp--preset--color--primary-alt-accent);
	opacity: 1;
}

/* Aside in the reading flow: a short note, set off by the accent colour.
   Its links inherit the text colour — the link green measures 3.25:1 on the
   brand yellow and would fail; anthracite on yellow is 7.22:1, and the
   underline keeps the link recognisable without colour. */
.ln-note {
	border-radius: var(--ln-radius-sm);
	border-left: 5px solid var(--wp--preset--color--main);
}

.ln-note a {
	color: inherit;
}

@media (prefers-reduced-motion: reduce) {
	.ln-linkcard:hover .ln-linkcard__title a::after {
		transform: translateY(0.08em);
	}
}

/* -------------------------------------------------------------------------
   19. Text pages (Impressum, Datenschutz)
   ---------------------------------------------------------------------- */

/* Long legal copy on a sheet of its own, so it reads as a document rather
   than as another section of the site. The rule above each h2 does the work a
   section background does elsewhere: it groups. */
.ln-prose > h2 {
	margin-top: 3rem;
	padding-top: 1.7rem;
	border-top: 1px solid var(--wp--preset--color--border-light);
}

.ln-prose > h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* The notice at the top of the legal pages already separates itself. */
.ln-prose > .ln-note + h2 {
	padding-top: 0;
	border-top: 0;
}

.ln-prose > h3 {
	margin-top: 2rem;
}