/*
 * Die Technikbude website — what theme.json cannot express.
 *
 * Colours, fonts, sizes and spacing come from presets; this file only adds
 * chrome: the sticky header, the menu button, the scheme switch, the kicker
 * line, cards and the section textures. Everything follows the active scheme
 * through the preset custom properties.
 */

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

/*
 * Measures follow the June 2026 site (theme die-technikbude, _header.scss):
 * 74px bar (66px on phones), menu centred, scheme switch and call to action
 * on the right, a full-screen menu on phones.
 */
:root {
	--dtb-website-border-strong: color-mix(in srgb, var(--wp--preset--color--contrast) 17%, transparent);
	--dtb-website-surface-2: color-mix(in srgb, var(--wp--preset--color--contrast) 9%, var(--wp--preset--color--base));
	--dtb-website-faint: color-mix(in srgb, var(--wp--preset--color--contrast-2) 72%, var(--wp--preset--color--base));
	--dtb-website-gutter: clamp(1.25rem, 5vw, 4rem);
	--dtb-website-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: var(--wp--custom--dtb--z-index--header, 100);
}

.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.dtb-website-header {
	position: relative;
}

/*
 * The scrolled background sits on a pseudo element: backdrop-filter on the
 * header itself would become the containing block of the fixed menu overlay
 * and squeeze it into the header bar.
 */
.dtb-website-header::before {
	backdrop-filter: blur(14px);
	background: color-mix(in srgb, var(--wp--preset--color--base) 80%, transparent);
	border-bottom: 1px solid var(--wp--custom--dtb--card--border);
	content: "";
	inset: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transition: opacity 0.35s var(--dtb-website-ease);
	z-index: -1;
}

.is-scrolled .dtb-website-header::before {
	opacity: 1;
}

.dtb-website-header__bar {
	gap: 1.125rem;
	min-height: 74px;
}

.dtb-website-header__actions {
	gap: 1.125rem;
}

.dtb-website-logo img {
	height: 32px;
	width: auto;
}

/* Menu links: small and muted, the current page with an accent line. */
.dtb-website-nav {
	--dtb-menu-gap: 34px;
}

.dtb-website-nav .dtb-menu__link {
	color: var(--wp--preset--color--contrast-2);
	font-size: 14.5px;
	padding: 0;
	position: relative;
	text-decoration: none;
	transition: color 0.2s;
}

.dtb-website-nav .dtb-menu__link::after {
	background: var(--wp--preset--color--accent-2);
	bottom: -6px;
	content: "";
	height: 1.5px;
	left: 0;
	position: absolute;
	transition: width 0.25s var(--dtb-website-ease);
	width: 0;
}

.dtb-website-nav .dtb-menu__link:hover,
.dtb-website-nav .dtb-menu__link:focus-visible,
.dtb-website-nav .dtb-menu__link[aria-current="page"] {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.dtb-website-nav .dtb-menu__link:hover::after,
.dtb-website-nav .dtb-menu__link:focus-visible::after,
.dtb-website-nav .dtb-menu__link[aria-current="page"]::after {
	width: 100%;
}

/* Call to action: the button in the bar, and the menu item for narrow screens. */
.dtb-website-header__cta .wp-block-button__link,
.dtb-website-nav .dtb-website-menu-cta > .dtb-menu__link {
	align-items: center;
	background: var(--wp--preset--color--accent-2);
	border-radius: 999px;
	color: var(--wp--custom--dtb--ink);
	display: inline-flex;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
	padding: 13px 22px;
	transition: transform 0.25s var(--dtb-website-ease), filter 0.25s var(--dtb-website-ease);
	white-space: nowrap;
}

.dtb-website-header__cta .wp-block-button__link:hover,
.dtb-website-header__cta .wp-block-button__link:focus-visible,
.dtb-website-nav .dtb-website-menu-cta > .dtb-menu__link:hover,
.dtb-website-nav .dtb-website-menu-cta > .dtb-menu__link:focus-visible {
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--custom--dtb--ink);
	filter: brightness(1.05);
	transform: translateY(-2px);
}

.dtb-website-nav .dtb-website-menu-cta > .dtb-menu__link::after {
	display: none;
}

/* From 941px the bar carries its own button; the menu item serves narrower screens. */
@media (min-width: 58.8125em) {

	.dtb-website-nav .dtb-website-menu-cta {
		display: none;
	}
}

@media (max-width: 58.75em) {

	.dtb-website-header__actions .dtb-website-header__cta {
		display: none;
	}
}

