/* site.css – geteilte Styles für ALLE Seiten (Topbar, Dock, Typo, Buttons,
   Pakete/Ablauf, Footer, Reveal) + Page-Hero, Section-Labels, Seitenübergang.
   Quelle der Basis: tiefenflug.css Z. 1–189 (Stand Juni 2026). */

		/* Werte aus docs/style-tokens.md (Framer-Export) */
		:root {
			--bg: #ffffff;
			--flaeche-hell: #f9fafb;
			--pill-grau: #f2f4f7;
			--linie: #e4e7ec;
			--text: #000000;
			--text-gedaempft: rgba(0, 0, 0, 0.56);
			--text-leise: #667085;
			--radius-karte: 16px;
			--radius-pill: 100px;
			--akzent-gold: #c9a227;
		}

		/* Lenis (smooth scroll) — CSS aus Framers SmoothScroll_Prod.js */
		html.lenis { height: auto; }
		.lenis.lenis-smooth { scroll-behavior: auto !important; }
		.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
		.lenis.lenis-stopped { overflow: hidden; }
		.lenis.lenis-scrolling iframe { pointer-events: none; }

		* { box-sizing: border-box; margin: 0; padding: 0; }

		body {
			background: var(--bg);
			color: var(--text);
			font-family: "Inter", "Inter Placeholder", sans-serif;
			font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
			font-weight: 500;
			letter-spacing: -0.04em;
			line-height: 1.5;
			font-size: 18px;
		}

		a { color: inherit; text-decoration: none; }
		img { display: block; }

		.container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }

		/* ---------- Kopfleiste (wie im Export: Name links, Logo mittig, Kontakt-Button rechts) ---------- */
		.topbar {
			position: relative;
			display: flex; align-items: center; justify-content: space-between;
			padding: 24px;
		}
		.topbar-name { line-height: 1.5; }
		.topbar-name strong { display: block; font-size: 20px; font-weight: 500; letter-spacing: -0.05em; }
		.topbar-name span { font-size: 14px; font-weight: 400; color: var(--text-leise); }
		.topbar-logo {
			position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
		}
		.topbar-logo img { width: 50px; height: 50px; object-fit: contain; }

		/* ---------- Schwebende Navigation unten (wie im Export: blendet beim Scrollen ein) ---------- */
		.dock {
			position: fixed; bottom: 32px; left: 50%; z-index: 60;
			display: flex; align-items: center; gap: 28px;
			background: var(--text); color: #fff;
			border-radius: 24px; padding: 13px 24px;
			opacity: 0; transform: translate(-50%, 16px); pointer-events: none;
			transition: opacity 0.4s ease-out, transform 0.4s ease-out;
		}
		.dock.sichtbar { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
		.dock-logo img { width: 38px; height: 38px; object-fit: contain; }
		.dock-links { display: flex; align-items: center; gap: 28px; font-size: 16px; }
		.dock-links a { color: #fff; opacity: 0.6; transition: opacity 0.2s ease-out; }
		.dock-links a:hover { opacity: 1; }
		.dock-links a[aria-current="page"] { opacity: 1; }
		.dock-burger { display: none; }

		@media (max-width: 809.98px) {
			.container { padding: 0 20px; }
			.topbar { padding: 20px 20px; }

			.dock { gap: 20px; padding: 12px 18px; }
			.dock-burger {
				display: block; background: none; border: 0; cursor: pointer;
				width: 36px; height: 36px; position: relative;
			}
			.dock-burger span {
				position: absolute; left: 6px; width: 24px; height: 2px; background: #fff;
				transition: transform 0.2s ease-out;
			}
			.dock-burger span:nth-child(1) { top: 13px; }
			.dock-burger span:nth-child(2) { top: 21px; }

			.dock-links {
				display: none;
				position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%);
				flex-direction: column; align-items: center; gap: 4px;
				background: var(--text); border-radius: 24px;
				padding: 20px 40px; width: max-content;
			}
			.dock-links a { display: block; padding: 8px 0; font-size: 20px; }
			.dock.offen .dock-links { display: flex; }
			.dock.offen .dock-burger span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
			.dock.offen .dock-burger span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
		}

		/* ---------- Typografie ---------- */
		h1 { font-size: 55px; line-height: 1.2; letter-spacing: -0.06em; font-weight: 500; }
		h2 { font-size: 40px; line-height: 1.2; letter-spacing: -0.06em; font-weight: 500; }
		h3 { font-size: 24px; line-height: 1.2; letter-spacing: -0.05em; font-weight: 500; }
		.gedaempft { color: var(--text-gedaempft); }

		@media (max-width: 809.98px) {
			h1 { font-size: 40px; }
			h2 { font-size: 32px; }
		}

		/* ---------- Bausteine ---------- */
		.pill {
			display: inline-block; background: var(--pill-grau);
			border-radius: 32px; padding: 6px 16px; font-size: 16px;
		}
		.button {
			display: inline-block; background: var(--text); color: #fff;
			border-radius: var(--radius-pill); padding: 12px 28px; font-size: 16px;
			transition: opacity 0.2s ease-out, transform 0.2s ease-out;
		}
		.button:hover { opacity: 0.85; transform: scale(1.02); }

		/* ---------- Abschnitte ---------- */
		.hero { padding: 90px 0 70px; }
		.hero p { max-width: 620px; margin-top: 24px; }
		.hero h1 { margin-top: 20px; max-width: 800px; }

		.pakete { padding: 30px 0 60px; }
		.pakete-grid {
			display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px;
		}
		.paket {
			background: var(--flaeche-hell); border: 1px solid var(--linie);
			border-radius: var(--radius-karte); padding: 32px;
			display: flex; flex-direction: column; gap: 16px;
		}
		.paket .zielgruppe { font-size: 14px; color: var(--text-leise); }
		.paket ul { list-style: none; margin-top: 4px; flex-grow: 1; }
		.paket li {
			padding-left: 26px; position: relative; margin-bottom: 10px;
			font-size: 16px; color: var(--text-gedaempft);
		}
		.paket li::before { content: "✓"; position: absolute; left: 0; color: var(--text); }
		.paket .button { align-self: flex-start; }

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

		.ablauf { padding: 60px 0; border-top: 1px solid var(--linie); }
		.ablauf-grid {
			display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px;
		}
		.schritt .nummer {
			font-size: 14px; color: var(--text-leise); display: block; margin-bottom: 12px;
		}
		.schritt p { font-size: 16px; color: var(--text-gedaempft); margin-top: 8px; }
		@media (max-width: 809.98px) { .ablauf-grid { grid-template-columns: 1fr; } }

		.abschluss { padding: 90px 0 110px; text-align: center; }
		.abschluss h2 { max-width: 640px; margin: 0 auto; }
		.abschluss .button { margin-top: 32px; }

		/* ---------- Kunden-Banner (fortlaufendes Marquee) ----------
		     Zwischen Auszeichnung und Bento. Reine CSS-Animation,
		     läuft endlos rechts→links, pausiert bei Hover und
		     reduzierter Bewegung (a11y). Maske an beiden Enden,
		     damit Text sauber ein- und ausläuft. */
		.kunden { padding: 56px 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); background: var(--flaeche-hell); }
		.kunden-label {
			text-align: center; font-size: 13px; letter-spacing: 0.12em;
			text-transform: uppercase; color: var(--text-leise);
			margin-bottom: 28px;
		}
		.kunden-marquee {
			position: relative; overflow: hidden;
			/* Verlauf-Maske: 8 % Rand links/rechts weichgezeichnet */
			mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
			-webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
		}
		.kunden-track {
			display: flex; flex-wrap: nowrap; width: max-content;
			animation: kunden-scroll 60s linear infinite;
			will-change: transform;
		}
		.kunden-spur {
			display: flex; align-items: center; gap: 48px;
			flex: 0 0 auto; white-space: nowrap;
			padding-right: 48px; /* Schlussabstand wie Lücke */
		}
		.kunden-marquee:hover .kunden-track { animation-play-state: paused; }
		.kunden-marquee span.eintrag {
			font-size: 18px; font-weight: 500; letter-spacing: -0.01em;
			color: var(--text);
		}
		.kunden-marquee span.trenner {
			color: var(--text-leise); font-size: 14px; opacity: 0.6;
		}
		@keyframes kunden-scroll {
			from { transform: translateX(0); }
			to   { transform: translateX(-50%); }
		}
		@media (prefers-reduced-motion: reduce) {
			.kunden-track { animation: none; transform: none; }
			.kunden-marquee { overflow-x: auto; scrollbar-width: thin; }
		}
		@media (max-width: 809.98px) {
			.kunden-marquee span.eintrag { font-size: 15px; }
			.kunden-spur { gap: 32px; padding-right: 32px; }
			.kunden-track { animation-duration: 50s; }
		}

		/* ---------- Footer ---------- */
		.footer { border-top: 1px solid var(--linie); padding: 60px 0 140px; }
		.footer-grid {
			display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap;
		}
		.footer h4 { font-size: 14px; margin-bottom: 14px; }
		.footer ul { list-style: none; }
		.footer li { margin-bottom: 8px; }
		.footer a { font-size: 16px; color: var(--text-gedaempft); transition: color 0.2s ease-out; }
		.footer a:hover { color: var(--text); }
		.footer-credit { font-size: 14px; color: var(--text-leise); margin-top: 48px; }
		.footer-credit a { font-size: 14px; }

		/* ---------- Sanftes Einblenden beim Scrollen (wie im Export: nach oben + Opazität) ---------- */
		.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.7s ease-out, transform 0.7s ease-out; }
		.reveal.sichtbar { opacity: 1; transform: none; }

		/* ---------- Lande-Animation beim Seitenaufruf (Easing + Dauer wie die Erscheinen-Effekte des Exports) ---------- */
		.landen {
			opacity: 0; transform: translateY(40px);
			animation: landen 2s cubic-bezier(0.56, 0.22, 0.05, 0.99) forwards;
		}
		@keyframes landen {
			to { opacity: 1; transform: none; }
		}

		@media (prefers-reduced-motion: reduce) {
			.reveal { opacity: 1; transform: none; transition: none; }
			.dock { transition: none; }
			.landen { opacity: 1; transform: none; animation: none; }
		}

