/*
Theme Name: Helden.Training
Theme URI: https://helden.training/
Author: Tom Schnorrenberg
Author URI: https://cormag.eu/
Description: Schlankes Theme für helden.training, abgestimmt auf die Plugins „Splittermond Charaktergenerator“ und „Splittermond Soloabenteuer“ sowie NeoUser/NeoChat. Gleiche Farben, Schriften und Hell/Dunkel-Schalter wie der Charaktergenerator. Kein Page-Builder, keine externen Dienste, lokale Schriften, WCAG 2.1 AA.
Version: 1.0.3
Requires at least: 6.2
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: helden-training
Tags: blog, accessibility-ready, one-column, two-columns, right-sidebar, custom-logo, custom-menu, dark-mode
*/

/* ==========================================================================
   Inhalt
   1. Gestaltungswerte (gleiche Werte wie --smcg-* im Charaktergenerator)
   2. Grundlagen
   3. Gerüst
   4. Kopf und Navigation
   5. Seitenkopf
   6. Inhalt (Blöcke, Formulare)
   7. Karten, Raster, Blättern, Kommentare
   8. Startseite (Block-Muster)
   9. Seitenvorlagen: Anwendung, Konto, Rechtstext
   10. Fuß
   11. Plugins (SMCG, Solo, NeoUser, NeoChat)
   12. Divi-Reste
   13. Mauszeiger-Set
   14. Druck
   ========================================================================== */

/* ==========================================================================
   1. Gestaltungswerte
   ========================================================================== */

:root {
	--ht-seite:         #f4f8fc;  /* Seitenhintergrund, Hauch Blau */
	--ht-seite-rand:    #d8e6f3;  /* Hellblau am Rand (wie --smcg-bg-edge) */
	--ht-flaeche:       #ffffff;  /* Karten, Kopf */
	--ht-flaeche-2:     #eef4fa;
	--ht-schale:        rgba(29, 78, 134, 0.06);

	--ht-text:          #182433;
	--ht-text-2:        #45596b;
	--ht-ueberschrift:  #1c4e86;
	--ht-akzent:        #245f9c;
	--ht-akzent-2:      #2f76bd;
	--ht-auf-akzent:    #ffffff;
	--ht-zweitfarbe:    #6f6456;  /* Graubraun */

	--ht-linie:         rgba(29, 78, 134, 0.18);
	--ht-linie-stark:   rgba(29, 78, 134, 0.38);
	--ht-feldrand:      rgba(29, 78, 134, 0.62); /* ≥ 3:1 (WCAG 1.4.11) */
	--ht-hover:         rgba(47, 118, 189, 0.10);
	--ht-fokus:         #245f9c;

	--ht-fuss:          #13314f;
	--ht-fuss-text:     #e6eef6;
	--ht-fuss-link:     #a3cbf0;

	--ht-gefahr:        #a32b22;
	--ht-erfolg:        #3f7a44;

	--ht-schatten:      0 16px 40px -18px rgba(20, 40, 70, 0.28);
	--ht-schatten-klein: 0 4px 14px -6px rgba(20, 40, 70, 0.22);
	--ht-innen:         inset 0 1px 0 rgba(255, 255, 255, 0.6);

	--ht-r-gross: 22px;
	--ht-r-mittel: 16px;
	--ht-r-klein: 10px;

	--ht-display: "Cinzel", "Trajan Pro", Georgia, serif;
	--ht-zier:    "Cormorant Garamond", Georgia, serif;
	--ht-schrift: "Crimson Pro", Georgia, "Times New Roman", serif;

	--ht-breite:      1200px;
	--ht-breite-app:  1440px;
	--ht-lesebreite:  44rem;
	--ht-rand:        clamp(1rem, 3vw, 2rem);
	--ht-kopf-h:      0px;   /* setzt theme.js; nur am Rechner > 0 */

	--ht-kurve: cubic-bezier(0.32, 0.72, 0, 1);
	--ht-dauer: 0.35s;

	color-scheme: light;
}

/* Dunkel – nur per Schalter (gleicher Speicher wie der Charaktergenerator). */
html.ht-dunkel {
	--ht-seite:         #0a111a;
	--ht-seite-rand:    #060c14;
	--ht-flaeche:       #0e1620;
	--ht-flaeche-2:     #182838;
	--ht-schale:        rgba(120, 170, 220, 0.06);

	--ht-text:          #dce8f2;
	--ht-text-2:        #9fb4c6;
	--ht-ueberschrift:  #8fc1ee;
	--ht-akzent:        #79b4e8;
	--ht-akzent-2:      #a3cbf0;
	--ht-auf-akzent:    #08131f;
	--ht-zweitfarbe:    #b3a48f;

	--ht-linie:         rgba(120, 170, 220, 0.18);
	--ht-linie-stark:   rgba(120, 170, 220, 0.40);
	--ht-feldrand:      rgba(120, 170, 220, 0.62);
	--ht-hover:         rgba(77, 147, 214, 0.16);
	--ht-fokus:         #a3cbf0;

	--ht-fuss:          #060c14;
	--ht-fuss-text:     #c9d8e6;
	--ht-fuss-link:     #a3cbf0;

	--ht-gefahr:        #e0857c;
	--ht-erfolg:        #7fae84;

	--ht-schatten:      0 18px 50px -20px rgba(0, 5, 12, 0.7);
	--ht-schatten-klein: 0 4px 14px -6px rgba(0, 5, 12, 0.6);
	--ht-innen:         inset 0 1px 0 rgba(255, 255, 255, 0.06);

	color-scheme: dark;
}

/* ==========================================================================
   2. Grundlagen
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	/* Sprungziele nicht unter dem klebenden Kopf verstecken. */
	scroll-padding-top: calc(var(--ht-kopf-h) + 1rem);
}

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	color: var(--ht-text);
	background-color: var(--ht-seite);
	/* Weiß oben in der Mitte, weich zum hellblauen Rand – wie das Portal. */
	background-image: radial-gradient(130% 70% at 50% 0%, var(--ht-flaeche) 40%, transparent 100%);
	background-repeat: no-repeat;
	font-family: var(--ht-schrift);
	font-size: 1.125rem; /* 18 px */
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Lange deutsche Wörter in Theme-Texten umbrechen (320 px, Zoom 400 %).
   Nicht am <body>: sonst erbt es das Portal und bricht dort Überschriften
   mitten im Wort. */
.ht-seitenkopf,
.ht-lesespalte,
.ht-karte,
.ht-kachel,
.ht-aufruf,
.ht-held,
.ht-fuss,
.ht-leiste {
	overflow-wrap: break-word;
	hyphens: auto;
}
.ht-seitenkopf h1,
.ht-held h1 { hyphens: manual; }

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--ht-akzent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}
a:hover {
	color: var(--ht-ueberschrift);
	text-decoration-thickness: 2px;
}

