/* Stocker PWA — Komponenten
   Jede Komponente eine Klasse. Mobile-first, Dark, kein Framework.
   Reihenfolge: Reset, Layout, Typo, Buttons, Formulare, Karten, Listen,
   Timeline, Jetzt-Kachel, Status, Chips, Toggle, Tiles, Meter, Chat,
   Puck-Navigation, Overlays, Zustände, Skeleton, Toast, Logo, Icons, Utilities.
*/

/* ============ Reset ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--st-bg);
  color: var(--st-text);
  font-family: var(--st-font-sans);
  font-size: var(--st-fs-base);
  line-height: var(--st-lh-body);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; padding: 0; cursor: pointer; }
a { color: var(--st-accent); text-decoration: none; }
a:hover, a:focus-visible { color: var(--st-accent-link); }
:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 2px; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }

/* ============ Layout ============ */
.st-app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--st-bg);
}
.st-screen { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.st-screen--login { background: var(--st-grad-login); }

/* Scrollbereich: unten Platz für Scrim + Puck */
.st-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--st-scroll-bottom);
  animation: st-screen-in var(--st-dur-screen) var(--st-ease) both;
}
.st-scroll--flush { padding-bottom: var(--st-sp-9); }

.st-pad { padding-left: var(--st-gutter); padding-right: var(--st-gutter); }

.st-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--st-sp-5);
  padding: var(--st-sp-8) var(--st-gutter) 0;
}
.st-head__actions { display: flex; align-items: center; gap: var(--st-sp-4); }

.st-title { font-size: var(--st-fs-4xl); font-weight: var(--st-fw-black); letter-spacing: var(--st-ls-tight); line-height: var(--st-lh-tight); }
.st-title--detail { font-size: var(--st-fs-5xl); }
.st-subtitle { font-size: var(--st-fs-base); color: var(--st-text-dim); margin-top: var(--st-sp-2); text-wrap: pretty; }
.st-eyebrow {
  font-family: var(--st-font-mono);
  font-size: var(--st-fs-mono-xs);
  letter-spacing: var(--st-ls-section);
  text-transform: uppercase;
  color: var(--st-text-faint);
}
.st-eyebrow--accent { color: var(--st-accent-text); }
.st-eyebrow--warn { color: var(--st-warning); }

.st-section { margin-top: var(--st-sp-10); padding: 0 var(--st-gutter); }
.st-section__head { display: flex; align-items: center; gap: var(--st-sp-3); margin-bottom: var(--st-sp-5); }
.st-section__rule { flex: 1; height: 1px; background: var(--st-border-strong); }
.st-section__meta { font-family: var(--st-font-mono); font-size: var(--st-fs-mono-xs); color: var(--st-text-faint); }

/* Zurück-Zeile über Detailtiteln */
.st-back { display: flex; align-items: center; gap: var(--st-sp-5); padding: var(--st-sp-7) var(--st-gutter) 0; }

/* ============ Buttons ============ */
.st-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--st-sp-5);
  min-height: var(--st-btn-h);
  padding: 0 var(--st-sp-7);
  border-radius: var(--st-r-md);
  font-size: var(--st-fs-md);
  font-weight: var(--st-fw-bold);
  color: var(--st-text);
  background: var(--st-surface-raised);
  border: 1px solid var(--st-border-strong);
  transition: transform var(--st-dur-fast) var(--st-ease), background var(--st-dur-fast) var(--st-ease);
}
.st-btn:active { transform: scale(.97); }
.st-btn[disabled] { opacity: .4; pointer-events: none; }

.st-btn--primary { background: var(--st-accent); border-color: var(--st-accent); color: var(--st-text-on-accent); box-shadow: var(--st-shadow-accent); }
.st-btn--primary:active { background: var(--st-accent-press); }
.st-btn--success { background: var(--st-success-soft); border-color: var(--st-success-border); color: var(--st-success); box-shadow: none; }
.st-btn--warning { background: var(--st-warning); border-color: var(--st-warning); color: var(--st-text-on-warn); box-shadow: none; }
.st-btn--danger  { background: transparent; border-color: rgba(255,69,36,.35); color: var(--st-accent-link); font-weight: var(--st-fw-semi); }
.st-btn--ghost   { background: rgba(255,255,255,.07); border-color: var(--st-border-strong); }
.st-btn--outline { background: transparent; border-color: var(--st-border-stronger); color: var(--st-text-dim); font-weight: var(--st-fw-regular); }
.st-btn--quiet   { background: transparent; border-color: transparent; color: var(--st-text-dim); }

.st-btn--lg    { min-height: var(--st-btn-h-lg); border-radius: var(--st-r-xl); font-size: var(--st-fs-xl); }
.st-btn--sm    { min-height: var(--st-btn-h-sm); border-radius: var(--st-r-sm); font-size: var(--st-fs-sm2); }
.st-btn--block { display: flex; width: 100%; }
.st-btn--grow  { flex: 1; }

/* Quadratische Icon-Buttons */
.st-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--st-icon-btn);
  height: var(--st-icon-btn);
  flex: none;
  border-radius: var(--st-r-md);
  background: rgba(255,255,255,.07);
  border: 1px solid var(--st-border-strong);
  color: var(--st-text);
  transition: transform var(--st-dur-fast) var(--st-ease);
}
.st-iconbtn:active { transform: scale(.94); }
.st-iconbtn--sm { width: var(--st-icon-btn-sm); height: var(--st-icon-btn-sm); border-radius: var(--st-r-sm); background: var(--st-surface-raised); border-color: rgba(255,255,255,.09); }
.st-iconbtn--success { background: var(--st-success-soft); border-color: var(--st-success-border); color: var(--st-success); }
.st-iconbtn--accent { background: var(--st-accent); border-color: var(--st-accent); color: var(--st-text-on-accent); }
.st-iconbtn--badge { position: relative; }

