/*
Reset, root box-model rules and the design system components from
docs/decisions.md section 6, ported from docs/mockup/mockup-v3.html.

Context colours: --csd-fg/--csd-bg/--csd-muted/--csd-focus are set once in
theme.json (styles.css) for the default light page, and overridden inside
the "Helle Section"/"Dunkle Section" Group block style variations
(theme.json styles.blocks.core/group.variations) so every component below
inherits the right colours without knowing which zebra band it's in.
*/

:root {
	box-sizing: border-box;
	padding-top: env(safe-area-inset-top, 0px);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	scroll-padding-top: env(safe-area-inset-top, 0px);
}

body {
	margin: 0;
	background: var(--csd-bg);
	color: var(--csd-fg);
}

img,
svg {
	max-width: 100%;
}

a {
	color: inherit;
}

h1,
h2,
h3 {
	text-wrap: balance;
}

/* ---------- Focus ---------- */

:focus-visible {
	outline: 4px solid var(--csd-focus);
	outline-offset: 4px;
}

[tabindex="-1"]:focus {
	outline: none;
}

.site-header,
.site-footer {
	--csd-focus: var(--wp--preset--color--yellow);
}

/* ---------- Section colours: text colour on each (docs/decisions.md 4.1) ---------- */

:root {
	--csd-gutter: clamp(1rem, 4vw, 3rem);
	--csd-on-red: var(--wp--preset--color--white);
	--csd-on-orange: var(--wp--preset--color--black);
	--csd-on-yellow: var(--wp--preset--color--black);
	--csd-on-green: var(--wp--preset--color--black);
	--csd-on-blue: var(--wp--preset--color--white);
	--csd-on-violet: var(--wp--preset--color--white);
}

/* ---------- Header (docs/decisions.md 6 "Header"): row 1 + row 2 ---------- */
/* Markup from plugins/csd-navigation (csd/primary-navigation, csd/section-navigation, task 10). */

