/* =====================================================================
   LURETH GRAIL — main.css
   Dunkles, körniges Block-Theme. Portiert aus dem Redesign-Konzept.
   ===================================================================== */

/* ----------------------------------------------------------------------
   TOKENS  (spiegeln theme.json, damit die Sektions-CSS lesbar bleibt)
---------------------------------------------------------------------- */
:root {
	--bg:          #090908;
	--surface:     #111110;
	--surface-2:   #191816;
	--border:      #3d3928;
	--border-2:    #5a5238;

	--red:         #7a1018;
	--red-b:       #c04030;
	--red-deep:    #3d0608;

	--blue:        #243850;
	--blue-b:      #4a7090;

	--amber:       #7a5820;
	--amber-b:     #c09040;

	--grey-b:      #5a6070;
	--purple-b:    #8f6fb3;

	--text:        #ded3b6;
	--text-dim:    #9a9078;
	--text-dimmer: #6b6350;
	--snow:        #e4ddd0;
	--parchment:   #c8b898;

	--f-title: 'Bebas Neue', 'Impact', sans-serif;
	--f-body:  'Space Mono', 'Courier New', monospace;
	--f-note:  'Special Elite', 'Courier New', serif;

	--pad-x: 3.5rem;
}

/* ----------------------------------------------------------------------
   BASE
---------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body.lg-theme {
	background: var(--bg);
	color: var(--text);
	font-family: var(--f-body);
	font-size: 13px;
	line-height: 1.7;
	overflow-x: hidden;
}
.lg-theme ::selection { background: var(--red-deep); color: var(--snow); }

.lg-theme a { color: inherit; text-decoration: none; }
.v-red { color: var(--red-b); }

/* Versteckter Skip-Link bleibt zugänglich */
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 10001; background: var(--red); color: var(--snow); padding: 0.6rem 1rem; }

/* Standard-Inhaltsbreite (Einzelbeiträge/Seiten) */
.lg-theme .wp-site-blocks { position: relative; z-index: 10; }

/* ----------------------------------------------------------------------
   ATMOSPHÄRE — Canvas / Grain / Vignette / Cursor / Loader
---------------------------------------------------------------------- */
#lg-stars {
	position: fixed; inset: 0;
	pointer-events: none; z-index: 1;
}
#lg-grain {
	position: fixed; inset: -100%; width: 300%; height: 300%;
	pointer-events: none; z-index: 2; opacity: 0.04;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	animation: lg-grain-shift 0.14s steps(1) infinite;
}
@keyframes lg-grain-shift {
	0%   { transform: translate(0,0); }
	25%  { transform: translate(-2%,-1%); }
	50%  { transform: translate(1%, 2%); }
	75%  { transform: translate(2%,-1%); }
	100% { transform: translate(-1%, 2%); }
}
#lg-vignette {
	position: fixed; inset: 0; pointer-events: none; z-index: 3;
	background: radial-gradient(ellipse at 50% 35%, transparent 45%, rgba(4,4,3,0.5) 72%, rgba(4,4,3,0.9) 100%);
}

/* Custom-Cursor — nur auf Geräten mit präzisem Zeiger */
#lg-cursor-ring, #lg-cursor-dot { display: none; }
@media (pointer: fine) {
	body.lg-theme { cursor: none; }
	body.lg-theme a, body.lg-theme button, body.lg-theme input, body.lg-theme textarea { cursor: none; }
	#lg-cursor-ring {
		display: block; position: fixed; width: 26px; height: 26px;
		border: 1px solid var(--red-b); border-radius: 50%;
		pointer-events: none; z-index: 9999;
		transform: translate(-50%,-50%);
		transition: transform 0.1s ease, width 0.18s ease, height 0.18s ease, border-color 0.18s ease;
		mix-blend-mode: difference;
	}
	#lg-cursor-dot {
		display: block; position: fixed; width: 4px; height: 4px;
		background: var(--snow); border-radius: 50%;
		pointer-events: none; z-index: 9999; transform: translate(-50%,-50%);
	}
	body.lg-hovering #lg-cursor-ring { width: 42px; height: 42px; border-color: var(--snow); }
}

/* Loader */
#lg-loader {
	position: fixed; inset: 0; background: var(--bg);
	z-index: 10000; display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	transition: opacity 0.7s ease;
}
#lg-loader.lg-out { opacity: 0; pointer-events: none; }
.lg-loader-name {
	font-family: var(--f-title);
	font-size: clamp(3rem, 10vw, 7rem);
	letter-spacing: 0.08em; color: var(--text-dim);
	opacity: 0; animation: lg-fade-up 1s ease forwards 0.3s;
}
.lg-loader-sub {
	font-size: 9px; letter-spacing: 0.5em; color: var(--text-dimmer);
	margin-top: 1rem; opacity: 0; animation: lg-fade-up 0.8s ease forwards 0.9s;
}
@keyframes lg-fade-up {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ----------------------------------------------------------------------
   REVEAL (Fade-in beim Scrollen)
---------------------------------------------------------------------- */
.lg-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.8s ease; }
.lg-reveal.lg-on { opacity: 1; transform: none; }
.lg-r1 { transition-delay: 0.1s; }
.lg-r2 { transition-delay: 0.2s; }
.lg-r3 { transition-delay: 0.3s; }

