/* Money-Mindset-Challenge — Koerting Gold Edition (design system
   https://claude.ai/artifact/5tB7LKJZuz6TGDs3w5mpGD). Black, gold, white,
   one mode only (Plan §3 Gestaltung). Values come only from tokens:
   /tokens.css (Koerting set) and /challenge-edition.css (edition mirror).
   The components are ports of the system's bundle.css (kg-*) onto the
   server-rendered ch-* markup; numbers that stay here are component
   geometry from that file. No gradients, no glow except on hover of the
   primary and the Störer; pink only for the Störer of the personal page
   (Birgit 28.10.). */

/* ---------- base ---------- */

html { color-scheme: dark; scrollbar-gutter: stable; }

.ch-body {
  /* Funkeln: the four-pointed star of the system component, as a mask
     (shape only, the colour comes from the token behind it). */
  --ch-funkeln: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cpath d='M0-50C3.2-14 14-3.2 50 0 14 3.2 3.2 14 0 50-3.2 14-14 3.2-50 0-14-3.2-3.2-14 0-50Z'/%3E%3C/svg%3E");
  --ch-haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.6 9.6 1 6l1.2-1.2 2.4 2.4 5.2-5.2L11 3.2z'/%3E%3C/svg%3E");
  --ch-pfeil-unten: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 4.2 2.2 3 6 6.8 9.8 3 11 4.2l-5 5z'/%3E%3C/svg%3E");
  --ch-schloss: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 5V3.6a2.5 2.5 0 0 1 5 0V5h.7c.44 0 .8.36.8.8v4.4c0 .44-.36.8-.8.8H2.8a.8.8 0 0 1-.8-.8V5.8c0-.44.36-.8.8-.8h.7Zm1.2 0h2.6V3.6a1.3 1.3 0 0 0-2.6 0V5Z'/%3E%3C/svg%3E");
  --ch-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
  /* The frame of every challenge page (Filip 09.11.: wider than the reading
     column): the container width of the design system — set and edition
     share it. Running text keeps its measure (65ch) inside. */
  --ch-breite: var(--container);
  --ch-spalte: 340px;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-1);
  color: var(--text-200);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ch-body ::selection { background: var(--gold); color: var(--on-gold); }

.ch-body :focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.ch-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ch-skip-link {
  position: absolute; left: var(--space-md); top: -100px;
  z-index: 100; padding: var(--space-sm) var(--space-lg);
  border-radius: var(--r-pill);
  background: var(--gold); color: var(--on-gold);
  font-weight: 700; text-decoration: none;
}
.ch-skip-link:focus-visible { top: var(--space-md); }

/* ---------- frame ---------- */

.ch-header {
  /* above the Goldwirbel's particles, which pass behind it */
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) max(var(--space-lg), calc((100% - var(--ch-breite)) / 2));
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-1);
}

/* The system's own files (Logos group, public/edition/logos/): the white
   lockup in the header, the gold KI mark in the footer and as favicon. */
.ch-logo {
  display: block;
  flex: none;
  width: 150px;
  height: auto;
}

.ch-marke {
  font: 500 var(--fs-xs)/1.4 var(--font-display);
  letter-spacing: var(--track-edition-name);
  text-transform: uppercase;
  text-align: right;
  color: var(--text-200);
}

.ch-gold { color: var(--signal-text); }

/* The frame is centred by padding, as in the header, so main spans the
   window: it clips the Goldwirbel at the window edge without widening the
   page (clip, unlike hidden, keeps y visible). */
.ch-main {
  flex: 1;
  width: 100%;
  padding: var(--space-2xl) max(var(--space-lg), calc((100% - var(--ch-breite)) / 2)) var(--space-3xl);
  box-sizing: border-box;
  overflow-x: clip;
}

.ch-footer {
  display: grid;
  justify-items: center;
  gap: var(--space-md);
  padding: var(--space-xl) var(--space-lg) var(--space-2xl);
  border-top: 1px solid var(--border-subtle);
  text-align: center;
}

.ch-footer__zeichen {
  display: block;
  width: auto;
  height: 28px;
}

/* CopyrightZeile: verbatim, never shortened. */
.ch-copyright {
  max-width: var(--reading);
  margin: 0;
  font: var(--type-copyright);
  color: var(--text-400);
}

/* Legal links (privacy policy, imprint): calm, gold on hover. */
.ch-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs) var(--space-lg);
  font: var(--type-body-sm);
}
.ch-footer__links a {
  color: var(--text-300);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.ch-footer__links a:hover { color: var(--gold-hell); }

/* ---------- type ---------- */

/* Eyebrow: gold mono caps, optional 40 px gold line in front. */
.ch-eyebrow {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 var(--space-md);
  font: var(--type-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--signal-text);
}
.ch-eyebrow--linie::before {
  content: '';
  flex: none;
  width: 40px;
  height: 1px;
  margin-top: .8em;
  background: var(--gold);
}

.ch-titel {
  margin: 0 0 var(--space-lg);
  font: var(--type-h1);
  font-size: clamp(28px, 4vw, var(--fs-3xl));
  letter-spacing: var(--track-h1);
  color: var(--text-100);
  text-wrap: balance;
}

/* GoldWort: one accent word per headline, flat gold. */
.ch-goldwort { color: var(--signal-text); }

/* Funkeln at the end of the title (decorative, max. three per view). */
.ch-titel--funkeln::after {
  content: '';
  display: inline-block;
  width: .48em;
  height: .48em;
  margin-left: .22em;
  vertical-align: .62em;
  background: var(--gold);
  -webkit-mask: var(--ch-funkeln) no-repeat center / contain;
  mask: var(--ch-funkeln) no-repeat center / contain;
}

.ch-h2 {
  margin: 0 0 var(--space-md);
  font: var(--type-h2);
  font-size: clamp(26px, 3.4vw, var(--fs-2xl));
  letter-spacing: var(--track-h2);
  color: var(--text-100);
  text-wrap: balance;
}

/* Rubric inside cards and sections: the eyebrow without its line. */
.ch-h3 {
  margin: 0 0 var(--space-md);
  font: var(--type-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--signal-text);
}

.ch-lead {
  max-width: 600px;
  margin: 0 0 var(--space-md);
  font: var(--type-lead);
  color: var(--text-300);
}
/* No orphans in running text; headline-like classes balance instead. */
:where(.ch-body) :where(p, li) { text-wrap: pretty; }

.ch-hint { margin: var(--space-sm) 0 0; font: var(--type-body-sm); color: var(--text-400); }
.ch-hint code { font-family: var(--font-mono); letter-spacing: .12em; color: var(--signal-text); }

/* Errors carry ✕ and a sentence, never colour alone. */
.ch-alert { margin: var(--space-sm) 0 0; min-height: 1.55em; font: var(--type-body-sm); color: var(--alert-text); }
.ch-alert:empty { min-height: 0; margin: 0; }
.ch-alert:not(:empty)::before { content: '✕\00a0'; content: '✕\00a0' / ''; }

/* Placeholder marker: visible until Birgit's own texts are in. */
.ch-entwurf {
  display: inline-block;
  margin: 0 0 var(--space-lg);
  padding: 2px var(--space-sm);
  border: 1px dashed var(--gold-line);
  border-radius: var(--r-xs);
  font: var(--type-meta);
  color: var(--text-300);
}

/* Test mode of the coaching team (signed link, test runs): the same dashed
   line as the draft marker, on its own surface — above the start's swirl. */
.ch-testleiste {
  position: relative;
  z-index: 1;
  margin: 0 0 var(--space-xl);
  padding: var(--space-md) var(--space-lg);
  border: 1px dashed var(--gold-line);
  border-radius: var(--r-md);
  background: var(--bg-2);
  font: var(--type-body-sm);
  color: var(--text-300);
}
.ch-testleiste__titel {
  margin: 0 0 var(--space-sm);
  font: var(--type-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--signal-text);
}
.ch-testleiste__zeile { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.ch-testleiste__zeile .ch-select { flex: 1 1 14rem; }
.ch-testleiste--schmal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
  align-items: center;
  padding: var(--space-sm) var(--space-md);
}
.ch-testleiste--schmal .ch-testleiste__titel { margin: 0; }
.ch-analyse-form .ch-testleiste { margin-bottom: var(--space-md); }
/* Sample businesses of a test run: the choice takes the free width. */
.ch-testdaten .ch-select { flex: 1 1 16rem; min-width: 0; }

/* ---------- Button ---------- */

.ch-btn,
.ch-btn-ghost {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: 48px;
  padding: 12px 28px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font: 700 var(--fs-md)/1.2 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease),
    box-shadow var(--t) var(--ease), transform var(--t) var(--ease), color var(--t) var(--ease);
}