.site-header {
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

.site-header .header-inner {
	display: grid;
	grid-template-columns: auto minmax(0, 54rem);
	justify-content: space-between;
	align-items: end;
	column-gap: 2rem;
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding: 1.25rem clamp(1rem, 4vw, 3rem) 0;
}

.site-header .wp-block-site-logo img {
	display: block;
	width: clamp(8.5rem, 15vw, 11rem);
	height: auto;
}

.primary-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

.primary-nav li {
	margin: 0;
}

.primary-nav a {
	display: block;
	padding: 1rem 0.5rem 0.8rem;
	text-align: center;
	white-space: nowrap;
	color: inherit;
	font-family: var(--wp--preset--font-family--jost);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 8px solid transparent;
}

/* Rainbow state (no active section): every item's own colour as the underline. */
.csd-no-section .primary-nav a.csd-color-red { border-bottom-color: var(--wp--preset--color--red); }
.csd-no-section .primary-nav a.csd-color-orange { border-bottom-color: var(--wp--preset--color--orange); }
.csd-no-section .primary-nav a.csd-color-yellow { border-bottom-color: var(--wp--preset--color--yellow); }
.csd-no-section .primary-nav a.csd-color-green { border-bottom-color: var(--wp--preset--color--green); }
.csd-no-section .primary-nav a.csd-color-blue { border-bottom-color: var(--wp--preset--color--blue); }
.csd-no-section .primary-nav a.csd-color-violet { border-bottom-color: var(--wp--preset--color--violet); }

/* Section state (the active item) and hover (any item): fill with its own colour. */
.primary-nav a.csd-color-red:hover, .primary-nav a.csd-color-red[aria-current] { background: var(--wp--preset--color--red); color: var(--csd-on-red); }
.primary-nav a.csd-color-orange:hover, .primary-nav a.csd-color-orange[aria-current] { background: var(--wp--preset--color--orange); color: var(--csd-on-orange); }
.primary-nav a.csd-color-yellow:hover, .primary-nav a.csd-color-yellow[aria-current] { background: var(--wp--preset--color--yellow); color: var(--csd-on-yellow); }
.primary-nav a.csd-color-green:hover, .primary-nav a.csd-color-green[aria-current] { background: var(--wp--preset--color--green); color: var(--csd-on-green); }
.primary-nav a.csd-color-blue:hover, .primary-nav a.csd-color-blue[aria-current] { background: var(--wp--preset--color--blue); color: var(--csd-on-blue); }
.primary-nav a.csd-color-violet:hover, .primary-nav a.csd-color-violet[aria-current] { background: var(--wp--preset--color--violet); color: var(--csd-on-violet); }

.section-nav {
	display: block;
	width: 100%;
}

.section-nav ul {
	list-style: none;
	margin: 0;
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding: 0 clamp(1rem, 4vw, 3rem);
	display: flex;
	flex-wrap: wrap;
	column-gap: 1.75rem;
}

.section-nav li {
	margin: 0;
}

.section-nav a {
	display: inline-block;
	padding: 0.75rem 0 0.6rem;
	font-family: var(--wp--preset--font-family--jost);
	font-weight: 600;
	color: inherit;
	text-decoration: none;
	border-bottom: 3px solid transparent;
}

.section-nav a:hover,
.section-nav a[aria-current] {
	border-bottom-color: currentColor;
}

.section-nav.csd-color-red { background: var(--wp--preset--color--red); color: var(--csd-on-red); }
.section-nav.csd-color-orange { background: var(--wp--preset--color--orange); color: var(--csd-on-orange); }
.section-nav.csd-color-yellow { background: var(--wp--preset--color--yellow); color: var(--csd-on-yellow); }
.section-nav.csd-color-green { background: var(--wp--preset--color--green); color: var(--csd-on-green); }
.section-nav.csd-color-blue { background: var(--wp--preset--color--blue); color: var(--csd-on-blue); }
.section-nav.csd-color-violet { background: var(--wp--preset--color--violet); color: var(--csd-on-violet); }

@media (max-width: 69rem) {
	.site-header .header-inner {
		grid-template-columns: 1fr;
		justify-content: start;
	}

	.primary-nav ul {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.primary-nav a {
		padding: 0.85rem 0.25rem 0.7rem;
		font-size: 0.95rem;
	}
}

@media (max-width: 52rem) {
	.site-header .wp-block-site-logo img {
		width: 6rem;
	}

	.section-nav ul {
		column-gap: 1.25rem;
	}
}

/* ---------- Rainbow flag ---------- */

.csd-flag {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	height: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.csd-flag li {
	margin: 0;
}

.csd-flag li:nth-child(1) {
	background: var(--wp--preset--color--red);
}

.csd-flag li:nth-child(2) {
	background: var(--wp--preset--color--orange);
}

.csd-flag li:nth-child(3) {
	background: var(--wp--preset--color--yellow);
}

.csd-flag li:nth-child(4) {
	background: var(--wp--preset--color--green);
}

.csd-flag li:nth-child(5) {
	background: var(--wp--preset--color--blue);
}

.csd-flag li:nth-child(6) {
	background: var(--wp--preset--color--violet);
}

/* ---------- Buttons (core/button) ---------- */
/* Default style: 3px outline, transparent fill. "Gefuellt" style: filled, hover inverts. */

.wp-block-button__link {
	border: 3px solid var(--csd-fg);
	border-radius: 0;
	padding: 0.85em 1.6em;
	font-family: var(--wp--preset--font-family--jost);
	font-weight: 600;
	font-size: 1.05rem;
	line-height: 1.2;
	background-color: transparent;
	color: var(--csd-fg);
}

.wp-block-button__link:hover {
	background-color: var(--csd-fg);
	color: var(--csd-bg);
}

.wp-block-button.is-style-filled .wp-block-button__link {
	background-color: var(--csd-fg);
	border-color: var(--csd-fg);
	color: var(--csd-bg);
}

.wp-block-button.is-style-filled .wp-block-button__link:hover {
	background-color: transparent;
	color: var(--csd-fg);
}

/* A button with an explicit editor colour (e.g. inside the Unterstuetzen/Kontakt duo)
   keeps that colour as its own border/fill instead of --csd-fg/--csd-bg. */
.wp-block-button__link.has-background {
	border-color: currentColor;
}

/* ---------- Link rows ---------- */

.csd-link-rows {
	list-style: none;
	margin: 0;
	padding: 0;
}

.csd-link-rows li {
	margin: 0;
}

.csd-link-rows a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 0.9rem 0;
	border-top: 3px solid var(--csd-fg);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--antonio);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--link-row);
	line-height: 1.1;
}

