/* GO Marx – Hauptstylesheet
   Aufbau: 1 Grundlagen · 2 Kopfzeile · 3 Hero · 4 Bausteine · 5 Abschnitte · 6 Formular · 7 Fußzeile · 8 Cookie-Hinweis · 9 Bewegung */

/* ---------- 1 Grundlagen ---------- */

:root {
	--gm-black: #000;
	--gm-ink: #1d1d1f;
	--gm-muted: #6e6e73;
	--gm-line: #d2d2d7;
	--gm-wash: #f5f5f7;
	--gm-white: #fff;
	--gm-pink: #ff3366;
	/* Pink auf Weiß erreicht als Textfarbe keinen ausreichenden Kontrast; für Text gilt dieser dunklere Ton (5,2:1). */
	--gm-pink-text: #d6124a;
	--gm-pink-wash: #fff5f7;
	--gm-pink-soft: #ffd1dc;

	--gm-max: 1240px;
	--gm-gutter: clamp(1.25rem, 5vw, 4.5rem);
	--gm-edge: max(var(--gm-gutter), calc((100% - var(--gm-max)) / 2));
	--gm-space: clamp(4rem, 8vw, 7rem);
	--gm-header-h: 4.5rem;
	--gm-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--gm-header-h) + var(--wp-admin--admin-bar--height, 0px) + 1rem);
}

html.gm-lock {
	overflow: hidden;
}

body {
	margin: 0;
	background: var(--gm-white);
	color: var(--gm-ink);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
	margin: 0;
	color: var(--gm-black);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.03em;
	text-wrap: balance;
	overflow-wrap: break-word;
}

h1 {
	font-size: clamp(2.25rem, 6.2vw, 5rem);
	letter-spacing: -0.04em;
}

h2 {
	font-size: clamp(1.875rem, 3.6vw, 3.25rem);
}

h3 {
	font-size: clamp(1.375rem, 2.2vw, 2rem);
	font-weight: 650;
	line-height: 1.15;
	letter-spacing: -0.025em;
}

p {
	margin: 0 0 1.1em;
	max-width: 62ch;
}

p:last-child {
	margin-bottom: 0;
}

strong {
	font-weight: 650;
	color: var(--gm-black);
}

a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--gm-pink);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.22em;
	transition: color 0.2s;
}

a:hover {
	color: var(--gm-pink-text);
}

:focus-visible {
	outline: 3px solid var(--gm-black);
	outline-offset: 3px;
	border-radius: 4px;
}

[hidden] {
	display: none !important;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link.screen-reader-text:focus {
	clip: auto;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.75rem 1.25rem;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 100;
	background: var(--gm-black);
	color: var(--gm-white);
	border-radius: 999px;
	text-decoration: none;
}

/* ---------- 2 Kopfzeile ----------
   Keine Trennlinie, kein Schatten: Die Leiste liegt transparent auf dem Hero und wird beim Scrollen
   zu mattem Weiß, das den Inhalt durchscheinen lässt. */

.gm-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 50;
	color: var(--gm-black);
	transition: color 0.3s;
}

/* Angemeldet: Platz für die WordPress-Werkzeugleiste lassen. */
.admin-bar .gm-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* Hintergrund als Pseudo-Element: backdrop-filter direkt auf .gm-header würde das mobile Vollbild-Menü einsperren. */
.gm-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(255, 255, 255, 0.82);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	transition: opacity 0.3s;
}

.gm-header-inner {
	position: relative;
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2.5rem);
	height: var(--gm-header-h);
	padding-inline: var(--gm-edge);
}

.gm-logo {
	position: relative;
	z-index: 2;
	display: inline-flex;
	color: inherit;
	text-decoration: none;
}

.gm-logo:hover {
	color: inherit;
}

.gm-logo-svg {
	display: block;
	width: auto;
	height: 1.75rem;
}

.gm-logo-go {
	transition: fill 0.3s;
}

.gm-nav {
	margin-left: auto;
}

