/* =============================================================
   KANTOMETER — kantometer.css
   Ergaenzungsschicht zum Designsystem von michaelhartmann.one.

   Wird NACH assets/styles.css geladen und tut zweierlei:
     1. Tokens ueberschreiben, die fuer das Instrument abweichen
     2. Komponenten ergaenzen, die es auf der Hauptwebsite nicht gibt

   assets/styles.css bleibt dadurch unveraendertes Abbild der
   Hauptwebsite und laesst sich jederzeit nachziehen. Wer hier etwas
   aendert, aendert nur Kantometer.

   Grundlage: 02_strategy/decisions/2026-08-23-designuebernahme-
   michael-hartmann.md und 05_website/design/brand-guide.md

   Struktur:
     1. Tokens
     2. Grundgeruest
     3. Kopfzeile
     4. Panels
     5. Optionskarten (Maximen)
     6. Fragenraster
     7. Bedienelemente
     8. Gewichte und Buttons
     9. Ergebnis und Messskala
    10. Hinweisblock
    11. Fusszeile
    12. Responsive
    13. Bewegung und Barrierefreiheit
   ============================================================= */

/* ---------- 1. TOKENS --------------------------------------- */
:root {
  /* Funktionsfarben des Instruments.
     Die Marke selbst bleibt achromatisch — Logo, Kopf und Navigation
     stehen in Weiss. Keine dieser Farben ist Hausfarbe: Truege eine
     Option die Markenfarbe, wirkte sie bevorzugt. Kontrastwerte gegen
     #000000, gemessen 2026-08-23. */
  --kant-opt-a:      #A9812F;   /* Messing         5,87:1  AA */
  --kant-opt-b:      #6FA891;   /* Gruenspan hell  7,69:1  AAA */
  --kant-opt-c:      #4C86C6;   /* Preussischblau  5,53:1  AA */
  --kant-alert:      #D0604F;   /* K.O., Warnung   5,47:1  AA */

  /* Gedaempfte Fassungen fuer Flaechen hinter Text. Nie fuer Text selbst. */
  --kant-opt-a-dim:  rgba(169, 129,  47, .14);
  --kant-opt-b-dim:  rgba(111, 168, 145, .14);
  --kant-opt-c-dim:  rgba( 76, 134, 198, .14);
  --kant-alert-dim:  rgba(208,  96,  79, .13);

  /* Flaechenebenen. Auf schwarzem Grund tragen Schatten nicht —
     Tiefe entsteht ueber Helligkeit. */
  --kant-panel:      #0c0c0c;   /* Abschnitte des Rechenbereichs */
  --kant-card:       #141414;   /* Options- und Ergebniskarten */
  --kant-control:    #1c1c1c;   /* Eingaben, Schalter im Ruhezustand */
  --kant-control-hi: #262626;   /* dieselben im Hover */

  --kant-radius:     4px;
  --kant-touch:      44px;      /* Mindesttrefferflaeche */

  /* --- Kompatibilitaet mit app.js ---------------------------
     app.js liest diese Namen zur Laufzeit aus (optColor(), initGauge(),
     updateGauge()). Sie werden hier auf die Kantometer-Werte gelegt,
     damit das Skript unveraendert weiterlaeuft. Nicht umbenennen,
     ohne app.js anzupassen. */
  --opt-0:            var(--kant-opt-a);
  --opt-1:            var(--kant-opt-b);
  --opt-2:            var(--kant-opt-c);
  --color-ko:         var(--kant-alert);
  --color-line:       rgba(255, 255, 255, .20);  /* kleine Skalenstriche */
  --color-muted:      rgba(255, 255, 255, .45);  /* Achse, Zahlen */
  --color-brass-text: #8a8a8a;                   /* Skalenueberschrift:
                                                    grau, nicht Messing —
                                                    das Bezugssystem traegt
                                                    keine Optionsfarbe */

  /* Interpretationsbaender der Messskala. Graustufen wachsender
     Helligkeit statt eigener Farben: Farbige Baender wuerden mit den
     Optionsfarben der Nadeln konkurrieren, und die Skala soll leiser
     sein als das Gemessene. Die Abstufung traegt die Aussage —
     rechts ist heller, also tragfaehiger. */
  --gauge-band-1:     rgba(255, 255, 255, .10);  /* 0–40   problematisch */
  --gauge-band-2:     rgba(255, 255, 255, .17);  /* 40–65  ambivalent */
  --gauge-band-3:     rgba(255, 255, 255, .26);  /* 65–85  tragfaehig */
  --gauge-band-4:     rgba(255, 255, 255, .38);  /* 85–100 stark */
}

