/*
Theme Name:  Wandererde (Kadence Child)
Theme URI:   https://wandererde.de
Description: Child-Theme von Kadence für wandererde.de. Nur wenige Regeln, alles Weitere im Customizer. Eigener Code liegt im Plugin wandererde-site.
Author:      Hannes Schwarzlose
Template:    kadence
Version:     1.0.0
Text Domain: kadence-child
*/

/* ---- Eine Rundung für alles ----------------------------------------------
   Vorlage ist der Kartenrahmen (10px). Gilt für Beitragsbild, Titelbox,
   Galeriebilder, Inhaltsbilder, Karten in Listen, Buttons, Steckbrief. */
:root {
	--we-radius: 10px;
}
/* Beitragsbild hinter dem Titel und die weiße Inhaltsbox darunter */
.single .post-thumbnail.article-post-thumbnail,
.single .post-thumbnail.article-post-thumbnail img,
.page .post-thumbnail.article-post-thumbnail img {
	border-radius: var(--we-radius);
	overflow: hidden;
}
/* Die weiße Box ist der article.content-bg.single-entry (Kadence: 4px) */
article.content-bg.single-entry,
.content-bg.single-entry,
.content-style-boxed .entry-content-wrap {
	border-radius: var(--we-radius);
}
/* Karten in Kategorien, Suche, Related Posts */
.loop-entry.content-bg,
.entry-related .loop-entry {
	border-radius: var(--we-radius);
	overflow: hidden;
}
/* Bilder im Text und in Galerien */
.entry-content img:not(.emoji):not(.wp-postratings-image),
.entry-content .wp-block-image img,
.entry-content .mgl-gallery-images img,
.entry-content .mgl-item,
.entry-content .mgl-box,
.entry-content .wp-block-gallery img,
.entry-content iframe,
.entry-content .wp-block-embed__wrapper {
	border-radius: var(--we-radius);
}
.entry-content .mgl-item,
.entry-content .mgl-box {
	overflow: hidden;
}
/* Buttons und Formularfelder */
.wp-block-button__link,
.button,
button:not(.mapboxgl-ctrl-icon):not(.menu-toggle-open):not(.search-toggle-open):not(.close-drawer):not(.drawer-sub-toggle):not(.we-farbmodus-knopf):not([data-modus]),
input[type="submit"],
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
textarea,
select {
	border-radius: var(--we-radius);
}

/* Mapbox-Popups: Kadence stylt jeden <button>, auch das Schließkreuz der
   Popups (Padding, Hintergrund, Rundung). Zurück auf Mapbox-Standard. */
.mapboxgl-popup-content {
	padding: 12px 32px 12px 14px;
	border-radius: var(--we-radius);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
	font-size: 1rem;
	line-height: 1.4;
}
.mapboxgl-popup-content p {
	margin: 0;
}
button.mapboxgl-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	width: 28px;
	height: 28px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0 var(--we-radius) 0 var(--we-radius);
	background: transparent;
	color: var(--global-palette5);
	font-size: 20px;
	line-height: 28px;
	box-shadow: none;
	cursor: pointer;
}
button.mapboxgl-popup-close-button:hover {
	background: var(--global-palette7);
	color: var(--global-palette3);
}

/* Meow Lightbox (PhotoSwipe): Die Symbole oben rechts (Schließen, Vollbild)
   sind Strich-Icons mit stroke="currentColor". Kadence setzt Buttons eine
   dunkle Textfarbe und nimmt SVGs den Strich; auf dem dunklen Hintergrund
   war das Schließkreuz dadurch unsichtbar. */
.pswp.mwl .pswp__button {
	color: #fff;
	background: transparent;
	box-shadow: none;
}
/* Farbe direkt am Strich, nicht über currentColor: die Textfarbe des Buttons
   setzt eine stärkere Kadence-Regel wieder auf dunkel. */
.pswp.mwl .pswp__button svg[stroke="currentColor"],
.pswp.mwl .pswp__button svg[stroke="currentColor"] path {
	stroke: #fff;
	fill: none;
}
.pswp.mwl .pswp__button:hover svg[stroke="currentColor"],
.pswp.mwl .pswp__button:hover svg[stroke="currentColor"] path,
.pswp.mwl .pswp__button:focus-visible svg[stroke="currentColor"] path {
	stroke: var(--global-palette2);
}
.pswp.mwl .pswp__button:hover,
.pswp.mwl .pswp__button:focus-visible {
	background: transparent;
}

