/* =========================================================================
 * Splittermond Charaktergenerator – Portal-Theme
 * An der GRW-Optik orientiert: Blau/Weiß primär, Dunkelblau für Überschriften,
 * schwarzer Text, graubraune Sekundär-Akzente. Hell als Standard,
 * Dunkelmodus über prefers-color-scheme. Alles unter .smcg gescoped.
 * ====================================================================== */

.smcg {
	/* ---- Semantische Farb-Token (HELL / Standard) ---- */
	--smcg-bg:          #ffffff;  /* Seitenhintergrund (weiß, Mitte) */
	--smcg-bg-edge:     #d8e6f3;  /* Hellblau am Rand */
	--smcg-surface:     #ffffff;  /* Kartenfläche */
	--smcg-surface-2:   #eef4fa;
	--smcg-card-shell:  rgba(29, 78, 134, 0.06); /* Außenschale Double-Bezel */
	--smcg-paper-1:     #ffffff;  /* „Papier" (Charakterblatt) */
	--smcg-paper-2:     #e9f1f9;

	--smcg-text:        #182433;  /* Fließtext (fast schwarz, leicht blau) */
	--smcg-text-2:      #45596b;  /* Sekundärtext */
	--smcg-heading:     #1c4e86;  /* Überschriften (Dunkelblau) */
	/* 2.39.0 (Kontrastmessung): Akzent dunkler, damit Akzent-Text auch auf getönten
	   Chips/Reitern und im hellblauen Kartenverlauf ≥ 4,5:1 erreicht; das bisherige
	   Blau ist jetzt die hellere Verlaufsfarbe des Primärknopfs (weiß darauf 4,7:1). */
	--smcg-accent:      #245f9c;  /* Primärakzent (Splittermond-Blau) */
	--smcg-accent-2:    #2f76bd;  /* helleres Blau (Verlauf/Hover) */
	--smcg-on-accent:   #ffffff;  /* Text auf Akzent-Buttons */
	--smcg-secondary:   #6f6456;  /* Sekundärakzent (Graubraun) */

	--smcg-line:        rgba(29, 78, 134, 0.18);
	--smcg-line-strong: rgba(29, 78, 134, 0.38);
	--smcg-field-border: rgba(29, 78, 134, 0.62); /* Rahmen Eingabefeld, ≥ 3:1 (WCAG 1.4.11) */
	--smcg-hover:       rgba(47, 118, 189, 0.10);
	--smcg-selected:    rgba(47, 118, 189, 0.10); /* 2.39.0: vorher 0.14 – Akzent-Text darauf ≥ 4,5:1 */
	--smcg-focus:       rgba(47, 118, 189, 0.30);

	--smcg-danger:      #a32b22;
	--smcg-success:     #3f7a44;
	/* 2.41.0: „offen“ in Prüfliste, Schrittleiste und Konto (≥ 4,5:1). */
	--smcg-warn:        #85520a;
	--smcg-warn-bg:     rgba(133, 82, 10, 0.09);
	--smcg-danger-bg:   rgba(163, 43, 34, 0.08);

	--smcg-inset:       inset 0 1px 0 rgba(255, 255, 255, 0.6);
	--smcg-shadow:      0 16px 40px -18px rgba(20, 40, 70, 0.28);
	--smcg-noise:       0.025;

	/* ---- Radien ---- */
	--smcg-r-lg: 22px;
	--smcg-r-md: 16px;
	--smcg-r-sm: 10px;

	/* ---- Schrift ---- */
	--smcg-display: "Cinzel", "Trajan Pro", Georgia, serif;
	--smcg-serif:   "Cormorant Garamond", Georgia, serif;
	--smcg-body:    "Crimson Pro", Georgia, "Times New Roman", serif;

	/* ---- Motion ---- */
	--smcg-ease: cubic-bezier(0.32, 0.72, 0, 1);
	--smcg-dur:  0.5s;

	color: var(--smcg-text);
	font-family: var(--smcg-body);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	box-sizing: border-box;
	position: relative;

	/* Weiß in der Mitte, weicher Hellblau-Verlauf zum Rand (wie das GRW). */
	background:
		radial-gradient(125% 115% at 50% 42%, var(--smcg-bg) 52%, var(--smcg-bg-edge) 100%);
	border-radius: var(--smcg-r-lg);
	padding: clamp(1.25rem, 3vw, 3rem);
	overflow: hidden;
	/* 2.41.0: clip statt hidden – schneidet genauso ab, macht .smcg aber nicht
	   zum Scroll-Container. Sonst klebt der Sticky-Kopf des Generators nicht. */
	overflow: clip;
}

/* ---- Dunkelmodus (Blau) – nur per Umschalter (Klasse .smcg--dark) ----
 * Nur am Bildschirm (ab 2.50.1): Der Druck ist immer hell. Vorher schlugen die
 * dunklen Farben in den Ausdruck durch (dunkle Kästen, helle Schrift auf Weiß),
 * seit das Theme helden-training den Schalter seitenweit nutzt. */
@media screen {
.smcg.smcg--dark {
		--smcg-bg:          #0e1620;
		--smcg-bg-edge:     #060c14;
		--smcg-surface:     #182838;
		--smcg-surface-2:   #1e3043;
		--smcg-card-shell:  rgba(120, 170, 220, 0.06);
		--smcg-paper-1:     #182838;
		--smcg-paper-2:     #1e3043;

		--smcg-text:        #dce8f2;
		--smcg-text-2:      #9fb4c6;
		--smcg-heading:     #8fc1ee;
		/* 2.39.0 (Kontrastmessung): Akzent und Graubraun heller, Auswahl-Tönung
		   schwächer – vorher 3,0–4,1:1 auf Karten und getönten Reitern/Chips. */
		--smcg-accent:      #79b4e8;
		--smcg-accent-2:    #a3cbf0;
		--smcg-on-accent:   #08131f;
		--smcg-secondary:   #b3a48f;

		--smcg-line:        rgba(120, 170, 220, 0.18);
		--smcg-line-strong: rgba(120, 170, 220, 0.40);
		--smcg-field-border: rgba(120, 170, 220, 0.62);
		--smcg-hover:       rgba(77, 147, 214, 0.16);
		--smcg-selected:    rgba(77, 147, 214, 0.16);
		--smcg-focus:       rgba(120, 180, 230, 0.35);

		--smcg-danger:      #e0857c;
		--smcg-success:     #7fae84;
		--smcg-warn:        #e3b25e;
		--smcg-warn-bg:     rgba(227, 178, 94, 0.12);
		--smcg-danger-bg:   rgba(224, 133, 124, 0.12);

		--smcg-inset:       inset 0 1px 0 rgba(255, 255, 255, 0.06);
		--smcg-shadow:      0 18px 50px -20px rgba(0, 5, 12, 0.7);
		--smcg-noise:       0.05;

	background:
		radial-gradient(125% 115% at 50% 42%, var(--smcg-bg) 50%, var(--smcg-bg-edge) 100%);
}
}

/* Feine Körnung (fixed, pointer-events:none → keine Repaints). */
.smcg::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: var(--smcg-noise);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	z-index: 0;
}

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

.smcg > * {
	position: relative;
	z-index: 1;
}

/* -------------------------------------------------------------------------
 * Typografie
 * ---------------------------------------------------------------------- */

.smcg h1,
.smcg h2,
.smcg h3 {
	font-family: var(--smcg-display);
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.1;
	color: var(--smcg-heading);
	margin: 0 0 0.5em;
}

.smcg h1 { font-size: clamp(1.9rem, 4vw, 3rem); }
.smcg h2 { font-size: clamp(1.4rem, 3vw, 2.1rem); }
.smcg h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); }

.smcg p { margin: 0 0 1rem; }

.smcg-eyebrow {
	display: inline-block;
	font-family: var(--smcg-body);
	font-size: 0.68rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--smcg-secondary);
	padding: 0.25rem 0.75rem;
	border: 1px solid var(--smcg-line);
	border-radius: 999px;
	margin-bottom: 0.75rem;
}

.smcg-rule {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 1.25rem 0;
	color: var(--smcg-line-strong);
}
.smcg-rule::before,
.smcg-rule::after {
	content: "";
	height: 1px;
	flex: 1;
	background: linear-gradient(90deg, transparent, var(--smcg-line-strong), transparent);
}
.smcg-rule__gem {
	width: 9px;
	height: 9px;
	transform: rotate(45deg);
	background: var(--smcg-accent);
	box-shadow: 0 0 12px rgba(47, 118, 189, 0.4);
}

/* -------------------------------------------------------------------------
 * Double-Bezel-Karte
 * ---------------------------------------------------------------------- */

.smcg-card {
	background: var(--smcg-card-shell);
	border: 1px solid var(--smcg-line);
	border-radius: var(--smcg-r-lg);
	padding: 6px;
	box-shadow: var(--smcg-shadow);
}

.smcg-card__inner {
	background: linear-gradient(180deg, var(--smcg-surface), var(--smcg-surface-2));
	border: 1px solid var(--smcg-line);
	border-radius: calc(var(--smcg-r-lg) - 6px);
	box-shadow: var(--smcg-inset);
	padding: clamp(1rem, 2.5vw, 1.75rem);
}

/* „Papier" für das Charakterblatt */
.smcg-parch {
	background: linear-gradient(160deg, var(--smcg-paper-1), var(--smcg-paper-2));
	color: var(--smcg-text);
	border: 1px solid var(--smcg-line);
	border-radius: calc(var(--smcg-r-lg) - 6px);
	padding: clamp(1.1rem, 2.5vw, 2rem);
}
.smcg-parch h1,
.smcg-parch h2,
.smcg-parch h3 { color: var(--smcg-heading); }

/* -------------------------------------------------------------------------
 * Buttons
 * ---------------------------------------------------------------------- */

.smcg-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--smcg-display);
	font-size: 0.95rem;
	letter-spacing: 0.03em;
	padding: 0.7rem 1.25rem;
	border-radius: 999px;
	border: 1px solid var(--smcg-line-strong);
	background: transparent;
	color: var(--smcg-text);
	cursor: pointer;
	text-decoration: none;
	transition: transform var(--smcg-dur) var(--smcg-ease),
		background-color var(--smcg-dur) var(--smcg-ease),
		color var(--smcg-dur) var(--smcg-ease),
		border-color var(--smcg-dur) var(--smcg-ease);
}
.smcg-btn:hover {
	background: var(--smcg-hover);
	border-color: var(--smcg-accent);
	color: var(--smcg-accent);
}
.smcg-btn:active { transform: scale(0.98); }
/* Grund-Fokusrahmen für alle Bedienelemente im Portal (ab 2.38.0), auch falls
   das Theme Fokusrahmen global entfernt. Immer per outline, nie nur per
   box-shadow – sonst unsichtbar im Windows-Kontrastmodus. Spezifischere
   Regeln weiter unten (Knöpfe, Spieltisch) überschreiben das. */
.smcg :focus-visible {
	outline: 2px solid var(--smcg-accent);
	outline-offset: 2px;
}
.smcg-btn:focus-visible {
	outline: 2px solid var(--smcg-accent);
	outline-offset: 3px;
}
.smcg-btn[disabled],
.smcg-btn[aria-disabled="true"] {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

.smcg-btn--primary {
	background: linear-gradient(180deg, var(--smcg-accent-2), var(--smcg-accent));
	border-color: var(--smcg-accent);
	color: var(--smcg-on-accent);
	font-weight: 600;
}
.smcg-btn--primary:hover {
	background: linear-gradient(180deg, var(--smcg-accent-2), var(--smcg-accent-2));
	color: var(--smcg-on-accent);
}

.smcg-btn--ghost { background: transparent; }
.smcg-btn--danger {
	border-color: rgba(163, 43, 34, 0.5);
	color: var(--smcg-danger);
}
.smcg-btn--danger:hover {
	background: rgba(163, 43, 34, 0.12);
	border-color: var(--smcg-danger);
	color: var(--smcg-danger);
}

.smcg-btn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	margin-right: -0.4rem;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.12);
	transition: transform var(--smcg-dur) var(--smcg-ease);
}
.smcg-btn__icon::before {
	content: "";
	width: 0.55rem;
	height: 0.55rem;
	border-right: 2px solid currentColor;
	border-top: 2px solid currentColor;
	transform: rotate(45deg);
}
.smcg-btn:hover .smcg-btn__icon {
	transform: translate(2px, -1px) scale(1.06);
}

/* -------------------------------------------------------------------------
 * Boot-Loader / Login-Gate
 * ---------------------------------------------------------------------- */

.smcg-boot {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	min-height: 40vh;
	color: var(--smcg-secondary);
	font-family: var(--smcg-serif);
	font-size: 1.2rem;
}
.smcg-boot__mark {
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 2px solid var(--smcg-line);
	border-top-color: var(--smcg-accent);
	animation: smcg-spin 0.9s linear infinite;
}
@keyframes smcg-spin { to { transform: rotate(360deg); } }

.smcg-gate {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.smcg-gate__panel {
	max-width: 30rem;
	text-align: center;
	background: linear-gradient(180deg, var(--smcg-surface), var(--smcg-surface-2));
	border: 1px solid var(--smcg-line);
	border-radius: var(--smcg-r-lg);
	padding: clamp(1.5rem, 4vw, 2.75rem);
	box-shadow: var(--smcg-shadow);
}
.smcg-gate__rune {
	display: block;
	width: 54px;
	height: 54px;
	margin: 0 auto 1rem;
	transform: rotate(45deg);
	border: 2px solid var(--smcg-accent);
	border-radius: 8px;
	box-shadow: 0 0 24px rgba(47, 118, 189, 0.3), var(--smcg-inset);
}
.smcg-gate__title {
	font-size: clamp(1.25rem, 1rem + 1.4vw, 1.6rem);
	overflow-wrap: break-word;
	hyphens: auto;
}
.smcg-gate__text { color: var(--smcg-text-2); }
.smcg-gate .smcg-btn { margin-top: 0.5rem; }
/* Teaser unter dem Login-Panel: garantierter Abstand + feine Trennlinie. */
.smcg-gate .smcg-teaser {
	width: 100%;
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--smcg-line);
}

/* -------------------------------------------------------------------------
 * Portal-Shell
 * ---------------------------------------------------------------------- */

.smcg-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
}
.smcg-head__titles { max-width: 40ch; }
/* Handy (ab 2.50.0): Die Überschrift im Kopf („Abenteuerrunden“, lange
   Charakternamen) passt sonst bei 320 px nicht in die Zeile – Cinzel braucht
   für „Abenteuerrunden“ rund 9,4 em, unter Divi bleiben bei 320 px nur 216 px.
   6,6vw läuft bei 480 px nahtlos in die Vorgabe (1,9rem) über. Trennen nur
   noch als Notnagel für sehr lange Einzelwörter. */
@media (max-width: 480px) {
	.smcg-head__titles h1 {
		font-size: clamp(1.35rem, 6.6vw, 1.9rem);
		hyphens: auto;
		overflow-wrap: anywhere;
	}
}
.smcg-head__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* -------------------------------------------------------------------------
 * Charakter-Übersicht
 * ---------------------------------------------------------------------- */

.smcg-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1rem;
}

.smcg-charcard {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	cursor: pointer;
	transition: transform var(--smcg-dur) var(--smcg-ease);
}
.smcg-charcard:hover { transform: translateY(-3px); }
.smcg-charcard:hover .smcg-card { border-color: var(--smcg-accent); }
.smcg-charcard__name {
	font-family: var(--smcg-display);
	font-size: 1.2rem;
	color: var(--smcg-heading);
}
.smcg-charcard__meta {
	font-family: var(--smcg-serif);
	color: var(--smcg-text-2);
	font-size: 1rem;
}
.smcg-charcard__grade {
	display: inline-block;
	margin-top: 0.25rem;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--smcg-secondary);
}
.smcg-charcard__row {
	display: flex;
	gap: 0.4rem;
	margin-top: 0.75rem;
	flex-wrap: wrap;
}

/* ---- Übersicht ab 2.42.0 (Etappe 2): Name als Link, Entwurfskarten, Werkzeuge ---- */
h3.smcg-charcard__name { margin: 0; line-height: 1.25; }
.smcg-charcard__link { color: inherit; text-decoration: none; }
.smcg-charcard__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.smcg-charcard__badge {
	align-self: flex-start;
	display: inline-block; margin-bottom: 0.35rem;
	padding: 0.05rem 0.55rem; border-radius: 999px;
	font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
	background: var(--smcg-warn-bg); color: var(--smcg-warn);
}
.smcg-charcard--entwurf .smcg-card { border-style: dashed; }
a.smcg-btn { text-decoration: none; display: inline-flex; align-items: center; }

.smcg-ov-werkzeuge {
	display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 1rem;
	margin: 0 0 1rem;
}
.smcg-ov-feld { margin-bottom: 0; min-width: 0; }
.smcg-ov-feld .smcg-input { padding-top: 0.45rem; padding-bottom: 0.45rem; font-size: 1.05rem; }
.smcg-ov-treffer { margin: 0 0 0.4rem auto; font-size: 0.9rem; color: var(--smcg-text-2); font-variant-numeric: tabular-nums; }
.smcg-segment { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; }
.smcg-segment__opt {
	display: inline-flex; align-items: center; gap: 0.35rem;
	padding: 0.35rem 0.8rem; border-radius: 999px; cursor: pointer;
	border: 1px solid var(--smcg-line-strong); background: var(--smcg-surface);
}
.smcg-segment__opt:has(input:checked) { border-color: var(--smcg-accent); background: var(--smcg-selected); font-weight: 600; }
.smcg-segment__opt input { accent-color: var(--smcg-accent); margin: 0; }
.smcg-segment__opt:has(input:focus-visible) { outline: 3px solid var(--smcg-accent); outline-offset: 2px; }
.smcg-segment__opt input:focus-visible { outline: none; }

/* -------------------------------------------------------------------------
 * Charakter-Tags: Wolke (Filter) + Chips + Zuweisungs-Menü an der Karte
 * (CHAR-TAGS-KONZEPT.md)
 * ---------------------------------------------------------------------- */
.smcg-tagcloud {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.5rem;
	align-items: baseline;
	margin: 0 0 1.25rem;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--smcg-line);
	border-radius: 10px;
	background: var(--smcg-surface-2, #f7f8fa);
}
.smcg-tag {
	display: inline-flex;
	align-items: baseline;
	gap: 0.25rem;
	padding: 0.2rem 0.6rem;
	border: 1px solid var(--smcg-line);
	border-radius: 999px;
	background: var(--smcg-surface, #fff);
	color: var(--smcg-text-1, inherit);
	cursor: pointer;
	line-height: 1.3;
}
.smcg-tag:hover { border-color: var(--smcg-secondary); }
.smcg-tag.is-active {
	background: var(--smcg-secondary);
	border-color: var(--smcg-secondary);
	color: #fff;
}
.smcg-tag__count { font-size: 0.7em; opacity: 0.7; font-variant-numeric: tabular-nums; }
.smcg-tag--reset {
	font-size: 0.85rem;
	color: var(--smcg-text-2);
	align-self: center;
}

.smcg-charcard__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin-top: 0.5rem;
}
.smcg-charcard__tag {
	font-size: 0.72rem;
	padding: 0.1rem 0.5rem;
	border-radius: 999px;
	background: var(--smcg-surface-2, #f0f2f5);
	border: 1px solid var(--smcg-line);
	color: var(--smcg-text-2);
}

/* hidden-Attribut überall im Plugin durchsetzen (ab 2.49.2): Theme-CSS wie
 * Divis „article,aside,…,section{display:block}“ schlägt das UA-[hidden] –
 * live standen dadurch alle Reiter des Charakterblatts untereinander. Die
 * Druckregel für .smcg-blatt__panel weiter unten bleibt stärker (später). */
.smcg [hidden],
[class*="smcg-"][hidden] { display: none !important; }

/* Zugeklapptes Menü ausblenden: display:flex unten würde sonst das
 * hidden-Attribut aushebeln (Autor-CSS schlägt das UA-[hidden]). */
.smcg-tagmenu[hidden] { display: none; }
.smcg-tagmenu {
	margin-top: 0.6rem;
	padding: 0.6rem 0.7rem;
	border: 1px solid var(--smcg-line);
	border-radius: 8px;
	background: var(--smcg-surface-2, #f7f8fa);
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}
.smcg-tagmenu__row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9rem;
	cursor: pointer;
}
.smcg-tagmenu__add {
	display: flex;
	gap: 0.4rem;
	margin-top: 0.4rem;
	padding-top: 0.5rem;
	border-top: 1px solid var(--smcg-line);
}
.smcg-tagmenu__new { flex: 1 1 auto; min-width: 0; }

.smcg-empty {
	text-align: center;
	padding: clamp(2rem, 6vw, 4rem) 1rem;
	color: var(--smcg-text-2);
}
.smcg-empty__icon {
	width: 56px; height: 56px;
	margin: 0 auto 1rem;
	border: 2px solid var(--smcg-line);
	border-radius: 12px;
	transform: rotate(45deg);
}

/* -------------------------------------------------------------------------
 * Wizard
 * ---------------------------------------------------------------------- */

.smcg-progress {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 1.5rem;
	flex-wrap: wrap;
}
.smcg-progress__step {
	flex: 1;
	min-width: 14px;
	height: 4px;
	border-radius: 999px;
	background: var(--smcg-line);
	transition: background-color var(--smcg-dur) var(--smcg-ease);
}
.smcg-progress__step.is-done { background: var(--smcg-secondary); }
.smcg-progress__step.is-active { background: var(--smcg-accent); }
.smcg-progress__label {
	width: 100%;
	font-family: var(--smcg-serif);
	font-size: 0.95rem;
	color: var(--smcg-secondary);
	margin-top: 0.25rem;
}

.smcg-wizard {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}
/* 2.41.0: nach der Breite der Inhaltsspalte statt des Fensters (daneben steht
   jetzt das Konto). */
.smcg-wizard-main .smcg-card__inner { container-type: inline-size; }
@container (min-width: 700px) {
	.smcg-wizard.has-aside { grid-template-columns: minmax(0, 1fr) 280px; }
}

.smcg-wizard__nav {
	display: flex;
	justify-content: space-between;
	gap: 0.6rem;
	margin-top: 1.25rem;
}

/* Sticky Kopfblock (Seitentitel + Punkte + Zurück/Weiter) – bleibt beim
 * Scrollen am oberen Rand sichtbar, siehe ERSCHAFFUNG-VEREINFACHUNG-KONZEPT.md. */
.smcg-wizard__sticky {
	position: sticky;
	/* 2.41.0: unter der WordPress-Adminleiste (falls sichtbar) statt dahinter;
	   ab 2.43.0 misst smcg-wizard.js auch feste Theme-Header (Divi) → --smcg-oben. */
	top: var(--smcg-oben, var(--wp-admin--admin-bar--height, 0px));
	z-index: 20;
	background: var(--smcg-surface);
	padding: 0.75rem 0 0.5rem;
	margin-bottom: 1.25rem;
	box-shadow: 0 4px 10px -6px rgba(0, 0, 0, 0.25);
}
.smcg-wizard__sticky .smcg-progress { margin-bottom: 0.6rem; }
.smcg-wizard__stickyhead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}
.smcg-wizard__stickytitle {
	font-family: var(--smcg-serif);
	font-size: 0.95rem;
	color: var(--smcg-secondary);
}
.smcg-wizard__stickypoints {
	font-family: var(--smcg-serif);
	font-size: 0.9rem;
	color: var(--smcg-text-2);
}
.smcg-wizard__sticky .smcg-wizard__nav { margin-top: 0; }

/* ---- Erschaffung ab 2.41.0 (Etappe 1): Schrittleiste, Prüfliste, Konto ---- */

