/*
Theme Name: Zander
Theme URI: https://zander.coach
Author: Christian Zander
Description: Block theme for zander.coach — "Strömung" corporate design: brand petrol, Epilogue, Spectral, flipchart illustrations.
Version: 0.9.30
Requires at least: 6.5
Requires PHP: 8.1
License: proprietary
Text Domain: zander
*/

/* Colour and type tokens live in theme.json. Only what block settings
   cannot express on their own belongs here. */

/* ---------- Header ---------- */

/* Sticky has to sit on the <header> element itself. On the group inside it
   the element would have nowhere to travel, because its parent is exactly
   as tall as it is. */

.zander-header {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* The admin bar is fixed above everything while logged in. */
body.admin-bar .zander-header {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .zander-header {
		top: 46px;
	}
}

/* Past the threshold a script adds .is-compact; everything below is the
   shrink. Padding lives here rather than in the pattern, because an inline
   style would outrank the compact rule. */

.zander-header > .wp-block-group {
	padding-top: var(--wp--preset--spacing--30);
	padding-bottom: var(--wp--preset--spacing--30);
	transition: padding 0.18s ease-out;
}

.zander-header.is-compact > .wp-block-group {
	padding-top: var(--wp--preset--spacing--10);
	padding-bottom: var(--wp--preset--spacing--10);
}

/* Wherever the menu folds, the wordmark stays left and the toggle sits on
   the right, phone included. */

/* Core folds the menu into its toggle only below 600px. Six entries need
   about 800px, so up to 781px — where the content columns stack, too — the
   row holds wordmark and toggle, and the menu opens as the same overlay as
   on a phone. Core's rules count three classes, these four. */

@media (min-width: 600px) and (max-width: 781px) {
	.zander-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.zander-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

.zander-header.is-compact .zander-wordmark img,
.zander-header.is-compact .zander-wordmark svg {
	height: clamp(19px, 1.3rem, 24px);
}

/* Jump links would otherwise land underneath the sticky header. */
html {
	scroll-padding-top: 7rem;
}

@media (prefers-reduced-motion: reduce) {
	.zander-header > .wp-block-group,
	.zander-header .zander-wordmark img,
	.zander-header .zander-wordmark svg {
		transition: none;
	}
}


.zander-wordmark img,
.zander-wordmark svg {
	height: clamp(23px, 1.6rem, 32px);
	width: auto;
	display: block;
	transition: height 0.18s ease-out;
}

.zander-nav a {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 1px solid transparent;
}

.zander-nav a:hover,
.zander-nav a:focus-visible {
	color: var(--wp--preset--color--brand-deep);
	border-bottom-color: var(--wp--preset--color--brand-deep);
}

/* The page you are on reads like the open "Formate": petrol, underlined.
   Inside the dropdown, where items carry no underline, petrol alone. */

.zander-nav .current-menu-item > a {
	color: var(--wp--preset--color--brand-deep);
	border-bottom-color: var(--wp--preset--color--brand-deep);
}

/* ---------- Submenu ("Formate") ----------

   Core ships a submenu that works but looks like core: a white box with a
   1px black border, flush against the parent. These rules give it the same
   surface, rule colour and display face as the rest of the header.

   The parent item keeps its own link (/#formate on the front page), so the
   label stays useful on its own and the group is not a dead end. */

.zander-nav .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 2px;
	box-shadow: 0 6px 20px -8px rgba(15, 26, 26, 0.18);
	padding: 0.4rem 0;
}

/* Core sets its own padding per item; ours needs to span the full width so
   the hover area is the whole row, not just the words. */
.zander-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.42rem 1.1rem;
	border-bottom: 0;
	display: block;
	white-space: nowrap;
}

.zander-nav .wp-block-navigation__submenu-container .current-menu-item > a {
	color: var(--wp--preset--color--brand-deep);
	font-weight: 600;
}

.zander-nav .wp-block-navigation__submenu-container a:hover,
.zander-nav .wp-block-navigation__submenu-container a:focus-visible {
	color: var(--wp--preset--color--brand-deep);
	background-color: var(--wp--preset--color--surface);
	border-bottom-color: transparent;
}

/* The open parent reads as active while its submenu stands, and a child page
   marks the parent too — otherwise "Formate" looks unvisited on /mandate/. */
.zander-nav .has-child:hover > a,
.zander-nav .has-child:focus-within > a,
.zander-nav .current-menu-ancestor > a {
	color: var(--wp--preset--color--brand-deep);
	border-bottom-color: var(--wp--preset--color--brand-deep);
}

.zander-nav .wp-block-navigation__submenu-icon {
	margin-left: 0.3rem;
}

.zander-nav .wp-block-navigation__submenu-icon svg {
	width: 0.7em;
	height: 0.7em;
}

/* ---------- Menu overlay ----------

   Where the menu folds into its toggle it opens as a full panel in deep
   petrol, like the contact band: the entries large and left aligned in the
   display face, the formats indented beneath "Formate" behind a thin line,
   the page you are on in light petrol. Core's overlay rules run up to five
   classes deep; these carry six so they win without !important. */

.zander-header .wp-block-navigation.zander-nav .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	background-color: var(--wp--preset--color--brand-deep);
	color: var(--wp--preset--color--paper);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
}

.zander-header .wp-block-navigation.zander-nav .is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	padding-top: var(--wp--preset--spacing--50);
}

.zander-header .wp-block-navigation.zander-nav .is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
	gap: 0.9rem;
}

.zander-header .wp-block-navigation.zander-nav .is-menu-open .wp-block-navigation-item {
	align-items: flex-start;
}

.zander-header .wp-block-navigation.zander-nav .is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--preset--color--paper);
	font-size: 1.7rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.015em;
	border-bottom: 2px solid transparent;
	padding: 0 0 2px;
}

.zander-header .wp-block-navigation.zander-nav .is-menu-open a:hover,
.zander-header .wp-block-navigation.zander-nav .is-menu-open a:focus-visible {
	color: var(--wp--preset--color--paper);
	background-color: transparent;
	border-bottom-color: var(--wp--preset--color--paper);
}

.zander-header .wp-block-navigation.zander-nav .is-menu-open a:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-light);
	outline-offset: 4px;
}

.zander-header .wp-block-navigation.zander-nav .is-menu-open .current-menu-item > a,
.zander-header .wp-block-navigation.zander-nav .is-menu-open .current-menu-ancestor > a {
	color: var(--wp--preset--color--brand-light);
	border-bottom-color: var(--wp--preset--color--brand-light);
}

/* The formats are part of the list, not a dropdown: no box, smaller type,
   indented behind a thin line. */

.zander-header .wp-block-navigation.zander-nav .is-menu-open .has-child .wp-block-navigation__submenu-container {
	background-color: transparent;
	border: 0;
	border-left: 1px solid var(--wp--preset--color--brand);
	border-radius: 0;
	box-shadow: none;
	margin: 0.7rem 0 0.2rem 0.2rem;
	padding: 0 0 0 1.1rem;
	gap: 0.55rem;
}

