/*
 * Testformular, fuer alle Tests (Stresstest, Lebensrad).
 *
 * Mobil zuerst: der Test wird ueberwiegend am Telefon ausgefuellt.
 * Mit JavaScript wird daraus ein Blaetterformular (eine Frage pro
 * Bildschirm); ohne JavaScript stehen alle Fragen untereinander.
 *
 * Die Variablen haengen am Wrapper (.kg-block) UND am Formular selbst, damit
 * ein Shortcode ohne Block-Wrapper dieselbe Farbgebung bekommt.
 */

.kg-block,
.kg-test {
	/* Marken-Rampe, gemessen an der Low-Poly-Grafik. Kein Gruen: es kommt
	   in keinem Marken-Asset vor. */
	--kg-ink: #002B3F;
	--kg-petrol: #114162;
	--kg-indigo: #464B7A;
	--kg-berry: #8E4F8E;
	--kg-coral: #F56267;

	/* Belohnungstoene. Fortschritt und Knopf duerfen sie tragen, ein
	   Antwortwert nicht. */
	--kg-orange: #FF803C;
	--kg-amber: #FF9C19;

	--kg-paper: #FBFAF7;
	--kg-surface: #FFFFFF;
	--kg-muted: #5A6B75;
	--kg-line: #E3E0D8;
	--kg-rail: #EDEBE4;

	/* Typo-Skala, Verhaeltnis 1.25 ab 16. */
	--kg-t-fine: 13px;
	--kg-t-body: 16px;
	--kg-t-lead: 20px;
	--kg-t-section: 25px;
	--kg-t-page: 31px;

	--kg-radius: 16px;
	--kg-radius-sm: 10px;

	/* Abstand der Karte zu allem, was darueber und darunter steht.
	   Bewusst groesser als das Karten-Padding (24 bzw. 36), sonst entsteht
	   der flache Abstands-Rhythmus, den der KG-Slop-Test verbietet. */
	--kg-gap-outer: 32px;
}

/* Der Test wird in fremde Seiten gesetzt, und deren Container bringen oft
   keinen eigenen Innenabstand mit: die Kubio-Reihe auf kind-guide.com steht
   auf null (h-px-0, v-inner-0), dort klebte die Karte an der Ueberschrift
   darueber. Der Abstand gehoert deshalb an den Test selbst, damit er
   ueberall gleich sitzt, ohne dass jemand am Seitenbaukasten nachstellt.

   Padding, nicht Margin: ein Margin wuerde mit einem Elternelement ohne
   Rahmen und ohne Innenabstand kollabieren und den Abstand nach aussen
   schieben, also genau dort verschwinden, wo er gebraucht wird. */
.kg-block { padding-block: var(--kg-gap-outer); }

/* Wenn die umgebende Sektion den Abstand schon mitbringt. Im Block-Editor
   unter "Erweitert -> Zusaetzliche CSS-Klasse", als Shortcode
   spacing="none". Zwei Klassen tief, damit die Regel auch die
   Bildschirmbreiten-Abfrage am Dateiende schlaegt. */
.kg-block.kg-block--flush { --kg-gap-outer: 0px; }

.kg-test {
	max-width: 680px;
	margin: 0 auto;
	padding: 24px 18px;
	background: var(--kg-surface);
	border: 1px solid var(--kg-line);
	border-radius: var(--kg-radius);
	color: var(--kg-ink);
	font-size: var(--kg-t-body);
	line-height: 1.6;
	box-sizing: border-box;
}

.kg-test *,
.kg-test *::before,
.kg-test *::after { box-sizing: border-box; }

/* Das Attribut hidden muss jede display-Regel dieser Datei schlagen.
   Die Browserregel [hidden] { display: none } hat Spezifitaet 0,1,0 und
   verliert deshalb gegen .kg-test .kg-btn oder .kg-nav. Sichtbar wurde das
   erst im echten Browser: der Zurueck-Knopf stand auf Frage 1 da, obwohl
   das Skript ihn versteckt hatte, und ohne JavaScript standen beide
   Blaetterknoepfe da, ohne etwas zu tun. */
