/*
 * EOCN Quick Check
 * ----------------
 * Jeder Selektor beginnt mit .eocn-qc. Kein button {}, .card {}, .step {} oder
 * .progress {} - Salient definiert diese Klassen mit hoher Spezifitaet und
 * wuerde das Modul einfaerben.
 *
 * Kein !important. Wo Salient dazwischenfunken koennte (Buttons, Radios,
 * Listen), setzen wir stattdessen jede Eigenschaft explizit und heben die
 * Spezifitaet ueber eine zusaetzliche Klasse an. Sollte spaeter doch ein
 * !important noetig werden: bitte mit Kommentar, gegen welche Salient-Regel
 * es geht.
 *
 * Farben, Radien und Typografie folgen dem STANDOUT-Farbsystem-Styleguide v2.
 * Die Saeulenfarben kommen als Custom Properties vom Wrapper (PHP), damit die
 * Seite sie ueberschreiben kann, ohne das Plugin anzufassen.
 */

/*
 * Die Wurzel des Moduls, und daneben die Huelle der Officer-Ansicht.
 *
 * .eocn-qc-report steht nur in der eigenstaendigen Report-Seite in wp-admin,
 * wo es kein Theme gibt, das Schrift und Farbe mitbringt. Sie steht hier im
 * selben Block und nicht in einer eigenen Kopie: zwei Listen derselben
 * Farbwerte waeren die Sorte Duplikat, die genau einmal nachgezogen wird und
 * danach nie wieder.
 */
.eocn-qc,
.eocn-qc-report {
	/* Saeulenfarben - Fallbacks, falls der Wrapper keine Werte mitbringt. */
	--eocn-p1: #95bf1f;
	--eocn-p1-soft: #f0f6e0;
	--eocn-p1-ink: #15211d;
	--eocn-p2: #00a09b;
	--eocn-p2-soft: #dbf2f1;
	--eocn-p2-ink: #15211d;
	--eocn-p3: #134591;
	--eocn-p3-soft: #dee5f0;
	--eocn-p3-ink: #ffffff;
	--eocn-p4: #ffcc07;
	--eocn-p4-soft: #fff8dc;
	--eocn-p4-ink: #15211d;

	/* Neutrale Ebene. */
	--eocn-brand: #134591;
	--eocn-paper: #f5f8f3;
	--eocn-surface: #ffffff;
	--eocn-surface-2: #f5f8f3;
	--eocn-ink: #15211d;
	--eocn-ink-soft: #4a574f;
	--eocn-ink-faint: #77837b;
	--eocn-line: #dae3d9;
	--eocn-line-soft: #e8efe7;
	--eocn-mint: #d7ecea;

	--eocn-radius: 14px;
	--eocn-radius-sm: 10px;
	--eocn-shadow: 0 1px 2px rgba(20, 40, 30, 0.05), 0 6px 20px rgba(20, 40, 30, 0.06);
	--eocn-display: "League Spartan", "Glacial Indifference", -apple-system, "Segoe UI", system-ui, sans-serif;
	--eocn-sans: "Glacial Indifference", -apple-system, "Segoe UI", system-ui, sans-serif;

	/* Aktive Saeule. Das JS setzt --eocn-pc/-soft/-ink je Schritt um. */
	--eocn-pc: var(--eocn-p3);
	--eocn-pc-soft: var(--eocn-p3-soft);
	--eocn-pc-ink: var(--eocn-p3-ink);

	box-sizing: border-box;
	font-family: var(--eocn-sans);
	font-size: 16px;
	line-height: 1.6;
	color: var(--eocn-ink);
	text-align: left;
}

/*
 * Dunkle Variante als bewusster Opt-in, nicht ueber prefers-color-scheme.
 * Die Seite ist hell; ein Modul, das je nach Systemeinstellung dunkel
 * umschlaegt, saehe auf einer hellen Seite kaputt aus. Sobald die Website
 * dunkle Baender bekommt: Klasse eocn-qc--dark an den Wrapper.
 */
.eocn-qc.eocn-qc--dark {
	--eocn-p1: #a8ce3a;
	--eocn-p1-soft: #1e2a0f;
	--eocn-p1-ink: #0d1512;
	--eocn-p2: #26beb7;
	--eocn-p2-soft: #08302e;
	--eocn-p2-ink: #0d1512;
	--eocn-p3: #6c9be0;
	--eocn-p3-soft: #10233f;
	--eocn-p3-ink: #0d1512;
	--eocn-p4: #ffd633;
	--eocn-p4-soft: #2e2708;
	--eocn-p4-ink: #0d1512;
	--eocn-brand: #6c9be0;
	--eocn-paper: #0d1512;
	--eocn-surface: #151f1a;
	--eocn-surface-2: #0d1512;
	--eocn-ink: #eaf1ea;
	--eocn-ink-soft: #aebbb2;
	--eocn-ink-faint: #7e8c83;
	--eocn-line: #2a382f;
	--eocn-line-soft: #223029;
	--eocn-mint: #122622;
	--eocn-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.4);
}

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

.eocn-qc__anchor {
	display: block;
	position: relative;
	top: -90px; /* Platz fuer die klebende Salient-Kopfzeile bei Deep-Links. */
	height: 0;
}

/* --------------------------------------------------------------------------
 * Huelle
 * ----------------------------------------------------------------------- */

.eocn-qc__shell {
	background: var(--eocn-surface);
	border: 1px solid var(--eocn-line);
	border-radius: var(--eocn-radius);
	box-shadow: var(--eocn-shadow);
	overflow: hidden;
}

.eocn-qc__rail {
	height: 6px;
	background: var(--eocn-line-soft);
}

.eocn-qc__rail-fill {
	display: block;
	height: 100%;
	width: 0;
	background: var(--eocn-pc);
	transition: width 0.4s ease, background-color 0.3s ease;
}

.eocn-qc__inner {
	padding: 2rem 2.1rem 2.2rem;
}

/*
 * Die Fragenansicht ist bewusst flacher als die uebrigen Schritte. Passt sie
 * ins Fenster, muss beim Weiterklicken gar nicht gescrollt werden.
 *
 * Und sie ist eine Spalte mit fester Hoehe (die gemessene Mindesthoehe), damit
 * die Navigationszeile unten festgenagelt werden kann: sonst rutscht der
 * Weiter-Knopf je nach Zeilenzahl der Frage um bis zu 60 px auf und ab - und
 * genau das nimmt man als Springen wahr, auch wenn die Seite selbst still
 * steht.
 */
.eocn-qc[data-eocn-step="question"] .eocn-qc__inner {
	padding: 1.5rem 2.1rem 1.6rem;
	display: flex;
	flex-direction: column;
}

.eocn-qc[data-eocn-step="question"] .eocn-qc__nav {
	margin-top: auto;
	padding-top: 1.1rem;
}

/* --------------------------------------------------------------------------
 * Typografie im Modul
 * ----------------------------------------------------------------------- */

.eocn-qc .eocn-qc__h2,
.eocn-qc .eocn-qc__h3,
.eocn-qc .eocn-qc__h4 {
	font-family: var(--eocn-display);
	font-weight: 600;
	line-height: 1.14;
	letter-spacing: -0.01em;
	color: var(--eocn-ink);
	margin: 0;
	text-wrap: balance;
}

.eocn-qc .eocn-qc__h2 {
	font-size: 1.45rem;
}

.eocn-qc .eocn-qc__h3 {
	font-size: 1.12rem;
}

.eocn-qc .eocn-qc__h4 {
	font-size: 1rem;
}

.eocn-qc .eocn-qc__p {
	margin: 0.55rem 0 0;
	color: var(--eocn-ink-soft);
}

.eocn-qc .eocn-qc__eyebrow {
	font-family: var(--eocn-display);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--eocn-ink-faint);
	margin: 0;
}

/* --------------------------------------------------------------------------
 * Kopfzeile eines Schritts: Fortschritt als Text, nicht nur als Balken
 * ----------------------------------------------------------------------- */

.eocn-qc__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 0.6rem 1rem;
	font-family: var(--eocn-display);
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--eocn-ink-faint);
	margin-bottom: 0.9rem;
}

.eocn-qc__meta-pillar {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--eocn-ink-soft);
}

.eocn-qc__meta-swatch {
	width: 10px;
	height: 10px;
	border-radius: 3px;
	background: var(--eocn-pc);
	flex: none;
}

/* --------------------------------------------------------------------------
 * Saeulennummer als Kleinschrift.
 * Farbe traegt die Bedeutung nie allein - Nummer, Name und Icon stehen immer
 * daneben.
 * ----------------------------------------------------------------------- */

.eocn-qc__badge-num {
	font-family: var(--eocn-display);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--eocn-ink-faint);
}

/* --------------------------------------------------------------------------
 * Buttons
 *
 * Jede Eigenschaft explizit, damit Salients Button-Regeln nichts durchreichen.
 * Die doppelte Klasse hebt die Spezifitaet, ohne !important zu brauchen.
 * ----------------------------------------------------------------------- */

.eocn-qc .eocn-qc__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	font-family: var(--eocn-display);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	padding: 0.72em 1.4em;
	border: 1.5px solid transparent;
	/*
	 * Das einzige !important im Modul, und es ist unvermeidbar.
	 *
	 * Salient setzt seinen globalen Button-Radius (Theme Options, hier 200px)
	 * mit !important. Am 31.08.2026 auf der Subsite gemessen: ein Inline-Style
	 * auf dem Button verliert dagegen, nur ein Inline-Style MIT !important
	 * gewinnt. Es gibt also keine Spezifitaet, die ohne !important reicht.
	 *
	 * Betrifft ausschliesslich <button>. Der als Link gebaute primaere CTA
	 * (.eocn-qc__link--primary) behaelt seine 10px ohne Zutun - dort steht
	 * bewusst kein !important.
	 */
	border-radius: var(--eocn-radius-sm) !important;
	background: var(--eocn-brand);
	color: #ffffff;
	cursor: pointer;
	box-shadow: none;
	transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	min-height: 0;
	text-shadow: none;
}

