/* ====================================================================
   Design-Test „Stille Orte“ (Stitch-Adaption, Modern Editorial)
   Wird NUR auf /design-test/* geladen – die echte Seite bleibt unberührt.
   Effekte fest eingestellt (Abnahme 15.07.2026): Rausch-Hintergrund an,
   Bild-Hover an, Seitenübergänge an, Scroll-Einblenden entfernt.
   Quelle der Tokens: Stitch-Export „Modern Editorial Serenity“ (DESIGN.md).
   ==================================================================== */

:root {
	/* Farben */
	--st-surface: #f4faff;            /* Papierweiß (Grundfläche) */
	--st-container-lowest: #ffffff;
	--st-container-low: #eef5f9;
	--st-container: #e8eff3;
	--st-container-high: #e2e9ee;
	--st-on-surface: #161d20;         /* Text */
	--st-on-variant: #44474a;         /* Sekundärtext */
	--st-outline: #75777a;            /* Metadaten, Icons */
	--st-outline-variant: #c5c6ca;    /* Linien */
	--st-primary: #000101;            /* Tiefes Anthrazit */
	--st-on-primary: #ffffff;
	--st-secondary: #506354;          /* Salbei-Akzent */
	--st-secondary-fixed: #d3e8d5;    /* helles Salbei (Chips, Selektion) */
	--st-on-secondary-fixed: #0e1f13;

	/* Schrift */
	--st-serif: 'Playfair Display', Georgia, serif;
	--st-sans: 'Geist Sans', 'Geist', -apple-system, 'Segoe UI', Roboto, sans-serif;

	/* Bewegung: „gewichtet und bewusst“ (DESIGN.md) */
	--st-ease: cubic-bezier(0.2, 0, 0, 1);

	/* Raster */
	--st-margin: 20px;
	--st-gutter: 32px;
	--st-offset: 64px;
}
@media (min-width: 768px) {
	:root { --st-margin: 80px; }
}

/* ---- Grundgerüst ---- */
.st-body, .st-body * { box-sizing: border-box; }
.st-body {
	margin: 0;
	background: var(--st-surface);
	color: var(--st-on-surface);
	font: 400 16px/24px var(--st-sans);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}
.st-body ::selection { background: var(--st-secondary-fixed); color: var(--st-on-secondary-fixed); }
.st-body a { color: inherit; text-decoration: none; }
.st-body img { display: block; max-width: 100%; }
.st-body h1, .st-body h2, .st-body h3, .st-body p, .st-body ul, .st-body figure { margin: 0; }

.st-main {
	max-width: 1440px;
	margin-inline: auto;
	padding: 8.5rem var(--st-margin) 5rem;
}

/* Typo-Bausteine */
.st-display {
	font-family: var(--st-serif);
	font-size: 40px; line-height: 48px; font-weight: 700; letter-spacing: -0.01em;
}
@media (min-width: 768px) {
	.st-display { font-size: 64px; line-height: 72px; letter-spacing: -0.02em; }
}
.st-headline { font-family: var(--st-serif); font-size: 32px; line-height: 40px; font-weight: 600; }
.st-body-lg { font-size: 18px; line-height: 28px; letter-spacing: -0.01em; }
.st-label {
	font-family: var(--st-sans);
	font-size: 12px; line-height: 16px; font-weight: 500;
	letter-spacing: 0.08em; text-transform: uppercase;
}

/* ---- Rausch-Hintergrund (WebGL, dezent) ---- */
.st-shader {
	position: fixed; inset: 0; z-index: -1;
	opacity: 0.25; pointer-events: none; mix-blend-mode: multiply;
}
.st-shader canvas { display: block; width: 100%; height: 100%; }

/* ---- Glas-Header: schwebt über dem Seitenanfang, scrollt aber MIT
   (bewusst nicht fixed/sticky – Wunsch: nichts bleibt kleben) ---- */
.st-header {
	position: absolute; top: 1rem; left: 50%; transform: translateX(-50%);
	width: min(90%, 64rem); z-index: 90;
	border-radius: 9999px;
	background: rgba(232, 239, 243, 0.6);
	backdrop-filter: blur(20px) saturate(1.4);
	-webkit-backdrop-filter: blur(20px) saturate(1.4);
	border: 0.5px solid rgba(117, 119, 122, 0.25);
	box-shadow: 0 1px 6px rgba(22, 29, 32, 0.06);
	view-transition-name: st-header;
}
.st-header-inner {
	display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
	padding: 0.85rem 2rem;
}
.st-brand { font-family: var(--st-serif); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.02em; white-space: nowrap; }
/* img-Selektor nötig (Spezifität): muss „.st-body img { max-width:100% }“
   überstimmen, sonst kollabiert das Logo im Flex-Header auf 0 Breite */
img.st-brand-logo { height: 46px; width: auto; max-width: none; display: block; }
.st-nav { display: none; align-items: center; gap: 2rem; }
@media (min-width: 768px) { .st-nav { display: flex; } }
.st-nav a {
	position: relative; padding-bottom: 2px;
	color: rgba(68, 71, 74, 0.75);
	transition: color 0.3s var(--st-ease);
}
.st-nav a:hover, .st-nav a[aria-current='page'] { color: var(--st-primary); }
.st-nav a[aria-current='page'] { font-weight: 700; }
/* Unterstreichung wächst aus der Mitte (DESIGN.md „Navigation“) */
.st-nav a::after {
	content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
	background: currentColor; transform: scaleX(0);
	transition: transform 0.3s var(--st-ease);
}
.st-nav a:hover::after, .st-nav a[aria-current='page']::after { transform: scaleX(1); }
.st-header-back { color: var(--st-outline); font-size: 13px; white-space: nowrap; }
.st-header-back:hover { color: var(--st-primary); }