/* ---- Steckbrief (TablePress-Kurzinfo) im Beitrag ----------------------
   Jede Region hat eine TablePress-Tabelle mit allen Wanderungen; der Beitrag
   zeigt per hide_rows/show_rows nur die Kopfzeile und seine eigene Zeile,
   also zwei Zeilen: Bezeichnungen oben, Werte darunter. Die Spaltenzahl ist
   je Tabelle verschieden (meist Länge, Dauer, Höhenmeter, Schwierigkeit,
   Bewertung). Dargestellt als Kennzahlen-Leiste. */
.entry-content .tablepress {
	width: 100%;
	margin: 0 0 2em;
	border: 0;
	border-radius: var(--we-radius);
	overflow: hidden;
	background: var(--global-palette7);
	table-layout: fixed;
}
.entry-content .tablepress thead th,
.entry-content .tablepress tbody td {
	border: 0;
	background: transparent;
	text-align: center;
	vertical-align: top;
	padding: 14px 8px 4px;
}
.entry-content .tablepress thead th {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--global-palette4);
	line-height: 1.3;
}
.entry-content .tablepress tbody td {
	font-size: 1.35rem;
	font-weight: 600;
	color: var(--global-palette3);
	padding: 0 8px 16px;
}
.entry-content .tablepress tbody tr.row-hover:hover td,
.entry-content .tablepress tbody.row-striping tr:nth-child(even) td {
	background: transparent;
}
@media (max-width: 719px) {
	.entry-content .tablepress thead th {
		font-size: 0.6rem;
		letter-spacing: 0;
		overflow-wrap: anywhere;
		hyphens: auto;
		padding: 10px 3px 2px;
	}
	.entry-content .tablepress tbody td {
		font-size: 1.05rem;
		padding: 0 4px 12px;
	}
}

/* ---- Bewertung (WP-PostRatings) -------------------------------------- */
.entry-content .wp-postratings {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0 0 1.5em;
	font-size: 0.95rem;
	color: var(--global-palette5);
}
.entry-content .wp-postratings img {
	margin: 0;
}

/* ---- Startseite ------------------------------------------------------------
   Inhalt ist normaler Block-Inhalt (Cover, Query Loop, Bild-Kacheln), siehe
   scripts/relaunch/seiten-inhalte.php für den Ausgangsstand. */
.we-hero .wp-block-cover__inner-container {
	width: 100%;
}
.we-hero h1 {
	font-size: clamp(2.2rem, 5vw, 3.6rem);
	line-height: 1.1;
	margin-bottom: 0.5em;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.we-hero p {
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}
.we-hero-suche.wp-block-search {
	max-width: 560px;
	margin: 1.5rem auto 0;
}
.we-hero-suche .wp-block-search__inside-wrapper {
	background: #fff;
	border-radius: 999px;
	padding: 4px 4px 4px 18px;
	border: 0;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}
.we-hero-suche .wp-block-search__input {
	border: 0;
	background: transparent;
	box-shadow: none;
	font-size: 1.05rem;
}
.we-hero-suche .wp-block-search__button {
	border-radius: 999px;
	margin-left: 4px;
	padding: 0.6em 1.1em;
}

/* Abschnitte unter dem Hero: Inhaltsbreite mit Seitenabstand, auch wenn die
   Seite selbst in voller Breite läuft (Hero geht bis an den Rand). */
.home .entry-content > .wp-block-group.we-abschnitt {
	max-width: var(--global-content-width, 1290px);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--global-content-edge-padding, 1.5rem);
	padding-right: var(--global-content-edge-padding, 1.5rem);
}

