/*
 * emo2026, About sub-pages.
 *
 * Page-local styles for the four hand-built /die-firma/ sub-pages:
 *
 *   - page-management-team.php  , leadership card grid
 *   - page-team.php             , emosystems plugin team grid wrapper
 *                                  (+ no-plugin placeholder)
 *   - page-zertifizierungen.php , certification card grid (CSS badges)
 *   - page-karriere.php         , reasons grid + jobs accordion
 *                                  + Initiativbewerbung callout
 *
 * The two company pages (page-qualitaet.php, page-nachhaltigkeit.php)
 * borrow this vocabulary through inc/company-pages.php; the emo green
 * block near the bottom of this sheet belongs to Nachhaltigkeit alone.
 *
 * Reuses the shared .content-hero block from content.css for the
 * editorial headline at the top of each page, only the post-hero
 * content is page-local. Reuses .about-leader (defined here) for both
 * the management team grid and the no-plugin team placeholder.
 *
 * Tokens come from tokens.css. Page-local custom properties at the top
 * capture geometry that's truly local to these pages (avatar size,
 * badge size, accordion padding), none belong in the global
 * vocabulary. No new color/type/spacing literals where a token covers it.
 *
 * Plain CSS, no preprocessor, no nesting. Targets stable Firefox (the
 * user's debug browser), Chromium, Safari.
 */

:root {
	/* Editorial column for the post-hero sections, slightly wider than
	   .content-prose's 720 because we run multi-column grids inside. */
	--about-column:               1040px;
	--about-section-pad-y:        var(--space-10);
	--about-gutter:               var(--space-5);

	/* Leadership/team card geometry. */
	--about-avatar-size:          120px;
	--about-avatar-font:          var(--font-size-40);
	--about-card-gap:             var(--space-7);

	/* Certification badge. Slightly smaller than the leader avatar so a
	   2-up cards-with-text-beside layout reads as "icon" not "portrait". */
	--about-badge-size:           96px;

	/* Nachhaltigkeit, emo green. */
	--about-green-icon-size:      28px;

	/* Karriere, reasons icon, jobs accordion. */
	--about-reasons-icon-size:    var(--font-size-56);
	--about-job-pad-y:            var(--space-5);
	--about-job-pad-x:            var(--space-6);
}

/* ============================================================
 * Shared section container, every post-hero block on these
 * pages uses this column. Keeps vertical rhythm uniform across
 * leader grid, cert grid, reasons row, jobs list.
 * ============================================================ */

.content-about-sub .about-leaders,
.content-about-sub .about-team,
.content-about-sub .about-certs,
.content-about-sub .about-ce,
.content-about-sub .about-reasons,
.content-about-sub .about-jobs,
.content-about-sub .about-green,
.content-about-sub .about-initiative {
	max-width: var(--about-column);
	margin: 0 auto;
	padding: 0 var(--about-gutter);
}

/* First post-hero block keeps the hero's bottom padding as its
   top breathing room. Subsequent blocks add their own top space. */
.content-about-sub .about-team,
.content-about-sub .about-certs,
.content-about-sub .about-ce,
.content-about-sub .about-reasons,
.content-about-sub .about-jobs,
.content-about-sub .about-green {
	margin-top: var(--space-9);
}

.content-about-sub .about-initiative {
	margin-top: var(--space-10);
}

/* Section heading shared by Karriere page (Warum…?, Offene Stellen).
   Display weight, centered, modest gap to the grid below. */
.about-section-title {
	margin: 0 0 var(--space-7);
	font-family: var(--font-display);
	font-size: var(--font-size-40);
	font-weight: 600;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-text-primary);
	text-align: center;
}

/* ============================================================
 * Leadership cards (page-management-team.php).
 * Reused by the page-team.php placeholder grid via .about-leader.
 * ============================================================ */

.about-leaders__grid,
.about-team__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--about-card-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The real leadership roster is four people with paragraph-length bios;
   2x2 keeps the columns wide enough for that text, where 3+1 would strand
   the fourth card alone under narrow columns. */
.about-leaders__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.about-leaders__item,
.about-team__item {
	display: flex;
}