/* Textbutton im Kopf, z. B. ALLE GELESEN */
.st-textbtn {
  font-family: var(--st-font-mono);
  font-size: var(--st-fs-mono-xs);
  letter-spacing: var(--st-ls-label);
  text-transform: uppercase;
  color: var(--st-accent);
  padding: var(--st-sp-2) 0;
  min-height: 32px;
}

/* Runder Diktier-/Aufnahmeknopf */
.st-recbtn {
  width: 56px; height: 56px; flex: none;
  border-radius: var(--st-r-circle);
  background: var(--st-accent);
  color: var(--st-text-on-accent);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--st-shadow-mic);
}
.st-recbtn:active { transform: scale(.94); }
.st-recbtn--active { animation: st-rec-pulse 1.4s var(--st-ease) infinite; }

.st-badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: var(--st-r-pill);
  background: var(--st-accent);
  color: var(--st-text-on-accent);
  font-family: var(--st-font-mono);
  font-size: var(--st-fs-mono-xs);
  display: flex; align-items: center; justify-content: center;
}

.st-avatar {
  width: var(--st-avatar); height: var(--st-avatar); flex: none;
  border-radius: var(--st-r-sm);
  background: var(--st-accent);
  color: var(--st-text-on-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--st-fs-md); font-weight: var(--st-fw-bold);
}
.st-avatar--lg { width: var(--st-avatar-lg); height: var(--st-avatar-lg); border-radius: var(--st-r-xl); font-size: var(--st-fs-2xl); font-weight: var(--st-fw-black); }
.st-avatar--muted { background: var(--st-surface-raised); color: var(--st-text-mid); border: 1px solid var(--st-border); }

/* ============ Formulare ============ */
.st-field { display: flex; flex-direction: column; gap: var(--st-sp-2); }
.st-field__label {
  font-family: var(--st-font-mono);
  font-size: var(--st-fs-mono-xs);
  letter-spacing: var(--st-ls-meta);
  text-transform: uppercase;
  color: var(--st-text-faint);
}
.st-input, .st-select, .st-textarea {
  width: 100%;
  min-height: var(--st-field-h);
  padding: 0 var(--st-sp-7);
  border-radius: var(--st-r-lg);
  background: var(--st-surface-raised);
  border: 1px solid var(--st-border-strong);
  color: var(--st-text);
  font-size: var(--st-fs-md);
}
.st-textarea { padding: var(--st-sp-6) var(--st-sp-7); min-height: 96px; line-height: var(--st-lh-body); resize: vertical; }
.st-input::placeholder, .st-textarea::placeholder { color: var(--st-text-faint); }
.st-select { appearance: none; padding-right: 44px; }

/* Suchfeld mit Icon links und Textbutton rechts */
.st-search {
  display: flex; align-items: center; gap: var(--st-sp-4);
  height: var(--st-field-h);
  padding: 0 var(--st-sp-7);
  border-radius: var(--st-r-lg);
  background: var(--st-surface-raised);
  border: 1px solid var(--st-border-strong);
}
.st-search__icon { color: var(--st-text-faint); flex: none; }
.st-search__input { flex: 1; min-width: 0; background: none; border: none; outline: none; font-size: var(--st-fs-md); }

/* Stunden-Schnellwahl */
.st-quick { display: flex; flex-wrap: wrap; gap: var(--st-sp-3); }
.st-quick__btn {
  min-width: 62px; min-height: var(--st-tap-min);
  padding: 0 var(--st-sp-6);
  border-radius: var(--st-r-sm);
  background: var(--st-surface-raised);
  border: 1px solid var(--st-border-strong);
  font-family: var(--st-font-mono);
  font-size: var(--st-fs-mono-md);
  color: var(--st-text-mid);
}
.st-quick__btn--on { background: var(--st-accent); border-color: var(--st-accent); color: var(--st-text-on-accent); }

/* Segmentierte Umschaltung, z. B. Monteur / Büro */
.st-segmented {
  display: flex; gap: var(--st-sp-1);
  padding: var(--st-sp-1);
  border-radius: var(--st-r-md);
  background: var(--st-surface);
  border: 1px solid var(--st-border);
}
.st-segmented__item {
  flex: 1; min-height: var(--st-btn-h-sm);
  border-radius: var(--st-r-sm);
  font-size: var(--st-fs-sm2); font-weight: var(--st-fw-semi);
  color: var(--st-text-dim);
}
.st-segmented__item--on { background: var(--st-accent); color: var(--st-text-on-accent); }

/* ============ Karten & Panels ============ */
.st-card {
  padding: var(--st-sp-6) var(--st-sp-7);
  border-radius: var(--st-r-xl);
  background: var(--st-surface);
  border: 1px solid var(--st-border);
}
.st-card--accent { background: var(--st-surface-accent); border-color: var(--st-border-accent); }
.st-card--suggest { background: var(--st-grad-warn); border-color: var(--st-border-warn); border-radius: var(--st-r-2xl); padding: var(--st-sp-7); }
.st-card--left-accent { border-left: 3px solid var(--st-accent); }
.st-card--left-warn { border-left: 3px solid var(--st-warning); border-radius: var(--st-r-xl); }
.st-card--tap { cursor: pointer; transition: border-color var(--st-dur-fast) var(--st-ease), background var(--st-dur-fast) var(--st-ease); }
.st-card--tap:hover { border-color: rgba(255,69,36,.4); }
.st-card--tap:active { background: var(--st-surface-hover); }
.st-card__title { font-size: var(--st-fs-md); font-weight: var(--st-fw-bold); line-height: var(--st-lh-snug); }
.st-card__text { font-size: var(--st-fs-sm2); color: var(--st-text-dim); line-height: var(--st-lh-body); margin-top: var(--st-sp-1); }
.st-card__actions { display: flex; gap: var(--st-sp-3); margin-top: var(--st-sp-5); }

