/*
Theme Name: Sternenpfeiler
Theme URI: https://myranor.helden.training
Author: helden.training
Description: Schlankes Block-Theme für das Güldenland-Portal (Myranor-Fanprojekt). Elfenbein, Gold und Lapis, eigene SVG-Ornamente, Sternenhimmel, Hell/Dunkel-Umschalter, lokal eingebundene Schriften. Keine Fremdbibliotheken, kein Builder.
Version: 0.2.2
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sternenpfeiler
Tags: block-theme, full-site-editing, dark-mode, custom-colors
*/

/* ==========================================================================
   1. Design-Variablen
   Kurznamen für Theme und Portal-Plugin (--sp-*). Grundwerte kommen aus
   theme.json (--wp--preset--color--*); der Dunkelmodus überschreibt diese.
   ========================================================================== */
:root {
	--sp-seite: var(--wp--preset--color--elfenbein);
	--sp-pergament: var(--wp--preset--color--pergament);
	--sp-papier: var(--wp--preset--color--papier);
	--sp-tinte: var(--wp--preset--color--tinte);
	--sp-tinte-hell: var(--wp--preset--color--tinte-hell);
	--sp-gold: var(--wp--preset--color--gold);
	/* Gold für Schrift und Knöpfe: im hellen Modus dunkler, damit der Kontrast ≥ 4,5 : 1 bleibt */
	--sp-gold-text: var(--wp--preset--color--goldtext);
	--sp-lapis: var(--wp--preset--color--lapis);
	--sp-linie: var(--wp--preset--color--linie);
	--sp-regel: var(--wp--preset--color--regel);
	--sp-notiz: var(--wp--preset--color--notiz);
	--sp-warnung: var(--wp--preset--color--warnung);
	--sp-rahmen: color-mix(in srgb, var(--sp-gold) 55%, var(--sp-papier));
	--sp-glanz: color-mix(in srgb, var(--sp-gold) 35%, transparent);
	--sp-schatten: 0 22px 40px -30px rgba(60, 40, 10, 0.45);
	--sp-radius: 6px;
	--sp-radius-gross: 10px;
	--sp-font-zier: var(--wp--preset--font-family--zier);
	--sp-font-text: var(--wp--preset--font-family--text);
	--sp-font-ui: var(--wp--preset--font-family--ui);
	color-scheme: light;
}

/* Dunkelmodus: Systemeinstellung, solange nicht hell erzwungen … */
@media (prefers-color-scheme: dark) {
	:root:not([data-mode="light"]) {
		--wp--preset--color--elfenbein: #17151c;
		--wp--preset--color--pergament: #211e28;
		--wp--preset--color--papier: #1d1a23;
		--wp--preset--color--tinte: #ece6da;
		--wp--preset--color--tinte-hell: #b3aabd;
		--wp--preset--color--gold: #d2ad62;
		--wp--preset--color--goldtext: #d2ad62;
		--wp--preset--color--lapis: #8fb0e6;
		--wp--preset--color--linie: #3a3445;
		--wp--preset--color--regel: #2b2618;
		--wp--preset--color--notiz: #1f2736;
		--wp--preset--color--warnung: #3a2421;
		--sp-schatten: 0 22px 40px -30px rgba(0, 0, 0, 0.8);
		color-scheme: dark;
	}
}
/* … oder per Umschalter erzwungen. */
:root[data-mode="dark"] {
	--wp--preset--color--elfenbein: #17151c;
	--wp--preset--color--pergament: #211e28;
	--wp--preset--color--papier: #1d1a23;
	--wp--preset--color--tinte: #ece6da;
	--wp--preset--color--tinte-hell: #b3aabd;
	--wp--preset--color--gold: #d2ad62;
	--wp--preset--color--goldtext: #d2ad62;
	--wp--preset--color--lapis: #8fb0e6;
	--wp--preset--color--linie: #3a3445;
	--wp--preset--color--regel: #2b2618;
	--wp--preset--color--notiz: #1f2736;
	--wp--preset--color--warnung: #3a2421;
	--sp-schatten: 0 22px 40px -30px rgba(0, 0, 0, 0.8);
	color-scheme: dark;
}