.eocn-qc .eocn-qc__btn:hover,
.eocn-qc .eocn-qc__btn:focus-visible {
	background: #0f3874;
	color: #ffffff;
}

.eocn-qc.eocn-qc--dark .eocn-qc__btn {
	color: #0d1512;
}

.eocn-qc.eocn-qc--dark .eocn-qc__btn:hover,
.eocn-qc.eocn-qc--dark .eocn-qc__btn:focus-visible {
	background: #8fb4e8;
	color: #0d1512;
}

.eocn-qc .eocn-qc__btn--ghost {
	background: transparent;
	color: var(--eocn-ink);
	border-color: var(--eocn-line);
}

.eocn-qc .eocn-qc__btn--ghost:hover,
.eocn-qc .eocn-qc__btn--ghost:focus-visible {
	background: var(--eocn-surface-2);
	color: var(--eocn-ink);
	border-color: var(--eocn-ink-faint);
}

.eocn-qc .eocn-qc__btn--quiet {
	background: transparent;
	color: var(--eocn-ink-soft);
	border-color: transparent;
	padding-left: 0.6em;
	padding-right: 0.6em;
	font-weight: 600;
}

.eocn-qc .eocn-qc__btn--quiet:hover,
.eocn-qc .eocn-qc__btn--quiet:focus-visible {
	background: var(--eocn-surface-2);
	color: var(--eocn-ink);
}

.eocn-qc .eocn-qc__btn[disabled] {
	opacity: 0.42;
	cursor: not-allowed;
}

.eocn-qc .eocn-qc__btn svg {
	width: 17px;
	height: 17px;
	flex: none;
}

/* Sichtbarer Fokus, unabhaengig vom Theme. */
.eocn-qc :focus-visible {
	outline: 3px solid var(--eocn-brand);
	outline-offset: 2px;
	border-radius: 4px;
}

.eocn-qc__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 0.8rem;
	margin-top: 1.7rem;
}

.eocn-qc__nav-right {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-left: auto;
}

/* --------------------------------------------------------------------------
 * Intro
 * ----------------------------------------------------------------------- */

/*
 * Startbildschirm.
 *
 * Er ist die einzige Stelle mit grossflaechiger Markenfarbe. Das ist Absicht:
 * unter der Kopfzeile soll sofort erkennbar sein, wo man klickt. Blau ist
 * laut Styleguide zugleich Marken- und Aktionsfarbe und damit hier erlaubt -
 * eine Saeulenfarbe waere es nicht.
 */
.eocn-qc[data-eocn-step="intro"] .eocn-qc__inner {
	background: linear-gradient(135deg, #134591 0%, #0d3068 100%);
	color: #ffffff;
	padding: 2rem 2.1rem 2.1rem;
	position: relative;
	overflow: hidden;
}

/* Ruhiges Punktraster statt eines Bildes - keine externe Datei, kein Ladeweg. */
.eocn-qc[data-eocn-step="intro"] .eocn-qc__inner::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.14) 1px, transparent 0);
	background-size: 22px 22px;
	opacity: 0.6;
	pointer-events: none;
}

.eocn-qc[data-eocn-step="intro"] .eocn-qc__inner > * {
	position: relative;
	z-index: 1;
}

.eocn-qc[data-eocn-step="intro"] .eocn-qc__eyebrow {
	color: rgba(255, 255, 255, 0.72);
}

.eocn-qc[data-eocn-step="intro"] .eocn-qc__h2 {
	color: #ffffff;
	font-size: 1.85rem;
	max-width: 18ch;
	margin-top: 0.15rem;
}

.eocn-qc[data-eocn-step="intro"] .eocn-qc__p {
	color: rgba(255, 255, 255, 0.88);
	max-width: 52ch;
	font-size: 1rem;
	margin-top: 0.9rem;
}

.eocn-qc[data-eocn-step="intro"] .eocn-qc__facts {
	margin-top: 0;
}

.eocn-qc[data-eocn-step="intro"] .eocn-qc__note {
	margin-top: 0.9rem;
}

.eocn-qc[data-eocn-step="intro"] .eocn-qc__facts li {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.28);
	color: #ffffff;
}

.eocn-qc[data-eocn-step="intro"] .eocn-qc__facts li::before {
	background: #ffffff;
}

.eocn-qc[data-eocn-step="intro"] .eocn-qc__note {
	background: rgba(255, 255, 255, 0.1);
	border-left-color: rgba(255, 255, 255, 0.55);
}

.eocn-qc[data-eocn-step="intro"] .eocn-qc__note p {
	color: rgba(255, 255, 255, 0.92);
}

.eocn-qc[data-eocn-step="intro"] .eocn-qc__note p + p,
.eocn-qc[data-eocn-step="intro"] .eocn-qc__fineprint {
	color: rgba(255, 255, 255, 0.7);
}

/* Weisser Knopf auf blauem Grund - der hoechste Kontrast, den die Seite hat. */
.eocn-qc[data-eocn-step="intro"] .eocn-qc__btn {
	background: #ffffff;
	color: var(--eocn-brand);
	font-size: 1.05rem;
	padding: 0.85em 1.7em;
}

.eocn-qc[data-eocn-step="intro"] .eocn-qc__btn:hover,
.eocn-qc[data-eocn-step="intro"] .eocn-qc__btn:focus-visible {
	background: #eaf0f9;
	color: var(--eocn-brand);
}

.eocn-qc[data-eocn-step="intro"] :focus-visible {
	outline-color: #ffffff;
}

/*
 * Zwei Spalten. Links Ansprache und Handlung, rechts das Kleingedruckte.
 * Untereinander waere der Startbildschirm so hoch geworden, dass die
 * Schaltflaeche unter den Bildschirmrand rutscht.
 */
.eocn-qc__intro-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 1.6rem 2.4rem;
	align-items: start;
}

@media (max-width: 820px) {
	.eocn-qc__intro-layout {
		grid-template-columns: 1fr;
		gap: 1.3rem;
	}
}

.eocn-qc__intro-head {
	display: flex;
	/* Mittig, damit Eyebrow und Ueberschrift zusammen auf Icon-Hoehe sitzen. */
	align-items: center;
	gap: 1rem;
}

/*
 * Startzeile: die Schaltflaeche und daneben der Speicherhinweis. Sie steht
 * direkt unter dem Einleitungstext, damit ohne Scrollen erkennbar ist, wo
 * man klickt.
 */
.eocn-qc__start {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
	margin-top: 1.5rem;
}

.eocn-qc__start .eocn-qc__fineprint {
	margin-top: 0;
}

.eocn-qc__intro-icon {
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: var(--eocn-radius-sm);
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.eocn-qc__intro-icon svg {
	width: 37px;
	height: 37px;
}

/* --------------------------------------------------------------------------
 * Die vier Saeulen im Ueberblick
 * ----------------------------------------------------------------------- */

.eocn-qc__pillar-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.8rem;
	margin-top: 1.5rem;
}

@media (max-width: 900px) {
	.eocn-qc__pillar-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 520px) {
	.eocn-qc__pillar-grid {
		grid-template-columns: 1fr;
	}
}

.eocn-qc__pillar-card {
	background: var(--eocn-surface);
	border: 1px solid var(--eocn-line);
	border-top: 5px solid var(--eocn-pc);
	border-radius: var(--eocn-radius-sm);
	padding: 1.1rem 1.15rem 1.2rem;
}

.eocn-qc__pillar-card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--eocn-pc);
	color: var(--eocn-pc-ink);
	margin-bottom: 0.7rem;
}

.eocn-qc__pillar-card-icon svg {
	width: 24px;
	height: 24px;
}

.eocn-qc .eocn-qc__pillar-card-name {
	font-family: var(--eocn-display);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.22;
	color: var(--eocn-ink);
	margin: 0.15rem 0 0.4rem;
}

.eocn-qc .eocn-qc__pillar-card-text {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--eocn-ink-soft);
}

/* --------------------------------------------------------------------------
 * Ankuendigung einer Saeule
 *
 * Fuer alle vier gleich gebaut. Grosses Icon auf hellem Saeulen-Tint - die
 * Kernregel des Styleguides verbietet Volltonflaeche hinter Fliesstext.
 * ----------------------------------------------------------------------- */

/*
 * Die Ankuendigung ist so hoch wie eine Frage (siehe measure() im JS). Damit
 * das nicht nach Leerraum aussieht, fuellt das Farbfeld die Flaeche und der
 * Inhalt sitzt mittig darin.
 */
.eocn-qc[data-eocn-step="pillar"] .eocn-qc__inner {
	/* Gleicher Innenabstand wie die Fragenansicht. */
	padding: 1.5rem 2.1rem 1.6rem;
	display: flex;
	flex-direction: column;
}

/*
 * Der Knopf soll auf der Ankuendigung und auf der folgenden Frage exakt gleich
 * hoch sitzen. In der Fragenansicht steht unter der Navigationszeile noch die
 * Punktreihe (7 px plus 0,9 rem Abstand); hier wird derselbe Platz freigelassen.
 */
.eocn-qc[data-eocn-step="pillar"] .eocn-qc__nav {
	margin-top: auto;
	padding-top: 1.1rem;
	padding-bottom: calc(0.9rem + 7px);
}

