/*
 * Komponenten der Herzig-Web-UI.
 *
 * Regeln fuer diese Datei:
 *  - Nur Tokens aus tokens.css verwenden, keine rohen Farbwerte.
 *  - Kein Framework, kein Build-Schritt, kein JavaScript-Zwang (E-003).
 *  - Neue Bausteine tragen das Praefix `hc-`. Element-Selektoren gelten nur
 *    fuer Basistypografie und Formulare; alles andere haengt an einer Klasse.
 *  - Bezeichner Englisch, Kommentare Deutsch (Haus-Regel E-004, sinngemaess).
 */

/* ====================================================================
 * 1 — Basis
 * ================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--hc-font);
  font-size: var(--hc-text-base);
  line-height: var(--hc-leading-normal);
  color: var(--hc-ink-body);
  background: var(--hc-canvas);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--hc-ink);
  font-weight: var(--hc-weight-bold);
  line-height: var(--hc-leading-tight);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--hc-text-3xl); }
h2 { font-size: var(--hc-text-2xl); }
h3 { font-size: var(--hc-text-xl); }
h4 { font-size: var(--hc-text-lg); }

p { margin: 0 0 var(--hc-space-4); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--hc-navy);
  text-decoration-color: color-mix(in srgb, var(--hc-navy) 35%, transparent);
  text-underline-offset: 0.15em;
}
a:hover { text-decoration-color: currentColor; }

small { font-size: var(--hc-text-sm); }

svg { display: block; }

:focus-visible {
  outline: 2px solid var(--hc-orange-600);
  outline-offset: 2px;
  border-radius: var(--hc-radius-sm);
}

/* Nur fuer Screenreader — z. B. Beschriftung eines Icon-Buttons. */
.hc-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ====================================================================
 * 2 — Grundgeruest: Kopfleiste, Seitenleiste, Inhalt, Fuss
 * ================================================================== */

.hc-app {
  display: grid;
  grid-template-columns: var(--hc-sidebar-width) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "topbar  topbar"
    "sidebar content";
  min-height: 100vh;
}

/* Anmeldeseite: Kopfleiste und Inhalt, keine Seitenleiste — sie ist die
   einzige Seite ohne Sitzung, und eine Navigation waere dort sinnlos. */
.hc-app--plain {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "topbar"
    "content";
}

/* Eine Seite ohne Seitenleiste traegt keine Liste und keine Akte, sondern
   genau eine Karte — die gehoert in die Mitte des Inhaltsbereichs und nicht
   in die linke obere Ecke. Die Regel haengt bewusst an .hc-app--plain statt
   an einem eigenen Modifier am <main>: So kann keine kuenftige Seite ohne
   Seitenleiste die Zentrierung vergessen. Die Breitenbegrenzung sitzt an den
   Kindern, weil <main> selbst die volle Flaeche braucht, um mittig zu sein.
   Der Abstand der Kinder untereinander kommt weiter aus .hc-main > * + *. */
.hc-app--plain .hc-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hc-app--plain .hc-main > * { width: min(24rem, 100%); }

.hc-topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: var(--hc-space-6);
  min-height: var(--hc-topbar-height);
  padding: var(--hc-space-3) var(--hc-space-6);
  background: var(--hc-canvas);
  border-bottom: 1px solid var(--hc-border);
}

.hc-topbar__spacer { flex: 1 1 auto; }

.hc-sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  gap: var(--hc-space-6);
  padding: var(--hc-space-6) var(--hc-space-4);
  background: var(--hc-canvas);
  border-right: 1px solid var(--hc-border);
}

.hc-sidebar__foot { margin-top: auto; }

/* Traegt Hauptinhalt und Fusszeile; die Fusszeile bleibt unten stehen,
 * auch wenn der Inhalt kurz ist. */
.hc-content {
  grid-area: content;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--hc-surface);
}

.hc-main {
  flex: 1 1 auto;
  padding: var(--hc-space-8) var(--hc-space-8) var(--hc-space-6);
}

.hc-main > * + * { margin-top: var(--hc-space-6); }

.hc-footer {
  padding: var(--hc-space-6) var(--hc-space-8) var(--hc-space-8);
  color: var(--hc-muted);
  font-size: var(--hc-text-sm);
  text-align: center;
  background: var(--hc-surface);
}

.hc-footer strong { color: var(--hc-ink); font-weight: var(--hc-weight-semibold); }

/* ====================================================================
 * 3 — Marke
 * ================================================================== */

/* Das Logo ist eine Bilddatei, keine Schrift: Bild- und Wortmarke stecken
 * gemeinsam darin. Deshalb setzt die UI hier keine Typografie — sie zeigt
 * das gelieferte Original und skaliert es nur ueber die Hoehe. Seit K-180
 * ist es ein SVG, die Hoehenangabe traegt also jede Aufloesung. */
.hc-brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  text-decoration: none;
}

.hc-brand__logo { display: block; height: 2rem; width: auto; }

/* Nur die Bildmarke — springt auf schmalen Geraeten ein, wo das volle
 * Logo die Kopfleiste sprengen wuerde. */
.hc-brand__mark { display: none; height: 2rem; width: auto; }

.hc-brand--lg .hc-brand__logo,
.hc-brand--lg .hc-brand__mark { height: 2.75rem; }

/* Die Firmierung der angemeldeten Organisation, rechts neben dem Logo und
 * durch eine Linie abgesetzt.
 *
 * SIE HAT DEN CLAIM ERSETZT (K-180) UND NICHT NUR VERDRAENGT. Der Vorrats-
 * Grundsatz des Baukastens schuetzt Bausteine mit kuenftigem Abnehmer; ein
 * Produkt-Claim neben dem Namen einer FREMDEN Organisation hat keinen — er
 * stuende nur bereit, damit ihn jemand zurueckstellt.
 *
 * Sie ist Inhalt und nicht Beiwerk, deshalb dunkler und schwerer als der
 * Claim es war. Ein langer Firmenname darf die Kopfleiste trotzdem nicht
 * auseinanderdruecken: min-width laesst das Flex-Kind schrumpfen (ohne die
 * Null greift text-overflow nie), der Rest kuerzt mit Auslassungspunkten. */