/* ---- Buttons & Chips ---- */
/* a.st-btn nötig: muss die Grundregel „.st-body a { color: inherit }“ überstimmen */
.st-btn, a.st-btn {
	display: inline-flex; align-items: center; gap: 0.5rem;
	background: var(--st-primary); color: var(--st-on-primary);
	border: none; border-radius: 9999px; cursor: pointer;
	font: 500 15px/1 var(--st-sans);
	padding: 1rem 2rem;
	transition: background 0.3s var(--st-ease);
}
.st-btn:hover { background: #3a3f42; }
.st-btn .st-arrow { transition: transform 0.3s var(--st-ease); }
.st-btn:hover .st-arrow { transform: translateY(3px); }
.st-btn-ghost, a.st-btn-ghost {
	background: transparent; color: var(--st-on-surface);
	border: 1px solid var(--st-outline-variant);
}
.st-btn-ghost:hover { background: rgba(255, 255, 255, 0.55); }
.st-chip {
	display: inline-block; border-radius: 9999px;
	background: rgba(211, 232, 213, 0.55);
	padding: 0.25rem 0.6rem;
	font-size: 12px; letter-spacing: 0.05em;
}


/* ---- Startseite: Bausteine der Beitragsseite wiederverwendet ---- */
.st-home-hero { display: block; cursor: pointer; }
/* p-Selektor nötig: muss die spätere .st-detail-hero-bar .st-loc-Regel überstimmen */
.st-detail-hero-bar p.st-home-hero-title {
	font-family: var(--st-serif);
	font-size: clamp(1.5rem, 3.5vw, 2.5rem);
	line-height: 1.15; max-width: 56rem;
}
.st-home-hero .st-exif { margin-left: auto; } /* bleibt auch umgebrochen rechtsbündig */
.st-home-intro { max-width: 1440px; margin-inline: auto; padding: 5rem var(--st-margin) 1rem; }
.st-home-intro .st-article-head { margin-bottom: 2rem; }

/* „Neueste Einträge“: Kacheln mit Archiv-Hover (Glas-Overlay) */
.st-tile {
	position: relative; display: block; overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: 0.75rem;
	border: 1px solid rgba(197, 198, 202, 0.4);
	background: var(--st-container-lowest);
}
.st-tile img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 0.7s var(--st-ease);
}
.st-tile:hover img, .st-tile:focus-visible img { transform: scale(1.03); }
/* großer Archiv-Button unter den Kacheln */
.st-related-cta { margin-top: 3.5rem; }
.st-btn-big { padding: 1.3rem 2.8rem; font-size: 17px; }
.st-btn-big:hover .st-arrow { transform: translateX(4px); }

.st-cta { margin-top: var(--st-offset); display: flex; justify-content: center; }

/* ---- Archiv: klebrige Glas-Filterleiste ---- */
.st-intro { margin-bottom: var(--st-offset); }
.st-intro h1 { margin-bottom: 1.5rem; }
.st-intro p { max-width: 42rem; color: var(--st-on-variant); }
/* scrollt bewusst mit (kein sticky – nichts bleibt kleben) */
.st-filter {
	display: flex; gap: 0.75rem; overflow-x: auto;
	margin-bottom: var(--st-gutter);
	padding: 1rem 1.5rem;
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 0.5px solid rgba(117, 119, 122, 0.2);
	border-radius: 9999px;
	scrollbar-width: none;
}
.st-filter::-webkit-scrollbar { display: none; }
.st-filter button {
	flex: none; cursor: pointer; white-space: nowrap;
	border: 1px solid var(--st-outline-variant); border-radius: 9999px;
	background: transparent; color: var(--st-on-surface);
	font: 500 12px/16px var(--st-sans); letter-spacing: 0.05em;
	padding: 0.5rem 1rem;
	transition: background 0.3s var(--st-ease), color 0.3s var(--st-ease);
}
.st-filter button:hover { background: var(--st-container-high); }
.st-filter button.active { background: var(--st-primary); color: var(--st-on-primary); border-color: var(--st-primary); }

/* ---- Archiv: Masonry mit Glas-Metadaten beim Hover ---- */
/* Archiv bewusst zweispaltig (große Kacheln) */
.masonry-grid { column-count: 1; column-gap: 2rem; }
@media (min-width: 768px) { .masonry-grid { column-count: 2; } }
.masonry-item {
	break-inside: avoid; margin-bottom: 2rem;
	position: relative; overflow: hidden;
	border-radius: 0.75rem;
	border: 1px solid rgba(197, 198, 202, 0.4);
	background: var(--st-container-lowest);
	display: block;
}
.masonry-item.st-hidden { display: none; }
.masonry-item .st-media { position: relative; overflow: hidden; }
.masonry-item img { width: 100%; height: auto; transition: transform 0.7s var(--st-ease); }
.masonry-item:hover img { transform: scale(1.03); }
.masonry-item .metadata, .st-tile .metadata {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; justify-content: flex-end;
	padding: 1.5rem;
	background: rgba(232, 239, 243, 0.55);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	opacity: 0; transform: translateY(10px);
	transition: opacity 0.3s var(--st-ease), transform 0.3s var(--st-ease);
}
.masonry-item:hover .metadata, .st-tile:hover .metadata,
.masonry-item:focus-visible .metadata, .st-tile:focus-visible .metadata { opacity: 1; transform: none; }
/* Titel dauerhaft sichtbar (dezent); weicht dem Hover-Overlay */
.st-tile-title {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
	padding: 2rem 0.9rem 0.75rem;
	background: linear-gradient(to top, rgba(13, 16, 18, 0.62), transparent);
	color: #fff;
	font: 500 13.5px/1.35 var(--st-sans);
	letter-spacing: 0.01em;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
	pointer-events: none;
	transition: opacity 0.3s var(--st-ease);
}
.masonry-item:hover .st-tile-title,
.st-tile:hover .st-tile-title { opacity: 0; }

