/* =========================================================
   Selmas Mystica Tarot – Stil
   Alle Farben/Grössen als Variablen, über Elementor überschreibbar
   ========================================================= */
.smt-widget {
	--smt-fan-w: 92px;
	--smt-fan-count: 22;
	--smt-fan-arc: 70;
	--smt-fan-spread: 80;
	--smt-board-w: 190px;
	--smt-board-gap: 36px;
	--smt-section-gap: 34px;
	--smt-reading-w: 760px;
	--smt-radius: 0px;
	--smt-shadow: 0.45;
	--smt-ratio: 1.91;
	--smt-lift: -22px;

	position: relative;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	text-align: center;
	color: var(--smt-text);
	-webkit-tap-highlight-color: transparent;
	isolation: isolate;
}
.smt-theme-dark {
	--smt-accent: #d4af37;
	--smt-glow: #ffd27a;
	--smt-reveal: #ffcf6b;
	--smt-slot: rgba(212, 175, 55, 0.55);
	--smt-text: #f2e8d2;
	--smt-title: #f6d98f;
	--smt-keywords: #d8c08a;
	--smt-special: #ffe3a3;
	--smt-panel: rgba(14, 8, 20, 0.66);
	--smt-panel-border: rgba(212, 175, 55, 0.35);
	--smt-btn-text: #f6e7c4;
	--smt-btn-bg: rgba(20, 10, 24, 0.45);
}
.smt-theme-light {
	--smt-accent: #6f7896;
	--smt-glow: #e3ecff;
	--smt-reveal: #eef3ff;
	--smt-slot: rgba(120, 132, 160, 0.6);
	--smt-text: #2d2733;
	--smt-title: #4f4270;
	--smt-keywords: #6d6488;
	--smt-special: #3f3466;
	--smt-panel: rgba(250, 244, 230, 0.74);
	--smt-panel-border: rgba(150, 160, 185, 0.5);
	--smt-btn-text: #3a3350;
	--smt-btn-bg: rgba(255, 255, 255, 0.45);
}

/* ---------- Hinweistext ---------- */
.smt-intro {
	min-height: 3.2em;
	margin: 0 auto 6px;
	max-width: 640px;
	font-style: italic;
	letter-spacing: 0.02em;
	color: var(--smt-text);
	transition: opacity 0.6s ease;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}
.smt-theme-light .smt-intro { text-shadow: 0 1px 8px rgba(255, 255, 255, 0.6); }
.smt-intro.smt-fade { opacity: 0; }

/* ---------- Fächer ---------- */
.smt-fan {
	position: relative;
	width: 100%;
	height: 260px;
	margin: 0 auto;
	touch-action: manipulation;
	user-select: none;
	-webkit-user-select: none;
}
.smt-card {
	position: absolute;
	left: 0;
	top: 0;
	width: var(--smt-fan-w);
	height: calc(var(--smt-fan-w) * var(--smt-ratio));
	border-radius: var(--smt-radius);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	transform: translate(var(--x, 0px), var(--y, 0px)) rotate(var(--r, 0deg)) translateY(var(--l, 0px));
	transform-origin: 50% 50%;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease, filter 0.4s ease;
	filter: drop-shadow(0 6px 10px rgba(0, 0, 0, var(--smt-shadow)));
	will-change: transform;
	cursor: default;
}
.smt-card::before,
.smt-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
}
.smt-fan.smt-pickable .smt-card { cursor: pointer; }
.smt-fan.smt-pickable .smt-card:hover,
.smt-fan.smt-pickable .smt-card.smt-touch-hover { --l: var(--smt-lift); z-index: 200 !important; }
.smt-card.smt-gone { opacity: 0; pointer-events: none; }
.smt-card.smt-dim { opacity: 0.28; filter: grayscale(0.6) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3)); pointer-events: none; }

