/*
 * NEMESIS Child – site styles for NEMESIS Coatings (client's brief, 2026-10-24): photographs under a dark navy
 * overlay open the pages, the type (Archivo only) is large and calm, turquoise marks the request.
 * Only reference tokens (var(--nm-…)) here – brand values live in inc/tokens.php.
 * Loaded on the front end and inside the block editor canvas; generic rules are scoped to
 * .site (front end) and .editor-styles-wrapper (editor canvas) so nothing leaks into wp-admin.
 *
 * Finish: a ruled document. Every section opens on a full-width ink rule with its name and one fact (.nm-head);
 * rows, tables and fact strips are ruled in the light rule; photographs carry a caption. Rules are always the
 * tokens --nm-rule (ink), --nm-rule-light and --nm-rule-on-dark – never ad-hoc borders.
 *
 * Rules: radius 0, no shadows at rest, no gradients (the overlay under type on a photo is the one exception),
 * deep cyan (accent) only for interaction (hover, focus, current page), turquoise (brand) as a field or button
 * with navy type, as type only on navy.
 */

/* ---------------------------------------------------------------------------
 * Grid + edge helpers
 * ------------------------------------------------------------------------ */
:root {
	--nm-scrim: rgb(10 14 20 / 0.62);
	--nm-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--nm-rule-on-dark: var(--nm-rule-weight, 1px) solid color-mix(in srgb, var(--nm-color-base) 28%, transparent);
	--nm-rule-on-photo: var(--nm-rule-weight, 1px) solid color-mix(in srgb, var(--nm-color-base) 45%, transparent);
	/* Kadence outline buttons read these. */
	--global-palette-btn-out: var(--nm-color-dark);
	--global-palette-btn-out-hover: var(--nm-color-accent);
}

/* Kadence containers (header, text pages) use the page margin → one pair of margins everywhere.
   (:root:root because Kadence prints its own :root value inline after this file.) */
:root:root {
	--global-content-edge-padding: var(--nm-space-margin);
}

/* One page frame: the widest layout incl. margins, margins inside.
   (.nm-container: older page sections – Karriere – until they are rebuilt.) */
.nm-wrap,
.nm-container {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--nm-container);
	margin-inline: auto !important;
	padding-inline: var(--nm-space-margin);
}

/* ---------------------------------------------------------------------------
 * Base
 * ------------------------------------------------------------------------ */
:where(.site, .editor-styles-wrapper) {
	font-stretch: var(--nm-stretch-body);
	font-synthesis: none;
}

/* The sticky header never covers what keyboard focus or an anchor jump brings into view. */
html {
	scroll-padding-top: 6.5rem;
}

/* Square and flat – everywhere on the site; in the editor only our blocks (editor UI keeps its own). */
:where(.site) *,
:where(.site) *::before,
:where(.site) *::after,
:where(.editor-styles-wrapper) :is([class^="nm-"], [class*=" nm-"], .nemesis-log, .fluentform) * {
	border-radius: 0 !important;
}

:where(.site) * {
	box-shadow: none; /* taste-skill-ignore: removes shadows */
}

:where(.site, .editor-styles-wrapper) :is(h1, h2, h3, h4, h5, h6),
.site-branding .site-title {
	font-stretch: var(--nm-stretch-heading);
	text-wrap: balance;
	hyphens: auto;
	hyphenate-limit-chars: 10 4 4;
	overflow-wrap: break-word;
}

:where(.site, .editor-styles-wrapper) p {
	text-wrap: pretty;
}

:where(.site, .editor-styles-wrapper) ::selection {
	background: var(--nm-color-ink);
	color: var(--nm-color-base);
}

:where(.site, .editor-styles-wrapper) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--nm-color-accent);
	outline-offset: 3px;
}

:where(.site, .editor-styles-wrapper) a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color 0.15s linear, background-color 0.15s linear, text-underline-offset 0.2s var(--nm-ease-out);
}

:where(.site, .editor-styles-wrapper) a:hover {
	text-underline-offset: 0.28em;
}

/* Buttons: flat navy plate; a press moves it by one pixel. */
:where(.site) :is(.wp-block-button__link, .button, .fluentform .ff-btn-submit) {
	transition: background-color 0.15s linear, color 0.15s linear, transform 0.12s var(--nm-ease-out);
}

:where(.site) :is(.wp-block-button__link, .button, .fluentform .ff-btn-submit):active {
	transform: translateY(1px);
}

/* Paper button (on photographs): white plate, navy type; navy plate on hover. */
.is-style-paper .wp-block-button__link.wp-element-button {
	color: var(--nm-color-dark);
	background: var(--nm-color-base);
}

.is-style-paper .wp-block-button__link.wp-element-button:is(:hover, :focus-visible) {
	color: var(--nm-color-base);
	background: var(--nm-color-dark);
}

/* Small print: notes, captions, table heads. Sentence case, never below 13px. */
.nm-small,
.nm-spec th,
.nemesis-log th,
.nemesis-facts dt,
.nm-ref__caption {
	font-size: var(--nm-step-small);
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.4;
	text-transform: none;
	color: var(--nm-color-graphite);
}

.nm-lead {
	font-size: var(--nm-step-lead);
	line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
	:where(.site, .editor-styles-wrapper) * {
		transition: none !important;
		animation: none !important;
	}

	/* Without animations the release timer below cannot run: never hold the title back. */
	.nm-js .nm-fit:not(.is-fitted) {
		visibility: visible;
	}
}

/* ---------------------------------------------------------------------------
 * Header – a plain bar: logo, six links (Leistungen opens its three pages), "Projekt anfragen" in turquoise
 * ------------------------------------------------------------------------ */
/* Logo (inline SVG from tokens.php): navy + cyan in the header. */
/* .site-header .site-branding a: Kadence (header.min.css, loaded later) sets color: inherit on the logo link. */
.site-header .site-branding a.nm-brand {
	display: inline-flex;
	color: var(--nm-color-dark);
}

.nm-logo {
	display: block;
	width: auto;
	height: 3.25rem;
}

.nm-logo .nm-logo__brand {
	fill: var(--nm-color-brand);
}

/* The divider between mark and name is a hairline beside the lockup, not a third colour. */
.nm-logo .nm-logo__rule {
	opacity: 0.5;
}

@media (max-width: 1024px) {
	.nm-logo {
		height: 2.75rem;
	}
}

.header-navigation .menu > li:is(.current-menu-item, .current-menu-ancestor, .current-page-ancestor) > a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.45em;
}

/* Six links and the button share the bar with a wide logo: tighter link padding below 1280px. */
@media (max-width: 1279px) {
	.header-navigation .header-menu-container > ul > li > a {
		padding-inline: 0.55em;
		font-size: 0.9375rem;
	}
}

/* Leistungen opens its three pages: Kadence's dropdown in white with ink links and light rules (colours, width and
   rules synced from tokens in inc/brand.php); here only the turquoise top rule and the padding. */
.header-navigation .header-menu-container ul ul.sub-menu {
	border-top: 3px solid var(--nm-color-brand);
}

.header-navigation .header-menu-container ul ul li.menu-item > a {
	padding-inline: 1.25rem;
}

/* "Projekt anfragen": the turquoise of the brief, navy type on it (5.4:1); navy plate on hover. */
.site-header :is(.header-button, .mobile-header-button).button-style-filled {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	font-weight: 600;
	color: var(--nm-color-dark);
	background: var(--nm-color-brand);
	border: 0;
}

.site-header :is(.header-button, .mobile-header-button).button-style-filled:is(:hover, :focus-visible) {
	color: var(--nm-color-base);
	background: var(--nm-color-dark);
}

.site-header .header-button.button-style-filled {
	padding: 0.55em 1.2em;
}

.site-header .mobile-header-button.button-style-filled {
	padding: 0.4em 0.9em;
}

/* The bar closes on a light rule – also while it sticks over the page. */
.site-main-header-wrap .site-header-row-container-inner {
	border-bottom: var(--nm-rule-light);
}

/* Pages that open on a photograph: the header lies on it (Kadence "transparent header") – white until it sticks. */
.transparent-header #masthead .site-main-header-wrap:not(.item-is-stuck) .site-header-row-container-inner {
	background: transparent;
	border-bottom: var(--nm-rule-on-photo);
}