.metadata-panel {
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 0.5px solid rgba(117, 119, 122, 0.2);
	border-radius: 0.5rem; padding: 1rem;
}
.metadata-panel h3 { font-family: var(--st-serif); font-size: 1.4rem; font-weight: 600; margin-bottom: 0.35rem; }
.metadata-panel .st-place { color: var(--st-on-variant); margin-bottom: 0.75rem; }
.metadata-panel .st-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.st-loadmore { margin-top: var(--st-offset); display: flex; justify-content: center; }

/* ---- Detailseite ---- */
.st-detail-hero {
	position: relative; width: 100%;
	height: 70vh; min-height: 500px;
	overflow: hidden;
}
@media (min-width: 768px) { .st-detail-hero { height: 85vh; } }
/* Hero bewusst OHNE Zoom beim Überfahren (Wunsch: nur kleine Kacheln zoomen) */
.st-detail-hero img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.st-detail-hero-bar {
	position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem;
	padding: var(--st-gutter) var(--st-margin);
	background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
	color: #fff;
}
.st-detail-hero-bar .st-label { color: rgba(255, 255, 255, 0.8); }
.st-detail-hero-bar .st-loc { font-family: var(--st-serif); font-size: 1.15rem; margin-top: 0.4rem; }
.st-exif {
	display: flex; gap: 1.5rem;
	background: rgba(0, 0, 0, 0.25);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-radius: 0.25rem; padding: 0.5rem 1rem;
	font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
}
.st-exif span { display: block; color: rgba(255, 255, 255, 0.5); margin-bottom: 0.25rem; }

.st-article { max-width: 1440px; margin-inline: auto; padding: 4rem var(--st-margin) 6rem; }
.st-article-head { max-width: 48rem; margin: 0 auto 3rem; text-align: center; }
@media (min-width: 768px) { .st-article-head { margin-bottom: 3.5rem; } }
.st-article-head .st-meta {
	display: flex; align-items: center; justify-content: center; gap: 1rem;
	margin-bottom: 2rem; color: var(--st-on-variant);
}
.st-article-head .st-meta i {
	width: 4px; height: 4px; border-radius: 50%;
	background: var(--st-outline-variant);
}
.st-article-head h1 { margin-bottom: 2rem; }
.st-article-head .st-sub {
	font-family: var(--st-serif); font-size: 1.35rem; line-height: 1.5;
	color: var(--st-on-variant); font-weight: 400;
}
.st-prose { max-width: 680px; margin-inline: auto; display: grid; gap: 3rem; }
.st-prose p { color: var(--st-on-variant); }
.st-prose a {
	color: var(--st-secondary);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba(80, 99, 84, 0.4);
	transition: color 0.3s var(--st-ease), text-decoration-color 0.3s var(--st-ease);
	overflow-wrap: anywhere; /* lange URLs umbrechen */
}
.st-prose a:hover { color: var(--st-primary); text-decoration-color: currentColor; }
/* Überschriften und Listen im Fließtext (kommen aus dem Quill-Admin) */
.st-prose-h2 {
	font-family: var(--st-serif); font-size: 1.6rem; font-weight: 600;
	color: var(--st-primary); margin-top: 1rem;
}
.st-prose-list { color: var(--st-on-variant); padding-left: 1.4rem; }
.st-prose-list li { margin-bottom: 0.5rem; }
.st-prose-list li::marker { color: var(--st-secondary); }
/* Initial in Playfair (Dropcap) */
.st-dropcap::first-letter {
	float: left;
	font-family: var(--st-serif);
	font-size: 4.5rem; line-height: 0.8;
	padding: 0.25rem 0.75rem 0 0;
	color: var(--st-primary);
}
.st-quote {
	margin: 2rem 0; padding: 2rem 0; text-align: center;
	border-top: 1px solid rgba(197, 198, 202, 0.5);
	border-bottom: 1px solid rgba(197, 198, 202, 0.5);
}
.st-quote p {
	font-family: var(--st-serif); font-style: italic;
	font-size: 1.6rem; line-height: 1.5; color: var(--st-primary);
}

/* ---- Galerie (Beitragsseite): Auftakt-Panorama + Masonry, klickbar ---- */
.st-gallery { margin-top: 6rem; }
.st-gallery-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 4rem; }
.st-gallery-head h3 { color: var(--st-secondary); white-space: nowrap; }
.st-gallery-head i { display: block; height: 1px; width: 100%; background: rgba(197, 198, 202, 0.5); }
.st-pgal-item {
	display: block; width: 100%; padding: 0; margin: 0;
	position: relative; overflow: hidden; cursor: zoom-in;
	border: 0.5px solid rgba(117, 119, 122, 0.18);
	border-radius: 0.25rem;
	background: var(--st-container-low);
}
.st-pgal-item img {
	display: block; width: 100%; height: auto;
	transition: transform 0.6s var(--st-ease);
}
.st-pgal-item:hover img, .st-pgal-item:focus-visible img { transform: scale(1.04); }
/* Lupe + sanfte Abdunklung beim Überfahren */
.st-pgal-zoom {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	color: #fff; opacity: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.05));
	transition: opacity 0.3s var(--st-ease);
}
.st-pgal-item:hover .st-pgal-zoom, .st-pgal-item:focus-visible .st-pgal-zoom { opacity: 1; }
.st-pgal-zoom svg { width: 30px; height: 30px; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5)); }
/* Unterschrift der ganzen Galerie (blocks-gallery-caption) */
.st-pgal-galcap {
	margin: -2rem 0 2.5rem;
	font-style: italic; font-size: 17px; line-height: 1.6;
	color: var(--st-on-variant);
	max-width: 44rem;
}

