/* =============================================================================
   soft.fact · Meridian Light v4.0
   Cream als Bühne, Deep Ocean als Anker, Weiß nur für Card-Bodies.
   ========================================================================== */

/* --- 01 · Tokens ---------------------------------------------------------- */
:root {
  /* Deep Ocean */
  --ocean: #1e3a5f;  --ocean-dark: #152B47;  --ocean-mid: #4F6B95;
  --ocean-soft: #A7B8D2;  --ocean-50: #EDF1F7;
  /* Teal */
  --teal: #7dd3d9;  --teal-deep: #0D7A7A;  --teal-soft: #BCEBED;  --teal-mist: #DEF5F6;
  /* Rose / Coral */
  --rose: #fea9a0;  --rose-deep: #B23C32;  --rose-soft: #FFD0CA;  --rose-mist: #FFE5E2;
  --coral: #ff9472;  --coral-600: #D56140;  --coral-deep: #A74A30;  --coral-soft: #FFB099;
  /* Warm */
  --sunset: #ffb886;  --sunset-soft: #FFD2B0;  --sunset-mist: #FFE4CC;
  /* Forest */
  --forest: #2d5339;  --forest-mid: #3A6644;  --forest-soft: #C2DBCA;
  /* Lavender ✦ */
  --lavender: #a08fd4;  --lavender-deep: #6b5fa0;  --lavender-dark: #524878;
  --lavender-soft: #c4b8e8;  --lavender-mist: #eae5f8;
  /* Neutrals · Cream Sand */
  --cream: #f5f1eb;  --cream-soft: #FDFBF7;  --cream-dark: #E8E2D6;  --pearl: #CFC7B7;
  --graphite: #35322E;  --graphite-soft: #55504A;  --charcoal: #1C1A17;  --white: #ffffff;
  /* Semantik */
  --success: #4A9B7E;  --warning: #E8A53B;  --error: #E85D5D;  --info: #5B8AB8;

  /* Datenfarben — Brand-Hues, auf die dataviz-Gates gesnappt.
     MSA-Gruppen: CVD ΔE 8.7 (protan) · Normalsicht 16.6 · Kontrast ≥ 3:1 auf Weiß. */
  --d-self:   #c77c64;   /* Coral-Familie   · Selbstbezogene Motive */
  --d-future: #685796;   /* Lavender-Familie · Zukunftsmotive */
  --d-morale: #00773d;   /* Forest-Familie  · Moralische Motive */
  --d-social: #289f9f;   /* Teal-Familie    · Soziale Motive */

  /* Schrift */
  --fh: 'Montserrat', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --fb: 'Karla', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --fm: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Raster */
  --sp-xs: 4px; --sp-sm: 8px; --sp-md: 16px; --sp-lg: 24px;
  --sp-xl: 32px; --sp-2xl: 48px; --sp-3xl: 64px;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;

  --wrap: 1140px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  /* Feder mit leichtem Überschwingen — nur für Eigenschaften, bei denen ein
     Überschießen nichts kaputtmacht (transform, nicht height). */
  --feder: cubic-bezier(.28, 1.34, .42, 1);
}

/* --- 02 · Basis ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* Keine feste Wurzelgröße: die Einstellung des Nutzers ist der Ausgangspunkt. */
html { interpolate-size: allow-keywords; font-size: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100svh;
  display: flex; flex-direction: column;      /* Fußzeile bleibt unten */
  background: var(--cream);
  color: var(--ocean-dark);
  font: 400 1.0625rem/1.65 var(--fb);   /* 17px bei Standardeinstellung */
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--fh); font-weight: 600; line-height: 1.14; margin: 0; color: var(--ocean-dark); }
h1 { font-size: clamp(2.375rem, 6.2vw, 4.25rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.6875rem, 3.6vw, 2.5rem); font-weight: 500; letter-spacing: -.018em; }
h3 { font-size: clamp(1.1875rem, 2vw, 1.5rem); letter-spacing: -.01em; }
h4 { font-size: 1.0625rem; letter-spacing: -.005em; }

/* H2-Italic-Muster: <em> → Montserrat 300 italic in Lavender-deep */
h1 em, h2 em, h3 em { font-weight: 300; font-style: italic; color: var(--lavender-deep); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: var(--teal-deep); text-decoration-thickness: 1px; text-underline-offset: .18em; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2.5px solid var(--teal-deep);
  outline-offset: 3px;
  border-radius: 3px;
}

.eyebrow {
  font: 600 11px/1 var(--fm);
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--graphite-soft);
}
.num { font-family: var(--fm); font-variant-numeric: tabular-nums; }
.wrap { width: min(100% - 2 * var(--sp-lg), var(--wrap)); margin-inline: auto; }
.lede { font-size: clamp(1.125rem, 2vw, 1.3125rem); line-height: 1.6; color: var(--graphite-soft); }

.skip {
  position: fixed; top: -100px; left: var(--sp-md); z-index: 200;
  background: var(--ocean); color: var(--cream-soft);
  padding: 10px 18px; border-radius: var(--r-pill); font: 500 14px var(--fb);
  text-decoration: none; transition: top .18s var(--ease);
}
.skip:focus { top: var(--sp-md); }

/* Feines Korn — gibt der Cream-Fläche Textur statt Plastik */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
main, .runbar, .foot { position: relative; z-index: 2; }
main { flex: 1; }

/* --- 03 · Buttons --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 26px; border-radius: var(--r-pill);
  font: 600 14px/1 var(--fb); letter-spacing: .01em;
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .2s var(--ease), background-color .2s var(--ease),
              border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover { transform: translateY(-1.5px); }
/* Rückmeldung gehört auf den Druck, nicht auf das Loslassen — und sie muss
   sofort da sein. 100 ms ist die Grenze, ab der es sich angeschlossen anfühlt. */
.btn:active { transform: scale(.97); transition-duration: .1s; }
.btn--o   { background: var(--ocean); color: var(--cream-soft); }
.btn--o:hover { background: var(--ocean-dark); box-shadow: 0 8px 22px -10px rgba(30,58,95,.7); }
.btn--lv  { background: var(--lavender-deep); color: var(--cream-soft); }
.btn--lv:hover { background: var(--lavender-dark); box-shadow: 0 8px 22px -10px rgba(107,95,160,.7); }
.btn--gh  { background: transparent; color: var(--ocean); border-color: var(--ocean-soft); }
.btn--gh:hover { border-color: var(--ocean); background: rgba(30,58,95,.05); }
.btn--ghl { background: transparent; color: var(--graphite-soft); border-color: var(--lavender-soft); }
.btn--ghl:hover { border-color: var(--lavender); color: var(--lavender-dark); background: rgba(160,143,212,.08); }
.btn--sm  { padding: 9px 18px; font-size: 12.5px; }
.btn[disabled] { opacity: .32; pointer-events: none; }
.btn svg { flex: none; }