.eocn-qc__pillar-hero {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Ohne das rutscht das Icon nach links: in einer Flex-Spalte greift
	   text-align nicht mehr auf das inline-flex-Element. */
	align-items: center;
	text-align: center;
	padding: 1.4rem 1rem 1.6rem;
	background: var(--eocn-pc-soft);
	border-radius: var(--eocn-radius);
}

.eocn-qc__pillar-hero-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 104px;
	height: 104px;
	border-radius: 50%;
	background: var(--eocn-pc);
	color: var(--eocn-pc-ink);
	margin-bottom: 1rem;
}

.eocn-qc__pillar-hero-icon svg {
	width: 54px;
	height: 54px;
}

.eocn-qc .eocn-qc__pillar-hero-label {
	font-family: var(--eocn-display);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--eocn-ink-soft);
	margin: 0;
}

.eocn-qc .eocn-qc__pillar-hero-name {
	font-family: var(--eocn-display);
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.16;
	letter-spacing: -0.01em;
	color: var(--eocn-ink);
	margin: 0.3rem auto 0;
	max-width: 20ch;
	text-wrap: balance;
}

.eocn-qc .eocn-qc__pillar-hero-text {
	margin: 0.7rem auto 0;
	max-width: 56ch;
	color: var(--eocn-ink-soft);
}

.eocn-qc .eocn-qc__pillar-hero-count {
	margin: 0.9rem 0 0;
	font-family: var(--eocn-display);
	font-size: 0.84rem;
	font-weight: 600;
	color: var(--eocn-ink-soft);
}

@media (max-width: 560px) {
	.eocn-qc__pillar-hero-icon {
		width: 84px;
		height: 84px;
	}

	.eocn-qc__pillar-hero-icon svg {
		width: 44px;
		height: 44px;
	}

	.eocn-qc .eocn-qc__pillar-hero-name {
		font-size: 1.4rem;
	}
}

.eocn-qc__facts {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1.2rem 0 0;
	padding: 0;
}

/*
 * Salient setzt list-style-type auf li mit hoeherer Spezifitaet als eine
 * einzelne Klasse. Der zusaetzliche .eocn-qc davor genuegt - gemessen am
 * 31.08.2026, kein !important noetig.
 */
.eocn-qc .eocn-qc__facts li {
	display: inline-flex;
	list-style: none;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--eocn-display);
	font-size: 0.84rem;
	font-weight: 600;
	color: var(--eocn-ink-soft);
	background: var(--eocn-surface-2);
	border: 1px solid var(--eocn-line);
	border-radius: 999px;
	padding: 0.32em 0.85em;
	margin: 0;
}

.eocn-qc__facts li::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--eocn-p2);
	flex: none;
}

/*
 * Hinweiskasten. Linke Farbleiste statt Vollton-Hintergrund - die
 * Kernregel des Styleguides verbietet grossflaechige Saeulenfarbe hinter
 * Fliesstext.
 */
.eocn-qc__note {
	border-left: 4px solid var(--eocn-p2);
	background: var(--eocn-mint);
	border-radius: 0 var(--eocn-radius-sm) var(--eocn-radius-sm) 0;
	padding: 0.95rem 1.15rem;
	margin-top: 1.2rem;
}

.eocn-qc__note p {
	margin: 0;
	font-size: 0.93rem;
	color: var(--eocn-ink);
}

.eocn-qc__note p + p {
	margin-top: 0.45rem;
	color: var(--eocn-ink-soft);
	font-size: 0.88rem;
}

.eocn-qc__fineprint {
	margin-top: 1rem;
	font-size: 0.84rem;
	color: var(--eocn-ink-faint);
}

/* Ueberschrift ueber der Anleitung. Bewusst keine Pille - die sah aus wie
   ein Knopf, war aber keiner. */
.eocn-qc .eocn-qc__side-title {
	font-family: var(--eocn-display);
	font-size: 1.24rem;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--eocn-ink);
	margin: 0 0 0.6rem;
}

.eocn-qc[data-eocn-step="intro"] .eocn-qc__side-title {
	color: #ffffff;
}

/* Wiederaufnahme-Hinweis. */
.eocn-qc__resume {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1rem;
	background: var(--eocn-p1-soft);
	border: 1px solid var(--eocn-line);
	border-left: 4px solid var(--eocn-p1);
	border-radius: 0 var(--eocn-radius-sm) var(--eocn-radius-sm) 0;
	padding: 0.8rem 1.1rem;
	margin-bottom: 1.2rem;
	font-size: 0.9rem;
	color: var(--eocn-ink);
}

/* --------------------------------------------------------------------------
 * Frage: echtes fieldset/legend mit Radios
 * ----------------------------------------------------------------------- */

.eocn-qc .eocn-qc__fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.eocn-qc .eocn-qc__legend {
	display: block;
	float: none;
	width: 100%;
	padding: 0;
	margin: 0 0 1rem;
	font-family: var(--eocn-display);
	font-size: 1.18rem;
	font-weight: 600;
	line-height: 1.28;
	letter-spacing: -0.01em;
	color: var(--eocn-ink);
	text-wrap: balance;
}

.eocn-qc__options {
	display: grid;
	gap: 0.4rem;
}

.eocn-qc__option {
	position: relative;
	display: block;
}

/*
 * Der native Radio bleibt im Baum und behaelt seinen Fokus - er wird nur
 * unsichtbar. Keine div-Konstruktion mit Click-Handler.
 */
.eocn-qc .eocn-qc__radio {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.eocn-qc .eocn-qc__option-label {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	padding: 0.62rem 1.1rem;
	border: 1.5px solid var(--eocn-line);
	border-radius: var(--eocn-radius-sm);
	background: var(--eocn-surface);
	font-family: var(--eocn-sans);
	font-size: 1rem;
	/*
	 * 400, nicht 500. Glacial Indifference gibt es nur in Regular 400 und
	 * Bold 700 - eine 500 waehlt der Browser als Bold aus, die Antwortzeilen
	 * kamen dadurch fett heraus. Am 01.09.2026 an der Textbreite gemessen:
	 * Gewicht 500 und 700 rendern identisch (283 px), 400 dagegen 266 px.
	 */
	font-weight: 400;
	line-height: 1.4;
	color: var(--eocn-ink);
	cursor: pointer;
	transition: border-color 0.14s ease, background-color 0.14s ease;
	margin: 0;
}

.eocn-qc .eocn-qc__option-label:hover {
	border-color: var(--eocn-pc);
	background: var(--eocn-pc-soft);
}

.eocn-qc__dot {
	flex: none;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	border: 2px solid var(--eocn-ink-faint);
	background: transparent;
	transition: border-color 0.14s ease, background-color 0.14s ease, box-shadow 0.14s ease;
}

.eocn-qc .eocn-qc__radio:checked ~ .eocn-qc__option-label {
	border-color: var(--eocn-pc);
	background: var(--eocn-pc-soft);
	box-shadow: inset 0 0 0 1px var(--eocn-pc);
}

.eocn-qc .eocn-qc__radio:checked ~ .eocn-qc__option-label .eocn-qc__dot {
	border-color: var(--eocn-pc);
	background: var(--eocn-pc);
	box-shadow: inset 0 0 0 3px var(--eocn-surface);
}

.eocn-qc .eocn-qc__radio:focus-visible ~ .eocn-qc__option-label {
	outline: 3px solid var(--eocn-brand);
	outline-offset: 2px;
}

/* Die "weiss ich nicht"-Option optisch von der Skala absetzen. */
.eocn-qc__option--unknown .eocn-qc__option-label {
	border-style: dashed;
	color: var(--eocn-ink-soft);
	font-weight: 400;
}

.eocn-qc__option--unknown {
	margin-top: 0.25rem;
}

.eocn-qc__hint {
	margin: 0.7rem 0 0;
	font-size: 0.84rem;
	color: var(--eocn-ink-faint);
}

.eocn-qc__validation {
	margin: 0.9rem 0 0;
	font-size: 0.9rem;
	font-weight: 600;
	color: #a33323;
}

.eocn-qc.eocn-qc--dark .eocn-qc__validation {
	color: #ef9184;
}

/* Punktreihe: eine Marke je Frage. */
.eocn-qc__dots {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	align-items: center;
	margin-top: 0.9rem;
}

.eocn-qc__dots span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--eocn-line);
}

.eocn-qc__dots span.is-done {
	background: var(--eocn-pc);
}

.eocn-qc__dots span.is-current {
	background: var(--eocn-pc);
	box-shadow: 0 0 0 3px var(--eocn-pc-soft);
}

/* Speicherstatus. */
.eocn-qc__saved {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.8rem;
	font-weight: 600;
	font-family: var(--eocn-display);
	color: var(--eocn-p1);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.eocn-qc__saved.is-visible {
	opacity: 1;
}

.eocn-qc__saved svg {
	width: 14px;
	height: 14px;
}

/* --------------------------------------------------------------------------
 * Saeule abgeschlossen
 * ----------------------------------------------------------------------- */

.eocn-qc__status {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--eocn-display);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--eocn-pc);
}

.eocn-qc__status svg {
	width: 15px;
	height: 15px;
}

/* --------------------------------------------------------------------------
 * Ergebnis
 * ----------------------------------------------------------------------- */

.eocn-qc__results-head {
	padding-bottom: 1.4rem;
	border-bottom: 1px solid var(--eocn-line);
}

/* Der Ergebnistitel traegt den ganzen Abschnitt und darf das zeigen. */
.eocn-qc .eocn-qc__results-title {
	font-size: 2.15rem;
	line-height: 1.1;
	margin-top: 0.5rem;
	max-width: 18ch;
}