.about-leader {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	width: 100%;
	padding: var(--space-7) var(--space-5);
	/* Tint plus radius, or the card cannot be seen: this was white on the
	 * white page, so the surface it declares was never painted and the
	 * leaders read as loosely spaced text. Tint on white with no border is
	 * the theme's card vocabulary (info tiles, wizard results, product
	 * cards); a hairline here would be the only bordered card on the site.
	 * 320 to 500px on the shorter side puts it in the card band. */
	background-color: var(--color-bg-elevated);
	border-radius: var(--radius-card);
	text-align: center;
}

/* Round avatar. Carries the person's real portrait as a cover
   background where the live site has one; falls back to a gradient
   with initials where it does not (exactly like the live site's own
   placeholder blocks). */
.about-leader__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--about-avatar-size);
	height: var(--about-avatar-size);
	border-radius: 50%;   /* circle: a square avatar, not a rounded rectangle */
	background-color: var(--grey-700);
	background-size: cover;
	background-position: center;
	color: var(--color-text-inverse);
	flex-shrink: 0;
	margin-bottom: var(--space-3);
}

.about-leader__initials {
	font-family: var(--font-display);
	font-size: var(--about-avatar-font);
	font-weight: 600;
	line-height: 1;
	letter-spacing: var(--letter-spacing-base);
	color: var(--color-text-inverse);
}

.about-leader__name {
	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);
}

.about-leader__role {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	font-weight: 500;
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-text-secondary);
}

.about-leader__bio {
	margin: var(--space-3) 0 0;
	max-width: 28em;
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	line-height: var(--line-height-base);
	color: var(--color-text-secondary);
}

/* ============================================================
 * Team page extras: the group photo below the member grid.
 * The live site closes its team page with the 2023 Berlin group
 * shot; we keep it full column width with the same soft radius
 * the content cards use.
 * ============================================================ */

.about-team__figure {
	margin: var(--space-9) 0 0;
}

.about-team__figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-surface);
}

/* ============================================================
 * Certification rows (page-zertifizierungen.php).
 *
 * ONE certification per row, full container width: badge left,
 * content right. A row carries a description, a facts list of
 * verifiable identifiers and a link cluster, which is far too
 * much matter for a 2-up card. Fixed single column, no auto-fit,
 * matching the pinned column counts elsewhere in this sheet.
 *
 * Badges stay CSS-only (no image files) per project memory.
 * ============================================================ */

/* These two sections put a lead paragraph between the title and the
   list, so the title tightens up and the paragraph carries the gap. */
.about-certs .about-section-title,
.about-ce .about-section-title,
.about-green .about-section-title {
	margin-bottom: var(--space-4);
}

.about-certs__intro {
	max-width: 68ch;
	margin: 0 auto var(--space-7);
	font-family: var(--font-sans);
	font-size: var(--font-size-18);
	line-height: var(--line-height-base);
	color: var(--color-text-secondary);
	text-align: center;
}

