/* StradeCon | Core – Potential-Analyse
   Alle Regeln mit !important und .scx-Präfix, damit Elementor/Theme nichts überschreibt. */

.scx-wrap,
.scx-wrap * {
	box-sizing: border-box !important;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.5 !important;
}

.scx-wrap {
	background: #0F2B33 !important;
	width: 100% !important;
	padding: 96px 0 !important;
	position: relative !important;
	overflow: visible !important;
}

.scx-inner {
	max-width: 1152px !important;
	margin: 0 auto !important;
	padding: 0 24px !important;
}

.scx-hidden { display: none !important; }

/* Kopf */
.scx-head { text-align: center !important; margin-bottom: 64px !important; }
.scx-kicker {
	color: #C4D600 !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	margin-bottom: 8px !important;
}
.scx-title {
	color: #FFFFFF !important;
	font-size: 36px !important;
	font-weight: 800 !important;
	letter-spacing: -0.02em !important;
	margin-bottom: 16px !important;
}
.scx-sub {
	color: #A9C2D1 !important;
	max-width: 672px !important;
	margin: 0 auto !important;
	font-size: 16px !important;
}

/* Schutz gegen Abschneiden: nie breiter als der Bildschirm, egal was das Theme vorgibt */
.scx-wrap { max-width: 100vw !important; }
.scx-inner, .scx-form, .scx-panel, .scx-diagram { max-width: 100% !important; min-width: 0 !important; }
.scx-grid > *, .scx-fields > * { min-width: 0 !important; }
.scx-input, .scx-textarea { max-width: 100% !important; }
@media (min-width: 1024px) {
	.scx-diagram { max-width: 560px !important; }
}

/* Mobil */
@media (max-width: 640px) {
	.scx-wrap { padding: 56px 0 !important; }
	.scx-inner { padding: 0 16px !important; }
	.scx-head { margin-bottom: 40px !important; }
	.scx-title { font-size: 28px !important; }
	.scx-sub { font-size: 15px !important; }
	.scx-grid { gap: 32px !important; }
	.scx-form { padding: 24px 20px !important; }
	.scx-submit { font-size: 14px !important; padding: 14px 10px !important; white-space: normal !important; }
	.scx-submit .scx-arrow { flex-shrink: 0 !important; }
	/* SVG-Beschriftungen auf kleinen Displays vergrößern (skalieren mit dem SVG) */
	.scx-diagram svg text.scx-hexlabel { font-size: 13px !important; letter-spacing: 0.3px !important; }
}

/* Raster */
.scx-grid {
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: 48px !important;
	align-items: center !important;
	max-width: 1152px !important;
	margin: 0 auto !important;
}
@media (min-width: 1024px) {
	.scx-grid { grid-template-columns: 1fr 1fr !important; gap: 64px !important; align-items: start !important; }
	.scx-grid-result { align-items: center !important; }
	.scx-diagram-static {
		position: sticky !important;
		top: 32px !important;
		max-width: 520px !important;
	}
}

/* Diagramm */
.scx-diagram { width: 100% !important; max-width: 560px !important; margin: 0 auto !important; }
.scx-diagram svg { width: 100% !important; height: auto !important; display: block !important; overflow: visible !important; }
.scx-diagram-static { display: block !important; max-width: 520px !important; }
@media (max-width: 1023px) {
	.scx-diagram-static { max-width: 320px !important; }
}
.scx-seg { cursor: pointer !important; transition: opacity 0.3s !important; outline: none !important; }
.scx-seg:hover, .scx-seg:focus-visible { opacity: 1 !important; }

