/* MoSeven + · Neon CTA */

/* Volle Breite, damit Elementor die Höhe auf Mobil (Flexbox mit Umbruch) richtig misst. */
.elementor-element.elementor-widget-moseven-neon-cta {
	width: 100%;
}

.msp-neon {
	--msp-neon-color: #ffab3d;
	--msp-neon-core: #fff1cf;
	--msp-neon-t: 8px;
	--msp-neon-r: 28px;
	--msp-neon-inset: 32px;
	--msp-neon-glow: 12px;
	--msp-neon-glow-i: 100%;
	--msp-neon-light: 35%;
	--msp-neon-gaps: lr;
	--msp-neon-gap: 36px;
	--msp-neon-gap-pos: 50;
	--msp-neon-pad: clamp(20px, 5vw, 72px);
	--msp-neon-btn: var(--msp-neon-color);
	--msp-neon-btn-hover: var(--msp-neon-core);
	--msp-neon-btn-glow: 10px;
	--msp-neon-btn-glow-i: 100%;
	/* Glow-Farbe des Buttons in der eingestellten Stärke */
	--msp-neon-btn-g: color-mix(in srgb, var(--msp-neon-btn) var(--msp-neon-btn-glow-i), transparent);
	--msp-neon-btn-g2: color-mix(in srgb, var(--msp-neon-btn) calc(var(--msp-neon-btn-glow-i) * 0.6), transparent);
	/* Hover: eigene Größe und Stärke, sonst abgeleitet vom Normalzustand */
	--msp-neon-btn-glow-hover: calc(var(--msp-neon-btn-glow) * 1.6);
	--msp-neon-btn-gh: color-mix(in srgb, var(--msp-neon-btn) var(--msp-neon-btn-glow-hover-i, var(--msp-neon-btn-glow-i)), transparent);

	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 560px;
	/* Inhalt bleibt immer innerhalb der Röhre. */
	padding: calc(var(--msp-neon-inset) + var(--msp-neon-t) + var(--msp-neon-pad));
	isolation: isolate;
}

.msp-neon__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.msp-neon__bg::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Lichtschein der Röhre auf dem Hintergrund: dieselbe Form wie die Röhre, breit und weichgezeichnet. */
.msp-neon__light {
	position: absolute;
	inset: 0;
	z-index: -1;
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	opacity: var(--msp-neon-light);
	pointer-events: none;
	filter: blur(calc(var(--msp-neon-glow) * 2.2));
}

.msp-neon__light .msp-neon__rect {
	fill: none;
	stroke: var(--msp-neon-color);
	stroke-width: calc(var(--msp-neon-glow) * 5 + var(--msp-neon-t));
	stroke-linecap: round;
}

/* Die Röhre: das Skript setzt Lage, Größe und Lücken passend zur aktuellen Größe. */
.msp-neon__frame {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
	/* Größe über --msp-neon-glow, Stärke über --msp-neon-glow-i (0–100 %). */
	filter:
		drop-shadow(0 0 calc(var(--msp-neon-glow) * 0.2) color-mix(in srgb, var(--msp-neon-color) var(--msp-neon-glow-i), transparent))
		drop-shadow(0 0 calc(var(--msp-neon-glow) * 0.8) color-mix(in srgb, var(--msp-neon-color) var(--msp-neon-glow-i), transparent))
		drop-shadow(0 0 calc(var(--msp-neon-glow) * 1.8) color-mix(in srgb, var(--msp-neon-color) calc(var(--msp-neon-glow-i) * 0.55), transparent));
}

.msp-neon__tube,
.msp-neon__core {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.msp-neon__tube {
	stroke: var(--msp-neon-color);
	stroke-width: var(--msp-neon-t);
}

.msp-neon__core {
	stroke: var(--msp-neon-core);
	stroke-width: calc(var(--msp-neon-t) * 0.38);
	opacity: 0.9;
}

/* Ohne Skript: einfacher Rahmen als Ersatz. */
.msp-neon:not(.is-ready) .msp-neon__frame,
.msp-neon:not(.is-ready) .msp-neon__light {
	display: none;
}

.msp-neon:not(.is-ready)::after {
	content: "";
	position: absolute;
	inset: var(--msp-neon-inset);
	border: var(--msp-neon-t) solid var(--msp-neon-color);
	border-radius: var(--msp-neon-r);
	box-shadow: 0 0 var(--msp-neon-glow) var(--msp-neon-color), inset 0 0 var(--msp-neon-glow) var(--msp-neon-color);
	pointer-events: none;
}

/* Inhalt */
.msp-neon__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 1100px;
	text-align: center;
}