.about-certs__rows {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * The Qualitaet and Nachhaltigkeit pages reuse the .about-cert card in a
 * two-up grid (.about-certs__grid). It needs its own rule: the
 * certifications page moved to one-per-row .about-certs__rows, and
 * without this the two company pages fell back to a bare <ul>, bullets
 * and all, outside their cards.
 */
.about-certs__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.about-certs__grid > li {
	display: flex;
}

/* Mengenabfrage: bei genau drei Karten drei Spalten.
   Zwei Spalten gehen auf, solange die Zahl gerade ist, und page-qualitaet.php
   hat vier. page-nachhaltigkeit.php hat drei, da blieb die dritte als Waise
   in einer eigenen Zeile stehen und die Reihe las sich wie ein Fehler
   (Owner 15.09.2026: "der linebreak fuer die 3 list ist ugly"). Dasselbe
   Mittel benutzt product-line.css fuer die Highlight-Reihe.

   Bei drei Spalten steht das Abzeichen ueber dem Text statt daneben. In
   einer Drittelspalte bleiben neben dem 72px-Abzeichen nur rund 170px fuer
   den Satz, und "Netzwerkisolatoren" ist als ein Wort breiter als das. */
@media (min-width: 834px) {
	.about-certs__grid:has(> li:first-child:nth-last-child(3)) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.about-certs__grid:has(> li:first-child:nth-last-child(3)) .about-cert {
		flex-direction: column;
		gap: var(--space-5);
	}
}

/* Lange deutsche Komposita brechen, statt aus der Karte zu laufen. Gilt
   ueberall, nicht nur im Dreierraster: die Titel kommen aus Redaktionstext
   und ihre Laenge ist nicht vorhersehbar. */
.about-cert__title {
	overflow-wrap: break-word;
	hyphens: auto;
}

/* Tablet and phone: the cards carry a badge plus a paragraph, so they
   need the full width well before the phone breakpoint. */
@media (max-width: 833px) {
	.about-certs__grid {
		grid-template-columns: 1fr;
	}
}

.about-certs__row {
	display: flex;
}

.about-cert {
	display: flex;
	align-items: flex-start;
	gap: var(--space-6);
	width: 100%;
	padding: var(--space-7);
	background-color: var(--color-bg-elevated);
	border: 1px solid var(--color-border-hairline-translucent);
	border-radius: var(--radius-card);
}

/* Circular badge. Uses a solid token color and a hairline ring so it
   reads as a "stamp" rather than a button. Two-line typography:
   short mark on top (IEC, ISO, RoHS, UL), optional sub-line below. */
.about-cert__badge {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: var(--about-badge-size);
	height: var(--about-badge-size);
	flex-shrink: 0;
	border-radius: var(--radius-chip);
	background-color: var(--color-bg-base);
	border: 1px solid var(--color-border-hairline);
	color: var(--color-text-primary);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.about-cert__badge-mark {
	font-family: var(--font-display);
	font-size: var(--font-size-21);
	font-weight: 600;
	line-height: 1;
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-text-primary);
}

.about-cert__badge-sub {
	margin-top: var(--space-1);
	font-family: var(--font-sans);
	font-size: var(--font-size-12);
	font-weight: 500;
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-text-secondary);
}

.about-cert__body {
	flex: 1;
	min-width: 0;  /* let long German nouns wrap inside the flex child */
}

.about-cert__title {
	margin: 0 0 var(--space-3);
	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);
	color: var(--color-text-primary);
}

.about-cert__desc {
	margin: 0;
	max-width: 72ch;
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	line-height: var(--line-height-base);
	color: var(--color-text-secondary);
}

/* Verifiable identifiers: certificate numbers, issuing body, validity.
   A <dl> of key/value pairs, each pair its own flex row so a long
   applied-standards value wraps under its own key instead of pushing
   the column apart. */
.about-cert__facts {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin: var(--space-5) 0 0;
	padding: var(--space-4) var(--space-5);
	background-color: var(--color-bg-base);
	border: 1px solid var(--color-border-hairline);
	border-radius: var(--radius-md);
}

.about-cert__fact {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-3);
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	line-height: var(--line-height-base);
}

.about-cert__fact-key {
	flex: 0 0 auto;
	min-width: 13rem;
	margin: 0;
	color: var(--color-text-muted);
}

.about-cert__fact-val {
	flex: 1 1 16rem;
	min-width: 0;
	margin: 0;
	font-weight: 500;
	color: var(--color-text-primary);
	overflow-wrap: anywhere;   /* certificate numbers have no spaces to break at */
}

/* Link cluster. Three roles per row: our certificate, the standard at
   its publisher, the issuing body's check. Wraps into as many lines as
   the container needs. */
.about-cert__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin: var(--space-5) 0 0;
	padding: 0;
	list-style: none;
}

.about-cert__links-item {
	display: flex;
	min-width: 0;
}

.about-cert__link {
	display: inline-flex;
	flex-direction: column;
	gap: var(--space-1);
	box-sizing: border-box;   /* no global border-box reset in this theme */
	max-width: 100%;
	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);
	text-decoration: none;
	transition: border-color var(--motion-duration-fast) var(--motion-ease-standard),
		background-color var(--motion-duration-fast) var(--motion-ease-standard),
		transform var(--motion-duration-base) var(--motion-ease-standard);
}

