/* ==========================================================================
   DW Lobbyfit Quiz – Frontend Styles
   Customize the quiz appearance by overriding the CSS custom properties
   below, e.g. in your theme's Additional CSS or a child theme stylesheet.
   ========================================================================== */

:root {
	/* ── Brand colours ─────────────────────────────────────────────── */
	--dw-color-primary:              #8b9a3e;
	--dw-color-primary-dark:         #6b7730;
	--dw-color-primary-light:        #b8c460;

	/* ── General text & background ─────────────────────────────────── */
	--dw-color-bg:                   #f5f3ec;
	--dw-color-text:                 #3a3a28;
	--dw-color-text-muted:           #6a6a50;

	/* ── Tab navigation ────────────────────────────────────────────── */
	--dw-color-tab-active-bg:        #8b9a3e;
	--dw-color-tab-active-text:      #ffffff;
	--dw-color-tab-inactive-bg:      #e5e2d8;
	--dw-color-tab-inactive-text:    #5a5a3a;
	--dw-color-tab-hover-bg:         #d0ce94;
	--dw-color-tab-border:           #8b9a3e;

	/* ── Question list ──────────────────────────────────────────────── */
	--dw-color-question-border:      #e0ddd2;

	/* ── 3-position toggle ─────────────────────────────────────────── */
	--dw-color-toggle-ja-track:      var(--var-laub);   /* linke Hälfte (JA) */
	--dw-color-toggle-nein-bg:       #e8e5db;   /* rechte Hälfte (NEIN) */
	--dw-color-toggle-thumb:         #ffffff;
	--dw-color-toggle-ja-label:      #000;
	--dw-color-toggle-nein-label:    #000;

	/* ── Progress bar ───────────────────────────────────────────────── */
	--dw-color-progress-bg:          #e0ddd2;
	--dw-color-progress-fill:        #8b9a3e;

	/* ── Result ranges ─────────────────────────────────────────────── */
	--dw-color-result-bg:            #efece3;
	--dw-color-result-border:        #dddad0;
	--dw-color-result-text:          #3a3a28;
	--dw-color-result-highlight-bg:  #8b9a3e;
	--dw-color-result-highlight-border: #6b7730;
	--dw-color-result-highlight-text: #ffffff;

	/* ── Typography ─────────────────────────────────────────────────── */
	--dw-text-size-base:             1rem;
	--dw-text-size-tab:              2.5rem;
	--dw-text-size-info:             0.95rem;
	--dw-text-size-question:         0.9rem;
	--dw-text-size-score:            1rem;
	--dw-text-size-result-label:     0.78rem;
	--dw-text-size-result-text:      0.875rem;

	/* ── Toggle dimensions ─────────────────────────────────────────── */
	--dw-toggle-track-width:         100%;
	--dw-toggle-track-height:        38px;
	--dw-toggle-thumb-size:          15px;

	/* ── Spacing ────────────────────────────────────────────────────── */
	--dw-spacing-base:               1rem;
	--dw-spacing-sm:                 0.5rem;
	--dw-spacing-lg:                 1.5rem;
	--dw-spacing-question-gap:       2rem;

	/* ── Border radius ──────────────────────────────────────────────── */
	--dw-radius-tab:                 3rem;
	--dw-radius-toggle:              999px;
	--dw-radius-result:              6px;
	--dw-radius-progress:            999px;
}


/* ==========================================================================
   Quiz wrapper
   ========================================================================== */
.dw-quiz {
	/*font-size: var(--dw-text-size-base);*/
	color: var(--dw-color-text);
	box-sizing: border-box;
	/*background-color:var(--var-creme);*/

}

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


/* ==========================================================================
   Tab navigation
   ========================================================================== */
.dw-quiz__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
	/*border-bottom: 2px solid var(--dw-color-tab-border);*/
	padding-bottom: 0;

	
}

.dw-quiz__tab {
	padding: 10px 100px;
	font-size: var(--dw-text-size-tab);
	font-weight: bold;
	font-family: 'Literata', serif;
	border:none !important;
	border-radius: var(--dw-radius-tab) var(--dw-radius-tab) 0 0;
	cursor: pointer;
	background: var(--var-laub);
	color: var(--var-blau);
	transition: background 0.2s ease, color 0.2s ease;
	line-height: 1.4;
	outline-offset: 2px;
	position: relative;
	bottom: -2px; /* sit on the border */

}