.zander-header .wp-block-navigation.zander-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 1.2rem;
	font-weight: 500;
	padding: 0 0 2px;
}

.zander-header .wp-block-navigation.zander-nav .is-menu-open .wp-block-navigation__submenu-container .current-menu-item > a {
	font-weight: 600;
}

/* The close mark in paper, the size of the toggle. */

.zander-header .wp-block-navigation.zander-nav .is-menu-open .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--paper);
	top: var(--wp--preset--spacing--30);
	right: var(--wp--preset--spacing--30);
}

.zander-header .wp-block-navigation.zander-nav .is-menu-open .wp-block-navigation__responsive-container-close svg {
	width: 28px;
	height: 28px;
}

/* ---------- Buttons ---------- */

/* Core gives the outline button its own metrics: a 2px border and
   different padding from the filled one, which would make the two
   different sizes. Both use the theme.json values here. */

.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button .wp-block-button__link.is-style-outline {
	border-width: 2px;
	padding: calc(0.78rem - 1px) calc(1.4rem - 1px);
	color: var(--wp--preset--color--brand-deep);
	border-color: var(--wp--preset--color--brand-deep);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--brand-deep);
	color: var(--wp--preset--color--paper);
}

/* ---------- Footer ---------- */

/* The footer sits on the dark "deep" surface. The brand petrol used for
   links everywhere else drops to 2.9:1 there and is no longer legible,
   so links run in paper (12.4:1) and lighten on hover. */

/* Space above the footer, unless the page already closes with a band —
   then the band meets the footer directly. */

.zander-footer {
	margin-top: var(--wp--preset--spacing--60);
}

.wp-site-blocks:has(.wp-block-post-content > .zander-band:last-child) > footer {
	margin-block-start: 0;
}

.wp-site-blocks:has(.wp-block-post-content > .zander-band:last-child) .zander-footer {
	margin-top: 0;
}

.zander-footer a {
	color: var(--wp--preset--color--paper);
}

.zander-footer a:hover,
.zander-footer a:focus-visible {
	color: var(--wp--preset--color--brand);
}

/* The label style carries brand-deep, which drops to an unreadable ratio on
   the dark surface. */

.zander-footer .is-style-label {
	color: var(--wp--preset--color--brand);
	margin-bottom: var(--wp--preset--spacing--30);
}

/* Icon row. The icons are Font Awesome paths lifted from the previous site
   and carry no colour of their own — they take the link colour. */

.zander-icons {
	display: flex;
	flex-wrap: wrap;
	gap: 1.1rem;
	margin-top: var(--wp--preset--spacing--30);
}

.zander-icons a {
	display: inline-flex;
	color: var(--wp--preset--color--paper);
	transition: color 0.15s ease-out;
}

.zander-icons a:hover,
.zander-icons a:focus-visible {
	color: var(--wp--preset--color--brand);
}

.zander-footer p {
	margin-bottom: 0.4rem;
}

/* ---------- Section labels ---------- */

.is-style-label {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-deep);
	line-height: 1.5;
	margin: 0 0 0.55rem;

}

/* ---------- Opening statement ---------- */

/* The sentence that opens a section. It stays an h3 — the section label
   above it is the h2 — but carries the weight of a large heading, so it
   gets the size and tight setting an h2 would have. */

.wp-block-heading.is-style-opener {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.14;
	letter-spacing: -0.022em;
	text-wrap: balance;
}

/* ---------- Highlighted statement ---------- */

/* Set in the display face, light and italic: what someone says, or the
   sentence a section stands on. In a band it is the whole message. */

.is-style-statement {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 300;
	font-size: var(--wp--preset--font-size--voice);
	line-height: 1.45;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

/* ---------- Lede below the main heading ---------- */

.is-style-lede {
	font-size: var(--wp--preset--font-size--lede);
	line-height: 1.55;
	max-width: 34rem;
}

/* The highlighter stroke under the three words — drawn, not typed. It lies
   behind the lower half of the letters; the stroke is semi-transparent, so
   the text stays legible. The file only lends its shape, through a mask —
   the colour comes from the palette. */

.is-style-lede strong {
	position: relative;
	z-index: 0;
	display: inline-block; /* keeps the words together, so the stroke never splits across lines */
	font-weight: 600;
}

.is-style-lede strong::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: -0.2em;
	right: -0.2em;
	bottom: -0.3em;
	height: 1.35em;
	background: var(--wp--preset--color--brand);
	-webkit-mask: url(assets/img/highlight-1800x280.webp) no-repeat center / 100% 100%;
	mask: url(assets/img/highlight-1800x280.webp) no-repeat center / 100% 100%;
}

/* ---------- Headings must not run too wide ---------- */

h1.wp-block-post-title,
.is-style-display {
	max-width: 16ch;
	text-wrap: balance;
}

h2 {
	text-wrap: balance;
}

/* ---------- Quote ---------- */

.wp-block-quote {
	border: 0;
	padding: 0;
	margin-left: 0;
}

.wp-block-quote cite {
	display: block;
	margin-top: 0.6rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.82rem;
	font-style: normal;
	color: var(--wp--preset--color--muted);
}

/* ---------- Lists ---------- */

/* Every bulleted list carries the signet as its bullet. The SVG already
   carries the brand colour, so it comes from the file, not a CSS variable.
   Numbered lists keep their numbers. */

ul.wp-block-list {
	list-style: none;
	padding-left: 0;
}

ul.wp-block-list > li {
	padding-left: 1.7rem;
	position: relative;
	margin-bottom: 0.5rem;
}

ul.wp-block-list > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.32em;
	width: 0.9em;
	height: 0.9em;
	background: url("assets/img/signet.svg") center / contain no-repeat;
}

/* The one exception: a list of what does not fit gets a plain dash, so
   the signet never stands in front of a "no". */

ul.wp-block-list.is-style-dash > li {
	padding-left: 1.2rem;
}

ul.wp-block-list.is-style-dash > li::before {
	top: 0.75em;
	width: 0.6rem;
	height: 1px;
	background: var(--wp--preset--color--brand);
}

/* The signet replaces the dash as the bullet. The SVG already carries
   the brand colour, so it comes from the file, not a CSS variable. */

.wp-block-list.is-style-signet li {
	padding-left: 1.7rem;
}

.wp-block-list.is-style-signet li::before {
	top: 0.32em;
	width: 0.9em;
	height: 0.9em;
	background: url("assets/img/signet.svg") center / contain no-repeat;
}