/* Our own certificate is the primary destination in the cluster: it
   carries the accent hairline so the eye lands on it first. */
.about-cert__link--doc {
	border-color: var(--color-accent);
}

.about-cert__link-label {
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	font-weight: 600;
	line-height: var(--line-height-tight);
	color: var(--color-link);
	overflow-wrap: anywhere;
}

.about-cert__link-meta {
	font-family: var(--font-sans);
	font-size: var(--font-size-12);
	letter-spacing: var(--letter-spacing-wide);
	line-height: var(--line-height-tight);
	color: var(--color-text-muted);
}

.about-cert__link:hover {
	background-color: var(--color-overlay-hover);
	border-color: var(--color-link-hover);
}

.about-cert__link:hover .about-cert__link-label {
	color: var(--color-link-hover);
}

.about-cert__link:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 2px;
}

/* DESIGN-SPEC section 1: feedback on pointer-DOWN, under 100ms. */
.about-cert__link:active {
	transform: scale(0.97);
	transition-duration: var(--motion-duration-press);
}

/* ============================================================
 * CE declarations of conformity (page-zertifizierungen.php).
 * A grouped document list under the certification rows. The whole
 * row is the link, so the hit target is the full width.
 * ============================================================ */

.about-ce__group {
	margin-top: var(--space-7);
}

.about-ce__group-title {
	margin: 0 0 var(--space-3);
	font-family: var(--font-display);
	font-size: var(--font-size-18);
	font-weight: 600;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-text-primary);
}

.about-ce__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.about-ce__row {
	display: flex;
}

.about-ce__link {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	box-sizing: border-box;
	width: 100%;
	padding: var(--space-4) var(--space-5);
	background-color: var(--color-bg-elevated);
	border: 1px solid var(--color-border-hairline-translucent);
	border-radius: var(--radius-md);
	text-decoration: none;
	transition: border-color var(--motion-duration-fast) var(--motion-ease-standard),
		background-color var(--motion-duration-fast) var(--motion-ease-standard),
		transform var(--motion-duration-base) var(--motion-ease-standard);
}

.about-ce__badge {
	flex: 0 0 auto;
	padding: var(--space-1) var(--space-2);
	background-color: var(--color-bg-base);
	border: 1px solid var(--color-border-hairline);
	border-radius: var(--radius-sm);
	font-family: var(--font-sans);
	font-size: var(--font-size-12);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-wide);
	color: var(--color-text-secondary);
}

.about-ce__info {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	min-width: 0;
}

.about-ce__name {
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	font-weight: 500;
	line-height: var(--line-height-tight);
	color: var(--color-link);
	overflow-wrap: anywhere;
}

.about-ce__meta {
	font-family: var(--font-sans);
	font-size: var(--font-size-12);
	line-height: var(--line-height-tight);
	color: var(--color-text-muted);
}

.about-ce__link:hover {
	background-color: var(--color-overlay-hover);
	border-color: var(--color-border-hairline);
}

.about-ce__link:hover .about-ce__name {
	color: var(--color-link-hover);
}

.about-ce__link:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 2px;
}

.about-ce__link:active {
	transform: scale(0.99);
	transition-duration: var(--motion-duration-press);
}

/* ============================================================
 * Karriere, Warum EMO Systems? (3-up reasons row).
 * ============================================================ */

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

.about-reasons__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: var(--space-6) var(--space-4);
}

.about-reasons__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.4em;
	height: 1.4em;
	margin-bottom: var(--space-4);
	font-family: var(--font-display);
	font-size: var(--about-reasons-icon-size);
	font-weight: 400;
	line-height: 1;
	color: var(--color-link);
}

.about-reasons__title {
	margin: 0 0 var(--space-3);
	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);
	color: var(--color-text-primary);
}

.about-reasons__desc {
	margin: 0;
	max-width: 22em;
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	line-height: var(--line-height-base);
	color: var(--color-text-secondary);
}

/* ============================================================
 * Karriere, Offene Stellen (no-JS <details> accordion).
 * Apple's jobs page uses a similar collapsing list; we lean on
 * native <details>/<summary> so the page stays scriptless.
 * ============================================================ */