.st-panel {
  padding: var(--st-sp-7);
  border-radius: var(--st-r-2xl);
  background: var(--st-surface);
  border: 1px solid var(--st-border);
}
.st-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--st-sp-4); margin-bottom: var(--st-sp-6); }

/* ============ Listenzeilen ============ */
.st-list { display: flex; flex-direction: column; gap: var(--st-sp-4); }
.st-row {
  display: block; width: 100%; text-align: left;
  padding: var(--st-sp-6) var(--st-sp-7);
  border-radius: var(--st-r-xl);
  background: var(--st-surface);
  border: 1px solid var(--st-border);
}
.st-row--tap { cursor: pointer; transition: border-color var(--st-dur-fast) var(--st-ease); }
.st-row--tap:hover { border-color: rgba(255,69,36,.4); }
.st-row--tap:active { background: var(--st-surface-hover); }
.st-row--accent { background: var(--st-surface-accent); border-color: rgba(255,69,36,.28); }
.st-row--icon { display: grid; grid-template-columns: 40px 1fr; gap: var(--st-sp-5); padding-left: var(--st-sp-5); }
.st-row--split { display: flex; align-items: center; gap: var(--st-sp-5); }
.st-row__top { display: flex; align-items: center; gap: var(--st-sp-3); }
.st-row__title { font-size: var(--st-fs-lg); font-weight: var(--st-fw-bold); line-height: var(--st-lh-snug); margin-top: var(--st-sp-2); }
.st-row__title--sm { font-size: var(--st-fs-md); margin-top: 0; }
.st-row__sub { font-size: var(--st-fs-sm2); color: var(--st-text-dim); margin-top: var(--st-sp-1); line-height: var(--st-lh-body); }
.st-row__meta { margin-left: auto; font-family: var(--st-font-mono); font-size: var(--st-fs-mono-xs); color: var(--st-text-faintest); }
.st-row__icon {
  width: 40px; height: 40px; border-radius: var(--st-r-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--st-neutral-soft); color: var(--st-neutral);
}
.st-row__icon--accent  { background: var(--st-accent-soft);  color: var(--st-accent); }
.st-row__icon--info    { background: var(--st-info-soft);    color: var(--st-info); }
.st-row__icon--warning { background: var(--st-warning-soft); color: var(--st-warning); }
.st-row__icon--success { background: var(--st-success-soft); color: var(--st-success); }

/* Tagesliste der Monatsübersicht: Datum | Inhalt | Saldo */
.st-dayrow {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: var(--st-sp-5);
  align-items: center;
  padding: var(--st-sp-5) var(--st-sp-6);
  border-radius: var(--st-r-lg);
  background: var(--st-surface);
  border: 1px solid var(--st-border);
  width: 100%; text-align: left;
}
.st-dayrow--today { border-color: var(--st-border-accent); background: var(--st-surface-accent); }
.st-dayrow--off { opacity: .72; }
.st-dayrow__date { font-family: var(--st-font-mono); font-size: var(--st-fs-mono-md); color: var(--st-text-dim); line-height: 1.25; }
.st-dayrow__dow  { display: block; font-size: var(--st-fs-mono-xs); color: var(--st-text-faintest); }
.st-dayrow__main { min-width: 0; }
.st-dayrow__times { font-family: var(--st-font-mono); font-size: var(--st-fs-mono-md); color: var(--st-text); }
.st-dayrow__note  { font-size: var(--st-fs-sm); color: var(--st-text-dim); margin-top: 2px; }
.st-dayrow__saldo { font-family: var(--st-font-mono); font-size: var(--st-fs-mono-md); font-weight: var(--st-fw-bold); }
.st-saldo--plus  { color: var(--st-success); }
.st-saldo--minus { color: var(--st-accent-text); }
.st-saldo--zero  { color: var(--st-text-faint); }

/* ============ Timeline ============ */
.st-timeline { display: flex; flex-direction: column; }
.st-tl {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: var(--st-sp-6);
  width: 100%; text-align: left;
  padding-bottom: var(--st-sp-8);
}
.st-tl__rail { display: flex; flex-direction: column; align-items: center; gap: var(--st-sp-2); }
.st-tl__time { font-family: var(--st-font-mono); font-size: var(--st-fs-mono-md); color: var(--st-text-dim); }
.st-tl__dot {
  width: 10px; height: 10px; border-radius: var(--st-r-circle);
  background: var(--st-neutral);
  box-shadow: 0 0 0 4px var(--st-neutral-soft);
}
.st-tl__line { flex: 1; width: 1px; background: var(--st-border-strong); }
.st-tl:last-child .st-tl__line { background: transparent; }
.st-tl--running .st-tl__time { color: var(--st-accent); }
.st-tl--running .st-tl__dot  { background: var(--st-accent); box-shadow: 0 0 0 4px var(--st-accent-soft); }
.st-tl--done .st-tl__dot     { background: var(--st-success); box-shadow: 0 0 0 4px var(--st-success-soft); }
.st-tl--late .st-tl__dot     { background: var(--st-warning); box-shadow: 0 0 0 4px var(--st-warning-soft); }