/* ---------- Phones: below 48em, the breakpoint of dtb/menu ---------- */

@media (max-width: 47.9375em) {

	.dtb-website-header .dtb-website-header__bar {
		gap: 10px;
		justify-content: flex-start;
		min-height: 66px;
	}

	.dtb-website-logo img {
		height: 28px;
	}

	/* Scheme switch before the menu button, as on the old site. */
	.dtb-website-header .dtb-website-header__actions {
		margin-inline-start: auto;
	}

	.dtb-website-nav {
		--dtb-menu-panel-width: 100vw;
		order: 3;
	}

	.dtb-website-nav .dtb-menu__open,
	.dtb-website-nav .dtb-menu__close {
		border: 1px solid var(--dtb-website-border-strong);
		border-radius: 9px;
		color: var(--wp--preset--color--contrast);
		height: 44px;
		min-height: 0;
		min-width: 0;
		width: 44px;
	}

	.dtb-website-nav .dtb-menu__burger {
		box-shadow:
			0 -0.35rem 0 currentcolor,
			0 0.35rem 0 currentcolor;
		width: 1.1rem;
	}

	/* The switch stays reachable above the open menu, next to its close button. */
	.dtb-scheme-toggle {
		position: relative;
		z-index: calc(var(--wp--custom--dtb--z-index--overlay, 200) + 1);
	}

	.dtb-website-nav .dtb-menu__panel {
		background: var(--wp--preset--color--base);
	}

	.dtb-website-nav .dtb-menu__panel-inner {
		background:
			linear-gradient(var(--wp--custom--dtb--card--border), var(--wp--custom--dtb--card--border)) 0 66px / 100% 1px no-repeat,
			var(--wp--preset--color--base);
		box-shadow: none;
		gap: 0;
		padding: 0;
		position: relative;
	}

	/* Logo in the menu head; decoration only, the menu carries its own label. */
	.dtb-website-nav .dtb-menu__panel-inner::before {
		background: url("../images/logo-light-h.png") left center / contain no-repeat;
		content: "";
		height: 28px;
		left: var(--dtb-website-gutter);
		position: absolute;
		top: 19px;
		width: 167px;
	}

	:root[data-scheme="light"] .dtb-website-nav .dtb-menu__panel-inner::before {
		filter: brightness(0.24);
	}

	.dtb-website-nav .dtb-menu__close {
		border-radius: 12px;
		font-size: 1.6rem;
		margin: 11px var(--dtb-website-gutter) 11px 0;
	}

	.dtb-website-nav .dtb-menu__list {
		counter-reset: dtb-website-nav;
		flex: 1;
		flex-wrap: nowrap;
		gap: 2px;
		padding: 8px var(--dtb-website-gutter) 0;
	}

	.dtb-website-nav .dtb-menu__item {
		counter-increment: dtb-website-nav;
	}

	.dtb-website-nav .dtb-menu__item:first-child {
		margin-top: auto;
	}

	.dtb-website-nav .dtb-menu__item:has(+ .dtb-website-menu-cta) {
		margin-bottom: auto;
	}

	.dtb-website-nav .dtb-menu__item:not(.dtb-website-menu-cta) > .dtb-menu__link {
		align-items: center;
		border-bottom: 1px solid var(--wp--custom--dtb--card--border);
		color: var(--wp--preset--color--contrast);
		display: flex;
		flex: 1;
		font-family: var(--wp--preset--font-family--heading);
		font-size: clamp(26px, 8vw, 38px);
		font-weight: 600;
		gap: 16px;
		padding: 20px 4px;
	}

	.dtb-website-nav .dtb-menu__item:not(.dtb-website-menu-cta) > .dtb-menu__link::before {
		color: var(--dtb-website-faint);
		content: counter(dtb-website-nav, decimal-leading-zero);
		flex: none;
		font-family: var(--wp--preset--font-family--mono);
		font-size: 13px;
		font-weight: 500;
		width: 26px;
	}

	.dtb-website-nav .dtb-menu__item:not(.dtb-website-menu-cta) > .dtb-menu__link::after {
		background: none;
		bottom: auto;
		color: var(--dtb-website-faint);
		content: "→";
		font-family: var(--wp--preset--font-family--body);
		font-size: 24px;
		height: auto;
		margin-inline-start: auto;
		position: static;
		transition: transform 0.25s var(--dtb-website-ease), color 0.2s;
		width: auto;
	}

	.dtb-website-nav .dtb-menu__item:not(.dtb-website-menu-cta) > .dtb-menu__link:hover,
	.dtb-website-nav .dtb-menu__item:not(.dtb-website-menu-cta) > .dtb-menu__link[aria-current="page"],
	.dtb-website-nav .dtb-menu__item:not(.dtb-website-menu-cta) > .dtb-menu__link[aria-current="page"]::before,
	.dtb-website-nav .dtb-menu__item:not(.dtb-website-menu-cta) > .dtb-menu__link:hover::after,
	.dtb-website-nav .dtb-menu__item:not(.dtb-website-menu-cta) > .dtb-menu__link[aria-current="page"]::after {
		color: var(--wp--preset--color--accent-1);
	}

	.dtb-website-nav .dtb-menu__item:not(.dtb-website-menu-cta) > .dtb-menu__link:hover::after,
	.dtb-website-nav .dtb-menu__item:not(.dtb-website-menu-cta) > .dtb-menu__link[aria-current="page"]::after {
		transform: translateX(5px);
	}

	/* The call to action as the foot of the menu. */
	.dtb-website-nav .dtb-website-menu-cta {
		border-top: 1px solid var(--wp--custom--dtb--card--border);
		margin-inline: calc(-1 * var(--dtb-website-gutter));
		padding: 20px var(--dtb-website-gutter) calc(20px + env(safe-area-inset-bottom));
	}

	.dtb-website-nav .dtb-website-menu-cta > .dtb-menu__link {
		box-sizing: border-box;
		flex: 1;
		font-size: 16.5px;
		justify-content: center;
		min-height: 52px;
		padding: 16px 28px;
	}

	.dtb-website-nav .dtb-website-menu-cta > .dtb-menu__link::after {
		background: none;
		content: "→";
		display: inline;
		height: auto;
		margin-inline-start: 10px;
		position: static;
		width: auto;
	}
}