/* ---------- 2. GRUNDGERUEST --------------------------------- */
/* Zahlen, die sich aendern oder verglichen werden, laufen in gleicher
   Breite. Ohne das springt die Spaltenkante beim Zaehlen. */
.result-score,
.slider-val,
.weights-total,
.weight-item input,
.q-id,
.bands-legend,
#gauge {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------- 3. KOPFZEILE ------------------------------------ */
/* Nur die Wortmarke, kein Claim, keine Herkunftszeile
   (Festlegung 2026-08-23). */
.kant-header {
  position: sticky;
  z-index: 30;
  top: 0;
  min-height: var(--header-height, 76px);
  border-bottom: .5px solid var(--line);
  background: rgba(0, 0, 0, .94);
  backdrop-filter: blur(12px);
}

.kant-header__inner {
  min-height: var(--header-height, 76px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.kant-wordmark {
  display: flex;
  align-items: center;
  gap: .8rem;
  min-height: var(--kant-touch);   /* Trefferflaeche, nicht Motivhoehe */
  color: var(--white);
  text-decoration: none;
}

/* Kompaktfassung des Signets verwenden — die Solo-Datei steht in einem
   1254er Quadrat und sitzt darin aussermittig, das Motiv wirkt sonst
   kleiner als angegeben und nach rechts gerueckt. */
.kant-wordmark img {
  display: block;
  width: auto;
  height: 30px;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  flex: 0 0 auto;
}

.kant-wordmark__name {
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* ---------- 4. PANELS --------------------------------------- */
/* Der Rechenbereich ist flaechig, nicht linienbasiert: Was angefasst
   wird, muss sich vom Grund abheben. Textabschnitte ausserhalb des
   Instruments bleiben bei den Haarlinien aus styles.css. */
.panel {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  margin-bottom: 1.75rem;
  background: var(--kant-panel);
  border: .5px solid var(--line);
  border-radius: var(--kant-radius);
}

.panel h2 {
  margin-bottom: .35rem;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.panel-head { margin-bottom: 1.25rem; }

.panel-hint {
  max-width: 62ch;
  margin: .4rem 0 0;
  color: var(--label);
  font-size: .92rem;
  line-height: 1.7;
}

/* Roemische Schrittzahl vor der Ueberschrift */
.step {
  margin-right: .55rem;
  color: var(--whisper);
  font-family: var(--sans);
  font-size: .7em;
  font-weight: 600;
  letter-spacing: .04em;
}

.panel-details summary {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: var(--kant-touch);
  color: var(--white);
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  cursor: pointer;
}

.panel-details summary::-webkit-details-marker { display: none; }

.panel-details summary::after {
  content: "";
  width: .5rem;
  height: .5rem;
  margin-left: .2rem;
  border-right: 1.5px solid var(--label);
  border-bottom: 1.5px solid var(--label);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 160ms ease;
}

.panel-details[open] summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.weights-total {
  margin-left: auto;
  color: var(--label);
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: .02em;
}

/* ---------- 5. OPTIONSKARTEN (MAXIMEN) ---------------------- */
.option-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.option-card {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1.1rem 1.25rem;
  background: var(--kant-card);
  border: .5px solid var(--line);
  border-top: 3px solid var(--opt-color, var(--kant-opt-a));
  border-radius: var(--kant-radius);
}

.option-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
}

/* Die Optionsfarbe traegt die Identitaet — hier und an Nadel,
   Kartenkante und Legende. Sie wechselt nie den Zustand mit. */
.option-name {
  color: var(--opt-color, var(--kant-opt-a));
  font-family: var(--sans);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
}

/* Trefferflaeche 44 px, ohne dass der Schalter optisch so gross wirkt:
   Das Wort bleibt klein, die Flaeche waechst ueber ein Pseudoelement
   nach aussen. Negative Margins wuerden die Kartenkante ueberlappen. */
.option-remove {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  color: var(--whisper);
  font-family: var(--sans);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: color 140ms ease;
}

.option-remove::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, var(--kant-touch));
  height: var(--kant-touch);
  transform: translate(-50%, -50%);
}

.option-remove:hover,
.option-remove:focus-visible { color: var(--kant-alert); }

/* Die Maxime ist der groesste Hebel des Verfahrens. Sie steht deshalb
   in der Serifenschrift und kursiv — wie ein Zitat, nicht wie ein
   Formularfeld. */
.maxime-input {
  width: 100%;
  min-height: 4.6rem;
  padding: .7rem .85rem;
  resize: vertical;
  background: var(--kant-control);
  border: .5px solid var(--line);
  border-radius: var(--kant-radius);
  color: var(--white);
  font-family: var(--serif);
  font-size: 1.08rem;
  font-style: italic;
  line-height: 1.5;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.maxime-input::placeholder { color: var(--whisper); font-style: italic; }

.maxime-input:hover { background: var(--kant-control-hi); }

.maxime-input:focus {
  background: var(--kant-control-hi);
  border-color: var(--line-active);
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ---------- 6. FRAGENRASTER --------------------------------- */
.module-title {
  margin: 2.25rem 0 1.1rem;
  padding-bottom: .5rem;
  border-bottom: .5px solid var(--line);
  color: var(--label);
  font-family: var(--sans);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .38em;
  text-transform: uppercase;
}

.module-title:first-child { margin-top: 0; }

.q-row {
  display: grid;
  grid-template-columns: minmax(16rem, 2fr) repeat(var(--opt-count, 2), minmax(9.5rem, 1fr));
  gap: 1rem;
  align-items: start;
  padding: 1rem 0;
  border-bottom: .5px solid var(--line);
}

.q-row:last-child { border-bottom: none; }

.q-text {
  color: var(--reading);
  font-size: .95rem;
  line-height: 1.6;
}

.q-id {
  margin-right: .45em;
  color: var(--whisper);
  font-size: .82rem;
}

/* K.O.-Kennzeichen: Rot steht hier fuer den Zustand, nie fuer eine
   Option. Zusaetzlich zur Farbe traegt es Rahmen und Versalien, damit
   es nicht allein an der Farbe haengt. */
.q-ko-tag {
  display: inline-block;
  margin-left: .45em;
  padding: .05em .45em;
  border: 1px solid currentColor;
  border-radius: 2px;
  color: var(--kant-alert);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  vertical-align: .12em;
}

.q-cell { display: flex; flex-direction: column; gap: .4rem; }

/* Im Einspaltenlayout ist diese Zeile die einzige Zuordnung zur Option.
   Sie traegt deshalb die Identitaetsfarbe, nicht Label-Grau. */
.q-cell-label {
  display: none;                 /* nur im Einspaltenlayout sichtbar */
  color: var(--opt-color, var(--label));
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* ---------- 7. BEDIENELEMENTE ------------------------------- */
/* JA/NEIN-Schalter. Der aktive Zustand haengt nicht allein an der
   Farbe: Punkt, hellere Flaeche und kraeftigerer Rand kommen hinzu
   (WCAG 1.4.1). Bei Deuteranopie ruecken Messing und Gruenspan
   spuerbar zusammen. */
.yn-group { display: flex; gap: .45rem; }

.yn-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: var(--kant-touch);
  padding: .4rem .5rem;
  background: var(--kant-control);
  border: .5px solid var(--line);
  border-radius: var(--kant-radius);
  color: var(--label);
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .12em;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.yn-btn:hover { background: var(--kant-control-hi); color: var(--reading); }

.yn-btn[data-active="true"] { font-weight: 600; }

.yn-btn[data-active="true"]::before {
  content: "";
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

/* Ein Schalter zeigt einen Zustand, keine Option — er traegt deshalb
   nie eine Optionsfarbe. NEIN ist schlicht "gesetzt" und bleibt
   achromatisch; JA loest bei den K.O.-Fragen das Ausschlusskriterium
   aus und ist der einzige Fall, der den Warnton verdient. */
.yn-btn[data-active="true"][data-val="NEIN"] {
  background: rgba(255, 255, 255, .10);
  border-color: var(--line-active);
  color: var(--white);
}

.yn-btn[data-active="true"][data-val="JA"] {
  background: var(--kant-alert-dim);
  border-color: var(--kant-alert);
  color: var(--kant-alert);
}

/* Regler */
.slider-wrap {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: var(--kant-touch);
}

/* appearance:none ist Voraussetzung dafuer, dass die Pseudoelemente
   unten ueberhaupt greifen. Ohne sie zeichnet der Browser seinen
   eigenen Regler und ignoriert Bahn und Griff. */
.slider-wrap input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  min-width: 0;
  height: var(--kant-touch);
  margin: 0;
  background: transparent;
  cursor: pointer;
}

/* Eigene Bahn, damit sie auf schwarzem Grund sichtbar bleibt —
   die Voreinstellung der Browser ist dort nahezu unsichtbar.
   Der Griff traegt die Optionsfarbe: Er ist der Wert dieser Option,
   also Identitaet. Die Bahn bleibt neutral. */
.slider-wrap input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: var(--line-strong);
}

.slider-wrap input[type="range"]::-moz-range-track {
  height: 3px;
  border-radius: 2px;
  background: var(--line-strong);
}

.slider-wrap input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  margin-top: -7px;
  border: 2px solid var(--black);
  border-radius: 50%;
  background: var(--opt-color, var(--kant-opt-a));
}

.slider-wrap input[type="range"]::-moz-range-thumb {
  width: 17px;
  height: 17px;
  border: 2px solid var(--black);
  border-radius: 50%;
  background: var(--opt-color, var(--kant-opt-a));
}

.slider-val {
  min-width: 3.4em;
  color: var(--white);
  font-size: .85rem;
  font-weight: 500;
  text-align: right;
}

/* ---------- 8. GEWICHTE UND BUTTONS ------------------------- */
.weight-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .5rem 1.25rem;
  margin-top: 1.25rem;
}

.weight-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: var(--kant-touch);
  color: var(--reading);
  font-size: .88rem;
}

