/* =========================================================================
   Seiteneigener Regelsatz /hr-komplexitaetsrechner/ (SC-4)

   Die visuelle Grammatik ist die des Orientierungsrechners auf /preise/
   (assets/css/page-preise.css, Abschnitt 6): dunkle Flaeche fuer den
   Bereich, in dem der Leser etwas tut, Fragen links als Chip-Reihen,
   Ergebnisplatte rechts und haftend. Das ist Absicht - es soll kein
   dritter Rechnerstil entstehen, und ein wiedererkannter Bedienzustand
   ist mehr wert als eine neue Idee.

   Uebernommen sind Flaechen, Raender, Zustaende und Fokusmarkierung.
   Eigen ist nur, was dieser Rechner mehr zeigt als jener: die
   Balkenliste, die die Verteilung ueber die sechs Dimensionen sichtbar
   macht, und die zwei leisen Zeilen im Gewichtsabschnitt.

   Klassen mit dem Praefix hrk- statt der Namen von /preise/: die dortigen
   .quiz- und .result-Regeln liegen in page-preise.css und werden auf
   dieser Seite nicht geladen. Ein gemeinsames Bauteil im globalen
   Regelsatz waere die bessere Loesung - das ist aber ein Eingriff in
   site.css und gehoert nicht in dieses Ticket.
   ========================================================================= */

/* --- Die Bedienflaeche --------------------------------------------------- */
.hrk {
  padding-block: 96px 100px;
  background: var(--ink);
}
.hrk .section-title { color: #FFFFFF; }
.hrk .section-kicker { color: var(--brand); }
.hrk .section-lede { color: rgba(255, 255, 255, 0.74); }
.hrk :focus-visible { outline-color: var(--brand); }

.hrk__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 48px;
  align-items: start;
  margin-top: 56px;
}

/* --- Die Fragen ---------------------------------------------------------- */
.hrk-quiz { display: grid; gap: 34px; }

.hrk-quiz fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.hrk-quiz legend {
  padding: 0;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: #FFFFFF;
}
.hrk-quiz legend b {
  margin-right: 8px;
  color: var(--brand);
  font-weight: 600;
}

.hrk-quiz__opts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

/* Das Eingabefeld bleibt im Fluss und wird nur unsichtbar - es traegt den
   Fokus, den die Beschriftung daneben sichtbar macht. Ausblenden mit
   display:none wuerde die Radiogruppe fuer die Tastatur zerstoeren. */
.hrk-quiz__opts input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.hrk-quiz__opts label {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
  font-size: 18px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.86);
  cursor: pointer;
}
.hrk-quiz__opts label:hover {
  border-color: rgba(255, 255, 255, 0.55);
  color: #FFFFFF;
}
.hrk-quiz__opts input:checked + label {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--ink);
  font-weight: 600;
}
.hrk-quiz__opts input:focus-visible + label {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
}

/* --- Die Ergebnisplatte -------------------------------------------------- */
.hrk-result {
  position: sticky;
  top: calc(var(--head) + 28px);
  padding: 34px 34px 32px;
  background: var(--paper);
  border-radius: var(--radius);
}

.hrk-result__label {
  margin: 0;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  color: var(--brand-text);
}

/* Der Index. Gross, aber mit dem Massstab daneben - eine Zahl ohne
   Massstab liest sich wie eine Waehrung, und genau das ist sie nicht. */
.hrk-result__score {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 10px 0 0;
  font-family: var(--display);
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.hrk-result__scale {
  font-family: var(--body);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-quiet);
}

.hrk-result__tier {
  margin: 14px 0 0;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.15;
  color: var(--ink);
}

.hrk-result__headline {
  margin: 8px 0 0;
  font-size: 19px;
  line-height: 1.4;
  color: var(--brand-text);
}

.hrk-result__text {
  margin: 14px 0 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-body);
}

/* Die eigentliche Antwort des Rechners: welche zwei Dimensionen tragen
   das Ergebnis. Deshalb hervorgehoben und nicht als weiterer Absatz. */
.hrk-result__drivers {
  margin: 18px 0 0;
  padding: 12px 14px;
  background: var(--brandfield);
  border-radius: var(--radius);
  font-size: 17px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--brand-text);
}

/* --- Die Verteilung ------------------------------------------------------
   Sechs Zeilen, absteigend nach Beitrag. Der Balken ist eine Grafik und
   keine Bedienflaeche: er traegt role="img" mit eigener Beschriftung, und
   die Punktzahl daneben ist fuer Vorlesewerkzeuge ausgeblendet, weil sie
   in der Beschriftung schon steht. */
.hrk-bars {
  margin: 24px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.hrk-bar {
  display: grid;
  grid-template-columns: minmax(0, 152px) minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin-top: 12px;
}
.hrk-bar:first-child { margin-top: 0; }

.hrk-bar dt {
  min-width: 0;
  font-size: 16px;
  line-height: 1.25;
  color: var(--ink-body);
}

.hrk-bar dd {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  min-width: 0;
}

.hrk-bar__track {
  flex: 1 1 auto;
  min-width: 0;
  height: 8px;
  border-radius: var(--radius);
  background: var(--ground);
}

.hrk-bar__fill {
  display: block;
  height: 100%;
  border-radius: var(--radius);
  background: var(--brand);
}
@media (prefers-reduced-motion: no-preference) {
  .hrk-bar__fill { transition: width 220ms ease; }
}

.hrk-bar__points {
  flex: 0 0 auto;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-quiet);
}

.hrk-result__terms {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-quiet);
}

.hrk-result__actions {
  display: grid;
  gap: 14px;
  justify-items: start;
  margin-top: 24px;
}
.hrk-result__actions .cta { width: 100%; justify-content: center; }

/* --- Die Offenlegung der Gewichte ---------------------------------------
   Zwei leise Zeilen an der Punktreihe des gemeinsamen Regelsatzes: die
   Punktzahl neben dem Namen der Dimension, der Bezug zur Scriptomat
   Theory unter der Begruendung. Beides sind Zusaetze zur Punktreihe und
   keine eigene Bauart. */
.points--weights h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

.hrk-weight {
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--brand-text);
}

.hrk-theory {
  display: block;
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink-quiet);
}

/* --- Schmale Flaechen ---------------------------------------------------
   Unter 1000 px steht das Ergebnis unter den Fragen und haftet nicht
   mehr - eine haftende Platte, die fast die ganze Hoehe einnimmt, wuerde
   das Formular verdecken. */
@media (max-width: 1000px) {
  .hrk__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hrk-result { position: static; }
}

@media (max-width: 560px) {
  .hrk { padding-block: 72px 76px; }
  .hrk-result { padding: 26px 22px; }
  .hrk-result__score { font-size: 46px; }
  .hrk-result__tier { font-size: 21px; }
  .hrk-quiz__opts label { font-size: 17px; padding: 9px 14px; }

  /* Unter 560 px steht der Name der Dimension ueber dem Balken: 130 px
     Beschriftung neben einem Balken lassen auf 375 px keinen Balken
     uebrig. */
  .hrk-bar {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    margin-top: 16px;
  }
}