/* ============ Jetzt-Kachel ============ */
.st-now {
  margin: var(--st-sp-5) var(--st-gutter) 0;
  padding: var(--st-sp-8);
  border-radius: var(--st-r-3xl);
  background: var(--st-grad-now);
  border: 1px solid var(--st-border-accent);
  box-shadow: var(--st-shadow-card);
}
.st-now__head { display: flex; align-items: center; gap: var(--st-sp-3); }
.st-now__pulse {
  width: 8px; height: 8px; border-radius: var(--st-r-circle);
  background: var(--st-accent);
  animation: st-live-pulse 1.6s ease-in-out infinite;
}
.st-now__label { font-family: var(--st-font-mono); font-size: var(--st-fs-mono-xs); letter-spacing: var(--st-ls-section); color: var(--st-accent-text); }
.st-now__timer {
  margin-left: auto;
  font-family: var(--st-font-mono);
  font-size: var(--st-fs-mono-xl);
  font-weight: var(--st-fw-bold);
  letter-spacing: var(--st-ls-tight);
  font-variant-numeric: tabular-nums;
}
.st-now__title { font-size: var(--st-fs-2xl); font-weight: var(--st-fw-bold); line-height: var(--st-lh-snug); margin-top: var(--st-sp-5); }
.st-now__place { font-size: var(--st-fs-base); color: #9AA2AC; margin-top: var(--st-sp-2); }
.st-now__actions { display: flex; gap: var(--st-sp-3); margin-top: var(--st-sp-7); }

/* Großer Ticker der Stempeluhr */
.st-ticker { text-align: center; padding: var(--st-sp-9) 0; }
.st-ticker__value {
  font-family: var(--st-font-mono);
  font-size: var(--st-fs-mono-2xl);
  font-weight: var(--st-fw-bold);
  letter-spacing: var(--st-ls-tight);
  font-variant-numeric: tabular-nums;
}
.st-ticker__label { margin-top: var(--st-sp-2); }

/* ============ Status-Label & Chips ============ */
.st-status {
  font-family: var(--st-font-mono);
  font-size: var(--st-fs-mono-xs);
  letter-spacing: var(--st-ls-meta);
  text-transform: uppercase;
  color: var(--st-neutral);
}
.st-status--offen    { color: var(--st-neutral); }
.st-status--begonnen { color: var(--st-accent); }
.st-status--erledigt { color: var(--st-success); }
.st-status--offline  { color: var(--st-warning); }

.st-pill {
  display: inline-flex; align-items: center; gap: var(--st-sp-2);
  padding: 5px 9px;
  border-radius: var(--st-r-pill);
  font-family: var(--st-font-mono);
  font-size: var(--st-fs-mono-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--st-neutral-soft); color: var(--st-neutral);
}
.st-pill--accent    { background: var(--st-accent-soft);  color: var(--st-accent); }
.st-pill--info      { background: var(--st-info-soft);    color: var(--st-info); }
.st-pill--warning   { background: var(--st-warning-soft); color: var(--st-warning); }
.st-pill--success   { background: var(--st-success-soft); color: var(--st-success); }
.st-pill--danger    { background: var(--st-danger-soft);  color: var(--st-danger); }

.st-chip {
  min-height: var(--st-tap-min);
  padding: 0 var(--st-sp-6);
  border-radius: var(--st-r-pill);
  background: var(--st-surface-raised);
  border: 1px solid var(--st-border-strong);
  color: var(--st-text-dim);
  font-family: var(--st-font-mono);
  font-size: var(--st-fs-mono-sm);
  letter-spacing: var(--st-ls-label);
  display: inline-flex; align-items: center; gap: var(--st-sp-2);
}
.st-chip--on { background: var(--st-accent); border-color: var(--st-accent); color: var(--st-text-on-accent); }
.st-chip--urlaub   { background: var(--st-info-soft);    border-color: transparent; color: var(--st-info); }
.st-chip--krank    { background: var(--st-danger-soft);  border-color: transparent; color: var(--st-danger); }
.st-chip--feiertag { background: var(--st-warning-soft); border-color: transparent; color: var(--st-warning); }
.st-chip--za       { background: var(--st-success-soft); border-color: transparent; color: var(--st-success); }
.st-chips { display: flex; flex-wrap: wrap; gap: var(--st-sp-3); }

/* ============ Toggle ============ */
.st-toggle {
  width: 46px; height: 27px; flex: none;
  border-radius: var(--st-r-pill);
  background: rgba(255,255,255,.12);
  padding: 3px;
  display: flex; justify-content: flex-start;
  transition: background var(--st-dur-fast) var(--st-ease);
}
.st-toggle__knob { width: 21px; height: 21px; border-radius: var(--st-r-circle); background: #fff; transition: transform var(--st-dur-fast) var(--st-ease); }
.st-toggle--on { background: var(--st-accent); justify-content: flex-end; }

.st-setting { display: flex; align-items: center; gap: var(--st-sp-5); width: 100%; text-align: left; padding: var(--st-sp-6) var(--st-sp-7); border-radius: var(--st-r-lg); background: var(--st-surface); border: 1px solid var(--st-border); }
.st-setting__main { flex: 1; min-width: 0; }
.st-setting__label { font-size: var(--st-fs-md); font-weight: var(--st-fw-semi); }
.st-setting__sub { font-size: var(--st-fs-sm); color: var(--st-text-dim); margin-top: 3px; }

/* ============ Kennzahl-Tiles & Stats ============ */
.st-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--st-sp-4); }
.st-tile { padding: var(--st-sp-6); border-radius: var(--st-r-xl); background: var(--st-surface); border: 1px solid var(--st-border); text-align: left; width: 100%; }
.st-tile__label { font-family: var(--st-font-mono); font-size: var(--st-fs-mono-xs); letter-spacing: var(--st-ls-meta); text-transform: uppercase; color: var(--st-text-faint); }
.st-tile__value { font-size: 21px; font-weight: var(--st-fw-bold); margin-top: var(--st-sp-3); }
.st-tile__hint { font-size: var(--st-fs-sm); color: var(--st-text-dim); margin-top: 2px; }