.hc-org {
  min-width: 0;
  padding-left: var(--hc-space-6);
  border-left: 1px solid var(--hc-border);
  color: var(--hc-ink-body);
  font-size: var(--hc-text-md);
  font-weight: var(--hc-weight-semibold);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ====================================================================
 * 4 — Navigation
 * ================================================================== */

/* Waagerechte Navigation in der Kopfleiste. */
.hc-topnav {
  display: flex;
  align-items: center;
  gap: var(--hc-space-6);
}

.hc-topnav a {
  color: var(--hc-ink-body);
  font-size: var(--hc-text-md);
  font-weight: var(--hc-weight-medium);
  text-decoration: none;
  padding: var(--hc-space-2) 0;
  border-bottom: 2px solid transparent;
  transition: border-color var(--hc-transition), color var(--hc-transition);
}

.hc-topnav a:hover { color: var(--hc-ink); border-bottom-color: var(--hc-orange-200); }
.hc-topnav a[aria-current] { color: var(--hc-ink); border-bottom-color: var(--hc-orange); }

/* Senkrechte Hauptnavigation in der Seitenleiste. */
.hc-nav {
  display: flex;
  flex-direction: column;
  gap: var(--hc-space-1);
}

.hc-nav__item {
  display: flex;
  align-items: center;
  gap: var(--hc-space-3);
  padding: var(--hc-space-3) var(--hc-space-4);
  border-radius: var(--hc-radius-lg);
  color: var(--hc-ink-body);
  font-size: var(--hc-text-md);
  font-weight: var(--hc-weight-medium);
  text-decoration: none;
  transition: background var(--hc-transition), color var(--hc-transition);
}

.hc-nav__item:hover { background: var(--hc-orange-050); color: var(--hc-ink); }

.hc-nav__item[aria-current] {
  background: var(--hc-orange-200);
  color: var(--hc-ink);
  font-weight: var(--hc-weight-semibold);
}

.hc-nav__icon { flex: none; width: 1.5rem; height: 1.5rem; }

/* Zaehlerpunkt am Icon, z. B. offene Mahnungen. Der Punkt haengt an einem
 * umschliessenden <span>: ein <svg> kann keine Pseudo-Elemente tragen. */
.hc-nav__dot {
  position: relative;
  display: inline-flex;
  flex: none;
}
.hc-nav__dot::after {
  content: "";
  position: absolute;
  top: -1px; right: -1px;
  width: 0.5rem; height: 0.5rem;
  background: var(--hc-orange);
  border: 2px solid var(--hc-canvas);
  border-radius: var(--hc-radius-pill);
}

.hc-nav__divider {
  height: 1px;
  margin: var(--hc-space-4) var(--hc-space-4);
  background: var(--hc-border);
  border: 0;
}

/* ====================================================================
 * 5 — Karten
 * ================================================================== */

.hc-card {
  padding: var(--hc-space-6);
  background: var(--hc-surface);
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-radius-lg);
  box-shadow: var(--hc-shadow-sm);
}

.hc-card--flush { padding: 0; }
.hc-card--sunken { background: var(--hc-canvas); }

.hc-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hc-space-4);
  margin-bottom: var(--hc-space-5);
}

.hc-card__title { font-size: var(--hc-text-xl); }

.hc-card__foot {
  margin-top: var(--hc-space-5);
  padding-top: var(--hc-space-4);
  border-top: 1px solid var(--hc-divider);
}

/* Zwei-Spalten-Aufteilung des Inhalts (breit / schmal). */
.hc-columns {
  display: grid;
  gap: var(--hc-space-6);
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  align-items: start;
}

.hc-columns--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ====================================================================
 * 6 — Seitenkopf
 * ================================================================== */

.hc-pagehead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--hc-space-6);
  flex-wrap: wrap;
}

.hc-pagehead__title { font-size: var(--hc-text-3xl); }
.hc-pagehead__sub { margin: var(--hc-space-2) 0 0; color: var(--hc-muted); }

/* Datums- oder Filterwaehler: sieht aus wie ein Feld, ist ein Button. */
.hc-picker {
  display: inline-flex;
  align-items: center;
  gap: var(--hc-space-3);
  padding: var(--hc-space-3) var(--hc-space-4);
  background: var(--hc-surface);
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-radius-md);
  color: var(--hc-ink);
  font: inherit;
  font-weight: var(--hc-weight-medium);
  cursor: pointer;
}

.hc-picker:hover { border-color: var(--hc-border-strong); }
.hc-picker svg { width: 1.25rem; height: 1.25rem; }
.hc-picker__caret { color: var(--hc-muted); }

/* AUF VORRAT — dieser Abschnitt hat heute keine Seite, die ihn benutzt.
 * Das ist Absicht (K-026): Die Bausteine liegen bereit, damit eine kuenftige
 * Funktion sofort im richtigen Gewand entsteht, statt dass jemand mittendrin
 * CSS erfindet. Nicht als "totes CSS" entfernen — auch nicht beim Aufraeumen
 * in Etappe 4, das nur die Kompatibilitaetsschicht (Abschnitt 18) betrifft.
 */
/* ====================================================================
 * 7 — Kennzahlen
 * ================================================================== */

.hc-kpi-grid {
  display: grid;
  gap: var(--hc-space-5);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.hc-kpi {
  display: flex;
  flex-direction: column;
  gap: var(--hc-space-3);
  padding: var(--hc-space-5);
  background: var(--hc-surface);
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-radius-lg);
}

/* Eine Kennzahl darf ein Link sein — seit K-105 Etappe 2 fuehrt jede
 * Konto-Kachel auf ihre Kontoseite. Ohne diese Regel erbt sie die
 * Unterstreichung der Basis-Regel fuer a, und zwar auf JEDEM Kindelement:
 * Beschriftung, Betrag und Fusszeile stuenden dreifach unterstrichen da.
 * Dasselbe Muster wie bei .hc-brand.
 *
 * Die Klickbarkeit zeigt stattdessen der Hover — wie bei den Tabellenzeilen. */
a.hc-kpi {
  text-decoration: none;
  transition: border-color var(--hc-transition), background var(--hc-transition);
}

a.hc-kpi:hover {
  border-color: var(--hc-orange-300);
  background: var(--hc-orange-050);
}

.hc-kpi__label {
  color: var(--hc-ink-body);
  font-size: var(--hc-text-md);
  font-weight: var(--hc-weight-medium);
  line-height: var(--hc-leading-snug);
}

/* Geldbetraege sollen nicht umbrechen; bei schmalen Karten schrumpft die
 * Schrift stattdessen mit. */
