/**
 * KI-Reifegrad-Check UI — brand variables only (see shared/css/base.css).
 * Loaded after base.css + consent.css, before the site's own assets/style.css.
 */

:root {
  /* One reading column for the whole cluster: 36rem = 576px at the 16px body, measured 71
     characters per line. The same declaration stands in build-reifecheck.py's PROSE_CSS, which
     ki-reifecheck.de never loads — identical value, so the check screens on ki-etablieren.de
     (which load both) resolve to the same column. */
  --content-col: 36rem;
}

/* ── Header (no site nav — canon optics only) ─────────────────────── */
.rc-header { background: var(--storm-dark-teal); padding: 20px 0; }
.rc-header-inner { display: flex; align-items: center; justify-content: space-between; }
.rc-brand { display: inline-flex; }
.rc-aws { display: inline-flex; align-items: center; gap: 10px; color: var(--storm-white); font-size: .8rem; font-weight: 600; opacity: .9; }
.rc-aws img { height: 48px; width: 48px; }

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
  display: inline-block; background: var(--storm-teal); color: var(--storm-white);
  border: none; border-radius: 4px; padding: 14px 32px; font-size: 1rem; font-weight: 700;
  cursor: pointer; text-decoration: none; transition: background .2s, transform .15s;
}
.btn:hover { background: var(--storm-dark-teal); color: var(--storm-white); }
.btn.ghost { background: transparent; color: var(--storm-teal); border: 2px solid var(--storm-teal); padding: 12px 30px; }
.btn.ghost:hover { background: var(--storm-teal); color: var(--storm-white); }
.btn.sm { padding: 8px 20px; font-size: .85rem; }
/* REQ-006 E12: "Check starten" is the primary action of the start screen and has to look like it. */
.btn-xl { padding: 20px 52px; font-size: 1.2rem; border-radius: 6px; box-shadow: 0 10px 28px rgba(0,0,0,.22); }
.btn-xl:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .btn-xl:hover { transform: none; } }

/* ── Kicker ─────────────────────────────────────────────────────── */
/* Small uppercase labels carry the brand colour at a size where WCAG asks for 4.5:1. Teal
   (#00A486) reaches 2.85:1 on white, dark teal 12.6:1 — the accent moves down one brand token
   for labels only; buttons, borders and the radar keep the teal. */
.kick { display: inline-block; color: var(--storm-dark-teal); font-weight: 700; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .6em; }
.kick.on-dark { color: var(--storm-light-teal); }

/* ── Hero / start screen ────────────────────────────────────────── */
.rc-hero { background: var(--storm-gradient); color: var(--storm-white); text-align: center; }
.rc-hero h1 { color: var(--storm-white); }
/* Sven, 30.08.2026: the start screen used to stack four paragraphs of near-identical size, so the
   button drowned in prose. Rank is now h1 > one lead sentence > button > footnotes. Every rule is
   scoped `.rc-hero .x` on purpose: base.css's `.hero p` (0,1,1) outranks a bare `.rc-meta` (0,1,0)
   and was silently forcing all four paragraphs back to 18px. Line length is capped in `ch` because
   centred prose is what gets hard to read once it wraps, not the contrast (measured 11:1). */
.rc-hero .lead { color: var(--storm-white); opacity: .95; font-size: 19px; max-width: min(var(--content-col), 100%); margin: 0 auto .7em; }
.rc-hero .rc-meta { font-size: .82rem; opacity: .8; max-width: 60ch; margin: 0 auto 2.2em; }
.rc-modellink { font-size: .85rem; margin-top: 2em; margin-bottom: 0; }
.rc-modellink a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* Footnote level: the delivery path (UWG §5, must stay legible) and the "keine Angabe" hint.
   White at opacity .82 over the gradient right under the button measures 5.3:1 (sampled from the
   rendered screenshot at 1440px, not estimated) — above the 4.5:1 floor. */
.rc-hero .rc-deliver { font-size: .78rem; line-height: 1.55; opacity: .82; max-width: 60ch; margin: 1.8em auto 0; }
.rc-hero .rc-hint { font-size: .78rem; line-height: 1.55; opacity: .82; max-width: 60ch; margin: .35em auto 0; }
.rc-hero .rc-meta, .rc-hero .rc-modellink, .rc-hero .rc-hint, .rc-hero .rc-deliver { color: var(--storm-white); }
.rc-hero .rc-modellink a { opacity: .85; }
.rc-hero .rc-modellink a:hover { opacity: 1; }