.transparent-header #masthead .site-main-header-wrap:not(.item-is-stuck) :is(.site-branding a.nm-brand, .header-navigation .menu > li > a, .menu-toggle-open) {
	color: var(--nm-color-base);
}

.transparent-header #masthead .site-main-header-wrap:not(.item-is-stuck) .header-navigation .menu > li > a:hover {
	color: var(--nm-color-base);
	text-decoration: underline;
	text-underline-offset: 0.35em;
}

/* On the photograph the button turns white on hover (navy would sink into the overlay). */
.transparent-header #masthead .site-main-header-wrap:not(.item-is-stuck) :is(.header-button, .mobile-header-button).button-style-filled:is(:hover, :focus-visible) {
	color: var(--nm-color-dark);
	background: var(--nm-color-base);
}

/* ---------------------------------------------------------------------------
 * Group inner container (Kadence is a classic theme: WordPress wraps every Group's content
 * in .wp-block-group__inner-container). Transparent inside our components.
 * ------------------------------------------------------------------------ */
:is([class^="nm-"], [class*=" nm-"]) > .wp-block-group__inner-container {
	display: contents;
}

/* Editor: blocks are centred with auto margins by default – not inside our layouts. */
:where(.editor-styles-wrapper) :is([class^="nm-"], [class*=" nm-"]) .wp-block:not(.nm-wrap) {
	margin-right: 0;
	margin-left: 0;
}

/* ---------------------------------------------------------------------------
 * Sections
 * ------------------------------------------------------------------------ */
:is(.entry-content, .is-root-container) > :is(.nm-section, .nm-hero, .nm-pagehead, .nm-ref) {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Full-width page layout: the content area already spans the window – no breakout maths
   (Kadence's --global-vw guesses half a scrollbar and shifts sections by a few px). */
.content-width-fullwidth .entry-content > :is(.nm-section, .nm-hero, .nm-pagehead, .nm-ref).alignfull {
	width: 100%;
	max-width: 100%;
	margin-right: 0 !important;
	margin-left: 0 !important;
}

/* Kadence gives every group/figure/table in .single-content a bottom margin – not in our layouts. */
.single-content :is(.nm-wrap, .nm-head, .nm-intro, .nm-steps, .nm-layers, .nm-jobs__text, .nm-jobs__fields, .nm-about__grid, .nm-about__text, .nm-tiles, .nm-tile, .nm-detail__grid, .nm-detail__text, .nm-detail__aside, .nm-sectors, .nm-sector, .nm-points, .nm-point, .nm-quality__close, .nm-keyfacts, .nm-keyfact, .nm-ref__query, .nm-ref__text, .nm-ref__facts, .nm-ref__fact, .nm-projekte__grid, .nm-projekte__list, .nm-projekte__media, .nm-direct, .nm-person, .nm-person__body, .nm-kontakt__grid, .nm-kontakt__info, .nm-kontakt__form, .nm-cta__inner, .nm-cta__body, .nemesis-log, .nemesis-log table) {
	margin-block: 0;
}

.nm-section {
	padding-block: var(--nm-space-section);
}

/* Two sections on the same paper share one gap, not two (the Referenz ends on paper, too).
   Sections on a field of their own (.nm-field, CTA band, Eckdaten) always keep both. */
:is(.nm-section:not(.nm-field, .nm-cta, .nm-trust), .nm-ref) + .nm-section:not(.nm-field, .nm-cta, .nm-trust) {
	padding-top: 0;
}

.nm-section :is(h2, h3) {
	margin-top: 0;
}

.nm-section h2 {
	font-size: var(--nm-step-head);
	line-height: 0.98;
	letter-spacing: -0.025em;
}

/* Running head: the rule a section opens on – its name left, one fact right. The rule is drawn by ::before so it
   can be drawn in from the left when the section enters (assets/js/site.js). */
.nm-head {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem var(--nm-space-l);
	justify-content: space-between;
	align-items: baseline;
	grid-column: 1 / -1;
	margin: 0 0 clamp(2.5rem, 5vw, 4.5rem) !important;
	padding-top: 0.9rem;
	font-size: 1rem;
	line-height: 1.4;
}

.nm-head::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 1px; /* taste-skill-ignore: running-head rule – ruled-document finish, client decision 2026-10-23 */
	background: var(--nm-color-ink);
	transform-origin: left;
}

:is(.nm-head, .nm-head > .wp-block-group__inner-container) > * {
	margin: 0;
}

.nm-head__name {
	font-weight: 600;
}

.nm-head__fact {
	color: var(--nm-color-graphite);
}

/* Section intro: heading on the margin, the lead sentence on the axis (column 5) where the section's text runs. */
.nm-intro {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--nm-space-gap);
}

:is(.nm-intro, .nm-intro > .wp-block-group__inner-container) > * {
	grid-column: 1 / -1;
	margin: 0;
}

:is(.nm-intro, .nm-intro > .wp-block-group__inner-container) > h2 {
	grid-column: 1 / span 9;
	max-width: 18ch;
}

:is(.nm-intro, .nm-intro > .wp-block-group__inner-container) > .nm-lead {
	grid-column: 5 / span 6;
	max-width: 46ch;
	margin-top: var(--nm-space-l);
}

@media (max-width: 1024px) {
	:is(.nm-intro, .nm-intro > .wp-block-group__inner-container) > .nm-lead {
		grid-column: 1 / span 10;
	}
}

@media (max-width: 781px) {
	:is(.nm-intro, .nm-intro > .wp-block-group__inner-container) > :is(h2, .nm-lead) {
		grid-column: 1 / -1;
	}
}

/* Captions under photographs and drawings: say what the picture shows. */
:is(.nm-projekte__media, .nm-layers) .wp-element-caption {
	margin: 0.65rem 0 0;
	font-size: var(--nm-step-small);
	line-height: 1.4;
	text-align: left;
	color: var(--nm-color-graphite);
}

.nm-section p.nm-more {
	margin: var(--nm-space-m) 0 0;
	font-weight: 600;
}

.nm-more a {
	color: var(--nm-color-ink);
}

.nm-more a:hover {
	color: var(--nm-color-accent);
}

/* ---------------------------------------------------------------------------
 * Photographs carrying type: full bleed. Hero and Seitenkopf lie under a dark navy overlay (brief: "dunkle
 * Überlagerung"), strongest where the type stands; the Referenz keeps a neutral scrim under its lower band.
 * ------------------------------------------------------------------------ */
:root {
	--nm-shade: 9 16 42; /* NEMESIS navy, darkened – the overlay colour (rgb triplet). */
}

:is(.nm-hero, .nm-pagehead, .nm-ref__photo).wp-block-cover {
	padding: 0;
	color: var(--nm-color-base);
}

:is(.nm-hero, .nm-pagehead) > .wp-block-cover__background.has-background-dim {
	opacity: 1 !important;
	background: /* taste-skill-ignore: overlay under type on a photograph (client brief) */
		linear-gradient(to top, rgb(var(--nm-shade) / 0.7) 0%, rgb(var(--nm-shade) / 0) 55%),
		linear-gradient(to right, rgb(var(--nm-shade) / 0.86) 0%, rgb(var(--nm-shade) / 0.6) 50%, rgb(var(--nm-shade) / 0.28) 100%) !important;
}

.nm-ref__photo > .wp-block-cover__background.has-background-dim {
	opacity: 1 !important;
	background: linear-gradient(to top, var(--nm-scrim) 0%, rgb(10 14 20 / 0.32) 26%, transparent 46%) !important; /* taste-skill-ignore: scrim under type on a photograph */
}

/* Top scrim behind the header links (skies are light). */
:is(.nm-hero, .nm-pagehead).wp-block-cover::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	z-index: 1;
	height: 10rem;
	background: linear-gradient(to bottom, rgb(var(--nm-shade) / 0.5), transparent); /* taste-skill-ignore: scrim under the header on a photograph */
	pointer-events: none;
}

:is(.nm-hero, .nm-pagehead).wp-block-cover > .wp-block-cover__inner-container {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--nm-space-gap);
	align-content: end;
	align-self: flex-end;
	box-sizing: border-box;
	width: 100% !important;
	max-width: var(--nm-container);
	margin: 0 auto !important;
	padding: 7rem var(--nm-space-margin) clamp(2.5rem, 7vh, 5.5rem) !important;
}

