/*
Theme Name: Agentur
Description: Theme der Agentur-Website. Farben, Schrift und Schriftgrössen stehen in theme.json.
Version: 1.5.1
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: agentur
*/

/* Die Werte kommen aus theme.json – hier nur Kurznamen. */
:root {
	--paper: var(--wp--preset--color--paper);
	--ink: var(--wp--preset--color--ink);
	--ink-soft: var(--wp--preset--color--ink-soft);
	--rule: var(--wp--preset--color--rule);
	--signal: var(--wp--preset--color--signal);
	--surface: color-mix(in srgb, var(--paper) 55%, #fff);
	--ease: cubic-bezier(.2, .7, .1, 1);
	--gutter: clamp(1.25rem, 4vw, 3rem);
	--wide: 82.5rem;
	--radius: 1.75rem;
}

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 1.125rem;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: var(--signal);
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
}
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
	outline: 3px solid var(--signal);
	outline-offset: 3px;
	border-radius: .25rem;
}

h1, h2, h3 {
	margin: 0;
	font-stretch: 125%;
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -.025em;
	text-wrap: balance;
}

p, ul, ol { margin: 0; }
p { text-wrap: pretty; }

.skip {
	position: absolute;
	top: .75rem;
	left: var(--gutter);
	z-index: 100;
	padding: .75rem 1rem;
	background: var(--ink);
	color: var(--paper);
	border-radius: .5rem;
	transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* Aufbau */
.site-header,
.hero,
.page-head,
.entry,
.site-footer {
	max-width: calc(var(--wide) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Kopfzeile */
.site-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem 1.5rem;
	padding-block: 1.25rem;
}

.wordmark {
	display: inline-flex;
	margin: 0;
	color: var(--ink);
	text-decoration: none;
}
.wordmark .logo { display: block; width: auto; height: clamp(1.5rem, 1.25rem + .5vw, 1.85rem); }
.wordmark .op-line { transition: stroke .9s var(--ease); }
/* Farbiger Kopfbereich: die drei Linien werden einfarbig, sonst verschwindet eine im Hintergrund */
body:is([data-tint="blue"], [data-tint="green"], [data-tint="yellow"]) .site-header .op-line { stroke: currentColor; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.nav ul {
	display: flex;
	gap: .125rem;
	padding: .3125rem;
	list-style: none;
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: 999px;
}

.nav a {
	display: flex;
	align-items: center;
	min-height: 2.75rem;
	padding-inline: 1.125rem;
	border-radius: 999px;
	color: var(--ink);
	font-size: .9375rem;
	font-weight: 500;
	text-decoration: none;
	transition: background-color .2s var(--ease), color .2s var(--ease);
}
.nav [aria-current="page"] { color: var(--signal); }
.nav .menu-cta a { background: var(--ink); color: var(--paper); }
.nav .menu-cta [aria-current="page"] { background: var(--signal); color: var(--paper); }

@media (hover: hover) {
	.nav a:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
	.nav .menu-cta a:hover { background: var(--signal); }
}

/* Buttons */
.button,
.entry .wp-block-button__link,
.wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3.25rem;
	padding: 0 1.75rem;
	background: var(--ink);
	color: var(--paper);
	border: 0;
	border-radius: 999px;
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s var(--ease), color .2s var(--ease), transform .12s var(--ease);
}
.button:active,
.entry .wp-block-button__link:active,
.wpcf7-submit:active { transform: scale(.97); }

@media (hover: hover) {
	.button:hover,
	.entry .wp-block-button__link:hover,
	.wpcf7-submit:hover { background: var(--signal); color: var(--paper); }
}

.text-link {
	color: var(--ink);
	font-weight: 600;
}

/* Hero – das einzige Element, das sich von selbst bewegt */
.hero {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(1.75rem, 3.5vw, 2.75rem);
	padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 2vw, 2rem);
}

.shift {
	font-size: clamp(2.35rem, .9rem + 5.2vw, 5.75rem);
	line-height: 1;
	letter-spacing: -.04em;
}

.shift__line {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: baseline;
	column-gap: .3em;
}

.shift__lead {
	font-stretch: 100%;
	font-weight: 300;
	letter-spacing: -.02em;
	color: var(--ink-soft);
}

/* Alle Phrasen liegen in derselben Zelle: Höhe = längste Phrase, nichts springt. */
.shift__set { display: grid; }
.shift__set--before { color: var(--ink-soft); }

/* Erst geht die alte Phrase, dann kommt die neue – nie beide halb sichtbar übereinander. */
.shift__item {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transform: translateY(.14em);
	transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s .25s;
}
.shift__item.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity .55s var(--ease) .25s, transform .55s var(--ease) .25s, visibility 0s .25s;
}
/* „wird …" folgt einen Moment nach „Aus …" */
.shift__line + .shift__line .shift__item.is-active { transition-delay: .45s; }

.hero__lede {
	max-width: 36rem;
	font-size: clamp(1.125rem, 1rem + .45vw, 1.375rem);
	line-height: 1.45;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.75rem;
}

.shift__toggle {
	min-height: 2.75rem;
	margin-left: auto;
	padding: 0;
	background: none;
	border: 0;
	color: var(--ink-soft);
	font: inherit;
	font-size: .875rem;
	text-decoration: underline;
	text-underline-offset: .2em;
	cursor: pointer;
}

/* Seitenkopf und Inhalt */
.page-head { padding-block: clamp(3rem, 9vw, 6.5rem) clamp(2rem, 5vw, 3.5rem); }
.page-head h1 {
	font-size: clamp(2.75rem, 1rem + 6vw, 6.5rem);
	letter-spacing: -.045em;
}

.entry { padding-bottom: clamp(4rem, 10vw, 8rem); }
.entry > * + * { margin-top: 1.25rem; }
.entry > :where(p, ul, ol, h2, h3, h4, blockquote) { max-width: 40rem; }
.entry > h2 {
	margin-top: 3rem;
	font-size: clamp(1.4rem, 1rem + 1vw, 1.875rem);
}
.entry > :where(ul, ol) { padding-left: 1.25em; }

.lead {
	font-size: clamp(1.375rem, 1rem + 1.25vw, 2rem);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -.015em;
}

/* Grosse Abschnitte – Abstand steht nur hier, nicht in den Abschnitten selbst */
.entry > :where(.tour, .pains, .later, .projects, .chapter, .gap-section, .promises, .steps, .cta, .contact) { margin-top: clamp(3.5rem, 7vw, 6rem); }
.entry > .chapter + .chapter { margin-top: clamp(5rem, 12vw, 9rem); }
.entry > .contact:first-child { margin-top: 0; }
.hero + .entry > :first-child { margin-top: clamp(1rem, 4vw, 3rem); }

.gap-section > h2,
.projects > h2,
.steps > h2 {
	max-width: 20ch;
	margin-bottom: clamp(2rem, 5vw, 3.5rem);
	font-size: clamp(1.9rem, 1rem + 2.6vw, 3.25rem);
}