.st-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--st-sp-4); }
.st-stat { padding: var(--st-sp-6) var(--st-sp-5); border-radius: var(--st-r-lg); background: var(--st-surface); border: 1px solid var(--st-border); text-align: center; }
.st-stat__value { font-family: var(--st-font-mono); font-size: var(--st-fs-mono-lg); font-weight: var(--st-fw-bold); }
.st-stat__label { font-size: var(--st-fs-xs); color: var(--st-text-dim); margin-top: var(--st-sp-1); }

/* Soll/Ist/Saldo-Leiste */
.st-balance { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border-radius: var(--st-r-xl); overflow: hidden; background: var(--st-border); border: 1px solid var(--st-border); }
.st-balance__cell { background: var(--st-surface); padding: var(--st-sp-6) var(--st-sp-5); text-align: center; }
.st-balance__label { font-family: var(--st-font-mono); font-size: var(--st-fs-mono-xs); letter-spacing: var(--st-ls-meta); color: var(--st-text-faint); text-transform: uppercase; }
.st-balance__value { font-family: var(--st-font-mono); font-size: var(--st-fs-mono-lg); font-weight: var(--st-fw-bold); margin-top: var(--st-sp-2); }

/* Fortschritt / Lieferstatus */
.st-meter { height: 4px; border-radius: 2px; background: rgba(255,255,255,.07); margin-top: var(--st-sp-5); overflow: hidden; }
.st-meter__fill { height: 100%; border-radius: 2px; background: var(--st-info); }
.st-meter__fill--warning { background: var(--st-warning); }
.st-meter__fill--success { background: var(--st-success); }

/* Kartenplatzhalter im Auftrag-Detail */
.st-map { position: relative; height: 140px; background: var(--st-grad-map); }
.st-map__grid { position: absolute; inset: 0; background-image: linear-gradient(var(--st-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--st-grid-line) 1px, transparent 1px); background-size: 26px 26px; }
.st-map__route { position: absolute; left: 30px; right: 60px; top: 78px; height: 3px; border-radius: 2px; background: rgba(255,69,36,.45); }
.st-map__pin { position: absolute; left: 26px; top: 66px; width: 26px; height: 26px; border-radius: var(--st-r-circle); border: 3px solid var(--st-accent); background: var(--st-bg); }
.st-map__eta { position: absolute; right: 44px; top: 40px; padding: 6px 10px; border-radius: var(--st-r-sm); background: var(--st-accent); color: var(--st-text-on-accent); font-family: var(--st-font-mono); font-size: var(--st-fs-mono-sm); }
.st-mapcard { margin: var(--st-sp-8) var(--st-gutter) 0; border-radius: var(--st-r-3xl); overflow: hidden; border: 1px solid rgba(255,255,255,.08); }
.st-mapcard__bar { display: flex; gap: var(--st-sp-4); padding: var(--st-sp-6); background: var(--st-surface); }

/* Diktier-Pegel */
.st-levels { display: flex; align-items: flex-end; gap: 3px; height: 34px; flex: 1; }
.st-levels__bar { flex: 1; background: rgba(255,69,36,.55); border-radius: 2px; }

/* ============ Chat / Notizbrett ============ */
.st-chat { display: flex; flex-direction: column; gap: var(--st-sp-4); }
.st-msg { max-width: 82%; padding: var(--st-sp-5) var(--st-sp-6); border-radius: var(--st-r-xl); background: var(--st-surface); border: 1px solid var(--st-border); font-size: var(--st-fs-base); line-height: var(--st-lh-body); }
.st-msg--in  { align-self: flex-start; border-bottom-left-radius: var(--st-sp-2); }
.st-msg--out { align-self: flex-end; background: var(--st-accent-soft); border-color: var(--st-border-accent); border-bottom-right-radius: var(--st-sp-2); }
.st-msg__meta { display: block; font-family: var(--st-font-mono); font-size: var(--st-fs-mono-xs); color: var(--st-text-faintest); margin-top: var(--st-sp-2); }
.st-composer { display: flex; align-items: center; gap: var(--st-sp-3); padding: var(--st-sp-5) var(--st-gutter); background: var(--st-bg); border-top: 1px solid var(--st-border); }
.st-composer__input { flex: 1; min-width: 0; min-height: var(--st-btn-h); padding: 0 var(--st-sp-6); border-radius: var(--st-r-md); background: var(--st-surface-raised); border: 1px solid var(--st-border-strong); font-size: var(--st-fs-md); }