/*
 * The header is transparent at the top, so the first hero slides up beneath it
 * and its grid and glow run to the top edge of the page. The transparent top
 * border makes room for the header without touching the block's own padding;
 * the grid is painted under it. assets/js/website.js keeps the height current.
 */
:root {
	--dtb-website-header-height: 5rem;
}

.wp-site-blocks > header + main > .dtb-website-hero:first-child,
.wp-site-blocks > header + main > .wp-block-post-content > .dtb-website-hero:first-child {
	border-top: var(--dtb-website-header-height) solid transparent;
	margin-top: calc(-1 * var(--dtb-website-header-height)) !important;
}

.wp-site-blocks > header + main > .dtb-website-hero:first-child::before,
.wp-site-blocks > header + main > .wp-block-post-content > .dtb-website-hero:first-child::before {
	top: calc(-1 * var(--dtb-website-header-height));
}

/* The parent's 404 template puts a margin above main; the hero brings its own. */
.wp-site-blocks > header + main:has(> .dtb-website-hero:first-child) {
	margin-top: 0 !important;
}

/* The logo file is white for the dark scheme; the light scheme darkens it. */
:root[data-scheme="light"] .dtb-website-logo img {
	filter: brightness(0.24);
}

/* ------------------------------------------------------------------------ */
/* Scheme switch                                                              */
/* ------------------------------------------------------------------------ */

.dtb-scheme-toggle {
	align-items: center;
	background: transparent;
	border: 1px solid var(--dtb-website-border-strong);
	border-radius: 11px;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	display: inline-flex;
	flex: none;
	height: 42px;
	justify-content: center;
	padding: 0;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.2s var(--dtb-website-ease);
	width: 42px;
}

.dtb-scheme-toggle:hover {
	background: var(--dtb-website-surface-2);
	border-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--accent-1);
	transform: translateY(-1px);
}

@media (max-width: 35em) {

	.dtb-scheme-toggle {
		height: 44px;
		width: 44px;
	}
}

.dtb-scheme-toggle__moon,
:root[data-scheme="light"] .dtb-scheme-toggle__sun {
	display: none;
}

:root[data-scheme="light"] .dtb-scheme-toggle__moon {
	display: block;
}

/* ------------------------------------------------------------------------ */
/* Kicker: "— LEISTUNGEN"                                                     */
/* ------------------------------------------------------------------------ */

.is-style-kicker {
	align-items: center;
	color: var(--wp--preset--color--contrast-2);
	display: flex;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	gap: 0.75rem;
	letter-spacing: var(--wp--custom--dtb--kicker--letter-spacing);
	text-transform: uppercase;
}

.is-style-kicker::before {
	background: var(--wp--preset--color--accent-1);
	content: "";
	flex: none;
	height: 1px;
	width: 1.5rem;
}