/* Karten nicht auf die Höhe der höchsten Karte in der Zeile strecken */
.we-neueste .wp-block-post-template {
	align-items: start;
}
.we-neueste .wp-block-post-featured-image {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--global-palette7);
}
.we-neueste .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.we-neueste .wp-block-post {
	background: var(--global-palette9);
	border-radius: var(--we-radius);
	overflow: hidden;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.07);
	padding-bottom: 1.2rem;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.we-neueste .wp-block-post:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.13);
}
.we-neueste .wp-block-post-featured-image {
	margin: 0;
}
.we-neueste .wp-block-post-featured-image img {
	border-radius: 0;
}
.we-neueste .wp-block-post-terms,
.we-neueste .wp-block-post-title,
.we-neueste .wp-block-post-date {
	padding: 0 1.2rem;
}
.we-neueste .wp-block-post-terms a {
	color: var(--global-palette1);
	text-decoration: none;
}
.we-neueste .wp-block-post-title {
	margin: 0 0 0.4rem;
	line-height: 1.25;
}
.we-neueste .wp-block-post-title a {
	color: var(--global-palette3);
	text-decoration: none;
}
.we-neueste .wp-block-post-title a:hover {
	color: var(--global-palette1);
}

.we-laender {
	gap: 24px;
}
.we-laender .we-land {
	margin: 0;
}
.we-laender .we-land img {
	width: 100%;
	max-width: 180px;
	height: auto;
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.18));
	transition: transform 0.2s ease;
}
.we-laender .we-land:hover img {
	transform: scale(1.06);
}
.we-laender .we-land figcaption {
	margin-top: 0.6rem;
	font-size: 1.05rem;
	font-weight: 600;
	text-align: center;
}
.we-laender .we-land figcaption a {
	color: var(--global-palette3);
	text-decoration: none;
}
.we-laender .we-land figcaption a:hover {
	color: var(--global-palette1);
}
@media (max-width: 1024px) {
	.we-laender {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}
@media (max-width: 540px) {
	.we-laender {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 16px;
	}
}

/* ---- Karten und Galerien ------------------------------------------------
   Das Mapbox-Plugin gibt den Kartencontainer ohne Klasse aus, nur mit einer
   ID wp_mapbox_gl_js_map-<zufall>. */
.entry-content [id^="wp_mapbox_gl_js_map-"] {
	margin: 1.5em 0 2em;
	border-radius: var(--we-radius);
	overflow: hidden;
	box-shadow: 0 4px 24px -6px rgba(0, 0, 0, 0.15);
}
.entry-content [id^="wp_mapbox_gl_js_map-"] .mapboxgl-canvas {
	border-radius: var(--we-radius);
}
.entry-content .mgl-gallery,
.entry-content .wp-block-gallery {
	margin-bottom: 2em;
}
/* Leere Absätze aus alten Beiträgen (<p> </p>) nehmen keinen Platz ein */
.entry-content > p:empty,
.entry-content > p:has(> br:only-child) {
	display: none;
}

/* ---- Header: schwebende Glas-Pille („Liquid Glass“) -----------------------
   Die Leiste selbst ist unsichtbar, nur die Zeile darin wird zur Pille aus
   Milchglas. Das Glas liegt auf einem ::before statt auf der Zeile selbst:
   Ein Element mit backdrop-filter kapselt seine Kinder, das Glas der
   Untermenüs sähe sonst nur die Pille und nicht die Seite dahinter.
   Auf der Startseite schwebt die Pille über dem Hero-Foto (Kadence
   „Transparenter Header“, in den Seiteneinstellungen der Startseite). */
:root {
	--we-glas: rgba(255, 255, 255, 0.62);
	--we-glas-dicht: rgba(255, 255, 255, 0.78);
	--we-glas-dunkel: rgba(22, 30, 34, 0.72);
	--we-glas-filter: blur(18px) saturate(180%);
	--we-glas-kante: rgba(255, 255, 255, 0.48);
	--we-glas-schatten: 0 8px 32px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(255, 255, 255, 0.25);
}
#masthead,
#masthead .site-main-header-wrap .site-header-row-container-inner,
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) > .site-header-row-container-inner {
	background: transparent;
	border-bottom: 0;
}
#masthead .site-main-header-wrap .site-header-row-container-inner {
	padding-top: 12px;
}
#masthead .site-main-header-inner-wrap {
	position: relative;
	isolation: isolate;
	padding: 0 0.6rem 0 1.4rem;
}
#main-header .site-main-header-inner-wrap {
	min-height: 72px;
}
#mobile-header .site-main-header-inner-wrap {
	min-height: 60px;
	padding: 0 0.3rem 0 1rem;
}
#masthead .site-main-header-inner-wrap::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 999px;
	background: var(--we-glas);
	-webkit-backdrop-filter: var(--we-glas-filter);
	backdrop-filter: var(--we-glas-filter);
	border: 1px solid var(--we-glas-kante);
	box-shadow: var(--we-glas-schatten);
}
/* Ohne backdrop-filter (alte Browser) dichteres Weiß, damit Text lesbar bleibt */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	#masthead .site-main-header-inner-wrap::before,
	#masthead .header-navigation ul.sub-menu {
		background: rgba(255, 255, 255, 0.95);
	}
}
.transparent-header .we-hero,
.mobile-transparent-header .we-hero {
	padding-top: calc(4rem + 84px) !important;
}