/* --- Hover: Goldglanz --- */
.smt-hover-goldglanz .smt-pickable .smt-card::after {
	background: linear-gradient(115deg, transparent 30%, color-mix(in srgb, var(--smt-glow) 75%, transparent) 48%, rgba(255, 255, 255, 0.85) 50%, color-mix(in srgb, var(--smt-glow) 75%, transparent) 52%, transparent 70%);
	background-size: 260% 100%;
	background-position: 120% 0;
	mix-blend-mode: screen;
}
.smt-hover-goldglanz .smt-pickable .smt-card:hover::after,
.smt-hover-goldglanz .smt-pickable .smt-card.smt-touch-hover::after { animation: smtSheen 1.3s ease forwards; }
.smt-hover-goldglanz .smt-pickable .smt-card:hover,
.smt-hover-goldglanz .smt-pickable .smt-card.smt-touch-hover { filter: drop-shadow(0 0 10px var(--smt-glow)) drop-shadow(0 8px 14px rgba(0, 0, 0, var(--smt-shadow))); }
@keyframes smtSheen { 0% { opacity: 1; background-position: 120% 0; } 100% { opacity: 1; background-position: -60% 0; } }

/* --- Hover: Aura-Puls --- */
.smt-hover-aura .smt-pickable .smt-card:hover,
.smt-hover-aura .smt-pickable .smt-card.smt-touch-hover { animation: smtAura 1.6s ease-in-out infinite; }
@keyframes smtAura {
	0%, 100% { filter: drop-shadow(0 0 6px var(--smt-glow)) drop-shadow(0 8px 12px rgba(0, 0, 0, var(--smt-shadow))); }
	50% { filter: drop-shadow(0 0 22px var(--smt-glow)) drop-shadow(0 0 6px var(--smt-glow)); }
}

/* --- Hover: Anheben mit Leuchtrand --- */
.smt-hover-lift .smt-pickable .smt-card::after { box-shadow: inset 0 0 0 2px var(--smt-glow), 0 0 18px var(--smt-glow); transition: opacity 0.3s ease; border-radius: max(var(--smt-radius), 6px); }
.smt-hover-lift .smt-pickable .smt-card:hover::after,
.smt-hover-lift .smt-pickable .smt-card.smt-touch-hover::after { opacity: 1; }

/* --- Hover: Kerzenflackern --- */
.smt-hover-candle .smt-pickable .smt-card::before {
	background: radial-gradient(120% 70% at 50% 110%, color-mix(in srgb, var(--smt-glow) 85%, transparent), transparent 70%);
	mix-blend-mode: screen;
}
.smt-hover-candle .smt-pickable .smt-card:hover::before,
.smt-hover-candle .smt-pickable .smt-card.smt-touch-hover::before { animation: smtFlicker 1.1s steps(1) infinite; }
.smt-hover-candle .smt-pickable .smt-card:hover,
.smt-hover-candle .smt-pickable .smt-card.smt-touch-hover { filter: drop-shadow(0 6px 16px color-mix(in srgb, var(--smt-glow) 70%, transparent)); }
@keyframes smtFlicker { 0% { opacity: 0.9; } 18% { opacity: 0.65; } 31% { opacity: 1; } 47% { opacity: 0.75; } 63% { opacity: 0.95; } 79% { opacity: 0.6; } 90% { opacity: 0.85; } }