.csd-link-rows li:last-child a {
	border-bottom: 3px solid var(--csd-fg);
}

.csd-link-rows .csd-lr-label {
	text-decoration-thickness: 4px;
	text-underline-offset: 0.18em;
}

.csd-link-rows a:hover .csd-lr-label {
	text-decoration: underline;
}

.csd-link-rows .csd-arrow {
	flex: none;
}

/* "Alle Jahre" variant (csd/year-list, task 15): year number in the same
   spot as .csd-lr-label, plus a motto that stays regular weight/case so it
   doesn't compete with the year number. */

.csd-years-list .csd-lr-motto {
	font-family: var(--wp--preset--font-family--jost);
	font-weight: 400;
	text-transform: none;
	font-size: 1.1rem;
}

/* ---------- Year hero (docs/decisions.md 4.6 "year-hero") ---------- */
/* Markup from plugins/csd-years (csd/year-hero, task 12). */

.csd-hero {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 1.5rem;
	row-gap: 2rem;
	align-items: start;
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding: clamp(2rem, 5vw, 4rem) var(--csd-gutter) clamp(2.5rem, 6vw, 4.5rem);
}

.csd-head {
	grid-column: 1 / 8;
	grid-row: 1;
}

.csd-head h1 {
	font-size: var(--wp--preset--font-size--hero-title);
}

.csd-motto {
	margin: 0.75rem 0 0;
	font-weight: 600;
	font-size: clamp(1.25rem, 2.2vw, 1.6rem);
	line-height: 1.3;
}

.csd-date-block {
	grid-column: 9 / 13;
	grid-row: 1 / span 2;
	margin: 0;
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

.csd-date-block time {
	display: grid;
	grid-template-areas: "wd" "day" "my";
	padding: 1.5rem 1.5rem 1.25rem;
}

.csd-d-wd {
	grid-area: wd;
	font-weight: 600;
	font-size: 1.15rem;
}

.csd-d-day {
	grid-area: day;
	font-family: var(--wp--preset--font-family--antonio);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--date-day);
	line-height: 1;
}

.csd-d-my {
	grid-area: my;
	font-family: var(--wp--preset--font-family--antonio);
	font-weight: 700;
	font-size: clamp(1.8rem, 3vw, 2.5rem);
	line-height: 1.05;
	text-transform: uppercase;
}

/* ---------- Fact rows (year hero: Parade/Straßenfest) ---------- */

.csd-facts {
	grid-column: 1 / 8;
	grid-row: 2;
	list-style: none;
	margin: 0;
	padding: 0;
}

.csd-facts li {
	margin: 0;
}

.csd-facts a,
.csd-facts .csd-fact {
	display: grid;
	grid-template-columns: 7rem 1fr auto;
	column-gap: 1rem;
	align-items: baseline;
	padding: 0.9rem 0;
	border-top: 3px solid var(--csd-fg);
	text-decoration: none;
}

.csd-facts li:last-child a,
.csd-facts li:last-child .csd-fact {
	border-bottom: 3px solid var(--csd-fg);
}

.csd-facts .csd-f-time {
	grid-row: 1 / span 2;
	font-family: var(--wp--preset--font-family--antonio);
	font-weight: 700;
	font-size: clamp(2rem, 3.6vw, 2.9rem);
	line-height: 1;
}