.kg-test [hidden] { display: none !important; }

/* Zwei Klassen tief, nicht eine: das Kubio-Theme auf kind-guide.com setzt
   "[data-kubio] h2" auf 2,625em und Gewicht 300, und diese Regel (0,1,1)
   schlug ".kg-test-heading" (0,1,0). Auf dem iPhone war die Ueberschrift
   damit 42 px gross und 144 px hoch, und der Regler rutschte unter die
   Bildschirmkante. Der Test wird in fremde Seiten gesetzt und muss seine
   Groessen gegen deren Ueberschriftenregeln behaupten. */
.kg-test .kg-test-heading {
	margin: 0 0 10px;
	font-size: clamp(23px, 5vw, 31px);
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	color: var(--kg-ink);
}

.kg-test .kg-test-intro {
	margin: 0 0 22px;
	font-size: var(--kg-t-body);
	line-height: 1.6;
	color: var(--kg-muted);
}

.kg-alert {
	margin: 0 0 20px;
	padding: 12px 16px;
	border-radius: var(--kg-radius-sm);
	background: #FDEAEA;
	color: #A83A3E;
	font-size: var(--kg-t-body);
	font-weight: 600;
}

/* Fortschritt. Erscheint erst mit JavaScript, weil ohne Blaettern alle
   Fragen gleichzeitig sichtbar sind und ein Fortschritt nichts aussagt. */

.kg-progress { margin: 0 0 26px; }

.kg-progress-bar {
	height: 6px;
	border-radius: 999px;
	background: #EEF1F0;
	overflow: hidden;
}

.kg-progress-bar span {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--kg-petrol) 0%, var(--kg-amber) 100%);
	transition: width 0.25s ease-out;
}

.kg-progress-text {
	margin: 8px 0 0;
	font-size: var(--kg-t-fine);
	color: var(--kg-muted);
}

/* Fragen */

.kg-questions {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
}

.kg-question {
	padding: 20px 0;
	border-top: 1px solid var(--kg-line);
}

.kg-question:first-child { border-top: 0; padding-top: 0; }

.kg-question-text {
	display: flex;
	gap: 10px;
	align-items: baseline;
	margin: 0 0 16px;
	font-size: var(--kg-t-body);
	font-weight: 600;
	line-height: 1.45;
	cursor: pointer;
}

.kg-question-no {
	flex: 0 0 auto;
	min-width: 26px;
	font-size: var(--kg-t-fine);
	font-weight: 700;
	color: var(--kg-muted);
	font-variant-numeric: tabular-nums;
}

/* Blaettermodus: eine Frage bekommt den ganzen Bildschirm, also darf sie
   auch die Groesse und die Ruhe dafuer bekommen. */

.kg-test.is-paged .kg-questions { margin-bottom: 22px; }

.kg-test.is-paged .kg-question {
	padding: 0;
	border-top: 0;
	min-height: 190px;
}

.kg-test.is-paged .kg-question-text {
	display: block;
	margin-bottom: 26px;
	font-size: clamp(20px, 4.2vw, 25px);
	line-height: 1.35;
}

.kg-test.is-paged .kg-question-no {
	display: block;
	margin-bottom: 8px;
	font-size: var(--kg-t-fine);
	letter-spacing: 0.1em;
}

/* Der Fortschrittstext nennt "Bereich 3 von 6" bereits; die Fragennummer
   traegt nur die Zahl. Der Zusatz "freiwillig" am Notizschritt bleibt. */
.kg-question-tag {
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--kg-muted);
}

/* Einleitung und Trigger-Fragen unter der Bereichsueberschrift (Lebensrad).
   Aufgeklappt, nicht hinter einem Aufklapper: sie sind die Hilfe, die die
   Einschaetzung ueberhaupt erst ehrlich macht. */
.kg-question-lead {
	margin: -8px 0 12px;
	font-size: var(--kg-t-body);
	color: var(--kg-muted);
}