.iconbtn {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 0; cursor: pointer; padding: 6px 4px;
  font: 500 13px var(--fb); color: var(--graphite-soft);
  transition: color .18s var(--ease);
}
.iconbtn:hover { color: var(--ocean); }
.iconbtn:active { transform: scale(.94); transition-duration: .1s; }

/* --- 04 · Lauf-Kopfzeile -------------------------------------------------- */
.runbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(245,241,235,.86);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
/* Die Trennlinie erscheint erst, wenn Inhalt unter die Leiste läuft. Solange
   nichts darunterliegt, gibt es nichts zu trennen. */
.runbar.is-ueberlagert {
  border-bottom-color: var(--cream-dark);
  box-shadow: 0 6px 16px -14px rgba(21,43,71,.55);
}
.runbar__inner {
  width: min(100% - 2 * var(--sp-lg), var(--wrap)); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md);
  padding: 13px 0 12px; min-height: 54px;
}
.runbar__meta { display: flex; align-items: baseline; gap: var(--sp-md); }
.runbar__count { font: 500 12px var(--fm); font-variant-numeric: tabular-nums; color: var(--ocean); letter-spacing: .06em; }

.progress { height: 3px; background: var(--cream-dark); overflow: hidden; }
/* Der Balken wird hereingeschoben statt breiter gemacht: width ist eine
   Layout-Eigenschaft und zwingt zum Neuberechnen, transform nicht. Der Verlauf
   bleibt dabei in voller Länge und wird nicht gestaucht. */
.progress__fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--ocean) 0%, var(--teal-deep) 55%, var(--lavender) 100%);
  transform: translateX(calc(var(--p, 0) * 1% - 100%));
  transition: transform .45s var(--ease-out);
  will-change: transform;
}

/* --- 05 · Startseite ------------------------------------------------------ */
.hero { position: relative; padding: clamp(56px, 11vh, 128px) 0 clamp(40px, 7vh, 76px); overflow: hidden; }
.hero::before {                       /* Meridian Light ✦ — Verlaufs-Wolke */
  content: ''; position: absolute; z-index: -1;
  inset: -30% -20% auto -10%; height: 150%;
  background:
    radial-gradient(58% 52% at 78% 12%, rgba(196,184,232,.5) 0%, rgba(196,184,232,0) 62%),
    radial-gradient(46% 44% at 12% 4%, rgba(188,235,237,.42) 0%, rgba(188,235,237,0) 60%),
    radial-gradient(40% 40% at 96% 78%, rgba(254,169,160,.3) 0%, rgba(254,169,160,0) 64%);
  filter: blur(4px);
}
.hero__eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: var(--sp-lg); }
.hero__eyebrow::after { content: ''; flex: 1; height: 1px; background: var(--cream-dark); max-width: 220px; }
.hero h1 { max-width: 15ch; margin-bottom: var(--sp-lg); }
.hero .lede { max-width: 56ch; }

.hero__facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--sp-xl); }
.fact {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px 7px 12px; border-radius: var(--r-pill);
  background: var(--white); border: 1px solid var(--cream-dark);
  font: 500 12.5px var(--fb); color: var(--graphite-soft);
}
.fact .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal-deep); flex: none; }

/* Auswahl der Instrumente */
.picker { padding-bottom: clamp(64px, 10vh, 110px); }
.picker__grid { display: grid; gap: var(--sp-lg); grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }

.card-pick {
  position: relative; display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--cream-dark); border-radius: var(--r-xl);
  padding: var(--sp-xl) var(--sp-xl) var(--sp-lg);
  text-align: left; cursor: pointer; overflow: hidden;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease);
}
.card-pick::before {                 /* Akzentkante oben */
  content: ''; position: absolute; inset: 0 0 auto; height: 4px;
  background: var(--accent, var(--ocean));
  transform: scaleX(.16); transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.card-pick:hover, .card-pick:focus-visible { transform: translateY(-4px); box-shadow: 0 26px 50px -34px rgba(21,43,71,.55); border-color: var(--pearl); }
/* Große Flächen dürfen kaum skalieren, sonst wirkt es gummiartig. */
.card-pick:active { transform: translateY(-1px) scale(.995); transition-duration: .1s; }
.card-pick:hover::before, .card-pick:focus-visible::before { transform: scaleX(1); }

.card-pick__idx {
  font: 300 54px/1 var(--fh); color: var(--cream-dark);
  letter-spacing: -.04em; margin-bottom: var(--sp-md);
}
.card-pick h3 { margin-bottom: 10px; }
.card-pick__claim { color: var(--graphite-soft); font-size: 15.5px; line-height: 1.6; flex: 1; }
.card-pick__meta {
  display: flex; align-items: center; gap: var(--sp-md);
  margin-top: var(--sp-lg); padding-top: var(--sp-md);
  border-top: 1px solid var(--cream-dark);
  font: 500 11px var(--fm); letter-spacing: .12em; text-transform: uppercase; color: var(--graphite-soft);
}
.card-pick__go { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; color: var(--ocean); text-transform: none; letter-spacing: .02em; font-family: var(--fb); font-size: 13px; }
.card-pick__go svg { transition: transform .3s var(--ease-out); }
.card-pick:hover .card-pick__go svg { transform: translateX(4px); }

.resume {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-md);
  margin-bottom: var(--sp-lg); padding: 14px 20px;
  background: var(--lavender-mist); border-left: 4px solid var(--lavender);
  border-radius: var(--r-md); font-size: 14.5px; color: var(--lavender-dark);
}
.resume strong { font-weight: 600; }

/* Hinweis auf der Auswahlkarte, wenn ein Fragebogen kein geprüftes Verfahren
   ist. Bewusst neben dem Titel und nicht im Kleingedruckten. */
.card-pick__tag {
  display: inline-block; margin: 2px 0 10px;
  padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--sunset-mist); color: var(--coral-deep);
  font: 500 11.5px var(--fm); letter-spacing: .01em;
}

/* --- 06 · Fragebogen ------------------------------------------------------ */
.quiz {
  display: flex; align-items: center;
  min-height: calc(100svh - 58px - 106px);           /* Kopfzeile + Fußzeile */
  /* Untere Polsterung deutlich größer: schiebt den Block ins obere Drittel,
     statt ihn in der Mitte des Fensters schwimmen zu lassen. */
  padding: clamp(24px, 4vh, 56px) 0 clamp(72px, 15vh, 180px);
}
.quiz__inner { width: min(100% - 2 * var(--sp-lg), 940px); margin-inline: auto; }

.quiz__stem {
  display: flex; align-items: baseline; gap: 16px;
  font: 600 clamp(1.5625rem, 3.5vw, 2.5rem)/1.24 var(--fh);
  letter-spacing: -.022em; color: var(--ocean-dark);
  margin: 0 0 clamp(26px, 4vh, 40px); text-wrap: balance;
}
.quiz__no {
  flex: none; font: 400 .48em var(--fm); color: var(--pearl);
  letter-spacing: 0; transform: translateY(-.1em);
}

