/*
 * midcareer.css — the customer CI of the Mid-Career-Navigator (BOLD x HSLU).
 *
 * Scope: this file is loaded ONLY on the Mid-Career-Navigator page. The include
 * lives in Configuration/TypoScript/setup.ts behind its own condition on
 * {$plugin.tx_rccsurvey.pidsMidcareer}. It must never be added to
 * listOfPidsWithSurvey, which covers around sixty questionnaire pages.
 *
 * Because the file is page-scoped, a :root block here is page-scoped too. That
 * is why the new variables may live in :root without touching the house tokens.
 *
 * Rules taken from A12 (decisions, not from a rendered canvas):
 *   - The four marker colours of the evaluation radar carry a traffic-light
 *     meaning (Survey.js getBulletColor: red 0-25, orange 25-50, yellow 50-75,
 *     green 75-100). No customer colour may take one of them. Nothing in this
 *     file writes into the chart drawing area.
 *   - Brand yellow on white is 1.11:1. It can never carry information on its
 *     own: it needs a dark rim, dark text on top of it, or a dark ground under
 *     it. Measured, not estimated.
 *   - HSLU carries its own warm yellow (#FDC728, "concentrate" in the rcc mark)
 *     which is 1.42:1 against the brand yellow. Only one of the two yellows per
 *     view - this file never places brand yellow next to the rcc mark.
 *
 * Files that stay untouched: survey.css (sixty pages), the --rcc-* tokens
 * (defined in the rcc SCSS tree), the evaluation area (owned by A18.1).
 */

/* ==========================================================================
 * The typeface - Poppins, self-hosted (A67, K65 E5)
 *
 * BOLD's typeface. The files lie next to this stylesheet in ../Fonts/, with the
 * licence (SIL OFL 1.1, OFL.txt) beside them. Deliberately NOT loaded from
 * Google: no request leaves the platform for the typeface.
 *
 * Only the latin subset and only .woff2 - every browser in use reads it. The
 * unicode-range is Fontsource's latin range; it covers the umlauts, the dashes,
 * the quotes and the arrow in the band. A glyph outside it falls back to the
 * next family of the stack, not to a box.
 * ========================================================================== */

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../Fonts/poppins-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Poppins";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../Fonts/poppins-latin-400-italic.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../Fonts/poppins-latin-500-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../Fonts/poppins-latin-600-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../Fonts/poppins-latin-700-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Twin (A69, K65 P10): the PDF cannot read these tokens - mPDF knows no var() - so
 * Resources/Private/Templates/SurveyPdfMidcareer.html carries brand, ink, heading and
 * rule written out as hex in its <style>. Change a colour here, change it there. */
:root {
	/* --- BOLD, measured on bold-generation.ch (A12, 2026-08-24) --- */
	--mcn-color-brand: #FFFA06;         /* the brand yellow, verbatim */
	--mcn-color-brand-deep: #ECC632;    /* darker end of the yellow circle gradient */
	--mcn-color-brand-ink: #757300;     /* the only yellow that still carries text on white, 4.99:1 */
	--mcn-color-ink: #1D1D1D;           /* BOLD's dark */
	--mcn-color-ink-strong: #050000;    /* rim of the answer circles */
	--mcn-color-surface: #FFFFFF;
	--mcn-color-surface-soft: #F4F4F4;  /* BOLD's light grey */
	--mcn-color-heading: #61636B;       /* BOLD's own name for it is Ueberschriftgrau;
	                                       5.99:1 on white, and headings are large text */
	--mcn-color-surface-dark: var(--mcn-color-heading);  /* same grey, used as the hero band */
	--mcn-color-surface-deep: #35363B;  /* the hero grey, darkened */
	--mcn-color-on-brand: #1D1D1D;      /* text on brand yellow, 15.20:1 */
	--mcn-color-on-dark: #FFFFFF;       /* text on the hero grey, 5.99:1 */
	--mcn-color-rule: #C9CACE;          /* hairline between question rows, decorative only (1.64:1) */
	--mcn-color-ring: #E2E3E6;          /* rings and axes of the evaluation charts - quieter than
	                                       the rule, the data has to stand in front of it (A67/A68) */
	--mcn-color-brand-stroke: #E6D800;  /* a deeper yellow for strokes on white. The traffic-light
	                                       yellow #FFFF00 as a 4px stroke on white is 1.07:1 and
	                                       vanishes; used by the hint cards of A68 */

	/* --- the typeface (A67). BOLD sets everything in Poppins; the stack falls
	   back to the house face if the file cannot be loaded. --- */
	--mcn-font-family: "Poppins", Helvetica, sans-serif;

	/* --- the affordance, as roles rather than as colours ---
	   The house builds .btn.btn-hslu entirely out of four --rcc-color-*-action
	   variables (rcc/…/rcc_scss/_buttons.scss :67-83). Redefining those four on
	   the button itself is enough to recolour it - no rule of the house is
	   overridden and no !important is needed. These are the values they take on
	   this page. There is no black token in the house; #35363B is A12's darkened
	   hero grey, already in use for the advisory box, which keeps the instrument
	   in one piece instead of introducing a second dark. */
	--mcn-color-bg-action: var(--mcn-color-surface-deep);        /* #35363B */
	--mcn-color-fg-action: var(--mcn-color-on-dark);             /* white, 12.05:1 on it */
	--mcn-color-bg-action-hover: var(--rcc-color-bg-lightgray);  /* #BBBBBB, the house grey */
	--mcn-color-fg-action-hover: var(--mcn-color-ink);           /* 8.78:1 on that grey */

	/* --- spacing, aligned with the --rcc-spacing-* families --- */
	--mcn-space-row: 0.8rem;            /* inside a question row, = content-xs */
	--mcn-space-block: 1.5rem;          /* between blocks, = element-md */
	--mcn-space-band: 2rem;             /* padding of the hero and logo bands, = content-lg */

	/* --- geometry of the answer circles --- */
	--mcn-option-size: 22px;            /* the drawn circle */
	--mcn-option-border: 2px;
	--mcn-option-hit: 44px;             /* the clickable square. WCAG 2.2 SC 2.5.8 (AA)
	                                       asks for 24px; 44px is SC 2.5.5 (AAA). */
	--mcn-option-column: 46px;          /* width of one answer column on the desktop */

	/* --- the page head (A67, target images K65 0a/0b) --- */
	--mcn-bubble-size: 140px;           /* the yellow bubble on the phone; 176px from lg on,
	                                       set once in the media query of the page head */
	--mcn-logo-hslu-height: 34px;       /* the two logos are drawn at different heights */
	--mcn-logo-bold-height: 40px;       /* so that their word marks look equally large */

	/* --- the evaluation (A68, target pictures K65 1-3) --- */
	--mcn-evaluation-max: 104rem;       /* 1040px, the width of the evaluation area */
	--mcn-reading-max: 76rem;           /* 760px, the introduction text above it */
	--mcn-legend-swatch-size: 1.8rem;   /* the colour squares of the legend */
	--mcn-card-stroke: 4px;             /* the band stroke on top of a hint card */
}

/* The typeface is set on the content, not on the page: the header, the menu
   and the assistant keep the house face, so the navigation does not change
   its look from one page to the next. Not on <main> itself - the page
   template renders Notifications, Helpsystem and AiAssistant inside <main>,
   next to the content containers (RccWorld/*.html). Inside the containers the
   two house variables are redefined - every rule of the house that reads them
   follows without being overridden - and the font-family is set once more for
   the text that inherits instead of reading a variable. */
main > .container {
	--rcc-font-family-body: var(--mcn-font-family);
	--rcc-font-family-heading: var(--mcn-font-family);
	font-family: var(--mcn-font-family);
}

/* ==========================================================================
 * Stage 1 - the question part
 *
 * The markup this styles is built by Question.js at runtime and was read off
 * the live page on 2026-08-27, not guessed:
 *
 *   table.questions-midcareer
 *     tr                                    the header row, "Fragen: 1 2 3 4"
 *     tr.contentelement.title-level-1       dimension head, kept hidden by the
 *                                           plugin so it cannot steer answers
 *     tr.rangequestion.rq-tablerow
 *       td.rq-questionnumber                the running number
 *       td                                  the statement
 *       td.option.option-1 .. .option-4
 *         label.rq-option-box               fills the cell, absolutely placed
 *           input[type=radio]               hidden by survey.css
 *           div.rq-option-box-inner         holds two Font Awesome glyphs
 *
 * survey.css sets the glyph colours and the cell backgrounds with !important,
 * on selectors that reach every questionnaire. Overriding them needs both a
 * higher specificity and !important - documented here rather than left as a
 * silent force. Nothing below leaves table.questions-midcareer.
 * ========================================================================== */

/* --- the table and its rows --- */

table.questions-midcareer {
	width: 100%;
	border-collapse: collapse;
}

table.questions-midcareer tr > th {
	background-color: var(--mcn-color-ink);
	color: var(--mcn-color-on-dark);
	font-size: var(--rcc-font-size-smaller);
	font-weight: 600;
	padding: var(--mcn-space-row) var(--mcn-space-row);
	text-align: center;
	vertical-align: middle;
}

table.questions-midcareer tr > th:first-child {
	text-align: left;
}

/* E6 (Peter, 25.09.2026, in these words): row line height base x 1.4, number
   AND statement aligned to the top, the answer circles in the middle.
   Top alignment keeps number and first line of a two-line statement on one
   baseline; the circles stay centred on the whole row.

   DOCUMENTED EXCEPTION to the SCSS guideline (no raw values, tokens only):
   the line height is deliberately NOT --rcc-font-line-height-base. That token
   is 2.52rem, too loose for 48 statements, and the calculation behind it in
   the SCSS is wrong - which is known and not corrected here, because the token
   is read across the whole platform. The factor 1.4 is measured and decided
   (K65 E6); the calc keeps it tied to the base font size, so it still follows
   if the base size ever changes. */