/* A button waiting for the script stays hidden (display above would win). */
.ch-btn[hidden],
.ch-btn-ghost[hidden] { display: none; }

/* primary: one per view — gold, dark text, glow only on hover. */
.ch-btn { background: var(--gold); color: var(--on-gold); }
.ch-btn:hover { background: var(--gold-hell); box-shadow: var(--glow-gold); transform: translateY(-1px); }
/* Busy (label switches to „Wird …"): stays readable, just inert. */
.ch-btn:disabled { background: var(--gold); box-shadow: none; transform: none; cursor: progress; }

.ch-btn-ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-200);
  font-weight: 500;
}
.ch-btn-ghost:hover { background: var(--bg-3); color: var(--text-100); }

/* The forward signal of the system (→), decorative. */
.ch-btn--pfeil::after {
  content: '→';
  content: '→' / '';
  transition: transform var(--t) var(--ease);
}
.ch-btn--pfeil:hover::after { transform: translateX(3px); }
.ch-btn--pfeil:disabled::after { content: none; }

/* ---------- Field, Input ---------- */

.ch-input {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  background: var(--bg-3);
  color: var(--text-100);
  font: 400 var(--fs-md)/1.4 var(--font-body);
  transition: border-color var(--t-fast) var(--ease);
}
.ch-input::placeholder { color: var(--text-600); }
.ch-input:hover { border-color: var(--border-strong); }
.ch-input:focus { outline: none; border-color: var(--border-active); }
.ch-input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.ch-textarea {
  min-height: 0;
  line-height: 1.55;
  resize: vertical;
}
.ch-textarea:disabled { opacity: .5; cursor: not-allowed; }

/* Select with the system's own chevron (the native one stays hidden). */
.ch-select { position: relative; display: block; }
.ch-select select { appearance: none; -webkit-appearance: none; padding-right: 48px; cursor: pointer; }
.ch-select select option { background: var(--bg-3); color: var(--text-100); }
.ch-select::after {
  content: '';
  position: absolute;
  top: 50%; right: 18px;
  width: 12px; height: 12px;
  margin-top: -6px;
  background: var(--text-300);
  -webkit-mask: var(--ch-pfeil-unten) no-repeat center / contain;
  mask: var(--ch-pfeil-unten) no-repeat center / contain;
  pointer-events: none;
}

.ch-form {
  display: grid;
  gap: var(--space-lg);
}
.ch-form .ch-btn { justify-self: start; }
/* An empty error line takes no grid row (out of flow, but still in the
   accessibility tree as the live region it is). */
.ch-form > .ch-alert { margin: 0; }
.ch-form > .ch-alert:empty { position: absolute; }

/* Card: the calm surface for things that belong together; gold-line is
   the card frame at rest. */
.ch-karte {
  box-sizing: border-box;
  padding: var(--space-xl) var(--space-lg);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-lg);
  background: var(--bg-2);
  box-shadow: var(--shadow-md);
}

.ch-feld { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
.ch-feld > label:not(.ch-check),
.ch-modelle-feld legend {
  font: 500 var(--fs-sm)/1.4 var(--font-body);
  color: var(--text-300);
}
.ch-feld .ch-hint { margin: 0; }

/* Checkbox: dark box, gold when ticked, dark tick on gold. */
.ch-check {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font: var(--type-body-sm);
  color: var(--text-300);
  cursor: pointer;
}
.ch-check input {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-content: center;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  box-sizing: border-box;
  border: 1px solid var(--text-400);
  border-radius: var(--r-xs);
  background: var(--bg-3);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.ch-check input::before {
  content: '';
  width: 12px;
  height: 12px;
  background: var(--on-gold);
  -webkit-mask: var(--ch-haken) no-repeat center / contain;
  mask: var(--ch-haken) no-repeat center / contain;
  transform: scale(0);
  transition: transform var(--t-fast) var(--ease);
}
.ch-check input:hover { border-color: var(--border-active); }
.ch-check input:checked { background: var(--gold); border-color: var(--gold); }
.ch-check input:checked::before { transform: scale(1); }
.ch-check input:disabled { opacity: .5; cursor: not-allowed; }

/* Consent: checkbox plus the link to the privacy policy, which lines up
   with the label text (20 px box + 12 px gap). */
.ch-einwilligung { display: grid; gap: var(--space-xs); }
/* Two consents before the test (29.10.): a little air between them. */
.ch-einwilligung .ch-check + .ch-check { margin-top: var(--space-xs); }
.ch-einwilligung__mehr { margin: 0; padding-left: 32px; }
/* The same link in a sentence: the link box of the personal page, the AI
   note of the analysis form. */
.ch-einwilligung__mehr a,
.ch-link__datenschutz a,
.ch-analyse-ki a {
  color: var(--signal-text);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.ch-einwilligung__mehr a:hover,
.ch-link__datenschutz a:hover,
.ch-analyse-ki a:hover { color: var(--gold-hell); }

/* ---------- start ---------- */

.ch-hero { position: relative; isolation: isolate; margin-bottom: var(--space-xl); }
.ch-hero .ch-lead:last-of-type { margin-bottom: 0; }

/* Goldwirbel (design system ornament): once per view, beside the end of
   the title, never behind running text (the lead stays left of it). A CSS
   background on purpose: browsers without WebP show none. The image's
   ring spans about 45 % of its width, the rest is particles; past the
   window edge .ch-main clips it, the header covers its top. */
.ch-hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -20px;
  right: -100px;
  width: 270px;
  aspect-ratio: 1;
  background: url('/edition/ornamente/goldwirbel.webp') no-repeat center / contain;
  pointer-events: none;
}
@media (min-width: 720px) {
  .ch-hero::before { top: -170px; right: -290px; width: 560px; }
  .ch-hero .ch-lead { max-width: 520px; }
}

/* Facts as Pills (neutral): labels, never clickable. */
.ch-fakten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
}
.ch-fakten li {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-pill);
  background: var(--bg-3);
  font: 500 var(--fs-xs)/1.5 var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-300);
}

.ch-wieder { margin: 0 0 var(--space-lg); }
.ch-wieder[hidden] { display: none; }

.ch-start--leer { padding-top: var(--space-xl); }

/* ---------- the frame of every challenge page (meetings 09.11.) ----------
   Main column (what to do now) beside the side column "Deine Challenge"
   (live dates, VIP, material); on narrower screens the side column follows
   the main one. The test itself keeps the reading width. */
.ch-raster { display: grid; gap: var(--space-2xl); }
.ch-raster__haupt { min-width: 0; }
.ch-raster__neben {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-lg);
  align-content: start;
}
@media (min-width: 1024px) {
  .ch-raster {
    grid-template-columns: minmax(0, 1fr) var(--ch-spalte);
    align-items: start;
    column-gap: var(--space-2xl);
  }
}
.ch-test { max-width: var(--reading); margin-inline: auto; }

/* Cards of the side column: calm surfaces, the VIP ones framed in gold. */
.ch-neben__karte {
  box-sizing: border-box;
  min-width: 0;
  padding: var(--space-lg);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  background: var(--bg-2);
}
.ch-neben__karte--gold { border-color: var(--gold-line); }
.ch-neben__karte > :last-child { margin-bottom: 0; }
.ch-neben__karte .ch-eyebrow { margin-bottom: var(--space-sm); }
.ch-neben__titel {
  margin: 0 0 var(--space-sm);
  font: 700 var(--fs-xl)/1.2 var(--font-display);
  letter-spacing: -.01em;
  color: var(--text-100);
  text-wrap: balance;
}
.ch-neben__text { margin: 0 0 var(--space-lg); font: var(--type-body-sm); color: var(--text-300); }
.ch-vip.ch-neben__karte { scroll-margin-top: var(--space-lg); }