/* --- Schieberegler -------------------------------------------------------
   Nativer <input type="range"> — Tastatur, Touch und Screenreader kommen
   damit von Haus aus. Sichtbar sind Schiene und Ticks darunter; der Daumen
   ist der echte Thumb, damit Ziehen ohne eigene Zeigerlogik funktioniert.
   Der Thumb wandert von THUMB/2 bis Breite − THUMB/2 — die Schiene ist
   deshalb um genau diesen Betrag eingerückt, dann liegen Tick und Daumen
   exakt übereinander.                                                      */
.slider { --thumb: 36px; }

.slider__hint {
  margin: 0 0 clamp(18px, 3vh, 30px); text-align: center;
  font-size: clamp(1rem, 1.8vw, 1.25rem); color: var(--graphite-soft);
  min-height: 1.5em; transition: color .2s var(--ease);
}
.slider__hint b { font-weight: 500; color: var(--ocean-dark); }

.slider__bed { position: relative; height: 48px; }
.slider__rail {
  position: absolute; top: 50%; transform: translateY(-50%);
  left: calc(var(--thumb) / 2); right: calc(var(--thumb) / 2);
  height: 9px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--rose-soft) 0%, var(--lavender) 50%, var(--teal-soft) 100%);
}
.slider__ticks { position: absolute; inset: 0 calc(var(--thumb) / 2); }
.slider__tick {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 2px; height: 10px; border-radius: 1px; background: rgba(85, 80, 74, .28);
}
/* Feine Skalen (mehr als 7 Stufen): Zwischenticks zurücknehmen, sonst wirkt die
   Schiene wie ein Lineal und der Daumen verschwindet darin. */
.slider__bed--fein .slider__tick { height: 7px; background: rgba(85, 80, 74, .18); }
.slider__bed--fein .slider__tick--end { height: 17px; background: rgba(85, 80, 74, .42); }

/* Nur zwei Beschriftungen: an die Enden, nicht ins Raster.
   Doppelte Klasse, weil die Basisregel .slider__labels weiter unten steht und
   sonst per Quellreihenfolge gewinnt. */
.slider__labels.slider__labels--enden {
  display: flex; justify-content: space-between; gap: var(--sp-lg);
}
.slider__labels--enden li { text-align: left; max-width: 44%; }
.slider__labels--enden li:last-child { text-align: right; }
.slider__tick--end { width: 4px; height: 17px; border-radius: 2px; background: rgba(85, 80, 74, .42); }

.slider__input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; background: transparent; border: 0;
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
.slider__input::-webkit-slider-runnable-track { height: 48px; background: transparent; border: 0; }
.slider__input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  width: var(--thumb); height: var(--thumb);
  margin-top: calc((48px - var(--thumb)) / 2);
  border-radius: 50%; background: var(--white); border: 3px solid var(--lavender-deep);
  box-shadow: 0 2px 10px -2px rgba(82, 72, 120, .45);
  cursor: grab; transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.slider__input::-moz-range-track { height: 48px; background: transparent; border: 0; }
.slider__input::-moz-range-thumb {
  box-sizing: border-box; width: var(--thumb); height: var(--thumb);
  border-radius: 50%; background: var(--white); border: 3px solid var(--lavender-deep);
  box-shadow: 0 2px 10px -2px rgba(82, 72, 120, .45); cursor: grab;
}
.slider__input:hover::-webkit-slider-thumb { transform: scale(1.06); }
.slider__input:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(.97); }
.slider__input:focus-visible { outline: none; }
.slider__input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(160, 143, 212, .45); }
.slider__input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(160, 143, 212, .45); }

.slider__labels {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
}
.slider__labels li {
  text-align: center; cursor: pointer; transition: color .18s var(--ease), transform .1s ease-out;
  font: 400 clamp(11px, 1.15vw, 14px)/1.35 var(--fm);
  color: var(--graphite-soft); transition: color .18s var(--ease);
  text-wrap: balance;
}
.slider__labels li:hover { color: var(--ocean); }
.slider__labels li:active { color: var(--lavender-dark); transform: scale(.97); }
.slider__labels li.is-on { color: var(--lavender-dark); font-weight: 500; }

/* Eng wird es zuerst bei den Beschriftungen: dann nur noch die Endpunkte —
   den aktuellen Wert nennt ohnehin der Text über dem Regler. */
@media (max-width: 700px) {
  .slider { --thumb: 32px; }
  .slider__labels { display: flex; justify-content: space-between; gap: 16px; }
  .slider__labels li { text-align: left; max-width: 46%; }
  .slider__labels li:last-child { text-align: right; }
  .slider__labels li:not(:first-child):not(:last-child) { display: none; }
}

/* Freiwillige Angaben vor dem Fragebogen */
.demo { display: grid; gap: var(--sp-lg); }
@media (min-width: 720px) { .demo { grid-template-columns: 1fr 1fr; gap: var(--sp-xl); } }
.demo__set { border: 0; margin: 0; padding: 0; }
.demo__set legend {
  padding: 0 0 12px; font: 600 11px var(--fm); letter-spacing: .13em;
  text-transform: uppercase; color: var(--graphite-soft);
}
.demo__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.demo__opt {
  padding: 9px 16px; border-radius: var(--r-pill); cursor: pointer;
  background: var(--white); border: 1.5px solid var(--cream-dark);
  font: 500 14px var(--fb); color: var(--graphite);
  transition: border-color .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease);
}
.demo__opt:hover { border-color: var(--ocean-soft); }
.demo__opt:active { transform: scale(.96); transition-duration: .1s; }
.demo__opt[aria-pressed="true"] { background: var(--ocean); border-color: var(--ocean); color: var(--cream-soft); }

/* --- Auswahlkarten -------------------------------------------------------
   Für Fragebögen, deren Antworten pro Frage eigene Texte haben — dort gibt
   es keine gemeinsame Skala, die ein Regler abbilden könnte.

   Ab Tablet-Breite liegen die vier Karten nebeneinander: die Optionen sind
   von der günstigsten zur ungünstigsten geordnet, links nach rechts liest
   sich das wie eine Skala. Darunter stehen sie untereinander — vier Spalten
   auf einem Telefon wären drei Wörter pro Zeile.

   Alle vier Karten sind gleich hoch (Grid), die höchste bestimmt die Reihe.
   Das ist Absicht: eine kurze Antwort soll nicht kleiner wirken als eine
   ausführliche, sonst wählt man nach Fläche statt nach Inhalt.            */
.choices {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: clamp(8px, 2vh, 20px);
}