.weight-item input {
  width: 5rem;
  padding: .4rem .55rem;
  background: var(--kant-control);
  border: .5px solid var(--line);
  border-radius: var(--kant-radius);
  color: var(--white);
  font-family: var(--sans);
  font-size: .85rem;
  text-align: right;
}

.weight-item input:focus {
  border-color: var(--line-active);
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--kant-touch);
  padding: .6rem 1.35rem;
  border-radius: 2px;
  font-family: var(--sans);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.btn-secondary {
  background: transparent;
  border: .5px solid var(--line-strong);
  color: var(--white);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, .06);
  border-color: var(--line-active);
}

.btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- 9. ERGEBNIS UND MESSSKALA ----------------------- */
/* Skala grau, Nadeln farbig (Festlegung 2026-08-23). Die Skala traegt
   mehrere Nadeln gleichzeitig, eine je Option — nur farbige Nadeln
   erlauben die Zuordnung, ohne jede Beschriftung einzeln zu lesen.
   Das Bezugssystem bleibt leiser als das Gemessene. Die Farbwerte
   selbst setzt app.js aus den Tokens in Abschnitt 1. */
.panel-result { background: var(--kant-panel); }

.gauge-wrap {
  margin: 0 0 1.25rem;
  padding: 1.25rem 0 .5rem;
}