/* ---------- The scale of what is promised ---------- */
/* Five cells, one per stage, and always all five — the empty ones carry
   the statement just as much as the filled ones. Filled: promised.
   Hatched: available as an extension, but not part of the promise. Empty:
   not the subject of this format. Same language as the bearing line, where
   a gap means something does not carry yet.
   The bar is never a comparison between the four formats; each page shows
   its own. Its legend is the small print at the end of the section, which
   names the five stages — deliberately no second one.
   The fill states are not written out on screen: the sentence above the
   bar says them in words, and the screen reader gets them from the
   .screen-reader-text inside every cell. */

.zander-stufen {
	list-style: none;
	padding: 0;
	margin: var(--wp--preset--spacing--40) 0 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0.4rem;
}

.zander-stufen > li {
	margin: 0;
	padding: 0;
}

.zander-stufen__zelle {
	display: block;
	height: 0.85rem;
	border: 1px solid var(--wp--preset--color--brand);
	background: transparent;
}

/* The three fill states are written without their parent, because the
   comparison bar further down uses the very same three. */

.is-zugesagt > .zander-stufen__zelle {
	background: var(--wp--preset--color--brand);
}

/* The hatching runs at 45°, the same angle the signet uses. Thin enough to
   read as "partly", solid enough not to shimmer on a low-resolution screen. */

.is-ausbaustufe > .zander-stufen__zelle {
	background: repeating-linear-gradient(
		45deg,
		var(--wp--preset--color--brand) 0 2px,
		transparent 2px 5px
	);
}

.is-nicht > .zander-stufen__zelle {
	border-color: var(--wp--preset--color--rule);
}

.zander-stufen__name {
	display: block;
	margin-top: 0.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--wp--preset--color--ink-soft);
}

.zander-stufen > .is-nicht .zander-stufen__name {
	color: var(--wp--preset--color--muted);
}

/* Five labels side by side stop fitting long before the columns stack.
   Below the same threshold the bar turns on its side: one row per stage,
   cell first, name beside it. All five are still there. */

@media (max-width: 781px) {
	.zander-stufen {
		grid-template-columns: 1fr;
		gap: 0.55rem;
	}

	.zander-stufen > li {
		display: grid;
		grid-template-columns: 4rem 1fr;
		align-items: center;
		gap: 0.8rem;
	}

	.zander-stufen__zelle {
		height: 0.7rem;
	}

	.zander-stufen__name {
		margin-top: 0;
	}
}

/* ---------- The same scale, all four formats at once ---------- */
/* Only on the gate page. There the sorting is the content of the page, so
   the comparison is the argument — on the four format pages the rule from
   FORMAT.md stands unchanged: each shows its own bar and no comparison.
   The five stage names are the head row and stand there once; every row
   below is one format. Cells and fill states are the same as in the single
   bar, and so is the small print at the end of the section as its legend.
   Marked up as a table, because that is what it is: the screen reader
   announces "Trainings, Angewendet, als Ausbaustufe" from the row and
   column headers. */

.zander-stufen-vergleich {
	width: 100%;
	margin: var(--wp--preset--spacing--40) 0 0;
	border-collapse: collapse;
	table-layout: fixed;
}

.zander-stufen-vergleich th,
.zander-stufen-vergleich td {
	padding: 0;
	text-align: left;
	vertical-align: bottom;
	font-weight: 400;
}

/* One gap between the columns, none at the outer edges — the bar starts
   flush with the text above it. */

.zander-stufen-vergleich tr > * + * {
	padding-left: 0.4rem;
}

.zander-stufen-vergleich tbody tr > * {
	padding-top: 0.45rem;
}

.zander-stufen-vergleich__ecke,
.zander-stufen-vergleich__format {
	width: 24%;
	padding-right: 1rem;
	line-height: 1.3;
}

/* In the single bar the name stands under its cell, here above the whole
   column. */

.zander-stufen-vergleich .zander-stufen__name {
	margin-top: 0;
	margin-bottom: 0.45rem;
}

/* Five names over five columns stop fitting at the same width as the single
   bar. Instead of turning, the bar keeps its shape and the format name moves
   above its own row — the names stay where they are, and there is still only
   one row of them. The soft hyphens in the markup do the rest. */

@media (max-width: 781px) {
	.zander-stufen-vergleich,
	.zander-stufen-vergleich thead,
	.zander-stufen-vergleich tbody {
		display: block;
	}

	/* minmax(0, …) lets a column go narrower than its longest name —
	   without it "ANGENOMMEN" pushes the bar off the screen. */

	.zander-stufen-vergleich tr {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		column-gap: 0.4rem;
	}

	.zander-stufen-vergleich tr > * + * {
		padding-left: 0;
	}

	/* The cells only, not the row label: it needs its space above, and a
	   rule on tr > * would outweigh its own. */

	.zander-stufen-vergleich tbody td {
		padding-top: 0;
	}

	.zander-stufen-vergleich__ecke {
		display: none;
	}

	.zander-stufen-vergleich__format {
		grid-column: 1 / -1;
		width: auto;
		padding: var(--wp--preset--spacing--30) 0 0.4rem;
	}

	.zander-stufen-vergleich .zander-stufen__name {
		font-size: 0.66rem;
		letter-spacing: 0.04em;
		overflow-wrap: anywhere;
	}

	.zander-stufen-vergleich .zander-stufen__zelle {
		height: 0.7rem;
	}
}

/* ---------- Screen reader only ---------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- Hero ---------- */

/* Heading and buttons on the left, the portrait on the right. The portrait
   stands on the lower edge of the section, so the section has no bottom
   padding and the column sits at the bottom. */

.zander-hero {
	padding-top: var(--wp--preset--spacing--50);
	margin-bottom: 0;
	gap: var(--wp--preset--spacing--50);
}

/* The text column keeps the same air below as above, so the buttons never
   sit on the band — whichever column happens to be taller. */

@media (min-width: 782px) {
	.zander-hero > .wp-block-column:first-child {
		padding-bottom: var(--wp--preset--spacing--50);
	}
}

.zander-hero .is-style-lede {
	margin-top: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--40);
}

.zander-hero__portrait {
	margin: 0 0 0 auto;
	max-width: 26rem;
}

.zander-hero__portrait img {
	display: block;
	width: 100%;
	height: auto;
}

/* Stacked, the portrait follows the buttons and keeps to the right, as in
   the wide layout — below them, never across them. */

@media (max-width: 781px) {
	.zander-hero__portrait {
		max-width: 70%;
	}
}

/* ---------- Bands ---------- */

/* Full-width strips that carry one message: a label and a statement,
   centred. The light ones introduce a section, the dark one closes the
   page. */

.zander-band {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--50);
	text-align: center;
}

.zander-band.alignfull {
	margin-top: 0;
	margin-bottom: 0;
}

.zander-band .is-style-statement {
	margin-top: 0;
}

/* The sentence a band stands on is said, not called out: upright and in
   the regular weight. Quotes in the voices slider keep their italic. */

.zander-band > .is-style-statement {
	font-style: normal;
	font-weight: 400;
}