.choice {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  border: 1.5px solid var(--cream-dark);
  border-radius: var(--r-lg);
  background: var(--white);
  color: var(--ocean-dark);
  font: 400 clamp(.9375rem, 1.5vw, 1.0625rem)/1.5 var(--fb);
  text-align: left;
  cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease),
              transform .18s var(--feder), box-shadow .18s var(--ease);
}
/* Nur die Mehrfachauswahl trägt eine Marke — sie sagt, dass mehrere Karten
   gleichzeitig an sein können. Bei einer Antwort je Frage ist der Kreis
   überflüssig: dass genau eine Karte gilt, zeigt die Karte selbst. */
.choice--check { grid-template-columns: 1fr auto; }

.choice:hover {
  border-color: var(--coral-soft);
  box-shadow: 0 2px 14px rgba(53, 50, 46, .07);
}
.choice:active { transform: scale(.995); transition-duration: .08s; }

.choice__key {
  min-width: 1.6em;
  padding-top: .1em;
  font: 500 .82em var(--fm);
  color: var(--pearl);
  letter-spacing: 0;
  transition: color .18s var(--ease);
}

.choice__text { min-width: 0; }

/* Nur Mehrfachauswahl. Der Haken erscheint erst bei Auswahl — vorher hält
   der leere Kreis den Platz, damit die Karte beim Klick nicht springt. */
.choice__mark {
  width: 22px; height: 22px;
  margin-top: .1em;
  border: 1.5px solid var(--cream-dark);
  border-radius: 50%;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}

.choice.is-on {
  border-color: var(--coral-600);
  background: var(--rose-mist);
}
.choice.is-on .choice__key { color: var(--coral-deep); }

@media (max-width: 560px) {
  .choice { padding: 14px 15px; gap: 11px; border-radius: var(--r-md); }
  .choice__mark { width: 20px; height: 20px; }
}

/* --- Nebeneinander ab Tablet --------------------------------------------- */
@media (min-width: 860px) {
  .choices {
    display: grid;
    /* Eine Spalte je Antwort — die Fragebögen haben zwei bis sechs davon. */
    grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
    align-items: stretch;
    gap: 14px;
    /* Bei wenigen Antworten nicht auf die volle Breite ziehen: „Ja" und „Nein"
       brauchen keine 58 cm Karte. */
    max-width: calc(var(--n, 4) * 270px);
    margin-inline: auto;
  }

  /* Ziffer oben, Text darunter. Alle Karten sind gleich hoch, damit die
     Ziffern auf einer Linie liegen und der Leerraum unter kurzen Antworten
     nicht ausfranst. */
  .choice {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "key"
      "text";
    align-items: start;
    gap: 10px;
    padding: 15px 16px 16px;
    font-size: clamp(.875rem, 1.05vw, .9375rem);
    line-height: 1.55;
  }
  .choice__key  { grid-area: key; padding-top: 0; font-size: .95em; }
  .choice__text { grid-area: text; }

  /* Die Mehrfachauswahl legt ihr eigenes Raster fest — siehe weiter unten. */
  .choice__mark { grid-area: mark; margin-top: 0; justify-self: end; align-self: end; }

  /* Beim Überfahren leicht anheben — bei nebeneinanderliegenden Karten ist
     das die deutlichere Rückmeldung als die Randfarbe allein. */
  .choice:hover { transform: translateY(-2px); }
  .choice:active { transform: translateY(-2px) scale(.99); }
}

/* --- Mehrfachauswahl ------------------------------------------------------
   Gleiche Karten, aber mehrere gleichzeitig wählbar — deshalb eckige Marke
   statt runder und kein Auto-Weiter, sondern ein „Weiter"-Knopf.            */
.quiz__hint {
  margin: -14px 0 clamp(18px, 3vh, 28px);
  font-size: clamp(.875rem, 1.3vw, 1rem);
  color: var(--graphite-soft);
}

.choice--check .choice__mark { border-radius: 7px; }
.choice--check.is-on {
  border-color: var(--forest);
  background: var(--forest-soft);
}
.choice--check.is-on .choice__mark {
  border-color: var(--forest);
  background: var(--forest)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5 8.5 14 15 6.5'/%3E%3C/svg%3E")
    center / 15px no-repeat;
}
.choice--check:hover { border-color: var(--forest-soft); }

/* Anlageklassen sind kurze Begriffe — drei Spalten statt vier lesen sich
   ruhiger, und die Karten bleiben flach. */
@media (min-width: 860px) {
  .choices--check {
    grid-template-columns: repeat(min(var(--n, 3), 3), minmax(0, 1fr));
    max-width: calc(min(var(--n, 3), 3) * 300px);
  }
  .choice--check {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto;
    grid-template-areas: "text mark";
    align-items: center;
  }
}

/* Vier Spalten brauchen mehr Platz als die Textspalte des Schiebereglers. */
.quiz--choice .quiz__inner { width: min(100% - 2 * var(--sp-lg), 1180px); }

@media (prefers-reduced-motion: reduce) {
  .choice:hover, .choice:active { transform: none; }
}

.quiz__nav {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md);
  margin-top: clamp(36px, 7vh, 76px);
}
.quiz__status { font: 400 clamp(12px, 1.2vw, 14px) var(--fm); color: var(--graphite-soft); letter-spacing: .01em; text-align: right; }

/* Eintritts-Animation je Frage */
.enter { animation: enter .5s var(--ease-out) both; }
.enter-d1 { animation-delay: .05s; }
.enter-d2 { animation-delay: .11s; }
/* Was zurückgeht, kommt auch von dort wieder — sonst widerspricht die Bewegung
   der Geste. --enter-y wird beim Zurückblättern umgedreht. */
@keyframes enter { from { opacity: 0; transform: translateY(var(--enter-y, 14px)); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .enter, .enter-d1, .enter-d2 { animation: none; }
  .btn:hover, .card-pick:hover { transform: none; }
  .slider__input:hover::-webkit-slider-thumb { transform: none; }
}

/* --- 07 · Ergebnis · Kopf ------------------------------------------------- */
.res { padding-bottom: clamp(64px, 10vh, 112px); }
.res__hero { position: relative; padding: clamp(44px, 8vh, 92px) 0 clamp(32px, 5vh, 56px); overflow: hidden; }
.res__hero::before {
  content: ''; position: absolute; z-index: -1; inset: -40% -10% auto -10%; height: 160%;
  background:
    radial-gradient(50% 46% at 84% 8%, rgba(196,184,232,.44) 0%, rgba(196,184,232,0) 64%),
    radial-gradient(44% 40% at 6% 10%, rgba(188,235,237,.4) 0%, rgba(188,235,237,0) 62%);
}
.res__hero h1 { max-width: 16ch; margin: var(--sp-lg) 0 var(--sp-md); }
.res__stamp { font: 400 12.5px var(--fm); color: var(--graphite-soft); letter-spacing: .04em; }

.res__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--sp-xl); }

