:root {
	--color-bg: #faf6e7;
	--color-bg-soft: #f3ecd6;
	--color-paper: #fffdf6;
	--color-ink: #2b2018;
	--color-ink-soft: #5b4d3f;
	--color-accent: #a10d37;
	--color-accent-soft: #c4576f;
	--color-warm: #e8dcc4;
	--color-line: rgba(43, 32, 24, 0.12);

	--font-display: "Caveat", "Segoe Print", cursive;
	--font-body: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif;

	--radius-sm: 0.5rem;
	--radius-md: 1rem;
	--radius-lg: 1.5rem;

	--shadow-soft: 0 1px 2px rgba(43, 32, 24, 0.06), 0 8px 24px rgba(43, 32, 24, 0.08);
	--shadow-lift: 0 4px 12px rgba(43, 32, 24, 0.10), 0 24px 48px rgba(43, 32, 24, 0.14);

	--container: clamp(20rem, 92vw, 70rem);

	--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
	--ease-in-out: cubic-bezier(0.7, 0, 0.3, 1);
}

body {
	font-family: var(--font-body);
	color: var(--color-ink);
}

/* Hintergrund nur für die Hauptseite (nicht in den Section-iframes) */
body:not(.iframe-body) {
	background-color: var(--color-bg);
	background-image:
		radial-gradient(ellipse at 20% 0%, rgba(232, 220, 196, 0.55), transparent 60%),
		radial-gradient(ellipse at 80% 100%, rgba(161, 13, 55, 0.06), transparent 55%),
		url("../img/bg/hintergrund.jpg");
	background-attachment: fixed, fixed, fixed;
	background-size: auto, auto, cover;
	background-position: center, center, center;
	background-repeat: no-repeat, no-repeat, no-repeat;
}

body:not(.iframe-body)::before {
	content: "";
	position: fixed; inset: 0;
	background: linear-gradient(180deg, rgba(250, 246, 231, 0.78), rgba(250, 246, 231, 0.92));
	pointer-events: none;
	z-index: -1;
}

.iframe-body {
	background: transparent;
	padding: 2.25rem clamp(1.25rem, 4vw, 3rem);
	height: auto;
}

.skip-link {
	position: absolute; left: -9999px;
	background: var(--color-ink); color: var(--color-bg);
	padding: 0.5rem 1rem; border-radius: var(--radius-sm);
	z-index: 1000;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ========== Header — malerischer Hero ========== */
.site-header {
	width: var(--container);
	margin: 1.5rem auto 0;
	padding: 2.25rem 2.5rem 1.75rem;
	background:
		radial-gradient(ellipse 60% 80% at 100% 0%, rgba(161, 13, 55, 0.10) 0%, transparent 55%),
		radial-gradient(ellipse 70% 60% at 0% 100%, rgba(232, 220, 196, 0.65) 0%, transparent 60%),
		linear-gradient(135deg, #fffaeb 0%, var(--color-paper) 50%, #f5e8c8 100%);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	position: relative;
	overflow: hidden;
}
/* Großer Aquarell-Klecks oben rechts */
.site-header::before {
	content: "";
	position: absolute;
	top: -4rem;
	right: -4rem;
	width: 16rem;
	height: 16rem;
	background:
		radial-gradient(circle at 35% 35%, rgba(161, 13, 55, 0.14) 0%, rgba(196, 87, 111, 0.06) 35%, transparent 65%);
	border-radius: 48% 52% 64% 36% / 42% 58% 42% 58%;
	pointer-events: none;
	filter: blur(2px);
}
/* Pinselstrich-Linie am unteren Rand */
.site-header::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 10%;
	right: 10%;
	height: 3px;
	background: linear-gradient(90deg,
		transparent 0%,
		var(--color-accent) 22%,
		var(--color-accent) 78%,
		transparent 100%);
	opacity: 0.45;
	border-radius: 3px 3px 0 0;
}

.header-inner {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: 1fr auto;
	gap: 0.6rem 1.75rem;
	position: relative;
	z-index: 1;
}
.header-portrait {
	grid-row: 1 / 3;
	align-self: center;
	width: 11rem;
	height: 11rem;
	border-radius: 50%;
	object-fit: cover;
	border: 4px solid var(--color-paper);
	box-shadow:
		0 0 0 1px var(--color-line),
		0 0 0 7px rgba(161, 13, 55, 0.20),
		0 0 0 8px rgba(161, 13, 55, 0.08),
		0 10px 22px rgba(43, 32, 24, 0.18);
}
.header-mark {
	width: 100%;
	max-height: 9rem;
	height: auto;
	object-fit: contain;
	object-position: center;
	align-self: end;
	opacity: 0.92;
	transition: opacity 320ms var(--ease-out);
}
.header-mark:hover { opacity: 1; }
.brand-sub {
	margin: 0;
	padding-top: 0.85rem;
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: 1.02rem;
	font-style: italic;
	letter-spacing: 0.12em;
	text-align: center;
	position: relative;
}
.brand-sub::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg,
		transparent 0%,
		var(--color-accent) 18%,
		var(--color-accent) 82%,
		transparent 100%);
	border-radius: 4px;
	opacity: 0.85;
}