.about-jobs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--color-border-hairline);
}

/* Empty state, shown when nothing is advertised. Keeps the section's
   hairline rhythm so the page doesn't visibly lose a block; the copy
   carries the message, not an icon or an illustration. */
.about-jobs__empty {
	margin: 0;
	padding: var(--space-7) 0;
	border-top: 1px solid var(--color-border-hairline);
	border-bottom: 1px solid var(--color-border-hairline);
	font-family: var(--font-sans);
	font-size: var(--font-size-21);
	line-height: var(--line-height-base);
	letter-spacing: var(--letter-spacing-base);
	color: var(--color-text-primary);
}

/* Second sentence sits under the first at body weight, so the statement
   of fact leads and the invitation follows (spec 6: hierarchy from
   weight and size together, emphasis by weight before size). */
.about-jobs__empty-hint {
	display: block;
	margin-top: var(--space-2);
	font-size: var(--font-size-16);
	color: var(--color-text-secondary);
}

.about-jobs__item {
	border-bottom: 1px solid var(--color-border-hairline);
}

.about-job {
	/* Native <details> needs no display tweak, but we want the open
	   chevron to rotate without a class toggle, we do it on the
	   :open pseudo-class below. */
}

.about-job__summary {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: baseline;
	gap: var(--space-4);
	padding: var(--about-job-pad-y) var(--about-job-pad-x);
	cursor: pointer;
	list-style: none;       /* Firefox/Chromium */
	transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
}

/* Suppress the default disclosure triangle in Firefox + Webkit. */
.about-job__summary::-webkit-details-marker { display: none; }
.about-job__summary::marker                 { content: ""; }

.about-job__summary:hover,
.about-job:not([open]) .about-job__summary:focus-visible {
	background-color: var(--color-overlay-hover);
}

.about-job__summary:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: -2px;
}

.about-job__title {
	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);
	color: var(--color-text-primary);
}

.about-job__meta {
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	font-weight: 500;
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-text-secondary);
}

.about-job__meta-sep {
	margin: 0 var(--space-2);
	color: var(--color-text-muted);
}

.about-job__chevron {
	display: inline-block;
	font-family: var(--font-display);
	font-size: var(--font-size-21);
	color: var(--color-text-muted);
	transform: rotate(90deg);
	transition: transform var(--motion-duration-base) var(--motion-ease-standard);
}

.about-job[open] .about-job__chevron {
	transform: rotate(-90deg);
}

.about-job__body {
	padding: 0 var(--about-job-pad-x) var(--about-job-pad-y);
}

.about-job__desc {
	margin: 0 0 var(--space-5);
	max-width: 56em;
	font-family: var(--font-sans);
	font-size: var(--font-size-18);
	line-height: var(--line-height-loose);
	color: var(--color-text-primary);
}

.about-job__cta {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-2);
	font-family: var(--font-sans);
	font-size: var(--font-size-18);
	font-weight: 500;
	color: var(--color-link);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color var(--motion-duration-fast) var(--motion-ease-standard);
}

.about-job__cta:hover,
.about-job__cta:focus-visible {
	border-bottom-color: var(--color-link);
}

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

.about-job__cta-chevron {
	display: inline-block;
	transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.about-job__cta:hover .about-job__cta-chevron,
.about-job__cta:focus-visible .about-job__cta-chevron {
	transform: translateX(4px);
}

/* Two exits per vacancy: read the full advert, or apply straight away.
   They wrap onto separate lines on narrow screens rather than shrinking. */
.about-job__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-3) var(--space-7);
	margin: var(--space-5) 0 0 0;
}

/* The application link is the secondary of the two: same shape, quieter
   colour, so the primary action (read it first) wins the glance. */
.about-job__cta--ghost {
	color: var(--color-text-secondary);
}

.about-job__cta--ghost:hover,
.about-job__cta--ghost:focus-visible {
	color: var(--color-link);
	border-bottom-color: var(--color-link);
}

/* ============================================================
 * Single vacancy (single-emo_job.php).
 *
 * Reuses page.php's hero + .content-prose column; this block only adds
 * the structured meta line under the title and the closing action row.
 * ============================================================ */