/* --- Hover: Sternenstaub --- */
.smt-hover-stardust .smt-pickable .smt-card::after {
	inset: -40% -20% 30% -20%;
	background-image:
		radial-gradient(circle, var(--smt-glow) 0 1.4px, transparent 2px),
		radial-gradient(circle, #fff 0 1px, transparent 1.6px),
		radial-gradient(circle, var(--smt-glow) 0 1.1px, transparent 1.8px);
	background-size: 26px 34px, 38px 46px, 31px 29px;
	background-position: 0 100%, 12px 100%, 7px 100%;
}
.smt-hover-stardust .smt-pickable .smt-card:hover::after,
.smt-hover-stardust .smt-pickable .smt-card.smt-touch-hover::after { animation: smtDust 1.8s linear infinite; }
.smt-hover-stardust .smt-pickable .smt-card:hover,
.smt-hover-stardust .smt-pickable .smt-card.smt-touch-hover { filter: drop-shadow(0 0 12px var(--smt-glow)); }
@keyframes smtDust {
	0% { opacity: 0; background-position: 0 100%, 12px 100%, 7px 100%; }
	20% { opacity: 1; }
	100% { opacity: 0; background-position: 4px 0, 8px -20px, 10px 10px; }
}

/* ---------- Buttons ---------- */
.smt-actions { margin: 14px 0 0; min-height: 10px; }
.smt-actions-end { margin-top: var(--smt-section-gap); }
.smt-btn {
	display: inline-block;
	font: inherit;
	color: var(--smt-btn-text);
	background-color: var(--smt-btn-bg);
	border: 1px solid var(--smt-accent);
	border-radius: 30px;
	padding: 10px 28px;
	letter-spacing: 0.06em;
	cursor: pointer;
	transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, opacity 0.5s ease;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.smt-btn:hover, .smt-btn:focus-visible { box-shadow: 0 0 16px var(--smt-btn-glow, color-mix(in srgb, var(--smt-glow) 70%, transparent)); outline: none; }
.smt-btn[hidden] { display: none; }
.smt-btn.smt-off { visibility: hidden; opacity: 0; pointer-events: none; }
.smt-btn.smt-fade { opacity: 0; pointer-events: none; }

/* ---------- Ton-Knopf ---------- */
.smt-sound {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 300;
	width: 34px;
	height: 34px;
	padding: 6px;
	border: 1px solid color-mix(in srgb, var(--smt-accent) 60%, transparent);
	border-radius: 50%;
	background: color-mix(in srgb, var(--smt-btn-bg) 80%, transparent);
	color: var(--smt-accent);
	cursor: pointer;
	opacity: 0.75;
	transition: opacity 0.3s ease;
}
.smt-sound:hover { opacity: 1; }
.smt-sound svg { width: 100%; height: 100%; display: block; }
.smt-sound .smt-ico-off, .smt-sound.smt-muted .smt-ico-on { display: none; }
.smt-sound.smt-muted .smt-ico-off { display: block; }

/* ---------- Plätze ---------- */
.smt-lower { margin-top: var(--smt-section-gap); }
.smt-board {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: var(--smt-board-gap);
}
.smt-slot { width: min(var(--smt-board-w), calc((100% - 2 * var(--smt-board-gap)) / 3)); flex: 0 1 auto; min-width: 0; }
.smt-slot-label {
	margin-bottom: 8px;
	font-size: 0.82em;
	letter-spacing: 0.18em;
	color: var(--smt-title);
	opacity: 0.85;
	transition: opacity 0.5s ease, text-shadow 0.5s ease;
	white-space: nowrap;
}
.smt-no-labels .smt-slot-label { display: none; }
.smt-slot-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / var(--smt-ratio);
	border-radius: max(var(--smt-radius), 10px);
	box-shadow: inset 0 0 0 1px var(--smt-slot), inset 0 0 24px color-mix(in srgb, var(--smt-slot) 35%, transparent);
	perspective: 1200px;
	transition: box-shadow 0.6s ease;
}
.smt-slot-frame::before {
	content: "";
	position: absolute;
	inset: 8%;
	border: 1px dashed color-mix(in srgb, var(--smt-slot) 70%, transparent);
	border-radius: max(calc(var(--smt-radius) - 4px), 8px);
	opacity: 0.6;
}
.smt-slot.smt-next .smt-slot-frame { animation: smtSlotGlow 2.2s ease-in-out infinite; }
.smt-slot.smt-next .smt-slot-label { opacity: 1; text-shadow: 0 0 10px var(--smt-label-glow, var(--smt-glow)); }
.smt-slot.smt-filled .smt-slot-frame { box-shadow: none; }
.smt-slot.smt-filled .smt-slot-frame::before { opacity: 0; }
@keyframes smtSlotGlow {
	0%, 100% { box-shadow: inset 0 0 0 1px var(--smt-slot), inset 0 0 18px color-mix(in srgb, var(--smt-slot) 30%, transparent); }
	50% { box-shadow: inset 0 0 0 1px var(--smt-glow), inset 0 0 34px color-mix(in srgb, var(--smt-glow) 45%, transparent), 0 0 18px color-mix(in srgb, var(--smt-glow) 35%, transparent); }
}

/* Karte auf dem Platz */
.smt-sc {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	border-radius: var(--smt-radius);
	filter: drop-shadow(0 8px 14px rgba(0, 0, 0, var(--smt-shadow)));
}
.smt-face {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	overflow: hidden;
}
.smt-face-front { opacity: 0; }
.smt-sc.smt-open .smt-face-front { opacity: 1; }
.smt-sc.smt-open .smt-face-back { opacity: 0; }
.smt-sc.smt-glow { animation: smtRevealGlow 1.8s ease-out; }
.smt-sc.smt-floating { animation: smtFloat 5.5s ease-in-out infinite; }
.smt-slot:nth-child(2) .smt-sc.smt-floating { animation-delay: -1.8s; }
.smt-slot:nth-child(3) .smt-sc.smt-floating { animation-delay: -3.6s; }
@keyframes smtRevealGlow {
	0% { filter: drop-shadow(0 0 0 transparent); }
	30% { filter: drop-shadow(0 0 26px var(--smt-reveal)) drop-shadow(0 0 8px var(--smt-reveal)); }
	100% { filter: drop-shadow(0 8px 14px rgba(0, 0, 0, var(--smt-shadow))); }
}
@keyframes smtFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }

/* Effekt-Ebenen fürs Aufdecken */
.smt-fx {
	position: absolute;
	pointer-events: none;
	border-radius: inherit;
}
.smt-fx-mist { inset: -12%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.35) 55%, transparent 75%); filter: blur(6px); }
.smt-theme-dark .smt-fx-mist { background: radial-gradient(closest-side, rgba(255, 244, 220, 0.75), rgba(200, 180, 150, 0.3) 55%, transparent 75%); }
.smt-fx-wipe { top: -4%; bottom: -4%; width: 14%; left: 0; background: linear-gradient(90deg, transparent, var(--smt-reveal), #fff, var(--smt-reveal), transparent); filter: blur(3px); mix-blend-mode: screen; }
.smt-fx-clip { inset: 0; overflow: hidden; }
.smt-fx-ember { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: translate(-50%, -50%); border-radius: 50%; box-shadow: 0 0 0 2px #ffcf7a, 0 0 10px 4px #ff8a2a, inset 0 0 10px 3px rgba(255, 120, 30, 0.85); }
.smt-fx-shadow { top: -10%; bottom: -10%; width: 120%; left: -130%; border-radius: 50%; background: radial-gradient(closest-side, rgba(5, 3, 12, 0.96), rgba(5, 3, 12, 0.85) 70%, transparent); }
.smt-theme-light .smt-fx-shadow { background: radial-gradient(closest-side, rgba(40, 44, 70, 0.92), rgba(40, 44, 70, 0.75) 70%, transparent); }

/* Fliegende Karte (Fächer → Platz) */
.smt-flyer {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 400;
	background-size: 100% 100%;
	border-radius: var(--smt-radius);
	pointer-events: none;
	filter: drop-shadow(0 0 14px var(--smt-glow)) drop-shadow(0 10px 18px rgba(0, 0, 0, var(--smt-shadow)));
	transform-origin: 0 0;
}

/* ---------- Deutung ---------- */
.smt-reading {
	max-width: var(--smt-reading-w);
	margin: var(--smt-section-gap) auto 0;
	padding: 26px 30px;
	text-align: left;
	background: var(--smt-panel);
	border: 1px solid var(--smt-panel-border);
	border-radius: 18px;
	-webkit-backdrop-filter: blur(var(--smt-pblur, 6px)) saturate(var(--smt-psat, 1));
	backdrop-filter: blur(var(--smt-pblur, 6px)) saturate(var(--smt-psat, 1));
	line-height: 1.6;
	animation: smtPanelIn 0.9s ease both;
}
.smt-reading[hidden] { display: none; }
@keyframes smtPanelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.smt-r-intro, .smt-r-outro { font-style: italic; text-align: center; color: var(--smt-text); }
.smt-r-outro { margin-top: 1.2em; }
.smt-r-special {
	margin: 1em auto 0.4em;
	padding: 0.7em 1em;
	text-align: center;
	color: var(--smt-special);
	border-top: 1px solid var(--smt-lines, color-mix(in srgb, var(--smt-accent) 45%, transparent));
	border-bottom: 1px solid var(--smt-lines, color-mix(in srgb, var(--smt-accent) 45%, transparent));
	text-shadow: 0 0 12px color-mix(in srgb, var(--smt-reveal) 60%, transparent);
}
.smt-r-block { margin-top: 1.25em; }
.smt-r-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2em 0.7em; }
.smt-r-pos { font-size: 0.78em; letter-spacing: 0.2em; color: var(--smt-accent); text-transform: uppercase; }
.smt-r-name { font-size: 1.12em; color: var(--smt-title); }
.smt-r-kw { font-size: 0.86em; font-style: italic; color: var(--smt-keywords); margin-top: 0.1em; }
.smt-r-text { margin-top: 0.3em; color: var(--smt-text); }
.smt-r-block.smt-hl .smt-r-name { text-shadow: 0 0 14px var(--smt-reveal); }
.smt-tx { transition: opacity 0.9s ease, filter 1.1s ease; }
.smt-tx.smt-hidden { opacity: 0; }
.smt-tx.smt-misty { opacity: 0; filter: blur(8px); }
.smt-w { opacity: 0; transition: opacity 0.5s ease; }
.smt-w.smt-on { opacity: 1; }
.smt-q-off { visibility: hidden; }
.smt-caret .smt-q-on::after { content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 2px; vertical-align: -0.12em; background: currentColor; animation: smtCaret 0.8s steps(1) infinite; }
@keyframes smtCaret { 50% { opacity: 0; } }

/* Deutung rechts neben den Karten (Desktop) */
@media (min-width: 1025px) {
	/* Spalten von Anfang an fest: Karten links, Deutung rechts – nichts springt, Seite wird nicht länger */
	.smt-reading-right .smt-lower {
		display: grid;
		grid-template-columns: auto minmax(280px, var(--smt-reading-w));
		justify-content: center;
		align-items: stretch;
		column-gap: calc(var(--smt-board-gap) * 1.5);
	}
	.smt-reading-right .smt-lower .smt-board { width: calc(3 * var(--smt-board-w) + 2 * var(--smt-board-gap)); }
	.smt-reading-right .smt-lower .smt-reading {
		margin: 0;
		height: 0;
		min-height: 100%;
		box-sizing: border-box;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		scrollbar-color: var(--smt-scroll, color-mix(in srgb, var(--smt-accent) 55%, transparent)) transparent;
	}
	.smt-reading-right .smt-lower .smt-reading::-webkit-scrollbar { width: 6px; }
	.smt-reading-right .smt-lower .smt-reading::-webkit-scrollbar-thumb { background: var(--smt-scroll, color-mix(in srgb, var(--smt-accent) 55%, transparent)); border-radius: 6px; }
}

/* ---------- Handy ---------- */
@media (max-width: 767px) {
	.smt-reading { padding: 18px 16px; }
	.smt-slot-label { font-size: 0.68em; letter-spacing: 0.1em; }
	.smt-board { gap: min(var(--smt-board-gap), 4vw); }
}

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
	.smt-widget *, .smt-widget *::before, .smt-widget *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
	.smt-card { transition-duration: 0.01ms; }
}

/* ---------- Nur Leuchten (Hover) ---------- */
.smt-hover-glow .smt-pickable .smt-card:hover,
.smt-hover-glow .smt-pickable .smt-card.smt-touch-hover { filter: drop-shadow(0 0 12px var(--smt-glow)) drop-shadow(0 8px 14px rgba(0, 0, 0, var(--smt-shadow))); }

/* ---------- Plätze erst beim Aufdecken zeigen ---------- */
.smt-slots-hidden .smt-slot-frame,
.smt-slots-hidden .smt-slot.smt-next .smt-slot-frame { box-shadow: none; animation: none; }
.smt-slots-hidden .smt-slot-frame::before { opacity: 0; }
.smt-slots-hidden .smt-slot-label,
.smt-slots-hidden .smt-slot.smt-next .smt-slot-label {
	opacity: 0;
	filter: blur(8px);
	letter-spacing: 0.5em;
	transition: opacity 1.4s ease, filter 1.4s ease, letter-spacing 1.6s cubic-bezier(.2,.7,.2,1), text-shadow 1.4s ease;
}
.smt-slots-hidden .smt-slot.smt-revealing .smt-slot-label,
.smt-slots-hidden .smt-slot.smt-label-on .smt-slot-label {
	opacity: 0.95;
	filter: blur(0);
	letter-spacing: 0.18em;
	text-shadow: 0 0 14px var(--smt-label-glow, var(--smt-glow));
}

/* ---------- Deutung anstelle des Fächers ---------- */
.smt-stage { position: relative; }
.smt-stage > .smt-intro, .smt-stage > .smt-fan, .smt-stage > .smt-actions { transition: opacity 0.7s ease, filter 0.7s ease, visibility 0s linear 0s; }
.smt-reading-overlay.smt-show-reading .smt-stage > .smt-intro,
.smt-reading-overlay.smt-show-reading .smt-stage > .smt-fan,
.smt-reading-overlay.smt-show-reading .smt-stage > .smt-actions {
	opacity: 0;
	filter: blur(6px);
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.7s ease, filter 0.7s ease, visibility 0s linear 0.7s;
}
.smt-reading-overlay .smt-stage > .smt-reading {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	box-sizing: border-box;
	margin: 0 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--smt-scroll, color-mix(in srgb, var(--smt-accent) 55%, transparent)) transparent;
	z-index: 5;
}
.smt-reading-overlay .smt-stage > .smt-reading::-webkit-scrollbar { width: 6px; }
.smt-reading-overlay .smt-stage > .smt-reading::-webkit-scrollbar-thumb { background: var(--smt-scroll, color-mix(in srgb, var(--smt-accent) 55%, transparent)); border-radius: 6px; }
@media (max-width: 767px) {
	.smt-reading-overlay .smt-stage > .smt-reading { top: 42px; }
}