.gm-nav ul {
	display: flex;
	gap: clamp(1.25rem, 2.4vw, 2.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gm-nav a {
	display: inline-block;
	padding: 0.5rem 0;
	font-size: 1rem;
	font-weight: 500;
	text-decoration: none;
	color: inherit;
}

.gm-nav li a {
	background: linear-gradient(currentColor, currentColor) left calc(100% - 0.3rem) / 0 2px no-repeat;
	transition: background-size 0.3s var(--gm-ease), color 0.2s;
}

.gm-nav li a:hover,
.gm-nav li a[aria-current] {
	background-size: 100% 2px;
}

@media (hover: hover) {
	.gm-nav li a:hover {
		color: var(--gm-pink-text);
	}
}

.gm-nav .gm-nav-call {
	display: none;
}

.gm-header-call {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0 1.25rem;
	border-radius: 999px;
	/* Dunkleres Pink der Palette: weiße Schrift auf dem Logo-Pink wäre zu kontrastarm. */
	background: var(--gm-pink-text);
	font-size: 1rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	white-space: nowrap;
	color: var(--gm-white);
	transition: background-color 0.2s;
}

.gm-header-call:hover {
	color: var(--gm-white);
}

@media (hover: hover) {
	.gm-header-call:hover {
		background: #b30d3c;
	}
}

/* Startseite: Die Nummer oben erscheint erst, wenn die Kontakt-Buttons im Hero aus dem Bild sind (sonst doppelt).
   Die Klasse setzt main.js; ohne JavaScript bleibt die Nummer immer sichtbar. visibility nimmt sie auch aus der Tab-Reihenfolge. */
.gm-has-hero .gm-header-call {
	transition: opacity 0.2s, visibility 0s, background-color 0.2s;
}

.gm-call-warten .gm-header-call {
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.2s, visibility 0s 0.2s, background-color 0.2s;
}

.gm-burger {
	position: relative;
	z-index: 2;
	display: none;
	width: 2.75rem;
	height: 2.75rem;
	margin-right: -0.5rem;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.gm-burger-lines,
.gm-burger-lines::before {
	position: absolute;
	left: 0.6rem;
	right: 0.6rem;
	height: 2px;
	background: currentColor;
	transition: transform 0.3s var(--gm-ease), top 0.3s var(--gm-ease);
}

.gm-burger-lines {
	top: calc(50% - 5px);
}

.gm-burger-lines::before {
	content: "";
	left: 0;
	right: 0;
	top: 8px;
}

.is-open .gm-burger-lines {
	top: calc(50% - 1px);
	transform: rotate(45deg);
}

.is-open .gm-burger-lines::before {
	top: 0;
	transform: rotate(-90deg);
}

/* Startseite, noch nicht gescrollt: Leiste durchsichtig, Schrift bleibt dunkel (helles Hero-Bild). */
.gm-has-hero .gm-header:not(.is-scrolled):not(.is-open)::before {
	opacity: 0;
}

.gm-no-hero .gm-main {
	padding-top: var(--gm-header-h);
}

@media (max-width: 1023px) {
	.gm-burger {
		display: block;
	}

	.gm-header-call {
		margin-left: auto;
	}

	.gm-nav {
		position: fixed;
		inset: 0;
		z-index: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: 2rem;
		margin: 0;
		padding: calc(var(--gm-header-h) + 2rem) var(--gm-gutter) 2.5rem;
		overflow-y: auto;
		background: var(--gm-white);
		color: var(--gm-black);
		visibility: hidden;
		opacity: 0;
		transition: opacity 0.25s, visibility 0s 0.25s;
	}

	.is-open .gm-nav {
		visibility: visible;
		opacity: 1;
		transition: opacity 0.25s;
	}

	.gm-nav ul {
		flex-direction: column;
		gap: 0;
	}

	.gm-nav li a {
		display: block;
		padding: 0.6rem 0;
		font-size: clamp(1.875rem, 8vw, 2.75rem);
		font-weight: 700;
		letter-spacing: -0.035em;
		line-height: 1.15;
		background: none;
	}

	.gm-nav li a[aria-current="page"] {
		color: var(--gm-pink-text);
	}

	.gm-nav .gm-nav-call {
		display: inline-flex;
		align-self: flex-start;
		align-items: center;
		min-height: 3.5rem;
		padding: 0 1.75rem;
		border-radius: 999px;
		background: var(--gm-black);
		color: var(--gm-white);
		font-size: 1.125rem;
		font-weight: 600;
	}

	.gm-nav a.gm-nav-call:hover {
		color: var(--gm-white);
		background: var(--gm-pink-text);
	}
}

@media (max-width: 439px) {
	.gm-header-call {
		display: none;
	}

	.gm-burger {
		margin-left: auto;
	}
}

/* ---------- 3 Hero ----------
   Foto: Elena dehnt sich mittig im Bild. Auf breiten Bildschirmen rückt das Foto nach rechts,
   links bleibt eine helle Fläche für den Text. Das Foto läuft weich aus, der Text berührt Elena nicht. */

.gm-hero {
	--hero-bg: #f4f1ec;
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-start;
	height: clamp(34rem, 56vw, 100svh);
	padding: calc(var(--gm-header-h) + clamp(2.5rem, 7vw, 6rem)) var(--gm-edge) clamp(2.5rem, 6vw, 5rem);
	overflow: hidden;
	background: var(--hero-bg);
	color: var(--gm-ink);
}

.gm-hero-media {
	position: absolute;
	inset: var(--gm-header-h) 0 0 auto;
	z-index: -1;
	width: 80%;
	overflow: hidden;
	/* Das Foto beginnt unter der Navigation und läuft links nur kurz in die helle Fläche aus. */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%);
	mask-image: linear-gradient(90deg, transparent 0, #000 16%);
}

/* Leichter Auslauf links hinter dem Text, damit Schrift nie direkt auf Bäumen oder Hanteln steht.
   Oben braucht es keinen Schleier mehr, weil das Foto erst unter der Navigation beginnt. */
.gm-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(90deg, rgb(244 241 236 / 0.7) 0, rgb(244 241 236 / 0.45) 30%, transparent 40%);
}

.gm-hero-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 60%;
}

.gm-hero-content {
	width: 100%;
	max-width: min(30rem, 36vw);
}

.gm-hero h1 {
	font-size: clamp(2.25rem, 4.2vw, 4.25rem);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.04em;
	hyphens: manual;
	text-wrap: balance;
}

.gm-hero h1 .gm-accent {
	/* Dunkleres Pink aus der Palette: das Logo-Pink erreicht auf dem hellen Hero keinen ausreichenden Kontrast. */
	color: var(--gm-pink-text);
}

.gm-hero-lead {
	max-width: 30ch;
	margin: clamp(1rem, 1.6vw, 1.5rem) 0 clamp(1.5rem, 2.2vw, 2.25rem);
	font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: -0.01em;
}

/* Buttons im Hero nebeneinander: weniger Innenabstand statt breiterer Spalte, die Spalte darf Elena nicht berühren. */
.gm-hero .gm-actions {
	gap: 0.5rem;
}

.gm-hero .gm-btn {
	padding-inline: 1.15em;
}

/* Vertrauenszeile unter den Buttons: nur belegte Eckdaten. */
.gm-hero-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem 1.25rem;
	margin: clamp(1.25rem, 2vw, 1.75rem) 0 0;
	padding: 0;
	list-style: none;
	color: var(--gm-ink);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.4;
}

.gm-hero-trust li {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	white-space: nowrap;
}

.gm-hero-trust li::before {
	content: "";
	flex: none;
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 50%;
	background: var(--gm-pink);
}

/* Zwischen Handy und Laptop: Foto ganz nach rechts, Text etwas breiter, Verlauf kräftiger. */
@media (min-width: 701px) and (max-width: 1100px) {
	.gm-hero {
		height: auto;
		min-height: 36rem;
	}

	.gm-hero-media {
		width: 78%;
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 36%);
		mask-image: linear-gradient(90deg, transparent 0, #000 36%);
	}

	.gm-hero::after {
		background: linear-gradient(90deg, rgb(244 241 236 / 0.85) 0, rgb(244 241 236 / 0.6) 42%, transparent 58%);
	}

	.gm-hero-content {
		max-width: 46%;
	}
}

/* Handy: Text oben, darunter Elena als eigener Bildausschnitt. */
@media (max-width: 700px) {
	.gm-hero {
		flex-direction: column;
		align-items: stretch;
		height: auto;
		padding: calc(var(--gm-header-h) + 2rem) 0 0;
	}

	.gm-hero-content {
		max-width: none;
		padding-inline: var(--gm-gutter);
	}

	.gm-hero-media {
		position: static;
		display: block;
		width: auto;
		order: 2;
		margin-top: 1rem;
		-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%);
		mask-image: linear-gradient(to bottom, transparent 0, #000 14%);
	}

	.gm-hero-media img {
		height: auto;
		aspect-ratio: 4 / 5;
	}

	.gm-hero::after {
		content: none;
	}
}

/* ---------- 4 Bausteine ---------- */

.gm-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.gm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	min-height: 3.5rem;
	padding: 0.6em 1.6em;
	border: 1.5px solid transparent;
	border-radius: 999px;
	font: inherit;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.gm-btn-primary {
	background: var(--gm-black);
	color: var(--gm-white);
}

.gm-btn-primary:hover {
	background: var(--gm-pink-text);
	color: var(--gm-white);
}

.gm-btn-value {
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	opacity: 0.72;
}

.gm-btn-secondary {
	border-color: currentColor;
	background: transparent;
	color: var(--gm-black);
}

.gm-btn-secondary:hover {
	border-color: var(--gm-black);
	background: var(--gm-black);
	color: var(--gm-white);
}

.gm-actions-hell .gm-btn-primary {
	background: var(--gm-white);
	color: var(--gm-black);
}

.gm-actions-hell .gm-btn-primary:hover {
	background: var(--gm-black);
	color: var(--gm-white);
}

.gm-actions-hell .gm-btn-secondary {
	color: var(--gm-white);
}

.gm-actions-hell .gm-btn-secondary:hover {
	border-color: var(--gm-white);
	background: var(--gm-white);
	color: var(--gm-black);
}

.gm-actions-hell :focus-visible {
	outline-color: var(--gm-white);
}

.gm-lead {
	max-width: 34em;
	color: var(--gm-muted);
	font-size: clamp(1.25rem, 1.9vw, 1.625rem);
	line-height: 1.4;
	letter-spacing: -0.012em;
}

.gm-more {
	margin-top: 1.75rem;
	font-weight: 600;
}