.msp-neon .msp-neon__headline {
	margin: 0 0 1.1em;
	color: #fff;
	font-size: clamp(1.25rem, 4.2vw, 3.5rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-shadow: 0 0 0.25em rgba(255, 255, 255, 0.6), 0 0 0.7em rgba(255, 255, 255, 0.3);
	/* Nur ganze Wörter umbrechen: keine automatische Silbentrennung (auch nicht vom Theme geerbt).
	   Getrennt wird ein Wort nur, wenn es allein breiter ist als der Platz. */
	overflow-wrap: break-word;
	word-break: normal;
	-webkit-hyphens: manual;
	hyphens: manual;
	/* Zeilen möglichst gleich lang verteilen. */
	text-wrap: balance;
}

.msp-neon .msp-neon__subtext {
	margin: 0 0 1.6em;
	color: #fff;
	font-size: clamp(1rem, 1.6vw, 1.25rem);
	line-height: 1.5;
	overflow-wrap: break-word;
	word-break: normal;
	-webkit-hyphens: manual;
	hyphens: manual;
}

.msp-neon .msp-neon__content > :last-child {
	margin-bottom: 0;
}

.msp-neon .msp-neon__button,
.msp-neon .msp-neon__button:hover,
.msp-neon .msp-neon__button:focus {
	text-decoration: none;
}

.msp-neon .msp-neon__button {
	display: inline-block;
	box-sizing: border-box;
	max-width: 100%;
	padding: 0.35em 0.75em;
	border: 3px solid var(--msp-neon-btn);
	border-radius: 14px;
	background-color: transparent;
	color: var(--msp-neon-btn);
	font-size: clamp(1.5rem, 4vw, 3rem);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-shadow: 0 0 calc(var(--msp-neon-btn-glow) * 0.6) var(--msp-neon-btn-g), 0 0 calc(var(--msp-neon-btn-glow) * 1.6) var(--msp-neon-btn-g);
	box-shadow:
		0 0 calc(var(--msp-neon-btn-glow) * 0.5) var(--msp-neon-btn-g),
		0 0 calc(var(--msp-neon-btn-glow) * 1.6) var(--msp-neon-btn-g2),
		inset 0 0 calc(var(--msp-neon-btn-glow) * 0.8) var(--msp-neon-btn-g2);
	transition: color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, text-shadow 0.25s ease;
}

.msp-neon a.msp-neon__button:hover,
.msp-neon a.msp-neon__button:focus-visible {
	border-color: var(--msp-neon-btn-hover);
	color: var(--msp-neon-btn-hover);
	text-shadow: 0 0 calc(var(--msp-neon-btn-glow-hover) * 0.5) var(--msp-neon-btn-gh), 0 0 calc(var(--msp-neon-btn-glow-hover) * 1.5) var(--msp-neon-btn-gh);
	box-shadow:
		0 0 calc(var(--msp-neon-btn-glow-hover) * 0.55) var(--msp-neon-btn-gh),
		0 0 calc(var(--msp-neon-btn-glow-hover) * 1.6) var(--msp-neon-btn-gh),
		inset 0 0 calc(var(--msp-neon-btn-glow-hover) * 0.75) var(--msp-neon-btn-gh);
}

/* Button als Bild: kein Rahmen, kein Innenabstand. Der Glow folgt der Form des Bildes. */
.msp-neon.msp-neon--btn-image {
	--msp-neon-btn-glow: 0px;
	/* Auch ohne eigenen Glow leuchtet das Bild bei Hover leicht auf. */
	--msp-neon-btn-glow-hover: calc(var(--msp-neon-btn-glow) * 1.6 + 4px);
}

.msp-neon .msp-neon__button.msp-neon__button--image,
.msp-neon a.msp-neon__button.msp-neon__button--image:hover,
.msp-neon a.msp-neon__button.msp-neon__button--image:focus-visible {
	padding: 0;
	border: 0 none;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	text-shadow: none;
	font-size: 0;
	line-height: 0;
}

/* Die Breite liegt auf dem Link, das Bild füllt ihn. So ist genau das Bild klickbar. */
.msp-neon .msp-neon__button.msp-neon__button--image {
	width: 320px;
	max-width: 100%;
}

.msp-neon .msp-neon__button-image {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	filter:
		drop-shadow(0 0 calc(var(--msp-neon-btn-glow) * 0.4) var(--msp-neon-btn-g))
		drop-shadow(0 0 calc(var(--msp-neon-btn-glow) * 1.2) var(--msp-neon-btn-g2));
	transition: transform 0.25s ease, filter 0.25s ease;
}

.msp-neon a.msp-neon__button--image:hover .msp-neon__button-image,
.msp-neon a.msp-neon__button--image:focus-visible .msp-neon__button-image {
	transform: scale(1.04);
	filter:
		brightness(1.15)
		drop-shadow(0 0 calc(var(--msp-neon-btn-glow-hover) * 0.4) var(--msp-neon-btn-gh))
		drop-shadow(0 0 calc(var(--msp-neon-btn-glow-hover) * 1.2) var(--msp-neon-btn-gh));
}

.msp-neon a.msp-neon__button:focus-visible {
	border-color: var(--msp-neon-btn-hover);
	color: var(--msp-neon-btn-hover);
	text-shadow: 0 0 calc(var(--msp-neon-btn-glow) * 0.8) var(--msp-neon-btn), 0 0 calc(var(--msp-neon-btn-glow) * 2.4) var(--msp-neon-btn);
	box-shadow:
		0 0 calc(var(--msp-neon-btn-glow) * 0.9) var(--msp-neon-btn),
		0 0 calc(var(--msp-neon-btn-glow) * 2.6) var(--msp-neon-btn),
		inset 0 0 calc(var(--msp-neon-btn-glow) * 1.2) var(--msp-neon-btn);
}

.msp-neon a.msp-neon__button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 5px;
}