@media (max-width: 640px) {
	.eocn-qc .eocn-qc__results-title {
		font-size: 1.6rem;
	}
}

.eocn-qc__legend-list {
	list-style: none;
	margin: 1.2rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.eocn-qc__legend-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.89rem;
	color: var(--eocn-ink-soft);
	margin: 0;
}

.eocn-qc__legend-key {
	flex: none;
	font-family: var(--eocn-display);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 0.22em 0.6em;
	border-radius: 999px;
	min-width: 92px;
	text-align: center;
}

/*
 * Ergebnisklassen. Bedeutung haengt nie an der Farbe allein: jede Gruppe
 * traegt Text und ein eigenes Symbol.
 */
.eocn-qc__legend-key--strong,
.eocn-qc__group--strong .eocn-qc__group-key {
	background: var(--eocn-p1-soft);
	color: #4a6207;
	border: 1px solid #c3dd7a;
}

.eocn-qc__legend-key--developing,
.eocn-qc__group--developing .eocn-qc__group-key {
	background: var(--eocn-p2-soft);
	color: #00615e;
	border: 1px solid #8ed4d1;
}

.eocn-qc__legend-key--next,
.eocn-qc__group--next .eocn-qc__group-key {
	background: var(--eocn-p4-soft);
	color: #6b5300;
	border: 1px solid #ecc84f;
}

.eocn-qc.eocn-qc--dark .eocn-qc__legend-key--strong,
.eocn-qc.eocn-qc--dark .eocn-qc__group--strong .eocn-qc__group-key {
	color: #cbe58a;
	border-color: #3f5518;
}

.eocn-qc.eocn-qc--dark .eocn-qc__legend-key--developing,
.eocn-qc.eocn-qc--dark .eocn-qc__group--developing .eocn-qc__group-key {
	color: #8fdedb;
	border-color: #12514e;
}

.eocn-qc.eocn-qc--dark .eocn-qc__legend-key--next,
.eocn-qc.eocn-qc--dark .eocn-qc__group--next .eocn-qc__group-key {
	color: #f2d472;
	border-color: #5a4a12;
}

/*
 * Im Ergebnis ist die Saeule die Ordnung. Ein farbiges Band trennt die vier
 * Abschnitte so deutlich, dass man beim Scrollen jederzeit weiss, wo man ist.
 */
.eocn-qc__pillar-result {
	margin: 1.8rem 0 0;
}

.eocn-qc__pillar-banner {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.85rem 1.1rem;
	background: var(--eocn-pc);
	color: var(--eocn-pc-ink);
	border-radius: var(--eocn-radius-sm) var(--eocn-radius-sm) 0 0;
}

.eocn-qc__pillar-banner-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.28);
	color: inherit;
}

.eocn-qc__pillar-banner-icon svg {
	width: 22px;
	height: 22px;
}

.eocn-qc__pillar-banner-text {
	min-width: 0;
}

.eocn-qc__pillar-banner-label {
	display: block;
	font-family: var(--eocn-display);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	opacity: 0.85;
}

.eocn-qc .eocn-qc__pillar-banner-name {
	font-family: var(--eocn-display);
	font-size: 1.16rem;
	font-weight: 600;
	line-height: 1.2;
	color: inherit;
	margin: 0.1rem 0 0;
}

.eocn-qc__pillar-body {
	border: 1px solid var(--eocn-line);
	border-top: 0;
	border-radius: 0 0 var(--eocn-radius-sm) var(--eocn-radius-sm);
	padding: 1.2rem 1.3rem 1.4rem;
}

.eocn-qc__snapshot {
	margin-top: 0.2rem;
}

.eocn-qc__snapshot p {
	margin: 0.35rem 0 0;
	color: var(--eocn-ink-soft);
	font-size: 0.95rem;
}

.eocn-qc__group {
	margin-top: 1.3rem;
}

.eocn-qc__group-head {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin-bottom: 0.65rem;
}

.eocn-qc__group-key {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--eocn-display);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.24em 0.7em;
	border-radius: 999px;
}

.eocn-qc__group-key svg {
	width: 13px;
	height: 13px;
}

.eocn-qc__group-count {
	font-size: 0.8rem;
	color: var(--eocn-ink-faint);
	font-family: var(--eocn-display);
	font-weight: 600;
}

/*
 * Eine Karte je Gruppe, darin alle Themen untereinander. Vorher war jedes
 * Feedback eine eigene Karte - bei 19 Fragen ergab das eine Kachelwand, in
 * der die Saeulenstruktur unterging.
 */
.eocn-qc__card {
	background: var(--eocn-surface-2);
	border: 1px solid var(--eocn-line);
	border-left: 5px solid var(--eocn-pc);
	border-radius: 0 var(--eocn-radius-sm) var(--eocn-radius-sm) 0;
	padding: 0.4rem 1.15rem;
}

.eocn-qc .eocn-qc__findings {
	list-style: none;
	margin: 0;
	padding: 0;
}

.eocn-qc .eocn-qc__finding {
	list-style: none;
	margin: 0;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--eocn-line);
}

.eocn-qc .eocn-qc__finding:last-child {
	border-bottom: 0;
}

.eocn-qc .eocn-qc__finding-title {
	font-family: var(--eocn-display);
	font-size: 0.98rem;
	font-weight: 600;
	margin: 0 0 0.25rem;
	color: var(--eocn-ink);
	line-height: 1.25;
}

.eocn-qc .eocn-qc__finding-text {
	margin: 0;
	font-size: 0.93rem;
	color: var(--eocn-ink-soft);
}

.eocn-qc__more {
	margin-top: 1.4rem;
	padding-top: 1.1rem;
	border-top: 1px dashed var(--eocn-line);
}

.eocn-qc__more p {
	margin: 0.35rem 0 0;
	font-size: 0.92rem;
	color: var(--eocn-ink-soft);
}

.eocn-qc .eocn-qc__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.75rem;
	font-family: var(--eocn-display);
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--eocn-brand);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.eocn-qc .eocn-qc__link:hover,
.eocn-qc .eocn-qc__link:focus-visible {
	color: var(--eocn-brand);
	border-bottom-color: currentColor;
}

.eocn-qc .eocn-qc__link[aria-disabled="true"] {
	color: var(--eocn-ink-faint);
	cursor: not-allowed;
	border-bottom-color: transparent;
}

/*
 * Genau eine gefuellte Aktion im Ergebnis - der Self-Assessment-Block ist im
 * Quelldokument als primaerer CTA gekennzeichnet. Alles andere bleibt
 * Textlink, damit die Ergebnisseite nicht zur Button-Wand wird.
 */
.eocn-qc .eocn-qc__link--primary {
	margin-top: 0;
	padding: 0.72em 1.4em;
	border: 1.5px solid transparent;
	border-radius: var(--eocn-radius-sm);
	background: var(--eocn-brand);
	color: #ffffff;
	border-bottom: 1.5px solid transparent;
}

.eocn-qc .eocn-qc__link--primary:hover,
.eocn-qc .eocn-qc__link--primary:focus-visible {
	background: #0f3874;
	color: #ffffff;
	border-bottom-color: transparent;
}

.eocn-qc.eocn-qc--dark .eocn-qc__link--primary {
	color: #0d1512;
}

.eocn-qc .eocn-qc__link--primary[aria-disabled="true"] {
	background: var(--eocn-line-soft);
	color: var(--eocn-ink-faint);
	border-color: var(--eocn-line);
}

/* Im Blockfuss die Linien der beiden Aktionen aufeinander ausrichten. */
.eocn-qc__block-actions {
	align-items: center;
}

.eocn-qc__block-actions .eocn-qc__link {
	margin-top: 0;
}

.eocn-qc .eocn-qc__link svg {
	width: 15px;
	height: 15px;
	flex: none;
}

/* Abschlussbloecke nach allen vier Saeulen. */
.eocn-qc__funnel {
	margin-top: 1.8rem;
	display: grid;
	gap: 0.9rem;
}

/*
 * Die drei Abschlusswege nebeneinander, gleiche Reihenfolge wie im
 * Quelldokument. Der bedingte Stakeholder-Block steht darueber und bleibt
 * voll breit - er gehoert nicht in diese Reihe.
 */
.eocn-qc__funnel-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.9rem;
	align-items: stretch;
}

@media (max-width: 860px) {
	.eocn-qc__funnel-row {
		grid-template-columns: 1fr;
	}
}

.eocn-qc__funnel-row .eocn-qc__block {
	display: flex;
	flex-direction: column;
}

/* Die Aktionen aller drei Karten stehen auf einer Linie. */
.eocn-qc__funnel-row .eocn-qc__block-actions {
	margin-top: auto;
	padding-top: 1rem;
}

.eocn-qc__block-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--eocn-radius-sm);
	background: var(--eocn-p2-soft);
	color: var(--eocn-brand);
	margin-bottom: 0.8rem;
}

.eocn-qc__block-icon svg {
	width: 21px;
	height: 21px;
}

.eocn-qc__block {
	background: var(--eocn-surface-2);
	border: 1px solid var(--eocn-line);
	border-radius: var(--eocn-radius);
	padding: 1.3rem 1.4rem;
}

.eocn-qc__block--accent {
	background: var(--eocn-mint);
	border-color: transparent;
}

.eocn-qc__block p {
	margin: 0.45rem 0 0;
	font-size: 0.94rem;
	color: var(--eocn-ink-soft);
}

.eocn-qc__block-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 1rem;
}

.eocn-qc__results-foot {
	margin-top: 1.6rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--eocn-line);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.8rem;
}

/* --------------------------------------------------------------------------
 * Neustart-Rueckfrage
 * ----------------------------------------------------------------------- */