:is(.nm-hero, .nm-pagehead) .wp-block-cover__inner-container > * {
	grid-column: 1 / span 8;
	margin: 0;
}

/* Area above the title: letter-spaced capitals in turquoise, as in the logo's tagline (turquoise only on dark). */
.nm-eyebrow {
	margin: 0 0 clamp(1rem, 2vw, 1.5rem) !important;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--nm-color-brand);
}

/* ---------------------------------------------------------------------------
 * Hero – one photograph under the overlay; area, title, core message, two sentences, two actions
 * ------------------------------------------------------------------------ */
.nm-hero.wp-block-cover {
	min-height: 100vh !important; /* taste-skill-ignore: fallback without svh */
	min-height: 100svh !important;
	align-items: stretch;
	overflow: hidden;
}

.nm-hero .wp-block-cover__inner-container > .nm-hero__title {
	grid-column: 1 / span 10;
}

.nm-hero__title.wp-block-heading {
	font-size: clamp(2.5rem, 1.2rem + 4.4vw, 5.5rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--nm-color-base);
}

.nm-hero__lead {
	max-width: 34ch;
	margin-top: clamp(1.25rem, 2vw, 1.75rem) !important;
	font-size: var(--nm-step-lead);
	font-weight: 500;
	line-height: 1.3;
	color: var(--nm-color-base);
}

.nm-hero__text {
	max-width: 62ch;
	margin-top: var(--nm-space-s) !important;
	font-size: var(--nm-step-body);
	line-height: 1.6;
	color: rgb(255 255 255 / 0.84);
}

.nm-hero__actions.wp-block-buttons {
	gap: var(--nm-space-s);
	margin-top: clamp(1.75rem, 3vw, 2.5rem) !important;
}

/* Buttons on a photograph: turquoise for the request, a white outline for the way into the site. */
.is-style-signal .wp-block-button__link.wp-element-button {
	color: var(--nm-color-dark);
	background: var(--nm-color-brand);
}

.is-style-signal .wp-block-button__link.wp-element-button:is(:hover, :focus-visible),
.is-style-ghost .wp-block-button__link.wp-element-button:is(:hover, :focus-visible) {
	color: var(--nm-color-dark);
	background: var(--nm-color-base);
	border-color: var(--nm-color-base);
}

.is-style-ghost .wp-block-button__link.wp-element-button {
	color: var(--nm-color-base);
	background: transparent;
	border: 1px solid rgb(255 255 255 / 0.75);
}

/* On paper: a navy outline that fills on hover. */
.is-style-outline .wp-block-button__link.wp-element-button {
	padding: calc(0.75em - 1px) calc(1.4em - 1px);
	color: var(--nm-color-dark);
	background: transparent;
	border: 1px solid var(--nm-color-dark);
}

.is-style-outline .wp-block-button__link.wp-element-button:is(:hover, :focus-visible) {
	color: var(--nm-color-base);
	background: var(--nm-color-dark);
}

@media (max-width: 781px) {
	:is(.nm-hero, .nm-pagehead) .wp-block-cover__inner-container > *,
	.nm-hero .wp-block-cover__inner-container > .nm-hero__title {
		grid-column: 1 / -1;
	}

	.nm-hero__text {
		font-size: 1rem;
	}
}

/* ---------------------------------------------------------------------------
 * Seitenkopf – the head of every sub-page: the hero's overlay and voice, shorter, the page title as <h1>
 * ------------------------------------------------------------------------ */
.nm-pagehead.wp-block-cover {
	min-height: min(70svh, 46rem) !important;
	align-items: stretch;
	overflow: hidden;
}

.nm-pagehead__title.wp-block-heading {
	max-width: 22ch; /* "Oberflächenvorbereitung" stays whole on desktop. */
	font-size: clamp(2.25rem, 1.1rem + 3.9vw, 4.75rem);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.03em;
	color: var(--nm-color-base);
}

.nm-pagehead__lead {
	max-width: 52ch;
	margin-top: clamp(1rem, 2vw, 1.5rem) !important;
	font-size: var(--nm-step-lead);
	line-height: 1.35;
	color: rgb(255 255 255 / 0.88);
}

@media (max-width: 781px) {
	.nm-pagehead.wp-block-cover {
		min-height: 60svh !important;
	}

	.nm-pagehead__lead {
		font-size: 1.125rem;
	}
}

/* ---------------------------------------------------------------------------
 * Unternehmen – text on the left, an industrial photograph on the right (stacked on phones)
 * ------------------------------------------------------------------------ */
.nm-about__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--nm-space-gap);
	align-items: start;
}

.nm-about__text {
	grid-column: 1 / span 6;
}

:is(.nm-about__text, .nm-about__text > .wp-block-group__inner-container) > * {
	max-width: 54ch;
	margin: 0 0 var(--nm-space-s);
}

:is(.nm-about__text, .nm-about__text > .wp-block-group__inner-container) > h2 {
	max-width: 14ch;
	margin-bottom: var(--nm-space-l);
}

.nm-about__media {
	grid-column: 8 / -1;
	margin: 0 !important;
}

.nm-about__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

@media (max-width: 781px) {
	.nm-about__text,
	.nm-about__media {
		grid-column: 1 / -1;
	}

	.nm-about__media {
		margin-top: var(--nm-space-l) !important;
	}

	.nm-about__media img {
		aspect-ratio: 3 / 2;
	}
}

/* ---------------------------------------------------------------------------
 * Leistungen – three clickable cards on the light field: photo, title (the link covers the card), one sentence
 * ------------------------------------------------------------------------ */
.nm-field--light {
	background: var(--nm-color-surface);
}

.nm-tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--nm-space-gap);
	margin-top: clamp(2.5rem, 5vw, 4rem) !important;
}

.nm-tiles--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.nm-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--nm-color-base);
	transition: background-color 0.2s linear;
}

.nm-tile > .wp-block-group__inner-container {
	display: flex !important;
	flex-direction: column;
	height: 100%;
}

.nm-tile__media {
	margin: 0 !important;
	overflow: hidden;
}

.nm-tile__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.7s var(--nm-ease-out);
}

:is(.nm-tile, .nm-tile > .wp-block-group__inner-container) > :not(.nm-tile__media, .wp-block-group__inner-container) {
	margin: 0;
	padding-inline: clamp(1.25rem, 2vw, 1.75rem);
}

.nm-tile .nm-tile__title.wp-block-heading {
	margin-top: clamp(1.25rem, 2vw, 1.75rem);
	margin-bottom: var(--nm-space-xs);
	font-size: clamp(1.25rem, 0.8rem + 0.85vw, 1.625rem);
	line-height: 1.15;
	letter-spacing: -0.015em;
	/* "Oberflächenvorbereitung" fits a card from 1280px; below, it breaks at a syllable, never mid-letter. */
	overflow-wrap: normal;
}

.nm-tile__title a {
	color: var(--nm-color-ink);
	text-decoration: none;
}

/* The title's link covers the whole card. */
.nm-tile__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.nm-tile p {
	color: var(--nm-color-graphite);
}

/* Doubled class: outranks the card's margin reset above. */
.nm-tile p.nm-tile__more.nm-tile__more {
	margin-top: auto;
	padding-top: var(--nm-space-m);
	padding-bottom: clamp(1.25rem, 2vw, 1.75rem);
	font-weight: 600;
	color: var(--nm-color-dark);
}

.nm-tile__more::after {
	content: "→";
	display: inline-block;
	margin-left: 0.35em;
	transition: transform 0.3s var(--nm-ease-out);
}

.nm-tile:hover .nm-tile__media img {
	transform: scale(1.04);
}

.nm-tile:hover .nm-tile__more {
	color: var(--nm-color-accent);
}

.nm-tile:hover .nm-tile__more::after {
	transform: translateX(0.3em);
}

.nm-tile:has(a:focus-visible) {
	outline: 2px solid var(--nm-color-accent);
	outline-offset: 3px;
}

.nm-tile__title a:focus-visible {
	outline: 0;
}