/* Schrittleiste: beschriftete Knöpfe mit Status, frei anspringbar. */
.smcg-leiste { min-width: 0; overflow-x: auto; scrollbar-width: thin; margin: 0 -4px 0.5rem; padding: 4px; }
.smcg-leiste__liste { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.35rem; min-width: max-content; }
.smcg-leiste__liste li { margin: 0; padding: 0; }
.smcg-leiste__btn {
	position: relative;
	display: flex; align-items: center; gap: 0.45rem;
	padding: 0.25rem 0.7rem 0.25rem 0.3rem;
	border-radius: 999px; border: 1px solid var(--smcg-line-strong);
	background: var(--smcg-surface); color: var(--smcg-text);
	font-family: var(--smcg-body); font-size: 0.95rem; line-height: 1.2; white-space: nowrap;
	cursor: pointer;
}
.smcg-leiste__btn:hover { background: var(--smcg-hover); }
.smcg-leiste__btn[aria-current="step"] { border-color: var(--smcg-accent); background: var(--smcg-selected); box-shadow: inset 0 0 0 1px var(--smcg-accent); font-weight: 600; }
.smcg-leiste__nr {
	display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
	border: 1.5px solid var(--smcg-line-strong); color: var(--smcg-text-2);
	font-size: 0.82rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.smcg-leiste__status { font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.smcg-leiste__btn.is-erfuellt .smcg-leiste__nr { background: var(--smcg-success); border-color: var(--smcg-success); color: var(--smcg-on-accent); }
.smcg-leiste__btn.is-offen .smcg-leiste__nr { border-color: var(--smcg-warn); color: var(--smcg-warn); }
.smcg-leiste__btn.is-offen .smcg-leiste__status { color: var(--smcg-warn); }
.smcg-leiste__btn.is-fehler .smcg-leiste__nr { border-color: var(--smcg-danger); color: var(--smcg-danger); }
.smcg-leiste__btn.is-fehler .smcg-leiste__status { color: var(--smcg-danger); }
.smcg-leiste__btn.is-unnoetig .smcg-leiste__nr,
.smcg-leiste__btn.is-wartet .smcg-leiste__nr { border-style: dashed; }
.smcg-leiste__btn.is-unnoetig .smcg-leiste__label { color: var(--smcg-text-2); }

/* Prüfliste „Noch zu tun“ */
.smcg-pruef-knopf { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: auto; }
.smcg-pruef-knopf[aria-expanded="true"] .smcg-pfeil { transform: rotate(180deg); }
.smcg-pfeil { display: inline-block; transition: transform 0.2s; }
.smcg-zaehler {
	display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 0.35rem;
	border-radius: 999px; background: var(--smcg-warn-bg); color: var(--smcg-warn);
	font-size: 0.85rem; font-variant-numeric: tabular-nums;
}
.smcg-zaehler.is-fehler { background: var(--smcg-danger-bg); color: var(--smcg-danger); }
.smcg-zaehler.is-null { background: var(--smcg-selected); color: var(--smcg-success); }
.smcg-pruef-panel {
	max-height: min(50vh, 420px); overflow: auto;
	margin-bottom: 0.6rem; padding: 0.75rem 0.9rem;
	border: 1px solid var(--smcg-line-strong); border-radius: var(--smcg-r-md); background: var(--smcg-surface);
}
.smcg-pruef-panel--abschluss { max-height: none; margin: 0.5rem 0 1rem; }
.smcg-pruefliste { display: grid; gap: 0.9rem; }
.smcg-pruefliste h3 { font-family: var(--smcg-body); font-size: 1.02rem; font-weight: 600; color: var(--smcg-text); margin: 0 0 0.3rem; }
.smcg-pruefliste ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.smcg-pruefliste li { margin: 0; }
.smcg-befund {
	display: flex; gap: 0.6rem; align-items: baseline; width: 100%; text-align: left;
	padding: 0.4rem 0.6rem; border-radius: var(--smcg-r-sm); border: 1px solid transparent;
	background: transparent; color: var(--smcg-text); font: inherit; cursor: pointer;
}
.smcg-befund:hover { background: var(--smcg-hover); border-color: var(--smcg-line); }
.smcg-befund__art {
	flex: none; min-width: 4.6rem; text-align: center;
	padding: 0.05rem 0.45rem; border-radius: 999px;
	font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}
.smcg-befund.is-offen .smcg-befund__art { background: var(--smcg-warn-bg); color: var(--smcg-warn); }
.smcg-befund.is-fehler .smcg-befund__art { background: var(--smcg-danger-bg); color: var(--smcg-danger); }
.smcg-befund.is-hinweis .smcg-befund__art { background: var(--smcg-selected); color: var(--smcg-accent); }
.smcg-befund__text { flex: 1; min-width: 0; }
.smcg-befund__ziel { flex: none; color: var(--smcg-accent); font-size: 0.88rem; }

/* Kleiner Kopf beim Scrollen: nur Leiste + Prüfliste-Knopf. */
.smcg-wizard__sticky.is-klein { padding: 0.35rem 0; }
.smcg-wizard__sticky.is-klein .smcg-wizard__nav,
.smcg-wizard__sticky.is-klein .smcg-wizard__stickytitle,
.smcg-wizard__sticky.is-klein .smcg-wizard__stickypoints { display: none; }
.smcg-wizard__sticky.is-klein { display: flex; align-items: center; gap: 0.5rem; }
.smcg-wizard__sticky.is-klein .smcg-leiste { flex: 1; margin-bottom: 0; }
.smcg-wizard__sticky.is-klein .smcg-wizard__stickyhead { margin: 0; flex: none; }
.smcg-wizard__sticky.is-klein .smcg-pruef-panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 21; box-shadow: var(--smcg-shadow); }

/* Inhalt + Konto-Spalte */
.smcg-wizard-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 1.25rem; align-items: start; }
.smcg-wizard-main { min-width: 0; }
.smcg-konto { position: sticky; top: calc(var(--smcg-oben, var(--wp-admin--admin-bar--height, 0px)) + var(--smcg-kopf-h, 120px) + 0.75rem); display: grid; gap: 0.5rem; }
/* Unter 600 px scrollt die Adminleiste mit (position: absolute). */
@media (max-width: 600px) {
	.smcg-wizard__sticky { top: var(--smcg-oben, 0px); }
}
.smcg-konto__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.smcg-konto__titel { font-size: 1.25rem; margin: 0; }
.smcg-konto__tipp { font-size: 0.8rem; color: var(--smcg-text-2); }
.smcg-konto__griff { display: none; }
.smcg-konto__liste { list-style: none; margin: 0; padding: 0; border: 1px solid var(--smcg-line-strong); border-radius: var(--smcg-r-md); background: var(--smcg-surface); overflow: hidden; }
.smcg-konto__liste li { margin: 0; }
.smcg-konto__liste li + li { border-top: 1px solid var(--smcg-line); }
.smcg-posten {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.1rem 0.6rem; align-items: baseline;
	width: 100%; padding: 0.45rem 0.75rem; border: 0; background: transparent; color: var(--smcg-text);
	font: inherit; text-align: left; cursor: pointer;
}
.smcg-posten:hover { background: var(--smcg-hover); }
.smcg-posten__label { font-size: 0.92rem; }
.smcg-posten__wert { font-weight: 600; font-variant-numeric: tabular-nums; }
.smcg-posten__sub { grid-column: 1 / -1; font-size: 0.8rem; line-height: 1.3; color: var(--smcg-text-2); }
.smcg-posten__balken { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--smcg-line); overflow: hidden; }
.smcg-posten__balken span { display: block; height: 100%; background: var(--smcg-warn); }
.smcg-posten.is-voll .smcg-posten__wert { color: var(--smcg-success); }
.smcg-posten.is-voll .smcg-posten__balken span { background: var(--smcg-success); }
.smcg-posten.is-offen .smcg-posten__wert { color: var(--smcg-warn); }
.smcg-posten.is-ueber .smcg-posten__wert { color: var(--smcg-danger); }
.smcg-posten.is-ueber .smcg-posten__balken span { background: var(--smcg-danger); }

/* Auswahlkarten mit echtem Radio/Checkbox */
.smcg-gruppe { border: 0; margin: 0 0 0.5rem; padding: 0; min-width: 0; }
.smcg-legend {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 1rem;
	width: 100%; padding: 0; margin-bottom: 0.6rem;
	font-family: var(--smcg-display); font-size: 1.35rem; color: var(--smcg-heading);
}
.smcg-legend__info { font-family: var(--smcg-body); font-size: 0.85rem; color: var(--smcg-text-2); }
.smcg-choice--wahl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 0.6rem; align-items: start; }
.smcg-choice--wahl:hover { transform: none; }
.smcg-choice__body { display: grid; gap: 0.1rem; min-width: 0; }
.smcg-choice__body .smcg-choice__name { margin-bottom: 0; }
.smcg-choice__input { width: 1.1rem; height: 1.1rem; margin: 0.3rem 0 0; accent-color: var(--smcg-accent); }
.smcg-choice__input:focus-visible { outline: none; }
.smcg-choice--wahl:has(.smcg-choice__input:focus-visible) { outline: 3px solid var(--smcg-accent); outline-offset: 2px; }
.smcg-choice--wahl.is-locked { opacity: 1; cursor: not-allowed; }
.smcg-choice--wahl.is-locked .smcg-choice__name { color: var(--smcg-text-2); }
.smcg-choice--wahl.is-locked.is-selected .smcg-choice__name { color: var(--smcg-heading); }

/* Stepper: Sperrgrund sichtbar, gesperrte Knöpfe gestrichelt */
.smcg-step-btn[aria-disabled="true"] { border-style: dashed; color: var(--smcg-text-2); background: transparent; cursor: not-allowed; }
.smcg-sperre { font-size: 0.78rem; color: var(--smcg-text-2); text-align: center; line-height: 1.25; }
.smcg-feldhilfe { font-size: 0.85rem; color: var(--smcg-text-2); }
.smcg-feldhilfe.is-fehler { color: var(--smcg-danger); }
.smcg-input[aria-invalid="true"] { border-color: var(--smcg-danger); }

/* Sprungziel kurz markieren */
.smcg-blink { animation: smcg-blink 1.4s ease-out; }
@keyframes smcg-blink { 0%, 30% { box-shadow: 0 0 0 4px var(--smcg-warn); } 100% { box-shadow: 0 0 0 4px transparent; } }

/* Rückgängig-Leiste nach Paket-/Rassenwechsel */
.smcg-undo {
	position: fixed; z-index: 40; left: 50%; transform: translateX(-50%);
	bottom: calc(1rem + var(--smcg-fuss-h, 0px) + env(safe-area-inset-bottom, 0px));
	width: min(36rem, calc(100% - 32px));
	display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; justify-content: space-between;
	padding: 0.65rem 0.9rem; border-radius: var(--smcg-r-md);
	background: var(--smcg-text); color: var(--smcg-bg); box-shadow: var(--smcg-shadow);
}
.smcg-undo__knoepfe { display: flex; gap: 0.4rem; }
.smcg-undo .smcg-btn { background: var(--smcg-bg); color: var(--smcg-text); border-color: var(--smcg-bg); }

/* Schmaler Generator (Handy oder schmales Theme, Klasse setzt smcg-wizard.js):
   Konto als aufklappbare Leiste am unteren Rand. */
.smcg-wizard-root.is-schmal .smcg-wizard-layout { grid-template-columns: minmax(0, 1fr); padding-bottom: var(--smcg-fuss-h, 0px); }
.smcg-wizard-root.is-schmal .smcg-konto {
	position: fixed; z-index: 30; top: auto; left: 0; right: 0; bottom: 0;
	padding: 0.35rem max(16px, env(safe-area-inset-right, 0px)) calc(0.5rem + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
	background: var(--smcg-bg); border-top: 1px solid var(--smcg-line-strong);
	box-shadow: 0 -12px 30px -18px rgba(0, 0, 0, 0.45);
	gap: 0.35rem;
}
.smcg-wizard-root.is-schmal .smcg-konto__griff {
	display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 0.5rem;
	min-height: 2.6rem; padding: 0.2rem; border: 0; background: transparent; color: var(--smcg-text);
	font: inherit; text-align: left; cursor: pointer;
}
.smcg-wizard-root.is-schmal .smcg-konto__griff .smcg-pfeil { transform: rotate(180deg); }
.smcg-wizard-root.is-schmal .smcg-konto__griff[aria-expanded="true"] .smcg-pfeil { transform: none; }
.smcg-wizard-root.is-schmal .smcg-konto__kopf { display: none; }
.smcg-wizard-root.is-schmal .smcg-konto__inhalt { display: none; max-height: 55vh; overflow: auto; }
.smcg-wizard-root.is-schmal .smcg-konto__inhalt.is-offen { display: block; }

/* Enger Generator (Handy, Klasse setzt smcg-wizard.js): nur Nummern mit
   Status, Beschriftung nur beim aktuellen Schritt. */
.smcg-wizard-root.is-eng .smcg-leiste { overflow: visible; margin: 0 0 0.5rem; padding: 0; }
.smcg-wizard-root.is-eng .smcg-leiste__liste { min-width: 0; flex-wrap: wrap; gap: 0.3rem; }
.smcg-wizard-root.is-eng .smcg-leiste__btn { padding: 0.15rem; gap: 0.3rem; }
.smcg-wizard-root.is-eng .smcg-leiste__btn[aria-current="step"] { padding-right: 0.7rem; }
.smcg-wizard-root.is-eng .smcg-leiste__btn:not([aria-current="step"]) .smcg-leiste__label,
.smcg-wizard-root.is-eng .smcg-leiste__btn:not([aria-current="step"]) .smcg-leiste__status,
.smcg-wizard-root.is-eng .smcg-wizard__sticky.is-klein .smcg-leiste__label,
.smcg-wizard-root.is-eng .smcg-wizard__sticky.is-klein .smcg-leiste__status,
.smcg-wizard-root.is-eng .smcg-wizard__sticky.is-klein .smcg-pruef-knopf__text {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.smcg-wizard-root.is-eng .smcg-leiste__nr { width: 1.9rem; height: 1.9rem; }
.smcg-wizard-root.is-eng .smcg-nav-ziel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.smcg-wizard-root.is-eng .smcg-wizard__stickypoints { display: none; }
.smcg-wizard-root.is-eng .smcg-wizard__sticky.is-klein .smcg-leiste__liste { flex-wrap: nowrap; gap: 0.2rem; }
.smcg-wizard-root.is-eng .smcg-wizard__sticky.is-klein .smcg-leiste__btn,
.smcg-wizard-root.is-eng .smcg-wizard__sticky.is-klein .smcg-leiste__btn[aria-current="step"] { padding: 0.1rem; }
.smcg-wizard-root.is-eng .smcg-wizard__sticky.is-klein .smcg-leiste__liste { gap: 0.15rem; }
.smcg-wizard-root.is-eng .smcg-wizard__sticky.is-klein .smcg-leiste__btn,
.smcg-wizard-root.is-eng .smcg-wizard__sticky.is-klein .smcg-leiste__btn[aria-current="step"] { padding: 0; border-width: 0; background: transparent; box-shadow: none; }
.smcg-wizard-root.is-eng .smcg-wizard__sticky.is-klein .smcg-leiste__btn[aria-current="step"] .smcg-leiste__nr { box-shadow: 0 0 0 2px var(--smcg-accent); }
.smcg-wizard-root.is-eng .smcg-wizard__sticky.is-klein .smcg-leiste__nr { width: 1.65rem; height: 1.65rem; }
.smcg-wizard-root.is-eng .smcg-wizard__sticky.is-klein .smcg-pruef-knopf { padding: 0.25rem 0.4rem; min-width: 0; }
.smcg-wizard-root.is-eng .smcg-wizard__sticky.is-klein .smcg-pruef-knopf .smcg-pfeil { display: none; }

@media (prefers-reduced-motion: reduce) {
	.smcg-blink { animation: none; }
	.smcg-pfeil { transition: none; }
}

/* Anzeige der Paket-Fertigkeitspunkte (Auswahl-Schritt) als Chips statt
 * langem Fließtext. */
.smcg-fp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.5rem;
}
.smcg-fp-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.3rem 0.7rem;
	border: 1px solid var(--smcg-line);
	border-radius: 999px;
	background: var(--smcg-surface-2);
	font-family: var(--smcg-serif);
	font-size: 0.85rem;
	color: var(--smcg-text-2);
}
.smcg-fp-chip b { color: var(--smcg-heading); font-weight: 600; }

/* Abschluss: Zusammenfassungszeilen mit Label + "Bearbeiten"-Sprungmarke. */
.smcg-summary-head {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
}
.smcg-summary-portrait {
	width: 72px; height: 72px;
	border-radius: var(--smcg-r-md);
	object-fit: cover;
	border: 1px solid var(--smcg-line);
	flex-shrink: 0;
}
.smcg-summary-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
	padding: 0.75rem 0;
	border-top: 1px solid var(--smcg-line);
}
.smcg-summary-row:first-of-type { border-top: none; }
.smcg-summary-row__label {
	font-family: var(--smcg-body);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--smcg-secondary);
	display: block;
	margin-bottom: 0.2rem;
}
.smcg-summary-row__text { margin: 0; }
.smcg-summary-row .smcg-btn { flex-shrink: 0; }

.smcg-choices {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 0.75rem;
}
.smcg-choice {
	text-align: left;
	cursor: pointer;
	background: var(--smcg-surface);
	border: 1px solid var(--smcg-line);
	border-radius: var(--smcg-r-md);
	padding: 1rem;
	color: var(--smcg-text);
	transition: transform var(--smcg-dur) var(--smcg-ease),
		border-color var(--smcg-dur) var(--smcg-ease),
		background-color var(--smcg-dur) var(--smcg-ease);
}
.smcg-choice:hover { transform: translateY(-2px); border-color: var(--smcg-accent); }
/* Mehrfach wählbare Stärken: eigener Stepper statt Ein/Aus-Klick, daher kein
 * Zeiger-Cursor/Hover-Lift auf der gesamten Karte (nur die +/- Buttons sind
 * interaktiv). */
.smcg-choice--stepper { cursor: default; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.smcg-choice--stepper:hover { transform: none; }
.smcg-choice.is-selected {
	border-color: var(--smcg-accent);
	background: var(--smcg-selected);
	box-shadow: var(--smcg-inset);
}
/* Rassen-gebundene Optionen (z. B. Kulturen nur für bestimmte Rassen) - bleibt
   klickbar, zeigt aber einen Hinweis statt die Auswahl zu übernehmen. */
.smcg-choice.is-locked { opacity: 0.55; }
.smcg-choice__lock { color: var(--smcg-danger, #b3432b); font-style: italic; }
.smcg-choice__name {
	font-family: var(--smcg-display);
	font-size: 1.05rem;
	color: var(--smcg-heading);
	margin-bottom: 0.25rem;
}
.smcg-choice__meta { font-size: 0.95rem; color: var(--smcg-text-2); }

/* Formularfelder */
.smcg-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-bottom: 1rem;
	max-width: 32rem;
}
.smcg-field__label {
	font-family: var(--smcg-body);
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--smcg-secondary);
}
.smcg-input {
	font-family: var(--smcg-serif);
	font-size: 1.15rem;
	color: var(--smcg-text);
	background: var(--smcg-surface);
	border: 1px solid var(--smcg-field-border);
	border-radius: var(--smcg-r-sm);
	padding: 0.65rem 0.85rem;
	transition: border-color var(--smcg-dur) var(--smcg-ease),
		box-shadow var(--smcg-dur) var(--smcg-ease);
}
.smcg-input:focus {
	/* Transparenter Rahmen statt „none": im Windows-Kontrastmodus wird er in
	   der Systemfarbe sichtbar, sonst wirkt nur der box-shadow (ab 2.38.0). */
	outline: 2px solid transparent;
	outline-offset: 1px;
	border-color: var(--smcg-accent);
	box-shadow: 0 0 0 3px var(--smcg-focus);
}
.smcg-input::placeholder { color: var(--smcg-text-2); }

/* Attribut-Stepper */
.smcg-attrs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 0.75rem;
}
.smcg-attr {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	padding: 0.85rem;
	border: 1px solid var(--smcg-line);
	border-radius: var(--smcg-r-md);
	background: var(--smcg-surface-2);
}
/* Fertigkeit mit bereits vergebenen Punkten hervorheben. */
.smcg-attr.is-filled {
	border-color: var(--smcg-accent);
	background: var(--smcg-surface);
}
.smcg-attr__name {
	font-family: var(--smcg-body);
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--smcg-secondary);
}
.smcg-attr__val {
	font-family: var(--smcg-display);
	font-size: 1.8rem;
	color: var(--smcg-heading);
	font-variant-numeric: tabular-nums;
}
.smcg-attr__steps { display: flex; gap: 0.5rem; }
.smcg-step-btn {
	width: 2rem; height: 2rem;
	border-radius: 999px;
	border: 1px solid var(--smcg-line-strong);
	background: var(--smcg-surface);
	color: var(--smcg-accent);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	transition: transform var(--smcg-dur) var(--smcg-ease), background-color var(--smcg-dur) var(--smcg-ease);
}
.smcg-step-btn:hover { background: var(--smcg-hover); }
.smcg-step-btn:active { transform: scale(0.9); }
.smcg-attr__mod { font-size: 0.85rem; color: var(--smcg-text-2); }
.smcg-attr__mod b { color: var(--smcg-success); }
.smcg-meister-bonus { font-weight: 600; color: var(--smcg-accent, var(--smcg-success)); }

.smcg-pool {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	font-family: var(--smcg-serif);
	font-size: 1.1rem;
	color: var(--smcg-text-2);
}
.smcg-pool b {
	font-family: var(--smcg-display);
	font-size: 1.5rem;
	color: var(--smcg-heading);
	font-variant-numeric: tabular-nums;
}
.smcg-pool.is-over b { color: var(--smcg-danger); }

.smcg-derived {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.35rem 1rem;
	font-family: var(--smcg-serif);
	font-size: 1.05rem;
}
.smcg-derived dt { color: var(--smcg-text-2); }
/* ⓘ-Symbole: gedämpft über die Sekundärfarbe statt über Deckkraft (vorher 0.6 →
   nur 2,4–2,7:1). Gilt auch für .smcg-info-icon (Erklärtexte, ab 2.39.0). */
.smcg-derived__info,
.smcg-info-icon { cursor: help; color: var(--smcg-text-2); }
.smcg-derived dd {
	margin: 0;
	text-align: right;
	font-family: var(--smcg-display);
	color: var(--smcg-heading);
	font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
 * Toast
 * ---------------------------------------------------------------------- */

.smcg-toast {
	position: fixed;
	left: 50%;
	top: 1.25rem;
	transform: translateX(-50%) translateY(-1rem);
	background: var(--smcg-surface);
	border: 1px solid var(--smcg-line-strong);
	border-radius: 999px;
	padding: 0.7rem 1.4rem;
	color: var(--smcg-text);
	box-shadow: var(--smcg-shadow);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--smcg-dur) var(--smcg-ease), transform var(--smcg-dur) var(--smcg-ease);
	z-index: 100000;
}
.smcg-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.smcg-toast--error { border-color: var(--smcg-danger); color: var(--smcg-danger); }
/* Ab 2.55.0: Der Toast hängt am <body>, außerhalb von .smcg – dort fehlen die
   Farbvariablen, er war durchsichtig. Feste Rückfallwerte (hell/dunkel, AA),
   lange Meldungen (z. B. Upload abgelehnt) umbrechen statt aus dem Bild laufen. */