#gauge { width: 100%; height: auto; display: block; }

.gauge-needle { transition: transform 450ms cubic-bezier(.22, 1, .36, 1); }

.result-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}

.result-card {
  display: flex;
  flex-direction: column;
  padding: 1.1rem 1.25rem;
  background: var(--kant-card);
  border: .5px solid var(--line);
  border-left: 3px solid var(--opt-color, var(--kant-opt-a));
  border-radius: var(--kant-radius);
}

.result-score {
  margin-top: .35rem;
  color: var(--opt-color, var(--kant-opt-a));
  font-family: var(--serif);
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 1;
}

/* Zustand, nicht Identitaet: Die Kartenkante behaelt die Optionsfarbe,
   nur der Wert wechselt. Ein K.O.-Kriterium ist kein schlechter Wert,
   sondern gar keiner. */
.result-score.is-ko {
  color: var(--kant-alert);
  font-size: 1.7rem;
}

.result-band {
  margin-top: .3rem;
  color: var(--reading);
  font-size: .84rem;
}

.result-maxime {
  margin-top: .7rem;
  color: var(--label);
  font-family: var(--serif);
  font-size: .98rem;
  font-style: italic;
  line-height: 1.45;
}

.bands-legend {
  margin: 1.25rem 0;
  color: var(--whisper);
  font-size: .76rem;
  line-height: 1.7;
}