.content-job__meta {
	font-variant-numeric: tabular-nums;
}

/* Same column geometry as .content-prose in content.css, so the rule and
   the action row line up with the body text above them rather than
   floating at a different width. */
.content-job__apply {
	max-width: var(--content-column-narrow);
	margin: var(--space-9) auto 0;
	padding: var(--space-7) var(--content-gutter) 0;
	border-top: 1px solid var(--color-border-hairline);
}

.content-job__cta {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-2);
	font-family: var(--font-sans);
	font-size: var(--font-size-18);
	font-weight: 600;
	color: var(--color-link);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color var(--motion-duration-fast) var(--motion-ease-standard);
}

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

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

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

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

/* Deadline sits under the apply link as a quiet fact, not a warning:
   it is information the candidate needs, not an alarm. */
.content-job__closes {
	margin: var(--space-3) 0 0 0;
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	color: var(--color-text-muted);
}

.content-job__back {
	margin: var(--space-6) 0 0 0;
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
}

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

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

/* ============================================================
 * Karriere, Initiativbewerbung callout.
 * Single full-width block on a tinted background, Apple's
 * "still interested?" closing pattern.
 * ============================================================ */

.about-initiative__inner {
	padding: var(--space-9) var(--space-7);
	background-color: var(--color-bg-elevated);
	border-radius: var(--radius-panel);
	text-align: center;
}

.about-initiative__title {
	margin: 0 0 var(--space-4);
	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);
}

.about-initiative__desc {
	margin: 0 auto var(--space-6);
	max-width: 36em;
	font-family: var(--font-sans);
	font-size: var(--font-size-18);
	line-height: var(--line-height-base);
	color: var(--color-text-secondary);
}

.about-initiative__cta {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-2);
	font-family: var(--font-sans);
	font-size: var(--font-size-21);
	font-weight: 500;
	color: var(--color-link);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color var(--motion-duration-fast) var(--motion-ease-standard);
}

.about-initiative__cta:hover,
.about-initiative__cta:focus-visible {
	border-bottom-color: var(--color-link);
}

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

.about-initiative__cta-chevron {
	display: inline-block;
	transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.about-initiative__cta:hover .about-initiative__cta-chevron,
.about-initiative__cta:focus-visible .about-initiative__cta-chevron {
	transform: translateX(4px);
}

/* ============================================================
 * emo green (page-nachhaltigkeit.php).
 *
 * The company's own operating measures, carried over from the live
 * site: the "emo systems ist gruen!" badge (a JPG of seven
 * pictograms) and the four photos under "Werte" on /die-firma/.
 * Two registers, on purpose:
 *
 *   1. .about-green__measures , the seven measures as a centered
 *      icon-and-label strip. This IS the badge, redrawn in the
 *      theme's line-icon vocabulary instead of shipped as an image,
 *      so it scales, follows the ink colour and stays translatable.
 *   2. .about-green__grid     , the four measures we hold
 *      photography for, as captioned cards.
 *
 * The strip summarises, the cards carry the evidence; the overlap
 * between them is editorial, not an accident.
 *
 * Card geometry follows .about-certs__grid on the same page (2-up,
 * --radius-card, elevated ground, hairline ring) so the two sections
 * share one column rhythm.
 * ============================================================ */

.about-green__intro {
	max-width: 68ch;
	margin: 0 auto var(--space-7);
	font-family: var(--font-sans);
	font-size: var(--font-size-18);
	line-height: var(--line-height-base);
	color: var(--color-text-secondary);
	text-align: center;
}

/* The badge strip. A fixed seven-column grid, not a wrapping flex row:
   seven is prime, so a reflow can only ever leave a ragged last row,
   and the widths at which it does (a lone chip under six) look broken.
   Pinning the count means the strip is either the full row it is meant
   to be or the two-column list below, never a bad wrap in between. */
.about-green__measures {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: var(--space-6) var(--space-4);
	list-style: none;
	margin: 0;
	padding: var(--space-8) var(--space-5);
	background-color: var(--color-bg-elevated);
	border: 1px solid var(--color-border-hairline-translucent);
	border-radius: var(--radius-panel);
}

.about-green__measure {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	text-align: center;
}

/* Same shape as .about-reasons__icon: the span carries the size, the
   inline SVG inside is 1em and paints in currentColor. */
.about-green__measure-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--about-green-icon-size);
	line-height: 1;
	color: var(--color-link);
}