.kg-test.is-paged .kg-question-lead { margin-top: -16px; margin-bottom: 14px; }

.kg-triggers {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--kg-ink);
}

.kg-triggers li { position: relative; padding-left: 16px; }

.kg-triggers li + li { margin-top: 4px; }

.kg-triggers li::before {
	content: "\00B7";
	position: absolute;
	left: 2px;
	top: 0;
	font-weight: 700;
	color: var(--kg-muted);
}

/* Freitext (Lebensrad) */

.kg-textarea {
	width: 100%;
	min-height: 140px;
	padding: 13px 14px;
	font: inherit;
	font-size: 16px;
	line-height: 1.5;
	color: var(--kg-ink);
	background: var(--kg-paper);
	border: 1px solid var(--kg-line);
	border-radius: var(--kg-radius-sm);
	resize: vertical;
}

.kg-textarea:focus-visible {
	outline: 3px solid var(--kg-petrol);
	outline-offset: 1px;
	border-color: var(--kg-petrol);
}

.kg-note-hint { margin-top: 10px; }

/* Angemeldete Nutzer und Hinweise */

.kg-user {
	margin: 0 0 20px;
	padding: 14px 16px;
	background: var(--kg-paper);
	border-radius: var(--kg-radius-sm);
	font-size: 15px;
	line-height: 1.5;
	color: var(--kg-ink);
}

.kg-notice {
	margin: 0 0 20px;
	padding: 12px 16px;
	border-left: 3px solid var(--kg-petrol);
	background: var(--kg-paper);
	font-size: 15px;
	line-height: 1.5;
	color: var(--kg-ink);
}

.kg-notice a { color: var(--kg-petrol); }

.kg-slider {
	display: flex;
	align-items: center;
	gap: 14px;
}

.kg-range-value {
	flex: 0 0 auto;
	min-width: 46px;
	padding: 5px 0;
	text-align: center;
	font-size: var(--kg-t-lead);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--kg-muted);
	background: #F3F1EC;
	border-radius: var(--kg-radius-sm);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.kg-scale-labels {
	display: flex;
	justify-content: space-between;
	margin-top: 12px;
	padding-right: 60px;
	font-size: var(--kg-t-fine);
	color: var(--kg-muted);
}

/* Regler. Cross-Browser leider nur ueber Herstellerpraefixe zu gestalten.
   Die Bahn ist leer, bis die Frage angefasst wird; dann fuellt sich der Teil
   links vom Daumen.

   Warum die Farbe von der Bahn in die Fuellung gewandert ist: auf der leeren
   Bahn faerbte sie die Antwort ein, bevor sie gegeben war. "Stimmt voellig"
   war schon rot. Bei einem Test, dessen Positionierung auf Ueberpruefbarkeit
   beruht, ist eine Skala, die die Antwort nahelegt, das eine, was die Zahl
   angreifbar macht. Als Fuellung zeigt dieselbe Farbe nur noch, was gewaehlt
   wurde: Rueckmeldung statt Vorgabe.

   --kg-f setzt das Skript (Anteil 0 bis 1), --kg-fill kommt aus data-level.
   Ohne JavaScript bleibt die Bahn neutral, und das Formular funktioniert
   unveraendert. */

.kg-range {
	--kg-f: 0;
	--kg-fill: transparent;
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	margin: 0;
	height: 44px;
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	/* Waagerechte Bewegung gehoert dem Regler, senkrechte der Seite. Ohne
	   diese Angabe wird aus einem leicht schraegen Daumenzug am Telefon ein
	   Scrollen der Seite, und der Wert bleibt stehen. */
	touch-action: pan-y;
}

.kg-range:focus { outline: none; }

/* Der Daumen steht nicht am Rand, sondern um seine halbe Breite eingerueckt.
   Die Fuellung rechnet genauso, sonst laeuft sie ihm davon. */