/* ----------------------------------------------------------------------
   NAVIGATION (parts/header.html)
---------------------------------------------------------------------- */
.lg-nav {
	/* z-index höher als #lg-mobile-nav (210): sonst bildet .lg-nav einen eigenen
	   Stacking-Context und der Toggle-Button bleibt trotz eigenem z-index hinter
	   dem geöffneten Overlay hängen und unklickbar. */
	position: fixed; top: 0; left: 0; right: 0; z-index: 220;
	background: linear-gradient(to bottom, rgba(9,9,8,0.97) 0%, transparent 100%);
	padding: 1.8rem var(--pad-x);
	display: flex; align-items: center; justify-content: space-between;
}
.lg-nav-logo { font-family: var(--f-title); font-size: 2.1rem; letter-spacing: 0.08em; color: var(--text-dim); }
.lg-nav-logo span { color: var(--red-b); }
.lg-nav-logo img { max-height: 54px; width: auto; }
.lg-nav-cats { display: flex; gap: 0; }
.lg-cat-btn {
	font-family: var(--f-body); font-size: 11px; letter-spacing: 0.32em;
	color: var(--text-dimmer); padding: 0.7rem 1.5rem;
	background: none; border: none; border-right: 1px solid var(--border);
	transition: color 0.2s; white-space: nowrap;
}
.lg-cat-btn:first-child { border-left: 1px solid var(--border); }
.lg-cat-btn:hover, .lg-cat-btn.lg-active { color: var(--text); }
.lg-cat-btn.lg-active { color: var(--red-b); }

/* WordPress-Navigation-Block im Header (Fallback/mobil) */
.lg-nav .wp-block-navigation { font-size: 9px; letter-spacing: 0.3em; }

/* Hamburger-Button — bleibt über dem Overlay sichtbar (via .lg-nav z-index) und morpht selbst zum X (einziges Schließ-Element) */
.lg-mobile-toggle {
	display: none;
	background: none; border: none; padding: 0.4rem;
	cursor: pointer;
	flex-direction: column; align-items: flex-end; gap: 5px;
}
@media (pointer: fine) { .lg-mobile-toggle { cursor: none; } }
.lg-mobile-toggle span {
	display: block; height: 1px; background: var(--text);
	transition: width 0.2s ease, transform 0.3s ease, opacity 0.2s ease, background 0.2s ease;
}
.lg-mobile-toggle span:nth-child(1) { width: 22px; }
.lg-mobile-toggle span:nth-child(2) { width: 14px; }
.lg-mobile-toggle span:nth-child(3) { width: 22px; }
.lg-mobile-toggle[aria-expanded="true"] span { background: var(--snow); }
.lg-mobile-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); width: 22px; }
.lg-mobile-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; width: 0; }
.lg-mobile-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); width: 22px; }

/* Mobile-Nav-Overlay — unter dem Toggle (220), aber über der Nav-Leiste (200) */
#lg-mobile-nav {
	position: fixed; inset: 0;
	background: rgba(9,9,8,0.98);
	z-index: 210;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	gap: 0;
	opacity: 0; pointer-events: none;
	transition: opacity 0.35s ease;
	backdrop-filter: blur(4px);
}
#lg-mobile-nav.lg-open { opacity: 1; pointer-events: auto; }
.lg-mobile-link {
	font-family: var(--f-title);
	font-size: clamp(2.4rem, 11vw, 4.5rem);
	letter-spacing: 0.06em;
	color: var(--text-dim);
	padding: 0.7rem 2rem;
	width: 100%; text-align: center;
	border-bottom: 1px solid var(--border-2);
	display: flex; align-items: center; justify-content: center; gap: 1.2rem;
	opacity: 0; transform: translateY(14px);
	transition: opacity 0.35s ease, transform 0.35s ease, color 0.2s;
}
.lg-mobile-link:first-of-type { border-top: 1px solid var(--border-2); }
.lg-mobile-link:hover { color: var(--text); }
#lg-mobile-nav.lg-open .lg-mobile-link:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.04s; }
#lg-mobile-nav.lg-open .lg-mobile-link:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.09s; }
#lg-mobile-nav.lg-open .lg-mobile-link:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.14s; }
#lg-mobile-nav.lg-open .lg-mobile-link:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.19s; }
#lg-mobile-nav.lg-open .lg-mobile-link:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.24s; }
.lg-mobile-num {
	font-family: var(--f-body); font-size: 9px; letter-spacing: 0.3em;
	color: var(--text-dim); opacity: 0.6;
}
/* Wort als ein Block, damit der flex-gap nicht zwischen Anfangsbuchstabe und Rest reinschneidet */
.lg-mobile-word { display: inline-block; }