:where(h1, h2, h3, h4, h5, h6):not(:where(.smcg, .neo-wrap, .nu-wrap, #wpadminbar) *) {
	font-family: var(--ht-display);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: 0.01em;
	color: var(--ht-ueberschrift);
	margin: 1.6em 0 0.5em;
}
h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h2 { font-size: clamp(1.45rem, 3vw, 2.05rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
h4 { font-size: 1.1rem; }
h5, h6 { font-size: 1rem; }

:where(p, ul, ol, dl, blockquote, figure, table, pre):not(:where(.smcg, .neo-wrap, .nu-wrap, #wpadminbar) *) {
	margin: 0 0 1.1em;
}

/* Fokus: immer per outline, nie nur per Schatten (sonst unsichtbar im
   Windows-Kontrastmodus). */
:focus-visible {
	outline: 3px solid var(--ht-fokus);
	outline-offset: 2px;
}
:focus:not(:focus-visible) {
	outline: none;
}

::selection {
	background: var(--ht-akzent);
	color: var(--ht-auf-akzent);
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	background: var(--ht-flaeche);
	clip: auto !important;
	clip-path: none;
	color: var(--ht-text);
	display: block;
	height: auto;
	left: 5px;
	padding: 1rem 1.5rem;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Sprungmarke: erscheint bei Tastaturfokus oben links, über allem. */
.ht-sprungmarke {
	position: absolute;
	left: 1rem;
	top: -10rem;
	z-index: 1000002;
	padding: 0.75rem 1.25rem;
	border-radius: var(--ht-r-klein);
	background: var(--ht-akzent);
	color: var(--ht-auf-akzent);
	font-weight: 600;
	text-decoration: none;
	box-shadow: var(--ht-schatten);
}
.ht-sprungmarke:focus {
	top: 1rem;
	color: var(--ht-auf-akzent);
}
.admin-bar .ht-sprungmarke:focus { top: calc(32px + 1rem); }

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   3. Gerüst
   ========================================================================== */

.ht-container {
	width: 100%;
	max-width: calc(var(--ht-breite) + 2 * var(--ht-rand));
	margin-inline: auto;
	padding-inline: var(--ht-rand);
}

.ht-inhalt {
	flex: 1 0 auto;
	padding-block: clamp(1.5rem, 4vw, 3.5rem);
}
.ht-inhalt:focus { outline: none; } /* Ziel der Sprungmarke */

/* Blog mit Seitenleiste ab 1024 px. */
.ht-mit-leiste {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
}
.ht-mit-leiste > * { min-width: 0; }
@media (min-width: 1024px) {
	.ht-mit-leiste.hat-leiste {
		grid-template-columns: minmax(0, 1fr) 18rem;
	}
}

.ht-leiste {
	font-size: 1rem;
}
.ht-leiste .widget {
	background: var(--ht-flaeche);
	border: 1px solid var(--ht-linie);
	border-radius: var(--ht-r-mittel);
	padding: 1.25rem;
	margin-bottom: 1.5rem;
	box-shadow: var(--ht-schatten-klein);
}
.ht-leiste .widget > :last-child { margin-bottom: 0; }.ht-leiste h2,
.ht-leiste .widget-title,
.ht-leiste .wp-block-heading {
	font-size: 1.05rem;
	margin-top: 0;
}
.ht-leiste ul {
	list-style: none;
	padding: 0;
}
.ht-leiste li {
	padding: 0.35rem 0;
	border-bottom: 1px solid var(--ht-linie);
}
.ht-leiste li:last-child { border-bottom: 0; }

/* ==========================================================================
   4. Kopf und Navigation
   Der Kopf trägt die Klasse .site-header: Die Plugins messen damit feste/
   klebende Kopfleisten und lassen ihre eigenen Leisten darunter kleben.
   ========================================================================== */

.ht-kopf {
	position: relative;
	z-index: 900; /* unter allen Plugin-Dialogen (999999 / Top-Layer) */
	background: var(--ht-flaeche);
	border-bottom: 1px solid var(--ht-linie);
	box-shadow: 0 1px 0 var(--ht-schale);
}

/* Am Rechner klebt der Kopf, am Handy läuft er mit (Entscheidung 2). */
@media (min-width: 782px) {
	.ht-kopf {
		position: sticky;
		top: 0;
	}
	.admin-bar .ht-kopf { top: 32px; }
}

.ht-kopf__innen {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 4rem;
	max-width: calc(var(--ht-breite-app) + 2 * var(--ht-rand));
}

.ht-marke {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	margin-right: auto;
	padding: 0.35rem 0;
	color: var(--ht-ueberschrift);
	font-family: var(--ht-display);
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
	white-space: nowrap;
}
.ht-marke:hover { color: var(--ht-akzent); }
@media (max-width: 480px) {
	.ht-marke { font-size: 1.02rem; letter-spacing: 0.02em; gap: 0.5rem; }
	.ht-nav__schalter { padding-inline: 0.65rem; }
}
.ht-marke__logo {
	display: block;
	width: auto;
	max-height: 2.75rem;
}
.ht-marke__edelstein {
	width: 0.6rem;
	height: 0.6rem;
	transform: rotate(45deg);
	background: var(--ht-akzent-2);
	box-shadow: 0 0 10px rgba(47, 118, 189, 0.45);
	flex: none;
}

/* ---- Hell/Dunkel ---- */
.ht-modus,
.ht-nav__schalter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	min-width: 2.75rem;
	min-height: 2.75rem; /* Zielgröße ≥ 44 px */
	padding: 0.4rem 0.7rem;
	border: 1px solid var(--ht-linie-stark);
	border-radius: 999px;
	background: transparent;
	color: var(--ht-text);
	font: inherit;
	font-size: 1rem;
	cursor: pointer;
	transition: background-color var(--ht-dauer) var(--ht-kurve), border-color var(--ht-dauer) var(--ht-kurve);
}
.ht-modus:hover,
.ht-nav__schalter:hover {
	background: var(--ht-hover);
	border-color: var(--ht-akzent);
	color: var(--ht-akzent);
}
.ht-modus svg,
.ht-nav__schalter svg {
	width: 1.25rem;
	height: 1.25rem;
	flex: none;
}
.ht-modus .ht-modus__mond { display: none; }
html.ht-dunkel .ht-modus .ht-modus__sonne { display: none; }
html.ht-dunkel .ht-modus .ht-modus__mond { display: block; }

/* ---- Hauptmenü ---- */
.ht-nav__liste,
.ht-nav__liste ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ht-nav__liste a {
	display: block;
	color: var(--ht-text);
	text-decoration: none;
	font-family: var(--ht-display);
	font-size: 0.95rem;
	letter-spacing: 0.04em;
}
.ht-nav__liste a:hover { color: var(--ht-akzent); }
.ht-nav__liste .current-menu-item > a,
.ht-nav__liste .current_page_item > a,
.ht-nav__liste .current-menu-ancestor > a {
	color: var(--ht-ueberschrift);
	font-weight: 700;
}

/* Knopf zum Aufklappen eines Untermenüs (setzt theme.js ein). */
.ht-nav__auf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: var(--ht-r-klein);
	background: transparent;
	color: var(--ht-text);
	cursor: pointer;
}
.ht-nav__auf:hover { background: var(--ht-hover); color: var(--ht-akzent); }
.ht-nav__auf::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--ht-dauer) var(--ht-kurve);
}
.ht-nav__auf[aria-expanded="true"]::before {
	transform: translateY(2px) rotate(-135deg);
}

/* Handy: Menü als Klappliste unter dem Kopf. */
@media (max-width: 1023.98px) {
	.ht-kopf__innen { gap: 0.5rem; }
	.ht-marke { min-width: 0; }
	.ht-marke__name { overflow: hidden; text-overflow: ellipsis; }
	.ht-modus { order: 2; }
	.ht-nav { order: 3; }

	.ht-js .ht-nav__liste {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		max-height: calc(100vh - 5rem);
		overflow-y: auto;
		padding: 0.5rem var(--ht-rand) 1.25rem;
		background: var(--ht-flaeche);
		border-bottom: 1px solid var(--ht-linie);
		box-shadow: var(--ht-schatten);
	}
	.ht-menue-offen .ht-nav__liste { display: block; }
	/* Offenes Menü liegt auch über den festen Leisten der Plugins am Handy. */
	.ht-menue-offen .ht-kopf { z-index: 1000001; }

	/* Ohne JavaScript: Menü offen unter dem Kopf. */
	html:not(.ht-js) .ht-kopf__innen { flex-wrap: wrap; }
	html:not(.ht-js) .ht-nav { flex-basis: 100%; }
	html:not(.ht-js) .ht-nav__schalter { display: none; }

	.ht-nav__liste li {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		border-bottom: 1px solid var(--ht-linie);
	}
	.ht-nav__liste li:last-child { border-bottom: 0; }
	.ht-nav__liste a {
		flex: 1;
		padding: 0.8rem 0;
		font-size: 1.05rem;
	}
	.ht-nav__liste .sub-menu {
		flex-basis: 100%;
		padding-left: 1rem;
		border-left: 2px solid var(--ht-linie);
		margin-bottom: 0.5rem;
	}
	.ht-js .ht-nav__liste .sub-menu { display: none; }
	.ht-js .ht-nav__liste .is-offen > .sub-menu { display: block; }
	.ht-nav__liste .sub-menu li { border-bottom: 0; }
	.ht-nav__liste .sub-menu a { padding: 0.55rem 0; font-size: 1rem; }
}

/* Rechner: Menü in der Zeile, Untermenüs als Klapptafel. */
@media (min-width: 1024px) {
	.ht-nav__schalter { display: none; }
	.ht-nav__liste {
		display: flex;
		align-items: center;
		gap: 0.25rem;
	}
	.ht-nav__liste > li {
		position: relative;
		display: flex;
		align-items: center;
	}
	.ht-nav__liste > li > a {
		padding: 0.6rem 0.75rem;
		border-radius: var(--ht-r-klein);
	}
	.ht-nav__liste > li > a:hover { background: var(--ht-hover); }
	.ht-nav__liste > .menu-item-has-children > a { padding-right: 0.25rem; }
	.ht-nav__liste > li > .ht-nav__auf { width: 2rem; }
	.ht-nav__liste > .current-menu-item > a::after,
	.ht-nav__liste > .current-menu-ancestor > a::after,
	.ht-nav__liste > .current_page_item > a::after {
		content: "";
		display: block;
		height: 2px;
		margin-top: 0.15rem;
		border-radius: 2px;
		background: var(--ht-akzent);
	}

	.ht-nav__liste .sub-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 15rem;
		padding: 0.5rem;
		background: var(--ht-flaeche);
		border: 1px solid var(--ht-linie);
		border-radius: var(--ht-r-mittel);
		box-shadow: var(--ht-schatten);
	}
	.ht-nav__liste .is-offen > .sub-menu,
	html:not(.ht-js) .ht-nav__liste li:focus-within > .sub-menu { display: block; }
	@media (hover: hover) {
		.ht-nav__liste li:not(.ht-hover-aus):hover > .sub-menu { display: block; }
	}
	.ht-nav__liste .sub-menu a {
		padding: 0.55rem 0.75rem;
		border-radius: var(--ht-r-klein);
		font-size: 0.92rem;
		white-space: nowrap;
	}
	.ht-nav__liste .sub-menu a:hover { background: var(--ht-hover); }
	.ht-nav__liste .sub-menu .ht-nav__auf { display: none; }
	.ht-nav__liste .sub-menu .sub-menu {
		position: static;
		display: block;
		border: 0;
		box-shadow: none;
		padding: 0 0 0 0.75rem;
	}
}

