/*
Theme Name: Anna Martin – Hands-on Food Technologist
Description: Individuelles One-Pager-Theme für Dr.-Ing. Anna Martin. Startseite (Hero, Über mich, Mein Ansatz, Leistungen, Logos, Kontakt) und Seiten-Template „Mehr Infos“ (Werdegang, Case Studies, Publikationen). Erster Entwurf auf Basis des Wireframes.
Author: Elena
Version: 0.2.11
Requires at least: 6.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: anna-martin
*/

/* ------------------------------------------------------------------
   Schriften – lokal eingebunden (DSGVO). Dateien siehe README.
   Ohne Dateien greifen die System-Fallbacks.
------------------------------------------------------------------- */
@font-face {
	font-family: "Space Grotesk";
	src: url("assets/fonts/SpaceGrotesk-Variable.woff2") format("woff2");
	font-weight: 300 700;
	font-display: swap;
}
@font-face {
	font-family: "Space Mono";
	src: url("assets/fonts/SpaceMono-Regular.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}

/* ------------------------------------------------------------------
   Tokens
------------------------------------------------------------------- */
:root {
	--am-blue: #143f8f;          /* Logo-Blau (aus AM_Logo_blau.png) */
	--am-blue-dark: #132c68;
	--am-ink: #0c1238;
	--am-text: #2b3150;
	--am-muted: #626a8a;
	--am-paper: #ffffff;
	--am-tint: #f1f4fa;
	--am-line: #d6dceb;

	--font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	--radius: 4px;
	--gutter: clamp(16px, 4vw, 40px);
	--section: clamp(64px, 9vw, 120px);
}

/* ------------------------------------------------------------------
   Basis
------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 150px; }

body {
	margin: 0;
	background: var(--am-paper);
	color: var(--am-text);
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--am-blue); text-underline-offset: 3px; }
a:hover { color: var(--am-blue-dark); }

:focus-visible { outline: 3px solid var(--am-blue); outline-offset: 3px; }
section[tabindex="-1"]:focus { outline: none; }

h1, h2, h3 {
	font-family: var(--font-display);
	color: var(--am-ink);
	line-height: 1.12;
	letter-spacing: -0.02em;
	margin: 0 0 0.5em;
	font-weight: 600;
	text-wrap: balance;
}
h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.25rem; letter-spacing: -0.01em; }

p { margin: 0 0 1em; }
.lead { font-size: 1.2rem; color: var(--am-ink); line-height: 1.55; }

.container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--gutter);
}
.container--narrow { max-width: 820px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.skip-link {
	position: absolute; left: 12px; top: -60px; z-index: 100;
	background: var(--am-ink); color: #fff; padding: 10px 16px; border-radius: var(--radius);
}
.skip-link:focus { top: 12px; color: #fff; }

.eyebrow {
	font-family: var(--font-mono);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--am-blue);
	margin: 0 0 0.9rem;
}
.eyebrow--light { color: rgba(255, 255, 255, 0.8); }

/* Buttons – bewusst eckig, passend zum Logo */
.button,
.am-button > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.8em 1.3em;
	border: 2px solid var(--am-blue);
	border-radius: var(--radius);
	background: var(--am-blue);
	color: #fff;
	font-family: var(--font-mono);
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.button:hover,
.am-button > .wp-block-button__link:hover { background: var(--am-blue-dark); border-color: var(--am-blue-dark); color: #fff; }
.button--light,
.am-button--light > .wp-block-button__link { background: #fff; border-color: #fff; color: var(--am-blue); }
.button--light:hover,
.am-button--light > .wp-block-button__link:hover { background: var(--am-ink); border-color: var(--am-ink); color: #fff; }
.button--ghost,
.am-button--ghost > .wp-block-button__link { background: transparent; border-color: rgba(255, 255, 255, 0.6); color: #fff; }
.button--ghost:hover,
.am-button--ghost > .wp-block-button__link:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; color: #fff; }

.text-link,
.about__more a {
	font-family: var(--font-mono);
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
	border-bottom: 2px solid currentColor;
	padding-bottom: 2px;
}
.text-link::after,
.about__more a::after { content: " →"; }

/* Bild-Platzhalter mit geplantem Motiv */
.am-photo { width: 100%; border-radius: var(--radius); object-fit: cover; }
.am-photo--placeholder {
	display: flex;
	align-items: flex-end;
	aspect-ratio: 4 / 3;
	padding: 18px;
	background:
		linear-gradient(135deg, transparent 49.6%, var(--am-line) 49.6%, var(--am-line) 50.4%, transparent 50.4%),
		linear-gradient(45deg, transparent 49.6%, var(--am-line) 49.6%, var(--am-line) 50.4%, transparent 50.4%),
		var(--am-tint);
	border: 1px solid var(--am-line);
	color: var(--am-muted);
	font-family: var(--font-mono);
	font-size: 0.78rem;
	line-height: 1.4;
}
.am-photo--placeholder span { background: var(--am-tint); padding: 4px 6px; }

/* ------------------------------------------------------------------
   Header
------------------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: #fff;
	border-bottom: 1px solid transparent;
}
.site-header__inner {
	--logo-w: clamp(330px, 42vw, 468px);
	display: flex;
	align-items: flex-end; /* Menü-Buttons unten bündig mit dem Logo */
	justify-content: space-between;
	gap: 24px;
	padding-top: 14px;
	padding-bottom: 14px;
}
.site-logo img { width: var(--logo-w); height: auto; }
.site-logo a { display: block; }
/* Logo ist randlos (PNG): kein Ausgleich nötig, Buttons sitzen direkt auf der Unterkante. */
.site-nav { margin-bottom: 0; }

.site-nav__list {
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-nav__list a {
	display: block;
	padding: 0.6em 1.1em;
	border: 2px solid var(--am-blue);
	border-radius: var(--radius);
	font-family: var(--font-mono);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
	color: var(--am-blue);
}
.site-nav__list a:hover,
.site-nav__list .current-menu-item > a { background: var(--am-tint); }
.site-nav__list li:last-child a,
.site-nav__list .menu-item--cta a { background: var(--am-blue); color: #fff; }
.site-nav__list li:last-child a:hover,
.site-nav__list .menu-item--cta a:hover { background: var(--am-blue-dark); border-color: var(--am-blue-dark); }

.nav-toggle { display: none; }

@media (max-width: 720px) {
	.site-header__inner {
		--logo-w: min(330px, calc(100vw - 92px)); /* Platz für Menü-Button lassen */
		align-items: center;
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.nav-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px; height: 44px;
		border: 2px solid var(--am-blue);
		border-radius: var(--radius);
		background: #fff;
		cursor: pointer;
	}
	.nav-toggle__bar,
	.nav-toggle__bar::before,
	.nav-toggle__bar::after {
		display: block;
		width: 18px; height: 2px;
		background: var(--am-blue);
		position: relative;
		transition: transform 0.2s, background-color 0.2s;
	}
	.nav-toggle__bar::before, .nav-toggle__bar::after { content: ""; position: absolute; left: 0; }
	.nav-toggle__bar::before { top: -6px; }
	.nav-toggle__bar::after { top: 6px; }
	.nav-open .nav-toggle__bar { background: transparent; }
	.nav-open .nav-toggle__bar::before { transform: translateY(6px) rotate(45deg); }
	.nav-open .nav-toggle__bar::after { transform: translateY(-6px) rotate(-45deg); }

	.site-nav {
		display: none;
		position: absolute;
		left: 0; right: 0; top: 100%;
		background: #fff;
		border-bottom: 1px solid var(--am-line);
		padding: 16px var(--gutter) 24px;
	}
	.nav-open .site-nav { display: block; }
	.site-nav__list { flex-direction: column; }
	.site-nav__list a { text-align: center; padding: 0.9em; }
}

/* ------------------------------------------------------------------
   Hero
------------------------------------------------------------------- */
.hero { padding: 12px 0 0; }
.hero__box {
	padding: clamp(28px, 4.8vw, 68px) clamp(28px, 6vw, 80px);
	background: var(--am-blue);
	border-radius: var(--radius);
	color: #fff;
	position: relative;
	overflow: hidden;
}
/* feines Raster im Hintergrund – Anspielung auf Labor/Technik */
.hero__box::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
	background-size: 32px 32px;
	pointer-events: none;
}
.hero__text { position: relative; max-width: 900px; }
.hero__title {
	color: #fff;
	font-size: clamp(2.4rem, 6vw, 4.8rem);
	line-height: 1.02;
	letter-spacing: -0.035em;
	margin-bottom: 0.45em;
}
.hero__lead { font-size: clamp(1.1rem, 1.8vw, 1.35rem); line-height: 1.55; max-width: 38em; color: rgba(255, 255, 255, 0.9); }
.hero__lead strong { color: #fff; font-weight: 700; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; }

/* ------------------------------------------------------------------
   Abschnitte
------------------------------------------------------------------- */
.section { padding: var(--section) 0; }
/* Engerer Anschluss an den Hero */
.about { padding-top: clamp(40px, 4.5vw, 56px); }
.section--tight { padding: 40px 0 0; }
.section--tinted { background: var(--am-tint); }

.section-head { text-align: center; max-width: 760px; margin: 0 auto clamp(36px, 5vw, 64px); }

/* Über mich */
.about__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(32px, 6vw, 88px);
	align-items: center;
}
.about__media .am-photo { aspect-ratio: 1 / 1; }
.about__text .text-link { display: inline-block; margin-top: 0.5rem; }

@media (max-width: 760px) {
	.about__grid { grid-template-columns: minmax(0, 1fr); }
	/* Foto randlos über die volle Bildschirmbreite */
	.about__media { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
	.about__media .am-photo { border-radius: 0; border-left: 0; border-right: 0; }
}

/* Mein Ansatz – Rahmen mit Titel auf der Linie */
.ansatz { padding-top: 0; }
.frame {
	position: relative;
	border: 2px solid var(--am-ink);
	border-radius: var(--radius);
	padding: clamp(44px, 6vw, 72px) clamp(20px, 4vw, 56px) clamp(24px, 4vw, 56px);
}
.frame__title {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -55%);
	margin: 0;
	padding: 0 0.6em;
	background: var(--am-paper);
	white-space: nowrap;
}

.cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 2.5vw, 28px);
}
.card {
	background: var(--am-tint);
	border-radius: var(--radius);
	padding: clamp(22px, 3vw, 34px);
	border-top: 4px solid var(--am-blue);
}
.card__num {
	display: block;
	font-family: var(--font-mono);
	font-size: 0.8rem;
	color: var(--am-blue);
	margin-bottom: 1.6rem;
}
.card p { margin: 0; }
.card--case { background: #fff; }

@media (max-width: 860px) {
	.cards { grid-template-columns: 1fr; }
}

/* Mein Ansatz: ohne Nummer, Text zentriert, blauer Kasten mit Karomuster
   (wie im Hero) versetzt dahinter */
.ansatz .cards {
	--ansatz-offset: 14px;
	gap: clamp(28px, 3.4vw, 40px);
	padding: 0 var(--ansatz-offset) var(--ansatz-offset) 0;
	isolation: isolate; /* Kasten liegt hinter der Karte, aber vor dem Seitenhintergrund */
}
.ansatz .card {
	position: relative;
	border: 2px solid var(--am-blue);
	text-align: center;
}
.ansatz .card::after {
	content: "";
	position: absolute;
	inset: -2px;
	z-index: -1;
	transform: translate(var(--ansatz-offset), var(--ansatz-offset));
	border-radius: var(--radius);
	background-color: var(--am-blue);
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px);
	background-size: 12px 12px;
}
.ansatz .card.wp-block-group::before { content: none; }
.ansatz .card__num { display: none; }

/* Leistungen */
.leistungen { padding-top: 0; }
.services {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}
.service__title {
	display: inline-block;
	padding: 0.5em 0.8em;
	border: 2px solid var(--am-blue);
	border-radius: var(--radius);
	color: var(--am-blue);
	font-size: 1.08rem;
	margin-bottom: 1.4rem;
}
.service__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.service__list li {
	position: relative;
	padding: 0.55em 0 0.55em 1.25em;
	border-bottom: 1px solid var(--am-line);
	font-size: 0.98rem;
	line-height: 1.45;
}
.service__list li:last-child { border-bottom: 0; }
/* kleines blaues Quadrat wie bei den Case Studies */
.service__list li::before {
	content: "";
	position: absolute;
	left: 0.1em;
	top: calc(1.275em - 3px);
	width: 6px;
	height: 6px;
	background: var(--am-blue);
	border-radius: 1px;
}

/* Bildfläche je Leistung: Foto oder – bis die Fotos da sind – helle Fläche
   mit feinem blauem Raster. Titel sitzt als Reiter auf der Unterkante, Nummer oben links. */
.services { counter-reset: am-service; }
.service { position: relative; counter-increment: am-service; }
.service::before {
	content: counter(am-service, decimal-leading-zero);
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 1;
	padding: 3px 8px;
	background: var(--am-blue);
	border-radius: var(--radius);
	color: #fff;
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.04em;
}
.service__photo { aspect-ratio: 4 / 3; margin: 0; }
.service__photo.am-photo--placeholder {
	border: 0;
	background-color: var(--am-tint);
	background-image:
		linear-gradient(rgba(20, 63, 143, 0.12) 1px, transparent 1px),
		linear-gradient(90deg, rgba(20, 63, 143, 0.12) 1px, transparent 1px);
	background-size: 32px 32px;
	background-position: center;
}
/* Solange kein Foto da ist: flaches Band mit großer Nummer, bündig mit dem
   Text im Titel-Reiter darunter. Mit Foto gilt wieder 4:3 bzw. 16:9. */
.service__photo.am-photo--placeholder {
	position: relative;
	aspect-ratio: auto;
	height: clamp(104px, 9.5vw, 128px);
}
.service__photo.am-photo--placeholder::after {
	content: counter(am-service, decimal-leading-zero);
	position: absolute;
	top: clamp(14px, 1.6vw, 20px);
	/* Reiter: 14px Einzug + 2px Rahmen + 0,8em Innenabstand (bei 1,08rem) */
	left: calc(16px + 0.864rem);
	color: var(--am-blue);
	font-family: var(--font-mono);
	font-size: clamp(2.25rem, 4vw, 3.25rem);
	line-height: 1;
	letter-spacing: -0.02em;
}
.service:has(.am-photo--placeholder)::before { display: none; }
.service__photo + .service__title {
	position: relative;
	max-width: calc(100% - 28px);
	margin: -1.45em 0 1.2rem 14px;
	background: #fff;
}
@media (max-width: 960px) {
	.service__photo { aspect-ratio: 16 / 9; }
}

@media (max-width: 960px) {
	.services { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
}

/* Logos */
.logos {
	border-top: 2px solid var(--am-ink);
	padding: clamp(40px, 6vw, 72px) 0;
}
.logos__title { text-align: center; font-weight: 400; margin-bottom: 2.2rem; }
.logos__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: clamp(28px, 5vw, 64px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.logos__list img {
	height: 44px;
	width: auto;
	max-width: 170px;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.7;
	transition: filter 0.2s, opacity 0.2s;
}
.logos__list img:hover { filter: none; opacity: 1; }
.logos__list img[src*="neggst"] { height: 64px; filter: grayscale(1) brightness(0.75); }
.logos__list img[src*="neggst"]:hover { filter: none; }

/* Kontakt */
.kontakt { background: var(--am-ink); color: rgba(255, 255, 255, 0.85); }
/* Einspaltig: Button sitzt auf allen Bildschirmgrößen unter dem Text */
.kontakt__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
}
.kontakt__title { color: #fff; font-size: clamp(2rem, 4vw, 3.2rem); }
.kontakt__text { max-width: 34em; margin: 0; }
.kontakt__channels { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.kontakt .button--light:hover,
.kontakt .button--light:focus-visible,
.kontakt .am-button--light > .wp-block-button__link:hover,
.kontakt .am-button--light > .wp-block-button__link:focus-visible { background: var(--am-blue); border-color: var(--am-blue); color: #fff; }
.kontakt__list { list-style: none; margin: 0; padding: 0; font-family: var(--font-mono); }
.kontakt__list a { color: #fff; }
.kontakt__form { width: 100%; max-width: 640px; }

/* ------------------------------------------------------------------
   Seite „Kontakt“
------------------------------------------------------------------- */
.contact-page__grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(32px, 6vw, 88px);
	align-items: center;
}
.contact-page__title { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 1.4em; }
.contact-list { margin: 0; border-top: 2px solid var(--am-ink); }
.contact-list > div {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 16px;
	padding: 18px 0;
	border-bottom: 1px solid var(--am-line);
}
.contact-list dt {
	font-family: var(--font-mono);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--am-blue);
	padding-top: 0.3em;
}
.contact-list dd { margin: 0; font-size: 1.2rem; color: var(--am-ink); overflow-wrap: anywhere; }
.contact-list a { color: var(--am-ink); text-decoration-color: var(--am-line); }
.contact-list a:hover { color: var(--am-blue); text-decoration-color: currentColor; }
.contact-page__form, .contact-page__content { margin-top: 2.5rem; }
.contact-page__photo { aspect-ratio: 4 / 5; }

@media (max-width: 760px) {
	.contact-page__grid { grid-template-columns: minmax(0, 1fr); }
	.contact-page__media { max-width: 420px; }
	.contact-list > div { grid-template-columns: 1fr; gap: 4px; }
}

/* ------------------------------------------------------------------
   Seite „Mehr Infos“
------------------------------------------------------------------- */
/* Blauer Einstieg mit Text links, Foto rechts */
.hero__box--split {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(32px, 6vw, 80px);
	align-items: center;
}
.hero__statement {
	color: #fff;
	font-size: clamp(1.5rem, 2.7vw, 2.4rem);
	line-height: 1.2;
	hyphens: manual; /* Trennstelle per weichem Trennstrich im Text */
	overflow-wrap: break-word;
	letter-spacing: -0.025em;
	margin: 0;
}
.hero__media { position: relative; }
.hero__photo { aspect-ratio: 4 / 3; }
.hero .am-photo--placeholder {
	background:
		linear-gradient(135deg, transparent 49.7%, rgba(255,255,255,.25) 49.7%, rgba(255,255,255,.25) 50.3%, transparent 50.3%),
		linear-gradient(45deg, transparent 49.7%, rgba(255,255,255,.25) 49.7%, rgba(255,255,255,.25) 50.3%, transparent 50.3%),
		rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.35);
	color: #fff;
}
.hero .am-photo--placeholder span { background: var(--am-blue); }

@media (max-width: 860px) {
	.hero__box--split { grid-template-columns: minmax(0, 1fr); }
	.hero__photo { aspect-ratio: 16 / 10; }
}

.werdegang__grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(32px, 6vw, 88px);
	align-items: start;
}
.werdegang__text p { max-width: 38em; }
.werdegang__text strong { color: var(--am-ink); font-weight: 650; }

.timeline {
	list-style: none;
	margin: 0;
	padding: 28px;
	border: 2px solid var(--am-ink);
	border-radius: var(--radius);
	position: sticky;
	top: 160px;
}
.timeline li {
	display: grid;
	gap: 2px;
	padding: 0 0 18px 22px;
	position: relative;
	border-left: 2px solid var(--am-line);
}
.timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.timeline li::before {
	content: "";
	position: absolute;
	left: -7px;
	top: 4px;
	width: 12px;
	height: 12px;
	background: var(--am-blue);
	border-radius: 2px;
}
.timeline__when { font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--am-blue); }
.timeline__what { color: var(--am-ink); line-height: 1.4; }

@media (max-width: 860px) {
	.werdegang__grid { grid-template-columns: 1fr; }
	.timeline { position: static; }
}

.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { position: relative; padding: 0.35em 0 0.35em 1.25em; line-height: 1.4; }
/* kleines blaues Quadrat – wie die Marker der Zeitleiste */
.checklist li::before {
	content: "";
	position: absolute;
	left: 0.1em;
	top: calc(1.05em - 3px);
	width: 6px;
	height: 6px;
	background: var(--am-blue);
	border-radius: 1px;
}

/* Case Studies: Rahmen statt blauem Balken, Icon im Kasten auf der Oberkante */
.cases {
	--case-icon-h: 60px;
	/* gleiche Strichstärke wie die Icons (im SVG 10,5 bei 314,67 Höhe ≈ 2 px) */
	--case-stroke: calc(var(--case-icon-h) * 10.5 / 314.67);
	--case-badge-h: calc(var(--case-icon-h) + 24px);
}
.cases .cards {
	padding-top: calc(var(--case-badge-h) / 2);
	row-gap: calc(var(--case-badge-h) / 2 + 32px);
}
.card--case {
	position: relative;
	background: #fff;
	border: var(--case-stroke) solid var(--am-blue);
	padding-top: calc(var(--case-badge-h) / 2 + 24px);
}
.card--case .case__icon {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 136px;
	height: var(--case-badge-h);
	margin: 0;
	padding: 0 16px;
	background: #fff;
	border: var(--case-stroke) solid var(--am-blue);
	border-radius: var(--radius);
}
.card--case .case__icon img {
	height: var(--case-icon-h);
	width: auto;
	max-width: none;
}
.pubs { list-style: none; margin: 0 auto; padding: 0; max-width: 960px; }
.pub {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 24px;
	padding: 22px 0;
	border-top: 1px solid var(--am-line);
}
.pub:last-child { border-bottom: 1px solid var(--am-line); }
.pub__year { font-family: var(--font-mono); color: var(--am-blue); padding-top: 2px; }
.pub__title { color: var(--am-ink); font-weight: 600; margin-bottom: 0.3em; line-height: 1.45; }
.pub__meta { color: var(--am-muted); font-size: 0.92rem; margin: 0; }
.pub__meta a { font-family: var(--font-mono); font-size: 0.8rem; margin-left: 0.4em; }

@media (max-width: 600px) {
	.pub { grid-template-columns: 1fr; gap: 4px; }
}

/* ------------------------------------------------------------------
   Inhaltsseiten & Footer
------------------------------------------------------------------- */
.page-title { font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: 1.2em; }
.entry-content > * { margin-top: 0; margin-bottom: 0; }
.entry-content > * + * { margin-top: 1em; }
.entry-content h2 { font-size: 1.35rem; margin-top: 2.2em; }
.entry-content h2 + * { margin-top: 0.6em; }
.entry-content ul { padding-left: 1.2em; }
.entry-content li + li { margin-top: 0.3em; }
.entry-content strong { color: var(--am-ink); }
/* Platzhalter in Rechtstexten (vor Livegang ersetzen) */
.entry-content mark { background: #fff1a8; color: inherit; padding: 0 0.15em; }

.site-footer {
	background: var(--am-ink);
	color: rgba(255, 255, 255, 0.6);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 0.9rem;
}
.site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
	padding-top: 28px;
	padding-bottom: 28px;
}
.site-footer__brand { margin: 0; font-family: var(--font-display); color: #fff; font-weight: 600; }
.site-footer__brand span { font-family: var(--font-mono); font-weight: 400; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.6); margin-left: 0.6em; }
.site-footer__menu { display: flex; gap: 20px; margin: 0; padding: 0; list-style: none; }
.site-footer__menu a { color: rgba(255, 255, 255, 0.8); text-decoration: none; }
.site-footer__menu a:hover { color: #fff; text-decoration: underline; }
.site-footer__copy { margin: 0; }
.site-footer__end { display: flex; align-items: center; gap: 20px; }
.site-footer__social {
	display: inline-flex;
	color: rgba(255, 255, 255, 0.8);
	transition: color 0.15s;
}
.site-footer__social:hover,
.site-footer__social:focus-visible { color: #fff; }
.site-footer__social svg { fill: currentColor; display: block; }
.site-footer :focus-visible { outline-color: #fff; }

/* ------------------------------------------------------------------
   Abschnitte aus dem Seiteneditor (inc/blocks.php)
   Gleiche Klassen wie die PHP-Abschnitte, hier nur die Unterschiede
   der Block-Ausgabe (p statt span, Gruppen statt Listen, figure um img).
------------------------------------------------------------------- */
/* Klassische Themes legen um Gruppen-Inhalte einen zusätzlichen Container –
   der darf Raster und Flexbox nicht unterbrechen. */
.am-section .wp-block-group__inner-container { display: contents; }

.am-section .wp-block-buttons { gap: 12px; }
.am-section .wp-block-button { margin: 0; }
.am-button > .wp-block-button__link { line-height: inherit; }

.about__more { margin: 0.5rem 0 0; }

/* Fotos: Rahmen gibt das Format vor, das Bild füllt ihn aus */
.wp-block-image.am-photo { margin: 0; overflow: hidden; }
.wp-block-image.am-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (max-width: 760px) {
	.about__media .wp-block-image.am-photo img { border-radius: 0; }
}

/* Karten automatisch nummerieren (neue Karte = nächste Nummer) */
.cards.wp-block-group { counter-reset: am-card; }
.card.wp-block-group { counter-increment: am-card; }
.card.wp-block-group::before {
	content: counter(am-card, decimal-leading-zero);
	display: block;
	font-family: var(--font-mono);
	font-size: 0.8rem;
	color: var(--am-blue);
	margin-bottom: 1.6rem;
}
.card--case.wp-block-group::before { content: "Case " counter(am-card, decimal-leading-zero); }
.card .wp-block-list { margin: 0; }

/* Leistungen, Listen */
.service__list.wp-block-list,
.checklist.wp-block-list,
.kontakt__list.wp-block-list { margin: 0; }

/* Kundenlogos */
.logos__list .wp-block-image { margin: 0; }
.logos__list .wp-block-image img {
	height: 44px;
	width: auto;
	max-width: 170px;
	object-fit: contain;
}
.logos__list .wp-block-image img[src*="neggst"] { height: 64px; }

/* Zeitleiste */
.timeline__item {
	display: grid;
	gap: 2px;
	padding: 0 0 18px 22px;
	position: relative;
	border-left: 2px solid var(--am-line);
}
.timeline__item:last-child { padding-bottom: 0; border-left-color: transparent; }
.timeline__item::before {
	content: "";
	position: absolute;
	left: -7px;
	top: 4px;
	width: 12px;
	height: 12px;
	background: var(--am-blue);
	border-radius: 2px;
}
.timeline__item p { margin: 0; }

/* Publikationen */
.pub p { margin: 0; }
.pub .pub__title { margin-bottom: 0.3em; }

/* Kontaktseite: Zeilen wie die Definitionsliste */
.contact-list__row {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 16px;
	padding: 18px 0;
	border-bottom: 1px solid var(--am-line);
}
.contact-list__row p { margin: 0; }
.contact-list__label {
	font-family: var(--font-mono);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--am-blue);
	padding-top: 0.3em;
}
.contact-list__value { font-size: 1.2rem; color: var(--am-ink); overflow-wrap: anywhere; }
@media (max-width: 760px) {
	.contact-list__row { grid-template-columns: 1fr; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; }
}