/* ----------------------------------------------------------------------
   HERO
---------------------------------------------------------------------- */
.lg-hero {
	position: relative; min-height: 100vh;
	display: flex; flex-direction: column; justify-content: flex-start;
	padding: 12vh var(--pad-x) 4rem; overflow: hidden; z-index: 10;
}
.lg-hero-img { position: absolute; inset: 0; z-index: 0; }
.lg-hero-img {
	background-image: url('../images/shear-1.png');
	background-size: cover; background-position: 20% center;
	opacity: 0.07; mix-blend-mode: luminosity;
}
.lg-hero-content { position: relative; z-index: 5; max-width: 820px; }
.lg-hero-label { font-size: 9px; letter-spacing: 0.5em; color: var(--red); margin-bottom: 1.4rem; }
.lg-hero-name {
	font-family: var(--f-title); font-size: clamp(5rem, 14vw, 13rem);
	line-height: 0.84; color: var(--text); letter-spacing: -0.01em; user-select: none; margin: 0;
}
.lg-hero-name .first { display: block; }
.lg-hero-name .last {
	display: block; color: transparent;
	-webkit-text-stroke: 1px var(--text-dim); text-stroke: 1px var(--text-dim);
}

/* ----------------------------------------------------------------------
   HERO-HOVER „Liquid Light" — eine Lichtwelle läuft flüssig durch den
   Schriftzug. Jeder Buchstabe hebt sich sanft, ein roter/blauer Schimmer
   blüht auf und beruhigt sich zu einem Glühen; GRAIL füllt sich dabei von
   der Kontur zur Fläche. Beim Verlassen fließt alles weich zurück.
---------------------------------------------------------------------- */
.lg-hero-name { position: relative; }
.lg-letter {
	display: inline-block; will-change: transform, filter;
	transition: transform .6s cubic-bezier(.22,1,.36,1),
	            color .45s ease, -webkit-text-stroke-color .45s ease,
	            text-shadow .6s ease, filter .6s ease;
}

/* Erste Zeile (LURETH): heben + Chromatik-Bloom, Grundfarbe bleibt erhalten */
@keyframes lg-wave-first {
	0%   { transform: translateY(0) scale(1); filter: brightness(1); text-shadow: none; }
	34%  { transform: translateY(-0.17em) scale(1.05); filter: brightness(1.6);
	       text-shadow: -0.055em 0 var(--blue-b), 0.055em 0 var(--red-b), 0 0 0.55em rgba(192,64,48,.55); }
	66%  { transform: translateY(0.015em) scale(.99); filter: brightness(1.2);
	       text-shadow: -0.012em 0 var(--blue-b), 0.012em 0 var(--red-b), 0 0 0.4em rgba(192,64,48,.4); }
	100% { transform: translateY(0) scale(1); filter: brightness(1.14);
	       text-shadow: 0 0 0.5em rgba(192,64,48,.42); }
}

/* Zweite Zeile (GRAIL): dasselbe, plus die Kontur füllt sich flüssig auf */
@keyframes lg-wave-last {
	0%   { transform: translateY(0) scale(1);
	       color: transparent; -webkit-text-stroke-color: var(--text-dim);
	       filter: brightness(1); text-shadow: none; }
	34%  { transform: translateY(-0.17em) scale(1.05);
	       color: var(--snow); -webkit-text-stroke-color: transparent; filter: brightness(1.55);
	       text-shadow: -0.055em 0 var(--blue-b), 0.055em 0 var(--red-b), 0 0 0.55em rgba(192,64,48,.55); }
	66%  { transform: translateY(0.015em) scale(.99);
	       color: var(--text); -webkit-text-stroke-color: transparent; filter: brightness(1.2);
	       text-shadow: -0.012em 0 var(--blue-b), 0.012em 0 var(--red-b), 0 0 0.4em rgba(192,64,48,.4); }
	100% { transform: translateY(0) scale(1);
	       color: var(--text); -webkit-text-stroke-color: transparent; filter: brightness(1.1);
	       text-shadow: 0 0 0.5em rgba(192,64,48,.4); }
}

/* Trigger ist eine JS-Klasse statt :hover, damit die Welle nicht abbricht,
   wenn die Maus während der Animation den Bereich verlässt — sie läuft immer
   bis zum letzten Buchstaben durch (siehe effects.js). */
.lg-hero-name.lg-anim-run .first .lg-letter {
	animation: lg-wave-first 1s cubic-bezier(.22,1,.36,1) both;
	animation-delay: calc(var(--i) * 55ms);
}
.lg-hero-name.lg-anim-run .last .lg-letter {
	animation: lg-wave-last 1s cubic-bezier(.22,1,.36,1) both;
	animation-delay: calc(var(--i) * 55ms);
}
.lg-hero-tagline { display: flex; align-items: center; gap: 1.5rem; margin: 2rem 0 3rem; }
.lg-hero-tagline-line { width: 40px; height: 1px; background: var(--red); }
.lg-hero-tagline-text { font-size: 10px; letter-spacing: 0.4em; color: var(--text-dim); }
.lg-hero-meta { display: flex; gap: 4rem; flex-wrap: wrap; }
.lg-hero-meta-label { font-size: 8px; letter-spacing: 0.4em; color: var(--text-dimmer); margin-bottom: 0.3rem; }
.lg-hero-meta-val { font-size: 11px; letter-spacing: 0.1em; color: var(--text-dim); }
.lg-hero-scroll {
	position: absolute; right: var(--pad-x); bottom: 4rem;
	display: flex; flex-direction: column; align-items: center; gap: 0.8rem; z-index: 5;
}
.lg-hero-scroll-line {
	width: 1px; height: 50px;
	background: linear-gradient(to bottom, transparent, var(--red));
	animation: lg-scroll-line 2s ease-in-out infinite;
}
@keyframes lg-scroll-line {
	0%,100% { opacity: 0.3; height: 50px; }
	50%     { opacity: 0.8; height: 70px; }
}
.lg-hero-scroll span { font-size: 8px; letter-spacing: 0.4em; color: var(--text-dimmer); writing-mode: vertical-rl; }