.csd-facts .csd-f-what {
	grid-column: 2;
	font-family: var(--wp--preset--font-family--antonio);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--link-row);
	line-height: 1.05;
	text-transform: uppercase;
	text-decoration-thickness: 4px;
	text-underline-offset: 0.18em;
}

.csd-facts a:hover .csd-f-what {
	text-decoration: underline;
}

.csd-facts .csd-f-where {
	grid-column: 2;
	color: var(--csd-muted);
	font-size: 1rem;
}

.csd-facts .csd-arrow {
	grid-column: 3;
	grid-row: 1 / span 2;
	align-self: center;
	font-size: 1.75rem;
	font-weight: 600;
	padding-right: 0.25rem;
}

@media (max-width: 52rem) {
	.csd-head,
	.csd-facts {
		grid-column: 1 / -1;
	}

	.csd-hero {
		row-gap: 1.5rem;
	}

	.csd-date-block {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.csd-facts {
		grid-row: 3;
	}

	.csd-date-block time {
		grid-template-columns: auto 1fr;
		grid-template-areas: "day wd" "day my";
		column-gap: 1.25rem;
		align-items: center;
		padding: 0.75rem 1.25rem;
	}

	.csd-d-day {
		font-size: 5.5rem;
	}

	.csd-d-wd {
		align-self: end;
	}

	.csd-d-my {
		align-self: start;
	}

	.csd-facts a,
	.csd-facts .csd-fact {
		grid-template-columns: 5rem 1fr auto;
	}
}

/* ---------- Tiles ---------- */

.csd-tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.csd-tile {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	min-height: 10rem;
	padding: 1.25rem;
	border: 3px solid var(--csd-fg);
	color: var(--csd-fg);
	text-decoration: none;
	/* Long German words ("Sicherheitsunterweisung") must not push the page wider in a narrow tile. */
	overflow-wrap: anywhere;
}

.csd-tile strong {
	font-family: var(--wp--preset--font-family--antonio);
	font-weight: 700;
	font-size: clamp(1.8rem, 2.6vw, 2.4rem);
	line-height: 1.05;
	text-transform: uppercase;
}

.csd-tile .csd-t-sub {
	font-size: 1rem;
}

a.csd-tile:hover,
.csd-tile.is-current {
	background: var(--csd-fg);
	color: var(--csd-bg);
}

.csd-tile[aria-current] {
	background: var(--csd-fg);
	color: var(--csd-bg);
}

@media (max-width: 64rem) {
	.csd-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 24rem) {
	.csd-tiles {
		grid-template-columns: minmax(0, 1fr);
	}
}

.csd-tile.has-pdf {
	justify-content: space-between;
}

.csd-tile-link {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	color: inherit;
	text-decoration: none;
}

.csd-tile-pdf {
	align-self: flex-start;
	color: inherit;
	font-size: 1rem;
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 0.18em;
}

/* ---------- Tiles band (csd/year-tiles: overview and siblings) ---------- */

.csd-tiles-band {
	display: block;
	width: 100%;
	padding-block: clamp(2rem, 5vw, 3.5rem);
}

.csd-tiles-band.sub {
	padding-top: 0;
}

.csd-tiles-band.is-dark {
	--csd-fg: var(--wp--preset--color--white);
	--csd-bg: var(--wp--preset--color--black);
	background: var(--csd-bg);
	color: var(--csd-fg);
}

.csd-tiles-band .csd-tiles,
.csd-tiles-band .csd-tiles-heading {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding-inline: var(--csd-gutter);
}

.csd-tiles-heading {
	font-size: clamp(1.8rem, 3vw, 2.4rem);
	padding-top: 1.25rem;
	margin-top: 0;
	margin-bottom: 1.25rem;
	border-top: 8px solid var(--csd-fg);
}

.csd-tiles-heading a {
	color: inherit;
	text-decoration: none;
}

.csd-tiles-heading a:hover {
	text-decoration: underline;
	text-decoration-thickness: 4px;
	text-underline-offset: 0.18em;
}

/* ---------- PDF download button (csd/pdf-download) ---------- */
/* Reuses the core button styling above; this just spaces it above the content. */

.csd-pdf-download {
	margin-bottom: 2rem;
}

/* ---------- Flipbook wrapper (Programmheft pattern) ---------- */
/* 3D FlipBook Lite's own frontend markup isn't inspectable from this cloud
   session (CLAUDE.md hard rule 12), so this only constrains the box the
   plugin renders into, per decisions.md 6 — the plugin's internal styling
   can't be restyled much beyond that. */

.csd-flipbook {
	max-width: 56rem;
	margin-inline: auto;
	margin-top: 1.5rem;
}

/* ---------- News cards ---------- */
/* .csd-news-item styles the bespoke <li class="csd-news-item"> markup from
   docs/mockup/test-page.html; ".csd-news-list > li" styles the same look on
   core's own Query Loop output (plugins/csd-years' "is-year-news" pattern,
   task 15), whose <li> only ever carries core's own "wp-block-post" class. */

.csd-news-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem 1.5rem;
	padding-top: 2rem;
}