.is-style-kicker.has-text-align-center {
	justify-content: center;
}

.dtb-website-footer__heading.is-style-kicker {
	font-size: 0.75rem;
	font-weight: 700;
}

.dtb-website-footer__heading.is-style-kicker::before {
	display: none;
}

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

.dtb-website-footer .dtb-menu__link:hover {
	color: var(--wp--preset--color--contrast);
}

.dtb-website-footer .dtb-menu {
	--dtb-menu-gap: 0.35rem;
}

/*
 * No "current page" mark in the footer: its links point to sections of one
 * page (/leistungen/#websites), and WordPress marks every one of them as
 * current while that page is open.
 */
.dtb-website-footer .dtb-menu__link[aria-current="page"] {
	text-decoration: none;
}

.dtb-website-footer .dtb-menu__link:hover,
.dtb-website-footer .dtb-menu__link:focus-visible {
	text-decoration: underline;
}

.dtb-website-socials.dtb-contact-details--inline {
	gap: 0.6rem;
}

.dtb-website-socials .dtb-icon {
	height: 1.1rem;
	width: 1.1rem;
}

.dtb-website-socials a {
	align-items: center;
	border: 1px solid var(--wp--custom--dtb--card--border);
	border-radius: 0.6rem;
	color: var(--wp--preset--color--contrast-2);
	display: inline-flex;
	height: 2.4rem;
	justify-content: center;
	width: 2.4rem;
}

.dtb-website-socials a:hover {
	border-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--contrast);
}

/* ------------------------------------------------------------------------ */
/* Buttons and links with an arrow                                            */
/* ------------------------------------------------------------------------ */

.is-style-dtb-arrow .wp-block-button__link::after,
.has-arrow .wp-block-button__link::after,
a.dtb-website-arrow::after {
	content: "→";
	display: inline-block;
	margin-inline-start: 0.6em;
	transition: transform 0.2s ease;
}

.is-style-dtb-arrow .wp-block-button__link:hover::after,
.has-arrow .wp-block-button__link:hover::after,
a.dtb-website-arrow:hover::after {
	transform: translateX(0.2em);
}

a.dtb-website-arrow {
	font-weight: 600;
	text-decoration: none;
}

/* ------------------------------------------------------------------------ */
/* Section textures                                                           */
/* ------------------------------------------------------------------------ */

/* The faint grid behind the hero and the call to action. */
.dtb-website-grid {
	background-image:
		linear-gradient(var(--wp--custom--dtb--card--border) 1px, transparent 1px),
		linear-gradient(90deg, var(--wp--custom--dtb--card--border) 1px, transparent 1px);
	background-position: -1px -1px;
	background-size: 64px 64px;
}

.dtb-website-rule-top {
	border-top: 1px solid var(--wp--custom--dtb--card--border);
}

.dtb-website-rule-bottom {
	border-bottom: 1px solid var(--wp--custom--dtb--card--border);
}

/* A kicker without the line in front, e.g. above the client names. */
.is-style-kicker.dtb-website-kicker-plain::before {
	display: none;
}

/* ------------------------------------------------------------------------ */
/* Start page sections                                                        */
/* ------------------------------------------------------------------------ */

/*
 * Sub pages: the heading starts at the same edge as on the start page, the
 * text keeps its reading width.
 */
.dtb-website-hero__copy > * {
	max-width: 48rem;
}

/* Hero: a soft glow on top of the grid. */
.dtb-website-hero {
	position: relative;
}

.dtb-website-hero::before {
	background: radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--wp--preset--color--accent-2) 14%, transparent), transparent 55%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.dtb-website-hero > * {
	position: relative;
}

/* The browser sketch next to the hero text; decoration only. */
.dtb-website-browser {
	background: var(--wp--custom--dtb--card--background);
	border: 1px solid var(--wp--custom--dtb--card--border);
	border-radius: 1rem;
	box-shadow: var(--wp--preset--shadow--strong);
	overflow: hidden;
	transform: perspective(1400px) rotateY(-9deg) rotateX(3deg);
}

/* Like the June 2026 site: the sketch straightens up under the pointer. */
@media (prefers-reduced-motion: no-preference) {

	.dtb-website-browser {
		transition: transform 0.5s var(--dtb-website-ease);
	}

	.dtb-website-hero:hover .dtb-website-browser {
		transform: perspective(1400px) rotateY(-4deg) rotateX(1deg);
	}
}

.dtb-website-browser__bar {
	align-items: center;
	border-bottom: 1px solid var(--wp--custom--dtb--card--border);
	display: flex;
	gap: 0.4rem;
	padding: 0.7rem 1rem;
}