.about-green__measure-label {
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	font-weight: 500;
	line-height: var(--line-height-tight);
	color: var(--color-text-primary);
}

.about-green__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-5);
	list-style: none;
	margin: var(--space-7) 0 0;
	padding: 0;
}

.about-green__item {
	display: flex;
}

.about-green-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0;
	background-color: var(--color-bg-elevated);
	border: 1px solid var(--color-border-hairline-translucent);
	border-radius: var(--radius-card);
	/* Clips the photo into the card's top corners; the image sits flush
	   against three edges, so nothing else needs a radius of its own. */
	overflow: hidden;
}

/* 12/7 is the source aspect of all four photos (600x350), so the crop
   is a no-op at every width and object-fit only guards a future
   replacement of a different shape. */
.about-green-card__media {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 12 / 7;
	object-fit: cover;
	background-color: var(--grey-50);
}

.about-green-card__body {
	padding: var(--space-6) var(--space-7) var(--space-7);
}

.about-green-card__title {
	margin: 0 0 var(--space-3);
	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);
	color: var(--color-text-primary);
}

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

/* ============================================================
 * Editorial placeholder (.content-todo).
 *
 * Marks copy or imagery marketing still owes (the company pages
 * use it, see page-qualitaet.php / page-nachhaltigkeit.php).
 * Deliberately visible, dashed outline, muted ink, so a
 * placeholder cannot ship unnoticed. The data-todo attribute
 * carries the owner ("marketing") for the audit greps.
 * ============================================================ */

.content-todo {
	margin: var(--space-6) auto 0;
	padding: var(--space-4) var(--space-5);
	border: 1px dashed var(--color-border-hairline);
	border-radius: var(--radius-md);
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	line-height: var(--line-height-base);
	color: var(--color-text-muted);
}

/* Inside a cert-card body the placeholder is a compact note, not a
   free-standing block. */
.about-cert__desc.content-todo {
	margin: 0;
	padding: var(--space-3) var(--space-4);
}

/* ============================================================
 * Responsive. Three steps, not two:
 *   1024px : card grids drop to 2 columns (tablet landscape)
 *    833px : chrome/type step, card grids STAY 2-up
 *    640px : phone, everything goes single column
 * The 640px floor is the theme-wide phone step; before it existed
 * a portrait tablet (768px) was already getting the phone layout,
 * one card per row with a screenful of side margin.
 * ============================================================ */

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

	/* Seven 128px chips no longer fit the row. Two columns of icon-left
	   rows instead: 4 + 3 is the only split of seven without a lone chip
	   on the last row, and reading the labels beside their icon needs
	   far less width than reading them under it. Holds all the way down,
	   so there is no phone rule for the strip. */
	.about-green__measures {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-5) var(--space-6);
	}

	.about-green__measure {
		flex-direction: row;
		align-items: center;
		gap: var(--space-4);
		text-align: left;
	}

	/* Cert rows are one-up at every width by design, nothing to
	   collapse here. The facts list gives up its wide key column
	   first, before the row itself has to stack. */
	.about-cert__fact-key {
		min-width: 10rem;
	}
}