/* Three across or one below the other – never two plus an orphan. */
@media (max-width: 781px) {
	.nm-tiles {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (min-width: 600px) and (max-width: 781px) {
	.nm-tiles--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Spec table (core/table): label and value on ruled lines, opened by an ink rule.
   Core gives table blocks overflow-x: auto, which turns overflow-y to auto too: a pixel of baseline overflow then
   shows a scrollbar. The spec table wraps and never needs to scroll. */
.nm-spec.wp-block-table {
	margin: var(--nm-space-m) 0 0 !important;
	overflow: visible;
}

.nm-spec.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	border-top: var(--nm-rule);
	border-bottom: var(--nm-rule-light);
}

.nm-spec.wp-block-table :is(th, td) {
	padding: 0.55rem 1rem 0.55rem 0;
	border: 0;
	text-align: left;
	vertical-align: baseline;
}

.nm-spec.wp-block-table tr + tr > * {
	border-top: var(--nm-rule-light);
}

.nm-spec.wp-block-table th {
	width: 36%;
}

.nm-spec.wp-block-table td {
	font-size: var(--nm-step-small);
	line-height: 1.45;
	color: var(--nm-color-ink);
}

/* ---------------------------------------------------------------------------
 * Text mit Eckdaten – the running text on the left, "Auf einen Blick" as a ruled table on the right
 * ------------------------------------------------------------------------ */
.nm-detail__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--nm-space-gap);
	align-items: start;
}

.nm-detail__text {
	grid-column: 1 / span 7;
}

:is(.nm-detail__text, .nm-detail__text > .wp-block-group__inner-container) > * {
	max-width: 58ch;
	margin: 0 0 var(--nm-space-s);
}

:is(.nm-detail__text, .nm-detail__text > .wp-block-group__inner-container) > h2 {
	max-width: 16ch;
	margin-bottom: var(--nm-space-l);
}

.nm-detail__action.wp-block-buttons {
	margin-top: var(--nm-space-l) !important;
}

.nm-detail__aside {
	grid-column: 9 / -1;
	padding-top: 0.35rem;
}

:is(.nm-detail__aside, .nm-detail__aside > .wp-block-group__inner-container) > * {
	margin: 0;
}

.nm-detail__label {
	margin-bottom: var(--nm-space-s) !important;
	font-size: var(--nm-step-small);
	font-weight: 600;
	color: var(--nm-color-graphite);
}

.nm-detail__aside .nm-spec.wp-block-table {
	margin: 0 !important;
}

.nm-detail__aside .nm-spec td {
	font-size: 0.9375rem;
}

@media (max-width: 1024px) {
	.nm-detail__text {
		grid-column: 1 / span 12;
	}

	.nm-detail__aside {
		grid-column: 1 / span 9;
		margin-top: var(--nm-space-xl) !important;
	}
}

@media (max-width: 781px) {
	.nm-detail__aside {
		grid-column: 1 / -1;
	}
}

/* ---------------------------------------------------------------------------
 * Branchen – two equal panels side by side: large photo, title, text, an own request button each
 * ------------------------------------------------------------------------ */
.nm-sectors {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--nm-space-xl) clamp(1.5rem, 3vw, 3rem);
	margin-top: clamp(2.5rem, 5vw, 4rem) !important;
}

:is(.nm-sector, .nm-sector > .wp-block-group__inner-container) > * {
	max-width: 56ch;
	margin: 0 0 var(--nm-space-s);
}

.nm-sector__media {
	max-width: none !important;
	margin: 0 0 clamp(1.5rem, 2.5vw, 2rem) !important;
}

.nm-sector__media img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.nm-sector__title.wp-block-heading {
	margin-bottom: var(--nm-space-s);
	font-size: var(--nm-step-title);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.nm-sector__action.wp-block-buttons {
	margin-top: var(--nm-space-l) !important;
}

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

/* ---------------------------------------------------------------------------
 * Qualität & Sicherheit – a navy field; four points under rules, each with its symbol in turquoise
 * ------------------------------------------------------------------------ */
.nm-quality {
	color: var(--nm-color-base);
	background: var(--nm-color-dark);
}

.nm-quality :is(h2, h3, .nm-lead, .nm-head__name) {
	color: var(--nm-color-base);
}

.nm-quality .nm-head::before {
	background: color-mix(in srgb, var(--nm-color-base) 45%, transparent);
}

.nm-quality .nm-head__fact {
	color: var(--nm-color-rule);
}

.nm-points {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--nm-space-xl) var(--nm-space-gap);
	margin-top: clamp(3rem, 6vw, 5.5rem) !important;
}

.nm-point {
	padding-top: var(--nm-space-m);
	border-top: var(--nm-rule-on-dark);
}

.nm-point::before {
	content: "";
	display: block;
	width: 3rem;
	height: 3rem;
	margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
	background: var(--nm-color-brand);
	mask: var(--nm-icon) center / contain no-repeat;
}

:is(.nm-point, .nm-point > .wp-block-group__inner-container) > * {
	margin: 0;
}

.nm-point__title.wp-block-heading {
	margin-bottom: var(--nm-space-xs);
	font-size: var(--nm-step-lead);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.nm-point p {
	font-size: 1rem;
	line-height: 1.5;
	color: var(--nm-color-rule);
}

.nm-quality__close {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--nm-space-gap);
	margin-top: clamp(3rem, 6vw, 5rem) !important;
}

:is(.nm-quality__close, .nm-quality__close > .wp-block-group__inner-container) > * {
	grid-column: 5 / span 6;
	max-width: 60ch;
	margin: 0;
	color: var(--nm-color-rule);
}

.nm-quality .nm-more a {
	color: var(--nm-color-base);
}

.nm-quality .nm-more a:hover {
	color: var(--nm-color-base);
	text-decoration-thickness: 2px;
}