.dtb-website-browser__bar i {
	background: var(--wp--custom--dtb--card--border);
	border-radius: 50%;
	height: 0.6rem;
	width: 0.6rem;
}

.dtb-website-browser__bar span {
	background: var(--wp--preset--color--base);
	border-radius: 0.4rem;
	color: var(--wp--preset--color--contrast-2);
	flex: 1;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	margin-inline-start: 0.75rem;
	padding: 0.25rem 0.6rem;
}

.dtb-website-browser__body {
	display: grid;
	gap: 1rem;
	padding: 1.25rem;
}

.dtb-website-browser__hero {
	background: linear-gradient(110deg, var(--wp--preset--color--accent-2), color-mix(in srgb, var(--wp--preset--color--accent-2) 45%, var(--wp--preset--color--base)));
	border-radius: 0.6rem;
	height: 6rem;
}

.dtb-website-browser__cards {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(3, 1fr);
}

.dtb-website-browser__cards i {
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 6%, transparent);
	border: 1px solid var(--wp--custom--dtb--card--border);
	border-radius: 0.5rem;
	height: 3.5rem;
}

.dtb-website-browser__lines {
	display: grid;
	gap: 0.5rem;
}

.dtb-website-browser__lines i {
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
	border-radius: 1rem;
	height: 0.45rem;
}

.dtb-website-browser__lines i:nth-child(1) {
	width: 78%;
}

.dtb-website-browser__lines i:nth-child(2) {
	width: 94%;
}

.dtb-website-browser__lines i:nth-child(3) {
	width: 58%;
}

@media (max-width: 781px) {

	.dtb-website-browser {
		transform: none;
	}
}

/* Service cards: icon tile and keyword chips. */
.dtb-website-icon,
.dtb-website-value-icon {
	align-items: center;
	color: var(--wp--preset--color--accent-1);
	display: inline-flex;
}

.dtb-website-icon {
	background: color-mix(in srgb, var(--wp--preset--color--accent-2) 16%, transparent);
	border-radius: 0.75rem;
	height: 3rem;
	justify-content: center;
	width: 3rem;
}

.dtb-website-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.dtb-website-tags span {
	border: 1px solid var(--wp--custom--dtb--card--border);
	border-radius: 9999px;
	color: var(--wp--preset--color--contrast-2);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	padding: 0.2rem 0.65rem;
}

.dtb-website-service a.dtb-website-arrow {
	color: var(--wp--preset--color--contrast);
}

/* Process: a hairline with an accent segment above each step. */
.dtb-website-step {
	border-top: 1px solid var(--wp--custom--dtb--card--border);
	padding-top: var(--wp--preset--spacing--40);
	position: relative;
}

.dtb-website-step::before {
	background: var(--wp--preset--color--accent-1);
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	top: -1px;
	width: 2.5rem;
}

/* The WP Club Elements card; decoration only. */
.dtb-website-product {
	background: var(--wp--custom--dtb--card--background);
	border: 1px solid var(--wp--custom--dtb--card--border);
	border-radius: 1rem;
	box-shadow: var(--wp--preset--shadow--strong);
	display: grid;
	gap: 1rem;
	padding: var(--wp--preset--spacing--50);
}

.dtb-website-product p {
	margin: 0;
}

.dtb-website-product__head {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.dtb-website-product__logo {
	align-items: center;
	display: inline-flex;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	gap: 0.6rem;
}

.dtb-website-product__pill {
	border: 1px solid var(--wp--preset--color--accent-1);
	border-radius: 9999px;
	color: var(--wp--preset--color--accent-1);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	padding: 0.2rem 0.7rem;
}

.dtb-website-product__tag {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--small);
}

.dtb-website-product__grid {
	display: grid;
	gap: 0.6rem;
	grid-template-columns: repeat(2, 1fr);
}

.dtb-website-product__grid span {
	align-items: center;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 4%, transparent);
	border: 1px solid var(--wp--custom--dtb--card--border);
	border-radius: 0.6rem;
	display: flex;
	font-weight: 600;
	gap: 0.6rem;
	padding: 0.75rem 1rem;
}

.dtb-website-product__grid svg {
	color: var(--wp--preset--color--accent-1);
}

/* On phones two columns would break words like "Übungsleiter" in the middle. */
@media (max-width: 30em) {

	.dtb-website-product__grid {
		grid-template-columns: 1fr;
	}
}