table.questions-midcareer tr.rangequestion.rq-tablerow > td {
	border-bottom: 1px solid var(--mcn-color-rule);
	color: var(--mcn-color-ink);
	line-height: calc(var(--rcc-font-size-base) * 1.4);
	padding: var(--mcn-space-row) 0;
	vertical-align: top;
}

table.questions-midcareer tr.rangequestion.rq-tablerow > td.rq-questionnumber + td {
	padding-right: var(--mcn-space-row);
}

/* A statement may carry its own <p> (q_text is rendered as HTML). The house
   gives every p the 2.52rem line height and a forced bottom margin through
   --rcc-paragraph-after; both would break E6 inside a row. */
table.questions-midcareer tr.rangequestion.rq-tablerow > td p {
	--rcc-paragraph-after: 0;
	line-height: inherit;
	margin: 0;
}

/* A reading aid across 48 rows: the row under the pointer takes BOLD's light
   grey. Deliberately hover and not every-other-row - the hidden dimension rows
   sit between the statements and count towards :nth-of-type, so striping would
   flip pattern after each of them. Carries no meaning; dark text keeps 15.33:1. */
table.questions-midcareer tr.rangequestion.rq-tablerow:hover > td {
	background-color: var(--mcn-color-surface-soft);
}

table.questions-midcareer tr.rangequestion.rq-tablerow > td.rq-questionnumber {
	color: var(--mcn-color-brand-ink);
	font-weight: 700;
	padding-left: var(--mcn-space-row);
	padding-right: var(--mcn-space-row);
	text-align: right;
	vertical-align: top;   /* E6: with the statement, not with the circles */
	white-space: nowrap;
	width: 3.5rem;
}

table.questions-midcareer tr.rangequestion.rq-tablerow > td.option {
	position: relative;   /* survey.css already says so; said again so the phone
	                         layout below does not depend on a foreign rule */
	text-align: center;
	vertical-align: middle;   /* E6: the circles stay centred on the row */
	width: var(--mcn-option-column);
}

/* survey.css caps the label at 25 px (.rq-tablerow label.rq-option-box). The
   label is what the pointer and the keyboard hit, so that cap - not the circle -
   is the target size. Lifted here, and the row given a floor instead: on a table
   cell, height acts as a minimum, so every row is at least --mcn-option-hit tall
   and the label, which fills the cell, is too. That makes the target 46 x 44 px -
   past SC 2.5.8 (AA, 24px) and past SC 2.5.5 (AAA, 44px). */
table.questions-midcareer tr.rq-tablerow label.rq-option-box {
	max-height: none;
}

table.questions-midcareer tr.rangequestion.rq-tablerow > td.rq-questionnumber {
	height: var(--mcn-option-hit);
}

/* --- the answer circles ---------------------------------------------------
 * A12, measured: brand yellow on white is 1.11:1, so the fill can never be the
 * thing that says "ticked". The dark rim does that (20.87:1 against white) and
 * the yellow rides inside it. That is the one arrangement that carries both the
 * information and the brand.
 * The circle is drawn as a pseudo element rather than with the two Font Awesome
 * glyphs, because a rim and a fill are two layers and a glyph is one.
 * ------------------------------------------------------------------------- */

table.questions-midcareer .rq-option-box-inner > i {
	display: none !important;   /* survey.css toggles these two glyphs with !important */
}

/* survey.css paints this box white, pink and hover-grey with !important, on
   three selectors that reach (0,3,1) and (0,4,1). Between !important rules the
   specificity decides, not the load order, so a short selector here would lose
   in silence and leave a filled rectangle behind every circle. The two rules
   below are cut to (0,3,2) and (0,4,2) for exactly that reason. Same for
   justify-content, which survey.css sets to space-around at (0,3,1). */
table.questions-midcareer .rq-option-box input + .rq-option-box-inner {
	align-items: center;
	background-color: transparent !important;
	display: flex !important;
	justify-content: center;
}

table.questions-midcareer .rq-option-box:hover input + .rq-option-box-inner {
	background-color: transparent !important;
}

table.questions-midcareer .rq-option-box-inner::after {
	background-color: var(--mcn-color-surface);
	border: var(--mcn-option-border) solid var(--mcn-color-ink-strong);
	border-radius: 50%;
	/* border-box, deliberately: without it the rim is added outside the 22px and
	   the circles drift out of line with the column headings. Measured in A12. */
	box-sizing: border-box;
	content: "";
	display: block;
	height: var(--mcn-option-size);
	transition: background-color 0.12s ease-in-out;
	width: var(--mcn-option-size);
}

/* The ticked state may NOT rest on the yellow alone: brand yellow against the
   white of the unticked circle is 1.11:1, and the file header says as much. So
   ticking also draws a dark ring inside the circle. In grey scale, in sunlight
   and with a yellow deficiency the difference is then a pattern, not a hue -
   WCAG 1.4.11 wants 3:1 between states, and #050000 against #FFFA06 is 15.1:1.
   The yellow stays what A12 asked for: the fill. It just no longer carries the
   information on its own. */
table.questions-midcareer .rq-option-box input:checked + .rq-option-box-inner::after {
	background-color: var(--mcn-color-brand);
	box-shadow: inset 0 0 0 3px var(--mcn-color-ink-strong);
}

table.questions-midcareer .rq-option-box:hover input:not(:checked) + .rq-option-box-inner::after {
	background-color: var(--mcn-color-surface-soft);
}

/* survey.css hides the radio with visibility:hidden, which also takes it out of
   the tab order - the questionnaire cannot be filled in from the keyboard. On
   this page the input stays in the tab order and is only made transparent. */
table.questions-midcareer .rq-option-box input {
	cursor: pointer;
	height: 100%;
	left: 0;
	margin: 0;
	opacity: 0;
	position: absolute;
	top: 0;
	visibility: visible;
	width: 100%;
	z-index: 1;
}

table.questions-midcareer .rq-option-box input:focus-visible + .rq-option-box-inner::after {
	box-shadow: 0 0 0 2px var(--mcn-color-surface), 0 0 0 5px var(--mcn-color-brand-ink);
}

/* The unfinished state stays in rcc colours on purpose (A12: meaning belongs to
   the platform, expression to the customer). White on #a00057 is 7.98:1. */
table.questions-midcareer tr.rq-tablerow.unfinished > td.rq-questionnumber,
table.questions-midcareer tr.rq-tablerow.unfinished > td:nth-child(2) {
	background-color: #a00057;
	color: var(--mcn-color-on-dark);
}

/* ==========================================================================
 * Stage 1 - hero, introduction and attribution line
 *
 * These three sit next to each other in colPos 4 and are rendered by the page
 * template, not by the plugin (see the comment in Show.html around line 5404).
 * That is why the general tt_content wrapping applies to them, and why a frame
 * class is enough to tell them apart: rcc_root_setup.ts / legacy.typoscript turn
 * frame_class 107 into #c-mcn-hero and 108 into #c-mcn-logos.
 *
 * The introduction gets no frame class - it is the normal case and keeps the
 * plain page look. Styling it too would have meant a third rule for no gain.
 *
 * The id selectors are the house mechanism here, not a shortcut past
 * specificity: the wrappers exist only because a frame class was chosen. They
 * are also what carries this past .frame-default's own heading rules.
 * ========================================================================== */

/* --- the page head (A67, K65 L; target images 0a and 0b) -----------------
 * No content element of its own (Peter, 25.09.2026). The hero 2339 / 2346 is
 * CType html since A65, and everything the head shows is marked-up text in
 * it - so an editor can change every sentence in the backend:
 *
 *   div.mcn-logos          "Eine Innovation von" + HSLU + boLd, on white
 *   div.mcn-hero           the grey block
 *     div.mcn-hero-text      p.mcn-eyebrow (em = the yellow word), h1, p.mcn-sub
 *     p.mcn-bubble           the yellow bubble; the circle pattern is its
 *                            ::before / ::after
 *     p.mcn-band             the yellow band; the arrow is its ::after
 *
 * The logo row sits on white because the boLd logo is a PNG without alpha
 * channel - on the grey it would show as a white rectangle.
 *
 * The 6px yellow edge of the hero is gone: the band replaces it. Band margin
 * and hero padding are computed from the same --mcn-space-band, which is what
 * takes the band edge to edge.
 * ------------------------------------------------------------------------- */

#c-mcn-hero {
	margin-bottom: var(--mcn-space-block);
}

/* The house sets `p { margin-bottom: var(--rcc-paragraph-after) !important }`
   - measured on DEV, it left 10px of grey under the band. Redefining the two
   variables here takes the spacing off without a counter-!important; where a
   paragraph needs space below it (the eyebrow), it sets the variable too. */
#c-mcn-hero p {
	--rcc-paragraph-before: 0;
	--rcc-paragraph-after: 0;
	margin: 0;
}

/* The A65 markup (eyebrow, h1, subline, no .mcn-hero) keeps its grey block.
   CSS and bodytext travel separately - a rollback of one, or a PROD run in
   which the guarded UPDATE finds nothing, must not leave a white h1 on white.
   :has() is in every current browser; where it is missing, only this
   fallback is lost, not the new head. */
#c-mcn-hero:not(:has(.mcn-hero)) {
	background-color: var(--mcn-color-surface-dark);
	padding: var(--mcn-space-band);
}