/* ========== Nav — schwebende Textnavigation mit Pinselstrich-Akzent ========== */
.site-nav {
	width: var(--container);
	margin: 0.75rem auto 1.25rem;
	padding: 0.4rem 0.5rem;
	background: rgba(255, 250, 235, 0.78);
	backdrop-filter: blur(14px) saturate(1.2);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	border-radius: var(--radius-md);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.6) inset,
		0 4px 18px rgba(43, 32, 24, 0.08);
	border: 1px solid rgba(43, 32, 24, 0.06);
	position: sticky;
	top: 0.5rem;
	z-index: 50;
}
.site-nav ul {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.1rem;
	justify-content: center;
	overflow-x: auto;
	scrollbar-width: none;
}
.site-nav ul::-webkit-scrollbar { display: none; }
.site-nav a {
	display: inline-block;
	padding: 0.7rem 0.95rem 0.65rem;
	font-size: 0.92rem;
	white-space: nowrap;
	color: var(--color-ink-soft);
	position: relative;
	transition: color 240ms var(--ease-out);
}
/* Animierter Pinselstrich-Unterstrich (immer im DOM, nur skaliert) */
.site-nav a::after {
	content: "";
	position: absolute;
	left: 0.95rem;
	right: 0.95rem;
	bottom: 0.3rem;
	height: 3px;
	background: linear-gradient(90deg,
		transparent 0%,
		var(--color-accent) 22%,
		var(--color-accent) 78%,
		transparent 100%);
	border-radius: 3px;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 280ms var(--ease-out), opacity 220ms var(--ease-out);
	opacity: 0;
}
.site-nav a:hover,
.site-nav a:focus-visible {
	color: var(--color-ink);
}
.site-nav a:hover::after,
.site-nav a:focus-visible::after {
	transform: scaleX(0.6);
	opacity: 0.65;
}
.site-nav a.is-active {
	color: var(--color-accent);
	font-weight: 600;
}
.site-nav a.is-active::after {
	transform: scaleX(1);
	opacity: 1;
	height: 4px;
}

/* ========== Main / iframe-Host ========== */
.content-frame-host {
	width: var(--container);
	margin: 1rem auto 2rem;
	position: relative;
	overflow: hidden;
}
.content-frame-host iframe {
	display: block;
	width: 100%;
	border: 0;
	min-height: 50vh;
	background: var(--color-bg);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	color-scheme: light;
}

/* Section common */
.section h2 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(2.25rem, 5vw, 3.25rem);
	color: var(--color-ink);
	margin-bottom: 0.25rem;
	line-height: 1;
}
.section h2 + .eyebrow {
	color: var(--color-accent);
	font-size: 0.85rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin-bottom: 1.5rem;
}
.section .lead {
	font-size: 1.15rem;
	color: var(--color-ink);
	max-width: 38rem;
	margin-bottom: 1.5rem;
}
.section p { margin-bottom: 1rem; max-width: 42rem; }
.section p strong, .section .pull { color: var(--color-ink); font-weight: 600; }
.section .pull {
	display: block;
	border-left: 3px solid var(--color-accent);
	padding-left: 1rem;
	margin: 1.5rem 0;
	font-style: italic;
	font-size: 1.1rem;
}
.section .signature {
	font-family: var(--font-display);
	font-size: 1.75rem;
	color: var(--color-accent);
	margin-top: 1.5rem;
}
.section a {
	color: var(--color-accent);
	border-bottom: 1px solid currentColor;
	transition: color 180ms var(--ease-out);
}
.section a:hover { color: var(--color-accent-soft); }

/* ========== Vorwort - Hero ========== */
.section--vorwort {
	display: grid;
	gap: 2rem;
}
.section--vorwort .verse {
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 3.5vw, 2.25rem);
	line-height: 1.3;
	color: var(--color-ink);
}