/* Beim Runterscrollen wird die Pille schmaler, etwas kleiner und bekommt
   einen grünen Schimmer. Reines CSS, gesteuert über die Scrollposition
   (animation-timeline): zwischen 120 und 520 px Scrollweg läuft die
   Animation einmal durch, nach oben läuft sie rückwärts. Kadences eigenes
   Schrumpfen (Customizer: Header → Sticky → Shrink) ist aus: Es verkleinerte
   das Logo schon in den ersten 12 px Scrollweg ruckartig, das Menü sprang
   mit. Browser ohne Unterstützung (Firefox)
   und Nutzer mit „Bewegung reduzieren“ behalten die ruhige Pille.
   Nur Desktop: Auf Tablet und Handy ist die Pille ohnehin schmal. */
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: scroll()) {
		#main-header .site-main-header-inner-wrap,
		#main-header .site-main-header-inner-wrap::before,
		#main-header .header-menu-container > ul > li > a {
			animation-timing-function: linear;
			animation-fill-mode: both;
			animation-timeline: scroll(root);
			animation-range: 120px 520px;
		}
		#main-header .site-main-header-inner-wrap {
			max-width: 100%;
			margin-inline: auto;
			transform-origin: 50% 0;
			animation-name: we-pille-schrumpfen;
		}
		#main-header .site-main-header-inner-wrap::before {
			animation-name: we-pille-schimmer;
		}
		/* Menüpunkte rücken zusammen, damit alles in die schmale Pille passt */
		#main-header .header-menu-container > ul > li > a {
			animation-name: we-menue-enger;
		}
	}
}
@keyframes we-pille-schrumpfen {
	to {
		max-width: 1120px;
		transform: scale(0.96);
	}
}
@keyframes we-pille-schimmer {
	to {
		box-shadow: var(--we-glas-schatten), 0 12px 50px -18px var(--global-palette2);
	}
}
@keyframes we-menue-enger {
	to {
		padding-left: 0.5em;
		padding-right: 0.5em;
	}
}

/* Hauptmenü: Hover und aktive Seite als weiche Blase statt Unterstrich */
#masthead .header-navigation.header-navigation-style-underline .header-menu-container > ul > li > a:after {
	display: none;
}
#masthead .header-navigation .header-menu-container > ul > li > a {
	padding-top: 0.45em;
	padding-bottom: 0.45em;
	margin: 0 0.1em;
	border-radius: 999px;
	transition: background-color 0.2s ease, color 0.2s ease;
}
#masthead .header-navigation .header-menu-container > ul > li > a:hover,
#masthead .header-navigation .header-menu-container > ul > li:hover > a {
	background: rgba(31, 42, 48, 0.07);
}
#masthead .header-navigation .header-menu-container > ul > li.current-menu-item > a,
#masthead .header-navigation .header-menu-container > ul > li.current-menu-ancestor > a {
	background: rgba(63, 159, 69, 0.16);
	color: var(--global-palette3);
}
.header-navigation .header-menu-container > ul > li > a .dropdown-nav-toggle {
	opacity: 0.6;
}

/* Schmale Desktops (1025–1200 px): Menüpunkte enger, sonst bricht das Menü
   in eine zweite Zeile um */
@media (min-width: 1025px) and (max-width: 1200px) {
	#main-header .header-menu-container > ul > li > a {
		padding-left: 0.5em;
		padding-right: 0.5em;
		font-size: 15px;
	}
	#main-header .site-main-header-inner-wrap {
		padding-left: 1rem;
	}
	#main-header .site-branding a.brand img {
		max-width: 180px;
	}
}

/* Untermenü: dieselbe Glasart, dunkle Schrift (überschreibt die Farben aus
   dem Customizer, die für das frühere dunkle Untermenü gesetzt sind) */