.gm-more a {
	color: var(--gm-black);
}

.gm-more a:hover {
	color: var(--gm-pink-text);
}

.gm-note {
	margin-top: 2rem;
	padding-left: 1.25rem;
	border-left: 3px solid var(--gm-pink);
	color: var(--gm-muted);
	font-size: 0.95em;
}

.gm-meta {
	margin-top: 3rem;
	color: var(--gm-muted);
	font-size: 0.9em;
}

/* Schrittfolge: nummeriert, weil die Reihenfolge Bedeutung hat. */
.gm-steps {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: gm-step;
}

.gm-steps li {
	position: relative;
	padding: 1.5rem 0 1.5rem 3.5rem;
	border-top: 1px solid var(--gm-line);
	counter-increment: gm-step;
}

.gm-steps li:first-child {
	padding-top: 0;
	border-top: 0;
}

.gm-steps li::before {
	content: counter(gm-step);
	position: absolute;
	left: 0;
	color: var(--gm-pink-text);
	font-size: 1.375em;
	font-weight: 700;
	line-height: 1.25;
	font-variant-numeric: tabular-nums;
}

.gm-steps strong {
	display: block;
	margin-bottom: 0.2em;
	font-size: 1.25em;
	font-weight: 650;
	line-height: 1.25;
	letter-spacing: -0.02em;
}

/* Aufzählung mit dem Punkt aus dem Logo. */
.gm-points {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gm-points li {
	position: relative;
	max-width: 58ch;
	padding-left: 1.75rem;
}

.gm-points li + li {
	margin-top: 1rem;
}

.gm-points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.56em;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: var(--gm-pink);
}

.gm-timeline {
	margin: 0 0 1.5rem 0.375rem;
	padding: 0;
	list-style: none;
	border-left: 2px solid var(--gm-pink-soft);
}

.gm-timeline li {
	position: relative;
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	gap: 1rem;
	padding: 0.75rem 0 0.75rem 1.75rem;
	color: var(--gm-ink);
	line-height: 1.45;
}

/* Punkt auf der Linie, weißer Ring trennt ihn von der Linie */
.gm-timeline li::before {
	content: "";
	position: absolute;
	left: calc(-0.375rem - 1px);
	top: 1.2em;
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 50%;
	background: var(--gm-pink);
	box-shadow: 0 0 0 4px var(--gm-white);
}

.gm-timeline strong {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--gm-pink-text);
}

@media (max-width: 520px) {
	.gm-timeline li {
		grid-template-columns: 3.25rem minmax(0, 1fr);
		gap: 0.75rem;
		padding-left: 1.25rem;
	}
}

/* Fragen und Antworten */
.gm-faq {
	border-top: 1px solid var(--gm-line);
}

.gm-faq details {
	border-bottom: 1px solid var(--gm-line);
}

.gm-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.35rem 0;
	color: var(--gm-black);
	font-size: 1.2em;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.02em;
	list-style: none;
	cursor: pointer;
}

.gm-faq summary::-webkit-details-marker {
	display: none;
}

.gm-faq summary::after {
	content: "";
	flex: none;
	width: 1.1rem;
	height: 1.1rem;
	background:
		linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
	transition: transform 0.3s var(--gm-ease);
}

.gm-faq details[open] summary::after {
	transform: rotate(45deg);
}

.gm-faq summary:hover {
	color: var(--gm-pink-text);
}

.gm-faq details > p {
	max-width: 58ch;
	padding: 0 2.5rem 1.5rem 0;
	margin: 0;
}

.gm-contact {
	margin: 0 0 2rem;
	border-top: 1px solid var(--gm-line);
}

.gm-contact > div {
	display: grid;
	grid-template-columns: 7rem minmax(0, 1fr);
	gap: 1rem;
	align-items: baseline;
	padding: 1.15rem 0;
	border-bottom: 1px solid var(--gm-line);
}

.gm-contact dt {
	color: var(--gm-muted);
}

.gm-contact dd {
	margin: 0;
}

.gm-contact a {
	color: var(--gm-black);
	font-size: 1.3em;
	font-weight: 600;
	letter-spacing: -0.02em;
	overflow-wrap: anywhere;
}

.gm-contact a:hover {
	color: var(--gm-pink-text);
}

@media (max-width: 520px) {
	.gm-contact > div {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.15rem;
	}

	.gm-contact a {
		font-size: 1.2em;
	}
}

/* ---------- 5 Abschnitte ---------- */

.gm-section {
	margin-inline: var(--gm-edge);
	padding-bottom: var(--gm-space);
}

.gm-hero + .gm-section {
	padding-top: var(--gm-space);
}

.gm-pagehead {
	margin-inline: var(--gm-edge);
	padding: clamp(3rem, 8vw, 7rem) 0 clamp(3.5rem, 7vw, 6rem);
}

.gm-pagehead h1 {
	max-width: 14em;
	margin-bottom: clamp(1.25rem, 2.4vw, 2rem);
}

.gm-back {
	margin-bottom: 1.5rem;
	font-size: 1rem;
	font-weight: 500;
}

.gm-back a {
	color: var(--gm-muted);
	text-decoration: none;
}

.gm-back a::before {
	content: "\2190\00a0\00a0";
}

.gm-back a:hover {
	color: var(--gm-pink-text);
}

.gm-statement-text {
	max-width: 16em;
	color: var(--gm-black);
	font-size: clamp(2rem, 4.2vw, 3.75rem);
	font-weight: 600;
	line-height: 1.14;
	letter-spacing: -0.032em;
	text-wrap: balance;
}