/* ==========================================================================
   5. Seitenkopf
   ========================================================================== */

.ht-seitenkopf {
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.ht-seitenkopf--mitte { text-align: center; }
.ht-seitenkopf h1,
.ht-seitenkopf .ht-seitenkopf__titel {
	margin: 0 0 0.35em;
}
.ht-seitenkopf__beschreibung {
	color: var(--ht-text-2);
	max-width: var(--ht-lesebreite);
}
.ht-seitenkopf--mitte .ht-seitenkopf__beschreibung { margin-inline: auto; }
.ht-seitenkopf__beschreibung > :last-child { margin-bottom: 0; }

/* Kleine Zierzeile über Titeln (wie .smcg-eyebrow). */
.ht-zierzeile {
	display: inline-block;
	margin-bottom: 0.75rem;
	padding: 0.25rem 0.85rem;
	border: 1px solid var(--ht-linie-stark);
	border-radius: 999px;
	color: var(--ht-zweitfarbe);
	font-family: var(--ht-schrift);
	font-size: 0.78rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-decoration: none;
}
a.ht-zierzeile:hover { border-color: var(--ht-akzent); color: var(--ht-akzent); }

/* Trennlinie mit Edelstein (wie .smcg-rule). */
.ht-trenner {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	max-width: 22rem;
	margin: 1.25rem auto;
}
/* Gleiches als Block-Stil des Trenners (<hr>): Linie als Hintergrund,
   Edelstein als ::after. */
.wp-block-separator.is-style-ht-edelstein,
.ht-lesespalte .wp-block-separator.is-style-ht-edelstein {
	position: relative;
	max-width: 22rem;
	height: 9px;
	margin: clamp(1.5rem, 4vw, 3rem) auto;
	border: 0;
	background: linear-gradient(90deg, transparent, var(--ht-linie-stark), transparent) center / 100% 1px no-repeat;
	opacity: 1;
	overflow: visible;
}
.wp-block-separator.is-style-ht-edelstein::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 9px;
	height: 9px;
	transform: translate(-50%, -50%) rotate(45deg);
	background: var(--ht-akzent-2);
	box-shadow: 0 0 12px rgba(47, 118, 189, 0.4);
}
.ht-trenner::before,
.ht-trenner::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--ht-linie-stark), transparent);
}
.ht-trenner__edelstein {
	width: 9px;
	height: 9px;
	transform: rotate(45deg);
	background: var(--ht-akzent-2);
	box-shadow: 0 0 12px rgba(47, 118, 189, 0.4);
}
.ht-seitenkopf:not(.ht-seitenkopf--mitte) .ht-trenner { margin-left: 0; }

.ht-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	color: var(--ht-text-2);
	font-size: 0.95rem;
}

/* ==========================================================================
   6. Inhalt
   ========================================================================== */

.ht-lesespalte {
	max-width: var(--ht-lesebreite);
	margin-inline: auto;
}

.entry-content > * { margin-top: 0; }
.entry-content > :first-child { margin-top: 0; }
.entry-content > :last-child { margin-bottom: 0; }
.entry-content h2,
.entry-content h3,
.entry-content h4 { scroll-margin-top: calc(var(--ht-kopf-h) + 1rem); }