#c-mcn-hero:not(:has(.mcn-hero)) h1,
#c-mcn-hero:not(:has(.mcn-hero)) p {
	color: var(--mcn-color-on-dark);
}

#c-mcn-hero:not(:has(.mcn-hero)) h1 {
	margin-top: 0;
}

#c-mcn-hero .mcn-logos {
	align-items: center;
	background-color: var(--mcn-color-surface);
	color: var(--mcn-color-heading);   /* 5.99:1 on white */
	display: flex;
	flex-wrap: wrap;
	font-size: var(--rcc-font-size-smallest);
	gap: var(--rcc-spacing-element-md);
	justify-content: flex-start;   /* the phone (0b); right-aligned from lg on (0a) */
	padding: var(--mcn-space-row) var(--mcn-space-band);
}

#c-mcn-hero .mcn-logos img {
	display: block;
	width: auto;
}

/* The HSLU image carries empty space below its word mark, so centred on the row
   it sits too high. Moved down by eye (Peter, 26.09.2026); relative, so the row
   height and the boLd logo stay where they are. */
#c-mcn-hero .mcn-logos .mcn-logo-hslu {
	height: var(--mcn-logo-hslu-height);
	position: relative;
	top: var(--rcc-spacing-content-xs);
}

#c-mcn-hero .mcn-logos .mcn-logo-bold {
	height: var(--mcn-logo-bold-height);
}

/* isolation gives the block its own stacking context: the circle pattern
   (z-index -1 below) then lies above the grey and below the text, without a
   z-index number that would have to fit into a page-wide scale. */
#c-mcn-hero .mcn-hero {
	background-color: var(--mcn-color-surface-dark);
	color: var(--mcn-color-on-dark);   /* 5.99:1 on the hero grey */
	isolation: isolate;
	overflow: hidden;
	padding: var(--mcn-space-band) var(--mcn-space-band) 0;
	position: relative;
}

#c-mcn-hero .mcn-hero-text {
	padding: var(--mcn-space-band) 0 var(--rcc-spacing-content-xl);
}

#c-mcn-hero .mcn-eyebrow {
	--rcc-paragraph-after: var(--mcn-space-row);
	font-size: var(--rcc-font-size-base);
	margin-bottom: var(--mcn-space-row);
}

#c-mcn-hero .mcn-eyebrow strong {
	font-weight: 600;
}

/* The one yellow word. Brand yellow on the hero grey is 5.40:1. */
#c-mcn-hero .mcn-eyebrow em {
	color: var(--mcn-color-brand);
	font-style: normal;
}

#c-mcn-hero .mcn-hero h1 {
	color: var(--mcn-color-on-dark);
	font-size: var(--rcc-font-size-heading-2);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.05;   /* LUECKE: the --rcc-font-line-height-* tokens are absolute
	                        rem values for body sizes; a display title needs a
	                        factor. 1.05, 1.6 (subline) and 1.22 (bubble) are the
	                        values of the target image 0a. */
	margin: 0 0 var(--mcn-space-block);
}

#c-mcn-hero .mcn-hero .mcn-sub {
	color: var(--mcn-color-on-dark);
	font-size: var(--rcc-font-size-smaller);
	line-height: 1.6;
}

#c-mcn-hero .mcn-hero a {
	color: var(--mcn-color-brand);   /* 5.40:1 on the hero grey */
	text-decoration: underline;
}

/* The bubble. On the phone it stands under the text, right-aligned (0b);
   from the desktop breakpoint on it moves to the right of the text (0a).
   No z-index: it must not open a stacking context of its own, otherwise its
   circle pattern could not slip behind it. */
#c-mcn-hero .mcn-bubble {
	--rcc-paragraph-after: var(--rcc-spacing-element-lg);   /* see the note on #c-mcn-hero p */
	align-items: center;
	background: linear-gradient(-45deg, var(--mcn-color-brand), var(--mcn-color-brand-deep));
	border-radius: var(--rcc-border-radius-full, 50%);
	color: var(--mcn-color-ink-strong);   /* at least 12:1 across the gradient */
	display: flex;
	font-size: var(--rcc-font-size-smaller);
	font-weight: 700;
	height: var(--mcn-bubble-size);
	justify-content: center;
	line-height: 1.22;
	margin: 0 0 var(--rcc-spacing-element-lg) auto;
	padding: 0 var(--rcc-spacing-content-md);
	position: relative;
	text-align: center;
	width: var(--mcn-bubble-size);
}

/* The circle pattern - two plain circles in the deep yellow, behind the
   bubble. Positions are fractions of the bubble, so they scale with it.
   LUECKE (SCSS guideline 2.7): there is no opacity token yet; .85 (phone),
   .65 and .95 (desktop, Peter 26.09.2026) are set by eye against the target
   image. */
#c-mcn-hero .mcn-bubble::before,
#c-mcn-hero .mcn-bubble::after {
	background-color: var(--mcn-color-brand-deep);
	border-radius: var(--rcc-border-radius-full, 50%);
	content: "";
	position: absolute;
	z-index: -1;
}

#c-mcn-hero .mcn-bubble::before {
	bottom: calc(var(--mcn-bubble-size) * 0.1);
	height: calc(var(--mcn-bubble-size) * 0.46);
	opacity: 0.85;
	right: calc(100% - var(--mcn-bubble-size) * 0.25);
	width: calc(var(--mcn-bubble-size) * 0.46);
}

#c-mcn-hero .mcn-bubble::after {
	display: none;   /* the small circle only has room on the desktop */
}

/* The band closes the hero edge to edge: its negative margin is exactly the
   hero padding. The arrow points at the questions below; it is decoration and
   hidden from assistive technology through the alternative-text syntax (the
   first declaration is the fallback for browsers without it). */
#c-mcn-hero .mcn-band {
	background-color: var(--mcn-color-brand);
	color: var(--mcn-color-ink-strong);   /* 18.9:1 on the brand yellow */
	display: flex;
	font-size: var(--rcc-font-size-smaller);
	font-weight: 500;
	gap: var(--rcc-spacing-element-md);
	justify-content: space-between;
	margin: 0 calc(-1 * var(--mcn-space-band));
	padding: var(--rcc-spacing-content-sm) var(--mcn-space-band);
	position: relative;
}

#c-mcn-hero .mcn-band::after {
	content: "\2193";
	content: "\2193" / "";
	font-weight: 600;
}

@media (min-width: 992px) {

	:root {
		--mcn-bubble-size: 176px;
	}

	#c-mcn-hero .mcn-logos {
		justify-content: flex-end;
	}

	#c-mcn-hero .mcn-hero-text {
		/* room on the right for the bubble and its pattern */
		max-width: calc(100% - var(--mcn-bubble-size) * 1.5);
		/* the bubble ends at 2.5 x band + size (its top, below); the text starts
		   at 1 x band - so the text block needs size + 1.5 x band, plus one band
		   of air before the yellow band */
		min-height: calc(var(--mcn-bubble-size) + 2.5 * var(--mcn-space-band));
	}

	#c-mcn-hero .mcn-hero h1 {
		font-size: var(--rcc-font-size-display-6);
	}

	#c-mcn-hero .mcn-bubble {
		--rcc-paragraph-after: 0;
		font-size: var(--rcc-font-size-base);
		margin: 0;
		padding: 0 var(--mcn-space-band);
		position: absolute;
		right: calc(var(--mcn-space-band) * 2);
		top: calc(var(--mcn-space-band) * 2.5);
	}

	/* Positions set by Peter against the target image (26.09.2026): the small
	   circle top left, the middle one tucked behind the bubble's upper left. */
	#c-mcn-hero .mcn-bubble::before {
		bottom: auto;
		height: calc(var(--mcn-bubble-size) * 0.3);
		opacity: 0.65;
		right: calc(100% + var(--mcn-bubble-size) * 0.01);
		top: calc(var(--mcn-bubble-size) * -0.18);
		width: calc(var(--mcn-bubble-size) * 0.3);
	}

	#c-mcn-hero .mcn-bubble::after {
		display: block;
		height: calc(var(--mcn-bubble-size) * 0.55);
		opacity: 0.95;
		right: calc(100% - var(--mcn-bubble-size) * 0.3);
		top: 0;
		width: calc(var(--mcn-bubble-size) * 0.55);
	}
}

/* The attribution line names both houses. It stays quiet: BOLD's light grey,
   normal dark text, a yellow edge as the only brand mark. */
#c-mcn-logos {
	background-color: var(--mcn-color-surface-soft);
	border-left: 6px solid var(--mcn-color-brand);
	margin-bottom: var(--mcn-space-block);
	padding: var(--mcn-space-row) var(--mcn-space-block);
}

#c-mcn-logos .frame,
#c-mcn-logos p {
	color: var(--mcn-color-ink);   /* 15.33:1 on the light grey */
	font-size: var(--rcc-font-size-smaller);
	margin-bottom: 0;
}

