/*
 * emo2026, content templates (page.php, page-die-firma.php,
 * page-kontakt.php, single.php, archive.php).
 *
 * Apple's editorial pattern: a centered, narrow column (~720 to 820px)
 * sitting in lots of whitespace; a tight type scale that lands a
 * single very-large display headline at the top, then an 18/21px
 * body running below it. Hub pages append a tile launcher under
 * the headline; blog pages add date metadata + a featured-tile
 * archive grid.
 *
 * Tokens come from tokens.css. Page-local custom properties at the
 * top capture geometry that's truly content-only (column widths,
 * hero padding, tile gaps), none belong in the global vocabulary.
 *
 * Plain CSS, no preprocessor, no nesting. Targets stable Firefox
 * (the user's debug browser), Chromium, Safari.
 */

:root {
	/* Apple-newsroom column. 720 to 820px reads comfortably at 18/21px. */
	--content-column-narrow:   720px;   /* legal pages, blog body */
	--content-column-wide:     820px;   /* hub headlines, kontakt */
	/* Follows the shared container (tokens.css), which now scales with the
	   viewport instead of sitting at a flat 1200px. */
	--content-column-archive: var(--layout-content-max-width);

	/* Vertical rhythm inside the editorial hero block. */
	--content-hero-pad-top:    var(--space-12);  /* 128px */
	--content-hero-pad-bottom: var(--space-10);  /* 80px  */

	/* Article body padding. Footer subsystem owns its own spacing. */
	--content-body-pad-bottom: var(--space-12);

	/* Side gutter inside the column on phones, the column is already
	   narrow, but it must never butt the viewport edge. */
	--content-gutter:          var(--layout-gutter);

	/* Tile geometry for hub launcher + archive grid. */
	--content-tile-gap:        var(--space-6);   /* 28px */
	--content-tile-pad:        var(--space-7);   /* 40px */
	--content-tile-radius:     var(--radius-panel);

	/* Featured archive tile height, Apple's newsroom is roughly 60vh. */
	/* Bounded, not raw vh. A naked 60vh means the tile grows without limit on a
	   short-and-wide window or when the page is zoomed out (at 20% zoom the
	   viewport is thousands of px tall, and the tile became a ~2900px slab).
	   clamp() keeps it a hero, never a wall. */
	--content-featured-min-height: clamp(320px, 55vh, 560px);
}

/* ============================================================
 * Shared page shell. Every content template wraps in
 * .site-main.content (the .site-main class is set by the
 * <main> element so chrome/header.css can target it).
 * ============================================================ */

.site-main.content {
	background-color: var(--color-bg-base);
	color: var(--color-text-primary);
	font-family: var(--font-sans);
	/* The hero owns its own top padding; no extra here. */
	padding-bottom: var(--content-body-pad-bottom);
}

/* ============================================================
 * Editorial hero, large display headline, optional eyebrow
 * and subhead. Centered, narrow column, generous whitespace.
 * Used by page.php, page-die-firma.php, page-kontakt.php,
 * single.php (with a date row), and archive.php (header).
 * ============================================================ */

.content-hero {
	max-width: var(--content-column-wide);
	margin: 0 auto;
	padding: var(--content-hero-pad-top) var(--content-gutter) var(--content-hero-pad-bottom);
	text-align: center;
}

.content-hero--left {
	text-align: left;
}

/* The page's own brand icon, above the eyebrow. One per concept page and
 * the same mark the /die-firma/ tile pointing here wears, so the tile and
 * the page it opens read as the same place.
 *
 * Only the box and its margin belong here; size, weight and ink come from
 * .emo-icon--lg and the mint default in icons.css, which is what keeps
 * the icons one system rather than a per-page treatment. Deliberately
 * mint and deliberately quiet: the H1 underneath already names the page,
 * so the mark is decoration, and .emo-icon--accent is one class away if a
 * hero ever needs it to carry more weight. */
.content-hero__icon {
	margin: 0 auto var(--space-4);
}

.content-hero--left .content-hero__icon {
	margin-inline-start: 0;
}

.content-hero__eyebrow {
	margin: 0 0 var(--space-4);
	font-family: var(--font-sans);
	font-size: var(--font-size-18);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	/* Brand green, sitewide (owner 2026-08-31): every hero eyebrow carries
	 * EMO CORE; only the shop hero did before and the rest sat grey. */
	color: var(--color-accent);
}

/* The eyebrow doubles as a wayfinding link on single posts (Blog, back to
   the archive); green like the label, darkening like every other link. */
.content-hero__eyebrow a {
	color: inherit;
	text-decoration: none;
}

.content-hero__eyebrow a:hover,
.content-hero__eyebrow a:focus-visible {
	color: var(--color-link-hover);
}

.content-hero__eyebrow a:active {
	opacity: 0.55;
	transition: opacity var(--motion-duration-press) var(--motion-ease-standard);
}