/* ==================== PAGE-HERO (Unterseiten) ==================== */
.page-hero { padding: 70px 0 50px; }
.hero-label {
	font-family: "Fragment Mono", monospace;
	font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
	color: var(--text-leise);
}
.hero-title {
	font-size: clamp(48px, 6vw, 72px);
	font-weight: 600; letter-spacing: -0.05em; line-height: 1.05;
	margin: 16px 0 14px;
}
.hero-sub { font-size: 15px; color: var(--text-leise); max-width: 560px; }

/* Abschnitts-Label im selben Fragment-Mono-Stil */
.section-label {
	font-family: "Fragment Mono", monospace;
	font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
	color: var(--text-leise); display: block; margin-bottom: 18px;
}

/* ==================== SCROLL-EINBLENDEN ==================== */
.einblenden { opacity: 0; transform: translateY(24px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; }
.einblenden.sichtbar { opacity: 1; transform: none; }

/* ==================== ÜBER-MICH PORTRÄT (schwebt rechts, Graustufen → Farbe) ==================== */
.portrait-hero {
	margin: 0 0 32px;
	float: right;
	width: 320px;
	max-width: 40%;
	shape-outside: margin-box;
}
.portrait-hero img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	filter: grayscale(100%);
	transition: filter 0.6s ease-out, transform 0.4s ease-out;
}
.portrait-hero:hover img,
.portrait-hero:focus-within img {
	filter: grayscale(0%);
	transform: scale(1.03);
}
.portrait-hero figcaption {
	margin-top: 10px;
	font-size: 12px;
	letter-spacing: 0.4px;
	color: var(--text-leise);
	text-align: right;
}
@media (max-width: 720px) {
	.portrait-hero {
		float: none;
		width: 100%;
		max-width: 320px;
		margin: 0 auto 32px;
	}
}