/* Ausbrechen aus der Lesespalte (Block-Ausrichtung „weit“ / „volle Breite“). */
.ht-lesespalte .alignwide {
	margin-inline: calc(50% - min(50vw - var(--ht-rand), var(--ht-breite) / 2));
	max-width: none;
}
.ht-lesespalte .alignfull {
	margin-inline: calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
}
.alignleft { float: left; margin: 0.3em 1.5em 1em 0; }
.alignright { float: right; margin: 0.3em 0 1em 1.5em; }
.aligncenter { margin-inline: auto; }
@media (max-width: 600px) {
	.alignleft, .alignright { float: none; margin-inline: 0; }
}

.entry-content ul,
.entry-content ol { padding-left: 1.4em; }
.entry-content li { margin-bottom: 0.3em; }
.entry-content li > ul,
.entry-content li > ol { margin: 0.3em 0 0; }

/*
 * Element-Stile (Zitat, Code, Tabelle, Trenner, Formularfelder) gelten nicht
 * in den Plugin-Bereichen: Charaktergenerator/Solo (.smcg), NeoUser/NeoChat
 * (.neo-wrap, .nu-wrap) und Adminleiste bringen eigene Stile mit. Muster:
 * :where(element):not(:where(Plugin-Bereich) *) – Spezifität 0, Plugin-
 * Klassen gewinnen also immer.
 */