.content-hero__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--font-size-56);
	font-weight: 600;
	line-height: var(--line-height-display);
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-text-primary);
	/* Display titles never hyphenate mid-word, fit-titles.js scales
	   long ones down to a single line instead (no text-wrap: balance,
	   it fights the one-line budget). break-word is the absolute last
	   resort against clipping. */
	hyphens: manual;
	overflow-wrap: break-word;
}

.content-hero__subhead {
	margin: var(--space-6) auto 0;
	max-width: 32em;
	font-family: var(--font-sans);
	font-size: var(--font-size-28);
	font-weight: 400;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-base);
	color: var(--color-text-secondary);
}

.content-hero--left .content-hero__subhead {
	margin-left: 0;
	margin-right: 0;
}

/* Date / category meta row used on single.php under the title. */
.content-hero__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: var(--space-3) var(--space-5);
	margin-top: var(--space-6);
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	font-weight: 400;
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.content-hero--left .content-hero__meta {
	justify-content: flex-start;
}

.content-hero__meta-item {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-2);
}

.content-hero__meta a {
	color: inherit;
	text-decoration: none;
}

.content-hero__meta a:hover,
.content-hero__meta a:focus-visible {
	color: var(--color-text-primary);
}

/* ============================================================
 * .content-prose, typography for editor-authored body text.
 *
 * Used by page.php, single.php and anywhere we render
 * the_content() inside the narrow column. Provides safe
 * defaults for arbitrary headings, paragraphs, lists,
 * blockquotes, hr, images, links, inline emphasis, code.
 * ============================================================ */

.content-prose {
	max-width: var(--content-column-narrow);
	margin: 0 auto;
	padding: 0 var(--content-gutter);
	font-family: var(--font-sans);
	font-size: var(--font-size-21);
	line-height: var(--line-height-loose);
	letter-spacing: var(--letter-spacing-base);
	color: var(--color-text-primary);
}

.content-prose > * + * {
	/* Default vertical rhythm between sibling blocks. Specific
	   selectors below override where a tighter or looser gap reads
	   better (h2 against following p, hr around blocks, etc.). */
	margin-top: var(--space-6);
}

/* Reset without weight: as ".content-prose p" (0,1,1) it outranked the
   rhythm rule above (0,1,0), and paragraphs in posts sat flush. */
:where(.content-prose) p {
	margin: 0;
}

.content-prose h2,
.content-prose h3,
.content-prose h4 {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-text-primary);
	margin: 0;
}

.content-prose > h2 { margin-top: var(--space-10); font-size: var(--font-size-40); }
.content-prose > h3 { margin-top: var(--space-9);  font-size: var(--font-size-28); }
.content-prose > h4 { margin-top: var(--space-8);  font-size: var(--font-size-21); letter-spacing: var(--letter-spacing-base); }

.content-prose > :is(h2, h3, h4) + :is(p, ul, ol) {
	/* Headings already create a strong break, tighten the gap to
	   the immediately following paragraph for a tighter pair. */
	margin-top: var(--space-4);
}

.content-prose a {
	color: var(--color-link);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color var(--motion-duration-fast) var(--motion-ease-standard),
		color var(--motion-duration-fast) var(--motion-ease-standard);
}

.content-prose a:hover,
.content-prose a:focus-visible {
	color: var(--color-link);
	border-bottom-color: var(--color-link);
}

.content-prose a:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 4px;
	border-radius: var(--radius-sm);
}

.content-prose strong {
	font-weight: 600;
	color: var(--color-text-primary);
}

.content-prose em {
	font-style: italic;
}

/* Reset without weight, like the p reset above: as ".content-prose ul"
   (0,1,1) it outranked the rhythm rule, and a list sat flush under the
   heading or paragraph before it (Lea, 2026-11-05). */
:where(.content-prose) :is(ul, ol) {
	margin: 0;
	padding-left: 1.5em;
}

.content-prose li {
	margin-top: var(--space-2);
}

.content-prose li:first-child {
	margin-top: 0;
}

.content-prose blockquote {
	margin: 0;
	padding: var(--space-2) 0 var(--space-2) var(--space-6);
	border-left: 3px solid var(--color-border-hairline);
	font-size: var(--font-size-28);
	font-weight: 400;
	line-height: var(--line-height-base);
	letter-spacing: var(--letter-spacing-base);
	color: var(--color-text-secondary);
	font-style: italic;
}

.content-prose blockquote p {
	margin-top: var(--space-3);
}

.content-prose blockquote p:first-child {
	margin-top: 0;
}

.content-prose hr {
	margin: var(--space-10) 0;
	border: 0;
	border-top: 1px solid var(--color-border-hairline);
}

.content-prose img,
.content-prose figure {
	display: block;
	max-width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}

.content-prose figure {
	margin-top: var(--space-8);
	margin-bottom: var(--space-8);
}

.content-prose figcaption {
	margin-top: var(--space-3);
	font-size: var(--font-size-14);
	color: var(--color-text-muted);
	text-align: center;
}

.content-prose code,
.content-prose pre {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.92em;
}