/* Anhänge */
.st-attach { display: flex; align-items: center; gap: var(--st-sp-5); padding: var(--st-sp-5) var(--st-sp-6); border-radius: var(--st-r-lg); background: var(--st-surface); border: 1px solid var(--st-border); width: 100%; text-align: left; }
.st-attach__icon { width: 36px; height: 36px; flex: none; border-radius: var(--st-r-sm); background: var(--st-neutral-soft); color: var(--st-text-mid); display: flex; align-items: center; justify-content: center; }
.st-attach__name { font-size: var(--st-fs-sm2); font-weight: var(--st-fw-semi); }
.st-attach__meta { font-family: var(--st-font-mono); font-size: var(--st-fs-mono-xs); color: var(--st-text-faintest); margin-top: 2px; }

/* Fotoraster */
.st-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--st-sp-3); }
.st-photo { aspect-ratio: 1; border-radius: var(--st-r-sm); background: var(--st-grad-map); border: 1px solid var(--st-border); display: flex; align-items: center; justify-content: center; color: var(--st-text-faintest); }
.st-photo--add { background: var(--st-surface); border-style: dashed; border-color: var(--st-border-strong); color: var(--st-accent); }

/* ============ Puck-Navigation ============ */
.st-puckbar {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: var(--st-dial-h);
  pointer-events: none;
  z-index: var(--st-z-puckbar);
}
.st-puckbar__scrim { position: absolute; left: 0; right: 0; bottom: 0; height: var(--st-scrim-h); background: var(--st-grad-scrim); z-index: var(--st-z-scrim); }
.st-puckbar__row {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--st-sp-6);
  pointer-events: auto;
  z-index: var(--st-z-dial);
}
.st-puck {
  width: var(--st-puck); height: var(--st-puck);
  border-radius: var(--st-r-circle);
  background: var(--st-accent);
  border: 1px solid var(--st-border-stronger);
  color: var(--st-text-on-accent);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--st-shadow-puck);
  transition: transform var(--st-dur-fast) var(--st-ease), background var(--st-dur-fast) var(--st-ease);
}
.st-puck:active { transform: scale(.93); }
.st-puck--open { background: #1B2027; }
.st-puck__hint {
  width: 62px;
  font-family: var(--st-font-mono);
  font-size: var(--st-fs-mono-xs);
  letter-spacing: .20em;
  color: var(--st-text-faintest);
}
.st-puck__hint--left { text-align: right; }
.st-puckbar--open .st-puck__hint { visibility: hidden; }

.st-dial { position: absolute; inset: 0; pointer-events: none; }
.st-dial__scrim {
  position: fixed; inset: 0;
  background: rgba(6,7,9,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: auto;
  z-index: var(--st-z-scrim);
}
/* Modulraster: wächst mit der Zahl der Module, statt sie auf einen Bogen zu zwängen */
.st-dial__sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  pointer-events: auto;
  z-index: var(--st-z-dial);
  padding: var(--st-sp-6) var(--st-sp-7) 108px;
  background: #0E1116;
  border-top: 1px solid rgba(255,255,255,.09);
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -24px 60px rgba(0,0,0,.6);
  max-height: 78dvh;
  overflow-y: auto;
  animation: st-sheet-up var(--st-dur-base) var(--st-ease) both;
}
.st-dial__handle { width: 44px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.22); margin: 0 auto var(--st-sp-7); }
.st-dial__group { margin-bottom: var(--st-sp-8); }
.st-dial__grouphead { display: flex; align-items: center; gap: var(--st-sp-3); margin-bottom: var(--st-sp-4); }
.st-dial__grouprule { flex: 1; height: 1px; background: var(--st-border-strong); }
.st-dial__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--st-sp-4); }
.st-dial__item {
  height: 84px;
  padding: var(--st-sp-2);
  border-radius: var(--st-r-xl);
  background: var(--st-surface-dial);
  border: 1px solid rgba(255,255,255,.12);
  color: #E6E9ED;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px;
  animation: st-dial-in var(--st-dur-base) var(--st-ease) both;
  transition: transform var(--st-dur-fast) var(--st-ease);
}
.st-dial__item:active { transform: scale(.95); }
.st-dial__item--active { background: var(--st-accent); border-color: var(--st-accent); color: var(--st-text-on-accent); }
.st-dial__label { font-size: 11px; font-weight: var(--st-fw-semi); text-align: center; line-height: 1.15; }
/* Gestaffelte Einblendung, 22ms je Kachel */
.st-dial__item:nth-child(1) { animation-delay: 0ms; }
.st-dial__item:nth-child(2) { animation-delay: 22ms; }
.st-dial__item:nth-child(3) { animation-delay: 44ms; }
.st-dial__item:nth-child(4) { animation-delay: 66ms; }
.st-dial__item:nth-child(5) { animation-delay: 88ms; }
.st-dial__item:nth-child(6) { animation-delay: 110ms; }

/* ============ Overlays / Bottom Sheets ============ */
.st-overlay {
  position: fixed; inset: 0;
  background: rgba(6,7,9,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: flex-end;
  z-index: var(--st-z-overlay);
}
.st-sheet {
  width: 100%;
  max-height: 88dvh;
  overflow-y: auto;
  padding: var(--st-sp-5) var(--st-gutter) var(--st-sp-12);
  border-radius: var(--st-r-4xl) var(--st-r-4xl) 0 0;
  background: var(--st-bg);
  border-top: 1px solid var(--st-border-strong);
  box-shadow: var(--st-shadow-sheet);
  animation: st-sheet-up var(--st-dur-base) var(--st-ease) both;
}
.st-sheet__handle { width: 44px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.22); margin: 0 auto var(--st-sp-7); }
.st-sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--st-sp-5); margin-bottom: var(--st-sp-7); }
.st-sheet__title { font-size: var(--st-fs-3xl); font-weight: var(--st-fw-black); letter-spacing: var(--st-ls-tight); }
.st-sheet__actions { display: flex; gap: var(--st-sp-3); margin-top: var(--st-sp-8); }