.dtb-website-product__sync {
	align-items: center;
	background: color-mix(in srgb, var(--wp--preset--color--accent-2) 14%, transparent);
	border-radius: 0.6rem;
	display: flex;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	gap: 0.6rem;
	padding: 0.75rem 1rem;
}

.dtb-website-product__sync i {
	background: var(--wp--preset--color--accent-1);
	border-radius: 50%;
	height: 0.5rem;
	width: 0.5rem;
}

.dtb-website-checklist li::marker {
	color: var(--wp--preset--color--accent-1);
}

/* The orange call to action: dark ink on the accent surface, both schemes. */
.dtb-website-cta,
.dtb-website-cta :is(h2, p) {
	color: var(--wp--custom--dtb--ink);
}

.dtb-website-cta .is-style-kicker::before {
	background: var(--wp--custom--dtb--ink);
}

.dtb-website-cta.dtb-website-grid {
	background-image:
		linear-gradient(color-mix(in srgb, var(--wp--custom--dtb--ink) 7%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, var(--wp--custom--dtb--ink) 7%, transparent) 1px, transparent 1px);
}

.dtb-website-button-dark .wp-block-button__link {
	background: var(--wp--custom--dtb--ink);
	color: var(--wp--preset--color--accent-2);
}

.dtb-website-button-dark .wp-block-button__link:hover {
	background: #000;
	color: var(--wp--preset--color--accent-2);
}

.dtb-website-card-head {
	align-self: stretch;
}

.dtb-website-trust-names.wp-block-group {
	row-gap: var(--wp--preset--spacing--20);
}

/* Portfolio cards in the site's card look. */
.dtb-portfolio__item {
	background: var(--wp--custom--dtb--card--background);
	border-color: var(--wp--custom--dtb--card--border);
	border-radius: 1rem;
}

.dtb-portfolio__body {
	padding: var(--wp--preset--spacing--40);
}

.dtb-portfolio__title {
	color: var(--wp--preset--color--accent-1);
	font-size: var(--wp--preset--font-size--large);
}

.dtb-portfolio__description {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--small);
}

.dtb-portfolio__category {
	background: var(--wp--preset--color--base);
	border-radius: 9999px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	justify-self: start;
	margin-inline-end: auto;
	opacity: 1;
	padding: 0.2rem 0.65rem;
}

.dtb-portfolio__host {
	color: var(--wp--preset--color--accent-1);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	opacity: 1;
}

/* ------------------------------------------------------------------------ */
/* Sub pages                                                                  */
/* ------------------------------------------------------------------------ */

/* Tick list: each item with a small accent box and a check mark. */
.dtb-website-ticks {
	display: grid;
	gap: 0.75rem;
	list-style: none;
	padding: 0;
}

.dtb-website-ticks li {
	padding-inline-start: 2.1rem;
	position: relative;
}

.dtb-website-ticks li::before {
	background: color-mix(in srgb, var(--wp--preset--color--accent-2) 16%, transparent);
	border-radius: 0.4rem;
	content: "";
	height: 1.4rem;
	left: 0;
	position: absolute;
	top: 0.1rem;
	width: 1.4rem;
}

.dtb-website-ticks li::after {
	border-bottom: 2px solid var(--wp--preset--color--accent-1);
	border-left: 2px solid var(--wp--preset--color--accent-1);
	content: "";
	height: 0.3rem;
	left: 0.45rem;
	position: absolute;
	top: 0.55rem;
	transform: rotate(-45deg);
	width: 0.55rem;
}

/* Picture with the icon badge in its corner. */
.dtb-website-figure {
	position: relative;
}

.dtb-website-figure .wp-block-image img {
	box-shadow: var(--wp--preset--shadow--strong);
}

.dtb-website-figure__badge {
	align-items: center;
	background: var(--wp--preset--color--accent-2);
	border-radius: 0.75rem;
	color: var(--wp--custom--dtb--ink);
	display: inline-flex;
	height: 3.2rem;
	justify-content: center;
	left: 1.25rem;
	position: absolute;
	top: 1.25rem;
	width: 3.2rem;
}

/* Contact page: the channels from the site data and the notes below. */
.dtb-website-contact-lines,
.dtb-website-contact-notes {
	display: grid;
	gap: 0.75rem;
	list-style: none;
	padding: 0;
}

.dtb-website-contact-lines .dtb-icon {
	color: var(--wp--preset--color--accent-1);
}

.dtb-website-contact-lines a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.dtb-website-contact-lines a:hover {
	text-decoration: underline;
}

.dtb-website-contact-notes li {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--small);
	padding-inline-start: 1.9rem;
	position: relative;
}