.content-prose code {
	padding: 0.1em 0.35em;
	background-color: var(--color-bg-elevated);
	border-radius: var(--radius-sm);
	color: var(--color-text-primary);
}

.content-prose pre {
	margin: 0;
	padding: var(--space-5);
	background-color: var(--color-bg-elevated);
	border-radius: var(--radius-block);
	overflow-x: auto;
	line-height: var(--line-height-base);
	font-size: var(--font-size-14);
}

.content-prose pre code {
	padding: 0;
	background: transparent;
	border-radius: 0;
}

.content-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--font-size-18);
	line-height: var(--line-height-base);
}

.content-prose th,
.content-prose td {
	padding: var(--space-3) var(--space-4);
	text-align: left;
	border-bottom: 1px solid var(--color-border-hairline);
}

.content-prose th {
	font-weight: 600;
	color: var(--color-text-primary);
	border-bottom-width: 2px;
}

/* WordPress alignment helpers, mostly inert in a narrow column,
   but we still honor them so editor-authored content doesn't break. */
.content-prose .alignleft  { float: left;  margin-right: var(--space-5); }
.content-prose .alignright { float: right; margin-left:  var(--space-5); }
.content-prose .aligncenter { margin-left: auto; margin-right: auto; }
.content-prose .alignwide,
.content-prose .alignfull { margin-left: 0; margin-right: 0; }

/* ============================================================
 * Hub launcher, sub-page tile grid (page-die-firma.php).
 * Apple's "category index" pattern: a clean grid of tiles
 * each with subtitle/category, headline, short description,
 * and a chevron link.
 * ============================================================ */

.content-launcher {
	max-width: var(--content-column-archive);
	margin: var(--space-9) auto 0;
	padding: 0 var(--content-gutter);
}

.content-launcher__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--content-tile-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.content-launcher__item {
	display: flex;
}

.content-launcher__tile {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	width: 100%;
	padding: var(--content-tile-pad);
	background-color: var(--color-bg-elevated);
	border-radius: var(--content-tile-radius);
	color: var(--color-text-primary);
	text-decoration: none;
	transition: transform var(--motion-duration-base) var(--motion-ease-standard),
		box-shadow var(--motion-duration-base) var(--motion-ease-standard);
}

.content-launcher__tile:hover,
.content-launcher__tile:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
	color: var(--color-text-primary);
}

.content-launcher__tile:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 4px;
}

/* The tile's concept mark. A wrapper rather than a class on the SVG
 * because the slot has to exist even when the tile has no icon: the
 * studio drew one Team mark and two tiles here are Team (Management Team
 * and Team), so the leadership tile stays deliberately unmarked rather
 * than repeating its neighbour. Without a reserved slot that one tile's
 * copy would start 56px higher than the five beside it and the grid would
 * read as broken. min-height, not height, so a future taller mark still
 * fits. */
.content-launcher__icon {
	display: block;
	min-height: 3.5rem;
}

.content-launcher__eyebrow {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-text-secondary);
}

.content-launcher__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--font-size-28);
	font-weight: 600;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-text-primary);
}

.content-launcher__desc {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--font-size-18);
	line-height: var(--line-height-base);
	color: var(--color-text-secondary);
}

.content-launcher__link {
	margin-top: auto;
	padding-top: var(--space-3);
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-2);
	font-family: var(--font-sans);
	font-size: var(--font-size-18);
	font-weight: 400;
	color: var(--color-link);
}

.content-launcher__chevron {
	display: inline-block;
	transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.content-launcher__tile:hover .content-launcher__chevron,
.content-launcher__tile:focus-visible .content-launcher__chevron {
	transform: translateX(4px);
}

/* ============================================================
 * Kontakt, two-column layout (info + form).
 * ============================================================ */

.content-kontakt {
	max-width: var(--content-column-archive);
	margin: var(--space-9) auto 0;
	padding: 0 var(--content-gutter);
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: var(--space-10);
	align-items: start;
}

.content-kontakt__info {
	font-family: var(--font-sans);
	font-size: var(--font-size-18);
	line-height: var(--line-height-loose);
	color: var(--color-text-primary);
}

.content-kontakt__company {
	margin: 0 0 var(--space-3);
	font-family: var(--font-display);
	font-size: var(--font-size-28);
	font-weight: 600;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
}

/* Two offices stack in the info column; the second gets clear air. */
.content-kontakt__office + .content-kontakt__office {
	margin-top: var(--space-9);
	padding-top: var(--space-8);
	border-top: 1px solid var(--color-border-hairline);
}

/* The live page pairs the DE box heading with a second line
   ("Unternehmenssitz Deutschland / Sales Kontakt"). */
.content-kontakt__company-sub {
	display: block;
	font-size: var(--font-size-18);
	font-weight: 500;
	color: var(--color-text-secondary);
	letter-spacing: var(--letter-spacing-base);
}

.content-kontakt__block {
	margin-top: var(--space-7);
}

.content-kontakt__block:first-child,
.content-kontakt__block:first-of-type {
	margin-top: 0;
}

.content-kontakt__block-label {
	margin: 0 0 var(--space-2);
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-text-secondary);
}