/* Elementor: Widget immer volle Breite (sonst schrumpft es in zentrierten Containern) */
.elementor-widget-selmas_mystica_tarot_068b7ebe { width: 100%; max-width: 100%; }
.smt-theme-light.smt-slots-hidden .smt-slot.smt-label-on .smt-slot-label,
.smt-theme-light.smt-slots-hidden .smt-slot.smt-revealing .smt-slot-label { text-shadow: 0 0 8px var(--smt-label-glow, rgba(255, 255, 255, 0.95)), 0 0 2px rgba(255, 255, 255, 0.9); }

/* ---------- Springende Karte ---------- */
.smt-jumper { z-index: 450; }
.smt-jumper.smt-jumper-open { filter: drop-shadow(0 0 20px var(--smt-reveal)) drop-shadow(0 0 6px var(--smt-reveal)) drop-shadow(0 12px 20px rgba(0, 0, 0, var(--smt-shadow))); }

/* ---------- Pfeil „weiterlesen“ im Glasfeld ---------- */
.smt-more-hint {
	position: sticky;
	bottom: 0;
	height: 0;
	text-align: center;
	color: var(--smt-title);
	pointer-events: none;
}
.smt-more-hint span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 3px;
	box-sizing: border-box;
	border-radius: 50%;
	background: color-mix(in srgb, var(--smt-panel) 80%, transparent);
	box-shadow: 0 0 12px color-mix(in srgb, var(--smt-glow) 45%, transparent);
	transform: translateY(-115%);
	opacity: 0;
	transition: opacity 0.5s ease;
	cursor: pointer;
}
.smt-more-hint svg { width: 100%; height: 100%; display: block; }
.smt-reading.smt-more .smt-more-hint { pointer-events: auto; }
.smt-reading.smt-more .smt-more-hint span { opacity: 0.9; animation: smtHint 1.8s ease-in-out infinite; }
@keyframes smtHint {
	0%, 100% { transform: translateY(-115%); }
	50% { transform: translateY(-85%); }
}