.hc-kpi__value {
  color: var(--hc-ink);
  font-size: clamp(2rem, 3.2vw, var(--hc-text-kpi));
  font-weight: var(--hc-weight-bold);
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.hc-kpi__foot {
  display: flex;
  align-items: center;
  gap: var(--hc-space-2);
  color: var(--hc-muted);
  font-size: var(--hc-text-sm);
}

/* Veraenderung gegenueber der Vorperiode. Richtung und Bewertung sind
 * getrennt: ein steigender Wert kann gut (Umsatz) oder schlecht
 * (ueberfaellige Zahlungen) sein — deshalb `--up`/`--down` fuer den Pfeil
 * und `--good`/`--bad` fuer die Farbe. */
.hc-delta {
  display: inline-flex;
  align-items: center;
  gap: var(--hc-space-1);
  font-weight: var(--hc-weight-semibold);
}

.hc-delta--good { color: var(--hc-success); }
.hc-delta--bad { color: var(--hc-danger); }
.hc-delta svg { width: 1rem; height: 1rem; }

/* ====================================================================
 * 8 — Motive, Icon-Kreise und Avatare
 * ================================================================== */

/* Motiv (96 × 96) aus Patricks Satz. Diese Zeichnungen bringen ihren
 * farbigen Kreis selbst mit — sie gehoeren NICHT in ein .hc-iconcircle,
 * sonst liegt Kreis auf Kreis. */
/* Groessen am Entwurf abgemessen: Kennzahl-Motiv rund 72 px,
 * Aufgaben-Motiv rund 52 px. */
.hc-motif {
  display: block;
  flex: none;
  width: 4.5rem;
  height: 4.5rem;
}

.hc-motif--sm { width: 3.25rem; height: 3.25rem; }
.hc-motif--lg { width: 6rem; height: 6rem; }

/* Illustration (160 × 160), rein dekorativ. Traegt nie Information und
 * verschwindet deshalb auf schmalen Geraeten ersatzlos. */
.hc-illu {
  display: block;
  flex: none;
  width: 7.5rem;
  height: 7.5rem;
  pointer-events: none;
}

.hc-illu--sm { width: 5.5rem; height: 5.5rem; }
.hc-illu--lg { width: 9.5rem; height: 9.5rem; }

/* Kreis fuer Faelle ohne fertiges Motiv — etwa ein Bedienelement-Icon,
 * das trotzdem wie ein Motiv wirken soll. */
.hc-iconcircle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--hc-radius-pill);
  background: var(--hc-sage-200);
  color: var(--hc-ink);
}

.hc-iconcircle svg { width: 1.75rem; height: 1.75rem; }

.hc-iconcircle--sm { width: 2.75rem; height: 2.75rem; }
.hc-iconcircle--sm svg { width: 1.375rem; height: 1.375rem; }

.hc-iconcircle--sage { background: var(--hc-sage-200); }
.hc-iconcircle--amber { background: var(--hc-amber); }
.hc-iconcircle--salmon { background: var(--hc-orange-300); }
.hc-iconcircle--peach { background: var(--hc-orange-200); }
.hc-iconcircle--navy { background: var(--hc-navy); color: var(--hc-surface); }

.hc-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--hc-radius-pill);
  background: var(--hc-navy);
  color: var(--hc-surface);
  font-size: var(--hc-text-sm);
  font-weight: var(--hc-weight-semibold);
  letter-spacing: 0.02em;
  /* Initialen stehen gross, egal wie der Benutzername geschrieben ist. */
  text-transform: uppercase;
  overflow: hidden;
}

.hc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hc-avatar--lg { width: 2.75rem; height: 2.75rem; font-size: var(--hc-text-md); }

/* Die Person in der Kopfleiste ist seit K-046 Etappe 1 ein <a> auf /account
   und war bis dahin ein <span>. Farbe und Unterstreichung stehen deshalb hier:
   Ohne sie erbte sie das Aussehen eines Textlinks und riss die Kopfleiste
   optisch auf. Die Unterstreichung kommt beim Zeigen zurueck, damit die
   Klickbarkeit nicht nur geraten werden muss. */
.hc-person {
  display: inline-flex;
  align-items: center;
  gap: var(--hc-space-3);
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

a.hc-person:hover .hc-person__name,
a.hc-person:focus-visible .hc-person__name { text-decoration: underline; }

.hc-person__name {
  color: var(--hc-ink-body);
  font-size: var(--hc-text-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Wie .hc-person__name: eine Zeile, abgeschnitten statt umgebrochen. Der
   Baustein lag bis K-046 ungenutzt im Katalog; mit der Position in der
   Kopfleiste bekommt er seinen ersten Nutzer, und ohne diese drei Zeilen
   umbricht eine lange Berufsbezeichnung dort, wo daneben ein Name schon
   abgeschnitten wird — zwei Regeln fuer dieselbe Zeile (gesehen im Browser
   am 2026-09-11, "Stellvertretende Leiterin Rechnungswesen und Controlling"). */
.hc-person__role {
  color: var(--hc-muted);
  font-size: var(--hc-text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ====================================================================
 * 9 — Badges
 * ================================================================== */

.hc-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--hc-space-1);
  padding: 0.2rem var(--hc-space-3);
  border-radius: var(--hc-radius-sm);
  background: var(--hc-surface-sunken);
  color: var(--hc-ink-body);
  font-size: var(--hc-text-xs);
  font-weight: var(--hc-weight-semibold);
  line-height: 1.6;
  white-space: nowrap;
}

.hc-badge--high,
.hc-badge--danger { background: var(--hc-orange-100); color: var(--hc-danger); }

.hc-badge--medium,
.hc-badge--warning { background: var(--hc-amber-100); color: var(--hc-warning); }

.hc-badge--low,
.hc-badge--success { background: var(--hc-sage-100); color: var(--hc-success); }

.hc-badge--info { background: var(--hc-info-bg); color: var(--hc-info); }
.hc-badge--pill { border-radius: var(--hc-radius-pill); padding-inline: var(--hc-space-4); }
.hc-badge--lg { font-size: var(--hc-text-sm); padding: var(--hc-space-2) var(--hc-space-4); }

/* Zaehlpunkt an einem Icon-Button (Glocke). */
.hc-dot-host { position: relative; }
.hc-dot-host::after {
  content: "";
  position: absolute;
  top: 0.15rem; right: 0.15rem;
  width: 0.5rem; height: 0.5rem;
  background: var(--hc-orange);
  border-radius: var(--hc-radius-pill);
}

/* ====================================================================
 * 10 — Buttons
 * ================================================================== */

.hc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hc-space-2);
  padding: var(--hc-space-3) var(--hc-space-5);
  border: 1px solid transparent;
  border-radius: var(--hc-radius-md);
  background: var(--hc-navy);
  color: var(--hc-surface);
  font: inherit;
  font-weight: var(--hc-weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--hc-transition), border-color var(--hc-transition),
              color var(--hc-transition);
}

.hc-btn:hover { background: var(--hc-navy-700); }
.hc-btn svg { width: 1.125rem; height: 1.125rem; }

/* Schriftfarbe kommt aus --hc-on-orange, siehe Begruendung in tokens.css. */
.hc-btn--primary { background: var(--hc-orange); color: var(--hc-on-orange); }
.hc-btn--primary:hover { background: var(--hc-orange-600); }

.hc-btn--ghost {
  background: transparent;
  border-color: var(--hc-border-strong);
  color: var(--hc-ink);
}
.hc-btn--ghost:hover { background: var(--hc-orange-050); border-color: var(--hc-orange-200); }

.hc-btn--quiet {
  background: transparent;
  color: var(--hc-ink);
  padding-inline: var(--hc-space-2);
}
.hc-btn--quiet:hover { background: var(--hc-orange-050); }

/* Zurueckhaltende Zerstoerungs-Aktion: erst im Hover deutlich rot. */
.hc-btn--danger {
  background: transparent;
  border-color: var(--hc-border-strong);
  color: var(--hc-danger);
}
.hc-btn--danger:hover { background: var(--hc-orange-100); border-color: var(--hc-danger); }

.hc-btn--sm { padding: var(--hc-space-2) var(--hc-space-4); font-size: var(--hc-text-sm); }
.hc-btn--block { width: 100%; }
.hc-btn--pill { border-radius: var(--hc-radius-pill); }

.hc-btn[disabled],
.hc-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/* Reiner Icon-Button, z. B. Glocke in der Kopfleiste. */
.hc-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--hc-radius-pill);
  color: var(--hc-ink);
  cursor: pointer;
  transition: background var(--hc-transition);
}