/* ── Progress bar ───────────────────────────────────────────────── */
.rc-progress { background: var(--storm-off-white); padding: 16px 0; margin-bottom: 28px; }
.rc-progress .container { display: flex; align-items: center; gap: 16px; }
.rc-progress span { font-size: .85rem; color: var(--storm-dark-gray); white-space: nowrap; }
.bar { flex: 1; height: 6px; background: var(--storm-light-gray); border-radius: 3px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--storm-teal); transition: width .25s; }

/* ── Radar legend (teaser only) ─────────────────────────────────── */
/* The eight axes carry a digit and nothing else. Without this the profile is a shape the reader
   cannot attach to anything. Name only — the stage per dimension is the report's job. */
.rc-radarcol { min-width: 0; }
.rc-legend { list-style: none; margin: 1.2em 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; }
.rc-legend li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: center;
  font-size: .82rem; line-height: 1.35; color: #46555c; }
.rc-legendnum { display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; background: var(--storm-dark-teal);
  color: var(--storm-white); font-size: .72rem; font-weight: 700; }
@media (max-width: 520px) { .rc-legend { grid-template-columns: 1fr; } }

/* ── Question screen ────────────────────────────────────────────── */
/* One question is one task. The column is capped so the briefing, the question and the answers
   share one edge and one reading measure — at 1140px the briefing ran ~150 characters per line,
   about twice what the eye tracks back reliably. Progress bar and body use the same cap so the
   two line up, and the cap is the cluster's column plus the container's own 2x24px padding, so
   the question screen lands on exactly the same two edges as every content page. */