/* Live: the next date large (gold while it runs), all dates as a list. */
.ch-live__naechster { display: grid; gap: 2px; margin: 0 0 var(--space-md); }
.ch-live__marke {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font: var(--type-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--text-300);
}
.ch-live__marke--jetzt { color: var(--signal-text); }
.ch-live__marke--jetzt::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  animation: ch-live-puls 1.6s var(--ease) infinite;
}
@keyframes ch-live-puls { 50% { opacity: .35; } }
.ch-live__wer { font: 700 var(--fs-lg)/1.3 var(--font-display); color: var(--text-100); }
.ch-live__knopf { width: 100%; white-space: normal; }
.ch-live__ohne { margin: 0; color: var(--text-300); }
.ch-live__liste {
  display: grid;
  gap: var(--space-sm);
  margin: var(--space-lg) 0 0;
  padding: var(--space-md) 0 0;
  border-top: 1px solid var(--border-subtle);
  list-style: none;
}
.ch-live__tag {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  column-gap: var(--space-sm);
  font: var(--type-body-sm);
}
.ch-live__nr {
  grid-row: span 2;
  padding-top: 3px;
  font: var(--type-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--signal-text);
}
.ch-live__wann { color: var(--text-100); }
.ch-live__was { color: var(--text-300); }
.ch-live__tag--vorbei :is(.ch-live__nr, .ch-live__wann, .ch-live__was) { color: var(--text-400); }
.ch-live__kalender { margin: var(--space-md) 0 0; font: var(--type-body-sm); }

/* Text links (calendar, material, VIP files): gold, ↗ for outside pages. */
.ch-textlink { color: var(--signal-text); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.ch-textlink:hover { color: var(--gold-hell); }
.ch-textlink--extern::after { content: ' ↗'; content: ' ↗' / ''; }
.ch-linkliste { display: grid; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; font: var(--type-body-sm); }
.ch-liste-folgt { color: var(--text-300); }
.ch-textknopf {
  padding: 0;
  border: 0;
  background: none;
  font: var(--type-body-sm);
  color: var(--signal-text);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  cursor: pointer;
}
.ch-textknopf:hover { color: var(--gold-hell); }

/* Start page before day 1 and after the challenge: calm cards under the hero. */
.ch-hero__aktion { margin: var(--space-lg) 0 0; }
.ch-karte--ruhig { padding: var(--space-lg); border-color: var(--border-soft); box-shadow: none; }
.ch-raster__haupt > .ch-karte + .ch-karte { margin-top: var(--space-lg); }
.ch-karte--ruhig p { max-width: 65ch; margin: 0; color: var(--text-200); }
.ch-haken { display: grid; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.ch-haken li { position: relative; padding-left: 28px; color: var(--text-200); }
.ch-haken li::before {
  content: '';
  position: absolute;
  top: .3em;
  left: 0;
  width: 16px;
  height: 16px;
  background: var(--gold);
  -webkit-mask: var(--ch-haken) no-repeat center / contain;
  mask: var(--ch-haken) no-repeat center / contain;
}

/* "Link vergessen?": folded below the start, the thanks in gold. */
.ch-link-anfordern { margin-top: var(--space-xl); }
.ch-link-anfordern[hidden] { display: none; }
.ch-link-anfordern .ch-form { margin-top: var(--space-md); max-width: 480px; }
.ch-link-anfordern .ch-form .ch-btn-ghost { justify-self: start; }
.ch-link-anfordern__danke { margin: 0; font: var(--type-body-sm); color: var(--signal-text); }
.ch-link-anfordern__danke[hidden] { display: none; }

/* The offer after the pitch (phase "angebot"): gold frame, its button, the
   time left in mono figures. */
.ch-angebot {
  display: grid;
  gap: var(--space-md) var(--space-xl);
  margin: 0 0 var(--space-xl);
  padding: var(--space-lg);
  border: 1px solid var(--gold);
  border-radius: var(--r-lg);
  background: var(--bg-2);
  box-shadow: var(--shadow-md);
}
@media (min-width: 720px) {
  .ch-angebot { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: var(--space-lg) var(--space-xl); }
}
.ch-angebot__titel { margin: 0 0 var(--space-xs); font: var(--type-h3); color: var(--text-100); text-wrap: balance; }
.ch-angebot__text p { max-width: 65ch; margin: 0; color: var(--text-200); }
.ch-angebot__aktion { display: grid; justify-items: start; gap: var(--space-sm); }
@media (min-width: 720px) { .ch-angebot__aktion { justify-items: end; } }
.ch-angebot__ende {
  margin: 0;
  font: var(--type-meta);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--signal-text);
}
.ch-angebot__ende[hidden] { display: none; }

/* ---------- test ---------- */

.ch-testkopf { margin-bottom: var(--space-xl); }

/* Stepper: Nummer circles on a hairline — gold filled = current group,
   gold ring = done, quiet ring = to come. */
.ch-stepper {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin: 0 0 var(--space-xl);
  padding: 0;
  list-style: none;
}
.ch-stepper::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 16px;
  right: 16px;
  height: 1px;
  background: var(--border-soft);
}
.ch-step {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  box-sizing: border-box;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--bg-1);
  font: 700 var(--fs-xs)/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--text-400);
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.ch-step--fertig { border: 2px solid var(--gold); color: var(--signal-text); }
.ch-step--aktiv { border-color: var(--gold); background: var(--gold); color: var(--on-gold); }

/* Focus target after each group change: the ring hugs the words. */
.ch-testkopf__titel { width: fit-content; margin-bottom: var(--space-sm); }
.ch-testkopf__titel:focus { outline: none; }
.ch-testkopf__titel:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }

.ch-anleitung { max-width: 600px; margin: 0; color: var(--text-300); }

/* ProgressBar: meta label above a 4 px gold line. */
.ch-fortschritt { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-lg); }
.ch-fortschritt__label {
  margin: 0;
  font: var(--type-meta);
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: var(--text-400);
}
.ch-progress {
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--bg-3);
  overflow: hidden;
}
.ch-progress__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--r-pill);
  background: var(--gold);
  transition: width var(--t-slow) var(--ease-out);
}

.ch-gruppe[hidden] { display: none; }

/* Statement numbers run on across the groups (only the shown group counts). */
.ch-gruppe { counter-reset: ch-frage; }
.ch-gruppe[data-gruppe="2"] { counter-reset: ch-frage 8; }
.ch-gruppe[data-gruppe="3"] { counter-reset: ch-frage 16; }
.ch-gruppe[data-gruppe="4"] { counter-reset: ch-frage 24; }
.ch-gruppe[data-gruppe="5"] { counter-reset: ch-frage 32; }
.ch-gruppe[data-gruppe="6"] { counter-reset: ch-frage 40; }
.ch-gruppe[data-gruppe="7"] { counter-reset: ch-frage 48; }
.ch-gruppe[data-gruppe="8"] { counter-reset: ch-frage 56; }

/* AntwortSkala: one statement, five real radios. */
.ch-frage {
  counter-increment: ch-frage;
  min-width: 0;
  margin: 0;
  padding: var(--space-xl) 0;
  border: 0;
  border-top: 1px solid var(--border-subtle);
}
.ch-frage:first-child { padding-top: 0; border-top: 0; }

.ch-frage__text {
  float: left;
  width: 100%;
  margin: 0 0 var(--space-lg);
  padding: 0;
  font: 500 clamp(20px, 2.4vw, 22px)/1.4 var(--font-display);
  color: var(--text-100);
  text-wrap: pretty;
}
.ch-frage__text::before {
  content: counter(ch-frage, decimal-leading-zero);
  content: counter(ch-frage, decimal-leading-zero) / '';
  display: block;
  margin-bottom: var(--space-sm);
  font: var(--type-meta);
  letter-spacing: var(--track-eyebrow);
  color: var(--signal-text);
}
.ch-frage--fehlt .ch-frage__text::before {
  content: counter(ch-frage, decimal-leading-zero) '\00a0\00a0✕';
  content: counter(ch-frage, decimal-leading-zero) '\00a0\00a0✕' / '';
  color: var(--alert-text);
}

.ch-skala {
  clear: both;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-sm);
}

