/**
 * Aether — Layout: Header (sticky/glass), Navigation, Footer, Seiten-Gerüst.
 */

/* =====================================================================
   HEADER — sticky, transparent über Hero, Glassmorphism beim Scrollen
   ===================================================================== */
.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: var(--z-header);
	transition: background-color var(--dur-mid) var(--ease-out),
	            backdrop-filter var(--dur-mid) var(--ease-out),
	            box-shadow var(--dur-mid) var(--ease-out),
	            transform var(--dur-mid) var(--ease-out);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	min-height: 4.75rem;
	/* Deutlich mehr Luft nach oben (unter Notch/Statusbar dank safe-area). */
	padding-top: max(2.75rem, calc(env(safe-area-inset-top) + 1.75rem));
	padding-bottom: 1.4rem;
	transition: padding var(--dur-mid) var(--ease-out);
}

/* Beim Scrollen kompakter werden. */
.site-header.is-scrolled .site-header__inner {
	min-height: 4.25rem;
	padding-top: 0.9rem;
	padding-bottom: 0.9rem;
}

/* Transparent-Startzustand (nur wenn Seite einen Hero hat) */
.has-transparent-header .site-header:not(.is-scrolled):not(.is-open) {
	background: transparent;
}
.has-transparent-header .site-header:not(.is-scrolled):not(.is-open) .site-nav__list > li > a,
.has-transparent-header .site-header:not(.is-scrolled):not(.is-open) .brand-wordmark {
	color: var(--color-on-dark);
	/* Leichter Schatten für Lesbarkeit über hellen Fotostellen. */
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
}
/* Über dem Hero erscheint das (türkise) Logo weiß; beim Scrollen/Menü wieder
   in Originalfarbe. Braucht ein transparentes Logo-PNG/SVG. */
.has-transparent-header .site-header:not(.is-scrolled):not(.is-open) .custom-logo {
	filter: brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
}
.has-transparent-header .site-header:not(.is-scrolled):not(.is-open) .nav-underline {
	background: var(--color-on-dark);
}

/* Glass-Zustand (gescrollt) */
.site-header.is-scrolled {
	background: var(--glass-bg);
	-webkit-backdrop-filter: saturate(150%) blur(var(--glass-blur));
	backdrop-filter: saturate(150%) blur(var(--glass-blur));
	box-shadow: 0 1px 0 var(--color-line), var(--shadow-soft);
}

/* Nicht-Front-Seiten: Header hat immer Hintergrund, Platz reservieren */
body:not(.has-transparent-header) { padding-top: 5.5rem; }
body:not(.has-transparent-header) .site-header { background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); box-shadow: 0 1px 0 var(--color-line); }

/* Branding */
.brand-wordmark {
	font-family: var(--font-serif);
	font-size: 1.6rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--color-ink);
}
.custom-logo-link { display: inline-block; }
.custom-logo { max-height: 2.75rem; width: auto; transition: filter var(--dur-mid) var(--ease-out); }

/* =====================================================================
   NAVIGATION (Desktop)
   ===================================================================== */
.site-nav { display: none; }

.site-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.2vw, 2.25rem);
	list-style: none;
	padding: 0;
	position: relative; /* Bezug für den gleitenden Unterstrich */
}
.site-nav__list a {
	position: relative;
	font-size: var(--fs-200);
	font-weight: 500;
	letter-spacing: var(--tracking-mid);
	padding-block: 0.5rem;
	color: var(--color-ink);
}

/* EIN gleitender Unterstrich als Positions-Indikator (per JS bewegt). */
.nav-underline {
	position: absolute;
	left: 0;
	bottom: 0.1rem;
	height: 1.5px;
	width: 0;
	background: var(--color-ink);
	border-radius: 1px;
	opacity: 0;
	transform: translateX(0);
	pointer-events: none;
}
.nav-underline.is-ready {
	transition: transform 0.45s var(--ease-out), width 0.45s var(--ease-out), opacity 0.3s var(--ease-out);
}

.site-header__actions { display: flex; align-items: center; gap: var(--space-sm); }
.site-header__cta { display: none; }

/* Burger */
.nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem; height: 2.75rem;
	color: inherit;
}
.nav-toggle__box { position: relative; width: 26px; height: 14px; }
.nav-toggle__line {
	position: absolute; left: 0;
	width: 100%; height: 1.5px;
	background: currentColor;
	transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nav-toggle__line:nth-child(1) { top: 0; }
.nav-toggle__line:nth-child(2) { bottom: 0; }
.has-transparent-header .site-header:not(.is-scrolled):not(.is-open) .nav-toggle { color: var(--color-on-dark); }

/* Burger → X, wenn offen */
.site-header.is-open .nav-toggle__line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-header.is-open .nav-toggle__line:nth-child(2) { transform: translateY(-6px) rotate(-45deg); }

/* =====================================================================
   MOBILE NAV — Full-Screen Overlay
   ===================================================================== */
.mobile-nav {
	position: fixed;
	inset: 0;
	z-index: var(--z-nav);
	background: var(--color-background);
	display: grid;
	place-items: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--dur-mid) var(--ease-out), visibility var(--dur-mid);
}
.mobile-nav[hidden] { display: grid; } /* hidden nur semantisch; Animation via .is-open */
.mobile-nav.is-open { opacity: 1; visibility: visible; }