/* ==========================================================================
   2. Grundlagen
   ========================================================================== */
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { transition: background-color 0.3s, color 0.3s; }
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--sp-gold);
	outline-offset: 2px;
	border-radius: 3px;
}
::selection { background: color-mix(in srgb, var(--sp-gold) 35%, transparent); }
.sp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Sternenhimmel: fest stehende Ebene hinter allen Inhalten, gegenläufiger Parallax per JS */
body::before {
	content: "";
	position: fixed;
	top: -230px;
	bottom: -230px;
	left: 0;
	right: 0;
	z-index: -1;
	pointer-events: none;
	background: var(--sp-gold);
	opacity: 0.24;
	-webkit-mask: url("assets/svg/sterne.svg") 0 0 / 220px 220px repeat;
	mask: url("assets/svg/sterne.svg") 0 0 / 220px 220px repeat;
	transform: translate3d(0, var(--sp-sterne-y, 0px), 0);
	will-change: transform;
}

/* ==========================================================================
   3. Kopf und Fuß
   ========================================================================== */
.sp-kopf {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--sp-seite) 88%, transparent);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	background-image: linear-gradient(90deg, transparent, var(--sp-rahmen), transparent);
	background-size: 100% 1px;
	background-position: left bottom;
	background-repeat: no-repeat;
}
.admin-bar .sp-kopf { top: var(--wp-admin--admin-bar--height, 32px); }
.sp-kopf .wp-block-site-title a { text-decoration: none; }
.sp-kopf .wp-block-navigation a { text-decoration: none; }
.sp-kopf .wp-block-navigation a:hover,
.sp-kopf .wp-block-navigation .current-menu-item > a { color: var(--sp-gold-text); }