.ch-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 6px 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: var(--bg-2);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.ch-option:hover { background: var(--bg-4); }
.ch-option input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.ch-option:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* Unanswered after „Weiter": one red frame around the row, ✕ at the number. */
.ch-frage--fehlt .ch-skala {
  outline: 1px solid var(--alert-text);
  outline-offset: 6px;
  border-radius: calc(var(--r-md) + 6px);
}

.ch-option__zahl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  font: 400 12px/1 var(--font-mono);
  color: var(--text-300);
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.ch-option__label { font: 400 13px/1.3 var(--font-body); color: var(--text-300); }

.ch-option:has(input:checked) { border-color: var(--gold); background: var(--gold-tint); }
.ch-option:has(input:checked) .ch-option__zahl { border-color: var(--gold); background: var(--gold); color: var(--on-gold); }
.ch-option:has(input:checked) .ch-option__label { color: var(--text-100); }

.ch-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-subtle);
}
.ch-test__notiz { margin-top: var(--space-md); text-align: center; }

@media (max-width: 560px) {
  .ch-skala { grid-template-columns: 1fr; }
  .ch-option {
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    padding: 12px 16px;
    text-align: left;
  }
  .ch-option__label { font-size: var(--fs-md); }
}

/* ---------- personal page ---------- */

.ch-ergebnis__kopf { margin-bottom: var(--space-xl); text-align: center; }
.ch-ergebnis__kopf .ch-eyebrow { justify-content: center; }
.ch-anrede { margin: 0; font: var(--type-lead); color: var(--text-200); text-wrap: balance; }
/* Birgit 09.11.: the line ends in the archetype itself. */
.ch-anrede__name { font-weight: 700; color: var(--signal-text); }
.ch-drucken { margin: var(--space-sm) 0 0; }
.ch-drucken[hidden] { display: none; }

.ch-sprung { margin: var(--space-md) 0 0; font: var(--type-body-sm); }
.ch-sprung a { color: var(--signal-text); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.ch-sprung a:hover { color: var(--gold-hell); }

/* The three days as tabs (Filip 28.10.): sticky at the top edge, so another
   day is always one tap away. A day opens with its code, never by date —
   a locked day stays reachable (its code field is there) and carries a lock. */
.ch-tage {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 0 var(--space-xl);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-1);
}
/* Three days in equal columns (the VIP area left the tabs on 09.11.). */
.ch-tage__liste {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ch-tage__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  box-sizing: border-box;
  margin-bottom: -1px;
  padding: var(--space-md) var(--space-sm) 14px;
  border-bottom: 2px solid transparent;
  text-align: center;
  text-decoration: none;
  color: var(--text-300);
}
.ch-tage__link:hover { color: var(--text-100); }
.ch-tage__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: var(--type-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--text-200);
}
.ch-tage__titel { font: var(--type-body-sm); hyphens: auto; }
.ch-tage__link--aktiv { border-bottom-color: var(--gold); color: var(--text-100); }
.ch-tage__link--aktiv .ch-tage__tag { color: var(--signal-text); }
/* Locked: dimmed like the Lab's closed chapters (never --text-500), plus the lock. */
.ch-tage__link--zu:not(.ch-tage__link--aktiv),
.ch-tage__link--zu:not(.ch-tage__link--aktiv) .ch-tage__tag { color: var(--text-400); }
.ch-tage__link--zu:not(.ch-tage__link--aktiv):hover { color: var(--text-200); }
.ch-tage__link--zu .ch-tage__tag::after {
  content: '';
  flex: none;
  width: 11px;
  height: 11px;
  background: currentColor;
  -webkit-mask: var(--ch-schloss) no-repeat center / contain;
  mask: var(--ch-schloss) no-repeat center / contain;
}
/* A day starts right under the tabs; anchors land below the sticky bar. */
.ch-tag > :first-child { margin-top: 0; }
.ch-tag > .ch-block:first-child { padding-top: 0; border-top: 0; }
.ch-tag > .ch-stoerer:first-child + .ch-block,
.ch-tag > .ch-stoerer:first-child + .ch-code--klein + * { margin-top: var(--space-xl); padding-top: 0; border-top: 0; }
.ch-tag [id] { scroll-margin-top: 112px; }

/* ---- calls to action (Birgit 28.10., meetings 09.11.) ----
   Days 1 and 2 open with the VIP breakfast as the big gold Störer — bigger
   than the code, which sits small below it. Pink is the homework's Störer at
   the end of day 2 (one per day); white on --pink is 4.5:1, so its small
   mark passes too. */
.ch-stoerer {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 72px;
  justify-content: center;
  margin: var(--space-xl) 0 0;
  padding: var(--space-md) 56px var(--space-md) var(--space-lg);
  border-radius: var(--r-lg);
  background: var(--pink);
  color: var(--on-pink);
  text-decoration: none;
  transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.ch-tag > .ch-stoerer:first-child { margin: 0 0 var(--space-lg); }
.ch-stoerer[hidden] { display: none; }
.ch-stoerer:hover { box-shadow: var(--glow-pink); transform: translateY(-1px); }
.ch-stoerer--gold {
  min-height: 112px;
  padding-block: var(--space-lg);
  background: var(--gold);
  color: var(--on-gold);
}
.ch-stoerer--gold .ch-stoerer__text { font-size: var(--fs-xl); }
.ch-stoerer--gold:hover { box-shadow: var(--glow-gold); }
.ch-stoerer__aktion {
  margin-top: var(--space-sm);
  font: 700 var(--fs-sm)/1.3 var(--font-body);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.ch-stoerer--folgt,
.ch-stoerer--folgt:hover { box-shadow: none; transform: none; }
.ch-stoerer--folgt .ch-stoerer__aktion { text-decoration: none; }
.ch-stoerer--folgt .ch-folgt__marke { color: inherit; opacity: .75; }
.ch-stoerer__marke {
  font: var(--type-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  text-wrap: balance;
}
.ch-stoerer__text { font: 700 var(--fs-lg)/1.3 var(--font-display); letter-spacing: -.01em; text-wrap: balance; }
.ch-stoerer__pfeil {
  position: absolute;
  top: 50%;
  right: var(--space-lg);
  font: 700 var(--fs-xl)/1 var(--font-body);
  transform: translateY(-50%);
  transition: transform var(--t) var(--ease);
}
.ch-stoerer:hover .ch-stoerer__pfeil { transform: translate(3px, -50%); }

/* The VIP button of the offer card (start page): the pill of the system's
   button in gold outline, one Funkeln in front — gold for VIP (Birgit 09.11.),
   calmer than the page's primary action. */
.ch-vip-knopf {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  min-height: 48px;
  padding: 12px 28px 12px 24px;
  border: 1px solid var(--gold);
  border-radius: var(--r-pill);
  background: transparent;
  font: 700 var(--fs-md)/1.2 var(--font-body);
  color: var(--signal-text);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.ch-vip-knopf::before {
  content: '';
  flex: none;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: var(--ch-funkeln) no-repeat center / contain;
  mask: var(--ch-funkeln) no-repeat center / contain;
}
.ch-vip-knopf:hover { background: var(--gold-tint); box-shadow: var(--glow-gold); transform: translateY(-1px); }
.ch-vip-knopf.ch-folgt { white-space: normal; }
.ch-vip-knopf.ch-folgt::before { background: var(--text-400); }

@media (max-width: 560px) {
  .ch-stoerer { padding-left: var(--space-md); }
  .ch-stoerer__text { font-size: var(--fs-md); }
  .ch-stoerer--gold { min-height: 96px; }
  .ch-stoerer--gold .ch-stoerer__text { font-size: var(--fs-lg); }
}

/* The code of day 2, small (Birgit 09.11.): one calm row on day 1 — label,
   field and button side by side, the hint below. */
.ch-code.ch-code--klein {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-sm) var(--space-md);
  margin: 0 0 var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
}
.ch-code__label { font: 500 var(--fs-sm)/1.4 var(--font-body); color: var(--text-300); }
.ch-code--klein .ch-code__zeile { justify-content: flex-start; }
.ch-code--klein .ch-code__input { width: 11rem; min-height: 40px; padding-block: 6px; font-size: 16px; }
.ch-code--klein .ch-btn-ghost { min-height: 40px; padding: 6px 20px; }
.ch-code--klein .ch-code__hinweis { flex-basis: 100%; margin: 0; }
.ch-code--klein + .ch-alert:empty + * { margin-top: var(--space-xl); }

/* ---- the bar at the bottom (Filip 28.10., 30.10.): link and conversation ----
   Fixed and slim, with air above and below its buttons; the page keeps room
   for it below the footer and in front of anything scrolled into view. */
html:has(.ch-leiste) {
  --ch-leiste-knopf: 40px;
  --ch-leiste-luft: var(--space-md);
  --ch-leiste-hoehe: calc(var(--ch-leiste-knopf) + 2 * var(--ch-leiste-luft) + 1px);
  scroll-padding-bottom: calc(var(--ch-leiste-hoehe) + var(--space-md));
}
.ch-body:has(.ch-leiste) { padding-bottom: calc(var(--ch-leiste-hoehe) + env(safe-area-inset-bottom, 0px)); }

.ch-leiste {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  padding: var(--ch-leiste-luft) max(var(--space-md), calc((100% - var(--ch-breite)) / 2))
    calc(var(--ch-leiste-luft) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border-soft);
  background: var(--bg-1);
}
.ch-leiste__innen { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); }
.ch-leiste__knopf {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  column-gap: var(--space-sm);
  min-height: var(--ch-leiste-knopf);
  padding: 4px 20px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: transparent;
  font: 500 var(--fs-sm)/1.2 var(--font-body);
  color: var(--text-200);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
}
.ch-leiste__knopf[hidden] { display: none; }
.ch-leiste__knopf:hover { background: var(--bg-3); color: var(--text-100); }
/* Copy, the calm one: the link sign in front, a gold tick for a moment once
   it worked. */
.ch-leiste__knopf--kopieren::before {
  content: '';
  flex: none;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: var(--ch-link) no-repeat center / contain;
  mask: var(--ch-link) no-repeat center / contain;
}
.ch-leiste__knopf--erledigt::before {
  background: var(--signal-text);
  -webkit-mask-image: var(--ch-haken);
  mask-image: var(--ch-haken);
}
/* The conversation is the step forward (Filip 30.10.): the bar's one filled
   button, in the edition's gold, with the system's arrow. */
.ch-leiste__knopf--gespraech {
  margin-left: auto;
  border-color: var(--gold);
  background: var(--gold);
  color: var(--on-gold);
  font-weight: 700;
}
.ch-leiste__knopf--gespraech::after {
  content: '→';
  content: '→' / '';
  transition: transform var(--t) var(--ease);
}
.ch-leiste__knopf--gespraech:hover {
  border-color: var(--gold-hell);
  background: var(--gold-hell);
  color: var(--on-gold);
  box-shadow: var(--glow-gold);
}
.ch-leiste__knopf--gespraech:hover::after { transform: translateX(3px); }

/* A call whose address is not there yet (booking, purchase, Zoom …): greyed
   out, never a link into nowhere, and it says „… folgt" (Filip 29.10.).
   After the buttons above, so it wins over each of them. */
.ch-folgt,
.ch-folgt:hover {
  flex-wrap: wrap;
  row-gap: 0;
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-300);
  font-weight: 500;
  box-shadow: none;
  transform: none;
  cursor: default;
}
.ch-folgt::after { content: none; }
.ch-folgt__marke {
  font: var(--type-meta);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-400);
}