/* Arbeitsweise: 01, 02 – und dann hört das Zählen auf. Eine Linie verbindet die Schritte und läuft am Ende weiter. */
.step {
	--step: var(--signal);
	--step-ink: #fff;
	position: relative;
	display: grid;
	grid-template-columns: 3.25rem minmax(0, 4fr) minmax(0, 6fr);
	align-items: start;
	gap: .375rem clamp(1rem, 3vw, 2.5rem);
	padding-bottom: clamp(2.5rem, 5vw, 3.75rem);
}
.step::before {
	content: "";
	position: absolute;
	top: 3.25rem;
	bottom: 0;
	left: calc(1.625rem - 1.5px);
	width: 3px;
	background: var(--step);
}
.step:last-of-type::before {
	bottom: -3rem;
	background: repeating-linear-gradient(to bottom, var(--step) 0 .5rem, transparent .5rem 1rem);
	mask-image: linear-gradient(to bottom, #000 40%, transparent);
}
.step > * { grid-column: 3; grid-row: 1 / span 2; }
.step > .step__num {
	grid-column: 1;
	grid-row: 1;
	position: relative;
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	border: 3px solid var(--step);
	border-radius: 50%;
	background: var(--step);
	color: var(--step-ink);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.step > h3 {
	grid-column: 2;
	grid-row: 1;
	padding-top: .4rem;
	font-size: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
}
.step > .step__note {
	grid-column: 2;
	grid-row: 2;
	font-size: .9375rem;
	font-weight: 600;
}
.step > p:last-child { padding-top: .5rem; }

/* Die eine dunkle Fläche */
.cta,
.contact {
	background: var(--ink);
	color: var(--paper);
	border-radius: var(--radius);
}
.cta :focus-visible,
.contact :focus-visible { outline-color: var(--paper); }

.cta {
	display: grid;
	justify-items: start;
	gap: 1.5rem;
	padding: clamp(2.5rem, 7vw, 6rem) clamp(1.5rem, 6vw, 5rem);
}
.cta > h2 { max-width: 17ch; font-size: clamp(2rem, 1rem + 3.4vw, 4.25rem); }
.cta > p { max-width: 36rem; color: color-mix(in srgb, var(--paper) 72%, var(--ink)); }
.cta .wp-block-buttons { margin-top: .5rem; }
.cta .wp-block-button__link { background: var(--paper); color: var(--ink); }

/* Kontakt */
.contact {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
	align-items: start;
	gap: 1.5rem clamp(2rem, 6vw, 5.5rem);
	padding: clamp(1.75rem, 6vw, 5rem);
}
.contact > * { grid-column: 1; }
.contact > .wpcf7 { grid-column: 2; grid-row: 1 / span 3; }
.contact a { color: var(--paper); }

.wpcf7-form { display: grid; gap: 1.25rem; }
.wpcf7-form label { display: grid; gap: .375rem; font-size: .9375rem; font-weight: 500; }
.wpcf7-form :is(.wpcf7-text, .wpcf7-email, .wpcf7-tel, .wpcf7-textarea) {
	width: 100%;
	padding: .625rem 0;
	background: transparent;
	color: var(--paper);
	border: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--paper) 45%, transparent);
	border-radius: 0;
	font: inherit;
	transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.wpcf7-form .wpcf7-textarea { min-height: 8rem; resize: vertical; }
.wpcf7-form :is(.wpcf7-text, .wpcf7-email, .wpcf7-tel, .wpcf7-textarea):focus-visible {
	outline: none;
	border-bottom-color: var(--paper);
	box-shadow: 0 1px 0 var(--paper);
}
.form-note { font-size: .875rem; color: color-mix(in srgb, var(--paper) 72%, var(--ink)); }
.contact .wpcf7-submit { background: var(--paper); color: var(--ink); }
.contact .wpcf7-not-valid-tip { margin-top: .375rem; color: #ffb4a8; font-size: .875rem; }
.contact .wpcf7 form .wpcf7-response-output {
	margin: 0;
	padding: .875rem 1.125rem;
	border-width: 1px;
	border-radius: .75rem;
}

@media (hover: hover) {
	.contact .wpcf7-submit:hover { background: var(--signal); color: var(--paper); }
}

/* Fusszeile */
.site-footer { padding-bottom: var(--gutter); }
.site-footer__card {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem 2.5rem;
	padding: clamp(1.75rem, 4vw, 2.75rem);
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
}
.site-footer ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.5rem;
	padding: 0;
	list-style: none;
}
.site-footer ul a {
	display: inline-block;
	padding-block: .5rem;
	color: var(--ink);
	font-size: .9375rem;
	text-decoration: none;
}
.site-footer ul a:hover { text-decoration: underline; }
.site-footer__legal {
	flex-basis: 100%;
	padding-top: 1.25rem;
	border-top: 1px solid var(--rule);
	color: var(--ink-soft);
	font-size: .875rem;
}

/* Schmale Bildschirme – gleiche Selektoren wie oben, damit nichts gegeneinander arbeitet */
@media (max-width: 48rem) {
	.contact { grid-template-columns: minmax(0, 1fr); }

	.contact > *, .contact > .wpcf7 { grid-column: 1; grid-row: auto; }

	.step { grid-template-columns: 3.25rem minmax(0, 1fr); }
	.step > * { grid-column: 2; grid-row: auto; }

	.nav { flex-basis: 100%; }
	.nav ul { justify-content: space-between; }
	.nav a { padding-inline: .875rem; }
	.shift__toggle { margin-left: 0; }
}

/* Handy: Lange Wörter wie „Ansprechpartner." müssen neben „Aus"/„wird" Platz haben */
@media (max-width: 36rem) {
	.hero { min-height: 0; padding-block: 2.5rem 3.5rem; }
	.shift { font-size: clamp(1.9rem, 1.2rem + 3.6vw, 2.6rem); }
	.shift__set { font-stretch: 110%; hyphens: auto; overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; }
}

/* ===== Leben: Farbe, Bewegung, Projekte ===== */

/* Kopfbereich der Startseite färbt sich mit dem Hero-Beispiel (hero.js setzt data-tint) */
body { --tint: var(--paper); --tint-ink: var(--ink); --tint-soft: var(--ink-soft); }
body[data-tint="yellow"] { --tint: var(--wp--preset--color--yellow); --tint-soft: rgba(0, 0, 0, .58); }
body[data-tint="blue"] { --tint: var(--signal); --tint-ink: #fff; --tint-soft: rgba(255, 255, 255, .74); }
body[data-tint="green"] { --tint: var(--wp--preset--color--green); --tint-ink: #fff; --tint-soft: rgba(255, 255, 255, .8); }

.home .site-header,
.home .hero {
	background: var(--tint);
	color: var(--tint-ink);
	box-shadow: 0 0 0 100vmax var(--tint);
	clip-path: inset(0 -100vmax);
	transition: background-color .9s var(--ease), box-shadow .9s var(--ease), color .9s var(--ease);
}
.home .wordmark,
.home .hero .text-link { color: inherit; }
.home .shift__lead,
.home .shift__set--before { color: var(--tint-soft); transition: color .9s var(--ease); }
/* Kleiner Text braucht 4.5:1 – auf Grün reicht der gedämpfte Ton nicht */
.home .shift__toggle { color: var(--tint-ink); transition: color .9s var(--ease); }
body:is([data-tint="blue"], [data-tint="green"]) .hero .button { background: #fff; color: var(--ink); }
body:is([data-tint="blue"], [data-tint="green"]) .hero .button:hover { background: var(--ink); color: #fff; }

/* Bewegte Oberflächen: laufen nur im Bild (site.js setzt .is-visible) */
.vignette {
	position: relative;
	display: grid;
	place-items: center;
	padding: clamp(1rem, 4vw, 2.5rem);
	border-radius: calc(var(--radius) - .5rem);
	background: var(--field, var(--signal));
	overflow: hidden;
	color: var(--ink);
	container-type: inline-size;
}
.vignette * { animation-play-state: paused; }
.vignette.is-visible * { animation-play-state: running; }
.v-card {
	grid-area: 1 / 1;
	position: relative;
	display: grid;
	align-content: start;
	gap: .9em;
	width: 100%;
	max-width: 31em;
	padding: 1.6em;
	background: #fff;
	border-radius: 1rem;
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5);
	font-size: clamp(.75rem, 3.1cqi, 1.2rem);
}

/* Website: Öffnungszeiten selbst ändern */
.v-edit .v-card { padding: 0; gap: 0; grid-template-rows: auto 1fr; overflow: hidden; }
.v-bar { display: flex; align-items: center; gap: .4em; padding: .75em 1em; background: #F4F3EF; color: var(--ink-soft); font-size: .8em; }
.v-bar i { width: .65em; height: .65em; border-radius: 50%; background: #DAD6CD; }
.v-bar span { margin-left: .8em; }
.v-page { position: relative; display: grid; align-content: start; gap: .7em; padding: 1.6em 1.8em; }
.v-label { color: var(--ink-soft); font-size: .85em; font-weight: 600; }
.v-text { position: relative; display: grid; width: max-content; padding: .2em .35em; font-size: 1.7em; font-stretch: 112%; font-weight: 700; letter-spacing: -.02em; border-radius: .25em; box-shadow: 0 0 0 2px var(--signal); }
.v-text span { grid-area: 1 / 1; white-space: nowrap; }
.v-old { animation: v-delete 8s steps(12) infinite; }
.v-new { clip-path: inset(0 100% 0 0); animation: v-type 8s steps(12) infinite; }
.v-lines { display: grid; gap: .55em; margin-top: .6em; }
.v-lines i { height: .6em; border-radius: 1em; background: #ECEAE4; }
.v-lines i:nth-child(2) { width: 82%; }
.v-lines i:nth-child(3) { width: 58%; }
.v-toast { position: absolute; right: 1.4em; bottom: 1.4em; padding: .55em 1em; border-radius: 999px; background: var(--ink); color: #fff; font-size: .85em; font-weight: 600; opacity: 0; animation: v-toast 8s var(--ease) infinite; }
@keyframes v-delete { 0%, 28% { clip-path: inset(0); } 40%, 100% { clip-path: inset(0 100% 0 0); } }
@keyframes v-type { 0%, 44% { clip-path: inset(0 100% 0 0); } 60%, 100% { clip-path: inset(0); } }
@keyframes v-toast { 0%, 64% { opacity: 0; transform: translateY(.6em); } 70%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Hosting: Statusanzeige */
.v-head { display: flex; align-items: center; gap: .6em; font-size: 1.2em; font-stretch: 112%; font-weight: 700; }
.v-live { width: .7em; height: .7em; border-radius: 50%; background: var(--wp--preset--color--green); animation: v-pulse 2s ease-out infinite; }
.v-bars { display: flex; align-items: flex-end; gap: 3px; height: 4.5em; }
.v-bars i { flex: 1; height: var(--h, 90%); border-radius: 3px; background: var(--wp--preset--color--green); transform-origin: bottom; animation: v-grow 6s var(--ease) infinite; animation-delay: calc(var(--i) * 45ms); }
.v-checks { display: grid; gap: .55em; padding: 0; list-style: none; }
.v-checks li { display: flex; align-items: center; gap: .6em; padding: .55em .8em; border-radius: .6em; background: #EEF6F2; opacity: 0; animation: v-check 6s var(--ease) infinite; }
.v-checks li:nth-child(2) { animation-delay: .5s; }
.v-checks li:nth-child(3) { animation-delay: 1s; }
.v-checks li::before { content: "✓"; display: grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--wp--preset--color--green); color: #fff; font-size: .75em; font-weight: 700; }
.v-checks small { margin-left: auto; color: var(--ink-soft); font-size: .85em; }
@keyframes v-pulse { from { box-shadow: 0 0 0 0 rgba(0, 122, 82, .55); } to { box-shadow: 0 0 0 .8em rgba(0, 122, 82, 0); } }
@keyframes v-grow { 0% { transform: scaleY(.12); opacity: .35; } 22%, 100% { transform: none; opacity: 1; } }
@keyframes v-check { 0%, 18% { opacity: 0; transform: translateY(.4em); } 28%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Digitalisierung: Zettel wird Eingang im Postfach */
.v-paper { background: #FFFDF4; transform: rotate(-4deg); font-family: "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive; animation: v-paper 8s var(--ease) infinite; }
.v-paper b { font-family: var(--wp--preset--font-family--archivo); font-size: .8em; letter-spacing: .04em; color: var(--ink-soft); }
.v-paper span { padding: .15em 0; border-bottom: 1.5px solid rgba(0, 0, 0, .18); color: #1F3A93; font-size: 1.3em; }
.v-mail { opacity: 0; animation: v-mail 8s var(--ease) infinite; }
.v-mailhead { display: flex; justify-content: space-between; font-stretch: 112%; font-weight: 700; }
.v-mailhead span:last-child { color: var(--signal); }
.v-row { display: flex; align-items: center; gap: .7em; padding: .8em .9em; border-radius: .7em; background: #F4F5FF; }
.v-row::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: var(--signal); flex: none; }
.v-row small { margin-left: auto; color: var(--ink-soft); }
.v-row--new { background: var(--signal); color: #fff; animation: v-new 8s var(--ease) infinite; }
.v-row--new::before { background: #fff; }
.v-row--new small { color: rgba(255, 255, 255, .78); }
@keyframes v-paper { 0%, 36% { opacity: 1; transform: rotate(-4deg); } 46%, 92% { opacity: 0; transform: rotate(-10deg) translate(-10%, 8%) scale(.92); } 100% { opacity: 1; transform: rotate(-4deg); } }
@keyframes v-mail { 0%, 40% { opacity: 0; transform: translateY(6%) scale(.96); } 50%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(6%) scale(.96); } }
@keyframes v-new { 0%, 52% { opacity: 0; transform: translateY(-110%); } 62%, 100% { opacity: 1; transform: none; } }

/* Projekte */
.projects__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3rem); }
.project { display: grid; align-content: start; gap: .75rem; }
.shot { position: relative; padding-top: 2.2rem; background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); overflow: clip; }
.shot::before { content: ""; position: absolute; top: .85rem; left: 1.1rem; width: .6rem; height: .6rem; border-radius: 50%; background: var(--rule); box-shadow: 1rem 0 0 var(--rule), 2rem 0 0 var(--rule); }
.shot figure { margin: 0; }
.shot :is(img, video) { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.shot { isolation: isolate; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.shot :is(img, video) { transition: transform .9s var(--ease); }
@media (hover: hover) {
	.project:hover .shot { transform: translateY(-.375rem); box-shadow: 0 2rem 3.5rem -2rem rgba(0, 0, 0, .4); }
	.project:hover .shot :is(img, video) { transform: scale(1.06); }
}
.project .status { justify-self: start; margin-top: .75rem; padding: .3rem .8rem; border-radius: 999px; background: var(--wp--preset--color--yellow); font-size: .8125rem; font-weight: 600; }
.project h3 { font-size: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); }
.project > p:last-child { max-width: 34rem; color: var(--ink-soft); }

/* Über uns: Schritte tragen die Farbe ihres Bereichs */
.step:nth-of-type(1) { --step: var(--wp--preset--color--yellow); --step-ink: var(--ink); }
.step:nth-of-type(2) { --step: var(--signal); }
.step:nth-of-type(3) { --step: var(--wp--preset--color--green); }
.step > .step__note { color: var(--wp--preset--color--green); }

/* Weiche Übergänge zwischen den Seiten */
@view-transition { navigation: auto; }

@media (max-width: 48rem) {
	.projects__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
	.vignette *, .vignette *::before { animation: none !important; }
	.v-old, .v-paper, .v-toast, .v-checks li { opacity: 0; }
	.v-new, .v-mail, .v-row--new, .v-checks li { clip-path: none; opacity: 1; transform: none; }
}

/* ===== Leistungen ===== */

/* Einstieg: Wegweiser mit drei Schildern, die zu den Bereichen springen */
.intro { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: 1.25rem clamp(2rem, 6vw, 5rem); }
.intro > * { grid-column: 1; }
.intro > .signpost { grid-column: 2; grid-row: 1 / span 3; }

.signpost { position: relative; display: grid; justify-items: center; gap: 1rem; padding-block: 1.25rem 4.5rem; }
.signpost::before { content: ""; position: absolute; inset-block: 0; left: 50%; width: .75rem; translate: -50% 0; border-radius: .375rem .375rem 0 0; background: #BDB8AD; }
.sign {
	--sign: var(--signal);
	--sign-ink: #fff;
	--dir: 1;
	position: relative;
	isolation: isolate;
	display: grid;
	gap: .125rem;
	width: min(100% - 3rem, 23rem);
	padding: .9rem 3.25rem .9rem 1.25rem;
	color: var(--sign-ink);
	text-decoration: none;
	filter: drop-shadow(0 .6rem .8rem rgba(0, 0, 0, .16));
	translate: calc(var(--dir) * 1.5rem) 0;
	transition: translate .35s var(--ease);
}
.sign::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sign); clip-path: polygon(0 0, calc(100% - 2.25rem) 0, 100% 50%, calc(100% - 2.25rem) 100%, 0 100%); }
.sign--left { --dir: -1; padding: .9rem 1.25rem .9rem 3.25rem; text-align: right; }
.sign--left::before { clip-path: polygon(2.25rem 0, 100% 0, 100% 100%, 2.25rem 100%, 0 50%); }
.sign--green { --sign: var(--wp--preset--color--green); }
.sign--yellow { --sign: var(--wp--preset--color--yellow); --sign-ink: var(--ink); }
.sign strong { font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem); font-stretch: 125%; font-weight: 700; line-height: 1.1; letter-spacing: -.025em; }
.sign span { font-size: .9375rem; font-weight: 500; }
@media (hover: hover) { .sign:hover { translate: calc(var(--dir) * 2.25rem) 0; } }
@media (prefers-reduced-motion: no-preference) {
	.sign { transform-origin: calc(50% - var(--dir) * 50%) 50%; animation: sign-swing 1s cubic-bezier(.3, 1.5, .5, 1) both; }
	.sign:nth-child(2) { animation-delay: .15s; }
	.sign:nth-child(3) { animation-delay: .3s; }
}
@keyframes sign-swing { from { opacity: 0; rotate: calc(var(--dir) * -12deg); } }

/* Kapitel: Text und eine Szene, die sich beim Scrollen aufbaut */
.chapter { --chapter: var(--signal); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 2.5rem clamp(2rem, 6vw, 5rem); }
.chapter--green { --chapter: var(--wp--preset--color--green); }
.chapter--yellow { --chapter: #D9A300; }
.chapter--flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.chapter--flip > .scene { order: -1; }
.chapter__text { display: grid; gap: 1.1rem; }
.chapter__text > h2 { font-size: clamp(2.25rem, 1rem + 3.8vw, 4.75rem); letter-spacing: -.045em; scroll-margin-top: 2rem; }
.chapter__promise { font-size: clamp(1.3rem, 1rem + 1vw, 1.875rem); font-weight: 600; line-height: 1.2; letter-spacing: -.015em; }
.chapter__list { display: grid; gap: .65rem; padding: 0; list-style: none; }
.chapter__list li { position: relative; padding-left: 1.75rem; }
.chapter__list li::before { content: ""; position: absolute; top: calc(.5lh - 1.5px); left: 0; width: 1rem; height: 3px; border-radius: 2px; background: var(--chapter); }
.chapter__next { color: var(--ink-soft); }

/* Szenen: Grundzustand ist das fertige Bild – die Animation spielt nur den Weg dorthin */
.scene { position: relative; aspect-ratio: 5 / 4; overflow: clip; border-radius: var(--radius); container-type: size; }

/* Website: die Seite einer Bäckerei entsteht */
.scene--build { display: grid; place-items: center; padding: 7%; background: var(--signal); }
.b-window { width: 100%; overflow: clip; border-radius: .9em; background: #fff; box-shadow: 0 2em 3em -1.5em rgba(0, 0, 0, .45); font-size: clamp(.6rem, 2.4cqi, 1rem); }
.b-bar { display: flex; align-items: center; gap: .35em; padding: .6em .9em; background: #EFEEEA; color: var(--ink-soft); font-size: .78em; }
.b-bar i { width: .7em; height: .7em; border-radius: 50%; background: #D6D2C8; }
.b-bar span { margin-left: .6em; }
.b-page { display: grid; gap: 1.1em; padding: 1em 1.2em 1.3em; }
.b-nav { display: flex; align-items: center; gap: .6em; font-size: .82em; }
.b-nav b { margin-right: auto; font-stretch: 112%; }
.b-nav span { width: 2.8em; height: .45em; border-radius: 1em; background: #E4E1DA; }
.b-nav em { padding: .35em .85em; border-radius: 1em; background: var(--ink); color: #fff; font-style: normal; font-weight: 600; }
.b-hero { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 1.1em; }
.b-h { font-size: 1.5em; font-stretch: 118%; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
.b-sub { width: 90%; height: .5em; margin-top: .8em; border-radius: 1em; background: #E4E1DA; box-shadow: 0 .9em 0 #E4E1DA; }
.b-btn { display: inline-block; margin-top: 1.9em; padding: .45em .95em; border-radius: 1em; background: var(--signal); color: #fff; font-size: .78em; font-weight: 600; }
.b-img { aspect-ratio: 4 / 3; border-radius: .7em; background: radial-gradient(circle at 70% 35%, #FFE9A8 0 18%, transparent 19%), linear-gradient(160deg, #F6C453, #D9822B); }
.b-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7em; }
.b-card { display: grid; gap: .45em; padding: .55em; border-radius: .7em; background: #F4F3EF; font-size: .82em; }
.b-card i { aspect-ratio: 4 / 3; border-radius: .45em; background: #E4E1DA; }
.b-toast { position: absolute; right: 5%; bottom: 5%; padding: .6em 1.05em; border-radius: 2em; background: var(--ink); color: #fff; font-size: clamp(.6rem, 2.2cqi, .95rem); font-weight: 600; box-shadow: 0 1em 2em -1em rgba(0, 0, 0, .6); }

/* Hosting: während Sie schlafen – Nacht, Sicherung, Morgen */
.scene--night { background: #1F8F66; color: #fff; }
.n-label { position: absolute; top: 8%; left: 8%; font-size: clamp(.9rem, 3.6cqi, 1.5rem); font-stretch: 118%; font-weight: 700; letter-spacing: -.01em; }
.n-moon { position: absolute; top: 8%; right: 9%; width: 11cqi; aspect-ratio: 1; border-radius: 50%; box-shadow: inset -2.6cqi -1.3cqi 0 0 #F3EBD2; opacity: 0; translate: 0 40%; }
.n-sun { position: absolute; left: 9%; bottom: 9%; width: 15cqi; aspect-ratio: 1; border-radius: 50%; background: var(--wp--preset--color--yellow); box-shadow: 0 0 0 1.6cqi rgba(255, 196, 0, .28); }
.n-star { position: absolute; left: var(--x); top: var(--y); width: max(3px, .8cqi); aspect-ratio: 1; border-radius: 50%; background: #fff; opacity: 0; }
.n-log { position: absolute; top: 24%; right: 8%; left: 34%; display: grid; gap: .55em; font-size: clamp(.62rem, 2.3cqi, .95rem); }
.n-row { display: flex; align-items: center; gap: .75em; padding: .6em .8em; border-radius: .75em; background: #fff; color: var(--ink); box-shadow: 0 .8em 1.4em -1em rgba(0, 0, 0, .55); }
.n-row time { color: var(--ink-soft); font-variant-numeric: tabular-nums; font-weight: 600; }
.n-row::after { content: "✓"; display: grid; place-items: center; flex: none; width: 1.5em; height: 1.5em; margin-left: auto; border-radius: 50%; background: var(--wp--preset--color--green); color: #fff; font-size: .8em; font-weight: 700; }
.n-row--live::after { content: ""; width: .7em; height: .7em; box-shadow: 0 0 0 .3em rgba(0, 122, 82, .22); }
.n-row--day { background: var(--wp--preset--color--yellow); }
.n-row--day time { color: rgba(0, 0, 0, .62); }
.n-row--day::after { content: ""; background: var(--ink); box-shadow: inset 0 0 0 .38em var(--wp--preset--color--yellow); }
@container (max-width: 26rem) { .n-log { left: 8%; } }

/* Digitalisierung: der alte Ablauf wird gestrichen, der neue baut sich auf */
.scene--flow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; gap: 6%; padding: 7%; background: var(--wp--preset--color--yellow); }
.f-col { display: grid; align-content: center; gap: .85em; font-size: clamp(.68rem, 2.8cqi, 1.15rem); }
.f-title { font-size: 1.4em; font-stretch: 118%; font-weight: 700; letter-spacing: -.01em; }
.f-chip { position: relative; padding: .7em .85em; border-radius: .7em; background: #fff; font-weight: 500; line-height: 1.25; box-shadow: 0 .7em 1.2em -1em rgba(0, 0, 0, .45); }
.f-col--before { opacity: .6; }
.f-col--before .f-chip { background: rgba(255, 255, 255, .6); box-shadow: none; }
.f-col--before .f-chip::after { content: ""; position: absolute; top: 50%; right: .55em; left: .55em; height: 2px; background: var(--ink); transform-origin: left; }
.f-col--after .f-chip + .f-chip::before { content: ""; position: absolute; bottom: 100%; left: 1.3em; width: 2px; height: .85em; background: var(--ink); transform-origin: bottom; }
.f-chip--done { background: var(--ink); color: #fff; }

/* ===== Über uns ===== */

/* Einstieg mit Porträt und Arbeitsplatz – beide Bilder im Editor per Klick ersetzbar */
.about { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: 3rem clamp(2rem, 6vw, 5rem); }
.about__text { display: grid; gap: 1.25rem; }
.portraits { position: relative; padding: 0 0 12% 12%; }
.portraits figure { margin: 0; }
.portraits img { display: block; width: 100%; object-fit: cover; }
.portrait { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius); }
.portrait img { aspect-ratio: 4 / 5; }
/* Blauer Farbfilter über dem Foto, beim Überfahren Originalfarben */
.portrait::after { content: ""; position: absolute; inset: 0; background: var(--signal); mix-blend-mode: color; pointer-events: none; transition: opacity .6s var(--ease); }
.portrait figcaption { position: absolute; bottom: 1rem; left: 1rem; z-index: 1; margin: 0; padding: .45rem .9rem; border-radius: 999px; background: #fff; color: var(--ink); font-size: .875rem; font-weight: 600; }
@media (hover: hover) { .portrait:hover::after { opacity: 0; } }
.workplace { position: absolute; bottom: 0; left: 0; width: 48%; overflow: hidden; border: .375rem solid var(--paper); border-radius: 1.25rem; box-shadow: 0 1.5rem 3rem -1.5rem rgba(0, 0, 0, .45); rotate: -4deg; }
.workplace img { aspect-ratio: 4 / 3; }

/* Die Lücke: Webagentur und Beratung – beim Scrollen fällt „Wir“ in die Mitte */
.gap { --gap-shift: 2.5rem; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.75rem, 2vw, 1.5rem); }
.gap::before { content: ""; grid-column: 2; grid-row: 1; border: 2px dashed var(--rule); border-radius: var(--radius); }
.gap__side--left { grid-column: 1; grid-row: 1; }
.gap__us { grid-column: 2; grid-row: 1; }
.gap__side--right { grid-column: 3; grid-row: 1; }
.gap__side, .gap__us { position: relative; display: grid; align-content: start; gap: .6rem; padding: clamp(1.25rem, 3vw, 2.25rem); border-radius: var(--radius); }
.gap__side { background: #fff; border: 1px solid var(--rule); }
.gap__us { overflow: hidden; padding-bottom: calc(clamp(1.25rem, 3vw, 2.25rem) + .5rem); background: var(--ink); color: var(--paper); }
.gap__name { margin-bottom: .4rem; font-size: clamp(1.35rem, 1rem + 1.2vw, 2rem); font-stretch: 125%; font-weight: 700; line-height: 1.1; letter-spacing: -.025em; }
.gap__plus, .gap__minus { position: relative; padding-left: 1.6rem; line-height: 1.35; }
.gap__plus::before, .gap__minus::before { position: absolute; top: 0; left: 0; font-weight: 700; }
.gap__plus::before { content: "✓"; content: "✓" / ""; color: var(--wp--preset--color--green); }
.gap__us .gap__plus::before { color: var(--wp--preset--color--yellow); }
.gap__minus { color: var(--ink-soft); }
.gap__minus::before { content: "✕"; content: "✕" / ""; }
.gap__stripes { position: absolute; right: 0; bottom: 0; left: 0; display: flex; height: .5rem; }
.gap__stripes i { flex: 1; background: var(--signal); }
.gap__stripes i:nth-child(2) { background: var(--wp--preset--color--green); }
.gap__stripes i:nth-child(3) { background: var(--wp--preset--color--yellow); }

/* Versprechen: ein Band, das beim Scrollen seitlich durchläuft */
.promises { container-type: inline-size; overflow: clip; padding-block: clamp(1.75rem, 5vw, 3.5rem); border-radius: var(--radius); background: var(--signal); color: #fff; }
.promises__track { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem clamp(1.5rem, 4vw, 3rem); padding-inline: clamp(1.5rem, 5vw, 3.5rem); font-size: clamp(1.75rem, 1rem + 3.8vw, 5rem); font-stretch: 125%; font-weight: 700; line-height: 1.1; letter-spacing: -.035em; }
.promises__track span { display: inline-flex; align-items: center; gap: clamp(1.5rem, 4vw, 3rem); }
.promises__track span + span::before { content: ""; flex: none; width: .5em; height: .5em; background: var(--wp--preset--color--yellow); clip-path: polygon(0 0, 55% 0, 100% 50%, 55% 100%, 0 100%); }

/* ===== Scrollgesteuert: Leistungen und Über uns ===== */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.scene { view-timeline: --scene block; }
		.scene .s { animation: s-in linear both; animation-timeline: --scene; animation-range: var(--r, entry 80% contain 30%); }

		.scene--night { animation: n-dawn linear both; animation-timeline: --scene; animation-range: entry 40% contain 100%; }
		.n-moon { animation: n-moon linear both; animation-timeline: --scene; animation-range: entry 40% contain 100%; }
		.n-sun { animation: n-sun linear both; animation-timeline: --scene; animation-range: entry 40% contain 100%; }
		.n-star { animation: n-star linear both; animation-timeline: --scene; animation-range: entry 40% contain 100%; }

		.f-col--before { animation: f-fade linear both; animation-timeline: --scene; animation-range: contain 0% contain 30%; }
		.f-col--before .f-chip::after { animation: f-strike linear both; animation-timeline: --scene; animation-range: entry 80% contain 8%; }
		.f-col--before .f-chip:nth-of-type(3)::after { animation-range: entry 90% contain 14%; }
		.f-col--before .f-chip:nth-of-type(4)::after { animation-range: entry 100% contain 20%; }
		.f-col--before .f-chip:nth-of-type(5)::after { animation-range: contain 6% contain 26%; }
		.f-col--after .f-chip + .f-chip::before { animation: f-link linear both; animation-timeline: --scene; animation-range: var(--r); }

		.workplace { animation: float-up linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }

		.gap { view-timeline: --gap block; }
		.gap__side--left { animation: gap-left linear both; animation-timeline: --gap; animation-range: entry 40% contain 35%; }
		.gap__side--right { animation: gap-right linear both; animation-timeline: --gap; animation-range: entry 40% contain 35%; }
		.gap__us { animation: gap-drop linear both; animation-timeline: --gap; animation-range: entry 75% contain 50%; }

		.promises__track { flex-wrap: nowrap; width: max-content; white-space: nowrap; animation: promises-run linear both; animation-timeline: view(); animation-range: cover 10% cover 90%; }

		.step { view-timeline: --step-view block; }
		.step::before { transform-origin: top; animation: draw-down linear both; animation-timeline: --step-view; animation-range: cover 35% cover 65%; }
		.step:last-of-type::before { animation: dash-run 1s linear infinite; }
		.step > .step__num { animation: badge-fill linear both; animation-timeline: --step-view; animation-range: entry 60% cover 35%; }
	}
}
@keyframes s-in { from { opacity: 0; translate: 0 1.25em; scale: .96; } }
@keyframes n-dawn { 0%, 40% { background-color: #062A20; } }
@keyframes n-moon { 0%, 45% { opacity: 1; translate: 0 0; } }
@keyframes n-sun { 0%, 55% { opacity: 0; translate: 0 150%; } }
@keyframes n-star { 0%, 45% { opacity: .9; } }
@keyframes f-fade { from { opacity: 1; } }
@keyframes f-strike { from { scale: 0 1; } }
@keyframes f-link { from { scale: 1 0; } }
@keyframes float-up { from { translate: 0 25%; } to { translate: 0 -25%; } }
@keyframes gap-left { from { translate: calc(var(--gap-shift) * -1) 0; } }
@keyframes gap-right { from { translate: var(--gap-shift) 0; } }
@keyframes gap-drop { from { opacity: 0; translate: 0 -45%; rotate: -8deg; scale: .9; } 60% { opacity: 1; } }
@keyframes promises-run { to { translate: calc(-100% + 100cqw) 0; } }
@keyframes draw-down { from { scale: 1 0; } }
@keyframes dash-run { to { background-position: 0 1rem; } }
@keyframes badge-fill { from { background-color: var(--paper); color: var(--ink); } }

@media (max-width: 48rem) {
	.intro, .chapter, .chapter--flip, .about { grid-template-columns: minmax(0, 1fr); }
	.intro > .signpost { grid-column: 1; grid-row: auto; }
	.chapter--flip > .scene { order: 0; }
	.scene { aspect-ratio: 4 / 5; }
	.gap { --gap-shift: 0rem; grid-template-columns: minmax(0, 1fr); }
	.gap::before, .gap__side--left, .gap__us, .gap__side--right { grid-column: 1; }
	.gap__side--left { grid-row: 1; }
	.gap::before, .gap__us { grid-row: 2; }
	.gap__side--right { grid-row: 3; }
}

/* ===== Startseite ===== */

/* Leistungen als Fahrt: Der Abschnitt bleibt stehen, die drei Bereiche gleiten von rechts nach links durchs Bild.
   Ohne Unterstützung, auf kleinen Bildschirmen oder mit „Bewegung reduzieren“ stehen sie untereinander. */
.tour__stage { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: clamp(1.5rem, 3vw, 2.25rem) 2rem; }
.tour__stage > h2 { font-size: clamp(1.9rem, 1rem + 2.6vw, 3.25rem); }
.tour__steps { display: none; gap: 1.5rem; margin: 0; padding: 0; list-style: none; font-size: .9375rem; font-weight: 600; }
.tour__steps li { --c: var(--signal); position: relative; padding-bottom: .55rem; }
.tour__steps li:nth-child(2) { --c: var(--wp--preset--color--green); }
.tour__steps li:nth-child(3) { --c: #D9A300; }
.tour__steps li::before, .tour__steps li::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 3px; border-radius: 2px; }
.tour__steps li::before { background: var(--rule); }
.tour__steps li::after { background: var(--c); transform-origin: left; }
.tour__track { grid-column: 1 / -1; display: grid; gap: clamp(1rem, 2vw, 1.5rem); min-width: 0; }
.tour__panel {
	--panel: var(--signal);
	--panel-ink: #fff;
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	align-content: center;
	gap: 1rem clamp(1.5rem, 4vw, 3.5rem);
	padding: clamp(1.5rem, 4vw, 3.25rem);
	overflow: clip;
	border-radius: var(--radius);
	background: var(--panel);
	color: var(--panel-ink);
	container-type: inline-size;
}
.tour__panel--green { --panel: var(--wp--preset--color--green); }
.tour__panel--yellow { --panel: var(--wp--preset--color--yellow); --panel-ink: var(--ink); }
.tour__panel > * { grid-column: 1; }
.tour__panel > h3 { grid-column: 1 / -1; font-size: clamp(2.5rem, 7.5cqi, 6.5rem); line-height: .95; letter-spacing: -.05em; }
.tour__panel > .vignette { grid-column: 2; grid-row: 2 / span 3; background: color-mix(in srgb, currentColor 13%, transparent); }
.tour__promise { max-width: 24ch; font-size: clamp(1.2rem, 1rem + .8vw, 1.75rem); font-weight: 600; line-height: 1.2; letter-spacing: -.015em; }
.tour__points { display: grid; align-content: start; gap: .55rem; padding: 0; list-style: none; }
.tour__points li { position: relative; padding-left: 1.5rem; }
.tour__points li::before { content: ""; position: absolute; top: calc(.5lh - 1.5px); left: 0; width: .8rem; height: 3px; border-radius: 2px; background: currentColor; }
.tour__panel a { color: inherit; font-weight: 600; }
.tour__panel :focus-visible { outline-color: currentColor; }

/* Und danach: Tag 1, Monat 6, Jahr 3 – dieselbe Ansprechperson */
.later { display: grid; gap: 1rem; }
.later__question { color: var(--ink-soft); font-size: clamp(1.125rem, 1rem + .5vw, 1.5rem); font-weight: 500; }
.later > h2 { max-width: 14ch; font-size: clamp(2.5rem, 1rem + 5.4vw, 6.25rem); line-height: .98; letter-spacing: -.05em; }
.later__line { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); margin: clamp(2rem, 5vw, 4rem) 0 1.5rem; padding: 0; list-style: none; }
.later__line::before { content: ""; position: absolute; top: calc(.9rem - 1.5px); right: 0; left: .9rem; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--signal), var(--wp--preset--color--yellow) 50%, var(--wp--preset--color--green)); transform-origin: left; }
.later__step { --c: var(--signal); position: relative; display: grid; align-content: start; gap: .5rem; padding-top: 3rem; }
.later__step--yellow { --c: var(--wp--preset--color--yellow); }
.later__step--green { --c: var(--wp--preset--color--green); }
.later__step::before, .later__step--green::after { content: ""; position: absolute; top: 0; left: 0; width: 1.8rem; height: 1.8rem; border-radius: 50%; }
.later__step::before { background: var(--c); box-shadow: 0 0 0 .35rem var(--paper); }
.later__step--green::after { border: 2px solid var(--c); }
.later__when { font-size: clamp(2rem, 1rem + 3vw, 4rem); font-stretch: 125%; font-weight: 700; line-height: 1; letter-spacing: -.04em; }
.later__what { max-width: 22ch; font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem); line-height: 1.35; }
.later a { color: var(--ink); font-weight: 600; }

/* Projekte: „In Arbeit“ mit Lebenszeichen, Bild beginnt oben */
.project .status { display: inline-flex; align-items: center; gap: .45em; }
.project .status::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--ink); }
.shot :is(img, video) { object-position: 50% 0%; }

/* Finale: Die dunkle Fläche öffnet sich beim Scrollen bis an die Bildschirmränder */
.cta { position: relative; box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 calc(50% - 50vw)); container-type: inline-size; }
.cta > :not(.cta__marquee) { position: relative; z-index: 1; }
.cta--finale { padding-bottom: calc(clamp(2.5rem, 1rem + 6vw, 7rem) + clamp(4rem, 9vw, 7.5rem)); }
.cta__marquee { position: absolute; right: 0; bottom: clamp(1.5rem, 4vw, 3rem); left: 0; overflow: clip; pointer-events: none; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.cta__marquee p { display: flex; gap: clamp(2.5rem, 6vw, 5rem); width: max-content; color: color-mix(in srgb, var(--paper) 16%, transparent); font-size: clamp(2.5rem, 1rem + 6vw, 7rem); font-stretch: 125%; font-weight: 700; line-height: 1; letter-spacing: -.04em; white-space: nowrap; }
.cta__marquee span { display: inline-flex; align-items: center; gap: .3em; }
.cta__marquee i { flex: none; width: .42em; height: .42em; background: var(--wp--preset--color--yellow); clip-path: polygon(0 0, 55% 0, 100% 50%, 55% 100%, 0 100%); }

/* ===== Scrollgesteuert: Startseite ===== */
@supports (animation-timeline: view()) {
	@media (min-width: 48rem) and (min-height: 40rem) and (prefers-reduced-motion: no-preference) {
		.tour { height: 330svh; view-timeline: --tour block; }
		.tour__stage { position: sticky; top: 0; height: 100svh; align-content: center; overflow: clip; container-type: inline-size; }
		.tour__steps { display: flex; }
		.tour__track {
			display: flex;
			gap: 1.5rem;
			transform-origin: 43cqw 50%;
			animation: tour-open linear both, tour-slide linear both;
			animation-timeline: --tour, --tour;
			animation-range: entry 30% entry 100%, contain 8% contain 92%;
		}
		.tour__panel { flex: none; width: 86cqw; height: min(48rem, 100svh - 12rem); }
		.tour__steps li::after { animation: tour-fill linear both; animation-timeline: --tour; }
		.tour__steps li:nth-child(1)::after { animation-range: entry 60% contain 8%; }
		.tour__steps li:nth-child(2)::after { animation-range: contain 8% contain 50%; }
		.tour__steps li:nth-child(3)::after { animation-range: contain 50% contain 92%; }
		.tour__panel > h3 { animation: tour-drift linear both; animation-timeline: --tour; }
		.tour__panel:nth-child(1) > h3 { animation-range: entry 22% contain 50%; }
		.tour__panel:nth-child(2) > h3 { animation-range: contain 8% contain 92%; }
		.tour__panel:nth-child(3) > h3 { animation-range: contain 50% exit 78%; }
		.tour__track:has(.tour__panel:nth-child(1):focus-within) { translate: 0 0 !important; }
		.tour__track:has(.tour__panel:nth-child(2):focus-within) { translate: calc(-79cqw - 1.5rem) 0 !important; }
		.tour__track:has(.tour__panel:nth-child(3):focus-within) { translate: calc(-158cqw - 3rem) 0 !important; }
	}
	@media (prefers-reduced-motion: no-preference) {
		.later__line { view-timeline: --later block; }
		.later__line::before { animation: draw-right linear both; animation-timeline: --later; animation-range: entry 70% cover 60%; }
		.later__step { animation: s-in linear both; animation-timeline: --later; }
		.later__step:nth-child(1) { animation-range: entry 40% cover 40%; }
		.later__step:nth-child(2) { animation-range: entry 70% cover 50%; }
		.later__step:nth-child(3) { animation-range: entry 100% cover 60%; }
		.later__step--green::after { animation: ripple 1.8s var(--ease) infinite; }

		.project:nth-child(1) { animation: slide-l linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
		.project:nth-child(2) { animation: slide-r linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
		.shot :is(img, video) { animation: shot-scroll linear both; animation-timeline: view(); animation-range: cover 15% cover 85%; }
		.project .status::before { animation: blink 1.6s ease-in-out infinite; }

		.cta { animation: cta-open linear both; animation-timeline: view(); animation-range: entry 5% cover 40%; }
		.cta__marquee p { animation: cta-run linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }

		@media (max-width: 48rem) {
			.later__line::before { animation-name: draw-down; }
		}
	}
}
@keyframes tour-open { from { opacity: .35; scale: .92; } }
@keyframes tour-slide { to { translate: calc(-158cqw - 3rem) 0; } }
@keyframes tour-fill { from { scale: 0 1; } }
@keyframes tour-drift { from { translate: -8% 0; } to { translate: 8% 0; } }
@keyframes draw-right { from { scale: 0 1; } }
@keyframes ripple { from { opacity: .9; scale: 1; } to { opacity: 0; scale: 2.4; } }
@keyframes slide-l { from { opacity: 0; translate: -4% 0; rotate: -2deg; } }
@keyframes slide-r { from { opacity: 0; translate: 4% 0; rotate: 2deg; } }
@keyframes shot-scroll { to { object-position: 50% 100%; } }
@keyframes blink { 50% { opacity: .25; } }
@keyframes cta-open { from { clip-path: inset(2.5rem 3.5rem round var(--radius)); } }
@keyframes cta-run { from { translate: calc(-100% + 100cqw) 0; } }

@media (max-width: 48rem) {
	.tour__stage { grid-template-columns: minmax(0, 1fr); }
	.tour__panel { grid-template-columns: minmax(0, 1fr); }
	.tour__panel > .vignette { grid-column: 1; grid-row: auto; }
	.later__line { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
	.later__line::before { top: .9rem; right: auto; bottom: 0; left: calc(.9rem - 1.5px); width: 3px; height: auto; background: linear-gradient(180deg, var(--signal), var(--wp--preset--color--yellow) 50%, var(--wp--preset--color--green)); transform-origin: top; }
	.later__step { padding: 0 0 0 3.25rem; }
}

/* ===== Startseite: Pfad, Pfeile, „Kennen Sie das?“ ===== */

/* Hero: der Pfad aus dem Logo – drei Linien laufen zu einem Pfeil zusammen, der zu den Leistungen zeigt */
.hero-path { display: block; width: 100%; height: auto; overflow: visible; view-timeline: --herop block; }
.hero-path path { fill: none; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; transition: stroke .9s var(--ease), opacity .9s var(--ease); }
.hero-path .hp-blue { stroke: var(--signal); }
.hero-path .hp-green { stroke: var(--wp--preset--color--green); }
.hero-path .hp-yellow { stroke: var(--wp--preset--color--yellow); }
.hero-path .hp-ink { stroke: currentColor; stroke-dasharray: 1; }
.hero-path .hp-head { fill: currentColor; stroke: none; }
/* Farbiger Hero: Linien einfarbig, die Linie des aktuellen Beispiels bleibt kräftig */
body:is([data-tint="blue"], [data-tint="green"], [data-tint="yellow"]) .hero-path :is(.hp-blue, .hp-green, .hp-yellow) { stroke: currentColor; opacity: .25; }
body[data-tint="blue"] .hero-path .hp-blue,
body[data-tint="green"] .hero-path .hp-green,
body[data-tint="yellow"] .hero-path .hp-yellow { opacity: 1; }

/* Kennen Sie das? – typische Situationen, die beim Scrollen abgehakt werden */
.pains { display: grid; gap: 1rem; }
.pains > h2 { font-size: clamp(2.25rem, 1rem + 3.8vw, 4.75rem); letter-spacing: -.045em; }
.pains__lead { max-width: 36rem; color: var(--ink-soft); font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem); }
.pains__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.pain {
	--pain: var(--signal);
	--tilt: -1.5deg;
	display: grid;
	align-content: space-between;
	gap: 1.5rem;
	min-height: 13rem;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	background: #fff;
	border-radius: 1.25rem;
	box-shadow: 0 1.5rem 2.5rem -2rem rgba(0, 0, 0, .35);
	rotate: var(--tilt);
}
.pain:nth-child(3n + 2) { --tilt: 1.2deg; }
.pain:nth-child(3n) { --tilt: -.6deg; }
.pain--green { --pain: var(--wp--preset--color--green); }
.pain--yellow { --pain: var(--wp--preset--color--yellow); }
.pain > p { margin: 0; }
.pain__quote { color: var(--ink-soft); font-size: clamp(1.2rem, 1rem + .7vw, 1.6rem); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; text-decoration: line-through 3px rgba(0, 0, 0, .55); }
.pain__fix { display: flex; align-items: flex-start; gap: .6rem; font-weight: 600; line-height: 1.35; }
.pain__fix::before { content: "✓"; content: "✓" / ""; display: grid; place-items: center; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--pain); color: #fff; font-size: .85rem; }
.pain--yellow .pain__fix::before { color: var(--ink); }

@media (max-width: 60rem) { .pains__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 36rem) { .pains__grid { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: no-preference) {
	.hero-path :is(.hp-blue, .hp-green, .hp-yellow) { stroke-dasharray: 1; animation: hp-draw 1.4s var(--ease) both; }
	.hero-path .hp-green { animation-delay: .15s; }
	.hero-path .hp-yellow { animation-delay: .3s; }
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		/* Beim Scrollen zeichnet sich der Pfeil zu den Leistungen */
		.hero-path .hp-ink { animation: hp-ink linear both; animation-timeline: --herop; animation-range: cover 45% cover 80%; }
		.hero-path .hp-head { animation: hp-head linear both; animation-timeline: --herop; animation-range: cover 75% cover 85%; }

		.pain { animation: pain-in linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
		.pain__quote { animation: pain-strike linear both; animation-timeline: view(); animation-range: cover 30% cover 45%; }
		.pain__fix { animation: pain-fix linear both; animation-timeline: view(); animation-range: cover 38% cover 52%; }
	}
	@media (min-width: 48rem) and (min-height: 40rem) and (prefers-reduced-motion: no-preference) {
		/* Pfeile aus dem Logo im Hintergrund der Leistungs-Fahrt, zwei Ebenen ziehen in verschiedene Richtungen */
		.tour__stage { isolation: isolate; }
		.tour__stage::before,
		.tour__stage::after { content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none; background-repeat: repeat; animation: linear both; animation-timeline: --tour; animation-range: entry 0% exit 100%; }
		.tour__stage::before {
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='240'%3E%3Cg opacity='.22'%3E%3Cpath d='M24 60H92M204 180H272' stroke-width='9' stroke-linecap='round' stroke='%232B31E8'/%3E%3Cpath d='M90 46L112 60L90 74ZM270 166L292 180L270 194Z' fill='%232B31E8'/%3E%3C/g%3E%3C/svg%3E");
			animation-name: arrows-right;
		}
		.tour__stage::after {
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='440' height='320'%3E%3Cpath d='M300 90H368' stroke-width='9' stroke-linecap='round' stroke='%23FFC400' opacity='.45'/%3E%3Cpath d='M366 76L388 90L366 104Z' fill='%23FFC400' opacity='.45'/%3E%3Cpath d='M80 250H148' stroke-width='9' stroke-linecap='round' stroke='%23007A52' opacity='.22'/%3E%3Cpath d='M146 236L168 250L146 264Z' fill='%23007A52' opacity='.22'/%3E%3C/svg%3E");
			animation-name: arrows-rise;
		}
	}
}
@keyframes hp-draw { from { stroke-dashoffset: 1; } }
@keyframes hp-ink { from { stroke-dashoffset: .8; } }
@keyframes hp-head { from { opacity: 0; translate: 0 -12px; } }
@keyframes pain-in { from { opacity: 0; translate: 0 3rem; rotate: calc(var(--tilt) * -4); } }
@keyframes pain-strike { from { color: var(--ink); text-decoration-color: transparent; } }
@keyframes pain-fix { from { opacity: 0; translate: 0 .6rem; } }
@keyframes arrows-right { from { translate: -10% 0; } to { translate: 10% 0; } }
@keyframes arrows-rise { from { translate: -4% 8%; } to { translate: 4% -8%; } }

@supports (animation-timeline: view()) {
	@media (min-width: 48rem) and (min-height: 40rem) and (prefers-reduced-motion: no-preference) {
		/* Heller Rand um Überschrift und Reiter, damit die Pfeile im Hintergrund nicht durch die Schrift laufen */
		.tour__stage > h2,
		.tour__steps li { text-shadow: 0 0 .35em var(--paper), 0 0 .35em var(--paper), 0 0 .7em var(--paper); }
	}
}