.kg-range::-webkit-slider-runnable-track {
	height: 10px;
	border-radius: 999px;
	background:
		linear-gradient(90deg,
			var(--kg-fill) 0 calc(15px + ((100% - 30px) * var(--kg-f))),
			transparent calc(15px + ((100% - 30px) * var(--kg-f))) 100%),
		var(--kg-rail);
}

.kg-range::-moz-range-track {
	height: 10px;
	border-radius: 999px;
	background:
		linear-gradient(90deg,
			var(--kg-fill) 0 calc(15px + ((100% - 30px) * var(--kg-f))),
			transparent calc(15px + ((100% - 30px) * var(--kg-f))) 100%),
		var(--kg-rail);
}

/* 30 px Daumen: gross genug fuer den Daumen am Telefon. */
.kg-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	margin-top: -10px;
	width: 30px;
	height: 30px;
	border: 3px solid var(--kg-surface);
	border-radius: 50%;
	background: var(--kg-ink);
	box-shadow: 0 1px 4px rgba(0, 43, 63, 0.3);
}

.kg-range::-moz-range-thumb {
	width: 30px;
	height: 30px;
	box-sizing: border-box;
	border: 3px solid var(--kg-surface);
	border-radius: 50%;
	background: var(--kg-ink);
	box-shadow: 0 1px 4px rgba(0, 43, 63, 0.3);
}

/* Fokusring in Petrol: Bernstein auf Papier liegt bei 2:1 Kontrast. */
.kg-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--kg-petrol); }
.kg-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--kg-petrol); }

/* Fuellung und Wert-Chip sprechen dieselben drei Toene der Marken-Rampe.
   Beide erst nach der Beruehrung: eine leere Bahn und ein grauer Chip
   heissen "noch nicht beantwortet".

   Welchen Ton eine Stufe traegt, entscheidet die Richtung der Skala. Beim
   Stresstest ist hoch die Belastung (strain), beim Lebensrad ist hoch das
   Gute (benefit). Das Skript kennt nur die Stufe, die Bedeutung steht hier. */
.kg-test[data-kg-scale="strain"] .kg-question[data-touched][data-level="low"] .kg-range { --kg-fill: var(--kg-petrol); }
.kg-test[data-kg-scale="strain"] .kg-question[data-touched][data-level="mid"] .kg-range { --kg-fill: var(--kg-berry); }
.kg-test[data-kg-scale="strain"] .kg-question[data-touched][data-level="high"] .kg-range { --kg-fill: var(--kg-coral); }