/* Flackern: Einschalten, sobald der Bereich sichtbar wird. */
.msp-neon--flicker-on.is-ready:not(.is-on) .msp-neon__frame,
.msp-neon--flicker-always.is-ready:not(.is-on) .msp-neon__frame {
	opacity: 0.12;
}

/* Der Lichtschein hat eine eigene Deckkraft, deshalb blendet er über die Sichtbarkeit seines Inhalts. */
.msp-neon--flicker-on.is-ready:not(.is-on) .msp-neon__light .msp-neon__rect,
.msp-neon--flicker-always.is-ready:not(.is-on) .msp-neon__light .msp-neon__rect {
	opacity: 0.12;
}

.msp-neon--flicker-on.is-on .msp-neon__frame,
.msp-neon--flicker-on.is-on .msp-neon__light .msp-neon__rect {
	animation: msp-neon-on 1.3s linear 1 both;
}

.msp-neon--flicker-always.is-on .msp-neon__frame,
.msp-neon--flicker-always.is-on .msp-neon__light .msp-neon__rect {
	animation: msp-neon-on 1.3s linear 1 both, msp-neon-idle 9s linear 1.3s infinite;
}

@keyframes msp-neon-on {
	0% { opacity: 0.12; }
	8% { opacity: 1; }
	12% { opacity: 0.2; }
	20% { opacity: 0.9; }
	24% { opacity: 0.25; }
	38% { opacity: 1; }
	44% { opacity: 0.55; }
	52%, 100% { opacity: 1; }
}

@keyframes msp-neon-idle {
	0%, 61%, 63%, 66%, 100% { opacity: 1; }
	62% { opacity: 0.45; }
	64.5% { opacity: 0.7; }
}

@media (max-width: 767px) {
	.msp-neon {
		--msp-neon-t: 6px;
		--msp-neon-inset: 22px;
		--msp-neon-r: 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.msp-neon .msp-neon__frame,
	.msp-neon .msp-neon__light .msp-neon__rect {
		opacity: 1 !important;
		animation: none !important;
	}

	.msp-neon .msp-neon__button,
	.msp-neon .msp-neon__button-image {
		transition: none;
	}

	.msp-neon a.msp-neon__button--image:hover .msp-neon__button-image {
		transform: none;
	}
}