/* Angebotsliste: jede Zeile ist als Ganzes ein Link. Der Ring rechts füllt sich beim Überfahren – der Punkt aus dem Logo. */
.gm-offers > h2 {
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.gm-offer-list {
	border-top: 1px solid var(--gm-line);
}

.gm-offer {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 1.5rem;
	gap: 0.5rem clamp(1.5rem, 4vw, 4rem);
	align-items: baseline;
	padding: clamp(1.5rem, 2.8vw, 2.5rem) 0;
	border-bottom: 1px solid var(--gm-line);
}

.gm-offer h3 a {
	color: inherit;
	text-decoration: none;
}

.gm-offer h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.gm-offer h3 a:focus-visible {
	outline: none;
}

.gm-offer:focus-within {
	outline: 3px solid var(--gm-black);
	outline-offset: 3px;
	border-radius: 4px;
}

.gm-offer p {
	margin: 0;
	color: var(--gm-muted);
}

.gm-offer::after {
	content: "";
	grid-column: 3;
	grid-row: 1;
	align-self: center;
	justify-self: end;
	width: 1rem;
	height: 1rem;
	border: 1.5px solid var(--gm-line);
	border-radius: 50%;
	transition: background-color 0.25s, border-color 0.25s, transform 0.35s var(--gm-ease);
}

.gm-offer:focus-within::after {
	border-color: var(--gm-pink);
	background: var(--gm-pink);
	transform: scale(1.35);
}

@media (hover: hover) {
	.gm-offer:hover::after {
		border-color: var(--gm-pink);
		background: var(--gm-pink);
		transform: scale(1.35);
	}
}

/* Zweispaltig: Überschrift links (bleibt beim Scrollen stehen), Inhalt rechts. */
.gm-split {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 2rem clamp(2rem, 6vw, 6rem);
	align-items: start;
	padding-top: clamp(2rem, 3.6vw, 3.25rem);
	border-top: 1px solid var(--gm-line);
}

.gm-split > h2 {
	position: sticky;
	/* Unterhalb der Kopfzeile andocken; angemeldet kommt die WordPress-Werkzeugleiste dazu. */
	top: calc(var(--gm-header-h) + var(--wp-admin--admin-bar--height, 0px) + 2rem);
	font-size: clamp(1.75rem, 3vw, 2.75rem);
}

.gm-pagehead + .gm-split,
.gm-cats-section + .gm-split,
.gm-offers + .gm-split {
	border-top: 0;
	padding-top: 0;
}

.gm-offers-page + .gm-split {
	padding-top: 0;
}

.gm-cta {
	padding: clamp(2.5rem, 6.5vw, 6rem);
	margin-bottom: var(--gm-space);
	border-radius: clamp(1.5rem, 3vw, 2.5rem);
	background: var(--gm-pink);
	color: var(--gm-white);
}

.gm-cta h2 {
	color: var(--gm-white);
	max-width: 12em;
	font-size: clamp(2.125rem, 5vw, 4.25rem);
	letter-spacing: -0.04em;
}

.gm-cta .gm-lead {
	margin: clamp(1rem, 2vw, 1.5rem) 0 clamp(1.75rem, 3vw, 2.5rem);
	max-width: 30em;
	/* Weiß auf #ff3366 hat 3,55:1: gilt nur für große Schrift (ab 24px), deshalb hier mindestens 1,5rem. */
	color: var(--gm-white);
	font-size: clamp(1.5rem, 2vw, 1.75rem);
}

/* Sehr schmale Handys: weniger Innenabstand, damit die Überschrift ganze Wörter behält. */
@media (max-width: 380px) {
	.gm-cta {
		padding-inline: 1.5rem;
	}
}

/* Buttons auf Pink: Weiß mit pinker Schrift wäre zu schwach, deshalb Schwarz und Weiß mit schwarzer Schrift. */
.gm-cta .gm-btn-secondary {
	border-color: var(--gm-white);
	background: var(--gm-white);
	color: var(--gm-black);
}

@media (hover: hover) {
	.gm-cta .gm-btn-primary:hover {
		background: var(--gm-white);
		color: var(--gm-black);
	}

	.gm-cta .gm-btn-secondary:hover {
		border-color: var(--gm-black);
		background: var(--gm-black);
		color: var(--gm-white);
	}
}

.gm-prose {
	max-width: 44rem;
}

.gm-prose h2 {
	margin: 2.75rem 0 0.75rem;
	font-size: 1.4375rem;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.gm-prose h2:first-child {
	margin-top: 0;
}

@media (max-width: 800px) {
	.gm-split {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}

	.gm-split > h2 {
		position: static;
	}

	.gm-offer {
		grid-template-columns: minmax(0, 1fr) 1.5rem;
	}

	.gm-offer p {
		grid-column: 1;
	}

	.gm-offer::after {
		grid-column: 2;
	}
}

/* Angebote (Startseite): nummerierte Liste, jede Zeile ist als Ganzes ein Link.
   Mit Maus: Die aktive Zeile (Überfahren oder Tastatur-Fokus) zeigt ihr Bild groß daneben, Nummer und Pfeil werden pink.
   Auf Touch-Geräten und schmalen Bildschirmen trägt jede Zeile stattdessen ein kleines Vorschaubild. */

.gm-cats-section > h2 {
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.gm-cats-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--gm-line);
}

.gm-cat {
	border-bottom: 1px solid var(--gm-line);
}

.gm-cat-link {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 5rem;
	grid-template-areas:
		"num thumb"
		"body thumb";
	gap: 0.25rem 1.25rem;
	align-items: center;
	padding: 1.25rem 0;
	color: var(--gm-ink);
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

.gm-cat-link:focus-visible {
	outline: 3px solid var(--gm-black);
	outline-offset: 4px;
	border-radius: 4px;
}

.gm-cat-num {
	grid-area: num;
	color: var(--gm-pink-text);
	font-size: 0.9375rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}

.gm-cat-body {
	grid-area: body;
	min-width: 0;
}

.gm-cat-title {
	display: block;
	font-size: clamp(1.375rem, 2.2vw, 1.875rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.02em;
	hyphens: manual;
}

.gm-cat-desc {
	display: block;
	margin-top: 0.4rem;
	color: var(--gm-muted);
	font-size: 1.0625rem;
	line-height: 1.45;
	text-wrap: pretty;
}

.gm-cat-thumb {
	grid-area: thumb;
	width: 5rem;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 0.875rem;
	background: var(--gm-wash);
}

.gm-cat-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	outline: 1px solid oklch(0 0 0 / 0.1);
	outline-offset: -1px;
}

.gm-cat-arrow,
.gm-cats-stage {
	display: none;
}

/* Mit Maus und genug Platz: Liste links, Bühne mit dem Bild der aktiven Zeile rechts. */
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
	.gm-cats {
		display: grid;
		grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
		gap: clamp(2.5rem, 5vw, 5rem);
		align-items: start;
	}

	.gm-cat-link {
		grid-template-columns: 3.25rem minmax(0, 1fr) 1.5rem;
		grid-template-areas: "num body arrow";
		align-items: baseline;
		padding: clamp(1.25rem, 2vw, 1.75rem) 0;
	}

	.gm-cat-num {
		color: var(--gm-muted);
		transition: color 0.15s;
	}

	.gm-cat-thumb {
		display: none;
	}

	.gm-cat-arrow {
		grid-area: arrow;
		display: block;
		align-self: center;
		color: var(--gm-pink-text);
		opacity: 0;
		transition: opacity 0.15s;
	}

	.gm-cat-arrow svg {
		display: block;
	}

	.gm-cat.is-active .gm-cat-num,
	.gm-cat.is-active .gm-cat-title {
		color: var(--gm-pink-text);
	}

	.gm-cat.is-active .gm-cat-arrow {
		opacity: 1;
	}

	/* Breite Spalte: ganze Wörter statt „Schlag-anfall“; die weichen Trennstellen gelten nur für schmale Bildschirme. */
	.gm-cat-title {
		hyphens: none;
		text-wrap: balance;
		transition: color 0.15s;
	}

	.gm-cats-stage {
		position: sticky;
		top: calc(var(--gm-header-h) + var(--wp-admin--admin-bar--height, 0px) + 2rem);
		display: block;
		aspect-ratio: 4 / 5;
		overflow: hidden;
		border-radius: clamp(1.25rem, 2vw, 1.75rem);
		background: var(--gm-wash);
	}

	.gm-cats-img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		opacity: 0;
		transition: opacity 0.35s ease;
	}

	.gm-cats-img.is-active {
		opacity: 1;
	}

	.gm-cats-stage::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
		box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.1);
		pointer-events: none;
	}
}

@media (min-width: 901px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.gm-cats-img {
		transform: scale(1.04);
		transition: opacity 0.35s ease, transform 0.8s var(--gm-ease);
	}

	.gm-cats-img.is-active {
		transform: none;
	}

	.gm-cat-arrow {
		transform: translateX(-0.5rem);
		transition: opacity 0.15s, transform 0.3s var(--gm-ease);
	}

	.gm-cat.is-active .gm-cat-arrow {
		transform: none;
	}
}