.dw-quiz__tab:hover:not(.is-active) {
	background: var(--dw-color-tab-hover-bg);
}

.dw-quiz__tab.is-active {
	background: var(--var-creme);
	color: var(--var-blau);

	/*border-bottom: 2px solid var(--dw-color-tab-active-bg);*/
	z-index: 1;
}


/* ==========================================================================
   Panels
   ========================================================================== */
.dw-quiz__panels {
	padding-top: var(--dw-spacing-base);
}

.dw-quiz__panel {
	display: none;
}

.dw-quiz__panel.is-active {
	display: block;
}


/* ==========================================================================
   Category info text
   ========================================================================== */
.dw-quiz__category-info {
	font-family: 'Outfit';
    font-size: var(--var-copytext);
    font-weight: bold;
    line-height: 1.5em;
    letter-spacing: 0.02em;
    color: var(--var-blau);
	margin-bottom: var(--dw-spacing-lg);
}

.dw-quiz__category-info p:last-child {
	margin-bottom: 0;
}


/* ==========================================================================
   Questions list
   ========================================================================== */
.dw-quiz__questions {
	list-style: none;
	/*margin: 0 0 var(--dw-spacing-lg) 0;*/
	padding: 53px 43px;;
	background-color: white;
	margin:0;
}

.dw-quiz__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10rem;
	padding: var(--dw-spacing-question-gap) 0;
	/*border-bottom: 1px solid var(--dw-color-question-border);*/
}

.dw-quiz__question:first-child {
	/*border-top: 1px solid var(--dw-color-question-border);*/
}

.dw-quiz__question-text {
	font-family: 'Outfit';
    font-size: var(--var-copytext);
    font-weight: normal;
    line-height: 1.5em;
    letter-spacing: 0.02em;
    color: var(--var-blau);
	flex: 1;
}


/* ==========================================================================
   Percent slider  (0 % → 100 %)
   ========================================================================== */

/* Wrapper – same flex role as the former .dw-toggle */
.dw-slider {
	flex-shrink: 0;
	width: 25%;
	display: flex;
	flex-direction: column;
	gap: 4px;
	user-select: none;
	-webkit-user-select: none;
}

/* Current value display */
.dw-slider__value {
	font-family: 'Outfit';
	font-size: 1rem;
	font-weight: bold;
	color: var(--var-blau);
	text-align: center;
}

/* Native range input – reset & size */
.dw-slider__input {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: var(--dw-toggle-track-height); /* 38px */
	background: transparent;
	cursor: pointer;
	padding: 0;
	margin: 0;
	outline: none;
	--dw-slider-pct: 0%;
}

/* ── Webkit track ────────────────────────────────────────────────────── */
.dw-slider__input::-webkit-slider-runnable-track {
	height: var(--dw-toggle-track-height);
	border-radius: var(--dw-radius-toggle);
	background: linear-gradient(
		to right,
		var(--var-laub)              0%,
		var(--var-laub)              var(--dw-slider-pct),
		var(--dw-color-toggle-nein-bg) var(--dw-slider-pct),
		var(--dw-color-toggle-nein-bg) 100%
	);
}

/* ── Firefox track ───────────────────────────────────────────────────── */
.dw-slider__input::-moz-range-track {
	height: var(--dw-toggle-track-height);
	border-radius: var(--dw-radius-toggle);
	background: linear-gradient(
		to right,
		var(--var-laub)              0%,
		var(--var-laub)              var(--dw-slider-pct),
		var(--dw-color-toggle-nein-bg) var(--dw-slider-pct),
		var(--dw-color-toggle-nein-bg) 100%
	);
}

/* ── Webkit thumb ────────────────────────────────────────────────────── */
.dw-slider__input::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: var(--dw-toggle-thumb-size);   /* 15px */
	height: var(--dw-toggle-thumb-size);
	margin-top: calc((var(--dw-toggle-track-height) - var(--dw-toggle-thumb-size)) / 2);
	border-radius: 50%;
	background: var(--dw-color-toggle-thumb);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
	outline: 14px solid rgba(186, 185, 77, 0.5);
	cursor: grab;
	transition: outline-width 0.15s ease;
}

.dw-slider__input:active::-webkit-slider-thumb {
	cursor: grabbing;
	outline-width: 8px;
}

