/* ============================================================
   chdes — gemeinsame Basis (Header / Menü / Footer / Inter)
   wird auf ALLEN Seiten geladen
   ============================================================ */
@import url("../fonts/inter.css");

:root {
	--outer:    clamp(20px, 5vw, 40px);
}

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

body {
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Sticky-Footer: Inhalt füllt mind. die Viewport-Höhe, Footer wird nach unten gedrückt */
	display: flex; flex-direction: column;
	min-height: 100vh; min-height: 100dvh;
}

/* ── Header ───────────────────────────────────────────────── */
.lt-header {
	position: fixed; top: 0; left: 0; right: 0; z-index: 100;
	display: flex; align-items: center; justify-content: space-between;
	padding: 1rem var(--outer);
	transition: transform .35s ease, background-color .3s ease, backdrop-filter .3s ease, border-color .3s ease;
	border-bottom: 1px solid transparent;
}
/* Glossy-Hintergrund, sobald nicht mehr ganz oben — die Seiten-bg-Farbe, leicht
   transparent + Blur. Folgt zentral der bg aus site.json. */
.lt-header.is-scrolled {
	background: color-mix(in srgb, var(--site-bg, #0b0b0f) 72%, transparent);
	backdrop-filter: blur(14px) saturate(160%);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	border-bottom-color: color-mix(in srgb, var(--site-fc, #fff) 10%, transparent);
}
/* Beim Runterscrollen ausblenden (Hochscrollen bringt ihn zurück) */
.lt-header.is-hidden { transform: translateY(-100%); }
.lt-logo {
	font-weight: 900; font-size: 1.4rem; letter-spacing: -.03em;
	color: #fff; text-decoration: none; line-height: 1;
	mix-blend-mode: difference;
	-webkit-user-select: none; user-select: none;
}
.lt-logo:hover { opacity: .85; }
.lt-logo-img { display: block; height: 13px; width: auto; -webkit-user-drag: none; user-select: none; pointer-events: none; }
/* Bild-Logo nicht durch den difference-Blend des Text-Logos einfärben */
.lt-logo:has(.lt-logo-img) { mix-blend-mode: normal; }

.lt-burger {
	width: 44px; height: 44px; padding: 0; border: none; cursor: pointer;
	background: transparent;
	display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
	transition: opacity .2s ease;
}
.lt-burger:hover { opacity: .6; }
.lt-burger span {
	display: block; width: 22px; height: 2px; background: var(--site-fc, #fff); border-radius: 2px;
	transition: transform .3s ease, opacity .2s ease;
}
.lt-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.lt-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.lt-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Overlay-Menü ─────────────────────────────────────────── */
.lt-menu {
	position: fixed; inset: 0; z-index: 90;
	background: color-mix(in srgb, var(--site-bg, #0b0b0f) 88%, transparent);
	backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
	opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease;
}
.lt-menu.open { opacity: 1; visibility: visible; }
.lt-menu a {
	color: var(--site-fc, #fff); text-decoration: none; font-weight: 800; letter-spacing: -.02em;
	font-size: clamp(2rem, 9vw, 3.25rem); line-height: 1.25;
	opacity: .55; transition: opacity .2s ease, transform .2s ease;
}
.lt-menu a:hover { opacity: 1; transform: translateX(6px); }

/* ── Gemeinsamer Footer ───────────────────────────────────── */
.site-footer {
	background: var(--site-bg, #0b0b0f); color: var(--site-fc, #fff);
	padding: 3rem var(--outer); margin-top: auto;
	border-top: 1px solid color-mix(in srgb, var(--site-fc, #fff) 10%, transparent);
}
.site-footer-inner {
	display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; justify-content: space-between;
	max-width: 980px; margin: 0 auto;
}
.site-footer p { margin: 0; font-size: .85rem; color: color-mix(in srgb, var(--site-fc, #fff) 60%, transparent); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.site-footer a { color: var(--site-fc, #fff); text-decoration: none; font-size: .9rem; font-weight: 600; opacity: .8; }
.site-footer a:hover { opacity: 1; text-decoration: underline; }

/* ── Einfache Inhaltsseite (Dummy & künftige Seiten) ──────── */
.page-content { background: #fff; color: #111; }
.content-page { max-width: 720px; margin: 0 auto; padding: 8rem var(--outer) 5rem; min-height: 70vh; }
.content-page h1 { font-size: clamp(2.2rem, 7vw, 3.5rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.05; margin: 0 0 1.25rem; }
.content-page .lead { font-size: 1.2rem; color: #555; line-height: 1.6; margin: 0 0 2rem; }
.content-page p { font-size: 1.05rem; line-height: 1.75; color: #333; }