/* Statement: links das Zitat mit Signatur und Link zu „Über Elena Marx“, rechts drei Punkte, wie Elena arbeitet. */
.gm-statement {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(2rem, 6vw, 6rem);
	align-items: center;
}

.gm-statement-zitat::before {
	content: "\201C" / "";
	display: block;
	height: 0.45em;
	margin-bottom: 0.25rem;
	color: var(--gm-pink);
	font-size: clamp(4.5rem, 8vw, 7rem);
	font-weight: 600;
	line-height: 0.7;
}

.gm-statement-zitat > :last-child {
	margin-bottom: 0;
}

.gm-statement-text em {
	font-style: normal;
	color: var(--gm-pink-text);
}

.gm-statement-sig {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	margin-top: clamp(1.75rem, 3vw, 2.5rem);
	font-size: 1.0625rem;
	line-height: 1.4;
}

.gm-statement-sig strong {
	color: var(--gm-black);
	font-weight: 600;
}

.gm-statement-sig span {
	color: var(--gm-muted);
	font-size: 1rem;
}

.gm-statement-more {
	margin-top: 1.5rem;
	font-size: 1.0625rem;
	font-weight: 500;
}

.gm-statement-more a {
	color: var(--gm-pink-text);
	text-decoration: none;
}

@media (hover: hover) {
	.gm-statement-more a:hover {
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}
}

/* Drei Punkte an einer zarten pinken Leiste. */
.gm-statement-punkte {
	max-width: none;
	margin: 0;
	padding: 0;
	list-style: none;
	border-left: 2px solid var(--gm-pink-soft);
}

.gm-statement-punkte li {
	position: relative;
	margin: 0;
	padding: 0 0 1.75rem 1.75rem;
}

.gm-statement-punkte li:last-child {
	padding-bottom: 0;
}

.gm-statement-punkte li::before {
	content: "";
	position: absolute;
	top: 0.5rem;
	left: calc(-0.3125rem - 1px);
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 50%;
	background: var(--gm-pink);
	box-shadow: 0 0 0 4px var(--gm-white);
}