/* ==================== SEITENÜBERGANG (Staub-Fade) ==================== */
body { transition: opacity 0.3s ease-out, transform 0.3s ease-out, filter 0.3s ease-out; }
.seite-ausgang { opacity: 0; transform: translateY(-12px); filter: blur(3px); }
.seite-eingang { opacity: 0; transform: translateY(14px); filter: blur(3px); transition: none; }

.uebergang-partikel {
	position: fixed; z-index: 9999; border-radius: 50%; pointer-events: none;
	will-change: transform, opacity;
	animation: uebergang-drift 0.5s ease-out forwards;
}
@keyframes uebergang-drift {
	from { opacity: 0.9; transform: translate(0, 0) scale(1); }
	to   { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)) scale(0.4); }
}

@media (prefers-reduced-motion: reduce) {
	.einblenden { opacity: 1; transform: none; transition: none; }
	body { transition: none; }
	.seite-ausgang, .seite-eingang { opacity: 1; transform: none; filter: none; }
	.lieferung-uhr line { animation: none; }
	/* ohne Scroll-Animation: Polaroids direkt aufgefächert zeigen */
	.polaroid { transition: none; }
	.polaroid:nth-child(1) { transform: translate(-110%, -56%) rotate(-13deg); }
	.polaroid:nth-child(2) { transform: translate(10%, -62%) rotate(11deg); }
	.polaroid:nth-child(3) { transform: translate(-50%, -38%) rotate(-2deg); }
	.portrait-hero img { transition: none; transform: none; filter: none; }
}