.hc-iconbtn:hover { background: var(--hc-orange-050); }
.hc-iconbtn svg { width: 1.5rem; height: 1.5rem; }

/* Textlink mit Pfeil als Kartenabschluss. */
.hc-arrowlink {
  display: inline-flex;
  align-items: center;
  gap: var(--hc-space-2);
  color: var(--hc-ink);
  font-weight: var(--hc-weight-semibold);
  text-decoration: none;
}
.hc-arrowlink svg { width: 1.125rem; height: 1.125rem; transition: transform var(--hc-transition); }
.hc-arrowlink:hover svg { transform: translateX(3px); }

/* ====================================================================
 * 11 — Formulare
 * ================================================================== */

.hc-form {
  display: flex;
  flex-direction: column;
  gap: var(--hc-space-4);
}

.hc-form--narrow { max-width: 26rem; }
/* Regelbreite fuer mehrspaltig gedachte Stammdatenformulare. Ohne Begrenzung
   laufen Eingabefelder ueber die volle Inhaltsbreite und werden unlesbar. */
.hc-form--medium { max-width: 40rem; }

/* Ein Feld, das seiner Natur nach kurz ist (PLZ, Laenderkuerzel). Im
   hc-form__pair regelt stattdessen die flex-Basis die Breite. */
.hc-field--narrow { max-width: 8rem; }

.hc-field {
  display: flex;
  flex-direction: column;
  gap: var(--hc-space-2);
}

/* Das :not() ist kein Schmuck: Der Hinweis steht als zweites span im selben
   hc-field, und ".hc-field > span" (0,1,1) schlaegt ".hc-field__hint" (0,1,0).
   Ohne den Ausschluss erbt der Hinweis Farbe und Fettung des Labels und sieht
   aus wie ein zweites Label — im Browser gesehen, K-026 Etappe 3b. */
.hc-field > span:not(.hc-field__hint),
.hc-label {
  color: var(--hc-ink);
  font-size: var(--hc-text-sm);
  font-weight: var(--hc-weight-semibold);
}

.hc-field__hint {
  color: var(--hc-muted);
  font-size: var(--hc-text-sm);
  font-weight: var(--hc-weight-regular);
}

/* Das Datei-Auswahlfeld (K-046 Etappe 2, erster Nutzer: der Avatar-Upload).
   Es fehlte im Baukasten; nach K-026 Regel 3 entsteht es hier und nicht als
   Sonderfall im Template.

   DER KNOPF IM FELD IST DER TEIL, DEN DER BROWSER SELBST ZEICHNET, und er
   laesst sich nur ueber ::file-selector-button ansprechen — nicht ueber die
   gewoehnlichen Eingabefeld-Regeln weiter oben, die input[type="file"]
   bewusst nicht aufzaehlen. Ohne diese Regeln stuende im Formular ein
   Systemknopf in Systemschrift neben Knoepfen im Hausstil.

   DIE FARBEN SIND DIE DES hc-btn--ghost, mit Absicht: Der Knopf oeffnet einen
   Dateidialog und sendet nichts ab — er darf nicht aussehen wie die
   Hauptaktion daneben. */
.hc-field--file input[type="file"] {
  width: 100%;
  padding: var(--hc-space-2);
  font: inherit;
  font-size: var(--hc-text-sm);
  color: var(--hc-ink-body);
  background: var(--hc-surface);
  border: 1px solid var(--hc-border-strong);
  border-radius: var(--hc-radius-md);
}

.hc-field--file input[type="file"]::file-selector-button {
  margin-right: var(--hc-space-3);
  padding: var(--hc-space-2) var(--hc-space-4);
  font: inherit;
  font-size: var(--hc-text-sm);
  font-weight: var(--hc-weight-semibold);
  color: var(--hc-ink);
  background: var(--hc-surface-sunken);
  border: 1px solid var(--hc-border-strong);
  border-radius: var(--hc-radius-sm);
  cursor: pointer;
  transition: background var(--hc-transition), border-color var(--hc-transition);
}

.hc-field--file input[type="file"]::file-selector-button:hover {
  background: var(--hc-orange-050);
  border-color: var(--hc-orange);
}

/* Der Fokusring steht auf dem FELD und nicht auf dem Knopf darin: Die
   Tabulatortaste erreicht das input, nicht seinen inneren Knopf — ein Ring nur
   am Knopf bliebe beim Durchtabben unsichtbar. */
