/*
 * Angelika Fichtler — design "Startseite Runde 4a" (Passepartout mit zentriertem Kopf).
 * Tokens (colors, fonts, sizes) are defined in theme.json; this file holds layout and
 * the details theme.json cannot express. Also loaded in the block editor.
 */

:root {
	--af-bordeaux: var(--wp--preset--color--bordeaux);
	--af-wine: var(--wp--preset--color--wine);
	--af-sunflower: var(--wp--preset--color--sunflower);
	--af-sunflower-soft: var(--wp--preset--color--sunflower-soft);
	--af-orange: var(--wp--preset--color--orange);
	--af-orange-deep: var(--wp--preset--color--orange-deep);
	--af-cream: var(--wp--preset--color--cream);
	--af-sand: var(--wp--preset--color--sand);
	--af-rule: var(--wp--preset--color--rule);
	--af-rule-light: var(--wp--preset--color--rule-light);
	--af-ink: var(--wp--preset--color--ink);
	--af-ink-soft: var(--wp--preset--color--ink-soft);
	--af-muted: var(--wp--preset--color--muted);
	--af-blush: var(--wp--preset--color--blush);
	/* Werbe-Rot misses 4.5:1 on the sunflower surfaces (header, hero, page headers), so small
	   red text there uses this deeper red; large titles keep the bright one (≥ 3:1). */
	--af-bordeaux-deep: #8a1f15;
	--af-serif: var(--wp--preset--font-family--serif);
	--af-mono: var(--wp--preset--font-family--mono);
	--af-section: var(--wp--preset--spacing--section);
	/* Left edge of the 1152px content column, for full-bleed bands that align with it. */
	--af-edge: max(var(--wp--style--root--padding-left, 22px), calc((100vw - var(--wp--style--global--content-size, 1152px)) / 2));
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 16px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Header, main and footer sit flush; sections handle their own spacing. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Full-bleed home sections stack without the flow-layout block gap. */
.wp-block-post-content > .alignfull {
	margin-block-start: 0;
	margin-block-end: 0;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* -- accessibility ---------------------------------------------------------------- */

:where(a, button, summary):focus-visible {
	outline: 3px solid var(--af-bordeaux);
	outline-offset: 3px;
	border-radius: 2px;
}

:is(.has-bordeaux-background-color, .has-wine-background-color) :where(a, button):focus-visible {
	outline-color: var(--af-sunflower);
}

/* The video card's own sunflower ring vanishes on the yellow surfaces. */
a.af-video-card:focus-visible {
	outline-color: var(--af-bordeaux-deep);
}

/* On the wine surfaces the card's deep-red ring and the footer's red ring vanish; sunflower is 7.3:1. */
.has-wine-background-color a.af-video-card:focus-visible,
.af-legal :where(a, button):focus-visible {
	outline-color: var(--af-sunflower);
}

/* On the orange surfaces (header, methods band, "Auch online" box, home Termine) the red ring is too faint (2.7:1); ink is
   6.8:1. The sunflower bands that were orange before D44 (hero, page title band, FAQ, "Meine Arbeit") keep ink (12:1). */
.af-header :where(a, button):focus-visible,
.af-header .af-nav a:focus-visible,
.af-header .af-nav__toggle:focus-visible,
.af-hero :where(a, button):focus-visible,
.af-page-header :where(a, button):focus-visible,
.af-page-header .af-termin-chips__chip--link a:focus-visible,
.af-methods :where(a, button):focus-visible,
.af-kontakt__text :where(a, button):focus-visible,
.af-online :where(a, button):focus-visible,
.af-faq :where(a, button):focus-visible,
.af-work :where(a, button):focus-visible,
.af-termine-section :where(a, button):focus-visible,
.wp-site-blocks .af-termine-section .af-termine .af-termin__title:focus-visible,
.af-page-body .af-formats-band a:focus-visible {
	outline-color: var(--wp--preset--color--ink);
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.af-skip-link:focus {
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	position: fixed;
	z-index: 100;
	top: 8px;
	left: 8px;
	padding: 12px 18px;
	border-radius: 6px;
	background: var(--af-bordeaux);
	color: var(--af-cream);
	font-weight: 600;
	text-decoration: none;
}

/* -- shared building blocks ------------------------------------------------------- */

/* Long URLs in page text (e.g. a source link on "EMDR und Brainspotting") wrap instead of
   pushing the page wider than a phone. */
.af-page-body :is(p, li) {
	overflow-wrap: break-word;
}

.is-style-eyebrow {
	font-family: var(--af-mono);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin: 0;
}

/* List style "Qualifikationen": ruled rows, bold lead line set in the serif, detail muted
   (items are "<strong>Title</strong><br>detail", e.g. on "Über mich"). */
.wp-block-list.is-style-qualifications {
	margin-block: 1rem 2.5rem;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--af-rule);
	color: var(--af-muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

.wp-block-list.is-style-qualifications li {
	position: relative;
	margin: 0;
	padding: 16px 0 16px 28px;
	border-bottom: 1px solid var(--af-rule);
}

.wp-block-list.is-style-qualifications li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: calc(16px + 0.62em);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--af-bordeaux);
}

.wp-block-list.is-style-qualifications strong {
	color: var(--wp--preset--color--ink);
	font-family: var(--af-serif);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	line-height: 1.3;
}

/* Links on bordeaux and wine bands inherit the light text color. */
:is(.has-bordeaux-background-color, .has-wine-background-color) a:where(:not(.wp-element-button)) {
	color: inherit;
}

/* Buttons (C2): square, thick wine frame, hard shadow that the button sinks into on hover. Big phone
   number and plain text link stay unframed. */
.wp-block-button:not(.is-style-phone):not(.is-style-text-link) .wp-block-button__link {
	border: 4px solid var(--af-wine);
	box-shadow: 6px 6px 0 var(--af-wine);
	font-weight: 900;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.wp-block-button:not(.is-style-phone):not(.is-style-text-link) .wp-block-button__link:hover {
	box-shadow: 2px 2px 0 var(--af-wine);
	transform: translate(4px, 4px);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button:not(.is-style-phone):not(.is-style-text-link) .wp-block-button__link:hover {
		transform: none;
	}
}

.wp-block-button.is-style-pill .wp-block-button__link {
	padding: 12px 22px;
	background: var(--af-sunflower);
	color: var(--af-wine);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.3;
}

.wp-block-button.is-style-pill .wp-block-button__link:hover {
	background: var(--af-wine);
	color: var(--af-cream);
}

.wp-block-button.is-style-phone .wp-block-button__link,
.wp-block-button.is-style-text-link .wp-block-button__link {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: inherit;
	text-align: left;
}

.wp-block-button.is-style-phone .wp-block-button__link {
	color: var(--af-sunflower);
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(2.125rem, 9.4vw, 4.75rem);
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1;
	white-space: nowrap;
}

.wp-block-button.is-style-text-link .wp-block-button__link {
	text-decoration: underline;
	text-underline-offset: 3px;
	font-size: var(--wp--preset--font-size--base);
}

.wp-block-button.is-style-phone .wp-block-button__link:hover,
.wp-block-button.is-style-text-link .wp-block-button__link:hover {
	background: transparent;
	text-decoration: underline;
	text-underline-offset: 6px;
}

.wp-block-button.is-style-text-link .wp-block-button__link:hover {
	text-decoration: none;
}

/* Links on to another page ("Mehr über meine Arbeit →", "Alle Termine und Formate ansehen →"): bold
   arrow text links, not buttons. The filled button with a hard shadow is kept for calling (D38). */
.af-btn-link a,
.af-welcome__text .af-welcome__more a,
.af-faq__more a,
.af-termine-section__all a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 800;
	line-height: 1.25;
	text-decoration: underline 3px;
	text-underline-offset: 6px;
}

.af-btn-link a:hover,
.af-welcome__text .af-welcome__more a:hover,
.af-faq__more a:hover,
.af-termine-section__all a:hover {
	text-decoration-thickness: 5px;
}

/* -- header ----------------------------------------------------------------------- */

:root {
	/* Rendered header height (padding + logo + gap + tagline + gap + ruled menu), so the home
	   hero can fit beneath it on one screen. Keep in sync with the header values below. */
	--af-tagline-size: clamp(1.5rem, 1.15rem + 1.1vw, 2rem);
	--af-header-h: calc(22px + 58px + 6px + 1.2 * var(--af-tagline-size) + 16px + 50px);
}

/* One orange surface (D44; sunflower before): name + profession with tagline, then the menu between
   two wine hairlines. The sunflower hero / page title band below it swaps the two colours. */
.af-header {
	position: relative;
	padding-top: 22px;
	padding-bottom: 0;
}

.af-header > * {
	margin-block: 0;
}

.af-header__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
}

.af-header__brand > *,
.af-header__logo {
	margin: 0;
}

.af-header__logo a {
	display: block;
	padding-block: 2px;
	margin-block: -2px;
	line-height: 0;
}

.af-header .af-header__logo img {
	display: block;
	width: auto;
	max-width: none;
	height: 58px;
	border-radius: 0;
}

/* The name lettering (image) and the profession as text, divided by a rule as in the logo. */
.af-header .af-header__mark {
	align-items: center;
	gap: 0;
}

.af-header__mark > * {
	margin: 0;
}

.af-header .af-header__role {
	max-width: 19ch;
	margin: 0;
	padding: 4px 0 4px 14px;
	border-left: 1.5px solid var(--wp--preset--color--ink);
	font-family: var(--af-mono);
	font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1.0625rem);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: 0;
	text-align: left;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
}