/* ==================== FOTO-GRID (Startseite + Portfolio) ==================== */
.auszug { padding: 30px 0 70px; }
.auszug-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-bottom: 36px;
}
.auszug-grid img {
	width: 100%;
	height: 280px;
	object-fit: cover;
	border-radius: var(--radius-karte);
	transition: transform 0.2s ease-out;
}
.auszug-grid a:hover img { transform: scale(1.02); }

@media (max-width: 760px) {
	.auszug-grid { grid-template-columns: 1fr; }
	/* ponytail: Bildbox immer 3:2 (natürliches Seitenverhältnis der Galeriebilder) statt feste Höhe → kein Überbeschnitt/Verzug im Tablet-Zwischenbereich; volle Breite bestimmt die Höhe. */
	.auszug-grid img { aspect-ratio: 3 / 2; }
}

/* ==================== FOTO-KARTE (Portfolio: Bild + Titel/Datum) ==================== */
.foto-karte { display: block; }
.foto-karte img { margin-bottom: 10px; }
.foto-meta { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.foto-meta b { color: var(--text); font-weight: 600; letter-spacing: -0.03em; }
.foto-meta span { color: var(--text-leise); }

/* ==================== RECHTSTEXT (Datenschutz / Impressum) ==================== */
.rechtstext { max-width: 720px; padding: 10px 0 90px; }
.rechtstext h3 { margin: 36px 0 10px; }
.rechtstext p { color: var(--text-gedaempft); font-size: 16px; line-height: 1.6; margin-bottom: 14px; }
.rechtstext a { color: var(--akzent-gold); }

/* ==================== AUSZEICHNUNG (Startseite: Nachwuchspreis) ==================== */
.auszeichnung { padding: 30px 0 70px; }
.auszeichnung .container {
	display: grid; grid-template-columns: 1.15fr 1fr; gap: 44px; align-items: center;
	background: var(--flaeche-hell); border: 1px solid var(--linie);
	border-radius: var(--radius-karte); padding: 40px;
}
.auszeichnung-bild {
	position: relative; display: block; border-radius: 12px; overflow: hidden;
	aspect-ratio: 3 / 2;
}
.auszeichnung-bild img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform 0.4s ease-out;
}
.auszeichnung-bild:hover img { transform: scale(1.03); }
.auszeichnung-link {
	position: absolute; right: 12px; bottom: 12px;
	background: rgba(0, 0, 0, 0.6); color: #fff;
	font-size: 12px; letter-spacing: 0.02em; padding: 6px 12px; border-radius: var(--radius-pill);
	backdrop-filter: blur(6px);
}
.auszeichnung-text { min-width: 0; }
.auszeichnung-kategorie {
	display: inline-block; font-family: "Fragment Mono", monospace;
	font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--akzent-gold); border-top: 2px solid var(--akzent-gold);
	padding-top: 12px; line-height: 1.4;
}
.auszeichnung-text h2 {
	font-size: clamp(30px, 4vw, 44px); font-weight: 600; letter-spacing: -0.04em;
	line-height: 1.05; margin: 16px 0 10px;
}
.auszeichnung-foto { font-size: 22px; font-style: italic; color: var(--text); margin-bottom: 16px; letter-spacing: -0.01em; }
.auszeichnung-text .gedaempft { color: var(--text-gedaempft); font-size: 15px; line-height: 1.55; max-width: 420px; }