.kg-test[data-kg-scale="strain"] .kg-question[data-touched][data-level="low"] .kg-range-value { background: #E7EDF2; color: #114162; }
.kg-test[data-kg-scale="strain"] .kg-question[data-touched][data-level="mid"] .kg-range-value { background: #F2EAF2; color: #6E3C6E; }
.kg-test[data-kg-scale="strain"] .kg-question[data-touched][data-level="high"] .kg-range-value { background: #FDEAEA; color: #A83A3E; }

.kg-test[data-kg-scale="benefit"] .kg-question[data-touched][data-level="low"] .kg-range { --kg-fill: var(--kg-coral); }
.kg-test[data-kg-scale="benefit"] .kg-question[data-touched][data-level="mid"] .kg-range { --kg-fill: var(--kg-berry); }
.kg-test[data-kg-scale="benefit"] .kg-question[data-touched][data-level="high"] .kg-range { --kg-fill: var(--kg-petrol); }

.kg-test[data-kg-scale="benefit"] .kg-question[data-touched][data-level="low"] .kg-range-value { background: #FDEAEA; color: #A83A3E; }
.kg-test[data-kg-scale="benefit"] .kg-question[data-touched][data-level="mid"] .kg-range-value { background: #F2EAF2; color: #6E3C6E; }
.kg-test[data-kg-scale="benefit"] .kg-question[data-touched][data-level="high"] .kg-range-value { background: #E7EDF2; color: #114162; }

/* Blaettern */

.kg-nav {
	display: flex;
	gap: 12px;
	align-items: center;
	margin: 0 0 20px;
}

.kg-nav [data-kg-next] { margin-left: auto; }

/* Am Telefon teilen sich Zurueck und Weiter die Breite; steht Weiter allein,
   nimmt es die ganze. Ein 104 px schmaler Knopf am rechten Rand ist mit dem
   Daumen der falschen Hand schlecht zu treffen. */
@media (max-width: 599px) {
	.kg-nav .kg-btn.kg-btn { flex: 1 1 0; text-align: center; }
}

.kg-final-lead {
	margin: 0 0 20px;
	font-size: clamp(19px, 3.6vw, 22px);
	font-weight: 700;
	line-height: 1.3;
}

/* Felder */

.kg-fields { margin: 0 0 20px; }

.kg-field { margin: 0 0 18px; }

.kg-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 15px;
	font-weight: 600;
}

.kg-req {
	font-weight: 400;
	font-size: 13px;
	color: var(--kg-muted);
}

.kg-test .kg-field input {
	width: 100%;
	padding: 13px 14px;
	font: inherit;
	font-size: 16px; /* Unter 16px zoomt iOS beim Fokus hinein. */
	color: var(--kg-ink);
	background: var(--kg-paper);
	border: 1px solid var(--kg-line);
	border-radius: var(--kg-radius-sm);
}

.kg-test .kg-field input:focus-visible {
	outline: 3px solid var(--kg-petrol);
	outline-offset: 1px;
	border-color: var(--kg-petrol);
}

.kg-hint {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	color: var(--kg-muted);
}

/* Honeypot: fuer Menschen unsichtbar, fuer Bots vorhanden. Nicht
   display:none, das ueberspringen manche Bots gezielt. */
.kg-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Einwilligungen */

.kg-consents {
	margin: 0 0 24px;
	padding: 18px;
	background: var(--kg-paper);
	border-radius: var(--kg-radius-sm);
}

.kg-consent {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 15px;
	line-height: 1.5;
	cursor: pointer;
}

.kg-consent + .kg-consent { margin-top: 16px; }

.kg-consent input {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 1px 0 0;
	accent-color: var(--kg-petrol);
}

.kg-consent em { font-style: normal; color: var(--kg-muted); }

/* Knoepfe.

   Die Klasse steht doppelt (.kg-btn.kg-btn), damit die Regel Spezifitaet
   (0,3,0) bekommt. Das Kubio-Theme auf kind-guide.com stylt
   "[data-kubio] button[type='submit']" mit (0,2,1) und gewann damit gegen
   ".kg-test .kg-btn": der Absendeknopf trug dort weisse Schrift, 2 px Rand
   und 4 px Radius aus dem Theme. Doppelte Klasse statt tieferer
   Verschachtelung, damit die Regel nicht an eine bestimmte Struktur
   gebunden ist. */

.kg-submit { margin: 0 0 18px; }

.kg-test .kg-btn.kg-btn {
	display: inline-block;
	padding: 15px 26px;
	font: inherit;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--kg-ink);
	background: var(--kg-orange);
	border: 0;
	border-radius: var(--kg-radius-sm);
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

.kg-test .kg-btn.kg-btn:hover { background: var(--kg-amber); color: var(--kg-ink); }

.kg-test .kg-btn.kg-btn:focus-visible {
	outline: 3px solid var(--kg-petrol);
	outline-offset: 2px;
}

.kg-test .kg-btn.kg-btn--ghost {
	background: transparent;
	color: var(--kg-muted);
	border: 1px solid var(--kg-line);
}

.kg-test .kg-btn.kg-btn--ghost:hover { background: #F3F1EC; color: var(--kg-ink); }

.kg-submit .kg-btn { width: 100%; }

.kg-disclaimer {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--kg-muted);
}

.kg-done { text-align: center; padding: 12px 0; }

@media (min-width: 600px) {
	.kg-block { --kg-gap-outer: 64px; }
	.kg-test { padding: 36px 32px; }
	.kg-submit .kg-btn { width: auto; }
}