/* Kennzahlen-Zeile */
.kpis { display: grid; gap: var(--sp-md); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-top: clamp(28px, 4vh, 44px); }
.kpi {
  background: var(--white); border: 1px solid var(--cream-dark); border-radius: var(--r-lg);
  padding: var(--sp-lg); display: flex; flex-direction: column; gap: 6px;
}
.kpi__val { font: 600 clamp(30px, 3.4vw, 40px)/1 var(--fh); letter-spacing: -.03em; color: var(--ocean-dark); }
.kpi__val small { font-size: .46em; font-weight: 500; color: var(--graphite-soft); letter-spacing: 0; }
.kpi__cap { font-size: 13.5px; color: var(--graphite-soft); line-height: 1.45; }

/* Abschnitte */
.sec { padding-top: clamp(48px, 8vh, 88px); }
.sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-lg); flex-wrap: wrap; margin-bottom: var(--sp-lg); }
.sec__head h2 { max-width: 20ch; }
.sec__note { max-width: 46ch; font-size: 14.5px; color: var(--graphite-soft); }
.sec__rule { height: 1px; background: var(--cream-dark); margin-bottom: var(--sp-xl); }

/* --- 08 · Meter (BFI-2) --------------------------------------------------- */
/* Ein Wert je Zeile gegen das Normband der Referenzpopulation.
   Eine Serie pro Zeile → Farbe trägt Wiedererkennung, nicht Vergleich.       */
.meters { background: var(--white); border: 1px solid var(--cream-dark); border-radius: var(--r-lg); overflow: hidden; }
.meter { display: grid; gap: 4px 20px; padding: 20px var(--sp-lg); border-top: 1px solid var(--cream-dark); }
.meter:first-child { border-top: 0; }
@media (min-width: 860px) { .meter { grid-template-columns: 190px 1fr 244px; align-items: center; gap: 0 20px; } }

.meter__name { font: 600 15.5px var(--fh); letter-spacing: -.005em; display: flex; align-items: center; gap: 9px; }
.meter__swatch { width: 9px; height: 9px; border-radius: 2px; flex: none; background: var(--c); }
.meter__sub { font: 400 12px var(--fm); color: var(--graphite-soft); letter-spacing: .04em; margin-top: 2px; }

.track {
  position: relative; height: 34px; margin: 10px 0 4px;
  --lo: 0%; --hi: 100%; --v: 50%;
}
@media (min-width: 860px) { .track { margin: 0; } }
.track__rail { position: absolute; top: 15px; left: 0; right: 0; height: 4px; border-radius: var(--r-pill); background: var(--cream-dark); }
.track__band {                        /* Normbereich: Mittelwert ± 1 SD, liegt über der Füllung */
  position: absolute; top: 6px; bottom: 8px; left: var(--lo); right: calc(100% - var(--hi));
  background: rgba(79,107,149,.13); border-radius: 4px;
  border-left: 1px solid rgba(79,107,149,.42); border-right: 1px solid rgba(79,107,149,.42);
  pointer-events: none;
}
.track__fill {
  position: absolute; top: 16px; left: 0; width: var(--v); height: 2px;
  opacity: .35;
  border-radius: var(--r-pill); background: var(--c);
  transform-origin: left; animation: grow .85s var(--ease-out) both;
}
/* 95 %-Messintervall als Fehlerklammer — bewusst als Linie mit Endkappen, nicht
   als zweite Fläche: sonst ist es vom Normband nicht zu unterscheiden. */
.track__ci {
  position: absolute; top: 16px; height: 2px;
  left: var(--cilo, 0%); right: calc(100% - var(--cihi, 0%));
  background: var(--c); opacity: .7; pointer-events: none;
}
.track__ci::before, .track__ci::after {
  content: ''; position: absolute; top: -5px;
  width: 2px; height: 12px; border-radius: 1px; background: var(--c);
}
.track__ci::before { left: 0; }
.track__ci::after  { right: 0; }

/* Der eigene Wert: kleiner Kreis auf der Spurmitte (Schiene liegt bei 15–19px,
   Mitte also 17px). Der weiße Ring trennt ihn von Normband und Fehlerklammer,
   über denen er liegt. */
.track__pin {
  position: absolute; top: 11px; left: var(--v); width: 12px; height: 12px;
  border-radius: 50%; background: var(--c); transform: translateX(-6px);
  box-shadow: 0 0 0 2.5px var(--white);
  animation: pop .5s var(--ease-out) .3s both;
}
.track__ticks { position: absolute; inset: auto 0 0; display: flex; justify-content: space-between; font: 400 10px var(--fm); color: var(--pearl); }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pop { from { opacity: 0; transform: translateX(-6px) scale(.2); } to { opacity: 1; transform: translateX(-6px) scale(1); } }
@media (prefers-reduced-motion: reduce) { .track__fill, .track__pin { animation: none; } }

.meter__read { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 6px; }
@media (min-width: 860px) { .meter__read { justify-content: flex-end; margin-top: 0; } }
.meter__pm {
  display: block; font: 400 11px var(--fm); color: var(--graphite-soft);
  letter-spacing: 0; margin-top: 1px;
}
/* Einstufung, deren Messintervall über die Stufengrenze reicht.
   Doppelte Klasse, weil die Farbvarianten .chip--low/-medium/-high weiter unten
   stehen und sonst per Quellreihenfolge gewinnen würden. */
.chip.chip--unscharf { border-style: dashed; border-width: 1.5px; }

/* Erklärender Absatz unter einer Grafik */
.hinweis {
  margin: var(--sp-md) 0 0; padding: 13px 17px;
  background: var(--sunset-mist); border-left: 4px solid #D88550; border-radius: var(--r-md);
  font-size: 14px; line-height: 1.6; color: var(--graphite);
}
.hinweis--ruhig { background: var(--cream-soft); border-left-color: var(--pearl); color: var(--graphite-soft); }
.hinweis b { font-weight: 600; color: var(--ocean-dark); }
.hinweis--ruhig b { color: var(--graphite); }

/* Herkunft der Vergleichswerte */
.ref {
  margin-top: var(--sp-md); padding: 15px 18px;
  background: var(--white); border: 1px solid var(--cream-dark);
  border-left: 4px solid var(--ocean-mid); border-radius: var(--r-md);
}
.ref h4 {
  font: 600 11px var(--fm); letter-spacing: .13em; text-transform: uppercase;
  color: var(--ocean-mid); margin-bottom: 8px;
}
.ref p { font-size: 14px; line-height: 1.6; color: var(--graphite); margin-bottom: 8px; }
.ref__cite { font: 400 12.5px var(--fm); color: var(--graphite-soft); line-height: 1.55; }
.ref__caveat { font-size: 13.5px; color: var(--graphite-soft); font-style: italic; }
.ref p:last-child { margin-bottom: 0; }