/* ── Firefox thumb ───────────────────────────────────────────────────── */
.dw-slider__input::-moz-range-thumb {
	width: var(--dw-toggle-thumb-size);
	height: var(--dw-toggle-thumb-size);
	border-radius: 50%;
	border: none;
	background: var(--dw-color-toggle-thumb);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
	outline: 14px solid rgba(186, 185, 77, 0.5);
	cursor: grab;
}

.dw-slider__input:active::-moz-range-thumb {
	cursor: grabbing;
}

/* Scale labels below the slider */
.dw-slider__scale {
	display: flex;
	justify-content: space-between;
	font-family: 'Outfit';
	font-size: var(--dw-text-size-result-label);
	color: var(--var-blau);
	opacity: 0.6;
}


/* ==========================================================================
   Score / Progress bar
   ========================================================================== */
.dw-quiz__score-section {
	/*margin: var(--dw-spacing-base) 0 var(--dw-spacing-lg);*/
	background-color:white;
	padding-left:43px;
	padding-right:43px;
}

.dw-quiz__score-label {
    font-family: 'Literata';
    font-size: var(--var-subline);
    font-weight: 500;
    line-height: 1.45em;
    color: var(--var-blau);
	
}

.dw-quiz__progress-value {
	font-weight: 700;
}

.dw-quiz__progress-bar-track {
	height: 40px;
	background: var(--dw-color-progress-bg);
	border-radius: var(--dw-radius-progress);
	overflow: hidden;
}

.dw-quiz__progress-bar-fill {
	height: 100%;
	width: 0%;
	background: var(--var-laub);
	border-radius: var(--dw-radius-progress);
	transition: width 0.35s ease;
}

.dw-quiz__progress-scale {
	display: flex;
	justify-content: space-between;
	margin-top: 3px;
	font-family: 'Outfit';
    font-size: var(--var-copytext);
    font-weight: normal;
    line-height: 1.5em;
    letter-spacing: 0.02em;
    color: var(--var-blau);
}


/* ==========================================================================
   Result ranges
   ========================================================================== */
.dw-quiz__results {
	margin-top: 0;
	background-color:white;
	padding: 53px 43px;
}

.dw-quiz__results-heading {

	margin: 0 0 var(--dw-spacing-sm) 0;
    font-family: 'Literata';
    font-size: var(--var-subline);
    font-weight: 500;
    line-height: 1.45em;
    color: var(--var-blau);	
}

.dw-quiz__results-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--dw-spacing-sm);
}

.dw-quiz__result-range {
	/*background: var(--dw-color-result-bg);
	border: 1px solid var(--dw-color-result-border);
	border-radius: var(--dw-radius-result);*/
	padding: var(--dw-spacing-base);
	transition:
		background      0.4s ease,
		border-color    0.4s ease,
		transform       0.3s ease;

   font-family: 'Outfit';
    font-size: var(--var-copytext);
    font-weight: normal;
    line-height: 1.5em;
    letter-spacing: 0.02em;
    color: var(--var-blau);
	opacity:0.2;

}

/* Highlighted when all questions are answered and this range matches */
.dw-quiz__result-range.is-highlighted {
	background: var(--var-laub);
	/*border-color: var(--dw-color-result-highlight-border);*/
	transform: scale(1.02);
	/*color:var(--var-blau);*/
	opacity:1;
}

.dw-quiz__result-range.is-highlighted .dw-quiz__result-range-percent,
.dw-quiz__result-range.is-highlighted .dw-quiz__result-label,
.dw-quiz__result-range.is-highlighted .dw-quiz__result-text {
	color: var(--dw-color-result-highlight-text);
	transition: color 0.4s ease;
}

.dw-quiz__result-range-meta {
	margin-bottom: 0.45rem;
}

.dw-quiz__result-range-percent {
	display: block;
	margin-bottom: 3px;
}

.dw-quiz__result-label {
	display: block;
}

.dw-quiz__result-text {
	margin: 0;
}


/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 600px) {
	.dw-quiz__question {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--dw-spacing-sm);
	}

	.dw-quiz__tab {
		padding: 0.45rem 0.85rem;
		font-size: 0.82rem;
	}

	.dw-quiz__results-grid {
		grid-template-columns: 1fr;
	}

	.dw-slider {
		width: 100%;
	}

}