.af-tagline {
	font-family: var(--af-serif);
	font-style: italic;
	font-size: var(--af-tagline-size);
	line-height: 1.2;
	color: var(--af-bordeaux-deep); /* large text on orange: 3.66:1 (D46; wine before, red 2.65) */
}

.af-header .af-header__bar {
	margin-block-start: 16px;
	padding-block: 6px;
	border-block: 1px solid var(--af-bordeaux-deep);
}

.af-header__bar .af-nav {
	font-size: var(--wp--preset--font-size--base);
	font-weight: 500;
}

.af-header__bar .af-nav__panel,
.af-header__bar .af-nav__list {
	justify-content: center;
	gap: 40px;
}

.af-header__bar .af-nav__lang {
	color: inherit;
}

.af-header__bar .af-nav__list .current-menu-item.menu-item-object-page > a {
	text-decoration-color: var(--af-bordeaux-deep);
	text-underline-offset: 7px;
}

@media (max-width: 781px) {
	:root {
		/* The tagline wraps to two lines on phones. */
		--af-header-h: calc(14px + 40px + 4px + 2.4 * var(--af-tagline-size) + 14px + 1px);
	}

	/* Logo and tagline left, menu button right; the ruled bar collapses, the panel drops from the header. */
	.af-header {
		padding-top: 0;
	}

	.af-header__brand {
		align-items: flex-start;
		gap: 4px;
		padding: 14px 52px 14px 0;
		border-bottom: 1px solid var(--af-bordeaux-deep);
		text-align: left;
	}

	.af-header .af-header__logo img {
		height: 40px;
	}

	.af-header .af-header__role {
		padding-left: 10px;
		font-size: 0.875rem;
	}

	.af-header .af-header__bar {
		position: static;
		height: 0;
		margin: 0;
		padding: 0;
		border: 0;
	}

	.af-header .af-nav {
		position: static;
	}

	/* Centered on the brand area; the bars sit on the content edge. */
	.af-header .af-nav .af-nav__toggle {
		position: absolute;
		top: calc(50% - 22px);
		right: calc(var(--wp--style--root--padding-right, 22px) - 10px);
	}

	.af-header .af-nav .af-nav__panel {
		top: 100%;
		right: 0;
		left: 0;
		width: auto;
		justify-content: flex-start;
		gap: 0;
	}

	.af-header .af-nav .af-nav__list {
		gap: 0;
	}
}

/* -- hero ------------------------------------------------------------------------- */

.af-hero {
	--af-hero-pad-bottom: clamp(2.5rem, 6vw, 4rem);
	--af-hero-fold-room: 16px; /* sunflower strip left visible under the text */
	/* Floor for very short windows: the text then runs into the bottom padding instead of
	   the next section, and the page simply scrolls. */
	--af-hero-min: 440px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	padding-top: clamp(1rem, 2vw, 1.5rem);
	padding-bottom: var(--af-hero-pad-bottom);
}

/* Header + picture + all hero text fit on the first screen: the picture gives up height,
   the text never does. Not in the editor, where the viewport is the editor canvas. */
body:not(.editor-styles-wrapper) .af-hero {
	max-height: max(calc(100svh - var(--af-header-h) - var(--af-hero-fold-room) + var(--af-hero-pad-bottom)), var(--af-hero-min));
}

.af-hero > * {
	width: 100%;
}

/* The picture sits in a thick wine frame, not under the text. */
.af-hero__picture {
	position: relative;
	flex: 0 1 clamp(150px, 24vw, 360px);
	min-height: 120px;
	margin: 0;
	border: 4px solid var(--af-wine);
}

.af-hero .af-hero__picture img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.af-hero__text {
	flex: none;
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
	gap: 56px;
	align-items: end;
	margin-block-start: 0;
	padding: 26px 24px 0;
}

.af-hero__text > * {
	margin: 0;
}