.meter__val { font: 600 19px var(--fm); font-variant-numeric: tabular-nums; color: var(--ocean-dark); letter-spacing: -.02em; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: var(--r-pill);
  font: 600 10.5px var(--fm); letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid transparent; white-space: nowrap;
}
.chip--low    { background: var(--teal-mist);     color: #164850;           border-color: var(--teal-soft); }
.chip--medium { background: var(--cream);         color: var(--graphite-soft); border-color: var(--cream-dark); }
.chip--high   { background: var(--lavender-mist); color: var(--lavender-dark); border-color: var(--lavender-soft); }

.legend { display: flex; flex-wrap: wrap; gap: var(--sp-md) var(--sp-lg); margin-top: var(--sp-md); font-size: 12.5px; color: var(--graphite-soft); }
.legend__item { display: inline-flex; align-items: center; gap: 8px; }
.legend__band { width: 26px; height: 13px; border-radius: 3px; background: rgba(79,107,149,.13); border-inline: 1px solid rgba(79,107,149,.42); flex: none; }
.legend__ci {
  position: relative; width: 26px; height: 12px; flex: none;
}
.legend__ci::before {
  content: ''; position: absolute; top: 5px; left: 0; right: 0; height: 2px;
  background: var(--ocean-mid); opacity: .7;
}
.legend__ci::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 12px;
  border-left: 2px solid var(--ocean-mid); border-right: 2px solid var(--ocean-mid);
}
.legend__pin { width: 12px; height: 12px; border-radius: 50%; background: var(--ocean); flex: none; }

/* --- 09 · Motiv-Ranking (MSA) --------------------------------------------- */
.podium { display: grid; gap: var(--sp-md); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.pod {
  position: relative; background: var(--white); border: 1px solid var(--cream-dark);
  border-radius: var(--r-lg); padding: var(--sp-lg); overflow: hidden;
  display: flex; flex-direction: column; gap: 8px;
}
.pod::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--c); }
.pod__rank { font: 300 40px/1 var(--fh); color: var(--cream-dark); letter-spacing: -.04em; }
.pod__name { font: 600 20px var(--fh); letter-spacing: -.015em; }
.pod__group { font: 500 10.5px var(--fm); letter-spacing: .12em; text-transform: uppercase; color: var(--c); }
.pod__aims { font-size: 14px; line-height: 1.55; color: var(--graphite-soft); }
.pod__aims > span { display: block; font: 500 11px var(--fm); letter-spacing: .1em; text-transform: uppercase; color: var(--pearl); margin-bottom: 7px; }

/* aims_at als Liste — die Quelle liefert Satzfragmente, keine Fließtexte */
ul.aims { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
ul.aims li { position: relative; padding-left: 15px; font-size: 14px; line-height: 1.5; }
ul.aims li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 6px; height: 1.5px; border-radius: 1px; background: var(--edge, var(--c, var(--pearl))); opacity: .75;
}
.info ul.aims li { font-size: 14.5px; line-height: 1.6; color: var(--graphite); }

/* Trenner zwischen den beiden Instrumenten im Komplettprofil */
.partmark {
  display: flex; align-items: baseline; gap: var(--sp-lg);
  padding: clamp(52px, 8vh, 92px) 0 0;
}
.partmark__idx { font: 300 clamp(40px, 5vw, 60px)/1 var(--fh); color: var(--cream-dark); letter-spacing: -.04em; }
.partmark h2 { margin-bottom: 8px; }

/* Rosendiagramm — ein Segment je Motiv, Radius = Wert */
.rose__card {
  background: var(--white); border: 1px solid var(--cream-dark); border-radius: var(--r-lg);
  padding: var(--sp-lg) var(--sp-md) var(--sp-lg);
}
.rose__wrap { overflow-x: auto; overscroll-behavior-x: contain; }
.rose {
  display: block; width: 100%; min-width: 640px; height: auto;
  margin-inline: auto; max-width: 940px;
  cursor: grab; touch-action: none;   /* der Browser soll nicht mitscrollen wollen */
}
.rose.is-gezogen { cursor: grabbing; }
.rose:focus-visible { outline: 2.5px solid var(--teal-deep); outline-offset: 4px; border-radius: var(--r-md); }
/* Beim Ziehen laufen die Segmente nicht zusätzlich ihre Aufbau-Animation */
.rose.is-gezogen .rose__seg { animation: none; }

.rose__hint {
  margin: 10px 0 0; text-align: center;
  font: 400 12.5px var(--fb); color: var(--graphite-soft);
}
@media (pointer: coarse) { .rose__hint { font-size: 12px; } }

.rose__ring   { fill: none; stroke: var(--cream-dark); stroke-width: 1; }
.rose__bound  { fill: none; stroke: var(--pearl); stroke-width: 1.2; }
.rose__spoke  { stroke: var(--cream-dark); stroke-width: 1; }
.rose__seg    { stroke: var(--white); stroke-width: 2; stroke-linejoin: round; }
.rose__seg:hover { filter: brightness(1.08); }

.rose__label {
  font: 400 14px var(--fb); fill: var(--graphite);
  dominant-baseline: middle;
}
.rose__num { font-family: var(--fm); font-size: 13px; fill: var(--graphite-soft); }
.rose__tick {
  font: 400 11px var(--fm); fill: var(--graphite-soft);
  paint-order: stroke; stroke: var(--white); stroke-width: 3.5px; stroke-linejoin: round;
}

/* Aufbau: Segmente wachsen aus der Mitte, leicht versetzt im Uhrzeigersinn */
.rose__seg {
  transform-box: view-box; transform-origin: var(--cx) var(--cy);
  animation: bloom .65s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 26ms);
}
@keyframes bloom { from { transform: scale(.06); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rose__seg { animation: none; } }

.rose__legend {
  list-style: none; margin: var(--sp-lg) 0 0; padding: var(--sp-md) 0 0;
  border-top: 1px solid var(--cream-dark);
  display: grid; gap: 10px var(--sp-lg); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.rose__legend li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.rose__swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.rose__glabel { color: var(--ocean-dark); font-weight: 500; }
.rose__gavg { margin-left: auto; font: 500 13px var(--fm); font-variant-numeric: tabular-nums; color: var(--graphite-soft); }

.grp { margin-bottom: var(--sp-lg); background: var(--white); border: 1px solid var(--cream-dark); border-radius: var(--r-lg); overflow: hidden; }
.grp__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md);
  padding: 13px var(--sp-lg); background: var(--c); color: var(--cream-soft);
}
.grp__head h3 { color: inherit; font-size: 16px; font-weight: 600; letter-spacing: -.005em; }
.grp__head .eyebrow { color: rgba(253,251,247,.72); }
.grp__body { padding: 6px var(--sp-lg) var(--sp-lg); }