/* ========== Ausstellungen / Rückblick ========== */
.year-group {
	margin-bottom: 1.75rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--color-line);
}
.year-group:last-child { border-bottom: 0; }
.year-group h3 {
	font-family: var(--font-display);
	font-size: 2rem;
	color: var(--color-accent);
	margin-bottom: 0.5rem;
}
.year-group ul { display: flex; flex-direction: column; gap: 0.4rem; }
.year-group li {
	display: grid;
	grid-template-columns: minmax(7rem, auto) 1fr;
	gap: 1rem;
	padding: 0.4rem 0;
	border-left: 2px solid var(--color-warm);
	padding-left: 1rem;
}
.year-group li .month { color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }
.year-group li .place { color: var(--color-ink); }

/* ========== Partner Cards ========== */
.partner-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1rem;
	margin-top: 1rem;
}
.partner-card {
	display: block;
	padding: 1.25rem 1.5rem;
	background: var(--color-bg-soft);
	border-radius: var(--radius-md);
	border: 0;
	transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.partner-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.partner-card .label {
	font-family: var(--font-display);
	font-size: 1.5rem;
	color: var(--color-ink);
	display: block;
	margin-bottom: 0.25rem;
}
.partner-card .url { color: var(--color-accent); font-size: 0.95rem; word-break: break-all; }

/* ========== Einladungen ========== */
.invite-frame {
	max-width: 36rem;
	margin: 1rem auto;
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-lift);
}
.invite-empty {
	padding: 2rem;
	text-align: center;
	background: var(--color-bg-soft);
	border-radius: var(--radius-md);
	color: var(--color-ink-soft);
}

/* ========== Galerie ========== */
.gallery-tabs {
	display: flex;
	gap: 0.5rem;
	margin: 1rem 0 1.5rem;
	flex-wrap: wrap;
}
.gallery-tabs button {
	padding: 0.55rem 1.25rem;
	border-radius: 999px;
	background: var(--color-bg-soft);
	color: var(--color-ink-soft);
	font-family: var(--font-display);
	font-size: 1.35rem;
	transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.gallery-tabs button:hover { background: var(--color-warm); color: var(--color-ink); }
.gallery-tabs button.is-active {
	background: var(--color-ink);
	color: var(--color-bg);
}
.gallery-count {
	color: var(--color-ink-soft);
	font-size: 0.9rem;
	margin-left: auto;
	align-self: center;
}
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 0.75rem;
}
.gallery-grid a {
	display: block;
	border: 0;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: var(--color-bg-soft);
	aspect-ratio: 1 / 1;
	box-shadow: 0 1px 2px rgba(0,0,0,0.04);
	transition: transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out);
}
.gallery-grid a:hover {
	transform: scale(1.02);
	box-shadow: var(--shadow-lift);
}
.gallery-grid img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 380ms var(--ease-out);
}
.gallery-grid a:hover img { transform: scale(1.05); }
.gallery-loading {
	padding: 3rem 1rem;
	text-align: center;
	color: var(--color-ink-soft);
}

/* Sort-Toggle: Reihenfolge umkehren */
.gallery-sort-toggle {
	margin-left: 0.5rem;
	padding: 0.4rem 0.95rem;
	background: var(--color-bg-soft);
	color: var(--color-ink-soft);
	border-radius: 999px;
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.gallery-sort-toggle:hover { background: var(--color-warm); color: var(--color-ink); }
.gallery-sort-toggle.is-flipped {
	background: var(--color-ink);
	color: var(--color-bg);
}

/* PhotoSwipe — Übergangs-Tuning, Caption, Slide-Morph
   - Open/Close: Thumbnail expandiert/kontraktiert (showHideAnimationType: 'zoom')
   - Slide-Wechsel: Blur+Fade-Morph auf dem Image (CSS-Animation, JS-getriggert)
   - Galerie dahinter blurrt subtil mit (sichtbar beim Öffnen/Schließen)
*/
.pswp {
	--pswp-transition-duration: 700ms;
	--pswp-bg: #1a1209;
}
.pswp__bg,
.pswp__container {
	transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1) !important;
}

/* Slide-Morph beim Wechsel innerhalb der Großansicht */
@keyframes pswp-slide-morph {
	0%   { opacity: 0.15; filter: blur(28px) saturate(1.7) contrast(1.3); transform: scale(1.04); }
	60%  { opacity: 0.85; filter: blur(8px)  saturate(1.3) contrast(1.1); transform: scale(1.01); }
	100% { opacity: 1;    filter: blur(0)    saturate(1)   contrast(1);   transform: scale(1); }
}
.pswp__img.pswp-img-morph {
	animation: pswp-slide-morph 600ms cubic-bezier(0.7, 0, 0.3, 1) both;
}