.content-kontakt__block p,
.content-kontakt__block address {
	margin: 0;
	font-style: normal;
	font-size: var(--font-size-18);
	line-height: var(--line-height-loose);
	color: var(--color-text-primary);
}

.content-kontakt__block a {
	color: var(--color-link);
	text-decoration: none;
}

.content-kontakt__block a:hover,
.content-kontakt__block a:focus-visible {
	text-decoration: underline;
}

/* Form column */
.content-kontakt__form {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	padding: var(--space-8);
	background-color: var(--color-bg-elevated);
	border-radius: var(--radius-surface);
}

.content-kontakt__form-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--font-size-28);
	font-weight: 600;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-text-primary);
}

.content-kontakt__form-intro {
	margin: calc(-1 * var(--space-3)) 0 0;
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	line-height: var(--line-height-base);
	color: var(--color-text-secondary);
}

/* Submission feedback, rendered from the handler's redirect flag. */
.content-kontakt__notice {
	margin: 0;
	padding: var(--space-4) var(--space-5);
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	line-height: var(--line-height-base);
	border-radius: var(--radius-md);
}

.content-kontakt__notice--sent {
	color: var(--color-success-ink);
	background-color: var(--color-success-soft);
}

.content-kontakt__notice--error {
	color: var(--color-danger-ink);
	background-color: var(--color-danger-soft);
}

/* Honeypot: invisible to people, present for bots. Not display:none so
   the field keeps existing for autofill-style bots that check. */
.content-kontakt__field--hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* GDPR consent row: checkbox and the live form's verbatim sentence. */
.content-kontakt__consent {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	line-height: var(--line-height-base);
	color: var(--color-text-secondary);
	cursor: pointer;
}

.content-kontakt__consent input {
	margin-top: 0.2em;
	flex-shrink: 0;
	accent-color: var(--color-link);
}

/* The country dropdown shares the input skin; the arrow is the UA's. */
select.content-kontakt__input {
	appearance: auto;
	height: auto;
}

.content-kontakt__field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.content-kontakt__label {
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-text-secondary);
}

.content-kontakt__input,
.content-kontakt__textarea {
	font-family: var(--font-sans);
	font-size: var(--font-size-18);
	line-height: var(--line-height-base);
	color: var(--color-text-primary);
	padding: var(--space-3) var(--space-4);
	background-color: var(--color-bg-base);
	border: 1px solid var(--color-border-hairline);
	border-radius: var(--radius-md);
	transition: border-color var(--motion-duration-fast) var(--motion-ease-standard),
		box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
}

.content-kontakt__textarea {
	min-height: 160px;
	resize: vertical;
}

.content-kontakt__input:focus,
.content-kontakt__textarea:focus {
	outline: 0;
	border-color: var(--color-link);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-link) 18%, transparent);
}

.content-kontakt__submit {
	align-self: flex-start;
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-7);
	font-family: var(--font-sans);
	font-size: var(--font-size-18);
	font-weight: 500;
	color: var(--color-cta-ink);
	background-color: var(--color-cta);
	border: 0;
	border-radius: var(--radius-control) var(--radius-control) var(--radius-control) calc(var(--radius-surface) - var(--space-8));  /* shares the form card bottom-left corner */
	cursor: pointer;
	transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
}

.content-kontakt__submit:hover,
.content-kontakt__submit:focus-visible {
	background-color: var(--color-cta-hover);
}

.content-kontakt__submit:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 4px;
}

/* ============================================================
 * Single, "Weitere Beiträge" related-posts strip.
 * ============================================================ */

.content-related {
	max-width: var(--content-column-archive);
	margin: var(--space-12) auto 0;
	padding: var(--space-9) var(--content-gutter) 0;
	border-top: 1px solid var(--color-border-hairline);
}

.content-related__title {
	margin: 0 0 var(--space-7);
	font-family: var(--font-display);
	font-size: var(--font-size-28);
	font-weight: 600;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-text-primary);
}

.content-related__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--content-tile-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ============================================================
 * Archive, featured top tile + standard post-card grid.
 * ============================================================ */

.content-archive__featured {
	max-width: var(--content-column-archive);
	margin: 0 auto var(--space-9);
	padding: 0 var(--content-gutter);
}

.content-archive__featured-tile {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: var(--content-featured-min-height);
	padding: var(--space-9);
	border-radius: var(--radius-card);
	overflow: hidden;
	color: var(--color-text-inverse);
	text-decoration: none;
	background-color: var(--grey-800);
	background-size: cover;
	background-position: center;
	transition: transform var(--motion-duration-base) var(--motion-ease-standard);
}