.eocn-qc__confirm {
	margin-top: 1rem;
	background: var(--eocn-surface);
	border: 1.5px solid var(--eocn-line);
	border-radius: var(--eocn-radius-sm);
	padding: 1.1rem 1.25rem;
}

.eocn-qc__confirm p {
	margin: 0.35rem 0 0;
	font-size: 0.93rem;
	color: var(--eocn-ink-soft);
}

.eocn-qc__confirm-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 1rem;
}

/* --------------------------------------------------------------------------
 * Hinweise und Hilfsklassen
 * ----------------------------------------------------------------------- */

.eocn-qc__noscript,
.eocn-qc__notice {
	background: var(--eocn-surface);
	border: 1px solid var(--eocn-line);
	border-left: 5px solid var(--eocn-p4);
	border-radius: 0 var(--eocn-radius-sm) var(--eocn-radius-sm) 0;
	padding: 1.1rem 1.3rem;
}

.eocn-qc__noscript p,
.eocn-qc__notice p {
	margin: 0;
	color: var(--eocn-ink-soft);
}

.eocn-qc__notice-detail {
	margin-top: 0.5rem;
	font-size: 0.84rem;
}

.eocn-qc__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
 * Bewegung, Mobil
 * ----------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.eocn-qc *,
	.eocn-qc *::before,
	.eocn-qc *::after {
		transition-duration: 0.01ms;
		animation-duration: 0.01ms;
		animation-iteration-count: 1;
		scroll-behavior: auto;
	}
}

@media (max-width: 640px) {
	.eocn-qc__inner {
		padding: 1.35rem 1.2rem 1.6rem;
	}

	.eocn-qc .eocn-qc__legend {
		font-size: 1.08rem;
	}

	.eocn-qc .eocn-qc__h2 {
		font-size: 1.25rem;
	}

	.eocn-qc__nav {
		gap: 0.6rem;
	}

	.eocn-qc__nav-right {
		width: 100%;
		margin-left: 0;
	}

	/* Der Hauptweg soll auf schmalen Geraeten die volle Breite bekommen. */
	.eocn-qc__nav-right .eocn-qc__btn {
		flex: 1 1 auto;
	}

	.eocn-qc__legend-key {
		min-width: 84px;
	}

	.eocn-qc[data-eocn-step="intro"] .eocn-qc__inner {
		padding: 1.7rem 1.3rem 1.6rem;
	}

	.eocn-qc[data-eocn-step="intro"] .eocn-qc__h2 {
		font-size: 1.5rem;
	}

	.eocn-qc__pillar-banner {
		padding: 0.75rem 0.9rem;
	}

	.eocn-qc__pillar-body {
		padding: 1rem 1rem 1.2rem;
	}
}

/* ==========================================================================
 * Seitenkopf der Quick-Check-Seite
 *
 * Gehoert streng genommen zur Seite, nicht zum Modul. Liegt trotzdem hier,
 * weil dieses Stylesheet genau dann geladen wird, wenn der Shortcode auf der
 * Seite steht - also genau dort, wo auch der Kopf steht. Die Alternative waere
 * das seiteneigene Stylesheet gewesen, an dem gerade ein anderer Zweig
 * arbeitet.
 *
 * Praefix bleibt eocn-qc, damit die Namensregel haelt.
 * ========================================================================== */

.eocn-qc-hero {
	position: relative;
	overflow: hidden;
	background: #dee5f0;
	border-radius: 14px;
	padding: 3.2rem 2.6rem;
	min-height: 210px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-family: "Glacial Indifference", -apple-system, "Segoe UI", system-ui, sans-serif;
}

.eocn-qc-hero .eocn-qc-hero__eyebrow {
	font-family: "League Spartan", "Glacial Indifference", sans-serif;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #134591;
	margin: 0 0 0.5rem;
}

.eocn-qc-hero .eocn-qc-hero__title {
	font-family: "League Spartan", "Glacial Indifference", sans-serif;
	font-size: clamp(2.4rem, 5vw, 3.6rem);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -0.015em;
	color: #134591;
	margin: 0;
}

/* Kurzer Strich unter dem Titel, wie im Entwurf. */
.eocn-qc-hero .eocn-qc-hero__rule {
	display: block;
	width: 118px;
	height: 4px;
	background: #134591;
	border-radius: 2px;
	margin: 2.2rem 0 0;
	padding: 0;
	border: 0;
}

/*
 * Der Kreis laeuft rechts aus dem Band heraus und wird oben wie unten
 * angeschnitten - genau wie im Entwurf. Dafuer das overflow:hidden am Band.
 */
.eocn-qc-hero__mark {
	position: absolute;
	top: 50%;
	right: -70px;
	transform: translateY(-50%);
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background-color: #134591;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpolygon points='15.4,8.6 13.2,13.2 8.6,15.4 10.8,10.8' fill='%23ffffff' stroke='none'/%3E%3Ccircle cx='12' cy='12' r='0.9' fill='%23ffffff' stroke='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 150px 150px;
	pointer-events: none;
}

@media (max-width: 900px) {
	.eocn-qc-hero {
		padding: 2.4rem 1.8rem;
		min-height: 170px;
	}

	.eocn-qc-hero__mark {
		width: 210px;
		height: 210px;
		right: -60px;
		background-size: 104px 104px;
	}

	.eocn-qc-hero .eocn-qc-hero__rule {
		margin-top: 1.6rem;
	}
}

/* Auf schmalen Geraeten wuerde der Kreis sonst den Titel ueberlagern. */
@media (max-width: 560px) {
	.eocn-qc-hero__mark {
		width: 150px;
		height: 150px;
		right: -46px;
		top: auto;
		bottom: -46px;
		transform: none;
		background-size: 74px 74px;
	}

	.eocn-qc-hero .eocn-qc-hero__rule {
		display: none;
	}
}

/* --------------------------------------------------------------------------
 * Kontaktschritt (Stufe 2) - Gravity Forms mit abgeschaltetem GF-CSS
 *
 * Entschieden am 02.09.2026: GF rendert und speichert das Formular, sein
 * Stylesheet wird per gform_disable_css und gform_disable_form_theme_css
 * ausgeschaltet (siehe class-eocn-qc-gform.php), und das Aussehen kommt von
 * hier. Ersparnis, am 02.09.2026 gemessen: 21,8 KB CSS gzip beim
 * Orbital-Theme beziehungsweise 6,9 KB beim 2.5-Theme.
 *
 * Damit gilt in diesem Abschnitt eine Ausnahme von der Regel oben: hier
 * stehen fremde Selektoren (.gform_wrapper, .gfield, ...). Das ist nicht
 * Bequemlichkeit, sondern die Folge der Entscheidung - ohne GF-CSS ist das
 * Markup nackt und muss von irgendwo Stil bekommen. Der Preis: ein
 * GF-Hauptversionssprung kann Klassennamen aendern, so wie 2.5 es getan hat.
 * Beim GF-Update also diesen Abschnitt gegenpruefen.
 * ----------------------------------------------------------------------- */

/*
 * Sichtbar allein ueber den Schritt am Wrapper - das JS setzt hier keine
 * Stile. Vor dem Start des JS fehlt data-eocn-step, der Block ist also auch
 * ohne JavaScript verborgen. Das ist gewollt: ohne JS gibt es kein Ergebnis,
 * zu dem ein Kontaktformular passen wuerde.
 */
.eocn-qc .eocn-qc__lead {
	display: none;
}

.eocn-qc[data-eocn-step="results"] .eocn-qc__lead {
	display: block;
	margin-top: 1.4rem;
	/* Dieselben Werte wie .eocn-qc__inner, damit die Karte des
	   Kontaktschritts nicht anders eingerueckt ist als das Ergebnis darueber. */
	padding: 2rem 2.1rem 2.2rem;
	border: 1px solid var(--eocn-line);
	border-radius: var(--eocn-radius);
	background: var(--eocn-surface);
	box-shadow: var(--eocn-shadow);
}

/*
 * Der Ergebnis-Fuss, wenn das JS ihn hinter das Kontaktformular ausgelagert
 * hat: dann ist er direktes Kind des Wrappers und liegt ausserhalb der Karten.
 * Ohne Rahmenlinie - die wuerde hier unter dem ganzen Modul durchlaufen und
 * wie ein Seitenabschluss wirken.
 */
.eocn-qc > .eocn-qc__results-foot {
	margin-top: 1.1rem;
	padding-top: 0;
	border-top: 0;
}

.eocn-qc .eocn-qc__lead-title {
	margin-top: 0;
}

.eocn-qc .eocn-qc__lead-form {
	margin-top: 1.2rem;
}

/* --------------------------------------------------------------------------
 * Was Gravity Forms sonst selbst verstecken wuerde
 *
 * Diese sechs Regeln sind KEINE Kosmetik. Sie sind am 02.09.2026 aus GFs
 * eigener basic.min.css und theme.min.css ausgelesen und hierher uebernommen,
 * weil sie mit dem abgeschalteten GF-CSS verschwinden. Ohne sie steht die
 * Honeypot-Falle sichtbar im Formular und jeder Besucher fuellt sie brav aus -
 * GF verwirft die Einsendung dann als Spam. Nicht entfernen.
 * ----------------------------------------------------------------------- */

.eocn-qc .gform_validation_container,
.eocn-qc .gform_fields .gfield.gform_validation_container {
	/*
	 * !important wie in GFs Originalregel. Hier ist es Absicht: ein sichtbar
	 * gewordener Honeypot macht das Formular fuer alle unbrauchbar, und diese
	 * Regel darf gegen nichts verlieren - auch nicht gegen eine kuenftige
	 * Salient- oder GF-Regel.
	 */
	display: none !important;
	position: absolute !important;
	left: -9000px;
}