/* The grid gap spaces the cards; without this reset core's flow layout would
   offset every card except the first one. */
.csd-news-item,
.csd-news-list > li {
	margin-block-start: 0;
	padding-top: 1.25rem;
	border-top: 12px solid var(--csd-fg);
}

/* Cards carry the card's own spacing; the page gutter for post titles would indent them. */
.csd-news-list .wp-block-post-title {
	padding-inline: 0;
}

.csd-news-item time,
.csd-news-list > li time {
	display: block;
	font-weight: 600;
	color: var(--csd-muted);
}

.csd-news-item :is(h2, h3),
.csd-news-list > li :is(h2, h3) {
	margin-top: 0.35rem;
	font-size: var(--wp--preset--font-size--card-title);
}

.csd-news-item :is(h2, h3) a,
.csd-news-list > li :is(h2, h3) a {
	text-decoration: none;
	text-decoration-thickness: 4px;
	text-underline-offset: 0.18em;
}

.csd-news-item :is(h2, h3) a:hover,
.csd-news-list > li :is(h2, h3) a:hover {
	text-decoration: underline;
}

.csd-news-item p,
.csd-news-list > li p {
	margin: 0.75rem 0 0;
}

@media (max-width: 52rem) {
	.csd-news-list {
		grid-template-columns: 1fr;
	}
}

/* ---------- Page gutter ----------
   The templates' <main> is as wide as the content (80rem) and has no padding,
   so below that width text would touch the screen edge. Instead of padding
   <main>, the page title, the footer and every top-level block of the page
   content get the mockup's --csd-gutter. Components that bring their own
   gutter (.csd-hero, .csd-tiles-band, .csd-duo) or are meant to bleed
   (.alignfull) are excluded so they are not indented twice. */

.wp-block-post-title,
.site-footer,
.wp-block-post-content > :where(:not(.alignfull, .csd-hero, .csd-tiles-band, .csd-duo)) {
	padding-inline: var(--csd-gutter);
}

/* ---------- Page head, news archive, single post ----------
   Page head of the posts page, category archives and single posts
   (mockup ".page-head"); the news archive reuses the card look of
   ".csd-news-list" and only adds the page gutter and spacing. */

.csd-page-head {
	padding: clamp(2rem, 5vw, 3.5rem) var(--csd-gutter) clamp(1.5rem, 4vw, 2.5rem);
}

.csd-page-head .wp-block-post-title {
	padding-inline: 0;
}

.csd-page-head :is(h1, .wp-block-post-title) {
	font-size: clamp(2.8rem, 6.5vw, 5.5rem);
}

.csd-page-head .csd-lead {
	max-width: 40rem;
	margin: 0.75rem 0 0;
	font-size: 1.25rem;
}

.csd-page-head .wp-block-post-date {
	font-weight: 600;
	color: var(--csd-muted);
}

.csd-news-archive,
.csd-back-link {
	padding-inline: var(--csd-gutter);
	padding-bottom: clamp(3rem, 7vw, 5rem);
}

.csd-back-link {
	margin-top: 2rem;
}