.content-archive__featured-tile::before {
	/* Side scrim from the left, behind the text column (owner 2026-11-05):
	   50 % black, held over the first 1/φ² (38.2 %) of the tile, then
	   falling by φ per golden step: 50/φ (30.9 %) at 1/φ (61.8 %), clear
	   at the right edge. On desktop the text column ends near 50 %, so
	   every line sits on at least 40 % black. */
	--featured-scrim-hold: 38.2%;
	--featured-scrim-step: 61.8%;
	--featured-scrim-end: rgba(0, 0, 0, 0);
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0.5) 0%,
		rgba(0, 0, 0, 0.5) var(--featured-scrim-hold),
		rgba(0, 0, 0, 0.309) var(--featured-scrim-step),
		var(--featured-scrim-end) 100%
	);
	pointer-events: none;
}

.content-archive__featured-tile::after {
	/* Dark scrim so the title stays legible over arbitrary photography. */
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.65) 100%);
	pointer-events: none;
}

.content-archive__featured-tile:hover,
.content-archive__featured-tile:focus-visible {
	transform: translateY(-2px);
	color: var(--color-text-inverse);
}

.content-archive__featured-tile:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 4px;
}

.content-archive__featured-body {
	position: relative;
	z-index: 1;
	max-width: 32em;
}

.content-archive__featured-eyebrow {
	margin: 0 0 var(--space-3);
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-text-inverse-secondary);
}

.content-archive__featured-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--font-size-56);
	font-weight: 600;
	line-height: var(--line-height-display);
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-text-inverse);
}

.content-archive__featured-excerpt {
	margin: var(--space-4) 0 0;
	font-family: var(--font-sans);
	font-size: var(--font-size-18);
	line-height: var(--line-height-base);
	color: var(--color-text-inverse-secondary);
}

/* Standard post-card grid */

.content-archive__grid-wrap {
	max-width: var(--content-column-archive);
	margin: 0 auto;
	padding: 0 var(--content-gutter);
}

.content-archive__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--content-tile-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.content-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	height: 100%;
	padding: 0;
	background: transparent;
}

.content-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--content-tile-radius);
	background-color: var(--color-bg-elevated);
}

.content-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* Hover micro-feedback caps at 250ms (spec 2). */
	transition: transform var(--motion-duration-base) var(--motion-ease-standard);
}

.content-card__link:hover .content-card__media img,
.content-card__link:focus-visible .content-card__media img {
	transform: scale(1.03);
}

.content-card__eyebrow {
	margin: var(--space-3) 0 0;
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-text-secondary);
}

.content-card__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--font-size-21);
	font-weight: 600;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
}

.content-card__title a {
	color: var(--color-text-primary);
	text-decoration: none;
}

.content-card__title a:hover,
.content-card__title a:focus-visible {
	color: var(--color-link);
}

.content-card__excerpt {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	line-height: var(--line-height-base);
	color: var(--color-text-secondary);
}

.content-card__more {
	margin-top: auto;
	padding-top: var(--space-3);
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-2);
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	color: var(--color-link);
	text-decoration: none;
}