body > .smcg-toast {
	background: var(--smcg-surface, #ffffff);
	color: var(--smcg-text, #182433);
	border-color: var(--smcg-line-strong, rgba(29, 78, 134, 0.38));
	box-shadow: var(--smcg-shadow, 0 18px 50px -20px rgba(16, 38, 66, 0.45));
	width: max-content;
	max-width: min(40rem, calc(100vw - 2rem));
	border-radius: 1.25rem;
	text-align: center;
	line-height: 1.4;
}
body > .smcg-toast--error { border-color: var(--smcg-danger, #a32b22); color: var(--smcg-danger, #a32b22); }
html.ht-dunkel body > .smcg-toast { background: #182838; color: #dce8f2; border-color: rgba(120, 170, 220, 0.35); }
html.ht-dunkel body > .smcg-toast--error { border-color: #e0857c; color: #e0857c; }

/* -------------------------------------------------------------------------
 * Eintritts-Animation
 * ---------------------------------------------------------------------- */

.smcg-fade-in { animation: smcg-fade 0.55s var(--smcg-ease) both; }
@keyframes smcg-fade {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Ressourcen-Zeilen (Wert + Stepper + Bemerkung) */
.smcg-resrow {
	border: 1px solid var(--smcg-line);
	border-radius: var(--smcg-r-md);
	background: var(--smcg-surface-2);
	padding: 0.6rem 0.75rem;
	margin-bottom: 0.5rem;
}
.smcg-resrow.is-filled { border-color: var(--smcg-accent); background: var(--smcg-surface); }
.smcg-resrow__head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.smcg-resrow__head .smcg-attr__name { flex: 1 1 6rem; }
.smcg-resrow__sel { flex: 1 1 9rem; min-width: 8rem; }
.smcg-resrow__note { width: 100%; margin-top: 0.5rem; }

/* Charakterbild */
.smcg-charimg {
	display: block;
	max-width: 180px;
	height: auto;
	margin: 0.5rem 0;
	border-radius: var(--smcg-r-md);
	border: 1px solid var(--smcg-line-strong);
	box-shadow: var(--smcg-inset);
}
.smcg-charimg--sheet { max-width: 220px; margin: 0 auto 1rem; }

/* -------------------------------------------------------------------------
 * Touch- / Mobil-Optimierung
 * ---------------------------------------------------------------------- */

/* Tap-Verzögerung & Doppeltipp-Zoom auf interaktiven Elementen vermeiden. */
.smcg-btn,
.smcg-step-btn,
.smcg-choice,
.smcg-input { touch-action: manipulation; }

/* Auf Touch-Geräten größere Fingerziele (Desktop/Maus bleibt unverändert). */
@media (pointer: coarse) {
	.smcg-step-btn {
		width: 2.75rem;   /* 44px – empfohlene Mindestgröße */
		height: 2.75rem;
		font-size: 1.3rem;
	}
	.smcg-attr__steps { gap: 0.85rem; }
	.smcg-choice { padding-top: 0.95rem; padding-bottom: 0.95rem; }
}

/* Sehr schmale Screens: etwas kompaktere Abstände, ohne die Optik zu brechen. */
@media (max-width: 560px) {
	.smcg-attrs { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 0.6rem; }
	.smcg-attr { padding: 0.7rem 0.5rem; }
	.smcg-choices { grid-template-columns: 1fr; }
	.smcg-card__inner { padding-left: 1rem; padding-right: 1rem; }
	.smcg-head { flex-wrap: wrap; gap: 0.6rem; }
}

/* -------------------------------------------------------------------------
 * Reduced Motion
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.smcg *,
	.smcg *::before,
	.smcg *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/* -------------------------------------------------------------------------
 * Steigerungs-Button (↑ N EP) + Bestätigungs-Dialog
 * ---------------------------------------------------------------------- */

/* Kleiner ↑-Badge neben Attribut oder Fertigkeit */
.smcg-steiger-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.15rem;
	font-family: var(--smcg-body);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--smcg-accent);
	background: rgba(47, 118, 189, 0.08);
	border: 1px solid rgba(47, 118, 189, 0.25);
	border-radius: 999px;
	padding: 0.15rem 0.45rem;
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s, transform 0.1s;
	flex-shrink: 0;
	touch-action: manipulation;
}
.smcg-steiger-btn:hover {
	background: rgba(47, 118, 189, 0.18);
	border-color: var(--smcg-accent);
	transform: translateY(-1px);
}
.smcg-steiger-btn:active { transform: scale(0.95); }

/* Bestätigungs-Dialog: Kosten-Anzeige + Button-Reihe */
.smcg-steiger-kosten {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	font-family: var(--smcg-serif);
	font-size: 1rem;
	color: var(--smcg-text-2);
	padding: 0.6rem 0;
}
.smcg-steiger-kosten__sep { color: var(--smcg-line-strong); }

.smcg-modal__body-btns {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

/* -------------------------------------------------------------------------
 * Inventar
 * ---------------------------------------------------------------------- */

.smcg-inv-shopbtn {
	margin: 0.75rem 0 1rem;
}

.smcg-inv-list {
	display: flex;
	flex-direction: column;
}

.smcg-inv-row {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.45rem 0.5rem;
	border-bottom: 1px solid var(--smcg-line);
	border-radius: var(--smcg-r-sm);
}
.smcg-inv-row:last-child { border-bottom: none; }
.smcg-inv-row.is-angelegt {
	background: var(--smcg-selected);
	border-bottom-color: transparent;
}

.smcg-inv__name {
	font-family: var(--smcg-display);
	font-size: 0.95rem;
	color: var(--smcg-heading);
	flex: 0 0 auto;
}

.smcg-inv__meta {
	flex: 1;
	font-family: var(--smcg-serif);
	font-size: 0.85rem;
	color: var(--smcg-text-2);
}

/* An-/Ablegen-Schalter */
.smcg-equip-toggle {
	font-family: var(--smcg-body);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--smcg-accent);
	background: rgba(47, 118, 189, 0.08);
	border: 1px solid rgba(47, 118, 189, 0.3);
	border-radius: 999px;
	padding: 0.2rem 0.7rem;
	cursor: pointer;
	flex-shrink: 0;
	touch-action: manipulation;
	transition: background-color 0.15s, color 0.15s;
}
.smcg-equip-toggle:hover { background: rgba(47, 118, 189, 0.18); }
.smcg-equip-toggle.is-on {
	background: var(--smcg-accent);
	color: var(--smcg-on-accent);
	border-color: var(--smcg-accent);
}

/* Löschen-Button */
.smcg-inv__del {
	background: transparent;
	border: none;
	font-size: 1rem;
	cursor: pointer;
	opacity: 0.75; /* vorher 0.4 – Bedienelement muss erkennbar sein (WCAG 1.4.11) */
	padding: 0.15rem 0.3rem;
	flex-shrink: 0;
	transition: opacity 0.15s, transform 0.1s;
	touch-action: manipulation;
}
.smcg-inv__del:hover { opacity: 1; transform: scale(1.15); }

@media (pointer: coarse) {
	.smcg-inv__del { font-size: 1.2rem; padding: 0.3rem 0.4rem; }
}

/* -------------------------------------------------------------------------
 * Initiative-Wurf (Attribute-Block)
 * ---------------------------------------------------------------------- */

.smcg-ini {
	margin-top: 1rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--smcg-line);
}
.smcg-ini-btn { width: 100%; justify-content: center; }
.smcg-ini-result { margin-top: 0.5rem; }
.smcg-freewurf { margin-top: 1.75rem; }
.smcg-freewurf h3 { margin: 0 0 0.5rem; }
.smcg-ini-result:empty { margin-top: 0; }

/* -------------------------------------------------------------------------
 * Entwicklung-Block (EP / Geld / Notizen)
 * ---------------------------------------------------------------------- */

.smcg-entw-row {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	flex-wrap: wrap;
	margin: 0.9rem 0 0.35rem;
}
.smcg-entw-row:first-child { margin-top: 0; }
.smcg-entw-stand {
	font-family: var(--smcg-display);
	color: var(--smcg-heading);
	font-variant-numeric: tabular-nums;
}
.smcg-entw-form {
	display: flex;
	gap: 0.4rem;
	flex-wrap: wrap;
	align-items: center;
}
.smcg-notizen {
	width: 100%;
	resize: vertical;
	min-height: 5.5rem;
	font-family: var(--smcg-serif);
	line-height: 1.5;
}

/* -------------------------------------------------------------------------
 * Discord-Webhook
 * ---------------------------------------------------------------------- */

.smcg-webhook__row {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	flex-wrap: wrap;
}
.smcg-webhook-input {
	flex: 1;
	min-width: 12rem;
	font-size: 0.9rem;
}

/* -------------------------------------------------------------------------
 * Shop (Einkaufen)
 * ---------------------------------------------------------------------- */

.smcg-shop-money {
	font-family: var(--smcg-serif);
	font-size: 1.05rem;
	color: var(--smcg-text-2);
	margin-bottom: 1rem;
}
.smcg-shop-money__val {
	font-family: var(--smcg-display);
	color: var(--smcg-heading);
}

.smcg-shop-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}
.smcg-shop-search { max-width: 16rem; flex: 1; }
/* Kategorie-Auswahl + Suche (Reiter „Gegenstände"); am Handy untereinander. */
.smcg-shop-filter { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; flex: 1 1 100%; min-width: 0; }
.smcg-shop-kat { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; flex: 0 1 22rem; min-width: 0; max-width: 100%; }
.smcg-shop-kat[hidden] { display: none; }
.smcg-shop-kat label { color: var(--smcg-text-2, #666); }
.smcg-shop-kat select { flex: 1 1 14rem; width: auto; min-width: 0; max-width: 100%; box-sizing: border-box; }

.smcg-shop-list {
	display: flex;
	flex-direction: column;
}

.smcg-shop-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 0.5rem;
	border-bottom: 1px solid var(--smcg-line);
}
.smcg-shop-row:last-child { border-bottom: none; }
.smcg-shop-row:hover { background: var(--smcg-hover); }

.smcg-shop-row__main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.smcg-shop__name {
	font-family: var(--smcg-display);
	font-size: 1rem;
	color: var(--smcg-heading);
}
.smcg-shop__werte {
	font-family: var(--smcg-serif);
	font-size: 0.85rem;
	color: var(--smcg-text-2);
}
.smcg-shop__preis {
	font-family: var(--smcg-display);
	font-size: 0.95rem;
	color: var(--smcg-heading);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.smcg-shop__buy { flex-shrink: 0; padding: 0.45rem 0.9rem; font-size: 0.85rem; }

/* Feilsch-Bereich im Kauf-Modal */
.smcg-shop-feilsch {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--smcg-line);
}
.smcg-shop-feilsch__row {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 0.75rem;
}
.smcg-shop-feilsch__row .smcg-input { flex: 1; min-width: 7rem; }

.smcg-shop-finalprice {
	font-family: var(--smcg-display);
	font-size: 1.05rem;
	color: var(--smcg-heading);
	margin: 0.75rem 0 0.5rem;
}

/* Ab 2.51.0: Preis in % (Vorgabe 100), Feilscher als Schalter. */
.smcg-kauf__reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.smcg-kauf__reihe .smcg-field__label { flex: 1 0 100%; margin: 0; }
.smcg-kauf__reihe .smcg-input--zahl { width: 6rem; }
.smcg-kauf__feilscher[aria-pressed="true"] { background: var(--smcg-accent); border-color: var(--smcg-accent); color: var(--smcg-on-accent); }
.smcg-kauf .smcg-input[aria-invalid="true"] { border-color: var(--smcg-danger, #b3261e); }

@media (max-width: 560px) {
	.smcg-shop__buy { width: 100%; margin-top: 0.4rem; }
	.smcg-shop-row { flex-wrap: wrap; }
}

/* -------------------------------------------------------------------------
 * Ausklappbare Sektionen (collapsible)
 * ---------------------------------------------------------------------- */

.smcg-collapsible {
	margin-top: 0.75rem;
}

.smcg-collapsible__toggle {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--smcg-body);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--smcg-secondary);
	background: transparent;
	border: none;
	padding: 0.3rem 0;
	cursor: pointer;
	width: 100%;
	text-align: left;
	transition: color 0.15s;
}
.smcg-collapsible__toggle:hover { color: var(--smcg-accent); }

.smcg-collapsible__icon {
	font-size: 0.65rem;
	flex-shrink: 0;
}

.smcg-collapsible__body {
	margin-top: 0.35rem;
}

/* -------------------------------------------------------------------------
 * Kaufen-Liste (verfügbare Zauber / Meisterschaften)
 * ---------------------------------------------------------------------- */

.smcg-kaufen-head {
	font-size: 0.8rem;
	color: var(--smcg-secondary);
	letter-spacing: 0.05em;
}

.smcg-kaufen-list {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.smcg-kaufen-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	padding: 0.25rem 0;
	border-bottom: 1px solid var(--smcg-line);
}
.smcg-kaufen-row:last-child { border-bottom: none; }

.smcg-kaufen__name {
	font-family: var(--smcg-display);
	font-size: 0.88rem;
	color: var(--smcg-heading);
	flex: 1;
}
.smcg-kaufen__meta {
	font-family: var(--smcg-serif);
	font-size: 0.82rem;
	color: var(--smcg-text-2);
}

/* -------------------------------------------------------------------------
 * Charakterblatt – Karten-Grid (interaktives Sheet)
 * ---------------------------------------------------------------------- */

/* Äußeres Grid: zwei Spalten auf Desktop, eine auf Mobil. */
.smcg-sheet {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	gap: 1rem;
	margin-top: 0.5rem;
}

/* Einzelne Sektion (Karte). */
.smcg-sheet-card {
	background: linear-gradient(160deg, var(--smcg-paper-1), var(--smcg-paper-2));
	border: 1px solid var(--smcg-line);
	border-radius: var(--smcg-r-md);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Kartenkopf mit Abschnittstitel. */
.smcg-sheet-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.5rem 1rem;
	background: rgba(29, 78, 134, 0.05);
	border-bottom: 1px solid var(--smcg-line);
}

@media screen {
.smcg.smcg--dark .smcg-sheet-card__head {
	background: rgba(120, 170, 220, 0.06);
}
}

/* h3 im Kartenkopf: kleiner, uppercase, sekundäre Farbe. */
.smcg-sheet-card__head h3 {
	margin: 0;
	font-family: var(--smcg-body);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--smcg-secondary);
	line-height: 1.4;
}

/* Karteninhalt. */
.smcg-sheet-card__body {
	padding: clamp(0.75rem, 2vw, 1.1rem);
	flex: 1;
}

/* Aktions-Slot im Kartenkopf (für spätere Würfelbuttons etc.). */
.smcg-sheet-card__head-actions {
	display: flex;
	gap: 0.4rem;
	margin-left: auto;
}

/* Volle Breite (Zustandskarte über beide Spalten). */
.smcg-sheet-card--wide {
	grid-column: 1 / -1;
}

/* -------------------------------------------------------------------------
 * Zustandsleiste (LP / FO / Splitter / EP)
 * ---------------------------------------------------------------------- */

/* Äußeres Layout: Bild links, Werte rechts. */
.smcg-zustand {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
	flex-wrap: wrap;
}

/* Werteblock */
.smcg-zustand__bars {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	min-width: 220px;
}

/* Einzelne Zeile (Icon + Label + Input + Max) */
.smcg-zustand__row {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.smcg-zustand__icon {
	display: inline-flex;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 999px;
	flex-shrink: 0;
}
.smcg-zustand__icon--lp  { background: #c0392b; box-shadow: 0 0 8px rgba(192,57,43,.4); }
.smcg-zustand__icon--fo  { background: #2980b9; box-shadow: 0 0 8px rgba(41,128,185,.4); }
.smcg-zustand__icon--sp  { background: var(--smcg-accent); box-shadow: 0 0 8px rgba(47,118,189,.4); transform: rotate(45deg); border-radius: 3px; }

.smcg-zustand__label {
	font-family: var(--smcg-body);
	font-size: 0.72rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--smcg-secondary);
	min-width: 3.5rem;
}

/* ---- Zustände (Splittermond) ---- */
.smcg-zustaende {
	width: 100%;
	margin-top: 1.1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--smcg-line);
}
.smcg-zustaende__head {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	flex-wrap: wrap;
	margin-bottom: 0.7rem;
}
.smcg-zadd { max-width: 18rem; padding: 0.3rem 0.5rem; font-size: 0.9rem; }
.smcg-zchips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.smcg-zchip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.55rem;
	border: 1px solid var(--smcg-line-strong);
	border-radius: 999px;
	background: var(--smcg-card-shell);
	font-family: var(--smcg-body);
	font-size: 0.9rem;
	line-height: 1.2;
}
.smcg-zchip__name { font-weight: 600; color: var(--smcg-accent); }
.smcg-zchip__stufe { color: var(--smcg-text-2); font-size: 0.82rem; }
.smcg-zchip__step,
.smcg-zchip__rm {
	border: none;
	background: transparent;
	cursor: pointer;
	color: var(--smcg-text-2);
	font-size: 1rem;
	line-height: 1;
	padding: 0 0.25rem;
	border-radius: 50%;
}
.smcg-zchip__step:hover,
.smcg-zchip__rm:hover { color: var(--smcg-accent); }
.smcg-zchip__rm { font-size: 1.15rem; }
.smcg-zchip__txt {
	width: 9rem;
	padding: 0.15rem 0.4rem;
	font-size: 0.82rem;
	border: 1px solid var(--smcg-line);
	border-radius: 0.4rem;
	background: transparent;
	color: inherit;
}
.smcg-zchip__info { cursor: help; color: var(--smcg-text-2); font-size: 0.95rem; }

/* ---- NPC-/Gegner-Statblocks (Kampagnenmodul, SL) ---- */
.smcg-npc {
	border: 1px solid var(--smcg-line);
	border-radius: 0.6rem;
	padding: 0.7rem 0.9rem;
	margin: 0.6rem 0;
	background: var(--smcg-card-shell);
}
.smcg-npc__name { font-family: var(--smcg-display); font-weight: 600; color: var(--smcg-accent); }
.smcg-npc__actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.smcg-npc__quick { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; margin: 0.5rem 0; }
.smcg-npc__stat { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.92rem; }
.smcg-npc__statlbl { color: var(--smcg-text-2); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.smcg-npc__tick { width: 4.5rem; padding: 0.2rem 0.4rem; }
.smcg-npc__atk { display: flex; align-items: center; gap: 0.3rem; font-size: 0.92rem; padding: 0.15rem 0; }
.smcg-npc__notiz { font-style: italic; }

.smcg-npc-form { padding: 0.5rem 0; }
.smcg-npc-grid { display: grid; grid-template-columns: repeat( auto-fill, minmax( 8rem, 1fr ) ); gap: 0.5rem 0.8rem; margin: 0.5rem 0; }
.smcg-npc-grid__cell { margin: 0; }
.smcg-npc-atkrow { display: grid; grid-template-columns: 1.4fr 0.7fr 1.4fr 0.7fr auto; gap: 0.4rem; margin: 0.3rem 0; }
.smcg-npc-form__actions { display: flex; gap: 0.5rem; margin-top: 0.8rem; }

/* Abstand zwischen den Karten der Kampagnen-Detailansicht. */
.smcg-camp-detail > * { margin-bottom: 1.4rem; }
.smcg-camp-detail > *:last-child { margin-bottom: 0; }

/* Heldengrad-Vorbelegung im NPC-Formular. */
.smcg-npc-hg { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0.4rem 0 0.6rem; }
.smcg-npc-hg .smcg-field__label { margin: 0; }

/* Spaltenüberschriften der Angriffe. */
.smcg-npc-atkhead { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--smcg-text-2); margin-bottom: 0.1rem; }

/* NPC-Eintrag in der gemeinsamen Tickleiste. */
.smcg-tick-item--npc { background: rgba( 127, 127, 127, 0.06 ); }
.smcg-tick-item__tag {
	font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em;
	padding: 0.1rem 0.45rem; border-radius: 999px;
	border: 1px solid var(--smcg-line-strong); color: var(--smcg-text-2);
	margin-left: 0.4rem;
}

/* Banner: automatisch verrechnete Zustands-Modifikatoren (Phase B). */
.smcg-zmod {
	margin-top: 1rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--smcg-line);
	border-left: 3px solid var(--smcg-accent);
	border-radius: 0.5rem;
	background: var(--smcg-card-shell);
}
.smcg-zmod__head { margin: 0 0 0.35rem; font-family: var(--smcg-display); color: var(--smcg-accent); font-size: 0.95rem; }
.smcg-zmod__list { margin: 0; padding-left: 1.1rem; font-size: 0.9rem; color: var(--smcg-text-2); }
.smcg-zmod__list li { margin: 0.1rem 0; }

/* ---- Logout-Teaser (ausgeloggte Besucher) ---- */
.smcg-teaser { width: 100%; max-width: 1100px; margin: 2rem auto 0; }
.smcg-teaser__hint { text-align: center; margin: 0 0 0.4rem; }
.smcg-teaser__hint a {
	display: inline-block;
	font-family: var(--smcg-body);
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--smcg-accent);
	border: 1px solid var(--smcg-line-strong);
	border-radius: 999px;
	padding: 0.45rem 1.1rem;
	text-decoration: none;
}
.smcg-teaser__hint a:hover { background: var(--smcg-card-shell); }
.smcg-teaser__head {
	text-align: center;
	font-family: var(--smcg-display);
	color: var(--smcg-accent);
	margin: 0.8rem 0 1rem;
}
.smcg-teaser-grid { opacity: 0.92; }
.smcg-teaser-card { pointer-events: none; filter: grayscale(0.15); }
.smcg-teaser-card .smcg-camp__title { color: var(--smcg-text-2); }

/* Zahlen-Input für LP/FO */
.smcg-zustand__input {
	width: 4.5rem;
	text-align: center;
	font-family: var(--smcg-display);
	font-size: 1.2rem;
	padding: 0.35rem 0.5rem;
}

.smcg-zustand__max {
	font-family: var(--smcg-serif);
	color: var(--smcg-text-2);
	font-size: 1rem;
}

/* EP + Heldengrad Zeile */
.smcg-zustand__ep {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	align-items: center;
	padding-top: 0.5rem;
	border-top: 1px solid var(--smcg-line);
	margin-top: 0.25rem;
}
.smcg-zustand__ep-val {
	font-family: var(--smcg-serif);
	color: var(--smcg-text-2);
	font-size: 0.95rem;
}

/* -------------------------------------------------------------------------
 * Charakterbild-Box (Anzeige + Upload/Austausch)
 * ---------------------------------------------------------------------- */

.smcg-bild-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	flex: 0 0 auto;
}
.smcg-bild-placeholder {
	width: 180px;
	height: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px dashed var(--smcg-line-strong);
	border-radius: var(--smcg-r-md);
	color: var(--smcg-text-2);
	font-family: var(--smcg-serif);
	background: var(--smcg-surface-2);
}
.smcg-bild-btn { font-size: 0.8rem; padding: 0.4rem 0.9rem; }

/* -------------------------------------------------------------------------
 * Pinsel + LP-Raster + FO-Kästchen (Lebensenergie / Fokus)
 * ---------------------------------------------------------------------- */

/* Pinsel-Auswahl */
.smcg-brush {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin-bottom: 0.75rem;
}
.smcg-brush__btn {
	font-family: var(--smcg-body);
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	padding: 0.3rem 0.65rem;
	border-radius: 999px;
	border: 1px solid var(--smcg-line-strong);
	background: var(--smcg-surface);
	color: var(--smcg-text-2);
	cursor: pointer;
	touch-action: manipulation;
	transition: transform 0.1s, box-shadow 0.15s, border-color 0.15s;
}
.smcg-brush__btn:active { transform: scale(0.96); }
.smcg-brush__btn.is-active {
	border-color: var(--smcg-accent);
	box-shadow: 0 0 0 2px var(--smcg-focus);
	color: var(--smcg-text);
	font-weight: 700;
}
.smcg-brush__btn--kanalisiert.is-active { border-color: #7c5cbf; box-shadow: 0 0 0 2px rgba(124,92,191,0.4); }
.smcg-brush__btn--erschoepft.is-active  { border-color: #e0a106; box-shadow: 0 0 0 2px rgba(224,161,6,0.4); }
.smcg-brush__btn--verzehrt.is-active    { border-color: #c0392b; box-shadow: 0 0 0 2px rgba(192,57,43,0.4); }

/* Pool-Block (LP / FO) */
.smcg-pool-block { margin-bottom: 0.85rem; }
.smcg-pool-head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-bottom: 0.4rem;
}
.smcg-pool-avail {
	font-family: var(--smcg-display);
	color: var(--smcg-heading);
	font-variant-numeric: tabular-nums;
}
.smcg-pool-sep   { color: var(--smcg-line-strong); }
.smcg-pool-stufe {
	font-family: var(--smcg-serif);
	font-size: 0.9rem;
	color: var(--smcg-text-2);
}

/* LP-Raster: Zeilen je Gesundheitsstufe */
.smcg-lp-grid { display: flex; flex-direction: column; gap: 0.25rem; }
.smcg-lp-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.2rem 0.35rem;
	border-radius: var(--smcg-r-sm);
}
.smcg-lp-row.is-current { background: var(--smcg-selected); }
.smcg-lp-row__label {
	flex: 0 0 7.5rem;
	font-family: var(--smcg-body);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--smcg-secondary);
}
.smcg-lp-row.is-current .smcg-lp-row__label { color: var(--smcg-accent); font-weight: 700; }
.smcg-lp-row__malus {
	flex: 0 0 1.6rem;
	text-align: right;
	font-family: var(--smcg-display);
	color: var(--smcg-text-2);
	font-variant-numeric: tabular-nums;
}
.smcg-lp-cells, .smcg-fo-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
}
.smcg-fo-grid { margin-top: 0.25rem; }

/* Einzelnes Kästchen */
.smcg-cell {
	width: 1.45rem;
	height: 1.45rem;
	border: 1px solid var(--smcg-line-strong);
	border-radius: 4px;
	background: var(--smcg-surface);
	color: #fff;
	font-size: 0.8rem;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	touch-action: manipulation;
	transition: transform 0.08s, background-color 0.12s;
}
.smcg-cell:hover { transform: scale(1.1); }
.smcg-cell--kanalisiert { background: #7c5cbf; border-color: #5e44a0; }
.smcg-cell--erschoepft  { background: #e0a106; border-color: #b07f00; color: #1a1205; }
.smcg-cell--verzehrt    { background: #c0392b; border-color: #91271c; }

@media (pointer: coarse) {
	.smcg-cell { width: 1.8rem; height: 1.8rem; font-size: 0.95rem; }
}

/* -------------------------------------------------------------------------
 * Splitter-Dots
 * ---------------------------------------------------------------------- */

.smcg-splitter {
	display: flex;
	gap: 0.35rem;
	align-items: center;
}

.smcg-splitter__dot {
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 999px;
	border: 2px solid var(--smcg-accent);
	background: transparent;
	cursor: pointer;
	transition: background-color var(--smcg-dur) var(--smcg-ease),
		box-shadow var(--smcg-dur) var(--smcg-ease),
		transform var(--smcg-dur) var(--smcg-ease);
	touch-action: manipulation;
}

.smcg-splitter__dot:hover {
	background: var(--smcg-hover);
	transform: scale(1.15);
}

.smcg-splitter__dot.is-full {
	background: var(--smcg-accent);
	box-shadow: 0 0 8px rgba(47, 118, 189, 0.5);
}

.smcg-splitter__dot.is-full:hover {
	background: var(--smcg-accent-2);
}

@media (pointer: coarse) {
	.smcg-splitter__dot { width: 2rem; height: 2rem; }
}

/* -------------------------------------------------------------------------
 * History-Tabelle
 * ---------------------------------------------------------------------- */

.smcg-history-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--smcg-serif);
	font-size: 0.95rem;
}

.smcg-history-table th {
	text-align: left;
	font-family: var(--smcg-body);
	font-size: 0.68rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--smcg-secondary);
	padding: 0.3rem 0.5rem;
	border-bottom: 2px solid var(--smcg-line);
}

.smcg-history-table td {
	padding: 0.4rem 0.5rem;
	border-bottom: 1px solid var(--smcg-line);
	vertical-align: top;
}
.smcg-history-table tr:last-child td { border-bottom: none; }
.smcg-history-table tr:hover td { background: var(--smcg-hover); }
.smcg-history__undo { margin-left: 0.75rem; font-size: 0.8rem; padding: 0.1rem 0.5rem; }

.smcg-history__date {
	white-space: nowrap;
	color: var(--smcg-text-2);
	font-size: 0.82rem;
	width: 9rem;
	font-variant-numeric: tabular-nums;
}

.smcg-history__typ {
	text-align: center;
	width: 1.75rem;
	font-size: 1rem;
}

.smcg-history__titel { color: var(--smcg-text); }

.smcg-history__more {
	padding-top: 0.75rem;
	text-align: center;
}

.smcg-history__leer {
	padding: 1.25rem 0.5rem;
	text-align: center;
	color: var(--smcg-text-2);
	font-family: var(--smcg-serif);
	font-style: italic;
}

/* -------------------------------------------------------------------------
 * EP-Formular (in der Zustandskarte)
 * ---------------------------------------------------------------------- */

.smcg-ep-form {
	padding-top: 0.6rem;
	border-top: 1px solid var(--smcg-line);
	margin-top: 0.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.smcg-ep-display {
	font-family: var(--smcg-serif);
	font-size: 0.95rem;
	color: var(--smcg-text-2);
}

.smcg-ep-display .smcg-ep-ges,
.smcg-ep-display .smcg-ep-verf {
	font-family: var(--smcg-display);
	color: var(--smcg-heading);
}

.smcg-ep-inputs {
	display: flex;
	gap: 0.4rem;
	flex-wrap: wrap;
	align-items: center;
}

.smcg-ep-input,
.smcg-ep-grund { max-width: 8rem; }

.smcg-ep-grund { flex: 1; }

/* -------------------------------------------------------------------------
 * Geld-Formular (in der Ressourcen-Karte)
 * ---------------------------------------------------------------------- */

.smcg-geld-block {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-bottom: 0.85rem;
	padding-bottom: 0.85rem;
	border-bottom: 1px solid var(--smcg-line);
}

.smcg-geld-display {
	font-family: var(--smcg-serif);
	font-size: 1.05rem;
}

.smcg-geld-val {
	font-family: var(--smcg-display);
	color: var(--smcg-heading);
}

.smcg-geld-form {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	flex-wrap: wrap;
}

.smcg-geld-input  { width: 5rem; }
.smcg-geldt-input { width: 4rem; }
.smcg-geld-grund  { flex: 1; min-width: 8rem; }

/* -------------------------------------------------------------------------
 * Zauber-Tabelle
 * ---------------------------------------------------------------------- */

.smcg-magic-label { margin: 0 0 0.35rem; font-size: 0.95rem; }

/* Scrollbar-Container für schmale Screens */
.smcg-zauber-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-top: 0.25rem;
}

.smcg-zauber-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--smcg-serif);
	font-size: 0.9rem;
	min-width: 480px;
}

.smcg-zauber-table th {
	text-align: left;
	font-family: var(--smcg-body);
	font-size: 0.65rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--smcg-secondary);
	padding: 0.3rem 0.5rem;
	border-bottom: 2px solid var(--smcg-line);
	white-space: nowrap;
}

.smcg-zauber-table td {
	padding: 0.4rem 0.5rem;
	border-bottom: 1px solid var(--smcg-line);
	vertical-align: top;
	color: var(--smcg-text);
}

.smcg-zauber-table tr:last-child td { border-bottom: none; }

.smcg-zauber-table tr:hover td { background: var(--smcg-hover); }

/* Erste Spalte (Name) fett */
.smcg-zauber-table td:first-child {
	font-family: var(--smcg-display);
	font-size: 0.88rem;
	color: var(--smcg-heading);
}

.smcg-zauber__center { text-align: center; }

/* -------------------------------------------------------------------------
 * Fertigkeiten-Liste (ersetzt dl/dt/dd für Würfelbutton-Kompatibilität)
 * ---------------------------------------------------------------------- */

.smcg-skill-list { display: flex; flex-direction: column; }

.smcg-skill-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.3rem 0;
	border-bottom: 1px solid var(--smcg-line);
}
.smcg-skill-row:last-child { border-bottom: none; }

.smcg-skill__name {
	flex: 1;
	font-family: var(--smcg-serif);
	font-size: 1.05rem;
	color: var(--smcg-text);
}

.smcg-skill__fw {
	font-family: var(--smcg-display);
	font-size: 0.9rem;
	color: var(--smcg-heading);
	white-space: nowrap;
}