/* Bildbereich der Kachel (die Unterschrift darunter bleibt vom
   Hover-Overlay unberührt) */
.st-pgal-media { position: relative; display: block; overflow: hidden; }
.st-pgal-cap {
	display: block; text-align: left;
	padding: 0.55rem 0.8rem 0.7rem;
	font-family: var(--st-sans); font-size: 12.5px; line-height: 1.4;
	color: var(--st-on-variant);
}
.st-pgal-lead { margin-bottom: 1rem; aspect-ratio: 21 / 9; }
.st-pgal-lead img { height: 100%; object-fit: cover; }
@media (min-width: 768px) { .st-pgal-lead { aspect-ratio: 2.35 / 1; } }
.st-pgal-grid { column-count: 2; column-gap: 1rem; }
@media (min-width: 1024px) { .st-pgal-grid { column-count: 3; } }
.st-pgal-grid .st-pgal-item { break-inside: avoid; margin-bottom: 1rem; }

/* ---- Lightbox (Overlay; kann selbst ins Vollbild) ---- */
html.st-noscroll { overflow: hidden; }
.st-lightbox {
	display: none;
	position: fixed; inset: 0; z-index: 500;
	align-items: center; justify-content: center;
	overflow: hidden; /* gezoomtes Bild ragt über den Rand hinaus */
	background: rgba(13, 16, 18, 0.92);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.st-lightbox.st-open { display: flex; }
.st-lightbox figure {
	margin: 0; display: flex; flex-direction: column;
	align-items: center; gap: 0.9rem;
}
.st-lightbox figure img {
	max-width: min(92vw, 1536px); max-height: 82vh;
	border-radius: 0.25rem;
	border: 0.5px solid rgba(255, 255, 255, 0.15);
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.25s var(--st-ease), transform 0.3s var(--st-ease);
	user-select: none;
	cursor: zoom-in;
}
/* Zoom-Zustände: gezoomt = greifen/ziehen, Maximum = rauszoomen */
.st-lightbox figure img.st-lb-pan { cursor: grab; }
.st-lightbox figure img.st-lb-max { cursor: zoom-out; }
.st-lightbox figure img.st-lb-dragging {
	cursor: grabbing;
	transition: opacity 0.25s var(--st-ease); /* beim Ziehen ohne Transform-Verzögerung */
}
.st-lightbox figcaption {
	display: grid; gap: 0.4rem; justify-items: center;
	text-align: center; color: rgba(255, 255, 255, 0.65);
}
.st-lb-caption { font-size: 15px; line-height: 1.45; max-width: 80vw; color: rgba(255, 255, 255, 0.95); }
.st-lightbox.st-open figure { animation: st-lb-in 0.3s var(--st-ease); }
@keyframes st-lb-in { from { opacity: 0; transform: scale(0.96) translateY(8px); } }
.st-lb-btn {
	position: fixed; z-index: 2;
	display: flex; align-items: center; justify-content: center;
	width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
	border: 0.5px solid rgba(255, 255, 255, 0.25);
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: #fff;
	transition: background 0.3s var(--st-ease);
}
.st-lb-btn:hover { background: rgba(255, 255, 255, 0.2); }
.st-lb-btn svg { width: 24px; height: 24px; }
.st-lb-prev { left: 1.2rem; top: 50%; margin-top: -26px; }
.st-lb-next { right: 1.2rem; top: 50%; margin-top: -26px; }
.st-lb-close { top: 1.2rem; right: 1.2rem; }
.st-lb-full { top: 1.2rem; right: 5.5rem; }
/* Vollbild: passendes Symbol zeigen, Bild darf mehr Fläche nutzen */
.st-lb-full .st-ico-exit { display: none; }
.st-lightbox.st-lb-isfull .st-lb-full .st-ico-enter { display: none; }
.st-lightbox.st-lb-isfull .st-lb-full .st-ico-exit { display: block; }
.st-lightbox.st-lb-isfull figure img { max-width: 100vw; max-height: 92vh; border-radius: 0; }
@media (max-width: 640px) {
	.st-lb-btn { width: 44px; height: 44px; }
	.st-lb-prev { left: 0.6rem; }
	.st-lb-next { right: 0.6rem; }
	.st-lb-full { right: 4.4rem; }
}

/* Kommentare (Beitragsseite) */
.st-comments { max-width: 680px; margin: 6rem auto 0; }
.st-comment {
	margin-bottom: 2rem; padding-left: 1.5rem;
	border-left: 1px solid rgba(197, 198, 202, 0.5);
}
.st-comment-reply { margin-left: 2.5rem; }
.st-comment > .st-label { display: block; color: var(--st-outline); margin-bottom: 0.5rem; }
.st-comment-text p { color: var(--st-on-variant); margin-bottom: 0.5rem; }
.st-comment-text a { color: var(--st-secondary); text-decoration: underline; text-underline-offset: 3px; }

/* Textkarte im Archiv (Beiträge ohne Bild) */
.st-text-card { padding: 2rem 1.5rem; }
.st-text-card h3 { font-family: var(--st-serif); font-size: 1.4rem; font-weight: 600; margin-bottom: 0.75rem; }
.st-text-card p { color: var(--st-on-variant); margin-bottom: 1rem; }

/* Statische Seiten (Impressum, Datenschutz, 404): kein Hero davor –
   Abstand nach oben, damit der schwebende Header nichts überlappt */
.st-article.st-page { padding-top: 8.5rem; }
.st-page .st-prose { display: block; }
.st-page .st-prose p { margin-bottom: 1rem; }
.st-page .st-prose h2, .st-page .st-prose h3 {
	font-family: var(--st-serif); font-weight: 600; margin: 2rem 0 1rem;
}

/* Ähnliche Orte */
.st-related { background: var(--st-container-low); border-top: 1px solid rgba(197, 198, 202, 0.35); padding: 5rem 0; }
.st-related-inner { max-width: 1440px; margin-inline: auto; padding-inline: var(--st-margin); }
.st-related-head {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
	gap: 1.5rem; margin-bottom: 3rem;
}
.st-related-head .st-label { color: var(--st-secondary); display: block; margin-bottom: 0.5rem; }
.st-related-head a { color: var(--st-on-variant); display: inline-flex; align-items: center; gap: 0.5rem; }
.st-related-head a:hover { color: var(--st-primary); }
.st-related-head a .st-arrow { transition: transform 0.3s var(--st-ease); }
.st-related-head a:hover .st-arrow { transform: translateX(4px); }
.st-related-grid { display: grid; gap: 2rem; }
@media (min-width: 768px) {
	.st-related-grid { grid-template-columns: repeat(3, 1fr); }
	/* zweispaltige Variante (Startseite „Neueste Friedhöfe“, große Kacheln) */
	.st-related-grid.st-grid-2 { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Admin (Design-Test, abgeklemmte Demo) ---- */
.st-adm-banner {
	margin-bottom: 2.5rem; padding: 0.8rem 1.2rem;
	border: 0.5px solid rgba(80, 99, 84, 0.35);
	border-radius: 0.5rem;
	background: rgba(211, 232, 213, 0.35);
	color: var(--st-on-secondary-fixed);
}
.st-adm-login { display: flex; justify-content: center; padding: 3rem 0 5rem; }
.st-adm-card {
	width: 100%; max-width: 26rem; padding: 2.5rem;
	background: rgba(255, 255, 255, 0.65);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 0.5px solid rgba(117, 119, 122, 0.25);
	border-radius: 0.75rem;
	box-shadow: 0 12px 40px rgba(22, 29, 32, 0.08);
}
.st-adm-card form { display: grid; gap: 1.4rem; margin-top: 1.8rem; }
.st-adm-hint { color: var(--st-on-variant); font-size: 13px; margin-top: 0.4rem; }
.st-adm-head {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
	gap: 1.5rem; margin-bottom: 3rem;
}
/* Eingabefelder: nur Unterkante, Fokus in Salbei (DESIGN.md) */
.st-adm-field label, .st-adm-field > span { display: block; margin-bottom: 0.45rem; color: var(--st-on-variant); }
.st-adm-field input, .st-adm-field select {
	width: 100%; background: transparent;
	border: none; border-bottom: 1px solid var(--st-outline-variant);
	padding: 0.5rem 0; font: 400 16px/1.4 var(--st-sans); color: var(--st-on-surface);
	transition: border-color 0.3s var(--st-ease);
	border-radius: 0;
}
.st-adm-field input:focus, .st-adm-field select:focus {
	outline: none; border-bottom-color: var(--st-secondary);
}
.st-adm-grid { display: grid; gap: 1.5rem 2rem; margin-bottom: 2rem; }
@media (min-width: 768px) { .st-adm-grid { grid-template-columns: 2fr 1fr 1fr; } .st-adm-grid .st-adm-wide { grid-column: 1 / -1; } }
/* Beitragsliste */
.st-adm-list { list-style: none; padding: 0; margin: 0; }
.st-adm-list li {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem;
	padding: 1.2rem 0; border-bottom: 1px solid rgba(197, 198, 202, 0.4);
}
.st-adm-list h3 { font-family: var(--st-serif); font-size: 1.3rem; font-weight: 600; margin-bottom: 0.3rem; }
.st-adm-list .st-label { color: var(--st-on-variant); }
.st-adm-list li > span { display: flex; align-items: center; gap: 1rem; }
.st-adm-view { color: var(--st-on-variant); font-size: 14px; }
.st-adm-view:hover { color: var(--st-secondary); }
.st-adm-list .st-btn-ghost { padding: 0.55rem 1.2rem; font-size: 13px; }
/* Quill im Seiten-Look */
.st-adm .ql-toolbar.ql-snow {
	border: 0.5px solid rgba(117, 119, 122, 0.3);
	border-radius: 0.5rem 0.5rem 0 0;
	background: rgba(255, 255, 255, 0.65);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	font-family: var(--st-sans);
}
.st-adm .ql-container.ql-snow {
	border: 0.5px solid rgba(117, 119, 122, 0.3);
	border-top: none;
	border-radius: 0 0 0.5rem 0.5rem;
	background: var(--st-container-lowest);
	font: 400 17px/1.7 var(--st-sans);
	color: var(--st-on-surface);
	/* Start: knapp unter Fensterhöhe; per Anfasser unten rechts in der
	   Höhe ziehbar (resize braucht overflow ≠ visible; der Text scrollt
	   im inneren .ql-editor) */
	height: calc(100vh - 240px);
	min-height: 260px;
	resize: vertical;
	overflow: hidden;
}
.st-adm .ql-editor { padding: 1.5rem; }
/* Absätze deutlich voneinander absetzen (mehr als ein Zeilenumbruch) */
.st-adm .ql-editor p { margin: 0 0 0.9em; }
.st-adm .ql-editor p:last-child { margin-bottom: 0; }
.st-adm .ql-editor h2 { font-family: var(--st-serif); font-size: 1.6rem; font-weight: 600; margin: 1.2rem 0 0.6rem; }
.st-adm .ql-editor a { color: var(--st-secondary); text-decoration: underline; text-underline-offset: 3px; }
.st-adm .ql-editor blockquote { border-left: 2px solid var(--st-secondary); padding-left: 1rem; color: var(--st-on-variant); font-style: italic; }
.st-adm .ql-snow .ql-tooltip { z-index: 20; }
/* Format-Dropdown: deutsche Beschriftung; zeigt automatisch das Format
   an der Cursor-Position (Quill setzt data-value am Label) */
.st-adm .ql-snow .ql-picker.ql-header { width: 116px; }
.st-adm .ql-snow .ql-picker.ql-header .ql-picker-label::before,
.st-adm .ql-snow .ql-picker.ql-header .ql-picker-item::before { content: 'Fließtext'; }
.st-adm .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before,
.st-adm .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before { content: 'Überschrift'; }
/* Galerie-Manager */
.st-adm-gallery { margin-top: 3.5rem; }
.st-adm-drop {
	margin: 1.5rem 0; padding: 2.2rem 1.5rem; text-align: center; cursor: pointer;
	border: 1.5px dashed var(--st-outline-variant); border-radius: 0.75rem;
	background: rgba(238, 245, 249, 0.5);
	transition: border-color 0.3s var(--st-ease), background 0.3s var(--st-ease);
}
.st-adm-drop:hover, .st-adm-drop.drag { border-color: var(--st-secondary); background: rgba(211, 232, 213, 0.35); }
.st-adm-tiles {
	list-style: none; padding: 0; margin: 0;
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem;
}
@media (min-width: 768px) { .st-adm-tiles { grid-template-columns: repeat(4, 1fr); } }
.st-adm-tiles li {
	border: 1px solid rgba(197, 198, 202, 0.4); border-radius: 0.5rem;
	background: var(--st-container-lowest); overflow: hidden;
}
.st-adm-tiles li.featured { border-color: var(--st-secondary); box-shadow: 0 0 0 1px var(--st-secondary); }
.st-adm-tile-media { position: relative; aspect-ratio: 4 / 3; }
.st-adm-tile-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-adm-newchip { position: absolute; top: 0.5rem; left: 0.5rem; background: rgba(211, 232, 213, 0.9); }
.st-adm-cap {
	width: 100%; border: none; border-top: 1px solid rgba(197, 198, 202, 0.35);
	padding: 0.5rem 0.7rem; font: 400 13px/1.4 var(--st-sans); color: var(--st-on-surface);
	background: transparent;
}
.st-adm-cap:focus { outline: none; background: rgba(211, 232, 213, 0.25); }
.st-adm-tools {
	display: flex; justify-content: space-between; align-items: center;
	padding: 0.35rem 0.5rem; border-top: 1px solid rgba(197, 198, 202, 0.35);
}
.st-adm-tools button {
	border: none; background: none; cursor: pointer; font-size: 15px;
	color: var(--st-outline); padding: 0.15rem 0.4rem; border-radius: 0.25rem;
}
.st-adm-tools button:hover { color: var(--st-primary); background: var(--st-container-high); }
/* Titelbild-Stern: nicht nur eingefärbt (Salbei #506354 und Grau #75777a
   unterscheiden sich kaum), sondern als gefüllter Chip – passend zum
   salbeigrünen Rahmen, den die Titelbild-Kachel ohnehin trägt. */
.st-adm-tiles li.featured .star {
	color: var(--st-on-secondary-fixed);
	background: var(--st-secondary-fixed);
	font-size: 16px;
	box-shadow: 0 0 0 1px var(--st-secondary);
}
.st-adm-tiles li.featured .star:hover {
	color: var(--st-on-secondary-fixed);
	background: var(--st-secondary-fixed);
	filter: brightness(0.95);
}
/* Bei den übrigen Kacheln bleibt der Stern blass – er lädt zum Klicken ein */
.st-adm-tiles li:not(.featured) .star { opacity: .55; }
.st-adm-tiles li:not(.featured) .star:hover { opacity: 1; }
.st-adm-actions { display: flex; gap: 1rem; margin-top: 3rem; }
/* Entwurfs-Schalter, Entwurfs-Kennzeichen, Ladehinweis */
.st-adm-schalter {
	display: flex; align-items: flex-start; gap: 0.7rem;
	margin: 0 0 2rem; padding: 1rem 1.2rem;
	border: 0.5px solid rgba(117, 119, 122, 0.25);
	border-radius: 0.5rem;
	background: rgba(255, 255, 255, 0.55);
	font-size: 14px; line-height: 1.5; color: var(--st-on-variant);
}
.st-adm-schalter input { margin-top: 0.2rem; width: 18px; height: 18px; accent-color: var(--st-secondary); }
.st-adm-schalter strong { color: var(--st-on-surface); }
.st-adm-entwurf {
	background: rgba(197, 198, 202, 0.5); color: var(--st-on-variant);
	font-size: 11px; letter-spacing: 0.05em; vertical-align: 2px;
}
.st-adm-laedt { padding: 1.5rem 0; color: var(--st-on-variant); list-style: none; }

/* Gefahr-Knopf (Löschen) + Fehler-Toast */
.st-adm-danger { color: #8a2f2f; border-color: rgba(138, 47, 47, 0.4); }
.st-adm-danger:hover { background: rgba(138, 47, 47, 0.08); }
.st-adm-toast.fehler { background: #7a2626; }

/* Toast */
.st-adm-toast {
	position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 20px);
	z-index: 999; max-width: min(92vw, 34rem);
	padding: 0.9rem 1.4rem; border-radius: 9999px;
	background: var(--st-primary); color: var(--st-on-primary);
	font: 500 14px/1.4 var(--st-sans); text-align: center;
	opacity: 0; pointer-events: none;
	transition: opacity 0.3s var(--st-ease), transform 0.3s var(--st-ease);
}
.st-adm-toast.st-open { opacity: 1; transform: translate(-50%, 0); }

/* ---- Fußbereich ---- */
.st-footer {
	border-top: 1px solid rgba(197, 198, 202, 0.35);
	background: var(--st-container-lowest);
	margin-top: var(--st-offset);
}
.st-footer-inner {
	max-width: 1440px; margin-inline: auto;
	display: grid; gap: 2rem;
	padding: var(--st-offset) var(--st-margin);
}
@media (min-width: 768px) { .st-footer-inner { grid-template-columns: 1fr auto; align-items: end; } }
.st-footer .st-brand { font-size: 2.2rem; }
.st-footer .st-copy { margin-top: 1.5rem; color: var(--st-on-variant); }
.st-footer nav { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 768px) { .st-footer nav { align-items: flex-end; } }
.st-footer nav a { color: var(--st-on-variant); opacity: 0.85; transition: color 0.3s var(--st-ease), opacity 0.3s var(--st-ease); }
.st-footer nav a:hover { color: var(--st-secondary); opacity: 1; }

/* ---- Seitenübergänge (View Transitions, Chrome/Edge/Safari) ---- */
.st-header { view-transition-name: st-header; } /* Header bleibt beim Wechsel stehen */
::view-transition-old(root) { animation: st-vt-out 0.25s var(--st-ease) both; }
::view-transition-new(root) { animation: st-vt-in 0.45s var(--st-ease) both; }
@keyframes st-vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes st-vt-in { from { opacity: 0; transform: translateY(14px); } }

/* ---- Reduzierte Bewegung: alles ruhigstellen ---- */
@media (prefers-reduced-motion: reduce) {
	.masonry-item img, .st-tile img,
	.st-pgal-item img { transition: none !important; transform: none !important; }
	.st-lightbox.st-open figure { animation: none; }
	.st-lightbox figure img { transition: opacity 0.25s var(--st-ease); } /* Zoom ohne Animation */
	::view-transition-old(root), ::view-transition-new(root) { animation: none; }
	.st-shader { display: none; }
}

/* Kartenlink in der Hero-Datenleiste (Beiträge mit Koordinaten) */
.st-geo-link { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.st-geo-link:hover { color: var(--st-secondary-fixed); }

/* Ersatz für style="…"-Attribute: Die Content-Security-Policy erlaubt keine
   Stile direkt im HTML mehr (per JavaScript gesetzte Stile bleiben erlaubt). */
.st-verborgen { display: none; }
.st-ohne-abstand-oben { margin-top: 0; }
.st-abstand-oben { margin-top: 1.5rem; }

/* ---------------------------------------------------------------- Karte */
.st-karte-kopf { margin-bottom: 2.5rem; }
.st-karte {
	margin: 0 0 3rem; padding: 1.5rem;
	background: rgba(255, 255, 255, 0.5);
	border: 1px solid var(--st-line); border-radius: 1rem;
}
.st-karte svg {
	display: block; margin: 0 auto;
	width: auto; max-width: 100%;
	/* Höhe begrenzen: Auf breiten Fenstern würde die Karte sonst über eine
	   ganze Bildschirmhöhe hinauswachsen */
	max-height: 68vh;
}
.st-karte-umriss {
	fill: rgba(122, 139, 122, 0.10);
	stroke: var(--st-sage, #7a8b7a); stroke-width: 2; stroke-linejoin: round;
}
.st-karte-punkt circle { fill: var(--st-ink, #1c1c1e); transition: fill .2s ease, r .2s ease; }
.st-karte-punkt .st-karte-halo { fill: var(--st-ink, #1c1c1e); opacity: .13; }
.st-karte-punkt:hover circle { fill: var(--st-sage, #7a8b7a); }
.st-karte-punkt:hover .st-karte-halo { opacity: .3; r: 16; }
.st-karte-punkt:focus-visible circle { fill: var(--st-sage, #7a8b7a); outline: none; }
.st-karte-quelle { margin-top: 1rem; font-size: .8rem; opacity: .7; line-height: 1.5; }
.st-karte-liste { list-style: none; padding: 0; margin: 1rem 0 2.5rem; display: grid; gap: .5rem; }
@media (min-width: 700px) { .st-karte-liste { grid-template-columns: 1fr 1fr; } }
.st-karte-liste a {
	display: flex; align-items: center; gap: 1rem; padding: .5rem;
	border: 1px solid transparent; border-radius: .75rem; text-decoration: none;
	transition: border-color .2s ease, background .2s ease;
}
.st-karte-liste a:hover { border-color: var(--st-line); background: rgba(255, 255, 255, 0.6); }
.st-karte-liste img { width: 96px; height: 72px; object-fit: cover; border-radius: .5rem; flex: none; }
.st-karte-liste span { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.st-karte-liste strong { font-family: var(--st-serif); font-size: 1.05rem; font-weight: 600; }
.st-karte-liste em { font-style: normal; font-size: .8rem; opacity: .65; letter-spacing: .02em; }
.st-karte-hinweis { font-size: .9rem; opacity: .7; font-style: italic; }

/* Bildbeschreibung im Galerie-Manager (zweites Feld unter der Unterschrift) */
.st-adm-alt {
	width: 100%; margin-top: .35rem; padding: .4rem .6rem;
	font-size: .82rem; font-family: var(--st-sans);
	border: 1px dashed var(--st-line); border-radius: .4rem;
	background: transparent; color: inherit;
}
.st-adm-alt:focus { outline: none; border-style: solid; border-color: var(--st-sage, #7a8b7a); }
.st-adm-alt::placeholder { opacity: .55; }
#alt-stand { margin-left: auto; padding-right: .75rem; white-space: nowrap; }
#alt-stand.st-adm-vollstaendig { color: var(--st-sage, #7a8b7a); font-weight: 500; }

/* ------------------------------------------------- Projektübersicht (Admin) */
.st-projekt-lead { max-width: 46rem; margin-bottom: 2.5rem; }
.st-projekt-einleitung { max-width: 46rem; margin: -0.5rem 0 1rem; }
.st-projekt-fuss { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--st-outline-variant); }

.st-projekt-zahlen {
	list-style: none; padding: 0; margin: 1rem 0 1rem;
	display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) { .st-projekt-zahlen { grid-template-columns: repeat(4, 1fr); } }
.st-projekt-zahlen li {
	padding: 1.1rem 1.2rem; border-radius: 0.75rem;
	background: var(--st-container-lowest); border: 1px solid var(--st-outline-variant);
	display: flex; flex-direction: column; gap: 0.3rem;
}
.st-projekt-zahlen strong {
	font-family: var(--st-serif); font-size: 1.8rem; line-height: 1.05; font-weight: 600;
}
/* Rubriken-Kachel enthält Text statt einer Zahl – dort kleiner setzen */
.st-projekt-zahlen li:last-child strong { font-size: 1.05rem; line-height: 1.35; }
.st-projekt-zahlen span { font-size: 0.82rem; color: var(--st-on-variant); }

.st-projekt-offen, .st-projekt-links { list-style: none; padding: 0; margin: 1rem 0 2rem; display: grid; gap: 0.6rem; }
@media (min-width: 900px) { .st-projekt-links { grid-template-columns: 1fr 1fr; } }

.st-projekt-offen li {
	padding: 0.9rem 1.1rem; border-radius: 0.6rem;
	background: var(--st-secondary-fixed); color: var(--st-on-secondary-fixed);
	display: flex; flex-direction: column; gap: 0.25rem;
}
.st-projekt-offen strong { font-size: 0.95rem; }
.st-projekt-offen span { font-size: 0.82rem; opacity: 0.85; }

.st-projekt-links a {
	display: flex; flex-direction: column; gap: 0.3rem;
	padding: 0.9rem 1.1rem; border-radius: 0.6rem;
	border: 1px solid var(--st-outline-variant); background: var(--st-container-lowest);
	text-decoration: none; color: inherit; height: 100%;
	transition: border-color 0.2s ease, background 0.2s ease;
}
.st-projekt-links a:hover { border-color: var(--st-secondary); background: var(--st-container-low); }
.st-projekt-links strong { font-size: 0.95rem; font-weight: 600; }
.st-projekt-links strong span { opacity: 0.5; font-size: 0.8em; }
.st-projekt-links a > span { font-size: 0.82rem; color: var(--st-on-variant); line-height: 1.45; }

/* Zahlen auf der Projektübersicht */
.st-projekt-besucher {
	margin: 1rem 0 2rem; padding: 1.4rem;
	border: 1px solid var(--st-outline-variant); border-radius: 0.75rem;
	background: var(--st-container-lowest);
}
.st-projekt-besucher-zahlen { display: flex; flex-wrap: wrap; gap: 2.2rem; margin-bottom: 1.2rem; }
.st-projekt-besucher-zahlen p { margin: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.st-projekt-besucher-zahlen strong { font-family: var(--st-serif); font-size: 1.9rem; line-height: 1; font-weight: 600; }
.st-projekt-besucher-zahlen span { font-size: 0.8rem; color: var(--st-on-variant); }
.st-projekt-verlauf { width: 100%; height: 60px; display: block; }
.st-projekt-verlauf rect { fill: var(--st-secondary); opacity: 0.75; }
.st-projekt-verlauf rect:hover { opacity: 1; }

.st-projekt-noten { list-style: none; padding: 0; margin: 1rem 0 1rem; display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .st-projekt-noten { grid-template-columns: repeat(4, 1fr); } }
.st-projekt-noten li {
	padding: 1rem 1.2rem; border-radius: 0.75rem; border: 1px solid var(--st-outline-variant);
	background: var(--st-container-lowest); display: flex; flex-direction: column; gap: 0.2rem;
}
.st-projekt-noten strong { font-family: var(--st-serif); font-size: 2rem; line-height: 1; font-weight: 600; }
.st-projekt-noten span { font-size: 0.8rem; color: var(--st-on-variant); }
.st-projekt-noten li.gut strong { color: var(--st-secondary); }
.st-projekt-noten li.schwach strong { color: #a33; }