.content-card__chevron {
	display: inline-block;
	transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.content-card__more:hover .content-card__chevron,
.content-card__more:focus-visible .content-card__chevron {
	transform: translateX(4px);
}

/* ============================================================
 * Pagination, Apple keeps these small and centered.
 * ============================================================ */

.content-pagination {
	max-width: var(--content-column-archive);
	margin: var(--space-10) auto 0;
	padding: 0 var(--content-gutter);
}

.content-pagination .nav-links,
.content-pagination .pagination {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.content-pagination .page-numbers {
	display: inline-flex;
	min-width: 40px;
	justify-content: center;
	padding: var(--space-2) var(--space-4);
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	color: var(--color-text-primary);
	text-decoration: none;
	border-radius: var(--radius-md);
	transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
}

.content-pagination .page-numbers:hover,
.content-pagination .page-numbers:focus-visible {
	background-color: var(--color-overlay-hover);
}

.content-pagination .page-numbers.current {
	background-color: var(--color-text-primary);
	color: var(--color-text-inverse);
}

.content-pagination .page-numbers.dots {
	background: transparent;
	color: var(--color-text-muted);
}

/* ============================================================
 * Press feedback, pointer-down response under 100ms (spec 1).
 * The press duration lives inside :active so the press snaps
 * while the release eases back through the base transition.
 * ============================================================ */

/* The card link is an inline anchor around a block media span;
   transforms need a block box to take effect. */
.content-card__link {
	display: block;
	transition: transform var(--motion-duration-base) var(--motion-ease-standard);
}

.content-launcher__tile:active,
.content-archive__featured-tile:active,
.content-card__link:active {
	transform: scale(0.98);
	transition-duration: var(--motion-duration-press);
}

.content-kontakt__submit:active {
	background-color: color-mix(in srgb, var(--color-cta) 88%, #000);
	transition-duration: var(--motion-duration-press);
}

.content-pagination .page-numbers:active {
	background-color: var(--grey-100);
	transition-duration: var(--motion-duration-press);
}

/* ============================================================
 * Empty / 404-ish content state, used by archive.php and
 * search.php when there are no results.
 * ============================================================ */

.content-empty {
	max-width: var(--content-column-narrow);
	margin: 0 auto;
	padding: var(--space-9) var(--content-gutter);
	text-align: center;
	font-family: var(--font-sans);
	font-size: var(--font-size-21);
	line-height: var(--line-height-base);
	color: var(--color-text-secondary);
}

/* ============================================================
 * Responsive. Three steps:
 *   1024px : tile/card grids drop 3 -> 2 columns
 *    833px : chrome + type step, kontakt stacks, grids STAY 2-up
 *    640px : phone, card grids go single column
 * The 640px floor is the theme-wide phone step. Collapsing the
 * grids at 833px used to hand a 768px portrait tablet one card
 * per row inside a 724px column.
 * ============================================================ */

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

@media (max-width: 833px) {
	:root {
		--content-hero-pad-top:    var(--space-10);  /* 80px */
		--content-hero-pad-bottom: var(--space-8);   /* 48px */
		--content-body-pad-bottom: var(--space-10);
		--content-tile-pad:        var(--space-6);   /* 28px */
		--content-featured-min-height: clamp(260px, 50vh, 420px);
	}

	/* Step the hero mark down with the title it sits above. Same pair of
	   values as .emo-icon--sm, restated here rather than swapping the
	   class because a template cannot change its class at a breakpoint. */
	.content-hero__icon {
		--emo-icon-size: 3.5rem;
		--emo-icon-stroke: 3;
	}

	.content-hero__title {
		font-size: var(--font-size-40);
	}

	.content-hero__subhead {
		font-size: var(--font-size-21);
	}

	.content-prose {
		font-size: var(--font-size-18);
		line-height: var(--line-height-base);
	}

	.content-prose > h2 { font-size: var(--font-size-28); }
	.content-prose > h3 { font-size: var(--font-size-21); }

	.content-prose blockquote {
		font-size: var(--font-size-21);
	}

	/* Card grids stay 2-up here, they go single column at 640px. */

	.content-kontakt {
		grid-template-columns: 1fr;
		gap: var(--space-7);
	}

	.content-archive__featured-title {
		font-size: var(--font-size-28);
	}

	.content-archive__featured-tile {
		padding: var(--space-6);
	}

	/* The text runs the full tile width here: hold the 50 % over 1/φ,
	   end on 50/φ² (19.1 %) instead of clear. */
	.content-archive__featured-tile::before {
		--featured-scrim-hold: 61.8%;
		--featured-scrim-step: 80.9%;
		--featured-scrim-end: rgba(0, 0, 0, 0.191);
	}

	/* Flex item defaults to min-width:auto: the headline's min-content width
	 * pushed the body past the tile's overflow:hidden edge and clipped the
	 * text mid-letter at 375px. */
	.content-archive__featured-body {
		min-width: 0;
		max-width: 100%;
	}

	.content-archive__featured-title,
	.content-archive__featured-excerpt {
		overflow-wrap: break-word;
	}

	/* The country <select>'s intrinsic width (longest option) + the card's
	 * 48px padding overflowed the viewport by 63px. Let the card shrink and
	 * the controls stay inside it. */
	.content-kontakt__form {
		max-width: 100%;
		padding: var(--space-6) var(--space-5);
	}

	.content-kontakt__input,
	.content-kontakt__textarea {
		width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}
}

/* ============================================================
 * Phone, 640px. Declared AFTER the 1024px block: both match at
 * <=640px with the same specificity, so source order decides and
 * the narrower one has to come last.
 * ============================================================ */

@media (max-width: 640px) {
	.content-launcher__grid,
	.content-related__grid,
	.content-archive__grid {
		grid-template-columns: 1fr;
	}

	/* Stop reserving the icon slot once the grid is a single column. The
	   min-height only ever existed so an unmarked tile's copy would line up
	   with the marked tiles beside it; with nothing beside it, the reserved
	   space is just a hole above the eyebrow. */
	.content-launcher__icon {
		min-height: 0;
	}
}

/* ============================================================
 * Reduced motion, disable hover-shift transforms.
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.content-launcher__tile,
	.content-launcher__chevron,
	.content-card__media img,
	.content-card__chevron,
	.content-archive__featured-tile,
	.content-prose a {
		transition: none;
	}

	.content-launcher__tile:hover,
	.content-launcher__tile:focus-visible,
	.content-archive__featured-tile:hover,
	.content-archive__featured-tile:focus-visible {
		transform: none;
	}

	.content-launcher__tile:hover .content-launcher__chevron,
	.content-launcher__tile:focus-visible .content-launcher__chevron,
	.content-card__more:hover .content-card__chevron,
	.content-card__more:focus-visible .content-card__chevron {
		transform: none;
	}

	.content-card__link:hover .content-card__media img,
	.content-card__link:focus-visible .content-card__media img {
		transform: none;
	}

	/* Transforms are stripped above; keep the press readable as a
	   background/opacity shift instead (spec 7 keeps feedback). */
	.content-launcher__tile:active {
		transform: none;
		background-color: var(--grey-100);
	}

	.content-archive__featured-tile:active,
	.content-card__link:active {
		transform: none;
		opacity: 0.8;
	}
}

/* ============================================================
 * a11y, supplemental focus indicators.
 *
 * The kontakt form's input/textarea use a box-shadow glow ring on :focus
 * which is invisible in Windows High-Contrast Mode (forced-colors).
 * Layer a transparent outline so the OS can repaint it. The hero meta
 * links (date / category) and kontakt block links currently only color-
 * shift on focus; add discrete outlines so keyboard users get a ring.
 * ============================================================ */

.content-kontakt__input:focus-visible,
.content-kontakt__textarea:focus-visible {
	outline: 2px solid transparent; /* forced-colors fallback */
}

.content-hero__meta a:focus-visible,
.content-kontakt__block a:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

.content-card__title a:focus-visible,
.content-card__more:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

.content-pagination .page-numbers:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 2px;
}

/* ============================================================
 * Gradient placeholders, posts without featured imagery.
 * Rendered by template-parts/post-card.php. Values mirror the
 * shared gradient palette (info.css). The var() indirection matters:
 * info.css is NOT enqueued on the blog index or the shop, so the
 * FALLBACK is what actually renders there. It points at the brand
 * ramp in tokens.css (always loaded) rather than a literal, which is
 * why these cards follow a palette change. Cards rotate through three
 * ramp steps by grid position.
 * ============================================================ */

.content-card__media--placeholder {
	background-image: var(--info-grad-a, var(--emo-grad-a));
}

.content-archive__grid li:nth-child(3n + 2) .content-card__media--placeholder,
.content-related__grid li:nth-child(3n + 2) .content-card__media--placeholder {
	background-image: var(--info-grad-b, var(--emo-grad-b));
}

.content-archive__grid li:nth-child(3n) .content-card__media--placeholder,
.content-related__grid li:nth-child(3n) .content-card__media--placeholder {
	background-image: var(--info-grad-c, var(--emo-grad-c));
}

/* Featured tile without a photo: branded gradient instead of flat grey. */
.content-archive__featured-tile:not([style]) {
	background-image: var(--info-grad-blue, var(--emo-grad-feature));
}

/* ============================================================
 * 404, search + exit pills under the standard content hero.
 * ============================================================ */

.content-404__tools {
	max-width: 560px;
	margin: 0 auto;
	/* No bottom padding of its own, .site-main.content already pays the
	   page-level padding-bottom (it doubled up to 256px before). */
	padding: 0 var(--content-gutter);
	text-align: center;
}

.content-404__search {
	display: flex;
	gap: var(--space-2);
}

.content-404__input {
	flex: 1 1 auto;
	padding: 12px var(--space-4);
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	color: var(--color-text-primary);
	background: var(--color-bg-base);
	border: 1px solid var(--color-border-hairline);
	border-radius: var(--radius-control);
	outline: none;
	transition: border-color var(--motion-duration-fast) var(--motion-ease-standard);
}

.content-404__input:focus-visible {
	border-color: var(--color-accent);
	/* The border shift alone is a 1px cue; add the theme's 3px glow
	   ring (matches the kontakt inputs above). */
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent);
}