.zander-band .wp-block-buttons {
	justify-content: center;
	margin-top: var(--wp--preset--spacing--40);
}

/* On the dark band the label takes the light petrol, which still reads at
   small size; the button turns over to paper on petrol. */

.zander-band.has-brand-deep-background-color .is-style-label {
	color: var(--wp--preset--color--brand-light);
}

/* A link in running text on the dark band would otherwise keep its petrol
   and vanish into the ground. */

.zander-band.has-brand-deep-background-color p a {
	color: var(--wp--preset--color--paper);
}

.zander-band.has-brand-deep-background-color .wp-block-button__link {
	background-color: var(--wp--preset--color--paper);
	border-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--brand-deep);
}

.zander-band.has-brand-deep-background-color .wp-block-button__link:hover,
.zander-band.has-brand-deep-background-color .wp-block-button__link:focus-visible {
	background-color: transparent;
	color: var(--wp--preset--color--paper);
}

/* ---------- Section head ---------- */

/* Label and opening sentence of a homepage section, on the page ground and
   directly above the content they open, instead of a band of their own.
   Centred like the bands that remain; the content follows at half the
   usual distance, so head and section read as one. */

.zander-section-head {
	padding-top: var(--wp--preset--spacing--60);
	text-align: center;
}

.zander-section-head .is-style-opener {
	margin-top: 0;
	margin-inline: auto;
	max-width: 46rem;
	font-weight: 600;
	line-height: 1.25;
}

.zander-section-head + .zander-section {
	padding-top: var(--wp--preset--spacing--40);
}

@media (max-width: 781px) {
	.zander-section-head {
		padding-top: var(--wp--preset--spacing--50);
	}
}

/* ---------- Sections ---------- */

.zander-section {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
}

@media (max-width: 781px) {
	.zander-section {
		padding-top: var(--wp--preset--spacing--50);
		padding-bottom: var(--wp--preset--spacing--50);
	}
}

/* Bands and sections are separated by their own padding, never by the
   block gap of the page. */

.wp-block-post-content > .zander-band,
.wp-block-post-content > .zander-section-head,
.wp-block-post-content > .zander-section,
.wp-block-post-content > .zander-logos,
.wp-block-post-content > .zander-hero,
.wp-block-post-content > .zander-page-head,
.wp-block-post-content > .zander-text,
.wp-block-post-content > .zander-panel {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ---------- Pages ---------- */

/* Below the home page everything reads in one column, the content width:
   title, lede and text start on the same edge. Wide is left to the bands. */

.zander-page-title .wp-block-post-title {
	margin: 0;
}

.zander-page-head {
	padding-bottom: var(--wp--preset--spacing--50);
}

.zander-page-head .is-style-lede {
	margin-top: var(--wp--preset--spacing--30);
}

.zander-page-head .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--40);
}

/* Like the home page, every head carries a picture and two buttons: the
   page's icon from the website set, on "Über mich" the portrait. Text on
   the left, picture on the right of the reading column. */

.zander-page-head__visual {
	margin: 0;
}

.zander-page-head__visual.zander-icon {
	width: 10rem;
	height: 10rem;
}

.zander-page-head__portrait img {
	display: block;
	width: 100%;
	height: auto;
}

/* Certification badges are third-party marks: shown as they are, in their
   own colours, never tinted or multiplied. In the head they take the place
   of the icon, in the training list they stand above each entry. */

.zander-page-head__badge {
	width: 10rem;
}

.zander-page-head__badge img,
.zander-badge img {
	display: block;
	width: 100%;
	height: auto;
}

.zander-badge {
	width: 6rem;
	margin: 0 0 var(--wp--preset--spacing--20);
}

/* A second badge inside the text, small, with a line beside it: the
   certificate that comes next (or, from 2027, the one still on offer
   in-house). The line is the caption of the image. */
.zander-badge-note {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin-block: var(--wp--preset--spacing--30);
}

.zander-badge-note img {
	display: block;
	flex-shrink: 0;
	width: 4rem;
	height: auto;
}

.wp-block-image.zander-badge-note figcaption {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-soft);
	text-align: left;
}

@media (min-width: 782px) {
	.zander-page-head.has-visual {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: var(--wp--preset--spacing--50);
	}

	.zander-page-head.has-visual > * {
		grid-column: 1;
	}

	/* The picture stands beside the text, at most three paragraphs deep;
	   the buttons run below both, so two of them always fit one row. */

	.zander-page-head.has-visual > .zander-page-head__visual {
		grid-column: 2;
		grid-row: 1 / span 3;
		align-self: center;
	}

	.zander-page-head.has-visual > .wp-block-buttons {
		grid-column: 1 / -1;
	}

	.zander-page-head__portrait {
		width: 13rem;
	}
}

/* Stacked, the icon stands small above the lede; the portrait follows the
   buttons and keeps to the right, as on the home page. */

@media (max-width: 781px) {
	.zander-page-head.has-visual {
		display: flex;
		flex-direction: column;
	}

	.zander-page-head__visual.zander-icon,
	.zander-page-head__badge {
		order: -1;
		width: 4.5rem;
		height: 4.5rem;
		margin-top: var(--wp--preset--spacing--30);
	}

	.zander-page-head__portrait {
		align-self: flex-end;
		width: 60%;
		margin-top: var(--wp--preset--spacing--40);
	}
}

/* The contact page opens with its sentence instead of a lede. */

.zander-contact .is-style-opener {
	margin-top: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--ink);
}

/* A text section opens either with a label and an opening sentence or,
   where the text has none, with its heading at full size. Two in a row are
   parted by a hairline, not by more space. */

.zander-text,
.zander-panel {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--50);
}

.zander-text + .zander-text {
	border-top: 1px solid var(--wp--preset--color--rule);
}

.zander-text > :first-child,
.zander-panel > :first-child {
	margin-top: 0;
}

/* Full-size heading and opening sentence carry the same weight, so they
   share the ink; petrol stays with the small label. */

.zander-text h2:not(.is-style-label),
.zander-panel h2:not(.is-style-label) {
	color: var(--wp--preset--color--ink);
}

.zander-text .zander-grid {
	gap: var(--wp--preset--spacing--40);
}

/* Three or more side by side do not fit the reading column. The grid steps
   out to the wide frame, centred on the column; two stay inside. */

@media (min-width: 782px) {
	.zander-text > .zander-grid:has(> .wp-block-column:nth-child(3)) {
		position: relative;
		left: 50%;
		width: min(var(--wp--style--global--wide-size), 100vw - 3rem);
		transform: translateX(-50%);
		gap: var(--wp--preset--spacing--50);
		margin-top: var(--wp--preset--spacing--40);
	}
}

/* The panel is a text section on the light band: the one passage a reader
   should recognise themselves in. */

.zander-panel.alignfull {
	margin-top: 0;
	margin-bottom: 0;
}