@media (prefers-reduced-motion: reduce) {
	.pswp__img.pswp-img-morph { animation: none; }
}

/* Bildtitel-Label unter dem Bild */
.pswp__caption {
	position: absolute;
	left: 50%;
	bottom: 1.75rem;
	transform: translateX(-50%);
	padding: 0.55rem 1.5rem;
	background: rgba(20, 14, 8, 0.55);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #faf6e7;
	text-align: center;
	font-family: var(--font-display);
	font-size: clamp(1.1rem, 2.2vw, 1.5rem);
	line-height: 1.2;
	letter-spacing: 0.01em;
	border-radius: 999px;
	pointer-events: none;
	z-index: 1050;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
	max-width: calc(100% - 4rem);
}
@media (max-width: 600px) {
	.pswp__caption {
		bottom: 1.25rem;
		padding: 0.5rem 1.1rem;
		max-width: calc(100% - 2rem);
	}
}

/* ========== Kontaktformular ========== */
.contact-form {
	display: grid;
	gap: 1rem;
	max-width: 36rem;
	margin-top: 1rem;
}
.contact-form .field { display: grid; gap: 0.35rem; }
.contact-form label { font-size: 0.95rem; color: var(--color-ink-soft); }
.contact-form input,
.contact-form textarea {
	padding: 0.75rem 0.9rem;
	background: var(--color-bg);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.contact-form input:focus,
.contact-form textarea:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(161, 13, 55, 0.12);
}
.contact-form textarea { resize: vertical; min-height: 8rem; }
.contact-form .honeypot {
	position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}
.contact-form button[type="submit"] {
	justify-self: start;
	padding: 0.85rem 1.75rem;
	background: var(--color-ink);
	color: var(--color-bg);
	border-radius: 999px;
	font-size: 1rem;
	transition: background-color 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.contact-form button[type="submit"]:hover { background: var(--color-accent); transform: translateY(-1px); }
.contact-status {
	padding: 0.85rem 1rem;
	border-radius: var(--radius-sm);
	margin-top: 0.5rem;
}
.contact-status.is-ok { background: #e6f0e0; color: #2c5b1e; }
.contact-status.is-error { background: #fbe6e9; color: #7c1e2e; }

/* ========== Impressum ========== */
.impressum {
	display: grid;
	gap: 1rem;
}
.impressum dt { color: var(--color-ink-soft); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 0.75rem; }
.impressum dd { font-size: 1.05rem; }
.impressum address { font-style: normal; line-height: 1.6; }

/* ========== Datenschutz / Legal-Sections ========== */
.section--legal h3 {
	font-family: var(--font-display);
	font-size: 1.6rem;
	color: var(--color-accent);
	margin-top: 2rem;
	margin-bottom: 0.5rem;
	line-height: 1.2;
}
.section--legal h3:first-of-type {
	margin-top: 1rem;
}
.section--legal p { max-width: 44rem; }
.section--legal address {
	font-style: normal;
	line-height: 1.7;
	padding: 1rem 1.25rem;
	background: var(--color-bg-soft);
	border-radius: var(--radius-sm);
	max-width: 28rem;
	margin: 0.5rem 0 1rem;
}
.section--legal ul.legal-rights {
	list-style: disc;
	padding-left: 1.5rem;
	margin: 0.5rem 0 1rem;
	max-width: 44rem;
}
.section--legal ul.legal-rights li {
	margin-bottom: 0.35rem;
	color: var(--color-ink);
}

/* ========== Footer ========== */
.site-footer {
	width: var(--container);
	margin: 0 auto 2rem;
	padding: 1rem 1.5rem;
	color: var(--color-ink-soft);
	text-align: center;
	font-size: 0.85rem;
}
.footer-tags { margin-bottom: 0.25rem; }

/* ========== Responsive ========== */
@media (max-width: 720px) {
	.site-header { padding: 1rem; }
	.header-inner { grid-template-columns: auto 1fr; gap: 0.6rem 0.85rem; }
	.header-portrait { width: 5rem; height: 5rem; }
	.header-mark { max-height: 5rem; }
	.site-nav { border-radius: var(--radius-md); top: 0; }
	.site-nav ul { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
	.site-nav a { white-space: nowrap; }
	.year-group li { grid-template-columns: 1fr; }
}