.content-404__submit {
	padding: 12px var(--space-6);
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	font-weight: 600;
	color: var(--color-cta-ink);
	background: var(--color-cta);
	border: 0;
	border-radius: var(--radius-control);
	cursor: pointer;
	transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
}

.content-404__submit:hover,
.content-404__submit:focus-visible {
	background: var(--color-cta-hover);
}

/* Background-only press so it also reads under reduced motion. */
.content-404__submit:active {
	background: color-mix(in srgb, var(--color-cta) 88%, #000);
	transition-duration: var(--motion-duration-press);
}

.content-404__links {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-7);
}

.content-404__pill {
	padding: 9px var(--space-5);
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	font-weight: 600;
	text-decoration: none;
	color: var(--color-text-primary);
	border: 1px solid var(--color-border-hairline);
	border-radius: var(--radius-chip);
	transition:
		border-color var(--motion-duration-fast) var(--motion-ease-standard),
		color var(--motion-duration-fast) var(--motion-ease-standard),
		background-color var(--motion-duration-fast) var(--motion-ease-standard);
}

.content-404__pill:hover,
.content-404__pill:focus-visible {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

/* Background-only press so it also reads under reduced motion. */
.content-404__pill:active {
	background-color: var(--grey-100);
	transition-duration: var(--motion-duration-press);
}

/* ============================================================
 * Search results, Google-style relevance list (search.php).
 * Reuses the 404 form/pill primitives; adds the result rows,
 * type badges and <mark> term highlighting.
 * ============================================================ */

.content-search__body {
	max-width: var(--content-column-narrow);
	margin: 0 auto;
	/* No bottom padding of its own, .site-main.content already pays the
	   page-level padding-bottom (it doubled up to 256px before). */
	padding: 0 var(--content-gutter);
}

.content-search__form {
	margin-bottom: var(--space-9);
}

.content-search__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-7);
}