.hc-field--file input[type="file"]:focus-visible {
  outline: none;
  border-color: var(--hc-orange);
  box-shadow: var(--hc-shadow-focus);
}

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="search"],
input[type="tel"], input[type="url"], select, textarea {
  width: 100%;
  padding: var(--hc-space-3) var(--hc-space-4);
  font: inherit;
  color: var(--hc-ink);
  background: var(--hc-surface);
  border: 1px solid var(--hc-border-strong);
  border-radius: var(--hc-radius-md);
  transition: border-color var(--hc-transition), box-shadow var(--hc-transition);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--hc-orange);
  box-shadow: var(--hc-shadow-focus);
}

input::placeholder, textarea::placeholder { color: var(--hc-muted-soft); }
textarea { min-height: 7rem; resize: vertical; }

/* Zwei Felder nebeneinander, wo sie fachlich zusammengehoeren (PLZ und Ort).
   Das schmale Feld bekommt hc-field--narrow. */
.hc-form__pair { display: flex; gap: var(--hc-space-4); }
.hc-form__pair > .hc-field { flex: 1 1 0; min-width: 0; }
.hc-form__pair > .hc-field--narrow { flex: 0 0 8rem; }

.hc-form__actions {
  display: flex;
  align-items: center;
  gap: var(--hc-space-3);
  flex-wrap: wrap;
}

.hc-error {
  padding: var(--hc-space-3) var(--hc-space-4);
  background: var(--hc-orange-100);
  border-left: 3px solid var(--hc-danger);
  border-radius: var(--hc-radius-sm);
  color: var(--hc-danger);
  font-size: var(--hc-text-base);
}

/* Der Hinweis ist kein Fehler: Er verhindert nichts, er begleitet etwas, das
 * stattgefunden hat — heute die Dublettenerkennung aus E-009. Deshalb trägt er
 * die Info-Farbe und nicht die Warnfarbe von .hc-error; wer beide gleich
 * einfärbt, macht aus jedem Hinweis einen Fehlalarm und aus jedem Fehler ein
 * Achselzucken. Aufbau und Maße bleiben gleich, damit sie an derselben Stelle
 * gleich schwer wiegen. */
.hc-note {
  padding: var(--hc-space-3) var(--hc-space-4);
  background: var(--hc-info-bg);
  border-left: 3px solid var(--hc-info);
  border-radius: var(--hc-radius-sm);
  color: var(--hc-info);
  font-size: var(--hc-text-base);
}

/* Die dritte Stufe zwischen Hinweis und Fehler (K-093): Der Vorgang findet
 * statt, aber der Benutzer verlässt einen vorgesehenen Weg. .hc-note traegt
 * die Info-Farbe und waere zu leise — es ist kein beilaeufiger Begleittext;
 * .hc-error waere falsch, weil nichts fehlschlaegt und nichts zu beheben ist.
 * Aufbau und Maße bleiben wie bei beiden, damit die drei an derselben Stelle
 * vergleichbar wiegen und sich allein in der Farbe unterscheiden. */
.hc-note--warning {
  background: var(--hc-warning-bg);
  border-left-color: var(--hc-warning);
  color: var(--hc-warning);
}

/* Eine Checkbox mit ihrer Beschriftung in einer Zeile (K-093).
 *
 * DAS LABEL UMSCHLIESST DIE CHECKBOX, statt ueber "for" auf sie zu zeigen:
 * Damit ist die Beschriftung selbst Klickflaeche, ohne dass jemand eine id
 * vergeben und sie eindeutig halten muss. Der Text darf umbrechen, die
 * Checkbox nicht schrumpfen — deshalb align-items: flex-start und ein
 * flex-shrink von 0 am Kaestchen.
 *
 * WARUM NICHT .hc-field: Das stellt Label ueber Feld (flex-direction: column)
 * und setzt die Beschriftung fett. Beides ist hier falsch — eine Checkbox
 * steht neben ihrem Text, und ein fetter Text neben einem Kaestchen liest sich
 * als Ueberschrift statt als Wahlmoeglichkeit. */
.hc-check {
  display: flex;
  align-items: flex-start;
  gap: var(--hc-space-3);
  cursor: pointer;
}

.hc-check > input[type="checkbox"] {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  accent-color: var(--hc-orange);
}

.hc-check__text {
  color: var(--hc-ink);
  font-size: var(--hc-text-sm);
}

/* Ein Wert, der genau einmal zu sehen ist und abgeschrieben werden muss —
 * heute der Klartext eines frisch erzeugten API-Tokens (K-046 Etappe 4).
 *
 * WARUM EIGENES CSS UND NICHT .hc-card MIT .hc-note: Beide tragen Fliesstext.
 * Dieser Kasten traegt einen Wert, der Zeichen fuer Zeichen stimmen muss —
 * Monospace ist hier keine Optik, sondern die Lesbarkeit von 0 gegen O.
 *
 * user-select: all MACHT DEN GANZEN WERT MIT EINEM KLICK MARKIERBAR. Ein
 * Kopierknopf waere die Alternative und braeuchte Javascript und die
 * Clipboard-API; ein Wort-Doppelklick trifft bei base64url nicht den ganzen
 * Wert, weil Bindestrich und Unterstrich als Wortgrenzen gelten.
 *
 * overflow-wrap: anywhere, WEIL DER WERT KEINE LEERZEICHEN HAT: Ohne die
 * Angabe schoebe er auf schmalen Fenstern die ganze Seite breiter. */
.hc-secret {
  padding: var(--hc-space-3) var(--hc-space-4);
  background: var(--hc-surface-sunken);
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-radius-sm);
  font-family: var(--hc-font-mono);
  font-size: var(--hc-text-base);
  color: var(--hc-ink);
  user-select: all;
  overflow-wrap: anywhere;
}

/* Mehrere Hinweise untereinander: Die Liste verliert ihre Aufzählungszeichen,
 * weil der farbige Balken links die Gruppe bereits zusammenfasst. */
.hc-note__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--hc-space-1);
}

/* --- Avatar-Zuschnitt (K-230 Etappe 2) ---------------------------------
 *
 * Der Baustein steht in einem Formular und wird von /static/avatar-crop.js
 * bedient. OHNE JAVASCRIPT BLEIBT ER UNSICHTBAR: Das Markup traegt `hidden`,
 * und erst das Skript nimmt es weg, sobald ein Bild im Canvas liegt. Der
 * Upload funktioniert ohne ihn unveraendert — der Server schneidet dann
 * zentriert zu (Plan K-230, Entscheidung H).
 *
 * DIE REGEL FUER [hidden] STEHT HIER MIT ABSICHT: Sobald ein Baustein sein
 * display selbst setzt, sticht das die Voreinstellung des Browsers fuer
 * `hidden` aus, und der Kasten stuende leer auf jeder Kontoseite. */