@media (max-width: 1024px) {
	.nm-points {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	:is(.nm-quality__close, .nm-quality__close > .wp-block-group__inner-container) > * {
		grid-column: 1 / span 10;
	}
}

@media (max-width: 599px) {
	.nm-points {
		grid-template-columns: minmax(0, 1fr);
	}

	:is(.nm-quality__close, .nm-quality__close > .wp-block-group__inner-container) > * {
		grid-column: 1 / -1;
	}
}

.nm-point--surface {
	--nm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3v6M12 3v6M17 3v6M5 7l2 2 2-2M10 7l2 2 2-2M15 7l2 2 2-2'/%3E%3Cpath d='M3 16l2-2.5 2 2.5 2-2.5 2 2.5 2-2.5 2 2.5 2-2.5 2 2.5 2-2.5'/%3E%3Cpath d='M3 20h18'/%3E%3C/svg%3E");
}

.nm-point--datasheet {
	--nm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8.5L19 7.5V21H6z'/%3E%3Cpath d='M14.5 3v4.5H19'/%3E%3Cpath d='M9 12h7M9 15h7M9 18h4.5'/%3E%3C/svg%3E");
}

.nm-point--safety {
	--nm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.5 3v5.5c0 4.4-3.1 8.1-7.5 9.5-4.4-1.4-7.5-5.1-7.5-9.5V6z'/%3E%3Cpath d='M8.5 12.2l2.5 2.5 4.6-5'/%3E%3C/svg%3E");
}

.nm-point--gauge {
	--nm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 17.5a8.5 8.5 0 1 1 15.6 0'/%3E%3Cpath d='M12 16.2l4.2-5.2'/%3E%3Ccircle cx='12' cy='16.2' r='1.5'/%3E%3Cpath d='M12 7.6v1.6M6.6 10.2l1.2.9M17.4 10.2l-1.2.9M4.8 14.6h1.5M17.7 14.6h1.5'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
 * Referenz – the newest project as a full-bleed photograph, its year set like a film title
 * ------------------------------------------------------------------------ */
.nm-ref {
	padding-bottom: var(--nm-space-section);
}

.nm-ref__query,
.nm-ref__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nm-ref__list > li {
	margin: 0;
}

.nm-ref__photo.wp-block-cover {
	min-height: 88vh !important;
	min-height: 88svh !important;
	align-items: stretch;
}

.nm-ref__photo.wp-block-cover > .wp-block-cover__inner-container {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-template-rows: auto 1fr auto;
	column-gap: var(--nm-space-gap);
	box-sizing: border-box;
	width: 100% !important;
	max-width: var(--nm-container);
	margin: 0 auto !important;
	padding: clamp(1.5rem, 3vw, 2.5rem) var(--nm-space-margin) clamp(0.75rem, 1.8vw, 1.5rem) !important;
}

/* The heading is the running head on the photograph: a translucent rule across the full width. */
.nm-ref__heading.wp-block-heading {
	grid-row: 1;
	grid-column: 1 / -1;
	margin: 0;
	padding-bottom: 0.75rem;
	border-bottom: var(--nm-rule-on-photo);
	font-size: var(--nm-step-lead);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--nm-color-base);
}

.nm-ref__year {
	grid-row: 3;
	grid-column: 1 / span 7;
	align-self: end;
	margin: 0 0 -0.06em;
	font-size: clamp(6rem, 17vw, 17.5rem);
	font-weight: 700;
	font-variant-numeric: lining-nums;
	line-height: 0.8;
	letter-spacing: -0.05em;
}

.nm-ref__text {
	grid-row: 3;
	grid-column: 9 / -1;
	align-self: end;
	max-width: 34ch;
	justify-self: end;
}

:is(.nm-ref__text, .nm-ref__text > .wp-block-group__inner-container) > * {
	margin: 0;
}

.nm-ref__title.wp-block-post-title {
	margin-bottom: var(--nm-space-xs);
	font-size: var(--nm-step-lead);
	line-height: 1.2;
	letter-spacing: 0;
}

.nm-ref__title a {
	color: var(--nm-color-base);
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

.nm-ref__title a:hover {
	color: var(--nm-color-base);
	text-decoration-thickness: 2px;
}

.nm-ref__excerpt,
.nm-ref__excerpt p {
	margin: 0;
	font-size: var(--nm-step-body);
	line-height: 1.45;
}

.nm-ref__excerpt .wp-block-post-excerpt__more-text {
	display: none;
}

/* Facts strip under the photograph: three ruled cells. */
.nm-ref__facts {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--nm-space-gap);
}

.nm-ref__fact {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	gap: 0.35rem;
	grid-column: span 4;
	padding-block: clamp(1rem, 2vw, 1.5rem);
	border-bottom: var(--nm-rule-light);
}

.nm-ref__fact + .nm-ref__fact,
:is(.nm-ref__facts > .wp-block-group__inner-container) > .nm-ref__fact + .nm-ref__fact {
	padding-left: var(--nm-space-gap);
	border-left: var(--nm-rule-light);
}

:is(.nm-ref__fact, .nm-ref__fact > .wp-block-group__inner-container) > * {
	margin: 0;
}

.nm-ref__value {
	font-size: var(--nm-step-title);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.nm-ref__fact:has(.nm-ref__value:empty) {
	display: none;
}

@media (max-width: 781px) {
	.nm-ref__photo.wp-block-cover {
		min-height: 80svh !important;
	}

	.nm-ref__heading.wp-block-heading,
	.nm-ref__year,
	.nm-ref__text {
		grid-column: 1 / -1;
	}

	.nm-ref__text {
		grid-row: 3;
		justify-self: start;
		max-width: 36ch;
		margin-bottom: var(--nm-space-s);
		text-align: left;
	}

	.nm-ref__year {
		grid-row: 4;
		font-size: 30vw;
	}

	.nm-ref__fact,
	.nm-ref__fact + .nm-ref__fact {
		grid-column: 1 / -1;
		padding-left: 0;
		border-left: 0;
	}
}

/* ---------------------------------------------------------------------------
 * Projektliste – running head, heading on the margin, the ruled log on the axis, a photograph bottom-left
 * ------------------------------------------------------------------------ */
.nm-projekte__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-template-rows: auto auto auto 1fr;
	column-gap: var(--nm-space-gap);
}

.nm-projekte__title.wp-block-heading {
	grid-row: 2;
	grid-column: 1 / -1;
	max-width: 22ch;
	margin: 0 0 clamp(2.5rem, 5vw, 4.5rem);
}

.nm-projekte__note {
	grid-row: 3;
	grid-column: 1 / span 3;
	max-width: 32ch;
	margin: 0 0 var(--nm-space-l);
}

.nm-projekte__media {
	grid-row: 4;
	grid-column: 1 / span 3;
	align-self: end;
	margin: 0 !important;
}

.nm-projekte__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.nm-projekte__list {
	grid-row: 3 / span 2;
	grid-column: 5 / -1;
}

/* Project log (block nemesis/referenzen-tabelle from nemesis-core) – a real table: ink rule under the head,
   light rules between the rows. */
.nemesis-log table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	border-bottom: var(--nm-rule-light);
	font-size: var(--nm-step-body);
	font-variant-numeric: tabular-nums;
}

.nemesis-log :is(th, td) {
	padding: 1rem 1.25rem 1rem 0;
	border: 0;
	text-align: left;
	vertical-align: baseline;
}

.nemesis-log tbody tr + tr > td {
	border-top: var(--nm-rule-light);
}

.nemesis-log th {
	padding-block: 0 0.75rem;
	border-bottom: var(--nm-rule);
}

.nemesis-log tbody tr {
	transition: background-color 0.15s linear;
}

.nemesis-log tbody tr:hover {
	background: var(--nm-color-surface);
}

.nemesis-log td.nemesis-log__jahr {
	width: 5.5rem;
	color: var(--nm-color-graphite);
}

.nemesis-log__projekt a {
	font-weight: 600;
	color: var(--nm-color-ink);
	text-decoration: none;
}

.nemesis-log__projekt a:hover {
	color: var(--nm-color-accent);
	text-decoration: underline;
}

.nemesis-log :is(.nemesis-log__auftraggeber, .nemesis-log__leistung) {
	color: var(--nm-color-ink);
}

.nemesis-log__empty {
	padding-block: var(--nm-space-m);
	color: var(--nm-color-dark);
}

/* Filter by Leistung (built by assets/js/site.js; without script the full table shows). */
.nm-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 var(--nm-space-l);
}

.nm-filter__button {
	display: inline-flex;
	gap: 0.5em;
	align-items: baseline;
	min-height: 2.75rem;
	padding: 0.6rem 1rem;
	font: inherit;
	font-size: 1rem;
	font-weight: 500;
	color: var(--nm-color-ink);
	background: var(--nm-color-surface);
	border: 0;
	cursor: pointer;
	touch-action: manipulation;
	transition: background-color 0.15s linear, color 0.15s linear, transform 0.12s var(--nm-ease-out);
}

/* Kadence gives every <button> a lift shadow on hover – flat here (taste-skill-ignore). */
.nm-filter__button:is(:hover, :focus, :active) {
	box-shadow: none; /* taste-skill-ignore: removes the shadow */
}

.nm-filter__button:hover {
	background: color-mix(in srgb, var(--nm-color-surface), var(--nm-color-ink) 8%);
}

.nm-filter__button:active {
	transform: translateY(1px);
}

.nm-filter__button[aria-pressed="true"] {
	color: var(--nm-color-base);
	background: var(--nm-color-dark);
}

.nm-filter__count {
	font-size: var(--nm-step-small);
	font-variant-numeric: tabular-nums;
	opacity: 0.75;
}

.nemesis-log tr[hidden] {
	display: none;
}

.nemesis-log tr.is-shown {
	animation: nm-fade-in 0.35s var(--nm-ease-out) both;
}

@media (max-width: 1024px) {
	.nm-projekte__list {
		grid-column: 5 / -1;
	}

	.nm-projekte__note,
	.nm-projekte__media {
		grid-column: 1 / span 4;
	}
}

@media (max-width: 781px) {
	.nm-projekte__grid {
		grid-template-rows: none;
	}

	.nm-projekte__title.wp-block-heading {
		margin-bottom: var(--nm-space-l);
		text-indent: 0;
	}

	.nm-projekte__note,
	.nm-projekte__list,
	.nm-projekte__media {
		grid-row: auto;
		grid-column: 1 / -1;
	}

	/* After the list: the note leads straight into the table. */
	.nm-projekte__media {
		order: 1;
		width: 60%;
		margin-top: var(--nm-space-xl) !important;
		justify-self: end;
	}

	.nemesis-log thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.nemesis-log tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: var(--nm-space-s);
		padding-block: 0.9rem;
	}

	.nemesis-log tbody tr + tr {
		border-top: var(--nm-rule-light);
	}

	.nemesis-log td {
		display: block;
		padding: 0;
		border: 0;
	}

	.nemesis-log td.nemesis-log__jahr {
		grid-column: 2;
		grid-row: 1;
		width: auto;
		text-align: right;
	}

	.nemesis-log :is(.nemesis-log__projekt, .nemesis-log__auftraggeber, .nemesis-log__leistung) {
		grid-column: 1;
	}

	.nemesis-log :is(.nemesis-log__auftraggeber, .nemesis-log__leistung) {
		font-size: 1rem;
		color: var(--nm-color-graphite);
	}
}