/* ==========================================================================
 * Stage 1 - the two buttons of the questionnaire, and the notice box
 *
 * The buttons carried the HSLU blue #449dc2, which is the platform's affordance
 * colour and not the customer's. Recolouring them needs no rule of the house to
 * be overridden: .btn.btn-hslu reads its four colours from --rcc-color-*-action,
 * so redefining those four ON the button is enough. Set here through --mcn-*
 * names so the values stay in one place at the top of the file.
 *
 * ONE rule does have to be written out, and the reason is worth knowing:
 *
 *   button:not(.navbar-toggler):not(.text-btn), input, … { color: inherit }
 *
 * That selector is (0,3,1) and beats .btn.btn-hslu (0,2,0) - so the label of
 * these buttons does not come from --rcc-color-fg-action at all today, it is
 * inherited from the surrounding text. Measured on PROD: the two buttons show
 * rgb(33,37,41) although the token says white. Redefining the variable alone
 * would therefore change the background to near-black and leave the label dark
 * on it. The rule below exists only to out-specify that inherit; it still reads
 * its value from the same token, so there is one place to change.
 *
 * The hover pair needs no such rule: .btn.btn-hslu:hover carries !important,
 * which beats a plain `inherit` whatever its specificity.
 *
 * Four buttons are covered: Auswerten and the test button in the question part,
 * the PDF button inside the notice box, and the PDF button of the evaluation
 * (.midcareer-evaluation-box). The last one sits next to A18.1's area but not
 * inside .midcareer-evaluation, so it does not cross into their rules.
 * ========================================================================== */

.midcareer-questions .btn.btn-hslu.evaluate-midcareer,
.midcareer-questions .btn.btn-hslu.test-midcareer,
.midcareer-introduction .rcc-flowtext-hint .btn.btn-hslu,
.midcareer-explanation .midcareer-evaluation-box .btn.btn-hslu {
	--rcc-color-bg-action: var(--mcn-color-bg-action);
	--rcc-color-fg-action: var(--mcn-color-fg-action);
	--rcc-color-bg-action-hover: var(--mcn-color-bg-action-hover);
	--rcc-color-fg-action-hover: var(--mcn-color-fg-action-hover);
}

/* (0,4,1) against the (0,3,1) of `color: inherit` - see the note above.
   The PDF button in .midcareer-evaluation-box is addressed through its parent
   .midcareer-explanation rather than through .hide-pdf: hide-pdf is a state
   class, and a colour must not depend on a state that may be taken away. */
.midcareer-questions button.btn.btn-hslu.evaluate-midcareer,
.midcareer-questions button.btn.btn-hslu.test-midcareer,
.midcareer-introduction .rcc-flowtext-hint button.btn.btn-hslu,
.midcareer-explanation .midcareer-evaluation-box button.btn.btn-hslu {
	color: var(--rcc-color-fg-action);
}

/* --- the headings ---------------------------------------------------------
 * Every h2 on this page takes BOLD's heading grey. Today none of them has a
 * colour of its own: measured through the DevTools protocol, no rule sets
 * `color` on them at all, they inherit rgb(33,37,41) from the body. Any
 * specificity therefore beats that, and a bare element selector is enough - it
 * is only this broad because the whole file is loaded on this one page.
 *
 * The yellow rule under them is ornament, not meaning - it carries nothing that
 * would be lost in grey scale. inline-block is what keeps it as wide as the
 * words instead of the column.
 *
 * An h2 inside the hero would be the exception: the head carries its own yellow
 * (the band, since A67), and a second yellow line above it reads as a mistake
 * rather than as decoration. Today the hero holds an h1 only; the rule stays so
 * that an editor who adds a subheading there does not get the ornament.
 * ------------------------------------------------------------------------- */

h2 {
	border-bottom: 3px solid var(--mcn-color-brand);
	color: var(--mcn-color-heading);
	display: inline-block;
	padding-bottom: var(--mcn-space-row);
}

#c-mcn-hero h2 {
	border-bottom: 0;
	display: block;
	padding-bottom: 0;
}

/* --- the two notice boxes -------------------------------------------------
 * There are two of them on this page and they are built identically
 * (_typesetting.scss :1013-1057): .rcc-flowtext-hint above the questions and
 * .questions-common-hint-current-data above the personal details. Both take
 * --rcc-color-bg-alt-1-light for the box and --rcc-color-fg-alt-2 for the icon
 * bar, so both are redefined here rather than overridden - and both are listed
 * everywhere below, because two boxes that look the same have to stay the same.
 *
 * The icon glyph is the exception: its `color: white` is written out, not
 * tokenised. On the rcc yellow it was already only 1.57:1; on the brand yellow
 * it would be 1.11:1 and the exclamation mark would disappear. It therefore
 * becomes dark - 18.81:1 - which is the same rule the answer circles follow:
 * the brand yellow may be the surface, never the thing that carries meaning.
 * ------------------------------------------------------------------------- */

.rcc-flowtext-hint,
.questions-common-hint-current-data {
	--rcc-color-bg-alt-1-light: var(--mcn-color-surface-soft);   /* #F4F4F4 */
	--rcc-color-fg-alt-2: var(--mcn-color-brand);                /* #FFFA06 */
}

/* The glyph colour is the one thing the house writes out instead of tokenising
   (`color: white`), so it needs a rule. The element selector lifts these to
   (0,1,1) against the (0,1,0) of the house - decided, not won by load order.
   The house rules are `p.rcc-flowtext-hint` and a bare
   `.questions-common-hint-current-data`; both boxes are a <p> and a <div>
   respectively in the template. */
p.rcc-flowtext-hint::before,
div.questions-common-hint-current-data::before {
	color: var(--mcn-color-ink-strong);
}

/* ==========================================================================
 * Stage 1 - the phone, 390 px
 *
 * A12 held this down for the phone: at that width the four circles no longer
 * fit beside the statement, they move under it. Each question becomes a block
 * instead of a line. The table therefore stops being a table below 576 px.
 *
 * The column headings 1..4 disappear with the table layout, so each circle
 * carries its own digit underneath. The wording of the scale stays where it is,
 * in the content element above the questions.
 * ========================================================================== */

@media (max-width: 575.98px) {

	:root {
		--mcn-option-hit: 56px;   /* A12 held 56 px for the phone */
	}

	table.questions-midcareer,
	table.questions-midcareer tbody,
	table.questions-midcareer tr.rangequestion.rq-tablerow,
	table.questions-midcareer tr.rangequestion.rq-tablerow > td {
		display: block;
		width: auto;
	}

	/* the "Fragen: 1 2 3 4" row - its digits move to the circles below */
	table.questions-midcareer tr:first-child {
		display: none;
	}

	table.questions-midcareer tr.rangequestion.rq-tablerow {
		border-bottom: 1px solid var(--mcn-color-rule);
		padding: var(--mcn-space-block) 0;
	}

	/* All four sides: survey.css draws thin cell rims that, once the cells are
	   blocks, show as boxes around the number and the circles (target image 5
	   has none). */
	table.questions-midcareer tr.rangequestion.rq-tablerow > td {
		border: 0;
		padding: 0;
	}

	/* The row floor of the desktop (height = --mcn-option-hit on this cell) is a
	   fixed height on a block and left a gap under the number. On the phone the
	   circles carry the target size themselves. */
	table.questions-midcareer tr.rangequestion.rq-tablerow > td.rq-questionnumber {
		height: auto;
		padding: 0 0 var(--mcn-space-row) 0;
		text-align: left;
		width: auto;
	}

	/* The four option cells become one row of four, each a quarter wide. The
	   label keeps the absolute placement survey.css gives it - it is left in
	   place and only shortened at the bottom, so the digit has room under the
	   circle without a second layout model. */
	table.questions-midcareer tr.rangequestion.rq-tablerow > td.option {
		display: inline-block;
		height: calc(var(--mcn-option-hit) + 2rem);
		margin-top: var(--mcn-space-row);
		vertical-align: top;
		width: 25%;
	}

	table.questions-midcareer tr.rangequestion.rq-tablerow > td.option .rq-option-box {
		bottom: 2rem;
		max-height: none;   /* survey.css caps it at 25 px; without this the circle
		                       sticks to the top and the target stays 25 px high */
	}

	table.questions-midcareer tr.rangequestion.rq-tablerow > td.option::after {
		bottom: 0;
		color: var(--mcn-color-ink);
		display: block;
		font-size: var(--rcc-font-size-smallest);   /* 13px, as in the target image 5 */
		left: 0;
		line-height: 2rem;
		position: absolute;
		right: 0;
		text-align: center;
	}

	table.questions-midcareer td.option.option-1::after { content: "1"; }
	table.questions-midcareer td.option.option-2::after { content: "2"; }
	table.questions-midcareer td.option.option-3::after { content: "3"; }
	table.questions-midcareer td.option.option-4::after { content: "4"; }
}

/* ==========================================================================
 * Stage 2 - the sociodemographic block ("Zuerst etwas ueber dich")
 *
 * Markup read off the live page on 2026-08-28, built by surveyHelper.js:
 *
 *   .questions-common-container > h2
 *     .questions-common-hint-current-data      the platform notice, left alone
 *     .questions-common
 *       div.single-choice   > .sc-questionnumber .sc-text .sc-question-body ul li label input+span
 *       div.multiple-choice > .mc-questionnumber .mc-text .mc-question-body (checkboxes)
 *       div.freetext        > .ft-questionnumber .ft-text .ft-question-body (input/textarea)
 *
 * survey.css lays these out with flex (line 654 ff.) and leaves the controls to
 * the browser: 13 px system radios in the browser accent colour. This section
 * gives them the same two-layer circle as the scale - dark rim carries the
 * ticked state, brand yellow sits inside it - so both halves of the page read as
 * one instrument.
 *
 * Single choice stays a circle, multiple choice becomes a square. That is the
 * only signal a person has for "one answer" against "several", and the system
 * controls carried it before; replacing them has to carry it too.
 *
 * NOT touched: .questions-common-hint-current-data. It is a platform notice in
 * rcc's own notice colour, and by A12's rule meaning stays with the platform
 * while expression goes to the customer. See the note in the card about the two
 * yellows meeting on this page.
 * ========================================================================== */