#masthead .header-navigation .header-menu-container ul ul.sub-menu {
	margin-top: 6px;
	padding: 8px;
	border-radius: 18px;
	background: var(--we-glas-dicht);
	-webkit-backdrop-filter: var(--we-glas-filter);
	backdrop-filter: var(--we-glas-filter);
	border: 1px solid var(--we-glas-kante);
	box-shadow: var(--we-glas-schatten);
}
/* Unsichtbare Brücke über die Lücke, damit das Menü beim Hinfahren offen bleibt */
#masthead .header-navigation .header-menu-container ul ul.sub-menu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -8px;
	height: 8px;
}
#masthead .header-navigation .header-menu-container ul ul li.menu-item > a {
	color: var(--global-palette3);
	border-radius: 10px;
}
#masthead .header-navigation .header-menu-container ul ul li.menu-item > a:hover {
	color: var(--global-palette1);
	background: rgba(31, 42, 48, 0.07);
}
#masthead .header-navigation .header-menu-container ul ul li.menu-item.current-menu-item > a {
	color: var(--global-palette3);
	background: rgba(63, 159, 69, 0.16);
}

/* Suche im Header: Lupe im Kreis */
.header-navigation-layout-stretch-false .search-toggle-open,
#masthead .search-toggle-open {
	border-radius: 50%;
}

/* Mobiles Menü und Suchfeld: dunkles Glas statt fast Schwarz */
#mobile-drawer .drawer-inner,
#search-drawer .drawer-inner {
	background: var(--we-glas-dunkel);
	-webkit-backdrop-filter: var(--we-glas-filter);
	backdrop-filter: var(--we-glas-filter);
}
#mobile-drawer .drawer-inner {
	border-radius: 22px 0 0 22px;
	border-left: 1px solid rgba(255, 255, 255, 0.12);
}

/* ---- Footer: dunkel, hebt sich vom Inhalt ab ------------------------------ */
#colophon {
	--we-fuss-grund: var(--global-palette3);
	--we-fuss-text: var(--global-palette7);
	background: var(--we-fuss-grund);
	color: var(--we-fuss-text);
}
#colophon .site-middle-footer-wrap {
	padding-top: 1.5rem;
}
#colophon .site-middle-footer-inner-wrap,
#colophon .site-bottom-footer-inner-wrap {
	padding-top: 1rem;
	padding-bottom: 1rem;
}
#colophon .site-bottom-footer-wrap {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* Kadence setzt die Footer-Menüfarbe per Inline-CSS mit hoher Spezifität
   (palette5, mittleres Grau), auf dem dunklen Footer kaum lesbar. */
#colophon a,
#colophon .footer-html,
#colophon .footer-navigation .footer-menu-container > ul > li > a {
	color: var(--we-fuss-text);
}
#colophon a:hover,
#colophon .footer-navigation .footer-menu-container > ul li a:hover {
	color: var(--global-palette2);
}
/* Kadence färbt den aktiven Menüpunkt dunkel (palette3), auf dem dunklen
   Footer unsichtbar. Aktiv = weiß und fett. */
#colophon .footer-navigation .footer-menu-container > ul li.current-menu-item > a,
#colophon .footer-navigation .footer-menu-container > ul li.current_page_item > a {
	color: #fff;
	font-weight: 600;
}
/* Untere Zeile: Copyright und Farbmodus-Schalter nebeneinander, alles auf
   einer Mittellinie mit dem Footer-Menü rechts; mobil untereinander, mittig */
#colophon .site-bottom-footer-inner-wrap {
	align-items: center;
}
#colophon .site-info-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1.4rem;
}
#colophon .footer-html p {
	margin: 0;
}
@media (max-width: 1024px) {
	#colophon .site-info-inner {
		flex-direction: column;
		margin-bottom: 1.2rem;
	}
}
/* Social-Icons: runde 44-px-Knöpfe (Kadence-Standard sind ~16 px nackte Icons,
   auf Desktop winzig, mobil unter der Mindestgröße für Fingertipps) */
#colophon .footer-social-wrap .footer-social-inner-wrap {
	gap: 12px;
}
#colophon .site-footer-section .footer-social-wrap .footer-social-inner-wrap .social-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	font-size: 20px;
	color: var(--we-fuss-text);
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 50%;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
#colophon .site-footer-section .footer-social-wrap .footer-social-inner-wrap .social-button:hover {
	color: #fff;
	border-color: var(--global-palette2);
	background: var(--global-palette2);
}