/* Klassisches Menü (Design → Menüs), Ausgabe über [sternenpfeiler_menue] */
.sp-menue { font-family: var(--sp-font-ui); font-size: 0.9rem; }
.sp-menue__liste,
.sp-menue .sub-menu { list-style: none; margin: 0; padding: 0; }
.sp-menue__liste { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 1.2rem; }
.sp-menue li { position: relative; }
.sp-menue a { color: var(--sp-tinte); text-decoration: none; display: block; padding: 0.3rem 0; }
.sp-menue a:hover,
.sp-menue a:focus-visible,
.sp-menue .current-menu-item > a,
.sp-menue .current-menu-ancestor > a,
.sp-menue .current_page_parent > a { color: var(--sp-gold-text); }
.sp-menue .menu-item-has-children > a::after { content: " ▾"; content: " ▾" / ""; font-size: 0.75em; color: var(--sp-gold-text); }
.sp-menue--kopf .sub-menu {
	position: absolute;
	top: 100%;
	left: -0.8rem;
	z-index: 60;
	min-width: 12rem;
	padding: 0.4rem 0.8rem;
	background: var(--sp-papier);
	border: 1px solid var(--sp-rahmen);
	border-radius: 6px;
	box-shadow: 0 8px 24px rgb(0 0 0 / 0.15);
	visibility: hidden;
	opacity: 0;
	transform: translateY(4px);
	/* Beim Schließen bleibt das Menü bis zum Ende der Blende sichtbar, beim Öffnen wird es sofort erreichbar */
	transition: opacity 0.15s, transform 0.15s, visibility 0s linear 0.15s;
}
.sp-menue--kopf li:hover > .sub-menu,
.sp-menue--kopf li:focus-within > .sub-menu { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
/* per Escape geschlossen (Skript), bis Maus oder Fokus das Element verlassen */
.sp-menue--kopf li.ist-zu > .sub-menu { visibility: hidden; opacity: 0; }
.sp-menue__knopf {
	display: none;
	font: 600 0.78rem/1 var(--sp-font-ui);
	color: var(--sp-tinte);
	background: var(--sp-papier);
	border: 1px solid var(--sp-linie);
	border-radius: 999px;
	padding: 0.4rem 0.75rem;
	cursor: pointer;
}
.sp-menue__knopf:hover,
.sp-menue__knopf[aria-expanded="true"] { border-color: var(--sp-gold); color: var(--sp-gold-text); }
.sp-menue-hinweis { margin: 0; font: 0.8rem var(--sp-font-ui); }
.sp-menue--fuss .sp-menue__liste { justify-content: center; gap: 0.2rem 1.4rem; }
.sp-menue--fuss a { color: inherit; padding: 0; }

.sp-modus {
	font: 600 0.78rem/1 var(--sp-font-ui);
	color: var(--sp-tinte);
	background: var(--sp-papier);
	border: 1px solid var(--sp-linie);
	border-radius: 999px;
	padding: 0.4rem 0.75rem;
	cursor: pointer;
}
.sp-modus:hover { border-color: var(--sp-gold); color: var(--sp-gold-text); }

.sp-fuss {
	font-family: var(--sp-font-ui);
	font-size: var(--wp--preset--font-size--klein);
	color: var(--sp-tinte-hell);
	text-align: center;
}
.sp-fuss a { color: inherit; }
.sp-fuss a:hover { color: var(--sp-gold-text); }

/* ==========================================================================
   4. Folio-Rahmen (Blockstil „Folio-Rahmen“ und Seitenvorlagen)
   ========================================================================== */
.sp-folio,
.wp-block-group.is-style-folio {
	position: relative;
	background: var(--sp-papier);
	border: 1px solid var(--sp-rahmen);
	outline: 1px solid var(--sp-rahmen);
	outline-offset: -7px;
	border-radius: var(--sp-radius-gross);
	box-shadow: var(--sp-schatten);
	padding: 3.4rem clamp(1.1rem, 4vw, 2.8rem) 2.6rem;
	margin-top: 3.2rem;
}
/* Eckbeschläge */
.sp-folio::before,
.wp-block-group.is-style-folio::before {
	content: "";
	position: absolute;
	inset: 5px;
	pointer-events: none;
	background: var(--sp-gold);
	-webkit-mask:
		url("assets/svg/ecke-ol.svg") left top / 40px 40px no-repeat,
		url("assets/svg/ecke-or.svg") right top / 40px 40px no-repeat,
		url("assets/svg/ecke-ul.svg") left bottom / 40px 40px no-repeat,
		url("assets/svg/ecke-ur.svg") right bottom / 40px 40px no-repeat;
	mask:
		url("assets/svg/ecke-ol.svg") left top / 40px 40px no-repeat,
		url("assets/svg/ecke-or.svg") right top / 40px 40px no-repeat,
		url("assets/svg/ecke-ul.svg") left bottom / 40px 40px no-repeat,
		url("assets/svg/ecke-ur.svg") right bottom / 40px 40px no-repeat;
}
/* Triopta-Wappen, das auf dem Rahmen sitzt */
.sp-folio::after,
.wp-block-group.is-style-folio::after {
	content: "";
	position: absolute;
	top: -36px;
	left: 50%;
	width: 150px;
	height: 38px;
	transform: translateX(-50%);
	pointer-events: none;
	background: var(--sp-gold);
	-webkit-mask: url("assets/svg/wappen.svg") center bottom / contain no-repeat;
	mask: url("assets/svg/wappen.svg") center bottom / contain no-repeat;
}
.sp-folio .wp-block-post-title,
.wp-block-group.is-style-folio > .wp-block-heading:first-child { text-align: center; }

/* ==========================================================================
   5. Weitere Blockstile
   ========================================================================== */
/* Kernregel-Kasten */
.wp-block-group.is-style-kasten {
	position: relative;
	background: var(--sp-regel);
	border: 1px solid var(--sp-rahmen);
	border-radius: var(--sp-radius);
	box-shadow: inset 0 0 0 3px var(--sp-regel), inset 0 0 0 4px var(--sp-rahmen);
	padding: 1.1rem 1.4rem;
}
.wp-block-group.is-style-kasten::before {
	content: "";
	position: absolute;
	inset: 3px;
	pointer-events: none;
	background: var(--sp-gold);
	-webkit-mask:
		url("assets/svg/ecke-ol.svg") left top / 16px 16px no-repeat,
		url("assets/svg/ecke-or.svg") right top / 16px 16px no-repeat,
		url("assets/svg/ecke-ul.svg") left bottom / 16px 16px no-repeat,
		url("assets/svg/ecke-ur.svg") right bottom / 16px 16px no-repeat;
	mask:
		url("assets/svg/ecke-ol.svg") left top / 16px 16px no-repeat,
		url("assets/svg/ecke-or.svg") right top / 16px 16px no-repeat,
		url("assets/svg/ecke-ul.svg") left bottom / 16px 16px no-repeat,
		url("assets/svg/ecke-ur.svg") right bottom / 16px 16px no-repeat;
}
/* Notiz-Kasten */
.wp-block-group.is-style-notiz {
	background: var(--sp-notiz);
	border: 1px solid var(--sp-linie);
	border-radius: var(--sp-radius);
	box-shadow: inset 3px 0 0 var(--sp-lapis);
	padding: 0.9rem 1.2rem;
}
/* Band (Kapitelnummer, Kicker) */
.wp-block-heading.is-style-band,
p.is-style-band {
	display: table;
	margin-inline: auto;
	padding: 0.3rem 1.6rem 0.28rem;
	background: var(--sp-gold-text);
	color: var(--sp-papier);
	font: 600 0.72rem/1.4 var(--sp-font-ui);
	letter-spacing: 0.32em;
	text-transform: uppercase;
	clip-path: polygon(0 0, 100% 0, calc(100% - 11px) 50%, 100% 100%, 0 100%, 11px 50%);
}
/* Ornament-Trenner */
.wp-block-separator.is-style-ornament {
	border: 0 !important;
	height: 24px;
	width: min(300px, 80%) !important;
	max-width: none;
	margin-inline: auto !important;
	background: var(--sp-gold) !important;
	opacity: 1;
	-webkit-mask: url("assets/svg/ranke.svg") center / contain no-repeat;
	mask: url("assets/svg/ranke.svg") center / contain no-repeat;
}
/* Zwischenüberschriften im Inhalt */
.wp-block-post-content h3 {
	padding-bottom: 0.25rem;
	background: linear-gradient(90deg, var(--sp-rahmen), transparent 70%) left bottom / 100% 1px no-repeat;
}
.wp-block-post-content h3::before {
	content: "";
	display: inline-block;
	width: 0.42em;
	height: 0.42em;
	margin: 0 0.55em 0.12em 0.1em;
	background: var(--sp-gold);
	transform: rotate(45deg);
}
/* Tabellen mit Doppelrahmen */
.wp-block-table {
	border: 1px solid var(--sp-rahmen);
	border-radius: var(--sp-radius);
	padding: 3px;
	background: var(--sp-papier);
	overflow-x: auto;
}
.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-table th,
.wp-block-table td { border: 0; border-bottom: 1px solid var(--sp-linie); padding: 0.42rem 0.6rem; text-align: left; }
.wp-block-table th { font-family: var(--sp-font-zier); font-weight: 500; letter-spacing: 0.04em; background: var(--sp-regel); border-bottom: 2px solid var(--sp-rahmen); }
.wp-block-table tr:last-child td { border-bottom: 0; }
/* Zitat als Lore-Kasten */
.wp-block-quote { text-align: center; border-left: 0 !important; padding: 0.6rem 2rem; }
.wp-block-quote::before,
.wp-block-quote::after { content: "❖"; content: "❖" / ""; display: block; color: var(--sp-gold); font-style: normal; font-size: 0.8rem; letter-spacing: 1.2em; margin: 0.2rem 0; }
/* Umriss-Knopf */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--sp-gold-text);
	border: 1px solid var(--sp-gold-text);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--sp-gold-text); color: var(--sp-papier); }