@media (max-width: 560px) {
  html:has(.ch-leiste) { --ch-leiste-luft: calc(var(--space-sm) + var(--space-xs)); }
  .ch-leiste__knopf { padding-inline: 14px; }
  .ch-leiste__knopf--gespraech { flex: 1 1 auto; }
  /* Without its link the conversation button is two short lines — within
     the button height of the bar. */
  .ch-leiste__knopf.ch-folgt { flex-direction: column; padding-block: 2px; }
  .ch-leiste__knopf.ch-folgt .ch-folgt__marke { line-height: 1.2; }
  /* „Link" and the link sign beside the gold button — in the bar and where
     the link box quotes it; the rest of the name stays for screen readers. */
  .ch-leiste__zusatz,
  .ch-leiste__verb {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
}
/* The narrowest phones: a little smaller, the conversation without its arrow. */
@media (max-width: 359px) {
  .ch-leiste__knopf { padding-inline: 10px; font-size: var(--fs-xs); }
  .ch-leiste__knopf--gespraech::after { content: none; }
}

/* Typing on a phone: the keyboard takes the bottom of the screen — the bar
   steps aside so it covers neither the code field nor the form. */
@media (pointer: coarse), (max-width: 560px) {
  .ch-body:has(:is(input:not([type="checkbox"], [type="radio"], [readonly]), textarea, select):focus) .ch-leiste { display: none; }
}

@media (max-width: 560px) {
  .ch-tage__link { padding-inline: 4px; }
  .ch-tage__titel { font-size: var(--fs-xs); }
}
/* The narrowest phones: „Tag 2" and its lock stay on one line. */
@media (max-width: 359px) {
  .ch-tage__tag { letter-spacing: .08em; }
}

/* ArchetypenKarte (design system): Birgit's card front as a 2:3 portrait —
   mark line, gold stroke, the name in the edition hand (Effra Light caps)
   and the subtitle on the photo. Beside the short profile on wide
   screens, above it on narrow ones. */
.ch-archetyp {
  display: grid;
  gap: var(--space-xl);
  margin: 0 0 var(--space-lg);
}
.ch-archetyp + .ch-archetyp { margin-top: var(--space-2xl); }

.ch-archetyp__karte {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 2 / 3;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--bg-3);
  box-shadow: var(--shadow-lg);
  isolation: isolate;
  container-type: inline-size;
}
/* The portraits have the face in the upper third: the photo starts below
   the name block and fades in (alpha mask, no colour), so no text sits on
   a face. Cropped at the bottom only. */
.ch-archetyp__bild {
  position: absolute;
  top: 16%;
  left: 0;
  z-index: -2;
  width: 100%;
  height: 84%;
  object-fit: cover;
  object-position: center top;
  -webkit-mask-image: linear-gradient(transparent, var(--black) 14%);
  mask-image: linear-gradient(transparent, var(--black) 14%);
}
/* Foto-Abdunkler at the bottom (KI label) and mirrored at the top (name),
   so white stays legible; the top one clears from 55 % as in the
   component. */
.ch-archetyp__karte::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, transparent 55%, var(--foto-schatten)), var(--foto-abdunkler);
}

.ch-archetyp__kopf {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 16px 0;
  text-align: center;
}
.ch-archetyp__marke {
  margin: 0;
  font: 400 10px/1.4 var(--font-mono);
  letter-spacing: var(--track-edition-untertitel);
  text-transform: uppercase;
  color: var(--text-200);
}
.ch-archetyp__strich { display: block; width: 28px; height: 1px; background: var(--gold); }
.ch-archetyp__name {
  margin: 0;
  /* trailing tracking would push caps off-centre */
  padding-left: var(--track-edition-name);
  font: var(--type-edition-name);
  font-size: clamp(22px, 11cqw, 44px);
  letter-spacing: var(--track-edition-name);
  text-transform: uppercase;
  color: var(--text-100);
}
.ch-archetyp__untertitel {
  margin: 0;
  padding-left: var(--track-edition-untertitel);
  font: 400 11px/1.4 var(--font-mono);
  letter-spacing: var(--track-edition-untertitel);
  text-transform: uppercase;
  color: var(--text-200);
}

.ch-archetyp__text { min-width: 0; }
.ch-archetyp__block + .ch-archetyp__block { margin-top: var(--space-xl); }

@media (min-width: 720px) {
  .ch-archetyp { grid-template-columns: 280px minmax(0, 1fr); align-items: start; }
  .ch-archetyp__karte { margin: 0; }
}

/* KiHinweis: on every AI picture, in a corner on its darker part. */
.ch-ki {
  position: absolute;
  right: 12px;
  bottom: 10px;
  font: 400 10px/1.4 var(--font-mono);
  letter-spacing: .06em;
  color: var(--text-300);
}