/* Cards in the colour of the current section (body.csd-color-*, set by plugins/csd-navigation). */
body.csd-color-red { --csd-section-c: var(--wp--preset--color--red); }
body.csd-color-orange { --csd-section-c: var(--wp--preset--color--orange); }
body.csd-color-yellow { --csd-section-c: var(--wp--preset--color--yellow); }
body.csd-color-green { --csd-section-c: var(--wp--preset--color--green); }
body.csd-color-blue { --csd-section-c: var(--wp--preset--color--blue); }
body.csd-color-violet { --csd-section-c: var(--wp--preset--color--violet); }

.csd-news-archive .csd-news-list > li {
	border-top-color: var(--csd-section-c, var(--csd-fg));
}

/* Pagination: previous/next look like outline buttons, the numbers stay plain links. */
.csd-news-archive .wp-block-query-pagination {
	margin-top: 2.5rem;
	gap: 1rem 2rem;
}

.csd-news-archive :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
	border: 3px solid var(--csd-fg);
	padding: 0.85em 1.6em;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}

.csd-news-archive :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next):hover {
	background-color: var(--csd-fg);
	color: var(--csd-bg);
}

/* ---------- Duo (Unterstuetzen | Kontakt) ---------- */

.csd-duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.csd-duo > * {
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
	padding-inline: var(--csd-gutter);
}

.csd-duo > :first-child {
	padding-left: max(var(--csd-gutter), calc((100vw - var(--wp--style--global--content-size)) / 2 + var(--csd-gutter)));
}

.csd-duo > :last-child {
	padding-right: max(var(--csd-gutter), calc((100vw - var(--wp--style--global--content-size)) / 2 + var(--csd-gutter)));
}

.csd-duo > .is-blue,
.csd-duo > .is-violet {
	background: var(--csd-c);
	color: var(--csd-on);
	--csd-fg: var(--csd-on);
	--csd-bg: var(--csd-c);
}

.csd-duo > .is-blue {
	--csd-c: var(--wp--preset--color--blue);
	--csd-on: var(--csd-on-blue);
}

.csd-duo > .is-violet {
	--csd-c: var(--wp--preset--color--violet);
	--csd-on: var(--csd-on-violet);
}

.csd-duo h2 {
	font-size: var(--wp--preset--font-size--section-title);
}

.csd-duo p {
	margin: 0.75rem 0 0;
	max-width: 26rem;
}

@media (max-width: 52rem) {
	.csd-duo {
		grid-template-columns: 1fr;
	}

	.csd-duo > :first-child,
	.csd-duo > :last-child {
		padding-inline: var(--csd-gutter);
	}
}

/* ---------- Section title ---------- */

.csd-section-title {
	font-size: var(--wp--preset--font-size--section-title);
	padding-bottom: 1rem;
	border-bottom: 8px solid currentColor;
}

/* ---------- Event rows (csd/upcoming-events, docs/decisions.md 6 "event rows") ----------
   The date box is always the Aktuelles red, regardless of the zebra band it sits on
   (unlike --csd-fg-based components above), per decisions.md 6. */

.csd-dates-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.csd-date-row {
	display: grid;
	grid-template-columns: 5.5rem 1fr;
	column-gap: 1.5rem;
	align-items: center;
	padding: 1rem 0;
	border-top: 3px solid var(--csd-fg);
}

.csd-date-row:last-child {
	border-bottom: 3px solid var(--csd-fg);
}

.csd-date-box {
	display: block;
	text-align: center;
	background: var(--wp--preset--color--red);
	color: var(--csd-on-red);
	padding: 0.6rem 0 0.5rem;
	line-height: 1;
}

.csd-date-box strong {
	display: block;
	font-family: var(--wp--preset--font-family--antonio);
	font-size: 2.75rem;
	font-weight: 700;
}

.csd-date-box span {
	display: block;
	margin-top: 0.25rem;
	font-weight: 600;
	font-size: 1rem;
}