/* ==========================================================================
   6. Startseite: Siegel und Aufzeichnen der Ornamente
   ========================================================================== */
.sp-hero { overflow: hidden; }
.sp-siegel {
	position: absolute;
	width: 26rem;
	height: 26rem;
	right: -7rem;
	top: -7rem;
	pointer-events: none;
	background: var(--sp-gold);
	opacity: 0.12;
	-webkit-mask: url("assets/svg/siegel.svg") center / contain no-repeat;
	mask: url("assets/svg/siegel.svg") center / contain no-repeat;
	animation: sp-drehen 140s linear infinite;
}
.sp-hero .wp-block-separator.is-style-ornament { animation: sp-zeichnen 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) both 0.3s; }
.sp-hero h1 { text-shadow: 0 1px 0 var(--sp-papier), 0 0 24px var(--sp-glanz); letter-spacing: 0.08em; }
@keyframes sp-drehen { to { transform: rotate(360deg); } }
@keyframes sp-zeichnen { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }

/* ==========================================================================
   7. Beitragsliste (News)
   ========================================================================== */
.sp-karte {
	position: relative;
	background: var(--sp-papier);
	border: 1px solid var(--sp-rahmen);
	border-radius: var(--sp-radius);
	box-shadow: inset 0 0 0 4px var(--sp-papier), inset 0 0 0 5px var(--sp-rahmen);
	padding: 1.2rem 1.4rem;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.sp-karte:hover {
	transform: translateY(-3px);
	box-shadow: inset 0 0 0 4px var(--sp-papier), inset 0 0 0 5px var(--sp-gold), 0 14px 30px -12px var(--sp-glanz);
}
.sp-karte .wp-block-post-title a { text-decoration: none; color: var(--sp-tinte); }

/* ==========================================================================
   8. WP NeoUser (Login, Registrierung, Profil) im Sternenpfeiler-Look
   ========================================================================== */
.neo-wrap {
	--neo-primaer: #7f5f22;
	--neo-primaer-dunkel: #6b4f1b;
	--neo-dunkel: #27222e;
	--neo-hg: #fffdf8;
	--neo-primaer-rgb: 127, 95, 34;
	--neo-primaer-dunkel-rgb: 107, 79, 27;
	--neo-dunkel-rgb: 39, 34, 46;
	--neo-hg-rgb: 255, 253, 248;
	--neo-knopf-text: #fffdf8;
	--neo-primaer-text: #7f5f22;
	font-family: var(--sp-font-text);
}
@media (prefers-color-scheme: dark) {
	:root:not([data-mode="light"]) .neo-wrap {
		--neo-primaer: #d2ad62; --neo-primaer-dunkel: #b8934c; --neo-dunkel: #ece6da; --neo-hg: #1d1a23;
		--neo-primaer-rgb: 210, 173, 98; --neo-primaer-dunkel-rgb: 184, 147, 76; --neo-dunkel-rgb: 236, 230, 218; --neo-hg-rgb: 29, 26, 35;
		--neo-knopf-text: #17151c; --neo-primaer-text: #d2ad62;
	}
}
:root[data-mode="dark"] .neo-wrap {
	--neo-primaer: #d2ad62; --neo-primaer-dunkel: #b8934c; --neo-dunkel: #ece6da; --neo-hg: #1d1a23;
	--neo-primaer-rgb: 210, 173, 98; --neo-primaer-dunkel-rgb: 184, 147, 76; --neo-dunkel-rgb: 236, 230, 218; --neo-hg-rgb: 29, 26, 35;
	--neo-knopf-text: #17151c; --neo-primaer-text: #d2ad62;
}
.neo-wrap .neo-glass {
	position: relative;
	background: var(--sp-papier);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border: 1px solid var(--sp-rahmen);
	outline: 1px solid var(--sp-rahmen);
	outline-offset: -7px;
	border-radius: var(--sp-radius-gross);
	box-shadow: var(--sp-schatten);
}
.neo-wrap h1,
.neo-wrap h2 { font-family: var(--sp-font-zier); font-weight: 500; }
.neo-wrap .neo-btn { font-family: var(--sp-font-ui); border-radius: 999px; }

/* ==========================================================================
   8a. Knöpfe: Eindrücken beim Klick, Schimmer bei Bronze-Knöpfen
   Bronze: Block-Knöpfe, WordPress-Formularknöpfe, NeoUser-Knöpfe und .sp-knopf
   (für das Portal-Plugin). Umriss: Umriss-Knöpfe, .sp-knopf--umriss,
   NeoUser-Ghost, Hell/Dunkel- und Menü-Knopf. Der Schimmer läuft einmal beim
   Hineinfahren bzw. Fokussieren (Klasse .sp-schimmer per Skript).
   ========================================================================== */
:root { --sp-bronze-kante: color-mix(in srgb, var(--sp-gold-text) 62%, #000); }

.wp-block-button:not(.is-style-outline) > .wp-block-button__link,
:where(button, input).wp-element-button,
.neo-wrap .neo-btn:not(.neo-btn--ghost, .neo-btn--gefahr),
.sp-knopf:not(.sp-knopf--umriss) {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	box-shadow: 0 3px 0 var(--sp-bronze-kante), 0 7px 14px -8px rgb(40 26 6 / 0.55);
	transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.15s ease, background-color 0.2s, color 0.2s;
}
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
:where(button, input).wp-element-button:hover,
.neo-wrap .neo-btn:not(.neo-btn--ghost, .neo-btn--gefahr):hover,
.sp-knopf:not(.sp-knopf--umriss):hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 0 var(--sp-bronze-kante), 0 10px 18px -8px rgb(40 26 6 / 0.55);
	filter: brightness(1.06);
}
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:active,
:where(button, input).wp-element-button:active,
.neo-wrap .neo-btn:not(.neo-btn--ghost, .neo-btn--gefahr):active,
.sp-knopf:not(.sp-knopf--umriss):active {
	transform: translateY(3px);
	box-shadow: 0 0 0 var(--sp-bronze-kante), inset 0 2px 6px rgb(0 0 0 / 0.28);
	filter: brightness(0.95);
	transition-duration: 0.05s;
}
/* Schimmer: Lichtstreif zwischen Hintergrund und Schrift */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link::after,
:where(button, input).wp-element-button::after,
.neo-wrap .neo-btn:not(.neo-btn--ghost, .neo-btn--gefahr)::after,
.sp-knopf:not(.sp-knopf--umriss)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(110deg, transparent 28%, rgb(255 246 220 / 0.6) 46%, rgb(255 255 255 / 0.85) 50%, rgb(255 246 220 / 0.6) 54%, transparent 72%);
	transform: translateX(-130%);
}
.sp-schimmer::after { animation: sp-schimmer 0.9s cubic-bezier(0.45, 0.05, 0.35, 1); }
@keyframes sp-schimmer { to { transform: translateX(130%); } }

/* Umriss- und kleine Knöpfe: nur eindrücken */
.wp-block-button.is-style-outline > .wp-block-button__link,
.sp-knopf--umriss,
.neo-wrap .neo-btn--ghost,
.neo-wrap .neo-btn--gefahr,
.sp-modus,
.sp-menue__knopf {
	transition: transform 0.12s ease, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.12s ease;
}
.wp-block-button.is-style-outline > .wp-block-button__link:active,
.sp-knopf--umriss:active,
.neo-wrap .neo-btn--ghost:active,
.neo-wrap .neo-btn--gefahr:active,
.sp-modus:active,
.sp-menue__knopf:active {
	transform: translateY(2px) scale(0.97);
	box-shadow: inset 0 2px 5px rgb(0 0 0 / 0.18);
	background-color: color-mix(in srgb, var(--sp-gold) 14%, var(--sp-papier));
	transition-duration: 0.05s;
}
.wp-block-button.is-style-outline > .wp-block-button__link:active { color: var(--sp-gold-text); }

/* Portal-Knöpfe ohne eigene Gestaltung: .sp-knopf (Bronze) und .sp-knopf--umriss */
.sp-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	font: 600 0.9rem/1.2 var(--sp-font-ui);
	padding: 0.55rem 1.3rem;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--sp-gold-text);
	color: var(--sp-papier);
	text-decoration: none;
	cursor: pointer;
}
.sp-knopf--umriss { background: transparent; color: var(--sp-gold-text); border-color: var(--sp-gold-text); }
.sp-knopf--umriss:hover { background: var(--sp-gold-text); color: var(--sp-papier); }
.sp-knopf:disabled,
.sp-knopf[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; filter: none; }