/* Lists: a short gold stroke instead of a bullet. */
.ch-liste,
.ch-punkte {
  display: grid;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 65ch;
}
.ch-liste li,
.ch-punkte li {
  position: relative;
  padding-left: 28px;
}
.ch-liste li::before,
.ch-punkte li::before {
  content: '';
  position: absolute;
  top: .8em;
  left: 0;
  width: 14px;
  height: 1px;
  background: var(--gold);
}

/* Birgit's flowing texts (content/challenge-archetypen.de.json): paragraphs
   at reading width instead of the card's bullet points. */
.ch-fliesstext { max-width: 65ch; }
.ch-fliesstext p { margin: 0; }
.ch-fliesstext p + p { margin-top: var(--space-md); }

/* The licensed model under every evaluation (Birgit 28.10.): quiet, but
   information — never below --text-300. */
.ch-lizenz { max-width: 65ch; margin: var(--space-xl) 0 0; font: var(--type-body-sm); color: var(--text-300); }

/* Pill (gold): strengths. */
.ch-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ch-chips li {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border: 1px solid var(--gold-line);
  border-radius: var(--r-pill);
  background: var(--gold-tint);
  font: 500 var(--fs-xs)/1.5 var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--signal-text);
}

.ch-block {
  margin-top: var(--space-2xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--border-subtle);
}
.ch-block > p { max-width: 65ch; }

/* Ranking: all eight, the strongest in gold. */
.ch-rangfolge {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
}
.ch-rang {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-md);
  padding: 12px 16px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--bg-2);
}
.ch-rang--top { border-color: var(--gold); background: var(--gold-tint); }

.ch-rang__nr {
  font: 400 var(--fs-sm)/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-400);
}
.ch-rang--top .ch-rang__nr { color: var(--signal-text); }

.ch-rang__mitte { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }

.ch-rang__name {
  font: 400 var(--fs-md)/1.3 var(--font-display);
  letter-spacing: var(--track-edition-name);
  text-transform: uppercase;
  color: var(--text-200);
}
.ch-rang--top .ch-rang__name { font-weight: 500; color: var(--text-100); }

/* The subtitle shows on the strongest only; screen readers get all. */
.ch-rang__name small {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.ch-rang--top .ch-rang__name small {
  position: static;
  display: block;
  width: auto; height: auto;
  margin: 4px 0 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  font: 400 11px/1.4 var(--font-mono);
  letter-spacing: .16em;
  color: var(--text-300);
}

.ch-rang__balken {
  display: block;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--bg-4);
  overflow: hidden;
}
.ch-rang__balken span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--r-pill);
  background: var(--text-400);
  transition: width var(--t-slow) var(--ease-out);
}
.ch-rang--top .ch-rang__balken span { background: var(--gold); }

.ch-rang__punkte {
  font: 400 var(--fs-sm)/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-300);
}
.ch-rang__punkte small { font-size: inherit; color: var(--text-400); }
.ch-rang--top .ch-rang__punkte { color: var(--signal-text); }

/* Locked: a quiet card with the code field in the middle. */
.ch-gesperrt {
  padding: var(--space-xl) var(--space-lg);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-lg);
  background: var(--bg-2);
  text-align: center;
}
.ch-gesperrt > p:first-child,
.ch-gesperrt > .ch-analyse-marke + p {
  max-width: 52ch;
  margin: 0 auto;
  color: var(--text-200);
}

.ch-code {
  display: grid;
  justify-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}
.ch-code__zeile {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}
/* Input „code": mono, spaced, centred. */
.ch-code__input {
  width: 240px;
  max-width: 100%;
  text-indent: .4em;
  text-align: center;
  font: 400 24px/1.2 var(--font-mono);
  letter-spacing: .4em;
  text-transform: uppercase;
}
.ch-code__input::placeholder { color: var(--text-400); }

/* Long evaluation: the full card texts, unchanged, in the edition's
   section looks. */
.ch-lang { margin-top: var(--space-xl); }
.ch-lang + .ch-lang {
  margin-top: var(--space-2xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--gold-line);
}
.ch-lang__name {
  margin: 0 0 var(--space-xl);
  font: var(--type-edition-name);
  font-size: clamp(28px, 6vw, var(--fs-3xl));
  letter-spacing: var(--track-edition-name);
  text-transform: uppercase;
  color: var(--text-100);
}
/* The English subtitle of the card under the name (Birgit 29.10.). */
.ch-lang__name small {
  display: block;
  margin-top: var(--space-sm);
  font: var(--type-edition-untertitel);
  letter-spacing: var(--track-edition-untertitel);
  color: var(--text-200);
}
.ch-lang__name::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  margin-top: var(--space-md);
  background: var(--gold);
}
.ch-lang__abschnitt + .ch-lang__abschnitt { margin-top: var(--space-xl); }
.ch-lang__abschnitt p { max-width: 65ch; margin: 0; }

/* Geldvertrag: the one large gold surface of the view. */
.ch-lang__abschnitt--geldvertrag {
  padding: var(--space-lg);
  border-radius: var(--r-lg);
  background: var(--gold);
  color: var(--on-gold);
  text-align: center;
}
.ch-lang__abschnitt--geldvertrag .ch-h3 {
  margin: 0 0 var(--space-sm);
  font: 700 var(--fs-lg)/1.3 var(--font-display);
  letter-spacing: 0;
  text-transform: none;
  color: var(--on-gold);
}
.ch-lang__abschnitt--geldvertrag p {
  max-width: 44ch;
  margin: 0 auto;
  font: var(--type-geldvertrag);
  color: var(--on-gold);
}
.ch-lang__abschnitt--geldvertrag ::selection { background: var(--on-gold); color: var(--gold); }

/* Its head: title and the info button side by side. The button is a round
   "i" of 32 px (target ≥ 24 px); open, it fills. The explanation sits between
   head and contract, smaller. */
.ch-geldvertrag__kopf {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
  margin: 0 0 var(--space-sm);
}
.ch-lang__abschnitt--geldvertrag .ch-geldvertrag__kopf .ch-h3 { margin: 0; }
.ch-info {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1.5px solid var(--on-gold);
  border-radius: 50%;
  background: transparent;
  font: 700 16px/1 var(--font-display);
  color: var(--on-gold);
  cursor: pointer;
}
.ch-info[hidden] { display: none; }
.ch-info[aria-expanded="true"] { background: var(--on-gold); color: var(--gold); }
.ch-body .ch-info:focus-visible { outline: 2px solid var(--on-gold); outline-offset: 2px; }
.ch-lang__abschnitt--geldvertrag .ch-info__text {
  max-width: 44ch;
  margin: 0 auto var(--space-md);
  font: var(--type-body-sm);
  color: var(--on-gold);
}

/* Zitat: mono caps on a card, one Funkeln top right. Also the analysis'
   question to take along. */
.ch-lang__abschnitt--zitat,
.ch-analyse-teil--frage {
  position: relative;
  padding: var(--space-xl) var(--space-2xl) var(--space-xl) var(--space-lg);
  border-radius: var(--r-lg);
  background: var(--bg-2);
}
.ch-lang__abschnitt--zitat::after,
.ch-analyse-teil--frage::after {
  content: '';
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  width: 28px;
  height: 28px;
  background: var(--gold);
  -webkit-mask: var(--ch-funkeln) no-repeat center / contain;
  mask: var(--ch-funkeln) no-repeat center / contain;
}
.ch-lang__abschnitt--zitat p,
.ch-analyse-teil--frage p {
  max-width: none;
  font: var(--type-zitat);
  font-size: clamp(20px, 3vw, 28px);
  letter-spacing: var(--track-zitat);
  text-transform: uppercase;
  color: var(--text-100);
  text-wrap: balance;
}

/* The archetype's Zitat sits on a scene (design system: Zitat on a photo):
   light shadow plus Foto-Abdunkler keep white at ≥ 7:1, the text stands at
   the bottom, the star turns white on the gold picture. */
.ch-lang__abschnitt--zitat {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 320px;
  box-sizing: border-box;
  overflow: hidden;
  isolation: isolate;
}
.ch-lang__abschnitt--zitat::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--foto-abdunkler), var(--foto-schatten-leicht);
}
.ch-lang__abschnitt--zitat::after { background: var(--white); }
/* The small rubric gets the token's surface under text on photos, else its
   gold would sink into bright spots of the gold picture. */