/* Space, not hairlines. Question.js renders these blocks with v-show, so a
   conditional question stays in the DOM as display:none - a separator plus
   :last-child would then hang on an invisible element and be missing where it
   is needed. A margin cannot be absorbed that way: a hidden element has none. */
.questions-common .single-choice,
.questions-common .multiple-choice,
.questions-common .freetext {
	margin-top: var(--mcn-space-band);
}

/* survey.css:664 takes the top margin off the first block, at the same
   specificity as the rule above - which would leave the outcome to the load
   order. Said again here so it is a decision and not an accident. */
.questions-common .single-choice:first-child,
.questions-common .multiple-choice:first-child,
.questions-common .freetext:first-child {
	margin-top: 0;
}

.questions-common .sc-questionnumber,
.questions-common .mc-questionnumber,
.questions-common .ft-questionnumber {
	color: var(--mcn-color-brand-ink);   /* 4.99:1 on white */
	font-weight: 700;
}

.questions-common .sc-text,
.questions-common .mc-text,
.questions-common .ft-text {
	color: var(--mcn-color-ink);
	font-weight: 700;
}

.questions-common .sc-question-body ul,
.questions-common .mc-question-body ul {
	padding-left: 30px;
}

/* survey.css:732 indents these by 32px at (0,2,2). A rule on `li` alone is
   (0,2,1) and loses no matter how late it is loaded - the 32px would add to the
   30px below and push the options out to 62px. Written as `ul li` it matches
   the same specificity and the load order decides. */
.questions-common .sc-question-body ul li,
.questions-common .mc-question-body ul li {
	margin-bottom: 0;
	margin-left: 0;
}

/* The whole line is the target, not just the control. */
.questions-common .sc-question-body label,
.questions-common .mc-question-body label {
	align-items: center;
	color: var(--mcn-color-ink);
	cursor: pointer;
	display: flex;
	gap: var(--mcn-space-row);
	margin-bottom: 0;
	min-height: var(--mcn-option-hit);
	padding: 0 var(--mcn-space-row) 0 0;
}

.questions-common .sc-question-body label:hover,
.questions-common .mc-question-body label:hover {
	background-color: var(--mcn-color-surface-soft);
}

.questions-common .sc-question-body input[type="radio"],
.questions-common .mc-question-body input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--mcn-color-surface);
	border: var(--mcn-option-border) solid var(--mcn-color-ink-strong);
	box-sizing: border-box;
	flex: 0 0 auto;
	height: var(--mcn-option-size);
	margin: 0;
	transition: background-color 0.12s ease-in-out;
	width: var(--mcn-option-size);
}

.questions-common .sc-question-body input[type="radio"] {
	border-radius: 50%;
}

.questions-common .mc-question-body input[type="checkbox"] {
	border-radius: var(--rcc-border-radius-sm, 4px);
}

/* Same rule as for the scale: the yellow is the fill, the dark inner ring is
   the information. Yellow against white alone is 1.11:1 and would leave the
   ticked option invisible to anyone the colour fails - which is exactly what the
   system control did better before it was replaced. */
.questions-common .sc-question-body input:checked,
.questions-common .mc-question-body input:checked {
	background-color: var(--mcn-color-brand);
	box-shadow: inset 0 0 0 3px var(--mcn-color-ink-strong);
}

.questions-common .sc-question-body input:focus-visible,
.questions-common .mc-question-body input:focus-visible {
	box-shadow: 0 0 0 2px var(--mcn-color-surface), 0 0 0 5px var(--mcn-color-brand-ink);
	outline: none;
}

.questions-common .sc-question-body input:checked:focus-visible,
.questions-common .mc-question-body input:checked:focus-visible {
	box-shadow: inset 0 0 0 3px var(--mcn-color-ink-strong),
	            0 0 0 2px var(--mcn-color-surface),
	            0 0 0 5px var(--mcn-color-brand-ink);
}

.questions-common .sc-question-body label span,
.questions-common .mc-question-body label span {
	color: var(--mcn-color-ink);   /* 16.86:1 on white, 15.33:1 on the hover grey */
}

/* The browser draws these with a 2px inset border in its own grey. Given a rim
   of their own they belong to the same instrument as everything above. */
.questions-common .ft-question-body input[type="text"],
.questions-common .ft-question-body textarea,
.questions-common .sc-question-body input[type="text"],
.questions-common .mc-question-body input[type="text"] {
	background-color: var(--mcn-color-surface);
	border: var(--mcn-option-border) solid var(--mcn-color-ink);
	border-radius: var(--rcc-border-radius-sm, 4px);
	box-sizing: border-box;
	color: var(--mcn-color-ink);
	padding: var(--mcn-space-row);
}

/* The ring is drawn in brand-ink (4.99:1 on white), not in the brand yellow -
   yellow on white is 1.11:1 and would be an invisible focus indicator. The dark
   border stays dark as well: a focused field must become more conspicuous, not
   less. Same two-step ring as the radios above. */
.questions-common .ft-question-body input[type="text"]:focus,
.questions-common .ft-question-body textarea:focus,
.questions-common .sc-question-body input[type="text"]:focus,
.questions-common .mc-question-body input[type="text"]:focus {
	border-color: var(--mcn-color-ink-strong);
	box-shadow: 0 0 0 2px var(--mcn-color-surface), 0 0 0 5px var(--mcn-color-brand-ink);
	outline: none;
}

@media (max-width: 575.98px) {

	.questions-common .sc-question-body ul,
	.questions-common .mc-question-body ul {
		padding-left: 0;
	}

	.questions-common .ft-question-body {
		margin-left: 0;
	}

	.questions-common .ft-question-body input[type="text"],
	.questions-common .ft-question-body textarea,
	.questions-common .mc-question-body input[type="text"],
	.questions-common .sc-question-body input[type="text"] {
		width: 100%;
	}
}

/* ==========================================================================
 * Stage 1 + 2 - forced colours
 *
 * In the Windows high-contrast mode the system replaces every colour and draws
 * no box-shadow at all. Everything this file uses to say "ticked" and "focused"
 * is exactly that: a background colour and a box-shadow. Left alone, a person in
 * that mode would get neither a focus indicator (WCAG 2.4.7) nor a visible
 * ticked state (1.4.1) - both of which the system controls handed them before
 * this file replaced the look.
 *
 * The answer here is to give the controls back rather than repaint them: the
 * native appearance and the system outline. The customer CI steps aside in a
 * mode whose entire purpose is that the user, not the page, chooses the colours.
 * ========================================================================== */

@media (forced-colors: active) {

	.questions-common .sc-question-body input[type="radio"],
	.questions-common .mc-question-body input[type="checkbox"] {
		appearance: auto;
		-webkit-appearance: auto;
		background-color: canvas;
		border: 0;
		box-shadow: none;
		height: auto;
		width: auto;
	}

	.questions-common .sc-question-body input:focus-visible,
	.questions-common .mc-question-body input:focus-visible,
	.questions-common .ft-question-body input[type="text"]:focus,
	.questions-common .ft-question-body textarea:focus,
	.questions-common .sc-question-body input[type="text"]:focus,
	.questions-common .mc-question-body input[type="text"]:focus {
		box-shadow: none;
		outline: 3px solid;
		outline-offset: 2px;
	}

	/* The scale circles are drawn, not native, so they cannot be handed back.
	   They are given a system-coloured rim instead, and the ticked one is filled
	   with the system highlight - which stays visible whatever palette is set. */
	table.questions-midcareer .rq-option-box-inner::after {
		background-color: canvas;
		border-color: canvastext;
		box-shadow: none;
	}

	table.questions-midcareer .rq-option-box input:checked + .rq-option-box-inner::after {
		background-color: highlight;
		box-shadow: none;
	}

	table.questions-midcareer .rq-option-box input:focus-visible + .rq-option-box-inner::after {
		box-shadow: none;
		outline: 3px solid;
		outline-offset: 2px;
	}
}

/* ==========================================================================
 * Stage 3 - the evaluation area (A18.1)
 *
 * Everything below sits under .midcareer-evaluation, the wrapper the Fluid
 * template puts around the content elements of colPos 20. The markup itself
 * lives in that content element (uid 2342 de / 2349 en), the ids follow the
 * viewKeys the questionnaire carries in parameter.viewKey:
 *
 *   .midcareer-views              the three columns
 *     .midcareer-view             one view
 *       .midcareer-view-title     heading, filled from the title of the view row
 *       .midcareer-chart-container  #chartdiv-mcn-<viewKey>
 *       .midcareer-dimension-interpretation[data-mcn-view]  the four hint blocks
 *   .midcareer-legend             the colour strip, once, below the three
 *
 * Three charts side by side instead of one wide radar: with one overlaid chart
 * only a single view could carry coloured corner points, and the whole purpose
 * of Sprint 2 is the DISTANCE between the views (A12, 25.08.).
 *
 * The four marker colours are set on the elements by Survey.js, not here. They
 * carry traffic-light meaning; this file must not be able to theme them away.
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * The order on the page (A68, target pictures K65 1 and 2): first the three
 * charts, then the legend, then the twelve hint cards in three rows of four -
 * the person is to be addressed first and have things explained afterwards.
 *
 * The markup keeps chart and cards together per view (content element 2342).
 * Instead of rebuilding it, each .midcareer-view steps out of the layout with
 * display: contents, and its three children become grid items of
 * .midcareer-views directly:
 *   - on the phone (one column) `order` does it: titles and charts keep their
 *     DOM order (0), the legend follows (1), the rows of cards come last (2);
 *   - from lg on every piece gets its cell: titles row 1, charts row 2, the
 *     legend row 3 across, the card rows 4-6 across.
 * The legend is written after .midcareer-views by the content element; Survey.js
 * moves it into the grid when it draws (display_spiderChart_views, indicator
 * form only - the statistics tool keeps it above its charts).
 * -------------------------------------------------------------------------- */