.content-search__item {
	display: flex;
	gap: var(--space-5);
	align-items: flex-start;
}

.content-search__thumb {
	flex: 0 0 64px;
}

.content-search__thumb img {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: contain;
	background: var(--color-bg-base);
	border: 1px solid var(--color-border-hairline);
	border-radius: var(--radius-md);
	padding: 3px;
	box-sizing: border-box;
}

.content-search__meta {
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
	margin: 0 0 var(--space-1);
	font-family: var(--font-sans);
	font-size: var(--font-size-12);
	color: var(--color-text-muted);
}

.content-search__badge {
	display: inline-block;
	padding: 1px 9px;
	font-weight: 600;
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-text-secondary);
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border-hairline);
	border-radius: var(--radius-chip);
}

.content-search__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--font-size-21);
	font-weight: 600;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-base);
}

.content-search__title a {
	color: var(--color-text-primary);
	text-decoration: none;
}

.content-search__title a:hover,
.content-search__title a:focus-visible {
	color: var(--color-link);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.content-search__snippet {
	margin: var(--space-2) 0 0;
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	line-height: var(--line-height-base);
	color: var(--color-text-secondary);
}

.content-search__snippet mark {
	background: color-mix(in srgb, var(--color-accent) 16%, transparent);
	color: var(--color-text-primary);
	border-radius: 3px;
	padding: 0 2px;
}

.content-search__empty {
	text-align: center;
}

@media (max-width: 833px) {
	.content-search__item {
		flex-direction: column;
		gap: var(--space-3);
	}
}

/* ============================================================
 * Article lead image (single.php).
 * The imported posts have no WordPress featured image; their picture
 * lives in the Elementor payload and is recovered by
 * inc/post-images.php. Rendered above the prose, at prose width.
 * ============================================================ */

.content-single__lead {
	max-width: var(--content-column-wide, 1200px);
	margin: 0 auto var(--space-9);
	padding-inline: var(--content-gutter);
}

.content-single__lead img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-card);
	background: var(--color-bg-elevated);
}

/* ============================================================
 * Impressum layout (.content-imprint-*).
 * Structure classes used by the seeded post_content of the two
 * Impressum pages (DE #60 /impressum/, EN #51 /en/imprint/,
 * seeded by docker/content-fixes.php). Rendered by page.php
 * inside .content-prose: a company card up top, then
 * label/value definition rows between the prose sections.
 * ============================================================ */

.content-prose .content-imprint-card {
	padding: var(--space-6) var(--space-7);
	background-color: var(--color-bg-elevated);
	border: 1px solid var(--color-border-hairline);
	border-radius: var(--radius-panel);
}

.content-prose .content-imprint-card__eyebrow {
	font-size: var(--font-size-14);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.content-prose .content-imprint-card__name {
	margin-top: var(--space-2);
	font-family: var(--font-display);
	font-size: var(--font-size-28);
	font-weight: 600;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
}

.content-prose .content-imprint-card__address {
	margin-top: var(--space-1);
	font-size: var(--font-size-18);
	line-height: var(--line-height-base);
	color: var(--color-text-secondary);
}

.content-prose .content-imprint-card__contact {
	margin-top: var(--space-5);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border-hairline);
	display: grid;
	gap: var(--space-2);
}

.content-prose .content-imprint-card__row {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--space-4);
	font-size: var(--font-size-18);
	line-height: var(--line-height-base);
}

.content-prose .content-imprint-card__label {
	flex: 0 0 5em;
	font-size: var(--font-size-14);
	font-weight: 600;
	line-height: inherit;
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

/* Label/value definition rows (register numbers, IDs). */
.content-prose .content-imprint-dl {
	margin-top: var(--space-6);
	border-top: 1px solid var(--color-border-hairline);
}

.content-prose .content-imprint-dl__row {
	display: grid;
	grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
	gap: var(--space-1) var(--space-6);
	padding: var(--space-4) 0;
	border-bottom: 1px solid var(--color-border-hairline);
}

.content-prose .content-imprint-dl dt {
	font-size: var(--font-size-16);
	font-weight: 600;
	line-height: var(--line-height-base);
	color: var(--color-text-secondary);
}

.content-prose .content-imprint-dl dd {
	margin: 0;
	font-size: var(--font-size-18);
	line-height: var(--line-height-base);
}

@media (max-width: 833px) {
	.content-prose .content-imprint-card {
		padding: var(--space-5) var(--space-5);
	}

	.content-prose .content-imprint-card__row {
		flex-direction: column;
	}
}

/* The 220px key column plus its value still fits the 720px prose
   measure on a tablet; only a phone has to put key over value. */
@media (max-width: 640px) {
	.content-prose .content-imprint-dl__row {
		grid-template-columns: minmax(0, 1fr);
	}
}