/* ============ Zustände ============ */
.st-banner {
  display: flex; align-items: flex-start; gap: var(--st-sp-5);
  margin: var(--st-sp-6) var(--st-gutter) 0;
  padding: var(--st-sp-6) var(--st-sp-7);
  border-radius: var(--st-r-lg);
  background: var(--st-surface);
  border: 1px solid var(--st-border);
  border-left: 3px solid var(--st-neutral);
}
.st-banner--warning { border-left-color: var(--st-warning); background: var(--st-warning-soft); }
.st-banner--danger  { border-left-color: var(--st-danger);  background: var(--st-danger-soft); }
.st-banner--success { border-left-color: var(--st-success); background: var(--st-success-soft); }
.st-banner--info    { border-left-color: var(--st-info);    background: var(--st-info-soft); }
.st-banner__icon { flex: none; margin-top: 1px; }
.st-banner__title { font-size: var(--st-fs-md); font-weight: var(--st-fw-bold); }
.st-banner__text { font-size: var(--st-fs-sm2); color: var(--st-text-dim); margin-top: 2px; line-height: var(--st-lh-body); }

.st-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--st-sp-5); padding: 64px var(--st-sp-12); }
.st-state__icon { width: 56px; height: 56px; border-radius: var(--st-r-xl); background: var(--st-surface); border: 1px solid var(--st-border); display: flex; align-items: center; justify-content: center; color: var(--st-text-faint); }
.st-state__title { font-size: var(--st-fs-2xl); font-weight: var(--st-fw-bold); }
.st-state__text { font-size: var(--st-fs-base); color: var(--st-text-dim); line-height: var(--st-lh-loose); max-width: 30ch; }

.st-toast {
  position: fixed; left: var(--st-gutter); right: var(--st-gutter); bottom: 112px;
  display: flex; align-items: center; gap: var(--st-sp-5);
  padding: var(--st-sp-6) var(--st-sp-7);
  border-radius: var(--st-r-lg);
  background: var(--st-surface-raised);
  border: 1px solid var(--st-border-strong);
  box-shadow: var(--st-shadow-card);
  z-index: var(--st-z-toast);
  animation: st-toast-in var(--st-dur-base) var(--st-ease) both;
}
.st-toast--success { border-color: var(--st-success-border); }
.st-toast--warning { border-color: var(--st-border-warn); }
.st-toast__text { flex: 1; font-size: var(--st-fs-sm2); }
.st-toast__icon--success { color: var(--st-success); }
.st-toast__icon--warning { color: var(--st-warning); }

/* ============ Skeleton ============ */
.st-sk { position: relative; overflow: hidden; background: var(--st-surface); border-radius: var(--st-r-xl); border: 1px solid var(--st-border); }
.st-sk::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.045), transparent); animation: st-shimmer 1.4s linear infinite; }
.st-sk--line { height: 12px; border-radius: 6px; border: none; }
.st-sk--line-sm { height: 10px; width: 58%; }
.st-sk--card { height: 96px; }
.st-sk--now { height: 168px; border-radius: var(--st-r-3xl); }
.st-sk--tile { height: 88px; }

/* ============ Logo ============ */
.st-logo { display: inline-flex; align-items: center; gap: var(--st-sp-4); }
.st-logo__mark { display: block; height: 44px; width: auto; }
.st-logo--stacked { flex-direction: column; align-items: flex-start; gap: var(--st-sp-3); }
.st-logo__icon { height: 104px; width: auto; display: block; color: var(--st-text); flex: none; }
.st-logo__icon--sm { height: 40px; }
.st-logo__word { display: flex; flex-direction: column; gap: var(--st-sp-2); }
.st-logo__name { font-size: 38px; font-weight: var(--st-fw-black); letter-spacing: var(--st-ls-tight); line-height: .95; }
.st-logo__over { font-family: var(--st-font-mono); font-size: var(--st-fs-mono-xs); letter-spacing: .30em; color: var(--st-accent); }
.st-logo__claim { font-family: var(--st-font-mono); font-size: 9.5px; letter-spacing: .13em; color: var(--st-text-faint); }
.st-logo__sweep { position: relative; overflow: hidden; }
.st-logo__sweep::after { content: ""; position: absolute; inset: 0; background: var(--st-grad-sweep); animation: st-sweep 2.6s linear infinite; }

/* ============ Icons ============ */
.st-icon { width: 1.25em; height: 1.25em; flex: none; display: block; }
.st-icon--sm { width: 1em; height: 1em; }
.st-icon--lg { width: 22px; height: 22px; }
.st-icon--xl { width: 26px; height: 26px; }