/* Voices sit in a band like the quotes on the home page: what someone
   said, in the statement face, the name beneath. */

.zander-voices .wp-block-quote {
	margin: 0 auto var(--wp--preset--spacing--40);
}

.zander-voices .wp-block-quote .is-style-statement {
	margin: 0;
}

.zander-voices .wp-block-quote cite {
	margin-top: var(--wp--preset--spacing--20);
}

/* Two or more voices turn into a slider (script in functions.php): all
   quotes share one cell, so the band keeps the height of the longest and
   nothing below it jumps; only the active one is visible. */

.zander-voices__stage,
.zander-shots__stage {
	display: grid;
}

.zander-voices.is-slider .zander-voices__stage > .wp-block-quote,
.zander-shots.is-slider .zander-shots__stage > .wp-block-image {
	grid-area: 1 / 1;
	margin-bottom: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease, visibility 0.6s;
}

.zander-voices.is-slider .zander-voices__stage > .wp-block-quote.is-active,
.zander-shots.is-slider .zander-shots__stage > .wp-block-image.is-active {
	opacity: 1;
	visibility: visible;
}

.zander-voices__dots,
.zander-shots__dots {
	display: flex;
	justify-content: center;
	gap: 0.6rem;
	margin: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--40);
}

.zander-voices__dots button,
.zander-shots__dots button {
	width: 0.7rem;
	height: 0.7rem;
	padding: 0;
	border: 1px solid var(--wp--preset--color--brand-deep);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

.zander-voices__dots button[aria-current="true"],
.zander-shots__dots button[aria-current="true"] {
	background: var(--wp--preset--color--brand-deep);
}

.zander-voices__dots button:focus-visible,
.zander-shots__dots button:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.zander-voices.is-slider .zander-voices__stage > .wp-block-quote,
	.zander-shots.is-slider .zander-shots__stage > .wp-block-image {
		transition: none;
	}
}

/* One scene image per sub-page, always to the right of the text of its
   section, so the text stays under its heading. The text keeps the left
   edge of the reading column; only the image reaches out to the right,
   up to the wide frame. Multiplied like the scenes on the home page. */

.zander-text > .zander-scene {
	margin-top: var(--wp--preset--spacing--40);
}

@media (min-width: 782px) {
	/* A width, not a transform: a transform would isolate the image, and
	   the multiplied white would no longer meet the page tone. */
	.zander-text > .zander-scene {
		width: calc(50% + min(var(--wp--style--global--wide-size), 100vw - 3rem) / 2);
	}
}

.zander-scene img {
	mix-blend-mode: multiply;
}

.wp-block-media-text.zander-scene .wp-block-media-text__content {
	padding: 0 var(--wp--preset--spacing--50) 0 0;
}

.zander-scene .wp-block-media-text__content > :first-child {
	margin-top: 0;
}

@media (max-width: 600px) {
	.wp-block-media-text.is-stacked-on-mobile.zander-scene .wp-block-media-text__content {
		padding: var(--wp--preset--spacing--40) 0 0;
	}
}

/* The capsule page shows a capsule as it looks on a phone: screenshots
   beside the text, one at a time. A hairline frame keeps the white screen
   apart from the page. */

.zander-demo {
	gap: var(--wp--preset--spacing--50);
}

.zander-shots .wp-block-image {
	margin: 0;
}

.zander-shots img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 1.25rem;
}

.zander-shots__dots {
	margin-bottom: 0;
}

@media (max-width: 781px) {
	.zander-demo .zander-shots {
		max-width: 16rem;
		margin-inline: auto;
	}
}

/* Core pads the text by 8 % on both sides; here the text keeps to the
   page edge, and only the gap to the image remains. Stacked, the gap moves
   above the text. */

.wp-block-media-text.zander-section .wp-block-media-text__content {
	padding: 0 0 0 var(--wp--preset--spacing--50);
}

@media (max-width: 600px) {
	.wp-block-media-text.is-stacked-on-mobile.zander-section .wp-block-media-text__content {
		padding: var(--wp--preset--spacing--40) 0 0;
	}
}

/* The scene images are drawn on pure white; multiplied, the white takes
   on the page tone and the image shows no edge. */

.wp-block-media-text.zander-section img {
	mix-blend-mode: multiply;
}

/* Headings beside an image look like those in the grid. Where several
   follow one another, each after the first opens a new entry. */

.wp-block-media-text.zander-section h3 {
	color: var(--wp--preset--color--brand-deep);
}

.wp-block-media-text.zander-section h3:first-child {
	margin-top: 0;
}

.wp-block-media-text.zander-section h3:not(:first-child) {
	margin-top: var(--wp--preset--spacing--50);
}

.zander-intro {
	text-align: center;
	margin-bottom: var(--wp--preset--spacing--50);
}

/* The four formats below it stand centred on every width, icon over title
   over line, each as its own small sign. Stacked on a phone, the running
   text above reads left aligned like every other paragraph. */

.zander-intro + .zander-grid > .wp-block-column {
	text-align: center;
}

.zander-intro + .zander-grid .zander-icon {
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 781px) {
	.zander-intro {
		text-align: left;
	}
}

/* ---------- Grid ---------- */

/* Two to four columns of the same kind: a short heading in petrol, a few
   lines, sometimes a button. */

.zander-grid {
	gap: var(--wp--preset--spacing--50);
}

.zander-grid p {
	hyphens: auto;
}

.zander-grid h3 {
	color: var(--wp--preset--color--brand-deep);
	margin-top: 0;
}

.zander-grid h3 a {
	color: inherit;
	text-decoration: none;
}

.zander-grid h3 a:hover,
.zander-grid h3 a:focus-visible {
	text-decoration: underline;
}

/* ---------- Icons ---------- */

/* The website icon set (medien/icons/) sits inline in the patterns. Each
   file brings the same six drawing classes; they live here once, scoped to
   the icon, and the four colour roles point at the palette. */

.zander-icon {
	--icon-ink: var(--wp--preset--color--ink);
	--icon-accent: var(--wp--preset--color--brand);
	--icon-soft: var(--wp--preset--color--brand);
	--icon-warm: var(--wp--preset--color--sand);
	display: block;
	width: 4rem;
	height: 4rem;
	margin-bottom: var(--wp--preset--spacing--20);
}

.zander-icon .s,
.zander-icon .a {
	fill: none;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.zander-icon .s { stroke: var(--icon-ink); }
.zander-icon .a { stroke: var(--icon-accent); }
.zander-icon .f { fill: var(--icon-accent); }
.zander-icon .w { fill: var(--icon-warm); }
.zander-icon .p { fill: var(--icon-soft); }
.zander-icon .k { fill: var(--icon-ink); }

/* ---------- Customer logos ---------- */

/* An endless band. The track moves left by exactly its own width while its
   copy (added in functions.php) follows behind it, so the loop has no seam.
   The padding at the end of each track is the gap between the last logo
   and the first of the copy. */

/* Customer logos stay in their original colours, and many customers allow
   that only on white. Hence pure white here rather than Paper, and a rule
   above and below so the band does not run into the section before it. */
.zander-logos {
	display: flex;
	overflow: hidden;
	background-color: #ffffff;
	border-top: 1px solid var(--wp--preset--color--rule);
	border-bottom: 1px solid var(--wp--preset--color--rule);
	padding-top: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--40);
}