@media (max-width: 820px) {
	.auszeichnung .container { grid-template-columns: 1fr; padding: 28px; gap: 28px; }
	.auszeichnung-bild { order: -1; }
}

/* ==================== BENTO (Startseite: „Warum mit mir arbeiten?") ==================== */
.bento { padding: 70px 0 30px; }
.bento-kopf { text-align: center; max-width: 620px; margin: 0 auto 46px; }
.bento-kopf h2 { font-size: clamp(32px, 4.5vw, 48px); letter-spacing: -0.04em; margin: 16px 0 14px; }
.bento-kopf p { color: var(--text-leise); font-size: 15px; }
.bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.bento-karte {
	position: relative; overflow: hidden;
	background: var(--flaeche-hell); border-radius: var(--radius-karte);
	padding: 26px; display: flex; flex-direction: column; min-height: 320px;
}
.bento-karte h3 { font-size: 26px; font-weight: 600; letter-spacing: -0.04em; line-height: 1.2; }
.bento-titel-unten { margin-top: auto; }
.bento-ablauf { grid-row: span 2; }
.bento-ergebnisse { grid-column: span 2; }

/* Karte 1: Polaroid-Stapel */
.polaroid-stapel { position: relative; flex: 1; min-height: 200px; margin-bottom: 18px; }
.polaroid {
	position: absolute; left: 50%; top: 50%; width: 150px;
	padding: 8px 8px 28px; background: #fff; border-radius: 6px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
	transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.polaroid img { width: 100%; height: 118px; object-fit: cover; border-radius: 3px; display: block; }
.polaroid:nth-child(1) { transform: translate(-78%, -42%) rotate(-10deg); transition-delay: 0.1s; }
.polaroid:nth-child(2) { transform: translate(-22%, -56%) rotate(8deg); transition-delay: 0.2s; }
.polaroid:nth-child(3) { transform: translate(-50%, -50%) rotate(-2deg); }
/* beim Einblenden auffächern, damit alle drei Fotos sichtbar sind */
.bento-karte.sichtbar .polaroid:nth-child(1) { transform: translate(-110%, -56%) rotate(-13deg); }
.bento-karte.sichtbar .polaroid:nth-child(2) { transform: translate(10%, -62%) rotate(11deg); }
.bento-karte.sichtbar .polaroid:nth-child(3) { transform: translate(-50%, -38%) rotate(-2deg); }

/* Karte 2: Objektiv */
.bento-equipment img { max-height: 240px; margin: auto auto 0; object-fit: contain; }

/* Karte 3: Vorher/Nachher-Slider (volle Fläche, Titel als Overlay) */
.bento-vergleich { padding: 0; }
.vergleich { position: relative; flex: 1; min-height: 320px; cursor: ew-resize; }
.vergleich img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; user-select: none; pointer-events: none;
}
.vergleich-vorher { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.vergleich-griff {
	position: absolute; top: 0; bottom: 0; left: var(--pos, 50%);
	width: 2px; background: rgba(255, 255, 255, 0.95); pointer-events: none;
}
.vergleich-griff::before {
	content: "‹ ›"; position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%); color: #fff; font-size: 18px;
	letter-spacing: 3px; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); white-space: nowrap;
}
.vergleich input[type="range"] {
	position: absolute; inset: 0; width: 100%; height: 100%;
	opacity: 0; margin: 0; cursor: ew-resize;
}
.vergleich-titel {
	position: absolute; left: 26px; bottom: 22px; z-index: 2; color: #fff;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55); pointer-events: none;
}

/* Karte 4: Reibungsloser Ablauf (zwei Hände) */
.ablauf-haende { position: relative; flex: 1; min-height: 240px; margin-bottom: 18px; }
.ablauf-haende img { position: absolute; max-width: 76%; }
/* Hand von links (Handrücken) greift in die offene Hand von rechts */
.ablauf-haende img:first-child { top: 38%; left: -10%; z-index: 1; }
.ablauf-haende img:last-child { top: 30%; right: -10%; }