/* ---------------------------------------------------------------------------
 * Ablauf – a navy field; the steps of a job as a real ordered list, numbered because they are a sequence.
 * Each step stands under its own rule; the number in NEMESIS cyan (cyan only ever on navy).
 * ------------------------------------------------------------------------ */
.nm-ablauf {
	color: var(--nm-color-base);
	background: var(--nm-color-dark);
}

.nm-ablauf :is(h2, .nm-lead, .nm-head__name) {
	color: var(--nm-color-base);
}

.nm-ablauf .nm-head::before {
	background: color-mix(in srgb, var(--nm-color-base) 45%, transparent);
}

.nm-ablauf .nm-head__fact {
	color: var(--nm-color-rule);
}

.nm-steps.wp-block-list {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--nm-space-xl) var(--nm-space-gap);
	margin: clamp(3rem, 6vw, 5.5rem) 0 0 !important;
	padding: 0 !important;
	list-style: none;
	counter-reset: nm-step;
}

.nm-steps > li {
	margin: 0;
	padding-top: 1rem;
	border-top: var(--nm-rule-on-dark);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--nm-color-rule);
	counter-increment: nm-step;
}

.nm-steps > li::before {
	content: counter(nm-step);
	display: block;
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
	font-size: var(--nm-step-title);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	color: var(--nm-color-brand);
}

.nm-steps > li strong {
	display: block;
	margin-bottom: 0.4rem;
	font-size: var(--nm-step-lead);
	font-weight: 600;
	line-height: 1.2;
	color: var(--nm-color-base);
}

@media (max-width: 1024px) {
	.nm-steps.wp-block-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	.nm-steps.wp-block-list {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.nm-steps > li {
		display: grid;
		grid-template-columns: 3rem minmax(0, 1fr);
		padding-block: 1rem 1.5rem;
	}

	.nm-steps > li::before {
		grid-row: 1 / span 2;
		margin: 0;
	}
}

/* ---------------------------------------------------------------------------
 * Normen und Nachweise – the layer table draws the coating system it describes: each row carries its layer as a
 * bar in columns 1–4 (top coat to steel), the text runs on the axis. The blasted surface shows its profile.
 * ------------------------------------------------------------------------ */
.nm-normen__body {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--nm-space-gap);
	padding-top: clamp(3rem, 6vw, 5.5rem);
}

/* The figure is on the page grid: the table spans it, the caption sits under the drawing. */
.nm-layers.wp-block-table {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-column: 1 / -1;
	column-gap: var(--nm-space-gap);
	margin: 0 !important;
	overflow: visible;
}

.nm-layers.wp-block-table > table {
	grid-column: 1 / -1;
}

/* Core draws a 3px line under every table head – here the head has its own ink rule under the text columns. */
.nm-layers.wp-block-table :is(table, thead, tbody) {
	display: block;
	width: 100%;
	border: 0;
}

.nm-layers thead tr {
	min-height: 0;
}

/* The page grid without column gaps, so the row rules run unbroken from the axis to the margin: each track is the
   page's columns plus their gaps (--nm-col = one page column); the cell's right padding stands in for the gap. */
.nm-layers tr {
	--nm-layer: transparent;
	--nm-col: calc((100% - 11 * var(--nm-space-gap)) / 12);
	display: grid;
	grid-template-columns:
		calc(var(--nm-col) * 4 + var(--nm-space-gap) * 4)
		calc(var(--nm-col) * 2 + var(--nm-space-gap) * 2)
		calc(var(--nm-col) * 4 + var(--nm-space-gap) * 4)
		minmax(0, 1fr);
	min-height: 4.25rem;
}

.nm-layers.wp-block-table :is(th, td) {
	display: block;
	padding: 0.85rem var(--nm-space-gap) 0.85rem 0;
	border: 0;
	border-top: var(--nm-rule-light);
	font-size: 1rem;
	line-height: 1.45;
	text-align: left;
	vertical-align: baseline;
}

.nm-layers.wp-block-table th {
	padding-block: 0 0.75rem;
	border-top: 0;
	border-bottom: var(--nm-rule);
	font-size: var(--nm-step-small);
	font-weight: 500;
	color: var(--nm-color-graphite);
}

.nm-layers :is(th, td):nth-child(1) {
	grid-column: 2;
	font-weight: 600;
}

.nm-layers :is(th, td):nth-child(2) {
	grid-column: 3;
}

.nm-layers :is(th, td):nth-child(3) {
	grid-column: 4;
	padding-right: 0;
	font-variant-numeric: tabular-nums;
}

.nm-layers.wp-block-table tbody tr:last-child > td {
	border-bottom: var(--nm-rule-light);
}

/* The drawing: one bar per layer, stacked without gaps, ending one gap before the axis. */
.nm-layers tbody tr::before,
.nm-layers tbody tr::after {
	content: "";
	grid-row: 1;
	grid-column: 1;
	margin-right: var(--nm-space-gap);
	background: var(--nm-layer);
}

.nm-layers tbody tr::after {
	content: none;
}

.nm-layers tbody tr:nth-child(1) {
	--nm-layer: var(--nm-color-dark);
}

.nm-layers tbody tr:nth-child(2) {
	--nm-layer: var(--nm-color-rule);
}

.nm-layers tbody tr:nth-child(3) {
	--nm-layer: var(--nm-color-oxide);
}

/* Blasted surface: primer fills the profile, the steel's peaks rise into it. */
.nm-layers tbody tr:nth-child(4) {
	--nm-layer: var(--nm-color-oxide);
}

.nm-layers tbody tr:nth-child(4)::after {
	content: "";
	background: var(--nm-color-graphite);
	clip-path: polygon(0% 100%, 0% 62%, 2.08% 8%, 4.17% 62%, 6.25% 8%, 8.33% 62%, 10.42% 8%, 12.5% 62%, 14.58% 8%, 16.67% 62%, 18.75% 8%, 20.83% 62%, 22.92% 8%, 25% 62%, 27.08% 8%, 29.17% 62%, 31.25% 8%, 33.33% 62%, 35.42% 8%, 37.5% 62%, 39.58% 8%, 41.67% 62%, 43.75% 8%, 45.83% 62%, 47.92% 8%, 50% 62%, 52.08% 8%, 54.17% 62%, 56.25% 8%, 58.33% 62%, 60.42% 8%, 62.5% 62%, 64.58% 8%, 66.67% 62%, 68.75% 8%, 70.83% 62%, 72.92% 8%, 75% 62%, 77.08% 8%, 79.17% 62%, 81.25% 8%, 83.33% 62%, 85.42% 8%, 87.5% 62%, 89.58% 8%, 91.67% 62%, 93.75% 8%, 95.83% 62%, 97.92% 8%, 100% 62%, 100% 100%);
}

.nm-layers tbody tr:nth-child(5) {
	--nm-layer: var(--nm-color-graphite);
	min-height: 6.5rem;
}

.nm-layers .wp-element-caption {
	grid-column: 1 / span 4;
}

@media (max-width: 781px) {
	.nm-layers thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	/* The rule and the spacing belong to the text, so the layer bars stay stacked without gaps. */
	.nm-layers tr {
		grid-template-columns: 4.5rem minmax(0, 1fr);
		grid-template-rows: auto auto 1fr;
	}

	.nm-layers tbody tr::before,
	.nm-layers tbody tr::after {
		grid-row: 1 / -1;
		grid-column: 1;
		margin-right: 0;
	}

	.nm-layers.wp-block-table :is(th, td):nth-child(n) {
		grid-column: 2;
		padding: 0.15rem 0 0 var(--nm-space-s);
		border: 0;
	}

	.nm-layers.wp-block-table td:nth-child(1) {
		padding-top: 0.85rem;
		border-top: var(--nm-rule-light);
	}

	.nm-layers.wp-block-table td:last-child {
		padding-bottom: 0.85rem;
	}

	.nm-layers.wp-block-table tbody tr:last-child > td {
		border-bottom: 0;
	}

	.nm-layers .wp-element-caption {
		grid-column: 1 / -1;
	}
}

