/* ============================================================
   Sonore Sacro – Bludit-Theme
   Optik angelehnt an die bisherige WordPress-Seite (Escapade)
   Farben und Schriften hier oben anpassen
   ============================================================ */

/* Schriften liegen lokal im Theme (kein Google-Server, DSGVO-freundlich) */
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/oswald-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/oswald-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Noto Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/noto-serif-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Noto Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/noto-serif-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Noto Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/noto-serif-latin-700-normal.woff2") format("woff2"); }

:root {
	--ss-rot: #ab3232;             /* Überschriften, Menü */
	--ss-rot-dunkel: #8e2828;      /* Menü beim Darüberfahren */
	--ss-akzent: #8a6d3b;          /* Gold: Buttons, Linien */
	--ss-akzent-dunkel: #6f5629;
	--ss-text: #252525;
	--ss-text-leise: #757575;
	--ss-seitenleiste: #f5f5f5;    /* Hintergrund der Seitenleiste */
	--ss-hell: #faf7f1;            /* Creme für jeden zweiten Abschnitt */
	--ss-linie: #e6dfd2;
	--ss-weiss: #ffffff;
	--ss-sidebar-breite: 250px;
	--ss-lesebreite: 46rem;
	--ss-schrift: "Noto Serif", "Droid Serif", Georgia, serif;
	--ss-schrift-titel: "Oswald", "Arial Narrow", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--ss-schrift);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--ss-text);
	background: var(--ss-weiss);
}
img { max-width: 100%; height: auto; }
a { color: var(--ss-akzent-dunkel); }
a:hover { color: var(--ss-akzent); }
h1, h2, h3 {
	font-family: var(--ss-schrift-titel);
	font-weight: 400;
	line-height: 1.2;
	color: var(--ss-rot);
}

/* ---------- Layout: Seitenleiste + Inhalt ---------- */
.ss-layout { display: flex; min-height: 100vh; }

.ss-sidebar {
	position: sticky;
	top: 0;
	align-self: flex-start;
	width: var(--ss-sidebar-breite);
	flex: 0 0 var(--ss-sidebar-breite);
	height: 100vh;
	overflow-y: auto;
	background: var(--ss-seitenleiste);
}
.ss-main { flex: 1 1 auto; min-width: 0; }