/* Karte 5: Überzeugende Ergebnisse (Bild als Fläche) */
.bento-ergebnisse { min-height: 220px; justify-content: flex-start; }
.bento-ergebnisse > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right top; }
.bento-ergebnisse h3 { position: relative; z-index: 1; color: #fff; max-width: 220px; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45); }

/* Karte 6: Bewertung (Sterne, Zahl, Avatare) */
.bewertung-sterne { color: #e8590c; font-size: 20px; letter-spacing: 3px; }
.bewertung-zeile { display: flex; align-items: center; gap: 14px; margin: 10px 0 8px; }
.bewertung-zeile strong { font-size: 54px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.bewertung-avatare { display: flex; }
.bewertung-avatare img {
	width: 38px; height: 38px; object-fit: cover; border-radius: 50%;
	border: 2px solid #fff; margin-left: -10px;
}
.bewertung-avatare img:first-child { margin-left: 0; }
.bento-bewertung p { color: var(--text-gedaempft); font-size: 16px; }

/* Karte 7: schnelle Lieferung (Uhr) */
.lieferung-titel { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 600; letter-spacing: -0.03em; }
.lieferung-uhr { margin: auto; display: block; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.12)); }
/* Zeiger drehen um die Zifferblatt-Mitte (Linien starten im Mittelpunkt 110/110) */
.lieferung-uhr line { transform-box: view-box; transform-origin: 50% 50%; }
.lieferung-uhr line:nth-of-type(1) { animation: uhr-zeiger 4s linear infinite; }
.lieferung-uhr line:nth-of-type(2) { animation: uhr-zeiger 48s linear infinite; }
@keyframes uhr-zeiger { to { transform: rotate(360deg); } }

@media (max-width: 809.98px) {
	.bento-grid { grid-template-columns: 1fr; }
	.bento-ablauf, .bento-ergebnisse { grid-row: auto; grid-column: auto; }
}

/* ==================== CTA (Startseite: Abschluss-Block) ==================== */
.cta { padding: 90px 0 70px; text-align: center; }
.cta h2 { font-size: clamp(40px, 6vw, 64px); letter-spacing: -0.05em; line-height: 1.08; max-width: 780px; margin: 0 auto 22px; }
.cta-text { color: var(--text-leise); font-size: 15px; max-width: 470px; margin: 0 auto 30px; }
.cta-karten { display: flex; justify-content: center; align-items: center; margin: 70px 0 48px; }
.cta-karte {
	position: relative; width: min(250px, 27vw); aspect-ratio: 2 / 3;
	border-radius: 14px; overflow: hidden; background: #0a0a0a;
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}
.cta-karte img { width: 100%; height: 100%; object-fit: cover; }
.cta-karte:nth-child(1) { transform: rotate(-8deg) translate(26px, 10px); }
.cta-karte:nth-child(2) { z-index: 2; transform: scale(1.1); }
.cta-karte:nth-child(3) { transform: rotate(8deg) translate(-26px, 10px); }
/* Sucher-Ecken (4 Ecken über 2 Pseudo-Elemente der Karte + 2 des inneren Spans) */
.cta-karte::before, .cta-karte::after,
.cta-ecken::before, .cta-ecken::after {
	content: ""; position: absolute; width: 14px; height: 14px;
	border: 2px solid rgba(255, 255, 255, 0.9); z-index: 2;
}
.cta-karte::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.cta-karte::after { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.cta-ecken::before { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.cta-ecken::after { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.cta-social { display: flex; gap: 30px; justify-content: center; }
.cta-social a { font-size: 14px; font-weight: 500; color: var(--text); }
.cta-social a::after { content: " ↗"; }

@media (max-width: 809.98px) {
	.cta-karten { margin: 50px 0 36px; }
	.cta-karte { width: 30vw; }
}

/* ==================== GALERIE (Portfolio-Unterseiten) ==================== */
.galerie { padding: 10px 0 80px; }
.galerie-spalten { columns: 2; column-gap: 14px; }
.galerie-spalten img {
	width: 100%; display: block; margin-bottom: 14px;
	border-radius: var(--radius-karte);
}
.galerie-zurueck { display: inline-block; margin-top: 34px; font-size: 14px; color: var(--text-leise); }
.galerie-zurueck:hover { color: var(--text); }
@media (max-width: 760px) { .galerie-spalten { columns: 1; } }