/* Abstand zwischen Kartengrid und „Alle Wanderungen" (Kadence setzt keinen
   Blockabstand zwischen Query-Block und Buttons). */
.we-neueste + .wp-block-buttons {
	margin-top: 2.5rem;
}

/* ---- Dark Mode -------------------------------------------------------------
   Umschalter und Skript: Plugin wandererde-site (includes/farbmodus.php).
   Es setzt <html data-farbe="dunkel">. Kadence holt fast alle Farben aus den
   neun Palettenfarben, darum reicht hier im Kern eine dunkle Palette in
   denselben Rollen (3 = Überschriften, 4/5 = Text, 7 = Flächen/Linien,
   8 = Seitenhintergrund, 9 = Inhaltsfläche). Danach nur, was feste Farben hat. */
html[data-farbe="dunkel"] {
	color-scheme: dark;
	--global-palette1: #6fb6ee;
	--global-palette2: #62c168;
	--global-palette3: #edf3ef;
	--global-palette4: #d5dfda;
	--global-palette5: #a9b7b0;
	--global-palette6: #7b8a84;
	--global-palette7: #26322e;
	--global-palette8: #111916;
	--global-palette9: #19231f;
	--we-glas: rgba(25, 35, 31, 0.6);
	--we-glas-dicht: rgba(25, 35, 31, 0.82);
	--we-glas-kante: rgba(255, 255, 255, 0.1);
	--we-glas-schatten: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}
/* Footer bleibt eine Stufe dunkler als die Seite */
html[data-farbe="dunkel"] #colophon {
	--we-fuss-grund: #0a0f0d;
	--we-fuss-text: #c3cfc9;
}
/* Logo: „erde“ ist dunkelblau, auf Dunkel kaum lesbar. Aufhellen per CSS,
   bis es eine helle Logo-Variante gibt. */
html[data-farbe="dunkel"] .custom-logo {
	filter: brightness(1.3) saturate(0.85) drop-shadow(0 0 1px rgba(255, 255, 255, 0.25));
}
/* Hover-Blasen im Menü: hell statt dunkel getönt */
html[data-farbe="dunkel"] #masthead .header-navigation .header-menu-container > ul > li > a:hover,
html[data-farbe="dunkel"] #masthead .header-navigation .header-menu-container > ul > li:hover > a,
html[data-farbe="dunkel"] #masthead .header-navigation .header-menu-container ul ul li.menu-item > a:hover {
	background: rgba(255, 255, 255, 0.08);
}
html[data-farbe="dunkel"] #masthead .header-navigation .header-menu-container > ul > li.current-menu-item > a,
html[data-farbe="dunkel"] #masthead .header-navigation .header-menu-container > ul > li.current-menu-ancestor > a,
html[data-farbe="dunkel"] #masthead .header-navigation .header-menu-container ul ul li.menu-item.current-menu-item > a {
	background: rgba(98, 193, 104, 0.2);
}
/* Suchfeld im Hero */
html[data-farbe="dunkel"] .we-hero-suche .wp-block-search__inside-wrapper {
	background: var(--global-palette9);
}
/* Karten und Schatten: auf Dunkel trägt ein Schatten kaum, eine feine Kante schon */
html[data-farbe="dunkel"] .we-neueste .wp-block-post,
html[data-farbe="dunkel"] article.content-bg.single-entry {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 2px 14px rgba(0, 0, 0, 0.3);
}
/* Fotos minimal zurücknehmen, damit sie nicht blenden */
html[data-farbe="dunkel"] .entry-content img:not(.custom-logo),
html[data-farbe="dunkel"] .wp-block-post-featured-image img {
	filter: brightness(0.92);
}
/* wpDiscuz-Bewertung: weißer Kreis mit grauer Zahl (feste Plugin-Farben) */
html[data-farbe="dunkel"] #wpd-post-rating .wpd-rating-wrap .wpd-rating-value {
	background-color: var(--global-palette7);
	border-color: var(--global-palette6);
}
html[data-farbe="dunkel"] #wpd-post-rating .wpd-rating-wrap .wpd-rating-value span {
	color: var(--global-palette3);
}