.dtb-website-contact-notes li::before {
	background: var(--wp--preset--color--accent-1);
	border-radius: 50%;
	content: "";
	height: 0.4rem;
	left: 0.55rem;
	position: absolute;
	top: 0.55rem;
	width: 0.4rem;
}

/*
 * Legal pages, after the June 2026 site (_legal.scss): a mono meta line, the
 * provider as a card with an accent edge, sections divided by a rule.
 */
.dtb-website-legal > p:first-child {
	/* contrast-2, not the fainter grey: small text needs 4.5:1 (WCAG AA). */
	color: var(--wp--preset--color--contrast-2);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12.5px !important;
	font-weight: 400;
	letter-spacing: 0.04em;
}

.dtb-website-legal h2 {
	border-top: 1px solid var(--wp--custom--dtb--card--border);
	font-size: clamp(23px, 2.8vw, 31px);
	margin-top: 40px;
	padding-top: 40px;
}

.dtb-website-legal h3 {
	font-size: 19px;
	margin-top: 30px;
}

.dtb-website-legal h4 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 15.5px;
	font-weight: 600;
	margin-top: 22px;
}

.dtb-website-legal p,
.dtb-website-legal li {
	color: var(--wp--preset--color--contrast-2);
	font-size: 15.5px;
	line-height: 1.75;
	overflow-wrap: anywhere;
}

/* Table of contents of the privacy policy. */
.dtb-website-legal .is-style-dtb-card h2 {
	border-top: 0;
	color: var(--wp--preset--color--contrast-2);
	font-family: var(--wp--preset--font-family--mono);
	/* The heading carries the "large" preset class, which sets its size with !important. */
	font-size: 15px !important;
	font-weight: 400;
	letter-spacing: 0.08em;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
}

/* Impressum (dtb/legal-notice): the provider as a card, its heading for screen readers only. */
.dtb-website-legal .dtb-legal-notice__section--provider {
	background: var(--wp--custom--dtb--card--background);
	border: 1px solid var(--wp--custom--dtb--card--border);
	border-inline-start: 3px solid var(--wp--preset--color--accent-2);
	border-radius: var(--wp--preset--border-radius--large, 1rem);
	margin-block: 6px 22px;
	padding: 24px 26px;
}