/* ----------------------------------------------------------------------
   FEATURED (neuester Beitrag)
---------------------------------------------------------------------- */
.lg-featured-badge {
	font-family: var(--f-body); font-size: 0.7rem; letter-spacing: 0.4em;
	color: var(--text-dimmer); padding: 1.5rem var(--pad-x) 0.8rem;
	display: flex; align-items: center; gap: 1rem;
}
.lg-featured-badge::before { content: ''; display: block; width: 24px; height: 1px; background: var(--border-2); }

.lg-featured { z-index: 10; position: relative; padding: 0 var(--pad-x); }
.lg-featured .wp-block-post { margin: 0; }
.lg-featured-inner {
	border: 1px solid var(--border);
	display: grid; grid-template-columns: 1.2fr 1fr;
	overflow: hidden; position: relative; transition: border-color 0.3s;
}
.lg-featured-inner:hover { border-color: var(--border-2); }
.lg-featured-media { position: relative; overflow: hidden; background: var(--surface); min-height: 480px; }
.lg-featured-media img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	opacity: 0.8; transition: transform 0.7s ease, opacity 0.4s ease;
}
.lg-featured-inner:hover .lg-featured-media img { transform: scale(1.04); opacity: 0.92; }
.lg-featured-media::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, transparent 60%, var(--bg) 100%); }
.lg-featured-body {
	padding: 3rem 3rem 3rem 2rem; background: var(--bg);
	display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem;
}
.lg-featured-tag { font-size: 0.7rem; letter-spacing: 0.4em; color: var(--red); }
.lg-featured-tag a { color: inherit; }
.lg-featured-title { font-family: var(--f-title); font-size: clamp(2.5rem, 5vw, 5rem); line-height: 0.9; color: var(--text); margin: 1rem 0 1.5rem; }
.lg-featured-title a { color: var(--text); }
.lg-featured-title a:hover { color: var(--snow); }
.lg-featured-excerpt { font-family: var(--f-note); font-size: 14px; line-height: 2; color: var(--text-dim); flex: 1; }
.lg-featured-footer {
	display: flex; align-items: center; justify-content: space-between;
	margin-top: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--border);
}
.lg-featured-date { font-size: 9px; letter-spacing: 0.3em; color: var(--text-dimmer); }
.lg-featured-link { font-size: 9px; letter-spacing: 0.4em; color: var(--red-b); display: inline-flex; align-items: center; gap: 0.6rem; }
.lg-featured-link::after { content: '→'; transition: transform 0.2s; }
.lg-featured-inner:hover .lg-featured-link::after { transform: translateX(4px); }

/* ----------------------------------------------------------------------
   POSTS-GRID (Query Loop)
---------------------------------------------------------------------- */
.lg-posts { position: relative; z-index: 10; padding: 5rem var(--pad-x) 8rem; }
.lg-posts-header {
	display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
	margin-bottom: 3rem; border-bottom: 1px solid var(--border); padding-bottom: 1.5rem;
}
.lg-posts-title { font-family: var(--f-title); font-size: clamp(2rem, 4vw, 4rem); line-height: 1; color: var(--text); margin: 0; }
.lg-posts-count { font-size: 9px; letter-spacing: 0.3em; color: var(--text-dimmer); }
.lg-posts-filter { display: flex; flex-wrap: wrap; gap: 0; }
.lg-posts-filter .lg-cat-btn { cursor: pointer; background: none; }
@media (pointer: fine) { .lg-posts-filter .lg-cat-btn { cursor: none; } }

.lg-posts .wp-block-post-template {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 0; padding: 0; list-style: none;
}
.lg-posts .wp-block-post-template.is-layout-flow > li { margin: 0; }

.lg-posts .wp-block-post {
	position: relative; overflow: hidden; border: 1px solid var(--border);
	background: var(--surface); transition: border-color 0.3s;
	display: flex; flex-direction: column;
	animation: lg-card-appear 0.5s ease both;
}
.lg-posts .wp-block-post:hover {
	border-color: rgba(192, 64, 48, 0.25);
	box-shadow: 0 0 24px 4px rgba(192, 64, 48, 0.18), 0 0 0 1px rgba(192, 64, 48, 0.12);
}
@keyframes lg-card-appear { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.lg-card-img { height: 200px; position: relative; overflow: hidden; margin: 0; }
.lg-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; opacity: 0.78; }
.lg-posts .wp-block-post:hover .lg-card-img img { transform: scale(1.05); opacity: 0.9; }
.lg-card-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, var(--surface) 0%, transparent 60%); pointer-events: none; }
/* Platzhalter, wenn kein Beitragsbild */
.lg-card-img:empty { background:
	repeating-linear-gradient(135deg, var(--surface) 0 14px, var(--surface-2) 14px 28px); }