/* ---------------------------------------------------------------------------
 * Karriere – a light grey field: heading on the margin, text and action on the axis, fields as a ruled list
 * ------------------------------------------------------------------------ */
.nm-jobs {
	background: var(--nm-color-surface);
}

.nm-jobs__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--nm-space-gap);
}

.nm-jobs__title.wp-block-heading {
	grid-column: 1 / span 9;
	max-width: 18ch;
	margin: 0 0 clamp(2rem, 4vw, 3.5rem);
}

.nm-jobs__text {
	grid-column: 5 / span 4;
}

:is(.nm-jobs__text, .nm-jobs__text > .wp-block-group__inner-container) > * {
	max-width: 40ch;
	margin: 0 0 var(--nm-space-l);
}

.nm-jobs__fields.wp-block-list {
	grid-column: 10 / -1;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
	border-bottom: var(--nm-rule-light);
}

.nm-jobs__fields > li {
	margin: 0;
	padding-block: 0.7rem;
	border-top: var(--nm-rule-light);
	font-weight: 600;
}

.nm-jobs__fields > li:first-child {
	border-top: var(--nm-rule);
}

@media (max-width: 1024px) {
	.nm-jobs__text {
		grid-column: 1 / span 6;
	}

	.nm-jobs__fields {
		grid-column: 8 / -1;
	}
}

@media (max-width: 781px) {
	.nm-jobs__text,
	.nm-jobs__fields {
		grid-column: 1 / -1;
	}
}

/* ---------------------------------------------------------------------------
 * Eckdaten (pattern nemesis/trust-bar) – four facts on the light surface
 * ------------------------------------------------------------------------ */
.nm-trust.nm-section {
	padding-block: var(--nm-space-xl);
	background: var(--nm-color-surface);
}

.nm-keyfacts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--nm-space-m) var(--nm-space-gap);
}

:is(.nm-keyfact, .nm-keyfact > .wp-block-group__inner-container) > * {
	margin: 0;
}

.nm-keyfact__value {
	margin-top: var(--nm-space-2xs) !important;
	font-weight: 600;
	line-height: 1.4;
}

@media (max-width: 1024px) {
	.nm-keyfacts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.nm-keyfacts {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------------------
 * Kontakt page – named contact person, direct lines, project inquiry form
 * ------------------------------------------------------------------------ */
.nm-kontakt__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--nm-space-gap);
	align-items: start;
}

.nm-kontakt__info {
	grid-column: 1 / span 5;
}

.nm-kontakt__form {
	grid-column: 7 / -1;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	background: var(--nm-color-surface);
}

:is(.nm-kontakt__info, .nm-kontakt__info > .wp-block-group__inner-container) > * {
	margin: 0;
}

.nm-kontakt__title.wp-block-heading {
	margin-bottom: var(--nm-space-s);
}

:is(.nm-kontakt__info, .nm-kontakt__info > .wp-block-group__inner-container) > p {
	margin-bottom: var(--nm-space-l);
	color: var(--nm-color-dark);
}

.nm-person {
	display: grid;
	grid-template-columns: 7.5rem minmax(0, 1fr);
	column-gap: var(--nm-space-m);
	align-items: end;
	padding-block: var(--nm-space-m);
}

:is(.nm-person, .nm-person > .wp-block-group__inner-container, .nm-person__body, .nm-person__body > .wp-block-group__inner-container) > * {
	margin: 0;
}

.nm-person__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.nm-person__name {
	margin-top: var(--nm-space-2xs) !important;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.25;
}

.nm-person__role {
	color: var(--nm-color-dark);
}

.nm-label {
	font-size: var(--nm-step-small);
	font-weight: 500;
	color: var(--nm-color-graphite);
}

.nm-direct {
	container-type: inline-size;
	padding-block: var(--nm-space-s);
}

:is(.nm-direct, .nm-direct > .wp-block-group__inner-container) > * {
	margin: 0;
}

/* Fit: full width of the line divided by the text width in em (--nm-fit-em from inc/fit.php),
   capped by the token. One line, never overflowing, never hyphenated or broken mid-word. */
.nm-direct__value {
	margin-top: var(--nm-space-2xs) !important;
	font-family: var(--nm-font-heading);
	font-stretch: var(--nm-stretch-heading);
	font-weight: var(--nm-weight-heading);
	font-size: min(var(--nm-text-contact), calc(100cqw / var(--nm-fit-em, 18)));
	line-height: 1.2;
	letter-spacing: -0.01em;
	white-space: nowrap;
	hyphens: none;
}

.nm-direct__value a {
	color: var(--nm-color-ink);
	text-decoration: none;
}

.nm-direct__value a:hover {
	color: var(--nm-color-accent);
	text-decoration: underline;
}

.nm-kontakt__address-text {
	margin-top: var(--nm-space-2xs) !important;
}

:is(.nm-kontakt__form, .nm-kontakt__form > .wp-block-group__inner-container) > :is(h3, p) {
	margin: 0 0 var(--nm-space-s);
}

@media (max-width: 781px) {
	.nm-kontakt__info,
	.nm-kontakt__form {
		grid-column: 1 / -1;
	}

	.nm-kontakt__form {
		margin-top: var(--nm-space-l);
	}
}

/* Fluent Forms – square, ink-ruled fields (the one place lines belong), via its own variables. */
.fluentform {
	--fluentform-primary: var(--nm-color-ink);
	--fluentform-secondary: var(--nm-color-ink);
	--fluentform-border-color: var(--nm-color-ink);
	--fluentform-border-radius: 0;
	--fluentform-danger: var(--nm-color-error);
}

.fluentform .ff-el-input--label label {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--nm-color-ink);
}

.fluentform .ff-el-group .ff-el-form-control {
	padding: 0.7em 0.8em;
	font: inherit;
	font-stretch: var(--nm-stretch-body);
	line-height: 1.4;
	color: var(--nm-color-ink);
	background: var(--nm-color-base);
	border: var(--nm-rule);
}

.fluentform .ff-el-group .ff-el-form-control:focus {
	border-color: var(--nm-color-ink);
	outline: 2px solid var(--nm-color-accent);
	outline-offset: 0;
	box-shadow: none; /* taste-skill-ignore: removes the shadow */
}

.fluentform .ff-btn-submit.ff-btn {
	padding: 0.85em 1.4em;
	font-family: var(--nm-font-body);
	font-size: 1rem;
	font-weight: 600;
	color: var(--nm-color-base) !important;
	background: var(--nm-color-dark) !important;
	border: 0;
}

.fluentform .ff-btn-submit.ff-btn:is(:hover, :focus-visible) {
	background: var(--nm-color-accent) !important;
	opacity: 1;
}

.nm-form-note {
	margin: 0;
	font-size: 0.875rem;
	color: var(--nm-color-graphite);
}

/* ---------------------------------------------------------------------------
 * Projektanfrage – the request band before the footer: a turquoise field, navy type (5.4:1), navy button
 * ------------------------------------------------------------------------ */
.nm-cta.nm-section {
	padding-block: clamp(3.5rem, 2rem + 5vw, 6.5rem);
	color: var(--nm-color-dark);
	background: var(--nm-color-brand);
}

.nm-cta__inner {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--nm-space-gap);
	row-gap: var(--nm-space-l);
	align-items: start;
}

:is(.nm-cta__inner, .nm-cta__inner > .wp-block-group__inner-container) > * {
	margin: 0;
}

.nm-cta__title.wp-block-heading {
	grid-column: 1 / span 6;
	max-width: 14ch;
	color: var(--nm-color-dark);
}

.nm-cta__body {
	grid-column: 7 / -1;
}

:is(.nm-cta__body, .nm-cta__body > .wp-block-group__inner-container) > * {
	max-width: 46ch;
	margin: 0 0 var(--nm-space-l);
}

.nm-cta .nm-lead {
	color: var(--nm-color-dark);
}

.nm-cta__actions.wp-block-buttons {
	margin-bottom: var(--nm-space-m);
}

.nm-cta .wp-block-button__link.wp-element-button:is(:hover, :focus-visible) {
	color: var(--nm-color-dark);
	background: var(--nm-color-base);
}

.nm-cta__phone {
	font-size: var(--nm-step-lead);
	font-weight: 700;
	line-height: 1.15;
}