.gm-statement-punkte strong {
	display: block;
	color: var(--gm-black);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.gm-statement-punkte span {
	display: block;
	margin-top: 0.25rem;
	color: var(--gm-muted);
	font-size: 1.0625rem;
	line-height: 1.5;
}

@media (max-width: 800px) {
	.gm-statement {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Rhythmus der Startseite: Hero beige → Statement rosé → Angebote weiß → Ablauf beige → Fragen weiß → Kontakt als pinke Karte.
   Die Ablauf-Fläche wird per border-image bis zum Fensterrand verlängert, der Inhalt bleibt im Raster. */
.home .gm-main {
	overflow-x: clip;
}

.home .gm-statement {
	padding-top: var(--gm-space);
}

.home .gm-start-ablauf {
	--gm-band: #f4f1ec;
	padding-block: var(--gm-space);
	border-image: conic-gradient(var(--gm-band) 0 0) fill 0 // 0 100vmax;
}

.home .gm-start-ablauf > h2 {
	font-size: clamp(1.75rem, 3vw, 2.75rem);
}

.home .gm-start-fragen {
	padding-top: var(--gm-space);
	border-top: 0;
}

/* Kategorie-Bild unter dem Seitenkopf der Angebotsseiten: randlos, ohne runde Ecken.
   Trägt den Übergangs-Namen „gm-kategorie“ wie das angeklickte Bild der Startseiten-Liste. */
.gm-katbild-section {
	padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

.gm-katbild {
	position: relative;
	height: clamp(20rem, 58svh, 40rem);
	margin: 0;
	overflow: hidden;
	background: linear-gradient(165deg, var(--cat-a), var(--cat-b));
	view-transition-name: gm-kategorie;
}

.gm-katbild img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gm-katbild.is-placeholder::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top right, transparent calc(50% - 0.5px), rgba(255, 255, 255, 0.28) calc(50% - 0.5px), rgba(255, 255, 255, 0.28) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
		linear-gradient(to bottom right, transparent calc(50% - 0.5px), rgba(255, 255, 255, 0.28) calc(50% - 0.5px), rgba(255, 255, 255, 0.28) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}

.gm-katbild-section + .gm-split {
	border-top: 0;
	padding-top: 0;
}

.gm-related {
	border-top: 1px solid var(--gm-line);
	padding-top: clamp(2rem, 3.6vw, 3.25rem);
}

@media (max-width: 700px) {
	.gm-katbild {
		height: auto;
		aspect-ratio: 4 / 3;
	}
}

/* Seitenwechsel: sanftes Überblenden; das Kategorie-Bild wächst von der Spalte in die Angebotsseite (Chrome, Safari). */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}

	::view-transition-group(gm-kategorie) {
		animation-duration: 0.7s;
		animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	::view-transition-old(root),
	::view-transition-new(root) {
		animation-duration: 0.35s;
	}
}

/* Orientierungsleiste „Auf dieser Seite“: links eine Übersicht aller Abschnitte, der aktuelle groß und schwarz, die übrigen klein und grau.
   Auf dem Handy entfällt die Leiste, dort stehen die Überschriften wie gewohnt über dem Text. */
.gm-story {
	margin-inline: var(--gm-edge);
	padding-bottom: var(--gm-space);
}

.gm-story-nav {
	display: none;
}

.gm-story-main > .gm-section {
	margin-inline: 0;
	scroll-margin-top: calc(var(--gm-header-h) + var(--wp-admin--admin-bar--height, 0px) + 1.5rem);
}

.gm-story-main > .gm-split:first-child {
	padding-top: 0;
	border-top: 0;
}

/* Abschnitte innerhalb der Story gehören zusammen: halber Abstand statt des vollen Section-Abstands. */
.gm-story-main > .gm-split:not(:last-child) {
	padding-bottom: clamp(2.5rem, 4.5vw, 4rem);
}

/* Endet eine Fragengruppe mit ihrer eigenen Linie, trägt die nächste Gruppe keine zweite. */
.gm-story-main > .gm-split:has(> .gm-split-body > .gm-faq:last-child) + .gm-split {
	border-top: 0;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

@media (min-width: 801px) {
	.gm-story {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		column-gap: clamp(2rem, 6vw, 6rem);
		align-items: start;
	}

	.gm-story-nav {
		position: sticky;
		top: calc(var(--gm-header-h) + var(--wp-admin--admin-bar--height, 0px) + 2rem);
		display: block;
	}

	.gm-story-nav ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* Alle Titel der Leiste verwenden dieselbe Schriftstärke und Laufweite und eine Breite in em:
	   Dadurch brechen sie in jeder Größe an denselben Stellen um, die Zeilenzahl bleibt beim Wechsel gleich. */
	.gm-story-nav {
		container-type: inline-size;
	}

	.gm-story-nav a {
		display: block;
		max-width: 14em;
		padding: 0.4em 0;
		color: var(--gm-muted);
		font-size: 1.0625rem;
		font-weight: 600;
		line-height: 1.12;
		letter-spacing: -0.02em;
		text-decoration: none;
		text-wrap: balance;
		transition: font-size 0.5s var(--gm-ease), color 0.4s;
	}

	.gm-story-nav a:hover {
		color: var(--gm-black);
	}

	.gm-story-nav a.is-active {
		color: var(--gm-black);
		font-size: clamp(1.125rem, calc(100cqw / 14), 2.75rem);
	}

	/* Schiene zwischen Leiste und Text: Sie zeigt, welcher Text zur hervorgehobenen Überschrift gehört.
	   Der aktuelle Abschnitt hat eine pinke Schiene, die übrigen eine graue und etwas blassere Schrift. */
	.gm-story-main > .gm-split {
		position: relative;
	}

	.gm-story-main > .gm-split::before {
		content: "";
		position: absolute;
		left: calc(-1 * clamp(1rem, 3vw, 3rem) - 1px);
		top: 0;
		bottom: 1.25rem;
		width: 2px;
		background: var(--gm-line);
		transition: background-color 0.4s;
	}

	.gm-story-main > .gm-split:last-child::before {
		bottom: 0;
	}

	.gm-story.has-current .gm-split.is-current::before {
		background: var(--gm-pink);
	}

	.gm-story.has-current .gm-split:not(.is-current) .gm-split-body {
		opacity: 0.62;
	}

	.gm-story .gm-split-body {
		transition: opacity 0.5s;
	}

	/* Die Überschriften im Inhalt bleiben für Suchmaschinen und Screenreader erhalten, die Leiste zeigt denselben Text. */
	.gm-story-main > .gm-split {
		display: block;
		padding-top: clamp(2rem, 3.6vw, 3.25rem);
		border-top: 1px solid var(--gm-line);
	}

	.gm-story-main > .gm-split:first-child {
		padding-top: 0;
		border-top: 0;
	}

	/* Beginnt der Inhalt mit einer Liste, die selbst eine Linie oben trägt (Fragen), entfällt die Abschnittslinie. */
	.gm-story-main > .gm-split:has(> .gm-split-body > .gm-faq:first-child) {
		border-top: 0;
	}

	.gm-story-main > .gm-split > h2 {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
}

/* ---------- 6 Formular ---------- */

/* Volle Spaltenbreite: Felder enden auf derselben Kante wie die Trennlinien darüber. */
.gm-form-wrap {
	margin-top: 2rem;
}

.gm-form p {
	max-width: none;
	margin: 0 0 1.25rem;
}

.gm-field-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 1rem;
}

.gm-form label {
	display: block;
	margin-bottom: 0.45rem;
	color: var(--gm-black);
	font-size: 1rem;
	font-weight: 600;
}

.gm-form input[type="text"],
.gm-form input[type="tel"],
.gm-form input[type="email"],
.gm-form select {
	display: block;
	width: 100%;
	min-height: 3.5rem;
	padding: 0.75rem 1rem;
	border: 1.5px solid #86868b;
	border-radius: 0.875rem;
	background-color: var(--gm-white);
	color: var(--gm-ink);
	font: inherit;
}

.gm-form select {
	appearance: none;
	padding-right: 2.75rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231d1d1f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 0.75rem;
}

.gm-form input:focus-visible,
.gm-form select:focus-visible {
	border-color: var(--gm-black);
	outline-offset: 2px;
	border-radius: 0.875rem;
}

.gm-form .gm-form-hint {
	margin-top: -0.6rem;
	color: var(--gm-muted);
	font-size: 0.9375rem;
}

.gm-form .gm-form-privacy {
	margin: 0.5rem 0 1.75rem;
	color: var(--gm-muted);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.gm-form-trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.gm-notice {
	margin-bottom: 1.5rem;
	padding: 1.25rem 1.5rem;
	border-radius: 1rem;
	background: var(--gm-wash);
}

.gm-notice-error {
	border: 1.5px solid #b3261e;
	background: var(--gm-white);
	color: #8c1d18;
}

.gm-notice p {
	margin-bottom: 0.25rem;
}

@media (max-width: 560px) {
	.gm-field-row {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- 7 Fußzeile ---------- */

.gm-footer {
	padding: clamp(3.5rem, 7vw, 6rem) var(--gm-edge) 2rem;
	background: var(--gm-wash);
	font-size: 1rem;
}

.gm-footer-top {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.3fr) minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 2.5rem clamp(1.5rem, 4vw, 4rem);
	padding-bottom: clamp(3rem, 6vw, 5rem);
}

.gm-footer-brand p {
	margin-top: 1.25rem;
	color: var(--gm-muted);
}

.gm-footer h2 {
	margin-bottom: 0.9rem;
	color: var(--gm-muted);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0;
}

.gm-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gm-footer-col li {
	padding: 0.3rem 0;
}

.gm-footer a,
.gm-footer button {
	color: var(--gm-ink);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.gm-footer a:hover,
.gm-footer button:hover {
	color: var(--gm-pink-text);
	text-decoration: underline;
	text-decoration-color: var(--gm-pink);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.22em;
}

.gm-footer-bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.75rem 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--gm-line);
	color: var(--gm-muted);
	font-size: 0.9375rem;
}

.gm-footer-bottom p {
	margin: 0;
}

.gm-footer-bottom ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.75rem;
}

.gm-footer-bottom a,
.gm-footer-bottom button {
	color: var(--gm-muted);
}

.gm-footer button {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	cursor: pointer;
}

@media (max-width: 900px) {
	.gm-footer-top {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gm-footer-brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 520px) {
	.gm-footer-top {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- 8 Cookie-Hinweis ---------- */

.gm-consent {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 60;
	width: min(27rem, calc(100vw - 2rem));
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	padding: 1.5rem;
	border: 1px solid var(--gm-line);
	border-radius: 1.25rem;
	background: var(--gm-white);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.14);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.gm-consent h2 {
	margin-bottom: 0.5rem;
	font-size: 1.1875rem;
	line-height: 1.25;
	letter-spacing: -0.02em;
}

.gm-consent p {
	margin-bottom: 1rem;
}

.gm-consent-options {
	display: grid;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}

.gm-consent-options label {
	display: grid;
	grid-template-columns: 1.25rem minmax(0, 1fr);
	gap: 0.75rem;
	align-items: start;
}

.gm-consent-options input {
	width: 1.25rem;
	height: 1.25rem;
	margin: 0.1rem 0 0;
	accent-color: var(--gm-black);
}

.gm-consent-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.gm-consent .gm-btn {
	min-height: 2.875rem;
	padding: 0.4em 1.2em;
	font-size: 0.9375rem;
}

.gm-consent-link {
	min-height: 2.875rem;
	padding: 0 0.5rem;
	border: 0;
	background: none;
	color: var(--gm-ink);
	font: inherit;
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--gm-line);
	text-underline-offset: 0.22em;
	cursor: pointer;
}

.gm-consent-link:hover {
	color: var(--gm-pink-text);
}

.gm-consent .gm-consent-legal {
	display: flex;
	gap: 1.25rem;
	margin: 1rem 0 0;
	color: var(--gm-muted);
	font-size: 0.875rem;
}

.gm-consent-legal a {
	text-decoration-color: var(--gm-line);
	text-decoration-thickness: 1px;
}

/* Breite Bildschirme: flache Leiste am unteren Rand statt Karte, damit weder Hero-Text noch Elena verdeckt werden. */
@media (min-width: 900px) {
	.gm-consent {
		left: 1rem;
		width: auto;
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 2.5rem;
		align-items: center;
		padding: 1.1rem 1.5rem;
	}

	.gm-consent > h2,
	.gm-consent > p,
	.gm-consent-options {
		grid-column: 1;
	}

	.gm-consent > p {
		max-width: none;
		margin-bottom: 0.35rem;
	}

	.gm-consent-options {
		margin: 0.5rem 0;
	}

	.gm-consent-actions {
		grid-column: 2;
		grid-row: 1 / span 4;
	}

	.gm-consent .gm-consent-legal {
		margin-top: 0;
	}
}

/* Kurzer Hinweis (Standard, solange nichts Einwilligungspflichtiges eingebunden ist): ein Satz plus „Verstanden“.
   Mobil eine schmale Leiste am unteren Rand, breit mittig mit begrenzter Breite. */
.gm-consent.gm-consent-kurz {
	left: 0.75rem;
	right: 0.75rem;
	bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
	width: auto;
	max-width: 44rem;
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.625rem 0.625rem 0.625rem 1.125rem;
	border-radius: 1.125rem;
	font-size: 0.875rem;
	line-height: 1.45;
}

.gm-consent-kurz > p {
	flex: 1 1 auto;
	min-width: 0;
	max-width: none;
	margin: 0;
	text-wrap: pretty;
}

.gm-consent-kurz > p a {
	white-space: nowrap;
	text-decoration-color: var(--gm-line);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.gm-consent.gm-consent-kurz .gm-btn {
	flex: none;
	min-height: 2.75rem;
	padding: 0.4em 1.15em;
	font-size: 0.875rem;
}

@media (min-width: 900px) {
	.gm-consent.gm-consent-kurz {
		bottom: 1.25rem;
		gap: 1.5rem;
		padding: 0.625rem 0.625rem 0.625rem 1.5rem;
	}
}

/* ---------- Über mich ----------
   Kopf: Name links, Foto in der Mitte, Einleitung rechts. Darunter Kennzahlen, dann die Story ohne Trennlinien. */
.gm-ueber-kopf {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, min(27rem, 33vw)) minmax(0, 1fr);
	gap: clamp(1.5rem, 3.5vw, 3rem);
	align-items: center;
	margin-inline: var(--gm-edge);
	padding-top: clamp(2.5rem, 6vw, 5rem);
}

.gm-ueber-kopf .gm-eyebrow {
	margin: 0 0 0.75rem;
	color: var(--gm-pink-text);
	font-size: clamp(1rem, 1.4vw, 1.25rem);
	font-weight: 500;
}

.gm-ueber-kopf h1 {
	font-size: clamp(2.75rem, 6.4vw, 5.5rem);
	font-weight: 300;
	line-height: 1.02;
	text-wrap: balance;
}

.gm-ueber-kopf h1 b {
	font-weight: 600;
	color: var(--gm-pink-text);
}

.gm-portraet {
	margin: 0;
}

/* Das Foto läuft unten und an den Seiten weich in die weiße Seite aus. */
.gm-portraet img {
	display: block;
	width: 100%;
	height: auto;
	--gm-fade: linear-gradient(to bottom, #000 58%, rgb(0 0 0 / 0.9) 68%, rgb(0 0 0 / 0.65) 78%, rgb(0 0 0 / 0.35) 87%, rgb(0 0 0 / 0.12) 94%, transparent 100%);
	--gm-side: radial-gradient(130% 75% at 50% 32%, #000 70%, transparent 100%);
	-webkit-mask-image: var(--gm-fade), var(--gm-side);
	-webkit-mask-composite: source-in;
	mask-image: var(--gm-fade), var(--gm-side);
	mask-composite: intersect;
}

.gm-ueber-lead {
	margin: 0;
	color: var(--gm-muted);
	font-size: clamp(1.25rem, 2.4vw, 1.875rem);
	line-height: 1.25;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.gm-ueber-lead em {
	font-style: normal;
	font-weight: 600;
	color: var(--gm-pink-text);
}

.gm-ueber-lead strong {
	font-weight: 600;
	color: var(--gm-ink);
}

.gm-anruf {
	margin: 2rem 0 0;
}

.gm-anruf .gm-btn {
	white-space: nowrap;
}

.gm-kennzahlen {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1rem, 3vw, 2.5rem);
	max-width: none;
	margin: clamp(1rem, 2vw, 2rem) var(--gm-edge) 0;
	padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.25rem, 3.5vw, 3rem);
	list-style: none;
	border-radius: 24px;
	background: var(--gm-pink-wash);
}

.gm-kennzahlen li {
	display: grid;
	gap: 0.375rem;
	align-content: start;
}

.gm-kennzahlen strong {
	color: var(--gm-pink-text);
	font-size: clamp(2rem, 4.4vw, 3.5rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
}

.gm-kennzahlen span {
	color: var(--gm-ink);
	font-size: clamp(1rem, 1.3vw, 1.125rem);
	line-height: 1.35;
}

.gm-ueber-story {
	padding-top: clamp(3rem, 6vw, 5rem);
}

.gm-ueber-story .gm-split-body p {
	max-width: 34em;
	color: var(--gm-muted);
	font-size: clamp(1.125rem, 1.5vw, 1.3125rem);
	text-wrap: pretty;
}

.gm-ueber-story .gm-split-body em {
	font-style: normal;
	font-weight: 500;
	color: var(--gm-pink-text);
}

.gm-ueber-story .gm-timeline li {
	font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
}

.gm-zitat {
	margin: 2.25rem 0 0;
	padding: 0;
	border: 0;
}

.gm-zitat::before {
	content: "\201C";
	display: block;
	height: 0.42em;
	color: var(--gm-pink);
	font-size: clamp(4rem, 7vw, 6rem);
	font-weight: 600;
	line-height: 0.7;
}

.gm-ueber-story .gm-zitat p {
	max-width: 22em;
	margin: 0;
	color: var(--gm-ink);
	font-size: clamp(1.5rem, 2.6vw, 2.25rem);
	font-weight: 600;
	line-height: 1.22;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.gm-ueber-story .gm-zitat em {
	font-weight: 600;
}

/* Mittlere Breiten: Der Button zeigt nur die Nummer, damit er einzeilig bleibt. */
@media (min-width: 801px) and (max-width: 1199px) {
	.gm-anruf .gm-btn-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

@media (min-width: 801px) {
	/* Kapitel ohne Trennlinie, der Abstand gruppiert. */
	.gm-ueber-story .gm-story-main > .gm-split {
		border-top: 0;
		padding-top: clamp(1.5rem, 3vw, 2.5rem);
	}

	.gm-ueber-story .gm-story-main > .gm-split:first-child {
		padding-top: 0;
	}
}

@media (max-width: 800px) {
	.gm-ueber-kopf {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}

	.gm-portraet {
		justify-self: center;
		width: min(100%, 19rem);
	}

	.gm-ueber-kopf h1 {
		font-size: 2.75rem;
	}

	.gm-anruf .gm-btn {
		display: flex;
		width: 100%;
	}

	.gm-kennzahlen {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 1.75rem;
	}

	.gm-ueber-story .gm-story-main > .gm-split {
		border-top: 0;
	}
}

/* ---------- 9 Bewegung ----------
   Ein einziger inszenierter Moment: der Aufbau des Heros beim Laden. Wer reduzierte Bewegung eingestellt hat, sieht alles sofort. */

@media (prefers-reduced-motion: no-preference) {
	.gm-hero-media img {
		animation: gm-settle 2s var(--gm-ease) both;
	}

	.gm-hero-content > * {
		animation: gm-rise 0.9s var(--gm-ease) both;
	}

	.gm-hero-content > :nth-child(2) {
		animation-delay: 0.12s;
	}

	.gm-hero-content > :nth-child(3) {
		animation-delay: 0.24s;
	}

	.gm-hero-content > :nth-child(4) {
		animation-delay: 0.36s;
	}

	/* Über mich: Titel, Foto und Einleitung bauen sich beim Laden nacheinander auf. */
	.gm-ueber-titel > *,
	.gm-ueber-intro > * {
		animation: gm-rise 0.9s var(--gm-ease) both;
	}

	.gm-ueber-titel > :nth-child(2) {
		animation-delay: 0.1s;
	}

	.gm-portraet img {
		animation: gm-portraet 1.4s var(--gm-ease) 0.15s both;
	}

	.gm-ueber-intro > :nth-child(1) {
		animation-delay: 0.3s;
	}

	.gm-ueber-intro > :nth-child(2) {
		animation-delay: 0.42s;
	}
}

@keyframes gm-portraet {
	from {
		opacity: 0;
		transform: translateY(1rem) scale(1.03);
	}
}

/* ---------- Für Unternehmen (Variante B) ---------- */
.gm-firma-kopf {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: end;
	margin-inline: var(--gm-edge);
	padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3.5rem);
}

.gm-firma-kopf .gm-eyebrow {
	margin: 0 0 0.75rem;
	color: var(--gm-pink-text);
	font-size: clamp(1rem, 1.4vw, 1.25rem);
	font-weight: 500;
}

.gm-firma-kopf h1 {
	font-size: clamp(2.75rem, 6.4vw, 5.5rem);
	font-weight: 300;
	line-height: 1.02;
	text-wrap: balance;
}

.gm-firma-kopf h1 b {
	font-weight: 600;
	color: var(--gm-pink-text);
}

.gm-firma-kopf .gm-back a {
	color: inherit;
	text-decoration: none;
}

.gm-firma-kopf .gm-back a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Nach dem Zitat braucht der zweispaltige Abschnitt keine Trennlinie, nach der Schwerpunkt-Liste
   (oder einem Abschnitt danach) auch nicht: Die Liste endet bereits mit ihrer eigenen Linie. */
.gm-firma-zitat + .gm-split,
.gm-formate-section + .gm-split,
.gm-formate-section + .gm-related {
	border-top: 0;
}

.gm-firma-kopf + .gm-katbild-section .gm-katbild {
	height: auto;
	aspect-ratio: 21 / 9;
	border-radius: 24px;
}

.gm-firma-zitat {
	text-align: center;
}

.gm-firma-zitat-text {
	max-width: 22ch;
	margin: 0 auto;
	color: var(--gm-black);
	font-size: clamp(2rem, 4.6vw, 3.75rem);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

.gm-firma-zitat-text em {
	font-style: normal;
	color: var(--gm-pink-text);
}

.gm-ablauf-section > h2,
.gm-formate-section > h2 {
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.gm-ablauf {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: gm-ablauf;
}

.gm-ablauf li {
	counter-increment: gm-ablauf;
	color: var(--gm-muted);
	font-size: 1.0625rem;
	line-height: 1.45;
}

.gm-ablauf li::before {
	content: counter(gm-ablauf);
	display: block;
	margin-bottom: 1rem;
	color: var(--gm-pink-text);
	font-size: clamp(3.5rem, 7vw, 6rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.05em;
}

.gm-ablauf strong {
	display: block;
	margin-bottom: 0.5rem;
	color: var(--gm-black);
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.gm-formate {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--gm-line);
	counter-reset: gm-format;
}

.gm-formate li {
	display: grid;
	grid-template-columns: clamp(3rem, 8vw, 6rem) minmax(0, 1fr) minmax(0, 1.3fr);
	gap: clamp(1rem, 3vw, 2.5rem);
	align-items: baseline;
	padding: clamp(1.25rem, 2.5vw, 2rem) 0;
	border-bottom: 1px solid var(--gm-line);
	color: var(--gm-muted);
	font-size: 1.0625rem;
	line-height: 1.45;
	counter-increment: gm-format;
}

.gm-formate li::before {
	content: counter(gm-format, decimal-leading-zero);
	color: var(--gm-pink-text);
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.gm-formate strong {
	color: var(--gm-black);
	font-size: clamp(1.5rem, 2.8vw, 2.25rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.03em;
}

@media (max-width: 800px) {
	.gm-firma-kopf {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}

	.gm-firma-kopf + .gm-katbild-section .gm-katbild {
		aspect-ratio: 4 / 3;
	}

	.gm-ablauf {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 700px) {
	.gm-formate li {
		grid-template-columns: 2.75rem minmax(0, 1fr);
		row-gap: 0.375rem;
	}

	.gm-formate li::before {
		grid-row: span 2;
	}
}

/* Einblenden beim ersten Erscheinen: Inhalte unterhalb des Heros steigen einmalig sanft auf.
   Greift nur mit der Klasse .gm-anim (gesetzt per Skript im <head>), ohne JavaScript ist alles sofort sichtbar. */
.gm-anim .gm-statement-zitat > *,
.gm-anim .gm-statement-punkte > li,
.gm-anim .gm-kennzahlen > li,
.gm-anim .gm-offers > h2,
.gm-anim .gm-offer,
.gm-anim .gm-split > h2,
.gm-anim .gm-split-body > *,
.gm-anim .gm-steps > li,
.gm-anim .gm-firma-zitat-text,
.gm-anim .gm-ablauf > li,
.gm-anim .gm-formate > li,
.gm-anim .gm-faq > details,
.gm-anim .gm-cta,
.gm-anim .gm-prose > * {
	opacity: 0;
	transform: translateY(1.5rem);
	transition: opacity 0.8s ease, transform 0.9s var(--gm-ease);
	transition-delay: var(--gm-delay, 0ms);
}

/* Listen blenden ihre Einträge einzeln ein, der Behälter selbst bleibt stehen.
   Das Kontaktformular bewegt sich nie: Nach dem Absenden springt der Anker auf die Meldung, die sonst unter die Kopfzeile rutschen würde. */
.gm-anim .gm-split-body > .gm-steps,
.gm-anim .gm-split-body > .gm-faq,
.gm-anim .gm-split-body > .gm-form-wrap {
	opacity: 1;
	transform: none;
}

.gm-anim .is-in.is-in {
	opacity: 1;
	transform: none;
}

@keyframes gm-settle {
	from {
		transform: scale(1.06);
	}
}

@keyframes gm-rise {
	from {
		opacity: 0;
		transform: translateY(1.5rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.gm-anim * {
		opacity: 1 !important;
		transform: none !important;
	}

	.gm-header,
	.gm-consent,
	.gm-footer-top {
		display: none;
	}

	.gm-no-hero .gm-main {
		padding-top: 0;
	}
}