.hc-cropper {
  display: grid;
  gap: var(--hc-space-3);
  justify-items: start;
}

.hc-cropper[hidden] { display: none; }

/* Die Buehne traegt das Canvas und den Kreis darueber; position: relative ist
   der Bezug fuer das Overlay. */
.hc-cropper__stage {
  position: relative;
  width: min(20rem, 100%);
}

/* DAS CANVAS MISST 512 × 512 UND WIRD KLEINER DARGESTELLT: Die Attribute
   width/height im Markup sind das Zielmass des Servers, die CSS-Breite ist
   nur die Anzeige. avatar-crop.js rechnet die Mausbewegung ueber
   canvas.clientWidth um.

   touch-action: none, WEIL SONST DAS ZIEHEN DIE SEITE SCROLLT: Auf einem
   Telefon deutet der Browser den Wisch als Scrollgeste, bevor ein
   pointermove ankommt. */
.hc-cropper__canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  background: var(--hc-surface-sunken);
  border: 1px solid var(--hc-border-strong);
  border-radius: var(--hc-radius-md);
  touch-action: none;
  cursor: grab;
}

.hc-cropper__canvas:active { cursor: grabbing; }

.hc-cropper__canvas:focus-visible {
  outline: none;
  border-color: var(--hc-orange);
  box-shadow: var(--hc-shadow-focus);
}

/* DER RUNDE RAHMEN IST EINE KONTUR UND KEINE MASKE: Gespeichert wird das
   ganze Quadrat, gezeigt wird der Avatar spaeter als Kreis. Wer die Ecken
   abdunkelte, versteckte, was tatsaechlich in der Datenbank landet.
   Zwei Ringe, hell innen und dunkel aussen, damit die Linie auf hellen wie
   auf dunklen Bildern steht; pointer-events: none laesst das Ziehen durch. */
.hc-cropper__frame {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: inset 0 0 0 3px var(--hc-surface), inset 0 0 0 4px var(--hc-navy-500);
}

.hc-cropper__zoom {
  display: flex;
  align-items: center;
  gap: var(--hc-space-3);
  width: min(20rem, 100%);
  font-size: var(--hc-text-sm);
  font-weight: var(--hc-weight-medium);
  color: var(--hc-ink-body);
}

/* Der Regler waechst in die Restbreite; ohne min-width: 0 verweigert ein
   Flex-Kind das Schrumpfen unter seine Eigenbreite. */
.hc-cropper__zoom input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: var(--hc-orange);
}

.hc-cropper__hint {
  margin: 0;
  font-size: var(--hc-text-sm);
  color: var(--hc-muted);
}

/* ====================================================================
 * 12 — Tabellen
 * ================================================================== */

.hc-table-wrap { overflow-x: auto; }

.hc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--hc-text-base);
}

.hc-table th {
  padding: 0 var(--hc-space-3) var(--hc-space-3);
  color: var(--hc-muted);
  font-size: var(--hc-text-sm);
  font-weight: var(--hc-weight-semibold);
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--hc-divider);
}

.hc-table td {
  padding: var(--hc-space-4) var(--hc-space-3);
  border-bottom: 1px solid var(--hc-divider);
  vertical-align: middle;
}

.hc-table tbody tr:last-child td { border-bottom: 0; }
.hc-table tbody tr:hover { background: var(--hc-orange-050); }

.hc-table th:first-child, .hc-table td:first-child { padding-left: 0; }
.hc-table th:last-child, .hc-table td:last-child { padding-right: 0; }

/* Rechtsbuendig wird nur, was rechtsbuendig gehoert: Betraege und die
 * Aktionsspalte. Eine pauschale Regel auf :last-child wuerde sonst auch
 * gewoehnlichen Text wie „Ort" an die Kante schieben. */
.hc-table__action { text-align: right; }
.hc-table__num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hc-table__strong { color: var(--hc-ink); font-weight: var(--hc-weight-semibold); }
.hc-table__sub { display: block; color: var(--hc-muted); font-size: var(--hc-text-sm); }

/* Sortierbarer Spaltenkopf (K-041). Der Kopf ist ein Link auf dieselbe Liste
 * mit ?sort und ?dir. Er erbt Farbe und Groesse des Tabellenkopfs, damit er
 * nicht wie ein Textlink im Fliesstext aussieht; unterstrichen wird erst beim
 * Ueberfahren. Die sortierte Spalte traegt aria-sort am <th> und einen Pfeil
 * und steht in der Tintenfarbe. Den Zustand liest das CSS aus aria-sort, damit
 * es keine zweite Quelle dafuer gibt. */
.hc-sort {
  display: inline-flex;
  align-items: center;
  gap: var(--hc-space-1);
  color: inherit;
  text-decoration: none;
}
.hc-sort:hover { text-decoration: underline; }
.hc-sort svg { width: 0.875rem; height: 0.875rem; flex: none; }
.hc-table th[aria-sort] { color: var(--hc-ink); }

/* Summenblock unter einer Positionstabelle (K-029 Etappe 3). Die Beträge
 * stehen rechts und untereinander bündig; tabular-nums hält die Ziffern in
 * Spalten, sonst tanzen die Cent-Stellen von Zeile zu Zeile.
 *
 * Nur die Bruttosumme ist hervorgehoben — sie ist der Betrag, um den es geht.
 * Wer jede Zeile fett setzt, hebt keine mehr hervor. */
.hc-totals {
  margin-top: var(--hc-space-6);
  margin-left: auto;
  max-width: 28rem;
  display: grid;
  gap: var(--hc-space-1);
}

.hc-totals__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--hc-space-6);
}

.hc-totals__label { color: var(--hc-muted); }

.hc-totals__value {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--hc-ink);
}

/* Eine Steuergruppe (BG-23). Zurückgenommen, weil sie die Nettosumme
 * aufschlüsselt und keine eigene Endsumme ist. */
.hc-totals__row--tax { font-size: var(--hc-text-sm); }

/* Die Bruttosumme, über eine Linie abgesetzt. */
.hc-totals__row--sum {
  margin-top: var(--hc-space-2);
  padding-top: var(--hc-space-3);
  border-top: 1px solid var(--hc-border-strong);
  font-size: var(--hc-text-md);
  font-weight: var(--hc-weight-semibold);
}

.hc-totals__row--sum .hc-totals__label { color: var(--hc-ink); }

/* Aufgabenzeile: Icon-Kreis, Titel mit Unterzeile und Badge. */
.hc-task {
  display: flex;
  align-items: center;
  gap: var(--hc-space-4);
  min-width: 0;
}