.af-hero__head {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.af-hero__head > * {
	margin: 0;
}

.af-hero__eyebrow {
	font-family: var(--af-serif);
	font-style: italic;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2;
	color: var(--af-bordeaux-deep); /* on sunflower 5.86:1 (D46) */
}

.af-hero__title {
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.04;
	text-wrap: balance;
}

.af-hero__title mark {
	background: none;
	color: var(--af-bordeaux-deep); /* on sunflower 5.86:1 (D46) */
	font-style: italic;
}

.af-hero__aside {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.af-hero__aside > * {
	margin: 0;
}

.af-hero__intro {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.6;
}

.af-hero__person {
	gap: 16px;
	padding-top: 20px;
	border-top: 3px solid var(--af-wine);
}

.af-hero__avatar {
	flex-shrink: 0;
	margin: 0;
}

.af-hero .af-hero__avatar img {
	display: block;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	object-fit: cover;
	object-position: center 22%;
	border: 3px solid var(--af-wine);
}

.af-hero__who {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.af-hero__who > * {
	margin: 0;
}

.af-hero__name {
	font-family: var(--af-serif);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
}

.af-hero__call {
	gap: 0 0.4em;
	font-size: var(--wp--preset--font-size--base);
}

.af-hero__first-call {
	font-size: var(--wp--preset--font-size--small);
	color: var(--af-ink);
}

.af-hero__call > *,
.af-hero__call .wp-block-buttons {
	margin: 0;
}

.af-hero__tel .wp-block-button__link {
	color: var(--af-wine);
	font-size: inherit;
	font-weight: 600;
	text-decoration: none;
	padding: 4px 0;
}

@media (max-width: 781px) {
	.af-hero {
		--af-hero-pad-bottom: 30px;
		--af-hero-min: 520px;
		padding-top: 14px;
	}

	.af-hero__picture {
		min-height: 80px;
	}

	.af-hero__head {
		gap: 8px;
	}

	.af-hero__title {
		font-size: 2.625rem;
	}

	.af-hero__text {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
		padding: 18px 8px 0;
	}

	.af-hero__eyebrow {
		font-size: var(--wp--preset--font-size--large);
	}

	.af-hero__aside {
		gap: 16px;
	}

	.af-hero__intro {
		font-size: var(--wp--preset--font-size--base);
		line-height: 1.5;
	}

	.af-hero__person {
		padding-top: 16px;
		gap: 14px;
	}

	.af-hero .af-hero__avatar img {
		width: 52px;
		height: 52px;
	}
}

/* Short desktop windows (laptops): a tighter type scale keeps the picture from shrinking to a strip. */
@media (min-width: 782px) and (max-height: 760px) {
	.af-hero__head {
		gap: 10px;
	}

	.af-hero__eyebrow {
		font-size: var(--wp--preset--font-size--large);
	}

	.af-hero__title {
		font-size: clamp(2.375rem, 1.5rem + 1.6vw, 3rem);
	}

	.af-hero__aside {
		gap: 16px;
	}

	.af-hero__person {
		padding-top: 14px;
	}
}

/* Tablets (D42): beside the headline the side column was ~210px and broke the call line after every
   word. The headline takes the full width; intro and person sit side by side under one wine rule.
   After the short-window rule, so its smaller gaps do not undo this row. */
@media (min-width: 782px) and (max-width: 1099px) {
	.af-hero__text {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.af-hero__aside {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 32px;
		align-items: center;
		padding-top: 20px;
		border-top: 3px solid var(--af-wine);
	}

	.af-hero__person {
		padding-top: 0;
		border-top: 0;
	}
}

/* -- welcome (video + text) on wine ------------------------------------------------ */

.af-welcome {
	padding-top: var(--af-section);
	padding-bottom: var(--af-section);
	overflow-x: clip;
}

.af-welcome__grid {
	display: grid;
	grid-template-columns: 400px minmax(0, 1fr);
	gap: 80px;
	align-items: start; /* the Short starts level with the text, not centred on it (D39) */
}

.af-welcome__grid > * {
	margin: 0;
}

/* The Short has an orange frame and a sunflower shadow: the one 8px shadow, the home page's welcome (D39). */
.af-welcome__video.af-video-card--large {
	min-height: 0;
	height: 540px;
	border: 6px solid var(--af-orange);
	border-radius: 0;
	box-shadow: 8px 8px 0 var(--af-sunflower);
}

.af-welcome__text {
	display: flex;
	flex-direction: column;
	gap: 22px;
	max-width: 65ch;
}

.af-welcome__text > * {
	margin: 0;
}

.af-welcome__text h2 {
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(1.875rem, 1.2rem + 1.6vw, 2.75rem); /* at least 1.25× below the hero h1 (D38, D39) */
	font-weight: 900;
	line-height: 0.95;
	letter-spacing: -0.03em;
	color: var(--af-sunflower);
}

/* em, not ch: 30em is ~65 characters of Archivo (≈0.45em per character) at any size used here. */
.af-welcome__text p {
	max-width: 30em;
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	line-height: 1.65;
	text-wrap: pretty;
}

.af-welcome__sign {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 6px;
}

.af-welcome__sign > * {
	margin: 0;
}

.af-welcome__text .af-welcome__name {
	font-family: var(--af-serif);
	font-style: italic;
	font-size: 2.375rem;
	line-height: 1.2;
	color: var(--af-sunflower);
}

.af-welcome__text .af-welcome__more {
	max-width: none;
	margin-top: 10px;
}

.af-welcome__text .af-welcome__more a {
	color: var(--af-sunflower); /* on wine 7.3:1 */
}

@media (max-width: 781px) {
	.af-welcome__grid {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
	}

	/* Heading first, then the video, then the text (as in the mobile design). */
	.af-welcome__text {
		display: contents;
	}

	.af-welcome__text > h2 {
		order: -2;
	}

	.af-welcome__video {
		order: -1;
	}

	.af-welcome__video.af-video-card--large {
		height: 400px;
		width: calc(100% - 6px);
		box-shadow: 6px 6px 0 var(--af-sunflower);
	}

	.af-welcome__text .af-welcome__name {
		font-size: 2rem;
	}
}

/* -- "Meine Arbeit" sunflower band (D44; orange in D42): the methods as cards ------------ */

.af-work {
	padding-top: var(--af-section);
	padding-bottom: var(--af-section);
}

.af-work__head {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.af-work__head > * {
	margin: 0;
}

.af-work__head h2 {
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(1.875rem, 1.2rem + 1.6vw, 2.75rem);
	font-weight: 900;
	letter-spacing: -0.03em;
	color: var(--af-wine); /* large text on sunflower: 7.3:1, as in the FAQ */
}

.af-work__head p {
	font-size: var(--wp--preset--font-size--lead);
}

.af-work__list {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}

.af-work__list li {
	display: flex;
	margin: 0;
	padding: 0;
}

.af-work__list a {
	box-sizing: border-box;
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
	min-height: 160px;
	padding: 20px;
	background: var(--af-sunflower);
	color: var(--af-wine);
	font-size: 1.25rem;
	overflow-wrap: anywhere;
	hyphens: auto;
	font-weight: 900;
	line-height: 1.15;
	text-decoration: none;
}

.af-work__list li:nth-child(even) a {
	background: var(--af-orange);
}

/* On the sunflower band (D44) the odd cards are cream, so no card has the band's own colour. */
.af-work.has-sunflower-background-color .af-work__list a {
	background: var(--af-cream);
}

.af-work.has-sunflower-background-color .af-work__list li:nth-child(even) a {
	background: var(--af-orange);
}

.af-work.has-sunflower-background-color .af-work__list a:hover {
	background: var(--af-sunflower);
}

.af-work__list a::after {
	content: "→" / "";
	font-size: 1.75rem;
}

.af-work__list a:hover {
	background: var(--af-cream);
	text-decoration: none;
}

.af-work .af-methods__all {
	margin-top: 28px;
}

.af-work .af-methods__all a {
	color: inherit;
}

@media (max-width: 1024px) {
	.af-work__list {
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	}
}

@media (max-width: 781px) {
	.af-work__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	.af-work__list a {
		flex-direction: row;
		align-items: center;
		min-height: 72px;
		padding: 16px 20px;
		font-size: 1.25rem;
	}
}

/* -- FAQ on sunflower (D44; orange before): numbered rows, the Shorts as tilted cards --- */

.af-faq {
	padding-top: var(--af-section);
	padding-bottom: var(--af-section);
	overflow-x: clip;
	color: var(--af-wine);
}

.af-faq__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px 32px;
	margin-bottom: 40px;
}

.af-faq__head > * {
	margin: 0;
}

.af-faq__head h2 {
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(1.875rem, 1.2rem + 1.6vw, 2.75rem);
	font-weight: 900;
	line-height: 0.95;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

.af-faq__head .is-style-eyebrow {
	color: inherit;
}

.af-faq__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 56px;
	align-items: start;
}

.af-faq__body > *,
.af-faq__videos > * {
	margin: 0;
}

.af-faq__list {
	counter-reset: faq;
	border-top: 4px solid var(--af-wine);
}

.af-faq__item {
	counter-increment: faq;
	display: grid;
	grid-template-columns: clamp(72px, 12vw, 130px) minmax(0, 1fr);
	column-gap: 24px;
	row-gap: 8px;
	align-items: start;
	margin: 0;
	padding: 24px 0;
	border-bottom: 4px solid var(--af-wine);
}

.af-faq__item::before {
	content: counter(faq, decimal-leading-zero) / "";
	grid-row: 1 / span 2;
	font-size: clamp(2.75rem, 1.5rem + 4.6vw, 5.5rem);
	font-weight: 900;
	line-height: 0.85;
	letter-spacing: -0.04em;
}

.af-faq__item > * {
	grid-column: 2;
	margin: 0;
}

.af-faq__item h3 {
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
	font-weight: 800;
	line-height: 1.1;
}

.af-faq__item p {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.55;
	color: var(--wp--preset--color--ink);
}

.af-faq__videos {
	position: sticky;
	top: 24px;
	display: grid;
	gap: 24px;
}

.af-faq__videos .af-video-card {
	min-height: 0;
	height: 300px;
}

.af-faq__more a {
	color: var(--af-wine); /* on sunflower 7.3:1 (on orange before D44: 4.56:1, bold 18px) */
}

@media (max-width: 1024px) {
	.af-faq__body {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.af-faq__videos {
		position: static;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 600px;
	}
}

@media (max-width: 781px) {
	.af-faq__head {
		margin-bottom: 24px;
	}

	.af-faq__head .is-style-eyebrow {
		display: none;
	}

	.af-faq__videos {
		gap: 14px;
	}

	.af-faq__videos .af-video-card {
		height: 240px;
	}

	.af-faq__item {
		grid-template-columns: minmax(0, 1fr);
		padding: 20px 0;
	}

	.af-faq__item::before {
		grid-row: auto;
	}

	.af-faq__item > * {
		grid-column: 1;
	}
}

/* -- Termine + Methoden ------------------------------------------------------------ */

.af-termine-section {
	padding-top: var(--af-section);
	padding-bottom: var(--af-section);
	color: var(--af-wine);
}

.af-termine-section__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px 32px;
	margin-bottom: 36px;
}

.af-termine-section__head > * {
	margin: 0;
}

.af-termine-section__side {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.af-termine-section__side > * {
	margin: 0;
}

.af-termine-section__side h2 {
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(1.875rem, 1.2rem + 1.6vw, 2.75rem);
	font-weight: 900;
	line-height: 0.95;
	letter-spacing: -0.035em;
	color: var(--af-wine); /* on orange 4.56:1; red was 2.65 (D44) */
}

.af-termine-section__note {
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 600;
}

.af-termine-section__all a {
	color: var(--af-wine); /* on orange 4.56:1 (D44; on sunflower 7.3:1) */
}

/* The plugin's red hover vanishes on the orange band. */
.wp-site-blocks .af-termine-section .af-termine .af-termin__title:hover {
	color: var(--af-wine);
}

@media (max-width: 781px) {
	.af-termine-section__head {
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: 20px;
	}
}

.af-methods {
	padding-bottom: var(--af-section);
}

.af-methods .is-style-eyebrow {
	color: var(--af-muted);
}

.af-methods__list {
	margin-top: 12px;
	gap: 12px;
}

@media (max-width: 781px) {
	.af-methods__list {
		gap: 8px;
	}

	.wp-block-button.is-style-pill .wp-block-button__link {
		padding: 10px 18px;
	}
}

.af-methods__all {
	margin: 20px 0 0;
	font-size: var(--wp--preset--font-size--chip);
}

.af-methods__all a {
	color: var(--af-bordeaux);
	text-underline-offset: 4px;
}

/* On inner pages the methods band follows the page body. */
.af-page-body + .af-methods {
	padding-top: clamp(2rem, 5vw, 3.5rem);
	border-top: 1px solid var(--af-rule-light);
}

/* -- method card grid ("Meine Arbeit" overview) ------------------------------------ */

.af-method-grid {
	margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

.af-method-grid .wp-block-post-template {
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.af-method-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	box-sizing: border-box;
	padding: 24px 24px 56px;
	border: 1.5px solid var(--af-bordeaux);
	border-radius: 18px;
	background: var(--af-cream);
	color: var(--af-bordeaux);
}

.af-method-card .wp-block-post-title {
	margin: 0;
	font-family: var(--af-serif);
	font-weight: 400;
	font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem);
	line-height: 1.15;
	text-wrap: balance;
}

.af-method-card .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

/* One link per card, stretched over the whole card. */
.af-method-card .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 16px;
}

.af-method-card .wp-block-post-excerpt {
	margin: 0;
	color: var(--af-ink-soft);
	font-size: var(--wp--preset--font-size--chip);
	line-height: 1.55;
}

.af-method-card .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.af-method-card::after {
	content: "→";
	position: absolute;
	right: 24px;
	bottom: 18px;
	font-size: 1.5rem;
	line-height: 1;
	transition: transform 0.15s ease;
}

.af-method-card:hover {
	background: var(--af-bordeaux);
	color: var(--af-cream);
}

.af-method-card:hover .wp-block-post-excerpt {
	color: var(--af-cream);
}

.af-method-card:hover::after {
	transform: translateX(4px);
}

.af-method-card:has(a:focus-visible) {
	outline: 3px solid var(--af-orange-deep);
	outline-offset: 3px;
}

@media (max-width: 960px) and (min-width: 601px) {
	.af-method-grid .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	.af-method-card {
		padding: 20px 20px 52px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.af-method-card::after {
		transition: none;
	}
}

/* -- jump card (Meine Arbeit → Trauma) --------------------------------------------- */

.af-page-body .af-jump {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-block: clamp(2.5rem, 6vw, 4rem);
	padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 2.75rem);
	border-radius: 18px;
	background: var(--af-bordeaux);
	color: var(--af-cream);
}

.af-page-body .af-jump > * {
	margin: 0;
}

/* Sunflower on bordeaux is below 5:1 for small text, so text stays cream; sunflower only underlines. */
.af-jump .is-style-eyebrow {
	color: inherit;
}

.af-jump__title {
	color: inherit;
	font-family: var(--af-serif);
	font-weight: 400;
	font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
	line-height: 1.1;
}

.af-jump__text {
	max-width: 38rem;
	line-height: 1.55;
}

.af-jump__link {
	margin-top: 6px;
	font-weight: 800;
	font-size: var(--wp--preset--font-size--small);
}

.af-jump__link a {
	color: inherit;
	text-decoration: underline 2px var(--af-sunflower);
	text-underline-offset: 6px;
}

/* One link per card, stretched over the whole card. */
.af-jump__link a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 18px;
}

.af-jump:hover .af-jump__link a {
	text-decoration-color: var(--af-cream);
}

.af-jump:has(a:focus-visible) {
	outline: 3px solid var(--af-orange-deep);
	outline-offset: 3px;
}

.af-jump a:focus-visible {
	outline: none;
}

/* -- contact band + legal bar ------------------------------------------------------ */

/* Text left, Angelika's portrait full height on the right behind a thick wine rule (C2). */
.af-contact-band {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	align-items: stretch;
	border-top: 6px solid var(--af-wine);
}

.af-contact-band > * {
	margin: 0;
}

.af-contact-band__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 22px;
	padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3.5rem) clamp(2.5rem, 6vw, 4.5rem) var(--af-edge);
}

.af-contact-band__text > * {
	margin: 0;
}

/* The heading is a small sunflower label above the number. */
.af-contact-band__title {
	align-self: flex-start;
	padding: 6px 12px;
	background: var(--af-sunflower);
	color: var(--af-wine);
	font-family: var(--af-mono);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.af-contact-band__greeting {
	font-family: var(--af-serif);
	font-style: italic;
	font-size: var(--wp--preset--font-size--large);
	color: var(--af-cream);
}

.af-contact-band__first-call {
	font-size: var(--wp--preset--font-size--base);
	margin-top: -6px;
}

.af-contact-band__line {
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 500;
	line-height: 1.6;
	margin-top: -8px;
}

.af-contact-band__line + .af-contact-band__line {
	margin-top: -14px;
}

.af-contact-band__mail .wp-block-button__link {
	color: inherit;
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 500;
}

.af-contact-band__photo {
	order: 2;
	position: relative;
	overflow: hidden;
	min-height: 420px;
	border-left: 6px solid var(--af-wine);
}

.af-contact-band .af-contact-band__photo img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	border-radius: 0;
}

@media (max-width: 781px) {
	.af-contact-band {
		grid-template-columns: minmax(0, 1fr);
	}

	.af-contact-band__text {
		gap: 18px;
		padding: 32px var(--wp--style--root--padding-left, 22px);
	}

	.af-contact-band__photo {
		order: 0;
		border-top: 6px solid var(--af-wine);
		border-left: 0;
	}

	.af-contact-band__photo {
		min-height: 340px;
	}
}

/* Footer bar: red like the contact band above it (D44; wine before), a cream hairline between them. */
.af-legal {
	padding-top: 32px;
	padding-bottom: 20px;
	border-top: 1px solid rgba(253, 246, 227, 0.35);
	background: var(--af-bordeaux);
	font-size: var(--wp--preset--font-size--small);
	color: var(--af-cream);
}

/* Name + profession left, crisis note right; a thin rule separates them from the legal row. */
.af-legal__about {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px 48px;
	padding-bottom: 24px;
	margin-bottom: 18px;
	border-bottom: 1px solid rgba(253, 246, 227, 0.35);
}

.af-legal__about p {
	margin: 0;
}

.af-legal__name {
	font-family: var(--af-serif);
	font-size: 1.6rem;
	line-height: 1.1;
	color: var(--af-sunflower);
}

.af-legal__about .af-legal__role {
	margin-top: 4px;
}

.af-legal__crisis {
	max-width: 46ch;
	line-height: 1.55;
}

/* Sunflower on red is 4.23:1, too little for body-size numbers: cream text (6.15:1), sunflower underline. */
.af-legal .af-legal__crisis a {
	color: var(--af-cream);
	text-decoration: underline 2px var(--af-sunflower);
	text-underline-offset: 4px;
	font-weight: 600;
	white-space: nowrap;
}

.af-legal__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
}