:where(blockquote):not(:where(.smcg, .neo-wrap, .nu-wrap, #wpadminbar) *),
.wp-block-quote {
	margin-inline: 0;
	padding: 0.6rem 0 0.6rem 1.4rem;
	border-left: 3px solid var(--ht-akzent-2);
	font-family: var(--ht-zier);
	font-size: 1.3rem;
	font-style: italic;
	color: var(--ht-text);
}
:where(blockquote cite):not(:where(.smcg, .neo-wrap, .nu-wrap, #wpadminbar) *),
.wp-block-quote cite {
	display: block;
	margin-top: 0.4rem;
	font-family: var(--ht-schrift);
	font-size: 0.95rem;
	font-style: normal;
	color: var(--ht-text-2);
}
.wp-block-pullquote {
	border-top: 2px solid var(--ht-linie-stark);
	border-bottom: 2px solid var(--ht-linie-stark);
	padding: 1.5rem 0;
}

:where(figcaption):not(:where(.smcg, .neo-wrap, .nu-wrap, #wpadminbar) *),
.wp-element-caption,
.wp-caption-text {
	margin-top: 0.4rem;
	color: var(--ht-text-2);
	font-size: 0.92rem;
	text-align: center;
}
.wp-block-image img { border-radius: var(--ht-r-klein); }

:where(code, kbd, pre, samp):not(:where(.smcg, .neo-wrap, .nu-wrap, #wpadminbar) *) {
	font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
	font-size: 0.88em;
}
:where(code):not(:where(.smcg, .neo-wrap, .nu-wrap, #wpadminbar) *) {
	padding: 0.1em 0.35em;
	border-radius: 6px;
	background: var(--ht-flaeche-2);
}
:where(pre):not(:where(.smcg, .neo-wrap, .nu-wrap, #wpadminbar) *) {
	overflow-x: auto;
	padding: 1rem 1.25rem;
	border: 1px solid var(--ht-linie);
	border-radius: var(--ht-r-klein);
	background: var(--ht-flaeche-2);
}
:where(pre code):not(:where(.smcg, .neo-wrap, .nu-wrap, #wpadminbar) *) { padding: 0; background: none; }

:where(table):not(:where(.smcg, .neo-wrap, .nu-wrap, #wpadminbar) *) {
	width: 100%;
	border-collapse: collapse;
	font-size: 1rem;
}
:where(th, td):not(:where(.smcg, .neo-wrap, .nu-wrap, #wpadminbar) *) {
	padding: 0.55rem 0.7rem;
	border-bottom: 1px solid var(--ht-linie);
	text-align: left;
	vertical-align: top;
}
:where(th):not(:where(.smcg, .neo-wrap, .nu-wrap, #wpadminbar) *) {
	font-family: var(--ht-display);
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	color: var(--ht-ueberschrift);
}
.wp-block-table { overflow-x: auto; }

:where(hr):not(:where(.smcg, .neo-wrap, .nu-wrap, #wpadminbar) *),
.wp-block-separator {
	border: 0;
	height: 1px;
	margin: 2rem auto;
	background: var(--ht-linie-stark);
}

/* ---- Knöpfe (wie .smcg-btn) ---- */
.ht-knopf,
.wp-block-button__link,
.wp-element-button,
button.ht-knopf,
:where(input[type="submit"]):not(:where(.smcg, .neo-wrap, .nu-wrap, #wpadminbar) *),
.search-submit,
.comment-form .submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 2.75rem;
	padding: 0.7rem 1.4rem;
	border: 1px solid var(--ht-akzent);
	border-radius: 999px;
	background: linear-gradient(180deg, var(--ht-akzent-2), var(--ht-akzent));
	color: var(--ht-auf-akzent);
	font-family: var(--ht-display);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--ht-dauer) var(--ht-kurve), background var(--ht-dauer) var(--ht-kurve);
}
.ht-knopf:hover,
.wp-block-button__link:hover,
.wp-element-button:hover,
:where(input[type="submit"]):not(:where(.smcg, .neo-wrap, .nu-wrap, #wpadminbar) *):hover,
.search-submit:hover,
.comment-form .submit:hover {
	background: var(--ht-akzent-2);
	color: var(--ht-auf-akzent);
	text-decoration: none;
}
.ht-knopf:active,
.wp-block-button__link:active { transform: scale(0.98); }
.ht-knopf:focus-visible,
.wp-block-button__link:focus-visible { outline-offset: 3px; }

/* Zweitknopf: weiß mit Rand (Block-Stil „Kontur“ und .ht-knopf--zweit). */
.ht-knopf--zweit,
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: var(--ht-flaeche);
	border-color: var(--ht-linie-stark);
	color: var(--ht-ueberschrift);
}
.ht-knopf--zweit:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--ht-hover);
	border-color: var(--ht-akzent);
	color: var(--ht-akzent);
}
.wp-block-buttons { gap: 0.75rem; }

/* ---- Formulare ---- */
:where(input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="date"], textarea, select):not(:where(.smcg, .neo-wrap, .nu-wrap, #wpadminbar) *) {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--ht-feldrand);
	border-radius: var(--ht-r-klein);
	background: var(--ht-flaeche);
	color: var(--ht-text);
	font: inherit;
	font-size: 1rem;
}
:where(textarea):not(:where(.smcg, .neo-wrap, .nu-wrap, #wpadminbar) *) { min-height: 8rem; }
:where(label):not(:where(.smcg, .neo-wrap, .nu-wrap, #wpadminbar) *) { font-weight: 600; }

.search-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.5rem;
	max-width: 32rem;
	margin-bottom: 1.5rem;
}
.ht-suche-oben { margin-bottom: 1rem; }
.search-form label {
	flex: 1 1 14rem;
	font-weight: 400;
}
.search-form .search-field { width: 100%; }

/* ==========================================================================
   7. Karten, Raster, Blättern, Kommentare
   ========================================================================== */

.ht-raster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
	gap: clamp(1rem, 2.5vw, 1.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Karte mit Doppelrand (wie .smcg-card). Die ganze Karte ist über den
   Titel-Link klickbar (Pseudo-Element), Tab landet nur einmal pro Karte. */
.ht-karte {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 6px;
	border: 1px solid var(--ht-linie);
	border-radius: var(--ht-r-gross);
	background: var(--ht-schale);
	box-shadow: var(--ht-schatten);
	transition: transform var(--ht-dauer) var(--ht-kurve);
}
.ht-karte:hover { transform: translateY(-2px); }
.ht-karte__innen {
	display: flex;
	flex-direction: column;
	flex: 1;
	overflow: hidden;
	border: 1px solid var(--ht-linie);
	border-radius: calc(var(--ht-r-gross) - 6px);
	background: linear-gradient(180deg, var(--ht-flaeche), var(--ht-flaeche-2));
	box-shadow: var(--ht-innen);
}
.ht-karte__bild {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--ht-flaeche-2);
}
.ht-karte__bild img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ht-karte__text {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.1rem 1.25rem 1.25rem;
}
.ht-karte__titel {
	margin: 0 0 0.4rem;
	font-size: 1.2rem;
}
.ht-karte__titel a {
	color: var(--ht-ueberschrift);
	text-decoration: none;
}
.ht-karte__titel a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--ht-r-gross);
}
.ht-karte__titel a:focus-visible { outline: none; }
.ht-karte:has(.ht-karte__titel a:focus-visible) {
	outline: 3px solid var(--ht-fokus);
	outline-offset: 3px;
}
.ht-karte__auszug {
	margin: 0.4rem 0 0;
	color: var(--ht-text-2);
	font-size: 1rem;
}
.ht-karte__auszug p { margin: 0; }
.ht-karte .ht-zierzeile {
	position: relative;
	z-index: 1; /* Kategorie-Link über dem Karten-Link */
	align-self: flex-start;
	margin-bottom: 0.6rem;
	font-size: 0.7rem;
}
.ht-karte .ht-meta { font-size: 0.88rem; margin-top: auto; padding-top: 0.6rem; }

/* Einzelbeitrag */
.ht-beitrag__bild {
	margin-top: 0;
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
	overflow: hidden;
	border: 1px solid var(--ht-linie);
	border-radius: var(--ht-r-gross);
	box-shadow: var(--ht-schatten);
}
.ht-beitrag__bild img { display: block; width: 100%; }

.ht-blatt {
	padding: clamp(1.25rem, 4vw, 3rem);
	border: 1px solid var(--ht-linie);
	border-radius: var(--ht-r-gross);
	background: var(--ht-flaeche);
	box-shadow: var(--ht-schatten);
}

.ht-schlagworte {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 2rem;
	padding: 0;
	list-style: none;
}
.ht-schlagworte a {
	display: inline-block;
	padding: 0.2rem 0.75rem;
	border: 1px solid var(--ht-linie-stark);
	border-radius: 999px;
	font-size: 0.9rem;
	text-decoration: none;
}

.ht-weiter {
	margin-top: clamp(2.5rem, 5vw, 4rem);
}
.ht-weiter > h2 { margin-top: 0; }

/* Vor/Zurück und Seitenzahlen */
.post-navigation .nav-links,
.ht-blaettern .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: space-between;
	margin-top: 2rem;
}
.post-navigation a {
	display: block;
	max-width: 22rem;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--ht-linie);
	border-radius: var(--ht-r-mittel);
	background: var(--ht-flaeche);
	text-decoration: none;
}
.post-navigation .nav-next { margin-left: auto; text-align: right; }
.post-navigation .ht-blaettern__richtung {
	display: block;
	color: var(--ht-text-2);
	font-size: 0.85rem;
}
.ht-blaettern .nav-links { justify-content: center; }
.ht-blaettern .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 0.6rem;
	border: 1px solid var(--ht-linie-stark);
	border-radius: 999px;
	background: var(--ht-flaeche);
	text-decoration: none;
}
.ht-blaettern .page-numbers.current {
	background: var(--ht-akzent);
	border-color: var(--ht-akzent);
	color: var(--ht-auf-akzent);
	font-weight: 700;
}

/* Kommentare */
.ht-kommentare { margin-top: clamp(2.5rem, 5vw, 4rem); }
.ht-kommentare .comment-list { list-style: none; padding: 0; }
.ht-kommentare .comment-list .children { list-style: none; padding-left: clamp(1rem, 4vw, 2.5rem); }
.ht-kommentare .comment-body {
	margin-bottom: 1rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--ht-linie);
	border-radius: var(--ht-r-mittel);
	background: var(--ht-flaeche);
}
.ht-kommentare .comment-meta { font-size: 0.92rem; color: var(--ht-text-2); }
.ht-kommentare .comment-author img { border-radius: 50%; vertical-align: middle; margin-right: 0.5rem; }
.ht-kommentare .comment-form p { margin-bottom: 1rem; }
.ht-kommentare .comment-form label { display: block; margin-bottom: 0.25rem; }
.ht-kommentare .comment-form-cookies-consent label { display: inline; font-weight: 400; }

/* ==========================================================================
   8. Startseite (Block-Muster „Startseite helden.training“)
   ========================================================================== */

.ht-start .entry-content > * {
	max-width: var(--ht-breite);
	margin-inline: auto;
}
.ht-start .entry-content > .alignfull { max-width: none; }

.ht-held {
	padding: clamp(1.5rem, 5vw, 4rem) 0 clamp(1rem, 3vw, 2rem);
	text-align: center;
}
.ht-held .wp-block-image { margin-bottom: 1.25rem; }
.ht-held .wp-block-image img { border-radius: 0; }
.ht-held__logo,
.ht-aufruf__bild { text-align: center; }
.ht-held__logo img { width: 360px; max-width: 80%; }
.ht-aufruf__bild img {
	width: 120px;
	height: 120px;
	object-fit: cover;
	border-radius: 50% !important;
}
.ht-held h1 {
	margin: 0 0 0.4em;
	font-size: clamp(2.1rem, 5.5vw, 3.6rem);
}
.ht-held p {
	max-width: 40rem;
	margin-inline: auto;
	font-size: 1.2rem;
	color: var(--ht-text-2);
}
.ht-held .wp-block-buttons { justify-content: center; margin-top: 1.5rem; }

.ht-band {
	margin-block: clamp(2.5rem, 6vw, 5rem);
}
.ht-band > h2,
.ht-band > .wp-block-group__inner-container > h2 {
	margin-top: 0;
	text-align: center;
}
.ht-band p.ht-band__einleitung {
	max-width: 40rem;
	margin-inline: auto;
	text-align: center;
	color: var(--ht-text-2);
}
.ht-band .ht-zierzeile,
.ht-held .ht-zierzeile { margin-inline: auto; }
.ht-band .ht-zierzeile-zeile,
.ht-held .ht-zierzeile-zeile {
	text-align: center;
	margin-bottom: 0.5rem;
}

/* Kacheln: drei Spalten aus dem Spalten-Block */
.ht-kacheln.wp-block-columns {
	gap: clamp(1rem, 2.5vw, 1.75rem);
	margin-top: 1.5rem;
}
.ht-kachel.wp-block-column {
	display: flex;
	flex-direction: column;
	padding: clamp(1.1rem, 2.5vw, 1.6rem);
	border: 1px solid var(--ht-linie);
	border-radius: var(--ht-r-gross);
	background: linear-gradient(180deg, var(--ht-flaeche), var(--ht-flaeche-2));
	box-shadow: var(--ht-schatten), var(--ht-innen);
}
.ht-kachel h3 { margin: 0.25rem 0 0.5rem; }
.ht-kachel p { color: var(--ht-text-2); font-size: 1.02rem; }
.ht-kachel .wp-block-buttons { margin-top: auto; padding-top: 0.5rem; }

/* Abzeichen „Live“ / „In Arbeit“ / „Neu“ */
.ht-abzeichen {
	align-self: flex-start;
	display: inline-block;
	margin: 0 0 0.25rem;
	padding: 0.1rem 0.7rem;
	border-radius: 999px;
	font-family: var(--ht-schrift);
	font-size: 0.78rem !important;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ht-zweitfarbe) !important;
	border: 1px solid var(--ht-linie-stark);
}
.ht-abzeichen--live {
	color: var(--ht-erfolg) !important;
	border-color: currentColor;
}
.ht-abzeichen--neu {
	color: var(--ht-akzent) !important;
	border-color: currentColor;
}

/* Text-Band zweispaltig: links Text, rechts Liste o. Ä. */
.ht-erzaehlung,
.ht-start .entry-content > .ht-erzaehlung {
	max-width: var(--ht-lesebreite);
	margin-inline: auto;
}

/* Aufruf (Mitmachen / Kontakt) */
.ht-aufruf {
	padding: clamp(1.5rem, 4vw, 3rem);
	border: 1px solid var(--ht-linie);
	border-radius: var(--ht-r-gross);
	background:
		radial-gradient(120% 140% at 0% 0%, var(--ht-flaeche) 45%, var(--ht-seite-rand) 100%);
	box-shadow: var(--ht-schatten);
	text-align: center;
}
html.ht-dunkel .ht-aufruf {
	background: radial-gradient(120% 140% at 0% 0%, var(--ht-flaeche-2) 30%, var(--ht-flaeche) 100%);
}
.ht-aufruf h2 { margin-top: 0; }
.ht-aufruf p { max-width: 38rem; margin-inline: auto; }
.ht-aufruf .wp-block-buttons { justify-content: center; }
.ht-aufruf .wp-block-image img { border-radius: 50%; }

.ht-kontakt { margin-top: 1rem; }
.ht-kontakt__hinweis {
	margin-top: 0.6rem;
	color: var(--ht-text-2);
	font-size: 0.95rem;
}

/* „Neu im Blog“ unter dem Seiteninhalt der Startseite */
.ht-start-blog { margin-top: clamp(2.5rem, 6vw, 5rem); }
.ht-start-blog > h2 { margin-top: 0; text-align: center; }
.ht-start-blog__mehr { margin-top: 1.5rem; text-align: center; }

/* ==========================================================================
   9. Seitenvorlagen
   ========================================================================== */

/* ---- Anwendung (SMCG, Solo, NeoChat): breit, ohne sichtbaren Titel ---- */
.ht-vorlage-anwendung .ht-inhalt {
	padding-top: clamp(0.75rem, 2vw, 1.5rem);
}
.ht-vorlage-anwendung .ht-inhalt > .ht-container {
	max-width: calc(var(--ht-breite-app) + 2 * var(--ht-rand));
}
@media (max-width: 600px) {
	/* Am Handy jeden Pixel fürs Portal: schmaler Rand. */
	.ht-vorlage-anwendung .ht-inhalt > .ht-container { padding-inline: 0.5rem; }
}

/* ---- Konto (NeoUser): schmal, zentriert ---- */
.ht-vorlage-konto .ht-inhalt > .ht-container {
	max-width: calc(36rem + 2 * var(--ht-rand));
}
.ht-vorlage-konto .ht-seitenkopf { text-align: center; }
.ht-vorlage-konto .ht-seitenkopf .ht-trenner { margin-inline: auto; }
.ht-vorlage-konto .ht-inhalt > .ht-container:has(.neo-profil, .neo-dashboard-nav) {
	max-width: calc(48rem + 2 * var(--ht-rand));
}

/* ---- Rechtstext (Impressum, Datenschutz, Cookies): Lesebreite ---- */
.ht-vorlage-rechtstext .entry-content {
	font-size: 1.05rem;
}
.ht-vorlage-rechtstext .entry-content h2 { font-size: 1.35rem; }
.ht-vorlage-rechtstext .entry-content h3 { font-size: 1.12rem; }
.ht-vorlage-rechtstext .entry-content h4 { font-size: 1rem; }
.ht-stand {
	margin-top: 2.5rem;
	color: var(--ht-text-2);
	font-size: 0.92rem;
}

/* ==========================================================================
   10. Fuß
   ========================================================================== */

.ht-fuss {
	margin-top: auto;
	padding-block: clamp(2rem, 4vw, 3rem) 1.5rem;
	background: var(--ht-fuss);
	color: var(--ht-fuss-text);
	font-size: 1rem;
}
html.ht-dunkel .ht-fuss { border-top: 1px solid var(--ht-linie); }
.ht-fuss a { color: var(--ht-fuss-link); }
.ht-fuss a:hover { color: #ffffff; }
.ht-fuss :focus-visible { outline-color: var(--ht-fuss-link); }
/* Eine Zeile: links Marke + Hinweis, rechts die Spalten (Fuß-Widgets,
   ggf. Fußmenü). Die Zahl in --N = Anzahl der Spalten rechts. Am Handy
   untereinander, Hinweis zuerst. */
.ht-fuss__innen {
	display: grid;
	gap: 1.5rem clamp(1.5rem, 4vw, 3rem);
	align-items: start;
	overflow-wrap: break-word;
}
@media (min-width: 782px) {
	.ht-fuss__innen--1 { grid-template-columns: minmax(0, 1fr) auto; }
	.ht-fuss__innen--1 > .ht-fuss__spalte { min-width: 12rem; max-width: 24rem; }
	.ht-fuss__innen--2 { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
	.ht-fuss__innen--3 { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
	/* Vier Spalten rechts: Hinweis über die ganze Breite, darunter 2 × 2. */
	.ht-fuss__innen--4,
	.ht-fuss__innen--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ht-fuss__innen--4 > .ht-fuss__hinweis,
	.ht-fuss__innen--5 > .ht-fuss__hinweis { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
	.ht-fuss__innen--4 { grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); }
	.ht-fuss__innen--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.ht-fuss__innen--4 > .ht-fuss__hinweis { grid-column: auto; }
}
.ht-fuss__marke {
	margin: 0 0 0.35rem;
	font-family: var(--ht-display);
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #ffffff;
}
.ht-fuss__text {
	margin: 0;
	max-width: 36rem;
	color: var(--ht-fuss-text);
}
.ht-fuss__menue {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ht-fuss__menue a {
	display: inline-block;
	padding: 0.4rem 0;
}
/* Als Spalte neben dem Hinweis: Liste wie die Link-Widgets. */
.ht-fuss__nav .ht-fuss__menue {
	flex-direction: column;
	gap: 0;
}
.ht-fuss__nav .ht-fuss__menue a { padding: 0.3rem 0; }

/* Fußbereiche 1–4 (Widgets, IDs wie Divis Footer Areas) */
.ht-fuss .widget { margin: 0 0 1rem; }
.ht-fuss .widget:last-child { margin-bottom: 0; }
.ht-fuss .widget > :last-child,
.ht-fuss .widget p:last-child { margin-bottom: 0; }
.ht-fuss .widget-title,
.ht-fuss .widget .wp-block-heading {
	margin: 0 0 0.6rem;
	font-size: 1rem;
	letter-spacing: 0.06em;
	color: #ffffff;
}
.ht-fuss .widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.ht-fuss .widget li { margin: 0; }
.ht-fuss .widget li a {
	display: inline-block;
	padding: 0.3rem 0; /* Zielgröße */
}
/* Block-Schriftgrößen des Cores (z. B. „klein“ = 13 px) im Fuß lesbar halten. */
.ht-fuss .has-small-font-size { font-size: 0.95rem !important; }
.ht-fuss .has-text-align-center { text-align: center; }
.ht-fuss .alignfull { margin-inline: 0; width: auto; max-width: none; }
.ht-fuss .wp-block-search__input {
	background: rgba(255, 255, 255, 0.95);
	color: #182433;
}

.ht-fuss__unten {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	font-size: 0.9rem;
	color: var(--ht-fuss-text);
}

/* ==========================================================================
   11. Plugins
   ========================================================================== */

/* ---- Splittermond Charaktergenerator ---- */
/* Würfelknopf: Divi brauchte 175 px Abstand für seinen „Nach oben“-Knopf,
   dieses Theme hat keinen. Am Handy bleibt der Plugin-Wert (Platz für die
   Konto-/Plan-Leiste unten). */
@media (min-width: 782px) {
	:root { --smcg-wuerfel-unten: 1.5rem; }
}

/* Sehr schmal (320 px / 400 % Zoom): lange Portal-Überschriften wie
   „Abenteuerrunden“ trennen statt abschneiden (Konzept P7). */
@media (max-width: 480px) {
	.smcg :is(h1, h2) {
		overflow-wrap: anywhere; /* wirkt auch auf die Mindestbreite in Flex-Köpfen */
		hyphens: auto;
	}
}

/* Das Portal bringt Hintergrund, Rundung und Innenabstand selbst mit. */
.ht-vorlage-anwendung .entry-content > .smcg { margin-bottom: 0; }

/* Teaser/Login-Hinweis des Portals für Ausgeloggte: nicht zu breit. */
.ht-vorlage-anwendung .smcg-gate { max-width: 60rem; margin-inline: auto; }

/* ---- Splittermond Soloabenteuer ---- */
/* Die Werkzeugleiste im Editor klebt unter dem Theme-Kopf statt darunter zu
   verschwinden (Plugin rechnet nur mit der Adminleiste, siehe Konzept P2). */
@media (min-width: 782px) {
	html body .smsoloed-leiste { top: var(--ht-kopf-h); }
	html body.admin-bar .smsoloed-leiste { top: calc(32px + var(--ht-kopf-h)); }
}

/* ---- NeoUser / NeoChat ---- */
/* NeoUser hat keinen Dunkelmodus: Glasfläche und Schrift im Dunkeln
   umfärben. Die Akzentfarben bleiben die aus den NeoUser-Einstellungen. */
html.ht-dunkel .neo-wrap,
html.ht-dunkel .neo-dashboard-nav {
	--neo-hg: #182838;
	--neo-hg-rgb: 24, 40, 56;
	--neo-dunkel: #dce8f2;
	--neo-dunkel-rgb: 220, 232, 242;
	color: var(--ht-text);
}
html.ht-dunkel .neo-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
html.ht-dunkel .neo-wrap select,
html.ht-dunkel .neo-wrap textarea {
	background-color: var(--ht-flaeche);
	color: var(--ht-text);
	border-color: var(--ht-feldrand);
}
html.ht-dunkel .neo-wrap {
	--neo-primaer-text: var(--ht-akzent);
}
html.ht-dunkel .neo-wrap .neo-text-gefahr,
html.ht-dunkel .neo-wrap #neo-dsgvo-meldung.is-fehler { color: var(--ht-gefahr); }
html.ht-dunkel .neo-wrap #neo-dsgvo-meldung.is-erfolg { color: var(--ht-erfolg); }

/* NeoUser setzt Hinweistexte fest in Grau (#555–#aaa); #aaa erreicht auch
   auf Hell nur 2,3:1. In beiden Modi auf die Sekundär-Textfarbe (≥ 4,5:1). */
.neo-wrap .neo-pflicht-hinweis,
.neo-wrap .neo-fusslinks--grau,
.neo-wrap .neo-feldhinweis,
.neo-wrap .neo-text-klein,
.neo-wrap .neo-text-klein--abstand,
.neo-wrap .neo-einleitung,
.neo-wrap .neo-profil-bemerkung {
	color: var(--ht-text-2);
}
.ht-vorlage-konto .neo-glass { margin-top: 0; }

/* ---- „Nach oben“ (footer.php, theme.js) ----
   Links unten: rechts unten sitzt der Würfelknopf des Charaktergenerators.
   z-index unter Kopf (900) und allen Plugin-Dialogen; über Plugin-Leisten
   legt er sich nie, theme.js blendet ihn dort aus. */
.ht-hoch {
	position: fixed;
	left: max(1rem, env(safe-area-inset-left));
	bottom: max(1.25rem, env(safe-area-inset-bottom));
	z-index: 800;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;   /* 48 px ≥ 44 px Zielgröße */
	height: 3rem;
	padding: 0;
	border: 2px solid var(--ht-flaeche);
	border-radius: 50%;
	background: var(--ht-akzent);
	color: var(--ht-auf-akzent);
	box-shadow: var(--ht-schatten-klein);
	cursor: pointer;
	opacity: 1;
	transform: translateY(0);
	transition: opacity var(--ht-dauer) var(--ht-kurve), transform var(--ht-dauer) var(--ht-kurve), background-color var(--ht-dauer) var(--ht-kurve);
}
.ht-hoch[hidden] { display: none; }
.ht-hoch.is-unterwegs { opacity: 0; transform: translateY(0.75rem); }
.ht-hoch:hover { background: var(--ht-ueberschrift); }
html.ht-dunkel .ht-hoch:hover { background: var(--ht-akzent-2); }
.ht-hoch:focus-visible {
	outline: 3px solid var(--ht-fokus);
	outline-offset: 3px;
}
.ht-hoch svg { width: 1.5rem; height: 1.5rem; }
/* Am Seitenende sitzt der Knopf unter der ©-Zeile statt darauf. */
.ht-js .ht-fuss { padding-bottom: calc(1.25rem + 3rem + 1rem); }

/* ==========================================================================
   12. Divi-Reste (inc/divi-reste.php)
   ========================================================================== */

.ht-divi-abschnitt { margin-bottom: 2rem; }
.ht-divi-zeile {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}
.ht-divi-spalte { flex: 1 1 16rem; min-width: 0; }
.ht-divi-spalte--4_4 { flex-basis: 100%; }
.ht-divi-bild { margin: 0 0 1rem; text-align: center; }
.ht-divi-hinweis {
	padding: 0.6rem 0.9rem;
	border: 1px dashed var(--ht-gefahr);
	border-radius: var(--ht-r-klein);
	color: var(--ht-gefahr);
	font-size: 0.92rem;
}

/* ==========================================================================
   13. Mauszeiger-Set (Customizer, vorher Zusätzliches CSS in Divi)
   Schwert = Standard, Panzerhandschuh = über Klickbarem. Nur bei feinem
   Zeiger (Maus), nie bei Touch.
   ========================================================================== */

@media (pointer: fine) {
	body.ht-mauszeiger {
		cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2732%27%20height%3D%2732%27%20viewBox%3D%270%200%2032%2032%27%3E%3Cg%20transform%3D%27rotate%28-45%2016%2016%29%27%3E%3Cpolygon%20points%3D%2716%2C2%2013.5%2C17%2018.5%2C17%27%20fill%3D%27%23eef2f7%27%20stroke%3D%27%23182433%27%20stroke-width%3D%271.4%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cline%20x1%3D%2716%27%20y1%3D%276%27%20x2%3D%2716%27%20y2%3D%2715%27%20stroke%3D%27%239aa7b4%27%20stroke-width%3D%271%27%2F%3E%3Crect%20x%3D%279%27%20y%3D%2716.5%27%20width%3D%2714%27%20height%3D%273.4%27%20rx%3D%271.5%27%20fill%3D%27%232f76bd%27%20stroke%3D%27%23182433%27%20stroke-width%3D%271.3%27%2F%3E%3Crect%20x%3D%2714.2%27%20y%3D%2719.5%27%20width%3D%273.6%27%20height%3D%277.5%27%20rx%3D%271.3%27%20fill%3D%27%236f6456%27%20stroke%3D%27%23182433%27%20stroke-width%3D%271.3%27%2F%3E%3Ccircle%20cx%3D%2716%27%20cy%3D%2728%27%20r%3D%272.6%27%20fill%3D%27%232f76bd%27%20stroke%3D%27%23182433%27%20stroke-width%3D%271.3%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 6 6, auto;
	}
	body.ht-mauszeiger :is(a, button, [role="button"], input[type="submit"], input[type="button"], input[type="reset"], label[for], select, summary, [onclick]),
	body.ht-mauszeiger :is(a, button, [role="button"]) * {
		cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2732%27%20height%3D%2732%27%20viewBox%3D%270%200%2032%2032%27%3E%3Cpolygon%20points%3D%278%2C22%2025%2C22%2026%2C26%2016%2C31%207%2C26%27%20fill%3D%27%232f76bd%27%20stroke%3D%27%23182433%27%20stroke-width%3D%271.3%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpolyline%20points%3D%2710.5%2C25.2%2016%2C29%2021.5%2C25.2%27%20fill%3D%27none%27%20stroke%3D%27%23182433%27%20stroke-width%3D%271%27%2F%3E%3Crect%20x%3D%2714.3%27%20y%3D%2713%27%20width%3D%2710.5%27%20height%3D%2710%27%20rx%3D%272.5%27%20fill%3D%27%23eef2f7%27%20stroke%3D%27%23182433%27%20stroke-width%3D%271.3%27%2F%3E%3Crect%20x%3D%2714.9%27%20y%3D%2710.8%27%20width%3D%272.9%27%20height%3D%273.2%27%20rx%3D%271.1%27%20fill%3D%27%23eef2f7%27%20stroke%3D%27%23182433%27%20stroke-width%3D%271.1%27%2F%3E%3Crect%20x%3D%2718.0%27%20y%3D%2710.8%27%20width%3D%272.9%27%20height%3D%273.2%27%20rx%3D%271.1%27%20fill%3D%27%23eef2f7%27%20stroke%3D%27%23182433%27%20stroke-width%3D%271.1%27%2F%3E%3Crect%20x%3D%2721.1%27%20y%3D%2710.8%27%20width%3D%272.9%27%20height%3D%273.2%27%20rx%3D%271.1%27%20fill%3D%27%23eef2f7%27%20stroke%3D%27%23182433%27%20stroke-width%3D%271.1%27%2F%3E%3Cline%20x1%3D%2718.0%27%20y1%3D%2714.5%27%20x2%3D%2718.0%27%20y2%3D%2722.3%27%20stroke%3D%27%239aa7b4%27%20stroke-width%3D%271%27%2F%3E%3Cline%20x1%3D%2721.1%27%20y1%3D%2714.5%27%20x2%3D%2721.1%27%20y2%3D%2722.3%27%20stroke%3D%27%239aa7b4%27%20stroke-width%3D%271%27%2F%3E%3Crect%20x%3D%277.5%27%20y%3D%2715.5%27%20width%3D%274.8%27%20height%3D%277%27%20rx%3D%272.3%27%20fill%3D%27%23eef2f7%27%20stroke%3D%27%23182433%27%20stroke-width%3D%271.3%27%2F%3E%3Crect%20x%3D%279.5%27%20y%3D%2710.8%27%20width%3D%275.2%27%20height%3D%274.6%27%20rx%3D%271.6%27%20fill%3D%27%23eef2f7%27%20stroke%3D%27%23182433%27%20stroke-width%3D%271.2%27%2F%3E%3Crect%20x%3D%279.5%27%20y%3D%276.6%27%20width%3D%275.2%27%20height%3D%274.2%27%20rx%3D%271.6%27%20fill%3D%27%23eef2f7%27%20stroke%3D%27%23182433%27%20stroke-width%3D%271.2%27%2F%3E%3Crect%20x%3D%279.7%27%20y%3D%272.3%27%20width%3D%274.8%27%20height%3D%274.5%27%20rx%3D%272.2%27%20fill%3D%27%23eef2f7%27%20stroke%3D%27%23182433%27%20stroke-width%3D%271.2%27%2F%3E%3C%2Fsvg%3E") 12 2, pointer;
	}
	/* Textfelder behalten den Textcursor. */
	body.ht-mauszeiger :is(input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]), textarea, [contenteditable="true"]) {
		cursor: text;
	}
}

/* ==========================================================================
   14. Druck
   Das Charakterblatt druckt sich selbst (Plugin-Regel blendet alles außer
   .smcg aus). Hier nur: Theme-Rahmen weg, Wrapper als Block, weiß.
   ========================================================================== */

@media print {
	.ht-kopf,
	.ht-fuss,
	.ht-sprungmarke,
	.ht-leiste,
	.ht-weiter,
	.ht-kommentare,
	.post-navigation,
	.ht-blaettern,
	.ht-modus,
	.ht-hoch {
		display: none !important;
	}
	body {
		display: block;
		background: #fff !important;
		color: #000;
	}
	/* Kein Flex/Grid um das Charakterblatt: Chromium bricht Flex-Container
	   beim Drucken nicht sauber über Seiten um (CHARBOGEN-DRUCK-KONZEPT.md). */
	.ht-inhalt,
	.ht-container,
	.ht-mit-leiste,
	.ht-divi-abschnitt,
	.ht-divi-zeile,
	.ht-divi-spalte,
	.ht-divi-text {
		display: block !important;
		padding: 0 !important;
		max-width: none !important;
	}
	.ht-blatt,
	.ht-karte {
		box-shadow: none !important;
		border-color: #999 !important;
	}
	a { color: #000; }
	.entry-content a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		word-break: break-all;
	}
	.smcg a[href^="http"]::after { content: none; }
}