.eocn-qc .gform_hidden,
.eocn-qc .gf_hidden,
.eocn-qc .gf_step_hidden {
	display: none;
}

.eocn-qc .gf_invisible,
.eocn-qc .gfield_visibility_hidden {
	position: absolute;
	left: -9999px;
	visibility: hidden;
}

.eocn-qc .hidden_label .gfield_label,
.eocn-qc .hidden_sub_label,
.eocn-qc .gform_wrapper .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	border: 0;
	word-wrap: normal;
}

.eocn-qc .gfield_validation_message ul:empty,
.eocn-qc .validation_message--hidden-on-empty:empty {
	display: none;
}

/* --------------------------------------------------------------------------
 * Formularlayout
 * ----------------------------------------------------------------------- */

.eocn-qc .gform_wrapper form {
	margin: 0;
}

.eocn-qc .gform_fields {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.9rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 700px) {
	.eocn-qc .gform_fields {
		grid-template-columns: 1fr;
	}
}

.eocn-qc .gfield {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Mehrzeiliges, Consent und alles Versteckte brauchen die ganze Breite. */
.eocn-qc .gfield--type-textarea,
.eocn-qc .gfield--type-consent,
.eocn-qc .gfield--type-hidden {
	grid-column: 1 / -1;
}

.eocn-qc .gfield_label {
	display: block;
	margin-bottom: 0.35rem;
	font-family: var(--eocn-display);
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--eocn-ink);
	text-transform: none;
	letter-spacing: 0;
}

/*
 * Pflichtkennzeichnung als Wort und nicht nur als Sternchen. Vertrag 7
 * verlangt, dass Bedeutung nie allein an einem Zeichen haengt; ein blosses *
 * wird von Screenreadern je nach Stimme als "Stern" oder gar nicht gelesen.
 */
.eocn-qc .gfield_required {
	margin-left: 0.25rem;
	font-weight: 600;
	color: var(--eocn-ink-soft);
}

.eocn-qc .gfield_required .gfield_required_asterisk {
	color: var(--eocn-ink-soft);
}

.eocn-qc .ginput_container input[type="text"],
.eocn-qc .ginput_container input[type="email"],
.eocn-qc .ginput_container textarea {
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0.62em 0.75em;
	font-family: var(--eocn-sans);
	font-size: 0.98rem;
	line-height: 1.5;
	color: var(--eocn-ink);
	background: var(--eocn-surface);
	border: 1.5px solid var(--eocn-line);
	border-radius: var(--eocn-radius-sm);
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	min-height: 0;
}

.eocn-qc .ginput_container textarea {
	/*
	 * Hoehe explizit, nicht ueber das rows-Attribut.
	 *
	 * Am 02.09.2026 am gerenderten DOM gemessen: GF setzt rows="10", und ohne
	 * GF-CSS gewinnt das - das Feld stand 258 px hoch im Formular und liess
	 * eine freiwillige Notiz wichtiger aussehen als die Pflichtfelder
	 * darueber. CSS height schlaegt rows.
	 */
	height: 7em;
	min-height: 5em;
	resize: vertical;
}

.eocn-qc .ginput_container input[type="text"]:hover,
.eocn-qc .ginput_container input[type="email"]:hover,
.eocn-qc .ginput_container textarea:hover {
	border-color: var(--eocn-ink-faint);
}

.eocn-qc .gfield_description {
	margin: 0.4rem 0 0;
	font-size: 0.85rem;
	line-height: 1.55;
	color: var(--eocn-ink-soft);
}

.eocn-qc .gfield_description a {
	color: var(--eocn-brand);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
 * Consent
 *
 * Eigener GF-Feldtyp, nicht ein Kontrollkaestchen: er speichert die
 * Textversion mit, an alten Eintraegen bleibt also ablesbar, WOZU zugestimmt
 * wurde. Optisch abgesetzt, damit die Einwilligung nicht wie ein weiteres
 * Eingabefeld unter vielen aussieht.
 * ----------------------------------------------------------------------- */

.eocn-qc .gfield--type-consent {
	padding: 0.95rem 1rem;
	border: 1px solid var(--eocn-line-soft);
	border-radius: var(--eocn-radius-sm);
	background: var(--eocn-surface-2);
}

.eocn-qc .gfield--type-consent .gfield_label {
	margin-bottom: 0.5rem;
}

.eocn-qc .ginput_container_consent {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

.eocn-qc .ginput_container_consent input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	margin: 0.16rem 0 0;
	accent-color: var(--eocn-brand);
	-webkit-appearance: checkbox;
	appearance: checkbox;
}

.eocn-qc .ginput_container_consent label {
	margin: 0;
	font-family: var(--eocn-sans);
	font-size: 0.92rem;
	font-weight: 400;
	line-height: 1.55;
	color: var(--eocn-ink);
	text-transform: none;
	letter-spacing: 0;
}

/* --------------------------------------------------------------------------
 * Fehler und Bestaetigung
 * ----------------------------------------------------------------------- */

.eocn-qc .gform_validation_errors {
	margin: 0 0 1rem;
	padding: 0.8rem 1rem;
	border: 1.5px solid #b3261e;
	border-radius: var(--eocn-radius-sm);
	background: #fdf0ef;
	color: #7a1a15;
}

.eocn-qc .gform_validation_errors h2 {
	margin: 0;
	font-family: var(--eocn-display);
	font-size: 0.98rem;
	font-weight: 600;
	line-height: 1.4;
	color: #7a1a15;
	text-transform: none;
	letter-spacing: 0;
}

.eocn-qc .gform_validation_errors ol,
.eocn-qc .gform_validation_errors ul {
	margin: 0.5rem 0 0 1.1rem;
	padding: 0;
	font-size: 0.9rem;
}

.eocn-qc .gfield_validation_message,
.eocn-qc .validation_message {
	margin: 0.4rem 0 0;
	padding: 0;
	font-size: 0.85rem;
	line-height: 1.5;
	color: #7a1a15;
	background: none;
	border: 0;
}

.eocn-qc .gfield_error .gfield_label {
	color: #7a1a15;
}

.eocn-qc .gfield_error .ginput_container input[type="text"],
.eocn-qc .gfield_error .ginput_container input[type="email"],
.eocn-qc .gfield_error .ginput_container textarea {
	border-color: #b3261e;
}

.eocn-qc .gform_confirmation_message {
	margin: 0;
	padding: 1rem 1.15rem;
	border: 1px solid var(--eocn-p1);
	border-radius: var(--eocn-radius-sm);
	background: var(--eocn-p1-soft);
	color: var(--eocn-ink);
	font-size: 0.98rem;
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
 * Absendeknopf
 *
 * Erbt nicht von .eocn-qc__btn, weil GF das Markup rendert und keine eigene
 * Klasse annimmt. Die Eigenschaften sind deshalb bewusst dieselben wie dort,
 * inklusive des dokumentierten !important gegen Salients globalen
 * Button-Radius aus den Theme Options.
 * ----------------------------------------------------------------------- */

.eocn-qc .gform_footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.7rem;
	margin: 1.2rem 0 0;
	padding: 0;
}

.eocn-qc .gform_footer input[type="submit"],
.eocn-qc .gform_footer button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--eocn-display);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	padding: 0.72em 1.4em;
	border: 1.5px solid transparent;
	/* Siehe Begruendung an .eocn-qc__btn: nur Inline mit !important gewinnt
	   gegen Salients Radius-Regel, eine Klasse allein reicht nicht. */
	border-radius: var(--eocn-radius-sm) !important;
	background: var(--eocn-brand);
	color: #ffffff;
	cursor: pointer;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	min-height: 0;
	text-shadow: none;
	width: auto;
}

.eocn-qc .gform_footer input[type="submit"]:hover,
.eocn-qc .gform_footer input[type="submit"]:focus-visible,
.eocn-qc .gform_footer button[type="submit"]:hover,
.eocn-qc .gform_footer button[type="submit"]:focus-visible {
	background: #0f3874;
	color: #ffffff;
}

.eocn-qc.eocn-qc--dark .gform_footer input[type="submit"],
.eocn-qc.eocn-qc--dark .gform_footer button[type="submit"] {
	color: #0d1512;
}

/* GFs Ladeanzeige beim Ajax-Absenden. */
.eocn-qc .gform_ajax_spinner {
	display: inline-block;
	width: 1.1rem;
	height: 1.1rem;
	margin-left: 0.2rem;
	vertical-align: middle;
}

/*
 * Der Ajax-Rahmen von GF. Er ist ein echtes iframe und wuerde ohne diese
 * Regel als leerer Kasten unter dem Formular Platz einnehmen.
 */
.eocn-qc iframe.gform_ajax_frame {
	display: block;
	width: 0;
	height: 0;
	border: 0;
	overflow: hidden;
}

/* --------------------------------------------------------------------------
 * Newsletter
 *
 * Flacher Streifen unter der Dreierreihe, kein vierte Karte: der Aufruf ist
 * ein Querschnittsthema und keiner der drei Abschlusswege - und eine vierte
 * Spalte haette die Karten auf ein Viertel Breite gedrueckt.
 * ----------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
 * Designänderungen vom 03.09.2026
 * ----------------------------------------------------------------------- */

/*
 * hidden absichern. Das Akkordeon schliesst ueber das hidden-Attribut, und
 * Salient setzt auf manche Container display:block - ohne diese Regel stuende
 * eine geschlossene Saeule trotzdem offen.
 */
.eocn-qc [hidden] {
	display: none;
}