.ss-brand { padding: 2.5rem 1.5rem 2rem; text-align: center; }
.ss-logo { display: block; max-width: 140px; margin: 0 auto; }
.ss-site-title {
	display: block;
	font-family: var(--ss-schrift-titel);
	font-size: 1.75rem;
	color: var(--ss-rot);
	text-decoration: none;
}
.ss-has-logo .ss-site-title,
.ss-has-logo .ss-slogan { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ss-slogan { margin: 0.25rem 0 0; color: var(--ss-text-leise); font-size: 0.85rem; }

/* Menü: aktueller Abschnitt rot hinterlegt, die anderen dezent grau */
.ss-nav ul { list-style: none; margin: 0; padding: 0; }
.ss-nav > ul:first-child { border-top: 1px solid #e2e2e2; }
.ss-nav > ul:first-child li { border-bottom: 1px solid #e2e2e2; }
.ss-nav > ul:first-child a {
	display: block;
	padding: 0.45rem 2.2rem;
	font-family: var(--ss-schrift-titel);
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 1.5;
	color: var(--ss-text-leise);
	text-decoration: none;
	border-left: 4px solid transparent;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.ss-nav > ul:first-child a:hover,
.ss-nav > ul:first-child a:focus {
	color: var(--ss-rot);
	border-left-color: var(--ss-rot);
	background: #ececec;
}
.ss-nav > ul:first-child a.is-active {
	background: var(--ss-rot);
	border-left-color: var(--ss-rot-dunkel);
	color: #fff;
}

.ss-social { padding: 1.5rem 2.2rem !important; }
.ss-social a {
	display: inline-block;
	padding: 0.15rem 0;
	font-size: 0.9rem;
	color: var(--ss-text-leise);
	text-decoration: none;
}
.ss-social a:hover { color: var(--ss-rot); }

.ss-menu-toggle { display: none; }

/* ---------- Abschnitte ---------- */
.ss-section { padding: 4.5rem 2rem; scroll-margin-top: 1rem; }
.ss-section:nth-of-type(even) { background: var(--ss-hell); }
.ss-inner { max-width: var(--ss-lesebreite); margin: 0 auto; }

.ss-section h2 { text-align: center; font-size: 3rem; margin: 0 0 2.25rem; }
.ss-section h2::after {
	content: "";
	display: block;
	width: 3rem;
	height: 2px;
	margin: 0.9rem auto 0;
	background: var(--ss-akzent);
}
.ss-section h3 { font-size: 1.5rem; margin: 1.75rem 0 0.5rem; }
.ss-section-image { display: block; margin: 0 auto 2rem; }

/* Startbereich */
.ss-hero { text-align: center; padding-top: 5rem; }
.ss-hero-image { display: block; width: 100%; margin-bottom: 2.5rem; }
.ss-hero-title { font-size: 4rem; margin: 0; }
.ss-hero-subtitle {
	margin: 0.5rem 0 2rem;
	color: var(--ss-akzent);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: 0.85rem;
}

/* Icon-Leiste im Startbereich: Absatz, der nur verlinkte Bilder enthält */
.ss-hero .ss-content p:has(> a > img) {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5rem 2.5rem;
	margin: 2.5rem 0 0;
}
.ss-hero .ss-content p:has(> a > img) a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	width: 130px;
	font-family: var(--ss-schrift-titel);
	font-size: 1.15rem;
	font-weight: 400;
	line-height: 1.25;
	color: var(--ss-rot);
	text-align: center;
	text-decoration: none;
}
.ss-hero .ss-content p:has(> a > img) a:hover { color: var(--ss-rot-dunkel); }
.ss-hero .ss-content p:has(> a > img) img {
	width: 110px;
	height: auto;
	transition: transform 0.25s ease, opacity 0.25s ease;
}
.ss-hero .ss-content p:has(> a > img) a:hover img { transform: translateY(-4px) scale(1.05); }

/* Ankündigungen */
.ss-news-item {
	background: var(--ss-weiss);
	border: 1px solid var(--ss-linie);
	border-left: 3px solid var(--ss-akzent);
	padding: 1.25rem 1.5rem;
	margin-bottom: 1.25rem;
}
.ss-news-item h3 { margin: 0 0 0.5rem; }
.ss-news-date { margin: 0 0 0.25rem; font-size: 0.85rem; color: var(--ss-text-leise); }
.ss-more { font-weight: 700; }

/* Kacheln (Schlagwort "kacheln") */
.ss-kacheln {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 1.25rem;
	margin: 1.5rem 0;
	text-align: left;
}
.ss-kachel {
	background: var(--ss-weiss);
	border: 1px solid var(--ss-linie);
	border-top: 3px solid var(--ss-akzent);
	padding: 1.25rem;
}
.ss-kachel h3 { margin: 0 0 0.5rem; font-size: 1.3rem; }
.ss-kachel p:last-child { margin-bottom: 0; }

/* Zwei Spalten (Schlagwort "spalten"): Audio-Player nebeneinander,
   alles andere (Text, Überschriften, Buttons) über die volle Breite */
.ss-tag-spalten .ss-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 2.5rem;
}
.ss-tag-spalten .ss-content > :not(.ss-audio) { grid-column: 1 / -1; }
.ss-tag-spalten .ss-content > h3 { margin-top: 2rem; text-align: center; }

/* Audio-Player (aus Links auf MP3-Dateien) */
.ss-audio { margin: 0 0 1.25rem; break-inside: avoid; }
.ss-audio figcaption { font-weight: 700; margin-bottom: 0.35rem; }
.ss-audio audio { width: 100%; }

/* Listen mit Trennlinien (Schlagwort "liste") */
.ss-tag-liste .ss-content ul { list-style: none; padding: 0; }
.ss-tag-liste .ss-content li { padding: 0.35rem 0; border-bottom: 1px solid var(--ss-linie); }

/* Buttons: Links in einem fett gesetzten Absatz.
   Erster Link = gefüllt, jeder weitere Link im selben Absatz = Umriss */
.ss-content p > strong:only-child:has(> a) { font-weight: 400; }
.ss-content a.button,
.ss-content p > strong:only-child > a {
	display: inline-block;
	margin: 0.25rem 0.2rem;
	padding: 0.55em 1.4em;
	border: 2px solid var(--ss-akzent);
	border-radius: 2px;
	background: var(--ss-akzent);
	color: #fff;
	font-family: var(--ss-schrift);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.ss-content p > strong:only-child > a + a {
	background: transparent;
	color: var(--ss-akzent);
}
.ss-content a.button:hover,
.ss-content p > strong:only-child > a:hover {
	background: var(--ss-akzent-dunkel);
	border-color: var(--ss-akzent-dunkel);
	color: #fff;
}

/* Einzelseiten (Impressum, Datenschutz, Ankündigung) */
.ss-single h1 { font-size: 3rem; margin-top: 0.5rem; }
.ss-back { margin: 0; font-size: 0.9rem; }

/* Footer */
.ss-footer {
	padding: 2rem;
	text-align: center;
	font-size: 0.85rem;
	color: var(--ss-text-leise);
	border-top: 1px solid var(--ss-linie);
}
.ss-footer nav a { margin: 0 0.75rem; color: var(--ss-text-leise); }
.ss-footer p { margin: 0.75rem 0 0; }

/* ---------- Einblenden beim Scrollen ---------- */
.ss-anim .ss-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease, transform 0.7s ease;
	transition-delay: var(--ss-delay, 0s);
}
.ss-anim .ss-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.ss-anim .ss-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Handy & Tablet ---------- */
@media (max-width: 860px) {
	.ss-layout { display: block; }
	.ss-sidebar {
		position: sticky;
		z-index: 10;
		width: auto;
		height: auto;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		overflow: visible;
	}
	.ss-brand { padding: 0.6rem 1rem; text-align: left; }
	.ss-logo { max-width: 90px; margin: 0; }
	.ss-menu-toggle {
		display: block;
		margin-right: 1rem;
		background: var(--ss-rot);
		border: 0;
		padding: 0.4rem 0.9rem;
		font-family: var(--ss-schrift-titel);
		font-size: 1.1rem;
		color: #fff;
		cursor: pointer;
	}
	.ss-nav { display: none; flex-basis: 100%; }
	.ss-nav.is-open { display: block; }
	.ss-nav > ul:first-child a { padding: 0.5rem 1.25rem; font-size: 1.3rem; }
	.ss-hero .ss-content p:has(> a > img) { gap: 1.5rem 0.5rem; }
	.ss-hero .ss-content p:has(> a > img) a { width: 45%; font-size: 1.05rem; }
	.ss-hero .ss-content p:has(> a > img) img { width: 80px; }
	.ss-social { padding: 1rem 1.25rem !important; }
	.ss-section { padding: 3rem 1.25rem; scroll-margin-top: 4.5rem; }
	.ss-section h2 { font-size: 2.3rem; }
	.ss-hero { padding-top: 3rem; }
	.ss-hero-title { font-size: 2.8rem; }
	.ss-tag-spalten .ss-content { grid-template-columns: 1fr; }
}