.midcareer-evaluation .midcareer-views {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: var(--rcc-spacing-element-lg);
}

.midcareer-evaluation .midcareer-view {
	display: contents;
}

.midcareer-evaluation .midcareer-views > .midcareer-legend {
	order: 1;
}

.midcareer-evaluation .midcareer-dimension-interpretation[data-mcn-view] {
	order: 2;
}

/* --- the jump marks (Peter's findings 25. and 26.09.2026), phone and tablet only
 * Written by surveyHelper.js, one pair per view: "to the text" right below the view
 * title, "to the chart" at the end of the view's card row, on the right. Quiet text
 * links - the page already has one strong action; these are ways through it. The
 * height is the hit area of the answer circles, 44px (A12). The targets are the two
 * heads of a view; the air above them after a jump is their scroll-margin-top. */
.midcareer-evaluation .mcn-jump {
	display: flex;
	align-items: center;
	gap: var(--rcc-spacing-element-xs);
	width: fit-content;
	min-height: var(--mcn-option-hit);
	color: var(--mcn-color-ink);
	font-size: var(--rcc-font-size-smallest);
	font-weight: 500;
	text-decoration: none;
}

.midcareer-evaluation .mcn-jump-label {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.midcareer-evaluation .mcn-jump:hover .mcn-jump-label {
	text-decoration-thickness: 2px;
}

.midcareer-evaluation .mcn-jump:focus-visible {
	outline: 3px solid var(--mcn-color-brand-ink);
	outline-offset: 2px;
}

.midcareer-evaluation .mcn-jump-arrow {
	font-weight: 700;
	line-height: 1;
}

.midcareer-evaluation .mcn-jump--to-charts {
	margin-left: auto;
}

.midcareer-evaluation .midcareer-view-title[id],
.midcareer-evaluation .midcareer-row-head[id] {
	scroll-margin-top: var(--rcc-spacing-element-md);
}

/* Focus follows the jump (tabindex -1); a ring on a heading would only puzzle. */
.midcareer-evaluation .midcareer-view-title[tabindex="-1"]:focus,
.midcareer-evaluation .midcareer-row-head[tabindex="-1"]:focus {
	outline: none;
}

@media (min-width: 992px) {
	.midcareer-evaluation .mcn-jump {
		display: none;
	}
}

@media (min-width: 992px) {
	.midcareer-evaluation .midcareer-views {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* "of .midcareer-view": the grid also holds the jump marks and the legend,
	 * so a plain nth-child would count them and shift every view by one. */
	.midcareer-evaluation .midcareer-view > .midcareer-view-title {
		grid-row: 1;
	}

	.midcareer-evaluation .midcareer-view > .midcareer-chart-container {
		grid-row: 2;
	}

	.midcareer-evaluation .midcareer-view:nth-child(1 of .midcareer-view) > .midcareer-view-title,
	.midcareer-evaluation .midcareer-view:nth-child(1 of .midcareer-view) > .midcareer-chart-container {
		grid-column: 1;
	}

	.midcareer-evaluation .midcareer-view:nth-child(2 of .midcareer-view) > .midcareer-view-title,
	.midcareer-evaluation .midcareer-view:nth-child(2 of .midcareer-view) > .midcareer-chart-container {
		grid-column: 2;
	}

	.midcareer-evaluation .midcareer-view:nth-child(3 of .midcareer-view) > .midcareer-view-title,
	.midcareer-evaluation .midcareer-view:nth-child(3 of .midcareer-view) > .midcareer-chart-container {
		grid-column: 3;
	}

	.midcareer-evaluation .midcareer-views > .midcareer-legend {
		grid-column: 1 / -1;
		grid-row: 3;
	}

	.midcareer-evaluation .midcareer-view > .midcareer-dimension-interpretation {
		grid-column: 1 / -1;
	}

	.midcareer-evaluation .midcareer-view:nth-child(1 of .midcareer-view) > .midcareer-dimension-interpretation {
		grid-row: 4;
	}

	.midcareer-evaluation .midcareer-view:nth-child(2 of .midcareer-view) > .midcareer-dimension-interpretation {
		grid-row: 5;
	}

	.midcareer-evaluation .midcareer-view:nth-child(3 of .midcareer-view) > .midcareer-dimension-interpretation {
		grid-row: 6;
	}
}

/* The width of target picture 1: the evaluation spans 1040px, the introduction in
 * it keeps a reading width of 760px, both from the same left edge. The page
 * template holds the content in a centred col-xl-8 (838px at 1280) with nothing on
 * either side, so the evaluation area as a whole steps out of that column
 * symmetrically - no template change, and never wider than the viewport minus a
 * margin. Below xl the column is col-12 anyway. The questionnaire above keeps the
 * column (A67). */
@media (min-width: 1200px) {
	.midcareer-evaluation {
		--mcn-evaluation-width: min(var(--mcn-evaluation-max), calc(100vw - 2 * var(--rcc-spacing-section-sm)));
		width: var(--mcn-evaluation-width);
		margin-left: calc((100% - var(--mcn-evaluation-width)) / 2);
	}
}

/* The html content element 2342/2349 renders without a wrapper of its own, so its
 * paragraphs are direct children of the evaluation area. */
.midcareer-evaluation > p {
	max-width: var(--mcn-reading-max);
}

/* --- the head of a view: yellow mark "Sicht n" + short name (K65 J) ------- */

.midcareer-evaluation .midcareer-view-title,
.midcareer-evaluation .midcareer-row-head {
	margin: 0 0 var(--rcc-spacing-element-xs);
	color: var(--mcn-color-ink);
	font-size: var(--rcc-font-size-bigger);
	font-weight: 600;
	line-height: var(--rcc-font-line-height-bigger);
	text-align: left;
}

.midcareer-evaluation .midcareer-view-head {
	display: inline-flex;
	align-items: center;
	gap: var(--rcc-spacing-element-sm);
}

/* Brand yellow carries no information on its own (A12): the rim and the dark text
 * do. */
.midcareer-evaluation .midcareer-view-mark {
	padding: var(--rcc-spacing-element-xs) var(--rcc-spacing-content-xs);
	border: 1px solid var(--mcn-color-ink);
	border-radius: var(--rcc-border-radius-sm);
	background-color: var(--mcn-color-brand);
	color: var(--mcn-color-on-brand);
	font-size: var(--rcc-font-size-smallest);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

/* Overrides the 500px/700px of .chartdiv-container from survey.css by being more
 * specific - not by !important. 250px is the height of the charts in target
 * picture 1; Survey.js fits the radius to the width left beside the labels. */
.midcareer-evaluation .midcareer-chart-container {
	position: relative;
	height: 250px;
	max-width: 100%;
}

.midcareer-evaluation .midcareer-chart-container > div {
	position: relative;
	width: 100%;
	height: 100%;
}

/* --- the legend ------------------------------------------------------------ */

/* The legend is a flat strip below the charts. It is written once, by Survey.js,
 * from the band labels of the survey config, with the one sentence on the short
 * axis name below it. */
.midcareer-evaluation .midcareer-legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rcc-spacing-element-sm) var(--rcc-spacing-element-lg);
	margin-top: var(--rcc-spacing-element-md);
	font-size: var(--rcc-font-size-smaller);
}

/* survey.css right-aligns the legend with an id selector (#chartdiv-legends,
 * flex-end). Only an id outweighs an id without !important - same house mechanism
 * as the print panel below. Target picture 1: the legend starts at the left edge. */
.midcareer-evaluation #chartdiv-legends {
	justify-content: flex-start;
}

.midcareer-evaluation .midcareer-legend-item {
	display: inline-flex;
	align-items: center;
	gap: var(--rcc-spacing-element-sm);
}

/* The rim is what makes the pale bands (yellow above all) readable on white -
 * the swatch colour itself comes from the chart scale and is set inline. */
.midcareer-evaluation .midcareer-legend-swatch {
	display: inline-block;
	width: var(--mcn-legend-swatch-size);
	height: var(--mcn-legend-swatch-size);
	border: var(--mcn-option-border) solid var(--mcn-color-ink);
	border-radius: var(--rcc-border-radius-sm);
}

/* The house sets `p { margin-bottom: var(--rcc-paragraph-after) !important }`
 * (A67, measured). Redefining the variable on the element gives the paragraph
 * its own spacing without a counter-!important. */
.midcareer-evaluation .midcareer-legend-note {
	--rcc-paragraph-after: 0;
	flex: 0 0 100%;
	margin: 0;
	color: var(--mcn-color-heading);
	font-size: var(--rcc-font-size-smallest);
}

/* --- the rows of hint cards (A18.7: three rows of four) -------------------- */

.midcareer-evaluation .midcareer-row-head {
	margin-top: var(--rcc-spacing-element-xl);
	margin-bottom: var(--rcc-spacing-content-sm);
	padding-top: var(--rcc-spacing-content-md);
	border-top: 1px solid var(--mcn-color-rule);
}

.midcareer-evaluation .midcareer-cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--rcc-spacing-element-md);
}