.result-actions { margin-top: 1.25rem; }

/* ---------- 10. HINWEISBLOCK -------------------------------- */
/* Der Vorbehalt zum Reifegrad steht bewusst neben dem Ergebnis, nicht
   in der Fusszeile. Linie statt Flaeche: Er gehoert zum Text, nicht
   zur Bedienung. */
.notice {
  max-width: 46rem;
  margin: 1.5rem 0;
  padding: .2rem 0 .2rem 1.25rem;
  border-left: 2px solid var(--line-strong);
}

.notice p {
  margin: 0 0 .7rem;
  color: var(--label);
  font-size: .88rem;
  line-height: 1.75;
}

.notice p:last-child { margin-bottom: 0; }

.notice-title {
  color: var(--label);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.notice em {
  color: var(--reading);
  font-family: var(--serif);
  font-size: 1.06em;
  font-style: italic;
}

/* ---------- 11. FUSSZEILE ----------------------------------- */
.kant-footer {
  margin-top: 3rem;
  padding: 2.5rem 0 4rem;
  border-top: .5px solid var(--line);
  color: var(--whisper);
  font-size: .8rem;
  line-height: 1.8;
}

.kant-footer p { max-width: 62ch; color: inherit; font-size: inherit; }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 1.25rem;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--whisper);
  font-size: .74rem;
  letter-spacing: .04em;
  text-decoration: none;
  border-bottom: .5px solid transparent;
  transition: color 140ms ease, border-color 140ms ease;
}

.footer-links a:hover {
  color: var(--reading);
  border-bottom-color: var(--line-strong);
}

/* ---------- 12. RESPONSIVE ---------------------------------- */
@media (max-width: 860px) {
  /* Das Fragenraster kippt in Einzelspalten. Ohne die Zellbeschriftung
     waere danach nicht mehr erkennbar, zu welcher Option eine Eingabe
     gehoert. */
  .q-row {
    grid-template-columns: 1fr;
    gap: .75rem;
    padding: 1.25rem 0;
  }

  .q-cell-label { display: block; }

  .option-list,
  .result-cards { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .panel { padding: 1.1rem; }

  .kant-header__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
    padding: 1rem 0;
  }

  .result-score { font-size: 2.2rem; }

  .footer-links { gap: 1rem 1.25rem; }
}

/* Die Messskala braucht Breite. Statt sie zu stauchen, darf sie
   seitlich rollen — gestaucht waeren die Nadeln nicht mehr
   auseinanderzuhalten. */
@media (max-width: 640px) {
  .gauge-wrap {
    overflow-x: auto;
    overflow-y: hidden;
  }

  #gauge {
    width: 620px;
    max-width: none;
  }
}

/* ---------- 13. BEWEGUNG UND BARRIEREFREIHEIT --------------- */
@media (prefers-reduced-motion: reduce) {
  .gauge-needle,
  .panel-details summary::after,
  .yn-btn,
  .maxime-input,
  .btn,
  .footer-links a,
  .option-remove {
    transition: none;
  }
}

/* Fokus erbt unveraendert aus styles.css: 2 px weiss, Offset 4 px.
   Hier nur der Fall, in dem der Ring sonst von der Nachbarkarte
   verdeckt wuerde. */
.option-card :focus-visible,
.result-card :focus-visible { outline-offset: 2px; }

@media (forced-colors: active) {
  .panel,
  .option-card,
  .result-card,
  .yn-btn,
  .maxime-input,
  .weight-item input { border: 1px solid CanvasText; }

  .yn-btn[data-active="true"] { forced-color-adjust: none; }
}