.lg-card-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.lg-card-tag { font-size: 0.7rem; letter-spacing: 0.3em; margin-bottom: 0.7rem; color: var(--text-dim); text-transform: uppercase; }
.lg-card-tag a { color: inherit; }
.lg-card-title { font-family: var(--f-title); font-size: 1.9rem; line-height: 1; color: var(--text); margin: 0 0 0.8rem; }
.lg-card-title a { color: var(--text); }
.lg-card-title a:hover { color: var(--snow); }
.lg-card-excerpt {
	font-size: 11px; line-height: 1.8; color: var(--text-dim); margin: 0 0 1.2rem;
	display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1;
}
.lg-card-footer {
	display: flex; justify-content: space-between; align-items: center;
	padding-top: 1rem; border-top: 1px solid var(--border); margin-top: auto;
}
.lg-card-date { font-size: 8px; letter-spacing: 0.25em; color: var(--text-dimmer); }
.lg-card-footer::after { content: '→'; font-size: 11px; color: var(--text-dimmer); transition: color 0.2s, transform 0.2s; }
.lg-posts .wp-block-post:hover .lg-card-footer::after { color: var(--red-b); transform: translateX(3px); }

/* Kategorie-Farben (WordPress vergibt category-<slug> auf <li>) */
.wp-block-post[class*="category-vyshka"]      .lg-card-tag { color: var(--red-b); }
.wp-block-post[class*="category-astrofotos"]  .lg-card-tag { color: var(--blue-b); }
.wp-block-post[class*="category-astrophotography"] .lg-card-tag { color: var(--blue-b); }
.wp-block-post[class*="category-memorabilia"] .lg-card-tag { color: var(--amber-b); }
.wp-block-post[class*="category-tools"]       .lg-card-tag { color: var(--text-dim); }

/* Pagination */
.lg-posts .wp-block-query-pagination { margin-top: 3rem; justify-content: center; gap: 1rem; }
.lg-posts .wp-block-query-pagination a,
.lg-posts .wp-block-query-pagination .wp-block-query-pagination-numbers { font-size: 10px; letter-spacing: 0.3em; color: var(--text-dim); }
.lg-posts .wp-block-query-pagination .current { color: var(--red-b); }

/* Client-Filter: ausgeblendete Karten */
.wp-block-post.lg-hidden { display: none !important; }

/* ----------------------------------------------------------------------
   ABOUT-STRIP
---------------------------------------------------------------------- */
.lg-about {
	position: relative; z-index: 10; border-top: 1px solid var(--border);
	padding: 6rem var(--pad-x); display: grid; grid-template-columns: 1fr 2fr; gap: 6rem; align-items: center;
}
.lg-about-tag { font-size: 0.7rem; letter-spacing: 0.4em; color: var(--red); margin-bottom: 1rem; display: flex; align-items: center; gap: 1rem; }
.lg-about-tag::before { content: ''; display: block; width: 24px; height: 1px; background: var(--red); }
.lg-about-heading { font-family: var(--f-title); font-size: clamp(2rem, 5vw, 5.5rem); line-height: 0.88; color: var(--text); margin: 0; }
.lg-about-img { position: relative; height: 280px; overflow: hidden; margin-top: 2rem; }
.lg-about-img img { width: 100%; height: 100%; object-fit: cover; opacity: 0.3; filter: grayscale(1); mix-blend-mode: luminosity; transition: opacity 0.4s; }
.lg-about-img:hover img { opacity: 0.45; }
.lg-about-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--bg) 0%, transparent 60%); }
.lg-about-body { font-family: var(--f-note); font-size: 15px; line-height: 2.1; color: var(--text-dim); }
.lg-about-body p + p { margin-top: 1.5em; }
.lg-about-body em { color: var(--text); font-style: italic; }
.lg-about-body .v-red { font-style: normal; }
.lg-about-links { margin-top: 3rem; display: flex; gap: 2rem; flex-wrap: wrap; }
.lg-about-link {
	font-size: 9px; letter-spacing: 0.4em; color: var(--text-dimmer);
	padding-bottom: 0.4rem; border-bottom: 1px solid var(--border); transition: color 0.2s, border-color 0.2s;
}
.lg-about-link:hover { color: var(--red-b); border-color: var(--red); }