.ch-lang__abschnitt--zitat .ch-h3 {
  align-self: flex-start;
  padding: 2px var(--space-sm);
  border-radius: var(--r-xs);
  background: var(--foto-schatten);
}
/* On narrow screens the quote reaches up into the bright dial: a soft
   shadow of the same token under the glyphs covers single highlights. */
.ch-lang__abschnitt--zitat p { text-shadow: 0 0 12px var(--foto-schatten), 0 1px 3px var(--foto-schatten); }
.ch-foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

/* The page's address (copied from the bar below; by hand from here). */
.ch-link__adresse { margin-top: var(--space-md); font: 400 var(--fs-sm)/1.4 var(--font-mono); color: var(--text-200); }
/* Under it the copy button of the bar, in its words and with its sign
   (Filip 30.10.: the two belong together). */
.ch-link__hinweis {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin: var(--space-md) 0 0;
  font: var(--type-body-sm);
  color: var(--text-300);
}
.ch-link__hinweis[hidden] { display: none; }
/* the sign on the first line (14 px in a line of 14 × 1.55 px) */
.ch-link__hinweis::before {
  content: '';
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: var(--space-xs);
  background: currentColor;
  -webkit-mask: var(--ch-link) no-repeat center / contain;
  mask: var(--ch-link) no-repeat center / contain;
}

/* The VIP area for those who booked: a gold-framed card of the side column
   since 09.11. (a breakfast on the morning of day 3, no tab of its own). */
.ch-vip__termin { margin: 0 0 var(--space-md); font: 700 var(--fs-md)/1.4 var(--font-body); color: var(--text-100); }
.ch-vip__termin-label {
  display: block;
  margin-bottom: 2px;
  font: var(--type-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--signal-text);
}
.ch-vip__zoom { width: 100%; white-space: normal; }
.ch-vip__vorbereitung { margin: var(--space-lg) 0; padding-top: var(--space-md); border-top: 1px solid var(--gold-line); }
.ch-vip__vorbereitung .ch-h3 { margin-bottom: var(--space-sm); }
.ch-vip__vorbereitung p { margin: 0 0 var(--space-sm); font: var(--type-body-sm); color: var(--text-200); }
.ch-vip__vorbereitung p:last-child { margin-bottom: 0; }

@media (max-width: 560px) {
  .ch-rang { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; padding: 12px; }
  .ch-gesperrt { padding: var(--space-lg) var(--space-md); }
  .ch-code:not(.ch-code--klein) { justify-items: stretch; }
  .ch-code:not(.ch-code--klein) .ch-code__zeile { flex-direction: column; align-items: stretch; }
  .ch-code:not(.ch-code--klein) .ch-code__input { width: 100%; }
  .ch-lang__abschnitt--zitat,
  .ch-analyse-teil--frage { padding: var(--space-xl) var(--space-xl) var(--space-lg) var(--space-md); }
  .ch-lang__abschnitt--zitat::after,
  .ch-analyse-teil--frage::after { top: var(--space-md); right: var(--space-md); width: 20px; height: 20px; }
}

/* ---------- business-model analysis (Baustein B) ----------
   Same components as the test; markup in src/challenge/analyse-ansicht.js,
   behaviour in challenge.js. */

/* User and model text may hold long unbroken strings (pasted links). */
.ch-analyse,
.ch-analyse-lang { overflow-wrap: anywhere; }

.ch-analyse__frage { margin: calc(-1 * var(--space-sm)) 0 var(--space-lg); font: var(--type-lead); color: var(--text-300); }
.ch-analyse__intro { max-width: 65ch; margin: 0 0 var(--space-md); color: var(--text-200); }

.ch-analyse .ch-gesperrt > .ch-analyse-marke {
  margin: 0 auto var(--space-md);
  font: var(--type-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--signal-text);
}

/* ---- form ---- */

.ch-analyse-form { margin-top: var(--space-lg); }
.ch-feld__hinweis { margin: 0; }

/* The archetype: a fixed sentence, not a field (Birgit 28.10.). */
.ch-archetyp-fest__satz { margin: 0; font: var(--type-lead); color: var(--text-200); }
.ch-archetyp-fest__satz strong { color: var(--text-100); }

/* Only where the form is for changes — folded under the confirmation. */
.ch-analyse-form__aendern { display: none; }
.ch-angaben .ch-analyse-form__aendern { display: block; margin: 0; }
.ch-analyse-geaendert { color: var(--signal-text); }
.ch-analyse-geaendert:empty { margin: 0; }

/* After sending (Birgit 28.10.): her confirmation in place of the form. */
.ch-bestaetigung {
  margin-top: var(--space-lg);
  padding: var(--space-xl) var(--space-lg);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-lg);
  background: var(--gold-tint);
}
.ch-bestaetigung[hidden] { display: none; }
.ch-bestaetigung__titel { margin: 0 0 var(--space-sm); font: var(--type-h3); color: var(--text-100); }
.ch-bestaetigung__titel::before { content: '✓\00a0'; content: '✓\00a0' / ''; color: var(--signal-text); }
.ch-bestaetigung p { max-width: 65ch; margin: 0; color: var(--text-200); }
.ch-analyse__frei { max-width: 65ch; margin: var(--space-lg) 0 0; color: var(--text-200); }
.ch-angaben { margin-top: var(--space-lg); }

.ch-zaehler {
  margin: 0;
  text-align: right;
  font: var(--type-meta);
  font-variant-numeric: tabular-nums;
  color: var(--text-400);
}

.ch-feld--fehlt .ch-input,
.ch-feld--fehlt .ch-modell { border-color: var(--alert-text); }

/* Checkboxes and model cards inside a field keep their own layout, not the
   field label's. */
.ch-feld .ch-check { margin: 0; }
.ch-feld .ch-modell { margin: 0; }

.ch-modelle-feld { margin: 0; padding: 0; border: 0; min-width: 0; }
.ch-modelle-feld legend { padding: 0; margin-bottom: var(--space-sm); }

.ch-modelle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

/* Model cards: the answer-option look of the scale, one level up. */
.ch-modell {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-xs);
  padding: var(--space-md);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: var(--bg-3);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.ch-modell:hover { background: var(--bg-4); }
.ch-modell input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.ch-modell:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ch-modell:has(input:checked) { border-color: var(--gold); background: var(--gold-tint); }

.ch-modell__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-sm); }
.ch-modell__name { font-weight: 700; color: var(--text-100); }
/* The radio's own mark: a ring that fills gold when chosen. */
.ch-modell__name::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: var(--space-sm);
  box-sizing: border-box;
  border: 1px solid var(--text-400);
  border-radius: 50%;
  vertical-align: -2px;
  transition: border-width var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.ch-modell:has(input:checked) .ch-modell__name::before { border: 5px solid var(--gold); }
.ch-modell__tag {
  font: var(--type-meta);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-400);
}
.ch-modell:has(input:checked) .ch-modell__tag { color: var(--signal-text); }
.ch-modell__kurz { font: var(--type-body-sm); color: var(--text-300); }

/* The hot-seat application: a voluntary tick of its own (29.10.), in gold. */
.ch-analyse-hotseat {
  margin: 0;
  padding: var(--space-md);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-md);
  background: var(--gold-tint);
  font: var(--type-body-sm);
  color: var(--text-200);
}
.ch-analyse-hotseat .ch-check { color: var(--text-200); }

/* ---- waiting (thinking pulse as in the lab review, gold) ---- */

.ch-warten {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  padding: var(--space-xl) var(--space-lg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  background: var(--bg-2);
  box-shadow: var(--shadow-md);
}
.ch-warten__satz { margin: 0; font: var(--type-lead); color: var(--text-100); }
.ch-warten__text .ch-hint[hidden] { display: none; }

.ch-denkt { display: inline-flex; flex: none; align-items: flex-end; gap: 4px; height: 20px; margin-top: 6px; }
.ch-denkt i {
  display: block;
  width: 4.5px;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--text-100);
  transform-origin: 50% 100%;
  animation: ch-denkt var(--think-pulse) ease-in-out infinite;
}
.ch-denkt i:nth-child(1) { background: var(--gold); }
.ch-denkt i:nth-child(2) { animation-delay: var(--think-stagger); }
.ch-denkt i:nth-child(3) { animation-delay: calc(2 * var(--think-stagger)); }
.ch-denkt i:nth-child(4) { background: var(--gold); animation-delay: calc(3 * var(--think-stagger)); }
@keyframes ch-denkt { 0%, 100% { transform: scaleY(.4); opacity: .45; } 50% { transform: scaleY(1); opacity: 1; } }

