/**
 * Schuldnerberatung self-check widget.
 * Loaded only on pages using the [dfv_schuldenampel] shortcode.
 * Uses the site's card-shadow system + orange chrome. Three result states
 * (red / yellow / green) shown with an icon + headline + muted accent colour
 * — deliberately not a traffic-light graphic.
 */

.schuldenampel {
	margin: 0 0 var(--spacing-lg);
}

.ampel-card {
	background: var(--dfv-bg);
	border-radius: var(--radius);
	box-shadow: var(--card-shadow);
	padding: var(--spacing-lg);
	text-align: center;
	/* Full-width: edges align with the steps / downloads cards below. Inner
	   content (lead, question, answers, result) stays centred via its own
	   max-widths, so the widget still reads tight on a wide card. */
	margin: 0;
}

/* --- Screens --- */
.ampel-screen { grid-column: 1; grid-row: 1; }
.ampel-screen[hidden] { display: block; visibility: hidden; }

/* Scoped to .ampel-screen so the generic ".page-article__content h3" margin
   rule cannot outrank this single-class selector. */
.ampel-screen .ampel-title {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--dfv-heading);
	margin: 0 0 var(--spacing-xs);
}

.ampel-lead {
	color: var(--dfv-text-light);
	max-width: 46ch;
	margin: 0 auto var(--spacing-md);
}



/* --- Progress --- */
.ampel-progress { margin-bottom: var(--spacing-md); }

.ampel-progress__bar {
	height: 6px;
	border-radius: 999px;
	background: var(--dfv-bg-alt);
	overflow: hidden;
}

.ampel-progress__fill {
	display: block;
	height: 100%;
	width: 0;
	background: var(--dfv-orange);
	border-radius: 999px;
	transition: width var(--transition);
}

.ampel-progress__label {
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dfv-text-light);
	margin: var(--spacing-xs) 0 0;
}

/* --- Question --- */
.ampel-question {
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--dfv-heading);
	min-height: 5.6em;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 42ch;
	margin: 0 auto var(--spacing-md);
	line-height: 1.4;
}

.ampel-answers {
	display: flex;
	gap: var(--spacing-sm);
	justify-content: center;
}

.ampel-answer {
	flex: 0 1 150px;
	padding: 0.85rem 1.4rem;
	border: 1px solid var(--dfv-orange);
	border-radius: var(--radius);
	background: transparent;
	color: var(--dfv-orange);
	font-family: var(--font-main);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--transition), color var(--transition), transform var(--transition);
}

.ampel-answer:hover {
	background: var(--dfv-orange);
	color: #fff;
	transform: translateY(-2px);
}

/* --- Back / restart (quiet link-style buttons) --- */
.ampel-back {
	display: inline-block;
	margin-top: var(--spacing-md);
	padding: 0.3rem 0.2rem;
	background: none;
	border: none;
	color: var(--dfv-text-light);
	font-family: var(--font-main);
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	transition: color var(--transition);
}

.ampel-back:hover { color: var(--dfv-orange); }

/* --- Result: Finanzbarometer gauge --- */
.fb-gauge {
	width: 220px;
	max-width: 80%;
	height: auto;
	margin: 0 auto var(--spacing-xs);
	display: block;
	overflow: visible;
}

.fb-arc {
	fill: none;
	stroke-width: 13;
	stroke-linecap: round;
}


.fb-needle {
	transform-box: view-box;
	transform-origin: 100px 100px;
	transform: rotate(0deg);
	transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
	.fb-needle { transition: none; }
}

.ampel-screen .ampel-result__title {
	font-size: 1.35rem;
	font-weight: 600;
	margin: 0 0 var(--spacing-xs);
	color: var(--dfv-heading);
}

.ampel-result__text {
	font-size: 1.05rem;
	color: var(--dfv-text);
	max-width: 44ch;
	margin: 0 auto var(--spacing-md);
	line-height: 1.55;
}

.ampel-result__cta[hidden] { display: none; }

/* Restart drops onto its own centred line beneath the CTA (not stranded
   beside it) and reads as a quiet secondary reset. */
.ampel-result__cta + .ampel-back {
	display: block;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
}

/* Headline picks up the matching band colour (gauge already shows it) */
.ampel-card[data-level="red"]    .ampel-result__title { color: #CC3A1F; }
.ampel-card[data-level="yellow"] .ampel-result__title { color: #B87A0C; }
.ampel-card[data-level="green"]  .ampel-result__title { color: #3F8F36; }

@media (max-width: 480px) {
	.ampel-card { padding: var(--spacing-md); }
	.ampel-answer { flex-basis: 120px; }
	.ampel-question { font-size: 1.05rem; min-height: 7.5em; }
}

/* Fixed-height body keeps the card stable across screens */
.ampel-body {
	display: grid;
	align-items: center;
	min-height: 200px;
}

/* --------------------------------------------------------------------------
   BATCH 1 (Aug 2026): tap targets
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.ampel-back {
		padding: 0.75rem 0.9rem;
	}
}

/* BATCH 2 (Aug 2026): "Neu starten" still measured 40px on touch widths
   (the padding fix above got the quiz Zurueck to 44). Hard floor instead. */
@media (max-width: 1024px) {
	.ampel-back {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

/* BATCH 2d (Aug 2026): fast Ja/Nein tapping triggered the iOS double-tap
   zoom (Evie, iPhone 12 Pro). manipulation keeps pinch zoom, kills the
   double-tap gesture on the widget's buttons. */
.ampel-card button { touch-action: manipulation; }