@media (max-width: 833px) {
	:root {
		--about-section-pad-y:    var(--space-8);
		--about-avatar-size:      96px;
		--about-avatar-font:      var(--font-size-28);
		--about-badge-size:       72px;
		--about-job-pad-x:        var(--space-5);
		--about-green-icon-size:  24px;
	}

	.content-about-sub .about-team,
	.content-about-sub .about-certs,
	.content-about-sub .about-ce,
	.content-about-sub .about-reasons,
	.content-about-sub .about-jobs,
	.content-about-sub .about-green {
		margin-top: var(--space-8);
	}

	.about-section-title {
		font-size: var(--font-size-28);
	}

	/* Card grids stay 2-up here, see the 640px block below. */

	.about-certs__intro {
		margin-bottom: var(--space-6);
		font-size: var(--font-size-16);
		text-align: left;
	}

	/* Same step as the certs lead above: ragged-right reads better than
	   centred once the column is this narrow. The strip and the note
	   stay centred, they are a symmetrical object, not prose. */
	.about-green__intro {
		margin-bottom: var(--space-6);
		font-size: var(--font-size-16);
		text-align: left;
	}

	.about-green__measures {
		padding: var(--space-7) var(--space-5);
	}

	.about-green__grid {
		margin-top: var(--space-6);
	}

	.about-green-card__body {
		padding: var(--space-5) var(--space-6) var(--space-6);
	}

	.about-green-card__title {
		font-size: var(--font-size-18);
	}

	/* The PDF chip drops out of the row and the text takes the width. */
	.about-ce__link {
		align-items: flex-start;
		gap: var(--space-3);
		padding: var(--space-4);
	}

	.about-job__title {
		font-size: var(--font-size-18);
	}

	.about-initiative__inner {
		padding: var(--space-7) var(--space-5);
	}

	.about-initiative__cta {
		font-size: var(--font-size-18);
	}
}

/* ============================================================
 * Phone, 640px. Everything that used to fire at 833px and made a
 * portrait tablet look like a phone lives here instead. Declared
 * AFTER the 1024px block on purpose: both match at <=640px with
 * the same specificity, so source order has to hand the win to
 * the narrower one.
 * ============================================================ */

@media (max-width: 640px) {
	/* All card grids collapse to a single column. */
	.about-leaders__grid,
	.about-team__grid,
	.about-reasons__grid,
	.about-green__grid {
		grid-template-columns: 1fr;
	}

	/* Cert row stacks vertically, badge over text reads better than a
	   tight icon-left once the row is narrower than a phone. Above this
	   the row keeps its badge-left layout, it always had the width. */
	.about-cert {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-4);
		padding: var(--space-6);
	}

	/* Key over value: 10rem of key column plus a certificate number
	   does not fit a phone, and the pair reads fine stacked. */
	.about-cert__fact {
		flex-direction: column;
		gap: 0;
	}

	.about-cert__fact-key {
		min-width: 0;
	}

	/* One link per line at phone width: side by side they shrink to
	   two-word wraps and stop being readable labels. */
	.about-cert__links {
		flex-direction: column;
		align-items: stretch;
	}

	.about-cert__link {
		width: 100%;
	}

	/* Job summary collapses to two rows: title on top, meta + chevron
	   on the bottom, keeps the role title readable on narrow viewports.
	   The grid-area assignments must travel WITH grid-template-areas,
	   a grid-area naming an area that does not exist would drop the
	   item into an implicit track. */
	.about-job__summary {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"title chevron"
			"meta  meta";
		row-gap: var(--space-2);
	}

	.about-job__title   { grid-area: title; }
	.about-job__meta    { grid-area: meta; }
	.about-job__chevron { grid-area: chevron; align-self: center; }
}

/* ============================================================
 * Reduced motion, disable hover-shift transforms.
 * Native <details> open/close animation is browser-controlled
 * (and currently instant in Firefox), so no rule needed there.
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.about-job__summary,
	.about-job__chevron,
	.about-job__cta,
	.about-job__cta-chevron,
	.about-initiative__cta,
	.about-initiative__cta-chevron,
	.about-cert__link,
	.about-ce__link,
	.content-job__cta,
	.content-job__cta-chevron,
	.content-job__back a {
		transition: none;
	}

	/* Press feedback survives as a colour shift, the scale does not. */
	.about-cert__link:active,
	.about-ce__link:active {
		transform: none;
		background-color: var(--color-overlay-hover);
	}

	.about-job__cta:hover .about-job__cta-chevron,
	.about-job__cta:focus-visible .about-job__cta-chevron,
	.about-initiative__cta:hover .about-initiative__cta-chevron,
	.about-initiative__cta:focus-visible .about-initiative__cta-chevron,
	.content-job__cta:hover .content-job__cta-chevron,
	.content-job__cta:focus-visible .content-job__cta-chevron {
		transform: none;
	}
}