/**
 * One Shamanism – Path Quiz
 *
 * DELIBERATELY ALMOST NO STYLING.
 *
 * The quiz renders your own classes — .card, .card.gold, .eyebrow and the
 * native WordPress button markup with .btn-gold — so it inherits the One
 * Shamanism design automatically. This file only does the things your design
 * system cannot know about: layout of the answer list, the loading animation,
 * the roadmap rail and the form fields.
 *
 * No colours. No fonts. No radii. If the site design changes, the quiz
 * follows it without anyone touching this file.
 */

.osq {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: 720px;
}

.osq *,
.osq *::before,
.osq *::after {
	box-sizing: inherit;
}

/* --- Head -------------------------------------------------------------- */

.osq__heading,
.osq__intro {
	text-align: center;
}

.osq__intro {
	margin: 0 auto 1.75rem;
	max-width: 34rem;
}

.osq__noscript {
	padding: 1rem;
}

/* --- Stage ------------------------------------------------------------- */

.osq__stage {
	position: relative;
}

.osq__stage.is-entering {
	animation: osq-fade-up 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes osq-fade-up {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* --- Progress ---------------------------------------------------------- */

.osq__progress {
	height: 3px;
	margin-bottom: 1.25rem;
	background: currentColor;
	opacity: 0.15;
	overflow: hidden;
}

.osq__progress-bar {
	display: block;
	height: 100%;
	background: currentColor;
	opacity: 1;
	transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.osq__step {
	margin: 0 0 0.4rem;
}

/* --- Question ---------------------------------------------------------- */

.osq__question {
	margin: 0 0 0.35rem;
	text-wrap: balance;
}

.osq__question-sub {
	margin: 0 0 1.25rem;
	opacity: 0.8;
}

.osq__answers {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.6rem;
}

.osq__answers-item {
	margin: 0;
}

/* The answer carries your .card class; we only make it behave like a button. */
.osq__answer {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	width: 100%;
	margin: 0;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
	-webkit-tap-highlight-color: transparent;
}

.osq__answer:hover {
	transform: translateY(-1px);
}

.osq__answer:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

.osq__answer:active,
.osq__answer.is-chosen {
	transform: scale(0.985);
}

.osq__answer-mark {
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 0.3rem;
	border: 2px solid currentColor;
	border-radius: 50%;
	opacity: 0.55;
	transition: opacity 0.18s ease, background-color 0.18s ease;
}

.osq__answer.is-chosen .osq__answer-mark {
	background: currentColor;
	opacity: 1;
}

.osq__answer-text {
	flex: 1 1 auto;
	overflow-wrap: anywhere;
}

.osq__back,
.osq__reset {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 0.9rem;
	cursor: pointer;
	opacity: 0.75;
	-webkit-appearance: none;
	appearance: none;
}

.osq__back {
	margin-top: 0.8rem;
	padding: 0.5rem 0.6rem 0.5rem 0;
}

.osq__reset {
	justify-content: center;
	margin: 1.2rem auto 0;
	padding: 0.5rem 0.9rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.osq__back:hover,
.osq__reset:hover,
.osq__back:focus-visible,
.osq__reset:focus-visible {
	opacity: 1;
}

/* --- Loading ----------------------------------------------------------- */

.osq__loading {
	padding: 2.5rem 0.5rem;
	text-align: center;
}

.osq__loading-title,
.osq__loading-sub {
	margin-inline: auto;
}

.osq__orb {
	position: relative;
	width: 84px;
	height: 84px;
	margin: 0 auto 1.5rem;
}

.osq__orb span {
	position: absolute;
	inset: 0;
	border: 2px solid transparent;
	border-top-color: currentColor;
	border-radius: 50%;
	animation: osq-spin 1.6s linear infinite;
}

.osq__orb span:nth-child(2) {
	inset: 12px;
	opacity: 0.6;
	animation-duration: 2.3s;
	animation-direction: reverse;
}

.osq__orb span:nth-child(3) {
	inset: 24px;
	opacity: 0.35;
	animation-duration: 3s;
}

@keyframes osq-spin {
	to {
		transform: rotate(360deg);
	}
}

.osq__loading-title {
	margin: 0 0 0.4rem;
}

.osq__loading-sub {
	margin: 0 auto;
	max-width: 26rem;
	opacity: 0.8;
}

/* --- Result ------------------------------------------------------------ */

.osq__result {
	text-align: center;
}

.osq__result-eyebrow,
.osq__result-title,
.osq__result-intro {
	margin-inline: auto;
	text-align: center;
}

/* Die Karten selbst bleiben linksbündig – nur der Kopf ist zentriert. */
.osq__roadmap,
.osq__card {
	text-align: left;
}

.osq__result-eyebrow {
	margin: 0 0 0.25rem;
}

.osq__result-title {
	margin: 0 0 0.4rem;
}

.osq__result-intro {
	margin: 0 auto 1.75rem;
	max-width: 34rem;
	opacity: 0.85;
	text-wrap: pretty;
}

.osq__roadmap {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.9rem;
}

/* The card carries your .card / .card.gold class. */
.osq__card {
	display: flex;
	gap: 0.85rem;
	animation: osq-card-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
	animation-delay: var(--osq-delay, 0ms);
}

@keyframes osq-card-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.osq__card-rail {
	flex: 0 0 auto;
	display: flex;
	justify-content: center;
	width: 2.4rem;
}

/* Die Schrittzahl ist der einzige Ort, an dem diese Datei Farbe setzt.
   Beide Werte stehen wörtlich so in deinem Anmeldeformular auf der
   Startseite. Über die Variablen kannst du sie jederzeit überschreiben. */
.osq {
	--osq-dot-bg: #091A3E;
	--osq-dot-fg: #ffffff;
	--osq-dot-bg-gold: #FCB903;
	--osq-dot-fg-gold: #091A3E;
}

.osq__card-dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	border: 0;
	border-radius: 50%;
	background: var(--osq-dot-bg);
	color: var(--osq-dot-fg);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* Schritt 3 in Gold, damit die Zielstufe sichtbar heraussticht. */
.osq__card--mid .osq__card-dot,
.osq__card--premium .osq__card-dot {
	background: var(--osq-dot-bg-gold);
	color: var(--osq-dot-fg-gold);
}

.osq__card-body {
	flex: 1 1 auto;
	min-width: 0;
}

.osq__card-step {
	margin: 0 0 0.3rem;
}

.osq__card-head {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 0.75rem;
	align-items: baseline;
	justify-content: space-between;
}

.osq__card-title {
	margin: 0;
	overflow-wrap: anywhere;
}

.osq__card-price {
	flex: 0 0 auto;
	font-weight: 700;
	white-space: nowrap;
}

.osq__card-badge {
	display: inline-block;
	margin-top: 0.45rem;
	padding: 0.15rem 0.6rem;
	border: 1px solid currentColor;
	font-size: 0.8rem;
	font-weight: 600;
	opacity: 0.75;
}

.osq__card-teaser {
	margin: 0.5rem 0 0.9rem;
	overflow-wrap: anywhere;
}

/* Buttons are your native block markup — do not restyle them, only place them. */
.osq__card-cta,
.osq__form-actions {
	margin-top: 0.25rem;
}

.osq__card-cta .wp-block-button,
.osq__form-actions .wp-block-button {
	margin: 0;
}

/* --- Opt-in ------------------------------------------------------------ */

.osq__optin {
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid currentColor;
	border-color: color-mix(in srgb, currentColor 20%, transparent);
	text-align: center;
}

.osq__optin-title {
	margin: 0 0 0.25rem;
}

.osq__optin-text {
	margin: 0 0 1rem;
	opacity: 0.85;
}

.osq__form {
	display: grid;
	gap: 0.7rem;
	max-width: 500px;
	margin: 0 auto;
	text-align: left;
}

.osq__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.osq__field {
	display: grid;
	gap: 0.25rem;
}

.osq__field-label {
	font-size: 0.85rem;
	font-weight: 600;
	opacity: 0.8;
}

/* Field styling mirrors the .os-lp-form fields on the home page. */
.osq__field input {
	width: 100%;
	padding: 12px;
	border: 1px solid #979797;
	border-radius: 6px;
	background: #fff;
	color: #000;
	font-family: inherit;
	font-size: 16px; /* 16px stops iOS from zooming in */
}

.osq__field input:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 1px;
}

.osq__consent {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	min-height: 44px;
	padding: 0.35rem 0;
	font-size: 12px;
	line-height: 1.5;
	cursor: pointer;
}

.osq__consent input {
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 3px;
}

.osq__consent a {
	color: inherit;
	text-decoration: underline;
}

.osq__form .osq__optin-cta {
	width: 100%;
	border: 0;
	cursor: pointer;
	font: inherit;
}

.osq__form .osq__optin-cta:disabled {
	cursor: default;
	opacity: 0.5;
}

.osq__form-msg {
	margin: 0;
	min-height: 1.2em;
	font-size: 0.9rem;
	text-align: center;
}

.osq__form-msg.is-error {
	color: #a1332f;
}

.osq__form-msg.is-success {
	font-weight: 700;
}

/* --- Reduced motion ---------------------------------------------------- */

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

/* --- Editor placeholder ------------------------------------------------ */

.osq-editor-placeholder {
	padding: 1.5rem;
	border: 1px dashed rgba(0, 0, 0, 0.25);
	text-align: center;
}

.osq-editor-placeholder p {
	margin: 0.4rem 0 0;
	font-size: 0.9rem;
	opacity: 0.75;
}

.osq-editor-placeholder__hint {
	font-size: 0.8rem !important;
}