/* ----------------------------------------------------------------------
   KATEGORIEN-SHOWCASE
---------------------------------------------------------------------- */
.lg-cats { position: relative; z-index: 10; border-top: 1px solid var(--border); padding: 6rem var(--pad-x); }
.lg-cats-header { margin-bottom: 3rem; }
.lg-cats-eyebrow { font-size: 9px; letter-spacing: 0.5em; color: var(--red); display: flex; align-items: center; gap: 1rem; }
.lg-cats-eyebrow span { display: block; width: 24px; height: 1px; background: var(--red); }
.lg-cats-heading { font-family: var(--f-title); font-size: clamp(2rem, 4vw, 4rem); margin: 0.8rem 0 0; color: var(--text); }
.lg-cats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.lg-cat-card {
	border: 1px solid var(--border); padding: 2.5rem 2rem;
	position: relative; overflow: hidden; transition: border-color 0.3s, box-shadow 0.3s; display: block;
}
.lg-cat-card:hover { border-color: var(--border-2); }
.lg-cat-card::before {
	content: attr(data-num); position: absolute; top: 1.5rem; right: 1.5rem;
	font-family: var(--f-title); font-size: 4rem; color: var(--border); line-height: 1;
}
.lg-cat-icon { font-size: 1.5rem; margin-bottom: 1.5rem; opacity: 0.4; }
.lg-cat-name { font-family: var(--f-title); font-size: 2.4rem; line-height: 1; margin-bottom: 0.8rem; color: var(--text); }
.lg-cat-desc { font-size: 10px; line-height: 1.8; color: var(--text-dim); }
.lg-cat-count { margin-top: 2rem; font-size: 8px; letter-spacing: 0.3em; color: var(--text-dimmer); }
.lg-cat-card.vyshka      .lg-cat-name { color: var(--red-b); }
.lg-cat-card.tools       .lg-cat-name { color: var(--blue-b); }
.lg-cat-card.memorabilia .lg-cat-name { color: var(--amber-b); }
.lg-cat-card.astrofotos  .lg-cat-name { color: var(--grey-b); }
.lg-cat-card.vyshka      { border-color: #1e0c10; }
.lg-cat-card.tools       { border-color: #0c1820; }
.lg-cat-card.memorabilia { border-color: #201408; }
.lg-cat-card.astrofotos  { border-color: #14161c; }

/* Farbiges Leucht-Hover je Kategorie — gleicher Effekt wie bei den Post-Karten
   oben (.lg-posts .wp-block-post:hover), nur in der jeweiligen Themenfarbe */
.lg-cat-card.vyshka:hover {
	border-color: rgba(192, 64, 48, 0.25);
	box-shadow: 0 0 24px 4px rgba(192, 64, 48, 0.18), 0 0 0 1px rgba(192, 64, 48, 0.12);
}
.lg-cat-card.tools:hover {
	border-color: rgba(74, 112, 144, 0.25);
	box-shadow: 0 0 24px 4px rgba(74, 112, 144, 0.18), 0 0 0 1px rgba(74, 112, 144, 0.12);
}
.lg-cat-card.memorabilia:hover {
	border-color: rgba(192, 144, 64, 0.25);
	box-shadow: 0 0 24px 4px rgba(192, 144, 64, 0.18), 0 0 0 1px rgba(192, 144, 64, 0.12);
}
.lg-cat-card.astrofotos:hover {
	border-color: rgba(90, 96, 112, 0.25);
	box-shadow: 0 0 24px 4px rgba(90, 96, 112, 0.18), 0 0 0 1px rgba(90, 96, 112, 0.12);
}

/* ----------------------------------------------------------------------
   FOOTER (parts/footer.html)
---------------------------------------------------------------------- */
/* ----------------------------------------------------------------------
   NEWSLETTER (im Footer, seitenweit)
---------------------------------------------------------------------- */
.lg-newsletter {
	position: relative; z-index: 10;
	border-top: 1px solid var(--border);
	padding: 6rem var(--pad-x) 5rem; text-align: center;
	background: radial-gradient(120% 100% at 50% 0%, rgba(122,16,24,0.10) 0%, transparent 60%);
}
.lg-newsletter-inner { max-width: 640px; margin: 0 auto 2.5rem; }
.lg-newsletter-eyebrow { font-size: 9px; letter-spacing: 0.5em; color: var(--red); margin-bottom: 1.4rem; }
.lg-newsletter-title {
	font-family: var(--f-title); font-size: clamp(2.2rem, 5vw, 4.5rem);
	line-height: 0.95; color: var(--text); margin: 0 0 1.2rem;
}
.lg-newsletter-title span { color: var(--red-b); }
.lg-newsletter-sub { font-family: var(--f-note); font-size: 14px; line-height: 1.9; color: var(--text-dim); margin: 0; }

/* „The Newsletter Plugin" — minimales Formular ([newsletter_form]) an das Theme angepasst */
.lg-newsletter .tnp { max-width: 520px; margin: 0 auto; }
.lg-newsletter .tnp-subscription-minimal form {
	display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; align-items: stretch;
}
.lg-newsletter .tnp-email {
	flex: 0 1 300px; min-width: 0;
	background: var(--surface-2); border: 1px solid var(--border);
	color: var(--text); font-family: var(--f-body); font-size: 12px; letter-spacing: 0.05em;
	padding: 0.9rem 1rem; border-radius: 0;
	transition: border-color 0.25s, box-shadow 0.25s;
}
.lg-newsletter .tnp-email::placeholder { color: var(--text-dimmer); letter-spacing: 0.1em; }
.lg-newsletter .tnp-email:focus {
	outline: none; border-color: var(--red-b);
	box-shadow: 0 0 0 1px rgba(192,64,48,0.3), 0 0 18px rgba(192,64,48,0.15);
}
.lg-newsletter .tnp-submit {
	flex: 0 0 auto; cursor: pointer;
	background: var(--red); color: var(--snow);
	font-family: var(--f-body); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
	border: 1px solid var(--red); border-radius: 0; padding: 0.9rem 1.8rem;
	transition: background-color 0.25s, border-color 0.25s;
}
.lg-newsletter .tnp-submit:hover { background: var(--red-b); border-color: var(--red-b); }
@media (pointer: fine) { .lg-newsletter .tnp-email, .lg-newsletter .tnp-submit { cursor: none; } }
.lg-newsletter .tnp-privacy-field {
	flex: 1 1 100%; font-size: 10px; color: var(--text-dimmer); letter-spacing: 0.05em; margin-top: 0.4rem;
}
.lg-newsletter .tnp-privacy-field a { color: var(--red-b); }

/* Toast (z.B. nach dem Newsletter-Abo) — von effects.js ein-/ausgeblendet */
#lg-toast {
	position: fixed; left: 50%; bottom: 2.5rem; z-index: 300;
	transform: translate(-50%, 16px);
	background: var(--surface-2); border: 1px solid var(--red-b);
	color: var(--text); font-family: var(--f-body); font-size: 11px; letter-spacing: 0.06em;
	padding: 1rem 1.6rem; max-width: min(90vw, 420px); text-align: center;
	box-shadow: 0 0 30px rgba(192,64,48,.2), 0 8px 28px rgba(0,0,0,.55);
	opacity: 0; pointer-events: none;
	transition: opacity 0.35s ease, transform 0.35s cubic-bezier(.22,1,.36,1);
}
#lg-toast.lg-toast-show { opacity: 1; transform: translate(-50%, 0); }

.lg-footer {
	position: relative; z-index: 10; border-top: 1px solid var(--border);
	padding: 4rem var(--pad-x) 3rem;
	display: grid; grid-template-columns: 1fr; justify-items: center; align-items: end; gap: 2rem;
}
.lg-footer-name { font-family: var(--f-title); font-size: clamp(2.5rem, 6vw, 7rem); line-height: 1; color: var(--border-2); margin: 0; }
.lg-footer-name span { color: var(--red); }
.lg-footer-center { text-align: center; font-size: 9px; letter-spacing: 0.3em; color: var(--text-dimmer); line-height: 2.5; }
.lg-footer-center a:hover { color: var(--red-b); }
.lg-footer-right { text-align: right; font-size: 9px; letter-spacing: 0.3em; color: var(--text-dimmer); line-height: 2.5; }
.lg-footer-richte { color: var(--red); letter-spacing: 0.5em; margin-top: 1.5rem; }

/* ----------------------------------------------------------------------
   EINZELBEITRAG / SEITE  (Prosa)
---------------------------------------------------------------------- */
.lg-article { position: relative; z-index: 10; padding: 9rem var(--pad-x) 5rem; }
.lg-article-header { max-width: 1320px; margin: 0 auto 3rem; text-align: center; }
.lg-article-eyebrow { font-size: 9px; letter-spacing: 0.5em; color: var(--red); margin-bottom: 1.2rem; }
.lg-article .wp-block-post-title { font-family: var(--f-title); font-size: clamp(3rem, 8vw, 7rem); line-height: 0.9; color: var(--text); margin: 0 0 1.2rem; }
.lg-article-meta { font-size: 9px; letter-spacing: 0.3em; color: var(--text-dimmer); display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: center; }
.lg-article-meta a { color: var(--red-b); }

/* Saphile (Demo) — nur für Prosa-Überschriften (Task 17) */
@font-face {
	font-family: 'Saphile Rounded Demo';
	src: url('../fonts/SaphileRoundedDemoDrawn-6RyDv.otf') format('opentype');
	font-weight: normal; font-style: normal; font-display: swap;
}

.lg-prose { color: var(--text-dim); font-size: 15px; line-height: 1.85; }
.lg-prose p { margin: 0 0 1.4rem; }
.lg-prose h2,
.lg-prose h3,
.lg-prose h4 {
	font-family: 'Saphile Rounded Demo', var(--f-title);
	text-align: center; color: var(--text); letter-spacing: 0.01em;
}
.lg-prose h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 3rem 0 1.2rem; }
.lg-prose h3 { font-size: clamp(1.3rem, 3vw, 1.9rem); margin: 2.4rem 0 1rem; }
.lg-prose h4 { font-size: clamp(1.1rem, 2.5vw, 1.5rem); margin: 2rem 0 0.8rem; }
.lg-prose a { color: var(--red-b); border-bottom: 1px solid var(--red-deep); }
.lg-prose a:hover { color: var(--snow); border-color: var(--red-b); }
.lg-prose img { display: block; margin-left: auto; margin-right: auto; max-width: 100%; height: auto; }
.lg-prose figure { margin: 2.5rem auto; display: block; max-width: 100%; text-align: center; }
.lg-prose .wp-block-image { margin: 2.5rem auto; display: block; max-width: 100%; }
.lg-prose .wp-block-image img { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.lg-prose blockquote, .lg-prose .wp-block-quote {
	font-family: var(--f-note); border-left: 2px solid var(--red); padding: 0.8rem 1.2rem; margin: 2rem 0; color: var(--text); font-style: italic;
}
.lg-prose code, .lg-prose .wp-block-code {
	font-family: var(--f-body); background: var(--surface); border: 1px solid var(--border);
	padding: 0.1em 0.4em; font-size: 0.92em; color: var(--parchment);
}
.lg-prose .wp-block-code { padding: 1.2rem; display: block; overflow-x: auto; }
.lg-prose ul, .lg-prose ol { margin: 1.2rem 0 1.6rem; padding-left: 1.5rem; }
.lg-prose li { margin-bottom: 0.5rem; }
.lg-prose figcaption { font-size: 0.75rem; letter-spacing: 0.1em; color: var(--text-2, var(--text-dim)); text-align: center; margin-top: 0.5rem; }
/* Audio + YouTube/Embed: auf innere Content-Breite (760px) beschränken */
.lg-prose .wp-block-audio,
.lg-prose .wp-block-video,
.lg-prose .wp-block-embed {
	max-width: var(--wp--style--global--content-size, 760px);
	width: 100%;
	margin: 2rem auto;
	display: block;
}
.lg-prose .wp-block-audio audio {
	display: block;
	width: 100%;
	margin: 0 auto;
}
.lg-prose .wp-block-embed__wrapper {
	max-width: 100%;
}

/* Beitragsnavigation / zurück-Link */
.lg-post-nav { max-width: 1320px; margin: 4rem auto 0; padding-top: 2rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 1rem; }
.lg-post-nav a { font-size: 9px; letter-spacing: 0.3em; color: var(--text-dim); }
.lg-post-nav a:hover { color: var(--red-b); }

/* ----------------------------------------------------------------------
   ARCHIV-KOPF
---------------------------------------------------------------------- */
.lg-archive-head { position: relative; z-index: 10; padding: 9rem var(--pad-x) 0; }
.lg-archive-eyebrow { font-size: 9px; letter-spacing: 0.5em; color: var(--red); margin-bottom: 1rem; }
.lg-archive-title { font-family: var(--f-title); font-size: clamp(3rem, 8vw, 7rem); line-height: 0.9; color: var(--text); margin: 0; }
.lg-archive-desc { font-family: var(--f-note); color: var(--text-dim); margin-top: 1rem; max-width: 640px; }

/* ----------------------------------------------------------------------
   404
---------------------------------------------------------------------- */
.lg-404 { position: relative; z-index: 10; min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6rem var(--pad-x); }
.lg-404-code { font-family: var(--f-title); font-size: clamp(7rem, 22vw, 18rem); line-height: 0.8; color: var(--text-dimmer); }
.lg-404-code span { color: var(--red); }

/* ----------------------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------------------- */
@media (max-width: 1000px) {
	:root { --pad-x: 1.5rem; }
	.lg-nav-cats { display: none; }
	.lg-mobile-toggle { display: flex; }
	.lg-featured-inner { grid-template-columns: 1fr; }
	.lg-featured-media { min-height: 260px; }
	.lg-posts .wp-block-post-template { grid-template-columns: 1fr 1fr; }
	.lg-about { grid-template-columns: 1fr; gap: 3rem; padding: 4rem var(--pad-x); }
	.lg-cats-grid { grid-template-columns: 1fr 1fr; }
	.lg-footer { gap: 1.5rem; }
	.lg-posts { padding: 4rem var(--pad-x) 5rem; }
}
@media (max-width: 640px) {
	.lg-posts .wp-block-post-template { grid-template-columns: 1fr; }
	.lg-cats-grid { grid-template-columns: 1fr; }
	.lg-hero-meta { gap: 2rem; }
}

/* ----------------------------------------------------------------------
   REDUZIERTE BEWEGUNG / BARRIEREFREIHEIT
---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	#lg-grain { animation: none; }
	.lg-hero-scroll-line { animation: none; }
	.lg-reveal { opacity: 1 !important; transform: none !important; transition: none; }
	.lg-posts .wp-block-post { animation: none; }
	.lg-hero-name.lg-anim-run .lg-letter { animation: none !important; }
	html { scroll-behavior: auto; }
	#lg-toast { transition: opacity 0.2s ease; transform: none !important; }
}

/* Editor: Hintergrund auch im Block-Editor dunkel andeuten */
.editor-styles-wrapper.lg-theme { background: var(--bg); }

/* ----------------------------------------------------------------------
   SITE-EDITOR / BLOCK-EDITOR — Overrides
   (CSS wird via add_editor_style in den Editor-Iframe geladen)
   body.block-editor-iframe__body wird von React synchron beim Rendern gesetzt
   (im Gegensatz zur documentElement-Klasse, die erst später per onLoad kommt),
   deshalb greift dieser Selektor zuverlässig vom ersten Frame an.
---------------------------------------------------------------------- */
body.block-editor-iframe__body #lg-loader,
body.block-editor-iframe__body #lg-grain,
body.block-editor-iframe__body #lg-stars,
body.block-editor-iframe__body #lg-vignette,
body.block-editor-iframe__body #lg-cursor-ring,
body.block-editor-iframe__body #lg-cursor-dot,
body.block-editor-iframe__body #lg-mobile-nav { display: none !important; }

/* 100vh im Editor vermeiden — verhindert den endlosen Zoom-Effekt */
body.block-editor-iframe__body .lg-hero { min-height: 55vh; }
body.block-editor-iframe__body .lg-hero-name.lg-anim-run .lg-letter { animation: none !important; }