@media (min-width: 992px) {
	.midcareer-evaluation .midcareer-cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* The stroke colour is set inline by surveyHelper.js from the chart's band table:
 * it carries traffic-light meaning. The pale yellow alone comes from here - as a
 * 4px line on white #FFFF00 is 1.07:1 and would vanish. */
.midcareer-evaluation .midcareer-dimension {
	padding-top: var(--rcc-spacing-element-sm);
	border-top: var(--mcn-card-stroke) solid transparent;
}

.midcareer-evaluation .midcareer-dimension--pale {
	border-top-color: var(--mcn-color-brand-stroke);
}

.midcareer-evaluation .midcareer-dimension-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--rcc-spacing-element-xs);
}

.midcareer-evaluation .midcareer-dimension-name {
	margin: 0;
	color: var(--mcn-color-ink);
	font-size: var(--rcc-font-size-base);
	font-weight: 600;
	line-height: var(--rcc-font-line-height-base);
}

.midcareer-evaluation .midcareer-dimension-value {
	font-size: var(--rcc-font-size-bigger);
	font-weight: 700;
}

.midcareer-evaluation .midcareer-dimension-band {
	--rcc-paragraph-after: var(--rcc-spacing-element-xs);
	margin: 0;
	color: var(--mcn-color-heading);
	font-size: var(--rcc-font-size-smallest);
}

.midcareer-evaluation .midcareer-dimension-text {
	--rcc-paragraph-after: 0;
	margin: 0;
	font-size: var(--rcc-font-size-smaller);
}

/* The print panel is off-screen and feeds the PDF screenshot. Two things have to
 * be right, and the second one is easy to miss:
 *
 *   1. The three twins need a size of their own. survey.css sizes only the old
 *      single #diagram-print-panel-chart; without a rule amCharts draws into a
 *      zero-height box and the PDF shows an empty area.
 *   2. The panel itself is 800x1000px (survey.css). Three 360px charts stacked
 *      are 1080px tall - html2canvas would cut the third one off. They therefore
 *      sit in a row, and the panel gets the width for it.
 *
 * The panel rule hangs on the class .midcareer-print-panel--three, which
 * Survey.js sets when it actually draws three radars - not on the page as such.
 * Otherwise this file alone would already resize the panel while the old single
 * chart is still in it, and the PDF would be cut in exactly the window between
 * the CSS deploy and the code deploy. The rules are inert until the code lands.
 */
#diagram-print-panel.midcareer-print-panel--three {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	width: 1120px;
	height: 600px;
}

.midcareer-evaluation [id^="diagram-print-panel-chart-"] {
	position: relative;
	flex: 0 0 360px;
	width: 360px;
	height: 360px;
}

.midcareer-evaluation #diagram-print-panel-legends {
	flex: 0 0 100%;
	width: 100%;
	justify-content: flex-start;
}

/* ==========================================================================
   A18.3 — MIDAS: das Gesicht der rcc-Assistenz am Mid-Career-Navigator
   ==========================================================================

   Auf dieser Seite tritt die Assistenz als MIDAS auf. NUR hier: midcareer.css
   wird ueber `plugin.tx_rccsurvey.pidsMidcareer` allein auf der Navigator-Seite
   geladen. Der Treffpunkt und jede andere Seite mit der Assistenz bleiben
   unveraendert — das ist die Eingrenzung, die A12s Gelb braucht.
   `aiservices.css` gilt ueberall und wird hier NICHT angefasst, nur gelesen.

   Farben, aus dem :root oben. Zwei Dinge, die auseinanderzuhalten sind:

   Die EINLADUNG auf der Auswertung — nach A12s Artboard `AuswertungMidasHSLU`:
     Kasten         --mcn-color-surface-deep  #35363B  (abgedunkeltes Hero-Grau)
     Schrift        --mcn-color-brand         #FFFA06  (10.86:1)

   Die GESPRAECHSBLASEN — nach Peters Liste vom 28.08.2026, umgesetzt von A18.6
   (Einzelheiten und Kontrastwerte im Kommentar bei den Regeln weiter unten):
     MIDAS          Kasten #FFFA06, Schrift #1D1D1D                    15.20:1
     Nutzerin       Kasten #1D1D1D, Schrift weiss                      16.86:1
     Kopier-Symbole bei MIDAS #050000, bei der Nutzerin weiss

   ⚠️ Die Liste vom 28.08. ist juenger als A12s Artboard vom 25.08. und gilt fuer
   die Blasen. Wer A12 liest, findet dort noch das umgekehrte Bild (MIDAS dunkel
   mit gelber Stimme) — das war der Stand bis zum 28.08. und ist ueberholt.

   ⚠️ ZUR SPEZIFITAET, gemessen an Seite 724 am 27.08.2026:
   Die Reihenfolge im <head> ist survey.css (18) → midcareer.css (22) →
   aiservices.css (24). Bei GLEICHER Spezifitaet gewinnt also aiservices.css,
   weil sie spaeter kommt. Sie laesst sich nicht nach vorn holen: sie haengt
   als <link> im Fluid-Partial AiAssistant.html (:21) im Seitenkoerper,
   midcareer.css dagegen per TypoScript im Kopf.
   Deshalb tragen die `.aibot`-Regeln unten ein vorangestelltes `html` — das
   hebt die Spezifitaet um genau einen Typ-Selektor (0,3,1 gegen 0,3,0) und
   reicht. Kein `!important`, keine ID, keine tiefere Verschachtelung.
   ========================================================================== */

/* --- Die Einladung auf der Auswertung -------------------------------------
   Erzeugt von surveyHelper.js::renderCareerAssistantAnchor() als
   `.rcc-open-assistant.midcareer-assistant-invitation`; die Grundform steht in
   survey.css. Hier nur Farbe und Bild — Layout, Hover und Umbruch bleiben.
   Beide Klassen im Selektor, damit es nicht allein an der Ladereihenfolge
   gegenueber survey.css haengt. */

.rcc-open-assistant.midcareer-assistant-invitation {
	background-color: var(--mcn-color-surface-deep);
}

.rcc-open-assistant.midcareer-assistant-invitation .midcareer-assistant-invitation-text {
	color: var(--mcn-color-brand);
}

/* Das Bild wird per CSS getauscht, nicht im JavaScript: den `src` setzt
   surveyHelper.js, und diese Datei gehoert A18.1. `content` auf einem <img>
   ersetzt die Bildquelle in allen aktuellen Browsern; wo es nicht greift,
   bleibt das bisherige rcc_bot.svg stehen — also kein leeres Feld. */
.rcc-open-assistant.midcareer-assistant-invitation a img {
	content: url("../Images/midas_transparent.png");
	border-color: var(--mcn-color-brand);
	background-color: var(--mcn-color-ink);
}

/* --- Das Gespraech --------------------------------------------------------
   Der Dialog laeuft im bestehenden Offcanvas (#offcanvasAiAssistant, aus
   EXT:rcc). Das ist kein zweites MIDAS am rechten Rand und kein eigenes
   Overlay — es ist dasselbe Widget, das hier bloss MIDAS' Farben traegt.

   A18.6 (Peters Liste, 28.08.2026) hat die beiden Blasen getauscht. A18.3
   liess MIDAS dunkel sprechen (Kasten #35363B, Schrift gelb) und die Antwort
   der Nutzerin unveraendert. Jetzt gilt:

     MIDAS     Kasten boLd-Gelb    #FFFA06, Schrift boLd-Schwarz   15.20:1
     Nutzerin  Kasten boLd-Schwarz #1D1D1D, Schrift weiss          16.86:1

   Beide Werte gerechnet, nicht geschaetzt. Geaendert wird an Ort und Stelle
   statt in einem zweiten Block darunter — so hat jede Eigenschaft genau eine
   Fundstelle, und niemand muss die Ladereihenfolge im Kopf haben.

   Warum Regeln und nicht die Variable: `--rcc-color-bg-alt-1-light` traegt in
   aiservices.css tatsaechlich nur die Bot-Blase (:536 und :555). Die
   Person-Blase haengt aber an `--rcc-color-bg-1-medium` mit acht Vorkommen,
   davon sechs fremd — dort faerbte ein lokales Umdefinieren mit. Eine
   Variable hier und eine Regel dort waeren zwei Wege fuer dieselbe Sache. */

html .aibot .bubble.bot .text {
	background-color: var(--mcn-color-brand);
	color: var(--mcn-color-on-brand);
}

html .aibot .bubble.bot .tail {
	background-color: var(--mcn-color-brand);
}

html .aibot .bubble.person .text {
	background-color: var(--mcn-color-ink);
	color: var(--mcn-color-on-dark);
}

html .aibot .bubble.person .tail {
	background-color: var(--mcn-color-ink);
}

/* Absaetze, Listen und Hervorhebungen erben die Farbe nicht ueberall von
   .text — aiservices.css setzt fuer `li` eine eigene Regel. Seit A18.6
   traegt auch die Person-Blase eine eigene Schriftfarbe, also gilt das fuer
   beide. */
html .aibot .bubble.bot .text p,
html .aibot .bubble.bot .text li,
html .aibot .bubble.bot .text strong,
html .aibot .bubble.bot .text em,
html .aibot .bubble.person .text p,
html .aibot .bubble.person .text li,
html .aibot .bubble.person .text strong,
html .aibot .bubble.person .text em {
	color: inherit;
}

/* Verweise in den Blasen: Das Standard-Blau traegt weder auf dem Gelb noch
   auf dem Schwarz. Jede Blase bekommt die Schriftfarbe ihres eigenen Kastens
   und eine Unterstreichung, damit der Link nicht allein an der Farbe haengt.
   Die Person-Blase enthaelt selten Verweise — die Regel steht trotzdem, weil
   ein Link auf Schwarz sonst im Bootstrap-Blau unlesbar bliebe. */