.bar { display: grid; grid-template-columns: 1fr; gap: 5px; padding: 13px 0; border-top: 1px solid var(--cream-dark); }
.bar:first-child { border-top: 0; }
@media (min-width: 720px) { .bar { grid-template-columns: 168px 1fr 92px; align-items: center; gap: 0 18px; } }
.bar__name { font-size: 14.5px; font-weight: 500; color: var(--ocean-dark); }
.bar__track { position: relative; height: 12px; border-radius: var(--r-pill); background: var(--cream); overflow: hidden; }
.bar__fill {
  position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: var(--r-pill);
  background: var(--c); transform-origin: left; animation: grow .8s var(--ease-out) both;
}
.bar__read { display: flex; align-items: center; gap: 9px; }
@media (min-width: 720px) { .bar__read { justify-content: flex-end; } }
.bar__val { font: 500 14px var(--fm); font-variant-numeric: tabular-nums; color: var(--graphite); }
.bar__rank { font: 500 11px var(--fm); color: var(--pearl); }
@media (prefers-reduced-motion: reduce) { .bar__fill { animation: none; } }

/* --- 09b · Bereichsbalken und Antwortkarten (Selbsteinschätzung) ----------
   Eine Serie je Block, Wert immer auch als Zahl daneben und in der
   Tabellenansicht. Die Balkenlänge trägt den Vergleich, die Farbe nur die
   Blockzugehörigkeit — nicht die Höhe.                                     */

.blockbars { margin-top: var(--sp-xl); }
.blockbars:first-child { margin-top: 0; }

.blockbars__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-md);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--c);
}
.blockbars__head h3 {
  margin: 0; font: 600 clamp(1.0625rem, 1.8vw, 1.3125rem)/1.3 var(--fh);
  letter-spacing: -.015em; color: var(--ocean-dark);
}
.blockbars__avg { font: 500 15px var(--fm); color: var(--c); letter-spacing: 0; }
.blockbars__note {
  margin: 10px 0 0; max-width: 68ch;
  font-size: 14.5px; line-height: 1.6; color: var(--graphite-soft);
}

.bars { margin-top: var(--sp-md); }

.barrow {
  display: grid;
  grid-template-columns: minmax(140px, 15em) 1fr auto auto;
  align-items: center;
  gap: var(--sp-md);
  padding: 11px 0;
  border-top: 1px solid var(--cream-dark);
}
.barrow:first-child { border-top: 0; }

.barrow__label { font-size: 15px; color: var(--ocean-dark); }
.barrow__n {
  display: block; margin-top: 1px;
  font: 400 11.5px var(--fm); color: var(--pearl); letter-spacing: 0;
}
.barrow__track {
  height: 10px; border-radius: var(--r-pill);
  background: var(--cream-dark); overflow: hidden;
}
.barrow__fill {
  height: 100%; border-radius: var(--r-pill);
  animation: barGrow .6s var(--ease-out) both;
  transform-origin: left center;
}
@keyframes barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.barrow__val { font: 500 16px var(--fm); color: var(--ocean-dark); letter-spacing: 0; }
.barrow__chip { justify-self: end; }

@media (max-width: 680px) {
  .barrow { grid-template-columns: 1fr auto; gap: 8px var(--sp-sm); }
  .barrow__track { grid-column: 1 / -1; order: 3; }
  .barrow__chip { order: 2; }
}

/* Antwortkarten: Frage und die gewählte Option im Wortlaut. */
.areacards { display: grid; gap: var(--sp-md); }
@media (min-width: 900px) { .areacards { grid-template-columns: 1fr 1fr; } }

.areacard {
  padding: var(--sp-md) var(--sp-lg) var(--sp-lg);
  border: 1px solid var(--cream-dark);
  border-top: 3px solid var(--c);
  border-radius: var(--r-lg);
  background: var(--white);
}
.areacard__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-md);
}
.areacard__head > div { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.areacard__rank { font: 400 12px var(--fm); color: var(--pearl); letter-spacing: 0; }
.areacard__head h3 {
  margin: 0; font: 600 1.125rem/1.3 var(--fh);
  letter-spacing: -.015em; color: var(--ocean-dark);
}
.areacard__score { font: 500 13.5px var(--fm); color: var(--c); letter-spacing: 0; white-space: nowrap; }
.areacard__def {
  margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--graphite-soft);
}

.qas { list-style: none; margin: var(--sp-md) 0 0; padding: 0; }
.qa { padding: 12px 0; border-top: 1px solid var(--cream-dark); }
.qa__q { margin: 0; font-size: 14px; line-height: 1.5; color: var(--graphite); }
.qa__a {
  display: flex; gap: 9px; align-items: baseline;
  margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ocean-dark);
}
.qa__mark {
  flex: none; font: 500 12px var(--fm); color: var(--c); letter-spacing: 0;
}
.qa__a--none { color: var(--pearl); font-style: italic; }

.caveat {
  margin: var(--sp-lg) 0 0; padding: 14px 18px;
  border-left: 3px solid var(--sunset);
  background: var(--sunset-mist);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: 14px; line-height: 1.6; color: var(--graphite);
  max-width: 78ch;
}

/* --- 10 · Detailkarten ---------------------------------------------------- */
/* Kategorie-Karte nach Design System: Header solid, Body immer Weiß. */
.cards { display: grid; gap: var(--sp-lg); }
.dcard { background: var(--white); border: 1px solid var(--cream-dark); border-radius: var(--r-lg); overflow: hidden; }
.dcard__head { padding: var(--sp-md) var(--sp-lg) 15px; background: var(--c); color: var(--fg, var(--cream-soft)); }
.dcard__head h3 { color: inherit; }
.dcard__bar { width: 32px; height: 3px; border-radius: 2px; background: var(--rule, rgba(255,255,255,.32)); margin-top: 11px; }
.dcard__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-md); flex-wrap: wrap; }
.dcard__score { font: 500 12px var(--fm); letter-spacing: .07em; opacity: .82; }
.dcard__body { padding: var(--sp-lg); }
.dcard__lead { font-size: 16.5px; line-height: 1.6; color: var(--ocean-dark); font-weight: 500; margin-bottom: var(--sp-md); text-wrap: pretty; }
.dcard__def { font-size: 14.5px; color: var(--graphite-soft); line-height: 1.62; }

.facets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-md); }
.tagx {
  padding: 4px 10px; border-radius: var(--r-pill); font: 500 11px var(--fb);
  background: var(--cream); border: 1px solid var(--cream-dark); color: var(--graphite-soft);
}

/* Info-Karten mit farbiger Kante */
.infos { display: grid; gap: 12px; margin-top: var(--sp-lg); }
@media (min-width: 780px) { .infos { grid-template-columns: 1fr 1fr; } }
.info {
  background: var(--cream-soft); border: 1px solid var(--cream-dark);
  border-left: 4px solid var(--edge, var(--ocean)); border-radius: var(--r-md);
  padding: 15px 18px;
}
.info h4 { font-size: 11px; font-family: var(--fm); font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--edge, var(--ocean)); margin-bottom: 7px; }
.info p { font-size: 14.5px; line-height: 1.6; color: var(--graphite); }
.info--wide { grid-column: 1 / -1; }