.nm-cta__phone a {
	color: var(--nm-color-dark);
	text-decoration: none;
}

.nm-cta__phone a:hover {
	color: var(--nm-color-dark);
	text-decoration: underline;
}

.nm-cta :focus-visible {
	outline-color: var(--nm-color-dark);
}

@media (max-width: 781px) {
	.nm-cta__title.wp-block-heading,
	.nm-cta__body {
		grid-column: 1 / -1;
	}
}

/* ---------------------------------------------------------------------------
 * Footer – on navy: the lockup with its three-line tagline, the facts in four ruled columns, the GmbH line
 * ------------------------------------------------------------------------ */
.nm-footer {
	padding-top: clamp(3.5rem, 7vw, 6rem);
	font-size: 1rem;
	line-height: 1.55;
	color: var(--nm-color-base);
	background: var(--nm-color-dark);
}

.nm-footer__brand {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--nm-space-l) clamp(1.5rem, 3vw, 3rem);
	padding-bottom: clamp(3rem, 6vw, 5rem);
}

.nm-footer__logo {
	display: block;
	color: var(--nm-color-base);
}

.nm-footer__logo .nm-logo {
	height: clamp(4rem, 2.5rem + 3vw, 6rem);
}

/* As in the logo concept: a rule, then the three areas in spaced capitals. */
.nm-footer__tagline {
	display: grid;
	gap: 0.3em;
	margin: 0;
	padding-left: clamp(1.5rem, 3vw, 3rem);
	border-left: var(--nm-rule-on-dark);
	font-size: clamp(0.8125rem, 0.7rem + 0.35vw, 1rem);
	line-height: 1.35;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--nm-color-base);
}

.nm-footer__facts {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--nm-space-l) var(--nm-space-gap);
}

.nm-footer__col {
	grid-column: span 3;
}

/* Column labels stand on a rule, like the running heads of the sections above. */
.nm-footer__label {
	margin: 0 0 var(--nm-space-s);
	padding-top: 0.75rem;
	border-top: var(--nm-rule-on-dark);
	font-size: var(--nm-step-small);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--nm-color-rule);
}

.nm-footer__col p {
	margin: 0 0 var(--nm-space-s);
}

.nm-footer__col .nm-footer__list + p {
	margin-top: var(--nm-space-s);
	font-size: var(--nm-step-small);
	color: var(--nm-color-rule);
}

.nm-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nm-footer__list li {
	margin: 0 0 0.2rem;
}

/* No accent on navy (contrast) – hover = underline. */
.nm-footer a {
	color: var(--nm-color-base);
	text-decoration: none;
}

.nm-footer a:hover {
	color: var(--nm-color-base);
	text-decoration: underline;
}

.nm-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nm-space-2xs) var(--nm-space-l);
	justify-content: space-between;
	position: relative;
	margin-top: var(--nm-space-2xl) !important;
	padding-block: var(--nm-space-s) var(--nm-space-l);
	font-size: var(--nm-step-small);
	color: var(--nm-color-rule);
}

/* The rule sits between the page margins, like every other rule (the wrap's padding is the margin). */
.nm-footer__legal::before {
	content: "";
	position: absolute;
	inset: 0 var(--nm-space-margin) auto;
	border-top: var(--nm-rule-on-dark);
}

.nm-footer__legal p {
	margin: 0;
}

.nm-footer__legal p:last-child {
	margin-left: auto;
}

.nm-footer .nm-footer__top {
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

@media (max-width: 1024px) {
	.nm-footer__col {
		grid-column: span 6;
	}
}

@media (max-width: 599px) {
	.nm-footer__col {
		grid-column: 1 / -1;
	}

	.nm-footer__tagline {
		padding-left: 0;
		padding-top: var(--nm-space-s);
		border-left: 0;
		border-top: var(--nm-rule-on-dark);
	}

	.nm-footer__legal {
		flex-direction: column;
	}

	.nm-footer__legal p:last-child {
		margin-left: 0;
	}
}

/* ---------------------------------------------------------------------------
 * Text pages (Impressum, Datenschutz – Kadence "narrow"): section headings at h4 size, legal text is not a brochure
 * ------------------------------------------------------------------------ */
.content-width-narrow .single-content > h2 {
	margin-top: var(--nm-space-l);
	margin-bottom: var(--nm-space-xs);
	font-size: 1.25rem;
	line-height: 1.3;
	letter-spacing: 0;
}

.nm-caption {
	font-size: var(--nm-step-small);
	line-height: 1.4;
	color: var(--nm-color-graphite);
}

/* ---------------------------------------------------------------------------
 * Karriere – plain page section (no pattern yet): text at reading width
 * ------------------------------------------------------------------------ */
.nm-karriere__body {
	max-width: 46rem;
}

.nm-sheet-head {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--nm-space-gap);
	row-gap: var(--nm-space-s);
	align-items: end;
	margin-bottom: var(--nm-space-xl);
}

:is(.nm-sheet-head, .nm-sheet-head > .wp-block-group__inner-container) > * {
	grid-column: 1 / span 7;
	margin: 0;
}

:is(.nm-sheet-head, .nm-sheet-head > .wp-block-group__inner-container) > p {
	grid-column: 8 / -1;
	max-width: 46ch;
}

@media (max-width: 781px) {
	:is(.nm-sheet-head, .nm-sheet-head > .wp-block-group__inner-container) > :is(h1, h2, p) {
		grid-column: 1 / -1;
	}
}

/* ---------------------------------------------------------------------------
 * Single Referenz (markup from mu-plugin nemesis-core) – facts as label / value pairs
 * ------------------------------------------------------------------------ */
.nemesis-facts {
	display: grid;
	grid-template-columns: 8rem minmax(0, 1fr);
	gap: var(--nm-space-xs) var(--nm-space-s);
	margin: 0 0 var(--nm-space-l);
	padding: var(--nm-space-m);
	background: var(--nm-color-surface);
}

.nemesis-facts__item {
	display: contents;
}

.nemesis-facts :is(dt, dd) {
	margin: 0;
}

.nemesis-facts dd {
	font-weight: 600;
}

.nemesis-gallery {
	margin-top: var(--nm-space-l);
}

/* ---------------------------------------------------------------------------
 * Motion (assets/js/site.js). Content is never held back unless the script is there to release it;
 * the hero title is held a moment while its size is fitted (released by a fallback timer if the script fails).
 * ------------------------------------------------------------------------ */
@keyframes nm-settle {
	from {
		transform: scale(1.07);
	}

	to {
		transform: none;
	}
}

@keyframes nm-fade-in {
	from {
		opacity: 0;
	}
}

@keyframes nm-release {
	to {
		visibility: visible;
	}
}

.nm-js .nm-fit:not(.is-fitted) {
	visibility: hidden;
	animation: nm-release 0s 1.5s forwards;
}

.nm-line {
	display: block;
	overflow: hidden;
	/* Room for ascenders and umlauts inside the mask. */
	padding-block: 0.12em 0.04em;
	margin-block: -0.12em -0.04em;
}

.nm-line > span {
	display: block;
}

@media (prefers-reduced-motion: no-preference) {
	.nm-hero .wp-block-cover__image-background {
		animation: nm-settle 2.6s var(--nm-ease-out) both;
	}

	.nm-js .nm-fit.is-fitted:not(.is-in) .nm-line > span {
		transform: translateY(108%);
	}

	.nm-js .nm-fit.is-in .nm-line > span {
		transition: transform 0.9s var(--nm-ease-out);
	}

	.nm-js .nm-fit.is-in .nm-line + .nm-line > span {
		transition-delay: 0.11s;
	}

	.nm-js .nm-rise {
		opacity: 0;
		transform: translateY(1.5rem);
	}

	.nm-js .nm-rise.is-in {
		opacity: 1;
		transform: none;
		transition: opacity 0.7s linear var(--nm-delay, 0s), transform 0.9s var(--nm-ease-out) var(--nm-delay, 0s);
	}

	/* A running head enters in place, and its rule is drawn in from the left. */
	.nm-js .nm-head.nm-rise {
		transform: none;
	}

	.nm-js .nm-head.nm-rise::before {
		transform: scaleX(0);
	}

	.nm-js .nm-head.nm-rise.is-in::before {
		transform: none;
		transition: transform 1.1s var(--nm-ease-out) var(--nm-delay, 0s);
	}
}