html .aibot .bubble.bot .text a {
	color: var(--mcn-color-on-brand);
	text-decoration: underline;
}

html .aibot .bubble.person .text a {
	color: var(--mcn-color-on-dark);
	text-decoration: underline;
}

/* Kopier- und Vorlese-Symbole: schwarz statt Aktionsfarbe.

   Sie sitzen nicht neben der Blase, sondern in ihrer oberen Ecke: gemessen am
   28.08.2026 liegen 12 der 15 Pixel des Zeichens auf dem farbigen Kasten, 3
   ragen darueber hinaus. Auf MIDAS' Gelb traegt Schwarz (15.20:1). Auf der
   jetzt schwarzen Blase der Nutzerin traegt es nicht mehr — dort waere es
   1.06:1 und schlicht verschwunden. Deshalb sind die beiden hier getrennt.
   Der 3-Pixel-Ueberstand ins Weisse ist bei beiden derselbe und faellt nicht
   auf; das Zeichen selbst bleibt in seiner Blase lesbar. */
html .aibot .bubble.bot .tools {
	color: var(--mcn-color-ink-strong);
}

html .aibot .bubble.person .tools {
	color: var(--mcn-color-on-dark);
}

/* Das Gesicht der Assistenz — im Willkommensgruss (.welcome .face) und als
   kleines Symbol im Reiter „Dialog". Beide liegen in .aibot und zeigen heute
   rcc_bot.svg. Die Statusgrafik (.bubble.guide img) ist KEIN Gesicht und
   bleibt deshalb unberuehrt. */
html .aibot .face img {
	content: url("../Images/midas_transparent.png");
}

/* ==========================================================================
   A18.6 — Die Werkzeugleiste der Assistenz
   ==========================================================================

   Peters Liste vom 28.08.2026: die Knoepfe unter dem Eingabefeld schwarz, im
   Hover grau, Schrift weiss — und das Symbol zum Anhaengen ebenso.

   ⚠️ Der Griff sitzt bewusst NICHT auf `.aibot`. Die vier Aktions-Variablen
   werden in aiservices.css 38-mal gelesen: Reiter, Trennlinien, Verweise,
   Werkzeug-Symbole an den Blasen. Ein Block auf `.aibot` haette die ganze
   Assistenz von HSLU-Blau auf Schwarz umgefaerbt — mehr, als die Liste sagt.
   Er sitzt darum auf den beiden Leisten selbst.

   Es sind zwei, nicht eine: dieselbe Leiste ist im Partial zweimal angelegt,
   `.d-none.d-md-flex` fuer den Schirm ab 768 px (AiAssistant.html :866, die
   von Peter benannte) und `.d-flex.d-md-none` fuer das Telefon (:900). Beide
   enthalten dieselben vier Bedienelemente. Nur die erste zu faerben hiesse,
   das Telefon blau zu lassen — und 390 px ist ein Abnahmekriterium.

   Kein `html` davor wie bei den Blasen weiter oben: dort ging es darum,
   aiservices.css zu ueberstimmen. Hier wird eine Variable gesetzt, die
   ausser dem Haus-`:root` niemand deklariert; jede Klasse genuegt.

   Was der Block erreicht:
     Senden               Hintergrund #1D1D1D, Schrift weiss   16.86:1
     Hover darauf         Hintergrund #61636B, Schrift weiss    5.99:1
     Anhaengen-Symbol     Glyphe #1D1D1D, im Hover #61636B
   Das Grau ist BOLDs eigenes (#61636B, im :root oben als Ueberschriftgrau
   gefuehrt und als `--mcn-color-surface-dark` schon einmal als Flaeche
   verwendet). Das Haus-Grau `--rcc-color-bg-lightgray` #BBBBBB waere die
   naheliegende Wahl gewesen und ist gemessen verworfen: weisse Schrift
   darauf ergibt 1.92:1.

   ⚠️ Zwei Dinge faerbt der Block absichtlich nicht mit:

   1. `.chat-stop-button` behaelt sein Rot. aiservices.css :886 setzt es mit
      `!important` (`--rcc-color-alert-light`), und das Rot ist eine Bedeutung
      — Abbruch —, keine Hausfarbe. A12s Regel zu den vier Markerfarben gilt
      sinngemaess auch hier. Sein Kontrast (weiss auf #FF669F, 2.74:1) ist
      schon heute zu schwach; das gehoert repariert, aber nicht von dieser
      Karte und nicht nur auf dieser Seite. Steht unter Nebenfunden.
   2. Das `input[type=file]` selbst ist unsichtbar (aiservices.css :847-857:
      `opacity: 0`, 3x3 rem als Klickflaeche ueber dem Symbol). Sichtbar ist
      `.aibot .upload-container div` — und das liegt in der Leiste, haengt an
      denselben Variablen und ist damit erledigt.
   ========================================================================== */

.aibot article .col-12.d-none.d-md-flex,
.aibot article .col-12.d-flex.d-md-none {
	--rcc-color-bg-action: var(--mcn-color-ink);                /* #1D1D1D */
	--rcc-color-fg-action: var(--mcn-color-on-dark);            /* weiss */
	--rcc-color-bg-action-hover: var(--mcn-color-surface-dark); /* #61636B */
	--rcc-color-fg-action-hover: var(--mcn-color-on-dark);      /* weiss */
}

/* --- Die zwei kleinen Knoepfe ---------------------------------------------
   `Feld leeren` und `Auswahl loeschen` tragen `.btn-rcc-secondary`. Diese
   Klasse hat im Haus einen Fehler, der hier zwei Zeilen kostet — gemessen am
   28.08.2026 auf PROD, nicht vermutet:

   In _buttons.scss :195 fehlt dem `important` das Ausrufezeichen:

       background-color: var(--rcc-color-bg-1-light) important;   <- sic

   Weil rechts ein `var()` steht, faellt diese Zeile nicht schon beim Parsen
   weg. Sie gewinnt die Kaskade und wird erst beim Berechnen ungueltig — und
   eine Eigenschaft, die dabei ungueltig wird, faellt NICHT auf die vorige
   Zeile zurueck, sondern auf ihren Anfangswert. Fuer `background-color` ist
   das `transparent`. Gemessen: `rgba(0, 0, 0, 0)`. Die zwei Knoepfe haben im
   ganzen Haus keinen Hintergrund, sie leben von ihrer Schriftfarbe, und die
   setzt dieselbe Regel mit einem gueltigen `!important` auf die Aktionsfarbe.

   Daraus folgt beides:
   - Der Hintergrund muss hier geschrieben werden. Der Block oben allein wuerde
     nichts bewirken, weil die kaputte Zeile die Aktionsfarbe gar nicht erst
     durchlaesst. Ohne `!important`: (0,6,1) schlaegt die (0,4,0) des Hauses.
   - Die Schrift braucht ein `!important`, weil das Haus eines setzt. Sonst
     stuende die Aktionsfarbe auf ihrem eigenen Hintergrund. Das ist hier
     keine Bequemlichkeit, sondern die einzige Antwort auf ein `!important` —
     und der Wert kommt aus derselben Variablen wie bei allen anderen
     Knoepfen, es gibt keinen zweiten Ort.

   Der Haus-Fehler selbst wird hier NICHT behoben: er trifft jeden
   `.btn-rcc-secondary` im ganzen rcc, und diese Karte darf nur den
   MidCareer-Navigator anfassen. Er steht unter den Nebenfunden von A18.6. */

.aibot article .col-12.d-none.d-md-flex .btn-rcc.btn-rcc-secondary,
.aibot article .col-12.d-flex.d-md-none .btn-rcc.btn-rcc-secondary {
	background-color: var(--rcc-color-bg-action);
	color: var(--rcc-color-fg-action) !important;
}

/* --- Der Hover ------------------------------------------------------------
   Auch hier braucht es ein `!important`, und auch hier nicht aus Bequemlichkeit.
   Am Ende von style_hslu.css (:10151-10163, im Abschnitt „Advising end") steht:

       .btn-rcc:hover  { background-color: var(--rcc-color-bg-action) !important; }
       .btn-rcc        { background-color: var(--rcc-color-bg-action-hover); }

   Das Haus vertauscht die beiden Rollen und setzt den Hover mit `!important`.
   Die zweite Zeile verliert an Spezifitaet gegen (0,5,0) weiter oben, die
   erste gewinnt gegen alles ohne `!important`. Ergebnis: ein `.btn-rcc`
   traegt im Hover DIESELBE Farbe wie im Ruhezustand — im ganzen Haus.

   Am 28.08.2026 auf PROD nachgeprueft, an einer Seite OHNE midcareer.css
   (Treffpunkt, 717): der Senden-Knopf der Assistenz bleibt beim Ueberfahren
   auf rgb(68, 157, 194), obwohl `--rcc-color-bg-action-hover` einen anderen
   Wert hat. Es liegt also nicht am Navigator. Peters „hover grau" ist damit
   erst durch eine eigene Regel zu haben; ohne sie bliebe der Knopf schwarz.

   Der Stop-Knopf ist ausgenommen: sein Rot ist eine Bedeutung, kein Anstrich
   (siehe oben). Ohne das `:not()` wuerde er im Hover grau und im Ruhezustand
   rot — schlechter als beides. */
.aibot article .col-12.d-none.d-md-flex .btn-rcc:not(.chat-stop-button):hover,
.aibot article .col-12.d-flex.d-md-none .btn-rcc:not(.chat-stop-button):hover {
	background-color: var(--rcc-color-bg-action-hover) !important;
	color: var(--rcc-color-fg-action-hover) !important;
}