.zander-logos > .zander-logos__track {
	margin-block: 0;
}

.zander-logos__track {
	flex-shrink: 0;
	align-items: center;
	gap: var(--wp--preset--spacing--60);
	padding-right: var(--wp--preset--spacing--60);
	animation: zander-logos 40s linear infinite;
}

.zander-logos__track .wp-block-image {
	margin: 0;
}

.zander-logos__track img {
	display: block;
	height: 3rem;
	width: auto;
	max-width: none;
}

/* Optically equal size: every logo gets about the same area, so its height
   follows from its aspect ratio (4.2rem / sqrt(width : height), kept between
   1.5 and 3rem). A wide word mark sits lower, a compact mark higher. The
   files carry no margin of their own; the gap between them is the track's.
   WISAG asks for clear space of half the height of its diamond all round:
   6rem to the neighbours and 2.5rem to the rules cover that. */
.zander-logo--verbio img { height: 2.15rem; }  /* 3.10 : 1, lowered by eye: heavy green */
.zander-logo--senacor img { height: 1.60rem; }  /* 6.90 : 1 */
.zander-logo--siegwerk img { height: 2.30rem; }  /* 4.04 : 1, raised by eye: thin lettering */
.zander-logo--wisag img { height: 2.36rem; }  /* 3.17 : 1 */
.zander-logo--cofinpro img { height: 1.80rem; }  /* 4.36 : 1, lowered by eye: heavy orange */
.zander-logo--woco img { height: 2.96rem; }  /* 2.01 : 1 */
.zander-logo--sportbildungswerk-nrw img { height: 3.00rem; }  /* 2.70 : 1, raised by eye: small lettering beside the ball */
.zander-logo--anexia img { height: 2.33rem; }  /* 3.24 : 1 */
.zander-logo--enpit img { height: 2.60rem; }  /* 2.61 : 1 */
.zander-logo--kap img { height: 2.87rem; }  /* 2.14 : 1 */

.zander-logos:hover .zander-logos__track {
	animation-play-state: paused;
}

@keyframes zander-logos {
	to {
		transform: translateX(-100%);
	}
}

/* Without motion the logos stand still, all of them, wrapped and centred. */

@media (prefers-reduced-motion: reduce) {
	.zander-logos {
		justify-content: center;
	}

	.zander-logos__track {
		animation: none;
		flex-wrap: wrap;
		flex-shrink: 1;
		justify-content: center;
		padding-right: 0;
	}

	.zander-logos__track[aria-hidden="true"] {
		display: none;
	}
}

/* ---------- Contact form ---------- */

/* WPForms takes its look from these variables; set here they outrank the
   defaults it prints on :root. Only the font and the submit weight need rules. */

.zander-contact .wpforms-container {
	--wpforms-field-border-radius: 0;
	--wpforms-field-border-color: var(--wp--preset--color--rule);
	--wpforms-field-background-color: var(--wp--preset--color--surface);
	--wpforms-field-text-color: var(--wp--preset--color--ink);
	--wpforms-label-color: var(--wp--preset--color--ink);
	--wpforms-label-error-color: var(--wp--preset--color--brand-deep);
	--wpforms-button-border-radius: 0;
	--wpforms-button-background-color: var(--wp--preset--color--brand-deep);
	--wpforms-button-text-color: var(--wp--preset--color--paper);
	margin-block: var(--wp--preset--spacing--40);
}

.zander-contact .wpforms-container input,
.zander-contact .wpforms-container textarea {
	font-family: var(--wp--preset--font-family--text);
}

.zander-contact .wpforms-container .wpforms-field-label {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.zander-contact .wpforms-container .wpforms-field-description {
	line-height: 1.5;
	margin-top: 0.5rem;
}

.zander-contact .wpforms-container .wpforms-required-label {
	color: var(--wp--preset--color--brand-deep);
}

.zander-contact .wpforms-container button[type="submit"] {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.01em;
}

.zander-contact .wpforms-container .wpforms-confirmation-container-full {
	background: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--rule);
	margin: 0;
	padding: var(--wp--preset--spacing--30);
}

.zander-contact .wpforms-container .wpforms-confirmation-container-full p {
	color: var(--wp--preset--color--ink);
}

/* ---------- Training dates (Uptyde plugin) ----------

   The shortcode [juk-tms-trainings] brings its own stylesheet: system font,
   rounded grey boxes, blue focus. The plugin's file loads before this one,
   so rules of the same weight win here; where it uses !important or longer
   selectors, these match them. The filter row is inserted by script in front
   of the table wrapper, so it has its own selectors. */

.juk-tms-trainings-table,
.juk-filter-container {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-soft);
}

.juk-filter-container {
	gap: var(--wp--preset--spacing--20);
	margin: var(--wp--preset--spacing--30) 0 0;
}

.juk-filter-container .juk-filter-select,
.juk-tms-trainings-table .dataTables_filter input,
.juk-tms-trainings-table .dataTables_length select {
	height: auto;
	margin: 0;
	padding: 0.55rem 0.8rem;
	font-family: inherit;
	font-size: inherit;
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 0;
}

.juk-tms-trainings-table .dataTables_length select {
	margin: 0 0.4rem;
	padding: 0.35rem 0.5rem;
}

.juk-filter-container .juk-filter-select:focus,
.juk-tms-trainings-table .dataTables_filter input:focus,
.juk-tms-trainings-table .dataTables_length select:focus {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--brand);
}

/* "Filter zurücksetzen" is a secondary action: the outline button. */

.juk-filter-container .juk-filter-reset {
	height: auto;
	padding: calc(0.55rem - 1px) 1.1rem;
	font-family: inherit;
	font-size: inherit;
	font-weight: 600;
	color: var(--wp--preset--color--brand-deep);
	background: transparent;
	border: 2px solid var(--wp--preset--color--brand-deep);
	border-radius: 0;
}

.juk-filter-container .juk-filter-reset:hover,
.juk-filter-container .juk-filter-reset:focus-visible {
	color: var(--wp--preset--color--paper);
	background-color: var(--wp--preset--color--brand-deep);
}

.juk-tms-trainings-table label {
	font-size: inherit;
	margin: var(--wp--preset--spacing--20) 0;
	align-items: center;
	color: var(--wp--preset--color--muted);
}

.juk-tms-trainings-table .dataTables_filter label {
	float: right;
	gap: 0.5rem;
}