/* =========================================================
   Deutung im Stil „Nebel“ – ohne Kasten, ohne Linien
   ========================================================= */
.smt-theme-dark { --smt-mist: rgba(8, 5, 14, 0.58); --smt-topfog: color-mix(in srgb, var(--smt-glow) 30%, transparent); }
.smt-theme-light { --smt-mist: rgba(252, 246, 236, 0.66); --smt-topfog: rgba(255, 255, 255, 0.75); }
.smt-r-top { position: relative; isolation: isolate; margin-bottom: 34px; }
.smt-panel-glass .smt-r-top { margin-bottom: 0; }
.smt-head-stack .smt-r-head { flex-direction: column; align-items: center; gap: 0.1em; }
.smt-panel-mist .smt-reading {
	--smt-me: var(--smt-mist-edge, 40px);
	background-color: transparent !important;
	background-image: radial-gradient(ellipse at 50% 50%, var(--smt-mist) 0%, var(--smt-mist) calc(var(--smt-mist-spread, 78%) - 30%), color-mix(in srgb, var(--smt-mist) 35%, transparent) 100%) !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: calc(var(--smt-me) + 12px) calc(var(--smt-me) * 0.7 + 18px);
	text-align: center;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--smt-me), #000 calc(100% - var(--smt-me)), transparent 100%), linear-gradient(to bottom, transparent 0, #000 var(--smt-me), #000 calc(100% - var(--smt-me)), transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to right, transparent 0, #000 var(--smt-me), #000 calc(100% - var(--smt-me)), transparent 100%), linear-gradient(to bottom, transparent 0, #000 var(--smt-me), #000 calc(100% - var(--smt-me)), transparent 100%);
	mask-composite: intersect;
	animation: smtMistIn 1.6s ease both;
}
@keyframes smtMistIn { from { opacity: 0; filter: blur(10px); } to { opacity: 1; filter: none; } }
.smt-panel-mist .smt-r-block { text-align: center; }
.smt-panel-mist .smt-r-head { justify-content: center; }
.smt-panel-mist .smt-r-special { border: 0; padding: 0.35em 0; margin: 0.7em auto 0; }
.smt-panel-mist .smt-r-block { margin-top: 1.6em; }
.smt-panel-mist .smt-r-pos { opacity: 0.85; }
/* wabernder Nebel hinter dem oberen Teil */
.smt-r-top.smt-r-top-loop::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -0.6em; bottom: -0.6em; left: 6%; right: 6%;
	background: radial-gradient(ellipse at 35% 50%, var(--smt-topfog) 0%, transparent 62%), radial-gradient(ellipse at 68% 45%, var(--smt-topfog) 0%, transparent 58%);
	filter: blur(14px);
	opacity: 0.55;
	pointer-events: none;
	animation: smtTopFog 9s ease-in-out infinite alternate;
}
@keyframes smtTopFog {
	0% { opacity: 0.35; transform: translateX(-3%) scaleY(0.9); }
	50% { opacity: 0.7; transform: translateX(2%) scaleY(1.05); }
	100% { opacity: 0.45; transform: translateX(3%) scaleY(0.95); }
}
/* Einleitung + Zusatzsätze tauchen aus dem Nebel auf */
.smt-fogin { animation: smtFogIn 2.4s ease-out both; }
@keyframes smtFogIn {
	0% { opacity: 0; filter: blur(14px); transform: translateY(6px) scale(0.97); }
	55% { opacity: 0.75; filter: blur(3px); }
	100% { opacity: 1; filter: none; transform: none; }
}
/* Pfeil über dem ausgeblendeten Rand */
.smt-panel-mist .smt-more-hint { bottom: calc(var(--smt-me) * 0.6); }
.smt-panel-mist .smt-more-hint span { background: color-mix(in srgb, var(--smt-mist) 85%, transparent); }
@media (prefers-reduced-motion: reduce) {
	.smt-r-top.smt-r-top-loop::before, .smt-fogin, .smt-panel-mist .smt-reading { animation: none; }
}