/* ============ Utilities ============ */
.st-stack   { display: flex; flex-direction: column; gap: var(--st-sp-4); }
.st-stack-6 { display: flex; flex-direction: column; gap: var(--st-sp-6); }
.st-hstack  { display: flex; align-items: center; gap: var(--st-sp-4); }
.st-spread  { display: flex; align-items: center; justify-content: space-between; gap: var(--st-sp-5); }
.st-grid-2  { display: grid; grid-template-columns: 1fr 1fr; gap: var(--st-sp-4); }
.st-grow    { flex: 1; min-width: 0; }
.st-mono    { font-family: var(--st-font-mono); font-variant-numeric: tabular-nums; }
.st-dim     { color: var(--st-text-dim); }
.st-faint   { color: var(--st-text-faint); }
.st-accent  { color: var(--st-accent); }
.st-mt-4 { margin-top: var(--st-sp-4); }
.st-mt-6 { margin-top: var(--st-sp-6); }
.st-mt-8 { margin-top: var(--st-sp-8); }
.st-mb-4 { margin-bottom: var(--st-sp-4); }
.st-mr-4 { margin-right: var(--st-sp-4); }
.st-drop--over { outline: 2px dashed var(--st-accent); outline-offset: 4px; border-radius: var(--st-r-md, 12px); }
.st-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ============ Keyframes ============ */
@keyframes st-screen-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes st-rise-in   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes st-dial-in   { from { opacity: 0; transform: scale(.45) translateY(26px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes st-live-pulse{ 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } }
@keyframes st-rec-pulse { 0%, 100% { box-shadow: var(--st-shadow-mic); } 50% { box-shadow: 0 10px 26px rgba(255,69,36,.34), 0 0 0 10px rgba(255,69,36,.12); } }
@keyframes st-sweep     { from { transform: translateX(-100%); } to { transform: translateX(220%); } }
@keyframes st-shimmer   { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes st-sheet-up  { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes st-toast-in  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* ============ Modifier & Utilities für statische Werte
   (CSP-konform: keine style-Attribute im Markup.
   Laufzeitwerte wie Meter-Breiten setzt app.js über
   el.style.setProperty(...) — das ist von style-src nicht betroffen.) ============ */
.st-login { display: flex; flex-direction: column; justify-content: space-between; padding: 60px 28px 40px; }
.st-banner--flush { margin-left: 0; margin-right: 0; margin-top: 0; }
.st-chip--sm { min-height: 32px; }
.st-chip--inline { min-height: 24px; padding: 0 10px; margin-top: 6px; }
.st-avatar--xs { width: 26px; height: 26px; font-size: 11px; border-radius: 8px; }
.st-row--muted { opacity: .5; pointer-events: none; }
.st-sheet--inline { border-radius: var(--st-r-4xl); border: 1px solid var(--st-border-strong); }
.st-toast--static { position: static; left: auto; right: auto; bottom: auto; }
.st-title--sub { font-size: var(--st-fs-3xl); font-weight: var(--st-fw-bold); }
.st-card__title--lg { font-size: var(--st-fs-xl); }
.st-eyebrow--role { letter-spacing: var(--st-ls-meta); margin-top: 4px; }
.st-note-center { font-size: var(--st-fs-sm); text-align: center; }
.st-text-center { text-align: center; }
.st-text-right { text-align: right; }
.st-msg-attach { align-self: flex-start; max-width: 82%; }
.st-state__icon--warning { color: var(--st-warning); }
.st-state__icon--danger  { color: var(--st-danger); }
.st-status--kunde  { color: var(--st-info); }
.st-status--anlage { color: var(--st-warning); }
.st-w-25 { width: 25%; }
.st-w-40 { width: 40%; }
.st-w-48 { width: 48%; }
.st-w-62 { width: 62%; }
.st-w-100 { width: 100%; }
.st-levels__bar--h8 { height: 8px; }
.st-levels__bar--h10 { height: 10px; }
.st-levels__bar--h12 { height: 12px; }
.st-levels__bar--h14 { height: 14px; }
.st-levels__bar--h16 { height: 16px; }
.st-levels__bar--h18 { height: 18px; }
.st-levels__bar--h20 { height: 20px; }
.st-levels__bar--h22 { height: 22px; }
.st-levels__bar--h24 { height: 24px; }
.st-levels__bar--h26 { height: 26px; }
.st-levels__bar--h28 { height: 28px; }
.st-levels__bar--h30 { height: 30px; }
.st-levels__bar--h32 { height: 32px; }
.st-levels__bar--h34 { height: 34px; }


/* ============ Korrekturen: Zeilen als Link, Spans als Blöcke ============
   Viele Listenzeilen sind <a> oder <button> und enthalten <span>-Kinder.
   Links dürfen den Text nicht einfärben, und die Textspans müssen umbrechen. */
a.st-row, a.st-tl, a.st-tile, a.st-dayrow, a.st-attach, a.st-setting,
a.st-dial__item, a.st-segmented__item, a.st-chip, a.st-quick__btn,
a.st-btn, a.st-iconbtn, a.st-avatar, a.st-photo { color: inherit; text-decoration: none; }
a.st-row:hover, a.st-tl:hover, a.st-tile:hover, a.st-dayrow:hover,
a.st-attach:hover, a.st-btn:hover, a.st-iconbtn:hover { color: inherit; }
a.st-btn--primary, a.st-iconbtn--accent, a.st-dial__item--active,
a.st-segmented__item--on, a.st-chip--on, a.st-avatar { color: var(--st-text-on-accent); }
a.st-btn--outline { color: var(--st-text-dim); }
a.st-btn--danger { color: var(--st-accent-link); }

.st-card, .st-card__title, .st-card__text,
.st-row__title, .st-row__sub,
.st-tile__label, .st-tile__value, .st-tile__hint,
.st-dayrow__times, .st-dayrow__note,
.st-attach__name, .st-attach__meta,
.st-setting__label, .st-setting__sub,
.st-stat__value, .st-stat__label,
.st-balance__label, .st-balance__value,
.st-now__title, .st-now__place,
.st-state__title, .st-state__text,
.st-dial__label, .st-ticker__value { display: block; }

/* Timeline: die Karte im <a> füllt die Spalte */
a.st-tl > .st-card { display: block; height: 100%; }