.hc-task__body { min-width: 0; }
.hc-task__title { color: var(--hc-ink); font-weight: var(--hc-weight-semibold); }
.hc-task__meta { color: var(--hc-muted); font-size: var(--hc-text-sm); }
.hc-task__badge { margin-top: var(--hc-space-2); }

/* Leerzustand statt einer leeren Tabelle. */
.hc-empty {
  padding: var(--hc-space-10) var(--hc-space-6);
  color: var(--hc-muted);
  text-align: center;
}

/* Handlungsaufforderung unter einem Leerzustand. Benannt statt als
   Abstands-Hilfsklasse, damit das Markup den Zweck zeigt. */
.hc-empty__action { margin-top: var(--hc-space-4); }

/* Zeichen ueber einem Leerzustand — dasselbe Motiv wie in der Navigation
   desselben Bereichs. Es zentriert sich von selbst: .hc-empty ist bereits
   text-align: center und .hc-iconcircle ist inline-flex. Bleibt hier also
   nur der Abstand nach unten. */
.hc-empty__mark { margin-bottom: var(--hc-space-4); }

.hc-empty__title {
  margin-bottom: var(--hc-space-2);
  color: var(--hc-ink);
  font-size: var(--hc-text-lg);
  font-weight: var(--hc-weight-semibold);
}

/* ====================================================================
 * 13 — Beschreibungsliste (Stammdaten)
 * ================================================================== */

.hc-dl {
  display: grid;
  grid-template-columns: minmax(9rem, auto) minmax(0, 1fr);
  gap: var(--hc-space-3) var(--hc-space-6);
  margin: 0;
}

.hc-dl dt { color: var(--hc-muted); font-size: var(--hc-text-sm); }

/* overflow-wrap: anywhere, WEIL EIN WERT KEINE UMBRUCHSTELLE HABEN KANN
 * (E-Mail-Adresse, SHA-256, Dateiname): Die Spalte minmax(0, 1fr) darf zwar
 * schrumpfen, ein Wort ohne Umbruchstelle ragt trotzdem hinaus und macht die
 * ganze Seite breiter (K-240). anywhere statt break-word, weil es auch die
 * Mindestbreite der Zelle senkt. hc-nowrap am dd hebt die Regel auf. */
.hc-dl dd { margin: 0; color: var(--hc-ink); overflow-wrap: anywhere; }

/* AUF VORRAT — dieser Abschnitt hat heute keine Seite, die ihn benutzt.
 * Das ist Absicht (K-026): Die Bausteine liegen bereit, damit eine kuenftige
 * Funktion sofort im richtigen Gewand entsteht, statt dass jemand mittendrin
 * CSS erfindet. Nicht als "totes CSS" entfernen — auch nicht beim Aufraeumen
 * in Etappe 4, das nur die Kompatibilitaetsschicht (Abschnitt 18) betrifft.
 */
/* ====================================================================
 * 14 — Rangliste (z. B. dringendste Rechnungen)
 * ================================================================== */