.af-legal__row > * {
	margin: 0;
}

.af-legal a {
	color: inherit;
}

/* -- inner pages ------------------------------------------------------------------- */

/* Title band under the header: optional back link, title, and (events) subtitle + chips,
   all centered. Only these optional lines differ between pages. */
.af-page-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding-top: 22px;
	padding-bottom: 26px;
	text-align: center;
}

.af-page-header > * {
	margin-block: 0;
}

@media (min-width: 782px) {
	.af-page-header {
		gap: 12px;
		padding-top: 34px;
		padding-bottom: 40px;
	}
}

.af-page-header :where(h1, .wp-block-post-title, .wp-block-query-title) {
	margin: 0;
	font-family: var(--af-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(2.25rem, 1.48rem + 3.15vw, 4rem);
	line-height: 1;
	color: var(--af-bordeaux);
	text-wrap: balance;
}

/* Small text on the sunflower band: breadcrumbs and event chips need the darker tones (AA). */
.af-page-header .af-breadcrumbs,
.af-page-header .af-breadcrumbs a {
	color: var(--af-ink-soft);
}

.af-page-header .af-termin-chips__chip:not(.af-termin-chips__chip--date) {
	border-color: var(--af-bordeaux-deep);
	color: var(--af-bordeaux-deep);
}

/* The body's own padding is the only space under the title band (no extra block gap). */
.af-page-header + .af-page-body {
	margin-block-start: 0;
}

.af-page-body {
	padding-top: clamp(1.75rem, 4vw, 3rem);
	padding-bottom: clamp(3rem, 7vw, 5.5rem);
}

.af-page-body :where(p, ul, ol) {
	line-height: 1.7;
}

.af-page-body :where(h2, h3, h4) {
	margin-top: 2em;
	margin-bottom: 0.5em;
}

.af-page-body :where(h2) {
	font-size: var(--wp--preset--font-size--xx-large);
}

/* Webdesign credit at the end of the Impressum. Colours are the studio's own palette
   (Dein Internetauftritt, same card as on rudijagusch.de) — a deliberate foreign accent,
   independent of the site tokens. All text pairings ≥ 4.5:1 on the sand surface. */
.af-credit {
	margin-top: 3rem;
	padding: 1.5rem;
	border: 1px solid #dec0b5;
	border-radius: 12px;
	background-color: #f6f3ec;
	/* Warm "sun" glow; a background is clipped by the radius, so it never bleeds past the corners. */
	background-image: radial-gradient(135% 120% at 100% 0%, #f3e2af80, transparent 60%);
	color: #57423a;
}

@media (min-width: 782px) {
	.af-credit {
		padding-inline: 2rem;
	}
}

.af-credit > * {
	margin-block: 0;
}

.af-credit .is-style-eyebrow {
	margin-bottom: 0.25rem;
	color: #13677b;
}

.af-credit a {
	color: #9f3e07;
	font-weight: 600;
	text-decoration: underline;
}

/* External-link hint (opens in a new tab). */
.af-credit a[target="_blank"]::after {
	content: "↗";
	content: "↗" / "";
	text-decoration: none;
	display: inline-block;
	margin-inline-start: 0.15em;
}

/* Beside a wide opening row (video, portrait) the reading column sits flush left, so both share one
   left edge (core centers it with !important); without one it stays centered under the title (D36). */
.af-page-body .wp-block-post-content.is-layout-constrained:has(> .alignwide) > :where(:not(.alignwide):not(.alignfull)) {
	margin-left: 0 !important;
}

.af-page-body > .wp-block-post-content > :first-child {
	margin-top: 0;
}

.af-archive-note {
	margin: 0 0 8px;
	color: var(--af-muted);
}

/* Kontakt page: two panels (call / visit) above the page text; no contact band below. */
.af-kontakt__panels {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 24px;
	align-items: stretch;
}

.af-kontakt__panels > *,
.af-kontakt__panels .wp-block-group > * {
	margin: 0;
}

.af-kontakt-call {
	display: grid;
	grid-template-columns: 136px minmax(0, 1fr);
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: start;
	padding: clamp(1.75rem, 4vw, 2.75rem);
	border-radius: 20px;
	background: var(--af-bordeaux);
	color: var(--af-cream);
}

.af-kontakt-call .af-kontakt-call__photo {
	overflow: hidden;
	aspect-ratio: 1;
	border-radius: 50%;
	box-shadow: 0 0 0 4px var(--af-sunflower);
}

.af-kontakt-call .af-kontakt-call__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
	border-radius: 0;
}

.af-kontakt-call__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.af-kontakt-call .is-style-eyebrow {
	color: var(--af-cream); /* sunflower on Werbe-Rot is 4.2:1, too little for small text */
}

.af-kontakt-call__title {
	font-family: var(--af-serif);
	font-style: italic;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.15;
	color: inherit;
}

.af-kontakt__panels .af-kontakt-call__phone {
	margin-top: 4px;
}

.af-kontakt-call__note {
	font-size: var(--wp--preset--font-size--base);
}

.af-kontakt__panels .af-kontakt-call__mail {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 12px;
	padding-top: 20px;
	border-top: 1px solid rgba(253, 246, 227, 0.35);
}

.af-kontakt-call__mail .wp-block-buttons {
	margin: 0;
}

.af-kontakt-call__mail .is-style-text-link .wp-block-button__link {
	color: inherit;
	font-size: var(--wp--preset--font-size--lead);
}

.af-kontakt-visit {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: clamp(1.75rem, 4vw, 2.75rem);
	border-radius: 20px;
	border: 1.5px solid var(--af-bordeaux);
	background: var(--af-cream);
}

.af-kontakt-visit .is-style-eyebrow {
	color: var(--af-bordeaux);
}

.af-kontakt-visit__title {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.25;
}

.af-kontakt-visit__address p {
	margin: 0;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.55;
}

.af-kontakt__panels .af-kontakt-visit__transit {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: auto;
	padding-top: 20px;
	border-top: 1px solid var(--af-rule);
}

.af-kontakt__text {
	margin-top: clamp(3rem, 7vw, 4.5rem);
}

.af-kontakt__text > :first-child {
	margin-top: 0;
}

@media (max-width: 960px) {
	.af-kontakt__panels {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 600px) {
	.af-kontakt-call {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		padding: 24px;
	}

	.af-kontakt-call .af-kontakt-call__photo {
		width: 112px;
	}

	.af-kontakt-visit {
		padding: 24px;
	}
}

/* Content images and quotes in free-form pages. */
.wp-block-image img {
	height: auto;
}

.wp-block-quote {
	margin-inline: 0;
	padding: 0;
	font-family: var(--af-serif);
	font-style: italic;
	font-size: var(--wp--preset--font-size--large);
	color: var(--af-bordeaux);
}

/* "Auch online" – sunflower band with real actions; shared (synced pattern) on the home page and
   "Ablauf & Honorar". */
.af-online {
	background: var(--af-sunflower);
	color: var(--wp--preset--color--ink);
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.af-online__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 5vw, 4rem);
	align-items: center;
}

.af-online__grid > *,
.af-online__text > *,
.af-online__side > * {
	margin: 0;
}

.af-online__text {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.af-online__text .is-style-eyebrow {
	color: var(--wp--preset--color--ink);
}

.af-online h2 {
	font-family: var(--af-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(2.5rem, 1.5rem + 3.5vw, 3.625rem);
	line-height: 1;
	text-wrap: balance;
	color: var(--af-bordeaux); /* large text on sunflower: 4.2:1 */
}

.af-online__subtitle {
	font-family: var(--af-serif);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 1.75rem);
	line-height: 1.15;
}

.af-online__side {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 28px;
	border: 4px solid var(--af-wine);
	background: var(--af-cream);
}

.af-online__intro {
	color: var(--af-ink-soft);
}

.af-online__actions {
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
}

.af-online__action {
	width: 100%;
}

/* The crisis note under the call buttons (D39): small, ruled off, wine numbers on cream (8.2:1). */
.af-online__side .af-online__crisis {
	margin-top: 8px;
	padding-top: 14px;
	border-top: 2px solid var(--af-wine);
	color: var(--af-ink);
	font-size: 0.9375rem;
	line-height: 1.75;
}

.af-online__crisis a {
	color: var(--af-wine);
}

.af-online__action .wp-block-button__link {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	width: 100%;
	box-sizing: border-box;
	padding: 14px 24px;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.3;
	text-align: left;
	text-decoration: none;
}

.af-online__action.is-style-online-primary .wp-block-button__link {
	background: var(--af-bordeaux);
	color: var(--af-cream);
}

.af-online__action.is-style-online-primary .wp-block-button__link:hover {
	background: var(--af-wine);
}

.af-online__action.is-style-online-secondary .wp-block-button__link {
	background: var(--af-sunflower);
	color: var(--af-wine);
}

.af-online__action.is-style-online-secondary .wp-block-button__link:hover {
	background: var(--af-wine);
	color: var(--af-cream);
}

/* Inside a page body the box is a rounded card, not a full-width band. */
.af-page-body .af-online {
	margin-block: 2.5rem;
	padding-inline: clamp(1.5rem, 4vw, 2.5rem);
	border: 6px solid var(--af-wine);
}

@media (max-width: 781px) {
	.af-online__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.af-online__side {
		padding: 20px;
	}
}

/* Recommendation card (e.g. Dr. Michael Bohne on the PEP page). */
.af-recommend {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-block: 2.5rem;
	padding: 28px;
	border: 1.5px solid var(--af-bordeaux);
	border-radius: 20px;
	background: var(--af-cream);
}

.af-recommend > * {
	margin: 0;
}

.af-recommend__initials {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: var(--af-bordeaux);
	color: var(--af-cream);
	font-family: var(--af-serif);
	font-size: 2rem;
	line-height: 1;
}

.af-recommend__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.af-recommend__body > * {
	margin: 0;
}

.af-recommend__body h3 {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
}

.af-recommend__link .wp-block-button__link {
	padding-left: 0;
	color: var(--af-bordeaux);
}

@media (max-width: 600px) {
	.af-recommend {
		flex-direction: column;
		align-items: flex-start;
		padding: 22px;
	}
}

/* An eyebrow labelling a qualifications list in running text needs room above it. */
.af-page-body * + .is-style-eyebrow:has(+ .is-style-qualifications) {
	margin-top: 2rem;
	color: var(--af-muted);
}

/* "Über mich": the portrait stays beside the long qualifications list. */
.af-about__photo {
	position: sticky;
	top: 24px;
}

/* Event pages: the event text left, sticky facts + registration right, the dates below. */
.af-page-body .af-format-cols {
	gap: clamp(2rem, 5vw, 4rem);
	margin-bottom: 0;
}

.af-page-body .af-format-cols :where(h2, h3):first-child {
	margin-top: 0;
}

.af-format-aside {
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 28px;
	border: 1.5px solid var(--af-bordeaux);
	border-radius: 20px;
	background: var(--af-cream);
}

.af-format-aside > * {
	margin: 0;
}

.af-page-body .af-format-aside h2 {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
}

.af-page-body .af-format-aside h3 {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
}

.af-format-aside__buttons {
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.af-format-aside .is-style-phone .wp-block-button__link {
	font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
	color: var(--af-bordeaux);
}

.af-format-aside .is-style-text-link .wp-block-button__link {
	color: var(--af-bordeaux);
}

.af-termin-text > * {
	margin-top: 0;
}

/* Page of a single date: the focus card above has place, price and registration, so the box
   beside the text goes and the text keeps a reading width; it is introduced as "Über die Veranstaltung". */
.af-termin-about,
.af-termin-date-page .af-format-cols > .wp-block-column:has(> .af-format-aside) {
	display: none;
}

.af-termin-date-page .af-format-cols > .wp-block-column:has(> .af-termin-text) {
	flex-basis: 100% !important;
	max-width: 38rem;
}

.af-termin-date-page .af-termin-about {
	display: block;
	margin: 0 0 0.75rem;
}

.af-termin-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.af-termin-fact > * {
	margin: 0;
}

/* A fact without a value (e.g. no price set) disappears with its label. */
.af-termin-fact:has(> p:empty) {
	display: none;
}

.af-termin-register {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 16px;
	border-top: 1px solid var(--af-rule);
}

.af-termin-register > * {
	margin: 0;
}

@media (max-width: 781px) {
	.af-format-aside {
		position: static;
	}
}

/* The dates of the event as a row of cards after the text, before the other formats. */
.af-page-body .af-termin-dates {
	margin-block: clamp(2.5rem, 6vw, 4rem) 0;
}

.af-page-body .af-termin-dates h2 {
	margin: 0 0 1.5rem;
	font-size: var(--wp--preset--font-size--x-large);
}

.af-page-body .af-termin-dates .af-termine {
	margin-top: 0;
}

/* "Aktuelle Termine" overview page (D25): two zones. Dates as a compact list beside a sticky
   heading on the cream page, then the events as cards on a full-width rosé band. */
.af-page-body .af-formats,
.af-page-body .af-termine {
	margin-block: 0;
}

.af-page-body .af-termine-overview {
	display: grid;
	grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
	gap: 56px;
	align-items: start;
	padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.af-page-body .af-termine-overview__side {
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.af-page-body .af-termine-overview__side > * {
	margin: 0;
}

.af-page-body .af-termine-overview__side .is-style-eyebrow {
	color: var(--wp--preset--color--orange-deep);
}

.af-page-body .af-termine-overview__side h2 {
	line-height: 1.05;
}

/* The registration note: a quiet footnote under the heading. */
.af-page-body .af-termine-note {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--af-muted);
}

@media (max-width: 960px) {
	.af-page-body .af-termine-overview {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.af-page-body .af-termine-overview__side {
		position: static;
	}
}

/* Rosé band for the event cards; it closes the page, so the page body gives up its bottom padding. */
.af-page-body:has(.af-formats-band) {
	padding-bottom: 0;
}

.af-page-body .af-formats-band {
	margin-block: 0;
	margin-inline: calc(50% - 50vw);
	padding-inline: var(--wp--style--root-padding-left, 1.5rem) var(--wp--style--root-padding-right, 1.5rem);
	padding-block: clamp(2.5rem, 6vw, 4rem) clamp(3rem, 7vw, 5.5rem);
	background: var(--wp--preset--color--blush);
}

.af-page-body .af-formats-band h2 {
	margin: 0 0 1.75rem;
	font-size: clamp(2.5rem, 5vw, 3.25rem);
	font-style: italic;
	line-height: 1;
	color: var(--af-bordeaux-deep); /* large text on orange: 3.7:1 */
}

/* Photo galleries inside content pages. */
.af-page-body .wp-block-gallery {
	margin-block: 2rem;
}

.af-page-body .wp-block-video-card,
.af-page-body .af-video-card {
	margin-block: 2rem;
}

/* Video cards inside running text: a phone-sized column, not full width. */
.af-page-body .af-content-video {
	max-width: 320px;
}

/* Opening row: intro text beside the video card, which stays in view while the text runs on.
   On phones the card leads as a short landscape banner, so the text still starts early. */
.af-page-body .af-video-cols .af-content-video {
	position: sticky;
	top: 24px;
	max-width: none;
	margin-block: 0;
}

@media (max-width: 781px) {
	.af-page-body .af-video-cols {
		gap: 1.5rem;
	}

	.af-page-body .af-video-cols > .wp-block-column:last-child {
		order: -1;
	}

	.af-page-body .af-video-cols .af-content-video {
		position: relative;
		top: auto;
		min-height: 0;
		max-height: 15rem;
		aspect-ratio: 16 / 9;
	}
}

.af-seal img {
	max-width: 160px;
}

/* Stand-alone text links get a 24px+ target (WCAG 2.5.8). */
:where(.af-welcome__more, .af-methods__all, .af-termine-section__all, .af-faq__more, .af-legal__row) a {
	display: inline-block;
	padding-block: 0.4rem;
}

/* -- C2 colour layer (D33): frames and tiles shared by all pages ------------------------ */

/* Video cards: square, thick wine frame, red play button. The home page tilts them (see above). */
.af-video-card {
	border: 6px solid var(--af-wine);
	border-radius: 0;
}

.af-video-card.af-content-video,
.af-video-card--large:not(.af-welcome__video) {
	box-shadow: 4px 4px 0 var(--af-wine);
}

.af-video-card__badge {
	font-size: 0.8125rem;
	border-radius: 0;
	background: var(--af-sunflower);
	color: var(--af-wine);
}

.af-video-card__play {
	background: var(--af-bordeaux);
}

.af-video-card__play::before {
	border-left-color: var(--af-cream);
}

/* Termine (home page, overview, event pages): a date tile and a thick wine rule per row.
   The prefix beats the plugin's own block stylesheet, whatever the load order. */
.wp-site-blocks .af-termine .af-termin {
	border-bottom: 4px solid var(--af-wine);
}

.wp-site-blocks .af-termine .af-termin__date {
	border: 3px solid var(--af-wine);
	border-radius: 0;
	background: var(--af-sunflower);
	color: var(--af-wine);
}

.wp-site-blocks .af-termine .af-termin__day {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 900;
}

/* Mono labels no smaller than 13px (12px for the two-line "Auf Anfrage"), for stressed or low-vision readers (D39). */
.wp-site-blocks .af-termine .af-termin__month {
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
}

.wp-site-blocks .af-termine .af-termin__request {
	font-size: 0.75rem;
	letter-spacing: 0.02em;
}

.wp-site-blocks .af-termine .af-termin--on-request .af-termin__date {
	background: transparent;
	border-color: var(--af-wine);
	color: var(--af-wine);
}

.wp-site-blocks .af-termine .af-termin__title {
	font-weight: 800;
}

.wp-site-blocks .af-termine .af-termin__title:hover {
	color: var(--af-bordeaux);
}

.wp-site-blocks .af-termine .af-termin__meta {
	color: var(--af-ink-soft);
}

/* On the home page the dates are one column under a thick rule, with the same tile as the overview (D38). */
.wp-site-blocks .af-termine-section .af-termine {
	grid-template-columns: minmax(0, 1fr);
	border-top: 4px solid var(--af-wine);
}

/* Cards on the inner pages: square wine frame; linked cards keep a small hard shadow (D39: 3px frame,
   4px shadow, was 4px / 8px). Buttons stay the loudest thing with their 6px shadow. */
.wp-site-blocks :is(.af-method-card, .af-kontakt-visit, .af-recommend, .af-format-aside, .af-termin-focus, .af-formats .af-format) {
	border: 3px solid var(--af-wine);
	border-radius: 0;
	box-shadow: 4px 4px 0 var(--af-wine);
	background: var(--af-cream);
}

.wp-site-blocks .af-formats .af-format:hover,
.wp-site-blocks .af-formats .af-format:focus-within {
	border-color: var(--af-wine);
	box-shadow: 2px 2px 0 var(--af-wine);
}

.af-method-card .wp-block-post-title a::after,
.af-formats .af-format__title::after {
	border-radius: 0;
}

.wp-site-blocks :is(.af-kontakt-call, .af-page-body .af-jump) {
	border: 3px solid var(--af-wine);
	border-radius: 0;
	box-shadow: none;
}

.wp-site-blocks .af-termin-focus__date {
	border-radius: 0;
}

/* Photos in running text get the same frame as the videos. */
.af-page-body :is(.wp-block-image, .wp-block-gallery) img {
	border: 4px solid var(--af-wine);
	border-radius: 0;
}

.af-kontakt__panels .af-kontakt-call .wp-block-button.is-style-phone .wp-block-button__link {
	font-size: clamp(1.75rem, 0.5rem + 3.2vw, 3rem);
}

.af-format-aside .is-style-phone .wp-block-button__link {
	font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.875rem);
}

/* -- C2 colour layer for the inner pages (D34) ------------------------------------------ */

/* Title band: sunflower under the orange site header, like the sunflower hero on the home page (D44). */
.af-page-header {
	border-bottom: 6px solid var(--af-wine);
}

.af-page-header :where(h1, .wp-block-post-title, .wp-block-query-title) {
	color: var(--af-wine); /* large text on sunflower: 7.3:1 */
}

.af-page-header .af-breadcrumbs,
.af-page-header .af-breadcrumbs a {
	color: var(--af-ink);
}

.af-page-header .af-termin-chips__chip:not(.af-termin-chips__chip--date) {
	border: 3px solid var(--af-wine);
	border-radius: 0;
	background: var(--af-cream);
	color: var(--af-wine);
	font-weight: 600;
}

.af-page-header .af-termin-chips__chip--date {
	border: 3px solid var(--af-wine);
	border-radius: 0;
	background: var(--af-wine);
	color: var(--af-cream);
}

.af-page-header .af-termin-chips__subtitle {
	color: var(--af-ink);
}

/* Running text: wine headings. Direct children of the page content only, so headings inside cards and
   bands keep their own colours. (The orange tab above each h2 was removed in D38.) */
.af-page-body .wp-block-post-content > :where(h2, h3, h4) {
	color: var(--af-wine);
}

.af-page-body .wp-block-post-content > p strong {
	background: linear-gradient(transparent 55%, var(--af-sunflower) 55%);
}

.af-page-body .wp-block-post-content > :where(ul, ol) li::marker {
	color: var(--af-wine);
}

/* "Über mich" qualifications: wine rules, square orange bullets. */
.wp-block-list.is-style-qualifications {
	border-top: 4px solid var(--af-wine);
	border-bottom: 4px solid var(--af-wine);
	margin-bottom: 2.5rem;
}

.wp-block-list.is-style-qualifications li {
	border-bottom: 2px solid var(--af-orange);
}

.wp-block-list.is-style-qualifications li:last-child {
	border-bottom: 0;
}

.wp-block-list.is-style-qualifications li::before {
	box-sizing: border-box;
	width: 12px;
	height: 12px;
	border: 2px solid var(--af-wine);
	border-radius: 0;
	background: var(--af-orange);
}

/* Quotes: a sunflower slab with a thick wine frame. */
.af-page-body .wp-block-quote {
	margin-block: 2.5rem;
	padding: 1.5rem 1.75rem;
	border: 4px solid var(--af-wine);
	background: var(--af-sunflower);
	color: var(--af-wine);
}

/* Methods/formats band on orange, the Kontakt page on sunflower; links stay dark enough on both. */
.af-methods {
	background: var(--af-orange);
}

.af-page-body.af-kontakt {
	background: var(--af-sunflower);
}

.af-methods .is-style-eyebrow,
.af-methods__all a {
	color: var(--af-ink);
}

.af-kontakt__text a {
	color: var(--af-wine);
}

.af-page-body + .af-methods {
	border-top: 6px solid var(--af-wine);
}

/* Termine overview: a full-bleed sunflower band like the home page's Termine section. */
.af-page-body:has(.af-termine-overview) {
	padding-top: 0;
}

.af-page-body .af-termine-overview {
	padding-block: clamp(2.5rem, 6vw, 4rem);
	background: var(--af-sunflower);
	box-shadow: 0 0 0 100vmax var(--af-sunflower);
	clip-path: inset(0 -100vmax);
}

.af-page-body .af-termine-overview__side .is-style-eyebrow {
	color: var(--af-wine);
}

.af-page-body .af-termine-overview__side h2 {
	color: var(--af-wine);
}

.af-page-body .af-termine-note {
	color: var(--af-ink);
}

.wp-site-blocks :is(.af-termine-overview, .af-termine-section) .af-termin__date {
	background: var(--af-cream);
}

/* Orange band for the event cards (was a "blush" tint): heading wine, not the red that vanished on orange. */
.af-page-body .af-formats-band h2 {
	color: var(--af-wine);
	font-style: normal;
}

/* "Meine Arbeit": heading + method cards as one full-bleed orange band that closes the page body. */
.af-page-body:has(.af-method-grid) {
	padding-bottom: 0;
}

.af-page-body .wp-block-post-content > h2:has(+ .af-method-grid),
.af-page-body .af-method-grid {
	background: var(--af-orange);
	box-shadow: 0 0 0 100vmax var(--af-orange);
	clip-path: inset(0 -100vmax);
}

.af-page-body .wp-block-post-content > h2:has(+ .af-method-grid) {
	margin-top: clamp(2.5rem, 6vw, 4rem);
	margin-bottom: 0;
	padding-top: clamp(2.5rem, 6vw, 4rem);
}

.af-page-body .af-method-grid {
	margin-top: -1px;
	padding-top: 1.5rem;
	padding-bottom: clamp(3rem, 7vw, 5rem);
}

/* -- Coherence pass (D36) --------------------------------------------------------------- */

/* Headings (CR4): page titles and section h2 in Archivo 900 like the home sections; h3 and card
   titles (method/format cards, Kontakt panels, "Was ist ein Trauma?") keep the serif. */
.af-page-header :where(h1, .wp-block-post-title, .wp-block-query-title) {
	font-family: var(--wp--preset--font-family--body);
	font-style: normal;
	font-weight: 900;
	font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem); /* ≥1.25× the section h2 on phones (D39) */
	line-height: 0.95;
	letter-spacing: -0.035em;
	hyphens: auto;
	overflow-wrap: break-word;
}

/* All arguments weigh the same (two classes + element), so the legal-page rule below can win. */
:is(
	.af-page-body .wp-block-post-content > h2,
	.af-page-body .wp-block-column > h2,
	.af-page-body .af-termine-overview__side h2,
	.af-page-body .af-formats-band h2,
	.af-page-body .af-termin-dates h2,
	.af-online h2
) {
	font-family: var(--wp--preset--font-family--body);
	font-style: normal;
	font-weight: 900;
	font-size: clamp(1.75rem, 1.25rem + 1.6vw, 2.5rem);
	line-height: 1.05;
	letter-spacing: -0.025em;
	text-wrap: balance;
	overflow-wrap: break-word;
}

/* The "Auch online" box keeps its larger size; on the home page it sits among the poster headlines. */
.wp-site-blocks .af-online h2 {
	font-size: clamp(1.875rem, 1.2rem + 1.6vw, 2.75rem);
	letter-spacing: -0.035em;
}

/* Headings in an opening row (beside a video or portrait) are wine like the others, without the tab. */
.af-page-body .wp-block-post-content > .wp-block-columns > .wp-block-column > :where(h2, h3, h4),
.af-page-body .af-termin-dates h2 {
	color: var(--af-wine);
}

/* An eyebrow already labels the heading below it: no section gap between them. */
.af-page-body .wp-block-post-content > .is-style-eyebrow + h2 {
	margin-top: 0.35rem;
}

/* Impressum/Datenschutz: a quieter hierarchy for legal text. Smaller h2, no tab, bold labels
   without the sunflower marker. */
.page-template-page-legal .af-page-body .wp-block-post-content > h2 {
	margin-top: 2.5rem;
	font-weight: 800;
	font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
	letter-spacing: -0.01em;
}

.page-template-page-legal .af-page-body .wp-block-post-content > h3 {
	font-size: var(--wp--preset--font-size--large);
}

.page-template-page-legal .af-page-body .wp-block-post-content > p strong {
	background: none;
}

/* Method cards like the format cards: ink serif title, round red arrow button; hover lifts the
   card into its shadow instead of turning it red. */
.wp-site-blocks .af-method-card {
	padding: 28px 26px 72px;
	color: var(--af-ink);
}

.af-method-card .wp-block-post-title {
	font-size: clamp(1.625rem, 1.4rem + 0.6vw, 1.875rem);
	line-height: 1.1;
}

.af-method-card .wp-block-post-excerpt {
	font-size: 1rem;
	line-height: 1.5;
}

.af-method-card::after {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	right: 26px;
	bottom: 24px;
	border-radius: 50%;
	background: var(--af-bordeaux);
	color: var(--af-cream);
	font-size: 1rem;
}

.wp-site-blocks .af-method-card:hover {
	background: var(--af-cream);
	color: var(--af-ink);
	box-shadow: 2px 2px 0 var(--af-wine);
}

.af-method-card:hover .wp-block-post-excerpt {
	color: var(--af-ink-soft);
}

.af-method-card:has(a:focus-visible) {
	outline-color: var(--af-ink); /* on the orange band: 6.8:1 */
}

/* Event page: linked chips are buttons (hard shadow, no underline); plain facts stay flat. */
.af-page-header .af-termin-chips__chip--link {
	box-shadow: 4px 4px 0 var(--af-wine);
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.af-page-header .af-termin-chips__chip--link a {
	text-decoration: none;
}

.af-page-header .af-termin-chips__chip--link:hover {
	box-shadow: 2px 2px 0 var(--af-wine);
	transform: translate(2px, 2px);
}

@media (prefers-reduced-motion: reduce) {
	.af-page-header .af-termin-chips__chip--link {
		transition: none;
	}
}

/* The facts sit side by side; the flow layout's block gap pushed the second one down. */
.af-termin-facts > * {
	margin: 0;
}

/* Mobile menu (CR5, phones only): a sunflower panel under the orange header (wine on sunflower 7.3:1),
   closed by a wine rule like the title band; links in Archivo with orange rules and square bullets. */
@media (max-width: 781px) {
	.af-header .af-nav .af-nav__panel {
		padding-bottom: 20px;
		border-bottom: 6px solid var(--af-wine);
		background: var(--af-sunflower);
		box-shadow: none;
	}

	.af-header .af-nav .af-nav__list a {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 15px 0;
		border-bottom: 2px solid var(--af-orange);
		color: var(--af-wine);
		font-size: 1.125rem;
		font-weight: 800;
	}

	.af-header .af-nav .af-nav__list li:last-child a {
		border-bottom: 0;
	}

	.af-header .af-nav .af-nav__list a::before {
		content: "";
		flex: none;
		box-sizing: border-box;
		width: 12px;
		height: 12px;
		border: 2px solid var(--af-wine);
		background: var(--af-orange);
	}

	.af-header .af-nav .af-nav__list .current-menu-item.menu-item-object-page > a {
		text-decoration: underline 3px var(--af-orange);
		text-underline-offset: 6px;
	}

	.af-header .af-nav .af-nav__list .current-menu-item.menu-item-object-page > a::before {
		background: var(--af-wine);
	}
}

/* -- Quiet tier (D37) ------------------------------------------------------------------- */

/* A hard shadow means "you can press this": buttons, linked cards and the Shorts keep it. Boxes
   that only hold information keep the frame and lose the shadow.
   The extra .af-page-body matches the D33/D34 card rules (three classes), so this one wins. */
.wp-site-blocks .af-page-body :is(.af-kontakt-visit, .af-kontakt-call, .af-recommend, .af-format-aside, .af-termin-focus),
.af-page-body .wp-block-quote,
.af-page-body .af-online,
.af-online__side {
	box-shadow: none;
}

/* Inside a page body the "Auch online" box is already framed: its side panel is a plain cream
   surface, not a second card. */
.af-page-body .af-online__side {
	border: 0;
}

/* Method and format links below a page: a plain list of links, not a row of buttons that compete
   with the page's one button. Wine on orange 4.56:1. */
.af-methods__list {
	gap: 0 28px;
}

.af-methods__list .wp-block-button.is-style-pill .wp-block-button__link {
	padding: 12px 0; /* 45px tall targets */
	border: 0;
	box-shadow: none;
	background: none;
	color: var(--af-wine);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 800;
	letter-spacing: 0;
	text-align: left;
	text-transform: none;
	text-decoration: underline 2px;
	text-underline-offset: 6px;
}

.af-methods__list .wp-block-button.is-style-pill .wp-block-button__link:hover {
	background: none;
	color: var(--af-ink);
	text-decoration-thickness: 4px;
	transform: none;
}

/* The contact band invites, it doesn't shout: the number at about 3rem. */
.af-contact-band__phone .wp-block-button.is-style-phone .wp-block-button__link {
	padding-block: 8px; /* ≥ 44px target at the smaller size */
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
}

/* FAQ: four questions, not a sequence; the site's square bullet instead of big numbers. */
.af-faq__item {
	grid-template-columns: 18px minmax(0, 1fr);
	column-gap: 20px;
}

.af-faq__item::before {
	content: "";
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	margin-top: calc(0.55 * clamp(1.375rem, 1.1rem + 1vw, 1.875rem) - 9px); /* centred on the h3's first line */
	border: 3px solid var(--af-wine);
	font-size: 1rem;
	background: var(--af-sunflower);
}

/* The small marker fits beside the text on phones too (the big number used to stack above it). */
@media (max-width: 781px) {
	.af-faq__item {
		column-gap: 14px;
	}

	.af-faq__item::before {
		grid-row: 1 / span 2;
	}

	.af-faq__item > * {
		grid-column: 2;
	}
}

/* Crisis numbers (CR3): ≥ 44px tap targets in both directions ("112" alone is ~28px wide) without
   breaking the sentence's line height. The negative margin gives the padding back, so the text sits
   where it did. */
:is(.af-legal__crisis, .af-kontakt__crisis, .af-nav__crisis, .af-online__crisis) a {
	display: inline-block;
	padding: 12px 10px;
	margin: -12px -10px;
	font-weight: 700;
	white-space: nowrap;
}

/* Footer: a quiet note at caption size (15px, client feedback); the bold numbers keep it findable and
   Kontakt carries the same sentence at body size. */
.af-legal .af-legal__crisis {
	max-width: 52ch;
	font-size: var(--wp--preset--font-size--caption);
}

/* Kontakt: the same sentence right under the two panels, where the visitor decides to call. */
.af-kontakt .af-kontakt__crisis {
	max-width: none;
	margin-block: 24px 0;
	padding: 18px clamp(1.25rem, 3vw, 1.75rem);
	border: 3px solid var(--af-wine);
	background: var(--af-cream);
	color: var(--af-ink);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.7;
}

.af-kontakt .af-kontakt__crisis a {
	color: var(--af-wine);
}

/* Termine overview: one column, so the dates read in order top to bottom (the two-column grid
   ran 12 Nov → 22 Nov across, then 24 Jan, for anyone reading down). */
.wp-site-blocks .af-termine-overview .af-termine {
	grid-template-columns: minmax(0, 1fr);
}

/* One date tile everywhere off the home page: the selected date on its own page is the list's tile,
   only bigger (sunflower, wine frame, Archivo 900), not a red block with a serif numeral. */
.wp-site-blocks .af-termin-focus .af-termin-focus__date {
	min-width: 8rem;
	padding: 14px 18px 16px;
	border: 3px solid var(--af-wine);
	background: var(--af-sunflower);
	color: var(--af-wine);
}

.wp-site-blocks .af-termin-focus .af-termin-focus__day {
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(3.5rem, 2.8rem + 2.4vw, 5.25rem);
	font-weight: 900;
	letter-spacing: -0.03em;
}

.wp-site-blocks .af-termin-focus :is(.af-termin-focus__weekday, .af-termin-focus__month) {
	font-family: var(--af-mono);
	font-size: 0.8125rem;
	font-weight: 500;
}

/* The calendar link is a plain text link, not mono capitals. */
.wp-site-blocks .af-termin-focus .af-termin-focus__ical {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	gap: 0.35em; /* the "+" is a flex item, so the space after it collapses */
	color: var(--af-wine);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Reading text on the inner pages at ~19px in a 38rem column (templates, D38): at Archivo's measured
   ~0.445em per character that is at most ~72 characters a line. Text beside a video or portrait in an
   opening row gets the same size and measure. */
.af-page-body .wp-block-post-content > :where(p, ul:not(.is-style-qualifications), ol),
.af-page-body .wp-block-post-content > .wp-block-columns > .wp-block-column > :where(p, ul:not(.is-style-qualifications), ol) {
	font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
	line-height: 1.65;
}

.af-page-body .wp-block-post-content > .wp-block-columns > .wp-block-column > :where(p, ul:not(.is-style-qualifications), ol) {
	max-width: 38rem;
}

/* Stretched card links: square like the C2 cards, so the click area and focus ring match the frame. */
.af-jump__link a::after {
	border-radius: 0;
}

/* 404: the ways on as a short list of big links (≥ 44px targets). */
.af-page-body .af-404-links {
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.af-page-body .af-404-links a {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	color: var(--af-wine);
	font-size: var(--wp--preset--font-size--chip);
	font-weight: 800;
	text-decoration: underline 2px var(--af-orange);
	text-underline-offset: 6px;
}

.af-page-body .af-404-links a::after {
	content: " →";
	white-space: pre;
}

/* -- Consistency pass (D38) ------------------------------------------------------------- */

/* One phone style for "the number": Archivo 900, as in the contact band and on Kontakt (was a red
   serif in the date page's registration box). Wine on cream ≥ 9:1. */
.wp-site-blocks .af-termin-focus .af-termin-focus__phone {
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(1.625rem, 1.3rem + 1vw, 2rem);
	font-weight: 900;
	letter-spacing: -0.02em;
	color: var(--af-wine);
}

/* The date is in the tile, so the visible line under it is the time, in the list's voice. */
.wp-site-blocks .af-termin-focus .af-termin-focus__when {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
	color: var(--af-wine);
}

/* Home "Meine Arbeit": the methods as the same cards as on the "Meine Arbeit" page (cream, wine
   frame, ink serif title, round red arrow), not alternating colour tiles. On the orange band the
   hard shadow is wine, as on the methods band of the inner pages (D42). */
.af-work__list a {
	position: relative;
	padding: 22px 22px 64px;
	border: 3px solid var(--af-wine);
	box-shadow: 4px 4px 0 var(--af-wine);
	background: var(--af-cream);
	color: var(--af-ink);
	font-family: var(--af-serif);
	font-size: clamp(1.375rem, 1.2rem + 0.5vw, 1.625rem);
	font-weight: 400;
	line-height: 1.15;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.af-work__list li:nth-child(even) a {
	background: var(--af-cream);
}

.af-work__list a::after {
	position: absolute;
	right: 20px;
	bottom: 18px;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--af-bordeaux);
	color: var(--af-cream);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
}

.af-work__list a:hover {
	background: var(--af-cream);
	box-shadow: 2px 2px 0 var(--af-wine);
	transform: translate(2px, 2px);
}

/* A Startseite saved before D42 still has a wine "Meine Arbeit" band: keep its orange title, sunflower
   shadow and ring there, so the theme can go live before the content is copied. */
.af-work.has-wine-background-color .af-work__head h2 {
	color: var(--af-orange);
}

.af-work.has-wine-background-color .af-work__list a {
	box-shadow: 4px 4px 0 var(--af-sunflower);
}

.af-work.has-wine-background-color .af-work__list a:hover {
	box-shadow: 2px 2px 0 var(--af-sunflower);
}

.af-work.has-wine-background-color :where(a, button):focus-visible {
	outline-color: var(--af-sunflower);
}

@media (prefers-reduced-motion: reduce) {
	.af-work__list a {
		transition: none;
	}

	.af-work__list a:hover {
		transform: none;
	}
}

@media (max-width: 781px) {
	.af-work__list a {
		min-height: 64px;
		padding: 16px 64px 16px 18px;
	}

	.af-work__list a::after {
		top: calc(50% - 16px);
		bottom: auto;
	}
}

/* "Auch online": calling is the one filled button with a hard shadow; the video-call request is the
   quiet second choice (frame, no shadow). Sentence case so "0175 69 423 17 Anrufen" and "Videocall per
   E-Mail anfragen" stay on one line in the narrow box. Four classes match the shared button rule and
   come later, so they win. */
.wp-block-buttons .wp-block-button.af-online__action .wp-block-button__link {
	font-weight: 800;
	letter-spacing: 0;
	text-transform: none;
}

.wp-block-button.af-online__action.is-style-online-secondary .wp-block-button__link,
.wp-block-button.af-online__action.is-style-online-secondary .wp-block-button__link:hover {
	box-shadow: none;
	transform: none;
}

/* Measure on the home page and Kontakt (D38): FAQ answers and the welcome letter at ~18px, the crisis
   note at 17px, each capped near 72 characters a line. */
.af-faq__item p,
.af-welcome__text > p {
	max-width: 36rem;
}

.af-kontakt .af-kontakt__crisis {
	box-sizing: border-box;
	max-width: 38rem;
}

/* "Über mich" qualifications (16px) and the 404 text (no post content there) on the same measure. */
.wp-block-list.is-style-qualifications {
	max-width: 34rem;
}

.error404 .af-page-body > p {
	font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
	line-height: 1.65;
}

/* "Erreichbarkeit" (contact settings, D38): a quiet line under the number wherever it appears; not
   rendered while the field is empty. */
.af-contact-band .af-contact-band__availability,
.af-kontakt-call .af-kontakt-call__availability {
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
}

.wp-site-blocks .af-termin-focus .af-termin-focus__availability {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--af-ink);
}

/* Mobile menu foot: availability under the contact links, then the crisis note (ink on sunflower 12:1). */
.af-nav__availability {
	color: var(--af-ink);
	font-size: 1rem;
	line-height: 1.5;
}

.af-nav__crisis {
	display: none;
}

@media (max-width: 781px) {
	.af-header .af-nav .af-nav__crisis {
		display: block;
		margin: 18px 0 0;
		padding-top: 14px;
		border-top: 2px solid var(--af-orange);
		color: var(--af-ink);
		font-size: 0.9375rem;
		line-height: 1.75;
	}

	.af-header .af-nav .af-nav__crisis a {
		color: var(--af-wine);
	}
}

/* FAQ marker: a filled wine square (the outlined one read like a checkbox to tick). */
.af-faq__item::before {
	width: 12px;
	height: 12px;
	margin-top: calc(0.55 * clamp(1.375rem, 1.1rem + 1vw, 1.875rem) - 6px);
	border: 0;
	background: var(--af-wine);
}

.af-faq__item {
	grid-template-columns: 12px minmax(0, 1fr);
}

/* Tap targets (D38): phone numbers and text links at least 44px tall, without moving the text. */
.wp-block-button.is-style-phone .wp-block-button__link,
.wp-block-button.is-style-text-link .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* Shorts in running text: the 8px hard shadow stays inside the grid instead of poking past it. */
.af-video-card.af-content-video {
	width: calc(100% - 8px);
}

/* The rest of a capped Termine list on the overview page, folded below it (D39): a bold arrow text
   link like the other "more" links, the dates continue as the same list. */
.af-termine-more {
	margin: 0;
	color: var(--af-ink);
}

.af-termine-more > summary {
	display: flex;
	align-items: center;
	gap: 0.4em;
	min-height: 44px;
	padding-top: 12px;
	font-weight: 800;
	cursor: pointer;
	list-style: none;
}

.af-termine-more > summary::-webkit-details-marker {
	display: none;
}

.af-termine-more > summary::after {
	content: "↓" / "";
}

.af-termine-more[open] > summary::after {
	content: "↑" / "";
}

.af-termine-more > summary:hover {
	color: var(--af-bordeaux);
}

.af-termine-more > summary:focus-visible {
	outline: 3px solid var(--af-bordeaux);
	outline-offset: 2px;
}

/* Year line before the first date of another year (D39). The year's last row has no closing rule:
   white space separates the years, the year line's rule opens the next one. */
.wp-site-blocks .af-termine .af-termin:has(+ .af-termine__year) {
	border-bottom: 0;
}

.wp-site-blocks .af-termine .af-termine__year {
	padding-top: 40px;
	padding-bottom: 4px;
	border-bottom: 4px solid var(--af-wine);
	font-weight: 900;
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: -0.01em;
	color: var(--af-wine);
}

/* The contact band's heading is a heading, not a mono tag: Archivo, sentence case. */
.af-contact-band .af-contact-band__title {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 800;
	letter-spacing: 0;
	text-transform: none;
}

/* The last links under 44px (footer legal menu, "Alle Methoden im Überblick", the practice link on a
   date page): taller hit area, same look. */
.af-legal-nav a,
.af-methods__all a,
.af-termin-focus .af-termin-focus__practice {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}