/* Nutzwertanalyse (src/Nutzwert.php, assets/js/nutzwert.js).
 *
 * Steht nur in der Quizkarte, und die ist immer dunkel - die Farben hängen
 * deshalb nicht an data-bs-theme, sondern stehen fest.
 *
 * Die Tabelle ist breit: Je Alternative zwei Spalten, dazu Kriterium und
 * Gewicht. Bei drei Angeboten sind das acht Spalten. Sie rollt deshalb
 * seitlich (table-responsive), und die erste Spalte bleibt dabei stehen -
 * ohne den Namen des Kriteriums ist eine Zeile nicht zuzuordnen.
 *
 * ACHTUNG BEI DEN FARBEN: Die Quizkarte ist dunkel, die Bootstrap-Tabelle
 * darin aber hell. Alles, was in der Tabelle steht, braucht deshalb dunkle
 * Schrift - eine helle Schrift ist dort unsichtbar, und zwar genau bei den
 * vorgegebenen Werten, die niemand vermisst, weil man sie fuer leere Felder
 * haelt. Am Bildschirm gefunden, 28.10.2026.
 */
[data-nutzwert] {
    --nw-rand: var(--rand, rgba(255, 255, 255, .2));
    --nw-marke: #ffb86b;
    --nw-gut: #7ddf9a;
    --nw-falsch: #ff8a8a;
}

.nw-huelle { margin-bottom: .9rem; }
.nw-tabelle { margin: 0; font-size: .9rem; }
.nw-tabelle th,
.nw-tabelle td { vertical-align: middle; }

/* Die Namen der Angebote stehen über ihren beiden Spalten und brauchen eine
   sichtbare Zusammengehörigkeit - sonst liest man Punkte und Teilnutzen als
   zwei unabhängige Spalten. */
.nw-alt {
    text-align: center;
    border-left: 2px solid var(--nw-rand);
    border-bottom: 1px solid var(--nw-rand);
}
.nw-unterkopf {
    font-weight: 400;
    font-size: .8rem;
    text-align: center;
    color: rgba(0, 0, 0, .65);
    white-space: nowrap;
}

/* Die erste Spalte bleibt beim seitlichen Rollen stehen: Ohne das Kriterium
   ist eine Zeile nicht zuzuordnen, und genau dann verrechnet man sich. */
   Das gilt fuer beide ersten Spalten: auch fuer das Gewicht, denn der
   Teilnutzen entsteht daraus. Wer bis zur dritten Alternative rollt und das
   Gewicht nicht mehr sieht, kann nicht rechnen. Am Handy gemessen, 28.10.2026.

   Der Hintergrund muss gesetzt sein, sonst scheint beim Rollen der
   Tabelleninhalt durch die stehende Spalte hindurch. */
/* Der Haltepunkt der Gewichtsspalte liegt bewusst links von der echten
   Breite der Kriteriumsspalte. Setzte man ihn genau auf deren Breite, müsste
   die stimmen - und `width` greift bei automatischem Tabellenlayout nicht
   verlässlich. Die Folge waere ein Spalt, durch den die dunkle Karte
   scheint, und zwar auch ohne jedes Rollen. So ueberlappen die beiden
   Spalten beim Rollen stattdessen ein Stueck; das Kriterium liegt oben. */
.nw-kriterium,
.nw-tabelle thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    background: #fff;
    min-width: 7rem;
    overflow-wrap: anywhere;
}
.nw-gewicht,
.nw-tabelle thead th:nth-child(2) {
    position: sticky;
    left: 5rem;
    z-index: 2;
    background: #fff;
    /* Eine sichtbare Kante trennt das Stehende vom Rollenden. */
    box-shadow: 1px 0 0 rgba(0, 0, 0, .15);
}
.nw-gewicht,
.nw-punkt,
.nw-teil { text-align: center; padding: .25rem .3rem; }
.nw-punkt { border-left: 2px solid var(--nw-rand); }

.nw-feld {
    min-width: 3.4rem;
    max-width: 5rem;
    margin: 0 auto;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
/* Teilnutzen und Summen tragen mehr Stellen als eine Bewertung von 1 bis 5. */
.nw-breit { min-width: 4.4rem; max-width: 6.5rem; }

/* Ein vorgegebener Wert ist keine Eingabe - er steht als Text da, aber in
   derselben Zeile wie die Felder und muss deshalb gleich hoch wirken. */
.nw-fest {
    display: inline-block;
    padding: .2rem .4rem;
    color: rgba(0, 0, 0, .8);
    font-variant-numeric: tabular-nums;
}

.nw-summenkopf { text-align: right; }
.nw-tabelle tfoot td { border-top: 2px solid var(--nw-rand); }

.nw-gsumme-zeile { margin: 0 0 .9rem; font-size: .9rem; }
.nw-gsumme {
    display: inline-block;
    min-width: 2.5rem;
    padding: .1rem .5rem;
    border: 1px solid var(--nw-rand);
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
}
.nw-summe-gut { border-color: var(--nw-gut); color: var(--nw-gut); }
.nw-summe-aus { border-color: var(--nw-marke); color: var(--nw-marke); }

.nw-entscheidung {
    margin-bottom: .8rem;
    padding: .7rem .75rem;
    border: 1px solid var(--nw-rand);
    border-radius: 8px;
    background: rgba(255, 255, 255, .04);
}
.nw-leit { margin: 0 0 .6rem; font-size: .9rem; }
.nw-entscheidung-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    padding: .25rem 0;
}
.nw-entscheidung-zeile + .nw-entscheidung-zeile { border-top: 1px solid rgba(255, 255, 255, .08); }
.nw-aus { margin-right: 1rem; }
.nw-radio { margin-left: auto; }
.nw-empfehlung { font-weight: 600; }

.nw-hinweis { margin: 0 0 .7rem; min-height: 1.2rem; font-size: .9rem; color: var(--nw-marke); }

/* --- Rückmeldung nach der Abgabe --------------------------------------- */

.nw-abschnitte { display: grid; gap: .5rem; margin-top: .8rem; }
.nw-abschnitt {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
    padding: .45rem .6rem;
    border-left: 3px solid var(--nw-rand);
    border-radius: 0 6px 6px 0;
    background: rgba(255, 255, 255, .04);
    font-size: .9rem;
}
.nw-abschnitt-gut { border-left-color: var(--nw-gut); }
.nw-abschnitt-falsch { border-left-color: var(--nw-falsch); }
.nw-abschnitt-titel { font-weight: 600; }
.nw-abschnitt-wort { color: rgba(255, 255, 255, .8); }

.nw-feld-richtig { border-color: var(--nw-gut); }
.nw-feld-falsch { border-color: var(--nw-falsch); }

.nw-loesung {
    margin: .6rem 0 0;
    padding: .45rem .6rem;
    border-left: 3px solid var(--nw-gut);
    background: rgba(125, 223, 154, .1);
    border-radius: 0 6px 6px 0;
    font-size: .9rem;
}

@media (max-width: 575px) {
    .nw-tabelle { font-size: .82rem; }
    .nw-feld { min-width: 2.8rem; max-width: 4rem; font-size: .82rem; padding: .2rem .2rem; }
    .nw-breit { min-width: 3.6rem; max-width: 5rem; }
    .nw-kriterium,
    .nw-tabelle thead th:first-child { min-width: 5rem; font-size: .8rem; }
    .nw-gewicht,
    .nw-tabelle thead th:nth-child(2) { left: 3.6rem; }
    .nw-radio { margin-left: 0; }
}