.juk-tms-trainings-table .dataTables_filter input {
	margin-left: 0.5rem;
}

/* Like the three offers above it, the list steps out of the reading column
   into the wide frame, centred on the column, so the five columns get room.
   Filter row and table both, so their edges line up. */

@media (min-width: 782px) {
	.zander-text > .juk-filter-container,
	.zander-text > .juk-tms-trainings-table {
		position: relative;
		left: 50%;
		width: min(var(--wp--style--global--wide-size), 100vw - 3rem);
		transform: translateX(-50%);
	}
}

/* The table: hairlines in the rule colour, nothing else. */

.juk-tms-trainings-table table.dataTable {
	width: 100%;
	border-collapse: collapse;
	margin-top: var(--wp--preset--spacing--20);
}

.juk-tms-trainings-table table.dataTable thead > tr > th {
	padding: 0.6rem 0.75rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: left;
	color: var(--wp--preset--color--brand-deep);
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.juk-tms-trainings-table table.dataTable tbody > tr > td {
	padding: var(--wp--preset--spacing--30) 0.75rem;
	vertical-align: top;
	background: transparent;
	border-top: 1px solid var(--wp--preset--color--rule);
}

.juk-tms-trainings-table table.dataTable tbody > tr:first-child > td {
	border-top: 0;
}

/* The outer cells sit flush with the reading column. */

.juk-tms-trainings-table table.dataTable tr > :first-child {
	padding-left: 0;
}

.juk-tms-trainings-table table.dataTable tr > :last-child {
	padding-right: 0;
}

.juk-tms-trainings-table table.dataTable.no-footer {
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.juk-tms-table-badge > img {
	display: block;
}

.juk-tms-table-type {
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	line-height: 1.35;
}

.juk-tms-table-type a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.juk-tms-table-type a:hover,
.juk-tms-table-type a:focus-visible {
	color: var(--wp--preset--color--brand-deep);
	text-decoration: underline;
}

.juk-tms-table-subheading {
	margin-top: 0.2rem;
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.45;
	color: var(--wp--preset--color--ink-soft);
}

.juk-tms-table-language,
.juk-tms-table-trainer,
.juk-tms-table-time {
	color: var(--wp--preset--color--muted);
}

.juk-tms-table-trainer a {
	color: inherit;
}

.juk-tms-table-date,
.juk-tms-table-price {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	white-space: nowrap;
}

.juk-tms-table-price del {
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}

.juk-tms-table-price .juk-early-bird-label {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-deep);
}

/* "Buchen" is the filled button of the theme (theme.json). */

.juk-tms-table-status a,
.juk-tms-table .btn-booking {
	display: inline-block;
	padding: 0.78rem 1.4rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.01em;
	white-space: nowrap;
	color: var(--wp--preset--color--paper);
	background-color: var(--wp--preset--color--brand-deep);
	border: 1px solid var(--wp--preset--color--brand-deep);
	border-radius: 0;
}

.juk-tms-table-status:hover a,
.juk-tms-table-status a:focus-visible,
.juk-tms-table .btn-booking:hover {
	color: var(--wp--preset--color--brand-deep);
	background-color: transparent;
}

/* Below the table: count, pages and the VAT note, all small and quiet. */

.juk-tms-trainings-table .dataTables_info {
	padding-top: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--muted);
}

.juk-tms-trainings-table .dataTables_paginate {
	padding-top: var(--wp--preset--spacing--20);
}

.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
	color: var(--wp--preset--color--ink-soft) !important;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 0;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
	border-color: var(--wp--preset--color--rule);
	background: var(--wp--preset--color--surface);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled):not(.current):hover {
	color: var(--wp--preset--color--paper) !important;
	background: var(--wp--preset--color--brand-deep);
	border-color: var(--wp--preset--color--brand-deep);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
	color: var(--wp--preset--color--muted) !important;
	opacity: 0.45;
}

.juk-tms-trainings-table > p {
	margin-top: var(--wp--preset--spacing--20);
	font-size: 0.8rem;
	color: var(--wp--preset--color--muted);
}

/* On phones the plugin turns each row into a card with a shadow and blue
   button; here it becomes a block between hairlines like the rest. */

@media (max-width: 768px) {
	.juk-tms-table tr {
		margin: 0;
		padding: var(--wp--preset--spacing--30) 0;
		border: 0;
		border-top: 1px solid var(--wp--preset--color--rule);
		border-radius: 0;
	}

	.juk-tms-table tr:hover {
		transform: none;
		box-shadow: none;
	}

	.juk-tms-trainings-table table.dataTable tbody > tr > td {
		padding: 0.15rem 0;
		border-top: 0;
		background: transparent !important;
	}

	.juk-tms-table-status {
		margin-top: var(--wp--preset--spacing--20);
	}

	.juk-tms-trainings-table .dataTables_filter label {
		float: none;
	}

	.juk-tms-trainings-table .dataTables_filter,
	.juk-tms-trainings-table .dataTables_info,
	.juk-tms-trainings-table .dataTables_paginate {
		text-align: left;
	}

	.juk-filter-container .juk-filter-select {
		max-width: none;
		width: 100%;
	}
}

/* ---------- Booking page (Uptyde plugin) ----------

   The shortcode [juk-tms-booking] on /buchen/ prints a two-column layout:
   the training on the left (.juk-training), the form on the right
   (.juk-form). Its stylesheet stretches the container across the window,
   uses system fonts, rounded boxes, a centred display heading and a heavy
   shadow on focus. Here it sits in the wide frame and takes the look of the
   contact form. Selectors start at .juk-container so they outrank the
   plugin's own; !important only where the plugin uses it or inline styles. */

.juk-container {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--wp--style--global--wide-size) !important;
	min-width: 0;
	min-height: 0;
	margin-inline: auto !important;
	padding: 0;
	gap: var(--wp--preset--spacing--50);
	font-family: var(--wp--preset--font-family--text);
	color: var(--wp--preset--color--ink);
}

.juk-container *,
.juk-container *::before,
.juk-container *::after {
	box-sizing: border-box;
}

.juk-container a {
	color: var(--wp--preset--color--brand-deep);
}

.juk-container form {
	font-family: inherit;
	color: inherit;
}

/* Left column: what is being booked, and whom to ask. */

.juk-container .juk-training {
	padding: 0;
	overflow: visible;
}

@media (min-width: 991px) {
	.juk-container .juk-training {
		top: 7rem;
		flex: 0 0 calc(33.333% - var(--wp--preset--spacing--50));
		max-width: calc(33.333% - var(--wp--preset--spacing--50));
	}
}

.juk-container .training-card {
	margin-bottom: var(--wp--preset--spacing--30);
	padding: 0;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 0;
}

.juk-container .juk-card-body {
	padding: var(--wp--preset--spacing--30);
	background: transparent;
	border: 0;
	border-radius: 0;
	font-size: var(--wp--preset--font-size--small);
}