/* Würfel-Button (🎲) neben Attribut oder Fertigkeit */
.smcg-roll-btn {
	background: transparent;
	border: none;
	padding: 0.1rem 0.25rem;
	font-size: 1rem;
	cursor: pointer;
	opacity: 0.75; /* vorher 0.3 – Bedienelement muss erkennbar sein (WCAG 1.4.11) */
	transition: opacity 0.15s, transform 0.15s;
	touch-action: manipulation;
	flex-shrink: 0;
}
.smcg-roll-btn:hover { opacity: 1; transform: scale(1.2); }
.smcg-roll-btn:active { transform: scale(0.95); }

/* Schaden-Würfel-Zeile: Modifikator-Feld + Würfel-Button nebeneinander */
.smcg-schaden-roll {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}
.smcg-schaden-mod {
	padding: 0.15rem 0.3rem;
	text-align: center;
}

/* Attribut-Tile: Wert + Roll-Button nebeneinander */
.smcg-attr__bottom {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
}

/* -------------------------------------------------------------------------
 * Würfelmodal
 * ---------------------------------------------------------------------- */

.smcg-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	/* Über dem fixierten Divi-Header (z-index 99999), sonst rutscht das
	 * Schließen-X der Popups hinter das Menü (Tom-Fund 2026-09-14). */
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

/* Das Overlay hängt als <body>-Kind und trägt dafür die Klasse .smcg (damit die
 * CSS-Variablen greifen). Der dekorative Körnungs-Layer von .smcg soll hier aber
 * nicht über den Verdunkler gelegt werden. */
.smcg-modal-overlay::after { content: none; }

/* Native Dialoge (ab 2.40.0, Etappe 0): <dialog> im Top-Layer – liegt damit
 * ohne z-index über dem Divi-Header; Fokusfalle und Escape liefert der Browser.
 * Trägt .smcg für die Variablen, deshalb Rahmen/Hintergrund/Position von .smcg
 * hier zurücksetzen. Der Inhalt bleibt die bekannte .smcg-modal-Karte. */
dialog.smcg.smcg-dialog {
	position: fixed;
	inset: 0;
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	overflow: visible;
	width: min( 460px, calc( 100vw - 2rem ) );
	max-width: none;
	max-height: calc( 100vh - 2rem );
	height: fit-content;
}
dialog.smcg.smcg-dialog::after { content: none; }
dialog.smcg-dialog::backdrop { background: rgba( 0, 0, 0, 0.55 ); }
dialog.smcg-dialog .smcg-modal { max-height: calc( 100vh - 2rem ); }

/* Nur für Screenreader sichtbar (Live-Region für Ansagen). */
.smcg-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect( 0, 0, 0, 0 ) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Programmatisch fokussierte Überschriften/Titel: kein Fokusrahmen beim Klick,
 * aber sichtbar bei Tastaturbedienung bleibt der Rahmen des Auslösers. */
.smcg [tabindex="-1"]:focus:not( :focus-visible ) { outline: none; }

.smcg-modal {
	background: var(--smcg-surface);
	border: 1px solid var(--smcg-line-strong);
	border-radius: var(--smcg-r-md);
	box-shadow: var(--smcg-shadow);
	width: 100%;
	max-width: 460px;
	max-height: 90vh;
	overflow-y: auto;
	animation: smcg-fade 0.2s var(--smcg-ease) both;
}

.smcg-modal__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--smcg-line);
}
.smcg-modal__head h3 { margin: 0; }

.smcg-modal__close {
	background: transparent;
	border: none;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	color: var(--smcg-text-2);
	padding: 0;
	flex-shrink: 0;
	transition: color 0.15s;
}
.smcg-modal__close:hover { color: var(--smcg-text); }

.smcg-modal__body {
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* SG-Voreinstellungen */
.smcg-sg-presets { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.smcg-sg-input { max-width: 10rem; }

/* -------------------------------------------------------------------------
 * Würfelergebnis
 * ---------------------------------------------------------------------- */

.smcg-roll-result { min-height: 0.5rem; }
/* Ab 2.43.0: Erfolgschance und eigene Würfel im Probendialog. */
.smcg-roll-chance { margin: 0 0 0.75rem; font-size: 0.95rem; color: var(--smcg-text-2); font-variant-numeric: tabular-nums; }
.smcg-eigene { margin-top: 1rem; border-top: 1px solid var(--smcg-line); padding-top: 0.6rem; }
.smcg-eigene summary { cursor: pointer; color: var(--smcg-accent); font-weight: 600; }
.smcg-eigene[open] summary { margin-bottom: 0.4rem; }
.smcg-eigene__felder { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0; }
.smcg-eigene__wurf { width: 4.2rem; text-align: center; }

.smcg-dice-row {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--smcg-display);
	flex-wrap: wrap;
}

.smcg-die {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	border: 2px solid var(--smcg-line-strong);
	border-radius: var(--smcg-r-sm);
	font-size: 1.35rem;
	font-variant-numeric: tabular-nums;
	color: var(--smcg-heading);
	transition: border-color 0.2s;
}

.smcg-die--rolling {
	border-color: var(--smcg-accent);
	animation: smcg-die-shake 0.08s linear infinite;
}

/* Gezählte Würfel hervorheben, verworfene (Risiko/Sicherheit) abdunkeln. */
.smcg-die.is-counted {
	border-color: var(--smcg-accent);
	color: var(--smcg-heading);
	box-shadow: 0 0 8px rgba(47, 118, 189, 0.35);
}
.smcg-die.is-dropped {
	opacity: 0.4;
	text-decoration: line-through;
}
@keyframes smcg-die-shake {
	0%, 100% { transform: rotate(0deg); }
	33%       { transform: rotate(-6deg) scale(1.05); }
	67%       { transform: rotate(6deg) scale(1.05); }
}

.smcg-dice-sep {
	color: var(--smcg-text-2);
	font-family: var(--smcg-serif);
	font-size: 1rem;
}

.smcg-dice-total {
	font-size: 1.7rem;
	color: var(--smcg-heading);
	font-variant-numeric: tabular-nums;
}

/* Ergebnis-Verdikt */
.smcg-roll-verdict {
	padding: 0.55rem 0.85rem;
	border-radius: var(--smcg-r-sm);
	font-family: var(--smcg-display);
	font-size: 0.98rem;
}
.smcg-roll-verdict--erfolg  { background: rgba(63,122,68,0.12);  color: var(--smcg-success); }
.smcg-roll-verdict--kritisch { background: rgba(47,118,189,0.12); color: var(--smcg-accent); border: 1px solid var(--smcg-accent); }
.smcg-roll-verdict--fehl    { background: rgba(163,43,34,0.08);  color: var(--smcg-danger); }
.smcg-roll-verdict--patzer  { background: rgba(163,43,34,0.14);  color: var(--smcg-danger); border: 1px solid var(--smcg-danger); }
.smcg-roll-verdict--neutral { background: var(--smcg-surface-2); color: var(--smcg-text); }

/* -------------------------------------------------------------------------
 * Tab-Filter (Fertigkeiten-Kategorien)
 * ---------------------------------------------------------------------- */

.smcg-tabs {
	display: flex;
	gap: 0.2rem;
	flex-wrap: wrap;
	margin-bottom: 0.75rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--smcg-line);
}

.smcg-tab {
	font-family: var(--smcg-body);
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--smcg-text-2);
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--smcg-r-sm);
	padding: 0.28rem 0.7rem;
	cursor: pointer;
	transition: color var(--smcg-dur) var(--smcg-ease),
		background-color var(--smcg-dur) var(--smcg-ease),
		border-color var(--smcg-dur) var(--smcg-ease);
	touch-action: manipulation;
}

.smcg-tab:hover {
	color: var(--smcg-accent);
	background: var(--smcg-hover);
}

.smcg-tab.is-active {
	color: var(--smcg-accent);
	background: var(--smcg-selected);
	border-color: var(--smcg-line-strong);
	font-weight: 700;
}

/* -------------------------------------------------------------------------
 * Druck (Charakterblatt)
 * ---------------------------------------------------------------------- */

/* Sehr schmale Screens: Sheet-Karten einspaltlig. */
@media (max-width: 560px) {
	.smcg-sheet { grid-template-columns: 1fr; }
}