details.more { margin-top: var(--sp-md); border-top: 1px solid var(--cream-dark); padding-top: var(--sp-md); }
details.more > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px;
  font: 600 11px var(--fm); letter-spacing: .12em; text-transform: uppercase; color: var(--teal-deep);
}
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary { transition: opacity .1s ease-out; }
details.more > summary:active { opacity: .55; }
details.more > summary::after {
  content: ''; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s var(--ease);
}
details.more[open] > summary::after { transform: rotate(-135deg) translate(-1px, -1px); }

/* Aufklappen: die Höhe läuft gedämpft (ein Überschwingen würde eine Lücke
   aufreißen), der Inhalt federt darin nach. Braucht ::details-content — wo es
   fehlt, klappt es wie bisher hart auf, ohne dass etwas kaputtgeht. */
@supports selector(::details-content) {
  details.more::details-content {
    height: 0;
    overflow: clip;
    opacity: 0;
    transform: translateY(-10px);
    transition:
      height 380ms var(--ease-out),
      transform 460ms var(--feder),
      opacity 200ms ease-out,
      content-visibility 380ms allow-discrete;
  }
  details.more[open]::details-content {
    height: auto;
    opacity: 1;
    transform: none;
  }
  @media (prefers-reduced-motion: reduce) {
    details.more::details-content {
      transition: height 1ms, opacity 150ms ease, content-visibility 1ms allow-discrete;
      transform: none;
    }
  }
}
details.more > .infos { margin-top: var(--sp-md); }
/* Erster Block im aufgeklappten Bereich braucht keinen zusätzlichen Abstand,
   den bringt schon das <details>. */
.einordnung > :first-child { margin-top: var(--sp-md); }

/* Chip als Legendensymbol: nur das Muster zählt, nicht der Text */
.legend__chip {
  font-size: 9.5px; padding: 2px 8px; letter-spacing: .08em;
  background: var(--cream); color: var(--graphite-soft); border-color: var(--pearl);
}

/* Ruhige Motive: kompakte Liste statt Karten */
.quiet { background: var(--white); border: 1px solid var(--cream-dark); border-radius: var(--r-lg); padding: var(--sp-lg); }
.quiet__row { display: flex; align-items: baseline; gap: var(--sp-md); padding: 11px 0; border-top: 1px solid var(--cream-dark); font-size: 14.5px; }
.quiet__row:first-of-type { border-top: 0; }
.quiet__row b { font-weight: 600; flex: none; width: 170px; }
.quiet__row > span { color: var(--graphite-soft); flex: 1; }
.quiet__val { display: flex; align-items: center; gap: 10px; flex: none; justify-content: flex-end; width: 130px; }
@media (max-width: 640px) {
  .quiet__row { flex-wrap: wrap; }
  .quiet__row b { width: auto; }
  .quiet__val { width: auto; }
}

/* --- 11 · Tabellenansicht (WCAG-Zwilling zu jeder Grafik) ----------------- */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--cream-dark); border-radius: var(--r-md); background: var(--white); }
table.tbl { border-collapse: collapse; width: 100%; font-size: 14px; min-width: 520px; }
table.tbl th, table.tbl td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--cream-dark); }
table.tbl th { font: 600 10.5px var(--fm); letter-spacing: .11em; text-transform: uppercase; color: var(--graphite-soft); background: var(--cream-soft); }
table.tbl td.n { font-family: var(--fm); font-variant-numeric: tabular-nums; }
table.tbl tr:last-child td { border-bottom: 0; }

/* --- 12 · Fußzeile -------------------------------------------------------- */
.foot {
  border-top: 1px solid var(--cream-dark); margin-top: auto;
  padding: var(--sp-lg) 0; font-size: 12.5px; color: var(--graphite-soft);
}
.foot__inner { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.foot__sep { color: var(--pearl); }

/* --- 13 · Druck / PDF ----------------------------------------------------- */
@media print {
  @page { margin: 14mm 12mm; }
  html, body { background: var(--white); font-size: 10.5pt; }
  .grain, .runbar, .foot, .res__actions, .skip, .btn { display: none !important; }
  .res__hero::before, .hero::before { display: none; }
  .sec { padding-top: 16pt; }
  /* Karten dürfen umbrechen (manche sind länger als eine Seite),
     die kleinen Einheiten darin nicht. */
  .info, .pod, .kpi, .meter, .bar, .grp__head, .quiet__row, .rose__card { break-inside: avoid; }
  .rose { min-width: 0; max-width: 100%; }
  .rose__seg { animation: none !important; }
  .dcard__head { break-after: avoid; }
  .dcard, .grp, .pod, .kpi, .meters, .quiet, .info { border-color: #ccc; box-shadow: none; }
  .track__fill, .track__pin, .bar__fill { animation: none !important; }
  details.more { border-top: 0; }
  details.more > summary { display: none; }
  details.more::details-content { height: auto; opacity: 1; transform: none; transition: none; overflow: visible; }
  h1 { font-size: 24pt; }
  h2 { font-size: 15pt; }
  h3 { font-size: 12pt; }
  a { color: inherit; text-decoration: none; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* --- 14 · Weitere Systemeinstellungen ------------------------------------
   Reduzierte Bewegung ist oben je Komponente behandelt. Hier die beiden
   Signale, die bisher fehlten. */

@media (prefers-reduced-transparency: reduce) {
  /* Durchscheinendes wird deckend, Korn und Verläufe fallen weg. */
  .runbar { background: var(--cream); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .grain { display: none; }
  .hero::before, .res__hero::before { display: none; }
}

@media (prefers-contrast: more) {
  /* Klare Kanten statt zarter Abstufungen. */
  :root { --cream-dark: #B9B1A0; --pearl: #8C8578; --graphite-soft: #3C3833; }
  .runbar { background: var(--cream); backdrop-filter: none; -webkit-backdrop-filter: none;
            border-bottom-color: var(--ocean); }
  .grain { display: none; }
  .meters, .dcard, .rose__card, .kpi, .card-pick, .grp, .pod, .quiet, .tbl-wrap,
  .info, .ref, .hinweis, .demo__opt { border-color: var(--ocean-mid); }
  .btn--gh, .btn--ghl { border-color: var(--ocean); color: var(--ocean); }
  .chip { border-width: 1.5px; }
  .track__band { background: rgba(79,107,149,.28); border-color: var(--ocean); }
  .rose__seg { stroke-width: 2.5; }
  :focus-visible { outline-width: 3.5px; }
}

/* --- 15 · Nur für Screenreader ------------------------------------------- */
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}