/*
 * Startknopf in Saeulenfarbe 1, #A8CE3A.
 *
 * Bewusster Bruch mit dem Styleguide, am 03.09.2026 ausdruecklich so
 * gewuenscht: dort ist Gruen Saeulen-Identitaet und ausdruecklich KEINE
 * Aktionsfarbe, Aktionsfarbe ist Blau #134591. Wer diese Regel spaeter
 * wiederherstellt, loescht hier - der Rest des Moduls haelt sich weiter daran.
 *
 * Was NICHT gebrochen wird: der Text bleibt dunkel. Weiss auf diesem Gruen
 * kommt auf etwa 1,75:1 und ist damit unlesbar; dunkles Ink erreicht rund
 * 9,4:1. Das ist Lesbarkeit, nicht Geschmack - und das Projekt ist
 * EU-gefoerdert.
 *
 * Beide Selektoren, weil der Intro-Schritt seinen Knopf sonst wieder auf
 * weiss-auf-blau zieht (gleiche Spezifitaet, diese Regel steht spaeter).
 */
.eocn-qc .eocn-qc__btn--start,
.eocn-qc[data-eocn-step="intro"] .eocn-qc__btn--start {
	background: #a8ce3a;
	color: var(--eocn-ink);
	border-color: #a8ce3a;
}

.eocn-qc .eocn-qc__btn--start:hover,
.eocn-qc .eocn-qc__btn--start:focus-visible,
.eocn-qc[data-eocn-step="intro"] .eocn-qc__btn--start:hover,
.eocn-qc[data-eocn-step="intro"] .eocn-qc__btn--start:focus-visible {
	background: #93b82c;
	color: var(--eocn-ink);
	border-color: #93b82c;
}

.eocn-qc.eocn-qc--dark .eocn-qc__btn--start {
	color: #0d1512;
}

/* --------------------------------------------------------------------------
 * Saeulen als Akkordeon
 *
 * Die Ueberschrift traegt einen echten <button>. Deshalb muss hier alles
 * zurueckgesetzt werden, was Salient Knoepfen mitgibt - dieselbe Liste wie bei
 * .eocn-qc__btn, aus demselben Grund.
 * ----------------------------------------------------------------------- */

.eocn-qc .eocn-qc__pillar-h {
	margin: 0;
	padding: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: 0;
	text-transform: none;
	color: inherit;
}

.eocn-qc .eocn-qc__pillar-banner {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	width: 100%;
	margin: 0;
	padding: 0.85rem 1.1rem;
	background: var(--eocn-pc);
	color: var(--eocn-pc-ink);
	border: 0;
	/*
	 * Wie bei .eocn-qc__btn: Salient setzt seinen globalen Button-Radius mit
	 * !important, dagegen reicht keine Spezifitaet. Am 31.08.2026 gemessen.
	 */
	border-radius: var(--eocn-radius-sm) var(--eocn-radius-sm) 0 0 !important;
	font-family: var(--eocn-sans);
	font-size: 1rem;
	text-align: left;
	text-transform: none;
	text-shadow: none;
	letter-spacing: 0;
	cursor: pointer;
	box-shadow: none;
	min-height: 0;
	-webkit-appearance: none;
	appearance: none;
	transition: filter 0.16s ease;
}

/* Geschlossen ist das Banner das ganze Element - dann alle vier Ecken rund. */
.eocn-qc .eocn-qc__pillar-banner[aria-expanded="false"] {
	border-radius: var(--eocn-radius-sm) !important;
}

.eocn-qc .eocn-qc__pillar-banner:hover {
	filter: brightness(0.96);
}

.eocn-qc .eocn-qc__pillar-banner:hover .eocn-qc__pillar-banner-name {
	text-decoration: underline;
}

.eocn-qc .eocn-qc__pillar-banner-text {
	flex: 1 1 auto;
	min-width: 0;
}

/* Der Name war ein h3 und ist jetzt ein span im Knopf - Blockfluss selbst
   herstellen, sonst stehen Nummer und Name in einer Zeile. */
.eocn-qc .eocn-qc__pillar-banner-name {
	display: block;
}

.eocn-qc__pillar-chevron {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	transition: transform 0.18s ease;
}

.eocn-qc__pillar-chevron svg {
	width: 20px;
	height: 20px;
}

.eocn-qc .eocn-qc__pillar-banner[aria-expanded="true"] .eocn-qc__pillar-chevron {
	transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
 * "There is more to explore" - leiser
 *
 * Hier standen zwei CTA-Knoepfe je Saeule. Sie sind entfernt: wer sein
 * Ergebnis liest, soll nicht viermal aus dem Ergebnis herausgelockt werden.
 * Geblieben ist ein Link im Fliesstext.
 * ----------------------------------------------------------------------- */

.eocn-qc .eocn-qc__more {
	margin-top: 1.2rem;
	padding-top: 0.9rem;
	/* Haarlinie statt gestrichelter Linie - die zog vorher den Blick an. */
	border-top: 1px solid var(--eocn-line-soft);
}

.eocn-qc .eocn-qc__more .eocn-qc__eyebrow {
	font-size: 0.68rem;
	color: var(--eocn-ink-faint);
}

.eocn-qc .eocn-qc__more-text {
	margin: 0.4rem 0 0;
	font-size: 0.88rem;
	line-height: 1.6;
	color: var(--eocn-ink-soft);
}

/*
 * Link im Fliesstext. Traegt die Aktionsfarbe des Projekts und ist
 * unterstrichen - Farbe allein darf nie der einzige Bedeutungstraeger sein.
 */
.eocn-qc .eocn-qc__inline-link {
	color: var(--eocn-brand);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.eocn-qc .eocn-qc__inline-link:hover,
.eocn-qc .eocn-qc__inline-link:focus-visible {
	color: #0f3874;
	text-decoration-thickness: 2px;
}

.eocn-qc.eocn-qc--dark .eocn-qc__inline-link {
	color: #8fb4e8;
}

/* --------------------------------------------------------------------------
 * "Coming soon" am noch nicht verfuegbaren Aufruf
 * ----------------------------------------------------------------------- */

.eocn-qc .eocn-qc__cta-note {
	display: inline-block;
	margin-left: 0.5rem;
	padding: 0.12em 0.5em;
	border-radius: 999px;
	background: var(--eocn-line-soft);
	color: var(--eocn-ink-soft);
	font-family: var(--eocn-sans);
	font-size: 0.72rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	vertical-align: middle;
}

/* --------------------------------------------------------------------------
 * Abschlusskarten, wenn das JS sie hinter das Kontaktformular ausgelagert hat
 *
 * Dann sind sie direktes Kind des Wrappers und liegen ausserhalb der Karte
 * des Ergebnisses - sie brauchen ihren Abstand selbst.
 * ----------------------------------------------------------------------- */

.eocn-qc > .eocn-qc__funnel {
	margin-top: 1.4rem;
}

/* --------------------------------------------------------------------------
 * Der Druckknopf im Ergebniskopf
 *
 * Steht rechts in der Meta-Zeile, die schon space-between ist - der Chip
 * "Quick Check complete" links, die Aktion rechts. Etwas kleiner als die
 * Knoepfe der Schrittnavigation: er ist eine Nebenhandlung, keine
 * Aufforderung.
 * ----------------------------------------------------------------------- */

.eocn-qc .eocn-qc__btn--print {
	/*
	 * Blaue Kontur statt gefuellter Flaeche: der Knopf soll auffallen, aber
	 * nicht mit dem primaeren Aufruf verwechselt werden. Blau ist im
	 * Farbsystem die Aktionsfarbe - Gruen, Tuerkis und Gold sind
	 * Saeulen-Identitaet und kommen als Bedienelement nicht in Frage.
	 */
	background: transparent;
	color: var(--eocn-brand);
	border-color: var(--eocn-brand);
	border-width: 2px;
	font-size: 0.86rem;
	/* 700, nicht 600: Glacial Indifference hat kein 600 und spraenge ohnehin
	   auf Bold - dann lieber dranschreiben, was herauskommt. */
	font-weight: 700;
	padding: 0.5em 1em;
}

.eocn-qc .eocn-qc__btn--print:hover,
.eocn-qc .eocn-qc__btn--print:focus-visible {
	background: var(--eocn-brand);
	color: #ffffff;
	border-color: var(--eocn-brand);
}

.eocn-qc .eocn-qc__btn--print svg {
	width: 1.05em;
	height: 1.05em;
}

/*
 * Auf dem Telefon bleibt der Knopf rechts neben dem Chip stehen, statt unter
 * ihn zu rutschen.
 *
 * Bei 375 px gemessen: die Meta-Zeile ist 290 px breit, Chip (173) und Knopf
 * (162) zusammen 335. Einer von beiden muss also schmaler werden, und das ist
 * der Chip - er darf auf zwei Zeilen, der Knopf nicht.
 */
@media (max-width: 640px) {

	.eocn-qc .eocn-qc__results-head .eocn-qc__meta {
		flex-wrap: nowrap;
		align-items: center;
		gap: 0.6rem;
	}

	.eocn-qc .eocn-qc__results-head .eocn-qc__status {
		/* Ohne min-width bliebe das Flex-Element auf seiner Inhaltsbreite und
		   der Text broeche nie um. */
		min-width: 0;
		text-align: left;
	}

	.eocn-qc .eocn-qc__results-head .eocn-qc__status svg {
		flex: none;
	}

	.eocn-qc .eocn-qc__btn--print {
		flex: none;
		margin-left: auto;
		font-size: 0.8rem;
		padding: 0.5em 0.85em;
	}
}

/* ==========================================================================
 * Officer-Ansicht: der Report zu einem gespeicherten Eintrag
 *
 * Eine eigenstaendige Seite in wp-admin, ohne Adminrahmen und ohne Theme.
 * Deshalb steht hier auch das Grundgeruest - Hintergrund, Satzbreite,
 * Schrift -, das im Frontend sonst Salient mitbringt.
 *
 * Die Momentaufnahme selbst kommt unveraendert aus dem Modul darunter. Hier
 * steht nur, was um sie herum liegt: die Kopfzeile mit dem Eintrag.
 * ========================================================================= */

/*
 * Fester Wert statt Custom Property: die Variablen haengen an .eocn-qc und
 * .eocn-qc-report, und <body> liegt darueber.
 */
body.eocn-qc-report-page {
	margin: 0;
	padding: 2.2rem 1.4rem 4rem;
	background: #eef2f0;
}

.eocn-qc-report {
	max-width: 62rem;
	margin: 0 auto;
}

.eocn-qc-report__head {
	margin-bottom: 1.6rem;
}

.eocn-qc-report__kicker {
	margin: 0 0 0.5rem;
	font-family: var(--eocn-display);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--eocn-ink-faint);
}

.eocn-qc-report__org {
	margin: 0;
	font-family: var(--eocn-display);
	font-size: 1.9rem;
	line-height: 1.15;
	font-weight: 700;
	color: var(--eocn-brand);
}

.eocn-qc-report__person,
.eocn-qc-report__mail {
	margin: 0.35rem 0 0;
	font-family: var(--eocn-sans);
	font-size: 0.95rem;
	font-weight: 400;
	color: var(--eocn-ink-soft);
}

.eocn-qc-report__mail a {
	color: var(--eocn-brand);
}

/*
 * Die Anmerkung des Interessenten. Sie ist im Gespraech oft der wertvollste
 * Teil des Eintrags und steht deshalb im Kopf und nicht im Anhang.
 */
.eocn-qc-report__note {
	margin: 1rem 0 0;
	padding: 0.85rem 1.1rem;
	border-left: 3px solid var(--eocn-brand);
	background: var(--eocn-surface);
	font-family: var(--eocn-sans);
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.55;
	color: var(--eocn-ink);
}

.eocn-qc-report__empty {
	font-family: var(--eocn-sans);
	font-weight: 400;
	color: var(--eocn-ink-soft);
}

/* Im Report ist die Fortschrittsschiene eine Auskunft ueber nichts. */
.eocn-qc[data-eocn-report] .eocn-qc__rail {
	display: none;
}

/* --------------------------------------------------------------------------
 * Herkunftsnotiz im Ergebniskopf
 *
 * Steht nur im Report-Modus. Sie sagt, dass diese Momentaufnahme gerade eben
 * neu berechnet wurde - die Antworten sind die des Eintrags, die Formulierungen
 * die von heute.
 * ----------------------------------------------------------------------- */

.eocn-qc .eocn-qc__report-note {
	margin-top: 1.1rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--eocn-line);
}