.dtb-website-legal .dtb-legal-notice__section--provider .dtb-legal-notice__heading {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.dtb-website-legal .dtb-legal-notice__section--provider p {
	font-size: 16px;
	line-height: 1.7;
	margin: 0;
}

.dtb-website-legal .dtb-legal-notice__name,
.dtb-website-legal .dtb-legal-notice__owner {
	color: var(--wp--preset--color--contrast);
}

.dtb-website-legal .dtb-legal-notice__section--provider .dtb-legal-notice__contact {
	margin-top: 0.9rem;
}

.dtb-website-legal :is(h2, h3, h4) {
	scroll-margin-top: 6rem;
}

/* 404: a terminal window with real links in it. */
.dtb-website-terminal {
	background: color-mix(in srgb, #000 35%, var(--wp--preset--color--base));
	border: 1px solid var(--wp--custom--dtb--card--border);
	border-radius: 0.9rem;
	box-shadow: var(--wp--preset--shadow--strong);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	position: relative;
}

.dtb-website-terminal::before {
	background: radial-gradient(circle, #ff5f57 0.3rem, transparent 0.32rem) 0 0 / 1.1rem 0.8rem no-repeat,
		radial-gradient(circle, #febc2e 0.3rem, transparent 0.32rem) 1.1rem 0 / 1.1rem 0.8rem no-repeat,
		radial-gradient(circle, #28c840 0.3rem, transparent 0.32rem) 2.2rem 0 / 1.1rem 0.8rem no-repeat;
	content: "";
	height: 0.8rem;
	left: var(--wp--preset--spacing--40);
	position: absolute;
	top: 0.8rem;
	width: 3.3rem;
}

:root[data-scheme="light"] .dtb-website-terminal {
	background: #1d1d1b;
	color: #fafafa;
}

.dtb-website-terminal p {
	margin: 0;
}

.dtb-website-terminal__line span {
	color: #f4a261;
}

.dtb-website-terminal__error {
	color: #ff7b72;
}

.dtb-website-terminal__links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dtb-website-terminal__links li::before {
	color: #7ee787;
	content: "→ ";
}

.dtb-website-terminal__links a {
	color: #7ee787;
}

.dtb-website-search .wp-block-search__input {
	background: var(--wp--custom--dtb--card--background);
	border: 1px solid var(--wp--custom--dtb--card--border);
	border-radius: 9999px;
	color: inherit;
	padding-inline: 1.25rem;
}

.dtb-website-search .wp-block-search__button {
	border-radius: 9999px;
}

@media (prefers-reduced-motion: no-preference) {

	.dtb-website-header,
	.dtb-menu__item.dtb-website-menu-cta > .dtb-menu__link {
		transition-duration: 0.2s;
	}
}

/* Long German words ("Datenschutzerklärung") would not fit a phone width;
   on wider screens the headings keep their words whole. */
@media (max-width: 37.5rem) {

	.dtb-website-hero h1 {
		hyphens: auto;
		overflow-wrap: break-word;
	}
}

/* ------------------------------------------------------------------------ */
/* Motion                                                                     */
/* ------------------------------------------------------------------------ */

/*
 * Decoration on top of a page that already works: the reveal only exists once
 * assets/js/website.js has marked the sections, so without JavaScript nothing
 * is ever hidden. Scroll-driven CSS animations were tried first and dropped:
 * in a window as tall as the document their range collapses and the sections
 * stay at opacity 0.
 */
@media (prefers-reduced-motion: no-preference) {

	html {
		scroll-behavior: smooth;
	}

	.dtb-website-reveal {
		opacity: 0;
		transform: translateY(1.5rem);
		transition: opacity 0.6s var(--dtb-website-ease), transform 0.6s var(--dtb-website-ease);
	}

	.dtb-website-reveal.is-revealed {
		opacity: 1;
		transform: none;
	}

	/* Cards that are links lift a little; the others stay put. */
	.dtb-portfolio__item--linked {
		transition: transform 0.25s var(--dtb-website-ease), border-color 0.25s var(--dtb-website-ease);
	}

	.dtb-portfolio__item--linked:hover,
	.dtb-portfolio__item--linked:has(.dtb-portfolio__link:focus-visible) {
		border-color: color-mix(in srgb, var(--wp--preset--color--accent-2) 55%, transparent);
		transform: translateY(-3px);
	}
}

/* Printing shows everything, whether it was revealed on screen or not. */
@media print {

	.dtb-website-reveal {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* Anchors land below the sticky header, not behind it. */
.wp-site-blocks main [id] {
	scroll-margin-top: calc(var(--dtb-website-header-height, 5rem) + 1.5rem);
}

/* ------------------------------------------------------------------------ */
/* Consent banner                                                             */
/* ------------------------------------------------------------------------ */

/*
 * wp-dtb-consent brings a plain, working banner; these rules only dress it in
 * the site's card and button look. Colours still come from the presets, so the
 * banner follows the light/dark switch.
 */
.dtb-consent .dtb-consent__box {
	background: var(--wp--custom--dtb--card--background);
	border-color: var(--wp--custom--dtb--card--border);
	border-radius: 1rem;
	box-shadow: var(--wp--preset--shadow--strong);
	max-width: 34rem;
}

.dtb-consent .dtb-consent__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
}

.dtb-consent .dtb-consent__text,
.dtb-consent .dtb-consent__description,
.dtb-consent .dtb-consent__services {
	color: var(--wp--preset--color--contrast-2);
}

.dtb-consent .dtb-consent__box a {
	color: var(--wp--preset--color--accent-1);
}

.dtb-consent .dtb-consent__button {
	background: transparent;
	border: 1px solid var(--dtb-website-border-strong);
	border-radius: 999px;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 15px;
	font-weight: 600;
	padding: 0.7rem 1.25rem;
}

.dtb-consent .dtb-consent__button:hover,
.dtb-consent .dtb-consent__button:focus-visible {
	background: var(--dtb-website-surface-2);
	border-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--accent-1);
}

/* "Accept all" is the suggested answer and carries the accent. */
.dtb-consent .dtb-consent__button[data-dtb-consent="all"] {
	background: var(--wp--preset--color--accent-2);
	border-color: var(--wp--preset--color--accent-2);
	color: var(--wp--custom--dtb--ink);
}

.dtb-consent .dtb-consent__button[data-dtb-consent="all"]:hover,
.dtb-consent .dtb-consent__button[data-dtb-consent="all"]:focus-visible {
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--custom--dtb--ink);
	filter: brightness(1.05);
}

.dtb-consent .dtb-consent__summary {
	color: var(--wp--preset--color--contrast-2);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
}

.dtb-consent .dtb-consent__categories,
.dtb-consent .dtb-consent__category {
	border-color: var(--wp--custom--dtb--card--border);
}