.juk-container .juk-card-body p {
	margin: 0 0 0.6rem;
}

.juk-container .juk-training-date {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--sub);
	font-weight: 600;
	line-height: 1.25;
	color: var(--wp--preset--color--ink);
}

.juk-container .juk-card-body h2 {
	margin: 0 0 0.4rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--base) !important;
	font-weight: 600;
	line-height: 1.35;
}

.juk-container .juk-card-body h2 a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.juk-container .juk-card-body h2 a:hover,
.juk-container .juk-card-body h2 a:focus-visible {
	color: var(--wp--preset--color--brand-deep);
	text-decoration: underline;
}

.juk-container .juk-card-body hr {
	margin: var(--wp--preset--spacing--20) 0;
	border-top-color: var(--wp--preset--color--rule);
}

.juk-container .juk-label {
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--muted);
}

.juk-container .juk-value {
	margin-bottom: 0.3rem;
}

.juk-container .juk-training-status {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-deep);
}

.juk-container .juk-card-body del,
.juk-container .juk-tax {
	color: var(--wp--preset--color--muted);
}

/* Right column: the form. min-width: 0 lets it shrink below its widest
   row on phones instead of pushing the page sideways. */

.juk-container .juk-form {
	min-width: 0;
	padding: 0;
	background: transparent;
	overflow: visible;
}

@media (max-width: 990px) {
	.juk-container .juk-form {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/* The page title "Buchen" already names the page; the plugin's own h1
   would be a second one. It stays for screen readers only. The title
   moves out to the wide frame so it lines up with the two columns. */

.juk-container .juk-form > h1 {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.wp-site-blocks:has(.juk-container) .zander-page-title {
	max-width: var(--wp--style--global--wide-size);
}

/* "*Pflichtfeld", an unclassed div with inline style. */
.juk-container .juk-form > div[style] {
	margin: 0 0 var(--wp--preset--spacing--30) !important;
	text-align: left !important;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.juk-container .card {
	margin-bottom: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 0;
	transition: border-color 0.2s;
}

.juk-container .card:focus-within {
	box-shadow: none;
	border-color: var(--wp--preset--color--brand-light);
}

.juk-container .card-body {
	column-gap: var(--wp--preset--spacing--20);
}

.juk-container .juk-form legend,
.juk-container .juk-form .card-body > h3,
.juk-container .juk-form .participants h3 {
	margin-bottom: var(--wp--preset--spacing--20);
	padding: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--sub);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.juk-container .form-row,
.juk-container .form-group {
	margin-bottom: 0.9rem;
}

@media (min-width: 768px) {
	.juk-container .form-row {
		flex: 0 0 calc(50% - var(--wp--preset--spacing--20) / 2);
	}
}

.juk-container .form-label,
.juk-container label {
	display: block;
	margin-bottom: 0.35rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.juk-container input[type="text"],
.juk-container input[type="email"],
.juk-container input[type="tel"],
.juk-container input[type="number"],
.juk-container select,
.juk-container textarea,
.juk-container .juk-form input[type="text"],
.juk-container .juk-form input[type="email"],
.juk-container .juk-form select,
.juk-container .juk-form textarea {
	display: block;
	width: 100%;
	height: auto !important;
	margin: 0;
	padding: 0.65rem 0.8rem;
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule) !important;
	border-radius: 0;
	box-shadow: none;
}

.juk-container input:focus,
.juk-container select:focus,
.juk-container textarea:focus {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--brand) !important;
}

.juk-container textarea::placeholder,
.juk-container input::placeholder {
	font-family: var(--wp--preset--font-family--text);
	color: var(--wp--preset--color--muted);
	padding: 0 !important;
}

/* Radios and checkboxes: native, in petrol, the text beside them in the
   body face, not as a bold label. */

.juk-container .form-check {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0 0 0.5rem;
}

.juk-container .form-check input {
	flex: none;
	width: auto;
	margin: 0;
	accent-color: var(--wp--preset--color--brand-deep);
	border: 0 !important;
}

.juk-container .form-check label,
.juk-container label.confirmation-text.form-check-label {
	display: inline;
	margin: 0;
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 400;
}

/* The long VAT question above the radios reads as text, not as a label. */
.juk-container #bookingtype_id > .form-label {
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 400;
}

/* Buttons: adding people and redeeming a code are outline buttons; the
   paid booking itself is the one filled button on the page. */

.juk-container button#booking_participant,
.juk-container button#booking_contactperson,
.juk-container #check-discount-code,
.juk-container button#booking_save,
.juk-container .participant_remove_item,
.juk-container .contactperson_remove_item {
	height: auto;
	padding: calc(0.78rem - 1px) calc(1.4rem - 1px);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.3;
	color: var(--wp--preset--color--brand-deep);
	background: transparent;
	border: 2px solid var(--wp--preset--color--brand-deep);
	border-radius: 0;
	cursor: pointer;
}

.juk-container button#booking_participant:hover,
.juk-container button#booking_contactperson:hover,
.juk-container #check-discount-code:hover,
.juk-container .participant_remove_item:hover,
.juk-container .contactperson_remove_item:hover,
.juk-container button#booking_participant:focus-visible,
.juk-container button#booking_contactperson:focus-visible,
.juk-container #check-discount-code:focus-visible {
	color: var(--wp--preset--color--paper);
	background: var(--wp--preset--color--brand-deep);
}

.juk-container button#booking_save {
	margin-top: var(--wp--preset--spacing--20);
	padding: 0.78rem 1.4rem;
	color: var(--wp--preset--color--paper);
	background: var(--wp--preset--color--brand-deep);
	border-width: 1px;
}

.juk-container button#booking_save:hover,
.juk-container button#booking_save:focus-visible {
	color: var(--wp--preset--color--brand-deep);
	background: transparent;
}

.juk-container #check-discount-code {
	margin-left: 0;
	flex: none;
}

.juk-container #bookingtype {
	align-items: stretch;
	column-gap: var(--wp--preset--spacing--20);
}

.juk-container #bookingtype .form-group {
	margin-bottom: 0;
}

/* Price summary: hairlines in the rule colour, the total in the display face. */

.juk-container .card-body .payment-summary {
	row-gap: 0;
}

.juk-container .card-body .payment-summary > div {
	padding: 0.55rem 0 !important;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.juk-container .card-body .payment-summary > .last-line {
	border-bottom: 0 !important;
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--ink);
}

.juk-container .valid-feedback {
	color: var(--wp--preset--color--brand-deep);
}

.juk-container .invalid-feedback {
	color: #a3302a;
}

/* The training boxes on the left also carry .card; their padding sits on
   the inner .juk-card-body, so the box itself gets none. */

.juk-container .card.training-card {
	padding: 0;
	background: var(--wp--preset--color--surface);
}