.hc-rank {
  display: flex;
  flex-direction: column;
  gap: var(--hc-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: hc-rank;
}

.hc-rank__item {
  display: flex;
  align-items: center;
  gap: var(--hc-space-4);
}

.hc-rank__num {
  counter-increment: hc-rank;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2rem; height: 2rem;
  border-radius: var(--hc-radius-pill);
  background: var(--hc-orange);
  color: var(--hc-on-orange);
  font-size: var(--hc-text-sm);
  font-weight: var(--hc-weight-bold);
}

.hc-rank__num::before { content: counter(hc-rank); }

/* Ab Rang 3 nimmt die Dringlichkeit optisch ab. */
.hc-rank__item:nth-child(3) .hc-rank__num { background: var(--hc-amber-300); color: var(--hc-ink); }
.hc-rank__item:nth-child(n+4) .hc-rank__num { background: var(--hc-sage-200); color: var(--hc-ink); }

.hc-rank__body { flex: 1 1 auto; min-width: 0; }
.hc-rank__title { color: var(--hc-ink); font-weight: var(--hc-weight-semibold); }
.hc-rank__meta { color: var(--hc-muted); font-size: var(--hc-text-sm); }
.hc-rank__side { text-align: right; }
.hc-rank__amount {
  color: var(--hc-ink);
  font-weight: var(--hc-weight-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hc-rank__status { font-size: var(--hc-text-sm); }
.hc-rank__status--danger { color: var(--hc-danger); }
.hc-rank__status--warning { color: var(--hc-warning); }

/* AUF VORRAT — dieser Abschnitt hat heute keine Seite, die ihn benutzt.
 * Das ist Absicht (K-026): Die Bausteine liegen bereit, damit eine kuenftige
 * Funktion sofort im richtigen Gewand entsteht, statt dass jemand mittendrin
 * CSS erfindet. Nicht als "totes CSS" entfernen — auch nicht beim Aufraeumen
 * in Etappe 4, das nur die Kompatibilitaetsschicht (Abschnitt 18) betrifft.
 */
/* ====================================================================
 * 15 — Balkendiagramm
 *
 * Reines CSS-Grid, keine Bibliothek. Der Server setzt je Balken
 * `style="--hc-bar: 62%"` — ein berechneter Anteil vom Maximalwert.
 * ================================================================== */

.hc-chart {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--hc-space-2) var(--hc-space-3);
  align-items: stretch;
}

/* Die Beschriftungen sollen auf ihrer Gitterlinie liegen, nicht darunter
 * beginnen — deshalb ist die Achse um die halbe Zeilenhoehe nach oben
 * gerueckt. Das Polster unten haelt den Streifen der Monatsnamen frei. */
.hc-chart__yaxis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: -0.6em;
  padding-bottom: calc(1.5rem - 0.6em);
  color: var(--hc-muted);
  font-size: var(--hc-text-xs);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.hc-chart__plot {
  display: flex;
  align-items: flex-end;
  gap: var(--hc-space-3);
  height: 11rem;
  padding-bottom: 1.5rem;
  /* Gitternetz: Grundlinie plus je eine Linie auf jedem Viertel. Die
   * Deckelung oben kommt separat, weil das Muster bei 100 % endet. */
  background-image:
    linear-gradient(var(--hc-border), var(--hc-border)),
    repeating-linear-gradient(to top, var(--hc-border) 0 1px, transparent 1px 25%);
  background-size: 100% 1px, 100% calc(100% - 1.5rem);
  background-position: left top, left bottom;
  background-repeat: no-repeat, no-repeat;
}

.hc-chart__col {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  flex: 1 1 0;
  height: 100%;
  min-width: 0;
}

.hc-chart__bar {
  width: 100%;
  max-width: 2.25rem;
  height: var(--hc-bar, 0%);
  min-height: 2px;
  background: var(--hc-sage-300);
  border-radius: var(--hc-radius-sm) var(--hc-radius-sm) 0 0;
}

.hc-chart__col--accent .hc-chart__bar { background: var(--hc-sage); }

/* Beschriftung sitzt in dem 1,5 rem hohen Streifen unter der Plotflaeche. */
.hc-chart__label {
  position: absolute;
  bottom: -1.5rem;
  margin: 0;
  color: var(--hc-muted);
  font-size: var(--hc-text-xs);
  line-height: 1.5rem;
  white-space: nowrap;
}

.hc-chart__caption {
  margin-bottom: var(--hc-space-4);
  color: var(--hc-ink-body);
  font-size: var(--hc-text-base);
}

/* ====================================================================
 * 16 — Statuszeile und Hinweise
 * ================================================================== */

.hc-status {
  padding: var(--hc-space-3) var(--hc-space-4);
  background: var(--hc-surface);
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-radius-md);
  font-size: var(--hc-text-sm);
}

.hc-status__head {
  display: flex;
  align-items: center;
  gap: var(--hc-space-2);
  color: var(--hc-ink);
  font-weight: var(--hc-weight-semibold);
}

.hc-status__text { color: var(--hc-muted); }

.hc-dot {
  flex: none;
  width: 0.6rem; height: 0.6rem;
  border-radius: var(--hc-radius-pill);
  background: var(--hc-sage);
}

.hc-dot--warning { background: var(--hc-amber); }
.hc-dot--danger { background: var(--hc-orange); }

/* Benutzerzeile am Fuss der Seitenleiste. */
.hc-userbar {
  display: flex;
  align-items: center;
  gap: var(--hc-space-3);
  width: 100%;
  padding: var(--hc-space-3);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--hc-border);
  border-radius: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.hc-userbar:hover { background: var(--hc-orange-050); }
.hc-userbar__body { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.hc-userbar__name { color: var(--hc-ink); font-weight: var(--hc-weight-semibold); }
.hc-userbar__role { color: var(--hc-muted); font-size: var(--hc-text-sm); }
.hc-userbar svg { width: 1.25rem; height: 1.25rem; color: var(--hc-muted); }

/* Kartenfuss mit Illustration: Text links, Zeichnung rechts. */
.hc-card__foot--illu {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--hc-space-4);
}

/* ====================================================================
 * 17 — Hilfsklassen
 * ================================================================== */

/* Das Icon-Sprite steht einmal je Seite direkt nach <body> und wird nur als
   Symbolvorrat gebraucht — nie sichtbar. Das Verstecken MUSS hier stehen und
   darf kein style-Attribut sein: Die CSP (default-src 'self', ADR-001 Punkt 8)
   entwertet Style-Attribute, das Sprite stuende sonst offen auf jeder Seite. */
.hc-sprite { display: none; }

.hc-muted { color: var(--hc-muted); }
.hc-strong { color: var(--hc-ink); font-weight: var(--hc-weight-semibold); }
.hc-danger-text { color: var(--hc-danger); font-weight: var(--hc-weight-semibold); }
.hc-warning-text { color: var(--hc-warning); font-weight: var(--hc-weight-semibold); }
.hc-success-text { color: var(--hc-success); font-weight: var(--hc-weight-semibold); }
.hc-num { font-variant-numeric: tabular-nums; }
.hc-nowrap { white-space: nowrap; }

.hc-stack { display: flex; flex-direction: column; gap: var(--hc-space-4); }
.hc-stack--sm { gap: var(--hc-space-2); }
.hc-row { display: flex; align-items: center; gap: var(--hc-space-3); flex-wrap: wrap; }
.hc-row--between { justify-content: space-between; }
.hc-row--end { justify-content: flex-end; }

.hc-bignum {
  color: var(--hc-ink);
  font-size: var(--hc-text-kpi);
  font-weight: var(--hc-weight-bold);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* ====================================================================
 * 18 — Anpassung an Geraet und Nutzerwunsch
 * ================================================================== */

@media (max-width: 60rem) {
  .hc-app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "topbar"
      "sidebar"
      "content";
  }

  .hc-sidebar {
    flex-direction: row;
    align-items: center;
    gap: var(--hc-space-4);
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--hc-border);
  }

  .hc-sidebar__foot,
  .hc-sidebar .hc-status,
  .hc-illu { display: none; }

  .hc-form__pair { flex-direction: column; }
  .hc-form__pair > .hc-field--narrow { flex: 1 1 auto; }

  .hc-nav { flex-direction: row; }
  .hc-nav__divider { display: none; }

  .hc-columns { grid-template-columns: minmax(0, 1fr); }
  .hc-main { padding: var(--hc-space-5) var(--hc-space-4); }
}

@media (max-width: 40rem) {
  :root { --hc-text-3xl: 1.75rem; --hc-text-kpi: 2.25rem; }
  .hc-topnav { display: none; }
  .hc-table__action { text-align: left; }
  .hc-brand__logo { display: none; }
  .hc-brand__mark { display: block; }

  /* Unter 40 rem teilen sich Zeichen, Firmierung, Person und Abmelden-Knopf
   * rund 600 px. Der Claim fiel hier frueher ganz weg, weil er Beiwerk war;
   * die Firmierung ist Auskunft und bleibt — sie kuerzt sich stattdessen und
   * gibt den Abstand zur Linie auf. */
  .hc-org {
    padding-left: var(--hc-space-4);
    font-size: var(--hc-text-base);
  }

  /* DAFUER WEICHT HIER DER BENUTZERNAME. Gemessen bei 560 px: Mit beiden
   * kuerzte die Leiste "patrick" auf "pa…" — zwei gekuerzte Angaben
   * nebeneinander, von denen keine mehr lesbar ist. Der Name weicht und nicht
   * die Firmierung, weil das Initial im Avatar daneben stehen bleibt: Wer
   * angemeldet ist, weiss ohnehin, wer er ist; in welcher Organisation er
   * gerade arbeitet, sagt ihm nur diese Zeile. */
  .hc-person__name { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

@media print {
  .hc-sidebar, .hc-topbar, .hc-footer { display: none; }
  .hc-app { display: block; }
  .hc-card, .hc-kpi { break-inside: avoid; box-shadow: none; }
}