/* Formular */
.scx-form {
	background: #FFFFFF !important;
	border-radius: 2px !important;
	padding: 32px !important;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4) !important;
}
@media (min-width: 768px) {
	.scx-form { padding: 48px !important; }
}
.scx-fields {
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: 20px !important;
}
@media (min-width: 640px) {
	.scx-fields { grid-template-columns: 1fr 1fr !important; }
	.scx-field-full { grid-column: span 2 !important; }
}
.scx-label {
	display: block !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	color: #2E3D52 !important;
	margin-bottom: 4px !important;
}
.scx-optional { color: #7FA6BC !important; font-weight: 400 !important; }
.scx-input {
	display: block !important;
	width: 100% !important;
	background: #F4F7F9 !important;
	border: 1px solid rgba(169, 194, 209, 0.5) !important;
	padding: 12px !important;
	font-size: 14px !important;
	border-radius: 2px !important;
	color: #0F2B33 !important;
	outline: none !important;
	box-shadow: none !important;
	min-height: 0 !important;
	appearance: auto !important;
	-webkit-appearance: auto !important;
}
.scx-input:focus { border-color: #00B4CE !important; }
.scx-input::placeholder { color: #9aa9b6 !important; opacity: 1 !important; }
.scx-textarea { resize: none !important; }
select.scx-input { height: auto !important; }

/* Potentialanalyse (Ja/Nein-Fragen) */
.scx-rating-intro { margin-bottom: 4px !important; }
.scx-rating-kicker { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: #00778B !important; margin-bottom: 4px !important; }
.scx-rating-heading { font-size: 18px !important; font-weight: 800 !important; color: #0F2B33 !important; margin-bottom: 4px !important; }
.scx-rating-sub { font-size: 13px !important; color: #7FA6BC !important; }
.scx-question {
	border: 1px solid rgba(169, 194, 209, 0.4) !important;
	border-radius: 2px !important;
	padding: 16px !important;
	background: #F9FBFC !important;
}
.scx-q-label { font-size: 13px !important; font-weight: 700 !important; color: #0F2B33 !important; margin-bottom: 4px !important; }
.scx-q-text { font-size: 13px !important; color: #2E3D52 !important; margin-bottom: 12px !important; }
.scx-yn { display: flex !important; gap: 12px !important; }
.scx-yn-option {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	flex: 1 1 0 !important;
	border: 1px solid rgba(169, 194, 209, 0.5) !important;
	border-radius: 2px !important;
	background: #FFFFFF !important;
	padding: 10px 14px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #0F2B33 !important;
	cursor: pointer !important;
	transition: border-color 0.2s, background-color 0.2s !important;
}
.scx-yn-option:hover { border-color: #00B4CE !important; }
.scx-yn-option:has(.scx-yn-radio:checked) { border-color: #00B4CE !important; background: rgba(0, 180, 206, 0.08) !important; }
.scx-yn-radio {
	width: 16px !important;
	height: 16px !important;
	flex-shrink: 0 !important;
	accent-color: #00B4CE !important;
	appearance: auto !important;
	-webkit-appearance: auto !important;
	cursor: pointer !important;
}

/* Datenschutz */
.scx-consent-label {
	display: flex !important;
	align-items: flex-start !important;
	gap: 10px !important;
	font-size: 13px !important;
	color: #2E3D52 !important;
	cursor: pointer !important;
	font-weight: 400 !important;
}
.scx-consent-label a { color: #00778B !important; text-decoration: underline !important; }
.scx-checkbox {
	width: 16px !important;
	height: 16px !important;
	margin-top: 2px !important;
	flex-shrink: 0 !important;
	accent-color: #00B4CE !important;
	appearance: auto !important;
	-webkit-appearance: auto !important;
	cursor: pointer !important;
}

/* Honeypot */
.scx-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* Fehler */
.scx-error {
	margin-top: 16px !important;
	background: #FDECEC !important;
	border-left: 3px solid #D9534F !important;
	color: #A94442 !important;
	font-size: 13px !important;
	padding: 10px 12px !important;
}

/* Multistep */
.scx-progress { display: flex !important; justify-content: center !important; gap: 8px !important; margin-bottom: 24px !important; }
.scx-dot {
	width: 10px !important;
	height: 10px !important;
	border-radius: 50% !important;
	background: rgba(169, 194, 209, 0.4) !important;
	transition: background-color 0.3s !important;
}
.scx-dot-active { background: #00B4CE !important; }
.scx-step-nav { display: flex !important; gap: 12px !important; align-items: stretch !important; }
.scx-step-nav .scx-submit { margin-top: 24px !important; }
.scx-back {
	margin-top: 24px !important;
	background: #F4F7F9 !important;
	color: #0F2B33 !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	padding: 16px 20px !important;
	border: 1px solid rgba(169, 194, 209, 0.5) !important;
	border-radius: 2px !important;
	cursor: pointer !important;
	white-space: nowrap !important;
	flex-shrink: 0 !important;
}
.scx-back:hover { border-color: #00B4CE !important; }
@media (max-width: 640px) {
	.scx-back { font-size: 14px !important; padding: 14px 14px !important; }
}

/* Button */
.scx-submit {
	display: flex !important;
	width: 100% !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	background: #0F2B33 !important;
	color: #FFFFFF !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	padding: 16px !important;
	border: none !important;
	border-radius: 2px !important;
	margin-top: 24px !important;
	cursor: pointer !important;
	transition: background-color 0.3s !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}
.scx-submit:hover { background: #00B4CE !important; }
.scx-submit.scx-hidden, .scx-back.scx-hidden, .scx-step.scx-hidden { display: none !important; }
.scx-submit:disabled { opacity: 0.6 !important; cursor: wait !important; }

/* Ladeanimation */
.scx-loading {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 380px !important;
	gap: 18px !important;
}
.scx-spinner {
	width: 64px !important;
	height: 64px !important;
	border: 4px solid rgba(127, 166, 188, 0.3) !important;
	border-top-color: #00B4CE !important;
	border-radius: 50% !important;
	animation: scx-spin 0.9s linear infinite !important;
}
@keyframes scx-spin { to { transform: rotate(360deg); } }
.scx-loading-text { color: #FFFFFF !important; font-size: 20px !important; font-weight: 700 !important; }
.scx-loading-sub { color: #A9C2D1 !important; font-size: 14px !important; }

/* Ergebnis-Panel */
.scx-panel {
	width: 100% !important;
	background: rgba(46, 61, 82, 0.8) !important;
	border: 1px solid rgba(28, 127, 149, 0.5) !important;
	padding: 32px !important;
	border-radius: 2px !important;
	backdrop-filter: blur(12px) !important;
}
@media (min-width: 768px) {
	.scx-panel { padding: 40px !important; }
}
.scx-panel-head {
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
	margin-bottom: 24px !important;
}
.scx-panel-icon {
	width: 48px !important;
	height: 48px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 2px !important;
	border: 1px solid !important;
	color: #FFFFFF !important;
	font-weight: 800 !important;
	font-size: 18px !important;
}
.scx-panel-phase { color: #C4D600 !important; font-family: monospace !important; font-size: 14px !important; }
.scx-panel-title { color: #FFFFFF !important; font-size: 22px !important; font-weight: 700 !important; line-height: 1.25 !important; overflow-wrap: anywhere !important; word-break: break-word !important; hyphens: auto !important; -webkit-hyphens: auto !important; min-width: 0 !important; }
.scx-panel-head > div { min-width: 0 !important; }
@media (max-width: 480px) {
	.scx-panel-title { font-size: 17px !important; letter-spacing: 0.01em !important; }
}
.scx-panel-points { list-style: none !important; margin-bottom: 24px !important; }
.scx-panel-points li {
	border-left: 2px solid !important;
	padding-left: 16px !important;
	margin-bottom: 16px !important;
}
.scx-point-label { color: #FFFFFF !important; font-weight: 700 !important; font-size: 14px !important; margin-bottom: 4px !important; }
.scx-point-text { color: #A9C2D1 !important; font-size: 14px !important; }
.scx-panel-rating {
	padding-top: 20px !important;
	border-top: 1px solid rgba(127, 166, 188, 0.3) !important;
}
.scx-rating-label {
	color: rgba(255, 255, 255, 0.5) !important;
	font-size: 12px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	margin-bottom: 8px !important;
}
.scx-rating-row { display: flex !important; align-items: center !important; gap: 16px !important; }
.scx-rating-bar {
	width: 100% !important;
	background: #0F2B33 !important;
	height: 8px !important;
	border-radius: 9999px !important;
	overflow: hidden !important;
}
.scx-rating-fill {
	height: 100% !important;
	background: #00B4CE !important;
	width: 0 !important;
	transition: width 0.6s ease !important;
}
.scx-rating-value { color: #00B4CE !important; font-weight: 700 !important; font-size: 14px !important; white-space: nowrap !important; }

/* Ergebnis-Fußzeile */
.scx-result-footer { text-align: center !important; margin-top: 40px !important; }
.scx-result-footer p { color: #7FA6BC !important; font-size: 14px !important; }
.scx-again {
	margin-top: 16px !important;
	background: none !important;
	border: none !important;
	color: #C4D600 !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	text-decoration: underline !important;
	text-underline-offset: 4px !important;
	cursor: pointer !important;
	transition: color 0.3s !important;
}
.scx-again:hover { color: #FFFFFF !important; }