/* ==========================================================================
   9. Kleine Bildschirme, reduzierte Bewegung, Druck
   ========================================================================== */
@media (max-width: 782px) {
	.sp-folio,
	.wp-block-group.is-style-folio { padding: 2.8rem 1.1rem 1.8rem; margin-top: 2.6rem; }
	.sp-folio::before,
	.wp-block-group.is-style-folio::before {
		-webkit-mask-size: 28px 28px, 28px 28px, 28px 28px, 28px 28px;
		mask-size: 28px 28px, 28px 28px, 28px 28px, 28px 28px;
	}
	.sp-folio::after,
	.wp-block-group.is-style-folio::after { width: 120px; height: 30px; top: -28px; }
	.sp-siegel { display: none; }

	/* Kopfmenü als aufklappbare Liste unter dem Kopf */
	.sp-menue__knopf { display: inline-block; }
	.sp-menue--kopf .sp-menue__liste {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0.6rem 1.2rem 1rem;
		background: var(--sp-seite);
		border-bottom: 1px solid var(--sp-rahmen);
		box-shadow: 0 10px 24px rgb(0 0 0 / 0.12);
		max-height: calc(100vh - 4rem);
		overflow-y: auto;
	}
	.sp-menue--kopf.ist-offen .sp-menue__liste { display: flex; }
	.sp-menue--kopf .sp-menue__liste > li { border-bottom: 1px solid var(--sp-linie); }
	.sp-menue--kopf .sp-menue__liste > li:last-child { border-bottom: 0; }
	.sp-menue--kopf a { padding: 0.55rem 0; }
	.sp-menue--kopf .sub-menu {
		position: static;
		visibility: visible;
		opacity: 1;
		transform: none;
		min-width: 0;
		padding: 0 0 0.4rem 1rem;
		background: none;
		border: 0;
		box-shadow: none;
	}
	.sp-menue--kopf .sub-menu a { padding: 0.35rem 0; }
	.sp-menue .menu-item-has-children > a::after { content: none; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	body::before { transform: none; }
	.sp-siegel,
	.sp-hero .wp-block-separator.is-style-ornament { animation: none; }
	.sp-karte { transition: none; }
	/* Knöpfe: kein Verschieben und kein Schimmer, nur Helligkeit als Rückmeldung */
	.wp-block-button__link,
	.wp-element-button,
	.neo-wrap .neo-btn,
	.sp-knopf,
	.sp-modus,
	.sp-menue__knopf { transition: none; }
	.wp-block-button__link:is(:hover, :active),
	.wp-element-button:is(:hover, :active),
	.neo-wrap .neo-btn:is(:hover, :active),
	.sp-knopf:is(:hover, :active),
	.sp-modus:active,
	.sp-menue__knopf:active { transform: none !important; }
	.sp-schimmer::after { animation: none; }
}
@media print {
	body::before,
	.sp-kopf,
	.sp-modus,
	.sp-siegel { display: none; }
	.sp-folio,
	.wp-block-group.is-style-folio { box-shadow: none; }
}