.mobile-nav__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-md);
	text-align: center;
	padding: var(--space-xl) var(--gutter);
}
.mobile-nav__close {
	position: absolute;
	top: max(1.1rem, env(safe-area-inset-top));
	right: 1.1rem;
	z-index: 1;
	width: 3rem;
	height: 3rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: var(--color-ink);
	background: var(--color-surface);
	box-shadow: var(--shadow-soft);
	transition: transform var(--dur-fast) var(--ease-out);
}
.mobile-nav__close:hover { transform: rotate(90deg); }
.mobile-nav__close .icon { width: 1.4rem; height: 1.4rem; }
.mobile-nav__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.mobile-nav__list a {
	font-family: var(--font-serif);
	font-size: var(--fs-600);
	font-weight: 500;
	color: var(--color-ink);
}
.mobile-nav__list a:hover { color: var(--color-accent-ink); }
.mobile-nav__cta { margin-top: var(--space-sm); }
.mobile-nav__social { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--color-muted); }

/* Staffel-Animation der Menüpunkte */
.mobile-nav__list li { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out); }
.mobile-nav.is-open .mobile-nav__list li { opacity: 1; transform: none; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(1) { transition-delay: 0.08s; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(2) { transition-delay: 0.14s; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(3) { transition-delay: 0.20s; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(4) { transition-delay: 0.26s; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(5) { transition-delay: 0.32s; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(6) { transition-delay: 0.38s; }

body.nav-open { overflow: hidden; }

/* =====================================================================
   SEITEN-GERÜST (page-hero, grids, pagination)
   ===================================================================== */
.page-hero { padding-block: clamp(6rem, 12vw, 10rem) var(--space-lg); text-align: center; }
.page-hero--compact { padding-block: clamp(6rem, 10vw, 8rem) var(--space-md); }
.page-hero__title { font-size: var(--fs-700); }
.page-hero__desc { margin-top: var(--space-sm); color: var(--color-muted); max-width: 48ch; margin-inline: auto; }

.page-head { text-align: center; margin-bottom: var(--space-lg); }

.post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: var(--space-lg) var(--space-md);
}

.pagination, .comments-pagination {
	display: flex;
	justify-content: center;
	margin-top: var(--space-xl);
}
.pagination .nav-links, .comments-pagination .nav-links { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pagination .page-numbers {
	display: inline-grid; place-items: center;
	min-width: 2.75rem; height: 2.75rem; padding-inline: 0.75rem;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-pill);
	font-size: var(--fs-200);
	transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover { background: var(--color-ink); color: var(--color-on-dark); border-color: var(--color-ink); }

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer {
	margin-top: var(--space-2xl);
	padding-block: var(--space-xl) var(--space-lg);
	background: var(--color-ink);
	color: var(--color-on-dark);
}
.site-footer .brand-wordmark { color: var(--color-on-dark); }
.site-footer .custom-logo { filter: brightness(0) invert(1); opacity: 0.92; }
.site-footer a { color: var(--color-on-dark); }
.site-footer a:hover { color: var(--color-accent); }

.site-footer__grid {
	display: grid;
	gap: var(--space-lg);
	grid-template-columns: 1fr;
	padding-bottom: var(--space-lg);
	border-bottom: 1px solid rgba(246, 241, 232, 0.15);
}
.site-footer__claim { margin-top: var(--space-xs); color: rgba(246, 241, 232, 0.7); max-width: 34ch; font-family: var(--font-serif); font-size: var(--fs-400); }
.site-footer__social { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: var(--space-md); }

.site-footer__heading { font-size: var(--fs-200); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-family: var(--font-sans); color: rgba(246, 241, 232, 0.6); margin-bottom: var(--space-sm); }
.site-footer__menu, .site-footer__legal { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.site-footer__nav .site-footer__menu a { font-family: var(--font-serif); font-size: var(--fs-400); }

.contact-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.contact-list li { display: flex; align-items: flex-start; gap: 0.6rem; color: rgba(246, 241, 232, 0.8); }
.contact-list .icon { color: var(--color-accent); margin-top: 0.2em; }

.site-footer__bottom {
	display: flex; flex-wrap: wrap; gap: var(--space-sm);
	align-items: center; justify-content: space-between;
	padding-top: var(--space-md);
	font-size: var(--fs-100);
	color: rgba(246, 241, 232, 0.6);
}
.site-footer__note { opacity: 0.75; }
.site-footer__note::before { content: "· "; }
.site-footer__legal { flex-direction: row; gap: var(--space-md); }
.site-footer__legal a { font-size: var(--fs-100); }

/* =====================================================================
   RESPONSIVE — Desktop-Navigation ab 900px
   ===================================================================== */
@media (min-width: 900px) {
	.site-nav { display: block; }
	.nav-toggle { display: none; }
	.site-header__cta { display: inline-flex; }

	.site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-xl); }
}