.rc-question { padding: 48px 0 64px; }
.rc-question .container { max-width: calc(var(--content-col) + 48px); }
.qdim { color: var(--storm-dark-teal); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .6em; }
.qtext { margin-bottom: .3em; }
.qabout { border-left: 3px solid var(--storm-teal); background: var(--storm-off-white);
  padding: 12px 16px; margin: 0 0 1.2em; font-size: .92rem; line-height: 1.65; color: #46555c; }
.qcrit { color: #5a6a72; margin-bottom: 1.5em; }
/* Two columns, not an inline digit: the stage numbers line up under each other and the sentences
   keep one left edge, so the five options read as a ladder instead of five separate boxes. */
.opt {
  display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start;
  width: 100%; text-align: left; background: var(--storm-white);
  border: 1px solid var(--storm-light-gray); border-radius: 6px; padding: 14px 18px;
  margin-bottom: 10px; font-size: 1rem; font-family: inherit; color: var(--storm-dark-gray);
  cursor: pointer; transition: border-color .15s, background .15s;
}
.optnum { font-weight: 700; color: var(--storm-teal); font-variant-numeric: tabular-nums;
  line-height: inherit; }
.opt.sel .optnum { color: var(--storm-dark-teal); }
/* "Keine Angabe möglich" sits outside the 1–5 ladder, so its gutter stays empty rather than
   carrying a sixth number that would read as a sixth stage. */
.opt.na { grid-template-columns: 26px 1fr; }
.opt:hover { border-color: var(--storm-teal); }
/* The chosen answer stays marked until "Weiter" confirms it (REQ-006 E7) — no timed jump, so the
   selection is a state, not a flash. */
.opt.sel { border-color: var(--storm-teal); background: rgba(0,164,134,.14); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--storm-teal); }
.opt.sel .opttext::after { content: ' ✓'; color: var(--storm-teal); font-weight: 900; float: right;
  padding-left: 10px; }
@media (prefers-reduced-motion: no-preference) { .opt { transition: border-color .15s, background .15s, box-shadow .15s; } }
.opt.na { color: #5a6a72; font-style: italic; }
.rc-nav { display: flex; gap: 12px; align-items: center; margin-top: 1.5em; }
.rc-nav [data-action="next"] { margin-left: auto; }
.rc-nav button[disabled] { opacity: .45; cursor: not-allowed; }
.rc-nav button[disabled]:hover { background: var(--storm-teal); }

/* ── Result screen ──────────────────────────────────────────────── */
.rc-result { padding: 48px 0 72px; }
/* Same three-track column as the content pages: heading, indication, quote, form, advert and the
   two closing blocks all stand in one column with one left edge; only the radar-and-list figure
   opts into the full container, because a profile chart beside eight dimensions needs the room. */
.rc-result > .container {
  display: grid;
  grid-template-columns:
    [wide-start] minmax(0, 1fr)
    [col-start] min(var(--content-col), 100%)
    [col-end] minmax(0, 1fr) [wide-end];
}
.rc-result > .container > * { grid-column: col; min-width: 0; }
.rc-result > .container > .rc-result-grid { grid-column: wide; }
.rc-next p, .rc-book p, .rc-report > p { line-height: 1.7; }
/* Below body size the column's 576px runs 80 characters and more, so the small blocks keep
   their own measure in `ch`. They stay on the column's left edge; only the right edge moves. */
.rc-indication { color: #5a6a72; font-size: .9rem; max-width: 58ch; }
.rc-result-grid { display: grid; grid-template-columns: minmax(280px, 420px) minmax(0, var(--content-col));
  gap: 32px; align-items: start; justify-content: center; margin: 2em 0; }
.rc-radar { width: 100%; height: auto; }
.rc-ring { fill: none; stroke: var(--storm-light-gray); }
.rc-profile { fill: rgba(0,164,134,.25); stroke: var(--storm-teal); stroke-width: 2; }
.rc-axis-dot { fill: var(--storm-dark-teal); }
.rc-axis { fill: var(--storm-white); font-size: 13px; font-weight: 700; }

/* Result list: the leading number is the same digit that sits on the radar axis, so the two
   halves of .rc-result-grid can be read against each other. */
.rc-stages { list-style: none; margin: 0; padding: 0; }
.rc-stages li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start;
  border-bottom: 1px solid var(--storm-light-gray); padding: 14px 0; }
.rc-stages li:last-child { border-bottom: none; }
.rc-num { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 50%; background: var(--storm-dark-teal); color: var(--storm-white);
  font-size: .85rem; font-weight: 700; }
.rc-dimbody { min-width: 0; }
.rc-dimname { display: block; font-weight: 700; color: var(--storm-dark-teal); line-height: 1.35; }
.rc-stage { display: block; margin-top: 3px; font-size: .92rem; line-height: 1.55; color: #46555c; }
.rc-stage b { color: var(--storm-dark-teal); font-weight: 700; }
.rc-stage.rc-na { font-style: italic; color: #7a8a92; }
.rc-flag { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 10px;
  background: var(--storm-teal); color: var(--storm-white); font-size: .68rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; vertical-align: 2px; }
.rc-stages li.is-bottleneck { background: rgba(0,164,134,.06); border-left: 3px solid var(--storm-teal);
  padding-left: 12px; grid-template-columns: 30px 1fr; }
.rc-stages li.is-bottleneck .rc-num { background: var(--storm-teal); }
.rc-jump, .rc-gq { color: #5a6a72; font-size: .9rem; margin: .4em 0 0; max-width: 58ch; }
.rc-bottleneck { margin-bottom: 1.5em; }
.rc-warn { color: #c0392b; font-weight: 600; }
.rc-even { color: #5a6a72; font-size: .9rem; }

/* Overall value — methodology.yaml: never shown without the profile next to it. */
.rc-overall { margin: 0 0 1.4em; }
.rc-overallline { margin: 0; font-size: 1.15rem; color: var(--storm-dark-teal); }
.rc-overallstage { margin: .2em 0 0; color: #5a6a72; font-size: .95rem; }

/* Teaser column (gate page): profile plus overall value, and an honest sentence about what the
   mailed result adds. No stage per dimension, no bottleneck, no measure (REQ-006 AC1). */
.rc-teaser p { margin: 0; line-height: 1.7; color: #46555c; }

/* Art. 4 AI Act note — a legal duty, not a maturity finding, so it does not borrow the teal of
   the model but a neutral, sober frame. */
.rc-aiact { border: 1px solid var(--storm-light-gray); border-left: 4px solid var(--storm-dark-teal);
  border-radius: 6px; background: var(--storm-off-white); padding: 20px 24px; margin: 0 0 1.6em; }
.rc-aiact h3 { margin: 0 0 .4em; font-size: 1.05rem; color: var(--storm-dark-teal); }
.rc-aiact p { margin: 0; font-size: .92rem; line-height: 1.7; }

.rc-stage5 { color: #5a6a72; font-size: .92rem; line-height: 1.7; margin: 0 0 1.5em; max-width: 58ch; }
.rc-reading { border-left: 3px solid var(--storm-teal); margin: 0 0 1.5em; padding: .2em 0 .2em 1.2em; font-style: italic; color: var(--storm-dark-teal); }
.rc-codeline { font-size: .9rem; color: #5a6a72; margin-bottom: 2em; }
.rc-codeline code { background: var(--storm-off-white); padding: 3px 8px; border-radius: 4px; font-size: .85rem; }

/* ── Report form ────────────────────────────────────────────────── */
.rc-report { background: var(--storm-off-white); border-radius: 8px; padding: 32px; margin-bottom: 2.5em; }
.rc-report label { display: block; font-weight: 600; margin-bottom: .4em; }
.rc-report input[type="email"], .rc-report input[type="text"], .rc-report input[type="tel"] {
  width: 100%; max-width: 400px; padding: 12px 14px; border: 1px solid var(--storm-light-gray);
  border-radius: 4px; font-size: 1rem; margin-bottom: 1em; font-family: inherit;
}
.rc-report input.rc-hp { position: absolute; left: -9999px; }
.rc-fieldhint { margin: -.7em 0 1.2em; font-size: .82rem; color: #5a6a72; }
.rc-art13 { font-size: .8rem; color: #5a6a72; max-width: 58ch; }
.rc-check { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; font-size: .9rem; margin-bottom: .8em; cursor: pointer; }
.rc-check input { margin-top: 3px; }
.rc-form-msg { font-size: .9rem; min-height: 1.2em; }
.rc-form-msg.rc-err { color: #c0392b; font-weight: 600; }
.rc-form-msg.rc-ok { display: block; margin-top: 1.2em; padding: 16px 18px; border-left: 4px solid var(--storm-teal);
  border-radius: 4px; background: var(--storm-white); color: var(--storm-dark-teal);
  font-size: 1rem; font-weight: 700; line-height: 1.6; }
.rc-locked { margin: .6em 0 0; padding-left: 22px; font-size: .82rem; color: #5a6a72; }
.rc-hp { position: absolute; left: -9999px; }

/* ── Next-step CTA ──────────────────────────────────────────────── */
.rc-next { border-top: 1px solid var(--storm-light-gray); padding-top: 2em; }
.rc-book { border-top: 1px solid var(--storm-light-gray); margin-top: 2em; padding-top: 2em; }
/* One filled button per screen. Before the address is sent the gate is the job, so the booking
   button and the event advert are outlined there; after it (mode=ergebnis) the booking button is
   the remaining next step and keeps its fill. */
[data-mode="check"] .rc-book .btn,
.rc-result .roadshow-cta a {
  background: transparent; color: var(--storm-teal); border: 2px solid var(--storm-teal);
  padding: 12px 30px;
}
[data-mode="check"] .rc-book .btn:hover,
.rc-result .roadshow-cta a:hover { background: var(--storm-teal); color: var(--storm-white); }

@media (max-width: 720px) {
  .rc-result-grid { grid-template-columns: 1fr; }
}

/* While the sixteen questions run, the footer keeps only what has to stay reachable: the legal
   links and the consent control. The fourteen network links are fourteen exits from the funnel
   and they sit directly under every question. body.rc-answering is set by the engine. */
body.rc-answering .footer-sites,
body.rc-answering .footer-logo,
body.rc-answering .footer-tagline,
body.rc-answering .footer-entity,
body.rc-answering .footer-divider { display: none; }
body.rc-answering footer[role="contentinfo"] { padding-top: 20px; padding-bottom: 20px; }

@media print {
  header, .rc-next, .rc-book, #rc-report-form, #rc-profile-form, [data-action="print"], #sr-consent-overlay, footer { display: none; }
  /* The result heading is focused on load so screen readers announce it; on paper that ring is
     just a box drawn around the headline. */
  [tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }
  /* A dimension is one unit — stage, guiding question and next step belong on the same page. */
  .rc-stages li, .rc-aiact, .rc-reading { break-inside: avoid; }
  /* On paper the column is 180mm, not 1440px: the screen's radar-beside-list grid squeezed the
     list into a 35-character strip and left the whole left half of every page blank. The profile
     prints as one column — radar first, then the eight dimensions at full width. */
  .rc-result > .container, .rc-result-grid { display: block; }
  .rc-radar { display: block; width: 100%; max-width: 300px; margin: 0 auto 1.5em; }
  .rc-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}