@media print {
	/* ---- Seitenformat ---- */
	/* Rand 0 hier, den Abstand bringt .smcg selbst mit (ab 2.50.2, s. u.).
	   Vorher margin: 11mm – das wirkt nur, wenn der Browser @page beachtet
	   UND im Druckdialog „Ränder: Standard“ steht. Mit „Keine“ (Firefox merkt
	   sich das je Drucker) lag der Bogen randlos auf dem Blatt. Unter Divi fiel
	   das nicht auf: Divis 80-%-Rahmen um den Inhalt blieb im Druck stehen. */
	@page { size: A4; margin: 0; }

	/* Hintergrundfarben (Kartenköpfe, LP/FO-Zellen, Splitter) mitdrucken. */
	* {
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
	}

	/* ---- Nur das Charakterblatt drucken, kein Theme-Drumherum, kein Vorlauf ----
	   Vorher: body{visibility:hidden} + .smcg{position:absolute;top:0}.
	   visibility:hidden reserviert weiterhin den Platz der ausgeblendeten
	   Elemente (Theme-Header, Menü, Sidebar) - und weil .smcg dadurch
	   relativ zu einem ggf. selbst position:relative gesetzten Theme-
	   Wrapper positioniert wurde statt zur echten Seite, blieb vor dem
	   Bogen eine Lücke in Höhe des (unsichtbaren, aber noch Platz
	   beanspruchenden) Seitenkopfes stehen. Jetzt: alles außer dem Bogen
	   selbst (und seinen Vorfahren) bekommt echtes display:none - das
	   entfernt reservierten Platz komplett, .smcg fließt normal ganz oben.
	   :has() ist in aktuellen Chromium-Versionen (die Basis von "Als PDF
	   speichern") unterstützt. Siehe CHARBOGEN-DRUCK-KONZEPT.md. */
	body :not(.smcg):not(.smcg *):not(:has(.smcg)) { display: none !important; }
	/* Druck immer hell (ab 2.50.1): Im Dunkelmodus des Themes steht am <html>
	   color-scheme: dark – Chrome malt dann die Seitenränder (@page-Rand)
	   schwarz, der Bogen wirkt randlos. */
	html, body {
		margin: 0 !important; padding: 0 !important;
		background: #fff !important; color-scheme: light !important;
	}
	.smcg {
		width: 100%;
		margin: 0 !important;
		/* Seitenrand als Innenabstand, der sich auf JEDER Seite wiederholt
		   (clone), unabhängig von Druckdialog und Browser. box-sizing, damit
		   width:100% + Rand nicht über das Blatt hinausläuft. */
		padding: 12mm !important;
		box-sizing: border-box;
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone;
		background: #fff;
		color: #000;
		font-size: 10pt;
	}
	.smcg::after { display: none; }
	.smcg-parch {
		box-shadow: none !important;
		background: #fff !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
	}

	/* Kein globales dekoratives ::before/::after mehr auf .smcg selbst: als
	   .smcg noch absolut positioniert war, stand seine Höhe erst NACH dem
	   mehrseitigen Umbruch fest - ein inset:0-Pseudoelement darauf hat
	   diesen zirkulären Bezug erzwungen und Chromiums Druck-Layout
	   durcheinandergebracht (riesige Leerfläche vor Seite 1, Karten
	   sprangen grundlos auf eigene Seiten). Ecken-Ornamente sind daher auf
	   das (höhenmäßig unproblematische) Kopfband begrenzt statt übers
	   ganze Blatt gespannt. Siehe CHARBOGEN-DRUCK-KONZEPT.md, Nachtrag
	   "Seitenumbruch-Fehlersuche".
	   Aus demselben Grund auch KEIN display:flex mehr im Druckbereich
	   (Chromium fragmentiert Flex-Container beim Drucken nicht zuverlässig
	   über Seiten hinweg – Kopfband und Kartenköpfe laufen unten über
	   float/overflow statt flex). */

	/* ---- Kopfband: dunkelblauer Balken statt schlichter Unterstrich,
	   Name in Kapitälchen, Herkunftszeile hell, Heldengrad-Badge rechts,
	   zwei helle Eckbögen (kein rechter Winkel). Bewusst ohne Flexbox
	   (siehe Hinweis oben) – Titel/Heldengrad laufen per Float. ---- */
	.smcg-head {
		position: relative;
		overflow: hidden; /* Clearfix für die gefloateten Kinder */
		margin: 0 0 4mm !important;
		padding: 4mm 5mm !important;
		background: linear-gradient(180deg, #1b4374 0%, #14365f 100%);
		background-repeat: no-repeat;
		background-size: 15mm 15mm, 15mm 15mm, auto;
		background-position:
			3mm 3mm,
			calc(100% - 3mm) 3mm,
			0 0;
		background-image:
			url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2056%2056'%3E%3Cpath%20d='M42%203C18%203%203%2018%203%2042'%20fill='none'%20stroke='%23b9d3ef'%20stroke-width='1.6'%20stroke-linecap='round'/%3E%3Cpath%20d='M52%209C24%209%209%2024%209%2052'%20fill='none'%20stroke='%23b9d3ef'%20stroke-width='.9'%20opacity='.5'%20stroke-linecap='round'/%3E%3Ccircle%20cx='42'%20cy='3'%20r='2.1'%20fill='%23b9d3ef'/%3E%3Ccircle%20cx='3'%20cy='42'%20r='2.1'%20fill='%23b9d3ef'/%3E%3Ccircle%20cx='15'%20cy='15'%20r='4.4'%20fill='none'%20stroke='%23b9d3ef'%20stroke-width='1.1'%20opacity='.7'/%3E%3C/svg%3E"),
			url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2056%2056'%3E%3Cg%20transform='matrix%28-1,0,0,1,56,0%29'%3E%3Cpath%20d='M42%203C18%203%203%2018%203%2042'%20fill='none'%20stroke='%23b9d3ef'%20stroke-width='1.6'%20stroke-linecap='round'/%3E%3Cpath%20d='M52%209C24%209%209%2024%209%2052'%20fill='none'%20stroke='%23b9d3ef'%20stroke-width='.9'%20opacity='.5'%20stroke-linecap='round'/%3E%3Ccircle%20cx='42'%20cy='3'%20r='2.1'%20fill='%23b9d3ef'/%3E%3Ccircle%20cx='3'%20cy='42'%20r='2.1'%20fill='%23b9d3ef'/%3E%3Ccircle%20cx='15'%20cy='15'%20r='4.4'%20fill='none'%20stroke='%23b9d3ef'%20stroke-width='1.1'%20opacity='.7'/%3E%3C/g%3E%3C/svg%3E"),
			linear-gradient(180deg, #1b4374 0%, #14365f 100%);
	}
	.smcg-head::after {
		content: "";
		position: absolute;
		left: 0; right: 0; bottom: 0;
		height: 0.6mm;
		background: linear-gradient(90deg, transparent, #2f76bd 20%, #2f76bd 80%, transparent);
	}
	.smcg-head .smcg-eyebrow { display: none; } /* Branding-Pill – im Kopfband redundant */
	.smcg-head__titles { float: left; max-width: 70%; }
	.smcg-head h1 {
		margin: 0 !important; font-size: 20pt; line-height: 1.1;
		color: #fff !important; font-variant: small-caps; letter-spacing: .04em;
	}
	.smcg-head .smcg-charcard__meta {
		margin: 1mm 0 0; color: #b9d3ef; text-transform: uppercase;
		letter-spacing: .1em; font-size: 8pt;
	}
	.smcg-head__grade {
		float: right; text-align: center; color: #fff;
		border-left: 1px solid rgba(255,255,255,.28); padding-left: 4mm;
	}
	.smcg-head__grade span {
		display: block; font-size: 6.5pt; letter-spacing: .14em;
		text-transform: uppercase; color: #b9d3ef;
	}
	.smcg-head__grade strong { display: block; font-size: 17pt; line-height: 1.1; }

	/* ---- Interaktive Bedienelemente & Bildschirm-Hilfen ausblenden
	   (NICHT die Raster-Zellen / Splitter-Punkte!) ---- */
	.smcg-head__actions,
	.smcg-wizard__nav,
	.smcg-progress,
	.smcg-tabs,
	.smcg-btn,
	.smcg-roll-btn,
	.smcg-steiger-btn,
	.smcg-bild-btn,
	.smcg-brush,
	.smcg-equip-toggle,
	.smcg-inv__del,
	.smcg-inv__edit,          /* ab 2.50.1: Stift und −/+ im Inventar, */
	.smcg-menge__btn,         /* die Menge selbst bleibt stehen */
	.smcg-webhook,
	.smcg-shop,
	.smcg-kaufen,
	.smcg-entw-form,
	.smcg-collapsible,        /* ungelernte Fertigkeiten, Kauf-Listen, Discord */
	.smcg-attr__mod,          /* AKW-/Hilfetexte */
	.smcg-pool-avail,
	.smcg-bild-placeholder,
	.smcg-noprint,            /* Entwicklung, Verlauf */
	.smcg input,
	.smcg select,
	.smcg textarea { display: none !important; }

	/* Nur im Druck sichtbare Statik-Elemente (z. B. Schwächen-Text).
	   Leere Freitextfelder (Beschreibung/Hintergrund) blenden sich selbst
	   über die Klasse .is-empty aus statt über eine von JS gesetzte
	   Inline-style – die würde von diesem !important sonst überstimmt
	   (Spezifität schlägt hier "inline vs. Stylesheet"). */
	.smcg-print-only { display: block !important; }
	.smcg-print-only:empty { display: none !important; }
	.smcg-print-only.is-empty { display: none !important; }

	/* ---- Karten: dezent, dicht, dürfen über Seitenränder fließen.
	   display:block statt der Bildschirm-Flexbox (.smcg-sheet-card ist auf
	   dem Bildschirm display:flex, damit der Body die Karte gleichmäßig
	   ausfüllt) – Chromium fragmentiert Flex-Container beim Drucken nicht
	   zuverlässig, das riss hier jede Karte auf eine eigene Seite. ---- */
	.smcg-sheet { display: block !important; }
	.smcg-sheet-card,
	.smcg-sheet-card--wide {
		display: block !important;
		width: auto !important;
		margin: 0 0 3mm !important;
		border: 1px solid #b9c4d0;
		border-radius: 5px;
		background: #fff;
		break-inside: auto;
	}
	.smcg-sheet-card__body { flex: none !important; }
	.smcg-sheet-card__head {
		/* Am Bildschirm display:flex – das ::after (Zierwelle) wurde dort zum
		   Flex-Element ohne Breite und war unsichtbar (Fund 2.50.1). */
		display: block !important;
		position: relative;
		overflow: hidden; /* Clearfix statt Flexbox, s. o. */
		background: #eef4fa;
		border-bottom: 1px solid #b9c4d0;
		color: #14365f;
		padding: 1.5mm 3mm !important;
		font-size: 8pt;
		break-after: avoid;
	}
	.smcg-sheet-card__head h3 { float: left; margin-right: 2mm; white-space: nowrap; }
	/* Kleine Welle statt leerer Fläche neben der Kartenüberschrift – dieselbe
	   Punkt-und-Schwung-Sprache wie die Eckzier im Kopfband. Läuft rechts
	   neben dem gefloateten Titel her (overflow:hidden füllt die Restbreite). */
	.smcg-sheet-card__head::after {
		content: "";
		display: block;
		overflow: hidden;
		height: 2.5mm;
		margin-top: 1mm;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20160%2012'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%206h44M116%206h44'%20stroke='%232f76bd'%20stroke-width='1'%20stroke-linecap='round'%20fill='none'/%3E%3Cpath%20d='M44%206c8-6%2016-6%2024%200c8%206%2016%206%2024%200c8-6%2016-6%2024%200'%20fill='none'%20stroke='%232f76bd'%20stroke-width='1'%20stroke-linecap='round'/%3E%3Ccircle%20cx='80'%20cy='6'%20r='2'%20fill='%232f76bd'/%3E%3C/svg%3E");
	}
	/* Karteninhalt knapper polstern. */
	.smcg-sheet-card > *:not(.smcg-sheet-card__head) { padding: 2mm 3mm !important; }

	/* Karten, die trotzdem NICHT gedruckt werden sollen (Entwicklung,
	   Verlauf - siehe .smcg-noprint-Liste oben): brauchte einen eigenen,
	   spezifischeren Selektor. .smcg-noprint{display:none!important} UND
	   .smcg-sheet-card{display:block!important} haben dieselbe
	   Spezifität und sind beide !important - bei Gleichstand gewinnt die
	   später in der Kaskade stehende Regel, und das war hier
	   .smcg-sheet-card, wodurch Entwicklung/Verlauf trotz .smcg-noprint
	   wieder aufgetaucht sind (v2.21.1-Regression, gefunden 2026-08-12
	   anhand von Toms zweiter Test-PDF). Compound-Selektor erzwingt hier
	   höhere Spezifität statt sich auf die Reihenfolge zu verlassen. */
	.smcg-sheet-card.smcg-noprint,
	.smcg-sheet-card--wide.smcg-noprint { display: none !important; }

	/* Seitenumbrüche (ab 2.50.3, nach dem Vorbild des Myranor-Bogens): KEINE
	   erzwungenen Umbrüche mehr. Bis 2.50.2 begannen Kampfwerte, Fertigkeiten,
	   Meisterschaften und Stärken immer auf einer neuen Seite (Wunsch 2.21.2) –
	   das ließ halbleere Seiten stehen (Tom 20.10.2026: „verschwendet Papier“).
	   Jetzt: Karten bleiben ganz; nur Karten mit langen Listen (.smcg-druck-teilbar:
	   Kampfwerte, Fertigkeiten, Meisterschaften & Zauber, Inventar) dürfen
	   umbrechen – und dann nur zwischen Zeilen (s. „Atomare Blöcke“). Länger als
	   eine Seite? Dann bricht Chromium auch eine ganze Karte um. */
	.smcg-sheet-card { break-inside: avoid; }
	.smcg-sheet-card.smcg-druck-teilbar { break-inside: auto; }

	/* Zustandsleiste (Bild + LP/FO/Splitter): ebenfalls von Flex auf Block,
	   gleicher Grund wie oben. Das Bild bleibt per float:right umflossen
	   (s. .smcg-bild-box weiter unten). */
	.smcg-zustand { display: block !important; }

	/* Atomare Blöcke nicht über Seiten zerreißen: einzelne Zeilen, kurze
	   Absätze, Leerzeilen-Block; Tabellenkopf nie ohne erste Zeile. */
	.smcg-attr,
	.smcg-attrs,
	.smcg-derived,
	.smcg-skill-row,
	.smcg-lp-row,
	.smcg-pool-block,
	.smcg-splitter,
	.smcg-inv-row,
	.smcg-blanklines,
	.smcg-sheet-card p,
	.smcg-sheet-card tr { break-inside: avoid; }
	.smcg-sheet-card tbody tr:first-child { break-before: avoid; }
	.smcg-magic-label { break-after: avoid; }

	/* ---- Attribute in einer Reihe (8 Spalten, ab 2.50.3; vorher 4) ---- */
	.smcg-attrs {
		gap: 1.5mm !important;
		grid-template-columns: repeat(8, 1fr) !important;
	}
	.smcg-attr { padding: 1mm 0.5mm 1.2mm !important; gap: 0 !important; text-align: center; }
	.smcg-attr__name { font-size: 5.6pt !important; letter-spacing: 0.08em !important; }
	.smcg-attr__val { font-size: 13pt !important; line-height: 1.1 !important; }

	/* ---- Abgeleitete Werte dreispaltig (ab 2.50.3; vorher zwei) ---- */
	.smcg-derived {
		grid-template-columns: 1fr auto 1fr auto 1fr auto !important;
		gap: 0.4mm 4mm !important;
		font-size: 8.5pt !important;
		margin-top: 2mm !important;
	}

	/* ---- Fertigkeiten / Waffen zweispaltig ---- */
	.smcg-skill-list { display: block !important; column-count: 2; column-gap: 7mm; }
	.smcg-skill-row { break-inside: avoid; padding: 0.3mm 0 !important; min-height: 0 !important; line-height: 1.25 !important; }

	/* ---- Charakterbild rechts umflossen, im Wappenschild statt im Kasten ----
	   Feste Seitenverhältnis-Box + object-fit: cover, damit JEDES Foto
	   (egal welches Format hochgeladen wurde) die Schildform füllt, statt
	   an dessen spitzen/geraden Kanten beschnitten zu werden.
	   Das Seitenverhältnis sitzt bewusst auf der BOX (.smcg-bild-box),
	   nicht mehr nur auf dem <img> - Foto und Rahmen (.smcg-shield-outline,
	   beide "inset:0; width/height:100%") müssen sich exakt dieselbe
	   Fläche teilen. Vorher hatte nur das <img> ein eigenes aspect-ratio;
	   wich dessen berechnete Höhe (z. B. je nach Foto-Format/Browser) von
	   der Box ab, driftete das Foto sichtbar gegenüber dem Rahmen auseinander
	   (Tom-Fund 2026-08-12: "Position im Verhältnis zum Rahmen etwas
	   verschoben"). Jetzt gibt es nur noch EINE Quelle für die Fläche. */
	.smcg-bild-box {
		position: relative;
		float: right;
		width: 32mm;
		aspect-ratio: 1 / 1.12;
		margin: 0 0 3mm 4mm !important;
	}
	.smcg-bild-box img {
		display: block;
		width: 100%;
		height: 100%;
		/* Das <img> trägt immer noch die Bildschirm-Klassen .smcg-charimg
		   und .smcg-charimg--sheet (max-width:220px, margin:0 auto 1rem,
		   border-radius, box-shadow) - die wurden hier nie zurückgesetzt
		   und haben das Foto kleiner als seine Box gehalten und zentriert,
		   während der Rahmen (.smcg-shield-outline) die volle Box nutzte.
		   Das war die eigentliche Ursache für "Foto gegenüber Rahmen
		   verschoben" (Tom-Fund 2026-08-12, zweiter Anlauf - der erste Fix,
		   Seitenverhältnis auf die Box statt aufs Bild, war zwar richtig,
		   hat aber diesen zweiten, unabhängigen Übeltäter nicht erwischt). */
		max-width: none !important;
		margin: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		object-fit: cover;
		clip-path: url(#smcgShieldClip);
		border: 0;
	}
	.smcg-shield-outline {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		color: #14365f;
		pointer-events: none;
	}

	/* ---- LP/FO-Raster & Splitter: klare Kästchen, aber IMMER leer.
	   Der aktuelle Schadenszustand (welche Kästchen belegt sind) ändert
	   sich im Lauf eines Spielabends laufend - der Ausdruck ist fürs
	   Tischspiel gedacht und muss die Kästchen daher leer zum
	   Ankreuzen/Abstreichen von Hand liefern, unabhängig vom Stand im
	   System (Tom, 2026-08-12). Betrifft auch die Statusfarbe des
	   aktuell markierten LP-Malus-Bereichs. */
	.smcg-cell {
		border: 1px solid #555 !important;
		background: #fff !important;
		color: transparent !important;
		font-size: 0 !important;
	}
	.smcg-lp-row.is-current { background: transparent !important; }
	.smcg-splitter__dot {
		border: 1px solid #555 !important;
		background: transparent !important;
		box-shadow: none !important;
	}

	/* ---- Leerzeilen zum handschriftlichen Nachtragen (blankLines()-Helfer,
	   Inventar/Beschreibung/Schwächen) ----
	   Klassennamen waren hier noch auf dem alten "smcg-inv-…"-Stand, seit
	   blankLines() als gemeinsamer Helfer generische Namen vergibt (Tom
	   fand die Zeilen komplett unsichtbar) - kein CSS hat gegriffen,
	   die leeren <div>s waren dadurch 0px hoch. Fund/Fix 2026-08-12. */
	.smcg-blanklines { margin-top: 4mm; }
	.smcg-blanklines__label {
		font-size: 7.5pt; text-transform: uppercase; letter-spacing: .1em;
		color: #45596b; margin-bottom: 2mm;
	}
	.smcg-blankline {
		height: 6mm;
		border-bottom: 1px dotted #b9c4d0;
	}
}

/* =====================================================================
 * Heldengrad-Aufstieg: mediale Feier (Overlay + Funken)
 * ================================================================== */
.smcg-levelup-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient( circle at center, rgba( 20, 54, 95, 0.35 ), rgba( 0, 0, 0, 0.6 ) );
	animation: smcg-lvl-bg-in 0.3s ease both;
	cursor: pointer;
}
.smcg-levelup-overlay.is-out { animation: smcg-lvl-bg-out 0.4s ease both; }

.smcg-levelup {
	position: relative;
	text-align: center;
	color: #fff;
	padding: 2rem 3rem;
	animation: smcg-lvl-pop 0.6s cubic-bezier( 0.2, 0.9, 0.25, 1.4 ) both;
}
.smcg-levelup__icon {
	font-size: 5.5rem;
	line-height: 1;
	filter: drop-shadow( 0 0 16px rgba( 255, 210, 90, 0.85 ) );
	animation: smcg-lvl-glow 1.1s ease-in-out infinite alternate;
}
.smcg-levelup__eyebrow {
	margin-top: 1rem;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	font-size: 0.8rem;
	opacity: 0.85;
}
.smcg-levelup__name {
	margin-top: 0.25rem;
	font-family: var( --smcg-display, 'Cinzel', serif );
	font-size: 2.6rem;
	color: #ffd97a;
	text-shadow: 0 2px 16px rgba( 0, 0, 0, 0.55 );
}
.smcg-spark {
	position: absolute;
	top: 30%;
	left: 50%;
	font-size: 1.4rem;
	opacity: 0;
	animation: smcg-spark-fly 0.95s ease-out forwards;
	pointer-events: none;
}

@keyframes smcg-lvl-bg-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes smcg-lvl-bg-out { to { opacity: 0; } }
@keyframes smcg-lvl-pop {
	from { transform: scale( 0.5 ); opacity: 0; }
	to   { transform: scale( 1 ); opacity: 1; }
}
@keyframes smcg-lvl-glow {
	from { filter: drop-shadow( 0 0 8px rgba( 255, 210, 90, 0.55 ) ); }
	to   { filter: drop-shadow( 0 0 30px rgba( 255, 210, 90, 1 ) ); }
}
@keyframes smcg-spark-fly {
	0%   { transform: translate( -50%, -50% ) scale( 0.3 ); opacity: 0; }
	20%  { opacity: 1; }
	100% { transform: translate( calc( -50% + var( --dx, 0 ) ), calc( -50% + var( --dy, 0 ) ) ) scale( 1 ); opacity: 0; }
}

/* Bewegungsreduktion respektieren: statisch zeigen, keine Funken. */
@media ( prefers-reduced-motion: reduce ) {
	.smcg-levelup-overlay,
	.smcg-levelup,
	.smcg-levelup__icon { animation: none !important; }
	.smcg-spark { display: none !important; }
}

/* Nur-für-Druck-Elemente am Bildschirm ausblenden (Gegenstück zu @media print). */
.smcg-print-only { display: none; }

/* Zauber: Würfel-Button direkt neben dem Namen (kein Rechts-Scrollen auf Mobil). */
.smcg-zauber__namecell { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.smcg-zauber__name { font-weight: 600; }
/* Waffenmerkmale unter dem Waffennamen (eigene Zeile, dezent). */
.smcg-waffe__merkmale { flex-basis: 100%; font-size: 0.8em; font-style: italic; color: var( --smcg-text-2, #666 ); }
/* Nicht erreichte Mindestattribute (Text, nicht nur Farbe). */
.smcg-hd-faktor__feld { max-width: 7rem; }
.smcg-camp__sl-extra { margin-top: .5rem; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.smcg-camp__sl-panel { display: inline-flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.smcg-camp__sl-panel select { max-width: 18rem; }
.smcg-hd-faktor__fehler { margin: .2rem 0 0; font-size: .85em; color: var( --smcg-danger ); }
.smcg-hd-faktor__fehler:empty { display: none; }
.smcg-hd-faktor__hinweis { margin: .2rem 0 0; }
.smcg-waffe__mindest { flex-basis: 100%; font-size: 0.8em; font-weight: 600; color: var( --smcg-danger, #a4432f ); }

/* ---------------------------------------------------------------------------
 * Kampagnen (Phase 1)
 * ------------------------------------------------------------------------ */
.smcg-camp-grid { display: grid; grid-template-columns: repeat( auto-fill, minmax( 280px, 1fr ) ); gap: 1rem; }
.smcg-camp-card { overflow: hidden; }
.smcg-camp__header {
	display: block;
	width: calc( 100% - 1rem );
	height: 130px;
	object-fit: cover;
	margin: 0.5rem auto 0.85rem;
	border-radius: var( --smcg-r-md, 16px );
}
.smcg-camp__header--detail { height: 200px; margin-bottom: 1rem; }
.smcg-camp__row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.smcg-camp__title { margin: 0; }
.smcg-camp__desc { color: var( --smcg-text-2, #45596b ); margin: 0.5rem 0; }
/* Zusatzangaben (Heldenstufe/SpielerInnen/Sitzungen/Termin/Spielumgebung):
   je Angabe eine eigene Zeile statt "·"-Fließtext (Tom-Feedback 2026-08-20) -
   die einzelnen .smcg-charcard__meta-Absätze bekämen sonst ihren vollen
   Standard-Absatzabstand und stapeln sich zu großen Lücken. */
.smcg-camp__extra { margin: 0.35rem 0; }
.smcg-camp__extra .smcg-charcard__meta { margin: 0.1rem 0; }
.smcg-camp__badge {
	font-size: 0.75rem; font-weight: 500; padding: 0.1rem 0.55rem; border-radius: 999px;
	white-space: nowrap; border: 1px solid var( --smcg-line, rgba(29,78,134,0.18) );
}
.smcg-camp__badge--offen { color: var( --smcg-success, #3f7a44 ); border-color: var( --smcg-success, #3f7a44 ); }
.smcg-camp__badge--voll { color: var( --smcg-secondary, #6f6456 ); border-color: var( --smcg-secondary, #6f6456 ); }
.smcg-camp__badge--abgeschlossen { color: var( --smcg-text-2, #45596b ); }
/* Ab 2.51.0: „Du leitest“ neben dem Status. */
.smcg-camp__badges { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.3rem; }
.smcg-camp__badge--sl { color: var( --smcg-on-accent, #fff ); background: var( --smcg-accent, #245f9c ); border-color: var( --smcg-accent, #245f9c ); }
.smcg-camp-members { display: grid; grid-template-columns: repeat( auto-fill, minmax( 220px, 1fr ) ); gap: 0.6rem; margin-top: 0.5rem; }
.smcg-camp-member { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem; border: 1px solid var( --smcg-line, rgba(29,78,134,0.18) ); border-radius: var( --smcg-r-sm, 10px ); }
.smcg-camp-member__img { width: 48px; height: 48px; object-fit: cover; border-radius: var( --smcg-r-sm, 10px ); flex: 0 0 auto; }
.smcg-camp-member__img--empty { background: var( --smcg-surface-2, #eef4fa ); }
.smcg-camp-member__name { font-weight: 500; }
.smcg-camp-members { grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) ); }
.smcg-camp-member--col { flex-direction: column; align-items: stretch; }
.smcg-camp-member__top { display: flex; align-items: center; gap: 0.6rem; }
/* SL-Charübersicht (Modal) */
.smcg-camp-ov__sec { margin-bottom: 0.85rem; }
.smcg-camp-ov__sec h4 { margin: 0 0 0.25rem; font-size: 0.95rem; }
.smcg-camp-ov__attrs { display: grid; grid-template-columns: repeat( 4, 1fr ); gap: 0.4rem; }
.smcg-camp-ov__attr { display: flex; justify-content: space-between; padding: 0.25rem 0.5rem; border: 1px solid var( --smcg-line, rgba(29,78,134,0.18) ); border-radius: var( --smcg-r-sm, 10px ); }
.smcg-camp-ov__attr-code { color: var( --smcg-text-2, #45596b ); font-weight: 500; }
/* Tickzähler (Charblatt) + Tickleiste (Kampagne) */
.smcg-ini-tick { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; flex-wrap: wrap; }
.smcg-tickleiste { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.5rem; }
.smcg-tick-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0.5rem; border: 1px solid var( --smcg-line, rgba(29,78,134,0.18) ); border-radius: var( --smcg-r-sm, 10px ); }
.smcg-tick-item__img { width: 32px; height: 32px; object-fit: cover; border-radius: var( --smcg-r-sm, 10px ); flex: 0 0 auto; }
.smcg-tick-item__name { flex: 1; }
.smcg-tick-item__val { font-weight: 500; font-size: 1.1rem; min-width: 2rem; text-align: right; }
/* Gemeinsamer Verlauf (Feed) */
.smcg-feed { display: flex; flex-direction: column; margin-top: 0.5rem; max-height: 380px; overflow-y: auto; }
.smcg-feed-item { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.35rem 0.3rem; border-bottom: 1px solid var( --smcg-line, rgba(29,78,134,0.18) ); }
.smcg-feed-item:last-child { border-bottom: 0; }
.smcg-feed-item__icon { flex: 0 0 auto; }
.smcg-feed-item__body { flex: 1; min-width: 0; }
/* Eigenen Gegenstand hinzufügen (Inventar) */
.smcg-inv-add { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.smcg-inv-add .smcg-input { flex: 1; }
/* Mengensteuerung je Inventarzeile */
.smcg-menge { display: inline-flex; align-items: center; gap: 0.25rem; }
.smcg-menge__btn { width: 1.6rem; height: 1.6rem; line-height: 1; padding: 0; border: 1px solid var( --smcg-line, rgba(29,78,134,0.18) ); border-radius: var( --smcg-r-sm, 10px ); background: transparent; cursor: pointer; color: inherit; }
.smcg-menge__btn[disabled] { opacity: 0.4; cursor: default; }
.smcg-menge__val { min-width: 1.6rem; text-align: center; font-weight: 500; }

/* Kampfwerte: „Verteidigung gesamt" hervorgehoben – aber nicht größer als die
   Überschrift „Verteidigung" (nur fett + Akzentfarbe, normale Schriftgröße). */
.smcg-derived .smcg-vtd-hot {
	font-weight: 700;
	color: var( --smcg-heading, #14365f );
}

/* Verlauf: Begründung dezent hinter dem Titel. */
.smcg-history__grund { color: var( --smcg-text-2, #666 ); font-style: italic; }

/* Item-Editor (Umbenennen + Relikt) + Inventar-Bearbeiten-Button. */
.smcg-inv__edit {
	background: none;
	border: 0;
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
	color: var( --smcg-accent, #2f76bd );
	padding: 0 0.25rem;
}
.smcg-relikt-row { display: flex; align-items: center; gap: 0.5rem; margin: 0.35rem 0; }
.smcg-relikt-row .smcg-input { flex: 1; }
.smcg-relikt__label { flex: 1; }
.smcg-relikt__val {
	min-width: 1.5rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: var( --smcg-heading, #14365f );
}
.smcg-relikt-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; flex-wrap: wrap; }
/* Relikt-Verbesserungen (2.52.0): Gruppen, Kurzinfo je Zeile, gewählte Zeilen. */
.smcg-relikt__gruppe { margin: 0.9rem 0 0.2rem; font-weight: 700; color: var( --smcg-heading, #14365f ); }
.smcg-relikt__label { display: flex; flex-direction: column; min-width: 0; }
.smcg-relikt__info { font-size: 0.8em; color: var( --smcg-text-2, #666 ); }
.smcg-relikt-row.is-aktiv .smcg-relikt__label > span:first-child { font-weight: 700; }
.smcg-step-btn[disabled] { opacity: 0.35; cursor: default; }
.smcg-relikt-hinweis { display: block; font-style: normal; }

/* Ressourcen: steigerbare Liste + editierbare Bemerkung. */
.smcg-res-list { display: flex; flex-direction: column; }
.smcg-res-row { display: flex; align-items: center; gap: 0.5rem; }
.smcg-res__name { flex: 1; }
.smcg-res__wert {
	font-weight: 700;
	color: var( --smcg-heading, #14365f );
	font-variant-numeric: tabular-nums;
}
.smcg-res__bemprint { color: var( --smcg-text-2, #666 ); }
.smcg-res-bemrow { margin: 0.1rem 0 0.6rem; }
.smcg-res__bem { width: 100%; }

/* =========================================================================
 * VTT / Spieltisch (KAMPAGNEN-VTT-KONZEPT.md, ab 2.22.2)
 * Karte mit Tokens, Zoom/Pan, Sammelzone. Alles unter .smcg gescoped.
 * ====================================================================== */

.smcg .smcg-btn--small {
	padding: 0.28rem 0.6rem;
	font-size: 0.82rem;
}

.smcg .smcg-vtt-toolbar__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
	margin-top: 0.35rem;
}

.smcg .smcg-vtt-shell { margin-top: 0.75rem; }

.smcg .smcg-vtt-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.4rem;
}
.smcg .smcg-vtt-bar__name { font-weight: 600; color: var(--smcg-heading, #1c4e86); }

.smcg .smcg-vtt-area {
	display: flex;
	gap: 0.6rem;
	align-items: stretch;
}

/* Sammelzone („neben dem Brett") – gestapelte, noch nicht platzierte Figuren. */
.smcg .smcg-vtt-tray {
	flex: 0 0 auto;
	width: 92px;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	align-items: center;
	padding: 0.5rem 0.35rem;
	border: 1px solid var(--smcg-line, rgba(29,78,134,0.18));
	border-radius: 10px;
	background: var(--smcg-surface-2, #eef4fa);
	max-height: 72vh;
	overflow-y: auto;
}
.smcg .smcg-vtt-tray__title {
	font-size: 0.68rem;
	text-align: center;
	color: var(--smcg-text-2, #45596b);
	line-height: 1.15;
}

/* Viewport = sichtbarer Kartenausschnitt (Zoom/Pan). */
.smcg .smcg-vtt-viewport {
	position: relative;
	flex: 1 1 auto;
	height: 72vh;
	min-height: 320px;
	overflow: hidden;
	border: 1px solid var(--smcg-line-strong, rgba(29,78,134,0.38));
	border-radius: 10px;
	background:
		repeating-conic-gradient(var(--smcg-surface-2, #eef4fa) 0% 25%, var(--smcg-surface, #fff) 0% 50%)
		50% / 28px 28px;
	cursor: grab;
	touch-action: none;
}
.smcg .smcg-vtt-viewport.is-panning { cursor: grabbing; }

.smcg .smcg-vtt-stage {
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: 0 0;
	will-change: transform;
}
.smcg .smcg-vtt-map {
	display: block;
	max-width: none;
	user-select: none;
	-webkit-user-drag: none;
}

/* Token – rund, Bild ODER farbiger Kreis mit Initialen. Randfarbe = Art. */
.smcg .smcg-vtt-token {
	position: absolute;
	width: 42px;
	height: 42px;
	/* --dx/--dy: Verschiebung während des Ziehens (ab 2.29.0), sonst 0. */
	transform: translate(-50%, -50%) translate(var(--dx, 0px), var(--dy, 0px));
	border-radius: 50%;
	border: 3px solid #888;
	background-size: cover;
	background-position: center;
	box-shadow: 0 2px 6px rgba(0,0,0,0.35);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	text-shadow: 0 1px 2px rgba(0,0,0,0.6);
	user-select: none;
	touch-action: none;
	box-sizing: border-box;
}
.smcg .smcg-vtt-token__initials { font-size: 0.85rem; letter-spacing: 0.02em; }

.smcg .smcg-vtt-token--spieler  { border-color: var(--smcg-accent, #2f76bd); }
.smcg .smcg-vtt-token--npc      { border-color: var(--smcg-danger, #a32b22); }
.smcg .smcg-vtt-token--main_npc { border-color: #c8912b; }

.smcg .smcg-vtt-token--klein  { width: 30px; height: 30px; }
.smcg .smcg-vtt-token--klein .smcg-vtt-token__initials { font-size: 0.68rem; }
.smcg .smcg-vtt-token--normal { width: 42px; height: 42px; }
.smcg .smcg-vtt-token--gross  { width: 58px; height: 58px; }
.smcg .smcg-vtt-token--gross .smcg-vtt-token__initials { font-size: 1.05rem; }
.smcg .smcg-vtt-token--riesig { width: 82px; height: 82px; }
.smcg .smcg-vtt-token--riesig .smcg-vtt-token__initials { font-size: 1.4rem; }

.smcg .smcg-vtt-token.is-own { cursor: grab; }
.smcg .smcg-vtt-token.is-dragging { cursor: grabbing; z-index: 20; }

/* In der Sammelzone: statisch untereinander, nicht per % positioniert. */
.smcg .smcg-vtt-token--tray {
	position: static;
	transform: none;
	flex: 0 0 auto;
}

/* Frei am Cursor hängendes Token beim Ziehen aus der Sammelzone. */
.smcg-vtt-token--floating {
	position: fixed;
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 9999;
	border-radius: 50%;
	border: 3px solid var(--smcg-accent, #2f76bd);
	width: 42px;
	height: 42px;
	background-size: cover;
	background-position: center;
	box-shadow: 0 4px 10px rgba(0,0,0,0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
}

@media ( max-width: 640px ) {
	.smcg .smcg-vtt-area { flex-direction: column; }
	.smcg .smcg-vtt-tray {
		width: auto;
		flex-direction: row;
		max-height: none;
		overflow-x: auto;
	}
	.smcg .smcg-vtt-viewport { height: 60vh; }
}

/* --- VTT Phase 4: Raster, Zeichnen, Seitenpanel, Größen-Menü (ab 2.22.3) --- */

.smcg .smcg-input--inline { display: inline-block; width: auto; padding: 0.28rem 0.5rem; font-size: 0.82rem; }

/* Sicht-Raster – reine Optik über der Karte, kein Einrasten. */
.smcg .smcg-vtt-grid {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	background-image:
		linear-gradient( to right, rgba(0,0,0,0.28) 1px, transparent 1px ),
		linear-gradient( to bottom, rgba(0,0,0,0.28) 1px, transparent 1px );
	background-position: 0 0;
}

/* Zeichnungen (SVG) über Karte/Raster, unter den Tokens. */
.smcg .smcg-vtt-draw {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 2;
}

/* Token über Karte/Raster/Zeichnung. */
.smcg .smcg-vtt-token { z-index: 3; }
.smcg .smcg-vtt-token.is-dragging { z-index: 20; }

/* Zeichen-Ebene ganz oben – fängt nur im Zeichenmodus Zeiger-Ereignisse. */
.smcg .smcg-vtt-drawlayer {
	position: absolute;
	inset: 0;
	z-index: 6;
	pointer-events: none;
}
.smcg .smcg-vtt-viewport.is-drawing { cursor: crosshair; }
.smcg .smcg-vtt-viewport.is-drawing .smcg-vtt-drawlayer { pointer-events: auto; }
.smcg .smcg-vtt-viewport.is-drawing .smcg-vtt-token { pointer-events: none; }

/* Zeichenwerkzeuge in der Leiste. */
.smcg .smcg-vtt-draw-controls {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	align-items: center;
	margin-left: auto;
}
.smcg .smcg-vtt-swatch {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid var(--smcg-line-strong, rgba(29,78,134,0.38));
	cursor: pointer;
	padding: 0;
}
.smcg .smcg-vtt-swatch.is-active { outline: 2px solid var(--smcg-accent, #2f76bd); outline-offset: 1px; }

/* Seitenpanel (Tickleiste + Verlauf). */
.smcg .smcg-vtt-side {
	flex: 0 0 260px;
	max-height: 72vh;
	overflow-y: auto;
	border: 1px solid var(--smcg-line, rgba(29,78,134,0.18));
	border-radius: 10px;
	background: var(--smcg-surface, #fff);
	padding: 0.5rem 0.6rem;
}
.smcg .smcg-vtt-side__title {
	font-weight: 600;
	color: var(--smcg-heading, #1c4e86);
	margin: 0.5rem 0 0.3rem;
	font-size: 0.9rem;
}
.smcg .smcg-vtt-side__title:first-child { margin-top: 0; }

/* Größen-Menü (SL-Klick auf Token). */
.smcg-vtt-sizemenu {
	position: fixed;
	transform: translate(-6px, -6px);
	z-index: 10000;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.35rem;
	background: var(--smcg-surface, #fff);
	border: 1px solid var(--smcg-line-strong, rgba(29,78,134,0.38));
	border-radius: 8px;
	box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

@media ( max-width: 900px ) {
	.smcg .smcg-vtt-side { flex-basis: 100%; max-height: none; }
	.smcg .smcg-vtt-area { flex-wrap: wrap; }
}

/* --- VTT: Freier Wurf im Seitenpanel (ab 2.22.4) --- */
.smcg .smcg-vtt-freeroll { margin-bottom: 0.6rem; }
.smcg .smcg-vtt-freeroll__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	align-items: center;
}
.smcg .smcg-vtt-freeroll .smcg-ini-result { margin-top: 0.4rem; }

/* --- VTT: Sperr-Banner für die SL (ab 2.23.0) --- */
.smcg .smcg-vtt-lockbanner {
	margin: 0.4rem 0;
	padding: 0.45rem 0.7rem;
	border-radius: 8px;
	border: 1px solid var(--smcg-danger, #a32b22);
	background: rgba(163, 43, 34, 0.08);
	color: var(--smcg-danger, #a32b22);
	font-weight: 600;
	font-size: 0.9rem;
}

/* --- VTT: Fog of War (ab 2.23.1) --- */

/* Maske über der Karte – unter Tokens, damit sie für Spieler mit
   verdeckt werden, für die SL nur halbtransparent verdunkelt. */
.smcg .smcg-vtt-fog {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 4;
}

/* Fog-Editier-Ebene – analog zur Zeichen-Ebene, eigener Modus. */
.smcg .smcg-vtt-foglayer {
	position: absolute;
	inset: 0;
	z-index: 7;
	pointer-events: none;
}
.smcg .smcg-vtt-viewport.is-fogging { cursor: crosshair; }
.smcg .smcg-vtt-viewport.is-fogging .smcg-vtt-foglayer { pointer-events: auto; }
.smcg .smcg-vtt-viewport.is-fogging .smcg-vtt-token,
.smcg .smcg-vtt-viewport.is-fogging .smcg-vtt-drawlayer { pointer-events: none; }

.smcg .smcg-vtt-fogpreview {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.smcg .smcg-vtt-fog-controls {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	align-items: center;
	margin-left: 0.5rem;
}

/* --- VTT: Etappe 1 „flüssiger Spieltisch" (ab 2.29.0, SPIELTISCH-FLUESSIG-KONZEPT.md) --- */
.smcg .smcg-u-hidden { display: none !important; }
.smcg .smcg-vtt-bar { flex-wrap: wrap; }
.smcg .smcg-vtt-bar__slot { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.smcg .smcg-vtt-bar__slot--right { margin-left: auto; }
.smcg .smcg-vtt-bar__slot:empty { display: none; }
/* Fremde Züge gleiten zur neuen Position; das eigene Ziehen nie. */
.smcg .smcg-vtt-token.is-remote-move { transition: left 0.3s ease, top 0.3s ease; }
.smcg .smcg-vtt-token.is-dragging { transition: none; }
/* Eigene Änderung noch nicht vom Server bestätigt. */
.smcg .smcg-vtt-token.is-pending { box-shadow: 0 0 0 2px rgba(255,255,255,0.7), 0 2px 6px rgba(0,0,0,0.35); }
.smcg .smcg-vtt-token.is-selected,
.smcg .smcg-vtt-token:focus-visible { outline: 3px solid var(--smcg-accent, #2f76bd); outline-offset: 2px; }
.smcg .smcg-vtt-token.is-removing { opacity: 0; transition: opacity 0.2s ease; pointer-events: none; }
.smcg .smcg-vtt-fog.is-off { display: none; }
.smcg-vtt-sizemenu__title {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--smcg-text-2, #45596b);
	padding: 0 0.2rem 0.15rem;
	max-width: 12rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
	.smcg .smcg-vtt-token.is-remote-move { transition: none; }
}

/* --- VTT: Etappe 2 Delta-Sync – Verbindungs-Hinweis (ab 2.30.0) --- */
.smcg .smcg-vtt-syncstatus {
	margin: 0.4rem 0;
	padding: 0.35rem 0.7rem;
	border-radius: 8px;
	border: 1px solid var(--smcg-line-strong, rgba(29,78,134,0.38));
	background: var(--smcg-surface-2, #eef4fa);
	color: var(--smcg-text-2, #45596b);
	font-size: 0.85rem;
}

/* --- VTT: Strichbreite-Regler (ab 2.30.1) --- */
.smcg .smcg-vtt-breite__wrap { display: inline-flex; align-items: center; gap: 0.3rem; }
.smcg .smcg-vtt-breite { width: 90px; margin: 0; }
.smcg .smcg-vtt-breite__val { font-size: 0.78rem; color: var(--smcg-text-2, #45596b); min-width: 3.2em; }

/* --- VTT: Etappe 3 – Werkzeugpalette, Ebenen, Dialog (ab 2.31.0) --- */
.smcg .smcg-vtt-toollayer {
	position: absolute;
	inset: 0;
	z-index: 7;
	pointer-events: none;
}
.smcg .smcg-vtt-viewport.is-toollayer .smcg-vtt-toollayer { pointer-events: auto; }
.smcg .smcg-vtt-viewport.is-toollayer .smcg-vtt-token,
.smcg .smcg-vtt-viewport.tool-hand .smcg-vtt-token { pointer-events: none; }
.smcg .smcg-vtt-viewport.tool-hand { cursor: grab; }
.smcg .smcg-vtt-viewport.tool-aufdecken,
.smcg .smcg-vtt-viewport.tool-verdecken,
.smcg .smcg-vtt-viewport.tool-zeichnen { cursor: crosshair; }
.smcg .smcg-vtt-viewport.tool-radierer { cursor: cell; }
.smcg .smcg-vtt-viewport.is-player-view { outline: 3px solid #e6a417; outline-offset: -3px; }

/* Pinsel-/Radierer-Ring folgt dem Zeiger (Größe = Pinselbreite). */
.smcg .smcg-vtt-cursor {
	position: absolute;
	border: 2px solid rgba(255,255,255,0.9);
	box-shadow: 0 0 0 1px rgba(0,0,0,0.6);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 8;
}

/* Werkzeugpalette. */
.smcg .smcg-vtt-palette {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.9rem;
	align-items: stretch;
	margin: 0.25rem 0 0.35rem;
}
.smcg .smcg-vtt-palette__group {
	display: inline-flex;
	gap: 0.3rem;
	padding-right: 0.9rem;
	border-right: 1px solid var(--smcg-line, rgba(29,78,134,0.18));
}
.smcg .smcg-vtt-palette__group:last-child { border-right: 0; padding-right: 0; }
.smcg .smcg-vtt-tool {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.1rem;
	min-width: 4.4rem;
	padding: 0.35rem 0.5rem 0.3rem;
	border: 1px solid var(--smcg-line-strong, rgba(29,78,134,0.38));
	border-radius: 8px;
	background: var(--smcg-surface, #fff);
	color: var(--smcg-text, #1f2d3a);
	cursor: pointer;
	font: inherit;
	line-height: 1.1;
}
.smcg .smcg-vtt-tool:hover { background: var(--smcg-surface-2, #eef4fa); }
.smcg .smcg-vtt-tool:focus-visible { outline: 3px solid var(--smcg-accent, #2f76bd); outline-offset: 2px; }
.smcg .smcg-vtt-tool.is-active {
	background: var(--smcg-accent, #2f76bd);
	border-color: var(--smcg-accent, #2f76bd);
	color: #fff;
}
.smcg .smcg-vtt-tool__icon { font-size: 1.15rem; }
.smcg .smcg-vtt-tool__label { font-size: 0.72rem; font-weight: 600; }
.smcg .smcg-vtt-tool__key {
	position: absolute;
	top: 2px;
	right: 4px;
	font-size: 0.65rem;
	font-family: inherit;
	opacity: 0.9;
}

/* Kontextzeile des aktiven Werkzeugs. */
.smcg .smcg-vtt-context {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.7rem;
	align-items: center;
	margin-bottom: 0.4rem;
	padding: 0.35rem 0.5rem;
	border-radius: 8px;
	background: var(--smcg-surface-2, #eef4fa);
}
.smcg .smcg-vtt-context__group { display: inline-flex; gap: 0.3rem; align-items: center; }

/* Nebel-Schalter (role=switch). */
.smcg .smcg-vtt-switch {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.25rem 0.55rem 0.25rem 0.3rem;
	border: 1px solid var(--smcg-line-strong, rgba(29,78,134,0.38));
	border-radius: 999px;
	background: var(--smcg-surface, #fff);
	color: var(--smcg-text, #1f2d3a);
	cursor: pointer;
	font: inherit;
	font-size: 0.85rem;
}
.smcg .smcg-vtt-switch:focus-visible { outline: 3px solid var(--smcg-accent, #2f76bd); outline-offset: 2px; }
.smcg .smcg-vtt-switch__knob {
	width: 28px;
	height: 16px;
	border-radius: 999px;
	background: #b8c4d0;
	position: relative;
	transition: background 0.15s;
}
.smcg .smcg-vtt-switch__knob::after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #fff;
	transition: left 0.15s;
}
.smcg .smcg-vtt-switch.is-on .smcg-vtt-switch__knob { background: var(--smcg-accent, #2f76bd); }
.smcg .smcg-vtt-switch.is-on .smcg-vtt-switch__knob::after { left: 14px; }

/* Speicherstatus. */
.smcg .smcg-vtt-savestatus {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.8rem;
	color: var(--smcg-text-2, #45596b);
}
.smcg .smcg-vtt-savestatus.is-ok { color: #2a7d3f; }
.smcg .smcg-vtt-savestatus.is-err { color: var(--smcg-danger, #a32b22); font-weight: 600; }

/* Spieleransicht-Hinweis. */
.smcg .smcg-vtt-pvbanner {
	margin: 0 0 0.4rem;
	padding: 0.35rem 0.7rem;
	border-radius: 8px;
	border: 1px solid #e6a417;
	background: rgba(230,164,23,0.12);
	color: #6b4a00;
	font-size: 0.85rem;
	font-weight: 600;
}

/* Bestätigungsdialog. */
.smcg-vtt-dialog__overlay {
	position: fixed;
	inset: 0;
	/* Über dem fixierten Divi-Header (z-index 99999) – wie die Portal-Popups,
	 * damit der Dialog in keiner Scroll-Position hinter das Menü rutscht. */
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba(0,0,0,0.45);
}
.smcg-vtt-dialog {
	max-width: 28rem;
	width: 100%;
	padding: 1rem 1.1rem;
	border-radius: 10px;
	background: var(--smcg-surface, #fff);
	color: var(--smcg-text, #1f2d3a);
	box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.smcg-vtt-dialog__title { margin: 0 0 0.5rem; font-size: 1.05rem; }
.smcg-vtt-dialog__text { margin: 0 0 0.9rem; line-height: 1.4; }
.smcg-vtt-dialog__actions { display: flex; justify-content: flex-end; gap: 0.5rem; }

/* Freier Wurf: Feldbreiten (vorher Inline-Styles). */
.smcg .smcg-vtt-freeroll__num { width: 3.6rem; }
.smcg .smcg-vtt-freeroll__die { width: 5rem; }

/* --- VTT 2.31.1: Ganze-Ebene-Aktionen rechts in der Kontextzeile --- */
.smcg .smcg-vtt-context__group--end { margin-left: auto; }

/* --- VTT: Etappe 4 – Ansicht, Touch, Tastatur, Barrierefreiheit (ab 2.32.0) --- */
.smcg .smcg-vtt-viewport:focus-visible { outline: 3px solid var(--smcg-accent, #2f76bd); outline-offset: 2px; }
/* Leertaste gehalten: Verschieben in jedem Werkzeug, Ebene und Figuren geben den Zeiger frei. */
.smcg .smcg-vtt-viewport.is-space { cursor: grab; }
.smcg .smcg-vtt-viewport.is-space.is-panning { cursor: grabbing; }
.smcg .smcg-vtt-viewport.is-space .smcg-vtt-toollayer,
.smcg .smcg-vtt-viewport.is-space .smcg-vtt-token { pointer-events: none; }
/* „Du"-Marke an der eigenen Figur (Spieler) – kein reines Farbsignal. */
.smcg .smcg-vtt-token__du {
	position: absolute;
	bottom: -0.55rem;
	left: 50%;
	transform: translateX(-50%);
	padding: 0 0.3rem;
	border-radius: 999px;
	background: var(--smcg-accent, #2f76bd);
	color: #fff;
	font-size: 0.6rem;
	font-weight: 700;
	line-height: 1.4;
	text-shadow: none;
	white-space: nowrap;
}
.smcg .smcg-vtt-token--tray .smcg-vtt-token__du { bottom: -0.45rem; }
/* Kürzel-Übersicht. */
.smcg-vtt-help { max-width: 34rem; max-height: 85vh; overflow-y: auto; }
.smcg-vtt-help__list {
	display: grid;
	grid-template-columns: minmax(9rem, auto) 1fr;
	gap: 0.35rem 0.8rem;
	margin: 0 0 0.9rem;
	align-items: baseline;
}
.smcg-vtt-help__list dt { margin: 0; }
.smcg-vtt-help__list dd { margin: 0; line-height: 1.35; }
.smcg-vtt-help__list kbd {
	display: inline-block;
	padding: 0.05rem 0.4rem;
	border: 1px solid var(--smcg-line-strong, rgba(29,78,134,0.38));
	border-bottom-width: 2px;
	border-radius: 5px;
	background: var(--smcg-surface-2, #eef4fa);
	font-family: inherit;
	font-size: 0.85em;
}
@media (max-width: 520px) {
	.smcg-vtt-help__list { grid-template-columns: 1fr; }
	.smcg-vtt-help__list dd { margin-bottom: 0.3rem; }
}

/* --- VTT: Audit-Fixes (2.32.0) --- */
.smcg .smcg-vtt-swatch:focus-visible { outline: 3px solid var(--smcg-accent, #2f76bd); outline-offset: 2px; }
.smcg-vtt-help__toggle { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0 0 0.9rem; font-size: 0.9rem; line-height: 1.35; }
.smcg-vtt-help__toggle input { margin-top: 0.2rem; }

/* -------------------------------------------------------------------------
 * API-Zugänge (externe REST-API, Token-Verwaltung)
 * ---------------------------------------------------------------------- */
.smcg-token-new {
	margin-top: 0.9rem;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--smcg-success, #3f7a44);
	border-radius: var(--smcg-r-md, 8px);
	background: var(--smcg-surface-2, #f2f7f2);
}
.smcg-token-new__hint { margin: 0 0 0.5rem; font-weight: 600; color: var(--smcg-success, #3f7a44); }
.smcg-token-new__row { display: flex; gap: 0.5rem; align-items: center; }
.smcg-token-value { flex: 1 1 auto; min-width: 0; font-family: monospace; }
.smcg-token-row {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem; padding: 0.6rem 0; border-top: 1px solid var(--smcg-line, #e2e5e9);
}
.smcg-token-row:first-of-type { border-top: none; }
.smcg-token-row__name { font-weight: 600; }

/* --- Lizenz-Trennung: Buch-Kennzeichnung (ab 2.34.0, ERWEITERTE-REGELN-KONZEPT.md) ---
 * Inhalte aus Erweiterungsbänden tragen ein Buch-Badge (z. B. „MSK"). Ohne das
 * Recht „Erweiterte Regeln" sind ihre Regelwerte verdeckt („—", gedämpft).
 * Farbe ist nie das einzige Merkmal (WCAG 1.4.1): Badge-Text + „—" + Popover. */
.smcg-buch-name { display: inline; }
.smcg-buch-name.is-verdeckt { color: var(--smcg-text-2); }
.smcg-verdeckt { color: var(--smcg-text-2); }

.smcg-buch-badge {
	display: inline-block;
	margin-left: 0.35em;
	padding: 0 0.35em;
	font: inherit;
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.5;
	vertical-align: 0.1em;
	color: var(--smcg-accent);
	background: transparent;
	border: 1px solid currentColor;
	border-radius: 4px;
	cursor: pointer;
}
.smcg-buch-badge.is-text { cursor: default; }
.smcg-buch-badge:hover { background: var(--smcg-hover); }
.smcg-buch-badge:focus-visible { outline: 3px solid var(--smcg-accent); outline-offset: 2px; }

/* Popover: fixiert am Viewport, im nächsten .smcg-Container (Farben/Dunkelmodus).
 * Doppelte Klasse schlägt die Regel .smcg > * (position: relative). */
.smcg .smcg-buch-pop,
.smcg-buch-pop {
	position: fixed;
	z-index: 1000000;
	max-width: min(20rem, calc(100vw - 16px));
	padding: 0.5rem 0.7rem;
	font-size: 0.85rem;
	line-height: 1.4;
	color: var(--smcg-text, #1f2d3a);
	background: var(--smcg-surface, #fff);
	border: 1px solid var(--smcg-line-strong, rgba(29,78,134,0.38));
	border-radius: 8px;
	box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

@media print {
	/* Badge im Druck als sichtbarer Text (Popover gibt es dort nicht). */
	.smcg-buch-badge { color: #000 !important; border-color: #000 !important; }
	.smcg-buch-pop { display: none !important; }
}

/* =====================================================================
 * Freier Würfel (ab 2.36.0, smcg-wuerfel.js): Knopf unten rechts über dem
 * „Nach oben"-Knopf des Themes (Divi: bottom 125px) + Dialog.
 * Die Höhe ist über --smcg-wuerfel-unten anpassbar.
 * ================================================================== */
.smcg-wuerfel-knopf {
	position: fixed;
	right: 12px;
	bottom: var(--smcg-wuerfel-unten, 175px);
	z-index: 9990;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 2px solid #ffffff;
	background: #2f76bd;
	color: #ffffff;
	font-size: 24px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba( 20, 40, 70, 0.3 );
	padding: 0;
}
.smcg-wuerfel-knopf:hover { background: #1c4e86; }
.smcg-wuerfel-knopf:focus-visible { outline: 3px solid #f2b705; outline-offset: 2px; }

dialog.smcg.smcg-wuerfel {
	position: fixed;
	overflow-x: hidden;
	overflow-y: auto;
	width: min( 26rem, calc( 100vw - 2rem ) );
	max-height: calc( 100vh - 2rem );
	padding: 1.25rem 1.5rem;
	border: 1px solid var( --smcg-border, #c9d6e3 );
	border-radius: var( --smcg-r-lg, 12px );
	background: var( --smcg-surface );
	color: var( --smcg-text );
	box-shadow: 0 10px 40px rgba( 0, 0, 0, 0.25 );
}
dialog.smcg-wuerfel::backdrop { background: rgba( 15, 25, 40, 0.45 ); }
.smcg-wuerfel__titel { margin: 0 0 0.5rem; font-family: var( --smcg-display ); color: var( --smcg-heading ); font-size: 1.35rem; }
.smcg-wuerfel__journal { margin: 0 0 0.75rem; font-size: 0.9em; color: var( --smcg-text-2 ); }
.smcg-wuerfel__zeile { display: grid; grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); gap: 0.6rem; }
.smcg-wuerfel__zeile label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9em; color: var( --smcg-text-2 ); }
.smcg-wuerfel__zeile .smcg-input { width: 100%; box-sizing: border-box; }
.smcg-wuerfel__fehler { margin: 0.4rem 0 0; min-height: 1.2em; font-size: 0.85em; color: var( --smcg-danger ); }
.smcg-wuerfel__knoepfe { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.smcg-wuerfel__ergebnis:not( :empty ) { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var( --smcg-border, #c9d6e3 ); }
.smcg-wuerfel__formel { font-size: 0.9em; color: var( --smcg-text-2 ); }
.smcg-wuerfel__augen { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.4rem 0; }
.smcg-wuerfel__auge { min-width: 2.2rem; padding: 0.3rem 0.4rem; text-align: center; border: 2px solid var( --smcg-accent ); border-radius: 0.45rem; font-family: var( --smcg-display ); font-size: 1.05rem; }
.smcg-wuerfel__summe { font-size: 1.05rem; }
.smcg-wuerfel__summe strong { font-family: var( --smcg-display ); font-size: 1.5rem; color: var( --smcg-heading ); }
.smcg-wuerfel__verlauf-titel { margin: 0.9rem 0 0.2rem; font-size: 0.85em; color: var( --smcg-text-2 ); }
.smcg-wuerfel__verlauf { margin: 0; padding-left: 1.1rem; font-size: 0.9em; color: var( --smcg-text-2 ); }
.smcg-wuerfel__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect( 0 0 0 0 ); white-space: nowrap; border: 0; }
@media ( prefers-reduced-motion: reduce ) { .smcg-wuerfel-knopf { transition: none; } }

/* =========================================================================
 * Abenteuer-Seite mit Reitern und Sitzungsansicht (ab 2.44.0,
 * Konzepte/SPIELMODUS-KONZEPT.md). Tickleiste links, Detail rechts (klebt
 * beim Scrollen), Verlauf unten; schmal: Detail als Leiste von unten.
 * ====================================================================== */
.smcg-btn--klein { min-height: 2.1rem; padding: 0.2rem 0.75rem; font-size: 0.92rem; }
.smcg-btn--gefahr-voll { background: var(--smcg-danger); border-color: var(--smcg-danger); color: #fff; font-weight: 600; }
.smcg-btn--gefahr-voll:hover { background: var(--smcg-danger); border-color: var(--smcg-danger); color: #fff; filter: brightness( 1.08 ); }
.smcg.smcg--dark .smcg-btn--gefahr-voll { color: #1a0806; }
.smcg-zahl { font-variant-numeric: tabular-nums; text-align: right; }
.smcg-input.smcg-input--zahl { width: 4.6rem; padding-top: 0.25rem; padding-bottom: 0.25rem; font-variant-numeric: tabular-nums; }

.smcg-camp-detail > .smcg-camp-titel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.8rem; margin-bottom: 0.6rem; }
.smcg-reiter { display: flex; gap: 0.2rem; overflow-x: auto; overflow-y: hidden; box-shadow: inset 0 -1px 0 var(--smcg-line-strong); margin-bottom: 1rem; }
.smcg-reiter__tab {
	border: 0; background: transparent; cursor: pointer; white-space: nowrap;
	padding: 0.55rem 1rem 0.5rem; border-bottom: 3px solid transparent;
	font-family: var(--smcg-display); font-size: 0.88rem; letter-spacing: 0.06em; color: var(--smcg-text-2);
}
.smcg-reiter__tab:hover { color: var(--smcg-heading); }
.smcg-reiter__tab[aria-selected="true"] { color: var(--smcg-heading); border-bottom-color: var(--smcg-accent); font-weight: 600; }
.smcg-reiter__tab:focus-visible { outline: 2px solid var(--smcg-accent); outline-offset: -2px; }
.smcg-reiter__panel > * + * { margin-top: 1.2rem; }

.smcg-sitzung { display: grid; gap: 1rem; grid-template-columns: minmax( 0, 1fr ); }
.smcg-sitzung > *, .smcg-sitzung__spalten > * { min-width: 0; }
.smcg-sitzung__kopfzeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.smcg-sitzung__kopfzeile h3 { margin: 0; }
.smcg-sitzung__knoepfe, .smcg-sitzung__reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.smcg-sitzung__spalten { display: grid; gap: 1rem; align-items: start; grid-template-columns: minmax( 0, 1.15fr ) minmax( 0, 1fr ); }
.smcg-sitzung__leiste h3, .smcg-sitzung__verlauf h3 { margin: 0 0 0.4rem; }
.smcg-sitzung__detail {
	position: sticky;
	top: calc( var(--smcg-oben, var(--wp-admin--admin-bar--height, 0px)) + 0.75rem );
	max-height: calc( 100vh - var(--smcg-oben, var(--wp-admin--admin-bar--height, 0px)) - 1.5rem );
	overflow-y: auto;
}
.smcg-sitzung__detail .smcg-card__inner { display: grid; gap: 0.75rem; }
.smcg-sitzung__dkopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.7rem; }
.smcg-sitzung__dkopf h3 { margin: 0; }
.smcg-sitzung__tick { margin-left: auto; font-family: var(--smcg-display); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--smcg-text-2); }
.smcg-sitzung__tick b { font-size: 1.2rem; color: var(--smcg-heading); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.smcg-sitzung__zu { display: none; }
.smcg-sitzung__block { display: grid; gap: 0.45rem; padding-top: 0.7rem; border-top: 1px solid var(--smcg-line); }
.smcg-sitzung__block h4 { margin: 0; font-family: var(--smcg-display); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--smcg-text-2); font-weight: 500; }
.smcg-sitzung__block p { margin: 0; }
.smcg-sitzung__notiz { width: 100%; box-sizing: border-box; resize: vertical; }
.smcg-sitzung__lp { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.8rem; }
.smcg-sitzung__lpzahl { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.smcg-sitzung__werte { display: grid; grid-template-columns: repeat( auto-fill, minmax( 3.3rem, 1fr ) ); gap: 0.35rem; }
.smcg-sitzung__wert { background: var(--smcg-surface-2); border-radius: 6px; padding: 0.2rem 0.4rem; text-align: center; }
.smcg-sitzung__wert span { display: block; font-family: var(--smcg-display); font-size: 0.66rem; letter-spacing: 0.08em; color: var(--smcg-text-2); }
.smcg-sitzung__wert b { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.smcg-sitzung__angriff { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.3rem 0.7rem; padding: 0.35rem 0.5rem; border-radius: 6px; background: var(--smcg-surface-2); }
.smcg-sitzung__ergebnis { padding: 0.45rem 0.6rem; border-radius: 6px; border: 1px solid var(--smcg-line-strong); font-weight: 600; }
.smcg-sitzung__fuss { padding-top: 0.7rem; border-top: 1px solid var(--smcg-line); }
.smcg-sitzung__auswahl { display: grid; gap: 0.3rem; }
.smcg-sitzung__auswahlzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.35rem 0.5rem; border-radius: 6px; background: var(--smcg-surface-2); cursor: pointer; }

/* Tickleiste */
.smcg-tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.smcg-tl__zeile { display: grid; grid-template-columns: 2.6rem minmax( 0, 1fr ) auto; align-items: center; gap: 0.2rem 0.6rem; padding: 0.3rem 0.4rem 0.3rem 0.2rem; border: 1px solid transparent; border-radius: var(--smcg-r-sm); }
.smcg-tl__zeile:hover { background: var(--smcg-hover); }
.smcg-tl__zeile.is-auswahl { background: var(--smcg-selected); border-color: var(--smcg-line-strong); }
.smcg-tl__tick { font-family: var(--smcg-display); font-weight: 600; font-size: 1.25rem; text-align: center; color: var(--smcg-heading); font-variant-numeric: tabular-nums; }
.smcg-tl__wahl { display: grid; gap: 0.1rem; min-width: 0; padding: 0.15rem 0.25rem; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.smcg-tl__wahl:focus-visible { outline: 2px solid var(--smcg-accent); outline-offset: 2px; }
.smcg-tl__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.45rem; font-weight: 600; }
.smcg-tl__werte { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.6rem; font-size: 0.9rem; color: var(--smcg-text-2); }
.smcg-tag { font-family: var(--smcg-display); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0 0.4rem; border: 1px solid currentColor; border-radius: 4px; font-weight: 500; }
.smcg-tag--nsc { color: var(--smcg-danger); }
.smcg-tag--sf { color: var(--smcg-accent); }
.smcg-tag--haupt { color: var(--smcg-warn); }
.smcg-stufe--warn { color: var(--smcg-warn); font-weight: 600; }
.smcg-stufe--gefahr { color: var(--smcg-danger); font-weight: 600; }
.smcg-balken { display: inline-flex; gap: 3px; vertical-align: middle; }
.smcg-balken__teil { display: flex; width: 16px; height: 12px; overflow: hidden; border-radius: 2px; background: var(--smcg-line-strong); }
.smcg-balken__schaden { height: 100%; background: var(--smcg-danger); }
.smcg-balken--gross .smcg-balken__teil { width: 2.6rem; height: 1rem; }

/* Tabelle der NSC-Verwaltung */
.smcg-tabelle-wrap { overflow-x: auto; }
.smcg-tabelle { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.smcg-tabelle th, .smcg-tabelle td { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--smcg-line); text-align: left; vertical-align: middle; }
.smcg-tabelle thead th { font-family: var(--smcg-display); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--smcg-text-2); font-weight: 500; }
.smcg-tabelle .smcg-zahl { text-align: right; }

/* NSC-Dialog */
dialog.smcg.smcg-dialog.smcg-dialog--breit { width: min( 640px, calc( 100vw - 2rem ) ); }
.smcg-modal.smcg-modal--breit { max-width: 640px; }
.smcg-modal__body > p { margin: 0 0 0.8rem; }
.smcg-nsc-form { display: grid; gap: 0.7rem; }
.smcg-nsc-form .smcg-field { margin: 0; }
.smcg-nsc-form__hg { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.smcg-nsc-form__hg select { max-width: 12rem; }
.smcg-nsc-form__raster { display: grid; grid-template-columns: repeat( auto-fill, minmax( 5.5rem, 1fr ) ); gap: 0.5rem; }
.smcg-nsc-form__raster .smcg-input { width: 100%; }
.smcg-nsc-form__set { border: 0; margin: 0; padding: 0; display: grid; gap: 0.35rem; justify-items: start; }
.smcg-nsc-form__angriffe { display: grid; gap: 0.35rem; width: 100%; }
.smcg-nsc-form__atk { display: grid; grid-template-columns: minmax( 0, 2fr ) 4.2rem minmax( 0, 1.4fr ) 4rem auto; gap: 0.35rem; align-items: center; }
.smcg-nsc-form__atk .smcg-input { width: 100%; min-width: 0; }
.smcg-nsc-form__fehler { margin: 0; min-height: 1.2em; color: var(--smcg-danger); }
.smcg-nsc-form__fuss { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; }

/* Schmal (unter 860 px Breite der Sitzung): eine Spalte, Detail von unten */
.smcg-sitzung.is-schmal .smcg-sitzung__spalten { grid-template-columns: minmax( 0, 1fr ); }
.smcg-sitzung.is-schmal .smcg-sitzung__detail {
	position: fixed; left: 0; right: 0; top: auto; bottom: 0; z-index: 100000;
	max-height: 78vh; margin: 0; border-radius: var(--smcg-r-md) var(--smcg-r-md) 0 0;
	box-shadow: 0 -12px 40px -12px rgba( 0, 0, 0, 0.45 );
	padding-bottom: env( safe-area-inset-bottom, 0px );
}
.smcg-sitzung.is-schmal .smcg-sitzung__detail.is-zu { display: none; }
/* Offene Detail-Leiste: schwebenden Würfelknopf ausblenden (läge darüber). */
body:has( .smcg-sitzung.is-schmal .smcg-sitzung__detail:not( .is-zu ) ) .smcg-wuerfel-knopf { display: none; }
.smcg-sitzung.is-schmal .smcg-sitzung__zu { display: inline-flex; }
.smcg-sitzung.is-schmal .smcg-tl__zeile { grid-template-columns: 2.2rem minmax( 0, 1fr ) auto; }
@media ( max-width: 560px ) {
	.smcg-nsc-form__atk { grid-template-columns: minmax( 0, 1fr ) 4rem; }
}

/* Steuerpult der Sitzung (ab 2.45.0): am Zug, Aktionsmenü, Abwarten,
 * Zeitleiste, Live-Anzeige. */
.smcg-sitzung__info { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 1rem; }
.smcg-sitzung__jetzt { font-family: var(--smcg-display); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--smcg-text-2); }
.smcg-sitzung__jetzt b { font-size: 1.25rem; color: var(--smcg-heading); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.smcg-sitzung__live { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.88rem; color: var(--smcg-text-2); }
.smcg-sitzung__punkt { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--smcg-success); animation: smcg-puls 2.4s ease-out infinite; }
.smcg-sitzung__live.is-getrennt { color: var(--smcg-danger); }
.smcg-sitzung__live.is-getrennt .smcg-sitzung__punkt { background: var(--smcg-danger); animation: none; }
@keyframes smcg-puls { 0% { box-shadow: 0 0 0 0 rgba( 63, 122, 68, 0.5 ); } 70% { box-shadow: 0 0 0 7px rgba( 63, 122, 68, 0 ); } 100% { box-shadow: 0 0 0 0 rgba( 63, 122, 68, 0 ); } }
.smcg-sitzung__schalter { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.92rem; color: var(--smcg-text-2); cursor: pointer; }

.smcg-tl__zeile { position: relative; }
.smcg-tl__zeile.is-dran { border-color: var(--smcg-accent); box-shadow: inset 4px 0 0 var(--smcg-accent); }
.smcg-tl__dran { font-family: var(--smcg-display); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--smcg-accent); }
.smcg-tl__menue {
	position: absolute; z-index: 20; right: 0.3rem; top: calc( 100% - 0.2rem );
	width: min( 23rem, calc( 100vw - 2.5rem ) ); display: grid; gap: 0.5rem; padding: 0.7rem;
	background: var(--smcg-surface); border: 1px solid var(--smcg-line-strong); border-radius: var(--smcg-r-sm); box-shadow: var(--smcg-shadow);
}
.smcg-tl__menue h4 { margin: 0; font-family: var(--smcg-display); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--smcg-text-2); font-weight: 500; }
.smcg-tl__menue p { margin: 0; }
.smcg-tl__bereich { margin-top: 0.7rem; padding-top: 0.5rem; border-top: 1px dashed var(--smcg-line-strong); }
.smcg-tl__bereich h4 { margin: 0 0 0.3rem; font-family: var(--smcg-display); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--smcg-text-2); font-weight: 500; }
.smcg-tl__bereich--warten { border-top-style: solid; border-top-color: var(--smcg-warn); }
.smcg-tl__bereich--warten h4 { color: var(--smcg-warn); }

.smcg-zeit .smcg-card__inner { overflow-x: auto; padding-top: 0.6rem; padding-bottom: 0.6rem; }
.smcg.smcg--dark .smcg-zeit .smcg-card__inner { color-scheme: dark; }
.smcg-zeit__band { display: grid; grid-auto-flow: column; grid-auto-columns: minmax( 2.2rem, 1fr ); min-width: max-content; }
.smcg-zeit__spalte { display: grid; grid-template-rows: auto 1fr; justify-items: center; gap: 0.2rem; min-height: 4.4rem; padding-top: 0.15rem; border-left: 1px dashed var(--smcg-line); }
.smcg-zeit__spalte:first-child { border-left: 0; }
.smcg-zeit__spalte.is-jetzt { background: var(--smcg-selected); border-radius: 6px; }
.smcg-zeit__nr { font-size: 0.78rem; color: var(--smcg-text-2); font-variant-numeric: tabular-nums; }
.smcg-zeit__spalte.is-jetzt .smcg-zeit__nr { color: var(--smcg-heading); font-weight: 700; }
.smcg-zeit__marken { display: grid; gap: 0.15rem; align-content: start; }
.smcg-zeit__warten { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.4rem; font-size: 0.85rem; color: var(--smcg-warn); }
.smcg-marke {
	display: grid; place-items: center; width: 1.8rem; height: 1.8rem; padding: 0; cursor: pointer;
	border: 2px solid var(--smcg-accent); border-radius: 50%; background: var(--smcg-surface); color: var(--smcg-accent);
	font: 700 0.72rem/1 var(--smcg-body);
}
.smcg-marke--nsc { border-color: var(--smcg-danger); color: var(--smcg-danger); border-radius: 4px; }
.smcg-marke--haupt { border-color: var(--smcg-warn); color: var(--smcg-warn); border-radius: 4px; }
.smcg-marke[aria-current="step"] { background: var(--smcg-accent); border-color: var(--smcg-accent); color: var(--smcg-on-accent); }
.smcg-marke:focus-visible { outline: 2px solid var(--smcg-accent); outline-offset: 2px; }
.smcg-tick-item__wartet { font-size: 0.8rem; color: var(--smcg-warn); }
/* Schmal: Aktionsmenü im Fluss unter der Zeile statt schwebend. */
.smcg-sitzung.is-schmal .smcg-tl__menue { position: static; grid-column: 1 / -1; width: auto; box-shadow: none; }
@media ( prefers-reduced-motion: reduce ) { .smcg-sitzung__punkt { animation: none; } }

/* Werte im Blick (ab 2.46.0): Kästchen-Spur, Kästchen-Feld und Zustände der
 * Figuren in der Sitzung. Farben der Verbrauchsarten wie im Prototyp Etappe 3. */
.smcg { --smcg-verz: #b0352a; --smcg-ersch: #c99000; --smcg-kanal: #6f52b5; }
@media screen { .smcg.smcg--dark { --smcg-verz: #d0574b; --smcg-ersch: #e0a106; --smcg-kanal: #9a7fdc; } }
.smcg-spur { display: inline-flex; gap: 3px; vertical-align: middle; flex-wrap: wrap; }
.smcg-spur__gruppe { display: inline-flex; gap: 1px; }
.smcg-spur__k { width: 4px; height: 12px; border-radius: 1px; background: var(--smcg-line-strong); }
.smcg-spur__k--verzehrt { background: var(--smcg-verz); }
.smcg-spur__k--erschoepft { background: var(--smcg-ersch); }
.smcg-spur__k--kanalisiert { background: var(--smcg-kanal); }
.smcg-felder { display: flex; flex-wrap: wrap; gap: 4px; }
.smcg-felder__gruppe { display: flex; flex-wrap: wrap; gap: 2px; padding-right: 5px; border-right: 1px solid var(--smcg-line-strong); }
.smcg-felder__gruppe:last-child { border-right: 0; padding-right: 0; }
.smcg-k { display: inline-block; width: 1.05rem; height: 1.25rem; border-radius: 3px; border: 1.5px solid var(--smcg-line-strong); background: var(--smcg-surface); }
.smcg-k.smcg-k--verzehrt { background: var(--smcg-verz); border-color: var(--smcg-verz); }
.smcg-k.smcg-k--erschoepft { background: var(--smcg-ersch); border-color: var(--smcg-ersch); }
.smcg-k.smcg-k--kanalisiert { background: var(--smcg-kanal); border-color: var(--smcg-kanal); }
.smcg-legende { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; margin: 0; font-size: 0.84rem; color: var(--smcg-text-2); }
.smcg-legende span { display: inline-flex; align-items: center; gap: 0.3rem; }
.smcg-legende .smcg-k { width: 0.75rem; height: 0.75rem; }
.smcg-chip { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0 0.45rem; border-radius: 999px; font-size: 0.82rem; background: var(--smcg-warn-bg); color: var(--smcg-warn); }
.smcg-chip__weg { border: 0; background: transparent; color: inherit; cursor: pointer; font-weight: 700; padding: 0 0.15rem; line-height: 1; min-width: 1.4rem; min-height: 1.4rem; }
.smcg-chip__weg:focus-visible { outline: 2px solid var(--smcg-accent); outline-offset: 1px; }
.smcg-input.smcg-input--klein { width: auto; max-width: 14rem; padding-top: 0.25rem; padding-bottom: 0.25rem; }

/* Begegnungen (ab 2.47.0): vorbereitete, für Spielende verdeckte Gegner. */
.smcg-tl__bereich--verdeckt { border-top-style: solid; border-top-color: var(--smcg-accent); display: grid; gap: 0.4rem; justify-items: start; }
.smcg-tl__bereich--verdeckt h4 { color: var(--smcg-accent); }
.smcg-tl--verdeckt { width: 100%; }
.smcg-tl__verdeckt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.3rem 0.6rem; padding: 0.25rem 0.4rem; border: 1px dashed var(--smcg-line-strong); border-radius: var(--smcg-r-sm); }

/* Tisch-Modus (ab 2.48.0): Steuerpult in der Seitenleiste des Spieltischs.
 * Eine Spalte, Detail klappt unter der Leiste auf (nicht von unten). */
.smcg-vtt-side__sitzung { margin: 0.4rem 0 0.6rem; }
.smcg-sitzung--tisch { gap: 0.6rem; }
.smcg-sitzung--tisch .smcg-card { margin: 0; box-shadow: none; }
.smcg-sitzung--tisch .smcg-card__inner { padding: 0.55rem 0.6rem; }
.smcg-sitzung--tisch .smcg-sitzung__kopfzeile h3 { font-size: 1rem; }
.smcg.smcg .smcg-sitzung.smcg-sitzung--tisch.is-schmal .smcg-sitzung__detail { position: static; max-height: none; overflow: visible; border-radius: var(--smcg-r-sm); box-shadow: none; padding-bottom: 0; z-index: auto; }
.smcg-sitzung--tisch .smcg-tl__zeile { grid-template-columns: 2rem minmax( 0, 1fr ) auto; }
body:has( .smcg-sitzung--tisch .smcg-sitzung__detail:not( .is-zu ) ) .smcg-wuerfel-knopf { display: flex; }

/* =========================================================================
 * Charakterblatt als Cockpit (ab 2.49.0, CHARAKTERMANAGER-UEBERARBEITUNG-
 * KONZEPT.md Etappe 3): Spielwerte-Leiste, Reiter, Reiter „Steigern“.
 * ====================================================================== */
.smcg-leiste {
	position: sticky;
	top: var(--smcg-oben, var(--wp-admin--admin-bar--height, 0px));
	z-index: 30;
	margin: 0 0 1rem;
	background: var(--smcg-surface);
	border: 1px solid var(--smcg-line-strong);
	border-radius: var(--smcg-r-md);
	box-shadow: var(--smcg-shadow);
}
.smcg-leiste__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; padding: 0.45rem 0.7rem; }
.smcg-leiste__spur {
	display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.2rem 0.55rem; cursor: pointer;
	border: 1px solid var(--smcg-line-strong); border-radius: var(--smcg-r-sm); background: var(--smcg-surface); color: var(--smcg-text); font: inherit;
}
.smcg-leiste__spur:hover { background: var(--smcg-hover); }
.smcg-leiste__spur[aria-expanded="true"] { border-color: var(--smcg-accent); box-shadow: inset 0 0 0 1px var(--smcg-accent); }
.smcg-leiste__spur:focus-visible, .smcg-leiste__mini:focus-visible, .smcg-leiste__k:focus-visible { outline: 2px solid var(--smcg-accent); outline-offset: 2px; }
.smcg-leiste__name { font-family: var(--smcg-display); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--smcg-text-2); }
.smcg-leiste__zahl { font-weight: 700; font-variant-numeric: tabular-nums; }
.smcg-leiste__stufe { font-size: 0.86rem; color: var(--smcg-text-2); }
.smcg-leiste__spur.is-warn .smcg-leiste__stufe { color: var(--smcg-warn); font-weight: 600; }
.smcg-leiste__spur.is-gefahr .smcg-leiste__stufe { color: var(--smcg-danger); font-weight: 600; }
.smcg-leiste__wert { display: inline-flex; align-items: center; gap: 0.3rem; }
.smcg-leiste__mini { min-width: 1.9rem; min-height: 1.9rem; padding: 0; border: 1px solid var(--smcg-line-strong); border-radius: 6px; background: var(--smcg-surface); color: var(--smcg-text); cursor: pointer; font-weight: 700; }
.smcg-leiste__zust { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }
.smcg-leiste__ep { margin-left: auto; }
.smcg-leiste__feld { display: grid; gap: 0.6rem; padding: 0.6rem 0.7rem 0.8rem; border-top: 1px solid var(--smcg-line); max-height: 60vh; overflow: auto; }
.smcg-leiste__feldkopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; }
.smcg-leiste__feldtitel { margin: 0; font-size: 1.05rem; }
.smcg-leiste__reihe { display: grid; grid-template-columns: 10rem minmax( 0, 1fr ); gap: 0.5rem; align-items: center; padding: 0.15rem 0.3rem; border-radius: 6px; }
.smcg-leiste__reihe.is-aktuell { background: var(--smcg-selected); }
.smcg-leiste__reihenname { font-size: 0.86rem; color: var(--smcg-text-2); }
.smcg-leiste .smcg-felder__gruppe { border-right: 0; padding-right: 0; }
.smcg-k.smcg-leiste__k { width: 1.8rem; height: 1.8rem; padding: 0; cursor: pointer; color: #fff; font-weight: 700; line-height: 1; }
.smcg-k.smcg-leiste__k.smcg-k--erschoepft { color: #1a1205; }
.smcg-splitter__dot[aria-pressed] { cursor: pointer; }
@media ( max-width: 600px ) {
	.smcg-leiste__reihe { grid-template-columns: minmax( 0, 1fr ); }
	.smcg-leiste__ep { margin-left: 0; }
}

.smcg-blatt__reiter { margin-top: 0.2rem; }
@media print {
	.smcg-blatt__panel[hidden] { display: block !important; }
	.smcg-blatt__panel.smcg-noprint { display: none !important; }
}

.smcg-entw-vorschlaege { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin: 0.4rem 0 0.8rem; }
.smcg-history__plan summary { cursor: pointer; }
.smcg-history__plan ol { margin: 0.3rem 0 0 1.2rem; padding: 0; font-size: 0.9rem; }

/* Reiter „Steigern“ */
.smcg-st { display: grid; gap: 0.8rem; }
.smcg-st__stand { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; margin: 0; }
.smcg-st__kopf p { margin: 0 0 0.3rem; }
.smcg-st__spalten { display: grid; gap: 1rem; grid-template-columns: minmax( 0, 1fr ) minmax( 15rem, 20rem ); align-items: start; }
.smcg-st__links { display: grid; gap: 0.6rem; min-width: 0; }
.smcg-st__werkzeuge { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: end; }
.smcg-st__werkzeuge .smcg-field { margin: 0; min-width: 12rem; }
.smcg-st__unterfilter { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.smcg-st__check { display: inline-flex; align-items: center; gap: 0.35rem; }
.smcg-st__gruppe[aria-pressed="true"] { background: var(--smcg-accent); border-color: var(--smcg-accent); color: var(--smcg-on-accent); }
.smcg-st__liste { display: grid; gap: 0.3rem; }
.smcg-st__angebot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.3rem 0.8rem; padding: 0.35rem 0.55rem; border: 1px solid var(--smcg-line); border-radius: var(--smcg-r-sm); }
.smcg-st__angebot.is-implan { border-color: var(--smcg-accent); background: var(--smcg-selected); }
.smcg-st__text { min-width: 0; }
.smcg-st__name { font-weight: 600; }
.smcg-st__info { font-size: 0.9rem; color: var(--smcg-text-2); font-variant-numeric: tabular-nums; }
.smcg-st__grund { display: block; font-size: 0.86rem; color: var(--smcg-warn); }
.smcg-st__plan {
	position: sticky; top: calc( var(--smcg-oben, var(--wp-admin--admin-bar--height, 0px)) + 5rem );
	display: grid; gap: 0.5rem; padding: 0.7rem 0.8rem;
	border: 1px solid var(--smcg-line-strong); border-radius: var(--smcg-r-md); background: var(--smcg-surface);
}
.smcg-st__griff { display: none; }
.smcg-st__plantitel { margin: 0; }
.smcg-st__planinhalt { display: grid; gap: 0.5rem; }
.smcg-st__planliste { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.3rem; }
.smcg-st__planliste li { display: grid; grid-template-columns: minmax( 0, 1fr ) auto auto; gap: 0.4rem; align-items: center; padding: 0.25rem 0.2rem; border-bottom: 1px solid var(--smcg-line); }
.smcg-st__planliste li.is-fehler { background: var(--smcg-warn-bg); }
.smcg-st__summe { display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 0.5rem; }
.smcg-st__hg { margin: 0; color: var(--smcg-success); font-weight: 600; }
.smcg-st.is-schmal .smcg-st__spalten { grid-template-columns: minmax( 0, 1fr ); }
.smcg-st.is-schmal .smcg-st__plan { top: auto; bottom: 0; z-index: 25; box-shadow: 0 -10px 30px -12px rgba( 0, 0, 0, 0.35 ); }
.smcg-st.is-schmal .smcg-st__griff { display: flex; justify-content: space-between; width: 100%; padding: 0.2rem 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.smcg-st.is-schmal .smcg-st__plantitel { display: none; }
.smcg-st.is-schmal .smcg-st__planinhalt:not( .is-offen ) { display: none; }
.smcg-st.is-schmal .smcg-st__planinhalt.is-offen { max-height: 55vh; overflow: auto; }

/* Leiste schmal (ab 2.49.0): einzeilig, Rest über „Mehr“. */
.smcg-leiste .smcg-spur { flex-wrap: nowrap; }
.smcg-leiste .smcg-splitter__dot { width: 1.15rem; height: 1.15rem; }
.smcg-leiste__mehr { display: none; margin-left: auto; padding: 0.2rem 0.5rem; border: 1px solid var(--smcg-line-strong); border-radius: 999px; background: transparent; color: var(--smcg-text); font: inherit; font-size: 0.9rem; cursor: pointer; }
.smcg-leiste.is-eng .smcg-leiste__mehr { display: inline-flex; }
.smcg-leiste.is-eng .smcg-leiste__zeile { gap: 0.35rem 0.5rem; padding: 0.35rem 0.5rem; }
.smcg-leiste.is-eng .smcg-leiste__spur { padding: 0.15rem 0.4rem; gap: 0.3rem; }
.smcg-leiste.is-eng .smcg-spur__k { width: 3px; }
.smcg-leiste.is-eng .smcg-leiste__stufe { display: none; }
.smcg-leiste.is-eng:not( .is-mehr ) .smcg-leiste__wert,
.smcg-leiste.is-eng:not( .is-mehr ) .smcg-leiste__zust,
.smcg-leiste.is-eng:not( .is-mehr ) .smcg-leiste__ep { display: none; }
.smcg-leiste.is-eng .smcg-leiste__ep { margin-left: 0; }
.smcg-leiste__feld[hidden] { display: none; }

/* =========================================================================
 * Kompakter Druck (ab 2.50.3, CHARBOGEN-DRUCK-KONZEPT.md, Nachtrag
 * „Weniger Seiten“): Maße in pt/mm nach dem Vorbild des Myranor-Bogens –
 * kleinere Druckschrift, knappe Abstände, kleine Karten paarweise
 * nebeneinander. Kästchen zum Ankreuzen und Deko bleiben.
 * ====================================================================== */
@media print {
	.smcg { font-size: 9pt !important; line-height: 1.3 !important; }
	.smcg-head { margin-bottom: 3mm !important; padding: 3mm 5mm !important; }
	.smcg-head h1 { font-size: 17pt !important; }

	.smcg-sheet { display: flow-root !important; }
	.smcg-sheet-card,
	.smcg-sheet-card--wide { margin: 0 0 2.5mm !important; clear: both; }
	.smcg-sheet-card__head { padding: 1mm 2.5mm !important; font-size: 7pt !important; }
	.smcg-sheet-card > *:not(.smcg-sheet-card__head) { padding: 1.5mm 2.5mm !important; }
	.smcg-sheet-card p { margin: 0 0 1mm !important; }
	.smcg-sheet-card p:last-child { margin-bottom: 0 !important; }

	/* Zwei kleine Karten nebeneinander (Stärken | Ressourcen). Float statt
	   Grid/Flex: bricht in Chromium und Firefox sauber um. */
	.smcg-sheet-card.smcg-druck-halb { float: left; clear: none; width: calc(50% - 1.25mm) !important; }
	.smcg-sheet-card.smcg-druck-halb + .smcg-sheet-card.smcg-druck-halb { float: right; }

	/* Zustand: Kästchen und Zeilen dichter. */
	.smcg-cell { width: 4.2mm !important; height: 4.2mm !important; }
	.smcg-lp-row { margin: 0 !important; padding: 0.2mm 0 !important; min-height: 0 !important; }
	.smcg-pool-block { margin-bottom: 1.5mm !important; }
	.smcg-splitter__dot { width: 4.2mm !important; height: 4.2mm !important; }
	.smcg-bild-box { width: 27mm !important; margin-bottom: 1mm !important; }
	.smcg-zustand__row,
	.smcg-zustand__ep,
	.smcg-ep-display { margin: 1mm 0 0 !important; padding: 0 !important; min-height: 0 !important; }

	/* Waffen- und Zaubertabellen knapp. */
	.smcg-zauber-table { font-size: 8.5pt !important; }
	.smcg-zauber-table th,
	.smcg-zauber-table td { padding: 0.6mm 1.2mm !important; }
	.smcg-magic-label { margin: 1mm 0 0.5mm !important; }
	.smcg-rule { margin: 1.5mm 0 !important; }

	/* Bildschirm-Schriftgrößen (rem) auf Druckmaß bringen. */
	.smcg-skill-row,
	.smcg-skill-row *,
	.smcg-inv-row .smcg-buch-name,
	.smcg-zauber-table .smcg-buch-name,
	.smcg-magic-label,
	.smcg-magic-label strong,
	.smcg-geld-display,
	.smcg-geld-display * { font-size: 8.8pt !important; }
	.smcg-charcard__meta,
	.smcg-charcard__meta span,
	.smcg-pool-stufe,
	.smcg-zustand__max,
	.smcg-ep-display,
	.smcg-ep-display span,
	.smcg-inv__meta { font-size: 8pt !important; }
	.smcg-skill-row { padding: 0.15mm 0 !important; }
	/* Heldengrad-Schwelle und Gottheit nebeneinander statt untereinander. */
	.smcg-sheet-card p.smcg-charcard__meta.smcg-print-only { display: inline-block !important; margin: 1.5mm 6mm 0 0 !important; }
	/* Initiative-Wurf ist ein Bildschirm-Werkzeug (der Wert steht bei den abgeleiteten Werten). */
	.smcg-ini { display: none !important; }

	/* Listen und Leerzeilen. */
	.smcg-inv-row { padding: 0.5mm 0 !important; min-height: 0 !important; }
	.smcg-blanklines { margin-top: 2mm !important; }
	.smcg-blankline { height: 5.5mm !important; }
}

/* =========================================================================
 * Spieltisch über die ganze Fläche (ab 2.53.0, SPIELERFEEDBACK-2026-10-
 * KONZEPT.md Paket B, Entscheidung F4; ab 2.55.0 nach Toms Grundsatz
 * „Karte hinten, alles schwebt“). smcg-portal.js setzt am <html> die Klasse
 * .smcg-tisch-voll, solange #/kampagne/{id}/tisch offen ist. Das Portal liegt
 * dann fest über dem Fenster (unter der Adminleiste), Theme-Kopf, -Fuß und
 * „Nach oben“ sind ausgeblendet – ohne Theme-Anpassung.
 *
 * Die Karte (.smcg-vtt-viewport) reicht bis an alle Fensterränder und liegt
 * ganz hinten. Kopfknöpfe, Werkzeuge, Hinweise, „Neben dem Brett“ und die
 * Seitenleiste schweben darüber. Container sind durchsichtig und lassen
 * Zeiger-Ereignisse zur Karte durch (pointer-events: none); nur die Elemente
 * selbst (Knöpfe, Karten, Panels) haben einen festen Hintergrund.
 * Eingeklappt (.is-leiste-zu am .smcg-vtt): nur Werkzeugleiste, Sperr-Symbol
 * und der Knopf zum Ausklappen. Schmal (< 900 px): Seitenleiste als Bottom-Sheet.
 * ====================================================================== */
.smcg-vtt-side__griff { display: none; }

@media screen {
	html.smcg-tisch-voll,
	html.smcg-tisch-voll body { overflow: hidden; overscroll-behavior: none; }
	html.smcg-tisch-voll :is( #ht-kopf, .site-header, .ht-fuss, .site-footer, .ht-hoch ) { display: none !important; }
	/* Würfelknopf breit unten rechts (über dem Platzhalter am Leistenende). */
	html.smcg-tisch-voll { --smcg-wuerfel-unten: 1.25rem; }

	html.smcg-tisch-voll #smcg-portal {
		position: fixed;
		inset: var( --wp-admin--admin-bar--height, 0px ) 0 0 0;
		z-index: 1000;
		display: flex;
		flex-direction: column;
		width: auto;
		max-width: none;
		height: auto;
		margin: 0;
		padding: 0;
		border-radius: 0;
		background: var( --smcg-bg-edge );
	}
	/* Bezugsrahmen der Karte: .smcg-vtt (position: relative aus „.smcg > *“).
	   Alle Zwischenebenen bleiben static, damit die Karte daran hängt. */
	html.smcg-tisch-voll #smcg-portal > .smcg-vtt {
		flex: 1 1 auto;
		min-height: 0;
		display: flex;
		flex-direction: column;
		padding: 0.5rem 0.6rem 0.6rem;
		gap: 0.4rem;
	}
	html.smcg-tisch-voll .smcg-vtt-host,
	html.smcg-tisch-voll .smcg-vtt-huelle,
	html.smcg-tisch-voll .smcg-vtt-buehne {
		position: static;
		flex: 1 1 auto;
		min-height: 0;
		display: flex;
		flex-direction: column;
	}

	/* ---- Die Karte: ganze Fläche, ganz hinten ---- */
	html.smcg-tisch-voll .smcg-vtt-viewport {
		position: absolute;
		inset: 0;
		z-index: 0;
		height: auto;
		min-height: 0;
		border: 0;
		border-radius: 0;
		background: var( --smcg-bg-edge );
	}
	html.smcg-tisch-voll .smcg-vtt-viewport:focus-visible { outline-offset: -3px; }

	/* ---- Schwebende Ebene: Container durchlässig, Elemente fest ---- */
	html.smcg-tisch-voll .smcg-vtt--voll > .smcg-head,
	html.smcg-tisch-voll .smcg-vtt--voll > .smcg-head > *,
	html.smcg-tisch-voll .smcg-vtt-palette,
	html.smcg-tisch-voll .smcg-vtt-palette__group,
	html.smcg-tisch-voll .smcg-vtt-bar,
	html.smcg-tisch-voll .smcg-vtt-bar__slot,
	html.smcg-tisch-voll .smcg-vtt-area {
		pointer-events: none;
	}
	html.smcg-tisch-voll .smcg-vtt--voll > .smcg-head > * > *,
	html.smcg-tisch-voll .smcg-vtt-viewport,
	html.smcg-tisch-voll .smcg-vtt-tray,
	html.smcg-tisch-voll .smcg-vtt-side,
	html.smcg-tisch-voll .smcg-vtt-palette .smcg-vtt-tool,
	html.smcg-tisch-voll .smcg-vtt-bar > *,
	html.smcg-tisch-voll .smcg-vtt-bar__slot > * {
		pointer-events: auto;
	}
	html.smcg-tisch-voll .smcg-vtt--voll > .smcg-head > *,
	html.smcg-tisch-voll .smcg-vtt-palette,
	html.smcg-tisch-voll .smcg-vtt-bar,
	html.smcg-tisch-voll .smcg-vtt-context,
	html.smcg-tisch-voll .smcg-vtt-pvbanner,
	html.smcg-tisch-voll .smcg-vtt-lockbanner,
	html.smcg-tisch-voll .smcg-vtt-syncstatus,
	html.smcg-tisch-voll .smcg-vtt-huelle > .smcg-card,
	html.smcg-tisch-voll .smcg-vtt-tray,
	html.smcg-tisch-voll .smcg-vtt-side {
		position: relative;
		z-index: 2;
	}
	/* Knöpfe sind sonst durchsichtig – über der Karte brauchen sie Grund. */
	html.smcg-tisch-voll .smcg-vtt--voll .smcg-btn:not( .smcg-btn--primary ):not( .smcg-btn--gefahr-voll ) { background-color: var( --smcg-surface ); }
	html.smcg-tisch-voll .smcg-vtt--voll .smcg-btn:not( .smcg-btn--primary ):not( .smcg-btn--gefahr-voll ):hover { background-color: var( --smcg-surface-2 ); }
	html.smcg-tisch-voll .smcg-vtt--voll > .smcg-head .smcg-btn,
	html.smcg-tisch-voll .smcg-vtt-bar .smcg-btn,
	html.smcg-tisch-voll .smcg-vtt-tool,
	html.smcg-tisch-voll .smcg-vtt-switch {
		box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.18 );
	}
	html.smcg-tisch-voll .smcg-vtt-bar__name,
	html.smcg-tisch-voll .smcg-vtt-savestatus {
		padding: 0.2rem 0.65rem;
		border-radius: 999px;
		background: var( --smcg-surface );
		box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.18 );
	}
	html.smcg-tisch-voll .smcg-vtt-savestatus:empty { display: none; }
	/* Grün #2a7d3f erreicht auf der dunklen Pille nur ~2,6:1 – dort die helle Erfolgsfarbe. */
	html.smcg-tisch-voll .smcg--dark .smcg-vtt-savestatus.is-ok { color: var( --smcg-success ); }

	/* ---- Kopf: zurück | Karten, Seitenleiste, Hell/Dunkel ---- */
	html.smcg-tisch-voll .smcg-vtt--voll > .smcg-head {
		flex: 0 0 auto;
		flex-wrap: nowrap;
		align-items: center;
		gap: 0.5rem;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
	}
	html.smcg-tisch-voll .smcg-vtt--voll > .smcg-head .smcg-head__titles {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		min-width: 0;
		max-width: none;
	}
	html.smcg-tisch-voll .smcg-vtt--voll > .smcg-head .smcg-eyebrow { display: none; }
	/* Überschrift „Spieltisch“ nur für Screenreader (Ansage, Fokusziel). */
	html.smcg-tisch-voll .smcg-vtt--voll > .smcg-head h1 {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: 0;
		overflow: hidden;
		clip: rect( 0 0 0 0 );
		white-space: nowrap;
	}
	html.smcg-tisch-voll .smcg-vtt--voll > .smcg-head .smcg-head__actions { flex-wrap: nowrap; gap: 0.4rem; }
	html.smcg-tisch-voll .smcg-vtt--voll > .smcg-head .smcg-btn {
		min-height: 2.5rem; /* 40 px Ziel, der Kopf bleibt schmal */
		padding: 0.3rem 0.8rem;
		font-size: 0.88rem;
		white-space: nowrap;
	}
	html.smcg-tisch-voll .smcg-vtt-zurueck { text-decoration: none; }
	html.smcg-tisch-voll .smcg-vtt-karten-knopf[aria-expanded="true"] {
		background-color: var( --smcg-surface-2 );
		border-color: var( --smcg-accent );
	}

	/* ---- Werkzeuge links, Kartenleiste rechts daneben ---- */
	html.smcg-tisch-voll .smcg-vtt-shell {
		flex: 1 1 auto;
		min-height: 0;
		margin: 0;
		display: grid;
		grid-template-columns: auto minmax( 0, 1fr );
		grid-template-rows: auto auto auto minmax( 0, 1fr );
		column-gap: 0.9rem;
	}
	html.smcg-tisch-voll .smcg-vtt-shell > .smcg-vtt-palette { grid-column: 1; grid-row: 1; align-self: start; }
	html.smcg-tisch-voll .smcg-vtt-shell > .smcg-vtt-bar { grid-column: 2; grid-row: 1; align-self: center; margin: 0; }
	html.smcg-tisch-voll .smcg-vtt-shell > .smcg-vtt-context { grid-column: 1 / -1; grid-row: 2; justify-self: start; margin: 0.4rem 0 0; }
	html.smcg-tisch-voll .smcg-vtt-shell > .smcg-vtt-pvbanner { grid-column: 1 / -1; grid-row: 3; justify-self: start; margin: 0.4rem 0 0; }
	html.smcg-tisch-voll .smcg-vtt-shell > .smcg-vtt-area { grid-column: 1 / -1; grid-row: 4; }
	html.smcg-tisch-voll .smcg-vtt-palette { margin: 0; flex-wrap: nowrap; gap: 0.3rem 0.6rem; }
	html.smcg-tisch-voll .smcg-vtt-palette__group { padding-right: 0; border-right: 0; }
	html.smcg-tisch-voll .smcg-vtt-tool { min-width: 3.6rem; padding: 0.25rem 0.45rem 0.2rem; }
	html.smcg-tisch-voll .smcg-vtt-context { box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.18 ); }

	/* Hinweise schweben als schmale Schilder. */
	html.smcg-tisch-voll .smcg-vtt-lockbanner,
	html.smcg-tisch-voll .smcg-vtt-syncstatus {
		align-self: flex-start;
		margin: 0 0 0.4rem;
		background-color: var( --smcg-surface );
		box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.18 );
	}
	html.smcg-tisch-voll .smcg-vtt-lockbanner { background-image: linear-gradient( rgba( 163, 43, 34, 0.1 ), rgba( 163, 43, 34, 0.1 ) ); }
	html.smcg-tisch-voll .smcg-vtt-huelle > .smcg-card { align-self: flex-start; max-width: 40rem; background: var( --smcg-surface ); }

	/* Kartenverwaltung (SL) als Tafel, rechts unter ihrem Knopf. */
	html.smcg-tisch-voll .smcg-vtt-karten {
		position: absolute;
		z-index: 40;
		top: 3.4rem;
		right: 0.6rem;
		width: min( 60rem, calc( 100% - 1.2rem ) );
	}
	html.smcg-tisch-voll .smcg-vtt-karten > .smcg-card {
		background: var( --smcg-surface );
		box-shadow: var( --smcg-shadow );
	}

	/* ---- „Neben dem Brett“ links, Seitenleiste rechts – beide schwebend ---- */
	html.smcg-tisch-voll .smcg-vtt-area {
		min-height: 0;
		margin-top: 0.5rem;
		flex-wrap: nowrap;
		align-items: flex-start;
	}
	html.smcg-tisch-voll .smcg-vtt-tray {
		max-height: 100%;
		background: var( --smcg-surface );
		box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.2 );
	}
	html.smcg-tisch-voll .smcg-vtt-side {
		flex: 0 0 clamp( 17rem, 24vw, 23rem );
		margin-left: auto;
		max-height: 100%;
		min-height: 0;
		background: var( --smcg-surface );
		box-shadow: 0 4px 18px rgba( 0, 0, 0, 0.25 );
		/* Platz unten, damit der Würfelknopf den Verlauf nicht verdeckt. */
		padding-bottom: 4.5rem;
	}
	html.smcg-tisch-voll .smcg-vtt-side.is-zu { display: none; }
	html.smcg-tisch-voll .smcg-vtt-side .smcg-feed { max-height: none; }

	/* ---- Eingeklappt: nur Werkzeuge, Sperr-Symbol und Ausklapp-Knopf ---- */
	html.smcg-tisch-voll .smcg-vtt--voll.is-leiste-zu > .smcg-head {
		position: absolute;
		z-index: 3;
		top: 0.5rem;
		right: 0.6rem;
	}
	html.smcg-tisch-voll .smcg-vtt--voll.is-leiste-zu > .smcg-head .smcg-head__titles,
	html.smcg-tisch-voll .smcg-vtt--voll.is-leiste-zu > .smcg-head .smcg-head__actions > :not( .smcg-vtt-leiste-knopf ),
	html.smcg-tisch-voll .smcg-vtt--voll.is-leiste-zu .smcg-vtt-karten,
	html.smcg-tisch-voll .smcg-vtt--voll.is-leiste-zu .smcg-vtt-tray { display: none !important; }
	html.smcg-tisch-voll .smcg-vtt--voll.is-leiste-zu .smcg-vtt-leiste-knopf { padding: 0.3rem 0.7rem; }
	html.smcg-tisch-voll .smcg-vtt--voll.is-leiste-zu .smcg-vtt-leiste-knopf .smcg-vtt-knopftext,
	html.smcg-tisch-voll .smcg-vtt-lockbanner__text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect( 0 0 0 0 );
		white-space: nowrap;
	}
	html.smcg-tisch-voll .smcg-vtt--voll:not( .is-leiste-zu ) .smcg-vtt-lockbanner__text { position: static; width: auto; height: auto; clip: auto; overflow: visible; }
	/* Die Werkzeugleiste rückt nach oben, rechts bleibt Platz für den Knopf. */
	html.smcg-tisch-voll .smcg-vtt--voll.is-leiste-zu .smcg-vtt-shell { margin-right: 3.6rem; }
	html.smcg-tisch-voll .smcg-vtt--voll.is-leiste-zu .smcg-vtt-bar { justify-content: flex-start; }
	html.smcg-tisch-voll .smcg-vtt--voll.is-leiste-zu .smcg-vtt-bar__slot--right { margin-left: 0.4rem; }
	html.smcg-tisch-voll .smcg-vtt--voll.is-leiste-zu .smcg-vtt-lockbanner {
		position: absolute;
		z-index: 3;
		top: 3.5rem;
		right: 0.6rem;
		width: 2.5rem;
		height: 2.5rem;
		margin: 0;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
	}
}

/* ---- Schmal: Seitenleiste als Bottom-Sheet ---- */
@media screen and ( max-width: 899px ) {
	html.smcg-tisch-voll { --smcg-wuerfel-unten: 4.25rem; }
	html.smcg-tisch-voll .smcg-vtt-shell { display: flex; flex-direction: column; }
	html.smcg-tisch-voll .smcg-vtt-shell > :is( .smcg-vtt-palette, .smcg-vtt-bar, .smcg-vtt-context, .smcg-vtt-pvbanner ) { align-self: flex-start; }
	html.smcg-tisch-voll .smcg-vtt-shell > .smcg-vtt-bar { margin: 0 0 0.35rem; justify-content: flex-start; }
	html.smcg-tisch-voll .smcg-vtt-bar__slot--right { margin-left: 0; }
	html.smcg-tisch-voll .smcg-vtt-palette { flex-wrap: wrap; }
	html.smcg-tisch-voll .smcg-vtt-area { flex: 1 1 auto; }
	html.smcg-tisch-voll .smcg-vtt-side,
	html.smcg-tisch-voll .smcg-vtt-side.is-zu {
		position: fixed;
		z-index: 60;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		margin: 0;
		max-height: 70vh;
		max-height: 70dvh;
		padding: 0 0 env( safe-area-inset-bottom );
		overflow: hidden;
		border-bottom: 0;
		border-radius: 14px 14px 0 0;
		box-shadow: 0 -8px 24px rgba( 0, 0, 0, 0.25 );
	}
	html.smcg-tisch-voll .smcg-vtt-side.is-zu .smcg-vtt-side__inhalt { display: none; }
	html.smcg-tisch-voll .smcg-vtt-side__inhalt {
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 0.25rem 0.75rem 0.75rem;
	}
	html.smcg-tisch-voll .smcg-vtt-side__griff {
		flex: 0 0 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.25rem;
		width: 100%;
		min-height: 3rem;
		padding: 0.35rem 1rem 0.5rem;
		border: 0;
		border-radius: 14px 14px 0 0;
		background: var( --smcg-surface-2 );
		color: var( --smcg-heading );
		font: inherit;
		font-weight: 600;
		font-size: 0.95rem;
		cursor: pointer;
	}
	html.smcg-tisch-voll .smcg-vtt-side__griff:focus-visible { outline: 3px solid var( --smcg-accent ); outline-offset: -3px; }
	html.smcg-tisch-voll .smcg-vtt-side__griffstrich {
		width: 2.5rem;
		height: 4px;
		border-radius: 2px;
		background: var( --smcg-line-strong );
	}
	/* Offenes Sheet: eigener Wurf darin, Würfelknopf aus dem Weg. */
	html.smcg-tisch-voll body:has( .smcg-vtt-side:not( .is-zu ) ) .smcg-wuerfel-knopf { display: none; }
}

/* ---- Handy: Werkzeuge und Kopfknöpfe nur mit Symbol ---- */
@media screen and ( max-width: 640px ) {
	html.smcg-tisch-voll #smcg-portal > .smcg-vtt { padding: 0.4rem 0.4rem 0.4rem; }
	html.smcg-tisch-voll .smcg-vtt--voll > .smcg-head .smcg-btn { padding: 0.3rem 0.65rem; }
	html.smcg-tisch-voll .smcg-vtt-tool { min-width: 2.75rem; min-height: 2.75rem; }
	html.smcg-tisch-voll .smcg-vtt-karten-knopf .smcg-vtt-knopftext,
	html.smcg-tisch-voll .smcg-vtt-leiste-knopf .smcg-vtt-knopftext,
	html.smcg-tisch-voll .smcg-vtt-bar .smcg-vtt-knopftext,
	html.smcg-tisch-voll .smcg-vtt-bar__name,
	html.smcg-tisch-voll .smcg-vtt-tool__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect( 0 0 0 0 );
		white-space: nowrap;
	}
	html.smcg-tisch-voll .smcg-vtt-bar .smcg-btn { min-width: 2.75rem; min-height: 2.75rem; justify-content: center; }
	html.smcg-tisch-voll .smcg-vtt-savestatus.is-ok { display: none; }
	html.smcg-tisch-voll .smcg-vtt-area { flex-direction: column; gap: 0.4rem; }
	html.smcg-tisch-voll .smcg-vtt-tray { gap: 0.4rem; padding: 0.25rem 0.4rem; align-items: center; }
	html.smcg-tisch-voll .smcg-vtt-tray .smcg-charcard__meta { margin: 0; font-size: 0.85rem; }
}

/* ---- Animierte Karte (ab 2.63.0): Video deckungsgleich über dem
   Vorschaubild (<img>), unter Raster (z 1), Zeichnungen, Token und Nebel. ---- */
.smcg .smcg-vtt-film {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: fill;
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

/* ---- Einblendungen (ab 2.62.0): neue Verlaufseinträge bei eingeklappter
   Seitenleiste, unten links über der Karte. Rechts unten sitzt der
   Würfelknopf, oben die Werkzeugleiste und der Ausklapp-Knopf. ---- */
@media screen {
	html.smcg-tisch-voll .smcg-vtt-einbl {
		position: absolute;
		z-index: 5;
		left: 0.6rem;
		bottom: 1rem;
		width: min( 24rem, calc( 100% - 5.5rem ) );
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		gap: 0.4rem;
		pointer-events: none;
	}
	html.smcg-tisch-voll .smcg-vtt-einbl__item {
		pointer-events: auto;
		display: grid;
		grid-template-columns: auto minmax( 0, 1fr ) auto;
		align-items: start;
		gap: 0.5rem;
		padding: 0.45rem 0.4rem 0.45rem 0.75rem;
		border: 1px solid var( --smcg-line-strong );
		border-radius: 12px;
		background: var( --smcg-surface );
		color: var( --smcg-text );
		box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.25 );
		font-size: 0.92rem;
		line-height: 1.35;
		animation: smcg-einbl-rein 0.22s var( --smcg-ease, ease-out ) both;
		transition: opacity 0.2s ease;
	}
	html.smcg-tisch-voll .smcg-vtt-einbl__item.is-weg { opacity: 0; }
	html.smcg-tisch-voll .smcg-vtt-einbl__icon { padding-top: 0.15rem; }
	html.smcg-tisch-voll .smcg-vtt-einbl__text { margin: 0; padding-top: 0.15rem; overflow-wrap: anywhere; }
	html.smcg-tisch-voll .smcg-vtt-einbl__text b { color: var( --smcg-heading ); }
	html.smcg-tisch-voll .smcg-vtt-einbl__zu {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.25rem;
		height: 2.25rem;
		padding: 0;
		border: 1px solid transparent;
		border-radius: 50%;
		background: transparent;
		color: var( --smcg-text-2 );
		font-size: 1.25rem;
		line-height: 1;
		cursor: pointer;
	}
	html.smcg-tisch-voll .smcg-vtt-einbl__zu:hover { background: var( --smcg-surface-2 ); color: var( --smcg-text ); }
	html.smcg-tisch-voll .smcg-vtt-einbl__zu:focus-visible { outline: 3px solid var( --smcg-accent ); outline-offset: 1px; }

	/* Schalter „Einblendungen“: nur in der eingeklappten Werkzeugleiste. */
	html.smcg-tisch-voll .smcg-vtt--voll:not( .is-leiste-zu ) .smcg-vtt-einbl-knopf { display: none; }
	html.smcg-tisch-voll .smcg-vtt-einbl-knopf[aria-pressed="true"] {
		background-color: var( --smcg-surface-2 );
		border-color: var( --smcg-accent );
	}
	html.smcg-tisch-voll .smcg-vtt-einbl-knopf[aria-pressed="false"] span[aria-hidden] { opacity: 0.45; }
}
@keyframes smcg-einbl-rein {
	from { opacity: 0; transform: translateY( 0.5rem ); }
	to   { opacity: 1; transform: none; }
}
@media screen and ( max-width: 899px ) {
	/* Über dem Griff des Bottom-Sheets, links neben dem Würfelknopf. */
	html.smcg-tisch-voll .smcg-vtt-einbl { bottom: 3.75rem; }
}
@media ( prefers-reduced-motion: reduce ) {
	html.smcg-tisch-voll .smcg-vtt-einbl__item { animation: none; transition: none; }
}

/* ---- Tisch-Modus der Sitzung (Seitenleiste): Knopf unter die Werte ----
   Vorher stand „In den Kampf ▾“/„Aktion ▾“ in einer dritten Spalte und
   überdeckte in der schmalen Leiste LP-Spur und Wert (Rückmeldung Tom). */
.smcg-sitzung.smcg-sitzung--tisch .smcg-tl__zeile { grid-template-columns: 2rem minmax( 0, 1fr ); }
.smcg-sitzung.smcg-sitzung--tisch .smcg-tl__zeile > :nth-child( 3 ) { grid-column: 2; justify-self: start; }
.smcg-sitzung--tisch .smcg-tl__zeile > :nth-child( 3 ):empty { display: none; }
.smcg-sitzung--tisch .smcg-tl__wahl { overflow: hidden; }
.smcg-sitzung--tisch .smcg-spur__gruppe { flex-wrap: wrap; }

/* =====================================================================
 * NSC mit Fertigkeiten und Bild (ab 2.54.0, Spielerfeedback Paket C)
 * ================================================================== */

/* Dialog: Fertigkeit · Wert · entfernen; Bildvorschau */
.smcg-nsc-form__fert { display: grid; gap: 0.35rem; width: 100%; }
.smcg-nsc-form__fz { display: grid; grid-template-columns: minmax( 0, 1fr ) 4.6rem auto; gap: 0.35rem; align-items: center; }
.smcg-nsc-form__fz .smcg-input { width: 100%; min-width: 0; }
.smcg-nsc-form__bild { width: 6rem; height: 6rem; object-fit: cover; border-radius: var(--smcg-r-sm, 6px); border: 1px solid var(--smcg-line); }
.smcg-nsc-form__bild[hidden],
.smcg-nsc-form__set .smcg-btn[hidden] { display: none; }
.smcg-nsc-form__set input[type="file"] { max-width: 100%; }

/* Verwaltung: Vorschaubild vor dem Namen */
.smcg-nsc-tabelle__bild { width: 1.8rem; height: 1.8rem; object-fit: cover; border-radius: 50%; vertical-align: middle; margin-right: 0.45rem; }

/* Tickleiste und Detail */
.smcg-tl__bild { width: 1.6rem; height: 1.6rem; object-fit: cover; border-radius: 50%; align-self: center; flex: none; }
.smcg-sitzung--tisch .smcg-tl__bild { width: 1.35rem; height: 1.35rem; }
.smcg-sitzung__dbild { width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: var(--smcg-r-sm, 6px); border: 1px solid var(--smcg-line); align-self: center; }
.smcg-sitzung__fert { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.smcg-sitzung__fz { display: grid; grid-template-columns: minmax( 0, 1fr ) auto auto; align-items: center; gap: 0.3rem 0.6rem; padding: 0.3rem 0.5rem; border-radius: 6px; background: var(--smcg-surface-2); }
.smcg-sitzung__fzname { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.45rem; min-width: 0; }
.smcg-sitzung__fz .smcg-zahl { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.smcg-tag--abwehr { color: var(--smcg-accent); }

@media screen and ( max-width: 520px ) {
	.smcg-nsc-form__fz { grid-template-columns: minmax( 0, 1fr ) 4rem auto; }
}

/* ---------------------------------------------------------------------------
 * Gegenstandsqualität und Artefakte beim Kauf (ab 2.57.0, Paket E)
 * ------------------------------------------------------------------------- */
.smcg-kauf-q__angabe { display: block; width: 100%; margin: 0 0 0.6rem; }
.smcg-artefakt__neu { margin: 0.4rem 0 0.8rem; }
.smcg-artefakt__felder { display: contents; }
.smcg-artefakt__angabe { width: auto; max-width: 100%; }
.smcg-artefakt-zauber__liste { margin: 0.25rem 0 0; padding-left: 1.2rem; }
.smcg-artefakt-zauber__liste li { margin: 0.15rem 0; }

/* ---------------------------------------------------------------------
 * Meine Dateien und Melden (ab 2.64.0, DATEIABLAGE-MELDEN-KONZEPT.md)
 * ------------------------------------------------------------------ */
.smcg-dateien__titel { margin: 0 0 0.4rem; font-size: 1.15rem; }
.smcg-dateien__belegung { margin: 0 0 0.5rem; font-weight: 600; }
.smcg-dateien__balken {
	display: block; width: 100%; height: 0.9rem; border: 1px solid var(--smcg-field-border);
	border-radius: 999px; overflow: hidden; background: var(--smcg-hover); accent-color: var(--smcg-accent);
	-webkit-appearance: none; appearance: none;
}
.smcg-dateien__balken::-webkit-progress-bar { background: var(--smcg-hover); }
.smcg-dateien__balken::-webkit-progress-value { background: var(--smcg-accent); }
.smcg-dateien__balken::-moz-progress-bar { background: var(--smcg-accent); }
.smcg-dateien__balken--voll::-webkit-progress-value { background: var(--smcg-danger); }
.smcg-dateien__balken--voll::-moz-progress-bar { background: var(--smcg-danger); }
.smcg-dateien-rahmen { overflow-x: auto; }
.smcg-dateien { width: 100%; border-collapse: collapse; margin-top: 0.6rem; }
.smcg-dateien caption { text-align: left; font-weight: 600; padding: 0.3rem 0; caption-side: top; }
.smcg-dateien th, .smcg-dateien td { padding: 0.5rem 0.4rem; border-bottom: 1px solid var(--smcg-line); text-align: left; vertical-align: top; }
.smcg-dateien thead th { font-size: 0.9rem; border-bottom-color: var(--smcg-line-strong); }
.smcg-dateien__bild { display: block; width: 72px; height: 54px; object-fit: cover; border-radius: 6px; border: 1px solid var(--smcg-line); }
.smcg-dateien__bild--leer { display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.smcg-dateien__name { font-weight: normal; }
.smcg-dateien__art { display: block; font-weight: 600; }
.smcg-dateien__datei { display: block; font-size: 0.82rem; word-break: break-all; opacity: 0.85; }
.smcg-dateien__wo { margin: 0; padding-left: 1.1rem; }
.smcg-dateien__groesse { white-space: nowrap; }
.smcg-dateien__aktion { text-align: right; }
@media (max-width: 600px) {
	.smcg-dateien thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect( 0, 0, 0, 0 ); }
	.smcg-dateien, .smcg-dateien tbody, .smcg-dateien tr, .smcg-dateien td, .smcg-dateien th { display: block; width: auto; }
	.smcg-dateien caption { display: block; width: auto; }
	.smcg-dateien tr { display: grid; grid-template-columns: 80px minmax( 0, 1fr ); gap: 0.2rem 0.6rem; padding: 0.6rem 0; border-bottom: 1px solid var(--smcg-line); }
	.smcg-dateien td, .smcg-dateien th { border: 0; padding: 0; min-width: 0; overflow-wrap: anywhere; }
	.smcg-dateien__vorschau { grid-row: span 4; }
	.smcg-dateien td[data-titel]::before { content: attr(data-titel) ": "; font-size: 0.85rem; opacity: 0.8; }
	.smcg-dateien__aktion { text-align: left; }
}
.smcg-melden-zeile { margin-top: 0.8rem; display: flex; justify-content: flex-end; }
.smcg-melden-knopf { font-size: 0.85rem; }
.smcg-melden__gruende { border: 1px solid var(--smcg-line); border-radius: 8px; padding: 0.5rem 0.8rem; margin: 0.6rem 0; }
.smcg-melden__gruende legend { font-weight: 600; padding: 0 0.3rem; }
.smcg-melden__grund { display: flex; gap: 0.4rem; align-items: flex-start; padding: 0.25rem 0; cursor: pointer; }
.smcg-melden__grund input { margin-top: 0.25rem; }
.smcg-melden__fehler { color: var(--smcg-danger); font-weight: 600; min-height: 1.2em; margin: 0.4rem 0; }