.ch-analyse-fehlerbox .ch-btn { margin-top: var(--space-lg); }

/* ---- result ---- */

.ch-analyse-ergebnis { margin-top: var(--space-lg); }

/* The core sentence heads the analysis: h3 type, gold stroke above. */
.ch-kernsatz {
  max-width: 40ch;
  margin: 0 0 var(--space-xl);
  font: var(--type-h3);
  font-size: clamp(22px, 3vw, var(--fs-xl));
  letter-spacing: var(--track-h3);
  color: var(--text-100);
  text-wrap: balance;
}
.ch-kernsatz::before {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  margin-bottom: var(--space-md);
  background: var(--gold);
}

.ch-analyse-teile { display: grid; gap: var(--space-xl); }
.ch-analyse-teil p { max-width: 65ch; margin: 0; }

.ch-ki-hinweis { margin: var(--space-lg) 0 0; font: var(--type-meta); color: var(--text-400); }

.ch-punkt__titel { display: block; font-weight: 700; color: var(--text-100); }

/* Next steps are a real order: Nummer circles. */
.ch-schritte {
  display: grid;
  gap: var(--space-lg);
  max-width: 65ch;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ch-schritt;
}
.ch-schritte li {
  counter-increment: ch-schritt;
  position: relative;
  min-height: 40px;
  padding: 8px 0 0 56px;
}
.ch-schritte li::before {
  content: counter(ch-schritt, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gold);
  font: 700 var(--fs-sm)/1 var(--font-display);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--on-gold);
}

.ch-analyse-grenze { margin-top: var(--space-xl); }

/* One fold-out shape (lab pattern 0.20.0, 24 §10): a chevron at the start of
   the words, down when closed, up when open — no arrow that reads as
   "scroll down" (Filip 28.10.). */
.ch-details {
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-subtle);
}
.ch-details > summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font: 500 var(--fs-md)/1.4 var(--font-body);
  color: var(--text-200);
  cursor: pointer;
  list-style: none;
}
.ch-details > summary::-webkit-details-marker { display: none; }
.ch-details > summary::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  margin: 0 3px 3px;
  border-right: 2px solid var(--signal-text);
  border-bottom: 2px solid var(--signal-text);
  transform: rotate(45deg);
  transition: transform var(--t) var(--ease);
}
.ch-details[open] > summary::before { transform: translateY(3px) rotate(-135deg); }
.ch-details > summary:hover { color: var(--text-100); }
@media (prefers-reduced-motion: reduce) { .ch-details > summary::before { transition: none; } }

@media (max-width: 560px) {
  .ch-modelle { grid-template-columns: 1fr; }
  .ch-warten { padding: var(--space-lg) var(--space-md); }
}

/* ---------- privacy policy (/datenschutz) ---------- */

/* A legal text: no Goldwirbel, running text at most 75ch. */
.ch-recht .ch-hero::before { content: none; }
.ch-recht .ch-titel { hyphens: auto; }
.ch-recht__text { max-width: 75ch; }
.ch-recht__text h2 {
  margin: var(--space-2xl) 0 var(--space-md);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--border-subtle);
  font: var(--type-h3);
  color: var(--text-100);
  text-wrap: balance;
}
.ch-recht__text h3 {
  margin: var(--space-xl) 0 var(--space-sm);
  font: var(--type-body);
  font-weight: 700;
  color: var(--text-100);
}
.ch-recht__text p,
.ch-recht__text li {
  font: var(--type-body);
  color: var(--text-300);
}
.ch-recht__text p { margin: 0 0 var(--space-md); }
.ch-recht__text ul { margin: 0 0 var(--space-md); padding-left: 1.25em; }
.ch-recht__text li { margin-bottom: var(--space-xs); }
.ch-recht__text li::marker { color: var(--signal-text); }
.ch-recht__text strong { font-weight: 700; color: var(--text-100); }
.ch-recht__text a {
  color: var(--signal-text);
  overflow-wrap: anywhere;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.ch-recht__text a:hover { color: var(--gold-hell); }
/* A point still open in the draft: visible until Torsten and Birgit decide. */
.ch-offen {
  padding: 0 4px;
  border: 1px dashed var(--gold-line);
  border-radius: var(--r-xs);
  background: var(--gold-tint);
  color: var(--text-100);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ---------- small screens ---------- */

@media (max-width: 560px) {
  .ch-header { padding-block: 12px; }
  .ch-logo { width: 120px; }
  .ch-marke { font-size: 11px; letter-spacing: .12em; }
  .ch-marke .ch-gold { display: block; }
  .ch-main { padding-top: var(--space-xl); padding-bottom: var(--space-2xl); }
  .ch-karte { padding: var(--space-lg) var(--space-md); }
  .ch-block { margin-top: var(--space-xl); padding-top: var(--space-xl); }
}

/* ---------- print: "Als PDF speichern" (meetings 09.11.) ----------
   Light paper, every open day one after the other (the server marks them
   ch-tag--druck), nothing to click; the copyright line stays at the end. */

@media print {
  @page { margin: 16mm 14mm; }
  html { color-scheme: light; scrollbar-gutter: auto; background: #fff; }
  .ch-body {
    --bg-1: #fff;
    --bg-2: #fff;
    --bg-3: #f3f3f3;
    --text-100: #111;
    --text-200: #1d1d1d;
    --text-300: #333;
    --text-400: #555;
    --border-subtle: #ddd;
    --border-soft: #ccc;
    --border-strong: #999;
    --gold-line: #c9b26a;
    --gold-tint: #f7f2df;
    --signal-text: #7a5f00;
    --shadow-md: none;
    --shadow-lg: none;
    padding-bottom: 0 !important;
    background: #fff;
    color: var(--text-200);
  }
  .ch-skip-link,
  .ch-tage,
  .ch-raster__neben,
  .ch-leiste,
  .ch-link,
  .ch-drucken,
  .ch-stoerer,
  .ch-code,
  .ch-code + .ch-alert,
  .ch-angebot,
  .ch-testleiste,
  .ch-footer__links,
  .ch-sprung,
  .ch-gesperrt,
  .ch-analyse,
  .ch-info,
  .ch-foto,
  .ch-ki,
  .ch-entwurf { display: none !important; }
  .ch-header { padding: 0 0 8mm; border: 0; }
  .ch-logo { filter: invert(1); }
  .ch-main { padding: 0; overflow: visible; }
  .ch-raster { display: block; }
  .ch-tag { display: none !important; }
  .ch-tag.ch-tag--druck { display: block !important; }
  .ch-tag--druck ~ .ch-tag--druck { break-before: page; }
  .ch-info__text { display: block !important; margin-bottom: var(--space-sm); }
  .ch-archetyp,
  .ch-lang__abschnitt,
  .ch-rang,
  .ch-analyse-teil { break-inside: avoid; }
  .ch-archetyp__karte { max-width: 300px; box-shadow: none; }
  /* The quote without its scene: plain words in gold-framed calm. */
  .ch-lang__abschnitt--zitat { min-height: 0; padding: var(--space-lg); border: 1px solid var(--gold-line); }
  .ch-lang__abschnitt--zitat::before { content: none; }
  .ch-lang__abschnitt--zitat::after { background: var(--gold); }
  .ch-lang__abschnitt--zitat .ch-h3 { background: none; padding: 0; color: var(--signal-text); }
  .ch-lang__abschnitt--zitat p { text-shadow: none; color: var(--text-100); }
  .ch-footer { padding: 6mm 0 0; border-top: 1px solid var(--border-soft); break-inside: avoid; }
  .ch-footer__zeichen { height: 20px; }
  .ch-body a { color: inherit; text-decoration: none; }
}

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .ch-body *,
  .ch-body *::before,
  .ch-body *::after {
    transition: none !important;
    animation: none !important;
  }
  .ch-btn:hover { transform: none; }
}