/* ─────────────────────────────────────────────────────────────
   ZeugnisKlar – Utility-Klassen

   Ersetzt die frueheren style="..."-Attribute im Markup. CSS gehoert
   in .css-Dateien: nur so ist es cachebar, an einer Stelle aenderbar
   und ueberhaupt ueberschreibbar. Ein Inline-Style gewinnt gegen jede
   Regel ausser !important — das faellt erst auf, wenn man es dringend
   braucht.

   Neue Utilities nur anlegen, wenn die Deklaration wirklich an
   mehreren Stellen gebraucht wird. Alles, was zu einer Komponente
   gehoert, gehoert in deren eigene Datei.
   ───────────────────────────────────────────────────────────── */

/* ── Sichtbarkeit ── */
/* Wird per JS ueber classList.remove('u-hidden') eingeblendet,
   nicht ueber element.style — sonst muesste man Inline-Styles setzen. */
.u-hidden { display: none; }

/* ── Abstaende ── */
.u-mt-2 { margin-top: var(--sp-2); }
.u-mt-4 { margin-top: var(--sp-4); }
.u-mt-5 { margin-top: var(--sp-5); }
.u-mt-6 { margin-top: var(--sp-6); }
.u-mb-3 { margin-bottom: var(--sp-3); }
.u-pt-8 { padding-top: var(--sp-8); }
.u-ml-auto { margin-left: auto; }

/* ── Flex und Grid ── */
.u-no-shrink { flex-shrink: 0; }
.u-span-full { grid-column: 1 / -1; }
.u-row-center {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  justify-content: center;
}

/* ── Groessen ── */
.u-w-auto { width: auto; }

/* ── Typografie ── */
.u-text-xs { font-size: var(--text-xs); }
.u-text-sm-muted {
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.u-accent-medium {
  color: var(--color-accent);
  font-weight: 500;
}
.u-link-plain {
  color: inherit;
  text-decoration: none;
}

/* ── Listen ── */
.u-list-plain {
  list-style: none;
  padding: var(--sp-5) var(--sp-6);
}

/* ── Icons im Fliesstext ── */
.u-icon-inline {
  display: inline-block;
  vertical-align: -3px;
  margin-right: 0.25rem;
}
.u-icon-accent {
  color: var(--color-accent);
  vertical-align: middle;
  margin-right: 4px;
}
.u-color-accent { color: var(--color-accent); }

/* ─────────────────────────────────────────────────────────────
   Ausnahme, bewusst dokumentiert

   Drei Stellen setzen weiterhin ein style-Attribut per JavaScript:
   die Fortschrittsleiste des Score-Balkens, der Career-Impact-Balken
   und der SVG-Ring (stroke-dashoffset). Dort steht kein Design im
   Attribut, sondern ein zur Laufzeit berechneter Wert — also Daten.
   Solche Werte lassen sich nicht in eine .css-Datei auslagern; das
   Aussehen selbst steckt in den Klassen daneben.
   ───────────────────────────────────────────────────────────── */