.eocn-qc .eocn-qc__report-note p {
	margin: 0;
	font-family: var(--eocn-sans);
	font-size: 0.86rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--eocn-ink-faint);
}

.eocn-qc .eocn-qc__report-note-alert {
	margin-top: 0.4rem !important; /* gegen .eocn-qc__report-note p{margin:0} eine Zeile darueber */
	color: var(--eocn-ink) !important; /* dito - der Hinweis soll sich vom Kleingedruckten abheben */
	font-weight: 700 !important; /* dito; 700, weil Glacial Indifference kein 500 und kein 600 hat */
}

/* ==========================================================================
 * Druck
 *
 * Ziel ist ein Report, den der Nutzer mitnehmen kann - ueber den Druckdialog
 * des Browsers und dessen "Als PDF sichern". Kein PDF-Plugin, kein Server,
 * keine zweite Kopie personenbezogener Daten.
 *
 * Die Sichtbarkeitssteuerung haengt an zwei Markierungen, die das JS kurz vor
 * dem Druck setzt (siehe markPrintPath()):
 *
 *   data-eocn-printing     auf <html>, solange gedruckt wird
 *   data-eocn-print-path   auf jedem Vorfahren des Wrappers
 *   data-eocn-print-target auf dem Wrapper selbst
 *
 * Damit steht hier keine einzige Theme-Klasse. Der Pfad wird zur Laufzeit
 * gemessen statt geraten - er ueberlebt jedes Salient-Update, und der Block
 * wirkt unveraendert in der Eintragsansicht des Officers, wo ein voellig
 * anderes Markup drumherum steht.
 * ========================================================================= */

@media print {

	/*
	 * Auf jeder Ebene bleibt nur, was auf dem Pfad zum Modul liegt. Damit
	 * verschwinden Kopfzeile, Navigation, Seitenleisten und Footer, ohne dass
	 * eine davon hier benannt werden muesste.
	 *
	 * !important gegen die Layoutregeln des Themes: Salient setzt display auf
	 * Kopfzeile und Wrapper mit hoher Spezifitaet, ohne !important bliebe die
	 * fixierte Kopfzeile auf jeder Seite stehen.
	 */
	html[data-eocn-printing] [data-eocn-print-path] > *:not([data-eocn-print-path]):not([data-eocn-print-target]) {
		display: none !important;
	}

	/*
	 * Der Pfad selbst wird zum schlichten Block.
	 *
	 * !important gegen die Layoutregeln des Themes: ein overflow:hidden,
	 * eine feste Hoehe oder ein position:fixed irgendwo im Pfad schneidet den
	 * Ausdruck nach der ersten Seite ab - der Report ist aber mehrseitig.
	 *
	 * Die waagerechten Abstaende muessen aus demselben Grund weg. Am
	 * 18.09.2026 auf der Quick-Check-Seite gemessen, ueber die 13 Ebenen
	 * zwischen Wrapper und <html>: .container traegt 90px Polsterung je
	 * Seite, .vc_col-sm-12 weitere 20px, und .row_col_wrap_12 haelt mit
	 * -20px Aussenabstand dagegen. Am Bildschirm ist das die Satzbreite, auf
	 * Papier stuende es zusaetzlich zum Seitenrand und schoebe den Report in
	 * eine schmale Spalte.
	 */
	html[data-eocn-printing] [data-eocn-print-path] {
		display: block !important;
		overflow: visible !important;
		position: static !important;
		width: auto !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		transform: none !important;
		float: none !important;
		background: none !important;
	}

	html[data-eocn-printing] [data-eocn-print-target] {
		margin: 0 !important;
		padding: 0 !important;
		max-width: none !important;
	}

	@page {
		margin: 14mm 12mm;
	}

	/*
	 * Saeulenbaender und Gruppenfarben mitdrucken, wenn der Nutzer
	 * Hintergrundgrafiken erlaubt. Die Aussage haengt nie an der Farbe allein
	 * - Nummer, Name und Icon stehen daneben -, aber ohne die Baender
	 * zerfaellt die Gliederung.
	 */
	.eocn-qc {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	/* Bedienelemente haben auf Papier nichts verloren. */
	.eocn-qc .eocn-qc__rail,
	.eocn-qc .eocn-qc__btn--print,
	.eocn-qc .eocn-qc__results-foot,
	.eocn-qc .eocn-qc__funnel,
	.eocn-qc .eocn-qc__lead,
	.eocn-qc .eocn-qc__resume,
	.eocn-qc .eocn-qc__confirm,
	.eocn-qc .eocn-qc__sr {
		display: none !important; /* gegen .eocn-qc__btn{display:inline-flex} und die Schrittlayouts weiter oben in dieser Datei */
	}

	/*
	 * Die Huelle traegt am Bildschirm Rahmen, Schatten und overflow:hidden.
	 * Auf Papier ist der Rahmen Ballast, und das overflow wuerde den Report
	 * nach der ersten Seite abschneiden.
	 */
	.eocn-qc .eocn-qc__shell {
		border: 0;
		border-radius: 0;
		box-shadow: none;
		overflow: visible;
		background: none;
	}

	.eocn-qc .eocn-qc__inner {
		padding: 0;
		/* Die gemessene Mindesthoehe steht als Inline-Stil am Element und
		   erzeugt im Druck sonst eine halbe Leerseite. */
		min-height: 0 !important;
	}

	/* Der Ergebnistitel ist am Bildschirm ein Plakat, auf Papier eine
	   Ueberschrift. */
	.eocn-qc .eocn-qc__results-title {
		font-size: 1.7rem;
		max-width: none;
	}

	/*
	 * Umbrueche. Bewusst nur dort, wo ein Riss den Sinn zerstoert: ein
	 * einzelnes Feedback, und eine Ueberschrift ohne ihren Inhalt. Ganze
	 * Saeulen zusammenzuhalten waere falsch - eine Saeule ist laenger als
	 * eine Seite und wuerde eine Leerseite davor erzwingen.
	 */
	.eocn-qc .eocn-qc__finding,
	.eocn-qc .eocn-qc__legend-list li {
		break-inside: avoid;
		page-break-inside: avoid;
	}

	.eocn-qc .eocn-qc__pillar-h,
	.eocn-qc .eocn-qc__group-head,
	.eocn-qc .eocn-qc__snapshot {
		break-after: avoid;
		page-break-after: avoid;
	}

	.eocn-qc .eocn-qc__pillar-result {
		break-before: auto;
		margin-top: 1.2rem;
	}

	/* Karten sind am Bildschirm Flaechen, auf Papier reicht eine Linie. */
	.eocn-qc .eocn-qc__card {
		box-shadow: none;
	}

	/*
	 * Der Aufklappknopf ist im Druck kein Knopf mehr. Das JS klappt vorher
	 * alle Saeulen auf, der Pfeil zeigte also auf nichts.
	 */
	.eocn-qc .eocn-qc__pillar-chevron {
		display: none;
	}
}