.csd-date-body :is(h2, h3) {
	font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.csd-date-body :is(h2, h3) a {
	text-decoration: none;
}

.csd-date-body :is(h2, h3) a:hover {
	text-decoration: underline;
	text-decoration-thickness: 4px;
	text-underline-offset: 0.18em;
}

.csd-date-body p {
	margin: 0.25rem 0 0;
	color: var(--csd-muted);
}

@media (max-width: 52rem) {
	.csd-date-row {
		grid-template-columns: 4.5rem 1fr;
	}
}

/* ---------- Start page (pattern "Startseite", docs/decisions.md 5) ---------- */
/* The sections are full-width groups that carry their own gutter; the inner
   blocks are limited to the 80rem content width below. The groups use the
   default layout: core's constrained layout centres narrow children with
   !important margins. */

.csd-start > .csd-start-hero,
.csd-start > .csd-start-news,
.csd-start > .csd-start-dates,
.csd-start-teaser-inner {
	padding-inline: var(--csd-gutter);
}

/* Section content is as wide as the header (the mockup's .wrap). */
.csd-start > .csd-start-hero,
.csd-start > .csd-start-news,
.csd-start > .csd-start-dates,
.csd-start-teaser-inner {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
}

.csd-start-hero {
	padding-block: clamp(2rem, 5vw, 4rem) clamp(2rem, 5vw, 3.5rem);
}

.csd-start .wp-block-group.csd-start-hero .csd-lead {
	max-width: 36rem;
	margin: 1.25rem 0 0;
	font-size: 1.25rem;
}

.csd-start .wp-block-buttons {
	margin-top: 1.75rem;
	gap: 1rem;
}

.csd-start-news {
	padding-block: clamp(1rem, 3vw, 2rem) clamp(2.5rem, 6vw, 4rem);
}

.csd-start-news .wp-block-buttons {
	margin-top: 2.5rem;
}

.csd-start .csd-news-list > li {
	border-top-color: var(--wp--preset--color--red);
}

.csd-start-dates {
	padding-block: clamp(1.5rem, 4vw, 3rem) clamp(3rem, 7vw, 5rem);
}

.csd-start-dates > * {
	margin: 0;
}

.csd-start-dates > .csd-start-dates-intro {
	grid-column: 1 / 5;
}

.csd-start-dates .csd-section-title {
	border-bottom-color: var(--wp--preset--color--red);
}

.csd-start-dates-intro p {
	margin: 1.25rem 0 0;
}

.csd-start-dates > .csd-dates-list {
	grid-column: 5 / 13;
	align-self: start;
}

.csd-start-dates {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 1.5rem;
	row-gap: 2rem;
	justify-items: stretch;
}

/* Teasers: the section colour is a 12 px band on the top edge. */

.csd-start-teaser {
	padding-block: clamp(3rem, 7vw, 5.5rem);
	border-top: 12px solid var(--csd-c);
}

.csd-start-teaser.is-queer {
	--csd-c: var(--wp--preset--color--orange);
}

.csd-start-teaser.is-verein {
	--csd-c: var(--wp--preset--color--yellow);
}

.csd-start-teaser-inner {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 1.5rem;
	row-gap: 2.5rem;
	align-items: start;
	justify-items: stretch;
}

.csd-start-teaser-inner > * {
	margin: 0;
}

.csd-start-teaser-copy {
	grid-column: 1 / 7;
}

.csd-start-teaser-copy p {
	margin: 1.25rem 0 0;
	max-width: 28rem;
}

.csd-start-teaser-inner > .csd-link-rows {
	grid-column: 8 / 13;
}

/* Link rows made from a plain list: the arrow is added here, so the editor
   only has to type the label. */
.csd-link-rows a:not(:has(.csd-arrow))::after {
	content: "→";
	content: "→" / "";
	flex: none;
}

@media (max-width: 52rem) {
	.csd-start-dates > .csd-start-dates-intro,
	.csd-start-dates > .csd-dates-list,
	.csd-start-teaser-copy,
	.csd-start-teaser-inner > .csd-link-rows {
		grid-column: 1 / -1;
	}
}